diff --git a/packages/react/src/App.tsx b/packages/react/src/App.tsx
index 8f82b37..c6d6c20 100644
--- a/packages/react/src/App.tsx
+++ b/packages/react/src/App.tsx
@@ -11,6 +11,13 @@ import DocsLayout from "./DocsLayout";
 import ErrorBoundary from "./ErrorHandler";
 import DynamicLayout from "./DynamicLayout";
 
+import DocsIntroduction, {
+  tableOfContents as docsIntroductionToc,
+} from "./docs/introduction.mdx";
+import DocsInstallation, {
+  tableOfContents as docsInstallationToc,
+} from "./docs/installation.mdx";
+
 import { HeadingContext } from "./HeadingContext";
 import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
 
@@ -96,7 +103,7 @@ const overrideComponents = {
   h6: forwardRef<HTMLHeadingElement, any>(HashedHeaders("h6")),
 };
 
-const docsModules = import.meta.glob("./docs/**/*.mdx");
+const docsModules = import.meta.glob("./docs/components/*.mdx");
 
 const routes = Object.keys(docsModules).map((path) => {
   const sfPath = path.replace("./docs", "").replace(".mdx", "");
@@ -126,6 +133,23 @@ const router = createBrowserRouter(
     <Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
       <Route index element={<Home />} />
       <Route path="docs" element={<DocsLayout />}>
+        <Route index loader={() => redirect("/docs/introduction")} />
+        <Route
+          path="introduction"
+          element={
+            <DynamicLayout toc={docsIntroductionToc}>
+              <DocsIntroduction />
+            </DynamicLayout>
+          }
+        />
+        <Route
+          path="installation"
+          element={
+            <DynamicLayout toc={docsInstallationToc}>
+              <DocsInstallation />
+            </DynamicLayout>
+          }
+        />
         <Route
           path="components"
           loader={() => redirect("/docs/components/button")}
diff --git a/packages/react/src/RouteObject.ts b/packages/react/src/RouteObject.ts
index d4c3556..e14737d 100644
--- a/packages/react/src/RouteObject.ts
+++ b/packages/react/src/RouteObject.ts
@@ -1,4 +1,4 @@
-const docsModules = import.meta.glob('./docs/**/*.mdx');
+const docsModules = import.meta.glob('./docs/components/*.mdx');
 
 const mainNav = [
   {
@@ -19,14 +19,24 @@ const mainNav = [
 ];
 
 const sideNav: Record<string, ({ path: string; name: string; eq: (path: string) => boolean })[]> = {
-  "Documents": [],
+  "Documents": [
+    {
+      path: "/docs/introduction",
+      name: "Introduction",
+      eq: (pathname: string) => pathname === "/docs/introduction"
+    },
+    {
+      path: "/docs/installation",
+      name: "Installation",
+      eq: (pathname: string) => pathname === "/docs/installation"
+    }
+  ],
   "Components": []
 };
 
 Object.keys(docsModules).forEach((path) => {
   const name = (path.split('/').pop() ?? '').replace('.mdx', '');
-  const section = path.includes('/components/') ? "Components" : "Documents";
-  sideNav[section].push({
+  sideNav["Components"].push({
     path: path.replace('./docs', '/docs').replace('.mdx', ''),
     name: name.charAt(0).toUpperCase() + name.slice(1),
     eq: (pathname: string) => pathname === path.replace('./docs', '/docs').replace('.mdx', '')
diff --git a/packages/react/src/docs/docs/installation.mdx b/packages/react/src/docs/installation.mdx
similarity index 100%
rename from packages/react/src/docs/docs/installation.mdx
rename to packages/react/src/docs/installation.mdx
diff --git a/packages/react/src/docs/docs/introduction.mdx b/packages/react/src/docs/introduction.mdx
similarity index 100%
rename from packages/react/src/docs/docs/introduction.mdx
rename to packages/react/src/docs/introduction.mdx