diff --git a/App.tsx b/App.tsx
index 0f8bdfd..747f640 100644
--- a/App.tsx
+++ b/App.tsx
@@ -11,17 +11,23 @@ import { UsernameModal } from './components/UsernameModal';
 import { UserProfile } from './components/UserProfile';
 import { SettingsModal } from './components/SettingsModal';
 import { SongProfile } from './components/SongProfile';
+import { TrainingPanel } from './components/TrainingPanel';
 import { Song, GenerationParams, View, Playlist } from './types';
 import { generateApi, songsApi, playlistsApi, getAudioUrl } from './services/api';
 import { useAuth } from './context/AuthContext';
 import { useResponsive } from './context/ResponsiveContext';
+import { I18nProvider, useI18n } from './context/I18nContext';
 import { List } from 'lucide-react';
 import { PlaylistDetail } from './components/PlaylistDetail';
 import { Toast, ToastType } from './components/Toast';
 import { SearchPage } from './components/SearchPage';
+import { ConfirmDialog } from './components/ConfirmDialog';
 
 
-export default function App() {
+function AppContent() {
+  // i18n
+  const { t } = useI18n();
+
   // Responsive
   const { isMobile, isDesktop } = useResponsive();
 
@@ -59,13 +65,18 @@ export default function App() {
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
-  const [volume, setVolume] = useState(0.8);
+  const [volume, setVolume] = useState(() => {
+    const stored = localStorage.getItem('volume');
+    return stored ? parseFloat(stored) : 0.8;
+  });
+  const [playbackRate, setPlaybackRate] = useState(1.0);
   const [isShuffle, setIsShuffle] = useState(false);
-  const [repeatMode, setRepeatMode] = useState<'none' | 'all' | 'one'>('all');
+  const [repeatMode, setRepeatMode] = useState<'none' | 'all' | 'one'>('none');
 
   // UI State
   const [isGenerating, setIsGenerating] = useState(false);
   const [showRightSidebar, setShowRightSidebar] = useState(true);
+  const [showLeftSidebar, setShowLeftSidebar] = useState(false);
   const [pendingAudioSelection, setPendingAudioSelection] = useState<{ target: 'reference' | 'source'; url: string; title?: string } | null>(null);
 
   // Mobile UI Toggle
@@ -96,6 +107,7 @@ export default function App() {
   const [reuseData, setReuseData] = useState<{ song: Song, timestamp: number } | null>(null);
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const currentSongIdRef = useRef<string | null>(null);
   const pendingSeekRef = useRef<number | null>(null);
   const playNextRef = useRef<() => void>(() => {});
 
@@ -109,6 +121,13 @@ export default function App() {
     isVisible: false,
   });
 
+  // Confirm Dialog State
+  const [confirmDialog, setConfirmDialog] = useState<{
+    title: string;
+    message: string;
+    onConfirm: () => void;
+  } | null>(null);
+
   interface ReferenceTrack {
     id: string;
     filename: string;
@@ -172,6 +191,9 @@ export default function App() {
   // Song Update Handler
   const handleSongUpdate = (updatedSong: Song) => {
     setSongs(prev => prev.map(s => s.id === updatedSong.id ? updatedSong : s));
+    if (currentSong?.id === updatedSong.id) {
+      setCurrentSong(updatedSong);
+    }
     if (selectedSong?.id === updatedSong.id) {
       setSelectedSong(updatedSong);
     }
@@ -239,6 +261,8 @@ export default function App() {
         setMobileShowList(false);
       } else if (path === '/library') {
         setCurrentView('library');
+      } else if (path === '/training') {
+        setCurrentView('training');
       } else if (path.startsWith('/@')) {
         const username = path.substring(2);
         if (username) {
@@ -294,6 +318,7 @@ export default function App() {
           viewCount: s.view_count || 0,
           userId: s.user_id,
           creator: s.creator,
+          ditModel: s.ditModel,
           generationParams: (() => {
             try {
               if (!s.generation_params) return undefined;
@@ -464,9 +489,9 @@ export default function App() {
       if (audio.error && audio.error.code !== 1) {
         console.error("Audio playback error:", audio.error);
         if (audio.error.code === 4) {
-          showToast('This song is no longer available.', 'error');
+          showToast(t('songNotAvailable'), 'error');
         } else {
-          showToast('Unable to play this song.', 'error');
+          showToast(t('unableToPlay'), 'error');
         }
       }
       setIsPlaying(false);
@@ -502,14 +527,15 @@ export default function App() {
         if (err instanceof Error && err.name !== 'AbortError') {
           console.error("Playback failed:", err);
           if (err.name === 'NotSupportedError') {
-            showToast('This song is no longer available.', 'error');
+            showToast(t('songNotAvailable'), 'error');
           }
           setIsPlaying(false);
         }
       }
     };
 
-    if (audio.src !== currentSong.audioUrl) {
+    if (currentSongIdRef.current !== currentSong.id) {
+      currentSongIdRef.current = currentSong.id;
       audio.src = currentSong.audioUrl;
       audio.load();
       if (isPlaying) playAudio();
@@ -526,6 +552,13 @@ export default function App() {
     }
   }, [volume]);
 
+  // Handle Playback Rate
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.playbackRate = playbackRate;
+    }
+  }, [playbackRate]);
+
   // Helper to cleanup a job and check if all jobs are done
   const cleanupJob = useCallback((jobId: string, tempId: string) => {
     const jobData = activeJobsRef.current.get(jobId);
@@ -566,6 +599,7 @@ export default function App() {
         viewCount: s.view_count || 0,
         userId: s.user_id,
         creator: s.creator,
+        ditModel: s.ditModel,
         generationParams: (() => {
           try {
             if (!s.generation_params) return undefined;
@@ -701,6 +735,7 @@ export default function App() {
         lyrics: params.lyrics,
         style: params.style,
         title: params.title,
+        ditModel: params.ditModel,
         instrumental: params.instrumental,
         vocalLanguage: params.vocalLanguage,
         duration: params.duration && params.duration > 0 ? params.duration : undefined,
@@ -762,7 +797,7 @@ export default function App() {
       if (activeJobsRef.current.size === 0) {
         setIsGenerating(false);
       }
-      showToast('Generation failed. Please try again.', 'error');
+      showToast(t('generationFailed'), 'error');
     }
   };
 
@@ -904,127 +939,99 @@ export default function App() {
     }
   };
 
-  const handleDeleteSong = async (song: Song) => {
-    if (!token) return;
-
-    // Show confirmation dialog
-    const confirmed = window.confirm(
-      `Are you sure you want to delete "${song.title}"? This action cannot be undone.`
-    );
-
-    if (!confirmed) return;
+  const handleDeleteSong = (song: Song) => {
+    handleDeleteSongs([song]);
+  };
 
-    try {
-      // Call API to delete song
-      await songsApi.deleteSong(song.id, token);
+  const handleDeleteSongs = (songsToDelete: Song[]) => {
+    if (!token || songsToDelete.length === 0) return;
 
-      // Remove from songs list
-      setSongs(prev => prev.filter(s => s.id !== song.id));
+    const isSingle = songsToDelete.length === 1;
+    const title = isSingle ? t('confirmDeleteTitle') : t('confirmDeleteManyTitle');
+    const message = isSingle
+      ? t('deleteSongConfirm').replace('{title}', songsToDelete[0].title)
+      : t('deleteSongsConfirm').replace('{count}', String(songsToDelete.length));
 
-      // Remove from liked songs if it was liked
-      setLikedSongIds(prev => {
-        const next = new Set(prev);
-        next.delete(song.id);
-        return next;
-      });
+    setConfirmDialog({
+      title,
+      message,
+      onConfirm: async () => {
+        setConfirmDialog(null);
 
-      // Handle if deleted song is currently selected
-      if (selectedSong?.id === song.id) {
-        setSelectedSong(null);
-      }
+        const idsToDelete = new Set(songsToDelete.map(song => song.id));
+        const succeeded: string[] = [];
+        const failed: string[] = [];
 
-      // Handle if deleted song is currently playing
-      if (currentSong?.id === song.id) {
-        setCurrentSong(null);
-        setIsPlaying(false);
-        if (audioRef.current) {
-          audioRef.current.pause();
-          audioRef.current.src = '';
+        for (const song of songsToDelete) {
+          try {
+            await songsApi.deleteSong(song.id, token!);
+            succeeded.push(song.id);
+          } catch (error) {
+            console.error('Failed to delete song:', error);
+            failed.push(song.id);
+          }
         }
-      }
-
-      // Remove from play queue if present
-      setPlayQueue(prev => prev.filter(s => s.id !== song.id));
-
-      showToast('Song deleted successfully');
-    } catch (error) {
-      console.error('Failed to delete song:', error);
-      showToast('Failed to delete song', 'error');
-    }
-  };
-
-  const handleDeleteSongs = async (songsToDelete: Song[]) => {
-    if (!token || songsToDelete.length === 0) return;
-
-    const confirmed = window.confirm(
-      `Delete ${songsToDelete.length} songs? This action cannot be undone.`
-    );
-    if (!confirmed) return;
 
-    const idsToDelete = new Set(songsToDelete.map(song => song.id));
-    const succeeded: string[] = [];
-    const failed: string[] = [];
+        if (succeeded.length > 0) {
+          setSongs(prev => prev.filter(s => !idsToDelete.has(s.id) || failed.includes(s.id)));
 
-    for (const song of songsToDelete) {
-      try {
-        await songsApi.deleteSong(song.id, token);
-        succeeded.push(song.id);
-      } catch (error) {
-        console.error('Failed to delete song:', error);
-        failed.push(song.id);
-      }
-    }
+          setLikedSongIds(prev => {
+            const next = new Set(prev);
+            succeeded.forEach(id => next.delete(id));
+            return next;
+          });
 
-    if (succeeded.length > 0) {
-      setSongs(prev => prev.filter(s => !idsToDelete.has(s.id) || failed.includes(s.id)));
-
-      setLikedSongIds(prev => {
-        const next = new Set(prev);
-        succeeded.forEach(id => next.delete(id));
-        return next;
-      });
+          if (selectedSong?.id && succeeded.includes(selectedSong.id)) {
+            setSelectedSong(null);
+          }
 
-      if (selectedSong?.id && succeeded.includes(selectedSong.id)) {
-        setSelectedSong(null);
-      }
+          if (currentSong?.id && succeeded.includes(currentSong.id)) {
+            setCurrentSong(null);
+            setIsPlaying(false);
+            if (audioRef.current) {
+              audioRef.current.pause();
+              audioRef.current.src = '';
+            }
+          }
 
-      if (currentSong?.id && succeeded.includes(currentSong.id)) {
-        setCurrentSong(null);
-        setIsPlaying(false);
-        if (audioRef.current) {
-          audioRef.current.pause();
-          audioRef.current.src = '';
+          setPlayQueue(prev => prev.filter(s => !idsToDelete.has(s.id) || failed.includes(s.id)));
         }
-      }
-
-      setPlayQueue(prev => prev.filter(s => !idsToDelete.has(s.id) || failed.includes(s.id)));
-    }
 
-    if (failed.length > 0) {
-      showToast(`Deleted ${succeeded.length}/${songsToDelete.length} songs`, 'error');
-    } else {
-      showToast('Songs deleted successfully');
-    }
+        if (failed.length > 0) {
+          showToast(t('songsDeletedPartial').replace('{succeeded}', String(succeeded.length)).replace('{total}', String(songsToDelete.length)), 'error');
+        } else if (isSingle) {
+          showToast(t('songDeleted'));
+        } else {
+          showToast(t('songsDeletedSuccess'));
+        }
+      },
+    });
   };
 
-  const handleDeleteReferenceTrack = async (trackId: string) => {
+  const handleDeleteReferenceTrack = (trackId: string) => {
     if (!token) return;
-    const confirmed = window.confirm('Delete this upload? This action cannot be undone.');
-    if (!confirmed) return;
-    try {
-      const response = await fetch(`/api/reference-tracks/${trackId}`, {
-        method: 'DELETE',
-        headers: { Authorization: `Bearer ${token}` }
-      });
-      if (!response.ok) {
-        throw new Error('Failed to delete upload');
-      }
-      setReferenceTracks(prev => prev.filter(track => track.id !== trackId));
-      showToast('Upload deleted successfully');
-    } catch (error) {
-      console.error('Failed to delete upload:', error);
-      showToast('Failed to delete upload', 'error');
-    }
+
+    setConfirmDialog({
+      title: t('delete'),
+      message: t('deleteUploadConfirm'),
+      onConfirm: async () => {
+        setConfirmDialog(null);
+        try {
+          const response = await fetch(`/api/reference-tracks/${trackId}`, {
+            method: 'DELETE',
+            headers: { Authorization: `Bearer ${token!}` }
+          });
+          if (!response.ok) {
+            throw new Error('Failed to delete upload');
+          }
+          setReferenceTracks(prev => prev.filter(track => track.id !== trackId));
+          showToast(t('songDeleted'));
+        } catch (error) {
+          console.error('Failed to delete upload:', error);
+          showToast(t('failedToDeleteSong'), 'error');
+        }
+      },
+    });
   };
 
   const createPlaylist = async (name: string, description: string) => {
@@ -1038,10 +1045,10 @@ export default function App() {
         setSongToAddToPlaylist(null);
         playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists));
       }
-      showToast('Playlist created successfully!');
+      showToast(t('playlistCreated'));
     } catch (error) {
       console.error('Create playlist error:', error);
-      showToast('Failed to create playlist', 'error');
+      showToast(t('failedToCreatePlaylist'), 'error');
     }
   };
 
@@ -1055,11 +1062,11 @@ export default function App() {
     try {
       await playlistsApi.addSong(playlistId, songToAddToPlaylist.id, token);
       setSongToAddToPlaylist(null);
-      showToast('Song added to playlist');
+      showToast(t('songAddedToPlaylist'));
       playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists));
     } catch (error) {
       console.error('Add song error:', error);
-      showToast('Failed to add song to playlist', 'error');
+      showToast(t('failedToAddSong'), 'error');
     }
   };
 
@@ -1193,6 +1200,7 @@ export default function App() {
             isPlaying={isPlaying}
             likedSongIds={likedSongIds}
             onToggleLike={toggleLike}
+            onDelete={handleDeleteSong}
           />
         );
 
@@ -1208,6 +1216,9 @@ export default function App() {
           />
         );
 
+      case 'training':
+        return <TrainingPanel />;
+
       case 'create':
       default:
         return (
@@ -1256,6 +1267,7 @@ export default function App() {
                 onCoverSong={handleCoverSong}
                 onUseUploadAsReference={handleUseUploadAsReference}
                 onCoverUpload={handleCoverUpload}
+                onSongUpdate={handleSongUpdate}
               />
             </div>
 
@@ -1272,9 +1284,6 @@ export default function App() {
                   onNavigateToSong={handleNavigateToSong}
                   isLiked={selectedSong ? likedSongIds.has(selectedSong.id) : false}
                   onToggleLike={toggleLike}
-                  onPlay={playSong}
-                  isPlaying={isPlaying}
-                  currentSong={currentSong}
                   onDelete={handleDeleteSong}
                 />
               </div>
@@ -1286,7 +1295,7 @@ export default function App() {
                 onClick={() => setMobileShowList(!mobileShowList)}
                 className="bg-zinc-800 text-white px-4 py-2 rounded-full shadow-lg border border-white/10 flex items-center gap-2 text-sm font-bold"
               >
-                {mobileShowList ? 'Create Song' : 'View List'}
+                {mobileShowList ? t('createSong') : t('viewList')}
                 <List size={16} />
               </button>
             </div>
@@ -1309,7 +1318,10 @@ export default function App() {
               window.history.pushState({}, '', '/library');
             } else if (v === 'search') {
               window.history.pushState({}, '', '/search');
+            } else if (v === 'training') {
+              window.history.pushState({}, '', '/training');
             }
+            if (isMobile) setShowLeftSidebar(false);
           }}
           theme={theme}
           onToggleTheme={toggleTheme}
@@ -1317,6 +1329,8 @@ export default function App() {
           onLogin={() => setShowUsernameModal(true)}
           onLogout={logout}
           onOpenSettings={() => setShowSettingsModal(true)}
+          isOpen={showLeftSidebar}
+          onToggle={() => setShowLeftSidebar(!showLeftSidebar)}
         />
 
         <main className="flex-1 flex overflow-hidden relative">
@@ -1335,6 +1349,9 @@ export default function App() {
         onPrevious={playPrevious}
         volume={volume}
         onVolumeChange={setVolume}
+        playbackRate={playbackRate}
+        onPlaybackRateChange={setPlaybackRate}
+        audioRef={audioRef}
         isShuffle={isShuffle}
         onToggleShuffle={() => setIsShuffle(!isShuffle)}
         repeatMode={repeatMode}
@@ -1388,7 +1405,7 @@ export default function App() {
 
       {/* Mobile Details Modal */}
       {showMobileDetails && selectedSong && (
-        <div className="fixed inset-0 z-50 flex justify-end xl:hidden">
+        <div className="fixed inset-0 z-[60] flex justify-end xl:hidden">
           <div
             className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in"
             onClick={() => setShowMobileDetails(false)}
@@ -1404,14 +1421,27 @@ export default function App() {
               onNavigateToSong={handleNavigateToSong}
               isLiked={selectedSong ? likedSongIds.has(selectedSong.id) : false}
               onToggleLike={toggleLike}
-              onPlay={playSong}
-              isPlaying={isPlaying}
-              currentSong={currentSong}
               onDelete={handleDeleteSong}
             />
           </div>
         </div>
       )}
+
+      <ConfirmDialog
+        isOpen={confirmDialog !== null}
+        title={confirmDialog?.title ?? ''}
+        message={confirmDialog?.message ?? ''}
+        onConfirm={() => confirmDialog?.onConfirm()}
+        onCancel={() => setConfirmDialog(null)}
+      />
     </div>
   );
 }
+
+export default function App() {
+  return (
+    <I18nProvider>
+      <AppContent />
+    </I18nProvider>
+  );
+}
diff --git a/I18N_USAGE.md b/I18N_USAGE.md
new file mode 100644
index 0000000..78639ec
--- /dev/null
+++ b/I18N_USAGE.md
@@ -0,0 +1,88 @@
+# ACE-Step UI 国际化使用指南
+
+## 概述
+
+本项目已实现中英文双语支持，默认语言为中文。
+
+## 架构
+
+```
+ace-step-ui/
+├── i18n/
+│   └── translations.ts          # 翻译文件
+├── context/
+│   └── I18nContext.tsx          # i18n Context Provider
+└── components/                   # 已支持国际化的组件
+```
+
+## 如何使用
+
+### 1. 在组件中使用翻译
+
+```tsx
+import { useI18n } from '../context/I18nContext';
+
+function YourComponent() {
+  const { t } = useI18n();
+  
+  return <div>{t('yourTranslationKey')}</div>;
+}
+```
+
+### 2. 切换语言
+
+在设置面板中可以切换语言，或通过代码：
+
+```tsx
+const { language, setLanguage } = useI18n();
+
+// 切换到英文
+setLanguage('en');
+
+// 切换到中文
+setLanguage('zh');
+```
+
+### 3. 添加新的翻译键
+
+在 `i18n/translations.ts` 中同时添加英文和中文翻译：
+
+```typescript
+export const translations = {
+  en: {
+    // 添加英文
+    yourNewKey: 'Your English Text',
+  },
+  zh: {
+    // 添加中文
+    yourNewKey: '你的中文文本',
+  }
+};
+```
+
+## 已翻译的组件
+
+- ✅ App.tsx (主应用、错误消息、Toast提示)
+- ✅ Sidebar.tsx (导航栏)
+- ✅ UsernameModal.tsx (用户名设置弹窗)
+- ✅ SettingsModal.tsx (设置面板，包含语言切换)
+
+## 翻译覆盖范围
+
+- 导航菜单 (创作/音乐库/搜索)
+- 用户认证 (登录/登出)
+- 主题切换 (浅色/深色模式)
+- 错误和成功提示
+- 设置界面
+- 移动端按钮
+
+## 语言持久化
+
+用户选择的语言会自动保存到 `localStorage`，下次访问时会自动应用。
+
+## 注意事项
+
+1. 所有翻译键必须同时在 `en` 和 `zh` 中定义
+2. 使用 TypeScript 类型 `TranslationKey` 确保类型安全
+3. 默认语言为中文 (zh)
+4. 如果翻译键不存在，会返回键名本身
diff --git a/components/ConfirmDialog.tsx b/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..9e40e45
--- /dev/null
+++ b/components/ConfirmDialog.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { useI18n } from '../context/I18nContext';
+
+interface ConfirmDialogProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+    isOpen,
+    title,
+    message,
+    confirmLabel,
+    cancelLabel,
+    danger = true,
+    onConfirm,
+    onCancel,
+}) => {
+    const { t } = useI18n();
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onCancel();
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onCancel]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-150"
+            onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
+        >
+            <div
+                ref={dialogRef}
+                className="bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 w-full max-w-sm mx-4 p-6 animate-in zoom-in-95 fade-in duration-200"
+            >
+                <div className="flex items-start gap-3 mb-4">
+                    {danger && (
+                        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
+                            <AlertTriangle size={20} className="text-red-500" />
+                        </div>
+                    )}
+                    <div className="flex-1 min-w-0">
+                        <h3 className="text-base font-semibold text-zinc-900 dark:text-white">
+                            {title}
+                        </h3>
+                        <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
+                            {message}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="flex gap-3 justify-end mt-6">
+                    <button
+                        onClick={onCancel}
+                        className="px-4 py-2 text-sm font-medium rounded-lg
+                            text-zinc-700 dark:text-zinc-300
+                            bg-zinc-100 dark:bg-zinc-800
+                            hover:bg-zinc-200 dark:hover:bg-zinc-700
+                            transition-colors"
+                    >
+                        {cancelLabel || t('cancel')}
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors
+                            ${danger
+                                ? 'bg-red-600 hover:bg-red-700 text-white'
+                                : 'bg-blue-600 hover:bg-blue-700 text-white'
+                            }`}
+                    >
+                        {confirmLabel || t('delete')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/components/CreatePanel.tsx b/components/CreatePanel.tsx
index a041000..cc52885 100644
--- a/components/CreatePanel.tsx
+++ b/components/CreatePanel.tsx
@@ -2,7 +2,10 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash, RefreshCw, Plus, Upload, Play, Pause, Loader2 } from 'lucide-react';
 import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { generateApi } from '../services/api';
+import { MAIN_STYLES, SUB_STYLES } from '../data/genres';
+import { EditableSlider } from './EditableSlider';
 
 interface ReferenceTrack {
   id: string;
@@ -47,58 +50,58 @@ const KEY_SIGNATURES = [
 
 const TIME_SIGNATURES = ['', '2/4', '3/4', '4/4', '6/8'];
 
-const VOCAL_LANGUAGES = [
-  { value: 'unknown', label: 'Auto / Instrumental' },
-  { value: 'ar', label: 'Arabic' },
-  { value: 'az', label: 'Azerbaijani' },
-  { value: 'bg', label: 'Bulgarian' },
-  { value: 'bn', label: 'Bengali' },
-  { value: 'ca', label: 'Catalan' },
-  { value: 'cs', label: 'Czech' },
-  { value: 'da', label: 'Danish' },
-  { value: 'de', label: 'German' },
-  { value: 'el', label: 'Greek' },
-  { value: 'en', label: 'English' },
-  { value: 'es', label: 'Spanish' },
-  { value: 'fa', label: 'Persian' },
-  { value: 'fi', label: 'Finnish' },
-  { value: 'fr', label: 'French' },
-  { value: 'he', label: 'Hebrew' },
-  { value: 'hi', label: 'Hindi' },
-  { value: 'hr', label: 'Croatian' },
-  { value: 'ht', label: 'Haitian Creole' },
-  { value: 'hu', label: 'Hungarian' },
-  { value: 'id', label: 'Indonesian' },
-  { value: 'is', label: 'Icelandic' },
-  { value: 'it', label: 'Italian' },
-  { value: 'ja', label: 'Japanese' },
-  { value: 'ko', label: 'Korean' },
-  { value: 'la', label: 'Latin' },
-  { value: 'lt', label: 'Lithuanian' },
-  { value: 'ms', label: 'Malay' },
-  { value: 'ne', label: 'Nepali' },
-  { value: 'nl', label: 'Dutch' },
-  { value: 'no', label: 'Norwegian' },
-  { value: 'pa', label: 'Punjabi' },
-  { value: 'pl', label: 'Polish' },
-  { value: 'pt', label: 'Portuguese' },
-  { value: 'ro', label: 'Romanian' },
-  { value: 'ru', label: 'Russian' },
-  { value: 'sa', label: 'Sanskrit' },
-  { value: 'sk', label: 'Slovak' },
-  { value: 'sr', label: 'Serbian' },
-  { value: 'sv', label: 'Swedish' },
-  { value: 'sw', label: 'Swahili' },
-  { value: 'ta', label: 'Tamil' },
-  { value: 'te', label: 'Telugu' },
-  { value: 'th', label: 'Thai' },
-  { value: 'tl', label: 'Tagalog' },
-  { value: 'tr', label: 'Turkish' },
-  { value: 'uk', label: 'Ukrainian' },
-  { value: 'ur', label: 'Urdu' },
-  { value: 'vi', label: 'Vietnamese' },
-  { value: 'yue', label: 'Cantonese' },
-  { value: 'zh', label: 'Chinese (Mandarin)' },
+const VOCAL_LANGUAGE_KEYS = [
+  { value: 'unknown', key: 'autoInstrumental' as const },
+  { value: 'ar', key: 'vocalArabic' as const },
+  { value: 'az', key: 'vocalAzerbaijani' as const },
+  { value: 'bg', key: 'vocalBulgarian' as const },
+  { value: 'bn', key: 'vocalBengali' as const },
+  { value: 'ca', key: 'vocalCatalan' as const },
+  { value: 'cs', key: 'vocalCzech' as const },
+  { value: 'da', key: 'vocalDanish' as const },
+  { value: 'de', key: 'vocalGerman' as const },
+  { value: 'el', key: 'vocalGreek' as const },
+  { value: 'en', key: 'vocalEnglish' as const },
+  { value: 'es', key: 'vocalSpanish' as const },
+  { value: 'fa', key: 'vocalPersian' as const },
+  { value: 'fi', key: 'vocalFinnish' as const },
+  { value: 'fr', key: 'vocalFrench' as const },
+  { value: 'he', key: 'vocalHebrew' as const },
+  { value: 'hi', key: 'vocalHindi' as const },
+  { value: 'hr', key: 'vocalCroatian' as const },
+  { value: 'ht', key: 'vocalHaitianCreole' as const },
+  { value: 'hu', key: 'vocalHungarian' as const },
+  { value: 'id', key: 'vocalIndonesian' as const },
+  { value: 'is', key: 'vocalIcelandic' as const },
+  { value: 'it', key: 'vocalItalian' as const },
+  { value: 'ja', key: 'vocalJapanese' as const },
+  { value: 'ko', key: 'vocalKorean' as const },
+  { value: 'la', key: 'vocalLatin' as const },
+  { value: 'lt', key: 'vocalLithuanian' as const },
+  { value: 'ms', key: 'vocalMalay' as const },
+  { value: 'ne', key: 'vocalNepali' as const },
+  { value: 'nl', key: 'vocalDutch' as const },
+  { value: 'no', key: 'vocalNorwegian' as const },
+  { value: 'pa', key: 'vocalPunjabi' as const },
+  { value: 'pl', key: 'vocalPolish' as const },
+  { value: 'pt', key: 'vocalPortuguese' as const },
+  { value: 'ro', key: 'vocalRomanian' as const },
+  { value: 'ru', key: 'vocalRussian' as const },
+  { value: 'sa', key: 'vocalSanskrit' as const },
+  { value: 'sk', key: 'vocalSlovak' as const },
+  { value: 'sr', key: 'vocalSerbian' as const },
+  { value: 'sv', key: 'vocalSwedish' as const },
+  { value: 'sw', key: 'vocalSwahili' as const },
+  { value: 'ta', key: 'vocalTamil' as const },
+  { value: 'te', key: 'vocalTelugu' as const },
+  { value: 'th', key: 'vocalThai' as const },
+  { value: 'tl', key: 'vocalTagalog' as const },
+  { value: 'tr', key: 'vocalTurkish' as const },
+  { value: 'uk', key: 'vocalUkrainian' as const },
+  { value: 'ur', key: 'vocalUrdu' as const },
+  { value: 'vi', key: 'vocalVietnamese' as const },
+  { value: 'yue', key: 'vocalCantonese' as const },
+  { value: 'zh', key: 'vocalChineseMandarin' as const },
 ];
 
 export const CreatePanel: React.FC<CreatePanelProps> = ({
@@ -110,6 +113,19 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   onAudioSelectionApplied,
 }) => {
   const { isAuthenticated, token, user } = useAuth();
+  const { t } = useI18n();
+
+  // Randomly select 6 music tags from MAIN_STYLES
+  const [musicTags, setMusicTags] = useState<string[]>(() => {
+    const shuffled = [...MAIN_STYLES].sort(() => Math.random() - 0.5);
+    return shuffled.slice(0, 6);
+  });
+
+  // Function to refresh music tags
+  const refreshMusicTags = useCallback(() => {
+    const shuffled = [...MAIN_STYLES].sort(() => Math.random() - 0.5);
+    setMusicTags(shuffled.slice(0, 6));
+  }, []);
 
   // Mode
   const [customMode, setCustomMode] = useState(true);
@@ -195,6 +211,71 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   const [maxDurationWithLm, setMaxDurationWithLm] = useState(240);
   const [maxDurationWithoutLm, setMaxDurationWithoutLm] = useState(240);
 
+  // LoRA Parameters
+  const [showLoraPanel, setShowLoraPanel] = useState(false);
+  const [loraPath, setLoraPath] = useState('./lora_output/final/adapter');
+  const [loraLoaded, setLoraLoaded] = useState(false);
+  const [loraScale, setLoraScale] = useState(1.0);
+  const [loraError, setLoraError] = useState<string | null>(null);
+  const [isLoraLoading, setIsLoraLoading] = useState(false);
+
+  // Model selection
+  const [selectedModel, setSelectedModel] = useState<string>(() => {
+    return localStorage.getItem('ace-model') || 'acestep-v15-turbo-shift3';
+  });
+  const [showModelMenu, setShowModelMenu] = useState(false);
+  const modelMenuRef = useRef<HTMLDivElement>(null);
+  const previousModelRef = useRef<string>(selectedModel);
+  
+  // Available models fetched from backend
+  const [fetchedModels, setFetchedModels] = useState<{ name: string; is_active: boolean; is_preloaded: boolean }[]>([]);
+
+  // Fallback model list when backend is unavailable
+  const availableModels = useMemo(() => {
+    if (fetchedModels.length > 0) {
+      return fetchedModels.map(m => ({ id: m.name, name: m.name }));
+    }
+    return [
+      { id: 'acestep-v15-base', name: 'acestep-v15-base' },
+      { id: 'acestep-v15-sft', name: 'acestep-v15-sft' },
+      { id: 'acestep-v15-turbo', name: 'acestep-v15-turbo' },
+      { id: 'acestep-v15-turbo-shift1', name: 'acestep-v15-turbo-shift1' },
+      { id: 'acestep-v15-turbo-shift3', name: 'acestep-v15-turbo-shift3' },
+      { id: 'acestep-v15-turbo-continuous', name: 'acestep-v15-turbo-continuous' },
+    ];
+  }, [fetchedModels]);
+
+  // Map model ID to short display name
+  const getModelDisplayName = (modelId: string): string => {
+    const mapping: Record<string, string> = {
+      'acestep-v15-base': '1.5B',
+      'acestep-v15-sft': '1.5S',
+      'acestep-v15-turbo-shift1': '1.5TS1',
+      'acestep-v15-turbo-shift3': '1.5TS3',
+      'acestep-v15-turbo-continuous': '1.5TC',
+      'acestep-v15-turbo': '1.5T',
+    };
+    return mapping[modelId] || modelId;
+  };
+
+  // Check if model is a turbo variant
+  const isTurboModel = (modelId: string): boolean => {
+    return modelId.includes('turbo');
+  };
+
+  // Genre selection state (cascading)
+  const [selectedMainGenre, setSelectedMainGenre] = useState<string>('');
+  const [selectedSubGenre, setSelectedSubGenre] = useState<string>('');
+
+  // Filter sub-genres based on selected main genre
+  const filteredSubGenres = useMemo(() => {
+    if (!selectedMainGenre) return [];
+    const mainLower = selectedMainGenre.toLowerCase().trim();
+    return SUB_STYLES.filter(style => 
+      style.toLowerCase().includes(mainLower)
+    );
+  }, [selectedMainGenre]);
+
   const [isUploadingReference, setIsUploadingReference] = useState(false);
   const [isUploadingSource, setIsUploadingSource] = useState(false);
   const [isTranscribingReference, setIsTranscribingReference] = useState(false);
@@ -263,6 +344,99 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   const [isResizing, setIsResizing] = useState(false);
   const lyricsRef = useRef<HTMLDivElement>(null);
 
+
+  // Close model menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modelMenuRef.current && !modelMenuRef.current.contains(event.target as Node)) {
+        setShowModelMenu(false);
+      }
+    };
+
+    if (showModelMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [showModelMenu]);
+
+  // Auto-unload LoRA when model changes
+  useEffect(() => {
+    if (previousModelRef.current !== selectedModel && loraLoaded) {
+      void handleLoraUnload();
+    }
+    previousModelRef.current = selectedModel;
+  }, [selectedModel, loraLoaded]);
+
+  // Auto-disable thinking and ADG when LoRA is loaded
+  useEffect(() => {
+    if (loraLoaded) {
+      if (thinking) setThinking(false);
+      if (useAdg) setUseAdg(false);
+    }
+  }, [loraLoaded]);
+
+  // LoRA API handlers
+  const handleLoraToggle = async () => {
+    if (!token) {
+      setLoraError('Please sign in to use LoRA');
+      return;
+    }
+    if (!loraPath.trim()) {
+      setLoraError('Please enter a LoRA path');
+      return;
+    }
+
+    setIsLoraLoading(true);
+    setLoraError(null);
+
+    try {
+      if (loraLoaded) {
+        await handleLoraUnload();
+      } else {
+        const result = await generateApi.loadLora({ lora_path: loraPath }, token);
+        setLoraLoaded(true);
+        console.log('LoRA loaded:', result?.message);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'LoRA operation failed';
+      setLoraError(message);
+      console.error('LoRA error:', err);
+    } finally {
+      setIsLoraLoading(false);
+    }
+  };
+
+  const handleLoraUnload = async () => {
+    if (!token) return;
+    
+    setIsLoraLoading(true);
+    setLoraError(null);
+
+    try {
+      const result = await generateApi.unloadLora(token);
+      setLoraLoaded(false);
+      console.log('LoRA unloaded:', result?.message);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to unload LoRA';
+      setLoraError(message);
+      console.error('Unload error:', err);
+    } finally {
+      setIsLoraLoading(false);
+    }
+  };
+
+  const handleLoraScaleChange = async (newScale: number) => {
+    setLoraScale(newScale);
+    
+    if (!token || !loraLoaded) return;
+
+    try {
+      await generateApi.setLoraScale({ scale: newScale }, token);
+    } catch (err) {
+      console.error('Failed to set LoRA scale:', err);
+    }
+  };
+
   // Reuse Effect - must be after all state declarations
   useEffect(() => {
     if (initialData) {
@@ -331,8 +505,32 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     };
   }, [isResizing]);
 
+  const refreshModels = useCallback(async () => {
+    try {
+      const modelsRes = await fetch('/api/generate/models');
+      if (modelsRes.ok) {
+        const data = await modelsRes.json();
+        const models = data.models || [];
+        if (models.length > 0) {
+          setFetchedModels(models);
+          // Always sync to the backend's active model
+          const active = models.find((m: any) => m.is_active);
+          if (active) {
+            setSelectedModel(active.name);
+            localStorage.setItem('ace-model', active.name);
+          }
+        }
+      }
+    } catch {
+      // ignore - will use fallback model list
+    }
+  }, []);
+
   useEffect(() => {
-    const loadLimits = async () => {
+    const loadModelsAndLimits = async () => {
+      await refreshModels();
+
+      // Fetch limits
       try {
         const response = await fetch('/api/generate/limits');
         if (!response.ok) return;
@@ -348,9 +546,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
       }
     };
 
-    loadLimits();
+    loadModelsAndLimits();
   }, []);
 
+  // Re-fetch models after generation completes to update active model
+  const prevIsGeneratingRef = useRef(isGenerating);
+  useEffect(() => {
+    if (prevIsGeneratingRef.current && !isGenerating) {
+      void refreshModels();
+    }
+    prevIsGeneratingRef.current = isGenerating;
+  }, [isGenerating, refreshModels]);
+
   const activeMaxDuration = thinking ? maxDurationWithLm : maxDurationWithoutLm;
 
   useEffect(() => {
@@ -474,15 +681,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         lmBackend: lmBackend || 'pt',
       }, token);
 
-      if (result.success) {
+      if (result.caption || result.lyrics || result.bpm || result.duration) {
         // Update fields with LLM-generated values
         if (target === 'style' && result.caption) setStyle(result.caption);
         if (target === 'lyrics' && result.lyrics) setLyrics(result.lyrics);
         if (result.bpm && result.bpm > 0) setBpm(result.bpm);
         if (result.duration && result.duration > 0) setDuration(result.duration);
         if (result.key_scale) setKeyScale(result.key_scale);
-        if (result.time_signature) setTimeSignature(result.time_signature);
-        if (result.language) setVocalLanguage(result.language);
+        if (result.time_signature) {
+          const ts = String(result.time_signature);
+          setTimeSignature(ts.includes('/') ? ts : `${ts}/4`);
+        }
+        if (result.vocal_language) setVocalLanguage(result.vocal_language);
         if (target === 'style') setIsFormatCaption(true);
       } else {
         console.error('Format failed:', result.error || result.status_message);
@@ -754,6 +964,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         lyrics,
         style: styleWithGender,
         title: bulkCount > 1 ? `${title} (${i + 1})` : title,
+        ditModel: selectedModel,
         instrumental,
         vocalLanguage,
         bpm,
@@ -809,6 +1020,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           return parsed.length ? parsed : undefined;
         })(),
         isFormatCaption,
+        loraLoaded,
       });
     }
 
@@ -835,18 +1047,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 </div>
               )}
               <div className="text-sm font-semibold text-zinc-900 dark:text-white">
-                {dragKind === 'audio' ? 'Drop to use audio' : 'Drop to upload'}
+                {dragKind === 'audio' ? t('dropToUseAudio') : t('dropToUpload')}
               </div>
               <div className="text-[11px] text-zinc-500 dark:text-zinc-400">
                 {dragKind === 'audio'
-                  ? `Using as ${audioTab === 'reference' ? 'Reference' : 'Cover'}`
-                  : `Uploading as ${audioTab === 'reference' ? 'Reference' : 'Cover'}`}
+                  ? (audioTab === 'reference' ? t('usingAsReference') : t('usingAsCover'))
+                  : (audioTab === 'reference' ? t('uploadingAsReference') : t('uploadingAsCover'))}
               </div>
             </div>
           </div>
         </div>
       )}
-      <div className="p-4 pt-14 md:pt-4 space-y-5">
+      <div className="p-4 pt-14 md:pt-4 pb-24 lg:pb-32 space-y-5">
         <input
           ref={referenceInputRef}
           type="file"
@@ -880,26 +1092,88 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           onLoadedMetadata={(e) => setSourceDuration(e.currentTarget.duration || 0)}
         />
 
-        {/* Header - Mode Toggle */}
+        {/* Header - Mode Toggle & Model Selection */}
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
             <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">ACE-Step v1.5</span>
           </div>
 
-          <div className="flex items-center bg-zinc-200 dark:bg-black/40 rounded-lg p-1 border border-zinc-300 dark:border-white/5">
-            <button
-              onClick={() => setCustomMode(false)}
-              className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${!customMode ? 'bg-white dark:bg-zinc-800 text-black dark:text-white shadow-sm' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'}`}
-            >
-              Simple
-            </button>
-            <button
-              onClick={() => setCustomMode(true)}
-              className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${customMode ? 'bg-white dark:bg-zinc-800 text-black dark:text-white shadow-sm' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'}`}
-            >
-              Custom
-            </button>
+          <div className="flex items-center gap-2">
+            {/* Mode Toggle */}
+            <div className="flex items-center bg-zinc-200 dark:bg-black/40 rounded-lg p-1 border border-zinc-300 dark:border-white/5">
+              <button
+                onClick={() => setCustomMode(false)}
+                className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${!customMode ? 'bg-white dark:bg-zinc-800 text-black dark:text-white shadow-sm' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'}`}
+              >
+                {t('simple')}
+              </button>
+              <button
+                onClick={() => setCustomMode(true)}
+                className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${customMode ? 'bg-white dark:bg-zinc-800 text-black dark:text-white shadow-sm' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'}`}
+              >
+                {t('custom')}
+              </button>
+            </div>
+
+            {/* Model Selection */}
+            <div className="relative" ref={modelMenuRef}>
+              <button
+                onClick={() => setShowModelMenu(!showModelMenu)}
+                className="bg-zinc-200 dark:bg-black/40 border border-zinc-300 dark:border-white/5 rounded-md px-2 py-1 text-[11px] font-medium text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-black/50 transition-colors flex items-center gap-1"
+                disabled={availableModels.length === 0}
+              >
+                {availableModels.length === 0 ? '...' : getModelDisplayName(selectedModel)}
+                <ChevronDown size={10} className="text-zinc-600 dark:text-zinc-400" />
+              </button>
+              
+              {/* Floating Model Menu */}
+              {showModelMenu && availableModels.length > 0 && (
+                <div className="absolute top-full right-0 mt-1 w-72 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-2xl z-50 overflow-hidden">
+                  <div className="max-h-96 overflow-y-auto custom-scrollbar">
+                    {availableModels.map(model => (
+                      <button
+                        key={model.id}
+                        onClick={() => {
+                          setSelectedModel(model.id);
+                          localStorage.setItem('ace-model', model.id);
+                          // Auto-adjust parameters for non-turbo models
+                          if (!isTurboModel(model.id)) {
+                            setInferenceSteps(20);
+                            setUseAdg(true);
+                          }
+                          setShowModelMenu(false);
+                        }}
+                        className={`w-full px-4 py-3 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors border-b border-zinc-100 dark:border-zinc-800 last:border-b-0 ${
+                          selectedModel === model.id ? 'bg-zinc-50 dark:bg-zinc-800/50' : ''
+                        }`}
+                      >
+                        <div className="flex items-center justify-between mb-1">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-semibold text-zinc-900 dark:text-white">
+                              {getModelDisplayName(model.id)}
+                            </span>
+                            {fetchedModels.find(m => m.name === model.id)?.is_preloaded && (
+                              <span className="px-1.5 py-0.5 rounded text-[9px] font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
+                                {fetchedModels.find(m => m.name === model.id)?.is_active ? '● Active' : '● Ready'}
+                              </span>
+                            )}
+                          </div>
+                          {selectedModel === model.id && (
+                            <div className="w-4 h-4 rounded-full bg-pink-500 flex items-center justify-center">
+                              <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                              </svg>
+                            </div>
+                          )}
+                        </div>
+                        <p className="text-xs text-zinc-500 dark:text-zinc-400">{model.id}</p>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
@@ -909,12 +1183,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* Song Description */}
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
               <div className="px-3 py-2.5 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
-                Describe Your Song
+                {t('describeYourSong')}
               </div>
               <textarea
                 value={songDescription}
                 onChange={(e) => setSongDescription(e.target.value)}
-                placeholder="A happy pop song about summer adventures with friends..."
+                placeholder={t('songDescriptionPlaceholder')}
                 className="w-full h-32 bg-transparent p-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none resize-none"
               />
             </div>
@@ -922,7 +1196,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* Vocal Language (Simple) */}
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
               <div className="px-3 py-2.5 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
-                Vocal Language
+                {t('vocalLanguage')}
               </div>
               <div className="flex flex-wrap items-center gap-2 p-3">
                 <select
@@ -930,8 +1204,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   onChange={(e) => setVocalLanguage(e.target.value)}
                   className="flex-1 min-w-[180px] bg-transparent text-sm text-zinc-900 dark:text-white focus:outline-none"
                 >
-                  {VOCAL_LANGUAGES.map(lang => (
-                    <option key={lang.value} value={lang.value}>{lang.label}</option>
+                  {VOCAL_LANGUAGE_KEYS.map(lang => (
+                    <option key={lang.value} value={lang.value}>{lang.key}</option>
                   ))}
                 </select>
                 <div className="flex items-center gap-2">
@@ -940,14 +1214,14 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     onClick={() => setVocalGender(vocalGender === 'male' ? '' : 'male')}
                     className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors ${vocalGender === 'male' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
-                    Male
+                    {t('male')}
                   </button>
                   <button
                     type="button"
                     onClick={() => setVocalGender(vocalGender === 'female' ? '' : 'female')}
                     className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors ${vocalGender === 'female' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
-                    Female
+                    {t('female')}
                   </button>
                 </div>
               </div>
@@ -957,55 +1231,42 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
               <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide flex items-center gap-2">
                 <Sliders size={14} />
-                Quick Settings
+                {t('quickSettings')}
               </h3>
 
               {/* Duration */}
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Duration</label>
-                  <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">
-                    {duration === -1 ? 'Auto' : `${duration}s`}
-                  </span>
-                </div>
-                <input
-                  type="range"
-                  min="-1"
-                  max={activeMaxDuration}
-                  step="5"
-                  value={duration}
-                  onChange={(e) => setDuration(Number(e.target.value))}
-                  className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                />
-              </div>
+              <EditableSlider
+                label={t('duration')}
+                value={duration}
+                min={-1}
+                max={600}
+                step={5}
+                onChange={setDuration}
+                formatDisplay={(val) => val === -1 ? t('auto') : `${val}${t('seconds')}`}
+                title={''}
+                autoLabel={t('auto')}
+              />
 
               {/* BPM */}
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">BPM</label>
-                  <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">
-                    {bpm === 0 ? 'Auto' : bpm}
-                  </span>
-                </div>
-                <input
-                  type="range"
-                  min="0"
-                  max="300"
-                  step="5"
-                  value={bpm}
-                  onChange={(e) => setBpm(Number(e.target.value))}
-                  className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                />
-              </div>
+              <EditableSlider
+                label="BPM"
+                value={bpm}
+                min={0}
+                max={300}
+                step={5}
+                onChange={setBpm}
+                formatDisplay={(val) => val === 0 ? 'Auto' : val.toString()}
+                autoLabel="Auto"
+              />
 
               {/* Key & Time Signature */}
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1.5">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Key</label>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('key')}</label>
                   <select
                     value={keyScale}
-                    onChange={(e) => setKeyScale(e.target.value)}
-                    className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                    onChange={setKeyScale}
+                    className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                   >
                     <option value="">Auto</option>
                     {KEY_SIGNATURES.filter(k => k).map(key => (
@@ -1014,11 +1275,11 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   </select>
                 </div>
                 <div className="space-y-1.5">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Time</label>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('time')}</label>
                   <select
                     value={timeSignature}
-                    onChange={(e) => setTimeSignature(e.target.value)}
-                    className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                    onChange={setTimeSignature}
+                    className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                   >
                     <option value="">Auto</option>
                     {TIME_SIGNATURES.filter(t => t).map(time => (
@@ -1029,21 +1290,25 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               </div>
 
               {/* Variations */}
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Variations</label>
-                  <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{batchSize}</span>
-                </div>
+              <EditableSlider
+                label={t('variations')}
+                value={batchSize}
+                min={1}
+                max={8}
+                step={1}
+                onChange={setBatchSize}
+              />
+              <div style={{display: 'none'}}>
                 <input
                   type="range"
                   min="1"
-                  max="4"
+                  max="8"
                   step="1"
                   value={batchSize}
-                  onChange={(e) => { const v = Number(e.target.value); setBatchSize(v); localStorage.setItem('ace-batchSize', String(v)); }}
+                  onChange={setBatchSize}
                   className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
                 />
-                <p className="text-[10px] text-zinc-500">Number of song variations to generate</p>
+                <p className="text-[10px] text-zinc-500">{t('numberOfVariations')}</p>
               </div>
             </div>
           </div>
@@ -1061,7 +1326,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               {/* Header with Audio label and tabs */}
               <div className="px-3 py-2.5 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
                 <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Audio</span>
+                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{t('audio')}</span>
                   <div className="flex items-center gap-1 bg-zinc-200/50 dark:bg-black/30 rounded-lg p-0.5">
                     <button
                       type="button"
@@ -1072,7 +1337,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                           : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                       }`}
                     >
-                      Reference
+                      {t('reference')}
                     </button>
                     <button
                       type="button"
@@ -1083,7 +1348,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                           : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                       }`}
                     >
-                      Cover
+                      {t('cover')}
                     </button>
                   </div>
                 </div>
@@ -1202,28 +1467,25 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   <button
                     type="button"
                     onClick={() => openAudioModal(audioTab, 'uploads')}
-                    className="flex-1 flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                    className="flex-1 flex items-center justify-center gap-1.5 rounded-lg bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-700 dark:text-zinc-300 px-3 py-2 text-xs font-medium transition-colors border border-zinc-200 dark:border-white/5"
                   >
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                     </svg>
-                    Library
+                    {t('fromLibrary')}
                   </button>
                   <button
                     type="button"
                     onClick={() => {
-                      if (audioTab === 'reference') {
-                        referenceInputRef.current?.click();
-                      } else {
-                        sourceInputRef.current?.click();
-                      }
+                      const input = audioTab === 'reference' ? referenceInputRef.current : sourceInputRef.current;
+                      input?.click();
                     }}
-                    className="flex-1 flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                    className="flex-1 flex items-center justify-center gap-1.5 rounded-lg bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-700 dark:text-zinc-300 px-3 py-2 text-xs font-medium transition-colors border border-zinc-200 dark:border-white/5"
                   >
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                     </svg>
-                    Upload
+                    {t('upload')}
                   </button>
                 </div>
               </div>
@@ -1237,8 +1499,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             >
               <div className="flex items-center justify-between px-3 py-2.5 bg-zinc-50 dark:bg-white/5 border-b border-zinc-100 dark:border-white/5 flex-shrink-0">
                 <div>
-                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Lyrics</span>
-                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">Leave empty for instrumental or toggle below</p>
+                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{t('lyrics')}</span>
+                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">{t('leaveLyricsEmpty')}</p>
                 </div>
                 <div className="flex items-center gap-2">
                   <button
@@ -1249,7 +1511,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                         : 'bg-white dark:bg-suno-card border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/10'
                     }`}
                   >
-                    {instrumental ? 'Instrumental' : 'Vocal'}
+                    {instrumental ? t('instrumental') : t('vocal')}
                   </button>
                   <button
                     className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormattingLyrics ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
@@ -1271,7 +1533,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 disabled={instrumental}
                 value={lyrics}
                 onChange={(e) => setLyrics(e.target.value)}
-                placeholder={instrumental ? "Instrumental mode - no lyrics needed" : "[Verse]\nYour lyrics here...\n\n[Chorus]\nThe catchy part..."}
+                placeholder={instrumental ? t('instrumental') + ' mode' : t('lyricsPlaceholder')}
                 className={`w-full bg-transparent p-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none resize-none font-mono leading-relaxed ${instrumental ? 'opacity-30 cursor-not-allowed' : ''}`}
                 style={{ height: `${lyricsHeight}px` }}
               />
@@ -1288,8 +1550,23 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden transition-colors group focus-within:border-zinc-400 dark:focus-within:border-white/20">
               <div className="flex items-center justify-between px-3 py-2.5 bg-zinc-50 dark:bg-white/5 border-b border-zinc-100 dark:border-white/5">
                 <div>
-                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Style of Music</span>
-                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">Genre, mood, instruments, vibe</p>
+                  <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{t('styleOfMusic')}</span>
+                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">{t('genreMoodInstruments')}</p>
+                </div>
+                <div className="flex items-center gap-1">
+                  <button
+                    className="p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors text-zinc-500 hover:text-black dark:hover:text-white"
+                    title={t('refreshGenres')}
+                    onClick={refreshMusicTags}
+                  >
+                    <Dices size={14} />
+                  </button>
+                  <button
+                    className="p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded text-zinc-500 hover:text-black dark:hover:text-white transition-colors"
+                    onClick={() => setStyle('')}
+                  >
+                    <Trash2 size={14} />
+                  </button>
                 </div>
                 <button
                   className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormattingStyle ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
@@ -1303,32 +1580,99 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <textarea
                 value={style}
                 onChange={(e) => setStyle(e.target.value)}
-                placeholder="e.g. upbeat pop rock, emotional ballad, 90s hip hop"
+                placeholder={t('stylePlaceholder')}
                 className="w-full h-20 bg-transparent p-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none resize-none"
               />
-              <div className="px-3 pb-3 flex flex-wrap gap-2">
-                {['Pop', 'Rock', 'Electronic', 'Hip Hop', 'Jazz', 'Classical'].map(tag => (
-                  <button
-                    key={tag}
-                    onClick={() => setStyle(prev => prev ? `${prev}, ${tag}` : tag)}
-                    className="text-[10px] font-medium bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white px-2.5 py-1 rounded-full transition-colors border border-zinc-200 dark:border-white/5"
-                  >
-                    {tag}
-                  </button>
-                ))}
+              <div className="px-3 pb-3 space-y-3">
+                {/* Cascading Genre Selector */}
+                <div className="space-y-2">
+                  {/* First Level: Main Genre */}
+                  <div className="flex gap-2">
+                    <select
+                      value={selectedMainGenre}
+                      onChange={(e) => {
+                        setSelectedMainGenre(e.target.value);
+                        setSelectedSubGenre(''); // Reset sub genre when main changes
+                        if (e.target.value) {
+                          setStyle(prev => prev ? `${prev}, ${e.target.value}` : e.target.value);
+                        }
+                      }}
+                      className="flex-1 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
+                    >
+                      <option value="">{t('mainGenre')}</option>
+                      {MAIN_STYLES.map(genre => (
+                        <option key={genre} value={genre}>{genre}</option>
+                      ))}
+                    </select>
+                    {selectedMainGenre && (
+                      <button
+                        onClick={() => {
+                          setSelectedMainGenre('');
+                          setSelectedSubGenre('');
+                        }}
+                        className="px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                        title={t('cancel')}
+                      >
+                        ✕
+                      </button>
+                    )}
+                  </div>
+                  
+                  {/* Second Level: Sub Genre (only show when main genre is selected) */}
+                  {selectedMainGenre && filteredSubGenres.length > 0 && (
+                    <div className="flex gap-2 pl-4 border-l-2 border-zinc-200 dark:border-white/10">
+                      <select
+                        value={selectedSubGenre}
+                        onChange={(e) => {
+                          setSelectedSubGenre(e.target.value);
+                          if (e.target.value) {
+                            setStyle(prev => prev ? `${prev}, ${e.target.value}` : e.target.value);
+                          }
+                        }}
+                        className="flex-1 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
+                      >
+                        <option value="">{t('subGenre')} ({filteredSubGenres.length})</option>
+                        {filteredSubGenres.map(genre => (
+                          <option key={genre} value={genre}>{genre}</option>
+                        ))}
+                      </select>
+                      {selectedSubGenre && (
+                        <button
+                          onClick={() => setSelectedSubGenre('')}
+                          className="px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                          title={t('cancel')}
+                        >
+                          ✕
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </div>
+                {/* Quick Tags */}
+                <div className="flex flex-wrap gap-2">
+                  {musicTags.map(tag => (
+                    <button
+                      key={tag}
+                      onClick={() => setStyle(prev => prev ? `${prev}, ${tag}` : tag)}
+                      className="text-[10px] font-medium bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white px-2.5 py-1 rounded-full transition-colors border border-zinc-200 dark:border-white/5"
+                    >
+                      {tag}
+                    </button>
+                  ))}
+                </div>
               </div>
             </div>
 
             {/* Title Input */}
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
               <div className="px-3 py-2.5 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
-                Title
+                {t('title')}
               </div>
               <input
                 type="text"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
-                placeholder="Name your song"
+                placeholder={t('nameSong')}
                 className="w-full bg-transparent p-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none"
               />
             </div>
@@ -1342,7 +1686,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             <div className="flex items-center justify-between px-1 py-2">
               <div className="flex items-center gap-2">
                 <Music2 size={14} className="text-zinc-500" />
-                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Instrumental</span>
+                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('instrumental')}</span>
               </div>
               <button
                 onClick={() => setInstrumental(!instrumental)}
@@ -1358,21 +1702,21 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
                 <label className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide px-1">
-                  Vocal Language
+                  {t('vocalLanguage')}
                 </label>
                 <select
                   value={vocalLanguage}
                   onChange={(e) => setVocalLanguage(e.target.value)}
-                  className="w-full bg-white dark:bg-suno-card border border-zinc-200 dark:border-white/5 rounded-lg px-3 py-2 text-sm text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-white dark:bg-suno-card border border-zinc-200 dark:border-white/5 rounded-xl px-3 py-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                 >
-                  {VOCAL_LANGUAGES.map(lang => (
-                    <option key={lang.value} value={lang.value}>{lang.label}</option>
+                  {VOCAL_LANGUAGE_KEYS.map(lang => (
+                    <option key={lang.value} value={lang.value}>{t(lang.key)}</option>
                   ))}
                 </select>
               </div>
               <div className="space-y-1.5">
                 <label className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide px-1">
-                  Vocal Gender
+                  {t('vocalGender')}
                 </label>
                 <div className="flex items-center gap-2">
                   <button
@@ -1380,14 +1724,14 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     onClick={() => setVocalGender(vocalGender === 'male' ? '' : 'male')}
                     className={`flex-1 px-3 py-2 rounded-lg text-xs font-semibold border transition-colors ${vocalGender === 'male' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
-                    Male
+                    {t('male')}
                   </button>
                   <button
                     type="button"
                     onClick={() => setVocalGender(vocalGender === 'female' ? '' : 'female')}
                     className={`flex-1 px-3 py-2 rounded-lg text-xs font-semibold border transition-colors ${vocalGender === 'female' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
-                    Female
+                    {t('female')}
                   </button>
                 </div>
               </div>
@@ -1395,35 +1739,102 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           )}
         </div>
 
+        {/* LORA CONTROL PANEL */}
+        {customMode && (
+          <>
+            <button
+              onClick={() => setShowLoraPanel(!showLoraPanel)}
+              className="w-full flex items-center justify-between px-4 py-3 bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors"
+            >
+              <div className="flex items-center gap-2">
+                <Sliders size={16} className="text-zinc-500" />
+                <span>LoRA</span>
+              </div>
+              <ChevronDown size={16} className={`text-zinc-500 transition-transform ${showLoraPanel ? 'rotate-180' : ''}`} />
+            </button>
+
+            {showLoraPanel && (
+              <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
+                {/* LoRA Path Input */}
+                <div className="space-y-2">
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('loraPath')}</label>
+                  <input
+                    type="text"
+                    value={loraPath}
+                    onChange={(e) => setLoraPath(e.target.value)}
+                    placeholder={t('loraPathPlaceholder')}
+                    className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors"
+                  />
+                </div>
+
+                {/* LoRA Load/Unload Toggle */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between py-2 border-t border-zinc-100 dark:border-white/5">
+                    <div className="flex items-center gap-2">
+                      <div className={`w-2 h-2 rounded-full ${
+                        loraLoaded ? 'bg-green-500 animate-pulse' : 'bg-red-500'
+                      }`}></div>
+                      <span className={`text-xs font-medium ${
+                        loraLoaded ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+                      }`}>
+                        {loraLoaded ? t('loraLoaded') : t('loraUnloaded')}
+                      </span>
+                    </div>
+                    <button
+                      onClick={handleLoraToggle}
+                      disabled={!loraPath.trim() || isLoraLoading}
+                      className={`px-4 py-2 rounded-lg text-xs font-semibold transition-all disabled:opacity-40 disabled:cursor-not-allowed ${
+                        loraLoaded
+                          ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg shadow-green-500/20 hover:from-green-600 hover:to-emerald-700'
+                          : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700'
+                      }`}
+                    >
+                      {isLoraLoading ? '...' : (loraLoaded ? t('loraUnload') : t('loraLoad'))}
+                    </button>
+                  </div>
+                  {loraError && (
+                    <div className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
+                      {loraError}
+                    </div>
+                  )}
+                </div>
+
+                {/* LoRA Scale Slider */}
+                <div className={!loraLoaded ? 'opacity-40 pointer-events-none' : ''}>
+                  <EditableSlider
+                    label={t('loraScale')}
+                    value={loraScale}
+                    min={0}
+                    max={2}
+                    step={0.05}
+                    onChange={handleLoraScaleChange}
+                    formatDisplay={(val) => val.toFixed(2)}
+                    helpText={t('loraScaleDescription')}
+                  />
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
         {/* MUSIC PARAMETERS */}
         <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
           <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide flex items-center gap-2">
             <Sliders size={14} />
-            Music Parameters
+            {t('musicParameters')}
           </h3>
 
           {/* BPM */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">BPM</label>
-              <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">
-                {bpm === 0 ? 'Auto' : bpm}
-              </span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="300"
-              step="5"
-              value={bpm}
-              onChange={(e) => setBpm(Number(e.target.value))}
-              className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-            />
-            <div className="flex justify-between text-[10px] text-zinc-500">
-              <span>Auto</span>
-              <span>300</span>
-            </div>
-          </div>
+          <EditableSlider
+            label={t('bpm')}
+            value={bpm}
+            min={0}
+            max={300}
+            step={5}
+            onChange={setBpm}
+            formatDisplay={(val) => val === 0 ? t('auto') : val.toString()}
+            autoLabel={t('auto')}
+          />
 
           {/* Key & Time Signature */}
           <div className="grid grid-cols-2 gap-3">
@@ -1432,7 +1843,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <select
                 value={keyScale}
                 onChange={(e) => setKeyScale(e.target.value)}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
               >
                 <option value="">Auto</option>
                 {KEY_SIGNATURES.filter(k => k).map(key => (
@@ -1445,7 +1856,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <select
                 value={timeSignature}
                 onChange={(e) => setTimeSignature(e.target.value)}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
               >
                 <option value="">Auto</option>
                 {TIME_SIGNATURES.filter(t => t).map(time => (
@@ -1463,7 +1874,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         >
           <div className="flex items-center gap-2">
             <Settings2 size={16} className="text-zinc-500" />
-            <span>Advanced Settings</span>
+            <span>{t('advancedSettings')}</span>
           </div>
           <ChevronDown size={16} className={`text-zinc-500 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
         </button>
@@ -1472,52 +1883,36 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
 
             {/* Duration */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Duration</label>
-                <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">
-                  {duration === -1 ? 'Auto' : `${duration}s`}
-                </span>
-              </div>
-              <input
-                type="range"
-                min="-1"
-                max={activeMaxDuration}
-                step="5"
-                value={duration}
-                onChange={(e) => setDuration(Number(e.target.value))}
-                className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-              />
-              <div className="flex justify-between text-[10px] text-zinc-500">
-                <span>Auto</span>
-                <span>{Math.round(activeMaxDuration / 60)} min</span>
-              </div>
-            </div>
+            <EditableSlider
+              label={t('duration')}
+              value={duration}
+              min={-1}
+              max={600}
+              step={5}
+              onChange={setDuration}
+              formatDisplay={(val) => val === -1 ? t('auto') : `${val}${t('seconds')}`}
+              autoLabel={t('auto')}
+              helpText={`${t('auto')} - 10 ${t('min')}`}
+            />
 
             {/* Batch Size */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Creates multiple variations in a single run. More variations = longer total time.">Variations Per Job</label>
-                <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{batchSize}</span>
-              </div>
-              <input
-                type="range"
-                min="1"
-                max="4"
-                step="1"
-                value={batchSize}
-                onChange={(e) => { const v = Number(e.target.value); setBatchSize(v); localStorage.setItem('ace-batchSize', String(v)); }}
-                className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-              />
-              <p className="text-[10px] text-zinc-500">How many versions to create in one run</p>
-            </div>
+            <EditableSlider
+              label={t('batchSize')}
+              value={batchSize}
+              min={1}
+              max={8}
+              step={1}
+              onChange={setBatchSize}
+              helpText={t('numberOfVariations')}
+              title="Creates multiple variations in a single run. More variations = longer total time."
+            />
 
             {/* Bulk Generate */}
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Bulk Generate</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('bulkGenerate')}</label>
                 <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">
-                  {bulkCount} {bulkCount === 1 ? 'job' : 'jobs'}
+                  {bulkCount} {t(bulkCount === 1 ? 'job' : 'jobs')}
                 </span>
               </div>
               <div className="flex items-center gap-1">
@@ -1535,98 +1930,87 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   </button>
                 ))}
               </div>
-              <p className="text-[10px] text-zinc-500">Queue multiple independent generation jobs with same settings</p>
+              <p className="text-[10px] text-zinc-500">{t('queueMultipleJobs')}</p>
             </div>
 
             {/* Inference Steps */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="More steps usually improves quality but slows generation.">Quality Steps</label>
-                <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{inferenceSteps}</span>
-              </div>
-              <input
-                type="range"
-                min="4"
-                max="32"
-                step="1"
-                value={inferenceSteps}
-                onChange={(e) => setInferenceSteps(Number(e.target.value))}
-                className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-              />
-              <p className="text-[10px] text-zinc-500">Higher = better quality, slower (8 recommended for turbo)</p>
-            </div>
+            <EditableSlider
+              label={t('inferenceSteps')}
+              value={inferenceSteps}
+              min={4}
+              max={200}
+              step={1}
+              onChange={setInferenceSteps}
+              helpText={t('moreStepsBetterQuality')}
+              title="More steps usually improves quality but slows generation."
+            />
 
             {/* Guidance Scale */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="How strongly the model follows the prompt. Higher = stricter, lower = freer.">Prompt Strength</label>
-                <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{guidanceScale.toFixed(1)}</span>
-              </div>
-              <input
-                type="range"
-                min="1"
-                max="15"
-                step="0.5"
-                value={guidanceScale}
-                onChange={(e) => setGuidanceScale(Number(e.target.value))}
-                className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-              />
-              <p className="text-[10px] text-zinc-500">Higher = follow prompt more, lower = more variation</p>
-            </div>
+            <EditableSlider
+              label={t('guidanceScale')}
+              value={guidanceScale}
+              min={1}
+              max={15}
+              step={0.5}
+              onChange={setGuidanceScale}
+              formatDisplay={(val) => val.toFixed(1)}
+              helpText={t('howCloselyFollowPrompt')}
+              title="How strongly the model follows the prompt. Higher = stricter, lower = freer."
+            />
 
             {/* Audio Format & Inference Method */}
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Audio Format</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('audioFormat')}</label>
                 <select
                   value={audioFormat}
                   onChange={(e) => setAudioFormat(e.target.value as 'mp3' | 'flac')}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                 >
-                  <option value="mp3">MP3 (smaller)</option>
-                  <option value="flac">FLAC (lossless)</option>
+                  <option value="mp3">{t('mp3Smaller')}</option>
+                  <option value="flac">{t('flacLossless')}</option>
                 </select>
               </div>
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Deterministic is more repeatable; stochastic adds randomness.">Sampler</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Deterministic is more repeatable; stochastic adds randomness.">{t('inferMethod')}</label>
                 <select
                   value={inferMethod}
                   onChange={(e) => setInferMethod(e.target.value as 'ode' | 'sde')}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                 >
-                  <option value="ode">Deterministic (ODE)</option>
-                  <option value="sde">Stochastic (SDE)</option>
+                  <option value="ode">{t('odeDeterministic')}</option>
+                  <option value="sde">{t('sdeStochastic')}</option>
                 </select>
               </div>
             </div>
 
             {/* LM Backend */}
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">LM Backend</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('lmBackendLabel')}</label>
               <select
                 value={lmBackend}
                 onChange={(e) => setLmBackend(e.target.value as 'pt' | 'vllm')}
                 className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
-                <option value="pt">PT (~1.6 GB VRAM)</option>
-                <option value="vllm">VLLM (~9.2 GB VRAM)</option>
+                <option value="pt">{t('lmBackendPt')}</option>
+                <option value="vllm">{t('lmBackendVllm')}</option>
               </select>
-              <p className="text-[10px] text-zinc-500">PT uses less VRAM, VLLM may be faster on powerful GPUs</p>
+              <p className="text-[10px] text-zinc-500">{t('lmBackendHint')}</p>
             </div>
 
             {/* LM Model */}
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">LM Model</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('lmModelLabel')}</label>
               <select
                 value={lmModel}
                 onChange={(e) => { const v = e.target.value; setLmModel(v); localStorage.setItem('ace-lmModel', v); }}
                 className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
               >
-                <option value="acestep-5Hz-lm-0.6B">0.6B (Lightest, ~0.5 GB VRAM)</option>
-                <option value="acestep-5Hz-lm-1.7B">1.7B (Balanced, ~1.5 GB VRAM)</option>
-                <option value="acestep-5Hz-lm-4B">4B (Best quality, ~4 GB VRAM)</option>
+                <option value="acestep-5Hz-lm-0.6B">{t('lmModel06B')}</option>
+                <option value="acestep-5Hz-lm-1.7B">{t('lmModel17B')}</option>
+                <option value="acestep-5Hz-lm-4B">{t('lmModel4B')}</option>
               </select>
-              <p className="text-[10px] text-zinc-500">Controls the LLM used for lyrics/style enhancement. Auto-downloads if not present.</p>
+              <p className="text-[10px] text-zinc-500">{t('lmModelHint')}</p>
             </div>
 
             {/* Seed */}
@@ -1634,7 +2018,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <Dices size={14} className="text-zinc-500" />
-                  <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fixing the seed makes results repeatable. Random is recommended for variety.">Repeatable Seed</span>
+                  <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fixing the seed makes results repeatable. Random is recommended for variety.">{t('seed')}</span>
                 </div>
                 <button
                   onClick={() => setRandomSeed(!randomSeed)}
@@ -1649,46 +2033,42 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   type="number"
                   value={seed}
                   onChange={(e) => setSeed(Number(e.target.value))}
-                  placeholder="Enter fixed seed"
+                  placeholder={t('enterFixedSeed')}
                   disabled={randomSeed}
                   className={`flex-1 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none ${randomSeed ? 'opacity-40 cursor-not-allowed' : ''}`}
                 />
               </div>
-              <p className="text-[10px] text-zinc-500">{randomSeed ? 'Random every run (recommended)' : 'Same seed = repeatable results'}</p>
+              <p className="text-[10px] text-zinc-500">{randomSeed ? t('randomSeedRecommended') : t('fixedSeedReproducible')}</p>
             </div>
 
             {/* Thinking Toggle */}
             <div className="flex items-center justify-between py-2 border-t border-zinc-100 dark:border-white/5">
-              <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Lets the lyric model reason about structure and metadata. Slightly slower.">Reasoning Pass (CoT)</span>
+              <span className={`text-xs font-medium ${loraLoaded ? 'text-zinc-400 dark:text-zinc-600' : 'text-zinc-600 dark:text-zinc-400'}`} title="Lets the lyric model reason about structure and metadata. Slightly slower.">{t('thinkingCot')}</span>
               <button
-                onClick={() => setThinking(!thinking)}
-                className={`w-10 h-5 rounded-full flex items-center transition-colors duration-200 px-0.5 border border-zinc-200 dark:border-white/5 ${thinking ? 'bg-pink-600' : 'bg-zinc-300 dark:bg-black/40'}`}
+                onClick={() => !loraLoaded && setThinking(!thinking)}
+                disabled={loraLoaded}
+                className={`w-10 h-5 rounded-full flex items-center transition-colors duration-200 px-0.5 border border-zinc-200 dark:border-white/5 ${thinking ? 'bg-pink-600' : 'bg-zinc-300 dark:bg-black/40'} ${loraLoaded ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
               >
                 <div className={`w-4 h-4 rounded-full bg-white transform transition-transform duration-200 shadow-sm ${thinking ? 'translate-x-5' : 'translate-x-0'}`} />
               </button>
             </div>
 
             {/* Shift */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Adjusts the diffusion schedule. Only affects base model.">Timestep Shift</label>
-                <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{shift.toFixed(1)}</span>
-              </div>
-              <input
-                type="range"
-                min="1"
-                max="5"
-                step="0.1"
-                value={shift}
-                onChange={(e) => setShift(Number(e.target.value))}
-                className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-              />
-              <p className="text-[10px] text-zinc-500">Adjusts sampling schedule (base models only)</p>
-            </div>
+            <EditableSlider
+              label={t('shift')}
+              value={shift}
+              min={1}
+              max={5}
+              step={0.1}
+              onChange={setShift}
+              formatDisplay={(val) => val.toFixed(1)}
+              helpText={t('timestepShiftForBase')}
+              title="Adjusts the diffusion schedule. Only affects base model."
+            />
 
             {/* Divider */}
             <div className="border-t border-zinc-200 dark:border-white/10 pt-4">
-              <p className="text-[10px] text-zinc-500 uppercase tracking-wide font-bold mb-3">Expert Controls</p>
+              <p className="text-[10px] text-zinc-500 uppercase tracking-wide font-bold mb-3">{t('expertControls')}</p>
             </div>
 
             {uploadError && (
@@ -1703,8 +2083,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <div className="flex items-center gap-2">
                 <Music2 size={16} className="text-zinc-500" />
                 <div className="flex flex-col items-start">
-                  <span title="Controls the 5Hz lyric/caption model sampling behavior.">Lyric Model Controls</span>
-                  <span className="text-[11px] text-zinc-400 dark:text-zinc-500 font-normal">Controls the LLM used for lyrics/captions</span>
+                  <span title="Controls the 5Hz lyric/caption model sampling behavior.">{t('lmParameters')}</span>
+                  <span className="text-[11px] text-zinc-400 dark:text-zinc-500 font-normal">{t('controlLyricGeneration')}</span>
                 </div>
               </div>
               <ChevronDown size={16} className={`text-zinc-500 transition-transform ${showLmParams ? 'rotate-180' : ''}`} />
@@ -1713,121 +2093,98 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {showLmParams && (
               <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
                 {/* LM Temperature */}
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Higher temperature = more random word choices.">Creativity (Temperature)</label>
-                    <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{lmTemperature.toFixed(2)}</span>
-                  </div>
-                  <input
-                    type="range"
-                    min="0"
-                    max="2"
-                    step="0.05"
-                    value={lmTemperature}
-                    onChange={(e) => setLmTemperature(Number(e.target.value))}
-                    className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                  />
-                  <p className="text-[10px] text-zinc-500">Lower = more deterministic, higher = more variety (0–2)</p>
-                </div>
+                <EditableSlider
+                  label={t('lmTemperature')}
+                  value={lmTemperature}
+                  min={0}
+                  max={2}
+                  step={0.05}
+                  onChange={(e) => setLmTemperature(Number(e.target.value))}
+                  formatDisplay={(val) => val.toFixed(2)}
+                  helpText={t('higherMoreRandom')}
+                  title="Higher temperature = more random word choices."
+                />
 
                 {/* LM CFG Scale */}
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="How strongly the lyric model follows the prompt.">Prompt Adherence (CFG Scale)</label>
-                    <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{lmCfgScale.toFixed(1)}</span>
-                  </div>
-                  <input
-                    type="range"
-                    min="1"
-                    max="3"
-                    step="0.1"
-                    value={lmCfgScale}
-                    onChange={(e) => setLmCfgScale(Number(e.target.value))}
-                    className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                  />
-                  <p className="text-[10px] text-zinc-500">Higher = follows prompt more, lower = more freedom (1–3)</p>
-                </div>
+                <EditableSlider
+                  label={t('lmCfgScale')}
+                  value={lmCfgScale}
+                  min={1}
+                  max={3}
+                  step={0.1}
+                  onChange={setLmCfgScale}
+                  formatDisplay={(val) => val.toFixed(1)}
+                  helpText={t('noCfgScale')}
+                  title="How strongly the lyric model follows the prompt."
+                />
 
                 {/* LM Top-K & Top-P */}
                 <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                      <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Restricts choices to the K most likely tokens. 0 disables.">Token Choice Limit (Top‑K)</label>
-                      <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{lmTopK}</span>
-                    </div>
-                    <input
-                      type="range"
-                      min="0"
-                      max="100"
-                      step="1"
-                      value={lmTopK}
-                      onChange={(e) => setLmTopK(Number(e.target.value))}
-                      className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                    />
-                    <p className="text-[10px] text-zinc-500">Sample only from the top K likely tokens</p>
-                  </div>
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                      <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Samples from the smallest set whose total probability is P.">Probability Mass (Top‑P)</label>
-                      <span className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded">{lmTopP.toFixed(2)}</span>
-                    </div>
-                    <input
-                      type="range"
-                      min="0"
-                      max="1"
-                      step="0.01"
-                      value={lmTopP}
-                      onChange={(e) => setLmTopP(Number(e.target.value))}
-                      className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
-                    />
-                    <p className="text-[10px] text-zinc-500">Sample from smallest set totaling P probability</p>
-                  </div>
+                  <EditableSlider
+                    label={t('topK')}
+                    value={lmTopK}
+                    min={0}
+                    max={100}
+                    step={1}
+                    onChange={setLmTopK}
+                    title="Restricts choices to the K most likely tokens. 0 disables."
+                  />
+                  <EditableSlider
+                    label={t('topP')}
+                    value={lmTopP}
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    onChange={setLmTopP}
+                    formatDisplay={(val) => val.toFixed(2)}
+                    title="Samples from the smallest set whose total probability is P."
+                  />
                 </div>
 
                 {/* LM Negative Prompt */}
                 <div className="space-y-1.5">
-                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Words or ideas to steer the lyric model away from.">Avoid These (Negative Prompt)</label>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Words or ideas to steer the lyric model away from.">{t('lmNegativePrompt')}</label>
                   <textarea
                     value={lmNegativePrompt}
                     onChange={(e) => setLmNegativePrompt(e.target.value)}
-                    placeholder="Things to avoid..."
+                    placeholder={t('thingsToAvoid')}
                     className="w-full h-16 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg p-2 text-xs text-zinc-900 dark:text-white focus:outline-none resize-none"
                   />
-                  <p className="text-[10px] text-zinc-500">Works best when CFG is above 1.0</p>
+                  <p className="text-[10px] text-zinc-500">{t('useWhenCfgScaleGreater')}</p>
                 </div>
               </div>
             )}
 
             <div className="space-y-1">
-              <h4 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide" title="Controls how much the output follows the input audio.">Source Audio</h4>
-              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">Controls how much to follow the input audio.</p>
+              <h4 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide" title="Controls how much the output follows the input audio.">{t('transform')}</h4>
+              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">{t('controlSourceAudio')}</p>
             </div>
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Advanced: precomputed audio codes for conditioning.">Audio Codes (Advanced)</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Advanced: precomputed audio codes for conditioning.">{t('audioCodes')}</label>
               <textarea
                 value={audioCodes}
                 onChange={(e) => setAudioCodes(e.target.value)}
-                placeholder="Optional audio codes payload"
+                placeholder={t('optionalAudioCodes')}
                 className="w-full h-16 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg p-2 text-xs text-zinc-900 dark:text-white focus:outline-none resize-none"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Choose text-to-music or audio-based modes.">Generation Mode</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Choose text-to-music or audio-based modes.">{t('taskType')}</label>
                 <select
                   value={taskType}
                   onChange={(e) => setTaskType(e.target.value)}
-                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                 >
-                  <option value="text2music">Text → Music</option>
-                  <option value="audio2audio">Audio → Audio</option>
-                  <option value="cover">Cover</option>
-                  <option value="repaint">Repaint</option>
+                  <option value="text2music">{t('textToMusic')}</option>
+                  <option value="audio2audio">{t('audio2audio')}</option>
+                  <option value="cover">{t('coverTask')}</option>
+                  <option value="repaint">{t('repaintTask')}</option>
                 </select>
               </div>
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="How strongly the source audio shapes the result.">Cover Influence</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="How strongly the source audio shapes the result.">{t('audioCoverStrength')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1842,7 +2199,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Start time for the region to repaint (seconds).">Repaint Start (sec)</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Start time for the region to repaint (seconds).">{t('repaintingStart')}</label>
                 <input
                   type="number"
                   step="0.1"
@@ -1852,7 +2209,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="End time for the region to repaint (seconds).">Repaint End (sec)</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="End time for the region to repaint (seconds).">{t('repaintingEnd')}</label>
                 <input
                   type="number"
                   step="0.1"
@@ -1864,7 +2221,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Additional directives to guide generation.">Extra Instructions</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Additional directives to guide generation.">{t('instruction')}</label>
               <textarea
                 value={instruction}
                 onChange={(e) => setInstruction(e.target.value)}
@@ -1873,12 +2230,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             </div>
 
             <div className="space-y-1">
-              <h4 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide" title="Controls when guidance is applied across diffusion steps.">Guidance Schedule</h4>
-              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">When to apply guidance during sampling.</p>
+              <h4 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">{t('guidance')}</h4>
+              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">{t('advancedCfgScheduling')}</p>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to start applying guidance.">Guidance Start (0–1)</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to start applying guidance.">{t('cfgIntervalStart')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1890,7 +2247,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to stop applying guidance.">Guidance End (0–1)</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to stop applying guidance.">{t('cfgIntervalEnd')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1904,19 +2261,19 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Override the default timestep schedule (advanced).">Custom Timesteps (Advanced)</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Override the default timestep schedule (advanced).">{t('customTimesteps')}</label>
               <input
                 type="text"
                 value={customTimesteps}
                 onChange={(e) => setCustomTimesteps(e.target.value)}
-                placeholder="e.g. 1,3,5,7"
+                placeholder={t('timestepsPlaceholder')}
                 className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Scales score-based guidance (advanced).">Score Weight</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Scales score-based guidance (advanced).">{t('scoreScale')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1926,7 +2283,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Bigger chunks can be faster but use more memory.">LM Batch Chunk Size (Performance)</label>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Bigger chunks can be faster but use more memory.">{t('lmBatchChunkSize')}</label>
                 <input
                   type="number"
                   min="1"
@@ -1938,23 +2295,23 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Track Name</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('trackName')}</label>
               <input
                 type="text"
                 value={trackName}
                 onChange={(e) => setTrackName(e.target.value)}
-                placeholder="Optional track name"
+                placeholder={t('optionalTrackName')}
                 className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
               />
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Complete Track Classes</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('completeTrackClasses')}</label>
               <input
                 type="text"
                 value={completeTrackClasses}
                 onChange={(e) => setCompleteTrackClasses(e.target.value)}
-                placeholder="class-a, class-b"
+                placeholder={t('trackClassesPlaceholder')}
                 className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
               />
             </div>
@@ -1965,43 +2322,43 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 title="Adaptive Dual Guidance: dynamically adjusts CFG for quality. Base model only; slower."
               >
                 <input type="checkbox" checked={useAdg} onChange={() => setUseAdg(!useAdg)} />
-                Adaptive Dual Guidance (ADG)
+                {t('useAdg')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Allow the LM to run in larger batches for speed (more VRAM).">
                 <input type="checkbox" checked={allowLmBatch} onChange={() => setAllowLmBatch(!allowLmBatch)} />
-                Allow LM Batch
+                {t('allowLmBatch')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Let the LM reason about metadata like BPM, key, duration.">
                 <input type="checkbox" checked={useCotMetas} onChange={() => setUseCotMetas(!useCotMetas)} />
-                Use CoT Metas
+                {t('useCotMetas')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Let the LM reason about the caption/style text.">
                 <input type="checkbox" checked={useCotCaption} onChange={() => setUseCotCaption(!useCotCaption)} />
-                Use CoT Caption
+                {t('useCotCaption')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Let the LM reason about language selection.">
                 <input type="checkbox" checked={useCotLanguage} onChange={() => setUseCotLanguage(!useCotLanguage)} />
-                Use CoT Language
+                {t('useCotLanguage')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Auto-generate missing fields when possible.">
                 <input type="checkbox" checked={autogen} onChange={() => setAutogen(!autogen)} />
-                Autogen
+                {t('autogen')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Include debug info for constrained decoding.">
                 <input type="checkbox" checked={constrainedDecodingDebug} onChange={() => setConstrainedDecodingDebug(!constrainedDecodingDebug)} />
-                Constrained Decoding Debug
+                {t('constrainedDecodingDebug')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Use the formatted caption produced by the AI formatter.">
                 <input type="checkbox" checked={isFormatCaption} onChange={() => setIsFormatCaption(!isFormatCaption)} />
-                Format Caption
+                {t('formatCaption')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Return scorer outputs for diagnostics.">
                 <input type="checkbox" checked={getScores} onChange={() => setGetScores(!getScores)} />
-                Get Scores
+                {t('getScores')}
               </label>
               <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Return synced lyric (LRC) output when available.">
                 <input type="checkbox" checked={getLrc} onChange={() => setGetLrc(!getLrc)} />
-                Get LRC (Lyrics)
+                {t('getLrcLyrics')}
               </label>
             </div>
           </div>
@@ -2020,12 +2377,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               <div className="flex items-start justify-between">
                 <div>
                   <h3 className="text-xl font-semibold text-zinc-900 dark:text-white">
-                    {audioModalTarget === 'reference' ? 'Reference' : 'Cover'}
+                    {audioModalTarget === 'reference' ? t('referenceModalTitle') : t('coverModalTitle')}
                   </h3>
                   <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                     {audioModalTarget === 'reference'
-                      ? 'Create songs inspired by a reference track'
-                      : 'Transform an existing track into a new version'}
+                      ? t('referenceModalDescription')
+                      : t('coverModalDescription')}
                   </p>
                 </div>
                 <button
@@ -2057,18 +2414,18 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 {isUploadingReference ? (
                   <>
                     <RefreshCw size={16} className="animate-spin" />
-                    Uploading...
+                    {t('uploadingAudio')}
                   </>
                 ) : isTranscribingReference ? (
                   <>
                     <RefreshCw size={16} className="animate-spin" />
-                    Transcribing...
+                    {t('transcribing')}
                   </>
                 ) : (
                   <>
                     <Upload size={16} />
-                    Upload audio
-                    <span className="text-xs text-zinc-400 ml-1">MP3, WAV, FLAC, M4A, MP4</span>
+                    {t('uploadAudio')}
+                    <span className="text-xs text-zinc-400 ml-1">{t('audioFormats')}</span>
                   </>
                 )}
               </button>
@@ -2078,13 +2435,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               )}
               {isTranscribingReference && (
                 <div className="mt-2 flex items-center justify-between text-xs text-zinc-400">
-                  <span>Transcribing with Whisper…</span>
+                  <span>{t('transcribingWithWhisper')}</span>
                   <button
                     type="button"
                     onClick={cancelTranscription}
                     className="text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white"
                   >
-                    Cancel
+                    {t('cancel')}
                   </button>
                 </div>
               )}
@@ -2103,7 +2460,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                         : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                     }`}
                   >
-                    Uploaded
+                    {t('uploaded')}
                   </button>
                   <button
                     type="button"
@@ -2114,7 +2471,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                         : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                     }`}
                   >
-                    Created
+                    {t('createdTab')}
                   </button>
                 </div>
               </div>
@@ -2125,13 +2482,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   isLoadingTracks ? (
                     <div className="px-5 py-8 text-center">
                       <RefreshCw size={20} className="animate-spin mx-auto text-zinc-400" />
-                      <p className="text-xs text-zinc-400 mt-2">Loading tracks...</p>
+                      <p className="text-xs text-zinc-400 mt-2">{t('loadingTracks')}</p>
                     </div>
                   ) : referenceTracks.length === 0 ? (
                     <div className="px-5 py-8 text-center">
                       <Music2 size={24} className="mx-auto text-zinc-300 dark:text-zinc-600" />
-                      <p className="text-sm text-zinc-400 mt-2">No uploads yet</p>
-                      <p className="text-xs text-zinc-400 mt-1">Upload audio files to use them as references</p>
+                      <p className="text-sm text-zinc-400 mt-2">{t('noTracksYet')}</p>
+                      <p className="text-xs text-zinc-400 mt-1">{t('uploadAudioFilesAsReferences')}</p>
                     </div>
                   ) : (
                     <div className="divide-y divide-zinc-100 dark:divide-white/5">
@@ -2210,7 +2567,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                               onClick={() => useReferenceTrack({ audio_url: track.audio_url, title: track.filename })}
                               className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-semibold hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
                             >
-                              Use
+                              {t('useTrack')}
                             </button>
                             <button
                               type="button"
@@ -2227,8 +2584,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 ) : createdTrackOptions.length === 0 ? (
                   <div className="px-5 py-8 text-center">
                     <Music2 size={24} className="mx-auto text-zinc-300 dark:text-zinc-600" />
-                    <p className="text-sm text-zinc-400 mt-2">No created songs yet</p>
-                    <p className="text-xs text-zinc-400 mt-1">Generate songs to reuse them as cover or reference</p>
+                    <p className="text-sm text-zinc-400 mt-2">{t('noCreatedSongsYet')}</p>
+                    <p className="text-xs text-zinc-400 mt-1">{t('generateSongsToReuse')}</p>
                   </div>
                 ) : (
                   <div className="divide-y divide-zinc-100 dark:divide-white/5">
@@ -2292,7 +2649,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                             onClick={() => useReferenceTrack({ audio_url: track.audio_url, title: track.title })}
                             className="px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-xs font-semibold hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
                           >
-                            Use
+                            {t('useTrack')}
                           </button>
                         </div>
                       </div>
@@ -2342,12 +2699,16 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         <button
           onClick={handleGenerate}
           className="w-full h-12 rounded-xl font-bold text-base flex items-center justify-center gap-2 transition-all transform active:scale-[0.98] bg-gradient-to-r from-orange-500 to-pink-600 text-white shadow-lg hover:brightness-110"
+          disabled={isGenerating || !isAuthenticated}
         >
           <Sparkles size={18} />
           <span>
-            {bulkCount > 1
-              ? `Create ${bulkCount} Jobs (${bulkCount * batchSize} tracks)`
-              : `Create${batchSize > 1 ? ` (${batchSize} variations)` : ''}`}
+            {isGenerating 
+              ? t('generating')
+              : bulkCount > 1
+                ? `${t('createButton')} ${bulkCount} ${t('jobs')} (${bulkCount * batchSize} ${t('variations')})`
+                : `${t('createButton')}${batchSize > 1 ? ` (${batchSize} ${t('variations')})` : ''}`
+            }
           </span>
         </button>
       </div>
diff --git a/components/EditProfileModal.tsx b/components/EditProfileModal.tsx
index 3969aac..dc5bb47 100644
--- a/components/EditProfileModal.tsx
+++ b/components/EditProfileModal.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { X, Camera, Image as ImageIcon, Upload, Loader2 } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { usersApi, UserProfile } from '../services/api';
+import { useI18n } from '../context/I18nContext';
 
 interface EditProfileModalProps {
     isOpen: boolean;
@@ -10,6 +11,7 @@ interface EditProfileModalProps {
 }
 
 export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onClose, onSaved }) => {
+    const { t } = useI18n();
     const { user, token, refreshUser, updateUsername } = useAuth();
     const [loading, setLoading] = useState(true);
     const [profile, setProfile] = useState<UserProfile | null>(null);
@@ -83,7 +85,7 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
             if (editUsername && editUsername !== profile.username) {
                 const sanitized = editUsername.trim().replace(/[^a-zA-Z0-9_-]/g, '');
                 if (sanitized.length < 2) {
-                    setUsernameError('Username must be at least 2 characters');
+                    setUsernameError(t('usernameMinLengthError'));
                     setIsSaving(false);
                     return;
                 }
@@ -92,9 +94,9 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                 } catch (err: unknown) {
                     const error = err as Error & { message?: string };
                     if (error.message?.includes('taken')) {
-                        setUsernameError('Username is already taken');
+                        setUsernameError(t('usernameTakenError'));
                     } else {
-                        setUsernameError('Failed to update username');
+                        setUsernameError(t('usernameUpdateFailedError'));
                     }
                     setIsSaving(false);
                     return;
@@ -152,27 +154,27 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
     if (!isOpen) return null;
 
     return (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
-            <div className="w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-                <div className="px-6 py-4 border-b border-zinc-800 flex items-center justify-between">
-                    <h2 className="text-xl font-bold text-white">Edit Profile</h2>
-                    <button onClick={handleClose} className="text-zinc-400 hover:text-white transition-colors">
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
+            <div className="w-full max-w-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+                <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
+                    <h2 className="text-xl font-bold text-zinc-900 dark:text-white">{t('editProfile')}</h2>
+                    <button onClick={handleClose} className="text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">
                         <X size={20} />
                     </button>
                 </div>
 
                 {loading ? (
                     <div className="p-12 flex items-center justify-center">
-                        <Loader2 size={32} className="animate-spin text-zinc-400" />
+                        <Loader2 size={32} className="animate-spin text-zinc-400 dark:text-zinc-400" />
                     </div>
                 ) : (
                     <>
                         <div className="p-6 space-y-6">
                             {/* Username Input */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-300">Username</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('usernameLabel')}</label>
                                 <div className="flex items-center gap-2">
-                                    <span className="text-zinc-500">@</span>
+                                    <span className="text-zinc-500 dark:text-zinc-500">@</span>
                                     <input
                                         type="text"
                                         value={editUsername}
@@ -180,22 +182,22 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                                             setEditUsername(e.target.value);
                                             setUsernameError('');
                                         }}
-                                        placeholder="username"
+                                        placeholder={t('usernamePlaceholder')}
                                         maxLength={50}
-                                        className="flex-1 bg-black border border-zinc-800 rounded-lg px-3 py-2 text-white placeholder-zinc-600 focus:outline-none focus:border-indigo-500 transition-colors"
+                                        className="flex-1 bg-zinc-50 dark:bg-black border border-zinc-300 dark:border-zinc-800 rounded-lg px-3 py-2 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-indigo-500 transition-colors"
                                     />
                                 </div>
                                 {usernameError && (
                                     <p className="text-sm text-red-500">{usernameError}</p>
                                 )}
-                                <p className="text-xs text-zinc-500">Letters, numbers, underscores, and hyphens only</p>
+                                <p className="text-xs text-zinc-500 dark:text-zinc-500">{t('usernameRequirements')}</p>
                             </div>
 
                             {/* Avatar Upload */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-300">Avatar Image</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('avatarImage')}</label>
                                 <div className="flex gap-4 items-center">
-                                    <div className="w-20 h-20 rounded-full bg-zinc-800 border-2 border-zinc-700 border-dashed overflow-hidden flex-shrink-0 relative">
+                                    <div className="w-20 h-20 rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden flex-shrink-0 relative">
                                         {(avatarPreview || editAvatarUrl) ? (
                                             <img
                                                 src={avatarPreview || editAvatarUrl}
@@ -203,7 +205,7 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                                                 onError={(e) => (e.currentTarget.style.display = 'none')}
                                             />
                                         ) : (
-                                            <div className="w-full h-full flex items-center justify-center text-zinc-500">
+                                            <div className="w-full h-full flex items-center justify-center text-zinc-400 dark:text-zinc-500">
                                                 <Camera size={24} />
                                             </div>
                                         )}
@@ -224,22 +226,22 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                                         <button
                                             type="button"
                                             onClick={() => avatarInputRef.current?.click()}
-                                            className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg text-sm font-medium transition-colors"
+                                            className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white rounded-lg text-sm font-medium transition-colors"
                                         >
                                             <Upload size={16} />
-                                            Upload Avatar
+                                            {t('uploadAvatar')}
                                         </button>
-                                        <p className="text-xs text-zinc-500">JPG, PNG, WebP, GIF - Max 5MB</p>
+                                        <p className="text-xs text-zinc-500 dark:text-zinc-500">{t('avatarFormats')}</p>
                                     </div>
                                 </div>
                             </div>
 
                             {/* Banner Upload */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-300">Banner Image</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bannerImage')}</label>
                                 <div
                                     onClick={() => bannerInputRef.current?.click()}
-                                    className="relative w-full h-32 rounded-lg bg-zinc-800 border-2 border-zinc-700 border-dashed overflow-hidden cursor-pointer hover:border-zinc-600 transition-colors"
+                                    className="relative w-full h-32 rounded-lg bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors"
                                 >
                                     {(bannerPreview || editBannerUrl) ? (
                                         <img
@@ -248,9 +250,9 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                                             onError={(e) => (e.currentTarget.style.display = 'none')}
                                         />
                                     ) : (
-                                        <div className="w-full h-full flex flex-col items-center justify-center text-zinc-500 gap-2">
+                                        <div className="w-full h-full flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 gap-2">
                                             <ImageIcon size={32} />
-                                            <span className="text-sm">Click to upload banner</span>
+                                            <span className="text-sm">{t('clickToUploadBanner')}</span>
                                         </div>
                                     )}
                                     {uploadingBanner && (
@@ -266,37 +268,37 @@ export const EditProfileModal: React.FC<EditProfileModalProps> = ({ isOpen, onCl
                                     onChange={handleBannerChange}
                                     className="hidden"
                                 />
-                                <p className="text-xs text-zinc-500">Recommended: 1500x500px - JPG, PNG, WebP, GIF - Max 5MB</p>
+                                <p className="text-xs text-zinc-500 dark:text-zinc-500">{t('bannerFormats')}</p>
                             </div>
 
                             {/* Bio Input */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-300">Bio</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bio')}</label>
                                 <textarea
                                     value={editBio}
                                     onChange={(e) => setEditBio(e.target.value)}
-                                    placeholder="Tell us about yourself..."
+                                    placeholder={t('bioPlaceholder')}
                                     rows={4}
-                                    className="w-full bg-black border border-zinc-800 rounded-lg px-3 py-2 text-white placeholder-zinc-600 focus:outline-none focus:border-indigo-500 transition-colors resize-none"
+                                    className="w-full bg-zinc-50 dark:bg-black border border-zinc-300 dark:border-zinc-800 rounded-lg px-3 py-2 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-indigo-500 transition-colors resize-none"
                                 />
                             </div>
                         </div>
 
-                        <div className="px-6 py-4 bg-black/20 border-t border-zinc-800 flex justify-end gap-3">
+                        <div className="px-6 py-4 bg-zinc-50 dark:bg-black/20 border-t border-zinc-200 dark:border-zinc-800 flex justify-end gap-3">
                             <button
                                 onClick={handleClose}
-                                className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white transition-colors"
+                                className="px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
                                 disabled={isSaving}
                             >
-                                Cancel
+                                {t('cancel')}
                             </button>
                             <button
                                 onClick={handleSaveProfile}
                                 disabled={isSaving || uploadingAvatar || uploadingBanner}
-                                className="px-6 py-2 bg-white text-black hover:bg-zinc-200 rounded-full text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                                className="px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black hover:bg-zinc-800 dark:hover:bg-zinc-200 rounded-full text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                             >
                                 {isSaving && <Loader2 size={16} className="animate-spin" />}
-                                {uploadingAvatar ? 'Uploading Avatar...' : uploadingBanner ? 'Uploading Banner...' : isSaving ? 'Saving...' : 'Save Changes'}
+                                {uploadingAvatar ? t('uploadingAvatar') : uploadingBanner ? t('uploadingBanner') : isSaving ? t('saving') : t('saveChanges')}
                             </button>
                         </div>
                     </>
diff --git a/components/EditableSlider.tsx b/components/EditableSlider.tsx
new file mode 100644
index 0000000..1f89f82
--- /dev/null
+++ b/components/EditableSlider.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+
+interface EditableSliderProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (value: number) => void;
+  formatDisplay?: (value: number) => string;
+  helpText?: string;
+  autoLabel?: string;
+}
+
+export const EditableSlider: React.FC<EditableSliderProps> = ({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  formatDisplay,
+  helpText,
+  title = '',
+  autoLabel = 'Auto',
+}) => {
+  const [inputValue, setInputValue] = useState(value.toString());
+  const [isEditing, setIsEditing] = useState(false);
+
+  useEffect(() => {
+    if (!isEditing) {
+      setInputValue(value.toString());
+    }
+  }, [value, isEditing]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputBlur = () => {
+    setIsEditing(false);
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.max(min, Math.min(max, numValue));
+      onChange(clampedValue);
+      setInputValue(clampedValue.toString());
+    } else {
+      setInputValue(value.toString());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleInputBlur();
+    } else if (e.key === 'Escape') {
+      setInputValue(value.toString());
+      setIsEditing(false);
+    }
+  };
+
+  const displayValue = formatDisplay ? formatDisplay(value) : (value === min && autoLabel ? autoLabel : value.toString());
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={title}>{label}</label>
+        {isEditing ? (
+          <input
+            type="number"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onKeyDown={handleInputKeyDown}
+            onFocus={() => setIsEditing(true)}
+            min={min}
+            max={max}
+            step={step}
+            autoFocus
+            className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded w-20 text-right border border-pink-500 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+        ) : (
+          <span
+            onClick={() => setIsEditing(true)}
+            className="text-xs font-mono text-zinc-900 dark:text-white bg-zinc-100 dark:bg-black/20 px-2 py-0.5 rounded cursor-pointer hover:bg-zinc-200 dark:hover:bg-black/30 transition-colors"
+          >
+            {displayValue}
+          </span>
+        )}
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-pink-500"
+      />
+      {helpText && (
+        <p className="text-[10px] text-zinc-500">{helpText}</p>
+      )}
+    </div>
+  );
+};
diff --git a/components/LibraryView.tsx b/components/LibraryView.tsx
index a1d27b3..ebdb871 100644
--- a/components/LibraryView.tsx
+++ b/components/LibraryView.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
+import { useI18n } from '../context/I18nContext';
 
 interface LibraryViewProps {
   allSongs: Song[];
@@ -46,6 +47,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
     onDeleteSong,
     onDeleteReferenceTrack,
 }) => {
+    const { t } = useI18n();
     const { user } = useAuth();
     const [activeTab, setActiveTab] = useState<'all' | 'playlists' | 'liked' | 'uploads'>('all');
     const [shareModalOpen, setShareModalOpen] = useState(false);
@@ -67,13 +69,13 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
         <>
         <div className="flex-1 bg-white dark:bg-black overflow-y-auto custom-scrollbar p-6 lg:p-10 pb-32 transition-colors duration-300">
              <div className="flex items-center justify-between mb-8">
-                <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Your Library</h1>
+                <h1 className="text-3xl font-bold text-zinc-900 dark:text-white">{t('yourLibrary')}</h1>
                 <button 
                     onClick={onCreatePlaylist}
                     className="flex items-center gap-2 bg-zinc-900 dark:bg-zinc-800 hover:bg-zinc-800 dark:hover:bg-zinc-700 text-white px-4 py-2 rounded-full font-medium transition-colors shadow-lg shadow-zinc-900/10 dark:shadow-none"
                 >
                     <Plus size={18} />
-                    <span>New Playlist</span>
+                    <span>{t('newPlaylist')}</span>
                 </button>
              </div>
 
@@ -90,14 +92,14 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                     onClick={() => setActiveTab('liked')}
                     className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'liked' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                  >
-                    Liked Songs
+                    {t('likedSongs')}
                     {activeTab === 'liked' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
                  <button 
                     onClick={() => setActiveTab('playlists')}
                     className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'playlists' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                  >
-                    Playlists
+                    {t('playlists')}
                     {activeTab === 'playlists' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
                  <button 
@@ -168,10 +170,10 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                             <Heart fill="white" size={64} className="text-white" />
                          </div>
                          <div className="mb-2">
-                             <h2 className="text-sm font-bold uppercase text-zinc-500 dark:text-white mb-2">Playlist</h2>
-                             <h1 className="text-5xl font-extrabold text-zinc-900 dark:text-white mb-4">Liked Songs</h1>
+                             <h2 className="text-sm font-bold uppercase text-zinc-500 dark:text-white mb-2">{t('playlist')}</h2>
+                             <h1 className="text-5xl font-extrabold text-zinc-900 dark:text-white mb-4">{t('likedSongs')}</h1>
                              <div className="text-sm text-zinc-500 dark:text-zinc-300 font-medium">
-                                 {likedSongs.length} songs
+                                 {likedSongs.length} {t('songs')}
                              </div>
                          </div>
                          <div className="ml-auto mb-2 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -241,7 +243,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                                  )}
                              </div>
                              <h3 className="font-bold text-zinc-900 dark:text-white truncate">{playlist.name}</h3>
-                             <p className="text-sm text-zinc-500 dark:text-zinc-400 line-clamp-2">{playlist.description || `By You`}</p>
+                             <p className="text-sm text-zinc-500 dark:text-zinc-400 line-clamp-2">{playlist.description || t('byYou')}</p>
                          </div>
                      ))}
                  </div>
diff --git a/components/MobileDrawer.tsx b/components/MobileDrawer.tsx
index 0b8bcb5..0e6a6aa 100644
--- a/components/MobileDrawer.tsx
+++ b/components/MobileDrawer.tsx
@@ -100,7 +100,7 @@ export function MobileDrawer({ isOpen, onClose, position, children, title }: Mob
 
   const content = (
     <div
-      className={`fixed inset-0 z-50 ${backdropAnimation}`}
+      className={`fixed inset-0 z-[60] ${backdropAnimation}`}
       onClick={handleBackdropClick}
       role="presentation"
     >
diff --git a/components/Player.tsx b/components/Player.tsx
index d80fb5d..fb3985c 100644
--- a/components/Player.tsx
+++ b/components/Player.tsx
@@ -3,6 +3,7 @@ import { Song } from '../types';
 import { Play, Pause, SkipBack, SkipForward, Repeat, Shuffle, Download, Heart, MoreVertical, Volume2, VolumeX, Maximize2, Repeat1, ChevronDown, ChevronUp } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { useResponsive } from '../context/ResponsiveContext';
+import { useI18n } from '../context/I18nContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
@@ -18,6 +19,9 @@ interface PlayerProps {
     onPrevious: () => void;
     volume: number;
     onVolumeChange: (val: number) => void;
+    playbackRate: number;
+    onPlaybackRateChange: (rate: number) => void;
+    audioRef: React.RefObject<HTMLAudioElement>;
     isShuffle: boolean;
     onToggleShuffle: () => void;
     repeatMode: 'none' | 'all' | 'one';
@@ -42,6 +46,9 @@ export const Player: React.FC<PlayerProps> = ({
     onPrevious,
     volume,
     onVolumeChange,
+    playbackRate,
+    onPlaybackRateChange,
+    audioRef,
     isShuffle,
     onToggleShuffle,
     repeatMode,
@@ -56,12 +63,15 @@ export const Player: React.FC<PlayerProps> = ({
 }) => {
     const { user } = useAuth();
     const { isMobile } = useResponsive();
+    const { t } = useI18n();
     const progressBarRef = useRef<HTMLDivElement>(null);
     const fullscreenProgressRef = useRef<HTMLDivElement>(null);
     const [isHoveringVolume, setIsHoveringVolume] = useState(false);
     const [showDropdown, setShowDropdown] = useState(false);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [shareModalOpen, setShareModalOpen] = useState(false);
+    const [showSpeedMenu, setShowSpeedMenu] = useState(false);
+    const speedMenuRef = useRef<HTMLDivElement>(null);
 
     // Close fullscreen on Escape key
     useEffect(() => {
@@ -75,6 +85,17 @@ export const Player: React.FC<PlayerProps> = ({
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isFullscreen]);
 
+    // Close speed menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (speedMenuRef.current && !speedMenuRef.current.contains(event.target as Node)) {
+                setShowSpeedMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
     // Show minimal player when no song is playing
     if (!currentSong) {
         return (
@@ -137,7 +158,7 @@ export const Player: React.FC<PlayerProps> = ({
                         >
                             <ChevronDown size={28} />
                         </button>
-                        <span className="text-xs text-zinc-500 dark:text-white/50 uppercase tracking-wider">Now Playing</span>
+                        <span className="text-xs text-zinc-500 dark:text-white/50 uppercase tracking-wider">{t('nowPlaying')}</span>
                         <div className="w-11" />
                     </div>
 
@@ -236,15 +257,9 @@ export const Player: React.FC<PlayerProps> = ({
                         </button>
                     </div>
 
-                    {/* Volume Control */}
-                    <div className="flex items-center gap-3 px-6 py-4">
-                        <button
-                            onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
-                            className="text-zinc-400 dark:text-white/50 tap-highlight-none"
-                        >
-                            {volume === 0 ? <VolumeX size={20} /> : <Volume2 size={20} />}
-                        </button>
-                        <div className="flex-1 h-1 bg-zinc-300 dark:bg-white/20 rounded-full relative">
+                    {/* Volume Control - Vertical */}
+                    <div className="flex flex-col items-center gap-3 px-6 py-4">
+                        <div className="relative h-32 w-8 flex items-center justify-center">
                             <input
                                 type="range"
                                 min="0"
@@ -252,13 +267,19 @@ export const Player: React.FC<PlayerProps> = ({
                                 step="0.01"
                                 value={volume}
                                 onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
-                                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
-                            />
-                            <div
-                                className="h-full bg-zinc-700 dark:bg-white/70 rounded-full"
-                                style={{ width: `${volume * 100}%` }}
+                                className="w-32 h-8 -rotate-90 origin-center appearance-none bg-transparent cursor-pointer"
+                                style={{
+                                    WebkitAppearance: 'none',
+                                    background: `linear-gradient(to right, rgb(236 72 153) 0%, rgb(236 72 153) ${volume * 100}%, rgb(228 228 231) ${volume * 100}%, rgb(228 228 231) 100%)`
+                                }}
                             />
                         </div>
+                        <button
+                            onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
+                            className="text-zinc-400 dark:text-white/50 tap-highlight-none"
+                        >
+                            {volume === 0 ? <VolumeX size={20} /> : <Volume2 size={20} />}
+                        </button>
                     </div>
 
                     {/* Extra Actions */}
@@ -271,7 +292,7 @@ export const Player: React.FC<PlayerProps> = ({
                         <button
                             onClick={handleDownload}
                             className="p-3 tap-highlight-none"
-                            title="Download Audio"
+                            title={t('downloadAudio')}
                         >
                             <Download size={20} />
                         </button>
@@ -295,7 +316,7 @@ export const Player: React.FC<PlayerProps> = ({
                                 onCreateVideo={onOpenVideo}
                                 onReusePrompt={onReusePrompt}
                                 onAddToPlaylist={onAddToPlaylist}
-                                                                onDelete={onDelete}
+                                onDelete={onDelete}
                                 onShare={() => setShareModalOpen(true)}
                             />
                         </div>
@@ -391,7 +412,7 @@ export const Player: React.FC<PlayerProps> = ({
                     >
                         <ChevronDown size={28} />
                     </button>
-                    <span className="text-sm text-zinc-500 dark:text-white/50 uppercase tracking-wider font-medium">Now Playing</span>
+                    <span className="text-sm text-zinc-500 dark:text-white/50 uppercase tracking-wider font-medium">{t('nowPlaying')}</span>
                     <div className="w-11" />
                 </div>
 
@@ -484,6 +505,34 @@ export const Player: React.FC<PlayerProps> = ({
                                 </button>
                             </div>
 
+                            {/* Playback Speed Dropdown */}
+                            <div className="relative group hidden lg:block" ref={speedMenuRef}>
+                                <button
+                                    className="px-2 py-1 text-[11px] font-mono font-bold hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors min-w-[42px] text-center"
+                                    onClick={() => setShowSpeedMenu(!showSpeedMenu)}
+                                >
+                                    {playbackRate}x
+                                </button>
+                                {showSpeedMenu && (
+                                    <div className="absolute bottom-full right-0 mb-2 bg-white dark:bg-zinc-800 rounded-lg shadow-xl border border-zinc-200 dark:border-white/10 py-1 min-w-[80px] z-50">
+                                        {[0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((rate) => (
+                                            <button
+                                                key={rate}
+                                                onClick={() => {
+                                                    onPlaybackRateChange(rate);
+                                                    setShowSpeedMenu(false);
+                                                }}
+                                                className={`w-full px-3 py-1.5 text-left text-xs font-mono hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors ${
+                                                    playbackRate === rate ? 'text-pink-600 dark:text-pink-500 font-bold' : 'text-zinc-700 dark:text-zinc-300'
+                                                }`}
+                                            >
+                                                {rate === 1.0 ? t('normalSpeed') : `${rate}x`}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+
                             {/* Volume Control */}
                             <div className="flex items-center gap-4 w-full max-w-xs">
                                 <button
@@ -506,6 +555,12 @@ export const Player: React.FC<PlayerProps> = ({
                                         className="h-full bg-zinc-700 dark:bg-white/70 rounded-full"
                                         style={{ width: `${volume * 100}%` }}
                                     />
+                                    <div
+                                        className="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 bg-zinc-700 dark:bg-white/70 rounded-full shadow pointer-events-none"
+                                        style={{
+                                            left: `clamp(0px, calc(${volume * 100}% - 7px), calc(100% - 14px))`
+                                        }}
+                                    />
                                 </div>
                             </div>
 
@@ -528,7 +583,7 @@ export const Player: React.FC<PlayerProps> = ({
                                 <button
                                     onClick={handleDownload}
                                     className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
-                                    title="Download Audio"
+                                    title={t('downloadAudio')}
                                 >
                                     <Download size={20} />
                                 </button>
@@ -582,7 +637,7 @@ export const Player: React.FC<PlayerProps> = ({
                     className="h-full bg-zinc-900 dark:bg-white relative group-hover:bg-pink-600 dark:group-hover:bg-pink-500 transition-colors"
                     style={{ width: `${progressPercent}%` }}
                 >
-                    <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-zinc-900 dark:bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-lg scale-150"></div>
+                    <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-zinc-900 dark:bg-white group-hover:bg-pink-600 dark:group-hover:bg-pink-500 rounded-full shadow-lg -mr-2 opacity-0 group-hover:opacity-100 transition-opacity" />
                 </div>
                 {/* Hit area for easier clicking */}
                 <div className="absolute top-1/2 -translate-y-1/2 w-full h-4 -z-10"></div>
@@ -658,8 +713,37 @@ export const Player: React.FC<PlayerProps> = ({
                         {formatTime(currentTime)} / {formatTime(duration || 0)}
                     </span>
 
+                    {/* Playback Speed */}
+                    <div className="relative group hidden lg:block" ref={speedMenuRef}>
+                        <button
+                            className="px-2 py-1 text-[11px] font-mono font-bold hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors min-w-[42px] text-center"
+                            onClick={() => setShowSpeedMenu(!showSpeedMenu)}
+                        >
+                            {playbackRate}x
+                        </button>
+                        {showSpeedMenu && (
+                            <div className="absolute bottom-full right-0 mb-2 bg-white dark:bg-zinc-800 rounded-lg shadow-xl border border-zinc-200 dark:border-white/10 py-1 min-w-[80px] z-50">
+                                {[0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((rate) => (
+                                    <button
+                                        key={rate}
+                                        onClick={() => {
+                                            onPlaybackRateChange(rate);
+                                            setShowSpeedMenu(false);
+                                        }}
+                                        className={`w-full px-3 py-1.5 text-left text-xs font-mono hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors ${
+                                            playbackRate === rate ? 'text-pink-600 dark:text-pink-500 font-bold' : 'text-zinc-700 dark:text-zinc-300'
+                                        }`}
+                                    >
+                                        {rate === 1.0 ? t('normalSpeed') : `${rate}x`}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Volume Control with Vertical Slider */}
                     <div
-                        className="items-center gap-2 relative group hidden md:flex"
+                        className="relative group hidden md:block"
                         onMouseEnter={() => setIsHoveringVolume(true)}
                         onMouseLeave={() => setIsHoveringVolume(false)}
                     >
@@ -670,28 +754,37 @@ export const Player: React.FC<PlayerProps> = ({
                             {volume === 0 ? <VolumeX size={18} /> : <Volume2 size={18} />}
                         </button>
 
-                        {/* Volume Slider */}
-                        <div className={`h-1.5 bg-zinc-200 dark:bg-zinc-700 rounded-full cursor-pointer overflow-hidden transition-all duration-200 ${isHoveringVolume ? 'opacity-100 w-16 lg:w-24 mx-1 lg:mx-2' : 'opacity-0 w-0 mx-0 pointer-events-none'}`}>
-                            <input
-                                type="range"
-                                min="0"
-                                max="1"
-                                step="0.01"
-                                value={volume}
-                                onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
-                                className="w-full h-full opacity-0 cursor-pointer absolute z-10"
-                            />
-                            <div
-                                className="h-full bg-zinc-900 dark:bg-white rounded-full"
-                                style={{ width: `${volume * 100}%` }}
-                            ></div>
-                        </div>
+                        {/* Vertical Volume Slider */}
+                        {isHoveringVolume && (
+                            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 pb-2">
+                                <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-xl border border-zinc-200 dark:border-white/10 p-2">
+                                    <div className="relative h-24 w-8 flex items-center justify-center">
+                                        <input
+                                            type="range"
+                                            min="0"
+                                            max="1"
+                                            step="0.01"
+                                            value={volume}
+                                            onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
+                                            className="w-24 h-8 -rotate-90 origin-center appearance-none bg-transparent cursor-pointer"
+                                            style={{
+                                                WebkitAppearance: 'none',
+                                                background: `linear-gradient(to right, rgb(236 72 153) 0%, rgb(236 72 153) ${volume * 100}%, rgb(228 228 231) ${volume * 100}%, rgb(228 228 231) 100%)`
+                                            }}
+                                        />
+                                    </div>
+                                    <div className="text-[10px] text-center font-mono text-zinc-600 dark:text-zinc-400 mt-1">
+                                        {Math.round(volume * 100)}%
+                                    </div>
+                                </div>
+                            </div>
+                        )}
                     </div>
 
                     <button
                         onClick={handleDownload}
                         className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors hidden lg:block"
-                        title="Download Audio"
+                        title={t('downloadAudio')}
                     >
                         <Download size={18} />
                     </button>
diff --git a/components/PlaylistDetail.tsx b/components/PlaylistDetail.tsx
index 176dbf1..0fee0de 100644
--- a/components/PlaylistDetail.tsx
+++ b/components/PlaylistDetail.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Song, Playlist, playlistsApi, songsApi, getAudioUrl } from '../services/api';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { ArrowLeft, Play, MoreHorizontal, Clock, Calendar, Shuffle, Trash2, Mic2, Music } from 'lucide-react';
 
 interface PlaylistDetailProps {
@@ -13,6 +14,7 @@ interface PlaylistDetailProps {
 
 export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBack, onPlaySong, onSelect, onNavigateToProfile }) => {
     const { user: currentUser, token } = useAuth();
+    const { t } = useI18n();
     const [playlist, setPlaylist] = useState<Playlist & { creator_avatar?: string } | null>(null);
     const [songs, setSongs] = useState<Song[]>([]);
     const [loading, setLoading] = useState(true);
@@ -67,7 +69,7 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
 
     const handleDeletePlaylist = async () => {
         if (!token || !playlist) return;
-        if (!confirm('Are you sure you want to delete this playlist?')) return;
+        if (!confirm(t('deletePlaylistConfirm'))) return;
         try {
             await playlistsApi.delete(playlist.id, token);
             onBack();
@@ -80,16 +82,16 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
         <div className="flex items-center justify-center h-full bg-black">
             <div className="text-zinc-400 gap-2 flex items-center">
                 <div className="w-4 h-4 border-2 border-zinc-400 border-t-transparent rounded-full animate-spin"></div>
-                Loading playlist...
+                {t('loadingPlaylist')}
             </div>
         </div>
     );
 
     if (!playlist) return (
         <div className="flex flex-col items-center justify-center h-full gap-4 bg-black">
-            <div className="text-zinc-400">Playlist not found</div>
+            <div className="text-zinc-400">{t('playlistNotFound')}</div>
             <button onClick={onBack} className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-white">
-                Go Back
+                {t('goBack')}
             </button>
         </div>
     );
@@ -124,7 +126,7 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
 
                 {/* Info */}
                 <div className="flex-1 space-y-2 md:space-y-4 text-center md:text-left">
-                    <span className="text-xs font-bold tracking-wider uppercase text-white/80">Playlist</span>
+                    <span className="text-xs font-bold tracking-wider uppercase text-white/80">{t('playlist')}</span>
                     <h1 className="text-2xl md:text-5xl lg:text-7xl font-bold text-white tracking-tight leading-none drop-shadow-lg">
                         {playlist.name}
                     </h1>
@@ -147,11 +149,11 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                             </div>
                         )}
                         <span className="w-1 h-1 rounded-full bg-white/50"></span>
-                        <span>{songs.length} songs</span>
+                        <span>{songs.length} {t('songs')}</span>
                         <span className="w-1 h-1 rounded-full bg-white/50 hidden md:block"></span>
                         <span className="text-zinc-400 hidden md:block">
                             {songs.reduce((acc, s) => acc + (s.duration ? (typeof s.duration === 'string' ? 0 : s.duration) : 0), 0) > 0
-                                ? Math.floor(songs.reduce((acc, s) => acc + (s.duration as number || 0), 0) / 60) + " min"
+                                ? Math.floor(songs.reduce((acc, s) => acc + (s.duration as number || 0), 0) / 60) + " " + t('min')
                                 : ""}
                         </span>
                     </div>
@@ -171,7 +173,7 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                     <button
                         onClick={handleDeletePlaylist}
                         className="text-zinc-400 hover:text-red-500 transition-colors p-2"
-                        title="Delete Playlist"
+                        title={t('deletePlaylist')}
                     >
                         <Trash2 size={20} />
                     </button>
@@ -180,19 +182,19 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                 <div className="flex-1"></div>
 
                 <div className="text-zinc-400 text-xs md:text-sm">
-                    {playlist.is_public ? 'Public' : 'Private'}
+                    {playlist.is_public ? t('public') : t('private')}
                 </div>
             </div>
 
             {/* Song List */}
             <div className="flex-1 overflow-y-auto bg-black/40">
-                <div className="px-2 md:px-8 py-2 md:py-4">
+                <div className="px-2 md:px-8 py-2 md:py-4 pb-24 lg:pb-32">
                     {/* Desktop Header */}
                     <div className="hidden md:grid grid-cols-[16px_4fr_3fr_2fr_minmax(120px,1fr)] gap-4 px-4 py-2 border-b border-white/10 text-sm font-medium text-zinc-400 mb-2 sticky top-0 bg-[#121212] z-10">
                         <span>#</span>
-                        <span>Title</span>
-                        <span>Artist</span>
-                        <span>Date Added</span>
+                        <span>{t('title')}</span>
+                        <span>{t('artist')}</span>
+                        <span>{t('dateAdded')}</span>
                         <span className="text-right"><Clock size={16} className="inline" /></span>
                     </div>
 
@@ -226,7 +228,7 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                                     <div className="flex flex-col truncate min-w-0">
                                         <span className="font-medium text-white truncate">{song.title}</span>
                                         <span className="text-xs text-zinc-500 group-hover:text-zinc-400 truncate">
-                                            {song.creator || 'Unknown'} <span className="md:hidden">• {song.duration ? `${Math.floor(song.duration / 60)}:${String(Math.floor(song.duration % 60)).padStart(2, '0')}` : '0:00'}</span>
+                                            {song.creator || t('unknown')} <span className="md:hidden">• {song.duration ? `${Math.floor(song.duration / 60)}:${String(Math.floor(song.duration % 60)).padStart(2, '0')}` : '0:00'}</span>
                                         </span>
                                     </div>
                                 </div>
@@ -236,12 +238,12 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                                     e.stopPropagation();
                                     song.creator && onNavigateToProfile(song.creator);
                                 }}>
-                                    {song.creator || 'Unknown'}
+                                    {song.creator || t('unknown')}
                                 </span>
 
                                 {/* Date Added - hidden on mobile */}
                                 <span className="hidden md:block">
-                                    {song.addedAt ? new Date(song.addedAt).toLocaleDateString() : 'Just now'}
+                                    {song.addedAt ? new Date(song.addedAt).toLocaleDateString() : t('justNow')}
                                 </span>
 
                                 {/* Duration + Actions */}
diff --git a/components/PlaylistModals.tsx b/components/PlaylistModals.tsx
index 1ad7871..ab17384 100644
--- a/components/PlaylistModals.tsx
+++ b/components/PlaylistModals.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { X, Plus, Music } from 'lucide-react';
 import { Playlist } from '../types';
+import { useI18n } from '../context/I18nContext';
 
 interface CreatePlaylistModalProps {
   isOpen: boolean;
@@ -9,6 +10,7 @@ interface CreatePlaylistModalProps {
 }
 
 export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({ isOpen, onClose, onCreate }) => {
+  const { t } = useI18n();
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
 
@@ -25,33 +27,33 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({ isOpen
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
       <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl w-full max-w-md p-6 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
         <div className="flex justify-between items-center mb-6">
-          <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Create Playlist</h2>
+          <h2 className="text-xl font-bold text-zinc-900 dark:text-white">{t('createPlaylist')}</h2>
           <button onClick={onClose} className="text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
             <X size={20} />
           </button>
         </div>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase mb-1">Name</label>
+            <label className="block text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase mb-1">{t('playlistName')}</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               className="w-full bg-zinc-50 dark:bg-black/50 border border-zinc-200 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 focus:ring-1 focus:ring-pink-500 placeholder-zinc-400 dark:placeholder-zinc-600"
-              placeholder="My Awesome Playlist"
+              placeholder={t('playlistNamePlaceholder')}
               autoFocus
             />
           </div>
           <div>
-            <label className="block text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase mb-1">Description</label>
+            <label className="block text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase mb-1">{t('playlistDescription')}</label>
             <textarea
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               className="w-full bg-zinc-50 dark:bg-black/50 border border-zinc-200 dark:border-white/10 rounded-lg p-3 text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 focus:ring-1 focus:ring-pink-500 resize-none h-24 placeholder-zinc-400 dark:placeholder-zinc-600"
-              placeholder="Vibes for coding..."
+              placeholder={t('descriptionPlaceholder')}
             />
           </div>
           <div className="flex justify-end gap-3 mt-6">
@@ -60,14 +62,14 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({ isOpen
               onClick={onClose}
               className="px-4 py-2 rounded-lg text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
             >
-              Cancel
+              {t('cancel')}
             </button>
             <button
               type="submit"
               disabled={!name.trim()}
               className="px-4 py-2 rounded-lg text-sm font-bold bg-zinc-900 dark:bg-white text-white dark:text-black hover:scale-105 transition-transform disabled:opacity-50 disabled:hover:scale-100 shadow-lg"
             >
-              Create
+              {t('createButton')}
             </button>
           </div>
         </form>
@@ -85,13 +87,14 @@ interface AddToPlaylistModalProps {
 }
 
 export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen, onClose, playlists, onSelect, onCreateNew }) => {
+  const { t } = useI18n();
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
       <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl w-full max-w-sm p-6 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
         <div className="flex justify-between items-center mb-4">
-          <h2 className="text-lg font-bold text-zinc-900 dark:text-white">Add to Playlist</h2>
+          <h2 className="text-lg font-bold text-zinc-900 dark:text-white">{t('addToPlaylist')}</h2>
           <button onClick={onClose} className="text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
             <X size={20} />
           </button>
@@ -106,7 +109,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen,
             <Plus size={20} />
           </div>
           <div className="text-left">
-            <div className="font-semibold text-zinc-700 dark:text-white/90 group-hover:text-zinc-900 dark:group-hover:text-white">Create New Playlist</div>
+            <div className="font-semibold text-zinc-700 dark:text-white/90 group-hover:text-zinc-900 dark:group-hover:text-white">{t('createNewPlaylist')}</div>
           </div>
         </button>
 
@@ -115,7 +118,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen,
         <div className="space-y-1 max-h-60 overflow-y-auto custom-scrollbar">
           {playlists.length === 0 ? (
             <div className="text-center py-6 text-zinc-500 text-sm italic">
-              No existing playlists.
+              {t('noExistingPlaylists')}
             </div>
           ) : (
             playlists.map(playlist => (
@@ -136,7 +139,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen,
                 </div>
                 <div className="text-left overflow-hidden">
                   <div className="font-medium text-zinc-900 dark:text-white truncate">{playlist.name}</div>
-                  <div className="text-xs text-zinc-500">{playlist.song_count || playlist.songIds?.length || 0} songs</div>
+                  <div className="text-xs text-zinc-500">{playlist.song_count || playlist.songIds?.length || 0} {t('songs')}</div>
                 </div>
               </button>
             ))
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index ed93314..e64dd87 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -3,6 +3,7 @@ import { Song } from '../types';
 import { Heart, Share2, Play, Pause, MoreHorizontal, X, Copy, Wand2, MoreVertical, Download, Repeat, Video, Music, Link as LinkIcon, Sparkles, Globe, Lock, Trash2, Edit3, Layers } from 'lucide-react';
 import { songsApi } from '../services/api';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
@@ -26,6 +27,7 @@ interface RightSidebarProps {
 
 export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpenVideo, onReuse, onSongUpdate, onNavigateToProfile, onNavigateToSong, isLiked, onToggleLike, onDelete, onAddToPlaylist, onPlay, isPlaying, currentSong }) => {
     const { token, user } = useAuth();
+    const { t } = useI18n();
     const [showMenu, setShowMenu] = useState(false);
     const [isOwner, setIsOwner] = useState(false);
     const [tagsExpanded, setTagsExpanded] = useState(false);
@@ -118,7 +120,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
         <div className="w-full h-full bg-zinc-50 dark:bg-suno-panel border-l border-zinc-200 dark:border-white/5 flex items-center justify-center text-zinc-400 dark:text-zinc-500 text-sm transition-colors duration-300">
             <div className="flex flex-col items-center gap-2">
                 <Music size={40} className="text-zinc-300 dark:text-zinc-700" />
-                <p>Select a song to view details</p>
+                <p>{t('selectSongToView')}</p>
             </div>
         </div>
     );
@@ -128,7 +130,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
 
             {/* Header */}
             <div className="h-14 flex items-center justify-between px-4 border-b border-zinc-200 dark:border-white/5 flex-shrink-0 bg-zinc-50/50 dark:bg-suno-panel/50 backdrop-blur-md z-10">
-                <span className="font-semibold text-sm text-zinc-900 dark:text-white">Song Details</span>
+                <span className="font-semibold text-sm text-zinc-900 dark:text-white">{t('songDetails')}</span>
                 <button
                     onClick={onClose}
                     className="p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded-full text-zinc-500 dark:text-zinc-400 transition-colors"
@@ -138,7 +140,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
             </div>
 
             <div className="flex-1 overflow-y-auto custom-scrollbar">
-                <div className="p-5 space-y-6">
+                <div className="p-5 pb-24 lg:pb-32 space-y-6">
 
                     {/* Cover Art */}
                     <div
@@ -217,14 +219,14 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                                 disabled={isSavingTitle}
                                                 className="px-3 py-1.5 rounded-md text-xs font-semibold bg-pink-600 text-white hover:bg-pink-700 disabled:opacity-60"
                                             >
-                                                {isSavingTitle ? 'Saving...' : 'Save'}
+                                                {isSavingTitle ? t('saving') : t('save')}
                                             </button>
                                             <button
                                                 onClick={cancelTitleEdit}
                                                 disabled={isSavingTitle}
                                                 className="px-3 py-1.5 rounded-md text-xs font-semibold bg-zinc-200 text-zinc-700 hover:bg-zinc-300 dark:bg-white/10 dark:text-zinc-200 dark:hover:bg-white/20 disabled:opacity-60"
                                             >
-                                                Cancel
+                                                {t('cancel')}
                                             </button>
                                             {titleError && (
                                                 <span className="text-xs text-red-500">{titleError}</span>
@@ -278,9 +280,9 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                     onClick={() => song.creator && onNavigateToProfile?.(song.creator)}
                                     className="text-sm font-semibold text-zinc-900 dark:text-white hover:underline cursor-pointer"
                                 >
-                                    {song.creator || 'Anonymous'}
+                                    {song.creator || t('anonymous')}
                                 </span>
-                                <span className="text-xs text-zinc-500 dark:text-zinc-400">Created {new Date(song.createdAt).toLocaleDateString()}</span>
+                                <p className="text-xs text-zinc-500">{t('created')} {new Date(song.createdAt).toLocaleDateString()}</p>
                             </div>
                         </div>
                     </div>
@@ -289,7 +291,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                     <div className="flex items-center justify-between px-3 py-2.5 bg-zinc-200/80 dark:bg-black/40 backdrop-blur-sm rounded-2xl border border-zinc-300/50 dark:border-white/5">
                         <button
                             onClick={onOpenVideo}
-                            title="Create Video"
+                            title={t('createVideo')}
                             className="p-3 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-300/50 dark:hover:bg-white/10 rounded-xl transition-all duration-200"
                         >
                             <Video size={18} strokeWidth={1.5} />
@@ -300,14 +302,14 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                 const audioUrl = song.audioUrl.startsWith('http') ? song.audioUrl : `${window.location.origin}${song.audioUrl}`;
                                 window.open(`/editor?audioUrl=${encodeURIComponent(audioUrl)}`, '_blank');
                             }}
-                            title="Open in Editor"
+                            title={t('openInEditor')}
                             className="p-3 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-300/50 dark:hover:bg-white/10 rounded-xl transition-all duration-200"
                         >
                             <Edit3 size={18} strokeWidth={1.5} />
                         </button>
                         <button
                             onClick={() => onReuse && onReuse(song)}
-                            title="Reuse Prompt"
+                            title={t('reusePrompt')}
                             className="p-3 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-300/50 dark:hover:bg-white/10 rounded-xl transition-all duration-200"
                         >
                             <Repeat size={18} strokeWidth={1.5} />
@@ -321,7 +323,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                 const audioUrl = song.audioUrl.startsWith('http') ? song.audioUrl : `${baseUrl}${song.audioUrl}`;
                                 window.open(`${baseUrl}/demucs-web/?audioUrl=${encodeURIComponent(audioUrl)}`, '_blank');
                             }}
-                            title="Extract Stems"
+                            title={t('extractStems')}
                             className="p-3 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-300/50 dark:hover:bg-white/10 rounded-xl transition-all duration-200"
                         >
                             <Layers size={18} strokeWidth={1.5} />
@@ -342,7 +344,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                         <div className="flex items-center gap-2">
                             <button
                                 className="p-2 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
-                                title="Download Audio"
+                                title={t('downloadAudio')}
                                 onClick={async () => {
                                     if (!song.audioUrl) return;
                                     try {
@@ -454,21 +456,26 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                     {/* Tags / Style */}
                     <div className="space-y-2">
                         <div className="flex items-center justify-between">
-                            <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-wider">Style & Tags</h3>
+                            <h2 className="text-sm font-bold text-zinc-900 dark:text-white uppercase tracking-wide">{t('songDetails')}</h2>
                             <button
-                                onClick={(e) => {
+                                onClick={async (e) => {
                                     e.stopPropagation();
-                                    const allTags = song.tags && song.tags.length > 0
-                                        ? song.tags.join(', ')
-                                        : song.style;
-                                    navigator.clipboard.writeText(allTags);
-                                    setCopiedStyle(true);
-                                    setTimeout(() => setCopiedStyle(false), 2000);
+                                    try {
+                                        const allTags = Array.isArray(song.tags) && song.tags.length > 0
+                                            ? song.tags.join(', ')
+                                            : (song.style ?? '');
+                                        if (!allTags) return;
+                                        await navigator.clipboard.writeText(allTags);
+                                        setCopiedStyle(true);
+                                        setTimeout(() => setCopiedStyle(false), 2000);
+                                    } catch (error) {
+                                        console.error('Failed to copy style tags:', error);
+                                    }
                                 }}
-                                className={`flex items-center gap-1 text-[10px] font-medium transition-colors ${copiedStyle ? 'text-green-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
-                                title="Copy all tags"
+                                className={`relative z-10 flex items-center gap-1 text-[10px] font-medium transition-colors cursor-pointer ${copiedStyle ? 'text-green-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                                title={t('copyAllTags')}
                             >
-                                <Copy size={12} /> {copiedStyle ? 'Copied!' : 'Copy'}
+                                <Copy size={12} /> {copiedStyle ? t('copied') : t('copy')}
                             </button>
                         </div>
                         <div
@@ -489,8 +496,8 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                 ))
                             )}
                             {!tagsExpanded && (
-                                <span className="absolute right-0 top-0 px-2 py-0.5 bg-zinc-200 dark:bg-zinc-700 rounded text-[11px] font-medium text-zinc-600 dark:text-zinc-300">
-                                    +more
+                                <span className="absolute right-0 top-0 px-2 py-0.5 bg-zinc-200 dark:bg-zinc-700 rounded text-[11px] font-medium text-zinc-600 dark:text-zinc-300 pointer-events-none">
+                                    +{t('more')}
                                 </span>
                             )}
                         </div>
@@ -499,18 +506,23 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                     {/* Lyrics Section */}
                     <div className="bg-white dark:bg-black/20 rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
                         <div className="px-4 py-3 border-b border-zinc-100 dark:border-white/5 flex items-center justify-between bg-zinc-50 dark:bg-white/5">
-                            <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Lyrics</h3>
+                            <h3 className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2 flex items-center justify-between">{t('lyricsSection')}</h3>
                             <button
-                                onClick={() => {
-                                    if (song.lyrics) {
-                                        navigator.clipboard.writeText(song.lyrics);
-                                        setCopiedLyrics(true);
-                                        setTimeout(() => setCopiedLyrics(false), 2000);
+                                onClick={async (e) => {
+                                    e.stopPropagation();
+                                    try {
+                                        if (song.lyrics) {
+                                            await navigator.clipboard.writeText(song.lyrics);
+                                            setCopiedLyrics(true);
+                                            setTimeout(() => setCopiedLyrics(false), 2000);
+                                        }
+                                    } catch (error) {
+                                        console.error('Failed to copy lyrics:', error);
                                     }
                                 }}
-                                className={`flex items-center gap-1 text-[10px] font-medium transition-colors ${copiedLyrics ? 'text-green-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                                className={`flex items-center gap-1 text-[10px] font-medium transition-colors cursor-pointer ${copiedLyrics ? 'text-green-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
                             >
-                                <Copy size={12} /> {copiedLyrics ? 'Copied!' : 'Copy'}
+                                <Copy size={12} /> {copiedLyrics ? t('copied') : t('copy')}
                             </button>
                         </div>
                         <div className="p-4 max-h-[300px] overflow-y-auto custom-scrollbar">
diff --git a/components/SearchPage.tsx b/components/SearchPage.tsx
index 6456825..65f07ac 100644
--- a/components/SearchPage.tsx
+++ b/components/SearchPage.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Search, Play, Pause, Heart, ChevronRight, ChevronLeft, Copy, Check, X, Loader2 } from 'lucide-react';
 import { Song, Playlist } from '../types';
 import { songsApi, usersApi, playlistsApi, searchApi, UserProfile, getAudioUrl } from '../services/api';
+import { useI18n } from '../context/I18nContext';
+import { GENRE_KEYS } from '../data/genres';
 
 interface SearchPageProps {
   onPlaySong?: (song: Song, list?: Song[]) => void;
@@ -12,15 +14,6 @@ interface SearchPageProps {
   onNavigateToPlaylist?: (playlistId: string) => void;
 }
 
-const GENRES = [
-  'Pop', 'Rock', 'Electronic', 'Hip Hop', 'Country', 'Latin', 'Heavy Metal', 'Disco',
-  'K-Pop', 'EDM', 'R&B', 'Indie', 'Folk', 'Funk', 'Jazz', 'Alternative Pop',
-  'House', 'Afrobeats', 'Reggaeton', 'Rap', 'Blues', 'Gospel', 'Reggae',
-  'Synthwave', 'J-Pop', 'Punk', 'Soul', 'Techno', 'Classical', 'Bossa Nova',
-  'Ska', 'Bluegrass', 'Indie Surf', 'Lo-Fi Beats', 'Trap', 'Grunge', 'Chillhop',
-  'New Wave', 'Drum And Bass', 'Acoustic Cover', 'Cinematic Dubstep', 'Modern Bollywood',
-  'Opera', 'Ambient', 'Focus', 'A Capella', 'Meditation', 'Sleep'
-];
 
 const MAX_RESULTS = 20;
 
@@ -36,6 +29,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
   onNavigateToSong,
   onNavigateToPlaylist,
 }) => {
+  const { t } = useI18n();
   const [searchQuery, setSearchQuery] = useState('');
   const [featuredSongs, setFeaturedSongs] = useState<ExtendedSong[]>([]);
   const [featuredCreators, setFeaturedCreators] = useState<Array<UserProfile & { song_count?: number }>>([]);
@@ -203,14 +197,14 @@ export const SearchPage: React.FC<SearchPageProps> = ({
 
   return (
     <div className="flex-1 bg-zinc-50 dark:bg-[#0a0a0a] h-full overflow-y-auto custom-scrollbar">
-      <div className="max-w-[1400px] mx-auto px-6 py-6">
+      <div className="max-w-[1400px] mx-auto px-6 py-6 pb-24 lg:pb-32">
         {/* Search Input */}
         <div className="mb-8">
           <div className="relative max-w-3xl">
             <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400" size={20} />
             <input
               type="text"
-              placeholder="Search for songs, playlists, creators, or genres"
+              placeholder={t('searchSongsPlaceholder')}
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
               className="w-full h-11 pl-12 pr-12 bg-white dark:bg-zinc-900/80 border border-zinc-200 dark:border-white/10 rounded-full text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 transition-all"
@@ -232,7 +226,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
         <section className="mb-10">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-bold text-zinc-900 dark:text-white">
-              {isSearching ? `Songs matching "${searchQuery}"` : 'Featured Songs'}
+              {isSearching ? `${t('songsMatching')} "${searchQuery}"` : t('featuredSongs')}
               {isSearching && displaySongs.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displaySongs.length})</span>
               )}
@@ -278,7 +272,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
             </div>
           ) : isSearching ? (
             <div className="text-center py-8 text-zinc-500 text-sm">
-              No songs found matching "{searchQuery}"
+              {t('noSongsFound')} "{searchQuery}"
             </div>
           ) : null}
         </section>
@@ -287,7 +281,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
         <section className="mb-10">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-bold text-zinc-900 dark:text-white">
-              {isSearching ? `Creators matching "${searchQuery}"` : 'Featured Creators'}
+              {isSearching ? `${t('creatorsMatching')} "${searchQuery}"` : t('featuredCreators')}
               {isSearching && displayCreators.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displayCreators.length})</span>
               )}
@@ -337,7 +331,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
             </div>
           ) : (
             <div className="text-center py-8 text-zinc-500 text-sm">
-              {isSearching ? `No creators found matching "${searchQuery}"` : 'No creators yet. Be the first to share your music!'}
+              {isSearching ? `${t('noCreatorsFound')} "${searchQuery}"` : t('noCreatorsYet')}
             </div>
           )}
         </section>
@@ -346,7 +340,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
         <section className="mb-10">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-bold text-zinc-900 dark:text-white">
-              {isSearching ? `Playlists matching "${searchQuery}"` : 'Featured Playlists'}
+              {isSearching ? `${t('playlistsMatching')} "${searchQuery}"` : t('featuredPlaylists')}
               {isSearching && displayPlaylists.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displayPlaylists.length})</span>
               )}
@@ -393,39 +387,43 @@ export const SearchPage: React.FC<SearchPageProps> = ({
                   playlist={playlist}
                   onNavigateToPlaylist={onNavigateToPlaylist}
                   onNavigateToProfile={onNavigateToProfile}
+                  t={t}
                 />
               ))}
             </div>
           ) : (
             <div className="text-center py-8 text-zinc-500 text-sm">
-              {isSearching ? `No playlists found matching "${searchQuery}"` : 'No public playlists yet. Create one and share your favorites!'}
+              {isSearching ? `${t('noPlaylistsFound')} "${searchQuery}"` : t('noPlaylistsYet')}
             </div>
           )}
         </section>
 
         {/* Genres */}
         <section className="mb-10">
-          <h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">Genres</h2>
+          <h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">{t('genres')}</h2>
           <div className="flex flex-wrap gap-2">
-            {GENRES.map((genre) => (
-              <button
-                key={genre}
-                onClick={() => handleGenreClick(genre)}
-                className={`px-3 py-1.5 border rounded-full text-sm transition-all duration-200 group flex items-center gap-1.5 ${
-                  searchQuery === genre
-                    ? 'bg-pink-500 border-pink-500 text-white'
-                    : 'bg-zinc-100 dark:bg-zinc-800/60 border-zinc-200 dark:border-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700/60 hover:border-pink-500/30 hover:text-pink-600 dark:hover:text-pink-400'
-                }`}
-              >
-                {genre}
-                <Copy
-                  size={12}
-                  className={`opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer ${searchQuery === genre ? 'text-white/70' : ''}`}
-                  onClick={(e) => { e.stopPropagation(); handleCopyTag(genre); }}
-                />
-                {copiedTag === genre && <Check size={12} className="text-green-500" />}
-              </button>
-            ))}
+            {GENRE_KEYS.map((genreKey) => {
+              const genreLabel = t(genreKey);
+              return (
+                <button
+                  key={genreKey}
+                  onClick={() => handleGenreClick(genreLabel)}
+                  className={`px-3 py-1.5 border rounded-full text-sm transition-all duration-200 group flex items-center gap-1.5 ${
+                    searchQuery === genreLabel
+                      ? 'bg-pink-500 border-pink-500 text-white'
+                      : 'bg-zinc-100 dark:bg-zinc-800/60 border-zinc-200 dark:border-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700/60 hover:border-pink-500/30 hover:text-pink-600 dark:hover:text-pink-400'
+                  }`}
+                >
+                  {genreLabel}
+                  <Copy
+                    size={12}
+                    className={`opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer ${searchQuery === genreLabel ? 'text-white/70' : ''}`}
+                    onClick={(e) => { e.stopPropagation(); handleCopyTag(genreLabel); }}
+                  />
+                  {copiedTag === genreLabel && <Check size={12} className="text-green-500" />}
+                </button>
+              );
+            })}
           </div>
         </section>
       </div>
@@ -562,12 +560,14 @@ interface PlaylistCardProps {
   playlist: Playlist & { creator?: string; creator_avatar?: string; song_count?: number };
   onNavigateToPlaylist?: (playlistId: string) => void;
   onNavigateToProfile?: (username: string) => void;
+  t: (key: string) => string;
 }
 
 const PlaylistCard: React.FC<PlaylistCardProps> = ({
   playlist,
   onNavigateToPlaylist,
   onNavigateToProfile,
+  t,
 }) => {
   return (
     <div
@@ -585,7 +585,7 @@ const PlaylistCard: React.FC<PlaylistCardProps> = ({
       <div className="font-semibold text-zinc-900 dark:text-white text-sm truncate group-hover:text-pink-500 transition-colors">
         {playlist.name}
       </div>
-      <div className="text-[11px] text-zinc-500 mb-1">{playlist.song_count || 0} songs</div>
+      <div className="text-[11px] text-zinc-500 mb-1">{playlist.song_count || 0} {t('songs')}</div>
       {playlist.creator && (
         <div
           className="flex items-center gap-1.5 cursor-pointer"
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 0f61b8c..e884e1d 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink, Github } from 'lucide-react';
+import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink, Globe, ChevronDown, Github } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { EditProfileModal } from './EditProfileModal';
 
 interface SettingsModalProps {
@@ -13,6 +14,7 @@ interface SettingsModalProps {
 
 export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, theme, onToggleTheme, onNavigateToProfile }) => {
     const { user } = useAuth();
+    const { t, language, setLanguage } = useI18n();
     const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
 
     if (!isOpen || !user) {
@@ -29,14 +31,14 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
     }
 
     return (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" onClick={onClose}>
+        <div className="fixed inset-0 bg-black/50 z-[60] flex items-center justify-center p-4" onClick={onClose}>
             <div
                 className="bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
                 onClick={(e) => e.stopPropagation()}
             >
                 {/* Header */}
                 <div className="flex items-center justify-between p-6 border-b border-zinc-200 dark:border-white/5">
-                    <h2 className="text-2xl font-bold text-zinc-900 dark:text-white">Settings</h2>
+                    <h2 className="text-2xl font-bold text-zinc-900 dark:text-white">{t('settings')}</h2>
                     <button
                         onClick={onClose}
                         className="p-2 hover:bg-zinc-100 dark:hover:bg-white/5 rounded-full transition-colors"
@@ -59,7 +61,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                             <div className="flex-1">
                                 <h3 className="text-xl font-bold text-zinc-900 dark:text-white">@{user.username}</h3>
                                 <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">
-                                    Member since {new Date(user.createdAt).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+                                    {t('memberSince')} {new Date(user.createdAt).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}
                                 </p>
                             </div>
                             <div className="flex gap-2">
@@ -71,7 +73,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                                     className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors"
                                 >
                                     <Edit3 size={16} />
-                                    Edit Profile
+                                    {t('editProfile')}
                                 </button>
                                 <button
                                     onClick={() => {
@@ -81,7 +83,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                                     className="flex items-center gap-2 px-4 py-2 bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white rounded-lg text-sm font-medium hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors"
                                 >
                                     <ExternalLink size={16} />
-                                    View Profile
+                                    {t('viewProfile')}
                                 </button>
                             </div>
                         </div>
@@ -91,21 +93,47 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                     <div className="space-y-4">
                         <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
                             <UserIcon size={20} />
-                            <h3 className="font-semibold">Account</h3>
+                            <h3 className="font-semibold">{t('account')}</h3>
                         </div>
                         <div className="pl-7 space-y-3">
                             <div>
-                                <label className="text-sm text-zinc-500 dark:text-zinc-400">Username</label>
+                                <label className="text-sm text-zinc-500 dark:text-zinc-400">{t('username')}</label>
                                 <p className="text-zinc-900 dark:text-white font-medium">@{user.username}</p>
                             </div>
                         </div>
                     </div>
 
+                    {/* Language Section */}
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
+                            <Globe size={20} />
+                            <h3 className="font-semibold">{t('language')}</h3>
+                        </div>
+                        <div className="pl-7 space-y-3">
+                            <div className="relative">
+                                <select
+                                    value={language}
+                                    onChange={(e) => setLanguage(e.target.value as 'en' | 'zh' | 'ja' | 'ko')}
+                                    className="w-full appearance-none py-3 px-4 pr-10 rounded-lg border-2 border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white font-medium transition-colors hover:border-zinc-400 dark:hover:border-zinc-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-500 cursor-pointer"
+                                >
+                                    <option value="en">{t('english')}</option>
+                                    <option value="zh">{t('chinese')}</option>
+                                    <option value="ja">{t('japaneseLanguage')}</option>
+                                    <option value="ko">{t('koreanLanguage')}</option>
+                                </select>
+                                <ChevronDown
+                                    size={20}
+                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
                     {/* Theme Section */}
                     <div className="space-y-4">
                         <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
                             <Palette size={20} />
-                            <h3 className="font-semibold">Appearance</h3>
+                            <h3 className="font-semibold">{t('appearance')}</h3>
                         </div>
                         <div className="pl-7 space-y-3">
                             <div className="flex gap-3">
@@ -116,7 +144,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                                             : 'border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-600'
                                         }`}
                                 >
-                                    Light
+                                    {t('light')}
                                 </button>
                                 <button
                                     onClick={theme === 'light' ? onToggleTheme : undefined}
@@ -125,7 +153,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                                             : 'border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-600'
                                         }`}
                                 >
-                                    Dark
+                                    {t('dark')}
                                 </button>
                             </div>
                         </div>
@@ -135,41 +163,70 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                     <div className="space-y-4">
                         <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
                             <Info size={20} />
-                            <h3 className="font-semibold">About</h3>
+                            <h3 className="font-semibold">{t('about')}</h3>
                         </div>
                         <div className="pl-7 space-y-3 text-sm text-zinc-600 dark:text-zinc-400">
-                            <p>Version 1.0.0</p>
-                            <p>ACE-Step UI - Local AI Music Generator</p>
+                            <p>{t('version')} 2.0.0</p>
+                            <p>ACE-Step UI - {t('localAIMusicGenerator')}</p>
                             <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-2">
-                                Powered by ACE-Step 1.5. Open source and free to use.
+                                {t('poweredBy')}
                             </p>
-                            <div className="pt-3 border-t border-zinc-200 dark:border-zinc-700/50 mt-4">
-                                <p className="text-zinc-900 dark:text-white font-medium mb-3">Created by Ambsd</p>
-                                <div className="flex flex-wrap gap-2">
-                                    <a
-                                        href="https://x.com/AmbsdOP"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
-                                    >
-                                        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-                                        </svg>
-                                        Follow @AmbsdOP
-                                    </a>
-                                    <a
-                                        href="https://github.com/fspecii/ace-step-ui"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800 dark:bg-zinc-700 text-white rounded-lg text-sm font-medium hover:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors"
-                                    >
-                                        <Github size={16} />
-                                        GitHub Repo
-                                    </a>
+                            <div className="pt-3 border-t border-zinc-200 dark:border-zinc-700/50 mt-4 space-y-4">
+                                <div>
+                                    <p className="text-zinc-900 dark:text-white font-medium mb-2">{t('createdBy')}</p>
+                                    <div className="flex flex-wrap gap-2">
+                                        <a
+                                            href="https://x.com/AmbsdOP"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
+                                        >
+                                            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                                            </svg>
+                                            {t('follow')} @AmbsdOP
+                                        </a>
+                                        <a
+                                            href="https://github.com/fspecii/ace-step-ui"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800 dark:bg-zinc-700 text-white rounded-lg text-sm font-medium hover:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors"
+                                        >
+                                            <Github size={16} />
+                                            GitHub Repo
+                                        </a>
+                                    </div>
+                                    <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-2">
+                                        Report issues or request features on GitHub
+                                    </p>
+                                </div>
+                                <div>
+                                    <p className="text-zinc-900 dark:text-white font-medium mb-2">{t('localizedBy')}</p>
+                                    <div className="flex flex-wrap gap-2">
+                                        <a
+                                            href="https://x.com/bdsqlsz"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
+                                        >
+                                            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                                            </svg>
+                                            {t('follow')} @bdsqlsz
+                                        </a>
+                                        <a
+                                            href="https://space.bilibili.com/219296"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="inline-flex items-center gap-2 px-4 py-2 bg-[#00A1D6] text-white rounded-lg text-sm font-medium hover:bg-[#0090C0] transition-colors"
+                                        >
+                                            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                                                <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
+                                            </svg>
+                                            {t('follow')} 青龙圣者
+                                        </a>
+                                    </div>
                                 </div>
-                                <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-3">
-                                    Report issues or request features on GitHub
-                                </p>
                             </div>
                         </div>
                     </div>
@@ -181,7 +238,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                         onClick={onClose}
                         className="px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black font-semibold rounded-lg hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
                     >
-                        Done
+                        {t('done')}
                     </button>
                 </div>
             </div>
diff --git a/components/ShareModal.tsx b/components/ShareModal.tsx
index 13ca680..f1e92bc 100644
--- a/components/ShareModal.tsx
+++ b/components/ShareModal.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { X, Link, Check } from 'lucide-react';
 import { Song } from '../types';
+import { useI18n } from '../context/I18nContext';
 
 interface ShareModalProps {
   isOpen: boolean;
@@ -53,6 +54,7 @@ const EmailIcon = () => (
 );
 
 export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song }) => {
+  const { t } = useI18n();
   const [copied, setCopied] = useState(false);
 
   if (!isOpen) return null;
@@ -98,8 +100,13 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
   };
 
   const handleShareEmail = () => {
-    const subject = encodeURIComponent(`🎵 Check out this AI song: ${song.title}`);
-    const body = encodeURIComponent(`Hey!\n\nI created this AI-generated song and thought you'd love it:\n\n"${song.title}" by ${song.creator || 'Unknown Artist'}\n${song.style ? `Genre: ${song.style}` : ''}\n\n🎧 Listen here: ${shareUrl}\n\n🤖 Made with ACE-Step UI - free and open source local AI music generation!`);
+    const subject = encodeURIComponent(`🎵 ${t('emailSubject')}: ${song.title}`);
+    const bodyText = t('emailBody')
+      .replace('{title}', song.title)
+      .replace('{creator}', song.creator || t('unknown'))
+      .replace('{style}', song.style ? `${t('genres')}: ${song.style}` : '')
+      .replace('{url}', shareUrl);
+    const body = encodeURIComponent(bodyText);
     window.location.href = `mailto:?subject=${subject}&body=${body}`;
   };
 
@@ -127,7 +134,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
     >
       <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl w-full max-w-sm p-6 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
         <div className="flex justify-between items-center mb-6">
-          <h2 className="text-lg font-bold text-zinc-900 dark:text-white">Share Song</h2>
+          <h2 className="text-lg font-bold text-zinc-900 dark:text-white">{t('shareSong')}</h2>
           <button onClick={onClose} className="text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
             <X size={20} />
           </button>
@@ -149,7 +156,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareX}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-black text-white hover:bg-zinc-800 transition-colors"
-            title="Share on X"
+            title={t('shareOnX')}
           >
             <XIcon />
             <span className="text-xs font-medium">X</span>
@@ -158,7 +165,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareFacebook}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-[#1877F2] text-white hover:bg-[#166FE5] transition-colors"
-            title="Share on Facebook"
+            title={t('shareOnFacebook')}
           >
             <FacebookIcon />
             <span className="text-xs font-medium">Facebook</span>
@@ -167,7 +174,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareWhatsApp}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-[#25D366] text-white hover:bg-[#22C55E] transition-colors"
-            title="Share on WhatsApp"
+            title={t('shareOnWhatsApp')}
           >
             <WhatsAppIcon />
             <span className="text-xs font-medium">WhatsApp</span>
@@ -176,7 +183,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareTelegram}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-[#0088CC] text-white hover:bg-[#0077B5] transition-colors"
-            title="Share on Telegram"
+            title={t('shareOnTelegram')}
           >
             <TelegramIcon />
             <span className="text-xs font-medium">Telegram</span>
@@ -185,7 +192,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareReddit}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-[#FF4500] text-white hover:bg-[#FF5722] transition-colors"
-            title="Share on Reddit"
+            title={t('shareOnReddit')}
           >
             <RedditIcon />
             <span className="text-xs font-medium">Reddit</span>
@@ -194,7 +201,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareLinkedIn}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-[#0A66C2] text-white hover:bg-[#004182] transition-colors"
-            title="Share on LinkedIn"
+            title={t('shareOnLinkedIn')}
           >
             <LinkedInIcon />
             <span className="text-xs font-medium">LinkedIn</span>
@@ -203,7 +210,7 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleShareEmail}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg bg-zinc-600 dark:bg-zinc-700 text-white hover:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors"
-            title="Share via Email"
+            title={t('shareViaEmail')}
           >
             <EmailIcon />
             <span className="text-xs font-medium">Email</span>
@@ -212,10 +219,10 @@ export const ShareModal: React.FC<ShareModalProps> = ({ isOpen, onClose, song })
           <button
             onClick={handleCopyLink}
             className="flex flex-col items-center gap-1.5 p-3 rounded-lg border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors"
-            title="Copy Link"
+            title={t('copyLink')}
           >
             {copied ? <Check size={20} className="text-green-500" /> : <Link size={20} />}
-            <span className="text-xs font-medium">{copied ? 'Copied!' : 'Copy'}</span>
+            <span className="text-xs font-medium">{copied ? t('copied') : t('copy')}</span>
           </button>
         </div>
       </div>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 82422c4..a15eb70 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Library, Disc, Search, User, LogIn, LogOut, Sun, Moon } from 'lucide-react';
+import { Library, Disc, Search, User, LogIn, LogOut, Sun, Moon, GraduationCap } from 'lucide-react';
 import { View } from '../types';
+import { useI18n } from '../context/I18nContext';
 
 interface SidebarProps {
   currentView: View;
@@ -11,6 +12,8 @@ interface SidebarProps {
   onLogin?: () => void;
   onLogout?: () => void;
   onOpenSettings?: () => void;
+  isOpen?: boolean;
+  onToggle?: () => void;
 }
 
 export const Sidebar: React.FC<SidebarProps> = ({
@@ -22,84 +25,169 @@ export const Sidebar: React.FC<SidebarProps> = ({
   onLogin,
   onLogout,
   onOpenSettings,
+  isOpen = true,
+  onToggle,
 }) => {
+  const { t } = useI18n();
+
   return (
-    <div className="flex flex-col h-full bg-white dark:bg-suno-sidebar border-r border-zinc-200 dark:border-white/5 flex-shrink-0 w-[72px] items-center py-4 z-30 transition-colors duration-300 overflow-y-auto scrollbar-hide">
-      {/* Logo */}
-      <div
-        className="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center mb-8 cursor-pointer shadow-lg hover:scale-105 transition-transform"
-        onClick={() => onNavigate('create')}
-        title="ACE-Step UI"
-      >
-        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white">
-          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-          <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-          <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
+    <>
+      {/* Backdrop for mobile - only when expanded */}
+      {isOpen && onToggle && (
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden"
+          onClick={onToggle}
+        />
+      )}
+
+      {/* Sidebar */}
+      <div className={`
+        flex flex-col h-full bg-white dark:bg-suno-sidebar border-r border-zinc-200 dark:border-white/5 flex-shrink-0 py-4 overflow-y-auto scrollbar-hide transition-all duration-300
+        fixed left-0 top-0 z-50 md:relative
+        ${isOpen ? 'w-[200px]' : 'w-[72px]'}
+      `}>
+      {/* Logo & Brand */}
+      <div className="px-3 mb-8 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div
+            className="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center cursor-pointer shadow-lg hover:scale-105 transition-transform flex-shrink-0"
+            onClick={() => onNavigate('create')}
+            title={t('aceStepUI')}
+          >
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white">
+              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
+          {isOpen && (
+            <span className="text-lg font-bold text-zinc-900 dark:text-white whitespace-nowrap">ACE Step</span>
+          )}
+        </div>
+        {/* Collapse/Expand Button */}
+        {onToggle && (
+          <button
+            onClick={onToggle}
+            className="w-8 h-8 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 flex items-center justify-center text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white transition-colors flex-shrink-0"
+            title={isOpen ? t('collapseSidebar') : t('expandSidebar')}
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {isOpen ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              )}
+            </svg>
+          </button>
+        )}
       </div>
 
-      <nav className="flex-1 flex flex-col gap-4 w-full px-3">
+      <nav className="flex-1 flex flex-col gap-2 w-full px-3">
         <NavItem
-          icon={<Disc size={24} />}
-          label="Create"
+          icon={<Disc size={20} />}
+          label={t('create')}
           active={currentView === 'create'}
           onClick={() => onNavigate('create')}
+          isExpanded={isOpen}
         />
         <NavItem
-          icon={<Library size={24} />}
-          label="Library"
+          icon={<Library size={20} />}
+          label={t('library')}
           active={currentView === 'library'}
           onClick={() => onNavigate('library')}
+          isExpanded={isOpen}
         />
         <NavItem
-          icon={<Search size={24} />}
-          label="Search"
+          icon={<Search size={20} />}
+          label={t('search')}
           active={currentView === 'search'}
           onClick={() => onNavigate('search')}
+          isExpanded={isOpen}
+        />
+        <NavItem
+          icon={<GraduationCap size={20} />}
+          label={t('training')}
+          active={currentView === 'training'}
+          onClick={() => onNavigate('training')}
+          isExpanded={isOpen}
         />
 
-        <div className="mt-auto flex flex-col gap-4">
+        <div className="mt-auto flex flex-col gap-2">
+          {/* Theme Toggle */}
           <button
             onClick={onToggleTheme}
-            className="w-10 h-10 rounded-full hover:bg-zinc-100 dark:hover:bg-white/10 flex items-center justify-center text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white transition-colors mx-auto"
-            title={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+            className={`
+              w-full rounded-xl flex items-center gap-3 transition-all duration-200 text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/5
+              ${isOpen ? 'px-3 py-2.5 justify-start' : 'aspect-square justify-center'}
+            `}
+            title={theme === 'dark' ? t('lightMode') : t('darkMode')}
           >
-            {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+            <div className="flex-shrink-0">{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}</div>
+            {isOpen && (
+              <span className="text-sm font-medium whitespace-nowrap">
+                {theme === 'dark' ? t('lightMode') : t('darkMode')}
+              </span>
+            )}
           </button>
 
           {user ? (
-            <div className="flex flex-col items-center gap-2">
-              <div
+            <>
+              {/* User Settings */}
+              <button
                 onClick={onOpenSettings}
-                className="w-8 h-8 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-white text-xs font-bold cursor-pointer border border-white/20 hover:scale-110 transition-transform overflow-hidden"
-                title={`${user.username} - Settings`}
+                className={`
+                  w-full rounded-xl flex items-center gap-3 transition-all duration-200 text-zinc-500 dark:text-zinc-400 hover:text-black dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/5
+                  ${isOpen ? 'px-3 py-2.5 justify-start' : 'aspect-square justify-center'}
+                `}
+                title={`${user.username} - ${t('settings')}`}
               >
-                {user.avatar_url ? (
-                  <img src={user.avatar_url} alt={user.username} className="w-full h-full object-cover" />
-                ) : (
-                  user.username.charAt(0).toUpperCase()
+                <div className="w-6 h-6 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-white text-xs font-bold border border-white/20 overflow-hidden flex-shrink-0">
+                  {user.avatar_url ? (
+                    <img src={user.avatar_url} alt={user.username} className="w-full h-full object-cover" />
+                  ) : (
+                    user.username.charAt(0).toUpperCase()
+                  )}
+                </div>
+                {isOpen && (
+                  <span className="text-sm font-medium whitespace-nowrap truncate flex-1 text-left">
+                    {user.username}
+                  </span>
                 )}
-              </div>
+              </button>
+              {/* Logout */}
               <button
                 onClick={onLogout}
-                className="w-8 h-8 rounded-full hover:bg-red-500/20 flex items-center justify-center text-zinc-500 hover:text-red-500 transition-colors"
-                title="Sign Out"
+                className={`
+                  w-full rounded-xl flex items-center gap-3 transition-all duration-200 text-zinc-500 hover:text-red-500 hover:bg-red-500/10
+                  ${isOpen ? 'px-3 py-2.5 justify-start' : 'aspect-square justify-center'}
+                `}
+                title={t('signOut')}
               >
-                <LogOut size={16} />
+                <div className="flex-shrink-0"><LogOut size={20} /></div>
+                {isOpen && (
+                  <span className="text-sm font-medium whitespace-nowrap">{t('signOut')}</span>
+                )}
               </button>
-            </div>
+            </>
           ) : (
             <button
               onClick={onLogin}
-              className="w-10 h-10 rounded-full hover:bg-zinc-100 dark:hover:bg-white/10 flex items-center justify-center text-zinc-500 dark:text-zinc-400 hover:text-pink-500 transition-colors mx-auto"
-              title="Sign In"
+              className={`
+                w-full rounded-xl flex items-center gap-3 transition-all duration-200 text-zinc-500 dark:text-zinc-400 hover:text-pink-500 hover:bg-zinc-100 dark:hover:bg-white/5
+                ${isOpen ? 'px-3 py-2.5 justify-start' : 'aspect-square justify-center'}
+              `}
+              title={t('signIn')}
             >
-              <LogIn size={20} />
+              <div className="flex-shrink-0"><LogIn size={20} /></div>
+              {isOpen && (
+                <span className="text-sm font-medium whitespace-nowrap">{t('signIn')}</span>
+              )}
             </button>
           )}
         </div>
       </nav>
-    </div>
+      </div>
+    </>
   );
 };
 
@@ -108,18 +196,23 @@ interface NavItemProps {
   label: string;
   active?: boolean;
   onClick: () => void;
+  isExpanded?: boolean;
 }
 
-const NavItem: React.FC<NavItemProps> = ({ icon, label, active, onClick }) => (
+const NavItem: React.FC<NavItemProps> = ({ icon, label, active, onClick, isExpanded }) => (
   <button
     onClick={onClick}
     className={`
-      w-full aspect-square rounded-xl flex flex-col items-center justify-center gap-1 transition-all duration-200 group relative
+      w-full rounded-xl flex items-center gap-3 transition-all duration-200 group relative overflow-hidden
+      ${isExpanded ? 'px-3 py-2.5 justify-start' : 'aspect-square justify-center'}
       ${active ? 'bg-zinc-100 dark:bg-white/10 text-black dark:text-white' : 'text-zinc-500 hover:text-black dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-white/5'}
     `}
     title={label}
   >
     {active && <div className="absolute left-0 top-1/2 -translate-y-1/2 h-8 w-1 bg-pink-500 rounded-r-full"></div>}
-    {icon}
+    <div className="flex-shrink-0">{icon}</div>
+    {isExpanded && (
+      <span className="text-sm font-medium whitespace-nowrap">{label}</span>
+    )}
   </button>
 );
diff --git a/components/SongDropdownMenu.tsx b/components/SongDropdownMenu.tsx
index 31ba6dc..f6a92d6 100644
--- a/components/SongDropdownMenu.tsx
+++ b/components/SongDropdownMenu.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Song } from '../types';
+import { useI18n } from '../context/I18nContext';
 import {
     Video,
     Edit3,
@@ -76,6 +77,7 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
     onUseAsReference,
     onCoverSong
 }) => {
+    const { t } = useI18n();
     const menuRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -174,32 +176,32 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
             {/* Creative Actions */}
             <MenuItem
                 icon={<Video size={14} />}
-                label="Create Video"
+                label={t('createVideo')}
                 onClick={() => handleAction(onCreateVideo)}
             />
             {isOwner && (
                 <MenuItem
                     icon={<Edit3 size={14} />}
-                    label="Edit Audio"
+                    label={t('editAudio')}
                     onClick={onEditAudio ? () => handleAction(onEditAudio) : handleEditAudio}
                 />
             )}
             <MenuItem
                 icon={<Layers size={14} />}
-                label="Extract Stems"
+                label={t('extractStems')}
                 onClick={onExtractStems ? () => handleAction(onExtractStems) : handleExtractStems}
             />
             {onReusePrompt && (
                 <MenuItem
                     icon={<Repeat size={14} />}
-                    label="Reuse Prompt"
+                    label={t('reusePrompt')}
                     onClick={() => handleAction(onReusePrompt)}
                 />
             )}
             {onUseAsReference && (
                 <MenuItem
                     icon={<Layers size={14} />}
-                    label="Use as Reference"
+                    label={t('useAsReference')}
                     onClick={() => handleAction(onUseAsReference)}
                     disabled={!song.audioUrl}
                 />
@@ -207,7 +209,7 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
             {onCoverSong && (
                 <MenuItem
                     icon={<Layers size={14} />}
-                    label="Cover Song"
+                    label={t('coverSong')}
                     onClick={() => handleAction(onCoverSong)}
                     disabled={!song.audioUrl}
                 />
@@ -218,17 +220,17 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
             {/* Library Actions */}
             <MenuItem
                 icon={<ListPlus size={14} />}
-                label="Add to Playlist"
+                label={t('addToPlaylist')}
                 onClick={() => handleAction(onAddToPlaylist)}
             />
             <MenuItem
                 icon={<Download size={14} />}
-                label="Download"
+                label={t('download')}
                 onClick={onDownload ? () => handleAction(onDownload) : handleDownload}
             />
             <MenuItem
                 icon={<Share2 size={14} />}
-                label="Share"
+                label={t('share')}
                 onClick={() => handleAction(onShare)}
             />
 
@@ -238,7 +240,7 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
                     <MenuDivider />
                     <MenuItem
                         icon={<Trash2 size={14} />}
-                        label="Delete Song"
+                        label={t('deleteSong')}
                         onClick={() => handleAction(onDelete)}
                         danger
                     />
diff --git a/components/SongList.tsx b/components/SongList.tsx
index 4584858..893ff35 100644
--- a/components/SongList.tsx
+++ b/components/SongList.tsx
@@ -2,9 +2,11 @@ import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { Song } from '../types';
 import { Play, MoreHorizontal, Heart, ThumbsDown, ListPlus, Pause, Search, Filter, Check, Globe, Lock, Loader2, ThumbsUp, Share2, Video, Info, Clock } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
+import { songsApi } from '../services/api';
 
 interface SongListProps {
     songs: Song[];
@@ -22,6 +24,7 @@ interface SongListProps {
     onNavigateToProfile?: (username: string) => void;
     onReusePrompt?: (song: Song) => void;
     onDelete?: (song: Song) => void;
+    onSongUpdate?: (updatedSong: Song) => void;
     onDeleteMany?: (songs: Song[]) => void;
     onUseAsReference?: (song: Song) => void;
     onCoverSong?: (song: Song) => void;
@@ -36,12 +39,20 @@ interface SongListProps {
 // Define Filter Types
 type FilterType = 'liked' | 'public' | 'private' | 'generating';
 
-const FILTERS: { id: FilterType; label: string; icon: React.ReactNode }[] = [
-    { id: 'liked', label: 'Liked', icon: <ThumbsUp size={16} /> },
-    { id: 'public', label: 'Public', icon: <Globe size={16} /> },
-    { id: 'private', label: 'Private', icon: <Lock size={16} /> },
-    { id: 'generating', label: 'Generating', icon: <Loader2 size={16} /> },
-];
+// Map model ID to short display name
+const getModelDisplayName = (modelId?: string): string => {
+    if (!modelId) return 'v1.5';
+    
+    const mapping: Record<string, string> = {
+        'acestep-v15-base': '1.5B',
+        'acestep-v15-sft': '1.5S',
+        'acestep-v15-turbo-shift1': '1.5TS1',
+        'acestep-v15-turbo-shift3': '1.5TS3',
+        'acestep-v15-turbo-continuous': '1.5TC',
+        'acestep-v15-turbo': '1.5T',
+    };
+    return mapping[modelId] || 'v1.5';
+};
 
 const createDragPreview = (element: HTMLElement) => {
     const clone = element.cloneNode(true) as HTMLElement;
@@ -91,6 +102,7 @@ export const SongList: React.FC<SongListProps> = ({
     onNavigateToProfile,
     onReusePrompt,
     onDelete,
+    onSongUpdate,
     onDeleteMany,
     onUseAsReference,
     onCoverSong,
@@ -98,6 +110,7 @@ export const SongList: React.FC<SongListProps> = ({
     onCoverUpload
 }) => {
     const { user } = useAuth();
+    const { t } = useI18n();
     const [searchQuery, setSearchQuery] = useState('');
     const [activeFilters, setActiveFilters] = useState<Set<FilterType>>(new Set());
     const [isFilterOpen, setIsFilterOpen] = useState(false);
@@ -105,6 +118,13 @@ export const SongList: React.FC<SongListProps> = ({
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
     const filterRef = useRef<HTMLDivElement>(null);
 
+    const FILTERS: { id: FilterType; label: string; icon: React.ReactNode }[] = [
+        { id: 'liked', label: t('liked'), icon: <ThumbsUp size={16} /> },
+        { id: 'public', label: t('public'), icon: <Globe size={16} /> },
+        { id: 'private', label: t('private'), icon: <Lock size={16} /> },
+        { id: 'generating', label: t('generatingStatus'), icon: <Loader2 size={16} /> }
+    ];
+
     // Close filter dropdown when clicking outside
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -213,7 +233,7 @@ export const SongList: React.FC<SongListProps> = ({
                                 type="text"
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
-                                placeholder="Search your songs..."
+                                placeholder={t('searchYourSongs')}
                                 className="w-full bg-zinc-100 dark:bg-[#121214] border border-zinc-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-zinc-400 dark:focus:border-white/20 placeholder-zinc-500 dark:placeholder-zinc-600 transition-colors"
                             />
                             <Search className="w-4 h-4 text-zinc-500 absolute left-3 top-3 group-focus-within:text-black dark:group-focus-within:text-white transition-colors" />
@@ -231,14 +251,14 @@ export const SongList: React.FC<SongListProps> = ({
                     `}
                             >
                                 <Filter size={14} fill={activeFilters.size > 0 ? "currentColor" : "none"} />
-                                <span>Filters {activeFilters.size > 0 && `(${activeFilters.size})`}</span>
+                                <span>{t('filters')} {activeFilters.size > 0 && `(${activeFilters.size})`}</span>
                             </button>
 
                             {/* Filter Dropdown */}
                             {isFilterOpen && (
                                 <div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl shadow-2xl overflow-hidden py-1 z-50 animate-in fade-in zoom-in-95 duration-100 origin-top-right">
                                     <div className="px-3 py-2 text-[10px] font-bold text-zinc-500 uppercase tracking-wider">
-                                        Refine By
+                                        {t('refineBy')}
                                     </div>
                                     {FILTERS.map(filter => (
                                         <button
@@ -326,12 +346,12 @@ export const SongList: React.FC<SongListProps> = ({
                             <div className="w-16 h-16 rounded-full bg-zinc-100 dark:bg-white/5 flex items-center justify-center">
                                 <Filter size={32} />
                             </div>
-                            <p className="font-medium">No songs match your filters.</p>
+                            <p className="font-medium">{t('noSongsMatchFilters')}</p>
                             <button
                                 onClick={() => { setActiveFilters(new Set()); setSearchQuery(''); }}
                                 className="text-pink-600 dark:text-pink-500 text-sm font-bold hover:underline"
                             >
-                                Clear filters
+                                {t('clearFilters')}
                             </button>
                         </div>
                     ) : (
@@ -365,6 +385,7 @@ export const SongList: React.FC<SongListProps> = ({
                                     onNavigateToProfile={onNavigateToProfile}
                                     onReusePrompt={() => onReusePrompt?.(item.song)}
                                     onDelete={() => onDelete?.(item.song)}
+                                    onSongUpdate={onSongUpdate}
                                     onUseAsReference={() => onUseAsReference?.(item.song)}
                                     onCoverSong={() => onCoverSong?.(item.song)}
                                 />
@@ -417,6 +438,7 @@ interface SongItemProps {
     onNavigateToProfile?: (username: string) => void;
     onReusePrompt?: () => void;
     onDelete?: () => void;
+    onSongUpdate?: (updatedSong: Song) => void;
     onUseAsReference?: () => void;
     onCoverSong?: () => void;
 }
@@ -440,12 +462,54 @@ const SongItem: React.FC<SongItemProps> = ({
     onNavigateToProfile,
     onReusePrompt,
     onDelete,
+    onSongUpdate,
     onUseAsReference,
     onCoverSong
 }) => {
+    const { token } = useAuth();
     const [showDropdown, setShowDropdown] = useState(false);
     const [shareModalOpen, setShareModalOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const [isEditingTitle, setIsEditingTitle] = useState(false);
+    const [editedTitle, setEditedTitle] = useState(song.title);
+    const titleInputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (isEditingTitle && titleInputRef.current) {
+            titleInputRef.current.focus();
+            titleInputRef.current.select();
+        }
+    }, [isEditingTitle]);
+
+    const handleSaveTitle = async () => {
+        if (!token || !isOwner || !editedTitle.trim() || editedTitle === song.title) {
+            setIsEditingTitle(false);
+            setEditedTitle(song.title);
+            return;
+        }
+
+        try {
+            const response = await songsApi.updateSong(song.id, { title: editedTitle.trim() }, token);
+            setIsEditingTitle(false);
+            // 更新父组件的歌曲列表
+            if (onSongUpdate && response.song) {
+                onSongUpdate(response.song);
+            }
+        } catch (error) {
+            console.error('Failed to update title:', error);
+            setEditedTitle(song.title);
+            setIsEditingTitle(false);
+        }
+    };
+
+    const handleTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleSaveTitle();
+        } else if (e.key === 'Escape') {
+            setEditedTitle(song.title);
+            setIsEditingTitle(false);
+        }
+    };
 
     return (
         <>
@@ -550,11 +614,32 @@ const SongItem: React.FC<SongItemProps> = ({
             <div className="flex-1 min-w-0 flex flex-col justify-between py-1">
                 <div className="space-y-1">
                     <div className="flex items-center gap-2">
-                        <h3 className={`font-bold text-lg truncate ${isCurrent ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-900 dark:text-white'}`}>
-                            {song.title || (song.isGenerating ? (song.queuePosition ? "Queued..." : "Creating...") : "Untitled")}
-                        </h3>
-                        <span className="inline-flex items-center justify-center text-[9px] font-bold text-white bg-gradient-to-r from-pink-500 to-purple-500 px-1.5 py-0.5 rounded-sm shadow-sm">
-                            v1.5
+                        {isEditingTitle && isOwner ? (
+                            <input
+                                ref={titleInputRef}
+                                type="text"
+                                value={editedTitle}
+                                onChange={(e) => setEditedTitle(e.target.value)}
+                                onBlur={handleSaveTitle}
+                                onKeyDown={handleTitleKeyDown}
+                                onClick={(e) => e.stopPropagation()}
+                                className="font-bold text-lg bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded border border-pink-500 focus:outline-none text-zinc-900 dark:text-white min-w-0 flex-1"
+                            />
+                        ) : (
+                            <h3
+                                className={`font-bold text-lg truncate ${isCurrent ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-900 dark:text-white'} ${isOwner && !song.isGenerating ? 'cursor-pointer hover:underline' : ''}`}
+                                onClick={(e) => {
+                                    if (isOwner && !song.isGenerating) {
+                                        e.stopPropagation();
+                                        setIsEditingTitle(true);
+                                    }
+                                }}
+                            >
+                                {song.title || (song.isGenerating ? (song.queuePosition ? "Queued..." : "Creating...") : "Untitled")}
+                            </h3>
+                        )}
+                        <span className="inline-flex items-center justify-center text-[9px] font-bold text-white bg-gradient-to-r from-pink-500 to-purple-500 px-1.5 py-0.5 rounded-sm shadow-sm" title={`DiT model: ${song.ditModel || 'undefined'}`}>
+                            {getModelDisplayName(song.ditModel)}
                         </span>
                         {song.isPublic === false && (
                             <Lock size={12} className="text-zinc-400 dark:text-zinc-500" />
diff --git a/components/SongProfile.tsx b/components/SongProfile.tsx
index 558eff0..b1b1e5f 100644
--- a/components/SongProfile.tsx
+++ b/components/SongProfile.tsx
@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Song } from '../types';
 import { songsApi, getAudioUrl } from '../services/api';
 import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
 import { ArrowLeft, Play, Pause, Heart, Share2, MoreHorizontal, ThumbsDown, Music as MusicIcon, Edit3, Eye } from 'lucide-react';
 import { ShareModal } from './ShareModal';
+import { SongDropdownMenu } from './SongDropdownMenu';
 
 interface SongProfileProps {
     songId: string;
@@ -14,6 +16,7 @@ interface SongProfileProps {
     isPlaying?: boolean;
     likedSongIds?: Set<string>;
     onToggleLike?: (songId: string) => void;
+    onDelete?: (song: Song) => void;
 }
 
 const updateMetaTags = (song: Song) => {
@@ -79,11 +82,13 @@ const resetMetaTags = () => {
     updateMeta('meta[name="twitter:image"]', defaultImage);
 };
 
-export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay, onNavigateToProfile, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike }) => {
+export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay, onNavigateToProfile, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike, onDelete }) => {
     const { user, token } = useAuth();
+    const { t } = useI18n();
     const [song, setSong] = useState<Song | null>(null);
     const [loading, setLoading] = useState(true);
     const [shareModalOpen, setShareModalOpen] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
 
     const isCurrentSong = song && currentSong?.id === song.id;
     const isCurrentlyPlaying = isCurrentSong && isPlaying;
@@ -138,7 +143,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
             <div className="flex items-center justify-center h-full bg-zinc-50 dark:bg-black">
                 <div className="text-zinc-500 dark:text-zinc-400 flex items-center gap-2">
                     <div className="w-4 h-4 border-2 border-zinc-400 border-t-transparent rounded-full animate-spin" />
-                    Loading song...
+                    {t('loadingSong')}
                 </div>
             </div>
         );
@@ -147,9 +152,9 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
     if (!song) {
         return (
             <div className="flex flex-col items-center justify-center h-full gap-4 bg-zinc-50 dark:bg-black">
-                <div className="text-zinc-500 dark:text-zinc-400">Song not found</div>
+                <div className="text-zinc-500 dark:text-zinc-400">{t('songNotFound')}</div>
                 <button onClick={onBack} className="px-4 py-2 bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-lg text-zinc-900 dark:text-white transition-colors">
-                    Go Back
+                    {t('goBack')}
                 </button>
             </div>
         );
@@ -164,7 +169,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                     className="flex items-center gap-2 text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white mb-4 transition-colors"
                 >
                     <ArrowLeft size={20} />
-                    <span>Back</span>
+                    <span>{t('back')}</span>
                 </button>
 
                 <div className="flex flex-col md:flex-row md:items-start justify-between gap-4">
@@ -220,7 +225,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
 
             {/* Content */}
             <div className="flex-1 overflow-y-auto">
-                <div className="max-w-3xl mx-auto px-4 md:px-6 py-4 md:py-6">
+                <div className="max-w-3xl mx-auto px-4 md:px-6 py-4 md:py-6 pb-24 lg:pb-32">
 
                     {/* Left Column: Song Details */}
                     <div className="space-y-4 md:space-y-6">
@@ -281,9 +286,26 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                             >
                                 <Share2 size={16} className="text-zinc-700 dark:text-white" />
                             </button>
-                            <button className="p-2 bg-zinc-200 dark:bg-zinc-900 hover:bg-zinc-300 dark:hover:bg-zinc-800 rounded-full transition-colors">
-                                <MoreHorizontal size={16} className="text-zinc-700 dark:text-white" />
-                            </button>
+                            <div className="relative">
+                                <button
+                                    onClick={() => setShowDropdown(!showDropdown)}
+                                    className="p-2 bg-zinc-200 dark:bg-zinc-900 hover:bg-zinc-300 dark:hover:bg-zinc-800 rounded-full transition-colors"
+                                >
+                                    <MoreHorizontal size={16} className="text-zinc-700 dark:text-white" />
+                                </button>
+                                {song && (
+                                    <SongDropdownMenu
+                                        song={song}
+                                        isOpen={showDropdown}
+                                        onClose={() => setShowDropdown(false)}
+                                        isOwner={user?.id === song.userId}
+                                        onReusePrompt={() => {}}
+                                        onAddToPlaylist={() => {}}
+                                        onDelete={() => onDelete?.(song)}
+                                        onShare={() => setShareModalOpen(true)}
+                                    />
+                                )}
+                            </div>
                         </div>
 
                         {/* Lyrics */}
diff --git a/components/TrainingPanel.tsx b/components/TrainingPanel.tsx
new file mode 100644
index 0000000..fc328d3
--- /dev/null
+++ b/components/TrainingPanel.tsx
@@ -0,0 +1,1499 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Upload, Play, Square, FolderOpen, Save, FileJson, Zap, Database, ChevronDown, ChevronUp, Edit2, X } from 'lucide-react';
+
+const VOCAL_LANGUAGE_VALUES = [
+  { value: 'unknown', key: 'autoInstrumental' as const },
+  { value: 'en', key: 'english' as const },
+  { value: 'ja', key: 'japanese' as const },
+  { value: 'zh', key: 'chinese' as const },
+  { value: 'es', key: 'spanish' as const },
+  { value: 'de', key: 'german' as const },
+  { value: 'fr', key: 'french' as const },
+  { value: 'pt', key: 'portuguese' as const },
+  { value: 'ru', key: 'russian' as const },
+  { value: 'it', key: 'italian' as const },
+  { value: 'nl', key: 'dutch' as const },
+  { value: 'pl', key: 'polish' as const },
+  { value: 'tr', key: 'turkish' as const },
+  { value: 'vi', key: 'vietnamese' as const },
+  { value: 'cs', key: 'czech' as const },
+  { value: 'fa', key: 'persian' as const },
+  { value: 'id', key: 'indonesian' as const },
+  { value: 'ko', key: 'korean' as const },
+  { value: 'uk', key: 'ukrainian' as const },
+  { value: 'hu', key: 'hungarian' as const },
+  { value: 'ar', key: 'arabic' as const },
+  { value: 'sv', key: 'swedish' as const },
+  { value: 'ro', key: 'romanian' as const },
+  { value: 'el', key: 'greek' as const },
+];
+import { useI18n } from '../context/I18nContext';
+import { useAuth } from '../context/AuthContext';
+import { trainingApi, DatasetSample } from '../services/api';
+
+interface DisplaySample {
+  index: number;
+  filename: string;
+  duration: string;
+  lyrics: string;
+  labeled: string;
+  bpm: string;
+  key: string;
+  caption: string;
+}
+
+interface TrainingPanelProps {}
+
+export const TrainingPanel: React.FC<TrainingPanelProps> = () => {
+  const { t } = useI18n();
+  const { token } = useAuth();
+  
+  const [activeTab, setActiveTab] = useState<'dataset' | 'training'>('dataset');
+  
+  // Dataset Builder State
+  const [loadJsonPath, setLoadJsonPath] = useState('./datasets/my_lora_dataset.json');
+  const [audioDirectory, setAudioDirectory] = useState('./datasets');
+  const [scanStatus, setScanStatus] = useState('');
+  const [loadJsonStatus, setLoadJsonStatus] = useState('');
+  const [audioFiles, setAudioFiles] = useState<DisplaySample[]>([]);
+  const [datasetName, setDatasetName] = useState('my_lora_dataset');
+  const [allInstrumental, setAllInstrumental] = useState(true);
+  const [customTag, setCustomTag] = useState('');
+  const [tagPosition, setTagPosition] = useState<'prepend' | 'append' | 'replace'>('replace');
+  const [genreRatio, setGenreRatio] = useState(0);
+  const [skipMetas, setSkipMetas] = useState(false);
+  const [onlyUnlabeled, setOnlyUnlabeled] = useState(false);
+  const [labelProgress, setLabelProgress] = useState('');
+  const [labelStatus, setLabelStatus] = useState<{ current: number; total: number; status: string } | null>(null);
+  const labelPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [selectedSampleIndex, setSelectedSampleIndex] = useState(0);
+  const [savePath, setSavePath] = useState('./datasets/my_lora_dataset.json');
+  const [saveStatus, setSaveStatus] = useState('');
+  const [preprocessOutputDir, setPreprocessOutputDir] = useState('./datasets/preprocessed_tensors');
+  const [preprocessProgress, setPreprocessProgress] = useState('');
+  const [preprocessStatus, setPreprocessStatus] = useState<{ current: number; total: number; status: string } | null>(null);
+  
+  // Collapsible sections
+  const [datasetSettingsOpen, setDatasetSettingsOpen] = useState(true);
+  
+  // Sample editing
+  const [editingSample, setEditingSample] = useState<DatasetSample | null>(null);
+  const [editForm, setEditForm] = useState({
+    caption: '',
+    lyrics: '',
+    bpm: '',
+    keyscale: '',
+    timesignature: '',
+    genre: '',
+    prompt_override: '',
+    language: '',
+    duration: '',
+    is_instrumental: false,
+  });
+  
+  // Training State
+  const [trainingTensorDir, setTrainingTensorDir] = useState('./datasets/preprocessed_tensors');
+  const [trainingDatasetInfo, setTrainingDatasetInfo] = useState('');
+  const [loraRank, setLoraRank] = useState(64);
+  const [loraAlpha, setLoraAlpha] = useState(128);
+  const [loraDropout, setLoraDropout] = useState(0.1);
+  const [learningRate, setLearningRate] = useState(3e-4);
+  const [trainEpochs, setTrainEpochs] = useState(1000);
+  const [trainBatchSize, setTrainBatchSize] = useState(1);
+  const [gradientAccumulation, setGradientAccumulation] = useState(1);
+  const [saveEveryNEpochs, setSaveEveryNEpochs] = useState(200);
+  const [trainingShift, setTrainingShift] = useState(3.0);
+  const [trainingSeed, setTrainingSeed] = useState(42);
+  const [loraOutputDir, setLoraOutputDir] = useState('./lora_output');
+  const [useFP8, setUseFP8] = useState(false);
+  const [trainingProgress, setTrainingProgress] = useState('');
+  const [trainingLog, setTrainingLog] = useState('');
+  const [isTraining, setIsTraining] = useState(false);
+  const [tensorboardUrl, setTensorboardUrl] = useState<string | null>(null);
+  const [showTensorboard, setShowTensorboard] = useState(false);
+  const [iframeKey, setIframeKey] = useState(0);
+  const [trainingStartTime, setTrainingStartTime] = useState<number | null>(null);
+  const [currentEpoch, setCurrentEpoch] = useState(0);
+  const [trainingStatus, setTrainingStatus] = useState<any>(null);
+
+  // Transform API samples to display format
+  const transformSamples = (samples: any[]): DisplaySample[] => {
+    return samples.map((s: any) => ({
+      index: s.index,
+      filename: s.filename,
+      duration: s.duration?.toFixed(1) || 'N/A',
+      lyrics: s.lyrics || '',
+      labeled: s.labeled ? 'Yes' : 'No',
+      bpm: s.bpm?.toString() || '',
+      key: s.keyscale || '',
+      caption: s.caption || '',
+    }));
+  };
+
+  // Check training status on mount to restore state after refresh
+  useEffect(() => {
+    if (!token) return;
+    
+    const checkInitialTrainingStatus = async () => {
+      try {
+        const status = await trainingApi.getTrainingStatus(token);
+        
+        if (status.is_training) {
+          setIsTraining(true);
+          if (status.tensorboard_url) {
+            setTensorboardUrl(status.tensorboard_url);
+          }
+          if (status.start_time) {
+            setTrainingStartTime(status.start_time);
+          }
+          if (status.current_epoch !== undefined) {
+            setCurrentEpoch(status.current_epoch);
+          }
+          if (status.training_log) {
+            setTrainingLog(status.training_log);
+          }
+          if (status.current_step !== undefined) {
+            setTrainingStatus(status);
+            setTrainingProgress('training');
+          }
+        }
+      } catch (error) {
+        console.error('Failed to check initial training status:', error);
+      }
+    };
+    
+    checkInitialTrainingStatus();
+  }, [token]);
+
+  // Clean up label polling on unmount
+  useEffect(() => {
+    return () => {
+      if (labelPollRef.current) {
+        clearInterval(labelPollRef.current);
+        labelPollRef.current = null;
+      }
+    };
+  }, []);
+
+  // Poll training status when training is active
+  useEffect(() => {
+    if (!isTraining || !token) return;
+
+    const pollInterval = setInterval(async () => {
+      try {
+        const status = await trainingApi.getTrainingStatus(token);
+        
+        if (!status.is_training) {
+          setIsTraining(false);
+          clearInterval(pollInterval);
+        }
+        
+        // Update TensorBoard URL if available
+        if (status.tensorboard_url) {
+          setTensorboardUrl(status.tensorboard_url);
+        }
+        
+        // Update training start time and epoch
+        if (status.start_time) {
+          setTrainingStartTime(status.start_time);
+        }
+        if (status.current_epoch !== undefined) {
+          setCurrentEpoch(status.current_epoch);
+        }
+        
+        // Auto-expand TensorBoard when training starts (step > 0)
+        if (status.current_step && status.current_step > 0 && !showTensorboard && status.tensorboard_url) {
+          setShowTensorboard(true);
+        }
+        
+        // Update training log from backend
+        const prevLog = trainingLog;
+        if (status.training_log && status.training_log !== prevLog) {
+          setTrainingLog(status.training_log);
+          // Refresh iframe when log changes (new training step)
+          if (showTensorboard) {
+            setIframeKey(prev => prev + 1);
+          }
+        }
+        
+        // Update progress display
+        if (status.current_step !== undefined) {
+          setTrainingStatus(status);
+          setTrainingProgress('training'); // Simple flag
+        }
+        
+        if (status.error) {
+          setTrainingProgress(`${t('error')}: ${status.error}`);
+          setTrainingStatus(null);
+          setIsTraining(false);
+          clearInterval(pollInterval);
+        }
+      } catch (error: any) {
+        console.error('Failed to poll training status:', error);
+      }
+    }, 2000);
+
+    return () => clearInterval(pollInterval);
+  }, [isTraining, token]);
+
+  const handleLoadJson = async () => {
+    if (!token) return;
+    setLoadJsonStatus(t('loadingTracks'));
+    try {
+      const result = await trainingApi.loadDataset({ dataset_path: loadJsonPath }, token);
+      if (!result) {
+        setLoadJsonStatus('Failed to load dataset: No response from server');
+        return;
+      }
+      setLoadJsonStatus(result.message || 'Dataset loaded');
+      setDatasetName(result.dataset_name || '');
+      setAudioFiles(transformSamples(result.samples || []));
+    } catch (error: any) {
+      setLoadJsonStatus(`${t('error')}: ${error?.message || 'Failed to load dataset'}`);
+    }
+  };
+
+  const handleScanDirectory = async () => {
+    if (!token) return;
+    setScanStatus(t('scanning'));
+    try {
+      const result = await trainingApi.scanDirectory({
+        audio_dir: audioDirectory,
+        dataset_name: datasetName,
+        custom_tag: customTag,
+        tag_position: tagPosition,
+        all_instrumental: allInstrumental,
+      }, token);
+      if (!result) {
+        setScanStatus('Failed to scan: No response from server');
+        return;
+      }
+      setScanStatus(result.message || 'Scan completed');
+      setAudioFiles(transformSamples(result.samples || []));
+    } catch (error: any) {
+      setScanStatus(`${t('error')}: ${error?.message || 'Failed to scan directory'}`);
+    }
+  };
+
+  const handleAutoLabel = async () => {
+    if (!token) return;
+    setLabelProgress(t('autoLabeling'));
+
+    try {
+      // Start async labeling task
+      const startResult = await trainingApi.autoLabelAsync({
+        skip_metas: skipMetas,
+        only_unlabeled: onlyUnlabeled,
+      }, token);
+
+      if (!startResult || !startResult.task_id) {
+        setLabelProgress('Failed to start auto-labeling: No response from server');
+        return;
+      }
+      const taskId = startResult.task_id;
+      setLabelProgress(`${startResult.message || 'Starting'} (0/${startResult.total || 0})`);
+      setLabelStatus({ current: 0, total: startResult.total || 0, status: 'running' });
+
+      // Clear any previous poll before starting a new one
+      if (labelPollRef.current) {
+        clearInterval(labelPollRef.current);
+      }
+
+      // Poll for status
+      const pollInterval = setInterval(async () => {
+        try {
+          const statusResult = await trainingApi.getAutoLabelStatus(taskId, token);
+
+          // Update progress display
+          const progressText = `${statusResult.progress} (${statusResult.current}/${statusResult.total})`;
+          setLabelProgress(progressText);
+          setLabelStatus({ current: statusResult.current, total: statusResult.total, status: statusResult.status });
+
+          // Check if completed
+          if (statusResult.status === 'completed') {
+            clearInterval(pollInterval);
+            labelPollRef.current = null;
+            if (statusResult.result) {
+              setLabelProgress(statusResult.result.message || 'Labeling completed');
+              setAudioFiles(transformSamples(statusResult.result.samples || []));
+              setDatasetSettingsOpen(false);
+            }
+            setLabelStatus(null);
+          } else if (statusResult.status === 'failed') {
+            clearInterval(pollInterval);
+            labelPollRef.current = null;
+            setLabelProgress(`${t('error')}: ${statusResult.error || 'Unknown error'}`);
+            setLabelStatus(null);
+          }
+        } catch (pollError: any) {
+          clearInterval(pollInterval);
+          labelPollRef.current = null;
+          setLabelProgress(`${t('error')}: ${pollError?.message || 'Failed to check labeling status'}`);
+          setLabelStatus(null);
+        }
+      }, 2000); // Poll every 2 seconds
+
+      labelPollRef.current = pollInterval;
+
+    } catch (error: any) {
+      setLabelProgress(`${t('error')}: ${error?.message || 'Failed to start auto-labeling'}`);
+    }
+  };
+
+  const handleEditSample = async (index: number) => {
+    if (!token) return;
+    try {
+      const sample = await trainingApi.getSample(index, token);
+      setEditingSample(sample);
+      // Handle timesignature: if it's a number, convert to 'n/4' format
+      let timesig = sample.timesignature || '';
+      if (timesig && !isNaN(Number(timesig))) {
+        timesig = `${timesig}/4`;
+      }
+      
+      setEditForm({
+        caption: sample.caption || '',
+        lyrics: sample.lyrics || '',
+        bpm: sample.bpm?.toString() || '',
+        keyscale: sample.keyscale || '',
+        timesignature: timesig,
+        genre: sample.genre || '',
+        prompt_override: sample.prompt_override || '',
+        language: sample.language || 'unknown',
+        duration: sample.duration?.toString() || '',
+        is_instrumental: sample.is_instrumental || false,
+      });
+    } catch (error: any) {
+      console.error('Failed to load sample:', error);
+    }
+  };
+
+  const handleSaveSample = async () => {
+    if (!token || !editingSample) return;
+    try {
+      const result = await trainingApi.updateSample(editingSample.index, {
+        caption: editForm.caption || undefined,
+        lyrics: editForm.lyrics || undefined,
+        bpm: editForm.bpm ? Number(editForm.bpm) : null,
+        keyscale: editForm.keyscale || undefined,
+        timesignature: editForm.timesignature || undefined,
+        genre: editForm.genre || undefined,
+        prompt_override: editForm.prompt_override || null,
+        language: editForm.language || undefined,
+        duration: editForm.duration ? Number(editForm.duration) : undefined,
+        is_instrumental: editForm.is_instrumental,
+      }, token);
+      
+      const updatedSamples = await trainingApi.getSamples(token);
+      setAudioFiles(transformSamples(updatedSamples.samples));
+      setEditingSample(null);
+    } catch (error: any) {
+      console.error('Failed to update sample:', error);
+    }
+  };
+
+  const handleSaveDataset = async () => {
+    if (!token) return;
+    setSaveStatus(t('savingDataset'));
+    try {
+      const result = await trainingApi.saveDataset({
+        save_path: savePath,
+        dataset_name: datasetName,
+        custom_tag: customTag,
+        tag_position: tagPosition,
+        all_instrumental: allInstrumental,
+        genre_ratio: genreRatio,
+      }, token);
+      if (!result) {
+        setSaveStatus('Failed to save: No response from server');
+        return;
+      }
+      setSaveStatus(result.message || 'Dataset saved');
+    } catch (error: any) {
+      setSaveStatus(`${t('error')}: ${error?.message || 'Failed to save dataset'}`);
+    }
+  };
+
+  const handlePreprocess = async () => {
+    if (!token) return;
+    setPreprocessProgress(t('preprocessing'));
+    
+    try {
+      // Start async preprocessing task
+      const startResult = await trainingApi.preprocessDatasetAsync({
+        output_dir: preprocessOutputDir,
+      }, token);
+      
+      if (!startResult || !startResult.task_id) {
+        setPreprocessProgress('Failed to start preprocessing: No response from server');
+        return;
+      }
+      const taskId = startResult.task_id;
+      setPreprocessProgress(`${startResult.message || 'Starting'} (0/${startResult.total || 0})`);
+      setPreprocessStatus({ current: 0, total: startResult.total || 0, status: 'running' });
+      
+      // Poll for status
+      const pollInterval = setInterval(async () => {
+        try {
+          const statusResult = await trainingApi.getPreprocessStatus(taskId, token);
+          
+          // Update progress display
+          const progressText = `${statusResult.progress} (${statusResult.current}/${statusResult.total})`;
+          setPreprocessProgress(progressText);
+          setPreprocessStatus({ current: statusResult.current, total: statusResult.total, status: statusResult.status });
+          
+          // Check if completed
+          if (statusResult.status === 'completed') {
+            clearInterval(pollInterval);
+            if (statusResult.result) {
+              setPreprocessProgress(statusResult.result.message || 'Preprocessing completed');
+            }
+            setPreprocessStatus(null);
+          } else if (statusResult.status === 'failed') {
+            clearInterval(pollInterval);
+            setPreprocessProgress(`${t('error')}: ${statusResult.error || 'Unknown error'}`);
+            setPreprocessStatus(null);
+          }
+        } catch (pollError: any) {
+          clearInterval(pollInterval);
+          setPreprocessProgress(`${t('error')}: ${pollError?.message || 'Failed to check preprocessing status'}`);
+          setPreprocessStatus(null);
+        }
+      }, 2000); // Poll every 2 seconds
+      
+      // Cleanup on unmount
+      return () => clearInterval(pollInterval);
+      
+    } catch (error: any) {
+      setPreprocessProgress(`${t('error')}: ${error?.message || 'Failed to start preprocessing'}`);
+    }
+  };
+
+  const handleLoadDataset = async () => {
+    if (!token) return;
+    setTrainingDatasetInfo(t('loadingDataset'));
+    try {
+      const result = await trainingApi.loadTensorInfo({ tensor_dir: trainingTensorDir }, token);
+      if (!result) {
+        setTrainingDatasetInfo('Failed to load dataset info: No response from server');
+        return;
+      }
+      setTrainingDatasetInfo(
+        `${t('datasetInfo')
+          .replace('{name}', result.dataset_name || 'Unknown')
+          .replace('{samples}', (result.num_samples || 0).toString())
+          .replace('{labeled}', (result.num_samples || 0).toString())}\n${result.message || ''}`
+      );
+    } catch (error: any) {
+      setTrainingDatasetInfo(`${t('error')}: ${error?.message || 'Failed to load dataset info'}`);
+    }
+  };
+
+  const handleStartTraining = async () => {
+    if (!token) return;
+    setTrainingProgress(t('startingTraining'));
+    try {
+      const result = await trainingApi.startTraining({
+        tensor_dir: trainingTensorDir,
+        lora_rank: loraRank,
+        lora_alpha: loraAlpha,
+        lora_dropout: loraDropout,
+        learning_rate: learningRate,
+        train_epochs: trainEpochs,
+        train_batch_size: trainBatchSize,
+        gradient_accumulation: gradientAccumulation,
+        save_every_n_epochs: saveEveryNEpochs,
+        training_shift: trainingShift,
+        training_seed: trainingSeed,
+        lora_output_dir: loraOutputDir,
+        use_fp8: useFP8,
+      }, token);
+      if (!result) {
+        setTrainingProgress('Failed to start training: No response from server');
+        return;
+      }
+      setIsTraining(true);
+      setTrainingProgress(result.message || 'Training started');
+    } catch (error: any) {
+      setTrainingProgress(`${t('error')}: ${error?.message || 'Failed to start training'}`);
+    }
+  };
+
+  const handleStopTraining = async () => {
+    if (!token) return;
+    try {
+      const result = await trainingApi.stopTraining(token);
+      if (!result) {
+        setTrainingProgress('Failed to stop training: No response from server');
+        return;
+      }
+      setTrainingProgress(result.message || 'Training stopped');
+    } catch (error: any) {
+      setTrainingProgress(`${t('error')}: ${error?.message || 'Failed to stop training'}`);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full bg-white dark:bg-zinc-900">
+      {/* Header */}
+      <div className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-zinc-800 p-6">
+        <h2 className="text-2xl font-bold text-zinc-900 dark:text-white mb-2">🎓 {t('loraTraining')}</h2>
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">
+          {t('trainingDescription')}
+        </p>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-zinc-800 px-6">
+        <button
+          onClick={() => setActiveTab('dataset')}
+          className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === 'dataset'
+              ? 'border-pink-500 text-pink-500'
+              : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
+          }`}
+        >
+          📁 {t('datasetBuilder')}
+        </button>
+        <button
+          onClick={() => setActiveTab('training')}
+          className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === 'training'
+              ? 'border-pink-500 text-pink-500'
+              : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
+          }`}
+        >
+          🚀 {t('trainLora')}
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6 pb-24 lg:pb-32 space-y-6 bg-white dark:bg-zinc-900">
+        {activeTab === 'dataset' ? (
+          <>
+            {/* Load & Scan */}
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+              {/* Load Existing Dataset Card */}
+              <div className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30 rounded-xl p-5 border-2 border-blue-200 dark:border-blue-800 space-y-3 hover:shadow-lg transition-shadow">
+                <div className="flex items-center gap-2 mb-1">
+                  <FileJson className="text-blue-600 dark:text-blue-400" size={20} />
+                  <h4 className="text-sm font-bold text-blue-900 dark:text-blue-100">{t('loadExistingDataset')}</h4>
+                </div>
+                <input
+                  type="text"
+                  value={loadJsonPath}
+                  onChange={(e) => setLoadJsonPath(e.target.value)}
+                  placeholder="./datasets/my_lora_dataset.json"
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-blue-300 dark:border-blue-700 rounded-lg text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                  onClick={handleLoadJson}
+                  className="w-full px-4 py-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2 transition-all shadow-md hover:shadow-lg"
+                >
+                  <FolderOpen size={16} />
+                  {t('loadDataset')}
+                </button>
+                {loadJsonStatus && (
+                  <div className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30 rounded-lg px-3 py-2 text-xs text-zinc-700 dark:text-zinc-300 border-2 border-blue-200 dark:border-blue-800">
+                    {loadJsonStatus}
+                  </div>
+                )}
+              </div>
+
+              {/* Scan New Directory Card */}
+              <div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30 rounded-xl p-5 border-2 border-green-200 dark:border-green-800 space-y-3 hover:shadow-lg transition-shadow">
+                <div className="flex items-center gap-2 mb-1">
+                  <FolderOpen className="text-green-600 dark:text-green-400" size={20} />
+                  <h4 className="text-sm font-bold text-green-900 dark:text-green-100">{t('scanNewDirectory')}</h4>
+                </div>
+                <input
+                  type="text"
+                  value={audioDirectory}
+                  onChange={(e) => setAudioDirectory(e.target.value)}
+                  placeholder="/path/to/your/audio/folder"
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-green-300 dark:border-green-700 rounded-lg text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-green-500"
+                />
+                <button
+                  onClick={handleScanDirectory}
+                  className="w-full px-4 py-2.5 bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2 transition-all shadow-md hover:shadow-lg"
+                >
+                  <Upload size={16} />
+                  {t('scanDataset')}
+                </button>
+                {scanStatus && (
+                  <div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/30 dark:to-emerald-950/30 rounded-lg px-3 py-2 text-xs text-zinc-700 dark:text-zinc-300 border-2 border-green-200 dark:border-green-800">
+                    {scanStatus}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Audio Files Table */}
+            {audioFiles.length > 0 && (
+              <div className="bg-gradient-to-br from-slate-50 to-gray-50 dark:from-slate-950/30 dark:to-gray-950/30 rounded-xl border-2 border-slate-300 dark:border-slate-800 overflow-hidden shadow-lg">
+                <div className="overflow-x-auto max-h-[600px] overflow-y-auto">
+                  <table className="w-full text-sm">
+                    <thead className="bg-gradient-to-r from-slate-100 to-zinc-100 dark:from-slate-900/50 dark:to-zinc-900/50 border-b-2 border-slate-300 dark:border-slate-700 sticky top-0 z-10">
+                      <tr>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">#</th>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">{t('filename')}</th>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">{t('duration')}</th>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">{t('labeled')}</th>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">{t('bpm')}</th>
+                        <th className="px-4 py-3 text-left font-medium text-zinc-700 dark:text-zinc-300">{t('key')}</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
+                      {audioFiles.map((file) => (
+                        <tr
+                          key={file.index}
+                          className="hover:bg-blue-50 dark:hover:bg-zinc-800/50 cursor-pointer group transition-colors"
+                          onClick={() => handleEditSample(file.index)}
+                        >
+                          <td className="px-4 py-3 text-zinc-900 dark:text-white">{file.index + 1}</td>
+                          <td className="px-4 py-3 text-zinc-900 dark:text-white flex items-center gap-2">
+                            {file.filename}
+                            <Edit2 size={14} className="opacity-0 group-hover:opacity-50 transition-opacity" />
+                          </td>
+                          <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{file.duration}</td>
+                          <td className="px-4 py-3">
+                            <span className={`px-2 py-1 rounded text-xs ${
+                              file.labeled === 'Yes'
+                                ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
+                                : 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400'
+                            }`}>
+                              {file.labeled}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{file.bpm}</td>
+                          <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{file.key}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {/* Dataset Settings */}
+            <div className="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-950/30 dark:to-blue-950/30 rounded-xl border-2 border-indigo-200 dark:border-indigo-800 shadow-md">
+              <button
+                onClick={() => setDatasetSettingsOpen(!datasetSettingsOpen)}
+                className="w-full flex items-center justify-between p-4 hover:bg-zinc-100 dark:hover:bg-zinc-700/50 transition-colors rounded-t-xl"
+              >
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">⚙️ {t('datasetSettings')}</h3>
+                {datasetSettingsOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
+              </button>
+              
+              {datasetSettingsOpen && (
+                <div className="p-4 pt-0 space-y-4">
+              
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('datasetName')}
+                  </label>
+                  <input
+                    type="text"
+                    value={datasetName}
+                    onChange={(e) => setDatasetName(e.target.value)}
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('customActivationTag')}
+                  </label>
+                  <input
+                    type="text"
+                    value={customTag}
+                    onChange={(e) => setCustomTag(e.target.value)}
+                    placeholder="e.g., 8bit_retro, my_style"
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={allInstrumental}
+                    onChange={(e) => setAllInstrumental(e.target.checked)}
+                    className="w-4 h-4 text-pink-500 bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 rounded focus:ring-pink-500"
+                  />
+                  <span className="text-sm text-zinc-700 dark:text-zinc-300">{t('allInstrumental')}</span>
+                </label>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('tagPosition')}
+                </label>
+                <select
+                  value={tagPosition}
+                  onChange={(e) => setTagPosition(e.target.value as 'prepend' | 'append' | 'replace')}
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                >
+                  <option value="prepend">{t('tagPrepend')}</option>
+                  <option value="append">{t('tagAppend')}</option>
+                  <option value="replace">{t('tagReplace')}</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('genreRatio')}: {genreRatio}%
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="10"
+                  value={genreRatio}
+                  onChange={(e) => setGenreRatio(Number(e.target.value))}
+                  className="w-full"
+                />
+                <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
+                  {t('genreRatioHint')}
+                </p>
+              </div>
+                </div>
+              )}
+            </div>
+
+            {/* Auto-Label */}
+            <div className="bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 rounded-xl p-4 space-y-4 border-2 border-violet-200 dark:border-violet-800 shadow-md">
+              <h3 className="text-base font-semibold text-zinc-900 dark:text-white">🤖 {t('autoLabelWithAI')}</h3>
+              <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                {t('autoLabelDescription')}
+              </p>
+              
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={skipMetas}
+                    onChange={(e) => setSkipMetas(e.target.checked)}
+                    className="w-4 h-4 text-pink-500 bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 rounded focus:ring-pink-500"
+                  />
+                  <span className="text-sm text-zinc-700 dark:text-zinc-300">{t('skipMetas')}</span>
+                </label>
+
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={onlyUnlabeled}
+                    onChange={(e) => setOnlyUnlabeled(e.target.checked)}
+                    className="w-4 h-4 text-pink-500 bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 rounded focus:ring-pink-500"
+                  />
+                  <span className="text-sm text-zinc-700 dark:text-zinc-300">{t('onlyUnlabeled')}</span>
+                </label>
+              </div>
+
+              <button
+                onClick={handleAutoLabel}
+                disabled={labelStatus?.status === 'running'}
+                className={`w-full py-3 rounded-lg font-medium flex items-center justify-center gap-2 transition-all ${
+                  labelStatus?.status === 'running'
+                    ? 'bg-zinc-300 dark:bg-zinc-700 text-zinc-500 cursor-not-allowed'
+                    : 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white'
+                }`}
+              >
+                <Zap size={18} />
+                {t('autoLabelAll')}
+              </button>
+
+              {labelProgress && labelStatus && labelStatus.status === 'running' && (() => {
+                const current = labelStatus.current || 0;
+                const total = labelStatus.total || 1;
+                const progressPercent = (current / total) * 100;
+                
+                return (
+                  <div className="bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 rounded-lg p-4 border-2 border-violet-200 dark:border-violet-800 space-y-3">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-medium">
+                        🤖 Auto-labeling: {current}/{total} samples
+                      </span>
+                      <span className="text-xs font-mono text-violet-600 dark:text-violet-400 font-semibold">
+                        {progressPercent.toFixed(1)}%
+                      </span>
+                    </div>
+                    
+                    <div className="relative w-full h-4 bg-white/30 dark:bg-zinc-800/50 rounded-full overflow-hidden shadow-inner border border-violet-300 dark:border-violet-700">
+                      <div 
+                        className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-300 ease-out"
+                        style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white drop-shadow-md">
+                        {current}/{total}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {labelProgress && (!labelStatus || labelStatus.status !== 'running') && (
+                <div className="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 rounded-lg p-3 text-sm text-zinc-700 dark:text-zinc-300 border-2 border-violet-200 dark:border-violet-800">
+                  {labelProgress}
+                </div>
+              )}
+            </div>
+
+            {/* Save & Preprocess */}
+            <div className="space-y-4">
+              <div className="bg-gradient-to-br from-sky-50 to-cyan-50 dark:from-sky-950/30 dark:to-cyan-950/30 rounded-xl p-4 space-y-3 border-2 border-sky-200 dark:border-sky-800 shadow-md">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">💾 {t('saveDataset')}</h3>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={savePath}
+                    onChange={(e) => setSavePath(e.target.value)}
+                    className="flex-1 px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                  <button
+                    onClick={handleSaveDataset}
+                    className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors"
+                  >
+                    <Save size={16} />
+                    {t('save')}
+                  </button>
+                </div>
+                {saveStatus && (
+                  <div className="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-sky-950/30 dark:to-cyan-950/30 rounded-lg px-3 py-2 text-xs text-zinc-700 dark:text-zinc-300 border-2 border-sky-200 dark:border-sky-800">
+                    {saveStatus}
+                  </div>
+                )}
+              </div>
+
+              <div className="bg-gradient-to-br from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30 rounded-xl p-4 space-y-3 border-2 border-amber-200 dark:border-amber-800 shadow-md">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">⚡ {t('preprocessToTensors')}</h3>
+                <p className="text-xs text-zinc-600 dark:text-zinc-400">
+                  {t('preprocessDescription')}
+                </p>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={preprocessOutputDir}
+                    onChange={(e) => setPreprocessOutputDir(e.target.value)}
+                    className="flex-1 px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                  <button
+                    onClick={handlePreprocess}
+                    disabled={preprocessStatus?.status === 'running'}
+                    className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+                      preprocessStatus?.status === 'running'
+                        ? 'bg-zinc-300 dark:bg-zinc-700 text-zinc-500 cursor-not-allowed'
+                        : 'bg-purple-500 hover:bg-purple-600 text-white'
+                    }`}
+                  >
+                    <Zap size={16} />
+                    {t('preprocess')}
+                  </button>
+                </div>
+                
+                {preprocessProgress && preprocessStatus && preprocessStatus.status === 'running' && (() => {
+                  const current = preprocessStatus.current || 0;
+                  const total = preprocessStatus.total || 1;
+                  const progressPercent = (current / total) * 100;
+                  
+                  return (
+                    <div className="bg-gradient-to-br from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30 rounded-lg p-4 border-2 border-amber-200 dark:border-amber-800 space-y-3">
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="text-zinc-700 dark:text-zinc-200 font-medium">
+                          ⚡ Preprocessing: {current}/{total} samples
+                        </span>
+                        <span className="text-xs font-mono text-amber-600 dark:text-amber-400 font-semibold">
+                          {progressPercent.toFixed(1)}%
+                        </span>
+                      </div>
+                      
+                      <div className="relative w-full h-4 bg-white/30 dark:bg-zinc-800/50 rounded-full overflow-hidden shadow-inner border border-amber-300 dark:border-amber-700">
+                        <div 
+                          className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-amber-500 transition-all duration-300 ease-out"
+                          style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white drop-shadow-md">
+                          {current}/{total}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })()}
+                
+                {preprocessProgress && (!preprocessStatus || preprocessStatus.status !== 'running') && (
+                  <div className="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30 rounded-lg px-3 py-2 text-xs text-zinc-700 dark:text-zinc-300 border-2 border-amber-200 dark:border-amber-800">
+                    {preprocessProgress}
+                  </div>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Training Tab */}
+            <div className="space-y-6">
+              {/* Dataset Selection */}
+              <div className="bg-gradient-to-br from-slate-50 to-zinc-100 dark:from-slate-950/30 dark:to-zinc-950/30 rounded-xl p-4 space-y-3 border-2 border-slate-200 dark:border-slate-800 shadow-sm">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white flex items-center gap-2">
+                  <Database size={18} className="text-blue-500" />
+                  {t('preprocessedDataset')}
+                </h3>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={trainingTensorDir}
+                    onChange={(e) => setTrainingTensorDir(e.target.value)}
+                    placeholder="./datasets/preprocessed_tensors"
+                    className="flex-1 px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                  <button
+                    onClick={handleLoadDataset}
+                    className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors"
+                  >
+                    <FolderOpen size={16} />
+                    {t('loadDataset')}
+                  </button>
+                </div>
+                {trainingDatasetInfo && (
+                  <div className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/30 dark:to-cyan-950/30 rounded-lg p-3 text-sm text-zinc-700 dark:text-zinc-300 border-2 border-blue-200 dark:border-blue-800">
+                    {trainingDatasetInfo}
+                  </div>
+                )}
+              </div>
+
+              {/* LoRA Settings */}
+              <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30 rounded-xl p-4 space-y-4 border-2 border-purple-200 dark:border-purple-800 shadow-md">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">⚙️ {t('loraSettings')}</h3>
+                
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('loraRank')}: {loraRank}
+                    </label>
+                    <input
+                      type="range"
+                      min="4"
+                      max="256"
+                      step="4"
+                      value={loraRank}
+                      onChange={(e) => setLoraRank(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('loraAlpha')}: {loraAlpha}
+                    </label>
+                    <input
+                      type="range"
+                      min="4"
+                      max="512"
+                      step="4"
+                      value={loraAlpha}
+                      onChange={(e) => setLoraAlpha(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('dropout')}: {loraDropout.toFixed(2)}
+                    </label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="0.5"
+                      step="0.05"
+                      value={loraDropout}
+                      onChange={(e) => setLoraDropout(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Training Parameters */}
+              <div className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/30 dark:to-amber-950/30 rounded-xl p-4 space-y-4 border-2 border-orange-200 dark:border-orange-800 shadow-md">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">🎛️ {t('trainingParameters')}</h3>
+                
+                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('learningRate')}
+                    </label>
+                    <input
+                      type="number"
+                      value={learningRate}
+                      onChange={(e) => setLearningRate(Number(e.target.value))}
+                      step="0.0001"
+                      className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('maxEpochs')}: {trainEpochs}
+                    </label>
+                    <input
+                      type="range"
+                      min="100"
+                      max="4000"
+                      step="100"
+                      value={trainEpochs}
+                      onChange={(e) => setTrainEpochs(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('batchSize')}: {trainBatchSize}
+                    </label>
+                    <input
+                      type="range"
+                      min="1"
+                      max="8"
+                      step="1"
+                      value={trainBatchSize}
+                      onChange={(e) => setTrainBatchSize(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('gradientAccumulation')}: {gradientAccumulation}
+                    </label>
+                    <input
+                      type="range"
+                      min="1"
+                      max="16"
+                      step="1"
+                      value={gradientAccumulation}
+                      onChange={(e) => setGradientAccumulation(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('saveEvery')}: {saveEveryNEpochs} {t('epochs')}
+                    </label>
+                    <input
+                      type="range"
+                      min="50"
+                      max="1000"
+                      step="50"
+                      value={saveEveryNEpochs}
+                      onChange={(e) => setSaveEveryNEpochs(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('shift')}: {trainingShift.toFixed(1)}
+                    </label>
+                    <input
+                      type="range"
+                      min="1"
+                      max="5"
+                      step="0.5"
+                      value={trainingShift}
+                      onChange={(e) => setTrainingShift(Number(e.target.value))}
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                      {t('seed')}
+                    </label>
+                    <input
+                      type="number"
+                      value={trainingSeed}
+                      onChange={(e) => setTrainingSeed(Number(e.target.value))}
+                      className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('outputDirectory')}
+                  </label>
+                  <input
+                    type="text"
+                    value={loraOutputDir}
+                    onChange={(e) => setLoraOutputDir(e.target.value)}
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+
+                <div className="flex items-center gap-3 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
+                  <input
+                    type="checkbox"
+                    id="useFP8"
+                    checked={useFP8}
+                    onChange={(e) => setUseFP8(e.target.checked)}
+                    className="w-4 h-4 text-purple-600 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600 rounded focus:ring-purple-500"
+                  />
+                  <label htmlFor="useFP8" className="text-sm font-medium text-zinc-700 dark:text-zinc-300 cursor-pointer">
+                    ⚡ {t('useFP8')} <span className="text-xs text-zinc-500 dark:text-zinc-400">({t('fp8Description')})</span>
+                  </label>
+                </div>
+              </div>
+
+              {/* Training Controls */}
+              <div className="flex gap-4">
+                <button
+                  onClick={handleStartTraining}
+                  disabled={isTraining}
+                  className={`flex-1 py-3 rounded-lg font-medium flex items-center justify-center gap-2 transition-all ${
+                    isTraining
+                      ? 'bg-zinc-300 dark:bg-zinc-700 text-zinc-500 cursor-not-allowed'
+                      : 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white'
+                  }`}
+                >
+                  <Play size={18} />
+                  {t('startTraining')}
+                </button>
+                <button
+                  onClick={handleStopTraining}
+                  disabled={!isTraining}
+                  className={`flex-1 py-3 rounded-lg font-medium flex items-center justify-center gap-2 transition-all ${
+                    !isTraining
+                      ? 'bg-zinc-300 dark:bg-zinc-700 text-zinc-500 cursor-not-allowed'
+                      : 'bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white'
+                  }`}
+                >
+                  <Square size={18} />
+                  {t('stopTraining')}
+                </button>
+              </div>
+
+              {/* Training Progress */}
+              {trainingProgress && trainingStatus && (() => {
+                const status = trainingStatus;
+                const currentEpoch = status.current_epoch || 0;
+                const totalEpochs = status.config?.epochs || 1;
+                const currentStep = status.current_step || 0;
+                const currentLoss = status.current_loss?.toFixed(4) || 'N/A';
+                
+                // Calculate steps per epoch and total steps
+                const stepsPerEpoch = currentEpoch > 0 ? Math.ceil(currentStep / currentEpoch) : currentStep;
+                const totalSteps = totalEpochs * stepsPerEpoch;
+                
+                // Calculate progress percentage
+                const epochProgress = (currentEpoch / totalEpochs) * 100;
+                
+                // Format elapsed time
+                const elapsed = trainingStartTime ? Math.floor(Date.now() / 1000 - trainingStartTime) : 0;
+                const formatTime = (seconds: number) => {
+                  const h = Math.floor(seconds / 3600);
+                  const m = Math.floor((seconds % 3600) / 60);
+                  const s = seconds % 60;
+                  return h > 0 ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}` : `${m}:${s.toString().padStart(2, '0')}`;
+                };
+                
+                // Format ETA
+                const eta = status.estimated_time_remaining || 0;
+                const etaStr = eta > 0 ? formatTime(Math.floor(eta)) : '--:--';
+                
+                // Format speed
+                const speed = status.steps_per_second || 0;
+                const speedStr = speed > 1 ? `${speed.toFixed(2)} it/s` : speed > 0 ? `${(1/speed).toFixed(2)} s/it` : '-- it/s';
+                
+                return (
+                  <div className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 rounded-xl p-5 border-2 border-emerald-200 dark:border-emerald-800 shadow-lg space-y-4">
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-sm font-semibold text-zinc-900 dark:text-white">📊 {t('trainingStatus')}</h4>
+                      {tensorboardUrl && (
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => setShowTensorboard(!showTensorboard)}
+                            className="flex items-center gap-2 px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white rounded-lg text-xs font-medium transition-colors"
+                          >
+                            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                              <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+                            </svg>
+                            {showTensorboard ? t('hideTensorboard') : t('showTensorboard')}
+                          </button>
+                          <a
+                            href={tensorboardUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-1.5 text-zinc-600 dark:text-zinc-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors"
+                            title={t('openInNewTab')}
+                          >
+                            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/>
+                            </svg>
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                    
+                    {/* Progress Info */}
+                    <div className="space-y-3">
+                      <div className="bg-white/50 dark:bg-zinc-800/50 rounded-lg p-3 flex items-center justify-between text-sm">
+                        <span className="text-zinc-700 dark:text-zinc-200 font-medium">
+                          Epoch {currentEpoch}/{totalEpochs} - Step {currentStep}/{totalSteps} - Loss: {currentLoss}
+                        </span>
+                        <span className="text-xs font-mono text-zinc-500 dark:text-emerald-400 font-semibold">{speedStr}</span>
+                      </div>
+                      
+                      {/* Progress Bar */}
+                      <div className="relative w-full h-6 bg-white/30 dark:bg-zinc-800/50 rounded-full overflow-hidden shadow-inner border-2 border-emerald-300 dark:border-emerald-700">
+                        <div 
+                          className="absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 to-emerald-500 transition-all duration-300 ease-out"
+                          style={{ width: `${Math.min(epochProgress, 100)}%` }}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center">
+                          <span className="text-xs font-semibold text-zinc-800 dark:text-white drop-shadow-md">
+                            {epochProgress.toFixed(1)}%
+                          </span>
+                        </div>
+                      </div>
+                      
+                      {/* Time Info */}
+                      <div className="bg-white/50 dark:bg-zinc-800/50 rounded-lg p-2 flex items-center justify-between text-xs">
+                        <span className="text-zinc-600 dark:text-zinc-300">⏱️ Elapsed: <span className="font-mono font-semibold">{formatTime(elapsed)}</span></span>
+                        <span className="text-zinc-600 dark:text-zinc-300">🎯 ETA: <span className="font-mono font-semibold">{etaStr}</span></span>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Error Display */}
+              {trainingProgress && !trainingStatus && (
+                <div className="bg-gradient-to-br from-red-50 to-pink-50 dark:bg-red-900/30 rounded-xl p-4 border-2 border-red-300 dark:border-red-800 shadow-md">
+                  <p className="text-sm text-red-700 dark:text-red-300">{trainingProgress}</p>
+                </div>
+              )}
+
+              {/* TensorBoard iframe */}
+              {showTensorboard && tensorboardUrl && (
+                <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+                  <div className="bg-zinc-50 dark:bg-zinc-800 px-4 py-2 border-b border-zinc-200 dark:border-zinc-700 flex items-center justify-between">
+                    <h4 className="text-sm font-semibold text-zinc-900 dark:text-white">📊 {t('tensorboardView')}</h4>
+                    <button
+                      onClick={() => setShowTensorboard(false)}
+                      className="text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
+                    >
+                      <X size={16} />
+                    </button>
+                  </div>
+                  <iframe
+                    key={iframeKey}
+                    src={tensorboardUrl}
+                    className="w-full h-[600px] bg-white dark:bg-zinc-900"
+                    style={{ border: 'none' }}
+                    title="TensorBoard"
+                  />
+                </div>
+              )}
+
+              {/* Training Log */}
+              {trainingLog && (
+                <div className="bg-gradient-to-br from-slate-900 to-zinc-900 dark:from-slate-950 dark:to-zinc-950 rounded-xl p-4 border-2 border-slate-700 dark:border-slate-800 overflow-hidden shadow-lg">
+                  <h4 className="text-sm font-semibold text-white mb-2">{t('trainingLog')}</h4>
+                  <pre className="text-xs text-green-400 font-mono overflow-x-auto max-h-64">
+                    {trainingLog}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Edit Sample Modal */}
+      {editingSample && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
+          <div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="sticky top-0 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 p-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-zinc-900 dark:text-white flex items-center gap-2">
+                <Edit2 size={20} className="text-pink-500" />
+                {t('editSample')}: {editingSample.filename}
+              </h3>
+              <button
+                onClick={() => setEditingSample(null)}
+                className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('caption')}
+                </label>
+                <textarea
+                  value={editForm.caption}
+                  onChange={(e) => setEditForm({ ...editForm, caption: e.target.value })}
+                  rows={3}
+                  placeholder={t('musicDescription')}
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('genre')}
+                </label>
+                <input
+                  type="text"
+                  value={editForm.genre}
+                  onChange={(e) => setEditForm({ ...editForm, genre: e.target.value })}
+                  placeholder="pop, electronic, dance..."
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('promptOverride')} <span className="text-xs text-zinc-500">({t('thisSample')})</span>
+                </label>
+                <select
+                  value={editForm.prompt_override || ''}
+                  onChange={(e) => setEditForm({ ...editForm, prompt_override: e.target.value || null })}
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                >
+                  <option value="">{t('useGlobalRatio')}</option>
+                  <option value="caption">{t('caption')}</option>
+                  <option value="genre">{t('genre')}</option>
+                </select>
+                <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">{t('overrideGlobalRatio')}</p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                  {t('lyrics')} <span className="text-xs text-zinc-500">({t('editableUsedForTraining')})</span>
+                </label>
+                <textarea
+                  value={editForm.lyrics}
+                  onChange={(e) => setEditForm({ ...editForm, lyrics: e.target.value })}
+                  rows={5}
+                  placeholder="[Verse 1]\nLyrics here...\n\n[Chorus]"
+                  className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white font-mono focus:outline-none focus:ring-2 focus:ring-pink-500"
+                />
+              </div>
+
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('bpm')}
+                  </label>
+                  <input
+                    type="number"
+                    value={editForm.bpm}
+                    onChange={(e) => setEditForm({ ...editForm, bpm: e.target.value })}
+                    placeholder="120"
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('key')}
+                  </label>
+                  <input
+                    type="text"
+                    value={editForm.keyscale}
+                    onChange={(e) => setEditForm({ ...editForm, keyscale: e.target.value })}
+                    placeholder="C Major"
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('timeSignature')}
+                  </label>
+                  <select
+                    value={editForm.timesignature}
+                    onChange={(e) => setEditForm({ ...editForm, timesignature: e.target.value })}
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  >
+                    <option value="">n/a</option>
+                    <option value="2/4">2/4</option>
+                    <option value="3/4">3/4</option>
+                    <option value="4/4">4/4</option>
+                    <option value="6/8">6/8</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('duration')} (s)
+                  </label>
+                  <input
+                    type="number"
+                    value={editForm.duration}
+                    onChange={(e) => setEditForm({ ...editForm, duration: e.target.value })}
+                    placeholder="30"
+                    step="0.1"
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
+                    {t('language')}
+                  </label>
+                  <select
+                    value={editForm.language}
+                    onChange={(e) => setEditForm({ ...editForm, language: e.target.value })}
+                    className="w-full px-3 py-2 bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-700 rounded-lg text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500"
+                  >
+                    {VOCAL_LANGUAGE_VALUES.map(lang => (
+                      <option key={lang.value} value={lang.value}>{t(lang.key)}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2 pt-2">
+                <input
+                  type="checkbox"
+                  id="instrumental-check"
+                  checked={editForm.is_instrumental}
+                  onChange={(e) => setEditForm({ ...editForm, is_instrumental: e.target.checked })}
+                  className="w-4 h-4 text-pink-500 bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 rounded focus:ring-pink-500"
+                />
+                <label htmlFor="instrumental-check" className="text-sm font-medium text-zinc-700 dark:text-zinc-300 cursor-pointer">
+                  {t('instrumental')}
+                </label>
+              </div>
+            </div>
+
+            <div className="sticky bottom-0 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 p-4 flex gap-3">
+              <button
+                onClick={() => setEditingSample(null)}
+                className="flex-1 px-4 py-2 bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white rounded-lg hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors"
+              >
+                {t('cancel')}
+              </button>
+              <button
+                onClick={handleSaveSample}
+                className="flex-1 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white rounded-lg font-medium transition-colors"
+              >
+                {t('save')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/components/UserProfile.tsx b/components/UserProfile.tsx
index 5556df3..deef2dd 100644
--- a/components/UserProfile.tsx
+++ b/components/UserProfile.tsx
@@ -3,6 +3,7 @@ import { Song, Playlist } from '../types';
 import { usersApi, getAudioUrl, UserProfile as UserProfileType, songsApi } from '../services/api';
 import { useAuth } from '../context/AuthContext';
 import { ArrowLeft, Play, Pause, Heart, Eye, Users, Music as MusicIcon, ChevronRight, Share2, MoreHorizontal, Edit3, X, Camera, Image as ImageIcon, Upload, Loader2 } from 'lucide-react';
+import { useI18n } from '../context/I18nContext';
 
 interface UserProfileProps {
     username: string;
@@ -17,6 +18,7 @@ interface UserProfileProps {
 }
 
 export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPlaySong, onNavigateToProfile, onNavigateToPlaylist, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike }) => {
+    const { t, language } = useI18n();
     const { user: currentUser, token } = useAuth();
     const [profileUser, setProfileUser] = useState<UserProfileType | null>(null);
     const [publicSongs, setPublicSongs] = useState<Song[]>([]);
@@ -145,7 +147,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
             loadUserProfile();
         } catch (error) {
             console.error('Failed to update profile:', error);
-            alert('Failed to update profile');
+            alert(t('profileUpdateFailed'));
         } finally {
             setIsSaving(false);
             setUploadingAvatar(false);
@@ -158,7 +160,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
             <div className="flex items-center justify-center h-full bg-zinc-50 dark:bg-black">
                 <div className="text-zinc-500 dark:text-zinc-400 gap-2 flex items-center">
                     <div className="w-4 h-4 border-2 border-zinc-400 border-t-transparent rounded-full animate-spin"></div>
-                    Loading profile...
+                    {t('loadingProfile')}
                 </div>
             </div>
         );
@@ -167,9 +169,9 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
     if (!profileUser) {
         return (
             <div className="flex flex-col items-center justify-center h-full gap-4 bg-zinc-50 dark:bg-black">
-                <div className="text-zinc-500 dark:text-zinc-400">User not found</div>
+                <div className="text-zinc-500 dark:text-zinc-400">{t('userNotFound')}</div>
                 <button onClick={onBack} className="px-4 py-2 bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-lg text-zinc-900 dark:text-white">
-                    Go Back
+                    {t('goBack')}
                 </button>
             </div>
         );
@@ -233,7 +235,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
     const displaySongs = songsTab === 'recent' ? publicSongs : [...publicSongs].sort((a, b) => (b.likeCount || 0) - (a.likeCount || 0));
 
     return (
-        <div className="w-full h-full flex flex-col bg-zinc-50 dark:bg-black overflow-y-auto relative">
+        <div className="w-full h-full flex flex-col bg-zinc-50 dark:bg-black overflow-y-auto pb-24 lg:pb-32 relative">
             {/* Hero Banner */}
             <div className="relative group/banner">
                 {/* Background Banner */}
@@ -250,7 +252,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                     className="absolute top-4 left-4 flex items-center gap-2 text-white/80 hover:text-white bg-black/30 hover:bg-black/50 px-4 py-2 rounded-full backdrop-blur-sm transition-all z-20"
                 >
                     <ArrowLeft size={20} />
-                    <span>Back</span>
+                    <span>{t('back')}</span>
                 </button>
 
                 {/* Edit Banner Button (Owner Only) - Visual Cue */}
@@ -356,7 +358,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
 
                                     {profileUser.supporter_since && profileUser.accountTier && profileUser.accountTier !== 'free' && (
                                         <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-3">
-                                            Supporting since {new Date(profileUser.supporter_since).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+                                            {t('supportingSince')} {new Date(profileUser.supporter_since).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}
                                         </p>
                                     )}
 
@@ -368,7 +370,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                     )}
 
                                     <p className="text-zinc-500 text-xs md:text-sm mb-4">
-                                        Joined {new Date(profileUser.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
+                                        {t('joined')} {new Date(profileUser.created_at).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}
                                     </p>
                                 </div>
 
@@ -379,7 +381,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                         className="px-4 md:px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black hover:bg-zinc-800 dark:hover:bg-zinc-200 rounded-full font-bold transition-colors text-sm flex items-center gap-2"
                                     >
                                         <Edit3 size={16} />
-                                        Edit Profile
+                                        {t('editProfile')}
                                     </button>
                                 )}
                             </div>
@@ -389,17 +391,17 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                 <div className="flex items-center gap-1.5 md:gap-2">
                                     <MusicIcon size={16} className="text-zinc-500 dark:text-zinc-400" />
                                     <span className="font-semibold text-zinc-900 dark:text-white">{publicSongs.length}</span>
-                                    <span className="text-zinc-500 dark:text-zinc-400">Songs</span>
+                                    <span className="text-zinc-500 dark:text-zinc-400">{t('songs')}</span>
                                 </div>
                                 <div className="flex items-center gap-1.5 md:gap-2">
                                     <Heart size={16} className="text-zinc-500 dark:text-zinc-400" />
                                     <span className="font-semibold text-zinc-900 dark:text-white">{totalLikes}</span>
-                                    <span className="text-zinc-500 dark:text-zinc-400">Likes</span>
+                                    <span className="text-zinc-500 dark:text-zinc-400">{t('likes')}</span>
                                 </div>
                                 <div className="flex items-center gap-1.5 md:gap-2">
                                     <Eye size={16} className="text-zinc-500 dark:text-zinc-400" />
                                     <span className="font-semibold text-zinc-900 dark:text-white">{totalPlays}</span>
-                                    <span className="text-zinc-500 dark:text-zinc-400">Plays</span>
+                                    <span className="text-zinc-500 dark:text-zinc-400">{t('plays')}</span>
                                 </div>
                             </div>
                         </div>
@@ -412,7 +414,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                 {/* Featured Songs */}
                 {featuredSongs.length > 0 && (
                     <section>
-                        <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white mb-4 md:mb-6">Featured Songs</h2>
+                        <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white mb-4 md:mb-6">{t('featuredSongs')}</h2>
                         <div className="flex gap-3 md:gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent -mx-4 px-4 md:mx-0 md:px-0">
                             {featuredSongs.map((song) => {
                                 const isCurrentSong = currentSong?.id === song.id;
@@ -478,7 +480,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                 {/* Songs Section */}
                 <section>
                     <div className="flex items-center justify-between mb-4 md:mb-6">
-                        <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">Songs</h2>
+                        <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">{t('songs')}</h2>
                         <div className="flex items-center gap-4">
                             <div className="flex bg-zinc-200 dark:bg-zinc-900 rounded-full p-1">
                                 <button
@@ -486,14 +488,14 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                     className={`px-3 md:px-4 py-1.5 md:py-2 rounded-full text-xs md:text-sm font-medium transition-colors ${songsTab === 'recent' ? 'bg-white dark:bg-white text-zinc-900 dark:text-black shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
                                         }`}
                                 >
-                                    Recent
+                                    {t('recent')}
                                 </button>
                                 <button
                                     onClick={() => setSongsTab('top')}
                                     className={`px-3 md:px-4 py-1.5 md:py-2 rounded-full text-xs md:text-sm font-medium transition-colors ${songsTab === 'top' ? 'bg-white dark:bg-white text-zinc-900 dark:text-black shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
                                         }`}
                                 >
-                                    Top
+                                    {t('top')}
                                 </button>
                             </div>
                         </div>
@@ -502,7 +504,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                     {displaySongs.length === 0 ? (
                         <div className="flex flex-col items-center justify-center py-16 text-zinc-500">
                             <MusicIcon size={64} className="mb-4 opacity-50" />
-                            <p>No public songs yet</p>
+                            <p>{t('noPublicSongsYet')}</p>
                         </div>
                     ) : (
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-4">
@@ -563,9 +565,9 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                 {publicPlaylists.length > 0 && (
                     <section>
                         <div className="flex items-center justify-between mb-4 md:mb-6">
-                            <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">Playlists</h2>
+                            <h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">{t('playlists')}</h2>
                             <button className="flex items-center gap-2 text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors text-sm">
-                                See More <ChevronRight size={18} />
+                                {t('seeMore')} <ChevronRight size={18} />
                             </button>
                         </div>
                         <div className="flex gap-3 md:gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent -mx-4 px-4 md:mx-0 md:px-0">
@@ -584,7 +586,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                         </div>
                                     </div>
                                     <h3 className="font-semibold text-zinc-900 dark:text-white truncate mb-1 text-sm md:text-base">{playlist.name}</h3>
-                                    <p className="text-xs md:text-sm text-zinc-500 dark:text-zinc-400">{playlist.song_count} songs</p>
+                                    <p className="text-xs md:text-sm text-zinc-500 dark:text-zinc-400">{playlist.song_count} {t('songs')}</p>
                                 </div>
                             ))}
                         </div>
@@ -594,10 +596,10 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
 
             {/* Edit Profile Modal */}
             {isEditModalOpen && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
+                <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
                     <div className="w-full max-w-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200 max-h-[90vh] overflow-y-auto">
                         <div className="px-4 md:px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between sticky top-0 bg-white dark:bg-zinc-900 z-10">
-                            <h2 className="text-lg md:text-xl font-bold text-zinc-900 dark:text-white">Edit Profile</h2>
+                            <h2 className="text-lg md:text-xl font-bold text-zinc-900 dark:text-white">{t('editProfile')}</h2>
                             <button onClick={() => setIsEditModalOpen(false)} className="text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">
                                 <X size={20} />
                             </button>
@@ -606,7 +608,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                         <div className="p-4 md:p-6 space-y-6">
                             {/* Avatar Upload */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Avatar Image</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('avatarImage')}</label>
                                 <div className="flex gap-4 items-center">
                                     <div className="w-20 h-20 rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden flex-shrink-0 relative">
                                         {(avatarPreview || editAvatarUrl) ? (
@@ -640,16 +642,16 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                             className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white rounded-lg text-sm font-medium transition-colors"
                                         >
                                             <Upload size={16} />
-                                            Upload Avatar
+                                            {t('uploadAvatar')}
                                         </button>
-                                        <p className="text-xs text-zinc-500">JPG, PNG, WebP, GIF • Max 5MB</p>
+                                        <p className="text-xs text-zinc-500">{t('avatarFormats')}</p>
                                     </div>
                                 </div>
                             </div>
 
                             {/* Banner Upload */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Banner Image</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bannerImage')}</label>
                                 <div
                                     onClick={() => bannerInputRef.current?.click()}
                                     className="relative w-full h-32 rounded-lg bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors"
@@ -663,7 +665,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                     ) : (
                                         <div className="w-full h-full flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 gap-2">
                                             <ImageIcon size={32} />
-                                            <span className="text-sm">Click to upload banner</span>
+                                            <span className="text-sm">{t('clickToUploadBanner')}</span>
                                         </div>
                                     )}
                                     {uploadingBanner && (
@@ -679,16 +681,16 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                     onChange={handleBannerChange}
                                     className="hidden"
                                 />
-                                <p className="text-xs text-zinc-500">Recommended: 1500x500px • JPG, PNG, WebP, GIF • Max 5MB</p>
+                                <p className="text-xs text-zinc-500">{t('bannerFormats')}</p>
                             </div>
 
                             {/* Bio Input */}
                             <div className="space-y-2">
-                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Bio</label>
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bio')}</label>
                                 <textarea
                                     value={editBio}
                                     onChange={(e) => setEditBio(e.target.value)}
-                                    placeholder="Tell us about yourself..."
+                                    placeholder={t('bioPlaceholder')}
                                     rows={4}
                                     className="w-full bg-zinc-50 dark:bg-black border border-zinc-300 dark:border-zinc-800 rounded-lg px-3 py-2 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-pink-500 dark:focus:border-indigo-500 transition-colors resize-none"
                                 />
@@ -707,7 +709,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                 className="px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
                                 disabled={isSaving}
                             >
-                                Cancel
+                                {t('cancel')}
                             </button>
                             <button
                                 onClick={handleSaveProfile}
@@ -715,7 +717,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                                 className="px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black hover:bg-zinc-800 dark:hover:bg-zinc-200 rounded-full text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                             >
                                 {isSaving && <Loader2 size={16} className="animate-spin" />}
-                                {uploadingAvatar ? 'Uploading Avatar...' : uploadingBanner ? 'Uploading Banner...' : isSaving ? 'Saving...' : 'Save Changes'}
+                                {uploadingAvatar ? t('uploadingAvatar') : uploadingBanner ? t('uploadingBanner') : isSaving ? t('saving') : t('saveChanges')}
                             </button>
                         </div>
                     </div>
diff --git a/components/UsernameModal.tsx b/components/UsernameModal.tsx
index c44d7ae..f737df5 100644
--- a/components/UsernameModal.tsx
+++ b/components/UsernameModal.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { X, User, Sparkles } from 'lucide-react';
+import { useI18n } from '../context/I18nContext';
 
 interface UsernameModalProps {
   isOpen: boolean;
@@ -7,6 +8,7 @@ interface UsernameModalProps {
 }
 
 export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }) => {
+  const { t } = useI18n();
   const [username, setUsername] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -19,12 +21,12 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
 
     const trimmed = username.trim();
     if (trimmed.length < 2) {
-      setError('Username must be at least 2 characters');
+      setError(t('usernameMinLength'));
       return;
     }
 
     if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
-      setError('Username can only contain letters, numbers, underscores, and dashes');
+      setError(t('usernameInvalidChars'));
       return;
     }
 
@@ -32,14 +34,14 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
     try {
       await onSubmit(trimmed);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to set username');
+      setError(err instanceof Error ? err.message : t('failedToSetUsername'));
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" />
 
@@ -58,17 +60,17 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
 
           {/* Title */}
           <h2 className="text-2xl font-bold text-center text-white mb-2">
-            Welcome to ACE-Step UI
+            {t('welcomeTitle')}
           </h2>
           <p className="text-zinc-400 text-center mb-8">
-            Enter your name to get started creating AI music
+            {t('welcomeSubtitle')}
           </p>
 
           {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <label htmlFor="username" className="block text-sm font-medium text-zinc-300 mb-2">
-                Your Name
+                {t('yourName')}
               </label>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -79,7 +81,7 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
                   id="username"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  placeholder="Enter your name"
+                  placeholder={t('enterYourName')}
                   className="w-full pl-10 pr-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                   autoFocus
                   disabled={isLoading}
@@ -101,17 +103,17 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                   </svg>
-                  Getting Started...
+                  {t('gettingStarted')}
                 </span>
               ) : (
-                'Get Started'
+                t('getStarted')
               )}
             </button>
           </form>
 
           {/* Footer */}
           <p className="mt-6 text-xs text-zinc-500 text-center">
-            Your music, your way. Create unlimited AI music for free.
+            {t('yourMusicYourWay')}
           </p>
         </div>
       </div>
diff --git a/context/I18nContext.tsx b/context/I18nContext.tsx
new file mode 100644
index 0000000..f8f1065
--- /dev/null
+++ b/context/I18nContext.tsx
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { translations, Language, TranslationKey } from '../i18n/translations';
+
+interface I18nContextType {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: (key: TranslationKey) => string;
+}
+
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+export const I18nProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [language, setLanguage] = useState<Language>(() => {
+    const stored = localStorage.getItem('language') as Language;
+    return stored === 'zh' || stored === 'en' || stored === 'ja' || stored === 'ko' ? stored : 'en';
+  });
+
+  const handleSetLanguage = (lang: Language) => {
+    setLanguage(lang);
+    localStorage.setItem('language', lang);
+  };
+
+  const t = (key: TranslationKey): string => {
+    return translations[language][key] || key;
+  };
+
+  return (
+    <I18nContext.Provider value={{ language, setLanguage: handleSetLanguage, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export const useI18n = () => {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error('useI18n must be used within I18nProvider');
+  }
+  return context;
+};
diff --git a/data/all_style.txt b/data/all_style.txt
new file mode 100644
index 0000000..67f261e
--- /dev/null
+++ b/data/all_style.txt
@@ -0,0 +1,939 @@
+acoustic chicago blues cape verdean
+afro-jazz
+ambient house 16-bit
+arabic reggae
+saxophone afro house
+portuguese breakbeat
+korean pacific reggae
+hypnagogic pacific reggae
+koto gnawa
+new orleans grunge
+instrumental bluegrass
+cajun griot
+choral celtic
+dakar afro-cuban jazz
+dark goa trance
+prog avant-garde jazz
+reggaetonwave
+sertanejo southern rock
+soulful bubblegum dance
+symphonic disco
+dreamy swing
+garage tango
+grunge cumbia
+classical cumbia
+hindi jungle
+acoustic chicago blues algorave
+afro-funk
+ambient dub techno
+arabic pop
+saxophone drum and bass
+portuguese barbershop
+russian dembow
+hypnagogic goa trance
+koto g-funk
+new orleans dembow
+bluegrass
+cajun algorave
+choral big band
+cumbia metal
+dark electropop
+prog ambient noise wall
+reggae dirty south
+sertanejo emo
+soulful boogie
+symphonic cloud rap
+dreamy soul
+garage
+grunge bedroom pop
+choral afro-jazz
+hindi dream pop
+acoustic chicago blues
+afro-cuban jazz griot
+ambient dub boogie
+arabic mariachi
+saxophone tuareg
+portuguese acoustic rock
+urdu rumba
+hypnagogic garage
+koto drill and bass
+new orleans cloud rap
+big band new jack swing
+cajun afrikaner folk
+choral bedroom pop
+cumbia acoustic blues
+dark drum and bass
+prog afrobeat
+reggae
+sertanejo chillstep
+soulful acoustic texas blues
+symphonic city pop
+dreamy shoegaze
+electro-chanson
+grunge americana
+bubblegum bass symphonic metal
+hindi doo-wop
+acoustic carnatic
+afro-cuban jazz doo-wop
+ambient dub bedroom pop
+arabic egyptian
+slushwave roots reggae
+portuguese 16-bit
+urdu jazzwave
+hypnagogic electropop
+koto dembow
+new orleans chillwave
+swing
+big band grunge
+cajun acid rock
+choral ambient techno
+cumbia
+dark dance
+prog afro-jazz
+reggae cumbia
+saxophone shoegaze
+soulful acid trance
+symphonic boom bap
+dreamy pacific reggae
+electro-bossa nova
+grunge american primitivism
+ambient dub bachata
+hindi chanson
+acoustic blues slushwave
+afro-cuban jazz crunk
+alternative rock
+arabic classical
+mandarin trance
+urdu house
+hypnagogic ambient trance
+koto coptic
+new orleans carnatic
+tuareg synthwave
+big band cumbia
+cajun
+choral ambient noise wall
+crunk swamp blues
+dark coptic
+prog afro-funk
+rap dirty south
+saxophone opera
+soulful acid house
+symphonic bluegrass
+dreamy house
+electro-alternative r&b
+grunge afro-cuban jazz
+drumstep soul
+hindi carnatic
+tuareg motown
+acoustic blues mariachi
+afro-cuban jazz
+alternative r&b griot
+arabic ambient techno
+mandarin math rock
+urdu electropop
+hypnagogic algorave
+koto boom bap
+new orleans cajun
+big band boogie
+cabaretwave
+choral alt-country
+crunk punk
+dark chillstep
+prog acoustic texas blues
+rap bedroom pop
+saxophone gnawa
+soul dembow
+symphonic algorave
+dreamy grime
+electro-acid house
+grunge african folk
+delta blues house
+hindi bubblegum dance
+trap k-pop
+acoustic blues glitch hop
+afro trap r&b
+alternative r&b dembow
+arabic afrobeat
+mandarin house
+urdu drill
+hyphy egyptian
+koto alt-pop
+new orleans alternative r&b
+big band ambient house
+cabaret rock
+choral 16-bit
+crunk goa trance
+dark blues
+popcore
+rap
+saxophone g-funk
+soul
+symphonic afro-cuban jazz
+dreamy fife and drum blues
+egyptian swing
+grunge
+liquid drum and bass house
+hindi ambient house
+trap g-funk
+acoustic ambient trance
+afro trap algorave
+alternative r&b
+arabic acid house
+mandarin hawaiian
+urdu coptic
+hyphy bluegrass
+klezmer pop
+new jack swing big band
+big band alt-country
+cabaret americana
+chillwavewave
+crunk calypso
+dark alternative rock
+pop synthpop
+raga jazz
+saxophone edm
+slushwave new jack swing
+swing synthpop
+dreamy drum and bass
+egyptian flamenco
+griot shoegaze
+arabic african folk
+hindi alt-country
+trap
+acoustic afropiano
+afro trap
+alt-pop afropiano
+arabic 16-bit
+mandarin drum and bass
+urdu acid jazz
+hyphy alternative r&b
+klezmer
+new jack swing
+bengali swamp blues
+cabaret
+chillwave swing
+country jazz
+dark alt-pop
+pop g-funk
+raga egyptian
+saxophone bossa nova
+slushwave dancehall
+swing sertanejo
+dreamy dembow
+egyptian
+griot reggae
+liverpool big band
+hindi afrobeat
+trance
+acoustic acid rock
+afro house rock
+alt-country surf rock
+appalachian folk flamenco
+mandarin disco
+spanish samba
+hyphy
+kawaii future bass polka
+motown
+bengali surf rock
+bubblegum dance chanson
+chillwave samba
+country afro-cuban jazz
+dark acid jazz
+pop bossa nova
+raga edm
+saxophone barbershop
+slushwave chillstep
+swing samba
+dreamy chillwave
+edm swamp blues
+griot indie
+dance drill
+hindi african folk
+tokyo southern rock
+acid trance
+afro house drill and bass
+alt-country dubstep
+appalachian folk cloud rap
+mandarin delta blues
+spanish pop
+hyper-southern rock
+kawaii future bass afropiano
+metal grunge
+bengali surf
+bubblegum dance
+chillwave caribbean
+country dancehall
+dark acid house
+pop
+raga algorave
+saxophone alt-country
+slushwave acid house
+swing roots reggae
+dreamy bubblegum dance
+edm jungle
+griot
+illbient egyptian
+hindi acoustic rock
+tokyo samba
+acid techno psybient
+afro house dembow
+alt-country disco
+appalachian folk anti-folk
+mandarin cumbia
+spanish merengue
+hyper-motown
+kawaii future bass afro-cuban jazz
+merengue
+bengali psybient
+bubblegum bass grime
+chillwave egyptian
+coptic grunge
+dancepop breakbeat
+polka emo
+raga acid breaks
+saxophone 2-step
+ska liquid drum and bass
+swing grime
+dreamy boom bap
+edm grime
+grime tango
+dubstep rock
+hindi acid rock
+tokyo norteño
+acid techno avant-garde jazz
+afro house acoustic blues
+alt-country 2-step
+anti-folkwave
+mandarin american primitivism
+spanish mariachi
+hyper-jungle
+kawaii future bass
+math rock ambient noise wall
+bengali math rock
+breakstep synthwave
+chillwave bubblegum bass
+coptic flamenco
+dancepop
+polka
+raga
+samba soul
+ska coptic
+swing bedroom pop
+dreamy afro-jazz
+edm g-funk
+grime synthpop
+tuareg
+harpischord symphonic metal
+tokyo liquid drum and bass
+acid techno
+afro house
+algorave psybient
+anti-folk drumstep
+tokyo grunge
+mandarin afrobeat
+spanish funk
+hyper-indie
+k-pop acoustic texas blues
+math rock
+bengali grunge
+bubblegum bass
+chillsynth mento
+coptic afro-rock
+dancehall synthwave
+piano klezmer
+r&b gospel
+samba dirty south
+ska
+swamp blues r&b
+dreamy acoustic rock
+edm disco
+grime surf rock
+electro-classical
+harpischord gospel
+acid rock p-funk
+afrikaner folk tango
+algorave hawaiian
+anti-folk big band
+tokyo drumstep
+mandarin acid trance
+spanish ambient trance
+hyper-grime
+k-pop
+mariachi
+bengali electropop
+breakstep samba
+chillsynth
+coptic
+dancehall new wave
+piano country
+punk polka
+samba country
+sitar southern rock
+swamp blues boogie
+dreamy acid house
+edm breakbeat
+grime reggaeton
+urdu shoegaze
+future egyptian
+acid rock city pop
+afrikaner folk pacific reggae
+algorave garage
+anti-folk
+tokyo city pop
+korean fife and drum blues
+spanish acoustic rock
+hyper-egyptian
+jungle ambient noise wall
+lo-fi trap
+bengali egyptian
+breakbeatwave
+chillstep chillwave
+cloud rap symphonic metal
+dancehall flamenco
+piano chillstep
+punk electropop
+samba boom bap
+sitar sertanejo
+swamp blues
+dream pop g-funk
+edm anti-folk
+grime reggae
+havana glitch hop
+future chillwave
+acid jazz crunk
+afrikaner folk drill
+algorave acid jazz
+americana soul
+tokyo afro-jazz
+korean opera
+russian techno
+hyper-dance
+jungle afrobeat
+lo-fi synthpop
+bengali drill
+breakbeat trance
+chillstep
+cloud rap slushwave
+dancehall country
+piano cape verdean
+punk acid trance
+samba bachata
+sitar rumba
+surfwave
+dream pop appalachian folk
+edm
+grime norteño
+havana funk
+french ska
+acid house boom bap
+afrikaner folk
+algorave
+americana jungle
+tokyo afro-funk
+korean drumstep
+russian samba
+hyper-crunk
+jungle
+lo-fi roots reggae
+bengali cape verdean
+breakbeat coptic
+chanson soul
+cloud rap
+dancehall city pop
+piano caribbean
+psychedelic swing
+samba afropiano
+sitar goa trance
+surf slushwave
+dream pop
+dubstepcore
+grime calypso
+havana electropop
+french shoegaze
+acid house
+african folk math rock
+afroswing new wave
+american primitivism illbient
+tokyo acid trance
+korean cabaret
+russian salsa
+hyper-blues rock
+jazz soul
+lo-fi pacific reggae
+bengali barbershop
+breakbeat balkan brass band
+chanson funk
+classicalwave
+dancehall acoustic texas blues
+piano afroswing
+psychedelic psybient
+samba
+sitar glitch hop
+surf rock boogie
+doo-wop pop
+dubstep samba
+grime avant-garde jazz
+havana chillstep
+french samba
+acid breaks alt-country
+african folk drill
+afroswing k-pop
+american primitivism bedroom pop
+tokyo acid breaks
+korean americana
+russian roots reggae
+hyper-afrobeat
+jazz sertanejo
+lo-fi cloud rap
+bengali american primitivism
+bossa nova merengue
+chanson alt-pop
+classical surf
+dancehall
+piano afro-rock
+psychedelic motown
+salsa polka
+sitar fife and drum blues
+surf rock
+doo-wop drumstep
+dubstep kawaii future bass
+grime 2-step
+havana cajun
+french psybient
+accordion tango
+african folk
+afroswing
+american primitivism 2-step
+techno norteño
+korean algorave
+russian k-pop
+hyper-acid house
+jazz future bass
+lo-fi bubblegum bass
+bengali afroswing
+bossa nova
+chanson
+classical grime
+dancecore
+piano african folk
+psychedelic house
+salsa
+sitar drum and bass
+surf raga
+doo-wop classical
+dubstep
+grime
+havana bubblegum bass
+french grunge
+accordion rap
+acoustic texas blues chillstep
+afropiano blues rock
+ambient trance mento
+techno bossa nova
+korean afrobeat
+russian grunge
+hyper-2-step
+jazz
+lo-fi ambient dub
+bengali acoustic chicago blues
+boom bap p-funk
+celtic tango
+classical folk
+dance southern rock
+pacific reggae ska
+psychedelic hawaiian
+rumbawave
+sitar delta blues
+surf grunge
+disco cloud rap
+drumstep chillsynth
+gospelwave
+havana bedroom pop
+french glitch hop
+accordion jungle
+acoustic texas blues afrobeat
+afropiano
+ambient trance jungle
+techno big band
+korean afro-funk
+russian grime
+house symphonic metal
+j-pop chillsynth
+lo-fi afro-cuban jazz
+bedroom pop ska
+boom bap celtic
+celtic cloud rap
+classical dirty south
+dance illbient
+pacific reggae samba
+psychedelic dream pop
+rumba cape verdean
+sitar cumbia
+surf flamenco
+disco classical
+drum and bass swing
+gospel shoegaze
+havana 2-step
+french dubstep
+accordion hawaiian
+acoustic texas blues
+afrobeat swing
+ambient trance folk
+techno balkan brass band
+korean acid trance
+russian glitch hop
+house reggae
+j-pop blues
+lo-fi afro house
+bedroom pop samba
+boogie celtic
+celtic
+classical caribbean
+dance
+pacific reggae afrobeat
+psychedelic cabaret
+rumba
+sitar cape verdean
+surf classical
+disco chillsynth
+drum and bass goa trance
+gospel dream pop
+havana american primitivism
+french dembow
+accordion drill
+acoustic slushwave
+afrobeat rockabilly
+ambient trance chanson
+techno afrobeat
+japanese swing
+russian flamenco
+hip hop dubstep
+j-pop acid jazz
+liquid drum and bass slushwave
+bedroom pop new jack swing
+boogie caribbean
+carnatic glitch hop
+classical boom bap
+dakar raga
+p-funk samba
+psychedelic acid trance
+roots reggae house
+sitar bubblegum dance
+surf acoustic blues
+disco chillstep
+drum and bass acoustic rock
+gospel disco
+harpischord klezmer
+french big band
+synthwave trance
+accordion delta blues
+acoustic rockabilly
+afrobeat new jack swing
+ambient trance alternative rock
+tango trance
+japanese surf rock
+russian dubstep
+hip hop techno
+j-pop acid breaks
+liquid drum and bass rockabilly
+bedroom pop
+boogie
+carnatic acid trance
+classical
+dakar new wave
+synthwave chillsynth
+synthwave cumbia
+p-funk mariachi
+psybient new wave
+roots reggae flamenco
+sitar bubblegum bass
+surf
+synthwave
+tango reggae
+disco alternative r&b
+drill sertanejo
+gospel acid breaks
+harpischord hip hop
+french afro-rock
+tabla bedroom pop
+accordion ambient techno
+acoustic rock chillsynth
+afrobeat griot
+ambient techno mento
+synthwave country
+japanese surf
+russian celtic
+hip hop
+indie grunge
+liquid drum and bass new jack swing
+p-funk jazz
+tango boogie
+barbershop breakbeat
+blues rock american primitivism
+carnatic
+city pop symphonic metal
+dakar math rock
+tango
+psybient griot
+roots reggae avant-garde jazz
+sitar bossa nova
+southern rock ska
+synthpop trance
+dirty south boom bap
+drill raga
+goa trance afro-cuban jazz
+harpischord g-funk
+fife and drum blues p-funk
+accordion afro trap
+acoustic rock afro-jazz
+afrobeat garage
+ambient techno hyphy
+tabla dream pop
+japanese shoegaze
+russian cumbia
+hawaiian r&b
+indie g-funk
+liquid drum and bass blues
+p-funk cloud rap
+synthwave dancehall
+barbershop balkan brass band
+blues rock afropiano
+caribbean
+city pop psybient
+dakar j-pop
+tabla jazz
+tango slushwave
+prog swamp blues
+rockabilly tango
+sitar blues
+southern rock calypso
+synthpop hawaiian
+tabla breakbeat
+dirty south balkan brass band
+drill chillwave
+goa trance
+harpischord drill
+flamenco hip hop
+japanese merengue
+accordion african folk
+acoustic rock
+afrobeat disco
+ambient techno chanson
+balkan brass band raga
+russian appalachian folk
+hawaiian merengue
+indie
+liquid drum and bass bluegrass
+p-funk
+lo-fi swing
+blues rock
+cape verdean acoustic rock
+city pop classical
+dakar house
+dirty south
+tabla hawaiian
+mariachi indie
+prog shoegaze
+rockabilly raga
+sitar alternative r&b
+southern rock
+synthpop coptic
+new orleans afrobeat
+drill cajun
+gnawawave
+harpischord drill and bass
+fife and drum blues acid breaks
+japanese jungle
+hyper-house
+accordion 16-bit
+acoustic raga
+afrobeat
+ambient techno afroswing
+balkan brass band classical
+russian ambient techno
+hawaiian electropop
+illbientwave
+liquid drum and bass
+norteñowave
+tabla kawaii future bass
+tabla new jack swing
+house surf
+blues folk
+cape verdean
+city pop breakbeat
+dakar gospel
+dembow punk
+pacific reggae
+hyper-roots reggae
+prog rockabilly
+rockabilly country
+sitar afro-jazz
+soulful soul
+synthpop
+new wave delta blues
+house
+drill bubblegum dance
+gnawa funk
+harpischord doo-wop
+electropop grunge
+japanese dancehall
+2-step surf
+acoustic grime
+afro-rock bachata
+ambient techno
+bachata
+hyphy balkan brass band
+russian afrikaner folk
+havana trap
+illbient cumbia
+koto tuareg
+norteño pop
+hyper-afrikaner folk
+blues cumbia
+calypso surf
+choral reggae
+dakar future bass
+dembow balkan brass band
+piano acid techno
+prog dubstep
+rockabilly
+sitar afro-funk
+soulful ska
+symphonic opera
+house roots reggae
+hip hop roots reggae
+drill breakbeat
+gnawa bubblegum bass
+harpischord boogie
+electronic math rock
+japanese chanson
+2-step country
+acoustic funk
+afro-rock ambient dub
+ambient noise wall chanson
+avant-garde jazz rap
+portuguese surf rock
+havana techno
+illbient alternative rock
+koto trap
+new wave acid trance
+blues afro house
+calypso opera
+choral folk
+dakar flamenco
+dembow
+piano coptic
+prog drum and bass
+rock liquid drum and bass
+shoegaze psybient
+soulful reggaeton
+symphonic metal
+drill and bass gnawa
+gnawa afrobeat
+harpischord anti-folk
+electronic grunge
+japanese boogie
+2-step
+acoustic electropop
+afro-rock
+ambient house p-funk
+avant-garde jazz illbient
+portuguese southern rock
+havana synthwave
+illbient afrikaner folk
+koto swing
+new wave
+bluegrass rock
+calypso bachata
+choral drill and bass
+dakar drumstep
+dark salsa
+prog dancepop
+prog dream pop
+rock dance
+shoegaze cumbia
+soulful folk
+symphonic merengue
+drill and bass balkan brass band
+gnawa
+harpischord ambient house
+electronic disco
+japanese americana
+16-bit roots reggae
+acoustic classical
+afro-jazz drill
+ambient house electropop
+avant-garde jazz griot
+portuguese dancehall
+havana grime
+illbient
+koto surf
+new orleans trance
+bluegrass punk
+calypso afroswing
+choral country
+dakar boom bap
+dark reggaeton
+prog southern rock
+prog disco
+rock balkan brass band
+shoegaze boom bap
+soulful city pop
+symphonic mento
+drill
+glitch hop swing
+harpischord acid jazz
+electro-techno
+japanese ambient house
+16-bit celtic
+acoustic chicago blues reggaeton
+afro-jazz carnatic
+ambient house cajun
+avant-garde jazz
+portuguese chillsynth
+french acoustic chicago blues
+hypnagogic swamp blues
+koto polka
+new orleans samba
+bluegrass k-pop
+cajun synthpop
+choral chillsynth
+dakar ambient dub
+dark merengue
+psychedelic tango
+prog breakbeat
+rock americana
+shoegaze afro-funk
+soulful chillsynth
+symphonic mariachi
+dreamy trance
+glitch hop acoustic texas blues
+grunge new jack swing
+electro-new wave
+japanese algorave
+16-bit
+acoustic chicago blues motown
+afro-jazz blues rock
+ambient house breakstep
+avant-garde jazz disco
+portuguese chillstep
+funk bedroom pop
+hypnagogic shoegaze
+koto house
+new orleans house
+bluegrass bubblegum bass
+cajun new wave
+choral chanson
+dakar afrobeat
+dark jazz
+reggae k-pop
+prog big band
+rock
+shoegaze afro-cuban jazz
+soulful cabaret
+symphonic doo-wop
+dreamy tango
+glitch hop 2-step
+grunge funk
+electro-jungle
+hindi southern rock
diff --git a/data/genres.ts b/data/genres.ts
new file mode 100644
index 0000000..0e0539f
--- /dev/null
+++ b/data/genres.ts
@@ -0,0 +1,32 @@
+// 导入风格文本文件
+import mainStyleText from './main_style.txt?raw';
+import allStyleText from './all_style.txt?raw';
+
+// 从main_style.txt读取主要风格（大类）
+export const MAIN_STYLES = mainStyleText
+  .split('\n')
+  .map(line => line.trim())
+  .filter(line => line.length > 0);
+
+// 从all_style.txt读取所有风格
+export const ALL_STYLES = allStyleText
+  .split('\n')
+  .map(line => line.trim())
+  .filter(line => line.length > 0);
+
+// 为了向后兼容，保留原来的GENRE_KEYS（使用主要风格）
+export const GENRE_KEYS = MAIN_STYLES;
+
+// 小类风格：从所有风格中排除主要风格（大类）
+// 创建主要风格的小写集合用于快速查找
+const mainStylesLower = new Set(MAIN_STYLES.map(s => s.toLowerCase().trim()));
+
+export const SUB_STYLES = ALL_STYLES.filter(style => {
+  const styleLower = style.toLowerCase().trim();
+  return !mainStylesLower.has(styleLower);
+});
+
+// 类型定义
+export type MainStyle = typeof MAIN_STYLES[number];
+export type AllStyle = typeof ALL_STYLES[number];
+export type SubStyle = typeof SUB_STYLES[number];
diff --git a/data/main_style.txt b/data/main_style.txt
new file mode 100644
index 0000000..f76a366
--- /dev/null
+++ b/data/main_style.txt
@@ -0,0 +1,105 @@
+16-bit
+2-step
+acid house
+acid techno
+acid trance
+acoustic chicago blues
+acoustic rock
+acoustic texas blues
+african folk
+afrikaner folk
+afro house
+afro trap
+afro-cuban jazz
+afro-funk
+afro-jazz
+afro-rock
+afrobeat
+afropiano
+afroswing
+algorave
+alternative r &b
+alternative rock
+ambient techno
+anti-folk
+avant-garde jazz
+bachata
+bedroom pop
+bluegrass
+blues rock
+boogie
+bossa nova
+bubblegum bass
+bubblegum dance
+cabaret
+cajun
+cape verdean
+caribbean
+carnatic
+celtic
+chanson
+chillstep
+chillsynth
+classical
+cloud rap
+coptic
+cumbia
+dance
+dancehall
+dancepop
+dembow
+dirty south
+dream pop
+drill
+dubstep
+edm
+egyptian
+garage
+gnawa
+goa trance
+grime
+griot
+grunge
+hip hop
+house
+hyphy
+illbient
+indie
+jazz
+jungle
+k-pop
+kawaii future bass
+klezmer
+liquid drum and bass
+mariachi
+math rock
+merengue
+motown
+new jack swing
+new wave
+p-funk
+pacific reggae
+polka
+pop
+raga
+rap
+reggae
+rock
+rockabilly
+rumba
+salsa
+samba
+ska
+soul
+southern rock
+surf
+surf rock
+swamp blues
+swing
+symphonic metal
+synthpop
+synthwave
+tango
+trance
+trap
+tuareg
diff --git a/i18n/translations.ts b/i18n/translations.ts
new file mode 100644
index 0000000..a94c795
--- /dev/null
+++ b/i18n/translations.ts
@@ -0,0 +1,2361 @@
+export type Language = 'en' | 'zh' | 'ja' | 'ko';
+
+export const translations = {
+  en: {
+    // Navigation
+    create: 'Create',
+    library: 'Library',
+    search: 'Search',
+    training: 'Training',
+    
+    // Theme
+    lightMode: 'Light Mode',
+    darkMode: 'Dark Mode',
+    
+    // Auth
+    signIn: 'Sign In',
+    signOut: 'Sign Out',
+    settings: 'Settings',
+    
+    // Username Modal
+    welcomeTitle: 'Welcome to ACE-Step UI',
+    welcomeSubtitle: 'Enter your name to get started creating AI music',
+    yourName: 'Your Name',
+    enterYourName: 'Enter your name',
+    getStarted: 'Get Started',
+    gettingStarted: 'Getting Started...',
+    yourMusicYourWay: 'Your music, your way. Create unlimited AI music for free.',
+    usernameMinLength: 'Username must be at least 2 characters',
+    usernameInvalidChars: 'Username can only contain letters, numbers, underscores, and dashes',
+    failedToSetUsername: 'Failed to set username',
+    
+    // Toasts
+    songNotAvailable: 'This song is no longer available.',
+    unableToPlay: 'Unable to play this song.',
+    generationTimedOut: 'Generation timed out',
+    generationFailed: 'Generation failed. Please try again.',
+    playlistCreated: 'Playlist created successfully!',
+    failedToCreatePlaylist: 'Failed to create playlist',
+    songAddedToPlaylist: 'Song added to playlist',
+    failedToAddSong: 'Failed to add song to playlist',
+    songDeleted: 'Song deleted successfully',
+    failedToDeleteSong: 'Failed to delete song',
+    
+    // Sidebar
+    aceStepUI: 'ACE-Step UI',
+    
+    // Common
+    cancel: 'Cancel',
+    save: 'Save',
+    delete: 'Delete',
+    edit: 'Edit',
+    share: 'Share',
+    download: 'Download',
+    play: 'Play',
+    pause: 'Pause',
+    normalSpeed: 'Normal',
+    next: 'Next',
+    previous: 'Previous',
+    
+    // Placeholders
+    searchPlaceholder: 'Search...',
+    
+    // Settings
+    language: 'Language',
+    english: 'English',
+    chinese: 'Chinese',
+    japaneseLanguage: 'Japanese',
+    koreanLanguage: 'Korean',
+    appearance: 'Appearance',
+    profile: 'Profile',
+    viewProfile: 'View Profile',
+    editProfile: 'Edit Profile',
+    account: 'Account',
+    username: 'Username',
+    memberSince: 'Member since',
+    about: 'About',
+    version: 'Version',
+    localAIMusicGenerator: 'Local AI Music Generator',
+    poweredBy: 'Powered by ACE-Step 1.5. Open source and free to use.',
+    createdBy: 'Created by Ambsd',
+    localizedBy: 'Localization & Training by bdsqlsz',
+    follow: 'Follow',
+    done: 'Done',
+    light: 'Light',
+    dark: 'Dark',
+    
+    // Mobile
+    createSong: 'Create Song',
+    viewList: 'View List',
+    
+    // CreatePanel - Modes
+    simple: 'Simple',
+    custom: 'Custom',
+    
+    // CreatePanel - Sections
+    audio: 'AUDIO',
+    lyrics: 'LYRICS',
+    styleOfMusic: 'STYLE OF MUSIC',
+    title: 'Title',
+    musicParameters: 'Music Parameters',
+    advancedSettings: 'Advanced Settings',
+    
+    // CreatePanel - LoRA
+    loraPath: 'LoRA Path',
+    loraPathPlaceholder: 'Enter LoRA model path...',
+    browseFiles: 'Browse files',
+    loraLoaded: 'LoRA Loaded',
+    loraUnloaded: 'LoRA Unloaded',
+    loraLoad: 'Load',
+    loraUnload: 'Unload',
+    loraScale: 'LoRA Scale',
+    loraScaleDescription: 'Adjust the influence strength of the LoRA model',
+    
+    // CreatePanel - Audio
+    reference: 'Reference',
+    cover: 'Cover',
+    fromLibrary: 'From library',
+    upload: 'Upload',
+    
+    // CreatePanel - Lyrics
+    lyricsPlaceholder: 'Your lyrics here...',
+    leaveLyricsEmpty: 'Leave empty for instrumental or toggle below',
+    vocal: 'Vocal',
+    instrumental: 'Instrumental',
+    vocalLanguage: 'Vocal Language',
+    autoInstrumental: 'Auto / Instrumental',
+    vocalArabic: 'Arabic',
+    vocalAzerbaijani: 'Azerbaijani',
+    vocalBulgarian: 'Bulgarian',
+    vocalBengali: 'Bengali',
+    vocalCatalan: 'Catalan',
+    vocalCzech: 'Czech',
+    vocalDanish: 'Danish',
+    vocalGerman: 'German',
+    vocalGreek: 'Greek',
+    vocalEnglish: 'English',
+    vocalSpanish: 'Spanish',
+    vocalPersian: 'Persian',
+    vocalFinnish: 'Finnish',
+    vocalFrench: 'French',
+    vocalHebrew: 'Hebrew',
+    vocalHindi: 'Hindi',
+    vocalCroatian: 'Croatian',
+    vocalHaitianCreole: 'Haitian Creole',
+    vocalHungarian: 'Hungarian',
+    vocalIndonesian: 'Indonesian',
+    vocalIcelandic: 'Icelandic',
+    vocalItalian: 'Italian',
+    vocalJapanese: 'Japanese',
+    vocalKorean: 'Korean',
+    vocalLatin: 'Latin',
+    vocalLithuanian: 'Lithuanian',
+    vocalMalay: 'Malay',
+    vocalNepali: 'Nepali',
+    vocalDutch: 'Dutch',
+    vocalNorwegian: 'Norwegian',
+    vocalPunjabi: 'Punjabi',
+    vocalPolish: 'Polish',
+    vocalPortuguese: 'Portuguese',
+    vocalRomanian: 'Romanian',
+    vocalRussian: 'Russian',
+    vocalSanskrit: 'Sanskrit',
+    vocalSlovak: 'Slovak',
+    vocalSerbian: 'Serbian',
+    vocalSwedish: 'Swedish',
+    vocalSwahili: 'Swahili',
+    vocalTamil: 'Tamil',
+    vocalTelugu: 'Telugu',
+    vocalThai: 'Thai',
+    vocalTagalog: 'Tagalog',
+    vocalTurkish: 'Turkish',
+    vocalUkrainian: 'Ukrainian',
+    vocalUrdu: 'Urdu',
+    vocalVietnamese: 'Vietnamese',
+    vocalCantonese: 'Cantonese',
+    vocalChineseMandarin: 'Chinese (Mandarin)',
+    
+    // CreatePanel - Style
+    stylePlaceholder: 'e.g. upbeat pop rock, emotional ballad, 90s hip hop',
+    genreMoodInstruments: 'Genre, mood, instruments, vibe',
+    refreshGenres: 'Refresh genre suggestions',
+    mainGenre: 'Main Genre',
+    subGenre: 'Sub Genre',
+    nameSong: 'Name your song',
+    
+    // CreatePanel - Parameters
+    bpm: 'BPM',
+    auto: 'Auto',
+    duration: 'Duration',
+    seconds: 's',
+    keyScale: 'Key & Scale',
+    timeSignature: 'Time Signature',
+    
+    // CreatePanel - Advanced
+    randomSeed: 'Random Seed',
+    thinking: 'Thinking',
+    audioFormat: 'Audio Format',
+    inferenceSteps: 'Inference Steps',
+    guidanceScale: 'Guidance Scale',
+    inferMethod: 'Inference Method',
+    shift: 'Shift',
+    timestepShiftForBase: 'Timestep shift for base models (not effective for turbo)',
+    expertControls: 'EXPERT CONTROLS',
+    lmParameters: 'LM Parameters',
+    controlLyricGeneration: 'Control lyric generation + creativity',
+    transform: 'TRANSFORM',
+    controlSourceAudio: 'Control how much the model follows the source audio',
+    audioCodes: 'Audio Codes',
+    optionalAudioCodes: 'Optional audio codes payload',
+    taskType: 'Task Type',
+    textToMusic: 'Text → Music',
+    audioCoverStrength: 'Audio Cover Strength',
+    repaintingStart: 'Repainting Start',
+    repaintingEnd: 'Repainting End',
+    instruction: 'Instruction',
+    lmTemperature: 'LM Temperature',
+    higherMoreRandom: 'Higher = more random (0-2)',
+    lmCfgScale: 'LM CFG Scale',
+    noCfgScale: '1.0 = no CFG (1-3)',
+    topK: 'Top-K',
+    topP: 'Top-P',
+    lmNegativePrompt: 'LM Negative Prompt',
+    noUserInput: 'NO USER INPUT',
+    thingsToAvoid: 'Things to avoid...',
+    useWhenCfgScaleGreater: 'Use when LM CFG Scale > 1.0',
+    lmTopK: 'LM Top-K',
+    lmTopP: 'LM Top-P',
+    
+    // Guidance section
+    guidance: 'GUIDANCE',
+    advancedCfgScheduling: 'Advanced CFG scheduling controls.',
+    cfgIntervalStart: 'CFG Interval Start',
+    cfgIntervalEnd: 'CFG Interval End',
+    customTimesteps: 'Custom Timesteps',
+    timestepsPlaceholder: 'e.g. 1,3,5,7',
+    scoreScale: 'Score Scale',
+    lmBatchChunkSize: 'LM Batch Chunk Size',
+    trackName: 'Track Name',
+    optionalTrackName: 'Optional track name',
+    completeTrackClasses: 'Complete Track Classes',
+    trackClassesPlaceholder: 'class-a, class-b',
+    useAdg: 'Use ADG',
+    allowLmBatch: 'Allow LM Batch',
+    useCotMetas: 'Use CoT Metas',
+    useCotCaption: 'Use CoT Caption',
+    useCotLanguage: 'Use CoT Language',
+    autogen: 'Autogen',
+    constrainedDecodingDebug: 'Constrained Decoding Debug',
+    formatCaption: 'Format Caption',
+    getScores: 'Get Scores',
+    getLrcLyrics: 'Get LRC (Lyrics)',
+    batchSize: 'Batch Size (Variations)',
+    variations: 'Variations',
+    bulkGenerate: 'Bulk Generate',
+    job: 'job',
+    jobs: 'jobs',
+    queueMultipleJobs: 'Queue multiple independent generation jobs with same settings',
+    numberOfVariations: 'Number of song variations to generate',
+    moreStepsBetterQuality: 'More steps = better quality, slower (8 recommended for turbo)',
+    howCloselyFollowPrompt: 'How closely to follow the prompt',
+    seed: 'Seed',
+    randomSeedRecommended: 'Randomized every run (recommended)',
+    fixedSeedReproducible: 'Fixed seed for reproducible results',
+    enterFixedSeed: 'Enter fixed seed',
+    thinkingCot: 'Thinking (CoT)',
+    mp3Smaller: 'MP3 (smaller)',
+    flacLossless: 'FLAC (lossless)',
+    odeDeterministic: 'ODE (deterministic)',
+    sdeStochastic: 'SDE (stochastic)',
+    min: 'min',
+    
+    // CreatePanel - Drag & Drop
+    dropToUseAudio: 'Drop to use audio',
+    dropToUpload: 'Drop to upload',
+    usingAsReference: 'Using as Reference',
+    usingAsCover: 'Using as Cover',
+    uploadingAsReference: 'Uploading as Reference',
+    uploadingAsCover: 'Uploading as Cover',
+    
+    // CreatePanel - Vocal Gender
+    vocalGender: 'Vocal Gender',
+    male: 'Male',
+    female: 'Female',
+    
+    // CreatePanel - LM Backend & Model
+    lmBackendLabel: 'LM Backend',
+    lmBackendPt: 'PT (~1.6 GB VRAM)',
+    lmBackendVllm: 'VLLM (~9.2 GB VRAM)',
+    lmBackendHint: 'PT uses less VRAM, VLLM may be faster on powerful GPUs',
+    lmModelLabel: 'LM Model',
+    lmModel06B: '0.6B (Lightest, ~0.5 GB VRAM)',
+    lmModel17B: '1.7B (Balanced, ~1.5 GB VRAM)',
+    lmModel4B: '4B (Best quality, ~4 GB VRAM)',
+    lmModelHint: 'Controls the LLM used for lyrics/style enhancement. Auto-downloads if not present.',
+    
+    // CreatePanel - Transcription
+    transcribing: 'Transcribing...',
+    transcribingWithWhisper: 'Transcribing with Whisper…',
+    
+    // CreatePanel - Library Tabs
+    uploaded: 'Uploaded',
+    createdTab: 'Created',
+    useTrack: 'Use',
+    noCreatedSongsYet: 'No created songs yet',
+    generateSongsToReuse: 'Generate songs to reuse them as cover or reference',
+    
+    // CreatePanel - Actions
+    generate: 'Generate',
+    generating: 'Generating...',
+    createButton: 'Create',
+    formatLyrics: 'Format Lyrics',
+    formatting: 'Formatting...',
+    clearAll: 'Clear All',
+    
+    // Simple Mode
+    describeYourSong: 'DESCRIBE YOUR SONG',
+    songDescriptionPlaceholder: 'A happy pop song about summer adventures with friends...',
+    quickSettings: 'QUICK SETTINGS',
+    key: 'Key',
+    time: 'Time',
+    
+    // CreatePanel - Errors
+    loginToGenerate: 'Please login to generate music',
+    uploadFailed: 'Upload failed',
+    formatFailed: 'Format failed',
+    formatFailedDetail: 'Format failed. Make sure the LLM is initialized.',
+    formatFailedLlmUnavailable: 'Format failed. The LLM may not be available.',
+    deleteSongConfirm: 'Are you sure you want to delete "{title}"? This action cannot be undone.',
+    profileUpdateFailed: 'Failed to update profile',
+    ffmpegLoadFailed: 'Failed to load video encoder. Please refresh and try again.',
+    videoRenderFailed: 'Video rendering failed. Please try again.',
+    
+    // SongList / Filters
+    searchYourSongs: 'Search your songs...',
+    filters: 'Filters',
+    refineBy: 'REFINE BY',
+    liked: 'Liked',
+    public: 'Public',
+    private: 'Private',
+    generatingStatus: 'Generating',
+    selectSongToView: 'Select a song to view details',
+    noSongsMatchFilters: 'No songs match your filters.',
+    clearFilters: 'Clear filters',
+    
+    // RightSidebar - Song Details
+    songDetails: 'Song Details',
+    created: 'Created',
+    styleTags: 'STYLE & TAGS',
+    lyricsSection: 'LYRICS',
+    copyLyrics: 'Copy',
+    
+    // Languages
+    japanese: 'Japanese',
+    spanish: 'Spanish',
+    german: 'German',
+    french: 'French',
+    portuguese: 'Portuguese',
+    russian: 'Russian',
+    italian: 'Italian',
+    dutch: 'Dutch',
+    polish: 'Polish',
+    turkish: 'Turkish',
+    vietnamese: 'Vietnamese',
+    czech: 'Czech',
+    persian: 'Persian',
+    arabic: 'Arabic',
+    korean: 'Korean',
+    thai: 'Thai',
+    hindi: 'Hindi',
+    indonesian: 'Indonesian',
+    ukrainian: 'Ukrainian',
+    hungarian: 'Hungarian',
+    swedish: 'Swedish',
+    romanian: 'Romanian',
+    greek: 'Greek',
+    
+    // Task Types
+    audio2audio: 'Audio → Audio',
+    coverTask: 'Cover',
+    repaintTask: 'Repaint',
+    
+    // Search Page
+    searchSongsPlaceholder: 'Search for songs, playlists, creators, or genres',
+    songsMatching: 'Songs matching',
+    featuredSongs: 'Featured Songs',
+    noSongsFound: 'No songs found matching',
+    creatorsMatching: 'Creators matching',
+    featuredCreators: 'Featured Creators',
+    noCreatorsFound: 'No creators found matching',
+    noCreatorsYet: 'No creators yet. Be the first to share your music!',
+    playlistsMatching: 'Playlists matching',
+    featuredPlaylists: 'Featured Playlists',
+    noPlaylistsFound: 'No playlists found matching',
+    noPlaylistsYet: 'No public playlists yet. Create one and share your favorites!',
+    genres: 'Genres',
+    songs: 'songs',
+    
+    // Library View
+    yourLibrary: 'Your Library',
+    newPlaylist: 'New Playlist',
+    likedSongs: 'Liked Songs',
+    playlists: 'Playlists',
+    playlist: 'Playlist',
+    byYou: 'By You',
+    
+    // User Profile
+    back: 'Back',
+    loadingProfile: 'Loading profile...',
+    userNotFound: 'User not found',
+    goBack: 'Go Back',
+    likes: 'Likes',
+    plays: 'Plays',
+    recent: 'Recent',
+    top: 'Top',
+    noPublicSongsYet: 'No public songs yet',
+    seeMore: 'See More',
+    joined: 'Joined',
+    supportingSince: 'Supporting since',
+    avatarImage: 'Avatar Image',
+    uploadAvatar: 'Upload Avatar',
+    avatarFormats: 'JPG, PNG, WebP, GIF • Max 5MB',
+    bannerImage: 'Banner Image',
+    clickToUploadBanner: 'Click to upload banner',
+    bannerFormats: 'Recommended: 1500x500px • JPG, PNG, WebP, GIF • Max 5MB',
+    bio: 'Bio',
+    bioPlaceholder: 'Tell us about yourself...',
+    uploadingAvatar: 'Uploading Avatar...',
+    uploadingBanner: 'Uploading Banner...',
+    saving: 'Saving...',
+    saveChanges: 'Save Changes',
+    
+    // Playlist Modals
+    createPlaylist: 'Create Playlist',
+    playlistName: 'Name',
+    playlistNamePlaceholder: 'My Awesome Playlist',
+    playlistDescription: 'Description',
+    descriptionPlaceholder: 'Vibes for coding...',
+    addToPlaylist: 'Add to Playlist',
+    createNewPlaylist: 'Create New Playlist',
+    noExistingPlaylists: 'No existing playlists.',
+    
+    // Edit Profile Modal (Settings)
+    usernameLabel: 'Username',
+    usernamePlaceholder: 'username',
+    usernameMinLengthError: 'Username must be at least 2 characters',
+    usernameTakenError: 'Username is already taken',
+    usernameUpdateFailedError: 'Failed to update username',
+    usernameRequirements: 'Letters, numbers, underscores, and hyphens only',
+    
+    // Song Details (RightSidebar)
+    more: 'more',
+    copy: 'Copy',
+    copied: 'Copied!',
+    copyAllTags: 'Copy all tags',
+    
+    // Song Dropdown Menu
+    createVideo: 'Create Video',
+    editAudio: 'Edit Audio',
+    extractStems: 'Extract Stems',
+    reusePrompt: 'Reuse Prompt',
+    deleteSong: 'Delete Song',
+    useAsReference: 'Use as Reference',
+    coverSong: 'Cover Song',
+    confirmDeleteTitle: 'Delete Song',
+    confirmDeleteManyTitle: 'Delete Songs',
+    deleteSongsConfirm: 'Delete {count} songs? This action cannot be undone.',
+    songsDeletedSuccess: 'Songs deleted successfully',
+    songsDeletedPartial: 'Deleted {succeeded}/{total} songs',
+    deleteUploadConfirm: 'Delete this upload? This action cannot be undone.',
+    cannotBeUndone: 'This action cannot be undone.',
+    
+    // Player
+    nowPlaying: 'Now Playing',
+    downloadAudio: 'Download Audio',
+    openInEditor: 'Open in Editor',
+    anonymous: 'Anonymous',
+    
+    // PlaylistDetail
+    loadingPlaylist: 'Loading playlist...',
+    playlistNotFound: 'Playlist not found',
+    deletePlaylistConfirm: 'Are you sure you want to delete this playlist?',
+    dateAdded: 'Date Added',
+    justNow: 'Just now',
+    unknown: 'Unknown',
+    
+    // SongProfile
+    loadingSong: 'Loading song...',
+    songNotFound: 'Song not found',
+    similar: 'Similar',
+    by: 'By',
+    
+    // ShareModal
+    shareSong: 'Share Song',
+    shareOnX: 'Share on X',
+    shareOnFacebook: 'Share on Facebook',
+    shareOnWhatsApp: 'Share on WhatsApp',
+    shareOnTelegram: 'Share on Telegram',
+    shareOnReddit: 'Share on Reddit',
+    shareOnLinkedIn: 'Share on LinkedIn',
+    shareViaEmail: 'Share via Email',
+    copyLink: 'Copy Link',
+    emailSubject: 'Check out this AI song',
+    emailBody: 'Hey!\n\nI created this AI-generated song and thought you\'d love it:\n\n"{title}" by {creator}\n{style}\n\nListen here: {url}\n\nMade with ACE-Step UI - free and open source local AI music generation!',
+    
+    // Reference Modal
+    referenceModalTitle: 'Reference',
+    coverModalTitle: 'Cover',
+    referenceModalDescription: 'Create songs inspired by a reference track',
+    coverModalDescription: 'Transform an existing track into a new version',
+    uploadAudio: 'Upload audio',
+    uploadingAudio: 'Uploading...',
+    audioFormats: 'MP3, WAV, FLAC',
+    mine: 'Mine',
+    loadingTracks: 'Loading tracks...',
+    noTracksYet: 'No tracks yet',
+    uploadAudioFilesAsReferences: 'Upload audio files to use them as references',
+    
+    // Training Module
+    loraTraining: 'LoRA Training',
+    trainingDescription: 'Build datasets from your audio files and train custom LoRA adapters',
+    datasetBuilder: 'Dataset Builder',
+    trainLora: 'Train LoRA',
+    quickStart: 'Quick Start',
+    chooseOneOption: 'Choose one: Load existing dataset OR Scan new directory',
+    loadExistingDataset: 'Load Existing Dataset',
+    loadDataset: 'Load',
+    scanNewDirectory: 'Scan New Directory',
+    scanDataset: 'Scan',
+    datasetSettings: 'Dataset Settings',
+    datasetName: 'Dataset Name',
+    customActivationTag: 'Custom Activation Tag',
+    allInstrumental: 'All Instrumental',
+    tagPosition: 'Tag Position',
+    tagPrepend: 'Prepend (tag, caption)',
+    tagAppend: 'Append (caption, tag)',
+    tagReplace: 'Replace caption',
+    genreRatio: 'Genre Ratio',
+    genreRatioHint: '0% = all Caption, 100% = all Genre',
+    autoLabelWithAI: 'Auto-Label with AI',
+    autoLabelDescription: 'Generate metadata for audio files: Caption, BPM, Key, Time Signature',
+    skipMetas: 'Skip BPM/Key/Time Signature',
+    onlyUnlabeled: 'Only Unlabeled',
+    autoLabelAll: 'Auto-Label All',
+    filename: 'Filename',
+    labeled: 'Labeled',
+    saveDataset: 'Save Dataset',
+    preprocessToTensors: 'Preprocess to Tensors',
+    preprocessDescription: 'Converts dataset to pre-computed tensors for fast training (requires model loaded)',
+    preprocess: 'Preprocess',
+    preprocessedDataset: 'Preprocessed Dataset',
+    loraSettings: 'LoRA Settings',
+    loraRank: 'LoRA Rank',
+    loraAlpha: 'LoRA Alpha',
+    dropout: 'Dropout',
+    trainingParameters: 'Training Parameters',
+    learningRate: 'Learning Rate',
+    maxEpochs: 'Max Epochs',
+    gradientAccumulation: 'Gradient Accumulation',
+    saveEvery: 'Save Every',
+    epochs: 'epochs',
+    outputDirectory: 'Output Directory',
+    useFP8: 'Use FP8 Quantization',
+    fp8Description: 'Reduces VRAM usage',
+    startTraining: 'Start Training',
+    stopTraining: 'Stop Training',
+    trainingProgress: 'Training Progress',
+    trainingLog: 'Training Log',
+    trainingStatus: 'Training Status',
+    tensorboardView: 'TensorBoard View',
+    showTensorboard: 'Show TensorBoard',
+    hideTensorboard: 'Hide TensorBoard',
+    openInNewTab: 'Open in New Tab',
+    
+    // Training Status Messages
+    scanning: 'Scanning...',
+    autoLabeling: 'Auto-labeling...',
+    savingDataset: 'Saving...',
+    preprocessing: 'Preprocessing...',
+    loadingDataset: 'Loading...',
+    startingTraining: 'Starting...',
+    error: 'Error',
+    datasetInfo: 'Dataset: {name}, Samples: {samples}, Labeled: {labeled}',
+    trainingStep: 'Step {step} - Loss: {loss}',
+    editSample: 'Edit Sample',
+    caption: 'Caption',
+    genre: 'Genre',
+    promptOverride: 'Prompt Override',
+    musicDescription: 'Music description...',
+    overrideGlobalRatio: 'Override global ratio for this sample',
+    editableUsedForTraining: 'editable, used for training',
+    useGlobalRatio: 'Use Global Ratio',
+    thisSample: 'this sample',
+  },
+  zh: {
+    // Navigation
+    create: '创作',
+    library: '音乐库',
+    search: '搜索',
+    training: '训练',
+    
+    // Theme
+    lightMode: '浅色模式',
+    darkMode: '深色模式',
+    
+    // Auth
+    signIn: '登录',
+    signOut: '退出',
+    settings: '设置',
+    
+    // Username Modal
+    welcomeTitle: '欢迎使用 ACE-Step UI',
+    welcomeSubtitle: '输入您的名字开始创作 AI 音乐',
+    yourName: '您的名字',
+    enterYourName: '请输入您的名字',
+    getStarted: '开始使用',
+    gettingStarted: '正在启动...',
+    yourMusicYourWay: '您的音乐，您的方式。免费创作无限 AI 音乐。',
+    usernameMinLength: '用户名至少需要 2 个字符',
+    usernameInvalidChars: '用户名只能包含字母、数字、下划线和破折号',
+    failedToSetUsername: '设置用户名失败',
+    
+    // Toasts
+    songNotAvailable: '该歌曲已不可用。',
+    unableToPlay: '无法播放该歌曲。',
+    generationTimedOut: '生成超时',
+    generationFailed: '生成失败，请重试。',
+    playlistCreated: '歌单创建成功！',
+    failedToCreatePlaylist: '创建歌单失败',
+    songAddedToPlaylist: '已添加到歌单',
+    failedToAddSong: '添加歌曲失败',
+    songDeleted: '歌曲删除成功',
+    failedToDeleteSong: '删除歌曲失败',
+    
+    // Sidebar
+    aceStepUI: 'ACE-Step UI',
+    
+    // Common
+    cancel: '取消',
+    save: '保存',
+    delete: '删除',
+    edit: '编辑',
+    share: '分享',
+    download: '下载',
+    play: '播放',
+    pause: '暂停',
+    normalSpeed: '正常',
+    next: '下一首',
+    previous: '上一首',
+    
+    // Placeholders
+    searchPlaceholder: '搜索...',
+    
+    // Settings
+    language: '语言',
+    english: 'English',
+    chinese: '简体中文',
+    japaneseLanguage: '日本語',
+    koreanLanguage: '한국어',
+    appearance: '外观',
+    profile: '个人资料',
+    viewProfile: '查看个人资料',
+    editProfile: '编辑资料',
+    account: '账户',
+    username: '用户名',
+    memberSince: '加入时间',
+    about: '关于',
+    version: '版本',
+    localAIMusicGenerator: '本地 AI 音乐生成器',
+    poweredBy: '由 ACE-Step 1.5 驱动。开源免费使用。',
+    createdBy: '开发者 Ambsd',
+    localizedBy: '本地化翻译 & 训练 青龙圣者',
+    follow: '关注',
+    done: '完成',
+    light: '浅色',
+    dark: '深色',
+    
+    // Mobile
+    createSong: '创作歌曲',
+    viewList: '查看列表',
+    
+    // CreatePanel - Modes
+    simple: '简单',
+    custom: '自定义',
+    
+    // CreatePanel - Sections
+    audio: '音频',
+    lyrics: '歌词',
+    styleOfMusic: '音乐风格',
+    title: '标题',
+    musicParameters: '音乐参数',
+    advancedSettings: '高级设置',
+    
+    // CreatePanel - LoRA
+    loraPath: 'LoRA 路径',
+    loraPathPlaceholder: '输入 LoRA 模型路径...',
+    browseFiles: '浏览文件',
+    loraLoaded: 'LoRA 已加载',
+    loraUnloaded: 'LoRA 未加载',
+    loraLoad: '加载',
+    loraUnload: '卸载',
+    loraScale: 'LoRA 强度',
+    loraScaleDescription: '调整 LoRA 模型的影响强度',
+    
+    // CreatePanel - Audio
+    reference: '参考',
+    cover: '翻唱',
+    fromLibrary: '从库中选择',
+    upload: '上传',
+    
+    // CreatePanel - Lyrics
+    lyricsPlaceholder: '在此输入歌词...',
+    leaveLyricsEmpty: '留空表示纯音乐，或使用下方开关',
+    vocal: '人声',
+    instrumental: '纯音乐',
+    vocalLanguage: '人声语言',
+    autoInstrumental: '自动 / 纯音乐',
+    vocalArabic: '阿拉伯语',
+    vocalAzerbaijani: '阿塞拜疆语',
+    vocalBulgarian: '保加利亚语',
+    vocalBengali: '孟加拉语',
+    vocalCatalan: '加泰罗尼亚语',
+    vocalCzech: '捷克语',
+    vocalDanish: '丹麦语',
+    vocalGerman: '德语',
+    vocalGreek: '希腊语',
+    vocalEnglish: '英语',
+    vocalSpanish: '西班牙语',
+    vocalPersian: '波斯语',
+    vocalFinnish: '芬兰语',
+    vocalFrench: '法语',
+    vocalHebrew: '希伯来语',
+    vocalHindi: '印地语',
+    vocalCroatian: '克罗地亚语',
+    vocalHaitianCreole: '海地克里奥尔语',
+    vocalHungarian: '匈牙利语',
+    vocalIndonesian: '印尼语',
+    vocalIcelandic: '冰岛语',
+    vocalItalian: '意大利语',
+    vocalJapanese: '日语',
+    vocalKorean: '韩语',
+    vocalLatin: '拉丁语',
+    vocalLithuanian: '立陶宛语',
+    vocalMalay: '马来语',
+    vocalNepali: '尼泊尔语',
+    vocalDutch: '荷兰语',
+    vocalNorwegian: '挪威语',
+    vocalPunjabi: '旁遮普语',
+    vocalPolish: '波兰语',
+    vocalPortuguese: '葡萄牙语',
+    vocalRomanian: '罗马尼亚语',
+    vocalRussian: '俄语',
+    vocalSanskrit: '梵语',
+    vocalSlovak: '斯洛伐克语',
+    vocalSerbian: '塞尔维亚语',
+    vocalSwedish: '瑞典语',
+    vocalSwahili: '斯瓦希里语',
+    vocalTamil: '泰米尔语',
+    vocalTelugu: '泰卢固语',
+    vocalThai: '泰语',
+    vocalTagalog: '他加禄语',
+    vocalTurkish: '土耳其语',
+    vocalUkrainian: '乌克兰语',
+    vocalUrdu: '乌尔都语',
+    vocalVietnamese: '越南语',
+    vocalCantonese: '粤语',
+    vocalChineseMandarin: '中文（普通话）',
+    
+    // CreatePanel - Style
+    stylePlaceholder: '例如：欢快流行摇滚、抒情民谣、90年代嘻哈',
+    genreMoodInstruments: '曲风、情绪、乐器、氛围',
+    refreshGenres: '刷新风格建议',
+    mainGenre: '大类风格',
+    subGenre: '小类风格',
+    nameSong: '为歌曲命名',
+    
+    // CreatePanel - Parameters
+    bpm: '曲速*(BPM)',
+    auto: '自动',
+    duration: '时长',
+    seconds: '秒',
+    keyScale: '调式',
+    timeSignature: '拍号',
+    
+    // CreatePanel - Advanced
+    randomSeed: '随机种子',
+    thinking: '思考模式',
+    audioFormat: '音频格式',
+    inferenceSteps: '推理步数',
+    guidanceScale: '引导强度(cfg)',
+    inferMethod: '推理方法',
+    shift: '偏移(shift)',
+    timestepShiftForBase: '基础模型的时间步偏移（turbo 模式无效）',
+    expertControls: '专家控制',
+    lmParameters: 'LM 参数',
+    controlLyricGeneration: '控制歌词生成和创造力',
+    transform: '音频转换',
+    controlSourceAudio: '控制模型遵循源音频的程度',
+    audioCodes: '音频编码',
+    optionalAudioCodes: '可选的音频编码载荷',
+    taskType: '任务类型',
+    textToMusic: '文本 → 音乐',
+    audioCoverStrength: '音频翻唱强度',
+    repaintingStart: '重绘开始',
+    repaintingEnd: '重绘结束',
+    instruction: '指令',
+    lmTemperature: 'LM 温度',
+    higherMoreRandom: '值越高越随机（0-2）',
+    lmCfgScale: 'LM CFG 强度',
+    noCfgScale: '1.0 = 无 CFG（1-3）',
+    topK: 'Top-K',
+    topP: 'Top-P',
+    lmNegativePrompt: 'LM 负面提示词',
+    noUserInput: '无用户输入',
+    thingsToAvoid: '要避免的内容...',
+    useWhenCfgScaleGreater: '当 LM CFG 强度 > 1.0 时使用',
+    lmTopK: 'LM Top-K',
+    lmTopP: 'LM Top-P',
+    
+    // Guidance section
+    guidance: '引导控制(guidance)',
+    advancedCfgScheduling: '高级 CFG 调度控制。',
+    cfgIntervalStart: 'CFG 区间开始',
+    cfgIntervalEnd: 'CFG 区间结束',
+    customTimesteps: '自定义时间步',
+    timestepsPlaceholder: '例如：1,3,5,7',
+    scoreScale: '分数缩放',
+    lmBatchChunkSize: 'LM 批次块大小',
+    trackName: '音轨名称',
+    optionalTrackName: '可选的音轨名称',
+    completeTrackClasses: '完整音轨类别',
+    trackClassesPlaceholder: '类别-a, 类别-b',
+    useAdg: '使用 ADG',
+    allowLmBatch: '允许 LM 批处理',
+    useCotMetas: '使用 CoT 元数据',
+    useCotCaption: '使用 CoT 字幕',
+    useCotLanguage: '使用 CoT 语言',
+    autogen: '自动生成',
+    constrainedDecodingDebug: '约束解码调试',
+    formatCaption: '格式化字幕',
+    getScores: '获取分数',
+    getLrcLyrics: '获取 LRC（歌词）',
+    batchSize: '批量大小（变体数）',
+    variations: '变体',
+    bulkGenerate: '批量生成',
+    job: '任务',
+    jobs: '任务',
+    queueMultipleJobs: '使用相同设置排队多个独立生成任务',
+    numberOfVariations: '要生成的歌曲变体数量',
+    moreStepsBetterQuality: '步数越多质量越好，速度越慢（turbo 推荐 8）',
+    howCloselyFollowPrompt: '多严格遵循提示词',
+    seed: '种子',
+    randomSeedRecommended: '每次运行随机（推荐）',
+    fixedSeedReproducible: '固定种子以获得可重现结果',
+    enterFixedSeed: '输入固定种子',
+    thinkingCot: '思考模式（CoT）',
+    mp3Smaller: 'MP3（较小）',
+    flacLossless: 'FLAC（无损）',
+    odeDeterministic: 'ODE（确定性）',
+    sdeStochastic: 'SDE（随机性）',
+    min: '分钟',
+    
+    // CreatePanel - Drag & Drop
+    dropToUseAudio: '拖放以使用音频',
+    dropToUpload: '拖放以上传',
+    usingAsReference: '用作参考',
+    usingAsCover: '用作翻唱',
+    uploadingAsReference: '上传为参考',
+    uploadingAsCover: '上传为翻唱',
+    
+    // CreatePanel - Vocal Gender
+    vocalGender: '人声性别',
+    male: '男声',
+    female: '女声',
+    
+    // CreatePanel - LM Backend & Model
+    lmBackendLabel: 'LM 后端',
+    lmBackendPt: 'PT（~1.6 GB 显存）',
+    lmBackendVllm: 'VLLM（~9.2 GB 显存）',
+    lmBackendHint: 'PT 显存占用更少，VLLM 在高性能 GPU 上可能更快',
+    lmModelLabel: 'LM 模型',
+    lmModel06B: '0.6B（最轻量，~0.5 GB 显存）',
+    lmModel17B: '1.7B（均衡，~1.5 GB 显存）',
+    lmModel4B: '4B（最佳质量，~4 GB 显存）',
+    lmModelHint: '控制用于歌词/风格增强的 LLM。如不存在将自动下载。',
+    
+    // CreatePanel - Transcription
+    transcribing: '转录中...',
+    transcribingWithWhisper: '正在使用 Whisper 转录…',
+    
+    // CreatePanel - Library Tabs
+    uploaded: '已上传',
+    createdTab: '已创建',
+    useTrack: '使用',
+    noCreatedSongsYet: '暂无已创建歌曲',
+    generateSongsToReuse: '生成歌曲后可作为翻唱或参考使用',
+    
+    // CreatePanel - Actions
+    generate: '生成',
+    generating: '生成中...',
+    createButton: '创建',
+    formatLyrics: '格式化歌词',
+    formatting: '格式化中...',
+    clearAll: '清空全部',
+    
+    // Simple Mode
+    describeYourSong: '描述你的歌曲',
+    songDescriptionPlaceholder: '一首关于夏日和朋友冒险的快乐流行歌曲...',
+    quickSettings: '快速设置',
+    key: '调式',
+    time: '拍号',
+    
+    // CreatePanel - Errors
+    loginToGenerate: '请登录以生成音乐',
+    uploadFailed: '上传失败',
+    formatFailed: '格式化失败',
+    formatFailedDetail: '格式化失败。请确保 LLM 已初始化。',
+    formatFailedLlmUnavailable: '格式化失败。LLM 可能不可用。',
+    deleteSongConfirm: '确定要删除"{title}"吗？此操作无法撤销。',
+    profileUpdateFailed: '更新个人资料失败',
+    ffmpegLoadFailed: '加载视频编码器失败。请刷新后重试。',
+    videoRenderFailed: '视频渲染失败。请重试。',
+    
+    // SongList / Filters
+    searchYourSongs: '搜索你的歌曲...',
+    filters: '筛选',
+    refineBy: '筛选条件',
+    liked: '已喜欢',
+    public: '公开',
+    private: '私密',
+    generatingStatus: '生成中',
+    selectSongToView: '选择一首歌曲查看详情',
+    noSongsMatchFilters: '没有歌曲符合你的筛选条件。',
+    clearFilters: '清除筛选',
+    
+    // RightSidebar - Song Details
+    songDetails: '歌曲详情',
+    created: '创建于',
+    styleTags: '风格与标签',
+    lyricsSection: '歌词',
+    copyLyrics: '复制',
+    
+    // Languages
+    japanese: '日语',
+    spanish: '西班牙语',
+    german: '德语',
+    french: '法语',
+    portuguese: '葡萄牙语',
+    russian: '俄语',
+    italian: '意大利语',
+    dutch: '荷兰语',
+    polish: '波兰语',
+    turkish: '土耳其语',
+    vietnamese: '越南语',
+    czech: '捷克语',
+    persian: '波斯语',
+    arabic: '阿拉伯语',
+    korean: '韩语',
+    thai: '泰语',
+    hindi: '印地语',
+    indonesian: '印尼语',
+    ukrainian: '乌克兰语',
+    hungarian: '匈牙利语',
+    swedish: '瑞典语',
+    romanian: '罗马尼亚语',
+    greek: '希腊语',
+    
+    // Task Types
+    audio2audio: '音频 → 音频',
+    coverTask: '翻唱',
+    repaintTask: '重绘',
+    
+    // Search Page
+    searchSongsPlaceholder: '搜索歌曲、播放列表、创作者或风格',
+    songsMatching: '匹配的歌曲',
+    featuredSongs: '精选歌曲',
+    noSongsFound: '未找到匹配的歌曲',
+    creatorsMatching: '匹配的创作者',
+    featuredCreators: '精选创作者',
+    noCreatorsFound: '未找到匹配的创作者',
+    noCreatorsYet: '暂无创作者。成为第一个分享音乐的人！',
+    playlistsMatching: '匹配的播放列表',
+    featuredPlaylists: '精选播放列表',
+    noPlaylistsFound: '未找到匹配的播放列表',
+    noPlaylistsYet: '暂无公开播放列表。创建一个并分享你的最爱！',
+    genres: '风格',
+    songs: '首歌曲',
+    
+    // Library View
+    yourLibrary: '我的音乐库',
+    newPlaylist: '新建播放列表',
+    likedSongs: '喜欢的歌曲',
+    playlists: '播放列表',
+    playlist: '播放列表',
+    byYou: '由你创建',
+    
+    // User Profile
+    back: '返回',
+    loadingProfile: '加载中...',
+    userNotFound: '用户不存在',
+    goBack: '返回',
+    likes: '喜欢',
+    plays: '播放',
+    recent: '最新',
+    top: '热门',
+    noPublicSongsYet: '暂无公开歌曲',
+    seeMore: '查看更多',
+    joined: '加入于',
+    supportingSince: '支持者自',
+    avatarImage: '头像',
+    uploadAvatar: '上传头像',
+    avatarFormats: 'JPG、PNG、WebP、GIF • 最大 5MB',
+    bannerImage: '横幅图片',
+    clickToUploadBanner: '点击上传横幅',
+    bannerFormats: '推荐尺寸：1500x500px • JPG、PNG、WebP、GIF • 最大 5MB',
+    bio: '个人简介',
+    bioPlaceholder: '介绍一下你自己...',
+    uploadingAvatar: '上传头像中...',
+    uploadingBanner: '上传横幅中...',
+    saving: '保存中...',
+    saveChanges: '保存更改',
+    
+    // Playlist Modals
+    createPlaylist: '创建播放列表',
+    playlistName: '名称',
+    playlistNamePlaceholder: '我的超棒播放列表',
+    playlistDescription: '描述',
+    descriptionPlaceholder: '编程时的氛围音乐...',
+    addToPlaylist: '添加到播放列表',
+    createNewPlaylist: '创建新播放列表',
+    noExistingPlaylists: '暂无播放列表。',
+    
+    // Edit Profile Modal (Settings)
+    usernameLabel: '用户名',
+    usernamePlaceholder: '用户名',
+    usernameMinLengthError: '用户名至少需要 2 个字符',
+    usernameTakenError: '用户名已被占用',
+    usernameUpdateFailedError: '更新用户名失败',
+    usernameRequirements: '仅允许字母、数字、下划线和短横线',
+    
+    // Song Details (RightSidebar)
+    more: '更多',
+    copy: '复制',
+    copied: '已复制！',
+    copyAllTags: '复制所有标签',
+    
+    // Song Dropdown Menu
+    createVideo: '创建视频',
+    editAudio: '编辑音频',
+    extractStems: '提取音轨',
+    reusePrompt: '重用提示词',
+    deleteSong: '删除歌曲',
+    useAsReference: '用作参考',
+    coverSong: '翻唱歌曲',
+    confirmDeleteTitle: '删除歌曲',
+    confirmDeleteManyTitle: '删除歌曲',
+    deleteSongsConfirm: '确定要删除 {count} 首歌曲吗？此操作无法撤销。',
+    songsDeletedSuccess: '歌曲删除成功',
+    songsDeletedPartial: '已删除 {succeeded}/{total} 首歌曲',
+    deleteUploadConfirm: '确定要删除此上传文件吗？此操作无法撤销。',
+    cannotBeUndone: '此操作无法撤销。',
+    
+    // Player
+    nowPlaying: '正在播放',
+    downloadAudio: '下载音频',
+    openInEditor: '在编辑器中打开',
+    anonymous: '匿名用户',
+    
+    // PlaylistDetail
+    loadingPlaylist: '加载播放列表中...',
+    playlistNotFound: '播放列表未找到',
+    deletePlaylistConfirm: '确定要删除这个播放列表吗？',
+    dateAdded: '添加日期',
+    justNow: '刚刚',
+    unknown: '未知',
+    
+    // SongProfile
+    loadingSong: '加载歌曲中...',
+    songNotFound: '歌曲未找到',
+    similar: '相似',
+    by: '由',
+    
+    // ShareModal
+    shareSong: '分享歌曲',
+    shareOnX: '分享到 X',
+    shareOnFacebook: '分享到 Facebook',
+    shareOnWhatsApp: '分享到 WhatsApp',
+    shareOnTelegram: '分享到 Telegram',
+    shareOnReddit: '分享到 Reddit',
+    shareOnLinkedIn: '分享到 LinkedIn',
+    shareViaEmail: '通过邮件分享',
+    copyLink: '复制链接',
+    emailSubject: '来听听这首AI歌曲',
+    emailBody: '嘿！\n\n我创作了这首AI生成的歌曲，觉得你会喜欢：\n\n《{title}》- {creator}\n{style}\n\n点击收听：{url}\n\n使用 ACE-Step UI 制作 - 免费开源的本地AI音乐生成工具！',
+    
+    // Reference Modal
+    referenceModalTitle: '参考音频',
+    coverModalTitle: '翻唱音频',
+    referenceModalDescription: '基于参考音轨创作歌曲',
+    coverModalDescription: '将现有音轨转换为新版本',
+    uploadAudio: '上传音频',
+    uploadingAudio: '上传中...',
+    audioFormats: 'MP3、WAV、FLAC',
+    mine: '我的',
+    loadingTracks: '加载中...',
+    noTracksYet: '暂无音轨',
+    uploadAudioFilesAsReferences: '上传音频文件作为参考',
+    
+    // Training Module
+    loraTraining: 'LoRA 训练',
+    trainingDescription: '从音频文件构建数据集并训练自定义 LoRA 适配器',
+    datasetBuilder: '数据集构建器',
+    trainLora: '训练 LoRA',
+    quickStart: '快速开始',
+    chooseOneOption: '选择一项：加载现有数据集 或 扫描新目录',
+    loadExistingDataset: '加载现有数据集',
+    loadDataset: '加载',
+    scanNewDirectory: '扫描新目录',
+    scanDataset: '扫描',
+    datasetSettings: '数据集设置',
+    datasetName: '数据集名称',
+    customActivationTag: '自定义激活标签',
+    allInstrumental: '全部纯音乐',
+    tagPosition: '标签位置',
+    tagPrepend: '前置（标签，描述）',
+    tagAppend: '后置（描述，标签）',
+    tagReplace: '替换描述',
+    genreRatio: '风格比例',
+    genreRatioHint: '0% = 全部描述，100% = 全部风格',
+    autoLabelWithAI: 'AI 自动标注',
+    autoLabelDescription: '为音频文件生成元数据：描述、BPM、调式、拍号',
+    skipMetas: '跳过 BPM/调式/拍号',
+    onlyUnlabeled: '仅未标注',
+    autoLabelAll: '自动标注全部',
+    filename: '文件名',
+    labeled: '已标注',
+    saveDataset: '保存数据集',
+    preprocessToTensors: '预处理为张量',
+    preprocessDescription: '将数据集转换为预计算张量以加速训练（需要加载模型）',
+    preprocess: '预处理',
+    preprocessedDataset: '预处理数据集',
+    loraSettings: 'LoRA 设置',
+    loraRank: 'LoRA Rank',
+    loraAlpha: 'LoRA Alpha',
+    dropout: 'Dropout',
+    trainingParameters: '训练参数',
+    learningRate: '学习率',
+    maxEpochs: '最大轮数',
+    gradientAccumulation: '梯度累积',
+    saveEvery: '保存间隔',
+    epochs: '轮',
+    outputDirectory: '输出目录',
+    useFP8: '使用 FP8 量化',
+    fp8Description: '减少显存占用',
+    startTraining: '开始训练',
+    stopTraining: '停止训练',
+    trainingProgress: '训练进度',
+    trainingLog: '训练日志',
+    trainingStatus: '训练状态',
+    tensorboardView: 'TensorBoard 视图',
+    showTensorboard: '显示 TensorBoard',
+    hideTensorboard: '隐藏 TensorBoard',
+    openInNewTab: '在新标签页打开',
+    
+    // Training Status Messages
+    scanning: '扫描中...',
+    autoLabeling: '自动标注中...',
+    savingDataset: '保存中...',
+    preprocessing: '预处理中...',
+    loadingDataset: '加载中...',
+    startingTraining: '启动中...',
+    error: '错误',
+    datasetInfo: '数据集：{name}，样本数：{samples}，已标注：{labeled}',
+    trainingStep: '步骤 {step} - 损失：{loss}',
+    editSample: '编辑样本',
+    caption: '描述',
+    genre: '风格',
+    promptOverride: '提示词覆盖',
+    musicDescription: '音乐描述...',
+    overrideGlobalRatio: '覆盖此样本的全局比例',
+    editableUsedForTraining: '可编辑，用于训练',
+    useGlobalRatio: '使用全局比例',
+    thisSample: '此样本',
+  },
+  ja: {
+    // Navigation
+    create: '作成',
+    library: 'ライブラリ',
+    search: '検索',
+    training: 'トレーニング',
+    
+    // Theme
+    lightMode: 'ライトモード',
+    darkMode: 'ダークモード',
+    
+    // Auth
+    signIn: 'サインイン',
+    signOut: 'サインアウト',
+    settings: '設定',
+    
+    // Username Modal
+    welcomeTitle: 'ACE-Step UIへようこそ',
+    welcomeSubtitle: 'AI音楽作成を始めるために名前を入力してください',
+    yourName: 'お名前',
+    enterYourName: '名前を入力',
+    getStarted: '始める',
+    gettingStarted: '開始中...',
+    yourMusicYourWay: 'あなたの音楽、あなたのスタイルで。無料で無制限にAI音楽を作成。',
+    usernameMinLength: 'ユーザー名は2文字以上である必要があります',
+    usernameInvalidChars: 'ユーザー名は文字、数字、アンダースコア、ハイフンのみ使用できます',
+    failedToSetUsername: 'ユーザー名の設定に失敗しました',
+    
+    // Toasts
+    songNotAvailable: 'この曲は利用できません。',
+    unableToPlay: 'この曲を再生できません。',
+    generationTimedOut: '生成がタイムアウトしました',
+    generationFailed: '生成に失敗しました。もう一度お試しください。',
+    playlistCreated: 'プレイリストを作成しました！',
+    failedToCreatePlaylist: 'プレイリストの作成に失敗しました',
+    songAddedToPlaylist: 'プレイリストに追加しました',
+    failedToAddSong: '曲の追加に失敗しました',
+    songDeleted: '曲を削除しました',
+    failedToDeleteSong: '曲の削除に失敗しました',
+    
+    // Sidebar
+    aceStepUI: 'ACE-Step UI',
+    
+    // Common
+    cancel: 'キャンセル',
+    save: '保存',
+    delete: '削除',
+    edit: '編集',
+    share: '共有',
+    download: 'ダウンロード',
+    play: '再生',
+    pause: '一時停止',
+    normalSpeed: '通常',
+    next: '次へ',
+    previous: '前へ',
+    
+    // Placeholders
+    searchPlaceholder: '検索...',
+    
+    // Settings
+    language: '言語',
+    english: 'English',
+    chinese: '简体中文',
+    japaneseLanguage: '日本語',
+    koreanLanguage: '한국어',
+    appearance: '外観',
+    profile: 'プロフィール',
+    viewProfile: 'プロフィールを表示',
+    editProfile: 'プロフィールを編集',
+    account: 'アカウント',
+    username: 'ユーザー名',
+    memberSince: '登録日',
+    about: 'について',
+    version: 'バージョン',
+    localAIMusicGenerator: 'ローカルAI音楽ジェネレーター',
+    poweredBy: 'ACE-Step 1.5を搭載。オープンソースで無料で使用できます。',
+    createdBy: '開発者 Ambsd',
+    localizedBy: 'ローカライゼーション＆二次開発 bdsqlsz',
+    follow: 'フォロー',
+    done: '完了',
+    light: 'ライト',
+    dark: 'ダーク',
+    
+    // Mobile
+    createSong: '曲を作成',
+    viewList: 'リストを表示',
+    
+    // CreatePanel - Modes
+    simple: 'シンプル',
+    custom: 'カスタム',
+    
+    // CreatePanel - Sections
+    audio: 'オーディオ',
+    lyrics: '歌詞',
+    styleOfMusic: '音楽スタイル',
+    title: 'タイトル',
+    musicParameters: '音楽パラメータ',
+    advancedSettings: '詳細設定',
+    
+    // CreatePanel - LoRA
+    loraPath: 'LoRA パス',
+    loraPathPlaceholder: 'LoRA モデルパスを入力...',
+    browseFiles: 'ファイルを参照',
+    loraLoaded: 'LoRA 読み込み済み',
+    loraUnloaded: 'LoRA 未読み込み',
+    loraLoad: '読み込む',
+    loraUnload: 'アンロード',
+    loraScale: 'LoRA スケール',
+    loraScaleDescription: 'LoRA モデルの影響強度を調整',
+    
+    // CreatePanel - Audio
+    reference: '参照',
+    cover: 'カバー',
+    fromLibrary: 'ライブラリから',
+    upload: 'アップロード',
+    
+    // CreatePanel - Lyrics
+    lyricsPlaceholder: 'ここに歌詞を入力...',
+    leaveLyricsEmpty: 'インストゥルメンタルの場合は空のままにするか、下のトグルを使用',
+    vocal: 'ボーカル',
+    instrumental: 'インストゥルメンタル',
+    vocalLanguage: 'ボーカル言語',
+    autoInstrumental: '自動 / インストゥルメンタル',
+    vocalArabic: 'アラビア語',
+    vocalAzerbaijani: 'アゼルバイジャン語',
+    vocalBulgarian: 'ブルガリア語',
+    vocalBengali: 'ベンガル語',
+    vocalCatalan: 'カタルーニャ語',
+    vocalCzech: 'チェコ語',
+    vocalDanish: 'デンマーク語',
+    vocalGerman: 'ドイツ語',
+    vocalGreek: 'ギリシャ語',
+    vocalEnglish: '英語',
+    vocalSpanish: 'スペイン語',
+    vocalPersian: 'ペルシャ語',
+    vocalFinnish: 'フィンランド語',
+    vocalFrench: 'フランス語',
+    vocalHebrew: 'ヘブライ語',
+    vocalHindi: 'ヒンディー語',
+    vocalCroatian: 'クロアチア語',
+    vocalHaitianCreole: 'ハイチ・クレオール語',
+    vocalHungarian: 'ハンガリー語',
+    vocalIndonesian: 'インドネシア語',
+    vocalIcelandic: 'アイスランド語',
+    vocalItalian: 'イタリア語',
+    vocalJapanese: '日本語',
+    vocalKorean: '韓国語',
+    vocalLatin: 'ラテン語',
+    vocalLithuanian: 'リトアニア語',
+    vocalMalay: 'マレー語',
+    vocalNepali: 'ネパール語',
+    vocalDutch: 'オランダ語',
+    vocalNorwegian: 'ノルウェー語',
+    vocalPunjabi: 'パンジャーブ語',
+    vocalPolish: 'ポーランド語',
+    vocalPortuguese: 'ポルトガル語',
+    vocalRomanian: 'ルーマニア語',
+    vocalRussian: 'ロシア語',
+    vocalSanskrit: 'サンスクリット語',
+    vocalSlovak: 'スロバキア語',
+    vocalSerbian: 'セルビア語',
+    vocalSwedish: 'スウェーデン語',
+    vocalSwahili: 'スワヒリ語',
+    vocalTamil: 'タミル語',
+    vocalTelugu: 'テルグ語',
+    vocalThai: 'タイ語',
+    vocalTagalog: 'タガログ語',
+    vocalTurkish: 'トルコ語',
+    vocalUkrainian: 'ウクライナ語',
+    vocalUrdu: 'ウルドゥー語',
+    vocalVietnamese: 'ベトナム語',
+    vocalCantonese: '広東語',
+    vocalChineseMandarin: '中国語（標準語）',
+    
+    // CreatePanel - Style
+    stylePlaceholder: '例：アップビートなポップロック、エモーショナルなバラード、90年代ヒップホップ',
+    genreMoodInstruments: 'ジャンル、ムード、楽器、雰囲気',
+    refreshGenres: 'ジャンル提案を更新',
+    mainGenre: 'メインジャンル',
+    subGenre: 'サブジャンル',
+    nameSong: '曲名を付ける',
+    
+    // CreatePanel - Parameters
+    bpm: 'BPM',
+    auto: '自動',
+    duration: '長さ',
+    seconds: '秒',
+    keyScale: 'キーとスケール',
+    timeSignature: '拍子',
+    
+    // CreatePanel - Advanced
+    randomSeed: 'ランダムシード',
+    thinking: '思考',
+    audioFormat: 'オーディオ形式',
+    inferenceSteps: '推論ステップ',
+    guidanceScale: 'ガイダンススケール',
+    inferMethod: '推論方法',
+    shift: 'シフト',
+    timestepShiftForBase: 'ベースモデルのタイムステップシフト（turboでは無効）',
+    expertControls: 'エキスパートコントロール',
+    lmParameters: 'LMパラメータ',
+    controlLyricGeneration: '歌詞生成と創造性を制御',
+    transform: '変換',
+    controlSourceAudio: 'モデルがソースオーディオに従う程度を制御',
+    audioCodes: 'オーディオコード',
+    optionalAudioCodes: 'オプションのオーディオコードペイロード',
+    taskType: 'タスクタイプ',
+    textToMusic: 'テキスト → 音楽',
+    audioCoverStrength: 'オーディオカバー強度',
+    repaintingStart: 'リペイント開始',
+    repaintingEnd: 'リペイント終了',
+    instruction: '指示',
+    lmTemperature: 'LM温度',
+    higherMoreRandom: '高いほどランダム（0-2）',
+    lmCfgScale: 'LM CFGスケール',
+    noCfgScale: '1.0 = CFGなし（1-3）',
+    topK: 'Top-K',
+    topP: 'Top-P',
+    lmNegativePrompt: 'LMネガティブプロンプト',
+    noUserInput: 'ユーザー入力なし',
+    thingsToAvoid: '避けるべきこと...',
+    useWhenCfgScaleGreater: 'LM CFGスケール > 1.0の場合に使用',
+    lmTopK: 'LM Top-K',
+    lmTopP: 'LM Top-P',
+    
+    // Guidance section
+    guidance: 'ガイダンス',
+    advancedCfgScheduling: '高度なCFGスケジューリング制御。',
+    cfgIntervalStart: 'CFG間隔開始',
+    cfgIntervalEnd: 'CFG間隔終了',
+    customTimesteps: 'カスタムタイムステップ',
+    timestepsPlaceholder: '例：1,3,5,7',
+    scoreScale: 'スコアスケール',
+    lmBatchChunkSize: 'LMバッチチャンクサイズ',
+    trackName: 'トラック名',
+    optionalTrackName: 'オプションのトラック名',
+    completeTrackClasses: '完全なトラッククラス',
+    trackClassesPlaceholder: 'クラス-a、クラス-b',
+    useAdg: 'ADGを使用',
+    allowLmBatch: 'LMバッチを許可',
+    useCotMetas: 'CoTメタを使用',
+    useCotCaption: 'CoTキャプションを使用',
+    useCotLanguage: 'CoT言語を使用',
+    autogen: '自動生成',
+    constrainedDecodingDebug: '制約付きデコーディングデバッグ',
+    formatCaption: 'キャプションをフォーマット',
+    getScores: 'スコアを取得',
+    getLrcLyrics: 'LRC（歌詞）を取得',
+    batchSize: 'バッチサイズ（バリエーション）',
+    variations: 'バリエーション',
+    bulkGenerate: '一括生成',
+    job: 'ジョブ',
+    jobs: 'ジョブ',
+    queueMultipleJobs: '同じ設定で複数の独立した生成ジョブをキューに追加',
+    numberOfVariations: '生成する曲のバリエーション数',
+    moreStepsBetterQuality: 'ステップが多いほど品質が高く、遅くなります（turboには8を推奨）',
+    howCloselyFollowPrompt: 'プロンプトにどれだけ忠実に従うか',
+    seed: 'シード',
+    randomSeedRecommended: '毎回ランダム化（推奨）',
+    fixedSeedReproducible: '再現可能な結果のための固定シード',
+    enterFixedSeed: '固定シードを入力',
+    thinkingCot: '思考（CoT）',
+    mp3Smaller: 'MP3（小さい）',
+    flacLossless: 'FLAC（ロスレス）',
+    odeDeterministic: 'ODE（決定論的）',
+    sdeStochastic: 'SDE（確率的）',
+    min: '分',
+    
+    // CreatePanel - Drag & Drop
+    dropToUseAudio: 'ドロップしてオーディオを使用',
+    dropToUpload: 'ドロップしてアップロード',
+    usingAsReference: '参照として使用',
+    usingAsCover: 'カバーとして使用',
+    uploadingAsReference: '参照としてアップロード',
+    uploadingAsCover: 'カバーとしてアップロード',
+    
+    // CreatePanel - Vocal Gender
+    vocalGender: 'ボーカルの性別',
+    male: '男性',
+    female: '女性',
+    
+    // CreatePanel - LM Backend & Model
+    lmBackendLabel: 'LMバックエンド',
+    lmBackendPt: 'PT（〜1.6 GB VRAM）',
+    lmBackendVllm: 'VLLM（〜9.2 GB VRAM）',
+    lmBackendHint: 'PTはVRAMが少なく、VLLMは高性能GPUで高速',
+    lmModelLabel: 'LMモデル',
+    lmModel06B: '0.6B（最軽量、〜0.5 GB VRAM）',
+    lmModel17B: '1.7B（バランス、〜1.5 GB VRAM）',
+    lmModel4B: '4B（最高品質、〜4 GB VRAM）',
+    lmModelHint: '歌詞/スタイル強化に使用するLLMを制御。未インストールの場合自動ダウンロード。',
+    
+    // CreatePanel - Transcription
+    transcribing: '文字起こし中...',
+    transcribingWithWhisper: 'Whisperで文字起こし中…',
+    
+    // CreatePanel - Library Tabs
+    uploaded: 'アップロード済み',
+    createdTab: '作成済み',
+    useTrack: '使用',
+    noCreatedSongsYet: '作成した曲がまだありません',
+    generateSongsToReuse: '曲を生成してカバーや参照として再利用',
+    
+    // CreatePanel - Actions
+    generate: '生成',
+    generating: '生成中...',
+    createButton: '作成',
+    formatLyrics: '歌詞をフォーマット',
+    formatting: 'フォーマット中...',
+    clearAll: 'すべてクリア',
+    
+    // Simple Mode
+    describeYourSong: '曲を説明',
+    songDescriptionPlaceholder: '友達との夏の冒険についての明るいポップソング...',
+    quickSettings: 'クイック設定',
+    key: 'キー',
+    time: '拍子',
+    
+    // CreatePanel - Errors
+    loginToGenerate: '音楽を生成するにはログインしてください',
+    uploadFailed: 'アップロードに失敗しました',
+    formatFailed: 'フォーマットに失敗しました',
+    formatFailedDetail: 'フォーマットに失敗しました。LLMが初期化されていることを確認してください。',
+    formatFailedLlmUnavailable: 'フォーマットに失敗しました。LLMが利用できない可能性があります。',
+    deleteSongConfirm: '「{title}」を削除しますか？この操作は元に戻せません。',
+    profileUpdateFailed: 'プロフィールの更新に失敗しました',
+    ffmpegLoadFailed: 'ビデオエンコーダーの読み込みに失敗しました。更新してもう一度お試しください。',
+    videoRenderFailed: 'ビデオレンダリングに失敗しました。もう一度お試しください。',
+    
+    // SongList / Filters
+    searchYourSongs: '曲を検索...',
+    filters: 'フィルター',
+    refineBy: '絞り込み',
+    liked: 'いいね',
+    public: '公開',
+    private: '非公開',
+    generatingStatus: '生成中',
+    selectSongToView: '詳細を表示する曲を選択',
+    noSongsMatchFilters: 'フィルターに一致する曲がありません。',
+    clearFilters: 'フィルターをクリア',
+    
+    // RightSidebar - Song Details
+    songDetails: '曲の詳細',
+    created: '作成日',
+    styleTags: 'スタイルとタグ',
+    lyricsSection: '歌詞',
+    copyLyrics: 'コピー',
+    
+    // Languages
+    japanese: '日本語',
+    spanish: 'スペイン語',
+    german: 'ドイツ語',
+    french: 'フランス語',
+    portuguese: 'ポルトガル語',
+    russian: 'ロシア語',
+    italian: 'イタリア語',
+    dutch: 'オランダ語',
+    polish: 'ポーランド語',
+    turkish: 'トルコ語',
+    vietnamese: 'ベトナム語',
+    czech: 'チェコ語',
+    persian: 'ペルシャ語',
+    arabic: 'アラビア語',
+    korean: '韓国語',
+    thai: 'タイ語',
+    hindi: 'ヒンディー語',
+    indonesian: 'インドネシア語',
+    ukrainian: 'ウクライナ語',
+    hungarian: 'ハンガリー語',
+    swedish: 'スウェーデン語',
+    romanian: 'ルーマニア語',
+    greek: 'ギリシャ語',
+    
+    // Task Types
+    audio2audio: 'オーディオ → オーディオ',
+    coverTask: 'カバー',
+    repaintTask: 'リペイント',
+    
+    // Search Page
+    searchSongsPlaceholder: '曲、プレイリスト、クリエイター、スタイルを検索',
+    songsMatching: '一致する曲',
+    featuredSongs: '注目の曲',
+    noSongsFound: '一致する曲が見つかりません',
+    creatorsMatching: '一致するクリエイター',
+    featuredCreators: '注目のクリエイター',
+    noCreatorsFound: '一致するクリエイターが見つかりません',
+    noCreatorsYet: 'まだクリエイターがいません。最初に音楽を共有しましょう！',
+    playlistsMatching: '一致するプレイリスト',
+    featuredPlaylists: '注目のプレイリスト',
+    noPlaylistsFound: '一致するプレイリストが見つかりません',
+    noPlaylistsYet: '公開プレイリストがまだありません。作成してお気に入りを共有しましょう！',
+    genres: 'ジャンル',
+    songs: '曲',
+    
+    // Library View
+    yourLibrary: 'マイライブラリ',
+    newPlaylist: '新しいプレイリスト',
+    likedSongs: 'いいねした曲',
+    playlists: 'プレイリスト',
+    playlist: 'プレイリスト',
+    byYou: 'あなたが作成',
+    
+    // User Profile
+    back: '戻る',
+    loadingProfile: '読み込み中...',
+    userNotFound: 'ユーザーが見つかりません',
+    goBack: '戻る',
+    likes: 'いいね',
+    plays: '再生回数',
+    recent: '最新',
+    top: '人気',
+    noPublicSongsYet: '公開曲がまだありません',
+    seeMore: 'もっと見る',
+    joined: '参加日',
+    supportingSince: 'サポート開始',
+    avatarImage: 'アバター画像',
+    uploadAvatar: 'アバターをアップロード',
+    avatarFormats: 'JPG、PNG、WebP、GIF • 最大5MB',
+    bannerImage: 'バナー画像',
+    clickToUploadBanner: 'クリックしてバナーをアップロード',
+    bannerFormats: '推奨サイズ：1500x500px • JPG、PNG、WebP、GIF • 最大5MB',
+    bio: '自己紹介',
+    bioPlaceholder: '自己紹介を書いてください...',
+    uploadingAvatar: 'アバターをアップロード中...',
+    uploadingBanner: 'バナーをアップロード中...',
+    saving: '保存中...',
+    saveChanges: '変更を保存',
+    
+    // Playlist Modals
+    createPlaylist: 'プレイリストを作成',
+    playlistName: '名前',
+    playlistNamePlaceholder: '私の素晴らしいプレイリスト',
+    playlistDescription: '説明',
+    descriptionPlaceholder: 'コーディング時の雰囲気...',
+    addToPlaylist: 'プレイリストに追加',
+    createNewPlaylist: '新しいプレイリストを作成',
+    noExistingPlaylists: 'プレイリストがまだありません。',
+    
+    // Edit Profile Modal (Settings)
+    usernameLabel: 'ユーザー名',
+    usernamePlaceholder: 'ユーザー名',
+    usernameMinLengthError: 'ユーザー名は2文字以上である必要があります',
+    usernameTakenError: 'このユーザー名は既に使用されています',
+    usernameUpdateFailedError: 'ユーザー名の更新に失敗しました',
+    usernameRequirements: '文字、数字、アンダースコア、ハイフンのみ使用可能',
+    
+    // Song Details (RightSidebar)
+    more: 'もっと',
+    copy: 'コピー',
+    copied: 'コピーしました！',
+    copyAllTags: 'すべてのタグをコピー',
+    
+    // Song Dropdown Menu
+    createVideo: 'ビデオを作成',
+    editAudio: 'オーディオを編集',
+    extractStems: 'ステムを抽出',
+    reusePrompt: 'プロンプトを再利用',
+    deleteSong: '曲を削除',
+    useAsReference: '参照として使用',
+    coverSong: 'カバーソング',
+    confirmDeleteTitle: '曲を削除',
+    confirmDeleteManyTitle: '曲を削除',
+    deleteSongsConfirm: '{count}曲を削除しますか？この操作は元に戻せません。',
+    songsDeletedSuccess: '曲を削除しました',
+    songsDeletedPartial: '{succeeded}/{total}曲を削除しました',
+    deleteUploadConfirm: 'このアップロードを削除しますか？この操作は元に戻せません。',
+    cannotBeUndone: 'この操作は元に戻せません。',
+    
+    // Player
+    nowPlaying: '再生中',
+    downloadAudio: 'オーディオをダウンロード',
+    openInEditor: 'エディターで開く',
+    anonymous: '匿名ユーザー',
+    
+    // PlaylistDetail
+    loadingPlaylist: 'プレイリストを読み込み中...',
+    playlistNotFound: 'プレイリストが見つかりません',
+    deletePlaylistConfirm: 'このプレイリストを削除してもよろしいですか？',
+    dateAdded: '追加日',
+    justNow: 'たった今',
+    unknown: '不明',
+    
+    // SongProfile
+    loadingSong: '曲を読み込み中...',
+    songNotFound: '曲が見つかりません',
+    similar: '類似',
+    by: '作成者',
+    
+    // ShareModal
+    shareSong: '曲を共有',
+    shareOnX: 'Xで共有',
+    shareOnFacebook: 'Facebookで共有',
+    shareOnWhatsApp: 'WhatsAppで共有',
+    shareOnTelegram: 'Telegramで共有',
+    shareOnReddit: 'Redditで共有',
+    shareOnLinkedIn: 'LinkedInで共有',
+    shareViaEmail: 'メールで共有',
+    copyLink: 'リンクをコピー',
+    emailSubject: 'このAI曲をチェックしてください',
+    emailBody: 'こんにちは！\n\n私がこのAI生成の曲を作りました。気に入ってもらえると思います：\n\n「{title}」by {creator}\n{style}\n\nここで聴いてください：{url}\n\nACE-Step UIで作成 - 無料でオープンソースのローカルAI音楽生成！',
+    
+    // Reference Modal
+    referenceModalTitle: 'リファレンス',
+    coverModalTitle: 'カバー',
+    referenceModalDescription: 'リファレンストラックに触発された曲を作成',
+    coverModalDescription: '既存のトラックを新しいバージョンに変換',
+    uploadAudio: 'オーディオをアップロード',
+    uploadingAudio: 'アップロード中...',
+    audioFormats: 'MP3、WAV、FLAC',
+    mine: 'マイトラック',
+    loadingTracks: '読み込み中...',
+    noTracksYet: 'トラックがまだありません',
+    uploadAudioFilesAsReferences: 'リファレンスとして使用するオーディオファイルをアップロード',
+    
+    // Training Module
+    loraTraining: 'LoRAトレーニング',
+    trainingDescription: 'オーディオファイルからデータセットを構築し、カスタムLoRAアダプターをトレーニング',
+    datasetBuilder: 'データセットビルダー',
+    trainLora: 'LoRAをトレーニング',
+    quickStart: 'クイックスタート',
+    chooseOneOption: '選択：既存のデータセットを読み込む または 新しいディレクトリをスキャン',
+    loadExistingDataset: '既存のデータセットを読み込む',
+    loadDataset: '読み込む',
+    scanNewDirectory: '新しいディレクトリをスキャン',
+    scanDataset: 'スキャン',
+    datasetSettings: 'データセット設定',
+    datasetName: 'データセット名',
+    customActivationTag: 'カスタム活性化タグ',
+    allInstrumental: '全てインストゥルメンタル',
+    tagPosition: 'タグの位置',
+    tagPrepend: '前置（タグ、キャプション）',
+    tagAppend: '後置（キャプション、タグ）',
+    tagReplace: 'キャプションを置換',
+    genreRatio: 'ジャンル比率',
+    genreRatioHint: '0% = 全てキャプション、100% = 全てジャンル',
+    autoLabelWithAI: 'AIで自動ラベル付け',
+    autoLabelDescription: 'オーディオファイルのメタデータを生成：キャプション、BPM、キー、拍子',
+    skipMetas: 'BPM/キー/拍子をスキップ',
+    onlyUnlabeled: 'ラベルなしのみ',
+    autoLabelAll: '全て自動ラベル付け',
+    filename: 'ファイル名',
+    labeled: 'ラベル付き',
+    saveDataset: 'データセットを保存',
+    preprocessToTensors: 'テンソルに前処理',
+    preprocessDescription: 'データセットを事前計算されたテンソルに変換して高速トレーニング（モデルのロードが必要）',
+    preprocess: '前処理',
+    preprocessedDataset: '前処理済みデータセット',
+    loraSettings: 'LoRA設定',
+    loraRank: 'LoRAランク',
+    loraAlpha: 'LoRA Alpha',
+    dropout: 'ドロップアウト',
+    trainingParameters: 'トレーニングパラメータ',
+    learningRate: '学習率',
+    maxEpochs: '最大エポック数',
+    gradientAccumulation: '勾配累積',
+    saveEvery: '保存間隔',
+    epochs: 'エポック',
+    outputDirectory: '出力ディレクトリ',
+    useFP8: 'FP8量子化を使用',
+    fp8Description: 'VRAMを削減',
+    startTraining: 'トレーニング開始',
+    stopTraining: 'トレーニング停止',
+    trainingProgress: 'トレーニング進行状況',
+    trainingLog: 'トレーニングログ',
+    trainingStatus: 'トレーニングステータス',
+    tensorboardView: 'TensorBoardビュー',
+    showTensorboard: 'TensorBoardを表示',
+    hideTensorboard: 'TensorBoardを非表示',
+    openInNewTab: '新しいタブで開く',
+    
+    // Training Status Messages
+    scanning: 'スキャン中...',
+    autoLabeling: '自動ラベル付け中...',
+    savingDataset: '保存中...',
+    preprocessing: '前処理中...',
+    loadingDataset: '読み込み中...',
+    startingTraining: '開始中...',
+    error: 'エラー',
+    datasetInfo: 'データセット: {name}、サンプル数: {samples}、ラベル付き: {labeled}',
+    trainingStep: 'ステップ {step} - 損失: {loss}',
+    editSample: 'サンプルを編集',
+    caption: 'キャプション',
+    genre: 'ジャンル',
+    promptOverride: 'プロンプト上書き',
+    musicDescription: '音楽の説明...',
+    overrideGlobalRatio: 'このサンプルのグローバル比率を上書き',
+    editableUsedForTraining: '編集可能、トレーニングに使用',
+    useGlobalRatio: 'グローバル比率を使用',
+    thisSample: 'このサンプル',
+  },
+  ko: {
+    // Navigation
+    create: '생성',
+    library: '라이브러리',
+    search: '검색',
+    training: '훈련',
+    
+    // Theme
+    lightMode: '라이트 모드',
+    darkMode: '다크 모드',
+    
+    // Auth
+    signIn: '로그인',
+    signOut: '로그아웃',
+    settings: '설정',
+    
+    // Username Modal
+    welcomeTitle: 'ACE-Step UI에 오신 것을 환영합니다',
+    welcomeSubtitle: 'AI 음악 제작을 시작하려면 이름을 입력하세요',
+    yourName: '이름',
+    enterYourName: '이름 입력',
+    getStarted: '시작하기',
+    gettingStarted: '시작 중...',
+    yourMusicYourWay: '당신의 음악, 당신만의 방식으로. 무료로 무제한 AI 음악 제작.',
+    usernameMinLength: '사용자 이름은 최소 2자 이상이어야 합니다',
+    usernameInvalidChars: '사용자 이름은 문자, 숫자, 밑줄, 하이픈만 사용할 수 있습니다',
+    failedToSetUsername: '사용자 이름 설정에 실패했습니다',
+    
+    // Toasts
+    songNotAvailable: '이 곡은 더 이상 사용할 수 없습니다.',
+    unableToPlay: '이 곡을 재생할 수 없습니다.',
+    generationTimedOut: '생성 시간 초과',
+    generationFailed: '생성에 실패했습니다. 다시 시도해주세요.',
+    playlistCreated: '재생목록이 생성되었습니다!',
+    failedToCreatePlaylist: '재생목록 생성에 실패했습니다',
+    songAddedToPlaylist: '재생목록에 추가되었습니다',
+    failedToAddSong: '곡 추가에 실패했습니다',
+    songDeleted: '곡이 삭제되었습니다',
+    failedToDeleteSong: '곡 삭제에 실패했습니다',
+    
+    // Sidebar
+    aceStepUI: 'ACE-Step UI',
+    
+    // Common
+    cancel: '취소',
+    save: '저장',
+    delete: '삭제',
+    edit: '편집',
+    share: '공유',
+    download: '다운로드',
+    play: '재생',
+    pause: '일시정지',
+    normalSpeed: '보통',
+    next: '다음',
+    previous: '이전',
+    
+    // Placeholders
+    searchPlaceholder: '검색...',
+    
+    // Settings
+    language: '언어',
+    english: 'English',
+    chinese: '简体中文',
+    japaneseLanguage: '日本語',
+    koreanLanguage: '한국어',
+    appearance: '외관',
+    profile: '프로필',
+    viewProfile: '프로필 보기',
+    editProfile: '프로필 편집',
+    account: '계정',
+    username: '사용자 이름',
+    memberSince: '가입일',
+    about: '정보',
+    version: '버전',
+    localAIMusicGenerator: '로컬 AI 음악 생성기',
+    poweredBy: 'ACE-Step 1.5 기반. 오픈 소스이며 무료로 사용 가능합니다.',
+    createdBy: '개발자 Ambsd',
+    localizedBy: '현지화 및 2차 개발 bdsqlsz',
+    follow: '팔로우',
+    done: '완료',
+    light: '라이트',
+    dark: '다크',
+    
+    // Mobile
+    createSong: '곡 만들기',
+    viewList: '목록 보기',
+    
+    // CreatePanel - Modes
+    simple: '간단',
+    custom: '사용자 정의',
+    
+    // CreatePanel - Sections
+    audio: '오디오',
+    lyrics: '가사',
+    styleOfMusic: '음악 스타일',
+    title: '제목',
+    musicParameters: '음악 매개변수',
+    advancedSettings: '고급 설정',
+    
+    // CreatePanel - LoRA
+    loraPath: 'LoRA 경로',
+    loraPathPlaceholder: 'LoRA 모델 경로 입력...',
+    browseFiles: '파일 찾아보기',
+    loraLoaded: 'LoRA 로드됨',
+    loraUnloaded: 'LoRA 언로드됨',
+    loraLoad: '로드',
+    loraUnload: '언로드',
+    loraScale: 'LoRA 강도',
+    loraScaleDescription: 'LoRA 모델의 영향 강도 조절',
+    
+    // CreatePanel - Audio
+    reference: '참조',
+    cover: '커버',
+    fromLibrary: '라이브러리에서',
+    upload: '업로드',
+    
+    // CreatePanel - Lyrics
+    lyricsPlaceholder: '여기에 가사를 입력하세요...',
+    leaveLyricsEmpty: '연주곡의 경우 비워두거나 아래 토글 사용',
+    vocal: '보컬',
+    instrumental: '연주곡',
+    vocalLanguage: '보컬 언어',
+    autoInstrumental: '자동 / 연주곡',
+    vocalArabic: '아랍어',
+    vocalAzerbaijani: '아제르바이잔어',
+    vocalBulgarian: '불가리아어',
+    vocalBengali: '벵골어',
+    vocalCatalan: '카탈루냐어',
+    vocalCzech: '체코어',
+    vocalDanish: '덴마크어',
+    vocalGerman: '독일어',
+    vocalGreek: '그리스어',
+    vocalEnglish: '영어',
+    vocalSpanish: '스페인어',
+    vocalPersian: '페르시아어',
+    vocalFinnish: '핀란드어',
+    vocalFrench: '프랑스어',
+    vocalHebrew: '히브리어',
+    vocalHindi: '힌디어',
+    vocalCroatian: '크로아티아어',
+    vocalHaitianCreole: '아이티 크레올어',
+    vocalHungarian: '헝가리어',
+    vocalIndonesian: '인도네시아어',
+    vocalIcelandic: '아이슬란드어',
+    vocalItalian: '이탈리아어',
+    vocalJapanese: '일본어',
+    vocalKorean: '한국어',
+    vocalLatin: '라틴어',
+    vocalLithuanian: '리투아니아어',
+    vocalMalay: '말레이어',
+    vocalNepali: '네팔어',
+    vocalDutch: '네덜란드어',
+    vocalNorwegian: '노르웨이어',
+    vocalPunjabi: '펀자브어',
+    vocalPolish: '폴란드어',
+    vocalPortuguese: '포르투갈어',
+    vocalRomanian: '루마니아어',
+    vocalRussian: '러시아어',
+    vocalSanskrit: '산스크리트어',
+    vocalSlovak: '슬로바키아어',
+    vocalSerbian: '세르비아어',
+    vocalSwedish: '스웨덴어',
+    vocalSwahili: '스와힐리어',
+    vocalTamil: '타밀어',
+    vocalTelugu: '텔루구어',
+    vocalThai: '태국어',
+    vocalTagalog: '타갈로그어',
+    vocalTurkish: '터키어',
+    vocalUkrainian: '우크라이나어',
+    vocalUrdu: '우르두어',
+    vocalVietnamese: '베트남어',
+    vocalCantonese: '광둥어',
+    vocalChineseMandarin: '중국어（표준어）',
+    
+    // CreatePanel - Style
+    stylePlaceholder: '예: 경쾌한 팝 록, 감성적인 발라드, 90년대 힙합',
+    genreMoodInstruments: '장르, 분위기, 악기, 느낌',
+    refreshGenres: '장르 제안 새로고침',
+    mainGenre: '주요 장르',
+    subGenre: '하위 장르',
+    nameSong: '곡 이름 짓기',
+    
+    // CreatePanel - Parameters
+    bpm: 'BPM',
+    auto: '자동',
+    duration: '길이',
+    seconds: '초',
+    keyScale: '키와 스케일',
+    timeSignature: '박자',
+    
+    // CreatePanel - Advanced
+    randomSeed: '랜덤 시드',
+    thinking: '생각',
+    audioFormat: '오디오 형식',
+    inferenceSteps: '추론 단계',
+    guidanceScale: '가이던스 스케일',
+    inferMethod: '추론 방법',
+    shift: '시프트',
+    timestepShiftForBase: '베이스 모델의 타임스텝 시프트 (turbo에서는 무효)',
+    expertControls: '전문가 제어',
+    lmParameters: 'LM 매개변수',
+    controlLyricGeneration: '가사 생성과 창의성 제어',
+    transform: '변환',
+    controlSourceAudio: '모델이 소스 오디오를 따르는 정도를 제어',
+    audioCodes: '오디오 코드',
+    optionalAudioCodes: '선택적 오디오 코드 페이로드',
+    taskType: '작업 유형',
+    textToMusic: '텍스트 → 음악',
+    audioCoverStrength: '오디오 커버 강도',
+    repaintingStart: '리페인팅 시작',
+    repaintingEnd: '리페인팅 종료',
+    instruction: '지시',
+    lmTemperature: 'LM 온도',
+    higherMoreRandom: '높을수록 랜덤 (0-2)',
+    lmCfgScale: 'LM CFG 스케일',
+    noCfgScale: '1.0 = CFG 없음 (1-3)',
+    topK: 'Top-K',
+    topP: 'Top-P',
+    lmNegativePrompt: 'LM 네거티브 프롬프트',
+    noUserInput: '사용자 입력 없음',
+    thingsToAvoid: '피해야 할 것들...',
+    useWhenCfgScaleGreater: 'LM CFG 스케일 > 1.0일 때 사용',
+    lmTopK: 'LM Top-K',
+    lmTopP: 'LM Top-P',
+    
+    // Guidance section
+    guidance: '가이던스',
+    advancedCfgScheduling: '고급 CFG 스케줄링 제어.',
+    cfgIntervalStart: 'CFG 간격 시작',
+    cfgIntervalEnd: 'CFG 간격 종료',
+    customTimesteps: '사용자 정의 타임스텝',
+    timestepsPlaceholder: '예: 1,3,5,7',
+    scoreScale: '스코어 스케일',
+    lmBatchChunkSize: 'LM 배치 청크 크기',
+    trackName: '트랙 이름',
+    optionalTrackName: '선택적 트랙 이름',
+    completeTrackClasses: '완전한 트랙 클래스',
+    trackClassesPlaceholder: '클래스-a, 클래스-b',
+    useAdg: 'ADG 사용',
+    allowLmBatch: 'LM 배치 허용',
+    useCotMetas: 'CoT 메타 사용',
+    useCotCaption: 'CoT 캡션 사용',
+    useCotLanguage: 'CoT 언어 사용',
+    autogen: '자동 생성',
+    constrainedDecodingDebug: '제약 디코딩 디버그',
+    formatCaption: '캡션 포맷',
+    getScores: '점수 가져오기',
+    getLrcLyrics: 'LRC(가사) 가져오기',
+    batchSize: '배치 크기 (변형)',
+    variations: '변형',
+    bulkGenerate: '대량 생성',
+    job: '작업',
+    jobs: '작업',
+    queueMultipleJobs: '동일한 설정으로 여러 독립 생성 작업 대기열에 추가',
+    numberOfVariations: '생성할 곡 변형 수',
+    moreStepsBetterQuality: '단계가 많을수록 품질이 높고 느립니다 (turbo는 8 권장)',
+    howCloselyFollowPrompt: '프롬프트를 얼마나 엄격히 따를지',
+    seed: '시드',
+    randomSeedRecommended: '매 실행마다 무작위 (권장)',
+    fixedSeedReproducible: '재현 가능한 결과를 위한 고정 시드',
+    enterFixedSeed: '고정 시드 입력',
+    thinkingCot: '생각 (CoT)',
+    mp3Smaller: 'MP3 (작음)',
+    flacLossless: 'FLAC (무손실)',
+    odeDeterministic: 'ODE (결정론적)',
+    sdeStochastic: 'SDE (확률적)',
+    min: '분',
+    
+    // CreatePanel - Drag & Drop
+    dropToUseAudio: '드롭하여 오디오 사용',
+    dropToUpload: '드롭하여 업로드',
+    usingAsReference: '참조로 사용',
+    usingAsCover: '커버로 사용',
+    uploadingAsReference: '참조로 업로드',
+    uploadingAsCover: '커버로 업로드',
+    
+    // CreatePanel - Vocal Gender
+    vocalGender: '보컬 성별',
+    male: '남성',
+    female: '여성',
+    
+    // CreatePanel - LM Backend & Model
+    lmBackendLabel: 'LM 백엔드',
+    lmBackendPt: 'PT (~1.6 GB VRAM)',
+    lmBackendVllm: 'VLLM (~9.2 GB VRAM)',
+    lmBackendHint: 'PT는 VRAM이 적고, VLLM은 고성능 GPU에서 더 빠름',
+    lmModelLabel: 'LM 모델',
+    lmModel06B: '0.6B (가장 가벼움, ~0.5 GB VRAM)',
+    lmModel17B: '1.7B (균형, ~1.5 GB VRAM)',
+    lmModel4B: '4B (최고 품질, ~4 GB VRAM)',
+    lmModelHint: '가사/스타일 향상에 사용되는 LLM을 제어. 없으면 자동 다운로드.',
+    
+    // CreatePanel - Transcription
+    transcribing: '전사 중...',
+    transcribingWithWhisper: 'Whisper로 전사 중…',
+    
+    // CreatePanel - Library Tabs
+    uploaded: '업로드됨',
+    createdTab: '생성됨',
+    useTrack: '사용',
+    noCreatedSongsYet: '생성된 곡이 아직 없습니다',
+    generateSongsToReuse: '곡을 생성하여 커버나 참조로 재사용',
+    
+    // CreatePanel - Actions
+    generate: '생성',
+    generating: '생성 중...',
+    createButton: '만들기',
+    formatLyrics: '가사 포맷',
+    formatting: '포맷 중...',
+    clearAll: '모두 지우기',
+    
+    // Simple Mode
+    describeYourSong: '곡 설명',
+    songDescriptionPlaceholder: '친구들과 여름 모험에 대한 밝은 팝송...',
+    quickSettings: '빠른 설정',
+    key: '키',
+    time: '박자',
+    
+    // CreatePanel - Errors
+    loginToGenerate: '음악을 생성하려면 로그인하세요',
+    uploadFailed: '업로드 실패',
+    formatFailed: '포맷 실패',
+    formatFailedDetail: '포맷 실패. LLM이 초기화되었는지 확인하세요.',
+    formatFailedLlmUnavailable: '포맷 실패. LLM을 사용할 수 없을 수 있습니다.',
+    deleteSongConfirm: '「{title}」을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
+    profileUpdateFailed: '프로필 업데이트에 실패했습니다',
+    ffmpegLoadFailed: '비디오 인코더 로드에 실패했습니다. 새로고침 후 다시 시도하세요.',
+    videoRenderFailed: '비디오 렌더링에 실패했습니다. 다시 시도하세요.',
+    
+    // SongList / Filters
+    searchYourSongs: '곡 검색...',
+    filters: '필터',
+    refineBy: '세분화',
+    liked: '좋아요',
+    public: '공개',
+    private: '비공개',
+    generatingStatus: '생성 중',
+    selectSongToView: '세부 정보를 볼 곡 선택',
+    noSongsMatchFilters: '필터와 일치하는 곡이 없습니다.',
+    clearFilters: '필터 지우기',
+    
+    // RightSidebar - Song Details
+    songDetails: '곡 상세정보',
+    created: '생성일',
+    styleTags: '스타일 및 태그',
+    lyricsSection: '가사',
+    copyLyrics: '복사',
+    
+    // Languages
+    japanese: '일본어',
+    spanish: '스페인어',
+    german: '독일어',
+    french: '프랑스어',
+    portuguese: '포르투갈어',
+    russian: '러시아어',
+    italian: '이탈리아어',
+    dutch: '네덜란드어',
+    polish: '폴란드어',
+    turkish: '터키어',
+    vietnamese: '베트남어',
+    czech: '체코어',
+    persian: '페르시아어',
+    arabic: '아랍어',
+    korean: '한국어',
+    thai: '태국어',
+    hindi: '힌디어',
+    indonesian: '인도네시아어',
+    ukrainian: '우크라이나어',
+    hungarian: '헝가리어',
+    swedish: '스웨덴어',
+    romanian: '루마니아어',
+    greek: '그리스어',
+    
+    // Task Types
+    audio2audio: '오디오 → 오디오',
+    coverTask: '커버',
+    repaintTask: '리페인트',
+    
+    // Search Page
+    searchSongsPlaceholder: '곡, 재생목록, 제작자 또는 스타일 검색',
+    songsMatching: '일치하는 곡',
+    featuredSongs: '추천 곡',
+    noSongsFound: '일치하는 곡을 찾을 수 없습니다',
+    creatorsMatching: '일치하는 제작자',
+    featuredCreators: '추천 제작자',
+    noCreatorsFound: '일치하는 제작자를 찾을 수 없습니다',
+    noCreatorsYet: '아직 제작자가 없습니다. 음악을 공유하는 첫 번째 사람이 되세요!',
+    playlistsMatching: '일치하는 재생목록',
+    featuredPlaylists: '추천 재생목록',
+    noPlaylistsFound: '일치하는 재생목록을 찾을 수 없습니다',
+    noPlaylistsYet: '공개 재생목록이 아직 없습니다. 만들고 즐겨찾기를 공유하세요!',
+    genres: '장르',
+    songs: '곡',
+    
+    // Library View
+    yourLibrary: '내 라이브러리',
+    newPlaylist: '새 재생목록',
+    likedSongs: '좋아하는 곡',
+    playlists: '재생목록',
+    playlist: '재생목록',
+    byYou: '내가 만든',
+    
+    // User Profile
+    back: '뒤로',
+    loadingProfile: '로딩 중...',
+    userNotFound: '사용자를 찾을 수 없습니다',
+    goBack: '뒤로 가기',
+    likes: '좋아요',
+    plays: '재생 수',
+    recent: '최신',
+    top: '인기',
+    noPublicSongsYet: '공개 곡이 아직 없습니다',
+    seeMore: '더 보기',
+    joined: '가입일',
+    supportingSince: '후원 시작일',
+    avatarImage: '아바타 이미지',
+    uploadAvatar: '아바타 업로드',
+    avatarFormats: 'JPG, PNG, WebP, GIF • 최대 5MB',
+    bannerImage: '배너 이미지',
+    clickToUploadBanner: '클릭하여 배너 업로드',
+    bannerFormats: '권장 크기: 1500x500px • JPG, PNG, WebP, GIF • 최대 5MB',
+    bio: '자기소개',
+    bioPlaceholder: '자신에 대해 소개하세요...',
+    uploadingAvatar: '아바타 업로드 중...',
+    uploadingBanner: '배너 업로드 중...',
+    saving: '저장 중...',
+    saveChanges: '변경 사항 저장',
+    
+    // Playlist Modals
+    createPlaylist: '재생목록 만들기',
+    playlistName: '이름',
+    playlistNamePlaceholder: '내 멋진 재생목록',
+    playlistDescription: '설명',
+    descriptionPlaceholder: '코딩할 때 듣는 음악...',
+    addToPlaylist: '재생목록에 추가',
+    createNewPlaylist: '새 재생목록 만들기',
+    noExistingPlaylists: '재생목록이 아직 없습니다.',
+    
+    // Edit Profile Modal (Settings)
+    usernameLabel: '사용자 이름',
+    usernamePlaceholder: '사용자 이름',
+    usernameMinLengthError: '사용자 이름은 최소 2자 이상이어야 합니다',
+    usernameTakenError: '이 사용자 이름은 이미 사용 중입니다',
+    usernameUpdateFailedError: '사용자 이름 업데이트에 실패했습니다',
+    usernameRequirements: '문자, 숫자, 밑줄, 하이픈만 허용됨',
+    
+    // Song Details (RightSidebar)
+    more: '더보기',
+    copy: '복사',
+    copied: '복사됨!',
+    copyAllTags: '모든 태그 복사',
+    
+    // Song Dropdown Menu
+    createVideo: '비디오 만들기',
+    editAudio: '오디오 편집',
+    extractStems: '스템 추출',
+    reusePrompt: '프롬프트 재사용',
+    deleteSong: '곡 삭제',
+    useAsReference: '참조로 사용',
+    coverSong: '커버 곡',
+    confirmDeleteTitle: '곡 삭제',
+    confirmDeleteManyTitle: '곡 삭제',
+    deleteSongsConfirm: '{count}곡을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
+    songsDeletedSuccess: '곡이 삭제되었습니다',
+    songsDeletedPartial: '{succeeded}/{total}곡 삭제됨',
+    deleteUploadConfirm: '이 업로드를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
+    cannotBeUndone: '이 작업은 되돌릴 수 없습니다.',
+    
+    // Player
+    nowPlaying: '재생 중',
+    downloadAudio: '오디오 다운로드',
+    openInEditor: '편집기에서 열기',
+    anonymous: '익명 사용자',
+    
+    // PlaylistDetail
+    loadingPlaylist: '재생목록 로딩 중...',
+    playlistNotFound: '재생목록을 찾을 수 없습니다',
+    deletePlaylistConfirm: '이 재생목록을 삭제하시겠습니까?',
+    dateAdded: '추가일',
+    justNow: '방금',
+    unknown: '알 수 없음',
+    
+    // SongProfile
+    loadingSong: '곡 로딩 중...',
+    songNotFound: '곡을 찾을 수 없습니다',
+    similar: '유사',
+    by: '제작자',
+    
+    // ShareModal
+    shareSong: '곡 공유',
+    shareOnX: 'X에서 공유',
+    shareOnFacebook: 'Facebook에서 공유',
+    shareOnWhatsApp: 'WhatsApp에서 공유',
+    shareOnTelegram: 'Telegram에서 공유',
+    shareOnReddit: 'Reddit에서 공유',
+    shareOnLinkedIn: 'LinkedIn에서 공유',
+    shareViaEmail: '이메일로 공유',
+    copyLink: '링크 복사',
+    emailSubject: '이 AI 곡을 들어보세요',
+    emailBody: '안녕하세요!\n\n제가 만든 이 AI 생성 곡을 들어보세요. 마음에 드실 거예요:\n\n"{title}" - {creator}\n{style}\n\n여기서 들으세요: {url}\n\nACE-Step UI로 제작 - 무료 오픈 소스 로컬 AI 음악 생성!',
+    
+    // Reference Modal
+    referenceModalTitle: '참조 음악',
+    coverModalTitle: '커버 음악',
+    referenceModalDescription: '참조 트랙에서 영감을 받은 곡 만들기',
+    coverModalDescription: '기존 트랙을 새로운 버전으로 변환',
+    uploadAudio: '오디오 업로드',
+    uploadingAudio: '업로드 중...',
+    audioFormats: 'MP3, WAV, FLAC',
+    mine: '내 트랙',
+    loadingTracks: '로딩 중...',
+    noTracksYet: '트랙이 없습니다',
+    uploadAudioFilesAsReferences: '참조로 사용할 오디오 파일 업로드',
+    
+    // Training Module
+    loraTraining: 'LoRA 훈련',
+    trainingDescription: '오디오 파일에서 데이터셋을 구축하고 커스텀 LoRA 어댑터를 훈련',
+    datasetBuilder: '데이터셋 빌더',
+    trainLora: 'LoRA 훈련',
+    quickStart: '빠른 시작',
+    chooseOneOption: '선택: 기존 데이터셋 로드 또는 새 디렉토리 스캔',
+    loadExistingDataset: '기존 데이터셋 로드',
+    loadDataset: '로드',
+    scanNewDirectory: '새 디렉토리 스캔',
+    scanDataset: '스캔',
+    datasetSettings: '데이터셋 설정',
+    datasetName: '데이터셋 이름',
+    customActivationTag: '커스텀 활성화 태그',
+    allInstrumental: '모두 인스트루멘탈',
+    tagPosition: '태그 위치',
+    tagPrepend: '앞에 추가 (태그, 캡션)',
+    tagAppend: '뒤에 추가 (캡션, 태그)',
+    tagReplace: '캡션 대체',
+    genreRatio: '장르 비율',
+    genreRatioHint: '0% = 모두 캡션, 100% = 모두 장르',
+    autoLabelWithAI: 'AI로 자동 라벨링',
+    autoLabelDescription: '오디오 파일의 메타데이터 생성: 캡션, BPM, 키, 박자',
+    skipMetas: 'BPM/키/박자 건너뛰기',
+    onlyUnlabeled: '라벨 없는 것만',
+    autoLabelAll: '모두 자동 라벨링',
+    filename: '파일명',
+    labeled: '라벨됨',
+    saveDataset: '데이터셋 저장',
+    preprocessToTensors: '텐서로 전처리',
+    preprocessDescription: '빠른 훈련을 위해 데이터셋을 사전 계산된 텐서로 변환 (모델 로드 필요)',
+    preprocess: '전처리',
+    preprocessedDataset: '전처리된 데이터셋',
+    loraSettings: 'LoRA 설정',
+    loraRank: 'LoRA 랭크',
+    loraAlpha: 'LoRA Alpha',
+    dropout: '드롭아웃',
+    trainingParameters: '훈련 파라미터',
+    learningRate: '학습률',
+    maxEpochs: '최대 에포크',
+    gradientAccumulation: '그래디언트 누적',
+    saveEvery: '저장 간격',
+    epochs: '에포크',
+    outputDirectory: '출력 디렉토리',
+    useFP8: 'FP8 양자화 사용',
+    fp8Description: 'VRAM 사용량 감소',
+    startTraining: '훈련 시작',
+    stopTraining: '훈련 중지',
+    trainingProgress: '훈련 진행',
+    trainingLog: '훈련 로그',
+    
+    // Training Status Messages
+    scanning: '스캔 중...',
+    autoLabeling: '자동 라벨링 중...',
+    savingDataset: '저장 중...',
+    preprocessing: '전처리 중...',
+    loadingDataset: '로드 중...',
+    startingTraining: '시작 중...',
+    error: '오류',
+    datasetInfo: '데이터셋: {name}, 샘플: {samples}, 라벨됨: {labeled}',
+    trainingStep: '스텝 {step} - 손실: {loss}',
+    editSample: '샘플 편집',
+    caption: '캡션',
+    genre: '장르',
+    promptOverride: '프롬프트 재정의',
+    musicDescription: '음악 설명...',
+    overrideGlobalRatio: '이 샘플의 글로벌 비율 재정의',
+    editableUsedForTraining: '편집 가능, 훈련에 사용',
+    useGlobalRatio: '글로벌 비율 사용',
+    thisSample: '이 샘플',
+  }
+};
+
+export type TranslationKey = keyof typeof translations.en;
diff --git a/server/scripts/format_sample.py b/server/scripts/format_sample.py
index dd24b7b..235a914 100644
--- a/server/scripts/format_sample.py
+++ b/server/scripts/format_sample.py
@@ -23,12 +23,66 @@
 # Global handler
 _llm_handler = None
 
+def find_smallest_lm_model(checkpoint_dir):
+    """Find the smallest acestep-5Hz-lm model in checkpoint directory.
+    
+    Returns the model name (e.g., 'acestep-5Hz-lm-0.6B') or None if not found.
+    """
+    if not os.path.exists(checkpoint_dir):
+        return None
+    
+    try:
+        # List all directories in checkpoint_dir
+        entries = os.listdir(checkpoint_dir)
+        lm_models = []
+        
+        for entry in entries:
+            if entry.startswith("acestep-5Hz-lm-"):
+                full_path = os.path.join(checkpoint_dir, entry)
+                if os.path.isdir(full_path):
+                    lm_models.append(entry)
+        
+        if not lm_models:
+            return None
+        
+        # Extract size from model name (e.g., "0.6B" from "acestep-5Hz-lm-0.6B")
+        def extract_size(model_name):
+            parts = model_name.replace("acestep-5Hz-lm-", "").upper()
+            # Handle formats like "0.6B", "4B", etc.
+            if parts.endswith("B"):
+                size_str = parts[:-1]
+                try:
+                    return float(size_str)
+                except ValueError:
+                    return float('inf')  # Invalid format, put at end
+            return float('inf')
+        
+        # Sort by size and return smallest
+        lm_models.sort(key=extract_size)
+        return lm_models[0]
+    
+    except Exception as e:
+        print(f"Warning: Error finding LM model: {e}", file=sys.stderr)
+        return None
+
 def get_llm_handler(lm_model=None, lm_backend=None):
     global _llm_handler
     if _llm_handler is None:
         _llm_handler = LLMHandler()
         checkpoint_dir = os.path.join(ACESTEP_PATH, "checkpoints")
-        lm_model_path = lm_model or "acestep-5Hz-lm-0.6B"  # Default to smallest model
+        
+        # Auto-detect smallest LM model if not specified
+        if not lm_model:
+            lm_model_path = find_smallest_lm_model(checkpoint_dir)
+            if lm_model_path:
+                print(f"Using detected LM model: {lm_model_path}", file=sys.stderr)
+            else:
+                # Fallback to default
+                lm_model_path = "acestep-5Hz-lm-0.6B"
+                print(f"No LM model detected, using default: {lm_model_path}", file=sys.stderr)
+        else:
+            lm_model_path = lm_model
+        
         backend = lm_backend or "pt"
 
         # Auto-download model if not present
@@ -39,6 +93,7 @@ def get_llm_handler(lm_model=None, lm_backend=None):
             if not success:
                 raise RuntimeError(f"Failed to download model {lm_model_path}: {msg}")
             print(f"[format_sample] Download complete: {msg}")
+        
         if torch.cuda.is_available():
             device = "cuda"
         elif torch.backends.mps.is_available():
diff --git a/server/scripts/simple_generate.py b/server/scripts/simple_generate.py
index c444315..a432f24 100644
--- a/server/scripts/simple_generate.py
+++ b/server/scripts/simple_generate.py
@@ -24,10 +24,17 @@
 # Global handlers (initialized once)
 _handler = None
 _llm_handler = None
+_current_model = None
 
 def get_handlers():
-    global _handler, _llm_handler
-    if _handler is None:
+    global _handler, _llm_handler, _current_model
+    
+    # Default model if not specified
+    if not model:
+        model = "acestep-v15-turbo"
+    
+    # Reinitialize if model changed
+    if _handler is None or _current_model != model:
         if torch.cuda.is_available():
             device = "cuda"
         elif torch.backends.mps.is_available():
@@ -36,12 +43,15 @@ def get_handlers():
             device = "cpu"
         _handler = AceStepHandler()
         _handler.initialize_service(
+            use_flash_attention=True,
             project_root=ACESTEP_PATH,
-            config_path="acestep-v15-turbo",
+            config_path=model,
             device=device,
-            offload_to_cpu=True,  # For 12GB GPU
+            offload_to_cpu=True,
         )
         _llm_handler = LLMHandler()  # Create but don't initialize (not enough VRAM)
+        _current_model = model
+    
     return _handler, _llm_handler
 
 def generate(
@@ -55,6 +65,9 @@ def generate(
     time_signature: str = "",
     vocal_language: str = "auto",
 
+    # Model selection
+    model: str = None,
+
     # Generation parameters
     infer_steps: int = 8,
     guidance_scale: float = 10.0,
@@ -93,7 +106,7 @@ def generate(
     output_dir: str = None,
 ):
     """Generate music and return audio file paths."""
-    handler, llm_handler = get_handlers()
+    handler, llm_handler = get_handlers(model)
 
     if output_dir is None:
         output_dir = os.path.join(ACESTEP_PATH, "output")
@@ -182,6 +195,9 @@ def main():
     parser.add_argument("--time-signature", type=str, default="", help="Time signature (2, 3, 4, or 6)")
     parser.add_argument("--vocal-language", type=str, default="auto", help="Vocal language code")
 
+    # Model selection
+    parser.add_argument("--model", type=str, default=None, help="DiT model to use (e.g., 'acestep-v15-turbo', 'acestep-v15-turbo-shift3')")
+
     # Generation parameters
     parser.add_argument("--infer-steps", type=int, default=8, help="Inference steps")
     parser.add_argument("--guidance-scale", type=float, default=10.0, help="Guidance scale")
@@ -236,6 +252,9 @@ def main():
             time_signature=args.time_signature,
             vocal_language=args.vocal_language,
 
+            # Model
+            model=args.model,
+
             # Generation
             infer_steps=args.infer_steps,
             guidance_scale=args.guidance_scale,
diff --git a/server/src/db/migrate.ts b/server/src/db/migrate.ts
index 385ef34..e850943 100644
--- a/server/src/db/migrate.ts
+++ b/server/src/db/migrate.ts
@@ -34,6 +34,7 @@ CREATE TABLE IF NOT EXISTS songs (
   view_count INTEGER DEFAULT 0,
   has_video INTEGER DEFAULT 0,
   video_url TEXT,
+  model TEXT,
   generation_params TEXT,
   created_at TEXT DEFAULT (datetime('now')),
   updated_at TEXT DEFAULT (datetime('now'))
@@ -124,6 +125,18 @@ CREATE TABLE IF NOT EXISTS contact_submissions (
   created_at TEXT DEFAULT (datetime('now'))
 );
 
+-- Audio files table (for tracking uploaded/generated audio with storage metadata)
+CREATE TABLE IF NOT EXISTS audio_files (
+  id TEXT PRIMARY KEY,
+  song_id TEXT NOT NULL REFERENCES songs(id) ON DELETE CASCADE,
+  storage_key TEXT NOT NULL,
+  storage_provider TEXT DEFAULT 'local',
+  file_size_bytes INTEGER,
+  expires_at TEXT,
+  deleted_at TEXT,
+  created_at TEXT DEFAULT (datetime('now'))
+);
+
 -- Indexes for performance
 CREATE INDEX IF NOT EXISTS idx_songs_user_id ON songs(user_id);
 CREATE INDEX IF NOT EXISTS idx_songs_created_at ON songs(created_at);
@@ -139,6 +152,9 @@ CREATE INDEX IF NOT EXISTS idx_followers_follower ON followers(follower_id);
 CREATE INDEX IF NOT EXISTS idx_followers_following ON followers(following_id);
 CREATE INDEX IF NOT EXISTS idx_reference_tracks_user_id ON reference_tracks(user_id);
 CREATE INDEX IF NOT EXISTS idx_reference_tracks_created_at ON reference_tracks(created_at);
+CREATE INDEX IF NOT EXISTS idx_audio_files_song_id ON audio_files(song_id);
+CREATE INDEX IF NOT EXISTS idx_audio_files_deleted_at ON audio_files(deleted_at);
+CREATE INDEX IF NOT EXISTS idx_audio_files_expires_at ON audio_files(expires_at);
 `;
 
 function migrate(): void {
@@ -158,6 +174,20 @@ function migrate(): void {
       throw error;
     }
   }
+
+  // Add columns to existing tables (for incremental schema updates)
+  try {
+    // Add model column to songs table if it doesn't exist
+    db.exec(`ALTER TABLE songs ADD COLUMN model TEXT`);
+    console.log('Added model column to songs table');
+  } catch (error) {
+    const errorMsg = String(error);
+    if (errorMsg.includes('duplicate column name')) {
+      console.log('Column model already exists in songs table');
+    } else {
+      console.error('Failed to add model column:', error);
+    }
+  }
 }
 
 // Run migrations
diff --git a/server/src/index.ts b/server/src/index.ts
index 902e8a6..ac0db96 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -23,6 +23,8 @@ import usersRoutes from './routes/users.js';
 import playlistsRoutes from './routes/playlists.js';
 import contactRoutes from './routes/contact.js';
 import referenceTrackRoutes from './routes/referenceTrack.js';
+import trainingRoutes from './routes/training.js';
+import loraRoutes from './routes/lora.js';
 import { pool } from './db/pool.js';
 import './db/migrate.js';
 
@@ -403,6 +405,8 @@ app.use('/api/users', usersRoutes);
 app.use('/api/playlists', playlistsRoutes);
 app.use('/api/contact', contactRoutes);
 app.use('/api/reference-tracks', referenceTrackRoutes);
+app.use('/api/training', trainingRoutes);
+app.use('/api/lora', loraRoutes);
 
 // Error handler
 app.use((err: Error, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
diff --git a/server/src/routes/generate.ts b/server/src/routes/generate.ts
index de9effd..5479ced 100644
--- a/server/src/routes/generate.ts
+++ b/server/src/routes/generate.ts
@@ -6,16 +6,14 @@ import { pool } from '../db/pool.js';
 import { generateUUID } from '../db/sqlite.js';
 import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
 import {
-  generateMusicViaAPI,
-  getJobStatus,
   getAudioStream,
   discoverEndpoints,
   checkSpaceHealth,
-  cleanupJob,
-  getJobRawResponse,
   downloadAudioToBuffer,
+  getJobRawResponse,
   resolvePythonPath,
 } from '../services/acestep.js';
+import { config } from '../config/index.js';
 import { getStorageProvider } from '../services/storage/factory.js';
 
 const router = Router();
@@ -65,6 +63,9 @@ interface GenerateBody {
   style: string;
   title: string;
 
+  // Model Selection
+  ditModel?: string;
+
   // Common
   instrumental: boolean;
   vocalLanguage?: string;
@@ -123,6 +124,7 @@ interface GenerateBody {
   trackName?: string;
   completeTrackClasses?: string[];
   isFormatCaption?: boolean;
+  loraLoaded?: boolean;
 }
 
 router.post('/upload-audio', authMiddleware, audioUpload.single('audio'), async (req: AuthenticatedRequest, res: Response) => {
@@ -178,6 +180,7 @@ router.post('/', authMiddleware, async (req: AuthenticatedRequest, res: Response
       lyrics,
       style,
       title,
+      ditModel,
       instrumental,
       vocalLanguage,
       duration,
@@ -227,6 +230,7 @@ router.post('/', authMiddleware, async (req: AuthenticatedRequest, res: Response
       trackName,
       completeTrackClasses,
       isFormatCaption,
+      loraLoaded,
     } = req.body as GenerateBody;
 
     if (!customMode && !songDescription) {
@@ -245,6 +249,7 @@ router.post('/', authMiddleware, async (req: AuthenticatedRequest, res: Response
       lyrics,
       style,
       title,
+      ditModel,
       instrumental,
       vocalLanguage,
       duration,
@@ -294,6 +299,7 @@ router.post('/', authMiddleware, async (req: AuthenticatedRequest, res: Response
       trackName,
       completeTrackClasses,
       isFormatCaption,
+      loraLoaded,
     };
 
     // Create job record in database
@@ -304,13 +310,70 @@ router.post('/', authMiddleware, async (req: AuthenticatedRequest, res: Response
       [localJobId, req.user!.id, JSON.stringify(params)]
     );
 
-    // Start generation
-    const { jobId: hfJobId } = await generateMusicViaAPI(params);
+    // Call 8001 API to start generation
+    const acestepResponse = await fetch(`${config.acestep.apiUrl}/release_task`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': process.env.ACESTEP_API_KEY || '',
+      },
+      body: JSON.stringify({
+        prompt: params.customMode ? params.style : (params.songDescription || params.style),
+        lyrics: params.instrumental ? '' : (params.lyrics || ''),
+        thinking: params.loraLoaded ? false : (params.thinking || false),
+        dit_model: params.ditModel,
+        bpm: params.bpm,
+        key_scale: params.keyScale,
+        time_signature: params.timeSignature,
+        audio_duration: params.duration,
+        vocal_language: params.vocalLanguage || 'en',
+        inference_steps: params.inferenceSteps || 8,
+        guidance_scale: params.guidanceScale || 7.0,
+        use_random_seed: params.randomSeed !== false,
+        seed: params.seed || -1,
+        batch_size: params.batchSize || 1,
+        audio_code_string: params.audioCodes,
+        repainting_start: params.repaintingStart || 0.0,
+        repainting_end: params.repaintingEnd,
+        instruction: params.instruction,
+        audio_cover_strength: params.audioCoverStrength || 1.0,
+        task_type: params.taskType || 'text2music',
+        use_adg: params.loraLoaded ? false : (params.useAdg || false),
+        cfg_interval_start: params.cfgIntervalStart || 0.0,
+        cfg_interval_end: params.cfgIntervalEnd || 1.0,
+        infer_method: params.inferMethod || 'ode',
+        shift: params.shift,
+        audio_format: params.audioFormat || 'mp3',
+        ...(!params.loraLoaded && params.thinking ? {
+          lm_model_path: params.lmModel || undefined,
+          lm_backend: params.lmBackend || 'pt',
+          lm_temperature: params.lmTemperature,
+          lm_cfg_scale: params.lmCfgScale,
+          lm_top_k: params.lmTopK,
+          lm_top_p: params.lmTopP,
+          lm_negative_prompt: params.lmNegativePrompt,
+          use_cot_caption: params.useCotCaption !== false,
+          use_cot_language: params.useCotLanguage !== false,
+        } : {}),
+      }),
+    });
+
+    if (!acestepResponse.ok) {
+      const error = await acestepResponse.json().catch(() => ({ error: 'Generation failed' }));
+      throw new Error(error.error || error.message || 'Failed to start generation');
+    }
+
+    const acestepResult = await acestepResponse.json();
+    const taskId = acestepResult.data?.task_id || acestepResult.task_id;
+
+    if (!taskId) {
+      throw new Error('No task ID returned from ACE-Step API');
+    }
 
     // Update job with ACE-Step task ID
     await pool.query(
       `UPDATE generation_jobs SET acestep_task_id = ?, status = 'running', updated_at = datetime('now') WHERE id = ?`,
-      [hfJobId, localJobId]
+      [taskId, localJobId]
     );
 
     res.json({
@@ -348,7 +411,89 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
     // If job is still running, check ACE-Step status
     if (['pending', 'queued', 'running'].includes(job.status) && job.acestep_task_id) {
       try {
-        const aceStatus = await getJobStatus(job.acestep_task_id);
+        // Query 8001 API for task status
+        const queryResponse = await fetch(`${config.acestep.apiUrl}/query_result`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': process.env.ACESTEP_API_KEY || '',
+          },
+          body: JSON.stringify({
+            task_id_list: [job.acestep_task_id],
+          }),
+        });
+
+        if (!queryResponse.ok) {
+          throw new Error('Failed to query ACE-Step status');
+        }
+
+        const queryResult = await queryResponse.json();
+        
+        // Response format: { code: 200, data: [{ task_id, result, status }] }
+        const dataList = queryResult.data || queryResult.data_list || queryResult;
+        const taskData = Array.isArray(dataList) ? dataList[0] : null;
+
+        if (!taskData) {
+          console.error('Failed to parse task data. Full response:', JSON.stringify(queryResult, null, 2));
+          console.error('Looking for task_id:', job.acestep_task_id);
+          throw new Error(`No task data in response`);
+        }
+        
+        console.log('Task data:', JSON.stringify(taskData, null, 2));
+
+        // Map ACE-Step status codes to our status
+        const statusMap: Record<number, string> = {
+          0: 'running',
+          1: 'succeeded',
+          2: 'failed',
+        };
+        
+        // Parse result data
+        let resultData = null;
+        if (taskData.status === 1 && taskData.result) {
+          const parsedResults = JSON.parse(taskData.result);
+          const audioUrls: string[] = [];
+          let firstResult = null;
+          
+          // Process all results from batch
+          for (let i = 0; i < parsedResults.length; i++) {
+            const parsedResult = parsedResults[i];
+            if (i === 0) firstResult = parsedResult;
+            
+            // Convert path to full URL
+            let audioUrl = parsedResult.file;
+            console.log(`[Batch ${i + 1}/${parsedResults.length}] Original file path:`, audioUrl);
+            
+            if (audioUrl) {
+              if (audioUrl.startsWith('/v1/audio')) {
+                audioUrl = `${config.acestep.apiUrl}${audioUrl}`;
+                console.log(`[Batch ${i + 1}] Prepended domain to API path:`, audioUrl);
+              } else if (!audioUrl.startsWith('http')) {
+                audioUrl = `${config.acestep.apiUrl}/v1/audio?path=${encodeURIComponent(audioUrl)}`;
+                console.log(`[Batch ${i + 1}] Converted file path to API URL:`, audioUrl);
+              }
+              audioUrls.push(audioUrl);
+            }
+          }
+          
+          resultData = {
+            audioUrls,
+            duration: firstResult?.metas?.duration,
+            bpm: firstResult?.metas?.bpm,
+            keyScale: firstResult?.metas?.keyscale,
+            timeSignature: firstResult?.metas?.timesignature,
+            ditModel: firstResult?.dit_model,
+            status: 'succeeded',
+          };
+        }
+        
+        const aceStatus = {
+          status: statusMap[taskData.status] || 'running',
+          result: resultData,
+          error: taskData.status === 2 ? 'Generation failed' : undefined,
+          queuePosition: undefined,
+          etaSeconds: undefined,
+        };
 
         if (aceStatus.status !== job.status) {
           let updateQuery = `UPDATE generation_jobs SET status = ?, updated_at = datetime('now')`;
@@ -392,9 +537,9 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
 
                 await pool.query(
                   `INSERT INTO songs (id, user_id, title, lyrics, style, caption, audio_url,
-                                      duration, bpm, key_scale, time_signature, tags, is_public, generation_params,
+                                      duration, bpm, key_scale, time_signature, tags, is_public, model, generation_params,
                                       created_at, updated_at)
-                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, ?, datetime('now'), datetime('now'))`,
+                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, ?, ?, datetime('now'), datetime('now'))`,
                   [
                     songId,
                     req.user!.id,
@@ -408,6 +553,7 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
                     aceStatus.result.keyScale || params.keyScale,
                     aceStatus.result.timeSignature || params.timeSignature,
                     JSON.stringify([]),
+                    aceStatus.result.ditModel || params.ditModel || 'acestep-v15-sft',
                     JSON.stringify(params),
                   ]
                 );
@@ -418,9 +564,9 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
                 // Still create song record with remote URL
                 await pool.query(
                   `INSERT INTO songs (id, user_id, title, lyrics, style, caption, audio_url,
-                                      duration, bpm, key_scale, time_signature, tags, is_public, generation_params,
+                                      duration, bpm, key_scale, time_signature, tags, is_public, model, generation_params,
                                       created_at, updated_at)
-                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, ?, datetime('now'), datetime('now'))`,
+                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, ?, ?, datetime('now'), datetime('now'))`,
                   [
                     songId,
                     req.user!.id,
@@ -434,6 +580,7 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
                     aceStatus.result.keyScale || params.keyScale,
                     aceStatus.result.timeSignature || params.timeSignature,
                     JSON.stringify([]),
+                    aceStatus.result.ditModel || params.ditModel || 'acestep-v15-sft',
                     JSON.stringify(params),
                   ]
                 );
@@ -442,7 +589,6 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
             }
 
             aceStatus.result.audioUrls = localPaths;
-            cleanupJob(job.acestep_task_id);
           }
         }
 
@@ -544,6 +690,27 @@ router.get('/history', authMiddleware, async (req: AuthenticatedRequest, res: Re
   }
 });
 
+router.get('/models', async (_req, res: Response) => {
+  try {
+    const modelsResponse = await fetch(`${config.acestep.apiUrl}/v1/models`, {
+      headers: {
+        'x-api-key': process.env.ACESTEP_API_KEY || '',
+      },
+    });
+
+    if (!modelsResponse.ok) {
+      res.status(modelsResponse.status).json({ error: 'Failed to fetch models' });
+      return;
+    }
+
+    const result = await modelsResponse.json();
+    res.json(result.data || result);
+  } catch (error) {
+    console.error('Models proxy error:', error);
+    res.status(500).json({ error: 'Failed to fetch models from backend' });
+  }
+});
+
 router.get('/endpoints', authMiddleware, async (_req: AuthenticatedRequest, res: Response) => {
   try {
     const endpoints = await discoverEndpoints();
@@ -631,6 +798,7 @@ router.get('/debug/:taskId', authMiddleware, async (req: AuthenticatedRequest, r
 });
 
 // Format endpoint - uses LLM to enhance style/lyrics
+// Strategy: try 8001 API first, fall back to local Python script
 router.post('/format', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
   try {
     const { caption, lyrics, bpm, duration, keyScale, timeSignature, temperature, topK, topP, lmModel, lmBackend } = req.body;
@@ -640,6 +808,38 @@ router.post('/format', authMiddleware, async (req: AuthenticatedRequest, res: Re
       return;
     }
 
+    // Attempt 1: Call 8001 API format_input endpoint
+    try {
+      const formatResponse = await fetch(`${config.acestep.apiUrl}/format_input`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-api-key': process.env.ACESTEP_API_KEY || '',
+        },
+        body: JSON.stringify({
+          caption,
+          lyrics: lyrics || '',
+          bpm: bpm || 0,
+          duration: duration || 0,
+          key_scale: keyScale || '',
+          time_signature: timeSignature || '',
+          temperature: temperature,
+          top_k: topK,
+          top_p: topP,
+        }),
+      });
+
+      if (formatResponse.ok) {
+        const result = await formatResponse.json();
+        res.json(result.data || result);
+        return;
+      }
+      console.warn(`[Format] API returned ${formatResponse.status}, falling back to Python script`);
+    } catch (apiError) {
+      console.warn('[Format] API unavailable, falling back to Python script:', (apiError as Error).message);
+    }
+
+    // Attempt 2: Fall back to local Python script
     const { spawn } = await import('child_process');
 
     const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../ACE-Step-1.5');
@@ -666,8 +866,6 @@ router.post('/format', authMiddleware, async (req: AuthenticatedRequest, res: Re
     if (lmModel) args.push('--lm-model', lmModel);
     if (lmBackend) args.push('--lm-backend', lmBackend);
 
-    console.log(`[Format] Running: ${pythonPath} ${args.join(' ')}`);
-    console.log(`[Format] CWD: ${ACESTEP_DIR}`);
     const result = await new Promise<{ success: boolean; data?: any; error?: string }>((resolve) => {
       const proc = spawn(pythonPath, args, {
         cwd: ACESTEP_DIR,
@@ -685,7 +883,6 @@ router.post('/format', authMiddleware, async (req: AuthenticatedRequest, res: Re
 
       proc.on('close', (code) => {
         if (code === 0 && stdout) {
-          // stdout may contain log lines before the JSON — extract last JSON line
           const lines = stdout.trim().split('\n');
           let jsonStr = '';
           for (let i = lines.length - 1; i >= 0; i--) {
diff --git a/server/src/routes/lora.ts b/server/src/routes/lora.ts
new file mode 100644
index 0000000..a9e92a0
--- /dev/null
+++ b/server/src/routes/lora.ts
@@ -0,0 +1,82 @@
+import { Router, Response } from 'express';
+import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
+
+const router = Router();
+
+const ACESTEP_API_URL = process.env.ACESTEP_API_URL || 'http://127.0.0.1:8001';
+const ACESTEP_API_KEY = process.env.ACESTEP_API_KEY || '';
+
+async function proxyToAceStep(endpoint: string, method: string, data?: any) {
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    
+    if (ACESTEP_API_KEY) {
+      headers['x-api-key'] = ACESTEP_API_KEY;
+    }
+
+    const options: RequestInit = {
+      method,
+      headers,
+    };
+
+    if (data && (method === 'POST' || method === 'PUT')) {
+      options.body = JSON.stringify(data);
+    }
+
+    const response = await fetch(`${ACESTEP_API_URL}${endpoint}`, options);
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Request failed' }));
+      throw new Error(errorData.error || errorData.message || 'Request failed');
+    }
+
+    const result = await response.json();
+    
+    if (result && typeof result === 'object' && 'data' in result) {
+      return result.data;
+    }
+    return result;
+  } catch (error: any) {
+    throw new Error(error.message || 'Request failed');
+  }
+}
+
+router.post('/load', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/lora/load', 'POST', req.body);
+    res.json(result || { message: 'LoRA loaded' });
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/unload', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/lora/unload', 'POST');
+    res.json(result || { message: 'LoRA unloaded' });
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/toggle', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/lora/toggle', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/scale', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/lora/scale', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;
diff --git a/server/src/routes/songs.ts b/server/src/routes/songs.ts
index 6dd9ec5..996b6c1 100644
--- a/server/src/routes/songs.ts
+++ b/server/src/routes/songs.ts
@@ -107,7 +107,7 @@ router.get('/', authMiddleware, async (req: AuthenticatedRequest, res: Response)
     const result = await pool.query(
       `SELECT s.id, s.title, s.lyrics, s.style, s.caption, s.cover_url, s.audio_url,
               s.duration, s.bpm, s.key_scale, s.time_signature, s.tags, s.is_public, 
-              s.like_count, s.view_count, s.user_id, s.created_at, s.generation_params,
+              s.like_count, s.view_count, s.user_id, s.model as dit_model, s.created_at,
               COALESCE(u.username, 'Anonymous') as creator
        FROM songs s
        LEFT JOIN users u ON s.user_id = u.id
@@ -119,6 +119,7 @@ router.get('/', authMiddleware, async (req: AuthenticatedRequest, res: Response)
     const songs = await Promise.all(
       result.rows.map(async (row) => ({
         ...row,
+        ditModel: row.dit_model,
         audio_url: await resolveAccessibleAudioUrl(row.audio_url, row.is_public),
       }))
     );
@@ -160,6 +161,7 @@ router.get('/public/featured', optionalAuthMiddleware, async (_req: Authenticate
         tags: row.tags || [],
         like_count: row.like_count || 0,
         view_count: row.view_count || 0,
+        ditModel: row.dit_model,
         created_at: row.created_at,
         creator: row.creator,
         creator_avatar: row.creator_avatar,
@@ -196,6 +198,7 @@ router.get('/public', optionalAuthMiddleware, async (req: AuthenticatedRequest,
     const songs = await Promise.all(
       result.rows.map(async (row) => ({
         ...row,
+        ditModel: row.dit_model,
         audio_url: await resolveAccessibleAudioUrl(row.audio_url, true),
       }))
     );
@@ -235,6 +238,7 @@ router.get('/:id', optionalAuthMiddleware, async (req: AuthenticatedRequest, res
 
     const resolvedSong = {
       ...song,
+      ditModel: song.dit_model,
       audio_url: await resolveAccessibleAudioUrl(song.audio_url, song.is_public),
     };
 
@@ -288,6 +292,7 @@ router.get('/:id/full', optionalAuthMiddleware, async (req: AuthenticatedRequest
 
     const resolvedSong = {
       ...song,
+      ditModel: song.dit_model,
       audio_url: await resolveAccessibleAudioUrl(song.audio_url, song.is_public),
     };
 
@@ -383,12 +388,34 @@ router.patch('/:id', authMiddleware, async (req: AuthenticatedRequest, res: Resp
     updates.push(`updated_at = CURRENT_TIMESTAMP`);
     values.push(req.params.id);
 
-    const result = await pool.query(
-      `UPDATE songs SET ${updates.join(', ')} WHERE id = $${paramCount} RETURNING *`,
+    await pool.query(
+      `UPDATE songs 
+       SET ${updates.join(', ')} 
+       WHERE id = $${paramCount}`,
       values
     );
 
-    res.json({ song: result.rows[0] });
+    // Fetch complete song data with creator info
+    const result = await pool.query(
+      `SELECT s.id, s.title, s.lyrics, s.style, s.caption, s.cover_url, s.audio_url,
+              s.duration, s.bpm, s.key_scale, s.time_signature, s.tags, s.is_public, 
+              s.like_count, s.view_count, s.user_id, s.model as dit_model, s.created_at,
+              COALESCE(u.username, 'Anonymous') as creator
+       FROM songs s
+       LEFT JOIN users u ON s.user_id = u.id
+       WHERE s.id = $1`,
+      [req.params.id]
+    );
+
+    // Map database fields to frontend format
+    const song = result.rows[0];
+    const mappedSong = {
+      ...song,
+      ditModel: song.dit_model,
+      audio_url: await resolveAccessibleAudioUrl(song.audio_url, song.is_public),
+    };
+
+    res.json({ song: mappedSong });
   } catch (error) {
     console.error('Update song error:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -508,6 +535,7 @@ router.get('/liked/list', authMiddleware, async (req: AuthenticatedRequest, res:
     const songs = await Promise.all(
       result.rows.map(async (row) => ({
         ...row,
+        ditModel: row.dit_model,
         audio_url: await resolveAccessibleAudioUrl(row.audio_url, row.is_public),
       }))
     );
diff --git a/server/src/routes/training.ts b/server/src/routes/training.ts
new file mode 100644
index 0000000..e06817e
--- /dev/null
+++ b/server/src/routes/training.ts
@@ -0,0 +1,204 @@
+import { Router, Response } from 'express';
+import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
+
+const router = Router();
+
+const ACESTEP_API_URL = process.env.ACESTEP_API_URL || 'http://127.0.0.1:8001';
+const ACESTEP_API_KEY = process.env.ACESTEP_API_KEY || '';
+
+async function proxyToAceStep(endpoint: string, method: string, data?: any) {
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    
+    if (ACESTEP_API_KEY) {
+      headers['x-api-key'] = ACESTEP_API_KEY;
+    }
+
+    const options: RequestInit = {
+      method,
+      headers,
+    };
+
+    if (data && (method === 'POST' || method === 'PUT')) {
+      options.body = JSON.stringify(data);
+    }
+
+    const response = await fetch(`${ACESTEP_API_URL}${endpoint}`, options);
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Request failed' }));
+      throw new Error(errorData.error || errorData.message || 'Request failed');
+    }
+
+    const result = await response.json();
+    
+    if (result && typeof result === 'object' && 'data' in result) {
+      return result.data;
+    }
+    return result;
+  } catch (error: any) {
+    throw new Error(error.message || 'Request failed');
+  }
+}
+
+// Dataset Builder Routes
+router.post('/dataset/scan', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/scan', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/load', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    console.log('[Training] Load dataset request body:', JSON.stringify(req.body));
+    const result = await proxyToAceStep('/v1/dataset/load', 'POST', req.body);
+    console.log('[Training] Load dataset response:', JSON.stringify(result));
+    res.json(result);
+  } catch (error: any) {
+    console.error('[Training] Load dataset error:', error.message);
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/auto-label', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/auto_label', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/auto-label-async', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/auto_label_async', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.get('/dataset/auto-label-status/:taskId', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep(`/v1/dataset/auto_label_status/${req.params.taskId}`, 'GET');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/save', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/save', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/preprocess', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/preprocess', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/dataset/preprocess-async', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/preprocess_async', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.get('/dataset/preprocess-status/:taskId', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep(`/v1/dataset/preprocess_status/${req.params.taskId}`, 'GET');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.get('/dataset/samples', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/dataset/samples', 'GET');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.get('/dataset/sample/:index', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep(`/v1/dataset/sample/${req.params.index}`, 'GET');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.put('/dataset/sample/:index', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep(`/v1/dataset/sample/${req.params.index}`, 'PUT', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Training Routes
+router.post('/load_tensor_info', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/training/load_tensor_info', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/start', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/training/start', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/stop', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/training/stop', 'POST');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.get('/status', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/training/status', 'GET');
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+router.post('/export', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const result = await proxyToAceStep('/v1/training/export', 'POST', req.body);
+    res.json(result);
+  } catch (error: any) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;
diff --git a/server/src/routes/users.ts b/server/src/routes/users.ts
index 2f9ca04..9e40234 100644
--- a/server/src/routes/users.ts
+++ b/server/src/routes/users.ts
@@ -106,7 +106,7 @@ router.get('/:username/songs', async (req, res: Response) => {
         const songsResult = await pool.query(
             `SELECT s.id, s.title, s.lyrics, s.style, s.caption, s.cover_url, s.audio_url,
               s.duration, s.bpm, s.key_scale, s.time_signature, s.tags, s.like_count,
-              s.view_count, s.created_at, u.username as creator
+              s.view_count, s.model as dit_model, s.created_at, u.username as creator
        FROM songs s
        LEFT JOIN users u ON s.user_id = u.id
        WHERE s.user_id = $1 AND s.is_public = 1
@@ -117,6 +117,7 @@ router.get('/:username/songs', async (req, res: Response) => {
         const songs = await Promise.all(
             songsResult.rows.map(async (row) => ({
                 ...row,
+                ditModel: row.dit_model,
                 audio_url: await resolvePublicAudioUrl(row.audio_url),
             }))
         );
diff --git a/server/src/services/acestep.ts b/server/src/services/acestep.ts
index fd41b63..e34074c 100644
--- a/server/src/services/acestep.ts
+++ b/server/src/services/acestep.ts
@@ -136,6 +136,7 @@ async function submitToApi(params: GenerationParams): Promise<{ taskId: string }
     use_cot_caption: false, // Explicitly disable CoT features that require LLM
     use_cot_language: false, // Explicitly disable CoT features that require LLM
     use_cot_metas: false, // Explicitly disable CoT features that require LLM
+    dit_model: params.model || undefined,
     lm_backend: params.lmBackend || 'pt',
     lm_model_path: params.lmModel || undefined,
   };
@@ -361,6 +362,9 @@ export interface GenerationParams {
   style: string;
   title: string;
 
+  // Model Selection
+  model?: string;
+
   // Common
   instrumental: boolean;
   vocalLanguage?: string;
@@ -636,6 +640,7 @@ async function processGeneration(
       '--json',
     ];
 
+    if (params.model) args.push('--model', params.model);
     if (lyrics) args.push('--lyrics', lyrics);
     if (params.instrumental) args.push('--instrumental');
     if (params.bpm && params.bpm > 0) args.push('--bpm', String(params.bpm));
diff --git a/services/api.ts b/services/api.ts
index 979fdf7..23b3b35 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -106,6 +106,7 @@ export interface Song {
   user_id?: string;
   created_at: string;
   creator?: string;
+  ditModel?: string;
   generation_params?: any;
 }
 
@@ -155,8 +156,46 @@ export const songsApi = {
   createSong: (song: Partial<Song>, token: string): Promise<{ song: Song }> =>
     api('/api/songs', { method: 'POST', body: song, token }),
 
-  updateSong: (id: string, updates: Partial<Song>, token: string): Promise<{ song: Song }> =>
-    api(`/api/songs/${id}`, { method: 'PATCH', body: updates, token }),
+  updateSong: async (id: string, updates: Partial<Song>, token: string): Promise<{ song: any }> => {
+    const result = await api(`/api/songs/${id}`, { method: 'PATCH', body: updates, token }) as { song: any };
+    const s = result.song;
+    const rawUrl = s.audio_url || s.audioUrl;
+    const resolvedUrl = getAudioUrl(rawUrl, s.id);
+    
+    return {
+      song: {
+        id: s.id,
+        title: s.title,
+        lyrics: s.lyrics,
+        style: s.style,
+        caption: s.caption,
+        cover_url: s.cover_url,
+        coverUrl: s.cover_url || s.coverUrl || `https://picsum.photos/seed/${s.id}/400/400`,
+        duration: s.duration && s.duration > 0 ? `${Math.floor(s.duration / 60)}:${String(Math.floor(s.duration % 60)).padStart(2, '0')}` : '0:00',
+        createdAt: new Date(s.created_at || s.createdAt),
+        created_at: s.created_at,
+        tags: s.tags || [],
+        audioUrl: resolvedUrl,
+        audio_url: resolvedUrl,
+        isPublic: s.is_public ?? s.isPublic,
+        is_public: s.is_public ?? s.isPublic,
+        likeCount: s.like_count || s.likeCount || 0,
+        like_count: s.like_count || s.likeCount || 0,
+        viewCount: s.view_count || s.viewCount || 0,
+        view_count: s.view_count || s.viewCount || 0,
+        userId: s.user_id || s.userId,
+        user_id: s.user_id || s.userId,
+        creator: s.creator,
+        creator_avatar: s.creator_avatar,
+        ditModel: s.dit_model || s.ditModel,
+        isGenerating: s.isGenerating,
+        queuePosition: s.queuePosition,
+        bpm: s.bpm,
+        key_scale: s.key_scale,
+        time_signature: s.time_signature,
+      }
+    };
+  },
 
   deleteSong: (id: string, token: string): Promise<{ success: boolean }> =>
     api(`/api/songs/${id}`, { method: 'DELETE', token }),
@@ -206,6 +245,9 @@ export interface GenerationParams {
   style: string;
   title: string;
 
+  // Model Selection
+  ditModel?: string;
+
   // Common
   instrumental: boolean;
   vocalLanguage?: string;
@@ -264,6 +306,7 @@ export interface GenerationParams {
   trackName?: string;
   completeTrackClasses?: string[];
   isFormatCaption?: boolean;
+  loraLoaded?: boolean;
 }
 
 export interface GenerationJob {
@@ -321,17 +364,35 @@ export const generateApi = {
     lmModel?: string;
     lmBackend?: string;
   }, token: string): Promise<{
-    success: boolean;
     caption?: string;
     lyrics?: string;
     bpm?: number;
     duration?: number;
     key_scale?: string;
-    language?: string;
+    vocal_language?: string;
     time_signature?: string;
     status_message?: string;
     error?: string;
   }> => api('/api/generate/format', { method: 'POST', body: params, token }),
+
+  // LoRA Inference
+  loadLora: (params: {
+    lora_path: string;
+  }, token: string): Promise<{
+    message: string;
+    lora_path: string;
+  }> => api('/api/lora/load', { method: 'POST', body: params, token }),
+
+  unloadLora: (token: string): Promise<{
+    message: string;
+  }> => api('/api/lora/unload', { method: 'POST', token }),
+
+  setLoraScale: (params: {
+    scale: number;
+  }, token: string): Promise<{
+    message: string;
+    scale: number;
+  }> => api('/api/lora/scale', { method: 'POST', body: params, token }),
 };
 
 // Users API
@@ -471,3 +532,229 @@ export const contactApi = {
   submit: (data: ContactFormData): Promise<{ success: boolean; message: string; id: string }> =>
     api('/api/contact', { method: 'POST', body: data }),
 };
+
+// Training API
+export interface DatasetSample {
+  index: number;
+  filename: string;
+  audio_path: string;
+  duration?: number;
+  caption?: string;
+  genre?: string;
+  prompt_override?: string | null;
+  lyrics?: string;
+  bpm?: number;
+  keyscale?: string;
+  timesignature?: string;
+  language?: string;
+  is_instrumental?: boolean;
+  labeled?: boolean;
+}
+
+export interface DatasetMetadata {
+  name: string;
+  custom_tag?: string;
+  tag_position?: 'prepend' | 'append' | 'replace';
+  all_instrumental?: boolean;
+}
+
+export interface TrainingStatus {
+  is_training: boolean;
+  should_stop: boolean;
+  current_step?: number;
+  current_loss?: number;
+  current_epoch?: number;
+  status?: string;
+  config?: {
+    lora_rank: number;
+    lora_alpha: number;
+    learning_rate: number;
+    epochs: number;
+  };
+  tensor_dir?: string;
+  loss_history?: Array<{ step: number; loss: number }>;
+  tensorboard_url?: string;
+  tensorboard_logdir?: string;
+  training_log?: string;
+  start_time?: number;
+  steps_per_second?: number;
+  estimated_time_remaining?: number;
+  error?: string;
+}
+
+export const trainingApi = {
+  // Dataset Builder
+  scanDirectory: (params: {
+    audio_dir: string;
+    dataset_name?: string;
+    custom_tag?: string;
+    tag_position?: 'prepend' | 'append' | 'replace';
+    all_instrumental?: boolean;
+  }, token: string): Promise<{
+    message: string;
+    num_samples: number;
+    samples: any[];
+  }> => api('/api/training/dataset/scan', { method: 'POST', body: params, token }),
+
+  loadDataset: (params: {
+    dataset_path: string;
+  }, token: string): Promise<{
+    message: string;
+    dataset_name: string;
+    num_samples: number;
+    labeled_count: number;
+    samples: any[];
+  }> => api('/api/training/dataset/load', { method: 'POST', body: params, token }),
+
+  autoLabel: (params: {
+    skip_metas?: boolean;
+    format_lyrics?: boolean;
+    transcribe_lyrics?: boolean;
+    only_unlabeled?: boolean;
+  }, token: string): Promise<{
+    message: string;
+    labeled_count: number;
+    samples: any[];
+  }> => api('/api/training/dataset/auto-label', { method: 'POST', body: params, token }),
+
+  autoLabelAsync: (params: {
+    skip_metas?: boolean;
+    format_lyrics?: boolean;
+    transcribe_lyrics?: boolean;
+    only_unlabeled?: boolean;
+  }, token: string): Promise<{
+    task_id: string;
+    message: string;
+    total: number;
+  }> => api('/api/training/dataset/auto-label-async', { method: 'POST', body: params, token }),
+
+  getAutoLabelStatus: (taskId: string, token: string): Promise<{
+    task_id: string;
+    status: 'running' | 'completed' | 'failed';
+    progress: string;
+    current: number;
+    total: number;
+    result?: {
+      message: string;
+      labeled_count: number;
+      samples: any[];
+    };
+    error?: string;
+  }> => api(`/api/training/dataset/auto-label-status/${taskId}`, { method: 'GET', token }),
+
+  saveDataset: (params: {
+    save_path: string;
+    dataset_name?: string;
+    custom_tag?: string;
+    tag_position?: 'prepend' | 'append' | 'replace';
+    all_instrumental?: boolean;
+    genre_ratio?: number;
+  }, token: string): Promise<{
+    message: string;
+    save_path: string;
+  }> => api('/api/training/dataset/save', { method: 'POST', body: params, token }),
+
+  preprocessDataset: (params: {
+    output_dir: string;
+  }, token: string): Promise<{
+    message: string;
+    output_dir: string;
+    num_tensors: number;
+  }> => api('/api/training/dataset/preprocess', { method: 'POST', body: params, token }),
+
+  preprocessDatasetAsync: (params: {
+    output_dir: string;
+  }, token: string): Promise<{
+    task_id: string;
+    message: string;
+    total: number;
+  }> => api('/api/training/dataset/preprocess-async', { method: 'POST', body: params, token }),
+
+  getPreprocessStatus: (taskId: string, token: string): Promise<{
+    task_id: string;
+    status: 'running' | 'completed' | 'failed';
+    progress: string;
+    current: number;
+    total: number;
+    result?: {
+      message: string;
+      output_dir: string;
+      num_tensors: number;
+    };
+    error?: string;
+  }> => api(`/api/training/dataset/preprocess-status/${taskId}`, { method: 'GET', token }),
+
+  getSamples: (token: string): Promise<{
+    dataset_name: string;
+    num_samples: number;
+    labeled_count: number;
+    samples: DatasetSample[];
+  }> => api('/api/training/dataset/samples', { token }),
+
+  getSample: (index: number, token: string): Promise<DatasetSample> =>
+    api(`/api/training/dataset/sample/${index}`, { token }),
+
+  updateSample: (index: number, params: {
+    caption?: string;
+    genre?: string;
+    prompt_override?: string | null;
+    lyrics?: string;
+    bpm?: number | null;
+    keyscale?: string;
+    timesignature?: string;
+    language?: string;
+    duration?: number;
+    is_instrumental?: boolean;
+  }, token: string): Promise<{
+    message: string;
+    sample: DatasetSample;
+  }> => api(`/api/training/dataset/sample/${index}`, { method: 'PUT', body: params, token }),
+
+  // Training
+  loadTensorInfo: (params: {
+    tensor_dir: string;
+  }, token: string): Promise<{
+    dataset_name: string;
+    num_samples: number;
+    tensor_dir: string;
+    message: string;
+  }> => api('/api/training/load_tensor_info', { method: 'POST', body: params, token }),
+
+  startTraining: (params: {
+    tensor_dir: string;
+    lora_rank?: number;
+    lora_alpha?: number;
+    lora_dropout?: number;
+    learning_rate?: number;
+    train_epochs?: number;
+    train_batch_size?: number;
+    gradient_accumulation?: number;
+    save_every_n_epochs?: number;
+    training_shift?: number;
+    training_seed?: number;
+    lora_output_dir?: string;
+    use_fp8?: boolean;
+  }, token: string): Promise<{
+    message: string;
+    tensor_dir: string;
+    output_dir: string;
+    config: any;
+    fp8_enabled?: boolean;
+  }> => api('/api/training/start', { method: 'POST', body: params, token }),
+
+  stopTraining: (token: string): Promise<{
+    message: string;
+  }> => api('/api/training/stop', { method: 'POST', token }),
+
+  getTrainingStatus: (token: string): Promise<TrainingStatus> =>
+    api('/api/training/status', { token }),
+
+  exportLora: (params: {
+    export_path: string;
+    lora_output_dir: string;
+  }, token: string): Promise<{
+    message: string;
+    export_path: string;
+    source: string;
+  }> => api('/api/training/export', { method: 'POST', body: params, token }),
+};
diff --git a/types.ts b/types.ts
index d19d51c..50556e5 100644
--- a/types.ts
+++ b/types.ts
@@ -19,6 +19,7 @@ export interface Song {
   userId?: string;
   creator?: string;
   creator_avatar?: string;
+  ditModel?: string; // DiT model used for generation (e.g., 'acestep-v15-sft')
 }
 
 export interface Playlist {
@@ -58,6 +59,7 @@ export interface GenerationParams {
   lyrics: string;
   style: string;
   title: string;
+  ditModel?: string;
 
   // Common
   instrumental: boolean;
@@ -149,4 +151,4 @@ export interface UserProfile {
 }
 
 // Simplified views for ACE-Step UI
-export type View = 'create' | 'library' | 'profile' | 'song' | 'playlist' | 'search';
+export type View = 'create' | 'library' | 'profile' | 'song' | 'playlist' | 'search' | 'training';
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 0000000..b3b91ad
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+// 声明导入 .txt 文件为原始文本的类型
+declare module '*.txt' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.txt?raw' {
+  const content: string;
+  export default content;
+}