Modernize the UI and fix the equalizer sizing bug

Bug fix

- EqualizerIcon: the SVG was rendering at the wrong size (filling
  its parent) because it had no explicit width/height attributes.
  Now it accepts a size prop with a 24px default and the SVG element
  carries the size as width/height attributes, with the className
  on top. Can't accidentally balloon.

Design

- Stripped the light-mode CSS — the app is dark-only now, and the
  theme toggle was a no-op (clicking it just toggled a class that
  had no matching rules). ThemeToggle.tsx and lib/theme.ts are
  gone; initTheme() call removed from main.tsx.

- Reworked the input form:
    • brand row is now small + refined (icon + wordmark, no huge
      gradient title)
    • Options is a single subtle collapsible card with a chevron and
      a count badge showing how many options are non-default
    • Vocals is now a segmented pill (single rounded container, two
      flat segments) instead of two full-width grid buttons
    • Generate button is slightly smaller (py-3.5, text-sm) and
      uses a softer shadow (shadow-violet-900/20)

- Empty state in the results panel: dashed-border card, soft
  gradient blur behind the music icon, cleaner copy.

- Results header: smaller heading, the 'Regenerate All' and
  'Cancel' buttons are now tiny ghost-style pills in the top-right.

- Sticky ZIP bar: softer shadow, more refined copy.

- Result cards: smaller icon, single-line title, the Regenerate
  button is now an inline pill that fits next to Revert + Copy.

- Home page header now has a tiny equalizer icon + 'MelodyMuse'
  wordmark on the left (was just text). Settings page header has
  the back arrow on the left and the title, no theme toggle.

- Global CSS: added modern focus-visible ring, custom selection
  color, subtle scrollbar thumb, slightly tweaked the gradient
  text to a softer violet-300 → cyan-300 instead of the loud
  violet-400 → fuchsia-400 → cyan-400.

.env.example

@@ -1,34 +1,106 @@
 # ─────────────────────────────────────────────────────────────────────────────
 # MelodyMuse — server environment
 #
-# The Node server (`server.mjs`) reads these from `process.env`. Pass them in
+# The Node server (`server.mjs`) reads these from `process.env`. It refuses to
-# however you run the server:
+# start without `LLM_ENDPOINT` and `LLM_API_KEY`. Pass them in however you run
+# the server:
 #
 #   • Bare-metal:    LLM_ENDPOINT=… LLM_API_KEY=… node server.mjs
 #   • Docker:        -e LLM_ENDPOINT=… -e LLM_API_KEY=…
 #   • docker-compose: put them in a `.env` file next to compose.yml
 #   • Jannik-Cloud:  AGE-encrypted `.env` generated by `generate-env.sh`
 #
-# `LLM_ENDPOINT` and `LLM_API_KEY` are required — the server refuses to start
+# Three things you set:
-# without them. The rest have sensible defaults.
+#
+#   LLM_ENDPOINT  — base URL of an OpenAI-compatible /chat/completions route
+#   LLM_API_KEY   — provider secret (never sent to the browser)
+#   LLM_MODEL     — model name to send in each request
+#
+# Below the active config you'll find worked examples for several providers —
+# copy one of them into the active block above to switch.
 # ─────────────────────────────────────────────────────────────────────────────
 
-# OpenAI-compatible base URL, e.g. https://api.minimax.chat/v1
+# ─── Active provider (uncomment ONE of the examples below to switch) ──────────
-LLM_ENDPOINT=https://api.minimax.chat/v1
 
-# Your provider's secret key
+LLM_ENDPOINT=https://api.minimax.io/v1
 LLM_API_KEY=
-
-# Model name (default: MiniMax-M3)
 LLM_MODEL=MiniMax-M3
 
-# Listen port (default: 3000)
+# ─── Server config ────────────────────────────────────────────────────────────
-PORT=3000
 
-# CORS origin. "*" allows any origin (fine for a single-user personal app).
+PORT=3000
-# Set to a specific origin like "https://melodymuse.orfel.de" to lock it down.
 CORS_ORIGIN=*
 
