From e74ba3ce8380ad99b914bdd1ae23df8b1abb03b0 Mon Sep 17 00:00:00 2001
From: vanch <vanchye@outlook.com>
Date: Mon, 9 Feb 2026 11:55:16 +0800
Subject: [PATCH] feat(i18n): add Chinese/English internationalization support

Add i18next with browser language detection, locale files (en/zh),
and replace all hardcoded strings across 15 components with t() calls.
Includes language switcher UI in Settings modal.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 App.tsx                            |   4 +-
 components/CreatePanel.tsx         | 292 ++++++------
 components/LibraryView.tsx         |  30 +-
 components/Player.tsx              | 691 +++++++++++++----------------
 components/PlaylistDetail.tsx      |  31 +-
 components/PlaylistModals.tsx      |  27 +-
 components/RightSidebar.tsx        |  54 +--
 components/SearchPage.tsx          |  20 +-
 components/SettingsModal.tsx       |  52 ++-
 components/Sidebar.tsx             |  17 +-
 components/SongDropdownMenu.tsx    |  22 +-
 components/SongList.tsx            |  66 +--
 components/SongProfile.tsx         |  22 +-
 components/UserProfile.tsx         |  52 +--
 components/UsernameModal.tsx       |  18 +-
 components/VideoGeneratorModal.tsx | 668 ++++++++++++----------------
 i18n.ts                            |  26 ++
 index.tsx                          |   1 +
 locales/en.json                    | 379 ++++++++++++++++
 locales/zh.json                    | 378 ++++++++++++++++
 package-lock.json                  | 110 ++++-
 package.json                       |   5 +-
 22 files changed, 1875 insertions(+), 1090 deletions(-)
 create mode 100644 i18n.ts
 create mode 100644 locales/en.json
 create mode 100644 locales/zh.json

diff --git a/App.tsx b/App.tsx
index 0f8bdfd..b8ee548 100644
--- a/App.tsx
+++ b/App.tsx
@@ -19,11 +19,13 @@ import { List } from 'lucide-react';
 import { PlaylistDetail } from './components/PlaylistDetail';
 import { Toast, ToastType } from './components/Toast';
 import { SearchPage } from './components/SearchPage';
+import { useTranslation } from 'react-i18next';
 
 
 export default function App() {
   // Responsive
   const { isMobile, isDesktop } = useResponsive();
+  const { t } = useTranslation();
 
   // Auth
   const { user, token, isAuthenticated, isLoading: authLoading, setupUser, logout } = useAuth();
@@ -1286,7 +1288,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('common.createSong') : t('common.viewList')}
                 <List size={16} />
               </button>
             </div>
diff --git a/components/CreatePanel.tsx b/components/CreatePanel.tsx
index a041000..1a093fd 100644
--- a/components/CreatePanel.tsx
+++ b/components/CreatePanel.tsx
@@ -3,6 +3,7 @@ import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash,
 import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
 import { generateApi } from '../services/api';
+import { useTranslation } from 'react-i18next';
 
 interface ReferenceTrack {
   id: string;
@@ -110,6 +111,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   onAudioSelectionApplied,
 }) => {
   const { isAuthenticated, token, user } = useAuth();
+  const { t } = useTranslation();
 
   // Mode
   const [customMode, setCustomMode] = useState(true);
@@ -288,16 +290,6 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing) return;
 
-      // Calculate new height based on mouse position relative to the lyrics container top
-      // We can't easily get the container top here without a ref to it, 
-      // but we can use dy (delta y) from the previous position if we tracked it,
-      // OR simpler: just update based on movement if we track the start.
-      //
-      // Better approach for absolute sizing: 
-      // 1. Get the bounding rect of the textarea wrapper on mount/resize start? 
-      //    We can just rely on the fact that we are dragging the bottom.
-      //    So new height = currentMouseY - topOfElement.
-
       if (lyricsRef.current) {
         const rect = lyricsRef.current.getBoundingClientRect();
         const newHeight = e.clientY - rect.top;
@@ -835,12 +827,12 @@ 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('create.custom.audio.dropUse') : t('create.custom.audio.dropUpload')}
               </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('create.custom.audio.usingRef') : t('create.custom.audio.usingCover'))
+                  : (audioTab === 'reference' ? t('create.custom.audio.usingRef') : t('create.custom.audio.usingCover'))}
               </div>
             </div>
           </div>
@@ -892,13 +884,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               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
+              {t('create.mode.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
+              {t('create.mode.custom')}
             </button>
           </div>
         </div>
@@ -909,12 +901,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('create.simple.describeTitle')}
               </div>
               <textarea
                 value={songDescription}
                 onChange={(e) => setSongDescription(e.target.value)}
-                placeholder="A happy pop song about summer adventures with friends..."
+                placeholder={t('create.simple.describePlaceholder')}
                 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 +914,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('create.common.vocalLanguage')}
               </div>
               <div className="flex flex-wrap items-center gap-2 p-3">
                 <select
@@ -940,14 +932,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('create.common.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('create.common.female')}
                   </button>
                 </div>
               </div>
@@ -963,9 +955,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               {/* 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>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.advanced.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`}
+                    {duration === -1 ? t('create.common.auto') : `${duration}s`}
                   </span>
                 </div>
                 <input
@@ -982,9 +974,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               {/* 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>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.common.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}
+                    {bpm === 0 ? t('create.common.auto') : bpm}
                   </span>
                 </div>
                 <input
@@ -1001,26 +993,26 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               {/* 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('create.common.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"
                   >
-                    <option value="">Auto</option>
+                    <option value="">{t('create.common.auto')}</option>
                     {KEY_SIGNATURES.filter(k => k).map(key => (
                       <option key={key} value={key}>{key}</option>
                     ))}
                   </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('create.common.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"
                   >
-                    <option value="">Auto</option>
+                    <option value="">{t('create.common.auto')}</option>
                     {TIME_SIGNATURES.filter(t => t).map(time => (
                       <option key={time} value={time}>{time}</option>
                     ))}
@@ -1031,7 +1023,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               {/* 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>
+                  <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.common.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>
                 <input
@@ -1043,7 +1035,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   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">Number of song variations to generate</p>
+                <p className="text-[10px] text-zinc-500">{t('create.simple.variationsDesc')}</p>
               </div>
             </div>
           </div>
@@ -1061,7 +1053,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('create.custom.audio.title')}</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 +1064,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('create.custom.audio.reference')}
                     </button>
                     <button
                       type="button"
@@ -1083,7 +1075,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('create.custom.audio.cover')}
                     </button>
                   </div>
                 </div>
@@ -1207,7 +1199,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     <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('create.custom.audio.library')}
                   </button>
                   <button
                     type="button"
@@ -1223,7 +1215,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     <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('create.custom.audio.upload')}
                   </button>
                 </div>
               </div>
@@ -1237,8 +1229,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('create.custom.lyrics.title')}</span>
+                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">{t('create.custom.lyrics.subtitle')}</p>
                 </div>
                 <div className="flex items-center gap-2">
                   <button
@@ -1249,7 +1241,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('create.custom.lyrics.instrumental') : t('create.custom.lyrics.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 +1263,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 ? "Instrumental mode - no lyrics needed" : t('create.custom.lyrics.placeholder')}
                 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 +1280,8 @@ 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('create.custom.style.title')}</span>
+                  <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">{t('create.custom.style.subtitle')}</p>
                 </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,7 +1295,7 @@ 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('create.custom.style.placeholder')}
                 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">
@@ -1322,13 +1314,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* 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('create.custom.titleInput.title')}
               </div>
               <input
                 type="text"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
-                placeholder="Name your song"
+                placeholder={t('create.custom.titleInput.placeholder')}
                 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 +1334,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('create.custom.lyrics.instrumental')}</span>
               </div>
               <button
                 onClick={() => setInstrumental(!instrumental)}
@@ -1358,7 +1350,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-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide px-1">
-                  Vocal Language
+                  {t('create.common.vocalLanguage')}
                 </label>
                 <select
                   value={vocalLanguage}
@@ -1372,7 +1364,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               </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('create.common.vocalGender')}
                 </label>
                 <div className="flex items-center gap-2">
                   <button
@@ -1380,14 +1372,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('create.common.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('create.common.female')}
                   </button>
                 </div>
               </div>
@@ -1399,15 +1391,15 @@ 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} />
-            Music Parameters
+            {t('create.common.musicParams')}
           </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>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.common.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}
+                {bpm === 0 ? t('create.common.auto') : bpm}
               </span>
             </div>
             <input
@@ -1420,7 +1412,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               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>{t('create.common.auto')}</span>
               <span>300</span>
             </div>
           </div>
@@ -1428,26 +1420,26 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           {/* 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('create.common.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"
               >
-                <option value="">Auto</option>
+                <option value="">{t('create.common.auto')}</option>
                 {KEY_SIGNATURES.filter(k => k).map(key => (
                   <option key={key} value={key}>{key}</option>
                 ))}
               </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('create.common.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"
               >
-                <option value="">Auto</option>
+                <option value="">{t('create.common.auto')}</option>
                 {TIME_SIGNATURES.filter(t => t).map(time => (
                   <option key={time} value={time}>{time}</option>
                 ))}
@@ -1463,7 +1455,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('create.advanced.title')}</span>
           </div>
           <ChevronDown size={16} className={`text-zinc-500 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
         </button>
@@ -1474,9 +1466,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* 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>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.advanced.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`}
+                  {duration === -1 ? t('create.common.auto') : `${duration}s`}
                 </span>
               </div>
               <input
@@ -1489,7 +1481,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 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>{t('create.common.auto')}</span>
                 <span>{Math.round(activeMaxDuration / 60)} min</span>
               </div>
             </div>
@@ -1497,7 +1489,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* 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>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.advanced.variationsDesc')}>{t('create.advanced.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>
               <input
@@ -1509,15 +1501,15 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 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>
+              <p className="text-[10px] text-zinc-500">{t('create.advanced.variationsDesc')}</p>
             </div>
 
             {/* 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('create.advanced.bulk')}</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} {bulkCount === 1 ? t('create.advanced.job') : t('create.advanced.jobs')}
                 </span>
               </div>
               <div className="flex items-center gap-1">
@@ -1535,13 +1527,13 @@ 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('create.advanced.bulkDesc')}</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>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.advanced.qualityDesc')}>{t('create.advanced.quality')}</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
@@ -1553,13 +1545,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 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>
+              <p className="text-[10px] text-zinc-500">{t('create.advanced.qualityDesc')}</p>
             </div>
 
             {/* 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>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.advanced.promptStrengthDesc')}>{t('create.advanced.promptStrength')}</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
@@ -1571,52 +1563,52 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 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>
+              <p className="text-[10px] text-zinc-500">{t('create.advanced.promptStrengthDesc')}</p>
             </div>
 
             {/* 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('create.advanced.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"
                 >
-                  <option value="mp3">MP3 (smaller)</option>
-                  <option value="flac">FLAC (lossless)</option>
+                  <option value="mp3">{t('create.advanced.mp3')}</option>
+                  <option value="flac">{t('create.advanced.flac')}</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('create.advanced.sampler')}</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"
                 >
-                  <option value="ode">Deterministic (ODE)</option>
-                  <option value="sde">Stochastic (SDE)</option>
+                  <option value="ode">{t('create.advanced.deterministic')}</option>
+                  <option value="sde">{t('create.advanced.stochastic')}</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('create.advanced.lmBackend')}</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('create.advanced.ptDesc')}</option>
+                <option value="vllm">{t('create.advanced.lmBackend')} (VLLM ~9.2 GB VRAM)</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('create.advanced.ptDesc')}</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('create.advanced.lmModel')}</label>
               <select
                 value={lmModel}
                 onChange={(e) => { const v = e.target.value; setLmModel(v); localStorage.setItem('ace-lmModel', v); }}
@@ -1626,7 +1618,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <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>
               </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('create.advanced.lmModelDesc')}</p>
             </div>
 
             {/* Seed */}
@@ -1634,7 +1626,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={t('create.advanced.fixedSeed')}>{t('create.advanced.seed')}</span>
                 </div>
                 <button
                   onClick={() => setRandomSeed(!randomSeed)}
@@ -1649,17 +1641,17 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   type="number"
                   value={seed}
                   onChange={(e) => setSeed(Number(e.target.value))}
-                  placeholder="Enter fixed seed"
+                  placeholder={t('create.advanced.seedPlaceholder')}
                   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('create.advanced.randomSeed') : t('create.advanced.fixedSeed')}</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 text-zinc-600 dark:text-zinc-400" title={t('create.advanced.reasoningDesc')}>{t('create.advanced.reasoning')}</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'}`}
