diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c15917a..4493020 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,16 +1,57 @@
 <template>
-  <AppHeader @toggle-drawer="drawerOpen = !drawerOpen" />
+  <!-- Mobile: header + drawer -->
+  <AppHeader class="lg:hidden" @toggle-drawer="drawerOpen = !drawerOpen" />
   <AppDrawer :open="drawerOpen" @close="drawerOpen = false" />
-  <main class="pt-14 min-h-screen">
-    <RouterView />
-  </main>
+
+  <!-- Desktop: sidebar fixe + contenu -->
+  <div class="lg:flex">
+    <!-- Sidebar desktop -->
+    <aside class="hidden lg:flex lg:flex-col lg:fixed lg:inset-y-0 lg:w-60 bg-bg-hard border-r border-bg-soft z-30">
+      <div class="px-5 pt-6 pb-4 border-b border-bg-soft">
+        <RouterLink to="/" class="text-green font-bold text-xl tracking-wide flex items-center gap-2">
+          🌿 <span>Jardin</span>
+        </RouterLink>
+      </div>
+      <nav class="flex-1 py-4 px-3 flex flex-col gap-0.5 overflow-y-auto">
+        <RouterLink
+          v-for="l in links" :key="l.to" :to="l.to"
+          class="flex items-center gap-3 text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors group"
+          active-class="bg-bg-soft text-green font-medium"
+        >
+          <span class="text-base leading-none">{{ l.icon }}</span>
+          <span>{{ l.label }}</span>
+        </RouterLink>
+      </nav>
+      <div class="px-4 py-4 border-t border-bg-soft text-text-muted text-xs">
+        🌱 Jardin App
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <main class="pt-14 lg:pt-0 lg:pl-60 min-h-screen w-full">
+      <RouterView />
+    </main>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RouterView } from 'vue-router'
+import { RouterLink, RouterView } from 'vue-router'
 import AppHeader from '@/components/AppHeader.vue'
 import AppDrawer from '@/components/AppDrawer.vue'
 
 const drawerOpen = ref(false)
+
+const links = [
+  { to: '/', label: 'Dashboard', icon: '🏠' },
+  { to: '/jardins', label: 'Jardins', icon: '🪴' },
+  { to: '/plantes', label: 'Plantes', icon: '🌱' },
+  { to: '/bibliotheque', label: 'Bibliothèque', icon: '📷' },
+  { to: '/outils', label: 'Outils', icon: '🔧' },
+  { to: '/plantations', label: 'Plantations', icon: '🥕' },
+  { to: '/taches', label: 'Tâches', icon: '✅' },
+  { to: '/planning', label: 'Planning', icon: '📆' },
+  { to: '/calendrier', label: 'Calendrier', icon: '🌙' },
+  { to: '/reglages', label: 'Réglages', icon: '⚙️' },
+]
 </script>