diff --git a/app/jest.config.cjs b/app/jest.config.cjs
index b97823593..efc667b63 100644
--- a/app/jest.config.cjs
+++ b/app/jest.config.cjs
@@ -6,7 +6,7 @@ module.exports = {
   preset: 'react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz|@sentry|@anon-aadhaar|react-native-svg|react-native-svg-circle-country-flags)/)',
+    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz|@sentry|@anon-aadhaar|react-native-svg|react-native-svg-circle-country-flags|react-native-webview|react-native-safe-area-context|react-native-haptic-feedback|react-native-localize|lottie-react-native|@tamagui)/)',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$',
@@ -19,6 +19,13 @@ module.exports = {
     '^@tests$': '<rootDir>/tests/src',
     // Map react-native-svg to app's node_modules for all packages
     '^react-native-svg$': '<rootDir>/node_modules/react-native-svg',
+    // Map Tamagui icons to app's node_modules (peer dependency of mobile-sdk-alpha)
+    '^@tamagui/lucide-icons$': '<rootDir>/node_modules/@tamagui/lucide-icons',
+    // Map react-native-webview to app's node_modules (peer dependency of mobile-sdk-alpha)
+    '^react-native-webview$': '<rootDir>/node_modules/react-native-webview',
+    // Mock PixelRatio for React Native (needed by StyleSheet and SDK components)
+    '^react-native/Libraries/Utilities/PixelRatio$':
+      '<rootDir>/tests/__setup__/pixelRatioMock.js',
     '^@selfxyz/mobile-sdk-alpha$':
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/index.cjs',
     '^@selfxyz/mobile-sdk-alpha/components$':
diff --git a/app/jest.setup.js b/app/jest.setup.js
index 646d693eb..787d2a3c9 100644
--- a/app/jest.setup.js
+++ b/app/jest.setup.js
@@ -125,6 +125,26 @@ jest.mock(
   { virtual: true },
 );
 
+// Also mock PixelRatio in the main React Native module for bundled SDK code
+jest.mock('react-native/Libraries/Utilities/PixelRatio', () => ({
+  get: jest.fn(() => 2),
+  getFontScale: jest.fn(() => 1),
+  getPixelSizeForLayoutSize: jest.fn(layoutSize => layoutSize * 2),
+  roundToNearestPixel: jest.fn(layoutSize => Math.round(layoutSize * 2) / 2),
+  startDetecting: jest.fn(),
+}));
+
+// Ensure PixelRatio is available in React Native exports for bundled SDK code
+const RN = require('react-native');
+
+RN.PixelRatio = {
+  get: jest.fn(() => 2),
+  getFontScale: jest.fn(() => 1),
+  getPixelSizeForLayoutSize: jest.fn(layoutSize => layoutSize * 2),
+  roundToNearestPixel: jest.fn(layoutSize => Math.round(layoutSize * 2) / 2),
+  startDetecting: jest.fn(),
+};
+
 // Mock mobile-sdk-alpha's StyleSheet module directly
 jest.mock(
   '../packages/mobile-sdk-alpha/node_modules/react-native/Libraries/StyleSheet/StyleSheet',
@@ -858,6 +878,9 @@ jest.mock('@tamagui/lucide-icons', () => {
     __esModule: true,
     ExternalLink: makeIcon('external-link'),
     X: makeIcon('x'),
+    ArrowLeft: makeIcon('arrow-left'),
+    ArrowRight: makeIcon('arrow-right'),
+    RotateCcw: makeIcon('rotate-ccw'),
   };
 });
 
diff --git a/app/tests/__setup__/pixelRatioMock.js b/app/tests/__setup__/pixelRatioMock.js
new file mode 100644
index 000000000..45cbd63d8
--- /dev/null
+++ b/app/tests/__setup__/pixelRatioMock.js
@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+// Mock PixelRatio module for Jest tests
+module.exports = {
+  get: jest.fn(() => 2),
+  getFontScale: jest.fn(() => 1),
+  getPixelSizeForLayoutSize: jest.fn(layoutSize => layoutSize * 2),
+  roundToNearestPixel: jest.fn(layoutSize => Math.round(layoutSize * 2) / 2),
+  startDetecting: jest.fn(),
+};
diff --git a/packages/mobile-sdk-alpha/.eslintrc.cjs b/packages/mobile-sdk-alpha/.eslintrc.cjs
index d8cb2e125..253e50934 100644
--- a/packages/mobile-sdk-alpha/.eslintrc.cjs
+++ b/packages/mobile-sdk-alpha/.eslintrc.cjs
@@ -64,7 +64,13 @@ module.exports = {
     'import/newline-after-import': 'error',
     'import/no-duplicates': 'error',
     'import/export': 'off',
-    'import/no-unresolved': ['error', { caseSensitive: true }],
+    'import/no-unresolved': [
+      'error',
+      {
+        caseSensitive: true,
+        ignore: ['react-native-webview', 'react-native-safe-area-context', '@tamagui/lucide-icons'],
+      },
+    ],
     'import/namespace': 'error',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-require-imports': 'error',
diff --git a/packages/mobile-sdk-alpha/package.json b/packages/mobile-sdk-alpha/package.json
index b97185255..69b659ba2 100644
--- a/packages/mobile-sdk-alpha/package.json
+++ b/packages/mobile-sdk-alpha/package.json
@@ -123,6 +123,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@tamagui/lucide-icons": "^1.135.3",
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -144,18 +145,23 @@
     "react-native": "0.76.9",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-localize": "^3.5.2",
+    "react-native-svg": "^15.14.0",
     "react-native-web": "^0.21.1",
+    "react-native-webview": "^13.16.0",
     "tsup": "^8.0.1",
     "typescript": "^5.9.2",
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
+    "@tamagui/lucide-icons": "*",
     "lottie-react-native": "7.2.2",
     "react": "^18.3.1",
     "react-native": "0.76.9",
     "react-native-haptic-feedback": "*",
     "react-native-localize": "*",
-    "react-native-svg": "*"
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-webview": "*"
   },
   "packageManager": "yarn@4.6.0",
   "publishConfig": {
diff --git a/packages/mobile-sdk-alpha/src/components/index.ts b/packages/mobile-sdk-alpha/src/components/index.ts
index 3fc20fb86..3baefb39d 100644
--- a/packages/mobile-sdk-alpha/src/components/index.ts
+++ b/packages/mobile-sdk-alpha/src/components/index.ts
@@ -3,6 +3,9 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 export type { ViewProps } from './layout/View';
+export type { WebViewFooterProps } from './webview/WebViewFooter';
+export type { WebViewNavBarProps } from './webview/WebViewNavBar';
+export type { WebViewScreenParams, WebViewScreenProps } from './webview/WebViewScreen';
 
 export { default as AbstractButton } from './buttons/AbstractButton';
 
@@ -40,6 +43,11 @@ export { Title } from './typography/Title';
 
 export { View } from './layout/View';
 
+// WebView components
+export { WebViewFooter } from './webview/WebViewFooter';
+export { WebViewNavBar } from './webview/WebViewNavBar';
+export { WebViewScreen } from './webview/WebViewScreen';
+
 export { XStack } from './layout/XStack';
 
 // Export types
diff --git a/packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx b/packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx
new file mode 100644
index 000000000..2f367140e
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/components/webview/WebViewFooter.tsx
@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import type React from 'react';
+
+import { black, slate50, slate400 } from '../../constants/colors';
+import { buttonTap } from '../../haptic';
+import { Button } from '../layout/Button';
+import { XStack } from '../layout/XStack';
+import { YStack } from '../layout/YStack';
+
+import { ArrowLeft, ArrowRight, RotateCcw } from '@tamagui/lucide-icons';
+
+export interface WebViewFooterProps {
+  canGoBack: boolean;
+  canGoForward: boolean;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onReload: () => void;
+  onOpenInBrowser: () => void;
+}
+
+const iconSize = 22;
+const buttonSize = 36;
+
+export const WebViewFooter: React.FC<WebViewFooterProps> = ({
+  canGoBack,
+  canGoForward,
+  onGoBack,
+  onGoForward,
+  onReload,
+  onOpenInBrowser: _onOpenInBrowser,
+}) => {
+  const renderIconButton = (key: string, icon: React.ReactNode, onPress: () => void, disabled?: boolean) => (
+    <Button
+      key={key}
+      size="$4"
+      unstyled
+      disabled={disabled}
+      onPress={() => {
+        buttonTap();
+        onPress();
+      }}
+      backgroundColor={slate50}
+      borderRadius={buttonSize / 2}
+      width={buttonSize}
+      height={buttonSize}
+      alignItems="center"
+      justifyContent="center"
+      opacity={disabled ? 0.5 : 1}
+    >
+      {icon}
+    </Button>
+  );
+
+  return (
+    <YStack gap={12} paddingVertical={12} width="100%">
+      <XStack justifyContent="space-between" alignItems="center" width="100%">
+        {renderIconButton(
+          'back',
+          <ArrowLeft size={iconSize} color={canGoBack ? black : slate400} />,
+          onGoBack,
+          !canGoBack,
+        )}
+        {renderIconButton('reload', <RotateCcw size={iconSize} color={black} />, onReload)}
+        {renderIconButton(
+          'forward',
+          <ArrowRight size={iconSize} color={canGoForward ? black : slate400} />,
+          onGoForward,
+          !canGoForward,
+        )}
+      </XStack>
+    </YStack>
+  );
+};
diff --git a/packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx b/packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx
new file mode 100644
index 000000000..b6ee6bfa8
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/components/webview/WebViewNavBar.tsx
@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import type React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { black } from '../../constants/colors';
+import { dinot } from '../../constants/fonts';
+import { buttonTap } from '../../haptic';
+import { Button } from '../layout/Button';
+import { XStack } from '../layout/XStack';
+
+import { ExternalLink, X } from '@tamagui/lucide-icons';
+
+export interface WebViewNavBarProps {
+  title?: string;
+  canGoBack?: boolean;
+  onBackPress: () => void;
+  onOpenExternalPress?: () => void;
+  isOpenExternalDisabled?: boolean;
+  safeAreaTop?: number;
+}
+
+export const WebViewNavBar: React.FC<WebViewNavBarProps> = ({
+  title,
+  onBackPress,
+  onOpenExternalPress,
+  isOpenExternalDisabled,
+  safeAreaTop = 0,
+}) => {
+  return (
+    <XStack
+      paddingHorizontal={20}
+      paddingVertical={10}
+      paddingTop={safeAreaTop + 10}
+      gap={14}
+      alignItems="center"
+      backgroundColor="white"
+    >
+      {/* Left: Close Button */}
+      <Button
+        unstyled
+        hitSlop={{ top: 20, bottom: 20, left: 20, right: 10 }}
+        icon={<X size={24} color={black} />}
+        onPress={() => {
+          buttonTap();
+          onBackPress();
+        }}
+      />
+
+      {/* Center: Title */}
+      <XStack flex={1} alignItems="center" justifyContent="center">
+        <Text style={styles.title} numberOfLines={1}>
+          {title?.toUpperCase() || 'PAGE TITLE'}
+        </Text>
+      </XStack>
+
+      {/* Right: Open External Button */}
+      <Button
+        unstyled
+        disabled={isOpenExternalDisabled}
+        hitSlop={{ top: 20, bottom: 20, left: 10, right: 20 }}
+        icon={
+          <ExternalLink
+            size={24}
+            color={isOpenExternalDisabled ? black : black}
+            opacity={isOpenExternalDisabled ? 0.3 : 1}
+          />
+        }
+        onPress={() => {
+          buttonTap();
+          onOpenExternalPress?.();
+        }}
+      />
+    </XStack>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontFamily: dinot,
+    fontSize: 15,
+    color: black,
+    letterSpacing: 0.6,
+    textAlign: 'center',
+    textTransform: 'uppercase',
+  },
+});
diff --git a/packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx b/packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx
new file mode 100644
index 000000000..0d7072ca9
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/components/webview/WebViewScreen.tsx
@@ -0,0 +1,170 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, BackHandler, Linking, StyleSheet, View } from 'react-native';
+import WebView, { type WebView as WebViewType } from 'react-native-webview';
+import type { WebViewNavigation } from 'react-native-webview/lib/WebViewTypes';
+
+import { charcoal, slate200, white } from '../../constants/colors';
+import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
+import { WebViewFooter } from './WebViewFooter';
+import { WebViewNavBar } from './WebViewNavBar';
+
+export interface WebViewScreenParams {
+  url: string;
+  title?: string;
+}
+
+export interface WebViewScreenProps extends WebViewScreenParams {
+  canGoBack?: boolean;
+  onBackPress: () => void;
+  safeAreaTop?: number;
+  safeAreaBottom?: number;
+}
+
+const defaultUrl = 'https://self.xyz';
+
+export const WebViewScreen: React.FC<WebViewScreenProps> = ({
+  url,
+  title,
+  canGoBack: stackCanGoBack = false,
+  onBackPress,
+  safeAreaTop = 0,
+  safeAreaBottom = 0,
+}) => {
+  const webViewRef = useRef<WebViewType>(null);
+  const [canGoBackInWebView, setCanGoBackInWebView] = useState(false);
+  const [canGoForwardInWebView, setCanGoForwardInWebView] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentUrl, setCurrentUrl] = useState(url || defaultUrl);
+  const [pageTitle, setPageTitle] = useState<string | undefined>(title);
+
+  const derivedTitle = pageTitle || title || currentUrl;
+
+  const openUrl = useCallback(async (targetUrl: string) => {
+    try {
+      const supported = await Linking.canOpenURL(targetUrl);
+      if (supported) {
+        await Linking.openURL(targetUrl);
+      }
+    } catch (error) {
+      console.error('Failed to open URL externally', error);
+    }
+  }, []);
+
+  const handleOpenExternal = useCallback(async () => {
+    await openUrl(currentUrl);
+  }, [currentUrl, openUrl]);
+
+  const handleReload = useCallback(() => {
+    setIsLoading(true);
+    webViewRef.current?.reload();
+  }, []);
+
+  const handleGoBack = useCallback(() => {
+    if (canGoBackInWebView) {
+      webViewRef.current?.goBack();
+      return;
+    }
+    onBackPress();
+  }, [canGoBackInWebView, onBackPress]);
+
+  const handleGoForward = useCallback(() => {
+    if (canGoForwardInWebView) {
+      webViewRef.current?.goForward();
+    }
+  }, [canGoForwardInWebView]);
+
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (canGoBackInWebView) {
+        webViewRef.current?.goBack();
+        return true;
+      }
+      return false;
+    });
+
+    return () => subscription.remove();
+  }, [canGoBackInWebView]);
+
+  return (
+    <ExpandableBottomLayout.Layout backgroundColor={white}>
+      <ExpandableBottomLayout.TopSection
+        backgroundColor={white}
+        alignItems="stretch"
+        justifyContent="flex-start"
+        padding={0}
+      >
+        <WebViewNavBar
+          title={derivedTitle}
+          canGoBack={stackCanGoBack}
+          onBackPress={handleGoBack}
+          onOpenExternalPress={handleOpenExternal}
+          safeAreaTop={safeAreaTop}
+        />
+        <View style={styles.webViewContainer}>
+          {isLoading && (
+            <View pointerEvents="none" style={styles.loadingOverlay}>
+              <ActivityIndicator size="small" color={charcoal} />
+            </View>
+          )}
+          <WebView
+            ref={webViewRef}
+            source={{ uri: url || defaultUrl }}
+            onNavigationStateChange={(event: WebViewNavigation) => {
+              setCanGoBackInWebView(event.canGoBack);
+              setCanGoForwardInWebView(event.canGoForward);
+              setCurrentUrl(event.url);
+              if (!title && event.title) {
+                setPageTitle(event.title);
+              }
+            }}
+            onLoadStart={() => setIsLoading(true)}
+            onLoadEnd={() => setIsLoading(false)}
+            startInLoadingState
+            style={styles.webView}
+          />
+        </View>
+      </ExpandableBottomLayout.TopSection>
+      <ExpandableBottomLayout.BottomSection
+        backgroundColor={white}
+        borderTopLeftRadius={30}
+        borderTopRightRadius={30}
+        borderTopWidth={1}
+        borderColor={slate200}
+        style={{ paddingTop: 0 }}
+        safeAreaBottom={safeAreaBottom}
+      >
+        <WebViewFooter
+          canGoBack={canGoBackInWebView}
+          canGoForward={canGoForwardInWebView}
+          onGoBack={handleGoBack}
+          onGoForward={handleGoForward}
+          onReload={handleReload}
+          onOpenInBrowser={handleOpenExternal}
+        />
+      </ExpandableBottomLayout.BottomSection>
+    </ExpandableBottomLayout.Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  webViewContainer: {
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: white,
+  },
+  webView: {
+    flex: 1,
+    backgroundColor: white,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.5)',
+  },
+});
diff --git a/packages/mobile-sdk-alpha/src/index.ts b/packages/mobile-sdk-alpha/src/index.ts
index aa1c2279d..33b540cbe 100644
--- a/packages/mobile-sdk-alpha/src/index.ts
+++ b/packages/mobile-sdk-alpha/src/index.ts
@@ -76,11 +76,23 @@ export { NFCScannerScreen } from './components/screens/NFCScannerScreen';
 export { type ProvingStateType } from './proving/provingMachine';
 // Components
 export { QRCodeScreen } from './components/screens/QRCodeScreen';
