diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 579bea5..c15917a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,16 @@
 <template>
-  <RouterView />
+  <AppHeader @toggle-drawer="drawerOpen = !drawerOpen" />
+  <AppDrawer :open="drawerOpen" @close="drawerOpen = false" />
+  <main class="pt-14 min-h-screen">
+    <RouterView />
+  </main>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
 import { RouterView } from 'vue-router'
+import AppHeader from '@/components/AppHeader.vue'
+import AppDrawer from '@/components/AppDrawer.vue'
+
+const drawerOpen = ref(false)
 </script>
diff --git a/frontend/src/App.vue.js b/frontend/src/App.vue.js
new file mode 100644
index 0000000..7f4b0bc
--- /dev/null
+++ b/frontend/src/App.vue.js
@@ -0,0 +1,73 @@
+/// <reference types="../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { ref } from 'vue';
+import { RouterView } from 'vue-router';
+import AppHeader from '@/components/AppHeader.vue';
+import AppDrawer from '@/components/AppDrawer.vue';
+const drawerOpen = ref(false);
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+/** @type {[typeof AppHeader, ]} */ ;
+// @ts-ignore
+const __VLS_0 = __VLS_asFunctionalComponent(AppHeader, new AppHeader({
+    ...{ 'onToggleDrawer': {} },
+}));
+const __VLS_1 = __VLS_0({
+    ...{ 'onToggleDrawer': {} },
+}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+let __VLS_3;
+let __VLS_4;
+let __VLS_5;
+const __VLS_6 = {
+    onToggleDrawer: (...[$event]) => {
+        __VLS_ctx.drawerOpen = !__VLS_ctx.drawerOpen;
+    }
+};
+var __VLS_2;
+/** @type {[typeof AppDrawer, ]} */ ;
+// @ts-ignore
+const __VLS_7 = __VLS_asFunctionalComponent(AppDrawer, new AppDrawer({
+    ...{ 'onClose': {} },
+    open: (__VLS_ctx.drawerOpen),
+}));
+const __VLS_8 = __VLS_7({
+    ...{ 'onClose': {} },
+    open: (__VLS_ctx.drawerOpen),
+}, ...__VLS_functionalComponentArgsRest(__VLS_7));
+let __VLS_10;
+let __VLS_11;
+let __VLS_12;
+const __VLS_13 = {
+    onClose: (...[$event]) => {
+        __VLS_ctx.drawerOpen = false;
+    }
+};
+var __VLS_9;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.main, __VLS_intrinsicElements.main)({
+    ...{ class: "pt-14 min-h-screen" },
+});
+const __VLS_14 = {}.RouterView;
+/** @type {[typeof __VLS_components.RouterView, ]} */ ;
+// @ts-ignore
+const __VLS_15 = __VLS_asFunctionalComponent(__VLS_14, new __VLS_14({}));
+const __VLS_16 = __VLS_15({}, ...__VLS_functionalComponentArgsRest(__VLS_15));
+/** @type {__VLS_StyleScopedClasses['pt-14']} */ ;
+/** @type {__VLS_StyleScopedClasses['min-h-screen']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            RouterView: RouterView,
+            AppHeader: AppHeader,
+            AppDrawer: AppDrawer,
+            drawerOpen: drawerOpen,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/api/client.js b/frontend/src/api/client.js
new file mode 100644
index 0000000..3e59230
--- /dev/null
+++ b/frontend/src/api/client.js
@@ -0,0 +1,4 @@
+import axios from 'axios';
+export default axios.create({
+    baseURL: import.meta.env.VITE_API_URL ?? '',
+});
diff --git a/frontend/src/api/gardens.js b/frontend/src/api/gardens.js
new file mode 100644
index 0000000..86efd3c
--- /dev/null
+++ b/frontend/src/api/gardens.js
@@ -0,0 +1,11 @@
+import client from './client';
+export const gardensApi = {
+    list: () => client.get('/api/gardens').then(r => r.data),
+    get: (id) => client.get(`/api/gardens/${id}`).then(r => r.data),
+    create: (g) => client.post('/api/gardens', g).then(r => r.data),
+    update: (id, g) => client.put(`/api/gardens/${id}`, g).then(r => r.data),
+    delete: (id) => client.delete(`/api/gardens/${id}`),
+    cells: (id) => client.get(`/api/gardens/${id}/cells`).then(r => r.data),
+    measurements: (id) => client.get(`/api/gardens/${id}/measurements`).then(r => r.data),
+    addMeasurement: (id, m) => client.post(`/api/gardens/${id}/measurements`, m).then(r => r.data),
+};
diff --git a/frontend/src/api/plantings.js b/frontend/src/api/plantings.js
new file mode 100644
index 0000000..f36bc4e
--- /dev/null
+++ b/frontend/src/api/plantings.js
@@ -0,0 +1,10 @@
+import client from './client';
+export const plantingsApi = {
+    list: () => client.get('/api/plantings').then(r => r.data),
+    get: (id) => client.get(`/api/plantings/${id}`).then(r => r.data),
+    create: (p) => client.post('/api/plantings', p).then(r => r.data),
+    update: (id, p) => client.put(`/api/plantings/${id}`, p).then(r => r.data),
+    delete: (id) => client.delete(`/api/plantings/${id}`),
+    events: (id) => client.get(`/api/plantings/${id}/events`).then(r => r.data),
+    addEvent: (id, e) => client.post(`/api/plantings/${id}/events`, e).then(r => r.data),
+};
diff --git a/frontend/src/api/tasks.js b/frontend/src/api/tasks.js
new file mode 100644
index 0000000..b0b9f64
--- /dev/null
+++ b/frontend/src/api/tasks.js
@@ -0,0 +1,8 @@
+import client from './client';
+export const tasksApi = {
+    list: (params) => client.get('/api/tasks', { params }).then(r => r.data),
+    get: (id) => client.get(`/api/tasks/${id}`).then(r => r.data),
+    create: (t) => client.post('/api/tasks', t).then(r => r.data),
+    update: (id, t) => client.put(`/api/tasks/${id}`, t).then(r => r.data),
+    delete: (id) => client.delete(`/api/tasks/${id}`),
+};
diff --git a/frontend/src/api/varieties.js b/frontend/src/api/varieties.js
new file mode 100644
index 0000000..ae79094
--- /dev/null
+++ b/frontend/src/api/varieties.js
@@ -0,0 +1,8 @@
+import client from './client';
+export const varietiesApi = {
+    list: () => client.get('/api/varieties').then(r => r.data),
+    get: (id) => client.get(`/api/varieties/${id}`).then(r => r.data),
+    create: (v) => client.post('/api/varieties', v).then(r => r.data),
+    update: (id, v) => client.put(`/api/varieties/${id}`, v).then(r => r.data),
+    delete: (id) => client.delete(`/api/varieties/${id}`),
+};
diff --git a/frontend/src/components/AppDrawer.vue b/frontend/src/components/AppDrawer.vue
new file mode 100644
index 0000000..567f2de
--- /dev/null
+++ b/frontend/src/components/AppDrawer.vue
@@ -0,0 +1,36 @@
+<template>
+  <Transition name="slide">
+    <div v-if="open" class="fixed inset-0 z-40 flex md:hidden" @click.self="$emit('close')">
+      <nav class="bg-bg-hard w-64 h-full p-6 flex flex-col gap-1 border-r border-bg-soft shadow-2xl">
+        <span class="text-green font-bold text-xl mb-6">🌿 Jardin</span>
+        <RouterLink
+          v-for="l in links" :key="l.to" :to="l.to"
+          class="text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors"
+          active-class="bg-bg-soft text-green"
+          @click="$emit('close')"
+        >{{ l.label }}</RouterLink>
+      </nav>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+defineProps<{ open: boolean }>()
+defineEmits(['close'])
+const links = [
+  { to: '/', label: 'Dashboard' },
+  { to: '/jardins', label: 'Jardins' },
+  { to: '/varietes', label: 'Variétés' },
+  { to: '/plantations', label: 'Plantations' },
+  { to: '/taches', label: 'Tâches' },
+  { to: '/planning', label: 'Planning' },
+  { to: '/lunaire', label: 'Calendrier lunaire' },
+  { to: '/reglages', label: 'Réglages' },
+]
+</script>
+
+<style scoped>
+.slide-enter-active, .slide-leave-active { transition: opacity 0.2s; }
+.slide-enter-from, .slide-leave-to { opacity: 0; }
+</style>
diff --git a/frontend/src/components/AppDrawer.vue.js b/frontend/src/components/AppDrawer.vue.js
new file mode 100644
index 0000000..ae6cf35
--- /dev/null
+++ b/frontend/src/components/AppDrawer.vue.js
@@ -0,0 +1,123 @@
+import { RouterLink } from 'vue-router';
+const __VLS_props = defineProps();
+const __VLS_emit = defineEmits(['close']);
+const links = [
+    { to: '/', label: 'Dashboard' },
+    { to: '/jardins', label: 'Jardins' },
+    { to: '/varietes', label: 'Variétés' },
+    { to: '/plantations', label: 'Plantations' },
+    { to: '/taches', label: 'Tâches' },
+    { to: '/planning', label: 'Planning' },
+    { to: '/lunaire', label: 'Calendrier lunaire' },
+    { to: '/reglages', label: 'Réglages' },
+];
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+// CSS variable injection 
+// CSS variable injection end 
+const __VLS_0 = {}.Transition;
+/** @type {[typeof __VLS_components.Transition, typeof __VLS_components.Transition, ]} */ ;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    name: "slide",
+}));
+const __VLS_2 = __VLS_1({
+    name: "slide",
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+__VLS_3.slots.default;
+if (__VLS_ctx.open) {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.open))
+                    return;
+                __VLS_ctx.$emit('close');
+            } },
+        ...{ class: "fixed inset-0 z-40 flex md:hidden" },
+    });
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.nav, __VLS_intrinsicElements.nav)({
+        ...{ class: "bg-bg-hard w-64 h-full p-6 flex flex-col gap-1 border-r border-bg-soft shadow-2xl" },
+    });
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+        ...{ class: "text-green font-bold text-xl mb-6" },
+    });
+    for (const [l] of __VLS_getVForSourceType((__VLS_ctx.links))) {
+        const __VLS_4 = {}.RouterLink;
+        /** @type {[typeof __VLS_components.RouterLink, typeof __VLS_components.RouterLink, ]} */ ;
+        // @ts-ignore
+        const __VLS_5 = __VLS_asFunctionalComponent(__VLS_4, new __VLS_4({
+            ...{ 'onClick': {} },
+            key: (l.to),
+            to: (l.to),
+            ...{ class: "text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors" },
+            activeClass: "bg-bg-soft text-green",
+        }));
+        const __VLS_6 = __VLS_5({
+            ...{ 'onClick': {} },
+            key: (l.to),
+            to: (l.to),
+            ...{ class: "text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors" },
+            activeClass: "bg-bg-soft text-green",
+        }, ...__VLS_functionalComponentArgsRest(__VLS_5));
+        let __VLS_8;
+        let __VLS_9;
+        let __VLS_10;
+        const __VLS_11 = {
+            onClick: (...[$event]) => {
+                if (!(__VLS_ctx.open))
+                    return;
+                __VLS_ctx.$emit('close');
+            }
+        };
+        __VLS_7.slots.default;
+        (l.label);
+        var __VLS_7;
+    }
+}
+var __VLS_3;
+/** @type {__VLS_StyleScopedClasses['fixed']} */ ;
+/** @type {__VLS_StyleScopedClasses['inset-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-40']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-bg-hard']} */ ;
+/** @type {__VLS_StyleScopedClasses['w-64']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-full']} */ ;
+/** @type {__VLS_StyleScopedClasses['p-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-1']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-r']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-bg-soft']} */ ;
+/** @type {__VLS_StyleScopedClasses['shadow-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['mb-6']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-text-muted']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:text-text']} */ ;
+/** @type {__VLS_StyleScopedClasses['py-2']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-3']} */ ;
+/** @type {__VLS_StyleScopedClasses['rounded-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition-colors']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            RouterLink: RouterLink,
+            links: links,
+        };
+    },
+    emits: {},
+    __typeProps: {},
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    __typeProps: {},
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
new file mode 100644
index 0000000..98e7d5e
--- /dev/null
+++ b/frontend/src/components/AppHeader.vue
@@ -0,0 +1,28 @@
+<template>
+  <header class="fixed top-0 left-0 right-0 z-50 bg-bg-hard border-b border-bg-soft h-14 flex items-center px-4 gap-4">
+    <button class="md:hidden text-text-muted hover:text-text text-xl leading-none" @click="$emit('toggle-drawer')">☰</button>
+    <RouterLink to="/" class="text-green font-bold text-lg tracking-wide">🌿 Jardin</RouterLink>
+    <nav class="hidden md:flex gap-5 ml-4">
+      <RouterLink
+        v-for="l in links" :key="l.to" :to="l.to"
+        class="text-text-muted hover:text-text transition-colors text-sm"
+        active-class="text-green font-semibold"
+      >{{ l.label }}</RouterLink>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+defineEmits(['toggle-drawer'])
+const links = [
+  { to: '/', label: 'Dashboard' },
+  { to: '/jardins', label: 'Jardins' },
+  { to: '/varietes', label: 'Variétés' },
+  { to: '/plantations', label: 'Plantations' },
+  { to: '/taches', label: 'Tâches' },
+  { to: '/planning', label: 'Planning' },
+  { to: '/lunaire', label: 'Lunaire' },
+  { to: '/reglages', label: 'Réglages' },
+]
+</script>
diff --git a/frontend/src/components/AppHeader.vue.js b/frontend/src/components/AppHeader.vue.js
new file mode 100644
index 0000000..6831d45
--- /dev/null
+++ b/frontend/src/components/AppHeader.vue.js
@@ -0,0 +1,109 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+import { RouterLink } from 'vue-router';
+const __VLS_emit = defineEmits(['toggle-drawer']);
+const links = [
+    { to: '/', label: 'Dashboard' },
+    { to: '/jardins', label: 'Jardins' },
+    { to: '/varietes', label: 'Variétés' },
+    { to: '/plantations', label: 'Plantations' },
+    { to: '/taches', label: 'Tâches' },
+    { to: '/planning', label: 'Planning' },
+    { to: '/lunaire', label: 'Lunaire' },
+    { to: '/reglages', label: 'Réglages' },
+];
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.header, __VLS_intrinsicElements.header)({
+    ...{ class: "fixed top-0 left-0 right-0 z-50 bg-bg-hard border-b border-bg-soft h-14 flex items-center px-4 gap-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.$emit('toggle-drawer');
+        } },
+    ...{ class: "md:hidden text-text-muted hover:text-text text-xl leading-none" },
+});
+const __VLS_0 = {}.RouterLink;
+/** @type {[typeof __VLS_components.RouterLink, typeof __VLS_components.RouterLink, ]} */ ;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({
+    to: "/",
+    ...{ class: "text-green font-bold text-lg tracking-wide" },
+}));
+const __VLS_2 = __VLS_1({
+    to: "/",
+    ...{ class: "text-green font-bold text-lg tracking-wide" },
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+__VLS_3.slots.default;
+var __VLS_3;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.nav, __VLS_intrinsicElements.nav)({
+    ...{ class: "hidden md:flex gap-5 ml-4" },
+});
+for (const [l] of __VLS_getVForSourceType((__VLS_ctx.links))) {
+    const __VLS_4 = {}.RouterLink;
+    /** @type {[typeof __VLS_components.RouterLink, typeof __VLS_components.RouterLink, ]} */ ;
+    // @ts-ignore
+    const __VLS_5 = __VLS_asFunctionalComponent(__VLS_4, new __VLS_4({
+        key: (l.to),
+        to: (l.to),
+        ...{ class: "text-text-muted hover:text-text transition-colors text-sm" },
+        activeClass: "text-green font-semibold",
+    }));
+    const __VLS_6 = __VLS_5({
+        key: (l.to),
+        to: (l.to),
+        ...{ class: "text-text-muted hover:text-text transition-colors text-sm" },
+        activeClass: "text-green font-semibold",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_5));
+    __VLS_7.slots.default;
+    (l.label);
+    var __VLS_7;
+}
+/** @type {__VLS_StyleScopedClasses['fixed']} */ ;
+/** @type {__VLS_StyleScopedClasses['top-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['left-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['right-0']} */ ;
+/** @type {__VLS_StyleScopedClasses['z-50']} */ ;
+/** @type {__VLS_StyleScopedClasses['bg-bg-hard']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-b']} */ ;
+/** @type {__VLS_StyleScopedClasses['border-bg-soft']} */ ;
+/** @type {__VLS_StyleScopedClasses['h-14']} */ ;
+/** @type {__VLS_StyleScopedClasses['flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['px-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-text-muted']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:text-text']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['leading-none']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-lg']} */ ;
+/** @type {__VLS_StyleScopedClasses['tracking-wide']} */ ;
+/** @type {__VLS_StyleScopedClasses['hidden']} */ ;
+/** @type {__VLS_StyleScopedClasses['md:flex']} */ ;
+/** @type {__VLS_StyleScopedClasses['gap-5']} */ ;
+/** @type {__VLS_StyleScopedClasses['ml-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-text-muted']} */ ;
+/** @type {__VLS_StyleScopedClasses['hover:text-text']} */ ;
+/** @type {__VLS_StyleScopedClasses['transition-colors']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-sm']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            RouterLink: RouterLink,
+            links: links,
+        };
+    },
+    emits: {},
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 0000000..60dce9d
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+import './style.css';
+createApp(App).use(createPinia()).use(router).mount('#app');
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 0000000..14100e2
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router';
+export default createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '/', component: () => import('@/views/DashboardView.vue') },
+        { path: '/jardins', component: () => import('@/views/JardinsView.vue') },
+        { path: '/jardins/:id', component: () => import('@/views/JardinDetailView.vue') },
+        { path: '/varietes', component: () => import('@/views/VarietesView.vue') },
+        { path: '/plantations', component: () => import('@/views/PlantationsView.vue') },
+        { path: '/planning', component: () => import('@/views/PlanningView.vue') },
+        { path: '/taches', component: () => import('@/views/TachesView.vue') },
+        { path: '/lunaire', component: () => import('@/views/LunaireView.vue') },
+        { path: '/reglages', component: () => import('@/views/ReglagesView.vue') },
+    ],
+});
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9849172..bf70005 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -2,5 +2,15 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 export default createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [
+    { path: '/',            component: () => import('@/views/DashboardView.vue') },
+    { path: '/jardins',     component: () => import('@/views/JardinsView.vue') },
+    { path: '/jardins/:id', component: () => import('@/views/JardinDetailView.vue') },
+    { path: '/varietes',    component: () => import('@/views/VarietesView.vue') },
+    { path: '/plantations', component: () => import('@/views/PlantationsView.vue') },
+    { path: '/planning',    component: () => import('@/views/PlanningView.vue') },
+    { path: '/taches',      component: () => import('@/views/TachesView.vue') },
+    { path: '/lunaire',     component: () => import('@/views/LunaireView.vue') },
+    { path: '/reglages',    component: () => import('@/views/ReglagesView.vue') },
+  ],
 })
diff --git a/frontend/src/stores/gardens.js b/frontend/src/stores/gardens.js
new file mode 100644
index 0000000..ae9b08d
--- /dev/null
+++ b/frontend/src/stores/gardens.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { gardensApi } from '@/api/gardens';
+export const useGardensStore = defineStore('gardens', () => {
+    const gardens = ref([]);
+    const loading = ref(false);
+    async function fetchAll() {
+        loading.value = true;
+        gardens.value = await gardensApi.list();
+        loading.value = false;
+    }
+    async function create(g) {
+        const created = await gardensApi.create(g);
+        gardens.value.push(created);
+        return created;
+    }
+    async function remove(id) {
+        await gardensApi.delete(id);
+        gardens.value = gardens.value.filter(g => g.id !== id);
+    }
+    return { gardens, loading, fetchAll, create, remove };
+});
diff --git a/frontend/src/stores/plantings.js b/frontend/src/stores/plantings.js
new file mode 100644
index 0000000..6ab566b
--- /dev/null
+++ b/frontend/src/stores/plantings.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { plantingsApi } from '@/api/plantings';
+export const usePlantingsStore = defineStore('plantings', () => {
+    const plantings = ref([]);
+    const loading = ref(false);
+    async function fetchAll() {
+        loading.value = true;
+        plantings.value = await plantingsApi.list();
+        loading.value = false;
+    }
+    async function create(p) {
+        const created = await plantingsApi.create(p);
+        plantings.value.push(created);
+        return created;
+    }
+    async function remove(id) {
+        await plantingsApi.delete(id);
+        plantings.value = plantings.value.filter(p => p.id !== id);
+    }
+    return { plantings, loading, fetchAll, create, remove };
+});
diff --git a/frontend/src/stores/tasks.js b/frontend/src/stores/tasks.js
new file mode 100644
index 0000000..ffa453f
--- /dev/null
+++ b/frontend/src/stores/tasks.js
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { tasksApi } from '@/api/tasks';
+export const useTasksStore = defineStore('tasks', () => {
+    const tasks = ref([]);
+    const loading = ref(false);
+    async function fetchAll(params) {
+        loading.value = true;
+        tasks.value = await tasksApi.list(params);
+        loading.value = false;
+    }
+    async function create(t) {
+        const created = await tasksApi.create(t);
+        tasks.value.push(created);
+        return created;
+    }
+    async function updateStatut(id, statut) {
+        const t = tasks.value.find(t => t.id === id);
+        if (!t)
+            return;
+        const updated = await tasksApi.update(id, { ...t, statut });
+        Object.assign(t, updated);
+    }
+    async function remove(id) {
+        await tasksApi.delete(id);
+        tasks.value = tasks.value.filter(t => t.id !== id);
+    }
+    return { tasks, loading, fetchAll, create, updateStatut, remove };
+});
diff --git a/frontend/src/stores/varieties.js b/frontend/src/stores/varieties.js
new file mode 100644
index 0000000..c58e422
--- /dev/null
+++ b/frontend/src/stores/varieties.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { varietiesApi } from '@/api/varieties';
+export const useVarietiesStore = defineStore('varieties', () => {
+    const varieties = ref([]);
+    const loading = ref(false);
+    async function fetchAll() {
+        loading.value = true;
+        varieties.value = await varietiesApi.list();
+        loading.value = false;
+    }
+    async function create(v) {
+        const created = await varietiesApi.create(v);
+        varieties.value.push(created);
+        return created;
+    }
+    async function remove(id) {
+        await varietiesApi.delete(id);
+        varieties.value = varieties.value.filter(v => v.id !== id);
+    }
+    return { varieties, loading, fetchAll, create, remove };
+});
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
new file mode 100644
index 0000000..bee3323
--- /dev/null
+++ b/frontend/src/views/DashboardView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Dashboard</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/DashboardView.vue.js b/frontend/src/views/DashboardView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/DashboardView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/JardinDetailView.vue b/frontend/src/views/JardinDetailView.vue
new file mode 100644
index 0000000..d0d9e45
--- /dev/null
+++ b/frontend/src/views/JardinDetailView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Détail jardin</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/JardinDetailView.vue.js b/frontend/src/views/JardinDetailView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/JardinDetailView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/JardinsView.vue b/frontend/src/views/JardinsView.vue
new file mode 100644
index 0000000..6fb27a9
--- /dev/null
+++ b/frontend/src/views/JardinsView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Jardins</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/JardinsView.vue.js b/frontend/src/views/JardinsView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/JardinsView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/LunaireView.vue b/frontend/src/views/LunaireView.vue
new file mode 100644
index 0000000..791dccd
--- /dev/null
+++ b/frontend/src/views/LunaireView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Calendrier lunaire</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/LunaireView.vue.js b/frontend/src/views/LunaireView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/LunaireView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/PlanningView.vue b/frontend/src/views/PlanningView.vue
new file mode 100644
index 0000000..77c5e26
--- /dev/null
+++ b/frontend/src/views/PlanningView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Planning</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/PlanningView.vue.js b/frontend/src/views/PlanningView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/PlanningView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/PlantationsView.vue b/frontend/src/views/PlantationsView.vue
new file mode 100644
index 0000000..9180c22
--- /dev/null
+++ b/frontend/src/views/PlantationsView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Plantations</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/PlantationsView.vue.js b/frontend/src/views/PlantationsView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/PlantationsView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/ReglagesView.vue b/frontend/src/views/ReglagesView.vue
new file mode 100644
index 0000000..e30bed4
--- /dev/null
+++ b/frontend/src/views/ReglagesView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Réglages</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/ReglagesView.vue.js b/frontend/src/views/ReglagesView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/ReglagesView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/TachesView.vue b/frontend/src/views/TachesView.vue
new file mode 100644
index 0000000..ec09e9b
--- /dev/null
+++ b/frontend/src/views/TachesView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Tâches</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/TachesView.vue.js b/frontend/src/views/TachesView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/TachesView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */
diff --git a/frontend/src/views/VarietesView.vue b/frontend/src/views/VarietesView.vue
new file mode 100644
index 0000000..dee03e8
--- /dev/null
+++ b/frontend/src/views/VarietesView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold text-green">Variétés</h1>
+  </div>
+</template>
diff --git a/frontend/src/views/VarietesView.vue.js b/frontend/src/views/VarietesView.vue.js
new file mode 100644
index 0000000..f925a2e
--- /dev/null
+++ b/frontend/src/views/VarietesView.vue.js
@@ -0,0 +1,27 @@
+/// <reference types="../../node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts" />
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "p-4" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.h1, __VLS_intrinsicElements.h1)({
+    ...{ class: "text-2xl font-bold text-green" },
+});
+/** @type {__VLS_StyleScopedClasses['p-4']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-2xl']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-bold']} */ ;
+/** @type {__VLS_StyleScopedClasses['text-green']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */