diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 5259528..7507915 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -11,7 +11,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @livewireStyles
 </head>
-<body class="font-sans antialiased bg-gray-600 text-gray-100">
+<body class="font-sans antialiased bg-gray-600 text-gray-100" x-data="{ mobileMenuOpen: false }">
     <div class="min-h-screen">
         <!-- Navigation -->
         <nav class="border-b-2 border-secondary shadow-sm z-50 mb-8 bg-gray-700">
@@ -82,18 +82,81 @@ class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-gray-
                     </div>
 
                     <!-- Mobile menu button -->
-                    <div class="-mr-2 flex items-center sm:hidden" x-data="{ open: false }">
-                        <button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-100 hover:text-accent-blue hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-accent-blue transition">
+                    <div class="-mr-2 flex items-center sm:hidden">
+                        <button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-gray-100 hover:text-accent-blue hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-accent-blue transition">
                             <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                                <path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                                <path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                <path :class="{'hidden': mobileMenuOpen, 'inline-flex': !mobileMenuOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                                <path :class="{'hidden': !mobileMenuOpen, 'inline-flex': mobileMenuOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                             </svg>
                         </button>
                     </div>
                 </div>
             </div>
+
         </nav>
 
+        <!-- Mobile menu (full screen overlay) -->
+        <div x-show="mobileMenuOpen"
+             x-cloak
+             x-transition:enter="transition ease-out duration-200"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-150"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             class="sm:hidden fixed inset-0 z-50 bg-gray-700">
+
+            <!-- Close button -->
+            <div class="flex justify-end p-4">
+                <button @click="mobileMenuOpen = false" class="p-2 text-gray-100 hover:text-accent-blue">
+                    <svg class="h-8 w-8" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Menu content -->
+            <div class="flex flex-col items-center justify-center h-full -mt-16">
+                @auth
+                <div class="space-y-6 text-center">
+                    <a href="{{ route('dashboard') }}"
+                       class="block text-2xl font-medium {{ request()->routeIs('dashboard') ? 'text-accent-blue' : 'text-gray-100' }}">
+                        Dashboard
+                    </a>
+                    <a href="{{ route('users.index') }}"
+                       class="block text-2xl font-medium {{ request()->routeIs('users.*') ? 'text-accent-blue' : 'text-gray-100' }}">
+                        Users
+                    </a>
+                    <a href="{{ route('dishes.index') }}"
+                       class="block text-2xl font-medium {{ request()->routeIs('dishes.*') ? 'text-accent-blue' : 'text-gray-100' }}">
+                        Dishes
+                    </a>
+                    <a href="{{ route('schedule.index') }}"
+                       class="block text-2xl font-medium {{ request()->routeIs('schedule.*') ? 'text-accent-blue' : 'text-gray-100' }}">
+                        Schedule
+                    </a>
+                </div>
+
+                <div class="mt-12 pt-6 border-t border-secondary text-center">
+                    <div class="text-gray-300 mb-4">{{ Auth::user()->name }}</div>
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <button type="submit" class="text-xl text-danger">
+                            Logout
+                        </button>
+                    </form>
+                </div>
+                @else
+                <div class="space-y-6 text-center">
+                    <a href="{{ route('login') }}" class="block text-2xl font-medium text-accent-blue">Login</a>
+                    @if (Route::has('register'))
+                        <a href="{{ route('register') }}" class="block text-2xl font-medium text-accent-blue">Register</a>
+                    @endif
+                </div>
+                @endauth
+            </div>
+        </div>
+
         <!-- Page Content -->
         <main>
             {{ $slot }}
