diff --git a/app/bun.lock b/app/bun.lock
index a2bd847..b07c64d 100644
--- a/app/bun.lock
+++ b/app/bun.lock
@@ -14,7 +14,6 @@
         "fastify": "^5.3.0",
         "prismjs": "^1.30.0",
         "solid-heroicons": "^3.2.4",
-        "solid-highlight": "^0.1.26",
         "solid-js": "^1.9.5",
         "solid-jsx": "^1.1.4",
         "solid-mdx": "^0.0.7",
@@ -934,8 +933,6 @@
 
     "solid-heroicons": ["solid-heroicons@3.2.4", "", { "dependencies": { "solid-js": "^1.7.6" } }, "sha512-u6BMdFLvkJnvUGYzdFcWp1wvJ4hb9Y1zd3AbZ9D3bUmmiy9jBzNZX+RcqBCI2EKRvdQwAb1UB9bkESfqfhayDg=="],
 
-    "solid-highlight": ["solid-highlight@0.1.26", "", { "peerDependencies": { "prismjs": "^1.29.0", "solid-js": "^1.8.0" } }, "sha512-Iw1mi3vE+YCBBBU/+HHc5y8VNULaGXUX4OK2c9TbzegOGCitzW0uNIvb0s3S0KoVv7Uma/KadWHNFXkwZCwPgQ=="],
-
     "solid-js": ["solid-js@1.9.5", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "^1.1.0", "seroval-plugins": "^1.1.0" } }, "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw=="],
 
     "solid-jsx": ["solid-jsx@1.1.4", "", { "peerDependencies": { "solid-js": ">=1.4.0" } }, "sha512-A4E9cB+wZpHZrXzv3+OWr6zaGS0FjD/UAKqbI38R1JwogjlBXdSGC2PgaIMisnGYKL3oJ55FPLv4QRkENmdbWQ=="],
diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx
index 3389d25..60acc0e 100644
--- a/app/components/Logo.tsx
+++ b/app/components/Logo.tsx
@@ -34,7 +34,7 @@ function LogomarkPaths() {
 
 export function Logo(props: JSX.IntrinsicElements["svg"]) {
 	return (
-		<svg view-box="0 0 58 38" {...props}>
+		<svg viewBox="0 0 58 38" {...props}>
 			<title>Memento Dev</title>
 			<LogomarkPaths />
 		</svg>
diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index 14afe88..5f599ba 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -1,9 +1,10 @@
-import { type Node } from "@markdoc/markdoc";
+import type { JSXElement } from "solid-js";
 
-import { TableOfContents } from "@syntax/TableOfContents";
+import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
-import { collectSections } from "@/lib/sections";
-import { DocsHeader } from "@syntax/DocsHeader";
+import { usePageContext } from "vike-solid/usePageContext";
+import { collectSections } from "@/libs/sections";
+import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";
 
 export function DocsLayout({
@@ -12,7 +13,7 @@ export function DocsLayout({
 	estimatedReadingTime,
 	nodes,
 }: {
-	children: React.ReactNode;
+	children: JSXElement;
 	frontmatter: { title?: string };
 	estimatedReadingTime?: string;
 	nodes: Array<Node>;
@@ -36,3 +37,40 @@ export function DocsLayout({
 		</>
 	);
 }
+
+type DocsHeaderProps = {
+	title?: string;
+	estimatedReadingTime?: string;
+};
+
+export function DocsHeader(props: DocsHeaderProps) {
+	const { urlPathname } = usePageContext();
+
+	const section = navigation.find((section) =>
+		section.links.find((link) => link.href === urlPathname),
+	);
+
+	if (!props.title && !section) {
+		return null;
+	}
+
+	return (
+		<header class="mb-9 space-y-1">
+			{section && (
+				<p class="font-display text-sm font-medium text-violet-500">
+					{section.title}
+				</p>
+			)}
+			{props.title && (
+				<h1 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+					{props.title}
+				</h1>
+			)}
+			{/* {props.estimatedReadingTime && (
+        <p class="text-sm text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
+          <ClockIcon class="w-4" /> {props.estimatedReadingTime}
+        </p>
+      )} */}
+		</header>
+	);
+}
diff --git a/app/layouts/LayoutDefault copy.tsx b/app/layouts/LayoutDefault copy.tsx
deleted file mode 100755
index 9f916e2..0000000
--- a/app/layouts/LayoutDefault copy.tsx	
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { JSX } from "solid-js";
-
-import "./tailwind.css";
-
-import { Link } from "@/components/Link";
-import logoUrl from "@/assets/logo.svg";
-
-export default function LayoutDefault(props: { children?: JSX.Element }) {
-	return (
-		<div class={"flex max-w-5xl m-auto"}>
-			<Sidebar>
-				<Logo />
-				<Link href="/">Welcome</Link>
-				<Link href="/todo">Todo</Link>
-				<Link href="/star-wars">Data Fetching</Link>
-				{""}
-			</Sidebar>
-			<Content>{props.children}</Content>
-		</div>
-	);
-}
-
-function Sidebar(props: { children: JSX.Element }) {
-	return (
-		<div
-			id="sidebar"
-			class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
-		>
-			{props.children}
-		</div>
-	);
-}
-
-function Content(props: { children: JSX.Element }) {
-	return (
-		<div id="page-container">
-			<div id="page-content" class={"p-5 pb-12 min-h-screen"}>
-				{props.children}
-			</div>
-		</div>
-	);
-}
-
-function Logo() {
-	return (
-		<div class={"p-5 mb-2"}>
-			<a href="/">
-				<img src={logoUrl} height={64} width={64} alt="logo" />
-			</a>
-		</div>
-	);
-}
diff --git a/app/package.json b/app/package.json
index 200b979..de79f3d 100755
--- a/app/package.json
+++ b/app/package.json
@@ -19,7 +19,6 @@
 		"fastify": "^5.3.0",
 		"prismjs": "^1.30.0",
 		"solid-heroicons": "^3.2.4",
-		"solid-highlight": "^0.1.26",
 		"solid-js": "^1.9.5",
 		"solid-jsx": "^1.1.4",
 		"solid-mdx": "^0.0.7",
diff --git a/app/pages/index/+Page.tsx b/app/pages/index/+Page.tsx
index fa5d1c4..c089ede 100755
--- a/app/pages/index/+Page.tsx
+++ b/app/pages/index/+Page.tsx
@@ -1,7 +1,7 @@
 export default function Page() {
 	return (
 		<>
-			<h1 class={"font-bold text-3xl pb-4"}>My Vike app</h1>
+			<h1>My Vike app</h1>
 			This page is:
 			<ul>
 				<li>Rendered to HTMLs.</li>