diff --git a/apps/web/src/app/ui/content.tsx b/apps/web/src/app/ui/content.tsx
new file mode 100644
index 00000000..6e28eaf8
--- /dev/null
+++ b/apps/web/src/app/ui/content.tsx
@@ -0,0 +1,15 @@
+"use client";
+import Main from "@/components/Main";
+import Sidebar from "@/components/Sidebar/index";
+import { useState } from "react";
+
+export default function Content() {
+  const [selectedItem, setSelectedItem] = useState<string | null>();
+
+  return (
+    <div className="flex w-screen">
+      <Sidebar onSelectChange={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 03a35535..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} />
-      <Main sidebarOpen={selectedItem !== null} />
-    </div>
+    <MemoryProvider spaces={[]}>
+      <Content />
+    </MemoryProvider>
   );
 }
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index aa72a48e..e9a7071d 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -8,6 +8,14 @@ import useViewport from "@/hooks/useViewport";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 
+function supportsDVH() {
+  try {
+    return CSS.supports("height: 100dvh");
+  } catch {
+    return false;
+  }
+}
+
 export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const [hide, setHide] = useState(false);
   const [value, setValue] = useState("");
@@ -16,19 +24,9 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const textArea = useRef<HTMLTextAreaElement>(null);
   const main = useRef<HTMLDivElement>(null);
 
-  console.log("main px", sidebarOpen);
-
   useEffect(() => {
     function onResize() {
       if (!main.current || !window.visualViewport) return;
-      // setValue(
-      //   (prev) =>
-      //     prev +
-      //     " changed to " +
-      //     window.visualViewport?.height +
-      //     " " +
-      //     window.innerHeight,
-      // );
       if (
         window.visualViewport.height < window.innerHeight + 20 &&
         window.visualViewport.height > window.innerHeight - 20
@@ -52,20 +50,16 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
       data-sidebar-open={sidebarOpen}
       ref={main}
       className={cn(
-        "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
-        hide
-          ? "pb-5"
-          : CSS.supports("height: 100dvh")
-            ? "pb-[13vh]"
-            : "pb-[20vh]",
+        "sidebar flex w-full flex-col items-end justify-center gap-5 px-5 pt-5 transition-[padding-left,padding-top,padding-right] delay-200 duration-200 md:items-center md:gap-10 md:px-72 [&[data-sidebar-open='true']]:pr-10 [&[data-sidebar-open='true']]:delay-0 md:[&[data-sidebar-open='true']]:pl-[calc(2.5rem+30vw)]",
+        hide ? "pb-5" : supportsDVH() ? "pb-[13vh]" : "pb-[20vh]",
       )}
     >
-      <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl">
+      <h1 className="text-rgray-11 mt-auto w-full text-center text-3xl md:mt-0">
         Ask your Second brain
       </h1>
       <Textarea2
         ref={textArea}
-        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
+        className="mt-auto h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:mt-0 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2"
         textAreaProps={{
           placeholder: "Ask your SuperMemory...",
           className:
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 55211f84..9c2cfd63 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,11 +1,11 @@
-'use client';
-import { StoredContent } from '@/server/db/schema';
-import { MemoryIcon } from '../../assets/Memories';
-import { Trash2, User2 } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
-import { MemoriesBar } from './MemoriesBar';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Bin } from '@/assets/Bin';
+"use client";
+import { StoredContent } from "@/server/db/schema";
+import { MemoryIcon } from "../../assets/Memories";
+import { Trash2, User2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { MemoriesBar } from "./MemoriesBar";
+import { AnimatePresence, motion } from "framer-motion";
+import { Bin } from "@/assets/Bin";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -16,7 +16,7 @@ export type MenuItem = {
 const menuItemsTop: Array<MenuItem> = [
   {
     icon: <MemoryIcon className="h-10 w-10" />,
-    label: 'Memories',
+    label: "Memories",
     content: MemoriesBar,
   },
 ];
@@ -24,18 +24,18 @@ const menuItemsTop: Array<MenuItem> = [
 const menuItemsBottom: Array<MenuItem> = [
   {
     icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: 'Trash',
+    label: "Trash",
   },
   {
     icon: <User2 strokeWidth={1.3} className="h-6 w-6" />,
-    label: 'Profile',
+    label: "Profile",
   },
 ];
 
 export default function Sidebar({
-  selectChange,
+  onSelectChange,
 }: {
-  selectChange?: (selectedItem: string | null) => Promise<void>;
+  onSelectChange?: (selectedItem: string | null) => void;
 }) {
   const menuItems = [...menuItemsTop, ...menuItemsBottom];
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -44,7 +44,7 @@ export default function Sidebar({
     menuItems.find((i) => i.label === selectedItem)?.content ?? (() => <></>);
 
   useEffect(() => {
-    void selectChange?.(selectedItem);
+    void onSelectChange?.(selectedItem);
   }, [selectedItem]);
 
   return (
@@ -53,7 +53,7 @@ export default function Sidebar({
         <div className="bg-rgray-2 border-r-rgray-6 relative z-[50] flex h-full w-full flex-col items-center justify-center border-r px-2 py-5 ">
           <MenuItem
             item={{
-              label: 'Memories',
+              label: "Memories",
               icon: <MemoryIcon className="h-10 w-10" />,
               content: MemoriesBar,
             }}
@@ -65,7 +65,7 @@ export default function Sidebar({
 
           <MenuItem
             item={{
-              label: 'Trash',
+              label: "Trash",
               icon: <Bin id="trash" className="z-[300] h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -74,7 +74,7 @@ export default function Sidebar({
           />
           <MenuItem
             item={{
-              label: 'Profile',
+              label: "Profile",
               icon: <User2 strokeWidth={1.3} className="h-7 w-7" />,
             }}
             selectedItem={selectedItem}
@@ -117,11 +117,11 @@ const MenuItem = ({
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
     <motion.div
-      initial={{ opacity: 0, x: '-100%' }}
+      initial={{ opacity: 0, x: "-100%" }}
       animate={{ opacity: 1, x: 0 }}
       exit={{
         opacity: 0,
-        x: '-100%',
+        x: "-100%",
         transition: { delay: 0.2 },
       }}
       transition={{
diff --git a/apps/web/src/contexts/MemoryContext.tsx b/apps/web/src/contexts/MemoryContext.tsx
new file mode 100644
index 00000000..c8b406c0
--- /dev/null
+++ b/apps/web/src/contexts/MemoryContext.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Space } from "../../types/memory";
+
+// temperory (will change)
+export const MemoryContext = React.createContext<{
+  spaces: Space[];
+}>({
+  spaces: [],
+});
+
+export const MemoryProvider: React.FC<
+  { spaces: Space[] } & React.PropsWithChildren
+> = ({ children, spaces }) => {
+  return (
+    <MemoryContext.Provider value={{ spaces }}>
+      {children}
+    </MemoryContext.Provider>
+  );
+};
+
+export const useMemory = () => {
+  const context = React.useContext(MemoryContext);
+  if (context === undefined) {
+    throw new Error("useMemory must be used within a MemoryProvider");
+  }
+  return context;
+};