@@ -1671,7 +1663,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             {/* 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>
+                <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.advanced.shiftDesc')}>{t('create.advanced.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
@@ -1683,12 +1675,12 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 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>
+              <p className="text-[10px] text-zinc-500">{t('create.advanced.shiftDesc')}</p>
             </div>
 
             {/* 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('create.expert.title')}</p>
             </div>
 
             {uploadError && (
@@ -1703,8 +1695,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={t('create.expert.lyricModelDesc')}>{t('create.expert.lyricModel')}</span>
+                  <span className="text-[11px] text-zinc-400 dark:text-zinc-500 font-normal">{t('create.expert.lyricModelDesc')}</span>
                 </div>
               </div>
               <ChevronDown size={16} className={`text-zinc-500 transition-transform ${showLmParams ? 'rotate-180' : ''}`} />
@@ -1715,7 +1707,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 {/* 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>
+                    <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.expert.temperatureDesc')}>{t('create.expert.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
@@ -1727,13 +1719,13 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     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>
+                  <p className="text-[10px] text-zinc-500">{t('create.expert.temperatureDesc')}</p>
                 </div>
 
                 {/* 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>
+                    <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.expert.cfgDesc')}>{t('create.expert.cfg')}</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
@@ -1745,14 +1737,14 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     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>
+                  <p className="text-[10px] text-zinc-500">{t('create.expert.cfgDesc')}</p>
                 </div>
 
                 {/* 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>
+                      <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.expert.topKDesc')}>{t('create.expert.topK')}</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
@@ -1764,11 +1756,11 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       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>
+                    <p className="text-[10px] text-zinc-500">{t('create.expert.topKDesc')}</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>
+                      <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title={t('create.expert.topPDesc')}>{t('create.expert.topP')}</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
@@ -1780,41 +1772,41 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       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>
+                    <p className="text-[10px] text-zinc-500">{t('create.expert.topPDesc')}</p>
                   </div>
                 </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={t('create.expert.negativePromptDesc')}>{t('create.expert.negativePrompt')}</label>
                   <textarea
                     value={lmNegativePrompt}
                     onChange={(e) => setLmNegativePrompt(e.target.value)}
-                    placeholder="Things to avoid..."
+                    placeholder={t('create.expert.negativePromptPlaceholder')}
                     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('create.expert.negativePromptDesc')}</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={t('create.expert.sourceAudioDesc')}>{t('create.expert.sourceAudio')}</h4>
+              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">{t('create.expert.sourceAudioDesc')}</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={t('create.expert.audioCodes')}>{t('create.expert.audioCodes')}</label>
               <textarea
                 value={audioCodes}
                 onChange={(e) => setAudioCodes(e.target.value)}
-                placeholder="Optional audio codes payload"
+                placeholder={t('create.expert.audioCodesPlaceholder')}
                 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('create.expert.genMode')}</label>
                 <select
                   value={taskType}
                   onChange={(e) => setTaskType(e.target.value)}
@@ -1827,7 +1819,7 @@ 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" 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={t('create.expert.coverInfluenceDesc')}>{t('create.expert.coverInfluence')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1842,7 +1834,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={t('create.expert.repaintStartDesc')}>{t('create.expert.repaintStart')}</label>
                 <input
                   type="number"
                   step="0.1"
@@ -1852,7 +1844,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={t('create.expert.repaintEndDesc')}>{t('create.expert.repaintEnd')}</label>
                 <input
                   type="number"
                   step="0.1"
@@ -1864,7 +1856,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={t('create.expert.extraDesc')}>{t('create.expert.extra')}</label>
               <textarea
                 value={instruction}
                 onChange={(e) => setInstruction(e.target.value)}
@@ -1873,12 +1865,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" title={t('create.expert.guidanceScheduleDesc')}>{t('create.expert.guidanceSchedule')}</h4>
+              <p className="text-[11px] text-zinc-400 dark:text-zinc-500">{t('create.expert.guidanceScheduleDesc')}</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={t('create.expert.guidanceStartDesc')}>{t('create.expert.guidanceStart')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1890,7 +1882,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={t('create.expert.guidanceEndDesc')}>{t('create.expert.guidanceEnd')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1904,7 +1896,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="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('create.expert.customTimesteps')}</label>
               <input
                 type="text"
                 value={customTimesteps}
@@ -1916,7 +1908,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="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('create.expert.scoreWeight')}</label>
                 <input
                   type="number"
                   step="0.05"
@@ -1926,7 +1918,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('create.expert.chunkSize')}</label>
                 <input
                   type="number"
                   min="1"
@@ -1938,7 +1930,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">Track Name</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.expert.trackName')}</label>
               <input
                 type="text"
                 value={trackName}
@@ -1949,7 +1941,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">Complete Track Classes</label>
+              <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('create.expert.trackClasses')}</label>
               <input
                 type="text"
                 value={completeTrackClasses}
@@ -1965,43 +1957,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('create.expert.adg')}
               </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('create.expert.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('create.expert.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('create.expert.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('create.expert.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('create.expert.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('create.expert.debug')}
               </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('create.expert.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('create.expert.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('create.expert.getLrc')}
               </label>
             </div>
           </div>
@@ -2020,12 +2012,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('create.modal.refTitle') : t('create.modal.coverTitle')}
                   </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('create.modal.refDesc')
+                      : t('create.modal.coverDesc')}
                   </p>
                 </div>
                 <button
@@ -2057,17 +2049,17 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 {isUploadingReference ? (
                   <>
                     <RefreshCw size={16} className="animate-spin" />
-                    Uploading...
+                    {t('create.modal.uploading')}
                   </>
                 ) : isTranscribingReference ? (
                   <>
                     <RefreshCw size={16} className="animate-spin" />
-                    Transcribing...
+                    {t('create.modal.transcribing')}
                   </>
                 ) : (
                   <>
                     <Upload size={16} />
-                    Upload audio
+                    {t('create.modal.uploadBtn')}
                     <span className="text-xs text-zinc-400 ml-1">MP3, WAV, FLAC, M4A, MP4</span>
                   </>
                 )}
@@ -2078,13 +2070,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('create.modal.transcribingWhisper')}</span>
                   <button
                     type="button"
                     onClick={cancelTranscription}
                     className="text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white"
                   >
-                    Cancel
+                    {t('create.modal.cancel')}
                   </button>
                 </div>
               )}
@@ -2103,7 +2095,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('create.modal.uploaded')}
                   </button>
                   <button
                     type="button"
@@ -2114,7 +2106,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('create.modal.created')}
                   </button>
                 </div>
               </div>
@@ -2125,13 +2117,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('create.modal.loading')}</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('create.modal.noUploads')}</p>
+                      <p className="text-xs text-zinc-400 mt-1">{t('create.modal.noUploadsDesc')}</p>
                     </div>
                   ) : (
                     <div className="divide-y divide-zinc-100 dark:divide-white/5">
@@ -2210,7 +2202,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('create.modal.use')}
                             </button>
                             <button
                               type="button"
@@ -2227,8 +2219,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('create.modal.noCreated')}</p>
+                    <p className="text-xs text-zinc-400 mt-1">{t('create.modal.noCreatedDesc')}</p>
                   </div>
                 ) : (
                   <div className="divide-y divide-zinc-100 dark:divide-white/5">
@@ -2292,7 +2284,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('create.modal.use')}
                           </button>
                         </div>
                       </div>
@@ -2346,11 +2338,11 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           <Sparkles size={18} />
           <span>
             {bulkCount > 1
-              ? `Create ${bulkCount} Jobs (${bulkCount * batchSize} tracks)`
-              : `Create${batchSize > 1 ? ` (${batchSize} variations)` : ''}`}
+              ? t('create.button.createJobs', { count: bulkCount, tracks: bulkCount * batchSize })
+              : t('create.button.createVariations', { count: batchSize }).replace('Create', t('create.button.create'))}
           </span>
         </button>
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/components/LibraryView.tsx b/components/LibraryView.tsx
index a1d27b3..ac6dce4 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 { useTranslation } from 'react-i18next';
 
 interface LibraryViewProps {
   allSongs: Song[];
@@ -47,6 +48,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
     onDeleteReferenceTrack,
 }) => {
     const { user } = useAuth();
+    const { t } = useTranslation();
     const [activeTab, setActiveTab] = useState<'all' | 'playlists' | 'liked' | 'uploads'>('all');
     const [shareModalOpen, setShareModalOpen] = useState(false);
     const [shareSong, setShareSong] = useState<Song | null>(null);
@@ -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('library.title')}</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('library.newPlaylist')}</span>
                 </button>
              </div>
 
@@ -83,28 +85,28 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                     onClick={() => setActiveTab('all')}
                     className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'all' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                  >
-                    All Songs
+                    {t('library.tabs.all')}
                     {activeTab === 'all' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
                  <button 
                     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('library.tabs.liked')}
                     {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('library.tabs.playlists')}
                     {activeTab === 'playlists' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
                  <button 
                     onClick={() => setActiveTab('uploads')}
                     className={`pb-3 text-sm font-bold transition-colors relative ${activeTab === 'uploads' ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
                  >
-                    Uploads
+                    {t('library.tabs.uploads')}
                     {activeTab === 'uploads' && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-500 rounded-full"></div>}
                  </button>
              </div>
@@ -113,7 +115,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
              {activeTab === 'all' && (
                  <div className="space-y-1">
                     {allSongs.length === 0 ? (
-                        <div className="text-sm text-zinc-500 dark:text-zinc-400">No songs yet.</div>
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">{t('library.empty.songs')}</div>
                     ) : (
                         allSongs.map((song, idx) => (
                             <div key={song.id} className="group flex items-center gap-4 p-2 rounded hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors" onClick={() => onPlaySong(song, allSongs)}>
@@ -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('common.playlist')}</h2>
+                             <h1 className="text-5xl font-extrabold text-zinc-900 dark:text-white mb-4">{t('library.likedSongs')}</h1>
                              <div className="text-sm text-zinc-500 dark:text-zinc-300 font-medium">
-                                 {likedSongs.length} songs
+                                 {t('common.songCount', { count: likedSongs.length })}
                              </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('common.byYou')}</p>
                          </div>
                      ))}
                  </div>
@@ -249,7 +251,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
              {activeTab === 'uploads' && (
                  <div className="space-y-2">
                     {referenceTracks.length === 0 ? (
-                        <div className="text-sm text-zinc-500 dark:text-zinc-400">No uploads yet.</div>
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">{t('library.empty.uploads')}</div>
                     ) : (
                         referenceTracks.map((track) => (
                             <div key={track.id} className="flex items-center gap-4 p-3 rounded-lg border border-zinc-200 dark:border-white/5 bg-white dark:bg-zinc-900/40">
@@ -265,7 +267,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
                                 <button
                                     className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-500 hover:text-red-600 transition-colors"
                                     onClick={() => onDeleteReferenceTrack?.(track.id)}
-                                    title="Delete upload"
+                                    title={t('actions.deleteUpload')}
                                 >
                                     <Trash2 size={16} />
                                 </button>
@@ -284,4 +286,4 @@ export const LibraryView: React.FC<LibraryViewProps> = ({
         )}
         </>
     );
-};
+};
\ No newline at end of file
diff --git a/components/Player.tsx b/components/Player.tsx
index d80fb5d..bb2bfb1 100644
--- a/components/Player.tsx
+++ b/components/Player.tsx
@@ -6,6 +6,7 @@ import { useResponsive } from '../context/ResponsiveContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
+import { useTranslation } from 'react-i18next';
 
 interface PlayerProps {
     currentSong: Song | null;
@@ -56,6 +57,7 @@ export const Player: React.FC<PlayerProps> = ({
 }) => {
     const { user } = useAuth();
     const { isMobile } = useResponsive();
+    const { t } = useTranslation();
     const progressBarRef = useRef<HTMLDivElement>(null);
     const fullscreenProgressRef = useRef<HTMLDivElement>(null);
     const [isHoveringVolume, setIsHoveringVolume] = useState(false);
@@ -83,7 +85,7 @@ export const Player: React.FC<PlayerProps> = ({
                     <div className="w-10 h-10 lg:w-12 lg:h-12 rounded bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center">
                         <Play size={20} className="text-zinc-400 dark:text-zinc-600" />
                     </div>
-                    <span className="text-sm font-medium">Select a song to play</span>
+                    <span className="text-sm font-medium">{t('player.selectSong')}</span>
                 </div>
             </div>
         );
@@ -137,7 +139,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('player.nowPlaying')}</span>
                         <div className="w-11" />
                     </div>
 
@@ -170,7 +172,7 @@ export const Player: React.FC<PlayerProps> = ({
                                     {currentSong.title}
                                 </h2>
                                 <p className="text-sm text-zinc-500 dark:text-white/60 truncate mt-1">
-                                    {currentSong.creator || 'Unknown Artist'}
+                                    {currentSong.creator || t('common.unknownArtist')}
                                 </p>
                             </div>
                             <button
@@ -271,7 +273,7 @@ export const Player: React.FC<PlayerProps> = ({
                         <button
                             onClick={handleDownload}
                             className="p-3 tap-highlight-none"
-                            title="Download Audio"
+                            title={t('actions.downloadAudio')}
                         >
                             <Download size={20} />
                         </button>
@@ -304,432 +306,361 @@ export const Player: React.FC<PlayerProps> = ({
             );
         }
 
-        return (
-            <div className="bg-white dark:bg-black/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 flex flex-col z-50 transition-colors duration-300 safe-area-inset-bottom">
-                {/* Progress Bar - taller for touch */}
+        // Desktop fullscreen mode
+        if (isFullscreen) {
+            return (
                 <div
-                    ref={progressBarRef}
-                    className="w-full h-1 bg-zinc-200 dark:bg-zinc-800 cursor-pointer relative"
-                    onClick={(e) => handleSeekInteraction(e, progressBarRef)}
+                    className="fixed inset-0 z-50 bg-gradient-to-b from-zinc-100 to-zinc-50 dark:from-zinc-900 dark:to-black flex flex-col transition-colors duration-300"
+                    onClick={() => setIsFullscreen(false)}
                 >
-                    <div
-                        className="h-full bg-pink-600 dark:bg-pink-500"
-                        style={{ width: `${progressPercent}%` }}
-                    />
-                </div>
-
-                {/* Main content: Song info left, controls right */}
-                <div className="flex items-center px-3 py-2 gap-3">
-                    {/* Song Info - takes available space, tap to expand */}
-                    <div
-                        className="flex items-center gap-3 flex-1 min-w-0"
-                        onClick={() => setIsFullscreen(true)}
-                    >
-                        <div className="w-11 h-11 rounded bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm flex-shrink-0 relative">
-                            {currentSong.coverUrl ? (
-                                <img src={currentSong.coverUrl} className="w-full h-full object-cover" alt="cover" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
-                            ) : null}
-                            {!currentSong.coverUrl && <AlbumCover seed={currentSong.id || currentSong.title} size="full" className="w-full h-full" />}
-                            <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 active:opacity-100 transition-opacity">
-                                <ChevronUp size={20} className="text-white" />
-                            </div>
-                        </div>
-                        <div className="overflow-hidden flex-1 min-w-0">
-                            <h4 className="text-sm font-semibold text-zinc-900 dark:text-white truncate">
-                                {currentSong.title}
-                            </h4>
-                            <p className="text-xs text-zinc-500 dark:text-zinc-400 truncate">
-                                {currentSong.creator || 'Unknown Artist'}
-                            </p>
-                        </div>
-                    </div>
-
-                    {/* Mobile Controls - compact */}
-                    <div className="flex items-center gap-1 flex-shrink-0">
-                        <button
-                            onClick={onToggleLike}
-                            className={`p-2 tap-highlight-none ${isLiked ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400'}`}
-                        >
-                            <Heart size={20} fill={isLiked ? "currentColor" : "none"} />
-                        </button>
-                        <button
-                            onClick={onPrevious}
-                            className="p-2 text-zinc-700 dark:text-zinc-300 tap-highlight-none"
-                        >
-                            <SkipBack size={22} fill="currentColor" />
-                        </button>
-                        <button
-                            onClick={onTogglePlay}
-                            className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center shadow-lg tap-highlight-none"
-                        >
-                            {isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" className="ml-0.5" />}
-                        </button>
+                    {/* Header with close button */}
+                    <div className="flex items-center justify-between px-6 py-4" onClick={(e) => e.stopPropagation()}>
                         <button
-                            onClick={onNext}
-                            className="p-2 text-zinc-700 dark:text-zinc-300 tap-highlight-none"
+                            onClick={() => setIsFullscreen(false)}
+                            className="p-2 text-zinc-600 dark:text-white/70 hover:bg-zinc-200 dark:hover:bg-white/10 rounded-full transition-colors"
                         >
-                            <SkipForward size={22} fill="currentColor" />
+                            <ChevronDown size={28} />
                         </button>
+                        <span className="text-sm text-zinc-500 dark:text-white/50 uppercase tracking-wider font-medium">{t('player.nowPlaying')}</span>
+                        <div className="w-11" />
                     </div>
-                </div>
-            </div>
-        );
-    }
 
-    // Desktop fullscreen mode
-    if (isFullscreen) {
-        return (
-            <div
-                className="fixed inset-0 z-50 bg-gradient-to-b from-zinc-100 to-zinc-50 dark:from-zinc-900 dark:to-black flex flex-col transition-colors duration-300"
-                onClick={() => setIsFullscreen(false)}
-            >
-                {/* Header with close button */}
-                <div className="flex items-center justify-between px-6 py-4" onClick={(e) => e.stopPropagation()}>
-                    <button
-                        onClick={() => setIsFullscreen(false)}
-                        className="p-2 text-zinc-600 dark:text-white/70 hover:bg-zinc-200 dark:hover:bg-white/10 rounded-full transition-colors"
-                    >
-                        <ChevronDown size={28} />
-                    </button>
-                    <span className="text-sm text-zinc-500 dark:text-white/50 uppercase tracking-wider font-medium">Now Playing</span>
-                    <div className="w-11" />
-                </div>
-
-                {/* Main content area */}
-                <div className="flex-1 flex items-center justify-center px-8 py-4 overflow-hidden" onClick={(e) => e.stopPropagation()}>
-                    <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16 max-w-5xl w-full">
-                        {/* Album Art */}
-                        <div className="w-full max-w-[320px] lg:max-w-[400px] aspect-square rounded-lg overflow-hidden shadow-2xl flex-shrink-0">
-                            {currentSong.coverUrl ? (
-                                <img
-                                    src={currentSong.coverUrl}
-                                    className="w-full h-full object-cover"
-                                    alt="cover"
-                                    onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.nextElementSibling?.classList.remove('hidden'); }}
-                                />
-                            ) : null}
-                            <AlbumCover seed={currentSong.id || currentSong.title} size="full" className={`w-full h-full ${currentSong.coverUrl ? 'hidden' : ''}`} />
-                        </div>
-
-                        {/* Right side: Song info and controls */}
-                        <div className="flex flex-col items-center lg:items-start gap-6 flex-1 min-w-0 max-w-lg">
-                            {/* Song Info */}
-                            <div className="text-center lg:text-left w-full">
-                                <h2
-                                    onClick={() => {
-                                        setIsFullscreen(false);
-                                        onNavigateToSong?.(currentSong.id);
-                                    }}
-                                    className="text-2xl lg:text-3xl font-bold text-zinc-900 dark:text-white truncate cursor-pointer hover:underline"
-                                >
-                                    {currentSong.title}
-                                </h2>
-                                <p className="text-base lg:text-lg text-zinc-500 dark:text-white/60 truncate mt-2">
-                                    {currentSong.creator || 'Unknown Artist'}
-                                </p>
+                    {/* Main content area */}
+                    <div className="flex-1 flex items-center justify-center px-8 py-4 overflow-hidden" onClick={(e) => e.stopPropagation()}>
+                        <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16 max-w-5xl w-full">
+                            {/* Album Art */}
+                            <div className="w-full max-w-[320px] lg:max-w-[400px] aspect-square rounded-lg overflow-hidden shadow-2xl flex-shrink-0">
+                                {currentSong.coverUrl ? (
+                                    <img
+                                        src={currentSong.coverUrl}
+                                        className="w-full h-full object-cover"
+                                        alt="cover"
+                                        onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.nextElementSibling?.classList.remove('hidden'); }}
+                                    />
+                                ) : null}
+                                <AlbumCover seed={currentSong.id || currentSong.title} size="full" className={`w-full h-full ${currentSong.coverUrl ? 'hidden' : ''}`} />
                             </div>
 
-                            {/* Progress Bar */}
-                            <div className="w-full">
-                                <div
-                                    ref={fullscreenProgressRef}
-                                    className="w-full h-2 bg-zinc-300 dark:bg-white/20 rounded-full cursor-pointer relative group"
-                                    onClick={(e) => handleSeekInteraction(e, fullscreenProgressRef)}
-                                >
+                            {/* Right side: Song info and controls */}
+                            <div className="flex flex-col items-center lg:items-start gap-6 flex-1 min-w-0 max-w-lg">
+                                {/* Song Info */}
+                                <div className="text-center lg:text-left w-full">
+                                    <h2
+                                        onClick={() => {
+                                            setIsFullscreen(false);
+                                            onNavigateToSong?.(currentSong.id);
+                                        }}
+                                        className="text-2xl lg:text-3xl font-bold text-zinc-900 dark:text-white truncate cursor-pointer hover:underline"
+                                    >
+                                        {currentSong.title}
+                                    </h2>
+                                    <p className="text-base lg:text-lg text-zinc-500 dark:text-white/60 truncate mt-2">
+                                        {currentSong.creator || t('common.unknownArtist')}
+                                    </p>
+                                </div>
+
+                                {/* Progress Bar */}
+                                <div className="w-full">
                                     <div
-                                        className="h-full bg-zinc-900 dark:bg-white rounded-full relative group-hover:bg-pink-600 dark:group-hover:bg-pink-500 transition-colors"
-                                        style={{ width: `${progressPercent}%` }}
+                                        ref={fullscreenProgressRef}
+                                        className="w-full h-2 bg-zinc-300 dark:bg-white/20 rounded-full cursor-pointer relative group"
+                                        onClick={(e) => handleSeekInteraction(e, fullscreenProgressRef)}
                                     >
-                                        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-4 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
+                                            className="h-full bg-zinc-900 dark:bg-white rounded-full 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-4 h-4 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>
+                                    </div>
+                                    <div className="flex justify-between mt-2 text-sm text-zinc-500 dark:text-white/50 font-mono">
+                                        <span>{formatTime(currentTime)}</span>
+                                        <span>{formatTime(duration || 0)}</span>
                                     </div>
                                 </div>
-                                <div className="flex justify-between mt-2 text-sm text-zinc-500 dark:text-white/50 font-mono">
-                                    <span>{formatTime(currentTime)}</span>
-                                    <span>{formatTime(duration || 0)}</span>
-                                </div>
-                            </div>
 
-                            {/* Main Controls */}
-                            <div className="flex items-center justify-center gap-8 py-2 w-full">
-                                <button
-                                    onClick={onToggleShuffle}
-                                    className={`p-2 transition-colors ${isShuffle ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
-                                >
-                                    <Shuffle size={22} />
-                                </button>
-                                <button
-                                    onClick={onPrevious}
-                                    className="p-2 text-zinc-800 dark:text-white hover:scale-110 transition-transform"
-                                >
-                                    <SkipBack size={36} fill="currentColor" />
-                                </button>
-                                <button
-                                    onClick={onTogglePlay}
-                                    className="w-18 h-18 p-5 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center shadow-lg hover:scale-105 transition-transform"
-                                >
-                                    {isPlaying ? <Pause size={36} fill="currentColor" /> : <Play size={36} fill="currentColor" className="ml-1" />}
-                                </button>
-                                <button
-                                    onClick={onNext}
-                                    className="p-2 text-zinc-800 dark:text-white hover:scale-110 transition-transform"
-                                >
-                                    <SkipForward size={36} fill="currentColor" />
-                                </button>
-                                <button
-                                    onClick={onToggleRepeat}
-                                    className={`p-2 transition-colors relative ${repeatMode !== 'none' ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
-                                >
-                                    {repeatMode === 'one' ? <Repeat1 size={22} /> : <Repeat size={22} />}
-                                    {repeatMode !== 'none' && <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-current rounded-full"></div>}
-                                </button>
-                            </div>
+                                {/* Main Controls */}
+                                <div className="flex items-center justify-center gap-8 py-2 w-full">
+                                    <button
+                                        onClick={onToggleShuffle}
+                                        className={`p-2 transition-colors ${isShuffle ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
+                                    >
+                                        <Shuffle size={22} />
+                                    </button>
+                                    <button
+                                        onClick={onPrevious}
+                                        className="p-2 text-zinc-800 dark:text-white hover:scale-110 transition-transform"
+                                    >
+                                        <SkipBack size={36} fill="currentColor" />
+                                    </button>
+                                    <button
+                                        onClick={onTogglePlay}
+                                        className="w-18 h-18 p-5 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center shadow-lg hover:scale-105 transition-transform"
+                                    >
+                                        {isPlaying ? <Pause size={36} fill="currentColor" /> : <Play size={36} fill="currentColor" className="ml-1" />}
+                                    </button>
+                                    <button
+                                        onClick={onNext}
+                                        className="p-2 text-zinc-800 dark:text-white hover:scale-110 transition-transform"
+                                    >
+                                        <SkipForward size={36} fill="currentColor" />
+                                    </button>
+                                    <button
+                                        onClick={onToggleRepeat}
+                                        className={`p-2 transition-colors relative ${repeatMode !== 'none' ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
+                                    >
+                                        {repeatMode === 'one' ? <Repeat1 size={22} /> : <Repeat size={22} />}
+                                        {repeatMode !== 'none' && <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-current rounded-full"></div>}
+                                    </button>
+                                </div>
 
-                            {/* Volume Control */}
-                            <div className="flex items-center gap-4 w-full max-w-xs">
-                                <button
-                                    onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
-                                    className="text-zinc-500 dark:text-white/50 hover:text-zinc-900 dark:hover:text-white transition-colors"
-                                >
-                                    {volume === 0 ? <VolumeX size={22} /> : <Volume2 size={22} />}
-                                </button>
-                                <div className="flex-1 h-1.5 bg-zinc-300 dark:bg-white/20 rounded-full relative">
-                                    <input
-                                        type="range"
-                                        min="0"
-                                        max="1"
-                                        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}%` }}
-                                    />
+                                {/* Volume Control */}
+                                <div className="flex items-center gap-4 w-full max-w-xs">
+                                    <button
+                                        onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
+                                        className="text-zinc-500 dark:text-white/50 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                                    >
+                                        {volume === 0 ? <VolumeX size={22} /> : <Volume2 size={22} />}
+                                    </button>
+                                    <div className="flex-1 h-1.5 bg-zinc-300 dark:bg-white/20 rounded-full relative">
+                                        <input
+                                            type="range"
+                                            min="0"
+                                            max="1"
+                                            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}%` }}
+                                        />
+                                    </div>
                                 </div>
-                            </div>
 
-                            {/* Extra Actions */}
-                            <div className="flex items-center justify-center gap-4 text-zinc-400 dark:text-white/50">
-                                <button
-                                    onClick={onToggleLike}
-                                    className={`p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors ${isLiked ? 'text-pink-600 dark:text-pink-500' : ''}`}
-                                >
-                                    <Heart size={22} fill={isLiked ? "currentColor" : "none"} />
-                                </button>
-                                {onOpenVideo && (
+                                {/* Extra Actions */}
+                                <div className="flex items-center justify-center gap-4 text-zinc-400 dark:text-white/50">
                                     <button
-                                        onClick={onOpenVideo}
-                                        className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                                        onClick={onToggleLike}
+                                        className={`p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors ${isLiked ? 'text-pink-600 dark:text-pink-500' : ''}`}
                                     >
-                                        <Maximize2 size={20} />
+                                        <Heart size={22} fill={isLiked ? "currentColor" : "none"} />
                                     </button>
-                                )}
-                                <button
-                                    onClick={handleDownload}
-                                    className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
-                                    title="Download Audio"
-                                >
-                                    <Download size={20} />
-                                </button>
-                                <div className="relative">
+                                    {onOpenVideo && (
+                                        <button
+                                            onClick={onOpenVideo}
+                                            className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                                        >
+                                            <Maximize2 size={20} />
+                                        </button>
+                                    )}
                                     <button
-                                        onClick={() => setShowDropdown(!showDropdown)}
+                                        onClick={handleDownload}
                                         className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                                        title={t('actions.downloadAudio')}
                                     >
-                                        <MoreVertical size={20} />
+                                        <Download size={20} />
                                     </button>
-                                    {showDropdown && (
-                                        <SongDropdownMenu
-                                            song={currentSong}
-                                            isOpen={showDropdown}
-                                            onClose={() => setShowDropdown(false)}
-                                            isOwner={user?.id === currentSong.userId}
-                                            position="center"
-                                            direction="up"
-                                            onCreateVideo={onOpenVideo}
-                                            onReusePrompt={onReusePrompt}
-                                            onAddToPlaylist={onAddToPlaylist}
-                                            onDelete={onDelete}
-                                            onShare={() => setShareModalOpen(true)}
-                                        />
-                                    )}
+                                    <div className="relative">
+                                        <button
+                                            onClick={() => setShowDropdown(!showDropdown)}
+                                            className="p-3 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                                        >
+                                            <MoreVertical size={20} />
+                                        </button>
+                                        {showDropdown && (
+                                            <SongDropdownMenu
+                                                song={currentSong}
+                                                isOpen={showDropdown}
+                                                onClose={() => setShowDropdown(false)}
+                                                isOwner={user?.id === currentSong.userId}
+                                                position="center"
+                                                direction="up"
+                                                onCreateVideo={onOpenVideo}
+                                                onReusePrompt={onReusePrompt}
+                                                onAddToPlaylist={onAddToPlaylist}
+                                                onDelete={onDelete}
+                                                onShare={() => setShareModalOpen(true)}
+                                            />
+                                        )}
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <ShareModal
-                    isOpen={shareModalOpen}
-                    onClose={() => setShareModalOpen(false)}
-                    song={currentSong}
-                />
-            </div>
-        );
-    }
+                    <ShareModal
+                        isOpen={shareModalOpen}
+                        onClose={() => setShareModalOpen(false)}
+                        song={currentSong}
+                    />
+                </div>
+            );
+        }
 
