diff --git a/js/app/src/router.tsx b/js/app/src/router.tsx
index 3b4de890f..e517612d0 100644
--- a/js/app/src/router.tsx
+++ b/js/app/src/router.tsx
@@ -83,6 +83,7 @@ import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
 } from "react-native-reanimated";
+import MobileStream from "./screens/mobile-stream";
 store.dispatch(loadStateFromStorage());
 
 const Stack = createNativeStackNavigator();
@@ -115,6 +116,7 @@ type RootStackParamList = {
   Download: undefined;
   PopoutChat: { user: string };
   Embed: { user: string };
+  MobileStream: { user: string };
 };
 
 declare global {
@@ -149,6 +151,7 @@ const linking: LinkingOptions<ReactNavigation.RootParamList> = {
       Download: "download",
       PopoutChat: "chat-popout/:user",
       Embed: "embed/:user",
+      MobileStream: "mobile/:user",
     },
   },
 };
@@ -528,6 +531,14 @@ export function StreamplaceDrawer() {
             headerShown: false,
           }}
         />
+        <Drawer.Screen
+          name="MobileStream"
+          component={MobileStream}
+          options={{
+            headerTitle: "Stream",
+            title: "Streamplace Stream",
+          }}
+        />
       </Drawer.Navigator>
       {livePopup && (
         <Popup
diff --git a/js/components/package.json b/js/components/package.json
index 34e9bdb48..5d43a90f9 100644
--- a/js/components/package.json
+++ b/js/components/package.json
@@ -27,6 +27,9 @@
   },
   "dependencies": {
     "@atproto/api": "^0.15.7",
+    "@rn-primitives/portal": "^1.3.0",
+    "class-variance-authority": "^0.6.1",
+    "lucide-react-native": "^0.514.0",
     "react-native": "0.76.2",
     "react-use-websocket": "^4.13.0",
     "streamplace": "workspace:*",
diff --git a/js/components/src/components/ui/input.tsx b/js/components/src/components/ui/input.tsx
index 364f3897f..c4c08141b 100644
--- a/js/components/src/components/ui/input.tsx
+++ b/js/components/src/components/ui/input.tsx
@@ -341,7 +341,7 @@ function createStyles(theme: any) {
     // Focus styles
     focusedContainer: {
       borderColor: theme.colors.primary,
-      borderWidth: 2,
+      borderWidth: 1,
     },
   });
 }
