diff --git a/build.earth b/build.earth
index 097cc6a..1ff47a7 100644
--- a/build.earth
+++ b/build.earth
@@ -17,7 +17,7 @@ docs-build:
     COPY ./README.adoc docs/index.adoc
     COPY --dir ./docs .
 
-    RUN asciidoctor -r asciidoctor-mathematical -- ./docs/*.adoc
+    RUN asciidoctor -r asciidoctor-mathematical --embedded -- ./docs/*.adoc
     RUN \
         find docs -type f -not -iname '*.html' -not -iname '*.png' -not -iname '*.svg' -delete && \
         :
diff --git a/docs/ALGORITHM.adoc b/docs/ALGORITHM.adoc
index e9001da..d5766d3 100644
--- a/docs/ALGORITHM.adoc
+++ b/docs/ALGORITHM.adoc
@@ -7,7 +7,7 @@ include::common.adoc.template[]
 
 The goal of this document is to define the algorithm.
 
-If you want to see the steps to get to this definition, go to link:/docs/DESIGN.html[DESIGN].
+If you want to see the steps to get to this definition, go to link:design[DESIGN].
 
 == Data format
 
diff --git a/docs/DESIGN.adoc b/docs/DESIGN.adoc
index 886fe12..7e7af00 100644
--- a/docs/DESIGN.adoc
+++ b/docs/DESIGN.adoc
@@ -8,7 +8,7 @@ include::common.adoc.template[]
 
 The goal of this document is to walk through how the design was chosen.
 
-If you want to see the algorithm definition, go to link:/docs/ALGORITHM.html[ALGORITHM].
+If you want to see the algorithm definition, go to link:algorithm[ALGORITHM].
 
 == 10,000 meter view
 
@@ -559,7 +559,7 @@ image::./annotated_wordlist_example.png[Screenshot of docs/annotated_words.ods a
 ==== Wordlist generation
 
 The final wordlist can be generated by running the scripts in `./wordlist/`, which brings together the full list of words, nltk lemmatized words, and manual annotated words into one list.
-See link:WORDLIST.html[WORDLIST] for more information
+See link:wordlist[WORDLIST] for more information
 
 The output is of the format:
 
diff --git a/docs/index.adoc b/docs/index.adoc
index 1ffc552..2fa7d82 100644
--- a/docs/index.adoc
+++ b/docs/index.adoc
@@ -6,9 +6,9 @@ include::common.adoc.template[]
 
 == Pages
 
-* link:/docs/ALGORITHM.html[ALGORITHM] - Algorithm definition
-* link:/docs/DESIGN.html[DESIGN] - Algorithm design documentation
-* link:/docs/WORDLIST.html[WORDLIST] - Wordlist design and implementation
+* link:algorithm[ALGORITHM] - Algorithm definition
+* link:design[DESIGN] - Algorithm design documentation
+* link:wordlist[WORDLIST] - Wordlist design and implementation
 
 ++++
 <style>
diff --git a/justfile b/justfile
index e3a2225..848b688 100644
--- a/justfile
+++ b/justfile
@@ -26,12 +26,12 @@ js-build: output-clean wasm-build docs-build
     rsync -ha ./web-frontend/build/ ./build/
 
 output-clean:
-    rm -vrf ./build/ ./web-frontend/build/ ./web-frontend/static/docs/
-    mkdir -p ./build/ ./web-frontend/static/docs/
+    rm -vrf ./build/ ./web-frontend/build/ ./web-frontend/src/lib/docs/
+    mkdir -p ./build/ ./web-frontend/src/lib/docs/
 
 docs-build: output-clean
     earthly +docs
-    rsync --stats -ha ./build/docs/ ./web-frontend/static/docs/
+    rsync --stats -ha ./build/docs/ ./web-frontend/src/lib/docs/
     cargo doc --all
 
 # TODO: Clippy
diff --git a/web-frontend/.gitignore b/web-frontend/.gitignore
index c828a8c..231f918 100644
--- a/web-frontend/.gitignore
+++ b/web-frontend/.gitignore
@@ -4,8 +4,8 @@
 .env.*
 !.env.example
 node_modules
-/package
-/static/docs/
+/package/
+src/lib/docs/
 /.svelte-kit
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
diff --git a/web-frontend/.prettierignore b/web-frontend/.prettierignore
index 3897265..9353a6c 100644
--- a/web-frontend/.prettierignore
+++ b/web-frontend/.prettierignore
@@ -1,3 +1,5 @@
+/src/lib/docs/*
+
 .DS_Store
 node_modules
 /build
diff --git a/web-frontend/src/routes/+layout.svelte b/web-frontend/src/routes/+layout.svelte
index 1f200f4..2e1d38b 100644
--- a/web-frontend/src/routes/+layout.svelte
+++ b/web-frontend/src/routes/+layout.svelte
@@ -30,10 +30,9 @@
 				<div class="text-sm">
 					<a href="/" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Home</a>
 					<a
-						href="/docs/index.html"
-						rel="external"
+						href="/docs"
 						class="block inline-block text-white hover:text-gray-500 mr-4 p-2"
-						data-sveltekit-reload>Docs</a
+						>Docs</a
 					>
 					<a href="/app" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">App</a>
 				</div>
diff --git a/web-frontend/src/routes/docs/+page.svelte b/web-frontend/src/routes/docs/+page.svelte
new file mode 100644
index 0000000..9b845cd
--- /dev/null
+++ b/web-frontend/src/routes/docs/+page.svelte
@@ -0,0 +1,9 @@
+<a href="/docs/algorithm" class="block inline-block text-white hover:text-gray-500 mr-4 p-2"
+	>Algorithm</a
+>
+<a href="/docs/design" class="block inline-block text-white hover:text-gray-500 mr-4 p-2"
+	>Design</a
+>
+<a href="/docs/wordlist" class="block inline-block text-white hover:text-gray-500 mr-4 p-2"
+	>Wordlist</a
+>
diff --git a/web-frontend/src/routes/docs/[slug]/+page.js b/web-frontend/src/routes/docs/[slug]/+page.js
new file mode 100644
index 0000000..e830f81
--- /dev/null
+++ b/web-frontend/src/routes/docs/[slug]/+page.js
@@ -0,0 +1,33 @@
+import { error } from '@sveltejs/kit';
+import algorithmDocs from '$lib/docs/ALGORITHM.html?raw';
+import designDocs from '$lib/docs/DESIGN.html?raw';
+import wordlistDocs from '$lib/docs/WORDLIST.html?raw';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+	switch (params.slug) {
+		case 'algorithm':
+			return {
+				content: algorithmDocs
+			};
+			break;
+		case 'design':
+			return {
+				content: designDocs
+			};
+			break;
+		case 'wordlist':
+			return {
+				content: wordlistDocs
+			};
+			break;
+		default:
+    			console.error(`Slug ${params.slug} not found`);
+			throw error(404, 'Not found');
+	}
+}
+// if (params.slug === 'hello-world') {
+// 	return {
+// 		content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+// 	};
+// }
diff --git a/web-frontend/src/routes/docs/[slug]/+page.svelte b/web-frontend/src/routes/docs/[slug]/+page.svelte
new file mode 100644
index 0000000..592911b
--- /dev/null
+++ b/web-frontend/src/routes/docs/[slug]/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let data;
+</script>
+
+{@html data.content}