diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7ff6a8f..1647d22 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -22,3 +22,4 @@ import { version } from "@/../package.json";
     </a>
   </p>
 </footer>
+ 
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 01ba585..80260fe 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,9 +10,9 @@ import ThemeToggle from "@components/ThemeToggle";
       <a href="/">{SITE_TITLE}</a>
     </h2>
     <div>
-      <HeaderLink href="/">Home</HeaderLink>
-      <HeaderLink href="/handbook">handbook</HeaderLink>
-      <HeaderLink href="/about">About</HeaderLink>
+      <HeaderLink href="/learning">Learning</HeaderLink>
+      <HeaderLink href="/living">Living</HeaderLink>
+      <HeaderLink href="/applying">Applying</HeaderLink>
     </div>
     <div class="social-links">
       <ThemeToggle client:only />
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 48b7f9d..ca4487e 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -19,11 +19,11 @@ const getLinkClasses = (link: Link) => {
 
 const sidebar = await get();
 ---
-<aside title="Site Navigation">
-	<nav aria-labelledby="grid-left" class="w-64 p-4 border-r dark:border-r-zinc-500">
+<aside title="Site Navigation" class="h-full">
+	<nav aria-labelledby="grid-left" class="h-full w-64 p-4 border-r dark:border-r-zinc-500">
 		<ul>
 			{sidebar.map(item => (item.header ? 
-				<h2 class="mt-4 font-semibold text-zinc-700 dark:text-zinc-300">{item.text}</h2> : 
+				<h2 class="text-lg mt-4 font-semibold text-zinc-700 dark:text-zinc-300">{item.text}</h2> : 
 				<li class={getLinkClasses(item)}>
 					<a href={item.link}>{item.text}</a>
 				</li>))}
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
new file mode 100644
index 0000000..174a1a4
--- /dev/null
+++ b/src/components/TableOfContents.astro
@@ -0,0 +1,15 @@
+---
+const { headers } = Astro.props;
+---
+
+<ul class="flex flex-col gap-4 mt-24">
+  {
+    headers.map(({ slug, text }) => {
+      return (
+        <li class="text-slate-400 hover:text-slate-900">
+          #<a href={`#${slug}`}>{text}</a>
+        </li>
+      );
+    })
+  }
+</ul>
diff --git a/src/content/handbook/index.md b/src/content/handbook/index.md
index 869b13d..2dbbfa8 100644
--- a/src/content/handbook/index.md
+++ b/src/content/handbook/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Handbook'
+title: 'Introduction'
 description: 'Handbook'' root file'
 pubDate: '2024-03-09'
 authors: ['xevion']
diff --git a/src/content/sidebar.ts b/src/content/sidebar.ts
index 5524d1c..dbab462 100644
--- a/src/content/sidebar.ts
+++ b/src/content/sidebar.ts
@@ -47,7 +47,7 @@ const get = async (): Promise<Link[]> => {
   // Begin building the links array (root level first, then the rest of the entries)
   const links: Link[] = entriesByHeader.root.map((entry) => ({
     text: entry.data.title,
-    link: `/handbook/${entry.slug}`,
+    link: `/${entry.slug}`,
   }));
 
   // Remove the root level
@@ -67,7 +67,7 @@ const get = async (): Promise<Link[]> => {
     entriesByHeader[header].forEach((entry) => {
       links.push({
         text: entry.data.title,
-        link: `/handbook/${entry.slug}`,
+        link: `/${entry.slug}`,
       });
     });
   });
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
index 68feb83..e937143 100644
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -1,51 +1,45 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import BaseHead from '@components/BaseHead.astro';
-import Header from '@components/Header.astro';
-import Footer from '@components/Footer.astro';
-import Sidebar from '@components/Sidebar.astro';
+import type { CollectionEntry } from "astro:content";
+import BaseHead from "@components/BaseHead.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Sidebar from "@components/Sidebar.astro";
+import TableOfContents from "@components/TableOfContents.astro";
 
-type Props = CollectionEntry<'handbook'>['data'];
+type Props = CollectionEntry<"handbook">["data"];
 
-const { title, description, pubDate, lastModified } = Astro.props;
+const { title, description, pubDate, lastModified, headers } = Astro.props;
 const currentPage = new URL(Astro.request.url).pathname;
 ---
+
 <html lang="en">
-	<head>
-		<BaseHead title={title} description={description} />
-		<style>
-			main {
-				width: calc(100% - 2em);
-			}
-			/* .prose {
-				width: 720px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 1em;
-				color: rgb(var(--gray-dark));
-			} */
-		</style>
-	</head>
-	<body class="dark:bg-zinc-800 dark:text-zinc-200">
-		<Header currentPage={currentPage} />
-		<div class="grid grid-cols-12">
-			<div class="col-span-3 sticky top-0 pt-12 h-screen flex">
-				<div class="ml-auto">
-					<Sidebar currentPage={currentPage} />
-				</div>
-			</div>
-			<main class="py-4 px-8 pb-32 col-span-6 overflow-auto">
-				<h2 class="text-2xl font-semibold mb-2">{title}</h2>
-				<div class="prose xl:prose-lg prose-zinc dark:prose-invert">
-					<slot />
-					<!-- <PageContent content={content}>
-					</PageContent> -->
-				</div>
-			</main>
-			<!-- <div class="col-span-3 sticky top-0 h-screen flex">
-				<RightSidebar content={content} />
-			</div> -->
-		</div>
-		<Footer />
-	</body>
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+  <body class="dark:bg-zinc-800 dark:text-zinc-200">
+    <Header currentPage={currentPage} />
+    <div class="grid grid-cols-12 pt-12">
+      <div class="col-span-3 sticky top-0 h-screen flex">
+        <div class="ml-auto h-full">
+          <Sidebar currentPage={currentPage} />
+        </div>
+      </div>
+      <div class="col-span-1"></div>
+      <main class="py-4 px-8 pb-32 col-span-6 overflow-auto">
+        <slot />
+      </main>
+      {
+        headers && headers.length > 0 && (
+          <div class="col-span-3 sticky top-0 h-screen flex">
+            <nav aria-labelledby="grid-right">
+              <div class="px-8">
+                <TableOfContents headers={headers} />
+              </div>
+            </nav>
+          </div>
+        )
+      }
+    </div>
+    <Footer />
+  </body>
 </html>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
new file mode 100644
index 0000000..bcccb96
--- /dev/null
+++ b/src/pages/[...slug].astro
@@ -0,0 +1,31 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import Main from '@layouts/Main.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('handbook')
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'handbook'>;
+
+const isProd = import.meta.env.PROD;
+const {render, data} = Astro.props;
+const {title, lastModified} = data;
+const { Content } = await render();
+---
+
+<Main {...data}>
+	<h2 class="text-2xl font-semibold mb-2">{title}</h2>
+		<!-- lastModified can be undefined in some rare circumstances (usually development only), this might fail in production if something went wrong. -->
+		<span>{(lastModified ?? (isProd ? null : new Date()))!.toLocaleDateString('en-us', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+		})}</span>
+        <div class="prose xl:prose-lg prose-zinc dark:prose-invert">
+			<Content />
+        </div>
+</Main>
diff --git a/src/pages/handbook/[...slug].astro b/src/pages/handbook/[...slug].astro
deleted file mode 100644
index 2e5d67f..0000000
--- a/src/pages/handbook/[...slug].astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import { type CollectionEntry, getCollection } from 'astro:content';
-import Main from '@layouts/Main.astro';
-
-export async function getStaticPaths() {
-	const posts = await getCollection('handbook')
-	return posts.map((post) => ({
-		params: { slug: post.slug },
-		props: post,
-	}));
-}
-type Props = CollectionEntry<'handbook'>;
-
-const post = Astro.props;
-const { Content } = await post.render();
----
-
-<Main {...post.data}>
-	<Content />
-</Main>
diff --git a/src/pages/handbook/index.astro b/src/pages/handbook/index.astro
deleted file mode 100644
index f7e0ed1..0000000
--- a/src/pages/handbook/index.astro
+++ /dev/null
@@ -1,108 +0,0 @@
----
-import BaseHead from '@components/BaseHead.astro';
-import Header from '@components/Header.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
-import { getCollection } from 'astro:content';
-import FormattedDate from '@components/FormattedDate.astro';
-
-const posts = (await getCollection('handbook')).sort(
-	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
-);
----
-
-<!doctype html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-		<style>
-			main {
-				width: 960px;
-			}
-			ul {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 2rem;
-				list-style-type: none;
-				margin: 0;
-				padding: 0;
-			}
-			ul li {
-				width: calc(50% - 1rem);
-			}
-			ul li * {
-				text-decoration: none;
-				transition: 0.2s ease;
-			}
-			ul li:first-child {
-				width: 100%;
-				margin-bottom: 1rem;
-				text-align: center;
-			}
-			ul li:first-child img {
-				width: 100%;
-			}
-			ul li:first-child .title {
-				font-size: 2.369rem;
-			}
-			ul li img {
-				margin-bottom: 0.5rem;
-				border-radius: 12px;
-			}
-			ul li a {
-				display: block;
-			}
-			.title {
-				margin: 0;
-				color: rgb(var(--black));
-				line-height: 1;
-			}
-			.date {
-				margin: 0;
-				color: rgb(var(--gray));
-			}
-			ul li a:hover h4,
-			ul li a:hover .date {
-				color: rgb(var(--accent));
-			}
-			ul a:hover img {
-				box-shadow: var(--box-shadow);
-			}
-			@media (max-width: 720px) {
-				ul {
-					gap: 0.5em;
-				}
-				ul li {
-					width: 100%;
-					text-align: center;
-				}
-				ul li:first-child {
-					margin-bottom: 0;
-				}
-				ul li:first-child .title {
-					font-size: 1.563em;
-				}
-			}
-		</style>
-	</head>
-	<body>
-		<Header />
-		<main>
-			<section>
-				<ul>
-					{
-						posts.map((post) => (
-							<li>
-								<a href={`/handbook/${post.slug}/`}>
-									<h4 class="title">{post.data.title}</h4>
-									<p class="date">
-										<FormattedDate date={post.data.pubDate} />
-									</p>
-								</a>
-							</li>
-						))
-					}
-				</ul>
-			</section>
-		</main>
-	</body>
-</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a2f55f1..a98301d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,13 @@
 ---
 import BaseHead from '@components/BaseHead.astro';
 import Header from '@components/Header.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
----
+import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
+import { getCollection } from 'astro:content';
+import Main from '@layouts/Main.astro';
+import FormattedDate from '@components/FormattedDate.astro';
 
-<!doctype html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-	</head>
-	<body class="dark:text-zinc-200 dark:bg-zinc-800">
-		<Header />
-	</body>
-</html>
+const posts = (await getCollection('handbook')).sort(
+	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+);
+---
+<Main>asd</Main>
\ No newline at end of file