diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..36a8e51
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "strict",
+  "singleAttributePerLine": false,
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": true,
+  "vueIndentScriptAndStyle": true,
+  "bracketSameLine": true
+}
\ No newline at end of file
diff --git a/assets/vue/app/router/index.js b/assets/vue/app/router/index.js
index a56c511..9da2d15 100644
--- a/assets/vue/app/router/index.js
+++ b/assets/vue/app/router/index.js
@@ -1,17 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '../shared/components/layout/Layout.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
-import MangaDetails from "../domain/manga/presentation/pages/MangaDetails.vue";
+import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
 
 // Placeholder component for new routes
 const PlaceholderComponent = {
-  props: {
-    title: {
-      type: String,
-      required: true
-    }
-  },
-  template: `
+    props: {
+        title: {
+            type: String,
+            required: true
+        }
+    },
+    template: `
     <div class="container mx-auto px-4 py-8">
       <h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
       <p class="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
@@ -20,118 +20,130 @@ const PlaceholderComponent = {
 };
 
 const routes = [
-  {
-    path: '/',
-    component: Layout,
-    children: [
-      {
-        path: '',
-        name: 'home',
-        component: HomePage
-      },
-      {
-        path: '/manga/:id',
-        name: 'manga-details',
-        component: MangaDetails
-      },
-      {
-        path: '/add',
-        name: 'add-manga',
-        component: PlaceholderComponent,
-        props: { title: 'Ajouter un manga' }
-      },
-      {
-        path: '/reader/:chapterId',
-        name: 'reader',
-        component: PlaceholderComponent,
-        props: { title: 'Lecteur' }
-      },
-      // Pages placeholder avec chargement différé
-      {
-        path: '/import',
-        name: 'import',
-        component: PlaceholderComponent,
-        props: { title: 'Import de bibliothèque' }
-      },
-      {
-        path: '/discover',
-        name: 'discover',
-        component: PlaceholderComponent,
-        props: { title: 'Découvrir' }
-      },
-      {
-        path: '/convert',
-        name: 'convert',
-        component: PlaceholderComponent,
-        props: { title: 'Convertir CBR en CBZ' }
-      },
-      {
-        path: '/calendar',
-        name: 'calendar',
-        component: PlaceholderComponent,
-        props: { title: 'Calendrier' }
-      },
-      {
-        path: '/activity',
-        name: 'activity',
-        component: PlaceholderComponent,
-        props: { title: 'Activité' }
-      },
-      // Paramètres
-      {
-        path: '/settings/general',
-        name: 'settings-general',
-        component: PlaceholderComponent,
-        props: { title: 'Paramètres généraux' }
-      },
-      {
-        path: '/settings/folders',
-        name: 'settings-folders',
-        component: PlaceholderComponent,
-        props: { title: 'Gestion des dossiers' }
-      },
-      {
-        path: '/settings/scrappers',
-        name: 'settings-scrappers',
-        component: PlaceholderComponent,
-        props: { title: 'Configuration des scrappers' }
-      },
-      {
-        path: '/settings/ui',
-        name: 'settings-ui',
-        component: PlaceholderComponent,
-        props: { title: "Paramètres de l'interface" }
-      },
-      // Système
-      {
-        path: '/system/status',
-        name: 'system-status',
-        component: PlaceholderComponent,
-        props: { title: 'Status du système' }
-      },
-      {
-        path: '/system/backup',
-        name: 'system-backup',
-        component: PlaceholderComponent,
-        props: { title: 'Sauvegarde' }
-      },
-      {
-        path: '/system/logs',
-        name: 'system-logs',
-        component: PlaceholderComponent,
-        props: { title: 'Journaux système' }
-      },
-      {
-        path: '/system/updates',
-        name: 'system-updates',
-        component: PlaceholderComponent,
-        props: { title: 'Mises à jour' }
-      }
-    ]
-  }
+    {
+        path: '/',
+        component: Layout,
+        children: [
+            {
+                path: '',
+                name: 'home',
+                component: HomePage
+            },
+            {
+                path: '/manga/:id',
+                name: 'manga-details',
+                component: MangaDetails
+            },
+            {
+                path: '/add',
+                name: 'add-manga',
+                component: PlaceholderComponent,
+                props: { title: 'Ajouter un manga' }
+            },
+            {
+                path: '/reader/:chapterId',
+                name: 'reader',
+                component: PlaceholderComponent,
+                props: { title: 'Lecteur' }
+            },
+            // Pages placeholder avec chargement différé
+            {
+                path: '/import',
+                name: 'import',
+                component: PlaceholderComponent,
+                props: { title: 'Import de bibliothèque' }
+            },
+            {
+                path: '/discover',
+                name: 'discover',
+                component: PlaceholderComponent,
+                props: { title: 'Découvrir' }
+            },
+            {
+                path: '/convert',
+                name: 'convert',
+                component: PlaceholderComponent,
+                props: { title: 'Convertir CBR en CBZ' }
+            },
+            {
+                path: '/calendar',
+                name: 'calendar',
+                component: PlaceholderComponent,
+                props: { title: 'Calendrier' }
+            },
+            {
+                path: '/activity',
+                name: 'activity',
+                component: PlaceholderComponent,
+                props: { title: 'Activité' }
+            },
+            // Paramètres
+            {
+                path: '/settings',
+                name: 'settings',
+                component: PlaceholderComponent,
+                props: { title: 'Paramètres' }
+            },
+            {
+                path: '/settings/general',
+                name: 'settings-general',
+                component: PlaceholderComponent,
+                props: { title: 'Paramètres généraux' }
+            },
+            {
+                path: '/settings/folders',
+                name: 'settings-folders',
+                component: PlaceholderComponent,
+                props: { title: 'Gestion des dossiers' }
+            },
+            {
+                path: '/settings/scrappers',
+                name: 'settings-scrappers',
+                component: PlaceholderComponent,
+                props: { title: 'Configuration des scrappers' }
+            },
+            {
+                path: '/settings/ui',
+                name: 'settings-ui',
+                component: PlaceholderComponent,
+                props: { title: "Paramètres de l'interface" }
+            },
+            // Système
+            {
+                path: '/system',
+                name: 'system',
+                component: PlaceholderComponent,
+                props: { title: 'Système' }
+            },
+            {
+                path: '/system/status',
+                name: 'system-status',
+                component: PlaceholderComponent,
+                props: { title: 'Status du système' }
+            },
+            {
+                path: '/system/backup',
+                name: 'system-backup',
+                component: PlaceholderComponent,
+                props: { title: 'Sauvegarde' }
+            },
+            {
+                path: '/system/logs',
+                name: 'system-logs',
+                component: PlaceholderComponent,
+                props: { title: 'Journaux système' }
+            },
+            {
+                path: '/system/updates',
+                name: 'system-updates',
+                component: PlaceholderComponent,
+                props: { title: 'Mises à jour' }
+            }
+        ]
+    }
 ];
 
 export const router = createRouter({
-  history: createWebHistory('/vue/'),
-  routes
+    history: createWebHistory('/vue/'),
+    routes
 });
diff --git a/assets/vue/app/shared/components/layout/Layout.vue b/assets/vue/app/shared/components/layout/Layout.vue
index 071503d..ed9378b 100644
--- a/assets/vue/app/shared/components/layout/Layout.vue
+++ b/assets/vue/app/shared/components/layout/Layout.vue
@@ -1,36 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <Header 
-      @menu-click="toggleSidebar" 
-      @manga-click="$emit('manga-click', $event)"
-      @add-manga-click="$emit('add-manga-click', $event)"
-    />
-    <Sidebar 
-      :is-open="isSidebarOpen" 
-      @close="closeSidebar"
-      @add-manga-click="$emit('add-manga-click', $event)"
-    />
-    
-    <main class="pt-16 md:ml-60">
-      <router-view></router-view>
-    </main>
-  </div>
+    <div class="min-h-screen bg-gray-50 flex">
+        <Header
+            @menu-click="toggleSidebar"
+            @manga-click="$emit('manga-click', $event)"
+            @add-manga-click="$emit('add-manga-click', $event)" />
+        <Sidebar :is-open="isSidebarOpen" @close="closeSidebar" @add-manga-click="$emit('add-manga-click', $event)" />
+
+        <main class="flex-1 pt-16 md:ml-60">
+            <RouterView></RouterView>
+        </main>
+    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import Header from './Header.vue';
-import Sidebar from './Sidebar.vue';
+    import { ref } from 'vue';
+    import Header from './Header.vue';
+    import Sidebar from './Sidebar.vue';
 
-const isSidebarOpen = ref(false);
+    const isSidebarOpen = ref(false);
 
-const toggleSidebar = () => {
-  isSidebarOpen.value = !isSidebarOpen.value;
-};
+    const toggleSidebar = () => {
+        isSidebarOpen.value = !isSidebarOpen.value;
+    };
 
-const closeSidebar = () => {
-  isSidebarOpen.value = false;
-};
+    const closeSidebar = () => {
+        isSidebarOpen.value = false;
+    };
 
-defineEmits(['manga-click', 'add-manga-click']);
-</script> 
\ No newline at end of file
+    defineEmits(['manga-click', 'add-manga-click']);
+</script>
diff --git a/assets/vue/app/shared/components/layout/Sidebar.vue b/assets/vue/app/shared/components/layout/Sidebar.vue
index b6496ce..3e06c94 100644
--- a/assets/vue/app/shared/components/layout/Sidebar.vue
+++ b/assets/vue/app/shared/components/layout/Sidebar.vue
@@ -1,155 +1,131 @@
 <template>
-  <aside 
-    :class="[
-      'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
-      isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
-    ]"
-  >
-    <nav class="h-full overflow-y-auto py-4">
-      <div v-for="(item, index) in menuItems" :key="index" class="mb-2">
-        <!-- Menu item with submenu -->
-        <template v-if="item.id">
-          <button
-            @click="toggleMenu(item.id)"
-            class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
-          >
-            <div class="flex items-center">
-              <component :is="item.icon" class="w-5 h-5 mr-3" />
-              <span>{{ item.text }}</span>
-            </div>
-            <component 
-              :is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon" 
-              class="w-4 h-4"
-            />
-          </button>
-          
-          <div v-show="expandedMenus[item.id]">
-            <template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
-              <router-link
-                v-if="subItem.to"
-                :to="subItem.to"
-                class="block px-4 py-2 pl-12 hover:bg-gray-100"
-              >
-                {{ subItem.text }}
-              </router-link>
-              <button
-                v-else
-                @click="subItem.onClick"
-                class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
-              >
-                {{ subItem.text }}
-              </button>
-            </template>
-          </div>
-        </template>
-
-        <!-- Simple menu item -->
-        <router-link
-          v-else
-          :to="item.to"
-          class="block px-4 py-2 hover:bg-gray-100"
-        >
-          <div class="flex items-center justify-between">
-            <div class="flex items-center">
-              <component :is="item.icon" class="w-5 h-5 mr-3" />
-              <span>{{ item.text }}</span>
-            </div>
-            <span
-              v-if="item.badge"
-              class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
-            >
-              {{ item.badge }}
-            </span>
-          </div>
-        </router-link>
-      </div>
-    </nav>
-  </aside>
+    <aside
+        :class="[
+            'fixed top-16 left-0 w-60 bg-gray-600 text-white transform transition-transform duration-300 ease-in-out z-40 h-full',
+            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+        ]"
+        role="navigation"
+        aria-label="Menu principal">
+        <nav class="h-full overflow-y-auto">
+            <ul class="h-full flex flex-col">
+                <li v-for="(item, index) in menuItems" :key="index" class="mb-2">
+                    <template v-if="item.id">
+                        <MenuGroup
+                            :id="item.id"
+                            :icon="item.icon"
+                            :text="item.text"
+                            :sub-items="item.subItems"
+                            :is-active="isActive(item)"
+                            :to="item.to" />
+                    </template>
+                    <MenuItem
+                        v-else
+                        :icon="item.icon"
+                        :text="item.text"
+                        :to="item.to"
+                        :is-active="isActiveRoute(item.to)"
+                        :badge="item.badge" />
+                </li>
+            </ul>
+        </nav>
+    </aside>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { 
-  BookOpenIcon,
-  PlusIcon, 
-  ArrowDownTrayIcon, 
-  GlobeAltIcon, 
-  ArrowsRightLeftIcon,
-  CalendarIcon,
-  ClockIcon,
-  Cog6ToothIcon,
-  ComputerDesktopIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from '@heroicons/vue/24/outline';
+    import { useRoute } from 'vue-router';
+    import {
+        BookOpenIcon,
+        PlusIcon,
+        ArrowDownTrayIcon,
+        GlobeAltIcon,
+        ArrowsRightLeftIcon,
+        CalendarIcon,
+        ClockIcon,
+        Cog6ToothIcon,
+        ComputerDesktopIcon
+    } from '@heroicons/vue/24/outline';
+    import MenuItem from './sidebar/MenuItem.vue';
+    import MenuGroup from './sidebar/MenuGroup.vue';
 
-const props = defineProps({
-  isOpen: {
-    type: Boolean,
-    required: true
-  }
-});
+    const route = useRoute();
+    const props = defineProps({
+        isOpen: {
+            type: Boolean,
+            required: true
+        }
+    });
 
-const emit = defineEmits(['close', 'add-manga-click']);
+    const isActiveRoute = path => {
+        return route.path === path;
+    };
 
-const expandedMenus = ref({
-  mangas: true,
-  settings: false,
-  system: false
-});
+    const isActive = item => {
+        if (!item.to) {
+            return item.subItems?.some(subItem => route.path === subItem.to) || false;
+        }
 
-const toggleMenu = (menuId) => {
-  expandedMenus.value[menuId] = !expandedMenus.value[menuId];
-};
+        if (item.to === '/') {
+            return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
+        }
 
-const menuItems = [
-  {
-    icon: BookOpenIcon,
-    text: 'Mangas',
-    id: 'mangas',
-    subItems: [
-      { icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
-      { icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
-      { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
-    ]
-  },
-  {
-    icon: ArrowsRightLeftIcon,
-    text: 'Convertir CBR en CBZ',
-    to: '/convert'
-  },
-  {
-    icon: CalendarIcon,
-    text: 'Calendrier',
-    to: '/calendar'
-  },
-  {
-    icon: ClockIcon,
-    text: 'Activité',
-    to: '/activity',
-    badge: '3'
-  },
-  {
-    icon: Cog6ToothIcon,
-    text: 'Paramètres',
-    id: 'settings',
-    subItems: [
-      { text: 'Général', to: '/settings/general' },
-      { text: 'Dossiers', to: '/settings/folders' },
-      { text: 'Scrappers', to: '/settings/scrappers' },
-      { text: 'UI', to: '/settings/ui' }
-    ]
-  },
-  {
-    icon: ComputerDesktopIcon,
-    text: 'Système',
-    id: 'system',
-    subItems: [
-      { text: 'Status', to: '/system/status' },
-      { text: 'Backup', to: '/system/backup' },
-      { text: 'Logs', to: '/system/logs' },
-      { text: 'Updates', to: '/system/updates' }
-    ]
-  },
-];
-</script> 
\ No newline at end of file
+        return route.path.startsWith(item.to);
+    };
+
+    const menuItems = [
+        {
+            icon: BookOpenIcon,
+            text: 'Mangas',
+            to: '/',
+            id: 'mangas',
+            subItems: [
+                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
+                {
+                    icon: ArrowDownTrayIcon,
+                    text: 'Import bibliothèque',
+                    to: '/import'
+                },
+                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
+            ]
+        },
+        {
+            icon: ArrowsRightLeftIcon,
+            text: 'Convertir CBR en CBZ',
+            to: '/convert'
+        },
+        {
+            icon: CalendarIcon,
+            text: 'Calendrier',
+            to: '/calendar'
+        },
+        {
+            icon: ClockIcon,
+            text: 'Activité',
+            to: '/activity',
+            badge: '3'
+        },
+        {
+            icon: Cog6ToothIcon,
+            text: 'Paramètres',
+            to: '/settings',
+            id: 'settings',
+            subItems: [
+                { icon: null, text: 'Général', to: '/settings/general' },
+                { icon: null, text: 'Dossiers', to: '/settings/folders' },
+                { icon: null, text: 'Scrappers', to: '/settings/scrappers' },
+                { icon: null, text: 'UI', to: '/settings/ui' }
+            ]
+        },
+        {
+            icon: ComputerDesktopIcon,
+            text: 'Système',
+            to: '/system',
+            id: 'system',
+            subItems: [
+                { icon: null, text: 'Status', to: '/system/status' },
+                { icon: null, text: 'Backup', to: '/system/backup' },
+                { icon: null, text: 'Logs', to: '/system/logs' },
+                { icon: null, text: 'Updates', to: '/system/updates' }
+            ]
+        }
+    ];
+</script>
diff --git a/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue b/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
new file mode 100644
index 0000000..9364fd8
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
@@ -0,0 +1,97 @@
+<template>
+    <div
+        class="border-l-4"
+        :class="{
+            'border-green-600': isActive,
+            'hover:bg-gray-700 border-transparent': !isActive
+        }">
+        <div class="flex w-full" @click="toggleExpanded">
+            <RouterLink
+                :to="to"
+                class="flex-grow px-4 py-2 flex items-center"
+                :class="{
+                    'text-green-600 bg-gray-800': isActive
+                }">
+                <div class="flex items-center flex-grow">
+                    <component :is="icon" class="w-5 h-5 mr-3" />
+                    <span>{{ text }}</span>
+                </div>
+                <component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
+            </RouterLink>
+        </div>
+
+        <ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
+            <SubMenuItem
+                v-for="(subItem, index) in subItems"
+                :key="index"
+                :text="subItem.text"
+                :to="subItem.to"
+                @click="subItem.onClick" />
+        </ul>
+    </div>
+</template>
+
+<script setup>
+    import { ref, watch } from 'vue';
+    import { useRoute } from 'vue-router';
+    import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
+    import SubMenuItem from './SubMenuItem.vue';
+    import { useMenuStore } from '../../../stores/menuStore';
+
+    const props = defineProps({
+        id: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: Function,
+            required: true
+        },
+        text: {
+            type: String,
+            required: true
+        },
+        to: {
+            type: String,
+            required: true
+        },
+        subItems: {
+            type: Array,
+            default: () => []
+        },
+        isActive: {
+            type: Boolean,
+            required: true
+        }
+    });
+
+    const menuStore = useMenuStore();
+    const expanded = ref(false);
+    const route = useRoute();
+
+    const isRouteMatching = path => {
+        return props.subItems.some(item => path.startsWith(item.to)) || path === props.to;
+    };
+
+    watch(
+        [() => route.path, () => menuStore.activeMenuId],
+        ([newPath, newMenuId]) => {
+            if (isRouteMatching(newPath)) {
+                expanded.value = true;
+                menuStore.setActiveMenu(props.id);
+            } else if (newMenuId !== props.id) {
+                expanded.value = false;
+            }
+        },
+        { immediate: true }
+    );
+
+    const toggleExpanded = () => {
+        if (expanded.value) {
+            menuStore.setActiveMenu(null);
+        } else {
+            menuStore.setActiveMenu(props.id);
+        }
+        expanded.value = !expanded.value;
+    };
+</script>
diff --git a/assets/vue/app/shared/components/layout/sidebar/MenuItem.vue b/assets/vue/app/shared/components/layout/sidebar/MenuItem.vue
new file mode 100644
index 0000000..343db8e
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/sidebar/MenuItem.vue
@@ -0,0 +1,47 @@
+<template>
+    <RouterLink :to="to" class="block px-4 py-2 hover:bg-gray-700 border-l-4 border-transparent" role="menuitem">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <component :is="icon" class="w-5 h-5 mr-3" aria-hidden="true" />
+                <span>{{ text }}</span>
+            </div>
+            <span
+                v-if="badge"
+                class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"
+                aria-label="Nouveaux éléments: {{ badge }}">
+                {{ badge }}
+            </span>
+        </div>
+    </RouterLink>
+</template>
+
+<script setup>
+    defineProps({
+        icon: {
+            type: Function,
+            required: true
+        },
+        text: {
+            type: String,
+            required: true
+        },
+        to: {
+            type: String,
+            required: true
+        },
+        isActive: {
+            type: Boolean,
+            required: true
+        },
+        badge: {
+            type: String,
+            default: null
+        }
+    });
+</script>
+
+<style lang="postcss" scoped>
+    .router-link-active {
+        @apply text-green-600 bg-gray-800 border-green-600;
+    }
+</style>
diff --git a/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue b/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue
new file mode 100644
index 0000000..41fc550
--- /dev/null
+++ b/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue
@@ -0,0 +1,31 @@
+<template>
+    <li>
+        <RouterLink v-if="to" :to="to" class="block hover:text-green-600" role="menuitem">
+            {{ text }}
+        </RouterLink>
+        <button v-else @click="$emit('click')" class="w-full text-left hover:text-green-600" role="menuitem">
+            {{ text }}
+        </button>
+    </li>
+</template>
+
+<script setup>
+    defineProps({
+        text: {
+            type: String,
+            required: true
+        },
+        to: {
+            type: String,
+            default: null
+        }
+    });
+
+    defineEmits(['click']);
+</script>
+
+<style lang="postcss" scoped>
+    .router-link-exact-active {
+        @apply text-green-600;
+    }
+</style>
diff --git a/assets/vue/app/shared/stores/menuStore.js b/assets/vue/app/shared/stores/menuStore.js
new file mode 100644
index 0000000..896cd10
--- /dev/null
+++ b/assets/vue/app/shared/stores/menuStore.js
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useMenuStore = defineStore('menu', {
+    state: () => ({
+        activeMenuId: null
+    }),
+    actions: {
+        setActiveMenu(menuId) {
+            this.activeMenuId = menuId;
+        }
+    }
+});
diff --git a/tests/Domain/Manga/Application/QueryHandler/GetMangaBySlugHandlerTest.php b/tests/Domain/Manga/Application/QueryHandler/GetMangaBySlugHandlerTest.php
index fb1fcbc..eb98ebd 100644
--- a/tests/Domain/Manga/Application/QueryHandler/GetMangaBySlugHandlerTest.php
+++ b/tests/Domain/Manga/Application/QueryHandler/GetMangaBySlugHandlerTest.php
@@ -27,17 +27,17 @@ class GetMangaBySlugHandlerTest extends TestCase
     {
         // Arrange
         $manga = new Manga(
-            new MangaId('1'),
-            new MangaTitle('One Piece'),
-            new MangaSlug('one-piece'),
-            'Description',
-            'Eiichiro Oda',
-            1997,
-            ['Action', 'Adventure'],
-            'ongoing',
-            null,
-            'https://example.com/image.jpg',
-            4.5
+            id: new MangaId('1'),
+            title: new MangaTitle('One Piece'),
+            slug: new MangaSlug('one-piece'),
+            description: 'Description',
+            author: 'Eiichiro Oda',
+            publicationYear: 1997,
+            genres: ['Action', 'Adventure'],
+            status: 'ongoing',
+            externalId: null,
+            imageUrl: 'https://example.com/image.jpg',
+            rating: 4.5
         );
         $this->repository->save($manga);
 
@@ -71,4 +71,4 @@ class GetMangaBySlugHandlerTest extends TestCase
     {
         $this->repository->clear();
     }
-} 
\ No newline at end of file
+}