-    return (
-        <div className="h-20 lg:h-24 bg-white dark:bg-black/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 flex flex-col z-50 transition-colors duration-300 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] dark:shadow-none">
+        return (
+            <div className="h-20 lg:h-24 bg-white dark:bg-black/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 flex flex-col z-50 transition-colors duration-300 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] dark:shadow-none">
 
-            {/* Progress Bar */}
-            <div
-                ref={progressBarRef}
-                className="w-full h-1 lg:h-1.5 bg-zinc-200 dark:bg-zinc-800 cursor-pointer group relative"
-                onClick={(e) => handleSeekInteraction(e, progressBarRef)}
-            >
+                {/* Progress Bar */}
                 <div
-                    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}%` }}
+                    ref={progressBarRef}
+                    className="w-full h-1 lg:h-1.5 bg-zinc-200 dark:bg-zinc-800 cursor-pointer group relative"
+                    onClick={(e) => handleSeekInteraction(e, progressBarRef)}
                 >
-                    <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>
-                {/* Hit area for easier clicking */}
-                <div className="absolute top-1/2 -translate-y-1/2 w-full h-4 -z-10"></div>
-            </div>
-
-            <div className="flex-1 flex items-center justify-between px-2 sm:px-4 lg:px-6 gap-2 sm:gap-4">
-
-                {/* Song Info */}
-                <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1 max-w-[30%] lg:max-w-[33%]">
-                    <div className="w-10 h-10 lg:w-12 lg:h-12 rounded bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm flex-shrink-0">
-                        {currentSong.coverUrl ? (
-                            <img src={currentSong.coverUrl} className="w-full h-full object-cover" alt="cover" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
-                        ) : null}
-                        {!currentSong.coverUrl && <AlbumCover seed={currentSong.id || currentSong.title} size="full" className="w-full h-full" />}
-                    </div>
-                    <div className="overflow-hidden min-w-0">
-                        <h4
-                            onClick={() => onNavigateToSong?.(currentSong.id)}
-                            className="text-xs sm:text-sm font-bold text-zinc-900 dark:text-white truncate cursor-pointer hover:underline"
-                        >
-                            {currentSong.title}
-                        </h4>
-                        <p className="text-[10px] sm:text-xs text-zinc-500 dark:text-zinc-400 truncate hover:underline cursor-pointer">{currentSong.creator || 'Unknown Artist'}</p>
-                    </div>
-                    <button
-                        onClick={onToggleLike}
-                        className={`ml-1 sm:ml-2 transition-colors flex-shrink-0 hidden sm:block ${isLiked ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
+                    <div
+                        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}%` }}
                     >
-                        <Heart size={18} fill={isLiked ? "currentColor" : "none"} />
-                    </button>
+                        <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>
+                    {/* Hit area for easier clicking */}
+                    <div className="absolute top-1/2 -translate-y-1/2 w-full h-4 -z-10"></div>
                 </div>
 
-                {/* Controls */}
-                <div className="flex flex-col items-center justify-center flex-shrink-0">
-                    <div className="flex items-center gap-2 sm:gap-4 lg:gap-6">
-                        <button
-                            onClick={onToggleShuffle}
-                            className={`transition-colors hidden sm:block ${isShuffle ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
-                        >
-                            <Shuffle size={16} />
-                        </button>
-                        <button
-                            onClick={onPrevious}
-                            className="text-zinc-700 dark:text-zinc-300 hover:text-black dark:hover:text-white transition-colors"
-                        >
-                            <SkipBack size={18} className="sm:w-[22px] sm:h-[22px]" fill="currentColor" />
-                        </button>
-                        <button
-                            onClick={onTogglePlay}
-                            className="w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center hover:scale-105 transition-transform shadow-lg"
-                        >
-                            {isPlaying ? <Pause size={18} className="sm:w-5 sm:h-5" fill="currentColor" /> : <Play size={18} className="sm:w-5 sm:h-5 ml-0.5" fill="currentColor" />}
-                        </button>
-                        <button
-                            onClick={onNext}
-                            className="text-zinc-700 dark:text-zinc-300 hover:text-black dark:hover:text-white transition-colors"
-                        >
-                            <SkipForward size={18} className="sm:w-[22px] sm:h-[22px]" fill="currentColor" />
-                        </button>
+                <div className="flex-1 flex items-center justify-between px-2 sm:px-4 lg:px-6 gap-2 sm:gap-4">
+
+                    {/* Song Info */}
+                    <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1 max-w-[30%] lg:max-w-[33%]">
+                        <div className="w-10 h-10 lg:w-12 lg:h-12 rounded bg-zinc-200 dark:bg-zinc-800 overflow-hidden shadow-sm flex-shrink-0">
+                            {currentSong.coverUrl ? (
+                                <img src={currentSong.coverUrl} className="w-full h-full object-cover" alt="cover" onError={(e) => { e.currentTarget.style.display = 'none'; }} />
+                            ) : null}
+                            {!currentSong.coverUrl && <AlbumCover seed={currentSong.id || currentSong.title} size="full" className="w-full h-full" />}
+                        </div>
+                        <div className="overflow-hidden min-w-0">
+                            <h4
+                                onClick={() => onNavigateToSong?.(currentSong.id)}
+                                className="text-xs sm:text-sm font-bold text-zinc-900 dark:text-white truncate cursor-pointer hover:underline"
+                            >
+                                {currentSong.title}
+                            </h4>
+                            <p className="text-[10px] sm:text-xs text-zinc-500 dark:text-zinc-400 truncate hover:underline cursor-pointer">{currentSong.creator || t('common.unknownArtist')}</p>
+                        </div>
                         <button
-                            onClick={onToggleRepeat}
-                            className={`transition-colors hidden sm:block ${repeatMode !== 'none' ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'} relative`}
+                            onClick={onToggleLike}
+                            className={`ml-1 sm:ml-2 transition-colors flex-shrink-0 hidden sm:block ${isLiked ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
                         >
-                            {repeatMode === 'one' ? <Repeat1 size={16} /> : <Repeat size={16} />}
-                            {repeatMode !== 'none' && <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-1 h-1 bg-current rounded-full"></div>}
+                            <Heart size={18} fill={isLiked ? "currentColor" : "none"} />
                         </button>
                     </div>
-                </div>
 
-                {/* Volume & Extras */}
-                <div className="flex items-center justify-end gap-1 sm:gap-2 lg:gap-3 min-w-0 flex-1 max-w-[30%] lg:max-w-[33%] text-zinc-500 dark:text-zinc-400">
-                    <span className="text-[10px] sm:text-xs font-mono text-right text-zinc-600 dark:text-zinc-400 hidden md:block">
-                        {formatTime(currentTime)} / {formatTime(duration || 0)}
-                    </span>
+                    {/* Controls */}
+                    <div className="flex flex-col items-center justify-center flex-shrink-0">
+                        <div className="flex items-center gap-2 sm:gap-4 lg:gap-6">
+                            <button
+                                onClick={onToggleShuffle}
+                                className={`transition-colors hidden sm:block ${isShuffle ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'}`}
+                            >
+                                <Shuffle size={16} />
+                            </button>
+                            <button
+                                onClick={onPrevious}
+                                className="text-zinc-700 dark:text-zinc-300 hover:text-black dark:hover:text-white transition-colors"
+                            >
+                                <SkipBack size={18} className="sm:w-[22px] sm:h-[22px]" fill="currentColor" />
+                            </button>
+                            <button
+                                onClick={onTogglePlay}
+                                className="w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center hover:scale-105 transition-transform shadow-lg"
+                            >
+                                {isPlaying ? <Pause size={18} className="sm:w-5 sm:h-5" fill="currentColor" /> : <Play size={18} className="sm:w-5 sm:h-5 ml-0.5" fill="currentColor" />}
+                            </button>
+                            <button
+                                onClick={onNext}
+                                className="text-zinc-700 dark:text-zinc-300 hover:text-black dark:hover:text-white transition-colors"
+                            >
+                                <SkipForward size={18} className="sm:w-[22px] sm:h-[22px]" fill="currentColor" />
+                            </button>
+                            <button
+                                onClick={onToggleRepeat}
+                                className={`transition-colors hidden sm:block ${repeatMode !== 'none' ? 'text-pink-600 dark:text-pink-500' : 'text-zinc-400 hover:text-zinc-900 dark:hover:text-white'} relative`}
+                            >
+                                {repeatMode === 'one' ? <Repeat1 size={16} /> : <Repeat size={16} />}
+                                {repeatMode !== 'none' && <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-1 h-1 bg-current rounded-full"></div>}
+                            </button>
+                        </div>
+                    </div>
 
-                    <div
-                        className="items-center gap-2 relative group hidden md:flex"
-                        onMouseEnter={() => setIsHoveringVolume(true)}
-                        onMouseLeave={() => setIsHoveringVolume(false)}
-                    >
-                        <button
-                            onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
-                            className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors"
+                    {/* Volume & Extras */}
+                    <div className="flex items-center justify-end gap-1 sm:gap-2 lg:gap-3 min-w-0 flex-1 max-w-[30%] lg:max-w-[33%] text-zinc-500 dark:text-zinc-400">
+                        <span className="text-[10px] sm:text-xs font-mono text-right text-zinc-600 dark:text-zinc-400 hidden md:block">
+                            {formatTime(currentTime)} / {formatTime(duration || 0)}
+                        </span>
+
+                        <div
+                            className="items-center gap-2 relative group hidden md:flex"
+                            onMouseEnter={() => setIsHoveringVolume(true)}
+                            onMouseLeave={() => setIsHoveringVolume(false)}
                         >
-                            {volume === 0 ? <VolumeX size={18} /> : <Volume2 size={18} />}
-                        </button>
+                            <button
+                                onClick={() => onVolumeChange(volume === 0 ? 0.8 : 0)}
+                                className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors"
+                            >
+                                {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>
+                            {/* 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>
                         </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"
-                    >
-                        <Download size={18} />
-                    </button>
-                    <button
-                        onClick={() => setIsFullscreen(true)}
-                        className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors"
-                    >
-                        <Maximize2 size={16} />
-                    </button>
-                    <div className="relative hidden sm:block">
                         <button
-                            onClick={() => setShowDropdown(!showDropdown)}
+                            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={t('actions.downloadAudio')}
+                        >
+                            <Download size={18} />
+                        </button>
+                        <button
+                            onClick={() => setIsFullscreen(true)}
                             className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors"
                         >
-                            <MoreVertical size={18} />
+                            <Maximize2 size={16} />
                         </button>
-                        <SongDropdownMenu
-                            song={currentSong}
-                            isOpen={showDropdown}
-                            onClose={() => setShowDropdown(false)}
-                            isOwner={user?.id === currentSong.userId}
-                            position="right"
-                            direction="up"
-                            onCreateVideo={onOpenVideo}
-                            onReusePrompt={onReusePrompt}
-                            onAddToPlaylist={onAddToPlaylist}
-                            onDelete={onDelete}
-                            onShare={() => setShareModalOpen(true)}
-                        />
+                        <div className="relative hidden sm:block">
+                            <button
+                                onClick={() => setShowDropdown(!showDropdown)}
+                                className="p-1.5 lg:p-2 hover:bg-zinc-100 dark:hover:bg-white/10 rounded-full transition-colors"
+                            >
+                                <MoreVertical size={18} />
+                            </button>
+                            <SongDropdownMenu
+                                song={currentSong}
+                                isOpen={showDropdown}
+                                onClose={() => setShowDropdown(false)}
+                                isOwner={user?.id === currentSong.userId}
+                                position="right"
+                                direction="up"
+                                onCreateVideo={onOpenVideo}
+                                onReusePrompt={onReusePrompt}
+                                onAddToPlaylist={onAddToPlaylist}
+                                onDelete={onDelete}
+                                onShare={() => setShareModalOpen(true)}
+                            />
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <ShareModal
-                isOpen={shareModalOpen}
-                onClose={() => setShareModalOpen(false)}
-                song={currentSong}
-            />
-        </div>
-    );
-};
\ No newline at end of file
+                <ShareModal
+                    isOpen={shareModalOpen}
+                    onClose={() => setShareModalOpen(false)}
+                    song={currentSong}
+                />
+            </div>
+        );
+    };
+};
diff --git a/components/PlaylistDetail.tsx b/components/PlaylistDetail.tsx
index 176dbf1..a2fbdd0 100644
--- a/components/PlaylistDetail.tsx
+++ b/components/PlaylistDetail.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Song, Playlist, playlistsApi, songsApi, getAudioUrl } from '../services/api';
 import { useAuth } from '../context/AuthContext';
 import { ArrowLeft, Play, MoreHorizontal, Clock, Calendar, Shuffle, Trash2, Mic2, Music } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 interface PlaylistDetailProps {
     playlistId: string;
@@ -13,6 +14,7 @@ interface PlaylistDetailProps {
 
 export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBack, onPlaySong, onSelect, onNavigateToProfile }) => {
     const { user: currentUser, token } = useAuth();
+    const { t } = useTranslation();
     const [playlist, setPlaylist] = useState<Playlist & { creator_avatar?: string } | null>(null);
     const [songs, setSongs] = useState<Song[]>([]);
     const [loading, setLoading] = useState(true);
@@ -54,7 +56,6 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
         }
     };
 
-    // ... (retaining methods handleRemove, handleDelete) ...
     const handleRemoveSong = async (songId: string) => {
         if (!token || !playlist) return;
         try {
@@ -67,7 +68,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('playlist.deleteConfirm'))) return;
         try {
             await playlistsApi.delete(playlist.id, token);
             onBack();
@@ -80,16 +81,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('playlist.loading')}
             </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('playlist.notFound')}</div>
             <button onClick={onBack} className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-white">
-                Go Back
+                {t('common.goBack')}
             </button>
         </div>
     );
@@ -124,7 +125,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('common.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,7 +148,7 @@ 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>{t('playlist.songs', { count: songs.length })}</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
@@ -180,7 +181,7 @@ 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('playlist.public') : t('playlist.private')}
                 </div>
             </div>
 
@@ -190,9 +191,9 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                     {/* 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('playlist.table.title')}</span>
+                        <span>{t('playlist.table.artist')}</span>
+                        <span>{t('playlist.table.dateAdded')}</span>
                         <span className="text-right"><Clock size={16} className="inline" /></span>
                     </div>
 
@@ -226,7 +227,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('common.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 +237,12 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                                     e.stopPropagation();
                                     song.creator && onNavigateToProfile(song.creator);
                                 }}>
-                                    {song.creator || 'Unknown'}
+                                    {song.creator || t('common.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('playlist.table.justNow')}
                                 </span>
 
                                 {/* Duration + Actions */}
@@ -289,4 +290,4 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
             </button>
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/components/PlaylistModals.tsx b/components/PlaylistModals.tsx
index 1ad7871..4a29a0a 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 { useTranslation } from 'react-i18next';
 
 interface CreatePlaylistModalProps {
   isOpen: boolean;
@@ -11,6 +12,7 @@ interface CreatePlaylistModalProps {
 export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({ isOpen, onClose, onCreate }) => {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const { t } = useTranslation();
 
   if (!isOpen) return null;
 
@@ -28,30 +30,30 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({ isOpen
     <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="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('playlist.createTitle')}</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('playlist.name')}</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('playlist.namePlaceholder')}
               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('playlist.description')}</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('playlist.descPlaceholder')}
             />
           </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('common.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('playlist.createBtn')}
             </button>
           </div>
         </form>
@@ -85,13 +87,14 @@ interface AddToPlaylistModalProps {
 }
 
 export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen, onClose, playlists, onSelect, onCreateNew }) => {
+  const { t } = useTranslation();
   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="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('playlist.addTitle')}</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('playlist.createNew')}</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('playlist.noPlaylists')}
             </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">{t('playlist.songs', { count: playlist.song_count || playlist.songIds?.length || 0 })}</div>
                 </div>
               </button>
             ))
@@ -145,4 +148,4 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({ isOpen,
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index ed93314..deedbb9 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -6,6 +6,7 @@ import { useAuth } from '../context/AuthContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
+import { useTranslation } from 'react-i18next';
 
 interface RightSidebarProps {
     song: Song | null;
@@ -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 } = useTranslation();
     const [showMenu, setShowMenu] = useState(false);
     const [isOwner, setIsOwner] = useState(false);
     const [tagsExpanded, setTagsExpanded] = useState(false);
@@ -96,7 +98,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
     };
 
     const getSourceLabel = (url?: string) => {
-        if (!url) return 'None';
+        if (!url) return t('common.none');
         try {
             const parsed = new URL(url, window.location.origin);
             const name = decodeURIComponent(parsed.pathname.split('/').pop() || url);
@@ -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('rightSidebar.selectToView')}</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('rightSidebar.title')}</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"
@@ -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('common.saving') : t('common.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('common.cancel')}
                                             </button>
                                             {titleError && (
                                                 <span className="text-xs text-red-500">{titleError}</span>
@@ -241,7 +243,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                             startTitleEdit();
                                         }}
                                         className="text-zinc-400 hover:text-black dark:hover:text-white p-1 mr-1"
-                                        title="Rename song"
+                                        title={t('actions.rename')}
                                     >
                                         <Edit3 size={18} />
                                     </button>
@@ -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('common.anonymous')}
                                 </span>
-                                <span className="text-xs text-zinc-500 dark:text-zinc-400">Created {new Date(song.createdAt).toLocaleDateString()}</span>
+                                <span className="text-xs text-zinc-500 dark:text-zinc-400">{t('rightSidebar.created', { date: new Date(song.createdAt).toLocaleDateString() })}</span>
                             </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('actions.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('actions.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('actions.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('actions.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('actions.downloadAudio')}
                                 onClick={async () => {
                                     if (!song.audioUrl) return;
                                     try {
@@ -370,7 +372,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                         <div className="space-y-3">
                             <div className="flex items-center gap-2 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">
                                 <LinkIcon size={14} />
-                                Sources
+                                {t('rightSidebar.sources')}
                             </div>
                             <div className="space-y-2">
                                 {song.generationParams?.referenceAudioUrl && (
@@ -378,7 +380,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                         <div className="flex items-center gap-2 min-w-0">
                                             <Music size={14} className="text-zinc-400" />
                                             <div className="min-w-0">
-                                                <div className="text-xs text-zinc-500">Reference</div>
+                                                <div className="text-xs text-zinc-500">{t('rightSidebar.reference')}</div>
                                                 <div className="text-sm font-medium text-zinc-900 dark:text-white truncate">
                                                     {song.generationParams?.referenceAudioTitle || getSourceLabel(song.generationParams?.referenceAudioUrl)}
                                                 </div>
@@ -405,7 +407,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                                     onPlay(previewSong);
                                                 }}
                                             >
-                                                Play
+                                                {t('rightSidebar.play')}
                                             </button>
                                     </div>
                                 )}
@@ -414,7 +416,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                         <div className="flex items-center gap-2 min-w-0">
                                             <Layers size={14} className="text-zinc-400" />
                                             <div className="min-w-0">
-                                                <div className="text-xs text-zinc-500">Cover</div>
+                                                <div className="text-xs text-zinc-500">{t('rightSidebar.cover')}</div>
                                                 <div className="text-sm font-medium text-zinc-900 dark:text-white truncate">
                                                     {song.generationParams?.sourceAudioTitle || getSourceLabel(song.generationParams?.sourceAudioUrl)}
                                                 </div>
@@ -441,7 +443,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                                     onPlay(previewSong);
                                                 }}
                                             >
-                                                Play
+                                                {t('rightSidebar.play')}
                                             </button>
                                     </div>
                                 )}
@@ -454,7 +456,7 @@ 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>
+                            <h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-wider">{t('rightSidebar.styleAndTags')}</h3>
                             <button
                                 onClick={(e) => {
                                     e.stopPropagation();
@@ -466,9 +468,9 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                     setTimeout(() => setCopiedStyle(false), 2000);
                                 }}
                                 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"
+                                title={t('actions.copy')}
                             >
-                                <Copy size={12} /> {copiedStyle ? 'Copied!' : 'Copy'}
+                                <Copy size={12} /> {copiedStyle ? t('actions.copied') : t('actions.copy')}
                             </button>
                         </div>
                         <div
@@ -490,7 +492,7 @@ 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
+                                    {t('rightSidebar.more')}
                                 </span>
                             )}
                         </div>
@@ -499,7 +501,7 @@ 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-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">{t('rightSidebar.lyrics')}</h3>
                             <button
                                 onClick={() => {
                                     if (song.lyrics) {
@@ -510,12 +512,12 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                 }}
                                 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'}`}
                             >
-                                <Copy size={12} /> {copiedLyrics ? 'Copied!' : 'Copy'}
+                                <Copy size={12} /> {copiedLyrics ? t('actions.copied') : t('actions.copy')}
                             </button>
                         </div>
                         <div className="p-4 max-h-[300px] overflow-y-auto custom-scrollbar">
                             <div className="text-sm text-zinc-700 dark:text-zinc-300 font-mono whitespace-pre-wrap leading-relaxed opacity-90">
-                                {song.lyrics || <div className="text-zinc-400 dark:text-zinc-600 italic text-center py-8">Instrumental<br /><span className="text-xs not-italic">No lyrics generated</span></div>}
+                                {song.lyrics || <div className="text-zinc-400 dark:text-zinc-600 italic text-center py-8">{t('rightSidebar.instrumental')}<br /><span className="text-xs not-italic">{t('rightSidebar.noLyrics')}</span></div>}
                             </div>
                         </div>
                     </div>
@@ -542,4 +544,4 @@ const ActionButton: React.FC<{ icon: React.ReactNode; label?: string; active?: b
         {icon}
         {label && <span className="text-xs font-semibold">{label}</span>}
     </button>
-);
+);
\ No newline at end of file
diff --git a/components/SearchPage.tsx b/components/SearchPage.tsx
index 6456825..e6f8b70 100644
--- a/components/SearchPage.tsx
+++ b/components/SearchPage.tsx
@@ -2,6 +2,7 @@ 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 { useTranslation } from 'react-i18next';
 
 interface SearchPageProps {
   onPlaySong?: (song: Song, list?: Song[]) => void;
@@ -36,6 +37,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
   onNavigateToSong,
   onNavigateToPlaylist,
 }) => {
+  const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState('');
   const [featuredSongs, setFeaturedSongs] = useState<ExtendedSong[]>([]);
   const [featuredCreators, setFeaturedCreators] = useState<Array<UserProfile & { song_count?: number }>>([]);
@@ -210,7 +212,7 @@ export const SearchPage: React.FC<SearchPageProps> = ({
             <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('search.placeholder')}
               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 +234,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('search.matchingSongs', { query: searchQuery }) : t('search.featuredSongs')}
               {isSearching && displaySongs.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displaySongs.length})</span>
               )}
@@ -278,7 +280,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('search.noSongs', { query: searchQuery })}
             </div>
           ) : null}
         </section>
