diff --git a/astro.config.mjs b/astro.config.mjs
index fc3860775..03ec12575 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,56 +5,57 @@ import compress from 'astro-compress';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
+import preact from '@astrojs/preact';
 
+// https://astro.build/config
 export default defineConfig({
-  site: 'https://roadmap.sh/',
-  markdown: {
-    shikiConfig: {
-      theme: 'dracula',
-    },
-    rehypePlugins: [
-      [
-        rehypeExternalLinks,
-        {
-          target: '_blank',
-          rel: function (element) {
-            const href = element.properties.href;
-            const whiteListedStarts = [
-              '/',
-              '#',
-              'mailto:',
-              'https://github.com/kamranahmedse',
-              'https://thenewstack.io',
-              'https://cs.fyi',
-              'https://roadmap.sh'
-            ];
-
-            if (whiteListedStarts.some((start) => href.startsWith(start))) {
-              return [];
-            }
-
-            return 'noopener noreferrer nofollow';
-          },
-        },
-      ],
-    ],
-  },
-  build: {
-    format: 'file',
-  },
-  integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
-    sitemap({
-      filter: shouldIndexPage,
-      serialize: serializeSitemap,
-    }),
-    compress({
-      css: false,
-      js: false,
-    }),
-  ],
+	site: 'https://roadmap.sh/',
+	markdown: {
+		shikiConfig: {
+			theme: 'dracula',
+		},
+		rehypePlugins: [
+			[
+				rehypeExternalLinks,
+				{
+					target: '_blank',
+					rel: function (element) {
+						const href = element.properties.href;
+						const whiteListedStarts = [
+							'/',
+							'#',
+							'mailto:',
+							'https://github.com/kamranahmedse',
+							'https://thenewstack.io',
+							'https://cs.fyi',
+							'https://roadmap.sh',
+						];
+						if (whiteListedStarts.some((start) => href.startsWith(start))) {
+							return [];
+						}
+						return 'noopener noreferrer nofollow';
+					},
+				},
+			],
+		],
+	},
+	build: {
+		format: 'file',
+	},
+	integrations: [
+		tailwind({
+			config: {
+				applyBaseStyles: false,
+			},
+		}),
+		sitemap({
+			filter: shouldIndexPage,
+			serialize: serializeSitemap,
+		}),
+		compress({
+			css: false,
+			js: false,
+		}),
+		preact(),
+	],
 });
diff --git a/package.json b/package.json
index 4806cf153..deb554bf2 100644
--- a/package.json
+++ b/package.json
@@ -1,43 +1,45 @@
 {
-  "name": "roadmap.sh",
-  "type": "module",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro",
-    "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
-    "compress:jsons": "node bin/compress-jsons.cjs",
-    "upgrade": "ncu -u",
-    "roadmap-links": "node bin/roadmap-links.cjs",
-    "roadmap-dirs": "node bin/roadmap-dirs.cjs",
-    "roadmap-content": "node bin/roadmap-content.cjs",
-    "best-practice-dirs": "node bin/best-practice-dirs.cjs",
-    "test:e2e": "playwright test"
-  },
-  "dependencies": {
-    "@astrojs/sitemap": "^1.2.1",
-    "@astrojs/tailwind": "^3.1.1",
-    "astro": "^2.1.7",
-    "astro-compress": "^1.1.35",
-    "node-html-parser": "^6.1.5",
-    "npm-check-updates": "^16.8.0",
-    "rehype-external-links": "^2.0.1",
-    "roadmap-renderer": "^1.0.4",
-    "tailwindcss": "^3.2.7"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.32.1",
-    "@tailwindcss/typography": "^0.5.9",
-    "gh-pages": "^5.0.0",
-    "js-yaml": "^4.1.0",
-    "markdown-it": "^13.0.1",
-    "openai": "^3.2.1",
-    "prettier": "^2.8.7",
-    "prettier-plugin-astro": "^0.8.0",
+	"name": "roadmap.sh",
+	"type": "module",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"astro": "astro",
+		"deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
+		"compress:jsons": "node bin/compress-jsons.cjs",
+		"upgrade": "ncu -u",
+		"roadmap-links": "node bin/roadmap-links.cjs",
+		"roadmap-dirs": "node bin/roadmap-dirs.cjs",
+		"roadmap-content": "node bin/roadmap-content.cjs",
+		"best-practice-dirs": "node bin/best-practice-dirs.cjs",
+		"test:e2e": "playwright test"
+	},
+	"dependencies": {
+		"@astrojs/preact": "^2.1.0",
+		"@astrojs/sitemap": "^1.2.1",
+		"@astrojs/tailwind": "^3.1.1",
+		"astro": "^2.1.7",
+		"astro-compress": "^1.1.35",
+		"node-html-parser": "^6.1.5",
+		"npm-check-updates": "^16.8.0",
+		"preact": "^10.6.5",
+		"rehype-external-links": "^2.0.1",
+		"roadmap-renderer": "^1.0.4",
+		"tailwindcss": "^3.2.7"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.32.1",
+		"@tailwindcss/typography": "^0.5.9",
+		"gh-pages": "^5.0.0",
+		"js-yaml": "^4.1.0",
+		"markdown-it": "^13.0.1",
+		"openai": "^3.2.1",
+		"prettier": "^2.8.7",
+		"prettier-plugin-astro": "^0.8.0",
     "prettier-plugin-tailwindcss": "^0.2.6"
-  }
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b05efe606..7b12e37c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@astrojs/preact': ^2.1.0
   '@astrojs/sitemap': ^1.2.1
   '@astrojs/tailwind': ^3.1.1
   '@playwright/test': ^1.32.1
@@ -13,6 +14,7 @@ specifiers:
   node-html-parser: ^6.1.5
   npm-check-updates: ^16.8.0
   openai: ^3.2.1
