diff --git a/jsconfig.json b/jsconfig.json
index 1e4efe0..1b38ae7 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,4 +1,12 @@
 {
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "*": [
+                "types/*"
+            ]
+        }
+    },
     "include": [
         "./src/**/*"
     ]
diff --git a/package-lock.json b/package-lock.json
index 4cbe102..3ddf655 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3055,11 +3055,6 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
-    "bulma": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.4.tgz",
-      "integrity": "sha512-krG2rP6eAX1WE0sf6O0SC/FUVSOBX4m1PBC2+GKLpb2pX0qanaDqcv9U2nu75egFrsHkI0zdWYuk/oGwoszVWg=="
-    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -3187,6 +3182,12 @@
       "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "camelcase-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
@@ -3421,8 +3422,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5743,8 +5743,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5765,14 +5764,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5787,20 +5784,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5917,8 +5911,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5930,7 +5923,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5945,7 +5937,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6057,8 +6048,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6070,7 +6060,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6192,7 +6181,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6212,7 +6200,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7788,6 +7775,12 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -8289,6 +8282,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -8516,6 +8518,12 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9179,6 +9187,47 @@
         "postcss": "^7.0.0"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.1.tgz",
+      "integrity": "sha512-8XQGohCbj6+kq8e3w6WlexkGaSjb5S8zoXnH49eB8JC6+qN2kQW+ib6fTjRgCpRRN9eeFOhMlD0NDjThW1DCBg==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.14"
+      }
+    },
     "postcss-load-config": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
@@ -9443,6 +9492,16 @@
         }
       }
     },
+    "postcss-nested": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz",
+      "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^5.0.0"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -9645,6 +9704,12 @@
         "utila": "~0.4"
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -11462,6 +11527,57 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.0.1.tgz",
+      "integrity": "sha512-tNyvmizhIY9ydXX8m84S/69851QROZzbH6RB/Q4w0K27OssupGcyXeD8zumzb9Yuzq6PifBH2A6ehjuBPklnYA==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^9.4.5",
+        "bytes": "^3.0.0",
+        "chalk": "^2.4.1",
+        "fs-extra": "^8.0.0",
+        "lodash": "^4.17.11",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "pretty-hrtime": "^1.0.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+          "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
diff --git a/package.json b/package.json
index a832554..fc98024 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "@mdi/font": "^3.6.95",
     "ansi_up": "^3.0.0",
     "axios": "^0.18.0",
-    "bulma": "^0.7.4",
     "moment": "^2.23.0",
     "moment-duration-format": "^2.2.2",
     "v-click-outside": "^2.1.3",
@@ -30,6 +29,7 @@
     "eslint-plugin-vue": "^5.2.2",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
+    "tailwindcss": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
@@ -46,14 +46,9 @@
       "parser": "babel-eslint"
     }
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..cf0d1fc
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  "plugins": [
+    require('tailwindcss')('tailwind.js'),
+    require('autoprefixer')(),
+  ]
+}
diff --git a/public/img/agola-logo-circle.svg b/public/img/agola-logo-circle.svg
new file mode 100644
index 0000000..bc5dc94
--- /dev/null
+++ b/public/img/agola-logo-circle.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 126.34 126.34" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clipPath18"><path d="m0 930.15h1455v-930.15h-1455z"/></clipPath></defs><circle cx="63.172" cy="63.172" r="63.172" fill="#fff"/><g transform="matrix(.11451 0 0 -.11451 -48.737 141.22)"><g clip-path="url(#clipPath18)"><g transform="translate(1007.8 485.41)"><path d="m0 0 0.19 0.01-0.239-0.059z" fill="#fff"/></g><g transform="translate(989.91 606.9)"><path d="m0 0c-120.38-88.113-319.26-165.83-401.27-16.353 101.58-147.63 288.84-51.789 383.19 15.328 11.258 20.766 35.481 56.189 58.128 83.403-21.431-12.232-35.435-17.224-47.2-20.352-33.357-27.617-79.742-59.463-129.57-80.549-70.781-26.309-142.78-37.815-200.92 14.712 93.064-72.642 227.72-10.864 311.31 61.516 21.901 42.293 36.343 66.912 55.874 94.556-19.285-14.124-35.591-22.954-49.632-27.078-56.636-64.048-130.13-112.05-212.18-116.85-68.095-3.984-99.204 54.339-99.204 91.228 0 23.243 8.255 43.433 23.108 59.039-10.991-4.786-20.93-11.622-32.414-20.113l-3.98 1.846c-0.488 7.168 0.532 12.725 2.417 17.139-1.806-1.905-3.457-3.809-5.01-5.606-3.169-3.662-5.908-6.826-8.891-8.799l-2.915 0.108c-2.388 1.855-3.74 4.258-4.024 7.148-0.464 4.658 2.012 9.844 5.205 14.58-7.841-5.469-15.952-12.129-22.314-17.607l-4.131 1.914c0.049 7.91 5.386 19.433 14.697 30.166-19.721-12.109-27.373-20.166-33.828-26.953-1.958-2.071-3.813-4.024-5.844-5.928l-4.18 1.406c-1.782 10.635 8.052 25.742 16.582 36.162-13.008-8.232-21.343-18.134-26.348-30.996l-4.8 0.508c-2.866 17.891 4.996 41.104 14.19 56.631-18.589-15.615-27.559-41.24-28.247-53.75l-4.59-1.231c-8.936 13.68-7.734 34.454-2.295 54.498-86.121-127.26-26.094-359.71 176.63-359.71 91.819 0 178.68 41.882 250.69 88.994 14.691 18.708 46.768 54.809 69.539 78.506-23.919-12.854-36.966-15.996-47.781-17.515" fill="#23261f"/></g><g transform="translate(1183.5 907.43)"><path d="m0 0 10.742-2.139-9.8-4.892c-26.594-13.303-50.908-40.786-63.191-69.214 19.109 17.314 39.422 32.187 64.891 45.464 33.962 17.705 119.36 30.21 178.53 3.613-8.892 7.122-18.718 12.478-28.967 16.675-90.076 46.516-157.82 26.763-182.11 17.947-5.855-2.124-11.387-4.539-16.778-7.09 15.391 2.822 31.031 2.737 46.685-0.364" fill="#344026"/></g><g transform="translate(1044.8 785.31)"><path d="m0 0-11.265-15.283c-22.846-31.004-37.514-54.517-59.37-96.011 6.316 5.84 12.32 11.709 17.881 17.554 52.097 54.736 83.994 95.649 117.13 128.19 9.045 31.318 33.752 63.877 62.344 81.914-21.854 2.373-43.631-1.626-64.605-11.543-47.195-33.774-78.047-85.954-123.42-142.03-2.327-2.876-4.741-5.679-7.132-8.499 14.984 5.994 32.601 17.095 53.597 33.855z" fill="#2c3324"/></g><g transform="translate(1239.7 847.85)"><path d="m0 0 12.124-2.539-11.494-4.609c-19.185-7.708-45.747-32.369-65.816-55.538 9.771 6.565 20.611 13.372 32.959 20.562 95.03 55.327 216.62-28.706 247.54-120.67-3.524 205.5-177.8 213.12-255.36 176.04-10.011-4.788-19.38-9.927-28.278-15.369 25.366 4.825 54.767 4.959 68.33 2.122" fill="#344026"/></g><g transform="translate(1055.8 710.9)"><path d="m0 0-11.899-13.184c-21.791-24.126-47.588-60.266-62.264-84.751 5.444 4.029 10.556 7.93 15.188 11.595 83.667 66.208 99.221 101.69 155.57 144.78 16.995 23.621 48.147 57.075 73.982 72.639-21.219 1.336-54.165-1.504-74.438-9.219-49.331-35.393-84.95-81.499-136.01-133.72-6.372-6.516-14.334-13.977-23.472-21.919 11.875 4.143 26.716 10.991 48.267 24.397z" fill="#2c3324"/></g><g transform="translate(1209.4 786)"><path d="m0 0c-15.853-5.701-30.916-13.997-45.428-23.853 35.667 7.618 80.918 3.731 101-15.7l4.82-4.668-6.495-1.66c-23.842-6.104-73.03-35.66-104.22-60.215 179.17 60.813 361.75-163.78 32.778-275.71 273.06 14.668 288.47 219.92 219.45 319.14-51.064 73.405-140.08 84.907-201.9 62.673" fill="#344026"/></g><g transform="translate(1145.8 748.91)"><path d="m0 0c-42.053-33.196-79.553-77.856-117.13-111-9.046-7.976-19.007-16.074-29.588-24.136 11.287 2.793 26.387 8.753 51.82 23.931l18.339 10.947-15.317-14.892c-17.767-17.259-51.006-53.809-71.685-78.426 71.036 48.352 126.09 99.568 154.79 115.41 25.747 25.029 84.956 63.081 117.46 74.521-24.847 17.015-77.196 16.595-108.68 3.643" fill="#2c3324"/></g><g transform="translate(922.34 756.02)"><path d="m0 0c-0.944 3.213-2.446 6.333-4.963 7.632-1.048 0.542-2.832 1.396-5.029 2.471-8.653 4.238-23.135 11.328-27.905 14.228l1.298 2.129c4.673-2.842 19.654-10.176 27.705-14.111 2.207-1.084 4.006-1.922 5.049-2.481 8.062-4.316 7.471-14.895 7.93-18.186 0.552-3.87 0.869-8.42 1.079-13.882 28.781 28.97 9.24 69.143-20.732 86.275-5.992-2.471-26.058-24.2-35.43-40.2 15.547-5.931 31.603-13.216 48.132-22.149 0.72-0.388 1.761-1.023 2.866-1.726" fill="#f37021"/></g><g transform="translate(931.35 781.81)"><path d="m0 0c0-3.041-2.466-5.507-5.507-5.507s-5.507 2.466-5.507 5.507c0 3.042 2.466 5.507 5.507 5.507s5.507-2.465 5.507-5.507" fill="#fff"/></g><g transform="translate(770.91 907.6)"><path d="m0 0c-36.182 4.995-72.246 3.169-111.88 22.544 5.066-14.751 5.674-26.777 31.446-32.749-40.45-1.69-74.317-13.486-101.66-32.192-0.098-0.181-0.295-0.44-0.427-0.65-6.707-4.634-13.13-9.565-19.048-14.985-6.936-6.353-13.399-13.15-19.248-20.445-7.075-19.008-11.509-41.513-6.143-57.251 3.721 16.895 15.952 44.493 40.908 57.1l2.964-3.926c-9.336-10.088-20.688-34.082-21.587-54.15 7.608 13.35 19.629 23.35 37.818 31.699l2.617-4.219c-5.923-4.785-21.86-23.632-25-36.738 0.356 0.371 0.713 0.742 1.074 1.123 8.745 9.209 19.629 20.664 57.788 40.723l2.466-4.346c-17.197-10.508-27.9-25.986-31.313-36.65 9.311 7.744 20.722 16.455 30.009 21.162l3.033-3.848-1.05-1.221c-4.087-4.736-12.588-14.58-11.963-20.859 0.083-0.889 0.351-1.66 0.815-2.344 1.934 1.67 3.975 4.024 6.26 6.66 6.524 7.54 14.644 16.924 28.789 21.075l2.124-4.463c-1.138-0.781-2.358-1.553-3.623-2.354-7.29-4.59-15.459-9.746-16.011-24.023 13.902 10.112 26.133 17.69 41.006 21.89 0.742 0.581 1.56 1.103 2.324 1.669 10.391 7.701 23.079 13.501 37.371 17.544l-0.137 0.264c-0.337 0.01-0.705-0.034-1.045-0.029 0.098 5e-3 0.223 0.044 0.32 0.044 0.244 0 0.486-5e-3 0.725-0.015 13.379 3.75 28.348 5.747 44.648 5.747 28.387 0 60.833-6.059 96.068-19.497 9.372 16.001 29.438 37.73 35.429 40.2-5.535 42.017-82.825 82.002-135.86 87.51" fill="#23261f"/></g><g transform="translate(1070.8 479.79)"><path d="m0 0c1.24 0.234 2.378 0.693 3.584 1.182 1.953 0.781 4.187 1.538 7.326 1.784-3.32 3.098-4.263 4.568-3.723 5.774 0.196 0.43 0.713 1.133 2.276 0.977 3.532-0.415 10.685-2.981 17.441-9.79-2.334 3.547-5.512 7.085-8.792 9.57-3.888 2.949-12.031 9.077-16.955 9.287-2.19 0.095-4.68-1.916-5.312-3.921-1.268-4.013-9.219-8.376-16.278-11.418 7.554-2.449 18.047-3.948 20.433-3.445" fill="#f37021"/></g><g transform="translate(1114.6 456.27)"><path d="m0 0c-0.027 0.186-0.063 0.376-0.107 0.568-0.074 0.33-0.169 0.662-0.287 0.999-0.114 0.337-0.251 0.679-0.41 1.026-0.314 0.695-0.705 1.408-1.172 2.143-0.929 1.47-2.145 3.02-3.598 4.639-1.094 1.211-2.322 2.466-3.672 3.74l-0.017-0.014c-0.151 0.168-0.332 0.297-0.488 0.461-1.17 1.086-2.407 2.185-3.745 3.281-7.461 5.535-16.397 7.219-17.661 7.244-3.57-0.039-5.86-0.84-8.052-1.719-1.255-0.508-2.559-1.025-4.033-1.318-3.953-0.735-20.145 1.963-27.256 5.903-9.617 4.453-18.823 11.582-31.196 24.507-16.675 16.97-22.93 31.606-26.234 43.403-5.703-3.955-11.452-7.832-17.233-11.604l-0.047-0.031c5.752-10.123 18.968-24.908 29.3-33.79l-1.631-1.894c-10.428 8.96-23.74 23.896-29.744 34.331-2.788-1.804-5.583-3.579-8.381-5.33 3.291-4.514 7.175-8.96 11.476-13.203 11.654-11.562 25.56-22.072 37.354-33.747 0.096-0.093 0.188-0.186 0.283-0.279 8e-3 -0.097 0.018-0.195 0.025-0.293 0.642-8.244-8.76-7.041-17.561-6.215-5.352 0.544-11.048 1.071-14.261 9e-3 -4.767-2.702-7.126-5.1-7.36-7.373-0.122-1.137 0.28-2.251 1.144-3.361 0.433-0.555 0.98-1.111 1.636-1.67 0.33-0.279 0.684-0.559 1.065-0.84s0.789-0.562 1.218-0.845c5.671-3.625 15.083-7.535 23.435-10.015 0.945-0.217 2.01 0.185 3.047 0.779-5.801 2.403-12.046 5.987-14.743 9.859-1.172 1.689-1.602 3.339-1.284 4.912l2.451-0.508c-0.181-0.869 0.122-1.875 0.888-2.969 2.525-3.636 9.161-7.224 14.973-9.49 1.136 1.214 1.912 2.522 1.57 3.191-1.494 3.052-1.215 5.152 0.865 6.321 2.172 1.228 6.276 1.35 12.172 0.193 3.02 0.977 4.986 3.259 6.104 7.114 0.871-0.281 1.74-0.561 2.604-0.844-3.608-12.886 1.649-19.906 11.763-24.94 2.078-0.356 3.848-0.529 5.57-0.654-1.844 3.828-3.003 7.348-1.851 9.539 0.391 0.742 1.226 1.66 2.988 1.826 5.681 0.645 11.314-2.598 14.658-7.632 0.787 0.591 1.555 1.221 2.266 1.936 0.371 3.928-2.161 6.992-6.245 10.027-0.02 0.015-5e-3 0.034-0.024 0.049-0.376 0.22-0.801 0.483-1.167 0.698-8.418 4.942-15.064 8.848-18.531 16.826l2.295 0.996c3.14-7.236 9.478-10.957 17.5-15.664 0.564-0.329 1.206-0.727 1.789-1.071 0.257-0.01 0.498 0.026 0.762-0.049 3.655-1.051 7.659-1.099 12.293-0.281 2.048 1.938 4.072 2.549 6.203 1.943 2.103-0.598 4.046-2.285 5.862-5.11 2.891-2.808 5.611-3.306 7.408-3.278 3.916 0.099 6.989 2.599 6.955 5.849-0.02 2.603-1.936 5.42-5.293 8.072 0.18 0.363 0.354 0.722 0.522 1.079 9.268-5.706 14.642-10.469 17.442-14.564 1.899-2.858 2.449-5.378 1.399-8.071 1.489 0.266 2.646 0.95 3.337 1.936 0.345 0.496 0.574 1.067 0.669 1.706 0.049 0.321 0.066 0.66 0.047 1.014-0.01 0.178-0.028 0.361-0.054 0.547" fill="#f37021"/></g><g transform="translate(869.25 786.02)"><path d="m0 0c-33.083 12.197-64.68 18.374-93.975 18.374-16.191 0-31.422-1.929-45.287-5.737l-0.086 5e-3c-7.39 0-15.993-3.052-25.954-6.582-1.36-0.484-2.801-0.967-4.202-1.456 14.397 19.629 20.96 19.751 27.402 19.742 1.714-0.039 3.492-0.039 5.411 0.293l0.283 2.373c-11.87 5.205-23.316-0.703-34.38-6.407-2.9-1.494-5.669-2.929-8.389-4.121 4.077 15.205 21.958 21.192 25.655 22.276l-0.206 2.441c-10.615 1.27-24.301-1.406-37.426-7.217 11.303 13.33 25.508 19.434 41.269 17.764 1.455-0.205 2.93-0.43 4.458-0.693l0.464 2.451c-1.465 0.303-2.969 0.537-4.58 0.723-36.519 5.019-51.807-1.758-70.43-13.956 13.672 21.221 40.005 23.467 40.284 23.487l-0.03 2.5c-20.512 0.967-36.65-1.338-51.982-15.332 6.719 15.058 18.071 23.476 34.555 25.693l-0.073 2.49c-28.535 2.129-51.279-11.816-59.59-26.787-1.679 4.824-1.503 9.551 0.523 14.102 4.238 9.502 15.386 15.781 21.836 17.685 9.951 2.823 20.078 2.979 27.739 2.705 2.437-0.166 4.893-0.322 7.383-0.459l0.161 2.5c-2.051 0.147-4.575 0.332-7.441 0.45-0.035 9e-3 -0.069 9e-3 -0.098 9e-3 -23.694 1.534-46.191 2.979-72.993-17.587 1.218 1.518 2.263 2.861 2.964 3.93 27.902 18.833 60.925 29.17 98.169 30.728l36.858 1.538-35.94 8.33c-16.631 3.852-21.116 9.927-24.307 18.696 26.775-10.923 51.968-13.232 76.426-15.478 8.713-0.801 17.721-1.626 26.675-2.857 52.353-5.439 122.52-43.691 130.86-80.107-8.537-6.323-23.384-23.159-32.007-36.509" fill="#fff"/></g><g transform="translate(839.52 833.34)"><path d="m0 0c-3.06-6.934-1.943-14.6 2.16-20.356 1.014-0.616 1.953-1.06 2.749-1.177 6.151-0.874 22.806 3.12 33.143 5.239 0.7 1.69 1.105 3.413 1.343 5.147-8.326 8.051-12.933 18.764-19.307 21.718-1.196 0.557-3.037 0.982-5.254 1.333-6.355-1.299-12.017-5.517-14.834-11.904" fill="#f37021"/></g><g transform="translate(870.09 821.12)"><path d="m0 0c-2.328-5.278-8.495-7.669-13.774-5.341-5.279 2.329-7.67 8.496-5.341 13.775 2.329 5.278 8.496 7.67 13.774 5.34 5.279-2.328 7.67-8.495 5.341-13.774"/></g><g transform="translate(883.71 818.18)"><path d="m0 0c-1.751 1.206-3.315 2.583-4.795 4.019-0.237-1.734-0.642-3.457-1.343-5.147 2.442 0.503 4.641 0.933 6.138 1.128"/></g><g transform="translate(839.52 833.34)"><path d="m0 0c2.817 6.387 8.479 10.605 14.834 11.904-12.119 1.909-37.036 1.211-48.73 2.867 11.308-7.916 27.358-29.839 36.056-35.127-4.103 5.756-5.22 13.422-2.16 20.356"/></g></g></g></svg>
diff --git a/src/App.vue b/src/App.vue
index c381201..8c026e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,87 +1,117 @@
 <template>
   <div id="app">
