diff --git a/js/app/components/provider/provider.shared.tsx b/js/app/components/provider/provider.shared.tsx
index 573a49bf..81f08893 100644
--- a/js/app/components/provider/provider.shared.tsx
+++ b/js/app/components/provider/provider.shared.tsx
@@ -3,7 +3,10 @@ import {
   LinkingOptions,
   NavigationContainer,
 } from "@react-navigation/native";
-import { StreamplaceProvider as ZustandStreamplaceProvider } from "@streamplace/components";
+import {
+  ThemeProvider,
+  StreamplaceProvider as ZustandStreamplaceProvider,
+} from "@streamplace/components";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { useFonts } from "expo-font";
 import BlueskyProvider from "features/bluesky/blueskyProvider";
@@ -26,32 +29,39 @@ export default function Provider({
 }) {
   return (
     <TamaguiProvider config={config} defaultTheme={"dark"}>
-      <NavigationContainer theme={DarkTheme} linking={linking}>
-        <ReduxProvider store={store}>
-          <StreamplaceProvider>
-            <BlueskyProvider>
-              <NewStreamplaceProvider>
-                <PortalProvider>
-                  <ToastProvider
-                    swipeDirection="vertical"
-                    duration={6000}
-                    native={
-                      [
-                        /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
-                        // 'mobile'
-                      ]
-                    }
-                  >
-                    <FontProvider>{children}</FontProvider>
-                    <CurrentToast />
-                    <ToastViewport name="default" top="$8" left={0} right={0} />
-                  </ToastProvider>
-                </PortalProvider>
-              </NewStreamplaceProvider>
-            </BlueskyProvider>
-          </StreamplaceProvider>
-        </ReduxProvider>
-      </NavigationContainer>
+      <ThemeProvider forcedTheme="dark">
+        <NavigationContainer theme={DarkTheme} linking={linking}>
+          <ReduxProvider store={store}>
+            <StreamplaceProvider>
+              <BlueskyProvider>
+                <NewStreamplaceProvider>
+                  <PortalProvider>
+                    <ToastProvider
+                      swipeDirection="vertical"
+                      duration={6000}
+                      native={
+                        [
+                          /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
+                          // 'mobile'
+                        ]
+                      }
+                    >
+                      <FontProvider>{children}</FontProvider>
+                      <CurrentToast />
+                      <ToastViewport
+                        name="default"
+                        top="$8"
+                        left={0}
+                        right={0}
+                      />
+                    </ToastProvider>
+                  </PortalProvider>
+                </NewStreamplaceProvider>
+              </BlueskyProvider>
+            </StreamplaceProvider>
+          </ReduxProvider>
+        </NavigationContainer>
+      </ThemeProvider>
     </TamaguiProvider>
   );
 }
diff --git a/js/app/src/screens/chat-popout.tsx b/js/app/src/screens/chat-popout.tsx
index 3d403b0d..80f05471 100644
--- a/js/app/src/screens/chat-popout.tsx
+++ b/js/app/src/screens/chat-popout.tsx
@@ -3,7 +3,6 @@ import {
   ChatBox,
   LivestreamProvider,
   PlayerProvider,
-  ThemeProvider,
   usePlayerStore,
 } from "@streamplace/components";
 import emojiData from "assets/emoji-data.json";
@@ -19,13 +18,11 @@ export default function PopoutChat({ route }) {
   }
 
   return (
-    <ThemeProvider forcedTheme="dark">
-      <LivestreamProvider src={user}>
-        <PlayerProvider>
-          <PopoutChatInner user={user} />
-        </PlayerProvider>
-      </LivestreamProvider>
-    </ThemeProvider>
+    <LivestreamProvider src={user}>
+      <PlayerProvider>
+        <PopoutChatInner user={user} />
+      </PlayerProvider>
+    </LivestreamProvider>
   );
 }
 
diff --git a/js/app/src/screens/embed.tsx b/js/app/src/screens/embed.tsx
index 6c517aba..63b62fed 100644
--- a/js/app/src/screens/embed.tsx
+++ b/js/app/src/screens/embed.tsx
@@ -3,7 +3,6 @@ import {
   Player,
   PlayerProps,
   PlayerProvider,
-  ThemeProvider,
 } from "@streamplace/components";
 import { DesktopUi } from "components/mobile/desktop-ui";
 import {
@@ -34,14 +33,12 @@ export default function EmbedScreen({ route }) {
     src = url;
   }
   return (
-    <ThemeProvider forcedTheme="dark">
-      <LivestreamProvider src={src}>
-        <PlayerProvider {...extraProps}>
-          <Player src={src} {...extraProps}>
-            <DesktopUi />
-          </Player>
-        </PlayerProvider>
-      </LivestreamProvider>
-    </ThemeProvider>
+    <LivestreamProvider src={src}>
+      <PlayerProvider {...extraProps}>
+        <Player src={src} {...extraProps}>
+          <DesktopUi />
+        </Player>
+      </PlayerProvider>
+    </LivestreamProvider>
   );
 }
diff --git a/js/app/src/screens/info-widget-embed.tsx b/js/app/src/screens/info-widget-embed.tsx
index 472acc07..9c6abc6e 100644
--- a/js/app/src/screens/info-widget-embed.tsx
+++ b/js/app/src/screens/info-widget-embed.tsx
@@ -1,4 +1,4 @@
-import { Dashboard, ThemeProvider, zero } from "@streamplace/components";
+import { Dashboard, zero } from "@streamplace/components";
 import { useLiveUser } from "hooks/useLiveUser";
 import { View } from "react-native";
 
