diff --git a/src/Components/Sidebar/index.css b/src/Components/Sidebar/index.css
index 58805c7f8..3dac59aba 100644
--- a/src/Components/Sidebar/index.css
+++ b/src/Components/Sidebar/index.css
@@ -79,6 +79,17 @@ aside .MuiListSubheader-root {
 	transition: padding 200ms ease;
 }
 
+.sidebar-delay-fade {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease;
+}
+
+aside.sidebar-ready .sidebar-delay-fade {
+	opacity: 1;
+	visibility: visible;
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 91068a272..c3de1909d 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -743,6 +743,7 @@ function Sidebar() {
 							</Typography>
 						</Box>
 						<Stack
+							className="sidebar-delay-fade"
 							flexDirection={"row"}
 							marginLeft={"auto"}
 							columnGap={theme.spacing(2)}