diff --git a/apps/web/src/components/master-detail-sidebar-layout/index.vue b/apps/web/src/components/master-detail-sidebar-layout/index.vue
index adcda1b6..abe0ddac 100644
--- a/apps/web/src/components/master-detail-sidebar-layout/index.vue
+++ b/apps/web/src/components/master-detail-sidebar-layout/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <SidebarProvider class="min-h-[initial]! absolute inset-0 ">
+  <SidebarProvider
+    class="min-h-[initial]! absolute inset-0 "
+    :default-open="true"
+  >
     <Sidebar
       class="relative! **:[[role=navigation]]:relative! sidebar-container h-full!"
     >
diff --git a/apps/web/src/components/settings-sidebar/index.vue b/apps/web/src/components/settings-sidebar/index.vue
index 6cfd54e5..ab21904c 100644
--- a/apps/web/src/components/settings-sidebar/index.vue
+++ b/apps/web/src/components/settings-sidebar/index.vue
@@ -27,20 +27,22 @@
                   :tooltip="item.title"
                   :is-active="isItemActive(item.name)"
                   :aria-current="isItemActive(item.name) ? 'page' : undefined"
-                  class="h-9 gap-2 relative before:absolute before:w-0.5 before:top-1.5 before:bottom-1.5 before:left-0 before:rounded-full data-[active=true]:before:bg-[#8B56E3]"
+                  class="h-9 gap-2 relative before:absolute before:w-0.5 before:top-1.5 before:bottom-1.5 before:left-0 before:rounded-full data-[active=true]:before:bg-[#8B56E3] group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
                   @click="router.push({ name: item.name })"
                 >
                   <component
                     :is="item.icon"
-                    class="size-3.5 ml-1.5"
+                    class="size-3.5 ml-1.5 group-data-[collapsible=icon]:ml-0"
                   />
-                  <span class="text-xs font-medium">{{ item.title }}</span>
+                  <span class="text-xs font-medium group-data-[collapsible=icon]:hidden">{{ item.title }}</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
+
+      <SidebarRail />
     </Sidebar>
   </aside>
 </template>
@@ -61,6 +63,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarRail,
 } from '@memohai/ui'
 
 const router = useRouter()
diff --git a/apps/web/src/components/sidebar/bot-item.vue b/apps/web/src/components/sidebar/bot-item.vue
index 273e5860..74672349 100644
--- a/apps/web/src/components/sidebar/bot-item.vue
+++ b/apps/web/src/components/sidebar/bot-item.vue
@@ -6,6 +6,7 @@
     <button
       :class="[
         'group/bot flex items-center gap-2.5 w-full h-[38px] px-2.5 rounded-lg transition-colors',
+        'group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',
         isActive
           ? 'bg-background'
           : bot.status === 'error'
@@ -15,7 +16,7 @@
       :disabled="bot.status === 'error'"
       @click="handleSelect"
     >
-      <div class="size-[26px] shrink-0 rounded-full border border-border bg-accent overflow-hidden p-px">
+      <div class="size-[26px] shrink-0 rounded-full border border-border bg-accent overflow-hidden p-px group-data-[collapsible=icon]:mx-auto">
         <img
           v-if="bot.avatar_url"
           :src="bot.avatar_url"
@@ -29,42 +30,44 @@
           {{ avatarFallback }}
         </span>
       </div>
-      <span class="truncate text-xs font-medium text-foreground leading-[18px] flex-1 text-left">
+      <span class="truncate text-xs font-medium text-foreground leading-[18px] flex-1 text-left group-data-[collapsible=icon]:hidden">
         {{ bot.display_name || bot.id }}
       </span>
 
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          as-child
-          @click.stop
-        >
-          <span
-            class="shrink-0 size-6 flex items-center justify-center rounded text-muted-foreground opacity-0 group-hover/bot:opacity-100 hover:text-foreground hover:bg-accent transition-opacity"
+      <div class="group-data-[collapsible=icon]:hidden">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            as-child
+            @click.stop
           >
-            <Ellipsis
-              class="size-3"
-            />
-          </span>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          align="start"
-          side="bottom"
-          @click.stop
-        >
-          <DropdownMenuItem @click.stop="handleTogglePin">
-            <Pin
-              class="size-3 mr-2"
-            />
-            {{ pinned ? $t('common.unpin') : $t('common.pin') }}
-          </DropdownMenuItem>
-          <DropdownMenuItem @click.stop="handleDetails">
-            <Settings
-              class="size-3 mr-2"
-            />
-            {{ $t('common.details') }}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+            <span
+              class="shrink-0 size-6 flex items-center justify-center rounded text-muted-foreground opacity-0 group-hover/bot:opacity-100 hover:text-foreground hover:bg-accent transition-opacity"
+            >
+              <Ellipsis
+                class="size-3"
+              />
+            </span>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            side="bottom"
+            @click.stop
+          >
+            <DropdownMenuItem @click.stop="handleTogglePin">
+              <Pin
+                class="size-3 mr-2"
+              />
+              {{ pinned ? $t('common.unpin') : $t('common.pin') }}
+            </DropdownMenuItem>
+            <DropdownMenuItem @click.stop="handleDetails">
+              <Settings
+                class="size-3 mr-2"
+              />
+              {{ $t('common.details') }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </button>
   </SidebarMenuButton>
 </template>
diff --git a/apps/web/src/components/sidebar/index.vue b/apps/web/src/components/sidebar/index.vue
index 8f0743bd..fdf4dc2b 100644
--- a/apps/web/src/components/sidebar/index.vue
+++ b/apps/web/src/components/sidebar/index.vue
@@ -9,17 +9,17 @@
               {{ t('sidebar.bots') }}
             </span>
           </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            class="ml-auto mr-1.5 size-6 text-muted-foreground hover:text-foreground group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:mr-0"
-            :aria-label="t('bots.createBot')"
-            @click="router.push({ name: 'bots' })"
-          >
-            <Plus
-              class="size-3.5"
-            />
-          </Button>
+          <div class="flex items-center gap-1 ml-auto mr-1.5 group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:mr-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              class="size-6 text-muted-foreground hover:text-foreground"
+              :aria-label="t('bots.createBot')"
+              @click="router.push({ name: 'bots' })"
+            >
+              <Plus class="size-3.5" />
+            </Button>
+          </div>
         </div>
       </SidebarHeader>
 
@@ -53,6 +53,8 @@
         </SidebarGroup>
       </SidebarContent>
 
+      <SidebarRail />
+
       <SidebarFooter class="relative border-0 px-2 pb-3.5 pt-2.5">
         <div class="pointer-events-none absolute -top-[120px] left-0 h-[153px] w-full bg-linear-to-t from-(--sidebar-background) from-18% to-transparent z-10 group-data-[collapsible=icon]:hidden" />
         <SidebarMenu class="gap-2.5">
@@ -81,14 +83,14 @@
           <SidebarMenuItem>
             <SidebarMenuButton
               :tooltip="t('sidebar.settings')"
-              class="h-9 px-2.5"
+              class="h-9 px-2.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
               :is-active="isSettingsActive"
               @click="router.push('/settings')"
             >
               <Settings
                 class="size-3.5"
               />
-              <span class="text-xs font-medium">{{ t('sidebar.settings') }}</span>
+              <span class="text-xs font-medium group-data-[collapsible=icon]:hidden">{{ t('sidebar.settings') }}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
@@ -117,6 +119,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarRail,
 } from '@memohai/ui'
 import { Plus, LoaderCircle, Settings } from 'lucide-vue-next'
 import BotItem from './bot-item.vue'