@@ -7,22 +7,20 @@ const { layout, p, flex } = zero;
 export default function InfoWidgetEmbed() {
   const isLive = useLiveUser();
   return (
-    <ThemeProvider forcedTheme="dark">
-      <View
-        style={[
-          flex.values[1],
-          layout.flex.alignCenter,
-          layout.flex.justifyCenter,
-          p[4],
-          {
-            backgroundColor: "transparent",
-            minHeight: "100vh",
-            width: "100vw",
-          },
-        ]}
-      >
-        <Dashboard.InformationWidget embedMode={true} />
-      </View>
-    </ThemeProvider>
+    <View
+      style={[
+        flex.values[1],
+        layout.flex.alignCenter,
+        layout.flex.justifyCenter,
+        p[4],
+        {
+          backgroundColor: "transparent",
+          minHeight: "100vh",
+          width: "100vw",
+        },
+      ]}
+    >
+      <Dashboard.InformationWidget embedMode={true} />
+    </View>
   );
 }
diff --git a/js/app/src/screens/live-dashboard.tsx b/js/app/src/screens/live-dashboard.tsx
index b5566a8a..373d659b 100644
--- a/js/app/src/screens/live-dashboard.tsx
+++ b/js/app/src/screens/live-dashboard.tsx
@@ -1,7 +1,6 @@
 import {
   LivestreamProvider,
   PlayerProvider,
-  ThemeProvider,
   zero,
 } from "@streamplace/components";
 import { Redirect } from "components/aqlink";
@@ -42,20 +41,18 @@ export default function LiveDashboard() {
   }
 
   return (
-    <ThemeProvider forcedTheme="dark">
-      <LivestreamProvider src={userProfile.did}>
-        <VideoElementProvider videoElement={videoElement}>
-          <PlayerProvider>
-            <View style={[flex.values[1], bg.gray[900]]}>
-              <BentoGrid
-                userProfile={userProfile}
-                isLive={isLive}
-                videoRef={videoRef}
-              />
-            </View>
-          </PlayerProvider>
-        </VideoElementProvider>
-      </LivestreamProvider>
-    </ThemeProvider>
+    <LivestreamProvider src={userProfile.did}>
+      <VideoElementProvider videoElement={videoElement}>
+        <PlayerProvider>
+          <View style={[flex.values[1], bg.gray[900]]}>
+            <BentoGrid
+              userProfile={userProfile}
+              isLive={isLive}
+              videoRef={videoRef}
+            />
+          </View>
+        </PlayerProvider>
+      </VideoElementProvider>
+    </LivestreamProvider>
   );
 }
diff --git a/js/app/src/screens/mobile-go-live.tsx b/js/app/src/screens/mobile-go-live.tsx
index 6dcfcd84..a3f57955 100644
--- a/js/app/src/screens/mobile-go-live.tsx
+++ b/js/app/src/screens/mobile-go-live.tsx
@@ -1,4 +1,4 @@
-import { KeepAwake, ThemeProvider } from "@streamplace/components";
+import { KeepAwake } from "@streamplace/components";
 import { Redirect } from "components/aqlink";
 import { Player } from "components/mobile/player";
 import { FullscreenProvider } from "contexts/FullscreenContext";
@@ -13,11 +13,11 @@ export default function MobileGoLive() {
   }
   // get player
   return (
-    <ThemeProvider forcedTheme="dark">
+    <>
       <KeepAwake />
       <FullscreenProvider>
         <Player ingest src={userProfile.did} name={userProfile.handle} />
       </FullscreenProvider>
-    </ThemeProvider>
+    </>
   );
 }
diff --git a/js/app/src/screens/mobile-stream.tsx b/js/app/src/screens/mobile-stream.tsx
index 9bcd25f6..74ec516e 100644
--- a/js/app/src/screens/mobile-stream.tsx
+++ b/js/app/src/screens/mobile-stream.tsx
@@ -1,4 +1,4 @@
-import { KeepAwake, ThemeProvider } from "@streamplace/components";
+import { KeepAwake } from "@streamplace/components";
 import { Player } from "components/mobile/player";
 import { PlayerProps } from "components/player/props";
 import { FullscreenProvider } from "contexts/FullscreenContext";
@@ -20,11 +20,11 @@ export default function MobileStream({ route }) {
   useTitle(user);
 
   return (
-    <ThemeProvider forcedTheme="dark">
+    <>
       <KeepAwake />
       <FullscreenProvider>
         <Player src={src} {...extraProps} />
       </FullscreenProvider>
-    </ThemeProvider>
+    </>
   );
 }
diff --git a/js/app/src/screens/multi.tsx b/js/app/src/screens/multi.tsx
index 5ef20959..9b643741 100644
--- a/js/app/src/screens/multi.tsx
+++ b/js/app/src/screens/multi.tsx
@@ -4,7 +4,6 @@ import {
   Player,
   PlayerProps,
   PlayerProvider,
-  ThemeProvider,
   usePlayerStore,
   zero,
 } from "@streamplace/components";
@@ -69,7 +68,7 @@ export default function MultiScreen({ route }) {
   }
 
   return (
-    <ThemeProvider forcedTheme="dark">
+    <>
       <KeepAwake />
       <FullscreenProvider>
         <View style={[flex.values[1]]}>
@@ -95,6 +94,6 @@ export default function MultiScreen({ route }) {
           ))}
         </View>
       </FullscreenProvider>
-    </ThemeProvider>
+    </>
   );
 }