diff --git a/packages/web/src/app/App.tsx b/packages/web/src/app/App.tsx
index 558fc63..20e9c3b 100644
--- a/packages/web/src/app/App.tsx
+++ b/packages/web/src/app/App.tsx
@@ -4,7 +4,7 @@ import type { Conversation, Message, MediaRef, PublicUser, User } from '@altrica
 import { heartbeat, getAvatarUploadUrl, uploadToUrl, setAvatar } from '@altricade/core/api';
 import { SessionProvider, useSession } from '../entities/session';
 import { AuthForm } from '../features/auth';
-import { RealtimeProvider, useRealtime } from '../features/realtime';
+import { RealtimeProvider } from '../features/realtime';
 import { useConversations, ConversationSidebar } from '../features/conversations';
 import { ContactsPanel } from '../features/contacts';
 import { ChatView } from '../features/messaging';
@@ -12,8 +12,21 @@ import { NotificationsProvider, useNotifications, unregisterWebPush } from '../f
 import { apiConfig } from '../shared/api';
 import { useTheme } from '../shared/theme';
 import type { ThemePreference } from '../shared/theme';
+import {
+  SunIcon,
+  MoonIcon,
+  MonitorIcon,
+  PlusIcon,
+  CloseIcon,
+  LogOutIcon,
+  UsersIcon,
+} from '../shared/ui';
 
-const PREFERENCES: readonly ThemePreference[] = ['light', 'dark', 'system'];
+const PREFERENCES: readonly { value: ThemePreference; label: string; icon: ReactElement }[] = [
+  { value: 'light', label: 'Light', icon: <SunIcon size={17} /> },
+  { value: 'dark', label: 'Dark', icon: <MoonIcon size={17} /> },
+  { value: 'system', label: 'System', icon: <MonitorIcon size={17} /> },
+];
 
 const mediaLabel = (media: MediaRef | null): string => {
   if (media === null) {
@@ -34,23 +47,85 @@ const mediaLabel = (media: MediaRef | null): string => {
 const ThemeSwitch = (): ReactElement => {
   const { preference, setPreference } = useTheme();
   return (
-    <div className="theme-switch">
+    <div className="theme-switch" role="group" aria-label="Theme">
       {PREFERENCES.map((option) => (
         <button
-          key={option}
+          key={option.value}
           type="button"
-          aria-pressed={preference === option}
+          className="theme-option"
+          title={option.label}
+          aria-label={option.label}
+          aria-pressed={preference === option.value}
           onClick={() => {
-            setPreference(option);
+            setPreference(option.value);
           }}
         >
-          {option}
+          {option.icon}
         </button>
       ))}
     </div>
   );
 };
 
+const GroupComposer = ({
+  onCreate,
+}: {
+  onCreate: (title: string, members: string[]) => Promise<void>;
+}): ReactElement => {
+  const [title, setTitle] = useState('');
+  const [members, setMembers] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (event: SyntheticEvent): Promise<void> => {
+    event.preventDefault();
+    const trimmed = title.trim();
+    if (trimmed === '') {
+      return;
+    }
+    const list = members
+      .split(',')
+      .map((name) => name.trim())
+      .filter((name) => name.length > 0);
+    setError(null);
+    try {
+      await onCreate(trimmed, list);
+      setTitle('');
+      setMembers('');
+    } catch {
+      setError('Could not create group');
+    }
+  };
+
+  return (
+    <div className="compose-block">
+      <p className="rail-section-title">New group</p>
+      <form className="stack-form" onSubmit={(event) => void submit(event)}>
+        <input
+          className="field"
+          placeholder="Group name"
+          value={title}
+          onChange={(event) => {
+            setTitle(event.target.value);
+          }}
+        />
+        <input
+          className="field"
+          placeholder="Members (comma-separated usernames)"
+          value={members}
+          onChange={(event) => {
+            setMembers(event.target.value);
+          }}
+        />
+        <button type="submit" className="btn-primary btn-sm">
+          <UsersIcon size={17} />
+          Create group
+        </button>
+      </form>
+      {error !== null ? <p className="form-error">{error}</p> : null}
+    </div>
+  );
+};
+
 const Dashboard = ({ user, onLogout }: { user: User; onLogout: () => void }): ReactElement => {
   const me: PublicUser = {
     id: user.id,
@@ -59,9 +134,9 @@ const Dashboard = ({ user, onLogout }: { user: User; onLogout: () => void }): Re
     avatarUrl: user.avatarUrl,
   };
   const { updateUser } = useSession();
-  const { state } = useRealtime();
   const { notify, setOpener } = useNotifications();
   const [current, setCurrent] = useState<Conversation | null>(null);
+  const [composing, setComposing] = useState(false);
   const convRef = useRef<Conversation[]>([]);
 
   // Toast (or OS notification when hidden) for messages arriving in other chats.
@@ -86,15 +161,20 @@ const Dashboard = ({ user, onLogout }: { user: User; onLogout: () => void }): Re
   );
   convRef.current = conversations;
 
+  const openConversation = useCallback((conversation: Conversation): void => {
+    setCurrent(conversation);
+    setComposing(false);
+  }, []);
+
   // Let notification taps (in-app toast or SW message) open the right chat.
   useEffect(() => {
     setOpener((conversationId) => {
       const conversation = convRef.current.find((item) => item.id === conversationId);
       if (conversation !== undefined) {
-        setCurrent(conversation);
+        openConversation(conversation);
       }
     });
-  }, [setOpener]);
+  }, [setOpener, openConversation]);
 
   // Deep-link: /?conversation=<id> (from a push opened in a fresh tab).
   useEffect(() => {
@@ -135,57 +215,89 @@ const Dashboard = ({ user, onLogout }: { user: User; onLogout: () => void }): Re
     };
   }, []);
 
+  const startDirectAndOpen = async (username: string): Promise<void> => {
+    openConversation(await startDirect(username));
+  };
+
+  const createGroupAndOpen = async (title: string, members: string[]): Promise<void> => {
+    openConversation(await createGroupChat(title, members));
+  };
+
   return (
-    <div className="layout">
-      <header className="topbar">
-        <span className="topbar-user">
-          <label className="avatar-edit" title="Change avatar">
-            {user.avatarUrl !== null ? (
-              <img src={user.avatarUrl} alt="avatar" className="avatar" />
-            ) : (
-              <span className="avatar avatar-placeholder">{user.username.charAt(0)}</span>
-            )}
-            <input type="file" accept="image/*" hidden onChange={onAvatar} />
-          </label>
-          <span>
-            <strong>@{user.username}</strong> · socket: {state}
+    <div className="app-shell">
+      <aside className="rail">
+        <div className="rail-header">
+          <span className="rail-brand">
+            <span className="rail-mark" aria-hidden="true">
+              A
+            </span>
+            <span className="rail-title">Altricade</span>
           </span>
-        </span>
-        <span className="topbar-actions">
-          <ThemeSwitch />
-          <button type="button" onClick={onLogout}>
-            Log out
-          </button>
-        </span>
-      </header>
-      <div className="workspace">
-        <div className="sidebar-column">
+          <div className="rail-header-actions">
+            <ThemeSwitch />
+            <button
+              type="button"
+              className={composing ? 'icon-btn accent' : 'icon-btn'}
+              aria-label={composing ? 'Close new chat' : 'New chat'}
+              aria-pressed={composing}
+              onClick={() => {
+                setComposing((value) => !value);
+              }}
+            >
+              {composing ? <CloseIcon /> : <PlusIcon />}
+            </button>
+          </div>
+        </div>
+
+        {composing ? (
+          <div className="rail-scroll compose">
+            <GroupComposer onCreate={createGroupAndOpen} />
+            <ContactsPanel onStartDirect={startDirectAndOpen} />
+          </div>
+        ) : (
           <ConversationSidebar
             conversations={conversations}
             currentId={current?.id ?? null}
             onlineMap={onlineMap}
-            onSelect={setCurrent}
-            onStartDirect={async (username) => {
-              setCurrent(await startDirect(username));
-            }}
-            onCreateGroup={async (title, members) => {
-              setCurrent(await createGroupChat(title, members));
-            }}
+            onSelect={openConversation}
+            onStartDirect={startDirectAndOpen}
           />
-          <ContactsPanel
-            onStartDirect={async (username) => {
-              setCurrent(await startDirect(username));
-            }}
-          />
-        </div>
-        {current !== null ? (
-          <ChatView conversation={current} me={me} />
-        ) : (
-          <section className="chat chat-empty">
-            <p>Search for a user or pick a contact to start chatting.</p>
-          </section>
         )}
-      </div>
+
+        <div className="rail-footer">
+          <label className="rail-account" title="Change avatar">
+            {user.avatarUrl !== null ? (
+              <img src={user.avatarUrl} alt="avatar" className="avatar rail-account-avatar" />
+            ) : (
+              <span className="avatar rail-account-avatar avatar-placeholder">
+                {user.displayName.charAt(0)}
+              </span>
+            )}
+            <input type="file" accept="image/*" hidden onChange={onAvatar} />
+            <span className="rail-account-names">
+              <span className="rail-account-name">{user.displayName}</span>
+              <span className="muted rail-account-handle">@{user.username}</span>
+            </span>
+          </label>
+          <button type="button" className="icon-btn" aria-label="Log out" onClick={onLogout}>
+            <LogOutIcon />
+          </button>
+        </div>
+      </aside>
+
+      {current !== null ? (
+        <ChatView conversation={current} me={me} onlineMap={onlineMap} />
+      ) : (
+        <section className="chat-pane chat-empty">
+          <div className="chat-empty-inner">
+            <span className="chat-empty-mark" aria-hidden="true">
+              A
+            </span>
+            <h2>Select a conversation</h2>
+            <p className="muted">Search for someone or start a new chat to begin messaging.</p>
+          </div>
+        </section>
+      )}
     </div>
   );
 };
@@ -195,8 +307,10 @@ const Shell = (): ReactElement => {
 
   if (status === 'loading') {
     return (
-      <main className="app">
-        <p>Loading…</p>
+      <main className="splash">
+        <span className="splash-mark" aria-hidden="true">
+          A
+        </span>
       </main>
     );
   }
diff --git a/packages/web/src/app/index.css b/packages/web/src/app/index.css
index 3fab69a..e5df004 100644
--- a/packages/web/src/app/index.css
+++ b/packages/web/src/app/index.css
@@ -1,532 +1,1458 @@
+/* =============================================================================
+   Altricade — design system foundation
+   Colors come from ThemeProvider as --color-<token> (see shared/theme/tokens.ts).
+   Everything below is the static primitive layer + base element styling.
+   Component sections are appended further down, grouped by feature.
+   ========================================================================== */
+
 :root {
   color-scheme: light dark;
 
-  /* Fallbacks until ThemeProvider sets the resolved tokens on <html>. */
+  /* Fallback colors (light) until ThemeProvider writes the resolved tokens. */
   --color-background: #ffffff;
-  --color-surface: #f4f5f7;
-  --color-text: #0b0c0f;
-  --color-textMuted: #5b6472;
-  --color-accent: #2f6fed;
-  --color-border: #e2e5ea;
+  --color-surfacePanel: #f7f8fa;
+  --color-surface: #eef0f4;
+  --color-surfaceHover: #f0f2f6;
+  --color-chatBackdrop: #f4f5f8;
+  --color-text: #0c0d10;
+  --color-textMuted: #606a7b;
+  --color-textFaint: #9aa3b2;
+  --color-accent: #4c6fff;
+  --color-accentHover: #3a5cf5;
+  --color-accentSoft: #eaeeff;
+  --color-onAccent: #ffffff;
+  --color-onAccentMuted: rgba(255, 255, 255, 0.72);
+  --color-bubbleOut: #4c6fff;
+  --color-bubbleIn: #ffffff;
+  --color-border: #e6e8ee;
+  --color-borderStrong: #d4d8e0;
+  --color-online: #22c55e;
+  --color-danger: #ef4444;
+
+  /* Spacing scale (4px base). */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-8: 3rem;
+
+  /* Radius scale. */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+  --radius-full: 999px;
+
+  /* Type. */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.375rem;
+  --text-2xl: 1.75rem;
+
+  /* Layout. */
+  --rail-width: 340px;
+  --header-height: 68px;
+
+  /* Motion. */
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-fast: 120ms;
+  --dur: 200ms;
+  --dur-slow: 320ms;
+
+  /* Elevation (light). */
+  --shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.06), 0 1px 1px rgba(16, 18, 27, 0.04);
+  --shadow-md: 0 6px 20px rgba(16, 18, 27, 0.1);
+  --shadow-lg: 0 24px 60px rgba(16, 18, 27, 0.22);
 }
 
-* {
+:root[data-theme='dark'] {
+  /* Elevation (dark) — deeper, since surfaces are near-black. */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.7);
+}
+
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
+html,
+body,
+#root {
+  height: 100%;
+}
+
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
   background: var(--color-background);
   color: var(--color-text);
   transition:
