diff --git a/.justfile b/.justfile
index 2f101d1..676fd92 100644
--- a/.justfile
+++ b/.justfile
@@ -20,15 +20,21 @@ build-frontend:
   #!/usr/bin/env bun
   import sassPlugin from "@alecodes/bun-plugin-sass";
 
+  const entrypoints = Array.from(
+    new Bun.Glob("frontend/**/*.html").scanSync(".")
+  );
+
   const result = await Bun.build({
-    entrypoints: ["templates/base.html"],
+    entrypoints,
     outdir: "dist",
+    publicPath: "/",
+    splitting: true,
+    plugins: [sassPlugin],
     naming: {
       entry: "[dir]/[name].[ext]",
-      chunk: "chunks/[name]-[hash].[ext]",
+      chunk: "assets/[name]-[hash].[ext]",
       asset: "assets/[name]-[hash].[ext]",
     },
-    plugins: [sassPlugin],
   });
 
   console.log("Assets compiled!");
diff --git a/Cargo.lock b/Cargo.lock
index 1dfce20..9568740 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -187,6 +187,12 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
 [[package]]
 name = "futures-task"
 version = "0.3.31"
@@ -245,6 +251,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range-header"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9171a2ea8a68358193d15dd5d70c1c10a2afc3e7e4c5bc92bc9f025cebd7359c"
+
 [[package]]
 name = "httparse"
 version = "1.10.0"
@@ -400,6 +412,16 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "mime_guess"
+version = "2.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7c44f8e672c00fe5308fa235f821cb4198414e1c77935c1ab6948d3fd78550e"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "minijinja"
 version = "2.7.0"
@@ -749,6 +771,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d61fa4ffa3de412bfea335c6ecff681de2b609ba3c77ef3e00e521813a9ed9e"
 dependencies = [
  "backtrace",
+ "bytes",
  "libc",
  "mio",
  "pin-project-lite",
@@ -768,6 +791,19 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "tokio-util"
+version = "0.7.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7fcaa8d55a2bdd6b83ace262b016eca0d79ee02818c5c1bcdf0305114081078"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
 [[package]]
 name = "tower"
 version = "0.5.2"
@@ -792,9 +828,18 @@ checksum = "403fa3b783d4b626a8ad51d766ab03cb6d2dbfc46b1c5d4448395e6628dc9697"
 dependencies = [
  "bitflags 2.8.0",
  "bytes",
+ "futures-util",
  "http",
  "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
  "pin-project-lite",
+ "tokio",
+ "tokio-util",
  "tower-layer",
  "tower-service",
  "tracing",
@@ -888,6 +933,12 @@ dependencies = [
  "tracing-log",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75b844d17643ee918803943289730bec8aac480150456169e647ed0b576ba539"
+
 [[package]]
 name = "unicode-ident"
 version = "1.0.16"
diff --git a/Cargo.toml b/Cargo.toml
index ca5ec09..dab8a46 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -11,7 +11,7 @@ notify = "8.0.0"
 serde = { version = "1.0.217", features = ["derive"] }
 thiserror = "2.0.11"
 tokio = { version = "1.43.0", features = ["macros", "rt-multi-thread"] }
-tower-http = { version = "0.6.2", features = ["trace"] }
+tower-http = { version = "0.6.2", features = ["fs", "trace"] }
 tower-livereload = "0.9.6"
 tracing = "0.1.41"
 tracing-subscriber = { version = "0.3.19", features = ["env-filter"] }
diff --git a/frontend/css/style.css b/frontend/css/style.css
new file mode 100644
index 0000000..818d406
--- /dev/null
+++ b/frontend/css/style.css
@@ -0,0 +1,3 @@
+h1 {
+	color: red;
+}
diff --git a/templates/index.html b/frontend/js/index.ts
similarity index 100%
rename from templates/index.html
rename to frontend/js/index.ts
diff --git a/templates/base.html b/frontend/templates/base.html
similarity index 91%
rename from templates/base.html
rename to frontend/templates/base.html
index cbc5676..7f9ff9e 100644
--- a/templates/base.html
+++ b/frontend/templates/base.html
@@ -3,6 +3,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="@mini-strap/core" />
+    <link rel="stylesheet" href="../css/style.css" />
     <title>
       {% block title %}Axum web service!{% endblock %}
     </title>
diff --git a/frontend/templates/base_1.html b/frontend/templates/base_1.html
new file mode 100644
index 0000000..68fc370
--- /dev/null
+++ b/frontend/templates/base_1.html
@@ -0,0 +1,21 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/style.css" />
+    <title>
+      {% block title %}Axum web service!{% endblock %}
+    </title>
+  </head>
+
+  <body>
+    {% include "partials/header.html" %}
+    <main>
+      <nav class="msp-d-sm-none msp-d-flex msp-justify-content-end">
+        <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+      </nav>
+      {% block content %}{% endblock %}
+    </main>
+  </body>
+
+</html>
diff --git a/frontend/templates/index.html b/frontend/templates/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/templates/partials/header.html b/frontend/templates/partials/header.html
similarity index 100%
rename from templates/partials/header.html
rename to frontend/templates/partials/header.html
diff --git a/src/main.rs b/src/main.rs
index 5566c5f..fe3ebf6 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,7 +1,7 @@
 #![allow(unused)]
 #![allow(dead_code)]
 
-use compendium::{router, AppState, Link, Result};
+use compendium::{router, AppState, Error, Link, Result};
 use minijinja::{Environment, Value};
 use std::sync::Arc;
 use tower_http::trace::TraceLayer;
@@ -12,7 +12,16 @@ fn load_templates() -> Result<Environment<'static>> {
     let mut tmpl_env = Environment::new();
 
     #[cfg(debug_assertions)]
-    tmpl_env.set_loader(minijinja::path_loader("templates")); // Path is relative to project root
+    {
+        tmpl_env.set_loader(minijinja::path_loader("dist")); // Path is relative to project root
+
+        let _ = tmpl_env.get_template("base.html");
+        if tmpl_env.templates().count() == 0 {
+            return Err(Error::Runtime(
+                "Templates not found, did you build the frontend with `just build-frontend`??",
+            ));
+        }
+    }
 
     // only enable in production build
     #[cfg(not(debug_assertions))]
diff --git a/src/router.rs b/src/router.rs
index e7875fe..7fb4dbc 100644
--- a/src/router.rs
+++ b/src/router.rs
@@ -1,11 +1,14 @@
 use axum::{extract::State, response::Html, routing::get, Router};
 use minijinja::context;
 use std::sync::Arc;
+use tower_http::services::ServeDir;
 
 use crate::{AppState, ResultTemplate};
 
 pub fn new() -> Router<Arc<AppState>> {
-    Router::new().route("/", get(handler_home))
+    Router::new()
+        .route("/", get(handler_home))
+        .nest_service("/assets", ServeDir::new("dist/assets"))
 }
 
 async fn handler_home(State(state): State<Arc<AppState>>) -> ResultTemplate {