diff --git a/app/chat/[id]/layout.tsx b/app/chat/[id]/layout.tsx
index c32d6b3..f2a1b26 100644
--- a/app/chat/[id]/layout.tsx
+++ b/app/chat/[id]/layout.tsx
@@ -22,7 +22,7 @@ async function RootLayout({ children, params }: RootChatParams) {
   return (
     <ChatProvider chatId={params.id}>
       <Header>
-        <ShareConversation user={user} />
+        <ShareConversation user={user} chatId={params.id} />
       </Header>
 
       <AI initialAIState={messages} conversationID={params.id}>
@@ -57,8 +57,12 @@ export default withCheckPermission(
       // if any of the checks pass, allow access
       return checks.some((allowed) => allowed);
     },
-    onUnauthorized: () => (
-      <UnauthorizedError>The conversation does not exist or you are not authorized to access it.</UnauthorizedError>
+    onUnauthorized: ({ params }) => (
+      <ChatProvider chatId={params.id}>
+        <Header />
+
+        <UnauthorizedError>The conversation does not exist or you are not authorized to access it.</UnauthorizedError>
+      </ChatProvider>
     ),
   },
   RootLayout
diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index 3ff747a..409e48c 100644
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@@ -39,7 +39,6 @@ export default function Chat({ params }: { params: { id: string } }) {
   const { continueConversation } = useActions();
   const { user } = useUser();
   const { scrollRef, messagesRef, visibilityRef } = useScrollAnchor();
-  const { setChatId } = useChat();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -72,11 +71,6 @@ export default function Chat({ params }: { params: { id: string } }) {
     setConversation((currentConversation: ClientMessage[]) => [...currentConversation, message]);
   };
 
-  useEffect(() => {
-    setChatId(params.id);
-    return () => setChatId();
-  }, [params.id, setChatId]);
-
   return (
     <main className="flex overflow-hidden h-full  mx-auto pt-4" style={{ maxHeight: "calc(100vh - 56px)" }}>
       <div className="h-full w-full overflow-hidden rounded-md">
diff --git a/components/chat/share.tsx b/components/chat/share.tsx
index 9e9b5f4..9272164 100644
--- a/components/chat/share.tsx
+++ b/components/chat/share.tsx
@@ -39,11 +39,11 @@ import { Input } from "../ui/input";
 import { ScrollArea } from "../ui/scroll-area";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { useToast } from "../ui/use-toast";
-import { useChat } from "./context";
 
 import type { Claims } from "@auth0/nextjs-auth0";
 export interface ShareConversationProps {
   user: Claims;
+  chatId: string | undefined;
 }
 
 interface PermissionBlockProps {
@@ -130,9 +130,7 @@ const formSchema = z.object({
   role: z.enum(["Viewer", "Editor"]),
 });
 
-export function ShareConversation({ user }: ShareConversationProps) {
-  const { chatId } = useChat();
-
+export function ShareConversation({ user, chatId }: ShareConversationProps) {
   const [viewers, setViewers] = useState<{ email?: string }[]>([]);
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
   const [isLoading, setIsLoading] = useState(true);