diff --git a/.playwright-mcp/admin-dashboard-sidebar.png b/.playwright-mcp/admin-dashboard-sidebar.png
new file mode 100644
index 0000000..ba2bb96
Binary files /dev/null and b/.playwright-mcp/admin-dashboard-sidebar.png differ
diff --git a/.playwright-mcp/sidebar-collapsed-state.png b/.playwright-mcp/sidebar-collapsed-state.png
new file mode 100644
index 0000000..eb6c377
Binary files /dev/null and b/.playwright-mcp/sidebar-collapsed-state.png differ
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 2d27d48..2a4960c 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -940,7 +940,7 @@ $screen-xl: 1280px;
   
   // Ensure rail mode uses correct width - increased to fit icons
   &.v-navigation-drawer--rail {
-    width: 80px !important;
+    width: 100px !important;
   }
   
   &__content {
diff --git a/layouts/admin.vue b/layouts/admin.vue
index c2e753f..fe2be64 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="80"
+      rail-width="100"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -278,15 +278,15 @@
       <template v-slot:append>
         <div class="pa-2">
           <v-card class="glass-profile-card overflow-visible">
-            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
               <!-- Avatar Section -->
               <ProfileAvatar
                 :member-id="memberData?.member_id || memberData?.Id"
                 :first-name="memberData?.first_name || user?.firstName"
                 :last-name="memberData?.last_name || user?.lastName"
                 :member-name="memberData?.FullName || user?.name"
-                :size="miniVariant ? 'x-small' : 'small'"
-                :class="miniVariant ? 'mb-2' : 'mr-3'"
+                :size="miniVariant ? '32' : 'small'"
+                :class="miniVariant ? '' : 'mr-3'"
               />
               
               <!-- Info Section (Hidden in mini mode) -->
@@ -297,20 +297,17 @@
               </div>
               
               <!-- Action Buttons -->
-              <div :class="miniVariant ? '' : 'ml-auto'">
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
                 <v-menu location="top" offset-y>
                   <template v-slot:activator="{ props }">
                     <v-btn 
                       v-bind="props"
-                      :icon="miniVariant"
-                      :size="miniVariant ? 'x-small' : 'small'"
-                      :variant="miniVariant ? 'text' : 'tonal'"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="text"
                       class="profile-menu-btn"
                     >
-                      <v-icon :size="miniVariant ? 'small' : 'default'">
-                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
-                      </v-icon>
-                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                      <v-icon>mdi-dots-vertical</v-icon>
                     </v-btn>
                   </template>
                   <v-list density="compact" class="glass-menu" min-width="200">
diff --git a/layouts/board.vue b/layouts/board.vue
index 580e4c3..2e70f92 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="80"
+      rail-width="100"
       class="enhanced-glass-drawer"
     >
       <!-- Enhanced Logo Section -->
@@ -253,15 +253,15 @@
       <template v-slot:append>
         <div class="pa-2">
           <v-card class="glass-profile-card overflow-visible">
-            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
               <!-- Avatar Section -->
               <ProfileAvatar
                 :member-id="memberData?.member_id || memberData?.Id"
                 :first-name="memberData?.first_name || user?.firstName"
                 :last-name="memberData?.last_name || user?.lastName"
                 :member-name="memberData?.FullName || user?.name"
-                :size="miniVariant ? 'x-small' : 'small'"
-                :class="miniVariant ? 'mb-2' : 'mr-3'"
+                :size="miniVariant ? '32' : 'small'"
+                :class="miniVariant ? '' : 'mr-3'"
               />
               
               <!-- Info Section (Hidden in mini mode) -->
@@ -272,20 +272,17 @@
               </div>
               
               <!-- Action Buttons -->
-              <div :class="miniVariant ? '' : 'ml-auto'">
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
                 <v-menu location="top" offset-y>
                   <template v-slot:activator="{ props }">
                     <v-btn 
                       v-bind="props"
-                      :icon="miniVariant"
-                      :size="miniVariant ? 'x-small' : 'small'"
-                      :variant="miniVariant ? 'text' : 'tonal'"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="text"
                       class="profile-menu-btn"
                     >
-                      <v-icon :size="miniVariant ? 'small' : 'default'">
-                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
-                      </v-icon>
-                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                      <v-icon>mdi-dots-vertical</v-icon>
                     </v-btn>
                   </template>
                   <v-list density="compact" class="glass-menu" min-width="200">
diff --git a/layouts/member.vue b/layouts/member.vue
index 76c8cbb..90b7cc2 100644
--- a/layouts/member.vue
+++ b/layouts/member.vue
@@ -6,7 +6,7 @@
       :expand-on-hover="false"
       permanent
       width="280"
-      rail-width="80"
+      rail-width="100"
       class="enhanced-glass-drawer"
     >
       <!-- Logo Section with Enhanced Glass Effect -->
@@ -77,7 +77,7 @@
       <template v-slot:append>
         <div class="pa-2">
           <v-card class="glass-profile-card overflow-visible">
-            <div class="d-flex align-center" :class="miniVariant ? 'flex-column pa-2' : 'pa-3'">
+            <div class="d-flex align-center" :class="miniVariant ? 'flex-column py-3 px-2' : 'pa-3'">
               <!-- Avatar Section -->
               <div class="position-relative">
                 <ProfileAvatar
@@ -85,8 +85,8 @@
                   :member-id="memberData?.member_id"
                   :first-name="memberData?.first_name || user?.firstName"
                   :last-name="memberData?.last_name || user?.lastName"
-                  :size="miniVariant ? 'x-small' : 'small'"
-                  :class="miniVariant ? 'mb-2' : 'mr-3'"
+                  :size="miniVariant ? '32' : 'small'"
+                  :class="miniVariant ? '' : 'mr-3'"
                   :show-badge="false"
                 />
                 <div v-if="!miniVariant" class="online-indicator" />
@@ -100,20 +100,17 @@
               </div>
               
               <!-- Action Buttons -->
-              <div :class="miniVariant ? '' : 'ml-auto'">
+              <div :class="miniVariant ? 'mt-2' : 'ml-auto'">
                 <v-menu location="top" offset-y>
                   <template v-slot:activator="{ props }">
                     <v-btn 
                       v-bind="props"
-                      :icon="miniVariant"
-                      :size="miniVariant ? 'x-small' : 'small'"
-                      :variant="miniVariant ? 'text' : 'tonal'"
+                      icon
+                      :size="miniVariant ? 'small' : 'small'"
+                      variant="text"
                       class="profile-menu-btn"
                     >
-                      <v-icon :size="miniVariant ? 'small' : 'default'">
-                        {{ miniVariant ? 'mdi-dots-vertical' : 'mdi-menu' }}
-                      </v-icon>
-                      <span v-if="!miniVariant" class="ml-1">Menu</span>
+                      <v-icon>mdi-dots-vertical</v-icon>
                     </v-btn>
                   </template>
                   <v-list density="compact" class="glass-menu" min-width="200">