diff --git a/package-lock.json b/package-lock.json
index d81a3777..b9379e25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2500,6 +2500,12 @@
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
       "integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
     },
+    "bulmaswatch": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/bulmaswatch/-/bulmaswatch-0.7.1.tgz",
+      "integrity": "sha1-l2bQjQAQcfvOimakZ3VZGFs3r+8=",
+      "dev": true
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -5268,8 +5274,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -5279,8 +5284,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5397,8 +5401,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5410,7 +5413,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5536,8 +5538,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5549,7 +5550,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5671,7 +5671,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",
diff --git a/package.json b/package.json
index 75cd5154..b42b5b1b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@vue/cli-plugin-eslint": "^3.0.1",
     "@vue/cli-service": "^3.0.1",
     "axios": "^0.18.0",
+    "bulmaswatch": "^0.7.1",
     "i": "^0.3.6",
     "node-sass": "^4.9.3",
     "npm": "^6.4.1",
diff --git a/src/App.vue b/src/App.vue
index 3de0e2bf..224b6b1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -142,89 +142,6 @@
 </script>
 
 <style lang="scss">
-	@import url('/fonts/fonts.css');
-
-	*, *:focus, *:active{
-		outline: none;
-	}
-
-	body {
-		background: #f5f5f5;
-		min-height: 100vh;
-	}
-
-	h1,h2,h3,h4,h5,h6{
-		font-family: 'Quicksand', sans-serif;
-		font-weight: 400 !important;
-	}
-
-	/* spinner */
-	.fullscreen-loader-wrapper {
-		position: fixed;
-		background: rgba(250,250,250,0.8);
-		z-index: 5;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-
-		position: absolute;
-		width: 78%;
-		height: 100%;
-		margin: -1em auto;
-	}
-
-	.full-loader-wrapper{
-		background: rgba(250,250,250,0.8);
-
-		position: absolute;
-		width: 78%;
-		height: 100%;
-		margin: -1em auto;
-	}
-
-	.half-circle-spinner, .half-circle-spinner * {
-		box-sizing: border-box;
-	}
-
-	.half-circle-spinner {
-		width: 60px;
-		height: 60px;
-		border-radius: 100%;
-		position: relative;
-		left: calc(50% - 30px);
-		top: calc(50% - 30px);
-	}
-
-	.half-circle-spinner .circle {
-		content: "";
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		border-radius: 100%;
-		border: calc(60px / 10) solid transparent;
-	}
-
-	.half-circle-spinner .circle.circle-1 {
-		border-top-color: #4CAF50;
-		animation: half-circle-spinner-animation 1s infinite;
-	}
-
-	.half-circle-spinner .circle.circle-2 {
-		border-bottom-color: #4CAF50;
-		animation: half-circle-spinner-animation 1s infinite alternate;
-	}
-
-	@keyframes half-circle-spinner-animation {
-		0% {
-			transform: rotate(0deg);
-
-		}
-		100%{
-			transform: rotate(360deg);
-		}
-	}
-
 	/* Logout-icon */
 	.logout-icon {
 		padding-right: 2em !important;
diff --git a/src/main.js b/src/main.js
index 8c251a01..5380bac4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import auth from './auth'
 
-import '../node_modules/bulma/bulma.sass'
+import './vikunja.scss'
 
 Vue.config.productionTip = false
 
diff --git a/src/vikunja.scss b/src/vikunja.scss
new file mode 100644
index 00000000..bfe968d9
--- /dev/null
+++ b/src/vikunja.scss
@@ -0,0 +1,90 @@
+*, *:hover, *:active, *:focus{
+  outline: none;
+}
+
+@import '../node_modules/bulmaswatch/lumen/variables';
+@import "../node_modules/bulma/bulma";
+@import '../node_modules/bulmaswatch/lumen/overrides';
+
+@import url('/fonts/fonts.css');
+
+*, *:focus, *:active{
+  outline: none;
+}
+
+body {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+h1,h2,h3,h4,h5,h6{
+  font-family: 'Quicksand', sans-serif;
+  font-weight: 400 !important;
+}
+
+/* spinner */
+.fullscreen-loader-wrapper {
+  position: fixed;
+  background: rgba(250,250,250,0.8);
+  z-index: 5;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  position: absolute;
+  width: 78%;
+  height: 100%;
+  margin: -1em auto;
+}
+
+.full-loader-wrapper{
+  background: rgba(250,250,250,0.8);
+
+  position: absolute;
+  width: 78%;
+  height: 100%;
+  margin: -1em auto;
+}
+
+.half-circle-spinner, .half-circle-spinner * {
+  box-sizing: border-box;
+}
+
+.half-circle-spinner {
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+  position: relative;
+  left: calc(50% - 30px);
+  top: calc(50% - 30px);
+}
+
+.half-circle-spinner .circle {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: calc(60px / 10) solid transparent;
+}
+
+.half-circle-spinner .circle.circle-1 {
+  border-top-color: #4CAF50;
+  animation: half-circle-spinner-animation 1s infinite;
+}
+
+.half-circle-spinner .circle.circle-2 {
+  border-bottom-color: #4CAF50;
+  animation: half-circle-spinner-animation 1s infinite alternate;
+}
+
+@keyframes half-circle-spinner-animation {
+  0% {
+    transform: rotate(0deg);
+
+  }
+  100%{
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file