diff --git a/.gitignore b/.gitignore
index 36e4935..1ba5dab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ bun.lock
 .env
 /uploads
 .idea
+temp
+.vscode/settings.json
diff --git a/package.json b/package.json
index cea47bb..c82425e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"fluent-ffmpeg": "^2.1.3",
 		"image-thumbnail": "^1.0.17",
 		"luxon": "^3.6.1",
+		"preact-render-to-string": "^6.5.13",
 		"redis": "^4.7.0"
 	}
 }
diff --git a/src/components/head.tsx b/src/components/head.tsx
new file mode 100644
index 0000000..b519547
--- /dev/null
+++ b/src/components/head.tsx
@@ -0,0 +1,42 @@
+import type { FunctionalComponent, JSX } from "preact";
+
+export const Head: FunctionalComponent<Props> = ({
+	title,
+	styles,
+	scripts,
+}): JSX.Element => (
+	<>
+		<meta charSet="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="color-scheme" content="dark" />
+
+		{title && <title>{title}</title>}
+
+		<link rel="stylesheet" href="/public/css/global.css" />
+
+		{styles?.map(
+			(style): JSX.Element => (
+				<link key={style} rel="stylesheet" href={`/public/css/${style}.css`} />
+			),
+		)}
+
+		{scripts?.map(
+			(script: string | [string, boolean]): JSX.Element | undefined => {
+				if (typeof script === "string") {
+					return <script src={`/public/js/${script}.js`} defer />;
+				}
+
+				if (Array.isArray(script)) {
+					return (
+						<script
+							src={`/public/js/${script[0]}.js`}
+							{...(script[1] ? { defer: true } : {})}
+						/>
+					);
+				}
+			},
+		)}
+
+		<script src="/public/js/global.js" />
+	</>
+);
diff --git a/src/routes/test.tsx b/src/routes/test.tsx
new file mode 100644
index 0000000..f4e96f6
--- /dev/null
+++ b/src/routes/test.tsx
@@ -0,0 +1,26 @@
+import { HtmlShell } from "@/templates/shell";
+import { render } from "preact-render-to-string";
+import type { JSX } from "preact/jsx-runtime";
+
+const routeDef = {
+	method: "GET",
+	accepts: "*/*",
+	returns: "text/html",
+};
+
+async function handler(request: ExtendedRequest): Promise<Response> {
+	const name = "test";
+	const page: JSX.Element = (
+		<HtmlShell title="Test Page" styles={[]} scripts={[]}>
+			<div class="foo">test {name}</div>
+		</HtmlShell>
+	);
+
+	return new Response(`<!DOCTYPE html>${render(page)}`, {
+		headers: {
+			"Content-Type": "text/html",
+		},
+	});
+}
+
+export { handler, routeDef };
diff --git a/src/server.ts b/src/server.ts
index 15471ee..6171530 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -23,7 +23,7 @@ class ServerHandler {
 		this.router = new FileSystemRouter({
 			style: "nextjs",
 			dir: "./src/routes",
-			fileExtensions: [".ts"],
+			fileExtensions: [".ts", ".tsx"],
 			origin: `http://${this.host}:${this.port}`,
 		});
 	}
diff --git a/src/templates/shell.tsx b/src/templates/shell.tsx
new file mode 100644
index 0000000..99fda20
--- /dev/null
+++ b/src/templates/shell.tsx
@@ -0,0 +1,12 @@
+import { Head } from "@/components/head";
+
+export function HtmlShell({ title, styles, scripts, children }: Props) {
+	return (
+		<html lang="en">
+			<head>
+				<Head title={title} styles={styles} scripts={scripts} />
+			</head>
+			<body>{children}</body>
+		</html>
+	);
+}
diff --git a/tsconfig.json b/tsconfig.json
index 68a5a97..871dc75 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,8 @@
 		"module": "ESNext",
 		"moduleDetection": "force",
 		"jsx": "react-jsx",
-		"allowJs": true,
+		"jsxImportSource": "preact",
+		"allowJs": false,
 		// Bundler mode
 		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
diff --git a/types/preact.d.ts b/types/preact.d.ts
new file mode 100644
index 0000000..a340d43
--- /dev/null
+++ b/types/preact.d.ts
@@ -0,0 +1,6 @@
+type Props = {
+	title?: string;
+	styles?: string[];
+	scripts?: (string | [string, boolean])[];
+	children?: preact.ComponentChildren;
+};
