diff --git a/apps/ui/src/components/views/board-view/board-header.tsx b/apps/ui/src/components/views/board-view/board-header.tsx
index ab7713c7..884cf495 100644
--- a/apps/ui/src/components/views/board-view/board-header.tsx
+++ b/apps/ui/src/components/views/board-view/board-header.tsx
@@ -22,6 +22,10 @@ interface BoardHeaderProps {
   isMounted: boolean;
 }
 
+// Shared styles for header control containers
+const controlContainerClass =
+  'flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border';
+
 export function BoardHeader({
   projectName,
   maxConcurrency,
@@ -60,10 +64,7 @@ export function BoardHeader({
 
         {/* Concurrency Slider - only show after mount to prevent hydration issues */}
         {isMounted && (
-          <div
-            className="flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border"
-            data-testid="concurrency-slider-container"
-          >
+          <div className={controlContainerClass} data-testid="concurrency-slider-container">
             <Bot className="w-4 h-4 text-muted-foreground" />
             <span className="text-sm font-medium">Agents</span>
             <Slider
@@ -86,7 +87,7 @@ export function BoardHeader({
 
         {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
         {isMounted && (
-          <div className="flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border">
+          <div className={controlContainerClass} data-testid="auto-mode-toggle-container">
             <Label htmlFor="auto-mode-toggle" className="text-sm font-medium cursor-pointer">
               Auto Mode
             </Label>