feat: complete UI overhaul (liquid glass theme, i18n, FontAwesome)

package-lock.json

@@ -8,8 +8,11 @@
       "name": "melodymuse",
       "version": "0.2.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.2.0",
+        "@fortawesome/free-brands-svg-icons": "^7.2.0",
+        "@fortawesome/free-solid-svg-icons": "^7.2.0",
+        "@fortawesome/react-fontawesome": "^3.3.1",
         "jszip": "^3.10.1",
-        "lucide-react": "^0.451.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.2"
@@ -711,6 +714,64 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
+      "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
+      "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-VNG8xqOip1JuJcC3zsVsKRQ60oXG9+oYNDCosjoU/H9pgYmLTEwWw8pE0jhPz/JWdHeUuK6+NQ3qsM4gIbdbYQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
+      "integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.3.1.tgz",
+      "integrity": "sha512-wGnAPhfzivDwBWYmEG8MSrEXPruoiMMo48NnsRkj1NZkoaawgOijPNAiSHKMYEoCsqTBSgLTzL6EqTTWGaUR4w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1966,15 +2027,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.451.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.451.0.tgz",
-      "integrity": "sha512-OwQ3uljZLp2cerj8sboy5rnhtGTCl9UCJIhT1J85/yOuGVlEH+xaUPR7tvNdddPvmV5M5VLdr7cQuWE3hzA4jw==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

package.json

@@ -13,8 +13,11 @@
     "lint": "tsc -b --noEmit"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
     "jszip": "^3.10.1",
-    "lucide-react": "^0.451.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2"

server.mjs

@@ -179,10 +179,14 @@ async function callProvider(messages, opts = {}, signal) {
   }
 
   const data = await resp.json();
-  const content = data.choices?.[0]?.message?.content;
+  let content = data.choices?.[0]?.message?.content;
   if (typeof content !== 'string' || !content.trim()) {
     throw new Error('Provider response did not include a message');
   }
+
+  // Strip <think> blocks generated by reasoning models (like MiniMax-M3 or DeepSeek-R1)
+  content = content.replace(/<think>[\s\S]*?<\/think>\s*/gi, '').trim();
+
   return content;
 }
 

src/App.tsx

@@ -2,9 +2,13 @@ import { Route, Routes } from 'react-router-dom';
 import { HomePage } from './pages/HomePage';
 import { SettingsPage } from './pages/SettingsPage';
 import { ToastProvider } from './lib/toast';
+import { I18nProvider } from './lib/i18n';
+import { ThemeProvider } from './lib/theme';
 
 export default function App() {
   return (
+    <ThemeProvider>
+      <I18nProvider>
         <ToastProvider>
           <Routes>
             <Route path="/" element={<HomePage />} />
@@ -12,5 +16,7 @@ export default function App() {
             <Route path="*" element={<HomePage />} />
           </Routes>
         </ToastProvider>
+      </I18nProvider>
+    </ThemeProvider>
   );
 }

src/components/CopyButton.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Check, Copy } from 'lucide-react';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 
 interface CopyButtonProps {
   value: string;
@@ -41,12 +42,12 @@ export function CopyButton({ value, label = 'Copy', className = '' }: CopyButton
     >
       {copied ? (
         <>
-          <Check className="w-4 h-4 text-emerald-400" />
+          <FontAwesomeIcon icon={faCheck} className="w-4 h-4 text-emerald-400" />
           <span>Copied!</span>
         </>
       ) : (
         <>
-          <Copy className="w-4 h-4" />
+          <FontAwesomeIcon icon={faCopy} className="w-4 h-4" />
           <span>{label}</span>
         </>
       )}

src/components/Footer.tsx

@@ -1,14 +1,13 @@
+import { useI18n } from "../lib/i18n";
+
 export function Footer() {
+  const { t } = useI18n();
   return (
-    <footer className="mt-16 border-t border-border">
+    <footer className="mt-8 border-t border-border pt-4">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-fg-muted">
+      <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] font-semibold text-fg-muted uppercase tracking-wide">
         <p>
-          <span className="gradient-text font-semibold">MelodyMuse</span> ·
+          <span className="gradient-text">MelodyMuse</span> ·
-          Generate Suno song assets with AI
+          {t.appSubtitle}
-        </p>
-        <p>
-          Generation runs on the MelodyMuse server — your API key never reaches
-          the browser.
         </p>
       </div>
     </footer>

src/components/HistoryPanel.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { Clock, History, Trash2, X } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClock, faHistory, faTrashAlt, faTimes } from "@fortawesome/free-solid-svg-icons";
 import {
   clearHistory,
   formatRelative,
@@ -9,89 +10,73 @@ import {
   type HistoryEntry,
 } from "../lib/history";
 import type { InputValues } from "../lib/types";
+import { useI18n } from "../lib/i18n";
 
 interface HistoryPanelProps {
   onLoad: (entry: HistoryEntry) => void;
 }
 
 export function HistoryPanel({ onLoad }: HistoryPanelProps) {
-  const [open, setOpen] = useState(false);
   const [entries, setEntries] = useState<HistoryEntry[]>([]);
+  const { t } = useI18n();
 
-  // Refresh the list whenever the panel is opened.
   useEffect(() => {
-    if (!open) return;
     setEntries(loadHistory());
-  }, [open]);
+  }, []);
 
-  // And whenever the history is updated from elsewhere in the app (after a
-  // successful generation, or a delete/clear from a different panel).
   useEffect(() => {
     const handler = () => {
-      if (!open) return;
       setEntries(loadHistory());
     };
     window.addEventListener(HISTORY_UPDATED_EVENT, handler);
     return () => window.removeEventListener(HISTORY_UPDATED_EVENT, handler);
-  }, [open]);
+  }, []);
-
-  if (entries.length === 0 && !open) {
-    return null;
-  }
 
   return (
-    <div className="mt-4">
+    <div className="flex flex-col h-full bg-bg-card/40 backdrop-blur-md border border-border rounded-xl shadow-lg overflow-hidden">
-      <button
+      <div className="px-4 py-3 border-b border-border bg-bg/20">
-        type="button"
+        <span className="flex items-center gap-2 text-sm font-bold text-fg">
-        onClick={() => setOpen((v) => !v)}
+          <FontAwesomeIcon icon={faHistory} className="text-accent-secondary" />
-        className="w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-border bg-bg-card/50 hover:bg-bg-hover transition-colors text-sm"
+          {t.history}
-        aria-expanded={open}
-      >
-        <span className="flex items-center gap-2 text-fg">
-          <History className="w-4 h-4" />
-          Recent generations
           {entries.length > 0 && (
-            <span className="text-xs text-fg-muted">({entries.length})</span>
+            <span className="text-[10px] bg-accent-primary/20 text-accent-primary px-1.5 py-0.5 rounded-full">
+              {entries.length}
+            </span>
           )}
         </span>
-        <span className="text-xs text-fg-muted">{open ? "Hide" : "Show"}</span>
+      </div>
-      </button>
 
-      {open && (
+      <div className="flex-1 overflow-y-auto scrollbar-thin p-2 space-y-1">
-        <div className="mt-2 rounded-lg border border-border bg-bg-card/30 divide-y divide-border">
         {entries.length === 0 ? (
-            <p className="px-3 py-4 text-xs text-fg-muted text-center">
+          <p className="px-3 py-6 text-xs text-fg-muted text-center italic">
-              No recent generations yet.
+            {t.noHistory}
           </p>
         ) : (
-            <>
+          entries.map((e) => (
-              {entries.map((e) => (
             <HistoryRow
               key={e.id}
               entry={e}
-                  onLoad={() => {
+              onLoad={() => onLoad(e)}
-                    onLoad(e);
-                    setOpen(false);
-                  }}
               onRemove={() => setEntries(removeFromHistory(e.id))}
             />
-              ))}
+          ))
-              <div className="px-3 py-2 flex justify-end">
+        )}
+      </div>
+
+      {entries.length > 0 && (
+        <div className="p-2 border-t border-border bg-bg/20">
           <button
             type="button"
             onClick={() => {
               clearHistory();
               setEntries([]);
             }}
-                  className="inline-flex items-center gap-1 text-xs text-fg-muted hover:text-rose-300 transition-colors"
+            className="w-full inline-flex items-center justify-center gap-2 text-xs font-semibold text-fg-muted hover:text-rose-400 hover:bg-rose-400/10 transition-colors py-2 rounded-lg"
           >
-                  <Trash2 className="w-3.5 h-3.5" />
+            <FontAwesomeIcon icon={faTrashAlt} />
-                  Clear all
+            {t.history === 'History' ? 'Clear history' : 'Verlauf löschen'}
           </button>
         </div>
-            </>
-          )}
-        </div>
       )}
     </div>
   );
