diff --git a/AgentCompany-New/src/renderer/src/pages/ApprovalsPage.tsx b/AgentCompany-New/src/renderer/src/pages/ApprovalsPage.tsx
index 24f99adb..859470b2 100644
--- a/AgentCompany-New/src/renderer/src/pages/ApprovalsPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/ApprovalsPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Avatar, Button, Icon, Pill } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import type {
   AgentRecord,
   ApprovalRecord,
@@ -57,18 +58,14 @@ export function ApprovalsPage({ snapshot, actions }: PageProps) {
 
   return (
     <div className="page">
-      <div className="row" style={{ marginBottom: 24 }}>
-        <div>
-          <h1 className="page-h1">Approvals</h1>
-          <p className="page-sub" style={{ marginBottom: 0 }}>
-            {pending.length} pending · {approved7d} approved this week
-          </p>
-        </div>
-        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
-          <RiskMenu filter={filter} onChange={setFilter} />
-          <Button tone="primary" onClick={approveAllLowRisk}>Approve all low risk</Button>
-        </div>
-      </div>
+      <TopbarActions>
+        <RiskMenu filter={filter} onChange={setFilter} />
+        <Button tone="primary" onClick={approveAllLowRisk}>Approve all low risk</Button>
+      </TopbarActions>
+      <h1 className="page-h1">Approvals</h1>
+      <p className="page-sub">
+        {pending.length} pending · {approved7d} approved this week
+      </p>
 
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12, marginBottom: 24 }}>
         <StatTile label="Pending" value={String(pending.length)} tone="amber" />
diff --git a/AgentCompany-New/src/renderer/src/pages/FilesPage.tsx b/AgentCompany-New/src/renderer/src/pages/FilesPage.tsx
index baa35da8..e04c4273 100644
--- a/AgentCompany-New/src/renderer/src/pages/FilesPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/FilesPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Avatar, Button, Icon, IconButton, Pill, Segmented } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import type {
   AgentRecord,
   EmployeeRecord,
@@ -56,28 +57,24 @@ export function FilesPage({ snapshot, actions }: PageProps) {
       />
 
       <div style={{ minWidth: 0 }}>
-        <div className="row" style={{ marginBottom: 24 }}>
-          <div>
-            <h1 className="page-h1">Files</h1>
-            <p className="page-sub" style={{ marginBottom: 0 }}>
-              {visibleFiles.length} {visibleFiles.length === 1 ? "file" : "files"} · {formatBytes(totalBytes)}
-            </p>
-          </div>
-          <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "center" }}>
-            <Button tone="ghost"><Icon name="filter" size={13} /></Button>
-            <Segmented<ViewMode>
-              value={view}
-              onChange={setView}
-              options={[
-                { id: "grid", label: "Grid" },
-                { id: "list", label: "List" },
-              ]}
-            />
-            <Button tone="primary" onClick={() => void actions.run(() => window.agentCompany.importFile({ orgId }))}>
-              <Icon name="upload" size={13} /> Upload
-            </Button>
-          </div>
-        </div>
+        <TopbarActions>
+          <Button tone="ghost"><Icon name="filter" size={13} /></Button>
+          <Segmented<ViewMode>
+            value={view}
+            onChange={setView}
+            options={[
+              { id: "grid", label: "Grid" },
+              { id: "list", label: "List" },
+            ]}
+          />
+          <Button tone="primary" onClick={() => void actions.run(() => window.agentCompany.importFile({ orgId }))}>
+            <Icon name="upload" size={13} /> Upload
+          </Button>
+        </TopbarActions>
+        <h1 className="page-h1">Files</h1>
+        <p className="page-sub">
+          {visibleFiles.length} {visibleFiles.length === 1 ? "file" : "files"} · {formatBytes(totalBytes)}
+        </p>
 
         {pinnedFiles.length > 0 && section.kind === "all" && (
           <>
diff --git a/AgentCompany-New/src/renderer/src/pages/HomePage.tsx b/AgentCompany-New/src/renderer/src/pages/HomePage.tsx
index dddf79e8..a5cc4269 100644
--- a/AgentCompany-New/src/renderer/src/pages/HomePage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/HomePage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Avatar, Button, Icon, Pill } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import type {
   AgentRecord,
   ApprovalRecord,
@@ -39,16 +40,12 @@ export function HomePage({ snapshot, actions }: PageProps) {
 
   return (
     <div className="page">
-      <div className="row" style={{ marginBottom: 24 }}>
-        <div>
-          <h1 className="page-h1">{greeting}, {firstName}</h1>
-          <p className="page-sub" style={{ marginBottom: 0 }}>{summaryText}</p>
-        </div>
-        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
-          <Button tone="ghost" onClick={() => void actions.reload()} title="Refresh"><Icon name="refresh" size={13} /></Button>
-          <Button tone="primary" onClick={() => setNewTaskOpen(true)}><Icon name="plus" size={13} /> New task</Button>
-        </div>
-      </div>
+      <TopbarActions>
+        <Button tone="ghost" onClick={() => void actions.reload()} title="Refresh"><Icon name="refresh" size={13} /></Button>
+        <Button tone="primary" onClick={() => setNewTaskOpen(true)}><Icon name="plus" size={13} /> New task</Button>
+      </TopbarActions>
+      <h1 className="page-h1">{greeting}, {firstName}</h1>
+      <p className="page-sub">{summaryText}</p>
 
       <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)", gap: 12, marginBottom: 12 }}>
         <TodayCard date={today} tasks={agendaTasks} agents={agents} employee={employee} approvals={pendingApprovals} />
diff --git a/AgentCompany-New/src/renderer/src/pages/SocialPage.tsx b/AgentCompany-New/src/renderer/src/pages/SocialPage.tsx
index 3d46eda9..4c6fccc2 100644
--- a/AgentCompany-New/src/renderer/src/pages/SocialPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/SocialPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState, type FormEvent } from "react";
 import { Avatar, Button, Field, Icon, IconButton, Pill } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import { Dialog } from "../shared/Dialog";
 import {
   SOCIAL_PLATFORM,
@@ -76,21 +77,17 @@ export function SocialPage({ snapshot, actions }: PageProps) {
 
   return (
     <div className="page">
-      <div className="row" style={{ marginBottom: 24 }}>
-        <div>
-          <h1 className="page-h1">Social</h1>
-          <p className="page-sub" style={{ marginBottom: 0 }}>
-            {accounts.length} {accounts.length === 1 ? "account" : "accounts"} · {scheduled.length} scheduled
-            {operatorName ? ` · managed by ${operatorName}` : ""}
-          </p>
-        </div>
-        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
-          <Button onClick={() => setConnectOpen(true)}><Icon name="plus" size={13} /> Connect account</Button>
-          <Button tone="primary" onClick={() => setDraftOpen(true)} disabled={accounts.length === 0}>
-            <Icon name="sparkle" size={13} /> Draft post
-          </Button>
-        </div>
-      </div>
+      <TopbarActions>
+        <Button onClick={() => setConnectOpen(true)}><Icon name="plus" size={13} /> Connect account</Button>
+        <Button tone="primary" onClick={() => setDraftOpen(true)} disabled={accounts.length === 0}>
+          <Icon name="sparkle" size={13} /> Draft post
+        </Button>
+      </TopbarActions>
+      <h1 className="page-h1">Social</h1>
+      <p className="page-sub">
+        {accounts.length} {accounts.length === 1 ? "account" : "accounts"} · {scheduled.length} scheduled
+        {operatorName ? ` · managed by ${operatorName}` : ""}
+      </p>
 
       {accounts.length > 0 && (
         <>
diff --git a/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx b/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
index 9437ce9f..e9315cf8 100644
--- a/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState, type FormEvent } from "react";
 import { Avatar, Button, Field, Icon, IconButton, Pill } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import { Dialog } from "../shared/Dialog";
 import type { AgentRecord, EmployeeRecord, ProviderRecord } from "../../../shared/domain";
 import type { PageProps } from "./types";
@@ -49,22 +50,18 @@ export function TeamPage({ snapshot, actions }: PageProps) {
 
   return (
     <div className="page">
-      <div className="row" style={{ marginBottom: 24 }}>
-        <div>
-          <h1 className="page-h1">Team</h1>
-          <p className="page-sub" style={{ marginBottom: 0 }}>
-            {employees.length + agents.length} {employees.length + agents.length === 1 ? "member" : "members"} ·
-            {" "}{employees.length} {employees.length === 1 ? "human" : "humans"} ·
-            {" "}{agents.length} {agents.length === 1 ? "agent" : "agents"}
-          </p>
-        </div>
-        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
-          <Button tone="ghost" onClick={() => cycleFilter(filter, setFilter)} title="Filter">
-            <Icon name="filter" size={13} /> {filterLabel(filter)}
-          </Button>
-          <Button tone="primary" onClick={() => setHireOpen(true)}><Icon name="plus" size={13} /> Hire</Button>
-        </div>
-      </div>
+      <TopbarActions>
+        <Button tone="ghost" onClick={() => cycleFilter(filter, setFilter)} title="Filter">
+          <Icon name="filter" size={13} /> {filterLabel(filter)}
+        </Button>
+        <Button tone="primary" onClick={() => setHireOpen(true)}><Icon name="plus" size={13} /> Hire</Button>
+      </TopbarActions>
+      <h1 className="page-h1">Team</h1>
+      <p className="page-sub">
+        {employees.length + agents.length} {employees.length + agents.length === 1 ? "member" : "members"} ·
+        {" "}{employees.length} {employees.length === 1 ? "human" : "humans"} ·
+        {" "}{agents.length} {agents.length === 1 ? "agent" : "agents"}
+      </p>
 
       <section className="card" style={{ padding: 32, marginBottom: 28 }}>
         <div className="section-label">Org</div>
diff --git a/AgentCompany-New/src/renderer/src/pages/WorkPage.tsx b/AgentCompany-New/src/renderer/src/pages/WorkPage.tsx
index dfcbe461..7faeba27 100644
--- a/AgentCompany-New/src/renderer/src/pages/WorkPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/WorkPage.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { Avatar, Button, Icon, IconButton, Pill, Segmented } from "../shared/ui";
+import { TopbarActions } from "../shared/TopbarActions";
 import {
   TASK_STATUS,
   type AgentRecord,
@@ -54,19 +55,15 @@ export function WorkPage({ snapshot, actions }: PageProps) {
 
   return (
     <div className="page-wide">
-      <div className="row" style={{ marginBottom: 24 }}>
-        <div>
-          <h1 className="page-h1">Work</h1>
-          <p className="page-sub" style={{ marginBottom: 0 }}>
-            {tasks.length} {tasks.length === 1 ? "task" : "tasks"} · {agents.length} {agents.length === 1 ? "assignee" : "assignees"}
-          </p>
-        </div>
-        <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "center" }}>
-          <Segmented value={view} onChange={setView} options={VIEW_OPTIONS} />
-          <Button tone="ghost"><Icon name="filter" size={13} /></Button>
-          <Button tone="primary" onClick={() => setNewTaskOpen(true)}><Icon name="plus" size={13} /> New task</Button>
-        </div>
-      </div>
+      <TopbarActions>
+        <Segmented value={view} onChange={setView} options={VIEW_OPTIONS} />
+        <Button tone="ghost"><Icon name="filter" size={13} /></Button>
+        <Button tone="primary" onClick={() => setNewTaskOpen(true)}><Icon name="plus" size={13} /> New task</Button>
+      </TopbarActions>
+      <h1 className="page-h1">Work</h1>
+      <p className="page-sub">
+        {tasks.length} {tasks.length === 1 ? "task" : "tasks"} · {agents.length} {agents.length === 1 ? "assignee" : "assignees"}
+      </p>
 
       {view === "board" && (
         <BoardView
diff --git a/AgentCompany-New/src/renderer/src/shared/Shell.tsx b/AgentCompany-New/src/renderer/src/shared/Shell.tsx
index 95aaf037..f7e8858e 100644
--- a/AgentCompany-New/src/renderer/src/shared/Shell.tsx
+++ b/AgentCompany-New/src/renderer/src/shared/Shell.tsx
@@ -4,6 +4,7 @@ import { Avatar, Icon, IconButton } from "./ui";
 import type { IconName } from "./Icon";
 import { OrgSwitcher } from "./OrgSwitcher";
 import { SearchDialog } from "./SearchDialog";
+import { TopbarSlotContext } from "./topbar-context";
 
 export type RouteId =
   | "home"
@@ -35,7 +36,6 @@ export function Shell({
   snapshot,
   route,
   setRoute,
-  actions,
   onSwitchOrg,
   onDeleteOrg,
   onNewOrg,
@@ -44,13 +44,13 @@ export function Shell({
   snapshot: AppSnapshot;
   route: RouteId;
   setRoute: (route: RouteId) => void;
-  actions?: ReactNode;
   onSwitchOrg: (orgId: string) => void;
   onDeleteOrg: (orgId: string) => void;
   onNewOrg: () => void;
   children: ReactNode;
 }) {
   const [searchOpen, setSearchOpen] = useState(false);
+  const [actionsSlot, setActionsSlot] = useState<HTMLElement | null>(null);
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -123,7 +123,7 @@ export function Shell({
           <span className="crumb-sep">/</span>
           <span className="crumb">{activeLabel}</span>
           <div className="topbar-actions">
-            {actions}
+            <span className="topbar-actions-slot" ref={setActionsSlot} />
             {window.agentCompany.platform !== "darwin" && (
               <>
                 <IconButton icon="minus" label="Minimize" onClick={() => void window.agentCompany.windowMinimize()} />
@@ -132,7 +132,9 @@ export function Shell({
             )}
           </div>
         </header>
-        <div className="content">{children}</div>
+        <div className="content">
+          <TopbarSlotContext.Provider value={actionsSlot}>{children}</TopbarSlotContext.Provider>
+        </div>
       </main>
       <SearchDialog
         snapshot={snapshot}
diff --git a/AgentCompany-New/src/renderer/src/shared/TopbarActions.tsx b/AgentCompany-New/src/renderer/src/shared/TopbarActions.tsx
new file mode 100644
index 00000000..4b001181
--- /dev/null
+++ b/AgentCompany-New/src/renderer/src/shared/TopbarActions.tsx
@@ -0,0 +1,9 @@
+import { useContext, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { TopbarSlotContext } from "./topbar-context";
+
+export function TopbarActions({ children }: { children: ReactNode }) {
+  const slot = useContext(TopbarSlotContext);
+  if (!slot) return null;
+  return createPortal(children, slot);
+}
diff --git a/AgentCompany-New/src/renderer/src/shared/topbar-context.ts b/AgentCompany-New/src/renderer/src/shared/topbar-context.ts
new file mode 100644
index 00000000..e851797f
--- /dev/null
+++ b/AgentCompany-New/src/renderer/src/shared/topbar-context.ts
@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+/**
+ * The Shell owns the fixed topbar and publishes its action area as a DOM node
+ * through this context. Pages portal their primary actions into that node via
+ * {@link TopbarActions} so the controls stay pinned to the topbar (matching the
+ * design) instead of scrolling away inside the page body.
+ */
+export const TopbarSlotContext = createContext<HTMLElement | null>(null);
diff --git a/AgentCompany-New/src/renderer/src/styles.css b/AgentCompany-New/src/renderer/src/styles.css
index 0e8555d6..ed7a76ad 100644
--- a/AgentCompany-New/src/renderer/src/styles.css
+++ b/AgentCompany-New/src/renderer/src/styles.css
@@ -291,6 +291,7 @@ a { color: inherit; }
 .crumb-sub { font-size: 13px; color: var(--text-3); }
 .crumb-sep { color: var(--text-4); }
 .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
+.topbar-actions-slot { display: flex; align-items: center; gap: 6px; }
 
 .content {
   flex: 1;