diff --git a/scrumli.asd b/scrumli.asd
index 083f882..87d124a 100644
--- a/scrumli.asd
+++ b/scrumli.asd
@@ -7,8 +7,11 @@
   :description "Scrum with Lisp"
   :author "Tom Willemse"
   :license "AGPLv3"
-  :depends-on (:restas :sexml :postmodern :cl-json :drakma)
-  :components ((:file "defmodule")
+  :depends-on (:restas :sexml :postmodern :cl-json :drakma
+                       :closure-template)
+  :defsystem-depends-on (:closure-template)
+  :components ((:closure-template "templates/scrumli")
+               (:file "defmodule")
                (:file "pg-datastore")
                (:file "util")
                (:file "scrumli")))
diff --git a/scrumli.lisp b/scrumli.lisp
index 7900740..7b324fb 100644
--- a/scrumli.lisp
+++ b/scrumli.lisp
@@ -31,7 +31,7 @@
   (hunchentoot:session-value :username))
 
 (defun page-title (title)
-  (<:title (concatenate 'string title " | scrumli")))
+  (concatenate 'string title " | scrumli"))
 
 (defun css (&rest sheets)
   (apply 'concatenate 'string
@@ -54,28 +54,18 @@
 
 (define-route main ("")
   (if (logged-in-p)
-      (<:html
-       (<:head (page-title "Backlog")
-               (css *scrumli-bootstrap-css-location*
-                    *scrumli-font-awesome-css-location*
-                    (genurl 'scrumli-css))
-               (js *scrumli-bootstrap-js-location*
-                   *scrumli-jquery-js-location*
-                   *scrumli-react-js-location*
-                   *scrumli-jsxtransformer-js-location*))
-       (<:body
-        (navbar (<:div :class "pull-right"
-                       (<:span :class "navbar-text"
-                               (hunchentoot:session-value :username))
-                       (<:ul :class "nav pull-right"
-                             (<:li :class "divider-vertical")
-                             (<:li (<:a :href (genurl 'logout-page)
-                                        "Logout"))
-                             (<:li :class "divider-vertical"))))
-        (<:div :class "container"
-               (<:h1 "Backlog")
-               (<:div :id "content")
-               (<:script :type "text/jsx" :src (genurl 'main-js)))))
+      (scrumli-templates:main
+       `(:title ,(page-title "Backlog")
+         :csss ,(list *scrumli-bootstrap-css-location*
+                      *scrumli-font-awesome-css-location*
+                      (genurl 'scrumli-css))
+         :jss ,(list *scrumli-bootstrap-js-location*
+                     *scrumli-jquery-js-location*
+                     *scrumli-react-js-location*
+                     *scrumli-jsxtransformer-js-location*)
+         :username ,(hunchentoot:session-value :username)
+         :ulogout ,(genurl 'logout-page)
+         :umainjs ,(genurl 'main-js)))
       (redirect 'login-page)))
 
 (defmacro serve-static (name relpath)
@@ -162,32 +152,12 @@
 
 (define-route login-page ("login")
   (if (not (logged-in-p))
-      (<:html :lang "en"
-              (<:head (<:meta :charset "utf-8")
-                      (page-title "Login")
-                      (css *scrumli-bootstrap-css-location*)
-                      (js *scrumli-bootstrap-js-location*
-                          "https://login.persona.org/include.js"
-                          (genurl 'login-js)))
-              (<:body
-               (navbar (<:ul :class "nav pull-right"
-                             (<:li :class "divider-vertical")
-                             (<:li (<:a :href "javascript:login()"
-                                        "Login"))
-                             (<:li :class "divider-vertical")))
-               (<:div :class "container"
-                      (<:br)
-                      (<:div :class "hero-unit"
-                             (<:h1 "Scrumli")
-                             (<:p "As a " (<:em "developer") " I "
-                                  (<:em "love") " to " (<:em "scrum")
-                                  "...")
-                             (<:a :class "btn btn-primary btn-large"
-                                  :href "javascript:login()"
-                                  "Login")))
-               (<:form :id "login-form" :method "POST" :action ""
-                       (<:input :id "assertion-field" :type "hidden"
-                                :name "assertion" :value ""))))
+      (scrumli-templates:login
+       `(:title ,(page-title "Login")
+         :csss ,(list *scrumli-bootstrap-css-location*)
+         :jss ,(list *scrumli-bootstrap-js-location*
+                     "https://login.persona.org/include.js"
+                     (genurl 'login-js))))
       (redirect 'main)))
 
 (define-route logout-page ("logout")
diff --git a/templates/scrumli.tmpl b/templates/scrumli.tmpl
new file mode 100644
index 0000000..03832e2
--- /dev/null
+++ b/templates/scrumli.tmpl
@@ -0,0 +1,91 @@
+{namespace scrumli-templates}
+
+{template main}
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+      <title>{$title}</title>
+      {foreach $css in $csss}
+        <link href="{$css}" rel="stylesheet" type="text/css">
+      {/foreach}
+      {foreach $js in $jss}
+        <script src="{$js}" type="text/javascript" language="javascript">
+        </script>
+      {/foreach}
+    </head>
+    <body>
+      <div class="navbar navbar-static-top navbar-inverse">
+        <div class="navbar-inner">
+          <div class="container">
+            <a class="brand">scrumli</a>
+            <div class="pull-right">
+              <span class="navbar-text">
+                {$username}
+              </span>
+              <ul class="nav pull-right">
+                <li class="divider-vertical"></li>
+                <li><a href="{$ulogout}">Logout</a></li>
+                <li class="divider-vertical"></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <h1>Backlog</h1>
+        <div id="content"></div>
+        <script src="{$umainjs}" type="text/jsx"></script>
+      </div>
+    </body>
+  </html>
+{/template}
+
+{template login}
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+      <title>{$title}</title>
+      {foreach $css in $csss}
+        <link href="{$css}" rel="stylesheet" type="text/css">
+      {/foreach}
+      {foreach $js in $jss}
+        <script src="{$js}" type="text/javascript" language="javascript">
+        </script>
+      {/foreach}
+    </head>
+    <body>
+      <div class="navbar navbar-static-top navbar-inverse">
+        <div class="navbar-inner">
+          <div class="container">
+            <a class="brand">scrumli</a>
+            <ul class="nav pull-right">
+              <li class="divider-vertical"></li>
+              <li><a href="javascript:login()">Login</a></li>
+              <li class="divider-vertical"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <br />
+        <div class="hero-unit">
+          <h1>Scrumli</h1>
+          <p>
+            As a <em>developer</em> I <em>love</em>
+            to <em>scrum</em>...
+          </p>
+          <a class="btn btn-primary btn-large" href="javascript:login()">
+            Login
+          </a>
+        </div>
+      </div>
+      <form id="login-form" method="POST" action="">
+        <input id="assertion-field" type="hidden" name="assertion" />
+      </form>
+    </body>
+  </html>
+{/template}