diff --git a/dashboard/src/components/Sidebar.vue b/dashboard/src/components/Sidebar.vue
index 2514c267a..e9a382932 100644
--- a/dashboard/src/components/Sidebar.vue
+++ b/dashboard/src/components/Sidebar.vue
@@ -15,8 +15,16 @@ function onClose() {
   isOpen.value = false;
 }
 
+const activeGroup = ref('');
+function onToggleGroup(group) {
+  activeGroup.value = activeGroup.value === group ? '' : group;
+}
+
 function onHashChange() {
   active.value = window.location.hash.slice(2);
+
+  if (active.value.indexOf('email') === 0) activeGroup.value = 'email';
+  else activeGroup.value = '';
 }
 
 onMounted(() => {
@@ -45,9 +53,14 @@ onUnmounted(() => {
         <a class="sidebar-item" :class="{ active: active === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
         <a class="sidebar-item" :class="{ active: active === 'branding' }" v-show="profile.isAtLeastAdmin" href="#/branding" @click="onClose()"><i class="fa fa-passport fa-fw"></i> {{ $t('branding.title') }}</a>
         <a class="sidebar-item" :class="{ active: active === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'email' }" v-show="profile.isAtLeastMailManager" href="#/email" @click="onClose()"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'emails-mailboxes' }" v-show="profile.isAtLeastMailManager" href="#/emails-mailboxes" @click="onClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'emails-mailinglists' }" v-show="profile.isAtLeastMailManager" href="#/emails-mailinglists" @click="onClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
+        <div class="sidebar-item actionable" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</div>
+        <Transition name="sidebar-item-group-animation">
+          <div class="sidebar-item-group" v-if="activeGroup === 'email'">
+            <a class="sidebar-item" :class="{ active: active === 'emails-mailboxes' }" href="#/emails-mailboxes" @click="onClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
+            <a class="sidebar-item" :class="{ active: active === 'emails-mailinglists' }" href="#/emails-mailinglists" @click="onClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
+            <a class="sidebar-item" :class="{ active: active === 'email' }" href="#/email" @click="onClose()"><i class="fa fa-cog fa-fw"></i> {{ $t('emails.title') }} {{ $t('settings.title') }}</a>
+          </div>
+        </Transition>
         <a class="sidebar-item" :class="{ active: active === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
         <a class="sidebar-item" :class="{ active: active === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
         <a class="sidebar-item" :class="{ active: active === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
@@ -160,4 +173,24 @@ onUnmounted(() => {
   opacity: 1;
 }
 
+.sidebar-item-group {
+  padding-left: 20px;
+  height: auto;
+  overflow: hidden;
+  /* we need height to auto so we animate max-height. needs to be bigger than we need */
+  max-height: 300px;
+}
+
+.sidebar-item-group-animation-enter-active,
+.sidebar-item-group-animation-leave-active {
+  transition: all 0.2s linear;
+}
+
+.sidebar-item-group-animation-leave-to,
+.sidebar-item-group-animation-enter-from {
+  transform: translateX(-100px);
+  opacity: 0;
+  max-height: 0;
+}
+
 </style>