diff --git a/images/architecture.png b/images/architecture.png
index 55b15b816..9dfb7518f 100644
Binary files a/images/architecture.png and b/images/architecture.png differ
diff --git a/src/app/chat/layout.tsx b/src/app/chat/layout.tsx
index 003f6db24..87945db73 100644
--- a/src/app/chat/layout.tsx
+++ b/src/app/chat/layout.tsx
@@ -1,4 +1,5 @@
 import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
+import { ChatMenuContainer } from "@/features/chat/chat-menu/chat-menu-container";
 import { MainMenu } from "@/features/menu/menu";
 import { AI_NAME } from "@/features/theme/customise";
 
@@ -16,7 +17,10 @@ export default async function RootLayout({
     <>
       <MainMenu />
       <div className="flex-1 flex rounded-md overflow-hidden bg-card/70">
-        <ChatMenu /> {children}
+        <ChatMenuContainer>
+          <ChatMenu />
+        </ChatMenuContainer>
+        {children}
       </div>
     </>
   );
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index a4d13a6ba..3ab1aeae8 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -1,14 +1,7 @@
 import { Card } from "@/components/ui/card";
-import { FindAllChatThreadForCurrentUser } from "@/features/chat/chat-services/chat-thread-service";
 import { StartNewChat } from "@/features/chat/chat-ui/start-new-chat";
-import { redirect } from "next/navigation";
 
 export default async function Home() {
-  const chats = await FindAllChatThreadForCurrentUser();
-  if (chats.length > 0) {
-    redirect(`/chat/${chats[0].id}`);
-  }
-
   return (
     <Card className="h-full items-center flex justify-center flex-1">
       <StartNewChat />
diff --git a/src/features/chat/chat-menu/chat-menu-container.tsx b/src/features/chat/chat-menu/chat-menu-container.tsx
new file mode 100644
index 000000000..6fb4faabe
--- /dev/null
+++ b/src/features/chat/chat-menu/chat-menu-container.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { useMenuContext } from "@/features/menu/menu-context";
+
+export const ChatMenuContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { isMenuOpen } = useMenuContext();
+  return <>{isMenuOpen ? children : null}</>;
+};
diff --git a/src/features/menu/menu-context.tsx b/src/features/menu/menu-context.tsx
new file mode 100644
index 000000000..9264c855a
--- /dev/null
+++ b/src/features/menu/menu-context.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, useState } from "react";
+
+interface MenuContextProps {
+  isMenuOpen: boolean;
+  toggleMenu: () => void;
+}
+
+export const MenuContext = createContext<MenuContextProps>({
+  isMenuOpen: true,
+  toggleMenu: () => {},
+});
+
+export const MenuProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(true);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <MenuContext.Provider value={{ isMenuOpen, toggleMenu }}>
+      {children}
+    </MenuContext.Provider>
+  );
+};
+
+export const useMenuContext = () => React.useContext(MenuContext);
diff --git a/src/features/menu/menu.tsx b/src/features/menu/menu.tsx
index e918c29f8..8b8cfb665 100644
--- a/src/features/menu/menu.tsx
+++ b/src/features/menu/menu.tsx
@@ -1,19 +1,33 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { LayoutDashboard, MessageCircle } from "lucide-react";
+import {
+  LayoutDashboard,
+  MessageCircle,
+  PanelLeftClose,
+  PanelRightClose,
+} from "lucide-react";
 import Link from "next/link";
 import { ThemeToggle } from "../theme/theme-toggle";
 import { UserProfile } from "../user-profile";
 
 import { useSession } from "next-auth/react";
+import { useMenuContext } from "./menu-context";
 
 export const MainMenu = () => {
   const { data: session } = useSession();
+  const { isMenuOpen, toggleMenu } = useMenuContext();
   return (
     <div className="flex flex-col justify-between p-2">
-      <div className="flex gap-2 flex-col items-center">
-      <Button
+      <div className="flex gap-2  flex-col  items-center">
+        <Button
+          onClick={toggleMenu}
+          className="rounded-full w-[40px] h-[40px] p-1 text-primary"
+          variant={"outline"}
+        >
+          {isMenuOpen ? <PanelLeftClose /> : <PanelRightClose />}
+        </Button>
+        <Button
           asChild
           className="rounded-full w-[40px] h-[40px] p-1 text-primary"
           variant={"outline"}
@@ -41,7 +55,9 @@ export const MainMenu = () => {
               <LayoutDashboard />
             </Link>
           </Button>
-        ) : (<></>)}
+        ) : (
+          <></>
+        )}
       </div>
       <div className="flex flex-col gap-2">
         <ThemeToggle />
diff --git a/src/features/providers.tsx b/src/features/providers.tsx
index 85bc34384..ff3224b19 100644
--- a/src/features/providers.tsx
+++ b/src/features/providers.tsx
@@ -1,7 +1,12 @@
 "use client";
 
 import { SessionProvider } from "next-auth/react";
+import { MenuProvider } from "./menu/menu-context";
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <MenuProvider>{children}</MenuProvider>
+    </SessionProvider>
+  );
 };