diff --git a/templates/layout.html b/templates/layout.html
index f5e568e..f3e2c36 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -23,17 +23,17 @@
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
                         <a href="/" class="text-white font-bold text-xl tracking-tight">ERP System</a>
-                        <div class="ml-10 flex items-baseline space-x-4">
+                        <div class="hidden md:flex ml-10 items-baseline space-x-4">
                             <a href="/" class="{{if eq .ActivePage "dashboard"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Dashboard</a>
                             <a href="/customers" class="{{if eq .ActivePage "customers"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Customers</a>
                             <a href="/orders" class="{{if eq .ActivePage "orders"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Orders</a>
                             <a href="/invoices" class="{{if eq .ActivePage "invoices"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium">Invoices</a>
-                            <div class="relative group">
-                                <button class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium inline-flex items-center">
+                            <div class="relative">
+                                <button type="button" onclick="toggleDropdown(event, 'ledger-dropdown')" class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} rounded-md px-3 py-2 text-sm font-medium inline-flex items-center">
                                     General Ledger
                                     <svg class="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                                 </button>
-                                <div class="absolute left-0 z-10 mt-1 w-48 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 hidden group-hover:block">
+                                <div id="ledger-dropdown" class="absolute left-0 z-10 mt-1 w-48 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 hidden">
                                     <div class="py-1">
                                         <a href="/ledger/accounts" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" hx-boost="true">Chart of Accounts</a>
                                         <a href="/ledger/journal" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" hx-boost="true">Journal Entries</a>
@@ -43,12 +43,52 @@
                             </div>
                         </div>
                     </div>
-                    <div class="flex items-center space-x-4">
+                    <div class="hidden md:flex items-center space-x-4">
                         <span class="text-indigo-200 text-sm">{{.Username}}</span>
                         <form method="POST" action="/logout" hx-post="/logout">
                             <button type="submit" class="text-indigo-200 hover:text-white text-sm font-medium">Logout</button>
                         </form>
                     </div>
+                    <div class="-mr-2 flex md:hidden">
+                        <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false">
+                            <span class="sr-only">Open main menu</span>
+                            <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hidden md:hidden" id="mobile-menu">
+                <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+                    <a href="/" class="{{if eq .ActivePage "dashboard"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Dashboard</a>
+                    <a href="/customers" class="{{if eq .ActivePage "customers"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Customers</a>
+                    <a href="/orders" class="{{if eq .ActivePage "orders"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Orders</a>
+                    <a href="/invoices" class="{{if eq .ActivePage "invoices"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} block rounded-md px-3 py-2 text-base font-medium">Invoices</a>
+                    <div>
+                         <button type="button" onclick="toggleDropdown(event, 'ledger-mobile-dropdown')" class="{{if eq .ActivePage "ledger"}}bg-indigo-700 text-white{{else}}text-indigo-200 hover:bg-indigo-500 hover:text-white{{end}} w-full text-left block rounded-md px-3 py-2 text-base font-medium flex justify-between items-center">
+                            General Ledger
+                            <svg class="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
+                         </button>
+                         <div id="ledger-mobile-dropdown" class="hidden pl-4 space-y-1">
+                             <a href="/ledger/accounts" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Chart of Accounts</a>
+                             <a href="/ledger/journal" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Journal Entries</a>
+                             <a href="/ledger/trial-balance" class="text-indigo-200 hover:bg-indigo-500 hover:text-white block rounded-md px-3 py-2 text-sm font-medium">Trial Balance</a>
+                         </div>
+                    </div>
+                </div>
+                <div class="border-t border-indigo-700 pb-3 pt-4">
+                    <div class="flex items-center px-5">
+                        <div class="ml-3">
+                            <div class="text-base font-medium leading-none text-white">{{.Username}}</div>
+                        </div>
+                    </div>
+                    <div class="mt-3 space-y-1 px-2">
+                        <form method="POST" action="/logout" hx-post="/logout">
+                            <button type="submit" class="block w-full text-left rounded-md px-3 py-2 text-base font-medium text-indigo-200 hover:bg-indigo-500 hover:text-white">Logout</button>
+                        </form>
+                    </div>
                 </div>
             </div>
         </nav>
@@ -60,6 +100,25 @@
             </div>
         </main>
     </div>
+    <script>
+        function toggleDropdown(event, id) {
+            event.stopPropagation();
+            const el = document.getElementById(id);
+            if (el) el.classList.toggle('hidden');
+        }
+
+        function toggleMobileMenu() {
+            const el = document.getElementById('mobile-menu');
+            if (el) el.classList.toggle('hidden');
+        }
+
+        document.addEventListener('click', function(event) {
+            const dropdown = document.getElementById('ledger-dropdown');
+            if (dropdown && !dropdown.classList.contains('hidden') && !event.target.closest('button[onclick*="ledger-dropdown"]') && !dropdown.contains(event.target)) {
+                dropdown.classList.add('hidden');
+            }
+        });
+    </script>
 </body>
 </html>
 {{end}}