diff --git a/apps/web/src/app/ui/content.tsx b/apps/web/src/app/ui/content.tsx
index 16f66394..8bfebcb9 100644
--- a/apps/web/src/app/ui/content.tsx
+++ b/apps/web/src/app/ui/content.tsx
@@ -4,11 +4,11 @@ import Sidebar from "@/components/Sidebar/index";
 import { useState } from "react";
 
 export default function Content() {
-  const [selectedItem, setSelectedItem] = useState<string | null>();
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
 
   return (
     <div className="flex w-screen">
-      {/* <Sidebar selectChange={setSelectedItem} /> */}
+      <Sidebar selectChange={setSelectedItem} />
       <Main sidebarOpen={selectedItem !== null} />
     </div>
   );
diff --git a/apps/web/src/app/ui/page.tsx b/apps/web/src/app/ui/page.tsx
index ec1998b6..35175334 100644
--- a/apps/web/src/app/ui/page.tsx
+++ b/apps/web/src/app/ui/page.tsx
@@ -1,18 +1,10 @@
-import Main from "@/components/Main";
-import Sidebar from "@/components/Sidebar/index";
-import { cookies } from "next/headers";
+import { MemoryProvider } from "@/contexts/MemoryContext";
+import Content from "./content";
 
 export default function Home() {
-  const selectedItem = cookies().get("selectedItem")?.value;
-  const setSelectedItem = async (selectedItem: string | null) => {
-    "use server";
-    cookies().set("selectedItem", selectedItem!);
-  };
-
   return (
-    <div className="flex w-screen">
-      {/* <Sidebar selectChange={setSelectedItem} spaces={spaces} /> */}
-      <Main sidebarOpen={selectedItem !== null} />
-    </div>
+    <MemoryProvider spaces={[]}>
+      <Content />
+    </MemoryProvider>
   );
 }
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index c4328b5d..b7230291 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -7,6 +7,7 @@ import { MemoriesBar } from "./MemoriesBar";
 import { AnimatePresence, motion } from "framer-motion";
 import { Bin } from "@/assets/Bin";
 import { CollectedSpaces } from "../../../types/memory";
+import { useMemory } from "@/contexts/MemoryContext";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -27,11 +28,11 @@ const menuItemsBottom: Array<MenuItem> = [
 
 export default function Sidebar({
   selectChange,
-  spaces,
 }: {
-  selectChange?: (selectedItem: string | null) => Promise<void>;
-  spaces: CollectedSpaces[];
+  selectChange?: (selectedItem: string | null) => void;
 }) {
+  const { spaces } = useMemory();
+
   const menuItemsTop: Array<MenuItem> = [
     {
       icon: <MemoryIcon className="h-10 w-10" />,
diff --git a/apps/web/src/contexts/MemoryContext.tsx b/apps/web/src/contexts/MemoryContext.tsx
index c8b406c0..5be39ffc 100644
--- a/apps/web/src/contexts/MemoryContext.tsx
+++ b/apps/web/src/contexts/MemoryContext.tsx
@@ -1,15 +1,16 @@
+"use client";
 import React from "react";
-import { Space } from "../../types/memory";
+import { CollectedSpaces } from "../../types/memory";
 
 // temperory (will change)
 export const MemoryContext = React.createContext<{
-  spaces: Space[];
+  spaces: CollectedSpaces[];
 }>({
   spaces: [],
 });
 
 export const MemoryProvider: React.FC<
-  { spaces: Space[] } & React.PropsWithChildren
+  { spaces: CollectedSpaces[] } & React.PropsWithChildren
 > = ({ children, spaces }) => {
   return (
     <MemoryContext.Provider value={{ spaces }}>