-    background 0.2s ease,
-    color 0.2s ease;
+    background var(--dur) var(--ease),
+    color var(--dur) var(--ease);
 }
 
-.app {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 3rem 1.5rem;
-}
-
-.app h1 {
-  color: var(--color-accent);
-  margin-bottom: 0.25rem;
-}
-
-.app dl {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0.5rem 1rem;
-  padding: 1rem;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-}
-
-.app dt {
-  color: var(--color-textMuted);
-}
-
-.app dd {
+h1,
+h2,
+h3,
+h4,
+p {
   margin: 0;
-  font-family: ui-monospace, monospace;
 }
 
-.theme-switch {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-}
-
-.theme-switch button {
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
+button {
+  font: inherit;
+  color: inherit;
   cursor: pointer;
 }
 
-.theme-switch button[aria-pressed='true'] {
-  border-color: var(--color-accent);
+input,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+a {
   color: var(--color-accent);
+  text-decoration: none;
 }
 
-.auth-form,
-.echo-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 320px;
-  margin: 1rem 0;
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
-.echo-form {
-  flex-direction: row;
+/* Scrollbars — thin, theme-aware, only on hover-capable surfaces. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-borderStrong) transparent;
 }
 
-.auth-form input,
-.echo-form input {
-  padding: 0.5rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
 }
 
-.auth-form button,
-.echo-form button,
-.actions button {
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-accent);
-  background: var(--color-accent);
-  color: #fff;
-  cursor: pointer;
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: 3px solid transparent;
+  border-radius: var(--radius-full);
+  background-clip: padding-box;
 }
 
-.auth-form button:disabled,
-.echo-form button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+*:hover::-webkit-scrollbar-thumb {
+  background: var(--color-borderStrong);
+  background-clip: padding-box;
 }
 
-.auth-toggle {
-  background: none;
-  border: none;
-  color: var(--color-accent);
-  cursor: pointer;
-  padding: 0;
+*::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.auth-error {
-  color: #e5484d;
+::selection {
+  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
 }
 
-.realtime dl {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 0.25rem 1rem;
-}
-
-.event-log {
-  font-family: ui-monospace, monospace;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.75rem 1.25rem;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.actions {
-  margin: 1rem 0;
-}
-
-/* Chat layout */
-.layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.topbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface);
-}
-
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.workspace {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.sidebar {
-  width: 260px;
-  border-right: 1px solid var(--color-border);
-  padding: 1rem;
-  overflow-y: auto;
-}
-
-.sidebar-form {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.sidebar-form input {
-  flex: 1;
-  min-width: 0;
-  padding: 0.4rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  color: var(--color-text);
-}
-
-.room-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.room-list button {
-  width: 100%;
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  background: none;
-  color: var(--color-text);
-  cursor: pointer;
-}
-
-.room-list button[aria-pressed='true'] {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.chat {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding: 1rem;
-}
-
-.chat-empty {
-  align-items: center;
-  justify-content: center;
-  color: var(--color-textMuted);
-}
-
-.message-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.message-list li {
-  padding: 0.4rem 0.6rem;
-  border-radius: 8px;
-  background: var(--color-surface);
-}
-
-.message-list li.mine {
-  align-self: flex-end;
-  background: var(--color-accent);
-  color: #fff;
-}
-
-.msg-author {
-  font-weight: 600;
-  margin-right: 0.5rem;
-}
-
-.composer {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-}
-
-.composer input {
-  flex: 1;
-  padding: 0.6rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.sidebar-column {
-  width: 280px;
-  border-right: 1px solid var(--color-border);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar-column .sidebar {
-  width: auto;
-  border-right: none;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.sidebar-heading {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-textMuted);
-  margin: 1rem 0 0.5rem;
-}
-
-.search-input {
-  width: 100%;
-  padding: 0.5rem;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  color: var(--color-text);
-}
-
-.search-results {
-  list-style: none;
-  padding: 0;
-  margin: 0.5rem 0;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.search-results button,
-.contact-list button {
-  width: 100%;
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  border: none;
-  background: none;
-  color: var(--color-text);
-  cursor: pointer;
-}
+/* -------- shared primitives -------- */
 
 .muted {
   color: var(--color-textMuted);
 }
 
-.contacts {
-  padding: 1rem;
-}
-
-.contact-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.contact-list li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.contact-remove {
-  border: none;
-  background: none;
-  color: var(--color-textMuted);
-  cursor: pointer;
-}
-
-.chat-title {
-  margin: 0 0 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.group-form {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.online-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #30a46c;
-  margin-right: 0.4rem;
-}
-
-.unread-badge {
-  display: inline-block;
-  min-width: 1.2rem;
-  padding: 0 0.35rem;
-  margin-left: 0.4rem;
-  border-radius: 999px;
-  background: var(--color-accent);
-  color: #fff;
-  font-size: 0.7rem;
-  text-align: center;
-}
-
-.msg-row {
-  display: flex;
-  align-items: baseline;
-  gap: 0.4rem;
-}
-
-.read-mark {
-  margin-left: auto;
-  font-size: 0.75rem;
-  opacity: 0.8;
-}
-
-.msg-actions {
-  display: none;
-  gap: 0.25rem;
-  margin-top: 0.2rem;
-}
-
-.message-list li:hover .msg-actions {
-  display: flex;
-}
-
-.react-btn,
-.link-btn {
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 0.8rem;
-  padding: 0 0.15rem;
-  color: inherit;
-}
-
-.link-btn {
-  color: var(--color-textMuted);
-  text-decoration: underline;
-}
-
-.reactions {
-  display: flex;
-  gap: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-.reaction {
-  border: 1px solid var(--color-border);
-  background: var(--color-background);
-  color: var(--color-text);
-  border-radius: 999px;
-  padding: 0 0.5rem;
-  font-size: 0.8rem;
-  cursor: pointer;
-}
-
-.reaction.mine-reaction {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.typing {
-  font-style: italic;
-  padding: 0 0.25rem;
-}
-
-.topbar-user {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
 .avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  flex: 0 0 auto;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-full);
   object-fit: cover;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-weight: 600;
+  user-select: none;
 }
 
 .avatar-placeholder {
-  background: var(--color-accent);
-  color: #fff;
+  background: linear-gradient(140deg, var(--color-accent), var(--color-accentHover));
+  color: var(--color-onAccent);
   text-transform: uppercase;
-  font-weight: 600;
-}
-
-.avatar-edit {
-  cursor: pointer;
 }
 
+/* Generic square icon button used across chrome (header, composer, rows). */
 .icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
+  width: 40px;
+  height: 40px;
   flex: 0 0 auto;
   padding: 0;
-  border: 1px solid transparent;
-  border-radius: 8px;
+  border: none;
+  border-radius: var(--radius-full);
   background: none;
   color: var(--color-textMuted);
-  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
 }
 
 .icon-btn:hover {
-  background: var(--color-surface);
+  background: var(--color-surfaceHover);
   color: var(--color-text);
 }
 
-.icon-btn.send {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: #fff;
+.icon-btn:active {
+  transform: scale(0.94);
 }
 
+.icon-btn.accent {
+  background: var(--color-accent);
+  color: var(--color-onAccent);
+}
+
+.icon-btn.accent:hover {
+  background: var(--color-accentHover);
+}
+
+/* =============================================================================
+   Form primitives — fields & buttons
+   ========================================================================== */
+
+.field {
+  width: 100%;
+  padding: 0.65rem 0.85rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+
+.field::placeholder {
+  color: var(--color-textFaint);
+}
+
+.field:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+.field-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-textMuted);
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-accent);
+  color: var(--color-onAccent);
+  font-weight: 600;
+  transition:
+    background var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease),
+    opacity var(--dur-fast) var(--ease);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-accentHover);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: scale(0.99);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  padding: 0.55rem 0.9rem;
+  font-size: var(--text-sm);
+}
+
+.link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.form-error {
+  color: var(--color-danger);
+  font-size: var(--text-sm);
+}
+
+/* =============================================================================
+   Splash + Auth
+   ========================================================================== */
+
+.splash {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  background: var(--color-background);
+}
+
+.splash-mark,
+.auth-mark,
+.rail-mark,
+.chat-empty-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  color: var(--color-onAccent);
+  background: linear-gradient(140deg, var(--color-accent), var(--color-accentHover));
+  border-radius: 30%;
+  user-select: none;
+}
+
+.splash-mark {
+  width: 64px;
+  height: 64px;
+  font-size: 2rem;
+  animation: splash-pulse 1.4s var(--ease) infinite;
+}
+
+@keyframes splash-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.65;
+    transform: scale(0.94);
+  }
+}
+
+.auth {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  padding: 1.5rem;
+  background:
+    radial-gradient(120% 120% at 15% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 45%),
+    var(--color-chatBackdrop);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  padding: 2.25rem;
+  border-radius: var(--radius-xl);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-lg);
+}
+
+.auth-brand {
+  text-align: center;
+  margin-bottom: 1.75rem;
+}
+
+.auth-mark {
+  width: 52px;
+  height: 52px;
+  font-size: 1.6rem;
+  margin-bottom: 0.9rem;
+}
+
+.auth-wordmark {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.auth-tagline {
+  color: var(--color-textMuted);
+  margin-top: 0.25rem;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.auth-form .btn-primary {
+  margin-top: 0.35rem;
+}
+
+.auth-switch {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--color-textMuted);
+}
+
+/* =============================================================================
+   App shell + conversation rail
+   ========================================================================== */
+
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--rail-width) 1fr;
+  height: 100%;
+  min-height: 0;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--color-surfacePanel);
+  border-right: 1px solid var(--color-border);
+}
+
+.rail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0 0.85rem;
+  height: var(--header-height);
+  flex: 0 0 auto;
+}
+
+.rail-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+.rail-mark {
+  width: 34px;
+  height: 34px;
+  font-size: 1.05rem;
+}
+
+.rail-title {
+  font-weight: 700;
+  font-size: var(--text-lg);
+  letter-spacing: -0.02em;
+}
+
+.rail-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.theme-switch {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface);
+}
+
+.theme-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--color-textFaint);
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.theme-option:hover {
+  color: var(--color-text);
+}
+
+.theme-option[aria-pressed='true'] {
+  background: var(--color-background);
+  color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
+}
+
+.rail-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 0.85rem 0.5rem;
+  flex: 0 0 auto;
+}
+
+.rail-search-icon {
+  position: absolute;
+  left: 1.55rem;
+  color: var(--color-textFaint);
+  pointer-events: none;
+}
+
+.rail-search-input {
+  width: 100%;
+  padding: 0.6rem 0.85rem 0.6rem 2.35rem;
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  background: var(--color-surface);
+  color: var(--color-text);
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
+}
+
+.rail-search-input::placeholder {
+  color: var(--color-textFaint);
+}
+
+.rail-search-input:focus {
+  outline: none;
+  background: var(--color-background);
+  border-color: var(--color-accent);
+}
+
+.rail-search-clear {
+  position: absolute;
+  right: 1.35rem;
+  display: inline-flex;
+  border: none;
+  background: none;
+  color: var(--color-textFaint);
+  padding: 0.15rem;
+  border-radius: var(--radius-full);
+}
+
+.rail-search-clear:hover {
+  color: var(--color-text);
+}
+
+.rail-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.25rem 0 0.5rem;
+}
+
+.rail-section-title {
+  padding: 0.5rem 0.6rem;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-textFaint);
+}
+
+.rail-section {
+  padding: 0 0.6rem;
+}
+
+.rail-empty {
+  padding: 1.25rem 1rem;
+  text-align: center;
+  color: var(--color-textFaint);
+  font-size: var(--text-sm);
+}
+
+.conv-list {
+  padding: 0 0.5rem;
+}
+
+.conv-row {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  width: 100%;
+  padding: 0.55rem 0.6rem;
+  border: none;
+  border-radius: var(--radius-lg);
+  background: none;
+  text-align: left;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.conv-row:hover {
+  background: var(--color-surfaceHover);
+}
+
+.conv-row[aria-pressed='true'] {
+  background: var(--color-accentSoft);
+}
+
+.conv-avatar-wrap {
+  position: relative;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
+.online-dot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background: var(--color-online);
+  border: 2.5px solid var(--color-surfacePanel);
+}
+
+.conv-row[aria-pressed='true'] .online-dot {
+  border-color: color-mix(in srgb, var(--color-accentSoft) 100%, var(--color-surfacePanel));
+}
+
+.conv-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.conv-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.conv-name {
+  font-weight: 600;
+  font-size: var(--text-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.conv-time {
+  flex: 0 0 auto;
+  font-size: var(--text-xs);
+  color: var(--color-textFaint);
+}
+
+.conv-sub {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.conv-preview {
+  min-width: 0;
+  font-size: var(--text-sm);
+  color: var(--color-textMuted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.unread-badge {
+  flex: 0 0 auto;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-onAccent);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+/* Compose panel (new group + contacts) */
+.compose {
+  padding: 0.25rem 0.85rem 1rem;
+}
+
+.compose-block {
+  padding: 0.5rem 0;
+}
+
+.compose-block + .compose-block {
+  border-top: 1px solid var(--color-border);
+  margin-top: 0.5rem;
+}
+
+.stack-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.inline-add {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.contact-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.contact-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.contact-open {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.4rem 0.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: none;
+  text-align: left;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.contact-open:hover {
+  background: var(--color-surfaceHover);
+}
+
+.contact-avatar {
+  width: 34px;
+  height: 34px;
+  font-size: var(--text-sm);
+}
+
+.contact-names {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.contact-handle {
+  font-size: var(--text-xs);
+}
+
+.contact-remove {
+  width: 34px;
+  height: 34px;
+  color: var(--color-textFaint);
+}
+
+.contact-remove:hover {
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+}
+
+/* Rail footer (account) */
+.rail-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 0.85rem;
+  flex: 0 0 auto;
+  border-top: 1px solid var(--color-border);
+}
+
+.rail-account {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.35rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.rail-account:hover {
+  background: var(--color-surfaceHover);
+}
+
+.rail-account-avatar {
+  width: 38px;
+  height: 38px;
+  font-size: var(--text-base);
+}
+
+.rail-account-names {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.rail-account-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rail-account-handle {
+  font-size: var(--text-xs);
+}
+
+/* =============================================================================
+   Chat pane — empty state (full chat UI added in a later section)
+   ========================================================================== */
+
+.chat-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--color-chatBackdrop);
+}
+
+.chat-empty {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.chat-empty-inner {
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chat-empty-mark {
+  width: 56px;
+  height: 56px;
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
+  opacity: 0.9;
+}
+
+/* =============================================================================
+   Chat pane — header, scrollback, bubbles, composer
+   ========================================================================== */
+
+.chat-pane {
+  position: relative;
+}
+
+/* Subtle depth on the chat backdrop — barely-there, not a busy pattern. */
+.chat-pane::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(60% 55% at 78% 0%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 70%),
+    radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 70%);
+}
+
+.chat-header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: var(--header-height);
+  flex: 0 0 auto;
+  padding: 0 1.1rem;
+  background: color-mix(in srgb, var(--color-surfacePanel) 82%, transparent);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.chat-header-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.chat-header-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.25;
+}
+
+.chat-header-title {
+  font-weight: 600;
+  font-size: var(--text-md);
+}
+
+.chat-header-sub {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: var(--text-xs);
+  color: var(--color-textMuted);
+}
+
+.chat-header-sub.typing-sub {
+  color: var(--color-accent);
+  font-style: italic;
+}
+
+.online-inline {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: var(--color-online);
+}
+
+.chat-loading {
+  text-align: center;
+  padding: 0.5rem;
+  font-size: var(--text-sm);
+}
+
+.message-scroll {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem clamp(0.75rem, 4vw, 3rem);
+}
+
+.message-list {
+  display: flex;
+  flex-direction: column;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* Date separator */
+.day-sep {
+  display: flex;
+  justify-content: center;
+  margin: 0.75rem 0;
+}
+
+.day-sep span {
+  padding: 0.2rem 0.75rem;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--color-surfacePanel) 85%, transparent);
+  backdrop-filter: blur(6px);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-textMuted);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Message line + grouping */
+.msg-line {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 1px 0;
+}
+
+.msg-line.mine {
+  justify-content: flex-end;
+}
+
+.msg-line.group-end {
+  margin-bottom: 0.5rem;
+}
+
+.msg-avatar {
+  width: 30px;
+  height: 30px;
+  font-size: var(--text-xs);
+  align-self: flex-end;
+}
+
+.msg-avatar-spacer {
+  width: 30px;
+  flex: 0 0 auto;
+}
+
+.bubble-wrap {
+  display: flex;
+  flex-direction: column;
+  max-width: min(74%, 560px);
+  min-width: 0;
+}
+
+.msg-line.mine .bubble-wrap {
+  align-items: flex-end;
+}
+
+.msg-sender {
+  margin: 0 0 2px 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--color-accent);
+}
+
+/* Bubble */
+.bubble {
+  position: relative;
+  padding: 0.42rem 0.7rem;
+  border-radius: var(--radius-lg);
+  font-size: var(--text-base);
+  line-height: 1.4;
+}
+
+.bubble::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.bubble-mine {
+  background: var(--color-bubbleOut);
+  color: var(--color-onAccent);
+}
+
+.bubble-mine:not(.is-start) {
+  border-top-right-radius: 6px;
+}
+
+.bubble-mine:not(.is-end) {
+  border-bottom-right-radius: 6px;
+}
+
+.bubble-theirs {
+  background: var(--color-bubbleIn);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+}
+
+.bubble-theirs:not(.is-start) {
+  border-top-left-radius: 6px;
+}
+
+.bubble-theirs:not(.is-end) {
+  border-bottom-left-radius: 6px;
+}
+
+.bubble.has-media {
+  padding: 0.28rem;
+}
+
+.bubble.has-media .bubble-text {
+  display: block;
+  padding: 0.25rem 0.45rem 0.1rem;
+}
+
+.bubble-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.bubble-deleted {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.bubble-meta {
+  float: right;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin: 0.35rem 0 -0.1rem 0.6rem;
+  font-size: 0.68rem;
+  line-height: 1;
+  user-select: none;
+}
+
+.bubble-mine .bubble-meta {
+  color: var(--color-onAccentMuted);
+}
+
+.bubble-theirs .bubble-meta {
+  color: var(--color-textFaint);
+}
+
+.bubble.has-media .bubble-meta {
+  padding: 0 0.45rem 0.2rem 0.6rem;
+}
+
+.bubble-edited {
+  font-style: italic;
+}
+
+.tick {
+  display: inline-flex;
+  color: var(--color-onAccentMuted);
+}
+
+.tick-read {
+  color: var(--color-onAccent);
+}
+
+/* Hover toolbar */
+.msg-tools {
+  position: absolute;
+  top: -1rem;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--radius-full);
+  background: var(--color-bubbleIn);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  opacity: 0;
+  transform: translateY(0.3rem) scale(0.96);
+  pointer-events: none;
+  transition:
+    opacity var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease-out);
+}
+
+.msg-line:hover .msg-tools {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.msg-line.mine .msg-tools {
+  right: 0.25rem;
+}
+
+.msg-line.theirs .msg-tools {
+  left: 0.25rem;
+}
+
+.tool-react {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  font-size: 1rem;
+  line-height: 1;
+  transition:
+    background var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease-out);
+}
+
+.tool-react:hover {
+  background: var(--color-surfaceHover);
+  transform: scale(1.25);
+}
+
+.tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--color-textMuted);
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.tool-btn:hover {
+  background: var(--color-surfaceHover);
+  color: var(--color-text);
+}
+
+.tool-danger:hover {
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+}
+
+.tool-divider {
+  width: 1px;
+  height: 18px;
+  margin: 0 2px;
+  background: var(--color-border);
+}
+
+/* Reactions */
+.reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 5px;
+}
+
+.msg-line.mine .reactions {
+  justify-content: flex-end;
+}
+
+.reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border);
+  background: var(--color-bubbleIn);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease-out);
+}
+
+.reaction:hover {
+  transform: translateY(-1px);
+}
+
+.reaction.is-mine {
+  background: var(--color-accentSoft);
+  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
+  color: var(--color-accent);
+}
+
+.reaction-count {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Inline edit */
+.bubble-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 220px;
+}
+
+.edit-input {
+  width: 100%;
+  min-height: 2.4rem;
+  resize: vertical;
+  border: none;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  border-radius: var(--radius-sm);
+  padding: 0.35rem 0.5rem;
+  font: inherit;
+}
+
+.edit-input:focus {
+  outline: none;
+}
+
+.edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.3rem;
+}
+
+.edit-actions .icon-btn {
+  width: 30px;
+  height: 30px;
+}
+
+.edit-cancel {
+  color: var(--color-onAccentMuted);
+}
+
+.edit-cancel:hover {
+  background: color-mix(in srgb, currentColor 15%, transparent);
+  color: var(--color-onAccent);
+}
+
+/* =============================================================================
+   Media (Part-3 baseline — enriched in the media section below)
+   ========================================================================== */
+
+.media-loading {
+  display: inline-block;
+  padding: 0.35rem 0.5rem;
+  font-size: var(--text-sm);
+  opacity: 0.7;
+}
+
+.media-img {
+  max-width: min(300px, 68vw);
+  max-height: 340px;
+  border-radius: var(--radius-md);
+  display: block;
+  cursor: zoom-in;
+}
+
+.media-video {
+  max-width: min(340px, 72vw);
+  border-radius: var(--radius-md);
+  display: block;
+}
+
+.media-audio {
+  min-width: 240px;
+  height: 40px;
+}
+
+.media-file {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 220px;
+  padding: 0.5rem 0.6rem;
+  border-radius: var(--radius-md);
+  color: inherit;
+  text-decoration: none;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.media-file-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.media-file-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.media-file-name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.media-file-size {
+  font-size: var(--text-xs);
+  opacity: 0.7;
+}
+
+.media-file-dl {
+  flex: 0 0 auto;
+  opacity: 0.75;
+}
+
+/* =============================================================================
+   Composer
+   ========================================================================== */
+
+.composer {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-end;
+  gap: 0.35rem;
+  padding: 0.6rem clamp(0.6rem, 3vw, 1.5rem);
+  background: var(--color-surfacePanel);
+  border-top: 1px solid var(--color-border);
+}
+
+.composer-input {
+  flex: 1;
+  min-width: 0;
+  max-height: 8.5rem;
+  resize: none;
+  field-sizing: content;
+  padding: 0.55rem 1rem;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+.composer-input::placeholder {
+  color: var(--color-textFaint);
+}
+
+.composer-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.composer-send {
+  transition:
+    background var(--dur-fast) var(--ease),
+    opacity var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+
+.composer-send:disabled {
+  opacity: 0.45;
+  background: var(--color-surface);
+  color: var(--color-textFaint);
+  cursor: not-allowed;
+}
+
+/* Recording bar */
 .recording-bar {
   align-items: center;
+  gap: 0.6rem;
 }
 
 .record-dot {
   width: 10px;
   height: 10px;
-  border-radius: 50%;
-  background: #e5484d;
-  animation: record-pulse 1s ease-in-out infinite;
+  flex: 0 0 auto;
+  border-radius: var(--radius-full);
+  background: var(--color-danger);
+  animation: record-pulse 1s var(--ease) infinite;
 }
 
 .record-label {
   flex: 1;
+  font-size: var(--text-sm);
   color: var(--color-text);
-  font-size: 0.9rem;
 }
 
 .record-preview {
-  width: 72px;
-  height: 72px;
-  border-radius: 8px;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-md);
   object-fit: cover;
   background: #000;
 }
@@ -537,63 +1463,310 @@ body {
     opacity: 1;
   }
   50% {
-    opacity: 0.3;
+    opacity: 0.25;
   }
 }
 
-.media-img {
-  max-width: 260px;
-  max-height: 260px;
-  border-radius: 8px;
-  display: block;
-}
+/* =============================================================================
+   Media renderers — voice waveform, round video, thumbnails, lightbox
+   ========================================================================== */
 
-.media-video {
-  max-width: 320px;
-  border-radius: 8px;
-  display: block;
-}
-
-.media-file {
-  display: inline-flex;
+/* Voice note — custom waveform player */
+.voice {
+  display: flex;
   align-items: center;
-  gap: 0.35rem;
-  color: var(--color-accent);
+  gap: 0.6rem;
+  min-width: 232px;
+  max-width: 300px;
+  padding: 0.15rem 0.15rem 0.15rem 0.05rem;
 }
 
-/* In-app notification toasts */
+.voice-play {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  border: none;
+  border-radius: var(--radius-full);
+  background: var(--color-accent);
+  color: var(--color-onAccent);
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.voice-play:active {
+  transform: scale(0.92);
+}
+
+.voice-mine .voice-play {
+  background: var(--color-onAccent);
+  color: var(--color-bubbleOut);
+}
+
+.voice-wave {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.wave-bar {
+  flex: 1;
+  min-width: 2px;
+  min-height: 3px;
+  border-radius: 2px;
+  background: var(--color-textFaint);
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.wave-bar.is-played {
+  background: var(--color-accent);
+}
+
+.voice-mine .wave-bar {
+  background: var(--color-onAccentMuted);
+}
+
+.voice-mine .wave-bar.is-played {
+  background: var(--color-onAccent);
+}
+
+.voice-time {
+  flex: 0 0 auto;
+  min-width: 30px;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.85;
+}
+
+/* Round video message */
+.round-video {
+  position: relative;
+  display: block;
+  width: 208px;
+  height: 208px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background: #000;
+  cursor: pointer;
+}
+
+.round-video-el {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.round-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.28);
+  transition: background var(--dur) var(--ease);
+}
+
+.round-video-time {
+  position: absolute;
+  bottom: 0.6rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.1rem 0.5rem;
+  border-radius: var(--radius-full);
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Image + video-file thumbnails */
+.media-image-btn,
+.media-video-frame {
+  display: block;
+  position: relative;
+  padding: 0;
+  border: none;
+  background: none;
+  line-height: 0;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+}
+
+.media-video-frame .media-video {
+  pointer-events: none;
+}
+
+.media-play-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: grid;
+  place-items: center;
+  width: 54px;
+  height: 54px;
+  border-radius: var(--radius-full);
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  backdrop-filter: blur(2px);
+}
+
+/* Lightbox viewer */
+.viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(8, 9, 13, 0.86);
+  backdrop-filter: blur(16px);
+  animation: viewer-in var(--dur) var(--ease);
+}
+
+@keyframes viewer-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.viewer-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.9rem 1.1rem;
+  color: #fff;
+}
+
+.viewer-name {
+  min-width: 0;
+  font-size: var(--text-sm);
+  opacity: 0.85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.viewer-actions {
+  display: flex;
+  gap: 0.35rem;
+  flex: 0 0 auto;
+}
+
+.viewer-btn {
+  color: #fff;
+}
+
+.viewer-btn:hover {
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+}
+
+.viewer-stage {
+  max-width: 92vw;
+  max-height: 88vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.viewer-img {
+  max-width: 92vw;
+  max-height: 88vh;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+  user-select: none;
+  touch-action: none;
+  will-change: transform;
+}
+
+.viewer-video {
+  max-width: 92vw;
+  max-height: 88vh;
+  border-radius: var(--radius-md);
+}
+
+/* Reduced-motion: drop the non-essential animations. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
+/* Bare media (round video notes) — no bubble chrome. */
+.bubble.bubble-bare {
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.bubble.bubble-bare .bubble-meta {
+  color: var(--color-textFaint);
+  padding: 0;
+  margin-top: 0.3rem;
+}
+
+/* =============================================================================
+   Notification toasts
+   ========================================================================== */
+
 .toast-stack {
   position: fixed;
   top: 1rem;
   right: 1rem;
+  z-index: 1100;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  z-index: 1000;
+  gap: 0.6rem;
   max-width: min(360px, calc(100vw - 2rem));
 }
 
 .toast {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.2rem;
   text-align: left;
   padding: 0.75rem 1rem;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
-  background: var(--color-surface);
+  background: var(--color-surfacePanel);
   color: var(--color-text);
-  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
+  box-shadow: var(--shadow-md);
   cursor: pointer;
-  animation: toast-in 0.18s ease;
+  animation: toast-in var(--dur) var(--ease-out);
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.toast:hover {
+  transform: translateY(-1px);
 }
 
 .toast-title {
-  font-size: 0.9rem;
+  font-size: var(--text-sm);
+  font-weight: 600;
 }
 
 .toast-body {
-  font-size: 0.85rem;
+  font-size: var(--text-sm);
   color: var(--color-textMuted);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -603,7 +1776,7 @@ body {
 @keyframes toast-in {
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(-0.5rem);
   }
   to {
     opacity: 1;
diff --git a/packages/web/src/features/auth/ui/AuthForm.tsx b/packages/web/src/features/auth/ui/AuthForm.tsx
index b25abc0..170eb00 100644
--- a/packages/web/src/features/auth/ui/AuthForm.tsx
+++ b/packages/web/src/features/auth/ui/AuthForm.tsx
@@ -32,56 +32,75 @@ export const AuthForm = (): ReactElement => {
   };
 
   return (
-    <main className="app">
-      <h1>Altricade</h1>
-      <p>{mode === 'login' ? 'Log in' : 'Create an account'}</p>
-      <form
-        className="auth-form"
-        onSubmit={(event) => {
-          void submit(event);
-        }}
-      >
-        <input
-          placeholder="username"
-          autoComplete="username"
-          value={username}
-          onChange={(event) => {
-            setUsername(event.target.value);
-          }}
-        />
-        {mode === 'register' ? (
-          <input
-            placeholder="display name"
-            value={displayName}
-            onChange={(event) => {
-              setDisplayName(event.target.value);
+    <main className="auth">
+      <div className="auth-card">
+        <div className="auth-brand">
+          <span className="auth-mark" aria-hidden="true">
+            A
+          </span>
+          <h1 className="auth-wordmark">Altricade</h1>
+          <p className="auth-tagline">
+            {mode === 'login' ? 'Welcome back.' : 'Create your account.'}
+          </p>
+        </div>
+        <form className="auth-form" onSubmit={(event) => void submit(event)}>
+          <label className="field-label">
+            Username
+            <input
+              className="field"
+              placeholder="username"
+              autoComplete="username"
+              value={username}
+              onChange={(event) => {
+                setUsername(event.target.value);
+              }}
+            />
+          </label>
+          {mode === 'register' ? (
+            <label className="field-label">
+              Display name
+              <input
+                className="field"
+                placeholder="Your name"
+                value={displayName}
+                onChange={(event) => {
+                  setDisplayName(event.target.value);
+                }}
+              />
+            </label>
+          ) : null}
+          <label className="field-label">
+            Password
+            <input
+              className="field"
+              type="password"
+              placeholder="••••••••"
+              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+              value={password}
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+            />
+          </label>
+          {error !== null ? <p className="form-error">{error}</p> : null}
+          <button type="submit" className="btn-primary" disabled={busy}>
+            {busy ? 'Please wait…' : mode === 'login' ? 'Log in' : 'Create account'}
+          </button>
+        </form>
+        <p className="auth-switch">
+          {mode === 'login' ? "Don't have an account?" : 'Already have an account?'}{' '}
+          <button
+            type="button"
+            className="link"
+            onClick={() => {
+              setMode(mode === 'login' ? 'register' : 'login');
+              setError(null);
             }}
-          />
-        ) : null}
-        <input
-          type="password"
-          placeholder="password"
-          autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
-          value={password}
-          onChange={(event) => {
-            setPassword(event.target.value);
-          }}
-        />
-        {error !== null ? <p className="auth-error">{error}</p> : null}
-        <button type="submit" disabled={busy}>
-          {mode === 'login' ? 'Log in' : 'Register'}
-        </button>
-      </form>
-      <button
-        type="button"
-        className="auth-toggle"
-        onClick={() => {
-          setMode(mode === 'login' ? 'register' : 'login');
-          setError(null);
-        }}
-      >
-        {mode === 'login' ? 'Need an account? Register' : 'Have an account? Log in'}
-      </button>
+          >
+            {mode === 'login' ? 'Sign up' : 'Log in'}
+          </button>
+        </p>
+      </div>
     </main>
   );
 };
diff --git a/packages/web/src/features/contacts/ui/ContactsPanel.tsx b/packages/web/src/features/contacts/ui/ContactsPanel.tsx
index c34eaa6..cfe7f7a 100644
--- a/packages/web/src/features/contacts/ui/ContactsPanel.tsx
+++ b/packages/web/src/features/contacts/ui/ContactsPanel.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { ReactElement, SyntheticEvent } from 'react';
 import { ApiError } from '@altricade/core/api';
+import { PlusIcon, TrashIcon } from '../../../shared/ui';
 import { useContacts } from '../model';
 
 interface Props {
@@ -28,48 +29,61 @@ export const ContactsPanel = ({ onStartDirect }: Props): ReactElement => {
   };
 
   return (
-    <div className="contacts">
-      <h3 className="sidebar-heading">Contacts</h3>
-      <form
-        className="sidebar-form"
-        onSubmit={(event) => {
-          void submit(event);
-        }}
-      >
+    <div className="compose-block">
+      <p className="rail-section-title">Contacts</p>
+      <form className="inline-add" onSubmit={(event) => void submit(event)}>
         <input
-          placeholder="add contact username"
+          className="field"
+          placeholder="Add by username"
           value={name}
           onChange={(event) => {
             setName(event.target.value);
           }}
         />
-        <button type="submit">Add</button>
+        <button type="submit" className="icon-btn accent" aria-label="Add contact">
+          <PlusIcon size={18} />
+        </button>
       </form>
-      <ul className="contact-list">
-        {contacts.map((contact) => (
-          <li key={contact.userId}>
-            <button
-              type="button"
-              onClick={() => {
-                void onStartDirect(contact.user.username);
-              }}
-            >
-              @{contact.user.username}
-            </button>
-            <button
-              type="button"
-              className="contact-remove"
-              aria-label="remove contact"
-              onClick={() => {
-                void remove(contact.userId);
-              }}
-            >
-              ✕
-            </button>
-          </li>
-        ))}
-      </ul>
-      {error !== null ? <p className="auth-error">{error}</p> : null}
+      {error !== null ? <p className="form-error">{error}</p> : null}
+      {contacts.length === 0 ? (
+        <p className="rail-empty">No contacts yet</p>
+      ) : (
+        <ul className="contact-list">
+          {contacts.map((contact) => (
+            <li key={contact.userId} className="contact-row">
+              <button
+                type="button"
+                className="contact-open"
+                onClick={() => {
+                  void onStartDirect(contact.user.username);
+                }}
+              >
+                {contact.user.avatarUrl !== null ? (
+                  <img src={contact.user.avatarUrl} alt="" className="avatar contact-avatar" />
+                ) : (
+                  <span className="avatar contact-avatar avatar-placeholder">
+                    {contact.user.displayName.charAt(0)}
+                  </span>
+                )}
+                <span className="contact-names">
+                  <span className="contact-name">{contact.user.displayName}</span>
+                  <span className="muted contact-handle">@{contact.user.username}</span>
+                </span>
+              </button>
+              <button
+                type="button"
+                className="icon-btn contact-remove"
+                aria-label="Remove contact"
+                onClick={() => {
+                  void remove(contact.userId);
+                }}
+              >
+                <TrashIcon size={17} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };
diff --git a/packages/web/src/features/conversations/ui/ConversationSidebar.tsx b/packages/web/src/features/conversations/ui/ConversationSidebar.tsx
index 1f3feb5..2cf88d5 100644
--- a/packages/web/src/features/conversations/ui/ConversationSidebar.tsx
+++ b/packages/web/src/features/conversations/ui/ConversationSidebar.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import type { ReactElement, SyntheticEvent } from 'react';
+import type { ReactElement } from 'react';
 import type { Conversation, PublicUser } from '@altricade/core';
-import { searchUsers, ApiError } from '@altricade/core/api';
+import { searchUsers } from '@altricade/core/api';
 import { apiConfig } from '../../../shared/api';
+import { SearchIcon, UsersIcon, CloseIcon } from '../../../shared/ui';
 
 interface Props {
   conversations: Conversation[];
@@ -10,14 +11,55 @@ interface Props {
   onlineMap: Record<string, boolean>;
   onSelect: (conversation: Conversation) => void;
   onStartDirect: (username: string) => Promise<void>;
-  onCreateGroup: (title: string, members: string[]) => Promise<void>;
 }
 
-const label = (conversation: Conversation): string => {
+const title = (conversation: Conversation): string => {
   if (conversation.type === 'group') {
     return conversation.title ?? 'Group';
   }
-  return conversation.peer === null ? 'Direct' : `@${conversation.peer.username}`;
+  return conversation.peer === null ? 'Direct' : conversation.peer.displayName;
+};
+
+const subtitle = (conversation: Conversation): string => {
+  if (conversation.type === 'group') {
+    return 'Group';
+  }
+  return conversation.peer === null ? '' : `@${conversation.peer.username}`;
+};
+
+const initial = (conversation: Conversation): string => {
+  const source =
+    conversation.type === 'group'
+      ? (conversation.title ?? 'G')
+      : (conversation.peer?.displayName ?? conversation.peer?.username ?? '?');
+  return source.charAt(0);
+};
+
+// Time as HH:MM today, weekday this week, else DD.MM.YY.
+const formatTime = (iso: string): string => {
+  const then = new Date(iso);
+  const now = new Date();
+  const sameDay = then.toDateString() === now.toDateString();
+  if (sameDay) {
+    return then.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  const dayMs = 86_400_000;
+  if (now.getTime() - then.getTime() < 6 * dayMs) {
+    return then.toLocaleDateString([], { weekday: 'short' });
+  }
+  return then.toLocaleDateString([], { day: '2-digit', month: '2-digit', year: '2-digit' });
+};
+
+const Avatar = ({ conversation }: { conversation: Conversation }): ReactElement => {
+  const peer = conversation.peer;
+  if (peer !== null && peer.avatarUrl !== null) {
+    return <img src={peer.avatarUrl} alt="" className="avatar conv-avatar" />;
+  }
+  return (
+    <span className="avatar conv-avatar avatar-placeholder">
+      {conversation.type === 'group' ? <UsersIcon size={20} /> : initial(conversation)}
+    </span>
+  );
 };
 
 export const ConversationSidebar = ({
@@ -26,13 +68,9 @@ export const ConversationSidebar = ({
   onlineMap,
   onSelect,
   onStartDirect,
-  onCreateGroup,
 }: Props): ReactElement => {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<PublicUser[]>([]);
-  const [groupTitle, setGroupTitle] = useState('');
-  const [groupMembers, setGroupMembers] = useState('');
-  const [error, setError] = useState<string | null>(null);
 
   const runSearch = async (value: string): Promise<void> => {
     setQuery(value);
@@ -48,113 +86,117 @@ export const ConversationSidebar = ({
   };
 
   const start = async (username: string): Promise<void> => {
-    setError(null);
-    try {
-      await onStartDirect(username);
-      setQuery('');
-      setResults([]);
-    } catch (caught) {
-      setError(caught instanceof ApiError ? caught.message : 'Could not start chat');
-    }
+    await onStartDirect(username);
+    setQuery('');
+    setResults([]);
   };
 
-  const submitGroup = async (event: SyntheticEvent): Promise<void> => {
-    event.preventDefault();
-    const title = groupTitle.trim();
-    if (title === '') {
-      return;
-    }
-    const members = groupMembers
-      .split(',')
-      .map((name) => name.trim())
-      .filter((name) => name.length > 0);
-    setError(null);
-    try {
-      await onCreateGroup(title, members);
-      setGroupTitle('');
-      setGroupMembers('');
-    } catch (caught) {
-      setError(caught instanceof ApiError ? caught.message : 'Could not create group');
-    }
-  };
+  const searching = query.trim().length > 0;
 
   return (
-    <aside className="sidebar">
-      <input
-        className="search-input"
-        placeholder="Search users to chat…"
-        value={query}
-        onChange={(event) => {
-          void runSearch(event.target.value);
-        }}
-      />
-      {results.length > 0 ? (
-        <ul className="search-results">
-          {results.map((user) => (
-            <li key={user.id}>
-              <button
-                type="button"
-                onClick={() => {
-                  void start(user.username);
-                }}
-              >
-                {user.displayName} <span className="muted">@{user.username}</span>
-              </button>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-
-      <h3 className="sidebar-heading">Conversations</h3>
-      <ul className="room-list">
-        {conversations.map((conversation) => {
-          const online =
-            conversation.peer !== null && onlineMap[conversation.peer.id] === true;
-          return (
-            <li key={conversation.id}>
-              <button
-                type="button"
-                aria-pressed={conversation.id === currentId}
-                onClick={() => {
-                  onSelect(conversation);
-                }}
-              >
-                {online ? <span className="online-dot" aria-label="online" /> : null}
-                {label(conversation)}
-                {conversation.unreadCount > 0 ? (
-                  <span className="unread-badge">{conversation.unreadCount}</span>
-                ) : null}
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-
-      <form
-        className="sidebar-form group-form"
-        onSubmit={(event) => {
-          void submitGroup(event);
-        }}
-      >
-        <h3 className="sidebar-heading">New group</h3>
+    <>
+      <div className="rail-search">
+        <SearchIcon size={18} className="rail-search-icon" />
         <input
-          placeholder="group title"
-          value={groupTitle}
+          className="rail-search-input"
+          placeholder="Search people…"
+          value={query}
           onChange={(event) => {
-            setGroupTitle(event.target.value);
+            void runSearch(event.target.value);
           }}
         />
-        <input
-          placeholder="members (comma-separated usernames)"
-          value={groupMembers}
-          onChange={(event) => {
-            setGroupMembers(event.target.value);
-          }}
-        />
-        <button type="submit">Create group</button>
-      </form>
+        {searching ? (
+          <button
+            type="button"
+            className="rail-search-clear"
+            aria-label="Clear search"
+            onClick={() => {
+              setQuery('');
+              setResults([]);
+            }}
+          >
+            <CloseIcon size={16} />
+          </button>
+        ) : null}
+      </div>
 
-      {error !== null ? <p className="auth-error">{error}</p> : null}
-    </aside>
+      <div className="rail-scroll">
+        {searching ? (
+          <div className="rail-section">
+            <p className="rail-section-title">People</p>
+            {results.length === 0 ? (
+              <p className="rail-empty">No matches</p>
+            ) : (
+              results.map((user) => (
+                <button
+                  key={user.id}
+                  type="button"
+                  className="conv-row"
+                  onClick={() => {
+                    void start(user.username);
+                  }}
+                >
+                  {user.avatarUrl !== null ? (
+                    <img src={user.avatarUrl} alt="" className="avatar conv-avatar" />
+                  ) : (
+                    <span className="avatar conv-avatar avatar-placeholder">
+                      {user.displayName.charAt(0)}
+                    </span>
+                  )}
+                  <span className="conv-main">
+                    <span className="conv-top">
+                      <span className="conv-name">{user.displayName}</span>
+                    </span>
+                    <span className="conv-sub">
+                      <span className="conv-preview">@{user.username}</span>
+                    </span>
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        ) : (
+          <div className="conv-list">
+            {conversations.length === 0 ? (
+              <p className="rail-empty">No conversations yet</p>
+            ) : (
+              conversations.map((conversation) => {
+                const online =
+                  conversation.peer !== null && onlineMap[conversation.peer.id] === true;
+                const active = conversation.id === currentId;
+                return (
+                  <button
+                    key={conversation.id}
+                    type="button"
+                    className="conv-row"
+                    aria-pressed={active}
+                    onClick={() => {
+                      onSelect(conversation);
+                    }}
+                  >
+                    <span className="conv-avatar-wrap">
+                      <Avatar conversation={conversation} />
+                      {online ? <span className="online-dot" aria-label="online" /> : null}
+                    </span>
+                    <span className="conv-main">
+                      <span className="conv-top">
+                        <span className="conv-name">{title(conversation)}</span>
+                        <span className="conv-time">{formatTime(conversation.lastMessageAt)}</span>
+                      </span>
+                      <span className="conv-sub">
+                        <span className="conv-preview">{subtitle(conversation)}</span>
+                        {conversation.unreadCount > 0 ? (
+                          <span className="unread-badge">{conversation.unreadCount}</span>
+                        ) : null}
+                      </span>
+                    </span>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 };
diff --git a/packages/web/src/features/messaging/ui/ChatView.tsx b/packages/web/src/features/messaging/ui/ChatView.tsx
index d55e7ba..62a73a0 100644
--- a/packages/web/src/features/messaging/ui/ChatView.tsx
+++ b/packages/web/src/features/messaging/ui/ChatView.tsx
@@ -1,8 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
-import type { ReactElement, SyntheticEvent } from 'react';
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { KeyboardEvent, ReactElement, SyntheticEvent } from 'react';
 import type { Conversation, Message, PublicUser } from '@altricade/core';
-import { getMediaUrl } from '@altricade/core/api';
-import { apiConfig } from '../../../shared/api';
 import {
   PaperclipIcon,
   MicIcon,
@@ -10,10 +8,19 @@ import {
   StopIcon,
   SendIcon,
   CloseIcon,
-  FileIcon,
+  CheckIcon,
+  DoubleCheckIcon,
+  EditIcon,
+  TrashIcon,
+  UsersIcon,
 } from '../../../shared/ui';
 import { useConversationMessages } from '../model';
 import { useRecorder } from '../recorder';
+import { MediaMessage, isRoundVideo } from './MediaMessage';
+import { MediaViewerProvider } from './MediaViewer';
+
+const QUICK_REACTIONS = ['👍', '❤️', '😂', '🎉'];
+const GROUP_WINDOW_MS = 5 * 60 * 1000;
 
 const formatElapsed = (ms: number): string => {
   const total = Math.floor(ms / 1000);
@@ -22,73 +29,94 @@ const formatElapsed = (ms: number): string => {
   return `${String(minutes)}:${seconds < 10 ? '0' : ''}${String(seconds)}`;
 };
 
+const clock = (iso: string): string =>
+  new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+const dayKey = (iso: string): string => new Date(iso).toDateString();
+
+const dayLabel = (iso: string): string => {
+  const then = new Date(iso);
+  const now = new Date();
+  if (then.toDateString() === now.toDateString()) {
+    return 'Today';
+  }
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  if (then.toDateString() === yesterday.toDateString()) {
+    return 'Yesterday';
+  }
+  return then.toLocaleDateString([], { day: 'numeric', month: 'long' });
+};
+
+// Two messages belong to the same visual group when they share a sender and
+// day and land within the grouping window (order-agnostic).
+const inSameGroup = (base: Message, other: Message | undefined): boolean => {
+  if (other === undefined) {
+    return false;
+  }
+  return (
+    other.senderId === base.senderId &&
+    dayKey(other.createdAt) === dayKey(base.createdAt) &&
+    Math.abs(new Date(base.createdAt).getTime() - new Date(other.createdAt).getTime()) <
+      GROUP_WINDOW_MS
+  );
+};
+
 interface Props {
   conversation: Conversation;
   me: PublicUser;
+  onlineMap: Record<string, boolean>;
 }
 
-const QUICK_REACTIONS = ['👍', '❤️', '😂', '🎉'];
-
 const headerTitle = (conversation: Conversation): string => {
   if (conversation.type === 'group') {
     return conversation.title ?? 'Group';
   }
-  return conversation.peer === null ? 'Direct' : `@${conversation.peer.username}`;
+  if (conversation.peer === null) {
+    return 'Direct';
+  }
+  return conversation.peer.displayName;
 };
 
-const MediaView = ({
-  conversationId,
-  message,
+const ChatHeader = ({
+  conversation,
+  online,
+  typing,
 }: {
-  conversationId: string;
-  message: Message;
-}): ReactElement | null => {
-  const [url, setUrl] = useState<string | null>(null);
-  const media = message.media;
-
-  useEffect(() => {
-    if (media === null) {
-      return undefined;
-    }
-    let cancelled = false;
-    getMediaUrl(apiConfig, conversationId, message.id)
-      .then((resolved) => {
-        if (!cancelled) {
-          setUrl(resolved);
-        }
-      })
-      .catch(() => {
-        /* media may be unavailable */
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [conversationId, message.id, media]);
-
-  if (media === null) {
-    return null;
-  }
-  if (url === null) {
-    return <span className="muted">loading media…</span>;
-  }
-  if (media.kind === 'image') {
-    return <img src={url} alt={media.name} className="media-img" />;
-  }
-  if (media.kind === 'video') {
-    return <video src={url} controls className="media-video" />;
-  }
-  if (media.kind === 'voice') {
-    return <audio src={url} controls />;
-  }
+  conversation: Conversation;
+  online: boolean;
+  typing: boolean;
+}): ReactElement => {
+  const peer = conversation.peer;
+  const isGroup = conversation.type === 'group';
+  const subtitle = typing
+    ? 'typing…'
+    : isGroup
+      ? 'Group'
+      : online
+        ? 'online'
+        : 'offline';
   return (
-    <a href={url} download={media.name} className="media-file">
-      <FileIcon size={16} />
-      <span>{media.name}</span>
-    </a>
+    <header className="chat-header">
+      {peer !== null && peer.avatarUrl !== null ? (
+        <img src={peer.avatarUrl} alt="" className="avatar chat-header-avatar" />
+      ) : (
+        <span className="avatar chat-header-avatar avatar-placeholder">
+          {isGroup ? <UsersIcon size={20} /> : headerTitle(conversation).charAt(0)}
+        </span>
+      )}
+      <div className="chat-header-text">
+        <span className="chat-header-title">{headerTitle(conversation)}</span>
+        <span className={typing ? 'chat-header-sub typing-sub' : 'chat-header-sub'}>
+          {!isGroup && online && !typing ? <span className="online-inline" /> : null}
+          {subtitle}
+        </span>
+      </div>
+    </header>
   );
 };
 
-export const ChatView = ({ conversation, me }: Props): ReactElement => {
+export const ChatView = ({ conversation, me, onlineMap }: Props): ReactElement => {
   const {
     messages,
     loading,
@@ -102,10 +130,16 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
     notifyTyping,
   } = useConversationMessages(conversation, me);
   const [text, setText] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState('');
   const recorder = useRecorder((file) => {
     void sendMedia(file, '');
   });
   const previewRef = useRef<HTMLVideoElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const atBottomRef = useRef(true);
+  const isGroup = conversation.type === 'group';
+  const peerOnline = conversation.peer !== null && onlineMap[conversation.peer.id] === true;
 
   // Mirror the live camera stream into the in-composer preview while recording.
   useEffect(() => {
@@ -115,6 +149,27 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
     }
   }, [recorder.previewStream]);
 
+  // Jump to the newest message when opening a conversation.
+  useEffect(() => {
+    atBottomRef.current = true;
+  }, [conversation.id]);
+
+  // Keep the scrollback pinned to the newest message — but only when the reader
+  // is already near the bottom, so scrolling up through history isn't yanked.
+  useLayoutEffect(() => {
+    const node = scrollRef.current;
+    if (node !== null && atBottomRef.current) {
+      node.scrollTop = node.scrollHeight;
+    }
+  }, [messages.length, typingUserIds.length]);
+
+  const onScroll = (): void => {
+    const node = scrollRef.current;
+    if (node !== null) {
+      atBottomRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 80;
+    }
+  };
+
   const submit = async (event: SyntheticEvent): Promise<void> => {
     event.preventDefault();
     const trimmed = text.trim();
@@ -125,6 +180,13 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
     await send(trimmed);
   };
 
+  const onComposerKey = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void submit(event);
+    }
+  };
+
   const onAttach = (event: SyntheticEvent<HTMLInputElement>): void => {
     const input = event.currentTarget;
     const file = input.files?.[0];
@@ -134,101 +196,242 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
     input.value = '';
   };
 
-  const onEdit = (message: Message): void => {
-    const next = window.prompt('Edit message', message.content);
-    if (next !== null && next.trim() !== '') {
-      void edit(message.id, next.trim());
+  const startEdit = (message: Message): void => {
+    setEditingId(message.id);
+    setDraft(message.content);
+  };
+
+  const commitEdit = async (messageId: string): Promise<void> => {
+    const next = draft.trim();
+    setEditingId(null);
+    if (next !== '') {
+      await edit(messageId, next);
     }
   };
 
-  const readMark = (message: Message): string => {
+  const tick = (message: Message): ReactElement | null => {
     if (conversation.type !== 'direct' || message.senderId !== me.id || message.deletedAt !== null) {
-      return '';
+      return null;
     }
-    return peerReadSeq >= message.seq ? '✓✓' : '✓';
+    const read = peerReadSeq >= message.seq;
+    return (
+      <span className={read ? 'tick tick-read' : 'tick'}>
+        {read ? <DoubleCheckIcon size={15} /> : <CheckIcon size={15} />}
+      </span>
+    );
   };
 
   return (
-    <section className="chat">
-      <h2 className="chat-title">{headerTitle(conversation)}</h2>
-      {loading ? <p className="chat-loading">Loading…</p> : null}
-      <ul className="message-list">
-        {messages.map((message) => (
-          <li key={message.id} className={message.senderId === me.id ? 'mine' : ''}>
-            <div className="msg-row">
-              <span className="msg-author">@{message.sender.username}</span>
-              {message.deletedAt === null && message.media !== null ? (
-                <MediaView conversationId={conversation.id} message={message} />
-              ) : null}
-              {message.content.length > 0 ? (
-                <span className="msg-body">
-                  {message.deletedAt !== null ? (
-                    <em className="muted">message deleted</em>
-                  ) : (
-                    message.content
-                  )}
-                </span>
-              ) : null}
-              {message.deletedAt !== null && message.media === null && message.content.length === 0 ? (
-                <em className="muted">message deleted</em>
-              ) : null}
-              {message.editedAt !== null && message.deletedAt === null ? (
-                <span className="muted"> (edited)</span>
-              ) : null}
-              <span className="read-mark">{readMark(message)}</span>
-            </div>
-            {message.deletedAt === null ? (
-              <div className="msg-actions">
-                {QUICK_REACTIONS.map((emoji) => (
-                  <button
-                    key={emoji}
-                    type="button"
-                    className="react-btn"
-                    onClick={() => {
-                      void toggleReaction(message, emoji);
-                    }}
-                  >
-                    {emoji}
-                  </button>
-                ))}
-                {message.senderId === me.id ? (
-                  <>
-                    <button type="button" className="link-btn" onClick={() => { onEdit(message); }}>
-                      edit
-                    </button>
-                    <button
-                      type="button"
-                      className="link-btn"
-                      onClick={() => {
-                        void remove(message.id);
-                      }}
-                    >
-                      delete
-                    </button>
-                  </>
+    <MediaViewerProvider>
+      <section className="chat-pane">
+        <ChatHeader
+          conversation={conversation}
+          online={peerOnline}
+          typing={typingUserIds.length > 0}
+        />
+
+      <div className="message-scroll" ref={scrollRef} onScroll={onScroll}>
+        {loading ? <p className="chat-loading muted">Loading…</p> : null}
+        <div className="message-list">
+          {messages.map((message, index) => {
+            const prev = index > 0 ? messages[index - 1] : undefined;
+            const next = index < messages.length - 1 ? messages[index + 1] : undefined;
+            const mine = message.senderId === me.id;
+            const newDay = prev === undefined || dayKey(prev.createdAt) !== dayKey(message.createdAt);
+            const groupStart = newDay || !inSameGroup(message, prev);
+            const groupEnd = !inSameGroup(message, next);
+            const showAvatar = !mine && isGroup;
+            const deleted = message.deletedAt !== null;
+            const editing = editingId === message.id;
+            const media = message.media;
+            // Round video notes render without bubble chrome (like Telegram).
+            const bareMedia =
+              media !== null && !deleted && media.kind === 'video' && isRoundVideo(media.name);
+            const hasMedia = media !== null && !deleted && !bareMedia;
+
+            const lineClass = [
+              'msg-line',
+              mine ? 'mine' : 'theirs',
+              groupStart ? 'group-start' : '',
+              groupEnd ? 'group-end' : '',
+            ]
+              .filter((token) => token !== '')
+              .join(' ');
+
+            const bubbleClass = [
+              'bubble',
+              mine ? 'bubble-mine' : 'bubble-theirs',
+              groupStart ? 'is-start' : '',
+              groupEnd ? 'is-end' : '',
+              bareMedia ? 'bubble-bare' : '',
+              hasMedia ? 'has-media' : '',
+            ]
+              .filter((token) => token !== '')
+              .join(' ');
+
+            return (
+              <Fragment key={message.id}>
+                {newDay ? (
+                  <div className="day-sep">
+                    <span>{dayLabel(message.createdAt)}</span>
+                  </div>
                 ) : null}
-              </div>
-            ) : null}
-            {message.reactions.length > 0 ? (
-              <div className="reactions">
-                {message.reactions.map((r) => (
-                  <button
-                    key={r.emoji}
-                    type="button"
-                    className={r.mine ? 'reaction mine-reaction' : 'reaction'}
-                    onClick={() => {
-                      void toggleReaction(message, r.emoji);
-                    }}
-                  >
-                    {r.emoji} {r.count}
-                  </button>
-                ))}
-              </div>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-      {typingUserIds.length > 0 ? <p className="typing muted">typing…</p> : null}
+                <div className={lineClass}>
+                  {showAvatar ? (
+                    groupEnd ? (
+                      message.sender.avatarUrl !== null ? (
+                        <img src={message.sender.avatarUrl} alt="" className="avatar msg-avatar" />
+                      ) : (
+                        <span className="avatar msg-avatar avatar-placeholder">
+                          {message.sender.displayName.charAt(0)}
+                        </span>
+                      )
+                    ) : (
+                      <span className="msg-avatar-spacer" />
+                    )
+                  ) : null}
+
+                  <div className="bubble-wrap">
+                    {showAvatar && groupStart && !deleted ? (
+                      <span className="msg-sender">{message.sender.displayName}</span>
+                    ) : null}
+
+                    <div className={bubbleClass}>
+                      {editing ? (
+                        <div className="bubble-edit">
+                          <textarea
+                            className="edit-input"
+                            value={draft}
+                            autoFocus
+                            onChange={(event) => {
+                              setDraft(event.target.value);
+                            }}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter' && !event.shiftKey) {
+                                event.preventDefault();
+                                void commitEdit(message.id);
+                              }
+                              if (event.key === 'Escape') {
+                                setEditingId(null);
+                              }
+                            }}
+                          />
+                          <div className="edit-actions">
+                            <button
+                              type="button"
+                              className="icon-btn edit-cancel"
+                              aria-label="Cancel"
+                              onClick={() => {
+                                setEditingId(null);
+                              }}
+                            >
+                              <CloseIcon size={17} />
+                            </button>
+                            <button
+                              type="button"
+                              className="icon-btn accent edit-save"
+                              aria-label="Save"
+                              onClick={() => {
+                                void commitEdit(message.id);
+                              }}
+                            >
+                              <CheckIcon size={17} />
+                            </button>
+                          </div>
+                        </div>
+                      ) : deleted ? (
+                        <span className="bubble-deleted">Message deleted</span>
+                      ) : (
+                        <>
+                          {message.media !== null ? (
+                            <MediaMessage
+                              conversationId={conversation.id}
+                              message={message}
+                              mine={mine}
+                            />
+                          ) : null}
+                          {message.content.length > 0 ? (
+                            <span className="bubble-text">{message.content}</span>
+                          ) : null}
+                          <span className="bubble-meta">
+                            {message.editedAt !== null ? (
+                              <span className="bubble-edited">edited</span>
+                            ) : null}
+                            <span className="bubble-time">{clock(message.createdAt)}</span>
+                            {tick(message)}
+                          </span>
+                        </>
+                      )}
+
+                      {!deleted && !editing ? (
+                        <div className="msg-tools">
+                          {QUICK_REACTIONS.map((emoji) => (
+                            <button
+                              key={emoji}
+                              type="button"
+                              className="tool-react"
+                              aria-label={`React ${emoji}`}
+                              onClick={() => {
+                                void toggleReaction(message, emoji);
+                              }}
+                            >
+                              {emoji}
+                            </button>
+                          ))}
+                          {mine ? (
+                            <>
+                              <span className="tool-divider" />
+                              <button
+                                type="button"
+                                className="tool-btn"
+                                aria-label="Edit"
+                                onClick={() => {
+                                  startEdit(message);
+                                }}
+                              >
+                                <EditIcon size={16} />
+                              </button>
+                              <button
+                                type="button"
+                                className="tool-btn tool-danger"
+                                aria-label="Delete"
+                                onClick={() => {
+                                  void remove(message.id);
+                                }}
+                              >
+                                <TrashIcon size={16} />
+                              </button>
+                            </>
+                          ) : null}
+                        </div>
+                      ) : null}
+                    </div>
+
+                    {message.reactions.length > 0 ? (
+                      <div className="reactions">
+                        {message.reactions.map((reaction) => (
+                          <button
+                            key={reaction.emoji}
+                            type="button"
+                            className={reaction.mine ? 'reaction is-mine' : 'reaction'}
+                            onClick={() => {
+                              void toggleReaction(message, reaction.emoji);
+                            }}
+                          >
+                            <span className="reaction-emoji">{reaction.emoji}</span>
+                            <span className="reaction-count">{reaction.count}</span>
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </Fragment>
+            );
+          })}
+        </div>
+      </div>
+
       {recorder.recording !== null ? (
         <div className="composer recording-bar">
           {recorder.recording === 'video' ? (
@@ -244,7 +447,7 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
           </button>
           <button
             type="button"
-            className="icon-btn send"
+            className="icon-btn accent"
             title="Stop and send"
             onClick={recorder.finish}
           >
@@ -252,16 +455,22 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
           </button>
         </div>
       ) : (
-        <form
-          className="composer"
-          onSubmit={(event) => {
-            void submit(event);
-          }}
-        >
+        <form className="composer" onSubmit={(event) => void submit(event)}>
           <label className="icon-btn" title="Attach file">
             <PaperclipIcon />
             <input type="file" hidden onChange={onAttach} />
           </label>
+          <textarea
+            className="composer-input"
+            rows={1}
+            value={text}
+            placeholder="Message…"
+            onChange={(event) => {
+              setText(event.target.value);
+              notifyTyping();
+            }}
+            onKeyDown={onComposerKey}
+          />
           <button
             type="button"
             className="icon-btn"
@@ -282,19 +491,17 @@ export const ChatView = ({ conversation, me }: Props): ReactElement => {
           >
             <VideoIcon />
           </button>
-          <input
-            value={text}
-            placeholder="Write a message…"
-            onChange={(event) => {
-              setText(event.target.value);
-              notifyTyping();
-            }}
-          />
-          <button type="submit" className="icon-btn send" title="Send">
+          <button
+            type="submit"
+            className="icon-btn accent composer-send"
+            title="Send"
+            disabled={text.trim() === ''}
+          >
             <SendIcon />
           </button>
         </form>
       )}
-    </section>
+      </section>
+    </MediaViewerProvider>
   );
 };
diff --git a/packages/web/src/features/messaging/ui/MediaMessage.tsx b/packages/web/src/features/messaging/ui/MediaMessage.tsx
new file mode 100644
index 0000000..00ce684
--- /dev/null
+++ b/packages/web/src/features/messaging/ui/MediaMessage.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { Message } from '@altricade/core';
+import { getMediaUrl } from '@altricade/core/api';
+import { apiConfig } from '../../../shared/api';
+import { FileIcon, DownloadIcon, PlayIcon } from '../../../shared/ui';
+import { VoiceMessage } from './VoiceMessage';
+import { VideoMessage } from './VideoMessage';
+import { useMediaViewer } from './MediaViewer';
+
+const formatSize = (bytes: number): string => {
+  if (bytes < 1024) return `${String(bytes)} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+// Recorded video messages carry this fixed name (see features/messaging/recorder.ts)
+// and render as a circular "video note"; any other video is a regular file player.
+export const isRoundVideo = (name: string): boolean => name.startsWith('video-message');
+
+interface Props {
+  conversationId: string;
+  message: Message;
+  mine: boolean;
+}
+
+export const MediaMessage = ({ conversationId, message, mine }: Props): ReactElement | null => {
+  const [url, setUrl] = useState<string | null>(null);
+  const viewer = useMediaViewer();
+  const media = message.media;
+
+  useEffect(() => {
+    if (media === null) {
+      return undefined;
+    }
+    let cancelled = false;
+    getMediaUrl(apiConfig, conversationId, message.id)
+      .then((resolved) => {
+        if (!cancelled) {
+          setUrl(resolved);
+        }
+      })
+      .catch(() => {
+        /* media may be unavailable */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [conversationId, message.id, media]);
+
+  if (media === null) {
+    return null;
+  }
+  if (url === null) {
+    return <span className="media-loading">Loading…</span>;
+  }
+
+  if (media.kind === 'voice') {
+    return (
+      <VoiceMessage url={url} seed={message.id} durationSec={media.durationSec} mine={mine} />
+    );
+  }
+
+  if (media.kind === 'video') {
+    if (isRoundVideo(media.name)) {
+      return <VideoMessage url={url} durationSec={media.durationSec} />;
+    }
+    return (
+      <button
+        type="button"
+        className="media-video-frame"
+        onClick={() => {
+          viewer.open({ type: 'video', url, name: media.name });
+        }}
+      >
+        <video src={url} className="media-video" preload="metadata" muted />
+        <span className="media-play-overlay">
+          <PlayIcon size={24} />
+        </span>
+      </button>
+    );
+  }
+
+  if (media.kind === 'image') {
+    return (
+      <button
+        type="button"
+        className="media-image-btn"
+        onClick={() => {
+          viewer.open({ type: 'image', url, name: media.name });
+        }}
+      >
+        <img src={url} alt={media.name} className="media-img" />
+      </button>
+    );
+  }
+
+  return (
+    <a
+      href={url}
+      download={media.name}
+      className={mine ? 'media-file media-file-mine' : 'media-file'}
+    >
+      <span className="media-file-icon">
+        <FileIcon size={20} />
+      </span>
+      <span className="media-file-meta">
+        <span className="media-file-name">{media.name}</span>
+        <span className="media-file-size">{formatSize(media.size)}</span>
+      </span>
+      <DownloadIcon size={18} className="media-file-dl" />
+    </a>
+  );
+};
diff --git a/packages/web/src/features/messaging/ui/MediaViewer.tsx b/packages/web/src/features/messaging/ui/MediaViewer.tsx
new file mode 100644
index 0000000..180ebf2
--- /dev/null
+++ b/packages/web/src/features/messaging/ui/MediaViewer.tsx
@@ -0,0 +1,173 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { CloseIcon, DownloadIcon } from '../../../shared/ui';
+
+export interface ViewerItem {
+  type: 'image' | 'video';
+  url: string;
+  name: string;
+}
+
+interface ViewerContextValue {
+  open: (item: ViewerItem) => void;
+}
+
+const ViewerContext = createContext<ViewerContextValue | null>(null);
+
+export const useMediaViewer = (): ViewerContextValue => {
+  const context = useContext(ViewerContext);
+  if (context === null) {
+    throw new Error('useMediaViewer must be used within a MediaViewerProvider');
+  }
+  return context;
+};
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+
+const Overlay = ({ item, onClose }: { item: ViewerItem; onClose: () => void }): ReactElement => {
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState<Point>({ x: 0, y: 0 });
+  const dragging = useRef<{ startX: number; startY: number; baseX: number; baseY: number } | null>(
+    null,
+  );
+
+  const reset = useCallback((): void => {
+    setScale(1);
+    setOffset({ x: 0, y: 0 });
+  }, []);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  const onWheel = (event: React.WheelEvent): void => {
+    if (item.type !== 'image') {
+      return;
+    }
+    const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale - event.deltaY * 0.0015));
+    setScale(nextScale);
+    if (nextScale === 1) {
+      setOffset({ x: 0, y: 0 });
+    }
+  };
+
+  const onPointerDown = (event: React.PointerEvent): void => {
+    if (scale <= 1) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragging.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      baseX: offset.x,
+      baseY: offset.y,
+    };
+  };
+
+  const onPointerMove = (event: React.PointerEvent): void => {
+    const state = dragging.current;
+    if (state === null) {
+      return;
+    }
+    setOffset({
+      x: state.baseX + (event.clientX - state.startX),
+      y: state.baseY + (event.clientY - state.startY),
+    });
+  };
+
+  const onPointerUp = (): void => {
+    dragging.current = null;
+  };
+
+  return (
+    <div className="viewer" role="dialog" aria-modal="true" onClick={onClose}>
+      <div className="viewer-toolbar" onClick={(event) => {
+              event.stopPropagation();
+            }}>
+        <span className="viewer-name">{item.name}</span>
+        <div className="viewer-actions">
+          <a
+            className="icon-btn viewer-btn"
+            href={item.url}
+            download={item.name}
+            aria-label="Download"
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            <DownloadIcon />
+          </a>
+          <button type="button" className="icon-btn viewer-btn" aria-label="Close" onClick={onClose}>
+            <CloseIcon />
+          </button>
+        </div>
+      </div>
+
+      <div className="viewer-stage" onClick={(event) => {
+              event.stopPropagation();
+            }}>
+        {item.type === 'image' ? (
+          <img
+            src={item.url}
+            alt={item.name}
+            className="viewer-img"
+            draggable={false}
+            style={{
+              transform: `translate(${String(offset.x)}px, ${String(offset.y)}px) scale(${String(scale)})`,
+              cursor: scale > 1 ? 'grab' : 'zoom-in',
+            }}
+            onWheel={onWheel}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onDoubleClick={reset}
+            onClick={() => {
+              if (scale === 1) {
+                setScale(2.2);
+              } else {
+                reset();
+              }
+            }}
+          />
+        ) : (
+          <video src={item.url} className="viewer-video" controls autoPlay />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const MediaViewerProvider = ({ children }: { children: ReactNode }): ReactElement => {
+  const [item, setItem] = useState<ViewerItem | null>(null);
+
+  const open = useCallback((next: ViewerItem): void => {
+    setItem(next);
+  }, []);
+  const close = useCallback((): void => {
+    setItem(null);
+  }, []);
+
+  const value = useMemo<ViewerContextValue>(() => ({ open }), [open]);
+
+  return (
+    <ViewerContext.Provider value={value}>
+      {children}
+      {item !== null ? createPortal(<Overlay item={item} onClose={close} />, document.body) : null}
+    </ViewerContext.Provider>
+  );
+};
diff --git a/packages/web/src/features/messaging/ui/VideoMessage.tsx b/packages/web/src/features/messaging/ui/VideoMessage.tsx
new file mode 100644
index 0000000..1ccc5e4
--- /dev/null
+++ b/packages/web/src/features/messaging/ui/VideoMessage.tsx
@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import { PlayIcon } from '../../../shared/ui';
+
+const formatDuration = (seconds: number): string => {
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return '';
+  }
+  const whole = Math.floor(seconds);
+  const minutes = Math.floor(whole / 60);
+  const rest = whole % 60;
+  return `${String(minutes)}:${rest < 10 ? '0' : ''}${String(rest)}`;
+};
+
+interface Props {
+  url: string;
+  durationSec: number | undefined;
+}
+
+// Circular "video message" — tap to play with sound, tap again to pause.
+export const VideoMessage = ({ url, durationSec }: Props): ReactElement => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [remaining, setRemaining] = useState(durationSec ?? 0);
+
+  const toggle = (): void => {
+    const video = videoRef.current;
+    if (video === null) {
+      return;
+    }
+    if (video.paused) {
+      void video.play();
+    } else {
+      video.pause();
+    }
+  };
+
+  return (
+    <button type="button" className={playing ? 'round-video is-playing' : 'round-video'} onClick={toggle}>
+      <video
+        ref={videoRef}
+        src={url}
+        className="round-video-el"
+        playsInline
+        onPlay={() => {
+          setPlaying(true);
+        }}
+        onPause={() => {
+          setPlaying(false);
+        }}
+        onTimeUpdate={(event) => {
+          const video = event.currentTarget;
+          setRemaining(Math.max(0, video.duration - video.currentTime));
+        }}
+        onEnded={() => {
+          setPlaying(false);
+          setRemaining(durationSec ?? 0);
+        }}
+      />
+      {!playing ? (
+        <span className="round-video-overlay">
+          <PlayIcon size={26} />
+        </span>
+      ) : null}
+      {formatDuration(remaining) !== '' ? (
+        <span className="round-video-time">{formatDuration(remaining)}</span>
+      ) : null}
+    </button>
+  );
+};
diff --git a/packages/web/src/features/messaging/ui/VoiceMessage.tsx b/packages/web/src/features/messaging/ui/VoiceMessage.tsx
new file mode 100644
index 0000000..2797944
--- /dev/null
+++ b/packages/web/src/features/messaging/ui/VoiceMessage.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import { PlayIcon, PauseIcon } from '../../../shared/ui';
+
+const BARS = 44;
+
+const formatDuration = (seconds: number): string => {
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return '0:00';
+  }
+  const whole = Math.floor(seconds);
+  const minutes = Math.floor(whole / 60);
+  const rest = whole % 60;
+  return `${String(minutes)}:${rest < 10 ? '0' : ''}${String(rest)}`;
+};
+
+// Real amplitude peaks from the decoded audio, normalized to 0..1.
+const computePeaks = (buffer: AudioBuffer, bars: number): number[] => {
+  const channel = buffer.getChannelData(0);
+  const blockSize = Math.max(1, Math.floor(channel.length / bars));
+  const peaks: number[] = [];
+  for (let index = 0; index < bars; index += 1) {
+    const start = index * blockSize;
+    let sum = 0;
+    for (let offset = 0; offset < blockSize; offset += 1) {
+      const value = channel[start + offset] ?? 0;
+      sum += value * value;
+    }
+    peaks.push(Math.sqrt(sum / blockSize));
+  }
+  const max = Math.max(...peaks, 0.0001);
+  return peaks.map((peak) => peak / max);
+};
+
+// Deterministic stand-in waveform when decoding is unavailable (e.g. Safari/opus).
+const pseudoPeaks = (seed: string, bars: number): number[] => {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
+  }
+  const peaks: number[] = [];
+  for (let index = 0; index < bars; index += 1) {
+    hash = (hash * 1103515245 + 12345) & 0x7fffffff;
+    peaks.push(0.25 + (hash % 1000) / 1000 * 0.7);
+  }
+  return peaks;
+};
+
+interface Props {
+  url: string;
+  seed: string;
+  durationSec: number | undefined;
+  mine: boolean;
+}
+
+export const VoiceMessage = ({ url, seed, durationSec, mine }: Props): ReactElement => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [peaks, setPeaks] = useState<number[]>(() => pseudoPeaks(seed, BARS));
+  const [playing, setPlaying] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [duration, setDuration] = useState(durationSec ?? 0);
+
+  // Decode the clip once to draw a true waveform; fall back silently.
+  useEffect(() => {
+    let cancelled = false;
+    const AudioCtor = window.AudioContext;
+    fetch(url)
+      .then((response) => response.arrayBuffer())
+      .then((raw) => {
+        const ctx = new AudioCtor();
+        return ctx.decodeAudioData(raw).then((buffer) => {
+          void ctx.close();
+          return buffer;
+        });
+      })
+      .then((buffer) => {
+        if (!cancelled) {
+          setPeaks(computePeaks(buffer, BARS));
+          setDuration((prev) => (prev > 0 ? prev : buffer.duration));
+        }
+      })
+      .catch(() => {
+        /* keep the pseudo waveform */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  const toggle = (): void => {
+    const audio = audioRef.current;
+    if (audio === null) {
+      return;
+    }
+    if (audio.paused) {
+      void audio.play();
+    } else {
+      audio.pause();
+    }
+  };
+
+  const seek = (event: React.MouseEvent<HTMLDivElement>): void => {
+    const audio = audioRef.current;
+    if (audio === null || duration <= 0) {
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+    audio.currentTime = ratio * duration;
+    setCurrent(audio.currentTime);
+  };
+
+  const progress = duration > 0 ? current / duration : 0;
+  const elapsed = playing || current > 0 ? current : duration;
+
+  return (
+    <div className={mine ? 'voice voice-mine' : 'voice'}>
+      <audio
+        ref={audioRef}
+        src={url}
+        preload="metadata"
+        onPlay={() => {
+          setPlaying(true);
+        }}
+        onPause={() => {
+          setPlaying(false);
+        }}
+        onTimeUpdate={(event) => {
+          setCurrent(event.currentTarget.currentTime);
+        }}
+        onLoadedMetadata={(event) => {
+          const value = event.currentTarget.duration;
+          if (Number.isFinite(value) && value > 0) {
+            setDuration((prev) => (prev > 0 ? prev : value));
+          }
+        }}
+        onEnded={() => {
+          setPlaying(false);
+          setCurrent(0);
+        }}
+      />
+      <button
+        type="button"
+        className="voice-play"
+        aria-label={playing ? 'Pause' : 'Play'}
+        onClick={toggle}
+      >
+        {playing ? <PauseIcon size={18} /> : <PlayIcon size={18} />}
+      </button>
+      <div
+        className="voice-wave"
+        role="presentation"
+        onClick={seek}
+      >
+        {peaks.map((peak, index) => {
+          const played = (index + 0.5) / BARS <= progress;
+          return (
+            <span
+              key={index}
+              className={played ? 'wave-bar is-played' : 'wave-bar'}
+              style={{ height: `${String(Math.round(Math.max(0.14, peak) * 100))}%` }}
+            />
+          );
+        })}
+      </div>
+      <span className="voice-time">{formatDuration(elapsed)}</span>
+    </div>
+  );
+};
diff --git a/packages/web/src/shared/theme/tokens.ts b/packages/web/src/shared/theme/tokens.ts
index 7494465..0a2a4e2 100644
--- a/packages/web/src/shared/theme/tokens.ts
+++ b/packages/web/src/shared/theme/tokens.ts
@@ -1,33 +1,87 @@
 // Design tokens — the single source of truth for colors. No hard-coded colors
-// live in feature/entity/widget code; everything reads these via CSS variables.
+// live in feature/entity/widget code; everything reads these via CSS variables
+// (`--color-<token>`), written onto <html> by the ThemeProvider.
+//
+// Non-color design primitives (spacing, radius, type scale, shadows, motion)
+// live as static custom properties in app/index.css, keyed on [data-theme]
+// where they must differ between light and dark.
 
 export type ThemeName = 'light' | 'dark';
 
 export interface ThemeColors {
+  /** App base background. */
   background: string;
+  /** Sidebar / header / composer chrome. */
+  surfacePanel: string;
+  /** Incoming bubbles, chips, inputs. */
   surface: string;
+  /** Hovered rows / controls. */
+  surfaceHover: string;
+  /** The chat scrollback backdrop, one step off the base. */
+  chatBackdrop: string;
   text: string;
   textMuted: string;
+  textFaint: string;
   accent: string;
+  accentHover: string;
+  /** Tinted accent wash — selected conversation row, own reaction pill. */
+  accentSoft: string;
+  /** Foreground on an accent fill. */
+  onAccent: string;
+  /** Muted foreground on an accent fill (timestamps on own bubbles). */
+  onAccentMuted: string;
+  /** Own (outgoing) message bubble fill. */
+  bubbleOut: string;
+  /** Incoming message bubble fill (elevated off the chat backdrop). */
+  bubbleIn: string;
   border: string;
+  borderStrong: string;
+  online: string;
+  danger: string;
   [token: string]: string;
 }
 
 export const themes: Record<ThemeName, ThemeColors> = {
   light: {
     background: '#ffffff',
-    surface: '#f4f5f7',
-    text: '#0b0c0f',
-    textMuted: '#5b6472',
-    accent: '#2f6fed',
-    border: '#e2e5ea',
+    surfacePanel: '#f7f8fa',
+    surface: '#eef0f4',
+    surfaceHover: '#f0f2f6',
+    chatBackdrop: '#f4f5f8',
+    text: '#0c0d10',
+    textMuted: '#606a7b',
+    textFaint: '#9aa3b2',
+    accent: '#4c6fff',
+    accentHover: '#3a5cf5',
+    accentSoft: '#eaeeff',
+    onAccent: '#ffffff',
+    onAccentMuted: 'rgba(255, 255, 255, 0.72)',
+    bubbleOut: '#4c6fff',
+    bubbleIn: '#ffffff',
+    border: '#e6e8ee',
+    borderStrong: '#d4d8e0',
+    online: '#22c55e',
+    danger: '#ef4444',
   },
   dark: {
-    background: '#0b0c0f',
-    surface: '#15171c',
-    text: '#f4f5f7',
-    textMuted: '#9aa3b2',
-    accent: '#5b8bff',
-    border: '#242833',
+    background: '#0e0f13',
+    surfacePanel: '#15171d',
+    surface: '#1e222b',
+    surfaceHover: '#242833',
+    chatBackdrop: '#0b0c10',
+    text: '#f3f4f7',
+    textMuted: '#98a1b2',
+    textFaint: '#5f6675',
+    accent: '#5b7cff',
+    accentHover: '#6f8bff',
+    accentSoft: '#1b2540',
+    onAccent: '#ffffff',
+    onAccentMuted: 'rgba(255, 255, 255, 0.72)',
+    bubbleOut: '#3b5cf5',
+    bubbleIn: '#22262f',
+    border: '#262a33',
+    borderStrong: '#333844',
+    online: '#22c55e',
+    danger: '#f87171',
   },
 };
diff --git a/packages/web/src/shared/ui/icons.tsx b/packages/web/src/shared/ui/icons.tsx
index aced941..1228ddf 100644
--- a/packages/web/src/shared/ui/icons.tsx
+++ b/packages/web/src/shared/ui/icons.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 // Inline stroke icons so glyphs render identically on every OS/browser (no
 // emoji font variance). `currentColor` lets callers theme them via CSS.
@@ -7,14 +7,19 @@ interface IconProps {
   className?: string;
 }
 
-const base = (size: number, className: string | undefined, children: ReactElement): ReactElement => (
+const base = (
+  size: number,
+  className: string | undefined,
+  children: ReactNode,
+  strokeWidth = 2,
+): ReactElement => (
   <svg
     width={size}
     height={size}
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    strokeWidth={2}
+    strokeWidth={strokeWidth}
     strokeLinecap="round"
     strokeLinejoin="round"
     aria-hidden="true"
@@ -24,6 +29,20 @@ const base = (size: number, className: string | undefined, children: ReactElemen
   </svg>
 );
 
+// Solid-fill variant helper (play triangle, filled dots, etc.).
+const solid = (size: number, className: string | undefined, children: ReactNode): ReactElement => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+    className={className}
+  >
+    {children}
+  </svg>
+);
+
 export const PaperclipIcon = ({ size = 20, className }: IconProps): ReactElement =>
   base(
     size,
@@ -54,17 +73,10 @@ export const VideoIcon = ({ size = 20, className }: IconProps): ReactElement =>
   );
 
 export const StopIcon = ({ size = 20, className }: IconProps): ReactElement =>
-  base(size, className, <rect x="6" y="6" width="12" height="12" rx="2" />);
+  solid(size, className, <rect x="6" y="6" width="12" height="12" rx="2" />);
 
 export const SendIcon = ({ size = 20, className }: IconProps): ReactElement =>
-  base(
-    size,
-    className,
-    <>
-      <line x1="22" y1="2" x2="11" y2="13" />
-      <path d="M22 2l-7 20-4-9-9-4 20-7z" />
-    </>,
-  );
+  solid(size, className, <path d="M3.4 20.4l17.45-8.3a1 1 0 0 0 0-1.8L3.4 2A.7.7 0 0 0 2.4 2.7L4.5 11 2.4 21.3a.7.7 0 0 0 1 .1z" />);
 
 export const CloseIcon = ({ size = 20, className }: IconProps): ReactElement =>
   base(
@@ -85,3 +97,163 @@ export const FileIcon = ({ size = 20, className }: IconProps): ReactElement =>
       <polyline points="14 2 14 8 20 8" />
     </>,
   );
+
+export const SearchIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </>,
+  );
+
+export const PlayIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  solid(size, className, <path d="M7 4.5v15a1 1 0 0 0 1.53.85l12-7.5a1 1 0 0 0 0-1.7l-12-7.5A1 1 0 0 0 7 4.5z" />);
+
+export const PauseIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  solid(
+    size,
+    className,
+    <>
+      <rect x="6" y="4.5" width="4" height="15" rx="1.2" />
+      <rect x="14" y="4.5" width="4" height="15" rx="1.2" />
+    </>,
+  );
+
+export const DownloadIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </>,
+  );
+
+export const ImageIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="M21 15l-5-5L5 21" />
+    </>,
+  );
+
+export const CheckIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(size, className, <polyline points="20 6 9 17 4 12" />, 2.4);
+
+export const DoubleCheckIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <path d="M2 12.5l4.5 4.5L16 7" />
+      <path d="M11 16.5l1 1L22 7" />
+    </>,
+    2.4,
+  );
+
+export const PlusIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </>,
+  );
+
+export const ChevronLeftIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(size, className, <polyline points="15 18 9 12 15 6" />);
+
+export const SunIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+    </>,
+  );
+
+export const MoonIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(size, className, <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />);
+
+export const MonitorIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <rect x="2" y="3" width="20" height="14" rx="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </>,
+  );
+
+export const LogOutIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </>,
+  );
+
+export const TrashIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </>,
+  );
+
+export const EditIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+    </>,
+  );
+
+export const SmileIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+      <line x1="9" y1="9" x2="9.01" y2="9" />
+      <line x1="15" y1="9" x2="15.01" y2="9" />
+    </>,
+  );
+
+export const UsersIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+    </>,
+  );
+
+export const ReplyIcon = ({ size = 20, className }: IconProps): ReactElement =>
+  base(
+    size,
+    className,
+    <>
+      <polyline points="9 17 4 12 9 7" />
+      <path d="M20 18v-2a4 4 0 0 0-4-4H4" />
+    </>,
+  );
diff --git a/packages/web/src/shared/ui/index.ts b/packages/web/src/shared/ui/index.ts
index d25a8da..0ebc6a7 100644
--- a/packages/web/src/shared/ui/index.ts
+++ b/packages/web/src/shared/ui/index.ts
@@ -6,4 +6,22 @@ export {
   SendIcon,
   CloseIcon,
   FileIcon,
+  SearchIcon,
+  PlayIcon,
+  PauseIcon,
+  DownloadIcon,
+  ImageIcon,
+  CheckIcon,
+  DoubleCheckIcon,
+  PlusIcon,
+  ChevronLeftIcon,
+  SunIcon,
+  MoonIcon,
+  MonitorIcon,
+  LogOutIcon,
+  TrashIcon,
+  EditIcon,
+  SmileIcon,
+  UsersIcon,
+  ReplyIcon,
 } from './icons';