diff --git a/resources/js/views/dashboard/DashboardLayout.vue b/resources/js/views/dashboard/DashboardLayout.vue
index 927332f..1755c24 100644
--- a/resources/js/views/dashboard/DashboardLayout.vue
+++ b/resources/js/views/dashboard/DashboardLayout.vue
@@ -1,8 +1,60 @@
 <template>
-    <div class="min-h-screen flex items-center justify-center">
-        <RouterView />
+    <div class="min-h-screen bg-[#f5ede5] flex flex-col">
+        <!-- Top nav -->
+        <nav class="fixed top-0 w-full z-50 bg-[#faf6f3] border-b border-[#e5ded7] px-6 py-4">
+            <div class="max-w-7xl mx-auto flex items-center justify-between">
+                <RouterLink to="/" class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
+                        <iconify-icon icon="lucide:fuel" class="text-white text-xl"></iconify-icon>
+                    </div>
+                    <span class="text-2xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</span>
+                </RouterLink>
+                <div class="flex items-center gap-4">
+                    <RouterLink to="/" class="text-sm font-bold text-[#89726c] hover:text-[#4a3f3b]">
+                        ← Find fuel
+                    </RouterLink>
+                    <span class="text-sm text-[#89726c]">{{ user?.email }}</span>
+                </div>
+            </div>
+        </nav>
+
+        <div class="flex pt-20 max-w-7xl mx-auto w-full px-6 py-8 gap-8">
+            <!-- Sidebar -->
+            <aside class="w-56 flex-shrink-0 hidden md:block">
+                <nav class="space-y-1">
+                    <RouterLink
+                        v-for="item in navItems"
+                        :key="item.to"
+                        :to="item.to"
+                        class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold transition-colors"
+                        :class="$route.path === item.to
+                            ? 'bg-[#bb5b3e] text-white'
+                            : 'text-[#89726c] hover:bg-white hover:text-[#4a3f3b]'"
+                    >
+                        <iconify-icon :icon="item.icon"></iconify-icon>
+                        {{ item.label }}
+                    </RouterLink>
+                </nav>
+            </aside>
+
+            <!-- Content -->
+            <main class="flex-1 min-w-0">
+                <RouterView />
+            </main>
+        </div>
     </div>
 </template>
+
 <script setup>
-import { RouterView } from 'vue-router'
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+import { useAuth } from '../../composables/useAuth.js'
+
+const { user } = useAuth()
+const $route = useRoute()
+
+const navItems = [
+    { to: '/dashboard', label: 'Overview', icon: 'lucide:layout-dashboard' },
+    { to: '/dashboard/saved-stations', label: 'Saved Stations', icon: 'lucide:bookmark' },
+    { to: '/dashboard/preferences', label: 'Preferences', icon: 'lucide:settings' },
+]
 </script>