diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html
index bd02f23d2b37..dd1c2fe132dd 100644
--- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html
+++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.html
@@ -73,7 +73,7 @@
         [ngbTooltip]="(isCollapsed ? 'Expand' : 'Collapse') + ' Menu (Ctrl + M)'"
         (click)="toggleCollapseState()"
     >
-        <div [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
+        <div class="double-arrow-icon" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
             <fa-icon class="me-negative fa-xs" [icon]="faChevronRight" />
             <fa-icon class="fa-xs" [icon]="faChevronRight" />
         </div>
diff --git a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss
index ec44cc37ac80..73ef30a5dcda 100644
--- a/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss
+++ b/src/main/webapp/app/exam/participate/exam-navigation-sidebar/exam-navigation-sidebar.component.scss
@@ -107,12 +107,12 @@ $exam-test-run-offset: 38px;
 }
 
 .double-arrow.menu-closed {
-    transform: translate(24px) rotate(0deg);
+    transform: translate(24px);
 }
 
 .double-arrow {
-    transform: translate(187px) rotate(180deg);
-    transition: all ease 0.2s;
+    transform: translate(187px);
+    transition: transform ease 0.3s;
     cursor: pointer;
     width: 30px;
     align-items: center;
@@ -120,6 +120,16 @@ $exam-test-run-offset: 38px;
     display: flex;
 }
 