@@ -287,7 +289,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('search.matchingCreators', { query: searchQuery }) : t('search.featuredCreators')}
               {isSearching && displayCreators.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displayCreators.length})</span>
               )}
@@ -337,7 +339,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('search.noCreatorsMatch', { query: searchQuery }) : t('search.noCreators')}
             </div>
           )}
         </section>
@@ -346,7 +348,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('search.matchingPlaylists', { query: searchQuery }) : t('search.featuredPlaylists')}
               {isSearching && displayPlaylists.length > 0 && (
                 <span className="ml-2 text-sm font-normal text-zinc-500">({displayPlaylists.length})</span>
               )}
@@ -398,14 +400,14 @@ export const SearchPage: React.FC<SearchPageProps> = ({
             </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('search.noPlaylistsMatch', { query: searchQuery }) : t('search.noPlaylists')}
             </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('search.genres')}</h2>
           <div className="flex flex-wrap gap-2">
             {GENRES.map((genre) => (
               <button
@@ -608,4 +610,4 @@ const PlaylistCard: React.FC<PlaylistCardProps> = ({
       )}
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 0f61b8c..a01829e 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,7 +1,8 @@
 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, Github, Globe } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { EditProfileModal } from './EditProfileModal';
+import { useTranslation } from 'react-i18next';
 
 interface SettingsModalProps {
     isOpen: boolean;
@@ -14,6 +15,11 @@ interface SettingsModalProps {
 export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, theme, onToggleTheme, onNavigateToProfile }) => {
     const { user } = useAuth();
     const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
+    const { t, i18n } = useTranslation();
+
+    const changeLanguage = (lng: string) => {
+        i18n.changeLanguage(lng);
+    };
 
     if (!isOpen || !user) {
         if (isEditProfileOpen && user) {
@@ -36,7 +42,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
             >
                 {/* 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.title')}</h2>
                     <button
                         onClick={onClose}
                         className="p-2 hover:bg-zinc-100 dark:hover:bg-white/5 rounded-full transition-colors"
@@ -59,7 +65,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' })}
+                                    Member since {new Date(user.createdAt).toLocaleDateString(i18n.language, { month: 'long', year: 'numeric' })}
                                 </p>
                             </div>
                             <div className="flex gap-2">
@@ -101,11 +107,11 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                         </div>
                     </div>
 
-                    {/* Theme Section */}
+                    {/* Appearance 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('settings.theme')}</h3>
                         </div>
                         <div className="pl-7 space-y-3">
                             <div className="flex gap-3">
@@ -116,7 +122,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('sidebar.lightMode')}
                                 </button>
                                 <button
                                     onClick={theme === 'light' ? onToggleTheme : undefined}
@@ -125,7 +131,37 @@ 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('sidebar.darkMode')}
+                                </button>
+                            </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('settings.language')}</h3>
+                        </div>
+                        <div className="pl-7 space-y-3">
+                            <div className="flex gap-3">
+                                <button
+                                    onClick={() => changeLanguage('en')}
+                                    className={`flex-1 py-3 px-4 rounded-lg border-2 font-medium transition-colors ${i18n.language === 'en'
+                                            ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300'
+                                            : 'border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-600'
+                                        }`}
+                                >
+                                    English
+                                </button>
+                                <button
+                                    onClick={() => changeLanguage('zh')}
+                                    className={`flex-1 py-3 px-4 rounded-lg border-2 font-medium transition-colors ${i18n.language === 'zh'
+                                            ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300'
+                                            : 'border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-600'
+                                        }`}
+                                >
+                                    中文
                                 </button>
                             </div>
                         </div>
@@ -181,7 +217,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('common.confirm')}
                     </button>
                 </div>
             </div>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 82422c4..19589c0 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 { View } from '../types';
+import { useTranslation } from 'react-i18next';
 
 interface SidebarProps {
   currentView: View;
@@ -23,6 +24,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   onLogout,
   onOpenSettings,
 }) => {
+  const { t } = useTranslation();
+
   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 */}
@@ -41,19 +44,19 @@ export const Sidebar: React.FC<SidebarProps> = ({
       <nav className="flex-1 flex flex-col gap-4 w-full px-3">
         <NavItem
           icon={<Disc size={24} />}
-          label="Create"
+          label={t('sidebar.create')}
           active={currentView === 'create'}
           onClick={() => onNavigate('create')}
         />
         <NavItem
           icon={<Library size={24} />}
-          label="Library"
+          label={t('sidebar.library')}
           active={currentView === 'library'}
           onClick={() => onNavigate('library')}
         />
         <NavItem
           icon={<Search size={24} />}
-          label="Search"
+          label={t('sidebar.search')}
           active={currentView === 'search'}
           onClick={() => onNavigate('search')}
         />
@@ -62,7 +65,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           <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'}
+            title={theme === 'dark' ? t('sidebar.lightMode') : t('sidebar.darkMode')}
           >
             {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
           </button>
@@ -72,7 +75,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               <div
                 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`}
+                title={`${user.username} - ${t('sidebar.settings')}`}
               >
                 {user.avatar_url ? (
                   <img src={user.avatar_url} alt={user.username} className="w-full h-full object-cover" />
@@ -83,7 +86,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               <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"
+                title={t('sidebar.signOut')}
               >
                 <LogOut size={16} />
               </button>
@@ -92,7 +95,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
             <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"
+              title={t('sidebar.signIn')}
             >
               <LogIn size={20} />
             </button>
diff --git a/components/SongDropdownMenu.tsx b/components/SongDropdownMenu.tsx
index 31ba6dc..ae60981 100644
--- a/components/SongDropdownMenu.tsx
+++ b/components/SongDropdownMenu.tsx
@@ -10,6 +10,7 @@ import {
     Trash2,
     Share2
 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 interface SongDropdownMenuProps {
     song: Song;
@@ -77,6 +78,7 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
     onCoverSong
 }) => {
     const menuRef = useRef<HTMLDivElement>(null);
+    const { t } = useTranslation();
 
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {
@@ -174,32 +176,32 @@ export const SongDropdownMenu: React.FC<SongDropdownMenuProps> = ({
             {/* Creative Actions */}
             <MenuItem
                 icon={<Video size={14} />}
-                label="Create Video"
+                label={t('actions.createVideo')}
                 onClick={() => handleAction(onCreateVideo)}
             />
             {isOwner && (
                 <MenuItem
                     icon={<Edit3 size={14} />}
-                    label="Edit Audio"
+                    label={t('actions.editAudio')}
                     onClick={onEditAudio ? () => handleAction(onEditAudio) : handleEditAudio}
                 />
             )}
             <MenuItem
                 icon={<Layers size={14} />}
-                label="Extract Stems"
+                label={t('actions.extractStems')}
                 onClick={onExtractStems ? () => handleAction(onExtractStems) : handleExtractStems}
             />
             {onReusePrompt && (
                 <MenuItem
                     icon={<Repeat size={14} />}
-                    label="Reuse Prompt"
+                    label={t('actions.reusePrompt')}
                     onClick={() => handleAction(onReusePrompt)}
                 />
             )}
             {onUseAsReference && (
                 <MenuItem
                     icon={<Layers size={14} />}
-                    label="Use as Reference"
+                    label={t('actions.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('actions.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('actions.addToPlaylist')}
                 onClick={() => handleAction(onAddToPlaylist)}
             />
             <MenuItem
                 icon={<Download size={14} />}
-                label="Download"
+                label={t('actions.download')}
                 onClick={onDownload ? () => handleAction(onDownload) : handleDownload}
             />
             <MenuItem
                 icon={<Share2 size={14} />}
-                label="Share"
+                label={t('actions.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('actions.deleteSong')}
                         onClick={() => handleAction(onDelete)}
                         danger
                     />
diff --git a/components/SongList.tsx b/components/SongList.tsx
index 4584858..17dfb28 100644
--- a/components/SongList.tsx
+++ b/components/SongList.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext';
 import { SongDropdownMenu } from './SongDropdownMenu';
 import { ShareModal } from './ShareModal';
 import { AlbumCover } from './AlbumCover';
+import { useTranslation } from 'react-i18next';
 
 interface SongListProps {
     songs: Song[];
@@ -29,20 +30,9 @@ interface SongListProps {
     onCoverUpload?: (track: { audio_url: string; filename: string }) => void;
 }
 
-// ... existing code ...
-
-
-
 // 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} /> },
-];
-
 const createDragPreview = (element: HTMLElement) => {
     const clone = element.cloneNode(true) as HTMLElement;
     clone.style.width = `${element.offsetWidth}px`;
@@ -98,6 +88,7 @@ export const SongList: React.FC<SongListProps> = ({
     onCoverUpload
 }) => {
     const { user } = useAuth();
+    const { t } = useTranslation();
     const [searchQuery, setSearchQuery] = useState('');
     const [activeFilters, setActiveFilters] = useState<Set<FilterType>>(new Set());
     const [isFilterOpen, setIsFilterOpen] = useState(false);
@@ -105,6 +96,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('filters.liked'), icon: <ThumbsUp size={16} /> },
+        { id: 'public', label: t('filters.public'), icon: <Globe size={16} /> },
+        { id: 'private', label: t('filters.private'), icon: <Lock size={16} /> },
+        { id: 'generating', label: t('filters.generating'), icon: <Loader2 size={16} /> },
+    ];
+
     // Close filter dropdown when clicking outside
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -202,9 +200,9 @@ export const SongList: React.FC<SongListProps> = ({
                 {/* Header */}
                 <div className="flex flex-col gap-6 mb-8">
                     <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400">
-                        <span className="hover:text-black dark:hover:text-white cursor-pointer transition-colors">Workspaces</span>
+                        <span className="hover:text-black dark:hover:text-white cursor-pointer transition-colors">{t('workspace.title')}</span>
                         <span className="text-zinc-400 dark:text-zinc-600">›</span>
-                        <span className="text-zinc-900 dark:text-white font-medium">My Workspace</span>
+                        <span className="text-zinc-900 dark:text-white font-medium">{t('workspace.my')}</span>
                     </div>
 
                     <div className="flex items-center gap-3">
@@ -213,7 +211,7 @@ export const SongList: React.FC<SongListProps> = ({
                                 type="text"
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
-                                placeholder="Search your songs..."
+                                placeholder={t('common.searchPlaceholder')}
                                 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 +229,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('common.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('common.refineBy')}
                                     </div>
                                     {FILTERS.map(filter => (
                                         <button
@@ -277,14 +275,14 @@ export const SongList: React.FC<SongListProps> = ({
                                     : 'bg-zinc-100 dark:bg-[#121214] hover:bg-zinc-200 dark:hover:bg-white/5 border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-white'
                                 }`}
                         >
-                            Select
+                            {t('common.select')}
                         </button>
                     </div>
 
                     {isSelecting && (
                         <div className="flex items-center justify-between gap-3 rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 px-4 py-3">
                             <div className="text-sm text-zinc-600 dark:text-zinc-300">
-                                {selectedSongs.length} selected
+                                {t('common.selected', { count: selectedSongs.length })}
                             </div>
                             <div className="flex items-center gap-2">
                                 <button
@@ -297,7 +295,7 @@ export const SongList: React.FC<SongListProps> = ({
                                     }}
                                     className="px-3 py-1.5 rounded-lg text-xs font-semibold border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20"
                                 >
-                                    {allSelected ? 'Clear all' : 'Select all'}
+                                    {allSelected ? t('common.clearAll') : t('common.selectAll')}
                                 </button>
                                 <button
                                     onClick={() => {
@@ -312,7 +310,7 @@ export const SongList: React.FC<SongListProps> = ({
                                         }`}
                                     disabled={!selectedSongs.length}
                                 >
-                                    Delete
+                                    {t('common.delete')}
                                 </button>
                             </div>
                         </div>
@@ -326,12 +324,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('songList.empty.title')}</p>
                             <button
                                 onClick={() => { setActiveFilters(new Set()); setSearchQuery(''); }}
                                 className="text-pink-600 dark:text-pink-500 text-sm font-bold hover:underline"
                             >
-                                Clear filters
+                                {t('songList.empty.clearFilters')}
                             </button>
                         </div>
                     ) : (
@@ -446,6 +444,7 @@ const SongItem: React.FC<SongItemProps> = ({
     const [showDropdown, setShowDropdown] = useState(false);
     const [shareModalOpen, setShareModalOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const { t } = useTranslation();
 
     return (
         <>
@@ -457,7 +456,7 @@ const SongItem: React.FC<SongItemProps> = ({
                 e.dataTransfer.effectAllowed = 'copy';
                 e.dataTransfer.setData('application/x-ace-audio', JSON.stringify({
                     url: song.audioUrl,
-                    title: song.title || 'Untitled',
+                    title: song.title || t('common.untitled'),
                     source: 'song',
                 }));
                 const preview = createDragPreview(e.currentTarget);
@@ -515,7 +514,7 @@ const SongItem: React.FC<SongItemProps> = ({
                                 <div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">
                                     <Clock size={16} className="text-amber-400" />
                                 </div>
-                                <span className="text-[10px] font-medium text-amber-400">Queue #{song.queuePosition}</span>
+                                <span className="text-[10px] font-medium text-amber-400">{t('status.queuePos', { n: song.queuePosition })}</span>
                             </>
                         ) : (
                             /* Generating - Music Waveform Animation */
@@ -551,7 +550,7 @@ const SongItem: React.FC<SongItemProps> = ({
                 <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")}
+                            {song.title || (song.isGenerating ? (song.queuePosition ? t('status.queued') : t('status.creating')) : t('common.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
@@ -574,7 +573,7 @@ const SongItem: React.FC<SongItemProps> = ({
                                 {(song.creator?.[0] || 'U').toUpperCase()}
                             </div>
                             <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors hover:underline">
-                                {song.creator || 'Unknown'}
+                                {song.creator || t('common.unknown')}
                             </span>
                         </div>
                     </div>
@@ -621,7 +620,7 @@ const SongItem: React.FC<SongItemProps> = ({
                         <button
                             className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                             onClick={(e) => { e.stopPropagation(); setShareModalOpen(true); }}
-                            title="Share"
+                            title={t('actions.share')}
                         >
                             <Share2 size={16} />
                         </button>
@@ -629,7 +628,7 @@ const SongItem: React.FC<SongItemProps> = ({
                         <button
                             className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors"
                             onClick={(e) => { e.stopPropagation(); if (onOpenVideo) onOpenVideo(); }}
-                            title="Create Video"
+                            title={t('actions.createVideo')}
                         >
                             <Video size={16} />
                         </button>
@@ -637,7 +636,7 @@ const SongItem: React.FC<SongItemProps> = ({
                         <button
                             className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors ml-auto"
                             onClick={(e) => { e.stopPropagation(); onAddToPlaylist(); }}
-                            title="Add to Playlist"
+                            title={t('actions.addToPlaylist')}
                         >
                             <ListPlus size={16} />
                         </button>
@@ -646,7 +645,7 @@ const SongItem: React.FC<SongItemProps> = ({
                         <button
                             className="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-white/5 text-zinc-400 hover:text-black dark:hover:text-white transition-colors xl:hidden"
                             onClick={(e) => { e.stopPropagation(); if (onShowDetails) onShowDetails(); }}
-                            title="Song Details"
+                            title={t('actions.songDetails')}
                         >
                             <Info size={16} />
                         </button>
@@ -683,7 +682,7 @@ const SongItem: React.FC<SongItemProps> = ({
             <div className="text-xs font-mono text-zinc-500 dark:text-zinc-600 self-start pt-1">
                 {song.isGenerating ? (
                     <span className={song.queuePosition ? 'text-amber-500' : 'text-pink-500'}>
-                        {song.queuePosition ? `#${song.queuePosition}` : 'Creating...'}
+                        {song.queuePosition ? `#${song.queuePosition}` : t('status.creating')}
                     </span>
                 ) : song.duration}
             </div>
@@ -705,6 +704,7 @@ const UploadItem: React.FC<{
     onCoverSong?: () => void;
 }> = ({ track, onPlay, onUseAsReference, onCoverSong }) => {
     const title = track.filename.replace(/\.[^/.]+$/, '');
+    const { t } = useTranslation();
     const duration = track.duration
         ? `${Math.floor(track.duration / 60)}:${String(Math.floor(track.duration % 60)).padStart(2, '0')}`
         : '--:--';
@@ -714,7 +714,7 @@ const UploadItem: React.FC<{
                 id: `upload_${track.id}`,
                 title,
                 lyrics: '',
-                style: 'Upload',
+                style: t('common.upload'),
                 coverUrl: '',
                 duration,
                 createdAt: new Date(),
@@ -743,4 +743,4 @@ const UploadItem: React.FC<{
             onCoverSong={onCoverSong}
         />
     );
-};
+};
\ No newline at end of file
diff --git a/components/SongProfile.tsx b/components/SongProfile.tsx
index 558eff0..6b2a8d3 100644
--- a/components/SongProfile.tsx
+++ b/components/SongProfile.tsx
@@ -4,6 +4,7 @@ import { songsApi, getAudioUrl } from '../services/api';
 import { useAuth } from '../context/AuthContext';
 import { ArrowLeft, Play, Pause, Heart, Share2, MoreHorizontal, ThumbsDown, Music as MusicIcon, Edit3, Eye } from 'lucide-react';
 import { ShareModal } from './ShareModal';
+import { useTranslation } from 'react-i18next';
 
 interface SongProfileProps {
     songId: string;
@@ -81,6 +82,7 @@ const resetMetaTags = () => {
 
 export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay, onNavigateToProfile, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike }) => {
     const { user, token } = useAuth();
+    const { t } = useTranslation();
     const [song, setSong] = useState<Song | null>(null);
     const [loading, setLoading] = useState(true);
     const [shareModalOpen, setShareModalOpen] = useState(false);
@@ -138,7 +140,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('song.loading')}
                 </div>
             </div>
         );
@@ -147,9 +149,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('song.notFound')}</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('common.goBack')}
                 </button>
             </div>
         );
@@ -164,7 +166,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('common.back')}</span>
                 </button>
 
                 <div className="flex flex-col md:flex-row md:items-start justify-between gap-4">
@@ -182,7 +184,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                                         song.creator ? song.creator[0].toUpperCase() : 'A'
                                     )}
                                 </div>
-                                <span className="text-zinc-900 dark:text-white font-semibold">{song.creator || 'Anonymous'}</span>
+                                <span className="text-zinc-900 dark:text-white font-semibold">{song.creator || t('common.anonymous')}</span>
                             </div>
                         </div>
 
@@ -206,13 +208,13 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                     {/* Related Songs Tab - Hidden on mobile */}
                     <div className="hidden md:flex items-center gap-2">
                         <button className="px-4 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black rounded-full text-sm font-semibold">
-                            Similar
+                            {t('song.similar')}
                         </button>
                         <button
                             onClick={() => song.creator && onNavigateToProfile(song.creator)}
                             className="px-4 py-2 text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white text-sm font-semibold transition-colors"
                         >
-                            By {song.creator || 'Artist'}
+                            {t('song.by', { artist: song.creator || 'Artist' })}
                         </button>
                     </div>
                 </div>
@@ -272,7 +274,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                                     className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 px-3 py-2 rounded-full text-sm font-semibold transition-colors text-white"
                                 >
                                     <Edit3 size={16} />
-                                    <span className="hidden md:inline">Edit</span>
+                                    <span className="hidden md:inline">{t('actions.edit')}</span>
                                 </button>
                             )}
                             <button
@@ -289,7 +291,7 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
                         {/* Lyrics */}
                         {song.lyrics && (
                             <div className="bg-white dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 rounded-xl p-4">
-                                <h3 className="text-sm font-semibold text-zinc-900 dark:text-white mb-3">Lyrics</h3>
+                                <h3 className="text-sm font-semibold text-zinc-900 dark:text-white mb-3">{t('rightSidebar.lyrics')}</h3>
                                 <div className="text-sm text-zinc-700 dark:text-zinc-300 whitespace-pre-line leading-relaxed max-h-72 md:max-h-96 overflow-y-auto">
                                     {song.lyrics}
                                 </div>
@@ -309,4 +311,4 @@ export const SongProfile: React.FC<SongProfileProps> = ({ songId, onBack, onPlay
             )}
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/components/UserProfile.tsx b/components/UserProfile.tsx
index 5556df3..feda57e 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 { useTranslation } from 'react-i18next';
 
 interface UserProfileProps {
     username: string;
@@ -18,6 +19,7 @@ interface UserProfileProps {
 
 export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPlaySong, onNavigateToProfile, onNavigateToPlaylist, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike }) => {
     const { user: currentUser, token } = useAuth();
+    const { t } = useTranslation();
     const [profileUser, setProfileUser] = useState<UserProfileType | null>(null);
     const [publicSongs, setPublicSongs] = useState<Song[]>([]);
     const [publicPlaylists, setPublicPlaylists] = useState<Playlist[]>([]);
@@ -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('user.loading')}
                 </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('user.notFound')}</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('user.goBack')}
                 </button>
             </div>
         );
