diff --git a/www/app/[roomName]/page.tsx b/www/app/[roomName]/page.tsx
index e103b2f3..9401d433 100644
--- a/www/app/[roomName]/page.tsx
+++ b/www/app/[roomName]/page.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import "@whereby.com/browser-sdk/embed";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import useRoomMeeting from "./useRoomMeeting";
+import { useRouter } from "next/navigation";
+import { useFiefIsAuthenticated } from "@fief/fief/build/esm/nextjs/react";
 
 export type RoomDetails = {
   params: {
@@ -14,11 +16,27 @@ export default function Room(details: RoomDetails) {
   const wherebyRef = useRef<HTMLElement>(null);
   const roomName = details.params.roomName;
   const meeting = useRoomMeeting(roomName);
+  const router = useRouter();
+  const isAuthenticated = useFiefIsAuthenticated();
 
   const roomUrl = meeting?.response?.host_room_url
     ? meeting?.response?.host_room_url
     : meeting?.response?.room_url;
 
+  const handleLeave = useCallback((e) => {
+    router.push("/browse");
+  }, []);
+
+  useEffect(() => {
+    if (!isAuthenticated || !roomUrl) return;
+
+    wherebyRef.current?.addEventListener("leave", handleLeave);
+
+    return () => {
+      wherebyRef.current?.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave, roomUrl]);
+
   return (
     <>
       {roomUrl && (