diff --git a/assets/vue/app/router/index.js b/assets/vue/app/router/index.js
index 06eb1e4..4531c54 100644
--- a/assets/vue/app/router/index.js
+++ b/assets/vue/app/router/index.js
@@ -82,12 +82,6 @@ const routes = [
                 name: 'convert',
                 component: ConversionPage
             },
-            {
-                path: '/calendar',
-                name: 'calendar',
-                component: PlaceholderComponent,
-                props: { title: 'Calendrier' }
-            },
             {
                 path: '/activity',
                 name: 'activity',
diff --git a/assets/vue/app/shared/components/layout/Sidebar.vue b/assets/vue/app/shared/components/layout/Sidebar.vue
index 7cb86f1..16fa2ed 100644
--- a/assets/vue/app/shared/components/layout/Sidebar.vue
+++ b/assets/vue/app/shared/components/layout/Sidebar.vue
@@ -27,7 +27,6 @@
     ArrowDownTrayIcon,
     ArrowsRightLeftIcon,
     BookOpenIcon,
-    CalendarIcon,
     ClockIcon,
     Cog6ToothIcon,
     ComputerDesktopIcon,
@@ -69,12 +68,6 @@ import MenuGroup from './sidebar/MenuGroup.vue';
             to: '/convert',
             id: 'convert'
         },
-        {
-            icon: CalendarIcon,
-            text: 'Calendrier',
-            to: '/calendar',
-            id: 'calendar'
-        },
         {
             icon: ClockIcon,
             text: 'Activité',
diff --git a/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue b/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
index beb0223..3c97486 100644
--- a/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
+++ b/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
@@ -3,24 +3,25 @@
         class="border-l-4"
         :class="{
             'border-green-600': isActive,
-            'hover:bg-gray-700 border-transparent': !isActive
+            'border-transparent': !isActive
         }">
-        <div class="flex w-full" @click="toggleExpanded">
+        <div class="flex w-full">
             <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 class="px-2">{{ text }}</span>
-                </div>
-                <component
-                    v-if="subItems.length > 0"
-                    :is="expanded ? ChevronUpIcon : ChevronDownIcon"
-                    class="w-4 h-4" />
+                :class="isActive
+                    ? 'text-green-600 bg-gray-800'
+                    : 'hover:bg-gray-700 hover:text-white'">
+                <component :is="icon" class="w-5 h-5 mr-3" />
+                <span class="px-2">{{ text }}</span>
             </RouterLink>
+            <button
+                v-if="subItems.length > 0"
+                class="px-3 hover:bg-gray-700"
+                :class="isActive ? 'text-green-600 bg-gray-800' : 'hover:text-white'"
+                @click="toggleExpanded">
+                <component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
+            </button>
         </div>
 
         <ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
@@ -71,14 +72,14 @@
     
     const isActive = computed(() => {
         if (!props.to) {
-            return props.subItems?.some(subItem => route.path === subItem.to) || false;
+            return props.subItems?.some(subItem => route.path.startsWith(subItem.to)) || false;
         }
 
         if (props.to === '/') {
-            return route.path === props.to || props.subItems.map(item => item.to).includes(route.path);
+            return route.path === props.to || props.subItems.some(item => route.path.startsWith(item.to));
         }
 
-        return route.path.startsWith(props.to);
+        return route.path.startsWith(props.to) || props.subItems.some(item => route.path.startsWith(item.to));
     });
 
     const isRouteMatching = path => {
diff --git a/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue b/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue
index 41fc550..9432e1f 100644
--- a/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue
+++ b/assets/vue/app/shared/components/layout/sidebar/SubMenuItem.vue
@@ -1,9 +1,9 @@
 <template>
     <li>
-        <RouterLink v-if="to" :to="to" class="block hover:text-green-600" role="menuitem">
+        <RouterLink v-if="to" :to="to" class="block px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
             {{ text }}
         </RouterLink>
-        <button v-else @click="$emit('click')" class="w-full text-left hover:text-green-600" role="menuitem">
+        <button v-else @click="$emit('click')" class="w-full text-left px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
             {{ text }}
         </button>
     </li>