+
+# ╔═══════════════════════════════════════════════════════════════════════════╗
+# ║  PROVIDER EXAMPLES — copy one block up to switch providers                 ║
+# ╚═══════════════════════════════════════════════════════════════════════════╝
+
+# ─── MiniMax (the default) ───────────────────────────────────────────────────
+# https://api.minimax.io/v1
+# Sign in at https://MiniMax.io to get a key.
+#
+# LLM_ENDPOINT=https://api.minimax.io/v1
+# LLM_API_KEY=eyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# LLM_MODEL=MiniMax-M3
+
+
+# ─── OpenAI ──────────────────────────────────────────────────────────────────
+# https://platform.openai.com/
+# Keys look like: sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# Common models: gpt-4o, gpt-4o-mini, gpt-4-turbo, o1-mini, o1, …
+#
+# LLM_ENDPOINT=https://api.openai.com/v1
+# LLM_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# LLM_MODEL=gpt-4o-mini
+
+
+# ─── OpenRouter (Claude, Llama, Mistral, Gemini, …) ────────────────────────
+# https://openrouter.ai/
+# One OpenAI-compatible endpoint that fronts hundreds of models. Easiest way
+# to use Anthropic Claude, Meta Llama, Google Gemini, etc. without writing a
+# custom adapter.
+#
+# Keys look like: sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# Model names are namespaced: anthropic/claude-3.5-sonnet, openai/gpt-4o,
+# meta-llama/llama-3.1-405b-instruct, google/gemini-2.0-flash-exp, …
+#
+# LLM_ENDPOINT=https://openrouter.ai/api/v1
+# LLM_API_KEY=sk-or-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# LLM_MODEL=anthropic/claude-3.5-sonnet
+
+
+# ─── Poe ─────────────────────────────────────────────────────────────────────
+# https://poe.com/
+# Poe exposes an OpenAI-compatible API for the bots you've created in their
+# UI. Create a bot there first (free), then use its exact name as the model.
+#
+# LLM_ENDPOINT=https://api.poe.com/v1
+# LLM_API_KEY=sk-poe-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# LLM_MODEL=Claude-3.5-Sonnet
+
+
+# ─── Anthropic Claude (DIRECT — needs a server adapter) ─────────────────────
+# https://console.anthropic.com/
+# Anthropic's native API is NOT OpenAI-compatible — it lives at
+# POST /v1/messages with a different body shape (system message is a
+# top-level field, not a message) and a different response shape.
+#
+# MelodyMuse's server does not currently talk to Anthropic's native API
+# directly. Two options:
+#
+#   1. Use OpenRouter above — same model, OpenAI-compatible, zero code
+#      changes.
+#   2. Add a small adapter to server.mjs that translates the request
+#      to Anthropic's Messages API format. Roughly 30 lines of code.
+#
+# If you do add the adapter, the endpoint would be:
+#
+# LLM_ENDPOINT=https://api.anthropic.com
+# LLM_API_KEY=sk-ant-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+# LLM_MODEL=claude-3-5-sonnet-latest
+
+
 # ─────────────────────────────────────────────────────────────────────────────
 # Vite dev environment (only used by `npm run dev`, not by the server)
 # ─────────────────────────────────────────────────────────────────────────────

src/components/EqualizerIcon.tsx

