From 77738ab073f502ad8d364457a796d8d46ccb65d9 Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Thu, 2 Jul 2026 19:46:34 +0200
Subject: [PATCH 1/6] refactor(ui): migrate from DaisyUI to Nuxt UI only

Remove the DaisyUI dependency and theme plugins while preserving WolfStar
visual parity across light, dark, and midnight themes via Nuxt UI tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .claude/DESIGN.md                             | 406 +++++++++---------
 .cursor/mcp.json                              |   4 -
 .storybook/theme.ts                           |   6 +-
 .vscode/mcp.json                              |   5 -
 AGENTS.md                                     |   2 +-
 README.md                                     |   2 +-
 app/app.config.ts                             |  13 +-
 app/assets/css/main.css                       | 263 ++++++------
 app/assets/css/utilities.css                  | 103 ++---
 app/components/ActivitySection.vue            |   2 +-
 app/components/BuildEnvironment.vue           |  12 +-
 app/components/ColorModeButton.vue            |  33 +-
 app/components/OtherApps.vue                  |  19 +-
 app/components/UserMenu.vue                   |   4 +-
 app/components/app/Footer.vue                 |   4 +-
 app/components/app/Header.vue                 |   4 +-
 app/components/command/Base.vue               |  14 +-
 app/components/command/SubCategory.vue        |  16 +-
 app/components/discord/embed.vue              |   4 +-
 app/components/discord/inline-code.unused.vue |   2 +-
 app/components/discord/invite.vue             |   4 +-
 app/components/discord/message.vue            |   4 +-
 app/components/discord/time.unused.vue        |   2 +-
 app/components/guild/SettingsSection.vue      |   2 +-
 app/components/guild/card.vue                 |  16 +-
 app/components/guild/cards.vue                |  16 +-
 app/components/guild/icon.vue                 |  15 +-
 app/components/guild/logs/CommandLogTable.vue |   2 +-
 .../guild/logs/DashboardActivityTable.vue     |   2 +-
 app/components/guild/settings/Channels.vue    |   8 +-
 .../guild/settings/DisabledCommands.vue       |  10 +-
 app/components/guild/settings/Events.vue      |  12 +-
 app/components/guild/settings/General.vue     |  14 +-
 app/components/guild/settings/Moderation.vue  |   2 +-
 app/components/guild/settings/Roles.vue       |  12 +-
 app/components/pwa/Prompt.client.vue          |   2 +-
 app/layouts/dashboard.vue                     |  14 +-
 app/layouts/default.vue                       |   6 +-
 .../(app)/guilds/[...id]/manage.stories.ts    |   6 +-
 app/pages/(marketing)/privacy.vue             | 285 ++++++------
 app/pages/(marketing)/staryl/index.vue        |  10 +-
 app/pages/(marketing)/terms.vue               |  60 +--
 .../@components/FeatureCarousel.client.vue    |   6 +-
 .../@components/FeatureShowcase.client.vue    | 110 ++---
 app/pages/(marketing)/wolfstar/index.vue      |  31 +-
 app/pages/commands.vue                        |  22 +-
 app/pages/profile.vue                         | 100 ++---
 app/storybook/colors.mdx                      |  57 +--
 app/storybook/guidelines.mdx                  |  10 +-
 app/themes/avatar.ts                          |  48 ---
 app/themes/badge.ts                           |  99 -----
 app/themes/button.ts                          | 184 --------
 app/themes/index.ts                           |  12 -
 app/themes/link.ts                            |  15 -
 app/themes/navigation-menu.ts                 |  28 +-
 app/themes/skeleton.ts                        |   3 -
 app/themes/tabs.ts                            | 250 -----------
 nuxt.config.ts                                |   2 +-
 package.json                                  |   1 -
 pnpm-lock.yaml                                |   8 -
 60 files changed, 886 insertions(+), 1522 deletions(-)
 delete mode 100644 app/themes/avatar.ts
 delete mode 100644 app/themes/badge.ts
 delete mode 100644 app/themes/button.ts
 delete mode 100644 app/themes/link.ts
 delete mode 100644 app/themes/skeleton.ts
 delete mode 100644 app/themes/tabs.ts

diff --git a/.claude/DESIGN.md b/.claude/DESIGN.md
index 5cbc5e944..be3a4694f 100644
--- a/.claude/DESIGN.md
+++ b/.claude/DESIGN.md
@@ -3,174 +3,174 @@ version: alpha
 name: WolfStar.rocks
 description: Architectural Night Sky — a sophisticated dashboard aesthetic blending an evocative dark hero with a minimalist, architectural light UI. Calm authority and advanced technology through precise achromatic forms and a cool indigo accent.
 colors:
-  primary: oklch(58% 0.233 277.117)
-  secondary: oklch(0.5873 0.0204 272.13)
-  accent: oklch(60% 0.152 181.912)
-  neutral: oklch(14% 0.005 285.823)
-  branding-wolfstar: oklch(63% 0.2502 28.13)
-  branding-staryl: oklch(0.5873 0.0204 272.13)
-  base-100: oklch(100% 0 0)
-  base-200: oklch(90% 0 0)
-  base-300: oklch(85% 0 0)
-  base-content: oklch(0% 0 0)
-  info: oklch(55% 0.16 232.661)
-  success: oklch(76% 0.177 163.223)
-  warning: oklch(82% 0.189 84.429)
-  error: oklch(71% 0.194 13.428)
+    primary: oklch(58% 0.233 277.117)
+    secondary: oklch(0.5873 0.0204 272.13)
+    accent: oklch(60% 0.152 181.912)
+    neutral: oklch(14% 0.005 285.823)
+    branding-wolfstar: oklch(63% 0.2502 28.13)
+    branding-staryl: oklch(0.5873 0.0204 272.13)
+    base-100: oklch(100% 0 0)
+    base-200: oklch(90% 0 0)
+    base-300: oklch(85% 0 0)
+    base-content: oklch(0% 0 0)
+    info: oklch(55% 0.16 232.661)
+    success: oklch(76% 0.177 163.223)
+    warning: oklch(82% 0.189 84.429)
+    error: oklch(71% 0.194 13.428)
 typography:
-  caption:
-    fontFamily: Inter
-    fontSize: 13px
-    fontWeight: 400
-    lineHeight: 1.5
-    letterSpacing: -0.13px
-  button-label:
-    fontFamily: Inter
-    fontSize: 16px
-    fontWeight: 500
-    lineHeight: 1
-    letterSpacing: -0.19px
-  subheading:
-    fontFamily: Inter
-    fontSize: 18px
-    fontWeight: 400
-    lineHeight: 1.2
-    letterSpacing: -0.18px
-  heading:
-    fontFamily: Inter
-    fontSize: 40px
-    fontWeight: 700
-    lineHeight: 1.1
-    letterSpacing: -0.8px
-  heading-lg:
-    fontFamily: Inter
-    fontSize: 48px
-    fontWeight: 700
-    lineHeight: 1.1
-    letterSpacing: -0.96px
-  display:
-    fontFamily: Inter
-    fontSize: 54px
-    fontWeight: 700
-    lineHeight: 1.1
-    letterSpacing: -1.08px
+    caption:
+        fontFamily: Inter
+        fontSize: 13px
+        fontWeight: 400
+        lineHeight: 1.5
+        letterSpacing: -0.13px
+    button-label:
+        fontFamily: Inter
+        fontSize: 16px
+        fontWeight: 500
+        lineHeight: 1
+        letterSpacing: -0.19px
+    subheading:
+        fontFamily: Inter
+        fontSize: 18px
+        fontWeight: 400
+        lineHeight: 1.2
+        letterSpacing: -0.18px
+    heading:
+        fontFamily: Inter
+        fontSize: 40px
+        fontWeight: 700
+        lineHeight: 1.1
+        letterSpacing: -0.8px
+    heading-lg:
+        fontFamily: Inter
+        fontSize: 48px
+        fontWeight: 700
+        lineHeight: 1.1
+        letterSpacing: -0.96px
+    display:
+        fontFamily: Inter
+        fontSize: 54px
+        fontWeight: 700
+        lineHeight: 1.1
+        letterSpacing: -1.08px
 spacing:
-  xs: 4px
-  sm: 8px
-  md: 16px
-  lg: 32px
-  xl: 64px
-  section-gap: 32px
-  card-padding: 16px
-  element-gap: 8px
+    xs: 4px
+    sm: 8px
+    md: 16px
+    lg: 32px
+    xl: 64px
+    section-gap: 32px
+    card-padding: 16px
+    element-gap: 8px
 rounded:
-  sm: 6px
-  md: 8px
-  lg: 12px
-  full: 9999px
+    sm: 6px
+    md: 8px
+    lg: 12px
+    full: 9999px
 components:
-  ghost-button:
-    backgroundColor: "{colors.base-100}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.button-label}"
-    rounded: 0px
-    padding: 5px 12px
-  subtle-nav-button:
-    backgroundColor: "rgba(255, 255, 255, 0.06)"
-    textColor: "{colors.base-content}"
-    typography: "{typography.button-label}"
-    rounded: "{rounded.md}"
-    padding: 5px 12px
-  solid-dark-button:
-    backgroundColor: "{colors.neutral}"
-    textColor: "{colors.base-100}"
-    typography: "{typography.button-label}"
-    rounded: "{rounded.md}"
-    padding: 7px 16px 8px 12px
-  outlined-action-button:
-    backgroundColor: "{colors.base-100}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.button-label}"
-    rounded: "{rounded.sm}"
-    padding: 5px 12px
-  blurred-nav-item:
-    backgroundColor: "{colors.base-300}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 8px
-  elevated-content-card:
-    backgroundColor: "{colors.base-200}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.subheading}"
-    rounded: "{rounded.lg}"
-    padding: "{spacing.card-padding}"
-  hero-overlay-card:
-    backgroundColor: "rgba(222, 226, 222, 0.16)"
-    textColor: "{colors.base-content}"
-    typography: "{typography.subheading}"
-    rounded: 24px
-    padding: "{spacing.card-padding}"
-  wolf-indigo-featured-card:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.base-100}"
-    typography: "{typography.heading}"
-    rounded: 24px
-    padding: 128px 80px
-  ghost-input-field:
-    backgroundColor: "{colors.base-300}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.button-label}"
-    rounded: 0px
-    padding: 8px 12px
-  badge-info:
-    backgroundColor: "{colors.info}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-success:
-    backgroundColor: "{colors.success}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-warning:
-    backgroundColor: "{colors.warning}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-error:
-    backgroundColor: "{colors.error}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-wolfstar:
-    backgroundColor: "{colors.branding-wolfstar}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-staryl:
-    backgroundColor: "{colors.branding-staryl}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-accent:
-    backgroundColor: "{colors.accent}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
-  badge-secondary:
-    backgroundColor: "{colors.secondary}"
-    textColor: "{colors.base-content}"
-    typography: "{typography.caption}"
-    rounded: "{rounded.full}"
-    padding: 2px 8px
+    ghost-button:
+        backgroundColor: "{colors.base-100}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.button-label}"
+        rounded: 0px
+        padding: 5px 12px
+    subtle-nav-button:
+        backgroundColor: "rgba(255, 255, 255, 0.06)"
+        textColor: "{colors.base-content}"
+        typography: "{typography.button-label}"
+        rounded: "{rounded.md}"
+        padding: 5px 12px
+    solid-dark-button:
+        backgroundColor: "{colors.neutral}"
+        textColor: "{colors.base-100}"
+        typography: "{typography.button-label}"
+        rounded: "{rounded.md}"
+        padding: 7px 16px 8px 12px
+    outlined-action-button:
+        backgroundColor: "{colors.base-100}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.button-label}"
+        rounded: "{rounded.sm}"
+        padding: 5px 12px
+    blurred-nav-item:
+        backgroundColor: "{colors.base-300}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 8px
+    elevated-content-card:
+        backgroundColor: "{colors.base-200}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.subheading}"
+        rounded: "{rounded.lg}"
+        padding: "{spacing.card-padding}"
+    hero-overlay-card:
+        backgroundColor: "rgba(222, 226, 222, 0.16)"
+        textColor: "{colors.base-content}"
+        typography: "{typography.subheading}"
+        rounded: 24px
+        padding: "{spacing.card-padding}"
+    wolf-indigo-featured-card:
+        backgroundColor: "{colors.primary}"
+        textColor: "{colors.base-100}"
+        typography: "{typography.heading}"
+        rounded: 24px
+        padding: 128px 80px
+    ghost-input-field:
+        backgroundColor: "{colors.base-300}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.button-label}"
+        rounded: 0px
+        padding: 8px 12px
+    badge-info:
+        backgroundColor: "{colors.info}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-success:
+        backgroundColor: "{colors.success}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-warning:
+        backgroundColor: "{colors.warning}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-error:
+        backgroundColor: "{colors.error}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-wolfstar:
+        backgroundColor: "{colors.branding-wolfstar}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-staryl:
+        backgroundColor: "{colors.branding-staryl}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-accent:
+        backgroundColor: "{colors.accent}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
+    badge-secondary:
+        backgroundColor: "{colors.secondary}"
+        textColor: "{colors.base-content}"
+        typography: "{typography.caption}"
+        rounded: "{rounded.full}"
+        padding: 2px 8px
 ---
 
 ## Overview
@@ -198,27 +198,27 @@ The light theme palette anchors on high-contrast achromatic surfaces with a cool
 
 ### Dark and midnight themes
 
-Surface tokens shift across three DaisyUI themes. Semantic colors (primary, secondary, accent, info, success, warning, error) remain constant; only base surfaces and content invert.
+Surface tokens shift across three Nuxt UI themes (light, dark, midnight). Semantic colors (primary, secondary, info, success, warning, error) remain constant; only base surfaces and content invert.
 
-| Token | Light | Dark | Midnight |
-| ----- | ----- | ---- | -------- |
-| base-100 | `oklch(100% 0 0)` Canvas White | `oklch(25% 0.016 252)` Midnight | `oklch(0% 0 0)` Pitch |
-| base-200 | `oklch(90% 0 0)` Ash Gray | `oklch(23% 0.014 253)` Deep Navy | `oklch(10% 0 0)` Coal |
-| base-300 | `oklch(85% 0 0)` Cool Gray | `oklch(20% 0.012 254)` Abyss | `oklch(27% 0 0)` Charcoal |
-| base-content | `oklch(0% 0 0)` Pitch Black | `oklch(90% 0 0)` Snow | `oklch(87.609% 0 0)` Silver |
+| Token        | Light                          | Dark                             | Midnight                    |
+| ------------ | ------------------------------ | -------------------------------- | --------------------------- |
+| base-100     | `oklch(100% 0 0)` Canvas White | `oklch(25% 0.016 252)` Midnight  | `oklch(0% 0 0)` Pitch       |
+| base-200     | `oklch(90% 0 0)` Ash Gray      | `oklch(23% 0.014 253)` Deep Navy | `oklch(10% 0 0)` Coal       |
+| base-300     | `oklch(85% 0 0)` Cool Gray     | `oklch(20% 0.012 254)` Abyss     | `oklch(27% 0 0)` Charcoal   |
+| base-content | `oklch(0% 0 0)` Pitch Black    | `oklch(90% 0 0)` Snow            | `oklch(87.609% 0 0)` Silver |
 
 ## Typography
 
 Inter is the universal typeface — configured via `@nuxt/fonts`, latin subset, preloaded (weights 400, 500, 600, 700). Vary weight and size according to the type scale; never introduce additional font families.
 
-| Role | Size | Line Height | Letter Spacing | Use |
-| ---- | ---- | ----------- | -------------- | --- |
-| caption | 13px | 1.5 | -0.13px | Metadata, timestamps, fine print |
-| button-label | 16px | 1 | -0.19px | Buttons, form labels, navigation links |
-| subheading | 18px | 1.2 | -0.18px | Card titles, section intros |
-| heading | 40px | 1.1 | -0.8px | Page section headlines |
-| heading-lg | 48px | 1.1 | -0.96px | Prominent section headlines |
-| display | 54px | 1.1 | -1.08px | Hero headlines and maximum emphasis |
+| Role         | Size | Line Height | Letter Spacing | Use                                    |
+| ------------ | ---- | ----------- | -------------- | -------------------------------------- |
+| caption      | 13px | 1.5         | -0.13px        | Metadata, timestamps, fine print       |
+| button-label | 16px | 1           | -0.19px        | Buttons, form labels, navigation links |
+| subheading   | 18px | 1.2         | -0.18px        | Card titles, section intros            |
+| heading      | 40px | 1.1         | -0.8px         | Page section headlines                 |
+| heading-lg   | 48px | 1.1         | -0.96px        | Prominent section headlines            |
+| display      | 54px | 1.1         | -1.08px        | Hero headlines and maximum emphasis    |
 
 ## Layout
 
@@ -226,40 +226,40 @@ The page structure features an initial full-bleed hero section with a dark, illu
 
 **Base unit:** 4px. **Density:** comfortable.
 
-| Token | Value | Role |
-| ----- | ----- | ---- |
-| xs | 4px | Micro-adjustments |
-| sm | 8px | Element gap between related controls |
-| md | 16px | Card padding, standard internal spacing |
-| lg | 32px | Section gap between major blocks |
-| xl | 64px | Large section breaks and hero spacing |
-| section-gap | 32px | Vertical rhythm between page sections |
-| card-padding | 16px | Internal padding for card containers |
-| element-gap | 8px | Gap between sibling UI elements |
+| Token        | Value | Role                                    |
+| ------------ | ----- | --------------------------------------- |
+| xs           | 4px   | Micro-adjustments                       |
+| sm           | 8px   | Element gap between related controls    |
+| md           | 16px  | Card padding, standard internal spacing |
+| lg           | 32px  | Section gap between major blocks        |
+| xl           | 64px  | Large section breaks and hero spacing   |
+| section-gap  | 32px  | Vertical rhythm between page sections   |
+| card-padding | 16px  | Internal padding for card containers    |
+| element-gap  | 8px   | Gap between sibling UI elements         |
 
 ## Elevation & Depth
 
 Depth is conveyed through tonal layering and soft, multi-layered shadows rather than heavy drop shadows.
 
-| Context | Shadow |
-| ------- | ------ |
-| Nav items | `rgba(0, 0, 0, 0.15) 0px 2px 6px 0px` |
-| Cards | `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px` |
-| Wolf Indigo featured card | `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0) 0px 6px 6px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px` |
-| Input fields and subtle UI | `rgba(0, 0, 0, 0.05) 0px 1px 8px 0px` |
+| Context                    | Shadow                                                                                                       |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| Nav items                  | `rgba(0, 0, 0, 0.15) 0px 2px 6px 0px`                                                                        |
+| Cards                      | `rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px`                                   |
+| Wolf Indigo featured card  | `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0) 0px 6px 6px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 5px` |
+| Input fields and subtle UI | `rgba(0, 0, 0, 0.05) 0px 1px 8px 0px`                                                                        |
 
 Glass utilities (`card-glass`, `nav-panel-glass`) add frosted translucency for navigation and overlay surfaces. Hero overlay cards use `rgba(222, 226, 222, 0.16)` for minimal visual intrusion over imagery.
 
 ## Shapes
 
-DaisyUI base radius is `0.5rem` (8px). The app applies a slightly larger card radius for hierarchy:
+Nuxt UI base radius is `0.5rem` (8px). The app applies a slightly larger card radius for hierarchy:
 
-| Token | Value | Context |
-| ----- | ----- | ------- |
-| sm | 6px | Small UI elements, outlined buttons |
-| md | 8px | Interactive blocks, nav buttons |
-| lg | 12px | Cards (`rounded-xl`) |
-| full | 9999px | Avatars, pills, badges |
+| Token | Value  | Context                             |
+| ----- | ------ | ----------------------------------- |
+| sm    | 6px    | Small UI elements, outlined buttons |
+| md    | 8px    | Interactive blocks, nav buttons     |
+| lg    | 12px   | Cards (`rounded-xl`)                |
+| full  | 9999px | Avatars, pills, badges              |
 
 Apply consistently: cards → `rounded-xl` (lg), interactive blocks → `rounded-lg` (md), avatars/pills → `rounded-full`.
 
@@ -600,7 +600,7 @@ Reusable `@utility` classes defined in `app/assets/css/utilities.css`. Prefer th
 | ------------------------- | -------------------------------------------------------------------- |
 | `gradient-text-hero`      | Pink-to-orange-to-WolfStar-Ember gradient as text fill               |
 | `gradient-text-cool`      | Blue-to-purple gradient text fill                                    |
-| `animate-shimmer`           | Looping shimmer animation (3s, ease-in-out)                          |
+| `animate-shimmer`         | Looping shimmer animation (3s, ease-in-out)                          |
 | `btn-glow`                | Glow pseudo-element on hover; adapts to btn-primary/secondary/accent |
 | `card-glass`              | Frosted glass card with themed backdrop-filter                       |
 | `card-glass-soft`         | Lighter frosted glass variant                                        |
diff --git a/.cursor/mcp.json b/.cursor/mcp.json
index 1621d9d0f..0a6e90d73 100644
--- a/.cursor/mcp.json
+++ b/.cursor/mcp.json
@@ -4,10 +4,6 @@
 			"type": "http",
 			"url": "https://nuxt.com/mcp"
 		},