diff --git a/js/components/src/components/ui/primitives/input.tsx b/js/components/src/components/ui/primitives/input.tsx
index 4c8efddc0..d54340edd 100644
--- a/js/components/src/components/ui/primitives/input.tsx
+++ b/js/components/src/components/ui/primitives/input.tsx
@@ -328,7 +328,7 @@ const primitiveStyles = StyleSheet.create({
   },
   inputError: {
     borderColor: "#ef4444",
-    borderWidth: 2,
+    borderWidth: 1,
   },
   inputDisabled: {
     backgroundColor: "#f3f4f6",
@@ -350,11 +350,11 @@ const primitiveStyles = StyleSheet.create({
   },
   containerFocused: {
     borderColor: "#3b82f6",
-    borderWidth: 2,
+    borderWidth: 1,
   },
   containerError: {
     borderColor: "#ef4444",
-    borderWidth: 2,
+    borderWidth: 1,
   },
   containerDisabled: {
     backgroundColor: "#f3f4f6",
diff --git a/js/components/src/index.tsx b/js/components/src/index.tsx
index e084718a7..88314cc8a 100644
--- a/js/components/src/index.tsx
+++ b/js/components/src/index.tsx
@@ -4,3 +4,6 @@ export * from "./livestream-store";
 export * from "./player-store";
 export * from "./streamplace-provider";
 export * from "./streamplace-store";
+
+// export theme
+export * as ui from "./components/ui";
diff --git a/js/components/src/lib/theme/atoms.ts b/js/components/src/lib/theme/atoms.ts
index f8af7ca53..926c62b23 100644
--- a/js/components/src/lib/theme/atoms.ts
+++ b/js/components/src/lib/theme/atoms.ts
@@ -221,16 +221,6 @@ export const backgrounds = pairify(rawColors, "backgroundColor");
 // Text color utilities
 export const textColors = pairify(rawColors, "color");
 
-// Size utilities (width and height)
-export const sizes = {
-  width: pairify(spacing, "width"),
-  height: pairify(spacing, "height"),
-  minWidth: pairify(spacing, "minWidth"),
-  minHeight: pairify(spacing, "minHeight"),
-  maxWidth: pairify(spacing, "maxWidth"),
-  maxHeight: pairify(spacing, "maxHeight"),
-};
-
 // Percentage-based sizes
 const percentageSizes = {
   "10": "10%",
@@ -249,13 +239,32 @@ const percentageSizes = {
   "100": "100%",
 } as const;
 
-export const percentSizes = {
-  width: pairify(percentageSizes, "width"),
-  height: pairify(percentageSizes, "height"),
-  minWidth: pairify(percentageSizes, "minWidth"),
-  minHeight: pairify(percentageSizes, "minHeight"),
-  maxWidth: pairify(percentageSizes, "maxWidth"),
-  maxHeight: pairify(percentageSizes, "maxHeight"),
+// Size utilities (width and height)
+export const sizes = {
+  width: {
+    ...pairify(spacing, "width"),
+    percent: pairify(percentageSizes, "width"),
+  },
+  height: {
+    ...pairify(spacing, "height"),
+    percent: pairify(percentageSizes, "height"),
+  },
+  minWidth: {
+    ...pairify(spacing, "minWidth"),
+    percent: pairify(percentageSizes, "minWidth"),
+  },
+  minHeight: {
+    ...pairify(spacing, "minHeight"),
+    percent: pairify(percentageSizes, "minHeight"),
+  },
+  maxWidth: {
+    ...pairify(spacing, "maxWidth"),
+    percent: pairify(percentageSizes, "maxWidth"),
+  },
+  maxHeight: {
+    ...pairify(spacing, "maxHeight"),
+    percent: pairify(percentageSizes, "maxHeight"),
+  },
 };
 
 // Flex utilities
@@ -695,7 +704,6 @@ export const atoms = {
   textColors,
   spacingAtoms,
   sizes,
-  percentSizes,
   flex,
   opacity,
   zIndex,
diff --git a/js/components/src/lib/theme/atoms.types.ts b/js/components/src/lib/theme/atoms.types.ts
index 49b0ef543..f8315db3b 100644
--- a/js/components/src/lib/theme/atoms.types.ts
+++ b/js/components/src/lib/theme/atoms.types.ts
@@ -83,16 +83,6 @@ export type RadiusAtoms = {
   right: PairifiedBorderRadius;
 };
 
-// Size utilities types
-export type SizeAtoms = {
-  width: PairifiedSpacing;
-  height: PairifiedSpacing;
-  minWidth: PairifiedSpacing;
-  minHeight: PairifiedSpacing;
-  maxWidth: PairifiedSpacing;
-  maxHeight: PairifiedSpacing;
-};
-
 export type PercentSizeValues = {
   10: StyleValue;
   20: StyleValue;
@@ -110,13 +100,14 @@ export type PercentSizeValues = {
   100: StyleValue;
 };
 
-export type PercentSizeAtoms = {
-  width: PercentSizeValues;
-  height: PercentSizeValues;
-  minWidth: PercentSizeValues;
-  minHeight: PercentSizeValues;
-  maxWidth: PercentSizeValues;
-  maxHeight: PercentSizeValues;
+// Size utilities types
+export type SizeAtoms = {
+  width: PairifiedSpacing & { percent: PercentSizeValues };
+  height: PairifiedSpacing & { percent: PercentSizeValues };
+  minWidth: PairifiedSpacing & { percent: PercentSizeValues };
+  minHeight: PairifiedSpacing & { percent: PercentSizeValues };
+  maxWidth: PairifiedSpacing & { percent: PercentSizeValues };
+  maxHeight: PairifiedSpacing & { percent: PercentSizeValues };
 };
 
 // Flex utilities types
@@ -249,7 +240,6 @@ export type Atoms = {
   textColors: PairifiedColors;
   spacingAtoms: SpacingAtoms;
   sizes: SizeAtoms;
-  percentSizes: PercentSizeAtoms;
   flex: FlexAtoms;
   opacity: OpacityAtoms;
   zIndex: ZIndexAtoms;
diff --git a/js/components/src/lib/theme/index.ts b/js/components/src/lib/theme/index.ts
index 89b9f2014..70e4db018 100644
--- a/js/components/src/lib/theme/index.ts
+++ b/js/components/src/lib/theme/index.ts
@@ -36,7 +36,6 @@ export {
 
 // Utility atoms
 export {
-  atoms,
   borders,
   getPlatformTypography,
   iconSizes,
@@ -45,4 +44,5 @@ export {
 } from "./atoms";
 
 // Convenience re-exports
+export * as atoms from "./atoms";
 export * as tokens from "./tokens";