diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 1833fffce..e5355dfbd 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -26,9 +26,7 @@ let config = {
     experimental: {
         appNavFailHandling: true,
         caseSensitiveRoutes: true,
-        mdxRs: {
-            mdxType: 'gfm'
-        },
+        mdxRs: true,
         optimizePackageImports: [],
         optimizeServerReact: true,
         parallelServerBuildTraces: true,
diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
index 9c43c9e0e..7cf721077 100644
--- a/docs/src/app/docs/layout.tsx
+++ b/docs/src/app/docs/layout.tsx
@@ -1,6 +1,8 @@
-import '@/styles/base.scss';
+import * as Nordstar from '@nordcom/nordstar';
+import { Label } from '@nordcom/nordstar';
 
 import type { Metadata } from 'next';
+import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 export const metadata: Metadata = {
@@ -11,6 +13,53 @@ export const metadata: Metadata = {
     }
 };
 
+function NavBlock({ label, href, children }: { label: string; href: string; children: ReactNode }) {
+    return (
+        <section className="flex flex-col gap-4">
+            <Label as={Link} href={href} className="block text-base leading-none text-foreground">
+                {label}
+            </Label>
+
+            <div className="flex flex-col gap-4 px-3 text-base font-normal leading-none text-foreground-highlight *:flex *:gap-3 *:text-inherit *:leading-none *:transition-colors *:before:block *:before:content-['•']">
+                {children}
+            </div>
+        </section>
+    );
+}
+
 export default function DocsLayout({ children }: { children: ReactNode }) {
-    return <>{children}</>;
+    return (
+        <div className="grid grid-cols-[18rem_1fr] gap-6">
+            <nav className="flex flex-col gap-6">
+                <NavBlock label="Guide" href="/docs/">
+                    <Link href="/docs/getting-started/" className="hover:text-primary">
+                        Introduction
+                    </Link>
+                    <Link href="/docs/installation/" className="hover:text-primary">
+                        Installation
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Customization" href="/docs/customization/">
+                    <Link href="/docs/customization/theme/" className="hover:text-primary">
+                        Theme
+                    </Link>
+                    <Link href="/docs/customization/system/" className="hover:text-primary">
+                        System
+                    </Link>
+                </NavBlock>
+
+                <NavBlock label="Components" href="/docs/components/">
+                    {Object.keys(Nordstar)
+                        .filter((key) => (Nordstar as any)[key].displayName)
+                        .map((key) => (
+                            <Link key={key} href={`/docs/components/${key}/`} className="hover:text-primary">
+                                {key}
+                            </Link>
+                        ))}
+                </NavBlock>
+            </nav>
+            <section>{children}</section>
+        </div>
+    );
 }
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index f07384b32..7158dcc7a 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import '@/styles/base.scss';
+import '@/styles/globals.css';
 
 import { Providers } from '@/components/providers';
 import { Card, cn, Header, View } from '@nordcom/nordstar';
diff --git a/docs/src/styles/base.scss b/docs/src/styles/globals.css
similarity index 100%
rename from docs/src/styles/base.scss
rename to docs/src/styles/globals.css
diff --git a/packages/core/system/README.md b/packages/core/system/README.md
index 55504ab3d..6a465e562 100644
--- a/packages/core/system/README.md
+++ b/packages/core/system/README.md
@@ -1,4 +1,4 @@
-# [@nordcom/nordstar-system](https://nordstar.dev/docs/system/?utm_source=nordstar&utm_campaign=oss)
+# [@nordcom/nordstar-system](https://nordstar.dev/docs/customization/system/?utm_source=nordstar&utm_campaign=oss)
 
 General utility libraries and tools used by all of the Nordstar components, hooks and packages. Also currently provides the theming for all components, which should be extracted to another package.
 
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 004ed849f..47c6d8488 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -66,7 +66,7 @@
     "bugs": {
         "url": "https://github.com/NordcomInc/nordstar/issues"
     },
-    "homepage": "https://nordstar.dev/docs/system/",
+    "homepage": "https://nordstar.dev/docs/customization/system/",
     "scripts": {
         "build": "vite build",
         "dev": "vite build --watch",