diff --git a/Homepage.css b/Homepage.css
index c5dfa6e..9a48100 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -361,25 +361,6 @@ header {
   box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
 }
 
-/* Footer */
-footer {
-  position: relative;
-  z-index: 10;
-  text-align: center;
-  padding: 50px 20px;
-  margin-top: 150px;
-  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(15px);
-  border-top: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 -4px 30px rgba(0, 234, 255, 0.2);
-}
-
-footer p {
-  color: rgba(255, 255, 255, 0.65);
-  font-size: 15px;
-  font-family: 'Exo 2', sans-serif;
-  letter-spacing: 1.5px;
-}
 
 /* Floating Decoration Elements */
 .hero::before {
diff --git a/Homepage.html b/Homepage.html
index 18b60d2..6347e45 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Homepage</title>
   <link rel="stylesheet" href="Homepage.css">
+  <link rel="stylesheet" href="Homepage_Credit.css">
 </head>
 <body>
   <!-- Neon Particles Background -->
@@ -28,44 +29,58 @@
     </div>
   </section>
 
-  <!-- Footer -->
+  <!-- Spacer -->
+  <br><br><br>
 
+  <!-- Footer with Credits -->
+<footer>
+  <hr class="footer-hr">
+  <div class="credits">
+    <p class="credits-text">
+      <strong>2048</strong> - Created by Evelyn Sucitro, Jevinca Marvella Widjaya, and Michelle Aquilera
+    </p>
+  </div>
+</footer>
 
   <!-- Logout Confirmation Modal -->
-<div class="logout-overlay" id="logout-overlay" style="display: none">
-  <div class="logout-modal">
-    <div class="logout-icon">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-        <polyline points="16 17 21 12 16 7"/>
-        <line x1="21" y1="12" x2="9" y2="12"/>
-      </svg>
-    </div>
-    <h2 class="logout-title">Logout Confirmation</h2>
-    <p class="logout-message">Are you sure you want to logout?</p>
-    
-    <div class="logout-buttons">
-      <button class="btn-logout-cancel" id="btn-logout-cancel">Cancel</button>
-      <button class="btn-logout-confirm" id="btn-logout-confirm">Logout</button>
+  <div class="logout-overlay" id="logout-overlay" style="display: none">
+    <div class="logout-modal">
+      <div class="logout-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+          <polyline points="16 17 21 12 16 7"/>
+          <line x1="21" y1="12" x2="9" y2="12"/>
+        </svg>
+      </div>
+      <h2 class="logout-title">Logout Confirmation</h2>
+      <p class="logout-message">Are you sure you want to logout?</p>
+      
+      <div class="logout-buttons">
+        <button class="btn-logout-cancel" id="btn-logout-cancel">Cancel</button>
+        <button class="btn-logout-confirm" id="btn-logout-confirm">Logout</button>
+      </div>
     </div>
   </div>
-</div>
 
-<!-- Logout Success Modal -->
-<div class="logout-success-overlay" id="logout-success-overlay" style="display: none">
-  <div class="logout-success-modal">
-    <div class="success-icon">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-        <polyline points="20 6 9 17 4 12"/>
-      </svg>
+  <!-- Logout Success Modal -->
+  <div class="logout-success-overlay" id="logout-success-overlay" style="display: none">
+    <div class="logout-success-modal">
+      <div class="success-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+      </div>
+      <h2 class="success-title">Logout Successful!</h2>
+      <p class="success-message">You have been logged out successfully</p>
     </div>
-    <h2 class="success-title">Logout Successful!</h2>
-    <p class="success-message">You have been logged out successfully</p>
   </div>
-</div>
 
-<script src="Animation_Homepage.js"></script>
-<script src="logout.js"></script>
-<script src="Homepage.js"></script>
+  <script>
+    // Auto-update copyright year
+    document.getElementById('currentYear').textContent = new Date().getFullYear();
+  </script>
+  <script src="Animation_Homepage.js"></script>
+  <script src="Homepage.js"></script>
+  <script src="logout.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Homepage.js b/Homepage.js
index 49642cf..db7c356 100644
--- a/Homepage.js
+++ b/Homepage.js
@@ -4,7 +4,7 @@
     // ==================== DOM ELEMENTS ====================
     const elements = {
         logo: null,
-        loginBtn: null,
+        loginBtn: null, // Ini akan di-update oleh logout.js
         playBtn: null,
         leaderboardBtn: null,
         heroTitle: null,
@@ -46,7 +46,9 @@
     // ==================== CACHE ELEMENTS ====================
     function cacheElements() {
         elements.logo = document.querySelector('.logo');
-        elements.loginBtn = document.querySelector('a[href="Login.html"]');
+        // ✅ PERBAIKAN: Jangan cache loginBtn, biar logout.js yang handle
+        // Cek apakah button Login atau Logout
+        elements.loginBtn = document.querySelector('.btn-login') || document.querySelector('.btn-logout');
         elements.playBtn = document.querySelector('a[href="2048.html"]');
         elements.leaderboardBtn = document.querySelector('a[href="leaderboard.html"]');
         elements.heroTitle = document.querySelector('.hero-title');
@@ -73,10 +75,8 @@
             elements.logo.addEventListener('click', handleLogoClick);
         }
         
-        // Login button
-        if (elements.loginBtn) {
-            elements.loginBtn.addEventListener('click', handleLoginClick);
-        }
+        // ✅ PERBAIKAN: JANGAN tambah event listener ke loginBtn
+        // Biar logout.js yang handle login/logout button
         
         // Play button
         if (elements.playBtn) {
@@ -99,12 +99,7 @@
     // ==================== EVENT HANDLERS ====================
     function handleLogoClick(e) {
         e.preventDefault();
-        window.location.href = 'index.html';
-    }
-    
-    function handleLoginClick(e) {
-        // Allow default behavior (navigate to Login.html)
-        console.log('Navigating to Login page...');
+        window.location.href = 'Homepage.html';
     }
     
     function handlePlayClick(e) {
@@ -125,10 +120,11 @@
             }
         }
         
-        // Press 'L' to login
+        // Press 'L' to login (hanya jika belum login)
         if (e.key === 'l' || e.key === 'L') {
-            if (elements.loginBtn) {
-                elements.loginBtn.click();
+            const loginBtn = document.querySelector('.btn-login');
+            if (loginBtn) {
+                loginBtn.click();
             }
         }
         
@@ -208,10 +204,6 @@
             elements.logo.removeEventListener('click', handleLogoClick);
         }
         
-        if (elements.loginBtn) {
-            elements.loginBtn.removeEventListener('click', handleLoginClick);
-        }
-        
         if (elements.playBtn) {
             elements.playBtn.removeEventListener('click', handlePlayClick);
         }
diff --git a/Homepage_Credit.css b/Homepage_Credit.css
new file mode 100644
index 0000000..fe17e53
--- /dev/null
+++ b/Homepage_Credit.css
@@ -0,0 +1,354 @@
+/* ===========================
+   HOMEPAGE CREDIT STYLES
+   File: homepage credit.css
+=========================== */
+
+/* HR Line Above Footer */
+.footer-hr {
+  width: 80%;
+  max-width: 1000px;
+  height: 3px;
+  margin: 100px auto 0;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    #00eaff 20%, 
+    #ff00ff 50%, 
+    #00eaff 80%, 
+    transparent 100%);
+  border: none;
+  box-shadow: 
+    0 0 20px rgba(0, 234, 255, 0.6),zzz
+    0 0 40px rgba(255, 0, 255, 0.4);
+  animation: hrGlow 2s ease-in-out infinite alternate;
+  position: relative;
+  z-index: 10;
+}
+
+@keyframes hrGlow {
+  0% {
+    box-shadow: 0 0 20px rgba(0, 234, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 30px rgba(0, 234, 255, 0.9), 0 0 60px rgba(255, 0, 255, 0.6);
+  }
+}
+
+/* Footer Section - Futuristic Design */
+footer {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 80px 40px 60px;
+  margin-top: 80px;
+  background: linear-gradient(180deg, rgba(20, 0, 40, 0.4) 0%, rgba(20, 0, 40, 0.9) 100%);
+  backdrop-filter: blur(25px);
+  box-shadow: 0 -8px 40px rgba(0, 234, 255, 0.3);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+/* Background Animations */
+
+/* Glowing Orbs Background */
+footer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(0, 234, 255, 0.08), transparent 70%);
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: orbPulse 6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes orbPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.5;
+  }
+}
+
+/* Footer Content Container */
+.footer-content {
+  position: relative;
+  z-index: 2;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* Credits Container */
+.credits {
+  background: rgba(0, 234, 255, 0.05);
+  border: 2px solid rgba(0, 234, 255, 0.2);
+  border-radius: 20px;
+  padding: 40px 40px 35px;
+  margin: 0 auto;
+  max-width: 700px;
+  backdrop-filter: blur(10px);
+  box-shadow: 
+    0 8px 32px rgba(0, 234, 255, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: all 0.4s ease;
+}
+
+.credits:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 234, 255, 0.4);
+  box-shadow: 
+    0 15px 45px rgba(0, 234, 255, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+/* Game Title in Credits */
+.credits-title {
+  font-size: 28px;
+  font-weight: 900;
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 4px;
+  margin-bottom: 25px;
+  animation: gradientShift 4s ease infinite;
+  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.5));
+}
+
+/* "Created by" Label */
+.credits-intro {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  letter-spacing: 3px;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-family: 'Orbitron', sans-serif;
+}
+
+/* Creator Names Container */
+.creator-names {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  margin-bottom: 35px;
+}
+
+/* Individual Creator Name */
+.creator-name {
+  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 900;
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-family: 'Orbitron', sans-serif;
+  animation: gradientShift 4s ease infinite;
+  filter: drop-shadow(0 0 15px rgba(0, 234, 255, 0.5));
+  transition: all 0.3s ease;
+  position: relative;
+  padding: 8px 20px;
+  cursor: default;
+}
+
+.creator-name::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1), rgba(255, 0, 255, 0.1));
+  border-radius: 10px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.creator-name:hover::before {
+  opacity: 1;
+}
+
+.creator-name:hover {
+  transform: scale(1.08);
+  filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.9));
+  animation: gradientShift 1.5s ease infinite, nameFloat 0.6s ease;
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes nameFloat {
+  0%, 100% {
+    transform: scale(1.08) translateY(0);
+  }
+  50% {
+    transform: scale(1.08) translateY(-5px);
+  }
+}
+
+/* Separator Dots */
+.separator {
+  color: rgba(0, 234, 255, 0.4);
+  font-size: 8px;
+  margin: 0;
+  animation: separatorPulse 2s ease-in-out infinite;
+}
+
+@keyframes separatorPulse {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.3);
+  }
+}
+
+/* Divider Line Above Copyright */
+.copyright-divider {
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(0, 234, 255, 0.3) 20%,
+    rgba(255, 0, 255, 0.3) 50%,
+    rgba(0, 234, 255, 0.3) 80%,
+    transparent 100%);
+  margin-bottom: 20px;
+  box-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
+}
+
+/* Copyright Text */
+.copyright {
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 13px;
+  font-family: 'Exo 2', sans-serif;
+  letter-spacing: 1.5px;
+  font-weight: 300;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .footer-hr {
+    width: 85%;
+    margin: 80px auto 0;
+  }
+  
+  footer {
+    padding: 60px 30px 50px;
+    margin-top: 60px;
+    min-height: 350px;
+  }
+  
+  .credits {
+    padding: 35px 25px 30px;
+    max-width: 90%;
+  }
+  
+  .credits-title {
+    font-size: 24px;
+    letter-spacing: 3px;
+  }
+  
+  .creator-name {
+    font-size: 16px;
+    letter-spacing: 1.5px;
+  }
+  
+  .creator-names {
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-hr {
+    width: 90%;
+    height: 2px;
+    margin: 60px auto 0;
+  }
+  
+  footer {
+    padding: 50px 20px 40px;
+    margin-top: 50px;
+    min-height: 320px;
+  }
+  
+  .credits {
+    padding: 30px 20px 25px;
+    border-radius: 15px;
+  }
+  
+  .credits-title {
+    font-size: 22px;
+    letter-spacing: 2px;
+    margin-bottom: 20px;
+  }
+  
+  .credits-intro {
+    font-size: 11px;
+    letter-spacing: 2px;
+    margin-bottom: 15px;
+  }
+  
+  .creator-names {
+    gap: 12px;
+    margin-bottom: 25px;
+  }
+  
+  .creator-name {
+    font-size: 14px;
+    letter-spacing: 1px;
+    padding: 6px 15px;
+  }
+  
+  .separator {
+    font-size: 6px;
+  }
+  
+  .copyright {
+    font-size: 11px;
+    letter-spacing: 1px;
+  }
+  
+  .copyright-divider {
+    margin-bottom: 15px;
+  }
+}
+
+@media (max-width: 360px) {
+  .credits-title {
+    font-size: 20px;
+  }
+  
+  .creator-name {
+    font-size: 13px;
+    padding: 5px 12px;
+  }
+  
+  .credits-intro {
+    font-size: 10px;
+  }
+  
+  .copyright {
+    font-size: 10px;
+  }
+}
\ No newline at end of file
diff --git a/Login.js b/Login.js
index 82688be..2827333 100644
--- a/Login.js
+++ b/Login.js
@@ -1,7 +1,7 @@
 import { showModal, setupModalOk, setupOutsideClose } from "./Modal_Login.js";
 import { loginRequest } from "./Login_Request.js";
 
-// ✅ PENTING: Setup modal saat halaman load
+// ✅ Setup modal saat halaman load
 document.addEventListener('DOMContentLoaded', function() {
     setupModalOk();
     setupOutsideClose();
@@ -24,13 +24,20 @@ document.getElementById('loginForm').addEventListener('submit', async function(e
     try {
         const data = await loginRequest(username, password);
         
-        console.log('Response dari server:', data); // Debug
+        console.log('Response dari server:', data);
 
         if (data.success) {
-            localStorage.setItem('authToken', data.token);
-            localStorage.setItem('username', data.username);
+            // ✅ PERBAIKAN: Gunakan sessionStorage (sama dengan logout.js)
+            sessionStorage.setItem('authToken', data.token);
+            sessionStorage.setItem('loggedInUser', data.username);
             
             showModal('success', 'Login Successful', `Welcome, ${data.username}!`);
+            
+            // ✅ PERBAIKAN: Redirect ke Homepage setelah 1.5 detik
+            setTimeout(() => {
+                window.location.href = 'Homepage.html';
+            }, 1500);
+            
         } else {
             showModal('error', 'Login Failed', data.message || 'Incorrect username or password');
         }
diff --git a/Logout.js b/Logout.js
index 363d409..b253950 100644
--- a/Logout.js
+++ b/Logout.js
@@ -13,8 +13,14 @@
             loginBtn.classList.add('btn-logout');
             loginBtn.href = '#'; // Prevent navigation
             
-            // Add logout click handler
-            loginBtn.addEventListener('click', handleLogoutClick);
+            // Remove existing click listeners (untuk menghindari duplikat)
+            loginBtn.replaceWith(loginBtn.cloneNode(true));
+            
+            // Get new reference dan add logout handler
+            const newLogoutBtn = document.querySelector('.btn-logout');
+            if (newLogoutBtn) {
+                newLogoutBtn.addEventListener('click', handleLogoutClick);
+            }
             
             console.log('✅ User logged in:', loggedInUser);
         } else {
@@ -44,33 +50,42 @@
     function setupModalButtons() {
         const cancelBtn = document.getElementById('btn-logout-cancel');
         const confirmBtn = document.getElementById('btn-logout-confirm');
+        const overlay = document.getElementById('logout-overlay');
         
-        // Cancel button
+        // Remove previous listeners
         if (cancelBtn) {
-            cancelBtn.onclick = closeLogoutModal;
+            const newCancelBtn = cancelBtn.cloneNode(true);
+            cancelBtn.replaceWith(newCancelBtn);
+            newCancelBtn.onclick = closeLogoutModal;
         }
         
-        // Confirm button
         if (confirmBtn) {
-            confirmBtn.onclick = confirmLogout;
+            const newConfirmBtn = confirmBtn.cloneNode(true);
+            confirmBtn.replaceWith(newConfirmBtn);
+            newConfirmBtn.onclick = confirmLogout;
         }
         
         // Close on overlay click
-        const overlay = document.getElementById('logout-overlay');
         if (overlay) {
-            overlay.addEventListener('click', function(e) {
+            overlay.onclick = function(e) {
                 if (e.target === overlay) {
                     closeLogoutModal();
                 }
-            });
+            };
         }
         
-        // ESC key to close
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape') {
+        // ESC key to close (gunakan named function agar bisa di-remove)
+        document.addEventListener('keydown', handleEscapeKey);
+    }
+    
+    // ==================== HANDLE ESCAPE KEY ====================
+    function handleEscapeKey(e) {
+        if (e.key === 'Escape') {
+            const overlay = document.getElementById('logout-overlay');
+            if (overlay && overlay.classList.contains('active')) {
                 closeLogoutModal();
             }
-        });
+        }
     }
     
     // ==================== CLOSE LOGOUT MODAL ====================
@@ -82,12 +97,16 @@
                 overlay.style.display = 'none';
             }, 300);
         }
+        
+        // Remove escape key listener
+        document.removeEventListener('keydown', handleEscapeKey);
     }
     
     // ==================== CONFIRM LOGOUT ====================
     function confirmLogout() {
-        // Clear session
+        // ✅ Clear semua session data
         sessionStorage.removeItem("loggedInUser");
+        sessionStorage.removeItem("authToken");
         
         // Close logout modal
         closeLogoutModal();
@@ -98,7 +117,7 @@
         // Redirect after 1.5 seconds
         setTimeout(() => {
             window.location.href = 'Homepage.html';
-        }, 2000);
+        }, 1500);
     }
     
     // ==================== SHOW SUCCESS MODAL ====================
