diff --git a/video-gen-app/src/components/Layout/AppLayout.tsx b/video-gen-app/src/components/Layout/AppLayout.tsx
index 5f29ad09..8d9ea393 100644
--- a/video-gen-app/src/components/Layout/AppLayout.tsx
+++ b/video-gen-app/src/components/Layout/AppLayout.tsx
@@ -463,9 +463,9 @@ const AppLayout: React.FC = () => {
                 <div key={item.id} onClick={() => item.path && navigate(item.path)} style={{
                   display: 'flex', alignItems: 'center',
                   justifyContent: 'flex-start',
-                  gap: 12,
-                  padding: depth > 0 ? '8px 14px 8px 36px' : '10px 16px',
-                  borderRadius: 12, margin: '2px 6px', cursor: 'pointer',
+                  gap: 10,
+                  padding: depth > 0 ? '6px 12px 6px 32px' : '6px 14px',
+                  borderRadius: 12, margin: '1px 4px', cursor: 'pointer',
                   fontSize: depth > 0 ? 13 : 14, fontWeight: isActive ? 600 : 400,
                   color: isActive ? '#4f46e5' : '#475569',
                   background: isActive ? 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%)' : 'transparent',
@@ -495,11 +495,11 @@ const AppLayout: React.FC = () => {
                 items.push(
                   <div key={item.id}>
                     <div style={{
-                      color: '#94a3b8', fontSize: 12, fontWeight: 600,
-                      padding: '12px 16px 6px', letterSpacing: 0.5, textTransform: 'uppercase',
-                    }}>
-                      {item.label}
-                    </div>
+                  color: '#94a3b8', fontSize: 12, fontWeight: 600,
+                  padding: '10px 14px 4px', letterSpacing: 0.5, textTransform: 'uppercase',
+                }}>
+                  {item.label}
+                </div>
                     {children.map(c => renderMenuItem(c, 1))}
                   </div>
                 );