diff --git a/app/src/main/kotlin/routes/Router.kt b/app/src/main/kotlin/routes/Router.kt
index 44b45f3..895ce2e 100644
--- a/app/src/main/kotlin/routes/Router.kt
+++ b/app/src/main/kotlin/routes/Router.kt
@@ -27,8 +27,9 @@ class Router(
 ) {
     operator fun invoke(): RoutingHttpHandler {
 
+        val resourceLoader = ResourceLoader.Classpath(("/static"))
         val basicRoutes = routes(
-            ImmutableFilter().then(static(ResourceLoader.Classpath(("/static")))),
+            ImmutableFilter().then(static(resourceLoader, "woff2" to ContentType("font/woff2"))),
         )
 
         fun public(request: Request, handler: PublicHandler) = handler(request, request.jwtPayload(contexts))
diff --git a/app/src/main/kotlin/views/BaseView.kt b/app/src/main/kotlin/views/BaseView.kt
index 7aaa578..dcaf518 100644
--- a/app/src/main/kotlin/views/BaseView.kt
+++ b/app/src/main/kotlin/views/BaseView.kt
@@ -35,7 +35,10 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                         </div>
                         <form class="md:space-x-2" id="search">
                         <input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
-                        <span id="buttons"><button disabled="" class="pointer-events-none">search</button><span>clear</span></span>
+                        <span id="buttons">
+                        <button disabled="" class="btn btn-green pointer-events-none">search</button>
+                        <span class="btn btn-red pointer-events-none">clear</span>
+                        </span>
                         </form>
                         <div class="overflow-x-auto">
                           <table id="notes">
diff --git a/app/src/main/kotlin/views/NoteView.kt b/app/src/main/kotlin/views/NoteView.kt
index 130086a..dbf5310 100644
--- a/app/src/main/kotlin/views/NoteView.kt
+++ b/app/src/main/kotlin/views/NoteView.kt
@@ -22,7 +22,7 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                 alert(Alert.Warning, it.dataPath.substringAfter('.') + ": " + it.message)
             }
             form(method = FormMethod.post) {
-                textArea(classes = "w-full bg-gray-800 p-5 outline-none font-mono") {
+                textArea {
                     attributes.also {
                         it["rows"] = "20"
                         it["id"] = "markdown"
diff --git a/app/src/main/kotlin/views/View.kt b/app/src/main/kotlin/views/View.kt
index 3698a25..b38b727 100644
--- a/app/src/main/kotlin/views/View.kt
+++ b/app/src/main/kotlin/views/View.kt
@@ -25,6 +25,11 @@ abstract class View(staticFileResolver: StaticFileResolver) {
                 meta(name = "viewport", content = "width=device-width, initial-scale=1")
                 title("$title - SimpleNotes")
                 description?.let { meta(name = "description", content = it) }
+                link(rel = "preload", href = "/recursive-0.0.1.woff2"){
+                    attributes["as"] = "font"
+                    attributes["type"] = "font/woff2"
+                    attributes["crossorigin"] = "anonymous"
+                }
                 link(rel = "stylesheet", href = styles)
                 link(rel = "shortcut icon", href = "/favicon.ico", type = "image/x-icon")
                 scripts.forEach { src ->
diff --git a/app/src/main/kotlin/views/components/NoteListHeader.kt b/app/src/main/kotlin/views/components/NoteListHeader.kt
index c17472f..a8ebc5e 100644
--- a/app/src/main/kotlin/views/components/NoteListHeader.kt
+++ b/app/src/main/kotlin/views/components/NoteListHeader.kt
@@ -26,10 +26,10 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") {
         }
         span {
             id = "buttons"
-            button(type = submit) {
+            button(type = submit, classes = "btn btn-green") {
                 +"search"
             }
-            a(href = "/notes") {
+            a(href = "/notes", classes = "btn btn-red") {
                 +"clear"
             }
         }
diff --git a/app/src/main/resources/static/recursive-0.0.1.woff2 b/app/src/main/resources/static/recursive-0.0.1.woff2
new file mode 100644
index 0000000..1d18022
Binary files /dev/null and b/app/src/main/resources/static/recursive-0.0.1.woff2 differ
diff --git a/css/src/button.pcss b/css/src/button.pcss
index 595c79e..7f6f87d 100644
--- a/css/src/button.pcss
+++ b/css/src/button.pcss
@@ -1,9 +1,14 @@
 .btn {
-    @apply font-bold py-2 px-4 rounded;
+    @apply font-semibold py-2 px-4 rounded;
 
     &:focus {
         @apply outline-none shadow-outline;
     }
+
+    &:hover {
+        --CASL: 1;
+        @apply font-extrabold;
+    }
 }
 
 .btn-teal {
diff --git a/css/src/fonts.pcss b/css/src/fonts.pcss
new file mode 100644
index 0000000..9fe0416
--- /dev/null
+++ b/css/src/fonts.pcss
@@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'Recursive';
+    font-weight: 300 800;
+    font-display: swap;
+    src: url(/recursive-0.0.1.woff2) format('woff2');
+}
+
+:root {
+    --MONO: 0;
+    --CASL: 0;
+    --slnt: 0;
+    --CRSV: 0.5;
+}
+
+*,
+*:before,
+*:after {
+    font-variation-settings: "MONO" var(--MONO), "CASL" var(--CASL), "slnt" var(--slnt), "CRSV" var(--CRSV);
+}
diff --git a/css/src/navbar.pcss b/css/src/navbar.pcss
index 2c45325..1efae1e 100644
--- a/css/src/navbar.pcss
+++ b/css/src/navbar.pcss
@@ -6,7 +6,8 @@
         @apply text-2xl text-gray-100 font-bold;
 
         &:hover {
-            @apply text-blue-300;
+            @apply text-blue-300 underline font-extrabold;
+            --CASL: 1;
         }
     }
 
@@ -25,7 +26,8 @@
             @apply text-gray-100 font-semibold;
 
             &:hover {
-                @apply underline text-blue-300;
+                @apply underline text-blue-300 font-bold;
+                --CASL: 1;
             }
         }
     }
diff --git a/css/src/note.pcss b/css/src/note.pcss
index dac004a..e7b9bc8 100644
--- a/css/src/note.pcss
+++ b/css/src/note.pcss
@@ -51,7 +51,7 @@
     ul,
     ol {
         ul {
-            list-style-type: circle;
+            @apply list-disc;
         }
 
         ul,
@@ -76,17 +76,23 @@
         ul,
         ol,
         dl {
-            margin: 0;
+            @apply m-0;
         }
     }
 
     b,
     strong {
-        font-weight: bold;
+        @apply font-bold;
     }
 
     pre {
         @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-800;
+        --MONO: 1;
     }
 
 }
+
+#markdown {
+    @apply w-full bg-gray-800 p-5 outline-none font-mono;
+    --MONO: 1;
+}
diff --git a/css/src/other.pcss b/css/src/other.pcss
index cd45578..dfccd91 100644
--- a/css/src/other.pcss
+++ b/css/src/other.pcss
@@ -7,6 +7,7 @@
 
     &:hover {
         @apply bg-teal-800 text-white;
+        --CASL: 1;
     }
 
     &.disabled {
diff --git a/css/src/search.pcss b/css/src/search.pcss
index cb8aec5..9efce03 100644
--- a/css/src/search.pcss
+++ b/css/src/search.pcss
@@ -13,11 +13,11 @@
         @apply flex flex-1 justify-between mb-2;
 
         button {
-            @apply flex-1 btn btn-green;
+            @apply flex-1;
         }
 
         a, span {
-            @apply ml-2 flex-1 btn btn-red inline-block text-center;
+            @apply ml-2 flex-1 inline-block text-center;
         }
     }
 }
diff --git a/css/src/styles.pcss b/css/src/styles.pcss
index f3d8e0e..3e0e19a 100644
--- a/css/src/styles.pcss
+++ b/css/src/styles.pcss
@@ -1,3 +1,5 @@
+@import "fonts.pcss";
+
 /*noinspection CssUnknownTarget*/
 @import "tailwindcss/base";
 
diff --git a/css/tailwind.config.js b/css/tailwind.config.js
index 1e44389..5e25447 100644
--- a/css/tailwind.config.js
+++ b/css/tailwind.config.js
@@ -5,7 +5,16 @@ module.exports = {
         ]
     },
     theme: {
-        extend: {},
+        fontFamily: {
+            'sans': [
+                'Recursive',
+                'sans-serif',
+            ],
+            'mono': [
+                'Recursive',
+                'monospace'
+            ],
+        }
     },
     variants: {},
     plugins: [],