diff --git a/packages/cli/assets/templates/pages/detail-page/page.tsx b/packages/cli/assets/templates/pages/detail-page/page.tsx
index e94d4531f73..8a76867f118 100644
--- a/packages/cli/assets/templates/pages/detail-page/page.tsx
+++ b/packages/cli/assets/templates/pages/detail-page/page.tsx
@@ -48,15 +48,6 @@ import type {CSSProperties} from 'react';
 // "bleed to container edge" prop (#2626). Everything else uses props. Plain
 // inline styles — no StyleX compiler required.
 
-// Dock the tab bar on the header's bottom edge so the active-tab underline
-// meets the header divider. TabList's `isFullBleed` handles the inline bleed;
-// the block-end dock is still hand-tuned because the tab row sits inside
-// nested flex wrappers (StackItem > HStack), where no component prop can
-// reach the header's padding edge (a LayoutHeader docking slot would).
-const tabsRow: CSSProperties = {
-  marginBottom: -16,
-  marginTop: 12,
-};
 // Pull the list items' inner padding back so their content optically aligns
 // with the section heading above (ListItem insets content by ~8px). No
 // edge/inset prop on List (#2626).
@@ -260,34 +251,36 @@ function PageHeader({
           </HStack>
         )}
 
-        <HStack vAlign="center" style={tabsRow}>
-          <StackItem size="fill">
-            <TabList
-              value={activeTab}
-              onChange={onTabChange}
-              size="lg"
-              isFullBleed>
-              <Tab value="details" label="Details" />
-              <Tab value="invoices" label="Invoices" />
-              <Tab value="timeline" label="Timeline" />
-              <TabMenu
-                label="More"
-                options={[
-                  {value: 'customer', label: 'Customer'},
-                  {value: 'analysis', label: 'Analysis'},
-                ]}
-              />
-            </TabList>
-          </StackItem>
-          <Button
-            label={isPanelOpen ? 'Hide panel' : 'Show panel'}
-            variant="ghost"
-            size="md"
-            icon={<Icon icon={ViewColumnsIcon} size="sm" />}
-            isIconOnly
-            onClick={onTogglePanel}
-          />
-        </HStack>
+        <Section variant="transparent" padding={0} paddingInline={4}>
+          <HStack vAlign="center">
+            <StackItem size="fill">
+              <TabList
+                value={activeTab}
+                onChange={onTabChange}
+                size="lg"
+                isFullBleed>
+                <Tab value="details" label="Details" />
+                <Tab value="invoices" label="Invoices" />
+                <Tab value="timeline" label="Timeline" />
+                <TabMenu
+                  label="More"
+                  options={[
+                    {value: 'customer', label: 'Customer'},
+                    {value: 'analysis', label: 'Analysis'},
+                  ]}
+                />
+              </TabList>
+            </StackItem>
+            <Button
+              label={isPanelOpen ? 'Hide panel' : 'Show panel'}
+              variant="ghost"
+              size="md"
+              icon={<Icon icon={ViewColumnsIcon} size="sm" />}
+              isIconOnly
+              onClick={onTogglePanel}
+            />
+          </HStack>
+        </Section>
       </VStack>
     </LayoutHeader>
   );