diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 771dd8de..d373b7ae 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -90,10 +90,12 @@ const Header = forwardRef<
     <div
       ref={ref}
       // left-4 / right = 1rem + the scrollbar gutter defines the full content column; max-w-[--content-mw]
-      // + mx-auto then centres the header on the SAME width the page's content uses, so on a max-width page
-      // (Plex/Channels/Playlists) the header lines up with the centred grid, not the whole column. `none`
-      // (feed) = full width. Matches the toolbar band below it.
-      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center gap-x-3 gap-y-2"
+      // + mx-auto then centres the header band on the SAME width the page's content uses, so on a max-width
+      // page (Plex/Channels/Playlists) the band lines up with the centred grid, not the whole column. `none`
+      // (feed) = full width. Matches the toolbar band below it. `justify-center` then centres the search-box
+      // group (search + scope toggle / sync chip) within that band, so the box sits centred over the cards
+      // once the column is wider than the box's max-w — not hugged to the left edge.
+      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center justify-center gap-x-3 gap-y-2"
     >
       {search}
       {/* Library scope (movie/show/both) sits right of the search box on Plex — relocated here from