diff --git a/src/app/[...slug]/layout.tsx b/src/app/[...slug]/layout.tsx
index b0b0b7d1..d3622fc7 100644
--- a/src/app/[...slug]/layout.tsx
+++ b/src/app/[...slug]/layout.tsx
@@ -108,19 +108,13 @@ export default async function Layout({ params, children }: Props) {
                         <label
                           className={cn(
                             'mb-2 text-xs font-bold uppercase leading-4',
-                            // "text-gray-500"
                             'text-on-surface-variant/50',
                           )}
                         >
                           Previous
                         </label>
                         <div className="text-xl">
-                          <Link
-                            href={previousPage.url}
-                            // className="text-gray-900 dark:text-gray-300"
-                          >
-                            {previousPage.title}
-                          </Link>
+                          <Link href={previousPage.url}>{previousPage.title}</Link>
                         </div>
                       </div>
                     )}
@@ -129,19 +123,13 @@ export default async function Layout({ params, children }: Props) {
                         <label
                           className={cn(
                             'mb-2 text-xs font-bold uppercase leading-4',
-                            // "text-gray-500"
                             'text-on-surface-variant/50',
                           )}
                         >
                           Next
                         </label>
                         <div className="text-xl">
-                          <Link
-                            href={nextPage.url}
-                            // className="text-gray-900 dark:text-gray-300"
-                          >
-                            {nextPage.title}
-                          </Link>
+                          <Link href={nextPage.url}>{nextPage.title}</Link>
                         </div>
                       </div>
                     )}
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 4b70ff5d..2b9500e4 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -41,8 +41,8 @@ export default async function Page({ params }: Props) {
   return (
     <>
       <div className="mx-auto max-w-3xl">
-        <div className={cn('post-header mb-4 border-b pb-6', 'border-outline-variant/50')}>
-          <h1 className="mb-4 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
+        <div className={cn('post-header mb-6 border-b pb-4', 'border-outline-variant/50')}>
+          <h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
           {!!doc?.description?.length && (
             <p className={cn('text-base leading-5', 'text-on-surface-variant/50')}>
               {doc.description}
diff --git a/src/app/globals.css b/src/app/globals.css
index 487dd481..19898df4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -13,26 +13,10 @@ body {
   font-optical-sizing: auto;
 }
 
-pre,
-code,
-code span {
-  font-family: 'Inconsolata', monospace !important;
-}
-
-/* Inline code */
-:not(pre) > code {
-  @apply bg-surface-container-high rounded-md px-1.5 py-0.5;
-}
-
 /* Start purging... */
 @tailwind components;
 /* Stop purging. */
 
-/* Write your own custom component styles here */
-.btn-blue {
-  @apply bg-primary-container rounded px-4 py-2 font-bold;
-}
-
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */
@@ -50,127 +34,7 @@ code span {
 }
 
 .content-container :target {
-  /* <Search />'s h-16 + more spacing */
-  scroll-margin-top: theme('spacing.20');
-}
-
-.content-container ul > li {
-  @apply my-2;
-}
-
-.content-container ul > li:before {
-  content: '—';
-  @apply mr-3 inline-block;
-}
-
-.content-container :is(pre, code) {
-  @apply text-sm;
-}
-
-.content-container pre {
-  @apply mb-8 overflow-hidden overflow-x-auto rounded p-4;
-}
-
-main a {
-  @apply text-primary;
-}
-
-.content-container .heading {
-  @apply block font-bold text-on-surface no-underline hover:underline;
-}
-
-blockquote p {
-  @apply text-on-surface-variant/50;
-}
-
-details {
-  @apply ml-4;
-}
-
-summary {
-  @apply -ml-4 mb-2 cursor-pointer select-none;
-}
-
-table {
-  @apply bg-surface-container-low;
-}
-
-th {
-  @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wide;
-}
-
-thead {
-  /* @apply bg-gray-50 dark:bg-gray-800; */
-  @apply text-on-surface-variant/50;
-}
-
-tbody tr:nth-child(even) {
-  /* @apply bg-white dark:bg-gray-900; */
-  @apply bg-surface;
-}
-
-tbody tr:nth-child(odd) {
-  /* @apply bg-gray-50 dark:bg-gray-800; */
-}
-
-td {
-  @apply px-6 py-4 text-sm;
-}
-
-td:first-child {
-  @apply font-medium;
-}
-
-ul.grid-list > li:before {
-  display: none;
-}
-
-/* #intro-demos {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
-  align-items: center;
-  margin: 2em auto;
-  max-width: 900px;
-}
-#intro-demos .demo-cell {
-  padding-right: 10px;
-}
-
-#intro-demos .demo-cell img.laptop {
-  max-width: 410px;
-}
-
-#intro-demos .demo-cell img {
-  width: 100%;
-  margin-right: 10px;
-}
-
-#intro-demos .demo-cell img.tablet {
-  max-width: 280px;
-}
-
-#intro-demos .demo-cell img.phone {
-  max-width: 90px;
-}
-
-.demo-grid {
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.demo-grid > div:last-of-type:nth-child(odd) {
-  grid-column: 1 / -1;
-} */
-
-.search-item.focus-visible li > div {
-  /* @apply bg-gray-800 text-gray-200; */
-}
-
-.hint p {
-  /* @apply dark:text-gray-500; */
-}
-.hint p.mb-4:last-of-type {
-  margin-bottom: 0;
+  scroll-margin-top: theme('spacing.20'); /* <Search />'s h-16 + more spacing */
 }
 
 /**
@@ -182,23 +46,13 @@ ul.grid-list > li:before {
 code[class*='language-'],
 pre[class*='language-'] {
   background: none;
-  /* color: #e4f0fb;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
-  /* font-family: Menlo, Monaco, 'Courier New', monospace; */
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
   line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
@@ -215,10 +69,7 @@ pre[class*='language-'] {
   --literal: #fffac2;
   --falsy: #f087bd;
 
-  @apply p-6;
-  @apply my-5;
-  @apply overflow-auto;
-  @apply rounded-lg;
+  @apply my-5 overflow-auto rounded-lg p-6 font-mono text-sm;
 }
 
 :not(pre) > code[class*='language-'],
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 68a53fed..005d3239 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter, Inconsolata } from 'next/font/google'
 import './globals.css'
 import { svg } from '@/utils/icon'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
@@ -7,6 +7,7 @@ import { ThemeProvider } from 'next-themes'
 import cn from '@/lib/cn'
 
 const inter = Inter({ subsets: ['latin'] })
+const inconsolata = Inconsolata({ subsets: ['latin'] })
 
 const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL
 const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME
diff --git a/src/components/Codesandbox.tsx b/src/components/Codesandbox.tsx
index 2b13305a..39280774 100644
--- a/src/components/Codesandbox.tsx
+++ b/src/components/Codesandbox.tsx
@@ -57,22 +57,8 @@ export default function Codesandbox({
 
       {!hideTitle && (
         <>
-          <h6
-            className={cn(
-              'mt-4 font-bold',
-              // "text-gray-700"
-            )}
-          >
-            {title}
-          </h6>
-          <p
-            className={cn(
-              'mt-1',
-              // "text-gray-700"
-            )}
-          >
-            {description}
-          </p>
+          <h6 className={cn('mt-4 font-bold')}>{title}</h6>
+          <p className={cn('mt-1')}>{description}</p>
           <div className="w-full">
             {tags.map((tag, i) => (
               <span
@@ -80,7 +66,6 @@ export default function Codesandbox({
                 className={cn(
                   'mt-2 inline-block rounded px-1 py-1 text-xs',
                   i !== tags.length - 1 && 'mr-1',
-                  // 'bg-gray-100 text-gray-500',
                 )}
               >
                 {tag}
diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
index 2961e655..5f9d8390 100644
--- a/src/components/Search/SearchItem.tsx
+++ b/src/components/Search/SearchItem.tsx
@@ -40,10 +40,7 @@ function SearchItem({ search, result }: SearchItemProps) {
             // eslint-disable-next-line @next/next/no-img-element
             <img className="max-w-[40%] rounded" src={result.image} alt={result.title} />
           ) : (
-            <Icon
-              icon="enter"
-              // className="text-gray-400"
-            />
+            <Icon icon="enter" />
           )}
         </div>
       </li>
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index 86b44d09..af18884d 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -18,10 +18,7 @@ function SearchModal({ search, results, onClose, onChange }: SearchModelProps) {
       <div className="z-100 absolute bottom-20 left-2/4 top-20 w-[500px] max-w-[90%] -translate-x-1/2 transform overflow-y-auto">
         <div className="relative mt-1 rounded-md shadow-sm">
           <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <Icon
-              icon="search"
-              // className="text-gray-300"
-            />
+            <Icon icon="search" />
           </div>
           <input
             type="search"
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index bb27abcd..43e4015d 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -58,10 +58,7 @@ function Search() {
             </span>
             <span
               style={{ opacity: 1 }}
-              className={cn(
-                'hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block',
-                // 'border-gray-300 text-gray-400 dark:border-gray-700',
-              )}
+              className={cn('hidden rounded-md border px-1.5 py-0.5 text-sm leading-5 sm:block')}
             >
               <span className="sr-only">Press </span>
               <kbd className="font-sans">
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index fc59af1c..0148115c 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -31,12 +31,7 @@ function Toc({ toc }: ToCProps) {
 
   return (
     <div className="max-h-(screen-16) sticky top-16 flex flex-col justify-between overflow-y-auto pb-6">
-      <label
-        className={cn(
-          'mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs',
-          // "text-gray-900 dark:text-gray-300"
-        )}
-      >
+      <label className={cn('mb-2 mt-12 text-sm font-semibold uppercase tracking-wide lg:text-xs')}>
         On This Page
       </label>
       {toc.map((item, index) => (
diff --git a/src/components/mdx/Grid.tsx b/src/components/mdx/Grid.tsx
index 46e4484b..afba4724 100644
--- a/src/components/mdx/Grid.tsx
+++ b/src/components/mdx/Grid.tsx
@@ -12,7 +12,6 @@ export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?:
             ? 'md:grid-cols-2'
             : 'md:grid-cols-1',
       `grid-list gap-4 text-sm`,
-      // 'text-gray-700',
     )}
     style={{ marginBottom: '1rem' }}
   >
diff --git a/src/components/mdx/Hint.tsx b/src/components/mdx/Hint.tsx
index 741f172e..22224c37 100644
--- a/src/components/mdx/Hint.tsx
+++ b/src/components/mdx/Hint.tsx
@@ -3,13 +3,7 @@ import { IoDocumentTextOutline } from 'react-icons/io5'
 
 export const Hint = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div
-      className={cn(
-        'hint my-6 overflow-clip rounded-lg px-6 py-4',
-        // 'bg-yellow-100 dark:text-gray-500',
-        'bg-hint-container',
-      )}
-    >
+    <div className={cn('hint my-6 overflow-clip rounded-lg px-6 py-4', 'bg-hint-container')}>
       <p className="mb-2 flex items-center gap-1 text-lg">
         <IoDocumentTextOutline className="text-[125%]" />
         Note
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 48fdb8d4..987d86c0 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -1,91 +1,87 @@
 import cn from '@/lib/cn'
 import { MARKDOWN_REGEX } from '@/utils/docs'
-import { ComponentProps } from 'react'
+import { ComponentProps, ReactNode } from 'react'
 
 export * from './Grid'
 export * from './Hint'
 
-export const h2 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading tracking-light mb-6 mt-8 text-3xl">
-    <h2 id={id}>{children}</h2>
-  </a>
+type Hn = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+function Heading({ id, Tag, ...props }: { id: string; Tag: Hn } & ComponentProps<Hn>) {
+  return (
+    <a
+      href={`#${id}`}
+      className="tracking-light mb-6 mt-8 block text-3xl font-bold text-on-surface no-underline hover:underline"
+    >
+      <Tag id={id} {...props} />
+    </a>
+  )
+}
+export const h2 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
+  <Heading id={id} Tag="h2" {...props} />
 )
-export const h3 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading tracking-light mb-4 mt-6 text-xl">
-    <h3 id={id}>{children}</h3>
-  </a>
+export const h3 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
+  <Heading id={id} Tag="h3" {...props} />
 )
-export const h4 = ({ children, id }: { children: React.ReactNode; id: string }) => (
-  <a href={`#${id}`} className="heading tracking-light mb-4 mt-4 text-base">
-    <h4 id={id}>{children}</h4>
-  </a>
+export const h4 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
+  <Heading id={id} Tag="h4" {...props} />
 )
-
-export const ul = ({ children }: { children: React.ReactNode }) => (
-  <ul className="mb-8 px-4">{children}</ul>
+export const h5 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
+  <Heading id={id} Tag="h5" {...props} />
 )
-export const ol = ({ children }: { children: React.ReactNode }) => (
-  <ol className="mb-8 px-4">{children}</ol>
+export const h6 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>) => (
+  <Heading id={id} Tag="h6" {...props} />
 )
-export const li = ({ children }: { children: React.ReactNode }) => (
+
+export const ul = (props: ComponentProps<'ul'>) => <ul className="mb-8 px-4" {...props} />
+export const ol = (props: ComponentProps<'ol'>) => <ol className="mb-8 px-4" {...props} />
+export const li = (props: ComponentProps<'li'>) => (
   <li
     className={cn(
-      'mb-4 text-base leading-6',
-      // 'text-gray-700 dark:text-gray-400'
+      'my-2 mb-4 text-base leading-6',
+      'before:mr-3 before:inline-block before:content-["—"]',
     )}
-  >
-    {children}
-  </li>
+    {...props}
+  />
 )
 
-export const p = ({ children }: { children: React.ReactNode }) => (
-  <p
-    className={cn(
-      'mb-4 text-base',
-      // 'text-gray-700 dark:text-gray-400'
-    )}
-  >
-    {children}
-  </p>
-)
+export const p = (props: ComponentProps<'p'>) => <p className="mb-4 text-base" {...props} />
 
-export const blockquote = ({ children }: { children: React.ReactNode }) => (
-  <blockquote
-    className={cn(
-      'mb-8 border-l-4 pl-4 text-base',
-      // "border-gray-600"
-    )}
-  >
-    {children}
+export const blockquote = ({ children }: ComponentProps<'blockquote'>) => (
+  <blockquote className="mb-8 border-l-4 pl-4 text-base">
+    <div className="text-on-surface-variant/50">{children}</div>
   </blockquote>
 )
 
-export const table = ({ children }: { children: React.ReactNode }) => (
+export const table = (props: ComponentProps<'table'>) => (
   <div className="my-8 overflow-auto rounded-lg border border-outline-variant">
-    <table className="min-w-full divide-y divide-outline-variant">{children}</table>
+    <table
+      className="bg-surface-container-low min-w-full divide-y divide-outline-variant"
+      {...props}
+    />
   </div>
 )
 
-export const a = ({
-  href,
-  target,
-  rel,
-  children,
-}: {
-  href: string
-  target?: string
-  rel?: string
-  children: React.ReactNode
-}) => {
-  const isAnchor = href.startsWith('https://')
+export const thead = (props: ComponentProps<'thead'>) => (
+  <thead className="text-on-surface-variant/50" {...props} />
+)
+
+export const th = (props: ComponentProps<'th'>) => (
+  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wide" {...props} />
+)
+
+export const tr = (props: ComponentProps<'tr'>) => <tr className="even:bg-surface" {...props} />
+
+export const td = (props: ComponentProps<'td'>) => (
+  <td className="px-6 py-4 text-sm first:font-medium" {...props} />
+)
+
+export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
+  const isAnchor = href?.startsWith('https://')
   target = isAnchor ? '_blank' : target
   rel = isAnchor ? 'noopener noreferrer' : rel
-  href = isAnchor ? href : href.replace(MARKDOWN_REGEX, '')
-  return (
-    <a href={href} target={target} rel={rel}>
-      {children}
-    </a>
-  )
+  href = isAnchor ? href : href?.replace(MARKDOWN_REGEX, '')
+
+  return <a {...props} href={href} target={target} rel={rel} className="text-primary" />
 }
 
 export const img = ({ src, alt, width, height, className, ...rest }: ComponentProps<'img'>) => (
@@ -101,3 +97,15 @@ export const img = ({ src, alt, width, height, className, ...rest }: ComponentPr
     {...rest}
   />
 )
+
+export const code = (props: ComponentProps<'code'>) => (
+  <code
+    className="bg-surface-container-high rounded-md px-1.5 py-0.5 font-mono text-[85%]"
+    {...props}
+  />
+)
+
+export const details = (props: ComponentProps<'details'>) => <details className="ml-4" {...props} />
+export const summary = (props: ComponentProps<'summary'>) => (
+  <summary className="-ml-4 mb-2 cursor-pointer select-none" {...props} />
+)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5697b564..b78b5ada 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
 import { withMaterialColors, Options } from 'tailwind-material-colors'
 
@@ -5,6 +6,13 @@ const config: Config = {
   darkMode: 'class',
   content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
   plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
+  theme: {
+    extend: {
+      fontFamily: {
+        mono: ['"Inconsolata"', ...defaultTheme.fontFamily.mono],
+      },
+    },
+  },
 }
 
 //