@@ -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('common.back')}</span>
                 </button>
 
                 {/* Edit Banner Button (Owner Only) - Visual Cue */}
@@ -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('user.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('user.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('user.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('user.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('user.featured')}</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('user.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('user.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('user.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('user.noSongs')}</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('user.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('user.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">
@@ -597,7 +599,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
                 <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="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('user.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('user.avatar')}</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,7 +642,7 @@ 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('user.uploadAvatar')}
                                         </button>
                                         <p className="text-xs text-zinc-500">JPG, PNG, WebP, GIF • Max 5MB</p>
                                     </div>
@@ -649,7 +651,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
 
                             {/* 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('user.banner')}</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('user.uploadBanner')}</span>
                                         </div>
                                     )}
                                     {uploadingBanner && (
@@ -684,11 +686,11 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
 
                             {/* 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('user.bio')}</label>
                                 <textarea
                                     value={editBio}
                                     onChange={(e) => setEditBio(e.target.value)}
-                                    placeholder="Tell us about yourself..."
+                                    placeholder={t('user.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('common.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('user.uploadingAvatar') : uploadingBanner ? t('user.uploadingBanner') : isSaving ? t('common.saving') : t('actions.saveChanges')}
                             </button>
                         </div>
                     </div>
@@ -723,4 +725,4 @@ export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPl
             )}
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/components/UsernameModal.tsx b/components/UsernameModal.tsx
index c44d7ae..282161d 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 { useTranslation } from 'react-i18next';
 
 interface UsernameModalProps {
   isOpen: boolean;
@@ -10,6 +11,7 @@ export const UsernameModal: React.FC<UsernameModalProps> = ({ isOpen, onSubmit }
   const [username, setUsername] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
 
   if (!isOpen) return null;
 
@@ -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('user.welcome')}
           </h2>
           <p className="text-zinc-400 text-center mb-8">
-            Enter your name to get started creating AI music
+            {t('user.enterName')}
           </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('user.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('user.placeholder')}
                   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,20 +103,20 @@ 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('user.gettingStarted')}
                 </span>
               ) : (
-                'Get Started'
+                t('user.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('user.footer')}
           </p>
         </div>
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/components/VideoGeneratorModal.tsx b/components/VideoGeneratorModal.tsx
index 0f1462d..dd8de92 100644
--- a/components/VideoGeneratorModal.tsx
+++ b/components/VideoGeneratorModal.tsx
@@ -4,6 +4,7 @@ import { X, Play, Pause, Download, Wand2, Image as ImageIcon, Music, Video, Load
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile, toBlobURL } from '@ffmpeg/util';
 import { useResponsive } from '../context/ResponsiveContext';
+import { useTranslation } from 'react-i18next';
 
 interface VideoGeneratorModalProps {
   isOpen: boolean;
@@ -79,19 +80,6 @@ interface PexelsVideo {
   user: { name: string };
 }
 
-const PRESETS: { id: PresetType; label: string; icon: React.ReactNode }[] = [
-  { id: 'NCS Circle', label: 'Classic NCS', icon: <Circle size={16} /> },
-  { id: 'Linear Bars', label: 'Spectrum', icon: <BarChart2 size={16} /> },
-  { id: 'Dual Mirror', label: 'Mirror', icon: <ColumnsIcon /> },
-  { id: 'Center Wave', label: 'Shockwave', icon: <Waves size={16} /> },
-  { id: 'Orbital', label: 'Orbital', icon: <Disc size={16} /> },
-  { id: 'Hexagon', label: 'Hex Core', icon: <Box size={16} /> },
-  { id: 'Oscilloscope', label: 'Analog', icon: <Activity size={16} /> },
-  { id: 'Digital Rain', label: 'Matrix', icon: <Grid size={16} /> },
-  { id: 'Shockwave', label: 'Pulse', icon: <Aperture size={16} /> },
-  { id: 'Minimal', label: 'Clean', icon: <Type size={16} /> },
-];
-
 function ColumnsIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -103,6 +91,7 @@ function ColumnsIcon() {
 
 export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen, onClose, song }) => {
   const { isMobile } = useResponsive();
+  const { t } = useTranslation();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const animationRef = useRef<number>(0);
@@ -112,6 +101,19 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
   const fileInputRef = useRef<HTMLInputElement>(null);
   const videoFileInputRef = useRef<HTMLInputElement>(null);
 
+  const PRESETS: { id: PresetType; label: string; icon: React.ReactNode }[] = [
+    { id: 'NCS Circle', label: 'Classic NCS', icon: <Circle size={16} /> },
+    { id: 'Linear Bars', label: 'Spectrum', icon: <BarChart2 size={16} /> },
+    { id: 'Dual Mirror', label: 'Mirror', icon: <ColumnsIcon /> },
+    { id: 'Center Wave', label: 'Shockwave', icon: <Waves size={16} /> },
+    { id: 'Orbital', label: 'Orbital', icon: <Disc size={16} /> },
+    { id: 'Hexagon', label: 'Hex Core', icon: <Box size={16} /> },
+    { id: 'Oscilloscope', label: 'Analog', icon: <Activity size={16} /> },
+    { id: 'Digital Rain', label: 'Matrix', icon: <Grid size={16} /> },
+    { id: 'Shockwave', label: 'Pulse', icon: <Aperture size={16} /> },
+    { id: 'Minimal', label: 'Clean', icon: <Type size={16} /> },
+  ];
+
   // FFmpeg Refs
   const ffmpegRef = useRef<FFmpeg | null>(null);
 
@@ -1701,7 +1703,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
             <div className="absolute top-0 left-0 right-0 z-10 p-3 bg-gradient-to-b from-black/80 to-transparent">
               <h2 className="text-base font-bold text-white flex items-center gap-2">
                 <Video className="text-pink-500" size={18} />
-                Video Studio
+                {t('video.title')}
               </h2>
             </div>
 
@@ -1735,19 +1737,19 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
               <div className="p-6 border-b border-white/5">
                   <h2 className="text-xl font-bold text-white mb-1 flex items-center gap-2">
                       <Video className="text-pink-500" size={20} />
-                      Video Studio
+                      {t('video.title')}
                   </h2>
-                  <p className="text-zinc-500 text-xs">Create professional visualizers.</p>
+                  <p className="text-zinc-500 text-xs">{t('video.subtitle')}</p>
               </div>
             )}
 
             {/* Tabs */}
             <div className="flex border-b border-white/5">
                 {[
-                    { id: 'presets', label: 'Presets', icon: <Grid size={14} /> },
-                    { id: 'style', label: 'Style', icon: <Palette size={14} /> },
-                    { id: 'text', label: 'Text', icon: <Type size={14} /> },
-                    { id: 'effects', label: 'FX', icon: <Zap size={14} /> }
+                    { id: 'presets', label: t('video.presets'), icon: <Grid size={14} /> },
+                    { id: 'style', label: t('video.style'), icon: <Palette size={14} /> },
+                    { id: 'text', label: t('video.text'), icon: <Type size={14} /> },
+                    { id: 'effects', label: t('video.fx'), icon: <Zap size={14} /> }
                 ].map(tab => (
                     <button 
                         key={tab.id}
@@ -1786,7 +1788,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                          {/* Background */}
                          <div className="space-y-3">
                             <label className="text-xs font-bold text-zinc-500 uppercase flex justify-between">
-                                Background
+                                {t('video.background')}
                             </label>
                             <div className="bg-black/20 p-3 rounded-lg border border-white/5 space-y-3">
                                 {/* Type Selection */}
@@ -1795,19 +1797,19 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                                         onClick={() => { setBackgroundType('random'); setBackgroundSeed(Date.now()); }}
                                         className={`py-2 rounded text-xs font-bold flex items-center justify-center gap-1 ${backgroundType === 'random' ? 'bg-pink-600 text-white' : 'bg-zinc-800 text-zinc-400'}`}
                                      >
-                                         <Wand2 size={12}/> Random
+                                         <Wand2 size={12}/> {t('video.random')}
                                      </button>
                                      <button
                                         onClick={() => setBackgroundType('custom')}
                                         className={`py-2 rounded text-xs font-bold flex items-center justify-center gap-1 ${backgroundType === 'custom' ? 'bg-pink-600 text-white' : 'bg-zinc-800 text-zinc-400'}`}
                                      >
-                                         <ImageIcon size={12}/> Image
+                                         <ImageIcon size={12}/> {t('video.image')}
                                      </button>
                                      <button
                                         onClick={() => setBackgroundType('video')}
                                         className={`py-2 rounded text-xs font-bold flex items-center justify-center gap-1 ${backgroundType === 'video' ? 'bg-pink-600 text-white' : 'bg-zinc-800 text-zinc-400'}`}
                                      >
-                                         <Video size={12}/> Video
+                                         <Video size={12}/> {t('video.video')}
                                      </button>
                                 </div>
 
@@ -1819,13 +1821,13 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                                                 onClick={() => fileInputRef.current?.click()}
                                                 className="py-2 px-3 bg-zinc-700 hover:bg-zinc-600 rounded text-xs text-white flex items-center justify-center gap-1"
                                             >
-                                                <Upload size={12}/> Upload
+                                                <Upload size={12}/> {t('video.upload')}
                                             </button>
                                             <button
                                                 onClick={() => openPexelsBrowser('background', 'photos')}
                                                 className="py-2 px-3 bg-emerald-600 hover:bg-emerald-700 rounded text-xs text-white flex items-center justify-center gap-1"
                                             >
-                                                <Search size={12}/> Pexels
+                                                <Search size={12}/> {t('video.pexels')}
                                             </button>
                                         </div>
                                         {customImage && (
@@ -1844,13 +1846,13 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                                                 onClick={() => videoFileInputRef.current?.click()}
                                                 className="py-2 px-3 bg-zinc-700 hover:bg-zinc-600 rounded text-xs text-white flex items-center justify-center gap-1"
                                             >
-                                                <Upload size={12}/> Upload
+                                                <Upload size={12}/> {t('video.upload')}
                                             </button>
                                             <button
                                                 onClick={() => openPexelsBrowser('background', 'videos')}
                                                 className="py-2 px-3 bg-emerald-600 hover:bg-emerald-700 rounded text-xs text-white flex items-center justify-center gap-1"
                                             >
-                                                <Search size={12}/> Pexels
+                                                <Search size={12}/> {t('video.pexels')}
                                             </button>
                                         </div>
                                         <input
@@ -1884,7 +1886,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
 
                                 <div>
                                     <div className="flex justify-between text-sm text-zinc-300 mb-2">
-                                        <span>Dimming</span>
+                                        <span>{t('video.dimming')}</span>
                                         <span>{Math.round(config.bgDim * 100)}%</span>
                                     </div>
                                     <input
@@ -1899,7 +1901,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
 
                          {/* Colors */}
                          <div className="space-y-3">
-                             <label className="text-xs font-bold text-zinc-500 uppercase">Color Presets</label>
+                             <label className="text-xs font-bold text-zinc-500 uppercase">{t('video.colors')}</label>
                              <div className="grid grid-cols-5 gap-2">
                                  {[
                                      { name: 'Neon Pink', primary: '#ec4899', secondary: '#8b5cf6' },
@@ -1933,7 +1935,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                          </div>
 
                          <div className="space-y-3">
-                             <label className="text-xs font-bold text-zinc-500 uppercase">Custom Colors</label>
+                             <label className="text-xs font-bold text-zinc-500 uppercase">{t('video.customColors')}</label>
                              <div className="grid grid-cols-2 gap-4">
                                  <div>
                                      <span className="text-[10px] text-zinc-400 mb-1 block">Primary</span>
@@ -1955,7 +1957,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                          {/* Particles */}
                          <div className="space-y-3">
                             <div className="flex justify-between text-xs font-bold text-zinc-500 uppercase">
-                                <span>Particles</span>
+                                <span>{t('video.particles')}</span>
                                 <span>{config.particleCount}</span>
                             </div>
                             <input
@@ -1968,7 +1970,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
 
                         {/* Center Image (Album Art) */}
                         <div className="space-y-3">
-                            <label className="text-xs font-bold text-zinc-500 uppercase">Center Image</label>
+                            <label className="text-xs font-bold text-zinc-500 uppercase">{t('video.centerImage')}</label>
                             <div className="bg-black/20 p-3 rounded-lg border border-white/5 space-y-3">
                                 <div className="flex items-center gap-3">
                                     {/* Preview */}
@@ -1985,13 +1987,13 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                                                 onClick={() => albumArtInputRef.current?.click()}
                                                 className="py-1.5 px-2 bg-zinc-700 hover:bg-zinc-600 rounded text-[10px] text-white flex items-center justify-center gap-1"
                                             >
-                                                <Upload size={10}/> Upload
+                                                <Upload size={10}/> {t('video.upload')}
                                             </button>
                                             <button
                                                 onClick={() => openPexelsBrowser('albumArt')}
                                                 className="py-1.5 px-2 bg-emerald-600 hover:bg-emerald-700 rounded text-[10px] text-white flex items-center justify-center gap-1"
                                             >
-                                                <Search size={10}/> Pexels
+                                                <Search size={10}/> {t('video.pexels')}
                                             </button>
                                         </div>
                                         {customAlbumArt && (
@@ -1999,7 +2001,7 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                                                 onClick={() => setCustomAlbumArt(null)}
                                                 className="w-full py-1 text-[10px] text-zinc-500 hover:text-red-400"
                                             >
-                                                Reset to default
+                                                <Trash2 size={10} className="inline mr-1"/> Remove
                                             </button>
                                         )}
                                     </div>
@@ -2019,383 +2021,291 @@ export const VideoGeneratorModal: React.FC<VideoGeneratorModalProps> = ({ isOpen
                 {/* TEXT TAB */}
                 {activeTab === 'text' && (
                     <div className="space-y-4">
-                        <button 
-                            onClick={addTextLayer}
-                            className="w-full py-2 bg-pink-600 text-white rounded-lg flex items-center justify-center gap-2 text-xs font-bold hover:bg-pink-700"
-                        >
-                            <Plus size={14} /> Add Text Layer
-                        </button>
-                        
-                        <div className="space-y-3">
-                            {textLayers.map((layer, index) => (
-                                <div key={layer.id} className="bg-black/20 p-3 rounded-lg border border-white/5 space-y-3">
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-xs font-bold text-zinc-500">Layer {index + 1}</span>
-                                        <button onClick={() => removeTextLayer(layer.id)} className="text-zinc-500 hover:text-red-500">
-                                            <Trash2 size={14} />
-                                        </button>
+                        <div className="flex justify-between items-center">
+                            <h3 className="text-xs font-bold text-zinc-500 uppercase">Text Layers</h3>
+                            <button
+                                onClick={addTextLayer}
+                                className="text-xs bg-pink-600 hover:bg-pink-700 text-white px-2 py-1 rounded flex items-center gap-1"
+                            >
+                                <Plus size={12}/> Add
+                            </button>
+                        </div>
+
+                        {textLayers.map((layer, index) => (
+                            <div key={layer.id} className="bg-black/20 p-3 rounded-lg border border-white/5 space-y-3">
+                                <div className="flex justify-between items-center">
+                                    <span className="text-xs font-bold text-zinc-400">Layer {index + 1}</span>
+                                    <button
+                                        onClick={() => removeTextLayer(layer.id)}
+                                        className="text-zinc-500 hover:text-red-400"
+                                    >
+                                        <Trash2 size={14}/>
+                                    </button>
+                                </div>
+                                <input
+                                    type="text"
+                                    value={layer.text}
+                                    onChange={(e) => updateTextLayer(layer.id, { text: e.target.value })}
+                                    className="w-full bg-zinc-800 rounded px-2 py-1.5 text-xs text-white border border-white/10"
+                                    placeholder="Enter text..."
+                                />
+                                <div className="grid grid-cols-2 gap-2">
+                                    <div>
+                                        <span className="text-[10px] text-zinc-500 block mb-1">Size</span>
+                                        <input
+                                            type="number"
+                                            value={layer.size}
+                                            onChange={(e) => updateTextLayer(layer.id, { size: parseInt(e.target.value) })}
+                                            className="w-full bg-zinc-800 rounded px-2 py-1 text-xs text-white border border-white/10"
+                                        />
                                     </div>
-                                    <input 
-                                        type="text" 
-                                        value={layer.text} 
-                                        onChange={(e) => updateTextLayer(layer.id, { text: e.target.value })}
-                                        className="w-full bg-zinc-800 rounded px-2 py-1 text-xs text-white border border-white/5"
-                                        placeholder="Text content"
-                                    />
-                                    <div className="grid grid-cols-2 gap-2">
-                                        <div>
-                                            <label className="text-[10px] text-zinc-500 block mb-1">X Position</label>
-                                            <input type="range" min="0" max="100" value={layer.x} onChange={(e) => updateTextLayer(layer.id, { x: parseInt(e.target.value) })} className="w-full accent-pink-500 h-1 bg-zinc-700 rounded-lg appearance-none" />
-                                        </div>
-                                        <div>
-                                            <label className="text-[10px] text-zinc-500 block mb-1">Y Position</label>
-                                            <input type="range" min="0" max="100" value={layer.y} onChange={(e) => updateTextLayer(layer.id, { y: parseInt(e.target.value) })} className="w-full accent-pink-500 h-1 bg-zinc-700 rounded-lg appearance-none" />
+                                    <div>
+                                        <span className="text-[10px] text-zinc-500 block mb-1">Color</span>
+                                        <div className="flex items-center gap-2 bg-zinc-800 rounded px-2 py-1 border border-white/10 h-[26px]">
+                                            <input
+                                                type="color"
+                                                value={layer.color}
+                                                onChange={(e) => updateTextLayer(layer.id, { color: e.target.value })}
+                                                className="w-4 h-4 rounded border-none bg-transparent cursor-pointer"
+                                            />
+                                            <span className="text-[10px] text-zinc-400 font-mono">{layer.color}</span>
                                         </div>
                                     </div>
-                                    <div className="flex gap-2">
-                                        <div className="flex-1">
-                                            <label className="text-[10px] text-zinc-500 block mb-1">Size</label>
-                                            <input type="number" value={layer.size} onChange={(e) => updateTextLayer(layer.id, { size: parseInt(e.target.value) })} className="w-full bg-zinc-800 rounded px-2 py-1 text-xs text-white border border-white/5" />
-                                        </div>
-                                        <div>
-                                            <label className="text-[10px] text-zinc-500 block mb-1">Color</label>
-                                            <input type="color" value={layer.color} onChange={(e) => updateTextLayer(layer.id, { color: e.target.value })} className="w-8 h-6 rounded cursor-pointer border-none bg-transparent" />
-                                        </div>
+                                </div>
+                                <div>
+                                    <span className="text-[10px] text-zinc-500 block mb-1">Position (X, Y %)</span>
+                                    <div className="grid grid-cols-2 gap-2">
+                                        <input
+                                            type="range" min="0" max="100"
+                                            value={layer.x}
+                                            onChange={(e) => updateTextLayer(layer.id, { x: parseInt(e.target.value) })}
+                                            className="w-full accent-pink-500 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer"
+                                        />
+                                        <input
+                                            type="range" min="0" max="100"
+                                            value={layer.y}
+                                            onChange={(e) => updateTextLayer(layer.id, { y: parseInt(e.target.value) })}
+                                            className="w-full accent-pink-500 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer"
+                                        />
                                     </div>
                                 </div>
-                            ))}
-                        </div>
+                            </div>
+                        ))}
                     </div>
                 )}
 
                 {/* EFFECTS TAB */}
                 {activeTab === 'effects' && (
-                    <div className="space-y-2">
-                        {[
-                            { id: 'shake', label: 'Bass Shake', desc: 'Camera reacts to low freq', icon: <Activity size={16}/> },
-                            { id: 'glitch', label: 'Digital Glitch', desc: 'Random artifacting', icon: <Zap size={16}/> },
-                            { id: 'vhs', label: 'VHS Tape', desc: 'Color bleeding & noise', icon: <Disc size={16}/> },
-                            { id: 'cctv', label: 'CCTV Mode', desc: 'Night vision style', icon: <Monitor size={16}/> },
-                            { id: 'scanlines', label: 'Scanlines', desc: 'Old monitor effect', icon: <Grid size={16}/> },
-                            { id: 'chromatic', label: 'Aberration', desc: 'RGB Split', icon: <Layers size={16}/> },
-                            { id: 'bloom', label: 'Bloom', desc: 'Glow on bright areas', icon: <Sun size={16}/> },
-                            { id: 'filmGrain', label: 'Film Grain', desc: 'Cinematic noise', icon: <Film size={16}/> },
-                            { id: 'pixelate', label: 'Pixelate', desc: 'Retro pixel look', icon: <Grid size={16}/> },
-                            { id: 'strobe', label: 'Strobe', desc: 'Flash on bass hits', icon: <Zap size={16}/> },
-                            { id: 'vignette', label: 'Vignette', desc: 'Dark edges', icon: <Circle size={16}/> },
-                            { id: 'hueShift', label: 'Hue Shift', desc: 'Color rotation', icon: <Palette size={16}/> },
-                            { id: 'letterbox', label: 'Letterbox', desc: 'Cinematic bars', icon: <Minus size={16}/> },
-                        ].map((effect) => {
-                             const effectId = effect.id as keyof EffectConfig;
-                             const isActive = effects[effectId];
-                             const intensity = intensities[effectId as keyof EffectIntensities];
-
-                             return (
-                                <div key={effect.id} className={`rounded-lg border transition-all ${isActive ? 'bg-pink-600/10 border-pink-500/30' : 'bg-black/20 border-white/5'}`}>
-                                     <button 
-                                        onClick={() => setEffects(prev => ({ ...prev, [effectId]: !prev[effectId] }))}
-                                        className="w-full flex items-center justify-between p-3"
-                                    >
-                                        <div className="flex items-center gap-3">
-                                            <div className={`p-1.5 rounded-md ${isActive ? 'bg-pink-500 text-white' : 'bg-zinc-800 text-zinc-500'}`}>
-                                                {effect.icon}
-                                            </div>
-                                            <div className="text-left">
-                                                <div className={`text-sm font-bold ${isActive ? 'text-white' : 'text-zinc-400'}`}>{effect.label}</div>
-                                                <div className="text-[10px] text-zinc-500">{effect.desc}</div>
-                                            </div>
-                                        </div>
-                                        <div className={`w-3 h-3 rounded-full ${isActive ? 'bg-pink-500 shadow-[0_0_8px_rgba(236,72,153,0.8)]' : 'bg-zinc-700'}`}></div>
-                                    </button>
-                                    
-                                    {/* Intensity Slider */}
-                                    {isActive && (
-                                        <div className="px-3 pb-3 pt-0 animate-in fade-in slide-in-from-top-2">
-                                            <div className="flex justify-between text-[10px] text-zinc-400 mb-1">
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-3">
+                            {Object.entries(effects).map(([key, enabled]) => (
+                                <div key={key} className={`p-3 rounded-lg border transition-all ${enabled ? 'bg-pink-900/20 border-pink-500/50' : 'bg-black/20 border-white/5'}`}>
+                                    <div className="flex items-center justify-between mb-2">
+                                        <span className="text-xs font-bold capitalize text-zinc-300">{key.replace(/([A-Z])/g, ' $1').trim()}</span>
+                                        <button
+                                            onClick={() => setEffects({ ...effects, [key]: !enabled })}
+                                            className={`w-8 h-4 rounded-full relative transition-colors ${enabled ? 'bg-pink-500' : 'bg-zinc-700'}`}
+                                        >
+                                            <div className={`absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform ${enabled ? 'translate-x-4' : 'translate-x-0'}`} />
+                                        </button>
+                                    </div>
+                                    {enabled && (
+                                        <div className="space-y-1">
+                                            <div className="flex justify-between text-[10px] text-zinc-500">
                                                 <span>Intensity</span>
-                                                <span>{Math.round(intensity * 100)}%</span>
+                                                <span>{Math.round(intensities[key as keyof EffectIntensities] * 100)}%</span>
                                             </div>
-                                            <input 
-                                                type="range" min="0" max="1" step="0.05" 
-                                                value={intensity}
-                                                onChange={(e) => setIntensities({...intensities, [effectId]: parseFloat(e.target.value)})}
+                                            <input
+                                                type="range" min="0" max="1" step="0.05"
+                                                value={intensities[key as keyof EffectIntensities]}
+                                                onChange={(e) => setIntensities({ ...intensities, [key]: parseFloat(e.target.value) })}
                                                 className="w-full accent-pink-500 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer"
                                             />
                                         </div>
                                     )}
                                 </div>
-                             );
-                        })}
+                            ))}
+                        </div>
                     </div>
                 )}
-
             </div>
 
-            {/* Footer */}
-            <div className="p-4 md:p-6 border-t border-white/5 bg-black/20 space-y-3 safe-area-inset-bottom">
-                 {ffmpegLoading ? (
-                     <div className="w-full bg-zinc-800 rounded-xl h-12 flex items-center justify-center px-4">
-                         <div className="flex items-center gap-2 text-white font-bold text-sm">
-                             <Loader2 className="animate-spin" size={18} />
-                             Loading video encoder...
-                         </div>
-                     </div>
-                 ) : isExporting ? (
-                     <div className="w-full bg-zinc-800 rounded-xl h-12 flex items-center justify-center px-4 relative overflow-hidden">
-                         <div
-                           className={`absolute left-0 top-0 bottom-0 transition-all duration-100 ${exportStage === 'capturing' ? 'bg-pink-600/20' : 'bg-blue-600/20'}`}
-                           style={{ width: `${exportProgress}%` }}
-                         />
-                         <div className="flex items-center gap-2 z-10 text-white font-bold text-sm">
-                             {exportStage === 'capturing' ? (
-                               <>
-                                 <Loader2 className="animate-spin text-pink-400" size={16} />
-                                 Rendering frames {Math.round(exportProgress)}%
-                               </>
-                             ) : (
-                               <>
-                                 <Loader2 className="animate-spin text-blue-400" size={16} />
-                                 {exportProgress < 95 ? 'Encoding (be patient)...' : `Encoding MP4 ${Math.round(exportProgress)}%`}
-                               </>
-                             )}
-                         </div>
-                     </div>
-                 ) : (
+            {/* Footer Actions */}
+            <div className="p-4 md:p-6 border-t border-white/5 bg-black/20">
+                {!ffmpegLoaded && !ffmpegLoading && (
+                    <div className="mb-3 p-2 bg-yellow-500/10 border border-yellow-500/20 rounded text-xs text-yellow-200 text-center">
+                        Video encoder not loaded.
+                        <button onClick={loadFFmpeg} className="ml-2 underline font-bold hover:text-white">Load Now</button>
+                    </div>
+                )}
+                
+                {isExporting ? (
+                    <div className="space-y-2">
+                        <div className="flex justify-between text-xs font-bold text-zinc-400">
+                            <span>{exportStage === 'capturing' ? 'Rendering Frames...' : 'Encoding Video...'}</span>
+                            <span>{exportProgress}%</span>
+                        </div>
+                        <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
+                            <div 
+                                className="h-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all duration-300"
+                                style={{ width: `${exportProgress}%` }}
+                            />
+                        </div>
+                        <button 
+                            onClick={() => window.location.reload()} // Hard stop
+                            className="w-full mt-2 py-2 text-xs font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded transition-colors"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                ) : (
                     <button
                         onClick={startRecording}
-                        disabled={ffmpegLoading}
-                        className="w-full h-12 bg-white text-black font-bold rounded-xl flex items-center justify-center gap-2 hover:scale-105 transition-transform disabled:opacity-50"
+                        disabled={!ffmpegLoaded}
+                        className="w-full py-3 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white rounded-xl font-bold shadow-lg shadow-pink-900/20 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                     >
-                        <Download size={18} />
-                        Render Video (MP4)
+                        {ffmpegLoading ? <Loader2 className="animate-spin" size={18} /> : <Download size={18} />}
+                        Export Video
                     </button>
-                 )}
-                 <p className="text-[10px] text-zinc-600 text-center">
-                   {ffmpegLoaded ? 'Encoder ready • ' : ''}Offline rendering - faster than real-time.
-                 </p>
+                )}
             </div>
         </div>
 
-        {/* Preview Area - Desktop only */}
-        {!isMobile && (
-          <div className="flex-1 bg-black relative flex flex-col">
-               <canvas
-                  ref={canvasRef}
-                  width={1920}
-                  height={1080}
-                  className="w-full h-full object-contain bg-[#0a0a0a]"
-               />
-
-               {/* Playback Controls Overlay */}
-               <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex items-center justify-center gap-6">
-                   <button
-                      onClick={togglePlay}
-                      disabled={isExporting}
-                      className="w-16 h-16 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-transform shadow-xl hover:shadow-2xl disabled:opacity-50 disabled:cursor-not-allowed"
-                   >
-                       {isPlaying ? <Pause fill="black" size={24} /> : <Play fill="black" className="ml-1" size={24} />}
-                   </button>
-               </div>
-          </div>
-        )}
-
-      </div>
-
-      {/* Pexels Browser Modal */}
-      {showPexelsBrowser && (
-        <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
-          <div className="bg-zinc-900 w-full max-w-4xl max-h-[80vh] rounded-2xl border border-white/10 flex flex-col overflow-hidden">
-            {/* Header */}
-            <div className="p-4 border-b border-white/10 flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-emerald-600 rounded-lg">
-                  <ExternalLink size={18} className="text-white" />
-                </div>
-                <div>
-                  <h3 className="text-white font-bold">
-                    {pexelsTarget === 'albumArt' ? 'Select Center Image' : 'Select Background'}
-                  </h3>
-                  <p className="text-zinc-500 text-xs">
-                    {pexelsTarget === 'albumArt' ? 'Choose an image for the center circle' : 'Free stock photos & videos'}
-                  </p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setShowPexelsApiKeyInput(!showPexelsApiKeyInput)}
-                  className={`p-2 hover:bg-white/10 rounded-lg ${pexelsApiKey ? 'text-emerald-400' : 'text-amber-400'}`}
-                  title={pexelsApiKey ? 'API key configured' : 'Set API key'}
-                >
-                  <Settings2 size={20} />
-                </button>
-                <button onClick={() => setShowPexelsBrowser(false)} className="p-2 hover:bg-white/10 rounded-lg text-zinc-400">
-                  <X size={20} />
-                </button>
-              </div>
-            </div>
-
-            {/* API Key Input */}
-            {showPexelsApiKeyInput && (
-              <div className="p-4 bg-zinc-800/50 border-b border-white/10 space-y-2">
-                <div className="flex items-center justify-between">
-                  <label className="text-sm font-medium text-zinc-300">Pexels API Key</label>
-                  <a
-                    href="https://www.pexels.com/api/new/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-emerald-400 hover:underline flex items-center gap-1"
-                  >
-                    Get free API key <ExternalLink size={10} />
-                  </a>
-                </div>
-                <div className="flex gap-2">
-                  <input
-                    type="password"
-                    value={pexelsApiKey}
-                    onChange={(e) => setPexelsApiKey(e.target.value)}
-                    placeholder="Enter your Pexels API key..."
-                    className="flex-1 bg-zinc-900 rounded-lg px-4 py-2 text-sm text-white border border-white/10 placeholder-zinc-500"
-                  />
-                  <button
-                    onClick={() => savePexelsApiKey(pexelsApiKey)}
-                    className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg text-white font-bold text-sm"
-                  >
-                    Save
-                  </button>
+        {/* Pexels Browser Modal Overlay */}
+        {showPexelsBrowser && (
+            <div className="absolute inset-0 z-50 bg-zinc-900 flex flex-col animate-in fade-in duration-200">
+                <div className="p-4 border-b border-white/10 flex items-center gap-3 bg-zinc-900/95 backdrop-blur z-10">
+                    <button onClick={() => setShowPexelsBrowser(false)} className="p-2 hover:bg-white/10 rounded-full text-white">
+                        <X size={20} />
+                    </button>
+                    <div className="flex-1 relative">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
+                        <input
+                            type="text"
+                            value={pexelsQuery}
+                            onChange={(e) => setPexelsQuery(e.target.value)}
+                            onKeyDown={(e) => e.key === 'Enter' && searchPexels(pexelsQuery, pexelsTab)}
+                            placeholder={`Search Pexels ${pexelsTab}...`}
+                            className="w-full bg-zinc-800 text-white pl-10 pr-4 py-2 rounded-lg text-sm border border-white/5 focus:border-pink-500 focus:outline-none"
+                            autoFocus
+                        />
+                    </div>
+                    {pexelsTarget !== 'albumArt' && (
+                        <div className="flex bg-zinc-800 rounded-lg p-1">
+                            <button
+                                onClick={() => { setPexelsTab('photos'); searchPexels(pexelsQuery, 'photos'); }}
+                                className={`px-3 py-1.5 rounded-md text-xs font-bold transition-colors ${pexelsTab === 'photos' ? 'bg-zinc-600 text-white' : 'text-zinc-400 hover:text-white'}`}
+                            >
+                                Photos
+                            </button>
+                            <button
+                                onClick={() => { setPexelsTab('videos'); searchPexels(pexelsQuery, 'videos'); }}
+                                className={`px-3 py-1.5 rounded-md text-xs font-bold transition-colors ${pexelsTab === 'videos' ? 'bg-zinc-600 text-white' : 'text-zinc-400 hover:text-white'}`}
+                            >
+                                Videos
+                            </button>
+                        </div>
+                    )}
                 </div>
-                <p className="text-xs text-zinc-500">Your API key is stored locally in your browser.</p>
-              </div>
-            )}
-
-            {/* Error Message */}
-            {pexelsError && (
-              <div className="px-4 py-2 bg-red-500/10 border-b border-red-500/20 text-red-400 text-sm flex items-center gap-2">
-                <span>{pexelsError}</span>
-                {!pexelsApiKey && (
-                  <button
-                    onClick={() => setShowPexelsApiKeyInput(true)}
-                    className="text-red-300 underline hover:text-red-200"
-                  >
-                    Set API key
-                  </button>
-                )}
-              </div>
-            )}
 
-            {/* Tabs & Search */}
-            <div className="p-4 border-b border-white/10 space-y-3">
-              {pexelsTarget !== 'albumArt' && (
-              <div className="flex gap-2">
-                <button
-                  onClick={() => { setPexelsTab('photos'); searchPexels(pexelsQuery, 'photos'); }}
-                  className={`px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 ${pexelsTab === 'photos' ? 'bg-emerald-600 text-white' : 'bg-zinc-800 text-zinc-400'}`}
-                >
-                  <ImageIcon size={14} /> Photos
-                </button>
-                <button
-                  onClick={() => { setPexelsTab('videos'); searchPexels(pexelsQuery, 'videos'); }}
-                  className={`px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 ${pexelsTab === 'videos' ? 'bg-emerald-600 text-white' : 'bg-zinc-800 text-zinc-400'}`}
-                >
-                  <Video size={14} /> Videos
-                </button>
-              </div>
-              )}
-              <div className="flex gap-2">
-                <input
-                  type="text"
-                  value={pexelsQuery}
-                  onChange={(e) => setPexelsQuery(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && searchPexels(pexelsQuery, pexelsTab)}
-                  placeholder="Search for backgrounds..."
-                  className="flex-1 bg-zinc-800 rounded-lg px-4 py-2 text-sm text-white border border-white/10 placeholder-zinc-500"
-                />
-                <button
-                  onClick={() => searchPexels(pexelsQuery, pexelsTab)}
-                  disabled={pexelsLoading}
-                  className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg text-white font-bold text-sm flex items-center gap-2 disabled:opacity-50"
-                >
-                  {pexelsLoading ? <Loader2 size={14} className="animate-spin" /> : <Search size={14} />}
-                  Search
-                </button>
-              </div>
-              {/* Quick Tags */}
-              <div className="flex flex-wrap gap-2">
-                {['abstract', 'nature', 'city', 'space', 'neon', 'particles', 'smoke', 'fire', 'water', 'technology'].map(tag => (
-                  <button
-                    key={tag}
-                    onClick={() => { setPexelsQuery(tag); searchPexels(tag, pexelsTab); }}
-                    className="px-3 py-1 bg-zinc-800 hover:bg-zinc-700 rounded-full text-xs text-zinc-400 hover:text-white capitalize"
-                  >
-                    {tag}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Results Grid */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {pexelsLoading ? (
-                <div className="flex items-center justify-center h-48">
-                  <Loader2 size={32} className="animate-spin text-emerald-500" />
-                </div>
-              ) : pexelsTab === 'photos' ? (
-                <div className="grid grid-cols-3 gap-3">
-                  {pexelsPhotos.map(photo => (
-                    <button
-                      key={photo.id}
-                      onClick={() => selectPexelsPhoto(photo)}
-                      className="relative group rounded-lg overflow-hidden aspect-video bg-zinc-800"
-                    >
-                      <img src={photo.src.large} alt="" className="w-full h-full object-cover" />
-                      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                        <span className="text-white text-xs font-bold bg-emerald-600 px-3 py-1 rounded-full">Select</span>
-                      </div>
-                      <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 to-transparent">
-                        <p className="text-[10px] text-zinc-300 truncate">by {photo.photographer}</p>
-                      </div>
-                    </button>
-                  ))}
+                <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                    {showPexelsApiKeyInput ? (
+                        <div className="flex flex-col items-center justify-center h-full max-w-md mx-auto text-center space-y-4">
+                            <KeyIcon size={48} className="text-zinc-600" />
+                            <h3 className="text-xl font-bold text-white">Pexels API Key Required</h3>
+                            <p className="text-zinc-400 text-sm">To search Pexels, you need a free API key. Get one at pexels.com/api</p>
+                            <input
+                                type="password"
+                                placeholder="Paste API Key here"
+                                className="w-full bg-zinc-800 border border-white/10 rounded-lg px-4 py-2 text-white"
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        savePexelsApiKey((e.target as HTMLInputElement).value);
+                                    }
+                                }}
+                            />
+                            <button
+                                onClick={() => savePexelsApiKey((document.querySelector('input[type="password"]') as HTMLInputElement)?.value)}
+                                className="px-6 py-2 bg-pink-600 text-white rounded-lg font-bold hover:bg-pink-500"
+                            >
+                                Save Key
+                            </button>
+                        </div>
+                    ) : pexelsError ? (
+                        <div className="flex flex-col items-center justify-center h-full text-zinc-500 gap-2">
+                            <p>{pexelsError}</p>
+                            <button onClick={() => searchPexels(pexelsQuery, pexelsTab)} className="text-pink-500 hover:underline text-sm">Try Again</button>
+                            <button onClick={() => setShowPexelsApiKeyInput(true)} className="text-xs text-zinc-600 hover:text-zinc-400">Update API Key</button>
+                        </div>
+                    ) : pexelsLoading ? (
+                        <div className="flex items-center justify-center h-full">
+                            <Loader2 className="animate-spin text-pink-500" size={32} />
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                            {pexelsTab === 'photos' ? (
+                                pexelsPhotos.map(photo => (
+                                    <div
+                                        key={photo.id}
+                                        onClick={() => selectPexelsPhoto(photo)}
+                                        className="aspect-video relative group cursor-pointer rounded-lg overflow-hidden bg-zinc-800"
+                                    >
+                                        <img src={photo.src.large} alt={photo.photographer} className="w-full h-full object-cover transition-transform group-hover:scale-105" />
+                                        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
+                                            <p className="text-xs text-white truncate">By {photo.photographer}</p>
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                pexelsVideos.map(video => (
+                                    <div
+                                        key={video.id}
+                                        onClick={() => selectPexelsVideo(video)}
+                                        className="aspect-video relative group cursor-pointer rounded-lg overflow-hidden bg-zinc-800"
+                                    >
+                                        <img src={video.image} alt={video.user.name} className="w-full h-full object-cover transition-transform group-hover:scale-105" />
+                                        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                            <Play size={24} className="text-white fill-white" />
+                                        </div>
+                                        <div className="absolute bottom-2 right-2 bg-black/60 px-1.5 rounded text-[10px] text-white font-mono">
+                                            VIDEO
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    )}
                 </div>
-              ) : (
-                <div className="grid grid-cols-3 gap-3">
-                  {pexelsVideos.map(video => (
-                    <button
-                      key={video.id}
-                      onClick={() => selectPexelsVideo(video)}
-                      className="relative group rounded-lg overflow-hidden aspect-video bg-zinc-800"
-                    >
-                      <img src={video.image} alt="" className="w-full h-full object-cover" />
-                      <div className="absolute top-2 right-2 bg-black/60 px-2 py-0.5 rounded text-[10px] text-white font-bold">
-                        <Video size={10} className="inline mr-1" />VIDEO
-                      </div>
-                      <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                        <span className="text-white text-xs font-bold bg-emerald-600 px-3 py-1 rounded-full">Select</span>
-                      </div>
-                      <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 to-transparent">
-                        <p className="text-[10px] text-zinc-300 truncate">by {video.user.name}</p>
-                      </div>
-                    </button>
-                  ))}
+                <div className="p-2 border-t border-white/5 text-center">
+                    <a href="https://www.pexels.com" target="_blank" rel="noopener noreferrer" className="text-[10px] text-zinc-500 hover:text-zinc-300">
+                        Photos provided by Pexels
+                    </a>
                 </div>
-              )}
-
-              {!pexelsLoading && pexelsPhotos.length === 0 && pexelsTab === 'photos' && (
-                <p className="text-center text-zinc-500 py-8">No photos found. Try a different search term.</p>
-              )}
-              {!pexelsLoading && pexelsVideos.length === 0 && pexelsTab === 'videos' && (
-                <p className="text-center text-zinc-500 py-8">No videos found. Try a different search term.</p>
-              )}
             </div>
+        )}
 
-            {/* Footer */}
-            <div className="p-3 border-t border-white/10 bg-zinc-800/50">
-              <p className="text-[10px] text-zinc-500 text-center">
-                Photos and videos provided by <a href="https://www.pexels.com" target="_blank" rel="noopener noreferrer" className="text-emerald-400 hover:underline">Pexels</a>. Free for commercial use.
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
+      </div>
     </div>
   );
 };
+
+function KeyIcon(props: any) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <circle cx="7.5" cy="15.5" r="5.5" />
+            <path d="m21 2-9.6 9.6" />
+            <path d="m15.5 7.5 3 3L22 7l-3-3" />
+        </svg>
+    );
+}
diff --git a/i18n.ts b/i18n.ts
new file mode 100644
index 0000000..fa58f0b
--- /dev/null
+++ b/i18n.ts
@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      zh: { translation: zh }
+    },
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage']
+    }
+  });
+
+export default i18n;
diff --git a/index.tsx b/index.tsx
index d298113..11459b0 100644
--- a/index.tsx
+++ b/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import './i18n';
 import App from './App';
 import { AuthProvider } from './context/AuthContext';
 import { ResponsiveProvider } from './context/ResponsiveContext';
diff --git a/locales/en.json b/locales/en.json
new file mode 100644
index 0000000..d1a5d37
--- /dev/null
+++ b/locales/en.json
@@ -0,0 +1,379 @@
+{
+  "sidebar": {
+    "create": "Create",
+    "library": "Library",
+    "search": "Search",
+    "settings": "Settings",
+    "signOut": "Sign Out",
+    "signIn": "Sign In",
+    "lightMode": "Light Mode",
+    "darkMode": "Dark Mode"
+  },
+  "workspace": {
+    "title": "Workspaces",
+    "my": "My Workspace"
+  },
+  "common": {
+    "viewList": "View List",
+    "createSong": "Create Song",
+    "generating": "Generating...",
+    "loading": "Loading...",
+    "confirmDelete": "Are you sure you want to delete \"{{title}}\"? This action cannot be undone.",
+    "deleteSuccess": "Deleted successfully",
+    "deleteFailed": "Failed to delete",
+    "close": "Close",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "saving": "Saving...",
+    "searchPlaceholder": "Search your songs...",
+    "filters": "Filters",
+    "refineBy": "Refine By",
+    "select": "Select",
+    "selectAll": "Select all",
+    "clearAll": "Clear all",
+    "delete": "Delete",
+    "selected": "{{count}} selected",
+    "untitled": "Untitled",
+    "unknown": "Unknown",
+    "unknownArtist": "Unknown Artist",
+    "upload": "Upload",
+    "playlist": "Playlist",
+    "songCount": "{{count}} songs",
+    "byYou": "By You",
+    "none": "None",
+    "anonymous": "Anonymous",
+    "back": "Back"
+  },
+  "filters": {
+    "liked": "Liked",
+    "public": "Public",
+    "private": "Private",
+    "generating": "Generating"
+  },
+  "songList": {
+    "empty": {
+      "title": "No songs match your filters.",
+      "clearFilters": "Clear filters"
+    }
+  },
+  "status": {
+    "queued": "Queued...",
+    "creating": "Creating...",
+    "queuePos": "Queue #{{n}}"
+  },
+  "actions": {
+    "share": "Share",
+    "createVideo": "Create Video",
+    "addToPlaylist": "Add to Playlist",
+    "songDetails": "Song Details",
+    "editAudio": "Edit Audio",
+    "extractStems": "Extract Stems",
+    "reusePrompt": "Reuse Prompt",
+    "useAsReference": "Use as Reference",
+    "coverSong": "Cover Song",
+    "download": "Download",
+    "downloadAudio": "Download Audio",
+    "deleteSong": "Delete Song",
+    "deleteUpload": "Delete Upload",
+    "openInEditor": "Open in Editor",
+    "rename": "Rename song",
+    "copy": "Copy",
+    "copied": "Copied!",
+    "edit": "Edit",
+    "editProfile": "Edit Profile",
+    "uploadAvatar": "Upload Avatar",
+    "uploadBanner": "Upload Banner",
+    "saveChanges": "Save Changes"
+  },
+  "player": {
+    "selectSong": "Select a song to play",
+    "nowPlaying": "Now Playing"
+  },
+  "rightSidebar": {
+    "title": "Song Details",
+    "selectToView": "Select a song to view details",
+    "sources": "Sources",
+    "reference": "Reference",
+    "cover": "Cover",
+    "play": "Play",
+    "styleAndTags": "Style & Tags",
+    "more": "+more",
+    "lyrics": "Lyrics",
+    "instrumental": "Instrumental",
+    "noLyrics": "No lyrics generated",
+    "created": "Created {{date}}"
+  },
+  "playlist": {
+    "createTitle": "Create Playlist",
+    "addTitle": "Add to Playlist",
+    "name": "Name",
+    "description": "Description",
+    "namePlaceholder": "My Awesome Playlist",
+    "descPlaceholder": "Vibes for coding...",
+    "createBtn": "Create",
+    "createNew": "Create New Playlist",
+    "noPlaylists": "No existing playlists.",
+    "songs": "{{count}} songs",
+    "notFound": "Playlist not found",
+    "public": "Public",
+    "private": "Private",
+    "deleteConfirm": "Are you sure you want to delete this playlist?",
+    "loading": "Loading playlist...",
+    "table": {
+        "title": "Title",
+        "artist": "Artist",
+        "dateAdded": "Date Added",
+        "justNow": "Just now"
+    }
+  },
+  "create": {
+    "mode": {
+      "simple": "Simple",
+      "custom": "Custom"
+    },
+    "simple": {
+      "describeTitle": "Describe Your Song",
+      "describePlaceholder": "A happy pop song about summer adventures with friends...",
+      "variationsDesc": "Number of song variations to generate"
+    },
+    "custom": {
+      "audio": {
+        "title": "Audio",
+        "reference": "Reference",
+        "cover": "Cover",
+        "dropUse": "Drop to use audio",
+        "dropUpload": "Drop to upload",
+        "usingRef": "Using as Reference",
+        "usingCover": "Using as Cover",
+        "library": "Library",
+        "upload": "Upload"
+      },
+      "lyrics": {
+        "title": "Lyrics",
+        "subtitle": "Leave empty for instrumental or toggle below",
+        "instrumental": "Instrumental",
+        "vocal": "Vocal",
+        "placeholder": "[Verse]\nYour lyrics here...\n\n[Chorus]\nThe catchy part..."
+      },
+      "style": {
+        "title": "Style of Music",
+        "subtitle": "Genre, mood, instruments, vibe",
+        "placeholder": "e.g. upbeat pop rock, emotional ballad, 90s hip hop"
+      },
+      "titleInput": {
+        "title": "Title",
+        "placeholder": "Name your song"
+      }
+    },
+    "common": {
+      "vocalLanguage": "Vocal Language",
+      "vocalGender": "Vocal Gender",
+      "male": "Male",
+      "female": "Female",
+      "musicParams": "Music Parameters",
+      "bpm": "BPM",
+      "key": "Key",
+      "time": "Time",
+      "auto": "Auto",
+      "variations": "Variations"
+    },
+    "advanced": {
+      "title": "Advanced Settings",
+      "duration": "Duration",
+      "variations": "Variations Per Job",
+      "variationsDesc": "How many versions to create in one run",
+      "bulk": "Bulk Generate",
+      "job": "job",
+      "jobs": "jobs",
+      "bulkDesc": "Queue multiple independent generation jobs with same settings",
+      "quality": "Quality Steps",
+      "qualityDesc": "Higher = better quality, slower (8 recommended for turbo)",
+      "promptStrength": "Prompt Strength",
+      "promptStrengthDesc": "Higher = follow prompt more, lower = more variation",
+      "audioFormat": "Audio Format",
+      "mp3": "MP3 (smaller)",
+      "flac": "FLAC (lossless)",
+      "sampler": "Sampler",
+      "deterministic": "Deterministic (ODE)",
+      "stochastic": "Stochastic (SDE)",
+      "lmBackend": "LM Backend",
+      "ptDesc": "PT uses less VRAM, VLLM may be faster on powerful GPUs",
+      "lmModel": "LM Model",
+      "lmModelDesc": "Controls the LLM used for lyrics/style enhancement. Auto-downloads if not present.",
+      "seed": "Repeatable Seed",
+      "seedPlaceholder": "Enter fixed seed",
+      "randomSeed": "Random every run (recommended)",
+      "fixedSeed": "Same seed = repeatable results",
+      "reasoning": "Reasoning Pass (CoT)",
+      "reasoningDesc": "Lets the lyric model reason about structure and metadata. Slightly slower.",
+      "shift": "Timestep Shift",
+      "shiftDesc": "Adjusts sampling schedule (base models only)"
+    },
+    "expert": {
+      "title": "Expert Controls",
+      "lyricModel": "Lyric Model Controls",
+      "lyricModelDesc": "Controls the LLM used for lyrics/captions",
+      "temperature": "Creativity (Temperature)",
+      "temperatureDesc": "Lower = more deterministic, higher = more variety (0–2)",
+      "cfg": "Prompt Adherence (CFG Scale)",
+      "cfgDesc": "Higher = follows prompt more, lower = more freedom (1–3)",
+      "topK": "Token Choice Limit (Top‑K)",
+      "topKDesc": "Sample only from the top K likely tokens",
+      "topP": "Probability Mass (Top‑P)",
+      "topPDesc": "Sample from smallest set totaling P probability",
+      "negativePrompt": "Avoid These (Negative Prompt)",
+      "negativePromptPlaceholder": "Things to avoid...",
+      "negativePromptDesc": "Works best when CFG is above 1.0",
+      "sourceAudio": "Source Audio",
+      "sourceAudioDesc": "Controls how much to follow the input audio.",
+      "audioCodes": "Audio Codes (Advanced)",
+      "audioCodesPlaceholder": "Optional audio codes payload",
+      "genMode": "Generation Mode",
+      "coverInfluence": "Cover Influence",
+      "coverInfluenceDesc": "How strongly the source audio shapes the result.",
+      "repaintStart": "Repaint Start (sec)",
+      "repaintStartDesc": "Start time for the region to repaint (seconds).",
+      "repaintEnd": "Repaint End (sec)",
+      "repaintEndDesc": "End time for the region to repaint (seconds).",
+      "extra": "Extra Instructions",
+      "extraDesc": "Additional directives to guide generation.",
+      "guidanceSchedule": "Guidance Schedule",
+      "guidanceScheduleDesc": "When to apply guidance during sampling.",
+      "guidanceStart": "Guidance Start (0–1)",
+      "guidanceStartDesc": "Fraction of the diffusion process to start applying guidance.",
+      "guidanceEnd": "Guidance End (0–1)",
+      "guidanceEndDesc": "Fraction of the diffusion process to stop applying guidance.",
+      "customTimesteps": "Custom Timesteps (Advanced)",
+      "scoreWeight": "Score Weight",
+      "chunkSize": "LM Batch Chunk Size (Performance)",
+      "trackName": "Track Name",
+      "trackClasses": "Complete Track Classes",
+      "adg": "Adaptive Dual Guidance (ADG)",
+      "allowLmBatch": "Allow LM Batch",
+      "useCotMetas": "Use CoT Metas",
+      "useCotCaption": "Use CoT Caption",
+      "useCotLanguage": "Use CoT Language",
+      "autogen": "Autogen",
+      "debug": "Constrained Decoding Debug",
+      "formatCaption": "Format Caption",
+      "getScores": "Get Scores",
+      "getLrc": "Get LRC (Lyrics)"
+    },
+    "modal": {
+      "refTitle": "Reference",
+      "coverTitle": "Cover",
+      "refDesc": "Create songs inspired by a reference track",
+      "coverDesc": "Transform an existing track into a new version",
+      "uploadBtn": "Upload audio",
+      "uploading": "Uploading...",
+      "transcribing": "Transcribing...",
+      "transcribingWhisper": "Transcribing with Whisper...",
+      "cancel": "Cancel",
+      "uploaded": "Uploaded",
+      "created": "Created",
+      "loading": "Loading tracks...",
+      "noUploads": "No uploads yet",
+      "noUploadsDesc": "Upload audio files to use them as references",
+      "noCreated": "No created songs yet",
+      "noCreatedDesc": "Generate songs to reuse them as cover or reference",
+      "use": "Use"
+    },
+    "button": {
+      "create": "Create",
+      "createJobs": "Create {{count}} Jobs ({{tracks}} tracks)",
+      "createVariations": "Create ({{count}} variations)"
+    }
+  },
+  "library": {
+    "title": "Your Library",
+    "playlists": "Playlists",
+    "likedSongs": "Liked Songs",
+    "uploads": "Uploads",
+    "newPlaylist": "New Playlist",
+    "tabs": {
+        "all": "All Songs",
+        "liked": "Liked Songs",
+        "playlists": "Playlists",
+        "uploads": "Uploads"
+    },
+    "empty": {
+        "songs": "No songs yet.",
+        "uploads": "No uploads yet."
+    },
+    "likedSongs": "Liked Songs"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": "Language",
+    "theme": "Theme"
+  },
+  "user": {
+    "welcome": "Welcome to ACE-Step UI",
+    "enterName": "Enter your name to get started creating AI music",
+    "yourName": "Your Name",
+    "placeholder": "Enter your name",
+    "getStarted": "Get Started",
+    "gettingStarted": "Getting Started...",
+    "footer": "Your music, your way. Create unlimited AI music for free.",
+    "notFound": "User not found",
+    "goBack": "Go Back",
+    "editProfile": "Edit Profile",
+    "songs": "Songs",
+    "likes": "Likes",
+    "plays": "Plays",
+    "featured": "Featured Songs",
+    "recent": "Recent",
+    "top": "Top",
+    "noSongs": "No public songs yet",
+    "playlists": "Playlists",
+    "seeMore": "See More",
+    "avatar": "Avatar Image",
+    "banner": "Banner Image",
+    "bio": "Bio",
+    "bioPlaceholder": "Tell us about yourself...",
+    "uploadingAvatar": "Uploading Avatar...",
+    "uploadingBanner": "Uploading Banner...",
+    "loading": "Loading profile..."
+  },
+  "search": {
+    "placeholder": "Search for songs, playlists, creators, or genres",
+    "featuredSongs": "Featured Songs",
+    "featuredCreators": "Featured Creators",
+    "featuredPlaylists": "Featured Playlists",
+    "matchingSongs": "Songs matching \"{{query}}\"",
+    "matchingCreators": "Creators matching \"{{query}}\"",
+    "matchingPlaylists": "Playlists matching \"{{query}}\"",
+    "genres": "Genres",
+    "noSongs": "No songs found matching \"{{query}}\"",
+    "noCreators": "No creators yet. Be the first to share your music!",
+    "noCreatorsMatch": "No creators found matching \"{{query}}\"",
+    "noPlaylists": "No public playlists yet. Create one and share your favorites!",
+    "noPlaylistsMatch": "No playlists found matching \"{{query}}\""
+  },
+  "song": {
+    "loading": "Loading song...",
+    "notFound": "Song not found",
+    "similar": "Similar",
+    "by": "By {{artist}}"
+  },
+  "video": {
+    "title": "Video Studio",
+    "subtitle": "Create professional visualizers.",
+    "presets": "Presets",
+    "style": "Style",
+    "text": "Text",
+    "fx": "FX",
+    "background": "Background",
+    "random": "Random",
+    "image": "Image",
+    "video": "Video",
+    "upload": "Upload",
+    "pexels": "Pexels",
+    "dimming": "Dimming",
+    "colors": "Color Presets",
+    "customColors": "Custom Colors",
+    "particles": "Particles",
+    "centerImage": "Center Image"
+  }
+}
diff --git a/locales/zh.json b/locales/zh.json
new file mode 100644
index 0000000..39ef77c
--- /dev/null
+++ b/locales/zh.json
@@ -0,0 +1,378 @@
+{
+  "sidebar": {
+    "create": "创作",
+    "library": "库",
+    "search": "搜索",
+    "settings": "设置",
+    "signOut": "退出登录",
+    "signIn": "登录",
+    "lightMode": "亮色模式",
+    "darkMode": "深色模式"
+  },
+  "workspace": {
+    "title": "工作区",
+    "my": "我的工作区"
+  },
+  "common": {
+    "viewList": "查看列表",
+    "createSong": "创作歌曲",
+    "generating": "生成中...",
+    "loading": "加载中...",
+    "confirmDelete": "确定要删除 \"{{title}}\" 吗？此操作无法撤销。",
+    "deleteSuccess": "删除成功",
+    "deleteFailed": "删除失败",
+    "close": "关闭",
+    "cancel": "取消",
+    "confirm": "确认",
+    "save": "保存",
+    "saving": "保存中...",
+    "searchPlaceholder": "搜索你的歌曲...",
+    "filters": "筛选",
+    "refineBy": "筛选条件",
+    "select": "选择",
+    "selectAll": "全选",
+    "clearAll": "清空",
+    "delete": "删除",
+    "selected": "已选 {{count}} 项",
+    "untitled": "未命名",
+    "unknown": "未知",
+    "unknownArtist": "未知艺术家",
+    "upload": "上传",
+    "playlist": "播放列表",
+    "songCount": "{{count}} 首歌曲",
+    "byYou": "由你创建",
+    "none": "无",
+    "anonymous": "匿名",
+    "back": "返回"
+  },
+  "filters": {
+    "liked": "已赞",
+    "public": "公开",
+    "private": "私有",
+    "generating": "生成中"
+  },
+  "songList": {
+    "empty": {
+      "title": "没有匹配的歌曲。",
+      "clearFilters": "清除筛选"
+    }
+  },
+  "status": {
+    "queued": "排队中...",
+    "creating": "创作中...",
+    "queuePos": "排队 #{{n}}"
+  },
+  "actions": {
+    "share": "分享",
+    "createVideo": "创建视频",
+    "addToPlaylist": "添加到播放列表",
+    "songDetails": "歌曲详情",
+    "editAudio": "编辑音频",
+    "extractStems": "提取分轨",
+    "reusePrompt": "复用提示词",
+    "useAsReference": "用作参考",
+    "coverSong": "翻唱歌曲",
+    "download": "下载",
+    "downloadAudio": "下载音频",
+    "deleteSong": "删除歌曲",
+    "deleteUpload": "删除上传",
+    "openInEditor": "在编辑器中打开",
+    "rename": "重命名歌曲",
+    "copy": "复制",
+    "copied": "已复制！",
+    "edit": "编辑",
+    "editProfile": "编辑资料",
+    "uploadAvatar": "上传头像",
+    "uploadBanner": "上传封面",
+    "saveChanges": "保存更改"
+  },
+  "player": {
+    "selectSong": "选择一首歌曲开始播放",
+    "nowPlaying": "正在播放"
+  },
+  "rightSidebar": {
+    "title": "歌曲详情",
+    "selectToView": "选择一首歌曲以查看详情",
+    "sources": "来源",
+    "reference": "参考",
+    "cover": "翻唱",
+    "play": "播放",
+    "styleAndTags": "风格与标签",
+    "more": "+更多",
+    "lyrics": "歌词",
+    "instrumental": "纯音乐",
+    "noLyrics": "未生成歌词",
+    "created": "创建于 {{date}}"
+  },
+  "playlist": {
+    "createTitle": "创建播放列表",
+    "addTitle": "添加到播放列表",
+    "name": "名称",
+    "description": "描述",
+    "namePlaceholder": "我的精选集",
+    "descPlaceholder": "适合编程时听...",
+    "createBtn": "创建",
+    "createNew": "新建播放列表",
+    "noPlaylists": "暂无播放列表。",
+    "songs": "{{count}} 首歌曲",
+    "notFound": "找不到播放列表",
+    "public": "公开",
+    "private": "私有",
+    "deleteConfirm": "确定要删除这个播放列表吗？",
+    "loading": "加载播放列表中...",
+    "table": {
+      "title": "标题",
+      "artist": "艺术家",
+      "dateAdded": "添加日期",
+      "justNow": "刚刚"
+    }
+  },
+  "create": {
+    "mode": {
+      "simple": "简单模式",
+      "custom": "自定义模式"
+    },
+    "simple": {
+      "describeTitle": "描述你的歌曲",
+      "describePlaceholder": "一首关于夏日冒险和朋友的欢快流行歌...",
+      "variationsDesc": "生成的变体数量"
+    },
+    "custom": {
+      "audio": {
+        "title": "音频",
+        "reference": "参考",
+        "cover": "翻唱",
+        "dropUse": "拖放以使用音频",
+        "dropUpload": "拖放以上传",
+        "usingRef": "用作参考",
+        "usingCover": "用作翻唱",
+        "library": "库",
+        "upload": "上传"
+      },
+      "lyrics": {
+        "title": "歌词",
+        "subtitle": "留空用于纯音乐或在下方切换",
+        "instrumental": "纯音乐",
+        "vocal": "人声",
+        "placeholder": "[Verse]\n在这里输入歌词...\n\n[Chorus]\n副歌部分..."
+      },
+      "style": {
+        "title": "音乐风格",
+        "subtitle": "流派，情绪，乐器，氛围",
+        "placeholder": "例如：欢快的流行摇滚，伤感的情歌，90年代嘻哈"
+      },
+      "titleInput": {
+        "title": "标题",
+        "placeholder": "为你的歌曲命名"
+      }
+    },
+    "common": {
+      "vocalLanguage": "人声语言",
+      "vocalGender": "人声性别",
+      "male": "男声",
+      "female": "女声",
+      "musicParams": "音乐参数",
+      "bpm": "BPM (速度)",
+      "key": "调性",
+      "time": "拍号",
+      "auto": "自动",
+      "variations": "变体"
+    },
+    "advanced": {
+      "title": "高级设置",
+      "duration": "时长",
+      "variations": "单次作业变体数",
+      "variationsDesc": "一次运行创建多少个版本",
+      "bulk": "批量生成",
+      "job": "个任务",
+      "jobs": "个任务",
+      "bulkDesc": "队列多个具有相同设置的独立生成任务",
+      "quality": "质量步数 (Steps)",
+      "qualityDesc": "越高=质量越好但越慢 (推荐8用于turbo)",
+      "promptStrength": "提示词强度 (Guidance)",
+      "promptStrengthDesc": "越高=更严格遵循提示，越低=更多变化",
+      "audioFormat": "音频格式",
+      "mp3": "MP3 (较小)",
+      "flac": "FLAC (无损)",
+      "sampler": "采样器",
+      "deterministic": "确定性 (ODE)",
+      "stochastic": "随机性 (SDE)",
+      "lmBackend": "LM 后端",
+      "ptDesc": "PT 使用显存较少，VLLM 在强力 GPU 上可能更快",
+      "lmModel": "LM 模型",
+      "lmModelDesc": "控制用于歌词/风格增强的 LLM。如果不存在会自动下载。",
+      "seed": "可重复种子",
+      "seedPlaceholder": "输入固定种子",
+      "randomSeed": "每次随机 (推荐)",
+      "fixedSeed": "相同种子 = 可重复结果",
+      "reasoning": "推理阶段 (CoT)",
+      "reasoningDesc": "让歌词模型推理结构和元数据。稍慢。",
+      "shift": "时间步偏移 (Shift)",
+      "shiftDesc": "调整采样计划 (仅基础模型)"
+    },
+    "expert": {
+      "title": "专家控制",
+      "lyricModel": "歌词模型控制",
+      "lyricModelDesc": "控制用于歌词/字幕的 LLM",
+      "temperature": "创造力 (Temperature)",
+      "temperatureDesc": "越低=更确定，越高=更多样 (0–2)",
+      "cfg": "提示词遵循度 (CFG Scale)",
+      "cfgDesc": "越高=更遵循提示，越低=更自由 (1–3)",
+      "topK": "Token 选择限制 (Top‑K)",
+      "topKDesc": "仅从前 K 个可能的 Token 中采样",
+      "topP": "概率质量 (Top‑P)",
+      "topPDesc": "从总概率为 P 的最小集合中采样",
+      "negativePrompt": "反向提示词 (Negative Prompt)",
+      "negativePromptPlaceholder": "想要避免的内容...",
+      "negativePromptDesc": "当 CFG 大于 1.0 时效果最好",
+      "sourceAudio": "源音频",
+      "sourceAudioDesc": "控制结果跟随输入音频的程度。",
+      "audioCodes": "音频代码 (高级)",
+      "audioCodesPlaceholder": "可选的音频代码载荷",
+      "genMode": "生成模式",
+      "coverInfluence": "翻唱影响度",
+      "coverInfluenceDesc": "源音频对结果的影响程度。",
+      "repaintStart": "重绘开始 (秒)",
+      "repaintStartDesc": "重绘区域的开始时间。",
+      "repaintEnd": "重绘结束 (秒)",
+      "repaintEndDesc": "重绘区域的结束时间。",
+      "extra": "额外指令",
+      "extraDesc": "指导生成的附加指令。",
+      "guidanceSchedule": "引导计划",
+      "guidanceScheduleDesc": "采样期间何时应用引导。",
+      "guidanceStart": "引导开始 (0–1)",
+      "guidanceStartDesc": "开始应用引导的扩散过程比例。",
+      "guidanceEnd": "引导结束 (0–1)",
+      "guidanceEndDesc": "停止应用引导的扩散过程比例。",
+      "customTimesteps": "自定义时间步 (高级)",
+      "scoreWeight": "分数权重",
+      "chunkSize": "LM 批处理块大小 (性能)",
+      "trackName": "轨道名称",
+      "trackClasses": "完整轨道类别",
+      "adg": "自适应双重引导 (ADG)",
+      "allowLmBatch": "允许 LM 批处理",
+      "useCotMetas": "使用 CoT 元数据",
+      "useCotCaption": "使用 CoT 描述",
+      "useCotLanguage": "使用 CoT 语言",
+      "autogen": "自动生成",
+      "debug": "受限解码调试",
+      "formatCaption": "格式化描述",
+      "getScores": "获取分数",
+      "getLrc": "获取 LRC (歌词)"
+    },
+    "modal": {
+      "refTitle": "参考",
+      "coverTitle": "翻唱",
+      "refDesc": "创作受参考音轨启发的歌曲",
+      "coverDesc": "将现有音轨转换为新版本",
+      "uploadBtn": "上传音频",
+      "uploading": "上传中...",
+      "transcribing": "转录中...",
+      "transcribingWhisper": "使用 Whisper 转录中...",
+      "cancel": "取消",
+      "uploaded": "已上传",
+      "created": "已创建",
+      "loading": "加载音轨中...",
+      "noUploads": "暂无上传",
+      "noUploadsDesc": "上传音频文件以将其用作参考",
+      "noCreated": "暂无已创建歌曲",
+      "noCreatedDesc": "生成歌曲以将其重复用作翻唱或参考",
+      "use": "使用"
+    },
+    "button": {
+      "create": "创作",
+      "createJobs": "创建 {{count}} 个任务 ({{tracks}} 首)",
+      "createVariations": "创建 ({{count}} 个变体)"
+    }
+  },
+  "library": {
+    "title": "我的库",
+    "playlists": "播放列表",
+    "likedSongs": "喜欢的歌曲",
+    "uploads": "上传内容",
+    "newPlaylist": "新建播放列表",
+    "tabs": {
+      "all": "所有歌曲",
+      "liked": "喜欢的歌曲",
+      "playlists": "播放列表",
+      "uploads": "上传内容"
+    },
+    "empty": {
+      "songs": "暂无歌曲",
+      "uploads": "暂无上传"
+    }
+  },
+  "settings": {
+    "title": "设置",
+    "language": "语言",
+    "theme": "主题"
+  },
+  "user": {
+    "welcome": "欢迎使用 ACE-Step UI",
+    "enterName": "输入你的名字，开始创作 AI 音乐",
+    "yourName": "你的名字",
+    "placeholder": "输入名字",
+    "getStarted": "开始使用",
+    "gettingStarted": "正在启动...",
+    "footer": "你的音乐，由你做主。免费创作无限 AI 音乐。",
+    "notFound": "找不到用户",
+    "goBack": "返回",
+    "editProfile": "编辑资料",
+    "songs": "歌曲",
+    "likes": "获赞",
+    "plays": "播放",
+    "featured": "精选歌曲",
+    "recent": "最新",
+    "top": "热门",
+    "noSongs": "暂无公开歌曲",
+    "playlists": "播放列表",
+    "seeMore": "查看更多",
+    "avatar": "头像图片",
+    "banner": "封面图片",
+    "bio": "简介",
+    "bioPlaceholder": "介绍一下你自己...",
+    "uploadingAvatar": "上传头像中...",
+    "uploadingBanner": "上传封面中...",
+    "loading": "加载资料中..."
+  },
+  "search": {
+    "placeholder": "搜索歌曲、播放列表、创作者或流派",
+    "featuredSongs": "精选歌曲",
+    "featuredCreators": "精选创作者",
+    "featuredPlaylists": "精选播放列表",
+    "matchingSongs": "匹配 \"{{query}}\" 的歌曲",
+    "matchingCreators": "匹配 \"{{query}}\" 的创作者",
+    "matchingPlaylists": "匹配 \"{{query}}\" 的播放列表",
+    "genres": "流派",
+    "noSongs": "未找到匹配 \"{{query}}\" 的歌曲",
+    "noCreators": "暂无创作者。快来成为第一个分享音乐的人吧！",
+    "noCreatorsMatch": "未找到匹配 \"{{query}}\" 的创作者",
+    "noPlaylists": "暂无公开播放列表。创建一个并分享你的收藏！",
+    "noPlaylistsMatch": "未找到匹配 \"{{query}}\" 的播放列表"
+  },
+  "song": {
+    "loading": "加载歌曲中...",
+    "notFound": "找不到歌曲",
+    "similar": "相似推荐",
+    "by": "由 {{artist}}"
+  },
+  "video": {
+    "title": "视频工作室",
+    "subtitle": "创建专业的可视化效果。",
+    "presets": "预设",
+    "style": "风格",
+    "text": "文字",
+    "fx": "特效",
+    "background": "背景",
+    "random": "随机",
+    "image": "图片",
+    "video": "视频",
+    "upload": "上传",
+    "pexels": "Pexels",
+    "dimming": "暗度",
+    "colors": "颜色预设",
+    "customColors": "自定义颜色",
+    "particles": "粒子",
+    "centerImage": "中心图片"
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 02ddbbc..17fb4a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,12 @@
         "@ffmpeg/ffmpeg": "^0.12.15",
         "@ffmpeg/util": "^0.12.2",
         "@google/genai": "^1.38.0",
+        "i18next": "^25.8.4",
+        "i18next-browser-languagedetector": "^8.2.0",
         "lucide-react": "^0.563.0",
         "react": "^19.2.4",
-        "react-dom": "^19.2.4"
+        "react-dom": "^19.2.4",
+        "react-i18next": "^16.5.4"
       },
       "devDependencies": {
         "@types/node": "^22.14.0",
@@ -256,6 +259,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1861,6 +1873,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
@@ -1874,6 +1895,46 @@
         "node": ">= 14"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.8.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.4.tgz",
+      "integrity": "sha512-a9A0MnUjKvzjEN/26ZY1okpra9kA8MEwzYEz1BNm+IyxUKPRH6ihf0p7vj8YvULwZHKHl3zkJ6KOt4hewxBecQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2217,6 +2278,33 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.5.4",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.5.4.tgz",
+      "integrity": "sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -2483,7 +2571,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -2530,6 +2618,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
@@ -2605,6 +2702,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 59fee44..6aaa088 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,12 @@
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "@google/genai": "^1.38.0",
+    "i18next": "^25.8.4",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lucide-react": "^0.563.0",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "react-i18next": "^16.5.4"
   },
   "devDependencies": {
     "@types/node": "^22.14.0",