diff --git a/js/app/components/mobile/player.tsx b/js/app/components/mobile/player.tsx
index 037351ab..16b30f93 100644
--- a/js/app/components/mobile/player.tsx
+++ b/js/app/components/mobile/player.tsx
@@ -65,19 +65,15 @@ export function Player(
       </PlayerProvider>
     </RotationProvider>
   );
-  if (props.mode === "vod") {
+  const mode = props.mode ?? "live";
+  if (mode === "vod") {
     return (
       <LivestreamProvider src="">
         <VideoProvider aturi={props.src ?? ""}>{inner}</VideoProvider>
       </LivestreamProvider>
     );
   }
-  if (props.mode === "live") {
-    return (
-      <LivestreamProvider src={props.src ?? ""}>{inner}</LivestreamProvider>
-    );
-  }
-  throw new Error(`Unknown mode: ${props.mode}`);
+  return <LivestreamProvider src={props.src ?? ""}>{inner}</LivestreamProvider>;
 }
 
 function PlayerWithProvider(
diff --git a/js/app/components/sidebar/sidebar-overlay.tsx b/js/app/components/sidebar/sidebar-overlay.tsx
index def95f6c..1e769972 100644
--- a/js/app/components/sidebar/sidebar-overlay.tsx
+++ b/js/app/components/sidebar/sidebar-overlay.tsx
@@ -25,7 +25,6 @@ import {
   LogIn,
   Settings as SettingsIcon,
   ShieldQuestion,
-  Upload,
   Video,
 } from "lucide-react-native";
 import React, { useEffect, useState } from "react";
@@ -164,13 +163,6 @@ export function SidebarOverlay() {
       href: "/video",
       matchPrefix: "/video",
     },
-    {
-      icon: () => <Upload color={foregroundColor} size={24} />,
-      label: <Text variant="h5">Upload</Text>,
-      href: "/upload",
-      matchPrefix: "/upload",
-      hidden: !did,
-    },
     {
       icon: () => <ShieldQuestion color={foregroundColor} size={24} />,
       label: <Text variant="h5">What's Streamplace?</Text>,
diff --git a/js/app/src/router.tsx b/js/app/src/router.tsx
index 3be3e86e..5e65bcb1 100644
--- a/js/app/src/router.tsx
+++ b/js/app/src/router.tsx
@@ -10,6 +10,7 @@ import {
   LogIn,
   PanelLeftClose,
   PanelLeftOpen,
+  Upload,
   User,
 } from "lucide-react-native";
 import {
@@ -259,3 +260,35 @@ export const AvatarButton = () => {
     </View>
   );
 };
+
+export const UploadButton = () => {
+  const did = useStore((state) => state.oauthSession?.did);
+  const { theme } = useTheme();
+  const windowWidth = useWindowDimensions().width;
+  const isCompact = windowWidth <= 800;
+
+  if (!did) return null;
+
+  if (isCompact) {
+    return (
+      <AQLink
+        to={{ screen: "HomeTab", params: { screen: "Upload" } }}
+        style={{ marginRight: 10, padding: 8 }}
+      >
+        <Upload size={20} color={theme.colors.text} />
+      </AQLink>
+    );
+  }
+
+  return (
+    <AQLink
+      to={{ screen: "HomeTab", params: { screen: "Upload" } }}
+      style={{ marginRight: 10 }}
+    >
+      <Button variant="secondary" style={[zero.r.full]}>
+        <Upload size={16} color={theme.colors.textMuted} />
+        <Text style={{ color: theme.colors.textMuted }}>Upload</Text>
+      </Button>
+    </AQLink>
+  );
+};
diff --git a/js/app/src/shell.tsx b/js/app/src/shell.tsx
index 74752a2a..bdb657b4 100644
--- a/js/app/src/shell.tsx
+++ b/js/app/src/shell.tsx
@@ -75,7 +75,12 @@ import {
   useNotificationDestination,
   useNotificationToken,
 } from "store/hooks";
-import { AvatarButton, LGAvatarButton, NavigationButton } from "./router";
+import {
+  AvatarButton,
+  LGAvatarButton,
+  NavigationButton,
+  UploadButton,
+} from "./router";
 
 const Tab = createBottomTabNavigator();
 const RootStack = createNativeStackNavigator();
@@ -115,7 +120,12 @@ function HomeNavigator() {
       : ({ canGoBack }: NativeStackHeaderBackProps) => (
           <NavigationButton canGoBack={canGoBack} />
         ),
-    headerRight: () => <LGAvatarButton />,
+    headerRight: () => (
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <UploadButton />
+        <LGAvatarButton />
+      </View>
+    ),
     ...(isNative && {
       headerTransparent: true,
     }),
@@ -145,13 +155,23 @@ function HomeNavigator() {
             Platform.OS !== "ios"
               ? ({ canGoBack }) => <NavigationButton canGoBack={canGoBack} />
               : undefined,
-          headerRight: () => <AvatarButton />,
+          headerRight: () => (
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              <UploadButton />
+              <AvatarButton />
+            </View>
+          ),
           ...(Platform.OS === "ios" && {
             unstable_headerRightItems: () => [
               {
                 type: "custom",
                 hidesSharedBackground: true,
-                element: <LGAvatarButton />,
+                element: (
+                  <View style={{ flexDirection: "row", alignItems: "center" }}>
+                    <UploadButton />
+                    <LGAvatarButton />
+                  </View>
+                ),
               },
             ],
           }),
@@ -217,7 +237,12 @@ function VideosNavigator() {
           : ({ canGoBack }: NativeStackHeaderBackProps) => (
               <NavigationButton canGoBack={canGoBack} />
             ),
-        headerRight: () => <LGAvatarButton />,
+        headerRight: () => (
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <UploadButton />
+            <LGAvatarButton />
+          </View>
+        ),
         headerTitleStyle: {
           fontFamily: z.theme.typography.universal.base.fontFamily,
         },
@@ -614,7 +639,12 @@ export default function Shell() {
             headerLeft: ({ canGoBack }) => (
               <NavigationButton canGoBack={canGoBack} />
             ),
-            headerRight: () => <LGAvatarButton />,
+            headerRight: () => (
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                <UploadButton />
+                <LGAvatarButton />
+              </View>
+            ),
             ...(isNative && {
               headerTransparent: true,
             }),