diff --git a/studio/backend/routes/settings.py b/studio/backend/routes/settings.py
index bbee374334..3fa9df0dde 100644
--- a/studio/backend/routes/settings.py
+++ b/studio/backend/routes/settings.py
@@ -1,6 +1,7 @@
 # SPDX-License-Identifier: AGPL-3.0-only
 # Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
+import re
 from typing import Literal, Optional
 from urllib.parse import unquote, urlsplit
 
@@ -551,6 +552,7 @@ class PersonalizationProfile(BaseModel):
     nickname: str = Field("", max_length = 200)
     avatarDataUrl: Optional[str] = Field(None, max_length = MAX_AVATAR_DATA_URL_BYTES)
     avatarShape: Literal["circle", "rounded"] = "circle"
+    showGreetingSloth: bool = True
 
     @field_validator("avatarDataUrl")
     @classmethod
@@ -562,11 +564,180 @@ class PersonalizationProfile(BaseModel):
         return value
 
 
+class PersonalizationCustomColors(BaseModel):
+    model_config = ConfigDict(extra = "ignore")
+
+    accent: Optional[str] = Field(None, pattern = r"^#[0-9a-fA-F]{6}$")
+    background: Optional[str] = Field(None, pattern = r"^#[0-9a-fA-F]{6}$")
+    foreground: Optional[str] = Field(None, pattern = r"^#[0-9a-fA-F]{6}$")
+
+
+class PersonalizationCustomColorModes(BaseModel):
+    model_config = ConfigDict(extra = "ignore")
+
+    light: PersonalizationCustomColors = Field(default_factory = PersonalizationCustomColors)
+    dark: PersonalizationCustomColors = Field(default_factory = PersonalizationCustomColors)
+
+
+MAX_IMPORTED_FONTS = 3
+# ~1.5 MB font file as base64; matches MAX_IMPORTED_FONT_DATA_URL_LENGTH in
+# the frontend appearance-custom-store.
+MAX_FONT_DATA_URL_LENGTH = 2_200_000
+# Aggregate cap across all imported fonts; matches
+# MAX_TOTAL_IMPORTED_FONT_DATA_URL_LENGTH in the frontend so a synced payload
+# always fits the browser's localStorage quota.
+MAX_TOTAL_FONT_DATA_URL_LENGTH = 4_400_000
+
+# Characters that could terminate a CSS declaration, escape the quoted
+# font-family value (backslash), or smuggle extra fallbacks/comments (comma,
+# slash) if a stored name ever reached a stylesheet. The server is the
+# authoritative gate; the frontend strips the same set before use.
+_FONT_NAME_FORBIDDEN = set(";{}()<>\"'\\/,`")
+
+
+def _check_font_name(value: str) -> str:
+    if any(c in _FONT_NAME_FORBIDDEN or ord(c) < 0x20 for c in value):
+        raise ValueError("Font name contains invalid characters.")
+    return value
+
+
+# Matches FONT_DATA_URL_PATTERN in the frontend appearance-custom-store.
+_FONT_DATA_URL_PATTERN = re.compile(
+    r"^data:(?:font/(?:woff2?|ttf|otf|sfnt)"
+    r"|application/(?:octet-stream|x-font-\w+|font-\w+));base64,[A-Za-z0-9+/=]+$"
+)
+
+
+class PersonalizationImportedFont(BaseModel):
+    model_config = ConfigDict(extra = "ignore")
+
+    name: str = Field(..., min_length = 1, max_length = 100)
+    dataUrl: str = Field(..., max_length = MAX_FONT_DATA_URL_LENGTH)
+
+    @field_validator("name")
+    @classmethod
+    def _validate_font_name(cls, value: str) -> str:
+        return _check_font_name(value)
+
+    @field_validator("dataUrl")
+    @classmethod
+    def _validate_font_data_url(cls, value: str) -> str:
+        # fullmatch, not match: re's ``$`` also matches just before a trailing
+        # newline, so ``match`` would accept "data:font/woff2;base64,AAAA\n",
+        # which the frontend's JS pattern (``$`` = end of string) rejects.
+        if not _FONT_DATA_URL_PATTERN.fullmatch(value):
+            raise ValueError("dataUrl must be a base64 font data URL.")
+        return value
+
+
+# Optional user-menu items; the boolean is each id's default visibility.
+# Settings-tab shortcuts ship hidden.
+SIDEBAR_MENU_ITEM_DEFAULTS = {
+    "api": True,
+    "darkMode": True,
+    "guidedTour": True,
+    "profile": False,
+    "appearance": False,
+    "resources": False,
+    "chat": False,
+    "connections": False,
+}
+
+# The sidebarMenu validator below dedupes ids and re-fills any missing ones, so
+# the stored list is always exactly one entry per id. Cap the *incoming* list at
+# a generous multiple rather than len(defaults): a stale or duplicated payload
+# (more items than distinct ids) must reach the validator so it can normalize,
+# instead of being rejected by the length constraint before dedupe runs. A
+# pathologically long list is still refused.
+MAX_SIDEBAR_MENU_INPUT_ITEMS = 4 * len(SIDEBAR_MENU_ITEM_DEFAULTS)
+
+
+class PersonalizationSidebarMenuItem(BaseModel):
+    model_config = ConfigDict(extra = "ignore")
+
+    id: Literal[
+        "api",
+        "darkMode",
+        "guidedTour",
+        "profile",
+        "appearance",
+        "resources",
+        "chat",
+        "connections",
+    ]
+    visible: bool = True
+
+
+def _default_sidebar_menu() -> "list[PersonalizationSidebarMenuItem]":
+    return [
+        PersonalizationSidebarMenuItem(id = item_id, visible = visible)
+        for item_id, visible in SIDEBAR_MENU_ITEM_DEFAULTS.items()
+    ]
+
+
+class PersonalizationCustomization(BaseModel):
+    model_config = ConfigDict(extra = "ignore")
+
+    colors: PersonalizationCustomColorModes = Field(default_factory = PersonalizationCustomColorModes)
+    uiFont: Optional[str] = Field(None, max_length = 200)
+    headingFont: Optional[str] = Field(None, max_length = 200)
+    chatFont: Optional[str] = Field(None, max_length = 200)
+    codeFont: Optional[str] = Field(None, max_length = 200)
+    importedFonts: list[PersonalizationImportedFont] = Field(
+        default_factory = list, max_length = MAX_IMPORTED_FONTS
+    )
+
+    @field_validator("importedFonts")
+    @classmethod
+    def _validate_total_font_size(
+        cls, value: list[PersonalizationImportedFont]
+    ) -> list[PersonalizationImportedFont]:
+        if sum(len(f.dataUrl) for f in value) > MAX_TOTAL_FONT_DATA_URL_LENGTH:
+            raise ValueError("Imported fonts exceed the total size limit.")
+        return value
+
+    @field_validator("uiFont", "headingFont", "chatFont", "codeFont")
+    @classmethod
+    def _validate_selected_fonts(cls, value: Optional[str]) -> Optional[str]:
+        # Selected font names reach CSS the same way imported names do.
+        return value if value is None else _check_font_name(value)
+
+    uiFontSize: Optional[int] = Field(None, ge = 12, le = 20)
+    codeFontSize: Optional[int] = Field(None, ge = 10, le = 20)
+    contrast: int = Field(50, ge = 0, le = 100)
+    pointerCursors: bool = False
+    reduceMotion: Literal["system", "on", "off"] = "system"
+    fontSmoothing: bool = True
+    edgeFades: bool = True
+    sidebarMenu: list[PersonalizationSidebarMenuItem] = Field(
+        default_factory = _default_sidebar_menu,
+        max_length = MAX_SIDEBAR_MENU_INPUT_ITEMS,
+    )
+
+    @field_validator("sidebarMenu")
+    @classmethod
+    def _validate_sidebar_menu(
+        cls, value: list[PersonalizationSidebarMenuItem]
+    ) -> list[PersonalizationSidebarMenuItem]:
+        # Drop duplicate ids (keep the first) and re-append any missing ids so
+        # the stored list always covers every optional menu item exactly once.
+        seen: set[str] = set()
+        items = [item for item in value if not (item.id in seen or seen.add(item.id))]
+        for item_id, visible in SIDEBAR_MENU_ITEM_DEFAULTS.items():
+            if item_id not in seen:
+                items.append(PersonalizationSidebarMenuItem(id = item_id, visible = visible))
+        return items
+
+
 class PersonalizationAppearance(BaseModel):
     model_config = ConfigDict(extra = "ignore")
 
     theme: Literal["light", "dark", "system"] = "system"
+    palette: Literal["standard", "classic", "minimal"] = "standard"
     language: Optional[str] = Field(None, max_length = 20)
+    customization: PersonalizationCustomization = Field(
+        default_factory = PersonalizationCustomization
+    )
 
 
 class PersonalizationPayload(BaseModel):
@@ -579,6 +750,11 @@ class PersonalizationPayload(BaseModel):
 
 class PersonalizationResponse(PersonalizationPayload):
     saved: bool = False
+    # False when the stored record predates a field, so the client keeps local
+    # overrides instead of treating a server-filled default as an explicit value.
+    customizationSaved: bool = False
+    paletteSaved: bool = False
+    greetingSlothSaved: bool = False
 
 
 @router.get("/personalization", response_model = PersonalizationResponse)
@@ -588,15 +764,38 @@ def get_personalization_settings(
     stored = get_personalization()
     response = PersonalizationResponse.model_validate(stored or {})
     response.saved = bool(stored)
+    appearance = stored.get("appearance") if isinstance(stored, dict) else None
+    profile = stored.get("profile") if isinstance(stored, dict) else None
+    response.customizationSaved = isinstance(appearance, dict) and "customization" in appearance
+    response.paletteSaved = isinstance(appearance, dict) and "palette" in appearance
+    response.greetingSlothSaved = isinstance(profile, dict) and "showGreetingSloth" in profile
     return response
 
 
+def _merge_personalization(base: dict, overlay: dict) -> dict:
+    # Recursively overlay only the request's set fields onto the stored record,
+    # so a stale client that omits newer keys (palette, customization) does not
+    # materialize their defaults and defeat the *Saved legacy detection.
+    merged = dict(base)
+    for key, value in overlay.items():
+        existing = merged.get(key)
+        if isinstance(value, dict) and isinstance(existing, dict):
+            merged[key] = _merge_personalization(existing, value)
+        else:
+            merged[key] = value
+    return merged
+
+
 @router.put("/personalization", response_model = PersonalizationPayload)
 def update_personalization_settings(
     payload: PersonalizationPayload, current_subject: str = Depends(get_current_subject)
 ) -> PersonalizationPayload:
     try:
-        set_personalization(payload.model_dump())
+        # exclude_unset so absent fields are not persisted as defaults; merge so
+        # fields the request omits keep whatever the record already stored.
+        incoming = payload.model_dump(exclude_unset = True)
+        merged = _merge_personalization(get_personalization(), incoming)
+        set_personalization(merged)
     except ValueError as exc:
         raise log_and_http_error(
             exc,
@@ -605,4 +804,6 @@ def update_personalization_settings(
             event = "settings.update_personalization_failed",
             log = logger,
         ) from exc
-    return payload
+    # Return the stored record, not the defaults-filled request, so the response
+    # matches storage (and the next GET) for fields the client omitted.
+    return PersonalizationPayload.model_validate(merged)
diff --git a/studio/backend/tests/test_personalization_settings.py b/studio/backend/tests/test_personalization_settings.py
index c80bfa196b..0b3c20c789 100644
--- a/studio/backend/tests/test_personalization_settings.py
+++ b/studio/backend/tests/test_personalization_settings.py
@@ -16,15 +16,21 @@ if str(_BACKEND) not in sys.path:
 import utils.personalization_settings as pers  # noqa: E402
 from auth.authentication import get_current_subject  # noqa: E402
 from routes import settings as settings_routes  # noqa: E402
-from routes.settings import PersonalizationPayload  # noqa: E402
+from routes.settings import (  # noqa: E402
+    MAX_SIDEBAR_MENU_INPUT_ITEMS,
+    PersonalizationPayload,
+    SIDEBAR_MENU_ITEM_DEFAULTS,
+)
 
 
 def test_defaults_fill_missing_fields():
     p = PersonalizationPayload.model_validate({})
     assert p.version == pers.PERSONALIZATION_VERSION
     assert p.appearance.theme == "system"
+    assert p.appearance.palette == "standard"
     assert p.profile.avatarShape == "circle"
     assert p.profile.displayName == ""
+    assert p.profile.showGreetingSloth is True
 
 
 def test_unknown_keys_are_ignored():
@@ -39,6 +45,214 @@ def test_invalid_theme_rejected():
         PersonalizationPayload.model_validate({"appearance": {"theme": "neon"}})
 
 
+def test_invalid_palette_rejected():
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate({"appearance": {"palette": "neon"}})
+
+
+def test_customization_defaults():
+    p = PersonalizationPayload.model_validate({})
+    c = p.appearance.customization
+    assert c.contrast == 50
+    assert c.reduceMotion == "system"
+    assert c.fontSmoothing is True
+    assert c.edgeFades is True
+    assert c.pointerCursors is False
+    assert c.colors.light.accent is None
+    assert c.headingFont is None
+    assert c.chatFont is None
+    assert c.uiFontSize is None
+    assert [(i.id, i.visible) for i in c.sidebarMenu] == [
+        ("api", True),
+        ("darkMode", True),
+        ("guidedTour", True),
+        ("profile", False),
+        ("appearance", False),
+        ("resources", False),
+        ("chat", False),
+        ("connections", False),
+    ]
+
+
+def test_customization_invalid_values_rejected():
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            {"appearance": {"customization": {"colors": {"light": {"accent": "red"}}}}}
+        )
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate({"appearance": {"customization": {"uiFontSize": 99}}})
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate({"appearance": {"customization": {"contrast": 500}}})
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            {"appearance": {"customization": {"reduceMotion": "sometimes"}}}
+        )
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            {"appearance": {"customization": {"sidebarMenu": [{"id": "chats"}]}}}
+        )
+
+
+def test_customization_sidebar_menu_normalized():
+    p = PersonalizationPayload.model_validate(
+        {
+            "appearance": {
+                "customization": {
+                    "sidebarMenu": [
+                        {"id": "guidedTour", "visible": False},
+                        {"id": "guidedTour", "visible": True},
+                        {"id": "api"},
+                    ]
+                }
+            }
+        }
+    )
+    # Duplicates keep the first entry; missing ids are appended with their
+    # default visibility.
+    assert [(i.id, i.visible) for i in p.appearance.customization.sidebarMenu] == [
+        ("guidedTour", False),
+        ("api", True),
+        ("darkMode", True),
+        ("profile", False),
+        ("appearance", False),
+        ("resources", False),
+        ("chat", False),
+        ("connections", False),
+    ]
+
+
+def _sidebar(items):
+    return {"appearance": {"customization": {"sidebarMenu": items}}}
+
+
+def test_customization_sidebar_menu_dedupes_oversized_payload():
+    # A stale/duplicated payload carries more items than there are distinct ids.
+    # It must reach the dedupe validator and normalize to exactly one entry per
+    # id, not be rejected by the length cap before dedupe runs.
+    ids = list(SIDEBAR_MENU_ITEM_DEFAULTS)
+    doubled = [{"id": i} for i in ids] + [{"id": i} for i in ids]
+    assert len(doubled) > len(SIDEBAR_MENU_ITEM_DEFAULTS)
+    p = PersonalizationPayload.model_validate(_sidebar(doubled))
+    result = [i.id for i in p.appearance.customization.sidebarMenu]
+    assert result == ids
+    assert len(result) == len(SIDEBAR_MENU_ITEM_DEFAULTS)
+
+
+def test_customization_sidebar_menu_rejects_pathological_length():
+    # The generous input cap still refuses an absurdly long list outright.
+    huge = [{"id": "api"} for _ in range(MAX_SIDEBAR_MENU_INPUT_ITEMS + 1)]
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(_sidebar(huge))
+
+
+def test_customization_imported_fonts_validated():
+    ok = PersonalizationPayload.model_validate(
+        {
+            "appearance": {
+                "customization": {
+                    "importedFonts": [{"name": "My Font", "dataUrl": "data:font/woff2;base64,AAAA"}]
+                }
+            }
+        }
+    )
+    assert ok.appearance.customization.importedFonts[0].name == "My Font"
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            {
+                "appearance": {
+                    "customization": {
+                        "importedFonts": [
+                            {"name": "Evil", "dataUrl": "https://example.com/font.woff2"}
+                        ]
+                    }
+                }
+            }
+        )
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            {
+                "appearance": {
+                    "customization": {
+                        "importedFonts": [
+                            {"name": f"Font {i}", "dataUrl": "data:font/ttf;base64,AAAA"}
+                            for i in range(4)
+                        ]
+                    }
+                }
+            }
+        )
+
+
+def _imported(fonts):
+    return {"appearance": {"customization": {"importedFonts": fonts}}}
+
+
+def test_imported_font_name_rejects_css_characters():
+    # Includes backslash (escapes the quoted family), comma/slash (extra
+    # fallbacks / comment start), and a control character.
+    for bad in ['Ev"il', "Ev;il", "Ev{il", "Ev<il", "Ev'il", "Ev\\il", "Ev,il", "Ev/il", "Ev\til"]:
+        with pytest.raises(ValidationError):
+            PersonalizationPayload.model_validate(
+                _imported([{"name": bad, "dataUrl": "data:font/woff2;base64,AAAA"}])
+            )
+
+
+def test_selected_font_names_validated():
+    for field in ("uiFont", "headingFont", "chatFont", "codeFont"):
+        for bad in ["Ev\\il", "Ev,il", "Ev/il", "Ev;il", "Ev\nil"]:
+            with pytest.raises(ValidationError):
+                PersonalizationPayload.model_validate(
+                    {"appearance": {"customization": {field: bad}}}
+                )
+    # A normal family name (spaces + digits) is still accepted.
+    p = PersonalizationPayload.model_validate(
+        {"appearance": {"customization": {"uiFont": "Source Serif 4"}}}
+    )
+    assert p.appearance.customization.uiFont == "Source Serif 4"
+
+
+def test_imported_font_data_url_must_be_base64():
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            _imported([{"name": "F", "dataUrl": "data:font/woff2;base64,?not base64?"}])
+        )
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            _imported([{"name": "F", "dataUrl": "data:application/json;base64,AAAA"}])
+        )
+
+
+def test_imported_font_data_url_rejects_newline():
+    # re's ``$`` also matches just before a trailing newline, so a data URL
+    # ending in "\n" (or with an embedded newline) must be rejected the same way
+    # the frontend JS pattern rejects it; otherwise the backend accepts a value
+    # the client would never have produced.
+    for bad in [
+        "data:font/woff2;base64,AAAA\n",
+        "data:font/woff2;base64,AAAA\nBBBB",
+        "\ndata:font/woff2;base64,AAAA",
+    ]:
+        with pytest.raises(ValidationError):
+            PersonalizationPayload.model_validate(_imported([{"name": "F", "dataUrl": bad}]))
+    # The same URL without the newline is still accepted.
+    ok = PersonalizationPayload.model_validate(
+        _imported([{"name": "F", "dataUrl": "data:font/woff2;base64,AAAA"}])
+    )
+    assert ok.appearance.customization.importedFonts[0].dataUrl == "data:font/woff2;base64,AAAA"
+
+
+def test_imported_fonts_total_size_capped():
+    big = "data:font/woff2;base64," + "A" * 1_600_000
+    with pytest.raises(ValidationError):
+        PersonalizationPayload.model_validate(
+            _imported([{"name": f"F{i}", "dataUrl": big} for i in range(3)])
+        )
+    # Two fit under the aggregate cap.
+    PersonalizationPayload.model_validate(
+        _imported([{"name": f"F{i}", "dataUrl": big} for i in range(2)])
+    )
+
+
 def test_avatar_must_be_image_data_url():
     with pytest.raises(ValidationError):
         PersonalizationPayload.model_validate(
@@ -132,8 +346,43 @@ def test_personalization_route_roundtrip_real_shape(monkeypatch):
             "nickname": "M",
             "avatarDataUrl": "/Sloth%20emojis/large%20sloth%20yay.png",
             "avatarShape": "rounded",
+            "showGreetingSloth": False,
+        },
+        "appearance": {
+            "theme": "dark",
+            "palette": "classic",
+            "language": "en",
+            "customization": {
+                "colors": {
+                    "light": {"accent": "#339cff", "background": None, "foreground": None},
+                    "dark": {"accent": None, "background": "#111111", "foreground": None},
+                },
+                "uiFont": "SF Pro Text",
+                "headingFont": "Avenir Next",
+                "chatFont": "Georgia",
+                "codeFont": None,
+                "importedFonts": [
+                    {"name": "SF Pro Text", "dataUrl": "data:font/woff2;base64,AAAA"}
+                ],
+                "uiFontSize": 14,
+                "codeFontSize": 13,
+                "contrast": 60,
+                "pointerCursors": True,
+                "reduceMotion": "off",
+                "fontSmoothing": True,
+                "edgeFades": False,
+                "sidebarMenu": [
+                    {"id": "darkMode", "visible": True},
+                    {"id": "api", "visible": False},
+                    {"id": "guidedTour", "visible": True},
+                    {"id": "profile", "visible": True},
+                    {"id": "appearance", "visible": False},
+                    {"id": "resources", "visible": False},
+                    {"id": "chat", "visible": False},
+                    {"id": "connections", "visible": False},
+                ],
+            },
         },
-        "appearance": {"theme": "dark", "language": "en"},
     }
     put = client.put("/api/settings/personalization", json = payload)
     assert put.status_code == 200
@@ -142,5 +391,109 @@ def test_personalization_route_roundtrip_real_shape(monkeypatch):
     assert saved.status_code == 200
     body = saved.json()
     assert body["saved"] is True
+    assert body["customizationSaved"] is True
+    assert body["paletteSaved"] is True
+    assert body["greetingSlothSaved"] is True
     assert body["profile"] == payload["profile"]
     assert body["appearance"] == payload["appearance"]
+
+
+def test_personalization_get_flags_legacy_fields(monkeypatch):
+    # A record written before these fields existed must report them as unsaved
+    # so the client keeps local overrides instead of the server-filled defaults.
+    store: dict = {
+        pers.PERSONALIZATION_SETTING_KEY: {
+            "version": 1,
+            "profile": {"displayName": "Mike"},
+            "appearance": {"theme": "dark"},
+        }
+    }
+    monkeypatch.setattr("storage.studio_db.get_app_setting", lambda k, d = None: store.get(k, d))
+
+    app = FastAPI()
+    app.dependency_overrides[get_current_subject] = lambda: "unsloth"
+    app.include_router(settings_routes.router, prefix = "/api/settings")
+    body = TestClient(app).get("/api/settings/personalization").json()
+    assert body["saved"] is True
+    assert body["customizationSaved"] is False
+    assert body["paletteSaved"] is False
+    assert body["greetingSlothSaved"] is False
+
+
+def test_personalization_put_preserves_absent_fields(monkeypatch):
+    # A stale client that omits palette/customization must not materialize them,
+    # so the record stays legacy and GET keeps reporting those fields unsaved.
+    store: dict = {}
+    monkeypatch.setattr("storage.studio_db.get_app_setting", lambda k, d = None: store.get(k, d))
+    monkeypatch.setattr("storage.studio_db.upsert_app_settings", lambda d: store.update(d))
+
+    app = FastAPI()
+    app.dependency_overrides[get_current_subject] = lambda: "unsloth"
+    app.include_router(settings_routes.router, prefix = "/api/settings")
+    client = TestClient(app)
+
+    put = client.put(
+        "/api/settings/personalization",
+        json = {
+            "version": 1,
+            "profile": {"displayName": "Mike"},
+            "appearance": {"theme": "dark", "language": "en"},
+        },
+    )
+    assert put.status_code == 200
+
+    stored_appearance = store[pers.PERSONALIZATION_SETTING_KEY]["appearance"]
+    assert "palette" not in stored_appearance
+    assert "customization" not in stored_appearance
+
+    body = client.get("/api/settings/personalization").json()
+    assert body["saved"] is True
+    assert body["paletteSaved"] is False
+    assert body["customizationSaved"] is False
+    assert body["greetingSlothSaved"] is False
+
+
+def test_personalization_put_preserves_existing_fields_on_stale_write(monkeypatch):
+    # A stale client that omits palette/customization must not clobber values a
+    # newer client already stored; the merge keeps them and only updates theme.
+    store: dict = {
+        pers.PERSONALIZATION_SETTING_KEY: {
+            "version": 1,
+            "profile": {"displayName": "Mike", "showGreetingSloth": False},
+            "appearance": {
+                "theme": "light",
+                "palette": "classic",
+                "customization": {"uiFont": "Georgia"},
+            },
+        }
+    }
+    monkeypatch.setattr("storage.studio_db.get_app_setting", lambda k, d = None: store.get(k, d))
+    monkeypatch.setattr("storage.studio_db.upsert_app_settings", lambda d: store.update(d))
+
+    app = FastAPI()
+    app.dependency_overrides[get_current_subject] = lambda: "unsloth"
+    app.include_router(settings_routes.router, prefix = "/api/settings")
+    client = TestClient(app)
+
+    put = client.put(
+        "/api/settings/personalization",
+        json = {"version": 1, "profile": {"displayName": "Mike"}, "appearance": {"theme": "dark"}},
+    )
+    assert put.status_code == 200
+
+    # The PUT response reflects the stored record, not the defaults-filled request:
+    # a stale write that omits palette/customization still echoes the preserved values.
+    put_body = put.json()
+    assert put_body["appearance"]["theme"] == "dark"
+    assert put_body["appearance"]["palette"] == "classic"
+    assert put_body["appearance"]["customization"]["uiFont"] == "Georgia"
+
+    stored_appearance = store[pers.PERSONALIZATION_SETTING_KEY]["appearance"]
+    assert stored_appearance["theme"] == "dark"
+    assert stored_appearance["palette"] == "classic"
+    assert stored_appearance["customization"]["uiFont"] == "Georgia"
+
+    body = client.get("/api/settings/personalization").json()
+    assert body["paletteSaved"] is True
+    assert body["customizationSaved"] is True
+    assert body["greetingSlothSaved"] is True
diff --git a/studio/frontend/index.html b/studio/frontend/index.html
index 0fbb4eaeeb..6a7eadc04e 100644
--- a/studio/frontend/index.html
+++ b/studio/frontend/index.html
@@ -8,6 +8,9 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Unsloth Studio</title>
+    <!-- Applies the stored theme before the bundle loads; external file
+         because the backend CSP is script-src 'self'. -->
+    <script src="/theme-boot.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/studio/frontend/package-lock.json b/studio/frontend/package-lock.json
index 80db64553a..1d5c09ba72 100644
--- a/studio/frontend/package-lock.json
+++ b/studio/frontend/package-lock.json
@@ -53,7 +53,6 @@
         "lucide-react": "^1.7.0",
         "mammoth": "^1.11.0",
         "motion": "^12.34.0",
-        "next-themes": "^0.4.6",
         "node-forge": "^1.4.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.4",
@@ -1704,7 +1703,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1725,7 +1723,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1746,7 +1743,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1767,7 +1763,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1788,7 +1783,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1809,7 +1803,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1830,7 +1823,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1851,7 +1843,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1872,7 +1863,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1893,7 +1883,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -1914,7 +1903,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">= 10"
       },
@@ -12570,16 +12558,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
-      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
diff --git a/studio/frontend/package.json b/studio/frontend/package.json
index a2eddecda3..fc6911c4be 100644
--- a/studio/frontend/package.json
+++ b/studio/frontend/package.json
@@ -62,7 +62,6 @@
     "lucide-react": "^1.7.0",
     "mammoth": "^1.11.0",
     "motion": "^12.34.0",
-    "next-themes": "^0.4.6",
     "node-forge": "^1.4.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
diff --git a/studio/frontend/public/theme-boot.js b/studio/frontend/public/theme-boot.js
new file mode 100644
index 0000000000..70bd93e0e1
--- /dev/null
+++ b/studio/frontend/public/theme-boot.js
@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+// Apply the stored theme and palette before the bundle loads so the first
+// paint is never the wrong mode. Loaded as an external classic script (it
+// blocks parsing, like an inline script) because the backend CSP only
+// allows script-src 'self'.
+try {
+  // Storage reads get their own guards so a blocked localStorage (private
+  // browsing) still resolves a mode from the OS preference.
+  var theme = "system";
+  var palette = null;
+  try {
+    theme = localStorage.getItem("theme") || "system";
+    palette = localStorage.getItem("palette");
+  } catch (e) {}
+  var dark =
+    theme === "dark" ||
+    (theme !== "light" && matchMedia("(prefers-color-scheme: dark)").matches);
+  var root = document.documentElement;
+  root.classList.toggle("dark", dark);
+  root.classList.toggle("light", !dark);
+  root.style.colorScheme = dark ? "dark" : "light";
+  if (palette === "classic" || palette === "minimal") {
+    root.setAttribute("data-palette", palette);
+  }
+} catch (e) {}
diff --git a/studio/frontend/src/app/provider.tsx b/studio/frontend/src/app/provider.tsx
index 176665769d..c35706e50a 100644
--- a/studio/frontend/src/app/provider.tsx
+++ b/studio/frontend/src/app/provider.tsx
@@ -1,33 +1,38 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
+import { LlamaUpdateBanner } from "@/components/llama-update-banner";
 import { StartupScreen } from "@/components/tauri/startup-screen";
 import { UpdateBanner } from "@/components/tauri/update-banner";
 import { UpdateScreen } from "@/components/tauri/update-screen";
 import {
   WindowTitlebar,
-  shouldUseNativeMacWindowTitlebar,
   shouldUseCustomWindowTitlebar,
+  shouldUseNativeMacWindowTitlebar,
 } from "@/components/tauri/window-titlebar";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { WebUpdateBanner } from "@/components/web/update-banner";
-import { LlamaUpdateBanner } from "@/components/llama-update-banner";
-import { DownloadManagerPanel } from "@/features/hub/download-manager";
+import { fetchDeviceType } from "@/config/env";
 import { getTauriAuthFailure, tauriAutoAuth } from "@/features/auth";
+import { DownloadManagerPanel } from "@/features/hub/download-manager";
 import { NativeIntentDrain } from "@/features/native-intents/native-intent-drain";
-import { useTauriBackend, type BackendStatus } from "@/hooks/use-tauri-backend";
+import {
+  applyCustomizationToDocument,
+  useAppearanceCustomStore,
+  useTheme,
+} from "@/features/settings";
+import { type BackendStatus, useTauriBackend } from "@/hooks/use-tauri-backend";
 import { useTauriUpdate } from "@/hooks/use-tauri-update";
 import { isTauri } from "@/lib/api-base";
-import { fetchDeviceType } from "@/config/env";
 import { useRouterState } from "@tanstack/react-router";
-import { ThemeProvider } from "next-themes";
+import { MotionConfig } from "motion/react";
 import {
+  type CSSProperties,
+  type ReactNode,
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
-  type ReactNode,
 } from "react";
 
 interface AppProviderProps {
@@ -43,7 +48,9 @@ const SETUP_WINDOW_WIDTH = 760;
 const SETUP_WINDOW_HEIGHT = 560;
 
 async function showSetupWindow(isCurrent: WindowLayoutGuard): Promise<void> {
-  const { getCurrentWindow, LogicalSize } = await import("@tauri-apps/api/window");
+  const { getCurrentWindow, LogicalSize } = await import(
+    "@tauri-apps/api/window"
+  );
   if (!isCurrent()) return;
 
   const win = getCurrentWindow();
@@ -57,7 +64,9 @@ async function showSetupWindow(isCurrent: WindowLayoutGuard): Promise<void> {
 }
 
 async function enforceMinimumWindowSize(
-  win: Awaited<ReturnType<typeof import("@tauri-apps/api/window")["getCurrentWindow"]>>,
+  win: Awaited<
+    ReturnType<typeof import("@tauri-apps/api/window")["getCurrentWindow"]>
+  >,
   LogicalSize: typeof import("@tauri-apps/api/window")["LogicalSize"],
   isCurrent: WindowLayoutGuard,
 ): Promise<void> {
@@ -76,10 +85,16 @@ async function enforceMinimumWindowSize(
   }
 }
 
-async function applyAppWindowLayout(isCurrent: WindowLayoutGuard): Promise<void> {
-  const { getCurrentWindow, currentMonitor, LogicalSize } = await import("@tauri-apps/api/window");
+async function applyAppWindowLayout(
+  isCurrent: WindowLayoutGuard,
+): Promise<void> {
+  const { getCurrentWindow, currentMonitor, LogicalSize } = await import(
+    "@tauri-apps/api/window"
+  );
   const { invoke } = await import("@tauri-apps/api/core");
-  const { restoreStateCurrent, StateFlags } = await import("@tauri-apps/plugin-window-state");
+  const { restoreStateCurrent, StateFlags } = await import(
+    "@tauri-apps/plugin-window-state"
+  );
   if (!isCurrent()) return;
 
   const win = getCurrentWindow();
@@ -123,7 +138,10 @@ async function applyAppWindowLayout(isCurrent: WindowLayoutGuard): Promise<void>
   if (!isCurrent()) return;
   // Apply constraints after restore/show: doing so before plugin restore can emit
   // a Resized event and overwrite the plugin's cached saved size.
-  await win.setSizeConstraints({ minWidth: MIN_WINDOW_WIDTH, minHeight: MIN_WINDOW_HEIGHT });
+  await win.setSizeConstraints({
+    minWidth: MIN_WINDOW_WIDTH,
+    minHeight: MIN_WINDOW_HEIGHT,
+  });
   if (!isCurrent()) return;
   await enforceMinimumWindowSize(win, LogicalSize, isCurrent);
 }
@@ -252,9 +270,18 @@ const CUSTOM_CHROME_STYLE = {
 function TauriWrapper({ children }: { children: ReactNode }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const {
-    status, logs, error, isExternalServer,
-    currentStepIndex, progressDetail, elevationPackages,
-    startInstall, retry, retryInstall, approveElevation, copyDiagnostics,
+    status,
+    logs,
+    error,
+    isExternalServer,
+    currentStepIndex,
+    progressDetail,
+    elevationPackages,
+    startInstall,
+    retry,
+    retryInstall,
+    approveElevation,
+    copyDiagnostics,
   } = useTauriBackend();
 
   const appliedWindowModeRef = useRef<TauriWindowMode | null>(null);
@@ -288,14 +315,18 @@ function TauriWrapper({ children }: { children: ReactNode }) {
 
     const layoutGeneration = windowLayoutGenerationRef.current + 1;
     windowLayoutGenerationRef.current = layoutGeneration;
-    const isCurrent = () => windowLayoutGenerationRef.current === layoutGeneration;
-    const applyWindowMode = nextMode === "setup" ? showSetupWindow : applyAppWindowLayout;
+    const isCurrent = () =>
+      windowLayoutGenerationRef.current === layoutGeneration;
+    const applyWindowMode =
+      nextMode === "setup" ? showSetupWindow : applyAppWindowLayout;
     applyWindowMode(isCurrent).catch(async () => {
       if (!isCurrent()) return;
       // On failure, at minimum make the window visible and resizable so user can fix manually.
       try {
         await showWindowFallback();
-      } catch { /* swallow — window may still be functional */ }
+      } catch {
+        /* swallow; window may still be functional */
+      }
     });
   }, [status]);
 
@@ -325,7 +356,9 @@ function TauriWrapper({ children }: { children: ReactNode }) {
       }
     });
 
-    return () => { disposed = true; };
+    return () => {
+      disposed = true;
+    };
   }, [status, desktopAuthRetry]);
 
   useEffect(() => {
@@ -370,7 +403,9 @@ function TauriWrapper({ children }: { children: ReactNode }) {
           positioned={false}
           enabled={showInteractiveApp && !hidesTitlebarSidebar}
         />
-        {showInteractiveApp ? <DownloadManagerPanel positioned={false} /> : null}
+        {showInteractiveApp ? (
+          <DownloadManagerPanel positioned={false} />
+        ) : null}
       </TauriUpdateLayer>
       {showInteractiveApp ? <NativeIntentDrain /> : null}
       {showInteractiveApp ? children : null}
@@ -378,7 +413,10 @@ function TauriWrapper({ children }: { children: ReactNode }) {
         <div className="pointer-events-none fixed inset-x-0 bottom-5 z-[9999] flex justify-center px-4">
           <div className="absolute inset-x-4 bottom-16 mx-auto flex max-w-[520px] flex-col items-center gap-2 rounded-2xl border border-border/70 bg-background/95 px-6 py-5 text-center shadow-xl">
             <div className="font-medium text-sm">Preparing Studio</div>
-            <div className="text-muted-foreground text-xs">The local backend is ready. Signing in to your desktop session before loading chats.</div>
+            <div className="text-muted-foreground text-xs">
+              The local backend is ready. Signing in to your desktop session
+              before loading chats.
+            </div>
           </div>
           <div className="rounded-full border border-border/70 bg-background/95 px-4 py-2 text-xs text-muted-foreground shadow-lg">
             Signing in to desktop session...
@@ -416,9 +454,9 @@ function TauriWrapper({ children }: { children: ReactNode }) {
           }
           style={MAC_NATIVE_CHROME_STYLE}
         >
-          {(!showApp || hidesTitlebarSidebar) ? (
+          {!showApp || hidesTitlebarSidebar ? (
             <div
-              data-tauri-drag-region
+              data-tauri-drag-region={true}
               aria-hidden="true"
               className="pointer-events-auto fixed inset-x-0 top-0 z-50 h-[var(--studio-mac-titlebar-height,34px)] select-none"
             />
@@ -428,13 +466,10 @@ function TauriWrapper({ children }: { children: ReactNode }) {
       );
     }
 
-    return (
-      <>{content}</>
-    );
+    return <>{content}</>;
   }
 
-  const showSidebarSurface =
-    showApp && !hidesTitlebarSidebar;
+  const showSidebarSurface = showApp && !hidesTitlebarSidebar;
 
   return (
     <div
@@ -442,20 +477,40 @@ function TauriWrapper({ children }: { children: ReactNode }) {
       style={CUSTOM_CHROME_STYLE}
     >
       <WindowTitlebar showSidebarSurface={showSidebarSurface} />
-      <div className="h-full min-h-0 overflow-hidden">
-        {content}
-      </div>
+      <div className="h-full min-h-0 overflow-hidden">{content}</div>
     </div>
   );
 }
 
+/**
+ * Mirrors the appearance customization store onto <html> (inline CSS vars,
+ * classes, attributes). Colors are per resolved light/dark mode, so re-apply
+ * whenever either the customization or the resolved theme changes.
+ */
+function AppearanceCustomizationEffect() {
+  const { resolved } = useTheme();
+  const customization = useAppearanceCustomStore((s) => s.customization);
+  useEffect(() => {
+    applyCustomizationToDocument(customization, resolved);
+  }, [customization, resolved]);
+  return null;
+}
+
+const REDUCED_MOTION_MAP = {
+  system: "user",
+  on: "always",
+  off: "never",
+} as const;
+
 export function AppProvider({ children }: AppProviderProps) {
+  const reduceMotion = useAppearanceCustomStore(
+    (s) => s.customization.reduceMotion,
+  );
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <MotionConfig reducedMotion={REDUCED_MOTION_MAP[reduceMotion]}>
       <TooltipProvider>
-        <TauriWrapper>
-          {children}
-        </TauriWrapper>
+        <AppearanceCustomizationEffect />
+        <TauriWrapper>{children}</TauriWrapper>
         <Toaster
           position="top-right"
           visibleToasts={2}
@@ -465,6 +520,6 @@ export function AppProvider({ children }: AppProviderProps) {
           offset={{ top: 12, right: 64 }}
         />
       </TooltipProvider>
-    </ThemeProvider>
+    </MotionConfig>
   );
 }
diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx
index 1a74b38524..25d88aeeea 100644
--- a/studio/frontend/src/components/app-sidebar.tsx
+++ b/studio/frontend/src/components/app-sidebar.tsx
@@ -56,6 +56,8 @@ import {
   ArrowRight02Icon,
   BadgeInfoIcon,
   ChefHatIcon,
+  CloudIcon,
+  CpuIcon,
   CursorInfo02Icon,
   DashboardCircleIcon,
   Delete02Icon,
@@ -68,7 +70,9 @@ import {
   Globe02Icon,
   HelpCircleIcon,
   Logout05Icon,
+  Message01Icon,
   MoreVerticalIcon,
+  PaintBrush02Icon,
   Search01Icon,
   PinIcon,
   PinOffIcon,
@@ -79,6 +83,7 @@ import {
   Settings02Icon,
   Sun03Icon,
   TestTube01Icon,
+  UserIcon,
   ZapIcon,
 } from "@hugeicons/core-free-icons";
 import {
@@ -109,7 +114,10 @@ import {
   type ProjectRecord,
   type SidebarItem,
 } from "@/features/chat";
-import { useSettingsDialogStore } from "@/features/settings";
+import {
+  useAppearanceCustomStore,
+  useSettingsDialogStore,
+} from "@/features/settings";
 import { useEffectiveProfile, UserAvatar } from "@/features/profile";
 import { fetchDeviceType, usePlatformStore } from "@/config/env";
 import { clearAuthTokens, logout } from "@/features/auth";
@@ -162,6 +170,19 @@ function getTourId(pathname: string): string | null {
   return null;
 }
 
+// Optional user-menu shortcuts that jump straight to a settings tab; the id
+// doubles as the settings dialog tab id.
+const SETTINGS_TAB_MENU_ITEMS: Record<
+  "profile" | "appearance" | "resources" | "chat" | "connections",
+  { icon: typeof ZapIcon; labelKey: TranslationKey }
+> = {
+  profile: { icon: UserIcon, labelKey: "settings.tabs.profile" },
+  appearance: { icon: PaintBrush02Icon, labelKey: "settings.tabs.appearance" },
+  resources: { icon: CpuIcon, labelKey: "settings.tabs.resources" },
+  chat: { icon: Message01Icon, labelKey: "settings.tabs.chat" },
+  connections: { icon: CloudIcon, labelKey: "settings.tabs.connections" },
+};
+
 // TestTube01Icon's last 2 paths are interior bubbles; slice to the first
 // 3 (outline + cap + liquid line) to drop them. Original export untouched.
 const TestTubeOutlineIcon = TestTube01Icon.slice(
@@ -290,6 +311,9 @@ function NavItem({
 export function AppSidebar() {
   const t = useT();
   const { isDark, toggleTheme, anchorRef } = useAnimatedThemeToggle();
+  const sidebarMenu = useAppearanceCustomStore(
+    (s) => s.customization.sidebarMenu,
+  );
   const [usesCustomTitlebar] = useState(shouldUseCustomWindowTitlebar);
   const [usesNativeMacTitlebar] = useState(shouldUseNativeMacWindowTitlebar);
   const { pathname, search } = useRouterState({
@@ -1068,7 +1092,7 @@ export function AppSidebar() {
                     <button
                       type="button"
                       onClick={togglePinned}
-                      className="inline-flex h-[33px] w-[32px] cursor-pointer items-center justify-center rounded-[10px] text-nav-icon-idle dark:text-nav-fg-muted transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="inline-flex h-[33px] w-[32px] cursor-pointer items-center justify-center rounded-[10px] text-nav-icon-idle dark:text-nav-fg-muted transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       aria-label={t("shell.aria.closeSidebar")}
                     >
                       <HugeiconsIcon icon={LayoutAlignLeftIcon} strokeWidth={1.75} className="size-icon" />
@@ -1091,7 +1115,7 @@ export function AppSidebar() {
                     <button
                       type="button"
                       onClick={togglePinned}
-                      className="inline-flex h-[33px] w-[32px] cursor-pointer items-center justify-center rounded-[10px] text-nav-fg transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="inline-flex h-[33px] w-[32px] cursor-pointer items-center justify-center rounded-[10px] text-nav-fg transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       aria-label={t("shell.aria.openSidebar")}
                     >
                       <HugeiconsIcon icon={LayoutAlignLeftIcon} strokeWidth={1.75} className="size-icon" />
@@ -1486,7 +1510,7 @@ export function AppSidebar() {
                     .openDialog("about", { scrollTarget: "about-updates" });
                   closeMobileIfOpen();
                 }}
-                className="flex h-[44px] w-full items-center gap-[9px] rounded-[14px] border border-border/60 bg-transparent px-2 py-[3px] text-left transition-colors hover:bg-nav-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:h-[34px] group-data-[collapsible=icon]:w-[34px] group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0"
+                className="flex h-[44px] w-full items-center gap-[9px] rounded-[14px] border border-border/60 bg-transparent px-2 py-[3px] text-left transition-colors hover:bg-nav-surface-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:h-[34px] group-data-[collapsible=icon]:w-[34px] group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:rounded-full group-data-[collapsible=icon]:p-0"
               >
                 <span
                   aria-hidden="true"
@@ -1568,39 +1592,71 @@ export function AppSidebar() {
                     <span>{t("shell.navigation.settings")}</span>
                     <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => useSettingsDialogStore.getState().openDialog("api-keys")}
-                  >
-                    <HugeiconsIcon icon={Globe02Icon} strokeWidth={1.75} className="size-[18px]" />
-                    <span>{t("shell.navigation.api")}</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    ref={anchorRef as React.Ref<HTMLDivElement>}
-                    onSelect={(e) => { e.preventDefault(); toggleTheme(); }}
-                  >
-                    {isDark ? <HugeiconsIcon icon={Sun03Icon} strokeWidth={1.75} className="size-icon" /> : <Moon strokeWidth={1.75} className="size-icon" />}
-                    <span>
-                      {isDark
-                        ? t("shell.navigation.lightMode")
-                        : t("shell.navigation.darkMode")}
-                    </span>
-                  </DropdownMenuItem>
-                  {getTourId(pathname) && (
-                    <DropdownMenuItem
-                      onSelect={() => {
-                        const tourId = getTourId(pathname);
-                        if (!tourId) return;
-                        window.dispatchEvent(
-                          new CustomEvent(TOUR_OPEN_EVENT, {
-                            detail: { id: tourId },
-                          }),
-                        );
-                      }}
-                    >
-                      <HugeiconsIcon icon={CursorInfo02Icon} strokeWidth={1.75} className="size-icon" />
-                      <span>{t("shell.navigation.guidedTour")}</span>
-                    </DropdownMenuItem>
-                  )}
+                  {/* Optional items follow the order and visibility set in
+                      Appearance settings; Settings above and the block after
+                      the separator are pinned. */}
+                  {sidebarMenu.map((item) => {
+                    if (!item.visible) return null;
+                    if (item.id === "api") {
+                      return (
+                        <DropdownMenuItem
+                          key={item.id}
+                          onSelect={() => useSettingsDialogStore.getState().openDialog("api-keys")}
+                        >
+                          <HugeiconsIcon icon={Globe02Icon} strokeWidth={1.75} className="size-[18px]" />
+                          <span>{t("shell.navigation.api")}</span>
+                        </DropdownMenuItem>
+                      );
+                    }
+                    if (item.id === "darkMode") {
+                      return (
+                        <DropdownMenuItem
+                          key={item.id}
+                          ref={anchorRef as React.Ref<HTMLDivElement>}
+                          onSelect={(e) => { e.preventDefault(); toggleTheme(); }}
+                        >
+                          {isDark ? <HugeiconsIcon icon={Sun03Icon} strokeWidth={1.75} className="size-icon" /> : <Moon strokeWidth={1.75} className="size-icon" />}
+                          <span>
+                            {isDark
+                              ? t("shell.navigation.lightMode")
+                              : t("shell.navigation.darkMode")}
+                          </span>
+                        </DropdownMenuItem>
+                      );
+                    }
+                    if (item.id === "guidedTour") {
+                      if (!getTourId(pathname)) return null;
+                      return (
+                        <DropdownMenuItem
+                          key={item.id}
+                          onSelect={() => {
+                            const tourId = getTourId(pathname);
+                            if (!tourId) return;
+                            window.dispatchEvent(
+                              new CustomEvent(TOUR_OPEN_EVENT, {
+                                detail: { id: tourId },
+                              }),
+                            );
+                          }}
+                        >
+                          <HugeiconsIcon icon={CursorInfo02Icon} strokeWidth={1.75} className="size-icon" />
+                          <span>{t("shell.navigation.guidedTour")}</span>
+                        </DropdownMenuItem>
+                      );
+                    }
+                    // Remaining ids are settings tabs shown by their tab name.
+                    const settingsTabId = item.id;
+                    const tab = SETTINGS_TAB_MENU_ITEMS[settingsTabId];
+                    return (
+                      <DropdownMenuItem
+                        key={item.id}
+                        onSelect={() => useSettingsDialogStore.getState().openDialog(settingsTabId)}
+                      >
+                        <HugeiconsIcon icon={tab.icon} strokeWidth={1.75} className="size-icon" />
+                        <span>{t(tab.labelKey)}</span>
+                      </DropdownMenuItem>
+                    );
+                  })}
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator className="mx-1! my-2.5! h-0! border-t border-border/70 bg-transparent!" />
                 <DropdownMenuItem
diff --git a/studio/frontend/src/components/assistant-ui/model-selector.tsx b/studio/frontend/src/components/assistant-ui/model-selector.tsx
index 1fddf077ba..6bfd1276ac 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector.tsx
@@ -168,9 +168,9 @@ function ModelSelectorTrigger({
           // Suppress the pill's hover background while the eject hit area is
           // hovered, so only the dot's own circle reacts.
           variant === "outline" &&
-            "rounded-full border border-border/60 hover:bg-[#ececec] has-[[data-eject-hit]:hover]:!bg-transparent dark:hover:bg-[#2d2e32]",
+            "rounded-full border border-border/60 hover:bg-accent has-[[data-eject-hit]:hover]:!bg-transparent",
           variant === "ghost" &&
-            "rounded-full hover:bg-[#ececec] has-[[data-eject-hit]:hover]:!bg-transparent dark:hover:bg-[#2d2e32]",
+            "rounded-full hover:bg-accent has-[[data-eject-hit]:hover]:!bg-transparent",
           variant === "muted" &&
             "rounded-full bg-muted hover:bg-muted/80 has-[[data-eject-hit]:hover]:!bg-muted",
           // More left padding than right; the chevron is pulled close to the
diff --git a/studio/frontend/src/components/assistant-ui/model-selector/folder-browser.tsx b/studio/frontend/src/components/assistant-ui/model-selector/folder-browser.tsx
index 6311e15bfe..16cc8a1956 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/folder-browser.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/folder-browser.tsx
@@ -18,8 +18,9 @@ import {
   type BrowseFoldersResponse,
   browseFolders,
 } from "@/features/chat/api/chat-api";
+import { ChevronUpStandardIcon } from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
-import { ArrowUp02Icon, Folder02Icon } from "@hugeicons/core-free-icons";
+import { Folder02Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -230,7 +231,7 @@ export function FolderBrowser({
                   className="flex w-full items-center gap-2 px-6 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                 >
                   <HugeiconsIcon
-                    icon={ArrowUp02Icon}
+                    icon={ChevronUpStandardIcon}
                     className="size-3 shrink-0"
                   />
                   <span className="font-mono">..</span>
diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
index ff0351883d..8e06181585 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
@@ -459,7 +459,7 @@ function ModelRow({
       }}
       onClick={onClick}
       className={cn(
-        "flex w-full items-center gap-2 rounded-full px-2 py-1.5 text-left text-sm transition-colors hover:bg-[#ececec] focus-visible:bg-[#ececec] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45 dark:hover:bg-[var(--sidebar-accent)] dark:focus-visible:bg-[var(--sidebar-accent)]",
+        "flex w-full items-center gap-2 rounded-full px-2 py-1.5 text-left text-sm transition-colors hover:bg-[#ececec] focus-visible:bg-[#ececec] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring dark:hover:bg-[var(--sidebar-accent)] dark:focus-visible:bg-[var(--sidebar-accent)]",
         selected && "bg-[#ececec] dark:bg-[var(--sidebar-accent)]",
         className,
       )}
@@ -935,7 +935,7 @@ function GgufVariantExpander({
                 handleVariantClick(v.quant, v.downloaded, expectedBytes)
               }
               className={cn(
-                "flex min-w-0 flex-1 items-center justify-between gap-2 rounded-full px-2 py-1 text-left text-sm transition-colors hover:bg-[#ececec] focus-visible:bg-[#ececec] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45 dark:hover:bg-[var(--sidebar-accent)] dark:focus-visible:bg-[var(--sidebar-accent)]",
+                "flex min-w-0 flex-1 items-center justify-between gap-2 rounded-full px-2 py-1 text-left text-sm transition-colors hover:bg-[#ececec] focus-visible:bg-[#ececec] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring dark:hover:bg-[var(--sidebar-accent)] dark:focus-visible:bg-[var(--sidebar-accent)]",
               )}
             >
               <span className="min-w-0 flex-1 truncate font-mono text-xs">
diff --git a/studio/frontend/src/components/assistant-ui/sources.tsx b/studio/frontend/src/components/assistant-ui/sources.tsx
index 7e5b52f7d0..18c62fc87f 100644
--- a/studio/frontend/src/components/assistant-ui/sources.tsx
+++ b/studio/frontend/src/components/assistant-ui/sources.tsx
@@ -104,7 +104,7 @@ function Source({
       variant={variant}
       size={size}
       className={cn(
-        "rounded-full cursor-pointer outline-none hover:bg-chat-icon-bg-hover! hover:text-chat-icon-fg-hover! focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "rounded-full cursor-pointer outline-none hover:bg-chat-icon-bg-hover! hover:text-chat-icon-fg-hover! focus-visible:border-ring",
         className,
       )}
     >
diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 230a1fb40e..5b6264c6d7 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -1217,7 +1217,7 @@ const ThreadComposerDock: FC<{
       <div
         aria-hidden={true}
         className={cn(
-          "absolute inset-x-0 bottom-0 bg-gradient-to-t from-background from-[calc(100%_-_28px)] to-[rgb(from_var(--background)_r_g_b/0)]",
+          "thread-bottom-fade absolute inset-x-0 bottom-0 bg-gradient-to-t from-background from-[calc(100%_-_28px)] to-[rgb(from_var(--background)_r_g_b/0)]",
           queueVisible
             ? "h-32 backdrop-blur-[1px] [mask-image:linear-gradient(to_top,black_0%,black_58%,transparent_100%)]"
             : "top-[10px]",
@@ -1317,6 +1317,7 @@ const ThreadWelcome: FC<{
   const incognito = useChatRuntimeStore((s) => s.incognito);
   const displayName = useUserProfileStore((s) => s.displayName);
   const nickname = useUserProfileStore((s) => s.nickname);
+  const showGreetingSloth = useUserProfileStore((s) => s.showGreetingSloth);
   const [welcome, setWelcome] = useState<Welcome>(DEFAULT_WELCOME);
 
   useEffect(() => {
@@ -1333,10 +1334,12 @@ const ThreadWelcome: FC<{
         <div className="aui-thread-welcome-message flex w-full flex-col justify-center gap-9 px-4">
           {/* Center the greeting (sloth + title) over the composer. */}
           <div className="flex flex-row items-center justify-center gap-[15px]">
-            <MascotImg
-              src={currentEmojiSrc}
-              className="size-[44px] -translate-y-[2px]"
-            />
+            {showGreetingSloth && (
+              <MascotImg
+                src={currentEmojiSrc}
+                className="size-[44px] -translate-y-[2px]"
+              />
+            )}
             <h1 className="aui-thread-welcome-message-inner unsloth-welcome-title fade-in slide-in-from-bottom-1 animate-in text-3xl tracking-[-0.02em] duration-200">
               {incognito ? "Temporary chat" : welcome.text}
             </h1>
@@ -3283,7 +3286,7 @@ const PromptQueueStack: FC<{ queueThreadIds: string[] }> = ({
                         cancelEditing();
                       }
                     }}
-                    className="max-h-20 min-h-8 min-w-0 resize-none rounded-md border border-border/45 bg-transparent px-2 py-1.5 text-sm leading-5 text-foreground outline-none transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35"
+                    className="max-h-20 min-h-8 min-w-0 resize-none rounded-md border border-border/45 bg-transparent px-2 py-1.5 text-sm leading-5 text-foreground outline-none transition-colors focus-visible:border-ring"
                     aria-label={`Edit queued prompt ${visiblePosition}`}
                   />
                   <Button
@@ -3637,7 +3640,7 @@ const AssistantMessage: FC = () => {
             <textarea
               ref={textareaRef}
               defaultValue={extractTaggedText(messageContent)}
-              className="w-full p-3 rounded-xl bg-muted border border-border text-foreground focus:ring-2 focus:ring-primary outline-none overflow-y-auto resize-none font-mono text-sm max-h-[70vh]"
+              className="w-full p-3 rounded-xl bg-muted border border-border text-foreground focus:ring-1 focus:ring-ring outline-none overflow-y-auto resize-none font-mono text-sm max-h-[70vh]"
               autoFocus
               onInput={adjustHeight}
               onKeyDown={(e) => {
diff --git a/studio/frontend/src/components/assistant-ui/tool-ui-image-generation.tsx b/studio/frontend/src/components/assistant-ui/tool-ui-image-generation.tsx
index edce6200d5..5f11cb85a8 100644
--- a/studio/frontend/src/components/assistant-ui/tool-ui-image-generation.tsx
+++ b/studio/frontend/src/components/assistant-ui/tool-ui-image-generation.tsx
@@ -326,7 +326,7 @@ const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
               <button
                 type="button"
                 className={cn(
-                  "block cursor-zoom-in rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                  "block cursor-zoom-in rounded-2xl focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                   imageDimensions ? "size-full" : "max-w-full",
                 )}
                 onClick={showPreview}
@@ -382,7 +382,7 @@ const ImageGenerationToolUIImpl: ToolCallMessagePartComponent = ({
                 {promptCanExpand ? (
                   <button
                     type="button"
-                    className="mt-2 inline-flex text-xs font-medium text-foreground/80 underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                    className="mt-2 inline-flex text-xs font-medium text-foreground/80 underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     onClick={() =>
                       setExpandedCaptionPrompt((value) =>
                         value === captionPrompt ? null : captionPrompt,
diff --git a/studio/frontend/src/components/floating-monitor.tsx b/studio/frontend/src/components/floating-monitor.tsx
index 0a51875de9..1272a577e9 100644
--- a/studio/frontend/src/components/floating-monitor.tsx
+++ b/studio/frontend/src/components/floating-monitor.tsx
@@ -22,7 +22,7 @@ function usageIndicatorClass(percent: number): string {
   if (percent >= 70) {
     return "bg-amber-500";
   }
-  return "bg-primary";
+  return "bg-control-accent";
 }
 
 function usageTextClass(percent: number): string {
diff --git a/studio/frontend/src/components/section-card.tsx b/studio/frontend/src/components/section-card.tsx
index cd8eb3d503..e894749494 100644
--- a/studio/frontend/src/components/section-card.tsx
+++ b/studio/frontend/src/components/section-card.tsx
@@ -17,10 +17,10 @@ interface SectionCardProps {
 }
 
 const accentStyles = {
+  // Brand accent variant; follows the active palette via --control-accent.
   emerald: {
-    border: "ring-emerald-500/20",
-    iconBox:
-      "ring-emerald-200 bg-emerald-50 text-emerald-600 dark:ring-emerald-800 dark:bg-emerald-950 dark:text-emerald-400",
+    border: "ring-control-accent/20",
+    iconBox: "ring-control-accent/25 bg-control-accent/10 text-control-accent",
   },
   indigo: {
     border: "ring-indigo-500/20",
@@ -61,7 +61,7 @@ export function SectionCard({
       )}
     >
       {featured && (
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-emerald-500/[0.04] to-transparent" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-control-accent/[0.04] to-transparent" />
       )}
       {/* Header */}
       <div className="flex items-center gap-3">
@@ -77,7 +77,7 @@ export function SectionCard({
           <div className="flex items-center gap-2 pb-1">
             <h3 className="text-sm font-semibold">{title}</h3>
             {badge && (
-              <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">
+              <span className="rounded-full bg-control-accent/15 px-2 py-0.5 text-[10px] font-semibold text-control-accent">
                 {badge}
               </span>
             )}
diff --git a/studio/frontend/src/components/tauri/window-titlebar.tsx b/studio/frontend/src/components/tauri/window-titlebar.tsx
index 66efe8d74a..d86af54f79 100644
--- a/studio/frontend/src/components/tauri/window-titlebar.tsx
+++ b/studio/frontend/src/components/tauri/window-titlebar.tsx
@@ -93,7 +93,7 @@ function WindowControlButton({
       title={label}
       onClick={onClick}
       className={cn(
-        "relative z-[80] inline-flex size-8 items-center justify-center rounded-[10px] text-muted-foreground/90 transition-colors hover:bg-nav-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "relative z-[80] inline-flex size-8 items-center justify-center rounded-[10px] text-muted-foreground/90 transition-colors hover:bg-nav-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         className,
       )}
     >
@@ -287,7 +287,7 @@ export function WindowTitlebar({
                     event.stopPropagation();
                     togglePinned();
                   }}
-                  className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] text-nav-icon-idle transition-colors hover:bg-nav-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] text-nav-icon-idle transition-colors hover:bg-nav-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 >
                   <HugeiconsIcon
                     icon={LayoutAlignLeftIcon}
@@ -307,7 +307,7 @@ export function WindowTitlebar({
                   event.stopPropagation();
                   togglePinned();
                 }}
-                className="inline-flex size-8 items-center justify-center rounded-[10px] transition-colors hover:bg-nav-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="inline-flex size-8 items-center justify-center rounded-[10px] transition-colors hover:bg-nav-surface-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               >
                 <img
                   src="/rounded-512.png"
diff --git a/studio/frontend/src/components/ui/accordion.tsx b/studio/frontend/src/components/ui/accordion.tsx
index 35de233858..2bb147d6c6 100644
--- a/studio/frontend/src/components/ui/accordion.tsx
+++ b/studio/frontend/src/components/ui/accordion.tsx
@@ -7,7 +7,7 @@ import { Accordion as AccordionPrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
-import { ArrowDown01Icon, ArrowUp01Icon } from "@hugeicons/core-free-icons";
+import { ChevronDownStandardIcon, ChevronUpStandardIcon } from "@/lib/chevron-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 
 function Accordion({
@@ -56,13 +56,13 @@ function AccordionTrigger({
       >
         {children}
         <HugeiconsIcon
-          icon={ArrowDown01Icon}
+          icon={ChevronDownStandardIcon}
           strokeWidth={2}
           data-slot="accordion-trigger-icon"
           className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
         <HugeiconsIcon
-          icon={ArrowUp01Icon}
+          icon={ChevronUpStandardIcon}
           strokeWidth={2}
           data-slot="accordion-trigger-icon"
           className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
diff --git a/studio/frontend/src/components/ui/animated-theme-toggler.tsx b/studio/frontend/src/components/ui/animated-theme-toggler.tsx
index d83e278401..e4936b0240 100644
--- a/studio/frontend/src/components/ui/animated-theme-toggler.tsx
+++ b/studio/frontend/src/components/ui/animated-theme-toggler.tsx
@@ -6,7 +6,7 @@ import { Moon, Sun } from "lucide-react"
 import { flushSync } from "react-dom"
 
 import { cn } from "@/lib/utils"
-import { setTheme } from "@/features/settings/stores/theme-store"
+import { prefersReducedMotion, setTheme } from "@/features/settings"
 
 interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"button"> {
   duration?: number
@@ -15,6 +15,7 @@ interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"butt
 export function useAnimatedThemeToggle(duration = 400) {
   const [isDark, setIsDark] = useState(false)
   const anchorRef = useRef<HTMLElement | null>(null)
+  const inFlightRef = useRef(false)
 
   useEffect(() => {
     const updateTheme = () => {
@@ -30,45 +31,63 @@ export function useAnimatedThemeToggle(duration = 400) {
   }, [])
 
   const toggleTheme = useCallback(async () => {
-    const anchor = anchorRef.current
+    // One toggle per animation. Clicks during a slow view transition would
+    // otherwise queue up and land as invisible back-and-forth flips, so the
+    // theme looks stuck until an odd number of clicks gets through.
+    if (inFlightRef.current) return
+
     const applyTheme = () => {
       flushSync(() => {
-        const newTheme = !isDark
-        setIsDark(newTheme)
-        setTheme(newTheme ? "dark" : "light")
+        // Read the live class instead of React state, which can lag the DOM
+        // while a transition is being captured.
+        const nextDark = !document.documentElement.classList.contains("dark")
+        setIsDark(nextDark)
+        setTheme(nextDark ? "dark" : "light")
       })
     }
 
-    if (!document.startViewTransition) {
+    // Skip the view transition (its clip-path runs via the Web Animations API,
+    // which CSS force-reduced-motion cannot reach) when reduced motion is set.
+    if (!document.startViewTransition || prefersReducedMotion()) {
       applyTheme()
       return
     }
 
-    await document.startViewTransition(applyTheme).ready
+    inFlightRef.current = true
+    try {
+      const transition = document.startViewTransition(applyTheme)
+      await transition.ready
 
-    if (anchor) {
-      const { top, left, width, height } = anchor.getBoundingClientRect()
-      const x = left + width / 2
-      const y = top + height / 2
-      const maxRadius = Math.hypot(
-        Math.max(left, window.innerWidth - left),
-        Math.max(top, window.innerHeight - top)
-      )
-      document.documentElement.animate(
-        {
-          clipPath: [
-            `circle(0px at ${x}px ${y}px)`,
-            `circle(${maxRadius}px at ${x}px ${y}px)`,
-          ],
-        },
-        {
-          duration,
-          easing: "ease-in-out",
-          pseudoElement: "::view-transition-new(root)",
-        }
-      )
+      const anchor = anchorRef.current
+      if (anchor) {
+        const { top, left, width, height } = anchor.getBoundingClientRect()
+        const x = left + width / 2
+        const y = top + height / 2
+        const maxRadius = Math.hypot(
+          Math.max(left, window.innerWidth - left),
+          Math.max(top, window.innerHeight - top)
+        )
+        document.documentElement.animate(
+          {
+            clipPath: [
+              `circle(0px at ${x}px ${y}px)`,
+              `circle(${maxRadius}px at ${x}px ${y}px)`,
+            ],
+          },
+          {
+            duration,
+            easing: "ease-in-out",
+            pseudoElement: "::view-transition-new(root)",
+          }
+        )
+      }
+      await transition.finished
+    } catch {
+      // A skipped transition still applied the theme.
+    } finally {
+      inFlightRef.current = false
     }
-  }, [isDark, duration])
+  }, [duration])
 
   return { isDark, toggleTheme, anchorRef }
 }
@@ -78,70 +97,13 @@ export const AnimatedThemeToggler = ({
   duration = 400,
   ...props
 }: AnimatedThemeTogglerProps) => {
-  const [isDark, setIsDark] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    const updateTheme = () => {
-      setIsDark(document.documentElement.classList.contains("dark"))
-    }
-
-    updateTheme()
-
-    const observer = new MutationObserver(updateTheme)
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    })
-
-    return () => observer.disconnect()
-  }, [])
-
-  const toggleTheme = useCallback(async () => {
-    if (!buttonRef.current) return
-
-    const apply = () => {
-      flushSync(() => {
-        const newTheme = !isDark
-        setIsDark(newTheme)
-        setTheme(newTheme ? "dark" : "light")
-      })
-    }
-
-    if (!document.startViewTransition) {
-      apply()
-      return
-    }
-
-    await document.startViewTransition(apply).ready
-
-    const { top, left, width, height } =
-      buttonRef.current.getBoundingClientRect()
-    const x = left + width / 2
-    const y = top + height / 2
-    const maxRadius = Math.hypot(
-      Math.max(left, window.innerWidth - left),
-      Math.max(top, window.innerHeight - top)
-    )
-
-    document.documentElement.animate(
-      {
-        clipPath: [
-          `circle(0px at ${x}px ${y}px)`,
-          `circle(${maxRadius}px at ${x}px ${y}px)`,
-        ],
-      },
-      {
-        duration,
-        easing: "ease-in-out",
-        pseudoElement: "::view-transition-new(root)",
-      }
-    )
-  }, [isDark, duration])
+  const { isDark, toggleTheme, anchorRef } = useAnimatedThemeToggle(duration)
 
   return (
     <button
-      ref={buttonRef}
+      ref={(node) => {
+        anchorRef.current = node
+      }}
       onClick={toggleTheme}
       className={cn(className)}
       {...props}
diff --git a/studio/frontend/src/components/ui/badge.tsx b/studio/frontend/src/components/ui/badge.tsx
index 0f2f334986..a476a16b89 100644
--- a/studio/frontend/src/components/ui/badge.tsx
+++ b/studio/frontend/src/components/ui/badge.tsx
@@ -10,7 +10,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 export const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
   {
     variants: {
       variant: {
diff --git a/studio/frontend/src/components/ui/button.tsx b/studio/frontend/src/components/ui/button.tsx
index 51fc31697e..e3663d724b 100644
--- a/studio/frontend/src/components/ui/button.tsx
+++ b/studio/frontend/src/components/ui/button.tsx
@@ -10,14 +10,14 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 export const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-full border border-transparent text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
+  "focus-visible:border-ring dark:focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-full border border-transparent text-sm font-medium aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         dark: "bg-foreground text-background hover:bg-foreground/85 dark:bg-foreground dark:text-background",
         outline:
-          "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-accent/50 dark:border-transparent dark:bg-white/[0.06] dark:hover:bg-white/10 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
diff --git a/studio/frontend/src/components/ui/calendar.tsx b/studio/frontend/src/components/ui/calendar.tsx
index be52f9c354..6ace64bed6 100644
--- a/studio/frontend/src/components/ui/calendar.tsx
+++ b/studio/frontend/src/components/ui/calendar.tsx
@@ -225,7 +225,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-1 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}
diff --git a/studio/frontend/src/components/ui/checkbox.tsx b/studio/frontend/src/components/ui/checkbox.tsx
index edd8965348..c770b5c3e1 100644
--- a/studio/frontend/src/components/ui/checkbox.tsx
+++ b/studio/frontend/src/components/ui/checkbox.tsx
@@ -16,7 +16,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring dark:focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/combobox.tsx b/studio/frontend/src/components/ui/combobox.tsx
index db2d494b6d..11ba03a3e8 100644
--- a/studio/frontend/src/components/ui/combobox.tsx
+++ b/studio/frontend/src/components/ui/combobox.tsx
@@ -139,6 +139,7 @@ function ComboboxContent({
   alignOffset = 0,
   anchor,
   container,
+  onWheel,
   ...props
 }: ComboboxPrimitive.Popup.Props &
   Pick<
@@ -161,6 +162,24 @@ function ComboboxContent({
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
+          onWheel={(event) => {
+            onWheel?.(event);
+            // Dialog scroll locks cancel native wheel scrolling on this
+            // body-portaled popup, so scroll the list by hand while one is
+            // active.
+            if (!document.body.hasAttribute("data-scroll-locked")) return;
+            const list = event.currentTarget.querySelector<HTMLElement>(
+              '[data-slot="combobox-list"]',
+            );
+            if (!list) return;
+            const step =
+              event.deltaMode === 1
+                ? event.deltaY * 24
+                : event.deltaMode === 2
+                  ? event.deltaY * list.clientHeight
+                  : event.deltaY;
+            list.scrollTop += step;
+          }}
           className={cn(
             "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-xl corner-squircle duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none group/combobox-content relative pointer-events-auto max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
             className,
@@ -290,7 +309,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "bg-input/30 border-input dark:border-transparent focus-within:border-ring dark:focus-within:border-transparent dark:focus-within:bg-white/[0.09] has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/command.tsx b/studio/frontend/src/components/ui/command.tsx
index 72b15a712f..27e0d3d078 100644
--- a/studio/frontend/src/components/ui/command.tsx
+++ b/studio/frontend/src/components/ui/command.tsx
@@ -75,8 +75,8 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 h-9">
+    <div data-slot="command-input-wrapper" className="p-0 pb-1">
+      <InputGroup className="h-9">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -164,7 +164,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-selected:bg-accent data-selected:text-accent-foreground data-selected:*:[svg]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/copyable-error-chip.tsx b/studio/frontend/src/components/ui/copyable-error-chip.tsx
index d4b386d375..595df5cf62 100644
--- a/studio/frontend/src/components/ui/copyable-error-chip.tsx
+++ b/studio/frontend/src/components/ui/copyable-error-chip.tsx
@@ -53,7 +53,7 @@ export function CopyableErrorChip({
         <button
           type="button"
           className={cn(
-            "flex max-w-[28rem] min-w-0 cursor-pointer items-center rounded-md text-left text-xs text-destructive transition-colors hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "flex max-w-[28rem] min-w-0 cursor-pointer items-center rounded-md text-left text-xs text-destructive transition-colors hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             className,
           )}
         >
@@ -72,7 +72,7 @@ export function CopyableErrorChip({
             onClick={handleCopy}
             aria-label={copied ? "Copied" : "Copy error message"}
             className={cn(
-              "inline-flex items-center gap-1 rounded-md border border-border/60 px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "inline-flex items-center gap-1 rounded-md border border-border/60 px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
               copied && "border-emerald-500/40 text-emerald-600 dark:text-emerald-500",
             )}
           >
diff --git a/studio/frontend/src/components/ui/field.tsx b/studio/frontend/src/components/ui/field.tsx
index f1e6b23999..2a24d1ace7 100644
--- a/studio/frontend/src/components/ui/field.tsx
+++ b/studio/frontend/src/components/ui/field.tsx
@@ -107,7 +107,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/50 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug",
+        "has-data-checked:bg-primary/5 has-data-checked:border-ring-strong dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className,
       )}
diff --git a/studio/frontend/src/components/ui/info-hint.tsx b/studio/frontend/src/components/ui/info-hint.tsx
index 4433478647..db663c792e 100644
--- a/studio/frontend/src/components/ui/info-hint.tsx
+++ b/studio/frontend/src/components/ui/info-hint.tsx
@@ -20,7 +20,7 @@ export function InfoHint({ children }: { children: ReactNode }) {
         <button
           type="button"
           aria-label="More info"
-          className="inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full text-muted-foreground/70 transition-colors hover:text-[#383835] dark:hover:text-[#e8e8e8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full text-muted-foreground/70 transition-colors hover:text-[#383835] dark:hover:text-[#e8e8e8] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         >
           <HugeiconsIcon
             icon={InformationCircleIcon}
diff --git a/studio/frontend/src/components/ui/input-group.tsx b/studio/frontend/src/components/ui/input-group.tsx
index 06f3dd79d6..55984452f0 100644
--- a/studio/frontend/src/components/ui/input-group.tsx
+++ b/studio/frontend/src/components/ui/input-group.tsx
@@ -15,7 +15,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        "border-border bg-background dark:border-transparent dark:bg-white/[0.06] has-[[data-slot=input-group-control]:focus-visible]:border-ring dark:has-[[data-slot=input-group-control]:focus-visible]:border-transparent dark:has-[[data-slot=input-group-control]:focus-visible]:bg-white/[0.12] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-full border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/input.tsx b/studio/frontend/src/components/ui/input.tsx
index 4dfdf484a7..f98790eb01 100644
--- a/studio/frontend/src/components/ui/input.tsx
+++ b/studio/frontend/src/components/ui/input.tsx
@@ -5,18 +5,142 @@ import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+const BASE_CLASSES =
+  // White fill with a subtle border,
+  // fully-rounded pill for single-row controls.
+  "bg-background border-border dark:border-transparent dark:bg-white/[0.06] focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-full border px-3.5 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+
+function stepNumberInput(input: HTMLInputElement, direction: 1 | -1): void {
+  if (input.disabled || input.readOnly) {
+    return;
+  }
+  const step = input.step === "" ? 1 : Number(input.step) || 1;
+  const min = input.min === "" ? null : Number(input.min);
+  const max = input.max === "" ? null : Number(input.max);
+  // An empty field steps from its placeholder (the effective default).
+  const current =
+    input.value === "" ? Number(input.placeholder) : Number(input.value);
+  let next: number;
+  if (Number.isFinite(current)) {
+    // Snap to the step grid (anchored at min, like the native spinner) rather
+    // than adding step to an off-grid typed value, which would leave a
+    // step-invalid result. Mirrors HTMLInputElement.stepUp/stepDown.
+    const base = min ?? 0;
+    const pos = (current - base) / step;
+    const rounded = Math.round(pos);
+    const onGrid = Math.abs(pos - rounded) < 1e-9;
+    const nextPos = onGrid
+      ? rounded + direction
+      : direction === 1
+        ? Math.ceil(pos)
+        : Math.floor(pos);
+    next = base + nextPos * step;
+  } else {
+    // Stepping an empty, non-numeric field starts from the minimum, matching
+    // the native spinner.
+    next = min ?? direction * step;
+  }
+  if (min !== null) {
+    next = Math.max(min, next);
+  }
+  if (max !== null) {
+    next = Math.min(max, next);
+  }
+  // Trim float noise from fractional steps.
+  const decimals = (String(step).split(".")[1] ?? "").length;
+  const value = String(Number(next.toFixed(decimals)));
+  // Write through the native setter and emit "input" so the React onChange
+  // of controlled callers fires.
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function StepperArrow({ direction }: { direction: 1 | -1 }) {
   return (
+    <svg
+      viewBox="0 0 10 6"
+      aria-hidden="true"
+      className={cn("h-[5px] w-2", direction === -1 && "rotate-180")}
+    >
+      <path d="M5 0.5 9 5.5H1Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function StepperButton({ direction }: { direction: 1 | -1 }) {
+  return (
+    <button
+      type="button"
+      tabIndex={-1}
+      onMouseDown={(event) => {
+        // Keep focus on the field itself.
+        event.preventDefault();
+      }}
+      onClick={(event) => {
+        const input = event.currentTarget
+          .closest('[data-slot="number-input"]')
+          ?.querySelector("input");
+        if (input) {
+          input.focus({ preventScroll: true });
+          stepNumberInput(input, direction);
+        }
+      }}
+      className="flex h-1/2 w-full cursor-default items-center justify-center text-foreground/55 hover:bg-black/10 active:bg-black/15 dark:text-white/70 dark:hover:bg-white/10 dark:active:bg-white/15"
+    >
+      <StepperArrow direction={direction} />
+    </button>
+  );
+}
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  const field = (
     <input
       type={type}
       data-slot="input"
-      className={cn(
-        "bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
+      className={cn(BASE_CLASSES, type === "number" && "pr-8", className)}
       {...props}
     />
   );
+  if (type !== "number") {
+    return field;
+  }
+  // Number fields swap the native spinner (hidden globally in index.css) for
+  // a shared grey stepper.
+  return (
+    <span
+      data-slot="number-input"
+      className={cn(
+        // The wrapper is now the flex/grid item, so mirror the field's width:
+        // default to the full width the bare input used, and let an explicit
+        // w-*/max-w-* from the caller win so the stepper stays on the field edge.
+        // Also carry React Flow interaction classes (nodrag/nopan/nowheel) so
+        // the stepper buttons, which live in the wrapper, don't drag the node.
+        "group/number relative inline-flex items-center w-full min-w-0",
+        (className ?? "")
+          .split(/\s+/)
+          .filter(
+            (c) =>
+              /^(?:min-w|max-w|w)-/.test(c) ||
+              c === "nodrag" ||
+              c === "nopan" ||
+              c === "nowheel",
+          ),
+      )}
+    >
+      {field}
+      <span
+        aria-hidden="true"
+        className="absolute top-1/2 right-1.5 flex h-[21px] w-4 -translate-y-1/2 flex-col overflow-hidden rounded-[5px] bg-black/[0.07] group-has-[input:disabled]/number:pointer-events-none group-has-[input:disabled]/number:opacity-40 dark:bg-white/[0.12]"
+      >
+        <StepperButton direction={1} />
+        <StepperButton direction={-1} />
+      </span>
+    </span>
+  );
 }
 
 export { Input };
diff --git a/studio/frontend/src/components/ui/navigation-menu.tsx b/studio/frontend/src/components/ui/navigation-menu.tsx
index 3014c3f66c..f8a6dfc503 100644
--- a/studio/frontend/src/components/ui/navigation-menu.tsx
+++ b/studio/frontend/src/components/ui/navigation-menu.tsx
@@ -8,7 +8,7 @@ import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 
 export function NavigationMenu({
@@ -69,7 +69,7 @@ export function NavigationMenuItem({
 }
 
 export const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none",
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none",
 );
 
 export function NavigationMenuTrigger({
@@ -87,7 +87,7 @@ export function NavigationMenuTrigger({
     >
       {children}{" "}
       <HugeiconsIcon
-        icon={ArrowDown01Icon}
+        icon={ChevronDownStandardIcon}
         strokeWidth={2}
         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
@@ -148,7 +148,7 @@ export function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/popover.tsx b/studio/frontend/src/components/ui/popover.tsx
index e3a3cf1ebe..1a7d1d58cd 100644
--- a/studio/frontend/src/components/ui/popover.tsx
+++ b/studio/frontend/src/components/ui/popover.tsx
@@ -6,6 +6,7 @@
 import { Popover as PopoverPrimitive } from "radix-ui";
 import type * as React from "react";
 
+import { useDialogPortalContainer } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 
 function Popover({
@@ -24,10 +25,18 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 0,
+  container,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  container?: HTMLElement | null;
+}) {
+  // Inside a modal dialog the body scroll lock swallows wheel events on
+  // body-portaled content; portal into the dialog instead (like Select).
+  const dialogContainer = useDialogPortalContainer();
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal
+      container={container ?? dialogContainer ?? undefined}
+    >
       <PopoverPrimitive.Content
         data-slot="popover-content"
         align={align}
diff --git a/studio/frontend/src/components/ui/progress.tsx b/studio/frontend/src/components/ui/progress.tsx
index d62a09042a..200bbcba31 100644
--- a/studio/frontend/src/components/ui/progress.tsx
+++ b/studio/frontend/src/components/ui/progress.tsx
@@ -27,7 +27,10 @@ function Progress({
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className={cn("bg-primary size-full flex-1 transition-all", indicatorClassName)}
+        className={cn(
+          "bg-control-accent size-full flex-1 transition-all",
+          indicatorClassName,
+        )}
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/studio/frontend/src/components/ui/radio-group.tsx b/studio/frontend/src/components/ui/radio-group.tsx
index 0f9d4b2407..62225adc6e 100644
--- a/studio/frontend/src/components/ui/radio-group.tsx
+++ b/studio/frontend/src/components/ui/radio-group.tsx
@@ -29,7 +29,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring dark:focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/resizable.tsx b/studio/frontend/src/components/ui/resizable.tsx
index de6309cae9..60df343b15 100644
--- a/studio/frontend/src/components/ui/resizable.tsx
+++ b/studio/frontend/src/components/ui/resizable.tsx
@@ -39,7 +39,7 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "group bg-border/80 relative z-10 flex w-px cursor-col-resize items-center justify-center transition-[background-color,box-shadow] duration-150 ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 hover:bg-primary/80 hover:shadow-[0_0_16px_rgba(23,184,139,0.55)] active:bg-primary/90 active:shadow-[0_0_18px_rgba(23,184,139,0.7)] focus-visible:bg-primary/80 focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-2 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "group bg-border/80 relative z-10 flex w-px cursor-col-resize items-center justify-center transition-[background-color,box-shadow] duration-150 ease-out after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 hover:bg-primary/80 hover:shadow-[0_0_16px_rgba(23,184,139,0.55)] active:bg-primary/90 active:shadow-[0_0_18px_rgba(23,184,139,0.7)] focus-visible:bg-primary/80 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-2 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/scroll-area.tsx b/studio/frontend/src/components/ui/scroll-area.tsx
index e9087ef376..1e60dcb10e 100644
--- a/studio/frontend/src/components/ui/scroll-area.tsx
+++ b/studio/frontend/src/components/ui/scroll-area.tsx
@@ -21,7 +21,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
diff --git a/studio/frontend/src/components/ui/select.tsx b/studio/frontend/src/components/ui/select.tsx
index 07f39fa935..925cc45b36 100644
--- a/studio/frontend/src/components/ui/select.tsx
+++ b/studio/frontend/src/components/ui/select.tsx
@@ -8,14 +8,12 @@ import type * as React from "react";
 import { createContext, useContext, useState } from "react";
 
 import { Tick02Icon } from "@/lib/tick-icon";
-import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
+import {
+  ChevronDownStandardIcon,
+  ChevronUpStandardIcon,
+} from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
 import { useDialogPortalContainer } from "@/components/ui/dialog";
-import {
-  ArrowDown01Icon,
-  ArrowUp01Icon,
-  UnfoldMoreIcon,
-} from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 
 const SelectOpenContext = createContext(false);
@@ -70,7 +68,7 @@ function SelectTrigger({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: "sm" | "default";
-  icon?: typeof UnfoldMoreIcon;
+  icon?: typeof ChevronDownStandardIcon;
   iconClassName?: string;
   animateRadius?: boolean;
 }) {
@@ -91,7 +89,7 @@ function SelectTrigger({
           : undefined
       }
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer",
+        "border-border data-[placeholder]:text-muted-foreground bg-background hover:bg-accent/50 dark:border-transparent dark:bg-white/[0.06] dark:hover:bg-white/10 focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-full border px-3.5 py-2 text-sm transition-colors aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer",
         className,
       )}
       {...props}
@@ -222,7 +220,7 @@ function SelectScrollUpButton({
       )}
       {...props}
     >
-      <HugeiconsIcon icon={ArrowUp01Icon} strokeWidth={2} />
+      <HugeiconsIcon icon={ChevronUpStandardIcon} strokeWidth={2} />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -240,7 +238,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} />
+      <HugeiconsIcon icon={ChevronDownStandardIcon} strokeWidth={2} />
     </SelectPrimitive.ScrollDownButton>
   );
 }
diff --git a/studio/frontend/src/components/ui/sidebar.tsx b/studio/frontend/src/components/ui/sidebar.tsx
index 3a8694908f..4eb37d4e89 100644
--- a/studio/frontend/src/components/ui/sidebar.tsx
+++ b/studio/frontend/src/components/ui/sidebar.tsx
@@ -471,7 +471,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-[#94a3b8] dark:text-[#666] ring-sidebar-ring h-auto pt-3 pb-2 px-4 rounded-md text-[10px] font-semibold uppercase tracking-[0em] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+        "text-[#94a3b8] dark:text-[#666] ring-sidebar-ring h-auto pt-3 pb-2 px-4 rounded-md text-[10px] font-semibold uppercase tracking-[0em] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-1 [&>svg]:size-3 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -491,7 +491,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-1 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -637,7 +637,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-1 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         showOnHover &&
           "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0",
         className
@@ -747,7 +747,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-1 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
         className
       )}
       {...props}
diff --git a/studio/frontend/src/components/ui/slider.tsx b/studio/frontend/src/components/ui/slider.tsx
index 705182e5ae..b921b25942 100644
--- a/studio/frontend/src/components/ui/slider.tsx
+++ b/studio/frontend/src/components/ui/slider.tsx
@@ -103,7 +103,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="ring-ring/50 relative z-10 size-4 rounded-4xl bg-white shadow-sm block shrink-0 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 transition-transform duration-100 ease-out hover:scale-110 hover:ring-4 active:scale-95 focus-visible:ring-4 focus-visible:outline-hidden"
+          className="ring-ring/50 relative z-10 size-4 rounded-4xl bg-white shadow-sm block shrink-0 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 transition-transform duration-100 ease-out hover:scale-110 hover:ring-4 active:scale-95 focus-visible:ring-1 focus-visible:outline-hidden"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/studio/frontend/src/components/ui/sonner.tsx b/studio/frontend/src/components/ui/sonner.tsx
index 33c2b77262..d6df0f4eaa 100644
--- a/studio/frontend/src/components/ui/sonner.tsx
+++ b/studio/frontend/src/components/ui/sonner.tsx
@@ -9,7 +9,7 @@ import {
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Spinner } from "@/components/ui/spinner";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/features/settings/stores/theme-store";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 // Make toast text selectable. Sonner's onPointerDown calls setPointerCapture(),
@@ -33,9 +33,9 @@ const handleToastPointerDownCapture = (
 };
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  // Use resolvedTheme so sonner's data-sonner-theme always matches the class
-  // next-themes puts on <html>; sonner-side "system" resolution can drift.
-  const { resolvedTheme } = useTheme();
+  // Use the resolved mode so sonner's data-sonner-theme always matches the
+  // class the theme store puts on <html>.
+  const { resolved } = useTheme();
 
   return (
     // display:contents adds no box; only carries the selection-fix handler.
@@ -45,7 +45,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       onPointerDownCapture={handleToastPointerDownCapture}
     >
       <Sonner
-        theme={(resolvedTheme as ToasterProps["theme"]) ?? "light"}
+        theme={resolved}
         className="toaster group"
         duration={5000}
         icons={{
diff --git a/studio/frontend/src/components/ui/switch.tsx b/studio/frontend/src/components/ui/switch.tsx
index 910005c0d6..db63936f37 100644
--- a/studio/frontend/src/components/ui/switch.tsx
+++ b/studio/frontend/src/components/ui/switch.tsx
@@ -18,14 +18,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "data-checked:bg-control-accent data-unchecked:bg-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-control-accent-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
       />
     </SwitchPrimitive.Root>
   );
diff --git a/studio/frontend/src/components/ui/tabs.tsx b/studio/frontend/src/components/ui/tabs.tsx
index 1e5381ab18..27f0257d86 100644
--- a/studio/frontend/src/components/ui/tabs.tsx
+++ b/studio/frontend/src/components/ui/tabs.tsx
@@ -106,11 +106,13 @@ export function TabsTrigger({
       data-slot="tabs-trigger"
       value={value}
       className={cn(
-        "gap-1.5 rounded-xl corner-squircle border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "gap-1.5 rounded-xl corner-squircle border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring dark:focus-visible:border-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         // Line variant is a roomier pill (no underline); padding overrides px-2 py-1.
         "group-data-[variant=line]/tabs-list:px-3.5 group-data-[variant=line]/tabs-list:py-2.5",
         "data-active:text-foreground dark:data-active:text-foreground",
+        // The sliding pill marks the active tab; no focus ring on top of it.
+        "data-active:focus-visible:ring-0 data-active:focus-visible:border-transparent dark:data-active:focus-visible:border-transparent data-active:focus-visible:outline-none",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5",
         className,
       )}
@@ -122,7 +124,7 @@ export function TabsTrigger({
           className={cn(
             "absolute inset-0",
             indicatorClassName ??
-              "rounded-xl bg-background dark:bg-input/30 dark:border dark:border-input group-data-[variant=line]/tabs-list:bg-[#ececec] dark:group-data-[variant=line]/tabs-list:bg-[#2d2f33] dark:group-data-[variant=line]/tabs-list:border-0",
+              "rounded-xl bg-background dark:bg-input/30 group-data-[variant=line]/tabs-list:bg-[#ececec] dark:group-data-[variant=line]/tabs-list:bg-[#2d2f33] dark:group-data-[variant=line]/tabs-list:border-0",
           )}
           transition={{
             type: "spring",
diff --git a/studio/frontend/src/components/ui/textarea.tsx b/studio/frontend/src/components/ui/textarea.tsx
index 7ffa58f7b9..697ee9843b 100644
--- a/studio/frontend/src/components/ui/textarea.tsx
+++ b/studio/frontend/src/components/ui/textarea.tsx
@@ -18,7 +18,9 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex min-h-16 min-w-0 max-w-full w-full whitespace-pre-wrap break-words [overflow-wrap:anywhere] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        // White fill with a subtle border.
+        // Multi-row control, so rounded-xl rather than a full pill.
+        "border-border bg-background dark:border-transparent dark:bg-white/[0.06] focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3.5 py-3 text-base transition-colors aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex min-h-16 min-w-0 max-w-full w-full whitespace-pre-wrap break-words [overflow-wrap:anywhere] outline-none disabled:cursor-not-allowed disabled:opacity-50",
         fieldSizing === "content" ? "field-sizing-content" : "[field-sizing:fixed]",
         className,
       )}
diff --git a/studio/frontend/src/components/ui/toggle.tsx b/studio/frontend/src/components/ui/toggle.tsx
index 9266af8cb5..f613934919 100644
--- a/studio/frontend/src/components/ui/toggle.tsx
+++ b/studio/frontend/src/components/ui/toggle.tsx
@@ -12,7 +12,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 export const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-4xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-4xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/studio/frontend/src/features/chat/artifacts/artifact-card.tsx b/studio/frontend/src/features/chat/artifacts/artifact-card.tsx
index a1dabe8ecd..ee8c26abf1 100644
--- a/studio/frontend/src/features/chat/artifacts/artifact-card.tsx
+++ b/studio/frontend/src/features/chat/artifacts/artifact-card.tsx
@@ -23,7 +23,7 @@ import {
 } from "./types";
 
 const CARD_BASE =
-  "group/artifact-card relative flex min-h-[52px] cursor-pointer items-center overflow-hidden rounded-lg border border-border/70 bg-muted/15 px-3 py-2 text-left transition-colors hover:bg-muted/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:bg-muted/10 dark:hover:bg-muted/20";
+  "group/artifact-card relative flex min-h-[52px] cursor-pointer items-center overflow-hidden rounded-lg border border-border/70 bg-muted/15 px-3 py-2 text-left transition-colors hover:bg-muted/25 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring dark:bg-muted/10 dark:hover:bg-muted/20";
 
 export function ArtifactCard({
   code,
diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 31f8e38785..380ce0e0ab 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -2557,7 +2557,7 @@ export function ChatPage({
         {view.mode !== "compare" && (
           <div
             aria-hidden
-            className="pointer-events-none absolute left-0 right-[10px] top-[calc(var(--studio-content-top-inset,0px)+var(--studio-chat-header-height,48px))] z-20 h-6 bg-gradient-to-b from-background to-transparent"
+            className="chat-header-fade pointer-events-none absolute left-0 right-[10px] top-[calc(var(--studio-content-top-inset,0px)+var(--studio-chat-header-height,48px))] z-20 h-6 bg-gradient-to-b from-background to-transparent"
           />
         )}
         <div
@@ -2687,7 +2687,7 @@ export function ChatPage({
                     type="button"
                     onClick={toggleIncognito}
                     className={cn(
-                      "flex size-[var(--studio-chat-control-height,34px)] cursor-pointer items-center justify-center rounded-[12px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "flex size-[var(--studio-chat-control-height,34px)] cursor-pointer items-center justify-center rounded-[12px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                       incognito
                         ? "bg-primary/10 text-primary hover:bg-primary/15"
                         : "text-nav-fg hover:bg-nav-surface-hover hover:text-black dark:hover:text-white",
@@ -2717,7 +2717,7 @@ export function ChatPage({
                   <button
                     type="button"
                     onClick={() => setSettingsOpen(true)}
-                    className="flex size-[var(--studio-chat-control-height,34px)] translate-x-[2px] cursor-pointer items-center justify-center rounded-[12px] text-nav-fg transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    className="flex size-[var(--studio-chat-control-height,34px)] translate-x-[2px] cursor-pointer items-center justify-center rounded-[12px] text-nav-fg transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     aria-label="Open run settings"
                   >
                     <HugeiconsIcon
diff --git a/studio/frontend/src/features/chat/chat-providers-dialog.tsx b/studio/frontend/src/features/chat/chat-providers-dialog.tsx
index da19cd749b..95e5cfbd79 100644
--- a/studio/frontend/src/features/chat/chat-providers-dialog.tsx
+++ b/studio/frontend/src/features/chat/chat-providers-dialog.tsx
@@ -1137,7 +1137,7 @@ export function ChatProvidersSettings({
                     <button
                       type="button"
                       onClick={() => setShowApiKey((visible) => !visible)}
-                      className="absolute top-1/2 right-1.5 flex size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="absolute top-1/2 right-1.5 flex size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       aria-label={showApiKey ? "Hide API key" : "Show API key"}
                       aria-pressed={showApiKey}
                     >
@@ -1567,9 +1567,9 @@ export function ChatProvidersSettings({
           <button
             type="button"
             onClick={openAddProvider}
-            className="group/add flex w-full items-center justify-between gap-3 border-border/60 border-b px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/25 focus-visible:ring-inset"
+            className="group/add flex w-full items-center justify-between gap-3 border-border/60 border-b px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
           >
-            <span className="flex min-w-0 items-center gap-2 rounded-full border border-border bg-background/50 px-3 py-1.5 transition-colors group-hover/add:border-emerald-500/25 group-hover/add:text-emerald-700 dark:group-hover/add:text-emerald-300">
+            <span className="flex min-w-0 items-center gap-2 rounded-full border border-border bg-background/50 px-3 py-1.5 transition-colors group-hover/add:border-control-accent/25 group-hover/add:text-control-accent">
               <HugeiconsIcon icon={PlusSignIcon} className="size-4 shrink-0" />
               <span>Add connection</span>
             </span>
@@ -1616,7 +1616,7 @@ export function ChatProvidersSettings({
                           <span className="truncate text-sm font-medium text-foreground">
                             {provider.name}
                           </span>
-                          <span className="shrink-0 rounded-[6px] border border-emerald-500/15 bg-emerald-500/8 px-1.5 py-0.5 text-[10px] leading-none text-emerald-700 dark:text-emerald-300">
+                          <span className="shrink-0 rounded-[6px] border border-control-accent/15 bg-control-accent/8 px-1.5 py-0.5 text-[10px] leading-none text-control-accent">
                             {provider.models.length}{" "}
                             {provider.models.length === 1 ? "model" : "models"}
                           </span>
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index a547b88e57..07ddffdd59 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -39,6 +39,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
   InputGroup,
   InputGroupAddon,
@@ -942,7 +943,7 @@ export function ChatSettingsPanel({
                 <button
                   type="button"
                   onClick={() => onOpenChange?.(false)}
-                  className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full text-nav-icon-idle dark:text-nav-fg-muted transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full text-nav-icon-idle dark:text-nav-fg-muted transition-colors hover:bg-nav-surface-hover hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   aria-label="Close run settings"
                 >
                   <HugeiconsIcon
@@ -1068,7 +1069,7 @@ export function ChatSettingsPanel({
                         animateRadius={false}
                         icon={ChevronDownStandardIcon}
                         iconClassName="size-3.5"
-                        className="grid h-7 w-[64px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
+                        className="grid h-7 w-[64px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-border bg-background hover:bg-accent/50 dark:border-transparent dark:bg-white/[0.05] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
                       >
                         <SelectValue />
                       </SelectTrigger>
@@ -1111,7 +1112,7 @@ export function ChatSettingsPanel({
                         animateRadius={false}
                         icon={ChevronDownStandardIcon}
                         iconClassName="size-3.5"
-                        className="grid h-7 w-[124px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
+                        className="grid h-7 w-[124px] min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded-full border-border bg-background hover:bg-accent/50 dark:border-transparent dark:bg-white/[0.05] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px]! font-medium text-nav-fg focus-visible:ring-0 focus-visible:border-transparent [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate [&>svg]:shrink-0"
                         data-test-id="speculative-type-select"
                       >
                         <SelectValue />
@@ -1171,7 +1172,7 @@ export function ChatSettingsPanel({
                         3 on CPU/Mac.
                       </InfoHint>
                     </div>
-                    <input
+                    <Input
                       type="number"
                       disabled={modelControlsDisabled}
                       min={1}
@@ -1193,7 +1194,7 @@ export function ChatSettingsPanel({
                       }}
                       data-test-id="spec-draft-n-max-input"
                       aria-label="Speculative decoding draft tokens"
-                      className="h-7 w-[76px] rounded-full border-transparent bg-black/[0.04] dark:bg-white/[0.05] hover:bg-black/[0.06] dark:hover:bg-white/[0.1] pl-3 pr-2 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0"
+                      className="h-7 w-[88px] rounded-full border-border bg-background hover:bg-accent/50 dark:border-transparent dark:bg-white/[0.05] dark:hover:bg-white/[0.1] pl-3 py-0 text-[13px] font-medium text-nav-fg outline-none focus-visible:ring-0"
                     />
                   </div>
                 )}
diff --git a/studio/frontend/src/features/chat/components/context-usage-bar.tsx b/studio/frontend/src/features/chat/components/context-usage-bar.tsx
index 16dee2a624..80f502e222 100644
--- a/studio/frontend/src/features/chat/components/context-usage-bar.tsx
+++ b/studio/frontend/src/features/chat/components/context-usage-bar.tsx
@@ -23,7 +23,7 @@ function getSeverityColor(percent: number): {
 } {
   if (percent > 85) return { bar: "bg-red-500", text: "text-red-500" };
   if (percent > 65) return { bar: "bg-amber-500", text: "text-amber-500" };
-  return { bar: "bg-emerald-500", text: "text-emerald-500" };
+  return { bar: "bg-control-accent", text: "text-control-accent" };
 }
 
 export const ContextUsageBar: FC<{
diff --git a/studio/frontend/src/features/chat/components/openai-code-exec-section.tsx b/studio/frontend/src/features/chat/components/openai-code-exec-section.tsx
index b28bf83737..cb0234579b 100644
--- a/studio/frontend/src/features/chat/components/openai-code-exec-section.tsx
+++ b/studio/frontend/src/features/chat/components/openai-code-exec-section.tsx
@@ -60,18 +60,6 @@ const TTL_MAX = 20; // OpenAI hard cap on expires_after.minutes
 // minute without hammering /v1/containers.
 const REFRESH_POLL_MS = 30_000;
 
-function ageLabel(epochSeconds: number | null | undefined): string {
-  if (!epochSeconds) return "";
-  const ageSec = Math.max(0, Math.floor(Date.now() / 1000) - epochSeconds);
-  if (ageSec < 60) return `${ageSec}s ago`;
-  const ageMin = Math.floor(ageSec / 60);
-  if (ageMin < 60) return `${ageMin}m ago`;
-  const ageHr = Math.floor(ageMin / 60);
-  if (ageHr < 48) return `${ageHr}h ago`;
-  const ageDay = Math.floor(ageHr / 24);
-  return `${ageDay}d ago`;
-}
-
 function shortContainerId(id: string): string {
   // Mid-truncate keeps the "cntr_" prefix readable and still surfaces the
   // tail digits users sometimes copy off OpenAI's dashboard.
@@ -463,7 +451,7 @@ export function OpenAICodeExecSection({
           max={TTL_MAX}
           value={ttlValue}
           onChange={(e) => onTtlChange(e.target.value)}
-          className="h-8 w-14 px-2 text-center text-sm tabular-nums"
+          className="h-8 w-[72px] pl-3 text-sm tabular-nums"
         />
       </div>
 
@@ -509,7 +497,7 @@ export function OpenAICodeExecSection({
                   key={c.id}
                   className={`flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition-colors ${
                     isActive
-                      ? "border-primary/30 bg-primary/5"
+                      ? "border-ring-strong bg-primary/5"
                       : "border-border/60 hover:bg-muted/40"
                   } ${canActivate ? "cursor-pointer" : ""} ${
                     running ? "" : "opacity-60"
diff --git a/studio/frontend/src/features/chat/components/project-switcher.tsx b/studio/frontend/src/features/chat/components/project-switcher.tsx
index e17a1d139e..13360ccf7e 100644
--- a/studio/frontend/src/features/chat/components/project-switcher.tsx
+++ b/studio/frontend/src/features/chat/components/project-switcher.tsx
@@ -49,7 +49,7 @@ export function ProjectSwitcher({
                 ? "Loading project"
                 : "Pick a project"
           }
-          className="-mx-1 flex h-[34px] shrink-0 items-center gap-2 rounded-full pl-3 pr-2.5 transition-colors hover:bg-[#ececec] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-[#2d2e32]"
+          className="-mx-1 flex h-[34px] shrink-0 items-center gap-2 rounded-full pl-3 pr-2.5 transition-colors hover:bg-[#ececec] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring dark:hover:bg-accent"
         >
           <HugeiconsIcon
             icon={Folder01Icon}
diff --git a/studio/frontend/src/features/chat/projects-page.tsx b/studio/frontend/src/features/chat/projects-page.tsx
index b9a5658a96..5e0b37895b 100644
--- a/studio/frontend/src/features/chat/projects-page.tsx
+++ b/studio/frontend/src/features/chat/projects-page.tsx
@@ -429,7 +429,7 @@ export function ProjectsPage() {
                   openProject(project.id);
                 }
               }}
-              className="group/project-card relative flex min-h-[172px] cursor-pointer flex-col rounded-[26px] bg-card p-6 text-left shadow-[0_2px_12px_-4px_rgba(0,0,0,0.10)] transition-colors duration-150 hover:bg-[#f2f2f2] dark:shadow-none dark:hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="group/project-card relative flex min-h-[172px] cursor-pointer flex-col rounded-[26px] bg-card p-6 text-left shadow-[0_2px_12px_-4px_rgba(0,0,0,0.10)] transition-colors duration-150 hover:bg-[#f2f2f2] dark:shadow-none dark:hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             >
               <div className="flex items-start justify-between gap-2">
                 <span className="flex size-10 shrink-0 items-center justify-center rounded-[14px] bg-muted text-foreground/70 transition-colors group-hover/project-card:bg-primary/10 group-hover/project-card:text-primary">
diff --git a/studio/frontend/src/features/chat/prompt-storage/prompt-storage-dialog.tsx b/studio/frontend/src/features/chat/prompt-storage/prompt-storage-dialog.tsx
index f4546a01a8..33fc6286c0 100644
--- a/studio/frontend/src/features/chat/prompt-storage/prompt-storage-dialog.tsx
+++ b/studio/frontend/src/features/chat/prompt-storage/prompt-storage-dialog.tsx
@@ -143,14 +143,6 @@ function exportAllListsCsv(entries: PromptListEntry[]): void {
   downloadBlob(`list_name,order,prompt_text\n${rows}`, "prompt-lists.csv", "text/csv");
 }
 
-function exportCollectionJsonl(prompts: PromptEntry[], lists: PromptListEntry[]): void {
-  const lines = [
-    ...prompts.map((e) => JSON.stringify({ type: "prompt", name: e.name, text: e.text })),
-    ...lists.map((e) => JSON.stringify({ type: "prompt_list", name: e.name, items: e.items })),
-  ].join("\n");
-  downloadBlob(lines, "prompt-collection.jsonl", "application/x-ndjson");
-}
-
 function contentBlocksToText(content: unknown): string {
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return JSON.stringify(content);
@@ -1129,7 +1121,7 @@ function ExportModal({
                 className={cn(
                   "flex w-full cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition-all",
                   scope === "single"
-                    ? "border-primary/40 bg-primary/5 ring-1 ring-primary/20"
+                    ? "border-ring-strong bg-primary/5"
                     : "border-border/60 hover:border-border hover:bg-muted/30",
                 )}
               >
@@ -1152,7 +1144,7 @@ function ExportModal({
                 className={cn(
                   "flex w-full cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 transition-all",
                   scope === "training"
-                    ? "border-primary/40 bg-primary/5 ring-1 ring-primary/20"
+                    ? "border-ring-strong bg-primary/5"
                     : "border-border/60 hover:border-border hover:bg-muted/30",
                 )}
               >
@@ -1274,14 +1266,14 @@ function PromptCard({
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="Prompt name..."
-          className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow"
+          className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow"
         />
         <textarea
           value={text}
           onChange={(e) => setText(e.target.value)}
           rows={4}
           placeholder="Prompt text..."
-          className="w-full resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow leading-relaxed"
+          className="w-full resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow leading-relaxed"
         />
         <div className="flex gap-2 justify-end">
           <Button size="sm" variant="ghost" onClick={() => { setName(entry.name); setText(entry.text); setEditing(false); }}>
@@ -1385,14 +1377,14 @@ function NewPromptForm({ onClose, onRefresh }: { onClose: () => void; onRefresh:
         onChange={(e) => setName(e.target.value)}
         placeholder="Prompt name (optional)..."
         autoFocus
-        className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow"
+        className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow"
       />
       <textarea
         value={text}
         onChange={(e) => setText(e.target.value)}
         rows={4}
         placeholder="Write your prompt here..."
-        className="w-full resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow leading-relaxed"
+        className="w-full resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow leading-relaxed"
       />
       <div className="flex gap-2 justify-end">
         <Button size="sm" variant="ghost" onClick={onClose}>
@@ -1452,7 +1444,7 @@ function PromptListCard({
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="List name..."
-          className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow"
+          className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow"
         />
         <p className="text-xs font-semibold text-muted-foreground">Prompts (sent in order)</p>
         <div className="flex flex-col gap-2">
@@ -1465,7 +1457,7 @@ function PromptListCard({
                 onChange={(e) => updateItem(i, e.target.value)}
                 rows={2}
                 placeholder={`Prompt ${i + 1}...`}
-                className="flex-1 resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow leading-relaxed"
+                className="flex-1 resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow leading-relaxed"
               />
               <button
                 type="button"
@@ -1605,7 +1597,7 @@ function NewPromptListForm({ onClose, onRefresh }: { onClose: () => void; onRefr
         onChange={(e) => setName(e.target.value)}
         placeholder="List name..."
         autoFocus
-        className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow"
+        className="w-full rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow"
       />
       <p className="text-xs font-semibold text-muted-foreground">
         Prompts — loaded into the composer one at a time
@@ -1619,7 +1611,7 @@ function NewPromptListForm({ onClose, onRefresh }: { onClose: () => void; onRefr
               onChange={(e) => updateItem(i, e.target.value)}
               rows={2}
               placeholder={`Prompt ${i + 1}...`}
-              className="flex-1 resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-primary/50 transition-shadow leading-relaxed"
+              className="flex-1 resize-y rounded-lg border-0 bg-background/80 px-3 py-2 text-sm ring-1 ring-border/60 outline-none focus:ring-ring transition-shadow leading-relaxed"
             />
             <button
               type="button"
@@ -1899,7 +1891,7 @@ export function PromptStorageDialog({
                 onFocus={() => setShowSuggestions(true)}
                 onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
                 placeholder={`Search ${activeTab === "prompts" ? "prompts by name or text" : "prompt lists by name"}…`}
-                className="w-full rounded-lg border-0 bg-muted/50 pl-9 pr-3 py-2 text-sm outline-none focus:ring-1 focus:ring-primary/50 placeholder:text-muted-foreground/60 transition-shadow"
+                className="w-full rounded-lg border-0 bg-muted/50 pl-9 pr-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/60 transition-shadow"
               />
               {showSuggestions && searchQuery.trim() !== "" && suggestions.length > 0 && (
                 <div className="absolute top-full left-0 right-0 z-50 mt-1 rounded-xl border border-border/60 bg-popover shadow-lg overflow-hidden">
diff --git a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
index 76f443afe4..088d016894 100644
--- a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
+++ b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
@@ -25,10 +25,10 @@ import {
   EmptyTitle,
 } from "@/components/ui/empty";
 import { ShineBorder } from "@/components/ui/shine-border";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { toastError } from "@/shared/toast";
 import {
   Album02Icon,
-  ArrowDown01Icon,
   CodeIcon,
   CookBookIcon,
   Database02Icon,
@@ -415,7 +415,10 @@ export function DataRecipesPage(): ReactElement {
               <Button type="button" disabled={isBusy}>
                 <HugeiconsIcon icon={PlusSignIcon} className="size-4" />
                 New Recipe
-                <HugeiconsIcon icon={ArrowDown01Icon} className="size-4" />
+                <HugeiconsIcon
+                  icon={ChevronDownStandardIcon}
+                  className="size-4"
+                />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -439,7 +442,88 @@ export function DataRecipesPage(): ReactElement {
           </DropdownMenu>
         </div>
 
-        {!ready ? (
+        {ready ? (
+          recipes.length === 0 ? (
+            <Empty className="mt-8 border border-dashed border-border/70 dark:border-none">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <HugeiconsIcon icon={CookBookIcon} className="size-5" />
+                </EmptyMedia>
+                <EmptyTitle>No recipes yet</EmptyTitle>
+                <EmptyDescription>
+                  Browse Learning Recipes below to understand how recipe
+                  workflows work.
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent className="max-w-6xl items-stretch">
+                {/*<Button*/}
+                {/*  type="button"*/}
+                {/*  variant="secondary"*/}
+                {/*  className="mx-auto"*/}
+                {/*  onClick={() => setLearningDialogOpen(true)}*/}
+                {/*  disabled={isBusy}*/}
+                {/*>*/}
+                {/*  <HugeiconsIcon icon={CookBookIcon} className="size-4" />*/}
+                {/*  Start Tutorial*/}
+                {/*</Button>*/}
+                <LearningRecipeCards
+                  onSelect={(template) => {
+                    openLearningRecipe(template).catch(() => undefined);
+                  }}
+                  loadingTemplateId={loadingTemplateId}
+                />
+              </EmptyContent>
+            </Empty>
+          ) : (
+            <div className="mt-8 space-y-2">
+              {recipes.map((recipe) => (
+                <div
+                  key={recipe.id}
+                  className="flex items-center gap-3 rounded-xl border bg-card px-4 py-3"
+                >
+                  <button
+                    type="button"
+                    className="flex min-w-0 flex-1 items-center gap-3 text-left"
+                    onClick={() => openRecipe(recipe)}
+                  >
+                    <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20">
+                      <HugeiconsIcon
+                        icon={CookBookIcon}
+                        className="size-4 text-muted-foreground"
+                      />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <p className="truncate text-sm font-medium">
+                          {recipe.name}
+                        </p>
+                        {recipe.learningRecipeId ? (
+                          <Badge variant="outline">Learning Recipe</Badge>
+                        ) : null}
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        Last updated {formatRelativeTime(recipe.updatedAt)} |
+                        Created {formatRelativeTime(recipe.createdAt)}
+                      </p>
+                    </div>
+                  </button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={() => {
+                      handleDeleteRecipe(recipe.id).catch(() => undefined);
+                    }}
+                    aria-label={`Delete ${recipe.name}`}
+                  >
+                    <HugeiconsIcon icon={Delete02Icon} className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )
+        ) : (
           <div className="mt-8 rounded-2xl border border-border/70 bg-card px-6 py-10 text-center">
             <p className="text-sm font-medium text-foreground">
               Loading recipes
@@ -448,85 +532,6 @@ export function DataRecipesPage(): ReactElement {
               Fetching your saved recipes and learning templates.
             </p>
           </div>
-        ) : recipes.length === 0 ? (
-          <Empty className="mt-8 border border-dashed border-border/70 dark:border-none">
-            <EmptyHeader>
-              <EmptyMedia variant="icon">
-                <HugeiconsIcon icon={CookBookIcon} className="size-5" />
-              </EmptyMedia>
-              <EmptyTitle>No recipes yet</EmptyTitle>
-              <EmptyDescription>
-                Browse Learning Recipes below to understand how recipe workflows
-                work.
-              </EmptyDescription>
-            </EmptyHeader>
-            <EmptyContent className="max-w-6xl items-stretch">
-              {/*<Button*/}
-              {/*  type="button"*/}
-              {/*  variant="secondary"*/}
-              {/*  className="mx-auto"*/}
-              {/*  onClick={() => setLearningDialogOpen(true)}*/}
-              {/*  disabled={isBusy}*/}
-              {/*>*/}
-              {/*  <HugeiconsIcon icon={CookBookIcon} className="size-4" />*/}
-              {/*  Start Tutorial*/}
-              {/*</Button>*/}
-              <LearningRecipeCards
-                onSelect={(template) => {
-                  openLearningRecipe(template).catch(() => undefined);
-                }}
-                loadingTemplateId={loadingTemplateId}
-              />
-            </EmptyContent>
-          </Empty>
-        ) : (
-          <div className="mt-8 space-y-2">
-            {recipes.map((recipe) => (
-              <div
-                key={recipe.id}
-                className="flex items-center gap-3 rounded-xl border bg-card px-4 py-3"
-              >
-                <button
-                  type="button"
-                  className="flex min-w-0 flex-1 items-center gap-3 text-left"
-                  onClick={() => openRecipe(recipe)}
-                >
-                  <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20">
-                    <HugeiconsIcon
-                      icon={CookBookIcon}
-                      className="size-4 text-muted-foreground"
-                    />
-                  </div>
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                      <p className="truncate text-sm font-medium">
-                        {recipe.name}
-                      </p>
-                      {recipe.learningRecipeId ? (
-                        <Badge variant="outline">Learning Recipe</Badge>
-                      ) : null}
-                    </div>
-                    <p className="text-xs text-muted-foreground">
-                      Last updated {formatRelativeTime(recipe.updatedAt)} |
-                      Created {formatRelativeTime(recipe.createdAt)}
-                    </p>
-                  </div>
-                </button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="size-8"
-                  onClick={() => {
-                    handleDeleteRecipe(recipe.id).catch(() => undefined);
-                  }}
-                  aria-label={`Delete ${recipe.name}`}
-                >
-                  <HugeiconsIcon icon={Delete02Icon} className="size-4" />
-                </Button>
-              </div>
-            ))}
-          </div>
         )}
       </main>
 
diff --git a/studio/frontend/src/features/export/components/method-picker.tsx b/studio/frontend/src/features/export/components/method-picker.tsx
index 282b7c99f8..420a7f6146 100644
--- a/studio/frontend/src/features/export/components/method-picker.tsx
+++ b/studio/frontend/src/features/export/components/method-picker.tsx
@@ -61,13 +61,14 @@ export function MethodPicker({ value, onChange, disabledMethods = [], disabledRe
               key={m.value}
               type="button"
               disabled={isDisabled}
+              aria-pressed={selected}
               onClick={() => !isDisabled && onChange(m.value)}
               className={cn(
                 "flex items-start gap-3 rounded-xl p-4 text-left ring-1 transition-colors",
                 isDisabled
                   ? "ring-border opacity-40 cursor-not-allowed"
                   : selected
-                    ? "ring-2 ring-primary bg-primary/5"
+                    ? "ring-1 ring-ring-strong bg-primary/5"
                     : "ring-border hover:bg-muted/40",
               )}
             >
diff --git a/studio/frontend/src/features/export/components/quant-picker.tsx b/studio/frontend/src/features/export/components/quant-picker.tsx
index dadc959e55..289f6498ce 100644
--- a/studio/frontend/src/features/export/components/quant-picker.tsx
+++ b/studio/frontend/src/features/export/components/quant-picker.tsx
@@ -73,11 +73,12 @@ export function QuantPicker({ value, onChange, sizes }: QuantPickerProps) {
             <button
               key={q.value}
               type="button"
+              aria-pressed={active}
               onClick={() => toggle(q.value)}
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium ring-1 transition-colors",
                 active
-                  ? "ring-primary bg-primary/10 text-foreground"
+                  ? "ring-ring-strong bg-primary/10 text-foreground"
                   : "ring-border text-muted-foreground hover:text-foreground hover:ring-foreground/20",
               )}
             >
diff --git a/studio/frontend/src/features/export/export-page.tsx b/studio/frontend/src/features/export/export-page.tsx
index 07606a26ed..4cd7958fb8 100644
--- a/studio/frontend/src/features/export/export-page.tsx
+++ b/studio/frontend/src/features/export/export-page.tsx
@@ -2,8 +2,8 @@
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
 import { SectionCard } from "@/components/section-card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
 import {
   Combobox,
   ComboboxContent,
@@ -12,6 +12,14 @@ import {
   ComboboxItem,
   ComboboxList,
 } from "@/components/ui/combobox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   InputGroup,
   InputGroupAddon,
@@ -24,46 +32,37 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert";
 import { Separator } from "@/components/ui/separator";
 import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {
-  listLocalModels,
-  type LocalModelInfo,
-  useTrainingConfigStore,
-} from "@/features/training";
+import { usePlatformStore } from "@/config/env";
 import { useHubModelSearch } from "@/features/hub/hooks/use-hub-model-search";
 import { confirmRemoteCodeIfNeeded } from "@/features/security";
+import { GuidedTour, useGuidedTourController } from "@/features/tour";
+import {
+  type LocalModelInfo,
+  listLocalModels,
+  useTrainingConfigStore,
+} from "@/features/training";
 import { useDebouncedValue, useHfTokenValidation } from "@/hooks";
+import { useHardwareInfo } from "@/hooks/use-hardware-info";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import {
   AlertCircleIcon,
-  ArrowDown01Icon,
   FolderSearchIcon,
   InformationCircleIcon,
   Key01Icon,
   PackageIcon,
   Search01Icon,
 } from "@hugeicons/core-free-icons";
-import { useSearch } from "@tanstack/react-router";
 import { HugeiconsIcon } from "@hugeicons/react";
+import { useSearch } from "@tanstack/react-router";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import type { ModelCheckpoints } from "./api/export-api";
@@ -77,22 +76,23 @@ import {
   GUIDE_STEPS,
   MERGED_FORMATS,
   type MergedFormatOption,
-  mergedFormatPayload,
   QUANT_OPTIONS,
   buildQuantSizeLabels,
   getEstimatedSize,
+  mergedFormatPayload,
 } from "./constants";
-import { useHardwareInfo } from "@/hooks/use-hardware-info";
-import { usePlatformStore } from "@/config/env";
+import { useExportSizeEstimate } from "./hooks/use-export-size-estimate";
 import {
   isExportPanelActive,
   useExportRuntimeStore,
 } from "./stores/export-runtime-store";
-import { useExportSizeEstimate } from "./hooks/use-export-size-estimate";
-import { GuidedTour, useGuidedTourController } from "@/features/tour";
 import { exportTourSteps } from "./tour";
 
-const SEARCH_INPUT_REASONS = new Set(["input-change", "input-paste", "input-clear"]);
+const SEARCH_INPUT_REASONS = new Set([
+  "input-change",
+  "input-paste",
+  "input-clear",
+]);
 
 // GGUF LoRA output float types (Q8_0 first / default). Q8_0 falls back to F16 per tensor for dims
 // not divisible by the block size (32); no "auto" - the choice is explicit.
@@ -101,7 +101,6 @@ const LORA_GGUF_OUTTYPES = ["q8_0", "f16", "bf16", "f32"] as const;
 type SourceTab = "local" | "checkpoint" | "hf";
 type SourceMode = "checkpoint" | "model";
 
-
 function safePathSegment(
   value: string | null | undefined,
   fallback = "model",
@@ -125,7 +124,7 @@ function buildRelativeSaveDirectory(
   if (exportMethod === "gguf") {
     const rawName =
       sourceMode === "checkpoint"
-        ? checkpoint ?? selectedModelIdx ?? sourceBaseModelName
+        ? (checkpoint ?? selectedModelIdx ?? sourceBaseModelName)
         : sourceBaseModelName;
     return `${safePathSegment(rawName)}-GGUF`;
   }
@@ -136,7 +135,7 @@ function buildRelativeSaveDirectory(
   // Local / HF source (no checkpoint): name from the model id to avoid "model/null".
   const rawName =
     sourceMode === "checkpoint"
-      ? checkpoint ?? selectedModelIdx ?? sourceBaseModelName
+      ? (checkpoint ?? selectedModelIdx ?? sourceBaseModelName)
       : sourceBaseModelName;
   return `${safePathSegment(rawName)}-${exportMethod === "lora" ? "adapter" : "merged"}`;
 }
@@ -154,11 +153,12 @@ function siblingGgufDirectory(sourcePath: string): string | null {
       : trimmed.slice(0, slash);
   const name = trimmed.slice(slash + 1);
   if (!name) return null;
-  const sep = parent.endsWith("/") || parent.endsWith("\\")
-    ? ""
-    : trimmed.includes("\\")
-      ? "\\"
-      : "/";
+  const sep =
+    parent.endsWith("/") || parent.endsWith("\\")
+      ? ""
+      : trimmed.includes("\\")
+        ? "\\"
+        : "/";
   return `${parent}${sep}${name}_gguf`;
 }
 
@@ -250,9 +250,7 @@ export function ExportPage() {
   );
   const toggleFormat = useCallback((value: string) => {
     setSelectedFormats((prev) =>
-      prev.includes(value)
-        ? prev.filter((v) => v !== value)
-        : [...prev, value],
+      prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],
     );
   }, []);
   // availableFormats already drops NVIDIA-only formats on other hardware, so no pruning needed.
@@ -353,7 +351,9 @@ export function ExportPage() {
       .catch((error) => {
         if (controller.signal.aborted) return;
         setLocalModelsError(
-          error instanceof Error ? error.message : "Failed to load local models",
+          error instanceof Error
+            ? error.message
+            : "Failed to load local models",
         );
       })
       .finally(() => {
@@ -367,7 +367,7 @@ export function ExportPage() {
   const selectedModelData = useMemo(
     () =>
       selectedModelIdx != null
-        ? models.find((m) => m.name === selectedModelIdx) ?? null
+        ? (models.find((m) => m.name === selectedModelIdx) ?? null)
         : null,
     [models, selectedModelIdx],
   );
@@ -390,9 +390,8 @@ export function ExportPage() {
   const trainingMethodLabel = selectedModelData?.peft_type
     ? "LoRA / QLoRA"
     : "Full Fine-tune";
-  const sourceBaseModelName = sourceMode === "model"
-    ? selectedSourceModel ?? "—"
-    : baseModelName;
+  const sourceBaseModelName =
+    sourceMode === "model" ? (selectedSourceModel ?? "—") : baseModelName;
 
   // For a full fine-tune checkpoint the weights live in the checkpoint dir
   // itself (its base_model may be a local/custom path that can't be sized), so
@@ -405,10 +404,19 @@ export function ExportPage() {
       }
     }
     return sourceBaseModelName;
-  }, [sourceMode, isAdapter, checkpointsForModel, checkpoint, sourceBaseModelName]);
+  }, [
+    sourceMode,
+    isAdapter,
+    checkpointsForModel,
+    checkpoint,
+    sourceBaseModelName,
+  ]);
 
   // Real (MoE-aware) fp16 size, used to scale the GGUF quant estimates.
-  const { fp16Bytes } = useExportSizeEstimate(sizeTargetModel, debouncedHfToken);
+  const { fp16Bytes } = useExportSizeEstimate(
+    sizeTargetModel,
+    debouncedHfToken,
+  );
   const quantSizeLabels = useMemo(
     () => buildQuantSizeLabels(fp16Bytes),
     [fp16Bytes],
@@ -521,7 +529,13 @@ export function ExportPage() {
     if ((!effectiveIsAdapter || isMacHost) && ggufTarget !== "model") {
       setGgufTarget("model");
     }
-  }, [effectiveIsAdapter, effectiveIsQuantized, exportMethod, isMacHost, ggufTarget]);
+  }, [
+    effectiveIsAdapter,
+    effectiveIsQuantized,
+    exportMethod,
+    isMacHost,
+    ggufTarget,
+  ]);
 
   const handleSourceTabChange = useCallback((next: string) => {
     if (next === "checkpoint") {
@@ -579,7 +593,10 @@ export function ExportPage() {
       selectedSourceModel
     ) {
       const localModel = localMetaById.get(selectedSourceModel);
-      if (localModel && (localModel.source === "models_dir" || localModel.source === "custom")) {
+      if (
+        localModel &&
+        (localModel.source === "models_dir" || localModel.source === "custom")
+      ) {
         return siblingGgufDirectory(localModel.path) ?? relative;
       }
     }
@@ -606,7 +623,9 @@ export function ExportPage() {
 
   // Restrict a Hub merged export to a single format; multi-format stays available for local export.
   const hubMultiFormat =
-    destination === "hub" && exportMethod === "merged" && selectedFormats.length > 1;
+    destination === "hub" &&
+    exportMethod === "merged" &&
+    selectedFormats.length > 1;
 
   const canExport = !!(
     selectedExportSource &&
@@ -657,7 +676,14 @@ export function ExportPage() {
 
   useEffect(() => {
     setCustomSaveDirectory(null);
-  }, [checkpoint, exportMethod, modelSource, selectedModelIdx, selectedSourceModel, sourceMode]);
+  }, [
+    checkpoint,
+    exportMethod,
+    modelSource,
+    selectedModelIdx,
+    selectedSourceModel,
+    sourceMode,
+  ]);
 
   const handleLocalSourceInputChange = useCallback(
     (value: string, eventDetails?: { reason?: string }) => {
@@ -677,27 +703,31 @@ export function ExportPage() {
   // Assemble the run params from the current form and hand off to the global
   // runtime store, which drives load -> export -> cleanup in the background.
   const handleStart = useCallback(async () => {
-    const source = sourceMode === "checkpoint" ? checkpoint : selectedSourceModel;
+    const source =
+      sourceMode === "checkpoint" ? checkpoint : selectedSourceModel;
     if (!source || !exportMethod) return;
     // No supported accelerator (or PyTorch/MLX missing): the backend would reject anyway; don't submit.
     if (exportUnsupported) return;
     // GGUF with no quant, or merged with no format, would run an unintended/empty export; require
     // at least one (mirrors canExport, in case the panel's Start button bypasses the outer one).
-    if (exportMethod === "gguf" && !ggufAsLora && quantLevels.length === 0) return;
+    if (exportMethod === "gguf" && !ggufAsLora && quantLevels.length === 0)
+      return;
     if (exportMethod === "merged" && selectedFormats.length === 0) return;
     // A Hub merged push writes each format to the repo root; several would collide (mirrors canExport).
     if (hubMultiFormat) return;
 
-    const selectedCp = sourceMode === "checkpoint"
-      ? checkpointsForModel.find((cp) => cp.display_name === checkpoint)
-      : null;
+    const selectedCp =
+      sourceMode === "checkpoint"
+        ? checkpointsForModel.find((cp) => cp.display_name === checkpoint)
+        : null;
     if (sourceMode === "checkpoint" && !selectedCp) return;
     const checkpointPath = selectedCp?.path ?? null;
 
     const pushToHub = destination === "hub";
-    const repoId = pushToHub && hfUsername && modelName
-      ? `${hfUsername}/${modelName}`
-      : undefined;
+    const repoId =
+      pushToHub && hfUsername && modelName
+        ? `${hfUsername}/${modelName}`
+        : undefined;
     const token = pushToHub && hfToken ? hfToken : undefined;
     // The GGUF method with the LoRA target reuses the LoRA-adapter export path.
     const effectiveMethod: ExportMethod = ggufAsLora ? "lora" : exportMethod;
@@ -705,7 +735,8 @@ export function ExportPage() {
       ggufAsLora || (effectiveMethod === "lora" && loraAsGguf && !isMacHost);
     const methodLabel = ggufAsLora
       ? "GGUF LoRA adapter"
-      : (EXPORT_METHODS.find((m) => m.value === exportMethod)?.title ?? exportMethod);
+      : (EXPORT_METHODS.find((m) => m.value === exportMethod)?.title ??
+        exportMethod);
     const adapterExport = sourceMode === "checkpoint" && isAdapter;
 
     // Consent gate for an HF source's custom (auto_map) code, run before we hand
@@ -936,7 +967,10 @@ export function ExportPage() {
 
                   {sourceMode === "checkpoint" ? (
                     <div className="flex flex-col gap-2 overflow-visible">
-                      <div data-tour="export-training-run" className="flex flex-col gap-2">
+                      <div
+                        data-tour="export-training-run"
+                        className="flex flex-col gap-2"
+                      >
                         <label className="text-xs font-medium text-muted-foreground">
                           Training Run
                         </label>
@@ -960,13 +994,12 @@ export function ExportPage() {
                                 ? m.name.slice(0, tsMatch.index)
                                 : m.name;
                               const timeStr = tsMatch
-                                ? new Date(Number(tsMatch[1]) * 1000).toLocaleString(
-                                    undefined,
-                                    {
-                                      dateStyle: "medium",
-                                      timeStyle: "short",
-                                    },
-                                  )
+                                ? new Date(
+                                    Number(tsMatch[1]) * 1000,
+                                  ).toLocaleString(undefined, {
+                                    dateStyle: "medium",
+                                    timeStyle: "short",
+                                  })
                                 : null;
                               return (
                                 <SelectItem key={m.name} value={m.name}>
@@ -989,7 +1022,10 @@ export function ExportPage() {
                         </Select>
                       </div>
 
-                      <div data-tour="export-checkpoint" className="flex flex-col gap-2">
+                      <div
+                        data-tour="export-checkpoint"
+                        className="flex flex-col gap-2"
+                      >
                         <label className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                           Checkpoint
                           <Tooltip>
@@ -1026,11 +1062,11 @@ export function ExportPage() {
                           <SelectTrigger className="w-full">
                             <SelectValue
                               placeholder={
-                                !selectedModelIdx
-                                  ? "Select a training run first"
-                                  : checkpointsForModel.length === 0
+                                selectedModelIdx
+                                  ? checkpointsForModel.length === 0
                                     ? "No checkpoints found"
                                     : "Select a checkpoint…"
+                                  : "Select a training run first"
                               }
                             />
                           </SelectTrigger>
@@ -1064,7 +1100,9 @@ export function ExportPage() {
                                 items={hfResultIds}
                                 filteredItems={hfResultIds}
                                 filter={null}
-                                value={modelInput || selectedSourceModel || null}
+                                value={
+                                  modelInput || selectedSourceModel || null
+                                }
                                 onValueChange={handleHfSourceModelSelect}
                                 onInputValueChange={handleHfSourceInputChange}
                                 itemToStringValue={(id) => id}
@@ -1083,7 +1121,10 @@ export function ExportPage() {
                                   }}
                                 >
                                   <InputGroupAddon>
-                                    <HugeiconsIcon icon={Search01Icon} className="size-4" />
+                                    <HugeiconsIcon
+                                      icon={Search01Icon}
+                                      className="size-4"
+                                    />
                                   </InputGroupAddon>
                                 </ComboboxInput>
                                 <ComboboxContent anchor={hfComboboxAnchorRef}>
@@ -1092,11 +1133,17 @@ export function ExportPage() {
                                       <Spinner className="size-4" /> Searching…
                                     </div>
                                   ) : (
-                                    <ComboboxEmpty>No models found</ComboboxEmpty>
+                                    <ComboboxEmpty>
+                                      No models found
+                                    </ComboboxEmpty>
                                   )}
                                   <ComboboxList className="p-1 !max-h-none !overflow-visible">
                                     {(id: string) => (
-                                      <ComboboxItem key={id} value={id} className="gap-2">
+                                      <ComboboxItem
+                                        key={id}
+                                        value={id}
+                                        className="gap-2"
+                                      >
                                         <span className="block min-w-0 flex-1 truncate">
                                           {id}
                                         </span>
@@ -1120,7 +1167,10 @@ export function ExportPage() {
                             </label>
                             <InputGroup>
                               <InputGroupAddon>
-                                <HugeiconsIcon icon={Key01Icon} className="size-4" />
+                                <HugeiconsIcon
+                                  icon={Key01Icon}
+                                  className="size-4"
+                                />
                               </InputGroupAddon>
                               <InputGroupInput
                                 type="password"
@@ -1132,7 +1182,9 @@ export function ExportPage() {
                               />
                             </InputGroup>
                             {isCheckingToken && (
-                              <p className="text-xs text-muted-foreground">Checking token…</p>
+                              <p className="text-xs text-muted-foreground">
+                                Checking token…
+                              </p>
                             )}
                           </div>
                         </>
@@ -1164,15 +1216,24 @@ export function ExportPage() {
                                     : "./models/my-model"
                                 }
                                 className="w-full"
-                                onBlur={() => applyLocalSourceModel(localModelInputRef.current)}
+                                onBlur={() =>
+                                  applyLocalSourceModel(
+                                    localModelInputRef.current,
+                                  )
+                                }
                                 onKeyDown={(event) => {
                                   if (event.key !== "Enter") return;
                                   event.preventDefault();
-                                  applyLocalSourceModel(localModelInputRef.current);
+                                  applyLocalSourceModel(
+                                    localModelInputRef.current,
+                                  );
                                 }}
                               >
                                 <InputGroupAddon>
-                                  <HugeiconsIcon icon={FolderSearchIcon} className="size-4" />
+                                  <HugeiconsIcon
+                                    icon={FolderSearchIcon}
+                                    className="size-4"
+                                  />
                                 </InputGroupAddon>
                               </ComboboxInput>
                               <ComboboxContent anchor={localComboboxAnchorRef}>
@@ -1185,7 +1246,9 @@ export function ExportPage() {
                                     {localModelsError}
                                   </div>
                                 ) : (
-                                  <ComboboxEmpty>No local models found</ComboboxEmpty>
+                                  <ComboboxEmpty>
+                                    No local models found
+                                  </ComboboxEmpty>
                                 )}
                                 <ComboboxList className="p-1 !max-h-none !overflow-visible">
                                   {(id: string) => {
@@ -1197,7 +1260,11 @@ export function ExportPage() {
                                           ? "Custom Folders"
                                           : "Local dir";
                                     return (
-                                      <ComboboxItem key={id} value={id} className="gap-2">
+                                      <ComboboxItem
+                                        key={id}
+                                        value={id}
+                                        className="gap-2"
+                                      >
                                         <span className="block min-w-0 flex-1 truncate">
                                           {model?.display_name ?? id}
                                         </span>
@@ -1216,7 +1283,9 @@ export function ExportPage() {
                               Scanning local models...
                             </p>
                           ) : localModelsError ? (
-                            <p className="text-[10px] text-red-500">{localModelsError}</p>
+                            <p className="text-[10px] text-red-500">
+                              {localModelsError}
+                            </p>
                           ) : (
                             <p className="text-[10px] text-muted-foreground">
                               {exportableLocalModels.length > 0
@@ -1242,7 +1311,9 @@ export function ExportPage() {
                       </span>
                       <div className="grid grid-cols-1 gap-x-6 gap-y-1.5 text-xs sm:grid-cols-2">
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">Base Model</span>
+                          <span className="text-muted-foreground">
+                            Base Model
+                          </span>
                           <span className="font-medium">{baseModelName}</span>
                         </div>
                         <div className="flex justify-between">
@@ -1252,14 +1323,18 @@ export function ExportPage() {
                           </span>
                         </div>
                         <div className="flex justify-between">
-                          <span className="text-muted-foreground">Checkpoints</span>
+                          <span className="text-muted-foreground">
+                            Checkpoints
+                          </span>
                           <span className="font-medium">
                             {checkpointsForModel.length}
                           </span>
                         </div>
                         {isAdapter && (
                           <div className="flex justify-between">
-                            <span className="text-muted-foreground">LoRA Rank</span>
+                            <span className="text-muted-foreground">
+                              LoRA Rank
+                            </span>
                             <span className="font-medium">{loraRank}</span>
                           </div>
                         )}
@@ -1292,7 +1367,9 @@ export function ExportPage() {
                 <Alert variant="destructive">
                   <HugeiconsIcon icon={AlertCircleIcon} className="size-4" />
                   <AlertTitle>Export unavailable</AlertTitle>
-                  <AlertDescription>{exportUnsupportedMessage}</AlertDescription>
+                  <AlertDescription>
+                    {exportUnsupportedMessage}
+                  </AlertDescription>
                 </Alert>
               )}
 
@@ -1304,18 +1381,18 @@ export function ExportPage() {
                     ? ["merged", "lora", "gguf"]
                     : !effectiveIsAdapter && effectiveIsQuantized
                       ? ["merged", "lora", "gguf"]
-                      : !effectiveIsAdapter
-                        ? ["lora"]
-                        : []
+                      : effectiveIsAdapter
+                        ? []
+                        : ["lora"]
                 }
                 disabledReason={
                   exportUnsupported
                     ? exportUnsupportedMessage
                     : !effectiveIsAdapter && effectiveIsQuantized
                       ? "Pre-quantized (BNB 4-bit) models cannot be exported without LoRA adapters"
-                      : !effectiveIsAdapter
-                        ? "LoRA-only export needs a LoRA adapter checkpoint"
-                        : undefined
+                      : effectiveIsAdapter
+                        ? undefined
+                        : "LoRA-only export needs a LoRA adapter checkpoint"
                 }
               />
 
@@ -1445,66 +1522,68 @@ export function ExportPage() {
                 </div>
               )}
 
-              {exportMethod === "lora" && effectiveIsAdapter && !exportUnsupported && (
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <div className="text-sm font-medium">Adapter format</div>
-                    <div className="flex flex-wrap gap-2">
-                      <Button
-                        type="button"
-                        variant={!loraAsGguf ? "default" : "outline"}
-                        size="sm"
-                        onClick={() => setLoraAsGguf(false)}
-                        title="Standard PEFT adapter (adapter_model.safetensors)."
-                      >
-                        Adapter (safetensors)
-                      </Button>
-                      <Button
-                        type="button"
-                        variant={loraAsGguf ? "default" : "outline"}
-                        size="sm"
-                        disabled={isMacHost}
-                        onClick={() => setLoraAsGguf(true)}
-                        title={
-                          isMacHost
-                            ? "GGUF LoRA export is not available on macOS/MLX. Use the safetensors adapter."
-                            : "llama.cpp GGUF LoRA, loadable with `llama-cli --lora`."
-                        }
-                      >
-                        GGUF adapter
-                      </Button>
+              {exportMethod === "lora" &&
+                effectiveIsAdapter &&
+                !exportUnsupported && (
+                  <div className="space-y-3">
+                    <div className="space-y-2">
+                      <div className="text-sm font-medium">Adapter format</div>
+                      <div className="flex flex-wrap gap-2">
+                        <Button
+                          type="button"
+                          variant={loraAsGguf ? "outline" : "default"}
+                          size="sm"
+                          onClick={() => setLoraAsGguf(false)}
+                          title="Standard PEFT adapter (adapter_model.safetensors)."
+                        >
+                          Adapter (safetensors)
+                        </Button>
+                        <Button
+                          type="button"
+                          variant={loraAsGguf ? "default" : "outline"}
+                          size="sm"
+                          disabled={isMacHost}
+                          onClick={() => setLoraAsGguf(true)}
+                          title={
+                            isMacHost
+                              ? "GGUF LoRA export is not available on macOS/MLX. Use the safetensors adapter."
+                              : "llama.cpp GGUF LoRA, loadable with `llama-cli --lora`."
+                          }
+                        >
+                          GGUF adapter
+                        </Button>
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {isMacHost
+                          ? "GGUF LoRA is not available on macOS/MLX; exporting the safetensors adapter."
+                          : loraAsGguf
+                            ? "Converts the adapter to a GGUF LoRA (llama.cpp `--lora`). The base model stays separate."
+                            : "Standard PEFT adapter files. Pair with the base model at inference."}
+                      </div>
                     </div>
-                    <div className="text-xs text-muted-foreground">
-                      {isMacHost
-                        ? "GGUF LoRA is not available on macOS/MLX; exporting the safetensors adapter."
-                        : loraAsGguf
-                          ? "Converts the adapter to a GGUF LoRA (llama.cpp `--lora`). The base model stays separate."
-                          : "Standard PEFT adapter files. Pair with the base model at inference."}
-                    </div>
-                  </div>
 
-                  {loraAsGguf && (
-                    <div className="space-y-1.5">
-                      <div className="text-sm font-medium">Output type</div>
-                      <Select
-                        value={loraGgufOuttype}
-                        onValueChange={(v) => setLoraGgufOuttype(v)}
-                      >
-                        <SelectTrigger className="w-full sm:w-56">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {LORA_GGUF_OUTTYPES.map((t) => (
-                            <SelectItem key={t} value={t}>
-                              {t.toUpperCase()}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  )}
-                </div>
-              )}
+                    {loraAsGguf && (
+                      <div className="space-y-1.5">
+                        <div className="text-sm font-medium">Output type</div>
+                        <Select
+                          value={loraGgufOuttype}
+                          onValueChange={(v) => setLoraGgufOuttype(v)}
+                        >
+                          <SelectTrigger className="w-full sm:w-56">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {LORA_GGUF_OUTTYPES.map((t) => (
+                              <SelectItem key={t} value={t}>
+                                {t.toUpperCase()}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    )}
+                  </div>
+                )}
 
               {exportMethod === "gguf" && !exportUnsupported && (
                 <div className="space-y-3">
@@ -1514,7 +1593,9 @@ export function ExportPage() {
                       <div className="flex flex-wrap gap-2">
                         <Button
                           type="button"
-                          variant={ggufTarget === "model" ? "default" : "outline"}
+                          variant={
+                            ggufTarget === "model" ? "default" : "outline"
+                          }
                           size="sm"
                           onClick={() => setGgufTarget("model")}
                           title="Merge the adapter into the base model, then quantize the full model to GGUF."
@@ -1523,7 +1604,9 @@ export function ExportPage() {
                         </Button>
                         <Button
                           type="button"
-                          variant={ggufTarget === "lora" ? "default" : "outline"}
+                          variant={
+                            ggufTarget === "lora" ? "default" : "outline"
+                          }
                           size="sm"
                           onClick={() => setGgufTarget("lora")}
                           title="Export just the adapter as a GGUF LoRA (llama.cpp `--lora`); the base model stays separate."
@@ -1598,32 +1681,36 @@ export function ExportPage() {
 
               <Separator />
               {showPanel && (
-                    <ExportRunPanel
-                      exportMethod={exportMethod}
-                      quantLevels={quantLevels}
-                      checkpoint={selectedExportSource}
-                      baseModelName={sourceBaseModelName}
-                      isAdapter={sourceMode === "checkpoint" && isAdapter}
-                      destination={destination}
-                      onDestinationChange={setDestination}
-                      saveDirectory={saveDirectory}
-                      defaultSaveDirectory={defaultSaveDirectory}
-                      saveDirectoryOverridden={!!customSaveDirectory}
-                      onSaveDirectoryChange={setCustomSaveDirectory}
-                      hfUsername={hfUsername}
-                      onHfUsernameChange={setHfUsername}
-                      modelName={modelName}
-                      onModelNameChange={setModelName}
-                      hfToken={hfToken}
-                      onHfTokenChange={setHfToken}
-                      privateRepo={privateRepo}
-                      onPrivateRepoChange={setPrivateRepo}
-                      onStart={handleStart}
-                      onClose={handleClosePanel}
-                    />
-                )}
+                <ExportRunPanel
+                  exportMethod={exportMethod}
+                  quantLevels={quantLevels}
+                  checkpoint={selectedExportSource}
+                  baseModelName={sourceBaseModelName}
+                  isAdapter={sourceMode === "checkpoint" && isAdapter}
+                  destination={destination}
+                  onDestinationChange={setDestination}
+                  saveDirectory={saveDirectory}
+                  defaultSaveDirectory={defaultSaveDirectory}
+                  saveDirectoryOverridden={!!customSaveDirectory}
+                  onSaveDirectoryChange={setCustomSaveDirectory}
+                  hfUsername={hfUsername}
+                  onHfUsernameChange={setHfUsername}
+                  modelName={modelName}
+                  onModelNameChange={setModelName}
+                  hfToken={hfToken}
+                  onHfTokenChange={setHfToken}
+                  privateRepo={privateRepo}
+                  onPrivateRepoChange={setPrivateRepo}
+                  onStart={handleStart}
+                  onClose={handleClosePanel}
+                />
+              )}
               {showPanel && (
-                <div ref={panelEndRef} aria-hidden="true" className="h-px w-full" />
+                <div
+                  ref={panelEndRef}
+                  aria-hidden="true"
+                  className="h-px w-full"
+                />
               )}
               {showPanel && !panelEndVisible && (
                 <button
@@ -1637,7 +1724,10 @@ export function ExportPage() {
                   aria-label="Scroll to export output"
                   className="fixed bottom-6 right-6 z-30 flex size-10 items-center justify-center rounded-full border border-border/60 bg-background/90 text-foreground shadow-md backdrop-blur transition-colors hover:bg-muted"
                 >
-                  <HugeiconsIcon icon={ArrowDown01Icon} className="size-5" />
+                  <HugeiconsIcon
+                    icon={ChevronDownStandardIcon}
+                    className="size-5"
+                  />
                 </button>
               )}
               {!showPanel && (
diff --git a/studio/frontend/src/features/hub/catalog/download-card.tsx b/studio/frontend/src/features/hub/catalog/download-card.tsx
index 17177936ae..9b4bc5fd01 100644
--- a/studio/frontend/src/features/hub/catalog/download-card.tsx
+++ b/studio/frontend/src/features/hub/catalog/download-card.tsx
@@ -140,7 +140,7 @@ export function CardUpdateButton({
               e.stopPropagation();
               onClick();
             }}
-            className="inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-amber-500/[0.07] pl-2 pr-2.5 text-[12px] font-medium text-amber-800/90 transition-colors duration-150 hover:bg-amber-500/[0.12] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/25 dark:bg-amber-400/[0.08] dark:text-amber-200/85 dark:hover:bg-amber-400/[0.16]"
+            className="inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-amber-500/[0.07] pl-2 pr-2.5 text-[12px] font-medium text-amber-800/90 transition-colors duration-150 hover:bg-amber-500/[0.12] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-amber-500/25 dark:bg-amber-400/[0.08] dark:text-amber-200/85 dark:hover:bg-amber-400/[0.16]"
           >
             <HugeiconsIcon
               icon={ArrowReloadHorizontalIcon}
diff --git a/studio/frontend/src/features/hub/catalog/gguf-download-card.tsx b/studio/frontend/src/features/hub/catalog/gguf-download-card.tsx
index 9e4f6593b4..f31212e4fd 100644
--- a/studio/frontend/src/features/hub/catalog/gguf-download-card.tsx
+++ b/studio/frontend/src/features/hub/catalog/gguf-download-card.tsx
@@ -120,7 +120,7 @@ const CHIP_BASE =
 const CHIP_DEFAULT =
   "border-foreground/15 bg-muted text-foreground/85 dark:border-border/60 dark:bg-white/[0.04] dark:text-foreground/85";
 const CHIP_ACTIVE =
-  "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+  "border-control-accent/40 bg-control-accent/10 text-control-accent";
 
 function QuantBadge({
   quant,
@@ -173,7 +173,7 @@ function QuantBadge({
       <span
         className={cn(
           "inline-flex shrink-0 cursor-help items-center gap-1.5 whitespace-nowrap text-[12.5px] font-medium tracking-tight tabular-nums",
-          active ? "text-emerald-600 dark:text-emerald-400" : "text-foreground",
+          active ? "text-control-accent" : "text-foreground",
         )}
       >
         {showFit && (
diff --git a/studio/frontend/src/features/hub/catalog/hub-section-row.tsx b/studio/frontend/src/features/hub/catalog/hub-section-row.tsx
index 70049f16e3..b51a6cc257 100644
--- a/studio/frontend/src/features/hub/catalog/hub-section-row.tsx
+++ b/studio/frontend/src/features/hub/catalog/hub-section-row.tsx
@@ -58,7 +58,7 @@ export const HubSectionRow = memo(function HubSectionRow({
           type="button"
           onClick={onOpenList}
           aria-label={`See all ${title}`}
-          className="hub-section-title group/section -mx-1 inline-flex cursor-pointer items-center gap-1.5 rounded-md px-1 text-[18px] font-semibold tracking-[-0.02em] text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="hub-section-title group/section -mx-1 inline-flex cursor-pointer items-center gap-1.5 rounded-md px-1 text-[18px] font-semibold tracking-[-0.02em] text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
         >
           {title}
           <HugeiconsIcon
diff --git a/studio/frontend/src/features/hub/catalog/model-card.tsx b/studio/frontend/src/features/hub/catalog/model-card.tsx
index 358a3409b5..370e5071f4 100644
--- a/studio/frontend/src/features/hub/catalog/model-card.tsx
+++ b/studio/frontend/src/features/hub/catalog/model-card.tsx
@@ -277,7 +277,7 @@ export const ModelCard = memo(function ModelCard({
       aria-label={row.repo}
       onClick={() => onSelect(row.id)}
       style={cardAccentStyle}
-      className="hub-model-card hub-trending-card group/card flex h-full w-full cursor-pointer flex-col overflow-hidden px-3 py-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      className="hub-model-card hub-trending-card group/card flex h-full w-full cursor-pointer flex-col overflow-hidden px-3 py-3.5 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
     >
       <div className="flex min-w-0 items-start gap-2.5">
         <OwnerAvatar
@@ -295,7 +295,7 @@ export const ModelCard = memo(function ModelCard({
             {row.owner.toLowerCase() === "unsloth" && (
               <span
                 aria-label="Verified Unsloth"
-                className="hub-verified-badge size-3.5 shrink-0 text-primary"
+                className="hub-verified-badge size-3.5 shrink-0 text-verified"
               />
             )}
           </span>
diff --git a/studio/frontend/src/features/hub/catalog/model-inspector.tsx b/studio/frontend/src/features/hub/catalog/model-inspector.tsx
index a67b2a57cc..63cb34678b 100644
--- a/studio/frontend/src/features/hub/catalog/model-inspector.tsx
+++ b/studio/frontend/src/features/hub/catalog/model-inspector.tsx
@@ -577,7 +577,7 @@ export const ModelInspector = memo(function ModelInspector({
               {model.owner.toLowerCase() === "unsloth" && (
                 <span
                   aria-label="Verified Unsloth"
-                  className="hub-verified-badge size-[18px] shrink-0 text-primary"
+                  className="hub-verified-badge size-[18px] shrink-0 text-verified"
                 />
               )}
             </div>
diff --git a/studio/frontend/src/features/hub/catalog/models-catalog-rows.tsx b/studio/frontend/src/features/hub/catalog/models-catalog-rows.tsx
index 4199755ba7..111d78f00b 100644
--- a/studio/frontend/src/features/hub/catalog/models-catalog-rows.tsx
+++ b/studio/frontend/src/features/hub/catalog/models-catalog-rows.tsx
@@ -270,7 +270,7 @@ function CatalogRow({
         aria-label={label}
         onClick={onClick}
         className={cn(
-          "absolute inset-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          "absolute inset-0 cursor-pointer outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
           card ? "rounded-[16px]" : "rounded-[14px]",
         )}
       />
@@ -515,7 +515,7 @@ export const DiscoverModelRow = memo(function DiscoverModelRow({
               {row.owner.toLowerCase() === "unsloth" && (
                 <span
                   aria-label="Verified Unsloth"
-                  className="hub-verified-badge size-3.5 shrink-0 text-primary"
+                  className="hub-verified-badge size-3.5 shrink-0 text-verified"
                 />
               )}
             </span>
@@ -712,7 +712,7 @@ export const InventoryRow = memo(function InventoryRow({
       {subLabel.toLowerCase() === "unsloth" && (
         <span
           aria-label="Verified Unsloth"
-          className="hub-verified-badge size-3.5 shrink-0 text-primary"
+          className="hub-verified-badge size-3.5 shrink-0 text-verified"
         />
       )}
     </span>
@@ -789,7 +789,7 @@ export const InventoryRow = memo(function InventoryRow({
                 {subLabel.toLowerCase() === "unsloth" && (
                   <span
                     aria-label="Verified Unsloth"
-                    className="hub-verified-badge size-3 shrink-0 text-primary"
+                    className="hub-verified-badge size-3 shrink-0 text-verified"
                   />
                 )}
               </span>
diff --git a/studio/frontend/src/features/hub/catalog/models-table.tsx b/studio/frontend/src/features/hub/catalog/models-table.tsx
index a62806dcb6..f3887fee28 100644
--- a/studio/frontend/src/features/hub/catalog/models-table.tsx
+++ b/studio/frontend/src/features/hub/catalog/models-table.tsx
@@ -340,7 +340,7 @@ function VerifiedOwner({ owner }: { owner: string }) {
       {owner.toLowerCase() === "unsloth" && (
         <span
           aria-label="Verified Unsloth"
-          className="hub-verified-badge size-3.5 shrink-0 text-primary"
+          className="hub-verified-badge size-3.5 shrink-0 text-verified"
         />
       )}
     </span>
@@ -586,7 +586,7 @@ export const ResultCard = memo(function ResultCard({
       type="button"
       aria-label={row.repo}
       onClick={() => onSelect(row.id)}
-      className="hub-result-row hub-result-card group/row flex h-full w-full cursor-pointer items-center gap-3.5 px-4 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      className="hub-result-row hub-result-card group/row flex h-full w-full cursor-pointer items-center gap-3.5 px-4 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
     >
       <OwnerAvatar
         owner={row.owner}
@@ -685,7 +685,7 @@ export const ResultGridRow = memo(function ResultGridRow({
       type="button"
       aria-label={row.repo}
       onClick={() => onSelect(row.id)}
-      className="absolute inset-0 z-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      className="absolute inset-0 z-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset"
     />
   );
 
@@ -827,7 +827,7 @@ export const ResultSplitRow = memo(function ResultSplitRow({
       aria-current={selected || undefined}
       data-selected={selected || undefined}
       onClick={() => onSelect(row.id)}
-      className="group/row flex h-full w-full cursor-pointer items-center gap-2.5 rounded-[12px] px-2.5 text-left outline-none transition-colors hover:bg-foreground/[0.04] data-[selected]:bg-foreground/[0.07] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset dark:hover:bg-white/[0.05] dark:data-[selected]:bg-white/[0.08]"
+      className="group/row flex h-full w-full cursor-pointer items-center gap-2.5 rounded-[12px] px-2.5 text-left outline-none transition-colors hover:bg-foreground/[0.04] data-[selected]:bg-foreground/[0.07] focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset dark:hover:bg-white/[0.05] dark:data-[selected]:bg-white/[0.08]"
     >
       <OwnerAvatar
         owner={row.owner}
diff --git a/studio/frontend/src/features/hub/components/hf-token-indicator.tsx b/studio/frontend/src/features/hub/components/hf-token-indicator.tsx
index e3aa8163be..1e143a805c 100644
--- a/studio/frontend/src/features/hub/components/hf-token-indicator.tsx
+++ b/studio/frontend/src/features/hub/components/hf-token-indicator.tsx
@@ -50,7 +50,7 @@ export function HfTokenIndicator({ showLabel = false }: HfTokenIndicatorProps =
                 className={cn(
                   "inline-flex size-6 items-center justify-center rounded-full transition-colors",
                   hasToken
-                    ? "bg-primary/15 text-primary"
+                    ? "bg-verified/15 text-verified"
                     : "bg-foreground/[0.07] text-muted-foreground dark:bg-white/[0.07]",
                 )}
               >
@@ -65,7 +65,7 @@ export function HfTokenIndicator({ showLabel = false }: HfTokenIndicatorProps =
             <span
               className={cn(
                 "shrink-0 text-[11px] font-normal tabular-nums",
-                hasToken ? "text-primary" : "text-muted-foreground/70",
+                hasToken ? "text-verified" : "text-muted-foreground/70",
               )}
             >
               {hasToken ? "Set" : "Add"}
@@ -89,7 +89,7 @@ export function HfTokenIndicator({ showLabel = false }: HfTokenIndicatorProps =
           className={cn(
             // Solid circle reads optically larger than the flat HTTP/Xet box, so
             // keep it 22px to sit within the row rather than bulging above it.
-            "inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-[11.5px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-[11.5px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             hasToken
               ? "hub-tag-soft text-muted-foreground hover:text-foreground/80"
               : "bg-destructive text-destructive-foreground hover:bg-destructive/90",
diff --git a/studio/frontend/src/features/hub/components/page-heading.tsx b/studio/frontend/src/features/hub/components/page-heading.tsx
index b2e4a06fb4..e7c0f003f0 100644
--- a/studio/frontend/src/features/hub/components/page-heading.tsx
+++ b/studio/frontend/src/features/hub/components/page-heading.tsx
@@ -29,7 +29,7 @@ export function PageHeading({
           onClick={onTitleClick}
           className={cn(
             TITLE_CLASS,
-            "cursor-pointer rounded-md text-left outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-ring",
+            "cursor-pointer rounded-md text-left outline-none transition-opacity hover:opacity-80 focus-visible:ring-1 focus-visible:ring-ring",
           )}
         >
           {title}
diff --git a/studio/frontend/src/features/hub/download-manager/api.ts b/studio/frontend/src/features/hub/download-manager/api.ts
index ca987f1643..3373a47b04 100644
--- a/studio/frontend/src/features/hub/download-manager/api.ts
+++ b/studio/frontend/src/features/hub/download-manager/api.ts
@@ -19,7 +19,7 @@ function parseErrorText(status: number, body: unknown): string {
     if (typeof message === "string" && message) return message;
   }
   if (status === 405) {
-    return "Method Not Allowed - the Studio backend did not accept this API method. Restart Studio so the frontend and backend are on the same build.";
+    return "Method Not Allowed - the Unsloth backend did not accept this API method. Restart Unsloth so the frontend and backend are on the same build.";
   }
   return `Request failed (${status})`;
 }
@@ -137,7 +137,7 @@ const DOWNLOAD_TRANSPORT_CAPABILITIES_FALLBACK: DownloadTransportCapabilities =
   http: { available: true, reason: null },
   xet: {
     available: null,
-    reason: "Couldn't verify Xet support with the Studio backend.",
+    reason: "Couldn't verify Xet support with the Unsloth backend.",
   },
 };
 let downloadTransportCapabilitiesCache: DownloadTransportCapabilities | null =
diff --git a/studio/frontend/src/features/hub/download-manager/download-api-adapter.ts b/studio/frontend/src/features/hub/download-manager/download-api-adapter.ts
index 6942dfbbb9..a6518ec656 100644
--- a/studio/frontend/src/features/hub/download-manager/download-api-adapter.ts
+++ b/studio/frontend/src/features/hub/download-manager/download-api-adapter.ts
@@ -184,7 +184,7 @@ export async function effectiveTransportMode(
     return preferred;
   }
   const reason =
-    capabilities.xet.reason ?? "Studio will use HTTP downloads instead.";
+    capabilities.xet.reason ?? "Unsloth will use HTTP downloads instead.";
   if (lastXetUnavailableWarningReason !== reason) {
     lastXetUnavailableWarningReason = reason;
     toast.warning("Xet download transport unavailable", {
diff --git a/studio/frontend/src/features/hub/download-manager/download-manager-panel.tsx b/studio/frontend/src/features/hub/download-manager/download-manager-panel.tsx
index 948b0c098d..d57da2137b 100644
--- a/studio/frontend/src/features/hub/download-manager/download-manager-panel.tsx
+++ b/studio/frontend/src/features/hub/download-manager/download-manager-panel.tsx
@@ -8,10 +8,10 @@ import {
 } from "@/components/ui/tooltip";
 import { hasAuthToken, mustChangePassword } from "@/features/auth/session";
 import { isTauri } from "@/lib/api-base";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
 import {
   Alert02Icon,
-  ArrowDown01Icon,
   Cancel01Icon,
   CheckmarkCircle02Icon,
   Download01Icon,
@@ -19,13 +19,13 @@ import {
 import { HugeiconsIcon } from "@hugeicons/react";
 import { useRouterState } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
-import { DownloadProgressBar } from "./download-progress-bar";
 import {
   type ManagedDownload,
   downloadManager,
   hydrateDownloadManager,
   useDownloadManagerStore,
 } from "./download-manager-controller";
+import { DownloadProgressBar } from "./download-progress-bar";
 
 function createOrderedJobKeysSelector(): (state: {
   jobs: Record<string, ManagedDownload>;
@@ -241,7 +241,7 @@ export function DownloadManagerPanel({
               className="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground dark:hover:bg-white/[0.06]"
             >
               <HugeiconsIcon
-                icon={ArrowDown01Icon}
+                icon={ChevronDownStandardIcon}
                 strokeWidth={1.75}
                 className="size-3.5"
               />
diff --git a/studio/frontend/src/features/hub/hub.css b/studio/frontend/src/features/hub/hub.css
index 947dd8cb34..398caaec83 100644
--- a/studio/frontend/src/features/hub/hub.css
+++ b/studio/frontend/src/features/hub/hub.css
@@ -1527,3 +1527,16 @@ html.dark .hub-page [data-hub-scroll="true"]::-webkit-scrollbar-thumb {
 body[data-scroll-locked] .hub-modal-pe-guard {
   pointer-events: none !important;
 }
+
+@layer components {
+  /* Edge fades off (Appearance setting): hub scroll dissolves become thin
+     divider lines. */
+  html.no-edge-fades .hub-page .hub-detail-bar::after {
+    height: 1px;
+    background: var(--border);
+  }
+  html.no-edge-fades .hub-page .hub-scroll-fade {
+    background: none;
+    border-top: 1px solid var(--border);
+  }
+}
diff --git a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
index 6404ddd40f..ebcf18978f 100644
--- a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
@@ -322,8 +322,8 @@ export function DatasetStep() {
             <button
               type="button"
               className={cn(
-                "border-2 border-dashed rounded-xl p-8 text-center transition-colors cursor-pointer hover:border-primary/50 hover:bg-muted/50",
-                uploadedFile && "border-primary/50 bg-primary/5",
+                "border-2 border-dashed rounded-xl p-8 text-center transition-colors cursor-pointer hover:border-ring hover:bg-muted/50",
+                uploadedFile && "border-ring-strong bg-primary/5",
               )}
               onClick={handleFileUpload}
             >
diff --git a/studio/frontend/src/features/onboarding/components/steps/hyperparameters-step.tsx b/studio/frontend/src/features/onboarding/components/steps/hyperparameters-step.tsx
index 2fb2f7adeb..1c0a7dcb3f 100644
--- a/studio/frontend/src/features/onboarding/components/steps/hyperparameters-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/hyperparameters-step.tsx
@@ -225,7 +225,7 @@ export function HyperparametersStep() {
                   min={1}
                   max={useEpochs ? epochsSliderMax : maxStepsSliderMax}
                   step={1}
-                  className="w-16 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+                  className="w-16 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
                 />
               </div>
             </div>
@@ -379,7 +379,7 @@ export function HyperparametersStep() {
                     min={4}
                     max={128}
                     step={4}
-                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
                   />
                 </div>
               </div>
@@ -428,7 +428,7 @@ export function HyperparametersStep() {
                     min={8}
                     max={256}
                     step={8}
-                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
                   />
                 </div>
               </div>
@@ -478,7 +478,7 @@ export function HyperparametersStep() {
                     min={0}
                     max={0.5}
                     step={0.01}
-                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+                    className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
                   />
                 </div>
               </div>
diff --git a/studio/frontend/src/features/onboarding/components/steps/model-type-step.tsx b/studio/frontend/src/features/onboarding/components/steps/model-type-step.tsx
index 2a286a8c80..4f9f1ffea9 100644
--- a/studio/frontend/src/features/onboarding/components/steps/model-type-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/model-type-step.tsx
@@ -97,10 +97,10 @@ export function ModelTypeStep(): ReactElement {
                   "relative shadow-primary/30 transition-all duration-150 ease-out",
                   isDisabled && "opacity-50 bg-muted/50",
                   !isDisabled &&
-                    "hover:ring-primary/40 hover:-translate-y-0.5 hover:shadow-sm",
+                    "hover:ring-ring hover:-translate-y-0.5 hover:shadow-sm",
                   isSelected &&
                     !isDisabled &&
-                    "ring-2 ring-primary -translate-y-0.5 shadow-sm",
+                    "ring-1 ring-ring-strong -translate-y-0.5 shadow-sm",
                 )}
               >
                 {isDisabled && (
@@ -187,8 +187,8 @@ export function ModelTypeStep(): ReactElement {
             size="sm"
             className={cn(
               "relative shadow-primary/30 transition-all duration-150 ease-out",
-              "hover:ring-primary/40 hover:-translate-y-0.5 hover:shadow-sm",
-              chatOnlySelected && "ring-2 ring-primary -translate-y-0.5 shadow-sm",
+              "hover:ring-ring hover:-translate-y-0.5 hover:shadow-sm",
+              chatOnlySelected && "ring-1 ring-ring-strong -translate-y-0.5 shadow-sm",
             )}
           >
             <CardContent className="flex items-center gap-4 py-4">
diff --git a/studio/frontend/src/features/onboarding/components/steps/summary-step.tsx b/studio/frontend/src/features/onboarding/components/steps/summary-step.tsx
index eb50d398b6..996966c34b 100644
--- a/studio/frontend/src/features/onboarding/components/steps/summary-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/summary-step.tsx
@@ -118,8 +118,8 @@ export function SummaryStep() {
         </CardHeader>
         <CardContent className="flex flex-1 flex-col">
           <div className="flex items-start gap-3">
-            <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
-              <HugeiconsIcon icon={GpuIcon} className="size-4 text-emerald-600" />
+            <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-control-accent/10">
+              <HugeiconsIcon icon={GpuIcon} className="size-4 text-control-accent" />
             </div>
             <div className="flex flex-1 flex-col">
               <span className="text-xs text-muted-foreground">GPU</span>
@@ -144,8 +144,8 @@ export function SummaryStep() {
         </CardHeader>
         <CardContent className="flex flex-1 flex-col">
           <div className="flex items-start gap-3">
-            <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
-              <HugeiconsIcon icon={ChipIcon} className="size-4 text-emerald-600" />
+            <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-control-accent/10">
+              <HugeiconsIcon icon={ChipIcon} className="size-4 text-control-accent" />
             </div>
             <div className="flex flex-1 flex-col overflow-hidden">
               <span className="text-xs text-muted-foreground">Model</span>
diff --git a/studio/frontend/src/features/onboarding/components/wizard-layout.tsx b/studio/frontend/src/features/onboarding/components/wizard-layout.tsx
index 22274c5d7d..348f0fd051 100644
--- a/studio/frontend/src/features/onboarding/components/wizard-layout.tsx
+++ b/studio/frontend/src/features/onboarding/components/wizard-layout.tsx
@@ -9,6 +9,7 @@ import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import type { ConfettiRef } from "@/components/ui/confetti";
 import { STEPS } from "@/config/training";
 import { isOnboardingDone, markOnboardingDone } from "@/features/auth";
+import { prefersReducedMotion } from "@/features/settings";
 import { useTrainingConfigStore } from "@/features/training";
 import { SplashScreen } from "./splash-screen";
 import { WizardContent } from "./wizard-content";
@@ -52,20 +53,23 @@ export function WizardLayout() {
   useEffect(() => {
     if (isFinalStep && !hasFiredRef.current) {
       hasFiredRef.current = true;
-      confettiRef.current?.fire({
-        particleCount: 80,
-        angle: 60,
-        spread: 55,
-        origin: { x: 0, y: 0.6 },
-        colors: ["#34b482", "#26ccff", "#a25afd", "#88ff5a"],
-      });
-      confettiRef.current?.fire({
-        particleCount: 80,
-        angle: 120,
-        spread: 55,
-        origin: { x: 1, y: 0.6 },
-        colors: ["#34b482", "#26ccff", "#a25afd", "#88ff5a"],
-      });
+      // Honor Appearance > Reduce motion; skip the celebration when reduced.
+      if (!prefersReducedMotion()) {
+        confettiRef.current?.fire({
+          particleCount: 80,
+          angle: 60,
+          spread: 55,
+          origin: { x: 0, y: 0.6 },
+          colors: ["#34b482", "#26ccff", "#a25afd", "#88ff5a"],
+        });
+        confettiRef.current?.fire({
+          particleCount: 80,
+          angle: 120,
+          spread: 55,
+          origin: { x: 1, y: 0.6 },
+          colors: ["#34b482", "#26ccff", "#a25afd", "#88ff5a"],
+        });
+      }
     }
     if (!isFinalStep) {
       hasFiredRef.current = false;
diff --git a/studio/frontend/src/features/profile/components/profile-personalization-panel.tsx b/studio/frontend/src/features/profile/components/profile-personalization-panel.tsx
index 7c81411a3c..5fc6d090db 100644
--- a/studio/frontend/src/features/profile/components/profile-personalization-panel.tsx
+++ b/studio/frontend/src/features/profile/components/profile-personalization-panel.tsx
@@ -5,11 +5,12 @@ import { publicAssetUrl } from "@/components/mascot-img";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { getAuthToken } from "@/features/auth";
 import { cn } from "@/lib/utils";
 import { useT } from "@/i18n";
 import { toastError, toastSuccess } from "@/shared/toast";
-import { Camera01Icon } from "@hugeicons/core-free-icons";
+import { Edit03Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { SLOTH_AVATARS } from "../sloth-avatars";
@@ -63,6 +64,10 @@ export function ProfilePersonalizationPanel() {
   const setAvatarDataUrl = useUserProfileStore((s) => s.setAvatarDataUrl);
   const avatarShape = useUserProfileStore((s) => s.avatarShape);
   const setAvatarShape = useUserProfileStore((s) => s.setAvatarShape);
+  const showGreetingSloth = useUserProfileStore((s) => s.showGreetingSloth);
+  const setShowGreetingSloth = useUserProfileStore(
+    (s) => s.setShowGreetingSloth,
+  );
 
   const [imageError, setImageError] = useState<string | null>(null);
   const [draftName, setDraftName] = useState(displayName);
@@ -128,7 +133,7 @@ export function ProfilePersonalizationPanel() {
     }
   };
 
-  const applyAvatar = (value: string) => {
+  const applyAvatar = (value: string | null) => {
     setAvatarDataUrl(value);
     const persisted = readPersistedProfile();
     if (persisted && persisted.avatarDataUrl === value) {
@@ -154,9 +159,29 @@ export function ProfilePersonalizationPanel() {
     }
   };
 
-  const pickSloth = (path: string) => {
+  // The avatar is shown all over the app (sidebar, chat messages, greeting),
+  // so writing it to the store can trigger a wide re-render. Mark the picked
+  // value locally first so its ring moves this frame, then commit the store
+  // write on the next frame. Boxed because null is a valid pick (no picture).
+  const [pendingAvatar, setPendingAvatar] = useState<{
+    value: string | null;
+  } | null>(null);
+  const shownAvatar = pendingAvatar ? pendingAvatar.value : avatarDataUrl;
+
+  useEffect(() => {
+    if (pendingAvatar && avatarDataUrl === pendingAvatar.value) {
+      setPendingAvatar(null);
+    }
+  }, [avatarDataUrl, pendingAvatar]);
+
+  const pickAvatarValue = (value: string | null) => {
     setImageError(null);
-    applyAvatar(publicAssetUrl(path));
+    setPendingAvatar({ value });
+    requestAnimationFrame(() => applyAvatar(value));
+  };
+
+  const pickSloth = (path: string) => {
+    pickAvatarValue(publicAssetUrl(path));
   };
 
   return (
@@ -164,7 +189,7 @@ export function ProfilePersonalizationPanel() {
       <div className="relative">
         <UserAvatar
           name={previewName}
-          imageUrl={avatarDataUrl}
+          imageUrl={shownAvatar}
           size="lg"
           className="size-[124px] text-[3.15rem]"
         />
@@ -181,14 +206,17 @@ export function ProfilePersonalizationPanel() {
         <button
           type="button"
           onClick={() => fileInputRef.current?.click()}
-          className="absolute right-0 bottom-0 -translate-x-[15.625%] -translate-y-[15.625%] flex size-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          className="absolute right-0 bottom-0 -translate-x-[15.625%] -translate-y-[15.625%] flex size-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           aria-label={t("settings.profile.changePicture")}
         >
-          <HugeiconsIcon icon={Camera01Icon} className="size-3.5" strokeWidth={2} />
+          <HugeiconsIcon icon={Edit03Icon} className="size-3.5" strokeWidth={2} />
         </button>
       </div>
 
-      <div className="flex w-full max-w-[560px] flex-col gap-2">
+      <div
+        data-settings-label={t("settings.profile.displayName")}
+        className="flex w-full max-w-[560px] flex-col gap-2"
+      >
         <Label htmlFor="profile-display-name" className="text-xs font-medium text-muted-foreground">
           {t("settings.profile.displayName")}
         </Label>
@@ -215,7 +243,10 @@ export function ProfilePersonalizationPanel() {
         </div>
       </div>
 
-      <div className="flex w-full max-w-[560px] flex-col gap-2">
+      <div
+        data-settings-label={t("settings.profile.nickname")}
+        className="flex w-full max-w-[560px] flex-col gap-2"
+      >
         <Label htmlFor="profile-nickname" className="text-xs font-medium text-muted-foreground">
           {t("settings.profile.nickname")}
         </Label>
@@ -242,7 +273,10 @@ export function ProfilePersonalizationPanel() {
         </div>
       </div>
 
-      <div className="flex w-full max-w-[560px] flex-col gap-2">
+      <div
+        data-settings-label={t("settings.profile.avatarShape")}
+        className="flex w-full max-w-[560px] flex-col gap-2"
+      >
         <Label className="text-xs font-medium text-muted-foreground">
           {t("settings.profile.avatarShape")}
         </Label>
@@ -268,6 +302,28 @@ export function ProfilePersonalizationPanel() {
         </div>
       </div>
 
+      <div
+        data-settings-label={t("settings.profile.greetingSloth")}
+        className="flex w-full max-w-[560px] items-center justify-between gap-4"
+      >
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <Label
+            htmlFor="profile-greeting-sloth"
+            className="text-xs font-medium text-muted-foreground"
+          >
+            {t("settings.profile.greetingSloth")}
+          </Label>
+          <p className="text-xs text-muted-foreground/75">
+            {t("settings.profile.greetingSlothDescription")}
+          </p>
+        </div>
+        <Switch
+          id="profile-greeting-sloth"
+          checked={showGreetingSloth}
+          onCheckedChange={setShowGreetingSloth}
+        />
+      </div>
+
       <div className="flex w-full max-w-[560px] flex-col gap-2">
         <Label className="text-xs font-medium text-muted-foreground">
           {t("settings.profile.chooseSloth")}
@@ -275,7 +331,7 @@ export function ProfilePersonalizationPanel() {
         <div className="grid grid-cols-7 gap-2 sm:grid-cols-9">
           {SLOTH_AVATARS.map((path) => {
             const url = publicAssetUrl(path);
-            const selected = avatarDataUrl === url;
+            const selected = shownAvatar === url;
             const label =
               path.split("/").pop()?.replace(/\.png$/i, "").replace(/^large\s+/i, "").trim() ??
               "sloth";
@@ -288,14 +344,32 @@ export function ProfilePersonalizationPanel() {
                 aria-label={label}
                 title={label}
                 className={cn(
-                  "relative aspect-square overflow-hidden rounded-full bg-muted ring-1 ring-border transition hover:ring-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  selected && "ring-2 ring-primary",
+                  // No transition here: animating the ring makes the old
+                  // icon's selection border linger when switching sloths.
+                  "relative aspect-square overflow-hidden rounded-full bg-muted ring-1 ring-border hover:ring-ring focus-visible:outline-none focus-visible:ring-ring",
+                  // Selection keeps the 1px weight, only darker.
+                  selected && "ring-ring-strong hover:ring-ring-strong",
                 )}
               >
                 <img src={url} alt="" loading="lazy" className="size-full object-cover" />
               </button>
             );
           })}
+          <button
+            type="button"
+            onClick={() => pickAvatarValue(null)}
+            aria-pressed={shownAvatar === null}
+            aria-label={t("settings.profile.noPicture")}
+            title={t("settings.profile.noPicture")}
+            className={cn(
+              "relative flex aspect-square items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground ring-1 ring-border hover:ring-ring focus-visible:outline-none focus-visible:ring-ring",
+              shownAvatar === null && "ring-ring-strong hover:ring-ring-strong",
+            )}
+          >
+            <span className="text-[11px] font-medium">
+              {t("settings.profile.noneLabel")}
+            </span>
+          </button>
         </div>
       </div>
 
diff --git a/studio/frontend/src/features/profile/components/user-avatar.tsx b/studio/frontend/src/features/profile/components/user-avatar.tsx
index e2c7dec856..2db103c1d4 100644
--- a/studio/frontend/src/features/profile/components/user-avatar.tsx
+++ b/studio/frontend/src/features/profile/components/user-avatar.tsx
@@ -47,7 +47,7 @@ export function UserAvatar({ name, imageUrl, size, className, shape }: UserAvata
     <span
       style={avatarBgStyle()}
       className={cn(
-        "inline-flex shrink-0 items-center justify-center font-semibold text-white",
+        "inline-flex shrink-0 items-center justify-center font-semibold",
         shapeClass,
         SIZE[size],
         className,
diff --git a/studio/frontend/src/features/profile/hooks/use-personalization-sync.ts b/studio/frontend/src/features/profile/hooks/use-personalization-sync.ts
index 5dbb7b54bf..6e919505ea 100644
--- a/studio/frontend/src/features/profile/hooks/use-personalization-sync.ts
+++ b/studio/frontend/src/features/profile/hooks/use-personalization-sync.ts
@@ -2,11 +2,19 @@
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
 import {
-  loadPersonalization,
-  savePersonalization,
-  setTheme,
-  useTheme,
+  type AppearanceCustomization,
+  type Palette,
   type Theme,
+  isDefaultCustomization,
+  isPalette,
+  loadPersonalization,
+  sanitizeCustomization,
+  savePersonalization,
+  setPalette,
+  setTheme,
+  useAppearanceCustomStore,
+  usePalette,
+  useTheme,
 } from "@/features/settings";
 import {
   DEFAULT_LOCALE_PREFERENCE,
@@ -35,6 +43,7 @@ type ProfileSnapshot = {
   nickname: string;
   avatarDataUrl: string | null;
   avatarShape: AvatarShape;
+  showGreetingSloth: boolean;
 };
 
 type PersonalizationWrite = Parameters<typeof savePersonalization>[0];
@@ -62,7 +71,8 @@ function sameProfile(a: ProfileSnapshot, b: ProfileSnapshot): boolean {
     a.displayName === b.displayName &&
     a.nickname === b.nickname &&
     a.avatarDataUrl === b.avatarDataUrl &&
-    a.avatarShape === b.avatarShape
+    a.avatarShape === b.avatarShape &&
+    a.showGreetingSloth === b.showGreetingSloth
   );
 }
 
@@ -109,18 +119,21 @@ function profileSnapshot(): ProfileSnapshot {
     nickname: s.nickname,
     avatarDataUrl: s.avatarDataUrl,
     avatarShape: s.avatarShape,
+    showGreetingSloth: s.showGreetingSloth,
   };
 }
 
 function payload(
   profile: ProfileSnapshot,
   theme: Theme,
+  palette: Palette,
+  customization: AppearanceCustomization,
   language: LocalePreference | null,
 ): PersonalizationWrite {
   return {
     version: PERSONALIZATION_VERSION,
     profile: normalizeProfile(profile),
-    appearance: { theme, language },
+    appearance: { theme, palette, language, customization },
   };
 }
 
@@ -144,6 +157,8 @@ export function remoteLanguagePreference(
 function hasLocalSettings(
   profile: ProfileSnapshot,
   theme: Theme,
+  palette: Palette,
+  customization: AppearanceCustomization,
   language: LocalePreference,
 ): boolean {
   return Boolean(
@@ -151,7 +166,10 @@ function hasLocalSettings(
       profile.nickname ||
       profile.avatarDataUrl ||
       profile.avatarShape !== "circle" ||
+      !profile.showGreetingSloth ||
       theme !== "system" ||
+      palette !== "standard" ||
+      !isDefaultCustomization(customization) ||
       language !== DEFAULT_LOCALE_PREFERENCE,
   );
 }
@@ -161,11 +179,16 @@ export function usePersonalizationSync(enabled: boolean): void {
   const nickname = useUserProfileStore((s) => s.nickname);
   const avatarDataUrl = useUserProfileStore((s) => s.avatarDataUrl);
   const avatarShape = useUserProfileStore((s) => s.avatarShape);
+  const showGreetingSloth = useUserProfileStore((s) => s.showGreetingSloth);
   const { theme } = useTheme();
+  const { palette } = usePalette();
+  const customization = useAppearanceCustomStore((s) => s.customization);
   const language = useLocalePreference();
   const [hydratedGeneration, setHydratedGeneration] = useState(0);
   const authGenerationRef = useRef(0);
   const latestThemeRef = useRef(theme);
+  const latestPaletteRef = useRef(palette);
+  const latestCustomizationRef = useRef(customization);
   const latestLanguageRef = useRef(language);
   const lastSavedRef = useRef("");
   const saveInFlightRef = useRef(false);
@@ -184,6 +207,14 @@ export function usePersonalizationSync(enabled: boolean): void {
     latestThemeRef.current = theme;
   }, [theme]);
 
+  useEffect(() => {
+    latestPaletteRef.current = palette;
+  }, [palette]);
+
+  useEffect(() => {
+    latestCustomizationRef.current = customization;
+  }, [customization]);
+
   useEffect(() => {
     latestLanguageRef.current = language;
   }, [language]);
@@ -202,13 +233,41 @@ export function usePersonalizationSync(enabled: boolean): void {
         const remote = await loadPersonalization();
         if (cancelled) return;
         if (remote.saved) {
+          // Legacy records predating a field come back server-defaulted. Keep
+          // the local value and re-push it (lastSaved below records the remote
+          // default so the push detects the diff) rather than treating the
+          // default as an explicit remote choice. A record that actually stored
+          // the field reports <field>Saved=true and still wins.
+          const localGreeting = useUserProfileStore.getState().showGreetingSloth;
+          const remoteGreeting = remote.profile.showGreetingSloth !== false;
+          const keepLocalGreeting =
+            remote.greetingSlothSaved === false && localGreeting === false;
           const nextProfile: ProfileSnapshot = {
             displayName: remote.profile.displayName ?? "",
             nickname: remote.profile.nickname ?? "",
             avatarDataUrl: remote.profile.avatarDataUrl ?? null,
-            avatarShape: remote.profile.avatarShape === "rounded" ? "rounded" : "circle",
+            avatarShape:
+              remote.profile.avatarShape === "rounded" ? "rounded" : "circle",
+            showGreetingSloth: keepLocalGreeting ? localGreeting : remoteGreeting,
           };
           const nextTheme = remote.appearance.theme;
+          const localPalette = latestPaletteRef.current;
+          const remotePalette = isPalette(remote.appearance.palette)
+            ? remote.appearance.palette
+            : localPalette;
+          const keepLocalPalette =
+            remote.paletteSaved === false && localPalette !== "standard";
+          const nextPalette = keepLocalPalette ? localPalette : remotePalette;
+          const remoteCustomization = sanitizeCustomization(
+            remote.appearance.customization,
+          );
+          const localCustomization = latestCustomizationRef.current;
+          const keepLocalCustomization =
+            remote.customizationSaved === false &&
+            !isDefaultCustomization(localCustomization);
+          const nextCustomization = keepLocalCustomization
+            ? localCustomization
+            : remoteCustomization;
           const remoteLanguage = remoteLanguagePreference(
             remote.version,
             remote.appearance.language,
@@ -218,9 +277,27 @@ export function usePersonalizationSync(enabled: boolean): void {
             : latestLanguageRef.current;
           useUserProfileStore.setState(nextProfile);
           if (nextTheme !== latestThemeRef.current) setTheme(nextTheme);
-          if (nextLanguage !== latestLanguageRef.current) setLocale(nextLanguage);
+          if (nextPalette !== latestPaletteRef.current) setPalette(nextPalette);
+          if (
+            !keepLocalCustomization &&
+            JSON.stringify(nextCustomization) !==
+              JSON.stringify(latestCustomizationRef.current)
+          ) {
+            useAppearanceCustomStore.getState().replaceAll(nextCustomization);
+          }
+          if (nextLanguage !== latestLanguageRef.current)
+            setLocale(nextLanguage);
+          // lastSaved records what the server actually has (server-side defaults
+          // for legacy fields) so the debounced push re-uploads preserved local
+          // values.
           lastSavedRef.current = serialized(
-            payload(nextProfile, nextTheme, nextLanguage),
+            payload(
+              { ...nextProfile, showGreetingSloth: remoteGreeting },
+              nextTheme,
+              remotePalette,
+              remoteCustomization,
+              nextLanguage,
+            ),
           );
         } else {
           const rawProfile = profileSnapshot();
@@ -229,10 +306,26 @@ export function usePersonalizationSync(enabled: boolean): void {
             useUserProfileStore.setState(nextProfile);
           }
           const nextTheme = latestThemeRef.current;
+          const nextPalette = latestPaletteRef.current;
+          const nextCustomization = latestCustomizationRef.current;
           const nextLanguage = getLocalePreference();
-          const nextPayload = payload(nextProfile, nextTheme, nextLanguage);
+          const nextPayload = payload(
+            nextProfile,
+            nextTheme,
+            nextPalette,
+            nextCustomization,
+            nextLanguage,
+          );
           const nextSerialized = serialized(nextPayload);
-          if (hasLocalSettings(nextProfile, nextTheme, nextLanguage)) {
+          if (
+            hasLocalSettings(
+              nextProfile,
+              nextTheme,
+              nextPalette,
+              nextCustomization,
+              nextLanguage,
+            )
+          ) {
             try {
               await savePersonalization(nextPayload);
               lastSavedRef.current = nextSerialized;
@@ -260,8 +353,10 @@ export function usePersonalizationSync(enabled: boolean): void {
   useEffect(() => {
     if (!enabled || hydratedGeneration !== authGenerationRef.current) return;
     const current = payload(
-      { displayName, nickname, avatarDataUrl, avatarShape },
+      { displayName, nickname, avatarDataUrl, avatarShape, showGreetingSloth },
       theme,
+      palette,
+      customization,
       language,
     );
     const currentSerialized = serialized(current);
@@ -282,7 +377,10 @@ export function usePersonalizationSync(enabled: boolean): void {
     nickname,
     avatarDataUrl,
     avatarShape,
+    showGreetingSloth,
     theme,
+    palette,
+    customization,
     language,
     drainSaveQueue,
   ]);
diff --git a/studio/frontend/src/features/profile/stores/user-profile-store.ts b/studio/frontend/src/features/profile/stores/user-profile-store.ts
index 0055a58f5d..a882a936a8 100644
--- a/studio/frontend/src/features/profile/stores/user-profile-store.ts
+++ b/studio/frontend/src/features/profile/stores/user-profile-store.ts
@@ -12,10 +12,12 @@ export interface UserProfileState {
   nickname: string;
   avatarDataUrl: string | null;
   avatarShape: AvatarShape;
+  showGreetingSloth: boolean;
   setDisplayName: (displayName: string) => void;
   setNickname: (nickname: string) => void;
   setAvatarDataUrl: (avatarDataUrl: string | null) => void;
   setAvatarShape: (avatarShape: AvatarShape) => void;
+  setShowGreetingSloth: (showGreetingSloth: boolean) => void;
 }
 
 export const useUserProfileStore = create<UserProfileState>()(
@@ -25,10 +27,12 @@ export const useUserProfileStore = create<UserProfileState>()(
       nickname: "",
       avatarDataUrl: null,
       avatarShape: "circle",
+      showGreetingSloth: true,
       setDisplayName: (displayName) => set({ displayName }),
       setNickname: (nickname) => set({ nickname }),
       setAvatarDataUrl: (avatarDataUrl) => set({ avatarDataUrl }),
       setAvatarShape: (avatarShape) => set({ avatarShape }),
+      setShowGreetingSloth: (showGreetingSloth) => set({ showGreetingSloth }),
     }),
     { name: "unsloth_user_profile" },
   ),
diff --git a/studio/frontend/src/features/profile/utils/avatar-initials.ts b/studio/frontend/src/features/profile/utils/avatar-initials.ts
index 2683b52a37..c80d2eafd9 100644
--- a/studio/frontend/src/features/profile/utils/avatar-initials.ts
+++ b/studio/frontend/src/features/profile/utils/avatar-initials.ts
@@ -8,18 +8,16 @@ export function initialsFromName(name: string): string {
 }
 
 /**
- * Default Unsloth-brand background for the avatar fallback (readable white text).
+ * Accent background for the avatar fallback with a readable foreground.
  *
- * Uses the shared `--primary` design token instead of a one-off hardcoded
- * shade, so the avatar always matches the app's general brand green (send
- * button, primary buttons, etc.). It previously hardcoded a slightly different
- * `#14b789`, which looked inconsistent next to primary-colored UI such as the
- * artifact preview/code panel.
- *
- * The literal fallback (the current `--primary` value) only applies if this
- * reusable avatar is ever rendered outside the theme root, where `--primary`
- * is undefined -- it keeps the avatar branded instead of transparent.
+ * Uses `--control-accent`, the token behind toggles and badges, so the
+ * avatar follows the palette accent (green in standard, blue in classic)
+ * and any custom accent the user picks in Appearance. The literals only
+ * apply outside the theme root, keeping the avatar branded there.
  */
-export function avatarBgStyle(): { backgroundColor: string } {
-  return { backgroundColor: "var(--primary, #17b88b)" };
+export function avatarBgStyle(): { backgroundColor: string; color: string } {
+  return {
+    backgroundColor: "var(--control-accent, #17b88b)",
+    color: "var(--control-accent-foreground, #ffffff)",
+  };
 }
diff --git a/studio/frontend/src/features/recipe-studio/components/chip-input.tsx b/studio/frontend/src/features/recipe-studio/components/chip-input.tsx
index 55db6f280c..3e093aa82a 100644
--- a/studio/frontend/src/features/recipe-studio/components/chip-input.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/chip-input.tsx
@@ -84,7 +84,7 @@ export function ChipInput({
   return (
     <div
       ref={containerRef}
-      className={`bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 flex-wrap items-center gap-1.5 border bg-clip-padding px-1.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] ${isWrapped ? "corner-squircle rounded-xl" : "rounded-4xl"}`}
+      className={`bg-input/30 border-input dark:border-transparent focus-within:border-ring dark:focus-within:border-transparent dark:focus-within:bg-white/[0.09] flex min-h-9 flex-wrap items-center gap-1.5 border bg-clip-padding px-1.5 py-1.5 text-sm transition-colors ${isWrapped ? "corner-squircle rounded-xl" : "rounded-4xl"}`}
     >
       {values.map((value, index) => (
         <span
diff --git a/studio/frontend/src/features/recipe-studio/components/executions/execution-sidebar.tsx b/studio/frontend/src/features/recipe-studio/components/executions/execution-sidebar.tsx
index fc21cfc581..a8ae8ff188 100644
--- a/studio/frontend/src/features/recipe-studio/components/executions/execution-sidebar.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/executions/execution-sidebar.tsx
@@ -55,7 +55,7 @@ export function ExecutionSidebar({
                 className={cn(
                   "w-full rounded-xl corner-squircle border border-r-2 border-border/60 bg-card/60 p-3 text-left transition-colors",
                   selectedExecutionId === execution.id
-                    ? "border-primary/35 bg-primary/[0.045]"
+                    ? "border-ring-strong bg-primary/[0.045]"
                     : "hover:bg-muted/25",
                   statusRightBorder(execution.status),
                 )}
diff --git a/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx b/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
index 7d23a0c2cd..a13c651149 100644
--- a/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
@@ -455,7 +455,7 @@ function RecipeGraphNodeBase({
       : meta.tone;
   const runtimeNodeTone =
     runtimeState === "running"
-      ? "border-primary/70 ring-2 ring-primary/20 shadow-md"
+      ? "border-ring-strong shadow-md"
       : runtimeState === "done"
         ? "border-emerald-500/60 ring-1 ring-emerald-500/20"
         : "";
diff --git a/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx b/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
index d7225e9f52..9eba732e35 100644
--- a/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
@@ -13,9 +13,8 @@ export function BaseNode({
     <div
       className={cn(
         "bg-card text-card-foreground relative rounded-md border transition-[border-color,box-shadow] duration-150",
-        "hover:border-primary/40 hover:ring-1 hover:ring-primary/20 hover:shadow-sm",
-        "[.react-flow\\_\\_node.selected_&]:border-primary/45",
-        "[.react-flow\\_\\_node.selected_&]:ring-1 [.react-flow\\_\\_node.selected_&]:ring-primary/25",
+        "hover:border-ring hover:shadow-sm",
+        "[.react-flow\\_\\_node.selected_&]:border-ring-strong",
         "[.react-flow\\_\\_node.selected_&]:shadow-md",
         className,
       )}
diff --git a/studio/frontend/src/features/recipe-studio/components/runtime/execution-progress-island.tsx b/studio/frontend/src/features/recipe-studio/components/runtime/execution-progress-island.tsx
index 1a194ba857..587fd6c262 100644
--- a/studio/frontend/src/features/recipe-studio/components/runtime/execution-progress-island.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/runtime/execution-progress-island.tsx
@@ -1,18 +1,17 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
-import {
-  ArrowDown01Icon,
-  ArrowUp01Icon,
-  CheckmarkCircle02Icon,
-  Flag02Icon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import type { ReactElement } from "react";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  ChevronDownStandardIcon,
+  ChevronUpStandardIcon,
+} from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
+import { CheckmarkCircle02Icon, Flag02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { ReactElement } from "react";
 import type { RecipeExecutionRecord } from "../../execution-types";
 import { isExecutionInProgress } from "../../executions/execution-helpers";
 import {
@@ -112,8 +111,11 @@ export function ExecutionProgressIsland({
         execution.source_progress?.status === "rate_limited" ||
         execution.source_progress?.status === "retrying"),
   );
-  const sourcePercent = showSourceProgress ? execution.source_progress?.percent : null;
-  const progressPercent = sourcePercent ?? execution.progress?.percent ?? (complete ? 100 : 0);
+  const sourcePercent = showSourceProgress
+    ? execution.source_progress?.percent
+    : null;
+  const progressPercent =
+    sourcePercent ?? execution.progress?.percent ?? (complete ? 100 : 0);
   const hasProgressSignal = Boolean(
     (execution.progress &&
       (typeof execution.progress.done === "number" ||
@@ -165,7 +167,7 @@ export function ExecutionProgressIsland({
             title={minimized ? "Expand" : "Minimize"}
           >
             <HugeiconsIcon
-              icon={minimized ? ArrowDown01Icon : ArrowUp01Icon}
+              icon={minimized ? ChevronDownStandardIcon : ChevronUpStandardIcon}
               className="size-3.5"
             />
           </button>
@@ -179,16 +181,28 @@ export function ExecutionProgressIsland({
       {!minimized && (
         <>
           <div className="grid grid-cols-2 gap-2 px-3 pt-2 text-[11px] text-muted-foreground sm:grid-cols-4">
-            <p className="truncate" title={`Done: ${formatMetricValue(execution.progress?.done)}`}>
+            <p
+              className="truncate"
+              title={`Done: ${formatMetricValue(execution.progress?.done)}`}
+            >
               Done: {formatMetricValue(execution.progress?.done)}
             </p>
-            <p className="truncate" title={`Total: ${formatMetricValue(execution.progress?.total)}`}>
+            <p
+              className="truncate"
+              title={`Total: ${formatMetricValue(execution.progress?.total)}`}
+            >
               Total: {formatMetricValue(execution.progress?.total)}
             </p>
-            <p className="truncate" title={`Rate: ${formatMetricValue(execution.progress?.rate)}`}>
+            <p
+              className="truncate"
+              title={`Rate: ${formatMetricValue(execution.progress?.rate)}`}
+            >
               Rate: {formatMetricValue(execution.progress?.rate)}
             </p>
-            <p className="truncate" title={`ETA: ${formatEta(execution.progress?.eta_sec)}`}>
+            <p
+              className="truncate"
+              title={`ETA: ${formatEta(execution.progress?.eta_sec)}`}
+            >
               ETA: {formatEta(execution.progress?.eta_sec)}
             </p>
           </div>
@@ -208,10 +222,7 @@ export function ExecutionProgressIsland({
                 icon={currentColumnIcon}
                 className="size-3.5 shrink-0"
               />
-              <p
-                className="truncate"
-                title={execution.current_column ?? "--"}
-              >
+              <p className="truncate" title={execution.current_column ?? "--"}>
                 Column: {execution.current_column ?? "--"}
               </p>
             </div>
@@ -221,7 +232,8 @@ export function ExecutionProgressIsland({
               className="mt-1 truncate px-3 text-[11px] text-muted-foreground"
               title={`Batch: ${execution.batch?.idx ?? "--"}/${execution.batch?.total ?? "--"}`}
             >
-              Batch: {execution.batch?.idx ?? "--"}/{execution.batch?.total ?? "--"}
+              Batch: {execution.batch?.idx ?? "--"}/
+              {execution.batch?.total ?? "--"}
             </div>
           )}
           <div className="px-3 pb-2 pt-2">
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/models/local-recipe-model-selector.tsx b/studio/frontend/src/features/recipe-studio/dialogs/models/local-recipe-model-selector.tsx
index c333fd84f8..c857b88a91 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/models/local-recipe-model-selector.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/models/local-recipe-model-selector.tsx
@@ -577,7 +577,8 @@ export function LocalRecipeModelSelector({
   );
 
   return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
+    // modal keeps the list wheel-scrollable inside dialog scroll locks
+    <Popover open={open} onOpenChange={handleOpenChange} modal={true}>
       <PopoverTrigger asChild={true}>
         <SelectorTrigger
           value={value}
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/models/model-provider-dialog.tsx b/studio/frontend/src/features/recipe-studio/dialogs/models/model-provider-dialog.tsx
index 383c9718f2..6d68f8e2e4 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/models/model-provider-dialog.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/models/model-provider-dialog.tsx
@@ -82,7 +82,7 @@ export function ModelProviderDialog({
             type="button"
             className={`rounded-xl border px-4 py-3 text-left transition-colors ${
               isLocal
-                ? "border-primary/40 bg-primary/5"
+                ? "border-ring-strong bg-primary/5"
                 : "border-border/60 bg-muted/10 hover:border-border"
             }`}
             onClick={() =>
@@ -105,7 +105,7 @@ export function ModelProviderDialog({
             type="button"
             className={`rounded-xl border px-4 py-3 text-left transition-colors ${
               !isLocal
-                ? "border-primary/40 bg-primary/5"
+                ? "border-ring-strong bg-primary/5"
                 : "border-border/60 bg-muted/10 hover:border-border"
             }`}
             onClick={() => onUpdate({ is_local: false })}
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/preview-dialog.tsx b/studio/frontend/src/features/recipe-studio/dialogs/preview-dialog.tsx
index 7bcf47a974..3181d9fe67 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/preview-dialog.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/preview-dialog.tsx
@@ -17,10 +17,10 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
 import {
   AlertCircleIcon,
-  ArrowDown01Icon,
   CheckmarkCircle02Icon,
   CookBookIcon,
   TestTube01Icon,
@@ -413,7 +413,7 @@ function RunDialogBody({
             className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground"
           >
             <HugeiconsIcon
-              icon={ArrowDown01Icon}
+              icon={ChevronDownStandardIcon}
               className={cn(
                 "size-3.5 transition-transform",
                 advancedOpen && "rotate-180",
@@ -615,7 +615,9 @@ function RunDialogBody({
                     0,
                     MAX_RETRY_STEPS,
                     (value) =>
-                      onSettingsChange({ maxConversationCorrectionSteps: value }),
+                      onSettingsChange({
+                        maxConversationCorrectionSteps: value,
+                      }),
                     setCorrectionsDraft,
                   )
                 }
@@ -624,7 +626,8 @@ function RunDialogBody({
                 <div className="space-y-0.5">
                   <p className="font-medium">Keep running through failures</p>
                   <p className="text-xs text-muted-foreground">
-                    Useful for longer runs when you want as many rows as possible.
+                    Useful for longer runs when you want as many rows as
+                    possible.
                   </p>
                 </div>
                 <Switch
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/seed/unstructured-drop-zone.tsx b/studio/frontend/src/features/recipe-studio/dialogs/seed/unstructured-drop-zone.tsx
index bbdf27110f..bb03c1f125 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/seed/unstructured-drop-zone.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/seed/unstructured-drop-zone.tsx
@@ -211,7 +211,7 @@ export function UnstructuredDropZone({
       <div
         className={`nodrag flex cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors ${
           isDragOver
-            ? "border-primary bg-primary/5"
+            ? "border-ring-strong bg-primary/5"
             : "border-muted-foreground/25 hover:border-muted-foreground/50"
         } ${disabled ? "pointer-events-none opacity-50" : ""}`}
         onDrop={handleDrop}
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/shared/available-variables.tsx b/studio/frontend/src/features/recipe-studio/dialogs/shared/available-variables.tsx
index cc4b4f55d9..16024f0b8d 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/shared/available-variables.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/shared/available-variables.tsx
@@ -2,12 +2,12 @@
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
 import { Badge } from "@/components/ui/badge";
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { type ReactElement, useMemo, useState } from "react";
 import { useRecipeStudioStore } from "../../stores/recipe-studio";
-import { getAvailableVariableEntries } from "../../utils/variables";
 import { RECIPE_STUDIO_REFERENCE_BADGE_TONES } from "../../utils/ui-tones";
+import { getAvailableVariableEntries } from "../../utils/variables";
 
 type AvailableVariablesProps = {
   configId: string;
@@ -27,7 +27,10 @@ export function AvailableVariables({
   const [showUserFields, setShowUserFields] = useState(false);
   const configs = useRecipeStudioStore((state) => state.configs);
   const vars = getAvailableVariableEntries(configs, configId);
-  const variableNames = useMemo(() => new Set(vars.map((entry) => entry.name)), [vars]);
+  const variableNames = useMemo(
+    () => new Set(vars.map((entry) => entry.name)),
+    [vars],
+  );
   const hasUserRoot = variableNames.has("user");
   const userFieldEntries = useMemo(
     () =>
@@ -71,19 +74,22 @@ export function AvailableVariables({
               onClick={() => setShowUserFields((prev) => !prev)}
               className="cursor-pointer"
               aria-expanded={showUserFields}
-              aria-label={showUserFields ? "Hide user fields" : "Show user fields"}
+              aria-label={
+                showUserFields ? "Hide user fields" : "Show user fields"
+              }
             >
               <Badge variant="secondary" className={className}>
                 <span>{`{{ ${v.name} }}`}</span>
                 <HugeiconsIcon
-                  icon={ArrowDown01Icon}
+                  icon={ChevronDownStandardIcon}
                   className={`size-3 transition-transform ${showUserFields ? "rotate-180" : ""}`}
                 />
               </Badge>
             </button>
           );
         })}
-        {hasUserRoot && showUserFields &&
+        {hasUserRoot &&
+          showUserFields &&
           userFieldEntries.map((entry) => (
             <Badge
               key={`user-expanded:${entry.name}`}
diff --git a/studio/frontend/src/features/recipe-studio/dialogs/shared/collapsible-section-trigger.tsx b/studio/frontend/src/features/recipe-studio/dialogs/shared/collapsible-section-trigger.tsx
index 91f86e0d1b..993852bacb 100644
--- a/studio/frontend/src/features/recipe-studio/dialogs/shared/collapsible-section-trigger.tsx
+++ b/studio/frontend/src/features/recipe-studio/dialogs/shared/collapsible-section-trigger.tsx
@@ -1,13 +1,13 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { cn } from "@/lib/utils";
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
-  forwardRef,
   type ButtonHTMLAttributes,
   type ReactElement,
+  forwardRef,
 } from "react";
 
 type CollapsibleSectionTriggerProps = {
@@ -42,7 +42,7 @@ export const CollapsibleSectionTriggerButton = forwardRef<
     >
       <span className="flex min-w-0 items-center gap-2">
         <HugeiconsIcon
-          icon={ArrowDown01Icon}
+          icon={ChevronDownStandardIcon}
           className={cn(
             "size-3.5 shrink-0 transition-transform",
             open && "rotate-180",
diff --git a/studio/frontend/src/features/settings/api/personalization.ts b/studio/frontend/src/features/settings/api/personalization.ts
index 829e8249bb..7355b6fd0b 100644
--- a/studio/frontend/src/features/settings/api/personalization.ts
+++ b/studio/frontend/src/features/settings/api/personalization.ts
@@ -3,17 +3,21 @@
 
 import { authFetch } from "@/features/auth";
 import { readFastApiError } from "@/lib/format-fastapi-error";
+import type { AppearanceCustomization } from "../stores/appearance-custom-store";
 
 export type PersonalizationProfile = {
   displayName: string;
   nickname: string;
   avatarDataUrl: string | null;
   avatarShape: "circle" | "rounded";
+  showGreetingSloth: boolean;
 };
 
 export type PersonalizationAppearance = {
   theme: "light" | "dark" | "system";
+  palette: "standard" | "classic" | "minimal";
   language: string | null;
+  customization: AppearanceCustomization;
 };
 
 export type Personalization = {
@@ -22,18 +26,28 @@ export type Personalization = {
   appearance: PersonalizationAppearance;
   // Distinguishes server hydrate from first local migration.
   saved: boolean;
+  // False when the stored record predates these fields (legacy migration): the
+  // client then keeps local values instead of the server-filled defaults.
+  customizationSaved: boolean;
+  paletteSaved: boolean;
+  greetingSlothSaved: boolean;
 };
 
 export async function loadPersonalization(): Promise<Personalization> {
   const res = await authFetch("/api/settings/personalization");
   if (!res.ok) {
-    throw new Error(await readFastApiError(res, "Failed to load personalization"));
+    throw new Error(
+      await readFastApiError(res, "Failed to load personalization"),
+    );
   }
   return (await res.json()) as Personalization;
 }
 
 export async function savePersonalization(
-  data: Omit<Personalization, "saved">,
+  data: Omit<
+    Personalization,
+    "saved" | "customizationSaved" | "paletteSaved" | "greetingSlothSaved"
+  >,
 ): Promise<void> {
   const res = await authFetch("/api/settings/personalization", {
     method: "PUT",
@@ -41,6 +55,8 @@ export async function savePersonalization(
     body: JSON.stringify(data),
   });
   if (!res.ok) {
-    throw new Error(await readFastApiError(res, "Failed to save personalization"));
+    throw new Error(
+      await readFastApiError(res, "Failed to save personalization"),
+    );
   }
 }
diff --git a/studio/frontend/src/features/settings/components/api-monitor-console.tsx b/studio/frontend/src/features/settings/components/api-monitor-console.tsx
index 36d09115ae..ab67d4e006 100644
--- a/studio/frontend/src/features/settings/components/api-monitor-console.tsx
+++ b/studio/frontend/src/features/settings/components/api-monitor-console.tsx
@@ -80,7 +80,7 @@ function UsageBar({ value }: { value?: number | null }): ReactElement | null {
   return (
     <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
       <div
-        className="h-full rounded-full bg-primary"
+        className="h-full rounded-full bg-control-accent"
         style={{ width: `${pct}%` }}
       />
     </div>
diff --git a/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx b/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx
new file mode 100644
index 0000000000..c249e852cf
--- /dev/null
+++ b/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx
@@ -0,0 +1,984 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { type TranslationKey, useT } from "@/i18n";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
+import { toast } from "@/lib/toast";
+import { cn } from "@/lib/utils";
+import {
+  Cancel01Icon,
+  Folder01Icon,
+  Upload01Icon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { motion, useReducedMotionConfig } from "motion/react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import {
+  CODE_FONT_SIZE_RANGE,
+  type CustomModeColors,
+  DEFAULT_CUSTOMIZATION,
+  MAX_IMPORTED_FONTS,
+  MAX_TOTAL_IMPORTED_FONT_DATA_URL_LENGTH,
+  type ReduceMotionSetting,
+  UI_FONT_SIZE_RANGE,
+  isDefaultCustomization,
+  useAppearanceCustomStore,
+} from "../stores/appearance-custom-store";
+import {
+  type Palette,
+  type ResolvedTheme,
+  usePalette,
+  useTheme,
+} from "../stores/theme-store";
+import { ColorPickerSwatch } from "./color-picker";
+
+/* ------------------------------- Colors -------------------------------- */
+
+// Seed values shown in the pickers while no override is set. Mirrors the
+// palette token values in index.css (foregrounds converted from oklch).
+type DefaultModeColors = { [K in keyof CustomModeColors]: string };
+const PALETTE_DEFAULT_COLORS: Record<
+  Palette,
+  Record<ResolvedTheme, DefaultModeColors>
+> = {
+  standard: {
+    light: { accent: "#17b88b", background: "#fefefd", foreground: "#262626" },
+    dark: { accent: "#17b88b", background: "#181818", foreground: "#ececec" },
+  },
+  classic: {
+    light: { accent: "#339cff", background: "#ffffff", foreground: "#1a1c1f" },
+    dark: { accent: "#4dabff", background: "#181818", foreground: "#ececec" },
+  },
+  minimal: {
+    light: { accent: "#171717", background: "#ffffff", foreground: "#171717" },
+    dark: { accent: "#ededed", background: "#181818", foreground: "#ededed" },
+  },
+};
+
+/**
+ * Color override control for the CURRENTLY ACTIVE resolved mode. Only the
+ * active mode is editable; the other mode's overrides stay stored and take
+ * effect when the color scheme flips.
+ */
+export function ActiveColorControl({
+  colorKey,
+  label,
+}: {
+  colorKey: keyof CustomModeColors;
+  label: string;
+}) {
+  const t = useT();
+  const { resolved } = useTheme();
+  const { palette } = usePalette();
+  const override = useAppearanceCustomStore(
+    (s) => s.customization.colors[resolved][colorKey],
+  );
+  const setColor = useAppearanceCustomStore((s) => s.setColor);
+  const fallback = PALETTE_DEFAULT_COLORS[palette][resolved][colorKey];
+  const value = override ?? fallback;
+  return (
+    <div className="flex items-center gap-2">
+      {override !== null && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-xs text-muted-foreground"
+          onClick={() => setColor(resolved, colorKey, null)}
+        >
+          {t("settings.appearance.custom.reset")}
+        </Button>
+      )}
+      <ColorPickerSwatch
+        value={value}
+        onChange={(hex) => setColor(resolved, colorKey, hex)}
+        label={label}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------ Typography ------------------------------ */
+
+/** Font each slot resolves to when no override is set (see index.css). */
+const DEFAULT_FONT_NAMES = {
+  ui: "Inter Variable",
+  heading: "Hellix",
+  chat: "Inter Variable",
+  code: "JetBrains Mono",
+} as const;
+
+/** Fonts Unsloth Studio already ships (bundled @font-face / fontsource). */
+const BUNDLED_FONTS = [
+  "Inter Variable",
+  "Hellix",
+  "Space Grotesk Variable",
+  "Figtree Variable",
+  "JetBrains Mono",
+  "Fira Code",
+] as const;
+
+/* ----------------------------- Device fonts ------------------------------ */
+
+// Fallback candidates probed by canvas measurement when the Local Font
+// Access API (Chromium-only) is unavailable or denied.
+const CANDIDATE_DEVICE_FONTS = [
+  "American Typewriter",
+  "Andale Mono",
+  "Arial",
+  "Avenir",
+  "Avenir Next",
+  "Baskerville",
+  "Calibri",
+  "Cambria",
+  "Candara",
+  "Cantarell",
+  "Charter",
+  "Comic Sans MS",
+  "Consolas",
+  "Constantia",
+  "Corbel",
+  "Courier",
+  "Courier New",
+  "DejaVu Sans",
+  "DejaVu Sans Mono",
+  "DejaVu Serif",
+  "Didot",
+  "Fira Sans",
+  "Franklin Gothic Medium",
+  "Futura",
+  "Geneva",
+  "Georgia",
+  "Gill Sans",
+  "Helvetica",
+  "Helvetica Neue",
+  "Hoefler Text",
+  "IBM Plex Mono",
+  "IBM Plex Sans",
+  "Impact",
+  "Inconsolata",
+  "Iosevka",
+  "Lato",
+  "Liberation Mono",
+  "Liberation Sans",
+  "Liberation Serif",
+  "Lucida Grande",
+  "Menlo",
+  "Monaco",
+  "Montserrat",
+  "Noto Sans",
+  "Noto Serif",
+  "Nunito",
+  "Open Sans",
+  "Optima",
+  "Palatino",
+  "Roboto",
+  "Rockwell",
+  "Segoe UI",
+  "Seravek",
+  "Source Sans Pro",
+  "Tahoma",
+  "Times",
+  "Times New Roman",
+  "Trebuchet MS",
+  "Ubuntu",
+  "Verdana",
+];
+
+function detectFontsByMeasurement(candidates: string[]): string[] {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return [];
+  const sample = "mmmmmmmmmwwwwwwwlli";
+  const baselines = ["monospace", "sans-serif", "serif"].map((base) => {
+    ctx.font = `72px ${base}`;
+    return { base, width: ctx.measureText(sample).width };
+  });
+  return candidates.filter((family) =>
+    baselines.some(({ base, width }) => {
+      ctx.font = `72px "${family}", ${base}`;
+      return ctx.measureText(sample).width !== width;
+    }),
+  );
+}
+
+let deviceFontsCache: string[] | null = null;
+
+async function loadDeviceFonts(): Promise<string[]> {
+  if (deviceFontsCache) return deviceFontsCache;
+  let families: string[] = [];
+  const query = (
+    globalThis as {
+      queryLocalFonts?: () => Promise<{ family: string }[]>;
+    }
+  ).queryLocalFonts;
+  if (typeof query === "function") {
+    try {
+      const fonts = await query();
+      families = [...new Set(fonts.map((f) => f.family))];
+    } catch {
+      // permission denied; fall back to measurement probing
+    }
+  }
+  if (families.length === 0) {
+    families = detectFontsByMeasurement(CANDIDATE_DEVICE_FONTS);
+  }
+  deviceFontsCache = families.sort((a, b) => a.localeCompare(b));
+  return deviceFontsCache;
+}
+
+function FontSelect({
+  value,
+  defaultFont,
+  onCommit,
+  ariaLabel,
+}: {
+  value: string | null;
+  defaultFont: string;
+  onCommit: (next: string | null) => void;
+  ariaLabel: string;
+}) {
+  const t = useT();
+  const defaultLabel = `${defaultFont} (${t("settings.appearance.custom.fontDefault")})`;
+  const [open, setOpen] = useState(false);
+  const [deviceFonts, setDeviceFonts] = useState<string[] | null>(
+    deviceFontsCache,
+  );
+  const importedFonts = useAppearanceCustomStore(
+    (s) => s.customization.importedFonts,
+  );
+  const removeImportedFont = useAppearanceCustomStore(
+    (s) => s.removeImportedFont,
+  );
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    // Kick off inside the click gesture: queryLocalFonts may need transient
+    // user activation for its permission prompt.
+    if (next && deviceFonts === null) {
+      void loadDeviceFonts().then(setDeviceFonts);
+    }
+  };
+
+  const select = (next: string | null) => {
+    onCommit(next);
+    setOpen(false);
+  };
+
+  const folderFonts = useFolderFonts();
+  const { inputs: uploadInputs, requestUpload, requestFolder, importFile } =
+    useFontImport((name) => select(name));
+
+  const knownNames = new Set<string>([
+    ...BUNDLED_FONTS,
+    ...importedFonts.map((f) => f.name),
+  ]);
+  const deviceOnlyFonts = (deviceFonts ?? []).filter((f) => !knownNames.has(f));
+
+  const renderItem = (font: string) => (
+    <CommandItem
+      key={font}
+      value={font}
+      onSelect={() => select(font)}
+      data-checked={value === font}
+      className="cursor-pointer rounded-[11px]"
+    >
+      {/* Preview each entry in its own typeface. */}
+      <span
+        className="min-w-0 truncate"
+        style={{ fontFamily: `"${font}", var(--font-sans)` }}
+      >
+        {font}
+      </span>
+    </CommandItem>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange} modal={true}>
+      <PopoverTrigger asChild={true}>
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          aria-expanded={open}
+          className="flex h-8 w-48 cursor-pointer items-center justify-between gap-1.5 rounded-full border border-border bg-background px-3.5 text-xs outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] dark:border-transparent dark:bg-white/[0.06] dark:hover:bg-white/10"
+        >
+          <span
+            className="min-w-0 truncate"
+            style={{ fontFamily: `"${value ?? defaultFont}", var(--font-sans)` }}
+          >
+            {value ?? defaultLabel}
+          </span>
+          <HugeiconsIcon
+            icon={ChevronDownStandardIcon}
+            strokeWidth={2}
+            className="size-4 shrink-0 text-muted-foreground"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-64 gap-0 rounded-lg p-1 font-heading"
+      >
+        <Command className="rounded-none bg-transparent p-0">
+          <CommandInput
+            placeholder={t("settings.appearance.custom.fontSearch")}
+          />
+          <CommandList className="max-h-64 pt-1.5">
+            <CommandEmpty>
+              {t("settings.appearance.custom.fontNoResults")}
+            </CommandEmpty>
+            <CommandItem
+              value={defaultLabel}
+              onSelect={() => select(null)}
+              data-checked={value === null}
+              className="cursor-pointer rounded-[11px]"
+            >
+              <span style={{ fontFamily: `"${defaultFont}", var(--font-sans)` }}>
+                {defaultLabel}
+              </span>
+            </CommandItem>
+            <CommandGroup
+              className="p-0"
+              heading={t("settings.appearance.custom.fontBundledGroup")}
+            >
+              {BUNDLED_FONTS.map(renderItem)}
+            </CommandGroup>
+            {importedFonts.length > 0 && (
+              <CommandGroup
+                className="p-0"
+                heading={t("settings.appearance.custom.fontImportedGroup")}
+              >
+                {importedFonts.map((font) => (
+                  <CommandItem
+                    key={font.name}
+                    value={font.name}
+                    onSelect={() => select(font.name)}
+                    data-checked={value === font.name}
+                    className="cursor-pointer rounded-[11px]"
+                  >
+                    <span
+                      className="min-w-0 truncate"
+                      style={{ fontFamily: `"${font.name}", var(--font-sans)` }}
+                    >
+                      {font.name}
+                    </span>
+                    <button
+                      type="button"
+                      aria-label={`${t("settings.appearance.custom.importFont.remove")}: ${font.name}`}
+                      onPointerDown={(e) => e.stopPropagation()}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeImportedFont(font.name);
+                      }}
+                      className="ml-auto rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      <HugeiconsIcon icon={Cancel01Icon} className="size-3" />
+                    </button>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {folderFonts.some((f) => !knownNames.has(f.name)) && (
+              <CommandGroup
+                className="p-0"
+                heading={t("settings.appearance.custom.fontFolderGroup")}
+              >
+                {folderFonts
+                  .filter((f) => !knownNames.has(f.name))
+                  .map(({ name, file }) => (
+                    <CommandItem
+                      key={`folder-${name}`}
+                      value={name}
+                      onSelect={() => importFile(file)}
+                      className="cursor-pointer rounded-[11px]"
+                    >
+                      <span className="min-w-0 truncate">{name}</span>
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            )}
+            <CommandGroup
+              className="p-0"
+              heading={t("settings.appearance.custom.fontDeviceGroup")}
+            >
+              {deviceFonts === null ? (
+                <div className="px-3 py-2 text-xs text-muted-foreground">
+                  {t("settings.appearance.custom.fontDeviceLoading")}
+                </div>
+              ) : (
+                deviceOnlyFonts.map(renderItem)
+              )}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <div className="mt-1 flex items-center gap-1 border-t border-border/60 pt-1">
+          <button
+            type="button"
+            onClick={requestUpload}
+            className="flex flex-1 cursor-pointer items-center gap-2 whitespace-nowrap rounded-[11px] px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+          >
+            <HugeiconsIcon
+              icon={Upload01Icon}
+              className="size-4 shrink-0 text-muted-foreground"
+            />
+            {t("settings.appearance.custom.importFont.upload")}
+          </button>
+          <div className="h-4 w-px shrink-0 bg-border" />
+          <button
+            type="button"
+            onClick={requestFolder}
+            className="flex flex-1 cursor-pointer items-center gap-2 whitespace-nowrap rounded-[11px] px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+          >
+            <HugeiconsIcon
+              icon={Folder01Icon}
+              className="size-4 shrink-0 text-muted-foreground"
+            />
+            {t("settings.appearance.custom.importFont.scanFolder")}
+          </button>
+        </div>
+        {uploadInputs}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function UiFontRow() {
+  const t = useT();
+  const uiFont = useAppearanceCustomStore((s) => s.customization.uiFont);
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSelect
+      value={uiFont}
+      defaultFont={DEFAULT_FONT_NAMES.ui}
+      onCommit={(next) => patch({ uiFont: next })}
+      ariaLabel={t("settings.appearance.custom.uiFont.label")}
+    />
+  );
+}
+
+export function HeadingFontRow() {
+  const t = useT();
+  const headingFont = useAppearanceCustomStore(
+    (s) => s.customization.headingFont,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSelect
+      value={headingFont}
+      defaultFont={DEFAULT_FONT_NAMES.heading}
+      onCommit={(next) => patch({ headingFont: next })}
+      ariaLabel={t("settings.appearance.custom.headingFont.label")}
+    />
+  );
+}
+
+export function ChatFontRow() {
+  const t = useT();
+  const chatFont = useAppearanceCustomStore((s) => s.customization.chatFont);
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSelect
+      value={chatFont}
+      defaultFont={DEFAULT_FONT_NAMES.chat}
+      onCommit={(next) => patch({ chatFont: next })}
+      ariaLabel={t("settings.appearance.custom.chatFont.label")}
+    />
+  );
+}
+
+export function CodeFontRow() {
+  const t = useT();
+  const codeFont = useAppearanceCustomStore((s) => s.customization.codeFont);
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSelect
+      value={codeFont}
+      defaultFont={DEFAULT_FONT_NAMES.code}
+      onCommit={(next) => patch({ codeFont: next })}
+      ariaLabel={t("settings.appearance.custom.codeFont.label")}
+    />
+  );
+}
+
+/* ---------------------------- Imported fonts ---------------------------- */
+
+const FONT_MIME_BY_EXTENSION: Record<string, string> = {
+  woff2: "font/woff2",
+  woff: "font/woff",
+  ttf: "font/ttf",
+  otf: "font/otf",
+};
+
+const MAX_FONT_FILE_BYTES = Math.floor(1.5 * 1024 * 1024);
+
+// Trailing style words stripped when matching a file name to a family the
+// user already has ("Roboto-Bold.ttf" should match an installed "Roboto").
+const FONT_STYLE_SUFFIXES = new Set([
+  "regular",
+  "bold",
+  "italic",
+  "light",
+  "medium",
+  "thin",
+  "black",
+  "semibold",
+  "extrabold",
+  "extralight",
+  "heavy",
+  "book",
+  "oblique",
+  "normal",
+  "variable",
+  "vf",
+]);
+
+function fontBaseName(fileName: string): string {
+  return fileName
+    .replace(/\.[^.]+$/, "")
+    .replace(/[;{}()<>"']/g, "")
+    .replace(/[_-]+/g, " ")
+    .trim();
+}
+
+function familyCandidates(base: string): string[] {
+  const candidates = [base];
+  let words = base.split(/\s+/);
+  while (
+    words.length > 1 &&
+    FONT_STYLE_SUFFIXES.has(words[words.length - 1].toLowerCase())
+  ) {
+    words = words.slice(0, -1);
+    candidates.push(words.join(" "));
+  }
+  return candidates;
+}
+
+/* ----------------------------- Folder fonts ----------------------------- */
+
+// Font files found by a folder scan this session, shared by every dropdown.
+// File handles cannot be persisted from a plain directory input, so the list
+// lives for the session; picking one imports it through the normal path.
+type FolderFont = { name: string; file: File };
+let folderFontsCache: FolderFont[] = [];
+const folderFontsListeners = new Set<() => void>();
+
+function setFolderFonts(next: FolderFont[]) {
+  folderFontsCache = next;
+  for (const listener of folderFontsListeners) listener();
+}
+
+function useFolderFonts(): FolderFont[] {
+  return useSyncExternalStore(
+    (onChange) => {
+      folderFontsListeners.add(onChange);
+      return () => folderFontsListeners.delete(onChange);
+    },
+    () => folderFontsCache,
+  );
+}
+
+function fontNameFromFile(fileName: string, taken: Set<string>): string {
+  const base = fontBaseName(fileName).slice(0, 60) || "Imported font";
+  let candidate = base;
+  let suffix = 2;
+  while (taken.has(candidate)) {
+    candidate = `${base} ${suffix}`;
+    suffix += 1;
+  }
+  return candidate;
+}
+
+/**
+ * File-import plumbing for the font dropdowns: hidden inputs, validation,
+ * and persistence. Successful uploads call onImported with the font name
+ * so the dropdown can select it for its slot right away. Fonts the user
+ * already has (bundled, imported, or installed on the device) are selected
+ * directly instead of embedding a duplicate copy.
+ */
+function useFontImport(onImported: (name: string) => void) {
+  const t = useT();
+  const importedFonts = useAppearanceCustomStore(
+    (s) => s.customization.importedFonts,
+  );
+  const addImportedFont = useAppearanceCustomStore((s) => s.addImportedFont);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const folderRef = useRef<HTMLInputElement>(null);
+
+  // Match the file name against fonts that already exist somewhere.
+  const findExisting = (fileName: string): string | null => {
+    for (const candidate of familyCandidates(fontBaseName(fileName))) {
+      const lower = candidate.toLowerCase();
+      const imported = importedFonts.find((f) => f.name.toLowerCase() === lower);
+      if (imported) return imported.name;
+      const bundled = BUNDLED_FONTS.find((f) => f.toLowerCase() === lower);
+      if (bundled) return bundled;
+      if (detectFontsByMeasurement([candidate]).length > 0) return candidate;
+    }
+    return null;
+  };
+
+  const importFile = (file: File) => {
+    const existing = findExisting(file.name);
+    if (existing) {
+      toast.info(t("settings.appearance.custom.importFont.alreadyAvailable"));
+      onImported(existing);
+      return;
+    }
+    if (importedFonts.length >= MAX_IMPORTED_FONTS) {
+      toast.error(t("settings.appearance.custom.importFont.errorLimit"));
+      return;
+    }
+    const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+    const mime = FONT_MIME_BY_EXTENSION[extension];
+    if (!mime) {
+      toast.error(t("settings.appearance.custom.importFont.errorInvalidType"));
+      return;
+    }
+    if (file.size > MAX_FONT_FILE_BYTES) {
+      toast.error(t("settings.appearance.custom.importFont.errorTooLarge"));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onerror = () => {
+      toast.error(t("settings.appearance.custom.importFont.errorFailed"));
+    };
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result !== "string") {
+        toast.error(t("settings.appearance.custom.importFont.errorFailed"));
+        return;
+      }
+      // Rewrite whatever MIME the browser guessed to the extension's font
+      // type so the stored data URL passes frontend and backend validation.
+      const base64 = result.slice(result.indexOf(",") + 1);
+      const dataUrl = `data:${mime};base64,${base64}`;
+      // Keep the persisted store under the localStorage quota.
+      const existingTotal = importedFonts.reduce(
+        (sum, f) => sum + f.dataUrl.length,
+        0,
+      );
+      if (
+        existingTotal + dataUrl.length >
+        MAX_TOTAL_IMPORTED_FONT_DATA_URL_LENGTH
+      ) {
+        toast.error(
+          t("settings.appearance.custom.importFont.errorStorageFull"),
+        );
+        return;
+      }
+      const taken = new Set<string>([
+        ...BUNDLED_FONTS,
+        ...importedFonts.map((f) => f.name),
+      ]);
+      const name = fontNameFromFile(file.name, taken);
+      // Prove the file is a loadable font before persisting it.
+      const face = new FontFace(name, `url(${dataUrl})`);
+      face
+        .load()
+        .then(() => {
+          addImportedFont({ name, dataUrl });
+          onImported(name);
+        })
+        .catch(() => {
+          toast.error(t("settings.appearance.custom.importFont.errorFailed"));
+        });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const scanFolder = (files: FileList) => {
+    const found: FolderFont[] = [];
+    const seen = new Set<string>();
+    for (const file of Array.from(files)) {
+      const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+      if (!FONT_MIME_BY_EXTENSION[extension]) continue;
+      const name = fontBaseName(file.name).slice(0, 60);
+      if (!name || seen.has(name.toLowerCase())) continue;
+      seen.add(name.toLowerCase());
+      found.push({ name, file });
+      if (found.length >= 200) break;
+    }
+    if (found.length === 0) {
+      toast.info(t("settings.appearance.custom.importFont.folderNoFonts"));
+      return;
+    }
+    found.sort((a, b) => a.name.localeCompare(b.name));
+    setFolderFonts(found);
+  };
+
+  const requestUpload = () => inputRef.current?.click();
+  const requestFolder = () => folderRef.current?.click();
+
+  const inputs = (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".woff2,.woff,.ttf,.otf"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) importFile(file);
+          e.target.value = "";
+        }}
+      />
+      <input
+        ref={folderRef}
+        type="file"
+        className="hidden"
+        // Non-standard but universal directory picker attributes.
+        {...({ webkitdirectory: "", directory: "" } as object)}
+        onChange={(e) => {
+          if (e.target.files) scanFolder(e.target.files);
+          e.target.value = "";
+        }}
+      />
+    </>
+  );
+
+  return { inputs, requestUpload, requestFolder, importFile };
+}
+
+function FontSizeInput({
+  value,
+  range,
+  onCommit,
+  ariaLabel,
+}: {
+  value: number | null;
+  range: { min: number; max: number; default: number };
+  onCommit: (next: number | null) => void;
+  ariaLabel: string;
+}) {
+  const [draft, setDraft] = useState(value === null ? "" : String(value));
+  useEffect(() => {
+    setDraft(value === null ? "" : String(value));
+  }, [value]);
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed === "") {
+      onCommit(null);
+      return;
+    }
+    const parsed = Number.parseInt(trimmed, 10);
+    if (Number.isNaN(parsed)) {
+      setDraft(value === null ? "" : String(value));
+      return;
+    }
+    onCommit(Math.min(range.max, Math.max(range.min, parsed)));
+  };
+  return (
+    <div className="flex items-center gap-1.5">
+      <Input
+        type="number"
+        inputMode="numeric"
+        min={range.min}
+        max={range.max}
+        value={draft}
+        placeholder={String(range.default)}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            commit();
+            e.currentTarget.blur();
+          }
+        }}
+        aria-label={ariaLabel}
+        className="h-8 w-20 text-xs"
+      />
+      <span className="text-xs text-muted-foreground">px</span>
+    </div>
+  );
+}
+
+export function UiFontSizeRow() {
+  const t = useT();
+  const uiFontSize = useAppearanceCustomStore(
+    (s) => s.customization.uiFontSize,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSizeInput
+      value={uiFontSize}
+      range={UI_FONT_SIZE_RANGE}
+      onCommit={(next) => patch({ uiFontSize: next })}
+      ariaLabel={t("settings.appearance.custom.uiFontSize.label")}
+    />
+  );
+}
+
+export function CodeFontSizeRow() {
+  const t = useT();
+  const codeFontSize = useAppearanceCustomStore(
+    (s) => s.customization.codeFontSize,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <FontSizeInput
+      value={codeFontSize}
+      range={CODE_FONT_SIZE_RANGE}
+      onCommit={(next) => patch({ codeFontSize: next })}
+      ariaLabel={t("settings.appearance.custom.codeFontSize.label")}
+    />
+  );
+}
+
+export function EdgeFadesSwitch() {
+  const edgeFades = useAppearanceCustomStore((s) => s.customization.edgeFades);
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <Switch
+      checked={edgeFades}
+      onCheckedChange={(checked) => patch({ edgeFades: checked })}
+    />
+  );
+}
+
+export function FontSmoothingSwitch() {
+  const fontSmoothing = useAppearanceCustomStore(
+    (s) => s.customization.fontSmoothing,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <Switch
+      checked={fontSmoothing}
+      onCheckedChange={(checked) => patch({ fontSmoothing: checked })}
+    />
+  );
+}
+
+/* ------------------------------ Interface ------------------------------- */
+
+export function ContrastSliderRow() {
+  const t = useT();
+  const contrast = useAppearanceCustomStore((s) => s.customization.contrast);
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <div className="flex w-48 items-center gap-3">
+      <Slider
+        value={[contrast]}
+        min={0}
+        max={100}
+        step={5}
+        onValueChange={(values: number[]) => patch({ contrast: values[0] })}
+        aria-label={t("settings.appearance.custom.contrast.label")}
+      />
+      <span className="w-8 text-right text-xs tabular-nums text-muted-foreground">
+        {contrast}
+      </span>
+    </div>
+  );
+}
+
+export function PointerCursorsSwitch() {
+  const pointerCursors = useAppearanceCustomStore(
+    (s) => s.customization.pointerCursors,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <Switch
+      checked={pointerCursors}
+      onCheckedChange={(checked) => patch({ pointerCursors: checked })}
+    />
+  );
+}
+
+const REDUCE_MOTION_OPTIONS: {
+  value: ReduceMotionSetting;
+  labelKey: TranslationKey;
+}[] = [
+  {
+    value: "system",
+    labelKey: "settings.appearance.custom.reduceMotion.system",
+  },
+  { value: "on", labelKey: "settings.appearance.custom.reduceMotion.on" },
+  { value: "off", labelKey: "settings.appearance.custom.reduceMotion.off" },
+];
+
+export function ReduceMotionSegmented() {
+  const t = useT();
+  const reduceMotion = useAppearanceCustomStore(
+    (s) => s.customization.reduceMotion,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  const reduced = useReducedMotionConfig();
+  return (
+    <div className="hub-tab-toggle inline-flex h-8 items-center rounded-full">
+      {REDUCE_MOTION_OPTIONS.map((opt) => {
+        const active = reduceMotion === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => patch({ reduceMotion: opt.value })}
+            aria-pressed={active}
+            className={cn(
+              "relative flex h-8 items-center rounded-full px-3 text-xs font-medium transition-colors",
+              active
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {active && (
+              <motion.span
+                layoutId="reduce-motion-pill"
+                className="hub-tab-toggle-pill absolute inset-0 rounded-full"
+                transition={
+                  reduced
+                    ? { duration: 0 }
+                    : { type: "spring", stiffness: 500, damping: 35, mass: 0.5 }
+                }
+              />
+            )}
+            <span className="relative z-10">{t(opt.labelKey)}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ------------------------------- Reset all ------------------------------ */
+
+export function ResetCustomizationButton() {
+  const t = useT();
+  const customization = useAppearanceCustomStore((s) => s.customization);
+  const resetAll = useAppearanceCustomStore((s) => s.resetAll);
+  const pristine = isDefaultCustomization(customization);
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      disabled={pristine}
+      onClick={resetAll}
+    >
+      {t("settings.appearance.custom.resetAll")}
+    </Button>
+  );
+}
+
+export { DEFAULT_CUSTOMIZATION };
diff --git a/studio/frontend/src/features/settings/components/color-picker.tsx b/studio/frontend/src/features/settings/components/color-picker.tsx
new file mode 100644
index 0000000000..d42e439349
--- /dev/null
+++ b/studio/frontend/src/features/settings/components/color-picker.tsx
@@ -0,0 +1,270 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useT } from "@/i18n";
+import { cn } from "@/lib/utils";
+import { ColorPickerIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useRef, useState } from "react";
+
+/* ------------------------- HSV ↔ hex conversions ------------------------- */
+
+type Hsv = { h: number; s: number; v: number };
+
+function hexToHsv(hex: string): Hsv {
+  const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
+  const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
+  const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : d / max, v: max };
+}
+
+function hsvToHex({ h, s, v }: Hsv): string {
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+  let rgb: [number, number, number];
+  if (h < 60) rgb = [c, x, 0];
+  else if (h < 120) rgb = [x, c, 0];
+  else if (h < 180) rgb = [0, c, x];
+  else if (h < 240) rgb = [0, x, c];
+  else if (h < 300) rgb = [x, 0, c];
+  else rgb = [c, 0, x];
+  const channel = (value: number) =>
+    Math.round((value + m) * 255)
+      .toString(16)
+      .padStart(2, "0");
+  return `#${channel(rgb[0])}${channel(rgb[1])}${channel(rgb[2])}`;
+}
+
+const HEX_PATTERN = /^#?([0-9a-fA-F]{6})$/;
+
+function isLightColor(hex: string): boolean {
+  const r = Number.parseInt(hex.slice(1, 3), 16);
+  const g = Number.parseInt(hex.slice(3, 5), 16);
+  const b = Number.parseInt(hex.slice(5, 7), 16);
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.62;
+}
+
+/* ------------------------------- Component ------------------------------- */
+
+type EyeDropperResult = { sRGBHex: string };
+type EyeDropperConstructor = new () => {
+  open: () => Promise<EyeDropperResult>;
+};
+
+/**
+ * In-app color picker in a Popover: saturation/value area, hue slider, hex
+ * field, and (where supported) a screen eyedropper. Replaces the native
+ * <input type="color"> so no OS-level color panel is left dangling when the
+ * user clicks away; the popover dismisses like any other popup.
+ */
+export function ColorPickerSwatch({
+  value,
+  onChange,
+  label,
+}: {
+  value: string;
+  onChange: (hex: string) => void;
+  label: string;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [hsv, setHsv] = useState<Hsv>(() => hexToHsv(value));
+  const [hexDraft, setHexDraft] = useState(value);
+  const areaRef = useRef<HTMLDivElement>(null);
+
+  // Re-seed the picker from the outside value each time it opens (the value
+  // may have changed via reset, palette switch, or remote sync).
+  useEffect(() => {
+    if (open) {
+      setHsv(hexToHsv(value));
+      setHexDraft(value);
+    }
+  }, [open, value]);
+
+  const emit = (next: Hsv) => {
+    setHsv(next);
+    const hex = hsvToHex(next);
+    setHexDraft(hex);
+    onChange(hex);
+  };
+
+  const moveFromPointer = (e: React.PointerEvent) => {
+    const area = areaRef.current;
+    if (!area) return;
+    const rect = area.getBoundingClientRect();
+    const s = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+    const v =
+      1 - Math.min(1, Math.max(0, (e.clientY - rect.top) / rect.height));
+    emit({ ...hsv, s, v });
+  };
+
+  const commitHex = () => {
+    const match = HEX_PATTERN.exec(hexDraft.trim());
+    if (!match) {
+      setHexDraft(hsvToHex(hsv));
+      return;
+    }
+    const hex = `#${match[1].toLowerCase()}`;
+    setHsv(hexToHsv(hex));
+    setHexDraft(hex);
+    onChange(hex);
+  };
+
+  const eyeDropperCtor = (
+    globalThis as { EyeDropper?: EyeDropperConstructor }
+  ).EyeDropper;
+
+  const pickFromScreen = async () => {
+    if (!eyeDropperCtor) return;
+    try {
+      const result = await new eyeDropperCtor().open();
+      const hex = result.sRGBHex.toLowerCase();
+      if (HEX_PATTERN.test(hex)) {
+        setHsv(hexToHsv(hex));
+        setHexDraft(hex);
+        onChange(hex);
+      }
+    } catch {
+      // user dismissed the eyedropper
+    }
+  };
+
+  const hueColor = hsvToHex({ h: hsv.h, s: 1, v: 1 });
+  const light = isLightColor(value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          className={cn(
+            "flex h-8 w-24 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 font-mono text-xs uppercase transition-colors",
+            light
+              ? "border-black/10 text-black/80"
+              : "border-white/15 text-white",
+          )}
+          style={{ backgroundColor: value }}
+        >
+          <span
+            className={cn(
+              "size-3.5 shrink-0 rounded-full border",
+              light ? "border-black/20" : "border-white/40",
+            )}
+          />
+          {value.toUpperCase()}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-60 rounded-lg p-3">
+        <div className="flex flex-col gap-3">
+          <div
+            ref={areaRef}
+            role="slider"
+            aria-label={label}
+            aria-valuetext={hexDraft}
+            aria-valuenow={Math.round(hsv.v * 100)}
+            tabIndex={0}
+            className="relative h-36 w-full cursor-crosshair touch-none rounded-lg"
+            style={{
+              background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`,
+            }}
+            onPointerDown={(e) => {
+              e.currentTarget.setPointerCapture(e.pointerId);
+              moveFromPointer(e);
+            }}
+            onPointerMove={(e) => {
+              if (e.buttons === 1) moveFromPointer(e);
+            }}
+            onKeyDown={(e) => {
+              // Arrow keys move the saturation (x) / value (y) selection so the
+              // area is operable without a pointer; Shift takes coarser steps.
+              const step = e.shiftKey ? 0.1 : 0.01;
+              let next: Hsv | null = null;
+              if (e.key === "ArrowLeft")
+                next = { ...hsv, s: Math.max(0, hsv.s - step) };
+              else if (e.key === "ArrowRight")
+                next = { ...hsv, s: Math.min(1, hsv.s + step) };
+              else if (e.key === "ArrowDown")
+                next = { ...hsv, v: Math.max(0, hsv.v - step) };
+              else if (e.key === "ArrowUp")
+                next = { ...hsv, v: Math.min(1, hsv.v + step) };
+              if (next) {
+                e.preventDefault();
+                emit(next);
+              }
+            }}
+          >
+            <span
+              className="pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.35)]"
+              style={{
+                left: `${hsv.s * 100}%`,
+                top: `${(1 - hsv.v) * 100}%`,
+                backgroundColor: hsvToHex(hsv),
+              }}
+            />
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={360}
+            step={1}
+            value={Math.round(hsv.h)}
+            aria-label={t("settings.appearance.custom.colorPicker.hue")}
+            onChange={(e) => emit({ ...hsv, h: Number(e.target.value) })}
+            className="h-3 w-full cursor-pointer appearance-none rounded-full outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-transparent [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_rgba(0,0,0,0.35)]"
+            style={{
+              background:
+                "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
+            }}
+          />
+          <div className="flex items-center gap-2">
+            <input
+              value={hexDraft.toUpperCase()}
+              onChange={(e) => setHexDraft(e.target.value)}
+              onBlur={commitHex}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  commitHex();
+                  e.currentTarget.blur();
+                }
+              }}
+              aria-label={t("settings.appearance.custom.colorPicker.hex")}
+              spellCheck={false}
+              className="h-8 w-full min-w-0 rounded-full border border-border bg-background px-3 font-mono text-xs text-foreground uppercase outline-none focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] dark:border-transparent dark:bg-white/[0.06]"
+            />
+            {eyeDropperCtor && (
+              <button
+                type="button"
+                onClick={() => void pickFromScreen()}
+                aria-label={t(
+                  "settings.appearance.custom.colorPicker.eyedropper",
+                )}
+                title={t("settings.appearance.custom.colorPicker.eyedropper")}
+                className="flex size-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <HugeiconsIcon icon={ColorPickerIcon} className="size-4" />
+              </button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/studio/frontend/src/features/settings/components/create-key-form.tsx b/studio/frontend/src/features/settings/components/create-key-form.tsx
index e2ad23e59f..642d9ad320 100644
--- a/studio/frontend/src/features/settings/components/create-key-form.tsx
+++ b/studio/frontend/src/features/settings/components/create-key-form.tsx
@@ -64,7 +64,7 @@ export function CreateKeyForm({
                 onClick={() => setExpiry(p.value)}
                 aria-pressed={active}
                 className={cn(
-                  "inline-flex h-8 items-center rounded-full px-3.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "inline-flex h-8 items-center rounded-full px-3.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                   active
                     ? "hub-tab-toggle-pill text-foreground"
                     : "text-muted-foreground hover:text-foreground",
diff --git a/studio/frontend/src/features/settings/components/key-reveal-card.tsx b/studio/frontend/src/features/settings/components/key-reveal-card.tsx
index aa4f67348b..34517cf3bd 100644
--- a/studio/frontend/src/features/settings/components/key-reveal-card.tsx
+++ b/studio/frontend/src/features/settings/components/key-reveal-card.tsx
@@ -43,7 +43,7 @@ export function KeyRevealCard({
         onClick={handleCopy}
         className={cn(
           "flex w-full items-center justify-between gap-3 rounded-md border border-border bg-muted/40 px-3 py-2.5 font-mono text-sm transition-colors hover:bg-muted/60",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           copied && "border-emerald-500/40 bg-emerald-500/10",
         )}
         aria-label={
@@ -68,7 +68,7 @@ export function KeyRevealCard({
           type="button"
           size="sm"
           onClick={onDone}
-          className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+          className="focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         >
           {t("common.done")}
         </Button>
diff --git a/studio/frontend/src/features/settings/components/model-auto-switch-section.tsx b/studio/frontend/src/features/settings/components/model-auto-switch-section.tsx
index 581c78ebd1..5bebefa84c 100644
--- a/studio/frontend/src/features/settings/components/model-auto-switch-section.tsx
+++ b/studio/frontend/src/features/settings/components/model-auto-switch-section.tsx
@@ -121,7 +121,7 @@ export function ModelAutoSwitchSection() {
       >
         <div className="flex flex-col items-end gap-1">
           <div className="flex items-center gap-2">
-            <div className="relative w-28">
+            <div className="flex items-center gap-1.5">
               <Input
                 type="number"
                 min={0}
@@ -130,9 +130,9 @@ export function ModelAutoSwitchSection() {
                 aria-label="Idle auto-unload seconds"
                 disabled={!settings?.enabled || isSaving}
                 onChange={(event) => setDraftIdleSeconds(event.target.value)}
-                className="h-8 w-full pr-8"
+                className="h-8 w-24"
               />
-              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs font-medium text-muted-foreground">
+              <span className="text-xs font-medium text-muted-foreground">
                 s
               </span>
             </div>
diff --git a/studio/frontend/src/features/settings/components/palette-cards.tsx b/studio/frontend/src/features/settings/components/palette-cards.tsx
new file mode 100644
index 0000000000..e6b920574b
--- /dev/null
+++ b/studio/frontend/src/features/settings/components/palette-cards.tsx
@@ -0,0 +1,147 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import { type TranslationKey, useT } from "@/i18n";
+import {
+  type Palette,
+  type ResolvedTheme,
+  usePalette,
+  useTheme,
+} from "../stores/theme-store";
+
+type PreviewColors = {
+  bg: string;
+  sidebar: string;
+  accent: string;
+  text: string;
+  border: string;
+};
+
+// Representative swatches per palette × resolved mode. Hardcoded (rather than
+// reading the live CSS variables) so every card previews its own palette while
+// only one palette is active on <html>. Sidebar tones are slightly exaggerated
+// so the two surfaces stay distinguishable at thumbnail size.
+const PREVIEWS: Record<Palette, Record<ResolvedTheme, PreviewColors>> = {
+  standard: {
+    light: {
+      bg: "#fefefd",
+      sidebar: "#f1f1ef",
+      accent: "#17b88b",
+      text: "#444444",
+      border: "#e4e4e0",
+    },
+    dark: {
+      bg: "#181818",
+      sidebar: "#262626",
+      accent: "#17b88b",
+      text: "#b5b5b5",
+      border: "#303030",
+    },
+  },
+  classic: {
+    light: {
+      bg: "#ffffff",
+      sidebar: "#ededed",
+      accent: "#339cff",
+      text: "#4b4d50",
+      border: "#e6e6e6",
+    },
+    dark: {
+      bg: "#181818",
+      sidebar: "#262626",
+      accent: "#4dabff",
+      text: "#b5b5b5",
+      border: "#303030",
+    },
+  },
+  minimal: {
+    light: {
+      bg: "#ffffff",
+      sidebar: "#f2f2f2",
+      accent: "#171717",
+      text: "#555555",
+      border: "#e2e2e2",
+    },
+    dark: {
+      bg: "#181818",
+      sidebar: "#262626",
+      accent: "#ededed",
+      text: "#a8a8a8",
+      border: "#303030",
+    },
+  },
+};
+
+const OPTIONS: {
+  value: Palette;
+  labelKey: TranslationKey;
+}[] = [
+  { value: "standard", labelKey: "settings.appearance.palette.standard" },
+  { value: "classic", labelKey: "settings.appearance.palette.classic" },
+  { value: "minimal", labelKey: "settings.appearance.palette.minimal" },
+];
+
+function PalettePreview({ colors }: { colors: PreviewColors }) {
+  return (
+    <div
+      className="h-16 w-full overflow-hidden rounded-lg border"
+      style={{ backgroundColor: colors.bg, borderColor: colors.border }}
+      aria-hidden="true"
+    >
+      <div className="flex h-full">
+        <div
+          className="h-full w-1/4"
+          style={{ backgroundColor: colors.sidebar }}
+        />
+        <div className="flex flex-1 flex-col justify-center gap-1.5 px-2.5">
+          <span
+            className="h-1.5 w-3/4 rounded-full"
+            style={{ backgroundColor: colors.text }}
+          />
+          <span
+            className="h-1.5 w-1/2 rounded-full opacity-60"
+            style={{ backgroundColor: colors.text }}
+          />
+          <span
+            className="h-2.5 w-8 rounded-full"
+            style={{ backgroundColor: colors.accent }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PaletteCards() {
+  const t = useT();
+  const { resolved } = useTheme();
+  const { palette, setPalette } = usePalette();
+  return (
+    <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3">
+      {OPTIONS.map((opt) => {
+        const active = palette === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => setPalette(opt.value)}
+            aria-pressed={active}
+            data-palette-value={opt.value}
+            // The active ring is CSS-driven off html[data-palette] (see
+            // .palette-card in index.css) so it moves in the same style
+            // pass that swaps the tokens; keying it off React state leaves
+            // the ring on the old card until the app finishes re-rendering.
+            className="palette-card flex flex-col gap-2 rounded-xl border border-border p-2.5 text-left transition-colors focus-visible:border-ring focus-visible:outline-none"
+          >
+            <PalettePreview colors={PREVIEWS[opt.value][resolved]} />
+            <div className="flex items-center gap-2 px-0.5">
+              <span className="text-sm font-medium text-foreground">
+                {t(opt.labelKey)}
+              </span>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/studio/frontend/src/features/settings/components/settings-row.tsx b/studio/frontend/src/features/settings/components/settings-row.tsx
index 3c049d2f99..3cf9822811 100644
--- a/studio/frontend/src/features/settings/components/settings-row.tsx
+++ b/studio/frontend/src/features/settings/components/settings-row.tsx
@@ -24,6 +24,7 @@ export function SettingsRow({
 }) {
   return (
     <div
+      data-settings-label={label}
       className={cn(
         "flex justify-between gap-6 py-3",
         alignTop ? "items-start" : "items-center",
diff --git a/studio/frontend/src/features/settings/components/settings-section.tsx b/studio/frontend/src/features/settings/components/settings-section.tsx
index 8b4521c9f4..1260ce70d3 100644
--- a/studio/frontend/src/features/settings/components/settings-section.tsx
+++ b/studio/frontend/src/features/settings/components/settings-section.tsx
@@ -13,7 +13,7 @@ export function SettingsSection({
   children: ReactNode;
 }) {
   return (
-    <section className="flex flex-col">
+    <section data-settings-label={title} className="flex flex-col">
       <div className="mb-1 flex flex-col gap-0.5">
         <h2 className="text-base font-semibold font-heading text-foreground">
           {title}
@@ -24,7 +24,14 @@ export function SettingsSection({
           </p>
         ) : null}
       </div>
-      <div className="flex flex-col divide-y divide-border/60">{children}</div>
+      {/* No per-row dividers: rows inside a titled section are related.
+          SettingsGroupDivider separates unrelated clusters. */}
+      <div className="flex flex-col">{children}</div>
     </section>
   );
 }
+
+/** Divider between unrelated clusters of rows inside one section. */
+export function SettingsGroupDivider() {
+  return <div className="my-1 border-t border-border/60" />;
+}
diff --git a/studio/frontend/src/features/settings/components/sidebar-menu-customizer.tsx b/studio/frontend/src/features/settings/components/sidebar-menu-customizer.tsx
new file mode 100644
index 0000000000..e7e6576eef
--- /dev/null
+++ b/studio/frontend/src/features/settings/components/sidebar-menu-customizer.tsx
@@ -0,0 +1,148 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import {
+  CloudIcon,
+  CpuIcon,
+  CursorInfo02Icon,
+  DragDropVerticalIcon,
+  Globe02Icon,
+  HelpCircleIcon,
+  Logout05Icon,
+  Message01Icon,
+  Moon02Icon,
+  PaintBrush02Icon,
+  PowerIcon,
+  Settings02Icon,
+  UserIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Reorder, useDragControls } from "motion/react";
+import { Switch } from "@/components/ui/switch";
+import { useT } from "@/i18n";
+import type { TranslationKey } from "@/i18n";
+import type { IconSvgElement } from "@hugeicons/react";
+import type { SidebarMenuItemPref } from "../stores/appearance-custom-store";
+import { useAppearanceCustomStore } from "../stores/appearance-custom-store";
+
+const ITEM_META: Record<
+  SidebarMenuItemPref["id"],
+  { icon: IconSvgElement; labelKey: TranslationKey }
+> = {
+  api: { icon: Globe02Icon, labelKey: "shell.navigation.api" },
+  darkMode: { icon: Moon02Icon, labelKey: "settings.appearance.sidebarMenu.darkModeToggle" },
+  guidedTour: { icon: CursorInfo02Icon, labelKey: "shell.navigation.guidedTour" },
+  profile: { icon: UserIcon, labelKey: "settings.tabs.profile" },
+  appearance: { icon: PaintBrush02Icon, labelKey: "settings.tabs.appearance" },
+  resources: { icon: CpuIcon, labelKey: "settings.tabs.resources" },
+  chat: { icon: Message01Icon, labelKey: "settings.tabs.chat" },
+  connections: { icon: CloudIcon, labelKey: "settings.tabs.connections" },
+};
+
+function FixedRow({ icon, label }: { icon: IconSvgElement; label: string }) {
+  return (
+    <div className="flex h-9 items-center gap-2.5 rounded-lg px-2 text-muted-foreground/70">
+      {/* Spacer where the drag handle sits on movable rows. */}
+      <span className="size-4" aria-hidden="true" />
+      <HugeiconsIcon icon={icon} strokeWidth={1.75} className="size-4" />
+      <span className="text-[13px]">{label}</span>
+    </div>
+  );
+}
+
+function MovableRow({ item }: { item: SidebarMenuItemPref }) {
+  const t = useT();
+  const controls = useDragControls();
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  const sidebarMenu = useAppearanceCustomStore(
+    (s) => s.customization.sidebarMenu,
+  );
+  const meta = ITEM_META[item.id];
+  return (
+    <Reorder.Item
+      value={item.id}
+      dragListener={false}
+      dragControls={controls}
+      layout="position"
+      // Rows sit flat on the dialog surface; the dragged row lifts above its
+      // siblings so it stays readable while crossing them.
+      whileDrag={{
+        backgroundColor: "var(--popover)",
+        boxShadow: "0 4px 16px rgb(0 0 0 / 0.18)",
+        zIndex: 10,
+      }}
+      className="relative flex h-9 items-center gap-2.5 rounded-lg px-2"
+    >
+      <button
+        type="button"
+        aria-label={t("settings.appearance.sidebarMenu.dragToReorder")}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          controls.start(e);
+        }}
+        className="flex size-4 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground active:cursor-grabbing"
+      >
+        <HugeiconsIcon
+          icon={DragDropVerticalIcon}
+          strokeWidth={1.75}
+          className="size-4"
+        />
+      </button>
+      <HugeiconsIcon
+        icon={meta.icon}
+        strokeWidth={1.75}
+        className="size-4 text-foreground/80"
+      />
+      <span className="text-[13px] text-foreground">{t(meta.labelKey)}</span>
+      <Switch
+        className="ml-auto"
+        checked={item.visible}
+        onCheckedChange={(visible) =>
+          patch({
+            sidebarMenu: sidebarMenu.map((entry) =>
+              entry.id === item.id ? { ...entry, visible } : entry,
+            ),
+          })
+        }
+      />
+    </Reorder.Item>
+  );
+}
+
+/**
+ * Show/hide and reorder the optional sidebar profile menu items. The pinned
+ * entries (Settings on top; Help, Log out, Shutdown below) are rendered as
+ * static rows so the final menu layout is obvious.
+ */
+export function SidebarMenuCustomizer() {
+  const t = useT();
+  const sidebarMenu = useAppearanceCustomStore(
+    (s) => s.customization.sidebarMenu,
+  );
+  const patch = useAppearanceCustomStore((s) => s.patch);
+  return (
+    <div className="flex flex-col rounded-xl border border-border/70 p-1.5">
+      <FixedRow icon={Settings02Icon} label={t("shell.navigation.settings")} />
+      <Reorder.Group
+        axis="y"
+        values={sidebarMenu.map((item) => item.id)}
+        onReorder={(ids: SidebarMenuItemPref["id"][]) =>
+          patch({
+            sidebarMenu: ids.flatMap(
+              (id) => sidebarMenu.find((entry) => entry.id === id) ?? [],
+            ),
+          })
+        }
+        className="flex flex-col"
+      >
+        {sidebarMenu.map((item) => (
+          <MovableRow key={item.id} item={item} />
+        ))}
+      </Reorder.Group>
+      <div className="mx-2 my-1 border-t border-border/70" />
+      <FixedRow icon={HelpCircleIcon} label={t("common.help")} />
+      <FixedRow icon={Logout05Icon} label={t("shell.navigation.logOut")} />
+      <FixedRow icon={PowerIcon} label={t("common.shutdown")} />
+    </div>
+  );
+}
diff --git a/studio/frontend/src/features/settings/components/usage-examples.tsx b/studio/frontend/src/features/settings/components/usage-examples.tsx
index b3396c8d9b..86125585cc 100644
--- a/studio/frontend/src/features/settings/components/usage-examples.tsx
+++ b/studio/frontend/src/features/settings/components/usage-examples.tsx
@@ -675,7 +675,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
               <TooltipTrigger asChild={true}>
                 <button
                   type="button"
-                  className="flex items-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="flex items-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   aria-label={t(
                     "settings.general.modelAutoSwitch.enableDescription",
                   )}
@@ -711,7 +711,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
                   <TooltipTrigger asChild={true}>
                     <button
                       type="button"
-                      className="flex items-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="flex items-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       aria-label={t("settings.apiKeys.secureHttpsHint")}
                     >
                       <HugeiconsIcon
@@ -730,7 +730,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
               type="button"
               onClick={handleCopyUrl}
               className={cn(
-                "flex min-w-0 items-center gap-1 rounded px-1.5 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "flex min-w-0 items-center gap-1 rounded px-1.5 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                 !useTunnel && "opacity-50",
               )}
               title={cloudflareUrl}
@@ -759,7 +759,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
                   onClick={() => setLang(tab.id)}
                   aria-pressed={active}
                   className={cn(
-                    "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     active
                       ? "hub-tab-toggle-pill text-foreground"
                       : "text-muted-foreground hover:text-foreground",
@@ -778,7 +778,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
               onClick={() => setOs("unix")}
               aria-pressed={os === "unix"}
               className={cn(
-                "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                 os === "unix"
                   ? "hub-tab-toggle-pill text-foreground"
                   : "text-muted-foreground hover:text-foreground",
@@ -791,7 +791,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
               onClick={() => setOs("windows")}
               aria-pressed={os === "windows"}
               className={cn(
-                "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                 os === "windows"
                   ? "hub-tab-toggle-pill text-foreground"
                   : "text-muted-foreground hover:text-foreground",
@@ -805,7 +805,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
           <button
             type="button"
             onClick={handleCopy}
-            className="absolute right-2 top-2 z-10 flex items-center gap-1 rounded border border-border bg-background/80 px-1.5 py-1 text-[11px] text-muted-foreground backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="absolute right-2 top-2 z-10 flex items-center gap-1 rounded border border-border bg-background/80 px-1.5 py-1 text-[11px] text-muted-foreground backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             aria-label={t("settings.apiKeys.copySnippet")}
           >
             <HugeiconsIcon
@@ -846,7 +846,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
                       : undefined
                   }
                   className={cn(
-                    "flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     active
                       ? "hub-tab-toggle-pill text-foreground"
                       : "text-muted-foreground hover:text-foreground",
@@ -870,7 +870,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
             <button
               type="button"
               onClick={handleCopyAgent}
-              className="absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1 rounded border border-border bg-background/80 px-1.5 py-0.5 text-[11px] text-muted-foreground backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1 rounded border border-border bg-background/80 px-1.5 py-0.5 text-[11px] text-muted-foreground backdrop-blur transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               aria-label={t("settings.apiKeys.copySnippet")}
             >
               <HugeiconsIcon
@@ -897,7 +897,7 @@ export function UsageExamples({ apiKey }: { apiKey?: string | null }) {
               href={link.href}
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center gap-0.5 rounded font-medium text-foreground underline decoration-border underline-offset-2 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="inline-flex items-center gap-0.5 rounded font-medium text-foreground underline decoration-border underline-offset-2 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             >
               {link.label}
               <HugeiconsIcon icon={ArrowUpRight01Icon} className="size-3" />
diff --git a/studio/frontend/src/features/settings/index.ts b/studio/frontend/src/features/settings/index.ts
index 3fefd8c63a..1e4d9d8844 100644
--- a/studio/frontend/src/features/settings/index.ts
+++ b/studio/frontend/src/features/settings/index.ts
@@ -6,7 +6,26 @@ export {
   loadPersonalization,
   savePersonalization,
 } from "./api/personalization";
-export { setTheme, useTheme } from "./stores/theme-store";
+export {
+  isPalette,
+  setPalette,
+  setTheme,
+  usePalette,
+  useTheme,
+} from "./stores/theme-store";
+export {
+  DEFAULT_CUSTOMIZATION,
+  applyCustomizationToDocument,
+  isDefaultCustomization,
+  prefersReducedMotion,
+  sanitizeCustomization,
+  useAppearanceCustomStore,
+} from "./stores/appearance-custom-store";
+export type {
+  AppearanceCustomization,
+  CustomModeColors,
+  ReduceMotionSetting,
+} from "./stores/appearance-custom-store";
 export { useMonitorOverlayStore } from "./stores/monitor-overlay-store";
 export type {
   Personalization,
@@ -15,4 +34,4 @@ export type {
 } from "./api/personalization";
 export { useSettingsDialogStore } from "./stores/settings-dialog-store";
 export type { SettingsTab } from "./stores/settings-dialog-store";
-export type { ResolvedTheme, Theme } from "./stores/theme-store";
+export type { Palette, ResolvedTheme, Theme } from "./stores/theme-store";
diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index d8a0d45d3f..d2f7c092f6 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
+import { FloatingMonitor } from "@/components/floating-monitor";
 import {
   Dialog,
   DialogContent,
@@ -17,12 +18,14 @@ import {
   HelpCircleIcon,
   Message01Icon,
   PaintBrush02Icon,
+  Search01Icon,
   Settings02Icon,
   UserIcon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { motion, useReducedMotion } from "motion/react";
-import { useEffect, useRef } from "react";
+import { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import { SETTINGS_SEARCH_INDEX } from "./settings-search";
 import {
   type SettingsTab,
   useSettingsDialogStore,
@@ -35,7 +38,6 @@ import { ConnectionsTab } from "./tabs/connections-tab";
 import { GeneralTab } from "./tabs/general-tab";
 import { ProfileTab } from "./tabs/profile-tab";
 import { ResourcesTab } from "./tabs/resources-tab";
-import { FloatingMonitor } from "@/components/floating-monitor";
 
 interface TabDef {
   id: SettingsTab;
@@ -106,6 +108,81 @@ export function SettingsDialog() {
   const closeDialog = useSettingsDialogStore((s) => s.closeDialog);
   const opener = useSettingsDialogStore((s) => s.opener);
   const reduced = useReducedMotion();
+  // Mounting a heavy tab panel (System, Connections) in the same commit as
+  // the nav highlight makes the highlight lag the click. Render the panel
+  // from a deferred value so the nav updates first.
+  const panelTab = useDeferredValue(activeTab);
+  const [query, setQuery] = useState("");
+
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return null;
+    return TABS.map((tab) => {
+      const tabLabel = t(tab.labelKey);
+      const entries = SETTINGS_SEARCH_INDEX[tab.id]
+        .map((key) => t(key))
+        .filter((label) => label.toLowerCase().includes(q));
+      const deduped = [...new Set(entries)];
+      return {
+        tab,
+        tabLabel,
+        entries: deduped,
+        tabMatches: tabLabel.toLowerCase().includes(q),
+      };
+    }).filter((r) => r.tabMatches || r.entries.length > 0);
+  }, [query, t]);
+
+  const [pendingScroll, setPendingScroll] = useState<{
+    tab: SettingsTab;
+    entry: string;
+  } | null>(null);
+  const mainScrollRef = useRef<HTMLDivElement | null>(null);
+
+  const openResult = (tab: SettingsTab, entry?: string) => {
+    setActiveTab(tab);
+    setQuery("");
+    setPendingScroll(entry ? { tab, entry } : null);
+  };
+
+  // Scroll to the row/section a search result points at once the tab has
+  // rendered, and flash it so the eye lands on the right place. The tab panel
+  // renders deferred, so retry across frames until the row exists instead of
+  // racing a single fixed delay (which silently missed under render lag).
+  useEffect(() => {
+    if (!pendingScroll) return;
+    // Wait until the destination tab is mounted before matching, so a same-named
+    // row in the previous tab (for example "Storage") is not scrolled to instead.
+    if (panelTab !== pendingScroll.tab) return;
+    let frame = 0;
+    let tries = 0;
+    const attempt = () => {
+      const root = mainScrollRef.current;
+      const target = root
+        ? [
+            ...root.querySelectorAll<HTMLElement>("[data-settings-label]"),
+          ].find((el) => el.dataset.settingsLabel === pendingScroll.entry)
+        : undefined;
+      if (target) {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+        target.classList.add("settings-search-hit");
+        window.setTimeout(
+          () => target.classList.remove("settings-search-hit"),
+          1600,
+        );
+        setPendingScroll(null);
+      } else if (tries++ < 30) {
+        frame = window.requestAnimationFrame(attempt);
+      } else {
+        setPendingScroll(null);
+      }
+    };
+    frame = window.requestAnimationFrame(attempt);
+    return () => window.cancelAnimationFrame(frame);
+  }, [pendingScroll, panelTab]);
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
   const tabButtonRefs = useRef<Record<SettingsTab, HTMLButtonElement | null>>({
     general: null,
     profile: null,
@@ -141,9 +218,9 @@ export function SettingsDialog() {
             }
           }}
           className={cn(
-            // Cap at 820px but shrink to the viewport so it doesn't clip on
-            // iPad-portrait widths (640-820px) where fixed `w-[820px]` overflows.
-            "settings-surface !max-w-[min(820px,calc(100vw-2rem))] h-[560px] w-[min(820px,calc(100vw-2rem))] p-0 overflow-hidden",
+            // Cap at 880px but shrink to the viewport so it doesn't clip on
+            // iPad-portrait widths where a fixed width overflows.
+            "settings-surface !max-w-[min(880px,calc(100vw-2rem))] h-[560px] w-[min(880px,calc(100vw-2rem))] p-0 overflow-hidden",
             // Soft shadow, no outline ring. Pin --radius to the light value so
             // corner rounding matches in dark mode.
             "shadow-border rounded-xl ring-0 [--radius:1.1rem]",
@@ -157,11 +234,87 @@ export function SettingsDialog() {
             {t("settings.dialog.description")}
           </DialogDescription>
           <div className="flex h-full min-h-0 max-sm:flex-col">
-            <aside className="font-heading flex w-[216px] shrink-0 flex-col border-r border-sidebar-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
-              <h2 className="pl-3 pr-2.5 pt-3.5 pb-3.5 text-[19px] font-semibold text-foreground max-sm:hidden">
+            <aside className="font-heading flex w-[248px] shrink-0 flex-col border-r border-sidebar-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
+              <div className="relative mx-1 mt-3 mb-2 max-sm:hidden">
+                <HugeiconsIcon
+                  icon={Search01Icon}
+                  strokeWidth={2}
+                  className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
+                />
+                <input
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Escape" && query) {
+                      e.stopPropagation();
+                      setQuery("");
+                    }
+                  }}
+                  placeholder={t("settings.dialog.searchPlaceholder")}
+                  aria-label={t("settings.dialog.searchPlaceholder")}
+                  className="h-8 w-full rounded-full border border-border bg-background pr-8 pl-8 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring dark:focus-visible:border-transparent dark:focus-visible:bg-white/[0.12] dark:border-transparent dark:bg-white/[0.06]"
+                />
+                {query && (
+                  <button
+                    type="button"
+                    onClick={() => setQuery("")}
+                    aria-label={t("settings.dialog.closeAriaLabel")}
+                    className="absolute top-1/2 right-2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:text-foreground"
+                  >
+                    <HugeiconsIcon icon={Cancel01Icon} className="size-3.5" />
+                  </button>
+                )}
+              </div>
+              {results ? (
+                <div className="hover-scrollbar flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-1 pb-1 max-sm:hidden">
+                  {results.length === 0 ? (
+                    <p className="px-3 py-2 text-sm text-muted-foreground">
+                      {t("settings.dialog.searchNoResults")}
+                    </p>
+                  ) : (
+                    results.map(({ tab, tabLabel, entries }) => (
+                      <div key={tab.id} className="flex flex-col">
+                        <button
+                          type="button"
+                          onClick={() => openResult(tab.id)}
+                          className="flex h-[30px] items-center gap-2.5 rounded-full pl-3 pr-2.5 text-[13.5px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                        >
+                          <HugeiconsIcon
+                            icon={tab.icon}
+                            strokeWidth={1.75}
+                            className="size-icon shrink-0"
+                          />
+                          <span className="min-w-0 truncate">{tabLabel}</span>
+                        </button>
+                        {entries.map((entry) => (
+                          <button
+                            key={entry}
+                            type="button"
+                            onClick={() => openResult(tab.id, entry)}
+                            className="flex h-[30px] items-center rounded-full pl-10 pr-2.5 text-left text-[14px] text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                          >
+                            <span className="min-w-0 truncate">{entry}</span>
+                          </button>
+                        ))}
+                      </div>
+                    ))
+                  )}
+                </div>
+              ) : null}
+              <p
+                className={cn(
+                  "pl-4 pt-3 pb-2.5 text-[13px] font-medium text-muted-foreground max-sm:hidden",
+                  results !== null && "hidden",
+                )}
+              >
                 {t("settings.dialog.title")}
-              </h2>
-              <nav className="flex flex-col gap-0.5 max-sm:flex-row max-sm:overflow-x-auto">
+              </p>
+              <nav
+                className={cn(
+                  "flex flex-col gap-0.5 px-1 max-sm:flex-row max-sm:overflow-x-auto",
+                  results !== null && "max-sm:flex hidden",
+                )}
+              >
                 {TABS.map((tab) => {
                   const active = activeTab === tab.id;
                   return (
@@ -175,25 +328,27 @@ export function SettingsDialog() {
                       className={cn(
                         "relative flex h-[32px] items-center gap-2.5 rounded-full pl-3 pr-2.5 text-[14.5px] leading-[19px] tracking-nav font-medium transition-colors",
                         "max-sm:shrink-0",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                        "focus-visible:outline-none",
+                        // The active pill already marks the current tab, so
+                        // only unselected items get a keyboard focus ring.
                         active
-                          ? "text-black dark:text-white"
-                          : "text-[#383835] dark:text-[#c7c7c4] hover:bg-[#ececec] dark:hover:bg-[#3a3d43] hover:text-black dark:hover:text-white",
+                          ? "text-accent-foreground"
+                          : "text-[#383835] dark:text-[#c7c7c4] hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 focus-visible:ring-ring",
                       )}
                     >
                       {active && (
                         <motion.span
                           layoutId="settings-active-pill"
-                          className="absolute inset-0 rounded-full bg-[#ececec] dark:bg-[#3a3d43]"
+                          className="absolute inset-0 rounded-full bg-accent"
                           transition={
                             reduced
                               ? { duration: 0 }
                               : {
-                                type: "spring",
-                                stiffness: 500,
-                                damping: 35,
-                                mass: 0.5,
-                              }
+                                  type: "spring",
+                                  stiffness: 500,
+                                  damping: 35,
+                                  mass: 0.5,
+                                }
                           }
                         />
                       )}
@@ -206,7 +361,7 @@ export function SettingsDialog() {
                         {t(tab.labelKey)}
                       </span>
                       {tab.badgeKey ? (
-                        <span className="relative z-10 ml-auto rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] leading-none font-semibold text-emerald-700 dark:text-emerald-300">
+                        <span className="relative z-10 ml-auto rounded-full bg-control-accent/10 px-2 py-1 text-[10px] leading-none font-semibold text-control-accent">
                           {t(tab.badgeKey)}
                         </span>
                       ) : null}
@@ -220,13 +375,16 @@ export function SettingsDialog() {
               <button
                 type="button"
                 onClick={closeDialog}
-                className="absolute top-3 right-3 z-10 flex size-7 items-center justify-center rounded-full text-[#383835] dark:text-[#c7c7c4] transition-colors hover:bg-[#ececec] dark:hover:bg-[#3a3d43] hover:text-black dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="absolute top-3 right-3 z-10 flex size-7 items-center justify-center rounded-full text-[#383835] dark:text-[#c7c7c4] transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 aria-label={t("settings.dialog.closeAriaLabel")}
               >
                 <HugeiconsIcon icon={Cancel01Icon} className="size-4" />
               </button>
-              <div className="hover-scrollbar flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-6 [scrollbar-gutter:stable]">
-                {renderTab(activeTab)}
+              <div
+                ref={mainScrollRef}
+                className="hover-scrollbar flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-6 [scrollbar-gutter:stable]"
+              >
+                {renderTab(panelTab)}
               </div>
             </main>
           </div>
diff --git a/studio/frontend/src/features/settings/settings-search.ts b/studio/frontend/src/features/settings/settings-search.ts
new file mode 100644
index 0000000000..3c6577ab35
--- /dev/null
+++ b/studio/frontend/src/features/settings/settings-search.ts
@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import type { TranslationKey } from "@/i18n";
+import type { SettingsTab } from "./stores/settings-dialog-store";
+
+/**
+ * Searchable entries per tab: the label/title keys rendered by each tab.
+ * Tab names themselves always match, so tabs without translatable rows
+ * (profile, connections) are still reachable from search.
+ */
+export const SETTINGS_SEARCH_INDEX: Record<SettingsTab, TranslationKey[]> = {
+  general: [
+    "settings.general.account",
+    "settings.general.password",
+    "settings.general.huggingFaceToken",
+    "settings.general.gettingStarted",
+    "settings.general.startOnboarding",
+    "settings.general.storage.sectionTitle",
+    "settings.general.storage.modelsFolder",
+    "settings.appearance.language.title",
+    "settings.appearance.language.label",
+    "settings.general.notifications.sectionTitle",
+    "settings.general.notifications.showLlamaUpdates",
+    "settings.general.previewSharing.sectionTitle",
+    "settings.general.previewSharing.enableLabel",
+    "settings.general.previewSharing.revokeLabel",
+    "settings.general.rag.sectionTitle",
+    "settings.general.rag.embeddingModel",
+    "settings.general.helperLlm.sectionTitle",
+    "settings.general.helperLlm.preloadOnStartup",
+    "settings.general.uploads.sectionTitle",
+    "settings.general.uploads.maxUploadSize",
+    "settings.general.resetPreferences.sectionTitle",
+    "settings.general.resetPreferences.label",
+  ],
+  profile: [
+    "settings.profile.title",
+    "settings.profile.description",
+    "settings.profile.displayName",
+    "settings.profile.nickname",
+    "settings.profile.avatarShape",
+    "settings.profile.greetingSloth",
+  ],
+  appearance: [
+    "settings.appearance.theme.label",
+    "settings.appearance.palette.label",
+    "settings.appearance.custom.colors.accent",
+    "settings.appearance.custom.colors.background",
+    "settings.appearance.custom.colors.foreground",
+    "settings.appearance.custom.uiFont.label",
+    "settings.appearance.custom.headingFont.label",
+    "settings.appearance.custom.chatFont.label",
+    "settings.appearance.custom.codeFont.label",
+    "settings.appearance.custom.contrast.label",
+    "settings.appearance.custom.pointerCursors.label",
+    "settings.appearance.custom.reduceMotion.label",
+    "settings.appearance.custom.uiFontSize.label",
+    "settings.appearance.custom.codeFontSize.label",
+    "settings.appearance.custom.fontSmoothing.label",
+    "settings.appearance.custom.edgeFades.label",
+    "settings.appearance.layout.compactSidebar",
+    "settings.appearance.sidebarMenu.title",
+    "settings.appearance.sidebarMenu.darkModeToggle",
+  ],
+  resources: [
+    "settings.resources.liveMonitor.title",
+    "settings.resources.liveMonitor.cpu",
+    "settings.resources.liveMonitor.ram",
+    "settings.resources.liveMonitor.vram",
+    "settings.resources.liveMonitor.disk",
+    "settings.resources.gpu.title",
+    "settings.resources.storage.title",
+    "settings.resources.storage.modelsFolder",
+    "settings.resources.storage.systemDisk",
+    "settings.resources.environment.title",
+    "settings.resources.environment.backend",
+    "settings.resources.environment.python",
+    "settings.resources.environment.torch",
+    "settings.resources.environment.transformers",
+    "settings.resources.liveUpdates",
+  ],
+  chat: [
+    "settings.general.chatDefaults",
+    "settings.general.autoTitleNewChats",
+    "settings.chat.artifacts.title",
+    "settings.chat.artifacts.collapseHtmlBlocks",
+    "settings.chat.artifacts.allowNetworkAccess",
+    "settings.chat.data",
+    "settings.chat.exportConversations",
+    "settings.chat.importChats",
+    "settings.chat.clearAllChats",
+    "settings.chat.exportHistory",
+    "settings.chat.modelDisclaimer",
+  ],
+  "api-keys": [
+    "settings.apiKeys.title",
+    "settings.apiKeys.description",
+    "settings.apiKeys.accessTokens",
+  ],
+  connections: [],
+  about: [
+    "settings.about.updates",
+    "settings.about.releaseNotes",
+    "settings.about.documentation",
+    "settings.about.help",
+    "settings.about.feedback",
+    "settings.about.hardware",
+    "settings.about.license.sectionTitle",
+    "settings.about.dangerZone",
+    "settings.about.shutDownStudio",
+  ],
+};
diff --git a/studio/frontend/src/features/settings/stores/appearance-custom-store.ts b/studio/frontend/src/features/settings/stores/appearance-custom-store.ts
new file mode 100644
index 0000000000..e2b078843e
--- /dev/null
+++ b/studio/frontend/src/features/settings/stores/appearance-custom-store.ts
@@ -0,0 +1,569 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
+
+import { create } from "zustand";
+import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
+import type { ResolvedTheme } from "./theme-store";
+
+// Best-effort persistence: localStorage can be blocked (private browsing) and
+// zustand's persist write path is unguarded, so a throw would break a store
+// action. Swallow storage errors and keep the in-memory state.
+const guardedLocalStorage: StateStorage = {
+  getItem: (name) => {
+    try {
+      return window.localStorage.getItem(name);
+    } catch {
+      return null;
+    }
+  },
+  setItem: (name, value) => {
+    try {
+      window.localStorage.setItem(name, value);
+    } catch {
+      // ignore: the customization stays in memory for this session
+    }
+  },
+  removeItem: (name) => {
+    try {
+      window.localStorage.removeItem(name);
+    } catch {
+      // ignore
+    }
+  },
+};
+
+export type ReduceMotionSetting = "system" | "on" | "off";
+
+export type CustomModeColors = {
+  accent: string | null;
+  background: string | null;
+  foreground: string | null;
+};
+
+export type ImportedFont = {
+  /** Font-family name the FontFace is registered under. */
+  name: string;
+  /** data: URL of the uploaded font file. */
+  dataUrl: string;
+};
+
+/**
+ * Optional entries of the sidebar profile menu. Settings, Help, Log out, and
+ * Shutdown are pinned and never appear here. The settings-tab shortcuts ship
+ * hidden; General and About are covered by the pinned Settings and Help.
+ */
+export const SIDEBAR_MENU_ITEM_IDS = [
+  "api",
+  "darkMode",
+  "guidedTour",
+  "profile",
+  "appearance",
+  "resources",
+  "chat",
+  "connections",
+] as const;
+
+export type SidebarMenuItemId = (typeof SIDEBAR_MENU_ITEM_IDS)[number];
+
+export type SidebarMenuItemPref = {
+  id: SidebarMenuItemId;
+  visible: boolean;
+};
+
+export const SIDEBAR_MENU_DEFAULT_VISIBLE: Record<SidebarMenuItemId, boolean> =
+  {
+    api: true,
+    darkMode: true,
+    guidedTour: true,
+    profile: false,
+    appearance: false,
+    resources: false,
+    chat: false,
+    connections: false,
+  };
+
+export const MAX_IMPORTED_FONTS = 3;
+/** Imported-font family name cap; must match the backend name max_length (100). */
+export const MAX_IMPORTED_FONT_NAME_LENGTH = 100;
+/** ~1.5 MB file → ~2 MB base64; must stay in sync with the backend cap. */
+export const MAX_IMPORTED_FONT_DATA_URL_LENGTH = 2_200_000;
+/**
+ * Aggregate cap across all imported fonts. localStorage quotas are commonly
+ * ~5M UTF-16 units per origin; staying under that keeps the persisted store
+ * writable even with other keys present.
+ */
+export const MAX_TOTAL_IMPORTED_FONT_DATA_URL_LENGTH = 4_400_000;
+
+export type AppearanceCustomization = {
+  colors: { light: CustomModeColors; dark: CustomModeColors };
+  uiFont: string | null;
+  headingFont: string | null;
+  chatFont: string | null;
+  codeFont: string | null;
+  importedFonts: ImportedFont[];
+  /** Root font size in px (rem base). null = browser default (16). */
+  uiFontSize: number | null;
+  /** Code/pre font size in px. null = inherit each element's own size. */
+  codeFontSize: number | null;
+  /** 0–100; 50 is neutral (no adjustment). */
+  contrast: number;
+  pointerCursors: boolean;
+  reduceMotion: ReduceMotionSetting;
+  /** true = the app default (antialiased). */
+  fontSmoothing: boolean;
+  /** true = content dissolves at panel edges; false = thin divider lines. */
+  edgeFades: boolean;
+  /** Order and visibility of the optional sidebar profile menu items. */
+  sidebarMenu: SidebarMenuItemPref[];
+};
+
+const EMPTY_MODE_COLORS: CustomModeColors = {
+  accent: null,
+  background: null,
+  foreground: null,
+};
+
+export const DEFAULT_CUSTOMIZATION: AppearanceCustomization = {
+  colors: { light: { ...EMPTY_MODE_COLORS }, dark: { ...EMPTY_MODE_COLORS } },
+  uiFont: null,
+  headingFont: null,
+  chatFont: null,
+  codeFont: null,
+  importedFonts: [],
+  uiFontSize: null,
+  codeFontSize: null,
+  contrast: 50,
+  pointerCursors: false,
+  reduceMotion: "system",
+  fontSmoothing: true,
+  edgeFades: true,
+  sidebarMenu: SIDEBAR_MENU_ITEM_IDS.map((id) => ({
+    id,
+    visible: SIDEBAR_MENU_DEFAULT_VISIBLE[id],
+  })),
+};
+
+export const UI_FONT_SIZE_RANGE = { min: 12, max: 20, default: 16 } as const;
+export const CODE_FONT_SIZE_RANGE = { min: 10, max: 20, default: 13 } as const;
+
+const HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;
+
+export function isHexColor(value: unknown): value is string {
+  return typeof value === "string" && HEX_COLOR_PATTERN.test(value);
+}
+
+function sanitizeColor(value: unknown): string | null {
+  return isHexColor(value) ? value.toLowerCase() : null;
+}
+
+function sanitizeFont(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  // Strip the same characters the backend rejects (_FONT_NAME_FORBIDDEN plus
+  // control chars) so a locally chosen name never fails the personalization PUT
+  // and stalls sync; also stops smuggling CSS through the inline setProperty.
+  const cleaned = value
+    .replace(/[;{}()<>"'\\/,`]/g, "")
+    .replace(/\p{Cc}/gu, "")
+    .trim()
+    .slice(0, 200);
+  return cleaned.length > 0 ? cleaned : null;
+}
+
+function sanitizeSize(
+  value: unknown,
+  range: { min: number; max: number },
+): number | null {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  const rounded = Math.round(value);
+  if (rounded < range.min || rounded > range.max) {
+    return Math.min(range.max, Math.max(range.min, rounded));
+  }
+  return rounded;
+}
+
+function sanitizeModeColors(value: unknown): CustomModeColors {
+  const source = (value ?? {}) as Partial<CustomModeColors>;
+  return {
+    accent: sanitizeColor(source.accent),
+    background: sanitizeColor(source.background),
+    foreground: sanitizeColor(source.foreground),
+  };
+}
+
+const FONT_DATA_URL_PATTERN =
+  /^data:(?:font\/(?:woff2?|ttf|otf|sfnt)|application\/(?:octet-stream|x-font-\w+|font-\w+));base64,[A-Za-z0-9+/=]+$/;
+
+function sanitizeImportedFonts(value: unknown): ImportedFont[] {
+  if (!Array.isArray(value)) return [];
+  const fonts: ImportedFont[] = [];
+  const seen = new Set<string>();
+  let total = 0;
+  for (const entry of value) {
+    if (fonts.length >= MAX_IMPORTED_FONTS) break;
+    const source = (entry ?? {}) as Partial<ImportedFont>;
+    // Cap to the backend name length so an over-long name can't fail the PUT.
+    const rawName = sanitizeFont(source.name);
+    const name = rawName ? rawName.slice(0, MAX_IMPORTED_FONT_NAME_LENGTH) : null;
+    if (!name || seen.has(name)) continue;
+    const dataUrl = source.dataUrl;
+    if (
+      typeof dataUrl !== "string" ||
+      dataUrl.length > MAX_IMPORTED_FONT_DATA_URL_LENGTH ||
+      total + dataUrl.length > MAX_TOTAL_IMPORTED_FONT_DATA_URL_LENGTH ||
+      !FONT_DATA_URL_PATTERN.test(dataUrl)
+    ) {
+      continue;
+    }
+    seen.add(name);
+    total += dataUrl.length;
+    fonts.push({ name, dataUrl });
+  }
+  return fonts;
+}
+
+function isSidebarMenuItemId(value: unknown): value is SidebarMenuItemId {
+  return SIDEBAR_MENU_ITEM_IDS.includes(value as SidebarMenuItemId);
+}
+
+function sanitizeSidebarMenu(value: unknown): SidebarMenuItemPref[] {
+  const items: SidebarMenuItemPref[] = [];
+  const seen = new Set<SidebarMenuItemId>();
+  for (const entry of Array.isArray(value) ? value : []) {
+    const source = (entry ?? {}) as Partial<SidebarMenuItemPref>;
+    if (!isSidebarMenuItemId(source.id) || seen.has(source.id)) continue;
+    seen.add(source.id);
+    items.push({ id: source.id, visible: source.visible !== false });
+  }
+  // Ids added after the payload was written land at the end with their
+  // default visibility.
+  for (const id of SIDEBAR_MENU_ITEM_IDS) {
+    if (!seen.has(id))
+      items.push({ id, visible: SIDEBAR_MENU_DEFAULT_VISIBLE[id] });
+  }
+  return items;
+}
+
+/**
+ * Coerce arbitrary (persisted/remote) data into a valid customization object.
+ * Anything malformed falls back to the default for that field, so a bad
+ * payload can never wedge the UI.
+ */
+export function sanitizeCustomization(value: unknown): AppearanceCustomization {
+  const source = (value ?? {}) as Partial<AppearanceCustomization> & {
+    colors?: { light?: unknown; dark?: unknown };
+  };
+  const contrast =
+    typeof source.contrast === "number" && Number.isFinite(source.contrast)
+      ? Math.min(100, Math.max(0, Math.round(source.contrast)))
+      : DEFAULT_CUSTOMIZATION.contrast;
+  return {
+    colors: {
+      light: sanitizeModeColors(source.colors?.light),
+      dark: sanitizeModeColors(source.colors?.dark),
+    },
+    uiFont: sanitizeFont(source.uiFont),
+    headingFont: sanitizeFont(source.headingFont),
+    chatFont: sanitizeFont(source.chatFont),
+    codeFont: sanitizeFont(source.codeFont),
+    importedFonts: sanitizeImportedFonts(source.importedFonts),
+    uiFontSize: sanitizeSize(source.uiFontSize, UI_FONT_SIZE_RANGE),
+    codeFontSize: sanitizeSize(source.codeFontSize, CODE_FONT_SIZE_RANGE),
+    contrast,
+    pointerCursors: source.pointerCursors === true,
+    reduceMotion:
+      source.reduceMotion === "on" || source.reduceMotion === "off"
+        ? source.reduceMotion
+        : "system",
+    fontSmoothing: source.fontSmoothing !== false,
+    edgeFades: source.edgeFades !== false,
+    sidebarMenu: sanitizeSidebarMenu(source.sidebarMenu),
+  };
+}
+
+export function isDefaultCustomization(c: AppearanceCustomization): boolean {
+  return JSON.stringify(c) === JSON.stringify(DEFAULT_CUSTOMIZATION);
+}
+
+interface AppearanceCustomState {
+  customization: AppearanceCustomization;
+  setColor: (
+    mode: ResolvedTheme,
+    key: keyof CustomModeColors,
+    value: string | null,
+  ) => void;
+  patch: (partial: Partial<AppearanceCustomization>) => void;
+  addImportedFont: (font: ImportedFont) => void;
+  removeImportedFont: (name: string) => void;
+  replaceAll: (next: AppearanceCustomization) => void;
+  resetAll: () => void;
+}
+
+export const useAppearanceCustomStore = create<AppearanceCustomState>()(
+  persist(
+    (set) => ({
+      customization: DEFAULT_CUSTOMIZATION,
+      setColor: (mode, key, value) =>
+        set((state) => ({
+          customization: {
+            ...state.customization,
+            colors: {
+              ...state.customization.colors,
+              [mode]: {
+                ...state.customization.colors[mode],
+                [key]: sanitizeColor(value),
+              },
+            },
+          },
+        })),
+      patch: (partial) =>
+        set((state) => ({
+          customization: sanitizeCustomization({
+            ...state.customization,
+            ...partial,
+          }),
+        })),
+      addImportedFont: (font) =>
+        set((state) => ({
+          customization: sanitizeCustomization({
+            ...state.customization,
+            importedFonts: [
+              ...state.customization.importedFonts.filter(
+                (f) => f.name !== font.name,
+              ),
+              font,
+            ],
+          }),
+        })),
+      removeImportedFont: (name) =>
+        set((state) => {
+          const c = state.customization;
+          return {
+            customization: sanitizeCustomization({
+              ...c,
+              importedFonts: c.importedFonts.filter((f) => f.name !== name),
+              // Fall back to the default font wherever the removed one was in use.
+              uiFont: c.uiFont === name ? null : c.uiFont,
+              headingFont: c.headingFont === name ? null : c.headingFont,
+              chatFont: c.chatFont === name ? null : c.chatFont,
+              codeFont: c.codeFont === name ? null : c.codeFont,
+            }),
+          };
+        }),
+      replaceAll: (next) => set({ customization: sanitizeCustomization(next) }),
+      resetAll: () => set({ customization: DEFAULT_CUSTOMIZATION }),
+    }),
+    {
+      name: "unsloth_appearance_customization",
+      version: 2,
+      storage: createJSONStorage(() => guardedLocalStorage),
+      migrate: (persisted) => {
+        const state = (persisted ?? {}) as Partial<AppearanceCustomState>;
+        return {
+          customization: sanitizeCustomization(state.customization),
+        } as AppearanceCustomState;
+      },
+      // Sanitize on EVERY rehydrate, not just version bumps: a same-version
+      // payload written by an older bundle (e.g. before importedFonts existed)
+      // would otherwise reach the app with missing fields and crash .map calls.
+      merge: (persisted, current) => ({
+        ...current,
+        customization: sanitizeCustomization(
+          (persisted as Partial<AppearanceCustomState> | undefined)
+            ?.customization,
+        ),
+      }),
+    },
+  ),
+);
+
+/* ------------------------------ DOM applier ------------------------------ */
+
+const DEFAULT_SANS_STACK =
+  '"Inter Variable", ui-sans-serif, sans-serif, system-ui';
+const DEFAULT_HEADING_STACK =
+  '"Hellix", "Space Grotesk Variable", var(--font-sans)';
+const DEFAULT_MONO_STACK = "JetBrains Mono, monospace";
+
+/** WCAG-ish relative luminance from a #rrggbb hex. */
+function hexLuminance(hex: string): number {
+  const channel = (i: number) => {
+    const c = Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
+}
+
+function readableForeground(hex: string): string {
+  return hexLuminance(hex) > 0.45 ? "#111417" : "#ffffff";
+}
+
+/**
+ * FontFaces registered for imported fonts, keyed by family name. The dataUrl is
+ * tracked too so a re-import under the same name (new bytes) replaces the face.
+ */
+const registeredFontFaces = new Map<string, { face: FontFace; dataUrl: string }>();
+
+function syncImportedFonts(fonts: ImportedFont[]): void {
+  if (typeof document === "undefined" || !("fonts" in document)) return;
+  // Never trust the shape at this boundary: a stale
+  // persisted payload without importedFonts must not crash the applier.
+  const wanted = new Map(
+    (Array.isArray(fonts) ? fonts : []).map((f) => [f.name, f.dataUrl]),
+  );
+  // Drop faces whose name is gone OR whose bytes changed: document.fonts is a
+  // set of FontFace objects, not keyed by family, so a stale face must be
+  // deleted before the new bytes are added.
+  for (const [name, entry] of registeredFontFaces) {
+    if (wanted.get(name) !== entry.dataUrl) {
+      document.fonts.delete(entry.face);
+      registeredFontFaces.delete(name);
+    }
+  }
+  for (const [name, dataUrl] of wanted) {
+    if (registeredFontFaces.has(name)) continue;
+    try {
+      const face = new FontFace(name, `url(${dataUrl})`);
+      registeredFontFaces.set(name, { face, dataUrl });
+      document.fonts.add(face);
+      face.load().catch(() => {
+        document.fonts.delete(face);
+        // Only drop the entry if it still points at THIS face; a same-name
+        // re-import may have replaced it while this load was pending.
+        if (registeredFontFaces.get(name)?.face === face) {
+          registeredFontFaces.delete(name);
+        }
+      });
+    } catch {
+      registeredFontFaces.delete(name);
+    }
+  }
+}
+
+/**
+ * The custom "Accent" recolors the accent family (toggles, badges, chart-1).
+ * Focus/selection rings and button colors (--primary) are deliberately left
+ * alone: highlight borders stay neutral and Classic's buttons stay neutral.
+ */
+const ACCENT_VARS = ["--control-accent", "--chart-1"] as const;
+const ACCENT_FG_VARS = ["--control-accent-foreground"] as const;
+
+/**
+ * Push the customization onto <html> as inline CSS variables, attributes, and
+ * classes. Everything is keyed off explicit hooks (inline vars beat every
+ * palette block; the classes/attributes gate rules in index.css), so the
+ * default customization leaves the document byte-identical to stock.
+ */
+export function applyCustomizationToDocument(
+  c: AppearanceCustomization,
+  resolved: ResolvedTheme,
+): void {
+  if (typeof document === "undefined") return;
+  const el = document.documentElement;
+  const style = el.style;
+
+  const setVar = (name: string, value: string | null) => {
+    if (value === null) style.removeProperty(name);
+    else style.setProperty(name, value);
+  };
+
+  const colors = c.colors[resolved];
+
+  for (const name of ACCENT_VARS) setVar(name, colors.accent);
+  for (const name of ACCENT_FG_VARS) {
+    setVar(name, colors.accent ? readableForeground(colors.accent) : null);
+  }
+  setVar("--background", colors.background);
+  setVar("--foreground", colors.foreground);
+
+  syncImportedFonts(c.importedFonts);
+
+  // Family names are single identifiers picked from the dropdown (sanitizeFont
+  // strips quote characters), so quoting here is always safe.
+  setVar(
+    "--font-sans",
+    c.uiFont ? `"${c.uiFont}", ${DEFAULT_SANS_STACK}` : null,
+  );
+  setVar(
+    "--font-heading",
+    c.headingFont ? `"${c.headingFont}", ${DEFAULT_HEADING_STACK}` : null,
+  );
+  // Only set while a heading font is chosen, so elements pinned to their
+  // own default (the chat greeting) can still follow the user's pick.
+  setVar(
+    "--custom-heading-font",
+    c.headingFont ? `"${c.headingFont}", ${DEFAULT_HEADING_STACK}` : null,
+  );
+  setVar(
+    "--font-mono",
+    c.codeFont ? `"${c.codeFont}", ${DEFAULT_MONO_STACK}` : null,
+  );
+  // Chat code fences/inline code default to Fira Code (index.css), not
+  // --font-mono; route a dedicated token so the Code font reaches them too.
+  setVar(
+    "--custom-code-font",
+    c.codeFont ? `"${c.codeFont}", "Fira Code", ui-monospace, monospace` : null,
+  );
+
+  if (c.chatFont) {
+    el.setAttribute("data-chat-font", "");
+    setVar("--custom-chat-font", `"${c.chatFont}", ${DEFAULT_SANS_STACK}`);
+  } else {
+    el.removeAttribute("data-chat-font");
+    setVar("--custom-chat-font", null);
+  }
+
+  if (c.uiFontSize !== null && c.uiFontSize !== UI_FONT_SIZE_RANGE.default) {
+    style.fontSize = `${c.uiFontSize}px`;
+  } else {
+    style.removeProperty("font-size");
+  }
+
+  if (c.codeFontSize !== null) {
+    el.setAttribute("data-code-font-size", "");
+    setVar("--custom-code-font-size", `${c.codeFontSize}px`);
+  } else {
+    el.removeAttribute("data-code-font-size");
+    setVar("--custom-code-font-size", null);
+  }
+
+  if (c.contrast !== 50) {
+    // Map |contrast - 50| ∈ (0, 50] onto a 0–40% color-mix toward the
+    // foreground (higher contrast) or background (lower contrast).
+    const mix = Math.round(Math.abs(c.contrast - 50) * 0.8);
+    el.setAttribute("data-contrast-adjust", "");
+    setVar("--contrast-mix", `${mix}%`);
+    setVar(
+      "--contrast-target",
+      c.contrast > 50 ? "var(--foreground)" : "var(--background)",
+    );
+  } else {
+    el.removeAttribute("data-contrast-adjust");
+    setVar("--contrast-mix", null);
+    setVar("--contrast-target", null);
+  }
+
+  el.classList.toggle("pointer-cursors", c.pointerCursors);
+  el.classList.toggle("force-reduced-motion", c.reduceMotion === "on");
+  // "off" opts out of the OS reduced-motion preference for CSS animations;
+  // the media rules in index.css skip html.force-motion.
+  el.classList.toggle("force-motion", c.reduceMotion === "off");
+  el.classList.toggle("no-font-smoothing", !c.fontSmoothing);
+  // Off swaps the scroll-edge dissolves for thin divider lines (index.css
+  // and hub.css key their fade rules off this class).
+  el.classList.toggle("no-edge-fades", !c.edgeFades);
+}
+
+/**
+ * Resolved reduce-motion decision: the in-app setting wins ("on"/"off"),
+ * otherwise fall back to the OS preference. For imperative motion
+ * (canvas-confetti, view transitions) that CSS/MotionConfig cannot reach.
+ */
+export function prefersReducedMotion(): boolean {
+  const setting = useAppearanceCustomStore.getState().customization.reduceMotion;
+  if (setting === "on") return true;
+  if (setting === "off") return false;
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
+  );
+}
diff --git a/studio/frontend/src/features/settings/stores/theme-store.ts b/studio/frontend/src/features/settings/stores/theme-store.ts
index 6a1275fb6f..603467969f 100644
--- a/studio/frontend/src/features/settings/stores/theme-store.ts
+++ b/studio/frontend/src/features/settings/stores/theme-store.ts
@@ -5,8 +5,30 @@ import { useSyncExternalStore } from "react";
 
 export type Theme = "light" | "dark" | "system";
 export type ResolvedTheme = "light" | "dark";
+export type Palette = "standard" | "classic" | "minimal";
 
 const STORAGE_KEY = "theme";
+const PALETTE_STORAGE_KEY = "palette";
+
+export const PALETTES: readonly Palette[] = ["standard", "classic", "minimal"];
+
+export function isPalette(value: unknown): value is Palette {
+  return value === "standard" || value === "classic" || value === "minimal";
+}
+
+// Persist a re-derived literal from a fixed allow-list rather than the argument,
+// so a value arriving via the authenticated personalization sync is not tracked
+// as sensitive data flowing into storage (these are plain UI preferences).
+const STORED_THEME: Record<Theme, Theme> = {
+  light: "light",
+  dark: "dark",
+  system: "system",
+};
+const STORED_PALETTE: Record<Palette, Palette> = {
+  standard: "standard",
+  classic: "classic",
+  minimal: "minimal",
+};
 
 function readStoredTheme(): Theme {
   if (typeof window === "undefined") return "system";
@@ -16,10 +38,29 @@ function readStoredTheme(): Theme {
   } catch {
     return "system";
   }
-  if (stored === "light" || stored === "dark" || stored === "system") return stored;
+  if (stored === "light" || stored === "dark" || stored === "system")
+    return stored;
   return "system";
 }
 
+function readStoredPalette(): Palette {
+  if (typeof window === "undefined") return "standard";
+  let stored: string | null = null;
+  try {
+    stored = window.localStorage.getItem(PALETTE_STORAGE_KEY);
+  } catch {
+    return "standard";
+  }
+  return isPalette(stored) ? stored : "standard";
+}
+
+// In-memory source of truth so a selected value survives even when
+// localStorage is blocked (private browsing). Without it the snapshots would
+// re-read empty storage and revert React state to the default while the DOM
+// already changed.
+let currentTheme: Theme = readStoredTheme();
+let currentPalette: Palette = readStoredPalette();
+
 function systemPrefersDark(): boolean {
   if (typeof window === "undefined") return false;
   return window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -32,11 +73,23 @@ function resolveTheme(theme: Theme): ResolvedTheme {
 
 function applyToDocument(resolved: ResolvedTheme) {
   if (typeof document === "undefined") return;
-  // Keep "dark"/"light" mutually exclusive: next-themes (via Sonner) adds
-  // "light" on first mount, so without this toggle we'd get "light dark".
-  const cl = document.documentElement.classList;
-  cl.toggle("dark", resolved === "dark");
-  cl.toggle("light", resolved === "light");
+  const el = document.documentElement;
+  el.classList.toggle("dark", resolved === "dark");
+  el.classList.toggle("light", resolved === "light");
+  // Native controls (scrollbars, spinners, pickers) follow the app mode.
+  el.style.colorScheme = resolved;
+}
+
+function applyPaletteToDocument(palette: Palette) {
+  if (typeof document === "undefined") return;
+  const el = document.documentElement;
+  // Standard is the base :root/.dark palette; no attribute keeps the DOM
+  // (and CSS selectors) simple for the default look.
+  if (palette === "standard") {
+    el.removeAttribute("data-palette");
+  } else {
+    el.setAttribute("data-palette", palette);
+  }
 }
 
 const listeners = new Set<() => void>();
@@ -46,36 +99,58 @@ function subscribe(cb: () => void) {
     return () => listeners.delete(cb);
   }
   const mq = window.matchMedia("(prefers-color-scheme: dark)");
-  const syncTheme = () => {
-    applyToDocument(resolveTheme(readStoredTheme()));
+  // OS scheme flip: only the resolved value changes; keep the in-memory choice
+  // (re-reading storage here would clobber it when storage is blocked).
+  const onSchemeChange = () => {
+    applyToDocument(resolveTheme(currentTheme));
     cb();
   };
-  // Apply on mount so this store is the single source of truth for the DOM
-  // class. Without this, initial paint depends solely on next-themes, which on
-  // a fresh origin (e.g. a new Cloudflare --secure link with empty
-  // localStorage) falls back to its own default and shows light while the
-  // control still reads "system".
-  applyToDocument(resolveTheme(readStoredTheme()));
+  // Another tab wrote storage (only fires when storage is available): adopt it.
   const onStorage = (e: StorageEvent) => {
-    if (e.key === STORAGE_KEY || e.key === null) syncTheme();
+    if (
+      e.key === STORAGE_KEY ||
+      e.key === PALETTE_STORAGE_KEY ||
+      e.key === null
+    ) {
+      currentTheme = readStoredTheme();
+      currentPalette = readStoredPalette();
+      applyToDocument(resolveTheme(currentTheme));
+      applyPaletteToDocument(currentPalette);
+      cb();
+    }
   };
-  mq.addEventListener("change", syncTheme);
+  // Apply on mount so this store is the single source of truth for the DOM
+  // class after the index.html bootstrap script painted the first frame.
+  applyToDocument(resolveTheme(currentTheme));
+  applyPaletteToDocument(currentPalette);
+  mq.addEventListener("change", onSchemeChange);
   window.addEventListener("storage", onStorage);
   return () => {
     listeners.delete(cb);
-    mq.removeEventListener("change", syncTheme);
+    mq.removeEventListener("change", onSchemeChange);
     window.removeEventListener("storage", onStorage);
   };
 }
 
 function getSnapshot(): Theme {
-  return readStoredTheme();
+  return currentTheme;
 }
 
 function getServerSnapshot(): Theme {
   return "system";
 }
 
+// Snapshot the RESOLVED mode too: under "system" the theme string never
+// changes when the OS scheme flips, so consumers keyed on `resolved`
+// (customization applier, mode-scoped settings) would not re-render.
+function getResolvedSnapshot(): ResolvedTheme {
+  return resolveTheme(currentTheme);
+}
+
+function getResolvedServerSnapshot(): ResolvedTheme {
+  return "light";
+}
+
 /**
  * Single source of truth for setting the theme. All writers (Settings dialog
  * control, sidebar dropdown toggler) route through this so the DOM class,
@@ -83,10 +158,10 @@ function getServerSnapshot(): Theme {
  */
 export function setTheme(next: Theme): void {
   if (typeof window === "undefined") return;
-  // Persist "system" explicitly so next-themes doesn't clobber the choice on
-  // reload.
+  currentTheme = next;
+  // Persist "system" explicitly so a reload keeps following the OS.
   try {
-    window.localStorage.setItem(STORAGE_KEY, next);
+    window.localStorage.setItem(STORAGE_KEY, STORED_THEME[next]);
   } catch {
     // ignore storage failures
   }
@@ -100,6 +175,47 @@ export function useTheme(): {
   setTheme: (next: Theme) => void;
 } {
   const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  const resolved = resolveTheme(theme);
+  const resolved = useSyncExternalStore(
+    subscribe,
+    getResolvedSnapshot,
+    getResolvedServerSnapshot,
+  );
   return { theme, resolved, setTheme };
 }
+
+function getPaletteSnapshot(): Palette {
+  return currentPalette;
+}
+
+function getPaletteServerSnapshot(): Palette {
+  return "standard";
+}
+
+/**
+ * Single source of truth for setting the color palette; mirrors setTheme so
+ * the data-palette attribute, localStorage, and React subscribers stay in
+ * sync.
+ */
+export function setPalette(next: Palette): void {
+  if (typeof window === "undefined") return;
+  currentPalette = next;
+  try {
+    window.localStorage.setItem(PALETTE_STORAGE_KEY, STORED_PALETTE[next]);
+  } catch {
+    // ignore storage failures
+  }
+  applyPaletteToDocument(next);
+  listeners.forEach((cb) => cb());
+}
+
+export function usePalette(): {
+  palette: Palette;
+  setPalette: (next: Palette) => void;
+} {
+  const palette = useSyncExternalStore(
+    subscribe,
+    getPaletteSnapshot,
+    getPaletteServerSnapshot,
+  );
+  return { palette, setPalette };
+}
diff --git a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
index af4f9959c8..47f0f974e6 100644
--- a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx
@@ -4,13 +4,34 @@
 import { Switch } from "@/components/ui/switch";
 import { useSidebarPin } from "@/hooks/use-sidebar-pin";
 import { useT } from "@/i18n";
-import { LanguageSelect } from "../components/language-select";
+import {
+  ActiveColorControl,
+  ChatFontRow,
+  CodeFontRow,
+  CodeFontSizeRow,
+  ContrastSliderRow,
+  EdgeFadesSwitch,
+  FontSmoothingSwitch,
+  HeadingFontRow,
+  PointerCursorsSwitch,
+  ReduceMotionSegmented,
+  ResetCustomizationButton,
+  UiFontRow,
+  UiFontSizeRow,
+} from "../components/appearance-custom-controls";
+import { PaletteCards } from "../components/palette-cards";
 import { SettingsRow } from "../components/settings-row";
-import { SettingsSection } from "../components/settings-section";
+import { SidebarMenuCustomizer } from "../components/sidebar-menu-customizer";
+import {
+  SettingsGroupDivider,
+  SettingsSection,
+} from "../components/settings-section";
 import { ThemeSegmented } from "../components/theme-segmented";
+import { useTheme } from "../stores/theme-store";
 
 export function AppearanceTab() {
   const t = useT();
+  const { resolved } = useTheme();
   const { pinned, setPinned } = useSidebarPin();
   return (
     <div className="flex flex-col gap-6">
@@ -30,25 +51,125 @@ export function AppearanceTab() {
         >
           <ThemeSegmented />
         </SettingsRow>
-      </SettingsSection>
-
-      <SettingsSection title={t("settings.appearance.language.title")}>
         <SettingsRow
-          label={t("settings.appearance.language.label")}
-          description={t("settings.appearance.language.description")}
+          label={t("settings.appearance.palette.label")}
+          description={t("settings.appearance.palette.description")}
+          className="flex-col items-stretch gap-3"
         >
-          <LanguageSelect />
+          <PaletteCards />
         </SettingsRow>
       </SettingsSection>
 
-      <SettingsSection title={t("settings.appearance.layout.title")}>
+      <SettingsSection
+        title={t(
+          resolved === "light"
+            ? "settings.appearance.custom.colors.lightGroup"
+            : "settings.appearance.custom.colors.darkGroup",
+        )}
+      >
+        <SettingsRow label={t("settings.appearance.custom.colors.accent")}>
+          <ActiveColorControl
+            colorKey="accent"
+            label={t("settings.appearance.custom.colors.accent")}
+          />
+        </SettingsRow>
+        <SettingsRow label={t("settings.appearance.custom.colors.background")}>
+          <ActiveColorControl
+            colorKey="background"
+            label={t("settings.appearance.custom.colors.background")}
+          />
+        </SettingsRow>
+        <SettingsRow label={t("settings.appearance.custom.colors.foreground")}>
+          <ActiveColorControl
+            colorKey="foreground"
+            label={t("settings.appearance.custom.colors.foreground")}
+          />
+        </SettingsRow>
+        <SettingsGroupDivider />
+        <SettingsRow label={t("settings.appearance.custom.uiFont.label")}>
+          <UiFontRow />
+        </SettingsRow>
+        <SettingsRow label={t("settings.appearance.custom.headingFont.label")}>
+          <HeadingFontRow />
+        </SettingsRow>
+        <SettingsRow label={t("settings.appearance.custom.chatFont.label")}>
+          <ChatFontRow />
+        </SettingsRow>
+        <SettingsRow label={t("settings.appearance.custom.codeFont.label")}>
+          <CodeFontRow />
+        </SettingsRow>
+        <SettingsGroupDivider />
+        <SettingsRow
+          label={t("settings.appearance.custom.contrast.label")}
+          description={t("settings.appearance.custom.contrast.description")}
+        >
+          <ContrastSliderRow />
+        </SettingsRow>
+      </SettingsSection>
+
+      <SettingsSection title={t("settings.appearance.custom.preferencesTitle")}>
+        <SettingsRow
+          label={t("settings.appearance.custom.pointerCursors.label")}
+          description={t(
+            "settings.appearance.custom.pointerCursors.description",
+          )}
+        >
+          <PointerCursorsSwitch />
+        </SettingsRow>
+        <SettingsRow
+          label={t("settings.appearance.custom.reduceMotion.label")}
+          description={t("settings.appearance.custom.reduceMotion.description")}
+        >
+          <ReduceMotionSegmented />
+        </SettingsRow>
+        <SettingsRow
+          label={t("settings.appearance.custom.uiFontSize.label")}
+          description={t("settings.appearance.custom.uiFontSize.description")}
+        >
+          <UiFontSizeRow />
+        </SettingsRow>
+        <SettingsRow
+          label={t("settings.appearance.custom.codeFontSize.label")}
+          description={t("settings.appearance.custom.codeFontSize.description")}
+        >
+          <CodeFontSizeRow />
+        </SettingsRow>
+        <SettingsRow
+          label={t("settings.appearance.custom.fontSmoothing.label")}
+          description={t(
+            "settings.appearance.custom.fontSmoothing.description",
+          )}
+        >
+          <FontSmoothingSwitch />
+        </SettingsRow>
+        <SettingsRow
+          label={t("settings.appearance.custom.edgeFades.label")}
+          description={t("settings.appearance.custom.edgeFades.description")}
+        >
+          <EdgeFadesSwitch />
+        </SettingsRow>
         <SettingsRow
           label={t("settings.appearance.layout.compactSidebar")}
-          description={t("settings.appearance.layout.compactSidebarDescription")}
+          description={t(
+            "settings.appearance.layout.compactSidebarDescription",
+          )}
         >
           <Switch checked={pinned} onCheckedChange={setPinned} />
         </SettingsRow>
       </SettingsSection>
+
+      <SettingsSection
+        title={t("settings.appearance.sidebarMenu.title")}
+        description={t("settings.appearance.sidebarMenu.description")}
+      >
+        <div className="pt-3">
+          <SidebarMenuCustomizer />
+        </div>
+      </SettingsSection>
+
+      <div className="flex justify-end border-t border-border/60 pt-4">
+        <ResetCustomizationButton />
+      </div>
     </div>
   );
 }
diff --git a/studio/frontend/src/features/settings/tabs/chat-tab.tsx b/studio/frontend/src/features/settings/tabs/chat-tab.tsx
index 9519898b21..8ef68500cb 100644
--- a/studio/frontend/src/features/settings/tabs/chat-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/chat-tab.tsx
@@ -53,7 +53,10 @@ import { useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { ArchivedChatsDialog } from "../components/archived-chats-dialog";
 import { SettingsRow } from "../components/settings-row";
-import { SettingsSection } from "../components/settings-section";
+import {
+  SettingsGroupDivider,
+  SettingsSection,
+} from "../components/settings-section";
 import { useSettingsDialogStore } from "../stores/settings-dialog-store";
 
 // Adjustable "+" menu items shown in settings, in display order. Icons mirror
@@ -170,6 +173,8 @@ export function ChatTab() {
   }, [archivedChatsRequested, consumeArchivedChatsRequest]);
   const [exporting, setExporting] = useState(false);
   const [clearing, setClearing] = useState(false);
+  const autoTitle = useChatRuntimeStore((state) => state.autoTitle);
+  const setAutoTitle = useChatRuntimeStore((state) => state.setAutoTitle);
   const collapseHtmlArtifacts = useChatRuntimeStore(
     (state) => state.collapseHtmlArtifacts,
   );
@@ -409,6 +414,7 @@ export function ChatTab() {
             />
           </SettingsRow>
         ))}
+        <SettingsGroupDivider />
         <SettingsRow
           label={t("settings.chat.modelDisclaimer")}
           description={t("settings.chat.modelDisclaimerDescription")}
@@ -429,6 +435,15 @@ export function ChatTab() {
         </SettingsRow>
       </SettingsSection>
 
+      <SettingsSection title={t("settings.general.chatDefaults")}>
+        <SettingsRow
+          label={t("settings.general.autoTitleNewChats")}
+          description={t("settings.general.autoTitleNewChatsDescription")}
+        >
+          <Switch checked={autoTitle} onCheckedChange={setAutoTitle} />
+        </SettingsRow>
+      </SettingsSection>
+
       <SettingsSection title={t("settings.chat.artifacts.title")}>
         <SettingsRow
           label={t("settings.chat.artifacts.collapseHtmlBlocks")}
@@ -580,8 +595,6 @@ export function ChatTab() {
 
         <SettingsRow
           destructive={true}
-          // divide-y already draws the row separator; drop the extra border.
-          className="border-t-0 mt-0 pt-3"
           label={t("settings.chat.clearAllChats")}
           description={
             count === null
diff --git a/studio/frontend/src/features/settings/tabs/general-tab.tsx b/studio/frontend/src/features/settings/tabs/general-tab.tsx
index 8fd70cc1b7..e806df40ff 100644
--- a/studio/frontend/src/features/settings/tabs/general-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/general-tab.tsx
@@ -29,6 +29,14 @@ import { cn } from "@/lib/utils";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { Check, Eye, EyeOff } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import {
+  EmbeddingModelBlockedError,
+  type EmbeddingModelSettings,
+  EmbeddingModelVerificationError,
+  loadEmbeddingModelSettings,
+  resetEmbeddingModelSettings,
+  updateEmbeddingModelSettings,
+} from "../api/embedding-model";
 import {
   type HelperPrecacheSettings,
   loadHelperPrecacheSettings,
@@ -41,14 +49,6 @@ import {
   rotatePreviewLinks,
   updatePreviewSharing,
 } from "../api/preview-sharing";
-import {
-  EmbeddingModelBlockedError,
-  type EmbeddingModelSettings,
-  EmbeddingModelVerificationError,
-  loadEmbeddingModelSettings,
-  resetEmbeddingModelSettings,
-  updateEmbeddingModelSettings,
-} from "../api/embedding-model";
 import {
   DEFAULT_UPLOAD_LIMIT_MB,
   type UploadLimitSettings,
@@ -57,6 +57,7 @@ import {
 } from "../api/upload-limit";
 import { ChangePasswordDialog } from "../components/change-password-dialog";
 import { EmbeddingModelCombobox } from "../components/embedding-model-combobox";
+import { LanguageSelect } from "../components/language-select";
 import { SettingsRow } from "../components/settings-row";
 import { SettingsSection } from "../components/settings-section";
 import { StudioVersionSection } from "../components/studio-version-section";
@@ -70,6 +71,8 @@ import { useSettingsDialogStore } from "../stores/settings-dialog-store";
 const PREFS_KEYS: string[] = [
   // Appearance
   "theme",
+  "palette",
+  "unsloth_appearance_customization",
   LOCALE_STORAGE_KEY,
   // UI state
   "sidebar_pinned",
@@ -142,8 +145,6 @@ export function GeneralTab() {
   });
   const hfToken = useChatRuntimeStore((s) => s.hfToken);
   const setHfToken = useChatRuntimeStore((s) => s.setHfToken);
-  const autoTitle = useChatRuntimeStore((s) => s.autoTitle);
-  const setAutoTitle = useChatRuntimeStore((s) => s.setAutoTitle);
   const chatOnly = usePlatformStore((s) => s.chatOnly);
   const showLlamaUpdates = useShowLlamaUpdateBanner();
   const redirectTo = `${pathname}${search}`;
@@ -573,12 +574,12 @@ export function GeneralTab() {
         </SettingsSection>
       ) : null}
 
-      <SettingsSection title={t("settings.general.chatDefaults")}>
+      <SettingsSection title={t("settings.appearance.language.title")}>
         <SettingsRow
-          label={t("settings.general.autoTitleNewChats")}
-          description={t("settings.general.autoTitleNewChatsDescription")}
+          label={t("settings.appearance.language.label")}
+          description={t("settings.appearance.language.description")}
         >
-          <Switch checked={autoTitle} onCheckedChange={setAutoTitle} />
+          <LanguageSelect />
         </SettingsRow>
       </SettingsSection>
 
@@ -664,9 +665,7 @@ export function GeneralTab() {
                 }
                 onClick={() => void saveEmbeddingModel(false)}
               >
-                {isSavingEmbeddingModel
-                  ? t("common.saving")
-                  : t("common.save")}
+                {isSavingEmbeddingModel ? t("common.saving") : t("common.save")}
               </Button>
             </div>
             {embeddingModelError ? (
@@ -714,7 +713,7 @@ export function GeneralTab() {
         >
           <div className="flex flex-col items-end gap-1">
             <div className="flex items-center gap-2">
-              <div className="relative w-28">
+              <div className="flex items-center gap-1.5">
                 <Input
                   type="number"
                   min={uploadLimit?.minUploadSizeMb ?? 1}
@@ -723,9 +722,9 @@ export function GeneralTab() {
                   value={draftUploadLimit}
                   aria-label="Training dataset upload cap in MB"
                   onChange={(event) => setDraftUploadLimit(event.target.value)}
-                  className="h-8 w-full pr-10"
+                  className="h-8 w-24"
                 />
-                <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs font-medium text-muted-foreground">
+                <span className="text-xs font-medium text-muted-foreground">
                   MB
                 </span>
               </div>
diff --git a/studio/frontend/src/features/settings/tabs/profile-tab.tsx b/studio/frontend/src/features/settings/tabs/profile-tab.tsx
index e00da414d0..c515c3f7d7 100644
--- a/studio/frontend/src/features/settings/tabs/profile-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/profile-tab.tsx
@@ -10,10 +10,16 @@ export function ProfileTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-xl font-semibold font-heading">
+        <h1
+          data-settings-label={t("settings.profile.title")}
+          className="text-xl font-semibold font-heading"
+        >
           {t("settings.profile.title")}
         </h1>
-        <p className="text-xs text-muted-foreground">
+        <p
+          data-settings-label={t("settings.profile.description")}
+          className="text-xs text-muted-foreground"
+        >
           {t("settings.profile.description")}
         </p>
       </header>
diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index 6c30858c63..9a359f0f38 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -32,7 +32,7 @@ function clampPercent(value: number | null | undefined): number {
 function usageIndicatorClass(percent: number): string {
   if (percent >= 90) return "bg-destructive";
   if (percent >= 70) return "bg-amber-500";
-  return "bg-primary";
+  return "bg-control-accent";
 }
 
 function usageTextClass(percent: number): string {
diff --git a/studio/frontend/src/features/studio/sections/dataset-section.tsx b/studio/frontend/src/features/studio/sections/dataset-section.tsx
index 285644c5d4..d00d192bb2 100644
--- a/studio/frontend/src/features/studio/sections/dataset-section.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-section.tsx
@@ -28,29 +28,38 @@ import {
 } from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useDebouncedValue, useHfTokenValidation } from "@/hooks";
+import { usePlatformStore } from "@/config/env";
 import { useHubDatasetSearch } from "@/features/hub/hooks/use-hub-dataset-search";
 import { useHubInfiniteScroll } from "@/features/hub/hooks/use-hub-infinite-scroll";
+import {
+  formatUploadSize,
+  getCachedUploadLimitBytes,
+  getCachedUploadLimitLabel,
+  loadUploadLimitSettings,
+  subscribeUploadLimitSettings,
+} from "@/features/settings/api/upload-limit";
 import {
   HfDatasetSubsetSplitSelectors,
+  type LocalDatasetInfo,
   listLocalDatasets,
   uploadTrainingDataset,
   useDatasetPreviewDialogStore,
   useTrainingConfigStore,
-  type LocalDatasetInfo,
 } from "@/features/training";
 // Imported directly from the store module rather than the "@/features/training"
 // barrel to avoid an import cycle (the barrel re-exports this section's siblings).
 import { hasSeparateStreamingEvalSplit } from "@/features/training/stores/training-config-store";
-import { useNavigate } from "@tanstack/react-router";
+import { useDebouncedValue, useHfTokenValidation } from "@/hooks";
+import { translate, useT } from "@/i18n";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
+import { toast } from "@/lib/toast";
+import { cn } from "@/lib/utils";
 import {
-  ArrowDown01Icon,
   Cancel01Icon,
   CloudUploadIcon,
   Database02Icon,
@@ -60,6 +69,7 @@ import {
   ViewIcon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
+import { useNavigate } from "@tanstack/react-router";
 import {
   type ChangeEvent,
   type DragEvent,
@@ -69,19 +79,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { toast } from "@/lib/toast";
-import {
-  formatUploadSize,
-  getCachedUploadLimitBytes,
-  getCachedUploadLimitLabel,
-  loadUploadLimitSettings,
-  subscribeUploadLimitSettings,
-} from "@/features/settings/api/upload-limit";
 import { useShallow } from "zustand/react/shallow";
 import { DocumentUploadRedirectDialog } from "./document-upload-redirect-dialog";
-import { translate, useT } from "@/i18n";
 import { S3ConfigForm } from "./s3-config-form";
-import { usePlatformStore } from "@/config/env";
 
 const TRAINING_UPLOAD_EXTENSIONS = [
   ".csv",
@@ -242,7 +242,13 @@ export function DatasetSection() {
     );
   if (trainOnCompletions)
     streamingBlockers.push('Turn off "Assistant completions only".');
-  if (!hasSeparateStreamingEvalSplit({ evalSteps, datasetSplit, datasetEvalSplit }))
+  if (
+    !hasSeparateStreamingEvalSplit({
+      evalSteps,
+      datasetSplit,
+      datasetEvalSplit,
+    })
+  )
     streamingBlockers.push(
       "Pick a separate eval split — evaluation is on but no distinct eval split is set.",
     );
@@ -255,9 +261,13 @@ export function DatasetSection() {
       "Embedding models don't support streaming (training needs the full dataset).",
     );
   if (isDatasetImage)
-    streamingBlockers.push("This dataset looks like images, which can't stream.");
+    streamingBlockers.push(
+      "This dataset looks like images, which can't stream.",
+    );
   if (isDatasetAudio)
-    streamingBlockers.push("This dataset looks like audio, which can't stream.");
+    streamingBlockers.push(
+      "This dataset looks like audio, which can't stream.",
+    );
   if (platformDeviceType === "mac")
     streamingBlockers.push(
       "Streaming isn't supported on Apple Silicon (MLX) yet.",
@@ -491,12 +501,16 @@ export function DatasetSection() {
   const comboboxAnchorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const evalFileInputRef = useRef<HTMLInputElement>(null);
-  const { scrollRef, sentinelRef } = useHubInfiniteScroll(fetchMore, scannedCount, {
-    enabled: pickerTab === "huggingface",
-    isFetching: isLoading || isLoadingMore,
-    resultCount: hfResults.length,
-    resetKey: debouncedQuery,
-  });
+  const { scrollRef, sentinelRef } = useHubInfiniteScroll(
+    fetchMore,
+    scannedCount,
+    {
+      enabled: pickerTab === "huggingface",
+      isFetching: isLoading || isLoadingMore,
+      resultCount: hfResults.length,
+      resetKey: debouncedQuery,
+    },
+  );
 
   const [isUploading, setIsUploading] = useState(false);
   const [isDatasetDragOver, setIsDatasetDragOver] = useState(false);
@@ -519,9 +533,11 @@ export function DatasetSection() {
       setUploadLimitLabel(settings.maxUploadSizeLabel);
     };
     const unsubscribe = subscribeUploadLimitSettings(applyLimit);
-    void loadUploadLimitSettings().then((settings) => {
-      if (!cancelled) applyLimit(settings);
-    }).catch(() => {});
+    void loadUploadLimitSettings()
+      .then((settings) => {
+        if (!cancelled) applyLimit(settings);
+      })
+      .catch(() => {});
     return () => {
       cancelled = true;
       unsubscribe();
@@ -568,7 +584,10 @@ export function DatasetSection() {
       toast.success(successMessage, { description: uploaded.filename });
     } catch (error) {
       toast.error(t("studio.dataset.uploadFailed"), {
-        description: error instanceof Error ? error.message : t("studio.dataset.unknownError"),
+        description:
+          error instanceof Error
+            ? error.message
+            : t("studio.dataset.unknownError"),
       });
     } finally {
       setIsUploading(false);
@@ -592,7 +611,11 @@ export function DatasetSection() {
       return;
     }
 
-    await handleFileUpload(file, selectLocalDataset, t("studio.dataset.datasetUploaded"));
+    await handleFileUpload(
+      file,
+      selectLocalDataset,
+      t("studio.dataset.datasetUploaded"),
+    );
   };
 
   const handleDatasetFileChange = async (
@@ -640,7 +663,11 @@ export function DatasetSection() {
     event.target.value = "";
     if (!file) return;
 
-    await handleFileUpload(file, setUploadedEvalFile, t("studio.dataset.evalDatasetUploaded"));
+    await handleFileUpload(
+      file,
+      setUploadedEvalFile,
+      t("studio.dataset.evalDatasetUploaded"),
+    );
   };
 
   const handleOpenLearningRecipes = useCallback(() => {
@@ -672,9 +699,9 @@ export function DatasetSection() {
             }[] = [
               { value: "huggingface", label: "Hugging Face" },
               { value: "upload", label: t("studio.dataset.localTab") },
-              ...(!isMultimodalModel
-                ? [{ value: "s3" as const, label: "Amazon S3" }]
-                : []),
+              ...(isMultimodalModel
+                ? []
+                : [{ value: "s3" as const, label: "Amazon S3" }]),
             ];
             const activeIndex = Math.max(
               0,
@@ -728,355 +755,375 @@ export function DatasetSection() {
           {datasetSource === "s3" && <S3ConfigForm />}
 
           {datasetSource !== "s3" && (
-          <div className="flex min-w-0 flex-col gap-2">
-            <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-              {t("studio.dataset.chooseDataset")}
-              <span className="rounded-full border border-border/70 bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-foreground/80">
-                {datasetSource === "upload" ? t("studio.dataset.localTab") : "Hugging Face"}
+            <div className="flex min-w-0 flex-col gap-2">
+              <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                {t("studio.dataset.chooseDataset")}
+                <span className="rounded-full border border-border/70 bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-foreground/80">
+                  {datasetSource === "upload"
+                    ? t("studio.dataset.localTab")
+                    : "Hugging Face"}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild={true}>
+                    <button
+                      type="button"
+                      className="text-foreground/70 hover:text-foreground"
+                    >
+                      <HugeiconsIcon
+                        icon={InformationCircleIcon}
+                        className="size-3"
+                      />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {t("studio.dataset.chooseDatasetTooltip")}{" "}
+                    <a
+                      href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary underline"
+                    >
+                      {t("studio.params.readMore")}
+                    </a>
+                  </TooltipContent>
+                </Tooltip>
               </span>
-              <Tooltip>
-                <TooltipTrigger asChild={true}>
-                  <button
-                    type="button"
-                    className="text-foreground/70 hover:text-foreground"
+              <div
+                ref={comboboxAnchorRef}
+                className="min-w-0"
+                onKeyDown={(event) => {
+                  if (event.key !== "Enter") return;
+                  if (!(event.target instanceof HTMLInputElement)) return;
+                  event.preventDefault();
+                  if (pickerTab === "huggingface") {
+                    if (hfResults.length > 0) {
+                      handleDatasetSelect(hfResults[0].id);
+                    } else {
+                      const text = event.target.value.trim();
+                      if (text) handleDatasetSelect(text);
+                    }
+                    return;
+                  }
+
+                  if (localResultIds.length > 0) {
+                    const selectedId = localResultIds[0];
+                    const path = localPathById.get(selectedId);
+                    if (path) {
+                      handleLocalDatasetSelect(path);
+                    }
+                  }
+                }}
+              >
+                <Combobox
+                  items={comboboxItems}
+                  filteredItems={comboboxItems}
+                  filter={null}
+                  value={comboboxValue}
+                  onOpenChange={(open) => {
+                    setSearchQuery("");
+                    if (
+                      open &&
+                      (pickerTab === "local" || activeSourceTab === "local")
+                    ) {
+                      void refreshLocalDatasets();
+                    }
+                    if (!open) {
+                      setPickerTab(
+                        pendingSourceTabRef.current ?? activeSourceTab,
+                      );
+                      pendingSourceTabRef.current = null;
+                    }
+                  }}
+                  onValueChange={(value) => {
+                    if (!value) {
+                      clearSelectionForTab(pickerTab);
+                      return;
+                    }
+                    if (pickerTab === "huggingface") {
+                      handleDatasetSelect(value);
+                      return;
+                    }
+                    const path = localPathById.get(value);
+                    if (path) {
+                      handleLocalDatasetSelect(path);
+                    }
+                  }}
+                  onInputValueChange={(value, eventDetails) =>
+                    handleInputChange(value, eventDetails)
+                  }
+                  itemToStringValue={(id) =>
+                    pickerTab === "local" ? (localLabelById.get(id) ?? id) : id
+                  }
+                  autoHighlight={true}
+                >
+                  <ComboboxInput
+                    placeholder={
+                      pickerTab === "huggingface"
+                        ? t("studio.dataset.searchHuggingFaceDatasets")
+                        : t("studio.dataset.searchLocalDatasets")
+                    }
+                    className="w-full min-w-0 overflow-hidden leading-5"
+                    showClear={true}
                   >
-                    <HugeiconsIcon
-                      icon={InformationCircleIcon}
-                      className="size-3"
-                    />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t("studio.dataset.chooseDatasetTooltip")}{" "}
+                    <InputGroupAddon>
+                      <HugeiconsIcon icon={Search01Icon} className="size-4" />
+                    </InputGroupAddon>
+                  </ComboboxInput>
+                  <ComboboxContent anchor={comboboxAnchorRef}>
+                    <div className="px-2 pt-2 pb-2">
+                      <Tabs
+                        value={pickerTab}
+                        onValueChange={(value) => {
+                          setPickerTab(value as "huggingface" | "local");
+                          setSearchQuery("");
+                        }}
+                        className="w-full"
+                      >
+                        <TabsList className=" w-full">
+                          <TabsTrigger value="huggingface">
+                            Hugging Face
+                          </TabsTrigger>
+                          <TabsTrigger value="local">
+                            {t("studio.dataset.localTab")}
+                          </TabsTrigger>
+                        </TabsList>
+
+                        <TabsContent value="huggingface" className="m-0">
+                          {isLoading ? (
+                            <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
+                              <Spinner className="size-4" />{" "}
+                              {t("studio.dataset.searching")}
+                            </div>
+                          ) : (
+                            <ComboboxEmpty>
+                              {t("studio.dataset.noDatasetsFound")}
+                            </ComboboxEmpty>
+                          )}
+                          <div
+                            ref={scrollRef}
+                            className="max-h-64 overflow-y-auto overscroll-contain [scrollbar-width:thin]"
+                          >
+                            <ComboboxList className="p-1 !max-h-none !overflow-visible">
+                              {(id: string) => {
+                                return (
+                                  <ComboboxItem
+                                    key={id}
+                                    value={id}
+                                    className="gap-2"
+                                  >
+                                    <Tooltip>
+                                      <TooltipTrigger asChild={true}>
+                                        <span className="block min-w-0 flex-1 truncate">
+                                          {id}
+                                        </span>
+                                      </TooltipTrigger>
+                                      <TooltipContent
+                                        side="left"
+                                        className="max-w-xs break-all"
+                                      >
+                                        {id}
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </ComboboxItem>
+                                );
+                              }}
+                            </ComboboxList>
+                            <div ref={sentinelRef} className="h-px" />
+                            {isLoadingMore && (
+                              <div className="flex items-center justify-center py-2">
+                                <Spinner className="size-3.5 text-muted-foreground" />
+                              </div>
+                            )}
+                          </div>
+                        </TabsContent>
+
+                        <TabsContent value="local" className="m-0">
+                          {localLoading ? (
+                            <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
+                              <Spinner className="size-4" />{" "}
+                              {t("studio.dataset.loadingLocalDatasets")}
+                            </div>
+                          ) : (
+                            <>
+                              {localError ? (
+                                <p className="px-2 py-2 text-xs text-destructive">
+                                  {localError}
+                                </p>
+                              ) : (
+                                <ComboboxEmpty className="px-2 py-3">
+                                  <div className="flex w-full flex-col items-center gap-2 text-center">
+                                    <p className="text-xs text-muted-foreground">
+                                      {localDatasets.length === 0
+                                        ? t("studio.dataset.noLocalDatasetsYet")
+                                        : t(
+                                            "studio.dataset.noLocalDatasetsMatchSearch",
+                                          )}
+                                    </p>
+                                    {localDatasets.length === 0 ? (
+                                      <Button
+                                        asChild={true}
+                                        size="sm"
+                                        variant="outline"
+                                      >
+                                        <a href="/data-recipes">
+                                          {t("studio.dataset.openDataRecipes")}
+                                        </a>
+                                      </Button>
+                                    ) : null}
+                                  </div>
+                                </ComboboxEmpty>
+                              )}
+                              <div className="max-h-64 overflow-y-auto overscroll-contain [scrollbar-width:thin]">
+                                <ComboboxList className="p-1 !max-h-none !overflow-visible">
+                                  {(id: string) => {
+                                    const label = localLabelById.get(id) ?? id;
+                                    return (
+                                      <ComboboxItem
+                                        key={id}
+                                        value={id}
+                                        className="gap-2"
+                                      >
+                                        <Tooltip>
+                                          <TooltipTrigger asChild={true}>
+                                            <span className="block min-w-0 flex-1 truncate">
+                                              {label}
+                                            </span>
+                                          </TooltipTrigger>
+                                          <TooltipContent
+                                            side="left"
+                                            className="max-w-xs break-all"
+                                          >
+                                            {label}
+                                          </TooltipContent>
+                                        </Tooltip>
+                                      </ComboboxItem>
+                                    );
+                                  }}
+                                </ComboboxList>
+                              </div>
+                            </>
+                          )}
+                        </TabsContent>
+                      </Tabs>
+                    </div>
+                  </ComboboxContent>
+                </Combobox>
+              </div>
+              {(tokenValidationError ?? hfSearchError) && (
+                <p className="text-xs text-destructive">
+                  {tokenValidationError ?? hfSearchError}
+                  {" — "}
                   <a
-                    href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/datasets-guide"
+                    href="https://huggingface.co/settings/tokens"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-primary underline"
+                    className="underline"
                   >
-                    {t("studio.params.readMore")}
+                    {t("studio.dataset.getOrUpdateToken")}
                   </a>
-                </TooltipContent>
-              </Tooltip>
-            </span>
-            <div
-              ref={comboboxAnchorRef}
-              className="min-w-0"
-              onKeyDown={(event) => {
-                if (event.key !== "Enter") return;
-                if (!(event.target instanceof HTMLInputElement)) return;
-                event.preventDefault();
-                if (pickerTab === "huggingface") {
-                  if (hfResults.length > 0) {
-                    handleDatasetSelect(hfResults[0].id);
-                  } else {
-                    const text = event.target.value.trim();
-                    if (text) handleDatasetSelect(text);
-                  }
-                  return;
-                }
-
-                if (localResultIds.length > 0) {
-                  const selectedId = localResultIds[0];
-                  const path = localPathById.get(selectedId);
-                  if (path) {
-                    handleLocalDatasetSelect(path);
-                  }
-                }
-              }}
-            >
-              <Combobox
-                items={comboboxItems}
-                filteredItems={comboboxItems}
-                filter={null}
-                value={comboboxValue}
-                onOpenChange={(open) => {
-                  setSearchQuery("");
-                  if (
-                    open &&
-                    (pickerTab === "local" || activeSourceTab === "local")
-                  ) {
-                    void refreshLocalDatasets();
-                  }
-                  if (!open) {
-                    setPickerTab(
-                      pendingSourceTabRef.current ?? activeSourceTab,
-                    );
-                    pendingSourceTabRef.current = null;
-                  }
-                }}
-                onValueChange={(value) => {
-                  if (!value) {
-                    clearSelectionForTab(pickerTab);
-                    return;
-                  }
-                  if (pickerTab === "huggingface") {
-                    handleDatasetSelect(value);
-                    return;
-                  }
-                  const path = localPathById.get(value);
-                  if (path) {
-                    handleLocalDatasetSelect(path);
-                  }
-                }}
-                onInputValueChange={(value, eventDetails) =>
-                  handleInputChange(value, eventDetails)
-                }
-                itemToStringValue={(id) =>
-                  pickerTab === "local" ? (localLabelById.get(id) ?? id) : id
-                }
-                autoHighlight={true}
-              >
-                <ComboboxInput
-                  placeholder={
-                    pickerTab === "huggingface"
-                      ? t("studio.dataset.searchHuggingFaceDatasets")
-                      : t("studio.dataset.searchLocalDatasets")
-                  }
-                  className="w-full min-w-0 overflow-hidden leading-5"
-                  showClear={true}
-                >
-                  <InputGroupAddon>
-                    <HugeiconsIcon icon={Search01Icon} className="size-4" />
-                  </InputGroupAddon>
-                </ComboboxInput>
-                <ComboboxContent anchor={comboboxAnchorRef}>
-                  <div className="px-2 pt-2 pb-2">
-                    <Tabs
-                      value={pickerTab}
-                      onValueChange={(value) => {
-                        setPickerTab(value as "huggingface" | "local");
-                        setSearchQuery("");
-                      }}
-                      className="w-full"
-                    >
-                      <TabsList className=" w-full">
-                        <TabsTrigger value="huggingface">Hugging Face</TabsTrigger>
-                        <TabsTrigger value="local">{t("studio.dataset.localTab")}</TabsTrigger>
-                      </TabsList>
-
-                      <TabsContent value="huggingface" className="m-0">
-                        {isLoading ? (
-                          <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
-                            <Spinner className="size-4" /> {t("studio.dataset.searching")}
-                          </div>
-                        ) : (
-                          <ComboboxEmpty>{t("studio.dataset.noDatasetsFound")}</ComboboxEmpty>
-                        )}
-                        <div
-                          ref={scrollRef}
-                          className="max-h-64 overflow-y-auto overscroll-contain [scrollbar-width:thin]"
-                        >
-                          <ComboboxList className="p-1 !max-h-none !overflow-visible">
-                            {(id: string) => {
-                              return (
-                                <ComboboxItem
-                                  key={id}
-                                  value={id}
-                                  className="gap-2"
-                                >
-                                  <Tooltip>
-                                    <TooltipTrigger asChild={true}>
-                                      <span className="block min-w-0 flex-1 truncate">
-                                        {id}
-                                      </span>
-                                    </TooltipTrigger>
-                                    <TooltipContent
-                                      side="left"
-                                      className="max-w-xs break-all"
-                                    >
-                                      {id}
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </ComboboxItem>
-                              );
-                            }}
-                          </ComboboxList>
-                          <div ref={sentinelRef} className="h-px" />
-                          {isLoadingMore && (
-                            <div className="flex items-center justify-center py-2">
-                              <Spinner className="size-3.5 text-muted-foreground" />
-                            </div>
-                          )}
-                        </div>
-                      </TabsContent>
-
-                      <TabsContent value="local" className="m-0">
-                        {localLoading ? (
-                          <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
-                            <Spinner className="size-4" /> {t("studio.dataset.loadingLocalDatasets")}
-                          </div>
-                        ) : (
-                          <>
-                            {localError ? (
-                              <p className="px-2 py-2 text-xs text-destructive">
-                                {localError}
-                              </p>
-                            ) : (
-                              <ComboboxEmpty className="px-2 py-3">
-                                <div className="flex w-full flex-col items-center gap-2 text-center">
-                                  <p className="text-xs text-muted-foreground">
-                                    {localDatasets.length === 0
-                                      ? t("studio.dataset.noLocalDatasetsYet")
-                                      : t("studio.dataset.noLocalDatasetsMatchSearch")}
-                                  </p>
-                                  {localDatasets.length === 0 ? (
-                                    <Button asChild={true} size="sm" variant="outline">
-                                      <a href="/data-recipes">{t("studio.dataset.openDataRecipes")}</a>
-                                    </Button>
-                                  ) : null}
-                                </div>
-                              </ComboboxEmpty>
-                            )}
-                            <div className="max-h-64 overflow-y-auto overscroll-contain [scrollbar-width:thin]">
-                              <ComboboxList className="p-1 !max-h-none !overflow-visible">
-                                {(id: string) => {
-                                  const label = localLabelById.get(id) ?? id;
-                                  return (
-                                    <ComboboxItem
-                                      key={id}
-                                      value={id}
-                                      className="gap-2"
-                                    >
-                                      <Tooltip>
-                                        <TooltipTrigger asChild={true}>
-                                          <span className="block min-w-0 flex-1 truncate">
-                                            {label}
-                                          </span>
-                                        </TooltipTrigger>
-                                        <TooltipContent
-                                          side="left"
-                                          className="max-w-xs break-all"
-                                        >
-                                          {label}
-                                        </TooltipContent>
-                                      </Tooltip>
-                                    </ComboboxItem>
-                                  );
-                                }}
-                              </ComboboxList>
-                            </div>
-                          </>
-                        )}
-                      </TabsContent>
-                    </Tabs>
-                  </div>
-                </ComboboxContent>
-              </Combobox>
+                </p>
+              )}
+              {isCheckingToken && (
+                <p className="text-xs text-muted-foreground">
+                  {t("studio.dataset.checkingToken")}
+                </p>
+              )}
+              {pickerTab !== activeSourceTab && (
+                <p className="text-[11px] text-muted-foreground">
+                  {t("studio.dataset.browsingSource", {
+                    browsing:
+                      pickerTab === "local"
+                        ? t("studio.dataset.localDatasets")
+                        : "Hugging Face",
+                    current:
+                      datasetSource === "upload"
+                        ? t("studio.dataset.localTab")
+                        : "Hugging Face",
+                  })}
+                </p>
+              )}
             </div>
-            {(tokenValidationError ?? hfSearchError) && (
-              <p className="text-xs text-destructive">
-                {tokenValidationError ?? hfSearchError}
-                {" — "}
-                <a
-                  href="https://huggingface.co/settings/tokens"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                >
-                  {t("studio.dataset.getOrUpdateToken")}
-                </a>
-              </p>
-            )}
-            {isCheckingToken && (
-              <p className="text-xs text-muted-foreground">
-                {t("studio.dataset.checkingToken")}
-              </p>
-            )}
-            {pickerTab !== activeSourceTab && (
-              <p className="text-[11px] text-muted-foreground">
-                {t("studio.dataset.browsingSource", {
-                  browsing:
-                    pickerTab === "local"
-                      ? t("studio.dataset.localDatasets")
-                      : "Hugging Face",
-                  current:
-                    datasetSource === "upload"
-                      ? t("studio.dataset.localTab")
-                      : "Hugging Face",
-                })}
-              </p>
-            )}
-          </div>
           )}
 
           {datasetSource !== "s3" &&
             (isHfDatasetSelected ? (
-            <HfDatasetSubsetSplitSelectors
-              variant="studio"
-              enabled={true}
-              datasetName={dataset}
-              accessToken={hfToken || undefined}
-              datasetSubset={datasetSubset}
-              setDatasetSubset={setDatasetSubset}
-              datasetSplit={datasetSplit}
-              setDatasetSplit={setDatasetSplit}
-              datasetEvalSplit={datasetEvalSplit}
-              setDatasetEvalSplit={setDatasetEvalSplit}
-            />
-          ) : !selectedDatasetName ? (
-            <HfDatasetSubsetSplitSelectors
-              variant="studio"
-              enabled={false}
-              datasetName={null}
-              accessToken={hfToken || undefined}
-              datasetSubset={datasetSubset}
-              setDatasetSubset={setDatasetSubset}
-              datasetSplit={datasetSplit}
-              setDatasetSplit={setDatasetSplit}
-              datasetEvalSplit={datasetEvalSplit}
-              setDatasetEvalSplit={setDatasetEvalSplit}
-            />
-          ) : datasetSource === "upload" && selectedLocalDataset ? (
-            <div className="rounded-lg border bg-muted/20 px-3.5 py-3">
-              <div className="mb-3 flex items-center justify-between gap-3">
-                <div>
-                  <p className="text-xs font-medium text-muted-foreground">
-                    {t("studio.dataset.localDatasetMetadata")}
-                  </p>
-                  <p className="text-[10px] text-muted-foreground/80">
-                    {t("studio.dataset.dataRecipeOutput")}
-                  </p>
-                </div>
-              </div>
+              <HfDatasetSubsetSplitSelectors
+                variant="studio"
+                enabled={true}
+                datasetName={dataset}
+                accessToken={hfToken || undefined}
+                datasetSubset={datasetSubset}
+                setDatasetSubset={setDatasetSubset}
+                datasetSplit={datasetSplit}
+                setDatasetSplit={setDatasetSplit}
+                datasetEvalSplit={datasetEvalSplit}
+                setDatasetEvalSplit={setDatasetEvalSplit}
+              />
+            ) : selectedDatasetName ? (
+              datasetSource === "upload" && selectedLocalDataset ? (
+                <div className="rounded-lg border bg-muted/20 px-3.5 py-3">
+                  <div className="mb-3 flex items-center justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-medium text-muted-foreground">
+                        {t("studio.dataset.localDatasetMetadata")}
+                      </p>
+                      <p className="text-[10px] text-muted-foreground/80">
+                        {t("studio.dataset.dataRecipeOutput")}
+                      </p>
+                    </div>
+                  </div>
 
-              <div className="flex flex-col gap-3">
-                <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
-                  <MetadataRow
-                    label={t("studio.dataset.rows")}
-                    value={
-                      typeof selectedLocalRows === "number"
-                        ? selectedLocalRows.toLocaleString()
-                        : "--"
-                    }
-                  />
-                  <MetadataRow
-                    label={t("studio.dataset.columns")}
-                    value={
-                      selectedLocalColumns.length > 0
-                        ? String(selectedLocalColumns.length)
-                        : "--"
-                    }
-                  />
-                  <MetadataRow
-                    label={t("studio.dataset.batches")}
-                    value={
-                      typeof selectedLocalMetadata?.num_completed_batches ===
-                        "number" &&
-                      typeof selectedLocalMetadata?.total_num_batches ===
-                        "number"
-                        ? `${selectedLocalMetadata.num_completed_batches}/${selectedLocalMetadata.total_num_batches}`
-                        : "--"
-                    }
-                  />
-                  <MetadataRow
-                    label={t("studio.dataset.updated")}
-                    value={formatUpdatedDate(selectedLocalUpdatedAt)}
-                  />
+                  <div className="flex flex-col gap-3">
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+                      <MetadataRow
+                        label={t("studio.dataset.rows")}
+                        value={
+                          typeof selectedLocalRows === "number"
+                            ? selectedLocalRows.toLocaleString()
+                            : "--"
+                        }
+                      />
+                      <MetadataRow
+                        label={t("studio.dataset.columns")}
+                        value={
+                          selectedLocalColumns.length > 0
+                            ? String(selectedLocalColumns.length)
+                            : "--"
+                        }
+                      />
+                      <MetadataRow
+                        label={t("studio.dataset.batches")}
+                        value={
+                          typeof selectedLocalMetadata?.num_completed_batches ===
+                            "number" &&
+                          typeof selectedLocalMetadata?.total_num_batches ===
+                            "number"
+                            ? `${selectedLocalMetadata.num_completed_batches}/${selectedLocalMetadata.total_num_batches}`
+                            : "--"
+                        }
+                      />
+                      <MetadataRow
+                        label={t("studio.dataset.updated")}
+                        value={formatUpdatedDate(selectedLocalUpdatedAt)}
+                      />
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          ) : null)}
+              ) : null
+            ) : (
+              <HfDatasetSubsetSplitSelectors
+                variant="studio"
+                enabled={false}
+                datasetName={null}
+                accessToken={hfToken || undefined}
+                datasetSubset={datasetSubset}
+                setDatasetSubset={setDatasetSubset}
+                datasetSplit={datasetSplit}
+                setDatasetSplit={setDatasetSplit}
+                datasetEvalSplit={datasetEvalSplit}
+                setDatasetEvalSplit={setDatasetEvalSplit}
+              />
+            ))}
 
           {datasetSource === "upload" && uploadedFile && (
             <div className="rounded-lg border bg-muted/20 px-3.5 py-3">
@@ -1135,7 +1182,7 @@ export function DatasetSection() {
           <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
             <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
               <HugeiconsIcon
-                icon={ArrowDown01Icon}
+                icon={ChevronDownStandardIcon}
                 className={`size-3.5 transition-transform ${advancedOpen ? "rotate-180" : ""}`}
               />
               {t("studio.dataset.advanced")}
@@ -1180,11 +1227,15 @@ export function DatasetSection() {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="auto">{t("studio.dataset.auto")}</SelectItem>
+                      <SelectItem value="auto">
+                        {t("studio.dataset.auto")}
+                      </SelectItem>
                       <SelectItem value="alpaca">Alpaca</SelectItem>
                       <SelectItem value="chatml">ChatML</SelectItem>
                       <SelectItem value="sharegpt">ShareGPT</SelectItem>
-                      <SelectItem value="raw">{t("studio.dataset.rawText")}</SelectItem>
+                      <SelectItem value="raw">
+                        {t("studio.dataset.rawText")}
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -1382,8 +1433,8 @@ export function DatasetSection() {
                       {t("studio.dataset.dropFileOrClick")}
                     </span>
                     <span className="mt-0.5 block truncate text-[10px] text-muted-foreground">
-                      {TRAINING_DATASET_UPLOAD_LABEL} · up to{" "}
-                      {uploadLimitLabel}; {DOCUMENT_REDIRECT_LABEL}
+                      {TRAINING_DATASET_UPLOAD_LABEL} · up to {uploadLimitLabel}
+                      ; {DOCUMENT_REDIRECT_LABEL}
                     </span>
                   </span>
                 </button>
@@ -1400,7 +1451,10 @@ export function DatasetSection() {
                   {isUploading ? (
                     <Spinner className="size-3.5" />
                   ) : (
-                    <HugeiconsIcon icon={CloudUploadIcon} className="size-3.5" />
+                    <HugeiconsIcon
+                      icon={CloudUploadIcon}
+                      className="size-3.5"
+                    />
                   )}
                   {isUploading
                     ? t("studio.dataset.uploading")
diff --git a/studio/frontend/src/features/studio/sections/params-section.tsx b/studio/frontend/src/features/studio/sections/params-section.tsx
index 2609558145..8d6e18b83f 100644
--- a/studio/frontend/src/features/studio/sections/params-section.tsx
+++ b/studio/frontend/src/features/studio/sections/params-section.tsx
@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
-import { usePlatformStore } from "@/config/env";
 import { SectionCard } from "@/components/section-card";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -9,7 +8,6 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { Input } from "@/components/ui/input";
 import {
   Combobox,
   ComboboxContent,
@@ -18,6 +16,7 @@ import {
   ComboboxItem,
   ComboboxList,
 } from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -32,6 +31,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { usePlatformStore } from "@/config/env";
 import {
   CONTEXT_LENGTHS,
   CPT_TARGET_MODULES,
@@ -39,18 +39,27 @@ import {
   OPTIMIZER_OPTIONS,
   TARGET_MODULES,
 } from "@/config/training";
-import { useMaxStepsEpochsToggle, useTrainingConfigStore } from "@/features/training";
+import {
+  useMaxStepsEpochsToggle,
+  useTrainingConfigStore,
+} from "@/features/training";
 import { isRawTextDatasetFormat } from "@/features/training/lib/training-methods";
+import { useT } from "@/i18n";
+import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
 import { isAdapterMethod } from "@/types/training";
 import type { GradientCheckpointing } from "@/types/training";
 import {
-  ArrowDown01Icon,
   InformationCircleIcon,
   Settings04Icon,
 } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { type ReactElement, type ReactNode, useEffect, useRef, useState } from "react";
-import { useT } from "@/i18n";
+import {
+  type ReactElement,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 type StudioT = ReturnType<typeof useT>;
 
@@ -122,7 +131,7 @@ function SliderRow({
           min={min}
           max={max}
           step={step}
-          className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+          className="w-12 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
         />
       </div>
     </Row>
@@ -224,9 +233,11 @@ export function ParamsSection(): ReactElement {
         title={t("studio.params.title")}
         description={t("studio.params.description")}
         accent="orange"
-        className={`${needsExpandedHeight
-          ? "min-h-studio-config-column"
-          : "h-studio-config-column"} duration-150`}
+        className={`${
+          needsExpandedHeight
+            ? "min-h-studio-config-column"
+            : "h-studio-config-column"
+        } duration-150`}
       >
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
@@ -255,7 +266,9 @@ export function ParamsSection(): ReactElement {
             >
               <div className="flex items-center justify-between">
                 <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                  {useEpochs ? t("studio.params.epochs") : t("studio.params.maxSteps")}
+                  {useEpochs
+                    ? t("studio.params.epochs")
+                    : t("studio.params.maxSteps")}
                   <Tooltip>
                     <TooltipTrigger asChild={true}>
                       <button
@@ -289,7 +302,9 @@ export function ParamsSection(): ReactElement {
                     onClick={toggleUseEpochs}
                     className="text-xs text-primary underline cursor-pointer"
                   >
-                    {useEpochs ? t("studio.params.useMaxSteps") : t("studio.params.useEpochs")}
+                    {useEpochs
+                      ? t("studio.params.useMaxSteps")
+                      : t("studio.params.useEpochs")}
                   </button>
                   <input
                     type="number"
@@ -310,7 +325,7 @@ export function ParamsSection(): ReactElement {
                     min={1}
                     max={useEpochs ? epochsSliderMax : maxStepsSliderMax}
                     step={1}
-                    className="w-16 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary/30 [&::-webkit-inner-spin-button]:appearance-none"
+                    className="w-16 text-right font-mono text-xs font-medium bg-muted/50 border border-border rounded-lg px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none"
                   />
                 </div>
               </div>
@@ -387,9 +402,13 @@ export function ParamsSection(): ReactElement {
                     setCtxInput(String(store.contextLength));
                   }}
                   onKeyDown={(e) => {
-                    if (e.key !== "Enter") { return; }
+                    if (e.key !== "Enter") {
+                      return;
+                    }
                     const n = trySetContextLength(ctxInput);
-                    if (n === null) { return; }
+                    if (n === null) {
+                      return;
+                    }
                     if (!ctxItems.includes(ctxInput.trim())) {
                       e.stopPropagation();
                       e.preventDefault();
@@ -398,7 +417,9 @@ export function ParamsSection(): ReactElement {
                   }}
                 />
                 <ComboboxContent anchor={ctxAnchorRef}>
-                  <ComboboxEmpty>{t("studio.params.customContextLength")}</ComboboxEmpty>
+                  <ComboboxEmpty>
+                    {t("studio.params.customContextLength")}
+                  </ComboboxEmpty>
                   <ComboboxList className="p-1">
                     {(id: string) => (
                       <ComboboxItem key={id} value={id} className="font-mono">
@@ -506,194 +527,204 @@ export function ParamsSection(): ReactElement {
             <Collapsible open={loraOpen} onOpenChange={setLoraOpen}>
               <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
                 <HugeiconsIcon
-                  icon={ArrowDown01Icon}
+                  icon={ChevronDownStandardIcon}
                   className={`size-3.5 transition-transform ${loraOpen ? "rotate-180" : ""}`}
                 />
                 {t("studio.params.loraSettings")}
               </CollapsibleTrigger>
               <CollapsibleContent className="mt-3 data-[state=open]:overflow-visible">
                 <div className="pt-1.5 flex flex-col gap-4">
-                <SliderRow
-                  label={t("studio.params.rank")}
-                  tooltip={
-                    <>
-                      {t("studio.params.rankTooltip")}{" "}
-                      <a
-                        href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary underline"
-                      >
-                        {t("studio.params.readMore")}
-                      </a>
-                    </>
-                  }
-                  value={store.loraRank}
-                  onChange={store.setLoraRank}
-                  min={4}
-                  max={128}
-                  step={4}
-                />
-                <SliderRow
-                  label={t("studio.params.alpha")}
-                  tooltip={
-                    <>
-                      {t("studio.params.alphaTooltip")}{" "}
-                      <a
-                        href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary underline"
-                      >
-                        {t("studio.params.readMore")}
-                      </a>
-                    </>
-                  }
-                  value={store.loraAlpha}
-                  onChange={store.setLoraAlpha}
-                  min={4}
-                  max={256}
-                  step={4}
-                />
-                <SliderRow
-                  label={t("studio.params.dropout")}
-                  tooltip={
-                    <>
-                      {t("studio.params.dropoutTooltip")}{" "}
-                      <a
-                        href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary underline"
-                      >
-                        {t("studio.params.readMore")}
-                      </a>
-                    </>
-                  }
-                  value={store.loraDropout}
-                  onChange={store.setLoraDropout}
-                  min={0}
-                  max={0.5}
-                  step={0.01}
-                  format={(v) => v.toFixed(2)}
-                />
+                  <SliderRow
+                    label={t("studio.params.rank")}
+                    tooltip={
+                      <>
+                        {t("studio.params.rankTooltip")}{" "}
+                        <a
+                          href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary underline"
+                        >
+                          {t("studio.params.readMore")}
+                        </a>
+                      </>
+                    }
+                    value={store.loraRank}
+                    onChange={store.setLoraRank}
+                    min={4}
+                    max={128}
+                    step={4}
+                  />
+                  <SliderRow
+                    label={t("studio.params.alpha")}
+                    tooltip={
+                      <>
+                        {t("studio.params.alphaTooltip")}{" "}
+                        <a
+                          href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary underline"
+                        >
+                          {t("studio.params.readMore")}
+                        </a>
+                      </>
+                    }
+                    value={store.loraAlpha}
+                    onChange={store.setLoraAlpha}
+                    min={4}
+                    max={256}
+                    step={4}
+                  />
+                  <SliderRow
+                    label={t("studio.params.dropout")}
+                    tooltip={
+                      <>
+                        {t("studio.params.dropoutTooltip")}{" "}
+                        <a
+                          href="https://unsloth.ai/docs/get-started/fine-tuning-llms-guide/lora-hyperparameters-guide"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary underline"
+                        >
+                          {t("studio.params.readMore")}
+                        </a>
+                      </>
+                    }
+                    value={store.loraDropout}
+                    onChange={store.setLoraDropout}
+                    min={0}
+                    max={0.5}
+                    step={0.01}
+                    format={(v) => v.toFixed(2)}
+                  />
 
-                {/* Vision checkboxes */}
-                {showVisionLora && (
-                  <div className="flex flex-col gap-2 pt-1">
+                  {/* Vision checkboxes */}
+                  {showVisionLora && (
+                    <div className="flex flex-col gap-2 pt-1">
+                      {(
+                        [
+                          [
+                            "finetuneVisionLayers",
+                            t("studio.params.visionLayers"),
+                            store.finetuneVisionLayers,
+                            store.setFinetuneVisionLayers,
+                          ],
+                          [
+                            "finetuneLanguageLayers",
+                            t("studio.params.languageLayers"),
+                            store.finetuneLanguageLayers,
+                            store.setFinetuneLanguageLayers,
+                          ],
+                          [
+                            "finetuneAttentionModules",
+                            t("studio.params.attentionModules"),
+                            store.finetuneAttentionModules,
+                            store.setFinetuneAttentionModules,
+                          ],
+                          [
+                            "finetuneMLPModules",
+                            t("studio.params.mlpModules"),
+                            store.finetuneMLPModules,
+                            store.setFinetuneMLPModules,
+                          ],
+                        ] as const
+                      ).map(([key, label, value, setter]) => (
+                        <div key={key} className="flex items-center gap-2">
+                          <Checkbox
+                            id={key}
+                            checked={value as boolean}
+                            onCheckedChange={(v) =>
+                              (setter as (v: boolean) => void)(!!v)
+                            }
+                          />
+                          <label
+                            htmlFor={key}
+                            className="text-xs cursor-pointer text-muted-foreground"
+                          >
+                            {label}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Text target modules */}
+                  {!showVisionLora && (
+                    <div className="flex flex-col gap-2 pt-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        {t("studio.params.targetModules")}
+                      </span>
+                      <div className="flex flex-wrap gap-1.5">
+                        {(isCpt ? CPT_TARGET_MODULES : TARGET_MODULES).map(
+                          (mod) => {
+                            const active = store.targetModules.includes(mod);
+                            return (
+                              <button
+                                key={mod}
+                                type="button"
+                                onClick={() => {
+                                  store.setTargetModules(
+                                    active
+                                      ? store.targetModules.filter(
+                                          (m) => m !== mod,
+                                        )
+                                      : [...store.targetModules, mod],
+                                  );
+                                }}
+                                className={`cursor-pointer rounded-full border px-2.5 py-0.5 text-[11px] font-mono transition-colors ${
+                                  active
+                                    ? "border-orange-300 bg-orange-50 text-orange-700 dark:border-orange-700 dark:bg-orange-950 dark:text-orange-300"
+                                    : "text-muted-foreground hover:bg-muted/50"
+                                }`}
+                              >
+                                {mod}
+                              </button>
+                            );
+                          },
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* LoRA variant */}
+                  <div className="flex gap-2">
                     {(
                       [
-                        [
-                          "finetuneVisionLayers",
-                          t("studio.params.visionLayers"),
-                          store.finetuneVisionLayers,
-                          store.setFinetuneVisionLayers,
-                        ],
-                        [
-                          "finetuneLanguageLayers",
-                          t("studio.params.languageLayers"),
-                          store.finetuneLanguageLayers,
-                          store.setFinetuneLanguageLayers,
-                        ],
-                        [
-                          "finetuneAttentionModules",
-                          t("studio.params.attentionModules"),
-                          store.finetuneAttentionModules,
-                          store.setFinetuneAttentionModules,
-                        ],
-                        [
-                          "finetuneMLPModules",
-                          t("studio.params.mlpModules"),
-                          store.finetuneMLPModules,
-                          store.setFinetuneMLPModules,
-                        ],
+                        {
+                          value: "lora",
+                          label: t("studio.params.enableLora"),
+                          desc: t("studio.params.trainWithLora"),
+                        },
+                        {
+                          value: "rslora",
+                          label: "RS-LoRA",
+                          desc: t("studio.params.stableRank"),
+                        },
+                        {
+                          value: "loftq",
+                          label: "LoftQ",
+                          desc: t("studio.params.memoryEfficient"),
+                        },
                       ] as const
-                    ).map(([key, label, value, setter]) => (
-                      <div key={key} className="flex items-center gap-2">
-                        <Checkbox
-                          id={key}
-                          checked={value as boolean}
-                          onCheckedChange={(v) =>
-                            (setter as (v: boolean) => void)(!!v)
-                          }
-                        />
-                        <label
-                          htmlFor={key}
-                          className="text-xs cursor-pointer text-muted-foreground"
-                        >
-                          {label}
-                        </label>
-                      </div>
+                    ).map((opt) => (
+                      <button
+                        key={opt.value}
+                        type="button"
+                        onClick={() => store.setLoraVariant(opt.value)}
+                        className={`flex-1 corner-squircle rounded-xl border px-3 py-2 text-left transition-colors cursor-pointer ${
+                          store.loraVariant === opt.value
+                            ? "border-ring-strong bg-primary/5"
+                            : "border-border hover:border-foreground/20"
+                        }`}
+                      >
+                        <p className="text-xs font-medium">{opt.label}</p>
+                        <p className="text-[10px] text-muted-foreground">
+                          {opt.desc}
+                        </p>
+                      </button>
                     ))}
                   </div>
-                )}
-
-                {/* Text target modules */}
-                {!showVisionLora && (
-                  <div className="flex flex-col gap-2 pt-1">
-                    <span className="text-xs font-medium text-muted-foreground">
-                      {t("studio.params.targetModules")}
-                    </span>
-                    <div className="flex flex-wrap gap-1.5">
-                      {(isCpt ? CPT_TARGET_MODULES : TARGET_MODULES).map((mod) => {
-                        const active = store.targetModules.includes(mod);
-                        return (
-                          <button
-                            key={mod}
-                            type="button"
-                            onClick={() => {
-                              store.setTargetModules(
-                                active
-                                  ? store.targetModules.filter((m) => m !== mod)
-                                  : [...store.targetModules, mod],
-                              );
-                            }}
-                            className={`cursor-pointer rounded-full border px-2.5 py-0.5 text-[11px] font-mono transition-colors ${active
-                                ? "border-orange-300 bg-orange-50 text-orange-700 dark:border-orange-700 dark:bg-orange-950 dark:text-orange-300"
-                                : "text-muted-foreground hover:bg-muted/50"
-                              }`}
-                          >
-                            {mod}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-
-                {/* LoRA variant */}
-                <div className="flex gap-2">
-                  {(
-                    [
-                      {
-                        value: "lora",
-                        label: t("studio.params.enableLora"),
-                        desc: t("studio.params.trainWithLora"),
-                      },
-                      { value: "rslora", label: "RS-LoRA", desc: t("studio.params.stableRank") },
-                      {
-                        value: "loftq",
-                        label: "LoftQ",
-                        desc: t("studio.params.memoryEfficient"),
-                      },
-                    ] as const
-                  ).map((opt) => (
-                    <button
-                      key={opt.value}
-                      type="button"
-                      onClick={() => store.setLoraVariant(opt.value)}
-                      className={`flex-1 corner-squircle rounded-xl border px-3 py-2 text-left transition-colors cursor-pointer ${store.loraVariant === opt.value
-                          ? "border-primary/50 bg-primary/5 ring-1 ring-primary/20"
-                          : "border-border hover:border-foreground/20"
-                        }`}
-                    >
-                      <p className="text-xs font-medium">{opt.label}</p>
-                      <p className="text-[10px] text-muted-foreground">
-                        {opt.desc}
-                      </p>
-                    </button>
-                  ))}
-                </div>
                 </div>
               </CollapsibleContent>
             </Collapsible>
@@ -703,7 +734,7 @@ export function ParamsSection(): ReactElement {
           <Collapsible open={hyperOpen} onOpenChange={setHyperOpen}>
             <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
               <HugeiconsIcon
-                icon={ArrowDown01Icon}
+                icon={ChevronDownStandardIcon}
                 className={`size-3.5 transition-transform ${hyperOpen ? "rotate-180" : ""}`}
               />
               {t("studio.params.trainingHyperparameters")}
@@ -760,10 +791,7 @@ export function ParamsSection(): ReactElement {
                       </SelectTrigger>
                       <SelectContent>
                         {OPTIMIZER_OPTIONS.map((opt) => (
-                          <SelectItem
-                            key={opt.value}
-                            value={opt.value}
-                          >
+                          <SelectItem key={opt.value} value={opt.value}>
                             {formatOptimizerLabel(opt.value, opt.label, t)}
                           </SelectItem>
                         ))}
@@ -795,10 +823,7 @@ export function ParamsSection(): ReactElement {
                       </SelectTrigger>
                       <SelectContent>
                         {LR_SCHEDULER_OPTIONS.map((opt) => (
-                          <SelectItem
-                            key={opt.value}
-                            value={opt.value}
-                          >
+                          <SelectItem key={opt.value} value={opt.value}>
                             {formatSchedulerLabel(opt.value, opt.label, t)}
                           </SelectItem>
                         ))}
@@ -942,7 +967,9 @@ export function ParamsSection(): ReactElement {
                     <Input
                       type="number"
                       value={store.saveSteps}
-                      onChange={(e) => store.setSaveSteps(Number(e.target.value))}
+                      onChange={(e) =>
+                        store.setSaveSteps(Number(e.target.value))
+                      }
                       className="w-28 font-mono"
                     />
                   </Row>
@@ -956,11 +983,16 @@ export function ParamsSection(): ReactElement {
                       min="0.0"
                       max="1.0"
                       value={store.evalSteps}
-                      onChange={(e) => store.setEvalSteps(Number(e.target.value))}
+                      onChange={(e) =>
+                        store.setEvalSteps(Number(e.target.value))
+                      }
                       className="w-28 font-mono"
                     />
                   </Row>
-                  <Row label={t("studio.params.seed")} tooltip={t("studio.params.seedTooltip")}>
+                  <Row
+                    label={t("studio.params.seed")}
+                    tooltip={t("studio.params.seedTooltip")}
+                  >
                     <Input
                       type="number"
                       value={store.randomSeed}
@@ -972,14 +1004,18 @@ export function ParamsSection(): ReactElement {
                   </Row>
                 </TabsContent>
 
-                <TabsContent value="memory" className="mt-3 flex flex-col gap-3">
+                <TabsContent
+                  value="memory"
+                  className="mt-3 flex flex-col gap-3"
+                >
                   {showVisionImageSize && (
                     <Row
                       label="Image Size"
                       tooltip={
                         <>
                           Resize images by maximum side length. Default uses the
-                          model image size. Larger images use up more context. Does not upscale or change aspect ratio.{" "}
+                          model image size. Larger images use up more context.
+                          Does not upscale or change aspect ratio.{" "}
                           <a
                             href="https://unsloth.ai/docs/basics/vision-fine-tuning"
                             target="_blank"
@@ -1014,9 +1050,7 @@ export function ParamsSection(): ReactElement {
                             !visionImageSizePresets.includes(
                               store.visionImageSize,
                             ) && (
-                              <SelectItem
-                                value={String(store.visionImageSize)}
-                              >
+                              <SelectItem value={String(store.visionImageSize)}>
                                 {store.visionImageSize}
                               </SelectItem>
                             )}
@@ -1048,15 +1082,21 @@ export function ParamsSection(): ReactElement {
                     <Select
                       value={store.gradientCheckpointing}
                       onValueChange={(v) =>
-                        store.setGradientCheckpointing(v as GradientCheckpointing)
+                        store.setGradientCheckpointing(
+                          v as GradientCheckpointing,
+                        )
                       }
                     >
                       <SelectTrigger className="w-32">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="none">{t("studio.params.none")}</SelectItem>
-                        <SelectItem value="true">{t("studio.params.standard")}</SelectItem>
+                        <SelectItem value="none">
+                          {t("studio.params.none")}
+                        </SelectItem>
+                        <SelectItem value="true">
+                          {t("studio.params.standard")}
+                        </SelectItem>
                         {platformDeviceType === "mac" ? (
                           <SelectItem value="mlx">MLX</SelectItem>
                         ) : (
@@ -1086,7 +1126,9 @@ export function ParamsSection(): ReactElement {
                         id="trainOnCompletions"
                         checked={store.trainOnCompletions}
                         disabled={store.datasetStreaming}
-                        onCheckedChange={(v) => store.setTrainOnCompletions(!!v)}
+                        onCheckedChange={(v) =>
+                          store.setTrainOnCompletions(!!v)
+                        }
                       />
                       <label
                         htmlFor="trainOnCompletions"
diff --git a/studio/frontend/src/features/studio/sections/progress-section.tsx b/studio/frontend/src/features/studio/sections/progress-section.tsx
index 9c9398688f..1aaa3b6889 100644
--- a/studio/frontend/src/features/studio/sections/progress-section.tsx
+++ b/studio/frontend/src/features/studio/sections/progress-section.tsx
@@ -402,7 +402,7 @@ function LiveGpuPanel({
             <select
               value={selectedGpu}
               onChange={(e) => setSelectedGpu(Number(e.target.value))}
-              className="h-6 cursor-pointer rounded-md border border-border bg-popover px-1.5 py-0.5 text-[11px] text-popover-foreground outline-none hover:bg-muted focus:border-primary transition-colors font-medium appearance-none"
+              className="h-6 cursor-pointer rounded-md border border-border bg-popover px-1.5 py-0.5 text-[11px] text-popover-foreground outline-none hover:bg-muted focus:border-ring transition-colors font-medium appearance-none"
               title="Select GPU"
             >
               {gpus.map((device, index) => (
@@ -725,7 +725,7 @@ function GpuStat({
   const clamped = Math.max(0, Math.min(pct, max ?? 100));
   let barColor = "bg-red-500";
   if (clamped < 60) {
-    barColor = "bg-emerald-500";
+    barColor = "bg-control-accent";
   } else if (clamped < 95) {
     barColor = "bg-amber-500";
   }
diff --git a/studio/frontend/src/features/studio/sections/training-section.tsx b/studio/frontend/src/features/studio/sections/training-section.tsx
index d1ef132efb..6d1ee9411b 100644
--- a/studio/frontend/src/features/studio/sections/training-section.tsx
+++ b/studio/frontend/src/features/studio/sections/training-section.tsx
@@ -175,7 +175,7 @@ export function TrainingSection() {
         {/* Start/Stop */}
         <Button
           data-tour="studio-start"
-          className="w-full cursor-pointer bg-gradient-to-r from-emerald-500 to-teal-500 text-white hover:from-emerald-600 hover:to-teal-600"
+          className="w-full cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90"
           onClick={() => void startTrainingRun()}
           disabled={isStarting || isIncompatible || store.isCheckingDataset || isLoadingModel || !configValidation.ok}
         >
diff --git a/studio/frontend/src/features/studio/training-start-overlay.tsx b/studio/frontend/src/features/studio/training-start-overlay.tsx
index c69b25577c..db2ca91313 100644
--- a/studio/frontend/src/features/studio/training-start-overlay.tsx
+++ b/studio/frontend/src/features/studio/training-start-overlay.tsx
@@ -228,7 +228,7 @@ function DownloadRow({ label, state }: DownloadRowProps): ReactElement | null {
       {state.totalBytes > 0 ? (
         <Progress
           value={state.percent}
-          indicatorClassName="bg-[linear-gradient(90deg,oklch(0.66_0.142_166.6)_0%,oklch(0.705_0.132_166.6)_55%,oklch(0.75_0.122_166.6)_100%)]"
+          indicatorClassName="bg-[linear-gradient(90deg,var(--control-accent)_0%,color-mix(in_oklab,var(--control-accent)_72%,white)_100%)]"
         />
       ) : null}
       {state.cachePath ? (
diff --git a/studio/frontend/src/features/tour/components/guided-tour.tsx b/studio/frontend/src/features/tour/components/guided-tour.tsx
index a7b29fb925..a0ed6be98c 100644
--- a/studio/frontend/src/features/tour/components/guided-tour.tsx
+++ b/studio/frontend/src/features/tour/components/guided-tour.tsx
@@ -306,8 +306,8 @@ export function GuidedTour({
                     )}
                     aria-hidden={true}
                   />
-                  <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-emerald-400/18 via-cyan-300/6 to-transparent dark:from-emerald-400/24 dark:via-cyan-300/12" />
-                  <div className="absolute -left-14 -top-16 size-44 rounded-full bg-emerald-400/20 blur-2xl dark:bg-emerald-400/26" />
+                  <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-control-accent/18 via-control-accent/6 to-transparent dark:from-control-accent/24 dark:via-control-accent/12" />
+                  <div className="absolute -left-14 -top-16 size-44 rounded-full bg-control-accent/20 blur-2xl dark:bg-control-accent/26" />
                   <div className="absolute -right-14 -bottom-16 size-44 rounded-full bg-cyan-300/18 blur-2xl dark:bg-cyan-300/24" />
 
                   <div className="relative p-5">
@@ -315,7 +315,7 @@ export function GuidedTour({
                       <div className="min-w-0">
                         <div className="inline-flex items-center gap-2 rounded-full bg-black/[0.04] px-2.5 py-1 text-[10px] font-mono text-foreground/60 ring-1 ring-black/10 dark:bg-white/[0.04] dark:text-zinc-200/75 dark:ring-white/14">
                           {idx + 1}/{total}
-                          <span className="size-1 rounded-full bg-emerald-500/70" />
+                          <span className="size-1 rounded-full bg-control-accent/70" />
                           guided tour
                         </div>
                         <DialogPrimitive.Title
@@ -352,7 +352,7 @@ export function GuidedTour({
                       <div className="flex items-center gap-2">
                         <Button
                           variant="outline"
-                          className="border-black/10 bg-white/70 text-foreground hover:bg-white hover:text-foreground dark:border-white/15 dark:bg-white/[0.07] dark:text-zinc-100 dark:hover:bg-white/[0.12]"
+                          className="border-black/10 bg-white/70 text-foreground hover:bg-white hover:text-foreground dark:border-transparent dark:bg-white/[0.07] dark:text-zinc-100 dark:hover:bg-white/[0.12]"
                           disabled={idx === 0}
                           onClick={() => setIdx((i) => Math.max(0, i - 1))}
                         >
@@ -362,7 +362,7 @@ export function GuidedTour({
                         {isLast ? (
                           <Button
                             variant="dark"
-                            className="bg-gradient-to-r from-emerald-500 to-cyan-400 text-white hover:from-emerald-600 hover:to-cyan-500"
+                            className="bg-control-accent text-control-accent-foreground hover:bg-control-accent/90"
                             onClick={() => requestClose("complete")}
                           >
                             <HugeiconsIcon icon={CheckmarkCircle01Icon} className="size-4" />
@@ -371,7 +371,7 @@ export function GuidedTour({
                         ) : (
                           <Button
                             variant="dark"
-                            className="bg-gradient-to-r from-emerald-500 to-cyan-400 text-white hover:from-emerald-600 hover:to-cyan-500"
+                            className="bg-control-accent text-control-accent-foreground hover:bg-control-accent/90"
                             onClick={() => setIdx((i) => Math.min(total - 1, i + 1))}
                           >
                             Next
diff --git a/studio/frontend/src/features/tour/components/read-more.tsx b/studio/frontend/src/features/tour/components/read-more.tsx
index 13210c7723..3a5f643425 100644
--- a/studio/frontend/src/features/tour/components/read-more.tsx
+++ b/studio/frontend/src/features/tour/components/read-more.tsx
@@ -13,7 +13,7 @@ export function ReadMore({ href = "#" }: { href?: string }) {
       onClick={(e) => {
         if (href === "#") e.preventDefault();
       }}
-      className="text-emerald-600 underline underline-offset-2 hover:text-emerald-700"
+      className="text-control-accent underline underline-offset-2 hover:text-control-accent/80"
     >
       Read more
     </a>
diff --git a/studio/frontend/src/features/tour/lib/confetti-fireworks.ts b/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
index 6eaf8e031e..64f5016e50 100644
--- a/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
+++ b/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
@@ -5,6 +5,8 @@
 
 import type { CreateTypes as ConfettiInstance } from "canvas-confetti";
 
+import { prefersReducedMotion } from "@/features/settings";
+
 type FireworksOpts = {
   durationMs?: number;
   intervalMs?: number;
@@ -48,9 +50,8 @@ export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
   try {
     if (typeof window === "undefined") return;
 
-    const prefersReduce =
-      window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
-    if (prefersReduce) return;
+    // Honor Appearance > Reduce motion (on/off) first, then the OS preference.
+    if (prefersReducedMotion()) return;
 
     const fire = await getSharedFire();
     if (!fire || !_sharedCanvas) return;
@@ -65,7 +66,9 @@ export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
       startVelocity: 28,
       spread: 360,
       ticks: 58,
-      disableForReducedMotion: true,
+      // Reduce motion is enforced above (incl. the in-app "off" override), so
+      // don't let the library re-suppress purely on the OS preference.
+      disableForReducedMotion: false,
     } as const;
 
     const randomInRange = (min: number, max: number) =>
diff --git a/studio/frontend/src/i18n/locales/en.ts b/studio/frontend/src/i18n/locales/en.ts
index 4dc9951599..0f031e6dff 100644
--- a/studio/frontend/src/i18n/locales/en.ts
+++ b/studio/frontend/src/i18n/locales/en.ts
@@ -88,6 +88,8 @@ export const en = {
       title: "Settings",
       description: "Manage your Unsloth preferences.",
       closeAriaLabel: "Close settings",
+      searchPlaceholder: "Search settings…",
+      searchNoResults: "No settings found.",
     },
     tabs: {
       general: "General",
@@ -110,7 +112,7 @@ export const en = {
       showToken: "Show token",
       tokenSaved: "Token saved",
       password: "Password",
-      passwordDescription: "Change the password for this Studio account.",
+      passwordDescription: "Change the password for this Unsloth account.",
       passwordDialog: {
         trigger: "Change password",
         title: "Change password",
@@ -242,7 +244,11 @@ export const en = {
       avatarShape: "Profile picture shape",
       avatarShapeCircle: "Circle",
       avatarShapeRounded: "Rounded",
-      chooseSloth: "Or pick a sloth",
+      greetingSloth: "Sloth in greeting",
+      greetingSlothDescription: "Show the sloth in the chat greeting.",
+      chooseSloth: "Or pick a sloth profile picture",
+      noPicture: "No profile picture",
+      noneLabel: "None",
       nameSaved: "Profile name saved",
       namePersistErrorTitle: "Could not persist profile name",
       namePersistErrorDescription:
@@ -265,6 +271,97 @@ export const en = {
         light: "Light",
         dark: "Dark",
       },
+      palette: {
+        label: "Color palette",
+        description: "Colors used across Unsloth, in light and dark mode.",
+        standard: "Standard",
+        classic: "Classic",
+        minimal: "Minimal",
+      },
+      custom: {
+        reset: "Reset",
+        resetAll: "Reset customization",
+        preferencesTitle: "Preferences",
+        colors: {
+          lightGroup: "Light theme",
+          darkGroup: "Dark theme",
+          accent: "Accent",
+          background: "Background",
+          foreground: "Foreground",
+        },
+        fontDefault: "Default",
+        fontBundledGroup: "Built-in",
+        fontImportedGroup: "Imported",
+        fontDeviceGroup: "On this device",
+        fontFolderGroup: "From folder",
+        fontDeviceLoading: "Looking for device fonts…",
+        fontSearch: "Search fonts…",
+        fontNoResults: "No fonts found.",
+        colorPicker: {
+          hue: "Hue",
+          hex: "Hex color",
+          eyedropper: "Pick a color from the screen",
+        },
+        uiFont: {
+          label: "UI font",
+        },
+        headingFont: {
+          label: "Heading font",
+        },
+        chatFont: {
+          label: "Chat font",
+        },
+        codeFont: {
+          label: "Code font",
+        },
+        importFont: {
+          upload: "Upload",
+          scanFolder: "Select folder",
+          alreadyAvailable:
+            "This font is already available, so the existing copy is used.",
+          folderNoFonts: "No font files found in that folder.",
+          remove: "Remove",
+          errorInvalidType:
+            "Unsupported file type. Use .woff2, .woff, .ttf, or .otf.",
+          errorTooLarge: "Font file is too large (max 1.5 MB).",
+          errorLimit: "You can import up to 3 fonts.",
+          errorStorageFull: "Not enough local storage for this font. Remove an imported font first.",
+          errorFailed: "Could not load this font file.",
+        },
+        uiFontSize: {
+          label: "UI font size",
+          description: "Adjust the base size used for the Unsloth UI.",
+        },
+        codeFontSize: {
+          label: "Code font size",
+          description: "Adjust the base size used for code.",
+        },
+        fontSmoothing: {
+          label: "Font smoothing",
+          description: "Use smoothed font anti-aliasing.",
+        },
+        edgeFades: {
+          label: "Edge fades",
+          description:
+            "Fade content at panel edges. Off shows a thin divider line instead.",
+        },
+        contrast: {
+          label: "Contrast",
+          description: "Strength of borders and secondary text.",
+        },
+        reduceMotion: {
+          label: "Reduce motion",
+          description: "Reduce animations or match your system.",
+          system: "System",
+          on: "On",
+          off: "Off",
+        },
+        pointerCursors: {
+          label: "Use pointer cursors",
+          description:
+            "Change the cursor to a pointer when hovering over interactive elements.",
+        },
+      },
       language: {
         title: "Language",
         label: "Display language",
@@ -277,10 +374,17 @@ export const en = {
         compactSidebarDescription:
           "Keep the sidebar expanded instead of collapsing to icons.",
       },
+      sidebarMenu: {
+        title: "Sidebar menu",
+        description:
+          "Show, hide, and reorder items in the sidebar profile menu. Settings, Help, Log out, and Shutdown stay fixed.",
+        darkModeToggle: "Dark mode toggle",
+        dragToReorder: "Drag to reorder",
+      },
     },
     resources: {
       title: "System",
-      description: "Monitor this Studio server's hardware and storage.",
+      description: "Monitor this Unsloth server's hardware and storage.",
       liveUpdates: "Live updates",
       floatingWindow: "Floating window",
       disableOverlay: "Disable overlay",
diff --git a/studio/frontend/src/i18n/locales/ja.ts b/studio/frontend/src/i18n/locales/ja.ts
index 87acdfc4f6..7cc74b0716 100644
--- a/studio/frontend/src/i18n/locales/ja.ts
+++ b/studio/frontend/src/i18n/locales/ja.ts
@@ -92,6 +92,8 @@ export const ja = {
       title: "設定",
       description: "Unsloth の環境設定を管理します。",
       closeAriaLabel: "設定を閉じる",
+      searchPlaceholder: "設定を検索…",
+      searchNoResults: "設定が見つかりません。",
     },
     tabs: {
       general: "一般",
@@ -113,7 +115,7 @@ export const ja = {
       showToken: "トークンを表示",
       tokenSaved: "トークンを保存しました",
       password: "パスワード",
-      passwordDescription: "この Studio アカウントのパスワードを変更します。",
+      passwordDescription: "この Unsloth アカウントのパスワードを変更します。",
       passwordDialog: {
         trigger: "パスワード変更",
         title: "パスワード変更",
@@ -226,7 +228,11 @@ export const ja = {
       avatarShape: "プロフィール写真の形状",
       avatarShapeCircle: "円形",
       avatarShapeRounded: "角丸",
-      chooseSloth: "またはナマケモノを選択",
+      greetingSloth: "挨拶にナマケモノを表示",
+      greetingSlothDescription: "チャットの挨拶にナマケモノを表示します。",
+      chooseSloth: "またはナマケモノのプロフィール画像を選択",
+      noPicture: "プロフィール画像なし",
+      noneLabel: "なし",
       nameSaved: "プロフィール名を保存しました",
       namePersistErrorTitle: "プロフィール名を永続化できませんでした",
       namePersistErrorDescription: "名前はこのセッション用に更新されましたが、再読み込み後に保持されない可能性があります。",
@@ -247,6 +253,95 @@ export const ja = {
         light: "ライト",
         dark: "ダーク",
       },
+      palette: {
+        label: "カラーパレット",
+        description: "Unsloth 全体で使用される配色。ライト・ダーク両対応。",
+        standard: "スタンダード",
+        classic: "クラシック",
+        minimal: "ミニマル",
+      },
+      custom: {
+        reset: "リセット",
+        resetAll: "カスタマイズをリセット",
+        preferencesTitle: "環境設定",
+        colors: {
+          lightGroup: "ライトテーマ",
+          darkGroup: "ダークテーマ",
+          accent: "アクセント",
+          background: "背景",
+          foreground: "文字色",
+        },
+        fontDefault: "デフォルト",
+        fontBundledGroup: "内蔵",
+        fontImportedGroup: "インポート済み",
+        fontDeviceGroup: "このデバイス",
+        fontFolderGroup: "フォルダから",
+        fontDeviceLoading: "デバイスのフォントを検索中…",
+        fontSearch: "フォントを検索…",
+        fontNoResults: "フォントが見つかりません。",
+        colorPicker: {
+          hue: "色相",
+          hex: "16進カラー",
+          eyedropper: "画面から色を選択",
+        },
+        uiFont: {
+          label: "UI フォント",
+        },
+        headingFont: {
+          label: "見出しフォント",
+        },
+        chatFont: {
+          label: "チャットフォント",
+        },
+        codeFont: {
+          label: "コードフォント",
+        },
+        importFont: {
+          upload: "アップロード",
+          scanFolder: "フォルダを選択",
+          alreadyAvailable: "このフォントは既に利用可能なため、既存のものを使用します。",
+          folderNoFonts: "そのフォルダにフォントファイルが見つかりませんでした。",
+          remove: "削除",
+          errorInvalidType:
+            "サポートされていないファイル形式です。.woff2、.woff、.ttf、.otf を使用してください。",
+          errorTooLarge: "フォントファイルが大きすぎます（最大 1.5 MB）。",
+          errorLimit: "インポートできるフォントは最大 3 つです。",
+          errorStorageFull: "ローカルストレージの空き容量が足りません。先にインポート済みフォントを削除してください。",
+          errorFailed: "このフォントファイルを読み込めませんでした。",
+        },
+        uiFontSize: {
+          label: "UI フォントサイズ",
+          description: "Unsloth UI の基本サイズを調整します。",
+        },
+        codeFontSize: {
+          label: "コードフォントサイズ",
+          description: "コードの基本サイズを調整します。",
+        },
+        fontSmoothing: {
+          label: "フォントスムージング",
+          description: "滑らかなアンチエイリアスを使用します。",
+        },
+        edgeFades: {
+          label: "エッジのフェード",
+          description: "パネル端でコンテンツをフェードします。オフにすると細い区切り線を表示します。",
+        },
+        contrast: {
+          label: "コントラスト",
+          description: "枠線と補助テキストの強さ。",
+        },
+        reduceMotion: {
+          label: "モーションを減らす",
+          description: "アニメーションを減らすか、システム設定に従います。",
+          system: "システム",
+          on: "オン",
+          off: "オフ",
+        },
+        pointerCursors: {
+          label: "ポインターカーソルを使用",
+          description:
+            "操作可能な要素にカーソルを合わせたときにポインターに変更します。",
+        },
+      },
       language: {
         title: "言語",
         label: "表示言語",
@@ -258,6 +353,13 @@ export const ja = {
         compactSidebar: "デフォルトでサイドバーを固定",
         compactSidebarDescription: "サイドバーをアイコンに折りたたまず、展開したままにします。",
       },
+      sidebarMenu: {
+        title: "サイドバーメニュー",
+        description:
+          "サイドバーのプロフィールメニュー項目の表示と並び順を変更します。設定、ヘルプ、ログアウト、シャットダウンは固定です。",
+        darkModeToggle: "ダークモード切り替え",
+        dragToReorder: "ドラッグして並べ替え",
+      },
     },
     resources: {
       title: "システム",
diff --git a/studio/frontend/src/i18n/locales/pt-br.ts b/studio/frontend/src/i18n/locales/pt-br.ts
index c49abe166b..751abbc922 100644
--- a/studio/frontend/src/i18n/locales/pt-br.ts
+++ b/studio/frontend/src/i18n/locales/pt-br.ts
@@ -91,6 +91,8 @@ export const ptBR = {
       title: "Configurações",
       description: "Gerencie suas preferências do Unsloth.",
       closeAriaLabel: "Fechar configurações",
+      searchPlaceholder: "Pesquisar configurações…",
+      searchNoResults: "Nenhuma configuração encontrada.",
     },
     tabs: {
       general: "Geral",
@@ -113,7 +115,7 @@ export const ptBR = {
       hideToken: "Ocultar token",
       showToken: "Mostrar token",
       password: "Senha",
-      passwordDescription: "Altere a senha desta conta do Studio.",
+      passwordDescription: "Altere a senha desta conta do Unsloth.",
       passwordDialog: {
         trigger: "Alterar senha",
         title: "Alterar senha",
@@ -247,7 +249,11 @@ export const ptBR = {
       avatarShape: "Formato da foto de perfil",
       avatarShapeCircle: "Círculo",
       avatarShapeRounded: "Arredondado",
-      chooseSloth: "Ou escolha uma preguiça",
+      greetingSloth: "Preguiça na saudação",
+      greetingSlothDescription: "Mostra a preguiça na saudação do chat.",
+      chooseSloth: "Ou escolha uma preguiça como foto de perfil",
+      noPicture: "Sem foto de perfil",
+      noneLabel: "Nenhuma",
       nameSaved: "Nome de perfil salvo",
       namePersistErrorTitle: "Não foi possível persistir o nome de perfil",
       namePersistErrorDescription:
@@ -270,6 +276,95 @@ export const ptBR = {
         light: "Claro",
         dark: "Escuro",
       },
+      palette: {
+        label: "Paleta de cores",
+        description: "Cores usadas no Unsloth, nos modos claro e escuro.",
+        standard: "Padrão",
+        classic: "Clássico",
+        minimal: "Minimalista",
+      },
+      custom: {
+        reset: "Redefinir",
+        resetAll: "Redefinir personalização",
+        preferencesTitle: "Preferências",
+        colors: {
+          lightGroup: "Tema claro",
+          darkGroup: "Tema escuro",
+          accent: "Destaque",
+          background: "Fundo",
+          foreground: "Texto",
+        },
+        fontDefault: "Padrão",
+        fontBundledGroup: "Integradas",
+        fontImportedGroup: "Importadas",
+        fontDeviceGroup: "Neste dispositivo",
+        fontFolderGroup: "Da pasta",
+        fontDeviceLoading: "Procurando fontes do dispositivo…",
+        fontSearch: "Buscar fontes…",
+        fontNoResults: "Nenhuma fonte encontrada.",
+        colorPicker: {
+          hue: "Matiz",
+          hex: "Cor hexadecimal",
+          eyedropper: "Escolher uma cor da tela",
+        },
+        uiFont: {
+          label: "Fonte da interface",
+        },
+        headingFont: {
+          label: "Fonte de títulos",
+        },
+        chatFont: {
+          label: "Fonte do chat",
+        },
+        codeFont: {
+          label: "Fonte de código",
+        },
+        importFont: {
+          upload: "Enviar",
+          scanFolder: "Selecionar pasta",
+          alreadyAvailable: "Esta fonte já está disponível, então a cópia existente será usada.",
+          folderNoFonts: "Nenhum arquivo de fonte encontrado nessa pasta.",
+          remove: "Remover",
+          errorInvalidType:
+            "Tipo de arquivo não suportado. Use .woff2, .woff, .ttf ou .otf.",
+          errorTooLarge: "O arquivo de fonte é muito grande (máx. 1,5 MB).",
+          errorLimit: "Você pode importar até 3 fontes.",
+          errorStorageFull: "Sem espaço de armazenamento local para esta fonte. Remova uma fonte importada primeiro.",
+          errorFailed: "Não foi possível carregar este arquivo de fonte.",
+        },
+        uiFontSize: {
+          label: "Tamanho da fonte da interface",
+          description: "Ajuste o tamanho base da interface do Unsloth.",
+        },
+        codeFontSize: {
+          label: "Tamanho da fonte de código",
+          description: "Ajuste o tamanho base do código.",
+        },
+        fontSmoothing: {
+          label: "Suavização de fonte",
+          description: "Usar anti-aliasing suavizado nas fontes.",
+        },
+        edgeFades: {
+          label: "Esmaecimento nas bordas",
+          description: "Esmaece o conteúdo nas bordas dos painéis. Desligado mostra uma linha divisória fina.",
+        },
+        contrast: {
+          label: "Contraste",
+          description: "Intensidade das bordas e do texto secundário.",
+        },
+        reduceMotion: {
+          label: "Reduzir movimento",
+          description: "Reduza as animações ou siga o sistema.",
+          system: "Sistema",
+          on: "Ativado",
+          off: "Desativado",
+        },
+        pointerCursors: {
+          label: "Usar cursor de ponteiro",
+          description:
+            "Muda o cursor para ponteiro ao passar sobre elementos interativos.",
+        },
+      },
       language: {
         title: "Idioma",
         label: "Idioma de exibição",
@@ -282,10 +377,17 @@ export const ptBR = {
         compactSidebarDescription:
           "Mantém a barra lateral expandida em vez de recolhê-la em ícones.",
       },
+      sidebarMenu: {
+        title: "Menu da barra lateral",
+        description:
+          "Mostre, oculte e reordene os itens do menu de perfil da barra lateral. Configurações, Ajuda, Sair e Desligar permanecem fixos.",
+        darkModeToggle: "Alternador de modo escuro",
+        dragToReorder: "Arraste para reordenar",
+      },
     },
     resources: {
       title: "Sistema",
-      description: "Monitore o hardware e o armazenamento deste servidor Studio.",
+      description: "Monitore o hardware e o armazenamento deste servidor Unsloth.",
       liveUpdates: "Atualizações ao vivo",
       floatingWindow: "Janela flutuante",
       disableOverlay: "Desativar sobreposição",
diff --git a/studio/frontend/src/i18n/locales/zh-CN.ts b/studio/frontend/src/i18n/locales/zh-CN.ts
index 3909a23e16..ff1e9ead3b 100644
--- a/studio/frontend/src/i18n/locales/zh-CN.ts
+++ b/studio/frontend/src/i18n/locales/zh-CN.ts
@@ -91,6 +91,8 @@ export const zhCN = {
       title: "设置",
       description: "管理你的 Unsloth Studio 偏好设置。",
       closeAriaLabel: "关闭设置",
+      searchPlaceholder: "搜索设置…",
+      searchNoResults: "未找到设置。",
     },
     tabs: {
       general: "通用",
@@ -112,7 +114,7 @@ export const zhCN = {
       showToken: "显示 token",
       tokenSaved: "Token 已保存",
       password: "密码",
-      passwordDescription: "更改此 Studio 账号的密码。",
+      passwordDescription: "更改此 Unsloth 账号的密码。",
       passwordDialog: {
         trigger: "更改密码",
         title: "更改密码",
@@ -240,7 +242,11 @@ export const zhCN = {
       avatarShape: "头像形状",
       avatarShapeCircle: "圆形",
       avatarShapeRounded: "圆角矩形",
-      chooseSloth: "或选择一只树懒",
+      greetingSloth: "问候语中显示树懒",
+      greetingSlothDescription: "在对话问候语中显示树懒。",
+      chooseSloth: "或选择一只树懒作为头像",
+      noPicture: "无头像",
+      noneLabel: "无",
       nameSaved: "个人资料名称已保存",
       namePersistErrorTitle: "无法持久保存个人资料名称",
       namePersistErrorDescription:
@@ -269,11 +275,106 @@ export const zhCN = {
         light: "浅色",
         dark: "深色",
       },
+      palette: {
+        label: "调色板",
+        description: "Unsloth 全局使用的配色，支持浅色和深色模式。",
+        standard: "标准",
+        classic: "经典",
+        minimal: "极简",
+      },
+      custom: {
+        reset: "重置",
+        resetAll: "重置自定义",
+        preferencesTitle: "偏好设置",
+        colors: {
+          lightGroup: "浅色主题",
+          darkGroup: "深色主题",
+          accent: "强调色",
+          background: "背景",
+          foreground: "前景",
+        },
+        fontDefault: "默认",
+        fontBundledGroup: "内置",
+        fontImportedGroup: "已导入",
+        fontDeviceGroup: "此设备",
+        fontFolderGroup: "来自文件夹",
+        fontDeviceLoading: "正在查找设备字体…",
+        fontSearch: "搜索字体…",
+        fontNoResults: "未找到字体。",
+        colorPicker: {
+          hue: "色相",
+          hex: "十六进制颜色",
+          eyedropper: "从屏幕取色",
+        },
+        uiFont: {
+          label: "界面字体",
+        },
+        headingFont: {
+          label: "标题字体",
+        },
+        chatFont: {
+          label: "聊天字体",
+        },
+        codeFont: {
+          label: "代码字体",
+        },
+        importFont: {
+          upload: "上传",
+          scanFolder: "选择文件夹",
+          alreadyAvailable: "该字体已可用，将使用现有字体。",
+          folderNoFonts: "在该文件夹中未找到字体文件。",
+          remove: "移除",
+          errorInvalidType:
+            "不支持的文件类型。请使用 .woff2、.woff、.ttf 或 .otf。",
+          errorTooLarge: "字体文件过大（最大 1.5 MB）。",
+          errorLimit: "最多可导入 3 个字体。",
+          errorStorageFull: "本地存储空间不足。请先删除一个已导入的字体。",
+          errorFailed: "无法加载此字体文件。",
+        },
+        uiFontSize: {
+          label: "界面字号",
+          description: "调整 Unsloth 界面的基准字号。",
+        },
+        codeFontSize: {
+          label: "代码字号",
+          description: "调整代码的基准字号。",
+        },
+        fontSmoothing: {
+          label: "字体平滑",
+          description: "使用平滑的字体抗锯齿。",
+        },
+        edgeFades: {
+          label: "边缘淡出",
+          description: "在面板边缘淡出内容。关闭后显示细分隔线。",
+        },
+        contrast: {
+          label: "对比度",
+          description: "边框和次要文本的强度。",
+        },
+        reduceMotion: {
+          label: "减少动态效果",
+          description: "减少动画，或跟随系统设置。",
+          system: "跟随系统",
+          on: "开",
+          off: "关",
+        },
+        pointerCursors: {
+          label: "使用指针光标",
+          description: "悬停在可交互元素上时将光标变为指针。",
+        },
+      },
       layout: {
         title: "布局",
         compactSidebar: "默认固定侧边栏",
         compactSidebarDescription: "保持侧边栏展开，而不是折叠为图标。",
       },
+      sidebarMenu: {
+        title: "侧边栏菜单",
+        description:
+          "显示、隐藏和重新排序侧边栏个人菜单中的项目。设置、帮助、退出登录和关闭保持固定。",
+        darkModeToggle: "深色模式切换",
+        dragToReorder: "拖动以重新排序",
+      },
     },
     resources: {
       title: "系统",
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index a14643fefd..fdb1a92f0c 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -93,6 +93,47 @@
 		);
 		mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
 	}
+
+	/* Edge fades off (Appearance setting): every dissolve above becomes a
+	   thin divider line at the same boundary. */
+	html.no-edge-fades .sidebar-scroll-fade.is-scrolled,
+	html.no-edge-fades .model-list-scroll.is-scrolled,
+	html.no-edge-fades .model-list-scroll.is-bottom-faded,
+	html.no-edge-fades .model-list-scroll.is-scrolled.is-bottom-faded,
+	html.no-edge-fades .rag-docs-bottom-fade {
+		-webkit-mask-image: none;
+		mask-image: none;
+	}
+	html.no-edge-fades .sidebar-scroll-fade.is-scrolled {
+		border-top: 1px solid var(--sidebar-border);
+	}
+	html.no-edge-fades .sidebar-bottom-fade::after {
+		height: 1px;
+		background: var(--sidebar-border);
+	}
+	html.no-edge-fades .model-list-scroll.is-scrolled {
+		border-top: 1px solid var(--border);
+	}
+	html.no-edge-fades .model-list-scroll.is-bottom-faded {
+		border-bottom: 1px solid var(--border);
+	}
+	html.no-edge-fades .rag-docs-bottom-fade {
+		border-bottom: 1px solid var(--border);
+	}
+	/* Chat thread: gradient wash above the composer becomes a hairline at
+	   its top edge; the chat header's under-fade becomes a hairline too.
+	   !important beats the Tailwind gradient/mask utilities on the nodes. */
+	html.no-edge-fades .thread-bottom-fade {
+		background: none !important;
+		backdrop-filter: none !important;
+		-webkit-mask-image: none !important;
+		mask-image: none !important;
+		border-top: 1px solid var(--border);
+	}
+	html.no-edge-fades .chat-header-fade {
+		background: none !important;
+		border-top: 1px solid var(--border);
+	}
 }
 
 @layer base {
@@ -101,7 +142,8 @@
 	h3,
 	[data-slot="dialog-title"],
 	[data-slot="alert-dialog-title"] {
-		font-family: "Hellix", "Space Grotesk Variable", var(--font-sans) !important;
+		/* Via the token so the heading-font setting applies here too. */
+		font-family: var(--font-heading) !important;
 		font-weight: 500 !important;
 	}
 }
@@ -164,14 +206,22 @@
 	--secondary-foreground: oklch(0.2868 0.0649 159.9823);
 	--muted: oklch(0.9702 0 0);
 	--muted-foreground: oklch(0.5486 0 0);
-	--accent: oklch(0.9596 0.0275 167.8295);
-	--accent-foreground: oklch(0.2868 0.0649 159.9823);
+	/* Hover/active washes are neutral grey (matches the sidebar), not the
+	   brand green; green stays on primary controls only. */
+	--accent: #ececec;
+	--accent-foreground: #262626;
 	--destructive: oklch(0.6368 0.2078 25.3313);
 	/* Bypass permissions accent: bright, saturated yellow (not dark gold). */
 	--bypass: #c99d00;
 	--border: oklch(0.9208 0.0101 164.8536);
 	--input: oklch(0.9208 0.0101 164.8536);
-	--ring: #17b88b;
+	--ring: #262626;
+	/* Focus and selection indicators: the element's own border, darker.
+	   Derived from the live border/foreground tokens so every palette and
+	   mode gets the right shade from these definitions. Focus/hover uses the
+	   soft shade; selected state uses the deeper one (still never black). */
+	--ring-soft: color-mix(in srgb, var(--foreground) 22%, var(--border));
+	--ring-select: color-mix(in srgb, var(--foreground) 48%, var(--border));
 	--chart-1: #17b88b;
 	--chart-2: oklch(0.694 0.1395 136.6059);
 	--chart-3: oklch(0.7014 0.1193 197.5897);
@@ -184,10 +234,10 @@
 	--sidebar-foreground: oklch(0.1281 0.0179 169.2764);
 	--sidebar-primary: #17b88b;
 	--sidebar-primary-foreground: oklch(1 0 0);
-	--sidebar-accent: oklch(0.96 0.0279 166.55);
-	--sidebar-accent-foreground: oklch(0.2868 0.0649 159.9823);
+	--sidebar-accent: #ececec;
+	--sidebar-accent-foreground: #262626;
 	--sidebar-border: #f2f2f2;
-	--sidebar-ring: #17b88b;
+	--sidebar-ring: #262626;
 	--destructive-foreground: oklch(1 0 0);
 	--font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
 	--font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans);
@@ -258,6 +308,18 @@
 	--chat-icon-fg-hover: var(--foreground);
 	--chat-icon-bg-hover: #ededec;
 
+	/* Control accent: switches, "New" badges, notification-style chips.
+	   Follows the brand accent by default; palettes that keep their primary
+	   neutral (Classic) override this so small controls still get a hue.
+	   References resolve at use, so .dark's --primary flows through. */
+	--control-accent: var(--primary);
+	--control-accent-foreground: var(--primary-foreground);
+
+	/* Status color for meaning-carrying marks (verified badges, token
+	   indicators). Pinned to the brand green in every palette and mode so
+	   the signal never changes with the theme. */
+	--verified: #17b88b;
+
 	/* Standard interactive-icon size for nav, menus, action bars, and
 	   in-message code-block actions. Sized one step above body text so
 	   icons read as minimally larger than adjacent labels (~14px text).
@@ -271,48 +333,48 @@
 }
 
 .dark {
-	/* Exact palette from apps/studio/index_chat.html mockup. Using hex so the
-	   rendered surface matches the mockup pixel-for-pixel — OKLCH conversion
-	   drifted ~3% darker and shifted the neutral hue. */
-	/* Slightly darker than --sidebar so the sidebar reads as its own surface. */
-	--background: #1a1b1e;
-	--foreground: #ececee;
-	--card: #2d2e32;
-	--card-foreground: #ececee;
-	--popover: #2d2e32;
-	--popover-foreground: #ececee;
+	/* Dark surfaces shared by ALL palettes: #181818 page, elevated #1f1f1f
+	   sidebar, #212121 cards. Palette dark blocks override only accent
+	   tokens so dark mode stays consistent across themes. */
+	--background: #181818;
+	--foreground: #ececec;
+	--card: #212121;
+	--card-foreground: #ececec;
+	--popover: #212121;
+	--popover-foreground: #ececec;
 	--primary: #17b88b;
 	--primary-foreground: oklch(1 0 0);
-	--secondary: #2e3035;
-	--secondary-foreground: #ececee;
-	--muted: #2e3035;
-	--muted-foreground: #999999;
+	--secondary: #242424;
+	--secondary-foreground: #ececec;
+	--muted: #242424;
+	--muted-foreground: #9b9b9b;
 	/* One step lighter than --popover so menu item hover reads clearly. */
-	--accent: #3a3d43;
-	--accent-foreground: #ececee;
+	--accent: #2e2e2e;
+	--accent-foreground: #ececec;
 	--destructive: oklch(0.6368 0.2078 25.3313);
 	/* Bypass permissions accent: bright, saturated neon yellow on dark. */
 	--bypass: #ffd60a;
 	/* --border / --input one step lighter than --muted so outlines and form
 	   borders stay visible on muted surfaces (right config panel, export
 	   tiles, quant chips) and keep subtle contrast on card. */
-	--border: #3a3d42;
-	--input: #3a3d42;
-	--ring: #17b88b;
+	--border: #303030;
+	--input: #303030;
+	--ring: #ececec;
 	--chart-1: oklch(0.7511 0.1407 166.2284);
 	--chart-2: oklch(0.75 0.14 136.5572);
 	--chart-3: oklch(0.7554 0.1285 197.339);
 	--chart-4: oklch(0.7503 0.1199 346.7805);
 	--chart-5: oklch(0.799 0.1196 84.6633);
-	/* A step lighter than --background; the tone difference is the separator. */
-	--sidebar: #1f2023;
-	--sidebar-foreground: #ececee;
+	/* Elevated a step lighter than --background; the tone difference is
+	   the separator. */
+	--sidebar: #1f1f1f;
+	--sidebar-foreground: #ececec;
 	--sidebar-primary: #17b88b;
 	--sidebar-primary-foreground: oklch(1 0 0);
-	--sidebar-accent: #2e3035;
-	--sidebar-accent-foreground: #ececee;
-	--sidebar-border: #2d2e32;
-	--sidebar-ring: #17b88b;
+	--sidebar-accent: #2a2a2a;
+	--sidebar-accent-foreground: #ececec;
+	--sidebar-border: #2a2a2a;
+	--sidebar-ring: #ececec;
 	--destructive-foreground: oklch(1 0 0);
 	/* Match light's radius so every rounded-* element is the same in both themes. */
 	--radius: 1.1rem;
@@ -336,21 +398,23 @@
 	--shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px hsl(0 0% 0% / 0);
 	--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);
 
-	--nav-fg: #c7c7c4;
-	--nav-fg-muted: #96979b;
-	--nav-surface-hover: #2e3035;
+	--nav-fg: #c9c9c9;
+	--nav-fg-muted: #969696;
+	--nav-surface-hover: #2a2a2a;
 	--nav-icon-idle: #5c5c5c;
-	--nav-beta-border: #3a3c3f;
-	--panel-surface-hover: #3a3c42;
+	--nav-beta-border: #333333;
+	--panel-surface-hover: #333333;
 	/* Right-side chat-parameters panel: matches the chat content
 	   surface in both themes — distinction from the left sidebar
-	   (#18181a, the deepest surface) is handled by the left border
-	   alone. Tracks `--background` so any future tweaks to the chat
-	   surface flow through automatically. */
+	   is handled by the left border alone. Tracks `--background` so
+	   any future tweaks to the chat surface flow through
+	   automatically. */
 	--panel-surface: var(--background);
 	--panel-surface-fg: var(--foreground);
-	--panel-input-surface: #2a2b2e;
-	--panel-input-surface-hover: #34373c;
+	/* Translucent white so the same fill reads correctly on the #181818
+	   page AND on #212121 cards/dialogs. */
+	--panel-input-surface: rgba(255, 255, 255, 0.07);
+	--panel-input-surface-hover: rgba(255, 255, 255, 0.11);
 	/* Soft neutral gray for muted text and sliders. Pure-ish #ababab
 	   reads as quiet on the dark panel without going colored. */
 	--panel-surface-fg-muted: #ababab;
@@ -362,13 +426,296 @@
 	   hover restores full --foreground for affordance. */
 	--chat-icon-fg: #d8d8d8;
 	--chat-icon-fg-hover: var(--foreground);
-	--chat-icon-bg-hover: #2d2e32;
+	--chat-icon-bg-hover: #2a2a2a;
+}
+
+/* ---------------------------------------------------------------------------
+   Color palettes.
+
+   The palette is a second theming dimension, orthogonal to light/dark. It is
+   carried on <html> as `data-palette` (managed by theme-store.ts alongside the
+   light/dark class):
+
+     (no attribute)            → Standard: the signature Unsloth green.
+     data-palette="classic"    → Classic: neutral grays with a calm blue
+                                 accent; enterprise-safe.
+     data-palette="minimal"    → Minimal: strictly black, white, and gray.
+
+   Each palette overrides only color tokens; typography, radii, spacing, and
+   shadows are inherited from the base :root/.dark blocks so layout is
+   identical across palettes. Light blocks are scoped with :not(.dark) so the
+   base .dark block always wins the mode dimension. */
+
+/* -------------------------------- Classic --------------------------------
+   White content and the standard white sidebar in light, shared dark
+   surfaces in dark, neutral gray hovers, and blue (#339cff) as the accent. */
+:root[data-palette="classic"]:not(.dark) {
+	--background: #ffffff;
+	--foreground: #1a1c1f;
+	--card: #ffffff;
+	--card-foreground: #1a1c1f;
+	--popover: #ffffff;
+	--popover-foreground: #1a1c1f;
+	/* Neutral black primary; blue is reserved for small controls via
+	   --control-accent (toggles, badges, focus rings). */
+	--primary: #0d0d0d;
+	--primary-foreground: #ffffff;
+	--control-accent: #339cff;
+	--control-accent-foreground: #ffffff;
+	--secondary: #f5f5f5;
+	--secondary-foreground: #1a1c1f;
+	--muted: #f7f7f7;
+	--muted-foreground: #8f8f8f;
+	--accent: #ececec;
+	--accent-foreground: #1a1c1f;
+	--bypass: #9a7b1e;
+	--border: #e6e6e6;
+	--input: #e6e6e6;
+	--ring: #1a1c1f;
+	--chart-1: #339cff;
+	--chart-2: #8fa3b8;
+	--chart-3: #0f6fd6;
+	--chart-4: #b8c4d0;
+	--chart-5: #5b7189;
+	/* Same as the standard palette; the sidebar surface does not change
+	   with the palette. */
+	--sidebar: #ffffff;
+	--sidebar-foreground: #1a1c1f;
+	--sidebar-primary: #0d0d0d;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #ececec;
+	--sidebar-accent-foreground: #1a1c1f;
+	--sidebar-border: #f2f2f2;
+	--sidebar-ring: #1a1c1f;
+
+	--nav-fg: #2d2f31;
+	--nav-fg-muted: #8f8f8f;
+	--nav-surface-hover: #ececec;
+	--nav-icon-idle: #8f8f8f;
+	--nav-beta-border: #e0e0e0;
+	--panel-surface-hover: #ececec;
+	--panel-input-surface: #f4f4f4;
+	--panel-input-surface-hover: #ededed;
+	--panel-surface-fg-muted: #7a7c7e;
+	--panel-slider-fg: #9b9d9f;
+	--chat-icon-fg: #5d5f61;
+	--chat-icon-bg-hover: #ececec;
+}
+
+/* Dark surfaces come from the shared base .dark block; Classic only swaps
+   the accents: neutral (white) buttons, blue on small controls via
+   --control-accent. */
+:root[data-palette="classic"].dark {
+	--primary: #ececec;
+	--primary-foreground: #0d0d0d;
+	--control-accent: #4dabff;
+	--control-accent-foreground: #ffffff;
+	--bypass: #d9b40b;
+	--ring: #ececec;
+	--chart-1: #4dabff;
+	--chart-2: #8ab6de;
+	--chart-3: #1f7fe8;
+	--chart-4: #b3d4f5;
+	--chart-5: #6d87a3;
+	--sidebar-primary: #ececec;
+	--sidebar-primary-foreground: #0d0d0d;
+	--sidebar-ring: #ececec;
+}
+
+/* -------------------------------- Minimal -------------------------------- */
+:root[data-palette="minimal"]:not(.dark) {
+	--background: #ffffff;
+	--foreground: #171717;
+	--card: #ffffff;
+	--card-foreground: #171717;
+	--popover: #ffffff;
+	--popover-foreground: #171717;
+	--primary: #171717;
+	--primary-foreground: #ffffff;
+	--secondary: #f5f5f5;
+	--secondary-foreground: #262626;
+	--muted: #f5f5f5;
+	--muted-foreground: #6f6f6f;
+	--accent: #ebebeb;
+	--accent-foreground: #171717;
+	--bypass: #6f6f6f;
+	--border: #e2e2e2;
+	--input: #e2e2e2;
+	--ring: #171717;
+	--chart-1: #171717;
+	--chart-2: #4d4d4d;
+	--chart-3: #7a7a7a;
+	--chart-4: #a6a6a6;
+	--chart-5: #d1d1d1;
+	/* White sidebar on white content; the border alone is the separator. */
+	--sidebar: #ffffff;
+	--sidebar-foreground: #171717;
+	--sidebar-primary: #171717;
+	--sidebar-primary-foreground: #ffffff;
+	--sidebar-accent: #ebebeb;
+	--sidebar-accent-foreground: #171717;
+	--sidebar-border: #e8e8e8;
+	--sidebar-ring: #171717;
+
+	--nav-fg: #333333;
+	--nav-fg-muted: #8a8a8a;
+	--nav-surface-hover: #efefef;
+	--nav-icon-idle: #8f8f8f;
+	--nav-beta-border: #dddddd;
+	--panel-surface-hover: #ececec;
+	--panel-input-surface: #f4f4f4;
+	--panel-input-surface-hover: #ededed;
+	--panel-surface-fg-muted: #757575;
+	--panel-slider-fg: #9b9b9b;
+	--chat-icon-fg: #555555;
+	--chat-icon-bg-hover: #ececec;
+}
+
+/* Dark surfaces come from the shared base .dark block; Minimal only swaps
+   the accents to pure monochrome (white buttons, gray chart ramp). */
+:root[data-palette="minimal"].dark {
+	--primary: #ededed;
+	--primary-foreground: #111111;
+	--bypass: #9c9c9c;
+	--ring: #ededed;
+	--chart-1: #ededed;
+	--chart-2: #bdbdbd;
+	--chart-3: #8f8f8f;
+	--chart-4: #616161;
+	--chart-5: #3d3d3d;
+	--sidebar-primary: #ededed;
+	--sidebar-primary-foreground: #111111;
+	--sidebar-ring: #ededed;
+}
+
+/* ---------------------------------------------------------------------------
+   Appearance customization hooks (Settings → Appearance).
+
+   Every rule below is gated on a class or data attribute that
+   appearance-custom-store.ts toggles on <html>. With no customization active,
+   none of these selectors match and the stylesheet behaves exactly as stock.
+   Custom colors/fonts are applied as inline CSS variables on <html> (inline
+   wins over every :root/.dark/palette block), so they need no rules here. */
+
+/* Contrast slider: remap border and muted-text tokens by mixing their base
+   values toward the foreground (higher contrast) or background (lower).
+   --input mirrors --border in every palette, so it serves as the untouched
+   base for --border; --panel-surface-fg-muted is the closest stable base for
+   --muted-foreground. --contrast-mix / --contrast-target are set inline. */
+html[data-contrast-adjust] {
+	--border: color-mix(in oklab, var(--input), var(--contrast-target) var(--contrast-mix));
+	--sidebar-border: color-mix(in oklab, var(--input), var(--contrast-target) var(--contrast-mix));
+	--muted-foreground: color-mix(
+		in oklab,
+		var(--panel-surface-fg-muted),
+		var(--contrast-target) var(--contrast-mix)
+	);
+}
+
+/* Code font size: only overrides when the user sets an explicit size, so the
+   per-element Tailwind sizes stay authoritative by default. */
+html[data-code-font-size] :is(pre, code, kbd, samp) {
+	font-size: var(--custom-code-font-size) !important;
+}
+
+/* Pointer cursors: hand cursor over interactive elements. */
+html.pointer-cursors
+	:is(
+		button:not(:disabled),
+		[role="button"],
+		a[href],
+		select,
+		summary,
+		[role="tab"],
+		[role="menuitem"],
+		[role="option"],
+		[role="switch"],
+		[role="checkbox"],
+		input[type="checkbox"],
+		input[type="radio"],
+		input[type="range"],
+		label[for]
+	) {
+	cursor: pointer;
+}
+
+/* Force reduced motion: collapses CSS animations/transitions app-wide.
+   JS-driven springs are handled separately via MotionConfig in the provider. */
+html.force-reduced-motion *,
+html.force-reduced-motion *::before,
+html.force-reduced-motion *::after {
+	animation-duration: 0.01ms !important;
+	animation-iteration-count: 1 !important;
+	transition-duration: 0.01ms !important;
+	scroll-behavior: auto !important;
+}
+
+/* Same loader exceptions as the OS-level media block below: freezing
+   spinners removes the only signal that work is in flight. */
+html.force-reduced-motion .animate-spin {
+	animation-duration: 1.5s !important;
+	animation-iteration-count: infinite !important;
+}
+html.force-reduced-motion .generated-image-loading-dot {
+	animation-duration: 1850ms !important;
+	animation-iteration-count: infinite !important;
+}
+html.force-reduced-motion .loading-bar-slide {
+	animation-duration: 1.3s !important;
+	animation-iteration-count: infinite !important;
+}
+html.force-reduced-motion .unsloth-composer-plus svg {
+	transition-duration: 250ms !important;
+}
+
+/* Font smoothing toggle: back to the browser's subpixel default. */
+html.no-font-smoothing body {
+	-webkit-font-smoothing: auto;
+	-moz-osx-font-smoothing: auto;
+}
+
+/* Chat font: only applies while a custom chat font is set. Elements with
+   explicit font utilities (headings, code) keep their own families. */
+html[data-chat-font] .aui-root {
+	font-family: var(--custom-chat-font);
+}
+
+/* Palette cards: the active ring keys off html[data-palette] so it swaps
+   in the same style pass that swaps the color tokens. Driving it from
+   React state paints one frame late while the whole page recalculates,
+   which briefly leaves the ring on the previous card. */
+.palette-card:hover {
+	border-color: var(--ring-soft);
+}
+:root:not([data-palette]) .palette-card[data-palette-value="standard"],
+:root[data-palette="classic"] .palette-card[data-palette-value="classic"],
+:root[data-palette="minimal"] .palette-card[data-palette-value="minimal"] {
+	/* Selection keeps the card's own border weight, only darker. */
+	border-color: var(--ring-select);
+}
+
+/* Settings search: brief highlight on the row a result jumped to. */
+.settings-search-hit {
+	animation: settings-search-hit 1.6s ease-out;
+	border-radius: 12px;
+}
+@keyframes settings-search-hit {
+	0%,
+	35% {
+		background-color: var(--accent);
+	}
+	100% {
+		background-color: transparent;
+	}
 }
 
 @theme inline {
-	--font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
-	--font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans);
-	--color-sidebar-ring: var(--sidebar-ring);
+	/* Reference the :root tokens instead of literal stacks so the runtime
+	   font overrides (Settings > Appearance) reach every font-* utility. */
+	--font-sans: var(--font-sans);
+	--font-heading: var(--font-heading);
+	--color-verified: var(--verified);
+	--color-sidebar-ring: var(--ring-soft);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-accent: var(--sidebar-accent);
@@ -382,7 +729,11 @@
 	--color-chart-2: var(--chart-2);
 	--color-chart-1: var(--chart-1);
 	--color-code-block: #181818;
-	--color-ring: var(--ring);
+	/* Tailwind ring/border/outline "ring" utilities are focus indicators
+	   across the app, so they map to the soft derived shade; persistent
+	   selection styling uses ring-strong (the raw --ring). */
+	--color-ring: var(--ring-soft);
+	--color-ring-strong: var(--ring-select);
 	--color-input: var(--input);
 	--color-border: var(--border);
 	--color-destructive: var(--destructive);
@@ -395,6 +746,8 @@
 	--color-secondary: var(--secondary);
 	--color-primary-foreground: var(--primary-foreground);
 	--color-primary: var(--primary);
+	--color-control-accent: var(--control-accent);
+	--color-control-accent-foreground: var(--control-accent-foreground);
 	--color-popover-foreground: var(--popover-foreground);
 	--color-popover: var(--popover);
 	--color-card-foreground: var(--card-foreground);
@@ -408,8 +761,8 @@
 	--radius-2xl: calc(var(--radius) + 8px);
 	--radius-3xl: calc(var(--radius) + 12px);
 	--radius-4xl: calc(var(--radius) + 16px);
-	--font-mono: JetBrains Mono, monospace;
-	--font-serif: Source Serif 4, serif;
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
 	--radius: 1.1rem;
 	--tracking-tighter: 0em;
 	--tracking-tight: 0em;
@@ -444,6 +797,8 @@
 	--color-panel-surface: var(--panel-surface);
 	--color-panel-surface-fg: var(--panel-surface-fg);
 	--color-panel-surface-fg-muted: var(--panel-surface-fg-muted);
+	--color-panel-input-surface: var(--panel-input-surface);
+	--color-panel-input-surface-hover: var(--panel-input-surface-hover);
 	--color-chat-icon-fg: var(--chat-icon-fg);
 	--color-chat-icon-fg-hover: var(--chat-icon-fg-hover);
 	--color-chat-icon-bg-hover: var(--chat-icon-bg-hover);
@@ -537,6 +892,26 @@
 		margin-right: 0 !important;
 	}
 
+	/* Firefox makes scrollable containers keyboard focusable; swap the 3px
+	   UA outline for the app's soft 1px indicator. :where keeps specificity
+	   at zero so interactive components keep their own focus styles. */
+	:where(div, main, section, aside, ul, ol):focus-visible {
+		outline: 1px solid var(--ring-soft);
+		outline-offset: -1px;
+	}
+
+	/* Number fields use the shared grey stepper instead of native spinners. */
+	input[type="number"] {
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+
+	input[type="number"]::-webkit-inner-spin-button,
+	input[type="number"]::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
 	h1,
 	h2,
 	h3,
@@ -567,7 +942,7 @@
 	}
 
 	.nav-icon-btn {
-		@apply inline-flex h-7 w-7 items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
+		@apply inline-flex h-7 w-7 items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
 	}
 
 	/* Standard icon size — drives every nav/menu/action-bar icon
@@ -632,7 +1007,7 @@
 	   alignment, but width is tighter so the small chevron glyph reads
 	   as a compact control rather than a full-size icon button. */
 	.aui-branch-chevron-btn {
-		@apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-full p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent;
+		@apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-full p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent;
 	}
 	.sidebar-row-action:hover .sidebar-row-action-glyph,
 	.sidebar-row-action[data-state="open"] .sidebar-row-action-glyph {
@@ -662,30 +1037,46 @@
 		color: #9aa0a6;
 		letter-spacing: 0;
 	}
-	/* Neutral panel input surface — sidesteps the green cast on
-	   `--input` / `--border` (both have a small chroma at hue ~165 in
-	   light mode). Same value drives the preset input pill, the system
-	   prompt button, and the chat-template textarea so all three read
-	   as one quiet gray family, matching the focused-edit-number tint. */
+	/* Panel input fields. Light mode matches the settings fields: white
+	   fill with a subtle border. Dark mode keeps the borderless
+	   translucent surface shared with the rest of the panel. */
 	.panel-input-group {
 		@apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-full pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none;
-		border: 0 !important;
-		background-color: var(--panel-input-surface);
+		border: 1px solid var(--border) !important;
+		background-color: var(--background);
 	}
 	.panel-input-group:has([data-slot="input-group-control"]:focus-visible) {
-		border: 0 !important;
+		border-color: var(--ring-soft) !important;
 		box-shadow: none;
 	}
-
-	/* Neutral surface for the larger panel text containers — system
-	   prompt preview button and chat-template textarea — so they share
-	   the same gray as the preset input pill and don't pick up the
-	   theme's slight green-cast `--input`. */
-	.panel-text-surface {
-		@apply rounded-[20px] border-0 transition-colors;
+	.dark .panel-input-group,
+	.dark .panel-input-group:has([data-slot="input-group-control"]:focus-visible) {
+		border: 0 !important;
 		background-color: var(--panel-input-surface);
 	}
-	.panel-text-surface:hover {
+
+	/* Larger panel text containers (system prompt preview button and
+	   chat-template textarea) share the same treatment. */
+	.panel-text-surface {
+		@apply rounded-[20px] transition-colors;
+		border: 1px solid var(--border);
+		background-color: var(--background);
+	}
+	.dark .panel-text-surface {
+		border-color: transparent;
+		background-color: var(--panel-input-surface);
+	}
+	.dark .panel-text-surface:hover {
+		border-color: transparent;
+		background-color: var(--panel-input-surface-hover);
+	}
+	/* Typing/clicking into the box darkens its border (dark mode surfaces are
+	   borderless, so the brighter hover fill marks focus there). */
+	.panel-text-surface:focus-within {
+		border-color: var(--ring-soft);
+	}
+	.dark .panel-text-surface:focus-within {
+		border-color: transparent;
 		background-color: var(--panel-input-surface-hover);
 	}
 
@@ -1321,7 +1712,7 @@
 	.unsloth-thinking-pill:focus-visible,
 	.unsloth-composer-plus:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 45%, transparent);
+		box-shadow: 0 0 0 1px var(--ring-soft);
 	}
 
 	/* Clickable controls never show the browser's blue outline (Radix re-focuses
@@ -1335,17 +1726,33 @@
 	[role="button"]:focus {
 		outline: none !important;
 	}
-	button:focus:not(:focus-visible),
+	/* Pressed controls are exempt: their ring marks SELECTION, and the just
+	   clicked control is exactly the one holding mouse focus. */
+	button:focus:not(:focus-visible):not([aria-pressed="true"]),
 	a:focus:not(:focus-visible),
 	summary:focus:not(:focus-visible),
-	[role="button"]:focus:not(:focus-visible) {
+	[role="button"]:focus:not(:focus-visible):not([aria-pressed="true"]) {
 		--tw-ring-shadow: 0 0 #0000 !important;
 		--tw-ring-offset-shadow: 0 0 #0000 !important;
 	}
 
-	/* Set Hellix explicitly; .aui-thread-root resets --font-heading to sans. */
+	/* The greeting is a heading: it follows the user's heading font and
+	   defaults to Hellix. Restored on the element because the base h1 rule
+	   reads --font-heading with !important and .aui-thread-root resets
+	   that var to sans for chat prose. */
 	.unsloth-welcome-title {
-		font-family: "Hellix", "Space Grotesk Variable", var(--font-sans);
+		--font-heading: var(
+			--custom-heading-font,
+			"Hellix",
+			"Space Grotesk Variable",
+			var(--font-sans)
+		);
+		font-family: var(
+			--custom-heading-font,
+			"Hellix",
+			"Space Grotesk Variable",
+			var(--font-sans)
+		);
 		font-weight: 500;
 	}
 
@@ -1518,7 +1925,7 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.chat-artifact-pop-surface {
+		html:not(.force-motion) .chat-artifact-pop-surface {
 			transition: none;
 			transform: none;
 		}
@@ -1775,14 +2182,15 @@
 		margin-bottom: 0 !important;
 	}
 
-	/* Keep monospace for code fences and inline code (not KaTeX). */
+	/* Keep monospace for code fences and inline code (not KaTeX). The custom
+	   Code font (--custom-code-font) overrides when set, else Fira Code. */
 	.aui-thread-root [data-streamdown="code-block"] pre,
 	.aui-thread-root [data-streamdown="code-block"] code {
-		font-family: "Fira Code", ui-monospace, monospace;
+		font-family: var(--custom-code-font, "Fira Code", ui-monospace, monospace);
 	}
 
 	.aui-thread-root :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) code {
-		font-family: "Fira Code", ui-monospace, monospace;
+		font-family: var(--custom-code-font, "Fira Code", ui-monospace, monospace);
 	}
 
 	/* Align fenced code blocks with the main chat column even when nested in lists. */
@@ -2207,33 +2615,35 @@
  * so they keep animating.
  */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
+	/* html.force-motion (Reduce motion set to Off) opts back out of the
+	   OS preference, so these rules only apply without it. */
+	html:not(.force-motion) *,
+	html:not(.force-motion) *::before,
+	html:not(.force-motion) *::after {
 		animation-duration: 0.01ms !important;
 		animation-iteration-count: 1 !important;
 		transition-duration: 0.01ms !important;
 		scroll-behavior: auto !important;
 	}
 
-	.animate-spin {
+	html:not(.force-motion) .animate-spin {
 		animation-duration: 1.5s !important;
 		animation-iteration-count: infinite !important;
 	}
 
-	.generated-image-loading-dot {
+	html:not(.force-motion) .generated-image-loading-dot {
 		animation-duration: 1850ms !important;
 		animation-iteration-count: infinite !important;
 	}
 
-	.loading-bar-slide {
+	html:not(.force-motion) .loading-bar-slide {
 		animation-duration: 1.3s !important;
 		animation-iteration-count: infinite !important;
 	}
 
 	/* Keep the plus/x morph animating under reduced motion (small rotation,
 	   like the spinners above). */
-	.unsloth-composer-plus svg {
+	html:not(.force-motion) .unsloth-composer-plus svg {
 		transition-duration: 250ms !important;
 	}
 }
diff --git a/studio/frontend/src/lib/chevron-icons.ts b/studio/frontend/src/lib/chevron-icons.ts
index b1a74e9953..a175970223 100644
--- a/studio/frontend/src/lib/chevron-icons.ts
+++ b/studio/frontend/src/lib/chevron-icons.ts
@@ -19,6 +19,20 @@ export const ChevronDownStandardIcon: IconSvgElement = [
   ],
 ];
 
+export const ChevronUpStandardIcon: IconSvgElement = [
+  [
+    "path",
+    {
+      d: "M5.99977 15L11.9998 9.00005L17.9998 15",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      key: "0",
+    },
+  ],
+];
+
 export const ChevronRightStandardIcon: IconSvgElement = [
   [
     "path",
diff --git a/tests/studio/test_frontend_dep_removal.py b/tests/studio/test_frontend_dep_removal.py
index fb1b5ace7b..aead44f0cd 100644
--- a/tests/studio/test_frontend_dep_removal.py
+++ b/tests/studio/test_frontend_dep_removal.py
@@ -37,10 +37,11 @@ class Case:
 CASES: list[Case] = [
     Case(
         "C1",
-        "removing next-themes breaks 2 src imports",
-        ["next-themes"],
-        "FAIL",
+        "removing next-themes is a no-op: replaced by the custom theme store, "
+        "no longer a declared dep or src import",
         ["next-themes"],
+        "PASS",
+        [],
     ),
     Case(
         "C2",
@@ -85,10 +86,11 @@ CASES: list[Case] = [
     ),
     Case(
         "C8",
-        "multi-remove with mixed safety: next-themes + @huggingface/hub + dexie all unsafe",
+        "multi-remove with mixed safety: next-themes is now a no-op (removed), "
+        "@huggingface/hub + dexie still unsafe",
         ["next-themes", "@huggingface/hub", "dexie"],
         "FAIL",
-        ["next-themes", "@huggingface/hub", "dexie"],
+        ["@huggingface/hub", "dexie"],
     ),
     Case(
         "C9",