diff --git a/js/app/src/screens/chat-popout.native.tsx b/js/app/src/screens/chat-popout.native.tsx
index 118b6a7e..99f14366 100644
--- a/js/app/src/screens/chat-popout.native.tsx
+++ b/js/app/src/screens/chat-popout.native.tsx
@@ -4,6 +4,7 @@ import {
   ChatBox,
   LivestreamProvider,
   PlayerProvider,
+  StreamNotificationProvider,
   Text,
   useKeyboard,
   useLivestreamInfo,
@@ -171,7 +172,9 @@ export function PopoutChatInner({ user }: { user: string }) {
           </View>
         </View>
         <View style={[zero.flex.values[1], zero.p[4]]}>
-          <Chat />
+          <StreamNotificationProvider position="top">
+            <Chat />
+          </StreamNotificationProvider>
           {profile && <ChatBox emojiData={emojiData} isPopout={true} />}
         </View>
       </View>
diff --git a/js/app/src/screens/chat-popout.tsx b/js/app/src/screens/chat-popout.tsx
index d6fe5a30..382da0b5 100644
--- a/js/app/src/screens/chat-popout.tsx
+++ b/js/app/src/screens/chat-popout.tsx
@@ -3,6 +3,7 @@ import {
   ChatBox,
   LivestreamProvider,
   PlayerProvider,
+  StreamNotificationProvider,
   Text,
   tokens,
   usePlayerStore,
@@ -21,6 +22,7 @@ interface ChatPopoutParams {
   reverse?: string;
   hideAfter?: string;
   hideChatBox?: string;
+  showNotifications?: string;
 }
 
 export default function PopoutChat({ route }) {
@@ -63,54 +65,69 @@ export function PopoutChatInner({ params }: { params: ChatPopoutParams }) {
     ? parseInt(params.hideAfter, 10)
     : undefined;
   const hideChatBox = params.hideChatBox === "true";
+  const showNotifications = params.showNotifications === "true";
 
   useEffect(() => {
     setSrc(params.user);
   }, [params.user, setSrc]);
 
+  const chat = (
+    <Chat
+      reverse={reverseChat}
+      hideAfter={hideAfter}
+      style={[zero.flex.values[1]]}
+    />
+  );
+
   return (
-    <View style={[{ position: "relative" }, zero.flex.values[1], zero.m[2]]}>
-      <View
-        style={[
-          zero.flex.values[1],
-          { position: "absolute", width: "100%", minHeight: "100%", bottom: 0 },
-        ]}
-      >
-        <Chat reverse={reverseChat} hideAfter={hideAfter} />
-        {!hideChatBox &&
-          (profile ? (
-            <ChatBox
-              emojiData={emojiData}
-              isPopout={true}
-              emojiPicker={(isOpen, onClose, onSelect) => (
-                <EmojiPicker
-                  isOpen={isOpen}
-                  onClose={onClose}
-                  onSelect={onSelect}
-                  customEmoji={[]}
-                />
-              )}
-            />
-          ) : (
-            <Pressable
-              onPress={() => openLoginModal({ name: "ChatPopout" })}
-              style={[
-                zero.layout.flex.row,
-                zero.layout.flex.center,
-                zero.gap.all[4],
-                zero.r.xl,
-                {
-                  padding: 18,
-                  backgroundColor: "rgba(255, 255, 255, 0.1)",
-                  maxWidth: tokens.breakpoints.sm,
-                },
-              ]}
-            >
-              <Text>Log in or sign up to chat</Text>
-              <ArrowRight />
-            </Pressable>
-          ))}
-      </View>
+    <View
+      style={[
+        zero.flex.values[1],
+        zero.layout.flex.column,
+        zero.m[2],
+        { maxHeight: "100vh" },
+      ]}
+    >
+      {showNotifications ? (
+        <StreamNotificationProvider position="top">
+          {chat}
+        </StreamNotificationProvider>
+      ) : (
+        chat
+      )}
+      {!hideChatBox &&
+        (profile ? (
+          <ChatBox
+            emojiData={emojiData}
+            isPopout={true}
+            emojiPicker={(isOpen, onClose, onSelect) => (
+              <EmojiPicker
+                isOpen={isOpen}
+                onClose={onClose}
+                onSelect={onSelect}
+                customEmoji={[]}
+              />
+            )}
+          />
+        ) : (
+          <Pressable
+            onPress={() => openLoginModal({ name: "ChatPopout" })}
+            style={[
+              zero.layout.flex.row,
+              zero.layout.flex.center,
+              zero.gap.all[4],
+              zero.r.xl,
+              {
+                padding: 18,
+                backgroundColor: "rgba(255, 255, 255, 0.1)",
+                maxWidth: tokens.breakpoints.sm,
+              },
+            ]}
+          >
+            <Text>Log in or sign up to chat</Text>
+            <ArrowRight />
+          </Pressable>
+        ))}
     </View>
   );
 }