diff --git a/pandoc-template.html b/pandoc-template.html
index c109159..a857d9d 100644
--- a/pandoc-template.html
+++ b/pandoc-template.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,14 +7,23 @@
     <link rel="stylesheet" href="css/style.css">
     <meta name="description" content="ΞSUS Project - Open Source Philosophy for Human and AI Consciousness">
     <meta name="keywords" content="AI, consciousness, physics, atoms, collaboration, open source">
+    <script>
+        // Remove no-js class if JavaScript is enabled
+        document.documentElement.classList.remove('no-js');
+    </script>
 </head>
 <body>
     <header class="site-header">
         <div class="container">
             <div class="header-content">
+                <!-- Mobile TOC Toggle (left side) -->
+                <button id="mobile-toc-toggle" class="mobile-toc-toggle" aria-label="Toggle Table of Contents">🗂️</button>
+
                 <div class="logo">
                     <a href="index.html"><h1>ΞSUS</h1></a>
                 </div>
+
+                <!-- Desktop Navigation -->
                 <nav class="main-nav">
                     <a href="index.html#about">About</a>
                     <a href="index.html#achievement">Achievement</a>
@@ -24,10 +33,41 @@
                     <a href="https://git.esus.name/">Git</a>
                 </nav>
                 <div id="google_translate_element" class="translate-button"></div>
+
+                <!-- Mobile Menu Toggle -->
+                <button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle Menu">☰</button>
+            </div>
+
+            <!-- Mobile TOC Dropdown -->
+            <div id="mobile-toc-dropdown" class="mobile-toc-dropdown">
+                <div class="mobile-toc-content">
+                    $toc$
+                </div>
+            </div>
+          </div>
+    </header>
+
+    <!-- Mobile Menu Overlay -->
+    <div id="mobile-menu-overlay" class="mobile-menu-overlay">
+        <div id="mobile-menu" class="mobile-menu">
+            <div class="mobile-menu-header">
+                <h2>Menu</h2>
+                <button id="mobile-menu-close" class="mobile-menu-close" aria-label="Close Menu">×</button>
+            </div>
+            <nav class="mobile-menu-nav">
+                <a href="index.html#about">About</a>
+                <a href="index.html#achievement">Achievement</a>
+                <a href="index.html#resources">Resources</a>
+                <a href="philosophy.html">Philosophy</a>
+                <a href="blog.html">Blog</a>
+                <a href="https://git.esus.name/">Git</a>
+            </nav>
+            <div class="mobile-menu-translate">
+                <div id="google_translate_element_mobile"></div>
             </div>
         </div>
-    </header>
-    
+    </div>
+
     <div id="page-layout">
         <aside id="toc-wrapper" class="toc hidden collapsed">
             <button id="toc-toggle" aria-label="Toggle Table of Contents">☰ Table of Contents</button>
@@ -35,7 +75,7 @@
                 $toc$
             </div>
         </aside>
-        
+
         <main class="main-content">
             $body$
         </main>
@@ -55,11 +95,22 @@
     <!-- Google Translate Script -->
     <script type="text/javascript">
         function googleTranslateElementInit() {
+            // Desktop translate element
             new google.translate.TranslateElement({
                 pageLanguage: 'en',
                 includedLanguages: '',
                 layout: google.translate.TranslateElement.InlineLayout.SIMPLE
             }, 'google_translate_element');
+
+            // Mobile translate element (in menu)
+            const mobileElement = document.getElementById('google_translate_element_mobile');
+            if (mobileElement) {
+                new google.translate.TranslateElement({
+                    pageLanguage: 'en',
+                    includedLanguages: '',
+                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+                }, 'google_translate_element_mobile');
+            }
         }
     </script>
     <script type="text/javascript"
@@ -71,11 +122,89 @@
             const tocWrapper = document.getElementById("toc-wrapper");
             const tocListItems = tocWrapper?.querySelectorAll("li") ?? [];
             const toggleBtn = document.getElementById("toc-toggle");