-    <nav class="navbar is-light has-shadow" role="navigation" aria-label="main navigation">
-      <div class="container">
-        <div class="navbar-brand">
-          <a class="navbar-item" href="/">
-            <h1>Agola</h1>
-          </a>
-
-          <a
-            role="button"
-            class="navbar-burger burger"
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbarBasicExample"
+    <nav class="bg-gray-800 p-3 text-white">
+      <div class="container flex items-center justify-between flex-wrap bg-gray-800">
+        <div class="mr-6">
+          <router-link
+            class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight"
+            to="/"
           >
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-          </a>
+            <img class="w-10 mr-2" src="/img/agola-logo-circle.svg">
+            Agola
+          </router-link>
         </div>
-        <div class="navbar-menu">
-          <div class="navbar-start"></div>
-          <div class="navbar-end">
-            <div
-              v-if="user"
-              class="navbar-item has-dropdown"
-              v-click-outside="() => createDropdownActive = false"
-              v-bind:class="{ 'is-active': createDropdownActive }"
+        <div class="block lg:hidden">
+          <button
+            class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
+            @click="toggleNav()"
+          >
+            <svg
+              class="fill-current h-3 w-3"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <a class="navbar-link" @click="toggleCreateDropdown()">
-                <i class="mdi mdi-plus-box mdi-24px"/>
-              </a>
-              <div class="navbar-dropdown">
-                <router-link class="navbar-item" to="/neworganization">New Organization</router-link>
-              </div>
+              <title>Menu</title>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+            </svg>
+          </button>
+        </div>
+        <div
+          class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"
+          :class="{'hidden' : !navActive}"
+        >
+          <div class="text-sm lg:flex-grow"></div>
+          <div v-if="user" class="relative mr-3">
+            <button
+              v-click-outside="() => createDropdownActive = false"
+              @click="toggleCreateDropdown()"
+              class="relative flex items-center focus:outline-none"
+            >
+              <i class="mdi mdi-plus-box mdi-24px"/>
+              <i class="mdi mdi-chevron-down"></i>
+            </button>
+            <div
+              v-if="createDropdownActive"
+              class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2 text-dark"
+            >
+              <ul>
+                <li>
+                  <router-link
+                    class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+                    to="/neworganization"
+                  >New Organization</router-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div v-if="user" class="relative">
+            <div class="flex">
+              <button
+                v-click-outside="() => userDropdownActive = false"
+                @click="toggleUserDropdown()"
+                class="relative flex items-center focus:outline-none"
+              >
+                {{user.username}}
+                <i class="mdi mdi-chevron-down"></i>
+              </button>
             </div>
             <div
-              v-if="user"
-              class="navbar-item has-dropdown"
-              v-click-outside="() => userDropdownActive = false"
-              v-bind:class="{ 'is-active': userDropdownActive }"
+              v-if="userDropdownActive"
+              class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2 text-dark"
             >
-              <a class="navbar-link" @click="toggleUserDropdown()">{{user.username}}</a>
-              <div class="navbar-dropdown">
-                <div class="navbar-item">
+              <ul>
+                <li class="block px-4 py-2 border-b">
                   Logged as&nbsp;
                   <b>{{user.username}}</b>
-                </div>
-                <hr class="navbar-divider">
-                <router-link class="navbar-item" to="/logout">
-                  <i class="mdi mdi-logout"></i>Logout
-                </router-link>
-              </div>
-            </div>
-            <div v-else class="navbar-item">
-              <router-link class="button" to="/register">Sign up</router-link>
-              <router-link class="button" to="/login">Login</router-link>
+                </li>
+                <li>
+                  <hr class="navbar-divider">
+                </li>
+                <li>
+                  <router-link
+                    class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+                    to="/logout"
+                  >
+                    <i class="mdi mdi-logout"></i>Logout
+                  </router-link>
+                </li>
+              </ul>
             </div>
           </div>
+          <div v-else class="navbar-item">
+            <router-link class="btn btn-blue" to="/register">Sign up</router-link>
+            <router-link class="ml-2 btn btn-blue" to="/login">Login</router-link>
+          </div>
         </div>
       </div>
     </nav>
 
-    <div v-if="error" class="container">
-      <div class="message is-danger global-error-message">
-        <div class="message-body">
-          <nav class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <p>Failed to fetch data: {{ error }}</p>
-              </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">
-                <button class="button is-danger" @click="reload()">Retry</button>
-              </div>
-            </div>
-          </nav>
+    <div v-if="error" class="container h-screen" role="alert">
+      <div v-if="error" class="h-full flex justify-center items-center" role="alert">
+        <div v-if="error" class="w-full" role="alert">
+          <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">Error</div>
+          <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
+            <p class="mb-8">Failed to fetch data: {{ error }}</p>
+            <button class="btn btn-red" @click="reload()">Retry</button>
+          </div>
         </div>
       </div>
     </div>
-    <div v-else class="main-container container">
-      <router-view v-if="routerActive"></router-view>
+
+    <div v-else class="container mt-6 flex">
+      <div class="flex-grow">
+        <router-view v-if="routerActive"></router-view>
+      </div>
     </div>
   </div>
 </template>
