diff --git a/apps/web/src/app/ui/page.tsx b/apps/web/src/app/ui/page.tsx
index 2fd44722..9c3b8df9 100644
--- a/apps/web/src/app/ui/page.tsx
+++ b/apps/web/src/app/ui/page.tsx
@@ -1,11 +1,15 @@
+"use client";
 import Main from "@/components/Main";
 import Sidebar from "@/components/Sidebar/index";
+import { useState } from "react";
+
+export default function Home() {
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
 
-export default async function Home() {
   return (
     <div className="flex w-screen">
-      <Sidebar />
-      <Main />
+      <Sidebar onSelectChange={setSelectedItem} />
+      <Main sidebarOpen={selectedItem !== null} />
     </div>
   );
 }
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index 5ec10364..a9e09992 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -4,11 +4,14 @@ import { FilterCombobox } from "./Sidebar/FilterCombobox";
 import { Textarea2 } from "./ui/textarea";
 import { ArrowRight } from "lucide-react";
 
-export default function Main() {
+export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
   const [value, setValue] = useState("");
 
   return (
-    <main className="flex h-screen w-full items-center justify-center px-60">
+    <main
+      data-sidebar-open={sidebarOpen}
+      className="flex h-screen w-full items-center justify-center px-60 [&[data-sidebar-open='true']]:px-20"
+    >
       <Textarea2
         className="h-[20vh]"
         textAreaProps={{
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx
index 50e885e8..7adfdb91 100644
--- a/apps/web/src/components/Sidebar/FilterCombobox.tsx
+++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx
@@ -71,13 +71,13 @@ export function FilterCombobox() {
           <CommandInput placeholder="Filter spaces..." />
           <CommandList>
             <CommandEmpty>Nothing found</CommandEmpty>
+            {/* bug: doesn't work on clicking with mouse only keyboard, weird */}
             <CommandGroup>
               {spaces.map((space) => (
                 <CommandItem
                   key={space.value}
                   value={space.value}
                   onSelect={(val) => {
-                    console.log(val, "selected");
                     setValues((prev) =>
                       prev.includes(val)
                         ? prev.filter((v) => v !== val)
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index dda95907..569fc353 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,11 +1,89 @@
-"use server";
+"use client";
 import { StoredContent } from "@/server/db/schema";
-import { AddNewPagePopover, PageItem } from "./PagesItem";
-import { CategoryItem } from "./CategoryItem";
 import { MemoryIcon } from "../../assets/Memories";
 import { Trash2, User2 } from "lucide-react";
+import React, { useState } from "react";
 
-export default async function Sidebar() {
+export type MenuItem = {
+  icon: React.ReactNode | React.ReactNode[];
+  label: string;
+};
+
+const menuItemsTop: Array<MenuItem> = [
+  {
+    icon: <MemoryIcon className="h-10 w-10" />,
+    label: "Memories",
+  },
+];
+
+const menuItemsBottom: Array<MenuItem> = [
+  {
+    icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
+    label: "Trash",
+  },
+  {
+    icon: <User2 strokeWidth={1.3} className="h-6 w-6" />,
+    label: "Profile",
+  },
+];
+
+export default function Sidebar({
+  onSelectChange,
+}: {
+  onSelectChange?: (selectedItem: string | null) => void;
+}) {
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+
+  React.useEffect(() => {
+    onSelectChange?.(selectedItem);
+  }, [selectedItem]);
+
+  return (
+    <>
+      <aside className="bg-rgray-2 border-rgray-6 flex h-screen max-h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
+        {menuItemsTop.map((item, index) => (
+          <MenuItem
+            key={index}
+            item={item}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+        ))}
+        <div className="mt-auto" />
+        {menuItemsBottom.map((item, index) => (
+          <MenuItem
+            key={index}
+            item={item}
+            selectedItem={selectedItem}
+            setSelectedItem={setSelectedItem}
+          />
+        ))}
+      </aside>
+      {selectedItem && <SubSidebar />}
+    </>
+  );
+}
+
+const MenuItem = ({
+  item: { icon, label },
+  selectedItem,
+  setSelectedItem,
+}: {
+  item: MenuItem;
+  selectedItem: string | null;
+  setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
+}) => (
+  <button
+    data-state-on={selectedItem === label}
+    onClick={() => setSelectedItem((prev) => (prev === label ? null : label))}
+    className="on:opacity-100 on:bg-rgray-4 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+  >
+    {icon}
+    <span className="">{label}</span>
+  </button>
+);
+
+export function SubSidebar() {
   const pages: StoredContent[] = [
     {
       id: 1,
@@ -30,79 +108,6 @@ export default async function Sidebar() {
   ];
 
   return (
-    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
-      <button
-        // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-4 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <MemoryIcon className="h-10 w-10" />
-        <span className="">Memories</span>
-      </button>
-      <button
-        // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <Trash2 strokeWidth={1.3} className="h-6 w-6" />
-        <span className="">Trash</span>
-      </button>
-      <button
-        // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md px-3 py-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <User2 strokeWidth={1.3} className="h-6 w-6" />
-        <span className="">Profile</span>
-      </button>
-    </aside>
-  );
-}
-
-export async function SubSidebar() {
-  const pages: StoredContent[] = [
-    {
-      id: 1,
-      content: "",
-      title: "Visual Studio Code",
-      url: "https://code.visualstudio.com",
-      description: "",
-      image: "https://code.visualstudio.com/favicon.ico",
-      baseUrl: "https://code.visualstudio.com",
-      savedAt: new Date(),
-    },
-    {
-      id: 2,
-      content: "",
-      title: "yxshv/vscode: An unofficial remake of vscode's landing page",
-      url: "https://github.com/yxshv/vscode",
-      description: "",
-      image: "https://github.com/favicon.ico",
-      baseUrl: "https://github.com",
-      savedAt: new Date(),
-    },
-  ];
-
-  return (
-    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-[20vw] flex-col items-center border-r px-3 py-5 font-light">
-      <button
-        // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-4 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <MemoryIcon className="h-10 w-10" />
-        <span className="">Memories</span>
-      </button>
-      <button
-        data-state-on="true"
-        className="on:opacity-100 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md bg-black p-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <Trash2 strokeWidth={1.3} className="h-6 w-6" />
-        <span className="">Trash</span>
-      </button>
-      <button
-        // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md p-3 px-4 py-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
-      >
-        <User2 strokeWidth={1.3} className="h-6 w-6" />
-        <span className="">Profile</span>
-      </button>
-    </aside>
+    <aside className="bg-rgray-3 border-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r px-3 py-5 font-light"></aside>
   );
 }