+            const mobileTocToggle = document.getElementById("mobile-toc-toggle");
+            const mobileTocDropdown = document.getElementById("mobile-toc-dropdown");
+            const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
+            const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
+            const mobileMenu = document.getElementById("mobile-menu");
+            const mobileMenuClose = document.getElementById("mobile-menu-close");
 
-            // Show TOC if it has 5 or more items
-            if (tocListItems.length >= 5) {
+            // Check if TOC has items and should be shown
+            const hasTocItems = tocListItems.length >= 5;
+
+            // Mobile TOC functionality
+            if (mobileTocToggle && mobileTocDropdown) {
+                if (hasTocItems) {
+                    mobileTocToggle.style.display = '';
+
+                    mobileTocToggle.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        mobileTocToggle.classList.toggle("active");
+                        mobileTocDropdown.classList.toggle("active");
+                    });
+
+                    // Close mobile TOC when clicking outside
+                    document.addEventListener("click", (e) => {
+                        if (!mobileTocDropdown.contains(e.target) && e.target !== mobileTocToggle) {
+                            mobileTocToggle.classList.remove("active");
+                            mobileTocDropdown.classList.remove("active");
+                        }
+                    });
+
+                    // Handle mobile TOC link clicks
+                    mobileTocDropdown.addEventListener("click", (e) => {
+                        if (e.target.tagName === "A" && e.target.getAttribute("href")?.startsWith("#")) {
+                            e.preventDefault();
+                            const targetId = e.target.getAttribute("href").substring(1);
+                            const targetElement = document.getElementById(targetId);
+                            if (targetElement) {
+                                // Close mobile TOC
+                                mobileTocToggle.classList.remove("active");
+                                mobileTocDropdown.classList.remove("active");
+                                // Smooth scroll to target
+                                targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+                            }
+                        }
+                    });
+                } else {
+                    mobileTocToggle.style.display = 'none';
+                }
+            }
+
+            // Mobile menu functionality
+            if (mobileMenuToggle && mobileMenuOverlay && mobileMenu) {
+                const openMobileMenu = () => {
+                    mobileMenuOverlay.classList.add("active");
+                    mobileMenu.classList.add("active");
+                    document.body.style.overflow = "hidden";
+                };
+
+                const closeMobileMenu = () => {
+                    mobileMenuOverlay.classList.remove("active");
+                    mobileMenu.classList.remove("active");
+                    document.body.style.overflow = "";
+                };
+
+                mobileMenuToggle.addEventListener("click", openMobileMenu);
+                mobileMenuClose.addEventListener("click", closeMobileMenu);
+
+                // Close when clicking overlay
+                mobileMenuOverlay.addEventListener("click", (e) => {
+                    if (e.target === mobileMenuOverlay) {
+                        closeMobileMenu();
+                    }
+                });
+
+                // Close menu when clicking on links
+                mobileMenu.querySelectorAll("a").forEach(link => {
+                    link.addEventListener("click", closeMobileMenu);
+                });
+            }
+
+            // Desktop TOC functionality
+            if (hasTocItems) {
                 tocWrapper.classList.remove("hidden");
-                
+
                 // On mobile/tablet, start collapsed
                 if (window.innerWidth < 1200) {
                     tocWrapper.classList.add("collapsed");
@@ -88,7 +217,7 @@
             // Toggle button functionality
             toggleBtn?.addEventListener("click", () => {
                 tocWrapper.classList.toggle("collapsed");
-                
+
                 // Update button text
                 if (tocWrapper.classList.contains("collapsed")) {
                     toggleBtn.textContent = "☰ Table of Contents";
@@ -96,7 +225,7 @@
                     toggleBtn.textContent = "✕ Table of Contents";
                 }
             });
-            
+
             // Handle window resize
             let resizeTimer;
             window.addEventListener('resize', () => {
@@ -108,8 +237,8 @@
                     }
                 }, 250);
             });