@@ -104,6 +134,7 @@ export default {
   data() {
     return {
       routerActive: true,
+      navActive: false,
       userDropdownActive: false,
       createDropdownActive: false
     };
@@ -129,6 +160,9 @@ export default {
       this.routerActive = false;
       this.$nextTick(() => (this.routerActive = true));
     },
+    toggleNav() {
+      this.navActive = !this.navActive;
+    },
     toggleUserDropdown() {
       this.userDropdownActive = !this.userDropdownActive;
     },
@@ -140,13 +174,4 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/css/main.scss";
-
-.main-container {
-  margin-top: 2rem;
-}
-
-.global-error-message {
-  margin-top: 10rem;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/collapse.vue b/src/components/collapse.vue
index 315464e..00f72e4 100644
--- a/src/components/collapse.vue
+++ b/src/components/collapse.vue
@@ -1,32 +1,30 @@
 <template>
-  <div class="item">
-    <div
-      class="touchable"
-      :class="stepClass(step)"
-      role="tab"
-      :aria-expanded="active ? 'true' : 'false'"
-    >
-      <div class="item-content">
-        <div class="header" @click.prevent="toggle">
-          <span class="icon">
-            <i
-              class="mdi mdi-arrow-right"
-              :class="{ 'arrow-down': active, 'arrow-right': !active }"
-            ></i>
-          </span>
-          <span class="name">{{step.name}}</span>
-          <span class="duration">{{duration}}</span>
-        </div>
-        <div class="log-container" v-show="active">
-          <Log
-            v-bind:runid="runid"
-            v-bind:taskid="taskid"
-            v-bind:setup="setup"
-            v-bind:step="stepnum"
-            v-bind:stepphase="step.phase"
-            v-bind:show="active"
-          />
+  <div
+    class="mb-2 border-l-5 rounded-l"
+    :class="stepClass(step)"
+    role="tab"
+    :aria-expanded="active ? 'true' : 'false'"
+  >
+    <div class="px-4 py-4 border border-l-0 rounded-r">
+      <div class="cursor-pointer flex justify-between" @click.prevent="toggle">
+        <div>
+          <i
+            class="inline-block mr-1 mdi mdi-arrow-right"
+            :class="{ 'arrow-down': active, 'arrow-right': !active }"
+          ></i>
+          <span class="w-1/3 font-bold">{{step.name}}</span>
         </div>
+        <span class>{{duration}}</span>
+      </div>
+      <div class="p-1 log-container" v-show="active">
+        <Log
+          v-bind:runid="runid"
+          v-bind:taskid="taskid"
+          v-bind:setup="setup"
+          v-bind:step="stepnum"
+          v-bind:stepphase="step.phase"
+          v-bind:show="active"
+        />
       </div>
     </div>
   </div>
@@ -98,54 +96,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item {
-}
-
-.item-content {
-  margin-bottom: 5px;
-  border: 1px solid $grey-lighter;
-  border-left: 0 solid;
-  padding: 10px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.success {
-  border-left: 5px solid $green;
-}
-
-.failed {
-  border-left: 5px solid $red;
-}
-
-.running {
-  border-left: 5px solid $blue;
-}
-
-.unknown {
-  border-left: 5px solid $grey-lighter;
-}
-
-.name {
-  flex: 0 0 30%;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.duration {
-  margin-left: auto;
-}
-
-.log-container {
-  padding: 10px;
-}
-
 .arrow-right {
   transition: transform 0.2s ease-in-out;
 }
diff --git a/src/components/createorganization.vue b/src/components/createorganization.vue
index c60b698..b0f082f 100644
--- a/src/components/createorganization.vue
+++ b/src/components/createorganization.vue
@@ -1,26 +1,32 @@
 <template>
   <div>
-    <h4 class="title is-4">New Organization</h4>
+    <h4 class="mb-4 text-xl font-bold">New Organization</h4>
     <div class="field">
       <div class="control">
-        <input class="input" type="text" placeholder="Organization name" v-model="orgName">
+        <input
+          class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          type="text"
+          placeholder="Organization name"
+          v-model="orgName"
+        >
       </div>
     </div>
-    <div class="field">
-      <div class="control">
-        <label class="checkbox">
-          <input type="checkbox" v-model="orgIsPrivate">
-          Private
-        </label>
-      </div>
+    <div class="mb-4">
+      <label>
+        <input type="checkbox" v-model="orgIsPrivate">
+        Private
+      </label>
     </div>
-    <div class="field is-grouped">
-      <div class="control">
-        <button class="button is-primary" @click="createOrg()">Create Organization</button>
-      </div>
-    </div>
-    <div v-if="createOrgError" class="message is-danger">
-      <div class="message-body">{{ createOrgError }}</div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      @click="createOrg()"
+    >Create Organization</button>
+    <div
+      v-if="createOrgError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ createOrgError }}</span>
     </div>
   </div>
 </template>
@@ -67,7 +73,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
 </style>
 
 
diff --git a/src/components/createproject.vue b/src/components/createproject.vue
index 1aff78a..b4ac3b8 100644
--- a/src/components/createproject.vue
+++ b/src/components/createproject.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <h4 class="title is-4">Create Project</h4>
-    <div class="field">
-      <div class="control">
-        <input class="input" type="text" placeholder="Project name" v-model="projectName">
-      </div>
-    </div>
-    <div class="field">
-      <div class="control">
-        <label class="checkbox">
-          <input type="checkbox" v-model="projectIsPrivate">
-          Private
-        </label>
-      </div>
+    <h4 class="mb-4 text-xl font-bold">Create Project</h4>
+
+    <input
+      class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+      type="text"
+      placeholder="Project Name"
+      v-model="projectName"
+    >
+    <div class="mb-4">
+      <label>
+        <input type="checkbox" v-model="projectIsPrivate">
+        Private
+      </label>
     </div>
 
-    <h4 class="title is-4">Available remote repositories</h4>
+    <h4 class="text-xl">Available remote repositories</h4>
     <div v-for="remoteSource in remoteSources" v-bind:key="remoteSource.id">
       <remoterepos
         class="remoterepos"
@@ -24,18 +24,18 @@
         v-on:reposelected="repoSelected(remoteSource, $event)"
       />
     </div>
-    <div class="field is-grouped">
-      <div class="control">
-        <button
-          class="button is-primary"
-          v-bind:class="{ 'is-loading': createProjectLoading }"
-          :disabled="!createProjectButtonEnabled"
-          @click="createProject()"
-        >Create Project</button>
-      </div>
-    </div>
-    <div v-if="createProjectError" class="message is-danger">
-      <div class="message-body">{{ createProjectError }}</div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      v-bind:class="{ 'spinner': createProjectLoading }"
+      :disabled="!createProjectButtonEnabled"
+      @click="createProject()"
+    >Create Project</button>
+    <div
+      v-if="createProjectError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ createProjectError }}</span>
     </div>
   </div>
 </template>
@@ -164,23 +164,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    cursor: pointer;
-    display: flex;
-    padding: 10px;
-  }
-  .name {
-    font-weight: bold;
-  }
-}
-.remoterepos {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 </style>
 
diff --git a/src/components/createprojectbutton.vue b/src/components/createprojectbutton.vue
index 3cd66d3..ec108b5 100644
--- a/src/components/createprojectbutton.vue
+++ b/src/components/createprojectbutton.vue
@@ -1,29 +1,37 @@
 <template>
   <div>
-    <div class="field has-addons is-pulled-rigth">
-      <p class="control">
-        <button class="button" @click="clicked">{{ buttonValue }}</button>
-      </p>
-      <div class="control">
-        <div
-          class="dropdown is-right"
+    <div class="relative mr-3">
+      <div class="flex">
+        <button
+          @click="clicked"
+          class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-green-700 rounded rounded-r-none"
+        >{{ buttonValue }}</button>
+        <button
           v-click-outside="() => dropdownActive = false"
-          v-bind:class="{ 'is-active': dropdownActive }"
+          @click="toggleDropdown"
+          class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-green-700 rounded rounded-l-none"
         >
-          <div class="dropdown-trigger">
-            <button class="button" @click="toggleDropdown">
-              <span class="icon is-small">
-                <i class="mdi mdi-chevron-down"></i>
-              </span>
-            </button>
-          </div>
-          <div class="dropdown-menu" role="menu">
-            <div class="dropdown-content">
-              <a href="#" class="dropdown-item" @click="setButton('project')">New Project</a>
-              <a href="#" class="dropdown-item" @click="setButton('projectgroup')">New Project Group</a>
-            </div>
-          </div>
-        </div>
+          <i class="mdi mdi-chevron-down"></i>
+        </button>
+      </div>
+      <div
+        v-if="dropdownActive"
+        class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
+      >
+        <ul>
+          <li>
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+              @click="setButton('project')"
+            >New Project</a>
+            <a
+              href="#"
+              class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+              @click="setButton('projectgroup')"
+            >New Project Group</a>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
diff --git a/src/components/createprojectgroup.vue b/src/components/createprojectgroup.vue
index 524aaf7..182a28d 100644
--- a/src/components/createprojectgroup.vue
+++ b/src/components/createprojectgroup.vue
@@ -1,37 +1,32 @@
 <template>
   <div>
-    <h4 class="title is-4">Create Project Group</h4>
-    <div class="field">
-      <div class="control">
-        <input
-          class="input"
-          type="text"
-          placeholder="Project Group Name"
-          v-model="projectGroupName"
-        >
-      </div>
-    </div>
-    <div class="field">
-      <div class="control">
-        <label class="checkbox">
-          <input type="checkbox" v-model="projectGroupIsPrivate">
-          Private
-        </label>
-      </div>
+    <h4 class="mb-4 text-xl font-bold">Create Project Group</h4>
+
+    <input
+      class="mb-4 appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+      type="text"
+      placeholder="Project Group Name"
+      v-model="projectGroupName"
+    >
+    <div class="mb-4">
+      <label>
+        <input type="checkbox" v-model="projectGroupIsPrivate">
+        Private
+      </label>
     </div>
 
-    <div class="field is-grouped">
-      <div class="control">
-        <button
-          class="button is-primary"
-          v-bind:class="{ 'is-loading': createProjectGroupLoading }"
-          :disabled="!createProjectGroupButtonEnabled"
-          @click="createProjectGroup()"
-        >Create Project Group</button>
-      </div>
-    </div>
-    <div v-if="createProjectGroupError" class="message is-danger">
-      <div class="message-body">{{ createProjectGroupError }}</div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      v-bind:class="{ 'spinner': createProjectGroupLoading }"
+      :disabled="!createProjectGroupButtonEnabled"
+      @click="createProjectGroup()"
+    >Create ProjectGroup</button>
+    <div
+      v-if="createProjectGroupError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ createProjectGroupError }}</span>
     </div>
   </div>
 </template>
@@ -115,20 +110,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    cursor: pointer;
-    display: flex;
-    padding: 10px;
-  }
-  .name {
-    font-weight: bold;
-  }
-}
 </style>
 
 
diff --git a/src/components/log.vue b/src/components/log.vue
index 2aee263..dfe620d 100644
--- a/src/components/log.vue
+++ b/src/components/log.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="dark">
-    <div class="log">
-      <div class="stream-line" v-for="(item, index) in items" :key="index">
+    <div class="p-3 rounded bg-gray-900 text-white">
+      <div class="font-mono leading-normal text-xs" v-for="(item, index) in items" :key="index">
         <div v-html="item"/>
       </div>
-      <div v-if="lastitem" class="stream-line">
+      <div v-if="lastitem" class="font-mono leading-snug text-xs">
         <div v-html="lastitem"/>
       </div>
     </div>
@@ -141,22 +141,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.log {
-  background-color: #222;
-  color: #f1f1f1;
-  font-family: Cousine, monospace, "Noto Color Emoji";
-  font-size: 12px;
-  line-height: 19px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  text-align: left;
-  font-size: 12px;
-  padding: 5px;
-
-  .stream-line {
-    pre {
-      line-height: 1.2;
-    }
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/components/loginform.vue b/src/components/loginform.vue
index ef66c22..0385937 100644
--- a/src/components/loginform.vue
+++ b/src/components/loginform.vue
@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <div class="field">
-      <p class="control has-icons-left has-icons-right">
-        <input v-model="username" class="input" type="email" placeholder="Email">
-        <span class="icon is-small is-left">
-          <i class="fas fa-envelope"></i>
-        </span>
-        <span class="icon is-small is-right">
-          <i class="fas fa-check"></i>
-        </span>
-      </p>
-    </div>
-    <div class="field">
-      <p class="control has-icons-left">
-        <input v-model="password" class="input" type="password" placeholder="Password">
-        <span class="icon is-small is-left">
-          <i class="fas fa-lock"></i>
-        </span>
-      </p>
-    </div>
-    <div class="field">
-      <p class="control">
+  <div class="w-full max-w-xs">
+    <form
+      class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+      @submit.prevent="$emit('login', { username, password })"
+    >
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="username">Username</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="username"
+          type="text"
+          placeholder="Username"
+          v-model="username"
+        >
+      </div>
+      <div class="mb-6">
+        <label class="block text-sm font-bold mb-2" for="password">Password</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="password"
+          type="password"
+          placeholder="******************"
+          v-model="password"
+        >
+      </div>
+      <div class="flex justify-center">
         <button
-          @click="$emit('login', { username, password })"
-          class="button is-info is-fullwidth"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          type="submit"
         >{{action}} with {{name}}</button>
-      </p>
-    </div>
+      </div>
+    </form>
   </div>
 </template>
 
diff --git a/src/components/orgmembers.vue b/src/components/orgmembers.vue
index 6a0a9f5..74f3f2b 100644
--- a/src/components/orgmembers.vue
+++ b/src/components/orgmembers.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <h4 class="title is-4">Organization Members</h4>
-    <ul v-if="members.length" class="item-list">
-      <li class="item" v-for="member in members" v-bind:key="member.user.id">
-        <span class="name">{{member.user.username}}</span>
-        <span class="role">{{member.role}}</span>
+    <h4 class="mb-3 text-xl">Organization Members</h4>
+    <ul v-if="members.length">
+      <li class="flex" v-for="member in members" v-bind:key="member.user.id">
+        <span class="w-1/2 font-bold">{{member.user.username}}</span>
+        <span class="w-1/2">{{member.role}}</span>
       </li>
     </ul>
-    <div v-else class="item-list">No Members</div>
+    <div v-else>No Members</div>
   </div>
 </template>
 
@@ -47,54 +47,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    border: 1px solid $grey-lighter;
-    border-bottom: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-
-  .item:last-child {
-    border-bottom: 1px solid $grey-lighter;
-  }
-
-  .name {
-    flex: 0 0 30%;
-    font-weight: bold;
-    cursor: pointer;
-  }
-
-  .role {
-    flex: 0 0 40%;
-  }
-
-  .stillrunning {
-    flex: 0 0 10%;
-  }
-
-  .waitingapproval {
-    flex: 0 0 10%;
-  }
-
-  .source-info {
-    flex: 0 0 10%;
-    overflow: hidden;
-    white-space: nowrap;
-
-    a {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .commit {
-    display: block;
-    font-size: 0.8rem;
-  }
-}
 </style>
diff --git a/src/components/projbreadcrumbs.vue b/src/components/projbreadcrumbs.vue
index 9246434..06a3944 100644
--- a/src/components/projbreadcrumbs.vue
+++ b/src/components/projbreadcrumbs.vue
@@ -1,13 +1,17 @@
 <template>
-  <nav class="breadcrumb" aria-label="breadcrumbs">
-    <ul>
+  <nav class="mb-4 bg-grey-light rounded font-sans w-full">
+    <ol class="list-reset flex text-grey-dark">
       <li>
         <a>{{ownertype}}</a>
       </li>
+      <li>
+        <span class="mx-2">/</span>
+      </li>
       <li>
         <router-link :to="ownerLink(ownertype, ownername)">{{ownername}}</router-link>
       </li>
       <li v-for="(ref, i) in projectref" v-bind:key="i">
+        <span class="mx-2">/</span>
         <router-link
           v-if="i+1 < projectref.length"
           :to="projectGroupLink(ownertype, ownername, projectref.slice(0, i+1))"
@@ -19,11 +23,12 @@
       </li>
 
       <li v-for="(ref, i) in projectgroupref" v-bind:key="i">
+        <span class="mx-2">/</span>
         <router-link
           :to="projectGroupLink(ownertype, ownername, projectgroupref.slice(0, i+1))"
         >{{ref}}</router-link>
       </li>
-    </ul>
+    </ol>
   </nav>
 </template>
 
@@ -50,5 +55,4 @@ export default {
 
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/projectgroupsettings.vue b/src/components/projectgroupsettings.vue
index 8febc91..2ac401f 100644
--- a/src/components/projectgroupsettings.vue
+++ b/src/components/projectgroupsettings.vue
@@ -1,81 +1,87 @@
 <template>
   <div>
-    <nav class="panel">
-      <p class="panel-heading">Project Group Settings</p>
-      <div class="panel-block is-block">
-        <div v-if="!isRootProjectGroup" class="field">
-          <label class="label">Project Group Name</label>
+    <div class="panel">
+      <p class="panel-title">Project Group Settings</p>
+      <div class="p-4">
+        <div v-if="!isRootProjectGroup" class="mb-4">
+          <label class="block font-bold mb-2">Project Group Name</label>
           <div class="control">
-            <input class="input" type="text" placeholder="Text input" v-model="projectGroup.name">
+            <input
+              class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+              type="text"
+              placeholder="Project Group Name"
+              v-model="projectGroup.name"
+            >
           </div>
         </div>
-        <div class="field">
-          <div class="control">
-            <label class="checkbox">
-              <input type="checkbox" v-model="projectGroupIsPrivate">
-              Private
-            </label>
-          </div>
+        <div class="mb-4">
+          <label class="checkbox">
+            <input type="checkbox" v-model="projectGroupIsPrivate">
+            Private
+          </label>
         </div>
+        <button class="btn btn-blue" @click="updateProjectGroup()">Update</button>
 
-        <div class="field is-grouped">
-          <div class="control">
-            <button class="button is-primary" @click="updateProjectGroup()">Update</button>
-          </div>
-        </div>
-
-        <div v-if="updateProjectGroupError" class="message is-danger">
-          <div class="message-body">{{ updateProjectGroupError }}</div>
+        <div
+          v-if="updateProjectGroupError"
+          class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <span class="block sm:inline">{{ updateProjectGroupError }}</span>
         </div>
       </div>
-    </nav>
-    <nav class="panel">
-      <p class="panel-heading">Variables</p>
-      <div class="panel-block is-block">
+    </div>
+
+    <div class="panel">
+      <p class="panel-title">Variables</p>
+      <div class="p-4">
         <projectvars :variables="variables" :allvariables="allvariables"/>
       </div>
-    </nav>
-    <nav v-if="!isRootProjectGroup" class="panel is-danger">
-      <p class="panel-heading is-danger">Danger Zone</p>
-      <div class="panel-block is-block">
-        <div>
-          <div>
-            <h4 class="title is-4">Delete This Project Group</h4>
+    </div>
 
-            <div class="message is-danger">
-              <div class="message-body">
-                This operation
-                <strong>CANNOT</strong> be undone.
-                This operation will remove
-                <strong>{{projectGroupPath}}</strong>
-              </div>
-            </div>
-            <label class="label">
-              Please type the project group name for confirmation:
-              <span
-                class="has-text-danger"
-              >{{ projectGroupName }}</span>
-            </label>
-            <div class="field">
-              <input
-                v-model="projectGroupNameToDelete"
-                class="input"
-                type="email"
-                placeholder="Project Group name to delete"
-              >
-            </div>
-            <button
-              class="button is-danger"
-              @click="deleteProjectGroup()"
-              :disabled="!deleteButtonEnabled"
-            >Delete Project Group</button>
-          </div>
+    <div v-if="!isRootProjectGroup" class="panel">
+      <p class="panel-title">Danger Zone</p>
+      <div class="p-4">
+        <h4 class="mb-4 title text-xl">Delete This Project Group</h4>
+        <div
+          class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
+          role="alert"
+        >
+          <p>
+            This operation
+            <strong>CANNOT</strong> be undone.
+            This operation will remove
+            <strong>{{projectGroupPath}}</strong>
+          </p>
         </div>
-        <div v-if="deleteProjectGroupError" class="message is-danger">
-          <div class="message-body">{{ deleteProjectGroupError }}</div>
+        <label class="block mb-2">
+          Please type the project group name for confirmation:
+          <span
+            class="text-red-500 font-bold"
+          >{{ projectGroupName }}</span>
+        </label>
+        <div class="mb-4">
+          <input
+            class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            v-model="projectGroupNameToDelete"
+            type="email"
+            placeholder="Project Group name to delete"
+          >
         </div>
+        <button
+          class="btn btn-red"
+          @click="deleteProjectGroup()"
+          :disabled="!deleteButtonEnabled"
+        >Delete Project Group</button>
       </div>
-    </nav>
+    </div>
+    <div
+      v-if="deleteProjectGroupError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ deleteProjectGroupError }}</span>
+    </div>
   </div>
 </template>
 
@@ -218,10 +224,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.panel-heading {
-  font-weight: 700;
-}
 </style>
 
diff --git a/src/components/projects.vue b/src/components/projects.vue
index 86554d3..86ef0c4 100644
--- a/src/components/projects.vue
+++ b/src/components/projects.vue
@@ -1,33 +1,37 @@
 <template>
   <div>
-    <h4 class="title is-4">Projects</h4>
-    <div v-if="projects.length > 0">
-      <div class="item-list" v-for="project in projects" v-bind:key="project.id">
-        <router-link
-          tag="div"
-          class="item"
-          :to="projectLink(ownertype, ownername, ref(project.name))"
-        >
-          <span class="name">{{project.name}}</span>
-        </router-link>
-      </div>
-    </div>
-    <div v-else class="item-list">No projects</div>
+    <h4 class="text-xl my-3">Projects</h4>
+    <ul v-if="projects.length > 0">
+      <li class="mb-2 border rounded-l" v-for="project in projects" v-bind:key="project.id">
+        <div class="pl-4 py-4 flex items-center">
+          <router-link class="item" :to="projectLink(ownertype, ownername, ref(project.name))">
+            <span class="font-bold">{{project.name}}</span>
+          </router-link>
+        </div>
+      </li>
+    </ul>
+    <div v-else class="font-bold">No projects</div>
 
-    <hr>
-    <h4 class="title is-4">Project Groups</h4>
-    <div v-if="projectgroups.length > 0">
-      <div class="item-list" v-for="projectgroup in projectgroups" v-bind:key="projectgroup.id">
-        <router-link
-          tag="div"
-          class="item"
-          :to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
-        >
-          <span class="name">{{projectgroup.name}}</span>
-        </router-link>
-      </div>
-    </div>
-    <div v-else class="item-list">No project groups</div>
+    <hr class="my-6 border-t">
+
+    <h4 class="text-xl my-3">Project Groups</h4>
+    <ul v-if="projectgroups.length > 0">
+      <li
+        class="mb-2 border rounded-l"
+        v-for="projectgroup in projectgroups"
+        v-bind:key="projectgroup.id"
+      >
+        <div class="pl-4 py-4 flex items-center">
+          <router-link
+            class="item"
+            :to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
+          >
+            <span class="font-bold">{{projectgroup.name}}</span>
+          </router-link>
+        </div>
+      </li>
+    </ul>
+    <div v-else class="font-bold">No project groups</div>
   </div>
 </template>
 
@@ -109,18 +113,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    cursor: pointer;
-    display: flex;
-    padding: 10px;
-  }
-  .name {
-    font-weight: bold;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/components/projectsettings.vue b/src/components/projectsettings.vue
index 52a2bc1..59cbf16 100644
--- a/src/components/projectsettings.vue
+++ b/src/components/projectsettings.vue
@@ -1,95 +1,103 @@
 <template>
   <div>
-    <nav class="panel">
-      <p class="panel-heading">Project Settings</p>
-      <div class="panel-block is-block">
-        <div class="field">
-          <label class="label">Project Name</label>
-          <div class="control">
-            <input class="input" type="text" placeholder="Text input" v-model="project.name">
-          </div>
+    <div class="panel">
+      <p class="panel-title">Project Settings</p>
+      <div class="p-4">
+        <div class="mb-4">
+          <label class="block font-bold mb-2">Project Name</label>
+          <input
+            class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            type="text"
+            placeholder="Project Name"
+            v-model="project.name"
+          >
         </div>
-        <div class="field">
-          <div class="control">
-            <label class="checkbox">
-              <input type="checkbox" v-model="projectIsPrivate">
-              Private
-            </label>
-          </div>
+        <div class="mb-4">
+          <label class="checkbox">
+            <input type="checkbox" v-model="projectIsPrivate">
+            Private
+          </label>
         </div>
-
-        <div class="field is-grouped">
-          <div class="control">
-            <button class="button is-primary" @click="updateProject()">Update</button>
-          </div>
-        </div>
-
-        <div v-if="updateProjectError" class="message is-danger">
-          <div class="message-body">{{ updateProjectError }}</div>
+        <button class="btn btn-blue" @click="updateProject()">Update</button>
+        <div
+          v-if="updateProjectError"
+          class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <span class="block sm:inline">{{ updateProjectError }}</span>
         </div>
       </div>
-    </nav>
-    <nav class="panel">
-      <p class="panel-heading">Variables</p>
-      <div class="panel-block is-block">
+    </div>
+
+    <div class="panel">
+      <p class="panel-title">Variables</p>
+      <div class="p-4">
         <projectvars :variables="variables" :allvariables="allvariables"/>
       </div>
-    </nav>
-    <nav class="panel is-danger">
-      <p class="panel-heading is-danger">Danger Zone</p>
-      <div class="panel-block is-block">
-        <div>
-          <h4 class="title is-4">Delete This Project</h4>
+    </div>
 
-          <div class="message is-danger">
-            <div class="message-body">
-              This operation
-              <strong>CANNOT</strong> be undone.
-              This operation will remove
-              <strong>{{projectPath}}</strong>
-            </div>
-          </div>
-          <label class="label">
-            Please type the project name for confirmation:
-            <span
-              class="has-text-danger"
-            >{{ projectName }}</span>
-          </label>
-          <div class="field">
-            <input
-              v-model="projectNameToDelete"
-              class="input"
-              type="email"
-              placeholder="Project name to delete"
-            >
-          </div>
-          <button
-            class="button is-danger"
-            @click="deleteProject()"
-            :disabled="!deleteButtonEnabled"
-          >Delete Project</button>
+    <div class="panel">
+      <p class="panel-title">Danger Zone</p>
+      <div class="p-4">
+        <h4 class="mb-4 title text-xl">Delete This Project</h4>
+        <div
+          class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
+          role="alert"
+        >
+          <p>
+            This operation
+            <strong>CANNOT</strong> be undone.
+            This operation will remove
+            <strong>{{projectPath}}</strong>
+          </p>
+        </div>
+        <label class="block mb-2">
+          Please type the project name for confirmation:
+          <span
+            class="text-red-500 font-bold"
+          >{{ projectName }}</span>
+        </label>
+        <div class="mb-4">
+          <input
+            class="appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            v-model="projectNameToDelete"
+            type="email"
+            placeholder="Project name to delete"
+          >
+        </div>
+        <button
+          class="btn btn-red"
+          @click="deleteProject()"
+          :disabled="!deleteButtonEnabled"
+        >Delete Project</button>
 
-          <div v-if="deleteProjectError" class="message is-danger">
-            <div class="message-body">{{ deleteProjectError }}</div>
-          </div>
+        <div
+          v-if="deleteProjectError"
+          class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <span class="block sm:inline">{{ deleteProjectError }}</span>
         </div>
       </div>
-      <div class="panel-block is-block">
-        <div>
-          <h4 class="title is-4">Change remote repository linked account</h4>
-          <div class="message is-danger">
-            <div
-              class="message-body"
-            >This operation will change the linked account associated with the project remote repository to the current user linked account</div>
-          </div>
-          <button class="button is-danger" @click="updateRepoLinkedAccount()">Change</button>
+      <div class="p-4 border-t">
+        <h4 class="mb-4 title text-xl">Change remote repository linked account</h4>
+        <div
+          class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
+          role="alert"
+        >
+          <p>This operation will change the linked account associated with the project remote repository to the current user linked account</p>
+        </div>
+        <button class="btn btn-red" @click="updateRepoLinkedAccount()">Change</button>
 
-          <div v-if="updateRepoLinkedAccountError" class="message is-danger">
-            <div class="message-body">{{ updateRepoLinkedAccountError }}</div>
-          </div>
+        <div
+          v-if="updateRepoLinkedAccountError"
+          class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <span class="block sm:inline">{{ updateRepoLinkedAccountError }}</span>
         </div>
       </div>
-    </nav>
+    </div>
   </div>
 </template>
 
@@ -237,9 +245,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.panel-heading {
-  font-weight: 700;
-}
 </style>
diff --git a/src/components/projectvars.vue b/src/components/projectvars.vue
index 6471daa..98e8f86 100644
--- a/src/components/projectvars.vue
+++ b/src/components/projectvars.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
-    <h5 class="title is-5">Local variables</h5>
+    <h5 class="text-2xl">Local variables</h5>
     <vars v-if="allvariables.length" :variables="variables"/>
     <span v-else>No variables</span>
 
-    <hr>
-    <h5 class="title is-5">All variables</h5>
+    <hr class="my-6 border-t">
+
+    <h5 class="text-2xl">All variables</h5>
     <vars v-if="allvariables.length" :variables="allvariables" :showparentpath="true"/>
     <span v-else>No variables</span>
   </div>
@@ -25,6 +26,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
 </style>
 
diff --git a/src/components/registerform.vue b/src/components/registerform.vue
index 3f3a7af..566314e 100644
--- a/src/components/registerform.vue
+++ b/src/components/registerform.vue
@@ -1,21 +1,37 @@
 <template>
-  <div>
-    <div class="field">
-      <p class="control has-icons-left has-icons-right">
-        <input v-model="username" class="input" type="email" placeholder="Email">
-        <span class="icon is-small is-left">
-          <i class="fas fa-envelope"></i>
-        </span>
-        <span class="icon is-small is-right">
-          <i class="fas fa-check"></i>
-        </span>
-      </p>
-    </div>
-    <div class="field">
-      <p class="control">
-        <button @click="$emit('login', { username })" class="button is-info is-fullwidth">Register</button>
-      </p>
-    </div>
+  <div class="w-full max-w-xs">
+    <form
+      class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+      @submit.prevent="$emit('login', { username })"
+    >
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="username">Remote Username</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="username"
+          type="text"
+          placeholder="Username"
+          :disabled="true"
+          v-model="remoteUsername"
+        >
+      </div>
+      <div class="mb-4">
+        <label class="block text-sm font-bold mb-2" for="username">Username</label>
+        <input
+          class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+          id="username"
+          type="text"
+          placeholder="Username"
+          v-model="username"
+        >
+      </div>
+      <div class="flex justify-center">
+        <button
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          type="submit"
+        >Register</button>
+      </div>
+    </form>
   </div>
 </template>
 
@@ -24,6 +40,7 @@
 export default {
   name: "RegisterForm",
   props: {
+    remoteUsername: String,
     username: String
   }
 };
diff --git a/src/components/remoterepos.vue b/src/components/remoterepos.vue
index b8aed6c..7f86208 100644
--- a/src/components/remoterepos.vue
+++ b/src/components/remoterepos.vue
@@ -1,23 +1,21 @@
 <template>
-  <div>
+  <div class="mb-2 border-solid border-gray-300 rounded border shadow-sm">
+    <p class="bg-gray-200 px-4 py-3 border-solid border-gray-300 border-b">
+      repositories from
+      <strong>{{ remotesource.name }}</strong>
+    </p>
     <div v-if="remoterepos.length > 0">
-      <nav class="panel">
-        <p class="panel-heading">
-          repositories from
-          <strong>{{ remotesource.name }}</strong>
-        </p>
-        <label
-          class="panel-block"
-          v-for="(repo, index) in remoterepos"
-          v-bind:key="repo.id"
-          @click="select(index)"
-        >
-          <input type="radio" :checked="selectedrepo == index && selected">
-          {{repo.path}}
-        </label>
-      </nav>
+      <label
+        class="block px-4 py-2 border-b"
+        v-for="(repo, index) in remoterepos"
+        v-bind:key="repo.id"
+        @click="select(index)"
+      >
+        <input type="radio" :checked="selectedrepo == index && selected">
+        {{repo.path}}
+      </label>
     </div>
-    <div v-else class="item-list">No remote repositories</div>
+    <div v-else class="block px-4 py-2 border-b">No remote repositories</div>
   </div>
 </template>
 
@@ -58,22 +56,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    cursor: pointer;
-    display: flex;
-    padding: 10px;
-  }
-  .name {
-    font-weight: bold;
-  }
-}
-
-.panel-block input[type="radio"] {
-  margin-right: 0.75em;
-}
 </style>
diff --git a/src/components/run.vue b/src/components/run.vue
index e9c6eb2..546da69 100644
--- a/src/components/run.vue
+++ b/src/components/run.vue
@@ -3,50 +3,49 @@
     <RunDetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
     <div v-if="run">
       <div v-if="run.phase != 'setuperror'">
-        <div class="tabs">
-          <ul>
-            <li>
-              <a>Tasks</a>
-            </li>
-          </ul>
-        </div>
+        <div class="m-4 text-xl font-bold">Tasks</div>
 
-        <div v-if="run" class="tasks-list">
-          <div v-for="task in run.sortedTasks" v-bind:key="task.id" :class="taskClass(task)">
-            <div class="task-content">
-              <div class="columns">
-                <router-link class="column is-10" tag="a" :to="runTaskLink(task)">
-                  <span class="name">{{task.name}}</span>
-                </router-link>
-                <div class="column">
-                  <span
-                    class="tag"
-                    v-if="run.tasks_waiting_approval.includes(task.id)"
-                  >Waiting approval</span>
-                </div>
-                <div class="parents column">
-                  <span v-if="parents(task).length > 0">depends on: &nbsp;</span>
-                  <span class="parent" v-for="dep in parents(task)" v-bind:key="dep">{{dep}}</span>
-                </div>
+        <ul v-if="run">
+          <li
+            class="mb-2 border-l-5 rounded-l"
+            v-for="task in run.sortedTasks"
+            v-bind:key="task.id"
+            :class="taskClass(task)"
+          >
+            <div class="pl-4 py-4 flex justify-between items-center border border-l-0 rounded-r">
+              <router-link class="w-1/3 font-bold" tag="a" :to="runTaskLink(task)">
+                <span class="w-1/3 font-bold">{{task.name}}</span>
+              </router-link>
+              <div class="column">
+                <span
+                  class="tag"
+                  v-if="run.tasks_waiting_approval.includes(task.id)"
+                >Waiting approval</span>
+              </div>
+              <div class="w-40">
+                <span class="block" v-if="parents(task).length > 0">depends on: &nbsp;</span>
+                <span
+                  class="font-thin text-gray-600"
+                  v-for="dep in parents(task)"
+                  v-bind:key="dep"
+                >{{dep}}</span>
               </div>
               <!--               <span
                 class="duration"
                 v-if="duration && (step.Phase == 'success' || step.Phase == 'failed') "
               >{{duration}}</span>-->
             </div>
-          </div>
-        </div>
+          </li>
+        </ul>
       </div>
       <div v-else>
-        <div class="tabs">
-          <ul>
-            <li>
-              <a>Setup Errors</a>
-            </li>
-          </ul>
-        </div>
-        <div class="setuperrors">
-          <span class="error-line" v-for="(error, i) in run.setup_errors" v-bind:key="i">{{error}}</span>
+        <h2 class="my-4 text-2xl">Setup Errors</h2>
+        <div class="p-3 rounded bg-gray-800 text-white">
+          <pre
+            class="font-mono leading-snug text-xs"
+            v-for="(error, i) in run.setup_errors"
+            v-bind:key="i"
+          >{{error}}</pre>
         </div>
       </div>
     </div>
@@ -138,65 +137,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.tasks-list {
-  .task-content {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    border-left: 0 solid;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-
-  .success {
-    border-left: 5px solid $green;
-  }
-
-  .failed {
-    border-left: 5px solid $red;
-  }
-
-  .running {
-    border-left: 5px solid $blue;
-  }
-
-  .unknown {
-    border-left: 5px solid $grey-lighter;
-  }
-
-  .name {
-    font-weight: bold;
-  }
-
-  .parents {
-    margin-left: 1rem;
-    margin-right: 0rem;
-    font-weight: lighter;
-    font-size: 0.8rem;
-    .parent {
-      font-weight: normal;
-    }
-  }
-}
-
-.setuperrors {
-  background-color: #222;
-  color: #f1f1f1;
-  font-family: Cousine, monospace;
-  font-size: 12px;
-  line-height: 19px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  text-align: left;
-  font-size: 12px;
-  padding: 5px;
-
-  .error-line {
-    pre {
-      line-height: 1.2;
-    }
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/components/rundetail.vue b/src/components/rundetail.vue
index e543f9d..37d3ccf 100644
--- a/src/components/rundetail.vue
+++ b/src/components/rundetail.vue
@@ -1,110 +1,128 @@
 <template>
   <div>
     <div v-if="run != null">
-      <div class="run">
-        <div :class="runResultClass(run)">
-          <div class="run-content">
-            <div class="item-content columns">
-              <div class="run-title column is-10">
-                <span class="run-name">{{run.name}}</span>
-                <span
-                  class="tag"
-                  :class="'is-'+runResultClass(run)"
-                >{{ runStatus(run) | capitalize }}</span>
-                <span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
-                <span v-if="!stillRunning(run)" class="stillrunning"></span>
-              </div>
-              <div class="run-actions column is-2 is-pulled-right">
-                <div
-                  v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
-                  class="dropdown is-right"
-                  v-click-outside="() => dropdownActive = false"
-                  v-bind:class="{ 'is-active': dropdownActive }"
-                >
-                  <div class="dropdown-trigger">
-                    <button class="button" @click="toggleDropdown()">
-                      <span>Restart</span>
-                      <span class="icon is-small">
-                        <i class="mdi mdi-restart" aria-hidden="true"></i>
-                      </span>
-                    </button>
-                  </div>
-                  <div class="dropdown-menu" role="menu">
-                    <div class="dropdown-content">
-                      <a
-                        v-if="run.can_restart_from_scratch"
-                        class="dropdown-item"
-                        @click="restartRun(run.id, true)"
-                      >From start</a>
-                      <a
-                        v-if="run.can_restart_from_failed_tasks"
-                        class="dropdown-item"
-                        @click="restartRun(run.id)"
-                      >From failed tasks</a>
-                    </div>
-                  </div>
-                </div>
-                <button
-                  class="button is-danger"
-                  v-if="run.phase == 'queued'"
-                  @click="cancelRun(run.id)"
-                >Cancel</button>
-                <button
-                  class="button is-danger"
-                  v-if="run.phase == 'running'"
-                  :disabled="run.stopping"
-                  @click="stopRun(run.id)"
-                >Stop</button>
-              </div>
+      <div
+        v-if="stopRunError"
+        class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        role="alert"
+      >
+        <span class="block sm:inline">{{ stopRunError }}</span>
+      </div>
+      <div
+        v-if="cancelRunError"
+        class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        role="alert"
+      >
+        <span class="block sm:inline">{{ cancelRunError }}</span>
+      </div>
+      <div
+        v-if="restartRunError"
+        class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        role="alert"
+      >
+        <span class="block sm:inline">{{ restartRunError }}</span>
+      </div>
+
+      <div class="mb-2 border-l-5 rounded shadow" :class="runResultClass(run)">
+        <div class="p-4 border border-l-0 rounded-r">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center">
+              <span class="text-2xl mr-3">{{run.name}}</span>
+              <span
+                class="mr-3 rounded px-2 py-1 text-xs"
+                :class="'is-' + runResultClass(run)"
+              >{{ runStatus(run) | capitalize }}</span>
+              <span
+                v-if="stillRunning(run)"
+                class="rounded bg-gray-500 text-white px-2 py-1 text-xs"
+              >Still running</span>
             </div>
-            <div class="item-content columns">
-              <div class="commitmessage column">{{run.annotations.message}}</div>
-              <div class="source-info column">
-                <a :href="run.annotations.commit_link" class="commit" target="_blank">
-                  <i class="mdi mdi-source-commit mdi-rotate-90"></i>
-                  <span>{{run.annotations.commit_sha.substring(0,8)}}</span>
-                </a>
-                <a
-                  v-if="run.annotations.event_type == 'push'"
-                  :href="run.annotations.branch_link"
-                  class="commit"
-                  target="_blank"
-                >
-                  <i class="mdi mdi-source-branch"></i>
-                  <span>{{run.annotations.branch}}</span>
-                </a>
-                <a
-                  v-else-if="run.annotations.event_type == 'tag'"
-                  :href="run.annotations.tag_link"
-                  class="commit"
-                  target="_blank"
-                >
-                  <i class="mdi mdi-tag"></i>
-                  <span>{{run.annotations.tag}}</span>
-                </a>
-                <a
-                  v-else-if="run.annotations.event_type == 'pull_request'"
-                  :href="run.annotations.pull_request_link"
-                  class="commit"
-                  target="_blank"
-                >
-                  <i class="mdi mdi-source-pull"></i>
-                  <span>PR #{{run.annotations.pull_request_id}}</span>
-                </a>
+            <div class="relative mr-3">
+              <div
+                v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
+                class="flex"
+                v-click-outside="() => dropdownActive = false"
+              >
+                <div class="flex items-center">
+                  <button class="btn btn-blue" @click="toggleDropdown()">
+                    <span>Restart</span>
+                    <i class="ml-3 mdi mdi-restart" aria-hidden="true"></i>
+                  </button>
+                </div>
               </div>
+
+              <div
+                v-if="dropdownActive"
+                class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
+              >
+                <ul>
+                  <li>
+                    <a
+                      v-if="run.can_restart_from_scratch"
+                      class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+                      @click="restartRun(run.id, true)"
+                    >From start</a>
+                  </li>
+                  <li>
+                    <a
+                      v-if="run.can_restart_from_failed_tasks"
+                      class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
+                      @click="restartRun(run.id)"
+                    >From failed tasks</a>
+                  </li>
+                </ul>
+              </div>
+              <button
+                class="btn btn-red"
+                v-if="run.phase == 'queued'"
+                @click="cancelRun(run.id)"
+              >Cancel</button>
+              <button
+                class="btn btn-red"
+                v-if="run.phase == 'running'"
+                :disabled="run.stopping"
+                @click="stopRun(run.id)"
+              >Stop</button>
+            </div>
+          </div>
+          <div class="flex">
+            <div class="w-1/2">{{run.annotations.message}}</div>
+            <div class="w-1/2">
+              <a :href="run.annotations.commit_link" class="block" target="_blank">
+                <i class="mdi mdi-source-commit mdi-rotate-90"></i>
+                <span>{{run.annotations.commit_sha.substring(0,8)}}</span>
+              </a>
+              <a
+                v-if="run.annotations.event_type == 'push'"
+                :href="run.annotations.branch_link"
+                class="block"
+                target="_blank"
+              >
+                <i class="mdi mdi-source-branch"></i>
+                <span>{{run.annotations.branch}}</span>
+              </a>
+              <a
+                v-else-if="run.annotations.event_type == 'tag'"
+                :href="run.annotations.tag_link"
+                class="block"
+                target="_blank"
+              >
+                <i class="mdi mdi-tag"></i>
+                <span>{{run.annotations.tag}}</span>
+              </a>
+              <a
+                v-else-if="run.annotations.event_type == 'pull_request'"
+                :href="run.annotations.pull_request_link"
+                class="block"
+                target="_blank"
+              >
+                <i class="mdi mdi-source-pull"></i>
+                <span>PR #{{run.annotations.pull_request_id}}</span>
+              </a>
             </div>
           </div>
         </div>
       </div>
-      <div v-if="stopRunError" class="message is-danger">
-        <div class="message-body">{{ stopRunError }}</div>
-      </div>
-      <div v-if="cancelRunError" class="message is-danger">
-        <div class="message-body">{{ cancelRunError }}</div>
-      </div>
-      <div v-if="cancelRunError" class="message is-danger">
-        <div class="message-body">{{ cancelRunError }}</div>
-      </div>
     </div>
   </div>
 </template>
@@ -222,100 +240,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.run {
-  margin-bottom: 2rem;
-
-  .run-content {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    border-left: 0 solid;
-    display: block;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-
-  .run-title {
-    align-items: center;
-    padding-left: 5px;
-    margin-bottom: 25px;
-
-    .run-name {
-      padding-left: 5px;
-      font-size: 1.5rem;
-      padding-right: 1rem;
-    }
-
-    .success {
-      border-left: 0px solid $green;
-    }
-
-    .failed {
-      border-left: 5px solid $red;
-    }
-
-    .running {
-      border-left: 5px solid $blue;
-    }
-
-    .unknown {
-      border-left: 5px solid $grey-lighter;
-    }
-  }
-
-  .run-actions {
-    text-align: right;
-  }
-
-  .item-content {
-  }
-
-  .success {
-    border-left: 5px solid $green;
-  }
-
-  .failed {
-    border-left: 5px solid $red;
-  }
-
-  .running {
-    border-left: 5px solid $blue;
-  }
-
-  .unknown {
-    border-left: 5px solid $grey-lighter;
-  }
-
-  .setuperror {
-    border-left: 5px solid $yellow;
-  }
-
-  .name {
-    font-weight: bold;
-    cursor: pointer;
-  }
-
-  .commitmessage {
-  }
-
-  .stillrunning {
-  }
-
-  .source-info {
-    overflow: hidden;
-    white-space: nowrap;
-
-    a {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .commit {
-    display: block;
-    font-size: 0.8rem;
-  }
-}
 </style>
diff --git a/src/components/runs.vue b/src/components/runs.vue
index cde4c38..bc0e892 100644
--- a/src/components/runs.vue
+++ b/src/components/runs.vue
@@ -1,34 +1,44 @@
 <template>
   <div>
     <div v-if="runs.length > 0">
-      <div class="item-list">
-        <div v-for="run in runs" v-bind:key="run.id" :class="runResultClass(run)">
-          <div class="item-content">
+      <ul>
+        <li
+          class="mb-2 border-l-5 rounded-l"
+          v-for="run in runs"
+          v-bind:key="run.id"
+          :class="runResultClass(run)"
+        >
+          <div class="pl-4 flex items-center border border-l-0 rounded-r">
             <router-link
               v-if="projectref"
-              tag="div"
-              class="name"
+              class="w-1/3 font-bold"
               :to="projectRunLink(ownertype, ownername, projectref, run.id)"
             >
+              <span class>{{run.name}}</span>
+            </router-link>
+            <router-link v-else class="w-1/3 font-bold" :to="userLocalRunLink(ownername, run.id)">
               <span>{{run.name}}</span>
             </router-link>
-            <router-link v-else tag="div" class="name" :to="userLocalRunLink(ownername, run.id)">
-              <span>{{run.name}}</span>
-            </router-link>
-            <div class="commitmessage">{{run.annotations.message}}</div>
-            <span v-if="waitingApproval(run)" class="waitingapproval tag">Waiting Approval</span>
-            <span v-if="!waitingApproval(run)" class="waitingapproval"></span>
-            <span v-if="stillRunning(run)" class="stillrunning tag">Still running</span>
-            <span v-if="!stillRunning(run)" class="stillrunning"></span>
-            <div class="source-info">
-              <a :href="run.annotations.commit_link" class="commit" target="_blank">
+            <div class="w-1/3">{{run.annotations.message}}</div>
+            <span
+              v-if="waitingApproval(run)"
+              class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
+            >Waiting Approval</span>
+            <span v-if="!waitingApproval(run)" class="w-1/5"></span>
+            <span
+              v-if="stillRunning(run)"
+              class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
+            >Still running</span>
+            <span v-if="!stillRunning(run)" class="w-1/5"></span>
+            <div class="w-32">
+              <a :href="run.annotations.commit_link" class="block" target="_blank">
                 <i class="mdi mdi-source-commit mdi-rotate-90"></i>
                 <span>{{run.annotations.commit_sha.substring(0,8)}}</span>
               </a>
               <a
                 v-if="run.annotations.event_type == 'push'"
                 :href="run.annotations.branch_link"
-                class="commit"
+                class="block whitespace-no-wrap overflow-x-hidden"
                 target="_blank"
               >
                 <i class="mdi mdi-source-branch"></i>
@@ -37,7 +47,7 @@
               <a
                 v-else-if="run.annotations.event_type == 'tag'"
                 :href="run.annotations.tag_link"
-                class="commit"
+                class="block"
                 target="_blank"
               >
                 <i class="mdi mdi-tag"></i>
@@ -46,7 +56,7 @@
               <a
                 v-else-if="run.annotations.event_type == 'pull_request'"
                 :href="run.annotations.pull_request_link"
-                class="commit"
+                class="block"
                 target="_blank"
               >
                 <i class="mdi mdi-source-pull"></i>
@@ -54,17 +64,17 @@
               </a>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="has-text-centered">
+        </li>
+      </ul>
+      <div class="flex justify-center my-3">
         <button
           v-if="hasMoreRuns"
-          class="button is-primary is-outlined is-fullwidth load-more-button"
+          class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
           @click="loadMoreRuns()"
         >Load more...</button>
       </div>
     </div>
-    <div v-else class="item-list">No runs</div>
+    <div v-else class>No runs</div>
   </div>
 </template>
 
@@ -218,88 +228,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.project-title {
-  display: flex;
-  align-items: center;
-  padding-left: 5px;
-  margin-bottom: 25px;
-  .project-name {
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
-}
-
-.item-list {
-  .item-content {
-    margin-bottom: 5px;
-    border: 1px solid $grey-lighter;
-    border-left: 0 solid;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-  }
-
-  .success {
-    border-left: 5px solid $green;
-  }
-
-  .failed {
-    border-left: 5px solid $red;
-  }
-
-  .running {
-    border-left: 5px solid $blue;
-  }
-
-  .unknown {
-    border-left: 5px solid $grey-lighter;
-  }
-
-  .setuperror {
-    border-left: 5px solid $yellow;
-  }
-
-  .name {
-    flex: 0 0 30%;
-    font-weight: bold;
-    cursor: pointer;
-  }
-
-  .commitmessage {
-    flex: 0 0 40%;
-  }
-
-  .stillrunning {
-    flex: 0 0 10%;
-  }
-
-  .waitingapproval {
-    flex: 0 0 10%;
-  }
-
-  .source-info {
-    flex: 0 0 10%;
-    overflow: hidden;
-    white-space: nowrap;
-
-    a {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .commit {
-    display: block;
-    font-size: 0.8rem;
-  }
-}
-
-.load-more-button {
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-}
 </style>
diff --git a/src/components/task.vue b/src/components/task.vue
index 196f256..ded122a 100644
--- a/src/components/task.vue
+++ b/src/components/task.vue
@@ -2,18 +2,20 @@
   <div>
     <RunDetail :run="run"/>
     <div v-if="task != null">
-      <div class="columns">
-        <div class="task-title column is-10">
-          <span class="task-name" v-html="task.name"/>
-          <span class="tag" :class="taskClass(task)">{{ task.status | capitalize }}</span>
-        </div>
-        <div class="task-actions column is-2 is-pulled-right">
-          <button
-            class="button is-primary"
-            v-if="task.waiting_approval"
-            @click="approveTask(run.id, task.id)"
-          >Approve</button>
+      <div class="mt-8 mb-4 flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="text-2xl mr-3">{{task.name}}</span>
+
+          <span
+            class="mr-3 rounded px-2 py-1 text-xs"
+            :class="taskClass(task)"
+          >{{ task.status | capitalize }}</span>
         </div>
+        <button
+          v-if="task.waiting_approval"
+          class="btn btn-blue"
+          @click="approveTask(run.id, task.id)"
+        >Approve</button>
       </div>
       <Collapse
         v-bind:runid="runid"
@@ -98,20 +100,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.task-title {
-  display: flex;
-  align-items: center;
-  padding-left: 5px;
-  margin-bottom: 25px;
-
-  .task-name {
-    padding-left: 5px;
-    font-size: 1.5rem;
-    padding-right: 1rem;
-  }
-}
-
-.task-actions {
-  text-align: right;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/usersettings.vue b/src/components/usersettings.vue
index 4b41fd3..402fe9c 100644
--- a/src/components/usersettings.vue
+++ b/src/components/usersettings.vue
@@ -1,107 +1,147 @@
 <template>
   <div>
-    <nav class="panel">
-      <p class="panel-heading">Linked Accounts</p>
-      <div class="panel-block is-block">
-        <div class="message is-danger">
-          <div
-            class="message-body"
-          >Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</div>
+    <div class="panel">
+      <p class="panel-title">Linked Accounts</p>
+      <div class="p-4">
+        <div
+          class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
+          role="alert"
+        >
+          <p>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</p>
         </div>
         <ul v-if="user.linked_accounts">
-          <li class="item-list" v-for="(la, index) in user.linked_accounts" v-bind:key="index">
-            <div class="level item">
-              <div class="level-left">
-                <div class="level-item">
-                  <div>
-                    <span class="name">{{la.remote_user_name}}</span>
-                    <span class="remotesource-name">(on remote source {{laRemoteSourceName(la)}})</span>
-                  </div>
-                </div>
-              </div>
-              <div class="level-right">
-                <div class="level-item">
-                  <button class="button is-primary" @click="deleteLinkedAccount(la)">Delete</button>
-                </div>
-              </div>
+          <li
+            class="flex justify-between items-center mb-2"
+            v-for="(la, index) in user.linked_accounts"
+            v-bind:key="index"
+          >
+            <div>
+              <span class="font-bold">{{la.remote_user_name}}</span>
+              <span class="ml-1">(on remote source {{laRemoteSourceName(la)}})</span>
             </div>
+            <button class="btn btn-red" @click="deleteLinkedAccount(la)">Delete</button>
           </li>
-          <div v-if="deleteLinkedAccountError" class="message is-danger">
-            <div class="message-body">{{ deleteLinkedAccountError }}</div>
+          <div
+            v-if="deleteLinkedAccountError"
+            class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+            role="alert"
+          >
+            <span class="block sm:inline">{{ deleteLinkedAccountError }}</span>
           </div>
         </ul>
         <div v-else>No linked accounts</div>
       </div>
-      <div v-if="remotesources.length" class="panel-block is-block">
-        <h5 class="title is-5">Add new linked account</h5>
-        <div class="field is-grouped">
-          <div class="control">
-            <div class="select">
-              <select v-model="selectedRemoteSourceName">
-                <option v-for="rs in remotesources" v-bind:key="rs.id">{{ rs.name }}</option>
-              </select>
+      <div v-if="remotesources.length" class="p-4 border-t">
+        <h5 class="mb-3 text-xl">Add new linked account</h5>
+
+        <div class="inline-block">
+          <div class="flex mb-3 relative w-64">
+            <select
+              class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+              v-model="selectedRemoteSourceName"
+            >
+              <option v-for="rs in remotesources" v-bind:key="rs.id">{{ rs.name }}</option>
+            </select>
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+              <svg
+                class="fill-current h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+                ></path>
+              </svg>
             </div>
           </div>
-          <button class="button is-primary" @click="addLinkedAccount()">Add Linked Account</button>
         </div>
-      </div>
-    </nav>
 
-    <nav class="panel">
-      <p class="panel-heading">User Tokens</p>
-      <div class="panel-block is-block">
-        <div v-if="user.tokens">
-          <div class="item-list" v-for="token in user.tokens" v-bind:key="token">
-            <nav class="level item">
-              <div class="level-left">
-                <div class="level-item">
-                  <div class="control">
-                    <input
-                      class="input"
-                      disabled
-                      type="text"
-                      placeholder="Token name"
-                      :value="token"
-                    >
-                  </div>
-                </div>
-              </div>
-              <div class="level-right">
-                <div class="level-item">
-                  <button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
-                </div>
-              </div>
-            </nav>
+        <button class="ml-3 btn btn-blue" @click="addLinkedAccount()">Add Linked Account</button>
+      </div>
+    </div>
+
+    <div class="panel">
+      <p class="panel-title">User Tokens</p>
+      <div class="p-4">
+        <ul v-if="user.tokens">
+          <li
+            class="flex justify-between items-center mb-2"
+            v-for="token in user.tokens"
+            v-bind:key="token"
+          >
+            <span class="font-bold">{{token}}</span>
+            <button class="btn btn-red" @click="deleteUserToken(token)">Delete</button>
+          </li>
+          <div
+            v-if="deleteUserTokenError"
+            class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+            role="alert"
+          >
+            <span class="block sm:inline">{{ deleteUserTokenError }}</span>
           </div>
-          <div v-if="deleteUserTokenError" class="message is-danger">
-            <div class="message-body">{{ deleteUserTokenError }}</div>
-          </div>
-        </div>
+        </ul>
         <div v-else>No user tokens</div>
       </div>
 
-      <div class="panel-block is-block">
-        <div v-if="token" class="notification is-success">
-          <button class="delete" @click="closeNewTokenNotification()"></button>
-          User token created: {{token}}
-        </div>
-        <h5 class="title is-5">Create new User Token</h5>
-        <div class="field is-grouped">
-          <div class="control">
-            <input
-              class="input is-primary"
-              type="text"
-              placeholder="Token name"
-              v-model="newtokenname"
-            >
+      <div class="p-4 border-t">
+        <div
+          v-if="token"
+          class="my-3 relative bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md"
+          role="alert"
+        >
+          <div class="flex">
+            <div class="py-1">
+              <svg
+                class="fill-current h-6 w-6 text-teal-500 mr-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+                ></path>
+              </svg>
+            </div>
+            <div>
+              <p class="font-bold">User token created. Copy it now since it won't be showed again</p>
+              <p class="text-sm">{{token}}</p>
+            </div>
           </div>
-          <button class="button is-primary" @click="createUserToken()">Create Token</button>
+          <span
+            class="absolute top-0 bottom-0 right-0 px-4 py-3"
+            @click="closeNewTokenNotification()"
+          >
+            <svg
+              class="fill-current h-6 w-6 text-teal-500"
+              role="button"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+            >
+              <title>Close</title>
+              <path
+                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
+              ></path>
+            </svg>
+          </span>
         </div>
-        <div v-if="createUserTokenError" class="message is-danger">
-          <div class="message-body">{{ createUserTokenError }}</div>
+        <h5 class="mb-3 text-xl">Create new User Token</h5>
+        <div class="control">
+          <input
+            class="shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
+            type="text"
+            placeholder="Token name"
+            v-model="newtokenname"
+          >
+          <button class="ml-3 btn btn-blue" @click="createUserToken()">Create Token</button>
+        </div>
+        <div
+          v-if="createUserTokenError"
+          class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <span class="block sm:inline">{{ createUserTokenError }}</span>
         </div>
       </div>
-    </nav>
+    </div>
   </div>
 </template>
 
@@ -219,18 +259,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.item-list {
-  .item {
-    padding: 10px;
-  }
-  .name {
-    font-weight: bold;
-  }
-  .remotesource-name {
-    margin-left: 0.5rem;
-  }
-}
 </style>
 
diff --git a/src/components/vars.vue b/src/components/vars.vue
index 721bc5b..68366b1 100644
--- a/src/components/vars.vue
+++ b/src/components/vars.vue
@@ -1,64 +1,54 @@
 <template>
   <div>
-    <div class="columns has-text-weight-bold">
-      <div class="column is-2">Name</div>
-      <div class="column is-10">
-        <div class="columns">
-          <div class="column is-2">Secret Name</div>
-          <div class="column is-2">Secret Value</div>
-          <div class="column">
-            <div class="columns">
-              <div class="column">Conditions</div>
-              <div class="column">Include</div>
-              <div class="column">Exclude</div>
+    <div class="my-3 flex font-bold">
+      <div class="w-1/3">Name</div>
+      <div class="w-2/3">
+        <div class="flex">
+          <div class="w-1/3">Secret Name</div>
+          <div class="w-1/3">Secret Value</div>
+          <div class="w-1/3">
+            <div class="flex">
+              <div class="w-1/3 mr-2">Conditions</div>
+              <div class="w-1/3 mr-2">Include</div>
+              <div class="w-1/3 mr-2">Exclude</div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="columns" v-for="variable in variables" v-bind:key="variable.id">
-      <div class="column is-2">
+    <div class="flex" v-for="variable in variables" v-bind:key="variable.id">
+      <div class="w-1/3">
         <span class="name">{{variable.name}}</span>
-        <div v-if="showparentpath" class="var-parent-path">from {{variable.parent_path}}</div>
+        <div v-if="showparentpath" class="text-sm font-light">from {{variable.parent_path}}</div>
       </div>
-      <div class="column is-10">
-        <div class="item-list" v-for="val in variable.values" v-bind:key="val.id">
-          <div class="columns">
-            <div class="column is-2">
-              <span class="secret-name">{{val.secret_name}}</span>
-              <div
-                v-if="val.matching_secret_parent_path"
-                class="matching-secret"
-              >using secret from {{val.matching_secret_parent_path}}</div>
-              <div v-else class="no-matching-secret">no matching secret</div>
-            </div>
-            <div class="column is-2">
-              <span class="secret-var">{{val.secret_var}}</span>
-            </div>
-            <div class="column">
-              <div v-if="val.when">
-                <div v-if="val.when.branch">
-                  <div class="columns">
-                    <div class="column">
-                      <span>branch</span>
+      <div class="w-2/3">
+        <div class="flex" v-for="val in variable.values" v-bind:key="val.id">
+          <div class="w-1/3">
+            <span>{{val.secret_name}}</span>
+            <div
+              v-if="val.matching_secret_parent_path"
+              class="text-sm"
+            >using secret from {{val.matching_secret_parent_path}}</div>
+            <div v-else class="text-sm text-red-600">no matching secret</div>
+          </div>
+          <div class="w-1/3">
+            <span>{{val.secret_var}}</span>
+          </div>
+          <div class="w-1/3">
+            <div v-if="val.when">
+              <div v-if="val.when.branch">
+                <div class="flex">
+                  <div class="w-1/3">
+                    <span>branch</span>
+                  </div>
+                  <div class="w-1/3">
+                    <div v-for="include in val.when.branch.include" v-bind:key="include.match">
+                      <span>{{include.match}}</span>
                     </div>
-                    <div class="column">
-                      <div
-                        class="item-list"
-                        v-for="include in val.when.branch.include"
-                        v-bind:key="include.match"
-                      >
-                        <span class="secret-name">{{include.match}}</span>
-                      </div>
-                    </div>
-                    <div class="column">
-                      <div
-                        class="item-list"
-                        v-for="exclude in val.when.branch.exclude"
-                        v-bind:key="exclude.match"
-                      >
-                        <span class="secret-name">{{exclude.match}}</span>
-                      </div>
+                  </div>
+                  <div class="w-1/3">
+                    <div v-for="exclude in val.when.branch.exclude" v-bind:key="exclude.match">
+                      <span>{{exclude.match}}</span>
                     </div>
                   </div>
                 </div>
@@ -83,30 +73,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-@import "~bulma/bulma.sass";
-
-.name {
-}
-
-.secret-name {
-  font-weight: bold;
-}
-
-.var-parent-path {
-  @extend .has-text-weight-light;
-  @extend .is-size-7;
-}
-
-.matching-secret {
-  @extend .has-text-weight-light;
-  @extend .is-size-7;
-}
-
-.no-matching-secret {
-  @extend .has-text-danger;
-  @extend .is-size-7;
-}
 </style>
 
 
diff --git a/src/css/_ansi.scss b/src/css/_ansi.scss
index 18294bd..548f698 100644
--- a/src/css/_ansi.scss
+++ b/src/css/_ansi.scss
@@ -1,6 +1,19 @@
-// **
-// black
-// **
+$ansi-black: #222;
+$ansi-black-bright: #222;
+$ansi-red: #c0392b;
+$ansi-red-bright: #e74c3c;
+$ansi-green: #27af60;
+$ansi-green-bright: #2ecc71;
+$ansi-yellow: #f39c12;
+$ansi-yellow-bright: #f1c40f;
+$ansi-blue: #2e8dcd;
+$ansi-blue-bright: #3498db;
+$ansi-magenta: #8e44ad;
+$ansi-magenta-bright: #9b59b6;
+$ansi-cyan: #0097a4;
+$ansi-cyan-bright: #02c8d9;
+$ansi-white: #bdc3c7;
+$ansi-white-bright: #ffffff;
 
 .ansi-black-fg {
   color: $ansi-black;
@@ -16,10 +29,6 @@
   background-color: $ansi-black-bright;
 }
 
-// **
-// red
-// **
-
 .ansi-red-fg {
   color: $ansi-red;
 }
@@ -34,10 +43,6 @@
   background-color: $ansi-red-bright;
 }
 
-// **
-// green
-// **
-
 .ansi-green-fg {
   color: $ansi-green;
 }
@@ -52,10 +57,6 @@
   background-color: $ansi-green-bright;
 }
 
-// **
-// yellow
-// **
-
 .ansi-yellow-fg {
   color: $ansi-yellow;
 }
@@ -70,10 +71,6 @@
   background-color: $ansi-yellow-bright;
 }
 
-// **
-// blue
-// **
-
 .ansi-blue-fg {
   color: $ansi-blue;
 }
@@ -88,10 +85,6 @@
   background-color: $ansi-blue-bright;
 }
 
-// **
-// magenta
-// **
-
 .ansi-magenta-fg {
   color: $ansi-magenta;
 }
@@ -106,10 +99,6 @@
   background-color: $ansi-magenta-bright;
 }
 
-// **
-// cyan
-// **
-
 .ansi-cyan-fg {
   color: $ansi-cyan;
 }
@@ -124,10 +113,6 @@
   background-color: $ansi-cyan-bright;
 }
 
-// **
-// white
-// **
-
 .ansi-white-fg {
   color: $ansi-white;
 }
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
deleted file mode 100644
index 3c059e8..0000000
--- a/src/css/_variables.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import "~bulma/sass/utilities/initial-variables.sass";
-@import "~bulma/sass/utilities/functions.sass";
-
-$grey: #8c9b9d;
-$grey-light: #a9afb7;
-$grey-lighter: #dee2e5;
-$orange: #e67e22;
-$yellow: #f1b70e;
-$green: #2ecc71;
-$turquoise: #1abc9c;
-$blue: #3498db;
-$purple: #8e44ad;
-$red: #e42522;
-$white-ter: #ecf0f1;
-$primary: #34495e !default;
-
-$grey-lighter-invert: findColorInvert($grey-lighter);
-$green-invert: findColorInvert($green);
-$red-invert: findColorInvert($red);
-$blue-invert: findColorInvert($red);
-
-$custom-colors: (
-  "unknown": (
-    $grey-lighter,
-    $grey-lighter-invert
-  ),
-  "success": (
-    $green,
-    $green-invert
-  ),
-  "failed": (
-    $red,
-    $red-invert
-  ),
-  "running": (
-    $blue,
-    $blue-invert
-  )
-);
-
-$link: $grey;
-$tabs-link-active-color: $blue;
-$tabs-link-active-border-bottom-color: $blue;
-$tabs-link-hover-color: $blue;
-$tabs-link-hover-border-bottom-color: $blue;
-
-$spacing: 20px;
-
-$breadcrumb-item-color: $grey-dark !default;
-$breadcrumb-item-hover-color: $grey-dark !default;
-
-$breadcrumb-item-padding-vertical: 0 !default;
-$breadcrumb-item-padding-horizontal: 0.5em !default;
-
-$breadcrumb-item-separator-color: $grey-light !default;
-
-$ansi-black: #222;
-$ansi-black-bright: #222;
-$ansi-red: #c0392b;
-$ansi-red-bright: #e74c3c;
-$ansi-green: #27af60;
-$ansi-green-bright: #2ecc71;
-$ansi-yellow: #f39c12;
-$ansi-yellow-bright: #f1c40f;
-$ansi-blue: #2e8dcd;
-$ansi-blue-bright: #3498db;
-$ansi-magenta: #8e44ad;
-$ansi-magenta-bright: #9b59b6;
-$ansi-cyan: #0097a4;
-$ansi-cyan-bright: #02c8d9;
-$ansi-white: #bdc3c7;
-$ansi-white-bright: #ffffff;
diff --git a/src/css/main.scss b/src/css/main.scss
deleted file mode 100644
index 0f0a64a..0000000
--- a/src/css/main.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "@/css/_variables.scss";
-
-@import "~bulma/bulma.sass";
-
-@import "./css/_ansi.scss";
diff --git a/src/css/tailwind.scss b/src/css/tailwind.scss
new file mode 100644
index 0000000..a8fa43a
--- /dev/null
+++ b/src/css/tailwind.scss
@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+
+@import "@/css/_ansi.scss";
+
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
+.btn-blue:disabled {
+  @apply bg-blue-500 opacity-50 cursor-not-allowed;
+}
+.btn-blue:focus {
+  @apply bg-blue-500 outline-none shadow-outline;
+}
+
+.btn-red {
+  @apply bg-red-500 text-white;
+}
+.btn-red:hover {
+  @apply bg-red-700;
+}
+.btn-red:disabled {
+  @apply bg-red-500 opacity-50 cursor-not-allowed;
+}
+.btn-red:focus {
+  @apply bg-red-500 outline-none shadow-outline;
+}
+
+.tab {
+  @apply flex border-b-2;
+}
+
+.tab-element {
+  @apply px-4 -m-2px border-b-2;
+}
+
+.tab-element:hover {
+  @apply border-blue-300 text-blue-500;
+}
+
+.tab-element-selected {
+  @apply border-b-2 border-blue-300 text-blue-500;
+}
+
+.panel {
+  @apply mb-2 border-solid border-gray-300 rounded border shadow;
+}
+
+.panel-title {
+  @apply bg-gray-200 px-4 py-3 border-solid border-gray-300 border-b text-xl font-bold;
+}
+
+.success {
+  @apply border-green-400;
+}
+
+.is-success {
+  @apply bg-green-400 text-white;
+}
+
+.failed {
+  @apply border-red-600;
+}
+
+.is-failed {
+  @apply bg-red-600 text-white;
+}
+
+.running {
+  @apply border-blue-500;
+}
+
+.is-running {
+  @apply bg-blue-500 text-white;
+}
+
+.unknown {
+  @apply border-gray-400;
+}
+
+.is-unknown {
+  @apply bg-gray-400 text-white;
+}
+
+.setuperror {
+  @apply border-yellow-500;
+}
+
+.is-setuperror {
+  @apply bg-yellow-500 text-white;
+}
+
+.spinner {
+  color: transparent !important;
+  pointer-events: none;
+  position: relative;
+  &:after {
+    animation: spinAround 500ms infinite linear;
+    border: 2px solid #dae1e7;
+    border-radius: 290486px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    width: 1em;
+    height: 1em;
+    left: calc(50% - (1em / 2));
+    top: calc(50% - (1em / 2));
+    position: absolute !important;
+  }
+}
+
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+@tailwind utilities;
+
+html {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+body {
+  @apply text-dark;
+}
diff --git a/src/main.js b/src/main.js
index daf4753..17bdaa7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
+import '@/css/tailwind.scss'
 import "@mdi/font/css/materialdesignicons.css";
 
 import Vue from "vue";
diff --git a/src/views/AddLinkedAccount.vue b/src/views/AddLinkedAccount.vue
index 545e07e..5d2bc22 100644
--- a/src/views/AddLinkedAccount.vue
+++ b/src/views/AddLinkedAccount.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <div class="column is-4 is-offset-4">
+    <div
+      v-if="addLinkedAccountError"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ addLinkedAccountError }}</span>
+    </div>
+    <div class="my-6 flex justify-center items-center">
       <div v-if="remotesource">
         <LoginForm
           v-if="remotesource.auth_type == 'password'"
@@ -10,13 +17,10 @@
         />
         <button
           v-else
-          class="button is-info is-fullwidth"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
           @click="doAddLinkedAccount(remotesource.name)"
         >Add Linked Account with {{remotesource.name}}</button>
       </div>
-      <div v-if="addLinkedAccountError" class="message is-danger">
-        <div class="message-body">{{ addLinkedAccountError }}</div>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 0268e91..7c648e8 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,24 +1,34 @@
 <template>
   <div>
-    <div v-if="error" class="message is-danger">
-      <div class="message-header">
-        <p>Login error</p>
-      </div>
-      <div class="message-body">{{ error }}</div>
+    <div
+      v-if="error"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ error }}</span>
     </div>
-    <div class="column is-4 is-offset-4">
-      <div class="box" v-for="rs in remotesources" v-bind:key="rs.id">
+    <div>
+      <div
+        class="my-6 flex justify-center items-center"
+        v-for="rs in remotesources"
+        v-bind:key="rs.id"
+      >
         <LoginForm
           action="Login"
           :name="rs.name"
           v-if="rs.auth_type == 'password'"
           v-on:login="doLogin($event.username, $event.password, rs.name)"
         />
-        <button
-          v-else
-          class="button is-info is-fullwidth"
-          @click="doLogin(null, null, rs.name)"
-        >Login with {{rs.name}}</button>
+        <div v-else class="w-full max-w-xs">
+          <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <div class="flex justify-center">
+              <button
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                @click="doLogin(null, null, rs.name)"
+              >Login with {{rs.name}}</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/Oauth2.vue b/src/views/Oauth2.vue
index 0b46e2a..339a559 100644
--- a/src/views/Oauth2.vue
+++ b/src/views/Oauth2.vue
@@ -1,10 +1,11 @@
 <template>
   <div>
-    <div v-if="error" class="message is-danger">
-      <div class="message-header">
-        <p>Error</p>
-      </div>
-      <div class="message-body">{{ error }}</div>
+    <div
+      v-if="error"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ error }}</span>
     </div>
   </div>
 </template>
diff --git a/src/views/Org.vue b/src/views/Org.vue
index 511c54d..4ac5252 100644
--- a/src/views/Org.vue
+++ b/src/views/Org.vue
@@ -1,62 +1,67 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
+    <nav class="mb-4 bg-grey-light rounded font-sans w-full">
+      <ol class="list-reset flex text-grey-dark">
         <li>
           <a>org</a>
         </li>
+        <li>
+          <span class="mx-2">/</span>
+        </li>
         <li>
           <router-link :to="ownerLink('org', orgname)">{{orgname}}</router-link>
         </li>
-      </ul>
+      </ol>
     </nav>
 
-    <div class="name">
-      <span class="is-size-3">{{orgname}}</span>
-      <div class="is-pulled-right">
-        <createprojectbutton v-on:click="goToCreate($event)"/>
-      </div>
+    <div class="mb-8 flex justify-between">
+      <span class="text-3xl">{{orgname}}</span>
+      <createprojectbutton v-on:click="goToCreate($event)"/>
     </div>
 
-    <div class="tabs">
-      <ul>
-        <li :class="[{ 'is-active': $route.name === 'org projects' || $route.name === 'org' }]">
+    <div class="flex justify-between">
+      <ul class="flex-grow tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]"
+        >
           <router-link :to="ownerProjectsLink('org', orgname)">
-            <span class="icon is-small">
-              <i class="mdi mdi-home"/>
-            </span>
+            <i class="mr-1 mdi mdi-home"/>
             <span>Projects</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name === 'org members' }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name === 'org members' }]"
