diff --git a/surfsense_web/components/chat/ChatInterface.tsx b/surfsense_web/components/chat/ChatInterface.tsx
index 4aaeb2847..f94c2b3ee 100644
--- a/surfsense_web/components/chat/ChatInterface.tsx
+++ b/surfsense_web/components/chat/ChatInterface.tsx
@@ -2,7 +2,7 @@
 
 import { type ChatHandler, ChatSection as LlamaIndexChatSection } from "@llamaindex/chat-ui";
 import { PanelRight } from "lucide-react";
-import { useState } from "react";
+import { createContext, useState } from "react";
 import type { ResearchMode } from "@/components/chat";
 import { ChatInputUI } from "@/components/chat/ChatInputGroup";
 import { ChatMessagesUI } from "@/components/chat/ChatMessages";
@@ -20,6 +20,13 @@ interface ChatInterfaceProps {
 	onSearchModeChange?: (mode: "DOCUMENTS" | "CHUNKS") => void;
 }
 
+interface ChatInterfaceContext {
+	isChatPannelOpen: boolean;
+	setIsChatPannelOpen: (value: boolean) => void;
+}
+
+export const chatInterfaceContext = createContext<ChatInterfaceContext | null>(null);
+
 export default function ChatInterface({
 	handler,
 	onDocumentSelectionChange,
@@ -30,49 +37,56 @@ export default function ChatInterface({
 	onSearchModeChange,
 }: ChatInterfaceProps) {
 	const [isChatPannelOpen, setIsChatPannelOpen] = useState(false);
+	const contextValue = {
+		isChatPannelOpen,
+		setIsChatPannelOpen,
+	};
 
 	return (
-		<LlamaIndexChatSection handler={handler} className="flex h-full">
-			<div className="flex gap-4 flex-1 w-full">
-				<div className="flex grow-1 flex-col">
-					<ChatMessagesUI />
-					<div className="border-t p-4">
-						<ChatInputUI
-							onDocumentSelectionChange={onDocumentSelectionChange}
-							selectedDocuments={selectedDocuments}
-							onConnectorSelectionChange={onConnectorSelectionChange}
-							selectedConnectors={selectedConnectors}
-							searchMode={searchMode}
-							onSearchModeChange={onSearchModeChange}
-						/>
+		<chatInterfaceContext.Provider value={contextValue}>
+			<LlamaIndexChatSection handler={handler} className="flex h-full">
+				<div className="flex gap-4 flex-1 w-full">
+					<div className="flex grow-1 flex-col">
+						<ChatMessagesUI />
+						<div className="border-t p-4">
+							<ChatInputUI
+								onDocumentSelectionChange={onDocumentSelectionChange}
+								selectedDocuments={selectedDocuments}
+								onConnectorSelectionChange={onConnectorSelectionChange}
+								selectedConnectors={selectedConnectors}
+								searchMode={searchMode}
+								onSearchModeChange={onSearchModeChange}
+
+							/>
+						</div>
 					</div>
-				</div>
-				<div
-					className={cn(
-						"border rounded-2xl shrink-0 flex flex-col h-full transition-all",
-						isChatPannelOpen ? "w-72" : "w-14"
-					)}
-				>
 					<div
 						className={cn(
-							"w-full border-b p-2 flex items-center transition-all ",
-							isChatPannelOpen ? "justify-end" : " justify-center "
+							"border rounded-2xl shrink-0 flex flex-col h-full transition-all",
+							isChatPannelOpen ? "w-72" : "w-14"
 						)}
 					>
-						<button
-							type="button"
-							onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
-							className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
+						<div
+							className={cn(
+								"w-full border-b p-2 flex items-center transition-all ",
+								isChatPannelOpen ? "justify-end" : " justify-center "
+							)}
 						>
-							<PanelRight className="h-5 w-5" strokeWidth={1.5} />
-						</button>
-					</div>
+							<button
+								type="button"
+								onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
+								className={cn(" shrink-0 rounded-full p-2 w-fit hover:bg-muted")}
+							>
+								<PanelRight className="h-5 w-5" strokeWidth={1.5} />
+							</button>
+						</div>
 
-					<div className="border-b rounded-lg grow-1">
-						<ChatPanelContainer />
+						<div className="border-b rounded-lg grow-1">
+							<ChatPanelContainer />
+						</div>
 					</div>
 				</div>
-			</div>
-		</LlamaIndexChatSection>
+			</LlamaIndexChatSection>
+		</chatInterfaceContext.Provider>
 	);
 }
diff --git a/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx b/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
index 5f4eb0405..995c4d3a7 100644
--- a/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
+++ b/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
@@ -1,21 +1,49 @@
+"use client";
+
 import { Pencil, Podcast } from "lucide-react";
+import { useContext } from "react";
+import { cn } from "@/lib/utils";
+import { chatInterfaceContext } from "../ChatInterface";
 
 export default function ChatPanelView() {
+	const context = useContext(chatInterfaceContext);
+	if (!context) {
+		throw new Error("chatInterfaceContext must be used within a ChatProvider");
+	}
+
+	const { isChatPannelOpen, setIsChatPannelOpen } = context;
+
 	return (
 		<div className="w-full">
-			<div className="w-full h-full p-4 border-b">
-				<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r dark:from-slate-400/30 dark:to-slate-800/60">
-					<div className="w-full flex items-center justify-between">
-						<Podcast strokeWidth={1} />
-						<button
-							type="button"
-							className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
-						>
-							<Pencil strokeWidth={1} className="h-4 w-4" />
-						</button>
+			<div
+				className={cn(
+					"w-full h-full p-4 border-b",
+					!isChatPannelOpen && "flex items-center justify-center"
+				)}
+			>
+				{isChatPannelOpen ? (
+					<div className=" space-y-3 rounded-xl p-3 bg-gradient-to-r dark:from-slate-400/30 dark:to-slate-800/60">
+						<div className="w-full flex items-center justify-between">
+							<Podcast strokeWidth={1} />
+							<button
+								type="button"
+								title="Edit the prompt"
+								className="rounded-full p-2 bg-slate-400/30 hover:bg-slate-400/40"
+							>
+								<Pencil strokeWidth={1} className="h-4 w-4" />
+							</button>
+						</div>
+						<p>Generate Podcast</p>
 					</div>
-					<p> Generate Podcast</p>
-				</div>
+				) : (
+					<button
+						title="Generate Podcast"
+						type="button"
+						onClick={() => setIsChatPannelOpen(!isChatPannelOpen)}
+					>
+						<Podcast strokeWidth={1} />
+					</button>
+				)}
 			</div>
 		</div>
 	);