diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[[...slug]]/page.tsx
index 2dbefa7..c59b55f 100644
--- a/src/app/[[...slug]]/page.tsx
+++ b/src/app/[[...slug]]/page.tsx
@@ -34,7 +34,7 @@ const DocsPage = async ({
     const decodedSlug: string = decodeURIComponent(slug || "");
     const page: DocsContentMetadata | undefined = pages.find(
         (metadata: DocsContentMetadata): boolean =>
-            metadata.slug === (decodedSlug || "intro")
+            metadata.slug === (decodedSlug || pages[0].slug)
     );
     if (!page) {
         notFound();
diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
index d4bf00e..20c08cb 100644
--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@@ -17,7 +17,8 @@ const DocsFooter = ({
 
     const current: number = pages.findIndex(
         (page: DocsContentMetadata) =>
-            (path === "/" && page.slug === "intro") || path === `/${page.slug}`
+            (path === "/" && page.slug === pages[0].slug) ||
+            path === `/${page.slug}`
     );
     const previous: DocsContentMetadata | undefined =
         current > 0 ? pages[current - 1] : undefined;
diff --git a/src/components/sidebar/sidebar-links.tsx b/src/components/sidebar/sidebar-links.tsx
index b66fe4f..42bf2eb 100644
--- a/src/components/sidebar/sidebar-links.tsx
+++ b/src/components/sidebar/sidebar-links.tsx
@@ -22,7 +22,7 @@ const SidebarLinks = ({
     return (
         <div className="flex flex-col gap-1">
             {Object.values(tree).map((node: TreeNode) => (
-                <CategoryItem key={node.slug} node={node} />
+                <CategoryItem key={node.slug} pages={pages} node={node} />
             ))}
         </div>
     );
@@ -36,17 +36,20 @@ type TreeNode = {
 };
 
 const CategoryItem = ({
+    pages,
     node,
     depth = 0,
     isLast = true,
 }: {
+    pages: DocsContentMetadata[];
     node: TreeNode;
     depth?: number;
     isLast?: boolean;
 }) => {
     const path = decodeURIComponent(usePathname());
     const active =
-        (path === "/" && node.slug === "intro") || path === `/${node.slug}`;
+        (path === "/" && node.slug === pages[0].slug) ||
+        path === `/${node.slug}`;
     const [isOpen, setIsOpen] = useState(true);
     const hasChildren = Object.keys(node.children).length > 0;
 
@@ -121,6 +124,7 @@ const CategoryItem = ({
                                     (child, index, array) => (
                                         <CategoryItem
                                             key={child.slug}
+                                            pages={pages}
                                             node={child}
                                             depth={depth + 1}
                                             isLast={index === array.length - 1}