diff --git a/AGENTS.md b/AGENTS.md
index 7d8dd25a..ac7c451c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -47,7 +47,6 @@ src/
 │   ├── common/           # Cross-feature shared components
 │   └── [domain]/         # Domain-specific components (maps, calls, etc.)
 ├── constants/            # App constants (colors, map icons)
-├── features/             # Feature-specific modules (livekit-call)
 ├── hooks/                # Custom React hooks
 ├── lib/                  # Core utilities & services
 │   ├── auth/             # Auth API, types, and utilities
diff --git a/CLAUDE.md b/CLAUDE.md
index 3e57ef19..f2daaf11 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -95,7 +95,6 @@ src/
 │   ├── common/           # Cross-feature shared components
 │   └── [domain]/         # Domain-specific components (maps, calls, etc.)
 ├── constants/            # App constants (colors, map icons)
-├── features/             # Feature-specific modules (livekit-call)
 ├── hooks/                # Custom React hooks
 ├── lib/                  # Core utilities & services
 │   ├── auth/             # Auth API, types, and utilities
diff --git a/docs/bluetooth-audio-integration.md b/docs/bluetooth-audio-integration.md
index e2227e58..a49a88e5 100644
--- a/docs/bluetooth-audio-integration.md
+++ b/docs/bluetooth-audio-integration.md
@@ -25,17 +25,16 @@ This system provides comprehensive Bluetooth audio device integration for the Li
    - Tracks available devices, connection status, and button events
    - Provides reactive state for UI components
 
-3. **BluetoothAudioModal** (`src/components/bluetooth/bluetooth-audio-modal.tsx`)
+3. **BluetoothDeviceSelectionBottomSheet** (`src/components/settings/bluetooth-device-selection-bottom-sheet.tsx`)
    - User interface for device selection and management
    - Shows device list, connection status, and controls
-   - Displays button events and audio routing status
 
 ### Data Flow
 
 ```mermaid
 graph TD
     A[BluetoothAudioService] --> B[BluetoothAudioStore]
-    B --> C[BluetoothAudioModal]
+    B --> C[BluetoothDeviceSelectionBottomSheet]
     A --> D[LiveKit Integration]
     E[BLE Device] --> A
     A --> F[Audio Routing]
@@ -51,18 +50,18 @@ graph TD
 ```typescript
 import { bluetoothAudioService } from '@/services/bluetooth-audio.service';
 import { useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
-import BluetoothAudioModal from '@/components/bluetooth/bluetooth-audio-modal';
+import { BluetoothDeviceSelectionBottomSheet } from '@/components/settings/bluetooth-device-selection-bottom-sheet';
 ```
 
 ### 2. Show Device Selection UI
 
 ```typescript
-const [isBluetoothModalOpen, setIsBluetoothModalOpen] = useState(false);
+const [isDeviceSelectionOpen, setIsDeviceSelectionOpen] = useState(false);
 
 // In your component render:
-<BluetoothAudioModal
-  isOpen={isBluetoothModalOpen}
-  onClose={() => setIsBluetoothModalOpen(false)}
+<BluetoothDeviceSelectionBottomSheet
+  isOpen={isDeviceSelectionOpen}
+  onClose={() => setIsDeviceSelectionOpen(false)}
 />
 ```
 
@@ -308,7 +307,7 @@ Tests are provided for:
 
 - BluetoothAudioStore state management
 - BluetoothAudioService methods
-- BluetoothAudioModal UI components
+- BluetoothDeviceSelectionBottomSheet UI components
 
 ### Mocking
 
@@ -324,7 +323,7 @@ The system includes mocks for:
 # Run all Bluetooth audio tests
 yarn test src/stores/app/__tests__/bluetooth-audio-store.test.ts
 yarn test src/services/__tests__/bluetooth-audio.service.test.ts
-yarn test src/components/bluetooth/__tests__/bluetooth-audio-modal.test.tsx
+yarn test src/components/settings/__tests__/bluetooth-device-selection-bottom-sheet.test.tsx
 ```
 
 ## Performance Considerations
diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
index e5a1fbbe..02345683 100644
--- a/src/app/(app)/_layout.tsx
+++ b/src/app/(app)/_layout.tsx
@@ -449,7 +449,8 @@ export default function TabLayout() {
         zIndex: 100,
         backgroundColor: 'transparent',
         borderTopWidth: 0.5,
-        borderTopColor: 'rgba(0, 0, 0, 0.1)',
+        // Mid-gray rather than black-alpha so the divider still shows on the dark tab bar.
+        borderTopColor: 'rgba(127, 127, 127, 0.2)',
       },
     }),
     [isLandscape, insets.bottom]
@@ -462,12 +463,12 @@ export default function TabLayout() {
   const handleCloseNotifications = useCallback(() => setIsNotificationsOpen(false), []);
 
   // Memoize per-screen tab bar icon renderers to prevent new functions every render
-  const mapIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Map} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const callsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Megaphone} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const contactsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Contact} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
+  const mapIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Map} stroke={color as string} className="text-primary-500" />, []);
+  const callsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Megaphone} stroke={color as string} className="text-primary-500" />, []);
+  const contactsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Contact} stroke={color as string} className="text-primary-500" />, []);
   const notesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Notebook} stroke={color as string} />, []);
-  const routesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Navigation} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
-  const weatherAlertsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={CloudAlert} stroke={color as string} className="text-primary-500 dark:text-primary-400" />, []);
+  const routesIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Navigation} stroke={color as string} className="text-primary-500" />, []);
+  const weatherAlertsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={CloudAlert} stroke={color as string} className="text-primary-500" />, []);
   const protocolsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={ListTree} stroke={color as string} />, []);
   const settingsIcon = useCallback(({ color }: { color: ColorValue }) => <Icon as={Settings} stroke={color as string} />, []);
 
@@ -604,7 +605,7 @@ export default function TabLayout() {
 
       {/* Loading overlay during initialization — shown on top of Tabs so the navigator stays mounted */}
       {!isInitComplete ? (
-        <View style={styles.loadingOverlay}>
+        <View style={styles.loadingOverlay} className={Platform.OS === 'web' ? 'bg-background-0' : 'bg-background-0/95'}>
           <ActivityIndicator size="large" />
         </View>
       ) : null}
@@ -701,7 +702,8 @@ const CreateDrawerMenuButton = ({ setIsOpen, isLandscape }: CreateDrawerMenuButt
         setIsOpen(true);
       }}
     >
-      <Menu size={24} color="currentColor" className="text-gray-700 dark:text-gray-300" />
+      {/* No `color` prop: an explicit one overrides the className colour, and "currentColor" resolves to black against the dark header. */}
+      <Menu size={24} className="text-gray-700 dark:text-gray-300" />
     </Pressable>
   );
 };
@@ -743,7 +745,6 @@ const styles = StyleSheet.create({
     ...(StyleSheet.absoluteFill as object),
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: Platform.OS === 'web' ? '#ffffff' : 'rgba(255,255,255,0.95)',
     zIndex: 1000,
   },
 });
diff --git a/src/app/(app)/chat.tsx b/src/app/(app)/chat.tsx
index 71f3d154..4215c5bf 100644
--- a/src/app/(app)/chat.tsx
+++ b/src/app/(app)/chat.tsx
@@ -66,7 +66,7 @@ function ChannelRow({ channel, onPress }: { channel: ChatChannelResultData; onPr
           ) : null}
         </VStack>
         {unread ? (
-          <Badge className="rounded-full bg-primary-600" size="sm">
+          <Badge className="rounded-full bg-primary-600 dark:bg-primary-400" size="sm">
             <BadgeText className="text-white">{channel.UnreadCount > 99 ? '99+' : String(channel.UnreadCount)}</BadgeText>
           </Badge>
         ) : null}
diff --git a/src/app/(app)/chatbot.tsx b/src/app/(app)/chatbot.tsx
index 5f1947c0..0067e440 100644
--- a/src/app/(app)/chatbot.tsx
+++ b/src/app/(app)/chatbot.tsx
@@ -1,5 +1,6 @@
 import { Redirect, useFocusEffect } from 'expo-router';
 import { RefreshCw, Send, Sparkles } from 'lucide-react-native';
