diff --git a/web/src/components/AppSidebar/AppSidebar.tsx b/web/src/components/AppSidebar/AppSidebar.tsx
index 39eca063..b21e4281 100644
--- a/web/src/components/AppSidebar/AppSidebar.tsx
+++ b/web/src/components/AppSidebar/AppSidebar.tsx
@@ -63,8 +63,6 @@ import {
 import TagsSection from "./TagsSection";
 import ViewsSection from "./ViewsSection";
 
-const SIDEBAR_HEADER_ACTION_CLASSES =
-  "size-7 shrink-0 rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50";
 const SIDEBAR_HEADER_PRIMARY_ACTION_CLASSES =
   "size-7 shrink-0 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50";
 
@@ -324,8 +322,9 @@ interface GlobalNavItem {
 }
 
 /**
- * The compact navigator is intentionally horizontal. Its 16px glyph plus 8px padding
- * on each side makes the collapsed control an exact 32px square. Expanding the
+ * The compact navigator is intentionally horizontal. Its 16px glyph plus 6px padding
+ * on each side makes the collapsed control an exact 28px square, the same box as the
+ * header's compose control. Expanding the
  * label only opens the text track, so the artwork and surface never jump.
  */
 const navPillClasses = (active: boolean) =>
@@ -336,7 +335,7 @@ const NavPillLabel = ({ expanded, label, children }: { expanded: boolean; label:
     aria-hidden={!expanded || undefined}
     className={cn(
       "grid min-w-0 transition-[grid-template-columns,padding] duration-200 ease-out motion-reduce:transition-none",
-      expanded ? "grid-cols-[1fr] ps-2" : "grid-cols-[0fr] ps-0",
+      expanded ? "grid-cols-[1fr] ps-2.5" : "grid-cols-[0fr] ps-0",
     )}
   >
     <span className="flex min-w-0 items-center gap-1.5 overflow-hidden">
@@ -353,7 +352,7 @@ const GlobalNavigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const currentUser = useCurrentUser();
-  const { memoDetail, memoScope, setMemoScope, setMobileOpen } = useAppSidebar();
+  const { memoDetail, memoScope, setMemoScope, setMobileOpen, setQuickFindOpen } = useAppSidebar();
   const { filters } = useMemoFilterContext();
   const routeKind = getSidebarRouteKind(location.pathname);
   const resolvedScope = resolveMemoScope(location.pathname, {
@@ -442,7 +441,7 @@ const GlobalNavigation = () => {
 
   return (
     <TooltipProvider>
-      <nav className={cn("flex h-8 items-center gap-1", SIDEBAR_RAIL_CLASSES)} aria-label="Primary">
+      <nav className={cn("flex h-7 items-center gap-1", SIDEBAR_RAIL_CLASSES)} aria-label="Primary">
         {currentUser && (
           <DropdownMenu
             onOpenChange={(open, eventDetails) => {
@@ -522,6 +521,28 @@ const GlobalNavigation = () => {
             </Tooltip>
           );
         })}
+        {/* Search is a place to go, not a header action: it closes the navigator's row
+            so the header keeps only the brand and the bordered compose control. */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                aria-label={t("common.search")}
+                className={cn("ms-auto", navPillClasses(false))}
+                onClick={() => {
+                  setMobileOpen(false);
+                  setQuickFindOpen(true);
+                }}
+              />
+            }
+          >
+            <span className={SIDEBAR_NAV_LEADING_SLOT_CLASSES} aria-hidden="true">
+              <SearchIcon className="size-4 opacity-75" strokeWidth={1.8} />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{t("common.search")}</TooltipContent>
+        </Tooltip>
       </nav>
     </TooltipProvider>
   );
@@ -553,27 +574,13 @@ const SidebarBrand = ({ className, size = "md" }: { className?: string; size?: "
 const AppSidebar = ({ className }: { className?: string }) => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
-  const { setMobileOpen, setQuickFindOpen } = useAppSidebar();
+  const { setMobileOpen } = useAppSidebar();
   const { canOpen: canCompose, openEditor } = useGlobalMemoEditor();
   return (
     <aside className={cn("flex h-full w-full select-none flex-col bg-sidebar text-sidebar-foreground", className)}>
       <div data-sidebar-header className={cn("flex h-13 shrink-0 items-center justify-between gap-2", SIDEBAR_RAIL_CLASSES)}>
         <SidebarBrand className="min-w-0" size="header" />
-        <div className="flex shrink-0 items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className={SIDEBAR_HEADER_ACTION_CLASSES}
-            onClick={() => {
-              setMobileOpen(false);
-              setQuickFindOpen(true);
-            }}
-            aria-label={t("common.search")}
-          >
-            <SearchIcon className="size-4" strokeWidth={1.8} />
-          </Button>
-          {canCompose && <NewMemoAction onClick={openEditor} />}
-        </div>
+        {canCompose && <NewMemoAction onClick={openEditor} />}
       </div>
       <GlobalNavigation />
       <div className="mx-3 mt-2 border-t border-border/70" />
diff --git a/web/src/components/AppSidebar/SpaceSwitcher.tsx b/web/src/components/AppSidebar/SpaceSwitcher.tsx
index 2d02e9e0..0da27384 100644
--- a/web/src/components/AppSidebar/SpaceSwitcher.tsx
+++ b/web/src/components/AppSidebar/SpaceSwitcher.tsx
@@ -65,7 +65,7 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
     ? `${selectedSpace?.title || t("space.current")}${showSelectedSpaceUid && selectedSpaceUid ? ` (${selectedSpaceUid})` : ""}`
     : t("common.memos");
   const brandSize = size === "header" ? "header" : "md";
-  const spaceMarkSize = size === "header" ? "sm" : "md";
+  const spaceMarkSize = size === "header" ? "header" : "md";
 
   const handleMenuOpenChange = (open: boolean) => {
     if (!open) return;
@@ -99,15 +99,15 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
             />
           }
         >
-          <span className={cn("flex min-w-0 items-center overflow-hidden", size === "header" ? "gap-1" : "gap-1.5")}>
+          <span className={cn("flex min-w-0 items-center overflow-hidden", size === "header" ? "gap-2" : "gap-1.5")}>
             {selectedSpaceName ? (
               <>
                 <SpaceMark size={spaceMarkSize} />
                 <span data-sidebar-label className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
                   <span
                     className={cn(
-                      "block truncate text-[14px] tracking-[-0.01em] text-foreground",
-                      size === "header" ? "font-semibold leading-5" : "font-medium leading-4",
+                      "block truncate tracking-[-0.01em] text-foreground",
+                      size === "header" ? "text-[15px] font-semibold leading-5" : "text-[14px] font-medium leading-4",
                     )}
                   >
                     {selectedSpace?.title || t("space.current")}
@@ -127,7 +127,11 @@ function SpaceSwitcher({ className, size = "md" }: { className?: string; size?:
               <MemosLogo compact size={brandSize} />
             )}
           </span>
-          <ChevronsUpDownIcon aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground/70" strokeWidth={1.8} />
+          <ChevronsUpDownIcon
+            aria-hidden="true"
+            className={cn("shrink-0 text-muted-foreground/70", size === "header" ? "size-3" : "size-3.5")}
+            strokeWidth={1.8}
+          />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           size="sm"
diff --git a/web/src/components/AppSidebar/sidebar-layout.ts b/web/src/components/AppSidebar/sidebar-layout.ts
index 72a71efb..1363e459 100644
--- a/web/src/components/AppSidebar/sidebar-layout.ts
+++ b/web/src/components/AppSidebar/sidebar-layout.ts
@@ -4,25 +4,28 @@ import { cva } from "class-variance-authority";
  * The sidebar is drawn on one shared rail: inset surfaces start 12px from the shell,
  * visible artwork starts at 20px, and first-level labels start at 44px. The full-bleed
  * footer action pads its content directly onto those same rails. Rows reserve a 20px
- * artwork column; compact navigation reaches the label rail with an 8px gap.
+ * artwork column. Compact navigation is a 28px square like the header's compose control,
+ * so its glyph sits 2px inside the artwork rail and reaches the label rail with a 10px gap.
  */
 export const SIDEBAR_RAIL_CLASSES = "px-3";
 // Content rows reserve 20px so 16px icons and 20px marks share a stable label rail.
 export const SIDEBAR_LEADING_SLOT_CLASSES = "flex size-5 shrink-0 items-center justify-center";
-// Compact nav uses the visible 16px glyph itself as the cell, keeping 8px x/y padding.
+// Compact nav uses the visible 16px glyph itself as the cell, keeping 6px x/y padding.
 export const SIDEBAR_NAV_LEADING_SLOT_CLASSES = "flex size-4 shrink-0 items-center justify-center";
 
 /**
  * Brand controls hug their content, ordinary rows fill the inset rail, and the account
  * action fills the footer shell (or becomes a rail-aligned square when collapsed).
+ * The header brand is the sidebar's title, not a row: a 24px mark on the artwork rail and
+ * a larger label, so it reads as a different kind of object from the 16px nav pills below.
  * Heights stay fixed so data cannot change a surface's padding or vertical position.
  */
 export const sidebarSurfaceVariants = cva("min-w-0 items-center", {
   variants: {
     role: {
       row: "flex h-7 w-full gap-1 rounded-md px-2 text-ui",
-      navPill: "relative flex h-8 rounded-md px-2",
-      headerBrand: "flex h-9 max-w-full gap-1 rounded-md px-2",
+      navPill: "relative flex h-7 rounded-md px-1.5",
+      headerBrand: "flex h-9 max-w-full gap-2 rounded-md px-2",
       mobileBrand: "flex h-9 max-w-full gap-1.5 rounded-md px-1",
       account: "flex h-9 w-full gap-1 rounded-none px-5",
       accountCollapsed: "ms-3 flex size-9 rounded-md p-2",
diff --git a/web/src/components/MemosLogo.tsx b/web/src/components/MemosLogo.tsx
index dfb016db..c66fff21 100644
--- a/web/src/components/MemosLogo.tsx
+++ b/web/src/components/MemosLogo.tsx
@@ -14,7 +14,7 @@ interface Props {
 // wherever the two are listed together.
 const COMPACT_SCALE = {
   md: { mark: "size-7 rounded-[7px]", gap: "gap-1.5", title: "text-[14px]", weight: "font-medium" },
-  header: { mark: "size-5 rounded-[5px]", gap: "gap-1", title: "text-[14px] leading-5", weight: "font-semibold" },
+  header: { mark: "size-6 rounded-[6px]", gap: "gap-2", title: "text-[15px] leading-5", weight: "font-semibold" },
   sm: { mark: "size-5 rounded-[5px]", gap: "gap-1.5", title: "text-ui", weight: "font-medium" },
 } as const;
 
diff --git a/web/src/components/SpaceMark.tsx b/web/src/components/SpaceMark.tsx
index 5168ad58..b17de693 100644
--- a/web/src/components/SpaceMark.tsx
+++ b/web/src/components/SpaceMark.tsx
@@ -5,6 +5,8 @@ const MARK_SCALE = {
   xl: { mark: "size-11 rounded-lg", icon: "size-6" },
   lg: { mark: "size-9 rounded-[7px]", icon: "size-5" },
   md: { mark: "size-7 rounded-[7px]", icon: "size-4" },
+  /** Primary chrome: kept in step with MemosLogo's header scale. */
+  header: { mark: "size-6 rounded-[6px]", icon: "size-3.5" },
   sm: { mark: "size-5 rounded-[5px]", icon: "size-3" },
 } as const;