diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
index 55a6744b..0a266a6b 100644
--- a/src/app/(app)/index.tsx
+++ b/src/app/(app)/index.tsx
@@ -503,11 +503,11 @@ const styles = StyleSheet.create({
   markerOuterRingPulseWeb:
     Platform.OS === 'web'
       ? {
-        // @ts-ignore — web-only CSS animation properties
-        animationName: 'pulse-ring',
-        animationDuration: '2s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'ease-in-out',
-      }
+          // @ts-ignore — web-only CSS animation properties
+          animationName: 'pulse-ring',
+          animationDuration: '2s',
+          animationIterationCount: 'infinite',
+          animationTimingFunction: 'ease-in-out',
+        }
       : ({} as any),
 });
diff --git a/src/app/call/[id].tsx b/src/app/call/[id].tsx
index 2cea6d80..bc2d7563 100644
--- a/src/app/call/[id].tsx
+++ b/src/app/call/[id].tsx
@@ -5,7 +5,6 @@ import { useColorScheme } from 'nativewind';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import WebView from 'react-native-webview';
 
 import { Loading } from '@/components/common/loading';
 import ZeroState from '@/components/common/zero-state';
@@ -16,6 +15,7 @@ import { Box } from '@/components/ui/box';
 import { Button, ButtonIcon, ButtonText } from '@/components/ui/button';
 import { Heading } from '@/components/ui/heading';
 import { HStack } from '@/components/ui/hstack';
+import { HtmlRenderer } from '@/components/ui/html-renderer';
 import { SharedTabs, type TabItem } from '@/components/ui/shared-tabs';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
@@ -145,17 +145,26 @@ export default function CallDetail() {
 
   useEffect(() => {
     if (call) {
+      // Try Latitude/Longitude first, but validate they are real coordinates
       if (call.Latitude && call.Longitude) {
-        setCoordinates({
-          latitude: parseFloat(call.Latitude),
-          longitude: parseFloat(call.Longitude),
-        });
-      } else if (call.Geolocation) {
-        const [lat, lng] = call.Geolocation.split(',');
-        setCoordinates({
-          latitude: parseFloat(lat),
-          longitude: parseFloat(lng),
-        });
+        const lat = parseFloat(call.Latitude);
+        const lng = parseFloat(call.Longitude);
+        if (!isNaN(lat) && !isNaN(lng) && (lat !== 0 || lng !== 0)) {
+          setCoordinates({ latitude: lat, longitude: lng });
+          return;
+        }
+      }
+
+      // Fall through to Geolocation if Latitude/Longitude are missing or invalid
+      if (call.Geolocation) {
+        const parts = call.Geolocation.split(',');
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0].trim());
+          const lng = parseFloat(parts[1].trim());
+          if (!isNaN(lat) && !isNaN(lng)) {
+            setCoordinates({ latitude: lat, longitude: lng });
+          }
+        }
       }
     }
   }, [call]);
