diff --git a/example/App.tsx b/example/App.tsx
index a26e540..d44ecc5 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StatusBar, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { SalveDbProvider } from '@salve-software/react-native-salve-db';
 import Salvetron from '@salve-software/salvetron-react-native';
@@ -14,34 +14,28 @@ import { InfiniteQueryScreen } from './src/screens/InfiniteQueryScreen';
 import { BenchmarkScreen } from './src/screens/BenchmarkScreen';
 import { SyncTestScreen } from './src/screens/SyncTestScreen';
 import { LoginScreen, type LoginTokens } from './src/screens/LoginScreen';
-import { ResetControls } from './src/components/ResetControls';
+import { SideMenu } from './src/components/SideMenu';
+import { IconButton, ToastProvider } from './src/components/ui';
+import { colors, spacing } from './src/theme/tokens';
+import { WalletIcon, StackIcon, LightningIcon, ArrowsClockwiseIcon, ListIcon } from './src/theme/icons';
 import { SYNC_SERVER_BASE_URL } from './src/library/syncServer';
 
 if (__DEV__) {
   Salvetron.connect({ host: 'localhost', port: 8765 });
 }
 
-const ACCENT = '#5B5FEF';
-
 const TABS = [
-  { key: 'expenses', label: 'Query', icon: '💸' },
-  { key: 'infinite', label: 'Infinite Query', icon: '📜' },
-  { key: 'benchmark', label: 'Benchmark', icon: '⚡' },
-  { key: 'sync', label: 'Sync Test', icon: '🔄' },
+  { key: 'expenses', label: 'Query', Icon: WalletIcon },
+  { key: 'infinite', label: 'Infinite Query', Icon: StackIcon },
+  { key: 'benchmark', label: 'Benchmark', Icon: LightningIcon },
+  { key: 'sync', label: 'Sync Test', Icon: ArrowsClockwiseIcon },
 ] as const;
 
 type TabKey = (typeof TABS)[number]['key'];
 
-const SCHEMAS = [
-  ExpenseSchema,
-  BudgetSchema,
-  BenchmarkSchema,
-  FeedItemSchema,
-  UserSchema,
-  ProductSchema,
-];
+const SCHEMAS = [ExpenseSchema, BudgetSchema, BenchmarkSchema, FeedItemSchema, UserSchema, ProductSchema];
 