+.menu-closed .double-arrow-icon {
+    transform: rotate(0deg);
+}
+
+.double-arrow-icon {
+    transform: rotate(180deg);
+
+    transition: transform ease 0.3s 0.3s;
+}
+
 .me-negative {
     margin-right: -5px;
 }
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
index 9979347728ec..90b2559fa81a 100644
--- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
+++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -22,7 +22,7 @@
     }
     @if (isCodeOfConductAccepted && isServiceSetUp && course) {
         <div class="d-flex justify-content-between">
-            <div class="me-3" [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
+            <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
                 <jhi-sidebar
                     (onSelectConversation)="onConversationSelected($event)"
                     (onUpdateSidebar)="prepareSidebarData()"
diff --git a/src/main/webapp/app/overview/course-exams/course-exams.component.html b/src/main/webapp/app/overview/course-exams/course-exams.component.html
index 3eec6bad0eed..27b7f0a60a56 100644
--- a/src/main/webapp/app/overview/course-exams/course-exams.component.html
+++ b/src/main/webapp/app/overview/course-exams/course-exams.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between gap-3">
+<div class="d-flex justify-content-between">
     @if (course) {
         <div id="exam-sidebar-test" [ngClass]="{ 'sidebar-collapsed': isCollapsed }" [hidden]="isExamStarted">
             <jhi-sidebar [itemSelected]="examSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
diff --git a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
index 6be118bf7475..830d3863c55e 100644
--- a/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
+++ b/src/main/webapp/app/overview/course-exercises/course-exercises.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between gap-3 horizontal-scroll">
+<div class="d-flex justify-content-between horizontal-scroll">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
             <jhi-sidebar [itemSelected]="exerciseSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" [showFilter]="true" />
diff --git a/src/main/webapp/app/overview/course-lectures/course-lectures.component.html b/src/main/webapp/app/overview/course-lectures/course-lectures.component.html
index ee245be3e109..29c7787fcc4a 100644
--- a/src/main/webapp/app/overview/course-lectures/course-lectures.component.html
+++ b/src/main/webapp/app/overview/course-lectures/course-lectures.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between gap-3">
+<div class="d-flex justify-content-between">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
             <jhi-sidebar [itemSelected]="lectureSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html
index 3d3a67a9b876..e5641f6db02f 100644
--- a/src/main/webapp/app/overview/course-overview.component.html
+++ b/src/main/webapp/app/overview/course-overview.component.html
@@ -63,7 +63,7 @@
                                         <fa-icon [fixedWidth]="true" [icon]="faEllipsis" class="ms-2 me-3" />
                                         <span
                                             class="more"
-                                            [ngClass]="{ 'auto-collapse': !isNavbarCollapsed, 'sidebar-collapsed': isNavbarCollapsed }"
+                                            [ngClass]="{ 'auto-collapse': !isNavbarCollapsed, 'sidebar-collapsed-course-overview': isNavbarCollapsed }"
                                             [jhiTranslate]="'artemisApp.courseOverview.menu.more'"
                                         ></span>
                                     </div>
@@ -121,7 +121,7 @@
                             [ngbTooltip]="(isNavbarCollapsed ? 'Expand' : 'Collapse') + ' Menu (Ctrl + M)'"
                             (click)="toggleCollapseState()"
                         >
-                            <div [attr.aria-expanded]="!isNavbarCollapsed" aria-controls="collapseBasic">
+                            <div class="double-arrow-icon" [attr.aria-expanded]="!isNavbarCollapsed" aria-controls="collapseBasic">
                                 <fa-icon class="me-negative fa-xs" [icon]="faChevronRight" />
                                 <fa-icon class="fa-xs" [icon]="faChevronRight" />
                             </div>
diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss
index a5376a397fcd..872969c33810 100644
--- a/src/main/webapp/app/overview/course-overview.component.scss
+++ b/src/main/webapp/app/overview/course-overview.component.scss
@@ -3,7 +3,7 @@ $menu-width-open: 220px;
 $breadcrumb-height: 45px; // needed to make the exam fullscreen
 
 // Sidebar Button Transition Variables
-$transition-delay: 0.1s;
+$transition-delay: 0.3s;
 $transition-in-between-delay: 0.2s;
 $transition-chevron-rotate-length: 0.2s;
 $transition-chevron-max-width-length: 0.2s;
@@ -196,12 +196,12 @@ jhi-secured-image {
 }
 
 .double-arrow.menu-closed {
-    transform: translate(16px) rotate(0deg);
+    transform: translate(16px);
 }
 
 .double-arrow {
-    transform: translate(180px) rotate(180deg);
-    transition: all ease 0.3s;
+    transform: translate(180px);
+    transition: transform ease 0.3s;
     cursor: pointer;
     width: 30px;
     align-items: center;
@@ -209,6 +209,16 @@ jhi-secured-image {
     display: flex;
 }
 
+.menu-closed .double-arrow-icon {
+    transform: rotate(0deg);
+}
+
+.double-arrow-icon {
+    transform: rotate(180deg);
+
+    transition: transform ease 0.3s 0.3s;
+}
+
 .me-negative {
     margin-right: -5px;
 }
@@ -290,8 +300,19 @@ jhi-secured-image {
     transition: opacity $transition-color-length $transition-delay + $transition-chevron-rotate-length * 2 ease-in-out;
 }
 
-.btn-sidebar-collapse:hover::after,
+.btn-sidebar-collapse:hover::after {
+    background-color: var(--sidebar-card-selected-bg);
+}
+
 .btn-sidebar-collapse:hover::before {
+    background-color: var(--link-item-bg);
+}
+
+.btn-sidebar-collapse:active::after {
+    background-color: var(--link-item-bg);
+}
+
+.btn-sidebar-collapse:active::before {
     background-color: var(--sidebar-card-selected-bg);
 }
 
diff --git a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html
index c2acc5bebdc0..c6f3864b47b7 100644
--- a/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html
+++ b/src/main/webapp/app/overview/course-tutorial-groups/course-tutorial-groups.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between gap-3">
+<div class="d-flex justify-content-between">
     @if (course) {
         <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
             <jhi-sidebar [itemSelected]="tutorialGroupSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" />
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html
index ea513b48174e..a70e2a9e604f 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar.component.html
+++ b/src/main/webapp/app/shared/sidebar/sidebar.component.html
@@ -1,74 +1,76 @@
-<div class="d-flex sidebar rounded-3 px-3 sidebar-width hide-on_print" [ngClass]="{ 'sidebar-height-dev': !isProduction || isTestServer, collapsed: isCollapsed }">
-    <div class="w-100 bg-module">
-        <div class="sidebar-content" [ngClass]="{ collapsed: isCollapsed }">
-            @if (searchFieldEnabled) {
-                <div class="mt-2 mb-2">
-                    <jhi-search-filter (newSearchEvent)="setSearchValue($event)" class="mb-2" />
-                    @if (showFilter) {
-                        <div class="ms-2 mt-1 text-primary">
-                            <a (click)="openFilterExercisesDialog()">
-                                @if (isFilterActive) {
-                                    <fa-icon [icon]="faFilterCurrentlyApplied" />
-                                } @else {
-                                    <fa-icon [icon]="faFilter" />
-                                }
-                                <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.filter"></span>
-                            </a>
-                        </div>
-                    }
-                </div>
-            }
-            @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) {
-                <div
-                    [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"
-                    [jhiTranslate]="
-                        (sidebarDataBeforeFiltering?.ungroupedData?.length ?? 0) > 0 && sidebarData.ungroupedData?.length === 0
-                            ? 'artemisApp.courseOverview.general.noElementFoundWithAppliedFilter'
-                            : 'artemisApp.courseOverview.general.noDataFound'
-                    "
-                    class="mt-2 text-center scrollable-item-content"
-                ></div>
-            } @else {
-                <div
-                    class="scrollable-item-content my-2"
-                    [ngClass]="{
-                        'content-height-dev': !isProduction || isTestServer,
-                        'search-height-conversations': sidebarData?.sidebarType === 'conversation',
-                        'search-height-normal': sidebarData?.sidebarType !== 'conversation',
-                    }"
-                >
-                    @if (sidebarData?.groupByCategory && sidebarData.groupedData) {
-                        <jhi-sidebar-accordion
-                            [searchValue]="searchValue"
-                            [groupedData]="sidebarData.groupedData"
-                            [sidebarType]="sidebarData.sidebarType"
-                            [storageId]="sidebarData.storageId"
-                            [routeParams]="routeParams"
-                            [courseId]="courseId"
-                            [itemSelected]="itemSelected"
-                            [showAddOptions]="sidebarData.showAccordionAddOption ?? false"
-                            [showLeadingIcon]="sidebarData.showAccordionLeadingIcon ?? false"
-                            [showAddOption]="showAddOption"
-                            [channelTypeIcon]="channelTypeIcon"
-                            [collapseState]="collapseState"
-                            (onUpdateSidebar)="onUpdateSidebar.emit()"
-                            [isFilterActive]="isFilterActive"
-                        />
-                    } @else {
-                        @for (sidebarItem of sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue; track sidebarItem; let last = $last) {
-                            <div [ngClass]="{ 'mb-2': !last }">
-                                <div
-                                    jhiSidebarCard
-                                    [size]="sidebarItem.size"
-                                    [itemSelected]="itemSelected"
-                                    [sidebarType]="sidebarData.sidebarType"
-                                    [sidebarItem]="sidebarItem"
-                                ></div>
+<div class="sidebar-wrap">
+    <div class="d-flex sidebar rounded-3 px-3 sidebar-width hide-on_print" [ngClass]="{ 'sidebar-height-dev': !isProduction || isTestServer, collapsed: isCollapsed }">
+        <div class="w-100 bg-module">
+            <div class="sidebar-content" [ngClass]="{ collapsed: isCollapsed }">
+                @if (searchFieldEnabled) {
+                    <div class="mt-2 mb-2">
+                        <jhi-search-filter (newSearchEvent)="setSearchValue($event)" class="mb-2" />
+                        @if (showFilter) {
+                            <div class="ms-2 mt-1 text-primary">
+                                <a (click)="openFilterExercisesDialog()">
+                                    @if (isFilterActive) {
+                                        <fa-icon [icon]="faFilterCurrentlyApplied" />
+                                    } @else {
+                                        <fa-icon [icon]="faFilter" />
+                                    }
+                                    <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.filter"></span>
+                                </a>
                             </div>
                         }
-                    }
-                </div>
-            }
+                    </div>
+                }
+                @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) {
+                    <div
+                        [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"
+                        [jhiTranslate]="
+                            (sidebarDataBeforeFiltering?.ungroupedData?.length ?? 0) > 0 && sidebarData.ungroupedData?.length === 0
+                                ? 'artemisApp.courseOverview.general.noElementFoundWithAppliedFilter'
+                                : 'artemisApp.courseOverview.general.noDataFound'
+                        "
+                        class="mt-2 text-center scrollable-item-content"
+                    ></div>
+                } @else {
+                    <div
+                        class="scrollable-item-content my-2"
+                        [ngClass]="{
+                            'content-height-dev': !isProduction || isTestServer,
+                            'search-height-conversations': sidebarData?.sidebarType === 'conversation',
+                            'search-height-normal': sidebarData?.sidebarType !== 'conversation',
+                        }"
+                    >
+                        @if (sidebarData?.groupByCategory && sidebarData.groupedData) {
+                            <jhi-sidebar-accordion
+                                [searchValue]="searchValue"
+                                [groupedData]="sidebarData.groupedData"
+                                [sidebarType]="sidebarData.sidebarType"
+                                [storageId]="sidebarData.storageId"
+                                [routeParams]="routeParams"
+                                [courseId]="courseId"
+                                [itemSelected]="itemSelected"
+                                [showAddOptions]="sidebarData.showAccordionAddOption ?? false"
+                                [showLeadingIcon]="sidebarData.showAccordionLeadingIcon ?? false"
+                                [showAddOption]="showAddOption"
+                                [channelTypeIcon]="channelTypeIcon"
+                                [collapseState]="collapseState"
+                                (onUpdateSidebar)="onUpdateSidebar.emit()"
+                                [isFilterActive]="isFilterActive"
+                            />
+                        } @else {
+                            @for (sidebarItem of sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue; track sidebarItem; let last = $last) {
+                                <div [ngClass]="{ 'mb-2': !last }">
+                                    <div
+                                        jhiSidebarCard
+                                        [size]="sidebarItem.size"
+                                        [itemSelected]="itemSelected"
+                                        [sidebarType]="sidebarData.sidebarType"
+                                        [sidebarItem]="sidebarItem"
+                                    ></div>
+                                </div>
+                            }
+                        }
+                    </div>
+                }
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.scss b/src/main/webapp/app/shared/sidebar/sidebar.component.scss
index 7aa6c10477b1..ac8a40b229b1 100644
--- a/src/main/webapp/app/shared/sidebar/sidebar.component.scss
+++ b/src/main/webapp/app/shared/sidebar/sidebar.component.scss
@@ -32,10 +32,6 @@
     background-color: var(--module-bg);
 }
 
-.sidebar-width {
-    width: 275px !important;
-}
-
 @media print {
     .hide-on_print {
         display: none !important;
diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss
index 346b78ccb6b2..cced06761869 100644
--- a/src/main/webapp/content/scss/global.scss
+++ b/src/main/webapp/content/scss/global.scss
@@ -1089,10 +1089,49 @@ body.transparent-background {
     }
 }
 
-.sidebar-collapsed {
+.sidebar-collapsed-course-overview {
     display: none;
 }
 
+$transition-sidebar-content-opacity-length: 0.1s;
+$transition-sidebar-width-length: 0.1s;
+$transition-in-between-delay: 0.05s;
+
+.sidebar-content {
+    opacity: 1;
+
+    transition: opacity $transition-sidebar-content-opacity-length 0s ease-in-out;
+}
+
+.sidebar-collapsed .sidebar-content {
+    opacity: 0;
+
+    transition: opacity $transition-sidebar-content-opacity-length 0s ease-in-out;
+}
+
+.sidebar-wrap {
+    overflow: hidden;
+    max-width: $sidebar-width;
+    margin-right: $spacer;
+
+    transition:
+        max-width $transition-sidebar-width-length 0s ease-in-out,
+        margin-right $transition-sidebar-width-length 0s ease-in-out;
+}
+
+.sidebar-collapsed .sidebar-wrap {
+    max-width: 0;
+    margin-right: 0;
+
+    transition:
+        max-width $transition-sidebar-width-length 0s ease-in-out,
+        margin-right $transition-sidebar-width-length 0s ease-in-out;
+}
+
+.sidebar-width {
+    width: $sidebar-width !important;
+}
+
 .fs-xx-small {
     font-size: 0.625rem;
 }
diff --git a/src/main/webapp/content/scss/themes/_dark-variables.scss b/src/main/webapp/content/scss/themes/_dark-variables.scss
index b972c760771a..40789ff78781 100644
--- a/src/main/webapp/content/scss/themes/_dark-variables.scss
+++ b/src/main/webapp/content/scss/themes/_dark-variables.scss
@@ -129,6 +129,9 @@ $neutral-dark-l-20: lighten($neutral-dark, 20%);
 $footer-bg: $neutral-dark;
 $footer-height-dev: 3rem;
 $footer-height-prod: 2rem;
+
+// Sidebar
+$sidebar-width: 275px;
 $sidebar-footer-height-dev: 134px;
 $sidebar-footer-height-prod: 118px;
 
diff --git a/src/main/webapp/content/scss/themes/_default-variables.scss b/src/main/webapp/content/scss/themes/_default-variables.scss
index 4490f3ad7ac4..92eca3165ea0 100644
--- a/src/main/webapp/content/scss/themes/_default-variables.scss
+++ b/src/main/webapp/content/scss/themes/_default-variables.scss
@@ -51,8 +51,11 @@ $border-color: #dee2e6;
 $footer-bg: $white;
 $footer-height-dev: 3rem;
 $footer-height-prod: 2rem;
+
+// Sidebar
 $sidebar-footer-height-dev: 134px;
 $sidebar-footer-height-prod: 118px;
+$sidebar-width: 275px;
 
 //Module and Navigationbar
 $module-bg: $white;