diff --git a/src/components/ApiLayout/Sidebar.astro b/src/components/ApiLayout/Sidebar.astro
index 02adf14..5ed16d0 100644
--- a/src/components/ApiLayout/Sidebar.astro
+++ b/src/components/ApiLayout/Sidebar.astro
@@ -1,14 +1,10 @@
 ---
 import type { Hierarchy, Post } from "../../layouts/ApiLayout.astro";
+import { splitAndLast } from "../utils";
 
 const hierarchy: Hierarchy = Astro.props.hierarchy;
 
-function splitAndLast(s: string): string {
-    const segments = s.split("/");
-    return segments[segments.length - 1]!;
-}
-
-function postComparison(a: Post, b: Post): number {
+export function postComparison(a: Post, b: Post): number {
     const s1 = splitAndLast(a.url);
     const s2 = splitAndLast(b.url);
 
@@ -17,19 +13,30 @@ function postComparison(a: Post, b: Post): number {
 ---
 
 {
-    Object.entries(hierarchy.children).map(([folderName, children]) => (
-        <>
-            <div class="mt-6 px-2 py-1 uppercase font-display text-c-text-2 font-medium">
-                {folderName}
-            </div>
+    Object.entries(hierarchy.children).map(
+        ([folderName, [folderPost, children]]) => (
+            <>
+                {folderPost !== null ? (
+                    <a
+                        class="inline-block rounded-2xl w-full hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors px-3 py-2"
+                        href={folderPost.url}
+                    >
+                        {splitAndLast(folderPost.url)}
+                    </a>
+                ) : (
+                    <div class="mt-6 px-2 py-1 uppercase font-display text-c-text-2 font-medium">
+                        {folderName}
+                    </div>
+                )}
 
-            <div class="pl-2 my-1">
-                <ul class="border-l border-c-border-1">
-                    <Astro.self hierarchy={children} />
-                </ul>
-            </div>
-        </>
-    ))
+                <div class="pl-2 my-1">
+                    <ul class="border-l border-c-border-1">
+                        <Astro.self hierarchy={children} />
+                    </ul>
+                </div>
+            </>
+        ),
+    )
 }
 {
     hierarchy.posts.sort(postComparison).map((p) => (
diff --git a/src/components/utils.ts b/src/components/utils.ts
index 88c9213..f715072 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -58,3 +58,7 @@ function trimWhitespace(input: string, count: number): string {
     }
 }
 
+export function splitAndLast(s: string): string {
+    const segments = s.split("/");
+    return segments[segments.length - 1]!;
+}
diff --git a/src/layouts/ApiLayout.astro b/src/layouts/ApiLayout.astro
index f165128..a4d5198 100644
--- a/src/layouts/ApiLayout.astro
+++ b/src/layouts/ApiLayout.astro
@@ -3,6 +3,7 @@ import Navbar from "../components/Navbar.astro";
 import BaseLayout from "./BaseLayout.astro";
 import TOC from "../components/TOC.astro";
 import Sidebar from "../components/ApiLayout/Sidebar.astro";
+import { splitAndLast } from "../components/utils";
 
 const { headings } = Astro.props;
 
@@ -21,7 +22,7 @@ const posts: Posts = await Astro.glob("../pages/api/std/**/*.{md,mdx}");
 
 export type Hierarchy = {
     posts: Array<Post>;
-    children: Record<string, Hierarchy>;
+    children: Record<string, [Post | null, Hierarchy]>;
 };
 
 function createHierarchy(posts: Posts): Hierarchy {
@@ -57,13 +58,17 @@ function createHierarchy(posts: Posts): Hierarchy {
             // check if folder exists, create otherwise
             if (!hierarchy.children[folderName]) {
                 // create if doesnt exist
-                hierarchy.children[folderName] = {
-                    posts: [],
-                    children: {},
-                };
+                hierarchy.children[folderName] = [
+                    null,
+                    {
+                        posts: [],
+                        children: {},
+                    },
+                ];
             }
 
-            currentHierarchy = hierarchy.children[folderName];
+            const [_, childrenHierarchy] = hierarchy.children[folderName]!;
+            currentHierarchy = childrenHierarchy;
         }
 
         // add the page
@@ -73,7 +78,32 @@ function createHierarchy(posts: Posts): Hierarchy {
     return hierarchy;
 }
 
-const hierarchy = createHierarchy(posts);
+function normalizeHierarchy(h: Hierarchy): Hierarchy {
+    let posts = h.posts;
+    for (const folderName in h.children) {
+        // search if there is a post with the same name
+        // as the folder
+        const postIdx = h.posts.findIndex(
+            (post) => splitAndLast(post.url) === folderName,
+        );
+
+        if (postIdx !== -1) {
+            const post = h.posts[postIdx]!;
+            h.children[folderName]![0] = post;
+            posts.splice(postIdx, 1);
+        }
+    }
+
+    // do the same to all children
+    // TODO
+
+    return {
+        children: h.children,
+        posts,
+    };
+}
+
+const hierarchy = normalizeHierarchy(createHierarchy(posts));
 ---
 
 <BaseLayout>