+  preact: ^10.6.5
   prettier: ^2.8.7
   prettier-plugin-astro: ^0.8.0
   prettier-plugin-tailwindcss: ^0.2.6
@@ -21,12 +23,14 @@ specifiers:
   tailwindcss: ^3.2.7
 
 dependencies:
+  '@astrojs/preact': 2.1.0_preact@10.13.2
   '@astrojs/sitemap': 1.2.1
   '@astrojs/tailwind': 3.1.1_xwlinsvcxfu6nyuevlo4g7jv7y
   astro: 2.1.7
   astro-compress: 1.1.35
   node-html-parser: 6.1.5
   npm-check-updates: 16.8.0
+  preact: 10.13.2
   rehype-external-links: 2.0.1
   roadmap-renderer: 1.0.4
   tailwindcss: 3.2.7_postcss@8.4.21
@@ -105,6 +109,22 @@ packages:
       - supports-color
     dev: false
 
+  /@astrojs/preact/2.1.0_preact@10.13.2:
+    resolution: {integrity: sha512-1AnXpnjC24/mWJyq+EN5DoWp+w9Hg/y3dwFX3728rlBhyuY573jx+4+VHuG/g0A1alzJuIAhSPtqCP0YQktUnw==}
+    engines: {node: '>=16.12.0'}
+    peerDependencies:
+      preact: ^10.6.5
+    dependencies:
+      '@babel/core': 7.20.7
+      '@babel/plugin-transform-react-jsx': 7.20.7_@babel+core@7.20.7
+      '@preact/signals': 1.1.3_preact@10.13.2
+      babel-plugin-module-resolver: 5.0.0
+      preact: 10.13.2
+      preact-render-to-string: 5.2.6_preact@10.13.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@astrojs/prism/2.1.0:
     resolution: {integrity: sha512-+II6nfIFGZ7iH0FunhRGcj/J1mCxjcHl85cZRuFePKLoIhFHJT3nC3myQnUw386hUaIn2W20McxxtAVf4leeRQ==}
     engines: {node: '>=16.12.0'}
@@ -792,6 +812,19 @@ packages:
       config-chain: 1.1.13
     dev: false
 
+  /@preact/signals-core/1.2.3:
+    resolution: {integrity: sha512-Kui4p7PMcEQevBgsTO0JBo3gyQ88Q3qzEvsVCuSp11t0JcN4DmGCTJcGRVSCq7Bn7lGxJBO+57jNSzDoDJ+QmA==}
+    dev: false
+
+  /@preact/signals/1.1.3_preact@10.13.2:
+    resolution: {integrity: sha512-N09DuAVvc90bBZVRwD+aFhtGyHAmJLhS3IFoawO/bYJRcil4k83nBOchpCEoS0s5+BXBpahgp0Mjf+IOqP57Og==}
+    peerDependencies:
+      preact: 10.x
+    dependencies:
+      '@preact/signals-core': 1.2.3
+      preact: 10.13.2
+    dev: false
+
   /@proload/core/0.3.3:
     resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==}
     dependencies:
@@ -1217,6 +1250,17 @@ packages:
       - debug
     dev: true
 
+  /babel-plugin-module-resolver/5.0.0:
+    resolution: {integrity: sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==}
+    engines: {node: '>= 16'}
+    dependencies:
+      find-babel-config: 2.0.0
+      glob: 8.0.3
+      pkg-up: 3.1.0
+      reselect: 4.1.7
+      resolve: 1.22.1
+    dev: false
+
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
@@ -2072,6 +2116,14 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /find-babel-config/2.0.0:
+    resolution: {integrity: sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      json5: 2.2.2
+      path-exists: 4.0.0
+    dev: false
+
   /find-cache-dir/3.3.2:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
@@ -2081,6 +2133,13 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
+  /find-up/3.0.0:
+    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+    engines: {node: '>=6'}
+    dependencies:
+      locate-path: 3.0.0
+    dev: false
+
   /find-up/4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -2885,6 +2944,14 @@ packages:
       strip-bom: 3.0.0
     dev: false
 
+  /locate-path/3.0.0:
+    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-locate: 3.0.0
+      path-exists: 3.0.0
+    dev: false
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -3905,6 +3972,13 @@ packages:
       yocto-queue: 0.1.0
     dev: false
 
+  /p-locate/3.0.0:
+    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: false
+
   /p-locate/4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -3999,6 +4073,11 @@ packages:
       tslib: 2.4.1
     dev: false
 
+  /path-exists/3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4070,6 +4149,13 @@ packages:
     dependencies:
       find-up: 4.1.0
 
+  /pkg-up/3.1.0:
+    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 3.0.0
+    dev: false
+
   /playwright-core/1.32.1:
     resolution: {integrity: sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==}
     engines: {node: '>=14'}
@@ -4164,6 +4250,19 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /preact-render-to-string/5.2.6_preact@10.13.2:
+    resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
+    peerDependencies:
+      preact: '>=10'
+    dependencies:
+      preact: 10.13.2
+      pretty-format: 3.8.0
+    dev: false
+
+  /preact/10.13.2:
+    resolution: {integrity: sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==}
+    dev: false
+
   /prebuild-install/7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
     engines: {node: '>=10'}
@@ -4274,6 +4373,10 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  /pretty-format/3.8.0:
+    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
+    dev: false
+
   /prismjs/1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -4523,6 +4626,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /reselect/4.1.7:
+    resolution: {integrity: sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==}
+    dev: false
+
   /resolve-alpn/1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
     dev: false
diff --git a/tsconfig.json b/tsconfig.json
index 77da9dd00..6dbd39320 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
\ No newline at end of file
+	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact"
+	}
+}