+        >
           <router-link :to="orgMembersLink(orgname)">
-            <span class="icon is-small">
-              <i class="mdi mdi-account-group"/>
-            </span>
+            <i class="mr-1 mdi mdi-account-group"/>
             <span>Members</span>
           </router-link>
         </li>
       </ul>
-      <ul class="is-right">
-        <li :class="[{ 'is-active': $route.name.endsWith('org project group settings') }]">
+      <ul class="flex tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
+        >
           <router-link :to="projectGroupSettingsLink('org', orgname, [])">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mr-1 mdi mdi-settings"/>
             <span>Root Project Group Settings</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name.endsWith('org settings') }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
+        >
           <router-link :to="ownerSettingsLink('org', orgname)">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mr-1 mdi mdi-settings"/>
             <span>Organization Settings</span>
           </router-link>
         </li>
       </ul>
     </div>
-    <router-view></router-view>
+    <router-view class="mt-8"></router-view>
   </div>
 </template>
 
@@ -104,10 +109,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.name {
-  padding-left: 5px;
-  margin-bottom: 25px;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 9df9349..82971ff 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -2,64 +2,62 @@
   <div>
     <projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref"/>
 
-    <div class="name">
-      <span class="is-size-3">{{projectName()}}</span>
+    <div class="mb-8">
+      <span class="text-3xl">{{projectName()}}</span>
     </div>
 
-    <div class="tabs">
-      <ul>
-        <li>
-          <span class="icon is-small">
-            <i class="mdi mdi-run-fast"/>
-          </span>
+    <div class="flex justify-between">
+      <ul class="flex-grow tab">
+        <li class="tab-element">
+          <i class="mr-1 mdi mdi-run-fast"/>
           <span>Runs</span>
         </li>
         <li>
           <tabarrow/>
         </li>
         <li
-          :class="[{ 'is-active': $route.name.match('project runs') || $route.name.endsWith('project') }]"
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]"
         >
           <router-link :to="projectRunsLink(ownertype, ownername, projectref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-asterisk"/>
