diff --git a/client/src/components/sidebar/SidebarMenuList.vue b/client/src/components/sidebar/SidebarMenuList.vue
new file mode 100644
index 00000000000..5941816ff42
--- /dev/null
+++ b/client/src/components/sidebar/SidebarMenuList.vue
@@ -0,0 +1,120 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <ion-list class="list-sidebar favorites">
+    <ion-header
+      lines="none"
+      class="list-sidebar-header title-h5"
+      :class="isContentVisible ? 'open' : 'close'"
+      @click="toggleContent"
+    >
+      <div class="list-sidebar-header-title">
+        <ion-icon
+          class="list-sidebar-header-title__icon"
+          :icon="icon"
+        />
+        <ion-text class="list-sidebar-header-title__text">
+          {{ $msTranslate(title) }}
+        </ion-text>
+      </div>
+      <ion-icon
+        class="list-sidebar-toggle-icon"
+        :icon="isContentVisible ? remove : add"
+      />
+    </ion-header>
+    <div
+      v-if="isContentVisible"
+      class="list-sidebar-content"
+    >
+      <slot />
+    </div>
+  </ion-list>
+</template>
+
+<script setup lang="ts">
+import { IonList, IonHeader, IonIcon, IonText } from '@ionic/vue';
+import { Translatable } from 'megashark-lib';
+import { ref } from 'vue';
+import { add, remove } from 'ionicons/icons';
+
+const isContentVisible = ref(true);
+
+defineProps<{
+  title: Translatable;
+  icon: string;
+}>();
+
+function toggleContent(): void {
+  isContentVisible.value = !isContentVisible.value;
+}
+</script>
+
+<style scoped lang="scss">
+.list-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: var(--parsec-radius-8);
+
+  &.list-file {
+    margin: 1rem 0;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: border 0.2s ease-in-out;
+    opacity: 0.8;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.open {
+      margin-bottom: 0.5rem;
+    }
+
+    &-title {
+      color: var(--parsec-color-light-secondary-inversed-contrast);
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        font-size: 1rem;
+        margin-right: 0.5rem;
+      }
+
+      &__text {
+        margin-right: 0.5rem;
+        line-height: auto;
+        user-select: none;
+      }
+    }
+
+    &:active {
+      .list-sidebar-toggle-icon {
+        scale: 0.85;
+      }
+    }
+  }
+
+  &-toggle-icon {
+    user-select: none;
+    padding: 0.125rem;
+    font-size: 1.25rem;
+    border-radius: var(--parsec-radius-6);
+    color: var(--parsec-color-light-secondary-inversed-contrast);
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarRecentFileItem.vue b/client/src/components/sidebar/SidebarRecentFileItem.vue
index f1d562e662e..8d091c9da26 100644
--- a/client/src/components/sidebar/SidebarRecentFileItem.vue
+++ b/client/src/components/sidebar/SidebarRecentFileItem.vue
@@ -5,15 +5,17 @@
     lines="none"
     button
     @click="$emit('fileClicked', file)"
-    class="sidebar-item menu-default"
+    class="sidebar-item button-medium ion-no-padding"
     ref="itemRef"
   >
-    <ion-text class="sidebar-item-file-label">{{ file.name }}</ion-text>
-    <div
-      class="file-option"
-      @click.stop="$emit('removeClicked', file)"
-    >
-      <ion-icon :icon="close" />
+    <div class="sidebar-item-file">
+      <ion-text class="sidebar-item-file__label">{{ file.name }}</ion-text>
+      <div
+        class="sidebar-item-file__option"
+        @click.stop="$emit('removeClicked', file)"
+      >
+        <ion-icon :icon="close" />
+      </div>
     </div>
   </ion-item>
 </template>
@@ -37,45 +39,50 @@ defineEmits<{
 .sidebar-item {
   --background: none;
   border-radius: var(--parsec-radius-8);
-  border: solid 1px var(--parsec-color-light-primary-800);
-  --padding-start: 1rem;
-  --padding-end: 1rem;
-  --padding-top: 0.5rem;
+  --min-height: 0;
+  --padding-start: 0.75rem;
+  --padding-end: 0.75rem;
   --padding-bottom: 0.5rem;
+  --padding-top: 0.5rem;
+
+  &:active,
+  &.item-selected {
+    --background: var(--parsec-color-light-primary-30-opacity15);
+  }
 
-  .file-option {
-    color: var(--parsec-color-light-secondary-grey);
-    font-size: 1.2rem;
-    opacity: 1;
+  .sidebar-item-file {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
 
-    &:hover {
-      color: var(--parsec-color-light-primary-30);
+    &__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: var(--parsec-color-light-secondary-premiere);
+      width: 100%;
     }
-  }
 
-  &:hover {
-    border: solid 1px var(--parsec-color-light-primary-30-opacity15);
-    cursor: pointer;
+    &__option {
+      color: var(--parsec-color-light-secondary-light);
+      display: none;
+      margin-left: auto;
+      font-size: 1rem;
 
-    .file-option {
-      opacity: 1;
+      &:hover {
+        color: var(--parsec-color-light-primary-30);
+      }
     }
   }
 
-  &:active,
-  &.item-selected {
-    --background: var(--parsec-color-light-primary-30-opacity15);
-  }
+  &:hover {
+    outline: solid 1px var(--parsec-color-light-primary-30-opacity15);
+    cursor: pointer;
 
-  &-file-label {
-    position: relative;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: var(--parsec-color-light-primary-100);
-    width: 100%;
+    .sidebar-item-file__option {
+      display: flex;
+    }
   }
 }
 </style>
diff --git a/client/src/components/sidebar/SidebarWorkspaceItem.vue b/client/src/components/sidebar/SidebarWorkspaceItem.vue
index 3eb6746e655..b5651b8c871 100644
--- a/client/src/components/sidebar/SidebarWorkspaceItem.vue
+++ b/client/src/components/sidebar/SidebarWorkspaceItem.vue
@@ -6,21 +6,23 @@
     button
     @click="$emit('workspaceClicked', workspace.handle)"
     :class="currentRouteIsWorkspaceRoute(workspace.handle) ? 'item-selected' : 'item-not-selected'"
-    class="sidebar-item menu-default"
+    class="sidebar-item button-medium ion-no-padding"
     ref="itemRef"
   >
-    <ion-label class="sidebar-item-workspace-label">{{ workspace.currentName }}</ion-label>
-    <div
-      class="workspace-option"
-      @click.stop="$emit('contextMenuRequested', $event)"
-    >
-      <ion-icon :icon="ellipsisHorizontal" />
+    <div class="sidebar-item-workspace">
+      <ion-text class="sidebar-item-workspace__label">{{ workspace.currentName }}</ion-text>
+      <div
+        class="sidebar-item-workspace__option"
+        @click.stop="$emit('contextMenuRequested', $event)"
+      >
+        <ion-icon :icon="ellipsisHorizontal" />
+      </div>
     </div>
   </ion-item>
 </template>
 
 <script setup lang="ts">
-import { IonItem, IonLabel, IonIcon } from '@ionic/vue';
+import { IonItem, IonText, IonIcon } from '@ionic/vue';
 import { WorkspaceInfo, WorkspaceHandle } from '@/parsec';
 import { ellipsisHorizontal } from 'ionicons/icons';
 import { currentRouteIsWorkspaceRoute } from '@/router';
@@ -53,51 +55,50 @@ onBeforeUnmount(async () => {
 .sidebar-item {
   --background: none;
   border-radius: var(--parsec-radius-8);
-  border: solid 1px var(--parsec-color-light-primary-800);
   --min-height: 0;
+  --padding-start: 0.75rem;
+  --padding-end: 0.75rem;
+  --padding-bottom: 0.5rem;
+  --padding-top: 0.5rem;
 
-  .workspace-option {
-    color: var(--parsec-color-light-secondary-grey);
-    text-align: right;
-    position: absolute;
+  &:active,
+  &.item-selected {
+    --background: var(--parsec-color-light-primary-30-opacity15);
+  }
+
+  .sidebar-item-workspace {
     display: flex;
     align-items: center;
-    top: 0;
-    right: 1rem;
-    font-size: 1.2rem;
-    padding-top: 0.5rem;
-    opacity: 0;
+    justify-content: space-between;
+    width: 100%;
 
-    &:hover {
-      color: var(--parsec-color-light-primary-30);
+    &__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: var(--parsec-color-light-secondary-premiere);
+      width: 100%;
     }
-  }
 
-  &:hover {
-    border: solid 1px var(--parsec-color-light-primary-30-opacity15);
-    cursor: pointer;
+    &__option {
+      color: var(--parsec-color-light-secondary-light);
+      display: none;
+      margin-left: auto;
+      font-size: 1rem;
 
-    .workspace-option {
-      opacity: 1;
+      &:hover {
+        color: var(--parsec-color-light-primary-30);
+      }
     }
   }
 
-  &:active,
-  &.item-selected {
-    --background: var(--parsec-color-light-primary-30-opacity15);
-  }
-
-  & > ion-label {
-    --color: var(--parsec-color-light-primary-100);
-  }
+  &:hover {
+    outline: solid 1px var(--parsec-color-light-primary-30-opacity15);
+    cursor: pointer;
 
-  &-workspace-label {
-    position: relative;
-    margin-right: 1.1rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    --color: var(--parsec-color-light-primary-100);
+    .sidebar-item-workspace__option {
+      display: flex;
+    }
   }
 }
 </style>
diff --git a/client/src/components/sidebar/index.ts b/client/src/components/sidebar/index.ts
index bb2d2e859f4..d8227eddda7 100644
--- a/client/src/components/sidebar/index.ts
+++ b/client/src/components/sidebar/index.ts
@@ -1,6 +1,7 @@
 // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
 
+import SidebarMenuList from '@/components/sidebar/SidebarMenuList.vue';
 import SidebarRecentFileItem from '@/components/sidebar/SidebarRecentFileItem.vue';
 import SidebarWorkspaceItem from '@/components/sidebar/SidebarWorkspaceItem.vue';
 
-export { SidebarRecentFileItem, SidebarWorkspaceItem };
+export { SidebarMenuList, SidebarRecentFileItem, SidebarWorkspaceItem };
diff --git a/client/src/views/client-area/ClientAreaSidebar.vue b/client/src/views/client-area/ClientAreaSidebar.vue
index 041ecdff4fc..4472ce2c0ad 100644
--- a/client/src/views/client-area/ClientAreaSidebar.vue
+++ b/client/src/views/client-area/ClientAreaSidebar.vue
@@ -123,7 +123,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.Statistics }"
           @click="goToPageClicked(ClientAreaPages.Statistics)"
         >
@@ -138,7 +138,7 @@
         <ion-item
           button
           lines="none"
-          class="sidebar-item menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.Invoices }"
           @click="goToPageClicked(ClientAreaPages.Invoices)"
         >
@@ -153,7 +153,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.PaymentMethods }"
           @click="goToPageClicked(ClientAreaPages.PaymentMethods)"
         >
@@ -168,7 +168,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.BillingDetails }"
           @click="goToPageClicked(ClientAreaPages.BillingDetails)"
         >
@@ -188,7 +188,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.Contracts }"
           @click="goToPageClicked(ClientAreaPages.Contracts)"
         >
@@ -203,7 +203,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.CustomOrderStatistics }"
           @click="goToPageClicked(ClientAreaPages.CustomOrderStatistics)"
         >
@@ -218,7 +218,7 @@
         <ion-item
           button
           lines="none"
-          class="menu-default menu-client-list-item"
+          class="button-medium menu-client-list-item"
           :class="{ 'current-page menu-active': currentPage === ClientAreaPages.CustomOrderBillingDetails }"
           @click="goToPageClicked(ClientAreaPages.CustomOrderBillingDetails)"
         >
diff --git a/client/src/views/sidebar-menu/SidebarMenuPage.vue b/client/src/views/sidebar-menu/SidebarMenuPage.vue
index 64b6292e5f2..2a67683e7b3 100644
--- a/client/src/views/sidebar-menu/SidebarMenuPage.vue
+++ b/client/src/views/sidebar-menu/SidebarMenuPage.vue
@@ -157,24 +157,11 @@
           >
             <!-- list of favorite workspaces -->
             <!-- show only favorites -->
-            <ion-list
-              class="list-sidebar favorites"
+            <sidebar-menu-list
               v-if="favoritesWorkspaces.length > 0"
+              :title="'SideMenu.favorites'"
+              :icon="star"
             >
-              <ion-header
-                lines="none"
-                class="list-sidebar-header menu-default"
-              >
-                <div class="list-sidebar-header-favorites">
-                  <ion-icon
-                    class="list-sidebar-header-favorites__icon"
-                    :icon="star"
-                  />
-                  <ion-text class="list-sidebar-header-favorites__text">
-                    {{ $msTranslate('SideMenu.favorites') }}
-                  </ion-text>
-                </div>
-              </ion-header>
               <sidebar-workspace-item
                 v-for="workspace in favoritesWorkspaces"
                 :key="workspace.id"
@@ -184,31 +171,13 @@
                   openWorkspaceContextMenu($event, workspace, favorites, eventDistributor, informationManager, storageManager, true)
                 "
               />
-            </ion-list>
+            </sidebar-menu-list>
 
             <!-- list of workspaces -->
-            <ion-list class="list-sidebar workspaces">
-              <ion-header
-                lines="none"
-                class="list-sidebar-header menu-default"
-              >
-                <div class="list-sidebar-header-title">
-                  <ion-icon
-                    class="list-sidebar-header-title__icon"
-                    :icon="business"
-                  />
-                  <ion-text class="list-sidebar-header-title__text">
-                    {{ $msTranslate('SideMenu.workspaces') }}
-                  </ion-text>
-                </div>
-                <ion-icon
-                  class="list-sidebar-header__button"
-                  id="new-workspace"
-                  :icon="add"
-                  v-show="userInfo && userInfo.currentProfile !== UserProfile.Outsider"
-                  @click="createWorkspace"
-                />
-              </ion-header>
+            <sidebar-menu-list
+              :title="'SideMenu.workspaces'"
+              :icon="business"
+            >
               <ion-text
                 class="body list-sidebar__no-workspace"
                 v-if="workspaces.length === 0"
@@ -224,7 +193,7 @@
                   openWorkspaceContextMenu($event, workspace, favorites, eventDistributor, informationManager, storageManager, true)
                 "
               />
-            </ion-list>
+            </sidebar-menu-list>
           </div>
 
           <div
@@ -234,25 +203,11 @@
 
           <!-- last opened files -->
           <div class="file-workspaces">
-            <ion-list
-              class="list-sidebar list-file"
+            <sidebar-menu-list
+              :title="'SideMenu.recentDocuments'"
+              :icon="documentIcon"
               v-if="recentFileManager.getFiles().length > 0"
             >
-              <ion-header
-                lines="none"
-                class="list-sidebar-header menu-default"
-              >
-                <div class="list-sidebar-header-title">
-                  <ion-icon
-                    class="list-sidebar-header-title__icon"
-                    :icon="documentIcon"
-                  />
-                  <ion-text class="llist-sidebar-header-title__text">
-                    {{ $msTranslate('SideMenu.recentDocuments') }}
-                  </ion-text>
-                </div>
-              </ion-header>
-
               <sidebar-recent-file-item
                 v-for="file in recentFileManager.getFiles()"
                 :file="file"
@@ -260,7 +215,7 @@
                 @file-clicked="openRecentFile"
                 @remove-clicked="removeRecentFile"
               />
-            </ion-list>
+            </sidebar-menu-list>
           </div>
 
           <!-- manage organization -->
@@ -339,8 +294,7 @@
 </template>
 
 <script setup lang="ts">
-import { workspaceNameValidator } from '@/common/validators';
-import { ChevronExpand, MsImage, getTextFromUser, LogoIconGradient, I18n, MsModalResult } from 'megashark-lib';
+import { ChevronExpand, MsImage, LogoIconGradient, I18n, MsModalResult } from 'megashark-lib';
 import OrganizationSwitchPopover from '@/components/organizations/OrganizationSwitchPopover.vue';
 import { WORKSPACES_PAGE_DATA_KEY, WorkspaceDefaultData, WorkspacesPageSavedData, openWorkspaceContextMenu } from '@/components/workspaces';
 import {
@@ -371,7 +325,7 @@ import { InformationManager, InformationManagerKey } from '@/services/informatio
 import useSidebarMenu from '@/services/sidebarMenu';
 import { StorageManager, StorageManagerKey } from '@/services/storageManager';
 import { formatExpirationTime, isTrialOrganizationDevice, getDurationBeforeExpiration } from '@/common/organization';
-import { SidebarWorkspaceItem, SidebarRecentFileItem } from '@/components/sidebar';
+import { SidebarWorkspaceItem, SidebarRecentFileItem, SidebarMenuList } from '@/components/sidebar';
 import {
   GestureDetail,
   IonAvatar,
@@ -395,7 +349,6 @@ import {
   popoverController,
 } from '@ionic/vue';
 import {
-  add,
   home,
   business,
   chevronBack,
@@ -440,21 +393,6 @@ async function goToWorkspace(workspaceHandle: WorkspaceHandle): Promise<void> {
   await menuController.close();
 }
 
-async function createWorkspace(): Promise<void> {
-  const workspaceName = await getTextFromUser({
-    title: 'WorkspacesPage.CreateWorkspaceModal.pageTitle',
-    trim: true,
-    validator: workspaceNameValidator,
-    inputLabel: 'WorkspacesPage.CreateWorkspaceModal.label',
-    placeholder: 'WorkspacesPage.CreateWorkspaceModal.placeholder',
-    okButtonText: 'WorkspacesPage.CreateWorkspaceModal.create',
-  });
-
-  if (workspaceName) {
-    await navigateTo(Routes.Workspaces, { query: { workspaceName: workspaceName } });
-  }
-}
-
 async function loadAll(): Promise<void> {
   const infoResult = await parsecGetClientInfo();
 
@@ -665,9 +603,7 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
   .file-workspaces {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
     padding: 0 0.75rem;
-    margin-bottom: 1rem;
   }
 }
 
@@ -678,6 +614,7 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
   flex-direction: column;
   margin: 0;
   border-radius: 0;
+  border-bottom: 1px solid var(--parsec-color-light-primary-30-opacity15);
 
   &-header {
     display: flex;
@@ -747,7 +684,6 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
     gap: 0.75rem;
     padding: 1rem 0 1.5rem;
     margin-inline: 0.75rem;
-    border-bottom: 1px solid var(--parsec-color-light-primary-30-opacity15);
 
     &__item {
       display: flex;
@@ -807,10 +743,6 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
 }
 
 // eslint-disable-next-line vue-scoped-css/no-unused-selector
-.list-md {
-  background: none;
-  padding: 0;
-}
 
 ion-split-pane {
   --side-min-width: var(--parsec-sidebar-menu-min-width);
@@ -822,70 +754,9 @@ ion-menu {
   user-select: none;
 }
 
-.list-sidebar {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 0.5rem;
-
-  &.list-file {
-    margin: 1rem 0;
-  }
-
-  &-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    transition: border 0.2s ease-in-out;
-    position: relative;
-    overflow: visible;
-
-    &-title,
-    &-favorites {
-      color: var(--parsec-color-light-secondary-inversed-contrast);
-      opacity: 0.6;
-      display: flex;
-      align-items: center;
-      padding: 0.125rem 0;
-
-      &__icon {
-        font-size: 1rem;
-        margin-right: 0.5rem;
-      }
-
-      &__text {
-        margin-right: 0.5rem;
-        position: relative;
-      }
-    }
-
-    &__button {
-      user-select: none;
-      padding: 0.25rem;
-      margin-right: 0.25rem;
-      font-size: 1.25rem;
-      border-radius: var(--parsec-radius-6);
-      color: var(--parsec-color-light-primary-100);
-      background: var(--parsec-color-light-primary-30-opacity15);
-      cursor: pointer;
-      scale: 1;
-      transition: scale 0.2s ease-in-out;
-      opacity: 0.6;
-      position: relative;
-      z-index: 4;
-
-      &:hover {
-        opacity: 1;
-        scale: 1.1;
-      }
-    }
-  }
-
-  &__no-workspace {
-    color: var(--parsec-color-light-primary-30);
-    opacity: 0.3;
-  }
+.list-sidebar__no-workspace {
+  color: var(--parsec-color-light-secondary-inversed-contrast);
+  opacity: 0.5;
 }
 
 .list-sidebar-divider {
@@ -894,10 +765,10 @@ ion-menu {
   justify-content: center;
   height: 1px;
   width: 100%;
+  margin-bottom: 1.5rem;
 }
 
 .sidebar-item {
-  --background: none;
   border-radius: var(--parsec-radius-8);
   border: solid 1px var(--parsec-color-light-primary-800);
   --min-height: 0;
@@ -913,10 +784,6 @@ ion-menu {
     margin: 0;
     margin-inline-end: 12px;
   }
-
-  & > ion-label {
-    --color: var(--parsec-color-light-primary-100);
-  }
 }
 
 .freeze-card {