diff --git a/src/App.vue b/src/App.vue
index 154305b..3fe4c13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,12 @@ const currentLanguage = ref(getCurrentLanguage())
 
 const sidebarWidth = ref(240)
 const isDragging = ref(false)
+const sidebarCollapsed = ref(localStorage.getItem('sidebar_collapsed') === 'true')
+
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value
+  localStorage.setItem('sidebar_collapsed', String(sidebarCollapsed.value))
+}
 
 function refreshUser() {
   const user = localStorage.getItem('username') || ''
@@ -98,15 +104,20 @@ onUnmounted(() => {
 <template>
   <BuildVersion />
   <div id="app" class="ms-app" :data-current-login="'guest'">
-    <aside class="ms-side" :style="{ width: sidebarWidth + 'px', minWidth: sidebarWidth + 'px' }">
-      <div class="gs-logo">Workspace</div>
+    <aside class="ms-side" :class="{ collapsed: sidebarCollapsed }" :style="{ width: sidebarCollapsed ? '62px' : sidebarWidth + 'px', minWidth: sidebarCollapsed ? '62px' : sidebarWidth + 'px' }">
+      <div class="gs-sidebar-toggle" @click="toggleSidebar">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline :points="sidebarCollapsed ? '9 18 15 12 9 6' : '15 18 9 12 15 6'"/>
+        </svg>
+      </div>
+      <div class="gs-logo" :class="{ 'gs-logo-collapsed': sidebarCollapsed }">{{ sidebarCollapsed ? 'WS' : 'Workspace' }}</div>
       <nav class="gs-nav">
         <router-link to="/search" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="11" cy="11" r="8"/>
             <path d="M21 21l-4.35-4.35"/>
           </svg>
-          <span>{{ t('nav.search') }}</span>
+          <span v-show="!sidebarCollapsed">{{ t('nav.search') }}</span>
         </router-link>
         <router-link to="/library" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -115,7 +126,7 @@ onUnmounted(() => {
             <rect x="3" y="14" width="7" height="7" rx="1"/>
             <rect x="14" y="14" width="7" height="7" rx="1"/>
           </svg>
-          <span>{{ t('nav.library') }}</span>
+          <span v-show="!sidebarCollapsed">{{ t('nav.library') }}</span>
         </router-link>
         <router-link to="/face" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -123,24 +134,24 @@ onUnmounted(() => {
             <circle cx="12" cy="10" r="4"/>
             <path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
           </svg>
-          <span>Face</span>
+          <span v-show="!sidebarCollapsed">Face</span>
         </router-link>
         <router-link to="/admin" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="3"/>
             <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
           </svg>
-          <span>{{ t('nav.admin') }}</span>
+          <span v-show="!sidebarCollapsed">{{ t('nav.admin') }}</span>
         </router-link>
         <router-link to="/client" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
           </svg>
-          <span>{{ t('nav.client') }}</span>
+          <span v-show="!sidebarCollapsed">{{ t('nav.client') }}</span>
         </router-link>
       </nav>
-<div class="gs-divider"></div>
-      <div class="gs-footer">
+<div class="gs-divider" v-show="!sidebarCollapsed"></div>
+      <div class="gs-footer" v-show="!sidebarCollapsed">
         <div class="gs-lang-switcher">
           <select v-model="currentLanguage" @change="onChangeLanguage" class="gs-lang-select">
             <option value="en">English</option>
@@ -159,7 +170,7 @@ onUnmounted(() => {
         </div>
       </div>
     </aside>
-    <div class="ms-divider" @mousedown="startDrag"></div>
+    <div class="ms-divider" :class="{ 'ms-divider-hidden': sidebarCollapsed }" @mousedown="startDrag"></div>
 <main class="ms-main">
       <router-view />
     </main>
@@ -175,7 +186,17 @@ onUnmounted(() => {
 * { margin: 0; padding: 0; box-sizing: border-box; }
 #app, .ms-app { background: var(--background-color) !important; display: flex; max-width: 1400px; margin: 0 auto; padding: 28px; gap: 0; min-height: 100vh; box-sizing: border-box; align-items: stretch; }
 .ms-side { width: 240px; min-width: 240px; flex-shrink: 0; background: var(--card-background) !important; border-radius: 18px; padding: 18px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; height: calc(100vh - 125px); align-self: flex-start; overflow: visible; }
+.ms-side.collapsed { align-items: center; padding: 18px 8px; }
+.ms-side.collapsed .gs-nav { align-items: center; width: 100%; }
+.ms-side.collapsed .gs-nav-item { justify-content: center; padding: 0; width: 44px; }
+.ms-side.collapsed .gs-nav-icon { width: 22px; height: 22px; }
+.gs-sidebar-toggle { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 12px 4px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
+.gs-sidebar-toggle svg { transition: transform 0.2s; }
+.ms-side.collapsed .gs-sidebar-toggle { justify-content: center; width: 100%; }
+.ms-side.collapsed .gs-sidebar-toggle svg { transform: rotate(180deg); }
+.gs-logo-collapsed { text-align: center; padding: 8px 4px 16px 4px; font-size: 14px; }
 .ms-divider { width: 28px; flex-shrink: 0; cursor: col-resize; display: flex; align-items: center; justify-content: center; }
+.ms-divider-hidden { cursor: default; pointer-events: none; opacity: 0; }
 .ms-divider::after { content: ''; width: 4px; height: 40px; background: var(--border-color); border-radius: 2px; transition: background 0.2s, height 0.2s; }
 .ms-divider:hover::after { background: var(--primary-color); height: 60px; }
 .gs-logo { font-size: 15px; font-weight: 600; color: var(--text-primary); padding: 8px 12px 16px 12px; flex-shrink: 0; }