-            </span>
+            <i class="mr-1 mdi mdi-asterisk"/>
             <span>All</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name.match('project branches runs') }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]"
+        >
           <router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-source-branch"/>
-            </span>
+            <i class="mr-1 mdi mdi-source-branch"/>
             <span>Branches</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name.match('project tags runs') }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]"
+        >
           <router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-tag"/>
-            </span>
+            <i class="mr-1 mdi mdi-tag"/>
             <span>Tags</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name.match('project pull requests runs') }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]"
+        >
           <router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-source-pull"/>
-            </span>
+            <i class="mr-1 mdi mdi-source-pull"/>
             <span>Pull Requests</span>
           </router-link>
         </li>
-        <li
-          v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
-          :class="[{ 'is-active': $route.name.endsWith('project run') }]"
-        >
+        <li v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')">
           <tabarrow/>
         </li>
         <li
+          class="tab-element"
           v-if="$route.name.endsWith('project run') || $route.name.endsWith('project run task')"
-          :class="[{ 'is-active': $route.name.endsWith('project run') }]"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('project run') }]"
         >
           <router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
             <p v-if="run">
@@ -68,13 +66,10 @@
             </p>
           </router-link>
         </li>
-        <li
-          v-if="$route.name.endsWith('project run task')"
-          :class="[{ 'is-active': $route.name.endsWith('project run') }]"
-        >
+        <li v-if="$route.name.endsWith('project run task')">
           <tabarrow/>
         </li>
