diff --git a/src/app/chat/context.tsx b/src/app/chat/context.tsx
new file mode 100644
index 00000000..61e0f0bb
--- /dev/null
+++ b/src/app/chat/context.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useState } from 'react';
+
+import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
+import { MainMenu } from "@/features/menu/menu";
+
+export const Context = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+        <>
+            <MainMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+            <ChatMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+        </>
+    )
+}
diff --git a/src/app/chat/layout.tsx b/src/app/chat/layout.tsx
index 2f17b157..2aebdca1 100644
--- a/src/app/chat/layout.tsx
+++ b/src/app/chat/layout.tsx
@@ -1,6 +1,7 @@
 import { ProtectedPage } from "@/features/auth/protected-page";
 import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
 import { MainMenu } from "@/features/menu/menu";
+import { Context } from "./context";
 import { AI_NAME } from "@/features/theme/customise";
 
 export const metadata = {
@@ -8,15 +9,15 @@ export const metadata = {
   description: AI_NAME,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+
   return (
     <ProtectedPage>
-      <MainMenu />
-      <ChatMenu />
+      <Context/>
       <div className="flex-1">{children}</div>
     </ProtectedPage>
   );
diff --git a/src/features/chat/chat-menu/chat-menu.tsx b/src/features/chat/chat-menu/chat-menu.tsx
index adb8fca5..fa387739 100644
--- a/src/features/chat/chat-menu/chat-menu.tsx
+++ b/src/features/chat/chat-menu/chat-menu.tsx
@@ -1,25 +1,54 @@
+'use client'
+
+import { useState, useEffect } from 'react';
 import { Menu, MenuContent, MenuFooter, MenuHeader } from "@/components/menu";
 import { FindAllChatThreadForCurrentUser } from "@/features/chat/chat-services/chat-thread-service";
 import { ThemeToggle } from "@/features/theme/theme-toggle";
 import { MenuItems } from "./menu-items";
 import { NewChat } from "./new-chat";
+import { ChatThreadModel } from '../chat-services/models';
+import { Button } from '@/components/ui/button';
+
+interface Prop {
+  isOpen: boolean;
+  setIsOpen: Function;
+}
+
+export const ChatMenu = (prop:Prop) => { 
+  const [items, setItems] = useState<ChatThreadModel[]>([]);
+
+  // Fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await FindAllChatThreadForCurrentUser();
+      setItems(data);
+    };
 
-export const ChatMenu = async () => {
-  const items = await FindAllChatThreadForCurrentUser();
+    fetchData();
+  }, []);
 
   return (
-    <Menu>
-      <MenuHeader className="justify-end">
-        <NewChat />
-      </MenuHeader>
-      <MenuContent>
-        <MenuItems menuItems={items} />
-      </MenuContent>
-      <MenuFooter>
-        <div className="flex flex-col gap-3">
-          <ThemeToggle />
-        </div>
-      </MenuFooter>
-    </Menu>
+    <div>
+      <Button size={"icon"} onClick={() => prop.setIsOpen(!prop.isOpen)} >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  width="12" height="12" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </Button>
+      {prop.isOpen ? 
+        <Menu>
+        <MenuHeader className="justify-end">
+            <NewChat />
+        </MenuHeader>
+        <MenuContent>
+          <MenuItems menuItems={items} />
+        </MenuContent>
+        <MenuFooter>
+          <div className="flex flex-col gap-3">
+            <ThemeToggle />
+          </div>
+        </MenuFooter>
+        </Menu> 
+      : ''}
+    </div>
   );
 };
diff --git a/src/features/menu/menu.tsx b/src/features/menu/menu.tsx
index a6d73708..82d87c13 100644
--- a/src/features/menu/menu.tsx
+++ b/src/features/menu/menu.tsx
@@ -3,10 +3,15 @@ import { BarChartHorizontalBig } from "lucide-react";
 import Link from "next/link";
 import { UserProfile } from "../user-profile";
 
-export const MainMenu = () => {
+interface Prop {
+  isOpen: boolean;
+  setIsOpen: Function;
+}
+
+export const MainMenu = (prop: Prop) => {
   return (
     <div className="flex gap-2 flex-col justify-between">
-      <div className="flex gap-2 flex-col justify-between">
+      {prop.isOpen ? <div className="flex gap-2 flex-col justify-between">
         <Link
           href="/"
           className="w-10 h-10 items-center justify-center flex"
@@ -23,8 +28,8 @@ export const MainMenu = () => {
         >
           <BarChartHorizontalBig size={20} />
         </Link>
-      </div>
-      <UserProfile />
+      </div> : ''}
+      {prop.isOpen ? <UserProfile /> : ''}
     </div>
   );
 };