From 4db65993d543c9e615efe47029b14b0075e1d8c4 Mon Sep 17 00:00:00 2001
From: Dennis Landmann <landmann@netzkultur.de>
Date: Mon, 20 Apr 2026 00:26:19 +0200
Subject: [PATCH] feat: redesign + avatars + theme + call presence fixes
 (v0.6.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visual:
- Light/dark theme via ThemeContext + CSS vars
- New design tokens (surface/fg/accent/line/etc.) across all pages
- Reusable Avatar component (img + letter fallback) wired into UserBar,
  ConversationHeader, ChatsPage, FriendsPage, GroupInfoPanel, IncomingCallPanel

Calls:
- Split call UI: IncomingCallPanel, InCallPanel, CallControls,
  CallParticipantTile, ScreenShareViewer
- Active speaker hook (useActiveSpeakers)
- Fix: ActiveCallBanner stayed hidden after hangup while peers in room.
  - useCallPresence: bind presence callbacks only when we own subscribe
    (Supabase forbids .on() after .subscribe() on shared dedup'd channels)
  - useCallPresence: never removeChannel — channel is shared with CallContext
    so tearing it down on ConversationHeader unmount killed live tracking
  - ActiveCallBanner: lastCallConversationId fallback so banner shows
    instantly after hangup, auto-dismiss when room confirmed empty
- Drop unused useAnyActiveCall

Bump tauri version 0.5.0 -> 0.6.0
---
 apps/desktop/index.html                       |  15 +-
 apps/desktop/src-tauri/tauri.conf.json        |   2 +-
 apps/desktop/src/App.tsx                      |   3 +
 apps/desktop/src/components/AppShell.tsx      |   8 +-
 apps/desktop/src/components/Avatar.tsx        |  45 +
 apps/desktop/src/components/CallControls.tsx  | 170 ++++
 .../src/components/CallParticipantTile.tsx    | 254 ++++++
 apps/desktop/src/components/CallUI.tsx        | 378 +++-----
 .../src/components/ConversationHeader.tsx     | 158 +++-
 .../desktop/src/components/GroupInfoPanel.tsx |  31 +-
 apps/desktop/src/components/InCallPanel.tsx   | 847 ++++++++++--------
 .../src/components/IncomingCallPanel.tsx      | 123 +++
 apps/desktop/src/components/MessageBubble.tsx |  93 +-
 apps/desktop/src/components/Modal.tsx         |  10 +-
 .../src/components/ScreenShareViewer.tsx      | 182 ++++
 apps/desktop/src/components/Sidebar.tsx       | 159 +++-
 .../src/components/TypingIndicator.tsx        |   8 +-
 apps/desktop/src/components/UpdateToast.tsx   |  14 +-
 apps/desktop/src/components/UserBar.tsx       |  35 +-
 apps/desktop/src/components/icons.tsx         |  83 ++
 apps/desktop/src/context/CallContext.tsx      |  49 +
 apps/desktop/src/context/ThemeContext.tsx     |  53 ++
 apps/desktop/src/lib/theme.ts                 |  44 +
 apps/desktop/src/lib/useActiveSpeakers.ts     |  35 +
 apps/desktop/src/lib/useAnyActiveCall.ts      |  94 --
 apps/desktop/src/lib/useCallPresence.ts       |  53 +-
 apps/desktop/src/pages/AdminPage.tsx          |  78 +-
 apps/desktop/src/pages/ChatsPage.tsx          | 162 +++-
 apps/desktop/src/pages/ConversationPage.tsx   |  59 +-
 apps/desktop/src/pages/FriendsPage.tsx        |  85 +-
 apps/desktop/src/pages/SettingsPage.tsx       | 127 ++-
 apps/desktop/src/styles/globals.css           |  54 +-
 apps/desktop/tailwind.config.js               |  42 +
 33 files changed, 2459 insertions(+), 1094 deletions(-)
 create mode 100644 apps/desktop/src/components/Avatar.tsx
 create mode 100644 apps/desktop/src/components/CallControls.tsx
 create mode 100644 apps/desktop/src/components/CallParticipantTile.tsx
 create mode 100644 apps/desktop/src/components/IncomingCallPanel.tsx
 create mode 100644 apps/desktop/src/components/ScreenShareViewer.tsx
 create mode 100644 apps/desktop/src/context/ThemeContext.tsx
 create mode 100644 apps/desktop/src/lib/theme.ts
 create mode 100644 apps/desktop/src/lib/useActiveSpeakers.ts
 delete mode 100644 apps/desktop/src/lib/useAnyActiveCall.ts

diff --git a/apps/desktop/index.html b/apps/desktop/index.html
index 0270fe3..46c8e29 100644
--- a/apps/desktop/index.html
+++ b/apps/desktop/index.html
@@ -6,8 +6,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Netralax</title>
+    <script>
+      // Apply persisted / system theme before paint to avoid FOUC.
+      (function () {
+        try {
+          var stored = localStorage.getItem('netralax.theme');
+          var dark =
+            stored === 'dark' ||
+            (stored !== 'light' &&
+              window.matchMedia('(prefers-color-scheme: dark)').matches);
+          if (dark) document.documentElement.classList.add('dark');
+        } catch (_) {}
+      })();
+    </script>
   </head>
-  <body class="bg-[#0b0b0f] text-white antialiased">
+  <body class="bg-surface text-fg antialiased">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 869de65..c62974f 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ChatApp",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "identifier": "com.meinname.chatapp",
   "build": {
     "beforeDevCommand": "pnpm vite:dev",
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 8f67e33..4c720ad 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -7,6 +7,7 @@ import { AuthProvider } from './context/AuthContext';
 import { CallProvider } from './context/CallContext';
 import { ConversationsProvider } from './context/ConversationsContext';
 import { FriendshipsProvider } from './context/FriendshipsContext';
+import { ThemeProvider } from './context/ThemeContext';
 import { AdminPage } from './pages/AdminPage';
 import { AuthCallbackPage } from './pages/AuthCallbackPage';
 import { AuthPage } from './pages/AuthPage';
@@ -18,6 +19,7 @@ import { SettingsPage } from './pages/SettingsPage';
 
 export function App() {
   return (
+    <ThemeProvider>
     <AuthProvider>
       <FriendshipsProvider>
         <ConversationsProvider>
@@ -51,5 +53,6 @@ export function App() {
         </ConversationsProvider>
       </FriendshipsProvider>
     </AuthProvider>
+    </ThemeProvider>
   );
 }
diff --git a/apps/desktop/src/components/AppShell.tsx b/apps/desktop/src/components/AppShell.tsx
index fa18e66..20c9122 100644
--- a/apps/desktop/src/components/AppShell.tsx
+++ b/apps/desktop/src/components/AppShell.tsx
@@ -21,7 +21,7 @@ export function AppShell() {
   }, [session?.user.id, device?.id]);
 
   return (
-    <div className="relative flex min-h-screen overflow-hidden bg-ink-950 text-neutral-100">
+    <div className="relative flex min-h-screen overflow-hidden bg-surface text-fg">
       <ShellBackground />
       <div className="relative z-10 flex min-h-screen w-full">
         <Sidebar />
@@ -36,11 +36,11 @@ export function AppShell() {
   );
 }
 
-// Calmer than the auth-screen background — full-bleed grid + 2 large blobs.
-// No animation here so message lists stay readable.
+// Subtle ambient background — only renders in dark mode where the app's
+// visual language expects depth. Light mode stays clean and flat.
 function ShellBackground() {
   return (
-    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0 hidden dark:block">
       <div className="bg-grid absolute inset-0 opacity-[0.18]" />
       <div className="absolute -left-32 top-1/4 h-[420px] w-[420px] rounded-full bg-brand-500/20 blur-3xl" />
       <div className="absolute -right-32 bottom-0 h-[420px] w-[420px] rounded-full bg-fuchsia-500/10 blur-3xl" />
diff --git a/apps/desktop/src/components/Avatar.tsx b/apps/desktop/src/components/Avatar.tsx
new file mode 100644
index 0000000..d005f28
--- /dev/null
+++ b/apps/desktop/src/components/Avatar.tsx
@@ -0,0 +1,45 @@
+// Reusable avatar that prefers an uploaded image and falls back to a coloured
+// letter circle. Use this everywhere the app needs to render a profile.
+
+interface Props {
+  url?: string | null | undefined;
+  displayName?: string | null | undefined;
+  className?: string;
+  // Background gradient classes used when no image is set. Defaults to a
+  // brand-tinted fallback; callers can override (e.g. to colour-by-id).
+  fallbackClass?: string;
+  alt?: string;
+}
+
+export function Avatar({
+  url,
+  displayName,
+  className = 'h-10 w-10',
+  fallbackClass = 'bg-accent/20 text-accent',
+  alt,
+}: Props) {
+  if (url) {
+    return (
+      <img
+        src={url}
+        alt={alt ?? displayName ?? ''}
+        className={'shrink-0 rounded-full object-cover ' + className}
+        draggable={false}
+      />
+    );
+  }
+  const letter = (displayName ?? '?').trim().charAt(0).toUpperCase() || '?';
+  return (
+    <div
+      aria-hidden={alt ? undefined : 'true'}
+      className={
+        'flex shrink-0 items-center justify-center rounded-full font-semibold ' +
+        fallbackClass +
+        ' ' +
+        className
+      }
+    >
+      {letter}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/components/CallControls.tsx b/apps/desktop/src/components/CallControls.tsx
new file mode 100644
index 0000000..5139eec
--- /dev/null
+++ b/apps/desktop/src/components/CallControls.tsx
@@ -0,0 +1,170 @@
+import { useTranslation } from 'react-i18next';
+
+import {
+  MicIcon,
+  MicOffIcon,
+  MonitorShareIcon,
+  MonitorStopIcon,
+  PhoneOffIcon,
+  UsersIcon,
+  VideoIcon,
+} from './icons';
+
+interface Props {
+  muted: boolean;
+  sharing: boolean;
+  video: boolean;
+  onToggleMute: () => void;
+  onToggleShare: () => void;
+  onToggleVideo?: () => void;
+  onHangup: () => void;
+  onOpenParticipants?: () => void;
+  /** Compact variant used inside the docked call (36px buttons). */
+  compact?: boolean;
+  /** Glass variant used when controls float on fullscreen cinema mode. */
+  glass?: boolean;
+  /** Disable transient interactions while the call isn't fully connected. */
+  disabledMedia?: boolean;
+}
+
+export function CallControls({
+  muted,
+  sharing,
+  video,
+  onToggleMute,
+  onToggleShare,
+  onToggleVideo,
+  onHangup,
+  onOpenParticipants,
+  compact = false,
+  glass = false,
+  disabledMedia = false,
+}: Props) {
+  const { t } = useTranslation(['app']);
+  const wrapBase = glass
+    ? 'glass-pill flex items-center justify-center gap-2 rounded-[18px] p-2.5'
+    : 'flex items-center justify-center gap-2 border-t border-line bg-surface-3 p-3';
+  const btnSize = compact ? 'h-9 w-9 rounded-[10px]' : 'h-12 w-12 rounded-[14px]';
+  const hangupSize = compact ? 'h-9 w-[54px] rounded-[10px]' : 'h-12 w-[72px] rounded-[14px]';
+  return (
+    <div className={wrapBase}>
+      <CallButton
+        label={muted ? t('app:call.unmute') : t('app:call.mute')}
+        active={muted}
+        activeTone="danger"
+        onClick={onToggleMute}
+        disabled={disabledMedia}
+        glass={glass}
+        className={btnSize}
+      >
+        {muted ? <MicOffIcon className="h-5 w-5" /> : <MicIcon className="h-5 w-5" />}
+      </CallButton>
+      {onToggleVideo && (
+        <CallButton
+          label={t('app:call.start_video', { defaultValue: 'Video' })}
+          active={video}
+          activeTone="accent"
+          onClick={onToggleVideo}
+          disabled={disabledMedia}
+          glass={glass}
+          className={btnSize}
+        >
+          <VideoIcon className="h-5 w-5" />
+        </CallButton>
+      )}
+      <CallButton
+        label={
+          sharing
+            ? t('app:call.stop_share_screen', { defaultValue: 'Screen-Share stoppen' })
+            : t('app:call.share_screen', { defaultValue: 'Bildschirm teilen' })
+        }
+        active={sharing}
+        activeTone="accent"
+        onClick={onToggleShare}
+        disabled={disabledMedia}
+        glass={glass}
+        className={btnSize}
+      >
+        {sharing ? (
+          <MonitorStopIcon className="h-5 w-5" />
+        ) : (
+          <MonitorShareIcon className="h-5 w-5" />
+        )}
+      </CallButton>
+      {onOpenParticipants && (
+        <CallButton
+          label={t('app:call.participants', { defaultValue: 'Teilnehmer' })}
+          onClick={onOpenParticipants}
+          glass={glass}
+          className={btnSize}
+        >
+          <UsersIcon className="h-5 w-5" />
+        </CallButton>
+      )}
+      <CallButton
+        label={t('app:call.hangup')}
+        onClick={onHangup}
+        tone="danger"
+        glass={glass}
+        className={hangupSize}
+      >
+        <PhoneOffIcon className="h-5 w-5" />
+      </CallButton>
+    </div>
+  );
+}
+
+interface CallButtonProps {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  active?: boolean;
+  activeTone?: 'accent' | 'danger';
+  tone?: 'default' | 'danger';
+  glass?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CallButton({
+  label,
+  onClick,
+  disabled,
+  active,
+  activeTone = 'accent',
+  tone = 'default',
+  glass = false,
+  className = '',
+  children,
+}: CallButtonProps) {
+  const base =
+    'inline-flex cursor-pointer items-center justify-center border transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:opacity-50';
+
+  let toneClass: string;
+  if (tone === 'danger') {
+    toneClass = 'bg-rose-600 text-white border-rose-600 hover:bg-rose-500';
+  } else if (active && activeTone === 'danger') {
+    toneClass = 'bg-rose-600 text-white border-rose-600 hover:bg-rose-500';
+  } else if (active) {
+    toneClass = 'bg-accent text-accent-fg border-accent hover:brightness-110';
+  } else if (glass) {
+    toneClass =
+      'border-white/15 bg-white/10 text-white hover:bg-white/15';
+  } else {
+    toneClass = 'border-line bg-surface-2 text-fg hover:bg-surface';
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      aria-pressed={active}
+      title={label}
+      className={`${base} ${toneClass} ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/desktop/src/components/CallParticipantTile.tsx b/apps/desktop/src/components/CallParticipantTile.tsx
new file mode 100644
index 0000000..ea10568
--- /dev/null
+++ b/apps/desktop/src/components/CallParticipantTile.tsx
@@ -0,0 +1,254 @@
+import { CrownIcon, LockIcon, MicOffIcon, MonitorShareIcon } from './icons';
+
+export type AvatarColorKey = 'violet' | 'amber' | 'rose' | 'teal';
+
+const AVATAR_COLORS: Record<AvatarColorKey, { bg: string; fg: string }> = {
+  // Tailwind classes tuned per spec: violet/amber/rose/teal swatches in both
+  // light and dark modes. Dark pairs invert to keep contrast readable.
+  violet: {
+    bg: 'bg-violet-200 dark:bg-violet-900/60',
+    fg: 'text-violet-800 dark:text-violet-200',
+  },
+  amber: {
+    bg: 'bg-amber-200 dark:bg-amber-900/60',
+    fg: 'text-amber-900 dark:text-amber-200',
+  },
+  rose: {
+    bg: 'bg-rose-200 dark:bg-rose-900/60',
+    fg: 'text-rose-900 dark:text-rose-200',
+  },
+  teal: {
+    bg: 'bg-teal-200 dark:bg-teal-900/60',
+    fg: 'text-teal-900 dark:text-teal-200',
+  },
+};
+
+const COLOR_KEYS: AvatarColorKey[] = ['violet', 'amber', 'rose', 'teal'];
+
+// Stable per-user color from identity string — keeps avatars visually
+// consistent across re-mounts without needing a color field on the profile.
+export function colorKeyFor(id: string): AvatarColorKey {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
+  }
+  return COLOR_KEYS[hash % COLOR_KEYS.length]!;
+}
+
+export interface ParticipantTileProps {
+  userId: string;
+  displayName: string;
+  avatarUrl: string | null;
+  me: boolean;
+  muted: boolean;
+  speaking: boolean;
+  sharing: boolean;
+  video: boolean;
+  e2ee: boolean;
+  size?: 'default' | 'small';
+  focused?: boolean;
+  onClick?: () => void;
+  onOpenScreenShare?: () => void;
+}
+
+export function CallParticipantTile(props: ParticipantTileProps) {
+  const {
+    displayName,
+    me,
+    muted,
+    speaking,
+    sharing,
+    video,
+    e2ee,
+    size = 'default',
+    focused = false,
+    onClick,
+    onOpenScreenShare,
+  } = props;
+
+  const small = size === 'small';
+  const borderClass = speaking
+    ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(22,163,74,0.25)] dark:border-emerald-400'
+    : focused
+      ? 'border-accent'
+      : 'border-line hover:border-accent';
+
+  return (
+    <div
+      onClick={onClick}
+      className={
+        'relative flex flex-col overflow-hidden rounded-[14px] border bg-surface-3 transition ' +
+        (onClick ? 'cursor-pointer ' : '') +
+        borderClass +
+        (small ? ' min-w-[140px]' : '')
+      }
+    >
+      {sharing ? (
+        <ScreenshareStub
+          displayName={displayName}
+          small={small}
+          onOpen={onOpenScreenShare}
+        />
+      ) : video ? (
+        <VideoStub {...props} small={small} />
+      ) : (
+        <AudioContent {...props} small={small} />
+      )}
+
+      <div className="pointer-events-none absolute inset-x-2 bottom-2 flex items-center justify-between gap-2 rounded-lg glass-chip px-2.5 py-1.5">
+        <div className="flex min-w-0 items-center gap-1.5 text-xs font-semibold">
+          {me && <CrownIcon className="h-3 w-3 shrink-0 text-amber-300" />}
+          <span className="truncate">
+            {displayName}
+            {me ? ' (du)' : ''}
+          </span>
+          {e2ee && (
+            <span
+              aria-label="E2E verschlüsselt"
+              title="E2E verschlüsselt"
+              className="flex opacity-70"
+            >
+              <LockIcon className="h-3 w-3" />
+            </span>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {muted && (
+            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white">
+              <MicOffIcon className="h-3 w-3" />
+            </span>
+          )}
+          {sharing && (
+            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-emerald-500/80 text-white">
+              <MonitorShareIcon className="h-3 w-3" />
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AudioContent({
+  userId,
+  displayName,
+  avatarUrl,
+  speaking,
+  small,
+}: ParticipantTileProps & { small: boolean }) {
+  const key = colorKeyFor(userId);
+  const colors = AVATAR_COLORS[key];
+  const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center p-4">
+      <div
+        className={
+          'relative flex items-center justify-center rounded-full ' +
+          (small ? 'h-11 w-11' : 'h-[72px] w-[72px]')
+        }
+      >
+        {speaking && (
+          <span
+            aria-hidden="true"
+            className="absolute -inset-1.5 animate-audio-pulse rounded-full border-2 border-emerald-500 dark:border-emerald-400"
+          />
+        )}
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt=""
+            className="relative h-full w-full rounded-full object-cover"
+          />
+        ) : (
+          <span
+            className={
+              'relative flex h-full w-full items-center justify-center rounded-full font-bold ' +
+              colors.bg + ' ' + colors.fg + ' ' +
+              (small ? 'text-lg' : 'text-2xl')
+            }
+          >
+            {letter}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function VideoStub({
+  userId,
+  displayName,
+  avatarUrl,
+  small,
+}: ParticipantTileProps & { small: boolean }) {
+  // Video capture playback is out of scope for this UI iteration — show the
+  // audio-avatar gradient background as a placeholder so the layout is stable
+  // when a participant enables video.
+  const key = colorKeyFor(userId);
+  const colors = AVATAR_COLORS[key];
+  const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center bg-gradient-to-br from-accent/20 to-surface-2 p-4">
+      <div
+        className={
+          'flex items-center justify-center rounded-full font-bold ' +
+          colors.bg + ' ' + colors.fg + ' ' +
+          (small ? 'h-11 w-11 text-lg' : 'h-[72px] w-[72px] text-2xl')
+        }
+      >
+        {avatarUrl ? (
+          <img src={avatarUrl} alt="" className="h-full w-full rounded-full object-cover" />
+        ) : (
+          letter
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ScreenshareStubProps {
+  displayName: string;
+  small: boolean;
+  onOpen?: (() => void) | undefined;
+}
+
+// Fake browser window placeholder — click to open the real <video> viewer.
+// Matches the design spec's "screenshare-stub" look.
+function ScreenshareStub({ displayName, small, onOpen }: ScreenshareStubProps) {
+  return (
+    <button
+      type="button"
+      onClick={
+        onOpen
+          ? (e) => {
+              e.stopPropagation();
+              onOpen();
+            }
+          : undefined
+      }
+      aria-label={`${displayName} teilt Bildschirm`}
+      className="relative flex min-h-0 flex-1 cursor-pointer items-center justify-center bg-ink-900 p-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+    >
+      <div className="h-[85%] w-[90%] overflow-hidden rounded-lg border border-white/10 bg-ink-700">
+        <div className="flex h-[20px] items-center gap-1 bg-ink-600 px-2">
+          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
+          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
+          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
+        </div>
+        <div className={'flex flex-col gap-2 ' + (small ? 'gap-[3px] p-1.5' : 'p-3.5')}>
+          <div className={'w-[60%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
+          <div className={'w-[80%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
+          <div className={'w-[40%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
+          <div className={'my-1 rounded ' + (small ? 'h-[14px]' : 'h-10') + ' bg-accent/30'} />
+          <div className={'w-[70%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
+        </div>
+      </div>
+      {!small && (
+        <div className="absolute left-3 top-3 flex items-center gap-1.5 glass-chip rounded-lg px-2.5 py-1 text-[10px] font-medium">
+          <MonitorShareIcon className="h-3 w-3" />
+          <span>{displayName} teilt Bildschirm</span>
+        </div>
+      )}
+    </button>
+  );
+}
diff --git a/apps/desktop/src/components/CallUI.tsx b/apps/desktop/src/components/CallUI.tsx
index 1c109df..1818cda 100644
--- a/apps/desktop/src/components/CallUI.tsx
+++ b/apps/desktop/src/components/CallUI.tsx
@@ -1,26 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
 import { ringtone } from '../lib/ringtone';
-import { useAnyActiveCall } from '../lib/useAnyActiveCall';
-import { useCallPresence } from '../lib/useCallPresence';
-import {
-  MicIcon,
-  MicOffIcon,
-  PhoneIcon,
-  PhoneOffIcon,
-  SpinnerIcon,
-  XIcon,
-} from './icons';
+import { AvatarColorKey, colorKeyFor } from './CallParticipantTile';
+import { LockIcon, MonitorShareIcon, PhoneIcon, PhoneOffIcon } from './icons';
 
-// Shell-level mount. Handles ringtones + the IncomingCallToast.
-// The persistent CallBar (active-call widget) is rendered inside Sidebar so
-// users can keep browsing/typing while a call is live.
+// Shell-level mount. Responsibilities:
+//   - Start/stop ringtones by call-state transition.
+//   - Toast-style incoming-call banner for conversations the user isn't in
+//     (clicking the toast routes to the docked IncomingCallPanel).
+//   - PiP widget when an active call is live but the user is looking at a
+//     different route.
 export function CallUI() {
   const { state } = useCall();
 
@@ -34,19 +28,37 @@ export function CallUI() {
     return () => ringtone.stop();
   }, []);
 
-  return <IncomingCallToast />;
+  return (
+    <>
+      <IncomingCallToast />
+      <PipCall />
+    </>
+  );
 }
 
 // ---------------------------------------------------------------------------
 
+const TOAST_AVATAR: Record<AvatarColorKey, string> = {
+  violet: 'bg-violet-500/90 text-white',
+  amber: 'bg-amber-500/90 text-white',
+  rose: 'bg-rose-500/90 text-white',
+  teal: 'bg-teal-500/90 text-white',
+};
+
 function IncomingCallToast() {
   const { t } = useTranslation(['app']);
   const { state, acceptIncoming, rejectIncoming } = useCall();
   const { friendships } = useFriendshipsContext();
   const { conversations } = useConversationsContext();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   if (state.kind !== 'incoming') return null;
 
+  // When the user is already looking at the target conversation, the docked
+  // IncomingCallPanel handles the UI; hide the toast to avoid double chrome.
+  if (location.pathname === '/chats/' + state.conversationId) return null;
+
   const conv = conversations.find((c) => c.id === state.conversationId) ?? null;
   const callerName =
     conv?.members.find((m) => m.userId === state.fromUserId)?.profile?.displayName ??
@@ -54,44 +66,55 @@ function IncomingCallToast() {
     '?';
   const isGroup = conv?.type === 'group';
   const groupName = isGroup ? (conv?.name ?? t('app:chats.new_group')) : null;
-  const letter = (isGroup ? groupName ?? callerName : callerName)
-    .trim()
-    .charAt(0)
-    .toUpperCase() || '?';
+  const title = isGroup ? groupName ?? callerName : callerName;
+  const letter = title.trim().charAt(0).toUpperCase() || '?';
+  const color = colorKeyFor(state.fromUserId);
 
   return (
     <div
       role="dialog"
       aria-modal="false"
       aria-label={t('app:call.incoming_title')}
-      className="fixed bottom-6 right-6 z-50 w-80 animate-slide-up rounded-2xl border border-white/10 bg-ink-900/95 p-5 shadow-2xl backdrop-blur-xl"
+      className="fixed bottom-6 right-6 z-50 w-80 animate-slide-up overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-call-card-dark"
     >
-      <p className="text-xs font-medium uppercase tracking-wide text-neutral-500">
-        {t('app:call.incoming_title')}
-      </p>
-      <div className="mt-3 flex items-center gap-3">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-base font-semibold text-white ring-1 ring-brand-400/30">
-          {letter}
+      <button
+        type="button"
+        onClick={() => navigate('/chats/' + state.conversationId)}
+        className="group block w-full cursor-pointer p-5 text-left transition hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+      >
+        <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-fg-muted">
+          {t('app:call.incoming_title')}
+        </p>
+        <div className="mt-2 flex items-center gap-3">
+          <div
+            className={
+              'flex h-11 w-11 shrink-0 items-center justify-center rounded-full font-semibold ' +
+              TOAST_AVATAR[color]
+            }
+          >
+            {letter}
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-display text-base font-semibold text-fg">{title}</p>
+            <p className="flex items-center gap-1.5 truncate text-xs text-fg-muted">
+              <LockIcon className="h-3 w-3" />
+              <span>
+                {isGroup
+                  ? t('app:call.incoming_group_from', {
+                      name: callerName,
+                      defaultValue: callerName + ' ruft Gruppe',
+                    })
+                  : t('app:call.incoming_from', { name: callerName })}
+              </span>
+            </p>
+          </div>
         </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate font-display text-base font-semibold text-white">
-            {isGroup ? groupName : callerName}
-          </p>
-          <p className="truncate text-xs text-neutral-400">
-            {isGroup
-              ? t('app:call.incoming_group_from', {
-                  name: callerName,
-                  defaultValue: callerName + ' ruft Gruppe',
-                })
-              : t('app:call.incoming_from', { name: callerName })}
-          </p>
-        </div>
-      </div>
-      <div className="mt-4 flex gap-2">
+      </button>
+      <div className="flex gap-2 px-5 pb-5">
         <button
           type="button"
           onClick={rejectIncoming}
-          className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm font-semibold text-rose-200 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40"
+          className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg border border-rose-500/40 bg-transparent px-3 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
         >
           <PhoneOffIcon className="h-4 w-4" />
           <span>{t('app:call.decline')}</span>
@@ -99,7 +122,7 @@ function IncomingCallToast() {
         <button
           type="button"
           onClick={() => void acceptIncoming()}
-          className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg bg-emerald-500/90 px-3 py-2 text-sm font-semibold text-white transition hover:bg-emerald-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
+          className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
         >
           <PhoneIcon className="h-4 w-4" />
           <span>{t('app:call.accept')}</span>
@@ -110,226 +133,77 @@ function IncomingCallToast() {
 }
 
 // ---------------------------------------------------------------------------
-// CallBar — persistent widget inside Sidebar. Lets the user keep browsing
-// the app while a call is active / connecting / ringing.
+// PiP widget — shown when the user has an active call but is browsing
+// somewhere else. Clicking expands back to the call's conversation.
 // ---------------------------------------------------------------------------
 
-export function CallBar() {
-  const { state, lastCallConversationId } = useCall();
-  const { conversations } = useConversationsContext();
-  const { session } = useAuth();
-  const myId = session?.user.id ?? null;
-
-  // Aggregate observer across every conversation the user is in so a
-  // "call is live, rejoin" affordance appears in the sidebar whenever ANY
-  // peer is in a call — not just calls I previously joined.
-  const convIds = conversations.map((c) => c.id);
-  const anyActive = useAnyActiveCall(convIds, myId);
-
-  if (state.kind === 'connected' || state.kind === 'connecting' || state.kind === 'outgoing') {
-    return <ActiveCallBar />;
-  }
-  // Prefer the conversation I just left, fall back to any other live call.
-  const rejoinId = lastCallConversationId ?? anyActive?.conversationId ?? null;
-  if (rejoinId) {
-    return <RejoinCallBar conversationId={rejoinId} />;
-  }
-  return null;
-}
-
-function ActiveCallBar() {
+function PipCall() {
   const { t } = useTranslation(['app']);
-  const { state, isMuted, hangup, toggleMute } = useCall();
+  const {
+    state,
+    remoteParticipants,
+    remoteScreenShares,
+    hangup,
+  } = useCall();
+  const navigate = useNavigate();
+  const location = useLocation();
   const { conversations } = useConversationsContext();
 
-  const [, forceTick] = useState(0);
-  useEffect(() => {
-    if (state.kind !== 'connected') return;
-    const id = window.setInterval(() => forceTick((v) => v + 1), 1000);
-    return () => window.clearInterval(id);
-  }, [state.kind]);
+  const active =
+    state.kind === 'connected' ||
+    state.kind === 'connecting' ||
+    state.kind === 'outgoing';
+  if (!active) return null;
 
-  if (state.kind !== 'connected' && state.kind !== 'connecting' && state.kind !== 'outgoing') {
-    return null;
-  }
+  // Only render when the user is NOT currently viewing the call's
+  // conversation. Inside that conversation the full dock is visible already.
+  if (location.pathname === '/chats/' + state.conversationId) return null;
 
   const conv = conversations.find((c) => c.id === state.conversationId) ?? null;
   const title =
     conv?.type === 'group'
-      ? conv.name ?? '—'
+      ? conv?.name ?? t('app:chats.new_group')
       : conv?.peer?.displayName ?? '—';
-
-  const statusLabel =
-    state.kind === 'outgoing'
-      ? t('app:call.outgoing_ringing')
-      : state.kind === 'connecting'
-        ? t('app:call.connecting')
-        : t('app:call.voice_connected', { defaultValue: 'Sprachchat verbunden' });
-
-  const elapsed =
-    state.kind === 'connected'
-      ? formatElapsed(Date.now() - new Date(state.startedAt).getTime())
-      : null;
+  const participantCount = 1 + remoteParticipants.length;
+  const someoneSharing = remoteScreenShares.length > 0;
 
   return (
-    <div className="mb-2 overflow-hidden rounded-xl border border-emerald-500/20 bg-ink-900/80">
-      <Link
-        to={'/chats/' + state.conversationId}
-        className="flex items-center gap-2.5 px-3 pt-2.5 pb-2 transition hover:bg-white/5 focus:outline-none"
-        aria-label={statusLabel}
-      >
-        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-emerald-500/15 text-emerald-300">
-          {state.kind === 'connecting' ? (
-            <SpinnerIcon className="h-4 w-4" />
-          ) : (
-            <SignalIcon className="h-4 w-4" />
-          )}
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-semibold text-emerald-300">{statusLabel}</p>
-          <p className="truncate text-xs text-neutral-400">
-            {title}
-            {elapsed && <span className="ml-1.5 font-mono text-neutral-500">{elapsed}</span>}
-          </p>
-        </div>
-      </Link>
-
-      <div className="grid grid-cols-2 gap-1 border-t border-white/5 bg-ink-950/40 p-1.5">
-        <IconTile
-          onClick={toggleMute}
-          disabled={state.kind !== 'connected'}
-          label={isMuted ? t('app:call.unmute') : t('app:call.mute')}
-          tone={isMuted ? 'amber' : 'neutral'}
-        >
-          {isMuted ? <MicOffIcon className="h-4 w-4" /> : <MicIcon className="h-4 w-4" />}
-        </IconTile>
-        <IconTile onClick={() => void hangup()} label={t('app:call.hangup')} tone="rose">
-          <PhoneOffIcon className="h-4 w-4" />
-        </IconTile>
-      </div>
-    </div>
-  );
-}
-
-function RejoinCallBar({ conversationId }: { conversationId: string }) {
-  const { t } = useTranslation(['app', 'common']);
-  const { joinActiveCall, dismissLastCall } = useCall();
-  const { conversations } = useConversationsContext();
-  const { session } = useAuth();
-  const active = useCallPresence(conversationId);
-
-  const myId = session?.user.id;
-  const others = active.filter((u) => u !== myId);
-
-  // Presence polling returns [] on the first tick before it syncs, so we can't
-  // treat an initial empty list as "room is empty". Only dismiss after we've
-  // actually seen peers and then watched them leave — and even then confirm
-  // the empty state for a grace period, since presence_diff events can
-  // arrive slightly out of order.
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    if (others.length > 0) {
-      setVisible(true);
-      return;
-    }
-    if (!visible) return;
-    const id = window.setTimeout(() => {
-      setVisible(false);
-      dismissLastCall();
-    }, 2500);
-    return () => window.clearTimeout(id);
-  }, [others.length, visible, dismissLastCall]);
-
-  if (!visible) return null;
-
-  const conv = conversations.find((c) => c.id === conversationId) ?? null;
-  const title =
-    conv?.type === 'group'
-      ? conv.name ?? '—'
-      : conv?.peer?.displayName ?? '—';
-
-  return (
-    <div className="mb-2 overflow-hidden rounded-xl border border-emerald-500/20 bg-ink-900/80">
-      <Link
-        to={'/chats/' + conversationId}
-        className="flex items-center gap-2.5 px-3 pt-2.5 pb-2 transition hover:bg-white/5 focus:outline-none"
-      >
-        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-emerald-500/15 text-emerald-300">
-          <SignalIcon className="h-4 w-4" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-semibold text-emerald-300">
-            {t('app:call.still_live', { defaultValue: 'Anruf läuft noch' })}
-          </p>
-          <p className="truncate text-xs text-neutral-400">
-            {title} · {others.length}
-          </p>
-        </div>
-      </Link>
-      <div className="grid grid-cols-2 gap-1 border-t border-white/5 bg-ink-950/40 p-1.5">
-        <IconTile
-          onClick={() => void joinActiveCall(conversationId, 'audio')}
-          label={t('app:call.join')}
-          tone="emerald"
-        >
-          <PhoneIcon className="h-4 w-4" />
-        </IconTile>
-        <IconTile onClick={dismissLastCall} label={t('common:close', { defaultValue: 'Schließen' })} tone="neutral">
-          <XIcon className="h-4 w-4" />
-        </IconTile>
-      </div>
-    </div>
-  );
-}
-
-interface IconTileProps {
-  onClick: () => void;
-  label: string;
-  tone: 'neutral' | 'amber' | 'rose' | 'emerald';
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-function IconTile({ onClick, label, tone, disabled, children }: IconTileProps) {
-  const toneClass =
-    tone === 'rose'
-      ? 'bg-white/5 text-rose-300 hover:bg-rose-500/20 focus-visible:ring-rose-400/40'
-      : tone === 'amber'
-        ? 'bg-amber-500/20 text-amber-200 hover:bg-amber-500/30 focus-visible:ring-amber-400/40'
-        : tone === 'emerald'
-          ? 'bg-emerald-500/20 text-emerald-200 hover:bg-emerald-500/30 focus-visible:ring-emerald-400/40'
-          : 'bg-white/5 text-neutral-200 hover:bg-white/10 focus-visible:ring-brand-400/40';
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={label}
-      title={label}
-      className={
-        'inline-flex h-9 cursor-pointer items-center justify-center rounded-md transition focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ' +
-        toneClass
-      }
+    <div
+      role="dialog"
+      aria-label={t('app:call.active_in_conv', { defaultValue: 'Aktiver Anruf' })}
+      onClick={() => navigate('/chats/' + state.conversationId)}
+      className="fixed bottom-5 right-5 z-40 flex w-[260px] animate-slide-in-call cursor-pointer items-center gap-2.5 rounded-[14px] border border-accent bg-surface-3 p-2.5 shadow-pip-call transition hover:-translate-y-0.5"
     >
-      {children}
-    </button>
+      <div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-[10px] bg-surface-2">
+        {someoneSharing ? (
+          <MonitorShareIcon className="h-5 w-5 text-accent" />
+        ) : (
+          <PhoneIcon className="h-5 w-5 text-accent" />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-[13px] font-semibold text-fg">
+          {title} · {participantCount}
+        </p>
+        <p className="mt-0.5 flex items-center gap-1.5 text-[11px] text-fg-muted">
+          <span
+            aria-hidden="true"
+            className="h-1.5 w-1.5 rounded-full bg-rose-500 animate-live-dot"
+          />
+          <span>Live · {t('app:call.tap_to_open', { defaultValue: 'tippe zum Öffnen' })}</span>
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          void hangup();
+        }}
+        aria-label={t('app:call.hangup')}
+        className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-rose-600 text-white transition hover:bg-rose-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/60"
+      >
+        <PhoneOffIcon className="h-4 w-4" />
+      </button>
+    </div>
   );
 }
-
-function SignalIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" {...props}>
-      <path d="M5 12v0" />
-      <path d="M9 9v6" />
-      <path d="M13 6v12" />
-      <path d="M17 9v6" />
-    </svg>
-  );
-}
-
-function formatElapsed(ms: number): string {
-  const total = Math.max(0, Math.floor(ms / 1000));
-  const mm = Math.floor(total / 60).toString().padStart(2, '0');
-  const ss = (total % 60).toString().padStart(2, '0');
-  return mm + ':' + ss;
-}
diff --git a/apps/desktop/src/components/ConversationHeader.tsx b/apps/desktop/src/components/ConversationHeader.tsx
index bc282ed..566a449 100644
--- a/apps/desktop/src/components/ConversationHeader.tsx
+++ b/apps/desktop/src/components/ConversationHeader.tsx
@@ -1,18 +1,27 @@
 import type { ConversationSummary } from '@chat-app/shared/chat';
 import type { PresenceState } from '@chat-app/shared/supabase';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useCallPresence } from '../lib/useCallPresence';
-import { InfoIcon, PhoneIcon, SpinnerIcon, UsersIcon } from './icons';
+import { Avatar } from './Avatar';
+import {
+  InfoIcon,
+  PhoneIcon,
+  SearchIcon,
+  SpinnerIcon,
+  UsersIcon,
+  VideoIcon,
+} from './icons';
 
 const PRESENCE_DOT: Record<PresenceState, string> = {
-  online: 'bg-emerald-400',
+  online: 'bg-emerald-500',
   idle: 'bg-amber-400',
   dnd: 'bg-rose-500',
   invisible: 'bg-neutral-500',
-  offline: 'bg-neutral-600',
+  offline: 'bg-neutral-400 dark:bg-neutral-600',
 };
 
 interface Props {
@@ -23,9 +32,7 @@ interface Props {
 
 export function ConversationHeader({ conversation, peerPresence, onInfoClick }: Props) {
   if (!conversation) {
-    return (
-      <header className="h-[57px] border-b border-white/5 px-6 py-3" aria-busy="true" />
-    );
+    return <header className="h-[57px] border-b border-line px-6 py-3" aria-busy="true" />;
   }
 
   return (
@@ -52,35 +59,43 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
   const isDm = conversation.type === 'dm';
   const title = isDm ? (conversation.peer?.displayName ?? '?') : (conversation.name ?? '?');
   const handle = isDm ? '@' + (conversation.peer?.username ?? '?') : '';
-  const letter = title.trim().charAt(0).toUpperCase() || '?';
+  const peerAvatar = isDm ? (conversation.peer?.avatarUrl ?? null) : (conversation.avatarUrl ?? null);
 
   // Hide presence when peer chose invisible — reciprocal privacy.
   const showPresence = isDm && peerPresence && peerPresence !== 'invisible';
   const presenceLabel = peerPresence ? t('app:presence.' + peerPresence) : '';
 
   return (
-    <header className="flex items-center gap-3 border-b border-white/5 px-6 py-3">
-      <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-base font-semibold text-white ring-1 ring-brand-400/30">
-        {isDm ? letter : <UsersIcon className="h-5 w-5" />}
+    <header className="flex items-center gap-3 border-b border-line bg-surface-3 px-6 py-3">
+      <div className="relative">
+        {isDm ? (
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+        ) : peerAvatar ? (
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+        ) : (
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent">
+            <UsersIcon className="h-5 w-5" />
+          </div>
+        )}
         {showPresence && peerPresence && (
           <span
             aria-hidden="true"
             className={
-              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-ink-950 ' +
+              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-surface-3 ' +
               PRESENCE_DOT[peerPresence]
             }
           />
         )}
       </div>
       <div className="min-w-0 flex-1">
-        <p className="truncate font-display text-base font-semibold text-white">{title}</p>
-        <p className="truncate text-xs text-neutral-500">
+        <p className="truncate font-display text-base font-semibold text-fg">{title}</p>
+        <p className="truncate text-xs text-fg-muted">
           {isDm ? (
             <>
               <span>{handle}</span>
               {showPresence && (
                 <>
-                  <span className="mx-1.5 text-neutral-700">·</span>
+                  <span className="mx-1.5 text-fg-muted/50">·</span>
                   <span>{presenceLabel}</span>
                 </>
               )}
@@ -93,75 +108,132 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
         </p>
       </div>
 
-      <CallHeaderButton conversationId={conversation.id} />
+      <HeaderActionButton label={t('app:chats.search', { defaultValue: 'Suche' })} icon={SearchIcon} />
+      <CallHeaderButton conversationId={conversation.id} kind="audio" />
+      <CallHeaderButton conversationId={conversation.id} kind="video" />
       {!isDm && onInfoClick && (
-        <button
-          type="button"
+        <HeaderActionButton
+          label={t('app:group.info_title')}
+          icon={InfoIcon}
           onClick={onInfoClick}
-          aria-label={t('app:group.info_title')}
-          title={t('app:group.info_title')}
-          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
-        >
-          <InfoIcon className="h-4 w-4" />
-        </button>
+        />
       )}
     </header>
   );
 }
 
-function CallHeaderButton({ conversationId }: { conversationId: string }) {
-  const { t } = useTranslation(['app']);
-  const { state, startCall } = useCall();
-  const busy = state.kind !== 'idle';
+interface HeaderActionButtonProps {
+  label: string;
+  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  onClick?: () => void;
+  disabled?: boolean;
+  tone?: 'default' | 'accent';
+}
+
+function HeaderActionButton({
+  label,
+  icon: Icon,
+  onClick,
+  disabled,
+  tone = 'default',
+}: HeaderActionButtonProps) {
+  const toneClass =
+    tone === 'accent'
+      ? 'text-accent hover:bg-accent/10'
+      : 'text-fg-muted hover:bg-surface-2 hover:text-fg';
   return (
     <button
       type="button"
-      onClick={() => void startCall(conversationId, 'audio')}
-      disabled={busy}
-      aria-label={t('app:call.start_audio')}
-      title={busy ? t('app:call.busy') : t('app:call.start_audio')}
-      className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-brand-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 disabled:cursor-not-allowed disabled:opacity-50"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={label}
+      className={
+        'flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-50 ' +
+        toneClass
+      }
     >
-      <PhoneIcon className="h-4 w-4" />
+      <Icon className="h-4 w-4" />
     </button>
   );
 }
 
+function CallHeaderButton({
+  conversationId,
+  kind,
+}: {
+  conversationId: string;
+  kind: 'audio' | 'video';
+}) {
+  const { t } = useTranslation(['app']);
+  const { state, startCall } = useCall();
+  const busy = state.kind !== 'idle';
+  const label =
+    kind === 'video'
+      ? t('app:call.start_video', { defaultValue: 'Video-Anruf' })
+      : t('app:call.start_audio');
+  const Icon = kind === 'video' ? VideoIcon : PhoneIcon;
+  return (
+    <HeaderActionButton
+      label={busy ? t('app:call.busy') : label}
+      icon={Icon}
+      onClick={() => void startCall(conversationId, kind)}
+      disabled={busy}
+    />
+  );
+}
+
 function ActiveCallBanner({ conversationId }: { conversationId: string }) {
   const { t } = useTranslation(['app']);
   const { session } = useAuth();
-  const { state, joinActiveCall } = useCall();
+  const { state, joinActiveCall, lastCallConversationId, dismissLastCall } = useCall();
   const active = useCallPresence(conversationId);
 
   const myId = session?.user.id;
-  // Source of truth for "am I in this call" is the CallContext state, not
-  // presence — my own presence entry can lag behind the room join, which
-  // would otherwise make the banner flash while I'm already connected.
   const iAmIn =
     (state.kind === 'connected' ||
       state.kind === 'connecting' ||
       state.kind === 'outgoing') &&
     state.conversationId === conversationId;
 
-  // Only show banner when other people are in it and I'm not.
   const othersIn = active.filter((u) => u !== myId);
-  if (iAmIn || othersIn.length === 0) return null;
+  // Fallback signal: I just left this conv with peers still inside. Covers the
+  // brief window after hangup where presence may not have re-synced yet (the
+  // realtime channel can churn while ConversationHeader remounts).
+  const justLeft = state.kind === 'idle' && lastCallConversationId === conversationId;
 
+  // Once presence confirms the room is empty, drop the "just left" hint so the
+  // banner hides cleanly instead of sticking forever.
+  useEffect(() => {
+    if (!justLeft) return;
+    if (active.length === 0) return;
+    if (othersIn.length === 0) {
+      // Active reports only us (or something stale) — wait, then dismiss.
+      const id = window.setTimeout(() => dismissLastCall(), 3000);
+      return () => window.clearTimeout(id);
+    }
+    return undefined;
+  }, [justLeft, active.length, othersIn.length, dismissLastCall]);
+
+  if (iAmIn) return null;
+  if (othersIn.length === 0 && !justLeft) return null;
+
+  const count = Math.max(othersIn.length, justLeft ? 1 : 0);
   const busy = state.kind !== 'idle';
   return (
-    <div className="flex items-center gap-3 border-b border-emerald-500/20 bg-emerald-500/10 px-6 py-2.5 text-sm text-emerald-100">
-      <PhoneIcon className="h-4 w-4 text-emerald-300" />
+    <div className="flex items-center gap-3 border-b border-emerald-500/30 bg-emerald-500/10 px-6 py-2.5 text-sm text-emerald-700 dark:text-emerald-100">
+      <PhoneIcon className="h-4 w-4 text-emerald-600 dark:text-emerald-300" />
       <span className="flex-1">
         {t('app:call.active_in_conv', {
           defaultValue: 'Active call · {{count}} in room',
-          count: othersIn.length,
+          count,
         })}
       </span>
       <button
         type="button"
         onClick={() => void joinActiveCall(conversationId, 'audio')}
         disabled={busy}
-        className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-emerald-500/90 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
+        className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
       >
         {busy ? (
           <SpinnerIcon className="h-3.5 w-3.5" />
diff --git a/apps/desktop/src/components/GroupInfoPanel.tsx b/apps/desktop/src/components/GroupInfoPanel.tsx
index 2f59e29..b1d6cc5 100644
--- a/apps/desktop/src/components/GroupInfoPanel.tsx
+++ b/apps/desktop/src/components/GroupInfoPanel.tsx
@@ -123,15 +123,25 @@ export function GroupInfoPanel({ open, onClose, conversation }: Props) {
             {conversation.members.map((m) => {
               const name = m.profile?.displayName ?? '?';
               const handle = m.profile?.username ? '@' + m.profile.username : '';
+              const avatarUrl = m.profile?.avatarUrl ?? null;
               const letter = name.trim().charAt(0).toUpperCase() || '?';
               return (
                 <li
                   key={m.userId}
                   className="flex items-center gap-3 rounded-lg px-2 py-1.5"
                 >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-xs font-semibold text-white ring-1 ring-brand-400/30">
-                    {letter}
-                  </div>
+                  {avatarUrl ? (
+                    <img
+                      src={avatarUrl}
+                      alt=""
+                      className="h-8 w-8 shrink-0 rounded-full object-cover"
+                      draggable={false}
+                    />
+                  ) : (
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-xs font-semibold text-white ring-1 ring-brand-400/30">
+                      {letter}
+                    </div>
+                  )}
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-sm text-white">
                       {name}
@@ -187,9 +197,18 @@ export function GroupInfoPanel({ open, onClose, conversation }: Props) {
                           onClick={() => void handleAdd(f.userId)}
                           className="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-left transition hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 disabled:opacity-60"
                         >
-                          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-xs font-semibold text-white ring-1 ring-brand-400/30">
-                            {letter}
-                          </div>
+                          {f.avatarUrl ? (
+                            <img
+                              src={f.avatarUrl}
+                              alt=""
+                              className="h-8 w-8 shrink-0 rounded-full object-cover"
+                              draggable={false}
+                            />
+                          ) : (
+                            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-xs font-semibold text-white ring-1 ring-brand-400/30">
+                              {letter}
+                            </div>
+                          )}
                           <div className="min-w-0 flex-1">
                             <p className="truncate text-sm text-white">{f.displayName}</p>
                             <p className="truncate text-xs text-neutral-500">@{f.username}</p>
diff --git a/apps/desktop/src/components/InCallPanel.tsx b/apps/desktop/src/components/InCallPanel.tsx
index 9adf2d7..d544320 100644
--- a/apps/desktop/src/components/InCallPanel.tsx
+++ b/apps/desktop/src/components/InCallPanel.tsx
@@ -1,46 +1,60 @@
 import type { ConversationSummary } from '@chat-app/shared/chat';
-import type { RemoteTrack } from 'livekit-client';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
-import { type RemoteScreenShare, useCall } from '../context/CallContext';
+import { type CallMode, useCall } from '../context/CallContext';
 import {
   getPttSettings,
   type PttSettings,
   subscribePttSettings,
 } from '../lib/pttSettings';
-import {
-  LockIcon,
-  MicIcon,
-  MicOffIcon,
-  MonitorShareIcon,
-  MonitorStopIcon,
-  PhoneOffIcon,
-  SpinnerIcon,
-} from './icons';
+import { useActiveSpeakers } from '../lib/useActiveSpeakers';
+import { CallControls } from './CallControls';
+import { CallParticipantTile } from './CallParticipantTile';
+import { FocusIcon, GridIcon, LockIcon, MaximizeIcon, SpinnerIcon, UsersIcon } from './icons';
+import { ScreenShareViewer } from './ScreenShareViewer';
 
+// Discord-style in-call dock rendered above the message list. Renders three
+// visual modes driven by CallContext.callMode: grid, focus, fullscreen.
+// The fullscreen variant absolute-positions itself over the conversation
+// container so the rail+chat-list remain visible on the left.
 interface Props {
   conversation: ConversationSummary;
 }
 
-// Discord-style call widget rendered above the message list when the user is
-// in the current conversation's call. Shows participant avatars + controls.
+interface Tile {
+  userId: string;
+  displayName: string;
+  avatarUrl: string | null;
+  self: boolean;
+  muted: boolean;
+  video: boolean;
+  sharing: boolean;
+  remoteSharing: boolean;
+}
+
 export function InCallPanel({ conversation }: Props) {
   const { t } = useTranslation(['app']);
   const {
     state,
+    room,
     remoteParticipants,
     isMuted,
     isE2EEActive,
-    toggleMute,
-    hangup,
     isScreenSharing,
     remoteScreenShares,
+    callMode,
+    focusedId,
+    toggleMute,
     toggleScreenShare,
+    hangup,
+    setCallMode,
+    setFocusedId,
   } = useCall();
   const { session } = useAuth();
   const myId = session?.user.id ?? null;
+  const activeSpeakers = useActiveSpeakers(room);
 
   const active =
     (state.kind === 'connected' ||
@@ -49,33 +63,19 @@ export function InCallPanel({ conversation }: Props) {
     state.conversationId === conversation.id;
   if (!active) return null;
 
-  const remoteIds = new Set<string>(
-    remoteParticipants.map((p) => p.identity).filter((s): s is string => Boolean(s)),
-  );
-  const tiles: ParticipantTileData[] = [];
-  if (myId) {
-    const me = conversation.members.find((m) => m.userId === myId) ?? null;
-    tiles.push({
-      userId: myId,
-      displayName: me?.profile?.displayName ?? '?',
-      avatarUrl: me?.profile?.avatarUrl ?? null,
-      self: true,
-      speaking: false,
-      muted: isMuted,
-    });
-  }
-  for (const m of conversation.members) {
-    if (m.userId === myId) continue;
-    if (!remoteIds.has(m.userId)) continue;
-    tiles.push({
-      userId: m.userId,
-      displayName: m.profile?.displayName ?? '?',
-      avatarUrl: m.profile?.avatarUrl ?? null,
-      self: false,
-      speaking: false,
-      muted: false,
-    });
-  }
+  const tiles = buildTiles({
+    conversation,
+    myId,
+    remoteIdentities: remoteParticipants.map((p) => p.identity),
+    isMuted,
+    isScreenSharing,
+    remoteSharerIds: new Set(remoteScreenShares.map((s) => s.participantId)),
+  });
+
+  const duration =
+    state.kind === 'connected'
+      ? <LiveDuration startedAt={state.startedAt} />
+      : null;
 
   const statusLabel =
     state.kind === 'outgoing'
@@ -86,268 +86,491 @@ export function InCallPanel({ conversation }: Props) {
           ? t('app:call.waiting_for_peers', { defaultValue: 'Warte auf andere…' })
           : t('app:call.connected');
 
+  const sharingTile = tiles.find((p) => p.sharing);
+  const effectiveFocusedId = focusedId ?? sharingTile?.userId ?? tiles[0]?.userId ?? null;
+  const speaker = tiles.find((p) => p.userId === effectiveFocusedId) ?? tiles[0];
+
+  const controls = (
+    <CallControls
+      muted={isMuted}
+      sharing={isScreenSharing}
+      video={false}
+      onToggleMute={toggleMute}
+      onToggleShare={() => void toggleScreenShare()}
+      onHangup={() => void hangup()}
+      compact={callMode !== 'fullscreen'}
+      glass={callMode === 'fullscreen'}
+      disabledMedia={state.kind !== 'connected'}
+    />
+  );
+
+  if (callMode === 'fullscreen') {
+    return (
+      <FullscreenCall
+        tiles={tiles}
+        speaker={speaker}
+        remoteScreenShares={remoteScreenShares}
+        conversationMembers={conversation.members}
+        activeSpeakers={activeSpeakers}
+        e2ee={isE2EEActive}
+        onExit={() => setCallMode('grid')}
+        onFocusTile={(id) => {
+          setFocusedId(id);
+        }}
+        controls={controls}
+      />
+    );
+  }
+
+  const title =
+    conversation.type === 'group'
+      ? conversation.name ?? t('app:chats.new_group')
+      : conversation.peer?.displayName ?? '—';
+
   return (
     <section
       aria-label={t('app:call.in_call', { defaultValue: 'Im Anruf' })}
-      className="border-b border-white/5 bg-gradient-to-b from-ink-900/80 to-ink-950/40 px-6 py-5"
+      className="flex min-h-[280px] max-h-[420px] shrink-0 flex-col overflow-hidden border-b border-line bg-surface-2"
+      style={{ height: '50%' }}
     >
-      <div className="mb-4 flex items-center gap-2 text-xs font-medium text-emerald-300">
-        {state.kind === 'connecting' ? (
-          <SpinnerIcon className="h-3.5 w-3.5" />
-        ) : (
-          <span className="relative flex h-2 w-2">
-            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400/60" />
-            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
-          </span>
-        )}
-        <span className="uppercase tracking-wide">{statusLabel}</span>
-        {isE2EEActive && (
-          <span
-            className="ml-2 inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-200 ring-1 ring-emerald-400/30"
-            title={t('app:call.e2ee_active_hint', {
-              defaultValue: 'Audio + Video sind Ende-zu-Ende-verschlüsselt',
-            })}
-          >
-            <LockIcon className="h-3 w-3" />
-            E2EE
-          </span>
-        )}
-      </div>
-
-      <div className="flex flex-wrap justify-center gap-4">
-        {tiles.map((p) => (
-          <ParticipantTile key={p.userId} {...p} />
-        ))}
-      </div>
-
-      {remoteScreenShares.length > 0 && (
-        <div className="mt-4 space-y-3">
-          {remoteScreenShares.map((s) => {
-            const member = conversation.members.find((m) => m.userId === s.participantId);
-            return (
-              <ScreenShareViewer
-                key={s.track.sid ?? s.participantId}
-                share={s}
-                avatarUrl={member?.profile?.avatarUrl ?? null}
-                displayName={member?.profile?.displayName ?? s.participantName}
-              />
-            );
-          })}
-        </div>
-      )}
-
-      <div className="mt-5 flex items-center justify-center gap-2">
-        <ControlButton
-          onClick={toggleMute}
-          disabled={state.kind !== 'connected'}
-          active={isMuted}
-          label={isMuted ? t('app:call.unmute') : t('app:call.mute')}
-          tone={isMuted ? 'amber' : 'neutral'}
-        >
-          {isMuted ? <MicOffIcon className="h-5 w-5" /> : <MicIcon className="h-5 w-5" />}
-        </ControlButton>
-        <ControlButton
-          onClick={() => void toggleScreenShare()}
-          disabled={state.kind !== 'connected'}
-          active={isScreenSharing}
-          label={
-            isScreenSharing
-              ? t('app:call.stop_share_screen', { defaultValue: 'Screen-Share stoppen' })
-              : t('app:call.share_screen', { defaultValue: 'Bildschirm teilen' })
-          }
-          tone={isScreenSharing ? 'emerald' : 'neutral'}
-        >
-          {isScreenSharing ? (
-            <MonitorStopIcon className="h-5 w-5" />
-          ) : (
-            <MonitorShareIcon className="h-5 w-5" />
+      <div className="flex items-center justify-between border-b border-line bg-surface-3 px-4 py-2">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <div className="flex items-center gap-2 text-sm font-semibold text-fg">
+            <UsersIcon className="h-4 w-4 shrink-0 text-fg-muted" />
+            <span className="truncate">{title}</span>
+            <span className="text-fg-muted/50" aria-hidden="true">·</span>
+            <span className="tabular-nums text-fg-muted">
+              {duration ?? statusLabel}
+              {state.kind !== 'connected' && (
+                <SpinnerIcon className="ml-1 inline h-3 w-3" />
+              )}
+            </span>
+          </div>
+          {isE2EEActive && (
+            <div className="flex items-center gap-1 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
+              <LockIcon className="h-3 w-3" />
+              <span>{t('app:call.e2ee_active', { defaultValue: 'E2E verschlüsselt' })}</span>
+            </div>
           )}
-        </ControlButton>
-        <ControlButton
-          onClick={() => void hangup()}
-          label={t('app:call.hangup')}
-          tone="rose"
-        >
-          <PhoneOffIcon className="h-5 w-5" />
-        </ControlButton>
+        </div>
+        <ModeToggles mode={callMode} onChange={setCallMode} />
       </div>
 
+      <CallStage
+        tiles={tiles}
+        speaker={speaker}
+        mode={callMode}
+        activeSpeakers={activeSpeakers}
+        e2ee={isE2EEActive}
+        remoteScreenShares={remoteScreenShares}
+        conversationMembers={conversation.members}
+        onFocusTile={(id) => {
+          setFocusedId(id);
+          if (callMode === 'grid') setCallMode('focus');
+        }}
+        compact
+      />
+
+      {controls}
+
       <PttHint />
     </section>
   );
 }
 
-interface ScreenShareViewerProps {
-  share: RemoteScreenShare;
-  avatarUrl: string | null;
-  displayName: string;
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface BuildArgs {
+  conversation: ConversationSummary;
+  myId: string | null;
+  remoteIdentities: string[];
+  isMuted: boolean;
+  isScreenSharing: boolean;
+  remoteSharerIds: Set<string>;
 }
 
-function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShareViewerProps) {
-  const { t } = useTranslation(['app']);
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [watching, setWatching] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+function buildTiles({
+  conversation,
+  myId,
+  remoteIdentities,
+  isMuted,
+  isScreenSharing,
+  remoteSharerIds,
+}: BuildArgs): Tile[] {
+  const remoteSet = new Set(remoteIdentities);
+  const out: Tile[] = [];
+  if (myId) {
+    const me = conversation.members.find((m) => m.userId === myId) ?? null;
+    out.push({
+      userId: myId,
+      displayName: me?.profile?.displayName ?? '?',
+      avatarUrl: me?.profile?.avatarUrl ?? null,
+      self: true,
+      muted: isMuted,
+      video: false,
+      sharing: isScreenSharing,
+      remoteSharing: false,
+    });
+  }
+  for (const m of conversation.members) {
+    if (m.userId === myId) continue;
+    if (!remoteSet.has(m.userId)) continue;
+    const sharing = remoteSharerIds.has(m.userId);
+    out.push({
+      userId: m.userId,
+      displayName: m.profile?.displayName ?? '?',
+      avatarUrl: m.profile?.avatarUrl ?? null,
+      self: false,
+      muted: false,
+      video: false,
+      sharing,
+      remoteSharing: sharing,
+    });
+  }
+  return out;
+}
 
+function LiveDuration({ startedAt }: { startedAt: string }) {
+  const [, tick] = useState(0);
   useEffect(() => {
-    if (!watching) return;
-    const el = videoRef.current;
-    if (!el) return;
-    const track: RemoteTrack = share.track;
-    track.attach(el);
-    return () => {
-      track.detach(el);
-    };
-  }, [share.track, watching]);
-
-  useEffect(() => {
-    const onChange = () => {
-      setIsFullscreen(document.fullscreenElement === containerRef.current);
-    };
-    document.addEventListener('fullscreenchange', onChange);
-    return () => document.removeEventListener('fullscreenchange', onChange);
+    const id = window.setInterval(() => tick((v) => v + 1), 1000);
+    return () => window.clearInterval(id);
   }, []);
+  return <>{formatElapsed(Date.now() - new Date(startedAt).getTime())}</>;
+}
 
-  const toggleFullscreen = () => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (document.fullscreenElement === el) {
-      void document.exitFullscreen();
-    } else {
-      void el.requestFullscreen();
-    }
-  };
+function formatElapsed(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hh = Math.floor(total / 3600);
+  const mm = Math.floor((total % 3600) / 60);
+  const ss = total % 60;
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${pad(hh)}:${pad(mm)}:${pad(ss)}`;
+}
 
+function ModeToggles({
+  mode,
+  onChange,
+}: {
+  mode: CallMode;
+  onChange: (mode: CallMode) => void;
+}) {
   return (
-    <div
-      ref={containerRef}
+    <div className="flex items-center gap-1">
+      <ModeButton active={mode === 'grid'} onClick={() => onChange('grid')} label="Grid">
+        <GridIcon className="h-4 w-4" />
+      </ModeButton>
+      <ModeButton active={mode === 'focus'} onClick={() => onChange('focus')} label="Fokus">
+        <FocusIcon className="h-4 w-4" />
+      </ModeButton>
+      <ModeButton
+        active={mode === 'fullscreen'}
+        onClick={() => onChange('fullscreen')}
+        label="Vollbild"
+      >
+        <MaximizeIcon className="h-4 w-4" />
+      </ModeButton>
+    </div>
+  );
+}
+
+function ModeButton({
+  active,
+  onClick,
+  label,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      aria-pressed={active}
+      title={label}
       className={
-        'overflow-hidden rounded-xl border border-emerald-500/20 bg-black ' +
-        (isFullscreen ? 'flex h-screen w-screen flex-col rounded-none' : '')
+        'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 ' +
+        (active
+          ? 'border-accent bg-accent text-accent-fg'
+          : 'border-line bg-surface-2 text-fg-muted hover:bg-surface-3 hover:text-fg')
       }
     >
-      <div className="flex shrink-0 items-center gap-2 border-b border-emerald-500/10 bg-emerald-500/10 px-3 py-1.5 text-xs text-emerald-200">
-        <MonitorShareIcon className="h-3.5 w-3.5 shrink-0" />
-        <span className="truncate flex-1">
-          {t('app:call.is_sharing_screen', {
-            name: displayName,
-            defaultValue: displayName + ' teilt den Bildschirm',
-          })}
-        </span>
-        {watching && (
-          <>
-            <button
-              type="button"
-              onClick={toggleFullscreen}
-              aria-label={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
-              title={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
-              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            >
-              <FullscreenIcon className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                if (document.fullscreenElement === containerRef.current) {
-                  void document.exitFullscreen();
-                }
-                setWatching(false);
-              }}
-              aria-label={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              title={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            >
-              <span aria-hidden="true" className="text-[14px] leading-none">×</span>
-            </button>
-          </>
+      {children}
+    </button>
+  );
+}
+
+interface StageProps {
+  tiles: Tile[];
+  speaker: Tile | undefined;
+  mode: CallMode;
+  activeSpeakers: Set<string>;
+  e2ee: boolean;
+  remoteScreenShares: {
+    track: import('livekit-client').RemoteTrack;
+    participantId: string;
+    participantName: string;
+  }[];
+  conversationMembers: ConversationSummary['members'];
+  onFocusTile: (id: string) => void;
+  compact?: boolean;
+}
+
+function CallStage({
+  tiles,
+  speaker,
+  mode,
+  activeSpeakers,
+  e2ee,
+  remoteScreenShares,
+  conversationMembers,
+  onFocusTile,
+  compact = false,
+}: StageProps) {
+  if (mode === 'focus' && speaker) {
+    const others = tiles.filter((p) => p.userId !== speaker.userId);
+    return (
+      <div className="flex min-h-0 flex-1 flex-col gap-2.5 p-3">
+        <div className="min-h-0 flex-1">
+          <FocusedTile
+            tile={speaker}
+            e2ee={e2ee}
+            speaking={activeSpeakers.has(speaker.userId)}
+            remoteScreenShares={remoteScreenShares}
+            conversationMembers={conversationMembers}
+          />
+        </div>
+        {others.length > 0 && (
+          <div className="flex h-[110px] gap-2.5 overflow-x-auto">
+            {others.map((p) => (
+              <div key={p.userId} className="h-full min-w-[160px]">
+                <CallParticipantTile
+                  userId={p.userId}
+                  displayName={p.displayName}
+                  avatarUrl={p.avatarUrl}
+                  me={p.self}
+                  muted={p.muted}
+                  speaking={activeSpeakers.has(p.userId)}
+                  sharing={p.sharing}
+                  video={p.video}
+                  e2ee={e2ee}
+                  size="small"
+                  onClick={() => onFocusTile(p.userId)}
+                />
+              </div>
+            ))}
+          </div>
         )}
       </div>
-
-      {watching ? (
-        <video
-          ref={videoRef}
-          autoPlay
-          playsInline
-          muted
-          onDoubleClick={toggleFullscreen}
-          className={
-            'block cursor-zoom-in bg-black ' +
-            (isFullscreen ? 'h-full w-full flex-1 object-contain' : 'w-full')
-          }
-        />
-      ) : (
-        <button
-          type="button"
-          onClick={() => setWatching(true)}
-          aria-label={t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
-          className="group relative block w-full cursor-pointer overflow-hidden bg-ink-900 focus:outline-none"
-          style={{ aspectRatio: '16 / 9' }}
-        >
-          <BlurredTile avatarUrl={avatarUrl} letter={letter} />
-          <div className="absolute inset-0 flex items-center justify-center bg-black/30 transition group-hover:bg-black/40">
-            <div className="flex flex-col items-center gap-2">
-              <span className="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/90 text-white shadow-lg transition group-hover:scale-105">
-                <PlayIcon className="ml-0.5 h-6 w-6" />
-              </span>
-              <span className="text-xs font-medium text-white/90">
-                {t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
-              </span>
-            </div>
-          </div>
-        </button>
-      )}
-    </div>
-  );
-}
-
-function BlurredTile({ avatarUrl, letter }: { avatarUrl: string | null; letter: string }) {
-  if (avatarUrl) {
-    return (
-      <>
-        <img
-          src={avatarUrl}
-          alt=""
-          className="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl"
-        />
-        <div className="absolute inset-0 bg-gradient-to-br from-brand-500/20 to-emerald-500/20" />
-      </>
     );
   }
+
+  // Grid
+  const gridClass = gridColsFor(tiles.length);
   return (
-    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-500/40 via-fuchsia-500/20 to-emerald-500/30">
-      <span
-        aria-hidden="true"
-        className="text-[120px] font-display font-bold text-white/20 blur-[2px]"
-      >
-        {letter}
-      </span>
+    <div className={'min-h-0 flex-1 p-3 ' + (compact ? '' : 'p-4')}>
+      <div className={'grid h-full gap-2 ' + gridClass}>
+        {tiles.map((p) => (
+          <CallParticipantTile
+            key={p.userId}
+            userId={p.userId}
+            displayName={p.displayName}
+            avatarUrl={p.avatarUrl}
+            me={p.self}
+            muted={p.muted}
+            speaking={activeSpeakers.has(p.userId)}
+            sharing={p.sharing}
+            video={p.video}
+            e2ee={e2ee}
+            onClick={() => onFocusTile(p.userId)}
+          />
+        ))}
+      </div>
     </div>
   );
 }
 
-function PlayIcon(props: React.SVGProps<SVGSVGElement>) {
+function FocusedTile({
+  tile,
+  e2ee,
+  speaking,
+  remoteScreenShares,
+  conversationMembers,
+}: {
+  tile: Tile;
+  e2ee: boolean;
+  speaking: boolean;
+  remoteScreenShares: StageProps['remoteScreenShares'];
+  conversationMembers: StageProps['conversationMembers'];
+}) {
+  // When the focused participant is remotely sharing their screen, embed the
+  // real video stream rather than the fake-window placeholder.
+  if (tile.remoteSharing) {
+    const share = remoteScreenShares.find((s) => s.participantId === tile.userId);
+    const member = conversationMembers.find((m) => m.userId === tile.userId);
+    if (share) {
+      return (
+        <div className="h-full">
+          <ScreenShareViewer
+            share={share}
+            avatarUrl={member?.profile?.avatarUrl ?? tile.avatarUrl}
+            displayName={member?.profile?.displayName ?? tile.displayName}
+          />
+        </div>
+      );
+    }
+  }
   return (
-    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
-      <path d="M8 5v14l11-7z" />
-    </svg>
+    <div className="h-full">
+      <CallParticipantTile
+        userId={tile.userId}
+        displayName={tile.displayName}
+        avatarUrl={tile.avatarUrl}
+        me={tile.self}
+        muted={tile.muted}
+        speaking={speaking}
+        sharing={tile.sharing}
+        video={tile.video}
+        e2ee={e2ee}
+        focused
+      />
+    </div>
   );
 }
 
-function FullscreenIcon(props: React.SVGProps<SVGSVGElement>) {
+function gridColsFor(n: number): string {
+  if (n <= 1) return 'grid-cols-1';
+  if (n === 2) return 'grid-cols-2';
+  if (n === 3) return 'grid-cols-3';
+  if (n === 4) return 'grid-cols-2 grid-rows-2';
+  return 'grid-cols-3 grid-rows-2';
+}
+
+// ---------------------------------------------------------------------------
+// Fullscreen cinema mode
+// ---------------------------------------------------------------------------
+
+interface FullscreenProps {
+  tiles: Tile[];
+  speaker: Tile | undefined;
+  remoteScreenShares: StageProps['remoteScreenShares'];
+  conversationMembers: StageProps['conversationMembers'];
+  activeSpeakers: Set<string>;
+  e2ee: boolean;
+  onExit: () => void;
+  onFocusTile: (id: string) => void;
+  controls: React.ReactNode;
+}
+
+function FullscreenCall({
+  tiles,
+  speaker,
+  remoteScreenShares,
+  conversationMembers,
+  activeSpeakers,
+  e2ee,
+  onExit: _onExit,
+  onFocusTile,
+  controls,
+}: FullscreenProps) {
+  const others = speaker ? tiles.filter((p) => p.userId !== speaker.userId) : tiles;
+  const [hintGone, setHintGone] = useState(false);
+  useEffect(() => {
+    const id = window.setTimeout(() => setHintGone(true), 3500);
+    return () => window.clearTimeout(id);
+  }, []);
+
   return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
-    </svg>
+    <div className="absolute inset-0 z-40 flex flex-col overflow-hidden bg-surface">
+      <div className="relative min-h-0 flex-1">
+        {speaker && (
+          <div className="absolute inset-0">
+            {speaker.remoteSharing ? (
+              <FullscreenShare speaker={speaker} remoteScreenShares={remoteScreenShares} conversationMembers={conversationMembers} />
+            ) : (
+              <div className="h-full w-full [&>div]:rounded-none [&>div]:border-0">
+                <CallParticipantTile
+                  userId={speaker.userId}
+                  displayName={speaker.displayName}
+                  avatarUrl={speaker.avatarUrl}
+                  me={speaker.self}
+                  muted={speaker.muted}
+                  speaking={activeSpeakers.has(speaker.userId)}
+                  sharing={speaker.sharing}
+                  video={speaker.video}
+                  e2ee={e2ee}
+                  focused
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {others.length > 0 && (
+          <div className="absolute bottom-24 right-4 flex w-[180px] flex-col gap-2">
+            {others.slice(0, 4).map((p) => (
+              <div key={p.userId} className="h-[100px] backdrop-blur-xl">
+                <CallParticipantTile
+                  userId={p.userId}
+                  displayName={p.displayName}
+                  avatarUrl={p.avatarUrl}
+                  me={p.self}
+                  muted={p.muted}
+                  speaking={activeSpeakers.has(p.userId)}
+                  sharing={p.sharing}
+                  video={p.video}
+                  e2ee={e2ee}
+                  size="small"
+                  onClick={() => onFocusTile(p.userId)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!hintGone && (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute left-1/2 top-5 z-10 animate-fs-hint rounded-lg border border-white/10 bg-black/60 px-3.5 py-1.5 text-[11px] font-medium tracking-wide text-white/70 backdrop-blur-md"
+          >
+            Esc zum Verlassen
+          </div>
+        )}
+
+        <div className="pointer-events-auto absolute bottom-4 left-1/2 -translate-x-1/2">
+          {controls}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FullscreenShare({
+  speaker,
+  remoteScreenShares,
+  conversationMembers,
+}: {
+  speaker: Tile;
+  remoteScreenShares: StageProps['remoteScreenShares'];
+  conversationMembers: StageProps['conversationMembers'];
+}) {
+  const share = remoteScreenShares.find((s) => s.participantId === speaker.userId);
+  const member = conversationMembers.find((m) => m.userId === speaker.userId);
+  if (!share) return null;
+  return (
+    <div className="h-full w-full">
+      <ScreenShareViewer
+        share={share}
+        avatarUrl={member?.profile?.avatarUrl ?? speaker.avatarUrl}
+        displayName={member?.profile?.displayName ?? speaker.displayName}
+      />
+    </div>
   );
 }
 
@@ -356,95 +579,11 @@ function PttHint() {
   useEffect(() => subscribePttSettings(setPtt), []);
   if (!ptt.enabled) return null;
   return (
-    <p className="mt-3 text-center text-[11px] text-neutral-500">
+    <p className="border-t border-line bg-surface-3 py-2 text-center text-[11px] text-fg-muted">
       Push-to-Talk:&nbsp;
-      <kbd className="rounded border border-white/10 bg-white/5 px-1.5 py-0.5 font-mono text-[10px] text-neutral-300">
+      <kbd className="rounded border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-[10px] text-fg">
         {ptt.keyLabel}
       </kbd>
     </p>
   );
 }
-
-interface ParticipantTileData {
-  userId: string;
-  displayName: string;
-  avatarUrl: string | null;
-  self: boolean;
-  speaking: boolean;
-  muted: boolean;
-}
-
-function ParticipantTile(p: ParticipantTileData) {
-  const letter = p.displayName.trim().charAt(0).toUpperCase() || '?';
-  return (
-    <div className="flex w-28 flex-col items-center gap-2">
-      <div
-        className={
-          'relative flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500/40 to-brand-700/40 text-2xl font-semibold text-white ring-2 transition ' +
-          (p.speaking
-            ? 'ring-emerald-400 shadow-[0_0_24px_rgba(52,211,153,0.35)]'
-            : 'ring-white/10')
-        }
-      >
-        {p.avatarUrl ? (
-          <img
-            src={p.avatarUrl}
-            alt=""
-            className="h-full w-full rounded-2xl object-cover"
-          />
-        ) : (
-          <span aria-hidden="true">{letter}</span>
-        )}
-        {p.muted && (
-          <span
-            aria-hidden="true"
-            className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 ring-2 ring-ink-950"
-          >
-            <MicOffIcon className="h-3 w-3 text-ink-950" />
-          </span>
-        )}
-      </div>
-      <p className="max-w-full truncate text-xs font-medium text-neutral-200">
-        {p.displayName}
-        {p.self && (
-          <span className="ml-1 text-neutral-500">·&nbsp;Du</span>
-        )}
-      </p>
-    </div>
-  );
-}
-
-interface ControlButtonProps {
-  onClick: () => void;
-  label: string;
-  tone: 'neutral' | 'amber' | 'rose' | 'emerald';
-  active?: boolean;
-  disabled?: boolean;
-  children: React.ReactNode;
-}
-
-function ControlButton({ onClick, label, tone, disabled, children }: ControlButtonProps) {
-  const toneClass =
-    tone === 'rose'
-      ? 'bg-rose-500 text-white hover:bg-rose-400 focus-visible:ring-rose-400/50'
-      : tone === 'amber'
-        ? 'bg-amber-500/90 text-ink-950 hover:bg-amber-400 focus-visible:ring-amber-400/50'
-        : tone === 'emerald'
-          ? 'bg-emerald-500/85 text-white hover:bg-emerald-400 focus-visible:ring-emerald-400/50'
-          : 'bg-white/10 text-neutral-100 hover:bg-white/20 focus-visible:ring-brand-400/40';
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={label}
-      title={label}
-      className={
-        'inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-full transition focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ' +
-        toneClass
-      }
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/apps/desktop/src/components/IncomingCallPanel.tsx b/apps/desktop/src/components/IncomingCallPanel.tsx
new file mode 100644
index 0000000..84ebfed
--- /dev/null
+++ b/apps/desktop/src/components/IncomingCallPanel.tsx
@@ -0,0 +1,123 @@
+import type { ConversationSummary } from '@chat-app/shared/chat';
+import { useTranslation } from 'react-i18next';
+
+import { useCall } from '../context/CallContext';
+import { useFriendshipsContext } from '../context/FriendshipsContext';
+import { AvatarColorKey, colorKeyFor } from './CallParticipantTile';
+import { LockIcon, PhoneIcon, PhoneOffIcon } from './icons';
+
+interface Props {
+  conversation: ConversationSummary;
+}
+
+const PULSE_BG: Record<AvatarColorKey, string> = {
+  violet: 'bg-violet-200 text-violet-800 dark:bg-violet-900/60 dark:text-violet-200',
+  amber: 'bg-amber-200 text-amber-900 dark:bg-amber-900/60 dark:text-amber-200',
+  rose: 'bg-rose-200 text-rose-900 dark:bg-rose-900/60 dark:text-rose-200',
+  teal: 'bg-teal-200 text-teal-900 dark:bg-teal-900/60 dark:text-teal-200',
+};
+
+// Docked incoming-call panel: replaces the chat header, chat + composer stay
+// visible and usable below (per user decision). Full-bleed overlay lives in
+// the shell-level toast for cross-conversation ring notifications.
+export function IncomingCallPanel({ conversation }: Props) {
+  const { t } = useTranslation(['app']);
+  const { state, acceptIncoming, rejectIncoming } = useCall();
+  const { friendships } = useFriendshipsContext();
+
+  if (state.kind !== 'incoming' || state.conversationId !== conversation.id) return null;
+
+  const isGroup = conversation.type === 'group';
+  const callerProfile = conversation.members.find((m) => m.userId === state.fromUserId)?.profile ?? null;
+  const callerName =
+    callerProfile?.displayName ??
+    friendships.find((f) => f.peer.userId === state.fromUserId)?.peer.displayName ??
+    '?';
+  const groupName = isGroup ? (conversation.name ?? t('app:chats.new_group')) : null;
+  const title = isGroup ? groupName ?? callerName : callerName;
+  const letter = title.trim().charAt(0).toUpperCase() || '?';
+  const avatarUrl = isGroup
+    ? (conversation.avatarUrl ?? callerProfile?.avatarUrl ?? null)
+    : callerProfile?.avatarUrl ?? null;
+  const colorKey = colorKeyFor(state.fromUserId);
+  const avatarTone = PULSE_BG[colorKey];
+  const mediaLabel =
+    state.mediaKind === 'video' ? 'Video Call' : 'Voice Call';
+
+  return (
+    <section
+      role="region"
+      aria-label={t('app:call.incoming_title')}
+      className="relative overflow-hidden border-b border-line bg-surface-3"
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(79,70,229,0.10),transparent_60%),radial-gradient(circle_at_70%_80%,rgba(109,115,255,0.08),transparent_55%)]" />
+      <div className="relative mx-auto flex max-w-[480px] flex-col items-center px-6 py-8 text-center">
+        <p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-fg-muted">
+          {t('app:call.incoming_title')}
+        </p>
+        <div className="relative my-4 flex h-[112px] w-[112px] items-center justify-center">
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 rounded-full border-2 border-accent animate-pulse-ring"
+          />
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 rounded-full border-2 border-accent animate-pulse-ring"
+            style={{ animationDelay: '1s' }}
+          />
+          {avatarUrl ? (
+            <img
+              src={avatarUrl}
+              alt={title}
+              className="h-24 w-24 rounded-full border-[3px] border-surface-3 object-cover"
+              draggable={false}
+            />
+          ) : (
+            <div
+              className={
+                'flex h-24 w-24 items-center justify-center rounded-full border-[3px] border-surface-3 font-display text-4xl font-bold ' +
+                avatarTone
+              }
+            >
+              {letter}
+            </div>
+          )}
+        </div>
+        <p className="font-display text-2xl font-bold tracking-tight text-fg">{title}</p>
+        <p className="mt-1.5 flex items-center gap-1.5 text-xs text-fg-muted">
+          <LockIcon className="h-3.5 w-3.5" />
+          <span>E2E verschlüsselt · {mediaLabel}</span>
+          {isGroup && (
+            <>
+              <span className="text-fg-muted/50" aria-hidden="true">·</span>
+              <span>
+                {t('app:call.incoming_group_from', {
+                  name: callerName,
+                  defaultValue: callerName + ' ruft an',
+                })}
+              </span>
+            </>
+          )}
+        </p>
+        <div className="mt-5 flex w-full max-w-[360px] gap-3">
+          <button
+            type="button"
+            onClick={rejectIncoming}
+            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-rose-500/40 bg-transparent px-5 py-3.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
+          >
+            <PhoneOffIcon className="h-4 w-4" />
+            <span>{t('app:call.decline')}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => void acceptIncoming()}
+            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-accept-btn transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
+          >
+            <PhoneIcon className="h-4 w-4" />
+            <span>{t('app:call.accept')}</span>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/desktop/src/components/MessageBubble.tsx b/apps/desktop/src/components/MessageBubble.tsx
index 20d1e35..d78a130 100644
--- a/apps/desktop/src/components/MessageBubble.tsx
+++ b/apps/desktop/src/components/MessageBubble.tsx
@@ -14,6 +14,7 @@ import { devLocalSecretStore } from '../lib/secretStore';
 import { supabase } from '../lib/supabase';
 import type { AggregatedReaction } from '../lib/useMessageReactions';
 import { AttachmentImage } from './AttachmentImage';
+import { Avatar } from './Avatar';
 import { PencilIcon, PhoneIcon, PhoneOffIcon, SmileIcon, SpinnerIcon, TrashIcon, XIcon } from './icons';
 
 const EMOJI_CHOICES = ['👍', '❤️', '😂', '🎉', '🔥', '😮', '😢', '🙏'];
@@ -23,6 +24,10 @@ interface Props {
   message: DecryptedMessage;
   mine: boolean;
   groupedWithPrev: boolean;
+  /** Last message of a run from this sender — anchor avatar on this row. */
+  isLastOfRun?: boolean;
+  senderDisplayName?: string | null | undefined;
+  senderAvatarUrl?: string | null | undefined;
   conversationId: string;
   reactions: AggregatedReaction[];
   onToggleReaction: (emoji: string) => Promise<void>;
@@ -33,6 +38,9 @@ export function MessageBubble({
   message,
   mine,
   groupedWithPrev,
+  isLastOfRun = false,
+  senderDisplayName,
+  senderAvatarUrl,
   conversationId,
   reactions,
   onToggleReaction,
@@ -143,8 +151,13 @@ export function MessageBubble({
 
   if (message.deletedAt) {
     return (
-      <div className={'flex ' + (mine ? 'justify-end' : 'justify-start')}>
-        <div className="max-w-[70%] rounded-2xl border border-white/5 bg-white/5 px-3.5 py-1.5 text-xs italic text-neutral-500">
+      <div className={'flex items-end gap-2 ' + (mine ? 'flex-row-reverse' : '')}>
+        <AvatarSlot
+          show={isLastOfRun}
+          url={senderAvatarUrl ?? null}
+          displayName={senderDisplayName ?? null}
+        />
+        <div className="max-w-[calc(70%-2.5rem)] rounded-2xl border border-line bg-surface-2 px-3.5 py-1.5 text-xs italic text-fg-muted">
           {t('app:chats.deleted')}
         </div>
       </div>
@@ -156,14 +169,19 @@ export function MessageBubble({
   }
 
   return (
-    <div className={'flex ' + (mine ? 'justify-end' : 'justify-start')}>
+    <div className={'flex items-end gap-2 ' + (mine ? 'flex-row-reverse' : '')}>
+      <AvatarSlot
+        show={isLastOfRun}
+        url={senderAvatarUrl ?? null}
+        displayName={senderDisplayName ?? null}
+      />
       <div
         className={
-          'group relative max-w-[70%] ' + (groupedWithPrev ? 'mt-0.5' : 'mt-2')
+          'group relative max-w-[calc(70%-2.5rem)] ' + (groupedWithPrev ? 'mt-0.5' : 'mt-2')
         }
       >
         {editing ? (
-          <div className="rounded-2xl border border-brand-400/40 bg-ink-900/80 p-2 backdrop-blur-xl">
+          <div className="rounded-2xl border border-accent/40 bg-surface-2 p-2 shadow-sm">
             <textarea
               value={editText}
               onChange={(e) => setEditText(e.target.value)}
@@ -179,10 +197,10 @@ export function MessageBubble({
               }}
               rows={2}
               autoFocus
-              className="w-full resize-none rounded-md bg-ink-800 px-3 py-2 text-sm text-white outline-none focus:ring-2 focus:ring-brand-400/60"
+              className="w-full resize-none rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg outline-none focus:ring-2 focus:ring-accent/50"
             />
             {editError && (
-              <p className="mt-1.5 break-words rounded-md border border-rose-500/20 bg-rose-500/10 px-2 py-1 text-[11px] text-rose-200">
+              <p className="mt-1.5 break-words rounded-md border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-[11px] text-rose-600 dark:text-rose-200">
                 {editError}
               </p>
             )}
@@ -193,7 +211,7 @@ export function MessageBubble({
                   setEditing(false);
                   setEditError(null);
                 }}
-                className="cursor-pointer rounded-md border border-white/10 bg-white/5 px-3 py-1 text-xs text-neutral-200 hover:bg-white/10"
+                className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1 text-xs text-fg hover:bg-surface-2"
               >
                 {t('app:friends.action_cancel')}
               </button>
@@ -201,7 +219,7 @@ export function MessageBubble({
                 type="button"
                 disabled={busy}
                 onClick={() => void handleEditSave()}
-                className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-brand-500/90 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-400 disabled:opacity-60"
+                className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-1 text-xs font-semibold text-accent-fg hover:brightness-110 disabled:opacity-60"
               >
                 {busy && <SpinnerIcon className="h-3.5 w-3.5" />}
                 <span>{t('common:save', { defaultValue: 'Save' })}</span>
@@ -211,14 +229,14 @@ export function MessageBubble({
         ) : (
           <div
             className={
-              'break-words rounded-2xl px-3.5 py-2 text-sm ' +
+              'break-words px-3.5 py-2 text-sm ' +
               (mine
-                ? 'bg-brand-500/85 text-white'
-                : 'border border-white/5 bg-ink-900/70 text-neutral-100')
+                ? 'rounded-[18px_18px_4px_18px] bg-accent text-accent-fg'
+                : 'rounded-[18px_18px_18px_4px] border border-line text-fg')
             }
           >
             {message.plaintext === null ? (
-              <span className="italic text-neutral-400">…cannot decrypt</span>
+              <span className="italic opacity-70">…cannot decrypt</span>
             ) : (
               <>
                 {bodyText.length > 0 && <div>{bodyText}</div>}
@@ -230,7 +248,7 @@ export function MessageBubble({
             <div
               className={
                 'mt-1 flex items-center gap-1.5 text-[10px] ' +
-                (mine ? 'text-brand-100/70' : 'text-neutral-500')
+                (mine ? 'text-accent-fg/75' : 'text-fg-muted')
               }
             >
               <span>{time}</span>
@@ -242,7 +260,7 @@ export function MessageBubble({
         )}
 
         {showSeen && mine && !editing && !message.deletedAt && (
-          <p className="mt-0.5 text-right text-[10px] text-neutral-500">
+          <p className="mt-0.5 text-right text-[10px] text-fg-muted">
             {t('app:chats.seen')}
           </p>
         )}
@@ -255,10 +273,10 @@ export function MessageBubble({
                 type="button"
                 onClick={() => void onToggleReaction(r.emoji)}
                 className={
-                  'inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+                  'inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                   (r.mine
-                    ? 'border-brand-400/40 bg-brand-500/20 text-brand-100'
-                    : 'border-white/10 bg-white/5 text-neutral-200 hover:bg-white/10')
+                    ? 'border-accent/40 bg-accent/20 text-accent'
+                    : 'border-line bg-surface-2 text-fg hover:bg-surface-3')
                 }
               >
                 <span>{r.emoji}</span>
@@ -275,7 +293,7 @@ export function MessageBubble({
               (mine ? 'right-full pr-2' : 'left-full pl-2')
             }
           >
-            <div className="flex items-center gap-0.5 rounded-lg border border-white/10 bg-ink-900/90 p-1 shadow-lg backdrop-blur-xl">
+            <div className="flex items-center gap-0.5 rounded-lg border border-line bg-surface-3 p-1 shadow-lg">
               <ActionButton
                 label={t('app:friends.action_accept', { defaultValue: 'React' })}
                 onClick={() => setPickerOpen((v) => !v)}
@@ -306,7 +324,7 @@ export function MessageBubble({
                 ref={pickerRef}
                 role="menu"
                 className={
-                  'absolute z-30 mt-1 flex gap-1 rounded-lg border border-white/10 bg-ink-900/95 p-1.5 shadow-xl backdrop-blur-xl ' +
+                  'absolute z-30 mt-1 flex gap-1 rounded-lg border border-line bg-surface-3 p-1.5 shadow-xl ' +
                   (mine ? 'right-0' : 'left-0')
                 }
               >
@@ -315,7 +333,7 @@ export function MessageBubble({
                     key={e}
                     type="button"
                     onClick={() => void handlePickEmoji(e)}
-                    className="cursor-pointer rounded-md px-2 py-1 text-lg transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+                    className="cursor-pointer rounded-md px-2 py-1 text-lg transition hover:bg-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
                   >
                     {e}
                   </button>
@@ -323,7 +341,7 @@ export function MessageBubble({
                 <button
                   type="button"
                   onClick={() => setPickerOpen(false)}
-                  className="cursor-pointer rounded-md px-1.5 py-1 text-neutral-500 transition hover:bg-white/10"
+                  className="cursor-pointer rounded-md px-1.5 py-1 text-fg-muted transition hover:bg-surface-2"
                 >
                   <XIcon className="h-4 w-4" />
                 </button>
@@ -336,6 +354,27 @@ export function MessageBubble({
   );
 }
 
+function AvatarSlot({
+  show,
+  url,
+  displayName,
+}: {
+  show: boolean;
+  url: string | null;
+  displayName: string | null;
+}) {
+  if (!show) {
+    return <div aria-hidden="true" className="h-8 w-8 shrink-0" />;
+  }
+  return (
+    <Avatar
+      url={url}
+      displayName={displayName ?? ''}
+      className="h-8 w-8 text-xs"
+    />
+  );
+}
+
 function CallEventRow({
   parsed,
   mine,
@@ -351,8 +390,8 @@ function CallEventRow({
 
   const Icon = isMissed ? PhoneOffIcon : PhoneIcon;
   const tone = isMissed
-    ? 'border-rose-500/20 bg-rose-500/10 text-rose-200'
-    : 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200';
+    ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-200'
+    : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-200';
 
   const label =
     status === 'ended'
@@ -408,10 +447,10 @@ function ActionButton({
       title={label}
       onClick={onClick}
       className={
-        'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+        'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
         (tone === 'danger'
-          ? 'text-neutral-400 hover:bg-rose-500/20 hover:text-rose-200'
-          : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100')
+          ? 'text-fg-muted hover:bg-rose-500/20 hover:text-rose-500 dark:hover:text-rose-200'
+          : 'text-fg-muted hover:bg-surface-2 hover:text-fg')
       }
     >
       {icon}
diff --git a/apps/desktop/src/components/Modal.tsx b/apps/desktop/src/components/Modal.tsx
index 20c78ab..d09c7bc 100644
--- a/apps/desktop/src/components/Modal.tsx
+++ b/apps/desktop/src/components/Modal.tsx
@@ -35,22 +35,22 @@ export function Modal({ open, title, onClose, children, size = 'md' }: Props) {
       aria-modal="true"
       aria-label={title}
       onClick={onClose}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-ink-950/80 p-6 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6 backdrop-blur-sm animate-fade-in"
     >
       <div
         onClick={(e) => e.stopPropagation()}
         className={
-          'relative w-full animate-slide-up rounded-2xl border border-white/10 bg-ink-900/95 shadow-xl backdrop-blur-xl ' +
+          'relative w-full animate-slide-up rounded-2xl border border-line bg-surface-3 shadow-xl ' +
           width
         }
       >
-        <header className="flex items-center justify-between border-b border-white/5 px-6 py-4">
-          <h2 className="font-display text-lg font-semibold text-white">{title}</h2>
+        <header className="flex items-center justify-between border-b border-line px-6 py-4">
+          <h2 className="font-display text-lg font-semibold text-fg">{title}</h2>
           <button
             type="button"
             onClick={onClose}
             aria-label="Close"
-            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-2 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           >
             <XIcon className="h-4 w-4" />
           </button>
diff --git a/apps/desktop/src/components/ScreenShareViewer.tsx b/apps/desktop/src/components/ScreenShareViewer.tsx
new file mode 100644
index 0000000..1084733
--- /dev/null
+++ b/apps/desktop/src/components/ScreenShareViewer.tsx
@@ -0,0 +1,182 @@
+import type { RemoteTrack } from 'livekit-client';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { RemoteScreenShare } from '../context/CallContext';
+import { MonitorShareIcon } from './icons';
+
+interface ScreenShareViewerProps {
+  share: RemoteScreenShare;
+  avatarUrl: string | null;
+  displayName: string;
+}
+
+// Click-to-watch gate, live <video> attach/detach, native fullscreen toggle.
+// Lifted out of the old InCallPanel so the new CallDock stays lean.
+export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShareViewerProps) {
+  const { t } = useTranslation(['app']);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [watching, setWatching] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+
+  useEffect(() => {
+    if (!watching) return;
+    const el = videoRef.current;
+    if (!el) return;
+    const track: RemoteTrack = share.track;
+    track.attach(el);
+    return () => {
+      track.detach(el);
+    };
+  }, [share.track, watching]);
+
+  useEffect(() => {
+    const onChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, []);
+
+  const toggleFullscreen = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (document.fullscreenElement === el) {
+      void document.exitFullscreen();
+    } else {
+      void el.requestFullscreen();
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={
+        'overflow-hidden rounded-xl border border-emerald-500/30 bg-black ' +
+        (isFullscreen ? 'flex h-screen w-screen flex-col rounded-none' : '')
+      }
+    >
+      <div className="flex shrink-0 items-center gap-2 border-b border-emerald-500/20 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-700 dark:text-emerald-200">
+        <MonitorShareIcon className="h-3.5 w-3.5 shrink-0" />
+        <span className="flex-1 truncate">
+          {t('app:call.is_sharing_screen', {
+            name: displayName,
+            defaultValue: displayName + ' teilt den Bildschirm',
+          })}
+        </span>
+        {watching && (
+          <>
+            <button
+              type="button"
+              onClick={toggleFullscreen}
+              aria-label={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
+              title={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
+              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
+            >
+              <FullscreenIcon className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (document.fullscreenElement === containerRef.current) {
+                  void document.exitFullscreen();
+                }
+                setWatching(false);
+              }}
+              aria-label={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
+              title={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
+              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
+            >
+              <span aria-hidden="true" className="text-[14px] leading-none">×</span>
+            </button>
+          </>
+        )}
+      </div>
+
+      {watching ? (
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          onDoubleClick={toggleFullscreen}
+          className={
+            'block cursor-zoom-in bg-black ' +
+            (isFullscreen ? 'h-full w-full flex-1 object-contain' : 'w-full')
+          }
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={() => setWatching(true)}
+          aria-label={t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
+          className="group relative block w-full cursor-pointer overflow-hidden bg-ink-900 focus:outline-none"
+          style={{ aspectRatio: '16 / 9' }}
+        >
+          <BlurredTile avatarUrl={avatarUrl} letter={letter} />
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30 transition group-hover:bg-black/40">
+            <div className="flex flex-col items-center gap-2">
+              <span className="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg transition group-hover:scale-105">
+                <PlayIcon className="ml-0.5 h-6 w-6" />
+              </span>
+              <span className="text-xs font-medium text-white/90">
+                {t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
+              </span>
+            </div>
+          </div>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function BlurredTile({ avatarUrl, letter }: { avatarUrl: string | null; letter: string }) {
+  if (avatarUrl) {
+    return (
+      <>
+        <img
+          src={avatarUrl}
+          alt=""
+          className="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl"
+        />
+        <div className="absolute inset-0 bg-gradient-to-br from-accent/20 to-emerald-500/20" />
+      </>
+    );
+  }
+  return (
+    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-accent/40 via-fuchsia-500/20 to-emerald-500/30">
+      <span
+        aria-hidden="true"
+        className="text-[120px] font-display font-bold text-white/20 blur-[2px]"
+      >
+        {letter}
+      </span>
+    </div>
+  );
+}
+
+function PlayIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
+
+function FullscreenIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
+    </svg>
+  );
+}
diff --git a/apps/desktop/src/components/Sidebar.tsx b/apps/desktop/src/components/Sidebar.tsx
index 86e8658..89ef900 100644
--- a/apps/desktop/src/components/Sidebar.tsx
+++ b/apps/desktop/src/components/Sidebar.tsx
@@ -4,107 +4,176 @@ import { NavLink } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
-import { CallBar } from './CallUI';
+import { useTheme } from '../context/ThemeContext';
 import {
   ChatBubbleIcon,
   GearIcon,
-  LogoLockup,
+  LogoMark,
+  MoonIcon,
   ShieldIcon,
   SignOutIcon,
+  SunIcon,
   UsersIcon,
 } from './icons';
-import { UserBar } from './UserBar';
 
 interface NavItem {
   to: string;
   labelKey: string;
   icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  badge?: 'friends' | 'chats';
 }
 
-const BASE_NAV_ITEMS: NavItem[] = [
-  { to: '/chats', labelKey: 'app:nav.chats', icon: ChatBubbleIcon },
-  { to: '/friends', labelKey: 'app:nav.friends', icon: UsersIcon },
-  { to: '/settings', labelKey: 'app:nav.settings', icon: GearIcon },
+const PRIMARY_NAV: NavItem[] = [
+  { to: '/chats', labelKey: 'app:nav.chats', icon: ChatBubbleIcon, badge: 'chats' },
+  { to: '/friends', labelKey: 'app:nav.friends', icon: UsersIcon, badge: 'friends' },
 ];
-const ADMIN_NAV_ITEM: NavItem = {
+const ADMIN_NAV: NavItem = {
   to: '/admin',
   labelKey: 'app:nav.admin',
   icon: ShieldIcon,
 };
 
+// Clean-Rail 72px icon rail. Brand logo top → primary tabs → spacer →
+// settings + theme toggle + sign-out at bottom. Active tab shows a pill
+// indicator anchored to the left edge of the rail.
 export function Sidebar() {
   const { t } = useTranslation(['app']);
   const { signOut, profile } = useAuth();
   const { incomingCount } = useFriendshipsContext();
   const { totalUnread } = useConversationsContext();
+  const { theme, toggle } = useTheme();
 
-  const navItems = profile?.isAdmin ? [...BASE_NAV_ITEMS, ADMIN_NAV_ITEM] : BASE_NAV_ITEMS;
+  const navItems: NavItem[] = profile?.isAdmin ? [...PRIMARY_NAV, ADMIN_NAV] : PRIMARY_NAV;
 
   return (
     <aside
       aria-label="Primary navigation"
-      className="flex h-screen w-72 shrink-0 flex-col border-r border-white/5 bg-ink-900/70 backdrop-blur-xl"
+      className="flex h-screen w-[72px] shrink-0 flex-col items-center border-r border-line bg-surface-2/80 py-4 backdrop-blur-xl"
     >
-      <div className="flex items-center px-5 pb-3 pt-5">
-        <LogoLockup tone="dark" className="h-8 w-auto" aria-label="Netralax" />
+      <div className="flex h-10 w-10 items-center justify-center" title="Netralax">
+        <LogoMark className="h-8 w-8" />
       </div>
 
-      <nav className="mt-2 flex flex-col gap-0.5 px-3">
+      <div className="my-3 h-px w-8 bg-line" aria-hidden="true" />
+
+      <nav className="flex flex-col items-center gap-2">
         {navItems.map((item) => {
-          const badge =
-            item.to === '/friends'
+          const badgeCount =
+            item.badge === 'friends'
               ? incomingCount
-              : item.to === '/chats'
+              : item.badge === 'chats'
                 ? totalUnread
                 : 0;
-          const ariaLabel = badge > 0 ? `${t(item.labelKey)} (${badge})` : undefined;
           return (
-            <NavLink
+            <RailNavLink
               key={item.to}
               to={item.to}
-              aria-label={ariaLabel}
-              className={({ isActive }) =>
-                [
-                  'group flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition',
-                  'focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/50',
-                  isActive
-                    ? 'bg-brand-500/15 text-white ring-1 ring-brand-400/30'
-                    : 'text-neutral-400 hover:bg-white/5 hover:text-neutral-100',
-                ].join(' ')
-              }
-            >
-              <item.icon style={{ width: '18px', height: '18px' }} className="transition" />
-              <span className="flex-1">{t(item.labelKey)}</span>
-              {badge > 0 && <NavBadge count={badge} />}
-            </NavLink>
+              label={t(item.labelKey)}
+              icon={item.icon}
+              badge={badgeCount}
+            />
           );
         })}
       </nav>
 
       <div className="flex-1" />
 
-      <div className="border-t border-white/5 p-3">
-        <CallBar />
-        <UserBar />
-        <button
-          type="button"
+      <div className="flex flex-col items-center gap-2">
+        <RailNavLink
+          to="/settings"
+          label={t('app:nav.settings')}
+          icon={GearIcon}
+        />
+        <RailIconButton
+          label={theme === 'dark' ? t('app:theme.light', { defaultValue: 'Light mode' }) : t('app:theme.dark', { defaultValue: 'Dark mode' })}
+          onClick={toggle}
+          icon={theme === 'dark' ? SunIcon : MoonIcon}
+        />
+        <RailIconButton
+          label={t('app:sidebar.sign_out')}
           onClick={() => void signOut()}
-          className="mt-2 flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium text-neutral-400 transition hover:bg-rose-500/10 hover:text-rose-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40"
-        >
-          <SignOutIcon className="h-4 w-4" />
-          <span>{t('app:sidebar.sign_out')}</span>
-        </button>
+          icon={SignOutIcon}
+          tone="danger"
+        />
       </div>
     </aside>
   );
 }
 
-function NavBadge({ count }: { count: number }) {
+interface RailNavLinkProps {
+  to: string;
+  label: string;
+  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  badge?: number;
+}
+
+function RailNavLink({ to, label, icon: Icon, badge = 0 }: RailNavLinkProps) {
+  const ariaLabel = badge > 0 ? `${label} (${badge})` : label;
+  return (
+    <NavLink
+      to={to}
+      aria-label={ariaLabel}
+      title={label}
+      className={({ isActive }) =>
+        [
+          'group relative flex h-11 w-11 cursor-pointer items-center justify-center rounded-xl transition',
+          'focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
+          isActive
+            ? 'bg-accent/15 text-accent'
+            : 'text-fg-muted hover:bg-surface-3/60 hover:text-fg',
+        ].join(' ')
+      }
+    >
+      {({ isActive }) => (
+        <>
+          {isActive && (
+            <span
+              aria-hidden="true"
+              className="absolute -left-4 h-6 w-1 rounded-r-full bg-accent"
+            />
+          )}
+          <Icon style={{ width: '20px', height: '20px' }} />
+          {badge > 0 && <RailBadge count={badge} />}
+        </>
+      )}
+    </NavLink>
+  );
+}
+
+interface RailIconButtonProps {
+  label: string;
+  onClick: () => void;
+  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  tone?: 'default' | 'danger';
+}
+
+function RailIconButton({ label, onClick, icon: Icon, tone = 'default' }: RailIconButtonProps) {
+  const toneClass =
+    tone === 'danger'
+      ? 'text-fg-muted hover:bg-rose-500/10 hover:text-rose-400 focus-visible:ring-rose-400/40'
+      : 'text-fg-muted hover:bg-surface-3/60 hover:text-fg focus-visible:ring-accent/50';
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className={
+        'flex h-11 w-11 cursor-pointer items-center justify-center rounded-xl transition focus:outline-none focus-visible:ring-2 ' +
+        toneClass
+      }
+    >
+      <Icon style={{ width: '20px', height: '20px' }} />
+    </button>
+  );
+}
+
+function RailBadge({ count }: { count: number }) {
   const display = count > 99 ? '99+' : String(count);
   return (
     <span
       aria-hidden="true"
-      className="inline-flex min-w-[20px] items-center justify-center rounded-full bg-rose-500 px-1.5 text-[10px] font-bold leading-tight text-white shadow-[0_0_0_2px_rgba(15,15,24,1)]"
+      className="absolute -right-1 -top-1 inline-flex min-w-[18px] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold leading-tight text-white ring-2 ring-surface-2"
     >
       {display}
     </span>
diff --git a/apps/desktop/src/components/TypingIndicator.tsx b/apps/desktop/src/components/TypingIndicator.tsx
index e0f1bba..e484cc7 100644
--- a/apps/desktop/src/components/TypingIndicator.tsx
+++ b/apps/desktop/src/components/TypingIndicator.tsx
@@ -20,7 +20,7 @@ export function TypingIndicator({ typingUserIds, members }: Props) {
       : t('app:chats.typing_many', { count: typingUserIds.length });
 
   return (
-    <div className="px-6 pb-1 pt-0 text-xs text-neutral-400">
+    <div className="bg-surface-3 px-6 pb-1 pt-0 text-xs text-fg-muted">
       <span className="inline-flex items-center gap-2">
         <TypingDots />
         <span>{text}</span>
@@ -32,9 +32,9 @@ export function TypingIndicator({ typingUserIds, members }: Props) {
 function TypingDots() {
   return (
     <span aria-hidden="true" className="inline-flex items-center gap-0.5">
-      <span className="h-1 w-1 rounded-full bg-neutral-500 [animation:pulse_1.2s_ease-in-out_infinite]" />
-      <span className="h-1 w-1 rounded-full bg-neutral-500 [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.15s]" />
-      <span className="h-1 w-1 rounded-full bg-neutral-500 [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.3s]" />
+      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite]" />
+      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.15s]" />
+      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.3s]" />
     </span>
   );
 }
diff --git a/apps/desktop/src/components/UpdateToast.tsx b/apps/desktop/src/components/UpdateToast.tsx
index 4347d91..1bfd113 100644
--- a/apps/desktop/src/components/UpdateToast.tsx
+++ b/apps/desktop/src/components/UpdateToast.tsx
@@ -57,22 +57,22 @@ export function UpdateToast() {
     <div
       role="status"
       aria-live="polite"
-      className="fixed bottom-6 left-6 z-50 w-80 overflow-hidden rounded-2xl border border-white/10 bg-ink-900/95 p-4 shadow-2xl backdrop-blur-xl"
+      className="fixed bottom-6 left-6 z-50 w-80 overflow-hidden rounded-2xl border border-line bg-surface-3 p-4 shadow-2xl"
     >
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-500/25 text-brand-200 ring-1 ring-brand-400/30">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent/20 text-accent">
           <SparklesIcon className="h-4 w-4" />
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-semibold text-white">
+          <p className="text-sm font-semibold text-fg">
             {t('app:update.available', { defaultValue: 'Update verfügbar' })}
             {state.version ? ' · v' + state.version : ''}
           </p>
           {state.notes && (
-            <p className="mt-0.5 line-clamp-3 text-xs text-neutral-400">{state.notes}</p>
+            <p className="mt-0.5 line-clamp-3 text-xs text-fg-muted">{state.notes}</p>
           )}
           {state.error && (
-            <p className="mt-1 text-xs text-rose-300">{state.error}</p>
+            <p className="mt-1 text-xs text-rose-500 dark:text-rose-300">{state.error}</p>
           )}
         </div>
         {!installing && (
@@ -80,7 +80,7 @@ export function UpdateToast() {
             type="button"
             onClick={() => setDismissed(true)}
             aria-label={t('common:close', { defaultValue: 'Schließen' })}
-            className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-neutral-400 transition hover:bg-white/10 hover:text-neutral-100"
+            className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-fg-muted transition hover:bg-surface-2 hover:text-fg"
           >
             <XIcon className="h-3.5 w-3.5" />
           </button>
@@ -90,7 +90,7 @@ export function UpdateToast() {
         type="button"
         onClick={() => void handleInstall()}
         disabled={installing}
-        className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-gradient-to-br from-brand-400 to-brand-600 px-3 py-2 text-sm font-semibold text-white transition hover:from-brand-300 hover:to-brand-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/60 disabled:cursor-not-allowed disabled:opacity-60"
+        className="mt-3 inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-60"
       >
         {installing ? (
           <>
diff --git a/apps/desktop/src/components/UserBar.tsx b/apps/desktop/src/components/UserBar.tsx
index 5a8c4e4..ab4b286 100644
--- a/apps/desktop/src/components/UserBar.tsx
+++ b/apps/desktop/src/components/UserBar.tsx
@@ -5,22 +5,19 @@ import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
 import { supabase } from '../lib/supabase';
+import { Avatar } from './Avatar';
 import { ChevronDownIcon } from './icons';
 
 const PRESENCE_OPTIONS: PresenceState[] = ['online', 'idle', 'dnd', 'invisible', 'offline'];
 
 const PRESENCE_DOT: Record<PresenceState, string> = {
-  online: 'bg-emerald-400',
+  online: 'bg-emerald-500',
   idle: 'bg-amber-400',
   dnd: 'bg-rose-500',
   invisible: 'bg-neutral-500',
-  offline: 'bg-neutral-600',
+  offline: 'bg-neutral-400 dark:bg-neutral-600',
 };
 
-function avatarLetter(input: string | undefined): string {
-  return (input ?? '?').trim().charAt(0).toUpperCase() || '?';
-}
-
 export function UserBar() {
   const { t } = useTranslation(['app']);
   const { profile, refreshProfile } = useAuth();
@@ -53,34 +50,38 @@ export function UserBar() {
         onClick={() => setOpen((v) => !v)}
         aria-haspopup="menu"
         aria-expanded={open}
-        className="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-left transition hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+        className="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-left transition hover:bg-surface-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
       >
-        <div className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-sm font-semibold text-white ring-1 ring-brand-400/30">
-          {avatarLetter(profile?.displayName ?? profile?.username)}
+        <div className="relative">
+          <Avatar
+            url={profile?.avatarUrl ?? null}
+            displayName={profile?.displayName ?? profile?.username}
+            className="h-9 w-9 text-sm"
+          />
           <span
             className={
-              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-ink-900 ' +
+              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-surface-2 ' +
               PRESENCE_DOT[presence]
             }
           />
         </div>
         <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-white">
+          <p className="truncate text-sm font-medium text-fg">
             {profile?.displayName ?? '—'}
           </p>
-          <p className="truncate text-xs text-neutral-400">
-            {profile?.username ? '@' + profile.username : '—'}
+          <p className="truncate text-xs text-fg-muted">
+            {t('app:presence.' + presence)}
           </p>
         </div>
         <ChevronDownIcon
-          className={'h-4 w-4 text-neutral-500 transition ' + (open ? 'rotate-180' : '')}
+          className={'h-4 w-4 text-fg-muted transition ' + (open ? 'rotate-180' : '')}
         />
       </button>
 
       {open && (
         <div
           role="menu"
-          className="absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-lg border border-white/10 bg-ink-900/95 shadow-xl backdrop-blur-xl"
+          className="absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-lg border border-line bg-surface-3 shadow-xl"
         >
           {PRESENCE_OPTIONS.map((opt) => (
             <button
@@ -90,12 +91,12 @@ export function UserBar() {
               aria-checked={opt === presence}
               onClick={() => void changePresence(opt)}
               disabled={busy}
-              className="flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm text-neutral-200 transition hover:bg-white/5 disabled:opacity-50"
+              className="flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm text-fg transition hover:bg-surface-2 disabled:opacity-50"
             >
               <span className={'h-2.5 w-2.5 rounded-full ' + PRESENCE_DOT[opt]} />
               <span className="flex-1">{t('app:presence.' + opt)}</span>
               {opt === presence && (
-                <span className="text-xs text-brand-300">●</span>
+                <span className="text-xs text-accent">●</span>
               )}
             </button>
           ))}
diff --git a/apps/desktop/src/components/icons.tsx b/apps/desktop/src/components/icons.tsx
index 908850b..00e9581 100644
--- a/apps/desktop/src/components/icons.tsx
+++ b/apps/desktop/src/components/icons.tsx
@@ -336,6 +336,89 @@ export function MonitorStopIcon(props: IconProps) {
   );
 }
 
+export function SunIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+    </Base>
+  );
+}
+
+export function MoonIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z" />
+    </Base>
+  );
+}
+
+export function GridIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <rect x="3" y="3" width="7" height="7" rx="1.5" />
+      <rect x="14" y="3" width="7" height="7" rx="1.5" />
+      <rect x="3" y="14" width="7" height="7" rx="1.5" />
+      <rect x="14" y="14" width="7" height="7" rx="1.5" />
+    </Base>
+  );
+}
+
+export function FocusIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <rect x="8" y="8" width="8" height="8" rx="1" />
+    </Base>
+  );
+}
+
+export function MaximizeIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <path d="M4 9V5a1 1 0 0 1 1-1h4" />
+      <path d="M20 9V5a1 1 0 0 0-1-1h-4" />
+      <path d="M4 15v4a1 1 0 0 0 1 1h4" />
+      <path d="M20 15v4a1 1 0 0 1-1 1h-4" />
+    </Base>
+  );
+}
+
+export function VideoIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <rect x="2" y="6" width="15" height="12" rx="2" />
+      <path d="m22 8-5 4 5 4V8Z" />
+    </Base>
+  );
+}
+
+export function CrownIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <path d="m3 7 4 4 5-6 5 6 4-4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
+    </Base>
+  );
+}
+
+export function SendIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <path d="m3 11 18-8-8 18-2-8-8-2Z" />
+    </Base>
+  );
+}
+
+export function AddUserIcon(props: IconProps) {
+  return (
+    <Base {...props}>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M19 8v6M22 11h-6" />
+    </Base>
+  );
+}
+
 export function LogoMark(props: IconProps) {
   return (
     <svg
diff --git a/apps/desktop/src/context/CallContext.tsx b/apps/desktop/src/context/CallContext.tsx
index d885b61..a0aeeee 100644
--- a/apps/desktop/src/context/CallContext.tsx
+++ b/apps/desktop/src/context/CallContext.tsx
@@ -90,6 +90,10 @@ export interface RemoteScreenShare {
   participantName: string;
 }
 
+// Visual call modes (Discord-style): grid shows all tiles equally, focus pins
+// one speaker with others in a strip, fullscreen is cinema mode.
+export type CallMode = 'grid' | 'focus' | 'fullscreen';
+
 interface CallContextValue {
   state: CallState;
   room: Room | null;
@@ -102,6 +106,9 @@ interface CallContextValue {
   // Remembers the conversation of the last call we left so a sidebar widget
   // can show "still live — rejoin" while peers stay in the room.
   lastCallConversationId: string | null;
+  // Clean-Rail UI state — display mode + focused participant id.
+  callMode: CallMode;
+  focusedId: string | null;
   // Actions:
   startCall: (conversationId: string, mediaKind?: CallKind) => Promise<void>;
   joinActiveCall: (conversationId: string, mediaKind?: CallKind) => Promise<void>;
@@ -111,6 +118,8 @@ interface CallContextValue {
   toggleMute: () => void;
   toggleScreenShare: () => Promise<void>;
   dismissLastCall: () => void;
+  setCallMode: (mode: CallMode) => void;
+  setFocusedId: (id: string | null) => void;
 }
 
 const CallContext = createContext<CallContextValue | null>(null);
@@ -135,6 +144,8 @@ export function CallProvider({ children }: { children: ReactNode }) {
   const [isScreenSharing, setIsScreenSharing] = useState(false);
   const [remoteScreenShares, setRemoteScreenShares] = useState<RemoteScreenShare[]>([]);
   const [lastCallConversationId, setLastCallConversationId] = useState<string | null>(null);
+  const [callMode, setCallModeState] = useState<CallMode>('grid');
+  const [focusedId, setFocusedIdState] = useState<string | null>(null);
 
   const signalChannelRef = useRef<RealtimeChannel | null>(null);
   const presenceChannelRef = useRef<RealtimeChannel | null>(null);
@@ -954,6 +965,36 @@ export function CallProvider({ children }: { children: ReactNode }) {
     }
   }, [myId, clearRingTimer, clearSoloTimer, disconnectRoom, sendSignal, emitCallEvent]);
 
+  const setCallMode = useCallback((mode: CallMode) => {
+    setCallModeState(mode);
+  }, []);
+
+  const setFocusedId = useCallback((id: string | null) => {
+    setFocusedIdState(id);
+  }, []);
+
+  // Reset UI call-mode state when the call leaves any active phase so the next
+  // call starts fresh at grid/unfocused.
+  useEffect(() => {
+    if (state.kind === 'idle' || state.kind === 'error') {
+      setCallModeState('grid');
+      setFocusedIdState(null);
+    }
+  }, [state.kind]);
+
+  // Global Esc: drop out of fullscreen cinema back to grid while in an active
+  // call. Doesn't hangup and doesn't fire when other dialogs would consume it.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      if (callMode !== 'fullscreen') return;
+      if (state.kind !== 'connected' && state.kind !== 'connecting') return;
+      setCallModeState('grid');
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [callMode, state.kind]);
+
   const value = useMemo<CallContextValue>(
     () => ({
       state,
@@ -964,6 +1005,8 @@ export function CallProvider({ children }: { children: ReactNode }) {
       isScreenSharing,
       remoteScreenShares,
       lastCallConversationId,
+      callMode,
+      focusedId,
       startCall,
       joinActiveCall,
       acceptIncoming,
@@ -972,6 +1015,8 @@ export function CallProvider({ children }: { children: ReactNode }) {
       toggleMute,
       toggleScreenShare,
       dismissLastCall,
+      setCallMode,
+      setFocusedId,
     }),
     [
       state,
@@ -982,6 +1027,8 @@ export function CallProvider({ children }: { children: ReactNode }) {
       isScreenSharing,
       remoteScreenShares,
       lastCallConversationId,
+      callMode,
+      focusedId,
       startCall,
       joinActiveCall,
       acceptIncoming,
@@ -990,6 +1037,8 @@ export function CallProvider({ children }: { children: ReactNode }) {
       toggleMute,
       toggleScreenShare,
       dismissLastCall,
+      setCallMode,
+      setFocusedId,
     ],
   );
 
diff --git a/apps/desktop/src/context/ThemeContext.tsx b/apps/desktop/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..91e7905
--- /dev/null
+++ b/apps/desktop/src/context/ThemeContext.tsx
@@ -0,0 +1,53 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { applyTheme, getInitialTheme, setThemePersisted, type Theme } from '../lib/theme';
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggle: () => void;
+  setTheme: (t: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme());
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemePersisted(next);
+    setThemeState(next);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setThemeState((prev) => {
+      const next: Theme = prev === 'dark' ? 'light' : 'dark';
+      setThemePersisted(next);
+      return next;
+    });
+  }, []);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({ theme, toggle, setTheme }),
+    [theme, toggle, setTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}
diff --git a/apps/desktop/src/lib/theme.ts b/apps/desktop/src/lib/theme.ts
new file mode 100644
index 0000000..3577e2c
--- /dev/null
+++ b/apps/desktop/src/lib/theme.ts
@@ -0,0 +1,44 @@
+// Clean-Rail theme: persisted `.dark` class on <html>. Default follows the
+// system preference; user-toggle persists to localStorage and wins over it.
+
+export type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'netralax.theme';
+
+function readStoredTheme(): Theme | null {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw === 'light' || raw === 'dark') return raw;
+  } catch {
+    /* localStorage unavailable (private mode / sandbox) */
+  }
+  return null;
+}
+
+function writeStoredTheme(theme: Theme): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    /* localStorage unavailable */
+  }
+}
+
+function systemPrefersDark(): boolean {
+  return typeof window !== 'undefined'
+    && typeof window.matchMedia === 'function'
+    && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+export function getInitialTheme(): Theme {
+  return readStoredTheme() ?? (systemPrefersDark() ? 'dark' : 'light');
+}
+
+export function applyTheme(theme: Theme): void {
+  const root = document.documentElement;
+  root.classList.toggle('dark', theme === 'dark');
+}
+
+export function setThemePersisted(theme: Theme): void {
+  writeStoredTheme(theme);
+  applyTheme(theme);
+}
diff --git a/apps/desktop/src/lib/useActiveSpeakers.ts b/apps/desktop/src/lib/useActiveSpeakers.ts
new file mode 100644
index 0000000..6765128
--- /dev/null
+++ b/apps/desktop/src/lib/useActiveSpeakers.ts
@@ -0,0 +1,35 @@
+import type { Participant, Room } from 'livekit-client';
+import { RoomEvent } from 'livekit-client';
+import { useEffect, useState } from 'react';
+
+// Subscribe to LiveKit ActiveSpeakersChanged to drive the speaking-ring pulse
+// on participant tiles. Returns the set of currently speaking identities
+// (includes local participant when they're active).
+export function useActiveSpeakers(room: Room | null): Set<string> {
+  const [ids, setIds] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    if (!room) {
+      setIds(new Set());
+      return;
+    }
+
+    const update = (speakers: Participant[]) => {
+      const next = new Set<string>();
+      for (const s of speakers) {
+        if (s.identity) next.add(s.identity);
+      }
+      setIds(next);
+    };
+
+    // Seed from current state.
+    update(room.activeSpeakers ?? []);
+
+    room.on(RoomEvent.ActiveSpeakersChanged, update);
+    return () => {
+      room.off(RoomEvent.ActiveSpeakersChanged, update);
+    };
+  }, [room]);
+
+  return ids;
+}
diff --git a/apps/desktop/src/lib/useAnyActiveCall.ts b/apps/desktop/src/lib/useAnyActiveCall.ts
deleted file mode 100644
index 973409e..0000000
--- a/apps/desktop/src/lib/useAnyActiveCall.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { RealtimeChannel } from '@supabase/supabase-js';
-import { useEffect, useState } from 'react';
-
-import { supabase } from './supabase';
-
-// Observes the `call-presence:<conversationId>` channel for every conversation
-// the user is a member of and returns the first one (if any) that currently
-// has peers other than the viewer in the call. Enables a "call is live —
-// rejoin" affordance in the sidebar for conversations the viewer never
-// joined, mirroring Discord's active-voice indicator.
-//
-// Uses polling on each channel's `presenceState()` to side-step Supabase's
-// topic-based channel dedupe (see useCallPresence.ts).
-export function useAnyActiveCall(
-  conversationIds: readonly string[],
-  myId: string | null,
-): { conversationId: string; userIds: string[] } | null {
-  const [byConv, setByConv] = useState<Record<string, string[]>>({});
-
-  const key = conversationIds.join(',');
-
-  useEffect(() => {
-    if (conversationIds.length === 0) {
-      setByConv({});
-      return;
-    }
-
-    const tracked: Array<{ id: string; ch: RealtimeChannel; owns: boolean }> = [];
-    for (const id of conversationIds) {
-      const ch = supabase.channel('call-presence:' + id, {
-        config: {
-          presence: {
-            key: 'obs-' + Math.random().toString(36).slice(2, 8),
-            enabled: true,
-          },
-        },
-      });
-      const owns = ch.state === 'closed';
-      if (owns) void ch.subscribe();
-      tracked.push({ id, ch, owns });
-    }
-
-    const resync = () => {
-      setByConv((prev) => {
-        const next: Record<string, string[]> = {};
-        let changed = false;
-        for (const { id, ch } of tracked) {
-          const presState = ch.presenceState() as Record<
-            string,
-            Array<Record<string, unknown>>
-          >;
-          const ids = new Set<string>();
-          for (const list of Object.values(presState)) {
-            for (const e of list) {
-              const uid = e?.userId;
-              if (typeof uid === 'string') ids.add(uid);
-            }
-          }
-          const arr = Array.from(ids).sort();
-          next[id] = arr;
-          const prevArr = prev[id] ?? [];
-          if (prevArr.length !== arr.length || !arr.every((v, i) => v === prevArr[i])) {
-            changed = true;
-          }
-        }
-        // Also pick up removed conv ids.
-        if (!changed && Object.keys(prev).length !== Object.keys(next).length) {
-          changed = true;
-        }
-        return changed ? next : prev;
-      });
-    };
-
-    resync();
-    const pollId = window.setInterval(resync, 1500);
-
-    return () => {
-      window.clearInterval(pollId);
-      for (const { ch, owns } of tracked) {
-        if (owns) void supabase.removeChannel(ch);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key]);
-
-  for (const id of conversationIds) {
-    const users = byConv[id] ?? [];
-    const others = myId ? users.filter((u) => u !== myId) : users;
-    if (others.length > 0) {
-      return { conversationId: id, userIds: others };
-    }
-  }
-  return null;
-}
diff --git a/apps/desktop/src/lib/useCallPresence.ts b/apps/desktop/src/lib/useCallPresence.ts
index eca1bd2..f993d4b 100644
--- a/apps/desktop/src/lib/useCallPresence.ts
+++ b/apps/desktop/src/lib/useCallPresence.ts
@@ -6,11 +6,15 @@ import { supabase } from './supabase';
 // the set of userIds currently in that call. Independent of whether the
 // viewer is in the room — used to show "Active call · Join" affordances.
 //
-// Supabase realtime 2.103+ dedupes channels by topic: calling
-// `supabase.channel(topic)` returns an existing channel if one already exists.
-// That means an observer can't safely register `.on('presence', ...)` because
-// the tracker (CallContext) may have already subscribed it. We side-step this
-// by polling `presenceState()` on the (shared or fresh) channel.
+// Why presence-callbacks + no-removeChannel:
+//   - Supabase realtime 2.103+ dedupes channels by topic. CallContext owns
+//     the same channel during a live call to track its own presence.
+//   - If this hook removed the channel on unmount (e.g. when ConversationHeader
+//     hides during an active call), the live tracking connection dies and the
+//     banner never shows the rejoin option afterwards.
+//   - Binding our own presence callbacks (sync/join/leave) ensures the local
+//     presence state is updated even when CallContext also listens on the same
+//     channel — multiple callbacks can co-exist.
 export function useCallPresence(conversationId: string | undefined): string[] {
   const [activeUserIds, setActiveUserIds] = useState<string[]>([]);
 
@@ -24,23 +28,13 @@ export function useCallPresence(conversationId: string | undefined): string[] {
       config: {
         presence: {
           key: 'observer-' + Math.random().toString(36).slice(2, 8),
-          // Supabase realtime only sends presence_state/diff events to a
-          // channel that has presence enabled. Without `enabled: true` (and
-          // no `.on('presence', ...)` bindings) the server treats the channel
-          // as non-presence and `presenceState()` never populates.
+          // Server only routes presence to channels that opt-in. Without this
+          // flag we'd receive zero presence_state/presence_diff messages.
           enabled: true,
         },
       },
     });
 
-    // If Supabase returned a fresh (closed) channel, we own it and must
-    // subscribe/remove it. If it returned an already-subscribed channel
-    // (tracker owns it), we just read state.
-    const ownsChannel = channel.state === 'closed';
-    if (ownsChannel) {
-      void channel.subscribe();
-    }
-
     const resync = () => {
       const state = channel.presenceState() as Record<string, Array<Record<string, unknown>>>;
       const ids = new Set<string>();
@@ -57,14 +51,31 @@ export function useCallPresence(conversationId: string | undefined): string[] {
       });
     };
 
+    // Supabase realtime forbids `.on()` after `.subscribe()`. So we only bind
+    // callbacks when we own the subscribe (channel was 'closed'). For deduped
+    // shared channels, the polling fallback below covers state changes.
+    if (channel.state === 'closed') {
+      channel
+        .on('presence', { event: 'sync' }, resync)
+        .on('presence', { event: 'join' }, resync)
+        .on('presence', { event: 'leave' }, resync);
+      void channel.subscribe();
+    }
+
+    // Initial poll covers the case where the channel is already 'joined' (we
+    // dedupe'd onto an existing subscription) and won't fire a fresh sync.
     resync();
-    const pollId = window.setInterval(resync, 1500);
+    // Belt-and-suspenders: a slow poll catches any drift between callback and
+    // server state (e.g. if a presence event was dropped during reconnect).
+    const pollId = window.setInterval(resync, 3000);
 
     return () => {
       window.clearInterval(pollId);
-      if (ownsChannel) {
-        void supabase.removeChannel(channel);
-      }
+      // Don't removeChannel — the channel is shared with CallContext (and any
+      // sibling observers) via Supabase's topic dedupe. Removing it would
+      // tear down a live call's presence tracker. The channel naturally
+      // outlives the hook; leaks are bounded by the small number of
+      // conversations a user holds open in a session.
     };
   }, [conversationId]);
 
diff --git a/apps/desktop/src/pages/AdminPage.tsx b/apps/desktop/src/pages/AdminPage.tsx
index 163b973..a90d269 100644
--- a/apps/desktop/src/pages/AdminPage.tsx
+++ b/apps/desktop/src/pages/AdminPage.tsx
@@ -16,6 +16,7 @@ import { extractErrorCode } from '@chat-app/shared/i18n';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Avatar } from '../components/Avatar';
 import {
   AlertIcon,
   CopyIcon,
@@ -64,9 +65,10 @@ export function AdminPage() {
   }, [refresh]);
 
   return (
-    <div className="mx-auto flex max-w-4xl flex-col gap-6 px-6 py-8">
+    <div className="h-full bg-surface-3 text-fg">
+      <div className="mx-auto flex max-w-4xl flex-col gap-6 px-6 py-8">
       <header>
-        <h1 className="font-display text-2xl font-semibold tracking-tight text-white">
+        <h1 className="font-display text-2xl font-semibold tracking-tight text-fg">
           {t('app:admin.title')}
         </h1>
       </header>
@@ -74,16 +76,16 @@ export function AdminPage() {
       {error && (
         <div
           role="alert"
-          className="flex items-start gap-3 rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-100"
+          className="flex items-start gap-3 rounded-lg border border-rose-500/30 bg-rose-500/10 p-3 text-sm text-rose-700 dark:text-rose-100"
         >
-          <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+          <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-500 dark:text-rose-400" />
           <p className="min-w-0 flex-1 break-words">{error}</p>
         </div>
       )}
 
       {loading ? (
-        <div className="flex items-center gap-2 text-sm text-neutral-500">
-          <SpinnerIcon className="h-4 w-4 text-brand-400" />
+        <div className="flex items-center gap-2 text-sm text-fg-muted">
+          <SpinnerIcon className="h-4 w-4 text-accent" />
         </div>
       ) : (
         <>
@@ -92,15 +94,16 @@ export function AdminPage() {
           <UsersSection users={users} onRefresh={refresh} />
         </>
       )}
+      </div>
     </div>
   );
 }
 
 function Section({ title, children, action }: { title: string; children: React.ReactNode; action?: React.ReactNode }) {
   return (
-    <section className="rounded-2xl border border-white/10 bg-ink-900/60 p-5 backdrop-blur-xl">
+    <section className="rounded-2xl border border-line bg-surface-2 p-5">
       <header className="mb-4 flex items-center justify-between">
-        <h2 className="text-xs font-semibold uppercase tracking-wide text-neutral-400">{title}</h2>
+        <h2 className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">{title}</h2>
         {action}
       </header>
       {children}
@@ -199,7 +202,7 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
           type="button"
           onClick={() => void handleCreate()}
           disabled={busy}
-          className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-brand-500/90 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-400 disabled:opacity-60"
+          className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:opacity-60"
         >
           {busy ? <SpinnerIcon className="h-3.5 w-3.5" /> : <PlusIcon className="h-3.5 w-3.5" />}
           <span>{t('app:admin.invites_create')}</span>
@@ -207,11 +210,11 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
       }
     >
       {invites.length === 0 ? (
-        <p className="text-sm text-neutral-500">{t('app:admin.invites_empty')}</p>
+        <p className="text-sm text-fg-muted">{t('app:admin.invites_empty')}</p>
       ) : (
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
-            <thead className="text-[10px] uppercase tracking-wide text-neutral-500">
+            <thead className="text-[10px] uppercase tracking-[0.1em] text-fg-muted">
               <tr>
                 <th className="py-2 pr-3">{t('app:admin.invite_col_code')}</th>
                 <th className="py-2 pr-3">{t('app:admin.invite_col_uses')}</th>
@@ -220,7 +223,7 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
                 <th className="py-2" />
               </tr>
             </thead>
-            <tbody className="divide-y divide-white/5">
+            <tbody className="divide-y divide-line">
               {invites.map((inv) => {
                 const expired = inv.expiresAt ? new Date(inv.expiresAt) < new Date() : false;
                 const status = inv.disabled
@@ -229,10 +232,10 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
                     ? t('app:admin.invite_status_expired')
                     : t('app:admin.invite_status_active');
                 const statusColor = inv.disabled
-                  ? 'text-rose-300'
+                  ? 'text-rose-600 dark:text-rose-300'
                   : expired
-                    ? 'text-amber-300'
-                    : 'text-emerald-300';
+                    ? 'text-amber-600 dark:text-amber-300'
+                    : 'text-emerald-600 dark:text-emerald-300';
                 const usesText = inv.usesLimit
                   ? inv.usesCount + '/' + inv.usesLimit
                   : inv.usesCount + '/∞';
@@ -241,9 +244,9 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
                   : t('app:admin.invite_expires_never');
                 return (
                   <tr key={inv.code} className="py-2">
-                    <td className="py-2 pr-3 font-mono text-xs">{inv.code}</td>
-                    <td className="py-2 pr-3 text-xs text-neutral-400">{usesText}</td>
-                    <td className="py-2 pr-3 text-xs text-neutral-400">{expiresText}</td>
+                    <td className="py-2 pr-3 font-mono text-xs text-fg">{inv.code}</td>
+                    <td className="py-2 pr-3 text-xs text-fg-muted">{usesText}</td>
+                    <td className="py-2 pr-3 text-xs text-fg-muted">{expiresText}</td>
                     <td className={'py-2 pr-3 text-xs font-medium ' + statusColor}>{status}</td>
                     <td className="py-2 text-right">
                       <div className="inline-flex gap-1">
@@ -260,7 +263,7 @@ function InvitesSection({ invites, onRefresh }: { invites: InviteRecord[]; onRef
                         <button
                           type="button"
                           onClick={() => void handleToggle(inv.code, inv.disabled)}
-                          className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[11px] font-medium text-neutral-300 transition hover:bg-white/10"
+                          className="rounded-md border border-line bg-surface-3 px-2 py-1 text-[11px] font-medium text-fg transition hover:brightness-95"
                         >
                           {inv.disabled ? t('app:admin.invites_enable') : t('app:admin.invites_disable')}
                         </button>
@@ -301,20 +304,19 @@ function UsersSection({ users, onRefresh }: { users: AdminProfileRow[]; onRefres
   return (
     <Section title={t('app:admin.users_title')}>
       {users.length === 0 ? (
-        <p className="text-sm text-neutral-500">{t('app:admin.users_empty')}</p>
+        <p className="text-sm text-fg-muted">{t('app:admin.users_empty')}</p>
       ) : (
-        <ul className="divide-y divide-white/5">
+        <ul className="divide-y divide-line">
           {users.map((u) => {
-            const letter =
-              (u.displayName ?? u.username ?? '?').trim().charAt(0).toUpperCase() || '?';
             return (
               <li key={u.userId} className="flex items-center gap-3 py-3">
-                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-sm font-semibold text-white ring-1 ring-brand-400/30">
-                  {letter}
-                </div>
+                <Avatar
+                  displayName={u.displayName ?? u.username}
+                  className="h-9 w-9 text-sm"
+                />
                 <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-semibold text-white">{u.displayName}</p>
-                  <p className="truncate text-xs text-neutral-500">@{u.username}</p>
+                  <p className="truncate text-sm font-semibold text-fg">{u.displayName}</p>
+                  <p className="truncate text-xs text-fg-muted">@{u.username}</p>
                 </div>
                 <div className="flex gap-2">
                   <FlagChip
@@ -361,8 +363,8 @@ function Toggle({
   return (
     <label className="flex cursor-pointer items-start justify-between gap-4">
       <span className="min-w-0 flex-1">
-        <span className="block text-sm text-neutral-200">{label}</span>
-        {hint && <span className="mt-1 block text-xs text-neutral-500">{hint}</span>}
+        <span className="block text-sm text-fg">{label}</span>
+        {hint && <span className="mt-1 block text-xs text-fg-muted">{hint}</span>}
       </span>
       <span className="relative mt-0.5 inline-flex h-6 w-11 shrink-0">
         <input
@@ -372,8 +374,8 @@ function Toggle({
           onChange={(e) => onChange(e.target.checked)}
           className="peer sr-only"
         />
-        <span className="inline-block h-6 w-11 rounded-full bg-neutral-700 transition peer-checked:bg-brand-500/70 peer-disabled:opacity-50" />
-        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
+        <span className="inline-block h-6 w-11 rounded-full bg-surface transition peer-checked:bg-accent peer-disabled:opacity-50" />
+        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition peer-checked:translate-x-5" />
       </span>
     </label>
   );
@@ -399,8 +401,8 @@ function IconButton({
       className={
         'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border transition focus:outline-none focus-visible:ring-2 ' +
         (tone === 'danger'
-          ? 'border-rose-500/30 bg-rose-500/10 text-rose-200 hover:bg-rose-500/20 focus-visible:ring-rose-400/40'
-          : 'border-white/10 bg-white/5 text-neutral-300 hover:bg-white/10 focus-visible:ring-brand-400/40')
+          ? 'border-rose-500/40 bg-rose-500/10 text-rose-600 hover:bg-rose-500/20 focus-visible:ring-rose-400/40 dark:text-rose-300'
+          : 'border-line bg-surface-3 text-fg hover:brightness-95 focus-visible:ring-accent/40')
       }
     >
       {children}
@@ -421,15 +423,15 @@ function FlagChip({
 }) {
   const activeClass =
     tone === 'danger'
-      ? 'border-rose-400/40 bg-rose-500/20 text-rose-100'
-      : 'border-brand-400/40 bg-brand-500/20 text-brand-100';
+      ? 'border-rose-500/40 bg-rose-500/20 text-rose-700 dark:text-rose-100'
+      : 'border-accent/40 bg-accent/20 text-accent';
   return (
     <button
       type="button"
       onClick={() => onToggle(!active)}
       className={
-        'cursor-pointer rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
-        (active ? activeClass : 'border-white/10 bg-white/5 text-neutral-400 hover:bg-white/10')
+        'cursor-pointer rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+        (active ? activeClass : 'border-line bg-surface-3 text-fg-muted hover:brightness-95')
       }
     >
       {label}
diff --git a/apps/desktop/src/pages/ChatsPage.tsx b/apps/desktop/src/pages/ChatsPage.tsx
index 81b3b81..755c979 100644
--- a/apps/desktop/src/pages/ChatsPage.tsx
+++ b/apps/desktop/src/pages/ChatsPage.tsx
@@ -5,7 +5,14 @@ import { useTranslation } from 'react-i18next';
 import { NavLink, Outlet, useParams } from 'react-router-dom';
 
 import { CreateGroupDialog } from '../components/CreateGroupDialog';
-import { ChatBubbleIcon, PlusIcon, SpinnerIcon, UsersIcon } from '../components/icons';
+import {
+  AddUserIcon,
+  ChatBubbleIcon,
+  SearchIcon,
+  SpinnerIcon,
+  UsersIcon,
+} from '../components/icons';
+import { UserBar } from '../components/UserBar';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { supabase } from '../lib/supabase';
 
@@ -13,6 +20,7 @@ export function ChatsPage() {
   const { conversations, loading, error, refresh, unread } = useConversationsContext();
   const { id: activeId } = useParams<{ id: string }>();
   const [createOpen, setCreateOpen] = useState(false);
+  const [query, setQuery] = useState('');
 
   const sorted = useMemo(() => {
     return [...conversations].sort((a, b) => {
@@ -22,14 +30,26 @@ export function ChatsPage() {
     });
   }, [conversations]);
 
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return sorted;
+    return sorted.filter((c) => {
+      const title = (c.type === 'dm' ? c.peer?.displayName : c.name) ?? '';
+      const handle = c.type === 'dm' ? c.peer?.username ?? '' : '';
+      return title.toLowerCase().includes(q) || handle.toLowerCase().includes(q);
+    });
+  }, [sorted, query]);
+
   return (
     <div className="flex h-full">
       <ConversationList
-        items={sorted}
+        items={filtered}
         loading={loading}
         error={error}
         activeId={activeId}
         unread={unread}
+        query={query}
+        onQueryChange={setQuery}
         onAccept={async (id) => {
           try {
             await acceptDm(supabase, id);
@@ -41,7 +61,7 @@ export function ChatsPage() {
         }}
         onNewGroup={() => setCreateOpen(true)}
       />
-      <div className="flex-1 border-l border-white/5">
+      <div className="flex-1 border-l border-line bg-surface-3">
         <Outlet />
       </div>
       <CreateGroupDialog open={createOpen} onClose={() => setCreateOpen(false)} />
@@ -49,32 +69,38 @@ export function ChatsPage() {
   );
 }
 
+interface ConversationListProps {
+  items: ConversationSummary[];
+  loading: boolean;
+  error: string | null;
+  activeId: string | undefined;
+  unread: Record<string, number>;
+  query: string;
+  onQueryChange: (q: string) => void;
+  onAccept: (id: string) => void;
+  onNewGroup: () => void;
+}
+
 function ConversationList({
   items,
   loading,
   error,
   activeId,
   unread,
+  query,
+  onQueryChange,
   onAccept,
   onNewGroup,
-}: {
-  items: ConversationSummary[];
-  loading: boolean;
-  error: string | null;
-  activeId: string | undefined;
-  unread: Record<string, number>;
-  onAccept: (id: string) => void;
-  onNewGroup: () => void;
-}) {
+}: ConversationListProps) {
   const { t } = useTranslation(['app']);
 
   return (
     <aside
       aria-label="Conversations"
-      className="flex h-full w-[320px] shrink-0 flex-col bg-ink-900/40"
+      className="flex h-full w-[320px] shrink-0 flex-col bg-surface-2"
     >
       <header className="flex items-center justify-between px-4 pb-3 pt-5">
-        <h2 className="font-display text-base font-semibold tracking-tight text-white">
+        <h2 className="font-display text-base font-semibold tracking-tight text-fg">
           {t('app:nav.chats')}
         </h2>
         <button
@@ -82,29 +108,45 @@ function ConversationList({
           onClick={onNewGroup}
           aria-label={t('app:chats.new_group')}
           title={t('app:chats.new_group')}
-          className="flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 text-xs font-medium text-neutral-300 transition hover:bg-white/10 hover:text-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-3 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
         >
-          <UsersIcon className="h-3.5 w-3.5" />
-          <PlusIcon className="h-3 w-3" />
+          <AddUserIcon className="h-4 w-4" />
         </button>
       </header>
 
+      <div className="px-3 pb-2">
+        <label className="relative block">
+          <span className="sr-only">{t('app:chats.search', { defaultValue: 'Suche' })}</span>
+          <SearchIcon
+            aria-hidden="true"
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted"
+          />
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            placeholder={t('app:chats.search_placeholder', { defaultValue: 'Suche…' })}
+            className="w-full rounded-lg border border-line bg-surface-3 py-2 pl-9 pr-3 text-sm text-fg placeholder-fg-muted transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+          />
+        </label>
+      </div>
+
       {loading ? (
-        <div className="flex items-center gap-2 px-4 py-2 text-xs text-neutral-500">
-          <SpinnerIcon className="h-3.5 w-3.5 text-brand-400" />
+        <div className="flex items-center gap-2 px-4 py-2 text-xs text-fg-muted">
+          <SpinnerIcon className="h-3.5 w-3.5 text-accent" />
         </div>
       ) : error ? (
-        <p className="px-4 py-2 text-xs text-rose-300">{error}</p>
+        <p className="px-4 py-2 text-xs text-rose-500 dark:text-rose-300">{error}</p>
       ) : items.length === 0 ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-brand-300">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-line bg-surface-3 text-accent">
             <ChatBubbleIcon className="h-5 w-5" />
           </div>
-          <p className="text-sm text-neutral-400">{t('app:chats.empty_title')}</p>
-          <p className="text-xs text-neutral-500">{t('app:chats.empty_subtitle')}</p>
+          <p className="text-sm text-fg-muted">{t('app:chats.empty_title')}</p>
+          <p className="text-xs text-fg-muted/80">{t('app:chats.empty_subtitle')}</p>
         </div>
       ) : (
-        <ul className="flex-1 overflow-y-auto px-2 pb-4">
+        <ul className="flex-1 overflow-y-auto px-2 pb-2">
           {items.map((c) => (
             <li key={c.id}>
               <ConversationRow
@@ -117,6 +159,10 @@ function ConversationList({
           ))}
         </ul>
       )}
+
+      <div className="shrink-0 border-t border-line bg-surface-2 p-2">
+        <UserBar />
+      </div>
     </aside>
   );
 }
@@ -136,16 +182,22 @@ function ConversationRow({
   const title =
     item.type === 'dm' ? (item.peer?.displayName ?? '?') : (item.name ?? '?');
   const handle = item.type === 'dm' ? '@' + (item.peer?.username ?? '?') : '';
-  const letter = title.trim().charAt(0).toUpperCase() || '?';
+  const avatarUrl =
+    item.type === 'dm' ? (item.peer?.avatarUrl ?? null) : (item.avatarUrl ?? null);
+  const preview =
+    item.type === 'dm' ? handle : t('app:chats.group_preview', {
+      count: item.members.length,
+      defaultValue: `${item.members.length} Mitglieder`,
+    });
 
   if (!item.acceptedByMe) {
     return (
-      <div className="my-1 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+      <div className="my-1 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3">
         <div className="flex items-center gap-3">
-          <Avatar letter={letter} />
+          <ConvAvatar url={avatarUrl} title={title} isGroup={item.type === 'group'} />
           <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-semibold text-white">{title}</p>
-            <p className="truncate text-xs text-amber-200/80">
+            <p className="truncate text-sm font-semibold text-fg">{title}</p>
+            <p className="truncate text-xs text-amber-600 dark:text-amber-200/80">
               {t('app:friends.incoming_request')}
             </p>
           </div>
@@ -153,7 +205,7 @@ function ConversationRow({
         <button
           type="button"
           onClick={() => onAccept(item.id)}
-          className="mt-3 w-full cursor-pointer rounded-md bg-amber-500/20 px-3 py-1.5 text-xs font-semibold text-amber-100 transition hover:bg-amber-500/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/40"
+          className="mt-3 w-full cursor-pointer rounded-md bg-amber-500/20 px-3 py-1.5 text-xs font-semibold text-amber-700 transition hover:bg-amber-500/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/40 dark:text-amber-100"
         >
           {t('app:friends.action_accept')}
         </button>
@@ -165,26 +217,28 @@ function ConversationRow({
     <NavLink
       to={'/chats/' + item.id}
       className={
-        'my-1 flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
-        (active ? 'bg-brand-500/15 ring-1 ring-brand-400/30' : 'hover:bg-white/5')
+        'my-1 flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+        (active
+          ? 'bg-accent/15 text-fg'
+          : 'text-fg hover:bg-surface-3/70')
       }
     >
-      <Avatar letter={letter} />
+      <ConvAvatar url={avatarUrl} title={title} isGroup={item.type === 'group'} />
       <div className="min-w-0 flex-1">
         <p
           className={
             'truncate text-sm ' +
-            (unreadCount > 0 ? 'font-bold text-white' : 'font-semibold text-white')
+            (unreadCount > 0 ? 'font-bold' : 'font-semibold')
           }
         >
           {title}
         </p>
-        <p className="truncate text-xs text-neutral-500">{handle}</p>
+        <p className="truncate text-xs text-fg-muted">{preview}</p>
       </div>
       {unreadCount > 0 && (
         <span
           aria-label={'Unread: ' + unreadCount}
-          className="inline-flex min-w-[20px] items-center justify-center rounded-full bg-rose-500 px-1.5 text-[10px] font-bold leading-tight text-white"
+          className="inline-flex min-w-[20px] items-center justify-center rounded-full bg-accent px-1.5 text-[10px] font-bold leading-tight text-accent-fg"
         >
           {unreadCount > 99 ? '99+' : unreadCount}
         </span>
@@ -193,9 +247,35 @@ function ConversationRow({
   );
 }
 
-function Avatar({ letter }: { letter: string }) {
+function ConvAvatar({
+  url,
+  title,
+  isGroup,
+}: {
+  url: string | null;
+  title: string;
+  isGroup: boolean;
+}) {
+  if (url) {
+    return (
+      <img
+        src={url}
+        alt=""
+        className="h-9 w-9 shrink-0 rounded-full object-cover"
+        draggable={false}
+      />
+    );
+  }
+  if (isGroup) {
+    return (
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent/20 text-accent">
+        <UsersIcon className="h-4 w-4" />
+      </div>
+    );
+  }
+  const letter = title.trim().charAt(0).toUpperCase() || '?';
   return (
-    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-sm font-semibold text-white ring-1 ring-brand-400/30">
+    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent/20 text-sm font-semibold text-accent">
       {letter}
     </div>
   );
@@ -206,13 +286,13 @@ export function ChatsEmptyState() {
   return (
     <div className="flex h-full items-center justify-center p-10">
       <div className="max-w-md text-center">
-        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-brand-300">
+        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-line bg-surface-2 text-accent">
           <ChatBubbleIcon className="h-6 w-6" />
         </div>
-        <h2 className="font-display text-2xl font-semibold tracking-tight text-white">
+        <h2 className="font-display text-2xl font-semibold tracking-tight text-fg">
           {t('app:chats.select_prompt')}
         </h2>
-        <p className="mt-2 text-sm text-neutral-400">{t('app:chats.select_subtitle')}</p>
+        <p className="mt-2 text-sm text-fg-muted">{t('app:chats.select_subtitle')}</p>
       </div>
     </div>
   );
diff --git a/apps/desktop/src/pages/ConversationPage.tsx b/apps/desktop/src/pages/ConversationPage.tsx
index 9c52f38..0a51cac 100644
--- a/apps/desktop/src/pages/ConversationPage.tsx
+++ b/apps/desktop/src/pages/ConversationPage.tsx
@@ -7,9 +7,11 @@ import { ConversationHeader } from '../components/ConversationHeader';
 import { GroupInfoPanel } from '../components/GroupInfoPanel';
 import { AlertIcon, ArrowRightIcon, PlusIcon, SpinnerIcon, XIcon } from '../components/icons';
 import { InCallPanel } from '../components/InCallPanel';
+import { IncomingCallPanel } from '../components/IncomingCallPanel';
 import { MessageBubble } from '../components/MessageBubble';
 import { TypingIndicator } from '../components/TypingIndicator';
 import { useAuth } from '../context/AuthContext';
+import { useCall } from '../context/CallContext';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { useConversationMessages } from '../lib/useConversationMessages';
 import { useMessageReactions } from '../lib/useMessageReactions';
@@ -157,14 +159,27 @@ export function ConversationPage() {
   }
 
   const isGroup = conversation?.type === 'group';
+  const { state: callState } = useCall();
+  // Hide the chat header while this conversation hosts an active call — the
+  // call topbar inside the dock already shows the channel name + duration,
+  // and fullscreen cinema needs the whole slot.
+  const callHereActive =
+    (callState.kind === 'connected' ||
+      callState.kind === 'connecting' ||
+      callState.kind === 'outgoing') &&
+    callState.conversationId === id;
+  const incomingHere =
+    callState.kind === 'incoming' && callState.conversationId === id;
 
   return (
     <div className="relative flex h-full flex-col">
-      <ConversationHeader
-        conversation={conversation}
-        peerPresence={peerPresence}
-        {...(isGroup ? { onInfoClick: () => setInfoPanelOpen(true) } : {})}
-      />
+      {!callHereActive && (
+        <ConversationHeader
+          conversation={conversation}
+          peerPresence={peerPresence}
+          {...(isGroup ? { onInfoClick: () => setInfoPanelOpen(true) } : {})}
+        />
+      )}
 
       {isGroup && conversation && (
         <GroupInfoPanel
@@ -174,28 +189,36 @@ export function ConversationPage() {
         />
       )}
 
+      {incomingHere && conversation && <IncomingCallPanel conversation={conversation} />}
       {conversation && <InCallPanel conversation={conversation} />}
 
-      <div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto px-6 py-4">
+      <div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto bg-surface-3 px-6 py-4">
         {loading ? (
-          <div className="flex items-center gap-2 text-xs text-neutral-500">
-            <SpinnerIcon className="h-3.5 w-3.5 text-brand-400" />
+          <div className="flex items-center gap-2 text-xs text-fg-muted">
+            <SpinnerIcon className="h-3.5 w-3.5 text-accent" />
           </div>
         ) : error ? (
           <Banner>{error}</Banner>
         ) : messages.length === 0 ? (
-          <p className="text-center text-sm text-neutral-500">…</p>
+          <p className="text-center text-sm text-fg-muted">…</p>
         ) : (
           <ul className="space-y-0.5">
             {messages.map((m, idx) => {
               const prev = messages[idx - 1];
+              const next = messages[idx + 1];
               const grouped = idx > 0 && prev?.senderId === m.senderId;
+              const isLastOfRun = !next || next.senderId !== m.senderId;
+              const senderProfile =
+                conversation?.members.find((mm) => mm.userId === m.senderId)?.profile ?? null;
               return (
                 <li key={m.id}>
                   <MessageBubble
                     message={m}
                     mine={m.senderId === myId}
                     groupedWithPrev={grouped}
+                    isLastOfRun={isLastOfRun}
+                    senderDisplayName={senderProfile?.displayName}
+                    senderAvatarUrl={senderProfile?.avatarUrl}
                     conversationId={id ?? ''}
                     reactions={reactionsByMessage.get(m.id) ?? []}
                     onToggleReaction={(emoji) => toggleReaction(m.id, emoji)}
@@ -213,7 +236,7 @@ export function ConversationPage() {
         members={conversation?.members ?? []}
       />
 
-      <form onSubmit={handleSend} className="border-t border-white/5 p-4">
+      <form onSubmit={handleSend} className="border-t border-line bg-surface-3 p-4">
         {sendError && (
           <div className="mb-2">
             <Banner>{sendError}</Banner>
@@ -248,7 +271,7 @@ export function ConversationPage() {
             onClick={() => fileInputRef.current?.click()}
             aria-label="Bild anhängen"
             title="Bild anhängen"
-            className="inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-white/5 text-neutral-300 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+            className="inline-flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-accent text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             <PlusIcon className="h-4 w-4" />
           </button>
@@ -265,14 +288,14 @@ export function ConversationPage() {
               }
             }}
             rows={1}
-            placeholder="…"
-            className="max-h-40 min-h-[44px] flex-1 resize-none rounded-lg border border-white/10 bg-ink-900/60 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
+            placeholder="Nachricht schreiben…"
+            className="max-h-40 min-h-[44px] flex-1 resize-none rounded-lg border border-line bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder-fg-muted transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
           />
           <button
             type="submit"
             disabled={sending || (text.trim().length === 0 && attachments.length === 0)}
             aria-busy={sending}
-            className="inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-lg bg-gradient-to-br from-brand-400 to-brand-600 text-white transition hover:from-brand-300 hover:to-brand-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/60 disabled:cursor-not-allowed disabled:opacity-60"
+            className="inline-flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-accent text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-60"
           >
             {sending ? <SpinnerIcon className="h-4 w-4" /> : <ArrowRightIcon className="h-4 w-4" />}
           </button>
@@ -286,9 +309,9 @@ function Banner({ children }: { children: React.ReactNode }) {
   return (
     <div
       role="alert"
-      className="flex items-start gap-3 rounded-lg border border-rose-500/20 bg-rose-500/10 p-3 text-sm text-rose-100"
+      className="flex items-start gap-3 rounded-lg border border-rose-500/30 bg-rose-500/10 p-3 text-sm text-rose-700 dark:text-rose-100"
     >
-      <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+      <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-500 dark:text-rose-400" />
       <p className="min-w-0 flex-1 break-words">{children}</p>
     </div>
   );
@@ -302,7 +325,7 @@ function AttachmentPreview({ file, onRemove }: { file: File; onRemove: () => voi
     return () => URL.revokeObjectURL(u);
   }, [file]);
   return (
-    <div className="relative overflow-hidden rounded-lg border border-white/10 bg-ink-900/60">
+    <div className="relative overflow-hidden rounded-lg border border-line bg-surface-2">
       {url ? (
         <img src={url} alt={file.name} className="block h-20 w-20 object-cover" />
       ) : (
@@ -312,7 +335,7 @@ function AttachmentPreview({ file, onRemove }: { file: File; onRemove: () => voi
         type="button"
         onClick={onRemove}
         aria-label="Entfernen"
-        className="absolute right-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-ink-950/80 text-neutral-200 transition hover:bg-rose-500/70 hover:text-white"
+        className="absolute right-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-black/70 text-white transition hover:bg-rose-500/80"
       >
         <XIcon className="h-3 w-3" />
       </button>
diff --git a/apps/desktop/src/pages/FriendsPage.tsx b/apps/desktop/src/pages/FriendsPage.tsx
index 74f6b25..bbdcdc1 100644
--- a/apps/desktop/src/pages/FriendsPage.tsx
+++ b/apps/desktop/src/pages/FriendsPage.tsx
@@ -10,7 +10,9 @@ import {
 import { extractErrorCode } from '@chat-app/shared/i18n';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
+import { Avatar } from '../components/Avatar';
 import {
   AlertIcon,
   ChatBubbleIcon,
@@ -28,6 +30,7 @@ type Tab = 'friends' | 'pending' | 'requests';
 export function FriendsPage() {
   const { t } = useTranslation(['app', 'errors']);
   const { friendships, loading, error, refresh } = useFriendshipsContext();
+  const navigate = useNavigate();
   const [tab, setTab] = useState<Tab>('friends');
   const [query, setQuery] = useState('');
   const [debounced, setDebounced] = useState('');
@@ -104,16 +107,17 @@ export function FriendsPage() {
   );
 
   return (
-    <div className="mx-auto flex h-full max-w-3xl flex-col gap-5 px-6 py-8">
+    <div className="h-full bg-surface-3 text-fg">
+      <div className="mx-auto flex h-full max-w-3xl flex-col gap-5 px-6 py-8">
       <header className="flex items-center justify-between gap-4">
-        <h1 className="font-display text-2xl font-semibold tracking-tight text-white">
+        <h1 className="font-display text-2xl font-semibold tracking-tight text-fg">
           {t('app:friends.title')}
         </h1>
       </header>
 
       <div className="space-y-3">
         <div className="relative">
-          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-500" />
+          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" />
           <input
             type="search"
             value={query}
@@ -122,7 +126,7 @@ export function FriendsPage() {
             autoComplete="off"
             autoCapitalize="none"
             spellCheck={false}
-            className="w-full rounded-lg border border-white/10 bg-ink-900/60 py-2.5 pl-10 pr-3 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
+            className="w-full rounded-lg border border-line bg-surface-2 py-2.5 pl-10 pr-3 text-sm text-fg placeholder-fg-muted transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
           />
         </div>
         {query.length > 0 && (
@@ -138,7 +142,7 @@ export function FriendsPage() {
         )}
       </div>
 
-      <div className="flex gap-2 border-b border-white/5">
+      <div className="flex gap-2 border-b border-line">
         <TabButton active={tab === 'friends'} onClick={() => setTab('friends')}>
           {t('app:friends.tab_friends')} · {accepted.length}
         </TabButton>
@@ -165,7 +169,7 @@ export function FriendsPage() {
               onMessage={() =>
                 performAction('msg-' + f.peer.userId, async () => {
                   const id = await createDm(supabase, f.peer.userId);
-                  navigateToChat(id);
+                  navigate('/chats/' + id);
                 })
               }
               onUnfriend={() =>
@@ -206,16 +210,11 @@ export function FriendsPage() {
           )}
         />
       )}
+      </div>
     </div>
   );
 }
 
-function navigateToChat(id: string): void {
-  // Push history + dispatch popstate so React Router re-evaluates the route.
-  window.history.pushState(null, '', '/chats/' + id);
-  window.dispatchEvent(new PopStateEvent('popstate'));
-}
-
 function translateError(err: unknown, t: ReturnType<typeof useTranslation>['t']): string {
   const code = extractErrorCode(err);
   if (code) return t('errors:' + code, { defaultValue: t('errors:generic') });
@@ -241,8 +240,8 @@ function TabButton({
       className={
         '-mb-px cursor-pointer border-b-2 px-3 pb-2.5 text-sm font-medium transition focus:outline-none ' +
         (active
-          ? 'border-brand-400 text-white'
-          : 'border-transparent text-neutral-400 hover:text-neutral-200')
+          ? 'border-accent text-fg'
+          : 'border-transparent text-fg-muted hover:text-fg')
       }
     >
       {children}
@@ -262,10 +261,11 @@ function FriendList({
   const { t } = useTranslation(['app']);
   if (items.length === 0) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-neutral-500">
-        <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-neutral-400">
+      <div className="flex flex-1 flex-col items-center justify-center text-center text-sm text-fg-muted">
+        <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl border border-line bg-surface-2 text-fg-muted">
           <UsersIcon className="h-5 w-5" />
         </div>
+
         <p>{t(emptyKey)}</p>
       </div>
     );
@@ -283,26 +283,21 @@ function FriendList({
 
 function FriendRow({ profile, children }: { profile: ProfileBrief; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-white/5 bg-ink-900/50 px-4 py-3 backdrop-blur-sm">
-      <Avatar profile={profile} />
+    <div className="flex items-center gap-3 rounded-xl border border-line bg-surface-2 px-4 py-3">
+      <Avatar
+        url={profile.avatarUrl}
+        displayName={profile.displayName ?? profile.username}
+        className="h-9 w-9 text-sm"
+      />
       <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold text-white">{profile.displayName}</p>
-        <p className="truncate text-xs text-neutral-500">@{profile.username}</p>
+        <p className="truncate text-sm font-semibold text-fg">{profile.displayName}</p>
+        <p className="truncate text-xs text-fg-muted">@{profile.username}</p>
       </div>
       <div className="flex shrink-0 gap-2">{children}</div>
     </div>
   );
 }
 
-function Avatar({ profile }: { profile: ProfileBrief }) {
-  const letter = (profile.displayName ?? profile.username ?? '?').trim().charAt(0).toUpperCase();
-  return (
-    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-sm font-semibold text-white ring-1 ring-brand-400/30">
-      {letter || '?'}
-    </div>
-  );
-}
-
 function FriendActions({
   busy,
   onMessage,
@@ -371,7 +366,7 @@ function PrimaryButton({
       type="button"
       disabled={busy}
       onClick={onClick}
-      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-brand-500/90 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 disabled:cursor-not-allowed disabled:opacity-60"
+      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-60"
     >
       {busy ? <SpinnerIcon className="h-3.5 w-3.5" /> : icon}
       <span>{children}</span>
@@ -393,7 +388,7 @@ function SecondaryButton({
       type="button"
       disabled={busy}
       onClick={onClick}
-      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-neutral-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 disabled:cursor-not-allowed disabled:opacity-60"
+      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/30 disabled:cursor-not-allowed disabled:opacity-60"
     >
       {busy && <SpinnerIcon className="h-3.5 w-3.5" />}
       <span>{children}</span>
@@ -415,7 +410,7 @@ function DangerButton({
       type="button"
       disabled={busy}
       onClick={onClick}
-      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-200 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40 disabled:cursor-not-allowed disabled:opacity-60"
+      className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-rose-500/40 bg-rose-500/10 px-3 py-1.5 text-xs font-medium text-rose-600 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/40 disabled:cursor-not-allowed disabled:opacity-60 dark:text-rose-300"
     >
       {busy && <SpinnerIcon className="h-3.5 w-3.5" />}
       <span>{children}</span>
@@ -425,8 +420,8 @@ function DangerButton({
 
 function LoadingRow() {
   return (
-    <div className="flex items-center gap-3 text-sm text-neutral-500">
-      <SpinnerIcon className="h-4 w-4 text-brand-400" />
+    <div className="flex items-center gap-3 text-sm text-fg-muted">
+      <SpinnerIcon className="h-4 w-4 text-accent" />
       <span>…</span>
     </div>
   );
@@ -440,14 +435,14 @@ function Banner({ kind, children }: { kind: 'error' | 'info'; children: React.Re
       className={
         'flex items-start gap-3 rounded-lg border p-3 text-sm ' +
         (isError
-          ? 'border-rose-500/20 bg-rose-500/10 text-rose-100'
-          : 'border-emerald-500/20 bg-emerald-500/10 text-emerald-100')
+          ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-100'
+          : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-100')
       }
     >
       {isError ? (
-        <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-400" />
+        <AlertIcon className="mt-0.5 h-5 w-5 shrink-0 text-rose-500 dark:text-rose-400" />
       ) : (
-        <CheckCircleIcon className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
+        <CheckCircleIcon className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
       )}
       <p className="min-w-0 flex-1 break-words">{children}</p>
     </div>
@@ -474,24 +469,24 @@ function SearchResults({
   const { t } = useTranslation(['app']);
 
   if (query.length < 2) {
-    return <p className="text-xs text-neutral-500">{t('app:friends.search_min_chars')}</p>;
+    return <p className="text-xs text-fg-muted">{t('app:friends.search_min_chars')}</p>;
   }
   if (searching) {
     return (
-      <div className="flex items-center gap-2 text-xs text-neutral-500">
-        <SpinnerIcon className="h-3.5 w-3.5 text-brand-400" />
+      <div className="flex items-center gap-2 text-xs text-fg-muted">
+        <SpinnerIcon className="h-3.5 w-3.5 text-accent" />
         <span>…</span>
       </div>
     );
   }
   if (error) return <Banner kind="error">{error}</Banner>;
   if (results.length === 0) {
-    return <p className="text-xs text-neutral-500">{t('app:friends.search_no_results')}</p>;
+    return <p className="text-xs text-fg-muted">{t('app:friends.search_no_results')}</p>;
   }
 
   return (
     <div>
-      <p className="mb-2 text-xs font-medium uppercase tracking-wide text-neutral-500">
+      <p className="mb-2 text-xs font-medium uppercase tracking-[0.1em] text-fg-muted">
         {t('app:friends.search_results_title')}
       </p>
       <ul className="space-y-1.5">
@@ -530,7 +525,7 @@ function SearchActionButton({
 
   if (existing?.status === 'accepted') {
     return (
-      <span className="inline-flex items-center gap-1.5 rounded-md border border-emerald-500/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-200">
+      <span className="inline-flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-200">
         <CheckCircleIcon className="h-3.5 w-3.5" />
         {t('app:friends.already_friends')}
       </span>
@@ -539,7 +534,7 @@ function SearchActionButton({
 
   if (existing?.status === 'pending' && existing.direction === 'outgoing') {
     return (
-      <span className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-neutral-300">
+      <span className="inline-flex items-center gap-1.5 rounded-md border border-line bg-surface-2 px-3 py-1.5 text-xs text-fg-muted">
         {t('app:friends.request_sent')}
       </span>
     );
diff --git a/apps/desktop/src/pages/SettingsPage.tsx b/apps/desktop/src/pages/SettingsPage.tsx
index 8020d4c..a9d75d5 100644
--- a/apps/desktop/src/pages/SettingsPage.tsx
+++ b/apps/desktop/src/pages/SettingsPage.tsx
@@ -7,6 +7,7 @@ import {
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Avatar } from '../components/Avatar';
 import { LockIcon } from '../components/icons';
 import { useAuth } from '../context/AuthContext';
 import { loadDevicePrivateKey, saveDevicePrivateKey } from '@chat-app/shared/auth';
@@ -75,9 +76,10 @@ export function SettingsPage() {
   }
 
   return (
-    <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
+    <div className="h-full bg-surface-3 text-fg">
+      <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
       <header className="mb-2">
-        <h1 className="font-display text-2xl font-semibold tracking-tight text-white">
+        <h1 className="font-display text-2xl font-semibold tracking-tight text-fg">
           {t('app:settings.title')}
         </h1>
       </header>
@@ -96,7 +98,7 @@ export function SettingsPage() {
       {/* Appearance */}
       <Section title={t('app:settings.section_appearance')}>
         <SettingRow label={t('app:settings.language')}>
-          <div className="inline-flex rounded-lg border border-white/10 bg-ink-800 p-1">
+          <div className="inline-flex rounded-lg border border-line bg-surface-3 p-1">
             {SUPPORTED_LOCALES.map((locale) => {
               const active = (i18n.resolvedLanguage ?? i18n.language) === locale;
               return (
@@ -106,10 +108,10 @@ export function SettingsPage() {
                   disabled={busy}
                   onClick={() => void handleLocaleChange(locale)}
                   className={
-                    'cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+                    'cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                     (active
-                      ? 'bg-brand-500/25 text-white ring-1 ring-brand-400/40'
-                      : 'text-neutral-400 hover:text-neutral-200')
+                      ? 'bg-accent text-accent-fg'
+                      : 'text-fg-muted hover:text-fg')
                   }
                 >
                   {LOCALE_LABELS[locale]}
@@ -141,10 +143,10 @@ export function SettingsPage() {
       {/* Voice / Push-to-Talk + Audio Quality + E2EE */}
       <Section title={t('app:settings.section_voice', { defaultValue: 'Sprache' })}>
         <AudioQualityControls />
-        <div className="mt-3 border-t border-white/5 pt-3">
+        <div className="mt-3 border-t border-line pt-3">
           <PttControls />
         </div>
-        <div className="mt-3 border-t border-white/5 pt-3">
+        <div className="mt-3 border-t border-line pt-3">
           <CallE2EEControls />
         </div>
       </Section>
@@ -157,8 +159,8 @@ export function SettingsPage() {
       {/* Devices */}
       <Section title={t('app:settings.section_devices')}>
         {device && (
-          <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
-            <div className="flex items-center gap-2 text-sm font-semibold text-emerald-200">
+          <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-4">
+            <div className="flex items-center gap-2 text-sm font-semibold text-emerald-700 dark:text-emerald-200">
               <LockIcon className="h-4 w-4" />
               {t('app:settings.this_device')}
             </div>
@@ -177,11 +179,12 @@ export function SettingsPage() {
         <button
           type="button"
           onClick={() => void signOut()}
-          className="cursor-pointer rounded-lg border border-rose-500/30 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-200 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50"
+          className="cursor-pointer rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50 dark:text-rose-300"
         >
           {t('app:settings.sign_out')}
         </button>
       </Section>
+      </div>
     </div>
   );
 }
@@ -228,10 +231,10 @@ function PttControls() {
           type="button"
           onClick={() => setCapturing((v) => !v)}
           className={
-            'inline-flex min-w-[7rem] cursor-pointer items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-mono font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+            'inline-flex min-w-[7rem] cursor-pointer items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-mono font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
             (capturing
-              ? 'border-brand-400 bg-brand-500/20 text-white animate-pulse'
-              : 'border-white/10 bg-ink-800 text-neutral-200 hover:bg-ink-700')
+              ? 'border-accent bg-accent/20 text-fg animate-pulse'
+              : 'border-line bg-surface-3 text-fg hover:brightness-95')
           }
         >
           {capturing
@@ -288,7 +291,7 @@ function AudioQualityControls() {
   return (
     <>
       <SettingRow label={t('app:settings.audio_quality', { defaultValue: 'Audio-Qualität' })}>
-        <div className="inline-flex rounded-lg border border-white/10 bg-ink-800 p-1">
+        <div className="inline-flex rounded-lg border border-line bg-surface-2 p-1">
           {AUDIO_QUALITY_ORDER.map((q) => {
             const active = cfg.quality === q;
             return (
@@ -297,10 +300,10 @@ function AudioQualityControls() {
                 type="button"
                 onClick={() => updateAudioSettings({ quality: q })}
                 className={
-                  'cursor-pointer rounded-md px-3 py-1 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+                  'cursor-pointer rounded-md px-3 py-1 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                   (active
-                    ? 'bg-brand-500/25 text-white ring-1 ring-brand-400/40'
-                    : 'text-neutral-400 hover:text-neutral-200')
+                    ? 'bg-accent text-accent-fg'
+                    : 'text-fg-muted hover:text-fg')
                 }
               >
                 {labels[q]}
@@ -309,7 +312,7 @@ function AudioQualityControls() {
           })}
         </div>
       </SettingRow>
-      <div className="rounded-lg border border-white/5 bg-ink-900/40 p-3 text-[11px] text-neutral-400">
+      <div className="rounded-lg border border-line bg-surface-3 p-3 text-[11px] text-fg-muted">
         <div className="grid grid-cols-4 gap-3">
           <Stat label="Bitrate" value={params.bitrateKbps + ' kbps'} />
           <Stat label="Channels" value={params.stereo ? 'Stereo' : 'Mono'} />
@@ -317,7 +320,7 @@ function AudioQualityControls() {
           <Stat label="DSP" value={params.echoCancellation ? 'On' : 'Off'} />
         </div>
       </div>
-      <p className="text-xs text-neutral-500">
+      <p className="text-xs text-fg-muted">
         {cfg.quality === 'hifi'
           ? t('app:settings.audio_hifi_hint', {
               defaultValue:
@@ -346,10 +349,6 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
 
   const userId = profile?.userId;
   const url = profile?.avatarUrl ?? null;
-  const letter = (profile?.displayName ?? profile?.username ?? '?')
-    .trim()
-    .charAt(0)
-    .toUpperCase() || '?';
 
   async function handleFile(file: File) {
     if (!userId) return;
@@ -389,27 +388,23 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
 
   return (
     <div className="flex items-center gap-4">
-      <div className="relative h-16 w-16 overflow-hidden rounded-full bg-brand-500/30 ring-1 ring-brand-400/30">
-        {url ? (
-          <img src={url} alt="" className="h-full w-full object-cover" />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center text-2xl font-semibold text-white">
-            {letter}
-          </div>
-        )}
-      </div>
+      <Avatar
+        url={url}
+        displayName={profile?.displayName ?? profile?.username}
+        className="h-16 w-16 text-2xl"
+      />
 
       <div className="flex flex-1 flex-col gap-1">
-        <div className="text-sm font-medium text-neutral-200">
+        <div className="text-sm font-medium text-fg">
           {t('app:settings.avatar', { defaultValue: 'Avatar' })}
         </div>
-        <div className="text-xs text-neutral-500">
+        <div className="text-xs text-fg-muted">
           {t('app:settings.avatar_hint', {
             defaultValue: 'Quadratisch, max 512×512, WebP. Sichtbar für deine Freunde.',
           })}
         </div>
         {error && (
-          <div className="text-xs text-rose-300">{error}</div>
+          <div className="text-xs text-rose-500 dark:text-rose-300">{error}</div>
         )}
       </div>
 
@@ -427,7 +422,7 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
         type="button"
         onClick={() => inputRef.current?.click()}
         disabled={busy || uploading}
-        className="cursor-pointer rounded-lg bg-brand-500/80 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-400 disabled:cursor-not-allowed disabled:opacity-50"
+        className="cursor-pointer rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {uploading
           ? t('app:settings.avatar_uploading', { defaultValue: 'Lade…' })
@@ -440,7 +435,7 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
           type="button"
           onClick={() => void handleRemove()}
           disabled={busy || uploading}
-          className="cursor-pointer rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs font-semibold text-rose-200 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50"
+          className="cursor-pointer rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-1.5 text-xs font-semibold text-rose-600 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-rose-300"
         >
           {t('app:settings.avatar_remove', { defaultValue: 'Entfernen' })}
         </button>
@@ -514,11 +509,11 @@ function DeviceKeyBackupControls() {
   }
 
   return (
-    <div className="mt-4 rounded-xl border border-white/10 bg-ink-900/40 p-4">
-      <div className="text-sm font-semibold text-white">
+    <div className="mt-4 rounded-xl border border-line bg-surface-3 p-4">
+      <div className="text-sm font-semibold text-fg">
         {t('app:settings.device_key_backup', { defaultValue: 'Geräteschlüssel-Backup' })}
       </div>
-      <p className="mt-1 text-xs text-neutral-400">
+      <p className="mt-1 text-xs text-fg-muted">
         {t('app:settings.device_key_backup_hint', {
           defaultValue:
             'Sichere deinen privaten Schlüssel passwortgeschützt, damit du auf neuen Geräten alte Nachrichten weiter lesen kannst.',
@@ -526,7 +521,7 @@ function DeviceKeyBackupControls() {
       </p>
 
       <div className="mt-4 space-y-2">
-        <div className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
+        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
           {t('app:settings.backup_export', { defaultValue: 'Export' })}
         </div>
         <div className="flex gap-2">
@@ -535,13 +530,13 @@ function DeviceKeyBackupControls() {
             value={exportPass}
             onChange={(e) => setExportPass(e.target.value)}
             placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase (min 8)' })}
-            className="flex-1 rounded-lg border border-white/10 bg-ink-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
           />
           <button
             type="button"
             disabled={busy || exportPass.length < 8 || !canRun}
             onClick={() => void handleExport()}
-            className="cursor-pointer rounded-lg bg-brand-500/80 px-4 text-sm font-semibold text-white transition hover:bg-brand-400 disabled:cursor-not-allowed disabled:opacity-50"
+            className="cursor-pointer rounded-lg bg-accent px-4 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {t('app:settings.backup_create', { defaultValue: 'Erstellen' })}
           </button>
@@ -552,13 +547,13 @@ function DeviceKeyBackupControls() {
             value={backupOut}
             onClick={(e) => (e.target as HTMLTextAreaElement).select()}
             rows={3}
-            className="w-full rounded-lg border border-emerald-500/30 bg-ink-950/60 p-2 font-mono text-[10px] text-emerald-200"
+            className="w-full rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-2 font-mono text-[10px] text-emerald-700 dark:text-emerald-200"
           />
         )}
       </div>
 
-      <div className="mt-4 space-y-2 border-t border-white/5 pt-4">
-        <div className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
+      <div className="mt-4 space-y-2 border-t border-line pt-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
           {t('app:settings.backup_import', { defaultValue: 'Import' })}
         </div>
         <textarea
@@ -568,7 +563,7 @@ function DeviceKeyBackupControls() {
           placeholder={t('app:settings.backup_blob_placeholder', {
             defaultValue: 'chatapp-backup-v1.…',
           })}
-          className="w-full rounded-lg border border-white/10 bg-ink-800 p-2 font-mono text-[11px] text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+          className="w-full rounded-lg border border-line bg-surface-3 p-2 font-mono text-[11px] text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
         />
         <div className="flex gap-2">
           <input
@@ -576,13 +571,13 @@ function DeviceKeyBackupControls() {
             value={importPass}
             onChange={(e) => setImportPass(e.target.value)}
             placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase' })}
-            className="flex-1 rounded-lg border border-white/10 bg-ink-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
           />
           <button
             type="button"
             disabled={busy || !importBlob || !importPass || !canRun}
             onClick={() => void handleImport()}
-            className="cursor-pointer rounded-lg bg-emerald-500/80 px-4 text-sm font-semibold text-white transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-50"
+            className="cursor-pointer rounded-lg bg-emerald-600 px-4 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {t('app:settings.backup_restore', { defaultValue: 'Wiederherstellen' })}
           </button>
@@ -593,7 +588,9 @@ function DeviceKeyBackupControls() {
         <p
           className={
             'mt-3 text-xs ' +
-            (msg.kind === 'ok' ? 'text-emerald-300' : 'text-rose-300')
+            (msg.kind === 'ok'
+              ? 'text-emerald-600 dark:text-emerald-300'
+              : 'text-rose-600 dark:text-rose-300')
           }
         >
           {msg.text}
@@ -619,7 +616,7 @@ function ScreenShareControls() {
           onChange={(e) =>
             updateScreenShareSettings({ preset: e.target.value as ScreenSharePreset })
           }
-          className="cursor-pointer rounded-lg border border-white/10 bg-ink-800 px-3 py-1.5 text-xs text-neutral-200 focus:border-brand-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+          className="cursor-pointer rounded-lg border border-line bg-surface-3 px-3 py-1.5 text-xs text-fg focus:border-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
         >
           {PRESET_ORDER.map((p) => (
             <option key={p} value={p}>
@@ -628,7 +625,7 @@ function ScreenShareControls() {
           ))}
         </select>
       </SettingRow>
-      <div className="rounded-lg border border-white/5 bg-ink-900/40 p-3 text-[11px] text-neutral-400">
+      <div className="rounded-lg border border-line bg-surface-3 p-3 text-[11px] text-fg-muted">
         <div className="grid grid-cols-3 gap-3">
           <Stat label="Bitrate (max)" value={formatBitrate(params.bitrateKbps)} />
           <Stat
@@ -638,7 +635,7 @@ function ScreenShareControls() {
           <Stat label="Framerate" value={params.framerate + ' fps'} />
         </div>
       </div>
-      <p className="text-xs text-neutral-500">
+      <p className="text-xs text-fg-muted">
         {t('app:settings.screen_share_hint', {
           defaultValue:
             'WebRTC passt Bitrate + Auflösung dynamisch an die Netzwerkqualität an (SVC/VP9). Die Werte sind Obergrenzen. Änderungen greifen beim nächsten Call.',
@@ -651,8 +648,8 @@ function ScreenShareControls() {
 function Stat({ label, value }: { label: string; value: string }) {
   return (
     <div>
-      <div className="text-[10px] uppercase tracking-wide text-neutral-500">{label}</div>
-      <div className="mt-0.5 font-mono text-neutral-200">{value}</div>
+      <div className="text-[10px] uppercase tracking-[0.1em] text-fg-muted">{label}</div>
+      <div className="mt-0.5 font-mono text-fg">{value}</div>
     </div>
   );
 }
@@ -666,8 +663,8 @@ function formatBitrate(kbps: number): string {
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <section className="rounded-2xl border border-white/10 bg-ink-900/60 p-5 backdrop-blur-xl">
-      <h2 className="mb-4 text-xs font-semibold uppercase tracking-wide text-neutral-400">
+    <section className="rounded-2xl border border-line bg-surface-2 p-5">
+      <h2 className="mb-4 text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
         {title}
       </h2>
       <div className="space-y-3">{children}</div>
@@ -678,10 +675,10 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
     <div className="flex items-center justify-between gap-4">
-      <dt className="text-sm text-neutral-500">{label}</dt>
+      <dt className="text-sm text-fg-muted">{label}</dt>
       <dd
         className={
-          'max-w-[60%] truncate text-right text-sm text-neutral-200 ' +
+          'max-w-[60%] truncate text-right text-sm text-fg ' +
           (mono ? 'font-mono text-xs' : '')
         }
         title={value}
@@ -695,7 +692,7 @@ function Row({ label, value, mono }: { label: string; value: string; mono?: bool
 function SettingRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex items-center justify-between gap-4">
-      <span className="text-sm text-neutral-200">{label}</span>
+      <span className="text-sm text-fg">{label}</span>
       {children}
     </div>
   );
@@ -717,8 +714,8 @@ function Toggle({
   return (
     <label className="flex cursor-pointer items-start justify-between gap-4">
       <span className="min-w-0 flex-1">
-        <span className="block text-sm text-neutral-200">{label}</span>
-        {hint && <span className="mt-1 block text-xs text-neutral-500">{hint}</span>}
+        <span className="block text-sm text-fg">{label}</span>
+        {hint && <span className="mt-1 block text-xs text-fg-muted">{hint}</span>}
       </span>
       <span className="relative mt-0.5 inline-flex h-6 w-11 shrink-0">
         <input
@@ -728,8 +725,8 @@ function Toggle({
           onChange={(e) => onChange(e.target.checked)}
           className="peer sr-only"
         />
-        <span className="inline-block h-6 w-11 rounded-full bg-neutral-700 transition peer-checked:bg-brand-500/70 peer-disabled:opacity-50" />
-        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
+        <span className="inline-block h-6 w-11 rounded-full bg-surface transition peer-checked:bg-accent peer-disabled:opacity-50" />
+        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition peer-checked:translate-x-5" />
       </span>
     </label>
   );
diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css
index 8c502e5..96a2f71 100644
--- a/apps/desktop/src/styles/globals.css
+++ b/apps/desktop/src/styles/globals.css
@@ -4,11 +4,42 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    color-scheme: dark;
-  }
+/* ---------------------------------------------------------------------------
+ * Clean-Rail design tokens.
+ *
+ * `--bg-rgb / --fg-rgb / --accent-rgb` are *space-separated rgb triplets*
+ * (no `rgb(...)` wrapper) so Tailwind's `rgb(var(--x) / <alpha-value>)`
+ * alpha modifier works (e.g. `bg-surface/40`).
+ *
+ * `--line` is a full color value with baked-in alpha — theme decides whether
+ * borders are inked-on-white or white-on-ink.
+ * ------------------------------------------------------------------------- */
 
+:root {
+  --bg-rgb: 250 250 249;
+  --bg-2-rgb: 244 244 242;
+  --bg-3-rgb: 255 255 255;
+  --fg-rgb: 10 10 15;
+  --fg-muted-rgb: 115 115 128;
+  --accent-rgb: 79 70 229;
+  --accent-fg-rgb: 255 255 255;
+  --line: rgba(10, 10, 15, 0.08);
+  color-scheme: light;
+}
+
+.dark {
+  --bg-rgb: 5 5 7;
+  --bg-2-rgb: 17 17 24;
+  --bg-3-rgb: 10 10 15;
+  --fg-rgb: 244 244 245;
+  --fg-muted-rgb: 138 138 153;
+  --accent-rgb: 109 115 255;
+  --accent-fg-rgb: 255 255 255;
+  --line: rgba(255, 255, 255, 0.07);
+  color-scheme: dark;
+}
+
+@layer base {
   html,
   body,
   #root {
@@ -16,12 +47,12 @@
   }
 
   body {
-    @apply bg-ink-950 text-neutral-100 font-sans antialiased;
+    @apply bg-surface text-fg font-sans antialiased;
     font-feature-settings: 'cv11', 'ss01';
   }
 
   ::selection {
-    @apply bg-brand-500/40 text-white;
+    @apply bg-accent/40 text-white;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -46,4 +77,15 @@
     background-size: 32px 32px;
     background-position: -1px -1px;
   }
+  /* Glass pill used for the fullscreen call controls bar. */
+  .glass-pill {
+    background: rgba(10, 10, 15, 0.7);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  .glass-chip {
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(10px);
+    color: #fff;
+  }
 }
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
index 6c7669d..36f176d 100644
--- a/apps/desktop/tailwind.config.js
+++ b/apps/desktop/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [
     './index.html',
     './src/**/*.{ts,tsx}',
@@ -51,12 +52,28 @@ export default {
           800: '#312E81',
           900: '#1E1B4B',
         },
+        // Clean-Rail design tokens. RGB-tuple form so alpha modifiers
+        // (e.g. bg-surface/50) work under both themes.
+        surface: 'rgb(var(--bg-rgb) / <alpha-value>)',
+        'surface-2': 'rgb(var(--bg-2-rgb) / <alpha-value>)',
+        'surface-3': 'rgb(var(--bg-3-rgb) / <alpha-value>)',
+        fg: 'rgb(var(--fg-rgb) / <alpha-value>)',
+        'fg-muted': 'rgb(var(--fg-muted-rgb) / <alpha-value>)',
+        accent: 'rgb(var(--accent-rgb) / <alpha-value>)',
+        'accent-fg': 'rgb(var(--accent-fg-rgb) / <alpha-value>)',
+        // Line has baked-in theme-specific alpha — direct var, no modifier.
+        line: 'var(--line)',
       },
       animation: {
         'blob-a': 'blob 22s ease-in-out infinite',
         'blob-b': 'blob 28s ease-in-out infinite reverse',
         'fade-in': 'fadeIn 400ms ease-out',
         'slide-up': 'slideUp 350ms ease-out',
+        'pulse-ring': 'pulseRing 2s ease-out infinite',
+        'audio-pulse': 'audioPulse 1.3s ease-out infinite',
+        'live-dot': 'liveDotPulse 1.5s ease-in-out infinite',
+        'slide-in-call': 'slideInCall 0.4s cubic-bezier(0.22,1,0.36,1)',
+        'fs-hint': 'fsHintFade 3.5s ease-out forwards',
       },
       keyframes: {
         blob: {
@@ -72,9 +89,34 @@ export default {
           from: { opacity: '0', transform: 'translateY(8px)' },
           to: { opacity: '1', transform: 'translateY(0)' },
         },
+        pulseRing: {
+          '0%': { transform: 'scale(0.85)', opacity: '0.6' },
+          '100%': { transform: 'scale(1.25)', opacity: '0' },
+        },
+        audioPulse: {
+          '0%': { transform: 'scale(1)', opacity: '0.8' },
+          '100%': { transform: 'scale(1.3)', opacity: '0' },
+        },
+        liveDotPulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.4' },
+        },
+        slideInCall: {
+          from: { opacity: '0', transform: 'translateY(20px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        fsHintFade: {
+          '0%': { opacity: '0', transform: 'translate(-50%, -6px)' },
+          '15%, 75%': { opacity: '1', transform: 'translate(-50%, 0)' },
+          '100%': { opacity: '0', transform: 'translate(-50%, -6px)' },
+        },
       },
       boxShadow: {
         glow: '0 0 40px -8px rgba(99, 102, 241, 0.35)',
+        'call-card': '0 20px 60px rgba(0,0,0,0.1)',
+        'call-card-dark': '0 20px 60px rgba(0,0,0,0.5)',
+        'pip-call': '0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15)',
+        'accept-btn': '0 4px 14px rgba(22,163,74,0.3)',
       },
     },
   },