@@ -186,7 +195,7 @@ export default function CallDetail() {
    * Opens the device's native maps application with directions to the call location
    */
   const handleRoute = async () => {
-    if (!coordinates.latitude || !coordinates.longitude) {
+    if (coordinates.latitude === null || coordinates.longitude === null) {
       showToast('error', t('call_detail.no_location_for_routing'));
       return;
     }
@@ -300,37 +309,7 @@ export default function CallDetail() {
               <Box className="border-b border-outline-100 pb-2">
                 <Text className="text-sm text-gray-500">{t('call_detail.note')}</Text>
                 <Box>
-                  <WebView
-                    style={[styles.container, { height: 200 }]}
-                    originWhitelist={['*']}
-                    scrollEnabled={false}
-                    showsVerticalScrollIndicator={false}
-                    source={{
-                      html: `
-                                <!DOCTYPE html>
-                                <html>
-                                  <head>
-                                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                                    <style>
-                                      body {
-                                        color: ${textColor};
-                                        font-family: system-ui, -apple-system, sans-serif;
-                                        margin: 0;
-                                        padding: 0;
-                                        font-size: 16px;
-                                        line-height: 1.5;
-                                      }
-                                      * {
-                                        max-width: 100%;
-                                      }
-                                    </style>
-                                  </head>
-                                  <body>${call.Note}</body>
-                                </html>
-                              `,
-                    }}
-                    androidLayerType="software"
-                  />
+                  <HtmlRenderer html={call.Note ?? ''} style={StyleSheet.flatten([styles.container, { height: 200 }])} />
                 </Box>
               </Box>
             </VStack>
@@ -377,37 +356,7 @@ export default function CallDetail() {
                     <Text className="font-semibold">{protocol.Name}</Text>
                     <Text className="text-sm text-gray-600">{protocol.Description}</Text>
                     <Box>
-                      <WebView
-                        style={[styles.container, { height: 200 }]}
-                        originWhitelist={['*']}
-                        scrollEnabled={false}
-                        showsVerticalScrollIndicator={false}
-                        source={{
-                          html: `
-                                <!DOCTYPE html>
-                                <html>
-                                  <head>
-                                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                                    <style>
-                                      body {
-                                        color: ${textColor};
-                                        font-family: system-ui, -apple-system, sans-serif;
-                                        margin: 0;
-                                        padding: 0;
-                                        font-size: 16px;
-                                        line-height: 1.5;
-                                      }
-                                      * {
-                                        max-width: 100%;
-                                      }
-                                    </style>
-                                  </head>
-                                  <body>${protocol.ProtocolText}</body>
-                                </html>
-                              `,
-                        }}
-                        androidLayerType="software"
-                      />
+                      <HtmlRenderer html={protocol.ProtocolText ?? ''} style={StyleSheet.flatten([styles.container, { height: 200 }])} />
                     </Box>
                   </Box>
                 ))}
@@ -506,45 +455,17 @@ export default function CallDetail() {
           </HStack>
           <VStack className="space-y-1">
             <Box style={{ height: 80 }}>
-              <WebView
-                style={[styles.container, { height: 80 }]}
-                originWhitelist={['*']}
-                scrollEnabled={false}
-                showsVerticalScrollIndicator={false}
-                source={{
-                  html: `
-                                <!DOCTYPE html>
-                                <html>
-                                  <head>
-                                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                                    <style>
-                                      body {
-                                        color: ${textColor};
-                                        font-family: system-ui, -apple-system, sans-serif;
-                                        margin: 0;
-                                        padding: 0;
-                                        font-size: 16px;
-                                        line-height: 1.5;
-                                      }
-                                      * {
-                                        max-width: 100%;
-                                      }
-                                    </style>
-                                  </head>
-                                  <body>${call.Nature}</body>
-                                </html>
-                              `,
-                }}
-                androidLayerType="software"
-              />
+              <HtmlRenderer html={call.Nature ?? ''} style={StyleSheet.flatten([styles.container, { height: 80 }])} />
             </Box>
           </VStack>
         </Box>
 
-        {/* Map */}
-        <Box className="w-full">
-          {coordinates.latitude && coordinates.longitude ? <StaticMap latitude={coordinates.latitude} longitude={coordinates.longitude} address={call.Address} zoom={15} height={200} showUserLocation={true} /> : null}
-        </Box>
+        {/* Map - only show when valid coordinates exist */}
+        {coordinates.latitude !== null && coordinates.longitude !== null ? (
+          <Box className="w-full">
+            <StaticMap latitude={coordinates.latitude} longitude={coordinates.longitude} address={call.Address} zoom={15} height={200} showUserLocation={true} />
+          </Box>
+        ) : null}
 
         {/* Action Buttons */}
         <HStack className={`justify-around p-4 shadow-sm ${colorScheme === 'dark' ? 'bg-neutral-900' : 'bg-neutral-100'}`}>
diff --git a/src/app/call/__tests__/[id].security.test.tsx b/src/app/call/__tests__/[id].security.test.tsx
index 522dc596..014cf8db 100644
--- a/src/app/call/__tests__/[id].security.test.tsx
+++ b/src/app/call/__tests__/[id].security.test.tsx
@@ -9,6 +9,12 @@ jest.mock('react-native', () => ({
   ScrollView: ({ children, ...props }: any) => <div {...props}>{children}</div>,
   StyleSheet: {
     create: (styles: any) => styles,
+    flatten: (styles: any) => {
+      if (Array.isArray(styles)) {
+        return Object.assign({}, ...styles.filter(Boolean));
+      }
+      return styles || {};
+    },
   },
   useWindowDimensions: () => ({ width: 375, height: 812 }),
   View: ({ children, ...props }: any) => <div {...props}>{children}</div>,
@@ -273,10 +279,10 @@ jest.mock('@/lib/navigation', () => ({
   openMapsWithDirections: jest.fn().mockResolvedValue(true),
 }));
 
-// Mock WebView
-jest.mock('react-native-webview', () => ({
+// Mock HtmlRenderer
+jest.mock('@/components/ui/html-renderer', () => ({
   __esModule: true,
-  default: () => <div data-testid="webview">WebView</div>,
+  HtmlRenderer: () => <div data-testid="html-renderer">HtmlRenderer</div>,
 }));
 
 // Mock date-fns
@@ -317,7 +323,7 @@ describe('CallDetail', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    
+
     // Setup stores as selector-based stores
     useCallDetailStore.mockImplementation((selector: any) => {
       if (selector) {
@@ -325,37 +331,37 @@ describe('CallDetail', () => {
       }
       return mockCallDetailStore;
     });
-    
+
     useSecurityStore.mockImplementation((selector: any) => typeof selector === 'function' ? selector(mockSecurityStore) : mockSecurityStore);
-    
+
     useCoreStore.mockImplementation((selector: any) => {
       if (selector) {
         return selector(mockCoreStore);
       }
       return mockCoreStore;
     });
-    
+
     useLocationStore.mockImplementation((selector: any) => {
       if (selector) {
         return selector(mockLocationStore);
       }
       return mockLocationStore;
     });
-    
+
     useStatusBottomSheetStore.mockImplementation((selector: any) => {
       if (selector) {
         return selector(mockStatusBottomSheetStore);
       }
       return mockStatusBottomSheetStore;
     });
-    
+
     useToastStore.mockImplementation((selector: any) => {
       if (selector) {
         return selector(mockToastStore);
       }
       return mockToastStore;
     });
-    
+
     // Setup securityStore as a selector-based store
     securityStore.mockImplementation((selector: any) => {
       const state = {
diff --git a/src/app/call/__tests__/[id].test.tsx b/src/app/call/__tests__/[id].test.tsx
index 8e311d77..2e6cc00b 100644
--- a/src/app/call/__tests__/[id].test.tsx
+++ b/src/app/call/__tests__/[id].test.tsx
@@ -197,10 +197,10 @@ jest.mock('date-fns', () => ({
   format: jest.fn(() => '2024-01-01 12:00'),
 }));
 
-// Mock react-native-webview
-jest.mock('react-native-webview', () => ({
+// Mock HtmlRenderer
+jest.mock('@/components/ui/html-renderer', () => ({
   __esModule: true,
-  default: 'WebView',
+  HtmlRenderer: 'HtmlRenderer',
 }));
 
 jest.mock('@/hooks/use-analytics', () => ({
diff --git a/src/components/calls/call-card.tsx b/src/components/calls/call-card.tsx
index dd3dd5e8..d1d4dce0 100644
--- a/src/components/calls/call-card.tsx
+++ b/src/components/calls/call-card.tsx
@@ -1,10 +1,10 @@
 import { AlertTriangle, MapPin, Phone } from 'lucide-react-native';
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import WebView from 'react-native-webview';
 
 import { Box } from '@/components/ui/box';
 import { HStack } from '@/components/ui/hstack';
+import { HtmlRenderer } from '@/components/ui/html-renderer';
 import { Icon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
@@ -101,37 +101,7 @@ export const CallCard: React.FC<CallCardProps> = ({ call, priority }) => {
       {/* Nature of Call */}
       {call.Nature && (
         <Box className="mt-4 rounded-lg bg-white/50 p-3">
-          <WebView
-            style={[styles.container, { height: 80 }]}
-            originWhitelist={['*']}
-            scrollEnabled={false}
-            showsVerticalScrollIndicator={false}
-            source={{
-              html: `
-                <!DOCTYPE html>
-                <html>
-                  <head>
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                    <style>
-                      body {
-                        color: ${textColor};
-                        font-family: system-ui, -apple-system, sans-serif;
-                        margin: 0;
-                        padding: 0;
-                        font-size: 16px;
-                        line-height: 1.5;
-                      }
-                      * {
-                        max-width: 100%;
-                      }
-                    </style>
-                  </head>
-                  <body>${call.Nature}</body>
-                </html>
-              `,
-            }}
-            androidLayerType="software"
-          />
+          <HtmlRenderer html={call.Nature} style={StyleSheet.flatten([styles.container, { height: 80 }])} textColor={textColor} />
         </Box>
       )}
     </Box>
diff --git a/src/components/contacts/__tests__/contact-details-sheet.test.tsx b/src/components/contacts/__tests__/contact-details-sheet.test.tsx
index 43ef5ff1..f140d0c7 100644
--- a/src/components/contacts/__tests__/contact-details-sheet.test.tsx
+++ b/src/components/contacts/__tests__/contact-details-sheet.test.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import { ContactDetailsSheet } from '../contact-details-sheet';
 import { ContactType, type ContactResultData } from '@/models/v4/contacts/contactResultData';
 
-// Mock react-native-webview
-jest.mock('react-native-webview', () => {
+// Mock HtmlRenderer
+jest.mock('@/components/ui/html-renderer', () => {
   const { View } = require('react-native');
   return {
     __esModule: true,
-    default: (props: any) => <View testID="mock-webview" {...props} />,
+    HtmlRenderer: (props: any) => <View testID="mock-webview" {...props} />,
   };
 });
 
diff --git a/src/components/contacts/__tests__/contact-notes-list.test.tsx b/src/components/contacts/__tests__/contact-notes-list.test.tsx
index aa895678..fb02c792 100644
--- a/src/components/contacts/__tests__/contact-notes-list.test.tsx
+++ b/src/components/contacts/__tests__/contact-notes-list.test.tsx
@@ -13,25 +13,22 @@ jest.mock('react-i18next', () => ({
   }),
 }));
 
-// Mock react-native-webview
-jest.mock('react-native-webview', () => {
+// Mock HtmlRenderer
+jest.mock('@/components/ui/html-renderer', () => {
   const React = require('react');
   const { View, Text } = require('react-native');
 
   return {
     __esModule: true,
-    default: React.forwardRef((props: any, ref: any) => {
-      // Extract HTML content from source.html for testing
-      const htmlContent = props.source?.html || '';
+    HtmlRenderer: (props: any) => {
+      const htmlContent = props.html || '';
       // Simple extraction of text content from HTML (removing tags)
       const textContent = htmlContent.replace(/<[^>]*>/g, '').trim();
 
       return React.createElement(View, {
-        ...props,
-        ref,
-        testID: props.testID || 'webview',
+        testID: 'webview',
       }, React.createElement(Text, { testID: 'webview-content' }, textContent));
-    }),
+    },
   };
 });
 
diff --git a/src/components/contacts/contact-notes-list.tsx b/src/components/contacts/contact-notes-list.tsx
index fcfc3572..ed49df11 100644
--- a/src/components/contacts/contact-notes-list.tsx
+++ b/src/components/contacts/contact-notes-list.tsx
@@ -3,8 +3,8 @@ import { useColorScheme } from 'nativewind';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Linking, ScrollView, StyleSheet } from 'react-native';
-import { WebView } from 'react-native-webview';
 
+import { HtmlRenderer } from '@/components/ui/html-renderer';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { type ContactNoteResultData } from '@/models/v4/contacts/contactNoteResultData';
 import { useContactsStore } from '@/stores/contacts/store';
@@ -31,8 +31,6 @@ const ContactNoteCard: React.FC<ContactNoteCardProps> = ({ note }) => {
   const isInternal = note.Visibility === 0;
 
   const { colorScheme } = useColorScheme();
-  const textColor = colorScheme === 'dark' ? '#FFFFFF' : '#000000';
-  const backgroundColor = colorScheme === 'dark' ? '#374151' : '#F9FAFB';
 
   const formatDate = (dateString: string) => {
     try {
@@ -83,120 +81,73 @@ const ContactNoteCard: React.FC<ContactNoteCardProps> = ({ note }) => {
               {noteContent}
             </Text>
           ) : (
-            <WebView
+            <HtmlRenderer
+              html={noteContent}
               style={styles.webView}
-              // Security: Only allow local content, no external origins
-              originWhitelist={['about:']}
               scrollEnabled={true}
               showsVerticalScrollIndicator={true}
-              showsHorizontalScrollIndicator={false}
-              androidLayerType="software"
-              // Security: Disable JavaScript and DOM storage by default
-              // Only re-enable for pre-sanitized, trusted content that requires it
-              javaScriptEnabled={false}
-              domStorageEnabled={false}
-              startInLoadingState={false}
-              mixedContentMode="compatibility"
-              // Security: Handle navigation to prevent in-WebView navigation and open external links safely
-              onShouldStartLoadWithRequest={(request) => {
-                // Allow initial load of our HTML content
-                if (request.url.startsWith('about:') || request.url.startsWith('data:')) {
-                  return true;
+              onLinkPress={(url) => Linking.openURL(url)}
+              customCSS={`
+                html, body {
+                  width: 100%;
+                  height: auto;
+                  min-height: 100%;
+                  word-wrap: break-word;
+                  overflow-wrap: break-word;
+                  box-sizing: border-box;
                 }
-
-                // For any external links, open in system browser instead
-                Linking.openURL(request.url);
-                return false;
-              }}
-              onNavigationStateChange={(navState) => {
-                // Additional protection: if navigation occurs to external URL, open in system browser
-                if (navState.url && !navState.url.startsWith('about:') && !navState.url.startsWith('data:')) {
-                  Linking.openURL(navState.url);
+                p, div, span {
+                  margin: 0 0 12px 0;
+                }
+                p:last-child, div:last-child {
+                  margin-bottom: 0;
+                }
+                img {
+                  max-width: 100%;
+                  height: auto;
+                }
+                a {
+                  color: ${colorScheme === 'dark' ? '#60A5FA' : '#3B82F6'};
+                  text-decoration: none;
+                }
+                a:hover {
+                  text-decoration: underline;
+                }
+                ul, ol {
+                  padding-left: 20px;
+                  margin: 12px 0;
+                }
+                li {
+                  margin: 4px 0;
+                }
+                blockquote {
+                  border-left: 4px solid ${colorScheme === 'dark' ? '#60A5FA' : '#3B82F6'};
+                  margin: 12px 0;
+                  padding-left: 16px;
+                  font-style: italic;
+                }
+                pre, code {
+                  background-color: ${colorScheme === 'dark' ? '#1F2937' : '#F3F4F6'};
+                  padding: 8px;
+                  border-radius: 4px;
+                  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+                  font-size: 14px;
+                }
+                table {
+                  width: 100%;
+                  border-collapse: collapse;
+                  margin: 12px 0;
+                }
+                th, td {
+                  border: 1px solid ${colorScheme === 'dark' ? '#374151' : '#E5E7EB'};
+                  padding: 8px;
+                  text-align: left;
+                }
+                th {
+                  background-color: ${colorScheme === 'dark' ? '#1F2937' : '#F9FAFB'};
+                  font-weight: bold;
                 }
-              }}
-              source={{
-                html: `
-                  <!DOCTYPE html>
-                  <html>
-                    <head>
-                      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-                      <style>
-                        html, body {
-                          margin: 0;
-                          padding: 12px;
-                          width: 100%;
-                          height: auto;
-                          min-height: 100%;
-                          color: ${textColor};
-                          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-                          font-size: 16px;
-                          line-height: 1.6;
-                          word-wrap: break-word;
-                          overflow-wrap: break-word;
-                          background-color: transparent;
-                          box-sizing: border-box;
-                        }
-                        * {
-                          max-width: 100%;
-                          box-sizing: border-box;
-                        }
-                        p, div, span {
-                          margin: 0 0 12px 0;
-                        }
-                        p:last-child, div:last-child {
-                          margin-bottom: 0;
-                        }
-                        img {
-                          max-width: 100%;
-                          height: auto;
-                        }
-                        a {
-                          color: ${colorScheme === 'dark' ? '#60A5FA' : '#3B82F6'};
-                          text-decoration: none;
-                        }
-                        a:hover {
-                          text-decoration: underline;
-                        }
-                        ul, ol {
-                          padding-left: 20px;
-                          margin: 12px 0;
-                        }
-                        li {
-                          margin: 4px 0;
-                        }
-                        blockquote {
-                          border-left: 4px solid ${colorScheme === 'dark' ? '#60A5FA' : '#3B82F6'};
-                          margin: 12px 0;
-                          padding-left: 16px;
-                          font-style: italic;
-                        }
-                        pre, code {
-                          background-color: ${colorScheme === 'dark' ? '#1F2937' : '#F3F4F6'};
-                          padding: 8px;
-                          border-radius: 4px;
-                          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-                          font-size: 14px;
-                        }
-                        table {
-                          width: 100%;
-                          border-collapse: collapse;
-                          margin: 12px 0;
-                        }
-                        th, td {
-                          border: 1px solid ${colorScheme === 'dark' ? '#374151' : '#E5E7EB'};
-                          padding: 8px;
-                          text-align: left;
-                        }
-                        th {
-                          background-color: ${colorScheme === 'dark' ? '#1F2937' : '#F9FAFB'};
-                          font-weight: bold;
-                        }
-                      </style>
-                    </head>
-                    <body>${noteContent}</body>
-                  </html>
-                `,
-              }}
+              `}
             />
           )}
         </Box>
diff --git a/src/components/maps/map-view.web.tsx b/src/components/maps/map-view.web.tsx
index f6faf427..689bdba5 100644
--- a/src/components/maps/map-view.web.tsx
+++ b/src/components/maps/map-view.web.tsx
@@ -54,6 +54,10 @@ interface MapViewProps {
   rotateEnabled?: boolean;
   scrollEnabled?: boolean;
   pitchEnabled?: boolean;
+  /** Initial center [lng, lat] passed to the map constructor so it starts at the right place */
+  initialCenter?: [number, number];
+  /** Initial zoom level passed to the map constructor */
+  initialZoom?: number;
 }
 
 // MapView component
@@ -73,68 +77,222 @@ export const MapView = forwardRef<any, MapViewProps>(
       rotateEnabled = true,
       scrollEnabled = true,
       pitchEnabled = true,
+      initialCenter,
+      initialZoom,
     },
     ref
   ) => {
     const mapContainer = useRef<HTMLDivElement>(null);
     const map = useRef<any | null>(null);
     const [isLoaded, setIsLoaded] = useState(false);
+    const [hasSize, setHasSize] = useState(false);
 
     useImperativeHandle(ref, () => ({
       getMap: () => map.current,
     }));
 
+    // Wait until the container has non-zero dimensions before initializing mapbox-gl.
+    // Mapbox crashes with "null is not an object (evaluating 'r[3]')" in its
+    // projection-matrix code when the container has 0×0 size.
     useEffect(() => {
-      if (map.current || !mapContainer.current) return;
-
-      const newMap = new mapboxgl.Map({
-        container: mapContainer.current,
-        style: styleURL,
-        center: [-98.5795, 39.8283], // Default US center
-        zoom: 4,
-        attributionControl: attributionEnabled,
-        logoPosition: logoEnabled ? 'bottom-left' : undefined,
-        dragRotate: rotateEnabled,
-        scrollZoom: zoomEnabled,
-        dragPan: scrollEnabled,
-        pitchWithRotate: pitchEnabled,
+      const el = mapContainer.current;
+      if (!el) return;
+
+      const check = () => {
+        if (el.clientWidth > 0 && el.clientHeight > 0) {
+          setHasSize(true);
+          return true;
+        }
+        return false;
+      };
+
+      // Already has size (common path)
+      if (check()) return;
+
+      // Watch for layout via ResizeObserver
+      const ro = new ResizeObserver(() => {
+        if (check()) {
+          ro.disconnect();
+        }
       });
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
 
-      if (!logoEnabled) {
-        // Hide logo via CSS if not enabled
-        newMap.on('load', () => {
-          const logoEl = mapContainer.current?.querySelector('.mapboxgl-ctrl-logo');
-          if (logoEl) {
-            (logoEl as HTMLElement).style.display = 'none';
-          }
+    useEffect(() => {
+      if (!hasSize || map.current || !mapContainer.current) return;
+
+      // Double-check the container actually has layout dimensions.
+      // mapbox-gl's projection matrix code will throw if the canvas is 0×0.
+      const { clientWidth, clientHeight } = mapContainer.current;
+      if (clientWidth === 0 || clientHeight === 0) return;
+
+      try {
+        // Use initialCenter/initialZoom if provided so the map starts at the
+        // correct position without needing a programmatic camera move later.
+        const startCenter = initialCenter && isFinite(initialCenter[0]) && isFinite(initialCenter[1]) ? initialCenter : ([-98.5795, 39.8283] as [number, number]); // Default US center
+        const startZoom = initialZoom != null && isFinite(initialZoom) ? initialZoom : 4;
+
+        const newMap = new mapboxgl.Map({
+          container: mapContainer.current,
+          style: styleURL,
+          center: startCenter,
+          zoom: startZoom,
+          attributionControl: attributionEnabled,
+          logoPosition: logoEnabled ? 'bottom-left' : undefined,
+          dragRotate: rotateEnabled,
+          scrollZoom: zoomEnabled,
+          dragPan: scrollEnabled,
+          pitchWithRotate: pitchEnabled,
         });
-      }
 
-      if (compassEnabled) {
-        newMap.addControl(new mapboxgl.NavigationControl({ showCompass: true, showZoom: false }), 'top-right');
-      }
+        if (!logoEnabled) {
+          // Hide logo via CSS if not enabled
+          newMap.on('load', () => {
+            const logoEl = mapContainer.current?.querySelector('.mapboxgl-ctrl-logo');
+            if (logoEl) {
+              (logoEl as HTMLElement).style.display = 'none';
+            }
+          });
+        }
 
-      newMap.on('load', () => {
-        setIsLoaded(true);
-        onDidFinishLoadingMap?.();
-      });
+        if (compassEnabled) {
+          newMap.addControl(new mapboxgl.NavigationControl({ showCompass: true, showZoom: false }), 'top-right');
+        }
 
-      newMap.on('moveend', (e: any) => {
-        // mapbox-gl propagates eventData from easeTo/flyTo into the event object.
-        // We tag all programmatic camera moves with { _programmatic: true } so the
-        // moveend handler can distinguish them from real user interactions.
-        const wasUser = !e._programmatic;
-        onCameraChanged?.({ properties: { isUserInteraction: wasUser } });
-      });
+        newMap.on('load', () => {
+          setIsLoaded(true);
+          onDidFinishLoadingMap?.();
+        });
 
-      map.current = newMap;
+        newMap.on('moveend', (e: any) => {
+          // mapbox-gl propagates eventData from easeTo/flyTo into the event object.
+          // We tag all programmatic camera moves with { _programmatic: true } so the
+          // moveend handler can distinguish them from real user interactions.
+          const wasUser = !e._programmatic;
+          onCameraChanged?.({ properties: { isUserInteraction: wasUser } });
+        });
+
+        map.current = newMap;
+
+        // Patch unproject to gracefully handle NaN results.
+        // mapbox-gl's internal mouse event handlers (mouseout, mousemove, etc.)
+        // call map.unproject() which throws "Invalid LngLat object: (NaN, NaN)"
+        // when the canvas/transform is in an invalid state (zero-size, mid-resize).
+        // These DOM events fire synchronously and can't be caught by error events
+        // or the _render patch below.
+        const origUnproject = newMap.unproject.bind(newMap);
+        newMap.unproject = (point: unknown) => {
+          try {
+            return origUnproject(point);
+          } catch {
+            // Return a safe fallback LngLat (0,0) instead of crashing
+            return new mapboxgl.LngLat(0, 0);
+          }
+        };
+
+        // Patch easeTo / flyTo to catch "Invalid LngLat object: (NaN, NaN)"
+        // errors that occur when resetNorth or other compass interactions read
+        // a corrupted transform center (e.g. after resize or animation race).
+        const origEaseTo = newMap.easeTo.bind(newMap);
+        newMap.easeTo = function (options: any, eventData?: any) {
+          try {
+            return origEaseTo(options, eventData);
+          } catch (e: any) {
+            if (e?.message?.includes('Invalid LngLat')) {
+              return this;
+            }
+            throw e;
+          }
+        };
+
+        const origFlyTo = newMap.flyTo.bind(newMap);
+        newMap.flyTo = function (options: any, eventData?: any) {
+          try {
+            return origFlyTo(options, eventData);
+          } catch (e: any) {
+            if (e?.message?.includes('Invalid LngLat')) {
+              return this;
+            }
+            throw e;
+          }
+        };
+
+        // Patch the internal _render method to gracefully handle zero-size
+        // containers. mapbox-gl v3 crashes in _calcMatrices → fromInvProjectionMatrix
+        // ("null is not an object evaluating r[3]") when the canvas has 0×0
+        // dimensions (e.g. during route transitions or before layout completes).
+        const origRender = newMap._render;
+        if (typeof origRender === 'function') {
+          newMap._render = function (...args: unknown[]) {
+            try {
+              // eslint-disable-next-line react/no-this-in-sfc
+              const canvas = this.getCanvas?.();
+              if (canvas && (canvas.width === 0 || canvas.height === 0)) {
+                return this; // skip frame when canvas is zero-sized
+              }
+              return origRender.apply(this, args);
+            } catch {
+              // Suppress projection-matrix errors from zero-size containers
+              return this;
+            }
+          };
+        }
+
+        // Suppress non-fatal mapbox-gl error events (e.g. "Invalid LngLat object: (NaN, NaN)")
+        // that occur when mouse events fire while the map canvas is resizing.
+        newMap.on('error', (e: { error?: Error }) => {
+          const msg = e.error?.message ?? '';
+          if (msg.includes('Invalid LngLat')) {
+            return;
+          }
+          console.warn('[MapView.web] mapbox-gl error:', e.error);
+        });
+      } catch (e) {
+        // mapbox-gl can throw during initialization if the container is not
+        // properly laid out (e.g. zero-size canvas). We silently ignore this;
+        // the map will simply not render rather than crash the app.
+        console.warn('[MapView.web] Failed to initialize mapbox-gl:', e);
+      }
 
       return () => {
-        map.current?.remove();
-        map.current = null;
+        // Mark the map as removed so child components can detect it
+        if (map.current) {
+          (map.current as any).__removed = true;
+          map.current.remove();
+          map.current = null;
+        }
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [hasSize]);
+
+    // Keep the map canvas in sync with container size changes.
+    // Also do an immediate resize so the canvas matches the container
+    // before any mouse events can fire (prevents NaN unproject errors).
+    useEffect(() => {
+      if (!map.current || !mapContainer.current) return;
+
+      // Only resize when the container has non-zero dimensions.
+      // Calling resize() with a zero-size container sets invalid dimensions
+      // on mapbox's internal transform, causing _calcMatrices to crash.
+      const safeResize = () => {
+        const el = mapContainer.current;
+        if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+          try {
+            map.current?.resize();
+          } catch {
+            // ignore resize errors during teardown
+          }
+        }
+      };
+
+      // Immediate resize to sync canvas with current container size
+      safeResize();
+
+      const ro = new ResizeObserver(() => safeResize());
+      ro.observe(mapContainer.current);
+      return () => ro.disconnect();
+    }, [isLoaded]);
 
     // Update style when it changes
     useEffect(() => {
@@ -144,7 +302,18 @@ export const MapView = forwardRef<any, MapViewProps>(
     }, [styleURL]);
 
     return (
-      <div ref={mapContainer} data-testid={testID} style={{ width: '100%', height: '100%', ...style }}>
+      <div
+        ref={mapContainer}
+        data-testid={testID}
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          ...style,
+          // Ensure the container is never zero-height on web
+          minHeight: style?.height || style?.minHeight || 100,
+        }}
+      >
         {isLoaded && <MapContext.Provider value={map.current}>{children}</MapContext.Provider>}
       </div>
     );
@@ -169,14 +338,20 @@ interface CameraProps {
 }
 
 // Camera component
-export const Camera = forwardRef<any, CameraProps>(({ centerCoordinate, zoomLevel, heading, pitch, animationDuration = 1000, followUserLocation, followZoomLevel }, ref) => {
+export const Camera = forwardRef<any, CameraProps>(({ centerCoordinate, zoomLevel, heading, pitch, animationDuration = 1000, animationMode, followUserLocation, followZoomLevel }, ref) => {
   const map = React.useContext(MapContext);
   const geolocateControl = useRef<any | null>(null);
+  const hasInitialized = useRef(false);
 
   useImperativeHandle(ref, () => ({
     setCamera: (options: { centerCoordinate?: [number, number]; zoomLevel?: number; heading?: number; pitch?: number; animationDuration?: number }) => {
       if (!map) return;
 
+      // Validate coordinates before passing to mapbox
+      if (options.centerCoordinate && (!isFinite(options.centerCoordinate[0]) || !isFinite(options.centerCoordinate[1]))) {
+        return;
+      }
+
       map.easeTo(
         {
           center: options.centerCoordinate,
@@ -190,6 +365,12 @@ export const Camera = forwardRef<any, CameraProps>(({ centerCoordinate, zoomLeve
     },
     flyTo: (options: any) => {
       if (!map) return;
+
+      // Validate center if provided
+      if (options.center && Array.isArray(options.center) && (!isFinite(options.center[0]) || !isFinite(options.center[1]))) {
+        return;
+      }
+
       map.flyTo(options, { _programmatic: true });
     },
   }));
@@ -197,19 +378,34 @@ export const Camera = forwardRef<any, CameraProps>(({ centerCoordinate, zoomLeve
   useEffect(() => {
     if (!map) return;
 
-    if (centerCoordinate) {
-      map.easeTo(
-        {
-          center: centerCoordinate,
-          zoom: zoomLevel,
-          bearing: heading,
-          pitch: pitch,
-          duration: animationDuration,
-        },
-        { _programmatic: true }
-      );
+    if (centerCoordinate && centerCoordinate.length === 2 && isFinite(centerCoordinate[0]) && isFinite(centerCoordinate[1])) {
+      // Skip the first render — the MapView already initialized at the correct
+      // position via initialCenter/initialZoom, so no programmatic move needed.
+      if (!hasInitialized.current) {
+        hasInitialized.current = true;
+        return;
+      }
+
+      // For subsequent coordinate/zoom changes, animate to the new position.
+      const cameraOptions = {
+        center: centerCoordinate as [number, number],
+        zoom: zoomLevel,
+        bearing: heading,
+        pitch: pitch,
+        duration: animationDuration,
+      };
+
+      try {
+        if (animationMode === 'flyTo') {
+          map.flyTo(cameraOptions, { _programmatic: true });
+        } else {
+          map.easeTo(cameraOptions, { _programmatic: true });
+        }
+      } catch {
+        // Suppress projection-matrix errors during resize/transition
+      }
     }
-  }, [map, centerCoordinate, zoomLevel, heading, pitch, animationDuration]);
+  }, [map, centerCoordinate, zoomLevel, heading, pitch, animationDuration, animationMode]);
 
   useEffect(() => {
     if (!map || !followUserLocation) return;
@@ -238,7 +434,11 @@ export const Camera = forwardRef<any, CameraProps>(({ centerCoordinate, zoomLeve
         clearTimeout(triggerTimeoutId);
       }
       if (geolocateControl.current) {
-        map.removeControl(geolocateControl.current);
+        try {
+          map.removeControl(geolocateControl.current);
+        } catch {
+          // map may already be destroyed during route transitions
+        }
         geolocateControl.current = null;
       }
     };
@@ -321,7 +521,7 @@ export const PointAnnotation: React.FC<PointAnnotationProps> = ({ id, coordinate
 
   // Update coordinate when values actually change (by value, not reference)
   useEffect(() => {
-    if (markerRef.current && coordinate) {
+    if (markerRef.current && coordinate && coordinate.length === 2 && isFinite(coordinate[0]) && isFinite(coordinate[1])) {
       markerRef.current.setLngLat(coordinate);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -382,13 +582,21 @@ export const UserLocation: React.FC<UserLocationProps> = ({ visible = true, show
       map.on('load', onMapLoad);
 
       return () => {
-        map.off('load', onMapLoad);
-        map.removeControl(geolocate);
+        try {
+          map.off('load', onMapLoad);
+          map.removeControl(geolocate);
+        } catch {
+          // map may already be destroyed during route transitions
+        }
       };
     }
 
     return () => {
-      map.removeControl(geolocate);
+      try {
+        map.removeControl(geolocate);
+      } catch {
+        // map may already be destroyed during route transitions
+      }
     };
   }, [map, visible, showsUserHeadingIndicator]);
 
diff --git a/src/components/maps/static-map.tsx b/src/components/maps/static-map.tsx
index 13a90374..c6b48620 100644
--- a/src/components/maps/static-map.tsx
+++ b/src/components/maps/static-map.tsx
@@ -1,7 +1,7 @@
 import { useColorScheme } from 'nativewind';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import Mapbox from '@/components/maps/mapbox';
 import { Box } from '@/components/ui/box';
@@ -29,19 +29,22 @@ const StaticMap: React.FC<StaticMapProps> = ({ latitude, longitude, address, zoo
 
   if (!latitude || !longitude) {
     return (
-      <Box style={[styles.container, { height }]} className="items-center justify-center bg-gray-200">
+      <Box style={StyleSheet.flatten([styles.container, { height }])} className="items-center justify-center bg-gray-200">
         <Text className="text-gray-500">{t('call_detail.no_location')}</Text>
       </Box>
     );
   }
 
   return (
-    <Box style={[styles.container, { height }]}>
-      <Mapbox.MapView style={styles.map} styleURL={mapStyle} logoEnabled={false} attributionEnabled={false} compassEnabled={true} zoomEnabled={true} rotateEnabled={true}>
+    <Box style={StyleSheet.flatten([styles.container, { height }])}>
+      <Mapbox.MapView style={StyleSheet.flatten([styles.map, { height }])} styleURL={mapStyle} logoEnabled={false} attributionEnabled={false} compassEnabled={true} zoomEnabled={true} rotateEnabled={true}>
         <Mapbox.Camera zoomLevel={zoom} centerCoordinate={[longitude, latitude]} animationMode="flyTo" animationDuration={1000} />
-        {/* Marker for the location */}
+        {/* Marker pin for the location */}
         <Mapbox.PointAnnotation id="destinationPoint" coordinate={[longitude, latitude]} title={address || 'Location'}>
-          <Box />
+          <View style={styles.markerContainer}>
+            <View style={styles.markerPin} />
+            <View style={styles.markerDot} />
+          </View>
         </Mapbox.PointAnnotation>
 
         {/* Show user location if requested */}
@@ -67,6 +70,42 @@ const styles = StyleSheet.create({
   map: {
     flex: 1,
   },
+  markerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 30,
+    height: 40,
+  },
+  markerPin: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#E53E3E',
+    borderWidth: 3,
+    borderColor: '#FFFFFF',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 3,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+  markerDot: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderTopWidth: 8,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: '#E53E3E',
+    marginTop: -2,
+  },
   addressContainer: {
     position: 'absolute',
     bottom: 0,
diff --git a/src/components/notes/__tests__/note-details-sheet.test.tsx b/src/components/notes/__tests__/note-details-sheet.test.tsx
index 347aae4f..0683c807 100644
--- a/src/components/notes/__tests__/note-details-sheet.test.tsx
+++ b/src/components/notes/__tests__/note-details-sheet.test.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 
 import { NoteDetailsSheet } from '../note-details-sheet';
 
-// Mock react-native-webview
-jest.mock('react-native-webview', () => {
+// Mock HtmlRenderer
+jest.mock('@/components/ui/html-renderer', () => {
   const { View } = require('react-native');
   return {
     __esModule: true,
-    default: View,
+    HtmlRenderer: View,
   };
 });
 
diff --git a/src/components/notes/note-details-sheet.tsx b/src/components/notes/note-details-sheet.tsx
index 0c11144b..4d5a34de 100644
--- a/src/components/notes/note-details-sheet.tsx
+++ b/src/components/notes/note-details-sheet.tsx
@@ -1,10 +1,9 @@
 import { Calendar, Tag, X } from 'lucide-react-native';
-import { useColorScheme } from 'nativewind';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
-import WebView from 'react-native-webview';
 
+import { HtmlRenderer } from '@/components/ui/html-renderer';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { formatDateForDisplay, parseDateISOString } from '@/lib/utils';
 import { useNotesStore } from '@/stores/notes/store';
@@ -20,7 +19,6 @@ import { VStack } from '../ui/vstack';
 
 export const NoteDetailsSheet: React.FC = () => {
   const { t } = useTranslation();
-  const { colorScheme } = useColorScheme();
   const { trackEvent } = useAnalytics();
   const notes = useNotesStore((s) => s.notes);
   const selectedNoteId = useNotesStore((s) => s.selectedNoteId);
@@ -45,8 +43,6 @@ export const NoteDetailsSheet: React.FC = () => {
 
   if (!selectedNote) return null;
 
-  const textColor = colorScheme === 'dark' ? '#E5E7EB' : '#1F2937'; // gray-200 : gray-800
-
   return (
     <Actionsheet isOpen={isDetailsOpen} onClose={closeDetails} snapPoints={[67]}>
       <ActionsheetBackdrop />
@@ -66,40 +62,9 @@ export const NoteDetailsSheet: React.FC = () => {
           </HStack>
 
           <VStack space="md" className="flex-1">
-            {/* Note content in WebView */}
+            {/* Note content */}
             <Box className="w-full flex-1 rounded-lg bg-gray-50 p-1 dark:bg-gray-700">
-              <WebView
-                style={[styles.container, { height: 120 }]}
-                originWhitelist={['*']}
-                scrollEnabled={false}
-                showsVerticalScrollIndicator={false}
-                source={{
-                  html: `
-                    <!DOCTYPE html>
-                    <html>
-                      <head>
-                        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                        <style>
-                          body {
-                            color: ${textColor};
-                            font-family: system-ui, -apple-system, sans-serif;
-                            margin: 0;
-                            padding: 8px;
-                            font-size: 16px;
-                            line-height: 1.5;
-                            background-color: ${colorScheme === 'dark' ? '#374151' : '#F9FAFB'};
-                          }
-                          * {
-                            max-width: 100%;
-                          }
-                        </style>
-                      </head>
-                      <body>${selectedNote.Body}</body>
-                    </html>
-                  `,
-                }}
-                androidLayerType="software"
-              />
+              <HtmlRenderer html={selectedNote?.Body ?? ''} style={StyleSheet.flatten([styles.container, { height: 120 }])} />
             </Box>
 
             <Divider />
diff --git a/src/components/protocols/__tests__/protocol-details-sheet.test.tsx b/src/components/protocols/__tests__/protocol-details-sheet.test.tsx
index fac68c20..792de21f 100644
--- a/src/components/protocols/__tests__/protocol-details-sheet.test.tsx
+++ b/src/components/protocols/__tests__/protocol-details-sheet.test.tsx
@@ -25,13 +25,38 @@ jest.mock('nativewind', () => ({
   cssInterop: jest.fn(),
 }));
 
-jest.mock('react-native-webview', () => ({
+jest.mock('@/components/ui/html-renderer', () => ({
   __esModule: true,
-  default: ({ source }: { source: any }) => {
+  HtmlRenderer: ({ html, ...rest }: { html: string;[key: string]: any }) => {
     const { View, Text } = require('react-native');
+    // Mirror the real component's theme-aware defaults (light mode in test)
+    const textColor = rest.textColor || '#1F2937';
+    const bgColor = rest.backgroundColor || '#F9FAFB';
     return (
       <View testID="webview">
-        <Text testID="webview-content">{source.html}</Text>
+        <Text testID="webview-content">{`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+        <style>
+          body {
+            color: ${textColor};
+            font-family: system-ui, -apple-system, sans-serif;
+            margin: 0;
+            padding: 8px;
+            font-size: 16px;
+            line-height: 1.5;
+            background-color: ${bgColor};
+          }
+          * {
+            max-width: 100%;
+          }
+        </style>
+      </head>
+      <body>${html}</body>
+    </html>
+  `}</Text>
       </View>
     );
   },
diff --git a/src/components/protocols/protocol-details-sheet.tsx b/src/components/protocols/protocol-details-sheet.tsx
index d99978c3..0b34cacf 100644
--- a/src/components/protocols/protocol-details-sheet.tsx
+++ b/src/components/protocols/protocol-details-sheet.tsx
@@ -1,9 +1,8 @@
 import { Calendar, Tag, X } from 'lucide-react-native';
-import { useColorScheme } from 'nativewind';
 import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
-import WebView from 'react-native-webview';
 
+import { HtmlRenderer } from '@/components/ui/html-renderer';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { formatDateForDisplay, parseDateISOString, stripHtmlTags } from '@/lib/utils';
 import { useProtocolsStore } from '@/stores/protocols/store';
@@ -18,7 +17,6 @@ import { Text } from '../ui/text';
 import { VStack } from '../ui/vstack';
 
 export const ProtocolDetailsSheet: React.FC = () => {
-  const { colorScheme } = useColorScheme();
   const { trackEvent } = useAnalytics();
   const protocols = useProtocolsStore((s) => s.protocols);
   const selectedProtocolId = useProtocolsStore((s) => s.selectedProtocolId);
@@ -50,8 +48,6 @@ export const ProtocolDetailsSheet: React.FC = () => {
     );
   }
 
-  const textColor = colorScheme === 'dark' ? '#E5E7EB' : '#1F2937'; // gray-200 : gray-800
-
   return (
     <Actionsheet isOpen={isDetailsOpen} onClose={closeDetails} snapPoints={[67]}>
       <ActionsheetBackdrop />
@@ -86,42 +82,12 @@ export const ProtocolDetailsSheet: React.FC = () => {
               </Box>
             )}
 
-            {/* Protocol content in WebView */}
-            <Box className="w-full flex-1 rounded-lg bg-gray-50 p-1 dark:bg-gray-700">
-              <WebView
-                key={selectedProtocolId}
-                style={styles.container}
-                originWhitelist={['*']}
-                scrollEnabled={true}
-                showsVerticalScrollIndicator={true}
-                source={{
-                  html: `
-                    <!DOCTYPE html>
-                    <html>
-                      <head>
-                        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-                        <style>
-                          body {
-                            color: ${textColor};
-                            font-family: system-ui, -apple-system, sans-serif;
-                            margin: 0;
-                            padding: 8px;
-                            font-size: 16px;
-                            line-height: 1.5;
-                            background-color: ${colorScheme === 'dark' ? '#374151' : '#F9FAFB'};
-                          }
-                          * {
-                            max-width: 100%;
-                          }
-                        </style>
-                      </head>
-                      <body>${selectedProtocol.ProtocolText}</body>
-                    </html>
-                  `,
-                }}
-                androidLayerType="software"
-              />
-            </Box>
+            {/* Protocol content */}
+            {selectedProtocol.ProtocolText && (
+              <Box className="w-full flex-1 rounded-lg bg-gray-50 p-1 dark:bg-gray-700">
+                <HtmlRenderer html={selectedProtocol.ProtocolText} style={styles.container} scrollEnabled={true} showsVerticalScrollIndicator={true} rendererKey={selectedProtocolId ?? undefined} />
+              </Box>
+            )}
 
             <Divider />
 
diff --git a/src/components/ui/box/index.web.tsx b/src/components/ui/box/index.web.tsx
index aa0fa86c..f20566fc 100644
--- a/src/components/ui/box/index.web.tsx
+++ b/src/components/ui/box/index.web.tsx
@@ -1,12 +1,14 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 
 import { boxStyle } from './styles';
 
-type IBoxProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof boxStyle> & { className?: string };
+type IBoxProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof boxStyle> & { className?: string; style?: StyleProp<ViewStyle> };
 
-const Box = React.forwardRef<HTMLDivElement, IBoxProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} className={boxStyle({ class: className })} {...props} />;
+const Box = React.forwardRef<HTMLDivElement, IBoxProps>(({ className, style, ...props }, ref) => {
+  const flatStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+  return <div ref={ref} className={boxStyle({ class: className })} style={flatStyle as React.CSSProperties} {...props} />;
 });
 
 Box.displayName = 'Box';
diff --git a/src/components/ui/card/index.web.tsx b/src/components/ui/card/index.web.tsx
index 3ffa137a..948ba6f2 100644
--- a/src/components/ui/card/index.web.tsx
+++ b/src/components/ui/card/index.web.tsx
@@ -1,12 +1,14 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 
 import { cardStyle } from './styles';
 
-type ICardProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof cardStyle>;
+type ICardProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof cardStyle> & { style?: StyleProp<ViewStyle> };
 
-const Card = React.forwardRef<HTMLDivElement, ICardProps>(({ className, size = 'md', variant = 'elevated', ...props }, ref) => {
-  return <div className={cardStyle({ size, variant, class: className })} {...props} ref={ref} />;
+const Card = React.forwardRef<HTMLDivElement, ICardProps>(({ className, size = 'md', variant = 'elevated', style, ...props }, ref) => {
+  const flatStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+  return <div className={cardStyle({ size, variant, class: className })} style={flatStyle as React.CSSProperties} {...props} ref={ref} />;
 });
 
 Card.displayName = 'Card';
diff --git a/src/components/ui/center/index.web.tsx b/src/components/ui/center/index.web.tsx
index 0a010efb..b8c8786b 100644
--- a/src/components/ui/center/index.web.tsx
+++ b/src/components/ui/center/index.web.tsx
@@ -1,12 +1,14 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 
 import { centerStyle } from './styles';
 
-type ICenterProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof centerStyle>;
+type ICenterProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof centerStyle> & { style?: StyleProp<ViewStyle> };
 
-const Center = React.forwardRef<HTMLDivElement, ICenterProps>(({ className, ...props }, ref) => {
-  return <div className={centerStyle({ class: className })} {...props} ref={ref} />;
+const Center = React.forwardRef<HTMLDivElement, ICenterProps>(({ className, style, ...props }, ref) => {
+  const flatStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+  return <div className={centerStyle({ class: className })} style={flatStyle as React.CSSProperties} {...props} ref={ref} />;
 });
 
 Center.displayName = 'Center';
diff --git a/src/components/ui/hstack/index.web.tsx b/src/components/ui/hstack/index.web.tsx
index 2f457f59..843f4526 100644
--- a/src/components/ui/hstack/index.web.tsx
+++ b/src/components/ui/hstack/index.web.tsx
@@ -1,12 +1,14 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 
 import { hstackStyle } from './styles';
 
-type IHStackProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof hstackStyle>;
+type IHStackProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof hstackStyle> & { style?: StyleProp<ViewStyle> };
 
-const HStack = React.forwardRef<React.ElementRef<'div'>, IHStackProps>(({ className, space, reversed, ...props }, ref) => {
-  return <div className={hstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
+const HStack = React.forwardRef<React.ElementRef<'div'>, IHStackProps>(({ className, space, reversed, style, ...props }, ref) => {
+  const flatStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+  return <div className={hstackStyle({ space, reversed, class: className })} style={flatStyle as React.CSSProperties} {...props} ref={ref} />;
 });
 
 HStack.displayName = 'HStack';
diff --git a/src/components/ui/html-renderer/__tests__/html-renderer.test.tsx b/src/components/ui/html-renderer/__tests__/html-renderer.test.tsx
new file mode 100644
index 00000000..8ba04fbe
--- /dev/null
+++ b/src/components/ui/html-renderer/__tests__/html-renderer.test.tsx
@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+// Mock nativewind useColorScheme — default to light mode
+let mockColorScheme = 'light';
+jest.mock('nativewind', () => ({
+  useColorScheme: () => ({ colorScheme: mockColorScheme }),
+  cssInterop: jest.fn(),
+}));
+
+// Mock react-native-webview before importing HtmlRenderer
+jest.mock('react-native-webview', () => {
+  const { View, Text } = require('react-native');
+  return {
+    __esModule: true,
+    default: ({ source, ...rest }: { source: { html: string };[key: string]: any }) => (
+      <View testID="native-webview" {...rest}>
+        <Text testID="webview-html">{source.html}</Text>
+      </View>
+    ),
+  };
+});
+
+import { HtmlRenderer } from '../index';
+
+describe('HtmlRenderer (native)', () => {
+  beforeEach(() => {
+    mockColorScheme = 'light';
+  });
+
+  it('should render WebView with the provided HTML content', () => {
+    render(<HtmlRenderer html="<p>Hello World</p>" />);
+
+    const htmlContent = screen.getByTestId('webview-html');
+    expect(htmlContent.props.children).toContain('<p>Hello World</p>');
+    expect(htmlContent.props.children).toContain('<!DOCTYPE html>');
+  });
+
+  it('should apply custom textColor override', () => {
+    render(<HtmlRenderer html="<p>Colored</p>" textColor="#FF0000" />);
+
+    const htmlContent = screen.getByTestId('webview-html');
+    expect(htmlContent.props.children).toContain('color: #FF0000');
+  });
+
+  it('should apply custom backgroundColor override', () => {
+    render(<HtmlRenderer html="<p>BG</p>" backgroundColor="#333333" />);
+
+    const htmlContent = screen.getByTestId('webview-html');
+    expect(htmlContent.props.children).toContain('background-color: #333333');
+  });
+
+  describe('light mode defaults', () => {
+    it('should use light theme text color when not specified', () => {
+      render(<HtmlRenderer html="<p>Light</p>" />);
+
+      const htmlContent = screen.getByTestId('webview-html');
+      expect(htmlContent.props.children).toContain('color: #1F2937');
+    });
+
+    it('should use light theme background color when not specified', () => {
+      render(<HtmlRenderer html="<p>Light BG</p>" />);
+
+      const htmlContent = screen.getByTestId('webview-html');
+      expect(htmlContent.props.children).toContain('background-color: transparent');
+    });
+  });
+
+  describe('dark mode defaults', () => {
+    beforeEach(() => {
+      mockColorScheme = 'dark';
+    });
+
+    it('should use dark theme text color when not specified', () => {
+      render(<HtmlRenderer html="<p>Dark</p>" />);
+
+      const htmlContent = screen.getByTestId('webview-html');
+      expect(htmlContent.props.children).toContain('color: #E5E7EB');
+    });
+
+    it('should use dark theme background color when not specified', () => {
+      render(<HtmlRenderer html="<p>Dark BG</p>" />);
+
+      const htmlContent = screen.getByTestId('webview-html');
+      expect(htmlContent.props.children).toContain('background-color: transparent');
+    });
+
+    it('should allow overriding colors in dark mode', () => {
+      render(<HtmlRenderer html="<p>Override</p>" textColor="#FFFFFF" backgroundColor="#000000" />);
+
+      const htmlContent = screen.getByTestId('webview-html');
+      expect(htmlContent.props.children).toContain('color: #FFFFFF');
+      expect(htmlContent.props.children).toContain('background-color: #000000');
+    });
+  });
+
+  it('should render the full HTML structure including viewport meta', () => {
+    render(<HtmlRenderer html="<div>Test</div>" />);
+
+    const htmlContent = screen.getByTestId('webview-html');
+    expect(htmlContent.props.children).toContain('<meta name="viewport"');
+    expect(htmlContent.props.children).toContain('<html>');
+    expect(htmlContent.props.children).toContain('<body>');
+    expect(htmlContent.props.children).toContain('<div>Test</div>');
+  });
+
+  it('should include responsive CSS styles', () => {
+    render(<HtmlRenderer html="<p>Responsive</p>" />);
+
+    const htmlContent = screen.getByTestId('webview-html');
+    expect(htmlContent.props.children).toContain('max-width: 100%');
+    expect(htmlContent.props.children).toContain('font-family: system-ui, -apple-system, sans-serif');
+  });
+});
diff --git a/src/components/ui/html-renderer/index.tsx b/src/components/ui/html-renderer/index.tsx
new file mode 100644
index 00000000..62cccfe3
--- /dev/null
+++ b/src/components/ui/html-renderer/index.tsx
@@ -0,0 +1,128 @@
+import { useColorScheme } from 'nativewind';
+import React from 'react';
+import { Linking, type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
+import WebView from 'react-native-webview';
+
+/** Light / dark theme color tokens used when no explicit override is provided */
+const THEME_COLORS = {
+  light: { text: '#1F2937', background: 'transparent' }, // gray-800
+  dark: { text: '#E5E7EB', background: 'transparent' }, // gray-200
+} as const;
+
+export interface HtmlRendererProps {
+  /** The raw HTML string to render inside the body tag */
+  html: string;
+  /** Optional inline style applied to the container */
+  style?: StyleProp<ViewStyle>;
+  /** Whether scrolling is enabled (default: false) */
+  scrollEnabled?: boolean;
+  /** Whether to show the vertical scroll indicator (default: false) */
+  showsVerticalScrollIndicator?: boolean;
+  /** Text color applied to the body – defaults to a theme-aware gray */
+  textColor?: string;
+  /** Background color applied to the body – defaults to a theme-aware gray */
+  backgroundColor?: string;
+  /** Optional React key for forcing re-renders */
+  rendererKey?: string;
+  /** Additional CSS injected inside the <style> block after the defaults */
+  customCSS?: string;
+  /** Callback when a link is tapped – if provided, external links are opened via
+   *  this callback instead of in-webview navigation. Falls back to Linking.openURL. */
+  onLinkPress?: (url: string) => void;
+  /** Whether JavaScript is enabled in the webview (default: false for security) */
+  javaScriptEnabled?: boolean;
+  /** Whether DOM storage is enabled in the webview (default: false) */
+  domStorageEnabled?: boolean;
+}
+
+/**
+ * Cross-platform HTML content renderer.
+ *
+ * On iOS and Android this delegates to `react-native-webview`.
+ * On web and Electron the `.web.tsx` variant is resolved instead.
+ *
+ * Text and background colors are theme-aware by default (light / dark)
+ * but can be overridden via props for custom use-cases.
+ */
+export const HtmlRenderer: React.FC<HtmlRendererProps> = ({
+  html,
+  style,
+  scrollEnabled = false,
+  showsVerticalScrollIndicator = false,
+  textColor,
+  backgroundColor,
+  rendererKey,
+  customCSS = '',
+  onLinkPress,
+  javaScriptEnabled = false,
+  domStorageEnabled = false,
+}) => {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === 'dark' ? THEME_COLORS.dark : THEME_COLORS.light;
+  const resolvedTextColor = textColor ?? theme.text;
+  const resolvedBgColor = backgroundColor ?? theme.background;
+
+  const fullHtml = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+        <style>
+          body {
+            color: ${resolvedTextColor};
+            font-family: system-ui, -apple-system, sans-serif;
+            margin: 0;
+            padding: 8px;
+            font-size: 16px;
+            line-height: 1.5;
+            background-color: ${resolvedBgColor};
+          }
+          * {
+            max-width: 100%;
+          }
+          ${customCSS}
+        </style>
+      </head>
+      <body>${html}</body>
+    </html>
+  `;
+
+  const handleLinkPress = onLinkPress ?? ((url: string) => Linking.openURL(url));
+
+  return (
+    <WebView
+      key={rendererKey}
+      style={StyleSheet.flatten([styles.container, style])}
+      originWhitelist={onLinkPress ? ['about:'] : ['*']}
+      scrollEnabled={scrollEnabled}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      source={{ html: fullHtml }}
+      androidLayerType="software"
+      javaScriptEnabled={javaScriptEnabled}
+      domStorageEnabled={domStorageEnabled}
+      {...(onLinkPress
+        ? {
+            onShouldStartLoadWithRequest: (request: { url: string }) => {
+              if (request.url.startsWith('about:') || request.url.startsWith('data:')) {
+                return true;
+              }
+              handleLinkPress(request.url);
+              return false;
+            },
+            onNavigationStateChange: (navState: { url: string }) => {
+              if (navState.url && !navState.url.startsWith('about:') && !navState.url.startsWith('data:')) {
+                handleLinkPress(navState.url);
+              }
+            },
+          }
+        : {})}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'transparent',
+  },
+});
diff --git a/src/components/ui/html-renderer/index.web.tsx b/src/components/ui/html-renderer/index.web.tsx
new file mode 100644
index 00000000..dd9cbd9e
--- /dev/null
+++ b/src/components/ui/html-renderer/index.web.tsx
@@ -0,0 +1,163 @@
+import { useColorScheme } from 'nativewind';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Linking, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+
+/** Light / dark theme color tokens used when no explicit override is provided */
+const THEME_COLORS = {
+  light: { text: '#1F2937', background: 'transparent' }, // gray-800
+  dark: { text: '#E5E7EB', background: 'transparent' }, // gray-200
+} as const;
+
+export interface HtmlRendererProps {
+  /** The raw HTML string to render inside the body tag */
+  html: string;
+  /** Optional inline style applied to the container */
+  style?: StyleProp<ViewStyle>;
+  /** Whether scrolling is enabled (default: false) */
+  scrollEnabled?: boolean;
+  /** Whether to show the vertical scroll indicator (default: false) */
+  showsVerticalScrollIndicator?: boolean;
+  /** Text color applied to the body – defaults to a theme-aware gray */
+  textColor?: string;
+  /** Background color applied to the body – defaults to a theme-aware gray */
+  backgroundColor?: string;
+  /** Optional React key for forcing re-renders */
+  rendererKey?: string;
+  /** Additional CSS injected inside the <style> block after the defaults */
+  customCSS?: string;
+  /** Callback when a link is tapped – links are opened via window.open on web */
+  onLinkPress?: (url: string) => void;
+  /** Whether JavaScript is enabled (ignored on web – sandbox controls this) */
+  javaScriptEnabled?: boolean;
+  /** Whether DOM storage is enabled (ignored on web) */
+  domStorageEnabled?: boolean;
+}
+
+/**
+ * Cross-platform HTML content renderer – **web & Electron** variant.
+ *
+ * Renders the HTML inside a sandboxed `<iframe>` using `srcDoc` so that
+ * no external navigation is possible and the content is fully isolated.
+ *
+ * Text and background colors are theme-aware by default (light / dark)
+ * but can be overridden via props for custom use-cases.
+ */
+export const HtmlRenderer: React.FC<HtmlRendererProps> = ({ html, style, scrollEnabled = false, showsVerticalScrollIndicator = false, textColor, backgroundColor, rendererKey, customCSS = '', onLinkPress }) => {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === 'dark' ? THEME_COLORS.dark : THEME_COLORS.light;
+  const resolvedTextColor = textColor ?? theme.text;
+  const resolvedBgColor = backgroundColor ?? theme.background;
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // When onLinkPress is provided, inject a small script to intercept link clicks
+  // and post a message to the parent window.
+  const linkScript = onLinkPress
+    ? `<script>
+        document.addEventListener('click', function(e) {
+          var anchor = e.target.closest('a');
+          if (anchor && anchor.href) {
+            e.preventDefault();
+            window.parent.postMessage({ type: 'html-renderer-link', url: anchor.href }, '*');
+          }
+        });
+      </script>`
+    : '';
+
+  const fullHtml = useMemo(
+    () => `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+        <style>
+          html, body {
+            margin: 0;
+            padding: 0;
+            overflow: ${scrollEnabled ? 'auto' : 'hidden'};
+            background-color: transparent;
+          }
+          body {
+            color: ${resolvedTextColor};
+            font-family: system-ui, -apple-system, sans-serif;
+            padding: 8px;
+            font-size: 16px;
+            line-height: 1.5;
+            background-color: ${resolvedBgColor};
+          }
+          ${!showsVerticalScrollIndicator
+        ? `
+          ::-webkit-scrollbar { display: none; }
+          body { -ms-overflow-style: none; scrollbar-width: none; }
+          `
+        : ''
+      }
+          * {
+            max-width: 100%;
+          }
+          ${customCSS}
+        </style>
+      </head>
+      <body>${html}${linkScript}</body>
+    </html>
+  `,
+    [html, scrollEnabled, showsVerticalScrollIndicator, resolvedTextColor, resolvedBgColor, customCSS, linkScript]
+  );
+
+  // Listen for link-click messages from the iframe
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      // Validate message origin/source - only accept messages from our trusted iframe
+      if (event.data?.type === 'html-renderer-link' && event.data.url && event.source === iframeRef.current?.contentWindow) {
+        if (onLinkPress) {
+          onLinkPress(event.data.url);
+        } else {
+          Linking.openURL(event.data.url);
+        }
+      }
+    },
+    [onLinkPress]
+  );
+
+  React.useEffect(() => {
+    if (!onLinkPress) return;
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [onLinkPress, handleMessage]);
+
+  const flatStyle = StyleSheet.flatten([styles.container, style]) as Record<string, unknown>;
+
+  // When onLinkPress is provided we need allow-scripts so the click-interceptor runs
+  const sandboxValue = onLinkPress ? 'allow-same-origin allow-scripts' : 'allow-same-origin';
+
+  const iframeStyle: React.CSSProperties = {
+    border: 'none',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'transparent',
+    colorScheme: 'normal',
+  };
+
+  return (
+    <View style={flatStyle} key={rendererKey}>
+      <iframe
+        ref={iframeRef}
+        srcDoc={fullHtml}
+        sandbox={sandboxValue}
+        title="html-content"
+        // @ts-expect-error -- allowTransparency is a valid HTML attribute but not in React's iframe types
+        // eslint-disable-next-line react/no-unknown-property
+        allowTransparency="true"
+        style={iframeStyle}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'transparent',
+  },
+});
diff --git a/src/components/ui/shared-tabs.tsx b/src/components/ui/shared-tabs.tsx
index d16bb25f..c92d39b3 100644
--- a/src/components/ui/shared-tabs.tsx
+++ b/src/components/ui/shared-tabs.tsx
@@ -85,7 +85,7 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
   const getTabStyles = (index: number) => {
     const isActive = index === currentIndex;
 
-    const baseStyles = 'flex-1 flex items-center justify-center';
+    const baseStyles = 'flex flex-row items-center justify-center';
     const sizeStyles = {
       sm: isLandscape ? 'px-3 py-1.5 text-xs' : 'px-2 py-1 text-2xs',
       md: isLandscape ? 'px-4 py-2 text-sm' : 'px-3 py-1.5 text-xs',
@@ -104,7 +104,7 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
 
   // Container styles based on variant
   const getContainerStyles = () => {
-    const baseStyles = 'flex flex-row flex-1';
+    const baseStyles = 'flex flex-row';
 
     const variantStyles = {
       default: colorScheme === 'dark' ? 'border-b border-gray-700' : 'border-b border-gray-200',
@@ -124,7 +124,7 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
     const styles = StyleSheet.create({
       container: {
         flexDirection: 'row',
-        flex: 1,
+        flexGrow: 1,
         ...(variant === 'default' && { borderBottomWidth: 1, borderBottomColor: borderColor }),
         ...(variant === 'pills' && { gap: 8, padding: 4 }),
         ...(variant === 'underlined' && { borderBottomWidth: 1, borderBottomColor: borderColor }),
@@ -135,10 +135,10 @@ export const SharedTabs: React.FC<SharedTabsProps> = ({
   };
 
   return (
-    <Box className={`flex-1 ${className}`}>
+    <Box className={className}>
       {/* Tab Headers */}
       {scrollable ? (
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={getContainerStyle()}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0 }} contentContainerStyle={getContainerStyle()}>
           {tabs.map((tab, index) => (
             <Pressable key={tab.key} className={getTabStyles(index)} onPress={() => handleTabPress(index)}>
               {tab.icon && <Box className={isLandscape ? 'mr-1.5' : 'mr-1'}>{tab.icon}</Box>}
diff --git a/src/components/ui/vstack/index.web.tsx b/src/components/ui/vstack/index.web.tsx
index 90061d6e..fca2ad21 100644
--- a/src/components/ui/vstack/index.web.tsx
+++ b/src/components/ui/vstack/index.web.tsx
@@ -1,12 +1,14 @@
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
+import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
 
 import { vstackStyle } from './styles';
 
-type IVStackProps = React.ComponentProps<'div'> & VariantProps<typeof vstackStyle>;
+type IVStackProps = React.ComponentProps<'div'> & VariantProps<typeof vstackStyle> & { style?: StyleProp<ViewStyle> };
 
-const VStack = React.forwardRef<React.ComponentRef<'div'>, IVStackProps>(function VStack({ className, space, reversed, ...props }, ref) {
-  return <div className={vstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
+const VStack = React.forwardRef<React.ComponentRef<'div'>, IVStackProps>(function VStack({ className, space, reversed, style, ...props }, ref) {
+  const flatStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
+  return <div className={vstackStyle({ space, reversed, class: className })} style={flatStyle as React.CSSProperties} {...props} ref={ref} />;
 });
 
 VStack.displayName = 'VStack';