+
 // Documents utils
 export { SdkEvents } from './types/events';
 
 export { SelfClientContext, SelfClientProvider, useSelfClient } from './context';
 
+// WebView components
+export {
+  WebViewFooter,
+  type WebViewFooterProps,
+  WebViewNavBar,
+  type WebViewNavBarProps,
+  WebViewScreen,
+  type WebViewScreenParams,
+  type WebViewScreenProps,
+} from './components';
+
 // Haptic feedback utilities
 export { advercase, dinot, plexMono } from './constants/fonts';
 
diff --git a/packages/mobile-sdk-alpha/src/layouts/ExpandableBottomLayout.tsx b/packages/mobile-sdk-alpha/src/layouts/ExpandableBottomLayout.tsx
index baee68309..a2193cfae 100644
--- a/packages/mobile-sdk-alpha/src/layouts/ExpandableBottomLayout.tsx
+++ b/packages/mobile-sdk-alpha/src/layouts/ExpandableBottomLayout.tsx
@@ -13,10 +13,10 @@ import { extraYPadding } from '../constants/layout';
 const SAFE_AREA_TOP_DEFAULT = 0;
 const SAFE_AREA_BOTTOM_DEFAULT = 0;
 
-// Get the current font scale factor
-const fontScale = PixelRatio.getFontScale();
+// Get the current font scale factor lazily to avoid accessing PixelRatio at module load time
+const getFontScale = () => PixelRatio.getFontScale();
 // fontScale > 1 means the user has increased text size in accessibility settings
