diff --git a/commands/app.js b/commands/app.js
index df2f8c6..e5df0ab 100644
--- a/commands/app.js
+++ b/commands/app.js
@@ -17,48 +17,66 @@ export const required = [];
 let CONFIGURED = false;
 
 // nunjucks does it's own reload so let it do that
-nunjucks.configure("templates", { watch: true });
+nunjucks.configure("pages", { watch: true });
+
+const load_mode = async (mod) => {
+  const control_mod = await import(`../${mod}?update=${Date.now()}`);
+  const pf = path.parse(mod);
+  const url = `/${pf.name}`;
+
+  console.log("URL IS", url);
+
+  for(let verb of ["get", "post", "put", "delete"]) {
+    const handler = control_mod[verb];
+
+    if(handler !== undefined) {
+      console.log("ADDING VERB", verb);
+      app[verb](url, async (req, rep) => {
+        try {
+          await handler(req, rep);
+        } catch(error) {
+          console.error(error);
+          console.error(error.stack);
+          console.error(error.source);
+        }
+      });
+    }
+  }
+}
 
 const configure = async (fastify, opts) => {
   const app = fastify(opts);
 
   // forces reload of the modules
-  for(let mod of fg.sync("{api,pages}/*.js")) {
-    const control_mod = await import(`../${mod}?update=${Date.now()}`);
-    const pf = path.parse(mod);
-    const url = `/${pf.name}`;
-
-    console.log("URL IS", url);
-
-    for(let verb of ["get", "post", "put", "delete"]) {
-      const handler = control_mod[verb];
-
-      if(handler !== undefined) {
-        console.log("ADDING VERB", verb);
-        app[verb](url, async (req, rep) => {
-          try {
-            await handler(req, rep);
-          } catch(error) {
-            console.error(error);
-            console.error(error.stack);
-            console.error(error.source);
-          }
-        });
-      }
-    }
+  for(let mod of fg.sync("{api,controllers}/*.js")) {
+    load_mode(mod);
   }
 
   app.register(Formbody);
 
-  app.get("/pages/todo_alpine.html", (req, rep) => {
-    const result = nunjucks.render("todo_alpine.html");
-    rep.code(200).type("text/html").send(result);
+  app.get("/*", (req, rep) => {
+    const target = path.resolve(path.join("pages", req.url));
+    const index = path.resolve(path.join("pages", req.url, "index.html"));
+    console.log("TARGET", target, "INDEX", index);
+
+    if(fs.existsSync(index)) {
+      const fname = path.join(req.url.slice(1), "index.html");
+      console.log("RENDERING", fname);
+      const result = nunjucks.render(fname);
+      rep.code(200).type("text/html").send(result);
+    } else if(fs.existsSync(target)) {
+      const fname = req.url.slice(1);
+      const result = nunjucks.render(fname);
+      rep.code(200).type("text/html").send(result);
+    } else {
+      rep.code(404);
+    }
   });
 
   app.register(FastifyStatic, {
     root: path.join(path.resolve("."), 'static'),
-    prefix: '/', // optional: default '/'
-    constraints: {}, // optional: default {}
+    prefix: '/static',
+    constraints: {},
     index: "index.html"
   });
 
diff --git a/pages/todo.js b/controllers/todo.js
similarity index 100%
rename from pages/todo.js
rename to controllers/todo.js
diff --git a/pages/header.html b/pages/header.html
index c63d1dd..1c3b243 100644
--- a/pages/header.html
+++ b/pages/header.html
@@ -2,12 +2,12 @@
 
 <html>
   <head>
-    <script src="/axios.js"></script>
+    <script src="/static/axios.js"></script>
     <title>Bandolier2</title>
 
 <style>
-@import "/open-props.min.css";
-@import "/normalize.min.css";
+@import "/static/open-props.min.css";
+@import "/static/normalize.min.css";
 </style>
 
 <head>
diff --git a/pages/todo_alpine/index.html b/pages/todo_alpine/index.html
new file mode 100644
index 0000000..f178124
--- /dev/null
+++ b/pages/todo_alpine/index.html
@@ -0,0 +1,53 @@
+{% include "../header.html" %}
+<h1>Your TODOs</h1>
+
+<script src="/alpine.js"></script>
+
+<script>
+  const new_task = async (todos, task) => {
+    const result = await axios({
+      method: "post",
+      url: "/todo_alpine",
+      data: {task},
+      headers: {
+        Accept: "application/json"
+      }
+    });
+
+    // zero error handling but fine for now
+    return result.data;
+  }
+
+  const list_todo = async () => {
+    const result = await axios({
+      method: "get",
+      url: "/todo_alpine",
+      headers: {
+        Accept: "application/json"
+      }
+    });
+
+    return result.data;
+  }
+</script>
+
+<p>Welcome {{ name }}, here's your TODOs</p>
+
+<div
+  x-data="{todos: []}"
+  x-init="todos = await list_todo()">
+  <ol>
+    <template x-for="todo of todos">
+      <li x-text="todo.task"></li>
+    </template>
+  </ol>
+
+  <h4>Add a New TODO</h4>
+  <form action="/todo_alpine" @submit.prevent="todos = await new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
+    <label for="task">Task</label>
+    <input name="task" x-model="task"></input>
+    <button type="button" @click="todos = await new_task(todos, task), task = ''">Submit</button>
+  </form>
+
+</div>
+{% include "../footer.html" %}
