diff --git a/Web/404.html b/Web/404.html
index 4c0c82e..5598215 100644
--- a/Web/404.html
+++ b/Web/404.html
@@ -1,27 +1,219 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>404</title>
-  <link rel="icon" type="image/png" href="assets/media/Logo.png">
-  <link rel="stylesheet" href="css/404.css">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>404 - Known</title>
+  <link rel="icon" type="image/png" href="assets/media/Logo.png" />
+  <link rel="stylesheet" href="css/404.css" />
+  <link rel="stylesheet" href="css/cursor.css" />
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+  />
+  <script>
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    const savedTheme = localStorage.getItem('theme');
+    document.documentElement.setAttribute(
+      'data-theme',
+      savedTheme || (prefersDark.matches ? 'dark' : 'light')
+    );
+    document.documentElement.setAttribute(
+      'data-theme-setting',
+      savedTheme || 'system'
+    );
+  </script>
 </head>
 <body>
-<div class="error-container">
-  <div class="error-logo">
-    <img src="assets/media/Logo.png" alt="Known Logo">
+<div class="error-page">
+  <div class="particles" id="particles" aria-hidden="true"></div>
+
+  <div class="controls">
+    <div class="theme-selector">
+      <button class="theme-toggle" type="button">
+        <i class="fas fa-sun light-icon"></i>
+        <i class="fas fa-moon dark-icon"></i>
+        <i class="fas fa-desktop system-icon"></i>
+      </button>
+      <div class="theme-dropdown">
+        <button data-theme="light">
+          <i class="fas fa-sun"></i>
+          <span data-i18n="theme.light">Light Mode</span>
+        </button>
+        <button data-theme="dark">
+          <i class="fas fa-moon"></i>
+          <span data-i18n="theme.dark">Dark Mode</span>
+        </button>
+        <button data-theme="system">
+          <i class="fas fa-desktop"></i>
+          <span data-i18n="theme.system">Follow System</span>
+        </button>
+      </div>
+    </div>
+    <div class="lang-selector">
+      <button class="lang-toggle" type="button">
+        <i class="fas fa-globe"></i>
+      </button>
+      <div class="lang-dropdown">
+        <button data-lang="zh"><span>简体中文</span></button>
+        <button data-lang="zh-tw"><span>繁體中文</span></button>
+        <button data-lang="en"><span>English (US)</span></button>
+        <button data-lang="en-GB"><span>English (UK)</span></button>
+      </div>
+    </div>
   </div>
-  <div class="error-content">
-    <h1>404</h1>
-    <h2 data-i18n="error.heading">Not Found</h2>
-    <p data-i18n="error.message">Sorry, The page you visited may have been removed.</p>
-    <div class="button-group">
-      <a href="index.html" class="back-home" data-i18n="error.home">Back to Home</a>
-      <button class="refresh-btn" onclick="window.location.reload()" data-i18n="error.refresh">Refresh</button>
+
+  <div class="error-layout">
+    <div class="error-logo">
+      <img src="assets/media/Logo.png" alt="Known Logo" />
+    </div>
+    <div class="error-content">
+      <h1 class="error-code" aria-label="404">404</h1>
+      <h2 data-i18n="error.heading">Not Found</h2>
+      <p data-i18n="error.message">
+        Sorry, the page you visited may have been removed.
+      </p>
+      <div class="button-group">
+        <a href="index.html" class="back-home" data-i18n="error.home">
+          Back to Home
+        </a>
+        <button
+          type="button"
+          class="refresh-btn"
+          onclick="window.location.reload()"
+          data-i18n="error.refresh"
+        >
+          Refresh
+        </button>
+      </div>
     </div>
   </div>
+
+  <p class="page-footer">
+    &copy; 2024 Known.
+    <span data-i18n="footer.copyright"
+    >Open-sourced under MIT License.</span
+    >
+  </p>
 </div>
+
 <script src="src/i18n.js"></script>
