diff --git a/docs/ALGORITHM.adoc b/docs/ALGORITHM.adoc
index 94bc793..4c8fa84 100644
--- a/docs/ALGORITHM.adoc
+++ b/docs/ALGORITHM.adoc
@@ -12,7 +12,7 @@
 
 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[DESIGN].
+If you want to see the steps to get to this definition, go to link:/docs/DESIGN.html[DESIGN].
 
 == Data format
 
diff --git a/docs/DESIGN.adoc b/docs/DESIGN.adoc
index 9080305..4cebe98 100644
--- a/docs/DESIGN.adoc
+++ b/docs/DESIGN.adoc
@@ -12,7 +12,7 @@
 
 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[ALGORITHM].
+If you want to see the algorithm definition, go to link:/docs/ALGORITHM.html[ALGORITHM].
 
 == 10,000 meter view
 
diff --git a/docs/index.adoc b/docs/index.adoc
index 480e5ad..589b6ea 100644
--- a/docs/index.adoc
+++ b/docs/index.adoc
@@ -10,10 +10,9 @@
 
 == Pages
 
-* link:..[xpin.app] - Go back to the xpin homepage
-* link:/docs/ALGORITHM[ALGORITHM] - Algorithm definition
-* link:/docs/DESIGN[DESIGN] - Algorithm design documentation
-* link:/docs/WORDLIST[WORDLIST] - Wordlist design and implementation
+* link:/docs/ALGORITHM.html[ALGORITHM] - Algorithm definition
+* link:/docs/DESIGN.html[DESIGN] - Algorithm design documentation
+* link:/docs/WORDLIST.html[WORDLIST] - Wordlist design and implementation
 
 ++++
 <style>
diff --git a/justfile b/justfile
index 0d56385..28b31b1 100644
--- a/justfile
+++ b/justfile
@@ -16,13 +16,14 @@ wasm-build:
 wordlist-build:
     . wordlist/venv/bin/activate && cd wordlist && for i in *.py; do "./${i}"; done
 
-js-build: wasm-build docs-build
+js-build: output-clean wasm-build docs-build
+    rsync -ha ./build/docs/ ./web-frontend/static/docs/
     yarn --cwd ./web-frontend/ build
     rsync -ha ./web-frontend/build/ ./build/
 
 output-clean:
-    rm -vrf build
-    mkdir build
+    rm -vrf ./build/ ./web-frontend/build/
+    mkdir ./build/
 
 docs-build: output-clean
     earthly +docs
diff --git a/web-frontend/.gitignore b/web-frontend/.gitignore
index 6635cf5..c828a8c 100644
--- a/web-frontend/.gitignore
+++ b/web-frontend/.gitignore
@@ -1,10 +1,11 @@
-.DS_Store
-node_modules
 /build
-/.svelte-kit
-/package
+.DS_Store
 .env
 .env.*
 !.env.example
+node_modules
+/package
+/static/docs/
+/.svelte-kit
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
diff --git a/web-frontend/package.json b/web-frontend/package.json
index fa3189f..b9c1496 100644
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -8,8 +8,8 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "prettier --plugin-search-dir . --check src && eslint .",
+		"format": "prettier --plugin-search-dir . --write src"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
diff --git a/web-frontend/src/routes/+layout.svelte b/web-frontend/src/routes/+layout.svelte
index a8c3a87..13d60a8 100644
--- a/web-frontend/src/routes/+layout.svelte
+++ b/web-frontend/src/routes/+layout.svelte
@@ -23,22 +23,18 @@
 					/></svg
 				>-->
 				<a href="/">
-					<span class="font-semibold text-xl tracking-tight">Xpin</span>
+					<span class="font-semibold text-xl tracking-tight">xpin</span>
 				</a>
 			</div>
 			<div class="block">
 				<div class="text-sm">
-					<a href="/" class="block inline-block text-white hover:text-gray-500 mr-4 p-2"> Home </a>
+					<a href="/" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">Home</a>
 					<a
-						href="/docs/"
-						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>
+					<a href="/app" class="block inline-block text-white hover:text-gray-500 mr-4 p-2">App</a>
 				</div>
 			</div>
 		</nav>
diff --git a/web-frontend/src/routes/docs/+page.svelte b/web-frontend/src/routes/docs/+page.svelte
new file mode 100644
index 0000000..4e1d024
--- /dev/null
+++ b/web-frontend/src/routes/docs/+page.svelte
@@ -0,0 +1 @@
+<iframe src="/docs/index.html" class="h-full w-full" />