diff --git a/electron/styles.css b/electron/styles.css
index 22b3f3b..eaf9f20 100644
--- a/electron/styles.css
+++ b/electron/styles.css
@@ -131,6 +131,12 @@ body.dark-mode .primary-sidebar {
 .star-icon {
   font-size: 18px;
   color: #3b82f6;
+  transition: color 0.2s ease;
+}
+
+/* Dark mode star icon */
+body.dark-mode .star-icon {
+  color: #60a5fa;
 }
 
 .brand-text {
@@ -156,6 +162,11 @@ body.dark-mode .primary-sidebar-header .brand-text {
   margin: 0;
 }
 
+/* Dark mode app title */
+body.dark-mode .app-title {
+  color: #f9fafb;
+}
+
 .primary-sidebar:hover .app-title {
   opacity: 1;
 }
@@ -168,6 +179,13 @@ body.dark-mode .primary-sidebar-header .brand-text {
   gap: 8px;
 }
 
+/* Keep version at bottom but reduce excessive empty space in collapsed mode */
+.primary-sidebar:not(:hover) .category-nav {
+  flex-grow: 1;
+  padding: 15px 0 8px 0;
+  min-height: auto;
+}
+
 .category-item {
   display: flex;
   align-items: center;
@@ -180,6 +198,16 @@ body.dark-mode .primary-sidebar-header .brand-text {
   position: relative;
 }
 
+/* Perfect symmetry for collapsed sidebar items */
+.primary-sidebar:not(:hover) .category-item {
+  padding: 12px 12px 12px 12px;
+}
+
+/* Active item maintains perfect symmetry (accounting for 3px left border) */
+.primary-sidebar:not(:hover) .category-item.active {
+  padding: 12px 15px 12px 9px;
+}
+
 .category-item:hover {
   background-color: var(--hover-color);
 }
@@ -225,11 +253,14 @@ body.dark-mode .primary-sidebar-header .brand-text {
   gap: 8px;
 }
 
-/* When sidebar is collapsed, only show version centered */
+/* When sidebar is collapsed, only show version centered with tighter spacing */
 .primary-sidebar:not(:hover) .primary-sidebar-footer {
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
+  padding: 8px 16px 8px 16px;
+  min-height: 32px;
+  margin-top: auto;
 }
 
 /* When sidebar is expanded, show both version and info button */
@@ -436,6 +467,11 @@ body.dark-mode .nav-button.active {
   opacity: 1;
 }
 
+/* Completely hide info button in collapsed mode */
+.primary-sidebar:not(:hover) .info-button {
+  display: none;
+}
+
 /* Dark mode info button */
 body.dark-mode .info-button {
   background: rgba(255, 255, 255, 0.1);
@@ -1364,6 +1400,8 @@ body.dark-mode .save-option-btn small {
 .info-modal-content {
   max-width: 600px;
   max-height: 80vh;
+  padding-top: 50px;
+  padding-right: 50px;
 }
 
 .info-modal-body {
@@ -1422,7 +1460,7 @@ body.dark-mode .info-tab-link.active {
 }
 
 .info-tab-content {
-  padding: 24px;
+  padding: 24px 60px 24px 24px;
   max-height: 400px;
   overflow-y: auto;
   background-color: white;