-		"daisyUI": {
-			"type": "http",
-			"url": "https://gitmcp.io/saadeghi/daisyui"
-		},
 		"nuxt-ui": {
 			"type": "http",
 			"url": "https://ui.nuxt.com/mcp"
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 4c1415326..e63d4c392 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -13,8 +13,8 @@ export default create({
 	colorPrimary: "#5865f2",
 	colorSecondary: "#6977a4",
 
-	// App chrome — mapped from the dark DaisyUI theme tokens
-	// base-100: oklch(25% 0.016 252), base-200: oklch(23% 0.014 253)
+	// App chrome — mapped from the dark WolfStar theme surfaces
+	// surface-100: oklch(25% 0.016 252), surface-200: oklch(23% 0.014 253)
 	appBg: "#1b1d2b",
 	appContentBg: "#1e2030",
 	appHoverBg: "#23253a",
@@ -26,7 +26,7 @@ export default create({
 	fontBase: '"Inter", ui-sans-serif, system-ui, sans-serif',
 	fontCode: '"JetBrains Mono", ui-monospace, monospace',
 
-	// Text — base-content: oklch(90% 0 0) ≈ #e4e4e4
+	// Text — content: oklch(90% 0 0) ≈ #e4e4e4
 	textColor: "#e4e4e4",
 	textInverseColor: "#1e2030",
 	textMutedColor: "#9098b8",
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
index 324b02682..dc8f57dc5 100644
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -5,11 +5,6 @@
 			"url": "https://nuxt.com/mcp",
 			"tools": ["*"]
 		},
-		"daisyUI": {
-			"type": "http",
-			"url": "https://gitmcp.io/saadeghi/daisyui",
-			"tools": ["*"]
-		},
 		"nuxt-ui": {
 			"type": "http",
 			"url": "https://ui.nuxt.com/mcp",
diff --git a/AGENTS.md b/AGENTS.md
index 82da117f2..464e50c1f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -242,7 +242,7 @@ All styling must use semantic tokens or CSS custom properties — no hardcoded c
 
 It checks:
 
-1. **Raw Tailwind palette classes** in `<template>` — e.g. `text-red-500`, `bg-blue-700`. Use semantic Nuxt UI classes (`text-primary`, `text-muted`, `bg-success`) or DaisyUI tokens instead.
+1. **Raw Tailwind palette classes** in `<template>` — e.g. `text-red-500`, `bg-blue-700`. Use semantic Nuxt UI classes (`text-primary`, `text-muted`, `bg-success`) instead.
 2. **Hex literals** in `<style>` — e.g. `#5865f2`. Move to a scoped CSS custom property declaration.
 3. **Color functions with literal arguments** in `<style>` — e.g. `hsla(235, 85.6%, 64.7%, 0.5)`. Move to a scoped CSS custom property. Allowed patterns:
     - `oklch(from var(--token) l c h / alpha)` — relative-color syntax
diff --git a/README.md b/README.md
index 001e32c2f..583d9b500 100644
--- a/README.md
+++ b/README.md
@@ -248,7 +248,7 @@ results visible on the [CodSpeed dashboard][codspeed-link].
 - **Oxfmt** - Code formatting
 - **Prisma** - Database ORM
 - **Tailwind CSS** - Utility-first CSS framework
-- **DaisyUI** - Tailwind CSS component library
+- **Nuxt UI** - Vue component library and design tokens
 - **NuxtUI** - Components
 
 ### AI Development Assistant
diff --git a/app/app.config.ts b/app/app.config.ts
index a24354310..cac9c18c8 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,5 +1,16 @@
 import ui from "./themes/index";
 
 export default defineAppConfig({
-	ui,
+	ui: {
+		...ui,
+		colors: {
+			primary: "primary",
+			secondary: "secondary",
+			success: "success",
+			error: "error",
+			info: "info",
+			warning: "warning",
+			neutral: "neutral",
+		},
+	},
 });
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 55d88297e..c09d3069e 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -12,111 +12,97 @@
 }
 
 @plugin "@tailwindcss/typography";
-@plugin "daisyui";
-
-@plugin "daisyui/theme" {
-	name: "light";
-	default: true;
-	prefersdark: false;
-	color-scheme: "light";
-	--color-base-100: oklch(100% 0 0);
-	--color-base-200: oklch(90% 0 0);
-	--color-base-300: oklch(85% 0 0);
-	--color-base-content: oklch(0% 0 0);
-	--color-primary: oklch(58% 0.233 277.117);
-	--color-primary-content: oklch(100% 0 0);
-	--color-secondary: oklch(0.5873 0.0204 272.13);
-	--color-secondary-content: oklch(100% 0 0);
-	--color-accent: oklch(60% 0.152 181.912);
-	--color-accent-content: oklch(100% 0 0);
-	--color-neutral: oklch(14% 0.005 285.823);
-	--color-neutral-content: oklch(100% 0 0);
-	--color-info: oklch(55% 0.16 232.661);
-	--color-info-content: oklch(89.04% 0.062 264.052);
-	--color-success: oklch(76% 0.177 163.223);
-	--color-success-content: oklch(37% 0.077 168.94);
-	--color-warning: oklch(82% 0.189 84.429);
-	--color-warning-content: oklch(41% 0.112 45.904);
-	--color-error: oklch(71% 0.194 13.428);
-	--color-error-content: oklch(28% 0.109 3.907);
-	--radius-selector: 0.5rem;
-	--radius-field: 0.5rem;
-	--radius-box: 0.5rem;
-	--size-selector: 0.25rem;
-	--size-field: 0.21875rem;
-	--border: 1.5px;
-	--depth: 0;
-	--noise: 0;
-}
 
-@plugin "daisyui/theme" {
-	name: "dark";
-	default: true;
-	prefersdark: true;
-	color-scheme: "dark";
-	--color-base-100: oklch(25% 0.016 252);
-	--color-base-200: oklch(23% 0.014 253);
-	--color-base-300: oklch(20% 0.012 254);
-	--color-base-content: oklch(90% 0 0);
-	--color-primary: oklch(58% 0.233 277.117);
-	--color-primary-content: oklch(100% 0 0);
-	--color-secondary: oklch(0.5873 0.0204 272.13);
-	--color-secondary-content: oklch(100% 0 0);
-	--color-accent: oklch(60% 0.152 181.912);
-	--color-accent-content: oklch(100% 0 0);
-	--color-neutral: oklch(14% 0.005 285.823);
-	--color-neutral-content: oklch(100% 0 0);
-	--color-info: oklch(55% 0.16 232.661);
-	--color-info-content: oklch(89.04% 0.062 264.052);
-	--color-success: oklch(76% 0.177 163.223);
-	--color-success-content: oklch(37% 0.077 168.94);
-	--color-warning: oklch(82% 0.189 84.429);
-	--color-warning-content: oklch(41% 0.112 45.904);
-	--color-error: oklch(71% 0.194 13.428);
-	--color-error-content: oklch(28% 0.109 3.907);
-	--radius-selector: 0.5rem;
-	--radius-field: 0.5rem;
-	--radius-box: 0.5rem;
-	--size-selector: 0.25rem;
-	--size-field: 0.21875rem;
-	--border: 1.5px;
-	--depth: 0;
-	--noise: 0;
-}
+/*
+ * WolfStar semantic color scales (Nuxt UI design tokens).
+ * 500 anchors match the legacy DaisyUI theme values.
+ */
+@theme static {
+	--color-primary-50: oklch(97% 0.02 277);
+	--color-primary-100: oklch(93% 0.05 277);
+	--color-primary-200: oklch(85% 0.12 277);
+	--color-primary-300: oklch(75% 0.18 277);
+	--color-primary-400: oklch(65% 0.22 277);
+	--color-primary-500: oklch(58% 0.233 277.117);
+	--color-primary-600: oklch(50% 0.233 277);
+	--color-primary-700: oklch(42% 0.2 277);
+	--color-primary-800: oklch(34% 0.16 277);
+	--color-primary-900: oklch(26% 0.12 277);
+	--color-primary-950: oklch(18% 0.08 277);
+
+	--color-secondary-50: oklch(97% 0.005 272);
+	--color-secondary-100: oklch(93% 0.008 272);
+	--color-secondary-200: oklch(85% 0.012 272);
+	--color-secondary-300: oklch(75% 0.016 272);
+	--color-secondary-400: oklch(65% 0.018 272);
+	--color-secondary-500: oklch(0.5873 0.0204 272.13);
+	--color-secondary-600: oklch(50% 0.02 272);
+	--color-secondary-700: oklch(42% 0.018 272);
+	--color-secondary-800: oklch(34% 0.015 272);
+	--color-secondary-900: oklch(26% 0.012 272);
+	--color-secondary-950: oklch(18% 0.008 272);
+
+	--color-success-50: oklch(97% 0.02 163);
+	--color-success-100: oklch(93% 0.05 163);
+	--color-success-200: oklch(88% 0.1 163);
+	--color-success-300: oklch(82% 0.14 163);
+	--color-success-400: oklch(78% 0.16 163);
+	--color-success-500: oklch(76% 0.177 163.223);
+	--color-success-600: oklch(62% 0.15 163);
+	--color-success-700: oklch(50% 0.12 163);
+	--color-success-800: oklch(40% 0.1 163);
+	--color-success-900: oklch(32% 0.08 163);
+	--color-success-950: oklch(22% 0.06 163);
+
+	--color-error-50: oklch(97% 0.02 13);
+	--color-error-100: oklch(93% 0.05 13);
+	--color-error-200: oklch(88% 0.1 13);
+	--color-error-300: oklch(82% 0.14 13);
+	--color-error-400: oklch(76% 0.17 13);
+	--color-error-500: oklch(71% 0.194 13.428);
+	--color-error-600: oklch(58% 0.18 13);
+	--color-error-700: oklch(48% 0.15 13);
+	--color-error-800: oklch(38% 0.12 13);
+	--color-error-900: oklch(30% 0.1 13);
+	--color-error-950: oklch(20% 0.08 13);
+
+	--color-info-50: oklch(97% 0.02 233);
+	--color-info-100: oklch(93% 0.05 233);
+	--color-info-200: oklch(88% 0.08 233);
+	--color-info-300: oklch(78% 0.12 233);
+	--color-info-400: oklch(65% 0.14 233);
+	--color-info-500: oklch(55% 0.16 232.661);
+	--color-info-600: oklch(48% 0.14 233);
+	--color-info-700: oklch(40% 0.12 233);
+	--color-info-800: oklch(32% 0.1 233);
+	--color-info-900: oklch(26% 0.08 233);
+	--color-info-950: oklch(18% 0.06 233);
+
+	--color-warning-50: oklch(98% 0.03 84);
+	--color-warning-100: oklch(95% 0.06 84);
+	--color-warning-200: oklch(90% 0.1 84);
+	--color-warning-300: oklch(86% 0.14 84);
+	--color-warning-400: oklch(84% 0.17 84);
+	--color-warning-500: oklch(82% 0.189 84.429);
+	--color-warning-600: oklch(68% 0.16 84);
+	--color-warning-700: oklch(55% 0.13 84);
+	--color-warning-800: oklch(44% 0.11 84);
+	--color-warning-900: oklch(36% 0.09 84);
+	--color-warning-950: oklch(24% 0.07 84);
+
+	--color-neutral-50: oklch(98% 0.002 286);
+	--color-neutral-100: oklch(95% 0.003 286);
+	--color-neutral-200: oklch(90% 0.004 286);
+	--color-neutral-300: oklch(82% 0.005 286);
+	--color-neutral-400: oklch(70% 0.005 286);
+	--color-neutral-500: oklch(55% 0.005 286);
+	--color-neutral-600: oklch(42% 0.005 286);
+	--color-neutral-700: oklch(32% 0.005 286);
+	--color-neutral-800: oklch(22% 0.005 286);
+	--color-neutral-900: oklch(14% 0.005 285.823);
+	--color-neutral-950: oklch(10% 0.004 286);
 
-@plugin "daisyui/theme" {
-	name: "midnight";
-	default: false;
-	prefersdark: false;
-	color-scheme: "dark";
-	--color-base-100: oklch(0% 0 0);
-	--color-base-200: oklch(10% 0 0);
-	--color-base-300: oklch(27% 0 0);
-	--color-base-content: oklch(87.609% 0 0);
-	--color-primary: oklch(58% 0.233 277.117);
-	--color-primary-content: oklch(100% 0 0);
-	--color-secondary: oklch(0.5873 0.0204 272.13);
-	--color-secondary-content: oklch(100% 0 0);
-	--color-accent: oklch(60% 0.152 181.912);
-	--color-accent-content: oklch(100% 0 0);
-	--color-neutral: oklch(14% 0.005 285.823);
-	--color-neutral-content: oklch(100% 0 0);
-	--color-info: oklch(55% 0.16 232.661);
-	--color-info-content: oklch(89.04% 0.062 264.052);
-	--color-success: oklch(76% 0.177 163.223);
-	--color-success-content: oklch(37% 0.077 168.94);
-	--color-warning: oklch(82% 0.189 84.429);
-	--color-warning-content: oklch(41% 0.112 45.904);
-	--color-error: oklch(71% 0.194 13.428);
-	--color-error-content: oklch(28% 0.109 3.907);
-	--radius-selector: 0.5rem;
-	--radius-field: 0.5rem;
-	--radius-box: 0.5rem;
-	--size-selector: 0.25rem;
-	--size-field: 0.21875rem;
-	--border: 1.5px;
-	--depth: 0;
-	--noise: 0;
+	--radius-wolfstar-box: 0.5rem;
 }
 
 @layer base {
@@ -125,6 +111,12 @@
 		--animate-accordion-up: accordion-up 0.2s ease-out;
 		--branding-wolfstar: oklch(63% 0.2502 28.13);
 		--branding-staryl: oklch(0.5873 0.0204 272.13);
+
+		/* Light theme surfaces */
+		--wolfstar-surface-100: oklch(100% 0 0);
+		--wolfstar-surface-200: oklch(90% 0 0);
+		--wolfstar-surface-300: oklch(85% 0 0);
+		--wolfstar-content: oklch(0% 0 0);
 	}
 
 	html {
@@ -138,7 +130,7 @@
 
 	::-webkit-scrollbar-thumb {
 		border-radius: 5px;
-		background: var(--color-base-content);
+		background: var(--wolfstar-content);
 	}
 
 	.no-scrollbar::-webkit-scrollbar {
@@ -149,6 +141,22 @@
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 	}
+
+	[data-theme="dark"],
+	.dark {
+		--wolfstar-surface-100: oklch(25% 0.016 252);
+		--wolfstar-surface-200: oklch(23% 0.014 253);
+		--wolfstar-surface-300: oklch(20% 0.012 254);
+		--wolfstar-content: oklch(90% 0 0);
+	}
+
+	[data-theme="midnight"],
+	.midnight {
+		--wolfstar-surface-100: oklch(0% 0 0);
+		--wolfstar-surface-200: oklch(10% 0 0);
+		--wolfstar-surface-300: oklch(27% 0 0);
+		--wolfstar-content: oklch(87.609% 0 0);
+	}
 }
 
 /*
@@ -166,21 +174,20 @@
 		--ui-text-highlighted: black;
 		--ui-text-inverted: var(--color-white);
 
-		--ui-bg: var(--color-base-300);
+		--ui-bg: var(--wolfstar-surface-300);
 		--ui-bg-muted: var(--color-neutral-50);
 		--ui-bg-elevated: var(--color-neutral-100);
 		--ui-bg-accented: var(--color-neutral-200);
 		--ui-bg-inverted: var(--color-neutral-900);
 
-		--ui-border: var(--color-base-100);
-		--ui-border-muted: var(--color-base-200);
-		--ui-border-accented: var(--color-base-200);
+		--ui-border: var(--wolfstar-surface-100);
+		--ui-border-muted: var(--wolfstar-surface-200);
+		--ui-border-accented: var(--wolfstar-surface-200);
 		--ui-border-inverted: var(--color-neutral-900);
 
-		/* Lightest/elevated surface for Discord message mockups */
-		--discord-surface: var(--color-base-100);
+		--discord-surface: var(--wolfstar-surface-100);
 
-		--ui-radius: var(--radius-box);
+		--ui-radius: var(--radius-wolfstar-box);
 		--ui-container: var(--container-7xl);
 	}
 
@@ -193,21 +200,20 @@
 		--ui-text-highlighted: var(--color-white);
 		--ui-text-inverted: var(--color-neutral-900);
 
-		--ui-bg: var(--color-base-300);
+		--ui-bg: var(--wolfstar-surface-300);
 		--ui-bg-muted: var(--color-neutral-800);
 		--ui-bg-elevated: var(--color-neutral-800);
 		--ui-bg-accented: var(--color-neutral-700);
 		--ui-bg-inverted: var(--color-white);
 
-		--ui-border: var(--color-base-100);
-		--ui-border-muted: var(--color-base-200);
-		--ui-border-accented: var(--color-base-200);
+		--ui-border: var(--wolfstar-surface-100);
+		--ui-border-muted: var(--wolfstar-surface-200);
+		--ui-border-accented: var(--wolfstar-surface-200);
 		--ui-border-inverted: var(--color-white);
 
-		/* Lightest/elevated surface for Discord message mockups */
-		--discord-surface: var(--color-base-100);
+		--discord-surface: var(--wolfstar-surface-100);
 
-		--ui-radius: var(--radius-box);
+		--ui-radius: var(--radius-wolfstar-box);
 		--ui-container: var(--container-7xl);
 	}
 
@@ -220,21 +226,20 @@
 		--ui-text-highlighted: var(--color-white);
 		--ui-text-inverted: var(--color-neutral-900);
 
-		--ui-bg: var(--color-base-100);
-		--ui-bg-muted: var(--color-base-200);
-		--ui-bg-elevated: var(--color-base-200);
-		--ui-bg-accented: var(--color-base-300);
+		--ui-bg: var(--wolfstar-surface-100);
+		--ui-bg-muted: var(--wolfstar-surface-200);
+		--ui-bg-elevated: var(--wolfstar-surface-200);
+		--ui-bg-accented: var(--wolfstar-surface-300);
 		--ui-bg-inverted: var(--color-white);
 
-		--ui-border: var(--color-base-200);
-		--ui-border-muted: var(--color-base-200);
-		--ui-border-accented: var(--color-base-300);
+		--ui-border: var(--wolfstar-surface-200);
+		--ui-border-muted: var(--wolfstar-surface-200);
+		--ui-border-accented: var(--wolfstar-surface-300);
 		--ui-border-inverted: var(--color-white);
 
-		/* base-100 is pure black in midnight; use lightest base instead */
-		--discord-surface: var(--color-base-300);
+		--discord-surface: var(--wolfstar-surface-300);
 
-		--ui-radius: var(--radius-box);
+		--ui-radius: var(--radius-wolfstar-box);
 		--ui-container: var(--container-7xl);
 	}
 }
@@ -262,6 +267,6 @@
 	::before,
 	::backdrop,
 	::file-selector-button {
-		border-color: var(--color-base-200, currentColor);
+		border-color: var(--wolfstar-surface-200, currentColor);
 	}
 }
diff --git a/app/assets/css/utilities.css b/app/assets/css/utilities.css
index 097c92a6d..580ad1bba 100644
--- a/app/assets/css/utilities.css
+++ b/app/assets/css/utilities.css
@@ -114,35 +114,27 @@
 		opacity: 0.6;
 	}
 
