diff --git a/surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx b/surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx
new file mode 100644
index 000000000..75481dc3a
--- /dev/null
+++ b/surfsense_web/components/chat/ChatPanel/ChatPanelContainer.tsx
@@ -0,0 +1,78 @@
+import { PanelRight } from "lucide-react";
+import { useActionState, useContext, useTransition } from "react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { chatInterfaceContext } from "../ChatInterface";
+import type { GeneratePodcastRequest } from "./actions";
+import { ChatPanelView } from "./ChatPanelView";
+
+export function ChatPanelContainer() {
+	const context = useContext(chatInterfaceContext);
+
+	if (!context) {
+		throw new Error("chatInterfaceContext must be used within a ChatProvider");
+	}
+
+	const { isChatPannelOpen, setIsChatPannelOpen, chat_id: chatId, setPodcast } = context;
+
+	const generatePodcast = async (request: GeneratePodcastRequest) => {
+		try {
+			const { podcast_title = "SurfSense Podcast" } = request;
+
+			const response = await fetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/podcasts/generate/`,
+				{
+					method: "POST",
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ ...request, podcast_title }),
+				}
+			);
+
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				throw new Error(errorData.detail || "Failed to generate podcast");
+			}
+
+			const result = await response.json();
+
+			setPodcast(result);
+
+			toast.success(`Podcast generation started!`);
+		} catch (error) {
+			console.error("Error generating podcast:", error);
+			console.log(error);
+		} finally {
+		}
+	};
+
+	return chatId && chatId !== "" ? (
+		<div
+			className={cn(
+				"border rounded-2xl shrink-0 bg-sidebar 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 "
+				)}
+			>
+				<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">
+				<ChatPanelView generatePodcast={generatePodcast} />
+			</div>
+		</div>
+	) : null;
+}