diff --git a/app/src/main/kotlin/views/NoteView.kt b/app/src/main/kotlin/views/NoteView.kt
index 984f796..78b33c3 100644
--- a/app/src/main/kotlin/views/NoteView.kt
+++ b/app/src/main/kotlin/views/NoteView.kt
@@ -55,8 +55,7 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                     h1("text-2xl underline") { +"Notes" }
                     a(
                         href = "/notes/new",
-                        classes = "text-gray-800 bg-green-500 hover:bg-green-700 " +
-                            "inline ml-2 text-md font-semibold  rounded px-4 py-2"
+                        classes = "btn btn-green"
                     ) { +"New" }
                 }
                 if (notes.isNotEmpty()) {
diff --git a/app/src/main/kotlin/views/components/Forms.kt b/app/src/main/kotlin/views/components/Forms.kt
index 96b83d6..38faeec 100644
--- a/app/src/main/kotlin/views/components/Forms.kt
+++ b/app/src/main/kotlin/views/components/Forms.kt
@@ -30,8 +30,7 @@ fun FlowContent.submitButton(text: String) {
     div("flex items-center mt-6") {
         button(
             type = submit,
-            classes = "bg-teal-500 hover:bg-teal-600 focus:bg-teal-600" +
-                " w-full focus:outline-none text-white font-bold py-2 px-4 rounded"
+            classes = "btn btn-teal w-full"
         ) { +text }
     }
 }
diff --git a/app/src/main/kotlin/views/components/Navbar.kt b/app/src/main/kotlin/views/components/Navbar.kt
index 14f6be8..987e570 100644
--- a/app/src/main/kotlin/views/components/Navbar.kt
+++ b/app/src/main/kotlin/views/components/Navbar.kt
@@ -11,17 +11,14 @@ fun BODY.navbar(jwtPayload: JwtPayload?) {
                 li("inline text-gray-100 ml-2 text-md font-semibold") {
                     a(href = "/notes") { +"Notes" }
                 }
-                li(
-                    "text-gray-800 bg-green-500 hover:bg-green-700" +
-                        " inline ml-2 text-md font-semibold rounded px-4 py-2"
-                ) {
+                li("inline ml-2") {
                     form(classes = "inline", action = "/logout", method = FormMethod.post) {
-                        button(type = ButtonType.submit) { +"Logout" }
+                        button(type = ButtonType.submit, classes = "btn btn-green") { +"Logout" }
                     }
                 }
             } else {
-                li("inline text-gray-100 pl-2 text-md font-semibold") {
-                    a(href = "/login") { +"Sign In" }
+                li("inline pl-2") {
+                    a(href = "/login", classes = "btn btn-green") { +"Sign In" }
                 }
             }
         }
diff --git a/css/package.json b/css/package.json
index 72ccbbf..b19ac64 100644
--- a/css/package.json
+++ b/css/package.json
@@ -10,6 +10,7 @@
         "cssnano": "^4.1.10",
         "postcss-cli": "^7.1.1",
         "postcss-hash": "^2.0.0",
+        "postcss-nested": "^4.2.3",
         "tailwindcss": "^1.5.1"
     }
 }
diff --git a/css/postcss.config.js b/css/postcss.config.js
index 9c0d95a..af0c3a1 100644
--- a/css/postcss.config.js
+++ b/css/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     plugins: [
+        require('postcss-nested'),
         require('tailwindcss'),
         require('autoprefixer'),
         require('cssnano')({
diff --git a/css/styles.css b/css/styles.css
index 861cfe3..07a3faa 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2,6 +2,38 @@
 
 @tailwind components;
 
+.btn {
+    @apply font-semibold py-2 px-4 rounded;
+
+    &:focus {
+        @apply outline-none shadow-outline;
+    }
+}
+
+.btn-teal {
+    @apply bg-teal-500 text-white;
+
+    &:focus {
+        @apply bg-teal-600;
+    }
+
+    &:hover {
+        @apply bg-teal-600;
+    }
+}
+
+.btn-green {
+    @apply bg-green-500 text-white;
+
+    &:focus {
+        @apply bg-green-600;
+    }
+
+    &:hover {
+        @apply bg-green-600;
+    }
+}
+
 .nav {
     height: 64px;
 }
diff --git a/css/yarn.lock b/css/yarn.lock
index 319ed54..9b1d807 100644
--- a/css/yarn.lock
+++ b/css/yarn.lock
@@ -1324,7 +1324,7 @@ postcss-minify-selectors@^4.0.2:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-postcss-nested@^4.1.1:
+postcss-nested@^4.1.1, postcss-nested@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
   integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==