+<script>
+  // ===== Particles =====
+  const particlesContainer = document.getElementById('particles');
+  if (particlesContainer) {
+    const count = window.innerWidth < 768 ? 10 : 20;
+    for (let i = 0; i < count; i++) {
+      const particle = document.createElement('div');
+      particle.classList.add('particle');
+      const size = Math.random() * 14 + 6;
+      particle.style.width = size + 'px';
+      particle.style.height = size + 'px';
+      particle.style.left = Math.random() * 100 + '%';
+      particle.style.animationDuration = Math.random() * 10 + 10 + 's';
+      particle.style.animationDelay = Math.random() * 10 + 's';
+      particlesContainer.appendChild(particle);
+    }
+  }
+
+  // ===== Theme =====
+  function getSystemTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  }
+
+  function updateThemeIcons(theme) {
+    document.querySelectorAll('.theme-selector').forEach((selector) => {
+      const icons = {
+        light: selector.querySelector('.light-icon'),
+        dark: selector.querySelector('.dark-icon'),
+        system: selector.querySelector('.system-icon')
+      };
+      icons.light.style.display =
+        theme === 'light' ? 'inline-block' : 'none';
+      icons.dark.style.display = theme === 'dark' ? 'inline-block' : 'none';
+      icons.system.style.display =
+        theme === 'system' ? 'inline-block' : 'none';
+    });
+  }
+
+  function updateSelectedTheme(theme) {
+    document.querySelectorAll('.theme-dropdown button').forEach((btn) => {
+      btn.setAttribute('data-selected', btn.dataset.theme === theme);
+    });
+  }
+
+  function updateSelectedLang(lang) {
+    document.querySelectorAll('.lang-dropdown button').forEach((btn) => {
+      btn.setAttribute('data-selected', btn.dataset.lang === lang);
+    });
+  }
+
+  function applyTheme(theme) {
+    const actualTheme = theme === 'system' ? getSystemTheme() : theme;
+    document.documentElement.setAttribute('data-theme', actualTheme);
+    document.documentElement.setAttribute('data-theme-setting', theme);
+    updateThemeIcons(theme);
+    updateSelectedTheme(theme);
+  }
+
+  applyTheme(localStorage.getItem('theme') || 'system');
+  updateSelectedLang(localStorage.getItem('lang') || 'zh');
+
+  function closeAllDropdowns() {
+    document
+      .querySelectorAll('.theme-dropdown, .lang-dropdown')
+      .forEach((dropdown) => dropdown.classList.remove('show'));
+  }
+
+  document.querySelectorAll('.theme-toggle').forEach((toggle) => {
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const dropdown = toggle
+        .closest('.theme-selector')
+        .querySelector('.theme-dropdown');
+      const wasOpen = dropdown.classList.contains('show');
+      closeAllDropdowns();
+      if (!wasOpen) dropdown.classList.add('show');
+    });
+  });
+
+  document.querySelectorAll('.lang-toggle').forEach((toggle) => {
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const dropdown = toggle
+        .closest('.lang-selector')
+        .querySelector('.lang-dropdown');
+      const wasOpen = dropdown.classList.contains('show');
+      closeAllDropdowns();
+      if (!wasOpen) dropdown.classList.add('show');
+    });
+  });
+
+  document.addEventListener('click', closeAllDropdowns);
+
+  document.querySelectorAll('.theme-dropdown').forEach((dropdown) => {
+    dropdown.addEventListener('click', (e) => {
+      const button = e.target.closest('button');
+      if (!button) return;
+      const theme = button.dataset.theme;
+      localStorage.setItem('theme', theme);
+      applyTheme(theme);
+    });
+  });
+
+  document.querySelectorAll('.lang-dropdown').forEach((dropdown) => {
+    dropdown.addEventListener('click', (e) => {
+      const button = e.target.closest('button');
+      if (!button) return;
+      const lang = button.dataset.lang;
+      localStorage.setItem('lang', lang);
+      changeLanguage(lang);
+      updateSelectedLang(lang);
+    });
+  });
+</script>
+<script src="src/cursor.js"></script>
 </body>
-</html> 
\ No newline at end of file
+</html>
diff --git a/Web/css/404.css b/Web/css/404.css
index 28a904c..cd8017a 100644
--- a/Web/css/404.css
+++ b/Web/css/404.css
@@ -1,4 +1,22 @@
-/* Reset default styles */
+:root {
+    --primary-color: #a54bcf;
+    --secondary-color: #006e2b;
+    --background-color: #f8f5fb;
+    --text-color: #2c3e50;
+    --gradient-secondary: #c78ae6;
+    --shadow-color: rgba(165, 75, 207, 0.1);
+    --shadow-color-hover: rgba(165, 75, 207, 0.3);
+    --inverted-primary: #5ab430;
+    --inverted-accent: #387519;
+}
+
+[data-theme='dark'] {
+    --background-color: #1a1a2e;
+    --text-color: #e0e0e0;
+    --shadow-color: rgba(165, 75, 207, 0.2);
+    --shadow-color-hover: rgba(165, 75, 207, 0.45);
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -6,180 +24,400 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    background-color: #f5f5f5;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     min-height: 100vh;
+    color: var(--text-color);
+    overflow-x: hidden;
+    background: radial-gradient(
+            1100px 600px at 20% -10%,
+            rgba(165, 75, 207, 0.12),
+            transparent 60%
+    ),
+    radial-gradient(
+            900px 500px at 100% 110%,
+            rgba(197, 138, 230, 0.12),
+            transparent 60%
+    ),
+    var(--background-color);
+}
+
+/* ===== Page Layout ===== */
+.error-page {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4.5rem 1rem 2rem;
+    overflow: hidden;
+}
+
+/* Particles */
+.particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.particle {
+    position: absolute;
+    bottom: -20px;
+    background: rgba(165, 75, 207, 0.2);
+    border-radius: 50%;
+    animation: float linear infinite;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-105vh) rotate(720deg);
+        opacity: 0;
+    }
+}
+
+/* ===== Theme / Language Controls ===== */
+.controls {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(165, 75, 207, 0.1);
+    border-radius: 999px;
+    box-shadow: 0 8px 30px var(--shadow-color);
+}
+
+[data-theme='dark'] .controls {
+    background: rgba(22, 33, 62, 0.85);
+}
+
+.theme-selector,
+.lang-selector {
+    position: relative;
+}
+
+.theme-toggle,
+.lang-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    height: 2.5rem;
+    width: 2.5rem;
+    padding: 0;
+    font-size: 1.1rem;
+    border-radius: 42%;
+    transition: color 0.3s ease;
 }
 