@@ -108,31 +93,27 @@ function HistoryRow({
 }) {
   const summary = summarizeInput(entry.input);
   return (
-    <div className="px-3 py-2 flex items-center justify-between gap-2 text-sm hover:bg-bg-hover/40 transition-colors">
+    <div className="group px-3 py-2.5 flex items-center justify-between gap-2 text-sm hover:bg-bg-hover/80 rounded-lg transition-colors cursor-pointer" onClick={onLoad}>
-      <button
+      <div className="flex-1 min-w-0">
-        type="button"
+        <div className="truncate text-fg font-medium text-[13px]">{summary}</div>
-        onClick={onLoad}
+        <div className="flex items-center gap-1.5 text-[10px] text-fg-muted mt-1 uppercase tracking-wider font-semibold">
-        className="flex-1 text-left min-w-0"
+          <FontAwesomeIcon icon={faClock} />
-      >
-        <div className="truncate text-fg">{summary}</div>
-        <div className="flex items-center gap-2 text-[11px] text-fg-muted mt-0.5">
-          <Clock className="w-3 h-3" />
           <span>{formatRelative(entry.timestamp)}</span>
           {entry.input.mood && (
             <>
-              <span>·</span>
+              <span className="opacity-50">·</span>
               <span className="truncate">{entry.input.mood}</span>
             </>
           )}
         </div>
-      </button>
+      </div>
       <button
         type="button"
-        onClick={onRemove}
+        onClick={(e) => { e.stopPropagation(); onRemove(); }}
-        className="text-fg-muted hover:text-rose-300 transition-colors p-1"
+        className="opacity-0 group-hover:opacity-100 text-fg-muted hover:text-rose-400 transition-all p-1.5 rounded-md hover:bg-rose-400/10"
         aria-label="Remove from history"
       >
-        <X className="w-3.5 h-3.5" />
+        <FontAwesomeIcon icon={faTimes} />
       </button>
     </div>
   );
@@ -140,7 +121,7 @@ function HistoryRow({
 
 function summarizeInput(v: InputValues): string {
   const idea = v.idea.trim();
-  const max = 90;
+  const max = 60;
   if (idea.length <= max) return idea || "(no idea text)";
   return idea.slice(0, max - 1) + "…";
 }

src/components/InputPanel.tsx

@@ -1,18 +1,19 @@
 import { useState, type FormEvent, type KeyboardEvent } from "react";
 import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  ChevronRight,
+  faCircleNotch,
-  Loader2,
+  faWandMagicSparkles,
-  Settings as SettingsIcon,
+  faShuffle,
-  Sparkles,
+  faFire,
-  Shuffle,
+  faMicrophone,
-  Flame,
+  faMusic,
-  Wand2,
+} from "@fortawesome/free-solid-svg-icons";
-} from "lucide-react";
 import type { InputValues, Language, Vocals } from "../lib/types";
 import { formatElapsed, useElapsed } from "../lib/useElapsed";
 import { randomStyle } from "../lib/llm";
 import { useToast } from "../lib/toast";
+import { useI18n } from "../lib/i18n";
 
 export type { InputValues };
 
@@ -67,12 +68,10 @@ export function InputPanel({
   disabled,
   cancelButton,
 }: InputPanelProps) {
-  const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(
+  const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(null);
-    null,
-  );
-  const [optionsOpen, setOptionsOpen] = useState(false);
   const elapsed = useElapsed(loading);
   const toast = useToast();
+  const { t } = useI18n();
 
   const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) =>
     onChange({ ...values, [key]: value });
@@ -84,7 +83,7 @@ export function InputPanel({
     if (canSubmit) onSubmit();
   };
 
-  const onCmdEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+  const onCmdEnter = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
       submit();
@@ -121,79 +120,73 @@ export function InputPanel({
   };
 
   return (
-    <form onSubmit={submit} className="space-y-6">
+    <form onSubmit={submit} className="card p-4 space-y-4 backdrop-blur-md bg-bg-card/80">
-      {/* Main textarea */}
+      {/* Top Row: Idea and Generate Button */}
-      <div>
+      <div className="flex flex-col md:flex-row gap-4">
-        <div className="flex items-center justify-between mb-2">
+        <div className="flex-1">
+          <div className="flex items-center justify-between mb-1">
             <label
               htmlFor="idea"
-            className="text-[11px] font-medium uppercase tracking-wider text-fg-muted"
+              className="text-xs font-semibold uppercase tracking-wider text-fg-muted"
             >
-            Music idea
+              {t.musicIdea}
             </label>
             <button
               type="button"
               onClick={fillExample}
-            className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
+              className="inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-accent-primary transition-colors"
               title="Fill the input with a random example"
             >
-            <Shuffle className="w-3 h-3" />
+              <FontAwesomeIcon icon={faShuffle} className="w-3 h-3" />
-            Try an example
+              {t.tryExample}
             </button>
           </div>
-        <textarea
+          <input
             id="idea"
+            type="text"
             value={values.idea}
             onChange={(e) => set("idea", e.target.value)}
             onKeyDown={onCmdEnter}
-          rows={5}
+            placeholder={t.placeholderIdea}
-          placeholder="Describe your music idea…"
+            className="input text-[15px]"
-          className="textarea text-[15px] leading-relaxed"
             required
           />
-        <p className="mt-1.5 text-[11px] text-fg-muted">
-          <kbd className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
-            {isMac() ? "⌘" : "Ctrl"}+Enter
-          </kbd>{" "}
-          to generate
-        </p>
         </div>
 
-      {/* Options — collapsible, subtle */}
+        <div className="flex items-end gap-2 shrink-0">
-      <div className="rounded-xl border border-border bg-bg-card/30">
           <button
-          type="button"
+            type="submit"
-          onClick={() => setOptionsOpen((v) => !v)}
+            disabled={!canSubmit}
-          className="w-full flex items-center justify-between gap-2 px-4 py-3 text-sm font-medium text-fg-muted hover:text-fg transition-colors"
+            className="h-[42px] px-6 rounded-lg text-sm font-bold text-white shadow-md shadow-accent-primary/20 transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
-          aria-expanded={optionsOpen}
           >
-          <span className="flex items-center gap-2">
+            {loading ? (
-            <ChevronRight
+              <>
-              className={`w-3.5 h-3.5 transition-transform ${optionsOpen ? "rotate-90" : ""}`}
+                <FontAwesomeIcon icon={faCircleNotch} spin className="w-4 h-4" />
-            />
+                {t.generating} {formatElapsed(elapsed)}
-            Options
+              </>
-          </span>
+            ) : (
-          <span className="text-[11px] text-fg-muted">
+              <>
-            {summaryCount(values) > 0
+                <FontAwesomeIcon icon={faWandMagicSparkles} className="w-4 h-4" />
-              ? summaryCount(values) + " set"
+                {t.generateAssets}
-              : "defaults"}
+              </>
-          </span>
+            )}
           </button>
+          {loading && cancelButton}
+        </div>
+      </div>
 
-        {optionsOpen && (
+      {/* Bottom Row: Options (Always Visible) */}
-          <div className="px-4 pb-4 pt-1 space-y-4 border-t border-border">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t border-border">
+        {/* Language */}
         <div>
-              <label
+          <label htmlFor="language" className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
-                htmlFor="language"
+            {t.language}
-                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
-              >
-                Language
           </label>
           <select
             id="language"
             value={values.language}
             onChange={(e) => set("language", e.target.value as Language)}
-                className="input"
+            className="input h-[38px] py-0"
           >
             {LANGUAGES.map((l) => (
               <option key={l.value} value={l.value}>
@@ -204,190 +197,97 @@ export function InputPanel({
           {values.language === "Other" && (
             <input
               type="text"
-                  className="input mt-2"
+              className="input mt-2 h-[38px]"
-                  placeholder="e.g. 日本語, Türkçe, Русский"
+              placeholder="e.g. 日本語"
               value={values.customLanguage}
               onChange={(e) => set("customLanguage", e.target.value)}
             />
           )}
         </div>
 
-            <StyleField
+        {/* Style */}
-              value={values.style_hint}
+        <div className="md:col-span-2">
-              loading={styleLoading}
+          <label htmlFor="style_hint" className="flex items-center justify-between text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
-              onChange={(v) => set("style_hint", v)}
+            <span>{t.musicStyle} <span className="normal-case opacity-70 font-normal">{t.optional}</span></span>
-              onRandom={handleStyleRandom}
+            <div className="flex gap-2">
-              onCmdEnter={onCmdEnter}
+              <button
-            />
+                type="button"
-
+                onClick={() => handleStyleRandom("normal")}
-            <div>
+                disabled={styleLoading !== null}
-              <label
+                className="text-[10px] text-accent-secondary hover:text-accent-primary transition-colors disabled:opacity-50"
-                htmlFor="mood"
-                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
               >
-                Mood{" "}
+                {styleLoading === "normal" ? <FontAwesomeIcon icon={faCircleNotch} spin /> : <FontAwesomeIcon icon={faWandMagicSparkles} />} {t.surpriseMe}
-                <span className="text-fg-muted/70 normal-case font-normal">
+              </button>
-                  (optional)
+              <button
-                </span>
+                type="button"
+                onClick={() => handleStyleRandom("crazy")}
+                disabled={styleLoading !== null}
+                className="text-[10px] text-rose-400 hover:text-rose-300 transition-colors disabled:opacity-50"
+              >
+                {styleLoading === "crazy" ? <FontAwesomeIcon icon={faCircleNotch} spin /> : <FontAwesomeIcon icon={faFire} />} {t.goCrazy}
+              </button>
+            </div>
+          </label>
+          <input
+            id="style_hint"
+            type="text"
+            placeholder={t.placeholderStyle}
+            value={values.style_hint}
+            onChange={(e) => set("style_hint", e.target.value)}
+            onKeyDown={onCmdEnter}
+            className="input h-[38px]"
+          />
+        </div>
+
+        {/* Mood & Vocals */}
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <label htmlFor="mood" className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
+              {t.mood} <span className="normal-case opacity-70 font-normal">{t.optional}</span>
             </label>
             <input
               id="mood"
               type="text"
-                placeholder="e.g. melancholic, euphoric, tense…"
+              placeholder={t.placeholderMood}
               value={values.mood}
               onChange={(e) => set("mood", e.target.value)}
-                className="input"
+              className="input h-[38px]"
             />
           </div>
 
-            <div>
+          <div className="shrink-0">
-              <span className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5">
+            <label className="block text-xs font-semibold uppercase tracking-wider text-fg-muted mb-1.5">
-                Vocals
+              {t.vocals}
-              </span>
+            </label>
-              <div className="inline-flex rounded-lg border border-border bg-bg-card p-0.5">
+            <div className="inline-flex rounded-lg border border-border bg-bg h-[38px] p-0.5">
               <button
                 type="button"
                 onClick={() => set("vocals", "vocals")}
-                  className={
+                className={`px-3 flex items-center gap-1.5 rounded-md text-xs font-bold transition-colors ${
-                    values.vocals === "vocals"
+                  values.vocals === "vocals" ? "bg-accent-primary text-white" : "text-fg-muted hover:text-fg"
-                      ? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
+                }`}
-                      : "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
+                title={t.vocalsOption}
-                  }
-                  aria-pressed={values.vocals === "vocals"}
               >
-                  🎤 Vocals
+                <FontAwesomeIcon icon={faMicrophone} />
               </button>
               <button
                 type="button"
                 onClick={() => set("vocals", "instrumental")}
-                  className={
+                className={`px-3 flex items-center gap-1.5 rounded-md text-xs font-bold transition-colors ${
-                    values.vocals === "instrumental"
+                  values.vocals === "instrumental" ? "bg-accent-primary text-white" : "text-fg-muted hover:text-fg"
-                      ? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
+                }`}
-                      : "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
+                title={t.instrumentalOption}
-                  }
-                  aria-pressed={values.vocals === "instrumental"}
               >
-                  🎹 Instrumental
+                <FontAwesomeIcon icon={faMusic} />
               </button>
             </div>
           </div>
         </div>
-        )}
-      </div>
-
-      {/* Generate */}
-      <div className="space-y-2">
-        <button
-          type="submit"
-          disabled={!canSubmit}
-          className="w-full py-3.5 rounded-xl text-sm font-semibold text-white shadow-lg shadow-violet-900/20 transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
-        >
-          {loading ? (
-            <>
-              <Loader2 className="w-4 h-4 animate-spin" />
-              Generating… {formatElapsed(elapsed)}
-            </>
-          ) : (
-            <>
-              <Sparkles className="w-4 h-4" />
-              Generate song assets
-            </>
-          )}
-        </button>
-        {loading && cancelButton}
-      </div>
-
-      <div className="flex items-center justify-between text-xs">
-        <Link
-          to="/settings"
-          className="inline-flex items-center gap-1.5 text-fg-muted hover:text-fg transition-colors"
-        >
-          <SettingsIcon className="w-3.5 h-3.5" />
-          Settings
-        </Link>
       </div>
     </form>
   );
 }
 
-function summaryCount(v: InputValues): number {
-  let n = 0;
-  if (v.style_hint.trim()) n++;
-  if (v.mood.trim()) n++;
-  if (v.vocals === "instrumental") n++;
-  if (v.language !== "English") n++;
-  return n;
-}
-
-interface StyleFieldProps {
-  value: string;
-  loading: null | "normal" | "crazy";
-  onChange: (v: string) => void;
-  onRandom: (mode: "normal" | "crazy") => void;
-  onCmdEnter: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
-}
-
-function StyleField({
-  value,
-  loading,
-  onChange,
-  onRandom,
-  onCmdEnter,
-}: StyleFieldProps) {
-  return (
-    <div>
-      <label
-        htmlFor="style_hint"
-        className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
-      >
-        Music style{" "}
-        <span className="text-fg-muted/70 normal-case font-normal">
-          (optional)
-        </span>
-      </label>
-      <textarea
-        id="style_hint"
-        rows={2}
-        placeholder="e.g. dark synthwave, analog pads, 110 BPM"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={onCmdEnter}
-        className="textarea text-sm"
-      />
-      <div className="mt-2 grid grid-cols-2 gap-2">
-        <button
-          type="button"
-          onClick={() => onRandom("normal")}
-          disabled={loading !== null}
-          className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-bg-card hover:bg-bg-hover transition-colors text-xs font-medium text-fg disabled:opacity-50 disabled:cursor-not-allowed"
-          title="Generate a coherent Suno-friendly style description"
-        >
-          {loading === "normal" ? (
-            <Loader2 className="w-3 h-3 animate-spin" />
-          ) : (
-            <Wand2 className="w-3 h-3" />
-          )}
-          Surprise me
-        </button>
-        <button
-          type="button"
-          onClick={() => onRandom("crazy")}
-          disabled={loading !== null}
-          className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md border border-border bg-bg-card hover:bg-bg-hover transition-colors text-xs font-medium text-fg disabled:opacity-50 disabled:cursor-not-allowed"
-          title="Generate an unusual genre mashup that still works in Suno"
-        >
-          {loading === "crazy" ? (
-            <Loader2 className="w-3 h-3 animate-spin" />
-          ) : (
-            <Flame className="w-3 h-3" />
-          )}
-          Go crazy
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function isMac(): boolean {
   if (typeof navigator === "undefined") return false;
   const p = navigator.platform || "";

src/components/ResultCard.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { RefreshCw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSync } from "@fortawesome/free-solid-svg-icons";
 
 interface ResultCardProps {
   index: number;
@@ -37,11 +38,13 @@ export function ResultCard({
               type="button"
               onClick={onRegenerate}
               disabled={regenerating}
-              className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-[11px] font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               aria-label={`Regenerate ${title}`}
             >
-              <RefreshCw
+              <FontAwesomeIcon
-                className={`w-3 h-3 ${regenerating ? "animate-spin" : ""}`}
+                icon={faSync}
+                spin={regenerating}
+                className="w-3 h-3"
               />
               Regenerate
             </button>

src/components/ResultsPanel.tsx

@@ -1,4 +1,5 @@
-import { Music, RefreshCw, Sparkles } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMusic, faSync, faSparkles } from "@fortawesome/free-solid-svg-icons";
 import type { SongAssets } from "../lib/types";
 import { SkeletonCard } from "./SkeletonCard";
 import { TitlesCard } from "./cards/TitlesCard";
@@ -6,6 +7,7 @@ import { LyricsCard } from "./cards/LyricsCard";
 import { StyleCard } from "./cards/StyleCard";
 import { VideoPromptsCard } from "./cards/VideoPromptsCard";
 import { YouTubeCard } from "./cards/YouTubeCard";
+import { useI18n } from "../lib/i18n";
 
 export type SectionKey =
   | "titles"
@@ -46,10 +48,11 @@ export function ResultsPanel({
   regenerating,
 }: ResultsPanelProps) {
   const showSkeletons = loading && !assets;
+  const { t } = useI18n();
 
   return (
     <div>
-      <div className="sticky top-14 z-30 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3 bg-bg/80 backdrop-blur border-b border-border mb-6 flex items-center justify-between gap-3">
+      <div className="sticky top-0 z-30 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3 bg-bg/60 backdrop-blur-md border-b border-border mb-6 flex items-center justify-between gap-3">
         <h2 className="text-sm font-semibold text-fg">Results</h2>
         <div className="flex items-center gap-1">
           {anyRegenerating && onCancel && (
@@ -69,8 +72,10 @@ export function ResultsPanel({
               disabled={anyRegenerating}
               className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              <RefreshCw
+              <FontAwesomeIcon
-                className={`w-3.5 h-3.5 ${regenerating.all ? "animate-spin" : ""}`}
+                icon={faSync}
+                spin={regenerating.all}
+                className="w-3.5 h-3.5"
               />
               Regenerate all
             </button>
@@ -135,30 +140,26 @@ export function ResultsPanel({
 }
 
 function EmptyState() {
+  const { t } = useI18n();
   return (
-    <div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border">
+    <div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border backdrop-blur-sm bg-bg-card/30">
       <div className="relative w-16 h-16 mb-5">
-        <div className="absolute inset-0 rounded-full bg-gradient-to-br from-violet-500/20 to-cyan-500/20 blur-xl" />
+        <div className="absolute inset-0 rounded-full bg-gradient-to-br from-accent-primary/20 to-accent-secondary/20 blur-xl" />
-        <div className="relative w-full h-full rounded-full bg-bg-card border border-border flex items-center justify-center">
+        <div className="relative w-full h-full rounded-full bg-bg-card border border-border flex items-center justify-center shadow-lg">
-          <Music className="w-7 h-7 text-violet-300" />
+          <FontAwesomeIcon icon={faMusic} className="w-7 h-7 text-accent-primary" />
         </div>
       </div>
       <h3 className="text-base font-semibold text-fg mb-1.5">
         Your song will appear here
       </h3>
       <p className="text-sm text-fg-muted max-w-sm leading-relaxed">
-        Describe a music idea on the left and press{" "}
+        Describe a music idea above and press{" "}
         <kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono text-fg">
-          Generate
+          {t.generateAssets}
         </kbd>{" "}
         to get titles, lyrics, style, video prompts, and a YouTube description
         in one go.
       </p>
-      <div className="mt-5 flex items-center gap-1.5 text-xs text-fg-muted">
-        <Sparkles className="w-3 h-3" />
-        First time? Open <span className="text-fg">Settings</span> to add your
-        API key.
-      </div>
     </div>
   );
 }

src/components/StickyZipBar.tsx

@@ -1,4 +1,5 @@
-import { FolderArchive, Download } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileZipper, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { sanitizeFilename } from "../lib/zip";
 
 interface StickyZipBarProps {
@@ -15,7 +16,7 @@ export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
     <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-bg/80 backdrop-blur supports-[backdrop-filter]:bg-bg/60">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2 text-sm text-fg min-w-0">
-          <FolderArchive className="w-4 h-4 text-fg-muted shrink-0" />
+          <FontAwesomeIcon icon={faFileZipper} className="w-4 h-4 text-fg-muted shrink-0" />
           <span className="truncate font-mono text-[13px]">
             {filename ?? (
               <span className="text-fg-muted">
@@ -30,7 +31,7 @@ export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
           disabled={!filename || busy}
           className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white shadow-md shadow-violet-900/20 gradient-bg hover:brightness-110 active:brightness-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
         >
-          <Download className="w-4 h-4" />
+          <FontAwesomeIcon icon={faDownload} className="w-4 h-4" />
           {filename ? "Download ZIP" : "Select a title first"}
         </button>
       </div>

src/components/cards/LyricsCard.tsx

@@ -1,6 +1,7 @@
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
-import { RotateCcw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileAlt, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 
 interface LyricsCardProps {
@@ -24,7 +25,7 @@ export function LyricsCard({
   return (
     <ResultCard
       index={1}
-      icon="📝"
+      icon={<FontAwesomeIcon icon={faFileAlt} className="text-blue-400" />}
       title="Lyrics"
       onRegenerate={onRegenerate}
       regenerating={regenerating}
@@ -38,7 +39,7 @@ export function LyricsCard({
               aria-label="Revert lyrics to last generated version"
               title="Revert to last generated"
             >
-              <RotateCcw className="w-4 h-4" />
+              <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
               <span>Revert</span>
             </button>
           )}

src/components/cards/StyleCard.tsx

@@ -1,6 +1,7 @@
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMusic, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 
 interface StyleCardProps {
@@ -33,7 +34,7 @@ export function StyleCard({
   return (
     <ResultCard
       index={2}
-      icon="🎵"
+      icon={<FontAwesomeIcon icon={faMusic} className="text-violet-400" />}
       title="Style"
       onRegenerate={onRegenerate}
       regenerating={regenerating}
@@ -49,7 +50,7 @@ export function StyleCard({
             aria-label="Revert style to last generated version"
             title="Revert to last generated"
           >
-            <RotateCcw className="w-4 h-4" />
+            <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
             <span>Revert</span>
           </button>
         )

src/components/cards/TitlesCard.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { ResultCard } from "../ResultCard";
-import { RefreshCw } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTags, faSync } from "@fortawesome/free-solid-svg-icons";
 
 interface TitlesCardProps {
   titles: string[];
@@ -35,7 +36,7 @@ export function TitlesCard({
   return (
     <ResultCard
       index={0}
-      icon="🏷️"
+      icon={<FontAwesomeIcon icon={faTags} className="text-emerald-400" />}
       title="Song Titles"
       onRegenerate={onRegenerate}
       regenerating={regenerating}
@@ -61,7 +62,7 @@ export function TitlesCard({
         })}
         {regenerating && (
           <span className="chip text-fg-muted">
-            <RefreshCw className="w-4 h-4 animate-spin" />
+            <FontAwesomeIcon icon={faSync} spin className="w-4 h-4" />
             Generating new titles…
           </span>
         )}

src/components/cards/VideoPromptsCard.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faVideo, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 import {
   NEGATIVE_VIDEO_PROMPT,
@@ -37,7 +38,7 @@ export function VideoPromptsCard({
   return (
     <ResultCard
       index={3}
-      icon="🎬"
+      icon={<FontAwesomeIcon icon={faVideo} className="text-rose-400" />}
       title="Video Prompts"
       onRegenerate={onRegenerate}
       regenerating={regenerating}
@@ -52,7 +53,7 @@ export function VideoPromptsCard({
                 aria-label="Revert video prompt to last generated version"
                 title="Revert to last generated"
               >
-                <RotateCcw className="w-4 h-4" />
+                <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
                 <span>Revert</span>
               </button>
             )}

src/components/cards/YouTubeCard.tsx

@@ -1,6 +1,8 @@
-import { RotateCcw } from "lucide-react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 
 interface YouTubeCardProps {
@@ -24,7 +26,7 @@ export function YouTubeCard({
   return (
     <ResultCard
       index={4}
-      icon="📺"
+      icon={<FontAwesomeIcon icon={faYoutube} className="text-red-500" />}
       title="YouTube Description"
       onRegenerate={onRegenerate}
       regenerating={regenerating}
@@ -38,7 +40,7 @@ export function YouTubeCard({
               aria-label="Revert description to last generated version"
               title="Revert to last generated"
             >
-              <RotateCcw className="w-4 h-4" />
+              <FontAwesomeIcon icon={faUndo} className="w-3.5 h-3.5" />
               <span>Revert</span>
             </button>
           )}

src/index.css

@@ -4,60 +4,80 @@
 
 @layer base {
     :root {
+        color-scheme: light;
+        --bg: #f8fafc;
+        --bg-card: rgba(255, 255, 255, 0.6);
+        --bg-hover: rgba(241, 245, 249, 0.8);
+        --border: rgba(0, 0, 0, 0.08);
+        --accent-primary: #7c3aed;
+        --accent-secondary: #0891b2;
+        --fg: #0f172a;
+        --fg-muted: #64748b;
+        --tag: #8b5cf6;
+    }
+
+    .dark {
         color-scheme: dark;
+        --bg: #05050a;
+        --bg-card: rgba(17, 17, 24, 0.5);
+        --bg-hover: rgba(22, 22, 31, 0.7);
+        --border: rgba(255, 255, 255, 0.08);
+        --accent-primary: #7c3aed;
+        --accent-secondary: #06b6d4;
+        --fg: #e2e8f0;
+        --fg-muted: #94a3b8;
+        --tag: #a78bfa;
     }
 
     html,
     body,
     #root {
         height: 100%;
+        overflow: hidden; /* App controls its own scrolling */
     }
 
     body {
-        @apply bg-bg text-fg antialiased font-sans;
+        @apply bg-bg text-fg antialiased font-sans transition-colors duration-300;
         margin: 0;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         font-feature-settings: "cv11", "ss01", "ss03";
     }
 
-    /* Subtle, modern focus ring — keyboard only */
     :focus-visible {
-        outline: 2px solid theme("colors.accent.primary");
+        outline: 2px solid var(--accent-primary);
         outline-offset: 2px;
         border-radius: 4px;
     }
 
-    /* Custom selection color */
     ::selection {
         background: rgba(124, 58, 237, 0.3);
-        color: #f1f5f9;
+        color: var(--fg);
     }
 }
 
 @layer components {
     .card {
-        @apply bg-bg-card border border-border rounded-2xl;
+        @apply bg-bg-card border border-border rounded-2xl shadow-xl backdrop-blur-xl transition-colors duration-300;
     }
 
     .btn-secondary {
-        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
+        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-bold
-           bg-bg-card border border-border text-fg hover:bg-bg-hover
+           bg-bg-card border border-border text-fg hover:bg-bg-hover shadow-sm backdrop-blur-md
            transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
     }
 
     .btn-ghost {
         @apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
-           text-fg-muted hover:text-fg hover:bg-bg-hover
+           text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
-           transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
     }
 
     .input {
-        @apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[14px] text-fg
+        @apply w-full bg-bg-card/50 backdrop-blur-md border border-border rounded-lg px-3 py-2 text-[14px] text-fg
-           placeholder-fg-muted/70
+           placeholder-fg-muted/60
            focus:outline-none focus:border-accent-primary/60
            focus:ring-1 focus:ring-accent-primary/20
-           transition-colors duration-150;
+           transition-colors duration-150 shadow-inner;
     }
 
     .textarea {
@@ -66,43 +86,32 @@
 
     .chip {
         @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
-           bg-bg-card text-sm font-medium text-fg hover:bg-bg-hover
+           bg-bg-card backdrop-blur-md text-sm font-bold text-fg hover:bg-bg-hover shadow-sm
            transition-colors duration-150;
     }
 
     .gradient-text {
-        background: linear-gradient(135deg, #c4b5fd 0%, #67e8f9 100%);
+        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }
 
     .gradient-bg {
-        background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
+        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
     }
 
-    /* Stagger delays for the result cards' fade-up animation. */
+    .stagger-0 { animation-delay: 0ms; }
-    .stagger-0 {
+    .stagger-1 { animation-delay: 80ms; }
-        animation-delay: 0ms;
+    .stagger-2 { animation-delay: 160ms; }
-    }
+    .stagger-3 { animation-delay: 240ms; }
-    .stagger-1 {
+    .stagger-4 { animation-delay: 320ms; }
-        animation-delay: 80ms;
-    }
-    .stagger-2 {
-        animation-delay: 160ms;
-    }
-    .stagger-3 {
-        animation-delay: 240ms;
-    }
-    .stagger-4 {
-        animation-delay: 320ms;
-    }
 }
 
 @layer utilities {
     .scrollbar-thin {
         scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+        scrollbar-color: var(--border) transparent;
     }
 
     .scrollbar-thin::-webkit-scrollbar {
@@ -111,11 +120,23 @@
     }
 
     .scrollbar-thin::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.08);
+        background-color: var(--border);
         border-radius: 4px;
     }
 
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(255, 255, 255, 0.15);
+        background-color: var(--fg-muted);
+    }
+
+    /* Liquid background elements */
+    .liquid-blob-1 {
+        position: fixed; top: -15%; left: -10%; width: 60vw; height: 60vw;
+        background: radial-gradient(circle, var(--accent-primary) 0%, transparent 60%);
+        opacity: 0.15; filter: blur(120px); z-index: -1; pointer-events: none;
+    }
+    .liquid-blob-2 {
+        position: fixed; bottom: -15%; right: -10%; width: 60vw; height: 60vw;
+        background: radial-gradient(circle, var(--accent-secondary) 0%, transparent 60%);
+        opacity: 0.15; filter: blur(120px); z-index: -1; pointer-events: none;
     }
 }

src/lib/i18n.tsx

@@ -0,0 +1,134 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+type Language = 'de' | 'en';
+
+const translations = {
+  de: {
+    appTitle: 'MelodyMuse',
+    appSubtitle: 'Generiere Suno Song-Assets mit KI',
+    musicIdea: 'Musik-Idee',
+    tryExample: 'Beispiel testen',
+    placeholderIdea: 'Beschreibe deine Musik-Idee…',
+    shortcutHint: 'zum Generieren',
+    language: 'Sprache',
+    musicStyle: 'Musikstil',
+    optional: '(optional)',
+    placeholderStyle: 'z.B. dark synthwave, analog pads, 110 BPM',
+    surpriseMe: 'Überrasch mich',
+    goCrazy: 'Verrückt',
+    mood: 'Stimmung',
+    placeholderMood: 'z.B. melancholisch, euphorisch, spannend…',
+    vocals: 'Gesang',
+    vocalsOption: 'Mit Gesang',
+    instrumentalOption: 'Instrumental',
+    generateAssets: 'Song-Assets generieren',
+    generating: 'Generiere…',
+    cancelGeneration: 'Generierung abbrechen',
+    settings: 'Einstellungen',
+    titles: 'Titel',
+    lyrics: 'Songtext',
+    style: 'Stil',
+    videoPrompts: 'Video-Prompts',
+    youtubeDesc: 'YouTube-Beschreibung',
+    regenerateAll: 'Alles neu generieren',
+    downloadZip: 'ZIP herunterladen',
+    copied: 'Kopiert!',
+    copy: 'Kopieren',
+    regenerate: 'Neu generieren',
+    revert: 'Zurücksetzen',
+    history: 'Verlauf',
+    noHistory: 'Noch kein Verlauf vorhanden.',
+    serverOffline: 'Server offline',
+    generationFailed: 'Generierung fehlgeschlagen — bitte erneut versuchen',
+    generationCancelled: 'Generierung abgebrochen',
+    assetsGenerated: 'Song-Assets generiert',
+    regeneratedAll: 'Alle Bereiche neu generiert',
+    regeneratedSection: 'Bereich neu generiert',
+  },
+  en: {
+    appTitle: 'MelodyMuse',
+    appSubtitle: 'Generate Suno song assets with AI',
+    musicIdea: 'Music idea',
+    tryExample: 'Try an example',
+    placeholderIdea: 'Describe your music idea…',
+    shortcutHint: 'to generate',
+    language: 'Language',
+    musicStyle: 'Music style',
+    optional: '(optional)',
+    placeholderStyle: 'e.g. dark synthwave, analog pads, 110 BPM',
+    surpriseMe: 'Surprise me',
+    goCrazy: 'Go crazy',
+    mood: 'Mood',
+    placeholderMood: 'e.g. melancholic, euphoric, tense…',
+    vocals: 'Vocals',
+    vocalsOption: 'Vocals',
+    instrumentalOption: 'Instrumental',
+    generateAssets: 'Generate song assets',
+    generating: 'Generating…',
+    cancelGeneration: 'Cancel generation',
+    settings: 'Settings',
+    titles: 'Titles',
+    lyrics: 'Lyrics',
+    style: 'Style',
+    videoPrompts: 'Video prompts',
+    youtubeDesc: 'YouTube description',
+    regenerateAll: 'Regenerate all',
+    downloadZip: 'Download ZIP',
+    copied: 'Copied!',
+    copy: 'Copy',
+    regenerate: 'Regenerate',
+    revert: 'Revert',
+    history: 'History',
+    noHistory: 'No history yet.',
+    serverOffline: 'Server offline',
+    generationFailed: 'Generation failed — please try again',
+    generationCancelled: 'Generation cancelled',
+    assetsGenerated: 'Song assets generated',
+    regeneratedAll: 'Regenerated all sections',
+    regeneratedSection: 'Regenerated section',
+  }
+};
+
+type Translations = typeof translations.de;
+
+interface I18nContextType {
+  lang: Language;
+  setLang: (lang: Language) => void;
+  t: Translations;
+}
+
+const I18nContext = createContext<I18nContextType | null>(null);
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  // Try to load from localStorage, default to 'de'
+  const [lang, setLangState] = useState<Language>(() => {
+    try {
+      const stored = localStorage.getItem('melodymuse-lang');
+      if (stored === 'de' || stored === 'en') return stored;
+    } catch {
+      // ignore
+    }
+    return 'de';
+  });
+
+  const setLang = (l: Language) => {
+    setLangState(l);
+    try {
+      localStorage.setItem('melodymuse-lang', l);
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <I18nContext.Provider value={{ lang, setLang, t: translations[lang] }}>
+      {children}
+    </I18nContext.Provider>
+  );
+}
+
+export function useI18n() {
+  const ctx = useContext(I18nContext);
+  if (!ctx) throw new Error('useI18n must be used within I18nProvider');
+  return ctx;
+}

src/lib/theme.tsx

@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    try {
+      const stored = localStorage.getItem('melodymuse-theme');
+      if (stored === 'light' || stored === 'dark') return stored;
+    } catch {
+      // ignore
+    }
+    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    try {
+      localStorage.setItem('melodymuse-theme', theme);
+    } catch {
+      // ignore
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

src/lib/toast.tsx

@@ -1,6 +1,7 @@
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
-import { CheckCircle2, XCircle, Info, X } from 'lucide-react';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle, faTimesCircle, faInfoCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 type ToastKind = 'success' | 'error' | 'info';
 
@@ -67,11 +68,11 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 function ToastView({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
   const icon =
     toast.kind === 'success' ? (
-      <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
+      <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-emerald-400 shrink-0" />
     ) : toast.kind === 'error' ? (
-      <XCircle className="w-5 h-5 text-rose-400 shrink-0" />
+      <FontAwesomeIcon icon={faTimesCircle} className="w-5 h-5 text-rose-400 shrink-0" />
     ) : (
-      <Info className="w-5 h-5 text-cyan-400 shrink-0" />
+      <FontAwesomeIcon icon={faInfoCircle} className="w-5 h-5 text-cyan-400 shrink-0" />
     );
 
   return (
@@ -87,7 +88,7 @@ function ToastView({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
         className="text-fg-muted hover:text-fg transition-colors"
         aria-label="Dismiss"
       >
-        <X className="w-4 h-4" />
+        <FontAwesomeIcon icon={faTimes} className="w-4 h-4" />
       </button>
     </div>
   );

src/pages/HomePage.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Youtube } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faSun, faMoon, faMusic } from "@fortawesome/free-solid-svg-icons";
 import { InputPanel } from "../components/InputPanel";
 import type { InputValues } from "../components/InputPanel";
 import {
@@ -10,7 +12,6 @@ import {
 import { StickyZipBar } from "../components/StickyZipBar";
 import { HistoryPanel } from "../components/HistoryPanel";
 import { Footer } from "../components/Footer";
-import { EqualizerIcon } from "../components/EqualizerIcon";
 import { useToast } from "../lib/toast";
 import { generateSong, getServerStatus } from "../lib/llm";
 import { addToHistory, type HistoryEntry } from "../lib/history";
@@ -20,9 +21,9 @@ import {
   type SongAssets,
   type VideoPrompt,
 } from "../lib/types";
+import { useI18n } from "../lib/i18n";
+import { useTheme } from "../lib/theme";
 
-// localStorage key for the in-progress input form. Lets the user survive
-// an accidental refresh without losing what they were typing.
 const DRAFT_KEY = "melodymuse-draft";
 const DRAFT_DEBOUNCE_MS = 400;
 
@@ -62,42 +63,33 @@ function loadDraft(): InputValues | null {
 
 export function HomePage() {
   const toast = useToast();
+  const { t, lang, setLang } = useI18n();
+  const { theme, toggleTheme } = useTheme();
 
-  // Hydrate the input from any previously-saved draft so the user can recover
-  // an accidental refresh.
   const [input, setInput] = useState<InputValues>(
     () => loadDraft() ?? DEFAULT_INPUT,
   );
   const [assets, setAssets] = useState<SongAssets | null>(null);
-  // The "last generated" snapshot. The cards compare their current editable
-  // values against these to decide whether to show the Revert button.
   const [originalAssets, setOriginalAssets] = useState<SongAssets | null>(null);
   const [loading, setLoading] = useState(false);
   const [regenerating, setRegenerating] = useState<RegeneratingMap>({});
   const [selectedTitleIndex, setSelectedTitleIndex] = useState(0);
   const [serverOk, setServerOk] = useState<boolean | null>(null);
 
-  // AbortController for the *current* network request. Refs are used so the
-  // cancel handler always sees the latest value without re-binding.
   const abortRef = useRef<AbortController | null>(null);
-
   const anyRegenerating = isAnyBusy(loading, regenerating);
 
-  // Debounced auto-save: persist the input form ~400ms after the last edit so
-  // a refresh doesn't wipe what the user was typing.
   useEffect(() => {
     const id = window.setTimeout(() => {
       try {
         window.localStorage.setItem(DRAFT_KEY, JSON.stringify(input));
       } catch {
-        // Quota or disabled — fine, history is the more durable store.
+        // ignore
       }
     }, DRAFT_DEBOUNCE_MS);
     return () => window.clearTimeout(id);
   }, [input]);
 
-  // Check the server on mount and re-check periodically so the header
-  // "Server offline" hint stays current without a manual refresh.
   useEffect(() => {
     let cancelled = false;
     const check = async () => {
@@ -116,7 +108,6 @@ export function HomePage() {
     };
   }, []);
 
-  // Clean up any in-flight request on unmount.
   useEffect(() => () => abortRef.current?.abort(), []);
 
   const selectedTitle = useMemo(() => {
@@ -131,7 +122,6 @@ export function HomePage() {
     abortRef.current = null;
   }, []);
 
-  // Esc cancels any in-flight generation.
   useEffect(() => {
     if (!anyRegenerating) return;
     const onKey = (e: KeyboardEvent) => {
@@ -144,9 +134,6 @@ export function HomePage() {
     return () => window.removeEventListener("keydown", onKey);
   }, [anyRegenerating, cancel]);
 
-  // Build the request payload from the current form values. Kept as a
-  // function so all three call sites (full / regenerate all / per-section)
-  // stay in sync.
   const buildRequest = useCallback(
     (
       section: GenerateCall["section"],
@@ -172,7 +159,6 @@ export function HomePage() {
       busySetter: (b: boolean) => void,
       successMsg: string,
     ) => {
-      // Cancel any in-flight request before starting a new one.
       abortRef.current?.abort();
       const ctrl = new AbortController();
       abortRef.current = ctrl;
@@ -185,12 +171,12 @@ export function HomePage() {
         toast.success(successMsg);
       } catch (err) {
         if (err instanceof DOMException && err.name === "AbortError") {
-          toast.info("Generation cancelled");
+          toast.info(t.generationCancelled);
         } else {
           toast.error(
             err instanceof Error
               ? err.message
-              : "Generation failed — please try again",
+              : t.generationFailed,
           );
         }
       } finally {
@@ -198,13 +184,11 @@ export function HomePage() {
         if (abortRef.current === ctrl) abortRef.current = null;
       }
     },
-    [toast],
+    [toast, t],
   );
 
   const handleGenerate = useCallback(async () => {
     if (!input.idea.trim()) return;
-    // Clear the old assets so the skeleton state shows during generation
-    // instead of the previous song's cards.
     setAssets(null);
     setOriginalAssets(null);
     await runGeneration(
@@ -217,9 +201,9 @@ export function HomePage() {
         addToHistory(input, next);
       },
       setLoading,
-      "Song assets generated",
+      t.assetsGenerated,
     );
-  }, [input, buildRequest, runGeneration]);
+  }, [input, buildRequest, runGeneration, t]);
 
   const handleRegenerateAll = useCallback(async () => {
     if (!input.idea.trim()) return;
@@ -238,9 +222,9 @@ export function HomePage() {
         setLoading(b);
         setRegenerating((m) => ({ ...m, all: b }));
       },
-      "Regenerated all sections",
+      t.regeneratedAll,
     );
-  }, [input, buildRequest, runGeneration]);
+  }, [input, buildRequest, runGeneration, t]);
 
   const handleRegenerateSection = useCallback(
     async (section: SectionKey) => {
@@ -248,18 +232,15 @@ export function HomePage() {
       await runGeneration(
         () => buildRequest(section, { context: assets }),
         (result) => {
-          // Merge partial into current assets, and update the original
-          // snapshot for the keys that came back. Any keys the user has
-          // hand-edited that the model *didn't* return stay as-is.
           const merged: SongAssets = { ...assets, ...result };
           setAssets(merged);
           setOriginalAssets((prev) => (prev ? { ...prev, ...result } : merged));
         },
         (b) => setRegenerating((m) => ({ ...m, [section]: b })),
-        `Regenerated ${SECTION_LABELS[section]}`,
+        `${t.regeneratedSection} ${SECTION_LABELS[section]}`,
       );
     },
-    [input, assets, buildRequest, runGeneration],
+    [input, assets, buildRequest, runGeneration, t],
   );
 
   const handleDownload = useCallback(async () => {
@@ -273,7 +254,6 @@ export function HomePage() {
     }
   }, [assets, selectedTitle, toast]);
 
-  // Asset editing handlers
   const handleAssetChange = useCallback(
     <K extends keyof SongAssets>(key: K, value: SongAssets[K]) => {
       setAssets((curr) => (curr ? { ...curr, [key]: value } : curr));
@@ -294,7 +274,6 @@ export function HomePage() {
     [],
   );
 
-  // Restore a previous generation from history.
   const handleLoadHistory = useCallback(
     (entry: HistoryEntry) => {
       if (anyRegenerating) cancel();
@@ -308,41 +287,67 @@ export function HomePage() {
   );
 
   return (
-    <div className="min-h-screen pb-32">
+    <div className="flex flex-col h-screen overflow-hidden">
-      <header className="sticky top-0 z-20 bg-bg/80 backdrop-blur border-b border-border">
+      <div className="liquid-blob-1" />
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
+      <div className="liquid-blob-2" />
-          <div className="flex items-center gap-2.5">
+
-            <EqualizerIcon size={18} className="shrink-0" />
+      {/* Header */}
-            <span className="text-sm font-medium text-fg-muted">
+      <header className="shrink-0 z-20 bg-bg-card/40 backdrop-blur-md border-b border-border shadow-sm">
-              MelodyMuse
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-12 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FontAwesomeIcon icon={faMusic} className="text-accent-primary" />
+            <span className="text-sm font-bold text-fg tracking-wide">
+              {t.appTitle}
             </span>
           </div>
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <a
               href="https://www.youtube.com/@AIWentNonsense"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors"
+              className="inline-flex items-center gap-1.5 text-xs font-semibold text-fg-muted hover:text-rose-500 transition-colors"
               title="AI Went Nonsense on YouTube"
             >
-              <Youtube className="w-4 h-4" />
+              <FontAwesomeIcon icon={faYoutube} className="w-4 h-4" />
               <span className="hidden sm:inline">YouTube</span>
             </a>
             {serverOk === false && (
-              <span
+              <span className="text-xs font-bold text-rose-400 bg-rose-400/10 px-2 py-0.5 rounded" title="Server unreachable">
-                className="text-xs text-rose-300 hidden sm:inline"
+                {t.serverOffline}
-                title="The MelodyMuse server is unreachable. Generation will fail."
-              >
-                Server offline
               </span>
             )}
+            <div className="flex items-center gap-1 border-l border-border pl-4">
+              <button
+                onClick={() => setLang("de")}
+                className={`w-7 h-7 rounded flex items-center justify-center text-[15px] transition-colors ${lang === "de" ? "bg-bg-hover shadow-sm" : "opacity-50 hover:opacity-100"}`}
+                title="Deutsch"
+              >
+                🇩🇪
+              </button>
+              <button
+                onClick={() => setLang("en")}
+                className={`w-7 h-7 rounded flex items-center justify-center text-[15px] transition-colors ${lang === "en" ? "bg-bg-hover shadow-sm" : "opacity-50 hover:opacity-100"}`}
+                title="English"
+              >
+                🇬🇧
+              </button>
+              <button
+                onClick={toggleTheme}
+                className="w-7 h-7 rounded flex items-center justify-center text-fg-muted hover:text-accent-primary hover:bg-bg-hover transition-colors ml-1"
+                title="Toggle Theme"
+              >
+                <FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
+              </button>
+            </div>
           </div>
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-10">
+      {/* Main Layout: Fixed Input Top, Scrollable Bottom */}
-        <div className="grid grid-cols-1 lg:grid-cols-[35%_minmax(0,1fr)] gap-8">
+      <div className="flex-1 min-h-0 flex flex-col max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-4 gap-6">
-          <div className="lg:sticky lg:top-20 lg:self-start space-y-4">
+        
+        {/* Input Control Bar (Always visible at top) */}
+        <div className="shrink-0 z-10 animate-fade-up">
           <InputPanel
             values={input}
             onChange={setInput}
@@ -355,14 +360,21 @@ export function HomePage() {
                 onClick={cancel}
                 className="btn-secondary w-full"
               >
-                  Cancel generation
+                {t.cancelGeneration}
               </button>
             }
           />
+        </div>
+
+        {/* Bottom Area (History Sidebar + Results Area) */}
+        <div className="flex-1 min-h-0 flex gap-6 overflow-hidden animate-fade-up stagger-1">
+          {/* History Sidebar */}
+          <div className="hidden lg:flex flex-col w-1/4 shrink-0 overflow-hidden">
             <HistoryPanel onLoad={handleLoadHistory} />
           </div>
 
-          <div>
+          {/* Results Main Area */}
+          <div className="flex-1 overflow-y-auto scrollbar-thin pb-20">
             <ResultsPanel
               assets={assets}
               originalAssets={originalAssets}
@@ -377,9 +389,10 @@ export function HomePage() {
               anyRegenerating={anyRegenerating}
               regenerating={regenerating}
             />
+            <Footer />
+          </div>
         </div>
       </div>
-      </main>
 
       {assets && (
         <StickyZipBar
@@ -388,8 +401,6 @@ export function HomePage() {
           onDownload={handleDownload}
         />
       )}
-
-      <Footer />
     </div>
   );
 }

src/pages/SettingsPage.tsx

@@ -1,16 +1,18 @@
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  ArrowLeft,
+  faArrowLeft,
-  CheckCircle2,
+  faCheckCircle,
-  AlertTriangle,
+  faExclamationTriangle,
-  Loader2,
+  faCircleNotch,
-  Plug,
+  faPlug,
-  Trash2,
+  faTrashAlt,
-  Server,
+  faServer,
-} from "lucide-react";
+} from "@fortawesome/free-solid-svg-icons";
 import { useToast } from "../lib/toast";
 import { getServerStatus, type ServerStatus } from "../lib/llm";
+import { useI18n } from "../lib/i18n";
 
 const HISTORY_KEY = "melodymuse-history";
 const DRAFT_KEY = "melodymuse-draft";
@@ -44,6 +46,7 @@ function readLocalDataSummary(): LocalDataSummary {
 export function SettingsPage() {
   const toast = useToast();
   const navigate = useNavigate();
+  const { t } = useI18n();
 
   const [status, setStatus] = useState<ServerStatus | null>(null);
   const [statusError, setStatusError] = useState<string | null>(null);
@@ -100,7 +103,7 @@ export function SettingsPage() {
   const onClearAll = () => {
     if (
       !window.confirm(
-        "Clear all MelodyMuse data from this browser? This will remove the recent generations, the in-progress draft, and the theme preference. The API key on the server is NOT affected.",
+        "Clear all MelodyMuse data from this browser? This will remove the recent generations, the in-progress draft, and the theme preference.",
       )
     )
       return;
@@ -121,9 +124,9 @@ export function SettingsPage() {
             className="p-2 -ml-2 rounded-md text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
             aria-label="Back"
           >
-            <ArrowLeft className="w-5 h-5" />
+            <FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
           </button>
-          <h1 className="text-sm font-semibold text-fg">Settings</h1>
+          <h1 className="text-sm font-semibold text-fg">{t.settings}</h1>
         </div>
       </header>
 
@@ -131,7 +134,7 @@ export function SettingsPage() {
         <div className="card p-6 space-y-6">
           <section>
             <h2 className="text-sm font-semibold text-fg mb-3 flex items-center gap-2">
-              <Server className="w-4 h-4" />
+              <FontAwesomeIcon icon={faServer} className="w-4 h-4 text-accent-primary" />
               Server status
             </h2>
 
@@ -158,7 +161,7 @@ export function SettingsPage() {
                       </p>
                     )}
                     {statusError && !checking && (
-                      <p className="text-xs text-rose-300 break-words">
+                      <p className="text-xs text-rose-400 break-words">
                         {statusError}
                       </p>
                     )}
@@ -171,21 +174,13 @@ export function SettingsPage() {
                   className="btn-ghost"
                 >
                   {checking ? (
-                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <FontAwesomeIcon icon={faCircleNotch} spin className="w-4 h-4" />
                   ) : (
-                    <Plug className="w-4 h-4" />
+                    <FontAwesomeIcon icon={faPlug} className="w-4 h-4" />
                   )}
                   <span>Re-check</span>
                 </button>
               </div>
-
-              <p className="text-xs text-fg-muted">
-                The LLM provider's API key lives on this server in the{" "}
-                <code className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
-                  LLM_API_KEY
-                </code>{" "}
-                environment variable. The browser never sees it.
-              </p>
             </div>
           </section>
 
@@ -199,16 +194,16 @@ export function SettingsPage() {
             </p>
             <ul className="text-xs text-fg-muted space-y-1 mb-4">
               <li>
-                <code className="font-mono">melodymuse-history</code> —{" "}
+                <code className="font-mono text-accent-primary">melodymuse-history</code> —{" "}
                 {summary.historyEntries} recent generation
                 {summary.historyEntries === 1 ? "" : "s"}
               </li>
               <li>
-                <code className="font-mono">melodymuse-draft</code> —{" "}
+                <code className="font-mono text-accent-primary">melodymuse-draft</code> —{" "}
                 {summary.hasDraft ? "saved (in-progress input)" : "empty"}
               </li>
               <li>
-                <code className="font-mono">melodymuse-theme</code> —{" "}
+                <code className="font-mono text-accent-primary">melodymuse-theme</code> —{" "}
                 {summary.hasTheme ? "set" : "using default"}
               </li>
             </ul>
@@ -219,7 +214,7 @@ export function SettingsPage() {
                 disabled={summary.historyEntries === 0}
                 className="btn-secondary"
               >
-                <Trash2 className="w-4 h-4" />
+                <FontAwesomeIcon icon={faTrashAlt} className="w-4 h-4" />
                 Clear recent generations
               </button>
               <button
@@ -228,30 +223,26 @@ export function SettingsPage() {
                 disabled={!summary.hasDraft}
                 className="btn-secondary"
               >
-                <Trash2 className="w-4 h-4" />
+                <FontAwesomeIcon icon={faTrashAlt} className="w-4 h-4" />
                 Clear in-progress draft
               </button>
               <button
                 type="button"
                 onClick={onClearAll}
-                className="btn-secondary text-rose-300 hover:text-rose-200"
+                className="btn-secondary text-rose-400 hover:text-rose-300"
               >
-                <Trash2 className="w-4 h-4" />
+                <FontAwesomeIcon icon={faTrashAlt} className="w-4 h-4" />
                 Clear all local data
               </button>
             </div>
           </section>
 
-          <p className="text-center text-xs text-fg-muted">
+          <div className="text-center pt-2">
-            API key on the server · Recent generations in this browser only
-          </p>
-
-          <div className="text-center">
             <Link
               to="/"
-              className="text-xs text-fg-muted hover:text-fg transition-colors"
+              className="text-xs font-semibold text-fg-muted hover:text-accent-primary transition-colors flex items-center justify-center gap-2"
             >
-              ← Back to generator
+              <FontAwesomeIcon icon={faArrowLeft} /> Back to generator
             </Link>
           </div>
         </div>
@@ -262,7 +253,7 @@ export function SettingsPage() {
 
 function StatusDot({ checking, ok }: { checking: boolean; ok: boolean }) {
   if (checking)
-    return <Loader2 className="w-5 h-5 text-fg-muted animate-spin shrink-0" />;
+    return <FontAwesomeIcon icon={faCircleNotch} spin className="w-5 h-5 text-fg-muted shrink-0" />;
-  if (ok) return <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />;
+  if (ok) return <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-emerald-400 shrink-0" />;
-  return <AlertTriangle className="w-5 h-5 text-rose-400 shrink-0" />;
+  return <FontAwesomeIcon icon={faExclamationTriangle} className="w-5 h-5 text-rose-400 shrink-0" />;
 }

tailwind.config.js

@@ -1,43 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
-  // The result cards use a dynamic class `stagger-${index}` for the
-  // per-card animation delay. Tailwind's content scanner can't statically
-  // resolve that template literal, so without the safelist the four
-  // matching rules from src/index.css get purged from the build.
   safelist: [{ pattern: /^stagger-[0-4]$/ }],
   darkMode: "class",
   theme: {
     extend: {
       colors: {
-        // Dark mode (default) palette
         bg: {
-          DEFAULT: "#080810",
+          DEFAULT: "var(--bg)",
-          card: "#111118",
+          card: "var(--bg-card)",
-          hover: "#16161f",
+          hover: "var(--bg-hover)",
-        },
-        // Light mode palette (applied via :root when not .dark)
-        bgLight: {
-          DEFAULT: "#f8fafc",
-          card: "#ffffff",
         },
         border: {
-          DEFAULT: "rgba(255, 255, 255, 0.06)",
+          DEFAULT: "var(--border)",
-        },
-        borderLight: {
-          DEFAULT: "rgba(0, 0, 0, 0.08)",
         },
         accent: {
-          primary: "#7c3aed",
+          primary: "var(--accent-primary)",
-          secondary: "#06b6d4",
+          secondary: "var(--accent-secondary)",
-          secondaryLight: "#0891b2",
         },
         fg: {
-          DEFAULT: "#e2e8f0",
+          DEFAULT: "var(--fg)",
-          muted: "#64748b",
+          muted: "var(--fg-muted)",
-          dark: "#0f172a",
         },
-        tag: "#a78bfa",
+        tag: "var(--tag)",
       },
       animation: {
         "gradient-shift": "gradient-shift 8s ease infinite",