-/** Shared by the initial SalveDbProvider mount and ResetControls' "reconfigure" button — same db name both times, so the connection (and its subscriptions) survives a reset(). */
+/** Shared by the initial SalveDbProvider mount and SideMenu's "reconfigure" button — same db name both times, so the connection (and its subscriptions) survives a reset(). */
 function buildDbConfig(tokens: LoginTokens) {
   return {
     name: 'salve-db-example',
@@ -66,10 +60,14 @@ interface AppTabsProps {
 
 function AppTabs({ tokens, onLogout }: AppTabsProps): React.JSX.Element {
   const [tab, setTab] = useState<TabKey>('expenses');
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <View style={styles.flex}>
-      <ResetControls schemas={SCHEMAS} buildConfig={() => buildDbConfig(tokens)} onLogout={onLogout} />
+      <SafeAreaView style={styles.header} edges={['top']}>
+        <Text style={styles.headerTitle}>Salve DB</Text>
+        <IconButton icon={<ListIcon size={18} color={colors.ink} />} onPress={() => setMenuOpen(true)} />
+      </SafeAreaView>
 
       <View style={styles.flex}>
         {tab === 'expenses' ? <ExpensesScreen /> : null}
@@ -79,13 +77,27 @@ function AppTabs({ tokens, onLogout }: AppTabsProps): React.JSX.Element {
       </View>
 
       <SafeAreaView style={styles.tabBar} edges={['bottom']}>
-        {TABS.map(({ key, label, icon }) => (
-          <Pressable key={key} onPress={() => setTab(key)} style={styles.tabItem}>
-            <Text style={[styles.tabIcon, tab === key && styles.tabIconActive]}>{icon}</Text>
-            <Text style={[styles.tabLabel, tab === key && styles.tabLabelActive]}>{label}</Text>
-          </Pressable>
-        ))}
+        {TABS.map(({ key, label, Icon }) => {
+          const active = tab === key;
+          return (
+            <Pressable key={key} onPress={() => setTab(key)} style={styles.tabItem}>
+              {active ? <View style={styles.tabIndicator} /> : null}
+              <Icon size={20} weight={active ? 'fill' : 'regular'} color={active ? colors.accent : colors.muted} />
+              <Text style={[styles.tabLabel, active && styles.tabLabelActive]} numberOfLines={1}>
+                {label}
+              </Text>
+            </Pressable>
+          );
+        })}
       </SafeAreaView>
+
+      <SideMenu
+        visible={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        schemas={SCHEMAS}
+        buildConfig={() => buildDbConfig(tokens)}
+        onLogout={onLogout}
+      />
     </View>
   );
 }
@@ -93,19 +105,18 @@ function AppTabs({ tokens, onLogout }: AppTabsProps): React.JSX.Element {
 function App(): React.JSX.Element {
   const [tokens, setTokens] = useState<LoginTokens | null>(null);
 
-  if (tokens === null) {
-    return (
-      <SafeAreaProvider>
-        <LoginScreen onLoginSuccess={setTokens} />
-      </SafeAreaProvider>
-    );
-  }
-
   return (
     <SafeAreaProvider>
-      <SalveDbProvider config={buildDbConfig(tokens)} schemas={SCHEMAS}>
-        <AppTabs tokens={tokens} onLogout={() => setTokens(null)} />
-      </SalveDbProvider>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
+      <ToastProvider>
+        {tokens === null ? (
+          <LoginScreen onLoginSuccess={setTokens} />
+        ) : (
+          <SalveDbProvider config={buildDbConfig(tokens)} schemas={SCHEMAS}>
+            <AppTabs tokens={tokens} onLogout={() => setTokens(null)} />
+          </SalveDbProvider>
+        )}
+      </ToastProvider>
     </SafeAreaProvider>
   );
 }
@@ -115,33 +126,50 @@ export default App;
 const styles = StyleSheet.create({
   flex: {
     flex: 1,
+    backgroundColor: colors.canvas,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    backgroundColor: colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: colors.line,
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.ink,
   },
   tabBar: {
     flexDirection: 'row',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.surface,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#E1E2F0',
+    borderTopColor: colors.line,
   },
   tabItem: {
     flex: 1,
     alignItems: 'center',
-    paddingTop: 10,
-    paddingBottom: 6,
-    gap: 2,
-  },
-  tabIcon: {
-    fontSize: 20,
-    opacity: 0.5,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.xs,
+    gap: spacing.xxs,
   },
-  tabIconActive: {
-    opacity: 1,
+  tabIndicator: {
+    position: 'absolute',
+    top: 0,
+    width: 24,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: colors.accent,
   },
   tabLabel: {
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: '600',
-    color: '#9B9DB8',
+    color: colors.muted,
   },
   tabLabelActive: {
-    color: ACCENT,
+    color: colors.accent,
   },
 });
diff --git a/example/global.d.ts b/example/global.d.ts
new file mode 100644
index 0000000..61df4bb
--- /dev/null
+++ b/example/global.d.ts
@@ -0,0 +1,19 @@
+// Module augmentation required by phosphor-react-native's TypeScript setup —
+// see the "Typescript support" section of its README. Declares only the
+// extra `className` member each interface is missing; merges into the
+// existing declaration rather than re-declaring it (an `extends` here would
+// make the interface reference itself).
+import 'react-native-svg';
+import 'phosphor-react-native';
+
+declare module 'react-native-svg' {
+  interface SvgProps {
+    className?: string;
+  }
+}
+
+declare module 'phosphor-react-native' {
+  interface IconProps {
+    className?: string;
+  }
+}
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 9f59529..354d1fa 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1939,6 +1939,51 @@ PODS:
     - React-utils (= 0.86.0)
     - ReactNativeDependencies
   - ReactNativeDependencies (0.86.0)
+  - RNSVG (15.15.5):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - RNSVG/common (= 15.15.5)
+    - Yoga
+  - RNSVG/common (15.15.5):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - SalveDb (0.1.1):
     - hermes-engine
     - NitroModules
@@ -2044,6 +2089,7 @@ DEPENDENCIES:
   - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
   - ReactNativeDependencies (from `../../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec`)
+  - RNSVG (from `../../node_modules/react-native-svg`)
   - SalveDb (from `../..`)
   - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
 
@@ -2203,6 +2249,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon"
   ReactNativeDependencies:
     :podspec: "../../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec"
+  RNSVG:
+    :path: "../../node_modules/react-native-svg"
   SalveDb:
     :path: "../.."
   Yoga:
@@ -2286,6 +2334,7 @@ SPEC CHECKSUMS:
   ReactCodegen: 1973e629fe2614a7b2cf72919cb9935b6c34675f
   ReactCommon: d5c1bb4427bf51c443de5926aac332c89ddd9363
   ReactNativeDependencies: fa0a54b3f5319ae0e3b9aff32bfee7a424b88e66
+  RNSVG: 6cae8d4082913be2eb43eaec2a456222c42195ed
   SalveDb: c9d225fdca0b6ee1bf26697372566eac2aa0640f
   Yoga: fe50ab299e578f397fef753cf309c6703a4db29b
 
diff --git a/example/ios/SalveDbExample.xcodeproj/project.pbxproj b/example/ios/SalveDbExample.xcodeproj/project.pbxproj
index 9ce05e7..ef5f9c7 100644
--- a/example/ios/SalveDbExample.xcodeproj/project.pbxproj
+++ b/example/ios/SalveDbExample.xcodeproj/project.pbxproj
@@ -11,17 +11,17 @@
 		6D150186035001D7357AA846 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */; };
 		761780ED2CA45674006654EE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 761780EC2CA45674006654EE /* AppDelegate.swift */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
-		C097E6C4B0ADD3EC7F80A6E8 /* libPods-SalveDbExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1F8F2B860BF69F7821E07C3D /* libPods-SalveDbExample.a */; };
+		C6E915F3DF6C60DE686559A7 /* libPods-SalveDbExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 49E666747AF051099A41A290 /* libPods-SalveDbExample.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
-		10655584FE167515188A1060 /* Pods-SalveDbExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-SalveDbExample.debug.xcconfig"; path = "Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample.debug.xcconfig"; sourceTree = "<group>"; };
+		0A7B746496E6D15E07A7307F /* Pods-SalveDbExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-SalveDbExample.release.xcconfig"; path = "Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample.release.xcconfig"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* SalveDbExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = SalveDbExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = SalveDbExample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = SalveDbExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = SalveDbExample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
-		1F8F2B860BF69F7821E07C3D /* libPods-SalveDbExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-SalveDbExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		3A5618B54CF630B74C215667 /* Pods-SalveDbExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-SalveDbExample.release.xcconfig"; path = "Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample.release.xcconfig"; sourceTree = "<group>"; };
+		1C6E7DDF126616369256D989 /* Pods-SalveDbExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-SalveDbExample.debug.xcconfig"; path = "Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample.debug.xcconfig"; sourceTree = "<group>"; };
+		49E666747AF051099A41A290 /* libPods-SalveDbExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-SalveDbExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		761780EC2CA45674006654EE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = SalveDbExample/AppDelegate.swift; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = SalveDbExample/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -32,7 +32,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				C097E6C4B0ADD3EC7F80A6E8 /* libPods-SalveDbExample.a in Frameworks */,
+				C6E915F3DF6C60DE686559A7 /* libPods-SalveDbExample.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -55,7 +55,7 @@
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				1F8F2B860BF69F7821E07C3D /* libPods-SalveDbExample.a */,
+				49E666747AF051099A41A290 /* libPods-SalveDbExample.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -92,8 +92,8 @@
 		BBD78D7AC51CEA395F1C20DB /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				10655584FE167515188A1060 /* Pods-SalveDbExample.debug.xcconfig */,
-				3A5618B54CF630B74C215667 /* Pods-SalveDbExample.release.xcconfig */,
+				1C6E7DDF126616369256D989 /* Pods-SalveDbExample.debug.xcconfig */,
+				0A7B746496E6D15E07A7307F /* Pods-SalveDbExample.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -105,13 +105,13 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "SalveDbExample" */;
 			buildPhases = (
-				C62BB49E30CCF2A01D9B41FC /* [CP] Check Pods Manifest.lock */,
+				81270F069B86D64C1C9F9C4F /* [CP] Check Pods Manifest.lock */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
-				FFE2D58645D2744BF96615B9 /* [CP] Embed Pods Frameworks */,
-				4B7D259B78BA68639FEB64C1 /* [CP] Copy Pods Resources */,
+				8076584F57D7BAF8DB7AEDAA /* [CP] Embed Pods Frameworks */,
+				67DE7510A084AA7FAAEDBF1E /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -183,7 +183,7 @@
 			shellPath = /bin/sh;
 			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"\\\"$WITH_ENVIRONMENT\\\" \\\"$REACT_NATIVE_XCODE\\\"\"\n";
 		};
-		4B7D259B78BA68639FEB64C1 /* [CP] Copy Pods Resources */ = {
+		67DE7510A084AA7FAAEDBF1E /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -191,60 +191,52 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
-			outputPaths = (
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C62BB49E30CCF2A01D9B41FC /* [CP] Check Pods Manifest.lock */ = {
+		8076584F57D7BAF8DB7AEDAA /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
+			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-SalveDbExample-checkManifestLockResult.txt",
+				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		FFE2D58645D2744BF96615B9 /* [CP] Embed Pods Frameworks */ = {
+		81270F069B86D64C1C9F9C4F /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
 			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
 			);
-			name = "[CP] Embed Pods Frameworks";
+			name = "[CP] Check Pods Manifest.lock";
 			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
 			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-SalveDbExample-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-SalveDbExample/Pods-SalveDbExample-frameworks.sh\"\n";
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */
@@ -263,7 +255,7 @@
 /* Begin XCBuildConfiguration section */
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 10655584FE167515188A1060 /* Pods-SalveDbExample.debug.xcconfig */;
+			baseConfigurationReference = 1C6E7DDF126616369256D989 /* Pods-SalveDbExample.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -294,7 +286,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 3A5618B54CF630B74C215667 /* Pods-SalveDbExample.release.xcconfig */;
+			baseConfigurationReference = 0A7B746496E6D15E07A7307F /* Pods-SalveDbExample.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
diff --git a/example/package.json b/example/package.json
index 0b335c7..601199d 100644
--- a/example/package.json
+++ b/example/package.json
@@ -16,10 +16,12 @@
   "dependencies": {
     "@react-native/new-app-screen": "0.86.0",
     "@salve-software/salvetron-react-native": "^1.1.5",
+    "phosphor-react-native": "^3.0.6",
     "react": "19.2.8",
     "react-native": "0.86.0",
     "react-native-nitro-modules": "0.36.1",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-safe-area-context": "^5.5.2",
+    "react-native-svg": "^15.15.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
diff --git a/example/src/components/ResetControls.tsx b/example/src/components/ResetControls.tsx
deleted file mode 100644
index 94e670b..0000000
--- a/example/src/components/ResetControls.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useState } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { AnySchema } from '@salve-software/react-native-salve-db';
-import { Database } from '@salve-software/react-native-salve-db';
-
-const ACCENT = '#5B5FEF';
-const DANGER = '#E14F62';
-
-type ConfigureProps = Parameters<typeof Database.configure>[0];
-
-interface ResetControlsProps {
-  schemas: AnySchema[];
-  buildConfig: () => ConfigureProps;
-  /** Called after a successful `Database.logout()`, so the caller can drop its held tokens and show the login screen again. */
-  onLogout: () => void;
-}
-
-/**
- * Manual QA surface for Database.reset(): "Reset (local)" proves the wipe +
- * reactivity without touching sync; "Reset + Reconfigure" additionally calls
- * configure() again with the same db name, proving the connection (and every
- * useQuery subscription mounted anywhere in the tab tree) survives instead of
- * silently going stale.
- */
-export function ResetControls({ schemas, buildConfig, onLogout }: ResetControlsProps): React.JSX.Element {
-  const [busy, setBusy] = useState(false);
-  const [lastResult, setLastResult] = useState<string | null>(null);
-
-  async function registerAllSchemas() {
-    for (const schema of schemas) {
-      await Database.register({ schema });
-    }
-  }
-
-  async function resetLocal() {
-    setBusy(true);
-    setLastResult(null);
-    try {
-      await Database.reset();
-      await registerAllSchemas();
-      setLastResult('Reset (local) ok — data wiped, sync needs configure() again to resume.');
-    } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function resetAndReconfigure() {
-    setBusy(true);
-    setLastResult(null);
-    try {
-      await Database.reset();
-      Database.configure(buildConfig());
-      await registerAllSchemas();
-      setLastResult('Reset + Reconfigure ok — same db name, sync restored, no remount.');
-    } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function logout() {
-    setBusy(true);
-    setLastResult(null);
-    try {
-      Database.logout();
-      onLogout();
-    } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <SafeAreaView style={styles.container} edges={['top']}>
-      <View style={styles.buttonRow}>
-        <Pressable style={[styles.button, busy && styles.buttonDisabled]} disabled={busy} onPress={resetLocal}>
-          <Text style={styles.buttonText}>Reset (local)</Text>
-        </Pressable>
-        <Pressable style={[styles.button, styles.buttonDanger, busy && styles.buttonDisabled]} disabled={busy} onPress={resetAndReconfigure}>
-          <Text style={styles.buttonDangerText}>Reset + Reconfigure</Text>
-        </Pressable>
-        <Pressable style={[styles.button, busy && styles.buttonDisabled]} disabled={busy} onPress={logout}>
-          <Text style={styles.buttonText}>Logout</Text>
-        </Pressable>
-      </View>
-      {busy ? <ActivityIndicator color={ACCENT} style={styles.spinner} /> : null}
-      {lastResult ? (
-        <Text style={[styles.resultText, lastResult.startsWith('Error') && styles.errorText]} numberOfLines={2}>
-          {lastResult}
-        </Text>
-      ) : null}
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 10,
-    backgroundColor: '#FFFFFF',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#E1E2F0',
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-  button: {
-    flex: 1,
-    height: 34,
-    borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#F4F5FA',
-  },
-  buttonDanger: {
-    backgroundColor: DANGER,
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  buttonText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#1C1D3E',
-  },
-  buttonDangerText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#FFFFFF',
-  },
-  spinner: {
-    marginTop: 6,
-  },
-  resultText: {
-    marginTop: 6,
-    fontSize: 11,
-    color: '#4A4D7A',
-    fontWeight: '500',
-  },
-  errorText: {
-    color: DANGER,
-  },
-});
diff --git a/example/src/components/SideMenu.tsx b/example/src/components/SideMenu.tsx
new file mode 100644
index 0000000..668d1b9
--- /dev/null
+++ b/example/src/components/SideMenu.tsx
@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, Dimensions, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import type { AnySchema } from '@salve-software/react-native-salve-db';
+import { Database } from '@salve-software/react-native-salve-db';
+import { Button, IconButton, Divider } from './ui';
+import { XIcon, SignOutIcon, DatabaseIcon } from '../theme/icons';
+import { colors, spacing, typography } from '../theme/tokens';
+
+const PANEL_WIDTH = Math.min(300, Dimensions.get('window').width * 0.82);
+
+type ConfigureProps = Parameters<typeof Database.configure>[0];
+
+interface SideMenuProps {
+  visible: boolean;
+  onClose: () => void;
+  schemas: AnySchema[];
+  buildConfig: () => ConfigureProps;
+  /** Called after a successful `Database.logout()`, so the caller can drop its held tokens and show the login screen again. */
+  onLogout: () => void;
+}
+
+/**
+ * Replaces the always-visible ResetControls bar: the same reset/reconfigure/
+ * logout QA actions, now tucked behind a hamburger trigger in a slide-in
+ * panel instead of permanently occupying screen space above every tab.
+ */
+export function SideMenu({ visible, onClose, schemas, buildConfig, onLogout }: SideMenuProps): React.JSX.Element {
+  const [busy, setBusy] = useState(false);
+  const [lastResult, setLastResult] = useState<string | null>(null);
+  const translateX = useRef(new Animated.Value(PANEL_WIDTH)).current;
+
+  useEffect(() => {
+    Animated.timing(translateX, {
+      toValue: visible ? 0 : PANEL_WIDTH,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, translateX]);
+
+  async function registerAllSchemas() {
+    for (const schema of schemas) {
+      await Database.register({ schema });
+    }
+  }
+
+  async function resetLocal() {
+    setBusy(true);
+    setLastResult(null);
+    try {
+      await Database.reset();
+      await registerAllSchemas();
+      setLastResult('Reset (local) ok — data wiped, sync needs configure() again to resume.');
+    } catch (err) {
+      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function resetAndReconfigure() {
+    setBusy(true);
+    setLastResult(null);
+    try {
+      await Database.reset();
+      Database.configure(buildConfig());
+      await registerAllSchemas();
+      setLastResult('Reset + Reconfigure ok — same db name, sync restored, no remount.');
+    } catch (err) {
+      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function logout() {
+    setBusy(true);
+    setLastResult(null);
+    try {
+      Database.logout();
+      onClose();
+      onLogout();
+    } catch (err) {
+      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
+      <SafeAreaProvider>
+      <Pressable style={styles.backdrop} onPress={onClose} />
+      <Animated.View style={[styles.panel, { width: PANEL_WIDTH, transform: [{ translateX }] }]}>
+        <SafeAreaView style={styles.flex} edges={['top', 'bottom']}>
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>Menu</Text>
+            <IconButton icon={<XIcon size={16} color={colors.muted} />} onPress={onClose} />
+          </View>
+
+          <View style={styles.info}>
+            <DatabaseIcon size={14} color={colors.muted} />
+            <Text style={styles.infoText}>{buildConfig().name}</Text>
+          </View>
+
+          <Divider />
+
+          <View style={styles.section}>
+            <Button label="Reset (local)" variant="ghost" disabled={busy} onPress={resetLocal} />
+            <Button label="Reset + Reconfigure" variant="dangerOutline" disabled={busy} onPress={resetAndReconfigure} />
+          </View>
+
+          <Divider />
+
+          <View style={styles.section}>
+            <Button
+              label="Logout"
+              variant="dangerSolid"
+              disabled={busy}
+              onPress={logout}
+              icon={<SignOutIcon size={16} color={colors.canvas} />}
+            />
+          </View>
+
+          {busy ? <ActivityIndicator color={colors.muted} style={styles.spinner} /> : null}
+          {lastResult ? (
+            <Text style={[styles.resultText, lastResult.startsWith('Error') && styles.errorText]} numberOfLines={3}>
+              {lastResult}
+            </Text>
+          ) : null}
+        </SafeAreaView>
+      </Animated.View>
+      </SafeAreaProvider>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  panel: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: colors.surface,
+    borderLeftWidth: 1,
+    borderLeftColor: colors.line,
+    padding: spacing.lg,
+    gap: spacing.md,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerTitle: { ...typography.sectionTitle, color: colors.ink },
+  info: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  infoText: { fontSize: 12, color: colors.muted, fontFamily: 'Menlo' },
+  section: { gap: spacing.sm },
+  spinner: { marginTop: spacing.xs },
+  resultText: {
+    marginTop: spacing.xs,
+    fontSize: 11,
+    color: colors.muted,
+    fontWeight: '500',
+  },
+  errorText: { color: colors.danger },
+});
diff --git a/example/src/components/ui/Button.tsx b/example/src/components/ui/Button.tsx
new file mode 100644
index 0000000..9c225ff
--- /dev/null
+++ b/example/src/components/ui/Button.tsx
@@ -0,0 +1,84 @@
+import React, { useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, ActivityIndicator, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radius, spacing, motion } from '../../theme/tokens';
+
+export type ButtonVariant = 'primary' | 'ghost' | 'dangerSolid' | 'dangerOutline' | 'text';
+export type ButtonSize = 'sm' | 'md';
+
+interface ButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Shared button — 5 variants matching the Studio's exact button vocabulary
+ * (primary green CTA / ghost outline / solid danger / outline danger / text-only),
+ * replacing the 5 divergent button heights and 6 border-radii found across
+ * the example app's screens before this redesign.
+ */
+export function Button({ label, onPress, variant = 'primary', size = 'md', disabled, loading, icon, style, testID }: ButtonProps): React.JSX.Element {
+  const scale = useRef(new Animated.Value(1)).current;
+  const isDisabled = disabled || loading;
+
+  function pressIn() {
+    Animated.timing(scale, { toValue: 0.97, duration: motion.fast, useNativeDriver: true }).start();
+  }
+  function pressOut() {
+    Animated.timing(scale, { toValue: 1, duration: motion.fast, useNativeDriver: true }).start();
+  }
+
+  const variantStyle = variantStyles[variant];
+  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
+
+  return (
+    <Animated.View style={[{ transform: [{ scale }] }, style]}>
+      <Pressable
+        onPress={onPress}
+        onPressIn={pressIn}
+        onPressOut={pressOut}
+        disabled={isDisabled}
+        testID={testID}
+        style={[styles.base, sizeStyle, variantStyle.container, isDisabled && styles.disabled]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={variantStyle.text.color} />
+        ) : (
+          <>
+            {icon}
+            <Text style={[styles.label, size === 'sm' && styles.labelSm, variantStyle.text]} numberOfLines={1}>{label}</Text>
+          </>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const variantStyles: Record<ButtonVariant, { container: ViewStyle; text: { color: string } }> = {
+  primary: { container: { backgroundColor: colors.accent, borderWidth: 0 }, text: { color: colors.accentInk } },
+  ghost: { container: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.line }, text: { color: colors.muted } },
+  dangerSolid: { container: { backgroundColor: colors.danger, borderWidth: 0 }, text: { color: colors.canvas } },
+  dangerOutline: { container: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.danger }, text: { color: colors.danger } },
+  text: { container: { backgroundColor: 'transparent', borderWidth: 0, paddingHorizontal: 0 }, text: { color: colors.muted } },
+};
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    borderRadius: radius.sm,
+  },
+  sizeMd: { height: 44, paddingHorizontal: spacing.lg },
+  sizeSm: { height: 34, paddingHorizontal: spacing.md },
+  label: { fontSize: 14, fontWeight: '600' },
+  labelSm: { fontSize: 12 },
+  disabled: { opacity: 0.4 },
+});
diff --git a/example/src/components/ui/Card.tsx b/example/src/components/ui/Card.tsx
new file mode 100644
index 0000000..f675fcb
--- /dev/null
+++ b/example/src/components/ui/Card.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radius, spacing } from '../../theme/tokens';
+
+interface CardProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Studio's flat panel recipe — `rounded-lg border border-line bg-surface`, no shadow. */
+export function Card({ children, style }: CardProps): React.JSX.Element {
+  return <View style={[styles.card, style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: colors.line,
+    backgroundColor: colors.surface,
+    padding: spacing.lg,
+  },
+});
diff --git a/example/src/components/ui/Divider.tsx b/example/src/components/ui/Divider.tsx
new file mode 100644
index 0000000..f22dc16
--- /dev/null
+++ b/example/src/components/ui/Divider.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { colors } from '../../theme/tokens';
+
+export function Divider(): React.JSX.Element {
+  return <View style={styles.line} />;
+}
+
+const styles = StyleSheet.create({
+  line: { height: StyleSheet.hairlineWidth, backgroundColor: colors.line },
+});
diff --git a/example/src/components/ui/EmptyState.tsx b/example/src/components/ui/EmptyState.tsx
new file mode 100644
index 0000000..f5fc24f
--- /dev/null
+++ b/example/src/components/ui/EmptyState.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, radius, spacing } from '../../theme/tokens';
+
+interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  message?: string;
+}
+
+/** Studio's dashed-border empty-table recipe. */
+export function EmptyState({ icon, title, message }: EmptyStateProps): React.JSX.Element {
+  return (
+    <View style={styles.wrapper}>
+      {icon}
+      <Text style={styles.title}>{title}</Text>
+      {message ? <Text style={styles.message}>{message}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    height: 160,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: colors.line,
+  },
+  title: { fontSize: 14, fontWeight: '600', color: colors.ink },
+  message: { fontSize: 12, color: colors.muted, textAlign: 'center', maxWidth: 240 },
+});
diff --git a/example/src/components/ui/IconButton.tsx b/example/src/components/ui/IconButton.tsx
new file mode 100644
index 0000000..185ac70
--- /dev/null
+++ b/example/src/components/ui/IconButton.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { colors, radius, spacing } from '../../theme/tokens';
+
+interface IconButtonProps {
+  icon: React.ReactNode;
+  onPress: () => void;
+  disabled?: boolean;
+  variant?: 'ghost' | 'danger';
+  testID?: string;
+}
+
+/** Icon-only control — Studio's `rounded-md border border-line p-1.5` pattern. */
+export function IconButton({ icon, onPress, disabled, variant = 'ghost', testID }: IconButtonProps): React.JSX.Element {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={({ pressed }) => [
+        styles.base,
+        variant === 'danger' && styles.danger,
+        pressed && styles.pressed,
+        disabled && styles.disabled,
+      ]}
+    >
+      {icon}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    width: 36,
+    height: 36,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    borderColor: colors.line,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.xs,
+  },
+  danger: { borderColor: colors.danger },
+  pressed: { borderColor: colors.lineStrong, backgroundColor: 'rgba(255,255,255,0.05)' },
+  disabled: { opacity: 0.4 },
+});
diff --git a/example/src/components/ui/Input.tsx b/example/src/components/ui/Input.tsx
new file mode 100644
index 0000000..472891a
--- /dev/null
+++ b/example/src/components/ui/Input.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { TextInput, View, Text, StyleSheet, type TextInputProps } from 'react-native';
+import { colors, radius, spacing } from '../../theme/tokens';
+
+interface InputProps extends TextInputProps {
+  label?: string;
+}
+
+/**
+ * One text-input pattern for the whole app — Studio's
+ * `bg-surface-2 border border-line focus:border-accent` recipe — replacing
+ * the 4 divergent input styles (pill, outlined, two different filled tones)
+ * found across screens before this redesign.
+ */
+export function Input({ label, style, onFocus, onBlur, ...rest }: InputProps): React.JSX.Element {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <View style={styles.wrapper}>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+      <TextInput
+        {...rest}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        placeholderTextColor={colors.muted}
+        style={[styles.input, focused && styles.inputFocused, style]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: { gap: spacing.xs },
+  label: { fontSize: 12, fontWeight: '600', color: colors.muted },
+  input: {
+    height: 44,
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    borderColor: colors.line,
+    backgroundColor: colors.surface2,
+    paddingHorizontal: spacing.md,
+    fontSize: 14,
+    color: colors.ink,
+  },
+  inputFocused: { borderColor: colors.accent },
+});
diff --git a/example/src/components/ui/ProgressBar.tsx b/example/src/components/ui/ProgressBar.tsx
new file mode 100644
index 0000000..f1f340c
--- /dev/null
+++ b/example/src/components/ui/ProgressBar.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { colors, radius } from '../../theme/tokens';
+
+interface ProgressBarProps {
+  /** 0–1. Values are clamped. */
+  progress: number;
+  tone?: 'accent' | 'danger' | 'ok';
+  height?: number;
+}
+
+const toneColor = { accent: colors.accent, danger: colors.danger, ok: colors.ok };
+
+/**
+ * One track/fill bar, reused by both the Query budget indicator and the
+ * Benchmark comparison bars — previously two separate implementations.
+ */
+export function ProgressBar({ progress, tone = 'accent', height = 8 }: ProgressBarProps): React.JSX.Element {
+  const pct = Math.max(0, Math.min(1, progress)) * 100;
+  return (
+    <View style={[styles.track, { height, borderRadius: height / 2 }]}>
+      <View style={[styles.fill, { width: `${pct}%`, backgroundColor: toneColor[tone], borderRadius: height / 2 }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { backgroundColor: colors.surface2, overflow: 'hidden', borderRadius: radius.sm },
+  fill: { height: '100%' },
+});
diff --git a/example/src/components/ui/ScreenHeader.tsx b/example/src/components/ui/ScreenHeader.tsx
new file mode 100644
index 0000000..9a07b85
--- /dev/null
+++ b/example/src/components/ui/ScreenHeader.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, spacing } from '../../theme/tokens';
+
+interface ScreenHeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+/**
+ * One title/subtitle recipe for every screen — replaces the 3 divergent
+ * title sizes (32/24/22) found across the app before this redesign.
+ */
+export function ScreenHeader({ title, subtitle }: ScreenHeaderProps): React.JSX.Element {
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.title}>{title}</Text>
+      {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: { paddingHorizontal: spacing.lg, paddingTop: spacing.sm, paddingBottom: spacing.sm, gap: spacing.xxs },
+  title: { fontSize: 24, fontWeight: '800', color: colors.ink, letterSpacing: -0.3 },
+  subtitle: { fontSize: 13, fontWeight: '500', color: colors.muted },
+});
diff --git a/example/src/components/ui/StatusBadge.tsx b/example/src/components/ui/StatusBadge.tsx
new file mode 100644
index 0000000..e9b418f
--- /dev/null
+++ b/example/src/components/ui/StatusBadge.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, Text, StyleSheet } from 'react-native';
+import { colors, alpha, radius, motion } from '../../theme/tokens';
+
+export type StatusKind = 'ok' | 'pending' | 'danger' | 'muted';
+
+interface StatusBadgeProps {
+  label: string;
+  status: StatusKind;
+  /** Animated pulse on the dot — Studio uses this for "live"/connecting states. */
+  pulse?: boolean;
+}
+
+const kindStyle: Record<StatusKind, { bg: string; border: string; text: string; dot: string }> = {
+  ok: { bg: alpha.ok10, border: alpha.ok25, text: colors.ok, dot: colors.ok },
+  pending: { bg: alpha.pending10, border: alpha.pending30, text: colors.brandYellow, dot: colors.brandYellow },
+  danger: { bg: alpha.danger10, border: alpha.danger30, text: colors.danger, dot: colors.danger },
+  muted: { bg: 'transparent', border: colors.line, text: colors.muted, dot: colors.muted },
+};
+
+/**
+ * Pill + dot — the Studio's StatusBadge recipe (connected/disconnected),
+ * reused here as the canonical way to surface sync_queue/metadata states
+ * instead of raw "PENDING 3 · FAILED 1" strings.
+ */
+export function StatusBadge({ label, status, pulse }: StatusBadgeProps): React.JSX.Element {
+  const opacity = useRef(new Animated.Value(1)).current;
+  const tone = kindStyle[status];
+
+  useEffect(() => {
+    if (!pulse) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.35, duration: motion.pulse / 2, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: motion.pulse / 2, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, opacity]);
+
+  return (
+    <View style={[styles.badge, { backgroundColor: tone.bg, borderColor: tone.border }]}>
+      <Animated.View style={[styles.dot, { backgroundColor: tone.dot, opacity: pulse ? opacity : 1 }]} />
+      <Text style={[styles.label, { color: tone.text }]}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: radius.pill,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    alignSelf: 'flex-start',
+  },
+  dot: { width: 6, height: 6, borderRadius: 3 },
+  label: { fontSize: 11, fontWeight: '600' },
+});
diff --git a/example/src/components/ui/Toast.tsx b/example/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..3aa6c1e
--- /dev/null
+++ b/example/src/components/ui/Toast.tsx
@@ -0,0 +1,79 @@
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { colors, radius, spacing } from '../../theme/tokens';
+
+export interface ToastContextValue {
+  showError: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const AUTO_DISMISS_MS = 4000;
+
+/**
+ * Global error banner — Studio's bottom toast recipe (danger dot + card,
+ * auto-dismiss). Mounted once at the app root via <ToastProvider>; screens
+ * call useToast().showError(message) instead of rendering their own inline
+ * error <Text>, so a failure surfaces the same way everywhere.
+ */
+export function ToastProvider({ children }: { children: React.ReactNode }): React.JSX.Element {
+  const [message, setMessage] = useState<string | null>(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const dismissTimer = useRef<number | null>(null);
+
+  const showError = useCallback(
+    (text: string) => {
+      clearTimeout(dismissTimer.current ?? undefined);
+      setMessage(text);
+      Animated.timing(opacity, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+      dismissTimer.current = setTimeout(() => {
+        Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMessage(null));
+      }, AUTO_DISMISS_MS) as unknown as number;
+    },
+    [opacity],
+  );
+
+  return (
+    <ToastContext.Provider value={{ showError }}>
+      {children}
+      {message ? (
+        <Animated.View pointerEvents="none" style={[styles.toast, { opacity }]}>
+          <View style={styles.dot} />
+          <Text style={styles.text} numberOfLines={2}>
+            {message}
+          </Text>
+        </Animated.View>
+      ) : null}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast() must be called within <ToastProvider>');
+  return ctx;
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: 'absolute',
+    left: spacing.lg,
+    right: spacing.lg,
+    bottom: spacing.xl,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderColor: 'rgba(251, 113, 117, 0.3)',
+    backgroundColor: colors.surface,
+    padding: spacing.md,
+    shadowColor: '#000',
+    shadowOpacity: 0.4,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6,
+  },
+  dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: colors.danger, marginTop: 5 },
+  text: { flex: 1, fontSize: 13, color: colors.ink },
+});
diff --git a/example/src/components/ui/index.ts b/example/src/components/ui/index.ts
new file mode 100644
index 0000000..bd99d74
--- /dev/null
+++ b/example/src/components/ui/index.ts
@@ -0,0 +1,10 @@
+export { Button, type ButtonVariant, type ButtonSize } from './Button';
+export { IconButton } from './IconButton';
+export { Input } from './Input';
+export { Card } from './Card';
+export { Divider } from './Divider';
+export { ScreenHeader } from './ScreenHeader';
+export { StatusBadge, type StatusKind } from './StatusBadge';
+export { EmptyState } from './EmptyState';
+export { ProgressBar } from './ProgressBar';
+export { ToastProvider, useToast, type ToastContextValue } from './Toast';
diff --git a/example/src/screens/BenchmarkScreen.tsx b/example/src/screens/BenchmarkScreen.tsx
index 6fff9c4..48af9c5 100644
--- a/example/src/screens/BenchmarkScreen.tsx
+++ b/example/src/screens/BenchmarkScreen.tsx
@@ -1,21 +1,12 @@
 import React, { useState } from 'react';
-import {
-  ActivityIndicator,
-  Pressable,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
+import { ActivityIndicator, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Database, gte, useDatabaseReady } from '@salve-software/react-native-salve-db';
 import { BenchmarkSchema } from '../schemas/BenchmarkSchema';
+import { Button, Card, Divider, Input, ProgressBar, ScreenHeader, useToast } from '../components/ui';
+import { LightningIcon } from '../theme/icons';
+import { colors, spacing } from '../theme/tokens';
 
-const ACCENT = '#5B5FEF';
-const GOOD = '#22B07D';
-const BAD = '#E14F62';
 const DEFAULT_ROWS = 5_000;
 
 interface BenchmarkResult {
@@ -29,17 +20,29 @@ interface BenchmarkResult {
 }
 
 /** Horizontal bar sized relative to the slowest measurement in the pair, so the two are visually comparable at a glance. */
-function TimingBar({ label, ms, rows, color, maxMs }: { label: string; ms: number; rows: number; color: string; maxMs: number }) {
-  const widthPct = maxMs === 0 ? 4 : Math.max(4, Math.round((ms / maxMs) * 100));
+function TimingBar({
+  label,
+  ms,
+  rows,
+  tone,
+  maxMs,
+}: {
+  label: string;
+  ms: number;
+  rows: number;
+  tone: 'accent' | 'danger';
+  maxMs: number;
+}) {
+  const progress = maxMs === 0 ? 0.04 : Math.max(0.04, ms / maxMs);
   return (
     <View style={styles.timingRow}>
       <View style={styles.timingHeader}>
         <Text style={styles.timingLabel}>{label}</Text>
-        <Text style={styles.timingValue}>{ms}ms · {rows} rows</Text>
-      </View>
-      <View style={styles.timingTrack}>
-        <View style={[styles.timingFill, { width: `${widthPct}%`, backgroundColor: color }]} />
+        <Text style={styles.timingValue}>
+          {ms}ms · {rows} rows
+        </Text>
       </View>
+      <ProgressBar progress={progress} tone={tone} height={10} />
     </View>
   );
 }
@@ -50,6 +53,7 @@ export function BenchmarkScreen(): React.JSX.Element {
   const [running, setRunning] = useState(false);
   const [result, setResult] = useState<BenchmarkResult | null>(null);
   const [runError, setRunError] = useState<string | null>(null);
+  const { showError } = useToast();
 
   function runBenchmark() {
     const rowCount = Math.max(1, Math.round(Number(rowCountInput)) || DEFAULT_ROWS);
@@ -102,7 +106,9 @@ export function BenchmarkScreen(): React.JSX.Element {
           unindexedScanRows: scanned.length,
         });
       } catch (err) {
-        setRunError(err instanceof Error ? err.message : String(err));
+        const message = err instanceof Error ? err.message : String(err);
+        setRunError(message);
+        showError(message);
       } finally {
         setRunning(false);
       }
@@ -112,55 +118,47 @@ export function BenchmarkScreen(): React.JSX.Element {
   const maxCompareMs = result ? Math.max(result.indexedSelectMs, result.unindexedScanMs, 1) : 1;
 
   return (
-    <SafeAreaView style={styles.safeArea} edges={['top']}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F4F5FA" />
+    <SafeAreaView style={styles.safeArea} edges={[]}>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
 
-      <View style={styles.header}>
-        <Text style={styles.title}>Benchmark</Text>
-        <Text style={styles.subtitle}>
-          {isReady ? 'Real SQLite timings, measured on this device' : 'Starting database…'}
-        </Text>
-      </View>
+      <ScreenHeader
+        title="Benchmark"
+        subtitle={isReady ? 'Real SQLite timings, measured on this device' : 'Starting database…'}
+      />
 
       {!isReady ? (
         <View style={styles.centered}>
-          {isLoading ? <ActivityIndicator color={ACCENT} size="large" /> : null}
+          {isLoading ? <ActivityIndicator color={colors.accent} size="large" /> : null}
           {error ? <Text style={styles.errorText}>Failed to start database: {String(error)}</Text> : null}
         </View>
       ) : (
         <ScrollView contentContainerStyle={styles.content}>
-          <View style={styles.controlsCard}>
-            <Text style={styles.controlsLabel}>Rows to insert</Text>
-            <View style={styles.controlsRow}>
-              <TextInput
-                style={styles.rowCountInput}
+          <Card>
+            <View style={styles.controlsBody}>
+              <Input
+                label="Rows to insert"
                 keyboardType="number-pad"
                 value={rowCountInput}
                 onChangeText={setRowCountInput}
                 editable={!running}
               />
-              <Pressable
+              <Button
+                variant="primary"
                 onPress={runBenchmark}
                 disabled={running}
-                style={({ pressed }) => [styles.runButton, running && styles.runButtonDisabled, pressed && !running ? styles.runButtonPressed : null]}
-              >
-                {running ? (
-                  <ActivityIndicator color="#FFFFFF" size="small" />
-                ) : (
-                  <Text style={styles.runButtonText}>Run benchmark</Text>
-                )}
-              </Pressable>
+                loading={running}
+                label="Run benchmark"
+                icon={running ? undefined : <LightningIcon size={16} color={colors.accentInk} weight="fill" />}
+              />
+              <Text style={styles.controlsHint}>
+                Clears the benchmark table, bulk-inserts inside one transaction, then times an
+                indexed `select()` against a raw-SQL unindexed scan.
+              </Text>
             </View>
-            <Text style={styles.controlsHint}>
-              Clears the benchmark table, bulk-inserts inside one transaction, then times an
-              indexed `select()` against a raw-SQL unindexed scan.
-            </Text>
-          </View>
-
-          {runError ? <Text style={styles.errorText}>{runError}</Text> : null}
+          </Card>
 
           {result ? (
-            <View style={styles.resultsCard}>
+            <Card>
               <View style={styles.statRow}>
                 <Text style={styles.statLabel}>Bulk insert ({result.rowCount} rows, 1 transaction)</Text>
                 <Text style={styles.statValue}>{result.insertMs}ms</Text>
@@ -169,24 +167,24 @@ export function BenchmarkScreen(): React.JSX.Element {
                 {Math.round(result.insertedCount / (result.insertMs / 1000 || 1)).toLocaleString()} rows/sec
               </Text>
 
-              <View style={styles.divider} />
+              <Divider />
 
               <Text style={styles.compareTitle}>Indexed range select vs. unindexed LIKE scan</Text>
               <TimingBar
                 label="Indexed select() — createdAt ≥ n-500"
                 ms={result.indexedSelectMs}
                 rows={result.indexedSelectRows}
-                color={GOOD}
+                tone="accent"
                 maxMs={maxCompareMs}
               />
               <TimingBar
                 label="Raw SQL — LIKE on unindexed column"
                 ms={result.unindexedScanMs}
                 rows={result.unindexedScanRows}
-                color={BAD}
+                tone="danger"
                 maxMs={maxCompareMs}
               />
-            </View>
+            </Card>
           ) : null}
         </ScrollView>
       )}
@@ -195,7 +193,7 @@ export function BenchmarkScreen(): React.JSX.Element {
 }
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#F4F5FA' },
+  safeArea: { flex: 1, backgroundColor: colors.canvas },
   centered: {
     flex: 1,
     alignItems: 'center',
@@ -203,92 +201,19 @@ const styles = StyleSheet.create({
     paddingHorizontal: 32,
     gap: 12,
   },
-  header: {
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 20,
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: '800',
-    color: '#1C1D3E',
-    letterSpacing: -0.5,
-  },
-  subtitle: {
-    marginTop: 4,
-    fontSize: 14,
-    color: '#8A8CA8',
-    fontWeight: '500',
-  },
   content: {
-    paddingHorizontal: 20,
-    paddingBottom: 24,
-    gap: 16,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.xl,
+    gap: spacing.lg,
   },
-  controlsCard: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    padding: 18,
-    gap: 10,
-    shadowColor: '#2B2D6B',
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 2,
-  },
-  controlsLabel: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#8A8CA8',
-  },
-  controlsRow: {
-    flexDirection: 'row',
-    gap: 10,
-  },
-  rowCountInput: {
-    width: 110,
-    height: 44,
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    backgroundColor: '#F4F5FA',
-    fontSize: 16,
-    color: '#1C1D3E',
-  },
-  runButton: {
-    flex: 1,
-    height: 44,
-    borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: ACCENT,
-  },
-  runButtonPressed: {
-    opacity: 0.85,
-  },
-  runButtonDisabled: {
-    backgroundColor: '#9C9EE8',
-  },
-  runButtonText: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: '#FFFFFF',
+  controlsBody: {
+    gap: spacing.md,
   },
   controlsHint: {
     fontSize: 12,
-    color: '#B4B6D0',
+    color: colors.muted,
     lineHeight: 17,
   },
-  resultsCard: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    padding: 18,
-    gap: 6,
-    shadowColor: '#2B2D6B',
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 2,
-  },
   statRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -297,65 +222,50 @@ const styles = StyleSheet.create({
   statLabel: {
     fontSize: 14,
     fontWeight: '600',
-    color: '#1C1D3E',
+    color: colors.ink,
     flexShrink: 1,
     marginRight: 8,
   },
   statValue: {
     fontSize: 18,
     fontWeight: '800',
-    color: ACCENT,
+    color: colors.accent,
   },
   statSub: {
     fontSize: 12,
-    color: '#8A8CA8',
-  },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: '#E1E2F0',
-    marginVertical: 10,
+    color: colors.muted,
   },
   compareTitle: {
     fontSize: 13,
     fontWeight: '600',
-    color: '#8A8CA8',
-    marginBottom: 8,
+    color: colors.muted,
+    marginBottom: spacing.sm,
   },
   timingRow: {
     marginBottom: 14,
+    gap: 6,
   },
   timingHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 6,
   },
   timingLabel: {
     fontSize: 13,
-    color: '#1C1D3E',
+    color: colors.ink,
     fontWeight: '500',
     flexShrink: 1,
     marginRight: 8,
   },
   timingValue: {
     fontSize: 13,
-    color: '#8A8CA8',
+    color: colors.muted,
     fontWeight: '600',
   },
-  timingTrack: {
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: '#F4F5FA',
-    overflow: 'hidden',
-  },
-  timingFill: {
-    height: '100%',
-    borderRadius: 5,
-  },
   errorText: {
     marginHorizontal: 20,
     marginBottom: 8,
     fontSize: 13,
-    color: '#E14F62',
+    color: colors.danger,
     fontWeight: '500',
     textAlign: 'center',
   },
diff --git a/example/src/screens/ExpensesScreen.tsx b/example/src/screens/ExpensesScreen.tsx
index 2f0d575..6149a1a 100644
--- a/example/src/screens/ExpensesScreen.tsx
+++ b/example/src/screens/ExpensesScreen.tsx
@@ -8,7 +8,6 @@ import {
   StatusBar,
   StyleSheet,
   Text,
-  TextInput,
   View,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -18,9 +17,10 @@ import { ExpenseSchema, type ExpenseCategory } from '../schemas/ExpenseSchema';
 import { BudgetSchema } from '../schemas/BudgetSchema';
 import { formatCurrency } from '../library/formatCurrency';
 import { formatTimestamp } from '../library/formatTimestamp';
+import { colors, radius, spacing, typography } from '../theme/tokens';
+import { CheckIcon, MagnifyingGlassIcon, PlusIcon, ReceiptIcon, TrashIcon } from '../theme/icons';
+import { Button, Card, EmptyState, IconButton, Input, ProgressBar, ScreenHeader, useToast } from '../components/ui';
 
-const ACCENT = '#5B5FEF';
-const DANGER = '#E14F62';
 const CATEGORIES: ExpenseCategory[] = ['food', 'transport', 'shopping', 'other'];
 const CATEGORY_EMOJI: Record<ExpenseCategory, string> = {
   food: '🍔',
@@ -52,11 +52,13 @@ function buildExpenseFilter(search: string, category: CategoryFilter, unpaidOnly
 
 export function ExpensesScreen(): React.JSX.Element {
   const { isReady, isLoading, error } = useDatabaseReady();
+  const toast = useToast();
 
   const [title, setTitle] = useState('');
   const [amountInput, setAmountInput] = useState('');
   const [category, setCategory] = useState<ExpenseCategory>('food');
   const [addError, setAddError] = useState<string | null>(null);
+  const [composerOpen, setComposerOpen] = useState(false);
 
   const [search, setSearch] = useState('');
   const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>('all');
@@ -95,6 +97,14 @@ export function ExpensesScreen(): React.JSX.Element {
     setCategoryTotals(rows);
   }, [expenses]);
 
+  useEffect(() => {
+    if (expensesError) toast.showError(`Query failed: ${String(expensesError)}`);
+  }, [expensesError, toast]);
+
+  useEffect(() => {
+    if (budgetError) toast.showError(`Budget query failed: ${String(budgetError)}`);
+  }, [budgetError, toast]);
+
   function addExpense() {
     setAddError(null);
     const trimmedTitle = title.trim();
@@ -144,45 +154,30 @@ export function ExpensesScreen(): React.JSX.Element {
   const overBudget = budget ? budget.spentCents >= budget.limitCents : false;
 
   return (
-    <SafeAreaView style={styles.safeArea} edges={['top']}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F4F5FA" />
+    <SafeAreaView style={styles.safeArea} edges={[]}>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
 
-      <View style={styles.header}>
-        <Text style={styles.title}>Expenses</Text>
-        <Text style={styles.subtitle}>
-          {isReady ? `${expenses?.length ?? 0} shown · powered by Salve DB` : 'Starting database…'}
-        </Text>
-      </View>
+      <ScreenHeader
+        title="Query"
+        subtitle={isReady ? `${expenses?.length ?? 0} shown · powered by Salve DB` : 'Starting database…'}
+      />
 
       {!isReady ? (
         <View style={styles.centered}>
-          {isLoading ? <ActivityIndicator color={ACCENT} size="large" /> : null}
+          {isLoading ? <ActivityIndicator color={colors.accent} size="large" /> : null}
           {error ? <Text style={styles.errorText}>Failed to start database: {String(error)}</Text> : null}
         </View>
       ) : (
-        <KeyboardAvoidingView
-          style={styles.flex}
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        >
-          {expensesError ? <Text style={styles.errorText}>Query failed: {String(expensesError)}</Text> : null}
-          {budgetError ? <Text style={styles.errorText}>Budget query failed: {String(budgetError)}</Text> : null}
-
+        <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
           {budget ? (
-            <View style={styles.budgetCard}>
+            <Card style={styles.budgetCard}>
               <View style={styles.budgetHeaderRow}>
                 <Text style={styles.budgetLabel}>Monthly budget</Text>
                 <Text style={[styles.budgetValue, overBudget && styles.budgetValueOver]}>
                   {formatCurrency(budget.spentCents)} / {formatCurrency(budget.limitCents)}
                 </Text>
               </View>
-              <View style={styles.budgetTrack}>
-                <View
-                  style={[
-                    styles.budgetFill,
-                    { width: `${spentPct}%`, backgroundColor: overBudget ? DANGER : ACCENT },
-                  ]}
-                />
-              </View>
+              <ProgressBar progress={spentPct / 100} tone={overBudget ? 'danger' : 'accent'} />
 
               {categoryTotals.length > 0 ? (
                 <View style={styles.categoryTotalsRow}>
@@ -195,24 +190,26 @@ export function ExpensesScreen(): React.JSX.Element {
                   ))}
                 </View>
               ) : null}
-            </View>
+            </Card>
           ) : null}
 
           <ScrollView contentContainerStyle={styles.listContent} keyboardShouldPersistTaps="handled">
             <View style={styles.filterRow}>
-              <TextInput
-                style={styles.searchInput}
-                placeholder="Search expenses…"
-                placeholderTextColor="#9B9DB8"
-                value={search}
-                onChangeText={setSearch}
-                returnKeyType="search"
-              />
+              <View style={styles.searchWrapper}>
+                <MagnifyingGlassIcon size={16} color={colors.muted} style={styles.searchIcon} />
+                <Input
+                  style={styles.searchInput}
+                  placeholder="Search expenses…"
+                  value={search}
+                  onChangeText={setSearch}
+                  returnKeyType="search"
+                />
+              </View>
               <Pressable
                 onPress={() => setUnpaidOnly((prev) => !prev)}
-                style={[styles.unpaidToggle, unpaidOnly && styles.unpaidToggleActive]}
+                style={[styles.chip, unpaidOnly && styles.chipActive]}
               >
-                <Text style={[styles.unpaidToggleText, unpaidOnly && styles.unpaidToggleTextActive]}>Unpaid</Text>
+                <Text style={[styles.chipText, unpaidOnly && styles.chipTextActive]}>Unpaid</Text>
               </Pressable>
             </View>
 
@@ -221,9 +218,9 @@ export function ExpensesScreen(): React.JSX.Element {
                 <Pressable
                   key={c}
                   onPress={() => setCategoryFilter(c)}
-                  style={[styles.categoryChip, categoryFilter === c && styles.categoryChipActive]}
+                  style={[styles.chip, categoryFilter === c && styles.chipActive]}
                 >
-                  <Text style={[styles.categoryChipText, categoryFilter === c && styles.categoryChipTextActive]}>
+                  <Text style={[styles.chipText, categoryFilter === c && styles.chipTextActive]}>
                     {c === 'all' ? 'All' : `${CATEGORY_EMOJI[c]} ${c}`}
                   </Text>
                 </Pressable>
@@ -231,91 +228,88 @@ export function ExpensesScreen(): React.JSX.Element {
             </View>
 
             {(expenses ?? []).length === 0 ? (
-              <View style={styles.empty}>
-                <Text style={styles.emptyEmoji}>💸</Text>
-                <Text style={styles.emptyText}>
-                  {search || unpaidOnly || categoryFilter !== 'all'
+              <EmptyState
+                icon={<ReceiptIcon size={32} color={colors.muted} />}
+                title={
+                  search || unpaidOnly || categoryFilter !== 'all'
                     ? 'No expenses match this filter.'
-                    : 'No expenses yet — add your first one below.'}
-                </Text>
-              </View>
+                    : 'No expenses yet — add your first one below.'
+                }
+              />
             ) : (
               (expenses ?? []).map((item) => (
-                <View key={item.id} style={styles.card}>
+                <View key={item.id} style={styles.row}>
                   <Pressable onPress={() => togglePaid(item.id, item.paid)} hitSlop={12} style={styles.paidCheckbox}>
                     <View style={[styles.paidCheckboxBox, item.paid && styles.paidCheckboxBoxChecked]}>
-                      {item.paid ? <Text style={styles.paidCheckboxMark}>✓</Text> : null}
+                      {item.paid ? <CheckIcon size={12} color={colors.accentInk} weight="bold" /> : null}
                     </View>
                   </Pressable>
-                  <View style={styles.cardBody}>
-                    <Text style={[styles.cardTitle, item.paid && styles.cardTitlePaid]}>{item.title}</Text>
-                    <Text style={styles.cardMeta}>
-                      {CATEGORY_EMOJI[item.category as ExpenseCategory] ?? '📦'} {item.category} · {formatTimestamp(item.createdAt)}
+                  <View style={styles.rowBody}>
+                    <Text style={[styles.rowTitle, item.paid && styles.rowTitlePaid]}>{item.title}</Text>
+                    <Text style={styles.rowMeta}>
+                      {CATEGORY_EMOJI[item.category as ExpenseCategory] ?? '📦'} {item.category} ·{' '}
+                      {formatTimestamp(item.createdAt)}
                     </Text>
                   </View>
-                  <Text style={styles.cardAmount}>{formatCurrency(item.amountCents)}</Text>
-                  <Pressable
+                  <Text style={styles.rowAmount}>{formatCurrency(item.amountCents)}</Text>
+                  <IconButton
+                    icon={<TrashIcon size={16} color={colors.muted} />}
                     onPress={() => removeExpense(item.id, item.amountCents)}
-                    hitSlop={12}
-                    style={styles.deleteButton}
-                  >
-                    <Text style={styles.deleteButtonText}>✕</Text>
-                  </Pressable>
+                  />
                 </View>
               ))
             )}
           </ScrollView>
 
-          {addError ? <Text style={styles.errorText}>{addError}</Text> : null}
-
-          <View style={styles.composer}>
-            <View style={styles.categoryPicker}>
-              {CATEGORIES.map((c) => (
-                <Pressable
-                  key={c}
-                  onPress={() => setCategory(c)}
-                  style={[styles.categoryPickerChip, category === c && styles.categoryPickerChipActive]}
-                >
-                  <Text style={styles.categoryPickerChipText}>{CATEGORY_EMOJI[c]}</Text>
-                  <Text style={[styles.categoryPickerChipLabel, category === c && styles.categoryPickerChipLabelActive]}>
-                    {c}
-                  </Text>
-                </Pressable>
-              ))}
-            </View>
+          <View style={styles.composerArea}>
+            {composerOpen ? (
+              <Card style={styles.composerCard}>
+                <View style={styles.categoryPicker}>
+                  {CATEGORIES.map((c) => (
+                    <Pressable
+                      key={c}
+                      onPress={() => setCategory(c)}
+                      style={[styles.categoryPickerChip, category === c && styles.categoryPickerChipActive]}
+                    >
+                      <Text style={styles.categoryPickerChipEmoji}>{CATEGORY_EMOJI[c]}</Text>
+                      <Text
+                        style={[styles.categoryPickerChipLabel, category === c && styles.categoryPickerChipLabelActive]}
+                      >
+                        {c}
+                      </Text>
+                    </Pressable>
+                  ))}
+                </View>
 
-            <TextInput
-              style={styles.titleInput}
-              placeholder="What did you buy?"
-              placeholderTextColor="#9B9DB8"
-              value={title}
-              onChangeText={setTitle}
-              returnKeyType="next"
-            />
-
-            <View style={styles.amountRow}>
-              <TextInput
-                style={styles.amountInput}
-                placeholder="Amount ($)"
-                placeholderTextColor="#9B9DB8"
-                keyboardType="decimal-pad"
-                value={amountInput}
-                onChangeText={setAmountInput}
-                onSubmitEditing={addExpense}
-                returnKeyType="done"
+                <Input placeholder="What did you buy?" value={title} onChangeText={setTitle} returnKeyType="next" />
+
+                {addError ? <Text style={styles.errorText}>{addError}</Text> : null}
+
+                <View style={styles.amountRow}>
+                  <Input
+                    style={styles.amountInput}
+                    placeholder="Amount ($)"
+                    keyboardType="decimal-pad"
+                    value={amountInput}
+                    onChangeText={setAmountInput}
+                    onSubmitEditing={addExpense}
+                    returnKeyType="done"
+                  />
+                  <Button
+                    label="Confirm"
+                    onPress={addExpense}
+                    disabled={!title.trim() || !amountInput.trim()}
+                    style={styles.confirmButton}
+                  />
+                </View>
+              </Card>
+            ) : (
+              <Button
+                label="Add expense"
+                icon={<PlusIcon size={18} color={colors.accentInk} />}
+                onPress={() => setComposerOpen(true)}
               />
-              <Pressable
-                onPress={addExpense}
-                disabled={!title.trim() || !amountInput.trim()}
-                style={({ pressed }) => [
-                  styles.addButton,
-                  (!title.trim() || !amountInput.trim()) && styles.addButtonDisabled,
-                  pressed && title.trim() && amountInput.trim() ? styles.addButtonPressed : null,
-                ]}
-              >
-                <Text style={styles.addButtonText}>Add expense</Text>
-              </Pressable>
-            </View>
+            )}
           </View>
         </KeyboardAvoidingView>
       )}
@@ -324,323 +318,146 @@ export function ExpensesScreen(): React.JSX.Element {
 }
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#F4F5FA' },
+  safeArea: { flex: 1, backgroundColor: colors.canvas },
   flex: { flex: 1 },
   centered: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 32,
-    gap: 12,
-  },
-  header: {
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 16,
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: '800',
-    color: '#1C1D3E',
-    letterSpacing: -0.5,
-  },
-  subtitle: {
-    marginTop: 4,
-    fontSize: 14,
-    color: '#8A8CA8',
-    fontWeight: '500',
+    paddingHorizontal: spacing.xxl,
+    gap: spacing.md,
   },
   budgetCard: {
-    marginHorizontal: 20,
-    marginBottom: 14,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    padding: 16,
-    shadowColor: '#2B2D6B',
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 2,
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.md,
   },
   budgetHeaderRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 8,
-  },
-  budgetLabel: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#8A8CA8',
-  },
-  budgetValue: {
-    fontSize: 13,
-    fontWeight: '700',
-    color: '#1C1D3E',
-  },
-  budgetValueOver: {
-    color: DANGER,
-  },
-  budgetTrack: {
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#F4F5FA',
-    overflow: 'hidden',
-  },
-  budgetFill: {
-    height: '100%',
-    borderRadius: 4,
+    marginBottom: spacing.sm,
   },
+  budgetLabel: { ...typography.label, color: colors.muted },
+  budgetValue: { ...typography.label, color: colors.ink },
+  budgetValueOver: { color: colors.danger },
   categoryTotalsRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 6,
-    marginTop: 12,
+    gap: spacing.xs,
+    marginTop: spacing.md,
   },
   categoryTotalChip: {
-    paddingVertical: 4,
-    paddingHorizontal: 10,
-    borderRadius: 12,
-    backgroundColor: '#F4F5FA',
-  },
-  categoryTotalText: {
-    fontSize: 11,
-    fontWeight: '600',
-    color: '#8A8CA8',
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.md,
+    borderRadius: radius.pill,
+    backgroundColor: colors.surface2,
   },
+  categoryTotalText: { ...typography.caption, color: colors.muted },
   listContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 12,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.md,
     flexGrow: 1,
   },
   filterRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
-    marginBottom: 10,
-  },
-  searchInput: {
-    flex: 1,
-    height: 40,
-    borderRadius: 20,
-    paddingHorizontal: 16,
-    backgroundColor: '#FFFFFF',
-    fontSize: 13,
-    color: '#1C1D3E',
-  },
-  unpaidToggle: {
-    paddingVertical: 9,
-    paddingHorizontal: 14,
-    borderRadius: 20,
-    backgroundColor: '#FFFFFF',
-  },
-  unpaidToggleActive: {
-    backgroundColor: ACCENT,
-  },
-  unpaidToggleText: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: '#8A8CA8',
-  },
-  unpaidToggleTextActive: {
-    color: '#FFFFFF',
+    gap: spacing.sm,
+    marginBottom: spacing.sm,
   },
+  searchWrapper: { flex: 1, justifyContent: 'center' },
+  searchIcon: { position: 'absolute', left: spacing.md, zIndex: 1 },
+  searchInput: { paddingLeft: spacing.xl + spacing.xs },
   categoryFilterRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 8,
-    marginBottom: 14,
-  },
-  categoryChip: {
-    paddingVertical: 7,
-    paddingHorizontal: 14,
-    borderRadius: 16,
-    backgroundColor: '#FFFFFF',
-  },
-  categoryChipActive: {
-    backgroundColor: ACCENT,
-  },
-  categoryChipText: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: '#8A8CA8',
-    textTransform: 'capitalize',
-  },
-  categoryChipTextActive: {
-    color: '#FFFFFF',
-  },
-  card: {
+    gap: spacing.sm,
+    marginBottom: spacing.md,
+  },
+  chip: {
+    paddingVertical: spacing.sm - 1,
+    paddingHorizontal: spacing.md,
+    borderRadius: radius.pill,
+    backgroundColor: colors.surface2,
+  },
+  chipActive: { backgroundColor: colors.accent },
+  chipText: { ...typography.caption, color: colors.muted, textTransform: 'capitalize' },
+  chipTextActive: { color: colors.accentInk },
+  row: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    paddingVertical: 14,
-    paddingHorizontal: 16,
-    marginBottom: 10,
-    shadowColor: '#2B2D6B',
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 2,
-  },
-  paidCheckbox: {
-    marginRight: 12,
-  },
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.line,
+    borderRadius: radius.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    marginBottom: spacing.sm,
+    gap: spacing.sm,
+  },
+  paidCheckbox: {},
   paidCheckboxBox: {
     width: 22,
     height: 22,
     borderRadius: 11,
     borderWidth: 2,
-    borderColor: '#D5D6EC',
+    borderColor: colors.line,
     alignItems: 'center',
     justifyContent: 'center',
   },
   paidCheckboxBoxChecked: {
-    backgroundColor: ACCENT,
-    borderColor: ACCENT,
-  },
-  paidCheckboxMark: {
-    color: '#FFFFFF',
-    fontSize: 11,
-    fontWeight: '700',
-  },
-  cardBody: {
-    flex: 1,
-    marginRight: 8,
+    backgroundColor: colors.accent,
+    borderColor: colors.accent,
   },
-  cardTitle: {
-    fontSize: 15,
-    fontWeight: '600',
-    color: '#1C1D3E',
-  },
-  cardTitlePaid: {
-    textDecorationLine: 'line-through',
-    color: '#B4B6D0',
-  },
-  cardMeta: {
+  rowBody: { flex: 1 },
+  rowTitle: { fontSize: 15, fontWeight: '600', color: colors.ink },
+  rowTitlePaid: { textDecorationLine: 'line-through', color: colors.muted },
+  rowMeta: {
     marginTop: 2,
-    fontSize: 11,
-    color: '#A6A8C4',
-    fontWeight: '500',
+    ...typography.caption,
+    color: colors.muted,
     textTransform: 'capitalize',
   },
-  cardAmount: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: '#1C1D3E',
-    marginRight: 10,
-  },
-  deleteButton: {
-    width: 26,
-    height: 26,
-    borderRadius: 13,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#F4F5FA',
-  },
-  deleteButtonText: {
-    fontSize: 12,
-    color: '#B4B6D0',
-    fontWeight: '700',
-  },
-  empty: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 60,
-    gap: 8,
-  },
-  emptyEmoji: {
-    fontSize: 36,
-  },
-  emptyText: {
-    fontSize: 14,
-    color: '#9B9DB8',
-    fontWeight: '500',
-    textAlign: 'center',
-  },
+  rowAmount: { fontSize: 14, fontWeight: '700', color: colors.ink },
   errorText: {
-    marginHorizontal: 20,
-    marginBottom: 8,
+    marginBottom: spacing.sm,
     fontSize: 13,
-    color: '#E14F62',
+    color: colors.danger,
     fontWeight: '500',
     textAlign: 'center',
   },
-  composer: {
-    gap: 12,
-    paddingHorizontal: 20,
-    paddingTop: 14,
-    paddingBottom: 16,
-    backgroundColor: '#F4F5FA',
+  composerArea: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.md,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#E1E2F0',
+    borderTopColor: colors.line,
   },
+  composerCard: { gap: spacing.md },
   categoryPicker: {
     flexDirection: 'row',
-    gap: 8,
+    gap: spacing.sm,
   },
   categoryPickerChip: {
     flex: 1,
     height: 52,
-    borderRadius: 14,
+    borderRadius: radius.md,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 2,
-    backgroundColor: '#FFFFFF',
-  },
-  categoryPickerChipActive: {
-    backgroundColor: '#E4E4FB',
-  },
-  categoryPickerChipText: {
-    fontSize: 17,
+    gap: spacing.xxs,
+    backgroundColor: colors.surface2,
   },
+  categoryPickerChipActive: { backgroundColor: colors.accent },
+  categoryPickerChipEmoji: { fontSize: 17 },
   categoryPickerChipLabel: {
-    fontSize: 10,
-    fontWeight: '600',
-    color: '#9B9DB8',
+    ...typography.caption,
+    color: colors.muted,
     textTransform: 'capitalize',
   },
-  categoryPickerChipLabelActive: {
-    color: ACCENT,
-  },
-  titleInput: {
-    height: 50,
-    borderRadius: 14,
-    paddingHorizontal: 18,
-    backgroundColor: '#FFFFFF',
-    fontSize: 15,
-    color: '#1C1D3E',
-  },
+  categoryPickerChipLabelActive: { color: colors.accentInk },
   amountRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
-  },
-  amountInput: {
-    flex: 1,
-    height: 50,
-    borderRadius: 14,
-    paddingHorizontal: 18,
-    backgroundColor: '#FFFFFF',
-    fontSize: 15,
-    color: '#1C1D3E',
-  },
-  addButton: {
-    height: 50,
-    paddingHorizontal: 20,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: ACCENT,
-  },
-  addButtonPressed: {
-    opacity: 0.85,
-  },
-  addButtonDisabled: {
-    backgroundColor: '#C6C7E8',
-  },
-  addButtonText: {
-    fontSize: 14,
-    color: '#FFFFFF',
-    fontWeight: '700',
+    gap: spacing.sm,
   },
+  amountInput: { flex: 1 },
+  confirmButton: { paddingHorizontal: spacing.lg },
 });
diff --git a/example/src/screens/InfiniteQueryScreen.tsx b/example/src/screens/InfiniteQueryScreen.tsx
index b7c25c5..e43aec9 100644
--- a/example/src/screens/InfiniteQueryScreen.tsx
+++ b/example/src/screens/InfiniteQueryScreen.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, Pressable, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Database, useDatabaseReady, useInfiniteQuery } from '@salve-software/react-native-salve-db';
 import { FeedItemSchema } from '../schemas/FeedItemSchema';
 import { formatTimestamp } from '../library/formatTimestamp';
