diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 967af7b..c9074e6 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -6,13 +6,27 @@ import {
   faHashtag,
   faBookmark,
   faChartSimple,
+  faChevronDown,
 } from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { Disclosure, Transition } from "@headlessui/react";
 
 export default function Sidebar({ className }: { className?: string }) {
+  const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
+    const storedValue = localStorage.getItem("tagDisclosure");
+    return storedValue ? storedValue === "true" : true;
+  });
+
+  const [collectionDisclosure, setCollectionDisclosure] = useState<boolean>(
+    () => {
+      const storedValue = localStorage.getItem("collectionDisclosure");
+      return storedValue ? storedValue === "true" : true;
+    }
+  );
+
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
 
@@ -20,6 +34,17 @@ export default function Sidebar({ className }: { className?: string }) {
 
   const [active, setActive] = useState("");
 
+  useEffect(() => {
+    localStorage.setItem("tagDisclosure", tagDisclosure ? "true" : "false");
+  }, [tagDisclosure]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "collectionDisclosure",
+      collectionDisclosure ? "true" : "false"
+    );
+  }, [collectionDisclosure]);
+
   useEffect(() => {
     setActive(router.asPath);
   }, [router, collections]);
@@ -80,61 +105,104 @@ export default function Sidebar({ className }: { className?: string }) {
         </Link>
       </div>
 
-      <div className="text-gray-500 mt-5">
-        <p className="text-sm mb-2 pl-2 font-semibold">Collections</p>
-      </div>
-      <div className="flex flex-col gap-1">
-        {collections
-          .sort((a, b) => a.name.localeCompare(b.name))
-          .map((e, i) => {
-            return (
-              <Link key={i} href={`/collections/${e.id}`}>
-                <div
-                  className={`${
-                    active === `/collections/${e.id}`
-                      ? "bg-sky-200"
-                      : "hover:bg-slate-200 bg-gray-100"
-                  } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-                >
-                  <FontAwesomeIcon
-                    icon={faFolder}
-                    className="w-6 h-6 drop-shadow"
-                    style={{ color: e.color }}
-                  />
+      <Disclosure defaultOpen={collectionDisclosure}>
+        <Disclosure.Button
+          onClick={() => {
+            setCollectionDisclosure(!collectionDisclosure);
+          }}
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+        >
+          <p>Collections</p>
 
-                  <p className="text-sky-600 truncate w-4/6">{e.name}</p>
-                </div>
-              </Link>
-            );
-          })}
-      </div>
-      <div className="text-gray-500 mt-5">
-        <p className="text-sm mb-2 pl-2 font-semibold">Tags</p>
-      </div>
-      <div className="flex flex-col gap-1">
-        {tags
-          .sort((a, b) => a.name.localeCompare(b.name))
-          .map((e, i) => {
-            return (
-              <Link key={i} href={`/tags/${e.id}`}>
-                <div
-                  className={`${
-                    active === `/tags/${e.id}`
-                      ? "bg-sky-200"
-                      : "hover:bg-slate-200 bg-gray-100"
-                  } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-                >
-                  <FontAwesomeIcon
-                    icon={faHashtag}
-                    className="w-4 h-4 text-sky-500 mt-1"
-                  />
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            className={`w-3 h-3 ${
+              collectionDisclosure ? "rotate-reverse" : "rotate"
+            }`}
+          />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="transform opacity-0 -translate-y-3"
+          enterTo="transform opacity-100 translate-y-0"
+          leave="transition duration-100 ease-out"
+          leaveFrom="transform opacity-100 translate-y-0"
+          leaveTo="transform opacity-0 -translate-y-3"
+        >
+          <Disclosure.Panel className="flex flex-col gap-1">
+            {collections
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((e, i) => {
+                return (
+                  <Link key={i} href={`/collections/${e.id}`}>
+                    <div
+                      className={`${
+                        active === `/collections/${e.id}`
+                          ? "bg-sky-200"
+                          : "hover:bg-slate-200 bg-gray-100"
+                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                    >
+                      <FontAwesomeIcon
+                        icon={faFolder}
+                        className="w-6 h-6 drop-shadow"
+                        style={{ color: e.color }}
+                      />
 
-                  <p className="text-sky-600 truncate w-4/6">{e.name}</p>
-                </div>
-              </Link>
-            );
-          })}
-      </div>
+                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
+                    </div>
+                  </Link>
+                );
+              })}
+          </Disclosure.Panel>
+        </Transition>
+      </Disclosure>
+      <Disclosure defaultOpen={tagDisclosure}>
+        <Disclosure.Button
+          onClick={() => {
+            setTagDisclosure(!tagDisclosure);
+          }}
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+        >
+          <p>Tags</p>
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            className={`w-3 h-3 ${tagDisclosure ? "rotate-reverse" : "rotate"}`}
+          />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="transform opacity-0 -translate-y-3"
+          enterTo="transform opacity-100 translate-y-0"
+          leave="transition duration-100 ease-out"
+          leaveFrom="transform opacity-100 translate-y-0"
+          leaveTo="transform opacity-0 -translate-y-3"
+        >
+          <Disclosure.Panel className="flex flex-col gap-1">
+            {tags
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((e, i) => {
+                return (
+                  <Link key={i} href={`/tags/${e.id}`}>
+                    <div
+                      className={`${
+                        active === `/tags/${e.id}`
+                          ? "bg-sky-200"
+                          : "hover:bg-slate-200 bg-gray-100"
+                      } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                    >
+                      <FontAwesomeIcon
+                        icon={faHashtag}
+                        className="w-4 h-4 text-sky-500 mt-1"
+                      />
+
+                      <p className="text-sky-600 truncate w-4/6">{e.name}</p>
+                    </div>
+                  </Link>
+                );
+              })}
+          </Disclosure.Panel>
+        </Transition>
+      </Disclosure>
     </div>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index e760b44..e5d185e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -27,6 +27,16 @@
   hyphens: auto;
 }
 
+.rotate {
+  transition: transform 0.1s ease;
+  transform: rotate(-90deg);
+}
+
+.rotate-reverse {
+  transition: transform 0.1s ease;
+  transform: rotate(0deg);
+}
+
 .fade-in {
   animation: fade-in-animation 100ms;
 }