diff --git a/src/app/(app)/__tests__/protocols.test.tsx b/src/app/(app)/__tests__/protocols.test.tsx
new file mode 100644
index 0000000..cbb164d
--- /dev/null
+++ b/src/app/(app)/__tests__/protocols.test.tsx
@@ -0,0 +1,389 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+
+import { CallProtocolsResultData } from '@/models/v4/callProtocols/callProtocolsResultData';
+
+import Protocols from '../protocols';
+
+// Mock dependencies
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('@/components/common/loading', () => ({
+  Loading: () => {
+    const { Text } = require('react-native');
+    return <Text>Loading</Text>;
+  },
+}));
+
+jest.mock('@/components/common/zero-state', () => ({
+  __esModule: true,
+  default: ({ heading, description }: { heading: string; description: string }) => {
+    const { Text } = require('react-native');
+    return <Text>{`ZeroState: ${heading}`}</Text>;
+  },
+}));
+
+jest.mock('@/components/protocols/protocol-card', () => ({
+  ProtocolCard: ({ protocol, onPress }: { protocol: any; onPress: (id: string) => void }) => {
+    const { Pressable, Text } = require('react-native');
+    return (
+      <Pressable testID={`protocol-card-${protocol.Id}`} onPress={() => onPress(protocol.Id)}>
+        <Text>{protocol.Name}</Text>
+      </Pressable>
+    );
+  },
+}));
+
+jest.mock('@/components/protocols/protocol-details-sheet', () => ({
+  ProtocolDetailsSheet: () => {
+    const { Text } = require('react-native');
+    return <Text>ProtocolDetailsSheet</Text>;
+  },
+}));
+
+// Mock the protocols store
+const mockProtocolsStore = {
+  protocols: [],
+  searchQuery: '',
+  setSearchQuery: jest.fn(),
+  selectProtocol: jest.fn(),
+  isLoading: false,
+  fetchProtocols: jest.fn(),
+};
+
+jest.mock('@/stores/protocols/store', () => ({
+  useProtocolsStore: () => mockProtocolsStore,
+}));
+
+// Mock protocols test data
+const mockProtocols: CallProtocolsResultData[] = [
+  {
+    Id: '1',
+    DepartmentId: 'dept1',
+    Name: 'Fire Emergency Response',
+    Code: 'FIRE001',
+    Description: 'Standard fire emergency response protocol',
+    ProtocolText: '<p>Fire emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+  {
+    Id: '2',
+    DepartmentId: 'dept1',
+    Name: 'Medical Emergency',
+    Code: 'MED001',
+    Description: 'Medical emergency response protocol',
+    ProtocolText: '<p>Medical emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+  {
+    Id: '3',
+    DepartmentId: 'dept1',
+    Name: 'Hazmat Response',
+    Code: 'HAZ001',
+    Description: 'Hazardous material response protocol',
+    ProtocolText: '<p>Hazmat response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+  {
+    Id: '', // Empty ID to test the keyExtractor fix
+    DepartmentId: 'dept1',
+    Name: 'Protocol with Empty ID',
+    Code: 'EMPTY001',
+    Description: 'Protocol with empty ID for testing',
+    ProtocolText: '<p>Protocol with empty ID content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+];
+
+describe('Protocols Page', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset mock store to default state
+    Object.assign(mockProtocolsStore, {
+      protocols: [],
+      searchQuery: '',
+      setSearchQuery: jest.fn(),
+      selectProtocol: jest.fn(),
+      isLoading: false,
+      fetchProtocols: jest.fn(),
+    });
+  });
+
+  it('should render loading state during initial fetch', () => {
+    Object.assign(mockProtocolsStore, {
+      isLoading: true,
+      protocols: [],
+    });
+
+    render(<Protocols />);
+
+    expect(screen.getByText('Loading')).toBeTruthy();
+  });
+
+  it('should render protocols list when data is loaded', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-2')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-3')).toBeTruthy();
+    });
+
+    expect(mockProtocolsStore.fetchProtocols).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle protocols with empty IDs using keyExtractor fallback', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    await waitFor(() => {
+      // The protocol with empty ID should render with fallback key
+      expect(screen.getByText('Protocol with Empty ID')).toBeTruthy();
+    });
+  });
+
+  it('should render zero state when no protocols are available', () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: [],
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    expect(screen.getByText('ZeroState: protocols.empty')).toBeTruthy();
+  });
+
+  it('should filter protocols based on search query by name', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'fire',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    // Only Fire Emergency Response should be visible in filtered results
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+      expect(screen.queryByTestId('protocol-card-2')).toBeFalsy();
+      expect(screen.queryByTestId('protocol-card-3')).toBeFalsy();
+    });
+  });
+
+  it('should filter protocols based on search query by code', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'MED001',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    // Only Medical Emergency should be visible in filtered results
+    await waitFor(() => {
+      expect(screen.queryByTestId('protocol-card-1')).toBeFalsy();
+      expect(screen.getByTestId('protocol-card-2')).toBeTruthy();
+      expect(screen.queryByTestId('protocol-card-3')).toBeFalsy();
+    });
+  });
+
+  it('should filter protocols based on search query by description', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'hazardous',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    // Only Hazmat Response should be visible in filtered results
+    await waitFor(() => {
+      expect(screen.queryByTestId('protocol-card-1')).toBeFalsy();
+      expect(screen.queryByTestId('protocol-card-2')).toBeFalsy();
+      expect(screen.getByTestId('protocol-card-3')).toBeTruthy();
+    });
+  });
+
+  it('should show zero state when search returns no results', () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'nonexistent',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    expect(screen.getByText('ZeroState: protocols.empty')).toBeTruthy();
+  });
+
+  it('should handle search input changes', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: '',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    const searchInput = screen.getByPlaceholderText('protocols.search');
+    fireEvent.changeText(searchInput, 'fire');
+
+    expect(mockProtocolsStore.setSearchQuery).toHaveBeenCalledWith('fire');
+  });
+
+  it('should clear search query when X button is pressed', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'fire',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    const searchInput = screen.getByDisplayValue('fire');
+    expect(searchInput).toBeTruthy();
+
+    // Test that the clear functionality would work
+    fireEvent.changeText(searchInput, '');
+    expect(mockProtocolsStore.setSearchQuery).toHaveBeenCalledWith('');
+  });
+
+  it('should handle protocol selection', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: '',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    const protocolCard = screen.getByTestId('protocol-card-1');
+    fireEvent.press(protocolCard);
+
+    expect(mockProtocolsStore.selectProtocol).toHaveBeenCalledWith('1');
+  });
+
+  it('should handle pull-to-refresh', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    // The FlatList should be rendered with RefreshControl
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+    });
+
+    expect(mockProtocolsStore.fetchProtocols).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render protocol details sheet', () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    expect(screen.getByText('ProtocolDetailsSheet')).toBeTruthy();
+  });
+
+  it('should handle case-insensitive search', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: 'FIRE',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    // Should match "Fire Emergency Response" despite different case
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+    });
+  });
+
+  it('should handle empty search query by showing all protocols', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: '',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-2')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-3')).toBeTruthy();
+    });
+  });
+
+  it('should handle whitespace-only search query by showing all protocols', async () => {
+    Object.assign(mockProtocolsStore, {
+      protocols: mockProtocols,
+      searchQuery: '   ',
+      isLoading: false,
+    });
+
+    render(<Protocols />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('protocol-card-1')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-2')).toBeTruthy();
+      expect(screen.getByTestId('protocol-card-3')).toBeTruthy();
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/app/(app)/__tests__/signalr-lifecycle.test.tsx b/src/app/(app)/__tests__/signalr-lifecycle.test.tsx
new file mode 100644
index 0000000..7d9cda9
--- /dev/null
+++ b/src/app/(app)/__tests__/signalr-lifecycle.test.tsx
@@ -0,0 +1,164 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { AppStateStatus } from 'react-native';
+
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
+
+// Mock the SignalR store
+jest.mock('@/stores/signalr/signalr-store');
+
+const mockUseSignalRStore = useSignalRStore as jest.MockedFunction<typeof useSignalRStore>;
+
+// Create a custom hook to test the SignalR lifecycle logic
+function useSignalRLifecycle(isActive: boolean, appState: AppStateStatus, isSignedIn: boolean, hasInitialized: boolean) {
+  const signalRStore = useSignalRStore();
+
+  React.useEffect(() => {
+    // Handle app going to background
+    if (!isActive && (appState === 'background' || appState === 'inactive') && hasInitialized && isSignedIn) {
+      signalRStore.disconnectUpdateHub();
+      signalRStore.disconnectGeolocationHub();
+    }
+  }, [isActive, appState, hasInitialized, isSignedIn, signalRStore]);
+
+  React.useEffect(() => {
+    // Handle app resuming from background
+    if (isActive && appState === 'active' && hasInitialized && isSignedIn) {
+      signalRStore.connectUpdateHub();
+      signalRStore.connectGeolocationHub();
+    }
+  }, [isActive, appState, hasInitialized, isSignedIn, signalRStore]);
+
+  return signalRStore;
+}
+
+describe('SignalR Lifecycle Management', () => {
+  const mockConnectUpdateHub = jest.fn();
+  const mockDisconnectUpdateHub = jest.fn();
+  const mockConnectGeolocationHub = jest.fn();
+  const mockDisconnectGeolocationHub = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Mock SignalR store
+    mockUseSignalRStore.mockReturnValue({
+      connectUpdateHub: mockConnectUpdateHub,
+      disconnectUpdateHub: mockDisconnectUpdateHub,
+      connectGeolocationHub: mockConnectGeolocationHub,
+      disconnectGeolocationHub: mockDisconnectGeolocationHub,
+      isUpdateHubConnected: false,
+      isGeolocationHubConnected: false,
+    } as any);
+  });
+
+  it('should disconnect SignalR when app goes to background', async () => {
+    const { rerender } = renderHook(
+      ({ isActive, appState, isSignedIn, hasInitialized }) =>
+        useSignalRLifecycle(isActive, appState, isSignedIn, hasInitialized),
+      {
+        initialProps: {
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+          isSignedIn: true,
+          hasInitialized: true,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+      isSignedIn: true,
+      hasInitialized: true,
+    });
+
+    await waitFor(() => {
+      expect(mockDisconnectUpdateHub).toHaveBeenCalled();
+      expect(mockDisconnectGeolocationHub).toHaveBeenCalled();
+    });
+  });
+
+  it('should reconnect SignalR when app becomes active again', async () => {
+    const { rerender } = renderHook(
+      ({ isActive, appState, isSignedIn, hasInitialized }) =>
+        useSignalRLifecycle(isActive, appState, isSignedIn, hasInitialized),
+      {
+        initialProps: {
+          isActive: false,
+          appState: 'background' as AppStateStatus,
+          isSignedIn: true,
+          hasInitialized: true,
+        },
+      }
+    );
+
+    // Simulate app becoming active
+    rerender({
+      isActive: true,
+      appState: 'active' as AppStateStatus,
+      isSignedIn: true,
+      hasInitialized: true,
+    });
+
+    await waitFor(() => {
+      expect(mockConnectUpdateHub).toHaveBeenCalled();
+      expect(mockConnectGeolocationHub).toHaveBeenCalled();
+    });
+  });
+
+  it('should not manage SignalR connections when user is not signed in', async () => {
+    const { rerender } = renderHook(
+      ({ isActive, appState, isSignedIn, hasInitialized }) =>
+        useSignalRLifecycle(isActive, appState, isSignedIn, hasInitialized),
+      {
+        initialProps: {
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+          isSignedIn: false,
+          hasInitialized: true,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+      isSignedIn: false,
+      hasInitialized: true,
+    });
+
+    // Should not call SignalR methods when user is not signed in
+    expect(mockDisconnectUpdateHub).not.toHaveBeenCalled();
+    expect(mockDisconnectGeolocationHub).not.toHaveBeenCalled();
+  });
+
+  it('should not manage SignalR connections when app is not initialized', async () => {
+    const { rerender } = renderHook(
+      ({ isActive, appState, isSignedIn, hasInitialized }) =>
+        useSignalRLifecycle(isActive, appState, isSignedIn, hasInitialized),
+      {
+        initialProps: {
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+          isSignedIn: true,
+          hasInitialized: false,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+      isSignedIn: true,
+      hasInitialized: false,
+    });
+
+    // Should not call SignalR methods when app is not initialized
+    expect(mockDisconnectUpdateHub).not.toHaveBeenCalled();
+    expect(mockDisconnectGeolocationHub).not.toHaveBeenCalled();
+  });
+}); 
\ No newline at end of file
diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
index 7fa4d10..58a19e9 100644
--- a/src/app/(app)/_layout.tsx
+++ b/src/app/(app)/_layout.tsx
@@ -16,6 +16,7 @@ import { Drawer, DrawerBackdrop, DrawerBody, DrawerContent, DrawerFooter, Drawer
 import { Icon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 import { useAppLifecycle } from '@/hooks/use-app-lifecycle';
+import { useSignalRLifecycle } from '@/hooks/use-signalr-lifecycle';
 import { useAuthStore } from '@/lib/auth';
 import { logger } from '@/lib/logging';
 import { useIsFirstTime } from '@/lib/storage';
@@ -26,6 +27,7 @@ import { useCoreStore } from '@/stores/app/core-store';
 import { useCallsStore } from '@/stores/calls/store';
 import { useRolesStore } from '@/stores/roles/store';
 import { securityStore } from '@/stores/security/store';
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
 
 export default function TabLayout() {
   const { t } = useTranslation();
@@ -96,10 +98,14 @@ export default function TabLayout() {
       await securityStore.getState().getRights();
       await useCoreStore.getState().fetchConfig();
 
+      await useSignalRStore.getState().connectUpdateHub();
+      await useSignalRStore.getState().connectGeolocationHub();
+
+      hasInitialized.current = true;
+
       // Initialize Bluetooth service
       await bluetoothAudioService.initialize();
 
-      hasInitialized.current = true;
       logger.info({
         message: 'App initialization completed successfully',
       });
@@ -123,6 +129,7 @@ export default function TabLayout() {
     });
 
     try {
+      // Refresh data
       await Promise.all([useCoreStore.getState().fetchConfig(), useCallsStore.getState().fetchCalls(), useRolesStore.getState().fetchRoles()]);
     } catch (error) {
       logger.error({
@@ -132,6 +139,12 @@ export default function TabLayout() {
     }
   }, [status]);
 
+  // Handle SignalR lifecycle management
+  useSignalRLifecycle({
+    isSignedIn: status === 'signedIn',
+    hasInitialized: hasInitialized.current,
+  });
+
   // Handle splash screen hiding
   useEffect(() => {
     if (status !== 'idle' && !hasHiddenSplash.current) {
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
index 7e0435e..06ac62e 100644
--- a/src/app/(app)/index.tsx
+++ b/src/app/(app)/index.tsx
@@ -105,7 +105,7 @@ export default function Map() {
     };
 
     fetchMapDataAndMarkers();
-  }, [setMapPins]);
+  }, []);
 
   useEffect(() => {
     Animated.loop(
diff --git a/src/app/(app)/protocols.tsx b/src/app/(app)/protocols.tsx
index 9bcbae7..1ba3e1e 100644
--- a/src/app/(app)/protocols.tsx
+++ b/src/app/(app)/protocols.tsx
@@ -55,7 +55,7 @@ export default function Protocols() {
           ) : filteredProtocols.length > 0 ? (
             <FlatList
               data={filteredProtocols}
-              keyExtractor={(item) => item.Id}
+              keyExtractor={(item, index) => item.Id || `protocol-${index}`}
               renderItem={({ item }) => <ProtocolCard protocol={item} onPress={selectProtocol} />}
               showsVerticalScrollIndicator={false}
               contentContainerStyle={{ paddingBottom: 100 }}
diff --git a/src/components/livekit/__tests__/livekit-bottom-sheet.test.tsx b/src/components/livekit/__tests__/livekit-bottom-sheet.test.tsx
index 562e022..b53f0c2 100644
--- a/src/components/livekit/__tests__/livekit-bottom-sheet.test.tsx
+++ b/src/components/livekit/__tests__/livekit-bottom-sheet.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react-native';
+import { render, act } from '@testing-library/react-native';
 import React from 'react';
 import { beforeEach, describe, expect, it, jest } from '@jest/globals';
 
@@ -334,8 +334,7 @@ describe('LiveKitBottomSheet', () => {
     it('should handle view transitions', () => {
       const fetchVoiceSettings = jest.fn();
 
-      // Start with room selection
-      const { rerender } = render(<LiveKitBottomSheet />);
+      // Start with room selection view
       mockUseLiveKitStore.mockReturnValue({
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
@@ -343,10 +342,11 @@ describe('LiveKitBottomSheet', () => {
         fetchVoiceSettings,
       });
 
-      rerender(<LiveKitBottomSheet />);
+      const { rerender } = render(<LiveKitBottomSheet />);
       expect(fetchVoiceSettings).toHaveBeenCalled();
 
-      // Connect to room
+      // Connect to room - fetchVoiceSettings should not be called again since we're now in connected view
+      fetchVoiceSettings.mockClear();
       mockUseLiveKitStore.mockReturnValue({
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
@@ -357,14 +357,13 @@ describe('LiveKitBottomSheet', () => {
       });
 
       rerender(<LiveKitBottomSheet />);
-      expect(fetchVoiceSettings).toHaveBeenCalled();
+      expect(fetchVoiceSettings).not.toHaveBeenCalled(); // Should not be called in connected view
     });
 
     it('should handle microphone state changes', () => {
       const fetchVoiceSettings = jest.fn();
 
-      // Start with muted microphone
-      const { rerender } = render(<LiveKitBottomSheet />);
+      // Start with muted microphone in connected state
       mockUseLiveKitStore.mockReturnValue({
         ...defaultLiveKitState,
         isBottomSheetVisible: true,
@@ -374,7 +373,9 @@ describe('LiveKitBottomSheet', () => {
         fetchVoiceSettings,
       });
 
-      rerender(<LiveKitBottomSheet />);
+      const { rerender } = render(<LiveKitBottomSheet />);
+      // Clear the initial call that happens during render before the view switches
+      fetchVoiceSettings.mockClear();
 
       // Enable microphone
       const enabledMockRoom = {
@@ -394,7 +395,7 @@ describe('LiveKitBottomSheet', () => {
       });
 
       rerender(<LiveKitBottomSheet />);
-      expect(fetchVoiceSettings).toHaveBeenCalled();
+      expect(fetchVoiceSettings).not.toHaveBeenCalled(); // Should not be called when just changing microphone state
     });
   });
 }); 
\ No newline at end of file
diff --git a/src/components/protocols/__tests__/protocol-card.test.tsx b/src/components/protocols/__tests__/protocol-card.test.tsx
new file mode 100644
index 0000000..3fda919
--- /dev/null
+++ b/src/components/protocols/__tests__/protocol-card.test.tsx
@@ -0,0 +1,277 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+
+import { CallProtocolsResultData } from '@/models/v4/callProtocols/callProtocolsResultData';
+
+import { ProtocolCard } from '../protocol-card';
+
+// Mock dependencies
+jest.mock('@/lib/utils', () => ({
+  formatDateForDisplay: jest.fn((date) => date ? '2023-01-01 12:00 UTC' : ''),
+  parseDateISOString: jest.fn((dateString) => dateString ? new Date(dateString) : null),
+  stripHtmlTags: jest.fn((html) => html ? html.replace(/<[^>]*>/g, '') : ''),
+}));
+
+describe('ProtocolCard', () => {
+  const mockOnPress = jest.fn();
+
+  beforeEach(() => {
+    mockOnPress.mockClear();
+  });
+
+  const baseProtocol: CallProtocolsResultData = {
+    Id: '1',
+    DepartmentId: 'dept1',
+    Name: 'Fire Emergency Response',
+    Code: 'FIRE001',
+    Description: 'Standard fire emergency response protocol',
+    ProtocolText: '<p>Fire emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  };
+
+  const protocolWithoutOptionalFields: CallProtocolsResultData = {
+    Id: '2',
+    DepartmentId: 'dept1',
+    Name: 'Basic Protocol',
+    Code: '',
+    Description: '',
+    ProtocolText: '',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '',
+    UpdatedByUserId: '',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  };
+
+  const protocolWithHtmlDescription: CallProtocolsResultData = {
+    Id: '3',
+    DepartmentId: 'dept1',
+    Name: 'Protocol with HTML',
+    Code: 'HTML001',
+    Description: '<p>This is a <strong>description</strong> with <em>HTML</em> tags</p>',
+    ProtocolText: '<p>Protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  };
+
+  describe('Basic Rendering', () => {
+    it('should render protocol card with all fields', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Fire Emergency Response')).toBeTruthy();
+      expect(screen.getByText('Standard fire emergency response protocol')).toBeTruthy();
+      expect(screen.getByText('FIRE001')).toBeTruthy();
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+
+    it('should render protocol card without optional fields', () => {
+      render(<ProtocolCard protocol={protocolWithoutOptionalFields} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Basic Protocol')).toBeTruthy();
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+      // Code badge should not be rendered when code is empty - we can't test for empty string as it's always rendered
+      expect(screen.queryByText('FIRE001')).toBeFalsy();
+    });
+
+    it('should handle protocol with HTML in description', () => {
+      render(<ProtocolCard protocol={protocolWithHtmlDescription} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Protocol with HTML')).toBeTruthy();
+      expect(screen.getByText('HTML001')).toBeTruthy();
+      // Description should be stripped of HTML tags
+      expect(screen.getByText('This is a description with HTML tags')).toBeTruthy();
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onPress with protocol ID when card is pressed', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      const card = screen.getByText('Fire Emergency Response');
+      fireEvent.press(card);
+
+      expect(mockOnPress).toHaveBeenCalledWith('1');
+    });
+
+    it('should call onPress with correct ID for different protocols', () => {
+      render(<ProtocolCard protocol={protocolWithoutOptionalFields} onPress={mockOnPress} />);
+
+      const card = screen.getByText('Basic Protocol');
+      fireEvent.press(card);
+
+      expect(mockOnPress).toHaveBeenCalledWith('2');
+    });
+
+    it('should handle multiple press events', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      const card = screen.getByText('Fire Emergency Response');
+      fireEvent.press(card);
+      fireEvent.press(card);
+
+      expect(mockOnPress).toHaveBeenCalledTimes(2);
+      expect(mockOnPress).toHaveBeenCalledWith('1');
+    });
+  });
+
+  describe('Date Display', () => {
+    it('should display UpdatedOn date when available', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+
+    it('should fall back to CreatedOn when UpdatedOn is not available', () => {
+      render(<ProtocolCard protocol={protocolWithoutOptionalFields} onPress={mockOnPress} />);
+
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+  });
+
+  describe('Code Badge Display', () => {
+    it('should display code badge when code is provided', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      expect(screen.getByText('FIRE001')).toBeTruthy();
+    });
+
+    it('should not display code badge when code is empty', () => {
+      render(<ProtocolCard protocol={protocolWithoutOptionalFields} onPress={mockOnPress} />);
+
+      // The code badge section should not exist - we can't test for empty string as it's always rendered
+      expect(screen.queryByText('FIRE001')).toBeFalsy();
+    });
+
+    it('should not display code badge when code is null', () => {
+      const protocolWithNullCode = { ...baseProtocol, Code: null as any };
+      render(<ProtocolCard protocol={protocolWithNullCode} onPress={mockOnPress} />);
+
+      // The code badge section should not exist
+      expect(screen.queryByText('null')).toBeFalsy();
+    });
+  });
+
+  describe('Description Display', () => {
+    it('should display description when provided', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Standard fire emergency response protocol')).toBeTruthy();
+    });
+
+    it('should handle empty description', () => {
+      render(<ProtocolCard protocol={protocolWithoutOptionalFields} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Basic Protocol')).toBeTruthy();
+      // Empty description should render empty text
+      expect(screen.getByText('')).toBeTruthy();
+    });
+
+    it('should strip HTML tags from description', () => {
+      render(<ProtocolCard protocol={protocolWithHtmlDescription} onPress={mockOnPress} />);
+
+      expect(screen.getByText('This is a description with HTML tags')).toBeTruthy();
+      // Should not contain HTML tags
+      expect(screen.queryByText('<p>This is a <strong>description</strong> with <em>HTML</em> tags</p>')).toBeFalsy();
+    });
+
+    it('should handle null description', () => {
+      const protocolWithNullDescription = { ...baseProtocol, Description: null as any };
+      render(<ProtocolCard protocol={protocolWithNullDescription} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Fire Emergency Response')).toBeTruthy();
+      expect(screen.getByText('')).toBeTruthy();
+    });
+  });
+
+  describe('Text Truncation', () => {
+    it('should limit description to 2 lines', () => {
+      const protocolWithLongDescription = {
+        ...baseProtocol,
+        Description: 'This is a very long description that should be truncated when it exceeds two lines of text in the protocol card component',
+      };
+
+      render(<ProtocolCard protocol={protocolWithLongDescription} onPress={mockOnPress} />);
+
+      expect(screen.getByText('This is a very long description that should be truncated when it exceeds two lines of text in the protocol card component')).toBeTruthy();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle protocol with empty ID', () => {
+      const protocolWithEmptyId = { ...baseProtocol, Id: '' };
+      render(<ProtocolCard protocol={protocolWithEmptyId} onPress={mockOnPress} />);
+
+      const card = screen.getByText('Fire Emergency Response');
+      fireEvent.press(card);
+
+      expect(mockOnPress).toHaveBeenCalledWith('');
+    });
+
+    it('should handle protocol with special characters in name', () => {
+      const protocolWithSpecialChars = {
+        ...baseProtocol,
+        Name: 'Protocol & Emergency <Response>',
+      };
+
+      render(<ProtocolCard protocol={protocolWithSpecialChars} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Protocol & Emergency <Response>')).toBeTruthy();
+    });
+
+    it('should handle protocol with very long name', () => {
+      const protocolWithLongName = {
+        ...baseProtocol,
+        Name: 'Very Long Protocol Name That Might Overflow The Card Layout And Should Be Handled Gracefully',
+      };
+
+      render(<ProtocolCard protocol={protocolWithLongName} onPress={mockOnPress} />);
+
+      expect(screen.getByText('Very Long Protocol Name That Might Overflow The Card Layout And Should Be Handled Gracefully')).toBeTruthy();
+    });
+
+    it('should handle protocol with very long code', () => {
+      const protocolWithLongCode = {
+        ...baseProtocol,
+        Code: 'VERY_LONG_CODE_THAT_MIGHT_OVERFLOW_THE_BADGE',
+      };
+
+      render(<ProtocolCard protocol={protocolWithLongCode} onPress={mockOnPress} />);
+
+      expect(screen.getByText('VERY_LONG_CODE_THAT_MIGHT_OVERFLOW_THE_BADGE')).toBeTruthy();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be accessible for screen readers', () => {
+      render(<ProtocolCard protocol={baseProtocol} onPress={mockOnPress} />);
+
+      const card = screen.getByText('Fire Emergency Response');
+      expect(card).toBeTruthy();
+      // The card should be pressable
+      fireEvent.press(card);
+      expect(mockOnPress).toHaveBeenCalled();
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/protocols/__tests__/protocol-details-sheet.test.tsx b/src/components/protocols/__tests__/protocol-details-sheet.test.tsx
new file mode 100644
index 0000000..25c01a3
--- /dev/null
+++ b/src/components/protocols/__tests__/protocol-details-sheet.test.tsx
@@ -0,0 +1,381 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+
+import { CallProtocolsResultData } from '@/models/v4/callProtocols/callProtocolsResultData';
+
+import { ProtocolDetailsSheet } from '../protocol-details-sheet';
+
+// Mock dependencies
+jest.mock('@/lib/utils', () => ({
+  formatDateForDisplay: jest.fn((date) => date ? '2023-01-01 12:00 UTC' : ''),
+  parseDateISOString: jest.fn((dateString) => dateString ? new Date(dateString) : null),
+  stripHtmlTags: jest.fn((html) => html ? html.replace(/<[^>]*>/g, '') : ''),
+}));
+
+jest.mock('nativewind', () => ({
+  useColorScheme: () => ({ colorScheme: 'light' }),
+  cssInterop: jest.fn(),
+}));
+
+jest.mock('react-native-webview', () => ({
+  __esModule: true,
+  default: ({ source }: { source: any }) => {
+    const { View, Text } = require('react-native');
+    return (
+      <View testID="webview">
+        <Text testID="webview-content">{source.html}</Text>
+      </View>
+    );
+  },
+}));
+
+// Mock the protocols store
+const mockProtocolsStore = {
+  protocols: [],
+  selectedProtocolId: null,
+  isDetailsOpen: false,
+  closeDetails: jest.fn(),
+};
+
+jest.mock('@/stores/protocols/store', () => ({
+  useProtocolsStore: () => mockProtocolsStore,
+}));
+
+// Mock the UI components
+jest.mock('@/components/ui/actionsheet', () => ({
+  Actionsheet: ({ children }: { children: React.ReactNode }) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet">{children}</View>;
+  },
+  ActionsheetBackdrop: ({ children }: { children: React.ReactNode }) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-backdrop">{children}</View>;
+  },
+  ActionsheetContent: ({ children }: { children: React.ReactNode }) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-content">{children}</View>;
+  },
+  ActionsheetDragIndicator: () => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-drag-indicator" />;
+  },
+  ActionsheetDragIndicatorWrapper: ({ children }: { children: React.ReactNode }) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-drag-indicator-wrapper">{children}</View>;
+  },
+}));
+
+// Mock protocols test data
+const mockProtocols: CallProtocolsResultData[] = [
+  {
+    Id: '1',
+    DepartmentId: 'dept1',
+    Name: 'Fire Emergency Response',
+    Code: 'FIRE001',
+    Description: 'Standard fire emergency response protocol',
+    ProtocolText: '<p>Fire emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+  {
+    Id: '2',
+    DepartmentId: 'dept1',
+    Name: 'Basic Protocol',
+    Code: '',
+    Description: '',
+    ProtocolText: '<p>Basic protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '',
+    UpdatedByUserId: '',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+];
+
+describe('ProtocolDetailsSheet', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset mock store to default state
+    Object.assign(mockProtocolsStore, {
+      protocols: [],
+      selectedProtocolId: null,
+      isDetailsOpen: false,
+      closeDetails: jest.fn(),
+    });
+  });
+
+  describe('Sheet Visibility', () => {
+    it('should render when isDetailsOpen is true and selectedProtocol exists', () => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Fire Emergency Response')).toBeTruthy();
+    });
+  });
+
+  describe('Protocol Information Display', () => {
+    beforeEach(() => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+    });
+
+    it('should display protocol name in header', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Fire Emergency Response')).toBeTruthy();
+    });
+
+    it('should display protocol code when available', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('FIRE001')).toBeTruthy();
+    });
+
+    it('should display protocol description when available', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Standard fire emergency response protocol')).toBeTruthy();
+    });
+
+    it('should display formatted date', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+
+    it('should display protocol content in WebView', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const webview = screen.getByTestId('webview');
+      expect(webview).toBeTruthy();
+
+      const webviewContent = screen.getByTestId('webview-content');
+      expect(webviewContent).toBeTruthy();
+      expect(webviewContent.props.children).toContain('<p>Fire emergency response protocol content</p>');
+    });
+  });
+
+  describe('Protocol without Optional Fields', () => {
+    beforeEach(() => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '2',
+        isDetailsOpen: true,
+      });
+    });
+
+    it('should not display code section when code is empty', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Basic Protocol')).toBeTruthy();
+      expect(screen.queryByText('FIRE001')).toBeFalsy();
+    });
+
+    it('should not display description section when description is empty', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Basic Protocol')).toBeTruthy();
+      expect(screen.queryByText('Standard fire emergency response protocol')).toBeFalsy();
+    });
+
+    it('should still display WebView with protocol content', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const webview = screen.getByTestId('webview');
+      expect(webview).toBeTruthy();
+
+      const webviewContent = screen.getByTestId('webview-content');
+      expect(webviewContent.props.children).toContain('<p>Basic protocol content</p>');
+    });
+  });
+
+  describe('Close Functionality', () => {
+    beforeEach(() => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+    });
+
+    it('should have close button in header', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const closeButton = screen.getByTestId('close-button');
+      expect(closeButton).toBeTruthy();
+    });
+
+    it('should call closeDetails when close button is pressed', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const closeButton = screen.getByTestId('close-button');
+      fireEvent.press(closeButton);
+
+      expect(mockProtocolsStore.closeDetails).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('WebView Content', () => {
+    beforeEach(() => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+    });
+
+    it('should render WebView with proper HTML structure', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const webviewContent = screen.getByTestId('webview-content');
+      const htmlContent = webviewContent.props.children;
+
+      expect(htmlContent).toContain('<!DOCTYPE html>');
+      expect(htmlContent).toContain('<html>');
+      expect(htmlContent).toContain('<head>');
+      expect(htmlContent).toContain('<meta name="viewport"');
+      expect(htmlContent).toContain('<style>');
+      expect(htmlContent).toContain('<body>');
+      expect(htmlContent).toContain('<p>Fire emergency response protocol content</p>');
+    });
+
+    it('should include proper CSS styles for light theme', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const webviewContent = screen.getByTestId('webview-content');
+      const htmlContent = webviewContent.props.children;
+
+      expect(htmlContent).toContain('color: #1F2937'); // gray-800 for light theme
+      expect(htmlContent).toContain('background-color: #F9FAFB'); // light theme background
+    });
+
+    it('should include responsive CSS', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const webviewContent = screen.getByTestId('webview-content');
+      const htmlContent = webviewContent.props.children;
+
+      expect(htmlContent).toContain('max-width: 100%');
+      expect(htmlContent).toContain('font-family: system-ui, -apple-system, sans-serif');
+    });
+  });
+
+  describe('Dark Theme Support', () => {
+    it('should handle dark theme rendering', () => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+
+      render(<ProtocolDetailsSheet />);
+
+      const webview = screen.getByTestId('webview');
+      expect(webview).toBeTruthy();
+
+      const webviewContent = screen.getByTestId('webview-content');
+      expect(webviewContent).toBeTruthy();
+
+      // The WebView should render with proper HTML structure
+      expect(webviewContent.props.children).toContain('<!DOCTYPE html>');
+    });
+  });
+
+  describe('Date Display Logic', () => {
+    it('should prefer UpdatedOn over CreatedOn when both are available', () => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+
+    it('should fall back to CreatedOn when UpdatedOn is empty', () => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '2',
+        isDetailsOpen: true,
+      });
+
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('2023-01-01 12:00 UTC')).toBeTruthy();
+    });
+  });
+
+  describe('HTML Content Handling', () => {
+    it('should strip HTML tags from description but keep them in WebView', () => {
+      const protocolWithHtml = {
+        ...mockProtocols[0],
+        Description: '<p>Description with <strong>HTML</strong> tags</p>',
+        ProtocolText: '<p>Protocol with <em>HTML</em> content</p>',
+      };
+
+      Object.assign(mockProtocolsStore, {
+        protocols: [protocolWithHtml],
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+
+      render(<ProtocolDetailsSheet />);
+
+      // Description should be stripped of HTML
+      expect(screen.getByText('Description with HTML tags')).toBeTruthy();
+
+      // WebView should contain original HTML
+      const webviewContent = screen.getByTestId('webview-content');
+      expect(webviewContent.props.children).toContain('<p>Protocol with <em>HTML</em> content</p>');
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      Object.assign(mockProtocolsStore, {
+        protocols: mockProtocols,
+        selectedProtocolId: '1',
+        isDetailsOpen: true,
+      });
+    });
+
+    it('should be accessible for screen readers', () => {
+      render(<ProtocolDetailsSheet />);
+
+      expect(screen.getByText('Fire Emergency Response')).toBeTruthy();
+      expect(screen.getByTestId('close-button')).toBeTruthy();
+    });
+
+    it('should support keyboard navigation', () => {
+      render(<ProtocolDetailsSheet />);
+
+      const closeButton = screen.getByTestId('close-button');
+      fireEvent.press(closeButton);
+
+      expect(mockProtocolsStore.closeDetails).toHaveBeenCalled();
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/protocols/protocol-card.tsx b/src/components/protocols/protocol-card.tsx
index 125df91..e9eb4aa 100644
--- a/src/components/protocols/protocol-card.tsx
+++ b/src/components/protocols/protocol-card.tsx
@@ -16,7 +16,7 @@ interface ProtocolCardProps {
 
 export const ProtocolCard: React.FC<ProtocolCardProps> = ({ protocol, onPress }) => {
   return (
-    <Pressable onPress={() => onPress(protocol.Id)}>
+    <Pressable onPress={() => onPress(protocol.Id)} testID={`protocol-card-${protocol.Id}`}>
       <Box className="mb-3 rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800">
         <VStack space="xs">
           <Text className="text-lg font-semibold text-gray-800 dark:text-gray-100">{protocol.Name}</Text>
diff --git a/src/components/protocols/protocol-details-sheet.tsx b/src/components/protocols/protocol-details-sheet.tsx
index 77c0c31..62bc205 100644
--- a/src/components/protocols/protocol-details-sheet.tsx
+++ b/src/components/protocols/protocol-details-sheet.tsx
@@ -39,7 +39,7 @@ export const ProtocolDetailsSheet: React.FC = () => {
             <Heading size="lg" className="text-gray-800 dark:text-gray-100">
               {selectedProtocol.Name}
             </Heading>
-            <Button variant="link" onPress={closeDetails} className="p-1">
+            <Button variant="link" onPress={closeDetails} className="p-1" testID="close-button">
               <X size={24} className="text-gray-600 dark:text-gray-400" />
             </Button>
           </HStack>
diff --git a/src/components/roles/__tests__/roles-bottom-sheet.test.tsx b/src/components/roles/__tests__/roles-bottom-sheet.test.tsx
new file mode 100644
index 0000000..849d2a0
--- /dev/null
+++ b/src/components/roles/__tests__/roles-bottom-sheet.test.tsx
@@ -0,0 +1,260 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { useCoreStore } from '@/stores/app/core-store';
+import { useRolesStore } from '@/stores/roles/store';
+import { useToastStore } from '@/stores/toast/store';
+import { type PersonnelInfoResultData } from '@/models/v4/personnel/personnelInfoResultData';
+import { type UnitResultData } from '@/models/v4/units/unitResultData';
+import { type UnitRoleResultData } from '@/models/v4/unitRoles/unitRoleResultData';
+import { type ActiveUnitRoleResultData } from '@/models/v4/unitRoles/activeUnitRoleResultData';
+
+import { RolesBottomSheet } from '../roles-bottom-sheet';
+
+// Mock the stores
+jest.mock('@/stores/app/core-store');
+jest.mock('@/stores/roles/store');
+jest.mock('@/stores/toast/store');
+
+// Mock the CustomBottomSheet component
+jest.mock('@/components/ui/bottom-sheet', () => ({
+  CustomBottomSheet: ({ children, isOpen }: any) => {
+    if (!isOpen) return null;
+    return <div>{children}</div>;
+  },
+}));
+
+// Mock the RoleAssignmentItem component
+jest.mock('../role-assignment-item', () => ({
+  RoleAssignmentItem: ({ role }: any) => {
+    const { Text } = require('react-native');
+    return (
+      <Text testID={`role-item-${role.Name}`}>Role: {role.Name}</Text>
+    );
+  },
+}));
+
+// Mock react-i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue?: string) => defaultValue || key,
+  }),
+}));
+
+// Mock nativewind
+jest.mock('nativewind', () => ({
+  useColorScheme: () => ({ colorScheme: 'light' }),
+  cssInterop: jest.fn(),
+}));
+
+// Mock logger
+jest.mock('@/lib/logging', () => ({
+  logger: {
+    error: jest.fn(),
+  },
+}));
+
+const mockUseCoreStore = useCoreStore as jest.MockedFunction<typeof useCoreStore>;
+const mockUseRolesStore = useRolesStore as jest.MockedFunction<typeof useRolesStore>;
+const mockUseToastStore = useToastStore as jest.MockedFunction<typeof useToastStore>;
+
+describe('RolesBottomSheet', () => {
+  const mockOnClose = jest.fn();
+  const mockFetchRolesForUnit = jest.fn();
+  const mockFetchUsers = jest.fn();
+  const mockAssignRoles = jest.fn();
+  const mockShowToast = jest.fn();
+
+  const mockActiveUnit: UnitResultData = {
+    UnitId: 'unit1',
+    Name: 'Unit 1',
+    Type: 'Engine',
+    DepartmentId: 'dept1',
+    TypeId: 1,
+    CustomStatusSetId: '',
+    GroupId: '',
+    GroupName: '',
+    Vin: '',
+    PlateNumber: '',
+    FourWheelDrive: false,
+    SpecialPermit: false,
+    CurrentDestinationId: '',
+    CurrentStatusId: '',
+    CurrentStatusTimestamp: '',
+    Latitude: '',
+    Longitude: '',
+    Note: '',
+  };
+
+  const mockRoles: UnitRoleResultData[] = [
+    {
+      UnitRoleId: 'role1',
+      Name: 'Captain',
+      UnitId: 'unit1',
+    },
+    {
+      UnitRoleId: 'role2',
+      Name: 'Engineer',
+      UnitId: 'unit1',
+    },
+  ];
+
+  const mockUsers: PersonnelInfoResultData[] = [
+    {
+      UserId: 'user1',
+      FirstName: 'John',
+      LastName: 'Doe',
+      EmailAddress: 'john.doe@example.com',
+      DepartmentId: 'dept1',
+      IdentificationNumber: '',
+      MobilePhone: '',
+      GroupId: '',
+      GroupName: '',
+      StatusId: '',
+      Status: '',
+      StatusColor: '',
+      StatusTimestamp: '',
+      StatusDestinationId: '',
+      StatusDestinationName: '',
+      StaffingId: '',
+      Staffing: '',
+      StaffingColor: '',
+      StaffingTimestamp: '',
+      Roles: [],
+    },
+  ];
+
+  const mockUnitRoleAssignments: ActiveUnitRoleResultData[] = [
+    {
+      UnitRoleId: 'role1',
+      UnitId: 'unit1',
+      Name: 'Captain',
+      UserId: 'user1',
+      FullName: 'John Doe',
+      UpdatedOn: new Date().toISOString(),
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseCoreStore.mockReturnValue(mockActiveUnit);
+    mockUseRolesStore.mockReturnValue({
+      roles: mockRoles,
+      unitRoleAssignments: mockUnitRoleAssignments,
+      users: mockUsers,
+      isLoading: false,
+      error: null,
+      fetchRolesForUnit: mockFetchRolesForUnit,
+      fetchUsers: mockFetchUsers,
+      assignRoles: mockAssignRoles,
+    } as any);
+
+    mockUseToastStore.mockReturnValue({
+      showToast: mockShowToast,
+    } as any);
+
+    // Mock the getState functions
+    useRolesStore.getState = jest.fn().mockReturnValue({
+      fetchRolesForUnit: mockFetchRolesForUnit,
+      fetchUsers: mockFetchUsers,
+      assignRoles: mockAssignRoles,
+    });
+
+    useToastStore.getState = jest.fn().mockReturnValue({
+      showToast: mockShowToast,
+    });
+  });
+
+  it('renders correctly when opened', () => {
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(screen.getByText('Unit Role Assignments')).toBeTruthy();
+    expect(screen.getByText('Unit 1')).toBeTruthy();
+    expect(screen.getByText('Cancel')).toBeTruthy();
+    expect(screen.getByText('Save')).toBeTruthy();
+  });
+
+  it('does not render when not opened', () => {
+    render(<RolesBottomSheet isOpen={false} onClose={mockOnClose} />);
+
+    expect(screen.queryByText('Unit Role Assignments')).toBeNull();
+  });
+
+  it('fetches roles and users when opened', () => {
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(mockFetchRolesForUnit).toHaveBeenCalledWith('unit1');
+    expect(mockFetchUsers).toHaveBeenCalled();
+  });
+
+  it('renders role assignment items', () => {
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(screen.getByTestId('role-item-Captain')).toBeTruthy();
+    expect(screen.getByTestId('role-item-Engineer')).toBeTruthy();
+  });
+
+  it('displays error state correctly', () => {
+    const errorMessage = 'Failed to load roles';
+    mockUseRolesStore.mockReturnValue({
+      roles: [],
+      unitRoleAssignments: [],
+      users: [],
+      isLoading: false,
+      error: errorMessage,
+      fetchRolesForUnit: mockFetchRolesForUnit,
+      fetchUsers: mockFetchUsers,
+      assignRoles: mockAssignRoles,
+    } as any);
+
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(screen.getByText(errorMessage)).toBeTruthy();
+  });
+
+  it('handles missing active unit gracefully', () => {
+    mockUseCoreStore.mockReturnValue(null);
+
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(screen.getByText('Unit Role Assignments')).toBeTruthy();
+    expect(screen.queryByText('Unit 1')).toBeNull();
+  });
+
+  it('filters roles by active unit', () => {
+    const rolesWithDifferentUnits = [
+      ...mockRoles,
+      {
+        UnitRoleId: 'role3',
+        Name: 'Chief',
+        UnitId: 'unit2', // Different unit
+      },
+    ];
+
+    mockUseRolesStore.mockReturnValue({
+      roles: rolesWithDifferentUnits,
+      unitRoleAssignments: mockUnitRoleAssignments,
+      users: mockUsers,
+      isLoading: false,
+      error: null,
+      fetchRolesForUnit: mockFetchRolesForUnit,
+      fetchUsers: mockFetchUsers,
+      assignRoles: mockAssignRoles,
+    } as any);
+
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    // Should only show roles for the active unit
+    expect(screen.getByTestId('role-item-Captain')).toBeTruthy();
+    expect(screen.getByTestId('role-item-Engineer')).toBeTruthy();
+    expect(screen.queryByTestId('role-item-Chief')).toBeNull();
+  });
+
+  it('has functional buttons', () => {
+    render(<RolesBottomSheet isOpen={true} onClose={mockOnClose} />);
+
+    expect(screen.getByText('Cancel')).toBeTruthy();
+    expect(screen.getByText('Save')).toBeTruthy();
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/roles/role-assignment-item.tsx b/src/components/roles/role-assignment-item.tsx
index 009041e..36d8e75 100644
--- a/src/components/roles/role-assignment-item.tsx
+++ b/src/components/roles/role-assignment-item.tsx
@@ -26,7 +26,7 @@ export const RoleAssignmentItem: React.FC<RoleAssignmentItemProps> = ({ role, as
   });
 
   return (
-    <VStack className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800" space="xs">
+    <VStack className="rounded-lg p-4" space="xs">
       <Text className="text-base font-medium">{role.Name}</Text>
       <Select selectedValue={assignedUser?.UserId || ''} onValueChange={(value) => onAssignUser(value || undefined)}>
         <SelectTrigger>
diff --git a/src/components/roles/roles-bottom-sheet.tsx b/src/components/roles/roles-bottom-sheet.tsx
new file mode 100644
index 0000000..eb409db
--- /dev/null
+++ b/src/components/roles/roles-bottom-sheet.tsx
@@ -0,0 +1,150 @@
+import { useColorScheme } from 'nativewind';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CustomBottomSheet } from '@/components/ui/bottom-sheet';
+import { Spinner } from '@/components/ui/spinner';
+import { Text } from '@/components/ui/text';
+import { logger } from '@/lib/logging';
+import { useCoreStore } from '@/stores/app/core-store';
+import { useRolesStore } from '@/stores/roles/store';
+import { useToastStore } from '@/stores/toast/store';
+
+import { Button, ButtonText } from '../ui/button';
+import { HStack } from '../ui/hstack';
+import { ScrollView } from '../ui/scroll-view';
+import { VStack } from '../ui/vstack';
+import { RoleAssignmentItem } from './role-assignment-item';
+
+type RolesBottomSheetProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const RolesBottomSheet: React.FC<RolesBottomSheetProps> = ({ isOpen, onClose }) => {
+  const { t } = useTranslation();
+  const { colorScheme } = useColorScheme();
+  const activeUnit = useCoreStore((state) => state.activeUnit);
+  const { roles, unitRoleAssignments, users, isLoading, error } = useRolesStore();
+
+  // Add state to track pending changes
+  const [pendingAssignments, setPendingAssignments] = React.useState<{ roleId: string; userId?: string }[]>([]);
+  const [isSaving, setIsSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isOpen && activeUnit) {
+      useRolesStore.getState().fetchRolesForUnit(activeUnit.UnitId);
+      useRolesStore.getState().fetchUsers();
+      // Reset pending assignments when bottom sheet opens
+      setPendingAssignments([]);
+    }
+  }, [isOpen, activeUnit]);
+
+  // Handle user assignment changes
+  const handleAssignUser = React.useCallback((roleId: string, userId?: string) => {
+    setPendingAssignments((current) => {
+      const filtered = current.filter((a) => a.roleId !== roleId);
+      return [...filtered, { roleId, userId }];
+    });
+  }, []);
+
+  // Handle save button
+  const handleSave = React.useCallback(async () => {
+    if (!activeUnit) return;
+
+    setIsSaving(true);
+    try {
+      // Save all pending assignments
+      await useRolesStore.getState().assignRoles({
+        UnitId: activeUnit.UnitId,
+        Roles: pendingAssignments.map((a) => ({
+          RoleId: a.roleId,
+          UserId: a.userId ? a.userId : '',
+          Name: '',
+        })),
+      });
+
+      // Refresh role assignments after all updates
+      await useRolesStore.getState().fetchRolesForUnit(activeUnit.UnitId);
+      useToastStore.getState().showToast('success', t('roles.saved_successfully', 'Role assignments saved successfully'));
+      onClose();
+    } catch (err) {
+      logger.error({
+        message: 'Error saving role assignments',
+        context: {
+          error: err,
+        },
+      });
+      useToastStore.getState().showToast('error', t('roles.save_error', 'Error saving role assignments'));
+    } finally {
+      setIsSaving(false);
+    }
+  }, [activeUnit, pendingAssignments, onClose, t]);
+
+  const handleClose = React.useCallback(() => {
+    setPendingAssignments([]);
+    onClose();
+  }, [onClose]);
+
+  const filteredRoles = React.useMemo(() => {
+    return roles.filter((role) => role.UnitId === activeUnit?.UnitId);
+  }, [roles, activeUnit]);
+
+  const hasChanges = pendingAssignments.length > 0;
+
+  return (
+    <CustomBottomSheet isOpen={isOpen} onClose={handleClose} isLoading={isLoading} loadingText={t('common.loading')} snapPoints={[80]} minHeight="min-h-[600px]" testID="roles-bottom-sheet">
+      <VStack space="md" className="w-full flex-1">
+        <HStack className="items-center justify-between">
+          <Text className="text-xl font-bold">{t('roles.title', 'Unit Role Assignments')}</Text>
+          {activeUnit && <Text className="text-sm text-gray-500">{activeUnit.Name}</Text>}
+        </HStack>
+
+        {error ? (
+          <Text className="py-4 text-center text-red-500" testID="error-message">
+            {error}
+          </Text>
+        ) : (
+          <ScrollView className="flex-1" showsVerticalScrollIndicator={false} testID="roles-scroll-view">
+            <VStack space="sm" className="pb-4">
+              {filteredRoles.map((role) => {
+                const pendingAssignment = pendingAssignments.find((a) => a.roleId === role.UnitRoleId);
+                const assignment = unitRoleAssignments.find((a) => a.UnitRoleId === role.UnitRoleId && a.UnitId === activeUnit?.UnitId);
+                const assignedUser = users.find((u) => u.UserId === (pendingAssignment?.userId ?? assignment?.UserId));
+
+                return (
+                  <RoleAssignmentItem
+                    key={role.UnitRoleId}
+                    role={role}
+                    assignedUser={assignedUser}
+                    availableUsers={users}
+                    onAssignUser={(userId) => handleAssignUser(role.UnitRoleId, userId)}
+                    currentAssignments={[
+                      ...unitRoleAssignments.map((a) => ({
+                        roleId: a.UnitRoleId,
+                        userId: a.UserId,
+                      })),
+                      ...pendingAssignments.map((a) => ({
+                        roleId: a.roleId,
+                        userId: a.userId ?? '',
+                      })),
+                    ]}
+                  />
+                );
+              })}
+            </VStack>
+          </ScrollView>
+        )}
+
+        <HStack space="md" className="pt-4">
+          <Button variant="outline" action="secondary" className="flex-1" onPress={handleClose} isDisabled={isSaving} testID="cancel-button">
+            <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>}
+          </Button>
+        </HStack>
+      </VStack>
+    </CustomBottomSheet>
+  );
+};
diff --git a/src/components/sidebar/__tests__/call-sidebar.test.tsx b/src/components/sidebar/__tests__/call-sidebar.test.tsx
new file mode 100644
index 0000000..b5fd4a3
--- /dev/null
+++ b/src/components/sidebar/__tests__/call-sidebar.test.tsx
@@ -0,0 +1,368 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { useColorScheme } from 'nativewind';
+import { router } from 'expo-router';
+import { Alert } from 'react-native';
+
+import { SidebarCallCard } from '../call-sidebar';
+import { useCoreStore } from '@/stores/app/core-store';
+import { useCallsStore } from '@/stores/calls/store';
+import { type CallResultData } from '@/models/v4/calls/callResultData';
+import { type CallPriorityResultData } from '@/models/v4/callPriorities/callPriorityResultData';
+
+// Mock dependencies
+jest.mock('react-i18next');
+jest.mock('@tanstack/react-query');
+jest.mock('nativewind');
+jest.mock('expo-router');
+jest.mock('react-native/Libraries/Alert/Alert');
+jest.mock('@/stores/app/core-store');
+jest.mock('@/stores/calls/store');
+
+// Mock UI components
+jest.mock('@/components/ui/bottom-sheet', () => ({
+  CustomBottomSheet: ({ children, isOpen, onClose, isLoading, testID }: any) => {
+    const { View, Text } = require('react-native');
+    return isOpen ? (
+      <View testID={testID}>
+        {isLoading ? <Text testID="loading-spinner">Loading...</Text> : children}
+      </View>
+    ) : null;
+  },
+}));
+
+jest.mock('@/components/calls/call-card', () => ({
+  CallCard: ({ call }: any) => {
+    const { View, Text } = require('react-native');
+    return (
+      <View testID="call-card">
+        <Text testID="call-name">{call.Name}</Text>
+      </View>
+    );
+  },
+}));
+
+jest.mock('@/components/ui/card', () => ({
+  Card: ({ children }: any) => {
+    const { View } = require('react-native');
+    return <View testID="card">{children}</View>;
+  },
+}));
+
+jest.mock('@/components/ui/text', () => ({
+  Text: ({ children, testID }: any) => {
+    const { Text } = require('react-native');
+    return <Text testID={testID}>{children}</Text>;
+  },
+}));
+
+jest.mock('@/components/ui/vstack', () => ({
+  VStack: ({ children }: any) => {
+    const { View } = require('react-native');
+    return <View>{children}</View>;
+  },
+}));
+
+jest.mock('@/components/ui/hstack', () => ({
+  HStack: ({ children }: any) => {
+    const { View } = require('react-native');
+    return <View>{children}</View>;
+  },
+}));
+
+jest.mock('@/components/ui/button', () => ({
+  Button: ({ children, onPress, testID }: any) => {
+    const { TouchableOpacity } = require('react-native');
+    return (
+      <TouchableOpacity onPress={onPress} testID={testID}>
+        {children}
+      </TouchableOpacity>
+    );
+  },
+  ButtonIcon: ({ as: Icon, testID }: any) => {
+    const { View, Text } = require('react-native');
+    // Create a testID based on the icon type
+    let iconTestId = testID;
+    if (Icon) {
+      if (Icon === require('lucide-react-native').Eye) {
+        iconTestId = 'eye-icon';
+      } else if (Icon === require('lucide-react-native').MapPin) {
+        iconTestId = 'map-pin-icon';
+      } else if (Icon === require('lucide-react-native').CircleX) {
+        iconTestId = 'circle-x-icon';
+      } else if (Icon === require('lucide-react-native').Check) {
+        iconTestId = 'check-icon';
+      }
+    }
+    return (
+      <View testID={iconTestId}>
+        <Text>Icon</Text>
+      </View>
+    );
+  },
+}));
+
+jest.mock('lucide-react-native', () => ({
+  Check: (props: any) => {
+    const { View, Text } = require('react-native');
+    return <View testID="check-icon"><Text>Check</Text></View>;
+  },
+  CircleX: (props: any) => {
+    const { View, Text } = require('react-native');
+    return <View testID="circle-x-icon"><Text>CircleX</Text></View>;
+  },
+  Eye: (props: any) => {
+    const { View, Text } = require('react-native');
+    return <View testID="eye-icon"><Text>Eye</Text></View>;
+  },
+  MapPin: (props: any) => {
+    const { View, Text } = require('react-native');
+    return <View testID="map-pin-icon"><Text>MapPin</Text></View>;
+  },
+}));
+
+const mockCall: CallResultData = {
+  CallId: '123',
+  Priority: 1,
+  Name: 'Test Emergency Call',
+  Nature: 'Emergency',
+  Note: 'Test note',
+  Address: '123 Test Street',
+  Geolocation: '40.7128,-74.0060',
+  LoggedOn: '2023-01-01T10:00:00Z',
+  State: '1',
+  Number: 'C001',
+  NotesCount: 0,
+  AudioCount: 0,
+  ImgagesCount: 0,
+  FileCount: 0,
+  What3Words: '',
+  ContactName: '',
+  ContactInfo: '',
+  ReferenceId: '',
+  ExternalId: '',
+  IncidentId: '',
+  AudioFileId: '',
+  Type: 'Emergency',
+  LoggedOnUtc: '2023-01-01T10:00:00Z',
+  DispatchedOn: '2023-01-01T10:05:00Z',
+  DispatchedOnUtc: '2023-01-01T10:05:00Z',
+  Latitude: '40.7128',
+  Longitude: '-74.0060',
+};
+
+const mockPriority: CallPriorityResultData = {
+  Id: 1,
+  DepartmentId: 1,
+  Name: 'High Priority',
+  Color: '#FF0000',
+  Sort: 1,
+  IsDeleted: false,
+  IsDefault: false,
+  Tone: 0,
+};
+
+const mockCalls: CallResultData[] = [
+  mockCall,
+  {
+    ...mockCall,
+    CallId: '456',
+    Number: 'C002',
+    Name: 'Test Fire Call',
+    Type: 'Fire',
+    Address: '456 Fire Lane',
+  },
+];
+
+// Mock function implementations
+const mockUseTranslation = useTranslation as jest.MockedFunction<typeof useTranslation>;
+const mockUseQuery = useQuery as jest.MockedFunction<typeof useQuery>;
+const mockUseColorScheme = useColorScheme as jest.MockedFunction<typeof useColorScheme>;
+const mockRouter = router as jest.Mocked<typeof router>;
+const mockAlert = Alert as jest.Mocked<typeof Alert>;
+const mockUseCoreStore = useCoreStore as jest.MockedFunction<typeof useCoreStore>;
+const mockUseCallsStore = useCallsStore as jest.MockedFunction<typeof useCallsStore>;
+
+describe('SidebarCallCard', () => {
+  const mockSetActiveCall = jest.fn();
+  const mockFetchCalls = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseTranslation.mockReturnValue({
+      t: (key: string) => key,
+      i18n: {} as any,
+      ready: true,
+    } as any);
+
+    mockUseColorScheme.mockReturnValue({
+      colorScheme: 'light',
+      setColorScheme: jest.fn(),
+      toggleColorScheme: jest.fn(),
+    });
+
+    mockUseCoreStore.mockReturnValue({
+      activeCall: null,
+      activePriority: null,
+      setActiveCall: mockSetActiveCall,
+    });
+
+    mockUseCallsStore.mockReturnValue({
+      calls: [],
+      fetchCalls: mockFetchCalls,
+    });
+
+    mockUseQuery.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    } as any);
+
+    mockAlert.alert = jest.fn();
+    mockRouter.push = jest.fn();
+  });
+
+  describe('Basic Rendering', () => {
+    it('should render with no active call', () => {
+      render(<SidebarCallCard />);
+
+      expect(screen.getByTestId('call-selection-trigger')).toBeTruthy();
+      expect(screen.getByTestId('card')).toBeTruthy();
+      expect(screen.getByText('calls.no_call_selected')).toBeTruthy();
+      expect(screen.getByText('calls.no_call_selected_info')).toBeTruthy();
+    });
+
+    it('should render with active call', () => {
+      mockUseCoreStore.mockReturnValue({
+        activeCall: mockCall,
+        activePriority: mockPriority,
+        setActiveCall: mockSetActiveCall,
+      });
+
+      render(<SidebarCallCard />);
+
+      expect(screen.getByTestId('call-selection-trigger')).toBeTruthy();
+      expect(screen.getByTestId('call-card')).toBeTruthy();
+      expect(screen.getByTestId('call-name')).toBeTruthy();
+      expect(screen.getByText('Test Emergency Call')).toBeTruthy();
+    });
+
+    it('should show action buttons when active call exists', () => {
+      mockUseCoreStore.mockReturnValue({
+        activeCall: mockCall,
+        activePriority: mockPriority,
+        setActiveCall: mockSetActiveCall,
+      });
+
+      render(<SidebarCallCard />);
+
+      expect(screen.getByTestId('eye-icon')).toBeTruthy();
+      expect(screen.getByTestId('map-pin-icon')).toBeTruthy();
+      expect(screen.getByTestId('circle-x-icon')).toBeTruthy();
+    });
+  });
+
+  describe('Bottom Sheet Behavior', () => {
+    it('should open bottom sheet when trigger is pressed', () => {
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('call-selection-trigger'));
+
+      expect(screen.getByTestId('call-selection-bottom-sheet')).toBeTruthy();
+    });
+
+    it('should show loading state in bottom sheet', () => {
+      mockUseQuery.mockReturnValue({
+        data: [],
+        isLoading: true,
+        error: null,
+        refetch: jest.fn(),
+      } as any);
+
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('call-selection-trigger'));
+
+      expect(screen.getByTestId('loading-spinner')).toBeTruthy();
+    });
+
+    it('should display calls list in bottom sheet', () => {
+      mockUseQuery.mockReturnValue({
+        data: mockCalls,
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      } as any);
+
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('call-selection-trigger'));
+
+      expect(screen.getByText('calls.select_active_call')).toBeTruthy();
+      expect(screen.getByTestId('call-item-123')).toBeTruthy();
+      expect(screen.getByTestId('call-item-456')).toBeTruthy();
+    });
+
+    it('should show no calls message when list is empty', () => {
+      mockUseQuery.mockReturnValue({
+        data: [],
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      } as any);
+
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('call-selection-trigger'));
+
+      expect(screen.getByTestId('no-calls-message')).toBeTruthy();
+      expect(screen.getByText('calls.no_open_calls')).toBeTruthy();
+    });
+  });
+
+  describe('Action Buttons', () => {
+    beforeEach(() => {
+      mockUseCoreStore.mockReturnValue({
+        activeCall: mockCall,
+        activePriority: mockPriority,
+        setActiveCall: mockSetActiveCall,
+      });
+    });
+
+    it('should navigate to call detail when eye button is pressed', () => {
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('eye-icon'));
+
+      expect(mockRouter.push).toHaveBeenCalledWith('/call/123');
+    });
+
+    it('should show deselect confirmation when deselect button is pressed', () => {
+      render(<SidebarCallCard />);
+
+      fireEvent.press(screen.getByTestId('circle-x-icon'));
+
+      expect(mockAlert.alert).toHaveBeenCalledWith(
+        'calls.confirm_deselect_title',
+        'calls.confirm_deselect_message',
+        expect.arrayContaining([
+          expect.objectContaining({ text: 'common.cancel' }),
+          expect.objectContaining({ text: 'common.confirm' }),
+        ]),
+        { cancelable: true }
+      );
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper testIDs for automation', () => {
+      render(<SidebarCallCard />);
+
+      expect(screen.getByTestId('call-selection-trigger')).toBeTruthy();
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/sidebar/__tests__/roles-sidebar.test.tsx b/src/components/sidebar/__tests__/roles-sidebar.test.tsx
new file mode 100644
index 0000000..b8cdb7f
--- /dev/null
+++ b/src/components/sidebar/__tests__/roles-sidebar.test.tsx
@@ -0,0 +1,257 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { useCoreStore } from '@/stores/app/core-store';
+import { useRolesStore } from '@/stores/roles/store';
+import { type UnitResultData } from '@/models/v4/units/unitResultData';
+import { type ActiveUnitRoleResultData } from '@/models/v4/unitRoles/activeUnitRoleResultData';
+
+import { SidebarRolesCard } from '../roles-sidebar';
+
+// Mock the stores
+jest.mock('@/stores/app/core-store');
+jest.mock('@/stores/roles/store');
+
+// Mock the RolesBottomSheet component
+jest.mock('../../roles/roles-bottom-sheet', () => ({
+  RolesBottomSheet: ({ isOpen }: any) => {
+    if (!isOpen) return null;
+    return <div>Roles Bottom Sheet</div>;
+  },
+}));
+
+// Mock react-i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: any) => {
+      if (key === 'roles.status') {
+        return `${options.active}/${options.total} Active`;
+      }
+      return key;
+    },
+  }),
+}));
+
+const mockUseCoreStore = useCoreStore as jest.MockedFunction<typeof useCoreStore>;
+const mockUseRolesStore = useRolesStore as jest.MockedFunction<typeof useRolesStore>;
+
+describe('SidebarRolesCard', () => {
+  const mockActiveUnit: UnitResultData = {
+    UnitId: 'unit1',
+    Name: 'Unit 1',
+    Type: 'Engine',
+    DepartmentId: 'dept1',
+    TypeId: 1,
+    CustomStatusSetId: '',
+    GroupId: '',
+    GroupName: '',
+    Vin: '',
+    PlateNumber: '',
+    FourWheelDrive: false,
+    SpecialPermit: false,
+    CurrentDestinationId: '',
+    CurrentStatusId: '',
+    CurrentStatusTimestamp: '',
+    Latitude: '',
+    Longitude: '',
+    Note: '',
+  };
+
+  const mockUnitRoleAssignments: ActiveUnitRoleResultData[] = [
+    {
+      UnitRoleId: 'role1',
+      UnitId: 'unit1',
+      Name: 'Captain',
+      UserId: 'user1',
+      FullName: 'John Doe',
+      UpdatedOn: new Date().toISOString(),
+    },
+    {
+      UnitRoleId: 'role2',
+      UnitId: 'unit1',
+      Name: 'Engineer',
+      UserId: 'user2',
+      FullName: 'Jane Smith',
+      UpdatedOn: new Date().toISOString(),
+    },
+    {
+      UnitRoleId: 'role3',
+      UnitId: 'unit1',
+      Name: 'Firefighter',
+      UserId: '',
+      FullName: '', // Unassigned role
+      UpdatedOn: new Date().toISOString(),
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseCoreStore.mockReturnValue(mockActiveUnit);
+    mockUseRolesStore.mockReturnValue(mockUnitRoleAssignments);
+  });
+
+  it('renders correctly with active unit and role assignments', () => {
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByText('2/3 Active')).toBeTruthy();
+  });
+
+  it('displays zero counts when no active unit', () => {
+    mockUseCoreStore.mockReturnValue(null);
+
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByText('0/0 Active')).toBeTruthy();
+  });
+
+  it('displays zero counts when no role assignments', () => {
+    mockUseRolesStore.mockReturnValue([]);
+
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByText('0/0 Active')).toBeTruthy();
+  });
+
+  it('filters role assignments by active unit', () => {
+    const roleAssignmentsWithDifferentUnits = [
+      ...mockUnitRoleAssignments,
+      {
+        UnitRoleId: 'role4',
+        UnitId: 'unit2', // Different unit
+        Name: 'Chief',
+        UserId: 'user3',
+        FullName: 'Bob Johnson',
+        UpdatedOn: new Date().toISOString(),
+      },
+    ];
+
+    mockUseRolesStore.mockReturnValue(roleAssignmentsWithDifferentUnits);
+
+    render(<SidebarRolesCard />);
+
+    // Should only count assignments for unit1
+    expect(screen.getByText('2/3 Active')).toBeTruthy();
+  });
+
+  it('counts active assignments correctly', () => {
+    const testAssignments = [
+      {
+        UnitRoleId: 'role1',
+        UnitId: 'unit1',
+        Name: 'Captain',
+        UserId: 'user1',
+        FullName: 'John Doe',
+        UpdatedOn: new Date().toISOString(),
+      },
+      {
+        UnitRoleId: 'role2',
+        UnitId: 'unit1',
+        Name: 'Engineer',
+        UserId: 'user2',
+        FullName: '', // Empty name should not count as active
+        UpdatedOn: new Date().toISOString(),
+      },
+      {
+        UnitRoleId: 'role3',
+        UnitId: 'unit1',
+        Name: 'Firefighter',
+        UserId: '',
+        FullName: null as any, // Null name should not count as active
+        UpdatedOn: new Date().toISOString(),
+      },
+    ];
+
+    mockUseRolesStore.mockReturnValue(testAssignments);
+
+    render(<SidebarRolesCard />);
+
+    // Should count only the one with a non-empty FullName
+    expect(screen.getByText('1/3 Active')).toBeTruthy();
+  });
+
+  it('handles empty unit role assignments gracefully', () => {
+    mockUseRolesStore.mockReturnValue([]);
+
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByText('0/0 Active')).toBeTruthy();
+  });
+
+  it('handles assignments with undefined FullName', () => {
+    const assignmentsWithUndefinedFullName = [
+      {
+        UnitRoleId: 'role1',
+        UnitId: 'unit1',
+        Name: 'Captain',
+        UserId: 'user1',
+        FullName: undefined as any,
+        UpdatedOn: new Date().toISOString(),
+      },
+      {
+        UnitRoleId: 'role2',
+        UnitId: 'unit1',
+        Name: 'Engineer',
+        UserId: 'user2',
+        FullName: 'Jane Smith',
+        UpdatedOn: new Date().toISOString(),
+      },
+    ];
+
+    mockUseRolesStore.mockReturnValue(assignmentsWithUndefinedFullName);
+
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByText('1/2 Active')).toBeTruthy();
+  });
+
+  it('memoizes counts correctly when props change', () => {
+    const { rerender } = render(<SidebarRolesCard />);
+
+    expect(screen.getByText('2/3 Active')).toBeTruthy();
+
+    // Change the role assignments
+    const newAssignments = [
+      {
+        UnitRoleId: 'role1',
+        UnitId: 'unit1',
+        Name: 'Captain',
+        UserId: 'user1',
+        FullName: 'John Doe',
+        UpdatedOn: new Date().toISOString(),
+      },
+    ];
+
+    mockUseRolesStore.mockReturnValue(newAssignments);
+
+    rerender(<SidebarRolesCard />);
+
+    expect(screen.getByText('1/1 Active')).toBeTruthy();
+  });
+
+  it('handles unit change correctly', () => {
+    const { rerender } = render(<SidebarRolesCard />);
+
+    expect(screen.getByText('2/3 Active')).toBeTruthy();
+
+    // Change the active unit
+    const newUnit = {
+      ...mockActiveUnit,
+      UnitId: 'unit2',
+      Name: 'Unit 2',
+    };
+
+    mockUseCoreStore.mockReturnValue(newUnit);
+
+    rerender(<SidebarRolesCard />);
+
+    // Should show 0/0 since no assignments for unit2
+    expect(screen.getByText('0/0 Active')).toBeTruthy();
+  });
+
+  it('renders the card component', () => {
+    render(<SidebarRolesCard />);
+
+    expect(screen.getByTestId('roles-sidebar-card')).toBeTruthy();
+    expect(screen.getByTestId('roles-status-text')).toBeTruthy();
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/sidebar/__tests__/status-sidebar.test.tsx b/src/components/sidebar/__tests__/status-sidebar.test.tsx
new file mode 100644
index 0000000..30b6eb3
--- /dev/null
+++ b/src/components/sidebar/__tests__/status-sidebar.test.tsx
@@ -0,0 +1,257 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+
+import { useCoreStore } from '@/stores/app/core-store';
+import { type UnitStatusResultData } from '@/models/v4/unitStatus/unitStatusResultData';
+
+import { SidebarStatusCard } from '../status-sidebar';
+
+// Mock the store
+jest.mock('@/stores/app/core-store');
+
+const mockUseCoreStore = useCoreStore as jest.MockedFunction<typeof useCoreStore>;
+
+// Helper function to create mock status objects
+const createMockStatus = (overrides: Partial<UnitStatusResultData> = {}): UnitStatusResultData => ({
+  UnitId: '123',
+  State: 'Available',
+  StateStyle: 'label-success',
+  Timestamp: '2023-01-01T12:00:00Z',
+  Note: 'Test note',
+  Name: 'Unit 1',
+  Type: 'Engine',
+  StateCss: '',
+  DestinationId: '',
+  Latitude: '',
+  Longitude: '',
+  GroupName: '',
+  GroupId: '',
+  Eta: '',
+  ...overrides,
+});
+
+describe('SidebarStatusCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render with unknown status when activeUnitStatus is null', () => {
+    mockUseCoreStore.mockReturnValue(null);
+
+    render(<SidebarStatusCard />);
+
+    expect(screen.getByText('Unknown')).toBeTruthy();
+  });
+
+  it('should render with unknown status when activeUnitStatus is undefined', () => {
+    mockUseCoreStore.mockReturnValue(undefined);
+
+    render(<SidebarStatusCard />);
+
+    expect(screen.getByText('Unknown')).toBeTruthy();
+  });
+
+  it('should render the correct status text', () => {
+    const mockStatus = createMockStatus();
+    mockUseCoreStore.mockReturnValue(mockStatus);
+
+    render(<SidebarStatusCard />);
+
+    expect(screen.getByText('Available')).toBeTruthy();
+  });
+
+  it('should render status with empty string when State is missing', () => {
+    const mockStatus = createMockStatus({ State: '' });
+    mockUseCoreStore.mockReturnValue(mockStatus);
+
+    render(<SidebarStatusCard />);
+
+    expect(screen.getByText('Unknown')).toBeTruthy();
+  });
+
+  describe('Color mapping', () => {
+    const colorTestCases = [
+      { styleClass: 'label-danger', expectedColor: '#ED5565', label: 'danger' },
+      { styleClass: 'label-info', expectedColor: '#23c6c8', label: 'info' },
+      { styleClass: 'label-warning', expectedColor: '#f8ac59', label: 'warning' },
+      { styleClass: 'label-success', expectedColor: '#449d44', label: 'success' },
+      { styleClass: 'label-onscene', expectedColor: '#449d44', label: 'onscene' },
+      { styleClass: 'label-primary', expectedColor: '#228BCB', label: 'primary' },
+      { styleClass: 'label-returning', expectedColor: '', label: 'returning' },
+      { styleClass: 'label-default', expectedColor: '#262626', label: 'default' },
+      { styleClass: 'label-enroute', expectedColor: '#449d44', label: 'enroute' },
+    ];
+
+    colorTestCases.forEach(({ styleClass, expectedColor, label }) => {
+      it(`should apply correct color for ${label} status`, () => {
+        const mockStatus = createMockStatus({
+          State: 'Test Status',
+          StateStyle: styleClass,
+        });
+
+        mockUseCoreStore.mockReturnValue(mockStatus);
+
+        const { getByTestId } = render(<SidebarStatusCard />);
+
+        // We need to find the Card component by its style
+        const cardElement = getByTestId('status-card');
+        expect(cardElement.props.style).toEqual(
+          expect.objectContaining({
+            backgroundColor: expectedColor,
+          })
+        );
+      });
+    });
+
+    it('should handle unknown status styles by keeping original value', () => {
+      const mockStatus = createMockStatus({
+        State: 'Test Status',
+        StateStyle: 'unknown-style',
+      });
+
+      mockUseCoreStore.mockReturnValue(mockStatus);
+
+      const { getByTestId } = render(<SidebarStatusCard />);
+
+      const cardElement = getByTestId('status-card');
+      expect(cardElement.props.style).toEqual(
+        expect.objectContaining({
+          backgroundColor: 'unknown-style',
+        })
+      );
+    });
+
+    it('should handle empty StateStyle by using empty string', () => {
+      const mockStatus = createMockStatus({
+        State: 'Test Status',
+        StateStyle: '',
+      });
+
+      mockUseCoreStore.mockReturnValue(mockStatus);
+
+      const { getByTestId } = render(<SidebarStatusCard />);
+
+      const cardElement = getByTestId('status-card');
+      expect(cardElement.props.style).toEqual(
+        expect.objectContaining({
+          backgroundColor: '',
+        })
+      );
+    });
+  });
+
+  describe('Status updates', () => {
+    it('should re-render when activeUnitStatus changes', () => {
+      const initialStatus = createMockStatus();
+      mockUseCoreStore.mockReturnValue(initialStatus);
+
+      const { rerender } = render(<SidebarStatusCard />);
+
+      expect(screen.getByText('Available')).toBeTruthy();
+
+      // Update the status
+      const updatedStatus = createMockStatus({
+        State: 'Busy',
+        StateStyle: 'label-danger',
+        Timestamp: '2023-01-01T12:30:00Z',
+        Note: 'Updated note',
+      });
+
+      mockUseCoreStore.mockReturnValue(updatedStatus);
+
+      rerender(<SidebarStatusCard />);
+
+      expect(screen.getByText('Busy')).toBeTruthy();
+      expect(screen.queryByText('Available')).toBeNull();
+    });
+
+    it('should handle transition from null to valid status', () => {
+      mockUseCoreStore.mockReturnValue(null);
+
+      const { rerender } = render(<SidebarStatusCard />);
+
+      expect(screen.getByText('Unknown')).toBeTruthy();
+
+      // Update to valid status
+      const status = createMockStatus({
+        State: 'En Route',
+        StateStyle: 'label-enroute',
+      });
+
+      mockUseCoreStore.mockReturnValue(status);
+
+      rerender(<SidebarStatusCard />);
+
+      expect(screen.getByText('En Route')).toBeTruthy();
+      expect(screen.queryByText('Unknown')).toBeNull();
+    });
+
+    it('should handle transition from valid status to null', () => {
+      const status = createMockStatus({
+        State: 'On Scene',
+        StateStyle: 'label-onscene',
+      });
+
+      mockUseCoreStore.mockReturnValue(status);
+
+      const { rerender } = render(<SidebarStatusCard />);
+
+      expect(screen.getByText('On Scene')).toBeTruthy();
+
+      // Update to null
+      mockUseCoreStore.mockReturnValue(null);
+
+      rerender(<SidebarStatusCard />);
+
+      expect(screen.getByText('Unknown')).toBeTruthy();
+      expect(screen.queryByText('On Scene')).toBeNull();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle status with special characters', () => {
+      const mockStatus = createMockStatus({
+        State: 'Status with "quotes" & symbols',
+        StateStyle: 'label-info',
+      });
+
+      mockUseCoreStore.mockReturnValue(mockStatus);
+
+      render(<SidebarStatusCard />);
+
+      expect(screen.getByText('Status with "quotes" & symbols')).toBeTruthy();
+    });
+
+    it('should handle very long status text', () => {
+      const longStatusText = 'This is a very long status text that might overflow the container and cause layout issues';
+      const mockStatus = createMockStatus({
+        State: longStatusText,
+        StateStyle: 'label-info',
+      });
+
+      mockUseCoreStore.mockReturnValue(mockStatus);
+
+      render(<SidebarStatusCard />);
+
+      expect(screen.getByText(longStatusText)).toBeTruthy();
+    });
+
+    it('should handle null StateStyle gracefully', () => {
+      const mockStatus = createMockStatus({
+        State: 'Test Status',
+        StateStyle: null as any,
+      });
+
+      mockUseCoreStore.mockReturnValue(mockStatus);
+
+      const { getByTestId } = render(<SidebarStatusCard />);
+
+      const cardElement = getByTestId('status-card');
+      expect(cardElement.props.style).toEqual(
+        expect.objectContaining({
+          backgroundColor: '',
+        })
+      );
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/sidebar/call-sidebar.tsx b/src/components/sidebar/call-sidebar.tsx
index b49573c..ca0dafc 100644
--- a/src/components/sidebar/call-sidebar.tsx
+++ b/src/components/sidebar/call-sidebar.tsx
@@ -61,7 +61,7 @@ export const SidebarCallCard = () => {
 
   return (
     <>
-      <Pressable onPress={() => setIsBottomSheetOpen(true)} className="w-full">
+      <Pressable onPress={() => setIsBottomSheetOpen(true)} className="w-full" testID="call-selection-trigger">
         {activeCall && activePriority ? (
           <CallCard call={activeCall} priority={activePriority} />
         ) : (
@@ -106,35 +106,41 @@ export const SidebarCallCard = () => {
         </HStack>
       )}
 
-      <CustomBottomSheet isOpen={isBottomSheetOpen} onClose={() => setIsBottomSheetOpen(false)} isLoading={isLoading} loadingText={t('common.loading')}>
-        <ScrollView className="max-h-96 w-full">
-          <VStack space="lg" className="mt-4 w-full">
-            <Text className="text-lg font-bold">{t('calls.select_active_call')}</Text>
-            {openCallsData?.map((call) => (
-              <Pressable
-                key={call.CallId}
-                onPress={async () => {
-                  await setActiveCall(call.CallId);
-                  setIsBottomSheetOpen(false);
-                }}
-                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') : ''
-                }`}
-              >
-                <HStack space="md" className="items-center justify-between">
-                  <VStack>
-                    <Text className={`font-medium ${colorScheme === 'dark' ? 'text-neutral-200' : 'text-neutral-700'}`}>{call.Name}</Text>
-                    <Text size="sm" className={colorScheme === 'dark' ? 'text-neutral-400' : 'text-neutral-500'}>
-                      {call.Type}
-                    </Text>
-                  </VStack>
-                  {activeCall?.CallId === call.CallId && <Check size={20} className={colorScheme === 'dark' ? 'text-primary-400' : 'text-primary-600'} />}
-                </HStack>
-              </Pressable>
-            ))}
-            {!isLoading && openCallsData?.length === 0 && <Text className="text-center text-gray-500">{t('calls.no_open_calls')}</Text>}
-          </VStack>
-        </ScrollView>
+      <CustomBottomSheet isOpen={isBottomSheetOpen} onClose={() => setIsBottomSheetOpen(false)} isLoading={isLoading} loadingText={t('common.loading')} snapPoints={[60]} testID="call-selection-bottom-sheet">
+        <VStack space="md" className="w-full flex-1">
+          <Text className="text-lg font-bold">{t('calls.select_active_call')}</Text>
+          <ScrollView className="w-full flex-1" showsVerticalScrollIndicator={false}>
+            <VStack space="md" className="w-full">
+              {openCallsData?.map((call) => (
+                <Pressable
+                  key={call.CallId}
+                  onPress={async () => {
+                    await setActiveCall(call.CallId);
+                    setIsBottomSheetOpen(false);
+                  }}
+                  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') : ''
+                    }`}
+                  testID={`call-item-${call.CallId}`}
+                >
+                  <HStack space="md" className="items-center justify-between">
+                    <VStack className="flex-1">
+                      <Text className={`font-medium ${colorScheme === 'dark' ? 'text-neutral-200' : 'text-neutral-700'}`}>{call.Name}</Text>
+                      <Text size="sm" className={colorScheme === 'dark' ? 'text-neutral-400' : 'text-neutral-500'}>
+                        {call.Type}
+                      </Text>
+                    </VStack>
+                    {activeCall?.CallId === call.CallId && <Check size={20} color={colorScheme === 'dark' ? '#60a5fa' : '#2563eb'} />}
+                  </HStack>
+                </Pressable>
+              ))}
+              {!isLoading && openCallsData?.length === 0 && (
+                <Text className="py-8 text-center text-gray-500" testID="no-calls-message">
+                  {t('calls.no_open_calls')}
+                </Text>
+              )}
+            </VStack>
+          </ScrollView>
+        </VStack>
       </CustomBottomSheet>
     </>
   );
diff --git a/src/components/sidebar/roles-sidebar.tsx b/src/components/sidebar/roles-sidebar.tsx
index b2d2db8..520a362 100644
--- a/src/components/sidebar/roles-sidebar.tsx
+++ b/src/components/sidebar/roles-sidebar.tsx
@@ -6,17 +6,21 @@ import { Text } from '@/components/ui/text';
 import { useCoreStore } from '@/stores/app/core-store';
 import { useRolesStore } from '@/stores/roles/store';
 
-import { RolesModal } from '../roles/roles-modal';
+import { RolesBottomSheet } from '../roles/roles-bottom-sheet';
 import { Card } from '../ui/card';
 
 export const SidebarRolesCard = () => {
   const { t } = useTranslation();
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = React.useState(false);
   const activeUnit = useCoreStore((state) => state.activeUnit);
   const unitRoleAssignments = useRolesStore((state) => state.unitRoleAssignments);
 
   const handlePress = React.useCallback(() => {
-    setIsModalOpen(true);
+    setIsBottomSheetOpen(true);
+  }, []);
+
+  const handleClose = React.useCallback(() => {
+    setIsBottomSheetOpen(false);
   }, []);
 
   const activeCount = React.useMemo(() => {
@@ -36,19 +40,15 @@ export const SidebarRolesCard = () => {
 
   return (
     <>
-      <Pressable onPress={() => handlePress()}>
+      <Pressable onPress={handlePress} testID="roles-sidebar-card">
         <Card className="flex-1 bg-background-50 p-4">
-          <Text className="text-base font-medium">{displayStatus}</Text>
+          <Text className="text-base font-medium" testID="roles-status-text">
+            {displayStatus}
+          </Text>
         </Card>
       </Pressable>
 
-      <RolesModal
-        isOpen={isModalOpen}
-        onClose={() => {
-          console.log('Modal closing');
-          setIsModalOpen(false);
-        }}
-      />
+      <RolesBottomSheet isOpen={isBottomSheetOpen} onClose={handleClose} />
     </>
   );
 };
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index e0304b0..da8ba78 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -22,7 +22,7 @@ const Sidebar = () => {
 
   return (
     <ScrollView className="size-full pt-4">
-      <VStack space="md" className="size-full p-4">
+      <VStack space="md" className="size-full p-2">
         {/* First row - Two cards side by side */}
         <HStack space="md">
           <SidebarUnitCard unitName="No Unit" unitType="" unitGroup={t('common.no_unit_selected')} bgColor="bg-background-50" />
@@ -36,7 +36,7 @@ const Sidebar = () => {
         <SidebarCallCard />
 
         {/* Third row - List of buttons */}
-        <VStack space="sm" className="w-full">
+        <VStack space="sm" className="mb-4 w-full">
           {activeStatuses?.Statuses.map((status) => (
             <Button
               key={status.Id}
diff --git a/src/components/sidebar/status-sidebar.tsx b/src/components/sidebar/status-sidebar.tsx
index b67440d..67872f3 100644
--- a/src/components/sidebar/status-sidebar.tsx
+++ b/src/components/sidebar/status-sidebar.tsx
@@ -11,7 +11,7 @@ export const SidebarStatusCard = () => {
   const activeUnitStatus = useCoreStore((state) => state.activeUnitStatus);
 
   // Derive the display values from activeUnit when available, otherwise use defaults
-  const displayStatus = activeUnitStatus?.State ?? 'Unknown';
+  const displayStatus = activeUnitStatus?.State || 'Unknown';
   let displayColor = activeUnitStatus?.StateStyle ?? '';
 
   // Fix up the color values to match the design system
@@ -36,7 +36,7 @@ export const SidebarStatusCard = () => {
   }
 
   return (
-    <Card className="flex-1 bg-background-50" style={{ backgroundColor: displayColor }}>
+    <Card className="flex-1 bg-background-50" style={{ backgroundColor: displayColor }} testID="status-card">
       <Text className="font-medium">{displayStatus}</Text>
     </Card>
   );
diff --git a/src/components/ui/__tests__/bottom-sheet.test.tsx b/src/components/ui/__tests__/bottom-sheet.test.tsx
new file mode 100644
index 0000000..2e16eca
--- /dev/null
+++ b/src/components/ui/__tests__/bottom-sheet.test.tsx
@@ -0,0 +1,464 @@
+import React from 'react';
+import { render, screen, fireEvent, cleanup, act } from '@testing-library/react-native';
+import { Text as RNText, View } from 'react-native';
+
+import { CustomBottomSheet } from '../bottom-sheet';
+
+// Mock nativewind
+jest.mock('nativewind', () => ({
+  useColorScheme: jest.fn(() => ({ colorScheme: 'light' })),
+  cssInterop: jest.fn(),
+}));
+
+// Mock cssInterop globally
+(global as any).cssInterop = jest.fn();
+
+// Mock UI components
+jest.mock('../actionsheet', () => ({
+  Actionsheet: ({ children, isOpen, onClose, snapPoints, testID }: any) => {
+    const { View } = require('react-native');
+    return isOpen ? (
+      <View testID={testID || 'actionsheet'} onTouchEnd={onClose}>
+        {children}
+      </View>
+    ) : null;
+  },
+  ActionsheetBackdrop: ({ children, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-backdrop" {...props}>{children}</View>;
+  },
+  ActionsheetContent: ({ children, className, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-content" className={className} {...props}>{children}</View>;
+  },
+  ActionsheetDragIndicator: ({ ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-drag-indicator" {...props} />;
+  },
+  ActionsheetDragIndicatorWrapper: ({ children, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="actionsheet-drag-indicator-wrapper" {...props}>{children}</View>;
+  },
+}));
+
+jest.mock('../center', () => ({
+  Center: ({ children, className, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="center" className={className} {...props}>{children}</View>;
+  },
+}));
+
+jest.mock('../spinner', () => ({
+  Spinner: ({ size, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="spinner" size={size} {...props} />;
+  },
+}));
+
+jest.mock('../text', () => ({
+  Text: ({ children, className, ...props }: any) => {
+    const { Text: RNText } = require('react-native');
+    return <RNText testID="text" className={className} {...props}>{children}</RNText>;
+  },
+}));
+
+jest.mock('../vstack', () => ({
+  VStack: ({ children, className, space, ...props }: any) => {
+    const { View } = require('react-native');
+    return <View testID="vstack" className={className} space={space} {...props}>{children}</View>;
+  },
+}));
+
+const { useColorScheme } = require('nativewind');
+
+// Mock console.error to prevent logging issues in tests
+const originalConsoleError = console.error;
+beforeAll(() => {
+  console.error = jest.fn();
+});
+
+afterAll(() => {
+  console.error = originalConsoleError;
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
+
+describe('CustomBottomSheet', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    children: <RNText>Test Content</RNText>,
+  };
+
+  describe('Basic Rendering', () => {
+    it('should render successfully when open', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+      expect(screen.getByTestId('actionsheet-backdrop')).toBeTruthy();
+      expect(screen.getByTestId('actionsheet-content')).toBeTruthy();
+      expect(screen.getByTestId('actionsheet-drag-indicator-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('actionsheet-drag-indicator')).toBeTruthy();
+      expect(screen.getByTestId('vstack')).toBeTruthy();
+      expect(screen.getByText('Test Content')).toBeTruthy();
+    });
+
+    it('should not render when closed', () => {
+      render(<CustomBottomSheet {...defaultProps} isOpen={false} />);
+
+      expect(screen.queryByTestId('actionsheet')).toBeNull();
+      expect(screen.queryByText('Test Content')).toBeNull();
+    });
+
+    it('should render with custom testID', () => {
+      render(<CustomBottomSheet {...defaultProps} testID="custom-bottom-sheet" />);
+
+      expect(screen.getByTestId('custom-bottom-sheet')).toBeTruthy();
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('should pass snapPoints correctly', () => {
+      const snapPoints = [25, 50, 75];
+      render(<CustomBottomSheet {...defaultProps} snapPoints={snapPoints} />);
+
+      // The snapPoints should be passed to the Actionsheet component
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+    });
+
+    it('should use default snapPoints when not provided', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      // Should render with default snapPoints [67]
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+    });
+
+    it('should apply custom minHeight', () => {
+      render(<CustomBottomSheet {...defaultProps} minHeight="min-h-[600px]" />);
+
+      const vstack = screen.getByTestId('vstack');
+      expect(vstack.props.className).toContain('min-h-[600px]');
+    });
+
+    it('should use default minHeight when not provided', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const vstack = screen.getByTestId('vstack');
+      expect(vstack.props.className).toContain('min-h-[400px]');
+    });
+
+    it('should handle onClose callback', () => {
+      const onCloseMock = jest.fn();
+      render(<CustomBottomSheet {...defaultProps} onClose={onCloseMock} />);
+
+      const actionsheet = screen.getByTestId('actionsheet');
+      fireEvent(actionsheet, 'touchEnd');
+
+      expect(onCloseMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Loading State', () => {
+    it('should show loading spinner when isLoading is true', () => {
+      render(<CustomBottomSheet {...defaultProps} isLoading={true} />);
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+      expect(screen.getByTestId('center')).toBeTruthy();
+      expect(screen.queryByText('Test Content')).toBeNull();
+    });
+
+    it('should show loading text when provided', () => {
+      render(
+        <CustomBottomSheet
+          {...defaultProps}
+          isLoading={true}
+          loadingText="Loading data..."
+        />
+      );
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+      expect(screen.getByText('Loading data...')).toBeTruthy();
+    });
+
+    it('should not show loading text when not provided', () => {
+      render(<CustomBottomSheet {...defaultProps} isLoading={true} />);
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+      expect(screen.queryByTestId('text')).toBeNull();
+    });
+
+    it('should show children when not loading', () => {
+      render(<CustomBottomSheet {...defaultProps} isLoading={false} />);
+
+      expect(screen.queryByTestId('spinner')).toBeNull();
+      expect(screen.queryByTestId('center')).toBeNull();
+      expect(screen.getByText('Test Content')).toBeTruthy();
+    });
+
+    it('should default to not loading when isLoading is not provided', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      expect(screen.queryByTestId('spinner')).toBeNull();
+      expect(screen.getByText('Test Content')).toBeTruthy();
+    });
+  });
+
+  describe('Color Scheme', () => {
+    it('should apply light theme styles', () => {
+      useColorScheme.mockReturnValue({ colorScheme: 'light' });
+
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const content = screen.getByTestId('actionsheet-content');
+      expect(content.props.className).toContain('bg-white');
+      expect(content.props.className).not.toContain('bg-neutral-900');
+    });
+
+    it('should apply dark theme styles', () => {
+      useColorScheme.mockReturnValue({ colorScheme: 'dark' });
+
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const content = screen.getByTestId('actionsheet-content');
+      expect(content.props.className).toContain('bg-neutral-900');
+      expect(content.props.className).not.toContain('bg-white');
+    });
+
+    it('should handle color scheme changes', () => {
+      useColorScheme.mockReturnValue({ colorScheme: 'light' });
+
+      const { rerender } = render(<CustomBottomSheet {...defaultProps} />);
+
+      let content = screen.getByTestId('actionsheet-content');
+      expect(content.props.className).toContain('bg-white');
+
+      useColorScheme.mockReturnValue({ colorScheme: 'dark' });
+      rerender(<CustomBottomSheet {...defaultProps} />);
+
+      content = screen.getByTestId('actionsheet-content');
+      expect(content.props.className).toContain('bg-neutral-900');
+    });
+  });
+
+  describe('Children Rendering', () => {
+    it('should render simple text children', () => {
+      render(
+        <CustomBottomSheet {...defaultProps}>
+          <RNText>Simple Text</RNText>
+        </CustomBottomSheet>
+      );
+
+      expect(screen.getByText('Simple Text')).toBeTruthy();
+    });
+
+    it('should render complex children', () => {
+      render(
+        <CustomBottomSheet {...defaultProps}>
+          <View>
+            <RNText>Title</RNText>
+            <RNText>Description</RNText>
+          </View>
+        </CustomBottomSheet>
+      );
+
+      expect(screen.getByText('Title')).toBeTruthy();
+      expect(screen.getByText('Description')).toBeTruthy();
+    });
+
+    it('should render multiple children', () => {
+      render(
+        <CustomBottomSheet {...defaultProps}>
+          <RNText>Child 1</RNText>
+          <RNText>Child 2</RNText>
+          <RNText>Child 3</RNText>
+        </CustomBottomSheet>
+      );
+
+      expect(screen.getByText('Child 1')).toBeTruthy();
+      expect(screen.getByText('Child 2')).toBeTruthy();
+      expect(screen.getByText('Child 3')).toBeTruthy();
+    });
+
+    it('should handle null children', () => {
+      render(
+        <CustomBottomSheet {...defaultProps}>
+          {null}
+        </CustomBottomSheet>
+      );
+
+      expect(screen.getByTestId('vstack')).toBeTruthy();
+    });
+
+    it('should handle undefined children', () => {
+      render(
+        <CustomBottomSheet {...defaultProps}>
+          {undefined}
+        </CustomBottomSheet>
+      );
+
+      expect(screen.getByTestId('vstack')).toBeTruthy();
+    });
+  });
+
+  describe('CSS Classes', () => {
+    it('should apply correct base classes', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const content = screen.getByTestId('actionsheet-content');
+      expect(content.props.className).toContain('rounded-t-3xl');
+      expect(content.props.className).toContain('px-4');
+      expect(content.props.className).toContain('pb-6');
+    });
+
+    it('should apply correct VStack classes', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const vstack = screen.getByTestId('vstack');
+      expect(vstack.props.className).toContain('w-full');
+      expect(vstack.props.space).toBe('md');
+    });
+
+    it('should apply correct loading Center classes', () => {
+      render(<CustomBottomSheet {...defaultProps} isLoading={true} />);
+
+      const center = screen.getByTestId('center');
+      expect(center.props.className).toContain('h-32');
+    });
+
+    it('should apply correct loading text classes', () => {
+      render(
+        <CustomBottomSheet
+          {...defaultProps}
+          isLoading={true}
+          loadingText="Loading..."
+        />
+      );
+
+      const text = screen.getByTestId('text');
+      expect(text.props.className).toContain('text-sm');
+      expect(text.props.className).toContain('text-gray-500');
+    });
+  });
+
+  describe('State Management', () => {
+    it('should handle isOpen state changes', () => {
+      const { rerender } = render(<CustomBottomSheet {...defaultProps} isOpen={false} />);
+
+      expect(screen.queryByTestId('actionsheet')).toBeNull();
+
+      rerender(<CustomBottomSheet {...defaultProps} isOpen={true} />);
+
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+    });
+
+    it('should handle isLoading state changes', () => {
+      const { rerender } = render(<CustomBottomSheet {...defaultProps} isLoading={false} />);
+
+      expect(screen.queryByTestId('spinner')).toBeNull();
+      expect(screen.getByText('Test Content')).toBeTruthy();
+
+      rerender(<CustomBottomSheet {...defaultProps} isLoading={true} />);
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+      expect(screen.queryByText('Test Content')).toBeNull();
+    });
+
+    it('should handle loadingText changes', () => {
+      const { rerender } = render(
+        <CustomBottomSheet {...defaultProps} isLoading={true} loadingText="Loading..." />
+      );
+
+      expect(screen.getByText('Loading...')).toBeTruthy();
+
+      rerender(
+        <CustomBottomSheet {...defaultProps} isLoading={true} loadingText="Please wait..." />
+      );
+
+      expect(screen.getByText('Please wait...')).toBeTruthy();
+      expect(screen.queryByText('Loading...')).toBeNull();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty snapPoints array', () => {
+      render(<CustomBottomSheet {...defaultProps} snapPoints={[]} />);
+
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+    });
+
+    it('should handle single snapPoint', () => {
+      render(<CustomBottomSheet {...defaultProps} snapPoints={[100]} />);
+
+      expect(screen.getByTestId('actionsheet')).toBeTruthy();
+    });
+
+    it('should handle empty string minHeight', () => {
+      render(<CustomBottomSheet {...defaultProps} minHeight="" />);
+
+      const vstack = screen.getByTestId('vstack');
+      expect(vstack.props.className).toContain('w-full');
+    });
+
+    it('should handle empty string loadingText', () => {
+      render(
+        <CustomBottomSheet {...defaultProps} isLoading={true} loadingText="" />
+      );
+
+      expect(screen.getByTestId('spinner')).toBeTruthy();
+      expect(screen.queryByTestId('text')).toBeNull();
+    });
+
+    it('should handle multiple onClose calls', () => {
+      const onCloseMock = jest.fn();
+      render(<CustomBottomSheet {...defaultProps} onClose={onCloseMock} />);
+
+      const actionsheet = screen.getByTestId('actionsheet');
+      fireEvent(actionsheet, 'touchEnd');
+      fireEvent(actionsheet, 'touchEnd');
+      fireEvent(actionsheet, 'touchEnd');
+
+      expect(onCloseMock).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should maintain correct component hierarchy', () => {
+      render(<CustomBottomSheet {...defaultProps} />);
+
+      const actionsheet = screen.getByTestId('actionsheet');
+      const backdrop = screen.getByTestId('actionsheet-backdrop');
+      const content = screen.getByTestId('actionsheet-content');
+      const dragIndicatorWrapper = screen.getByTestId('actionsheet-drag-indicator-wrapper');
+      const dragIndicator = screen.getByTestId('actionsheet-drag-indicator');
+      const vstack = screen.getByTestId('vstack');
+
+      expect(actionsheet).toBeTruthy();
+      expect(backdrop).toBeTruthy();
+      expect(content).toBeTruthy();
+      expect(dragIndicatorWrapper).toBeTruthy();
+      expect(dragIndicator).toBeTruthy();
+      expect(vstack).toBeTruthy();
+    });
+
+    it('should have correct loading state structure', () => {
+      render(
+        <CustomBottomSheet
+          {...defaultProps}
+          isLoading={true}
+          loadingText="Loading..."
+        />
+      );
+
+      const center = screen.getByTestId('center');
+      const spinner = screen.getByTestId('spinner');
+      const text = screen.getByTestId('text');
+
+      expect(center).toBeTruthy();
+      expect(spinner).toBeTruthy();
+      expect(text).toBeTruthy();
+    });
+  });
+}); 
\ No newline at end of file
diff --git a/src/components/ui/bottom-sheet.tsx b/src/components/ui/bottom-sheet.tsx
index 1ce9dbe..6c94db1 100644
--- a/src/components/ui/bottom-sheet.tsx
+++ b/src/components/ui/bottom-sheet.tsx
@@ -6,35 +6,41 @@ import { Center } from './center';
 import { Spinner } from './spinner';
 import { Text } from './text';
 import { VStack } from './vstack';
+
 interface CustomBottomSheetProps {
   children: React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
   isLoading?: boolean;
   loadingText?: string;
+  snapPoints?: number[];
+  minHeight?: string;
+  testID?: string;
 }
 
-export function CustomBottomSheet({ children, isOpen, onClose, isLoading = false, loadingText }: CustomBottomSheetProps) {
+export function CustomBottomSheet({ children, isOpen, onClose, isLoading = false, loadingText, snapPoints = [67], minHeight = 'min-h-[400px]', testID }: CustomBottomSheetProps) {
   const { colorScheme } = useColorScheme();
 
   return (
-    <Actionsheet isOpen={isOpen} onClose={onClose} snapPoints={[75]}>
+    <Actionsheet isOpen={isOpen} onClose={onClose} snapPoints={snapPoints} testID={testID}>
       <ActionsheetBackdrop />
       <ActionsheetContent className={`rounded-t-3xl px-4 pb-6 ${colorScheme === 'dark' ? 'bg-neutral-900' : 'bg-white'}`}>
         <ActionsheetDragIndicatorWrapper>
           <ActionsheetDragIndicator />
         </ActionsheetDragIndicatorWrapper>
 
-        {isLoading ? (
-          <Center className="h-32">
-            <VStack space="sm" className="items-center">
-              <Spinner size="large" />
-              {loadingText && <Text className="text-sm text-gray-500">{loadingText}</Text>}
-            </VStack>
-          </Center>
-        ) : (
-          children
-        )}
+        <VStack className={`w-full ${minHeight}`} space="md">
+          {isLoading ? (
+            <Center className="h-32">
+              <VStack space="sm" className="items-center">
+                <Spinner size="large" />
+                {loadingText && <Text className="text-sm text-gray-500">{loadingText}</Text>}
+              </VStack>
+            </Center>
+          ) : (
+            children
+          )}
+        </VStack>
       </ActionsheetContent>
     </Actionsheet>
   );
diff --git a/src/hooks/__tests__/use-signalr-lifecycle.test.tsx b/src/hooks/__tests__/use-signalr-lifecycle.test.tsx
new file mode 100644
index 0000000..9978be3
--- /dev/null
+++ b/src/hooks/__tests__/use-signalr-lifecycle.test.tsx
@@ -0,0 +1,158 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+import { AppStateStatus } from 'react-native';
+
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
+
+import { useSignalRLifecycle } from '../use-signalr-lifecycle';
+
+// Mock the dependencies
+jest.mock('@/stores/signalr/signalr-store');
+jest.mock('../use-app-lifecycle');
+
+const mockUseSignalRStore = useSignalRStore as jest.MockedFunction<typeof useSignalRStore>;
+const mockUseAppLifecycle = require('../use-app-lifecycle').useAppLifecycle as jest.MockedFunction<any>;
+
+describe('useSignalRLifecycle', () => {
+  const mockConnectUpdateHub = jest.fn();
+  const mockDisconnectUpdateHub = jest.fn();
+  const mockConnectGeolocationHub = jest.fn();
+  const mockDisconnectGeolocationHub = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Mock SignalR store
+    mockUseSignalRStore.mockReturnValue({
+      connectUpdateHub: mockConnectUpdateHub,
+      disconnectUpdateHub: mockDisconnectUpdateHub,
+      connectGeolocationHub: mockConnectGeolocationHub,
+      disconnectGeolocationHub: mockDisconnectGeolocationHub,
+      isUpdateHubConnected: false,
+      isGeolocationHubConnected: false,
+    } as any);
+
+    // Mock app lifecycle
+    mockUseAppLifecycle.mockReturnValue({
+      isActive: true,
+      appState: 'active' as AppStateStatus,
+    });
+  });
+
+  it('should disconnect SignalR when app goes to background', async () => {
+    const { rerender } = renderHook(
+      ({ isSignedIn, hasInitialized, isActive, appState }) => {
+        mockUseAppLifecycle.mockReturnValue({ isActive, appState });
+        return useSignalRLifecycle({ isSignedIn, hasInitialized });
+      },
+      {
+        initialProps: {
+          isSignedIn: true,
+          hasInitialized: true,
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isSignedIn: true,
+      hasInitialized: true,
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+    });
+
+    await waitFor(() => {
+      expect(mockDisconnectUpdateHub).toHaveBeenCalled();
+      expect(mockDisconnectGeolocationHub).toHaveBeenCalled();
+    });
+  });
+
+  it('should reconnect SignalR when app becomes active from background', async () => {
+    const { rerender } = renderHook(
+      ({ isSignedIn, hasInitialized, isActive, appState }) => {
+        mockUseAppLifecycle.mockReturnValue({ isActive, appState });
+        return useSignalRLifecycle({ isSignedIn, hasInitialized });
+      },
+      {
+        initialProps: {
+          isSignedIn: true,
+          hasInitialized: true,
+          isActive: false,
+          appState: 'background' as AppStateStatus,
+        },
+      }
+    );
+
+    // Simulate app becoming active
+    rerender({
+      isSignedIn: true,
+      hasInitialized: true,
+      isActive: true,
+      appState: 'active' as AppStateStatus,
+    });
+
+    await waitFor(() => {
+      expect(mockConnectUpdateHub).toHaveBeenCalled();
+      expect(mockConnectGeolocationHub).toHaveBeenCalled();
+    }, { timeout: 1000 });
+  });
+
+  it('should not manage SignalR when user is not signed in', async () => {
+    const { rerender } = renderHook(
+      ({ isSignedIn, hasInitialized, isActive, appState }) => {
+        mockUseAppLifecycle.mockReturnValue({ isActive, appState });
+        return useSignalRLifecycle({ isSignedIn, hasInitialized });
+      },
+      {
+        initialProps: {
+          isSignedIn: false,
+          hasInitialized: true,
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isSignedIn: false,
+      hasInitialized: true,
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+    });
+
+    // Should not call SignalR methods when user is not signed in
+    expect(mockDisconnectUpdateHub).not.toHaveBeenCalled();
+    expect(mockDisconnectGeolocationHub).not.toHaveBeenCalled();
+  });
+
+  it('should not manage SignalR when app is not initialized', async () => {
+    const { rerender } = renderHook(
+      ({ isSignedIn, hasInitialized, isActive, appState }) => {
+        mockUseAppLifecycle.mockReturnValue({ isActive, appState });
+        return useSignalRLifecycle({ isSignedIn, hasInitialized });
+      },
+      {
+        initialProps: {
+          isSignedIn: true,
+          hasInitialized: false,
+          isActive: true,
+          appState: 'active' as AppStateStatus,
+        },
+      }
+    );
+
+    // Simulate app going to background
+    rerender({
+      isSignedIn: true,
+      hasInitialized: false,
+      isActive: false,
+      appState: 'background' as AppStateStatus,
+    });
+
+    // Should not call SignalR methods when app is not initialized
+    expect(mockDisconnectUpdateHub).not.toHaveBeenCalled();
+    expect(mockDisconnectGeolocationHub).not.toHaveBeenCalled();
+  });
+}); 
\ No newline at end of file
diff --git a/src/hooks/__tests__/use-status-signalr-updates.test.tsx b/src/hooks/__tests__/use-status-signalr-updates.test.tsx
new file mode 100644
index 0000000..6dbf242
--- /dev/null
+++ b/src/hooks/__tests__/use-status-signalr-updates.test.tsx
@@ -0,0 +1,228 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+
+import { getUnitStatus } from '@/api/units/unitStatuses';
+import { useCoreStore } from '@/stores/app/core-store';
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
+
+import { useStatusSignalRUpdates } from '../use-status-signalr-updates';
+
+// Mock the dependencies
+jest.mock('@/api/units/unitStatuses');
+jest.mock('@/stores/app/core-store');
+jest.mock('@/stores/signalr/signalr-store');
+
+const mockGetUnitStatus = getUnitStatus as jest.MockedFunction<typeof getUnitStatus>;
+const mockUseCoreStore = useCoreStore as jest.MockedFunction<typeof useCoreStore>;
+const mockUseSignalRStore = useSignalRStore as jest.MockedFunction<typeof useSignalRStore>;
+
+describe('useStatusSignalRUpdates', () => {
+  const mockSetActiveUnitWithFetch = jest.fn();
+  const mockCoreState = {
+    activeUnitId: '123',
+    setActiveUnitWithFetch: mockSetActiveUnitWithFetch,
+  } as any;
+  const mockSignalRState = {
+    lastUpdateTimestamp: 0,
+    lastUpdateMessage: null,
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Reset state to default values
+    mockCoreState.activeUnitId = '123';
+    mockCoreState.setActiveUnitWithFetch = mockSetActiveUnitWithFetch;
+    mockSignalRState.lastUpdateTimestamp = 0;
+    mockSignalRState.lastUpdateMessage = null;
+
+    // Mock core store with selector support
+    mockUseCoreStore.mockImplementation((selector) => {
+      if (selector) {
+        return selector(mockCoreState);
+      }
+      return mockCoreState;
+    });
+
+    // Mock SignalR store with selector support
+    mockUseSignalRStore.mockImplementation((selector) => {
+      if (selector) {
+        return selector(mockSignalRState);
+      }
+      return mockSignalRState;
+    });
+  });
+
+  it('should not process updates when no active unit', () => {
+    mockCoreState.activeUnitId = null;
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should not process updates when timestamp is 0', () => {
+    mockSignalRState.lastUpdateTimestamp = 0;
+    mockSignalRState.lastUpdateMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should not process updates when message is null', () => {
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = null;
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should process unit status update for active unit', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    renderHook(useStatusSignalRUpdates);
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+  });
+
+  it('should not process updates for different unit', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '456', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should handle invalid JSON message gracefully', async () => {
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = 'invalid json';
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should not process the same timestamp twice', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    const { rerender } = renderHook(useStatusSignalRUpdates);
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+
+    mockSetActiveUnitWithFetch.mockClear();
+
+    // Rerender with same timestamp
+    rerender({});
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should process new timestamp after initial one', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    const { rerender } = renderHook(useStatusSignalRUpdates);
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+
+    mockSetActiveUnitWithFetch.mockClear();
+
+    // Update with new timestamp
+    mockSignalRState.lastUpdateTimestamp = 12346;
+    mockSignalRState.lastUpdateMessage = JSON.stringify({ UnitId: '123', State: 'Busy' });
+
+    rerender({});
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+  });
+
+  it('should handle API errors gracefully', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    mockSetActiveUnitWithFetch.mockRejectedValue(new Error('API Error'));
+
+    renderHook(useStatusSignalRUpdates);
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+
+    // Should not crash the hook
+    expect(mockSetActiveUnitWithFetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle activeUnitId changes', async () => {
+    const mockMessage = JSON.stringify({ UnitId: '123', State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    const { rerender } = renderHook(useStatusSignalRUpdates);
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('123');
+    });
+
+    mockSetActiveUnitWithFetch.mockClear();
+
+    // Change active unit
+    mockCoreState.activeUnitId = '456';
+
+    // Same timestamp but different unit in message
+    mockSignalRState.lastUpdateTimestamp = 12346;
+    mockSignalRState.lastUpdateMessage = JSON.stringify({ UnitId: '456', State: 'Available' });
+
+    rerender({});
+
+    await waitFor(() => {
+      expect(mockSetActiveUnitWithFetch).toHaveBeenCalledWith('456');
+    });
+  });
+
+  it('should handle message with no UnitId', async () => {
+    const mockMessage = JSON.stringify({ State: 'Available' });
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+
+  it('should handle empty message object', async () => {
+    const mockMessage = JSON.stringify({});
+
+    mockSignalRState.lastUpdateTimestamp = 12345;
+    mockSignalRState.lastUpdateMessage = mockMessage;
+
+    renderHook(useStatusSignalRUpdates);
+
+    expect(mockSetActiveUnitWithFetch).not.toHaveBeenCalled();
+  });
+}); 
\ No newline at end of file
diff --git a/src/hooks/use-map-signalr-updates.ts b/src/hooks/use-map-signalr-updates.ts
index 138040a..781ba76 100644
--- a/src/hooks/use-map-signalr-updates.ts
+++ b/src/hooks/use-map-signalr-updates.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { getMapDataAndMarkers } from '@/api/mapping/mapping';
 import { logger } from '@/lib/logging';
@@ -6,9 +6,27 @@ import { type MapMakerInfoData } from '@/models/v4/mapping/getMapDataAndMarkersD
 import { useSignalRStore } from '@/stores/signalr/signalr-store';
 
 export const useMapSignalRUpdates = (onMarkersUpdate: (markers: MapMakerInfoData[]) => void) => {
-  const lastUpdateTimestamp = useSignalRStore((state) => state.lastUpdateTimestamp);
+  const lastProcessedTimestamp = useRef<number>(0);
+
+  const lastUpdateTimestamp = useSignalRStore((state) => {
+    //logger.info({
+    //  message: 'Zustand selector called for lastUpdateTimestamp',
+    //  context: { lastUpdateTimestamp: state.lastUpdateTimestamp },
+    //});
+    return state.lastUpdateTimestamp;
+  });
+
+  //logger.info({
+  //  message: 'Setting up useMapSignalRUpdates',
+  //  context: { lastUpdateTimestamp, lastProcessedTimestamp: lastProcessedTimestamp.current },
+  //});
 
   useEffect(() => {
+    //logger.info({
+    //  message: 'useEffect triggered in useMapSignalRUpdates',
+    //  context: { lastUpdateTimestamp, lastProcessedTimestamp: lastProcessedTimestamp.current },
+    //});
+
     const fetchAndUpdateMarkers = async () => {
       try {
         const mapDataAndMarkers = await getMapDataAndMarkers();
@@ -24,15 +42,19 @@ export const useMapSignalRUpdates = (onMarkersUpdate: (markers: MapMakerInfoData
 
           onMarkersUpdate(mapDataAndMarkers.Data.MapMakerInfos);
         }
+
+        // Update the last processed timestamp after successful API call
+        lastProcessedTimestamp.current = lastUpdateTimestamp;
       } catch (error) {
         logger.error({
           message: 'Failed to update map markers from SignalR update',
           context: { error },
         });
+        // Don't update lastProcessedTimestamp on error so it can be retried
       }
     };
 
-    if (lastUpdateTimestamp > 0) {
+    if (lastUpdateTimestamp > 0 && lastUpdateTimestamp !== lastProcessedTimestamp.current) {
       fetchAndUpdateMarkers();
     }
   }, [lastUpdateTimestamp, onMarkersUpdate]);
diff --git a/src/hooks/use-signalr-lifecycle.ts b/src/hooks/use-signalr-lifecycle.ts
new file mode 100644
index 0000000..48aadff
--- /dev/null
+++ b/src/hooks/use-signalr-lifecycle.ts
@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { logger } from '@/lib/logging';
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
+
+import { useAppLifecycle } from './use-app-lifecycle';
+
+interface UseSignalRLifecycleOptions {
+  isSignedIn: boolean;
+  hasInitialized: boolean;
+}
+
+export function useSignalRLifecycle({ isSignedIn, hasInitialized }: UseSignalRLifecycleOptions) {
+  const { isActive, appState } = useAppLifecycle();
+  const signalRStore = useSignalRStore();
+  const lastAppState = useRef<string | null>(null);
+
+  const handleAppBackground = useCallback(async () => {
+    if (!isSignedIn || !hasInitialized) return;
+
+    logger.info({
+      message: 'App going to background, disconnecting SignalR',
+    });
+
+    try {
+      await signalRStore.disconnectUpdateHub();
+      await signalRStore.disconnectGeolocationHub();
+    } catch (error) {
+      logger.error({
+        message: 'Failed to disconnect SignalR on app background',
+        context: { error },
+      });
+    }
+  }, [isSignedIn, hasInitialized, signalRStore]);
+
+  const handleAppResume = useCallback(async () => {
+    if (!isSignedIn || !hasInitialized) return;
+
+    logger.info({
+      message: 'App resumed from background, reconnecting SignalR',
+    });
+
+    try {
+      await signalRStore.connectUpdateHub();
+      await signalRStore.connectGeolocationHub();
+    } catch (error) {
+      logger.error({
+        message: 'Failed to reconnect SignalR on app resume',
+        context: { error },
+      });
+    }
+  }, [isSignedIn, hasInitialized, signalRStore]);
+
+  // Handle app going to background
+  useEffect(() => {
+    if (!isActive && (appState === 'background' || appState === 'inactive') && hasInitialized) {
+      handleAppBackground();
+    }
+  }, [isActive, appState, hasInitialized, handleAppBackground]);
+
+  // Handle app resuming from background
+  useEffect(() => {
+    if (isActive && appState === 'active' && hasInitialized && lastAppState.current !== 'active') {
+      // Only reconnect if coming from background/inactive state
+      if (lastAppState.current === 'background' || lastAppState.current === 'inactive') {
+        const timer = setTimeout(() => {
+          handleAppResume();
+        }, 500); // Small delay to prevent multiple rapid calls
+
+        return () => clearTimeout(timer);
+      }
+    }
+
+    lastAppState.current = appState;
+  }, [isActive, appState, hasInitialized, handleAppResume]);
+
+  return {
+    isActive,
+    appState,
+    handleAppBackground,
+    handleAppResume,
+  };
+}
diff --git a/src/hooks/use-status-signalr-updates.ts b/src/hooks/use-status-signalr-updates.ts
new file mode 100644
index 0000000..8f7b739
--- /dev/null
+++ b/src/hooks/use-status-signalr-updates.ts
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from 'react';
+
+import { getUnitStatus } from '@/api/units/unitStatuses';
+import { logger } from '@/lib/logging';
+import { useCoreStore } from '@/stores/app/core-store';
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
+
+export const useStatusSignalRUpdates = () => {
+  const lastProcessedTimestamp = useRef<number>(0);
+  const { activeUnitId, setActiveUnitWithFetch } = useCoreStore();
+
+  const lastUpdateTimestamp = useSignalRStore((state) => state.lastUpdateTimestamp);
+  const lastUpdateMessage = useSignalRStore((state) => state.lastUpdateMessage);
+
+  useEffect(() => {
+    const handleStatusUpdate = async () => {
+      try {
+        if (!activeUnitId) {
+          logger.info({
+            message: 'No active unit, skipping status update',
+          });
+          return;
+        }
+
+        // Parse the SignalR message to check if it's a unit status update
+        if (lastUpdateMessage && typeof lastUpdateMessage === 'string') {
+          try {
+            const parsedMessage = JSON.parse(lastUpdateMessage);
+
+            // Check if this is a unit status update message
+            if (parsedMessage && parsedMessage.UnitId === activeUnitId) {
+              logger.info({
+                message: 'Processing unit status update for active unit',
+                context: {
+                  unitId: activeUnitId,
+                  timestamp: lastUpdateTimestamp,
+                  message: parsedMessage,
+                },
+              });
+
+              // Refresh the active unit status
+              await setActiveUnitWithFetch(activeUnitId);
+
+              // Update the last processed timestamp
+              lastProcessedTimestamp.current = lastUpdateTimestamp;
+            }
+          } catch (parseError) {
+            logger.error({
+              message: 'Failed to parse SignalR message',
+              context: { error: parseError, message: lastUpdateMessage },
+            });
+          }
+        }
+      } catch (error) {
+        logger.error({
+          message: 'Failed to process unit status update',
+          context: { error },
+        });
+      }
+    };
+
+    if (lastUpdateTimestamp > 0 && lastUpdateTimestamp !== lastProcessedTimestamp.current && activeUnitId) {
+      handleStatusUpdate();
+    }
+  }, [lastUpdateTimestamp, lastUpdateMessage, activeUnitId, setActiveUnitWithFetch]);
+};
diff --git a/src/services/signalr.service.ts b/src/services/signalr.service.ts
index d10475b..4832a18 100644
--- a/src/services/signalr.service.ts
+++ b/src/services/signalr.service.ts
@@ -46,6 +46,11 @@ class SignalRService {
         throw new Error('No authentication token available');
       }
 
+      logger.info({
+        message: `Connecting to hub: ${config.name}`,
+        context: { config },
+      });
+
       const connection = new HubConnectionBuilder()
         .withUrl(config.url, {
           accessTokenFactory: () => token,
@@ -76,7 +81,16 @@ class SignalRService {
 
       // Register all methods
       config.methods.forEach((method) => {
+        logger.info({
+          message: `Registering ${method} message from hub: ${config.name}`,
+          context: { method },
+        });
+
         connection.on(method, (data) => {
+          logger.info({
+            message: `Received ${method} message from hub: ${config.name}`,
+            context: { method, data },
+          });
           this.handleMessage(config.name, method, data);
         });
       });
@@ -120,8 +134,8 @@ class SignalRService {
       message: `Received message from hub: ${hubName}`,
       context: { method, data },
     });
-    // Emit event for subscribers
-    this.emit('message', { hubName, method, data });
+    // Emit event for subscribers using the method name as the event name
+    this.emit(method, data);
   }
 
   public async disconnectFromHub(hubName: string): Promise<void> {
@@ -144,6 +158,21 @@ class SignalRService {
     }
   }
 
+  public async invoke(hubName: string, method: string, data: unknown): Promise<void> {
+    const connection = this.connections.get(hubName);
+    if (connection) {
+      try {
+        return await connection.invoke(method, data);
+      } catch (error) {
+        logger.error({
+          message: `Error invoking method ${method} from hub: ${hubName}`,
+          context: { error },
+        });
+        throw error;
+      }
+    }
+  }
+
   public async disconnectAll(): Promise<void> {
     const disconnectPromises = Array.from(this.connections.keys()).map((hubName) => this.disconnectFromHub(hubName));
     await Promise.all(disconnectPromises);
diff --git a/src/stores/app/__tests__/core-store.test.ts b/src/stores/app/__tests__/core-store.test.ts
index 7dcf5ca..8838358 100644
--- a/src/stores/app/__tests__/core-store.test.ts
+++ b/src/stores/app/__tests__/core-store.test.ts
@@ -1,19 +1,177 @@
-import { renderHook } from '@testing-library/react-native';
+import { renderHook, act } from '@testing-library/react-native';
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
+
+// Mock all async dependencies that cause the overlapping act() calls
+jest.mock('@/api/config/config', () => ({
+  getConfig: jest.fn(),
+}));
+
+jest.mock('@/api/satuses/statuses', () => ({
+  getAllUnitStatuses: jest.fn(),
+}));
+
+jest.mock('@/api/units/unitStatuses', () => ({
+  getUnitStatus: jest.fn(),
+}));
+
+jest.mock('@/lib/storage/app', () => ({
+  getActiveUnitId: jest.fn(),
+  getActiveCallId: jest.fn(),
+  setActiveUnitId: jest.fn(),
+  setActiveCallId: jest.fn(),
+}));
+
+jest.mock('@/lib/logging', () => ({
+  logger: {
+    info: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+jest.mock('@/stores/calls/store', () => ({
+  useCallsStore: {
+    getState: jest.fn(() => ({
+      fetchCalls: jest.fn(),
+      fetchCallPriorities: jest.fn(),
+      calls: [],
+      callPriorities: [],
+    })),
+  },
+}));
+
+jest.mock('@/stores/units/store', () => ({
+  useUnitsStore: {
+    getState: jest.fn(() => ({
+      fetchUnits: jest.fn(),
+      units: [],
+      unitStatuses: [],
+    })),
+  },
+}));
+
+// Mock the storage layer used by zustand persist
+jest.mock('@/lib/storage', () => ({
+  zustandStorage: {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+    removeItem: jest.fn(),
+  },
+}));
+
+// Import after mocks
 import { useCoreStore } from '../core-store';
+import { getActiveUnitId, getActiveCallId } from '@/lib/storage/app';
+
+const mockGetActiveUnitId = getActiveUnitId as jest.MockedFunction<typeof getActiveUnitId>;
+const mockGetActiveCallId = getActiveCallId as jest.MockedFunction<typeof getActiveCallId>;
 
-describe('Core Store Initialization', () => {
-  it('should prevent multiple simultaneous initializations', () => {
-    const { result } = renderHook(() => useCoreStore());
-    expect(result.current).toBeDefined();
+describe('Core Store', () => {
+  beforeEach(() => {
+    // Clear all mocks before each test
+    jest.clearAllMocks();
+
+    // Reset store state by creating a fresh instance
+    useCoreStore.setState({
+      activeUnitId: null,
+      activeUnit: null,
+      activeUnitStatus: null,
+      activeUnitStatusType: null,
+      activeStatuses: null,
+      activeCallId: null,
+      activeCall: null,
+      activePriority: null,
+      config: null,
+      isLoading: false,
+      isInitialized: false,
+      isInitializing: false,
+      error: null,
+    });
   });
 
-  it('should skip initialization if already initialized', () => {
-    const { result } = renderHook(() => useCoreStore());
-    expect(result.current).toBeDefined();
+  describe('Initialization', () => {
+    it('should prevent multiple simultaneous initializations', async () => {
+      mockGetActiveUnitId.mockReturnValue(null);
+      mockGetActiveCallId.mockReturnValue(null);
+
+      const { result } = renderHook(() => useCoreStore());
+
+      await act(async () => {
+        // Start first initialization
+        const firstInit = result.current.init();
+
+        // Try to start second initialization while first is in progress
+        const secondInit = result.current.init();
+
+        // Wait for both to complete
+        await Promise.all([firstInit, secondInit]);
+      });
+
+      // Should be initialized only once
+      expect(result.current.isInitialized).toBe(true);
+      expect(result.current.isInitializing).toBe(false);
+    });
+
+    it('should skip initialization if already initialized', async () => {
+      mockGetActiveUnitId.mockReturnValue(null);
+      mockGetActiveCallId.mockReturnValue(null);
+
+      const { result } = renderHook(() => useCoreStore());
+
+      // First initialization
+      await act(async () => {
+        await result.current.init();
+      });
+
+      expect(result.current.isInitialized).toBe(true);
+
+      // Second initialization should skip
+      await act(async () => {
+        await result.current.init();
+      });
+
+      expect(result.current.isInitialized).toBe(true);
+      expect(result.current.isInitializing).toBe(false);
+    });
+
+    it('should handle initialization with no active unit or call', async () => {
+      mockGetActiveUnitId.mockReturnValue(null);
+      mockGetActiveCallId.mockReturnValue(null);
+
+      const { result } = renderHook(() => useCoreStore());
+
+      await act(async () => {
+        await result.current.init();
+      });
+
+      expect(result.current.isInitialized).toBe(true);
+      expect(result.current.isInitializing).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
   });
 
-  it('should handle initialization errors gracefully', () => {
-    const { result } = renderHook(() => useCoreStore());
-    expect(result.current).toBeDefined();
+  describe('Store State', () => {
+    it('should have correct initial state', () => {
+      const { result } = renderHook(() => useCoreStore());
+
+      expect(result.current.activeUnitId).toBe(null);
+      expect(result.current.activeUnit).toBe(null);
+      expect(result.current.activeCallId).toBe(null);
+      expect(result.current.activeCall).toBe(null);
+      expect(result.current.config).toBe(null);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.isInitialized).toBe(false);
+      expect(result.current.isInitializing).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should have all required methods', () => {
+      const { result } = renderHook(() => useCoreStore());
+
+      expect(typeof result.current.init).toBe('function');
+      expect(typeof result.current.setActiveUnit).toBe('function');
+      expect(typeof result.current.setActiveUnitWithFetch).toBe('function');
+      expect(typeof result.current.setActiveCall).toBe('function');
+      expect(typeof result.current.fetchConfig).toBe('function');
+    });
   });
 });
diff --git a/src/stores/protocols/__tests__/store.test.ts b/src/stores/protocols/__tests__/store.test.ts
new file mode 100644
index 0000000..2d0c45e
--- /dev/null
+++ b/src/stores/protocols/__tests__/store.test.ts
@@ -0,0 +1,404 @@
+import { describe, expect, it, jest, beforeEach } from '@jest/globals';
+import { act, renderHook } from '@testing-library/react-native';
+
+import { CallProtocolsResultData } from '@/models/v4/callProtocols/callProtocolsResultData';
+import { CallProtocolsResult } from '@/models/v4/callProtocols/callProtocolsResult';
+
+import { useProtocolsStore } from '../store';
+
+// Mock the API
+jest.mock('@/api/protocols/protocols', () => ({
+  getAllProtocols: jest.fn(),
+}));
+
+// Mock protocols test data
+const mockProtocols: CallProtocolsResultData[] = [
+  {
+    Id: '1',
+    DepartmentId: 'dept1',
+    Name: 'Fire Emergency Response',
+    Code: 'FIRE001',
+    Description: 'Standard fire emergency response protocol',
+    ProtocolText: '<p>Fire emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+  {
+    Id: '2',
+    DepartmentId: 'dept1',
+    Name: 'Medical Emergency',
+    Code: 'MED001',
+    Description: 'Medical emergency response protocol',
+    ProtocolText: '<p>Medical emergency response protocol content</p>',
+    CreatedOn: '2023-01-01T00:00:00Z',
+    CreatedByUserId: 'user1',
+    IsDisabled: false,
+    UpdatedOn: '2023-01-02T00:00:00Z',
+    UpdatedByUserId: 'user1',
+    MinimumWeight: 0,
+    State: 1,
+    Triggers: [],
+    Attachments: [],
+    Questions: [],
+  },
+];
+
+const mockApiResponse: CallProtocolsResult = {
+  Data: mockProtocols,
+  PageSize: 0,
+  Timestamp: '2023-01-01T00:00:00Z',
+  Version: '1.0',
+  Node: 'test-node',
+  RequestId: 'test-request-id',
+  Status: 'success',
+  Environment: 'test',
+};
+
+describe('useProtocolsStore', () => {
+  const { getAllProtocols } = require('@/api/protocols/protocols');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Reset store state
+    useProtocolsStore.setState({
+      protocols: [],
+      searchQuery: '',
+      selectedProtocolId: null,
+      isDetailsOpen: false,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('Initial State', () => {
+    it('should have correct initial state', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      expect(result.current.protocols).toEqual([]);
+      expect(result.current.searchQuery).toBe('');
+      expect(result.current.selectedProtocolId).toBe(null);
+      expect(result.current.isDetailsOpen).toBe(false);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+  });
+
+  describe('fetchProtocols', () => {
+    it('should fetch protocols successfully', async () => {
+      getAllProtocols.mockResolvedValue(mockApiResponse);
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(getAllProtocols).toHaveBeenCalledTimes(1);
+      expect(result.current.protocols).toEqual(mockProtocols);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should set loading state during fetch', async () => {
+      getAllProtocols.mockImplementation(() => new Promise((resolve) => setTimeout(() => resolve(mockApiResponse), 100)));
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.fetchProtocols();
+      });
+
+      expect(result.current.isLoading).toBe(true);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should handle fetch error', async () => {
+      const errorMessage = 'Network error';
+      getAllProtocols.mockRejectedValue(new Error(errorMessage));
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.protocols).toEqual([]);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(errorMessage);
+    });
+
+    it('should handle fetch error with unknown error type', async () => {
+      getAllProtocols.mockRejectedValue('Unknown error');
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.protocols).toEqual([]);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe('An unknown error occurred');
+    });
+
+    it('should clear previous error on successful fetch', async () => {
+      // First, set an error
+      getAllProtocols.mockRejectedValue(new Error('Initial error'));
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.error).toBe('Initial error');
+
+      // Then, make a successful fetch
+      getAllProtocols.mockResolvedValue(mockApiResponse);
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.error).toBe(null);
+      expect(result.current.protocols).toEqual(mockProtocols);
+    });
+  });
+
+  describe('setSearchQuery', () => {
+    it('should set search query', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.setSearchQuery('fire');
+      });
+
+      expect(result.current.searchQuery).toBe('fire');
+    });
+
+    it('should update search query multiple times', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.setSearchQuery('fire');
+      });
+
+      expect(result.current.searchQuery).toBe('fire');
+
+      act(() => {
+        result.current.setSearchQuery('medical');
+      });
+
+      expect(result.current.searchQuery).toBe('medical');
+    });
+
+    it('should handle empty search query', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.setSearchQuery('fire');
+      });
+
+      expect(result.current.searchQuery).toBe('fire');
+
+      act(() => {
+        result.current.setSearchQuery('');
+      });
+
+      expect(result.current.searchQuery).toBe('');
+    });
+  });
+
+  describe('selectProtocol', () => {
+    it('should select protocol and open details', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.selectProtocol('1');
+      });
+
+      expect(result.current.selectedProtocolId).toBe('1');
+      expect(result.current.isDetailsOpen).toBe(true);
+    });
+
+    it('should select different protocols', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.selectProtocol('1');
+      });
+
+      expect(result.current.selectedProtocolId).toBe('1');
+
+      act(() => {
+        result.current.selectProtocol('2');
+      });
+
+      expect(result.current.selectedProtocolId).toBe('2');
+      expect(result.current.isDetailsOpen).toBe(true);
+    });
+
+    it('should handle empty protocol ID', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.selectProtocol('');
+      });
+
+      expect(result.current.selectedProtocolId).toBe('');
+      expect(result.current.isDetailsOpen).toBe(true);
+    });
+  });
+
+  describe('closeDetails', () => {
+    it('should close details sheet', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      // First, open details
+      act(() => {
+        result.current.selectProtocol('1');
+      });
+
+      expect(result.current.isDetailsOpen).toBe(true);
+
+      // Then close details
+      act(() => {
+        result.current.closeDetails();
+      });
+
+      expect(result.current.isDetailsOpen).toBe(false);
+    });
+
+    it('should close details when already closed', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      expect(result.current.isDetailsOpen).toBe(false);
+
+      act(() => {
+        result.current.closeDetails();
+      });
+
+      expect(result.current.isDetailsOpen).toBe(false);
+    });
+  });
+
+  describe('Store State Persistence', () => {
+    it('should maintain state across multiple hook instances', () => {
+      const { result: result1 } = renderHook(() => useProtocolsStore());
+      const { result: result2 } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result1.current.setSearchQuery('fire');
+      });
+
+      expect(result2.current.searchQuery).toBe('fire');
+
+      act(() => {
+        result2.current.selectProtocol('1');
+      });
+
+      expect(result1.current.selectedProtocolId).toBe('1');
+      expect(result1.current.isDetailsOpen).toBe(true);
+    });
+  });
+
+  describe('Complex State Interactions', () => {
+    it('should handle multiple state changes in sequence', async () => {
+      getAllProtocols.mockResolvedValue(mockApiResponse);
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      // Fetch protocols
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.protocols).toEqual(mockProtocols);
+
+      // Set search query
+      act(() => {
+        result.current.setSearchQuery('fire');
+      });
+
+      expect(result.current.searchQuery).toBe('fire');
+
+      // Select protocol
+      act(() => {
+        result.current.selectProtocol('1');
+      });
+
+      expect(result.current.selectedProtocolId).toBe('1');
+      expect(result.current.isDetailsOpen).toBe(true);
+
+      // Close details
+      act(() => {
+        result.current.closeDetails();
+      });
+
+      expect(result.current.isDetailsOpen).toBe(false);
+      expect(result.current.selectedProtocolId).toBe('1'); // Should remain selected
+    });
+
+    it('should handle concurrent fetchProtocols calls', async () => {
+      getAllProtocols.mockResolvedValue(mockApiResponse);
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      // Start two fetch operations concurrently
+      const promise1 = act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      const promise2 = act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      await Promise.all([promise1, promise2]);
+
+      expect(getAllProtocols).toHaveBeenCalledTimes(2);
+      expect(result.current.protocols).toEqual(mockProtocols);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty protocols response', async () => {
+      const emptyResponse: CallProtocolsResult = {
+        ...mockApiResponse,
+        Data: [],
+      };
+
+      getAllProtocols.mockResolvedValue(emptyResponse);
+
+      const { result } = renderHook(() => useProtocolsStore());
+
+      await act(async () => {
+        await result.current.fetchProtocols();
+      });
+
+      expect(result.current.protocols).toEqual([]);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should handle null protocol ID selection', () => {
+      const { result } = renderHook(() => useProtocolsStore());
+
+      act(() => {
+        result.current.selectProtocol(null as any);
+      });
+
+      expect(result.current.selectedProtocolId).toBe(null);
+      expect(result.current.isDetailsOpen).toBe(true);
+    });
+  });
+});
diff --git a/src/stores/signalr/signalr-store.ts b/src/stores/signalr/signalr-store.ts
index 346d65e..1e046ec 100644
--- a/src/stores/signalr/signalr-store.ts
+++ b/src/stores/signalr/signalr-store.ts
@@ -1,9 +1,13 @@
 import { create } from 'zustand';
 
+import { useAuthStore } from '@/lib';
 import { Env } from '@/lib/env';
 import { logger } from '@/lib/logging';
 import { signalRService } from '@/services/signalr.service';
 
+import { useCoreStore } from '../app/core-store';
+import { securityStore, useSecurityStore } from '../security/store';
+
 interface SignalRState {
   isUpdateHubConnected: boolean;
   lastUpdateMessage: unknown;
@@ -18,7 +22,7 @@ interface SignalRState {
   disconnectGeolocationHub: () => Promise<void>;
 }
 
-export const useSignalRStore = create<SignalRState>((set) => ({
+export const useSignalRStore = create<SignalRState>((set, get) => ({
   isUpdateHubConnected: false,
   lastUpdateMessage: null,
   lastUpdateTimestamp: 0,
@@ -28,6 +32,10 @@ export const useSignalRStore = create<SignalRState>((set) => ({
   error: null,
   connectUpdateHub: async () => {
     try {
+      if (get().isUpdateHubConnected) {
+        return;
+      }
+
       set({ isUpdateHubConnected: false, error: null });
 
       // Connect to the eventing hub
@@ -37,27 +45,55 @@ export const useSignalRStore = create<SignalRState>((set) => ({
         methods: ['personnelStatusUpdated', 'personnelStaffingUpdated', 'unitStatusUpdated', 'callsUpdated', 'callAdded', 'callClosed', 'onConnected'],
       });
 
+      await signalRService.invoke(Env.CHANNEL_HUB_NAME, 'connect', parseInt(securityStore.getState().rights?.DepartmentId ?? '0'));
+
       signalRService.on('personnelStatusUpdated', (message) => {
+        logger.info({
+          message: 'personnelStatusUpdated',
+          context: { message },
+        });
         set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
       });
 
       signalRService.on('personnelStaffingUpdated', (message) => {
+        logger.info({
+          message: 'personnelStaffingUpdated',
+          context: { message },
+        });
         set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
       });
 
       signalRService.on('unitStatusUpdated', (message) => {
+        logger.info({
+          message: 'unitStatusUpdated',
+          context: { message },
+        });
         set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
       });
 
       signalRService.on('callsUpdated', (message) => {
-        set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
+        const now = Date.now();
+
+        logger.info({
+          message: 'callsUpdated',
+          context: { message, now },
+        });
+        set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: now });
       });
 
       signalRService.on('callAdded', (message) => {
+        logger.info({
+          message: 'callAdded',
+          context: { message },
+        });
         set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
       });
 
       signalRService.on('callClosed', (message) => {
+        logger.info({
+          message: 'callClosed',
+          context: { message },
+        });
         set({ lastUpdateMessage: JSON.stringify(message), lastUpdateTimestamp: Date.now() });
       });
 
@@ -91,6 +127,10 @@ export const useSignalRStore = create<SignalRState>((set) => ({
   },
   connectGeolocationHub: async () => {
     try {
+      if (get().isGeolocationHubConnected) {
+        return;
+      }
+
       set({ isGeolocationHubConnected: false, error: null });
 
       // Connect to the geolocation hub
diff --git a/src/stores/status/store.ts b/src/stores/status/store.ts
index 189d0d3..a5fbc8c 100644
--- a/src/stores/status/store.ts
+++ b/src/stores/status/store.ts
@@ -63,6 +63,9 @@ export const useStatusesStore = create<StatusesState>((set) => ({
         status.TimestampUtc = date.toUTCString().replace('UTC', 'GMT');
         status.Note = note;
         await saveUnitStatus(status);
+
+        // Refresh the active unit status after saving
+        await useCoreStore.getState().setActiveUnitWithFetch(activeUnit.UnitId);
       }
       set({ isLoading: false });
     } catch (error) {