-            
-            // Smooth scroll to anchors
+
+            // Smooth scroll to anchors (desktop TOC)
             tocWrapper?.addEventListener('click', (e) => {
                 if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) {
                     e.preventDefault();
@@ -125,12 +254,12 @@
                     }
                 }
             });
-            
+
             // Highlight current section in TOC
             const observerOptions = {
                 rootMargin: '-10% 0px -70% 0px'
             };
-            
+
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -140,16 +269,23 @@
                             tocWrapper?.querySelectorAll('a').forEach(a => {
                                 a.classList.remove('active');
                             });
+                            mobileTocDropdown?.querySelectorAll('a').forEach(a => {
+                                a.classList.remove('active');
+                            });
                             // Add active class to current section
                             const activeLink = tocWrapper?.querySelector(`a[href="#${id}"]`);
+                            const mobileActiveLink = mobileTocDropdown?.querySelector(`a[href="#${id}"]`);
                             if (activeLink) {
                                 activeLink.classList.add('active');
                             }
+                            if (mobileActiveLink) {
+                                mobileActiveLink.classList.add('active');
+                            }
                         }
                     }
                 });
             }, observerOptions);
-            
+
             // Observe all headings with IDs
             document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]').forEach(heading => {
                 observer.observe(heading);
@@ -157,4 +293,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/css/style.css b/static/css/style.css
index 3217170..15f32cb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -12,10 +12,10 @@
     --background-light: #f8f9fa;
     --border-color: #dee2e6;
     --code-background: #f1f3f4;
-    
+
     --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     --font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-    
+
     --max-width: 1200px;
     --content-width: 800px;
     --toc-min-width: 250px;
@@ -46,41 +46,19 @@ body {
     padding: 0 2rem;
 }
 
-/* Header */
-.site-header {
-    background: var(--background);
-    border-bottom: 2px solid var(--border-color);
-    padding: 1rem 0;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-}
-
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
 
 .xi-symbol {
     width: 32px;
     height: 32px;
 }
 