-        <li v-if="$route.name.endsWith('project run task')" class="is-active">
+        <li class="tab-element" v-if="$route.name.endsWith('project run task')">
           <router-link
             :to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
           >
@@ -85,18 +80,19 @@
           </router-link>
         </li>
       </ul>
-      <ul class="is-right">
-        <li :class="[{ 'is-active': $route.name.endsWith('project settings') }]">
+      <ul class="flex tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
+        >
           <router-link :to="projectSettingsLink(ownertype, ownername, projectref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mr-1 mdi mdi-settings"/>
             <span>Project Settings</span>
           </router-link>
         </li>
       </ul>
     </div>
-    <router-view></router-view>
+    <router-view class="mt-8"></router-view>
   </div>
 </template>
 
@@ -170,10 +166,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.name {
-  padding-left: 5px;
-  margin-bottom: 25px;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 3ff860e..8fba904 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -7,38 +7,36 @@
       :projectgroupref="projectgroupref"
     />
 
-    <div class="name">
-      <span class="is-size-3">{{projectGroupName()}}</span>
-      <div class="is-pulled-right">
-        <createprojectbutton v-on:click="goToCreate($event)"/>
-      </div>
+    <div class="mb-8 flex justify-between">
+      <span class="text-3xl">{{projectGroupName()}}</span>
+      <createprojectbutton v-on:click="goToCreate($event)"/>
     </div>
 
-    <div class="tabs">
-      <ul>
+    <div class="flex justify-between">
+      <ul class="flex-grow tab">
         <li
-          :class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
         >
           <router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-home"/>
-            </span>
+            <i class="mdi mdi-home"/>
             <span>Projects</span>
           </router-link>
         </li>
       </ul>
-      <ul class="is-right">
-        <li :class="[{ 'is-active': $route.name.endsWith('project group settings') }]">
+      <ul class="flex tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
+        >
           <router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mdi mdi-settings"/>
             <span>Project Group Settings</span>
           </router-link>
         </li>
       </ul>
     </div>
-    <router-view></router-view>
+    <router-view class="mt-8"></router-view>
   </div>
 </template>
 
@@ -97,10 +95,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.name {
-  padding-left: 5px;
-  margin-bottom: 25px;
-}
 </style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index d1354e7..0aad8fa 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,25 +1,44 @@
 <template>
   <div>
-    <div v-if="registeruser" class="column is-4 is-offset-4">
-      <div>{{registeruser.remote_user_info.LoginName}}</div>
-      <RegisterForm
-        :username="registeruser.remote_user_info.LoginName"
-        v-on:login="doRegister(registeruser.remote_source_name, $event.username, registeruser.remote_source_login_name, registeruser.remote_source_login_password)"
-      />
+    <div
+      v-if="error"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      role="alert"
+    >
+      <span class="block sm:inline">{{ error }}</span>
     </div>
-    <div v-else class="column is-4 is-offset-4">
-      <div class="box" v-for="rs in remotesources" v-bind:key="rs.id">
+    <div v-if="registeruser" class="my-6 flex justify-center items-center">
+      <div>
+        <div>{{registeruser.remote_user_info.LoginName}}</div>
+        <RegisterForm
+          :remote-username="registeruser.remote_user_info.LoginName"
+          :username="registeruser.remote_user_info.LoginName"
+          v-on:login="doRegister(registeruser.remote_source_name, $event.username, registeruser.remote_source_login_name, registeruser.remote_source_login_password)"
+        />
+      </div>
+    </div>
+    <div v-else>
+      <div
+        class="my-6 flex justify-center items-center"
+        v-for="rs in remotesources"
+        v-bind:key="rs.id"
+      >
         <LoginForm
           action="Register"
           :name="rs.name"
           v-if="rs.auth_type == 'password'"
           v-on:login="doAuthorize(rs.name, $event.username, $event.password)"
         />
-        <button
-          v-else
-          class="button is-info is-fullwidth"
-          @click="doAuthorize(rs.name)"
-        >Register with {{rs.name}}</button>
+        <div v-else class="w-full max-w-xs">
+          <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <div class="flex justify-center">
+              <button
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                @click="doAuthorize(rs.name)"
+              >Register with {{rs.name}}</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -33,7 +52,7 @@ import RegisterForm from "@/components/registerform";
 
 import { fetchRemoteSources, register } from "@/util/data";
 
-import { authorizeurl, registerurl, fetch, doLogout } from "@/util/auth";
+import { authorizeurl, fetch, doLogout } from "@/util/auth";
 
 export default {
   name: "Register",
diff --git a/src/views/User.vue b/src/views/User.vue
index a648df7..b5882a9 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -1,95 +1,99 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
+    <nav class="mb-4 bg-grey-light rounded font-sans w-full">
+      <ol class="list-reset flex text-grey-dark">
         <li>
           <a>user</a>
         </li>
+        <li>
+          <span class="mx-2">/</span>
+        </li>
         <li>
           <router-link :to="ownerLink('user', username)">{{username}}</router-link>
         </li>
-      </ul>
+      </ol>
     </nav>
 
-    <div class="name">
-      <span class="is-size-3">{{username}}</span>
-      <div class="is-pulled-right">
-        <createprojectbutton v-on:click="goToCreate($event)"/>
-      </div>
+    <div class="mb-8 flex justify-between">
+      <span class="text-3xl">{{username}}</span>
+      <createprojectbutton v-on:click="goToCreate($event)"/>
     </div>
 
-    <div class="tabs">
-      <ul>
-        <li :class="[{ 'is-active': $route.name === 'user projects' || $route.name === 'user' }]">
+    <div class="flex justify-between">
+      <ul class="flex-grow tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name === 'user projects' || $route.name === 'user' }]"
+        >
           <router-link :to="ownerProjectsLink('user', username)">
-            <span class="icon is-small">
-              <i class="mdi mdi-home"/>
-            </span>
+            <i class="mr-1 mdi mdi-home"/>
             <span>Projects</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name === 'user local runs' }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name === 'user local runs' }]"
