diff --git a/services/frontend/src/app/(dashboard)/dashboard/view.tsx b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
index 45375e4..a10eed3 100644
--- a/services/frontend/src/app/(dashboard)/dashboard/view.tsx
+++ b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
@@ -155,7 +155,7 @@ export function DashboardView({
                 100;
               return (
                 <div key={c.channel_id} className="flex items-center gap-3">
-                  <span className="w-40 truncate text-sm text-ink-soft">
+                  <span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
                     {c.channel_name ?? c.channel_id.slice(0, 8)}
                   </span>
                   <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/8">
diff --git a/services/frontend/src/app/(dashboard)/messages/view.tsx b/services/frontend/src/app/(dashboard)/messages/view.tsx
index e9cab1b..e7d5e45 100644
--- a/services/frontend/src/app/(dashboard)/messages/view.tsx
+++ b/services/frontend/src/app/(dashboard)/messages/view.tsx
@@ -131,7 +131,7 @@ export function MessagesView({
             setLoadedPages(0);
           }}
         />
-        <div className="relative ml-auto w-64">
+        <div className="relative ml-auto w-full sm:w-64">
           <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
           <Input
             className="pl-9"
diff --git a/services/frontend/src/components/shared/guild-picker.tsx b/services/frontend/src/components/shared/guild-picker.tsx
index f2cb364..9714427 100644
--- a/services/frontend/src/components/shared/guild-picker.tsx
+++ b/services/frontend/src/components/shared/guild-picker.tsx
@@ -41,7 +41,7 @@ export function GuildChannelPicker({
   }));
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
       <Select
         value={g}
         onChange={(v) => {
@@ -52,7 +52,7 @@ export function GuildChannelPicker({
         options={guildOpts}
         placeholder="Guild"
         size="sm"
-        className="w-44"
+        className="w-full sm:w-44"
       />
       <Select
         value={c}
@@ -63,7 +63,7 @@ export function GuildChannelPicker({
         options={channelOpts}
         placeholder={mode === "voice" ? "Voice channel" : "Text channel"}
         size="sm"
-        className="w-52"
+        className="w-full sm:w-52"
       />
     </div>
   );
diff --git a/services/frontend/src/components/shared/section.tsx b/services/frontend/src/components/shared/section.tsx
index 1c5c9de..771fa70 100644
--- a/services/frontend/src/components/shared/section.tsx
+++ b/services/frontend/src/components/shared/section.tsx
@@ -12,12 +12,12 @@ export function SectionHeader({
   className?: string;
 }) {
   return (
-    <div className={cn("mb-3 flex items-end justify-between gap-3", className)}>
+    <div className={cn("mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3", className)}>
       <div className="min-w-0">
         {eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
         <h2 className="display text-xl text-ink">{title}</h2>
       </div>
-      {action}
+      {action && <div className="flex flex-wrap items-center gap-2">{action}</div>}
     </div>
   );
 }
diff --git a/services/frontend/src/components/shell/ambient-app.tsx b/services/frontend/src/components/shell/ambient-app.tsx
index d2e4b3a..841bc3b 100644
--- a/services/frontend/src/components/shell/ambient-app.tsx
+++ b/services/frontend/src/components/shell/ambient-app.tsx
@@ -12,7 +12,7 @@ export function AppFrame({ children }: { children: React.ReactNode }) {
       <NavRail />
       <div className="flex min-w-0 flex-1 flex-col">
         <TopBar />
-        <main className="min-h-0 flex-1 overflow-y-auto px-5 pb-8">
+        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-8 sm:px-5">
           {children}
         </main>
       </div>
diff --git a/services/frontend/src/components/shell/topbar.tsx b/services/frontend/src/components/shell/topbar.tsx
index caccf90..542bd61 100644
--- a/services/frontend/src/components/shell/topbar.tsx
+++ b/services/frontend/src/components/shell/topbar.tsx
@@ -32,20 +32,20 @@ export function TopBar() {
         : "text-signal";
 
   return (
-    <header className="sticky top-0 z-40 flex items-center gap-4 px-5 py-3.5">
-      <div className="flex min-w-0 items-baseline gap-3">
-        <span className="eyebrow">GMW</span>
-        <h1 className="display truncate text-[1.5rem] text-ink">{label}</h1>
+    <header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 sm:gap-4 sm:px-5 sm:py-3.5">
+      <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
+        <span className="eyebrow hidden sm:inline">GMW</span>
+        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">{label}</h1>
       </div>
 
-      <div className="ml-auto flex items-center gap-3">
-        <span className={cn("pill", signalTone)}>
+      <div className="ml-auto flex items-center gap-2 sm:gap-3">
+        <span className={cn("pill hidden sm:flex", signalTone)}>
           <span
             className={cn("size-1.5 rounded-full bg-current animate-breathe")}
           />
           {state.label ?? "nominal"}
         </span>
-        <ConnectionStatus />
+        <ConnectionStatus compact />
         <button
           type="button"
           aria-label="Open command palette"