diff --git a/src/components/ModernNavbar.vue b/src/components/ModernNavbar.vue
index 5a11b1c..92f560c 100644
--- a/src/components/ModernNavbar.vue
+++ b/src/components/ModernNavbar.vue
@@ -193,6 +193,15 @@ const isDarkMode = ref(false)
 function toggleSidebarCollapse() {
   sidebarCollapsed.value = !sidebarCollapsed.value
   localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value))
+  updateBodyClass()
+}
+
+function updateBodyClass() {
+  if (sidebarCollapsed.value) {
+    document.body.classList.add('sidebar-collapsed')
+  } else {
+    document.body.classList.remove('sidebar-collapsed')
+  }
 }
 
 function toggleMobileMenu() {
@@ -227,6 +236,8 @@ const savedState = localStorage.getItem('sidebarCollapsed')
 if (savedState !== null) {
   sidebarCollapsed.value = savedState === 'true'
 }
+// Update body class on mount
+updateBodyClass()
 </script>
 
 <style scoped>
@@ -277,6 +288,11 @@ if (savedState !== null) {
   text-decoration: none;
   flex: 1;
   min-width: 0;
+  overflow: hidden;
+}
+
+.sidebar-nav.collapsed .sidebar-brand {
+  justify-content: center;
 }
 
 .logo-icon {
@@ -325,6 +341,14 @@ if (savedState !== null) {
   justify-content: center;
   transition: all var(--transition-base);
   flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.sidebar-nav.collapsed .collapse-toggle {
+  position: absolute;
+  right: var(--spacing-sm);
+  top: var(--spacing-lg);
 }
 
 .collapse-toggle:hover {