Fix lint, make design more consistent, add license texts,

2026-04-02 04:08:53 +02:00
parent 37cac95b38
commit ae0ee8fac7
45 changed files with 988 additions and 572 deletions
--- a/toju-app/src/app/app.html
+++ b/toju-app/src/app/app.html
@@ -31,22 +31,38 @@
          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio…</div>
          }
        </div>
-        } @else { @if (desktopUpdateState().restartRequired) {
+        } @else { @if (showDesktopUpdateNotice()) {
        <div class="pointer-events-none absolute inset-x-0 top-0 z-20 px-4 pt-4">
-          <div class="pointer-events-auto mx-auto max-w-4xl rounded-md border border-border bg-card p-4 shadow-sm">
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-              <div>
-                <p class="text-sm font-semibold text-foreground">Update ready to install</p>
-                <p class="mt-1 text-sm text-muted-foreground">
-                  MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
+          <div class="pointer-events-auto mx-auto w-full max-w-xl">
+            <div class="relative rounded-xl border border-border/80 bg-card/95 px-4 py-3 shadow-lg backdrop-blur">
+              <button
+                type="button"
+                (click)="dismissDesktopUpdateNotice()"
+                class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Dismiss update notice"
+              >
+                <ng-icon
+                  name="lucideX"
+                  class="h-4 w-4"
+                />
+              </button>
+
+              <div class="pr-10">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Update Ready</p>
+                <p class="mt-1 text-sm font-semibold text-foreground">
+                  Restart to install {{ desktopUpdateState().targetVersion || 'the latest update' }}
                </p>
              </div>

-              <div class="flex flex-wrap gap-2">
+              <p class="mt-1 pr-10 text-xs leading-5 text-muted-foreground">
+                The update has already been downloaded. Restart the app when you're ready to finish applying it.
+              </p>
+
+              <div class="mt-3 flex flex-wrap gap-2">
                <button
                  type="button"
                  (click)="openUpdatesSettings()"
-                  class="inline-flex items-center rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+                  class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                >
                  Update settings
                </button>
@@ -54,7 +70,7 @@
                <button
                  type="button"
                  (click)="restartToApplyUpdate()"
-                  class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                  class="inline-flex items-center rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
                >
                  Restart now
                </button>
@@ -78,9 +94,9 @@
    class="pointer-events-none absolute z-[80]"
    [ngStyle]="themeStudioControlsPositionStyles()"
  >
-    <div class="pointer-events-auto flex items-center gap-2 rounded-full border border-border/80 bg-card/95 px-2 py-2 shadow-2xl backdrop-blur">
+    <div class="pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-2 py-2 shadow-lg backdrop-blur">
      <div
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
        [class.cursor-grabbing]="isDraggingThemeStudioControls()"
        (pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
      >
@@ -90,7 +106,7 @@
      <button
        type="button"
        (click)="minimizeThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        Minimize
      </button>
@@ -98,7 +114,7 @@
      <button
        type="button"
        (click)="closeThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        Close
      </button>
@@ -106,7 +122,7 @@
  </div>
  } @if (isThemeStudioMinimized()) {
  <div class="pointer-events-none absolute bottom-4 right-4 z-[80]">
-    <div class="pointer-events-auto flex items-center gap-3 rounded-2xl border border-border/80 bg-card/95 px-3 py-3 shadow-2xl backdrop-blur">
+    <div class="pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 shadow-lg backdrop-blur">
      <div class="min-w-0">
        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Theme Studio</p>
        <p class="mt-1 text-sm font-medium text-foreground">Minimized</p>
@@ -115,7 +131,7 @@
      <button
        type="button"
        (click)="reopenThemeStudio()"
-        class="rounded-full bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+        class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
      >
        Re-open
      </button>
@@ -123,7 +139,7 @@
      <button
        type="button"
        (click)="dismissMinimizedThemeStudio()"
-        class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        Dismiss
      </button>
--- a/toju-app/src/app/app.ts
+++ b/toju-app/src/app/app.ts
@@ -17,6 +17,8 @@ import {
 } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';

 import {
  DatabaseService,
@@ -51,6 +53,7 @@ import {
  selector: 'app-root',
  imports: [
    CommonModule,
+    NgIcon,
    RouterOutlet,
    ServersRailComponent,
    TitleBarComponent,
@@ -61,6 +64,11 @@ import {
    ThemeNodeDirective,
    ThemePickerOverlayComponent
  ],
+  viewProviders: [
+    provideIcons({
+      lucideX
+    })
+  ],
  templateUrl: './app.html',
  styleUrl: './app.scss'
 })
@@ -72,20 +80,17 @@ export class App implements OnInit, OnDestroy {
  currentRoom = this.store.selectSignal(selectCurrentRoom);
  desktopUpdates = inject(DesktopAppUpdateService);
  desktopUpdateState = this.desktopUpdates.state;
-
-  private databaseService = inject(DatabaseService);
-  private router = inject(Router);
-  private servers = inject(ServerDirectoryFacade);
-  private notifications = inject(NotificationsFacade);
-  private settingsModal = inject(SettingsModalService);
-  private timeSync = inject(TimeSyncService);
-  private theme = inject(ThemeService);
-  private voiceSession = inject(VoiceSessionFacade);
-  private externalLinks = inject(ExternalLinkService);
-  private electronBridge = inject(ElectronBridgeService);
-  private deepLinkCleanup: (() => void) | null = null;
-  private themeStudioControlsDragOffset: { x: number; y: number } | null = null;
-  private themeStudioControlsBounds: { width: number; height: number } | null = null;
+  readonly databaseService = inject(DatabaseService);
+  readonly router = inject(Router);
+  readonly servers = inject(ServerDirectoryFacade);
+  readonly notifications = inject(NotificationsFacade);
+  readonly settingsModal = inject(SettingsModalService);
+  readonly timeSync = inject(TimeSyncService);
+  readonly theme = inject(ThemeService);
+  readonly voiceSession = inject(VoiceSessionFacade);
+  readonly externalLinks = inject(ExternalLinkService);
+  readonly electronBridge = inject(ElectronBridgeService);
+  readonly dismissedDesktopUpdateNoticeKey = signal<string | null>(null);
  readonly themeStudioFullscreenComponent = signal<Type<unknown> | null>(null);
  readonly themeStudioControlsPosition = signal<{ x: number; y: number } | null>(null);
  readonly isDraggingThemeStudioControls = signal(false);
@@ -102,6 +107,17 @@ export class App implements OnInit, OnDestroy {
    return this.settingsModal.activePage() === 'theme'
      && this.settingsModal.themeStudioMinimized();
  });
+  readonly desktopUpdateNoticeKey = computed(() => {
+    const updateState = this.desktopUpdateState();
+
+    return updateState.targetVersion?.trim()
+      || updateState.latestVersion?.trim()
+      || `restart:${updateState.currentVersion}`;
+  });
+  readonly showDesktopUpdateNotice = computed(() => {
+    return this.desktopUpdateState().restartRequired
+      && this.dismissedDesktopUpdateNoticeKey() !== this.desktopUpdateNoticeKey();
+  });
  readonly appWorkspaceShellStyles = computed(() => {
    const workspaceStyles = this.appWorkspaceLayoutStyles();

@@ -131,6 +147,10 @@ export class App implements OnInit, OnDestroy {
    };
  });

+  private deepLinkCleanup: (() => void) | null = null;
+  private themeStudioControlsDragOffset: { x: number; y: number } | null = null;
+  private themeStudioControlsBounds: { width: number; height: number } | null = null;
+
  constructor() {
    effect(() => {
      if (!this.isThemeStudioFullscreen() || this.themeStudioFullscreenComponent()) {
@@ -259,6 +279,14 @@ export class App implements OnInit, OnDestroy {
    this.settingsModal.open('updates');
  }

+  dismissDesktopUpdateNotice(): void {
+    if (!this.desktopUpdateState().restartRequired) {
+      return;
+    }
+
+    this.dismissedDesktopUpdateNoticeKey.set(this.desktopUpdateNoticeKey());
+  }
+
  startThemeStudioControlsDrag(event: PointerEvent, controlsElement: HTMLElement): void {
    if (event.button !== 0) {
      return;
@@ -309,15 +337,15 @@ export class App implements OnInit, OnDestroy {
    await this.desktopUpdates.restartToApplyUpdate();
  }

-  private clampThemeStudioControlsPosition(x: number, y: number, width: number, height: number): { x: number; y: number } {
+  private clampThemeStudioControlsPosition(left: number, top: number, width: number, height: number): { x: number; y: number } {
    const minX = App.THEME_STUDIO_CONTROLS_MARGIN;
    const minY = App.TITLE_BAR_HEIGHT + App.THEME_STUDIO_CONTROLS_MARGIN;
    const maxX = Math.max(minX, window.innerWidth - width - App.THEME_STUDIO_CONTROLS_MARGIN);
    const maxY = Math.max(minY, window.innerHeight - height - App.THEME_STUDIO_CONTROLS_MARGIN);

    return {
-      x: Math.min(Math.max(minX, x), maxX),
-      y: Math.min(Math.max(minY, y), maxY)
+      x: Math.min(Math.max(minX, left), maxX),
+      y: Math.min(Math.max(minY, top), maxY)
    };
  }

--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-composer/chat-message-composer.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-composer/chat-message-composer.component.html
@@ -11,7 +11,7 @@
      </span>
      <button
        (click)="clearReply()"
-        class="rounded p-1 hover:bg-secondary"
+        class="grid h-6 w-6 place-items-center rounded transition-colors hover:bg-secondary"
      >
        <ng-icon
          name="lucideX"
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html
@@ -55,7 +55,7 @@
        <div class="flex flex-col gap-2">
          <button
            (click)="saveEdit()"
-            class="rounded p-1 text-primary hover:bg-primary/10"
+            class="grid h-6 w-6 place-items-center rounded text-primary transition-colors hover:bg-primary/10"
          >
            <ng-icon
              name="lucideCheck"
@@ -64,7 +64,7 @@
          </button>
          <button
            (click)="cancelEdit()"
-            class="rounded p-1 text-muted-foreground hover:bg-secondary"
+            class="grid h-6 w-6 place-items-center rounded text-muted-foreground transition-colors hover:bg-secondary"
          >
            <ng-icon
              name="lucideX"
@@ -108,7 +108,7 @@
                    <div class="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover/img:opacity-100">
                      <button
                        (click)="openLightbox(att); $event.stopPropagation()"
-                        class="rounded-md bg-black/60 p-1.5 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
+                        class="grid h-7 w-7 place-items-center rounded-md bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
                        title="View full size"
                      >
                        <ng-icon
@@ -118,7 +118,7 @@
                      </button>
                      <button
                        (click)="downloadAttachment(att); $event.stopPropagation()"
-                        class="rounded-md bg-black/60 p-1.5 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
+                        class="grid h-7 w-7 place-items-center rounded-md bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
                        title="Download"
                      >
                        <ng-icon
@@ -338,7 +338,7 @@
      <div class="relative">
        <button
          (click)="toggleEmojiPicker()"
-          class="rounded-l-lg p-1.5 transition-colors hover:bg-secondary"
+          class="grid h-8 w-8 place-items-center rounded-l-lg transition-colors hover:bg-secondary"
        >
          <ng-icon
            name="lucideSmile"
@@ -362,7 +362,7 @@

      <button
        (click)="requestReply()"
-        class="p-1.5 transition-colors hover:bg-secondary"
+        class="grid h-8 w-8 place-items-center transition-colors hover:bg-secondary"
      >
        <ng-icon
          name="lucideReply"
@@ -373,7 +373,7 @@
      @if (isOwnMessage()) {
        <button
          (click)="startEdit()"
-          class="p-1.5 transition-colors hover:bg-secondary"
+          class="grid h-8 w-8 place-items-center transition-colors hover:bg-secondary"
        >
          <ng-icon
            name="lucideEdit"
@@ -385,7 +385,7 @@
      @if (isOwnMessage() || isAdmin()) {
        <button
          (click)="requestDelete()"
-          class="rounded-r-lg p-1.5 transition-colors hover:bg-destructive/10"
+          class="grid h-8 w-8 place-items-center rounded-r-lg transition-colors hover:bg-destructive/10"
        >
          <ng-icon
            name="lucideTrash2"
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
@@ -55,7 +55,15 @@ const COMMON_EMOJIS = [
  '🔥',
  '👀'
 ];
-const RICH_MARKDOWN_PATTERN = /(^|\n)(#{1,6}\s|>\s|[-*+]\s|\d+\.\s|```|~~~)|!\[[^\]]*\]\([^)]+\)|\[[^\]]+\]\([^)]+\)|`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|_[^_\n]+_|(?:^|\n)\|.+\|/m;
+const RICH_MARKDOWN_PATTERNS = [
+  /(^|\n)(#{1,6}\s|>\s|[-*+]\s|\d+\.\s|```|~~~)/m,
+  /!\[[^\]]*\]\([^)]+\)/,
+  /\[[^\]]+\]\([^)]+\)/,
+  /`[^`\n]+`/,
+  /\*\*[^*\n]+\*\*|__[^_\n]+__/,
+  /\*[^*\n]+\*|_[^_\n]+_/,
+  /(?:^|\n)\|.+\|/m
+];

 interface ChatMessageAttachmentViewModel extends Attachment {
  isAudio: boolean;
@@ -292,7 +300,7 @@ export class ChatMessageItemComponent {
  }

  requiresRichMarkdown(content: string): boolean {
-    return RICH_MARKDOWN_PATTERN.test(content);
+    return RICH_MARKDOWN_PATTERNS.some((pattern) => pattern.test(content));
  }

  formatBytes(bytes: number): string {
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-markdown.component.ts
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-markdown.component.ts
@@ -73,4 +73,4 @@ export class ChatMessageMarkdownComponent {

    return PRISM_LANGUAGE_ALIASES[normalized] ?? normalized;
  }
-}
+}
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-overlays/chat-message-overlays.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-overlays/chat-message-overlays.component.html
@@ -20,7 +20,7 @@
      <div class="absolute right-3 top-3 flex gap-2">
        <button
          (click)="downloadAttachment(lightboxAttachment()!)"
-          class="rounded-lg bg-black/60 p-2 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
+          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          title="Download"
        >
          <ng-icon
@@ -30,7 +30,7 @@
        </button>
        <button
          (click)="closeLightbox()"
-          class="rounded-lg bg-black/60 p-2 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
+          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          title="Close"
        >
          <ng-icon
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
@@ -80,21 +80,21 @@
        </div>
      </div>
    } @else {
-      <div class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
+      <div class="columns-[12rem] gap-4">
        @for (gif of results(); track gif.id) {
          <button
            type="button"
            (click)="selectGif(gif)"
-            class="group overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
+            class="group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
          >
            <div
-              class="relative overflow-hidden bg-secondary/30"
-              [style.aspect-ratio]="gifAspectRatio(gif)"
+              class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
+              [style.height.px]="gifCardHeight(gif)"
            >
              <img
                [appChatImageProxyFallback]="gif.previewUrl || gif.url"
                [alt]="gif.title || 'KLIPY GIF'"
-                class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.03]"
+                class="h-full w-full object-contain p-1.5 transition-transform duration-200 group-hover:scale-[1.03]"
                loading="lazy"
              />
              <span
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
@@ -23,6 +23,12 @@ import {
 import { KlipyGif, KlipyService } from '../../application/klipy.service';
 import { ChatImageProxyFallbackDirective } from '../chat-image-proxy-fallback.directive';

+const KLIPY_CARD_MIN_WIDTH = 140;
+const KLIPY_CARD_MAX_WIDTH = 248;
+const KLIPY_CARD_MIN_HEIGHT = 104;
+const KLIPY_CARD_MAX_HEIGHT = 220;
+const KLIPY_CARD_FALLBACK_SIZE = 160;
+
@Component({
  selector: 'app-klipy-gif-picker',
  standalone: true,
@@ -106,12 +112,8 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
    this.closed.emit(undefined);
  }

-  gifAspectRatio(gif: KlipyGif): string {
-    if (gif.width > 0 && gif.height > 0) {
-      return `${gif.width} / ${gif.height}`;
-    }
-
-    return '1 / 1';
+  gifCardHeight(gif: KlipyGif): number {
+    return this.getGifCardSize(gif).height;
  }

  private async loadResults(reset: boolean): Promise<void> {
@@ -182,4 +184,32 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
      this.searchTimer = null;
    }
  }
+
+  private getGifCardSize(gif: KlipyGif): { width: number; height: number } {
+    if (gif.width <= 0 || gif.height <= 0) {
+      return {
+        width: KLIPY_CARD_FALLBACK_SIZE,
+        height: KLIPY_CARD_FALLBACK_SIZE
+      };
+    }
+
+    const maxScale = Math.min(
+      KLIPY_CARD_MAX_WIDTH / gif.width,
+      KLIPY_CARD_MAX_HEIGHT / gif.height
+    );
+    const minScale = Math.max(
+      KLIPY_CARD_MIN_WIDTH / gif.width,
+      KLIPY_CARD_MIN_HEIGHT / gif.height
+    );
+    const scale = minScale <= maxScale
+      ? Math.min(maxScale, Math.max(minScale, 1))
+      : maxScale;
+    const scaledWidth = Math.round(gif.width * scale);
+    const scaledHeight = Math.round(gif.height * scale);
+
+    return {
+      width: Math.min(KLIPY_CARD_MAX_WIDTH, Math.max(KLIPY_CARD_MIN_WIDTH, scaledWidth)),
+      height: Math.min(KLIPY_CARD_MAX_HEIGHT, Math.max(KLIPY_CARD_MIN_HEIGHT, scaledHeight))
+    };
+  }
 }
--- a/toju-app/src/app/domains/notifications/feature/settings/notifications-settings.component.html
+++ b/toju-app/src/app/domains/notifications/feature/settings/notifications-settings.component.html
@@ -1,7 +1,7 @@
 <div class="space-y-6">
-  <section class="rounded-xl border border-border bg-secondary/20 p-5">
+  <section class="rounded-lg border border-border bg-secondary/20 p-5">
    <div class="flex items-start gap-3">
-      <div class="rounded-xl bg-primary/10 p-2 text-primary">
+      <div class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
        <ng-icon
          name="lucideBell"
          class="h-5 w-5"
@@ -91,9 +91,9 @@
    </div>
  </section>

-  <section class="rounded-xl border border-border bg-card p-5">
+  <section class="rounded-lg border border-border bg-card p-5">
    <div class="flex items-start gap-3">
-      <div class="rounded-xl bg-secondary p-2 text-muted-foreground">
+      <div class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-secondary text-muted-foreground">
        <ng-icon
          [name]="enabled() ? 'lucideBell' : 'lucideBellOff'"
          class="h-5 w-5"
--- a/toju-app/src/app/domains/screen-share/feature/screen-share-viewer/screen-share-viewer.component.html
+++ b/toju-app/src/app/domains/screen-share/feature/screen-share-viewer/screen-share-viewer.component.html
@@ -44,7 +44,7 @@
        <button
          (click)="toggleFullscreen()"
          type="button"
-          class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          class="grid h-9 w-9 place-items-center rounded-lg bg-white/10 transition-colors hover:bg-white/20"
        >
          @if (isFullscreen()) {
            <ng-icon
@@ -62,7 +62,7 @@
          <button
            (click)="stopSharing()"
            type="button"
-            class="p-2 bg-destructive hover:bg-destructive/90 rounded-lg transition-colors"
+            class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
            title="Stop sharing"
          >
            <ng-icon
@@ -74,7 +74,7 @@
          <button
            (click)="stopWatching()"
            type="button"
-            class="p-2 bg-destructive hover:bg-destructive/90 rounded-lg transition-colors"
+            class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
            title="Stop watching"
          >
            <ng-icon
--- a/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.html
+++ b/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.html
@@ -37,7 +37,7 @@
      <button
        (click)="openSettings()"
        type="button"
-        class="p-2 bg-secondary hover:bg-secondary/80 rounded-lg border border-border transition-colors"
+        class="grid h-9 w-9 place-items-center rounded-lg border border-border bg-secondary transition-colors hover:bg-secondary/80"
        title="Settings"
      >
        <ng-icon
--- a/toju-app/src/app/domains/theme/application/element-picker.service.ts
+++ b/toju-app/src/app/domains/theme/application/element-picker.service.ts
@@ -10,18 +10,18 @@ import { ThemeRegistryService } from './theme-registry.service';

@Injectable({ providedIn: 'root' })
 export class ElementPickerService {
-  private readonly documentRef = inject(DOCUMENT);
-  private readonly modal = inject(SettingsModalService);
-  private readonly registry = inject(ThemeRegistryService);
+  readonly isPicking = signal(false);
+  readonly hoveredKey = signal<string | null>(null);
+  readonly selectedKey = signal<string | null>(null);
+
+  readonly documentRef = inject(DOCUMENT);
+  readonly modal = inject(SettingsModalService);
+  readonly registry = inject(ThemeRegistryService);

  private removeListeners: (() => void)[] = [];
  private resumePage: SettingsPage | null = null;
  private shouldRestoreModalOnCancel = true;

-  readonly isPicking = signal(false);
-  readonly hoveredKey = signal<string | null>(null);
-  readonly selectedKey = signal<string | null>(null);
-
  start(page: SettingsPage = 'theme', restoreModalOnCancel = true): void {
    if (this.isPicking()) {
      return;
--- a/toju-app/src/app/domains/theme/application/layout-sync.service.ts
+++ b/toju-app/src/app/domains/theme/application/layout-sync.service.ts
@@ -15,11 +15,11 @@ import { ThemeService } from './theme.service';

@Injectable({ providedIn: 'root' })
 export class LayoutSyncService {
-  private readonly registry = inject(ThemeRegistryService);
-  private readonly theme = inject(ThemeService);
-
  readonly draftLayout = computed(() => this.theme.draftTheme().layout);

+  readonly registry = inject(ThemeRegistryService);
+  readonly theme = inject(ThemeService);
+
  containers() {
    return this.registry.layoutContainers();
  }
--- a/toju-app/src/app/domains/theme/application/theme-library.service.ts
+++ b/toju-app/src/app/domains/theme/application/theme-library.service.ts
@@ -10,8 +10,8 @@ import { ThemeService } from './theme.service';

@Injectable({ providedIn: 'root' })
 export class ThemeLibraryService {
-  private readonly storage = inject(ThemeLibraryStorageService);
-  private readonly theme = inject(ThemeService);
+  readonly storage = inject(ThemeLibraryStorageService);
+  readonly theme = inject(ThemeService);

  readonly isAvailable = signal(this.storage.isAvailable);
  readonly entries = signal<SavedThemeSummary[]>([]);
--- a/toju-app/src/app/domains/theme/application/theme.service.ts
+++ b/toju-app/src/app/domains/theme/application/theme.service.ts
@@ -1,6 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import {
  Injectable,
+  Signal,
  computed,
  inject,
  signal
@@ -44,8 +45,44 @@ function resolveBuiltInDefaultMigration(document: ThemeDocument): ThemeDocument
    : document;
 }

+const hostStylePropertyKeys = [
+  'width',
+  'height',
+  'minWidth',
+  'minHeight',
+  'maxWidth',
+  'maxHeight',
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'padding',
+  'margin',
+  'border',
+  'borderRadius',
+  'backgroundColor',
+  'color',
+  'backgroundSize',
+  'backgroundPosition',
+  'backgroundRepeat',
+  'boxShadow',
+  'backdropFilter'
+] as const satisfies readonly (keyof ThemeElementStyles)[];
+
@Injectable({ providedIn: 'root' })
 export class ThemeService {
+  readonly activeTheme: Signal<ThemeDocument>;
+  readonly activeThemeText: Signal<string>;
+  readonly draftTheme: Signal<ThemeDocument>;
+  readonly draftText: Signal<string>;
+  readonly draftIsValid: Signal<boolean>;
+  readonly draftErrors: Signal<string[]>;
+  readonly statusMessage: Signal<string | null>;
+  readonly activeThemeName: Signal<string>;
+  readonly knownAnimationClasses: Signal<string[]>;
+  readonly isDraftDirty: Signal<boolean>;
+
  private readonly documentRef = inject(DOCUMENT);

  private readonly activeThemeInternal = signal<ThemeDocument>(createDefaultThemeDocument());
@@ -60,18 +97,20 @@ export class ThemeService {
  private statusTimeoutId: ReturnType<typeof setTimeout> | null = null;
  private animationStyleElement: HTMLStyleElement | null = null;

-  readonly activeTheme = this.activeThemeInternal.asReadonly();
-  readonly activeThemeText = this.activeThemeTextInternal.asReadonly();
-  readonly draftTheme = this.draftThemeInternal.asReadonly();
-  readonly draftText = this.draftTextInternal.asReadonly();
-  readonly draftIsValid = this.draftIsValidInternal.asReadonly();
-  readonly draftErrors = this.draftErrorsInternal.asReadonly();
-  readonly statusMessage = this.statusMessageInternal.asReadonly();
-  readonly activeThemeName = computed(() => this.activeThemeInternal().meta.name);
-  readonly knownAnimationClasses = computed(() => Object.keys(this.draftThemeInternal().animations));
-  readonly isDraftDirty = computed(() => {
-    return this.draftTextInternal().trim() !== this.activeThemeTextInternal().trim();
-  });
+  constructor() {
+    this.activeTheme = this.activeThemeInternal.asReadonly();
+    this.activeThemeText = this.activeThemeTextInternal.asReadonly();
+    this.draftTheme = this.draftThemeInternal.asReadonly();
+    this.draftText = this.draftTextInternal.asReadonly();
+    this.draftIsValid = this.draftIsValidInternal.asReadonly();
+    this.draftErrors = this.draftErrorsInternal.asReadonly();
+    this.statusMessage = this.statusMessageInternal.asReadonly();
+    this.activeThemeName = computed(() => this.activeThemeInternal().meta.name);
+    this.knownAnimationClasses = computed(() => Object.keys(this.draftThemeInternal().animations));
+    this.isDraftDirty = computed(() => {
+      return this.draftTextInternal().trim() !== this.activeThemeTextInternal().trim();
+    });
+  }

  initialize(): void {
    if (this.initialized) {
@@ -281,71 +320,13 @@ export class ThemeService {
      styles['backgroundImage'] = backgroundLayers.join(', ');
    }

-    if (elementTheme.width)
-      styles['width'] = elementTheme.width;
+    for (const property of hostStylePropertyKeys) {
+      const value = elementTheme[property];

-    if (elementTheme.height)
-      styles['height'] = elementTheme.height;
-
-    if (elementTheme.minWidth)
-      styles['minWidth'] = elementTheme.minWidth;
-
-    if (elementTheme.minHeight)
-      styles['minHeight'] = elementTheme.minHeight;
-
-    if (elementTheme.maxWidth)
-      styles['maxWidth'] = elementTheme.maxWidth;
-
-    if (elementTheme.maxHeight)
-      styles['maxHeight'] = elementTheme.maxHeight;
-
-    if (elementTheme.position)
-      styles['position'] = elementTheme.position;
-
-    if (elementTheme.top)
-      styles['top'] = elementTheme.top;
-
-    if (elementTheme.right)
-      styles['right'] = elementTheme.right;
-
-    if (elementTheme.bottom)
-      styles['bottom'] = elementTheme.bottom;
-
-    if (elementTheme.left)
-      styles['left'] = elementTheme.left;
-
-    if (elementTheme.padding)
-      styles['padding'] = elementTheme.padding;
-
-    if (elementTheme.margin)
-      styles['margin'] = elementTheme.margin;
-
-    if (elementTheme.border)
-      styles['border'] = elementTheme.border;
-
-    if (elementTheme.borderRadius)
-      styles['borderRadius'] = elementTheme.borderRadius;
-
-    if (elementTheme.backgroundColor)
-      styles['backgroundColor'] = elementTheme.backgroundColor;
-
-    if (elementTheme.color)
-      styles['color'] = elementTheme.color;
-
-    if (elementTheme.backgroundSize)
-      styles['backgroundSize'] = elementTheme.backgroundSize;
-
-    if (elementTheme.backgroundPosition)
-      styles['backgroundPosition'] = elementTheme.backgroundPosition;
-
-    if (elementTheme.backgroundRepeat)
-      styles['backgroundRepeat'] = elementTheme.backgroundRepeat;
-
-    if (elementTheme.boxShadow)
-      styles['boxShadow'] = elementTheme.boxShadow;
-
-    if (elementTheme.backdropFilter)
-      styles['backdropFilter'] = elementTheme.backdropFilter;
+      if (value) {
+        styles[property] = value;
+      }
+    }

    if (typeof elementTheme.opacity === 'number') {
      styles['opacity'] = `${elementTheme.opacity}`;
--- a/toju-app/src/app/domains/theme/domain/theme-llm-guide.ts
+++ b/toju-app/src/app/domains/theme/domain/theme-llm-guide.ts
@@ -31,6 +31,28 @@ function describeCapabilities(entry: (typeof THEME_REGISTRY)[number]): string {
    : 'visual style overrides only';
 }

+function describeLayoutContainer(container: (typeof THEME_LAYOUT_CONTAINERS)[number]): string {
+  const layoutKeys = getLayoutKeysForContainer(container.key);
+
+  return [
+    `- ${container.key}: ${container.columns} columns x ${container.rows} rows.`,
+    container.description,
+    `Layout keys: ${layoutKeys.join(', ')}.`
+  ].join(' ');
+}
+
+function describeThemeEntry(entry: (typeof THEME_REGISTRY)[number]): string {
+  const container = entry.container ?? 'none';
+
+  return [
+    `- ${entry.key}: ${entry.label}.`,
+    `Category=${entry.category}.`,
+    `Container=${container}.`,
+    entry.description,
+    `Supported extras: ${describeCapabilities(entry)}.`
+  ].join(' ');
+}
+
 const colorTokenKeys = Object.keys(DEFAULT_THEME_DOCUMENT.tokens.colors);
 const radiusTokenKeys = Object.keys(DEFAULT_THEME_DOCUMENT.tokens.radii);
 const effectTokenKeys = Object.keys(DEFAULT_THEME_DOCUMENT.tokens.effects);
@@ -132,19 +154,11 @@ export const THEME_LLM_GUIDE = [
  '- animations: Record<string, { duration?, easing?, delay?, iterationCount?, fillMode?, direction?, keyframes? }>',
  '',
  'Layout containers',
-  ...THEME_LAYOUT_CONTAINERS.map((container) => {
-    const layoutKeys = getLayoutKeysForContainer(container.key);
-
-    return `- ${container.key}: ${container.columns} columns x ${container.rows} rows. ${container.description} Layout keys: ${layoutKeys.join(', ')}.`;
-  }),
+  ...THEME_LAYOUT_CONTAINERS.map((container) => describeLayoutContainer(container)),
  `- Only these keys should normally appear in layout: ${layoutEditableKeys.join(', ')}.`,
  '',
  'Registered theme element keys',
-  ...THEME_REGISTRY.map((entry) => {
-    const container = entry.container ?? 'none';
-
-    return `- ${entry.key}: ${entry.label}. Category=${entry.category}. Container=${container}. ${entry.description} Supported extras: ${describeCapabilities(entry)}.`;
-  }),
+  ...THEME_REGISTRY.map((entry) => describeThemeEntry(entry)),
  '',
  'Supported element style fields',
  ...THEME_ELEMENT_STYLE_FIELDS.map((field) => {
--- a/toju-app/src/app/domains/theme/domain/theme.defaults.ts
+++ b/toju-app/src/app/domains/theme/domain/theme.defaults.ts
@@ -9,6 +9,27 @@ import {
  getLayoutEditableThemeKeys
 } from './theme.registry';

+const APP_ROOT_BASE_GRADIENT =
+  'radial-gradient(circle at top, '
+  + 'hsl(var(--surface-highlight) / 0.18), transparent 34%)';
+const APP_ROOT_OVERLAY_GRADIENT = 'linear-gradient(180deg, rgba(5, 8, 15, 0.98), rgba(9, 12, 20, 1))';
+const APP_ROOT_GRADIENT_LAYERS = [APP_ROOT_BASE_GRADIENT, APP_ROOT_OVERLAY_GRADIENT] as const;
+const APP_WORKSPACE_BASE_GRADIENT =
+  'radial-gradient(circle at top right, '
+  + 'hsl(var(--surface-highlight-alt) / 0.14), transparent 30%)';
+const APP_WORKSPACE_OVERLAY_GRADIENT = 'linear-gradient(180deg, rgba(9, 12, 21, 0.96), rgba(7, 10, 18, 1))';
+const APP_WORKSPACE_GRADIENT_LAYERS = [APP_WORKSPACE_BASE_GRADIENT, APP_WORKSPACE_OVERLAY_GRADIENT] as const;
+const CHAT_ROOM_MAIN_PANEL_BASE_GRADIENT =
+  'radial-gradient(circle at top, '
+  + 'hsl(var(--surface-highlight) / 0.12), transparent 28%)';
+const CHAT_ROOM_MAIN_PANEL_OVERLAY_GRADIENT = 'linear-gradient(180deg, rgba(16, 20, 34, 0.82), rgba(8, 11, 19, 0.92))';
+const CHAT_ROOM_MAIN_PANEL_GRADIENT_LAYERS = [CHAT_ROOM_MAIN_PANEL_BASE_GRADIENT, CHAT_ROOM_MAIN_PANEL_OVERLAY_GRADIENT] as const;
+const VOICE_WORKSPACE_BASE_GRADIENT =
+  'radial-gradient(circle at top right, '
+  + 'hsl(var(--surface-highlight) / 0.14), transparent 32%)';
+const VOICE_WORKSPACE_OVERLAY_GRADIENT = 'linear-gradient(180deg, rgba(18, 23, 37, 0.78), rgba(9, 12, 21, 0.88))';
+const VOICE_WORKSPACE_GRADIENT_LAYERS = [VOICE_WORKSPACE_BASE_GRADIENT, VOICE_WORKSPACE_OVERLAY_GRADIENT] as const;
+
 function createDefaultElements(): Record<string, ThemeElementStyles> {
  return Object.fromEntries(
    THEME_REGISTRY.map((entry) => [entry.key, {}])
@@ -89,7 +110,7 @@ function createDarkDefaultElements(): Record<string, ThemeElementStyles> {
  elements['appRoot'] = {
    backgroundColor: 'hsl(var(--background))',
    color: 'hsl(var(--foreground))',
-    gradient: 'radial-gradient(circle at top, hsl(var(--surface-highlight) / 0.18), transparent 34%), linear-gradient(180deg, rgba(5, 8, 15, 0.98), rgba(9, 12, 20, 1))'
+    gradient: APP_ROOT_GRADIENT_LAYERS.join(', ')
  };

  elements['serversRail'] = {
@@ -101,14 +122,14 @@ function createDarkDefaultElements(): Record<string, ThemeElementStyles> {

  elements['appWorkspace'] = {
    backgroundColor: 'hsl(var(--workspace-background))',
-    gradient: 'radial-gradient(circle at top right, hsl(var(--surface-highlight-alt) / 0.14), transparent 30%), linear-gradient(180deg, rgba(9, 12, 21, 0.96), rgba(7, 10, 18, 1))'
+    gradient: APP_WORKSPACE_GRADIENT_LAYERS.join(', ')
  };

  elements['titleBar'] = {
    backgroundColor: 'hsl(var(--title-bar-background) / 0.82)',
    color: 'hsl(var(--foreground))',
    gradient: 'linear-gradient(180deg, rgba(20, 26, 41, 0.52), rgba(7, 10, 18, 0.18))',
-    boxShadow: 'inset 0 -1px 0 hsl(var(--border) / 0.78), 0 12px 28px rgba(0, 0, 0, 0.18)',
+    boxShadow: ['inset 0 -1px 0 hsl(var(--border) / 0.78)', '0 12px 28px rgba(0, 0, 0, 0.18)'].join(', '),
    backdropFilter: 'var(--theme-effect-glass-blur)'
  };

@@ -127,7 +148,7 @@ function createDarkDefaultElements(): Record<string, ThemeElementStyles> {
    color: 'hsl(var(--foreground))',
    border: '1px solid hsl(var(--border) / 0.62)',
    borderRadius: 'var(--theme-radius-surface)',
-    gradient: 'radial-gradient(circle at top, hsl(var(--surface-highlight) / 0.12), transparent 28%), linear-gradient(180deg, rgba(16, 20, 34, 0.82), rgba(8, 11, 19, 0.92))',
+    gradient: CHAT_ROOM_MAIN_PANEL_GRADIENT_LAYERS.join(', '),
    boxShadow: 'var(--theme-effect-panel-shadow)',
    backdropFilter: 'var(--theme-effect-glass-blur)'
  };
@@ -156,7 +177,7 @@ function createDarkDefaultElements(): Record<string, ThemeElementStyles> {
    color: 'hsl(var(--foreground))',
    border: '1px solid hsl(var(--border) / 0.62)',
    borderRadius: 'calc(var(--theme-radius-surface) + 0.2rem)',
-    gradient: 'radial-gradient(circle at top right, hsl(var(--surface-highlight) / 0.14), transparent 32%), linear-gradient(180deg, rgba(18, 23, 37, 0.78), rgba(9, 12, 21, 0.88))',
+    gradient: VOICE_WORKSPACE_GRADIENT_LAYERS.join(', '),
    boxShadow: 'var(--theme-effect-panel-shadow)',
    backdropFilter: 'var(--theme-effect-glass-blur)'
  };
--- a/toju-app/src/app/domains/theme/domain/theme.schema.ts
+++ b/toju-app/src/app/domains/theme/domain/theme.schema.ts
@@ -4,6 +4,10 @@ import {
  ThemeSchemaField
 } from './theme.models';

+const RADIAL_GRADIENT_EXAMPLE =
+  'radial-gradient(circle at top, rgba(255,255,255,0.12), '
+  + 'transparent 60%)';
+
 export const THEME_TOP_LEVEL_FIELDS: readonly ThemeSchemaField[] = [
  {
    key: 'meta',
@@ -423,7 +427,7 @@ export const THEME_ELEMENT_STYLE_FIELDS: readonly ThemeSchemaField<ThemeElementS
    description: 'CSS gradient layered above any background image.',
    type: 'string',
    example: 'linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.72))',
-    examples: ['linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.72))', 'radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 60%)']
+    examples: ['linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.72))', RADIAL_GRADIENT_EXAMPLE]
  },
  {
    key: 'boxShadow',
--- a/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.html
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.html
@@ -1,18 +1,18 @@
-<div class="theme-grid-editor rounded-2xl border border-border bg-background/50 p-3">
+<div class="theme-grid-editor rounded-lg border border-border bg-card/40 p-3">
  <div class="mb-3 flex items-center justify-between gap-3 px-1">
    <div>
      <p class="text-sm font-semibold text-foreground">{{ container().label }}</p>
      <p class="text-xs text-muted-foreground">{{ container().description }}</p>
    </div>

-    <div class="rounded-full bg-secondary px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
+    <div class="rounded-md bg-secondary px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
      {{ container().columns }} cols x {{ container().rows }} rows
    </div>
  </div>

  <div
    #canvasRef
-    class="theme-grid-editor__frame relative overflow-hidden rounded-xl border border-border/80"
+    class="theme-grid-editor__frame relative overflow-hidden rounded-lg border border-border/80"
    [ngStyle]="frameStyle()"
  >
    <div class="theme-grid-editor__grid"></div>
@@ -40,7 +40,7 @@
              <p class="mt-1 line-clamp-2 text-[11px] leading-4 text-muted-foreground">{{ item.description }}</p>
            </div>

-            <div class="rounded-full bg-background/80 px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
+            <div class="rounded-md bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
              {{ item.grid.x }},{{ item.grid.y }} · {{ item.grid.w }}x{{ item.grid.h }}
            </div>
          </div>
@@ -57,7 +57,7 @@

    @if (disabled()) {
      <div
-        class="theme-grid-editor__disabled absolute inset-0 flex items-center justify-center rounded-xl bg-background/75 px-6 text-center text-sm text-muted-foreground backdrop-blur-sm"
+        class="theme-grid-editor__disabled absolute inset-0 flex items-center justify-center rounded-lg bg-background/75 px-6 text-center text-sm text-muted-foreground backdrop-blur-sm"
      >
        Fix JSON validation errors to re-enable the grid editor.
      </div>
--- a/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.scss
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.scss
@@ -5,8 +5,8 @@
 .theme-grid-editor__frame {
  aspect-ratio: 16 / 9;
  background:
-    radial-gradient(circle at top, hsl(var(--primary) / 0.08), transparent 45%),
-    linear-gradient(180deg, hsl(var(--background) / 0.96), hsl(var(--card) / 0.98));
+    radial-gradient(circle at top, hsl(var(--primary) / 0.05), transparent 45%),
+    linear-gradient(180deg, hsl(var(--background) / 0.98), hsl(var(--card) / 0.98));
 }

 .theme-grid-editor__grid {
@@ -27,11 +27,9 @@
 .theme-grid-editor__item-body {
  height: 100%;
  border: 1px solid hsl(var(--border) / 0.8);
-  border-radius: 1rem;
-  background:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--background) / 0.96)),
-    radial-gradient(circle at top right, hsl(var(--primary) / 0.1), transparent 45%);
-  box-shadow: 0 12px 30px rgb(0 0 0 / 10%);
+  border-radius: 0.5rem;
+  background: linear-gradient(180deg, hsl(var(--card) / 0.98), hsl(var(--background) / 0.98));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  cursor: grab;
  padding: 0.9rem;
 }
@@ -42,9 +40,7 @@

 .theme-grid-editor__item--selected .theme-grid-editor__item-body {
  border-color: hsl(var(--primary));
-  box-shadow:
-    0 0 0 1px hsl(var(--primary)),
-    0 14px 34px hsl(var(--primary) / 0.18);
+  box-shadow: 0 0 0 1px hsl(var(--primary));
 }

 .theme-grid-editor__item--disabled .theme-grid-editor__item-body {
@@ -56,9 +52,7 @@
 }

 .theme-grid-editor__item:focus-visible .theme-grid-editor__item-body {
-  box-shadow:
-    0 0 0 2px hsl(var(--primary)),
-    0 14px 34px hsl(var(--primary) / 0.18);
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
 }

 .theme-grid-editor__handle {
@@ -68,12 +62,12 @@
  height: 0.95rem;
  width: 0.95rem;
  border: 0;
-  border-radius: 999px;
+  border-radius: 0.25rem;
  background: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--background));
+  box-shadow: 0 0 0 2px hsl(var(--background));
  cursor: nwse-resize;
 }

 .theme-grid-editor__disabled {
  border: 1px dashed hsl(var(--border));
-}
+}
--- a/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.ts
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-grid-editor.component.ts
@@ -42,37 +42,14 @@ export class ThemeGridEditorComponent {
  readonly itemChanged = output<{ key: string; grid: ThemeGridRect }>();
  readonly itemSelected = output<string>();

-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
-  private dragState: DragState | null = null;
-
  readonly canvasRef = viewChild.required<ElementRef<HTMLElement>>('canvasRef');
  readonly frameStyle = computed(() => ({
    '--theme-grid-columns': `${this.container().columns}`,
    '--theme-grid-rows': `${this.container().rows}`
  }));

-  itemStyle(item: ThemeGridEditorItem): Record<string, string> {
-    const { columns, rows } = this.container();
-
-    return {
-      left: `${(item.grid.x / columns) * 100}%`,
-      top: `${(item.grid.y / rows) * 100}%`,
-      width: `${(item.grid.w / columns) * 100}%`,
-      height: `${(item.grid.h / rows) * 100}%`
-    };
-  }
-
-  selectItem(key: string): void {
-    this.itemSelected.emit(key);
-  }
-
-  startMove(event: PointerEvent, item: ThemeGridEditorItem): void {
-    this.startDrag(event, item, 'move');
-  }
-
-  startResize(event: PointerEvent, item: ThemeGridEditorItem): void {
-    this.startDrag(event, item, 'resize');
-  }
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private dragState: DragState | null = null;

  @HostListener('document:pointermove', ['$event'])
  onPointerMove(event: PointerEvent): void {
@@ -112,6 +89,29 @@ export class ThemeGridEditorComponent {
    this.dragState = null;
  }

+  itemStyle(item: ThemeGridEditorItem): Record<string, string> {
+    const { columns, rows } = this.container();
+
+    return {
+      left: `${(item.grid.x / columns) * 100}%`,
+      top: `${(item.grid.y / rows) * 100}%`,
+      width: `${(item.grid.w / columns) * 100}%`,
+      height: `${(item.grid.h / rows) * 100}%`
+    };
+  }
+
+  selectItem(key: string): void {
+    this.itemSelected.emit(key);
+  }
+
+  startMove(event: PointerEvent, item: ThemeGridEditorItem): void {
+    this.startDrag(event, item, 'move');
+  }
+
+  startResize(event: PointerEvent, item: ThemeGridEditorItem): void {
+    this.startDrag(event, item, 'resize');
+  }
+
  private startDrag(event: PointerEvent, item: ThemeGridEditorItem, mode: DragMode): void {
    if (this.disabled()) {
      return;
--- a/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.html
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.html
@@ -0,0 +1,9 @@
+<div
+  class="theme-json-code-editor"
+  [style.minHeight]="editorMinHeight()"
+>
+  <div
+    #editorHostRef
+    class="theme-json-code-editor__host"
+  ></div>
+</div>
--- a/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.scss
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.scss
@@ -0,0 +1,22 @@
+:host {
+  display: block;
+  min-height: 0;
+}
+
+.theme-json-code-editor {
+  overflow: hidden;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  background: linear-gradient(180deg, #111827, #0f172a);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
+}
+
+.theme-json-code-editor:focus-within {
+  box-shadow:
+    inset 0 0 0 1px rgb(125 211 252 / 0.35),
+    0 0 0 1px rgb(56 189 248 / 0.25);
+}
+
+.theme-json-code-editor__host {
+  min-height: inherit;
+}
--- a/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.ts
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-json-code-editor.component.ts
@@ -84,49 +84,10 @@ const THEME_JSON_EDITOR_THEME = EditorView.theme({
@Component({
  selector: 'app-theme-json-code-editor',
  standalone: true,
-  template: `
-    <div
-      class="theme-json-code-editor"
-      [style.minHeight]="editorMinHeight()"
-    >
-      <div
-        #editorHostRef
-        class="theme-json-code-editor__host"
-      ></div>
-    </div>
-  `,
-  styles: `
-    :host {
-      display: block;
-      min-height: 0;
-    }
-
-    .theme-json-code-editor {
-      overflow: hidden;
-      border: 1px solid #2f405c;
-      border-radius: 1rem;
-      background:
-        radial-gradient(circle at top right, rgb(96 165 250 / 0.16), transparent 34%),
-        linear-gradient(180deg, #172033, #0e1625);
-      box-shadow:
-        inset 0 0 0 1px rgb(125 211 252 / 0.08),
-        0 0 0 1px rgb(15 23 42 / 0.16);
-    }
-
-    .theme-json-code-editor:focus-within {
-      box-shadow:
-        inset 0 0 0 1px rgb(125 211 252 / 0.5),
-        0 0 0 3px rgb(14 165 233 / 0.18);
-    }
-
-    .theme-json-code-editor__host {
-      min-height: inherit;
-    }
-  `
+  templateUrl: './theme-json-code-editor.component.html',
+  styleUrl: './theme-json-code-editor.component.scss'
 })
 export class ThemeJsonCodeEditorComponent implements OnDestroy {
-  private readonly zone = inject(NgZone);
-
  readonly editorHostRef = viewChild<ElementRef<HTMLDivElement>>('editorHostRef');
  readonly value = input.required<string>();
  readonly fullscreen = input(false);
@@ -134,6 +95,8 @@ export class ThemeJsonCodeEditorComponent implements OnDestroy {

  readonly editorMinHeight = computed(() => this.fullscreen() ? 'max(34rem, calc(100vh - 15rem))' : '28rem');

+  private readonly zone = inject(NgZone);
+
  private editorView: EditorView | null = null;
  private isApplyingExternalValue = false;

--- a/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.html
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.html
@@ -1,5 +1,5 @@
 <div
-  class="theme-settings flex min-h-0 w-full flex-col space-y-4"
+  class="theme-settings flex min-h-0 w-full flex-col space-y-3"
  [class.min-h-full]="isFullscreen()"
  [class.p-4]="isFullscreen()"
  [class.theme-settings--fullscreen]="isFullscreen()"
@@ -15,21 +15,21 @@
        <button
          type="button"
          (click)="startPicker()"
-          class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+          class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          Pick UI Element
        </button>
        <button
          type="button"
          (click)="formatDraft()"
-          class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+          class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          Format JSON
        </button>
        <button
          type="button"
          (click)="copyLlmThemeGuide()"
-          class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
+          class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          Copy LLM Guide
        </button>
@@ -37,14 +37,14 @@
          type="button"
          (click)="applyDraft()"
          [disabled]="!draftIsValid()"
-          class="inline-flex items-center rounded-full bg-primary px-4 py-1.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
+          class="inline-flex items-center rounded-md bg-primary px-4 py-1.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
        >
          Apply Draft
        </button>
        <button
          type="button"
          (click)="restoreDefaultTheme()"
-          class="inline-flex items-center rounded-full border border-destructive/25 bg-destructive/10 px-3 py-1.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
+          class="inline-flex items-center rounded-md border border-destructive/25 bg-destructive/10 px-3 py-1.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
        >
          Restore Default
        </button>
@@ -60,8 +60,14 @@
    <div class="theme-settings__hero-grid mt-4">
      <div class="theme-settings__hero-stat">
        <div class="theme-settings__workspace-selector theme-settings__workspace-selector--compact">
-          <label class="theme-settings__workspace-selector-label">Workspace</label>
+          <label
+            for="theme-studio-workspace-select"
+            class="theme-settings__workspace-selector-label"
+          >
+            Workspace
+          </label>
          <select
+            id="theme-studio-workspace-select"
            class="theme-settings__workspace-select"
            [value]="activeWorkspace()"
            (change)="onWorkspaceSelect($event)"
@@ -89,13 +95,13 @@
    </div>

    @if (statusMessage()) {
-      <div class="mt-3 rounded-2xl border border-primary/20 bg-primary/10 px-4 py-3 text-sm text-primary">
+      <div class="mt-3 rounded-lg border border-primary/20 bg-primary/10 px-4 py-3 text-sm text-primary">
        {{ statusMessage() }}
      </div>
    }

    @if (!draftIsValid()) {
-      <div class="mt-3 rounded-2xl border border-destructive/30 bg-destructive/8 p-4">
+      <div class="mt-3 rounded-lg border border-destructive/30 bg-destructive/10 p-4">
        <p class="text-sm font-semibold text-destructive">The draft is invalid. The last working theme is still active.</p>
        <ul class="mt-2 space-y-1 text-sm text-destructive/90">
          @for (error of draftErrors(); track error) {
@@ -122,7 +128,7 @@
              type="button"
              (click)="saveDraftAsNewTheme()"
              [disabled]="!draftIsValid() || savedThemesBusy()"
-              class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Save New
            </button>
@@ -130,7 +136,7 @@
              type="button"
              (click)="saveDraftToSelectedTheme()"
              [disabled]="!draftIsValid() || !selectedSavedTheme() || savedThemesBusy()"
-              class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Save Selected
            </button>
@@ -138,7 +144,7 @@
              type="button"
              (click)="useSelectedSavedTheme()"
              [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
-              class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Use
            </button>
@@ -146,7 +152,7 @@
              type="button"
              (click)="editSelectedSavedTheme()"
              [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
-              class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Edit
            </button>
@@ -154,7 +160,7 @@
              type="button"
              (click)="removeSelectedSavedTheme()"
              [disabled]="!selectedSavedTheme() || (savedThemesBusy() && savedThemes().length === 0)"
-              class="rounded-full border border-destructive/25 bg-destructive/10 px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/15 disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-destructive/25 bg-destructive/10 px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/15 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Remove
            </button>
@@ -162,7 +168,7 @@
              type="button"
              (click)="refreshSavedThemes()"
              [disabled]="savedThemesBusy() && savedThemes().length === 0"
-              class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+              class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
            >
              Refresh
            </button>
@@ -205,7 +211,7 @@
              }
            </div>
          } @else {
-            <div class="mt-4 rounded-2xl border border-dashed border-border bg-background/60 px-4 py-5 text-sm text-muted-foreground">
+            <div class="mt-4 rounded-lg border border-dashed border-border bg-secondary/10 px-4 py-5 text-sm text-muted-foreground">
              Save the current draft to create your first reusable Electron theme.
            </div>
          }
@@ -252,7 +258,7 @@
              <span class="mt-2 block text-xs leading-5 text-muted-foreground">{{ entry.description }}</span>
            </button>
          } @empty {
-            <div class="rounded-2xl border border-dashed border-border bg-background/60 px-4 py-5 text-sm text-muted-foreground">
+            <div class="rounded-lg border border-dashed border-border bg-secondary/10 px-4 py-5 text-sm text-muted-foreground">
              No registered theme keys match this filter.
            </div>
          }
@@ -283,7 +289,7 @@
              <button
                type="button"
                (click)="jumpToStyles()"
-                class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
              >
                Open styles in JSON
              </button>
@@ -291,7 +297,7 @@
                <button
                  type="button"
                  (click)="jumpToLayout()"
-                  class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                  class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                >
                  Open layout in JSON
                </button>
@@ -315,10 +321,10 @@
            <p class="text-sm font-semibold text-foreground">Theme JSON</p>

            <div class="flex flex-wrap gap-2 text-[11px] font-medium text-muted-foreground">
-              <span class="rounded-full bg-secondary px-2.5 py-1">{{ draftLineCount() }} lines</span>
-              <span class="rounded-full bg-secondary px-2.5 py-1">{{ draftCharacterCount() }} chars</span>
-              <span class="rounded-full bg-secondary px-2.5 py-1">{{ draftErrorCount() }} errors</span>
-              <span class="rounded-full bg-slate-900 px-2.5 py-1 text-slate-200">IDE editor</span>
+              <span class="rounded-md bg-secondary px-2.5 py-1">{{ draftLineCount() }} lines</span>
+              <span class="rounded-md bg-secondary px-2.5 py-1">{{ draftCharacterCount() }} chars</span>
+              <span class="rounded-md bg-secondary px-2.5 py-1">{{ draftErrorCount() }} errors</span>
+              <span class="rounded-md bg-slate-900 px-2.5 py-1 text-slate-200">IDE editor</span>
            </div>
          </div>

@@ -334,7 +340,7 @@
      }

      @if (activeWorkspace() === 'inspector') {
-        <div class="space-y-6">
+        <div class="space-y-4">
          <section class="theme-studio-card p-4">
            <div class="flex items-center justify-between gap-3">
              <p class="text-sm font-semibold text-foreground">Selection</p>
@@ -342,14 +348,14 @@
              <button
                type="button"
                (click)="startPicker()"
-                class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
              >
                Pick live element
              </button>
            </div>

            @if (selectedElement()) {
-              <div class="mt-4 rounded-2xl border border-border/80 bg-background/65 p-4">
+              <div class="mt-4 rounded-lg border border-border/80 bg-secondary/20 p-4">
                <div class="flex items-center gap-2">
                  <p class="text-base font-semibold text-foreground">{{ selectedElement()!.label }}</p>
                  <span class="rounded-full bg-secondary px-2 py-0.5 font-mono text-[11px] text-muted-foreground">{{ selectedElement()!.key }}</span>
@@ -370,7 +376,7 @@
                type="button"
                (click)="addStarterAnimation()"
                [disabled]="!draftIsValid()"
-                class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+                class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
              >
                Add fade animation
              </button>
@@ -382,7 +388,7 @@
                  type="button"
                  (click)="applySuggestedProperty(field.key)"
                  [disabled]="!draftIsValid()"
-                  class="rounded-2xl border border-border/80 bg-background/65 p-3 text-left transition-colors hover:bg-secondary/45 disabled:cursor-not-allowed disabled:opacity-60"
+                  class="rounded-lg border border-border/80 bg-secondary/20 p-3 text-left transition-colors hover:bg-secondary/40 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  <div class="flex items-start justify-between gap-3">
                    <div>
@@ -391,7 +397,7 @@
                    </div>
                    <span class="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-muted-foreground">{{ field.type }}</span>
                  </div>
-                  <div class="mt-3 inline-flex rounded-full bg-primary/10 px-2.5 py-1 font-mono text-[11px] text-primary">
+                  <div class="mt-3 inline-flex rounded-md bg-primary/10 px-2.5 py-1 font-mono text-[11px] text-primary">
                    {{ field.example }}
                  </div>
                </button>
@@ -399,7 +405,7 @@
            </div>
          </section>

-          <section class="theme-studio-card p-5">
+          <section class="theme-studio-card p-4">
            <p class="text-sm font-semibold text-foreground">Animation Keys</p>

            @if (animationKeys().length > 0) {
@@ -408,22 +414,22 @@
                  <button
                    type="button"
                    (click)="jumpToAnimation(animationKey)"
-                    class="rounded-full border border-border bg-background px-3 py-1.5 font-mono text-[11px] text-foreground transition-colors hover:bg-secondary"
+                    class="rounded-md border border-border bg-secondary px-3 py-1.5 font-mono text-[11px] text-foreground transition-colors hover:bg-secondary/80"
                  >
                    {{ animationKey }}
                  </button>
                }
              </div>
            } @else {
-              <div class="mt-4 rounded-2xl border border-dashed border-border bg-background/60 px-4 py-5 text-sm text-muted-foreground">
+              <div class="mt-4 rounded-lg border border-dashed border-border bg-secondary/10 px-4 py-5 text-sm text-muted-foreground">
                No custom animation keys yet.
              </div>
            }

-            <div class="mt-4 rounded-2xl border border-border/80 bg-background/65 p-4">
+            <div class="mt-4 rounded-lg border border-border/80 bg-secondary/20 p-4">
              <div class="flex flex-wrap gap-2">
                @for (field of THEME_ANIMATION_FIELDS; track field.key) {
-                  <span class="rounded-full bg-secondary px-2.5 py-1 font-mono text-[11px] text-foreground/80">{{ field.key }}</span>
+                  <span class="rounded-md bg-secondary px-2.5 py-1 font-mono text-[11px] text-foreground/80">{{ field.key }}</span>
                }
              </div>
            </div>
@@ -441,7 +447,7 @@
                <button
                  type="button"
                  (click)="selectContainer(container.key)"
-                  class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
+                  class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                  [class.bg-primary/10]="selectedContainer() === container.key"
                  [class.border-primary/40]="selectedContainer() === container.key"
                >
@@ -453,7 +459,7 @@
                type="button"
                (click)="resetSelectedContainer()"
                [disabled]="!draftIsValid()"
-                class="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+                class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
              >
                Reset Container
              </button>
@@ -473,19 +479,19 @@

          @if (selectedElementGrid()) {
            <div class="mt-4 grid gap-3 sm:grid-cols-4">
-              <div class="rounded-2xl border border-border/80 bg-background/65 p-3">
+              <div class="rounded-lg border border-border/80 bg-secondary/20 p-3">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">x</p>
                <p class="mt-2 font-mono text-lg font-semibold text-foreground">{{ selectedElementGrid()!.grid.x }}</p>
              </div>
-              <div class="rounded-2xl border border-border/80 bg-background/65 p-3">
+              <div class="rounded-lg border border-border/80 bg-secondary/20 p-3">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">y</p>
                <p class="mt-2 font-mono text-lg font-semibold text-foreground">{{ selectedElementGrid()!.grid.y }}</p>
              </div>
-              <div class="rounded-2xl border border-border/80 bg-background/65 p-3">
+              <div class="rounded-lg border border-border/80 bg-secondary/20 p-3">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">w</p>
                <p class="mt-2 font-mono text-lg font-semibold text-foreground">{{ selectedElementGrid()!.grid.w }}</p>
              </div>
-              <div class="rounded-2xl border border-border/80 bg-background/65 p-3">
+              <div class="rounded-lg border border-border/80 bg-secondary/20 p-3">
                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">h</p>
                <p class="mt-2 font-mono text-lg font-semibold text-foreground">{{ selectedElementGrid()!.grid.h }}</p>
              </div>
--- a/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.scss
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.scss
@@ -29,11 +29,11 @@
 .theme-settings__workspace-select {
  width: 100%;
  border: 1px solid hsl(var(--border));
-  border-radius: 0.85rem;
-  background: hsl(var(--background) / 0.82);
-  padding: 0.65rem 0.8rem;
-  font-size: 0.88rem;
-  font-weight: 600;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary));
+  padding: 0.6rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
  color: hsl(var(--foreground));
  outline: none;
  transition:
@@ -44,7 +44,7 @@

 .theme-settings__workspace-select:focus {
  border-color: hsl(var(--primary) / 0.4);
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2);
 }

 .theme-settings__workspace-selector--compact .theme-settings__workspace-select {
@@ -68,20 +68,19 @@
 .theme-settings__saved-theme-list {
  display: flex;
  flex-direction: column;
-  gap: 0.7rem;
+  gap: 0.5rem;
 }

 .theme-settings__saved-theme-button {
  width: 100%;
  border: 1px solid hsl(var(--border) / 0.8);
-  border-radius: 1rem;
-  background: hsl(var(--background) / 0.65);
-  padding: 0.85rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary) / 0.25);
+  padding: 0.75rem;
  text-align: left;
  transition:
    border-color 160ms ease,
-    background-color 160ms ease,
-    transform 160ms ease;
+    background-color 160ms ease;
 }

 .theme-settings__saved-theme-button:hover {
@@ -89,7 +88,7 @@
 }

 .theme-settings__saved-theme-button--active {
-  border-color: hsl(var(--primary) / 0.38);
+  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
 }

@@ -114,4 +113,4 @@
  display: block;
  min-height: 0;
  flex: 1 1 auto;
-}
+}
--- a/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.ts
+++ b/toju-app/src/app/domains/theme/feature/settings/theme-settings.component.ts
@@ -44,12 +44,12 @@ type ThemeStudioWorkspace = 'editor' | 'inspector' | 'layout';
  styleUrl: './theme-settings.component.scss'
 })
 export class ThemeSettingsComponent {
-  private readonly modal = inject(SettingsModalService);
-  private readonly theme = inject(ThemeService);
-  private readonly themeLibrary = inject(ThemeLibraryService);
-  private readonly registry = inject(ThemeRegistryService);
-  private readonly picker = inject(ElementPickerService);
-  private readonly layoutSync = inject(LayoutSyncService);
+  readonly modal = inject(SettingsModalService);
+  readonly theme = inject(ThemeService);
+  readonly themeLibrary = inject(ThemeLibraryService);
+  readonly registry = inject(ThemeRegistryService);
+  readonly picker = inject(ElementPickerService);
+  readonly layoutSync = inject(LayoutSyncService);

  readonly editorRef = viewChild<ThemeJsonCodeEditorComponent>('jsonEditorRef');

--- a/toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.html
+++ b/toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.html
@@ -0,0 +1,29 @@
+@if (picker.isPicking()) {
+  <div class="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4">
+    <div class="pointer-events-auto max-w-xl rounded-lg border border-border bg-card px-4 py-3 shadow-lg backdrop-blur">
+      <div class="flex flex-wrap items-center gap-3">
+        <div class="min-w-0 flex-1">
+          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Theme Picker Active</p>
+          <p class="mt-1 text-sm text-foreground">Click a highlighted area to inspect its theme key.</p>
+          <p class="mt-1 text-xs text-muted-foreground">
+            Hovering:
+            <span class="font-medium text-foreground">{{ hoveredEntry()?.label || 'Move over a themeable region' }}</span>
+            @if (hoveredEntry()) {
+              <span class="ml-1 rounded-md bg-secondary px-2 py-0.5 font-mono text-[11px] text-foreground/80">
+                {{ hoveredEntry()!.key }}
+              </span>
+            }
+          </p>
+        </div>
+
+        <button
+          type="button"
+          (click)="cancel()"
+          class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+}
--- a/toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.ts
+++ b/toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.ts
@@ -12,41 +12,11 @@ import { ThemeRegistryService } from '../application/theme-registry.service';
  selector: 'app-theme-picker-overlay',
  standalone: true,
  imports: [CommonModule],
-  template: `
-    @if (picker.isPicking()) {
-      <div class="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4">
-        <div class="pointer-events-auto max-w-xl rounded-2xl border border-border bg-card/95 px-4 py-3 shadow-2xl backdrop-blur-xl">
-          <div class="flex flex-wrap items-center gap-3">
-            <div class="min-w-0 flex-1">
-              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Theme Picker Active</p>
-              <p class="mt-1 text-sm text-foreground">
-                Click a highlighted area to inspect its theme key.
-              </p>
-              <p class="mt-1 text-xs text-muted-foreground">
-                Hovering:
-                <span class="font-medium text-foreground">{{ hoveredEntry()?.label || 'Move over a themeable region' }}</span>
-                @if (hoveredEntry()) {
-                  <span class="ml-1 rounded-full bg-secondary px-2 py-0.5 font-mono text-[11px] text-foreground/80">{{ hoveredEntry()!.key }}</span>
-                }
-              </p>
-            </div>
-
-            <button
-              type="button"
-              (click)="cancel()"
-              class="inline-flex items-center rounded-full border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      </div>
-    }
-  `
+  templateUrl: './theme-picker-overlay.component.html'
 })
 export class ThemePickerOverlayComponent {
  readonly picker = inject(ElementPickerService);
-  private readonly registry = inject(ThemeRegistryService);
+  readonly registry = inject(ThemeRegistryService);

  readonly hoveredEntry = computed(() => {
    return this.registry.getDefinition(this.picker.hoveredKey());
--- a/toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html
+++ b/toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html
@@ -42,7 +42,7 @@
      <button
        type="button"
        (click)="toggleSettings()"
-        class="rounded-md p-2 transition-colors hover:bg-secondary"
+        class="grid h-8 w-8 place-items-center rounded-md transition-colors hover:bg-secondary"
      >
        <ng-icon
          name="lucideSettings"
--- a/toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.html
+++ b/toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.html
@@ -39,7 +39,7 @@
          @if (canManageChannels()) {
            <button
              (click)="createChannel('text')"
-              class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+              class="grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              title="Create Text Channel"
            >
              <ng-icon
@@ -98,7 +98,7 @@
          @if (canManageChannels()) {
            <button
              (click)="createChannel('voice')"
-              class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+              class="grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
              title="Create Voice Channel"
            >
              <ng-icon
--- a/toju-app/src/app/features/settings/settings-modal/bans-settings/bans-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/bans-settings/bans-settings.component.html
@@ -1,5 +1,5 @@
@if (server()) {
-  <div class="space-y-3 max-w-xl">
+  <div class="max-w-2xl space-y-3">
    @if (bannedUsers().length === 0) {
      <p class="text-sm text-muted-foreground text-center py-8">No banned users</p>
    } @else {
@@ -25,7 +25,7 @@
            <button
              type="button"
              (click)="unbanUser(ban)"
-              class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+              class="grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              <ng-icon
                name="lucideX"
--- a/toju-app/src/app/features/settings/settings-modal/debugging-settings/debugging-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/debugging-settings/debugging-settings.component.html
@@ -1,8 +1,8 @@
-<div class="max-w-3xl space-y-6">
-  <section class="rounded-xl border border-border bg-card/40 p-5">
+<div class="max-w-4xl space-y-5">
+  <section class="rounded-lg border border-border bg-card/40 p-5">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div class="flex items-start gap-3">
-        <div class="rounded-xl bg-primary/10 p-2 text-primary">
+        <div class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
          <ng-icon
            name="lucideBug"
            class="h-5 w-5"
@@ -32,7 +32,7 @@
  </section>

  <section class="grid gap-3 sm:grid-cols-3">
-    <div class="rounded-xl border border-border bg-secondary/20 p-4">
+    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideClock3"
@@ -44,7 +44,7 @@
      <p class="mt-1 text-xs text-muted-foreground">Last update: {{ lastUpdatedLabel() }}</p>
    </div>

-    <div class="rounded-xl border border-border bg-secondary/20 p-4">
+    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideCircleAlert"
@@ -56,7 +56,7 @@
      <p class="mt-1 text-xs text-muted-foreground">Unhandled runtime failures and rejected promises.</p>
    </div>

-    <div class="rounded-xl border border-border bg-secondary/20 p-4">
+    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideTriangleAlert"
@@ -69,7 +69,7 @@
    </div>
  </section>

-  <section class="rounded-xl border border-border bg-card/40 p-5">
+  <section class="rounded-lg border border-border bg-card/40 p-5">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h5 class="text-sm font-semibold text-foreground">Floating debug console</h5>
--- a/toju-app/src/app/features/settings/settings-modal/general-settings/general-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/general-settings/general-settings.component.html
@@ -1,4 +1,4 @@
-<div class="space-y-6 max-w-xl">
+<div class="max-w-3xl space-y-5">
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
--- a/toju-app/src/app/features/settings/settings-modal/members-settings/members-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/members-settings/members-settings.component.html
@@ -26,7 +26,7 @@
              @if (canKickMembers(member)) {
                <button
                  (click)="kickMember(member)"
-                  class="rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
+                  class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
                  title="Kick"
                >
                  <ng-icon
@@ -38,7 +38,7 @@
              @if (canBanMembers(member)) {
                <button
                  (click)="banMember(member)"
-                  class="rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
+                  class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
                  title="Ban"
                >
                  <ng-icon
--- a/toju-app/src/app/features/settings/settings-modal/network-settings/network-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/network-settings/network-settings.component.html
@@ -1,4 +1,4 @@
-<div class="space-y-6 max-w-xl">
+<div class="max-w-3xl space-y-5">
  <!-- Server Endpoints -->
  <section>
    <div class="flex items-center justify-between mb-3">
@@ -77,7 +77,7 @@
              <button
                type="button"
                (click)="setActiveServer(server.id)"
-                class="p-1.5 hover:bg-secondary rounded-lg transition-colors"
+                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-secondary"
                title="Activate"
              >
                <ng-icon
@@ -90,7 +90,7 @@
              <button
                type="button"
                (click)="deactivateServer(server.id)"
-                class="p-1.5 hover:bg-secondary rounded-lg transition-colors"
+                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-secondary"
                title="Deactivate"
              >
                <ng-icon
@@ -103,7 +103,7 @@
              <button
                type="button"
                (click)="removeServer(server.id)"
-                class="p-1.5 hover:bg-destructive/10 rounded-lg transition-colors"
+                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-destructive/10"
                title="Remove"
              >
                <ng-icon
@@ -139,7 +139,7 @@
          type="button"
          (click)="addServer()"
          [disabled]="!newServerName || !newServerUrl"
-          class="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
+          class="grid h-9 w-9 place-items-center self-end rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <ng-icon
            name="lucidePlus"
--- a/toju-app/src/app/features/settings/settings-modal/server-settings/server-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/server-settings/server-settings.component.html
@@ -1,5 +1,5 @@
@if (serverData()) {
-  <div class="space-y-5 max-w-xl">
+  <div class="max-w-2xl space-y-5">
    <section>
      <h4 class="text-sm font-semibold text-foreground mb-3">Room Settings</h4>
      @if (!isAdmin()) {
@@ -49,7 +49,7 @@
            <button
              (click)="togglePrivate()"
              type="button"
-              class="p-2 rounded-lg transition-colors"
+              class="grid h-9 w-9 place-items-center rounded-lg transition-colors"
              [class.bg-primary]="isPrivate()"
              [class.text-primary-foreground]="isPrivate()"
              [class.bg-secondary]="!isPrivate()"
--- a/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
@@ -16,8 +16,8 @@
  <!-- Modal -->
  <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
    <div
-      class="pointer-events-auto relative flex w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-card shadow-2xl transition-all duration-200"
-      style="height: min(680px, 85vh)"
+      class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
+      style="height: min(720px, 88vh)"
      [class.scale-100]="animating()"
      [class.opacity-100]="animating()"
      [class.scale-95]="!animating()"
@@ -30,24 +30,25 @@
      tabindex="-1"
    >
      <!-- Side Navigation -->
-      <nav class="flex w-52 flex-shrink-0 flex-col border-r border-border bg-secondary/40">
-        <div class="p-4 border-b border-border">
+      <nav class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card">
+        <div class="border-b border-border px-3 py-3">
          <h2 class="text-lg font-semibold text-foreground">Settings</h2>
        </div>

        <div class="flex-1 overflow-y-auto py-2">
          <!-- Global section -->
-          <p class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider">General</p>
+          <p class="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">General</p>
          @for (page of globalPages; track page.id) {
            <button
              (click)="navigate(page.id)"
              type="button"
-              class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
-              [class.bg-primary/10]="activePage() === page.id"
-              [class.text-primary]="activePage() === page.id"
+              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+              [class.bg-secondary]="activePage() === page.id"
+              [class.text-foreground]="activePage() === page.id"
              [class.font-medium]="activePage() === page.id"
-              [class.text-foreground]="activePage() !== page.id"
-              [class.hover:bg-secondary]="activePage() !== page.id"
+              [class.text-muted-foreground]="activePage() !== page.id"
+              [class.hover:bg-secondary/70]="activePage() !== page.id"
+              [class.hover:text-foreground]="activePage() !== page.id"
            >
              <ng-icon
                [name]="page.icon"
@@ -60,12 +61,12 @@
          <!-- Server section -->
          @if (manageableRooms().length > 0) {
            <div class="mt-3 pt-3 border-t border-border">
-              <p class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider">Server</p>
+              <p class="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Server</p>

              <!-- Server selector -->
              <div class="px-3 pb-2">
                <select
-                  class="w-full px-2 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+                  class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
                  [value]="selectedServerId() || ''"
                  (change)="onServerSelect($event)"
                >
@@ -81,12 +82,13 @@
                  <button
                    (click)="navigate(page.id)"
                    type="button"
-                    class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
-                    [class.bg-primary/10]="activePage() === page.id"
-                    [class.text-primary]="activePage() === page.id"
+                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+                    [class.bg-secondary]="activePage() === page.id"
+                    [class.text-foreground]="activePage() === page.id"
                    [class.font-medium]="activePage() === page.id"
-                    [class.text-foreground]="activePage() !== page.id"
-                    [class.hover:bg-secondary]="activePage() !== page.id"
+                    [class.text-muted-foreground]="activePage() !== page.id"
+                    [class.hover:bg-secondary/70]="activePage() !== page.id"
+                    [class.hover:text-foreground]="activePage() !== page.id"
                  >
                    <ng-icon
                      [name]="page.icon"
@@ -100,15 +102,7 @@
          }
        </div>

-        <div class="mt-auto space-y-3 border-t border-border px-4 py-3">
-          <button
-            type="button"
-            (click)="restoreDefaultTheme()"
-            class="w-full rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-left text-xs font-medium text-destructive transition-colors hover:bg-destructive/15"
-          >
-            Restore default theme
-          </button>
-
+        <div class="mt-auto border-t border-border px-3 py-3">
          <button
            type="button"
            (click)="openThirdPartyLicenses()"
@@ -122,7 +116,7 @@
      <!-- Content -->
      <div class="flex-1 flex flex-col min-w-0">
        <!-- Header -->
-        <div class="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+        <div class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0">
          <h3 class="text-lg font-semibold text-foreground">
            @switch (activePage()) {
              @case ('general') {
@@ -164,7 +158,7 @@
            <button
              (click)="close()"
              type="button"
-              class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              <ng-icon
                name="lucideX"
@@ -175,7 +169,7 @@
        </div>

        <!-- Scrollable Content Area -->
-        <div class="flex-1 overflow-y-auto p-6">
+        <div class="flex-1 overflow-y-auto bg-background px-4 py-4 sm:px-5 sm:py-4">
          @switch (activePage()) {
            @case ('general') {
              <app-general-settings />
@@ -184,70 +178,79 @@
              <app-network-settings />
            }
            @case ('theme') {
-              <div class="mx-auto flex h-full max-w-3xl items-center justify-center">
-                <div class="w-full rounded-[1.5rem] border border-border bg-card/90 p-6 shadow-sm">
-                  <div class="flex flex-wrap items-start justify-between gap-4">
-                    <div>
-                      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
-                      <h4 class="mt-2 text-xl font-semibold text-foreground">{{ activeThemeName() }}</h4>
-                    </div>
-
-                    @if (themeStudioMinimized()) {
-                      <span class="rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Minimized</span>
-                    }
+              <div class="max-w-3xl space-y-5">
+                <div class="flex flex-wrap items-start justify-between gap-4">
+                  <div>
+                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
+                    <h4 class="mt-2 text-lg font-semibold text-foreground">{{ activeThemeName() }}</h4>
+                    <p class="mt-2 max-w-2xl text-sm text-muted-foreground">
+                      Launch Theme Studio to edit the live draft, inspect themeable regions, or switch to a saved theme.
+                    </p>
                  </div>

-                  @if (savedThemesAvailable()) {
-                    <div class="mt-5">
-                      <label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Saved Theme</label>
-
-                      <div class="mt-2 flex flex-wrap gap-2">
-                        <select
-                          class="min-w-[16rem] flex-1 rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-primary/15"
-                          [value]="selectedSavedTheme()?.fileName || ''"
-                          [disabled]="savedThemesBusy() && savedThemes().length === 0"
-                          (change)="onSavedThemeSelect($event)"
-                        >
-                          <option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
-                          @for (savedTheme of savedThemes(); track savedTheme.fileName) {
-                            <option
-                              [value]="savedTheme.fileName"
-                              [disabled]="!savedTheme.isValid"
-                            >
-                              {{ savedTheme.themeName }}
-                            </option>
-                          }
-                        </select>
-
-                        <button
-                          type="button"
-                          (click)="editSelectedSavedTheme()"
-                          [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
-                          class="inline-flex items-center rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
-                        >
-                          Edit In Studio
-                        </button>
-                      </div>
-                    </div>
+                  @if (themeStudioMinimized()) {
+                    <span class="rounded-full bg-primary/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary"
+                      >Minimized</span
+                    >
                  }
+                </div>

-                  <div class="mt-5 flex flex-wrap gap-2">
-                    <button
-                      type="button"
-                      (click)="openThemeStudio()"
-                      class="inline-flex items-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+                @if (savedThemesAvailable()) {
+                  <div class="space-y-2">
+                    <label
+                      for="settings-saved-theme-select"
+                      class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground"
                    >
-                      {{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
-                    </button>
+                      Saved Theme
+                    </label>

-                    <button
-                      type="button"
-                      (click)="restoreDefaultTheme()"
-                      class="inline-flex items-center rounded-full border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
-                    >
-                      Restore Default
-                    </button>
+                    <div class="flex flex-wrap gap-2">
+                      <select
+                        id="settings-saved-theme-select"
+                        class="min-w-[16rem] flex-1 rounded-lg border border-border bg-secondary px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-1 focus:ring-primary"
+                        [value]="selectedSavedTheme()?.fileName || ''"
+                        [disabled]="savedThemesBusy() && savedThemes().length === 0"
+                        (change)="onSavedThemeSelect($event)"
+                      >
+                        <option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
+                        @for (savedTheme of savedThemes(); track savedTheme.fileName) {
+                          <option
+                            [value]="savedTheme.fileName"
+                            [disabled]="!savedTheme.isValid"
+                          >
+                            {{ savedTheme.themeName }}
+                          </option>
+                        }
+                      </select>
+
+                      <button
+                        type="button"
+                        (click)="editSelectedSavedTheme()"
+                        [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
+                        class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        Edit In Studio
+                      </button>
+                    </div>
                  </div>
+                }
+
+                <div class="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    (click)="openThemeStudio()"
+                    class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+                  >
+                    {{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
+                  </button>
+
+                  <button
+                    type="button"
+                    (click)="restoreDefaultTheme()"
+                    class="inline-flex items-center rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
+                  >
+                    Restore Default
+                  </button>
                </div>
              </div>
            }
@@ -304,18 +307,20 @@
          aria-label="Close third-party licenses"
        ></div>

-        <div class="pointer-events-none absolute inset-0 z-[11] flex items-center justify-center p-4 sm:p-6">
-          <div class="pointer-events-auto w-full max-w-2xl max-h-full overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
+        <div class="pointer-events-none absolute inset-0 z-[11] flex justify-center p-4 sm:p-6">
+          <div
+            class="pointer-events-auto flex min-h-0 w-full max-w-2xl self-stretch flex-col overflow-hidden rounded-lg border border-border bg-card shadow-lg"
+          >
            <div class="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
              <div>
                <h4 class="text-base font-semibold text-foreground">Third-party licenses</h4>
-                <p class="mt-1 text-sm text-muted-foreground">License notices for bundled third-party libraries used by the app.</p>
+                <p class="mt-1 text-sm text-muted-foreground">License information for bundled third-party libraries used by the app.</p>
              </div>

              <button
                type="button"
                (click)="closeThirdPartyLicenses()"
-                class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+                class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                aria-label="Close third-party licenses"
              >
                <ng-icon
@@ -325,7 +330,7 @@
              </button>
            </div>

-            <div class="max-h-[min(70vh,42rem)] overflow-y-auto px-5 py-4 space-y-4">
+            <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4 space-y-4">
              @for (license of thirdPartyLicenses; track license.id) {
                <section class="rounded-lg border border-border bg-secondary/20 p-4">
                  <div class="flex items-start justify-between gap-4">
@@ -340,14 +345,32 @@
                      rel="noopener noreferrer"
                      class="text-xs font-medium text-primary hover:underline underline-offset-4"
                    >
-                      Source
+                      View license
                    </a>
                  </div>

-                  <pre
-                    class="mt-4 whitespace-pre-wrap break-words rounded-md bg-background/80 px-3 py-2 text-[11px] leading-5 text-muted-foreground"
-                    >{{ license.text }}</pre
-                  >
+                  <div class="mt-4 rounded-md bg-background/80 px-3 py-3">
+                    <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Packages</p>
+                    <div class="mt-3 flex flex-wrap gap-2">
+                      @for (packageName of license.packages; track packageName) {
+                        <span class="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium leading-4 text-foreground">
+                          {{ packageName }}
+                        </span>
+                      }
+                    </div>
+
+                    @if (license.note) {
+                      <p class="mt-3 text-xs leading-5 text-muted-foreground">{{ license.note }}</p>
+                    }
+
+                    <div class="mt-4">
+                      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">License text</p>
+                      <pre
+                        class="mt-2 whitespace-pre-wrap break-words rounded-md border border-border/70 bg-card px-3 py-3 text-[11px] leading-5 text-muted-foreground"
+                        >{{ license.text }}</pre
+                      >
+                    </div>
+                  </div>
                </section>
              }
            </div>
--- a/toju-app/src/app/features/settings/settings-modal/third-party-licenses.ts
+++ b/toju-app/src/app/features/settings/settings-modal/third-party-licenses.ts
@@ -3,42 +3,345 @@ export interface ThirdPartyLicense {
  name: string;
  licenseName: string;
  sourceUrl: string;
+  packages: readonly string[];
  text: string;
+  note?: string;
 }

+const toLicenseText = (lines: readonly string[]): string => lines.join('\n');
+
+const GROUPED_LICENSE_NOTE = 'Grouped by the license declared in the installed package metadata for the packages below. Some upstream packages include their own copyright notices in addition to this standard license text.';
+
+const MIT_LICENSE_TEXT = toLicenseText([
+  'MIT License',
+  '',
+  'Copyright <YEAR> <COPYRIGHT HOLDER>',
+  '',
+  'Permission is hereby granted, free of charge, to any person obtaining a copy',
+  'of this software and associated documentation files (the "Software"), to deal',
+  'in the Software without restriction, including without limitation the rights',
+  'to use, copy, modify, merge, publish, distribute, sublicense, and/or sell',
+  'copies of the Software, and to permit persons to whom the Software is',
+  'furnished to do so, subject to the following conditions:',
+  '',
+  'The above copyright notice and this permission notice shall be included in all',
+  'copies or substantial portions of the Software.',
+  '',
+  'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR',
+  'IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,',
+  'FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE',
+  'AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER',
+  'LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,',
+  'OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE',
+  'SOFTWARE.'
+]);
+
+const APACHE_LICENSE_TEXT = toLicenseText([
+  'Apache License',
+  'Version 2.0, January 2004',
+  'http://www.apache.org/licenses/',
+  '',
+  'TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION',
+  '',
+  '1. Definitions.',
+  '',
+  '"License" shall mean the terms and conditions for use, reproduction, and distribution as',
+  'defined by Sections 1 through 9 of this document.',
+  '',
+  '"Licensor" shall mean the copyright owner or entity authorized by the copyright owner',
+  'that is granting the License.',
+  '',
+  '"Legal Entity" shall mean the union of the acting entity and all other entities that',
+  'control, are controlled by, or are under common control with that entity. For the',
+  'purposes of this definition, "control" means (i) the power, direct or indirect, to cause',
+  'the direction or management of such entity, whether by contract or otherwise, or (ii)',
+  'ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial',
+  'ownership of such entity.',
+  '',
+  '"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted',
+  'by this License.',
+  '',
+  '"Source" form shall mean the preferred form for making modifications, including but',
+  'not limited to software source code, documentation source, and configuration files.',
+  '',
+  '"Object" form shall mean any form resulting from mechanical transformation or',
+  'translation of a Source form, including but not limited to compiled object code,',
+  'generated documentation, and conversions to other media types.',
+  '',
+  '"Work" shall mean the work of authorship, whether in Source or Object form, made',
+  'available under the License, as indicated by a copyright notice that is included in or',
+  'attached to the Work (an example is provided in the Appendix below).',
+  '',
+  '"Derivative Works" shall mean any work, whether in Source or Object form, that is based',
+  'on (or derived from) the Work and for which the editorial revisions, annotations,',
+  'elaborations, or other modifications represent, as a whole, an original work of',
+  'authorship. For the purposes of this License, Derivative Works shall not include works',
+  'that remain separable from, or merely link (or bind by name) to the interfaces of,',
+  'the Work and Derivative Works thereof.',
+  '',
+  '"Contribution" shall mean any work of authorship, including the original version of the',
+  'Work and any modifications or additions to that Work or Derivative Works thereof, that',
+  'is intentionally submitted to Licensor for inclusion in the Work by the copyright owner',
+  'or by an individual or Legal Entity authorized to submit on behalf of the copyright',
+  'owner. For the purposes of this definition, "submitted" means any form of electronic,',
+  'verbal, or written communication sent to the Licensor or its representatives, including',
+  'but not limited to communication on electronic mailing lists, source code control',
+  'systems, and issue tracking systems that are managed by, or on behalf of, the Licensor',
+  'for the purpose of discussing and improving the Work, but excluding communication that',
+  'is conspicuously marked or otherwise designated in writing by the copyright owner as',
+  '"Not a Contribution."',
+  '',
+  '"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a',
+  'Contribution has been received by Licensor and subsequently incorporated within the',
+  'Work.',
+  '',
+  '2. Grant of Copyright License. Subject to the terms and conditions of this License, each',
+  'Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge,',
+  'royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of,',
+  'publicly display, publicly perform, sublicense, and distribute the Work and such',
+  'Derivative Works in Source or Object form.',
+  '',
+  '3. Grant of Patent License. Subject to the terms and conditions of this License, each',
+  'Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge,',
+  'royalty-free, irrevocable (except as stated in this section) patent license to make,',
+  'have made, use, offer to sell, sell, import, and otherwise transfer the Work, where',
+  'such license applies only to those patent claims licensable by such Contributor that',
+  'are necessarily infringed by their Contribution(s) alone or by combination of their',
+  'Contribution(s) with the Work to which such Contribution(s) was submitted. If You',
+  'institute patent litigation against any entity (including a cross-claim or counterclaim',
+  'in a lawsuit) alleging that the Work or a Contribution incorporated within the Work',
+  'constitutes direct or contributory patent infringement, then any patent licenses',
+  'granted to You under this License for that Work shall terminate as of the date such',
+  'litigation is filed.',
+  '',
+  '4. Redistribution. You may reproduce and distribute copies of the Work or Derivative',
+  'Works thereof in any medium, with or without modifications, and in Source or Object',
+  'form, provided that You meet the following conditions:',
+  '',
+  '   a. You must give any other recipients of the Work or Derivative Works a copy of',
+  '      this License; and',
+  '',
+  '   b. You must cause any modified files to carry prominent notices stating that You',
+  '      changed the files; and',
+  '',
+  '   c. You must retain, in the Source form of any Derivative Works that You distribute,',
+  '      all copyright, patent, trademark, and attribution notices from the Source form',
+  '      of the Work, excluding those notices that do not pertain to any part of the',
+  '      Derivative Works; and',
+  '',
+  '   d. If the Work includes a "NOTICE" text file as part of its distribution, then any',
+  '      Derivative Works that You distribute must include a readable copy of the',
+  '      attribution notices contained within such NOTICE file, excluding those notices',
+  '      that do not pertain to any part of the Derivative Works, in at least one of',
+  '      the following places: within a NOTICE text file distributed as part of the',
+  '      Derivative Works; within the Source form or documentation, if provided along',
+  '      with the Derivative Works; or, within a display generated by the Derivative',
+  '      Works, if and wherever such third-party notices normally appear. The contents',
+  '      of the NOTICE file are for informational purposes only and do not modify the',
+  '      License. You may add Your own attribution notices within Derivative Works',
+  '      that You distribute, alongside or as an addendum to the NOTICE text from the',
+  '      Work, provided that such additional attribution notices cannot be construed',
+  '      as modifying the License.',
+  '',
+  'You may add Your own copyright statement to Your modifications and may provide',
+  'additional or different license terms and conditions for use, reproduction, or',
+  'distribution of Your modifications, or for any such Derivative Works as a whole,',
+  'provided Your use, reproduction, and distribution of the Work otherwise complies with',
+  'the conditions stated in this License.',
+  '',
+  '5. Submission of Contributions. Unless You explicitly state otherwise, any',
+  'Contribution intentionally submitted for inclusion in the Work by You to the Licensor',
+  'shall be under the terms and conditions of this License, without any additional terms',
+  'or conditions. Notwithstanding the above, nothing herein shall supersede or modify',
+  'the terms of any separate license agreement you may have executed with Licensor',
+  'regarding such Contributions.',
+  '',
+  '6. Trademarks. This License does not grant permission to use the trade names,',
+  'trademarks, service marks, or product names of the Licensor, except as required for',
+  'reasonable and customary use in describing the origin of the Work and reproducing the',
+  'content of the NOTICE file.',
+  '',
+  '7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing,',
+  'Licensor provides the Work (and each Contributor provides its Contributions) on an',
+  '"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or',
+  'implied, including, without limitation, any warranties or conditions of TITLE,',
+  'NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are',
+  'solely responsible for determining the appropriateness of using or redistributing the',
+  'Work and assume any risks associated with Your exercise of permissions under this',
+  'License.',
+  '',
+  '8. Limitation of Liability. In no event and under no legal theory, whether in tort',
+  '(including negligence), contract, or otherwise, unless required by applicable law',
+  '(such as deliberate and grossly negligent acts) or agreed to in writing, shall any',
+  'Contributor be liable to You for damages, including any direct, indirect, special,',
+  'incidental, or consequential damages of any character arising as a result of this',
+  'License or out of the use or inability to use the Work (including but not limited to',
+  'damages for loss of goodwill, work stoppage, computer failure or malfunction, or any',
+  'and all other commercial damages or losses), even if such Contributor has been',
+  'advised of the possibility of such damages.',
+  '',
+  '9. Accepting Warranty or Additional Liability. While redistributing the Work or',
+  'Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance',
+  'of support, warranty, indemnity, or other liability obligations and/or rights',
+  'consistent with this License. However, in accepting such obligations, You may act',
+  'only on Your own behalf and on Your sole responsibility, not on behalf of any other',
+  'Contributor, and only if You agree to indemnify, defend, and hold each Contributor',
+  'harmless for any liability incurred by, or claims asserted against, such Contributor',
+  'by reason of your accepting any such warranty or additional liability.',
+  '',
+  'END OF TERMS AND CONDITIONS'
+]);
+
+const WAVESURFER_BSD_LICENSE_TEXT = toLicenseText([
+  'BSD 3-Clause License',
+  '',
+  'Copyright (c) 2012-2023, katspaugh and contributors',
+  'All rights reserved.',
+  '',
+  'Redistribution and use in source and binary forms, with or without modification, are permitted provided',
+  'that the following conditions are met:',
+  '',
+  '* Redistributions of source code must retain the above copyright notice, this list of conditions and',
+  '  the following disclaimer.',
+  '',
+  '* Redistributions in binary form must reproduce the above copyright notice, this list of conditions',
+  '  and the following disclaimer in the documentation and/or other materials provided with the',
+  '  distribution.',
+  '',
+  '* Neither the name of the copyright holder nor the names of its contributors may be used to endorse',
+  '  or promote products derived from this software without specific prior written permission.',
+  '',
+  'THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR',
+  'IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND',
+  'FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR',
+  'CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL',
+  'DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,',
+  'DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER',
+  'IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT',
+  'OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.'
+]);
+
+const ISC_LICENSE_TEXT = toLicenseText([
+  'ISC License',
+  '',
+  'Copyright <YEAR> <OWNER>',
+  '',
+  'Permission to use, copy, modify, and/or distribute this software for any purpose',
+  'with or without fee is hereby granted, provided that the above copyright notice',
+  'and this permission notice appear in all copies.',
+  '',
+  'THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH',
+  'REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND',
+  'FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT,',
+  'OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,',
+  'DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS',
+  'ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS',
+  'SOFTWARE.'
+]);
+
+const ZERO_BSD_LICENSE_TEXT = toLicenseText([
+  'Zero-Clause BSD',
+  '',
+  'Permission to use, copy, modify, and/or distribute this software for any purpose',
+  'with or without fee is hereby granted.',
+  '',
+  'THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH',
+  'REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND',
+  'FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT,',
+  'OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,',
+  'DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS',
+  'ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS',
+  'SOFTWARE.'
+]);
+
 export const THIRD_PARTY_LICENSES: ThirdPartyLicense[] = [
  {
-    id: 'wavesurfer-js',
-    name: 'wavesurfer.js',
+    id: 'mit',
+    name: 'MIT-licensed packages',
+    licenseName: 'MIT License',
+    sourceUrl: 'https://opensource.org/licenses/MIT',
+    packages: [
+      '@angular/common',
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/forms',
+      '@angular/platform-browser',
+      '@angular/router',
+      '@codemirror/commands',
+      '@codemirror/lang-json',
+      '@codemirror/language',
+      '@codemirror/state',
+      '@codemirror/theme-one-dark',
+      '@codemirror/view',
+      'codemirror',
+      '@ng-icons/core',
+      '@ngrx/effects',
+      '@ngrx/entity',
+      '@ngrx/store',
+      '@ngrx/store-devtools',
+      'auto-launch',
+      'clsx',
+      'cytoscape',
+      'electron-updater',
+      'mermaid',
+      'ngx-remark',
+      'prismjs',
+      'remark',
+      'remark-breaks',
+      'remark-gfm',
+      'simple-peer',
+      'sql.js',
+      'typeorm',
+      'uuid'
+    ],
+    text: MIT_LICENSE_TEXT,
+    note: GROUPED_LICENSE_NOTE
+  },
+  {
+    id: 'apache-2-0',
+    name: 'Apache-licensed packages',
+    licenseName: 'Apache License 2.0',
+    sourceUrl: 'https://www.apache.org/licenses/LICENSE-2.0',
+    packages: [
+      'rxjs',
+      '@timephy/rnnoise-wasm',
+      'class-variance-authority',
+      'reflect-metadata'
+    ],
+    text: APACHE_LICENSE_TEXT,
+    note: GROUPED_LICENSE_NOTE
+  },
+  {
+    id: 'bsd-3-clause',
+    name: 'BSD-licensed packages',
    licenseName: 'BSD 3-Clause License',
-    sourceUrl: 'https://github.com/katspaugh/wavesurfer.js/blob/main/LICENSE',
-    text: [
-      'BSD 3-Clause License',
-      '',
-      'Copyright (c) 2012-2023, katspaugh and contributors',
-      'All rights reserved.',
-      '',
-      'Redistribution and use in source and binary forms, with or without modification, are permitted provided',
-      'that the following conditions are met:',
-      '',
-      '* Redistributions of source code must retain the above copyright notice, this list of conditions and',
-      '  the following disclaimer.',
-      '',
-      '* Redistributions in binary form must reproduce the above copyright notice, this list of conditions',
-      '  and the following disclaimer in the documentation and/or other materials provided with the',
-      '  distribution.',
-      '',
-      '* Neither the name of the copyright holder nor the names of its contributors may be used to endorse',
-      '  or promote products derived from this software without specific prior written permission.',
-      '',
-      'THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR',
-      'IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND',
-      'FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR',
-      'CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL',
-      'DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,',
-      'DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER',
-      'IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT',
-      'OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.'
-    ].join('\n')
+    sourceUrl: 'https://opensource.org/licenses/BSD-3-Clause',
+    packages: [
+      'wavesurfer.js'
+    ],
+    text: WAVESURFER_BSD_LICENSE_TEXT,
+    note: 'License text reproduced from the bundled wavesurfer.js package license.'
+  },
+  {
+    id: 'isc',
+    name: 'ISC-licensed packages',
+    licenseName: 'ISC License',
+    sourceUrl: 'https://opensource.org/license/isc-license-txt',
+    packages: [
+      '@ng-icons/lucide'
+    ],
+    text: ISC_LICENSE_TEXT,
+    note: GROUPED_LICENSE_NOTE
+  },
+  {
+    id: '0bsd',
+    name: '0BSD-licensed packages',
+    licenseName: '0BSD License',
+    sourceUrl: 'https://opensource.org/license/0bsd',
+    packages: [
+      'tslib'
+    ],
+    text: ZERO_BSD_LICENSE_TEXT,
+    note: GROUPED_LICENSE_NOTE
  }
 ];
--- a/toju-app/src/app/features/settings/settings-modal/updates-settings/updates-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/updates-settings/updates-settings.component.html
@@ -1,5 +1,5 @@
 <div class="space-y-6">
-  <section class="rounded-xl border border-border bg-card/60 p-5">
+  <section class="rounded-lg border border-border bg-card/60 p-5">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <h4 class="text-base font-semibold text-foreground">Desktop app updates</h4>
@@ -15,27 +15,27 @@
  </section>

  @if (!isElectron) {
-    <section class="rounded-xl border border-border bg-secondary/30 p-5">
+    <section class="rounded-lg border border-border bg-secondary/30 p-5">
      <p class="text-sm text-muted-foreground">Automatic updates are only available in the packaged Electron desktop app.</p>
    </section>
  } @else {
    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-      <div class="rounded-xl border border-border bg-secondary/20 p-4">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Installed</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().currentVersion }}</p>
      </div>

-      <div class="rounded-xl border border-border bg-secondary/20 p-4">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Latest in manifest</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().latestVersion || 'Unknown' }}</p>
      </div>

-      <div class="rounded-xl border border-border bg-secondary/20 p-4">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Target version</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().targetVersion || 'Automatic' }}</p>
      </div>

-      <div class="rounded-xl border border-border bg-secondary/20 p-4">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Last checked</p>
        <p class="mt-2 text-sm font-medium text-foreground">
          {{ state().lastCheckedAt ? (state().lastCheckedAt | date: 'medium') : 'Not checked yet' }}
@@ -43,7 +43,7 @@
      </div>
    </section>

-    <section class="space-y-4 rounded-xl border border-border bg-card/60 p-5">
+    <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
      <div>
        <h5 class="text-sm font-semibold text-foreground">Update policy</h5>
        <p class="mt-1 text-sm text-muted-foreground">
@@ -81,7 +81,7 @@
        </label>
      </div>

-      <div class="rounded-xl border border-border bg-secondary/20 p-4">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-sm font-medium text-foreground">Status</p>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ state().statusMessage || 'Waiting for release information from the active server.' }}
@@ -109,7 +109,7 @@
      </div>
    </section>

-    <section class="space-y-4 rounded-xl border border-border bg-card/60 p-5">
+    <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
      <div>
        <h5 class="text-sm font-semibold text-foreground">Manifest URL priority</h5>
        <p class="mt-1 text-sm text-muted-foreground">
@@ -118,7 +118,7 @@
        </p>
      </div>

-      <div class="rounded-xl border border-border bg-secondary/20 p-4 text-sm text-muted-foreground">
+      <div class="rounded-lg border border-border bg-secondary/20 p-4 text-sm text-muted-foreground">
        <p class="font-medium text-foreground">
          {{ isUsingConnectedServerDefaults() ? 'Using connected server defaults' : 'Using saved manifest URLs' }}
        </p>
@@ -160,7 +160,7 @@
    </section>

    @if (state().serverBlocked) {
-      <section class="rounded-xl border border-red-500/30 bg-red-500/10 p-5">
+      <section class="rounded-lg border border-red-500/30 bg-red-500/10 p-5">
        <h5 class="text-sm font-semibold text-foreground">Server update required</h5>
        <p class="mt-1 text-sm text-muted-foreground">{{ state().serverBlockMessage }}</p>
        <div class="mt-3 grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
@@ -177,7 +177,7 @@
      </section>
    }

-    <section class="rounded-xl border border-border bg-secondary/20 p-4">
+    <section class="rounded-lg border border-border bg-secondary/20 p-4">
      <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Resolved manifest URL</p>
      <p class="mt-2 break-all text-sm text-muted-foreground">{{ state().manifestUrl || 'No working manifest URL has been resolved yet.' }}</p>
    </section>
--- a/toju-app/src/app/features/settings/settings-modal/voice-settings/voice-settings.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/voice-settings/voice-settings.component.html
@@ -1,4 +1,4 @@
-<div class="space-y-6 max-w-xl">
+<div class="max-w-3xl space-y-5">
  <!-- Devices -->
  <section>
    <div class="flex items-center gap-2 mb-3">
--- a/toju-app/src/app/features/settings/settings.component.html
+++ b/toju-app/src/app/features/settings/settings.component.html
@@ -3,7 +3,7 @@
    <button
      type="button"
      (click)="goBack()"
-      class="p-2 hover:bg-secondary rounded-lg transition-colors"
+      class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
      title="Go back"
    >
      <ng-icon
@@ -102,7 +102,7 @@
              <button
                type="button"
                (click)="setActiveServer(server.id)"
-                class="p-2 hover:bg-secondary rounded-lg transition-colors"
+                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
                title="Activate"
              >
                <ng-icon
@@ -115,7 +115,7 @@
              <button
                type="button"
                (click)="deactivateServer(server.id)"
-                class="p-2 hover:bg-secondary rounded-lg transition-colors"
+                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
                title="Deactivate"
              >
                <ng-icon
@@ -128,7 +128,7 @@
              <button
                type="button"
                (click)="removeServer(server.id)"
-                class="p-2 hover:bg-destructive/10 rounded-lg transition-colors"
+                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-destructive/10"
                title="Remove server"
              >
                <ng-icon
@@ -164,7 +164,7 @@
          type="button"
          (click)="addServer()"
          [disabled]="!newServerName || !newServerUrl"
-          class="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
+          class="grid h-10 w-10 place-items-center self-end rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <ng-icon
            name="lucidePlus"
--- a/toju-app/src/app/store/rooms/room-members.helpers.ts
+++ b/toju-app/src/app/store/rooms/room-members.helpers.ts
@@ -21,7 +21,11 @@ function normalizeRoleIds(roleIds: readonly string[] | undefined): string[] | un
    return undefined;
  }

-  const normalized = Array.from(new Set(roleIds.filter((roleId): roleId is string => typeof roleId === 'string' && roleId.trim().length > 0).map((roleId) => roleId.trim())));
+  const normalized = Array.from(new Set(
+    roleIds
+      .filter((roleId): roleId is string => typeof roleId === 'string' && roleId.trim().length > 0)
+      .map((roleId) => roleId.trim())
+  ));

  return normalized.length > 0 ? normalized : undefined;
 }
--- a/toju-app/src/styles.scss
+++ b/toju-app/src/styles.scss
@@ -32,7 +32,9 @@

  body {
    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
  }
 }

@@ -98,9 +100,9 @@

 .theme-settings__workspace {
  display: grid;
-  gap: 1.5rem;
-  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
-  align-items: start;
+  gap: 1rem;
+  grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
+  align-items: stretch;
  min-height: 0;
 }

@@ -110,7 +112,7 @@
  display: flex;
  min-height: 0;
  flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }

 .theme-settings__main {
@@ -118,12 +120,12 @@
  min-width: 0;
  min-height: 0;
  flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }

 .theme-settings--fullscreen .theme-settings__workspace {
-  gap: 0.875rem;
-  grid-template-columns: minmax(15.5rem, 17rem) minmax(0, 1fr);
+  gap: 0.75rem;
+  grid-template-columns: minmax(15rem, 16.5rem) minmax(0, 1fr);
  align-items: stretch;
 }

@@ -171,17 +173,17 @@
 }

 .theme-settings--fullscreen .theme-studio-card {
-  border-radius: 1rem;
-  box-shadow: 0 10px 24px rgb(15 23 42 / 0.08);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
 }

 .theme-settings--fullscreen .theme-settings__hero-grid {
-  gap: 0.55rem;
+  gap: 0.5rem;
 }

 .theme-settings--fullscreen .theme-settings__hero-stat {
-  border-radius: 0.85rem;
-  padding: 0.7rem 0.85rem;
+  border-radius: 0.5rem;
+  padding: 0.65rem 0.75rem;
 }

 .theme-settings--fullscreen .theme-settings__hero-label {
@@ -190,17 +192,17 @@

 .theme-settings--fullscreen .theme-settings__hero-value {
  margin-top: 0.3rem;
-  font-size: 0.92rem;
+  font-size: 0.9rem;
 }

 .theme-settings--fullscreen .theme-settings__workspace-tab,
 .theme-settings--fullscreen .theme-settings__entry-button {
-  border-radius: 0.85rem;
+  border-radius: 0.5rem;
  padding: 0.72rem 0.8rem;
 }

 .theme-settings--fullscreen .theme-settings__search-input {
-  border-radius: 0.85rem;
+  border-radius: 0.5rem;
  padding: 0.72rem 0.85rem;
 }

@@ -212,24 +214,22 @@

 .theme-studio-card {
  border: 1px solid hsl(var(--border));
-  border-radius: 1.5rem;
-  background:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--background) / 0.96)),
-    radial-gradient(circle at top right, hsl(var(--primary) / 0.08), transparent 45%);
-  box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
+  border-radius: 0.5rem;
+  background: hsl(var(--card));
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
 }

 .theme-settings__hero-grid {
  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.5rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .theme-settings__hero-stat {
  border: 1px solid hsl(var(--border));
-  border-radius: 1rem;
-  background: hsl(var(--background) / 0.72);
-  padding: 0.9rem 1rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary) / 0.3);
+  padding: 0.75rem 0.875rem;
 }

 .theme-settings__hero-label {
@@ -243,8 +243,8 @@

 .theme-settings__hero-value {
  display: block;
-  margin-top: 0.45rem;
-  font-size: 0.98rem;
+  margin-top: 0.35rem;
+  font-size: 0.95rem;
  color: hsl(var(--foreground));
 }

@@ -252,26 +252,22 @@
  display: block;
  width: 100%;
  border: 1px solid hsl(var(--border));
-  border-radius: 1rem;
-  background: hsl(var(--background) / 0.72);
-  padding: 0.85rem 0.95rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary) / 0.25);
+  padding: 0.75rem 0.875rem;
  text-align: left;
  transition:
    background-color 160ms ease,
-    border-color 160ms ease,
-    transform 160ms ease,
-    box-shadow 160ms ease;
+    border-color 160ms ease;
 }

 .theme-settings__workspace-tab:hover {
-  background: hsl(var(--secondary) / 0.78);
-  transform: translateY(-1px);
+  background: hsl(var(--secondary) / 0.45);
 }

 .theme-settings__workspace-tab--active {
-  border-color: hsl(var(--primary) / 0.4);
+  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
-  box-shadow: 0 8px 22px hsl(var(--primary) / 0.12);
 }

 .theme-settings__workspace-tab-title {
@@ -291,10 +287,10 @@

 .theme-settings__search-input {
  border: 1px solid hsl(var(--border));
-  border-radius: 0.95rem;
-  background: hsl(var(--background) / 0.82);
-  padding: 0.8rem 0.95rem;
-  font-size: 0.9rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary));
+  padding: 0.65rem 0.8rem;
+  font-size: 0.875rem;
  color: hsl(var(--foreground));
  outline: none;
  transition:
@@ -305,14 +301,14 @@

 .theme-settings__search-input:focus {
  border-color: hsl(var(--primary) / 0.4);
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2);
 }

 .theme-settings__entry-list {
  display: flex;
  max-height: min(60vh, 34rem);
  flex-direction: column;
-  gap: 0.7rem;
+  gap: 0.5rem;
  overflow: auto;
  padding-right: 0.15rem;
 }
@@ -321,26 +317,22 @@
  display: block;
  width: 100%;
  border: 1px solid hsl(var(--border));
-  border-radius: 1rem;
-  background: hsl(var(--background) / 0.72);
-  padding: 0.9rem 0.95rem;
+  border-radius: 0.5rem;
+  background: hsl(var(--secondary) / 0.25);
+  padding: 0.75rem 0.875rem;
  text-align: left;
  transition:
    background-color 160ms ease,
-    border-color 160ms ease,
-    transform 160ms ease,
-    box-shadow 160ms ease;
+    border-color 160ms ease;
 }

 .theme-settings__entry-button:hover {
-  background: hsl(var(--secondary) / 0.72);
-  transform: translateY(-1px);
+  background: hsl(var(--secondary) / 0.45);
 }

 .theme-settings__entry-button--active {
-  border-color: hsl(var(--primary) / 0.42);
+  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
-  box-shadow: 0 8px 24px hsl(var(--primary) / 0.12);
 }

@media (max-width: 1279px) {