diff --git a/resources/js/admin/mobile/components/MobileShell.tsx b/resources/js/admin/mobile/components/MobileShell.tsx
index 7e4476e..bdac2bb 100644
--- a/resources/js/admin/mobile/components/MobileShell.tsx
+++ b/resources/js/admin/mobile/components/MobileShell.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
@@ -15,7 +15,6 @@ import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
 import { useOnlineStatus } from '../hooks/useOnlineStatus';
 import { resolveEventDisplayName } from '../../lib/events';
 import { TenantEvent, getEvents } from '../../api';
-import { withAlpha } from './colors';
 import { setTabHistory } from '../lib/tabHistory';
 import { loadPhotoQueue } from '../lib/photoModerationQueue';
 import { countQueuedPhotoActions } from '../lib/queueStatus';
@@ -25,14 +24,13 @@ import { EventSwitcherSheet } from './EventSwitcherSheet';
 
 type MobileShellProps = {
   title?: string;
-  subtitle?: string;
   children: React.ReactNode;
   activeTab: NavKey;
   onBack?: () => void;
   headerActions?: React.ReactNode;
 };
 
-export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) {
+export function MobileShell({ title, children, activeTab, onBack, headerActions }: MobileShellProps) {
   const { events, activeEvent, selectEvent } = useEventContext();
   const { user } = useAuth();
   const { go } = useMobileNav(activeEvent?.slug, activeTab);
@@ -49,9 +47,8 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   
   // --- DARK HEADER ---
   const headerSurface = '#0F172A'; // Slate 900
-  const actionSurface = 'rgba(255, 255, 255, 0.1)';
-  const actionBorder = 'rgba(255, 255, 255, 0.05)';
-  const textColor = 'white';
+  const actionSurface = theme.primary;
+  const actionBorder = 'rgba(255, 255, 255, 0.1)';
   
   const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
   const [loadingEvents, setLoadingEvents] = React.useState(false);
@@ -204,7 +201,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
     </HeaderActionButton>
   ) : (
     <HeaderActionButton onPress={() => {}} ariaLabel="Search">
-       <XStack width={36} height={36} borderRadius={10} alignItems="center" justifyContent="center">
+       <XStack width={36} height={36} borderRadius={10} backgroundColor={actionSurface} alignItems="center" justifyContent="center">
           <Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
        </XStack>
     </HeaderActionButton>
@@ -221,7 +218,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
             width={36}
             height={36}
             borderRadius={10}
-            backgroundColor="rgba(255, 255, 255, 0.15)"
+            backgroundColor={actionSurface}
             alignItems="center"
             justifyContent="center"
           >