diff --git a/package.json b/package.json
index 64fdd7d..36c68cd 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "waku start"
   },
   "dependencies": {
+    "@sindresorhus/slugify": "^2.2.1",
     "next-mdx-remote": "^5.0.0",
     "prettier": "^3.3.3",
     "react": "19.0.0-rc-5c56b873-20241107",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18a580f..f2f9d41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@sindresorhus/slugify':
+        specifier: ^2.2.1
+        version: 2.2.1
       next-mdx-remote:
         specifier: ^5.0.0
         version: 5.0.0(@types/react@18.3.12)(acorn@8.14.0)(react@19.0.0-rc-5c56b873-20241107)
@@ -440,6 +443,14 @@ packages:
   '@shikijs/vscode-textmate@9.3.0':
     resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
 
+  '@sindresorhus/slugify@2.2.1':
+    resolution: {integrity: sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==}
+    engines: {node: '>=12'}
+
+  '@sindresorhus/transliterate@1.6.0':
+    resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
+    engines: {node: '>=12'}
+
   '@swc/core-darwin-arm64@1.9.1':
     resolution: {integrity: sha512-2/ncHSCdAh5OHem1fMITrWEzzl97OdMK1PHc9CkxSJnphLjRubfxB5sbc5tDhcO68a5tVy+DxwaBgDec3PXnOg==}
     engines: {node: '>=10'}
@@ -858,6 +869,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -2092,6 +2107,15 @@ snapshots:
 
   '@shikijs/vscode-textmate@9.3.0': {}
 
+  '@sindresorhus/slugify@2.2.1':
+    dependencies:
+      '@sindresorhus/transliterate': 1.6.0
+      escape-string-regexp: 5.0.0
+
+  '@sindresorhus/transliterate@1.6.0':
+    dependencies:
+      escape-string-regexp: 5.0.0
+
   '@swc/core-darwin-arm64@1.9.1':
     optional: true
 
@@ -2531,6 +2555,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
diff --git a/posts/first-draft.mdx b/posts/first-draft.mdx
index 8ba5872..8dc5fe0 100644
--- a/posts/first-draft.mdx
+++ b/posts/first-draft.mdx
@@ -3,4 +3,7 @@ slug: first-draft
 title: A Draft
 description: hi
 date: "2024-11-30"
+draft: true
 ---
+
+> A really long quote
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index 9010608..4392b60 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -1,114 +1,50 @@
-// import { Link } from 'waku';
+import { Link } from "waku";
 
 import { Code } from "./code";
-// import { getAnchor } from '../utils';
+import { getAnchor } from "../utils";
 
 export const components = {
-  // h2: ({ children, ...rest }: any) => {
-  //   const id = getAnchor(children);
+  h2: ({ children, ...rest }: any) => {
+    const id = getAnchor(children);
 
-  //   return (
-  //     <h2
-  //       id={id}
-  //       className="mb-2 mt-16 scroll-mt-16 text-balance text-3xl font-bold leading-none text-white first:mt-0 sm:text-[2.75rem] xl:mt-32 xl:scroll-mt-32"
-  //       {...rest}
-  //     >
-  //       <a href={`#${id}`}>{children}</a>
-  //     </h2>
-  //   );
-  // },
-  // h3: ({ children, ...rest }: any) => {
-  //   const id = getAnchor(children);
+    return (
+      <h2 id={id} {...rest}>
+        <a href={`#${id}`}>{children}</a>
+      </h2>
+    );
+  },
+  h3: ({ children, ...rest }: any) => {
+    const id = getAnchor(children);
 
-  //   return (
-  //     <h3
-  //       id={id}
-  //       className="mb-2 mt-8 scroll-mt-8 text-balance text-xl font-bold leading-none text-white sm:text-3xl"
-  //       {...rest}
-  //     >
-  //       <a href={`#${id}`}>{children}</a>
-  //     </h3>
-  //   );
-  // },
-  // h4: ({ children, ...rest }: any) => {
-  //   const id = getAnchor(children);
+    return (
+      <h3 id={id} {...rest}>
+        <a href={`#${id}`}>{children}</a>
+      </h3>
+    );
+  },
+  h4: ({ children, ...rest }: any) => {
+    const id = getAnchor(children);
 
-  //   return (
-  //     <h4
-  //       id={id}
-  //       className="mb-2 mt-8 scroll-mt-8 text-balance text-lg font-bold uppercase leading-none tracking-wide text-white sm:text-xl"
-  //       {...rest}
-  //     >
-  //       <a href={`#${id}`}>{children}</a>
-  //     </h4>
-  //   );
-  // },
-  // p: ({ children, ...rest }: any) => {
-  //   return (
-  //     <p
-  //       className="mb-4 text-pretty text-sm font-normal leading-normal text-white/60 sm:text-lg lg:text-xl"
-  //       {...rest}
-  //     >
-  //       {children}
-  //     </p>
-  //   );
-  // },
-  // strong: ({ children, ...rest }: any) => {
-  //   return (
-  //     <b className="font-bold text-white" {...rest}>
-  //       {children}
-  //     </b>
-  //   );
-  // },
-  // em: ({ children, ...rest }: any) => {
-  //   return (
-  //     <i className="italic text-white/70" {...rest}>
-  //       {children}
-  //     </i>
-  //   );
-  // },
-  // a: ({ href, children, ...rest }: any) => {
-  //   const classNames =
-  //     'text-white/80 underline decoration-white/60 decoration-1 transition-colors duration-300 ease-in-out hover:text-white';
+    return (
+      <h4 id={id} {...rest}>
+        <a href={`#${id}`}>{children}</a>
+      </h4>
+    );
+  },
+  a: ({ href, children, ...rest }: any) => {
+    if (href.startsWith("/")) {
+      <Link to={href} {...rest}>
+        {children}
+      </Link>;
+    }
 
-  //   if (href.startsWith('/')) {
-  //     <Link to={href} className={classNames} {...rest}>
-  //       {children}
-  //     </Link>;
-  //   }
+    return (
+      <a href={href} target="_blank" rel="noreferrer" {...rest}>
+        {children}
+      </a>
+    );
+  },
 
-  //   return (
-  //     <a
-  //       href={href}
-  //       className={classNames}
-  //       target="_blank"
-  //       rel="noreferrer"
-  //       {...rest}
-  //     >
-  //       {children}
-  //     </a>
-  //   );
-  // },
-  // ul: ({ children, ...rest }: any) => {
-  //   return (
-  //     <ul
-  //       className="mb-4 ml-4 list-disc text-base font-normal leading-normal text-white/60 sm:text-lg lg:text-xl"
-  //       {...rest}
-  //     >
-  //       {children}
-  //     </ul>
-  //   );
-  // },
-  // code: ({ children, ...rest }: any) => {
-  //   return (
-  //     <span
-  //       className="-my-0.5 inline-block rounded bg-gray-900 px-1.5 py-px font-mono text-[13px] text-white/80 sm:text-base group-[.blockquote]:sm:text-sm"
-  //       {...rest}
-  //     >
-  //       {children}
-  //     </span>
-  //   );
-  // },
   pre: ({ children, ...rest }: any) => {
     return (
       <Code
@@ -118,29 +54,4 @@ export const components = {
       />
     );
   },
-  // blockquote: ({ children, ...rest }: any) => {
-  //   return (
-  //     <div className="mb-6 overflow-clip rounded-xl bg-gray-950 sm:!-mx-3">
-  //       <blockquote className="blockquote group p-4 sm:p-6" {...rest}>
-  //         <div className="mb-1 flex items-center gap-2">
-  //           <svg
-  //             xmlns="http://www.w3.org/2000/svg"
-  //             viewBox="0 0 128 128"
-  //             width="64px"
-  //             height="64px"
-  //             className="size-3.5 fill-current text-white"
-  //           >
-  //             <path d="M 64 6 C 32 6 6 32 6 64 C 6 96 32 122 64 122 C 96 122 122 96 122 64 C 122 32 96 6 64 6 z M 64 12 C 92.7 12 116 35.3 116 64 C 116 92.7 92.7 116 64 116 C 35.3 116 12 92.7 12 64 C 12 35.3 35.3 12 64 12 z M 64 30 A 9 9 0 0 0 64 48 A 9 9 0 0 0 64 30 z M 64 59 C 59 59 55 63 55 68 L 55 92 C 55 97 59 101 64 101 C 69 101 73 97 73 92 L 73 68 C 73 63 69 59 64 59 z" />
-  //           </svg>
-  //           <div className="text-sm font-black uppercase leading-none tracking-wide text-white sm:text-base">
-  //             Note
-  //           </div>
-  //         </div>
-  //         <div className="[&>*]:!text-sm [&>*]:!text-white/60 [&>*]:last:!mb-0 [&>*]:sm:!text-base">
-  //           {children}
-  //         </div>
-  //       </blockquote>
-  //     </div>
-  //   );
-  // },
 };
diff --git a/src/page-components/layout.tsx b/src/page-components/layout.tsx
index 9e17a29..458942a 100644
--- a/src/page-components/layout.tsx
+++ b/src/page-components/layout.tsx
@@ -14,7 +14,7 @@ export async function RootLayout({ children }: RootLayoutProps) {
     <div className="font-sans">
       <meta name="description" content={data.description} />
       <Header />
-      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
+      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh justify-center">
         {children}
       </main>
       <Footer />
diff --git a/src/page-components/post.tsx b/src/page-components/post.tsx
index a6efff3..d1b12ec 100644
--- a/src/page-components/post.tsx
+++ b/src/page-components/post.tsx
@@ -37,7 +37,7 @@ export async function PostPage({ slug }: BlogArticlePageProps) {
         title={`${frontmatter.title} — Waku`}
         description={frontmatter.description}
       />
-      <article className="container prose dark:prose-invert lg:prose-xl my-20">
+      <article className="container prose dark:prose-invert lg:prose-xl">
         <h1>{frontmatter.title}</h1>
         <span className="block text-gray-500 -mt-6 -mb-2">{date}</span>
         {content}
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..90aca53
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,15 @@
+import slugify from "@sindresorhus/slugify";
+
+export const getAnchor = (value: any) => {
+  const isString = typeof value === "string";
+
+  return isString ? slugify(value) : "";
+};
+
+export const scrollTo = (id: string) => {
+  const element = document.getElementById(id);
+
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+};