+import { useColorScheme } from 'nativewind';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWindowDimensions } from 'react-native';
@@ -30,6 +31,7 @@ import { useToastStore } from '@/stores/toast/store';
 
 export default function ChatbotScreen() {
   const { t } = useTranslation();
+  const { colorScheme } = useColorScheme();
   // The assistant is a hidden tab, so the tab bar still sits below it and the keyboard
   // already covers that strip — pad for the remainder only.
   const insets = useSafeAreaInsets();
@@ -117,7 +119,7 @@ export default function ChatbotScreen() {
           </VStack>
         </HStack>
         <Pressable className="flex-row items-center rounded-full bg-purple-100 px-3 py-1 dark:bg-purple-900" onPress={() => useChatStore.getState().newChatbotSession()} accessibilityLabel={t('chatbot.new_session')}>
-          <RefreshCw size={14} color="#7c3aed" />
+          <RefreshCw size={14} color={colorScheme === 'dark' ? '#d8b4fe' : '#7c3aed'} />
           <Text className="ml-1 text-xs font-medium text-purple-700 dark:text-purple-300">{t('chatbot.new_session')}</Text>
         </Pressable>
       </HStack>
@@ -156,7 +158,7 @@ export default function ChatbotScreen() {
             </Input>
           </Box>
           <Pressable className={`rounded-full p-2 ${text.trim() ? 'bg-purple-600' : 'bg-background-300'}`} onPress={send} disabled={!text.trim()} accessibilityLabel={t('chat.send')}>
-            <Send size={20} color="#ffffff" />
+            <Send size={20} color={text.trim() || colorScheme === 'dark' ? '#ffffff' : '#737373'} />
           </Pressable>
         </HStack>
       </BottomAnchoredKeyboardView>
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index f44e09ff..a596878c 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -32,7 +32,7 @@ import { StatusBottomSheet } from '@/components/status/status-bottom-sheet';
 import { ToastContainer } from '@/components/toast/toast-container';
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
 import { loadKeepAliveState } from '@/lib/hooks/use-keep-alive';
-import { loadSelectedTheme } from '@/lib/hooks/use-selected-theme';
+import { loadSelectedTheme, useSelectedTheme } from '@/lib/hooks/use-selected-theme';
 import { logger } from '@/lib/logging';
 import { registerNavigationReadyCheck } from '@/lib/navigation';
 import { getDeviceUuid, setDeviceUuid } from '@/lib/storage/app';
@@ -224,10 +224,13 @@ function Providers({ children }: { children: React.ReactNode }) {
   // nativewind's hook (not react-native's) so manually selected themes are
   // reflected on web, where Appearance only tracks the system preference.
   const { colorScheme } = useColorScheme();
+  // The provider gets the user's choice, not the resolved scheme: handing it the resolved 'light' or 'dark'
+  // pinned Appearance to that value, so a 'system' choice stopped following the OS until a restart.
+  const { selectedTheme } = useSelectedTheme();
 
   const renderContent = () => (
     <APIProvider>
-      <GluestackUIProvider mode={(colorScheme ?? 'light') as 'light' | 'dark'}>
+      <GluestackUIProvider mode={selectedTheme}>
         <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
           <BottomSheetModalProvider>
             {children}
diff --git a/src/app/call/[id].tsx b/src/app/call/[id].tsx
index 99a5152c..d2839df5 100644
--- a/src/app/call/[id].tsx
+++ b/src/app/call/[id].tsx
@@ -493,10 +493,10 @@ export default function CallDetail() {
                   <Box key={index} className="rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
                     <Text className="font-semibold">{dispatched.Name}</Text>
                     <HStack className="mt-1">
-                      <Text className="mr-2 text-sm text-gray-600">
+                      <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
                         {t('call_detail.group')}: {dispatched.Group}
                       </Text>
-                      <Text className="text-sm text-gray-600">
+                      <Text className="text-sm text-gray-600 dark:text-gray-400">
                         {t('call_detail.type')}: {dispatched.Type}
                       </Text>
                     </HStack>
@@ -527,7 +527,7 @@ export default function CallDetail() {
                       {/* Marks a status the sender did not link to this call themselves (auto-linked / inferred). */}
                       <ActivityLinkMarker source={event.DestinationSource} />
                     </HStack>
-                    <Text className="text-sm text-gray-600">
+                    <Text className="text-sm text-gray-600 dark:text-gray-400">
                       {event.Name} - {event.Group}
                     </Text>
                     <Text className="text-xs text-gray-500">{new Date(event.Timestamp).toLocaleString()}</Text>
diff --git a/src/app/call/new/index.tsx b/src/app/call/new/index.tsx
index c8acca61..57e33825 100644
--- a/src/app/call/new/index.tsx
+++ b/src/app/call/new/index.tsx
@@ -697,7 +697,7 @@ export default function NewCall() {
                   <ButtonText>{t('common.cancel')}</ButtonText>
                 </Button>
                 <Button className="ml-10 flex-1" variant="solid" action="primary" isDisabled={!fieldPolicy.isLoaded || isSubmitting} onPress={handleSubmit(onSubmit)} testID="create-call-button">
-                  {isSubmitting ? <ButtonSpinner className="mr-2" /> : <PlusIcon size={18} className="mr-2" />}
+                  {isSubmitting ? <ButtonSpinner className="mr-2" /> : <PlusIcon size={18} className="mr-2 text-typography-0" />}
                   <ButtonText>{isSubmitting ? t('common.submitting') : t('calls.create')}</ButtonText>
                 </Button>
               </Box>
diff --git a/src/app/chat/[channelId].tsx b/src/app/chat/[channelId].tsx
index 09ddadeb..489fce30 100644
--- a/src/app/chat/[channelId].tsx
+++ b/src/app/chat/[channelId].tsx
@@ -332,9 +332,9 @@ export default function ChannelConversationScreen() {
 
         {/* Unit-app identity chip: shows which unit the current user is chatting as. */}
         {activeUnit ? (
-          <HStack className="mx-3 mb-1 items-center self-start rounded-full bg-primary-50 px-3 py-1 dark:bg-primary-950" space="xs">
+          <HStack className="mx-3 mb-1 items-center self-start rounded-full bg-primary-50 px-3 py-1" space="xs">
             <Circle size={8} color="#2563eb" fill="#2563eb" />
-            <Text className="text-xs font-medium text-primary-700 dark:text-primary-300">{t('chat.chatting_as', { name: activeUnit.Name })}</Text>
+            <Text className="text-xs font-medium text-primary-700">{t('chat.chatting_as', { name: activeUnit.Name })}</Text>
           </HStack>
         ) : null}
 
diff --git a/src/app/login/login-form.tsx b/src/app/login/login-form.tsx
index 8718c9ef..13a8ca4f 100644
--- a/src/app/login/login-form.tsx
+++ b/src/app/login/login-form.tsx
@@ -197,7 +197,7 @@ export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = unde
           ) : null}
           {onSsoPress ? (
             <Button className="flex-1" variant="outline" action="secondary" size="sm" onPress={onSsoPress}>
-              <ShieldCheck size={14} style={{ marginRight: 4 }} />
+              <ShieldCheck size={14} className="text-typography-500" style={{ marginRight: 4 }} />
               <ButtonText className="text-xs">{t('login.sso_button')}</ButtonText>
             </Button>
           ) : null}
@@ -206,7 +206,7 @@ export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = unde
         {/* Shared vehicle device: every sign-in here starts a shared session that locks between operators */}
         {onSharedDevicePress ? (
           <Button className="mt-2 self-center" variant="link" action="secondary" size="sm" onPress={onSharedDevicePress} testID="login-shared-device">
-            <Truck size={14} style={{ marginRight: 4 }} />
+            <Truck size={14} className="text-typography-500" style={{ marginRight: 4 }} />
             <ButtonText className="text-xs">
               {!sharedDevice?.configured
                 ? t('shared_session.device_setup')
diff --git a/src/app/login/sso.tsx b/src/app/login/sso.tsx
index bc71bcd3..d9e5e823 100644
--- a/src/app/login/sso.tsx
+++ b/src/app/login/sso.tsx
@@ -253,7 +253,7 @@ export default function SsoLogin() {
           {/* Back button */}
           <View className="mb-4 mt-2">
             <Button variant="link" action="secondary" onPress={() => router.back()} className="self-start">
-              <ArrowLeft size={18} className="mr-1" />
+              <ArrowLeft size={18} className="mr-1 text-typography-500" />
               <ButtonText className="text-sm">{t('common.back')}</ButtonText>
             </Button>
           </View>
@@ -344,7 +344,7 @@ export default function SsoLogin() {
                 </Button>
               ) : (
                 <Button className="w-full" variant="solid" action="primary" onPress={handleSsoPress} accessibilityLabel={t('login.sso_button')}>
-                  <ShieldCheck size={18} color="#fff" style={{ marginRight: 8 }} />
+                  <ShieldCheck size={18} className="text-typography-0" style={{ marginRight: 8 }} />
                   <ButtonText>{t('login.sso_button')}</ButtonText>
                 </Button>
               )}
diff --git a/src/app/routes/active.tsx b/src/app/routes/active.tsx
index fc9355f3..acdb5583 100644
--- a/src/app/routes/active.tsx
+++ b/src/app/routes/active.tsx
@@ -380,7 +380,7 @@ export default function ActiveRouteScreen() {
           <Box className="mx-4 mt-4">
             <Button className="bg-red-500" onPress={handleEndRoute}>
               <Icon as={LogOut} size="sm" className="mr-2 text-white" />
-              <ButtonText>{t('routes.end_route')}</ButtonText>
+              <ButtonText className="text-white">{t('routes.end_route')}</ButtonText>
             </Button>
           </Box>
         </ScrollView>
@@ -394,13 +394,23 @@ export default function ActiveRouteScreen() {
               {t('routes.skip')} — {currentStop?.Name}
             </Text>
             <Text className="mb-3 text-sm text-gray-500 dark:text-gray-400">{t('routes.skip_reason')}</Text>
-            <TextInput value={skipReason} onChangeText={setSkipReason} placeholder={t('routes.skip_reason_placeholder')} placeholderTextColor="#9ca3af" multiline numberOfLines={3} style={styles.skipInput} autoFocus />
+            <TextInput
+              value={skipReason}
+              onChangeText={setSkipReason}
+              placeholder={t('routes.skip_reason_placeholder')}
+              placeholderTextColor="#9ca3af"
+              multiline
+              numberOfLines={3}
+              style={styles.skipInput}
+              className="border-gray-300 text-gray-900 dark:border-gray-600 dark:text-white"
+              autoFocus
+            />
             <HStack className="mt-4 gap-3">
               <TouchableOpacity style={styles.cancelBtn} onPress={() => setSkipModalVisible(false)}>
                 <Text className="text-center text-sm font-medium text-gray-700 dark:text-gray-300">{t('common.cancel')}</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.skipBtn} onPress={handleSkipConfirm}>
-                <Text className="text-center text-sm font-semibold text-white">{t('routes.skip')}</Text>
+                <Text className="text-center text-sm font-semibold text-gray-900">{t('routes.skip')}</Text>
               </TouchableOpacity>
             </HStack>
           </Box>
@@ -416,11 +426,9 @@ const styles = StyleSheet.create({
   },
   skipInput: {
     borderWidth: 1,
-    borderColor: '#d1d5db',
     borderRadius: 8,
     padding: 10,
     fontSize: 14,
-    color: '#111827',
     textAlignVertical: 'top',
     minHeight: 80,
   },
diff --git a/src/app/routes/directions.tsx b/src/app/routes/directions.tsx
index b9f62e58..f0f05869 100644
--- a/src/app/routes/directions.tsx
+++ b/src/app/routes/directions.tsx
@@ -709,7 +709,7 @@ export default function RouteDirectionsScreen() {
 
         {/* Loading overlay while fetching driving directions */}
         {isFetchingDirections ? (
-          <View style={styles.fetchingOverlay}>
+          <View style={styles.fetchingOverlay} className="bg-background-0/90">
             <ActivityIndicator size="small" color="#3b82f6" />
             <Text className="ml-2 text-xs text-typography-500">{t('routes.fetching_directions')}</Text>
           </View>
@@ -877,7 +877,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.9)',
     paddingVertical: 6,
     marginHorizontal: 60,
     borderRadius: 20,
diff --git a/src/app/routes/poi/[id].tsx b/src/app/routes/poi/[id].tsx
index 49e1ce7e..f4ce31d8 100644
--- a/src/app/routes/poi/[id].tsx
+++ b/src/app/routes/poi/[id].tsx
@@ -111,8 +111,8 @@ export default function PoiDetailScreen() {
 
           <VStack space="sm">
             <Button onPress={handleRoute} className="bg-blue-600">
-              <ButtonIcon as={Navigation} />
-              <ButtonText>{t('routes.route_to_poi')}</ButtonText>
+              <ButtonIcon as={Navigation} className="text-white" />
+              <ButtonText className="text-white">{t('routes.route_to_poi')}</ButtonText>
             </Button>
             {destinationEnabled ? (
               <Button onPress={handleSetDestination} variant="outline">
diff --git a/src/app/routes/stop/[id].tsx b/src/app/routes/stop/[id].tsx
index c7d4ecc6..d043646a 100644
--- a/src/app/routes/stop/[id].tsx
+++ b/src/app/routes/stop/[id].tsx
@@ -277,7 +277,7 @@ export default function StopDetailScreen() {
                   <Text className="text-sm font-semibold">{t('routes.contact')}</Text>
                   <Text className="text-xs text-typography-500">{t('routes.contact_details')}</Text>
                 </VStack>
-                <Text className="text-primary-500">{t('calls.view_details')}</Text>
+                <Text className="text-primary-600">{t('calls.view_details')}</Text>
               </HStack>
             </Box>
           </Pressable>
@@ -309,9 +309,9 @@ export default function StopDetailScreen() {
             </Button>
           )}
           {canSkip && (
-            <Button size="lg" variant="outline" action="warning" onPress={handleSkip}>
-              <ButtonIcon as={SkipForwardIcon} className="mr-2" />
-              <ButtonText>{t('routes.skip')}</ButtonText>
+            <Button size="lg" variant="outline" className="border-amber-500" onPress={handleSkip}>
+              <ButtonIcon as={SkipForwardIcon} className="mr-2 text-amber-600 dark:text-amber-400" />
+              <ButtonText className="text-amber-600 dark:text-amber-400">{t('routes.skip')}</ButtonText>
             </Button>
           )}
           {stop.Status === RouteStopStatus.Completed && (
@@ -334,13 +334,23 @@ export default function StopDetailScreen() {
               {t('routes.skip')} — {stop.Name}
             </Text>
             <Text className="mb-3 text-sm text-gray-500 dark:text-gray-400">{t('routes.skip_reason')}</Text>
-            <TextInput value={skipReason} onChangeText={setSkipReason} placeholder={t('routes.skip_reason_placeholder')} placeholderTextColor="#9ca3af" multiline numberOfLines={3} style={styles.skipInput} autoFocus />
+            <TextInput
+              value={skipReason}
+              onChangeText={setSkipReason}
+              placeholder={t('routes.skip_reason_placeholder')}
+              placeholderTextColor="#9ca3af"
+              multiline
+              numberOfLines={3}
+              style={styles.skipInput}
+              className="border-gray-300 text-gray-900 dark:border-gray-600 dark:text-white"
+              autoFocus
+            />
             <HStack className="mt-4 gap-3">
               <TouchableOpacity style={styles.cancelBtn} onPress={() => setSkipModalVisible(false)}>
                 <Text className="text-center text-sm font-medium text-gray-700 dark:text-gray-300">{t('common.cancel')}</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.skipBtn} onPress={handleSkipConfirm}>
-                <Text className="text-center text-sm font-semibold text-white">{t('routes.skip')}</Text>
+                <Text className="text-center text-sm font-semibold text-gray-900">{t('routes.skip')}</Text>
               </TouchableOpacity>
             </HStack>
           </Box>
@@ -360,11 +370,9 @@ const styles = StyleSheet.create({
   },
   skipInput: {
     borderWidth: 1,
-    borderColor: '#d1d5db',
     borderRadius: 8,
     padding: 10,
     fontSize: 14,
-    color: '#111827',
     textAlignVertical: 'top',
     minHeight: 80,
   },
diff --git a/src/app/routes/stop/contact.tsx b/src/app/routes/stop/contact.tsx
index 418dde24..a8c7f078 100644
--- a/src/app/routes/stop/contact.tsx
+++ b/src/app/routes/stop/contact.tsx
@@ -175,7 +175,7 @@ export default function StopContactScreen() {
           <Box className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-primary-100">{contact.CompanyName ? <BuildingIcon size={28} color="#3b82f6" /> : <UserIcon size={28} color="#3b82f6" />}</Box>
           <Heading size="lg">{displayName}</Heading>
           {contact.CompanyName && contact.FirstName && <Text className="mt-1 text-sm text-typography-500">{[contact.FirstName, contact.LastName].filter(Boolean).join(' ')}</Text>}
-          {contact.Email && <Text className="mt-1 text-sm text-primary-500">{contact.Email}</Text>}
+          {contact.Email && <Text className="mt-1 text-sm text-primary-600">{contact.Email}</Text>}
         </Box>
 
         {/* Phone numbers */}
diff --git a/src/components/auth/login-mfa-sheet.tsx b/src/components/auth/login-mfa-sheet.tsx
index 1f39102f..c04c8fb4 100644
--- a/src/components/auth/login-mfa-sheet.tsx
+++ b/src/components/auth/login-mfa-sheet.tsx
@@ -229,7 +229,7 @@ export const LoginMfaSheet: React.FC<LoginMfaSheetProps> = ({ isOpen, onLostFact
 
             {!approval && showsCodeInput ? (
               <Button action="primary" onPress={submitCode} isDisabled={busy || code.trim().length === 0} testID="login-mfa-submit">
-                {busy ? <Spinner size="small" /> : <ButtonText>{t('mfa.login.verify')}</ButtonText>}
+                {busy ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('mfa.login.verify')}</ButtonText>}
               </Button>
             ) : null}
 
diff --git a/src/components/auth/login-otp-modal.tsx b/src/components/auth/login-otp-modal.tsx
index 8181d074..3680b090 100644
--- a/src/components/auth/login-otp-modal.tsx
+++ b/src/components/auth/login-otp-modal.tsx
@@ -86,7 +86,7 @@ export const LoginOtpModal: React.FC<LoginOtpModalProps> = ({ isOpen, isSubmitti
             <ButtonText>{t('common.cancel', 'Cancel')}</ButtonText>
           </Button>
           <Button action="primary" onPress={handleSubmit} isDisabled={isSubmitting || code.trim().length === 0} testID="login-otp-submit">
-            {isSubmitting ? <Spinner size="small" /> : <ButtonText>{t('login.otp_verify', 'Verify')}</ButtonText>}
+            {isSubmitting ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('login.otp_verify', 'Verify')}</ButtonText>}
           </Button>
         </ModalFooter>
       </ModalContent>
diff --git a/src/components/bluetooth/bluetooth-audio-modal.tsx b/src/components/bluetooth/bluetooth-audio-modal.tsx
deleted file mode 100644
index 7fc73aed..00000000
--- a/src/components/bluetooth/bluetooth-audio-modal.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-import { AlertTriangle, Bluetooth, BluetoothConnected, CheckCircle, Mic, MicOff, RefreshCw, Signal, Wifi } from 'lucide-react-native';
-import React, { useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
-
-import { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper } from '@/components/ui/actionsheet';
-import { Badge } from '@/components/ui/badge';
-import { Box } from '@/components/ui/box';
-import { Button, ButtonText } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-import { Heading } from '@/components/ui/heading';
-import { HStack } from '@/components/ui/hstack';
-import { Spinner } from '@/components/ui/spinner';
-import { Text } from '@/components/ui/text';
-import { VStack } from '@/components/ui/vstack';
-import { bluetoothAudioService } from '@/services/bluetooth-audio.service';
-import { type BluetoothAudioDevice, State, useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
-import { useLiveKitStore } from '@/stores/app/livekit-store';
-
-interface BluetoothAudioModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const BluetoothAudioModal: React.FC<BluetoothAudioModalProps> = ({ isOpen, onClose }) => {
-  const bluetoothState = useBluetoothAudioStore((s) => s.bluetoothState);
-  const isScanning = useBluetoothAudioStore((s) => s.isScanning);
-  const isConnecting = useBluetoothAudioStore((s) => s.isConnecting);
-  const availableDevices = useBluetoothAudioStore((s) => s.availableDevices);
-  const connectedDevice = useBluetoothAudioStore((s) => s.connectedDevice);
-  const connectionError = useBluetoothAudioStore((s) => s.connectionError);
-  const isAudioRoutingActive = useBluetoothAudioStore((s) => s.isAudioRoutingActive);
-  const buttonEvents = useBluetoothAudioStore((s) => s.buttonEvents);
-  const lastButtonAction = useBluetoothAudioStore((s) => s.lastButtonAction);
-
-  const isLiveKitConnected = useLiveKitStore((s) => s.isConnected);
-  const currentRoom = useLiveKitStore((s) => s.currentRoom);
-  const [isMicMuted, setIsMicMuted] = useState(false);
-
-  const handleStartScan = React.useCallback(async () => {
-    try {
-      await bluetoothAudioService.startScanning(15000); // 15 second scan
-    } catch (error) {
-      console.error('Failed to start Bluetooth scan:', error);
-    }
-  }, []);
-
-  useEffect(() => {
-    // Update mic state from LiveKit
-    if (currentRoom?.localParticipant) {
-      setIsMicMuted(!currentRoom.localParticipant.isMicrophoneEnabled);
-    }
-  }, [currentRoom?.localParticipant, currentRoom?.localParticipant?.isMicrophoneEnabled]);
-
-  useEffect(() => {
-    // Auto-start scanning when modal opens and Bluetooth is ready
-    if (isOpen && bluetoothState === State.PoweredOn && !isScanning && !connectedDevice) {
-      handleStartScan().catch((error) => {
-        console.error('Failed to start scan:', error);
-      });
-    }
-  }, [isOpen, bluetoothState, isScanning, connectedDevice, handleStartScan]);
-
-  const handleStopScan = React.useCallback(() => {
-    bluetoothAudioService.stopScanning();
-  }, []);
-
-  const handleConnectDevice = React.useCallback(
-    async (device: BluetoothAudioDevice) => {
-      if (isConnecting) return;
-
-      try {
-        await bluetoothAudioService.connectToDevice(device.id);
-      } catch (error) {
-        console.error('Failed to connect to device:', error);
-      }
-    },
-    [isConnecting]
-  );
-
-  const handleDisconnectDevice = React.useCallback(async () => {
-    try {
-      await bluetoothAudioService.disconnectDevice();
-    } catch (error) {
-      console.error('Failed to disconnect device:', error);
-    }
-  }, []);
-
-  const handleToggleMicrophone = React.useCallback(async () => {
-    if (!currentRoom?.localParticipant) return;
-
-    try {
-      const newMuteState = !isMicMuted;
-      await currentRoom.localParticipant.setMicrophoneEnabled(!newMuteState);
-      setIsMicMuted(newMuteState);
-    } catch (error) {
-      console.error('Failed to toggle microphone:', error);
-    }
-  }, [currentRoom?.localParticipant, isMicMuted]);
-
-  const renderBluetoothState = () => {
-    switch (bluetoothState) {
-      case State.PoweredOff:
-        return (
-          <VStack space="md" className="items-center p-4">
-            <AlertTriangle size={48} color="orange" />
-            <Text className="text-center">Bluetooth is turned off. Please enable Bluetooth to connect audio devices.</Text>
-          </VStack>
-        );
-      case State.Unauthorized:
-        return (
-          <VStack space="md" className="items-center p-4">
-            <AlertTriangle size={48} color="red" />
-            <Text className="text-center">Bluetooth permission denied. Please grant Bluetooth permissions in Settings.</Text>
-          </VStack>
-        );
-      case State.PoweredOn:
-        return null;
-      default:
-        return (
-          <VStack space="md" className="items-center p-4">
-            <Spinner size="large" />
-            <Text className="text-center">Checking Bluetooth status...</Text>
-          </VStack>
-        );
-    }
-  };
-
-  const renderConnectionError = () => {
-    if (!connectionError) return null;
-
-    return (
-      <Card className="mb-4 border-red-200 bg-red-50 p-4">
-        <HStack space="sm" className="items-center">
-          <AlertTriangle size={20} color="red" />
-          <VStack className="flex-1">
-            <Text className="font-medium text-red-700">Connection Error</Text>
-            <Text className="text-sm text-red-600">{connectionError}</Text>
-          </VStack>
-        </HStack>
-      </Card>
-    );
-  };
-
-  const renderConnectedDevice = () => {
-    if (!connectedDevice) return null;
-
-    return (
-      <Card className="mb-4 border-green-200 bg-green-50 p-4">
-        <HStack space="md" className="items-center justify-between">
-          <HStack space="sm" className="flex-1 items-center">
-            <BluetoothConnected size={24} color="green" />
-            <VStack className="flex-1">
-              <Text className="font-medium text-green-700">{connectedDevice.name || 'Unknown Device'}</Text>
-              <HStack space="xs" className="items-center">
-                <Text className="text-sm text-green-600">Connected</Text>
-                {isAudioRoutingActive ? (
-                  <Badge variant="outline" className="ml-2">
-                    <Text className="text-xs">Audio Active</Text>
-                  </Badge>
-                ) : null}
-              </HStack>
-              {connectedDevice.supportsMicrophoneControl ? <Text className="text-xs text-green-600">Button control available</Text> : null}
-            </VStack>
-          </HStack>
-
-          <VStack space="xs" className="items-end">
-            {isLiveKitConnected ? (
-              <Button onPress={handleToggleMicrophone} variant="outline" size="sm">
-                {isMicMuted ? <MicOff size={16} color="red" /> : <Mic size={16} color="green" />}
-                <ButtonText className="ml-1">{isMicMuted ? 'Unmute' : 'Mute'}</ButtonText>
-              </Button>
-            ) : null}
-
-            <Button onPress={handleDisconnectDevice} variant="outline" action="secondary" size="sm">
-              <ButtonText>Disconnect</ButtonText>
-            </Button>
-          </VStack>
-        </HStack>
-      </Card>
-    );
-  };
-
-  const renderRecentButtonEvents = () => {
-    if (buttonEvents.length === 0) return null;
-
-    const recentEvents = buttonEvents.slice(0, 3);
-
-    return (
-      <Card className="mb-4 p-4">
-        <Heading size="sm" className="mb-2">
-          Recent Button Events
-        </Heading>
-        <VStack space="xs">
-          {recentEvents.map((event, index) => (
-            <HStack key={`${event.timestamp}-${index}`} space="sm" className="items-center">
-              <Text className="text-xs text-gray-500">{new Date(event.timestamp).toLocaleTimeString()}</Text>
-              <Text className="text-sm">
-                {event.type === 'long_press' ? 'Long ' : event.type === 'double_press' ? 'Double ' : ''}
-                {event.button === 'ptt_start'
-                  ? 'PTT Start'
-                  : event.button === 'ptt_stop'
-                    ? 'PTT Stop'
-                    : event.button === 'mute'
-                      ? 'Mute'
-                      : event.button === 'volume_up'
-                        ? 'Volume +'
-                        : event.button === 'volume_down'
-                          ? 'Volume -'
-                          : 'Unknown'}
-              </Text>
-              {lastButtonAction && lastButtonAction.timestamp === event.timestamp ? (
-                <Badge variant="outline" size="sm">
-                  <Text className="text-xs">Applied</Text>
-                </Badge>
-              ) : null}
-            </HStack>
-          ))}
-        </VStack>
-      </Card>
-    );
-  };
-
-  const renderDeviceList = () => {
-    if (availableDevices.length === 0 && !isScanning) {
-      return (
-        <VStack space="md" className="items-center p-4">
-          <Bluetooth size={48} color="gray" />
-          <Text className="text-center text-gray-500">No audio devices found</Text>
-          <Button onPress={handleStartScan} variant="outline">
-            <RefreshCw size={16} />
-            <ButtonText className="ml-2">Start Scanning</ButtonText>
-          </Button>
-        </VStack>
-      );
-    }
-
-    return (
-      <VStack space="md">
-        <HStack className="items-center justify-between">
-          <Heading size="md">Available Devices</Heading>
-          <Button onPress={isScanning ? handleStopScan : handleStartScan} variant="outline" size="sm" isDisabled={isConnecting}>
-            {isScanning ? (
-              <>
-                <Spinner size="small" />
-                <ButtonText className="ml-2">Stop Scan</ButtonText>
-              </>
-            ) : (
-              <>
-                <RefreshCw size={16} />
-                <ButtonText className="ml-2">Scan</ButtonText>
-              </>
-            )}
-          </Button>
-        </HStack>
-
-        <ScrollView style={{ maxHeight: 200 }}>
-          <VStack space="sm">
-            {availableDevices.map((device) => (
-              <Card key={device.id} className={`p-4 ${device.isConnected ? 'border-green-200 bg-green-50' : 'border-gray-200'}`}>
-                <HStack space="md" className="items-center justify-between">
-                  <HStack space="sm" className="flex-1 items-center">
-                    <Bluetooth size={20} color={device.isConnected ? 'green' : 'gray'} />
-                    <VStack className="flex-1">
-                      <Text className="font-medium">{device.name || 'Unknown Device'}</Text>
-                      <HStack space="xs" className="items-center">
-                        {device.rssi ? (
-                          <>
-                            <Signal size={12} color="gray" />
-                            <Text className="text-xs text-gray-500">{device.rssi} dBm</Text>
-                          </>
-                        ) : null}
-                        {device.hasAudioCapability ? (
-                          <Badge variant="outline" size="sm">
-                            <Text className="text-xs">Audio</Text>
-                          </Badge>
-                        ) : null}
-                        {device.supportsMicrophoneControl ? (
-                          <Badge variant="outline" size="sm">
-                            <Text className="text-xs">Mic Control</Text>
-                          </Badge>
-                        ) : null}
-                      </HStack>
-                    </VStack>
-                  </HStack>
-
-                  {!device.isConnected ? (
-                    <Button onPress={() => handleConnectDevice(device)} size="sm" isDisabled={isConnecting}>
-                      {isConnecting ? <Spinner size="small" /> : <ButtonText>Connect</ButtonText>}
-                    </Button>
-                  ) : (
-                    <HStack space="xs" className="items-center">
-                      <CheckCircle size={16} color="green" />
-                      <Text className="text-sm text-green-600">Connected</Text>
-                    </HStack>
-                  )}
-                </HStack>
-              </Card>
-            ))}
-          </VStack>
-        </ScrollView>
-      </VStack>
-    );
-  };
-
-  const bluetoothStateError = renderBluetoothState();
-
-  return (
-    <Actionsheet isOpen={isOpen} onClose={onClose} snapPoints={[60]}>
-      <ActionsheetBackdrop />
-      <ActionsheetContent className="bg-white px-4 py-2 dark:bg-gray-800">
-        <ActionsheetDragIndicatorWrapper>
-          <ActionsheetDragIndicator />
-        </ActionsheetDragIndicatorWrapper>
-
-        <VStack space="lg" className="w-full py-4">
-          <HStack className="items-center justify-between">
-            <Heading size="xl">Bluetooth Audio</Heading>
-            {connectedDevice && isLiveKitConnected ? (
-              <Badge variant="outline">
-                <Wifi size={12} />
-                <Text className="ml-1 text-xs">LiveKit Active</Text>
-              </Badge>
-            ) : null}
-          </HStack>
-
-          <Box className="min-h-[400px]">
-            {bluetoothStateError ? (
-              bluetoothStateError
-            ) : (
-              <VStack space="md">
-                {renderConnectionError()}
-                {renderConnectedDevice()}
-                {renderRecentButtonEvents()}
-                {renderDeviceList()}
-              </VStack>
-            )}
-          </Box>
-        </VStack>
-      </ActionsheetContent>
-    </Actionsheet>
-  );
-};
-
-export default BluetoothAudioModal;
diff --git a/src/components/call-video-feeds/video-feed-form-sheet.tsx b/src/components/call-video-feeds/video-feed-form-sheet.tsx
index 319aae5c..b7f303e6 100644
--- a/src/components/call-video-feeds/video-feed-form-sheet.tsx
+++ b/src/components/call-video-feeds/video-feed-form-sheet.tsx
@@ -152,14 +152,14 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
 
           {/* Name */}
           <VStack space="xs">
-            <Text className="text-sm font-medium text-gray-600">{t('video_feeds.name')} *</Text>
+            <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.name')} *</Text>
             <Controller
               control={control}
               name="Name"
               rules={{ required: true }}
               render={({ field: { onChange, value } }) => (
                 <Box className="rounded-lg border border-outline-200 p-2">
-                  <TextInput value={value} onChangeText={onChange} placeholder={t('video_feeds.name')} />
+                  <TextInput className="text-typography-900" value={value} onChangeText={onChange} placeholder={t('video_feeds.name')} />
                 </Box>
               )}
             />
@@ -167,14 +167,14 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
 
           {/* URL */}
           <VStack space="xs">
-            <Text className="text-sm font-medium text-gray-600">{t('video_feeds.url')} *</Text>
+            <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.url')} *</Text>
             <Controller
               control={control}
               name="Url"
               rules={{ required: true }}
               render={({ field: { onChange, value } }) => (
                 <Box className="rounded-lg border border-outline-200 p-2">
-                  <TextInput value={value} onChangeText={onChange} onBlur={() => handleUrlBlur(value)} placeholder="https://" autoCapitalize="none" keyboardType="url" />
+                  <TextInput className="text-typography-900" value={value} onChangeText={onChange} onBlur={() => handleUrlBlur(value)} placeholder="https://" autoCapitalize="none" keyboardType="url" />
                 </Box>
               )}
             />
@@ -182,7 +182,7 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
 
           {/* Feed Type */}
           <VStack space="xs">
-            <Text className="text-sm font-medium text-gray-600">{t('video_feeds.feed_type')}</Text>
+            <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.feed_type')}</Text>
             <HStack className="flex-wrap" space="sm">
               {FEED_TYPES.map((type) => (
                 <Button key={type.value} variant={selectedFeedType === type.value ? 'solid' : 'outline'} size="sm" onPress={() => setValue('FeedType', type.value)} className="mb-1">
@@ -194,7 +194,7 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
 
           {/* Feed Format */}
           <VStack space="xs">
-            <Text className="text-sm font-medium text-gray-600">{t('video_feeds.feed_format')}</Text>
+            <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.feed_format')}</Text>
             <HStack className="flex-wrap" space="sm">
               {FEED_FORMATS.map((fmt) => (
                 <Button key={fmt.value} variant={selectedFeedFormat === fmt.value ? 'solid' : 'outline'} size="sm" onPress={() => setValue('FeedFormat', fmt.value)} className="mb-1">
@@ -206,13 +206,21 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
 
           {/* Description */}
           <VStack space="xs">
-            <Text className="text-sm font-medium text-gray-600">{t('video_feeds.description')}</Text>
+            <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.description')}</Text>
             <Controller
               control={control}
               name="Description"
               render={({ field: { onChange, value } }) => (
                 <Box className="rounded-lg border border-outline-200 p-2">
-                  <TextInput value={value} onChangeText={onChange} placeholder={t('video_feeds.description')} multiline numberOfLines={3} style={{ minHeight: 60, textAlignVertical: 'top' }} />
+                  <TextInput
+                    className="text-typography-900"
+                    value={value}
+                    onChangeText={onChange}
+                    placeholder={t('video_feeds.description')}
+                    multiline
+                    numberOfLines={3}
+                    style={{ minHeight: 60, textAlignVertical: 'top' }}
+                  />
                 </Box>
               )}
             />
@@ -221,25 +229,25 @@ export const VideoFeedFormSheet: React.FC<VideoFeedFormSheetProps> = ({ isOpen,
           {/* Latitude / Longitude */}
           <HStack space="md">
             <VStack space="xs" className="flex-1">
-              <Text className="text-sm font-medium text-gray-600">{t('video_feeds.latitude')}</Text>
+              <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.latitude')}</Text>
               <Controller
                 control={control}
                 name="Latitude"
                 render={({ field: { onChange, value } }) => (
                   <Box className="rounded-lg border border-outline-200 p-2">
-                    <TextInput value={value} onChangeText={onChange} placeholder="0.0" keyboardType="numeric" />
+                    <TextInput className="text-typography-900" value={value} onChangeText={onChange} placeholder="0.0" keyboardType="numeric" />
                   </Box>
                 )}
               />
             </VStack>
             <VStack space="xs" className="flex-1">
-              <Text className="text-sm font-medium text-gray-600">{t('video_feeds.longitude')}</Text>
+              <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('video_feeds.longitude')}</Text>
               <Controller
                 control={control}
                 name="Longitude"
                 render={({ field: { onChange, value } }) => (
                   <Box className="rounded-lg border border-outline-200 p-2">
-                    <TextInput value={value} onChangeText={onChange} placeholder="0.0" keyboardType="numeric" />
+                    <TextInput className="text-typography-900" value={value} onChangeText={onChange} placeholder="0.0" keyboardType="numeric" />
                   </Box>
                 )}
               />
diff --git a/src/components/calls/__tests__/call-card.test.tsx b/src/components/calls/__tests__/call-card.test.tsx
index 046a0dfe..fd7375ed 100644
--- a/src/components/calls/__tests__/call-card.test.tsx
+++ b/src/components/calls/__tests__/call-card.test.tsx
@@ -65,6 +65,34 @@ describe('CallCard', () => {
     unmount();
   });
 
+  it('picks the higher-contrast text colour for the priority background', () => {
+    const red = render(<CallCard call={baseCall} priority={priority} />);
+    expect(red.getByText('#2024-042').props.style).toEqual(expect.objectContaining({ color: '#000000' }));
+    red.unmount();
+
+    const navy = render(<CallCard call={baseCall} priority={{ Id: 2, Name: 'Low', Color: '#1e3a8a' } as never} />);
+    expect(navy.getByText('#2024-042').props.style).toEqual(expect.objectContaining({ color: '#FFFFFF' }));
+    navy.unmount();
+  });
+
+  it('picks the text colour for an rgb() priority colour', () => {
+    const { getByText, root, unmount } = render(<CallCard call={baseCall} priority={{ Id: 3, Name: 'Odd', Color: 'rgb(200, 0, 0)' } as never} />);
+
+    expect(root).toHaveStyle({ backgroundColor: 'rgb(200, 0, 0)' });
+    expect(getByText('#2024-042').props.style).toEqual(expect.objectContaining({ color: '#FFFFFF' }));
+
+    unmount();
+  });
+
+  it('draws the default grey behind the text when the priority colour cannot be read', () => {
+    const { getByText, root, unmount } = render(<CallCard call={baseCall} priority={{ Id: 4, Name: 'Odd', Color: 'hsl(0, 100%, 25%)' } as never} />);
+
+    expect(root).toHaveStyle({ backgroundColor: '#808080' });
+    expect(getByText('#2024-042').props.style).toEqual(expect.objectContaining({ color: '#000000' }));
+
+    unmount();
+  });
+
   it('still renders the core call fields', () => {
     const { getByText, unmount } = render(<CallCard call={baseCall} priority={priority} />);
 
diff --git a/src/components/calls/__tests__/location-history-panel.test.tsx b/src/components/calls/__tests__/location-history-panel.test.tsx
index b4c0cb3e..13fdba0c 100644
--- a/src/components/calls/__tests__/location-history-panel.test.tsx
+++ b/src/components/calls/__tests__/location-history-panel.test.tsx
@@ -30,6 +30,12 @@ jest.mock('lucide-react-native', () => {
   return { ChevronDownIcon: View, ChevronUpIcon: View, HistoryIcon: View, InfoIcon: View, LockIcon: View, MapPinIcon: View };
 });
 
+// ProtectedText draws its lock with the themed icon set.
+jest.mock('@/components/ui/lucide-icons', () => {
+  const { View } = jest.requireActual('react-native');
+  return { Lock: View };
+});
+
 jest.mock('@/lib/logging', () => ({
   logger: { error: jest.fn(), warn: jest.fn(), info: jest.fn(), debug: jest.fn() },
 }));
@@ -115,6 +121,20 @@ describe('LocationHistoryPanel', () => {
     expect(mockTrackEvent).toHaveBeenCalledWith('location_history_viewed', expect.objectContaining({ kind: 'call', id: '42', callCount: 2 }));
   });
 
+  it('pairs each priority badge with text that reads on it, falling back to grey for a colour it cannot read', async () => {
+    const yellow = { ...baseHistory.Calls[0], CallId: '7100', PriorityText: 'Caution', PriorityColor: 'rgb(255, 255, 0)' };
+    const unreadable = { ...baseHistory.Calls[0], CallId: '7200', PriorityText: 'Odd', PriorityColor: 'hsl(60, 100%, 50%)' };
+    mockCallHistory.mockResolvedValueOnce({ Data: { ...baseHistory, Calls: [yellow, unreadable] } } as never);
+
+    render(<LocationHistoryPanel source={{ kind: 'call', id: '42' }} />);
+
+    await waitFor(() => expect(screen.getByTestId('location-history-priority-7100')).toBeTruthy());
+    expect(screen.getByTestId('location-history-priority-7100')).toHaveStyle({ backgroundColor: 'rgb(255, 255, 0)' });
+    expect(screen.getByText('Caution')).toHaveStyle({ color: '#000000' });
+    expect(screen.getByTestId('location-history-priority-7200')).toHaveStyle({ backgroundColor: '#6b7280' });
+    expect(screen.getByText('Odd')).toHaveStyle({ color: '#FFFFFF' });
+  });
+
   it('shows a lock instead of the REDACTED sentinel for protected call text', async () => {
     mockCallHistory.mockResolvedValueOnce({ Data: baseHistory } as never);
 
diff --git a/src/components/calls/call-card.tsx b/src/components/calls/call-card.tsx
index e6c74e52..11b332ef 100644
--- a/src/components/calls/call-card.tsx
+++ b/src/components/calls/call-card.tsx
@@ -8,7 +8,7 @@ import { HStack } from '@/components/ui/hstack';
 import { Icon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
-import { getTimeAgoUtc, invertColor } from '@/lib/utils';
+import { getTimeAgoUtc, readableColors } from '@/lib/utils';
 import { type CallPriorityResultData } from '@/models/v4/callPriorities/callPriorityResultData';
 import type { CallResultData } from '@/models/v4/calls/callResultData';
 import type { DispatchedEventResultData } from '@/models/v4/calls/dispatchedEventResultData';
@@ -36,7 +36,7 @@ interface CallCardProps {
 
 export const CallCard: React.FC<CallCardProps> = React.memo(({ call, priority, showTimerIcon = false, isTimerOverdue = false, dispatches }) => {
   const { t } = useTranslation();
-  const textColor = invertColor(getColor(call, priority), true);
+  const { backgroundColor, textColor } = readableColors(getColor(call, priority));
   const pulseAnim = useRef(new Animated.Value(1)).current;
   const destinationLabel = call.DestinationName || call.DestinationAddress || '';
   // Nature is server-authored HTML; render it as stripped plain text here — a
@@ -59,14 +59,14 @@ export const CallCard: React.FC<CallCardProps> = React.memo(({ call, priority, s
   return (
     <Box
       style={{
-        backgroundColor: getColor(call, priority),
+        backgroundColor,
       }}
       className={`mb-2 rounded-xl p-2 shadow-xs`}
     >
       {/* Header with Call Number and Priority */}
       <HStack className="mb-4 items-center justify-between">
         <HStack className="items-center space-x-2">
-          <AlertTriangle size={20} />
+          <AlertTriangle size={20} color={textColor} />
           <Text
             style={{
               color: textColor,
diff --git a/src/components/calls/call-detail-menu.tsx b/src/components/calls/call-detail-menu.tsx
index 8c0bb4e4..55456056 100644
--- a/src/components/calls/call-detail-menu.tsx
+++ b/src/components/calls/call-detail-menu.tsx
@@ -1,4 +1,5 @@
 import { EditIcon, MoreVerticalIcon, XIcon } from 'lucide-react-native';
+import { useColorScheme } from 'nativewind';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Pressable as RNPressable, StyleSheet, View } from 'react-native';
@@ -32,6 +33,8 @@ const HeaderRightMenuButton = ({ onPress }: HeaderRightMenuButtonProps) => {
 export const useCallDetailMenu = ({ onEditCall, onCloseCall, canUserCreateCalls = false }: CallDetailMenuProps) => {
   const { t } = useTranslation();
   const { trackEvent } = useAnalytics();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
   const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false);
 
   const closeMenu = () => setIsKebabMenuOpen(false);
@@ -75,7 +78,7 @@ export const useCallDetailMenu = ({ onEditCall, onCloseCall, canUserCreateCalls
     return (
       <NativeModal visible={isKebabMenuOpen} transparent={true} animationType="slide" onRequestClose={closeMenu} testID="call-detail-actionsheet">
         <RNPressable style={menuStyles.backdrop} onPress={closeMenu}>
-          <RNPressable style={menuStyles.sheet}>
+          <RNPressable style={[menuStyles.sheet, isDark ? menuStyles.sheetDark : null]}>
             <View style={menuStyles.handle} />
 
             <RNPressable
@@ -87,7 +90,7 @@ export const useCallDetailMenu = ({ onEditCall, onCloseCall, canUserCreateCalls
               testID="edit-call-button"
             >
               <HStack className="items-center">
-                <EditIcon size={20} color="#374151" style={{ marginRight: 12 }} />
+                <EditIcon size={20} color={isDark ? '#D1D5DB' : '#374151'} style={{ marginRight: 12 }} />
                 <Text className="text-base">{t('call_detail.edit_call')}</Text>
               </HStack>
             </RNPressable>
@@ -109,7 +112,7 @@ export const useCallDetailMenu = ({ onEditCall, onCloseCall, canUserCreateCalls
         </RNPressable>
       </NativeModal>
     );
-  }, [isKebabMenuOpen, canUserCreateCalls, t, onEditCall, onCloseCall]);
+  }, [isKebabMenuOpen, canUserCreateCalls, t, onEditCall, onCloseCall, isDark]);
 
   return {
     HeaderRightMenu,
@@ -133,6 +136,9 @@ const menuStyles = StyleSheet.create({
     paddingBottom: 34,
     paddingTop: 8,
   },
+  sheetDark: {
+    backgroundColor: '#1F2937',
+  },
   handle: {
     width: 36,
     height: 4,
diff --git a/src/components/calls/call-files-modal.tsx b/src/components/calls/call-files-modal.tsx
index ec0544ce..11fb3e0c 100644
--- a/src/components/calls/call-files-modal.tsx
+++ b/src/components/calls/call-files-modal.tsx
@@ -274,7 +274,7 @@ export const CallFilesModal: React.FC<CallFilesModalProps> = ({ isOpen, onClose,
               <Box className="w-full flex-row items-center justify-between border-b border-gray-200 px-4 pb-4 pt-2 dark:border-gray-700">
                 <Heading size="lg">{t('calls.files.title')}</Heading>
                 <Button variant="link" onPress={onClose} className="p-1" testID="close-button">
-                  <X size={24} />
+                  <X size={24} color={colorScheme === 'dark' ? '#D1D5DB' : '#374151'} />
                 </Button>
               </Box>
             </VStack>
diff --git a/src/components/calls/call-site-info-tab-panel.tsx b/src/components/calls/call-site-info-tab-panel.tsx
index b1e8c87e..f2eb8919 100644
--- a/src/components/calls/call-site-info-tab-panel.tsx
+++ b/src/components/calls/call-site-info-tab-panel.tsx
@@ -36,7 +36,7 @@ const SiteContactCard: React.FC<SiteContactCardProps> = ({ site, callId }) => {
   return (
     <Box className="mb-4 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900" testID={`site-contact-${site.ContactId}`}>
       <HStack space="sm" className="items-center border-b border-gray-100 p-3 dark:border-gray-800">
-        <Box className="size-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+        <Box className="size-10 items-center justify-center rounded-full bg-primary-100">
           {nameRedacted ? <LockIcon size={18} color="#6b7280" /> : site.ContactType === 1 ? <BuildingIcon size={18} color="#6366F1" /> : <UserIcon size={18} color="#6366F1" />}
         </Box>
         <VStack className="flex-1">
@@ -55,7 +55,7 @@ const SiteContactCard: React.FC<SiteContactCardProps> = ({ site, callId }) => {
           <Pressable onPress={() => Linking.openURL(`tel:${site.PhoneNumber}`).catch(() => {})} className="mb-2" testID={`site-contact-phone-${site.ContactId}`}>
             <HStack space="xs" className="items-center">
               <PhoneIcon size={14} color="#6366F1" />
-              <Text className="text-sm text-primary-600 dark:text-primary-400">{site.PhoneNumber}</Text>
+              <Text className="text-sm text-primary-600">{site.PhoneNumber}</Text>
             </HStack>
           </Pressable>
         ) : null}
diff --git a/src/components/calls/location-history-panel.tsx b/src/components/calls/location-history-panel.tsx
index d482f6f5..de2f92ec 100644
--- a/src/components/calls/location-history-panel.tsx
+++ b/src/components/calls/location-history-panel.tsx
@@ -13,7 +13,7 @@ import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { ProtectedFieldIds } from '@/lib/data-protection/redacted';
-import { formatDateForDisplay, parseApiUtcDate } from '@/lib/utils';
+import { formatDateForDisplay, parseApiUtcDate, readableColors } from '@/lib/utils';
 import { type LocationHistoryCallData, type LocationHistoryMatch } from '@/models/v4/calls/locationHistoryResult';
 import { locationHistoryKey, type LocationHistorySource, useLocationHistoryStore } from '@/stores/calls/location-history-store';
 import { dataProtectionStore } from '@/stores/data-protection/store';
@@ -50,6 +50,7 @@ const HistoryCallCard: React.FC<HistoryCallCardProps> = React.memo(({ call, onOp
   const { CallId: callId } = call;
   const openCall = useCallback(() => onOpenCall(callId), [onOpenCall, callId]);
   const toggleNotes = useCallback(() => setExpanded((value) => !value), []);
+  const priorityColors = readableColors(call.PriorityColor, '#6b7280');
 
   return (
     <Box className="mb-3 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900" testID={`location-history-call-${call.CallId}`}>
@@ -57,9 +58,11 @@ const HistoryCallCard: React.FC<HistoryCallCardProps> = React.memo(({ call, onOp
         <HStack space="sm" className="items-start">
           <VStack className="flex-1">
             <HStack space="xs" className="flex-wrap items-center">
-              <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">{call.Number}</Text>
-              <Box className="rounded px-1.5 py-0.5" style={{ backgroundColor: call.PriorityColor || '#6b7280' }}>
-                <Text className="text-xs font-medium text-white">{call.PriorityText || t('location_history.unknown_priority')}</Text>
+              <Text className="text-sm font-semibold text-primary-600">{call.Number}</Text>
+              <Box className="rounded px-1.5 py-0.5" style={{ backgroundColor: priorityColors.backgroundColor }} testID={`location-history-priority-${call.CallId}`}>
+                <Text className="text-xs font-medium" style={{ color: priorityColors.textColor }}>
+                  {call.PriorityText || t('location_history.unknown_priority')}
+                </Text>
               </Box>
               <Text className={`text-xs ${call.State === 0 ? 'font-semibold text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>{t(`location_history.state.${call.State}`, String(call.State))}</Text>
             </HStack>
@@ -98,7 +101,7 @@ const HistoryCallCard: React.FC<HistoryCallCardProps> = React.memo(({ call, onOp
           <Pressable onPress={toggleNotes} className="px-3 py-2" testID={`location-history-notes-toggle-${call.CallId}`}>
             <HStack space="xs" className="items-center">
               {expanded ? <ChevronUpIcon size={16} color="#6366F1" /> : <ChevronDownIcon size={16} color="#6366F1" />}
-              <Text className="text-sm text-primary-600 dark:text-primary-400">{expanded ? t('location_history.hide_notes') : t('location_history.show_notes', { count: call.Notes.length })}</Text>
+              <Text className="text-sm text-primary-600">{expanded ? t('location_history.hide_notes') : t('location_history.show_notes', { count: call.Notes.length })}</Text>
             </HStack>
           </Pressable>
           {expanded ? (
diff --git a/src/components/chat/ack-banner.tsx b/src/components/chat/ack-banner.tsx
index 50b999f6..e7106658 100644
--- a/src/components/chat/ack-banner.tsx
+++ b/src/components/chat/ack-banner.tsx
@@ -1,9 +1,9 @@
-import { AlertTriangle } from 'lucide-react-native';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button, ButtonText } from '@/components/ui/button';
 import { HStack } from '@/components/ui/hstack';
+import { AlertTriangle } from '@/components/ui/lucide-icons';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { type ChatAckResultData } from '@/models/v4/chat';
@@ -23,7 +23,7 @@ export function AckBanner({ acks, onAcknowledge }: AckBannerProps) {
   return (
     <HStack className="items-center justify-between border-b border-error-300 bg-error-50 px-4 py-2" space="sm">
       <HStack className="flex-1 items-center" space="sm">
-        <AlertTriangle size={18} color="#dc2626" />
+        <AlertTriangle size={18} className="text-error-600" />
         <VStack className="flex-1">
           <Text className="text-sm font-semibold text-error-700">{t('chat.ack_required')}</Text>
           <Text className="text-xs text-error-600">{acks.length > 1 ? t('chat.ack_pending_count', { count: acks.length }) : t('chat.ack_pending_one')}</Text>
diff --git a/src/components/chat/message-bubble.tsx b/src/components/chat/message-bubble.tsx
index 1ca0ce4a..801a8ae2 100644
--- a/src/components/chat/message-bubble.tsx
+++ b/src/components/chat/message-bubble.tsx
@@ -1,5 +1,5 @@
 import { Image } from 'expo-image';
-import { AlertTriangle, Clock, MapPin, MessageSquare, Pin, RefreshCw } from 'lucide-react-native';
+import { Clock, MapPin, MessageSquare, Pin, RefreshCw } from 'lucide-react-native';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Linking } from 'react-native';
@@ -8,6 +8,7 @@ import { getChatAttachmentImageSource } from '@/api/chat/chat';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Box } from '@/components/ui/box';
 import { HStack } from '@/components/ui/hstack';
+import { AlertTriangle } from '@/components/ui/lucide-icons';
 import { Pressable } from '@/components/ui/pressable';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
@@ -67,7 +68,7 @@ function MessageBubbleComponent({ message, isOwn, showSender, currentUserId, onL
   const isPending = message._localStatus === 'pending';
   const isFailed = message._localStatus === 'failed';
 
-  const bubbleTone = isOwn ? 'bg-primary-600' : 'bg-background-100';
+  const bubbleTone = isOwn ? 'bg-primary-600 dark:bg-primary-400' : 'bg-background-100';
   const textTone = isOwn ? 'text-white' : 'text-typography-900';
   const urgentClasses = isUrgent && !isOwn ? 'border-2 border-error-500 bg-error-50' : isUrgent && isOwn ? 'border-2 border-error-300' : '';
 
@@ -146,7 +147,7 @@ function MessageBubbleComponent({ message, isOwn, showSender, currentUserId, onL
           <Box className={`rounded-2xl px-3 py-2 ${bubbleTone} ${urgentClasses}`}>
             {isUrgent && !isDeleted ? (
               <HStack className="mb-1 items-center" space="xs">
-                <AlertTriangle size={14} color={isOwn ? '#ffffff' : '#dc2626'} />
+                <AlertTriangle size={14} className={isOwn ? 'text-white' : 'text-error-600'} />
                 <Text className={`text-xs font-bold ${isOwn ? 'text-white' : 'text-error-600'}`}>{t('chat.urgent')}</Text>
               </HStack>
             ) : null}
diff --git a/src/components/chat/message-composer.tsx b/src/components/chat/message-composer.tsx
index 51ad4c81..72d6f245 100644
--- a/src/components/chat/message-composer.tsx
+++ b/src/components/chat/message-composer.tsx
@@ -148,7 +148,7 @@ export function MessageComposer({ onSendText, onSendImage, onSendLocation, onOpe
           </Pressable>
         ) : null}
 
-        <Pressable className={`rounded-full p-2 ${text.trim() ? 'bg-primary-600' : 'bg-background-300'}`} onPress={handleSend} disabled={!text.trim() || disabled} accessibilityLabel={t('chat.send')}>
+        <Pressable className={`rounded-full p-2 ${text.trim() ? 'bg-primary-600 dark:bg-primary-400' : 'bg-background-300'}`} onPress={handleSend} disabled={!text.trim() || disabled} accessibilityLabel={t('chat.send')}>
           <Send size={20} color="#ffffff" />
         </Pressable>
       </HStack>
diff --git a/src/components/chat/new-conversation-sheet.tsx b/src/components/chat/new-conversation-sheet.tsx
index 69e33622..000a90b0 100644
--- a/src/components/chat/new-conversation-sheet.tsx
+++ b/src/components/chat/new-conversation-sheet.tsx
@@ -7,7 +7,7 @@ import { getRecipients } from '@/api/messaging/messages';
 import { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper } from '@/components/ui/actionsheet';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { Box } from '@/components/ui/box';
-import { Button, ButtonText } from '@/components/ui/button';
+import { Button, ButtonIcon, ButtonText } from '@/components/ui/button';
 import { Center } from '@/components/ui/center';
 import { HStack } from '@/components/ui/hstack';
 import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input';
@@ -187,7 +187,7 @@ export function NewConversationSheet({ isOpen, onClose, mode, onCreated }: NewCo
                         </Text>
                       </HStack>
                       {mode === 'group' && isSelected ? (
-                        <Box className="rounded-full bg-primary-600 p-1">
+                        <Box className="rounded-full bg-primary-600 p-1 dark:bg-primary-400">
                           <Check size={14} color="#ffffff" />
                         </Box>
                       ) : null}
@@ -200,8 +200,8 @@ export function NewConversationSheet({ isOpen, onClose, mode, onCreated }: NewCo
 
           {mode === 'group' ? (
             <Button className="mb-2 w-full bg-primary-600" onPress={createGroup} isDisabled={submitting || selected.size === 0}>
-              <Users size={18} color="#ffffff" />
-              <ButtonText className="ml-2">{t('chat.create_group_with', { count: selected.size })}</ButtonText>
+              <ButtonIcon as={Users} />
+              <ButtonText>{t('chat.create_group_with', { count: selected.size })}</ButtonText>
             </Button>
           ) : null}
         </VStack>
diff --git a/src/components/check-in-timers/check-in-bottom-sheet.tsx b/src/components/check-in-timers/check-in-bottom-sheet.tsx
index e50565f8..388be67d 100644
--- a/src/components/check-in-timers/check-in-bottom-sheet.tsx
+++ b/src/components/check-in-timers/check-in-bottom-sheet.tsx
@@ -86,7 +86,7 @@ export const CheckInBottomSheet: React.FC<CheckInBottomSheetProps> = ({ isOpen,
 
         {/* Type selector */}
         <VStack space="xs">
-          <Text className="text-sm font-medium text-gray-600">{t('check_in.select_type')}</Text>
+          <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('check_in.select_type')}</Text>
           <HStack className="flex-wrap" space="sm">
             {selectableCheckInTypes.map((type) => (
               <Button key={type.value} variant={selectedType === type.value ? 'solid' : 'outline'} size="sm" onPress={() => setSelectedType(type.value)} className="mb-1">
@@ -98,9 +98,9 @@ export const CheckInBottomSheet: React.FC<CheckInBottomSheetProps> = ({ isOpen,
 
         {/* Note input */}
         <VStack space="xs">
-          <Text className="text-sm font-medium text-gray-600">{t('check_in.add_note')}</Text>
+          <Text className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('check_in.add_note')}</Text>
           <Box className="rounded-lg border border-outline-200 p-2">
-            <TextInput value={note} onChangeText={setNote} placeholder={t('check_in.add_note')} multiline numberOfLines={3} style={{ minHeight: 60, textAlignVertical: 'top' }} />
+            <TextInput className="text-typography-900" value={note} onChangeText={setNote} placeholder={t('check_in.add_note')} multiline numberOfLines={3} style={{ minHeight: 60, textAlignVertical: 'top' }} />
           </Box>
         </VStack>
 
diff --git a/src/components/check-in-timers/check-in-timer-card.tsx b/src/components/check-in-timers/check-in-timer-card.tsx
index 65b5c0b9..d4a91f5d 100644
--- a/src/components/check-in-timers/check-in-timer-card.tsx
+++ b/src/components/check-in-timers/check-in-timer-card.tsx
@@ -90,7 +90,7 @@ export const CheckInTimerCard: React.FC<CheckInTimerCardProps> = ({ timer, onChe
       </HStack>
 
       {/* Progress bar */}
-      <Box className="mt-2 h-2 overflow-hidden rounded-full bg-gray-200">
+      <Box className="mt-2 h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
         <Box className="h-full rounded-full" style={[styles.progressBar, { width: `${progress * 100}%`, backgroundColor: statusColor }]} />
       </Box>
 
diff --git a/src/components/common/__tests__/header-back-button.test.tsx b/src/components/common/__tests__/header-back-button.test.tsx
new file mode 100644
index 00000000..1ec394b9
--- /dev/null
+++ b/src/components/common/__tests__/header-back-button.test.tsx
@@ -0,0 +1,54 @@
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { HeaderBackButton } from '../header-back-button';
+
+jest.mock('lucide-react-native', () => ({
+  ArrowLeftIcon: () => null,
+}));
+
+describe('HeaderBackButton', () => {
+  it('renders with back-button testID', () => {
+    render(<HeaderBackButton onPress={jest.fn()} />);
+
+    expect(screen.getByTestId('back-button')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    render(<HeaderBackButton onPress={onPress} />);
+
+    fireEvent.press(screen.getByTestId('back-button'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('has a fixed 40x40 wrapper so iOS 26 liquid glass headers cannot stretch it', () => {
+    render(<HeaderBackButton onPress={jest.fn()} />);
+
+    const button = screen.getByTestId('back-button-container');
+    const flatStyle = Array.isArray(button.props.style) ? Object.assign({}, ...button.props.style.flat().filter(Boolean)) : button.props.style;
+
+    expect(flatStyle).toEqual(
+      expect.objectContaining({
+        width: 40,
+        height: 40,
+      })
+    );
+  });
+
+  it('fills the wrapper and centres the icon, so the arrow sits in the middle of the glass', () => {
+    render(<HeaderBackButton onPress={jest.fn()} />);
+
+    const pressable = screen.getByTestId('back-button');
+    const flatStyle = Array.isArray(pressable.props.style) ? Object.assign({}, ...pressable.props.style.flat().filter(Boolean)) : pressable.props.style;
+
+    expect(flatStyle).toEqual(
+      expect.objectContaining({
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      })
+    );
+  });
+});
diff --git a/src/components/common/date-time-field.tsx b/src/components/common/date-time-field.tsx
index 2e374f37..53b62182 100644
--- a/src/components/common/date-time-field.tsx
+++ b/src/components/common/date-time-field.tsx
@@ -76,7 +76,7 @@ export const DateTimeField = ({ value, onChange, label, mode = 'date', disabled
       accessibilityLabel={accessibilityLabel}
       accessibilityState={{ selected: chosen }}
       onPress={onPress}
-      className={chosen ? 'min-h-11 items-center justify-center rounded bg-primary-600 px-2 py-3' : 'min-h-11 items-center justify-center rounded px-2 py-3'}
+      className={chosen ? 'min-h-11 items-center justify-center rounded bg-primary-600 px-2 py-3 dark:bg-primary-400' : 'min-h-11 items-center justify-center rounded px-2 py-3'}
     >
       <Text className={chosen ? 'text-center text-white' : 'text-center text-typography-900'}>{text}</Text>
     </Pressable>
diff --git a/src/components/common/header-back-button.tsx b/src/components/common/header-back-button.tsx
index caee1544..8f22c4fa 100644
--- a/src/components/common/header-back-button.tsx
+++ b/src/components/common/header-back-button.tsx
@@ -14,12 +14,14 @@ interface HeaderBackButtonProps {
 // frame after the first native commit, so the glass capsule caches a stretched
 // constraint on re-entry — the wrapper guarantees a fixed frame from the first commit.
 // collapsable={false} keeps the native view (and its frame) from being optimized away.
+// The Pressable fills the wrapper from the stylesheet too: NativeWind's rem is 14px, so a
+// `size-10` class comes out at 35pt and leaves the icon off-centre in the glass.
 export const HeaderBackButton: React.FC<HeaderBackButtonProps> = ({ onPress }) => {
   const { colorScheme } = useColorScheme();
 
   return (
     <View style={styles.button} collapsable={false} testID="back-button-container">
-      <Pressable onPress={onPress} testID="back-button" className="size-10 items-center justify-center rounded">
+      <Pressable onPress={onPress} testID="back-button" style={styles.pressable}>
         {/* lucide icons draw with `stroke="currentColor"`, which react-native-svg resolves
             to black — a `className` text colour never reaches them. Pass `color` instead,
             or the arrow is invisible against the dark header. */}
@@ -34,4 +36,9 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
   },
+  pressable: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
diff --git a/src/components/contacts/contact-details-extra.tsx b/src/components/contacts/contact-details-extra.tsx
index af6f1db0..d6a01188 100644
--- a/src/components/contacts/contact-details-extra.tsx
+++ b/src/components/contacts/contact-details-extra.tsx
@@ -44,7 +44,7 @@ const AddressRow = ({ label, address }: { label: string; address: ContactAddress
         </View>
         <VStack space="xs" className="flex-1">
           <Text className="text-sm text-gray-500 dark:text-gray-400">{label}</Text>
-          <Text className="text-base text-primary-600 dark:text-primary-400">{line}</Text>
+          <Text className="text-base text-primary-600">{line}</Text>
         </VStack>
       </HStack>
     </Pressable>
diff --git a/src/components/contacts/contact-details-sheet.tsx b/src/components/contacts/contact-details-sheet.tsx
index 9dfe7995..24651f0e 100644
--- a/src/components/contacts/contact-details-sheet.tsx
+++ b/src/components/contacts/contact-details-sheet.tsx
@@ -56,7 +56,7 @@ const Section: React.FC<SectionProps> = ({ title, icon, children, isCollapsible
     <VStack space="md" className="border-b border-gray-200 pb-4 dark:border-gray-700">
       <Pressable onPress={isCollapsible ? () => setIsExpanded(!isExpanded) : undefined} className="flex-row items-center justify-between" disabled={!isCollapsible}>
         <HStack space="sm" className="items-center">
-          <View className="size-8 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">{icon}</View>
+          <View className="size-8 items-center justify-center rounded-full bg-primary-100">{icon}</View>
           <Text className="text-lg font-semibold text-gray-900 dark:text-white">{title}</Text>
         </HStack>
         {isCollapsible ? isExpanded ? <ChevronDownIcon size={20} color="#6366F1" /> : <ChevronRightIcon size={20} color="#6366F1" /> : null}
@@ -157,7 +157,7 @@ const ContactField: React.FC<ContactFieldProps> = ({ label, value, icon, isLink,
       {icon ? <View className="size-6 items-center justify-center">{icon}</View> : null}
       <VStack space="xs" className="flex-1">
         <Text className="text-sm text-gray-500 dark:text-gray-400">{label}</Text>
-        <Text className={`text-base ${isActionable ? 'text-primary-600 dark:text-primary-400' : 'text-gray-900 dark:text-white'}`}>{displayValue}</Text>
+        <Text className={`text-base ${isActionable ? 'text-primary-600' : 'text-gray-900 dark:text-white'}`}>{displayValue}</Text>
       </VStack>
     </HStack>
   );
@@ -297,7 +297,7 @@ export const ContactDetailsSheet: React.FC = () => {
                 <AvatarImage source={{ uri: selectedContact.ImageUrl }} alt={displayName} />
               ) : (
                 <View className="size-full items-center justify-center bg-primary-500">
-                  {selectedContact.ContactType === ContactType.Person ? <UserIcon size={48} color="#000" /> : <BuildingIcon size={48} color="#000" />}
+                  {selectedContact.ContactType === ContactType.Person ? <UserIcon size={48} color="#ffffff" /> : <BuildingIcon size={48} color="#ffffff" />}
                 </View>
               )}
             </Avatar>
@@ -309,38 +309,26 @@ export const ContactDetailsSheet: React.FC = () => {
               </HStack>
               <Text className="text-sm text-gray-500 dark:text-gray-400">{selectedContact.ContactType === ContactType.Person ? t('contacts.person') : t('contacts.company')}</Text>
               {selectedContact.OtherName ? <Text className="text-sm text-gray-600 dark:text-gray-300">({selectedContact.OtherName})</Text> : null}
-              {selectedContact.CategoryName || selectedContact.Category?.Name ? (
-                <Text className="text-sm text-primary-600 dark:text-primary-400">{selectedContact.CategoryName || selectedContact.Category?.Name}</Text>
-              ) : null}
+              {selectedContact.CategoryName || selectedContact.Category?.Name ? <Text className="text-sm text-primary-600">{selectedContact.CategoryName || selectedContact.Category?.Name}</Text> : null}
             </VStack>
           </VStack>
 
           {/* Tab Navigation */}
           <HStack className="mb-4 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
             <Pressable onPress={() => setActiveTab('details')} className={`flex-1 rounded-md ${isLandscape ? 'px-4 py-2' : 'px-3 py-1.5'} ${activeTab === 'details' ? 'bg-white shadow-xs dark:bg-gray-700' : ''}`}>
-              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'details' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'}`}>
-                {t('contacts.tabs.details')}
-              </Text>
+              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'details' ? 'text-primary-600' : 'text-gray-600 dark:text-gray-400'}`}>{t('contacts.tabs.details')}</Text>
             </Pressable>
             <Pressable onPress={() => setActiveTab('notes')} className={`flex-1 rounded-md ${isLandscape ? 'px-4 py-2' : 'px-3 py-1.5'} ${activeTab === 'notes' ? 'bg-white shadow-xs dark:bg-gray-700' : ''}`}>
-              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'notes' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'}`}>
-                {t('contacts.tabs.notes')}
-              </Text>
+              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'notes' ? 'text-primary-600' : 'text-gray-600 dark:text-gray-400'}`}>{t('contacts.tabs.notes')}</Text>
             </Pressable>
             <Pressable onPress={() => setActiveTab('preplan')} className={`flex-1 rounded-md ${isLandscape ? 'px-4 py-2' : 'px-3 py-1.5'} ${activeTab === 'preplan' ? 'bg-white shadow-xs dark:bg-gray-700' : ''}`}>
-              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'preplan' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'}`}>
-                {t('contacts.tabs.preplan')}
-              </Text>
+              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'preplan' ? 'text-primary-600' : 'text-gray-600 dark:text-gray-400'}`}>{t('contacts.tabs.preplan')}</Text>
             </Pressable>
             <Pressable onPress={() => setActiveTab('files')} className={`flex-1 rounded-md ${isLandscape ? 'px-4 py-2' : 'px-3 py-1.5'} ${activeTab === 'files' ? 'bg-white shadow-xs dark:bg-gray-700' : ''}`}>
-              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'files' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'}`}>
-                {t('contacts.tabs.files')}
-              </Text>
+              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'files' ? 'text-primary-600' : 'text-gray-600 dark:text-gray-400'}`}>{t('contacts.tabs.files')}</Text>
             </Pressable>
             <Pressable onPress={() => setActiveTab('calls')} className={`flex-1 rounded-md ${isLandscape ? 'px-4 py-2' : 'px-3 py-1.5'} ${activeTab === 'calls' ? 'bg-white shadow-xs dark:bg-gray-700' : ''}`}>
-              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'calls' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-600 dark:text-gray-400'}`}>
-                {t('contacts.tabs.calls')}
-              </Text>
+              <Text className={`text-center font-medium ${isLandscape ? 'text-sm' : 'text-xs'} ${activeTab === 'calls' ? 'text-primary-600' : 'text-gray-600 dark:text-gray-400'}`}>{t('contacts.tabs.calls')}</Text>
             </Pressable>
           </HStack>
 
diff --git a/src/components/contacts/contact-notes-list.tsx b/src/components/contacts/contact-notes-list.tsx
index ed49df11..e65c0c9b 100644
--- a/src/components/contacts/contact-notes-list.tsx
+++ b/src/components/contacts/contact-notes-list.tsx
@@ -50,7 +50,7 @@ const ContactNoteCard: React.FC<ContactNoteCardProps> = ({ note }) => {
         {/* Header with type and indicators */}
         <HStack className="items-center justify-between">
           <HStack space="xs" className="items-center">
-            {note.NoteType ? <Text className="rounded bg-primary-100 px-2 py-1 text-xs font-medium text-primary-800 dark:bg-primary-900 dark:text-primary-200">{note.NoteType}</Text> : null}
+            {note.NoteType ? <Text className="rounded bg-primary-100 px-2 py-1 text-xs font-medium text-primary-800">{note.NoteType}</Text> : null}
             {note.ShouldAlert ? (
               <HStack space="xs" className="items-center">
                 <ShieldAlertIcon size={14} color="#ef4444" />
diff --git a/src/components/data-protection/protected-reveal-bar.tsx b/src/components/data-protection/protected-reveal-bar.tsx
index bf896ad4..a55de641 100644
--- a/src/components/data-protection/protected-reveal-bar.tsx
+++ b/src/components/data-protection/protected-reveal-bar.tsx
@@ -1,9 +1,10 @@
-import { EyeIcon, EyeOffIcon, ShieldIcon } from 'lucide-react-native';
+import { EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button, ButtonIcon, ButtonText } from '@/components/ui/button';
 import { HStack } from '@/components/ui/hstack';
+import { ShieldIcon } from '@/components/ui/lucide-icons';
 import { Spinner } from '@/components/ui/spinner';
 import { Text } from '@/components/ui/text';
 import { useProtectedReveal } from '@/hooks/use-protected-reveal';
@@ -53,7 +54,7 @@ export const ProtectedRevealBar: React.FC<ProtectedRevealBarProps> = ({ onRefres
 
   return (
     <HStack space="sm" className="items-center px-4 py-2" testID={testID ?? 'protected-reveal-bar'}>
-      <ShieldIcon size={16} />
+      <ShieldIcon size={16} className="text-typography-700" />
       <Text size="sm" className="flex-1">
         {isRevealed ? t('data_protection.revealed_notice', 'Protected information is visible.') : t('data_protection.protected_notice', 'Some information on this screen is protected.')}
       </Text>
@@ -65,7 +66,7 @@ export const ProtectedRevealBar: React.FC<ProtectedRevealBarProps> = ({ onRefres
       ) : (
         <Button size="sm" action="primary" onPress={reveal} isDisabled={isRequesting} testID="protected-reveal-button">
           {isRequesting ? (
-            <Spinner size="small" />
+            <Spinner size="small" className="text-typography-0" />
           ) : (
             <>
               <ButtonIcon as={EyeIcon} />
diff --git a/src/components/data-protection/protected-text.tsx b/src/components/data-protection/protected-text.tsx
index 9608c21b..569af713 100644
--- a/src/components/data-protection/protected-text.tsx
+++ b/src/components/data-protection/protected-text.tsx
@@ -1,8 +1,8 @@
-import { LockIcon } from 'lucide-react-native';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HStack } from '@/components/ui/hstack';
+import { Lock } from '@/components/ui/lucide-icons';
 import { Text } from '@/components/ui/text';
 import { isFieldRedacted } from '@/lib/data-protection/redacted';
 
@@ -37,7 +37,7 @@ export const ProtectedText: React.FC<ProtectedTextProps> = ({ value, fieldId, re
   if (isFieldRedacted(redactedFields, fieldId, value)) {
     return (
       <HStack space="xs" className="items-center" testID={testID ?? `protected-field-${fieldId}`}>
-        <LockIcon size={size === 'xs' || size === 'sm' ? 12 : 14} />
+        <Lock size={size === 'xs' || size === 'sm' ? 12 : 14} className="text-typography-500" />
         <Text size={size} className={`italic text-typography-500 ${className ?? ''}`}>
           {t('data_protection.protected_value', 'Protected')}
         </Text>
diff --git a/src/components/data-protection/step-up-modal.tsx b/src/components/data-protection/step-up-modal.tsx
index 991bf654..107230bc 100644
--- a/src/components/data-protection/step-up-modal.tsx
+++ b/src/components/data-protection/step-up-modal.tsx
@@ -205,7 +205,7 @@ export const StepUpModal: React.FC<StepUpModalProps> = ({ isOpen, onClose, onVer
           </Button>
           {offersCode && !approval ? (
             <Button action="primary" onPress={handleVerify} isDisabled={isVerifying || code.trim().length === 0} testID="step-up-submit">
-              {isVerifying ? <Spinner size="small" /> : <ButtonText>{t('data_protection.step_up_verify', 'Verify')}</ButtonText>}
+              {isVerifying ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('data_protection.step_up_verify', 'Verify')}</ButtonText>}
             </Button>
           ) : null}
         </ModalFooter>
diff --git a/src/components/livekit/livekit-bottom-sheet.tsx b/src/components/livekit/livekit-bottom-sheet.tsx
index 4555d2c0..ba95cc0f 100644
--- a/src/components/livekit/livekit-bottom-sheet.tsx
+++ b/src/components/livekit/livekit-bottom-sheet.tsx
@@ -197,8 +197,8 @@ export const LiveKitBottomSheet = () => {
             {isTalking && <Text className="text-center text-green-500">{t('livekit.speaking')}</Text>}
 
             {/* Audio Device Info */}
-            <View className="mt-2 border-t border-gray-200 pt-2">
-              <Text className="mb-1 text-sm font-medium text-gray-600">{t('livekit.audio_devices')}</Text>
+            <View className="mt-2 border-t border-gray-200 pt-2 dark:border-gray-700">
+              <Text className="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">{t('livekit.audio_devices')}</Text>
               <HStack className="items-center justify-between">
                 <VStack space="xs" className="flex-1">
                   <Text className="text-xs text-gray-500">{t('livekit.microphone')}</Text>
diff --git a/src/components/mfa/account-verify-modal.tsx b/src/components/mfa/account-verify-modal.tsx
index 9bd1cb63..266f44fa 100644
--- a/src/components/mfa/account-verify-modal.tsx
+++ b/src/components/mfa/account-verify-modal.tsx
@@ -151,7 +151,7 @@ export const AccountVerifyModal: React.FC<AccountVerifyModalProps> = ({ proof, o
           </Button>
           {(reauth && !useProvider) || offersCode ? (
             <Button action="primary" onPress={reauth ? submitPassword : submitCode} isDisabled={busy || secret.trim().length === 0} testID="account-verify-submit">
-              {busy ? <Spinner size="small" /> : <ButtonText>{t('mfa.login.verify')}</ButtonText>}
+              {busy ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('mfa.login.verify')}</ButtonText>}
             </Button>
           ) : null}
         </ModalFooter>
diff --git a/src/components/push-notification/push-notification-modal.tsx b/src/components/push-notification/push-notification-modal.tsx
index 58f85736..2c2eed2a 100644
--- a/src/components/push-notification/push-notification-modal.tsx
+++ b/src/components/push-notification/push-notification-modal.tsx
@@ -16,13 +16,13 @@ const NotificationIcon = ({ type }: { type: NotificationType }) => {
 
   switch (type) {
     case 'call':
-      return <Phone size={iconSize} className="text-danger-500 dark:text-danger-400" testID="notification-icon" />;
+      return <Phone size={iconSize} className="text-error-500" testID="notification-icon" />;
     case 'message':
-      return <MailIcon size={iconSize} className="text-primary-500 dark:text-primary-400" testID="notification-icon" />;
+      return <MailIcon size={iconSize} className="text-primary-600" testID="notification-icon" />;
     case 'chat':
-      return <MessageCircle size={iconSize} className="text-success-500 dark:text-success-400" testID="notification-icon" />;
+      return <MessageCircle size={iconSize} className="text-success-500" testID="notification-icon" />;
     case 'group-chat':
-      return <Users size={iconSize} className="text-secondary-500 dark:text-secondary-400" testID="notification-icon" />;
+      return <Users size={iconSize} className="text-typography-500" testID="notification-icon" />;
     default:
       return <Bell size={iconSize} className="text-gray-600 dark:text-gray-400" testID="notification-icon" />;
   }
@@ -110,9 +110,9 @@ export const PushNotificationModal: React.FC = () => {
             ) : null}
 
             {notification.type === 'unknown' ? (
-              <HStack className="mt-2 items-center space-x-2 rounded-lg bg-warning-50 p-3 dark:bg-warning-900">
-                <AlertCircle size={20} className="text-warning-600 dark:text-warning-400" />
-                <Text className="flex-1 text-sm text-warning-800 dark:text-warning-200">{t('push_notifications.unknown_type_warning')}</Text>
+              <HStack className="mt-2 items-center space-x-2 rounded-lg bg-warning-50 p-3">
+                <AlertCircle size={20} className="text-warning-600" />
+                <Text className="flex-1 text-sm text-warning-800">{t('push_notifications.unknown_type_warning')}</Text>
               </HStack>
             ) : null}
           </VStack>
diff --git a/src/components/roles/role-user-selection-modal.tsx b/src/components/roles/role-user-selection-modal.tsx
index 1465f307..e65562e7 100644
--- a/src/components/roles/role-user-selection-modal.tsx
+++ b/src/components/roles/role-user-selection-modal.tsx
@@ -66,7 +66,7 @@ export const RoleUserSelectionModal: React.FC<RoleUserSelectionModalProps> = ({
         <Pressable
           key={item.UserId}
           onPress={() => handleSelect(item.UserId)}
-          className={`px-4 py-3 ${isSelected ? (isDark ? 'bg-primary-900/30' : 'bg-primary-50') : ''}`}
+          className={`px-4 py-3 ${isSelected ? (isDark ? 'bg-primary-100/30' : 'bg-primary-50') : ''}`}
           testID={`user-item-${item.UserId}`}
           accessibilityRole="button"
           accessibilityLabel={t('roles.selectUserLabel', { name: fullName, defaultValue: `Select ${fullName}` })}
@@ -78,7 +78,7 @@ export const RoleUserSelectionModal: React.FC<RoleUserSelectionModalProps> = ({
 
             <VStack className="flex-1" space="xs">
               <HStack className="items-center" space="sm">
-                <Text className={`text-base font-medium ${isSelected ? 'text-primary-600 dark:text-primary-400' : ''}`}>{fullName}</Text>
+                <Text className={`text-base font-medium ${isSelected ? 'text-primary-600' : ''}`}>{fullName}</Text>
                 {isAssignedElsewhere ? (
                   <View className="rounded-full bg-amber-100 px-2 py-0.5 dark:bg-amber-900/40">
                     <Text className="text-xs text-amber-700 dark:text-amber-400">{otherAssignment?.roleName ? otherAssignment.roleName : t('roles.assignedElsewhere', 'In another role')}</Text>
@@ -158,7 +158,7 @@ export const RoleUserSelectionModal: React.FC<RoleUserSelectionModalProps> = ({
           {/* Unassigned option */}
           <Pressable
             onPress={() => handleSelect(undefined)}
-            className={`px-4 py-3 ${!selectedUserId ? (isDark ? 'bg-primary-900/30' : 'bg-primary-50') : ''}`}
+            className={`px-4 py-3 ${!selectedUserId ? (isDark ? 'bg-primary-100/30' : 'bg-primary-50') : ''}`}
             testID="unassigned-option"
             accessibilityRole="button"
             accessibilityLabel={t('roles.unassigned', 'Unassigned')}
@@ -168,7 +168,7 @@ export const RoleUserSelectionModal: React.FC<RoleUserSelectionModalProps> = ({
                 {!selectedUserId ? <CheckIcon size={18} color="#ffffff" /> : <UserXIcon size={18} color={isDark ? '#a3a3a3' : '#737373'} />}
               </View>
               <VStack className="flex-1">
-                <Text className={`text-base font-medium ${!selectedUserId ? 'text-primary-600 dark:text-primary-400' : ''}`}>{t('roles.unassigned', 'Unassigned')}</Text>
+                <Text className={`text-base font-medium ${!selectedUserId ? 'text-primary-600' : ''}`}>{t('roles.unassigned', 'Unassigned')}</Text>
                 <Text className="text-xs text-neutral-500 dark:text-neutral-400">{t('roles.clearAssignment', 'Clear the current assignment')}</Text>
               </VStack>
               {!selectedUserId ? <CheckIcon size={20} color={isDark ? '#60a5fa' : '#2563eb'} /> : null}
diff --git a/src/components/roles/roles-bottom-sheet.tsx b/src/components/roles/roles-bottom-sheet.tsx
index 7d9fac54..74313449 100644
--- a/src/components/roles/roles-bottom-sheet.tsx
+++ b/src/components/roles/roles-bottom-sheet.tsx
@@ -232,7 +232,7 @@ export const RolesBottomSheet: React.FC<RolesBottomSheetProps> = ({ isOpen, onCl
             <ButtonText>{t('common.cancel', 'Cancel')}</ButtonText>
           </Button>
           <Button variant="solid" action="primary" className="flex-1" onPress={handleSave} isDisabled={isSaving || !hasChanges} testID="save-button">
-            {isSaving ? <Spinner size="small" /> : <ButtonText>{t('common.save', 'Save')}</ButtonText>}
+            {isSaving ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('common.save', 'Save')}</ButtonText>}
           </Button>
         </HStack>
       </VStack>
diff --git a/src/components/routes/poi-list-content.tsx b/src/components/routes/poi-list-content.tsx
index 86af8a10..2df3bd83 100644
--- a/src/components/routes/poi-list-content.tsx
+++ b/src/components/routes/poi-list-content.tsx
@@ -146,7 +146,7 @@ export const PoiListContent: React.FC = () => {
                 <Text className="text-center text-xl font-bold text-gray-900 dark:text-white">{t('routes.no_search_results_pois')}</Text>
                 <Text className="max-w-[280] text-center text-base leading-5 text-gray-500 dark:text-gray-400">{t('routes.no_pois_filtered_description')}</Text>
                 <Pressable onPress={handleClearFilters} className="mt-2 rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800">
-                  <Text className="text-sm font-medium text-primary-600 dark:text-primary-400">{t('routes.clear_filters')}</Text>
+                  <Text className="text-sm font-medium text-primary-600">{t('routes.clear_filters')}</Text>
                 </Pressable>
               </VStack>
             </Box>
diff --git a/src/components/routes/routes-home.tsx b/src/components/routes/routes-home.tsx
index 883dae33..fb5a69ab 100644
--- a/src/components/routes/routes-home.tsx
+++ b/src/components/routes/routes-home.tsx
@@ -51,11 +51,11 @@ const FilterSheet: React.FC = () => {
                 <Pressable
                   onPress={() => handlePoiTypeSelect(null)}
                   className={`flex-row items-center justify-between rounded-lg border p-3 ${
-                    selectedPoiTypeId === null ? (isDark ? 'border-primary-700 bg-primary-900/30' : 'border-primary-500 bg-primary-50') : isDark ? 'border-neutral-700 bg-neutral-800' : 'border-neutral-200 bg-white'
+                    selectedPoiTypeId === null ? (isDark ? 'border-primary-500 bg-primary-100/30' : 'border-primary-500 bg-primary-50') : isDark ? 'border-neutral-700 bg-neutral-800' : 'border-neutral-200 bg-white'
                   }`}
                 >
                   <HStack space="sm" className="items-center">
-                    <Text className={selectedPoiTypeId === null ? 'font-semibold text-primary-600 dark:text-primary-400' : 'text-typography-900'}>{t('routes.poi_filter_all_types')}</Text>
+                    <Text className={selectedPoiTypeId === null ? 'font-semibold text-primary-600' : 'text-typography-900'}>{t('routes.poi_filter_all_types')}</Text>
                   </HStack>
                   {selectedPoiTypeId === null && <Check size={18} color={isDark ? '#60a5fa' : '#2563eb'} />}
                 </Pressable>
@@ -67,14 +67,14 @@ const FilterSheet: React.FC = () => {
                     className={`flex-row items-center justify-between rounded-lg border p-3 ${
                       selectedPoiTypeId === poiType.PoiTypeId
                         ? isDark
-                          ? 'border-primary-700 bg-primary-900/30'
+                          ? 'border-primary-500 bg-primary-100/30'
                           : 'border-primary-500 bg-primary-50'
                         : isDark
                           ? 'border-neutral-700 bg-neutral-800'
                           : 'border-neutral-200 bg-white'
                     }`}
                   >
-                    <Text className={selectedPoiTypeId === poiType.PoiTypeId ? 'font-semibold text-primary-600 dark:text-primary-400' : 'text-typography-900'}>{poiType.Name}</Text>
+                    <Text className={selectedPoiTypeId === poiType.PoiTypeId ? 'font-semibold text-primary-600' : 'text-typography-900'}>{poiType.Name}</Text>
                     {selectedPoiTypeId === poiType.PoiTypeId && <Check size={18} color={isDark ? '#60a5fa' : '#2563eb'} />}
                   </Pressable>
                 ))}
@@ -92,10 +92,10 @@ const FilterSheet: React.FC = () => {
                 key={option.value}
                 onPress={() => handleSortSelect(option.value)}
                 className={`flex-row items-center justify-between rounded-lg border p-3 ${
-                  sortBy === option.value ? (isDark ? 'border-primary-700 bg-primary-900/30' : 'border-primary-500 bg-primary-50') : isDark ? 'border-neutral-700 bg-neutral-800' : 'border-neutral-200 bg-white'
+                  sortBy === option.value ? (isDark ? 'border-primary-500 bg-primary-100/30' : 'border-primary-500 bg-primary-50') : isDark ? 'border-neutral-700 bg-neutral-800' : 'border-neutral-200 bg-white'
                 }`}
               >
-                <Text className={sortBy === option.value ? 'font-semibold text-primary-600 dark:text-primary-400' : 'text-typography-900'}>{option.label}</Text>
+                <Text className={sortBy === option.value ? 'font-semibold text-primary-600' : 'text-typography-900'}>{option.label}</Text>
                 {sortBy === option.value && <Check size={18} color={isDark ? '#60a5fa' : '#2563eb'} />}
               </Pressable>
             ))}
diff --git a/src/components/routes/stop-card.tsx b/src/components/routes/stop-card.tsx
index 030f594f..cf6770da 100644
--- a/src/components/routes/stop-card.tsx
+++ b/src/components/routes/stop-card.tsx
@@ -81,14 +81,14 @@ export const StopCard: React.FC<StopCardProps> = ({ stop, isCurrent = false, onC
       {isCurrent && stop.Status !== RouteStopStatus.Completed && stop.Status !== RouteStopStatus.Skipped ? (
         <HStack className="mt-3 gap-3">
           {stop.Status === RouteStopStatus.Pending ? (
-            <Button size="sm" className="flex-1 bg-blue-500" onPress={onCheckIn}>
-              <ButtonText>{t('routes.check_in')}</ButtonText>
+            <Button size="sm" className="flex-1 bg-blue-600" onPress={onCheckIn}>
+              <ButtonText className="text-white">{t('routes.check_in')}</ButtonText>
             </Button>
           ) : null}
 
           {stop.Status === RouteStopStatus.InProgress ? (
-            <Button size="sm" className="flex-1 bg-green-500" onPress={onCheckOut}>
-              <ButtonText>{t('routes.check_out')}</ButtonText>
+            <Button size="sm" className="flex-1 bg-green-600" onPress={onCheckOut}>
+              <ButtonText className="text-white">{t('routes.check_out')}</ButtonText>
             </Button>
           ) : null}
 
diff --git a/src/components/settings/bluetooth-device-selection-bottom-sheet.tsx b/src/components/settings/bluetooth-device-selection-bottom-sheet.tsx
index fee17c1b..f55dc65e 100644
--- a/src/components/settings/bluetooth-device-selection-bottom-sheet.tsx
+++ b/src/components/settings/bluetooth-device-selection-bottom-sheet.tsx
@@ -168,13 +168,13 @@ export function BluetoothDeviceSelectionBottomSheet({ isOpen, onClose }: Bluetoo
         <Pressable
           onPress={() => handleDeviceSelect(item)}
           disabled={!!connectingDeviceId}
-          className={`mb-2 rounded-lg border p-4 ${isSelected ? 'border-primary-500 bg-primary-50 dark:bg-primary-950' : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'} ${!!connectingDeviceId ? 'opacity-70' : ''}`}
+          className={`mb-2 rounded-lg border p-4 ${isSelected ? 'border-primary-500 bg-primary-50' : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'} ${!!connectingDeviceId ? 'opacity-70' : ''}`}
         >
           <HStack className="items-center justify-between">
             <VStack className="flex-1">
               <HStack className="items-center">
                 <BluetoothIcon size={16} className="mr-2 text-primary-600" />
-                <Text className={`font-medium ${isSelected ? 'text-primary-700 dark:text-primary-300' : 'text-neutral-900 dark:text-neutral-100'}`}>{item.name || t('bluetooth.unknown_device')}</Text>
+                <Text className={`font-medium ${isSelected ? 'text-primary-700' : 'text-neutral-900 dark:text-neutral-100'}`}>{item.name || t('bluetooth.unknown_device')}</Text>
                 {isConnected && <WifiIcon size={14} className="ml-2 text-green-600" />}
               </HStack>
               <HStack className="mt-1 items-center">
@@ -187,7 +187,7 @@ export function BluetoothDeviceSelectionBottomSheet({ isOpen, onClose }: Bluetoo
               <Spinner size="small" className="text-primary-600" color="#2563EB" />
             ) : isSelected ? (
               <VStack className="items-end">
-                <Text className="text-sm font-medium text-primary-600 dark:text-primary-400">{t('bluetooth.selected')}</Text>
+                <Text className="text-sm font-medium text-primary-600">{t('bluetooth.selected')}</Text>
                 {isConnected && <Text className="text-xs text-green-600 dark:text-green-400">{t('bluetooth.connected')}</Text>}
               </VStack>
             ) : null}
@@ -270,19 +270,19 @@ export function BluetoothDeviceSelectionBottomSheet({ isOpen, onClose }: Bluetoo
               }
             }}
             disabled={!!connectingDeviceId}
-            className={`rounded-lg border p-4 ${preferredDevice?.id === 'system-audio' ? 'border-primary-500 bg-primary-50 dark:bg-primary-950' : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'} ${!!connectingDeviceId ? 'opacity-70' : ''}`}
+            className={`rounded-lg border p-4 ${preferredDevice?.id === 'system-audio' ? 'border-primary-500 bg-primary-50' : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'} ${!!connectingDeviceId ? 'opacity-70' : ''}`}
           >
             <HStack className="items-center justify-between">
               <HStack className="items-center">
                 <BluetoothIcon size={16} className="mr-2 text-primary-600" />
                 <VStack>
-                  <Text className={`font-medium ${preferredDevice?.id === 'system-audio' ? 'text-primary-700 dark:text-primary-300' : 'text-neutral-900 dark:text-neutral-100'}`}>{t('bluetooth.system_audio')}</Text>
+                  <Text className={`font-medium ${preferredDevice?.id === 'system-audio' ? 'text-primary-700' : 'text-neutral-900 dark:text-neutral-100'}`}>{t('bluetooth.system_audio')}</Text>
                   <Text className="text-xs text-neutral-500">{t('bluetooth.system_audio_description')}</Text>
                 </VStack>
               </HStack>
               {preferredDevice?.id === 'system-audio' && (
                 <VStack className="items-end">
-                  <Text className="text-sm font-medium text-primary-600 dark:text-primary-400">{t('bluetooth.selected')}</Text>
+                  <Text className="text-sm font-medium text-primary-600">{t('bluetooth.selected')}</Text>
                 </VStack>
               )}
             </HStack>
diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx
index 06aeeda0..0162b7ce 100644
--- a/src/components/settings/item.tsx
+++ b/src/components/settings/item.tsx
@@ -1,7 +1,7 @@
-import { ArrowRight } from 'lucide-react-native';
 import * as React from 'react';
 
 import { Pressable, View } from '@/components/ui';
+import { ArrowRight } from '@/components/ui/lucide-icons';
 import { Text } from '@/components/ui/text';
 
 type ItemProps = {
@@ -26,7 +26,7 @@ export const Item = ({ text, value, icon, onPress, textStyle }: ItemProps) => {
         <Text className="text-neutral-600 dark:text-white">{truncatedValue}</Text>
         {isPressable && (
           <View className="pl-2">
-            <ArrowRight />
+            <ArrowRight className="text-typography-500" />
           </View>
         )}
       </View>
diff --git a/src/components/shared-session/shared-session-bar.tsx b/src/components/shared-session/shared-session-bar.tsx
index 57819ca7..d64097e9 100644
--- a/src/components/shared-session/shared-session-bar.tsx
+++ b/src/components/shared-session/shared-session-bar.tsx
@@ -50,7 +50,7 @@ export const SharedSessionBar: React.FC = () => {
   };
 
   return (
-    <View className="border-b border-warning-300 bg-warning-50 px-3 py-1 dark:border-warning-700 dark:bg-warning-900" testID="shared-session-bar">
+    <View className="border-b border-warning-300 bg-warning-50 px-3 py-1" testID="shared-session-bar">
       <HStack space="sm" className="flex-wrap items-center justify-between">
         <Text size="xs" className="shrink font-medium" numberOfLines={1}>
           {installationLabel ? t('shared_session.bar_label', { label: installationLabel }) : t('shared_session.bar')}
@@ -72,7 +72,7 @@ export const SharedSessionBar: React.FC = () => {
           ) : (
             <>
               <Button size="xs" variant="outline" action="secondary" onPress={() => void lockSharedSession('explicit')} testID="shared-bar-lock">
-                <Lock size={12} style={{ marginRight: 4 }} />
+                <Lock size={12} className="text-typography-500" style={{ marginRight: 4 }} />
                 <ButtonText>{t('shared_session.lock')}</ButtonText>
               </Button>
               <Button size="xs" variant="outline" action="negative" onPress={() => setConfirmEnd(true)} testID="shared-bar-end">
@@ -84,7 +84,7 @@ export const SharedSessionBar: React.FC = () => {
       </HStack>
       {idleWarning || shiftEndsSoon ? (
         <HStack space="sm" className="mt-1 items-center justify-between" testID="shared-session-warning">
-          <Text size="xs" className="shrink text-warning-700 dark:text-warning-200" accessibilityLiveRegion="polite">
+          <Text size="xs" className="shrink text-warning-700" accessibilityLiveRegion="polite">
             {[
               idleWarning ? t('shared_session.idle_warning', { time: clockText(remaining ?? 0) }) : null,
               shiftEndsSoon && shiftEndsAt !== null ? t('shared_session.shift_ends_soon', { time: new Date(shiftEndsAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }) : null,
diff --git a/src/components/shared-session/shared-session-lock-screen.tsx b/src/components/shared-session/shared-session-lock-screen.tsx
index 327a594c..2f8ffc5f 100644
--- a/src/components/shared-session/shared-session-lock-screen.tsx
+++ b/src/components/shared-session/shared-session-lock-screen.tsx
@@ -239,11 +239,12 @@ export const SharedSessionLockScreen: React.FC = () => {
 
   return (
     <NativeModal visible={visible} animationType="none" transparent={false} onRequestClose={() => undefined} testID="shared-lock-screen">
-      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', padding: 24 }} keyboardShouldPersistTaps="handled">
+      {/* An opaque Modal paints its own white container, so the page needs a themed background of its own. */}
+      <ScrollView className="bg-background-0" contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', padding: 24 }} keyboardShouldPersistTaps="handled">
         <Box className="w-full max-w-lg self-center">
           <VStack space="md">
             <VStack space="xs" className="items-center">
-              <Lock size={40} />
+              <Lock size={40} className="text-typography-700" />
               <Heading size="lg" className="text-center">
                 {t('shared_session.locked_title')}
               </Heading>
@@ -282,7 +283,7 @@ export const SharedSessionLockScreen: React.FC = () => {
                       />
                     </Input>
                     <Button action="primary" onPress={unlockWithCode} isDisabled={busy || code.trim().length === 0} testID="shared-lock-unlock">
-                      {busy ? <Spinner size="small" /> : <ButtonText>{t('shared_session.unlock')}</ButtonText>}
+                      {busy ? <Spinner size="small" className="text-typography-0" /> : <ButtonText>{t('shared_session.unlock')}</ButtonText>}
                     </Button>
                   </>
                 ) : null}
diff --git a/src/components/sidebar/__tests__/sidebar-content.test.tsx b/src/components/sidebar/__tests__/sidebar-content.test.tsx
index dc65d9ab..a073d710 100644
--- a/src/components/sidebar/__tests__/sidebar-content.test.tsx
+++ b/src/components/sidebar/__tests__/sidebar-content.test.tsx
@@ -160,4 +160,18 @@ describe('Sidebar status buttons', () => {
 
     unmount();
   });
+
+  it.each([false, true])('rings only the current status, without a "Current" badge (hold mode: %s)', (holdMode) => {
+    setCoreState({ holdMode, currentStateId: 10 });
+
+    const { unmount } = render(<Sidebar />);
+    fireEvent.press(screen.getByTestId('sidebar-status-show-all'));
+
+    expect(screen.getByTestId('sidebar-status-current-ring-10')).toBeTruthy();
+    expect(screen.queryByTestId('sidebar-status-current-ring-11')).toBeNull();
+    expect(screen.queryByTestId('sidebar-status-current-ring-12')).toBeNull();
+    expect(screen.queryByText('status.current')).toBeNull();
+
+    unmount();
+  });
 });
diff --git a/src/components/sidebar/__tests__/status-sidebar.test.tsx b/src/components/sidebar/__tests__/status-sidebar.test.tsx
index f88ab145..cb8d80af 100644
--- a/src/components/sidebar/__tests__/status-sidebar.test.tsx
+++ b/src/components/sidebar/__tests__/status-sidebar.test.tsx
@@ -103,6 +103,32 @@ describe('SidebarStatusCard', () => {
       });
     });
 
+    it('should give the label a fixed contrasting colour on a hex status colour', () => {
+      const cases = [
+        { StateStyle: 'label-warning', color: '#000000' },
+        { StateStyle: 'label-default', color: '#FFFFFF' },
+      ];
+
+      cases.forEach(({ StateStyle, color }) => {
+        const mockStatus = createMockStatus({ State: `Status ${StateStyle}`, StateStyle });
+        mockUseCoreStore.mockImplementation((selector: any) => (typeof selector === 'function' ? selector({ activeUnitStatus: mockStatus }) : { activeUnitStatus: mockStatus }));
+
+        const { getByText, unmount } = render(<SidebarStatusCard />);
+        expect(getByText(`Status ${StateStyle}`).props.style).toEqual(expect.objectContaining({ color }));
+        unmount();
+      });
+    });
+
+    it('should leave the themed label colour alone when the status has no hex colour', () => {
+      const mockStatus = createMockStatus({ State: 'Returning', StateStyle: 'label-returning' });
+      mockUseCoreStore.mockImplementation((selector: any) => (typeof selector === 'function' ? selector({ activeUnitStatus: mockStatus }) : { activeUnitStatus: mockStatus }));
+
+      const { getByText, unmount } = render(<SidebarStatusCard />);
+      const style = getByText('Returning').props.style;
+      expect(style?.color).toBeUndefined();
+      unmount();
+    });
+
     it('should handle unknown status styles by keeping original value', () => {
       const mockStatus = createMockStatus({
         State: 'Test Status',
diff --git a/src/components/sidebar/call-sidebar.tsx b/src/components/sidebar/call-sidebar.tsx
index fe30ac49..0086f162 100644
--- a/src/components/sidebar/call-sidebar.tsx
+++ b/src/components/sidebar/call-sidebar.tsx
@@ -258,7 +258,7 @@ export const SidebarCallCard = () => {
                       });
                     }}
                     className={`rounded-lg border p-4 ${colorScheme === 'dark' ? 'border-neutral-800 bg-neutral-800' : 'border-neutral-200 bg-neutral-50'} ${
-                      activeCall?.CallId === call.CallId ? (colorScheme === 'dark' ? 'bg-primary-900' : 'bg-primary-50') : ''
+                      activeCall?.CallId === call.CallId ? (colorScheme === 'dark' ? 'bg-primary-100' : 'bg-primary-50') : ''
                     }`}
                     testID={`call-item-${call.CallId}`}
                   >
diff --git a/src/components/sidebar/sidebar-content.tsx b/src/components/sidebar/sidebar-content.tsx
index e3332859..a3088ed9 100644
--- a/src/components/sidebar/sidebar-content.tsx
+++ b/src/components/sidebar/sidebar-content.tsx
@@ -4,13 +4,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 
+import { CurrentStatusRing } from '@/components/status/current-status-ring';
 import { HoldToConfirmButton } from '@/components/status/hold-to-confirm-button';
 import { Button, ButtonText } from '@/components/ui/button';
 import { HStack } from '@/components/ui/hstack';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { getOfferedStatuses, resolveCurrentStatusId } from '@/lib/status-flow';
-import { invertColor } from '@/lib/utils';
+import { readableColors } from '@/lib/utils';
 import { useCoreStore } from '@/stores/app/core-store';
 import { useIsChatEnabled, useIsChecklistsEnabled, useIsDeploymentsEnabled, useIsRecordsFieldEnabled } from '@/stores/feature-flags/store';
 import { useStatusBottomSheetStore } from '@/stores/status/store';
@@ -23,6 +24,10 @@ import { SidebarRolesCard } from './roles-sidebar';
 import { SidebarStatusCard } from './status-sidebar';
 import { SidebarUnitCard } from './unit-sidebar';
 
+/** Corner radii of the two status button kinds (gluestack `rounded`, HoldToConfirmButton), for the current-status ring. */
+const BUTTON_RADIUS = 4;
+const HOLD_BUTTON_RADIUS = 8;
+
 interface SidebarProps {
   onClose?: () => void;
 }
@@ -45,7 +50,7 @@ const Sidebar = ({ onClose }: SidebarProps) => {
 
   const isActiveStatusesEmpty = !activeStatuses?.Statuses || activeStatuses.Statuses.length === 0;
 
-  // Same status flow as the status sheet: the current status is outlined, and a status with next statuses
+  // Same status flow as the status sheet: the current status is ringed, and a status with next statuses
   // configured narrows the buttons to those until the crew asks for all of them.
   const currentStatusId = React.useMemo(() => {
     if (!activeUnitStatus || (activeUnitId && activeUnitStatus.UnitId && String(activeUnitStatus.UnitId) !== String(activeUnitId))) {
@@ -189,42 +194,30 @@ const Sidebar = ({ onClose }: SidebarProps) => {
           <VStack space="sm" className="mb-4 w-full">
             {offeredStatuses.offered.map((status) => {
               const isCurrent = String(status.Id) === currentStatusId;
-              // invertColor throws on a non-hex value, so an option without a color falls back to white like the status sheet.
-              const background = status.BColor || '#ffffff';
-              const foreground = invertColor(background, true);
+              // An option without a color falls back to white like the status sheet.
+              const { backgroundColor: background, textColor: foreground } = readableColors(status.BColor, '#ffffff');
               const label = (
-                <HStack space="xs" className="items-center justify-center">
-                  <ButtonText numberOfLines={1} style={{ color: foreground, flexShrink: 1 }}>
-                    {status.Text}
-                  </ButtonText>
-                  {isCurrent ? (
-                    <View style={styles.currentPill}>
-                      <Text style={styles.currentPillText}>{t('status.current')}</Text>
-                    </View>
-                  ) : null}
-                </HStack>
+                <ButtonText numberOfLines={1} style={[styles.labelText, { color: foreground }]}>
+                  {status.Text}
+                </ButtonText>
               );
+              const accessibilityLabel = isCurrent ? `${status.Text}, ${t('status.current')}` : undefined;
 
-              if (isHoldMode) {
-                return (
-                  <HoldToConfirmButton
-                    key={status.Id}
-                    testID={`sidebar-status-hold-${status.Id}`}
-                    onConfirm={() => setIsOpen(true, status, { holdConfirmed: true })}
-                    onTap={() => showToast('info', t('status.hold_to_set_hint'))}
-                    backgroundColor={background}
-                    foregroundColor={foreground}
-                    style={isCurrent ? styles.currentOutline : null}
-                    contentStyle={styles.holdContent}
-                    accessibilityLabel={isCurrent ? `${status.Text}, ${t('status.current')}` : status.Text}
-                    accessibilityHint={t('status.hold_to_set_hint')}
-                  >
-                    {label}
-                  </HoldToConfirmButton>
-                );
-              }
-
-              return (
+              const button = isHoldMode ? (
+                <HoldToConfirmButton
+                  key={status.Id}
+                  testID={`sidebar-status-hold-${status.Id}`}
+                  onConfirm={() => setIsOpen(true, status, { holdConfirmed: true })}
+                  onTap={() => showToast('info', t('status.hold_to_set_hint'))}
+                  backgroundColor={background}
+                  foregroundColor={foreground}
+                  contentStyle={styles.holdContent}
+                  accessibilityLabel={accessibilityLabel ?? status.Text}
+                  accessibilityHint={t('status.hold_to_set_hint')}
+                >
+                  {label}
+                </HoldToConfirmButton>
+              ) : (
                 <Button
                   key={status.Id}
                   testID={`sidebar-status-${status.Id}`}
@@ -232,13 +225,22 @@ const Sidebar = ({ onClose }: SidebarProps) => {
                   className="w-full justify-center overflow-visible px-3 py-2"
                   action="primary"
                   size="lg"
-                  style={[{ backgroundColor: background }, isCurrent ? styles.currentOutline : null]}
+                  style={{ backgroundColor: background }}
                   onPress={() => setIsOpen(true, status)}
-                  accessibilityLabel={isCurrent ? `${status.Text}, ${t('status.current')}` : undefined}
+                  accessibilityLabel={accessibilityLabel}
                 >
                   {label}
                 </Button>
               );
+
+              return isCurrent ? (
+                <View key={status.Id}>
+                  <CurrentStatusRing radius={isHoldMode ? HOLD_BUTTON_RADIUS : BUTTON_RADIUS} testID={`sidebar-status-current-ring-${status.Id}`} />
+                  {button}
+                </View>
+              ) : (
+                button
+              );
             })}
 
             {offeredStatuses.isRestricted ? (
@@ -258,21 +260,9 @@ const Sidebar = ({ onClose }: SidebarProps) => {
 };
 
 const styles = StyleSheet.create({
-  currentOutline: {
-    borderWidth: 3,
-    borderColor: '#dc2626',
-  },
-  currentPill: {
-    backgroundColor: '#dc2626',
-    borderRadius: 999,
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-  },
-  currentPillText: {
-    color: '#ffffff',
-    fontSize: 10,
-    fontWeight: '700',
-    textTransform: 'uppercase',
+  labelText: {
+    flexShrink: 1,
+    textAlign: 'center',
   },
   holdContent: {
     paddingHorizontal: 12,
diff --git a/src/components/sidebar/status-sidebar.tsx b/src/components/sidebar/status-sidebar.tsx
index 755834f2..141d07aa 100644
--- a/src/components/sidebar/status-sidebar.tsx
+++ b/src/components/sidebar/status-sidebar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Text } from '@/components/ui/text';
+import { readableTextColor } from '@/lib/utils';
 import { useCoreStore } from '@/stores/app/core-store';
 
 import { Card } from '../ui/card';
@@ -33,9 +34,14 @@ export const SidebarStatusCard = () => {
     displayColor = '#449d44';
   }
 
+  // A status colour is fixed in both themes, so the themed text colour can vanish against it; pick black or white instead.
+  const foreground = readableTextColor(displayColor);
+
   return (
     <Card className="flex-1 bg-background-50" style={{ backgroundColor: displayColor }} testID="status-card">
-      <Text className="font-medium">{displayStatus}</Text>
+      <Text className="font-medium" style={foreground ? { color: foreground } : undefined}>
+        {displayStatus}
+      </Text>
     </Card>
   );
 };
diff --git a/src/components/status/__tests__/current-status-ring.test.tsx b/src/components/status/__tests__/current-status-ring.test.tsx
new file mode 100644
index 00000000..4ef75e47
--- /dev/null
+++ b/src/components/status/__tests__/current-status-ring.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { CURRENT_STATUS_RING_OUTSET, CurrentStatusRing } from '../current-status-ring';
+
+describe('CurrentStatusRing', () => {
+  it('sits just outside the button with corners that follow it', () => {
+    render(<CurrentStatusRing radius={8} testID="ring" />);
+
+    const ring = screen.getByTestId('ring');
+    const style = StyleSheet.flatten(ring.props.style);
+
+    expect(style).toMatchObject({
+      position: 'absolute',
+      top: -CURRENT_STATUS_RING_OUTSET,
+      right: -CURRENT_STATUS_RING_OUTSET,
+      bottom: -CURRENT_STATUS_RING_OUTSET,
+      left: -CURRENT_STATUS_RING_OUTSET,
+      borderRadius: 8 + CURRENT_STATUS_RING_OUTSET,
+    });
+  });
+
+  it('never takes touches meant for the button', () => {
+    render(<CurrentStatusRing radius={4} testID="ring" />);
+
+    expect(screen.getByTestId('ring').props.pointerEvents).toBe('none');
+  });
+});
diff --git a/src/components/status/__tests__/status-bottom-sheet-submission.test.tsx b/src/components/status/__tests__/status-bottom-sheet-submission.test.tsx
index c778bebc..6135e41a 100644
--- a/src/components/status/__tests__/status-bottom-sheet-submission.test.tsx
+++ b/src/components/status/__tests__/status-bottom-sheet-submission.test.tsx
@@ -52,7 +52,7 @@ jest.mock('../../ui/textarea', () => ({
 }));
 jest.mock('nativewind', () => ({ useColorScheme: () => ({ colorScheme: 'light' }), styled: (component: any) => component, cssInterop: (component: any) => component }));
 jest.mock('lucide-react-native', () => new Proxy({}, { get: () => () => null }));
-jest.mock('@/lib/utils', () => ({ invertColor: () => '#000000' }));
+jest.mock('@/lib/utils', () => ({ readableColors: (color?: string, fallback = '#808080') => ({ backgroundColor: color || fallback, textColor: '#000000' }) }));
 jest.mock('@/lib/logging', () => ({ logger: { debug: jest.fn(), info: jest.fn(), warn: jest.fn(), error: jest.fn() } }));
 
 jest.mock('@/services/location-fix', () => ({
diff --git a/src/components/status/__tests__/status-bottom-sheet.test.tsx b/src/components/status/__tests__/status-bottom-sheet.test.tsx
index 57c826d6..896b823c 100644
--- a/src/components/status/__tests__/status-bottom-sheet.test.tsx
+++ b/src/components/status/__tests__/status-bottom-sheet.test.tsx
@@ -124,7 +124,7 @@ jest.mock('nativewind', () => ({
 jest.mock('@/lib/utils', () => ({
   IS_ANDROID: false,
   IS_IOS: true,
-  invertColor: jest.fn(() => '#000000'),
+  readableColors: jest.fn((color?: string, fallback = '#808080') => ({ backgroundColor: color || fallback, textColor: '#000000' })),
   createSelectors: jest.fn(),
   openLinkInBrowser: jest.fn(),
   DEFAULT_CENTER_COORDINATE: [-77.036086, 38.910233],
@@ -3691,7 +3691,7 @@ describe('StatusBottomSheet', () => {
   });
 
   // New tests for color scheme functionality
-  it('should use BColor for background and invertColor for text color in status selection', () => {
+  it('should use BColor for background and a contrasting text color in status selection', () => {
     const statusWithBColor = {
       Id: 1,
       Type: 1,
@@ -4237,7 +4237,7 @@ describe('StatusBottomSheet', () => {
       jest.useRealTimers();
     });
 
-    it('offers only the next statuses and keeps the current one visible, outlined', () => {
+    it('offers only the next statuses and keeps the current one visible, ringed', () => {
       setCoreStore({});
       mountStatefulSheetStore();
 
@@ -4246,8 +4246,9 @@ describe('StatusBottomSheet', () => {
       expect(screen.getByText('On Scene')).toBeTruthy();
       expect(screen.queryByText('Available')).toBeNull();
       expect(screen.getByTestId('status-current-banner')).toBeTruthy();
+      expect(screen.getByTestId('status-current-banner-ring')).toBeTruthy();
       expect(screen.getByText('Departed')).toBeTruthy();
-      expect(screen.getByText('status.current')).toBeTruthy();
+      expect(screen.queryByText('status.current')).toBeNull();
       expect(screen.getByText('status.show_all_statuses')).toBeTruthy();
     });
 
@@ -4262,6 +4263,9 @@ describe('StatusBottomSheet', () => {
       expect(screen.getByText('On Scene')).toBeTruthy();
       expect(screen.queryByTestId('status-current-banner')).toBeNull();
       expect(screen.getByTestId('status-option-12').props.accessibilityLabel).toBe('Departed, status.current');
+      expect(screen.getByTestId('status-current-ring-12')).toBeTruthy();
+      expect(screen.queryByTestId('status-current-ring-10')).toBeNull();
+      expect(screen.queryByText('status.current')).toBeNull();
       expect(screen.getByTestId('status-show-next')).toBeTruthy();
     });
 
diff --git a/src/components/status/current-status-ring.tsx b/src/components/status/current-status-ring.tsx
new file mode 100644
index 00000000..77c130d7
--- /dev/null
+++ b/src/components/status/current-status-ring.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+/** The gap between the button and the ring, then the ring's own line. */
+const RING_GAP = 2;
+const RING_WIDTH = 2;
+
+/** How far the ring reaches outside the button; the container needs this much room so it is not clipped. */
+export const CURRENT_STATUS_RING_OUTSET = RING_GAP + RING_WIDTH;
+
+interface CurrentStatusRingProps {
+  /** Corner radius of the button it surrounds, so the ring's corners follow it. */
+  radius: number;
+  testID?: string;
+}
+
+/**
+ * Marks the unit's current status with a thin ring just outside its button: a small gap, then a neutral line
+ * that follows the theme. Keeping it off the button means it shows whatever colour the status is.
+ *
+ * Render it first inside a plain wrapper around the button; it takes no space of its own.
+ */
+export const CurrentStatusRing: React.FC<CurrentStatusRingProps> = React.memo(({ radius, testID }) => (
+  <View pointerEvents="none" testID={testID} className="border-gray-500 dark:border-gray-400" style={[styles.ring, { borderRadius: radius + CURRENT_STATUS_RING_OUTSET }]} />
+));
+
+CurrentStatusRing.displayName = 'CurrentStatusRing';
+
+const styles = StyleSheet.create({
+  ring: {
+    position: 'absolute',
+    top: -CURRENT_STATUS_RING_OUTSET,
+    right: -CURRENT_STATUS_RING_OUTSET,
+    bottom: -CURRENT_STATUS_RING_OUTSET,
+    left: -CURRENT_STATUS_RING_OUTSET,
+    borderWidth: RING_WIDTH,
+  },
+});
diff --git a/src/components/status/status-bottom-sheet.tsx b/src/components/status/status-bottom-sheet.tsx
index dc07c704..cd1ab94f 100644
--- a/src/components/status/status-bottom-sheet.tsx
+++ b/src/components/status/status-bottom-sheet.tsx
@@ -10,7 +10,7 @@ import { logger } from '@/lib/logging';
 import { createPoiTypeMap, getPoiSelectionLabel } from '@/lib/poi-utils';
 import { getUnitStatusCallDestinationId, resolveDefaultStatusCall } from '@/lib/status-destination';
 import { canSubmitStatusWithoutInput, getOfferedStatuses, resolveCurrentStatusId } from '@/lib/status-flow';
-import { invertColor } from '@/lib/utils';
+import { readableColors } from '@/lib/utils';
 import { type CallResultData } from '@/models/v4/calls/callResultData';
 import { CustomStateDetailTypes, statusDetailAllowsCalls, statusDetailAllowsPois, statusDetailAllowsStations } from '@/models/v4/customStatuses/customStateDetailTypes';
 import { DestinationEntityTypes } from '@/models/v4/destinations/destinationEntityTypes';
@@ -34,10 +34,11 @@ import { Spinner } from '../ui/spinner';
 import { Text } from '../ui/text';
 import { Textarea, TextareaInput } from '../ui/textarea';
 import { VStack } from '../ui/vstack';
+import { CURRENT_STATUS_RING_OUTSET, CurrentStatusRing } from './current-status-ring';
 import { HoldToConfirmButton } from './hold-to-confirm-button';
 
-/** The red outline that marks the unit's current status (crews asked for it to be unmistakable). */
-const CURRENT_STATUS_BORDER = '#dc2626';
+/** Corner radius of a status option (`rounded-lg`, HoldToConfirmButton) and the current-status banner, for the ring. */
+const OPTION_RADIUS = 8;
 
 type DestinationTab = 'call' | 'station' | 'poi';
 
@@ -923,17 +924,17 @@ export const StatusBottomSheet = () => {
       return null;
     }
 
-    const summaryBackground = selectedStatus.BColor || '#f3f4f6';
+    const summaryColors = readableColors(selectedStatus.BColor, '#f3f4f6');
     const destinationText = getSelectedDestinationDisplay();
 
     return (
-      <HStack className="w-full items-center rounded-lg px-3 py-2" style={{ backgroundColor: summaryBackground }}>
+      <HStack className="w-full items-center rounded-lg px-3 py-2" style={{ backgroundColor: summaryColors.backgroundColor }}>
         <Text
           testID="status-summary"
           className="flex-1 font-bold"
           numberOfLines={1}
           accessibilityLabel={`${t('status.selected_status')}: ${selectedStatus.Text}, ${t('status.selected_destination')}: ${destinationText}`}
-          style={{ color: invertColor(summaryBackground, true) }}
+          style={{ color: summaryColors.textColor }}
         >
           {`${selectedStatus.Text} · ${destinationText}`}
         </Text>
@@ -944,7 +945,7 @@ export const StatusBottomSheet = () => {
   const renderSubmitButtonContent = () => (
     <>
       {isSubmitting ? <Spinner size="small" color="white" /> : null}
-      <ButtonText className="text-sm">{isSubmitting ? t('common.submitting') : t('common.submit')}</ButtonText>
+      <ButtonText className="text-sm text-white">{isSubmitting ? t('common.submitting') : t('common.submit')}</ButtonText>
     </>
   );
 
@@ -985,7 +986,7 @@ export const StatusBottomSheet = () => {
           renderSubmitButtonContent()
         ) : (
           <>
-            <ButtonText className="text-sm">{t('common.next')}</ButtonText>
+            <ButtonText className="text-sm text-white">{t('common.next')}</ButtonText>
             <ArrowRight size={14} color="#fff" />
           </>
         )}
@@ -993,25 +994,18 @@ export const StatusBottomSheet = () => {
     );
   };
 
-  const renderCurrentPill = () => (
-    <View style={styles.currentPill}>
-      <Text style={styles.currentPillText}>{t('status.current')}</Text>
-    </View>
-  );
-
   const renderCurrentStatusBanner = (status: StatusesResultData) => {
-    const background = status.BColor || '#ffffff';
-    const foreground = invertColor(background, true);
+    const { backgroundColor: background, textColor: foreground } = readableColors(status.BColor, '#ffffff');
 
     return (
-      <View testID="status-current-banner" style={[styles.currentBanner, { backgroundColor: background }]}>
-        <Text style={[styles.currentBannerCaption, { color: foreground }]}>{t('status.current_status')}</Text>
-        <HStack space="sm" className="items-center">
-          <Text className="flex-1 font-bold" style={{ color: foreground }}>
+      <View>
+        <CurrentStatusRing radius={OPTION_RADIUS} testID="status-current-banner-ring" />
+        <View testID="status-current-banner" style={[styles.currentBanner, { backgroundColor: background }]}>
+          <Text style={[styles.currentBannerCaption, { color: foreground }]}>{t('status.current_status')}</Text>
+          <Text className="font-bold" style={{ color: foreground }}>
             {status.Text}
           </Text>
-          {renderCurrentPill()}
-        </HStack>
+        </View>
       </View>
     );
   };
@@ -1019,25 +1013,33 @@ export const StatusBottomSheet = () => {
   const renderStatusOption = (status: StatusesResultData) => {
     const statusDetailDescription = getStatusDetailDescription(Number(status.Detail));
     const isCurrent = String(status.Id) === currentStatusId;
-    const background = status.BColor || '#ffffff';
-    const foreground = invertColor(background, true);
+    const { backgroundColor: background, textColor: foreground } = readableColors(status.BColor, '#ffffff');
 
     const details = (
       <VStack className="flex-1">
-        <HStack space="sm" className="items-center">
-          <Text className="flex-1 font-bold" style={{ color: foreground }}>
-            {status.Text}
+        <Text className="font-bold" style={{ color: foreground }}>
+          {status.Text}
+        </Text>
+        {/* These sit on the status's own fixed colour, so they follow its foreground rather than the theme. */}
+        {Number(status.Detail) > 0 ? (
+          <Text className="text-sm" style={{ color: foreground, opacity: 0.8 }}>
+            {statusDetailDescription}
           </Text>
-          {isCurrent ? renderCurrentPill() : null}
-        </HStack>
-        {Number(status.Detail) > 0 ? <Text className="text-sm text-gray-600 dark:text-gray-400">{statusDetailDescription}</Text> : null}
-        {Number(status.Note) > 0 ? <Text className="text-xs text-gray-500 dark:text-gray-500">{Number(status.Note) === 1 ? t('status.note_optional') : t('status.note_required')}</Text> : null}
+        ) : null}
+        {Number(status.Note) > 0 ? (
+          <Text className="text-xs" style={{ color: foreground, opacity: 0.7 }}>
+            {Number(status.Note) === 1 ? t('status.note_optional') : t('status.note_required')}
+          </Text>
+        ) : null}
       </VStack>
     );
 
+    const ring = isCurrent ? <CurrentStatusRing radius={OPTION_RADIUS} testID={`status-current-ring-${status.Id}`} /> : null;
+
     if (isHoldMode) {
       return (
         <View key={status.Id} className="mb-3">
+          {ring}
           <HoldToConfirmButton
             testID={`status-hold-${status.Id}`}
             onConfirm={() => handleStatusHold(status.Id.toString())}
@@ -1045,7 +1047,7 @@ export const StatusBottomSheet = () => {
             disabled={isSubmitting || holdConfirmed}
             backgroundColor={background}
             foregroundColor={foreground}
-            style={isCurrent ? styles.currentOutline : styles.optionOutline}
+            style={styles.optionOutline}
             contentStyle={styles.holdOptionContent}
             accessibilityLabel={isCurrent ? `${status.Text}, ${t('status.current')}` : status.Text}
             accessibilityHint={t('status.hold_to_set_hint')}
@@ -1059,19 +1061,21 @@ export const StatusBottomSheet = () => {
     const isSelected = selectedStatus?.Id.toString() === status.Id.toString();
 
     return (
-      <TouchableOpacity
-        key={status.Id}
-        testID={`status-option-${status.Id}`}
-        onPress={() => handleStatusSelect(status.Id.toString())}
-        className={`mb-3 rounded-lg border-2 p-3 ${isSelected ? 'border-blue-500' : 'border-gray-200 dark:border-gray-700'}`}
-        style={[{ backgroundColor: status.BColor || (isSelected ? '#dbeafe' : '#ffffff') }, isCurrent && !isSelected ? styles.currentOutline : null]}
-        accessibilityLabel={isCurrent ? `${status.Text}, ${t('status.current')}` : undefined}
-      >
-        <HStack space="sm" className="items-center">
-          <Check size={20} color={isSelected ? '#3b82f6' : 'transparent'} />
-          {details}
-        </HStack>
-      </TouchableOpacity>
+      <View key={status.Id} className="mb-3">
+        {ring}
+        <TouchableOpacity
+          testID={`status-option-${status.Id}`}
+          onPress={() => handleStatusSelect(status.Id.toString())}
+          className={`rounded-lg border-2 p-3 ${isSelected ? 'border-blue-500' : 'border-gray-200 dark:border-gray-700'}`}
+          style={{ backgroundColor: status.BColor ? background : isSelected ? '#dbeafe' : '#ffffff' }}
+          accessibilityLabel={isCurrent ? `${status.Text}, ${t('status.current')}` : undefined}
+        >
+          <HStack space="sm" className="items-center">
+            <Check size={20} color={isSelected ? '#3b82f6' : 'transparent'} />
+            {details}
+          </HStack>
+        </TouchableOpacity>
+      </View>
     );
   };
 
@@ -1122,7 +1126,8 @@ export const StatusBottomSheet = () => {
               {/* The current status stays visible even when the list only offers what follows it. */}
               {currentStatus && !offeredStatuses.offered.some((status) => String(status.Id) === currentStatusId) ? renderCurrentStatusBanner(currentStatus) : null}
 
-              <ScrollView className="flex-1">
+              {/* Pulled out by the ring's reach and padded back, so the current status's ring is not clipped. */}
+              <ScrollView className="flex-1" style={styles.optionList} contentContainerStyle={styles.optionListContent}>
                 <VStack space="sm">
                   {offeredStatuses.offered.length > 0 ? (
                     offeredStatuses.offered.map((status) => renderStatusOption(status))
@@ -1422,30 +1427,18 @@ const styles = StyleSheet.create({
   holdOptionContent: {
     padding: 12,
   },
+  optionList: {
+    marginHorizontal: -CURRENT_STATUS_RING_OUTSET,
+  },
+  optionListContent: {
+    padding: CURRENT_STATUS_RING_OUTSET,
+  },
   optionOutline: {
     borderWidth: 2,
     borderColor: 'transparent',
   },
-  currentOutline: {
-    borderWidth: 3,
-    borderColor: CURRENT_STATUS_BORDER,
-  },
-  currentPill: {
-    backgroundColor: CURRENT_STATUS_BORDER,
-    borderRadius: 999,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-  },
-  currentPillText: {
-    color: '#ffffff',
-    fontSize: 11,
-    fontWeight: '700',
-    textTransform: 'uppercase',
-  },
   currentBanner: {
-    borderWidth: 3,
-    borderColor: CURRENT_STATUS_BORDER,
-    borderRadius: 8,
+    borderRadius: OPTION_RADIUS,
     paddingHorizontal: 12,
     paddingVertical: 8,
   },
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
index 95b88f7e..3ffde54c 100644
--- a/src/components/toast/toast.tsx
+++ b/src/components/toast/toast.tsx
@@ -16,10 +16,11 @@ export const ToastMessage: React.FC<{
   const { t } = useTranslation();
 
   return (
+    // typography-0 flips against the toast backgrounds (dark in light mode, pastel in dark mode); a fixed white vanishes in dark mode.
     <Toast className="rounded-lg border" action={type}>
       <VStack space="xs">
-        {title && <ToastTitle className="font-medium text-white">{t(title)}</ToastTitle>}
-        <ToastDescription className="text-white">{t(message)}</ToastDescription>
+        {title && <ToastTitle className="font-medium">{t(title)}</ToastTitle>}
+        <ToastDescription className="text-typography-0">{t(message)}</ToastDescription>
       </VStack>
     </Toast>
   );
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index c76b1bc0..511cc2c3 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -140,7 +140,7 @@ const buttonTextStyle = tva({
     {
       variant: 'outline',
       action: 'primary',
-      class: 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+      class: 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
     },
     {
       variant: 'outline',
diff --git a/src/components/ui/focus-aware-status-bar.tsx b/src/components/ui/focus-aware-status-bar.tsx
index 07646769..f564d7ff 100644
--- a/src/components/ui/focus-aware-status-bar.tsx
+++ b/src/components/ui/focus-aware-status-bar.tsx
@@ -61,7 +61,7 @@ function FocusAwareStatusBarInner({ hidden = false }: Props) {
   if (Platform.OS === 'web') return null;
 
   // Only render SystemBars when focused and on supported platforms
-  return isFocused && (Platform.OS === 'android' || Platform.OS === 'ios') ? <SystemBars style={colorScheme === 'dark' ? 'dark' : 'light'} hidden={{ statusBar: hidden, navigationBar: true }} /> : null;
+  return isFocused && (Platform.OS === 'android' || Platform.OS === 'ios') ? <SystemBars style={colorScheme === 'dark' ? 'light' : 'dark'} hidden={{ statusBar: hidden, navigationBar: true }} /> : null;
 }
 
 export const FocusAwareStatusBar = (props: Props) => {
diff --git a/src/components/ui/lucide-icons.tsx b/src/components/ui/lucide-icons.tsx
index 492066c5..e50cb4bc 100644
--- a/src/components/ui/lucide-icons.tsx
+++ b/src/components/ui/lucide-icons.tsx
@@ -2,6 +2,7 @@ import {
   AlertCircle as RawAlertCircle,
   AlertTriangle as RawAlertTriangle,
   ArrowLeft as RawArrowLeft,
+  ArrowRight as RawArrowRight,
   Bell as RawBell,
   BluetoothIcon as RawBluetoothIcon,
   Box as RawBox,
@@ -45,6 +46,7 @@ import {
   Settings as RawSettings,
   SettingsIcon as RawSettingsIcon,
   ShieldCheck as RawShieldCheck,
+  ShieldIcon as RawShieldIcon,
   SmartphoneIcon as RawSmartphoneIcon,
   Speaker as RawSpeaker,
   StarIcon as RawStarIcon,
@@ -91,6 +93,7 @@ const themed = <T extends LucideIcon>(Component: T): T => styled(Component as Lu
 export const AlertCircle = themed(RawAlertCircle);
 export const AlertTriangle = themed(RawAlertTriangle);
 export const ArrowLeft = themed(RawArrowLeft);
+export const ArrowRight = themed(RawArrowRight);
 export const Bell = themed(RawBell);
 export const BluetoothIcon = themed(RawBluetoothIcon);
 export const Box = themed(RawBox);
@@ -133,6 +136,7 @@ export const SearchIcon = themed(RawSearchIcon);
 export const Settings = themed(RawSettings);
 export const SettingsIcon = themed(RawSettingsIcon);
 export const ShieldCheck = themed(RawShieldCheck);
+export const ShieldIcon = themed(RawShieldIcon);
 export const Truck = themed(RawTruck);
 export const SmartphoneIcon = themed(RawSmartphoneIcon);
 export const Speaker = themed(RawSpeaker);
diff --git a/src/components/ui/progress/index.tsx b/src/components/ui/progress/index.tsx
index fb64f875..da1c2e46 100644
--- a/src/components/ui/progress/index.tsx
+++ b/src/components/ui/progress/index.tsx
@@ -11,7 +11,7 @@ export const UIProgress = createProgress({
 });
 
 const progressStyle = tva({
-  base: 'bg-background-300 rounded-full w-full',
+  base: 'bg-background-200 rounded-full w-full',
   variants: {
     size: {
       xs: 'h-1',
@@ -24,7 +24,7 @@ const progressStyle = tva({
   },
 });
 const progressFilledTrackStyle = tva({
-  base: 'bg-primary-500 rounded-full',
+  base: 'bg-primary-600 rounded-full',
   parentVariants: {
     size: {
       xs: 'h-1',
diff --git a/src/components/ui/shared-tabs.tsx b/src/components/ui/shared-tabs.tsx
index 57c4995b..5cd67fec 100644
--- a/src/components/ui/shared-tabs.tsx
+++ b/src/components/ui/shared-tabs.tsx
@@ -62,7 +62,7 @@ const getBadgeContainerClassName = (badgeVariant: TabItem['badgeVariant']): stri
 };
 
 const getBadgeTextClassName = (badgeVariant: TabItem['badgeVariant']): string => {
-  const textClassName = badgeVariant === 'warning' ? 'text-typography-950' : 'text-typography-white';
+  const textClassName = badgeVariant === 'warning' ? 'text-typography-black' : 'text-typography-white';
   return `text-2xs font-bold ${textClassName}`;
 };
 
@@ -144,10 +144,21 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
   );
 
   // Get appropriate text color based on theme
-  const getTextColor = () => {
+  // Pills and segmented tabs fill the active tab with primary, so its label and icon go white.
+  const isFilledActive = (index: number) => index === currentIndex && (variant === 'pills' || variant === 'segmented');
+
+  const getTextColor = (index: number) => {
+    if (isFilledActive(index)) return 'text-white';
     return colorScheme === 'dark' ? 'text-gray-200' : 'text-gray-800';
   };
 
+  // Tab icons are usually raw lucide icons, whose default stroke is black; give them the label colour unless the caller chose one.
+  const renderIcon = (icon: React.ReactNode, index: number) => {
+    if (!React.isValidElement<{ color?: string }>(icon) || icon.props.color !== undefined) return icon;
+    const color = isFilledActive(index) ? '#ffffff' : colorScheme === 'dark' ? '#e5e7eb' : '#1f2937';
+    return React.cloneElement(icon, { color });
+  };
+
   // Determine tab styles based on variant and size
   const getTabStyles = (index: number) => {
     const isActive = index === currentIndex;
@@ -160,9 +171,9 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
     }[size];
 
     const variantStyles = {
-      default: isActive ? 'border-b-2 border-primary-500 text-primary-500' : `border-b-2 border-transparent ${colorScheme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`,
+      default: isActive ? 'border-b-2 border-primary-600 text-primary-600' : `border-b-2 border-transparent ${colorScheme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`,
       pills: isActive ? 'bg-primary-500 text-white rounded-full' : `bg-transparent ${colorScheme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`,
-      underlined: isActive ? 'border-b-2 border-primary-500 text-primary-500' : `border-b-2 border-transparent ${colorScheme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`,
+      underlined: isActive ? 'border-b-2 border-primary-600 text-primary-600' : `border-b-2 border-transparent ${colorScheme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`,
       segmented: isActive ? 'bg-primary-500 text-white' : `${colorScheme === 'dark' ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-500'}`,
     }[variant];
 
@@ -222,13 +233,13 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
             {tabs.map((tab, index) => (
               <Pressable key={tab.key} testID={`shared-tab-${tab.key}`} className={`${getTabStyles(index)} relative`} style={styles.scrollableTab} onPress={() => handleTabPress(index)}>
                 <Box className="flex-row items-center justify-center">
-                  {tab.icon ? <Box className={isLandscape ? 'mr-1.5' : 'mr-1'}>{tab.icon}</Box> : null}
+                  {tab.icon ? <Box className={isLandscape ? 'mr-1.5' : 'mr-1'}>{renderIcon(tab.icon, index)}</Box> : null}
                   {typeof tab.title === 'string' ? (
-                    <Text className={isLandscape ? getTextColor() : `text-xs ${getTextColor()}`} numberOfLines={1} style={styles.tabLabel}>
+                    <Text className={isLandscape ? getTextColor(index) : `text-xs ${getTextColor(index)}`} numberOfLines={1} style={styles.tabLabel}>
                       {t(tab.title)}
                     </Text>
                   ) : (
-                    <Text className={isLandscape ? getTextColor() : `text-xs ${getTextColor()}`} numberOfLines={1} style={styles.tabLabel}>
+                    <Text className={isLandscape ? getTextColor(index) : `text-xs ${getTextColor(index)}`} numberOfLines={1} style={styles.tabLabel}>
                       {tab.title}
                     </Text>
                   )}
@@ -245,24 +256,14 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
           </ScrollView>
 
           {showOverflowIndicators && overflowState.canScrollLeft ? (
-            <Box
-              pointerEvents="none"
-              testID="shared-tabs-left-overflow"
-              className="absolute bottom-0 left-0 top-0 items-center justify-center bg-background-0/95 dark:bg-background-950/95"
-              style={styles.overflowIndicator}
-            >
-              <ChevronLeft size={20} className="text-typography-700 dark:text-typography-200" />
+            <Box pointerEvents="none" testID="shared-tabs-left-overflow" className="absolute bottom-0 left-0 top-0 items-center justify-center bg-background-0/95" style={styles.overflowIndicator}>
+              <ChevronLeft size={20} className="text-typography-700" />
             </Box>
           ) : null}
 
           {showOverflowIndicators && overflowState.canScrollRight ? (
-            <Box
-              pointerEvents="none"
-              testID="shared-tabs-right-overflow"
-              className="absolute bottom-0 right-0 top-0 items-center justify-center bg-background-0/95 dark:bg-background-950/95"
-              style={styles.overflowIndicator}
-            >
-              <ChevronRight size={20} className="text-typography-700 dark:text-typography-200" />
+            <Box pointerEvents="none" testID="shared-tabs-right-overflow" className="absolute bottom-0 right-0 top-0 items-center justify-center bg-background-0/95" style={styles.overflowIndicator}>
+              <ChevronRight size={20} className="text-typography-700" />
             </Box>
           ) : null}
         </Box>
@@ -271,13 +272,13 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
           {tabs.map((tab, index) => (
             <Pressable key={tab.key} className={`flex-1 ${getTabStyles(index)} relative`} onPress={() => handleTabPress(index)}>
               <Box className="flex-row items-center justify-center">
-                {tab.icon ? <Box className={isLandscape ? 'mr-1.5' : 'mr-1'}>{tab.icon}</Box> : null}
+                {tab.icon ? <Box className={isLandscape ? 'mr-1.5' : 'mr-1'}>{renderIcon(tab.icon, index)}</Box> : null}
                 {typeof tab.title === 'string' ? (
-                  <Text className={isLandscape ? getTextColor() : `text-xs ${getTextColor()}`} numberOfLines={1} style={styles.tabLabel}>
+                  <Text className={isLandscape ? getTextColor(index) : `text-xs ${getTextColor(index)}`} numberOfLines={1} style={styles.tabLabel}>
                     {t(tab.title)}
                   </Text>
                 ) : (
-                  <Text className={isLandscape ? getTextColor() : `text-xs ${getTextColor()}`} numberOfLines={1} style={styles.tabLabel}>
+                  <Text className={isLandscape ? getTextColor(index) : `text-xs ${getTextColor(index)}`} numberOfLines={1} style={styles.tabLabel}>
                     {tab.title}
                   </Text>
                 )}
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 4a6d8d6f..13b274d8 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -28,7 +28,7 @@ const textareaStyle = tva({
 });
 
 const textareaInputStyle = tva({
-  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  base: 'p-2 web:outline-0 web:outline-none flex-1 text-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
   parentVariants: {
     size: {
       sm: 'text-sm',
diff --git a/src/components/weather-alerts/weather-alert-detail-map.tsx b/src/components/weather-alerts/weather-alert-detail-map.tsx
index fd2b6c98..2f6cab49 100644
--- a/src/components/weather-alerts/weather-alert-detail-map.tsx
+++ b/src/components/weather-alerts/weather-alert-detail-map.tsx
@@ -54,7 +54,7 @@ export const WeatherAlertDetailMap: React.FC<WeatherAlertDetailMapProps> = ({ al
 
   if (!mapCenter) {
     return (
-      <View style={styles.container} className="items-center justify-center bg-background-100 dark:bg-background-800">
+      <View style={styles.container} className="items-center justify-center bg-background-100">
         <Text className="text-sm text-gray-500 dark:text-gray-400">{t('call_detail.no_location')}</Text>
       </View>
     );
diff --git a/src/features/livekit-call/components/LiveKitCallModal.tsx b/src/features/livekit-call/components/LiveKitCallModal.tsx
deleted file mode 100644
index 02fa29f4..00000000
--- a/src/features/livekit-call/components/LiveKitCallModal.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { AlertTriangle, CheckCircle, CircleIcon, Mic, MicOff, PhoneMissed } from 'lucide-react-native';
-import React, { useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
-
-import { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper } from '@/components/ui/actionsheet';
-import { Box } from '@/components/ui/box';
-import { Button, ButtonText } from '@/components/ui/button';
-import { Heading } from '@/components/ui/heading';
-import { HStack } from '@/components/ui/hstack';
-import { Radio, RadioGroup, RadioIndicator, RadioLabel } from '@/components/ui/radio';
-import { Spinner } from '@/components/ui/spinner';
-import { Text } from '@/components/ui/text';
-import { VStack } from '@/components/ui/vstack';
-
-import { type RoomInfo, useLiveKitCallStore } from '../store/useLiveKitCallStore';
-
-interface LiveKitCallModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  participantIdentity?: string; // Optional: pass if you have a specific identity
-}
-
-const LiveKitCallModal: React.FC<LiveKitCallModalProps> = ({
-  isOpen,
-  onClose,
-  participantIdentity = `user-${Math.random().toString(36).substring(7)}`, // Default unique enough for example
-}) => {
-  const availableRooms = useLiveKitCallStore((s) => s.availableRooms);
-  const selectedRoomForJoining = useLiveKitCallStore((s) => s.selectedRoomForJoining);
-  const currentRoomId = useLiveKitCallStore((s) => s.currentRoomId);
-  const isConnecting = useLiveKitCallStore((s) => s.isConnecting);
-  const isConnected = useLiveKitCallStore((s) => s.isConnected);
-  const error = useLiveKitCallStore((s) => s.error);
-  const localParticipant = useLiveKitCallStore((s) => s.localParticipant);
-  const actions = useLiveKitCallStore((s) => s.actions);
-
-  const [isMicrophoneEnabled, setIsMicrophoneEnabled] = useState(true);
-
-  useEffect(() => {
-    if (localParticipant) {
-      const micPublication = localParticipant.getTrackPublicationByName('microphone');
-      setIsMicrophoneEnabled(micPublication ? micPublication.isMuted === false : true);
-    } else {
-      setIsMicrophoneEnabled(true); // Default before connected
-    }
-  }, [localParticipant, isConnected]);
-
-  const handleJoinRoom = () => {
-    if (selectedRoomForJoining && !isConnecting && !isConnected) {
-      actions.connectToRoom(selectedRoomForJoining, participantIdentity);
-      // Modal can be closed by user, connection persists via store
-    }
-  };
-
-  const handleLeaveRoom = () => {
-    actions.disconnectFromRoom();
-    onClose(); // Close modal on leaving
-  };
-
-  const handleToggleMicrophone = async () => {
-    await actions.setMicrophoneEnabled(!isMicrophoneEnabled);
-    setIsMicrophoneEnabled(!isMicrophoneEnabled); // Update local state immediately for UI responsiveness
-  };
-
-  const internalOnClose = () => {
-    if (isConnecting) {
-      // Optionally prevent closing or ask for confirmation if connecting
-      // For now, allow close
-    }
-    actions._clearError(); // Clear any transient errors when modal is closed
-    onClose();
-  };
-
-  const currentRoomName = availableRooms.find((r) => r.id === currentRoomId)?.name || currentRoomId;
-  const selectedRoomName = availableRooms.find((r) => r.id === selectedRoomForJoining)?.name || selectedRoomForJoining;
-
-  return (
-    <Actionsheet isOpen={isOpen} onClose={internalOnClose}>
-      <ActionsheetBackdrop />
-      <ActionsheetContent className="max-h-[40%] px-4 py-2">
-        <ActionsheetDragIndicatorWrapper>
-          <ActionsheetDragIndicator />
-        </ActionsheetDragIndicatorWrapper>
-
-        {isConnecting ? (
-          <VStack space="md" className="min-h-[150px] flex-1 items-center justify-center">
-            <Spinner size="large" />
-            <Text>Connecting to {selectedRoomName || 'room'}...</Text>
-          </VStack>
-        ) : error ? (
-          <VStack space="md" className="min-h-[150px] flex-1 items-center justify-center p-4">
-            <AlertTriangle size={48} color="red" />
-            <Heading size="md" className="text-red-700">
-              Connection Error
-            </Heading>
-            <Text className="text-center">{error}</Text>
-            <Button
-              onPress={() => {
-                actions._clearError();
-                if (!isConnected) actions.setSelectedRoomForJoining(null);
-              }}
-              className="mt-4"
-            >
-              <ButtonText>Try Again</ButtonText>
-            </Button>
-          </VStack>
-        ) : isConnected && currentRoomId ? (
-          <VStack space="lg" className="flex-1 justify-between py-4">
-            <Box>
-              <HStack className="mb-2 items-center" space="sm">
-                <CheckCircle color="green" size={24} />
-                <Heading size="lg">Connected</Heading>
-              </HStack>
-              <Text>
-                You are in room: <Text className="font-bold">{currentRoomName}</Text>
-              </Text>
-              {localParticipant && <Text size="sm">Your ID: {localParticipant.identity}</Text>}
-            </Box>
-
-            <HStack space="md" className="mt-4 items-center justify-center">
-              <Button onPress={handleToggleMicrophone} variant="outline" action={isMicrophoneEnabled ? 'primary' : 'secondary'} size="lg">
-                {isMicrophoneEnabled ? <Mic size={20} color="blue" /> : <MicOff size={20} color="gray" />}
-                <ButtonText className="ml-2">{isMicrophoneEnabled ? 'Mute' : 'Unmute'}</ButtonText>
-              </Button>
-              <Button action="negative" onPress={handleLeaveRoom} size="lg">
-                <PhoneMissed size={20} color="white" />
-                <ButtonText className="ml-2">Leave Call</ButtonText>
-              </Button>
-            </HStack>
-          </VStack>
-        ) : (
-          <VStack space="md" className="w-full py-2">
-            <Heading size="xl" className="mb-2 text-center">
-              Join a Voice Call
-            </Heading>
-            <Text className="mb-3 text-center">Select a room to join:</Text>
-            <ScrollView style={{ maxHeight: 150 }}>
-              <RadioGroup value={selectedRoomForJoining || ''} onChange={(nextValue: string) => actions.setSelectedRoomForJoining(nextValue)} accessibilityLabel="Select a room">
-                <VStack space="md">
-                  {availableRooms.map((room: RoomInfo) => (
-                    <Radio key={room.id} value={room.id} size="md">
-                      <RadioIndicator className="mr-2">
-                        <CircleIcon />
-                      </RadioIndicator>
-                      <RadioLabel>{room.name}</RadioLabel>
-                    </Radio>
-                  ))}
-                </VStack>
-              </RadioGroup>
-            </ScrollView>
-            <Button onPress={handleJoinRoom} isDisabled={!selectedRoomForJoining || isConnecting} className="mt-4" size="lg">
-              <ButtonText>Join "{selectedRoomName || 'Room'}"</ButtonText>
-            </Button>
-          </VStack>
-        )}
-      </ActionsheetContent>
-    </Actionsheet>
-  );
-};
-
-export default LiveKitCallModal;
diff --git a/src/features/livekit-call/store/__tests__/useLiveKitCallStore.test.ts b/src/features/livekit-call/store/__tests__/useLiveKitCallStore.test.ts
deleted file mode 100644
index 1f8758f1..00000000
--- a/src/features/livekit-call/store/__tests__/useLiveKitCallStore.test.ts
+++ /dev/null
@@ -1,561 +0,0 @@
-import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals';
-import { renderHook, act } from '@testing-library/react-native';
-
-// Mock Platform before any imports - must be inlined to avoid hoisting issues
-jest.mock('react-native', () => ({
-  Platform: {
-    OS: 'ios' as 'ios' | 'android' | 'web' | 'windows' | 'macos',
-    select: jest.fn((obj: any) => obj.ios || obj.default),
-    Version: 14,
-  },
-}));
-
-// Mock the CallKeep service module
-jest.mock('../../../../services/callkeep.service.ios', () => ({
-  callKeepService: {
-    setup: jest.fn(),
-    startCall: jest.fn(),
-    endCall: jest.fn(),
-    isCallActiveNow: jest.fn(),
-    getCurrentCallUUID: jest.fn(),
-    cleanup: jest.fn(),
-    setMuteStateCallback: jest.fn(),
-  },
-}));
-
-// Mock logger
-jest.mock('../../../../lib/logging', () => ({
-  logger: {
-    debug: jest.fn(),
-    info: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-  },
-}));
-
-jest.mock('../../../../services/bluetooth-audio.service', () => ({
-  bluetoothAudioService: {
-    ensurePttInputMonitoring: jest.fn(),
-  },
-}));
-
-// Mock livekit-client
-const mockRoom = {
-  on: jest.fn(),
-  connect: jest.fn(),
-  disconnect: jest.fn(),
-  localParticipant: {
-    setMicrophoneEnabled: jest.fn(),
-    setCameraEnabled: jest.fn(),
-    identity: 'local-participant',
-  },
-  remoteParticipants: new Map(),
-  name: 'test-room',
-} as any;
-
-jest.mock('livekit-client', () => ({
-  Room: jest.fn().mockImplementation(() => mockRoom),
-  RoomEvent: {
-    ConnectionStateChanged: 'connectionStateChanged',
-    ParticipantConnected: 'participantConnected',
-    ParticipantDisconnected: 'participantDisconnected',
-  },
-  ConnectionState: {
-    Connected: 'connected',
-    Disconnected: 'disconnected',
-    Connecting: 'connecting',
-    Reconnecting: 'reconnecting',
-  },
-}));
-
-import { useLiveKitCallStore } from '../useLiveKitCallStore';
-import { logger } from '../../../../lib/logging';
-
-// Get the mocked constructors after the imports
-const mockCallKeepService = require('../../../../services/callkeep.service.ios').callKeepService;
-const mockLogger = logger as jest.Mocked<typeof logger>;
-const MockedRoom = require('livekit-client').Room as jest.MockedClass<any>;
-
-describe('useLiveKitCallStore with CallKeep Integration', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    require('react-native').Platform.OS = 'ios';
-    
-    // Reset mock implementations
-    mockCallKeepService.setup.mockResolvedValue(undefined);
-    mockCallKeepService.startCall.mockResolvedValue('test-uuid');
-    mockCallKeepService.endCall.mockResolvedValue(undefined);
-    mockCallKeepService.isCallActiveNow.mockReturnValue(false);
-    mockCallKeepService.getCurrentCallUUID.mockReturnValue(null);
-    mockCallKeepService.setMuteStateCallback.mockReturnValue(undefined);
-    
-    // Reset the Room mock to return mockRoom by default
-    MockedRoom.mockImplementation(() => mockRoom);
-    
-    mockRoom.connect.mockResolvedValue(undefined);
-    mockRoom.disconnect.mockResolvedValue(undefined);
-    mockRoom.localParticipant.setMicrophoneEnabled.mockResolvedValue(undefined);
-    mockRoom.localParticipant.setCameraEnabled.mockResolvedValue(undefined);
-    
-    // Clear logger mocks
-    mockLogger.debug.mockClear();
-    mockLogger.info.mockClear();
-    mockLogger.warn.mockClear();
-    mockLogger.error.mockClear();
-    
-    // Reset the store to initial state
-    useLiveKitCallStore.setState({
-      availableRooms: [
-        { id: 'emergency-channel', name: 'Emergency Channel' },
-        { id: 'tactical-1', name: 'Tactical 1' },
-        { id: 'dispatch', name: 'Dispatch' },
-      ],
-      selectedRoomForJoining: null,
-      currentRoomId: null,
-      isConnecting: false,
-      isConnected: false,
-      roomInstance: null,
-      participants: [],
-      error: null,
-      localParticipant: null,
-    });
-  });
-
-  describe('CallKeep Mute State Callback', () => {
-    beforeEach(() => {
-      require('react-native').Platform.OS = 'ios';
-    });
-
-    it('should register mute state callback when connecting on iOS', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-
-      expect(mockCallKeepService.setMuteStateCallback).toHaveBeenCalledWith(expect.any(Function));
-    });
-
-    it('should clear mute state callback when disconnecting on iOS', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set up connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.disconnectFromRoom();
-      });
-
-      expect(mockCallKeepService.setMuteStateCallback).toHaveBeenCalledWith(null);
-    });
-
-    it('should not register callback on non-iOS platforms', async () => {
-      require('react-native').Platform.OS = 'android';
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-
-      expect(mockCallKeepService.setMuteStateCallback).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Room Connection with CallKeep', () => {
-    beforeEach(() => {
-      // Mock successful connection flow
-      mockRoom.on.mockImplementation((event: any, callback: any) => {
-        if (event === 'connectionStateChanged') {
-          // Simulate connected state
-          setTimeout(() => callback('connected'), 0);
-        }
-        return mockRoom;
-      });
-    });
-
-    it('should start CallKeep call on successful room connection (iOS)', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('emergency-channel', 'test-participant');
-        // Wait for the connection state change event to fire
-        await new Promise(resolve => setTimeout(resolve, 100));
-      });
-
-      expect(mockCallKeepService.startCall).toHaveBeenCalledWith('emergency-channel');
-    });
-
-    it('should not start CallKeep call on Android', async () => {
-      require('react-native').Platform.OS = 'android';
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('emergency-channel', 'test-participant');
-      });
-
-      expect(mockCallKeepService.startCall).not.toHaveBeenCalled();
-    });
-
-    it('should handle CallKeep start call errors gracefully', async () => {
-      const error = new Error('Failed to start call');
-      mockCallKeepService.startCall.mockRejectedValueOnce(error);
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('emergency-channel', 'test-participant');
-        // Wait for the connection state change event to fire
-        await new Promise(resolve => setTimeout(resolve, 100));
-      });
-
-      expect(mockLogger.warn).toHaveBeenCalledWith({
-        message: 'Failed to start CallKeep call (background audio may not work)',
-        context: { error, roomId: 'emergency-channel' },
-      });
-    });
-  });
-
-  describe('Room Disconnection with CallKeep', () => {
-    it('should end CallKeep call on room disconnection (iOS)', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // First set up a connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.disconnectFromRoom();
-      });
-
-      expect(mockRoom.disconnect).toHaveBeenCalled();
-      expect(mockCallKeepService.endCall).toHaveBeenCalled();
-    });
-
-    it('should not end CallKeep call on Android', async () => {
-      require('react-native').Platform.OS = 'android';
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // First set up a connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.disconnectFromRoom();
-      });
-
-      expect(mockRoom.disconnect).toHaveBeenCalled();
-      expect(mockCallKeepService.endCall).not.toHaveBeenCalled();
-    });
-
-    it('should handle CallKeep end call errors gracefully', async () => {
-      const error = new Error('Failed to end call');
-      mockCallKeepService.endCall.mockRejectedValueOnce(error);
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // First set up a connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.disconnectFromRoom();
-      });
-
-      expect(mockRoom.disconnect).toHaveBeenCalled();
-      expect(mockLogger.warn).toHaveBeenCalledWith({
-        message: 'Failed to end CallKeep call',
-        context: { error },
-      });
-    });
-
-    it('should handle disconnection when no room instance exists', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.disconnectFromRoom();
-      });
-
-      expect(mockRoom.disconnect).not.toHaveBeenCalled();
-      expect(mockCallKeepService.endCall).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Connection State Changes with CallKeep', () => {
-    it('should end CallKeep call on connection lost (iOS)', async () => {
-      require('react-native').Platform.OS = 'ios';
-      
-      // Mock the room event listener
-      let connectionStateListener: Function | null = null;
-      mockRoom.on.mockImplementation((event: any, callback: any) => {
-        if (event === 'connectionStateChanged') {
-          connectionStateListener = callback;
-        }
-        return mockRoom;
-      });
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-      
-      expect(connectionStateListener).toBeDefined();
-      
-      // Simulate disconnection
-      if (connectionStateListener) {
-        act(() => {
-          connectionStateListener!('disconnected');
-        });
-      }
-
-      expect(mockCallKeepService.endCall).toHaveBeenCalled();
-    });
-
-    it('should not end CallKeep call on Android disconnection', async () => {
-      require('react-native').Platform.OS = 'android';
-      
-      // Mock the room event listener
-      let connectionStateListener: Function | null = null;
-      mockRoom.on.mockImplementation((event: any, callback: any) => {
-        if (event === 'connectionStateChanged') {
-          connectionStateListener = callback;
-        }
-        return mockRoom;
-      });
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-      
-      expect(connectionStateListener).toBeDefined();
-      
-      // Simulate disconnection
-      if (connectionStateListener) {
-        act(() => {
-          connectionStateListener!('disconnected');
-        });
-      }
-
-      expect(mockCallKeepService.endCall).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Store State Management', () => {
-    it('should initialize with correct default state', () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      expect(result.current.availableRooms).toHaveLength(3);
-      expect(result.current.selectedRoomForJoining).toBeNull();
-      expect(result.current.currentRoomId).toBeNull();
-      expect(result.current.isConnecting).toBe(false);
-      expect(result.current.isConnected).toBe(false);
-      expect(result.current.roomInstance).toBeNull();
-      expect(result.current.participants).toEqual([]);
-      expect(result.current.error).toBeNull();
-      expect(result.current.localParticipant).toBeNull();
-    });
-
-    it('should clear error when setting selected room', () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      act(() => {
-        result.current.actions.setSelectedRoomForJoining('test-room');
-      });
-      
-      expect(result.current.selectedRoomForJoining).toBe('test-room');
-      expect(result.current.error).toBeNull();
-    });
-
-    it('should clear error explicitly', () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      act(() => {
-        result.current.actions._clearError();
-      });
-      
-      expect(result.current.error).toBeNull();
-    });
-  });
-
-  describe('Microphone Control', () => {
-    it('should enable microphone when connected', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set up connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.setMicrophoneEnabled(true);
-      });
-
-      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(true);
-    });
-
-    it('should disable microphone when connected', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set up connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.setMicrophoneEnabled(false);
-      });
-
-      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(false);
-    });
-
-    it('should handle microphone errors', async () => {
-      const error = new Error('Microphone error');
-      mockRoom.localParticipant.setMicrophoneEnabled.mockRejectedValueOnce(error);
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set up connected state
-      act(() => {
-        result.current.actions._setRoomInstance(mockRoom);
-        result.current.actions._setIsConnected(true);
-      });
-      
-      await act(async () => {
-        await result.current.actions.setMicrophoneEnabled(true);
-      });
-
-      expect(mockLogger.error).toHaveBeenCalledWith({
-        message: 'Error setting microphone state',
-        context: { error, enabled: true },
-      });
-      expect(result.current.error).toBe('Could not change microphone state.');
-    });
-
-    it('should handle microphone control when not connected', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      await act(async () => {
-        await result.current.actions.setMicrophoneEnabled(true);
-      });
-
-      expect(mockRoom.localParticipant.setMicrophoneEnabled).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Connection Prevention', () => {
-    it('should prevent connection when already connecting', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set connecting state
-      act(() => {
-        result.current.actions._setIsConnecting(true);
-      });
-      
-      // First connection attempt should succeed
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-      
-      // Second connection attempt should be prevented
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-
-      expect(mockLogger.warn).toHaveBeenCalledWith({
-        message: 'Connection attempt while already connecting or connected',
-        context: { 
-          roomId: 'test-room', 
-          participantIdentity: 'test-participant', 
-          isConnecting: true, 
-          isConnected: false 
-        },
-      });
-    });
-
-    it('should prevent connection when already connected', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-      
-      // Set connected state
-      act(() => {
-        result.current.actions._setIsConnected(true);
-        result.current.actions._setRoomInstance(mockRoom);
-      });
-      
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-
-      expect(mockLogger.warn).toHaveBeenCalledWith({
-        message: 'Connection attempt while already connecting or connected',
-        context: { 
-          roomId: 'test-room', 
-          participantIdentity: 'test-participant', 
-          isConnecting: false, 
-          isConnected: true 
-        },
-      });
-    });
-  });
-
-  describe('Error Handling', () => {
-    describe('Error Handling', () => {
-    it('should handle room initialization errors', async () => {
-      // Make the Room constructor throw an error
-      MockedRoom.mockImplementationOnce(() => {
-        throw new Error('Failed to initialize room');
-      });
-      
-      const { result } = renderHook(() => useLiveKitCallStore());
-
-      await act(async () => {
-        await result.current.actions.connectToRoom('test-room', 'test-participant');
-      });
-
-      expect(mockLogger.error).toHaveBeenCalledWith({
-        message: 'Failed to connect to LiveKit room',
-        context: { error: expect.any(Error), roomId: 'test-room', participantIdentity: 'test-participant' },
-      });
-      expect(result.current.error).toBe('Failed to initialize room');
-      expect(result.current.isConnecting).toBe(false);
-      expect(result.current.isConnected).toBe(false);
-    });
-
-    it('should handle basic error state management', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-
-      // Test basic error clearing functionality since token fetching isn't implemented
-      act(() => {
-        // Set an error state and then clear it
-        result.current.actions._clearError();
-      });
-
-      expect(result.current.error).toBeNull();
-    });
-  });
-
-    it('should handle basic error state management', async () => {
-      const { result } = renderHook(() => useLiveKitCallStore());
-
-      // Test basic error clearing functionality since token fetching isn't implemented
-      act(() => {
-        // Set an error state and then clear it
-        result.current.actions._clearError();
-      });
-
-      expect(result.current.error).toBeNull();
-    });
-  });
-});
diff --git a/src/features/livekit-call/store/useLiveKitCallStore.ts b/src/features/livekit-call/store/useLiveKitCallStore.ts
deleted file mode 100644
index 55c8a6a5..00000000
--- a/src/features/livekit-call/store/useLiveKitCallStore.ts
+++ /dev/null
@@ -1,357 +0,0 @@
-import { ConnectionState, type LocalParticipant, type Participant, type RemoteParticipant, Room, type RoomConnectOptions, RoomEvent, type RoomOptions } from 'livekit-client'; // livekit-react-native re-exports these
-import { Platform } from 'react-native';
-import { create } from 'zustand';
-
-import { logger } from '../../../lib/logging';
-import { bluetoothAudioService } from '../../../services/bluetooth-audio.service';
-import { callKeepService } from '../../../services/callkeep.service';
-
-export interface RoomInfo {
-  id: string;
-  name: string;
-}
-
-interface LiveKitCallState {
-  availableRooms: RoomInfo[];
-  selectedRoomForJoining: string | null;
-  currentRoomId: string | null;
-  isConnecting: boolean;
-  isConnected: boolean;
-  roomInstance: Room | null;
-  participants: Participant[]; // Includes local participant
-  error: string | null;
-  localParticipant: LocalParticipant | null;
-
-  actions: {
-    setSelectedRoomForJoining: (roomId: string | null) => void;
-    connectToRoom: (roomId: string, participantIdentity: string) => Promise<void>;
-    disconnectFromRoom: () => Promise<void>;
-    setMicrophoneEnabled: (enabled: boolean) => Promise<void>;
-    // Internal actions - not typically called directly from UI
-    _setRoomInstance: (room: Room | null) => void;
-    _setIsConnected: (isConnected: boolean) => void;
-    _setIsConnecting: (isConnecting: boolean) => void;
-    _addParticipant: (participant: Participant) => void;
-    _removeParticipant: (participantId: string) => void;
-    _updateParticipants: () => void;
-    _clearError: () => void;
-  };
-}
-
-const initialRooms: RoomInfo[] = [
-  { id: 'general-chat', name: 'General Chat' },
-  { id: 'dev-team-sync', name: 'Dev Team Sync' },
-  { id: 'product-updates', name: 'Product Updates' },
-];
-
-export const useLiveKitCallStore = create<LiveKitCallState>((set, get) => ({
-  availableRooms: initialRooms,
-  selectedRoomForJoining: null,
-  currentRoomId: null,
-  isConnecting: false,
-  isConnected: false,
-  roomInstance: null,
-  participants: [],
-  error: null,
-  localParticipant: null,
-
-  actions: {
-    setSelectedRoomForJoining: (roomId) => set({ selectedRoomForJoining: roomId, error: null }),
-    _clearError: () => set({ error: null }),
-
-    connectToRoom: async (roomId, participantIdentity) => {
-      bluetoothAudioService.ensurePttInputMonitoring('useLiveKitCallStore connectToRoom start');
-
-      if (get().isConnecting || get().isConnected) {
-        logger.warn({
-          message: 'Connection attempt while already connecting or connected',
-          context: { roomId, participantIdentity, isConnecting: get().isConnecting, isConnected: get().isConnected },
-        });
-        return;
-      }
-
-      set({ isConnecting: true, error: null, selectedRoomForJoining: roomId });
-
-      // Register CallKeep mute callback for iOS
-      if (Platform.OS === 'ios') {
-        callKeepService.setMuteStateCallback((muted: boolean) => {
-          const currentState = get();
-          if (currentState.isConnected && currentState.roomInstance) {
-            currentState.actions.setMicrophoneEnabled(!muted);
-          }
-        });
-      }
-
-      try {
-        const roomOptions: RoomOptions = {
-          adaptiveStream: true,
-          dynacast: true, // Enable dynamic simulcast
-        };
-        const newRoom = new Room(roomOptions);
-
-        newRoom
-          .on(RoomEvent.ConnectionStateChanged, (state: ConnectionState) => {
-            logger.info({
-              message: 'LiveKit Connection State Changed',
-              context: { state, roomId },
-            });
-            if (state === ConnectionState.Connected) {
-              set({
-                isConnected: true,
-                isConnecting: false,
-                currentRoomId: roomId,
-                roomInstance: newRoom,
-                localParticipant: newRoom.localParticipant,
-                error: null,
-              });
-              get().actions._updateParticipants(); // Initial participant list
-              newRoom.localParticipant.setMicrophoneEnabled(true).catch((error) => {
-                logger.warn({ message: 'Failed to enable microphone on connect', context: { error, roomId } });
-              });
-              newRoom.localParticipant.setCameraEnabled(false).catch((error) => {
-                logger.warn({ message: 'Failed to disable camera on connect', context: { error, roomId } });
-              }); // No video
-
-              bluetoothAudioService.ensurePttInputMonitoring('useLiveKitCallStore connected');
-
-              // Start CallKeep call for iOS background audio support
-              if (Platform.OS === 'ios') {
-                callKeepService
-                  .startCall(roomId)
-                  .then((callUUID) => {
-                    logger.info({
-                      message: 'CallKeep call started successfully',
-                      context: { callUUID, roomId },
-                    });
-                  })
-                  .catch((error) => {
-                    logger.warn({
-                      message: 'Failed to start CallKeep call (background audio may not work)',
-                      context: { error, roomId },
-                    });
-                  });
-              }
-            } else if (state === ConnectionState.Disconnected) {
-              set({
-                isConnected: false,
-                isConnecting: false,
-                currentRoomId: null,
-                roomInstance: null,
-                participants: [],
-                localParticipant: null,
-                // Keep error if there was one leading to disconnect
-              });
-
-              // End CallKeep call for iOS when disconnected
-              if (Platform.OS === 'ios') {
-                callKeepService
-                  .endCall()
-                  .then(() => {
-                    logger.info({
-                      message: 'CallKeep call ended on disconnect',
-                      context: { roomId },
-                    });
-                  })
-                  .catch((error) => {
-                    logger.warn({
-                      message: 'Failed to end CallKeep call on disconnect',
-                      context: { error, roomId },
-                    });
-                  });
-              }
-            } else if (state === ConnectionState.Connecting) {
-              set({ isConnecting: true });
-            } else if (state === ConnectionState.Reconnecting) {
-              set({ isConnecting: true, error: 'Connection lost, attempting to reconnect...' });
-            }
-          })
-          .on(RoomEvent.ParticipantConnected, (participant: RemoteParticipant) => {
-            logger.info({
-              message: 'Participant connected',
-              context: { participantIdentity: participant.identity, roomId },
-            });
-            get().actions._addParticipant(participant);
-          })
-          .on(RoomEvent.ParticipantDisconnected, (participant: RemoteParticipant) => {
-            logger.info({
-              message: 'Participant disconnected',
-              context: { participantIdentity: participant.identity, roomId },
-            });
-            get().actions._removeParticipant(participant.sid);
-          })
-          .on(RoomEvent.LocalTrackPublished, (trackPublication, participant) => {
-            logger.debug({
-              message: 'Local track published',
-              context: { trackKind: trackPublication.kind, participantIdentity: participant.identity, roomId },
-            });
-            get().actions._updateParticipants(); // Ensure local participant updates reflect
-          })
-          .on(RoomEvent.LocalTrackUnpublished, (trackPublication, participant) => {
-            logger.debug({
-              message: 'Local track unpublished',
-              context: { trackKind: trackPublication.kind, participantIdentity: participant.identity, roomId },
-            });
-            get().actions._updateParticipants();
-          })
-          .on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
-            logger.debug({
-              message: 'Subscribed to track',
-              context: {
-                trackSid: publication.trackSid,
-                trackKind: track.kind,
-                participantIdentity: participant.identity,
-                roomId,
-              },
-            });
-            // Audio tracks are usually auto-played. No specific handling needed here for audio only.
-          })
-          .on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
-            logger.debug({
-              message: 'Unsubscribed from track',
-              context: {
-                trackSid: publication.trackSid,
-                participantIdentity: participant.identity,
-                roomId,
-              },
-            });
-          })
-          .on(RoomEvent.Disconnected, (reason) => {
-            logger.info({
-              message: 'Disconnected from room',
-              context: { reason: String(reason), roomId },
-            });
-            // DisconnectReason is an enum of strings like 'CLIENT_INITIATED', etc.
-            const reasonMsg = reason ? String(reason) : 'Unknown reason';
-            set({ error: `Disconnected: ${reasonMsg}` });
-            // Full cleanup is also handled by ConnectionStateChanged to Disconnected
-          });
-
-        const connectOptions: RoomConnectOptions = {
-          autoSubscribe: true, // Subscribe to all tracks by default
-        };
-
-        //await newRoom.connect(LIVEKIT_URL, token, connectOptions);
-        // Connection success is handled by the ConnectionStateChanged event listener
-      } catch (err: any) {
-        logger.error({
-          message: 'Failed to connect to LiveKit room',
-          context: { error: err, roomId, participantIdentity },
-        });
-        set({
-          error: err.message || 'An unknown error occurred during connection.',
-          isConnecting: false,
-          isConnected: false,
-          roomInstance: null,
-          currentRoomId: null,
-        });
-        // Clean up any partially initialized room
-        if (get().roomInstance) {
-          await get().roomInstance?.disconnect();
-          set({ roomInstance: null });
-        }
-      }
-    },
-
-    disconnectFromRoom: async () => {
-      const room = get().roomInstance;
-      if (room) {
-        logger.info({
-          message: 'Disconnecting from room',
-          context: { roomName: room.name, currentRoomId: get().currentRoomId },
-        });
-        await room.disconnect();
-        // State updates (isConnected, currentRoomId, etc.) are handled by RoomEvent.Disconnected
-        // and ConnectionState.Disconnected listeners.
-        set({
-          roomInstance: null,
-          currentRoomId: null,
-          isConnected: false,
-          isConnecting: false,
-          participants: [],
-          localParticipant: null,
-          selectedRoomForJoining: null, // Reset selection
-        });
-
-        // End CallKeep call for iOS
-        if (Platform.OS === 'ios') {
-          try {
-            await callKeepService.endCall();
-            // Clear the mute state callback
-            callKeepService.setMuteStateCallback(null);
-            logger.info({
-              message: 'CallKeep call ended successfully',
-            });
-          } catch (error) {
-            logger.warn({
-              message: 'Failed to end CallKeep call',
-              context: { error },
-            });
-          }
-        }
-      }
-    },
-
-    setMicrophoneEnabled: async (enabled: boolean) => {
-      const room = get().roomInstance;
-      if (room && room.localParticipant) {
-        try {
-          await room.localParticipant.setMicrophoneEnabled(enabled);
-          get().actions._updateParticipants(); // reflect change in participant state
-          logger.info({
-            message: 'Microphone state changed',
-            context: { enabled, participantIdentity: room.localParticipant.identity },
-          });
-        } catch (e) {
-          logger.error({
-            message: 'Error setting microphone state',
-            context: { error: e, enabled },
-          });
-          set({ error: 'Could not change microphone state.' });
-        }
-      }
-    },
-
-    _setRoomInstance: (room) => set({ roomInstance: room }),
-    _setIsConnected: (isConnected) => set({ isConnected }),
-    _setIsConnecting: (isConnecting) => set({ isConnecting }),
-
-    _addParticipant: (participant) => {
-      set((state) => {
-        if (!state.participants.find((p) => p.sid === participant.sid)) {
-          return { participants: [...state.participants, participant] };
-        }
-        return {}; // No change
-      });
-    },
-    _removeParticipant: (participantSid) => {
-      set((state) => ({
-        participants: state.participants.filter((p) => p.sid !== participantSid),
-      }));
-    },
-    _updateParticipants: () => {
-      const room = get().roomInstance;
-      if (room) {
-        // Use room.remoteParticipants which is Map<ParticipantSid, RemoteParticipant>
-        const remoteParticipantsArray: RemoteParticipant[] = Array.from(room.remoteParticipants.values());
-        const allParticipants: Participant[] = [room.localParticipant, ...remoteParticipantsArray];
-        set({
-          participants: allParticipants,
-          localParticipant: room.localParticipant,
-        });
-      }
-    },
-  },
-}));
-
-// Selector for convenience
-export const useLiveKit = useLiveKitCallStore;
-
-// Example on how to listen to participant's microphone status
-// This would typically be in a component that renders a participant
-/*
-const { isMuted } = useParticipantTrack({
-  participant: remoteParticipant,
-  source: Track.Source.Microphone,
-  publication: remoteParticipant.getTrackPublication(Track.Source.Microphone),
-});
-*/
diff --git a/src/lib/__tests__/readable-text-color.test.ts b/src/lib/__tests__/readable-text-color.test.ts
new file mode 100644
index 00000000..8db01f7e
--- /dev/null
+++ b/src/lib/__tests__/readable-text-color.test.ts
@@ -0,0 +1,61 @@
+import { readableColors, readableTextColor } from '../utils';
+
+describe('readableTextColor', () => {
+  it('uses white on dark backgrounds', () => {
+    expect(readableTextColor('#000000')).toBe('#FFFFFF');
+    expect(readableTextColor('#262626')).toBe('#FFFFFF');
+    expect(readableTextColor('#475569')).toBe('#FFFFFF');
+  });
+
+  it('uses black on light backgrounds', () => {
+    expect(readableTextColor('#ffffff')).toBe('#000000');
+    expect(readableTextColor('#f8ac59')).toBe('#000000');
+  });
+
+  it('uses black on mid-tone status colours where white would fall below 3:1', () => {
+    expect(readableTextColor('#23c6c8')).toBe('#000000');
+    expect(readableTextColor('#449d44')).toBe('#000000');
+    expect(readableTextColor('#ED5565')).toBe('#000000');
+  });
+
+  it('accepts 3-digit hex and a missing #', () => {
+    expect(readableTextColor('#fff')).toBe('#000000');
+    expect(readableTextColor('000')).toBe('#FFFFFF');
+  });
+
+  it('reads opaque rgb() and rgba() colours', () => {
+    expect(readableTextColor('rgb(0,0,0)')).toBe('#FFFFFF');
+    expect(readableTextColor('rgb(200, 0, 0)')).toBe('#FFFFFF');
+    expect(readableTextColor('RGB(255, 255, 0)')).toBe('#000000');
+    expect(readableTextColor('rgba(30, 58, 138, 1)')).toBe('#FFFFFF');
+    expect(readableTextColor(' rgba(255,255,255,1.0) ')).toBe('#000000');
+  });
+
+  it('returns undefined for values whose contrast it cannot work out', () => {
+    expect(readableTextColor('')).toBeUndefined();
+    expect(readableTextColor('label-default')).toBeUndefined();
+    expect(readableTextColor('red')).toBeUndefined();
+    expect(readableTextColor('hsl(0, 100%, 50%)')).toBeUndefined();
+    expect(readableTextColor('rgba(0, 0, 0, 0.5)')).toBeUndefined();
+    expect(readableTextColor('rgb(256, 0, 0)')).toBeUndefined();
+    expect(readableTextColor('#12345')).toBeUndefined();
+  });
+});
+
+describe('readableColors', () => {
+  it('keeps a colour it can read and pairs it with the readable text colour', () => {
+    expect(readableColors('#1e3a8a')).toEqual({ backgroundColor: '#1e3a8a', textColor: '#FFFFFF' });
+    expect(readableColors('rgb(255, 255, 0)')).toEqual({ backgroundColor: 'rgb(255, 255, 0)', textColor: '#000000' });
+  });
+
+  it('adds the # React Native needs to draw bare hex', () => {
+    expect(readableColors(' ff0000 ')).toEqual({ backgroundColor: '#ff0000', textColor: '#000000' });
+  });
+
+  it('swaps a colour it cannot read for the fallback and its text colour', () => {
+    expect(readableColors('hsl(0, 100%, 25%)')).toEqual({ backgroundColor: '#808080', textColor: '#000000' });
+    expect(readableColors('rgba(255, 255, 255, 0.2)', '#6b7280')).toEqual({ backgroundColor: '#6b7280', textColor: '#FFFFFF' });
+    expect(readableColors(undefined, '#6b7280')).toEqual({ backgroundColor: '#6b7280', textColor: '#FFFFFF' });
+    expect(readableColors(null)).toEqual({ backgroundColor: '#808080', textColor: '#000000' });
+  });
+});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a9b66c39..302c6357 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -63,6 +63,7 @@ export function onSortOptions(a: any, b: any) {
   return 0;
 }
 
+/** For black-or-white text on a coloured background prefer `readableTextColor`; the `bw` cutoff here picks white on many mid-tones. */
 export function invertColor(hex: string, bw: boolean): string {
   if (hex.indexOf('#') === 0) {
     hex = hex.slice(1);
@@ -89,6 +90,56 @@ export function invertColor(hex: string, bw: boolean): string {
   return '#' + padZero(r2, 2) + padZero(g2, 2) + padZero(b2, 2);
 }
 
+/** The 0-255 [r, g, b] of a 3- or 6-digit hex colour (the # optional) or an opaque rgb()/rgba(). */
+function parseOpaqueRgb(color: string): number[] | undefined {
+  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color);
+  if (hex) {
+    const digits = hex[1].length === 3 ? hex[1].replace(/./g, (c) => c + c) : hex[1];
+    return [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16));
+  }
+  // A translucent colour's contrast depends on what is drawn behind it, so only an alpha of 1 counts.
+  const rgb = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*\.?\d+)\s*)?\)$/i.exec(color);
+  if (!rgb || (rgb[4] !== undefined && Number(rgb[4]) < 1)) return undefined;
+  const channels = [rgb[1], rgb[2], rgb[3]].map(Number);
+  return channels.every((c) => c <= 255) ? channels : undefined;
+}
+
+/**
+ * Black or white, whichever has the higher WCAG contrast against `color`. Returns undefined for a
+ * value that isn't a 3- or 6-digit hex colour or an opaque rgb()/rgba(), so callers can fall back;
+ * `readableColors` does that by swapping in a known background.
+ * Unlike `invertColor(hex, true)`, this picks black on mid-tones such as orange, teal and green.
+ */
+export function readableTextColor(color: string): '#000000' | '#FFFFFF' | undefined {
+  const channels = parseOpaqueRgb(color.trim());
+  if (!channels) return undefined;
+  const [r, g, b] = channels.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  // Contrast with black is (L + 0.05) / 0.05 and with white 1.05 / (L + 0.05); they are equal at L ≈ 0.179.
+  return luminance > 0.179 ? '#000000' : '#FFFFFF';
+}
+
+interface ReadableColors {
+  backgroundColor: string;
+  textColor: '#000000' | '#FFFFFF';
+}
+
+/**
+ * The background to draw for a server-supplied `color` and the black or white text that reads on it.
+ * A colour `readableTextColor` can't read (named, hsl(), translucent, invalid) is replaced by `fallback`,
+ * so text never sits in a fixed colour on a background it wasn't picked for.
+ */
+export function readableColors(color: string | null | undefined, fallback = '#808080'): ReadableColors {
+  const value = color?.trim() ?? '';
+  const textColor = readableTextColor(value);
+  if (!textColor) return { backgroundColor: fallback, textColor: readableTextColor(fallback) ?? '#000000' };
+  // React Native only draws a hex colour that has its leading #.
+  return { backgroundColor: /^[0-9a-f]+$/i.test(value) ? `#${value}` : value, textColor };
+}
+
 export function padZero(str: string, len: number): string {
   len = len || 2;
   const zeros = new Array(len).join('0');
diff --git a/src/services/__tests__/app-reset.service.test.ts b/src/services/__tests__/app-reset.service.test.ts
index 867e7898..9f785258 100644
--- a/src/services/__tests__/app-reset.service.test.ts
+++ b/src/services/__tests__/app-reset.service.test.ts
@@ -85,7 +85,6 @@ jest.mock('@/stores/app/bluetooth-audio-store', () => ({
     isConnecting: false,
     availableDevices: [],
     connectionError: null,
-    isAudioRoutingActive: false,
   },
   useBluetoothAudioStore: {
     setState: jest.fn(),
@@ -544,7 +543,6 @@ describe('app-reset.service', () => {
         isConnecting: false,
         availableDevices: [],
         connectionError: null,
-        isAudioRoutingActive: false,
       });
     });
 
diff --git a/src/services/__tests__/bluetooth-audio-b01inrico.test.ts b/src/services/__tests__/bluetooth-audio-b01inrico.test.ts
index c21166e2..158f349a 100644
--- a/src/services/__tests__/bluetooth-audio-b01inrico.test.ts
+++ b/src/services/__tests__/bluetooth-audio-b01inrico.test.ts
@@ -22,12 +22,9 @@ jest.mock('@/stores/app/bluetooth-audio-store', () => ({
       setIsConnecting: jest.fn(),
       setConnectionError: jest.fn(),
       clearConnectionError: jest.fn(),
-      addButtonEvent: jest.fn(),
-      setLastButtonAction: jest.fn(),
       setAvailableAudioDevices: jest.fn(),
       setSelectedMicrophone: jest.fn(),
       setSelectedSpeaker: jest.fn(),
-      setAudioRoutingActive: jest.fn(),
       availableDevices: [],
       connectedDevice: null,
       preferredDevice: null,
@@ -237,8 +234,6 @@ describe('BluetoothAudioService - B01 Inrico Button Parsing', () => {
 
   describe('handleB01InricoButtonEvent', () => {
     it('should process base64 encoded button data', () => {
-      const mockAddButtonEvent = jest.fn();
-      const mockSetLastButtonAction = jest.fn();
       const mockProcessButtonEvent = jest.fn();
       
       // Mock the processButtonEvent method
diff --git a/src/services/__tests__/bluetooth-audio.service.test.ts b/src/services/__tests__/bluetooth-audio.service.test.ts
index fc491c2d..b30a8b2d 100644
--- a/src/services/__tests__/bluetooth-audio.service.test.ts
+++ b/src/services/__tests__/bluetooth-audio.service.test.ts
@@ -63,19 +63,6 @@ jest.mock('@/services/audio.service', () => ({
   },
 }));
 
-jest.mock('@/features/livekit-call/store/useLiveKitCallStore', () => ({
-  useLiveKitCallStore: {
-    getState: jest.fn(() => ({
-      isConnected: false,
-      roomInstance: null,
-      localParticipant: null,
-      actions: {
-        setMicrophoneEnabled: jest.fn(),
-      },
-    })),
-  },
-}));
-
 jest.mock('@/stores/app/livekit-store', () => {
   const actions = {
     toggleMicrophone: jest.fn(),
@@ -225,27 +212,6 @@ describe('BluetoothAudioService Refactoring', () => {
       await service.setMicrophoneEnabled(false);
       expect(storeMock.setMicrophoneEnabled).toHaveBeenCalledWith(false);
     });
-
-    it('should fall back to legacy livekitStore when feature store is connected but has no local participant', async () => {
-      const service = bluetoothAudioService as any;
-      const featureStore = require('@/features/livekit-call/store/useLiveKitCallStore').useLiveKitCallStore;
-      const mockFeatureSetMicrophoneEnabled = jest.fn();
-
-      featureStore.getState.mockReturnValue({
-        isConnected: true,
-        roomInstance: null,
-        localParticipant: null,
-        actions: {
-          setMicrophoneEnabled: mockFeatureSetMicrophoneEnabled,
-        },
-      });
-
-      await service.setMicrophoneEnabled(true);
-
-      const legacyStore = require('@/stores/app/livekit-store').useLiveKitStore.getState();
-      expect(mockFeatureSetMicrophoneEnabled).not.toHaveBeenCalled();
-      expect(legacyStore.setMicrophoneEnabled).toHaveBeenCalledWith(true);
-    });
   });
 
   describe('Capability parsing strictness', () => {
diff --git a/src/services/bluetooth-audio.service.ts b/src/services/bluetooth-audio.service.ts
index a66acc96..4405bc8d 100644
--- a/src/services/bluetooth-audio.service.ts
+++ b/src/services/bluetooth-audio.service.ts
@@ -7,13 +7,7 @@ import { logger } from '@/lib/logging';
 import { audioService } from '@/services/audio.service';
 import { callKeepService } from '@/services/callkeep.service';
 import { type AudioButtonEvent, type BluetoothAudioDevice, type Device, State, useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
-// Lazy getters to avoid circular dependencies with livekit-store and useLiveKitCallStore
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getLiveKitCallStore = (): any => {
-  // Using import() for lazy loading to avoid circular dependencies
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  return require('@/features/livekit-call/store/useLiveKitCallStore').useLiveKitCallStore;
-};
+// Lazy getter to avoid a circular dependency with livekit-store
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getLiveKitStore = (): any => {
   // Using import() for lazy loading to avoid circular dependencies
@@ -2063,8 +2057,6 @@ class BluetoothAudioService {
       context: { buttonEvent },
     });
 
-    useBluetoothAudioStore.getState().addButtonEvent(buttonEvent);
-
     // Handle mute/unmute events
     if (buttonEvent.button === 'mute') {
       this.handleMuteToggle();
@@ -2119,11 +2111,6 @@ class BluetoothAudioService {
       context: { direction },
     });
 
-    useBluetoothAudioStore.getState().setLastButtonAction({
-      action: direction,
-      timestamp: Date.now(),
-    });
-
     // Add volume control logic here if needed
     // This would typically involve native audio controls
   }
@@ -2135,30 +2122,6 @@ class BluetoothAudioService {
 
   private async handleMuteToggle(): Promise<void> {
     try {
-      const featureLiveKitState = getLiveKitCallStore().getState();
-      const featureRoom = featureLiveKitState.roomInstance;
-      const featureLocalParticipant = featureRoom?.localParticipant ?? featureLiveKitState.localParticipant;
-
-      if (featureLiveKitState.isConnected && featureRoom && featureLocalParticipant) {
-        const nextMicEnabled = !featureLocalParticipant.isMicrophoneEnabled;
-        await featureLiveKitState.actions.setMicrophoneEnabled(nextMicEnabled);
-
-        const updatedState = getLiveKitCallStore().getState();
-        const updatedParticipant = updatedState.roomInstance?.localParticipant ?? updatedState.localParticipant;
-
-        if (updatedParticipant && updatedParticipant.isMicrophoneEnabled === nextMicEnabled) {
-          return;
-        }
-
-        logger.warn({
-          message: 'Feature store microphone toggle did not apply, falling back to legacy store',
-          context: {
-            nextMicEnabled,
-            hasUpdatedParticipant: Boolean(updatedParticipant),
-          },
-        });
-      }
-
       await getLiveKitStore().getState().toggleMicrophone();
     } catch (error) {
       logger.error({
@@ -2251,45 +2214,17 @@ class BluetoothAudioService {
 
   private async applyMicrophoneEnabled(enabled: boolean): Promise<void> {
     try {
-      const featureLiveKitState = getLiveKitCallStore().getState();
-      const featureRoom = featureLiveKitState.roomInstance;
-      const legacyLiveKitState = getLiveKitStore().getState();
-      const hasFeatureRoom = Boolean(featureLiveKitState.isConnected && featureRoom?.localParticipant);
-      const hasLegacyRoom = Boolean(legacyLiveKitState.currentRoom?.localParticipant);
-      const stillConnecting = featureLiveKitState.isConnecting || legacyLiveKitState.isConnecting;
-
-      if (!hasFeatureRoom && !hasLegacyRoom && stillConnecting) {
+      const liveKitState = getLiveKitStore().getState();
+      const hasRoom = Boolean(liveKitState.currentRoom?.localParticipant);
+
+      if (!hasRoom && liveKitState.isConnecting) {
         this.scheduleMicApplyRetry(enabled);
         return;
       }
 
       this.clearMicApplyRetry();
 
-      if (featureLiveKitState.isConnected && featureRoom?.localParticipant) {
-        const currentFeatureMicEnabled = featureRoom.localParticipant.isMicrophoneEnabled;
-        if (currentFeatureMicEnabled === enabled) {
-          return;
-        }
-
-        await featureLiveKitState.actions.setMicrophoneEnabled(enabled);
-
-        const updatedState = getLiveKitCallStore().getState();
-        const updatedParticipant = updatedState.roomInstance?.localParticipant ?? updatedState.localParticipant;
-
-        if (updatedParticipant && updatedParticipant.isMicrophoneEnabled === enabled) {
-          return;
-        }
-
-        logger.warn({
-          message: 'Feature store setMicrophoneEnabled did not apply, falling back to legacy store',
-          context: {
-            enabled,
-            hasUpdatedParticipant: Boolean(updatedParticipant),
-          },
-        });
-      }
-
-      await getLiveKitStore().getState().setMicrophoneEnabled(enabled);
+      await liveKitState.setMicrophoneEnabled(enabled);
     } catch (error) {
       logger.error({
         message: 'Failed to set microphone via Bluetooth PTT button',
@@ -2336,8 +2271,6 @@ class BluetoothAudioService {
       // 2. Configure LiveKit's audio context to use the Bluetooth device as input/output
       // 3. Set audio session category and options appropriately
 
-      bluetoothStore.setAudioRoutingActive(true);
-
       // Notify LiveKit store about audio device change
       // This would trigger any necessary audio context updates
     } catch (error) {
@@ -2373,8 +2306,6 @@ class BluetoothAudioService {
         bluetoothStore.setSelectedSpeaker(defaultSpeaker);
       }
 
-      // Revert audio routing to default (phone speaker/microphone)
-      bluetoothStore.setAudioRoutingActive(false);
       bluetoothStore.setIsHeadsetButtonMonitoring(false);
       this.pttPressActive = false;
       this.clearPttReleaseFallback();
diff --git a/src/stores/app/__tests__/livekit-store-room-switch.test.ts b/src/stores/app/__tests__/livekit-store-room-switch.test.ts
index 4a5a984a..08567490 100644
--- a/src/stores/app/__tests__/livekit-store-room-switch.test.ts
+++ b/src/stores/app/__tests__/livekit-store-room-switch.test.ts
@@ -127,7 +127,6 @@ jest.mock('../bluetooth-audio-store', () => ({
         microphone: null,
         speaker: null,
       },
-      setLastButtonAction: jest.fn(),
       setSelectedMicrophone: jest.fn(),
       setSelectedSpeaker: jest.fn(),
     })),
diff --git a/src/stores/app/bluetooth-audio-store.ts b/src/stores/app/bluetooth-audio-store.ts
index 50793660..40234c34 100644
--- a/src/stores/app/bluetooth-audio-store.ts
+++ b/src/stores/app/bluetooth-audio-store.ts
@@ -42,11 +42,6 @@ export interface AudioButtonEvent {
   timestamp: number;
 }
 
-export interface ButtonAction {
-  action: 'mute' | 'unmute' | 'volume_up' | 'volume_down';
-  timestamp: number;
-}
-
 export interface AudioDeviceInfo {
   id: string;
   name: string;
@@ -77,11 +72,6 @@ interface BluetoothAudioState {
 
   // Connection status
   connectionError: string | null;
-  isAudioRoutingActive: boolean;
-
-  // Button events
-  buttonEvents: AudioButtonEvent[];
-  lastButtonAction: ButtonAction | null;
 
   // Media button PTT settings (for AirPods/earbuds)
   mediaButtonPTTSettings: MediaButtonPTTSettings;
@@ -110,14 +100,6 @@ interface BluetoothAudioState {
   setConnectionError: (error: string | null) => void;
   clearConnectionError: () => void;
 
-  // Audio routing
-  setAudioRoutingActive: (active: boolean) => void;
-
-  // Button events
-  addButtonEvent: (event: AudioButtonEvent) => void;
-  clearButtonEvents: () => void;
-  setLastButtonAction: (action: ButtonAction | null) => void;
-
   // Media button PTT settings (for AirPods/earbuds)
   setMediaButtonPTTSettings: (settings: Partial<MediaButtonPTTSettings>) => void;
   setMediaButtonPTTEnabled: (enabled: boolean) => void;
@@ -141,10 +123,6 @@ export const INITIAL_STATE: Omit<
   | 'updateAudioDeviceAvailability'
   | 'setConnectionError'
   | 'clearConnectionError'
-  | 'setAudioRoutingActive'
-  | 'addButtonEvent'
-  | 'clearButtonEvents'
-  | 'setLastButtonAction'
   | 'setMediaButtonPTTSettings'
   | 'setMediaButtonPTTEnabled'
   | 'setIsHeadsetButtonMonitoring'
@@ -165,9 +143,6 @@ export const INITIAL_STATE: Omit<
     speaker: { id: 'default-speaker', name: 'Default Speaker', type: 'speaker', isAvailable: true },
   },
   connectionError: null,
-  isAudioRoutingActive: false,
-  buttonEvents: [],
-  lastButtonAction: null,
   mediaButtonPTTSettings: createDefaultPTTSettings(),
 };
 
@@ -231,21 +206,6 @@ export const useBluetoothAudioStore = create<BluetoothAudioState>((set, get) =>
   setConnectionError: (error) => set({ connectionError: error }),
   clearConnectionError: () => set({ connectionError: null }),
 
-  // Audio routing
-  setAudioRoutingActive: (active) => set({ isAudioRoutingActive: active }),
-
-  // Button events
-  addButtonEvent: (event) => {
-    const { buttonEvents } = get();
-    const maxEvents = 50; // Keep only the last 50 events
-    const updatedEvents = [event, ...buttonEvents].slice(0, maxEvents);
-    set({ buttonEvents: updatedEvents });
-  },
-
-  clearButtonEvents: () => set({ buttonEvents: [] }),
-
-  setLastButtonAction: (action) => set({ lastButtonAction: action }),
-
   // Preferred device management
   setPreferredDevice: (device) => set({ preferredDevice: device }),
 
diff --git a/src/stores/app/livekit-store.ts b/src/stores/app/livekit-store.ts
index 0f6660d5..ff91d9ea 100644
--- a/src/stores/app/livekit-store.ts
+++ b/src/stores/app/livekit-store.ts
@@ -331,11 +331,6 @@ export const useLiveKitStore = create<LiveKitState>((set, get) => ({
         context: { enabled },
       });
 
-      useBluetoothAudioStore.getState().setLastButtonAction({
-        action: enabled ? 'unmute' : 'mute',
-        timestamp: Date.now(),
-      });
-
       if (enabled) {
         await audioService.playStartTransmittingSound();
       } else {
diff --git a/theme-tokens.css b/theme-tokens.css
index 8bbcad96..f2066c43 100644
--- a/theme-tokens.css
+++ b/theme-tokens.css
@@ -145,6 +145,8 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
+      /* Primary is the light ramp reversed, like every other scale: 600+ must be light, since
+         text-primary-600, focus borders and checked controls sit on dark surfaces here. */
       --color-primary-0: 15 23 42;
       --color-primary-50: 30 41 59;
       --color-primary-100: 39 49 66;
@@ -152,11 +154,11 @@
       --color-primary-300: 51 65 85;
       --color-primary-400: 71 85 105;
       --color-primary-500: 100 116 139;
-      --color-primary-600: 71 85 105;
-      --color-primary-700: 51 65 85;
-      --color-primary-800: 45 55 72;
-      --color-primary-900: 39 49 66;
-      --color-primary-950: 30 41 59;
+      --color-primary-600: 148 163 184;
+      --color-primary-700: 203 213 225;
+      --color-primary-800: 226 232 240;
+      --color-primary-900: 241 245 249;
+      --color-primary-950: 248 250 252;
       --color-secondary-0: 11 12 12;
       --color-secondary-50: 24 23 23;
       --color-secondary-100: 39 38 38;
@@ -284,11 +286,11 @@
     --color-primary-300: 51 65 85;
     --color-primary-400: 71 85 105;
     --color-primary-500: 100 116 139;
-    --color-primary-600: 71 85 105;
-    --color-primary-700: 51 65 85;
-    --color-primary-800: 45 55 72;
-    --color-primary-900: 39 49 66;
-    --color-primary-950: 30 41 59;
+    --color-primary-600: 148 163 184;
+    --color-primary-700: 203 213 225;
+    --color-primary-800: 226 232 240;
+    --color-primary-900: 241 245 249;
+    --color-primary-950: 248 250 252;
     --color-secondary-0: 11 12 12;
     --color-secondary-50: 24 23 23;
     --color-secondary-100: 39 38 38;