-.logo h1 {
+.logo {
+    display: flex;
     font-size: 1.8rem;
     font-weight: 700;
-    color: var(--primary-color);
 }
 
 .main-nav {
-    display: flex;
     gap: 2rem;
 }
 
@@ -187,7 +165,7 @@ body {
     .toc {
         font-size: 0.95rem;
     }
-    
+
     .toc-inner {
         padding: 0.75rem;
     }
@@ -197,7 +175,7 @@ body {
     .toc-inner {
         padding: 1.5rem;
     }
-    
+
     .toc a {
         font-size: 1.05rem;
         padding: 0.3rem 0;
@@ -208,7 +186,7 @@ body {
     .toc-inner {
         padding: 2rem;
     }
-    
+
     .toc a {
         font-size: 1.1rem;
         padding: 0.35rem 0;
@@ -282,7 +260,7 @@ body {
         padding: 3rem 0;
         min-height: calc(100vh - 200px);
     }
-    
+
     .toc {
         grid-column: 1;
         justify-self: end;
@@ -296,14 +274,14 @@ body {
         height: fit-content;
         max-height: calc(100vh - 150px);
     }
-    
+
     .main-content {
         grid-column: 2;
         width: 100%;
         max-width: var(--content-width);
         padding: 0 2rem;
     }
-    
+
     /* Calculate TOC width based on available space */
     @media (min-width: 1400px) {
         .toc {
@@ -317,7 +295,7 @@ body {
     #page-layout {
         grid-template-columns: minmax(auto, 1fr) var(--content-width) minmax(auto, 1fr);
     }
-    
+
     .toc {
         max-width: min(500px, calc(100% - 2rem));
     }
@@ -336,18 +314,18 @@ body {
         display: block;
         padding: 2rem 0;
     }
-    
+
     .toc {
         margin: 0 auto 2rem;
         max-width: var(--content-width);
         width: calc(100% - 4rem);
         position: static;
     }
-    
+
     .toc.collapsed {
         margin-bottom: 2rem;
     }
-    
+
     .main-content {
         max-width: var(--content-width);
         margin: 0 auto;
@@ -516,41 +494,42 @@ code {
     .container {
         padding: 0 1rem;
     }
-    
+
     .header-content {
-        flex-direction: column;
+        flex-direction: row;
+        flex-wrap: nowrap;
         gap: 1rem;
     }
-    
+
     .main-nav {
         gap: 1rem;
     }
-    
+
     .hero-title {
         font-size: 3rem;
     }
-    
+
     .hero-subtitle {
         font-size: 1.3rem;
     }
-    
+
     .main-content {
         padding: 0 1rem;
     }
-    
+
     .resource-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .formula-block {
         padding: 1.5rem;
         font-size: 1.2rem;
     }
-    
+
     .toc {
         width: calc(100% - 2rem);
     }
-    
+
     .toc a {
         font-size: 0.95rem;
     }
@@ -560,7 +539,7 @@ code {
     .hero-title {
         font-size: 2.5rem;
     }
-    
+
     .formula-block {
         font-size: 1rem;
     }
@@ -589,23 +568,23 @@ button:focus {
     .toc {
         display: none !important;
     }
-    
+
     #page-layout {
         display: block !important;
         padding: 0 !important;
     }
-    
+
     .main-content {
         max-width: none;
         margin: 0;
         padding: 0;
     }
-    
+
     a {
         color: var(--text-color);
         text-decoration: underline;
     }
-    
+
     .resource-card {
         border: 1px solid var(--border-color);
         break-inside: avoid;
@@ -724,7 +703,7 @@ button:focus {
         padding: 1.5rem;
         margin: 1.5rem 0;
     }
-    
+
     .human-voice::before,
     .ai-claude-voice::before,
     .ai-xilope-voice::before,
@@ -733,3 +712,337 @@ button:focus {
         left: 15px;
     }
 }
+
+/* Header */
+.site-header {
+    background: var(--background);
+    border-bottom: 2px solid var(--border-color);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+/* Desktop header layout - Logo left, Nav center, Translate right */
+.header-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 2rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    grid-column: 1;
+    justify-self: start;
+    order: unset; /* Ensure no order conflicts */
+}
+
+.xi-symbol {
+    width: 32px;
+    height: 32px;
+}
+
+.logo h1 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+/* Mobile TOC in header - hidden by default on desktop */
+.mobile-toc-toggle {
+    display: none;
+    grid-column: unset; /* Don't participate in grid on desktop */
+}
+
+/* Navigation - centered on desktop */
+.main-nav {
+    display: flex;
+    gap: 2rem;
+    grid-column: 2;
+    justify-self: center;
+    order: unset; /* Ensure no order conflicts */
+}
+
+.main-nav a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.main-nav a:hover {
+    color: var(--accent-color);
+}
+
+/* Translate button - right aligned on desktop */
+.translate-button {
+    grid-column: 3;
+    justify-self: end;
+    order: unset; /* Ensure no order conflicts */
+}
+
+/* Mobile menu toggle - hidden on desktop */
+.mobile-menu-toggle {
+    display: none;
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0.5rem;
+    color: var(--text-color);
+    font-size: 1.5rem;
+    line-height: 1;
+    grid-column: unset; /* Don't participate in grid on desktop */
+    transition: all 0.2s ease;
+}
+
+.mobile-menu-toggle:hover {
+    background: var(--background-light);
+    color: var(--accent-color);
+}
+
+/* Mobile menu overlay */
+.mobile-menu-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.mobile-menu {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 80%;
+    max-width: 300px;
+    height: 100%;
+    background: var(--background);
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    transition: right 0.3s ease;
+    z-index: 1001;
+    overflow-y: auto;
+}
+
+.mobile-menu.active {
+    right: 0;
+}
+
+.mobile-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.mobile-menu-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: var(--text-color);
+    padding: 0.5rem;
+}
+
+.mobile-menu-nav {
+    padding: 1rem;
+}
+
+.mobile-menu-nav a {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 600;
+    transition: background-color 0.2s ease;
+    border-radius: 4px;
+}
+
+.mobile-menu-nav a:hover {
+    background: var(--background-light);
+    color: var(--accent-color);
+}
+
+.mobile-menu-translate {
+    padding: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Mobile TOC dropdown */
+.mobile-toc-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--background);
+    border: 1px solid var(--border-color);
+    border-top: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    max-height: 70vh;
+    overflow-y: auto;
+    z-index: 998;
+    margin: 0; /* Ensure no margin offsets */
+}
+
+.mobile-toc-dropdown.active {
+    display: block;
+}
+
+.mobile-toc-content {
+    padding: 1rem;
+}
+
+/* Mobile-specific header styles */
+@media (max-width: 768px) {
+    .site-header {
+        padding: 0.75rem 0;
+    }
+
+    .container {
+        position: relative;
+        overflow: visible; /* Allow dropdown to extend outside */
+    }
+
+    /* Change header layout for mobile - TOC left, Logo center, Menu right */
+    .header-content {
+        display: flex;
+        grid-template-columns: unset;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding: 0 0.5rem; /* Add some padding to prevent buttons touching edges */
+        position: relative; /* For absolute positioned logo */
+    }
+
+    /* Logo centered on mobile */
+    .logo {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        justify-self: unset;
+        grid-column: unset; /* Reset grid column */
+        order: unset; /* Reset any order property */
+        z-index: 1; /* Ensure logo is above but not clickable over buttons */
+        pointer-events: none; /* Allow clicks to pass through to buttons behind */
+    }
+
+    /* Make logo link clickable */
+    .logo a {
+        pointer-events: auto;
+    }
+
+    /* Reset grid properties for nav and translate on mobile */
+    .main-nav,
+    .translate-button {
+        grid-column: unset;
+    }
+
+    .logo h1 {
+        font-size: 1.5rem;
+    }
+
+    /* Show mobile TOC toggle on left */
+    .mobile-toc-toggle {
+        display: block;
+        background: none;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        padding: 0.5rem 0.75rem;
+        cursor: pointer;
+        font-weight: 600;
+        color: var(--text-color);
+        transition: all 0.2s ease;
+        white-space: nowrap;
+        order: -1; /* Ensure it comes first */
+        min-width: 50px; /* Ensure consistent width */
+    }
+
+    .mobile-toc-toggle:hover,
+    .mobile-toc-toggle.active {
+        background: var(--background-light);
+        color: var(--accent-color);
+    }
+
+    /* Hide desktop navigation and translate button */
+    .main-nav,
+    .translate-button {
+        display: none;
+    }
+
+    /* Show mobile menu toggle on right */
+    .mobile-menu-toggle {
+        display: block;
+        order: 999; /* Ensure it comes last */
+        min-width: 50px; /* Match TOC button width */
+        text-align: center;
+    }
+
+    /* Hide desktop TOC */
+    #page-layout .toc {
+        display: none !important;
+    }
+
+    /* Ensure mobile menu overlay is available */
+    .mobile-menu-overlay {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+    }
+
+    .mobile-menu-overlay.active {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
+/* No-JS fallback - show full menu */
+.no-js .mobile-menu-toggle,
+.no-js .mobile-toc-toggle {
+    display: none !important;
+}
+
+.no-js .main-nav,
+.no-js .translate-button {
+    display: flex !important;
+}
+
+@media (max-width: 768px) {
+    .no-js .header-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        justify-content: center;
+    }
+
+    .no-js .logo {
+        position: static;
+        transform: none;
+        flex: 0 0 100%;
+        text-align: center;
+        justify-content: center;
+    }
+
+    .no-js .main-nav {
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        justify-content: center;
+    }
+
+    .no-js .main-nav a {
+        padding: 0.5rem;
+        font-size: 0.9rem;
+    }
+
+    .no-js .translate-button {
+        flex: 0 0 auto;
+    }
+}