+import { Button, Card, EmptyState, IconButton, ScreenHeader, useToast } from '../components/ui';
+import { colors, spacing, typography } from '../theme/tokens';
+import { DotsThreeVerticalIcon, TrayIcon } from '../theme/icons';
 
-const ACCENT = '#5B5FEF';
 const PAGE_SIZE = 10;
 const SEED_COUNT = 50;
 
@@ -19,6 +21,8 @@ const SEED_COUNT = 50;
  */
 export function InfiniteQueryScreen(): React.JSX.Element {
   const { isReady, isLoading: dbLoading, error: dbError } = useDatabaseReady();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { showError } = useToast();
 
   const {
     data: items,
@@ -32,7 +36,14 @@ export function InfiniteQueryScreen(): React.JSX.Element {
     pageSize: PAGE_SIZE,
   });
 
+  useEffect(() => {
+    if (itemsError) {
+      showError(`Query failed: ${String(itemsError)}`);
+    }
+  }, [itemsError, showError]);
+
   function seedItems() {
+    setMenuOpen(false);
     const startIndex = Database.count(FeedItemSchema).execute();
     const base = Date.now();
     const rows = Array.from({ length: SEED_COUNT }, (_, i) => ({
@@ -44,6 +55,7 @@ export function InfiniteQueryScreen(): React.JSX.Element {
   }
 
   function addOne() {
+    setMenuOpen(false);
     const startIndex = Database.count(FeedItemSchema).execute();
     Database.insert(FeedItemSchema)
       .values({ id: startIndex, title: `Item #${startIndex + 1}`, createdAt: Date.now() })
@@ -55,188 +67,137 @@ export function InfiniteQueryScreen(): React.JSX.Element {
   // which skips the update hook the reactive subscription relies on — the list won't
   // refresh until some other write touches the table.
   function clearAll() {
+    setMenuOpen(false);
     Database.delete(FeedItemSchema).execute();
   }
 
   return (
-    <SafeAreaView style={styles.safeArea} edges={['top']}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F4F5FA" />
+    <SafeAreaView style={styles.safeArea} edges={[]}>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
 
-      <View style={styles.header}>
-        <Text style={styles.title}>Infinite Query</Text>
-        <Text style={styles.subtitle}>
-          {isReady
-            ? `${items?.length ?? 0} loaded${hasNextPage ? ' · more available' : items && items.length > 0 ? ' · all loaded' : ''}`
-            : 'Starting database…'}
-        </Text>
+      <View style={styles.headerRow}>
+        <View style={styles.headerTitle}>
+          <ScreenHeader
+            title="Infinite Query"
+            subtitle={
+              isReady
+                ? `${items?.length ?? 0} loaded${hasNextPage ? ' · more available' : items && items.length > 0 ? ' · all loaded' : ''}`
+                : 'Starting database…'
+            }
+          />
+        </View>
+        <View style={styles.headerAction}>
+          <IconButton icon={<DotsThreeVerticalIcon size={18} color={colors.ink} />} onPress={() => setMenuOpen((v) => !v)} />
+          {menuOpen ? (
+            <>
+              <Pressable style={styles.menuBackdrop} onPress={() => setMenuOpen(false)} />
+              <Card style={styles.menu}>
+                <Button variant="text" label={`Seed ${SEED_COUNT}`} onPress={seedItems} />
+                <Button variant="text" label="Add one" onPress={addOne} />
+                <Button variant="text" label="Clear all" onPress={clearAll} />
+              </Card>
+            </>
+          ) : null}
+        </View>
       </View>
 
       {!isReady ? (
         <View style={styles.centered}>
-          {dbLoading ? <ActivityIndicator color={ACCENT} size="large" /> : null}
+          {dbLoading ? <ActivityIndicator color={colors.accent} size="large" /> : null}
           {dbError ? <Text style={styles.errorText}>Failed to start database: {String(dbError)}</Text> : null}
         </View>
       ) : (
-        <>
-          <View style={styles.controlsRow}>
-            <Pressable onPress={seedItems} style={styles.controlButton}>
-              <Text style={styles.controlButtonText}>Seed {SEED_COUNT}</Text>
-            </Pressable>
-            <Pressable onPress={addOne} style={styles.controlButton}>
-              <Text style={styles.controlButtonText}>Add one</Text>
-            </Pressable>
-            <Pressable onPress={clearAll} style={[styles.controlButton, styles.clearButton]}>
-              <Text style={[styles.controlButtonText, styles.clearButtonText]}>Clear all</Text>
-            </Pressable>
-          </View>
-
-          {itemsError ? <Text style={styles.errorText}>Query failed: {String(itemsError)}</Text> : null}
+        <ScrollView contentContainerStyle={styles.listContent}>
+          {itemsLoading ? (
+            <View style={styles.centered}>
+              <ActivityIndicator color={colors.accent} size="small" />
+            </View>
+          ) : (items ?? []).length === 0 ? (
+            <EmptyState icon={<TrayIcon size={32} color={colors.muted} />} title="No items yet" message="Seed some to test pagination." />
+          ) : (
+            (items ?? []).map((item) => (
+              <Card key={item.id} style={styles.card}>
+                <Text style={styles.cardTitle}>{item.title}</Text>
+                <Text style={styles.cardMeta}>{formatTimestamp(item.createdAt)}</Text>
+              </Card>
+            ))
+          )}
 
-          <ScrollView contentContainerStyle={styles.listContent}>
-            {itemsLoading ? (
-              <View style={styles.centered}>
-                <ActivityIndicator color={ACCENT} size="small" />
-              </View>
-            ) : (items ?? []).length === 0 ? (
-              <View style={styles.empty}>
-                <Text style={styles.emptyEmoji}>📭</Text>
-                <Text style={styles.emptyText}>No items yet — seed some to test pagination.</Text>
-              </View>
-            ) : (
-              (items ?? []).map((item) => (
-                <View key={item.id} style={styles.card}>
-                  <Text style={styles.cardTitle}>{item.title}</Text>
-                  <Text style={styles.cardMeta}>{formatTimestamp(item.createdAt)}</Text>
-                </View>
-              ))
-            )}
-
-            {hasNextPage ? (
-              <Pressable onPress={fetchNextPage} style={styles.loadMoreButton}>
-                <Text style={styles.loadMoreButtonText}>Load more</Text>
-              </Pressable>
-            ) : null}
-          </ScrollView>
-        </>
+          {hasNextPage ? <Button variant="ghost" label="Load more" onPress={fetchNextPage} style={styles.loadMoreButton} /> : null}
+        </ScrollView>
       )}
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#F4F5FA' },
+  safeArea: { flex: 1, backgroundColor: colors.canvas },
   centered: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 32,
-    gap: 12,
-  },
-  header: {
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 16,
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: '800',
-    color: '#1C1D3E',
-    letterSpacing: -0.5,
+    paddingHorizontal: spacing.xxl,
+    gap: spacing.md,
   },
-  subtitle: {
-    marginTop: 4,
-    fontSize: 14,
-    color: '#8A8CA8',
-    fontWeight: '500',
-  },
-  controlsRow: {
+  headerRow: {
     flexDirection: 'row',
-    gap: 8,
-    paddingHorizontal: 20,
-    marginBottom: 14,
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    paddingRight: spacing.lg,
   },
-  controlButton: {
+  headerTitle: {
     flex: 1,
-    height: 40,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
   },
-  controlButtonText: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: ACCENT,
-  },
-  clearButton: {
-    backgroundColor: '#FDEBEE',
-  },
-  clearButtonText: {
-    color: '#E14F62',
+  headerAction: {
+    marginTop: spacing.md,
+  },
+  menuBackdrop: {
+    position: 'absolute',
+    top: -1000,
+    left: -1000,
+    right: -1000,
+    bottom: -1000,
+  },
+  menu: {
+    position: 'absolute',
+    top: 44,
+    right: 0,
+    width: 160,
+    padding: spacing.xs,
+    gap: spacing.xxs,
+    zIndex: 10,
+    elevation: 10,
   },
   listContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 24,
+    paddingHorizontal: spacing.lg,
+    paddingBottom: spacing.xl,
     flexGrow: 1,
+    gap: spacing.sm,
   },
   card: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    paddingVertical: 14,
-    paddingHorizontal: 16,
-    marginBottom: 10,
-    shadowColor: '#2B2D6B',
-    shadowOpacity: 0.06,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 2,
+    paddingVertical: spacing.md,
   },
   cardTitle: {
-    fontSize: 15,
+    ...typography.body,
     fontWeight: '600',
-    color: '#1C1D3E',
+    color: colors.ink,
   },
   cardMeta: {
-    fontSize: 11,
-    color: '#A6A8C4',
-    fontWeight: '500',
+    ...typography.caption,
+    color: colors.muted,
   },
   loadMoreButton: {
     alignSelf: 'center',
-    marginTop: 4,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 16,
-    backgroundColor: '#FFFFFF',
-  },
-  loadMoreButtonText: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: ACCENT,
-  },
-  empty: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 60,
-    gap: 8,
-  },
-  emptyEmoji: {
-    fontSize: 36,
-  },
-  emptyText: {
-    fontSize: 14,
-    color: '#9B9DB8',
-    fontWeight: '500',
-    textAlign: 'center',
+    marginTop: spacing.xs,
   },
   errorText: {
-    marginHorizontal: 20,
-    marginBottom: 8,
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.sm,
     fontSize: 13,
-    color: '#E14F62',
+    color: colors.danger,
     fontWeight: '500',
     textAlign: 'center',
   },
diff --git a/example/src/screens/LoginScreen.tsx b/example/src/screens/LoginScreen.tsx
index 0e48fee..e83332c 100644
--- a/example/src/screens/LoginScreen.tsx
+++ b/example/src/screens/LoginScreen.tsx
@@ -1,21 +1,10 @@
 import React, { useState } from 'react';
-import {
-  ActivityIndicator,
-  KeyboardAvoidingView,
-  Platform,
-  Pressable,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from 'react-native';
+import { KeyboardAvoidingView, Platform, StatusBar, StyleSheet, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Button, Card, Input } from '../components/ui';
+import { colors, spacing, typography } from '../theme/tokens';
 import { SYNC_SERVER_BASE_URL } from '../library/syncServer';
 
-const ACCENT = '#5B5FEF';
-const DANGER = '#E14F62';
-
 export interface LoginTokens {
   accessToken: string;
   refreshToken: string;
@@ -58,100 +47,61 @@ export function LoginScreen({ onLoginSuccess }: LoginScreenProps): React.JSX.Ele
 
   return (
     <SafeAreaView style={styles.safeArea}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F4F5FA" />
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
       <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
-        <View style={styles.card}>
+        <Card style={styles.card}>
           <Text style={styles.title}>Salve DB Example</Text>
           <Text style={styles.subtitle}>
             Sign in against salve-db-server's mock oauth2 user to exercise the native
             refresh-on-401 flow.
           </Text>
 
-          <TextInput
-            style={styles.input}
+          <Input
+            label="Email"
             value={email}
             onChangeText={setEmail}
             autoCapitalize="none"
             keyboardType="email-address"
-            placeholder="Email"
-            placeholderTextColor="#9B9DB8"
-          />
-          <TextInput
-            style={styles.input}
-            value={password}
-            onChangeText={setPassword}
-            secureTextEntry
-            placeholder="Password"
-            placeholderTextColor="#9B9DB8"
           />
+          <Input label="Password" value={password} onChangeText={setPassword} secureTextEntry />
 
-          <Pressable
-            style={[styles.button, busy && styles.buttonDisabled]}
+          <Button
+            variant="primary"
+            loading={busy}
             disabled={busy}
+            label={busy ? 'Signing in…' : 'Sign in'}
             onPress={submit}
-          >
-            <Text style={styles.buttonText}>{busy ? 'Signing in…' : 'Sign in'}</Text>
-          </Pressable>
+            style={styles.button}
+          />
 
-          {busy ? <ActivityIndicator color={ACCENT} style={styles.spinner} /> : null}
           {error ? <Text style={styles.errorText}>{error}</Text> : null}
-        </View>
+        </Card>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#F4F5FA' },
+  safeArea: { flex: 1, backgroundColor: colors.canvas },
   flex: { flex: 1, justifyContent: 'center' },
   card: {
-    marginHorizontal: 24,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    padding: 20,
-    gap: 12,
+    marginHorizontal: spacing.xl,
+    gap: spacing.md,
   },
   title: {
-    fontSize: 24,
-    fontWeight: '800',
-    color: '#1C1D3E',
+    ...typography.title,
+    color: colors.ink,
   },
   subtitle: {
-    fontSize: 13,
-    color: '#8A8CA8',
-    fontWeight: '500',
-    marginBottom: 4,
-  },
-  input: {
-    height: 44,
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    backgroundColor: '#F4F5FA',
-    fontSize: 14,
-    color: '#1C1D3E',
+    ...typography.body,
+    color: colors.muted,
+    marginBottom: spacing.xs,
   },
   button: {
-    height: 44,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: ACCENT,
-    marginTop: 4,
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  buttonText: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: '#FFFFFF',
-  },
-  spinner: {
-    marginTop: 4,
+    marginTop: spacing.xs,
   },
   errorText: {
-    fontSize: 12,
-    color: DANGER,
-    fontWeight: '500',
+    ...typography.caption,
+    color: colors.danger,
   },
 });
diff --git a/example/src/screens/SyncTestScreen.tsx b/example/src/screens/SyncTestScreen.tsx
index ea1e483..a91250b 100644
--- a/example/src/screens/SyncTestScreen.tsx
+++ b/example/src/screens/SyncTestScreen.tsx
@@ -3,12 +3,10 @@ import {
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
-  Pressable,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
-  TextInput,
   View,
 } from 'react-native';
 import type { KeyboardTypeOptions } from 'react-native';
@@ -19,17 +17,29 @@ import { UserSchema } from '../schemas/UserSchema';
 import { ProductSchema } from '../schemas/ProductSchema';
 import { SYNC_SERVER_BASE_URL } from '../library/syncServer';
 import { formatTimestamp } from '../library/formatTimestamp';
-
-const ACCENT = '#5B5FEF';
-const DANGER = '#E14F62';
+import { Button, Card, IconButton, Input, ScreenHeader, StatusBadge, useToast, type StatusKind } from '../components/ui';
+import { CaretDownIcon, PencilSimpleIcon, TrashIcon } from '../theme/icons';
+import { colors, spacing } from '../theme/tokens';
 
 interface StatusCounts {
   [status: string]: number;
 }
 
-function formatCounts(counts: StatusCounts): string {
-  const entries = Object.entries(counts);
-  return entries.length === 0 ? 'none' : entries.map(([status, count]) => `${status} ${count}`).join(' · ');
+/** Maps a raw sync_queue/_salve_sync_metadata status string onto the shared <StatusBadge> vocabulary. */
+function statusToBadgeKind(status: string): StatusKind {
+  switch (status) {
+    case 'PENDING':
+      return 'pending';
+    case 'FAILED':
+    case 'BLOCKED':
+      return 'danger';
+    case 'SYNCED':
+      return 'ok';
+    case 'DELETED':
+      return 'muted';
+    default:
+      return 'muted';
+  }
 }
 
 /** Re-reads sync_queue/_salve_sync_metadata status breakdowns whenever `refreshKey` changes — surfaces PENDING/FAILED/BLOCKED and SYNCED/DELETED without opening the DB by hand. */
@@ -92,9 +102,16 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
   const [editingId, setEditingId] = useState<number | null>(null);
   const [busy, setBusy] = useState(false);
   const [lastResult, setLastResult] = useState<string | null>(null);
+  const [showDetails, setShowDetails] = useState(false);
+  const toast = useToast();
 
   const { queue: queueCounts, metadata: metadataCounts } = useSyncStateCounts(schema.name, items);
 
+  useEffect(() => {
+    if (itemsError) toast.showError(`Query failed: ${String(itemsError)}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemsError]);
+
   function startEdit(item: Record<string, unknown>) {
     setEditingId(item[schema.primaryKey as string] as number);
     setValues(Object.fromEntries(fields.map((field) => [field.key, String(item[field.key] ?? '')])));
@@ -135,7 +152,7 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
         `sync ok — inserted ${result.inserted}, updated ${result.updated}, deleted ${result.deleted}, cursor ${result.cursor ?? '(none)'}, ${Math.round(result.duration)}ms`
       );
     } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+      toast.showError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
     }
@@ -153,7 +170,7 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
       if (!response.ok) throw new Error(`${basePath} responded ${response.status}`);
       setLastResult('Wrote directly to the server — tap "Sync this entity" to pull it down.');
     } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+      toast.showError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
     }
@@ -162,31 +179,49 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
   const canSubmit = fields.every((field) => (values[field.key] ?? '').trim().length > 0);
 
   return (
-    <View style={styles.card}>
+    <Card style={styles.card}>
       <View style={styles.header}>
         <Text style={styles.title}>{title}</Text>
-        <Text style={styles.subtitle}>sync_queue: {formatCounts(queueCounts)}</Text>
-        <Text style={styles.subtitle}>metadata: {formatCounts(metadataCounts)}</Text>
+        <Button
+          variant="text"
+          size="sm"
+          label={showDetails ? 'Hide technical details' : 'Technical details'}
+          icon={<CaretDownIcon size={14} color={colors.muted} />}
+          onPress={() => setShowDetails((prev) => !prev)}
+          style={styles.detailsToggle}
+        />
+        {showDetails ? (
+          <View style={styles.detailsBlock}>
+            <View style={styles.detailsRow}>
+              <Text style={styles.detailsLabel}>queue</Text>
+              {Object.entries(queueCounts).map(([status, count]) => (
+                <StatusBadge key={`q-${status}`} label={`${status} ${count}`} status={statusToBadgeKind(status)} />
+              ))}
+            </View>
+            <View style={styles.detailsRow}>
+              <Text style={styles.detailsLabel}>state</Text>
+              {Object.entries(metadataCounts).map(([status, count]) => (
+                <StatusBadge key={`m-${status}`} label={`${status} ${count}`} status={statusToBadgeKind(status)} />
+              ))}
+            </View>
+          </View>
+        ) : null}
       </View>
 
       <View style={styles.buttonRow}>
-        <Pressable style={styles.button} disabled={busy} onPress={writeDirectlyOnServer}>
-          <Text style={styles.buttonText}>Write directly on server</Text>
-        </Pressable>
-        <Pressable
-          style={[styles.button, styles.buttonPrimary, busy && styles.buttonDisabled]}
+        <Button
+          variant="ghost"
+          size="sm"
+          label="Write directly on server"
           disabled={busy}
-          onPress={runSync}
-        >
-          <Text style={styles.buttonPrimaryText}>Sync this entity</Text>
-        </Pressable>
+          onPress={writeDirectlyOnServer}
+          style={styles.ghostAction}
+        />
+        <Button variant="primary" label="Sync this entity" disabled={busy} onPress={runSync} style={styles.primaryAction} />
       </View>
 
-      {busy ? <ActivityIndicator color={ACCENT} style={styles.busySpinner} /> : null}
-      {lastResult ? (
-        <Text style={[styles.resultText, lastResult.startsWith('Error') && styles.errorText]}>{lastResult}</Text>
-      ) : null}
-      {itemsError ? <Text style={styles.errorText}>Query failed: {String(itemsError)}</Text> : null}
+      {busy ? <ActivityIndicator color={colors.accent} style={styles.busySpinner} /> : null}
+      {lastResult ? <Text style={styles.resultText}>{lastResult}</Text> : null}
 
       {(items ?? []).length === 0 ? (
         <Text style={styles.emptyText}>No local items yet.</Text>
@@ -199,12 +234,8 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
                 <Text style={styles.itemTitle}>{renderItemLabel(item)}</Text>
                 <Text style={styles.itemMeta}>{renderItemMeta(item)}</Text>
               </View>
-              <Pressable onPress={() => startEdit(item)} hitSlop={10} style={styles.itemAction}>
-                <Text style={styles.itemActionText}>✎</Text>
-              </Pressable>
-              <Pressable onPress={() => removeItem(id)} hitSlop={10} style={styles.itemAction}>
-                <Text style={styles.itemActionTextDanger}>✕</Text>
-              </Pressable>
+              <IconButton icon={<PencilSimpleIcon size={16} color={colors.muted} />} onPress={() => startEdit(item)} />
+              <IconButton icon={<TrashIcon size={16} color={colors.danger} />} onPress={() => removeItem(id)} variant="danger" />
             </View>
           );
         })
@@ -214,33 +245,27 @@ function EntityPanel({ schema, title, basePath, fields, renderItemLabel, renderI
         {editingId !== null ? (
           <View style={styles.editingRow}>
             <Text style={styles.editingLabel}>Editing #{editingId}</Text>
-            <Pressable onPress={cancelEdit}>
-              <Text style={styles.editingCancel}>Cancel</Text>
-            </Pressable>
+            <Button variant="text" size="sm" label="Cancel" onPress={cancelEdit} />
           </View>
         ) : null}
 
         {fields.map((field) => (
-          <TextInput
+          <Input
             key={field.key}
-            style={styles.input}
             placeholder={field.label}
-            placeholderTextColor="#9B9DB8"
             keyboardType={field.keyboardType}
             value={values[field.key] ?? ''}
             onChangeText={(text) => setValues((prev) => ({ ...prev, [field.key]: text }))}
           />
         ))}
 
-        <Pressable
+        <Button
+          label={editingId === null ? 'Add local item' : 'Save changes'}
           onPress={submit}
           disabled={!canSubmit}
-          style={[styles.addButton, !canSubmit && styles.buttonDisabled]}
-        >
-          <Text style={styles.addButtonText}>{editingId === null ? 'Add local item' : 'Save changes'}</Text>
-        </Pressable>
+        />
       </View>
-    </View>
+    </Card>
   );
 }
 
@@ -265,6 +290,12 @@ export function SyncTestScreen({ accessToken }: SyncTestScreenProps): React.JSX.
   const [busy, setBusy] = useState(false);
   const [lastResult, setLastResult] = useState<string | null>(null);
   const [refreshCount, setRefreshCount] = useState<number | null>(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (error) toast.showError(`Failed to start database: ${String(error)}`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error]);
 
   async function syncAll() {
     setBusy(true);
@@ -280,45 +311,34 @@ export function SyncTestScreen({ accessToken }: SyncTestScreenProps): React.JSX.
           (delta !== null ? ` — native refresh fired ${delta}x during this sync` : '')
       );
     } catch (err) {
-      setLastResult(`Error: ${err instanceof Error ? err.message : String(err)}`);
+      toast.showError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
     }
   }
 
   return (
-    <SafeAreaView style={styles.safeArea} edges={['top']}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F4F5FA" />
-
-      <View style={styles.screenHeader}>
-        <Text style={styles.screenTitle}>Sync Test</Text>
-        <Text style={styles.screenSubtitle}>
-          {isReady ? 'Users + Products against salve-db-server' : 'Starting database…'}
-        </Text>
-        {refreshCount !== null ? (
-          <Text style={styles.screenSubtitle}>server-side native refresh count: {refreshCount}</Text>
-        ) : null}
-      </View>
+    <SafeAreaView style={styles.safeArea} edges={[]}>
+      <StatusBar barStyle="light-content" backgroundColor={colors.canvas} />
+
+      <ScreenHeader
+        title="Sync Test"
+        subtitle={isReady ? 'Users + Products against salve-db-server' : 'Starting database…'}
+      />
+      {refreshCount !== null ? (
+        <Text style={styles.refreshCountText}>server-side native refresh count: {refreshCount}</Text>
+      ) : null}
 
       {!isReady ? (
-        <View style={styles.centered}>
-          {isLoading ? <ActivityIndicator color={ACCENT} size="large" /> : null}
-          {error ? <Text style={styles.errorText}>Failed to start database: {String(error)}</Text> : null}
-        </View>
+        <View style={styles.centered}>{isLoading ? <ActivityIndicator color={colors.accent} size="large" /> : null}</View>
       ) : (
         <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
           <View style={styles.screenButtonRow}>
-            <Pressable style={[styles.button, styles.buttonPrimary, busy && styles.buttonDisabled]} disabled={busy} onPress={syncAll}>
-              <Text style={styles.buttonPrimaryText}>Sync All</Text>
-            </Pressable>
+            <Button label="Sync All" disabled={busy} onPress={syncAll} />
           </View>
 
-          {busy ? <ActivityIndicator color={ACCENT} style={styles.busySpinner} /> : null}
-          {lastResult ? (
-            <Text style={[styles.resultText, styles.screenResultText, lastResult.startsWith('Error') && styles.errorText]}>
-              {lastResult}
-            </Text>
-          ) : null}
+          {busy ? <ActivityIndicator color={colors.accent} style={styles.busySpinner} /> : null}
+          {lastResult ? <Text style={[styles.resultText, styles.screenResultText]}>{lastResult}</Text> : null}
 
           <ScrollView contentContainerStyle={styles.listContent} keyboardShouldPersistTaps="handled">
             <EntityPanel
@@ -355,13 +375,6 @@ export function SyncTestScreen({ accessToken }: SyncTestScreenProps): React.JSX.
               accessToken={accessToken}
             />
           </ScrollView>
-
-          <Text style={styles.hint}>
-            "Write directly on server" POSTs straight to salve-db-server, bypassing SQLite — proves the pull path when
-            you tap "Sync this entity" afterwards. It sends the login-time access token directly, so once that token
-            expires (see ACCESS_TOKEN_TTL_MS) this button starts getting 401 even though "Sync All" keeps working —
-            the native engine refreshes its own copy, this screen never sees the new one.
-          </Text>
         </KeyboardAvoidingView>
       )}
     </SafeAreaView>
@@ -369,7 +382,7 @@ export function SyncTestScreen({ accessToken }: SyncTestScreenProps): React.JSX.
 }
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#F4F5FA' },
+  safeArea: { flex: 1, backgroundColor: colors.canvas },
   flex: { flex: 1 },
   centered: {
     flex: 1,
@@ -378,161 +391,116 @@ const styles = StyleSheet.create({
     paddingHorizontal: 32,
     gap: 12,
   },
-  screenHeader: {
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 16,
-  },
-  screenTitle: {
-    fontSize: 32,
-    fontWeight: '800',
-    color: '#1C1D3E',
-    letterSpacing: -0.5,
-  },
-  screenSubtitle: {
-    marginTop: 4,
-    fontSize: 14,
-    color: '#8A8CA8',
+  refreshCountText: {
+    paddingHorizontal: spacing.lg,
+    marginBottom: spacing.sm,
+    fontSize: 12,
+    color: colors.muted,
     fontWeight: '500',
   },
   screenButtonRow: {
     flexDirection: 'row',
     gap: 10,
-    paddingHorizontal: 20,
+    paddingHorizontal: spacing.lg,
     marginBottom: 10,
   },
   screenResultText: {
-    marginHorizontal: 20,
+    marginHorizontal: spacing.lg,
   },
   listContent: {
     paddingTop: 12,
     paddingBottom: 12,
     flexGrow: 1,
   },
-  hint: {
-    fontSize: 11,
-    color: '#9B9DB8',
-    paddingHorizontal: 20,
-    paddingBottom: 10,
-    fontStyle: 'italic',
-  },
+
   card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    marginHorizontal: 16,
-    marginBottom: 16,
-    padding: 16,
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.lg,
   },
   header: {
-    marginBottom: 12,
+    marginBottom: spacing.sm,
+    gap: spacing.xs,
   },
   title: {
     fontSize: 18,
     fontWeight: '800',
-    color: '#1C1D3E',
+    color: colors.ink,
   },
-  subtitle: {
-    marginTop: 2,
-    fontSize: 11,
-    color: '#8A8CA8',
-    fontWeight: '500',
+  detailsToggle: {
+    alignSelf: 'flex-start',
   },
-  buttonRow: {
-    flexDirection: 'row',
-    gap: 8,
-    marginBottom: 8,
+  detailsBlock: {
+    gap: spacing.xs,
+    marginTop: spacing.xxs,
   },
-  button: {
-    flex: 1,
-    height: 40,
-    borderRadius: 12,
+  detailsRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#F4F5FA',
+    gap: spacing.xs,
   },
-  buttonPrimary: {
-    backgroundColor: ACCENT,
+  detailsLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: colors.muted,
+    textTransform: 'uppercase',
+    marginRight: spacing.xxs,
   },
-  buttonDisabled: {
-    opacity: 0.5,
+  buttonRow: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    marginBottom: spacing.sm,
   },
-  buttonText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#1C1D3E',
+  ghostAction: {
+    flex: 1,
   },
-  buttonPrimaryText: {
-    fontSize: 13,
-    fontWeight: '700',
-    color: '#FFFFFF',
+  primaryAction: {
+    flex: 1,
   },
   busySpinner: {
     marginTop: 4,
   },
   resultText: {
-    marginTop: 8,
+    marginTop: spacing.sm,
     fontSize: 12,
-    color: '#4A4D7A',
-    fontWeight: '500',
-  },
-  errorText: {
-    marginTop: 8,
-    fontSize: 12,
-    color: DANGER,
+    color: colors.muted,
     fontWeight: '500',
   },
   emptyText: {
     fontSize: 13,
-    color: '#9B9DB8',
+    color: colors.muted,
     fontWeight: '500',
     textAlign: 'center',
-    marginTop: 12,
+    marginTop: spacing.md,
   },
   itemCard: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#F4F5FA',
+    backgroundColor: colors.surface2,
     borderRadius: 12,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    marginTop: 8,
+    marginTop: spacing.sm,
+    gap: spacing.xs,
   },
   itemBody: {
     flex: 1,
-    marginRight: 8,
+    marginRight: spacing.xs,
   },
   itemTitle: {
     fontSize: 13,
     fontWeight: '600',
-    color: '#1C1D3E',
+    color: colors.ink,
   },
   itemMeta: {
     marginTop: 2,
     fontSize: 11,
-    color: '#A6A8C4',
+    color: colors.muted,
     fontWeight: '500',
   },
-  itemAction: {
-    width: 26,
-    height: 26,
-    borderRadius: 13,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 6,
-  },
-  itemActionText: {
-    fontSize: 13,
-    color: '#8A8CA8',
-    fontWeight: '700',
-  },
-  itemActionTextDanger: {
-    fontSize: 12,
-    color: DANGER,
-    fontWeight: '700',
-  },
   composer: {
-    marginTop: 12,
-    gap: 8,
+    marginTop: spacing.md,
+    gap: spacing.sm,
   },
   editingRow: {
     flexDirection: 'row',
@@ -542,31 +510,6 @@ const styles = StyleSheet.create({
   editingLabel: {
     fontSize: 12,
     fontWeight: '700',
-    color: ACCENT,
-  },
-  editingCancel: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: '#8A8CA8',
-  },
-  input: {
-    height: 42,
-    borderRadius: 12,
-    paddingHorizontal: 14,
-    backgroundColor: '#F4F5FA',
-    fontSize: 13,
-    color: '#1C1D3E',
-  },
-  addButton: {
-    height: 42,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: ACCENT,
-  },
-  addButtonText: {
-    fontSize: 13,
-    fontWeight: '700',
-    color: '#FFFFFF',
+    color: colors.accent,
   },
 });
diff --git a/example/src/theme/icons.ts b/example/src/theme/icons.ts
new file mode 100644
index 0000000..a05e63d
--- /dev/null
+++ b/example/src/theme/icons.ts
@@ -0,0 +1,27 @@
+/**
+ * Single import point for every Phosphor icon the app uses — direct
+ * per-icon imports (not the barrel `phosphor-react-native` export) keep the
+ * bundle small; see the "Bundle size" note in phosphor-react-native's README.
+ */
+export { WalletIcon } from 'phosphor-react-native/src/icons/Wallet';
+export { StackIcon } from 'phosphor-react-native/src/icons/Stack';
+export { LightningIcon } from 'phosphor-react-native/src/icons/Lightning';
+export { ArrowsClockwiseIcon } from 'phosphor-react-native/src/icons/ArrowsClockwise';
+export { UserIcon } from 'phosphor-react-native/src/icons/User';
+export { ArrowCounterClockwiseIcon } from 'phosphor-react-native/src/icons/ArrowCounterClockwise';
+export { SignOutIcon } from 'phosphor-react-native/src/icons/SignOut';
+export { GearSixIcon } from 'phosphor-react-native/src/icons/GearSix';
+export { MagnifyingGlassIcon } from 'phosphor-react-native/src/icons/MagnifyingGlass';
+export { XIcon } from 'phosphor-react-native/src/icons/X';
+export { PlusIcon } from 'phosphor-react-native/src/icons/Plus';
+export { CheckIcon } from 'phosphor-react-native/src/icons/Check';
+export { PencilSimpleIcon } from 'phosphor-react-native/src/icons/PencilSimple';
+export { TrashIcon } from 'phosphor-react-native/src/icons/Trash';
+export { DotsThreeVerticalIcon } from 'phosphor-react-native/src/icons/DotsThreeVertical';
+export { CaretDownIcon } from 'phosphor-react-native/src/icons/CaretDown';
+export { ReceiptIcon } from 'phosphor-react-native/src/icons/Receipt';
+export { TrayIcon } from 'phosphor-react-native/src/icons/Tray';
+export { NoteIcon } from 'phosphor-react-native/src/icons/Note';
+export { WarningIcon } from 'phosphor-react-native/src/icons/Warning';
+export { ListIcon } from 'phosphor-react-native/src/icons/List';
+export { DatabaseIcon } from 'phosphor-react-native/src/icons/Database';
diff --git a/example/src/theme/tokens.ts b/example/src/theme/tokens.ts
new file mode 100644
index 0000000..01e4c49
--- /dev/null
+++ b/example/src/theme/tokens.ts
@@ -0,0 +1,72 @@
+/**
+ * Design tokens ported 1:1 from packages/salve-db-studio/ui/src/styles.css
+ * (the Studio's Tailwind @theme block) — single source of truth for the
+ * example app's UI kit. Dark-only, single-accent, matching the Studio.
+ */
+export const colors = {
+  canvas: '#0d0d0d',
+  surface: '#151617',
+  surface2: '#1c1e1f',
+  line: '#292b2c',
+  lineStrong: '#3a3d3e',
+  ink: '#f4f5f6',
+  muted: '#9198a1',
+  accent: '#22d16c',
+  accentStrong: '#43da82',
+  accentInk: '#051b0c',
+  ok: '#22d16c',
+  danger: '#fb7175',
+  brandYellow: '#ffdf00',
+  brandNavy: '#0038a9',
+} as const;
+
+/** Translucent variants of the tokens above — mirrors Tailwind's `/NN` opacity-slash syntax used throughout the Studio (bg-accent/15, border-danger/30, etc). */
+export const alpha = {
+  accent10: 'rgba(34, 209, 108, 0.1)',
+  accent15: 'rgba(34, 209, 108, 0.15)',
+  accent30: 'rgba(34, 209, 108, 0.3)',
+  danger10: 'rgba(251, 113, 117, 0.1)',
+  danger30: 'rgba(251, 113, 117, 0.3)',
+  ok10: 'rgba(34, 209, 108, 0.1)',
+  ok25: 'rgba(34, 209, 108, 0.25)',
+  pending10: 'rgba(255, 223, 0, 0.1)',
+  pending30: 'rgba(255, 223, 0, 0.3)',
+  white5: 'rgba(255, 255, 255, 0.05)',
+  white10: 'rgba(255, 255, 255, 0.1)',
+} as const;
+
+/** 4px grid, matching the Studio's Tailwind spacing scale. */
+export const spacing = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+/** Studio uses rounded-md (6px) for controls, rounded-lg (8px) for cards/panels, rounded-full for pills/dots. */
+export const radius = {
+  sm: 6,
+  md: 8,
+  lg: 10,
+  pill: 999,
+} as const;
+
+export const typography = {
+  title: { fontSize: 22, fontWeight: '800' as const, letterSpacing: -0.3 },
+  sectionTitle: { fontSize: 16, fontWeight: '700' as const },
+  body: { fontSize: 14, fontWeight: '400' as const },
+  label: { fontSize: 12, fontWeight: '600' as const },
+  caption: { fontSize: 11, fontWeight: '500' as const },
+  mono: { fontFamily: 'Menlo', fontSize: 13 },
+};
+
+/** House animation durations from the Studio's motion/react usage (0.12–0.2s). */
+export const motion = {
+  fast: 120,
+  base: 150,
+  slow: 200,
+  pulse: 1400,
+} as const;
diff --git a/package-lock.json b/package-lock.json
index 15ac4e6..33380e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,10 +47,12 @@
       "dependencies": {
         "@react-native/new-app-screen": "0.86.0",
         "@salve-software/salvetron-react-native": "^1.1.5",
+        "phosphor-react-native": "^3.0.6",
         "react": "19.2.8",
         "react-native": "0.86.0",
         "react-native-nitro-modules": "0.36.1",
-        "react-native-safe-area-context": "^5.5.2"
+        "react-native-safe-area-context": "^5.5.2",
+        "react-native-svg": "^15.15.5"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -9680,6 +9682,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/bottleneck": {
       "version": "2.19.5",
       "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz",
@@ -10755,6 +10763,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -10769,6 +10793,18 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -11119,6 +11155,73 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -20198,6 +20301,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -20905,6 +21020,17 @@
         "node": ">= 10.x"
       }
     },
+    "node_modules/phosphor-react-native": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/phosphor-react-native/-/phosphor-react-native-3.0.6.tgz",
+      "integrity": "sha512-mIhv+hBbDWz3yLbTOq/esVUkrMoKzEvLIcSeZo3YTdT+sbOBxzxKg5WZN3wpqt3pkkhKf0wVpOyZ3d9mNBNRhg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-svg": "*"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -21801,6 +21927,48 @@
       "resolved": "example",
       "link": true
     },
+    "node_modules/react-native-svg": {
+      "version": "15.15.5",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.15.5.tgz",
+      "integrity": "sha512-L4go5jA+GWutdJ/JucuN20cjAbMg1HmMtAP+wZ+3JLCf6Jd0bhXQHxciRP/AQm/FlrIEZwkMcHNZP+FXAiic0w==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/react-native-svg/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/react-native-svg/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-native-url-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-3.0.0.tgz",