+        >
           <router-link :to="userLocalRunsLink(username)">
-            <span class="icon is-small">
-              <i class="mdi mdi-run-fast"/>
-            </span>
+            <i class="mr-1 mdi mdi-run-fast"/>
             <span>Local Runs</span>
           </router-link>
         </li>
-        <li
-          v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
-          :class="[{ 'is-active': $route.name === 'user local run' }]"
-        >
+        <li v-if="$route.name === 'user local run' || $route.name == 'user local run task'">
           <tabarrow/>
         </li>
         <li
+          class="tab-element"
           v-if="$route.name === 'user local run' || $route.name == 'user local run task'"
-          :class="[{ 'is-active': $route.name === 'user local run' }]"
+          :class="[{ 'tab-element-selected': $route.name === 'user local run' }]"
         >
           <router-link :to="userLocalRunLink(username, $route.params.runid)">
-            <p v-if="run">
+            <span v-if="run">
               Run
               <strong>#{{run.counter}}</strong>
-            </p>
+            </span>
           </router-link>
         </li>
-        <li
-          v-if="$route.name === 'user local run task'"
-          :class="[{ 'is-active': $route.name === 'user local run' }]"
-        >
+        <li v-if="$route.name === 'user local run task'">
           <tabarrow/>
         </li>