-.error-container {
+.theme-toggle:hover,
+.lang-toggle:hover {
+    color: var(--inverted-primary);
+}
+
+.theme-dropdown,
+.lang-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    z-index: 1000;
+    min-width: 180px;
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(165, 75, 207, 0.1);
+    box-shadow: 0 8px 30px var(--shadow-color);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px) scale(0.95);
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.theme-dropdown.show,
+.lang-dropdown.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+}
+
+[data-theme='dark'] .theme-dropdown,
+[data-theme='dark'] .lang-dropdown {
+    background: rgba(22, 33, 62, 0.85);
+}
+
+.theme-dropdown button,
+.lang-dropdown button {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    width: 100%;
+    padding: 0.7rem 1rem;
+    border: none;
+    background: none;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    line-height: 1.4;
     text-align: left;
-    padding: 2rem;
-    max-width: 900px;
+    white-space: nowrap;
+}
+
+.theme-dropdown button:hover,
+.lang-dropdown button:hover {
+    background: var(--shadow-color);
+}
+
+.theme-dropdown button i {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2rem;
+    height: 1.2rem;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+
+.theme-dropdown button[data-selected='true'],
+.lang-dropdown button[data-selected='true'] {
+    color: var(--primary-color);
+    background: var(--shadow-color);
+    font-weight: 600;
+}
+
+.light-icon,
+.dark-icon,
+.system-icon {
+    display: none;
+}
+
+[data-theme-setting='light'] .light-icon {
+    display: inline-block;
+}
+
+[data-theme-setting='dark'] .dark-icon {
+    display: inline-block;
+}
+
+[data-theme-setting='system'] .system-icon {
+    display: inline-block;
+}
+
+/* ===== Error Layout ===== */
+.error-layout {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 4rem;
+    max-width: 960px;
+    width: 100%;
+    padding: 2rem 1rem;
+    animation: layoutReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .error-logo {
-    margin-bottom: 0;
     flex-shrink: 0;
 }
 
 .error-logo img {
-    max-width: 200px;
+    width: 220px;
     height: auto;
 }
 
 .error-content {
-    flex: 1;
-    text-align: center;
+    max-width: 520px;
+    text-align: left;
 }
 
-.error-content h1 {
-    font-size: 8rem;
-    color: #A54BCF;
-    margin-bottom: 1rem;
-    font-weight: 700;
+.error-code {
+    font-size: clamp(5rem, 12vw, 7.5rem);
+    font-weight: 800;
+    line-height: 1;
+    background: linear-gradient(
+            135deg,
+            var(--primary-color),
+            var(--gradient-secondary)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
 }
 
 .error-content h2 {
-    font-size: 2rem;
-    color: #8B3AAF;
-    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
 }
 
 .error-content p {
-    color: #666666;
-    margin-bottom: 2rem;
-    line-height: 1.6;
+    font-size: 1.05rem;
+    line-height: 1.7;
+    color: var(--text-color);
+    opacity: 0.8;
+    margin-bottom: 2.25rem;
 }
 
-.back-home {
-    display: inline-block;
-    padding: 12px 24px;
-    background-color: #A54BCF;
-    color: white;
+.button-group {
+    display: flex;
+    justify-content: flex-start;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.back-home,
+.refresh-btn {
+    padding: 0.9rem 2.2rem;
+    border-radius: 50px;
+    font-family: inherit;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
     text-decoration: none;
-    border-radius: 14px;
-    transition: background-color 0.3s ease;
+    transition: transform 0.3s ease,
+    box-shadow 0.3s ease,
+    background 0.3s ease,
+    color 0.3s ease;
 }
 
-.back-home:hover {
-    background-color: #8B3AAF;
+.back-home {
+    background: linear-gradient(
+            135deg,
+            var(--primary-color),
+            var(--gradient-secondary)
+    );
+    color: #ffffff;
+    box-shadow: 0 8px 25px var(--shadow-color-hover);
 }
 
-.button-group {
-    display: flex;
-    justify-content: center;
-    gap: 20px;
+.back-home:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 30px var(--shadow-color-hover);
+    background: linear-gradient(
+            135deg,
+            var(--inverted-primary),
+            var(--inverted-accent)
+    );
+    color: #ffffff;
 }
 
 .refresh-btn {
-    display: inline-block;
-    padding: 12px 24px;
-    background-color: transparent;
-    color: #A54BCF;
-    text-decoration: none;
-    border-radius: 14px;
-    border: 2px solid #A54BCF;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 1rem;
+    background: transparent;
+    border: 2px solid var(--primary-color);
+    color: var(--primary-color);
 }
 
 .refresh-btn:hover {
-    background-color: #A54BCF;
-    color: white;
+    background: #fff;
+    border-color: var(--inverted-primary);
+    color: var(--inverted-primary);
+    transform: translateY(-3px);
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .error-container {
-        flex-direction: column;
-        text-align: center;
-        gap: 2rem;
-    }
+.page-footer {
+    position: relative;
+    z-index: 1;
+    margin-top: 2rem;
+    font-size: 0.85rem;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.6;
+}
 
-    .error-logo {
-        margin-bottom: 1rem;
+@keyframes layoutReveal {
+    from {
+        opacity: 0;
+        transform: translateY(40px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
     }
+}
 
-    .error-logo img {
-        max-width: 150px;
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+    .controls {
+        top: 0.75rem;
+        right: 0.75rem;
     }
 
-    .error-content h1 {
-        font-size: 6rem;
+    .error-layout {
+        gap: 2rem;
     }
 
-    .error-content h2 {
-        font-size: 1.5rem;
+    .error-logo img {
+        width: 160px;
     }
 }
 
 @media (max-width: 480px) {
-    .error-container {
-        padding: 1.5rem;
-        gap: 1.5rem;
+    .error-page {
+        padding: 4.5rem 1rem 2rem;
     }
 
-    .error-logo img {
-        max-width: 120px;
+    .error-layout {
+        flex-direction: column;
+        text-align: center;
+        gap: 1.5rem;
     }
 
-    .error-content h1 {
-        font-size: 4rem;
+    .error-content {
+        text-align: center;
     }
 
-    .error-content h2 {
-        font-size: 1.2rem;
+    .error-code {
+        font-size: 4.5rem;
     }
 
     .button-group {
         flex-direction: column;
-        gap: 0.8rem;
+        width: 100%;
+        justify-content: center;
     }
 
     .back-home,
     .refresh-btn {
         width: 100%;
+        text-align: center;
     }
 }
 
-/* Dark mode styles */
-.dark-mode {
-    background-color: #1a1a1a;
-}
-
-.dark-mode .error-content h1 {
-    color: #B76DE0;
-}
-
-.dark-mode .error-content h2 {
-    color: #9C55C0;
-}
-
-.dark-mode .error-content p {
-    color: #999999;
-}
-
-.dark-mode .back-home {
-    background-color: #B76DE0;
-}
-
-.dark-mode .back-home:hover {
-    background-color: #9C55C0;
-}
-
-.dark-mode .refresh-btn {
-    color: #B76DE0;
-    border-color: #B76DE0;
+@media (prefers-reduced-motion: reduce) {
+    .particle,
+    .error-layout {
+        animation: none;
+    }
 }
-
-.dark-mode .refresh-btn:hover {
-    background-color: #B76DE0;
-    color: #2b2b2b;
-} 
\ No newline at end of file
diff --git a/Web/css/cursor.css b/Web/css/cursor.css
new file mode 100644
index 0000000..a989942
--- /dev/null
+++ b/Web/css/cursor.css
@@ -0,0 +1,58 @@
+/* ===== Custom Cursor ===== */
+html.custom-cursor,
+html.custom-cursor * {
+    cursor: none;
+}
+
+.cursor-dot {
+    --cursor-size: 24px;
+    --cursor-offset-x: 12px;
+    --cursor-offset-y: 12px;
+    --cursor-x: -100px;
+    --cursor-y: -100px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    width: var(--cursor-size);
+    height: var(--cursor-size);
+    border-radius: 420px;
+    background: #fff;
+    border: 1px solid var(--text-color);
+    mix-blend-mode: exclusion;
+    pointer-events: none;
+    will-change: transform;
+    transform: translate3d(
+            calc(var(--cursor-x) - var(--cursor-offset-x)),
+            calc(var(--cursor-y) - var(--cursor-offset-y)),
+            0
+    );
+}
+
+.cursor-dot.is-hover {
+    --cursor-size: 40px;
+    --cursor-offset-x: 20px;
+    --cursor-offset-y: 20px;
+}
+
+.cursor-dot.is-fill {
+    border-color: rgba(0, 0, 0, 0);
+}
+
+.cursor-dot.is-away {
+    opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .cursor-dot {
+        transition: width 0.15s ease-in, height 0.15s ease-in,
+        border-radius 0.15s ease-in, opacity 0.1s ease-in;
+    }
+
+    .cursor-dot.is-fill {
+        transition: top 0.2s cubic-bezier(0, 0.1, 0.1, 1),
+        left 0.25s cubic-bezier(0, 0.1, 0.1, 1),
+        width 0.15s ease-in-out, height 0.2s ease-in-out,
+        border-radius 0.15s ease-in, opacity 0.1s ease-in;
+    }
+}
\ No newline at end of file
diff --git a/Web/css/index.css b/Web/css/index.css
index 14d8282..cf8f73f 100644
--- a/Web/css/index.css
+++ b/Web/css/index.css
@@ -11,6 +11,8 @@
     --background-rgb: 248, 245, 251;
     --text-rgb: 44, 62, 80;
     --border-color: #ddd;
+    --inverted-primary: #5ab430;
+    --inverted-accent: #387519;
 }
 
 [data-theme='dark'] {
@@ -106,6 +108,7 @@ nav.about-active ul {
     align-items: center;
     gap: 0.5rem;
     height: 100%;
+    margin-left: auto;
 }
 
 nav ul {
@@ -138,26 +141,28 @@ nav a {
     transition: color 0.3s ease;
 }
 
-nav a::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background: var(--primary-color);
-    transition: width 0.3s ease;
-}
-
-nav a:hover::after,
-nav a.active::after {
-    width: 100%;
+nav a:hover {
+    color: var(--inverted-primary);
 }
 
 nav a.active {
     color: var(--primary-color);
 }
 
+.nav-indicator {
+    position: absolute;
+    height: 3px;
+    border-radius: 999px;
+    background: var(--primary-color);
+    left: 0;
+    top: 0;
+    width: 0;
+    pointer-events: none;
+    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
+    top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
+    width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .theme-toggle,
 .lang-toggle {
     display: flex;
@@ -167,6 +172,7 @@ nav a.active {
     width: 2.5rem;
     padding: 0;
     font-size: 1.1rem;
+    border-radius: 42%;
 }
 
 .theme-dropdown,
@@ -391,6 +397,7 @@ main section {
 .cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    color: var(--inverted-primary);
 }
 
 .cta-secondary {
@@ -400,9 +407,10 @@ main section {
 }
 
 .cta-secondary:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--inverted-primary);
     transform: translateY(-3px);
-    border-color: white;
+    border-color: var(--inverted-primary);
+    color: #fff;
 }
 
 /* ===== Scroll Reveal System ===== */
@@ -647,8 +655,8 @@ main section {
     height: 100%;
     background: linear-gradient(
             135deg,
-            var(--primary-color),
-            var(--gradient-secondary)
+            var(--inverted-primary),
+            var(--inverted-accent)
     );
     opacity: 0;
     transition: opacity 0.4s ease;
@@ -662,7 +670,7 @@ main section {
 .download-button:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 12px 40px rgba(165, 75, 207, 0.3);
-    border-color: var(--primary-color);
+    border-color: var(--inverted-primary);
     color: white;
 }
 
@@ -777,7 +785,7 @@ main section {
 .open-source-link a:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 30px var(--shadow-color-hover);
-    color: var(--primary-color);
+    color: var(--inverted-primary);
 }
 
 .open-source-link a i {
@@ -976,15 +984,17 @@ main section {
     align-items: center;
     gap: 0.4rem;
     margin-top: 0.8rem;
+    padding: 0.5rem 0.9rem;
     color: var(--primary-color);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
     transition: all 0.3s ease;
+    align-self: flex-start;
 }
 
 .timeline-link:hover {
-    color: var(--gradient-secondary);
+    color: var(--inverted-primary);
     transform: translateX(3px);
 }
 
@@ -1040,6 +1050,13 @@ main section {
     justify-content: center;
 }
 
+.about-logo {
+    display: none;
+    max-width: 260px;
+    width: 100%;
+    height: auto;
+}
+
 .about-content {
     flex: 1 1 320px;
     max-width: 440px;
@@ -1079,6 +1096,22 @@ footer {
     scroll-snap-align: end;
 }
 
+.footer-controls {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.footer-controls .theme-selector {
+    height: auto;
+}
+
+.footer-controls .lang-selector {
+    height: auto;
+}
+
 /* ===== Theme Selector ===== */
 .theme-selector {
     position: relative;
@@ -1090,6 +1123,13 @@ footer {
     transform: translateY(0) scale(1);
 }
 
+.theme-dropdown.show,
+.lang-dropdown.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+}
+
 .theme-dropdown button,
 .lang-dropdown button {
     display: flex;
@@ -1111,7 +1151,7 @@ footer {
 
 .theme-dropdown button:hover,
 .lang-dropdown button:hover {
-    background: var(--shadow-color);
+    background: var(--inverted-primary);
 }
 
 .theme-dropdown button i {
@@ -1125,14 +1165,6 @@ footer {
     flex-shrink: 0;
 }
 
-.lang-dropdown button::before {
-    content: '';
-    width: 1.2rem;
-    text-align: center;
-    line-height: 1;
-    flex-shrink: 0;
-}
-
 .theme-dropdown button[data-selected='true'],
 .lang-dropdown button[data-selected='true'] {
     color: var(--primary-color);
@@ -1140,13 +1172,6 @@ footer {
     font-weight: 600;
 }
 
-.lang-dropdown button[data-selected='true']::before {
-    content: '\f00c';
-    font-family: 'Font Awesome 6 Free', serif;
-    font-weight: 900;
-    color: var(--primary-color);
-}
-
 .theme-toggle {
     background: none;
     border: none;
@@ -1158,7 +1183,7 @@ footer {
 }
 
 .theme-toggle:hover {
-    color: var(--primary-color);
+    color: var(--inverted-primary);
 }
 
 .system-icon {
@@ -1204,19 +1229,27 @@ footer {
 }
 
 .lang-toggle:hover {
-    color: var(--primary-color);
+    color: var(--inverted-primary);
 }
 
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     nav {
-        width: calc(100% - 1rem);
+        display: none;
     }
 
-    nav ul {
+    .nav-indicator {
         display: none;
     }
 
+    .about-logo {
+        display: block;
+    }
+
+    .footer-controls {
+        display: flex;
+    }
+
     .hero h1 {
         font-size: 3rem;
     }
@@ -1323,3 +1356,7 @@ footer {
 #language-selector {
     display: none;
 }
+
+/* ===== Custom Cursor =====
+Shared styles live in css/cursor.css (loaded by index.html and 404.html).
+*/
diff --git a/Web/index.html b/Web/index.html
index c07fc10..bfa68c4 100644
--- a/Web/index.html
+++ b/Web/index.html
@@ -6,6 +6,7 @@
   <title>Known</title>
   <link rel="icon" type="image/png" href="assets/media/Logo.png" />
   <link rel="stylesheet" href="css/index.css" />
+  <link rel="stylesheet" href="css/cursor.css" />
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
@@ -23,6 +24,7 @@
     }
   </script>
   <script src="src/script.js" defer></script>
+  <script src="src/cursor.js" defer></script>
   <script src="src/main.js" type="module"></script>
 </head>
 <body>
@@ -51,6 +53,7 @@
         <a href="#about" data-i18n="nav.about" class="nav-link">About</a>
       </li>
     </ul>
+    <div class="nav-indicator" aria-hidden="true"></div>
     <div class="nav-controls">
       <div class="theme-selector">
         <button class="theme-toggle">
@@ -74,9 +77,7 @@
         </div>
       </div>
       <div class="lang-selector">
-        <button class="lang-toggle">
-          <i class="fas fa-globe"></i>
-        </button>
+        <button class="lang-toggle"><i class="fas fa-globe"></i></button>
         <div class="lang-dropdown">
           <button data-lang="zh" data-selected="true">
             <span>简体中文</span>
@@ -249,7 +250,13 @@ <h2 data-i18n="opensource.title" class="scroll-reveal">
 
   <section id="about">
     <div class="about-container">
-      <div class="about-logo-column"></div>
+      <div class="about-logo-column">
+        <img
+          src="assets/media/Logo.png"
+          alt="Known Logo"
+          class="about-logo"
+        />
+      </div>
       <div class="about-content">
         <h2 data-i18n="about.title" class="scroll-reveal">About Known</h2>
         <p
@@ -268,6 +275,46 @@ <h2 data-i18n="about.title" class="scroll-reveal">About Known</h2>
 </main>
 
 <footer>
+  <div class="footer-controls">
+    <div class="theme-selector">
+      <button class="theme-toggle">
+        <i class="fas fa-sun light-icon"></i>
+        <i class="fas fa-moon dark-icon"></i>
+        <i class="fas fa-desktop system-icon"></i>
+      </button>
+      <div class="theme-dropdown">
+        <button data-theme="light">
+          <i class="fas fa-sun"></i>
+          <span data-i18n="theme.light">Light Mode</span>
+        </button>
+        <button data-theme="dark">
+          <i class="fas fa-moon"></i>
+          <span data-i18n="theme.dark">Dark Mode</span>
+        </button>
+        <button data-theme="system">
+          <i class="fas fa-desktop"></i>
+          <span data-i18n="theme.system">Follow System</span>
+        </button>
+      </div>
+    </div>
+    <div class="lang-selector">
+      <button class="lang-toggle"><i class="fas fa-globe"></i></button>
+      <div class="lang-dropdown">
+        <button data-lang="zh" data-selected="true">
+          <span>简体中文</span>
+        </button>
+        <button data-lang="zh-tw">
+          <span>繁體中文</span>
+        </button>
+        <button data-lang="en">
+          <span>English (US)</span>
+        </button>
+        <button data-lang="en-GB">
+          <span>English (UK)</span>
+        </button>
+      </div>
+    </div>
+  </div>
   <p>
     &copy; 2024 Known.
     <span data-i18n="footer.copyright"
diff --git a/Web/src/cursor.js b/Web/src/cursor.js
new file mode 100644
index 0000000..0037dc3
--- /dev/null
+++ b/Web/src/cursor.js
@@ -0,0 +1,149 @@
+// ===== Custom Cursor (design.google style) =====
+(function () {
+  function initCustomCursor() {
+    const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
+    if (!finePointer.matches) return;
+
+    document.documentElement.classList.add('custom-cursor');
+
+    const dot = document.createElement('div');
+    dot.className = 'cursor-dot';
+    dot.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(dot);
+
+    const FILL_TARGETS = 'a, button';
+    const GROW_TARGETS = '.feature-card, .timeline-dot';
+    const CURSOR_STATES = ['is-hover'];
+
+    let pointerX = 0;
+    let pointerY = 0;
+    let fillTarget = null;
+    let fillRaf = 0;
+    let fillRadius = '12px';
+
+    function updatePosition(x, y) {
+      pointerX = x;
+      pointerY = y;
+      dot.style.setProperty('--cursor-x', x + 'px');
+      dot.style.setProperty('--cursor-y', y + 'px');
+    }
+
+    function radiusFor(el) {
+      const radius = getComputedStyle(el).borderRadius;
+      if (radius === '0px') return el.tagName === 'A' ? '999px' : radius;
+      return radius;
+    }
+
+    function setState(state) {
+      CURSOR_STATES.forEach((name) =>
+        dot.classList.toggle(name, name === state),
+      );
+    }
+
+    function trackFill() {
+      if (!fillTarget) return;
+      const rect = fillTarget.getBoundingClientRect();
+      dot.style.left = rect.left + 'px';
+      dot.style.top = rect.top + 'px';
+      dot.style.width = rect.width + 'px';
+      dot.style.height = rect.height + 'px';
+      dot.style.borderRadius = fillRadius;
+      dot.style.transform = 'translate3d(0, 0, 0)';
+      fillRaf = requestAnimationFrame(trackFill);
+    }
+
+    function stopFill() {
+      if (!fillTarget && !fillRaf) return;
+      fillTarget = null;
+      cancelAnimationFrame(fillRaf);
+      fillRaf = 0;
+      dot.classList.remove('is-fill');
+      dot.style.left = '';
+      dot.style.top = '';
+      dot.style.width = '';
+      dot.style.height = '';
+      dot.style.borderRadius = '';
+      dot.style.transform = '';
+    }
+
+    function startFill(el) {
+      if (fillTarget === el) return;
+      stopFill();
+      fillTarget = el;
+      fillRadius = radiusFor(el);
+      dot.classList.add('is-fill');
+      const prevTransition = dot.style.transition;
+      dot.style.transition = 'none';
+      dot.style.transform = 'translate3d(0, 0, 0)';
+      dot.style.left = pointerX + 'px';
+      dot.style.top = pointerY + 'px';
+      dot.style.width = '24px';
+      dot.style.height = '24px';
+      void dot.offsetWidth;
+      dot.style.transition = prevTransition;
+      trackFill();
+    }
+
+    function stateFor(el) {
+      if (!el || !el.closest) return { state: '' };
+      if (el.closest(FILL_TARGETS)) {
+        return { state: 'is-fill', target: el.closest(FILL_TARGETS) };
+      }
+      if (el.closest(GROW_TARGETS)) return { state: 'is-hover' };
+      return { state: '' };
+    }
+
+    function applyState(info) {
+      if (info.state === 'is-fill') {
+        startFill(info.target);
+      } else {
+        stopFill();
+        setState(info.state);
+      }
+    }
+
+    function resetCursor() {
+      applyState({ state: '' });
+    }
+
+    window.addEventListener('pointermove', (e) => {
+      if (e.pointerType !== 'mouse') return;
+      updatePosition(e.clientX, e.clientY);
+    });
+
+    document.addEventListener('mouseover', (e) => {
+      applyState(stateFor(e.target));
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      applyState(stateFor(e.relatedTarget));
+    });
+
+    document.addEventListener('mouseleave', () => {
+      stopFill();
+      dot.classList.add('is-away');
+    });
+
+    document.addEventListener('mouseenter', () => {
+      dot.classList.remove('is-away');
+    });
+
+    document.addEventListener('click', resetCursor);
+
+    window.addEventListener(
+      'scroll',
+      () => {
+        if (fillTarget && getComputedStyle(fillTarget).position !== 'fixed') {
+          resetCursor();
+        }
+      },
+      { passive: true },
+    );
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCustomCursor);
+  } else {
+    initCustomCursor();
+  }
+})();
diff --git a/Web/src/main.js b/Web/src/main.js
index dfcd193..f7c15bb 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -1,7 +1,4 @@
-//TIP With Search Everywhere, you can find any action, file, or symbol in your project. Press <shortcut actionId="Shift"/> <shortcut actionId="Shift"/>, type in <b>terminal</b>, and press <shortcut actionId="EditorEnter"/>. Then run <shortcut raw="npm run dev"/> in the terminal and click the link in its output to open the app in the browser.
-
 export function setupCounter(element) {
-  //TIP Try <shortcut actionId="GotoDeclaration"/> on <shortcut raw="counter"/> to see its usages. You can also use this shortcut to jump to a declaration – try it on <shortcut raw="counter"/> on line 13.
   let counter = 0;
 
   const adjustCounterValue = (value) => {
@@ -12,7 +9,6 @@ export function setupCounter(element) {
 
   const setCounter = (value) => {
     counter = adjustCounterValue(value);
-    //TIP WebStorm has lots of inspections to help you catch issues in your project. It also has quick fixes to help you resolve them. Press <shortcut actionId="ShowIntentionActions"/> on <shortcut raw="text"/> and choose <b>Inline variable</b> to clean up the redundant code.
     element.innerHTML = `${counter}`;
   };
 
@@ -28,17 +24,12 @@ export function setupCounter(element) {
   //TIP In the app running in the browser, you'll find that clicking <b>-2</b> doesn't work. To fix that, rewrite it using the code from lines 19 - 21 as examples of the logic.
   document.getElementById('decreaseByTwo');
 
-  //TIP Let's see how to review and commit your changes. Press <shortcut actionId="GotoAction"/> and look for <b>commit</b>. Try checking the diff for a file – double-click main.js to do that.
   setCounter(0);
 }
 
-//TIP To find text strings in your project, you can use the <shortcut actionId="FindInPath"/> shortcut. Press it and type in <b>counter</b> – you'll get all matches in one place.
 setupCounter(document.getElementById('counter-value'));
 
-//TIP There's much more in WebStorm to help you be more productive. Press <shortcut actionId="Shift"/> <shortcut actionId="Shift"/> and search for <b>Learn WebStorm</b> to open our learning hub with more things for you to try.
-
 document.addEventListener('DOMContentLoaded', () => {
-  // 主题切换相关的代码可以保留
   const themeToggle = document.querySelector('.theme-toggle');
   const themeDropdown = document.querySelector('.theme-dropdown');
 
diff --git a/Web/src/script.js b/Web/src/script.js
index d94355f..d62c428 100644
--- a/Web/src/script.js
+++ b/Web/src/script.js
@@ -1,7 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
   // ===== Theme System =====
-  const themeDropdown = document.querySelector('.theme-dropdown');
-
   function getSystemTheme() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'
@@ -17,44 +15,54 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function updateThemeIcon(theme) {
-    const darkIcon = document.querySelector('.dark-icon');
-    const lightIcon = document.querySelector('.light-icon');
-    const systemIcon = document.querySelector('.system-icon');
-
-    darkIcon.style.display = 'none';
-    lightIcon.style.display = 'none';
-    systemIcon.style.display = 'none';
-
-    if (theme === 'system') {
-      systemIcon.style.display = 'inline-block';
-    } else if (theme === 'dark') {
-      darkIcon.style.display = 'inline-block';
-    } else {
-      lightIcon.style.display = 'inline-block';
-    }
+    document.querySelectorAll('.theme-selector').forEach((selector) => {
+      const icons = {
+        dark: selector.querySelector('.dark-icon'),
+        light: selector.querySelector('.light-icon'),
+        system: selector.querySelector('.system-icon'),
+      };
+
+      if (theme === 'system') {
+        icons.system.style.display = 'inline-block';
+        icons.dark.style.display = 'none';
+        icons.light.style.display = 'none';
+      } else if (theme === 'dark') {
+        icons.dark.style.display = 'inline-block';
+        icons.light.style.display = 'none';
+        icons.system.style.display = 'none';
+      } else {
+        icons.light.style.display = 'inline-block';
+        icons.dark.style.display = 'none';
+        icons.system.style.display = 'none';
+      }
+    });
   }
 
   function updateSelectedTheme(theme) {
-    document.querySelectorAll('.theme-dropdown button').forEach((btn) => {
-      btn.removeAttribute('data-selected');
+    document.querySelectorAll('.theme-dropdown').forEach((dropdown) => {
+      dropdown.querySelectorAll('button').forEach((btn) => {
+        btn.removeAttribute('data-selected');
+      });
+      const selectedButton = dropdown.querySelector(
+        `button[data-theme="${theme}"]`,
+      );
+      if (selectedButton) {
+        selectedButton.setAttribute('data-selected', 'true');
+      }
     });
-    const selectedButton = document.querySelector(
-      `.theme-dropdown button[data-theme="${theme}"]`,
-    );
-    if (selectedButton) {
-      selectedButton.setAttribute('data-selected', 'true');
-    }
   }
 
   const savedTheme = localStorage.getItem('theme') || 'system';
   applyTheme(savedTheme);
 
-  themeDropdown.addEventListener('click', (e) => {
-    const button = e.target.closest('button');
-    if (!button) return;
-    const theme = button.dataset.theme;
-    localStorage.setItem('theme', theme);
-    applyTheme(theme);
+  document.querySelectorAll('.theme-dropdown').forEach((dropdown) => {
+    dropdown.addEventListener('click', (e) => {
+      const button = e.target.closest('button');
+      if (!button) return;
+      const theme = button.dataset.theme;
+      localStorage.setItem('theme', theme);
+      applyTheme(theme);
+    });
   });
 
   window
@@ -68,22 +76,56 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
   // ===== Language Selection =====
-  const langDropdown = document.querySelector('.lang-dropdown');
   const savedLang = localStorage.getItem('lang') || 'zh';
   updateSelectedLang(savedLang);
 
   function updateSelectedLang(lang) {
-    document.querySelectorAll('.lang-dropdown button').forEach((btn) => {
-      btn.removeAttribute('data-selected');
+    document.querySelectorAll('.lang-dropdown').forEach((dropdown) => {
+      dropdown.querySelectorAll('button').forEach((btn) => {
+        btn.removeAttribute('data-selected');
+      });
+      const selectedButton = dropdown.querySelector(
+        `button[data-lang="${lang}"]`,
+      );
+      if (selectedButton) {
+        selectedButton.setAttribute('data-selected', 'true');
+      }
     });
-    const selectedButton = document.querySelector(
-      `.lang-dropdown button[data-lang="${lang}"]`,
-    );
-    if (selectedButton) {
-      selectedButton.setAttribute('data-selected', 'true');
-    }
   }
 
+  // ===== Dropdown Toggle (touch-friendly) =====
+  function closeAllDropdowns() {
+    document
+      .querySelectorAll('.theme-dropdown, .lang-dropdown')
+      .forEach((dropdown) => dropdown.classList.remove('show'));
+  }
+
+  document.querySelectorAll('.theme-toggle').forEach((toggle) => {
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const dropdown = toggle
+        .closest('.theme-selector')
+        .querySelector('.theme-dropdown');
+      const wasOpen = dropdown.classList.contains('show');
+      closeAllDropdowns();
+      if (!wasOpen) dropdown.classList.add('show');
+    });
+  });
+
+  document.querySelectorAll('.lang-toggle').forEach((toggle) => {
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const dropdown = toggle
+        .closest('.lang-selector')
+        .querySelector('.lang-dropdown');
+      const wasOpen = dropdown.classList.contains('show');
+      closeAllDropdowns();
+      if (!wasOpen) dropdown.classList.add('show');
+    });
+  });
+
+  document.addEventListener('click', closeAllDropdowns);
+
   // ===== Particle System =====
   function createParticles() {
     const container = document.getElementById('particles');
@@ -166,6 +208,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // ===== Nav Shadow on Scroll =====
   const nav = document.querySelector('nav');
+  const navIndicator = document.querySelector('.nav-indicator');
 
   function updateNavStyle() {
     if (window.scrollY > 50) {
@@ -175,6 +218,22 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  // ===== Sliding Nav Indicator =====
+  function updateNavIndicator() {
+    if (!navIndicator || !nav) return;
+    const activeLink = document.querySelector('nav ul .nav-link.active');
+    if (!activeLink) {
+      navIndicator.style.opacity = '0';
+      return;
+    }
+    const navRect = nav.getBoundingClientRect();
+    const linkRect = activeLink.getBoundingClientRect();
+    navIndicator.style.opacity = '1';
+    navIndicator.style.left = linkRect.left - navRect.left + 'px';
+    navIndicator.style.top = linkRect.bottom - navRect.top + 6 + 'px';
+    navIndicator.style.width = linkRect.width + 'px';
+  }
+
   // ===== Floating Logo: Fly to About description =====
   const aboutSection = document.getElementById('about');
   const aboutLogoColumn =
@@ -185,6 +244,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const LOGO_FLY_DURATION = 600;
   let logoFlying = false;
   let logoTrackReady = false;
+  const isNarrowScreen = () => window.matchMedia('(max-width: 768px)').matches;
 
   function isAboutActive() {
     if (!aboutSection) return false;
@@ -255,7 +315,22 @@ document.addEventListener('DOMContentLoaded', () => {
     logo.classList.remove('logo-about-large');
     const currentLeft = parseFloat(logo.style.left) || 0;
     const currentTop = parseFloat(logo.style.top) || 0;
-    const slot = logoSlotViewport();
+    // Measure the target (expanded) nav slot without a visual flash
+    const prevTransition = nav.style.transition;
+    nav.style.transition = 'none';
+    nav.classList.remove('about-active');
+    const expandedNavRect = nav.getBoundingClientRect();
+    nav.classList.add('about-active');
+    nav.getBoundingClientRect(); // re-layout at shrunk size so the expand transition can replay
+    nav.style.transition = prevTransition;
+    const padLeft = parseFloat(getComputedStyle(nav).paddingLeft) || 0;
+    const slot = {
+      left: expandedNavRect.left + padLeft,
+      top:
+        expandedNavRect.top + (expandedNavRect.height - logo.offsetHeight) / 2,
+    };
+    // Expand the bar while the logo flies back
+    nav.classList.remove('about-active');
     const anim = logo.animate(
       [
         { left: currentLeft + 'px', top: currentTop + 'px' },
@@ -270,7 +345,6 @@ document.addEventListener('DOMContentLoaded', () => {
     anim.onfinish = () => {
       anim.cancel();
       nav.prepend(logo);
-      nav.classList.remove('about-active');
       logo.classList.remove('logo-fixed');
       logo.style.left = '';
       logo.style.top = '';
@@ -279,6 +353,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function updateAboutLogo() {
     if (!aboutSection || !aboutLogoColumn || !aboutContent || !logo) return;
+    // Logo lives statically in the About section on narrow screens
+    if (isNarrowScreen()) return;
     if (isAboutActive()) {
       if (!logoFlying) {
         flyLogoToAbout();
@@ -347,6 +423,7 @@ document.addEventListener('DOMContentLoaded', () => {
       window.requestAnimationFrame(() => {
         updateActiveNav();
         updateNavStyle();
+        updateNavIndicator();
         updateParallax();
         updateAboutLogo();
         ticking = false;
@@ -358,9 +435,11 @@ document.addEventListener('DOMContentLoaded', () => {
   // Initial calls
   updateActiveNav();
   updateNavStyle();
+  updateNavIndicator();
   updateAboutLogo();
 
   window.addEventListener('resize', () => {
+    updateNavIndicator();
     if (logoFlying) {
       cancelLogoAnimations();
       logoTrackReady = true;
