diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index 858c04f7..ec0b015f 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -1,3 +1,16 @@
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.logo {
+  max-width: 100%;
+  height: auto;
+  transition: all 0.3s ease;
+}
+
 #sidebar {
 	background-color: $off-white;
 	min-height: 100vh;
@@ -12,7 +25,14 @@
 	width: 70px;
 	padding: 20px 10px;
 }
+/* Logo style when sidebar is collapsed */
+#sidebar.collapsed .logo-container {
+  width: 100%;
+}
 
+#sidebar.collapsed .logo-img {
+  max-width: 40px; /* smaller size for collapsed state */
+}
 #content {
 	transition: all 0.3s;
 	margin-left: 250px;
@@ -26,10 +46,12 @@
 
 .sidebar-header {
 	padding-bottom: 20px;
-	border-bottom: 1px solid #dee2e6;
+	border-bottom: 1px solid $off-black;
 	margin-bottom: 20px;
 	overflow: hidden;
 	white-space: nowrap;
+        display: flex;
+        justify-content: center; /* Center for the logo */
 }
 
 .sidebar-menu {
diff --git a/sync/template/components/sidebar.html b/sync/template/components/sidebar.html
index be4f03b4..11314973 100644
--- a/sync/template/components/sidebar.html
+++ b/sync/template/components/sidebar.html
@@ -1,7 +1,9 @@
 {{define "sidebar"}}
 		<div id="sidebar">
 			<div class="sidebar-header">
-				<img src="/static/img/nidus-logo-256-transparent.png" width="128"/>
+				<div class="logo-container">
+					<img class="logo" src="/static/img/nidus-logo-256-transparent.png"/>
+				</div>
 			</div>
 			
 			<ul class="sidebar-menu">