-        <li v-if="$route.name == 'user local run task'" class="is-active">
+        <li
+          class="tab-element"
+          v-if="$route.name == 'user local run task'"
+          :class="[{ 'tab-element-selected': $route.name === 'user local run task' }]"
+        >
           <router-link
             :to="userLocalRunTaskLink(username, $route.params.runid, $route.params.taskid)"
           >
-            <p v-if="run">
+            <span v-if="run">
               Task
               <strong>{{run.tasks[$route.params.taskid].name}}</strong>
-            </p>
+            </span>
           </router-link>
         </li>
       </ul>
-      <ul class="is-right">
-        <li :class="[{ 'is-active': $route.name.endsWith('user project group settings') }]">
+      <ul class="flex tab">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]"
+        >
           <router-link :to="projectGroupSettingsLink('user', username, [])">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mr-1 mdi mdi-settings"/>
             <span>Root Project Group Settings</span>
           </router-link>
         </li>
-        <li :class="[{ 'is-active': $route.name.endsWith('user settings') }]">
+        <li
+          class="tab-element"
+          :class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]"
+        >
           <router-link :to="ownerSettingsLink('user', username)">
-            <span class="icon is-small">
-              <i class="mdi mdi-settings"/>
-            </span>
+            <i class="mr-1 mdi mdi-settings"/>
             <span>User Settings</span>
           </router-link>
         </li>
       </ul>
     </div>
-    <router-view></router-view>
+    <router-view class="mt-8"></router-view>
   </div>
 </template>
 
@@ -161,10 +165,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/css/_variables.scss";
-
-.name {
-  padding-left: 5px;
-  margin-bottom: 25px;
-}
 </style>
\ No newline at end of file
diff --git a/tailwind.js b/tailwind.js
new file mode 100644
index 0000000..fd43fd9
--- /dev/null
+++ b/tailwind.js
@@ -0,0 +1,61 @@
+module.exports = {
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: '2rem',
+      },
+      borderWidth: {
+        default: '1px',
+        '0': '0',
+        '2': '2px',
+        '4': '4px',
+        '5': '5px',
+        '6': '6px',
+      },
+      spacing: {
+        px: '1px',
+        '2px': '2px',
+        '3px': '3px',
+        '0': '0',
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '5': '1.25rem',
+        '6': '1.5rem',
+        '8': '2rem',
+        '10': '2.5rem',
+        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+        '32': '8rem',
+        '40': '10rem',
+        '48': '12rem',
+        '56': '14rem',
+        '64': '16rem',
+      },
+      colors: {
+        dark: '#4a4a4a',
+      }
+    }
+  },
+  variants: {
+    backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
+    borderColor: ['responsive', 'hover', 'focus', 'disabled'],
+    boxShadow: ['responsive', 'hover', 'focus', 'disabled'],
+    cursor: ['responsive', 'disabled'],
+    opacity: ['responsive', 'disabled'],
+    textColor: ['responsive', 'hover', 'focus', 'disabled'],
+  },
+  plugins: [
+    function ({ addVariant, e }) {
+      addVariant('disabled', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`disabled${separator}${className}`)}:disabled`
+        })
+      })
+    }
+  ]
+}