diff --git a/surfsense_web/components/chat/ChatInterface.tsx b/surfsense_web/components/chat/ChatInterface.tsx
index 72fddfff9..79874ad67 100644
--- a/surfsense_web/components/chat/ChatInterface.tsx
+++ b/surfsense_web/components/chat/ChatInterface.tsx
@@ -8,8 +8,7 @@ import type { ResearchMode } from "@/components/chat";
 import { ChatInputUI } from "@/components/chat/ChatInputGroup";
 import { ChatMessagesUI } from "@/components/chat/ChatMessages";
 import type { Document } from "@/hooks/use-documents";
-import { cn } from "@/lib/utils";
-import { ChatPanelContainer } from "./ChatPannel/ChatPannelContainer";
+import { ChatPanelContainer } from "./ChatPannel/ChatPanelContainer";
 
 interface ChatInterfaceProps {
 	handler: ChatHandler;
@@ -24,6 +23,7 @@ interface ChatInterfaceProps {
 interface ChatInterfaceContext {
 	isChatPannelOpen: boolean;
 	setIsChatPannelOpen: (value: boolean) => void;
+	chat_id: string;
 }
 
 export const chatInterfaceContext = createContext<ChatInterfaceContext | null>(null);
@@ -37,14 +37,14 @@ export default function ChatInterface({
 	searchMode,
 	onSearchModeChange,
 }: ChatInterfaceProps) {
+	const { chat_id } = useParams();
 	const [isChatPannelOpen, setIsChatPannelOpen] = useState(false);
 	const contextValue = {
 		isChatPannelOpen,
 		setIsChatPannelOpen,
+		chat_id: typeof chat_id === "string" ? chat_id : chat_id ? chat_id[0] : "",
 	};
 
-	const { chat_id: chatId } = useParams();
-
 	return (
 		<chatInterfaceContext.Provider value={contextValue}>
 			<LlamaIndexChatSection handler={handler} className="flex h-full">
@@ -63,33 +63,7 @@ export default function ChatInterface({
 							/>
 						</div>
 					</div>
-					{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">
-								<ChatPanelContainer chatId={typeof chatId === "string" ? chatId : chatId[0]} />
-							</div>
-						</div>
-					) : null}
+					<ChatPanelContainer />
 				</div>
 			</LlamaIndexChatSection>
 		</chatInterfaceContext.Provider>
diff --git a/surfsense_web/components/chat/ChatPannel/ChatPanelContainer.tsx b/surfsense_web/components/chat/ChatPannel/ChatPanelContainer.tsx
new file mode 100644
index 000000000..38be9c060
--- /dev/null
+++ b/surfsense_web/components/chat/ChatPannel/ChatPanelContainer.tsx
@@ -0,0 +1,49 @@
+import { PanelRight } from "lucide-react";
+import { useContext } from "react";
+import { cn } from "@/lib/utils";
+import { chatInterfaceContext } from "../ChatInterface";
+import { generatePodCastAction, getChatPodcastPromise } from "./actions";
+import { ChatPanelView } from "./ChatPanelView";
+
+export interface PodCastInterface {
+	title: string;
+	podcast_transcript: string;
+	search_space_id: string;
+}
+
+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 } = context;
+	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 chat_id={chatId} />
+			</div>
+		</div>
+	) : null;
+}
diff --git a/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx b/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
index 1835a5677..575d2bf65 100644
--- a/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
+++ b/surfsense_web/components/chat/ChatPannel/ChatPanelView.tsx
@@ -7,10 +7,10 @@ import { chatInterfaceContext } from "../ChatInterface";
 import { ConfigModal } from "./ConfigModal";
 
 interface ChatPanelViewProps {
-	chatId: string;
+	chat_id: string;
 }
 
-export default function ChatPanelView({ chatId }: ChatPanelViewProps) {
+export function ChatPanelView({ chat_id: chatId }: ChatPanelViewProps) {
 	const context = useContext(chatInterfaceContext);
 	if (!context) {
 		throw new Error("chatInterfaceContext must be used within a ChatProvider");
diff --git a/surfsense_web/components/chat/ChatPannel/ChatPannelContainer.tsx b/surfsense_web/components/chat/ChatPannel/ChatPannelContainer.tsx
deleted file mode 100644
index 881000a67..000000000
--- a/surfsense_web/components/chat/ChatPannel/ChatPannelContainer.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChatPanelView from "./ChatPanelView";
-
-interface ChatPanelContainerProps {
-	chatId: string;
-}
-
-export function ChatPanelContainer({ chatId }: ChatPanelContainerProps) {
-	return <ChatPanelView chatId={chatId} />;
-}
diff --git a/surfsense_web/components/chat/ChatPannel/actions.ts b/surfsense_web/components/chat/ChatPannel/actions.ts
new file mode 100644
index 000000000..af84f2806
--- /dev/null
+++ b/surfsense_web/components/chat/ChatPannel/actions.ts
@@ -0,0 +1,15 @@
+"use server";
+
+import type { PodCastInterface } from "./ChatPanelContainer";
+
+export const generatePodCastAction = async (formData: { prompt: string; chatId: string }) => {
+	console.log("Generating podcast");
+};
+
+export const getChatPodcastPromise = async (chatId: string): Promise<PodCastInterface> => {
+	return Promise.resolve({
+		title: "Test",
+		podcast_transcript: "Test",
+		search_space_id: "Test",
+	});
+};