-const isLargerTextEnabled = fontScale > 1.3;
+const getIsLargerTextEnabled = () => getFontScale() > 1.3;
 
 export interface BottomSectionProps extends ViewProps {
   children: React.ReactNode;
@@ -114,7 +114,7 @@ const BottomSection: React.FC<BottomSectionProps> = ({ children, style, ...props
   let panelHeight: number | 'auto' = 'auto';
   // set bottom section height to 38% of screen height
   // and wrap children in a scroll view if larger text is enabled
-  if (isLargerTextEnabled) {
+  if (getIsLargerTextEnabled()) {
     const windowHeight = Dimensions.get('window').height;
     panelHeight = windowHeight * 0.38;
     children = (
diff --git a/packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts b/packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts
new file mode 100644
index 000000000..5dee7c9c8
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/types/react-native-safe-area-context.d.ts
@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+declare module 'react-native-safe-area-context' {
+  export interface EdgeInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  }
+
+  export function useSafeAreaInsets(): EdgeInsets;
+}
diff --git a/packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts b/packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts
new file mode 100644
index 000000000..1510dc249
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/types/react-native-webview.d.ts
@@ -0,0 +1,44 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+declare module 'react-native-webview' {
+  import type { Component } from 'react';
+  import type { ViewStyle } from 'react-native';
+
+  export interface WebViewNavigation {
+    url: string;
+    title: string;
+    loading: boolean;
+    canGoBack: boolean;
+    canGoForward: boolean;
+  }
+
+  export interface WebViewProps {
+    source: { uri: string };
+    onNavigationStateChange?: (event: WebViewNavigation) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    startInLoadingState?: boolean;
+    style?: ViewStyle;
+  }
+
+  class WebView extends Component<WebViewProps> {
+    goBack(): void;
+    goForward(): void;
+    reload(): void;
+  }
+
+  export default WebView;
+  export type { WebView };
+}
+
+declare module 'react-native-webview/lib/WebViewTypes' {
+  export interface WebViewNavigation {
+    url: string;
+    title: string;
+    loading: boolean;
+    canGoBack: boolean;
+    canGoForward: boolean;
+  }
+}
diff --git a/packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts b/packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts
new file mode 100644
index 000000000..e7cd1e29b
--- /dev/null
+++ b/packages/mobile-sdk-alpha/src/types/tamagui-lucide-icons.d.ts
@@ -0,0 +1,19 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+declare module '@tamagui/lucide-icons' {
+  import type { ComponentType } from 'react';
+
+  export interface IconProps {
+    size?: number;
+    color?: string;
+    opacity?: number;
+  }
+
+  export const ArrowLeft: ComponentType<IconProps>;
+  export const ArrowRight: ComponentType<IconProps>;
+  export const ExternalLink: ComponentType<IconProps>;
+  export const RotateCcw: ComponentType<IconProps>;
+  export const X: ComponentType<IconProps>;
+}
diff --git a/packages/mobile-sdk-alpha/tsup.config.ts b/packages/mobile-sdk-alpha/tsup.config.ts
index abc7c0d67..e346472d6 100644
--- a/packages/mobile-sdk-alpha/tsup.config.ts
+++ b/packages/mobile-sdk-alpha/tsup.config.ts
@@ -70,6 +70,14 @@ export default defineConfig([
       '@react-native-async-storage/async-storage',
       'react-native-keychain',
       'react-native-sqlite-storage',
+      // Tamagui dependencies (peer dependencies)
+      '@tamagui/lucide-icons',
+      'react-native-haptic-feedback',
+      'react-native-localize',
+      'react-native-safe-area-context',
+      'react-native-svg',
+      'react-native-webview',
+      'lottie-react-native',
       // State management (xstate included in bundle)
       // SVG files should be handled by React Native's SVG transformer
       /\.svg$/,
@@ -118,6 +126,14 @@ export default defineConfig([
       '@react-native-async-storage/async-storage',
       'react-native-keychain',
       'react-native-sqlite-storage',
+      // Tamagui dependencies (peer dependencies)
+      '@tamagui/lucide-icons',
+      'react-native-haptic-feedback',
+      'react-native-localize',
+      'react-native-safe-area-context',
+      'react-native-svg',
+      'react-native-webview',
+      'lottie-react-native',
       // State management (xstate included in bundle)
       // SVG files should be handled by React Native's SVG transformer
       /\.svg$/,
diff --git a/packages/mobile-sdk-alpha/vitest.config.ts b/packages/mobile-sdk-alpha/vitest.config.ts
index e00ed40e9..51f92f20e 100644
--- a/packages/mobile-sdk-alpha/vitest.config.ts
+++ b/packages/mobile-sdk-alpha/vitest.config.ts
@@ -12,4 +12,7 @@ export default defineConfig({
     include: ['tests/**/*.test.{ts,tsx}', 'src/**/*.test.{ts,tsx}'],
     exclude: ['node_modules/**'],
   },
+  ssr: {
+    noExternal: ['react', 'react-dom'],
+  },
 });
diff --git a/yarn.lock b/yarn.lock
index 03936976b..e2d2c9546 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7443,6 +7443,7 @@ __metadata:
   dependencies:
     "@babel/runtime": "npm:^7.28.3"
     "@selfxyz/common": "workspace:^"
+    "@tamagui/lucide-icons": "npm:^1.135.3"
     "@testing-library/react": "npm:^14.1.2"
     "@types/react": "npm:^18.3.4"
     "@types/react-dom": "npm:^18.3.0"
@@ -7466,8 +7467,10 @@ __metadata:
     react-native: "npm:0.76.9"
     react-native-haptic-feedback: "npm:^2.3.3"
     react-native-localize: "npm:^3.5.2"
+    react-native-svg: "npm:^15.14.0"
     react-native-svg-circle-country-flags: "npm:^0.2.2"
     react-native-web: "npm:^0.21.1"
+    react-native-webview: "npm:^13.16.0"
     socket.io-client: "npm:^4.8.1"
     tsup: "npm:^8.0.1"
     typescript: "npm:^5.9.2"
@@ -7476,12 +7479,15 @@ __metadata:
     xstate: "npm:^5.20.2"
     zustand: "npm:^4.5.2"
   peerDependencies:
+    "@tamagui/lucide-icons": "*"
     lottie-react-native: 7.2.2
     react: ^18.3.1
     react-native: 0.76.9
     react-native-haptic-feedback: "*"
     react-native-localize: "*"
+    react-native-safe-area-context: "*"
     react-native-svg: "*"
+    react-native-webview: "*"
   languageName: unknown
   linkType: soft
 
@@ -10009,6 +10015,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/compose-refs@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/compose-refs@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/c556a67d4327a1c3a26a98b63b4c2f3127d87452c2d220a9366b0fcc89c32dacd800bbe1dfed222393136f548fe3d886d7be74af8684ef87f3a725a1537e6857
+  languageName: node
+  linkType: hard
+
 "@tamagui/config-default@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/config-default@npm:1.126.14"
@@ -10047,6 +10062,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/constants@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/constants@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/ec5fa9ecd7192ccda8176d1d8d473150214cb7507fcc6b51aed1e2dd0b4b73652282b4e4b48feadf0a3ffd6957b00cc246e08bb42027bf7e6f8a7fd7840dcff8
+  languageName: node
+  linkType: hard
+
 "@tamagui/core@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/core@npm:1.126.14"
@@ -10060,6 +10085,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/core@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/core@npm:1.135.3"
+  dependencies:
+    "@tamagui/helpers": "npm:1.135.3"
+    "@tamagui/react-native-media-driver": "npm:1.135.3"
+    "@tamagui/react-native-use-pressable": "npm:1.135.3"
+    "@tamagui/react-native-use-responder-events": "npm:1.135.3"
+    "@tamagui/use-element-layout": "npm:1.135.3"
+    "@tamagui/use-event": "npm:1.135.3"
+    "@tamagui/web": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/498b1487e8c03941ea721700d1ff9232c1ac02451cbb3d9cdf69f5408e1303441220518a99cb4ad3d12043737304ec200e8231713ddb4591b66d801130762a20
+  languageName: node
+  linkType: hard
+
 "@tamagui/create-context@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/create-context@npm:1.126.14"
@@ -10306,6 +10349,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/helpers-icon@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/helpers-icon@npm:1.135.3"
+  dependencies:
+    "@tamagui/core": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+    react-native-svg: ">=12"
+  checksum: 10c0/9f363b3da0d6148a094a0173c2339c217fc82f8193995bafc80fa64ec6d3d15679417ef1de39b632558f612060672590374c1f344e1641d0079dd1a7db0dd344
+  languageName: node
+  linkType: hard
+
 "@tamagui/helpers-node@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/helpers-node@npm:1.126.14"
@@ -10337,6 +10392,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/helpers@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/helpers@npm:1.135.3"
+  dependencies:
+    "@tamagui/constants": "npm:1.135.3"
+    "@tamagui/simple-hash": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/0ac6db843d2667049bab935d8a80aa11c8b3155abe92572aba917af2eb2ca1c0b9d24a5c37009d5fa08b2375797f7f6803a073e550586c892d98cf5b6c874292
+  languageName: node
+  linkType: hard
+
 "@tamagui/image@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/image@npm:1.126.14"
@@ -10349,6 +10416,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/is-equal-shallow@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/is-equal-shallow@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/51f9c7e1575485945482677b8354926bf87fa6bf76207c22e1f9c4c6abfa44d92ce94afdacdc0efb2f7eb19370fda83a167a145855b36babc6e139395289ebe6
+  languageName: node
+  linkType: hard
+
 "@tamagui/label@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/label@npm:1.126.14"
@@ -10411,6 +10487,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/lucide-icons@npm:^1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/lucide-icons@npm:1.135.3"
+  dependencies:
+    "@tamagui/core": "npm:1.135.3"
+    "@tamagui/helpers-icon": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+    react-native-svg: ">=12"
+  checksum: 10c0/035ea84c01501b49657975e9d1bf5e045d7fb27623a0eb732b2bcb16ce260dca48fd3944f78851f76f55b55b1ef082f34333613306b5516bf3ea5e81a0afa64c
+  languageName: node
+  linkType: hard
+
 "@tamagui/normalize-css-color@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/normalize-css-color@npm:1.126.14"
@@ -10420,6 +10509,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/normalize-css-color@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/normalize-css-color@npm:1.135.3"
+  dependencies:
+    "@react-native/normalize-color": "npm:^2.1.0"
+  checksum: 10c0/172a483363dd2bf60a0c97c412e0e6e66c5560179d9799b79a5cfbbdb9f5ed983e4c33adb1639daca9a0a7fed3c82477ba1a8a4d369f3ba7ca09c0a48c07b1f0
+  languageName: node
+  linkType: hard
+
 "@tamagui/polyfill-dev@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/polyfill-dev@npm:1.126.14"
@@ -10565,6 +10663,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/react-native-media-driver@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/react-native-media-driver@npm:1.135.3"
+  dependencies:
+    "@tamagui/web": "npm:1.135.3"
+  peerDependencies:
+    react-native: "*"
+  checksum: 10c0/382aac4b885fa10203a6a39698b61f80fac7d0279a9a98937b2a8b842cae6df787d94feecaaa50ae56c0b50682d5f479a5651517fdce6d7a9e1349b10f61dfff
+  languageName: node
+  linkType: hard
+
 "@tamagui/react-native-svg@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/react-native-svg@npm:1.126.14"
@@ -10581,6 +10690,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/react-native-use-pressable@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/react-native-use-pressable@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/d72c1fb7956a820c860547f130c7bbb663f8732d773cac112f5ca155978169f2e7a55f039a7174c30d0c17fa385275572e82035167941058e64ded3049c5c2bb
+  languageName: node
+  linkType: hard
+
 "@tamagui/react-native-use-responder-events@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/react-native-use-responder-events@npm:1.126.14"
@@ -10590,6 +10708,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/react-native-use-responder-events@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/react-native-use-responder-events@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/d730f2243a84fc981fb992097bdb936dd54a6911b346319ef127db013dd8a484f8c8a4fd957c874b265a5fac75ddb1d4ad07c1e0260c9fede500b03579e59f69
+  languageName: node
+  linkType: hard
+
 "@tamagui/react-native-web-internals@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/react-native-web-internals@npm:1.126.14"
@@ -10762,6 +10889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/simple-hash@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/simple-hash@npm:1.135.3"
+  checksum: 10c0/7e336994b99b47f7d7dedfc09859de63280e53468282b9c846d74326fbf75557271f0cae557a803bb75473483ea48758513aa79d8db2786f0dd0cdbf7c71b83f
+  languageName: node
+  linkType: hard
+
 "@tamagui/slider@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/slider@npm:1.126.14"
@@ -10956,6 +11090,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/timer@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/timer@npm:1.135.3"
+  checksum: 10c0/b053a0d6ed9b39ba2d2857cc8714935c34d174ba4ede0d06db7e3e69d79cedf17cf5b3377904c33485b838ed6dcaa933f5d2f316edaf4af528ab57c232164a1c
+  languageName: node
+  linkType: hard
+
 "@tamagui/toast@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/toast@npm:1.126.14"
@@ -11033,6 +11174,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/types@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/types@npm:1.135.3"
+  checksum: 10c0/0f3a0b10260859096dd883f8153015f68ae8815363b685c073fbb93144ba2d10152afe31c1785e28d29d1c6a4824ed613cf3b63ea9bb438e8af9e68704d9225d
+  languageName: node
+  linkType: hard
+
 "@tamagui/use-callback-ref@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/use-callback-ref@npm:1.126.14"
@@ -11079,6 +11227,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/use-did-finish-ssr@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/use-did-finish-ssr@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/1117121c094ef937a3c04b1349406dd6c036aa42cdf13467f51e6bb4a12ef233ade0010c42e00e23a1c85c92face824e45ef761fd72d476a4185b3beb26a5f8b
+  languageName: node
+  linkType: hard
+
 "@tamagui/use-direction@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/use-direction@npm:1.126.14"
@@ -11088,6 +11245,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/use-element-layout@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/use-element-layout@npm:1.135.3"
+  dependencies:
+    "@tamagui/constants": "npm:1.135.3"
+    "@tamagui/is-equal-shallow": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/e79be421273d4a6f8a26088199734627fe775acce7470ba01eacaf74e1cd9ef8145f9f118ebb755588745315d6e34e65d78ac9f10fa17a0c2fc15c96a40c5472
+  languageName: node
+  linkType: hard
+
 "@tamagui/use-escape-keydown@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/use-escape-keydown@npm:1.126.14"
@@ -11108,6 +11277,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/use-event@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/use-event@npm:1.135.3"
+  dependencies:
+    "@tamagui/constants": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/5605487623a3010622784ce071741d3e904f4d0a248fdcf43dcf00591a203a150c1a4e4c2114fb5053b5e8d3264668d37acf787b1738d82fc9ca3f2b338b8527
+  languageName: node
+  linkType: hard
+
 "@tamagui/use-force-update@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/use-force-update@npm:1.126.14"
@@ -11117,6 +11297,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/use-force-update@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/use-force-update@npm:1.135.3"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/0a535189497e468798263282fd316d121204eb4eca3418bb6ea6ea7d921cea451eff5bb9f4bd608fe357aaf7caa2260a39b4c267ad1daa91b392a432779062ae
+  languageName: node
+  linkType: hard
+
 "@tamagui/use-keyboard-visible@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/use-keyboard-visible@npm:1.126.14"
@@ -11205,6 +11394,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tamagui/web@npm:1.135.3":
+  version: 1.135.3
+  resolution: "@tamagui/web@npm:1.135.3"
+  dependencies:
+    "@tamagui/compose-refs": "npm:1.135.3"
+    "@tamagui/constants": "npm:1.135.3"
+    "@tamagui/helpers": "npm:1.135.3"
+    "@tamagui/is-equal-shallow": "npm:1.135.3"
+    "@tamagui/normalize-css-color": "npm:1.135.3"
+    "@tamagui/timer": "npm:1.135.3"
+    "@tamagui/types": "npm:1.135.3"
+    "@tamagui/use-did-finish-ssr": "npm:1.135.3"
+    "@tamagui/use-event": "npm:1.135.3"
+    "@tamagui/use-force-update": "npm:1.135.3"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+    react-native: "*"
+  checksum: 10c0/223d2193ccf6c0b911a161b3a64644266d79400149694db5c18daacaa3ad9c707d0b629cd822f062299c4bdd8b5299a9be75268853ff38bf4dc90f8ce2b29380
+  languageName: node
+  linkType: hard
+
 "@tamagui/z-index-stack@npm:1.126.14":
   version: 1.126.14
   resolution: "@tamagui/z-index-stack@npm:1.126.14"
@@ -26513,6 +26724,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-svg@npm:^15.14.0":
+  version: 15.14.0
+  resolution: "react-native-svg@npm:15.14.0"
+  dependencies:
+    css-select: "npm:^5.1.0"
+    css-tree: "npm:^1.1.3"
+    warn-once: "npm:0.1.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/5855bee2a76313f580ac3f8c476d07bb63d1a8e5e0883154275be5a1f4224e35f2416b0ba3b03f5d4c637c3b2f9320df34ede918da27188adb6881b3b8ac96c8
+  languageName: node
+  linkType: hard
+
 "react-native-vector-icons@npm:^10.3.0":
   version: 10.3.0
   resolution: "react-native-vector-icons@npm:10.3.0"