@@ -1,35 +1,92 @@
-// Animated equalizer/waveform icon for the MelodyMuse header.
+// Equalizer/waveform mark for the MelodyMuse header. The SVG has explicit
-export function EqualizerIcon({ className = 'w-7 h-7' }: { className?: string }) {
+// width/height attributes (in addition to the Tailwind class) so it can't
+// accidentally balloon to fill its parent if the CSS fails to load.
+
+interface EqualizerIconProps {
+  className?: string;
+  size?: number;
+}
+
+export function EqualizerIcon({ className, size = 24 }: EqualizerIconProps) {
   return (
     <svg
-      className={className}
+      width={size}
+      height={size}
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
+      className={className}
     >
       <defs>
-        <linearGradient id="eq-grad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+        <linearGradient
+          id="eq-grad"
+          x1="0"
+          y1="0"
+          x2="32"
+          y2="32"
+          gradientUnits="userSpaceOnUse"
+        >
           <stop offset="0" stopColor="#a78bfa" />
           <stop offset="1" stopColor="#22d3ee" />
         </linearGradient>
       </defs>
       <g stroke="url(#eq-grad)" strokeWidth="2.4" strokeLinecap="round">
         <line x1="5" y1="13" x2="5" y2="19">
-          <animate attributeName="y1" values="13;8;13" dur="1.2s" repeatCount="indefinite" />
+          <animate
-          <animate attributeName="y2" values="19;24;19" dur="1.2s" repeatCount="indefinite" />
+            attributeName="y1"
+            values="13;8;13"
+            dur="1.2s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="y2"
+            values="19;24;19"
+            dur="1.2s"
+            repeatCount="indefinite"
+          />
         </line>
         <line x1="11" y1="9" x2="11" y2="23">
-          <animate attributeName="y1" values="9;14;9" dur="1.4s" repeatCount="indefinite" />
+          <animate
-          <animate attributeName="y2" values="23;18;23" dur="1.4s" repeatCount="indefinite" />
+            attributeName="y1"
+            values="9;14;9"
+            dur="1.4s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="y2"
+            values="23;18;23"
+            dur="1.4s"
+            repeatCount="indefinite"
+          />
         </line>
         <line x1="17" y1="11" x2="17" y2="21">
-          <animate attributeName="y1" values="11;6;11" dur="1.0s" repeatCount="indefinite" />
+          <animate
-          <animate attributeName="y2" values="21;26;21" dur="1.0s" repeatCount="indefinite" />
+            attributeName="y1"
+            values="11;6;11"
+            dur="1.0s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="y2"
+            values="21;26;21"
+            dur="1.0s"
+            repeatCount="indefinite"
+          />
         </line>
         <line x1="23" y1="8" x2="23" y2="24">
-          <animate attributeName="y1" values="8;13;8" dur="1.6s" repeatCount="indefinite" />
+          <animate
-          <animate attributeName="y2" values="24;19;24" dur="1.6s" repeatCount="indefinite" />
+            attributeName="y1"
+            values="8;13;8"
+            dur="1.6s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="y2"
+            values="24;19;24"
+            dur="1.6s"
+            repeatCount="indefinite"
+          />
         </line>
       </g>
     </svg>

src/components/InputPanel.tsx

@@ -1,8 +1,7 @@
 import { useState, type FormEvent, type KeyboardEvent } from "react";
 import { Link } from "react-router-dom";
 import {
-  ChevronDown,
+  ChevronRight,
-  ChevronUp,
   Loader2,
   Settings as SettingsIcon,
   Sparkles,
@@ -29,8 +28,6 @@ const LANGUAGES: { value: Language; label: string }[] = [
   { value: "Other", label: "Other" },
 ];
 
-// A handful of starter ideas shown as quick-fill chips. Kept short and varied
-// so the user can see the kind of input the model expects.
 const EXAMPLE_IDEAS: { text: string; mood: string; vocals: Vocals }[] = [
   {
     text: "melancholic lo-fi house beat for a rainy sunday morning",
@@ -71,10 +68,10 @@ export function InputPanel({
   disabled,
   cancelButton,
 }: InputPanelProps) {
-  const [optionsOpen, setOptionsOpen] = useState(false);
   const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(
     null,
   );
+  const [optionsOpen, setOptionsOpen] = useState(false);
   const elapsed = useElapsed(loading);
   const toast = useToast();
 
@@ -88,8 +85,7 @@ export function InputPanel({
     if (canSubmit) onSubmit();
   };
 
-  // Submit on Cmd/Ctrl+Enter, even from inside the textarea.
+  const onCmdEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
       submit();
@@ -107,7 +103,7 @@ export function InputPanel({
   };
 
   const handleStyleRandom = async (mode: "normal" | "crazy") => {
-    if (styleLoading) return; // already running, don't fire two in parallel
+    if (styleLoading) return;
     const ctrl = new AbortController();
     setStyleLoading(mode);
     try {
@@ -126,77 +122,81 @@ export function InputPanel({
   };
 
   return (
-    <div className="relative">
+    <form onSubmit={submit} className="space-y-6">
-      {/* Animated gradient backdrop behind the header */}
+      {/* Brand */}
-      <div className="absolute -top-10 -left-10 -right-10 h-64 animated-gradient-bg rounded-3xl -z-10 opacity-70 pointer-events-none" />
+      <div className="flex items-center gap-2.5">
-
+        <EqualizerIcon size={22} className="shrink-0" />
-      <div className="flex items-center gap-3 mb-1">
-        <EqualizerIcon className="w-8 h-8 shrink-0" />
-        <h1 className="text-3xl font-bold gradient-text leading-none">
-          MelodyMuse
-        </h1>
-      </div>
-      <p className="text-sm text-fg-muted mb-6 ml-11">
-        Generate your Suno song assets with AI
-      </p>
-
-      <form onSubmit={submit} className="space-y-4">
         <div>
-          <div className="flex items-center justify-between mb-1.5">
+          <h1 className="text-lg font-semibold tracking-tight gradient-text leading-none">
-            <label htmlFor="idea" className="sr-only">
+            MelodyMuse
-              Describe your music idea
+          </h1>
-            </label>
-            <span className="text-[11px] uppercase tracking-wider text-fg-muted">
-              Music idea
-            </span>
-            <button
-              type="button"
-              onClick={fillExample}
-              className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
-              title="Fill the input with a random example"
-            >
-              <Shuffle className="w-3 h-3" />
-              Try an example
-            </button>
-          </div>
-          <textarea
-            id="idea"
-            value={values.idea}
-            onChange={(e) => set("idea", e.target.value)}
-            onKeyDown={onKeyDown}
-            rows={4}
-            placeholder={`Describe your music idea...\ne.g. 'melancholic house beat for a rainy night'`}
-            className="textarea text-base leading-relaxed"
-            required
-          />
-          <p className="mt-1 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>
+      </div>
 
+      {/* Main textarea */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label
+            htmlFor="idea"
+            className="text-[11px] font-medium uppercase tracking-wider text-fg-muted"
+          >
+            Music idea
+          </label>
+          <button
+            type="button"
+            onClick={fillExample}
+            className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
+            title="Fill the input with a random example"
+          >
+            <Shuffle className="w-3 h-3" />
+            Try an example
+          </button>
+        </div>
+        <textarea
+          id="idea"
+          value={values.idea}
+          onChange={(e) => set("idea", e.target.value)}
+          onKeyDown={onCmdEnter}
+          rows={4}
+          placeholder="Describe your music idea…"
+          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="rounded-xl border border-border bg-bg-card/30">
         <button
           type="button"
           onClick={() => setOptionsOpen((v) => !v)}
-          className="w-full flex items-center justify-between px-3 py-2 rounded-lg border border-border bg-bg-card hover:bg-bg-hover transition-colors text-sm"
+          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"
           aria-expanded={optionsOpen}
         >
-          <span className="font-medium text-fg">⚙ Options</span>
+          <span className="flex items-center gap-2">
-          {optionsOpen ? (
+            <ChevronRight
-            <ChevronUp className="w-4 h-4 text-fg-muted" />
+              className={`w-3.5 h-3.5 transition-transform ${optionsOpen ? "rotate-90" : ""}`}
-          ) : (
+            />
-            <ChevronDown className="w-4 h-4 text-fg-muted" />
+            Options
-          )}
+          </span>
+          <span className="text-[11px] text-fg-muted">
+            {summaryCount(values) > 0
+              ? summaryCount(values) + " set"
+              : "defaults"}
+          </span>
         </button>
 
         {optionsOpen && (
-          <div className="space-y-4 p-4 rounded-lg border border-border bg-bg-card/50">
+          <div className="px-4 pb-4 pt-1 space-y-4 border-t border-border">
             <div>
               <label
                 htmlFor="language"
-                className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
+                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
               >
                 Language
               </label>
@@ -228,16 +228,18 @@ export function InputPanel({
               loading={styleLoading}
               onChange={(v) => set("style_hint", v)}
               onRandom={handleStyleRandom}
-              onCmdEnter={onKeyDown}
+              onCmdEnter={onCmdEnter}
             />
 
             <div>
               <label
                 htmlFor="mood"
-                className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
+                className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5"
               >
                 Mood{" "}
-                <span className="text-fg-muted/70 normal-case">(optional)</span>
+                <span className="text-fg-muted/70 normal-case font-normal">
+                  (optional)
+                </span>
               </label>
               <input
                 id="mood"
@@ -250,17 +252,17 @@ export function InputPanel({
             </div>
 
             <div>
-              <span className="block text-xs uppercase tracking-wider text-fg-muted mb-1">
+              <span className="block text-[11px] font-medium uppercase tracking-wider text-fg-muted mb-1.5">
                 Vocals
               </span>
-              <div className="grid grid-cols-2 gap-2">
+              <div className="inline-flex rounded-lg border border-border bg-bg-card p-0.5">
                 <button
                   type="button"
                   onClick={() => set("vocals", "vocals")}
                   className={
                     values.vocals === "vocals"
-                      ? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
+                      ? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
-                      : "chip justify-center py-2"
+                      : "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
                   }
                   aria-pressed={values.vocals === "vocals"}
                 >
@@ -271,8 +273,8 @@ export function InputPanel({
                   onClick={() => set("vocals", "instrumental")}
                   className={
                     values.vocals === "instrumental"
-                      ? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
+                      ? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
-                      : "chip justify-center py-2"
+                      : "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg transition-colors"
                   }
                   aria-pressed={values.vocals === "instrumental"}
                 >
@@ -282,47 +284,58 @@ export function InputPanel({
             </div>
           </div>
         )}
+      </div>
 
-        <div className="space-y-2">
+      {/* Generate */}
-          <button
+      <div className="space-y-2">
-            type="submit"
+        <button
-            disabled={!canSubmit}
+          type="submit"
-            className="w-full py-4 rounded-xl text-base font-semibold text-white shadow-lg shadow-violet-900/30 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
+          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 ? (
+        >
-              <>
+          {loading ? (
-                <Loader2 className="w-5 h-5 animate-spin" />
+            <>
-                <span>Generating… {formatElapsed(elapsed)}</span>
+              <Loader2 className="w-4 h-4 animate-spin" />
-              </>
+              Generating… {formatElapsed(elapsed)}
-            ) : (
+            </>
-              <>
+          ) : (
-                <Sparkles className="w-5 h-5" />
+            <>
-                Generate Song Assets
+              <Sparkles className="w-4 h-4" />
-              </>
+              Generate song assets
-            )}
+            </>
-          </button>
+          )}
-          {loading && cancelButton}
+        </button>
-        </div>
+        {loading && cancelButton}
+      </div>
 
-        <div className="text-center">
+      <div className="flex items-center justify-between text-xs">
-          <Link
+        <Link
-            to="/settings"
+          to="/settings"
-            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-fg-muted hover:text-fg transition-colors"
-          >
+        >
-            <SettingsIcon className="w-3.5 h-3.5" />
+          <SettingsIcon className="w-3.5 h-3.5" />
-            Settings
+          Settings
-          </Link>
+        </Link>
-        </div>
+      </div>
-      </form>
+    </form>
-    </div>
   );
 }
 
+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({
@@ -331,17 +344,17 @@ function StyleField({
   onChange,
   onRandom,
   onCmdEnter,
-}: StyleFieldProps & {
+}: StyleFieldProps) {
-  onCmdEnter: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
-}) {
   return (
     <div>
       <label
         htmlFor="style_hint"
-        className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
+        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">(optional)</span>
+        <span className="text-fg-muted/70 normal-case font-normal">
+          (optional)
+        </span>
       </label>
       <textarea
         id="style_hint"
@@ -357,13 +370,13 @@ function StyleField({
           type="button"
           onClick={() => onRandom("normal")}
           disabled={loading !== null}
-          className="btn-secondary text-xs py-2"
+          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.5 h-3.5 animate-spin" />
+            <Loader2 className="w-3 h-3 animate-spin" />
           ) : (
-            <Wand2 className="w-3.5 h-3.5" />
+            <Wand2 className="w-3 h-3" />
           )}
           Surprise me
         </button>
@@ -371,13 +384,13 @@ function StyleField({
           type="button"
           onClick={() => onRandom("crazy")}
           disabled={loading !== null}
-          className="btn-secondary text-xs py-2"
+          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.5 h-3.5 animate-spin" />
+            <Loader2 className="w-3 h-3 animate-spin" />
           ) : (
-            <Flame className="w-3.5 h-3.5" />
+            <Flame className="w-3 h-3" />
           )}
           Go crazy
         </button>

src/components/ResultCard.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
-import { RefreshCw } from 'lucide-react';
+import { RefreshCw } from "lucide-react";
 
 interface ResultCardProps {
-  index: number;     // 0..4 — controls the stagger delay
+  index: number;
   icon: ReactNode;
   title: string;
   onRegenerate?: () => void;
@@ -23,30 +23,38 @@ export function ResultCard({
   return (
     <section
       className={`card p-5 opacity-0 animate-fade-up stagger-${index}`}
-      style={{ animationFillMode: 'forwards' }}
+      style={{ animationFillMode: "forwards" }}
     >
       <header className="flex items-start justify-between gap-3 mb-4">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2.5 min-w-0">
-          <span className="text-lg leading-none">{icon}</span>
+          <span className="text-base leading-none shrink-0">{icon}</span>
-          <h2 className="text-base font-semibold text-fg">{title}</h2>
+          <h2 className="text-sm font-semibold text-fg truncate">{title}</h2>
         </div>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1 shrink-0">
           {headerExtra}
           {onRegenerate && (
             <button
               type="button"
               onClick={onRegenerate}
               disabled={regenerating}
-              className="btn-ghost"
+              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"
               aria-label={`Regenerate ${title}`}
             >
-              <RefreshCw className={`w-4 h-4 ${regenerating ? 'animate-spin' : ''}`} />
+              <RefreshCw
-              <span>Regenerate</span>
+                className={`w-3 h-3 ${regenerating ? "animate-spin" : ""}`}
+              />
+              Regenerate
             </button>
           )}
         </div>
       </header>
-      <div className={regenerating ? 'opacity-60 pointer-events-none transition-opacity' : ''}>
+      <div
+        className={
+          regenerating
+            ? "opacity-50 pointer-events-none transition-opacity"
+            : ""
+        }
+      >
         {children}
       </div>
     </section>

src/components/ResultsPanel.tsx

@@ -18,15 +18,15 @@ export type RegeneratingMap = Partial<Record<SectionKey | "all", boolean>>;
 
 interface ResultsPanelProps {
   assets: SongAssets | null;
-  originalAssets: SongAssets | null; // last *generated* values, for Revert
+  originalAssets: SongAssets | null;
-  loading: boolean; // initial "Generate all" skeleton
+  loading: boolean;
   selectedTitleIndex: number;
   onSelectTitle: (i: number) => void;
   onChange: <K extends keyof SongAssets>(key: K, value: SongAssets[K]) => void;
   onChangeVideoPrompt: (index: number, value: string) => void;
   onRegenerateAll: () => void;
   onRegenerateSection: (section: SectionKey) => void;
-  onCancel?: () => void; // cancel the in-flight generation
+  onCancel?: () => void;
   anyRegenerating: boolean;
   regenerating: RegeneratingMap;
 }
@@ -49,17 +49,17 @@ export function ResultsPanel({
 
   return (
     <div>
-      <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/80 backdrop-blur border-b border-border mb-6 flex items-center justify-between gap-3">
+      <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">
-        <h2 className="text-lg font-semibold text-fg">Results</h2>
+        <h2 className="text-sm font-semibold text-fg">Results</h2>
         <div className="flex items-center gap-1">
           {anyRegenerating && onCancel && (
             <button
               type="button"
               onClick={onCancel}
-              className="btn-ghost"
+              className="px-2.5 py-1.5 rounded-md text-xs font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
               aria-label="Cancel generation"
             >
-              <span className="text-rose-300">Cancel</span>
+              Cancel
             </button>
           )}
           {assets && (
@@ -67,12 +67,12 @@ export function ResultsPanel({
               type="button"
               onClick={onRegenerateAll}
               disabled={anyRegenerating}
-              className="btn-ghost"
+              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
-                className={`w-4 h-4 ${regenerating.all ? "animate-spin" : ""}`}
+                className={`w-3.5 h-3.5 ${regenerating.all ? "animate-spin" : ""}`}
               />
-              <span>Regenerate All</span>
+              Regenerate all
             </button>
           )}
         </div>
@@ -136,25 +136,28 @@ export function ResultsPanel({
 
 function EmptyState() {
   return (
-    <div className="card p-10 text-center">
+    <div className="flex flex-col items-center justify-center text-center px-6 py-20 rounded-2xl border border-dashed border-border">
-      <div className="mx-auto w-14 h-14 rounded-full gradient-bg-soft flex items-center justify-center mb-4">
+      <div className="relative w-16 h-16 mb-5">
-        <Music className="w-7 h-7 text-violet-300" />
+        <div className="absolute inset-0 rounded-full bg-gradient-to-br from-violet-500/20 to-cyan-500/20 blur-xl" />
+        <div className="relative w-full h-full rounded-full bg-bg-card border border-border flex items-center justify-center">
+          <Music className="w-7 h-7 text-violet-300" />
+        </div>
       </div>
-      <h3 className="text-base font-semibold text-fg mb-1">
+      <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 mx-auto">
+      <p className="text-sm text-fg-muted max-w-sm leading-relaxed">
         Describe a music idea on the left and press{" "}
-        <kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono">
+        <kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono text-fg">
           Generate
         </kbd>{" "}
-        to create titles, lyrics, style, video prompts, and a YouTube
+        to get titles, lyrics, style, video prompts, and a YouTube description
-        description — all in one go.
+        in one go.
       </p>
-      <div className="mt-5 flex items-center justify-center gap-2 text-xs text-fg-muted">
+      <div className="mt-5 flex items-center gap-1.5 text-xs text-fg-muted">
-        <Sparkles className="w-3.5 h-3.5" />
+        <Sparkles className="w-3 h-3" />
-        Tip: open <span className="text-fg">Settings</span> to add your API key
+        First time? Open <span className="text-fg">Settings</span> to add your
-        first.
+        API key.
       </div>
     </div>
   );

src/components/StickyZipBar.tsx

@@ -1,5 +1,5 @@
-import { FolderArchive, Download } from 'lucide-react';
+import { FolderArchive, Download } from "lucide-react";
-import { sanitizeFilename } from '../lib/zip';
+import { sanitizeFilename } from "../lib/zip";
 
 interface StickyZipBarProps {
   title: string | undefined;
@@ -8,27 +8,30 @@ interface StickyZipBarProps {
 }
 
 export function StickyZipBar({ title, busy, onDownload }: StickyZipBarProps) {
-  const filename = title && title.trim().length > 0
+  const filename =
-    ? `${sanitizeFilename(title)}.zip`
+    title && title.trim().length > 0 ? `${sanitizeFilename(title)}.zip` : null;
-    : null;
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-bg/90 backdrop-blur supports-[backdrop-filter]:bg-bg/70">
+    <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" />
-          <span className="truncate font-mono">
+          <span className="truncate font-mono text-[13px]">
-            {filename ?? <span className="text-fg-muted">Select a title to name your download</span>}
+            {filename ?? (
+              <span className="text-fg-muted">
+                Select a title to name your download
+              </span>
+            )}
           </span>
         </div>
         <button
           type="button"
           onClick={onDownload}
           disabled={!filename || busy}
-          className="btn-primary py-2.5 px-5"
+          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" />
-          {filename ? 'Download ZIP' : 'Select a title first'}
+          {filename ? "Download ZIP" : "Select a title first"}
         </button>
       </div>
     </div>

src/components/ThemeToggle.tsx

@@ -1,28 +0,0 @@
-import { Moon, Sun } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { getStoredTheme, toggleTheme, type Theme } from '../lib/theme';
-
-export function ThemeToggle() {
-  const [theme, setTheme] = useState<Theme>('dark');
-
-  useEffect(() => {
-    setTheme(getStoredTheme());
-  }, []);
-
-  const onClick = () => {
-    const next = toggleTheme();
-    setTheme(next);
-  };
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="btn-ghost p-2"
-      aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-      title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-    >
-      {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
-    </button>
-  );
-}

src/index.css

@@ -3,147 +3,138 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+    :root {
-    color-scheme: dark;
+        color-scheme: dark;
-  }
+    }
 
-  html.dark {
+    html,
-    color-scheme: dark;
+    body,
-  }
+    #root {
+        height: 100%;
+    }
 
-  html:not(.dark) {
+    body {
-    color-scheme: light;
+        @apply bg-bg text-fg antialiased font-sans;
-  }
+        margin: 0;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: "cv11", "ss01", "ss03";
+    }
 
-  html, body, #root {
+    /* Subtle, modern focus ring — keyboard only */
-    height: 100%;
+    :focus-visible {
-  }
+        outline: 2px solid theme("colors.accent.primary");
+        outline-offset: 2px;
+        border-radius: 4px;
+    }
 
-  body {
+    /* Custom selection color */
-    @apply bg-bg text-fg antialiased font-sans;
+    ::selection {
-    margin: 0;
+        background: rgba(124, 58, 237, 0.3);
-    -webkit-font-smoothing: antialiased;
+        color: #f1f5f9;
-    -moz-osx-font-smoothing: grayscale;
+    }
-  }
-
-  html:not(.dark) body {
-    @apply bg-bgLight text-fg-dark;
-  }
 }
 
 @layer components {
-  .card {
+    .card {
-    @apply bg-bg-card border border-border rounded-2xl;
+        @apply bg-bg-card border border-border rounded-2xl;
-  }
+    }
 
-  html:not(.dark) .card {
+    .card-hover {
-    @apply bg-bgLight-card border-borderLight;
+        @apply hover:bg-bg-hover transition-colors duration-150;
-  }
+    }
 
-  .card-hover {
+    .btn-primary {
-    @apply hover:bg-bg-hover transition-colors duration-150;
+        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
-  }
-
-  html:not(.dark) .card-hover:hover {
-    @apply bg-slate-50;
-  }
-
-  .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
            bg-accent-primary hover:bg-violet-500 active:bg-violet-700
            transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
+    }
 
-  .btn-secondary {
+    .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-medium
-           bg-bg-hover border border-border text-fg hover:bg-bg
+           bg-bg-card border border-border text-fg hover:bg-bg-hover
            transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
+    }
 
-  html:not(.dark) .btn-secondary {
+    .btn-ghost {
-    @apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
+        @apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
-  }
-
-  .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
            transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
-  }
+    }
 
-  html:not(.dark) .btn-ghost {
+    .input {
-    @apply text-slate-500 hover:text-fg-dark hover:bg-slate-100;
+        @apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[14px] text-fg
-  }
+           placeholder-fg-muted/70
+           focus:outline-none focus:border-accent-primary/60
+           focus:ring-1 focus:ring-accent-primary/20
+           transition-colors duration-150;
+    }
 
-  .input {
+    .textarea {
-    @apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-fg
+        @apply input resize-y;
-           placeholder-fg-muted focus:outline-none focus:border-accent-primary
+    }
-           focus:ring-1 focus:ring-accent-primary/40 transition-colors duration-150;
-  }
 
-  html:not(.dark) .input {
+    .chip {
-    @apply bg-white border-borderLight text-fg-dark placeholder:text-slate-400;
+        @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
-  }
-
-  .textarea {
-    @apply input resize-y;
-  }
-
-  .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
            transition-colors duration-150;
-  }
+    }
 
-  html:not(.dark) .chip {
+    .gradient-text {
-    @apply bg-white border-borderLight text-fg-dark hover:bg-slate-50;
+        background: linear-gradient(135deg, #c4b5fd 0%, #67e8f9 100%);
-  }
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
 
-  .gradient-text {
+    .gradient-bg {
-    @apply bg-gradient-to-r from-violet-400 via-fuchsia-400 to-cyan-400 bg-clip-text text-transparent;
+        background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
-  }
+    }
 
-  .gradient-bg {
+    .gradient-bg-soft {
-    background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
+        background: linear-gradient(
-  }
+            135deg,
+            rgba(124, 58, 237, 0.18) 0%,
+            rgba(6, 182, 212, 0.12) 50%,
+            rgba(8, 8, 16, 0) 100%
+        );
+    }
 
-  .gradient-bg-soft {
+    /* Stagger delays for the result cards' fade-up animation. */
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(6, 182, 212, 0.12) 50%, rgba(8, 8, 16, 0) 100%);
+    .stagger-0 {
-  }
+        animation-delay: 0ms;
-
+    }
-  .animated-gradient-bg {
+    .stagger-1 {
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(6, 182, 212, 0.20) 35%, rgba(8, 8, 16, 0) 70%, rgba(124, 58, 237, 0.15) 100%);
+        animation-delay: 80ms;
-    background-size: 200% 200%;
+    }
-    animation: gradient-shift 8s ease infinite;
+    .stagger-2 {
-  }
+        animation-delay: 160ms;
-
+    }
-  .stagger-0 { animation-delay: 0ms; }
+    .stagger-3 {
-  .stagger-1 { animation-delay: 80ms; }
+        animation-delay: 240ms;
-  .stagger-2 { animation-delay: 160ms; }
+    }
-  .stagger-3 { animation-delay: 240ms; }
+    .stagger-4 {
-  .stagger-4 { animation-delay: 320ms; }
+        animation-delay: 320ms;
+    }
 }
 
 @layer utilities {
-  .scrollbar-thin {
+    .scrollbar-thin {
-    scrollbar-width: thin;
+        scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
-  }
+    }
 
-  html:not(.dark) .scrollbar-thin {
+    .scrollbar-thin::-webkit-scrollbar {
-    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+        width: 8px;
-  }
+        height: 8px;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar {
+    .scrollbar-thin::-webkit-scrollbar-thumb {
-    width: 8px;
+        background-color: rgba(255, 255, 255, 0.08);
-    height: 8px;
+        border-radius: 4px;
-  }
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
+    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+        background-color: rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
+    }
-  }
-
-  html:not(.dark) .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.15);
-  }
 }

src/lib/theme.ts

@@ -1,36 +0,0 @@
-// Theme management (dark / light) — single source of truth backed by localStorage.
-const STORAGE_KEY = 'melodymuse-theme';
-
-export type Theme = 'dark' | 'light';
-
-export function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'dark';
-  const stored = window.localStorage.getItem(STORAGE_KEY);
-  if (stored === 'dark' || stored === 'light') return stored;
-  return 'dark';
-}
-
-export function applyTheme(theme: Theme) {
-  const root = document.documentElement;
-  if (theme === 'dark') {
-    root.classList.add('dark');
-  } else {
-    root.classList.remove('dark');
-  }
-}
-
-export function setStoredTheme(theme: Theme) {
-  window.localStorage.setItem(STORAGE_KEY, theme);
-  applyTheme(theme);
-}
-
-export function toggleTheme(): Theme {
-  const next: Theme = getStoredTheme() === 'dark' ? 'light' : 'dark';
-  setStoredTheme(next);
-  return next;
-}
-
-// Used in main.tsx before React mounts.
-export function initTheme() {
-  applyTheme(getStoredTheme());
-}

src/main.tsx

@@ -1,14 +1,10 @@
-import { StrictMode } from 'react';
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from "react-router-dom";
-import App from './App';
+import App from "./App";
-import './index.css';
+import "./index.css";
-import { initTheme } from './lib/theme';
 
-// Apply theme as early as possible to avoid a flash.
+createRoot(document.getElementById("root")!).render(
-initTheme();
-
-createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
       <App />

src/pages/HomePage.tsx

@@ -7,9 +7,9 @@ import {
   type SectionKey,
 } from "../components/ResultsPanel";
 import { StickyZipBar } from "../components/StickyZipBar";
-import { ThemeToggle } from "../components/ThemeToggle";
 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";
@@ -302,9 +302,14 @@ export function HomePage() {
 
   return (
     <div className="min-h-screen pb-32">
-      <header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
+      <header className="sticky top-0 z-20 bg-bg/80 backdrop-blur border-b border-border">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-          <span className="text-sm text-fg-muted">MelodyMuse</span>
+          <div className="flex items-center gap-2.5">
+            <EqualizerIcon size={18} className="shrink-0" />
+            <span className="text-sm font-medium text-fg-muted">
+              MelodyMuse
+            </span>
+          </div>
           <div className="flex items-center gap-3">
             {serverOk === false && (
               <span
@@ -314,7 +319,6 @@ export function HomePage() {
                 Server offline
               </span>
             )}
-            <ThemeToggle />
           </div>
         </div>
       </header>

src/pages/SettingsPage.tsx

@@ -9,7 +9,6 @@ import {
   Trash2,
   Server,
 } from "lucide-react";
-import { ThemeToggle } from "../components/ThemeToggle";
 import { useToast } from "../lib/toast";
 import { getServerStatus, type ServerStatus } from "../lib/llm";
 
@@ -115,17 +114,16 @@ export function SettingsPage() {
   return (
     <div className="min-h-screen">
       <header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
-        <div className="max-w-md mx-auto px-4 h-14 flex items-center justify-between">
+        <div className="max-w-md mx-auto px-4 h-14 flex items-center gap-2">
           <button
             type="button"
             onClick={() => navigate("/")}
-            className="btn-ghost p-2"
+            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" />
           </button>
           <h1 className="text-sm font-semibold text-fg">Settings</h1>
-          <ThemeToggle />
         </div>
       </header>