diff --git a/components/CollectionSelection.tsx b/components/CollectionSelection.tsx
index 47a449f..e9aa758 100644
--- a/components/CollectionSelection.tsx
+++ b/components/CollectionSelection.tsx
@@ -60,8 +60,32 @@ const CollectionItem = ({
 
   const router = useRouter();
 
+  // Check if the current collection or any of its subcollections is active
+  const isActiveOrParentOfActive = React.useMemo(() => {
+    const isActive = active === `/collections/${collection.id}`;
+    if (isActive) return true;
+
+    const checkIfParentOfActive = (parentId: number): boolean => {
+      return collections.some((e) => {
+        if (e.id === parseInt(active.split("/collections/")[1])) {
+          if (e.parentId === parentId) return true;
+          if (e.parentId) return checkIfParentOfActive(e.parentId);
+        }
+        return false;
+      });
+    };
+
+    return checkIfParentOfActive(collection.id as number);
+  }, [active, collection.id, collections]);
+
+  const [isOpen, setIsOpen] = useState(isActiveOrParentOfActive);
+
+  useEffect(() => {
+    setIsOpen(isActiveOrParentOfActive);
+  }, [isActiveOrParentOfActive]);
+
   return hasChildren ? (
-    <details>
+    <details open={isOpen}>
       <summary
         className={`${
           active === `/collections/${collection.id}`
@@ -92,10 +116,8 @@ const CollectionItem = ({
         </Link>
       </summary>
 
-      {/* Nested Collections, make it recursively */}
-
       {hasChildren && (
-        <div className="pl-4">
+        <div className="ml-3 pl-1 border-l border-neutral-content">
           {collections
             .filter((e) => e.parentId === collection.id)
             .map((subCollection) => (
diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 03deba0..20bcef2 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/components/ModalContent/NewLinkModal.tsx
@@ -179,7 +179,7 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder="Will be auto generated if nothing is provided."
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index 6118718..be55933 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -24,6 +24,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import Link from "next/link";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -111,15 +112,46 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
-            <div className="flex items-center gap-2">
-              <i
-                className="bi-folder-fill text-3xl drop-shadow"
-                style={{ color: activeCollection?.color }}
-              ></i>
+            <div>
+              <div className="flex items-center gap-2">
+                <i
+                  className="bi-folder-fill text-3xl drop-shadow"
+                  style={{ color: activeCollection?.color }}
+                ></i>
 
-              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
-                {activeCollection?.name}
-              </p>
+                <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+                  {activeCollection?.name}
+                </p>
+              </div>
+
+              {activeCollection.subCollections &&
+              activeCollection.subCollections.length > 0 ? (
+                <details className="mt-2 mb-2">
+                  <summary className="text-sm cursor-pointer select-none">
+                    View Sub-Collections
+                  </summary>
+
+                  <div className="flex gap-3 mt-1 pl-3 ml-1 border-l border-neutral-content">
+                    {collections
+                      .filter((e) => e.parentId === activeCollection?.id)
+                      .map((e, i) => {
+                        return (
+                          <Link
+                            key={i}
+                            className="flex gap-1 items-center btn btn-ghost btn-sm"
+                            href={`/collections/${e.id}`}
+                          >
+                            <i
+                              className="bi-folder-fill text-2xl drop-shadow"
+                              style={{ color: e.color }}
+                            ></i>
+                            <p className="text-xs">{e.name}</p>
+                          </Link>
+                        );
+                      })}
+                  </div>
+                </details>
+              ) : undefined}
             </div>
 
             <div className="dropdown dropdown-bottom dropdown-end mt-2">
@@ -228,6 +260,32 @@ export default function Index() {
           <p>{activeCollection?.description}</p>
         ) : undefined}
 
+        {/* {activeCollection?.subCollections &&
+        activeCollection?.subCollections.length > 0 ? (
+          <fieldset className="border rounded-md p-2 border-neutral-content">
+            <legend className="text-sm ml-2">Sub-Collections</legend>
+            <div className="flex gap-3">
+              {collections
+                .filter((e) => e.parentId === activeCollection?.id)
+                .map((e, i) => {
+                  return (
+                    <Link
+                      key={i}
+                      className="flex gap-1 items-center btn btn-ghost btn-sm"
+                      href={`/collections/${e.id}`}
+                    >
+                      <i
+                        className="bi-folder-fill text-2xl drop-shadow"
+                        style={{ color: e.color }}
+                      ></i>
+                      <p className="text-xs">{e.name}</p>
+                    </Link>
+                  );
+                })}
+            </div>
+          </fieldset>
+        ) : undefined} */}
+
         <div className="divider my-0"></div>
 
         <div className="flex justify-between items-end gap-5">
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index ca342cf..f5ed526 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -39,7 +39,7 @@ export default function Collections() {
 
         <div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
           {sortedCollections
-            .filter((e) => e.ownerId === data?.user.id)
+            .filter((e) => e.ownerId === data?.user.id && e.parentId === null)
             .map((e, i) => {
               return <CollectionCard key={i} collection={e} />;
             })}