-	/* Adaptive colors based on DaisyUI button classes */
-	&.btn-primary::before {
-		background: var(--color-primary);
+	/* Adaptive glow colors for Nuxt UI semantic button backgrounds */
+	&:where(.bg-primary)::before {
+		background: var(--ui-primary);
 	}
-	&.btn-secondary::before {
-		background: var(--color-secondary);
+	&:where(.bg-secondary)::before {
+		background: var(--ui-secondary);
 	}
-	&.btn-accent::before {
-		background: var(--color-accent);
+	&:where(.bg-neutral, .bg-inverted)::before {
+		background: var(--ui-bg-inverted);
 	}
-	&.btn-neutral::before {
-		background: var(--color-neutral);
-	}
-	&.btn-info::before {
-		background: var(--color-info);
-	}
-	&.btn-success::before {
-		background: var(--color-success);
+	&:where(.bg-info)::before {
+		background: var(--ui-info);
 	}
-	&.btn-warning::before {
-		background: var(--color-warning);
+	&:where(.bg-success)::before {
+		background: var(--ui-success);
 	}
-	&.btn-error::before {
-		background: var(--color-error);
+	&:where(.bg-warning)::before {
+		background: var(--ui-warning);
 	}
-
-	/* Custom branding override if needed */
-	&.btn-branding::before {
-		background: var(--branding-wolfstar);
+	&:where(.bg-error)::before {
+		background: var(--ui-error);
 	}
 }
 
@@ -154,79 +146,73 @@
 	backdrop-filter: blur(12px);
 	-webkit-backdrop-filter: blur(12px);
 	border: 1px solid oklch(100% 0 0 / 0.1);
-	border-radius: var(--radius-box, 0.5rem);
+	border-radius: var(--radius-wolfstar-box, 0.5rem);
 	background: oklch(50% 0 0 / 0.05);
 
-	[data-theme="dark"] & {
+	[data-theme="dark"] &,
+	[data-theme="midnight"] & {
 		border-color: oklch(100% 0 0 / 0.08);
 		background: oklch(20% 0 0 / 0.3);
 	}
 
-	/* Adaptive colors based on DaisyUI background classes */
+	/* Adaptive colors based on Nuxt UI semantic background classes */
 	&.bg-primary {
-		border-color: var(--color-primary);
-		background: color-mix(in oklch, var(--color-primary) 30%, transparent);
+		border-color: var(--ui-primary);
+		background: color-mix(in oklch, var(--ui-primary) 30%, transparent);
 	}
 	&.bg-secondary {
-		border-color: var(--color-secondary);
-		background: color-mix(in oklch, var(--color-secondary) 30%, transparent);
-	}
-	&.bg-accent {
-		border-color: var(--color-accent);
-		background: color-mix(in oklch, var(--color-accent) 30%, transparent);
+		border-color: var(--ui-secondary);
+		background: color-mix(in oklch, var(--ui-secondary) 30%, transparent);
 	}
 	&.bg-neutral {
-		border-color: var(--color-neutral);
-		background: color-mix(in oklch, var(--color-neutral) 30%, transparent);
+		border-color: var(--ui-bg-inverted);
+		background: color-mix(in oklch, var(--ui-bg-inverted) 30%, transparent);
 	}
 	&.bg-info {
-		border-color: var(--color-info);
-		background: color-mix(in oklch, var(--color-info) 30%, transparent);
+		border-color: var(--ui-info);
+		background: color-mix(in oklch, var(--ui-info) 30%, transparent);
 	}
 	&.bg-success {
-		border-color: var(--color-success);
-		background: color-mix(in oklch, var(--color-success) 30%, transparent);
+		border-color: var(--ui-success);
+		background: color-mix(in oklch, var(--ui-success) 30%, transparent);
 	}
 	&.bg-warning {
-		border-color: var(--color-warning);
-		background: color-mix(in oklch, var(--color-warning) 30%, transparent);
+		border-color: var(--ui-warning);
+		background: color-mix(in oklch, var(--ui-warning) 30%, transparent);
 	}
 	&.bg-error {
-		border-color: var(--color-error);
-		background: color-mix(in oklch, var(--color-error) 30%, transparent);
+		border-color: var(--ui-error);
+		background: color-mix(in oklch, var(--ui-error) 30%, transparent);
 	}
 
 	/* Hover states for colored variants */
 	&.bg-primary:hover {
-		background: color-mix(in oklch, var(--color-primary) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-primary) 40%, transparent);
 	}
 	&.bg-secondary:hover {
-		background: color-mix(in oklch, var(--color-secondary) 40%, transparent);
-	}
-	&.bg-accent:hover {
-		background: color-mix(in oklch, var(--color-accent) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-secondary) 40%, transparent);
 	}
 	&.bg-neutral:hover {
-		background: color-mix(in oklch, var(--color-neutral) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-bg-inverted) 40%, transparent);
 	}
 	&.bg-info:hover {
-		background: color-mix(in oklch, var(--color-info) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-info) 40%, transparent);
 	}
 	&.bg-success:hover {
-		background: color-mix(in oklch, var(--color-success) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-success) 40%, transparent);
 	}
 	&.bg-warning:hover {
-		background: color-mix(in oklch, var(--color-warning) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-warning) 40%, transparent);
 	}
 	&.bg-error:hover {
-		background: color-mix(in oklch, var(--color-error) 40%, transparent);
+		background: color-mix(in oklch, var(--ui-error) 40%, transparent);
 	}
 }
 
 @utility card-glass-soft {
 	backdrop-filter: blur(12px) saturate(150%);
 	-webkit-backdrop-filter: blur(12px) saturate(150%);
-	border-radius: var(--radius-box, 0.5rem);
+	border-radius: var(--radius-wolfstar-box, 0.5rem);
 	background: oklch(30% 0.01 250 / 0.6);
 
 	[data-theme="light"] & {
@@ -237,7 +223,7 @@
 @utility card-glass-bordered {
 	box-shadow: 0 4px 30px oklch(0% 0 0 / 0.1);
 	border: 1px solid oklch(100% 0 0 / 0.15);
-	border-radius: var(--radius-box, 0.5rem);
+	border-radius: var(--radius-wolfstar-box, 0.5rem);
 	background: oklch(25% 0.016 252 / 0.8);
 
 	[data-theme="light"] & {
@@ -250,7 +236,7 @@
 @utility card-glass-subtle {
 	backdrop-filter: blur(8px) saturate(120%);
 	-webkit-backdrop-filter: blur(8px) saturate(120%);
-	border-radius: var(--radius-box, 0.5rem);
+	border-radius: var(--radius-wolfstar-box, 0.5rem);
 	background: oklch(40% 0.008 250 / 0.4);
 
 	[data-theme="light"] & {
@@ -274,7 +260,8 @@
 	backdrop-filter: blur(16px) saturate(180%);
 	-webkit-backdrop-filter: blur(16px) saturate(180%);
 
-	[data-theme="dark"] & {
+	[data-theme="dark"] &,
+	[data-theme="midnight"] & {
 		backdrop-filter: blur(20px) saturate(180%);
 		-webkit-backdrop-filter: blur(20px) saturate(180%);
 	}
diff --git a/app/components/ActivitySection.vue b/app/components/ActivitySection.vue
index 9cd13ceb5..1fc72a538 100644
--- a/app/components/ActivitySection.vue
+++ b/app/components/ActivitySection.vue
@@ -10,7 +10,7 @@
 					: 'mb-3 flex items-center justify-between'
 			"
 		>
-			<p class="text-sm text-base-content/70">
+			<p class="text-sm text-toned">
 				{{ itemCount }} {{ recordLabel }}{{ itemCount === 1 ? "" : "s" }} recorded
 			</p>
 			<UButton
diff --git a/app/components/BuildEnvironment.vue b/app/components/BuildEnvironment.vue
index 02b8a45a0..9e3affc50 100644
--- a/app/components/BuildEnvironment.vue
+++ b/app/components/BuildEnvironment.vue
@@ -16,38 +16,38 @@ const buildTime = computed(() => new Date(buildInfo.value.time));
 		style="animation-delay: 0.05s"
 	>
 		<NuxtTime
-			:class="footer ? 'text-sm text-base-content/80' : 'text-md text-base-content'"
+			:class="footer ? 'text-sm text-toned' : 'text-md text-default'"
 			class="whitespace-nowrap"
 			:datetime="buildTime"
 			year="numeric"
 			month="short"
 			day="numeric"
 		/>
-		<span :class="footer ? 'text-base-content/80' : 'text-base-content'">&middot;</span>
+		<span :class="footer ? 'text-toned' : 'text-default'">&middot;</span>
 		<NuxtLink
 			v-if="buildInfo.env === 'release'"
 			:to="`https://github.com/wolfstar-project/wolfstar.rocks/releases/tag/v${buildInfo.version}`"
 			target="_blank"
 			rel="noopener noreferrer"
-			:class="footer ? 'text-sm text-base-content/80' : 'text-md text-base-content'"
+			:class="footer ? 'text-sm text-toned' : 'text-md text-default'"
 			:aria-label="`View release v${buildInfo.version} on GitHub - opens in new tab`"
 		>
 			v{{ buildInfo.version }}
 		</NuxtLink>
 		<span
 			v-else
-			:class="footer ? 'text-sm text-base-content/80' : 'text-md text-base-content'"
+			:class="footer ? 'text-sm text-toned' : 'text-md text-default'"
 			class="tracking-wider"
 			>{{ buildInfo.env }}</span
 		>
 
 		<template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
-			<span :class="footer ? 'text-base-content/80' : 'text-base-content'">&middot;</span>
+			<span :class="footer ? 'text-toned' : 'text-default'">&middot;</span>
 			<NuxtLink
 				:to="`https://github.com/wolfstar-project/wolfstar.rocks/commit/${buildInfo.commit}`"
 				target="_blank"
 				rel="noopener noreferrer"
-				:class="footer ? 'text-sm text-base-content/80' : 'text-md text-base-content'"
+				:class="footer ? 'text-sm text-toned' : 'text-md text-default'"
 				:aria-label="`View commit ${buildInfo.shortCommit} on GitHub - opens in new tab`"
 			>
 				{{ buildInfo.shortCommit }}
diff --git a/app/components/ColorModeButton.vue b/app/components/ColorModeButton.vue
index 3ba36b26a..0e2c871dc 100644
--- a/app/components/ColorModeButton.vue
+++ b/app/components/ColorModeButton.vue
@@ -1,8 +1,8 @@
 <template>
 	<ClientOnly>
 		<UButton
-			:aria-label="`Switch to ${nextTheme} mode`"
-			:icon="`lucide:${nextTheme === 'dark' ? 'sun' : 'moon'}`"
+			:aria-label="`Switch theme (current: ${colorMode.preference})`"
+			:icon="themeIcon"
 			color="neutral"
 			variant="ghost"
 			size="sm"
@@ -20,10 +20,37 @@ interface DocumentWithActiveVT extends Document {
 	readonly activeViewTransition: ViewTransition | null;
 }
 
+const THEMES = ["light", "dark", "midnight"] as const;
+type ThemeName = (typeof THEMES)[number];
+
 const colorMode = useColorMode();
 const { effectiveReduceMotion } = useReduceMotion();
 
-const nextTheme = computed(() => (colorMode.value === "dark" ? "light" : "dark"));
+const themeIcon = computed(() => {
+	const preference = colorMode.preference;
+	const activeTheme =
+		preference === "system" ? (colorMode.value as ThemeName) : (preference as ThemeName);
+
+	switch (activeTheme) {
+		case "light":
+			return "lucide:sun";
+		case "dark":
+			return "lucide:moon";
+		case "midnight":
+			return "lucide:sparkles";
+		default:
+			return "lucide:sun-moon";
+	}
+});
+
+const nextTheme = computed((): ThemeName => {
+	const preference = colorMode.preference;
+	const current =
+		preference === "system" ? (colorMode.value as ThemeName) : (preference as ThemeName);
+	const index = THEMES.indexOf(current);
+	const nextIndex = index === -1 ? 0 : (index + 1) % THEMES.length;
+	return THEMES[nextIndex] ?? "light";
+});
 
 const switchTheme = () => {
 	colorMode.preference = nextTheme.value;
diff --git a/app/components/OtherApps.vue b/app/components/OtherApps.vue
index 3be38ec3a..66dae2e11 100644
--- a/app/components/OtherApps.vue
+++ b/app/components/OtherApps.vue
@@ -8,7 +8,7 @@
 		<div
 			v-for="app of apps"
 			:key="app.name"
-			class="other-apps-layout rounded-xl bg-base-200 shadow-xl"
+			class="other-apps-layout rounded-xl bg-muted shadow-xl"
 		>
 			<nuxt-img
 				:src="app.avatar"
@@ -23,26 +23,27 @@
 					{{ app.name }}
 				</h3>
 				<div class="mt-2 flex flex-wrap gap-1">
-					<span
+					<UBadge
 						v-for="purpose of app.purposes"
 						:key="purpose"
-						class="badge badge-neutral"
+						color="neutral"
+						variant="subtle"
 					>
 						{{ purpose }}
-					</span>
+					</UBadge>
 				</div>
 			</div>
 			<div class="other-apps-description">
 				<p class="grow">{{ app.description }}</p>
-				<div class="join mt-4 flex justify-end">
-					<nuxt-link class="btn join-item btn-neutral" :to="app.explore">
+				<div class="mt-4 flex justify-end gap-2">
+					<UButton :to="app.explore" color="neutral" variant="solid">
 						<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
 						Explore
-					</nuxt-link>
-					<nuxt-link class="btn join-item btn-neutral" :to="app.invite">
+					</UButton>
+					<UButton :to="app.invite" color="neutral" variant="solid">
 						<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add
 						App
-					</nuxt-link>
+					</UButton>
 				</div>
 			</div>
 		</div>
diff --git a/app/components/UserMenu.vue b/app/components/UserMenu.vue
index 56c8975de..5a5c3226a 100644
--- a/app/components/UserMenu.vue
+++ b/app/components/UserMenu.vue
@@ -5,8 +5,8 @@
 		:content="{ align: 'center', collisionPadding: 12 }"
 		:ui="{
 			content: collapsed
-				? 'w-48 bg-base-200/90 border border-base-200 shadow-md rounded-md'
-				: 'w-(--reka-dropdown-menu-trigger-width) bg-base-200/90 border border-base-200 shadow-md rounded-md',
+				? 'w-48 bg-muted/90 border border-muted shadow-md rounded-md'
+				: 'w-(--reka-dropdown-menu-trigger-width) bg-muted/90 border border-muted shadow-md rounded-md',
 		}"
 		aria-label="User account menu"
 	>
diff --git a/app/components/app/Footer.vue b/app/components/app/Footer.vue
index 96cfec21f..3e3679b2a 100644
--- a/app/components/app/Footer.vue
+++ b/app/components/app/Footer.vue
@@ -2,7 +2,7 @@
 	<USeparator
 		size="lg"
 		icon="custom:wolfstar"
-		:ui="{ border: 'border-[1px] border-base-300' }"
+		:ui="{ border: 'border-[1px] border-accented' }"
 		class="mt-24 p-10 content-visibility-auto"
 	/>
 	<UFooter
@@ -43,7 +43,7 @@
 						<p class="font-semibold">WolfStar Project</p>
 					</div>
 					<div>
-						<p class="text-sm text-base-content/80">
+						<p class="text-sm text-toned">
 							Copyright © {{ currentYear }}. All rights reserved.
 						</p>
 					</div>
diff --git a/app/components/app/Header.vue b/app/components/app/Header.vue
index 43fd01246..bbafe62cb 100644
--- a/app/components/app/Header.vue
+++ b/app/components/app/Header.vue
@@ -33,8 +33,8 @@
 			class="hidden lg:inline-flex"
 			aria-label="Main navigation"
 			:ui="{
-				link: 'text-base-content/80 hover:text-base-content/100',
-				root: 'text-base-content/70',
+				link: 'text-toned hover:text-default',
+				root: 'text-toned',
 			}"
 		/>
 
diff --git a/app/components/command/Base.vue b/app/components/command/Base.vue
index a5ae40ffb..e14d68dad 100644
--- a/app/components/command/Base.vue
+++ b/app/components/command/Base.vue
@@ -79,11 +79,11 @@
 						v-for="(usage, idx) in command.extendedHelp.usages"
 						:key="idx"
 						role="listitem"
-						class="block rounded-xl border border-base-content/10 bg-base-300/70 px-5 py-4 font-mono text-sm text-base-content transition-all"
+						class="block rounded-xl border border-default/10 bg-accented/70 px-5 py-4 font-mono text-sm text-default transition-all"
 					>
 						<span class="text-primary">WolfStar</span>,
 						<span class="text-primary/80">{{ command.name }}</span>
-						<span class="text-base-content/70">{{ usage }}</span>
+						<span class="text-toned">{{ usage }}</span>
 					</code>
 				</div>
 			</section>
@@ -100,7 +100,7 @@
 					</div>
 					<span>Extended Help</span>
 				</h3>
-				<div class="rounded-xl border border-base-content/10 bg-base-200/30 px-5 py-4">
+				<div class="rounded-xl border border-default/10 bg-muted/30 px-5 py-4">
 					<div class="prose max-w-none dark:prose-invert prose-p:leading-relaxed">
 						<div
 							class="text-base leading-7 whitespace-pre-line"
@@ -136,7 +136,7 @@
 							{{ arg }}
 						</dt>
 						<dd
-							class="prose max-w-none text-sm leading-relaxed text-base-content/80 dark:prose-invert prose-p:m-0"
+							class="prose max-w-none text-sm leading-relaxed text-toned dark:prose-invert prose-p:m-0"
 						>
 							<div v-html="sanitizeAndFormat(resolveMultilineString(desc))"></div>
 						</dd>
@@ -165,7 +165,7 @@
 						<dt class="mb-1 text-base font-semibold text-primary">
 							{{ type }}
 						</dt>
-						<dd class="text-sm text-base-content/80">
+						<dd class="text-sm text-toned">
 							{{ example }}
 						</dd>
 					</div>
@@ -218,7 +218,7 @@
 				</h3>
 				<div class="rounded-xl border border-primary/20 bg-primary/5 p-5 transition-all">
 					<div
-						class="prose max-w-none text-sm leading-relaxed text-base-content/90 dark:prose-invert prose-p:m-0"
+						class="prose max-w-none text-sm leading-relaxed text-default/90 dark:prose-invert prose-p:m-0"
 						v-html="sanitizeAndFormat(command.extendedHelp.reminder)"
 					></div>
 				</div>
@@ -278,7 +278,7 @@ function sanitizeAndFormat(text: string): string {
 			// Inline code
 			.replace(
 				/`(.+?)`/g,
-				'<code class="px-1.5 py-0.5 rounded bg-base-300/50 text-sm font-mono">$1</code>',
+				'<code class="px-1.5 py-0.5 rounded bg-accented/50 text-sm font-mono">$1</code>',
 			)
 			// Links — only allow http(s) protocols to prevent javascript: injection
 			.replace(
diff --git a/app/components/command/SubCategory.vue b/app/components/command/SubCategory.vue
index 8cd204282..8a7cb6cfc 100644
--- a/app/components/command/SubCategory.vue
+++ b/app/components/command/SubCategory.vue
@@ -10,7 +10,7 @@
 				root: 'space-y-3',
 				item: '',
 				content:
-					'rounded-2xl rounded-t-none overflow-hidden transition-all border border-t-0 border-base-content/10 bg-base-200/30',
+					'rounded-2xl rounded-t-none overflow-hidden transition-all border border-t-0 border-default/10 bg-muted/30',
 			}"
 			class="animate-fade-in"
 		>
@@ -18,7 +18,7 @@
 				<UButton
 					color="neutral"
 					variant="ghost"
-					class="w-full justify-between rounded-2xl border border-base-content/10 bg-base-200/50 px-6 py-4 transition-all hover:bg-base-200/80"
+					class="w-full justify-between rounded-2xl border border-default/10 bg-muted/50 px-6 py-4 transition-all hover:bg-muted/80"
 					:class="{ 'rounded-b-none': open }"
 					:aria-expanded="open"
 					:aria-controls="`category-content-${item.value.replace(/\s+/g, '-').toLowerCase()}`"
@@ -59,8 +59,8 @@
 							item: 'border-0',
 							content: 'border-0 pt-4',
 							trigger:
-								'bg-base-content/10 hover:bg-base-content/15 px-5 py-4 rounded-xl hover-lift transition-all w-full border border-base-content/10',
-							trailingIcon: 'text-base-content/60 size-5 shrink-0',
+								'bg-default/10 hover:bg-default/15 px-5 py-4 rounded-xl hover-lift transition-all w-full border border-default/10',
+							trailingIcon: 'text-muted size-5 shrink-0',
 							label: 'flex items-center gap-4 flex-1 min-w-0',
 						}"
 					>
@@ -69,7 +69,7 @@
 								{{ commandItem.label }}
 							</div>
 
-							<div class="ml-4 flex-1 truncate text-sm text-base-content/70">
+							<div class="ml-4 flex-1 truncate text-sm text-toned">
 								{{ commandItem.description || "No description yet" }}
 							</div>
 						</template>
@@ -91,16 +91,16 @@
 	</div>
 	<div
 		v-else-if="searchValue"
-		class="rounded-2xl bg-base-200/30 px-6 py-12 text-center"
+		class="rounded-2xl bg-muted/30 px-6 py-12 text-center"
 		role="status"
 	>
 		<UIcon
 			name="i-heroicons-magnifying-glass"
-			class="mx-auto mb-4 h-12 w-12 text-base-content/30"
+			class="mx-auto mb-4 h-12 w-12 text-muted/40"
 			aria-hidden="true"
 		/>
 		<h3 class="mb-2 text-lg font-bold">No commands found in {{ categoryName }}</h3>
-		<p class="text-base-content/70">Try adjusting your search or browse other categories.</p>
+		<p class="text-toned">Try adjusting your search or browse other categories.</p>
 	</div>
 </template>
 
diff --git a/app/components/discord/embed.vue b/app/components/discord/embed.vue
index 0927ff40c..2a9830c82 100644
--- a/app/components/discord/embed.vue
+++ b/app/components/discord/embed.vue
@@ -67,8 +67,8 @@ const dtf = new Intl.DateTimeFormat("en-US", { dateStyle: "short", timeStyle: "s
 	--discord-embed-default-border: #1e1f22;
 	@apply mt-1 max-w-fit border-l-4 p-3;
 	border-radius: 0.25rem;
-	background-color: var(--color-base-200);
-	background-color: oklch(from var(--color-base-200) calc(l - 0.02) c h);
+	background-color: var(--wolfstar-surface-200);
+	background-color: oklch(from var(--wolfstar-surface-200) calc(l - 0.02) c h);
 }
 
 /* Media features */
diff --git a/app/components/discord/inline-code.unused.vue b/app/components/discord/inline-code.unused.vue
index 3d01ef4c6..1b97ce17c 100644
--- a/app/components/discord/inline-code.unused.vue
+++ b/app/components/discord/inline-code.unused.vue
@@ -5,7 +5,7 @@
 <style scoped>
 @reference "@/assets/css/main.css";
 .discord-message-inline-code {
-	@apply rounded-md border bg-base-200 px-1 font-mono;
+	@apply rounded-md border bg-muted px-1 font-mono;
 	border-color: var(--colors-base-300);
 	border-color: oklch(from var(--colors-base-300) calc(l - 0.05) c h);
 }
diff --git a/app/components/discord/invite.vue b/app/components/discord/invite.vue
index bd01ba6cb..6194f2806 100644
--- a/app/components/discord/invite.vue
+++ b/app/components/discord/invite.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="mt-2 rounded-md bg-base-200 px-2 pt-2 pb-2 text-base-content drop-shadow-lg sm:px-4 sm:pb-4"
+		class="mt-2 rounded-md bg-muted px-2 pt-2 pb-2 text-default drop-shadow-lg sm:px-4 sm:pb-4"
 	>
 		<span class="text-xs font-extrabold uppercase">You've been invited to join a server</span>
 		<div class="mt-2 flex">
@@ -25,7 +25,7 @@
 					<span>{{ online.toLocaleString() }} Online</span>
 
 					<span
-						class="mr-1 ml-2 inline-block h-1.5 w-1.5 rounded-full bg-base-content/80 sm:h-2 sm:w-2 md:ml-4"
+						class="mr-1 ml-2 inline-block h-1.5 w-1.5 rounded-full bg-muted sm:h-2 sm:w-2 md:ml-4"
 					></span>
 					<span>{{ members.toLocaleString() }} Members</span>
 				</div>
diff --git a/app/components/discord/message.vue b/app/components/discord/message.vue
index 51e6c33ff..a3ac8ad84 100644
--- a/app/components/discord/message.vue
+++ b/app/components/discord/message.vue
@@ -98,7 +98,7 @@ const profile = computed(() => Profiles[name]);
 }
 
 .discord-message-ephemeral-footer {
-	@apply mt-1.5 flex items-center gap-1 text-sm text-base-content/60;
+	@apply mt-1.5 flex items-center gap-1 text-sm text-muted;
 }
 
 .discord-message-ephemeral-footer > .discord-message-link {
@@ -130,7 +130,7 @@ const profile = computed(() => Profiles[name]);
 	margin-bottom: calc(-4px + var(--custom-message-spacing-vertical-container-cozy));
 	margin-left: calc(-0.5 * var(--spine-width));
 
-	@apply border-base-content/20;
+	@apply border-default/20;
 	border-width: var(--spine-width) 0 0 var(--spine-width);
 	border-style: solid;
 	border-top-left-radius: 6px;
diff --git a/app/components/discord/time.unused.vue b/app/components/discord/time.unused.vue
index 3f35de711..6e85617f0 100644
--- a/app/components/discord/time.unused.vue
+++ b/app/components/discord/time.unused.vue
@@ -18,6 +18,6 @@ const formatter = computed(() => TimeFormatters[format]);
 <style scoped>
 @reference "@/assets/css/main.css";
 .discord-message-time {
-	@apply rounded-md bg-base-content/10 px-0.5;
+	@apply bg-base-content/10 rounded-md px-0.5;
 }
 </style>
diff --git a/app/components/guild/SettingsSection.vue b/app/components/guild/SettingsSection.vue
index c24686b67..83c49c7df 100644
--- a/app/components/guild/SettingsSection.vue
+++ b/app/components/guild/SettingsSection.vue
@@ -7,7 +7,7 @@ const theme = tv({
 		root: "w-full space-y-6",
 		header: "space-y-1",
 		heading: "",
-		description: "text-sm text-base-content/70",
+		description: "text-sm text-toned",
 		content: "space-y-4",
 	},
 	variants: {
diff --git a/app/components/guild/card.vue b/app/components/guild/card.vue
index 59b375af0..1d6f5636d 100644
--- a/app/components/guild/card.vue
+++ b/app/components/guild/card.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="relative flex h-full transform-gpu flex-col rounded-xl border border-base-300/70 bg-base-100 p-2 shadow-lg transition-all duration-300 ease-out motion-reduce:transform-none motion-reduce:transition-none md:p-4"
+		class="relative flex h-full transform-gpu flex-col rounded-xl border border-accented/70 bg-default p-2 shadow-lg transition-all duration-300 ease-out motion-reduce:transform-none motion-reduce:transition-none md:p-4"
 		:class="cardClasses"
 	>
 		<!-- Skeleton Loading State -->
@@ -50,7 +50,7 @@
 					>
 						<UIcon
 							name="heroicons:adjustments-horizontal"
-							class="size-5 text-success-content"
+							class="text-success-content size-5"
 							aria-hidden="true"
 						/>
 					</div>
@@ -68,7 +68,7 @@
 					>
 						<UIcon
 							name="heroicons:rocket-launch"
-							class="size-5 text-primary-content"
+							class="size-5 text-inverted"
 							aria-hidden="true"
 						/>
 					</div>
@@ -84,7 +84,7 @@
 				<!-- Guild Name -->
 				<span
 					class="w-full truncate text-center text-xs font-medium"
-					:class="guild.manageable ? 'text-base-content' : 'text-base-content/50'"
+					:class="guild.manageable ? 'text-default' : 'text-default/50'"
 				>
 					{{ guild.name }}
 				</span>
@@ -101,17 +101,17 @@
 				<!-- Guild Name -->
 				<h3
 					class="line-clamp-2 min-h-12 text-base font-bold"
-					:class="guild.manageable ? 'text-base-content' : 'text-base-content/50'"
+					:class="guild.manageable ? 'text-default' : 'text-default/50'"
 				>
 					{{ guild.name }}
 				</h3>
 
 				<!-- Guild Stats -->
-				<div class="flex items-center justify-center gap-4 text-xs text-base-content/60">
+				<div class="flex items-center justify-center gap-4 text-xs text-muted">
 					<span class="flex items-center gap-1" title="Total members">
 						<UIcon
 							name="heroicons:user-group"
-							class="size-3 text-base-content/70"
+							class="size-3 text-toned"
 							aria-hidden="true"
 						/>
 						<span class="sr-only">Total members:</span>
@@ -159,7 +159,7 @@
 					</NuxtLink>
 					<div
 						v-else
-						class="flex h-9 w-full cursor-not-allowed items-center justify-center rounded-lg bg-base-300/50 px-3 text-xs font-medium text-base-content/50 transition-all duration-200"
+						class="flex h-9 w-full cursor-not-allowed items-center justify-center rounded-lg bg-accented/50 px-3 text-xs font-medium text-default/50 transition-all duration-200"
 					>
 						<UIcon
 							name="heroicons:no-symbol"
diff --git a/app/components/guild/cards.vue b/app/components/guild/cards.vue
index fb22c6efc..c7599a9bc 100644
--- a/app/components/guild/cards.vue
+++ b/app/components/guild/cards.vue
@@ -1,21 +1,21 @@
 <template>
 	<UContainer
-		class="w-full max-w-7xl px-4 py-4 text-base-content sm:px-6 sm:py-6 lg:px-8"
+		class="w-full max-w-7xl px-4 py-4 text-default sm:px-6 sm:py-6 lg:px-8"
 		role="region"
 		aria-label="Server list"
 	>
 		<div class="mb-4 flex flex-col justify-between gap-4 sm:flex-row">
 			<div class="flex items-start">
-				<div v-if="loading || filterLoading" class="text-sm text-base-content/60 sm:block">
+				<div v-if="loading || filterLoading" class="text-sm text-muted sm:block">
 					<div class="flex animate-pulse items-center">
-						<div class="h-4 w-24 rounded bg-base-content/20"></div>
-						<div class="mx-1 h-4 w-4 rounded bg-base-content/20"></div>
-						<div class="h-4 w-24 rounded bg-base-content/20"></div>
+						<div class="h-4 w-24 rounded bg-muted/50"></div>
+						<div class="mx-1 h-4 w-4 rounded bg-muted/50"></div>
+						<div class="h-4 w-24 rounded bg-muted/50"></div>
 					</div>
 				</div>
 				<div
 					v-else-if="guilds"
-					class="text-sm text-base-content/60 sm:block"
+					class="text-sm text-muted sm:block"
 					role="status"
 					aria-live="polite"
 					aria-atomic="true"
@@ -124,10 +124,10 @@
 			<div v-if="!loading && !error && filteredGuilds.length === 0">
 				<div class="flex flex-col items-center justify-center space-y-6 py-16">
 					<div class="py-16 text-center" role="status" aria-live="polite">
-						<h2 class="mb-2 text-xl font-bold text-base-content/80">
+						<h2 class="mb-2 text-xl font-bold text-toned">
 							{{ searchQuery ? "No matching servers" : "No servers found" }}
 						</h2>
-						<p class="mx-auto max-w-md text-base-content/60">
+						<p class="mx-auto max-w-md text-muted">
 							{{
 								searchQuery
 									? "Try adjusting your search terms or filters."
diff --git a/app/components/guild/icon.vue b/app/components/guild/icon.vue
index 3f61f576a..b0de4ea5c 100644
--- a/app/components/guild/icon.vue
+++ b/app/components/guild/icon.vue
@@ -4,7 +4,7 @@
 		ref="icon"
 		:class="[
 			variant === 'card'
-				? 'group relative flex flex-col items-center space-y-3 rounded-xl border border-base-300 bg-base-100 p-4 shadow-sm transition-all duration-300 hover:scale-[1.02] hover:bg-base-200/50 hover:shadow-lg'
+				? 'group relative flex flex-col items-center space-y-3 rounded-xl border border-accented bg-default p-4 shadow-sm transition-all duration-300 hover:scale-[1.02] hover:bg-muted/50 hover:shadow-lg'
 				: 'relative',
 			{
 				'ring-2 ring-primary/20':
@@ -38,7 +38,10 @@
 					:class="iconSizeClasses"
 					role="img"
 				>
-					<div v-if="!loaded" class="h-full w-full skeleton"></div>
+					<div
+						v-if="!loaded"
+						class="h-full w-full animate-pulse rounded-[inherit] bg-elevated"
+					></div>
 					<NuxtImg
 						v-if="!isDefault && loaded"
 						:src="createUrl(preferredFormat, iconPixelSize)"
@@ -54,7 +57,7 @@
 					/>
 					<div
 						v-else-if="isDefault && loaded"
-						class="flex items-center justify-center rounded-full bg-linear-to-br from-primary/20 to-secondary/20 text-base-content"
+						class="flex items-center justify-center rounded-full bg-linear-to-br from-primary/20 to-secondary/20 text-default"
 						:class="iconSizeClasses"
 					>
 						<span :class="acronymSizeClasses">{{ guild.acronym }}</span>
@@ -66,7 +69,7 @@
 		<!-- Guild Name (optional) - only in card variant -->
 		<div v-if="variant === 'card' && showName && guild" class="w-full text-center">
 			<h3
-				class="line-clamp-1 text-xs font-medium text-base-content transition-colors group-hover:text-primary"
+				class="line-clamp-1 text-xs font-medium text-default transition-colors group-hover:text-primary"
 			>
 				{{ guild.name }}
 			</h3>
@@ -75,7 +78,7 @@
 		<!-- Guild Stats (optional) - only in card variant -->
 		<div
 			v-if="variant === 'card' && showStats && guild"
-			class="flex items-center justify-center space-x-2 text-xs text-base-content/60"
+			class="flex items-center justify-center space-x-2 text-xs text-muted"
 		>
 			<span
 				v-if="guild.approximateMemberCount"
@@ -134,7 +137,7 @@ const { stop } = useIntersectionObserver(
 // Make these computed to avoid SSR hydration issues
 const isDefault = ref(false);
 const isAnimated = ref(false);
-// Size-based classes for DaisyUI Avatar
+// Size-based classes for guild avatar display
 const iconSizeClasses = computed(() => {
 	const sizeMap = {
 		lg: "size-20",
diff --git a/app/components/guild/logs/CommandLogTable.vue b/app/components/guild/logs/CommandLogTable.vue
index 26de22ab0..a1c3fd7b3 100644
--- a/app/components/guild/logs/CommandLogTable.vue
+++ b/app/components/guild/logs/CommandLogTable.vue
@@ -43,7 +43,7 @@
 				class="min-h-100 shrink-0"
 				:ui="{
 					base: 'table-fixed border-separate border-spacing-0',
-					thead: '[&>tr]:bg-base-200/50 [&>tr]:after:content-none',
+					thead: '[&>tr]:bg-muted/50 [&>tr]:after:content-none',
 					tbody: '[&>tr]:last:[&>td]:border-b-0',
 					th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
 					td: 'border-b border-default',
diff --git a/app/components/guild/logs/DashboardActivityTable.vue b/app/components/guild/logs/DashboardActivityTable.vue
index bdaf0c344..e26a08c81 100644
--- a/app/components/guild/logs/DashboardActivityTable.vue
+++ b/app/components/guild/logs/DashboardActivityTable.vue
@@ -32,7 +32,7 @@
 				class="min-h-100 shrink-0"
 				:ui="{
 					base: 'table-fixed border-separate border-spacing-0',
-					thead: '[&>tr]:bg-base-200/50 [&>tr]:after:content-none',
+					thead: '[&>tr]:bg-muted/50 [&>tr]:after:content-none',
 					tbody: '[&>tr]:last:[&>td]:border-b-0',
 					th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
 					td: 'border-b border-default',
diff --git a/app/components/guild/settings/Channels.vue b/app/components/guild/settings/Channels.vue
index 5c2a73763..fe4e23908 100644
--- a/app/components/guild/settings/Channels.vue
+++ b/app/components/guild/settings/Channels.vue
@@ -14,9 +14,9 @@
 			<div class="space-y-4">
 				<div class="flex items-center gap-2">
 					<UIcon name="i-heroicons-document-text" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">Logging Channels</h3>
+					<h3 class="text-lg font-semibold text-default">Logging Channels</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
+				<p class="text-sm text-toned">
 					Select which channels should receive specific log events. Leave empty to disable
 					logging for that event.
 				</p>
@@ -39,9 +39,9 @@
 			<div class="space-y-4">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:eye-slash" class="size-5 text-warning" />
-					<h3 class="text-lg font-semibold text-base-content">Excluded Channels</h3>
+					<h3 class="text-lg font-semibold text-default">Excluded Channels</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
+				<p class="text-sm text-toned">
 					Select channels that should be ignored for specific logging events. Messages and
 					events in these channels won't be logged.
 				</p>
diff --git a/app/components/guild/settings/DisabledCommands.vue b/app/components/guild/settings/DisabledCommands.vue
index a878b4785..97678433c 100644
--- a/app/components/guild/settings/DisabledCommands.vue
+++ b/app/components/guild/settings/DisabledCommands.vue
@@ -17,7 +17,7 @@
 						<div
 							v-for="j in 8"
 							:key="j"
-							class="flex items-center justify-between rounded-lg border border-base-200 p-3"
+							class="flex items-center justify-between rounded-lg border border-muted p-3"
 						>
 							<div class="flex-1 space-y-2">
 								<USkeleton class="h-5 w-32" />
@@ -52,7 +52,7 @@
 							<UButton
 								color="neutral"
 								variant="ghost"
-								class="w-full justify-between border-b border-base-200"
+								class="w-full justify-between border-b border-muted"
 							>
 								<span class="truncate text-xl font-medium">{{ category }}</span>
 
@@ -73,13 +73,13 @@
 								<div
 									v-for="command in getCommandsByCategory(category)"
 									:key="command.name"
-									class="flex items-center justify-between rounded-lg border border-base-200 p-3"
+									class="flex items-center justify-between rounded-lg border border-muted p-3"
 								>
 									<div class="min-w-0 flex-1">
-										<p class="truncate font-medium text-base-content">
+										<p class="truncate font-medium text-default">
 											{{ command.name }}
 										</p>
-										<p class="truncate text-sm text-base-content/60">
+										<p class="truncate text-sm text-muted">
 											{{ command.description }}
 										</p>
 									</div>
diff --git a/app/components/guild/settings/Events.vue b/app/components/guild/settings/Events.vue
index 4d9fc93e8..d2cf8cc6e 100644
--- a/app/components/guild/settings/Events.vue
+++ b/app/components/guild/settings/Events.vue
@@ -14,9 +14,9 @@
 			<div class="space-y-2">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:shield-check" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">Moderation Events</h3>
+					<h3 class="text-lg font-semibold text-default">Moderation Events</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
+				<p class="text-sm text-toned">
 					These events involve moderation actions. Please set up a Moderation Logs channel
 					on
 					<NuxtLink
@@ -36,7 +36,7 @@
 					:name="event.key"
 				>
 					<template #description>
-						<p class="text-sm text-base-content/70">{{ event.description }}</p>
+						<p class="text-sm text-toned">{{ event.description }}</p>
 					</template>
 					<USwitch v-model="state[event.key]" :aria-label="`Toggle ${event.title}`" />
 				</UFormField>
@@ -47,9 +47,9 @@
 			<div class="space-y-2">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:chat-bubble-left-right" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">Message Events</h3>
+					<h3 class="text-lg font-semibold text-default">Message Events</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
+				<p class="text-sm text-toned">
 					These events track message activity. The required channels vary by event type
 					and can be configured on
 					<NuxtLink
@@ -69,7 +69,7 @@
 					:name="event.key"
 				>
 					<template #description>
-						<p class="text-sm text-base-content/70">{{ event.description }}</p>
+						<p class="text-sm text-toned">{{ event.description }}</p>
 					</template>
 					<USwitch v-model="state[event.key]" :aria-label="`Toggle ${event.title}`" />
 				</UFormField>
diff --git a/app/components/guild/settings/General.vue b/app/components/guild/settings/General.vue
index f2cee0f6f..d0dfdaaa6 100644
--- a/app/components/guild/settings/General.vue
+++ b/app/components/guild/settings/General.vue
@@ -14,10 +14,10 @@
 				:key="stat.label"
 				class="flex min-w-0 items-baseline justify-between md:justify-start md:gap-2"
 			>
-				<dt class="truncate text-sm font-semibold text-base-content/70 md:text-base">
+				<dt class="truncate text-sm font-semibold text-toned md:text-base">
 					{{ stat.label }}:
 				</dt>
-				<dd class="shrink-0 text-base font-bold text-base-content md:text-lg">
+				<dd class="shrink-0 text-base font-bold text-default md:text-lg">
 					{{ stat.value.toLocaleString() }}
 				</dd>
 			</div>
@@ -47,7 +47,7 @@
 
 	<GuildSettingsSection
 		title="General Settings"
-		class="rounded-md border border-base-200 bg-base-200/30 p-3 sm:border-2 sm:p-4 md:p-6"
+		class="rounded-md border border-muted bg-muted/30 p-3 sm:border-2 sm:p-4 md:p-6"
 		:ui="{ heading: 'text-xl font-bold tracking-wide' }"
 	>
 		<GuildSettingsForm
@@ -84,7 +84,7 @@
 						<p class="text-sm text-error">{{ error }}</p>
 					</template>
 					<template #description>
-						<p id="prefix-description" class="text-sm text-base-content/70">
+						<p id="prefix-description" class="text-sm text-toned">
 							The prefix used to trigger WolfStar commands in this server.
 						</p>
 					</template>
@@ -94,7 +94,7 @@
 			<div>
 				<UFormField label="Language" name="language">
 					<template #description>
-						<p id="language-description" class="text-sm text-base-content/70">
+						<p id="language-description" class="text-sm text-toned">
 							The language WolfStar uses for responses in this server.
 						</p>
 					</template>
@@ -127,7 +127,7 @@
 		empty-title="No settings changes yet"
 		empty-description="Changes you make to this server's settings will appear here so you can track who changed what."
 		refresh-label="Refresh audit log"
-		class="rounded-md border border-base-200 bg-base-200/30 p-3 sm:border-2 sm:p-4 md:p-6"
+		class="rounded-md border border-muted bg-muted/30 p-3 sm:border-2 sm:p-4 md:p-6"
 		@refresh="refreshAuditLog()"
 	>
 		<UTable
@@ -141,7 +141,7 @@
 			class="shrink-0"
 			:ui="{
 				base: 'table-fixed border-separate border-spacing-0',
-				thead: '[&>tr]:bg-base-200/50 [&>tr]:after:content-none',
+				thead: '[&>tr]:bg-muted/50 [&>tr]:after:content-none',
 				tbody: '[&>tr]:last:[&>td]:border-b-0',
 				th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
 				td: 'border-b border-default',
diff --git a/app/components/guild/settings/Moderation.vue b/app/components/guild/settings/Moderation.vue
index 2217cf341..2a6fd634e 100644
--- a/app/components/guild/settings/Moderation.vue
+++ b/app/components/guild/settings/Moderation.vue
@@ -19,7 +19,7 @@
 					:name="setting.key"
 				>
 					<template #description>
-						<p class="text-sm text-base-content/70">{{ setting.description }}</p>
+						<p class="text-sm text-toned">{{ setting.description }}</p>
 					</template>
 					<USwitch v-model="state[setting.key]" :aria-label="`Toggle ${setting.name}`" />
 				</UFormField>
diff --git a/app/components/guild/settings/Roles.vue b/app/components/guild/settings/Roles.vue
index 2fcc65435..c7e52e889 100644
--- a/app/components/guild/settings/Roles.vue
+++ b/app/components/guild/settings/Roles.vue
@@ -37,7 +37,7 @@
 			<div class="space-y-4">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:adjustments-horizontal" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">General Options</h3>
+					<h3 class="text-lg font-semibold text-default">General Options</h3>
 				</div>
 
 				<UFormField
@@ -57,9 +57,9 @@
 			<div class="space-y-4">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:user-group" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">Configurable Roles</h3>
+					<h3 class="text-lg font-semibold text-default">Configurable Roles</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
+				<p class="text-sm text-toned">
 					Assign roles for core bot functions like moderation and auto-assignment.
 				</p>
 
@@ -92,11 +92,9 @@
 			<div class="space-y-4">
 				<div class="flex items-center gap-2">
 					<UIcon name="heroicons:shield-check" class="size-5 text-primary" />
-					<h3 class="text-lg font-semibold text-base-content">Restricted Roles</h3>
+					<h3 class="text-lg font-semibold text-default">Restricted Roles</h3>
 				</div>
-				<p class="text-sm text-base-content/70">
-					Roles applied when a restriction command is used.
-				</p>
+				<p class="text-sm text-toned">Roles applied when a restriction command is used.</p>
 
 				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					<template v-for="roleConfig in restrictedRoles" :key="roleConfig.key">
diff --git a/app/components/pwa/Prompt.client.vue b/app/components/pwa/Prompt.client.vue
index dfe958bcf..58aadf79d 100644
--- a/app/components/pwa/Prompt.client.vue
+++ b/app/components/pwa/Prompt.client.vue
@@ -9,7 +9,7 @@
 	>
 		<div v-if="$pwa?.needRefresh">
 			<div
-				class="flex items-center gap-3 rounded-full bg-base-200 px-4 py-3 shadow-lg ring-1 ring-base-100"
+				class="flex items-center gap-3 rounded-full bg-muted px-4 py-3 shadow-lg ring-1 ring-default"
 			>
 				<span class="text-lg">✨</span>
 				<div class="text-sm font-medium">Update available</div>
diff --git a/app/layouts/dashboard.vue b/app/layouts/dashboard.vue
index 45df2d987..edc3f8ad9 100644
--- a/app/layouts/dashboard.vue
+++ b/app/layouts/dashboard.vue
@@ -5,9 +5,9 @@
 			collapsible
 			resizable
 			:ui="{
-				header: 'bg-base-200/80',
-				body: 'bg-base-200/80 border-r border-base-200',
-				footer: 'bg-base-200/80 border-t border-b border-base-200',
+				header: 'bg-muted/80',
+				body: 'bg-muted/80 border-r border-muted',
+				footer: 'bg-muted/80 border-t border-b border-muted',
 			}"
 		>
 			<template #header="{ collapsed }">
@@ -54,14 +54,14 @@
 		>
 			<UIcon name="ph:warning-duotone" class="size-12 text-error" aria-hidden="true" />
 			<div class="space-y-2">
-				<h2 class="text-xl font-semibold text-base-content">
+				<h2 class="text-xl font-semibold text-default">
 					{{ nuxtError.statusMessage || "Error Loading Dashboard" }}
 				</h2>
 				<p v-if="nuxtError.status === 403">
 					You don't have permission to access this server's dashboard. Make sure you have
 					the Manage Server permission and try again.
 				</p>
-				<p class="text-sm text-base-content/60">
+				<p class="text-sm text-muted">
 					{{
 						nuxtError.message ||
 						"Something went wrong while loading the dashboard. Please try again, or contact support if the problem continues."
@@ -78,8 +78,8 @@
 			<div class="flex flex-col items-center space-y-4">
 				<UIcon name="ph:warning-duotone" class="size-12 text-primary" aria-hidden="true" />
 				<div class="space-y-2 text-center">
-					<h2 class="text-xl font-semibold text-base-content">Loading Dashboard</h2>
-					<p class="text-sm text-base-content/60">Loading server settings...</p>
+					<h2 class="text-xl font-semibold text-default">Loading Dashboard</h2>
+					<p class="text-sm text-muted">Loading server settings...</p>
 				</div>
 				<div class="flex items-center space-x-2">
 					<div
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 2fb698b93..c67d0ceef 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,7 +2,7 @@
 	<div class="app-layout" :class="appName">
 		<a
 			href="#maincontent"
-			class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-content focus:shadow-lg focus:outline focus:outline-2 focus:outline-transparent"
+			class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-inverted focus:shadow-lg focus:outline focus:outline-2 focus:outline-transparent"
 		>
 			Skip to main content
 		</a>
@@ -42,7 +42,7 @@ const appName = inject(ProviderAppNameKey, ref<"wolfstar" | "staryl">("wolfstar"
 .app-layout {
 	@apply flex min-h-screen flex-col bg-grid-pattern;
 	position: relative;
-	background-color: var(--color-base-100);
+	background-color: var(--wolfstar-surface-100);
 }
 
 .app-layout::before {
@@ -55,7 +55,7 @@ const appName = inject(ProviderAppNameKey, ref<"wolfstar" | "staryl">("wolfstar"
 			oklch(from var(--color) l c h / 0.15) 0%,
 			transparent 80%
 		),
-		linear-gradient(to bottom, var(--color-base-100) 0%, transparent 20%);
+		linear-gradient(to bottom, var(--wolfstar-surface-100) 0%, transparent 20%);
 	background-size:
 		max(100vw, 600px) 50rem,
 		100% 100%;
diff --git a/app/pages/(app)/guilds/[...id]/manage.stories.ts b/app/pages/(app)/guilds/[...id]/manage.stories.ts
index 26e2ce721..afa48886e 100644
--- a/app/pages/(app)/guilds/[...id]/manage.stories.ts
+++ b/app/pages/(app)/guilds/[...id]/manage.stories.ts
@@ -29,9 +29,9 @@ const meta: Meta<typeof ManagePage> = {
 						collapsible
 						resizable
 						:ui="{
-							header: 'bg-base-200/80',
-							body: 'bg-base-200/80 border-r border-base-200',
-							footer: 'bg-base-200/80 border-t border-b border-base-200',
+							header: 'bg-muted/80',
+							body: 'bg-muted/80 border-r border-muted',
+							footer: 'bg-muted/80 border-t border-b border-muted',
 						}"
 					/>
 					<story />
diff --git a/app/pages/(marketing)/privacy.vue b/app/pages/(marketing)/privacy.vue
index 72f08d862..779bcd717 100644
--- a/app/pages/(marketing)/privacy.vue
+++ b/app/pages/(marketing)/privacy.vue
@@ -4,11 +4,11 @@
 			<!-- Header -->
 			<header class="mt-8 mb-12">
 				<div class="mb-6 flex items-baseline justify-between gap-4">
-					<h1 class="text-4xl font-bold text-base-content/80 sm:text-5xl">
+					<h1 class="text-4xl font-bold text-toned sm:text-5xl">
 						WolfStar Privacy Policy
 					</h1>
 				</div>
-				<p class="mb-4 text-lg text-base-content/70">
+				<p class="mb-4 text-lg text-toned">
 					Last updated and effective:
 					<NuxtTime
 						locale="en-US"
@@ -17,7 +17,7 @@
 						time-style="medium"
 					/>
 				</p>
-				<div class="space-y-2 text-sm text-base-content/60">
+				<div class="space-y-2 text-sm text-muted">
 					<p>
 						<span class="font-semibold">Owner and data controller:</span> WolfStar
 						Project
@@ -38,10 +38,10 @@
 			<div class="prose prose-lg max-w-none space-y-12">
 				<!-- Welcome Section -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Welcome to WolfStar Project
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						WolfStar Project provides a chat bot for the
 						<NuxtLink
 							to="https://discord.com/privacy"
@@ -70,14 +70,14 @@
 
 				<!-- Information We Collect -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Information we collect
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						When you interact with us through the Services, we may collect information
 						from you, as further described below:
 					</p>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						<span class="font-semibold">Information You Provide:</span> We collect
 						information from you when you voluntarily provide such information, such as
 						when you use any of the Services. Information we collect may include but not
@@ -88,10 +88,10 @@
 
 				<!-- What Are Cookies -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						What are cookies?
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						Cookies are small text files stored on your device when you visit a website.
 						Their purpose is to enhance your browsing experience by remembering certain
 						preferences and settings.
@@ -100,16 +100,16 @@
 
 				<!-- What Cookies Do We Use -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						What cookies do we use?
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						We only use essential technical cookies for purposes strictly necessary for
 						the site's functionality. We do not use third-party advertising cookies.
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">h3 (Session Cookie):</span> This is our
 								secure session cookie. It stores the OAuth access token when you
@@ -119,7 +119,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Sentry (error monitoring):</span> Sentry
 								may set first‑party cookies or use local storage to persist session
@@ -129,7 +129,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold"
 									>Hosting provider cookies (Netlify):</span
@@ -145,10 +145,8 @@
 
 				<!-- Local Storage -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Local storage
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Local storage</h2>
+					<p class="leading-relaxed text-default">
 						In addition to session cookies, we use your browser's Local Storage to save
 						your display preferences. This allows us to remember the theme (light/dark)
 						and other settings you have selected, so you don't have to reconfigure them
@@ -160,21 +158,21 @@
 
 				<!-- Managing Cookies -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Managing cookies
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						You can configure your browser to accept, reject, or delete cookies
 						according to your preferences. However, please note that rejecting essential
 						cookies may prevent full access to the application.
 					</p>
-					<p class="mb-3 leading-relaxed text-base-content">
+					<p class="mb-3 leading-relaxed text-default">
 						Below are links with instructions for cookie management in the most commonly
 						used browsers:
 					</p>
-					<ul class="list-none space-y-2 pl-0 text-base-content">
+					<ul class="list-none space-y-2 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<NuxtLink
 								to="https://support.google.com/chrome/answer/95647?hl=en"
 								target="_blank"
@@ -184,7 +182,7 @@
 							</NuxtLink>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<NuxtLink
 								to="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox"
 								target="_blank"
@@ -194,7 +192,7 @@
 							</NuxtLink>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<NuxtLink
 								to="https://support.microsoft.com/en-us/windows/manage-cookies-in-microsoft-edge-168dab11-0753-043d-7c16-ede5947fc64d"
 								target="_blank"
@@ -204,7 +202,7 @@
 							</NuxtLink>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<NuxtLink
 								to="https://support.apple.com/guide/safari/manage-cookies-sfri11471/mac"
 								target="_blank"
@@ -218,39 +216,37 @@
 
 				<!-- Analytics -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Analytics
-					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Analytics</h2>
+					<p class="mb-4 leading-relaxed text-default">
 						We use Netlify Analytics to understand how visitors use our website. This
 						helps us improve the user experience and identify issues.
 					</p>
-					<p class="mb-3 leading-relaxed text-base-content">
+					<p class="mb-3 leading-relaxed text-default">
 						Netlify Analytics is designed with privacy in mind:
 					</p>
-					<ul class="list-none space-y-2 pl-0 text-base-content">
+					<ul class="list-none space-y-2 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>It does not use cookies</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>It does not collect personal identifiers</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>It does not track users across websites</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>All data is aggregated and anonymised</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Data is collected server-side, not from your browser</span>
 						</li>
 					</ul>
-					<p class="mt-4 leading-relaxed text-base-content">
+					<p class="mt-4 leading-relaxed text-default">
 						The only information collected includes: page URLs, referrer,
 						country/region, device type, browser, and operating system. This data cannot
 						be used to identify individual users. All analytics data is processed
@@ -260,47 +256,47 @@
 
 				<!-- Error Tracking -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Error tracking and monitoring
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						We use Sentry for error tracking and application monitoring. This helps us
 						identify and fix bugs, improve performance, and ensure a better user
 						experience.
 					</p>
-					<p class="mb-3 leading-relaxed text-base-content">
+					<p class="mb-3 leading-relaxed text-default">
 						Sentry may collect the following information when errors occur:
 					</p>
-					<ul class="list-none space-y-2 pl-0 text-base-content">
+					<ul class="list-none space-y-2 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Error messages and stack traces</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Browser type and version</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Operating system</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>IP address (anonymized)</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Page URL where the error occurred</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span
 								>Session replay data (for 10% of sessions and 100% of sessions with
 								errors)</span
 							>
 						</li>
 					</ul>
-					<p class="mt-4 leading-relaxed text-base-content">
+					<p class="mt-4 leading-relaxed text-default">
 						Session replays capture user interactions (clicks, scrolls, navigation) to
 						help us understand how errors occur. Personal information entered in forms
 						is automatically masked. Sentry may set first‑party cookies or use local
@@ -316,37 +312,37 @@
 
 				<!-- Authenticated Users -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Authenticated users
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						When you connect your Discord account to WolfStar, we store your OAuth
 						access token in a secure, HTTP-only, encrypted session cookie. This token is
 						used solely to authenticate requests on your behalf and access your Discord
 						guilds where WolfStar is installed.
 					</p>
-					<p class="mb-3 leading-relaxed text-base-content">
+					<p class="mb-3 leading-relaxed text-default">
 						The information we collect from Discord includes:
 					</p>
-					<ul class="list-none space-y-2 pl-0 text-base-content">
+					<ul class="list-none space-y-2 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Discord User ID</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Username and discriminator</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Avatar</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>List of guilds (servers) where you have permissions</span>
 						</li>
 					</ul>
-					<p class="mt-4 leading-relaxed text-base-content">
+					<p class="mt-4 leading-relaxed text-default">
 						We do not store your Discord password or credentials. We only access data
 						necessary to provide the features you use. You can disconnect your account
 						at any time from your profile page, which will delete your session and
@@ -356,16 +352,16 @@
 
 				<!-- Data We Collect Automatically -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Data we collect automatically
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						When you interact with us through the Services, we automatically receive and
 						store certain information to provide and improve our services:
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">IP Address:</span> Used for security,
 								rate limiting, and general location (country/region) for analytics.
@@ -373,7 +369,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Device Information:</span> Browser type,
 								operating system, device type, and screen resolution to optimize the
@@ -381,7 +377,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Usage Data:</span> Pages visited, time
 								spent on pages, referrer URLs, and interaction patterns to
@@ -390,7 +386,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Bot Interactions:</span> When using the
 								Discord bot, we may collect message content, command usage, and
@@ -403,10 +399,10 @@
 
 				<!-- Where Information is Processed -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Where information is processed
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						The Company is based in Italy and the Services are hosted in Germany (by
 						Hetzner Online GmbH). No matter where you are located you consent to
 						processing and transferring of your information in and to Germany, Italy,
@@ -418,10 +414,10 @@
 
 				<!-- Our Use of Your Information -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Our use of your information
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						We use the information you provide in a manner that is consistent with this
 						Privacy Policy. If you provide information for a certain reason, we may use
 						the information in connection with the reason for which it was provided. For
@@ -445,17 +441,17 @@
 
 				<!-- Legal Bases -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Our legal bases for handling of your personal data
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						The laws in some jurisdictions require companies to tell you about the legal
 						ground they rely on to use or disclose your personal data. To the extent
 						those laws apply, our legal grounds are as follows:
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								Users have given their consent for one or more specific purposes.
 								Note: Under some legislations the Owner may be allowed to process
@@ -466,21 +462,21 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								Provision of Data is necessary for the performance of an agreement
 								with the User and/or for any pre-contractual obligations thereof.
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								Processing is necessary for compliance with a legal obligation to
 								which the Owner is subject.
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								Processing is related to a task that is carried out in the public
 								interest or in the exercise of official authority vested in the
@@ -488,14 +484,14 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								Processing is necessary for the purposes of the legitimate interests
 								pursued by the Owner or by a third party.
 							</span>
 						</li>
 					</ul>
-					<p class="mt-4 leading-relaxed text-base-content">
+					<p class="mt-4 leading-relaxed text-default">
 						In any case, the Owner will gladly help to clarify the specific legal basis
 						that applies to the processing, and in particular whether the provision of
 						Personal Data is a statutory or contractual requirement, or a requirement
@@ -505,27 +501,27 @@
 
 				<!-- Our Disclosure of Your Information -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Our disclosure of your information
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						The Company is not in the business of selling your information. We consider
 						this information to be a vital part of our relationship with you. There are,
 						however, certain circumstances in which we may share your information with
 						certain third parties, as set forth below:
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
-								<span class="font-semibold text-base-content">Consent</span>: We may
+								<span class="font-semibold text-default">Consent</span>: We may
 								transfer your information with your consent.
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
-								<span class="font-semibold text-base-content"
+								<span class="font-semibold text-default"
 									>Consultants and outside collaborators</span
 								>: Like many businesses, we sometimes request the help of other
 								companies or individuals to perform certain functions. Examples of
@@ -537,12 +533,11 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
-								<span class="font-semibold text-base-content"
-									>Legal Requirements</span
-								>: We may disclose your information if required to do so by law or
-								in the good faith belief that such action is necessary to (i) comply
+								<span class="font-semibold text-default">Legal Requirements</span>:
+								We may disclose your information if required to do so by law or in
+								the good faith belief that such action is necessary to (i) comply
 								with a legal obligation, (ii) protect and defend the rights or
 								property of the Company or Related Companies, (iii) protect the
 								personal safety of users of the Services or the public, or (iv)
@@ -554,10 +549,10 @@
 
 				<!-- Unsolicited Information -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Unsolicited information
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						You may provide us with ideas for new products or modifications to existing
 						products, and other unsolicited submissions (collectively, “Unsolicited
 						Information”). All Unsolicited Information shall be deemed to be
@@ -569,10 +564,8 @@
 
 				<!-- Children -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Children
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Children</h2>
+					<p class="leading-relaxed text-default">
 						Our Services are for users age 13 and over and we do not knowingly collect
 						personal information from children under the age of 13. If you are a parent
 						or guardian of a child under the age of 13 and believe he or she has
@@ -593,10 +586,10 @@
 
 				<!-- Links to Other Websites -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Links to other web sites
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						This Privacy Policy applies only to the Services. The Services may contain
 						links to other web sites not operated or controlled by us (the “Third Party
 						Sites”). The policies and procedures we described here do not apply to the
@@ -608,16 +601,14 @@
 
 				<!-- Data Retention -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Data retention
-					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Data retention</h2>
+					<p class="mb-4 leading-relaxed text-default">
 						We retain different types of data for different periods, based on the
 						purpose of collection and legal requirements:
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Session Cookies:</span> Automatically
 								deleted when you close your browser or after a period of inactivity
@@ -625,7 +616,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Local Storage Preferences:</span> Remain
 								on your device until you clear your browser data or manually reset
@@ -633,7 +624,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Analytics Data:</span> Retained in
 								aggregate form by Netlify and cannot be linked to individual users.
@@ -641,7 +632,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Error Tracking Data:</span> Retained by
 								Sentry for up to 90 days for debugging purposes, then automatically
@@ -649,7 +640,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">User Account Data:</span> Retained while
 								your account is active and for a reasonable period after account
@@ -657,7 +648,7 @@
 							</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>
 								<span class="font-semibold">Backups:</span> Database backups are
 								created regularly and automatically deleted after 7 days (168
@@ -665,7 +656,7 @@
 							</span>
 						</li>
 					</ul>
-					<p class="mt-4 leading-relaxed text-base-content">
+					<p class="mt-4 leading-relaxed text-default">
 						We generally retain personal data for so long as it may be relevant to the
 						purposes identified herein. To dispose of personal data, we may anonymize
 						it, delete it or take other appropriate steps.
@@ -674,10 +665,8 @@
 
 				<!-- Security -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Security
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Security</h2>
+					<p class="leading-relaxed text-default">
 						We take reasonable steps to protect the information provided via the
 						Services from loss, misuse, and unauthorized access, disclosure, alteration,
 						or destruction. However, no Internet or email transmission is ever fully
@@ -690,42 +679,42 @@
 
 				<!-- Your Data Rights and Choices -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Your data rights and choices
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						We believe that users should be treated equally no matter where they are,
 						and so we are making the following options to control your data available to
 						all users, regardless of their location.
 					</p>
-					<p class="mb-4 leading-relaxed text-base-content">You have the right to:</p>
-					<ul class="mb-4 list-none space-y-2 pl-0 text-base-content">
+					<p class="mb-4 leading-relaxed text-default">You have the right to:</p>
+					<ul class="mb-4 list-none space-y-2 pl-0 text-default">
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Access information about what data we collect</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Clear your local storage and cookies at any time</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Disconnect your authenticated session</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Request deletion of your personal data</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Request a copy of your data</span>
 						</li>
 						<li class="flex items-start gap-3 leading-relaxed">
-							<span class="shrink-0 text-base-content/50">&mdash;</span>
+							<span class="shrink-0 text-default/50">&mdash;</span>
 							<span>Request information about our data practices</span>
 						</li>
 					</ul>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						Individuals in California, the European Economic Area, Canada, Costa Rica
 						and some other jurisdictions have certain legal rights to obtain
 						confirmation of whether we hold personal data about them, to access personal
@@ -736,12 +725,12 @@
 						though such actions typically will not have retroactive effect. They also
 						will not affect our ability to continue processing data in lawful ways.
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
-						<li class="text-base font-semibold text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
+						<li class="text-base font-semibold text-default">
 							How can I access the personal data you have about me?
 						</li>
 					</ul>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						If you would like to submit a data access request, you can do so by sending
 						an email to
 						<NuxtLink
@@ -752,13 +741,13 @@
 						>. Upon request we will start the process and provide you a link to access
 						the personal data the Services has on you within 30 standard working days.
 					</p>
-					<ul class="list-none space-y-3 pl-0 text-base-content">
-						<li class="text-base font-semibold text-base-content">
+					<ul class="list-none space-y-3 pl-0 text-default">
+						<li class="text-base font-semibold text-default">
 							How do I correct, update, amend, or delete the personal data you have
 							about me?
 						</li>
 					</ul>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						You can request modifications to your data from us directly. Please write us
 						at
 						<NuxtLink
@@ -776,10 +765,10 @@
 
 				<!-- EEA Representative -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Who is WolfStar Project's EEA representative?
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						As the Company is currently exclusively based within the EEA and the Company
 						is of such a small size that we do not have the funds to for a registered
 						EEA representative the Company will handle any data protection matters,
@@ -791,19 +780,19 @@
 
 				<!-- California Privacy Rights -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Your California Privacy Rights
 					</h2>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						Consumers residing in California are afforded certain additional rights with
 						respect to their personal information under the California Consumer Privacy
 						Act or (“CCPA”) and the “Shine the Light” Law. If you are a California
 						resident, this section applies to you.
 					</p>
-					<p class="mb-2 text-base font-semibold text-base-content">
+					<p class="mb-2 text-base font-semibold text-default">
 						California Consumer Privacy Act
 					</p>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						<span class="font-semibold"
 							>Our Collection and Use of Personal Information</span
 						>: We collect the following categories of personal information: Discord User
@@ -818,13 +807,13 @@
 						personal information for the business and commercial purposes described in
 						“OUR USE OF YOUR INFORMATION” above.
 					</p>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						<span class="font-semibold">Disclosure of Personal Information</span>: may
 						share your personal information with third parties as described in the “OUR
 						DISCLOSURE OF YOUR INFORMATION” section above. We disclose the categories of
 						personal information mentioned above for business or commercial purposes.
 					</p>
-					<p class="mb-4 leading-relaxed text-base-content">
+					<p class="mb-4 leading-relaxed text-default">
 						<span class="font-semibold">No Sale of Personal Information</span>: The CCPA
 						sets forth certain obligations for businesses that sell personal
 						information. We do not sell the personal information of our users.
@@ -839,19 +828,19 @@
 						are in the “YOUR DATA RIGHTS AND CHOICES” section above. We will not
 						discriminate against you if you exercise your rights under the CCPA.
 					</p>
-					<p class="mb-2 leading-relaxed text-base-content">
+					<p class="mb-2 leading-relaxed text-default">
 						Requests Received: We received the following number of data requests between
 						November 24, 2016 and July 20, 2020:
 					</p>
-					<p class="text-base-content/80 italic">No requests to date</p>
+					<p class="text-toned italic">No requests to date</p>
 				</section>
 
 				<!-- Changes to Privacy Policy -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Changes to this Privacy Policy
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						We reserve the right to update or modify this Privacy Policy at any time and
 						from time to time without prior notice. Please review this policy
 						periodically, and especially before you provide any information. This
@@ -863,10 +852,8 @@
 
 				<!-- Contact -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Contacting us
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Contacting us</h2>
+					<p class="leading-relaxed text-default">
 						Please also feel free to contact us if you have any questions about this
 						Privacy Policy or the information practices of the Services. You may contact
 						us as follows:
diff --git a/app/pages/(marketing)/staryl/index.vue b/app/pages/(marketing)/staryl/index.vue
index 2f93f3d39..c72151e9d 100644
--- a/app/pages/(marketing)/staryl/index.vue
+++ b/app/pages/(marketing)/staryl/index.vue
@@ -11,15 +11,15 @@
 		<BuildEnvironment :footer="false" class="mt-16" />
 	</section>
 	<section
-		class="join mt-16 flex animate-fade-in-up items-center justify-center animate-fade-in-delay-2"
+		class="mt-16 flex animate-fade-in-up items-center justify-center gap-2 animate-fade-in-delay-2"
 	>
-		<NuxtLink class="btn join-item sm:btn-wide" :to="Invites.Staryl">
+		<UButton :to="Invites.Staryl" class="sm:min-w-48" color="neutral" size="lg">
 			<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
-		</NuxtLink>
-		<NuxtLink class="btn join-item sm:btn-wide" to="#explore">
+		</UButton>
+		<UButton class="sm:min-w-48" color="neutral" size="lg" to="#explore" variant="outline">
 			<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
 			Explore
-		</NuxtLink>
+		</UButton>
 	</section>
 
 	<h2 class="mt-72 animate-on-scroll text-center text-5xl font-bold">COMING SOON...</h2>
diff --git a/app/pages/(marketing)/terms.vue b/app/pages/(marketing)/terms.vue
index 2073c733e..8628eec48 100644
--- a/app/pages/(marketing)/terms.vue
+++ b/app/pages/(marketing)/terms.vue
@@ -1,14 +1,14 @@
 <template>
-	<UContainer class="bg-base-100">
+	<UContainer class="bg-default">
 		<article class="mx-auto max-w-3xl px-4 py-8 sm:py-12">
 			<!-- Header -->
 			<header class="mt-8 mb-12">
 				<div class="mb-6 flex items-baseline justify-between gap-4">
-					<h1 class="text-4xl font-bold text-base-content/80 sm:text-5xl">
+					<h1 class="text-4xl font-bold text-toned sm:text-5xl">
 						WolfStar Terms of Service
 					</h1>
 				</div>
-				<p class="mb-4 text-lg text-base-content/70">
+				<p class="mb-4 text-lg text-toned">
 					Last updated and effective:
 					<NuxtTime
 						locale="en-US"
@@ -17,7 +17,7 @@
 						time-style="medium"
 					/>
 				</p>
-				<div class="space-y-2 text-sm text-base-content/60">
+				<div class="space-y-2 text-sm text-muted">
 					<p>
 						<span class="font-semibold">Owner and data controller:</span> WolfStar
 						Project
@@ -38,10 +38,8 @@
 			<div class="prose prose-lg max-w-none space-y-12">
 				<!-- Terms -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Terms
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Terms</h2>
+					<p class="leading-relaxed text-default">
 						By accessing this service, accessible through the
 						<NuxtLink
 							to="https://discord.com/privacy"
@@ -60,14 +58,12 @@
 
 				<!-- Use License -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Use License
-					</h2>
-					<p class="mb-3 leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Use License</h2>
+					<p class="mb-3 leading-relaxed text-default">
 						To view what license applies to the Service please consult their respective
 						LICENSE documents:
 					</p>
-					<ul class="list-disc space-y-2 pl-6 text-base-content">
+					<ul class="list-disc space-y-2 pl-6 text-default">
 						<li>
 							<NuxtLink
 								to="https://github.com/wolfstar-project/wolfstar/blob/main/LICENSE"
@@ -82,10 +78,8 @@
 
 				<!-- Disclaimer -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Disclaimer
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Disclaimer</h2>
+					<p class="leading-relaxed text-default">
 						All the materials in the Service is provided "as is". WolfStar Project makes
 						no warranties, may it be expressed or implied, therefore negates all other
 						warranties. Furthermore, WolfStar Project does not make any representations
@@ -97,10 +91,8 @@
 
 				<!-- Limitations -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Limitations
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Limitations</h2>
+					<p class="leading-relaxed text-default">
 						WolfStar Project or its suppliers will not be hold accountable for any
 						damages that will arise with the use or inability to use the materials on
 						the Service, even if WolfStar Project or an authorize representative of this
@@ -113,10 +105,10 @@
 
 				<!-- Revisions and Errata -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Revisions and errata
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						The materials appearing on the Service may include technical, typographical,
 						or photographic errors. WolfStar Project will not promise that any of the
 						materials in this Service are accurate, complete, or current. WolfStar
@@ -128,10 +120,8 @@
 
 				<!-- Links -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Links
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Links</h2>
+					<p class="leading-relaxed text-default">
 						WolfStar Project has not reviewed all of the sites linked to its Service and
 						is not responsible for the contents of any such linked site. The presence of
 						any link does not imply endorsement by WolfStar Project of the site. The use
@@ -141,10 +131,10 @@
 
 				<!-- Terms of Service Modifications -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">
 						Terms of Service modifications
 					</h2>
-					<p class="leading-relaxed text-base-content">
+					<p class="leading-relaxed text-default">
 						WolfStar Project may revise these Terms of Service for its Service at any
 						time without prior notice. By using this Service, you are agreeing to be
 						bound by the current version of these Terms of Service.
@@ -153,10 +143,8 @@
 
 				<!-- Your Privacy -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Your Privacy
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Your Privacy</h2>
+					<p class="leading-relaxed text-default">
 						Please read our
 						<NuxtLink to="/privacy" class="underline hover:opacity-70"
 							>Privacy Policy</NuxtLink
@@ -166,10 +154,8 @@
 
 				<!-- Governing Law -->
 				<section>
-					<h2 class="mb-4 text-lg tracking-wider text-base-content/60 uppercase">
-						Governing law
-					</h2>
-					<p class="leading-relaxed text-base-content">
+					<h2 class="mb-4 text-lg tracking-wider text-muted uppercase">Governing law</h2>
+					<p class="leading-relaxed text-default">
 						Any claim related to WolfStar Project's Service shall be governed by the
 						laws of Italy without regards to its conflict of law provisions.
 					</p>
diff --git a/app/pages/(marketing)/wolfstar/@components/FeatureCarousel.client.vue b/app/pages/(marketing)/wolfstar/@components/FeatureCarousel.client.vue
index 9fd807c4a..017461b4b 100644
--- a/app/pages/(marketing)/wolfstar/@components/FeatureCarousel.client.vue
+++ b/app/pages/(marketing)/wolfstar/@components/FeatureCarousel.client.vue
@@ -17,16 +17,16 @@
 					@click="item.action"
 				>
 					<div
-						class="flex size-10 items-center justify-center rounded-full bg-base-content/5 p-2 transition-colors group-hover:bg-branding-wolfstar/20 group-hover:text-branding-wolfstar"
+						class="flex size-10 items-center justify-center rounded-full bg-default/5 p-2 transition-colors group-hover:bg-branding-wolfstar/20 group-hover:text-branding-wolfstar"
 					>
 						<UIcon :name="item.icon" class="h-6 w-6" />
 					</div>
 					<h3 class="font-bold">{{ item.title }}</h3>
-					<p class="text-sm text-base-content/60">{{ item.description }}</p>
+					<p class="text-sm text-muted">{{ item.description }}</p>
 
 					<!-- Bottom fade for clipped content -->
 					<div
-						class="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-linear-to-t from-base-300/80 to-transparent"
+						class="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-linear-to-t from-accented/80 to-transparent"
 						aria-hidden="true"
 					></div>
 
diff --git a/app/pages/(marketing)/wolfstar/@components/FeatureShowcase.client.vue b/app/pages/(marketing)/wolfstar/@components/FeatureShowcase.client.vue
index a64e02571..a780a8e45 100644
--- a/app/pages/(marketing)/wolfstar/@components/FeatureShowcase.client.vue
+++ b/app/pages/(marketing)/wolfstar/@components/FeatureShowcase.client.vue
@@ -59,7 +59,7 @@
 													>
 														<UIcon
 															name="ph:image-duotone"
-															class="h-24 w-24 animate-pulse text-base-content/20"
+															class="h-24 w-24 animate-pulse text-muted/50"
 															aria-hidden="true"
 														/>
 													</div>
@@ -68,7 +68,7 @@
 													>
 														<UIcon
 															name="ph:image-duotone"
-															class="h-24 w-24 animate-pulse text-base-content/20"
+															class="h-24 w-24 animate-pulse text-muted/50"
 															aria-hidden="true"
 														/>
 													</div>
@@ -77,7 +77,7 @@
 													>
 														<UIcon
 															name="ph:image-duotone"
-															class="h-24 w-24 animate-pulse text-base-content/20"
+															class="h-24 w-24 animate-pulse text-muted/50"
 															aria-hidden="true"
 														/>
 													</div>
@@ -86,7 +86,7 @@
 													>
 														<UIcon
 															name="ph:image-duotone"
-															class="h-24 w-24 animate-pulse text-base-content/20"
+															class="h-24 w-24 animate-pulse text-muted/50"
 															aria-hidden="true"
 														/>
 													</div>
@@ -223,23 +223,26 @@
 											aria-label="Previous automod feature"
 											@click="advanceFeatureIndex(-1)"
 										/>
-										<label
+										<UTooltip
 											v-for="(text, index) of texts"
 											:key="index"
-											class="radio-feature-container"
-											:data-tip="text.tooltip"
-											:for="`automod-feature-${index}`"
+											:text="text.tooltip"
 										>
-											<input
-												:id="`automod-feature-${index}`"
-												v-model="featureIndex"
-												type="radio"
-												name="automod-feature"
-												class="radio-feature"
-												:value="index"
-											/>
-											<span class="sr-only">{{ text.tooltip }}</span>
-										</label>
+											<label
+												class="radio-feature-container"
+												:for="`automod-feature-${index}`"
+											>
+												<input
+													:id="`automod-feature-${index}`"
+													v-model="featureIndex"
+													type="radio"
+													name="automod-feature"
+													class="radio-feature"
+													:value="index"
+												/>
+												<span class="sr-only">{{ text.tooltip }}</span>
+											</label>
+										</UTooltip>
 										<UIcon
 											name="ph:caret-down-bold"
 											class="radio-feature-arrow -rotate-90 lg:rotate-0"
@@ -374,23 +377,26 @@
 											aria-label="Previous moderation action"
 											@click="advanceModerationIndex(-1)"
 										/>
-										<label
+										<UTooltip
 											v-for="(action, index) of moderationActions"
 											:key="action.name"
-											class="radio-feature-container"
-											:data-tip="action.name"
-											:for="`moderation-feature-${index}`"
+											:text="action.name"
 										>
-											<input
-												:id="`moderation-feature-${index}`"
-												v-model="moderationIndex"
-												type="radio"
-												name="moderation-log"
-												class="radio-feature"
-												:value="index"
-											/>
-											<span class="sr-only">{{ action.name }}</span>
-										</label>
+											<label
+												class="radio-feature-container"
+												:for="`moderation-feature-${index}`"
+											>
+												<input
+													:id="`moderation-feature-${index}`"
+													v-model="moderationIndex"
+													type="radio"
+													name="moderation-log"
+													class="radio-feature"
+													:value="index"
+												/>
+												<span class="sr-only">{{ action.name }}</span>
+											</label>
+										</UTooltip>
 										<UIcon
 											name="ph:caret-down-bold"
 											class="radio-feature-arrow -rotate-90 lg:rotate-0"
@@ -503,23 +509,26 @@
 											aria-label="Previous logging event"
 											@click="advanceLoggingIndex(-1)"
 										/>
-										<label
+										<UTooltip
 											v-for="(event, index) of loggingEvents"
 											:key="index"
-											class="radio-feature-container"
-											:data-tip="event.tooltip"
-											:for="`logging-feature-${index}`"
+											:text="event.tooltip"
 										>
-											<input
-												:id="`logging-feature-${index}`"
-												v-model="loggingIndex"
-												type="radio"
-												name="logging-feature"
-												class="radio-feature"
-												:value="index"
-											/>
-											<span class="sr-only">{{ event.tooltip }}</span>
-										</label>
+											<label
+												class="radio-feature-container"
+												:for="`logging-feature-${index}`"
+											>
+												<input
+													:id="`logging-feature-${index}`"
+													v-model="loggingIndex"
+													type="radio"
+													name="logging-feature"
+													class="radio-feature"
+													:value="index"
+												/>
+												<span class="sr-only">{{ event.tooltip }}</span>
+											</label>
+										</UTooltip>
 										<UIcon
 											name="ph:caret-down-bold"
 											class="radio-feature-arrow -rotate-90 lg:rotate-0"
@@ -760,12 +769,11 @@ onUnmounted(cleanup);
 }
 
 .radio-feature-container {
-	@apply tooltip tooltip-top lg:tooltip-right;
 	display: inherit;
 }
 
 .radio-feature {
-	@apply h-4 w-4 cursor-pointer appearance-none rounded-full bg-base-content/20;
+	@apply h-4 w-4 cursor-pointer appearance-none rounded-full bg-muted/50;
 }
 
 .radio-feature-arrow {
@@ -782,15 +790,15 @@ onUnmounted(cleanup);
 }
 
 .radio-feature:not(:checked):hover {
-	@apply bg-base-content/40;
+	@apply bg-muted;
 }
 
 .radio-feature:checked {
-	@apply bg-base-content/80;
+	@apply bg-accented;
 }
 
 .radio-feature:checked:hover {
-	@apply bg-base-content;
+	@apply bg-default;
 }
 
 .radio-feature {
diff --git a/app/pages/(marketing)/wolfstar/index.vue b/app/pages/(marketing)/wolfstar/index.vue
index ff26561a0..b82fc40a1 100644
--- a/app/pages/(marketing)/wolfstar/index.vue
+++ b/app/pages/(marketing)/wolfstar/index.vue
@@ -6,7 +6,7 @@
 		<h1 class="title animate-fade-in-up-safe gradient-text-hero pb-4">
 			Imagine a<br />moderation app
 		</h1>
-		<p class="max-w-120 animate-fade-in-up-safe text-base-content/80 [animation-delay:0.1s]">
+		<p class="max-w-120 animate-fade-in-up-safe text-toned [animation-delay:0.1s]">
 			A very customizable multilanguage application to help you moderate your server, with a
 			complete logging suite and more,
 			<span class="font-bold underline underline-offset-2">100% for free</span>!
@@ -18,18 +18,21 @@
 	</section>
 
 	<section
-		class="relative join z-10 mt-12 animate-fade-in-up justify-center animate-fade-in-delay-2"
+		class="relative z-10 mt-12 flex animate-fade-in-up justify-center gap-2 animate-fade-in-delay-2"
 	>
-		<NuxtLink
-			class="glow-btn glow-btn-branding btn join-item sm:btn-wide"
-			:to="Invites.WolfStar"
-		>
+		<UButton class="btn-glow sm:min-w-48" color="neutral" size="lg" :to="Invites.WolfStar">
 			<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
-		</NuxtLink>
-		<NuxtLink class="glow-btn glow-btn-branding btn join-item sm:btn-wide" to="#explore">
+		</UButton>
+		<UButton
+			class="btn-glow sm:min-w-48"
+			color="neutral"
+			size="lg"
+			to="#explore"
+			variant="outline"
+		>
 			<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
 			Explore
-		</NuxtLink>
+		</UButton>
 	</section>
 
 	<section id="explore" ref="exploreRef" class="mt-34 min-h-200 w-full scroll-mt-24">
@@ -76,13 +79,13 @@
 	<section class="invite-card mt-32 flex animate-on-scroll flex-col items-center">
 		<h3 class="mb-4 text-3xl font-bold">Liking what you see?</h3>
 
-		<div class="join">
-			<NuxtLink :to="Invites.WolfStar" class="btn join-item btn-ghost">
+		<div class="flex flex-wrap justify-center gap-2">
+			<UButton :to="Invites.WolfStar" color="neutral" variant="ghost">
 				Invite WolfStar
-			</NuxtLink>
-			<NuxtLink to="https://join.wolfstar.rocks" class="btn join-item btn-ghost">
+			</UButton>
+			<UButton color="neutral" to="https://join.wolfstar.rocks" variant="ghost">
 				Support Server
-			</NuxtLink>
+			</UButton>
 		</div>
 	</section>
 	<OtherApps :apps="[otherApps.Staryl]" />
diff --git a/app/pages/commands.vue b/app/pages/commands.vue
index c17b59abf..a1a89f06b 100644
--- a/app/pages/commands.vue
+++ b/app/pages/commands.vue
@@ -1,10 +1,10 @@
 <template>
 	<UContainer class="mx-auto max-w-7xl space-y-12 px-4 py-8">
 		<header class="mt-8 flex flex-col items-center space-y-6 text-center">
-			<h1 class="text-4xl font-bold tracking-tight text-base-content/90 md:text-5xl">
+			<h1 class="text-4xl font-bold tracking-tight text-default/90 md:text-5xl">
 				WolfStar Commands
 			</h1>
-			<p class="max-w-2xl text-lg text-base-content/70">
+			<p class="max-w-2xl text-lg text-toned">
 				Browse and search through all available bot commands.
 				<span class="font-semibold">Powerful moderation</span> at your fingertips.
 			</p>
@@ -67,31 +67,29 @@
 
 			<!-- Loading state -->
 			<div v-if="loading" class="space-y-4" role="status" aria-label="Loading commands">
-				<div class="rounded-xl border border-base-content/10 py-20 text-center">
+				<div class="rounded-xl border border-default/10 py-20 text-center">
 					<UIcon
 						name="i-heroicons-arrow-path"
-						class="mx-auto mb-6 h-10 w-10 animate-spin text-base-content/40"
+						class="mx-auto mb-6 h-10 w-10 animate-spin text-dimmed"
 					/>
-					<p class="mb-2 text-lg font-semibold text-base-content/80">
-						Loading commands...
-					</p>
-					<p class="text-sm text-base-content/50">This may take a moment</p>
+					<p class="mb-2 text-lg font-semibold text-toned">Loading commands...</p>
+					<p class="text-sm text-default/50">This may take a moment</p>
 				</div>
 			</div>
 
 			<!-- No results message -->
 			<div
 				v-else-if="commands.length === 0"
-				class="space-y-6 rounded-xl border border-base-content/10 py-20 text-center"
+				class="space-y-6 rounded-xl border border-default/10 py-20 text-center"
 				role="status"
 			>
 				<UIcon
 					name="i-heroicons-exclamation-circle"
-					class="mx-auto h-12 w-12 text-base-content/30"
+					class="mx-auto h-12 w-12 text-muted/40"
 				/>
 				<div>
 					<h2 class="mb-3 text-2xl font-bold">No commands available</h2>
-					<p class="mx-auto max-w-md text-base-content/70">
+					<p class="mx-auto max-w-md text-toned">
 						Couldn't load commands right now. Try refreshing.
 					</p>
 				</div>
@@ -110,7 +108,7 @@
 			<section
 				v-else
 				aria-labelledby="categories-heading"
-				class="rounded-xl border border-base-content/10 bg-base-200/80 p-6 sm:p-8"
+				class="rounded-xl border border-default/10 bg-muted/80 p-6 sm:p-8"
 			>
 				<h2 id="categories-heading" class="sr-only">Command Categories</h2>
 				<LazyCommandCategory
diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index beda68c27..649fb605b 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -3,7 +3,7 @@
 	<UContainer class="mx-auto max-w-7xl space-y-8 px-4 py-8">
 		<h1 class="sr-only">User Profile</h1>
 		<section
-			class="relative flex flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-base-200 bg-base-200/30 p-8 md:flex-row md:border-4 md:p-12"
+			class="relative flex flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-muted bg-muted/30 p-8 md:flex-row md:border-4 md:p-12"
 			aria-label="User profile"
 		>
 			<!-- decorative left accent (sidebar-like) -->
@@ -13,7 +13,7 @@
 			></div>
 			<div v-if="!user" class="flex flex-col items-center justify-center space-y-6">
 				<USkeleton
-					class="h-24 w-24 rounded-full ring-2 ring-base-200 ring-offset-4 ring-offset-base-100"
+					class="h-24 w-24 rounded-full ring-2 ring-muted ring-offset-4 ring-offset-default"
 				/>
 				<div class="space-y-2 text-center">
 					<USkeleton class="h-10 w-48" />
@@ -27,7 +27,7 @@
 			<template v-else>
 				<div class="avatar" :class="{ 'avatar-placeholder': isDefault }">
 					<div
-						class="flex items-center justify-center rounded-full ring-base-300 ring-offset-base-100"
+						class="flex items-center justify-center rounded-full ring-accented ring-offset-default"
 						:class="{
 							'transition-transform duration-300 group-hover:scale-105':
 								!effectiveReduceMotion,
@@ -61,17 +61,17 @@
 					</div>
 				</div>
 				<div class="space-y-2 text-center">
-					<h2 class="text-4xl font-bold text-base-content">
+					<h2 class="text-4xl font-bold text-default">
 						{{ user.globalName ?? user.username }}
 					</h2>
-					<p class="text-lg font-medium text-base-content/80">@{{ user.username }}</p>
-					<p class="text-sm text-base-content/60">
+					<p class="text-lg font-medium text-toned">@{{ user.username }}</p>
+					<p class="text-sm text-muted">
 						User ID:
 						<UButton
 							variant="outline"
 							size="xs"
 							color="neutral"
-							class="text-sm text-base-content/60 hover:text-base-content"
+							class="text-sm text-muted hover:text-default"
 							@click="copyUserId"
 						>
 							<template #leading>
@@ -89,7 +89,7 @@
 		</section>
 
 		<section
-			class="relative flex flex-col items-center justify-center divide-y divide-base-200/50 overflow-hidden rounded-xl border-2 border-base-200 bg-base-200/20 shadow-lg md:border-4"
+			class="relative flex flex-col items-center justify-center divide-y divide-default/50 overflow-hidden rounded-xl border-2 border-muted bg-muted/20 shadow-lg md:border-4"
 			aria-label="Account management"
 		>
 			<!-- subtle left accent to mirror dashboard sidebar -->
@@ -99,7 +99,7 @@
 			></div>
 			<UTabs
 				v-model="activeTab"
-				variant="transparent"
+				variant="link"
 				:items
 				class="flex w-full flex-col items-center justify-center"
 			>
@@ -108,8 +108,8 @@
 						<div v-if="item.value === 'servers'" class="space-y-6">
 							<!-- Server Section Header -->
 							<div class="mb-4">
-								<h2 class="text-2xl font-bold text-base-content">Servers</h2>
-								<div class="mt-1 text-base-content/60">
+								<h2 class="text-2xl font-bold text-default">Servers</h2>
+								<div class="mt-1 text-muted">
 									<USkeleton v-if="isLoading" class="inline-block h-5 w-48" />
 									<span v-else>{{ guilds.length ?? 0 }} servers</span>
 								</div>
@@ -144,10 +144,9 @@
 										</UInput>
 									</UFieldGroup>
 									<!-- Mobile Buttons (no view toggle) -->
-									<UFieldGroup size="sm" class="join flex items-end sm:hidden">
+									<UFieldGroup size="sm" class="flex items-end sm:hidden">
 										<!-- Manageable Only Toggle Button -->
 										<UButton
-											class="join-item"
 											color="primary"
 											:variant="showManageableOnly ? 'solid' : 'outline'"
 											:is-loading
@@ -160,7 +159,6 @@
 
 										<!-- Sort Button -->
 										<UButton
-											class="join-item"
 											color="primary"
 											:is-loading
 											aria-label="Toggle sort order"
@@ -181,7 +179,6 @@
 										<!-- Refresh Button -->
 										<UButton
 											v-if="filteredGuilds.length === 0"
-											class="join-item"
 											color="primary"
 											:is-loading
 											is-loading-icon="lucide:loader"
@@ -192,7 +189,7 @@
 									</UFieldGroup>
 
 									<!-- Desktop Buttons (with view toggle) -->
-									<UFieldGroup size="sm" class="join hidden items-end sm:flex">
+									<UFieldGroup size="sm" class="hidden items-end sm:flex">
 										<!--
                     Manageable
                     Only
@@ -200,7 +197,6 @@
                     Button
                     -->
 										<UButton
-											class="join-item"
 											color="primary"
 											:variant="showManageableOnly ? 'solid' : 'outline'"
 											:is-loading
@@ -214,7 +210,6 @@
 
 										<!-- Sort Button -->
 										<UButton
-											class="join-item"
 											color="primary"
 											:is-loading
 											@click="handleSortToggle()"
@@ -234,7 +229,6 @@
 										<!-- Refresh Button -->
 										<UButton
 											v-if="filteredGuilds.length === 0"
-											class="join-item"
 											color="primary"
 											:is-loading
 											is-loading-icon="lucide:loader"
@@ -263,14 +257,14 @@
 						</div>
 						<div v-if="item.value === 'settings'" class="space-y-6">
 							<div class="mb-6">
-								<h2 class="text-2xl font-bold text-base-content">Settings</h2>
-								<p class="mt-1 text-base-content/60">
+								<h2 class="text-2xl font-bold text-default">Settings</h2>
+								<p class="mt-1 text-muted">
 									Manage your profile settings and preferences
 								</p>
 							</div>
 
 							<!-- Accessibility Settings Card -->
-							<UCard class="border border-base-200/60 bg-base-100 shadow-sm">
+							<UCard class="border border-muted/60 bg-default shadow-sm">
 								<template #header>
 									<div class="flex items-center gap-3">
 										<div
@@ -283,10 +277,10 @@
 										</div>
 
 										<div>
-											<h3 class="text-lg font-semibold text-base-content">
+											<h3 class="text-lg font-semibold text-default">
 												Accessibility
 											</h3>
-											<p class="text-sm text-base-content/60">
+											<p class="text-sm text-muted">
 												Customize your viewing experience
 											</p>
 										</div>
@@ -296,19 +290,19 @@
 								<div class="space-y-4">
 									<!-- Reduce Motion Toggle -->
 									<div
-										class="flex items-center justify-between rounded-lg border border-base-300 bg-base-200/50 p-4"
+										class="flex items-center justify-between rounded-lg border border-accented bg-muted/50 p-4"
 									>
 										<div class="flex-1">
 											<div class="flex items-center gap-2">
 												<UIcon
 													name="heroicons:arrows-right-left"
-													class="h-5 w-5 text-base-content/70"
+													class="h-5 w-5 text-toned"
 												/>
-												<h4 class="font-medium text-base-content">
+												<h4 class="font-medium text-default">
 													Reduce Motion
 												</h4>
 											</div>
-											<p class="mt-1 text-sm text-base-content/60">
+											<p class="mt-1 text-sm text-muted">
 												Minimize animations and transitions for a calmer
 												experience
 											</p>
@@ -343,7 +337,7 @@
 
 									<!-- Motion Status Indicator -->
 									<div class="flex items-center gap-2 text-sm">
-										<span class="text-base-content/60">Current Status:</span>
+										<span class="text-muted">Current Status:</span>
 										<UBadge
 											:color="effectiveReduceMotion ? 'primary' : 'neutral'"
 											variant="subtle"
@@ -369,7 +363,7 @@
 							</UCard>
 
 							<!-- Privacy Settings Card -->
-							<UCard class="border border-base-200/60 bg-base-100 shadow-sm">
+							<UCard class="border border-muted/60 bg-default shadow-sm">
 								<template #header>
 									<div class="flex items-center gap-3">
 										<div
@@ -381,10 +375,10 @@
 											/>
 										</div>
 										<div>
-											<h3 class="text-lg font-semibold text-base-content">
+											<h3 class="text-lg font-semibold text-default">
 												Privacy
 											</h3>
-											<p class="text-sm text-base-content/60">
+											<p class="text-sm text-muted">
 												Manage your privacy preferences
 											</p>
 										</div>
@@ -394,12 +388,12 @@
 									<div class="space-y-2 text-center">
 										<UIcon
 											name="heroicons:sparkles"
-											class="mx-auto mb-4 size-12 text-base-content/30"
+											class="mx-auto mb-4 size-12 text-muted/40"
 										/>
-										<h4 class="text-xl font-semibold text-base-content/60">
+										<h4 class="text-xl font-semibold text-muted">
 											Coming Soon
 										</h4>
-										<p class="text-sm text-base-content/40">
+										<p class="text-sm text-dimmed">
 											Privacy controls and data management will be available
 											here soon.
 										</p>
@@ -408,7 +402,7 @@
 							</UCard>
 
 							<!-- Notifications Settings Card -->
-							<UCard class="border border-base-200/60 bg-base-100 shadow-sm">
+							<UCard class="border border-muted/60 bg-default shadow-sm">
 								<template #header>
 									<div class="flex items-center gap-3">
 										<div
@@ -420,10 +414,10 @@
 											/>
 										</div>
 										<div>
-											<h3 class="text-lg font-semibold text-base-content">
+											<h3 class="text-lg font-semibold text-default">
 												Notifications
 											</h3>
-											<p class="text-sm text-base-content/60">
+											<p class="text-sm text-muted">
 												Configure notification preferences
 											</p>
 										</div>
@@ -433,12 +427,12 @@
 									<div class="space-y-2 text-center">
 										<UIcon
 											name="heroicons:sparkles"
-											class="mx-auto mb-4 size-12 text-base-content/30"
+											class="mx-auto mb-4 size-12 text-muted/40"
 										/>
-										<h4 class="text-xl font-semibold text-base-content/60">
+										<h4 class="text-xl font-semibold text-muted">
 											Coming Soon
 										</h4>
-										<p class="text-sm text-base-content/40">
+										<p class="text-sm text-dimmed">
 											Notification preferences will be available here soon.
 										</p>
 									</div>
@@ -452,10 +446,10 @@
 							>
 								<template #header>
 									<div>
-										<h2 class="text-2xl font-bold text-base-content">
+										<h2 class="text-2xl font-bold text-default">
 											Premium
 										</h2>
-										<p class="mt-1 text-base-content/60">
+										<p class="mt-1 text-muted">
 											Unlock advanced features and support the project
 										</p>
 									</div>
@@ -471,10 +465,10 @@
 											/>
 										</div>
 										<div>
-											<h3 class="text-3xl font-bold text-base-content">
+											<h3 class="text-3xl font-bold text-default">
 												Upgrade to Premium
 											</h3>
-											<p class="mt-2 text-base-content/70">
+											<p class="mt-2 text-toned">
 												Unlock advanced features and get priority support
 											</p>
 										</div>
@@ -491,10 +485,10 @@
 												/>
 											</div>
 											<div>
-												<p class="font-semibold text-base-content">
+												<p class="font-semibold text-default">
 													Advanced Commands
 												</p>
-												<p class="text-sm text-base-content/60">
+												<p class="text-sm text-muted">
 													Access to premium-only commands
 												</p>
 											</div>
@@ -509,10 +503,10 @@
 												/>
 											</div>
 											<div>
-												<p class="font-semibold text-base-content">
+												<p class="font-semibold text-default">
 													Priority Support
 												</p>
-												<p class="text-sm text-base-content/60">
+												<p class="text-sm text-muted">
 													Get help faster from our team
 												</p>
 											</div>
@@ -527,10 +521,10 @@
 												/>
 											</div>
 											<div>
-												<p class="font-semibold text-base-content">
+												<p class="font-semibold text-default">
 													Custom Settings
 												</p>
-												<p class="text-sm text-base-content/60">
+												<p class="text-sm text-muted">
 													Personalize your experience
 												</p>
 											</div>
@@ -545,10 +539,10 @@
 												/>
 											</div>
 											<div>
-												<p class="font-semibold text-base-content">
+												<p class="font-semibold text-default">
 													Early Access
 												</p>
-												<p class="text-sm text-base-content/60">
+												<p class="text-sm text-muted">
 													Try new features first
 												</p>
 											</div>
diff --git a/app/storybook/colors.mdx b/app/storybook/colors.mdx
index 74c025fcf..6d258a0ed 100644
--- a/app/storybook/colors.mdx
+++ b/app/storybook/colors.mdx
@@ -4,48 +4,48 @@ import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
 
 # Colors
 
-The WolfStar color system is built on DaisyUI CSS custom properties with support for light and dark themes.
+The WolfStar color system uses Nuxt UI semantic tokens with support for light, dark, and midnight themes.
 
-Colors are defined in `app/assets/css/main.css` using DaisyUI theme variables. Values shown reflect the **dark** theme (default).
+Colors are defined in `app/assets/css/main.css` using `@theme` scales and `--ui-*` CSS variables. Values shown reflect the **dark** theme (default).
 
-## Base (Background) Colors
+## Surface Colors
 
 <ColorPalette>
 	<ColorItem
-		title="Base"
+		title="Surfaces"
 		subtitle="Background surface layers (dark theme)"
 		colors={{
-			"base-100": "oklch(25% 0.016 252)",
-			"base-200": "oklch(23% 0.014 253)",
-			"base-300": "oklch(20% 0.012 254)",
+			"surface-100": "oklch(25% 0.016 252)",
+			"surface-200": "oklch(23% 0.014 253)",
+			"surface-300": "oklch(20% 0.012 254)",
 		}}
 	/>
 	<ColorItem
-		title="Base"
+		title="Surfaces"
 		subtitle="Background surface layers (light theme)"
 		colors={{
-			"base-100": "oklch(100% 0 0)",
-			"base-200": "oklch(90% 0 0)",
-			"base-300": "oklch(85% 0 0)",
+			"surface-100": "oklch(100% 0 0)",
+			"surface-200": "oklch(90% 0 0)",
+			"surface-300": "oklch(85% 0 0)",
 		}}
 	/>
 </ColorPalette>
 
-## Content (Text) Colors
+## Text Colors
 
 <ColorPalette>
 	<ColorItem
 		title="Content"
 		subtitle="Text and foreground — dark theme"
 		colors={{
-			"base-content": "oklch(90% 0 0)",
+			content: "oklch(90% 0 0)",
 		}}
 	/>
 	<ColorItem
 		title="Content"
 		subtitle="Text and foreground — light theme"
 		colors={{
-			"base-content": "oklch(0% 0 0)",
+			content: "oklch(0% 0 0)",
 		}}
 	/>
 </ColorPalette>
@@ -57,32 +57,21 @@ Colors are defined in `app/assets/css/main.css` using DaisyUI theme variables. V
 		title="Primary"
 		subtitle="Interactive elements and primary actions"
 		colors={{
-			"primary": "oklch(58% 0.233 277.117)",
-			"primary-content": "oklch(100% 0 0)",
+			primary: "oklch(58% 0.233 277.117)",
 		}}
 	/>
 	<ColorItem
 		title="Secondary"
 		subtitle="Secondary actions and de-emphasized elements"
 		colors={{
-			"secondary": "oklch(58.73% 0.0204 272.13)",
-			"secondary-content": "oklch(100% 0 0)",
-		}}
-	/>
-	<ColorItem
-		title="Accent"
-		subtitle="Accent highlights and decorative elements"
-		colors={{
-			"accent": "oklch(60% 0.152 181.912)",
-			"accent-content": "oklch(100% 0 0)",
+			secondary: "oklch(58.73% 0.0204 272.13)",
 		}}
 	/>
 	<ColorItem
 		title="Neutral"
 		subtitle="Neutral surfaces and dark overlays"
 		colors={{
-			"neutral": "oklch(14% 0.005 285.823)",
-			"neutral-content": "oklch(100% 0 0)",
+			neutral: "oklch(14% 0.005 285.823)",
 		}}
 	/>
 </ColorPalette>
@@ -94,32 +83,28 @@ Colors are defined in `app/assets/css/main.css` using DaisyUI theme variables. V
 		title="Info"
 		subtitle="Informational messages and indicators"
 		colors={{
-			"info": "oklch(55% 0.16 232.661)",
-			"info-content": "oklch(89.04% 0.062 264.052)",
+			info: "oklch(55% 0.16 232.661)",
 		}}
 	/>
 	<ColorItem
 		title="Success"
 		subtitle="Success states and confirmations"
 		colors={{
-			"success": "oklch(76% 0.177 163.223)",
-			"success-content": "oklch(37% 0.077 168.94)",
+			success: "oklch(76% 0.177 163.223)",
 		}}
 	/>
 	<ColorItem
 		title="Warning"
 		subtitle="Warnings and caution indicators"
 		colors={{
-			"warning": "oklch(82% 0.189 84.429)",
-			"warning-content": "oklch(41% 0.112 45.904)",
+			warning: "oklch(82% 0.189 84.429)",
 		}}
 	/>
 	<ColorItem
 		title="Error"
 		subtitle="Error states and destructive actions"
 		colors={{
-			"error": "oklch(71% 0.194 13.428)",
-			"error-content": "oklch(28% 0.109 3.907)",
+			error: "oklch(71% 0.194 13.428)",
 		}}
 	/>
 </ColorPalette>
diff --git a/app/storybook/guidelines.mdx b/app/storybook/guidelines.mdx
index c930d3934..bb65e39fd 100644
--- a/app/storybook/guidelines.mdx
+++ b/app/storybook/guidelines.mdx
@@ -48,13 +48,13 @@ Text casing:
 
 To visually separate content blocks (grouped content, cards, settings sections), use subtle background variations:
 
-- `bg-base-200` — subtle section background
-- `bg-base-300` — deeper background for nested surfaces
+- `bg-muted` — subtle section background
+- `bg-accented` — deeper background for nested surfaces
 - `card-glass` / `card-glass-soft` / `card-glass-bordered` — glass-morphism card surfaces (see `app/assets/css/utilities.css`)
 
 ## Borders & Radius
 
-- Use DaisyUI `border` or `border-base-300` for subtle separators
+- Use `border-default` or `border-muted` for subtle separators
 - Prefer small to medium border radius for most UI elements
 - Cards and panels use a soft "glass-like" appearance
 
@@ -62,8 +62,8 @@ Only avatars should have fully circular shapes.
 
 ## Colors
 
-- Primary surfaces: `bg-base-100`
-- Secondary or less important content: `bg-base-200` or `text-muted`
+- Primary surfaces: `bg-default`
+- Secondary or less important content: `bg-muted` or `text-muted`
 - Semantic utility classes: `text-primary`, `text-success`, `text-error`, `text-warning`, `text-info`
 
 [See Colors](?path=/docs/colors--docs)
diff --git a/app/themes/avatar.ts b/app/themes/avatar.ts
deleted file mode 100644
index 3ffeea825..000000000
--- a/app/themes/avatar.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-	base: "avatar",
-	defaultVariants: {
-		shape: "circle",
-		size: "md",
-	},
-	slots: {
-		fallback: "avatar-placeholder truncate leading-none font-medium text-base-content",
-		icon: "shrink-0 text-base-content",
-		image: "h-full w-full rounded-[inherit] object-cover",
-		root: "avatar inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-base-200 align-middle select-none",
-	},
-	variants: {
-		shape: {
-			circle: {
-				root: "mask mask-circle",
-			},
-			square: {
-				root: "mask mask-squircle",
-			},
-		},
-		size: {
-			lg: {
-				root: "size-24",
-			},
-			md: {
-				root: "size-16",
-			},
-			sm: {
-				root: "size-10",
-			},
-			xl: {
-				root: "size-32",
-			},
-			xs: {
-				root: "size-8",
-			},
-		},
-		status: {
-			offline: {
-				root: "avatar-offline",
-			},
-			online: {
-				root: "avatar-online",
-			},
-		},
-	},
-};
diff --git a/app/themes/badge.ts b/app/themes/badge.ts
deleted file mode 100644
index dac8efca6..000000000
--- a/app/themes/badge.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { UIColors } from "~/utils/constants";
-import { colors } from "~/utils/constants";
-
-export default {
-	compoundVariants: [
-		// Square variants with size adjustments
-		{
-			class: "badge-xs p-0.5",
-			size: "xs",
-			square: true,
-		},
-		{
-			class: "badge-sm p-1",
-			size: "sm",
-			square: true,
-		},
-		{
-			class: "badge-md p-1",
-			size: "md",
-			square: true,
-		},
-		{
-			class: "badge-lg p-1",
-			size: "lg",
-			square: true,
-		},
-		{
-			class: "badge-xl p-1",
-			size: "xl",
-			square: true,
-		},
-	],
-	defaultVariants: {
-		color: "primary",
-		size: "md",
-	},
-	slots: {
-		base: [
-			"badge", // DaisyUI badge base class
-			"font-medium inline-flex items-center",
-		],
-		label: "truncate",
-		leadingAvatar: "shrink-0",
-		leadingAvatarSize: "",
-		leadingIcon: "shrink-0",
-		trailingIcon: "shrink-0",
-	},
-	variants: {
-		color: Object.fromEntries(colors.map((color) => [color, `badge-${color}`])) as Record<
-			UIColors,
-			string
-		>,
-		fieldGroup: {
-			horizontal:
-				"not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-			vertical:
-				"not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
-		},
-		size: {
-			lg: {
-				base: "badge-lg gap-1.5",
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-5",
-				trailingIcon: "size-5",
-			},
-			md: {
-				base: "badge-md gap-1",
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-4",
-				trailingIcon: "size-4",
-			},
-			sm: {
-				base: "badge-sm gap-1",
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-3",
-				trailingIcon: "size-3",
-			},
-			xl: {
-				base: "badge-xl gap-1.5",
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-6",
-				trailingIcon: "size-6",
-			},
-			xs: {
-				base: "badge-xs gap-1",
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-3",
-				trailingIcon: "size-3",
-			},
-		},
-		square: {
-			true: "",
-		},
-		variant: {
-			ghost: "badge-ghost",
-			outline: "badge-outline",
-		},
-	},
-};
diff --git a/app/themes/button.ts b/app/themes/button.ts
deleted file mode 100644
index f036cc13d..000000000
--- a/app/themes/button.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-export default {
-	compoundVariants: [
-		// Neutral variants
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-			variant: "outline",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled opacity-80`,
-			color: "neutral",
-			variant: "soft",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-			variant: "dash",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-			variant: "ghost",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-			variant: "link",
-		},
-		{
-			class: `disabled:btn-disabled aria-disabled:btn-disabled`,
-			color: "neutral",
-		},
-		{
-			class: "btn-xs",
-			size: "xs",
-			square: true,
-		},
-		{
-			class: "btn-sm",
-			size: "sm",
-			square: true,
-		},
-		{
-			class: "btn-md",
-			size: "md",
-			square: true,
-		},
-		{
-			class: "btn-lg",
-			size: "lg",
-			square: true,
-		},
-		{
-			class: "btn-xl",
-			size: "xl",
-			square: true,
-		},
-		{
-			class: {
-				leadingIcon: "animate-spin",
-			},
-			leading: true,
-			loading: true,
-		},
-		{
-			class: {
-				trailingIcon: "animate-spin",
-			},
-			leading: false,
-			loading: true,
-			trailing: true,
-		},
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "solid",
-	},
-	slots: {
-		base: [
-			"btn", // DaisyUI button base class
-			//	'inline-flex items-center',
-			//	'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
-			//	'disabled:opacity-75 aria-disabled:opacity-75'
-		],
-		label: "truncate",
-		leadingAvatar: "shrink-0",
-		leadingAvatarSize: "",
-		leadingIcon: "shrink-0",
-		trailingIcon: "shrink-0",
-	},
-	variants: {
-		active: {
-			false: {
-				base: "",
-			},
-			true: {
-				base: "btn-active",
-			},
-		},
-		block: {
-			true: "btn-block",
-		},
-		circle: {
-			true: "btn-circle",
-		},
-		color: {
-			accent: "btn-accent",
-			error: "btn-error",
-			info: "btn-info",
-			neutral: "btn-neutral",
-			primary: "btn-primary",
-			secondary: "btn-secondary",
-			success: "btn-success",
-			warning: "btn-warning",
-		},
-		fieldGroup: {
-			horizontal:
-				"not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-			vertical:
-				"not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
-		},
-		leading: {
-			true: "",
-		},
-		loading: {
-			true: "",
-		},
-		responsive: {
-			true: {
-				label: "hidden sm:inline",
-			},
-		},
-		size: {
-			lg: {
-				base: "gap-2 btn-lg",
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-5",
-				trailingIcon: "size-5",
-			},
-			md: {
-				base: "gap-1.5 btn-md",
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-5",
-				trailingIcon: "size-5",
-			},
-			sm: {
-				base: "gap-1.5 btn-sm",
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-4",
-				trailingIcon: "size-4",
-			},
-			xl: {
-				base: "gap-2 btn-xl",
-				leadingAvatarSize: "xs",
-				leadingIcon: "size-6",
-				trailingIcon: "size-6",
-			},
-			xs: {
-				base: "gap-1 btn-xs",
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-4",
-				trailingIcon: "size-4",
-			},
-		},
-		square: {
-			true: "btn-square",
-		},
-		trailing: {
-			true: "",
-		},
-		variant: {
-			dash: "btn-dash",
-			ghost: "btn-ghost",
-			link: "btn-link",
-			outline: "btn-outline",
-			soft: "btn-ghost",
-			solid: "",
-		},
-	},
-};
diff --git a/app/themes/index.ts b/app/themes/index.ts
index 4af18310f..0783c5292 100644
--- a/app/themes/index.ts
+++ b/app/themes/index.ts
@@ -1,32 +1,20 @@
-import avatar from "./avatar";
-import badge from "./badge";
-import button from "./button";
 import container from "./container";
 import fieldGroup from "./field-group";
 import footer from "./footer";
 import footerColumns from "./footer-columns";
 import header from "./header";
-import link from "./link";
 import main from "./main";
 import navigationMenu from "./navigation-menu";
-import skeleton from "./skeleton";
-import tabs from "./tabs";
 import toaster from "./toaster";
 
 const ui = {
-	avatar,
-	badge,
-	button,
 	container,
 	fieldGroup,
 	footer,
 	footerColumns,
 	header,
-	link,
 	main,
 	navigationMenu,
-	skeleton,
-	tabs,
 	toaster,
 } as const;
 
diff --git a/app/themes/link.ts b/app/themes/link.ts
deleted file mode 100644
index f47a8c325..000000000
--- a/app/themes/link.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { colors } from "~/utils/constants";
-
-export default {
-	base: "link",
-	variants: {
-		active: {
-			false: "link hover:link-hover",
-			true: "link-primary",
-		},
-		color: Object.fromEntries(colors.map((color) => [color, `link-${color}`])),
-		disabled: {
-			true: "cursor-not-allowed opacity-75",
-		},
-	},
-};
diff --git a/app/themes/navigation-menu.ts b/app/themes/navigation-menu.ts
index 33edff6be..ea52257da 100644
--- a/app/themes/navigation-menu.ts
+++ b/app/themes/navigation-menu.ts
@@ -18,16 +18,16 @@ export default {
 		{
 			class: {
 				childItem: "ps-1.5 -ms-px animate-fade-in-delay-1",
-				childList: "ms-5 border-s border-base-300",
+				childList: "ms-5 border-s border-accented",
 				content:
-					"data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-base-200/60 backdrop-blur-sm",
+					"data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden bg-muted/60 backdrop-blur-sm",
 			},
 			collapsed: false,
 			orientation: "vertical",
 		},
 		{
 			class: {
-				content: "shadow-sm rounded-sm min-h-6 p-1 bg-base-200/60 backdrop-blur-sm",
+				content: "shadow-sm rounded-sm min-h-6 p-1 bg-muted/60 backdrop-blur-sm",
 				link: "px-1.5",
 			},
 			collapsed: true,
@@ -58,7 +58,7 @@ export default {
 			active: false,
 			class: {
 				link: [
-					"hover:text-highlighted hover:before:bg-base-200/50",
+					"hover:text-highlighted hover:before:bg-muted/50",
 					"transition-all duration-300 before:transition-all hover-scale",
 				],
 				linkLeadingIcon: [
@@ -72,7 +72,7 @@ export default {
 		{
 			active: false,
 			class: {
-				link: "data-[state=open]:text-highlighted data-[state=open]:before:bg-base-200/50",
+				link: "data-[state=open]:text-highlighted data-[state=open]:before:bg-muted/50",
 				linkLeadingIcon:
 					"group-data-[state=open]:text-default group-data-[state=open]:scale-110",
 			},
@@ -82,7 +82,7 @@ export default {
 		},
 		{
 			class: {
-				link: "data-[state=open]:before:bg-base-200/50 data-[state=open]:shadow-lg",
+				link: "data-[state=open]:before:bg-muted/50 data-[state=open]:shadow-lg",
 			},
 			disabled: false,
 			highlight: true,
@@ -92,7 +92,7 @@ export default {
 		{
 			active: false,
 			class: {
-				link: "data-[state=open]:before:bg-base-200/50",
+				link: "data-[state=open]:before:bg-muted/50",
 			},
 			disabled: false,
 			highlight: false,
@@ -121,7 +121,7 @@ export default {
 		{
 			active: true,
 			class: {
-				link: "before:bg-base-200 shadow-md",
+				link: "before:bg-muted shadow-md",
 			},
 			highlight: false,
 			variant: "pill",
@@ -130,7 +130,7 @@ export default {
 			active: true,
 			class: {
 				link: [
-					"hover:before:bg-base-200/50 hover:shadow-lg",
+					"hover:before:bg-muted/50 hover:shadow-lg",
 					"before:transition-all duration-300",
 				],
 			},
@@ -205,7 +205,7 @@ export default {
 		variant: "pill",
 	},
 	slots: {
-		arrow: "relative top-[50%] size-2.5 rotate-45 border border-base-300 bg-base-200 z-[1] rounded-xs",
+		arrow: "relative top-[50%] size-2.5 rotate-45 border border-accented bg-muted z-[1] rounded-xs",
 		childItem: "animate-fade-in-up",
 		childLabel: "text-xs text-highlighted animate-fade-in",
 		childLink:
@@ -216,7 +216,7 @@ export default {
 		childLinkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
 		childLinkWrapper: "min-w-0",
 		childList: "isolate",
-		content: "animate-fade-in bg-base-200/60 backdrop-blur-sm",
+		content: "animate-fade-in bg-muted/60 backdrop-blur-sm",
 		indicator:
 			"absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
 		item: "min-w-0 animate-fade-in-up",
@@ -236,14 +236,14 @@ export default {
 		root: "relative flex gap-1.5 [&>div]:min-w-0",
 		separator: "px-2 h-px bg-border",
 		viewport:
-			"relative overflow-hidden bg-base-200/60 backdrop-blur-sm shadow-lg rounded-md ring ring-base-300 h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
+			"relative overflow-hidden bg-muted/60 backdrop-blur-sm shadow-lg rounded-md ring ring-accented h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
 		viewportWrapper: "absolute top-full left-0 flex w-full",
 	},
 	variants: {
 		active: {
 			false: {
 				childLink: [
-					"hover:before:bg-base-200/50 text-default hover:text-highlighted hover-scale",
+					"hover:before:bg-muted/50 text-default hover:text-highlighted hover-scale",
 					"transition-all duration-300 before:transition-all",
 				],
 				childLinkIcon: [
@@ -254,7 +254,7 @@ export default {
 				linkLeadingIcon: "text-dimmed",
 			},
 			true: {
-				childLink: "before:bg-base-200 text-highlighted hover-lift",
+				childLink: "before:bg-muted text-highlighted hover-lift",
 				childLinkIcon: "text-default",
 			},
 		},
diff --git a/app/themes/skeleton.ts b/app/themes/skeleton.ts
deleted file mode 100644
index 481aed65e..000000000
--- a/app/themes/skeleton.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-	base: "skeleton",
-};
diff --git a/app/themes/tabs.ts b/app/themes/tabs.ts
deleted file mode 100644
index 2333e90f6..000000000
--- a/app/themes/tabs.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-import { colors } from "~/utils/constants";
-
-export default {
-	compoundVariants: [
-		...((colors || []).map((color: string) => [
-			{
-				class: {
-					indicator: `bg-${color}`,
-					trigger: `data-[state=active]:text-neutral data-[state=active]:tab-active focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color} `,
-				},
-				color,
-				variant: "pill",
-			},
-			{
-				class: {
-					indicator: `bg-${color}`,
-					trigger: `data-[state=active]:text-${color} data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color} `,
-				},
-				color,
-				variant: "link",
-			},
-			{
-				class: {
-					indicator: `bg-${color}`,
-					trigger: `data-[state=active]:text-highlighted data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color} `,
-				},
-				color,
-				variant: "box",
-			},
-			{
-				class: {
-					indicator: `bg-${color}`,
-					list: "border-b",
-					trigger: `data-[state=active]:text-highlighted data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color} `,
-				},
-				color,
-				variant: "border",
-			},
-			{
-				class: {
-					indicator: `bg-${color}`,
-					trigger: `data-[state=active]:text-highlighted data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color} `,
-				},
-				color,
-				variant: "transparent",
-			},
-		]) as any),
-		{
-			class: {
-				indicator: "inset-y-1",
-			},
-			orientation: "horizontal",
-			variant: "pill",
-		},
-		{
-			class: {
-				indicator: "-bottom-px h-px",
-				list: "border-b -mb-px",
-			},
-			orientation: "horizontal",
-			variant: "link",
-		},
-		{
-			class: {
-				indicator: "inset-x-1",
-				list: "items-center",
-			},
-			orientation: "vertical",
-			variant: "pill",
-		},
-		{
-			class: {
-				indicator: "-start-px w-px",
-				list: "border-s -ms-px",
-			},
-			orientation: "vertical",
-			variant: "link",
-		},
-		{
-			class: {
-				indicator: "bg-primary",
-				trigger:
-					"data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
-			},
-			color: "primary",
-			variant: "pill",
-		},
-		{
-			class: {
-				indicator: "bg-neutral",
-				trigger:
-					"data-[state=active]:text-neutral-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral",
-			},
-			color: "neutral",
-			variant: "pill",
-		},
-		{
-			class: {
-				indicator: "bg-primary",
-				trigger:
-					"data-[state=active]:text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
-			},
-			color: "primary",
-			variant: "link",
-		},
-		{
-			class: {
-				indicator: "bg-neutral",
-				trigger:
-					"data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral",
-			},
-			color: "neutral",
-			variant: "link",
-		},
-		{
-			class: {
-				indicator: "bg-neutral",
-				trigger:
-					"data-[state=active]:text-highlighted data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral ",
-			},
-			color: "neutral",
-			variant: "box",
-		},
-		{
-			class: {
-				indicator: "bg-neutral",
-				trigger:
-					"data-[state=active]:text-neutral data-[state=active]:tab-active focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral ",
-			},
-			color: "neutral",
-			variant: "box",
-		},
-		{
-			class: {
-				indicator: "bg-neutral",
-				list: "border-b",
-				trigger:
-					"data-[state=active]:text-highlighted data-[state=active]:tab-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral ",
-			},
-			color: "neutral",
-			variant: "border",
-		},
-	],
-	defaultVariants: {
-		color: "primary",
-		size: "md",
-		variant: "box",
-	},
-	slots: {
-		content: "focus:outline-none w-full",
-		indicator: "absolute transition-[translate,width] duration-200",
-		label: "truncate",
-		leadingAvatar: "shrink-0",
-		leadingAvatarSize: "",
-		leadingIcon: "shrink-0",
-		list: "relative flex p-1 group",
-		root: "tabs flex items-center gap-2",
-		trailingBadge: "shrink-0",
-		trailingBadgeSize: "sm",
-		trigger: [
-			"tab group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:tab-disabled",
-			"transition-colors",
-		],
-	},
-	variants: {
-		active: {
-			false: {
-				root: "",
-			},
-			true: {
-				root: "tab-active",
-			},
-		},
-		color: {
-			...Object.fromEntries((colors || []).map((color: string) => [color, ""])),
-			neutral: "",
-		},
-		orientation: {
-			horizontal: {
-				indicator:
-					"left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
-				list: "w-full justify-center",
-				root: "flex-col",
-				trigger: "justify-center",
-			},
-			vertical: {
-				indicator:
-					"top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)",
-				list: "flex-col",
-			},
-		},
-		responsive: {
-			true: {
-				label: "hidden sm:inline",
-			},
-		},
-		size: {
-			lg: {
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-5",
-				trigger: "px-3 py-2 text-sm gap-2",
-			},
-			md: {
-				leadingAvatarSize: "2xs",
-				leadingIcon: "size-5",
-				trigger: "px-3 py-1.5 text-sm gap-1.5",
-			},
-			sm: {
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-4",
-				trigger: "px-2.5 py-1.5 text-xs gap-1.5",
-			},
-			xl: {
-				leadingAvatarSize: "xs",
-				leadingIcon: "size-6",
-				trigger: "px-3 py-2 text-base gap-2",
-			},
-			xs: {
-				leadingAvatarSize: "3xs",
-				leadingIcon: "size-4",
-				trigger: "px-2 py-1 text-xs gap-1",
-			},
-		},
-		variant: {
-			border: {
-				trigger: "tabs-border",
-			},
-			box: {
-				trigger: "tabs-box",
-			},
-			lift: {
-				trigger: "tabs-lift",
-			},
-			link: {
-				indicator: "rounded-full",
-				list: "border-base-300",
-				trigger: "focus:outline-none",
-			},
-			pill: {
-				indicator: "rounded-md shadow-xs",
-				list: "bg-base-200 rounded-lg",
-				trigger: "grow",
-			},
-			transparent: {
-				root: "",
-				trigger: "",
-			},
-		},
-	},
-};
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 77f22b67c..8300ac3bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -190,7 +190,7 @@ export default defineNuxtConfig({
 		options: {
 			rules: {
 				"meta-refresh": "off",
-				// NuxtUI/DaisyUI theme class merging produces duplicate utility classes
+				// Nuxt UI theme class merging produces duplicate utility classes
 				"no-dup-class": "off",
 				// NuxtUI components may render empty id attributes internally
 				"attribute-allowed-values": "off",
diff --git a/package.json b/package.json
index f283a7739..2e3948dad 100644
--- a/package.json
+++ b/package.json
@@ -137,7 +137,6 @@
 		"@vitest/ui": "4.1.7",
 		"changelogen": "0.6.2",
 		"cz-conventional-changelog": "3.3.0",
-		"daisyui": "5.5.20",
 		"defu": "6.1.7",
 		"discord-api-types": "0.38.48",
 		"eslint": "9.39.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 954f11e61..8bd8067b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -265,9 +265,6 @@ importers:
       cz-conventional-changelog:
         specifier: 3.3.0
         version: 3.3.0(@types/node@24.12.4)(typescript@6.0.3)
-      daisyui:
-        specifier: 5.5.20
-        version: 5.5.20
       defu:
         specifier: 6.1.7
         version: 6.1.7
@@ -7793,9 +7790,6 @@ packages:
     resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
     engines: {node: '>= 10'}
 
-  daisyui@5.5.20:
-    resolution: {integrity: sha512-HemJcjl0Gk9rQ8BcgofN6p+EURrqftQG9wK1Hkxs98i49xe68+QxpNvry+PyxwkIUgrbMpNmZ5ZWjmtffAjfhQ==}
-
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -22216,8 +22210,6 @@ snapshots:
       - '@types/node'
       - typescript
 
-  daisyui@5.5.20: {}
-
   data-uri-to-buffer@4.0.1: {}
 
   data-uri-to-buffer@6.0.2: {}

From 2af724c6ff2874338d11a80b66d050cb4caef264 Mon Sep 17 00:00:00 2001
From: RedStar071 <redstar071@proton.me>
Date: Thu, 2 Jul 2026 17:54:23 +0000
Subject: [PATCH 2/6] fix(test): update ColorModeButton theme cycle
 expectations to midnight

The theme swap now cycles light -> dark -> midnight, so clicking from
the 'dark' starting preference advances to 'midnight', not 'light'.
Update the four post-swap assertions to match the new three-theme
cycle; the startViewTransition behavioral assertions are unchanged.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
---
 test/nuxt/components/ColorModeButton.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/nuxt/components/ColorModeButton.spec.ts b/test/nuxt/components/ColorModeButton.spec.ts
index 1acf67bbd..9b7dcffc3 100644
--- a/test/nuxt/components/ColorModeButton.spec.ts
+++ b/test/nuxt/components/ColorModeButton.spec.ts
@@ -59,7 +59,7 @@ describe("ColorModeButton", () => {
 		const wrapper = await mountSuspended(ColorModeButton);
 		await wrapper.find("button").trigger("click");
 		expect(svtSpy).not.toHaveBeenCalled();
-		expect(mockColorMode.preference).toBe("light");
+		expect(mockColorMode.preference).toBe("midnight");
 	});
 
 	it("swaps theme and does not call startViewTransition when activeViewTransition is truthy", async () => {
@@ -75,7 +75,7 @@ describe("ColorModeButton", () => {
 		const wrapper = await mountSuspended(ColorModeButton);
 		await wrapper.find("button").trigger("click");
 		expect(document.startViewTransition).not.toHaveBeenCalled();
-		expect(mockColorMode.preference).toBe("light");
+		expect(mockColorMode.preference).toBe("midnight");
 	});
 
 	it("swaps theme and does not call startViewTransition when effectiveReduceMotion is true", async () => {
@@ -85,13 +85,13 @@ describe("ColorModeButton", () => {
 		const wrapper = await mountSuspended(ColorModeButton);
 		await wrapper.find("button").trigger("click");
 		expect(document.startViewTransition).not.toHaveBeenCalled();
-		expect(mockColorMode.preference).toBe("light");
+		expect(mockColorMode.preference).toBe("midnight");
 	});
 
 	it("calls startViewTransition exactly once on happy path", async () => {
 		const wrapper = await mountSuspended(ColorModeButton);
 		await wrapper.find("button").trigger("click");
 		expect(document.startViewTransition).toHaveBeenCalledTimes(1);
-		expect(mockColorMode.preference).toBe("light");
+		expect(mockColorMode.preference).toBe("midnight");
 	});
 });

From e67b12653f31696b2262b7e6d896674aa9047d29 Mon Sep 17 00:00:00 2001
From: RedStar071 <redstar071@proton.me>
Date: Thu, 2 Jul 2026 18:13:49 +0000
Subject: [PATCH 3/6] fix(a11y): announce next theme in ColorModeButton
 aria-label

Describe the forthcoming action instead of the current state so the
label follows the standard toggle-button pattern and no longer leaks
the internal 'system' preference string to screen reader users.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
---
 app/components/ColorModeButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ColorModeButton.vue b/app/components/ColorModeButton.vue
index 0e2c871dc..23a2e3397 100644
--- a/app/components/ColorModeButton.vue
+++ b/app/components/ColorModeButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<ClientOnly>
 		<UButton
-			:aria-label="`Switch theme (current: ${colorMode.preference})`"
+			:aria-label="`Switch to ${nextTheme} theme`"
 			:icon="themeIcon"
 			color="neutral"
 			variant="ghost"

From 721590df467342b7431cd06c80ed1d6ed6b9631b Mon Sep 17 00:00:00 2001
From: RedStar071 <redstar071@proton.me>
Date: Thu, 2 Jul 2026 18:18:46 +0000
Subject: [PATCH 4/6] style(css): pair theme class with data-theme in glass
 utilities

Match main.css's [data-theme="x"], .x pairing for the dark/midnight
overrides in card-glass, glass-overlay, and hover-lift. Nuxt UI's
color-mode config sets both dataValue: "theme" and classSuffix: "",
so this is defensive alignment with the token file rather than a
behavior change.

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>
---
 app/assets/css/utilities.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/css/utilities.css b/app/assets/css/utilities.css
index 580ad1bba..1833ec08c 100644
--- a/app/assets/css/utilities.css
+++ b/app/assets/css/utilities.css
@@ -150,7 +150,9 @@
 	background: oklch(50% 0 0 / 0.05);
 
 	[data-theme="dark"] &,
-	[data-theme="midnight"] & {
+	.dark &,
+	[data-theme="midnight"] &,
+	.midnight & {
 		border-color: oklch(100% 0 0 / 0.08);
 		background: oklch(20% 0 0 / 0.3);
 	}
@@ -261,7 +263,9 @@
 	-webkit-backdrop-filter: blur(16px) saturate(180%);
 
 	[data-theme="dark"] &,
-	[data-theme="midnight"] & {
+	.dark &,
+	[data-theme="midnight"] &,
+	.midnight & {
 		backdrop-filter: blur(20px) saturate(180%);
 		-webkit-backdrop-filter: blur(20px) saturate(180%);
 	}
@@ -342,7 +346,8 @@
 		box-shadow: 0 12px 40px oklch(0% 0 0 / 0.1);
 	}
 
-	[data-theme="dark"] &:hover {
+	[data-theme="dark"] &:hover,
+	.dark &:hover {
 		box-shadow: 0 12px 40px oklch(0% 0 0 / 0.3);
 	}
 }

From 69684dd8d45922356f154e0e09b3639cd2742afb Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Fri, 3 Jul 2026 18:31:53 +0200
Subject: [PATCH 5/6] refactor(ui): replace divs with UFieldGroup for
 consistent layout

---
 app/components/OtherApps.vue                  |  4 +-
 app/components/feedback/Modal.vue             |  4 +-
 .../guild/settings/DisabledCommands.vue       |  7 +-
 app/components/guild/settings/General.vue     |  4 +-
 .../guild/settings/filter/Links.vue           | 18 ++---
 app/components/guild/settings/filter/Word.vue | 18 ++---
 app/components/pwa/InstallPrompt.vue          |  8 +--
 app/components/pwa/Prompt.client.vue          | 27 ++++----
 app/layouts/dashboard.vue                     |  4 +-
 app/pages/(marketing)/blog/[slug].vue         |  4 +-
 app/pages/(marketing)/staryl/index.vue        | 18 ++---
 app/pages/(marketing)/wolfstar/index.vue      | 28 ++++----
 app/pages/commands.vue                        | 69 +++++++++----------
 13 files changed, 104 insertions(+), 109 deletions(-)

diff --git a/app/components/OtherApps.vue b/app/components/OtherApps.vue
index 66dae2e11..fc6cfc3b0 100644
--- a/app/components/OtherApps.vue
+++ b/app/components/OtherApps.vue
@@ -35,7 +35,7 @@
 			</div>
 			<div class="other-apps-description">
 				<p class="grow">{{ app.description }}</p>
-				<div class="mt-4 flex justify-end gap-2">
+				<UFieldGroup class="mt-4 justify-end">
 					<UButton :to="app.explore" color="neutral" variant="solid">
 						<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
 						Explore
@@ -44,7 +44,7 @@
 						<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add
 						App
 					</UButton>
-				</div>
+				</UFieldGroup>
 			</div>
 		</div>
 	</div>
diff --git a/app/components/feedback/Modal.vue b/app/components/feedback/Modal.vue
index 3b594d292..be6fb1f59 100644
--- a/app/components/feedback/Modal.vue
+++ b/app/components/feedback/Modal.vue
@@ -39,7 +39,7 @@
 		</template>
 
 		<template #footer>
-			<div class="flex justify-end gap-2">
+			<UFieldGroup class="justify-end">
 				<UButton
 					color="neutral"
 					variant="ghost"
@@ -57,7 +57,7 @@
 				>
 					Send Feedback
 				</UButton>
-			</div>
+			</UFieldGroup>
 		</template>
 	</UModal>
 </template>
diff --git a/app/components/guild/settings/DisabledCommands.vue b/app/components/guild/settings/DisabledCommands.vue
index 97678433c..8271dc128 100644
--- a/app/components/guild/settings/DisabledCommands.vue
+++ b/app/components/guild/settings/DisabledCommands.vue
@@ -96,11 +96,10 @@
 							</div>
 
 							<Separator />
-							<div class="flex flex-wrap items-center justify-end gap-2 p-4">
+							<UFieldGroup size="sm" class="flex-wrap justify-end p-4">
 								<UButton
 									color="success"
 									variant="solid"
-									size="sm"
 									@click="toggleAllInCategory(category, true)"
 								>
 									Enable all
@@ -108,7 +107,6 @@
 								<UButton
 									color="warning"
 									variant="solid"
-									size="sm"
 									@click="toggleAllInCategory(category, false)"
 								>
 									Disable all
@@ -116,12 +114,11 @@
 								<UButton
 									color="neutral"
 									variant="outline"
-									size="sm"
 									@click="resetCategory(category)"
 								>
 									Reset
 								</UButton>
-							</div>
+							</UFieldGroup>
 						</template>
 					</UCollapsible>
 				</div>
diff --git a/app/components/guild/settings/General.vue b/app/components/guild/settings/General.vue
index d0dfdaaa6..5ee17b7f3 100644
--- a/app/components/guild/settings/General.vue
+++ b/app/components/guild/settings/General.vue
@@ -23,7 +23,7 @@
 			</div>
 		</dl>
 
-		<div class="mt-4 flex flex-col items-start gap-3 md:flex-row">
+		<UFieldGroup class="mt-4 flex-col items-start md:flex-row">
 			<UButton
 				color="neutral"
 				variant="link"
@@ -42,7 +42,7 @@
 			>
 				Need Help?
 			</UButton>
-		</div>
+		</UFieldGroup>
 	</GuildSettingsSection>
 
 	<GuildSettingsSection
diff --git a/app/components/guild/settings/filter/Links.vue b/app/components/guild/settings/filter/Links.vue
index cbdeb11f3..f137f076e 100644
--- a/app/components/guild/settings/filter/Links.vue
+++ b/app/components/guild/settings/filter/Links.vue
@@ -194,14 +194,16 @@
 			<!-- Section 3: Options -->
 			<GuildSettingsSection title="Options">
 				<div class="space-y-4">
-					<form class="flex gap-2" @submit.prevent="addLink">
-						<UInput
-							v-model="newLink"
-							placeholder="e.g. example.com"
-							class="w-64"
-							aria-label="Add allowed link"
-						/>
-						<UButton type="submit" color="primary"> Confirm </UButton>
+					<form @submit.prevent="addLink">
+						<UFieldGroup>
+							<UInput
+								v-model="newLink"
+								placeholder="e.g. example.com"
+								class="w-64"
+								aria-label="Add allowed link"
+							/>
+							<UButton type="submit" color="primary"> Confirm </UButton>
+						</UFieldGroup>
 					</form>
 
 					<div v-if="state.selfmodLinksAllowed.length > 0" class="flex flex-wrap gap-2">
diff --git a/app/components/guild/settings/filter/Word.vue b/app/components/guild/settings/filter/Word.vue
index f78757ba5..41bddc2b4 100644
--- a/app/components/guild/settings/filter/Word.vue
+++ b/app/components/guild/settings/filter/Word.vue
@@ -194,14 +194,16 @@
 			<!-- Section 3: Filtered Words -->
 			<GuildSettingsSection title="Filtered Words">
 				<div class="space-y-4">
-					<form class="flex gap-2" @submit.prevent="addWord">
-						<UInput
-							v-model="newWord"
-							placeholder="e.g. badword"
-							class="w-64"
-							aria-label="Add filtered word"
-						/>
-						<UButton type="submit" color="primary"> Confirm </UButton>
+					<form @submit.prevent="addWord">
+						<UFieldGroup>
+							<UInput
+								v-model="newWord"
+								placeholder="e.g. badword"
+								class="w-64"
+								aria-label="Add filtered word"
+							/>
+							<UButton type="submit" color="primary"> Confirm </UButton>
+						</UFieldGroup>
 					</form>
 
 					<div v-if="state.selfmodFilterRaw.length > 0" class="flex flex-wrap gap-2">
diff --git a/app/components/pwa/InstallPrompt.vue b/app/components/pwa/InstallPrompt.vue
index 335b0f480..7d65a1eb6 100644
--- a/app/components/pwa/InstallPrompt.vue
+++ b/app/components/pwa/InstallPrompt.vue
@@ -20,12 +20,12 @@
 		</div>
 
 		<template #actions>
-			<div class="mt-2 flex gap-2">
-				<UButton size="sm" @click="$pwa?.install()"> Install </UButton>
-				<UButton size="sm" color="error" variant="ghost" @click="$pwa?.cancelInstall()">
+			<UFieldGroup size="sm" class="mt-2">
+				<UButton @click="$pwa?.install()"> Install </UButton>
+				<UButton color="error" variant="ghost" @click="$pwa?.cancelInstall()">
 					Dismiss
 				</UButton>
-			</div>
+			</UFieldGroup>
 		</template>
 	</UAlert>
 </template>
diff --git a/app/components/pwa/Prompt.client.vue b/app/components/pwa/Prompt.client.vue
index 58aadf79d..637c09cf0 100644
--- a/app/components/pwa/Prompt.client.vue
+++ b/app/components/pwa/Prompt.client.vue
@@ -13,19 +13,20 @@
 			>
 				<span class="text-lg">✨</span>
 				<div class="text-sm font-medium">Update available</div>
-				<UButton
-					color="primary"
-					size="xs"
-					label="Refresh"
-					@click="$pwa?.updateServiceWorker(true)"
-				/>
-				<UButton
-					color="neutral"
-					variant="ghost"
-					size="xs"
-					icon="heroicons:x-mark-20-solid"
-					@click="$pwa?.cancelPrompt()"
-				/>
+				<UFieldGroup size="xs">
+					<UButton
+						color="primary"
+						label="Refresh"
+						@click="$pwa?.updateServiceWorker(true)"
+					/>
+					<UButton
+						color="neutral"
+						variant="ghost"
+						icon="heroicons:x-mark-20-solid"
+						aria-label="Dismiss update prompt"
+						@click="$pwa?.cancelPrompt()"
+					/>
+				</UFieldGroup>
 			</div>
 		</div>
 	</Transition>
diff --git a/app/layouts/dashboard.vue b/app/layouts/dashboard.vue
index edc3f8ad9..5b3c2028b 100644
--- a/app/layouts/dashboard.vue
+++ b/app/layouts/dashboard.vue
@@ -125,12 +125,12 @@
 			:dismissible="false"
 		>
 			<template #footer>
-				<div class="flex justify-end gap-2">
+				<UFieldGroup class="justify-end">
 					<UButton color="neutral" variant="ghost" @click="cancelLeave">
 						Stay on Page
 					</UButton>
 					<UButton color="error" @click="confirmLeave"> Discard Changes </UButton>
-				</div>
+				</UFieldGroup>
 			</template>
 		</UModal>
 	</UDashboardGroup>
diff --git a/app/pages/(marketing)/blog/[slug].vue b/app/pages/(marketing)/blog/[slug].vue
index e9f48e571..4466238b0 100644
--- a/app/pages/(marketing)/blog/[slug].vue
+++ b/app/pages/(marketing)/blog/[slug].vue
@@ -45,7 +45,7 @@
 
 				<div class="not-prose mt-12 flex items-center justify-between">
 					<ULink to="/blog" class="text-primary"> ← Back to blog </ULink>
-					<div class="flex items-center justify-end gap-1.5">
+					<UFieldGroup class="justify-end">
 						<UButton
 							icon="i-lucide-link"
 							variant="ghost"
@@ -65,7 +65,7 @@
 						>
 							<span class="sr-only">WolfStar on {{ link.label }}</span>
 						</UButton>
-					</div>
+					</UFieldGroup>
 				</div>
 
 				<USeparator v-if="surround?.length" />
diff --git a/app/pages/(marketing)/staryl/index.vue b/app/pages/(marketing)/staryl/index.vue
index c72151e9d..3dbea72a4 100644
--- a/app/pages/(marketing)/staryl/index.vue
+++ b/app/pages/(marketing)/staryl/index.vue
@@ -11,15 +11,17 @@
 		<BuildEnvironment :footer="false" class="mt-16" />
 	</section>
 	<section
-		class="mt-16 flex animate-fade-in-up items-center justify-center gap-2 animate-fade-in-delay-2"
+		class="mt-16 flex animate-fade-in-up items-center justify-center animate-fade-in-delay-2"
 	>
-		<UButton :to="Invites.Staryl" class="sm:min-w-48" color="neutral" size="lg">
-			<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
-		</UButton>
-		<UButton class="sm:min-w-48" color="neutral" size="lg" to="#explore" variant="outline">
-			<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
-			Explore
-		</UButton>
+		<UFieldGroup size="lg">
+			<UButton :to="Invites.Staryl" class="sm:min-w-48" color="neutral">
+				<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
+			</UButton>
+			<UButton class="sm:min-w-48" color="neutral" to="#explore" variant="outline">
+				<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
+				Explore
+			</UButton>
+		</UFieldGroup>
 	</section>
 
 	<h2 class="mt-72 animate-on-scroll text-center text-5xl font-bold">COMING SOON...</h2>
diff --git a/app/pages/(marketing)/wolfstar/index.vue b/app/pages/(marketing)/wolfstar/index.vue
index b82fc40a1..3d99eaa48 100644
--- a/app/pages/(marketing)/wolfstar/index.vue
+++ b/app/pages/(marketing)/wolfstar/index.vue
@@ -18,21 +18,17 @@
 	</section>
 
 	<section
-		class="relative z-10 mt-12 flex animate-fade-in-up justify-center gap-2 animate-fade-in-delay-2"
+		class="relative z-10 mt-12 flex animate-fade-in-up justify-center animate-fade-in-delay-2"
 	>
-		<UButton class="btn-glow sm:min-w-48" color="neutral" size="lg" :to="Invites.WolfStar">
-			<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
-		</UButton>
-		<UButton
-			class="btn-glow sm:min-w-48"
-			color="neutral"
-			size="lg"
-			to="#explore"
-			variant="outline"
-		>
-			<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
-			Explore
-		</UButton>
+		<UFieldGroup size="lg">
+			<UButton class="sm:min-w-48" color="neutral" :to="Invites.WolfStar">
+				<UIcon name="ph:plus-circle-fill" class="h-5 w-5" aria-hidden="true" /> Add App
+			</UButton>
+			<UButton class="sm:min-w-48" color="neutral" to="#explore" variant="outline">
+				<UIcon name="ph:magnifying-glass-fill" class="h-5 w-5" aria-hidden="true" />
+				Explore
+			</UButton>
+		</UFieldGroup>
 	</section>
 
 	<section id="explore" ref="exploreRef" class="mt-34 min-h-200 w-full scroll-mt-24">
@@ -79,14 +75,14 @@
 	<section class="invite-card mt-32 flex animate-on-scroll flex-col items-center">
 		<h3 class="mb-4 text-3xl font-bold">Liking what you see?</h3>
 
-		<div class="flex flex-wrap justify-center gap-2">
+		<UFieldGroup class="flex-wrap justify-center">
 			<UButton :to="Invites.WolfStar" color="neutral" variant="ghost">
 				Invite WolfStar
 			</UButton>
 			<UButton color="neutral" to="https://join.wolfstar.rocks" variant="ghost">
 				Support Server
 			</UButton>
-		</div>
+		</UFieldGroup>
 	</section>
 	<OtherApps :apps="[otherApps.Staryl]" />
 </template>
diff --git a/app/pages/commands.vue b/app/pages/commands.vue
index a1a89f06b..f98ea0904 100644
--- a/app/pages/commands.vue
+++ b/app/pages/commands.vue
@@ -12,45 +12,40 @@
 
 		<div class="space-y-8">
 			<!-- Search bar -->
-			<section
-				aria-labelledby="search-heading"
-				class="mx-auto flex max-w-3xl flex-col items-stretch gap-4 sm:flex-row sm:items-center"
-			>
+			<section aria-labelledby="search-heading" class="mx-auto w-full max-w-3xl">
 				<h2 id="search-heading" class="sr-only">Search Commands</h2>
-				<UInput
-					v-model="searchValue"
-					placeholder="Search commands..."
-					icon="i-heroicons-magnifying-glass"
-					size="xl"
-					class="flex-1"
-					aria-label="Search for commands by name or description"
-					:aria-describedby="searchValue ? 'search-results-count' : undefined"
-				>
-					<template v-if="searchValue" #trailing>
-						<UButton
-							color="neutral"
-							variant="link"
-							icon="i-heroicons-x-mark-20-solid"
-							:padded="false"
-							aria-label="Clear search"
-							@click="searchValue = ''"
-						/>
-					</template>
-				</UInput>
+				<UFieldGroup size="xl" class="w-full">
+					<UInput
+						v-model="searchValue"
+						placeholder="Search commands..."
+						icon="i-heroicons-magnifying-glass"
+						class="min-w-0 flex-1"
+						aria-label="Search for commands by name or description"
+						:aria-describedby="searchValue ? 'search-results-count' : undefined"
+					>
+						<template v-if="searchValue" #trailing>
+							<UButton
+								color="neutral"
+								variant="link"
+								icon="i-heroicons-x-mark-20-solid"
+								:padded="false"
+								aria-label="Clear search"
+								@click="searchValue = ''"
+							/>
+						</template>
+					</UInput>
 
-				<!-- Refresh button -->
-				<UButton
-					icon="i-heroicons-arrow-path"
-					color="primary"
-					variant="soft"
-					size="xl"
-					class="self-start sm:self-auto"
-					:loading="status === 'pending'"
-					aria-label="Refresh commands list"
-					@click="refresh()"
-				>
-					<span class="hidden sm:inline">Refresh</span>
-				</UButton>
+					<UButton
+						icon="i-heroicons-arrow-path"
+						color="primary"
+						variant="soft"
+						:loading="status === 'pending'"
+						aria-label="Refresh commands list"
+						@click="refresh()"
+					>
+						<span class="hidden sm:inline">Refresh</span>
+					</UButton>
+				</UFieldGroup>
 			</section>
 
 			<!-- Results count for screen readers -->

From 2ef958d8d0bf84b8929c808fb3146f79dde59228 Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Fri, 3 Jul 2026 20:07:20 +0200
Subject: [PATCH 6/6] style(css): enhance prose utility with additional text
 styles for improved readability

---
 app/assets/css/utilities.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/css/utilities.css b/app/assets/css/utilities.css
index 1833ec08c..ef9b77545 100644
--- a/app/assets/css/utilities.css
+++ b/app/assets/css/utilities.css
@@ -23,7 +23,7 @@
 }
 
 @utility prose {
-	@apply max-w-none;
+	@apply max-w-none text-default prose-headings:text-highlighted prose-p:text-toned prose-strong:text-highlighted prose-li:text-toned;
 }
 
 @utility tab-* {