From 5dcb1dd449e05ddd12be31e3b0f2fc7cba544b78 Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Thu, 21 Oct 2021 19:11:17 +0000
Subject: [PATCH] feature/move-styles-to-components (#874)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/874
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 src/App.vue                                   |  30 ++
 src/components/home/contentAuth.vue           |  71 +++
 src/components/home/contentLinkShare.vue      |  31 ++
 src/components/home/contentNoAuth.vue         |  14 +
 src/components/home/navigation.vue            | 288 ++++++++++-
 src/components/home/topNavigation.vue         | 149 ++++++
 src/components/home/update.vue                |  39 ++
 src/components/input/button.vue               |  44 +-
 src/components/input/colorPicker.vue          |  53 +-
 src/components/input/datepicker.vue           |  71 +++
 src/components/input/editor.vue               |   6 +-
 src/components/input/fancycheckbox.vue        |  82 ++-
 src/components/input/multiselect.vue          | 128 +++++
 src/components/list/partials/list-card.vue    | 129 +++++
 src/components/migrator/migration.vue         |  82 +++
 src/components/misc/Done.vue                  |  55 ++
 src/components/misc/api-config.vue            |  15 +
 src/components/misc/card.vue                  |  22 +
 src/components/misc/legal.vue                 |   9 +
 src/components/modal/modal.vue                |   2 +-
 .../notifications/notifications.vue           | 110 ++++
 .../quick-actions/quick-actions.vue           |  67 ++-
 src/components/sharing/linkSharing.vue        |   7 +
 src/components/sharing/userTeam.vue           |   2 +-
 src/components/tasks/edit-task.vue            |  33 ++
 src/components/tasks/gantt-component.vue      | 195 ++++++++
 src/components/tasks/partials/attachments.vue | 134 +++++
 src/components/tasks/partials/comments.vue    |  46 ++
 src/components/tasks/partials/defer-task.vue  |  59 +++
 .../tasks/partials/editAssignees.vue          |  30 ++
 src/components/tasks/partials/heading.vue     |  12 +-
 src/components/tasks/partials/kanban-card.vue | 157 +++++-
 src/components/tasks/partials/labels.vue      |   8 +-
 src/components/tasks/partials/listSearch.vue  |   6 +
 .../tasks/partials/relatedTasks.vue           |  74 ++-
 src/components/tasks/partials/reminders.vue   |  22 +
 .../tasks/partials/singleTaskInList.vue       | 149 +++++-
 src/main.ts                                   |   2 -
 src/styles/components/_all.scss               |  25 -
 src/styles/components/_index.scss             |   6 +
 src/styles/components/api-config.scss         |  12 -
 src/styles/components/attachments.scss        | 105 ----
 src/styles/components/base/_all.scss          |   5 -
 src/styles/components/base/card.scss          |  27 -
 src/styles/components/base/fancycheckbox.scss |  75 ---
 src/styles/components/base/multiselect.scss   | 153 ------
 src/styles/components/color-picker.scss       |  48 --
 src/styles/components/comments.scss           |  40 --
 src/styles/components/datepicker.scss         |  68 ---
 src/styles/components/gantt.scss              | 251 ----------
 src/styles/components/kanban.scss             | 328 ------------
 src/styles/components/keyboard-shortcuts.scss |  13 -
 src/styles/components/labels.scss             |   2 +
 src/styles/components/legal.scss              |   6 -
 src/styles/components/list-backgrounds.scss   |  84 ----
 src/styles/components/list.scss               | 206 +-------
 src/styles/components/migrator.scss           |  94 ----
 src/styles/components/namespaces.scss         |  49 +-
 src/styles/components/notifications.scss      | 107 ----
 src/styles/components/quick-actions.scss      |  61 ---
 src/styles/components/reminders.scss          |  19 -
 src/styles/components/switch-view.scss        |  43 --
 src/styles/components/table-view.scss         |  21 -
 src/styles/components/task.scss               | 240 +--------
 src/styles/components/taskRelations.scss      |  45 --
 src/styles/components/tasks.scss              | 363 ++------------
 src/styles/components/teams.scss              |  26 -
 src/styles/components/{base => }/tooltip.scss |   2 +
 src/styles/{theme => }/fonts.scss             |   0
 src/styles/global.scss                        |  17 +
 src/styles/theme/_all.scss                    |  11 -
 src/styles/theme/_index.scss                  |  11 +
 src/styles/theme/background.scss              |  12 +-
 src/styles/theme/content.scss                 |  69 +--
 src/styles/theme/form.scss                    |  57 +--
 src/styles/theme/link-share.scss              |  61 +--
 src/styles/theme/loading.scss                 |  54 +-
 src/styles/theme/navigation.scss              | 473 ++----------------
 src/styles/theme/notification.scss            |   6 +-
 src/styles/theme/offline.scss                 |  23 -
 .../base => theme}/scrollbars.scss            |   5 +
 src/styles/theme/theme.scss                   |  46 +-
 src/styles/theme/update-notification.scss     |  40 --
 src/styles/theme/variables-derived.scss       |   2 -
 src/styles/{utilities => }/transitions.scss   |   0
 src/styles/utilities/_all.scss                |   2 -
 src/styles/utilities/animations.scss          |  25 -
 src/styles/variables/_all.scss                |   6 -
 src/styles/variables/_index.scss              |   8 +-
 src/styles/variables/variables.scss           |  31 +-
 src/styles/vikunja.scss                       |   3 -
 src/views/Home.vue                            |  12 +
 src/views/list/ShowList.vue                   |  51 ++
 src/views/list/settings/background.vue        |  83 +++
 src/views/list/views/Gantt.vue                |  66 ++-
 src/views/list/views/Kanban.vue               | 169 +++++++
 src/views/list/views/List.vue                 |  51 ++
 src/views/list/views/Table.vue                |  22 +-
 src/views/migrator/Migrate.vue                |  17 +
 src/views/namespaces/ListNamespaces.vue       |  46 ++
 src/views/tasks/ShowTasks.vue                 |  27 +
 src/views/tasks/TaskDetailView.vue            | 233 +++++++++
 src/views/teams/EditTeam.vue                  |  10 +
 src/views/teams/ListTeams.vue                 |  29 ++
 src/views/user/Login.vue                      |  12 +-
 105 files changed, 3451 insertions(+), 3296 deletions(-)
 create mode 100644 src/components/misc/Done.vue
 delete mode 100644 src/styles/components/_all.scss
 create mode 100644 src/styles/components/_index.scss
 delete mode 100644 src/styles/components/api-config.scss
 delete mode 100644 src/styles/components/attachments.scss
 delete mode 100644 src/styles/components/base/_all.scss
 delete mode 100644 src/styles/components/base/card.scss
 delete mode 100644 src/styles/components/base/fancycheckbox.scss
 delete mode 100644 src/styles/components/base/multiselect.scss
 delete mode 100644 src/styles/components/color-picker.scss
 delete mode 100644 src/styles/components/comments.scss
 delete mode 100644 src/styles/components/datepicker.scss
 delete mode 100644 src/styles/components/gantt.scss
 delete mode 100644 src/styles/components/kanban.scss
 delete mode 100644 src/styles/components/keyboard-shortcuts.scss
 delete mode 100644 src/styles/components/legal.scss
 delete mode 100644 src/styles/components/list-backgrounds.scss
 delete mode 100644 src/styles/components/migrator.scss
 delete mode 100644 src/styles/components/notifications.scss
 delete mode 100644 src/styles/components/quick-actions.scss
 delete mode 100644 src/styles/components/reminders.scss
 delete mode 100644 src/styles/components/switch-view.scss
 delete mode 100644 src/styles/components/table-view.scss
 delete mode 100644 src/styles/components/taskRelations.scss
 delete mode 100644 src/styles/components/teams.scss
 rename src/styles/components/{base => }/tooltip.scss (91%)
 rename src/styles/{theme => }/fonts.scss (100%)
 create mode 100644 src/styles/global.scss
 delete mode 100644 src/styles/theme/_all.scss
 create mode 100644 src/styles/theme/_index.scss
 delete mode 100644 src/styles/theme/offline.scss
 rename src/styles/{components/base => theme}/scrollbars.scss (78%)
 delete mode 100644 src/styles/theme/update-notification.scss
 delete mode 100644 src/styles/theme/variables-derived.scss
 rename src/styles/{utilities => }/transitions.scss (100%)
 delete mode 100644 src/styles/utilities/_all.scss
 delete mode 100644 src/styles/utilities/animations.scss
 delete mode 100644 src/styles/variables/_all.scss
 delete mode 100644 src/styles/vikunja.scss

diff --git a/src/App.vue b/src/App.vue
index d2690c260..dec28560a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -117,3 +117,33 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style lang="scss">
+@import '@/styles/global.scss';
+</style>
+
+<style lang="scss" scoped>
+.offline {
+  background: url('@/assets/llama-nightscape.jpg') no-repeat center;
+  background-size: cover;
+  height: 100vh;
+
+  .offline-message {
+    text-align: center;
+    position: absolute;
+    width: 100vw;
+    bottom: 5vh;
+    color: $white;
+    padding: 0 1rem;
+
+    h1 {
+      font-weight: bold;
+      font-size: 1.5rem;
+      text-align: center;
+      color: $white;
+      font-weight: 700 !important;
+      font-size: 1.5rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index b4b6c5271..d68cdb43f 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -132,3 +132,74 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: calc(100vh - 65px);
+
+  @media screen and (max-width: $tablet) {
+    padding-top: $navbar-height;
+  }
+
+  .app-content {
+    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+    z-index: 2;
+
+    @media screen and (max-width: $tablet) {
+      margin-left: 0;
+      padding-top: 1.5rem;
+      min-height: calc(100vh - 4rem);
+    }
+
+    &.is-menu-enabled {
+      margin-left: $navbar-width;
+
+      @media screen and (max-width: $tablet) {
+        min-width: 100%;
+        margin-left: 0;
+      }
+    }
+
+	&.task\.detail {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+    .card {
+      background: $white;
+    }
+  }
+}
+
+.mobile-overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(250, 250, 250, 0.8);
+	z-index: 5;
+	opacity: 0;
+	transition: all $transition;
+
+	@media screen and (max-width: $tablet) {
+		display: block;
+		opacity: 1;
+	}
+}
+
+.keyboard-shortcuts-button {
+	position: fixed;
+	bottom: calc(1rem - 4px);
+	right: 1rem;
+	z-index: 4500; // The modal has a z-index of 4000
+
+	color: $grey-500;
+	transition: color $transition;
+	
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 24ae436ec..7dff2fbb9 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -42,3 +42,34 @@ export default {
 	}),
 }
 </script>
+
+<style lang="scss" scoped>
+.link-share-container.has-background .view {
+  background: transparent;
+  border: none;
+
+  .logout .button {
+    box-shadow: none;
+  }
+}
+
+.link-share-view {
+  .logo {
+    max-width: 300px;
+    width: 90%;
+    margin: 2rem 0 1.5rem;
+  }
+
+  .column {
+    max-width: 100%;
+  }
+
+  .card {
+    background: $white;
+  }
+
+  .title {
+    text-shadow: 0 0 1rem $white;
+  }
+}
+</style>
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index c60a070bf..b95739067 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/src/components/home/contentNoAuth.vue
@@ -65,3 +65,17 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.no-auth-wrapper {
+  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
+  min-height: 100vh;
+}
+
+.noauth-container {
+  max-width: 450px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index d19b9dae6..e043db6f4 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -275,7 +275,293 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+$navbar-padding: 2rem;
+$vikunja-nav-background: $light-background;
+$vikunja-nav-color: $grey-700;
+$vikunja-nav-selected-width: 0.4rem;
+
+
+.namespace-container {
+	background: $vikunja-nav-background;
+	z-index: 6;
+	color: $vikunja-nav-color;
+	padding: 0;
+	transition: all $transition;
+	position: fixed;
+	bottom: 0;
+	top: $navbar-height;
+	overflow-x: auto;
+	width: $navbar-width;
+
+	padding: 0 0 1rem;
+	left: -147vw;
+	bottom: 0;
+
+	@media screen and (max-width: $tablet) {
+		top: 0;
+		width: 70vw;
+	}
+
+	&.is-active {
+		left: 0;
+	}
+
+	.menu {
+		.menu-label {
+			font-size: 1rem;
+			font-weight: 700;
+			font-weight: bold;
+			font-family: $vikunja-font;
+			color: $vikunja-nav-color;
+			font-weight: 500;
+			min-height: 2.5rem;
+			padding-top: 0;
+			padding-left: $navbar-padding;
+
+			overflow: hidden;
+		}
+
+		.menu-label,
+		.menu-list span.list-menu-link,
+		.menu-list a {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			cursor: pointer;
+
+			.list-menu-title {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				width: 100%;
+			}
+
+			.color-bubble {
+				height: 12px;
+				flex: 0 0 12px;
+			}
+
+			.favorite {
+				margin-left: .25rem;
+				transition: opacity $transition, color $transition;
+				opacity: 0;
+
+				&:hover {
+					color: $orange;
+				}
+
+				&.is-favorite {
+					opacity: 1;
+					color: $orange;
+				}
+			}
+
+			&:hover .favorite {
+				opacity: 1;
+			}
+		}
+
+		.menu-label {
+			.color-bubble {
+				width: 14px !important;
+				height: 14px !important;
+			}
+
+			.is-archived {
+				min-width: 85px;
+			}
+		}
+
+		.namespace-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.menu-label {
+				margin-bottom: 0;
+				flex: 1 1 auto;
+
+				.name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			a:not(.dropdown-item) {
+				color: $vikunja-nav-color;
+				padding: 0 .25rem;
+			}
+
+			:deep(.dropdown-trigger) {
+				padding: .5rem;
+				cursor: pointer;
+			}
+
+			.toggle-lists-icon {
+				svg {
+					transition: all $transition;
+					transform: rotate(90deg);
+					opacity: 1;
+				}
+
+				&.active svg {
+					transform: rotate(0deg);
+					opacity: 0;
+				}
+			}
+
+			&:hover .toggle-lists-icon svg {
+				opacity: 1;
+			}
+
+			&:not(.has-menu) .toggle-lists-icon {
+				padding-right: 1rem;
+			}
+		}
+
+		.menu-label,
+		.nsettings,
+		.menu-list span.list-menu-link,
+		.menu-list a {
+			color: $vikunja-nav-color;
+		}
+
+		.menu-list {
+			li {
+				height: 44px;
+				display: flex;
+				align-items: center;
+
+				&:hover {
+					background: $white;
+				}
+
+				:deep(.dropdown-trigger) {
+					opacity: 0;
+					padding: .5rem;
+					cursor: pointer;
+					transition: $transition;
+				}
+
+				&:hover :deep(.dropdown-trigger) {
+					opacity: 1;
+				}
+
+				&.loader-container.is-loading:after {
+					width: 1.5rem;
+					height: 1.5rem;
+					top: calc(50% - .75rem);
+					left: calc(50% - .75rem);
+					border-width: 2px;
+				}
+			}
+
+			.flip-list-move {
+				transition: transform $transition-duration;
+			}
+
+			.ghost {
+				background: $grey-200;
+
+				* {
+					opacity: 0;
+				}
+			}
+
+			a:hover {
+				background: transparent;
+			}
+
+			span.list-menu-link, li > a {
+				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
+				transition: all 0.2s ease;
+
+				border-radius: 0;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				width: 100%;
+				border-left: $vikunja-nav-selected-width solid transparent;
+
+				.icon {
+					height: 1rem;
+					vertical-align: middle;
+					padding-right: 0.5rem;
+					
+					&.handle {
+						opacity: 0;
+						transition: opacity $transition;
+						margin-right: .25rem;
+						cursor: grab;
+					}
+				}
+				
+				&:hover .icon.handle {
+					opacity: 1;
+				}
+
+				&.router-link-exact-active {
+					color: $primary;
+					border-left: $vikunja-nav-selected-width solid $primary;
+
+					.icon {
+						color: $primary;
+					}
+				}
+
+				&:hover {
+					border-left: $vikunja-nav-selected-width solid $primary;
+				}
+			}
+		}
+
+		.logo {
+			display: none;
+
+			@media screen and (max-width: $tablet) {
+				display: block;
+			}
+		}
+
+		&.namespaces-lists {
+			padding-top: math.div($navbar-padding, 2);
+		}
+
+		&.loader-container.is-loading:after {
+			width: 1.5rem;
+			height: 1.5rem;
+			top: calc(50% - .75rem);
+			left: calc(50% - .75rem);
+			border-width: 2px;
+		}
+
+		.icon {
+			color: $grey-400 !important;
+		}
+	}
+
+	.top-menu {
+		margin-top: math.div($navbar-padding, 2);
+
+		.menu-list {
+			li {
+				font-weight: 500;
+				font-family: $vikunja-font;
+			}
+
+			span.list-menu-link, li > a {
+				padding-left: 2rem;
+				display: inline-block;
+				
+				.icon {
+					padding-bottom: .25rem;
+				}
+			}
+		}
+	}
+}
+
 .list-setting-spacer {
 	width: 32px;
 	flex-shrink: 0;
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 8f312e838..063152574 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -149,3 +149,152 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+$vikunja-nav-logo-full-width: 164px;
+
+.navbar {
+	z-index: 4 !important;
+
+	.navbar-brand {
+		display: flex;
+		align-items: center;
+
+		.logo img {
+			width: $vikunja-nav-logo-full-width;
+		}
+	}
+	&.is-dark .navbar-brand > .navbar-item {
+		@media screen and (max-width: $tablet) {
+			margin: 0 auto;
+		}
+	}
+}
+
+.navbar.main-theme {
+	background: $light-background;
+	z-index: 5 !important;
+	justify-content: space-between;
+	align-items: center;
+
+	@media screen and (max-width: $desktop) {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.title {
+		margin: 0;
+		font-size: 1.75rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.navbar-end {
+		margin-left: 0;
+		align-items: center;
+		display: flex;
+	}
+
+	@media screen and (max-width: $tablet) {
+		.navbar-brand {
+			display: none;
+		}
+
+		.user {
+			width: $user-dropdown-width-mobile;
+			display: flex;
+			align-items: center;
+
+			:deep(.dropdown-trigger) {
+				line-height: 1;
+
+				.button {
+					padding: 0 0.25rem;
+					height: 1rem;
+
+					.icon {
+						width: .5rem;
+					}
+				}
+			}
+
+			.username {
+				display: none;
+			}
+		}
+	}
+}
+
+.navbar {
+	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
+	:deep() {
+		.trigger-button {
+			cursor: pointer;
+			color: $grey-400;
+			padding: .5rem;
+			font-size: 1.25rem;
+			position: relative;
+		}
+
+		> * > .trigger-button {
+			width: $navbar-icon-width;
+		}
+	}
+
+	.user {
+		display: flex;
+		align-items: center;
+
+		span {
+			font-family: $vikunja-font;
+		}
+
+		.avatar {
+			border-radius: 100%;
+			vertical-align: middle;
+			height: 40px;
+		}
+
+		:deep(.dropdown-trigger .button) {
+			background: none;
+
+			&:focus:not(:active), &:active {
+				outline: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
+}
+
+.list-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  $edit-icon-width: 1rem;
+
+  @media screen and (min-width: $tablet) {
+    // We need a fixed width for overflowing ellipsis to work
+    --nav-username-width: 0;
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
+  }
+
+  @media screen and (max-width: $tablet) {
+    // We need a fixed width for overflowing ellipsis to work
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  :deep(.dropdown-trigger) {
+    color: $grey-400;
+    margin-left: 1rem;
+    height: 1rem;
+    width: 1rem;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/update.vue b/src/components/home/update.vue
index 1bbb99084..d61070594 100644
--- a/src/components/home/update.vue
+++ b/src/components/home/update.vue
@@ -47,3 +47,42 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.update-notification {
+	margin: 1rem;
+	display: flex;
+	align-items: center;
+	background: $warning;
+	padding: 0 0 0 .5rem;
+	border-radius: $radius;
+	font-size: .9rem;
+	color: $grey-900;
+	justify-content: space-between;
+
+	@media screen and (max-width: $desktop) {
+		position: fixed;
+		bottom: 1rem;
+		margin: 0;
+		width: 450px;
+		left: calc(50vw - 225px);
+	}
+
+	@media screen and (max-width: $tablet) {
+		position: fixed;
+		left: 1rem;
+		right: 1rem;
+		bottom: 1rem;
+		width: auto;
+	}
+
+	p {
+		text-align: center;
+		width: 100%;
+	}
+
+	> * + * {
+		margin-left: .5rem;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index aadfcc9db..57890913b 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -72,4 +72,46 @@ export default {
 		},
 	},
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.button {
+  transition: all $transition;
+  border: 0;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  font-weight: bold;
+  height: $button-height;
+  box-shadow: $shadow-sm;
+
+  &.is-hovered,
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &.fullheight {
+    padding-right: 7px;
+    height: 100%;
+  }
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: $shadow-xs !important;
+  }
+
+  &.is-primary.is-outlined:hover {
+    color: $white;
+  }
+
+  &.is-small {
+    border-radius: $radius;
+  }
+}
+
+.underline-none {
+  text-decoration: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 539a9dcbe..b7cb31827 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -99,4 +99,55 @@ export default {
 		},
 	},
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.color-picker-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+	// reset / see https://stackoverflow.com/a/11471224/15522256
+	input[type="color"] {
+		-webkit-appearance: none;
+		border: none;
+	}
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
+	$PICKER_SIZE: 24px;
+	$BORDER_WIDTH: 1px;
+	.picker {
+		display: grid;
+		width: $PICKER_SIZE;
+		height: $PICKER_SIZE;
+		overflow: hidden;
+		border-radius: 100%;
+		border: $BORDER_WIDTH solid $grey-300;
+		box-shadow: $shadow;
+
+		& > * {
+			grid-row: 1;
+			grid-column: 1;
+		}
+	}
+
+	input.picker__input {
+		padding: 0;
+		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+	}
+
+	.picker__input.is-empty {
+		opacity: 0;
+	}
+	
+	.picker__pattern {
+		pointer-events: none;
+	}
+}
+</style>
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 724764c75..85ecd5513 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -243,3 +243,74 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.datepicker {
+	input.input {
+		display: none;
+	}
+
+	&.disabled a {
+		cursor: default;
+	}
+
+	.datepicker-popup {
+		position: absolute;
+		z-index: 99;
+		width: 320px;
+		background: $white;
+		border-radius: $radius;
+		box-shadow: $shadow;
+
+		@media screen and (max-width: ($tablet)) {
+			width: calc(100vw - 5rem);
+		}
+
+		a:not(.button) {
+			display: flex;
+			align-items: center;
+			padding: 0 .5rem;
+			width: 100%;
+			height: 2.25rem;
+			color: $text;
+			transition: all $transition;
+
+			&:first-child {
+				border-radius: $radius $radius 0 0;
+			}
+
+			&:hover {
+				background: $light;
+			}
+
+			.text {
+				width: 100%;
+				font-size: .85rem;
+				display: flex;
+				justify-content: space-between;
+				padding-right: .25rem;
+
+				.weekday {
+					color: $text-light;
+					text-transform: capitalize;
+				}
+			}
+
+			.icon {
+				width: 2rem;
+				text-align: center;
+			}
+		}
+			
+		a.button {
+			margin: 1rem;
+			width: calc(100% - 2rem);
+		}
+
+		:deep(.flatpickr-calendar) {
+			margin: 0 auto 8px;
+			box-shadow: none;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index a2042db0f..3704a3bc5 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -312,6 +312,8 @@ export default {
 @import './vue-easymde/vue-easymde.css';
 @import 'highlight.js/scss/base16/equilibrium-gray-light';
 
+$editor-border-color: #ddd;
+
 .editor {
 	.clear {
 		clear: both;
@@ -371,7 +373,7 @@ export default {
 			}
 		}
 
-		&:after {
+		&::after {
 			position: absolute;
 			top: 24px;
 			margin-left: -3px;
@@ -396,7 +398,7 @@ ul.actions {
 	li {
 		display: inline-block;
 
-		&:after {
+		&::after {
 			content: '·';
 			padding: 0 .25rem;
 		}
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index d8e162def..c882427b9 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -5,7 +5,6 @@
 			:disabled="disabled || null"
 			:id="checkBoxId"
 			@change="(event) => updateData(event.target.checked)"
-			style="display: none;"
 			type="checkbox"/>
 		<label :for="checkBoxId" class="check">
 			<svg height="18px" viewBox="0 0 18 18" width="18px">
@@ -60,3 +59,84 @@ export default {
 	},
 }
 </script>
+
+
+<style lang="scss" scoped>
+.fancycheckbox {
+  display: inline-block;
+  padding-right: 5px;
+  padding-top: 3px;
+
+	// FIXME: should be a prop
+	&.is-block {
+		margin: .5rem .2rem;
+	}
+}
+
+input[type=checkbox] {
+	display: none;
+}
+
+.check {
+	cursor: pointer;
+	position: relative;
+	margin: auto;
+	width: 18px;
+	height: 18px;
+	-webkit-tap-highlight-color: transparent;
+	transform: translate3d(0, 0, 0);
+}
+
+span {
+	font-size: 0.8rem;
+	vertical-align: top;
+	padding-left: .5rem;
+}
+
+svg {
+	position: relative;
+	z-index: 1;
+	fill: none;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke: #c8ccd4;
+	stroke-width: 1.5;
+	transform: translate3d(0, 0, 0);
+	transition: all 0.2s ease;
+}
+
+.check:hover svg {
+	stroke: $primary;
+}
+
+.is-disabled .check:hover svg {
+	stroke: #c8ccd4;
+}
+
+path {
+	stroke-dasharray: 60;
+	stroke-dashoffset: 0;
+}
+
+polyline {
+	stroke-dasharray: 22;
+	stroke-dashoffset: 66;
+}
+
+input[type=checkbox]:checked + .check {
+	svg {
+		stroke: $primary;
+	}
+
+	path {
+		stroke-dashoffset: 60;
+		transition: all 0.3s linear;
+	}
+
+	polyline {
+		stroke-dashoffset: 42;
+		transition: all 0.2s linear;
+		transition-delay: 0.15s;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index f904d483a..bdd0dc891 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -365,3 +365,131 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.multiselect {
+	width: 100%;
+	position: relative;
+
+	.control.is-loading::after {
+		top: .75rem;
+	}
+
+	&.has-search-results .input-wrapper {
+		border-radius: $radius $radius 0 0;
+		border-color: $primary !important;
+		background: $white !important;
+
+		&, &:focus-within {
+			border-bottom-color: $grey-200 !important;
+		}
+	}
+
+	.input-wrapper {
+		padding: 0;
+		background: $white !important;
+		border-color: $grey-200 !important;
+		flex-wrap: wrap;
+		height: auto;
+
+		&:hover {
+			border-color: $grey-300 !important;
+		}
+
+		.input {
+			display: flex;
+			max-width: 100%;
+			width: 100%;
+			align-items: center;
+			border: none !important;
+			background: transparent;
+			height: auto;
+
+			&::placeholder {
+				font-style: normal !important;
+			}
+		}
+
+		&.has-multiple .input {
+			max-width: 250px;
+
+			input {
+				padding-left: 0;
+			}
+		}
+
+		&:focus-within {
+			border-color: $primary !important;
+			background: $white !important;
+		}
+
+		.loader {
+			margin: 0 .5rem;
+		}
+	}
+
+	.search-results {
+		background: $white;
+		border-radius: 0 0 $radius $radius;
+		border: 1px solid $primary;
+		border-top: none;
+
+		max-height: 50vh;
+		overflow-x: auto;
+		position: absolute;
+		z-index: 100;
+		max-width: 100%;
+		min-width: 100%;
+
+		&-inline {
+			position: static;
+		}
+
+		button {
+			background: transparent;
+			display: block;
+			text-align: left;
+			box-shadow: none;
+			border-radius: 0;
+			text-transform: none;
+			font-family: $family-sans-serif;
+			font-weight: normal;
+			padding: .5rem 0;
+			border: none;
+			cursor: pointer;
+
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			overflow: hidden;
+
+			.search-result {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				padding: .5rem .75rem;
+			}
+
+			.hint-text {
+				font-size: .75rem;
+				color: transparent;
+				transition: color $transition;
+				padding: 0 .5rem;
+			}
+
+			&:focus, &:hover {
+				background: $grey-100;
+				box-shadow: none !important;
+
+				.hint-text {
+					color: $text;
+				}
+			}
+
+			&:active {
+				background: $grey-200;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index f54f11178..94d03f863 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -81,3 +81,132 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-card {
+  cursor: pointer;
+  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+  height: $list-height;
+  background: $white;
+  margin: 0 $list-spacing $list-spacing 0;
+  padding: 1rem;
+  border-radius: $radius;
+  box-shadow: $shadow-sm;
+  transition: box-shadow $transition;
+
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: $shadow-xs !important;
+  }
+
+  @media screen and (min-width: $widescreen) {
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
+    $lists-per-row: 3;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    $lists-per-row: 2;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $mobile) {
+    $lists-per-row: 1;
+    & {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  .is-archived-container {
+    width: 100%;
+    text-align: right;
+
+    .is-archived {
+      font-size: .75rem;
+      float: left;
+    }
+  }
+
+  .title {
+    align-self: flex-end;
+    font-family: $vikunja-font;
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: $text;
+    width: 100%;
+    margin-bottom: 0;
+    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  &.has-light-text .title {
+    color: $light;
+  }
+
+  &.has-background {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .title {
+      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
+      color: $white;
+    }
+  }
+
+  .favorite {
+    transition: opacity $transition, color $transition;
+    opacity: 0;
+
+    &:hover {
+      color: $orange;
+    }
+
+    &.is-archived {
+      display: none;
+    }
+
+    &.is-favorite {
+      display: inline-block;
+      opacity: 1;
+      color: $orange;
+    }
+  }
+
+  &:hover .favorite {
+    opacity: 1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue
index 865924c06..235df9cab 100644
--- a/src/components/migrator/migration.vue
+++ b/src/components/migrator/migration.vue
@@ -171,3 +171,85 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.migration-in-progress-container {
+  max-width: 400px;
+  margin: 4rem auto 0;
+  text-align: center;
+}
+
+.migration-in-progress {
+  text-align: center;
+  display: flex;
+  max-width: 400px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  img {
+    display: block;
+    max-height: 100px;
+  }
+
+  .progress-dots {
+    height: 40px;
+    width: 140px;
+    overflow: visible;
+
+    span {
+      transition: all 500ms ease;
+      background: $grey-500;
+      height: 10px;
+      width: 10px;
+      display: inline-block;
+      border-radius: 10px;
+      animation: wave 2s ease infinite;
+      margin-right: 5px;
+
+      &:nth-child(1) {
+        animation-delay: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 100ms;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 200ms;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 300ms;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 400ms;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 500ms;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 600ms;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 700ms;
+      }
+    }
+  }
+
+  @keyframes wave {
+    0%, 40%, 100% {
+      transform: translate(0, 0);
+      background-color: $primary;
+    }
+    10% {
+      transform: translate(0, -15px);
+      background-color: $primary-dark;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/misc/Done.vue b/src/components/misc/Done.vue
new file mode 100644
index 000000000..4dcdf0380
--- /dev/null
+++ b/src/components/misc/Done.vue
@@ -0,0 +1,55 @@
+<template>
+    <div
+			v-if="isDone"
+			class="is-done"
+			:class="{ 'is-done--small': variant === variants.SMALL }"
+		>
+			{{ $t('task.attributes.done') }}
+		</div>
+</template>
+
+<script>
+const VARIANTS = {
+	DEFAULT: 'default',
+	SMALL: 'small',
+}
+
+export default {
+	name: 'Done',
+
+	data() {
+		return {
+			variants: VARIANTS,
+		}
+	},
+
+	props: {
+		isDone: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: VARIANTS.DEFAULT,
+			validator: (variant) => Object.values(VARIANTS).includes(variant),
+		},
+	},
+}
+</script>
+
+
+<style lang="scss" scoped>
+.is-done {
+  background: $green;
+  color: $white;
+  padding: .5rem;
+  font-weight: bold;
+  line-height: 1;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.is-done--small {
+	padding: .2rem .3rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 02be79ecc..a60f0bb58 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -197,3 +197,18 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.api-config {
+  margin-bottom: .75rem;
+}
+
+.api-url-info {
+  font-size: .9rem;
+  text-align: right;
+
+  span.url {
+    border-bottom: 1px dashed $primary;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index d2cd5b633..8db04b3a6 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -54,3 +54,25 @@ export default {
 	emits: ['close'],
 }
 </script>
+
+<style lang="scss" scoped>
+.card {
+  background-color: $white;
+  border-radius: $radius;
+  margin-bottom: 1rem;
+  border: 1px solid $grey-200;
+  box-shadow: $shadow-sm;
+}
+
+.card-header {
+  box-shadow: none;
+  border-bottom: 1px solid $grey-200;
+  border-radius: $radius $radius 0 0;
+}
+
+// FIXME: should maybe be merged somehow with modal
+:deep(.modal-card-foot) {
+  background-color: $grey-50;
+  border-top: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index c610c5790..ff74921ac 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -17,3 +17,12 @@ export default {
 	}),
 }
 </script>
+
+<style lang="scss" scoped>
+.legal-links {
+  margin-top: 1rem;
+  text-align: right;
+  color: $grey-300;
+  font-size: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 78ce84edb..0f05b2190 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -181,7 +181,7 @@ export default {
 .hint-modal {
 	z-index: 4600;
 
-	::v-deep.card-content {
+	:deep(.card-content) {
 		text-align: left;
 
 		.info {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index bd185511c..b67d8816a 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -133,3 +133,113 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.notifications {
+	width: $navbar-icon-width;
+
+	.unread-indicator {
+		position: absolute;
+		top: .75rem;
+		right: 1.15rem;
+		width: .75rem;
+		height: .75rem;
+
+		background: $primary;
+		border-radius: 100%;
+		border: 2px solid $white;
+	}
+
+	.notifications-list {
+		position: fixed;
+		right: 1rem;
+		margin-top: 1rem;
+		max-height: 400px;
+		overflow-y: auto;
+
+		background: $white;
+		width: 350px;
+		max-width: calc(100vw - 2rem);
+		padding: .75rem .25rem;
+		border-radius: $radius;
+		box-shadow: $shadow-sm;
+		font-size: .85rem;
+
+		@media screen and (max-width: $tablet) {
+			max-height: calc(100vh - 1rem - #{$navbar-height});
+		}
+
+		.head {
+			font-family: $vikunja-font;
+			font-size: 1rem;
+			padding: .5rem;
+		}
+
+		.single-notification {
+			display: flex;
+			align-items: center;
+			padding: 0.25rem 0;
+
+			transition: background-color $transition;
+
+			&:hover {
+				background: $grey-100;
+				border-radius: $radius;
+			}
+
+			.read-indicator {
+				width: .35rem;
+				height: .35rem;
+				background: $primary;
+				border-radius: 100%;
+				margin-left: .5rem;
+
+				&.read {
+					background: transparent;
+				}
+			}
+
+			.user {
+				display: inline-flex;
+				align-items: center;
+				width: auto;
+				margin: 0 .5rem;
+
+				span {
+					font-family: $family-sans-serif;
+				}
+
+				.avatar {
+					height: 16px;
+				}
+
+				img {
+					margin-right: 0;
+				}
+			}
+
+			.created {
+				color: $grey-400;
+			}
+
+			&:last-child {
+				margin-bottom: .25rem;
+			}
+
+			a {
+				color: $grey-800;
+			}
+		}
+
+		.nothing {
+			text-align: center;
+			padding: 1rem 0;
+			color: $grey-500;
+
+			.explainer {
+				font-size: .75rem;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 51fc8daa1..93388d86b 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -463,16 +463,75 @@ export default {
 <style lang="scss" scoped>
 .quick-actions {
 	// FIXME: changed position should be an option of the modal
-	::v-deep.modal-content {
+	:deep(.modal-content) {
 		top: 3rem;
 		transform: translate(-50%, 0);
 	}
+
+	.action-input {
+		display: flex;
+		align-items: center;
+
+		.input {
+			border: 0;
+			font-size: 1.5rem;
+		}
+
+		&.has-active-cmd .input {
+			padding-left: .5rem;
+		}
+
+		.active-cmd {
+			font-size: 1.25rem;
+			margin-left: .5rem;
+		}
+	}
+
+	.results {
+		text-align: left;
+		width: 100%;
+		color: $grey-800;
+
+		.result {
+			&-title {
+				background: $grey-50;
+				padding: .5rem;
+				display: block;
+				font-size: .75rem;
+			}
+
+			&-items {
+				button {
+					font-size: .9rem;
+					width: 100%;
+					background: transparent;
+					text-align: left;
+					box-shadow: none;
+					border-radius: 0;
+					text-transform: none;
+					font-family: $family-sans-serif;
+					font-weight: normal;
+					padding: .5rem .75rem;
+					border: none;
+					cursor: pointer;
+
+					&:focus, &:hover {
+						background: $grey-50;
+						box-shadow: none !important;
+					}
+
+					&:active {
+						background: $grey-100;
+					}
+				}
+			}
+		}
+	}
 }
 
 // HACK:
 // FIXME:
-.modal-container-smaller ::v-deep.hint-modal .modal-container {
+.modal-container-smaller :deep(.hint-modal .modal-container) {
 	height: calc(100vh - 5rem);
 }
-
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 6b0dee341..d07577ded 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -258,3 +258,10 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+// FIXME: I think this is not needed
+.sharables-list:not(.card-content) {
+  overflow-y: auto
+}
+</style>
\ No newline at end of file
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index f6b7cb134..007cfaa68 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -71,7 +71,7 @@
 					<div class="select">
 						<select
 							@change="toggleType(s)"
-							class="button mr-2"
+							class="mr-2"
 							v-model="selectedRight[s.id]"
 						>
 							<option
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 53459736e..d032fc94c 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -142,3 +142,36 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.priority-select {
+	.select,
+	select {
+		width: 100%;
+	}
+}
+
+ul.assingees {
+	list-style: none;
+	margin: 0;
+
+	li {
+		padding: 0.5rem 0.5rem 0;
+
+		a {
+			float: right;
+			color: $red;
+			transition: all $transition;
+		}
+	}
+}
+
+.tag {
+	margin-right: 0.5rem;
+	margin-bottom: 0.5rem;
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 8981ac10e..874977dc7 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -445,3 +445,198 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+$gantt-border: 1px solid $grey-200;
+$gantt-vertical-border-color: $grey-100;
+
+.gantt-chart {
+	overflow-x: auto;
+	border-top: 1px solid $grey-200;
+
+	.dates {
+		display: flex;
+		text-align: center;
+
+		.months {
+			display: flex;
+
+			.month {
+				padding: 0.5rem 0 0;
+				border-right: $gantt-border;
+				font-family: $vikunja-font;
+				font-weight: bold;
+
+				&:last-child {
+					border-right: none;
+				}
+
+				.days {
+					display: flex;
+
+					.day {
+						padding: 0.5rem 0;
+						font-weight: normal;
+
+						&.today {
+							background: $primary;
+							color: $white;
+							border-radius: 5px 5px 0 0;
+							font-weight: bold;
+						}
+
+						.theday {
+							padding: 0 .5rem;
+							width: 100%;
+							display: block;
+						}
+
+						.weekday {
+							font-size: 0.8rem;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.tasks {
+		max-width: unset !important;
+		margin: 0;
+		border-top: $gantt-border;
+
+		.row {
+			height: 45px;
+
+			.task {
+				display: inline-block;
+				border: 2px solid $primary;
+				font-size: 0.85rem;
+				margin: 0.5rem;
+				border-radius: 6px;
+				padding: 0.25rem 0.5rem;
+				cursor: grab;
+				position: relative;
+				height: 31px !important;
+
+				-webkit-touch-callout: none; // iOS Safari
+				user-select: none; // Non-prefixed version
+
+				&.is-current-edit {
+					border-color: $orange !important;
+				}
+
+				&.has-light-text {
+					color: $light;
+
+					&.done span:after {
+						border-top: 1px solid $light;
+					}
+
+					.edit-toggle {
+						color: $light;
+					}
+				}
+
+				&.has-dark-text {
+					color: $text;
+
+					&.done span:after {
+						border-top: 1px solid $dark;
+					}
+
+					.edit-toggle {
+						color: $text;
+					}
+				}
+
+				&.done span {
+					position: relative;
+
+					&::after {
+						content: '';
+						position: absolute;
+						right: 0;
+						left: 0;
+						top: 57%;
+					}
+				}
+
+				span:not(.high-priority) {
+					max-width: calc(100% - 20px);
+					display: inline-block;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+
+					&.has-high-priority {
+						max-width: calc(100% - 90px);
+					}
+
+					&.has-not-so-high-priority {
+						max-width: calc(100% - 70px);
+					}
+
+					&.has-super-high-priority {
+						max-width: calc(100% - 111px);
+					}
+
+					&.icon {
+						width: 10px;
+						text-align: center;
+					}
+				}
+
+				.high-priority {
+					margin: 0 0 0 .5rem;
+					vertical-align: bottom;
+				}
+
+				.edit-toggle {
+					float: right;
+					cursor: pointer;
+					margin-right: 4px;
+				}
+
+				&.nodate {
+					border: 2px dashed $grey-300;
+					background: $grey-100;
+				}
+
+				&:active {
+					cursor: grabbing;
+				}
+			}
+		}
+	}
+
+	.taskedit {
+		position: fixed;
+		min-height: 0;
+		top: 10vh;
+		right: 10vw;
+		z-index: 5;
+
+		// FIXME: should be an option of the card, e.g. overflow
+		:deep(.card-content) {
+			max-height: 60vh;
+			overflow-y: auto;
+		}
+	}
+
+	.add-new-task {
+		padding: 1rem .7rem .4rem .7rem;
+		display: flex;
+		max-width: 450px;
+
+		.input {
+			margin-right: .7rem;
+			font-size: .8rem;
+		}
+
+		.button {
+			font-size: .68rem;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index ba03e7b22..17cd98e60 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -249,3 +249,137 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.attachments {
+  input[type=file] {
+    display: none;
+  }
+
+  .files {
+    margin-bottom: 1rem;
+
+    .attachment {
+      margin-bottom: .5rem;
+      display: block;
+      transition: background-color $transition;
+      border-radius: $radius;
+      padding: .5rem;
+
+      &:hover {
+        background-color: $grey-200;
+      }
+
+      .filename {
+        font-weight: bold;
+        margin-bottom: .25rem;
+        color: $text;
+      }
+
+      .info {
+        color: $grey-500;
+        font-size: .9rem;
+
+        p {
+          margin-bottom: 0;
+          display: flex;
+
+          > span:not(:last-child):after,
+          > a:not(:last-child):after {
+            content: '·';
+            padding: 0 .25rem;
+          }
+
+          @media screen and (max-width: $mobile) {
+            &.collapses {
+              flex-direction: column;
+
+              > span:not(:last-child):after,
+              > a:not(:last-child):after {
+                display: none;
+              }
+
+              .user .username {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    .button {
+      width: 100%;
+    }
+  }
+
+  .dropzone {
+    position: fixed;
+    background: rgba(250, 250, 250, 0.8);
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 100;
+    text-align: center;
+
+    &.hidden {
+      display: none;
+    }
+
+    .drop-hint {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      .icon {
+        width: 100%;
+        font-size: 5rem;
+        height: auto;
+        text-shadow: $shadow-md;
+        animation: bounce 2s infinite;
+      }
+
+      .hint {
+        margin: .5rem auto 2rem;
+        border-radius: 2px;
+        box-shadow: $shadow-md;
+        background: $primary;
+        padding: 1rem;
+        color: $white;
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  from,
+  20%,
+  53%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 9cdc2c036..f7b068a4b 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -304,3 +304,49 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.media.comment {
+  align-items: center;
+
+  .media-left {
+    margin: 0 1rem;
+  }
+
+  .comment-info {
+    display: flex;
+    align-items: center;
+
+    * {
+      padding-right: .5rem;
+    }
+
+    img {
+      display: none;
+
+		@media screen and (max-width: $tablet) {
+			display: block;
+			width: 20px;
+			height: 20px;
+			padding-right: 0;
+			margin-right: .5rem;
+		}
+    }
+
+
+    span {
+      font-size: .75rem;
+      line-height: 1;
+    }
+  }
+
+  .editor {
+    margin-top: .5rem;
+  }
+
+}
+
+.media-content {
+  width: calc(100% - 48px - 2rem);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index c5ef510be..6cfc126e9 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -131,3 +131,62 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+// 100px is roughly the size the pane is pulled to the right
+$defer-task-max-width: 350px + 100px;
+
+.defer-task {
+	position: absolute;
+	width: 100%;
+	max-width: $defer-task-max-width;
+	border-radius: $radius;
+	border: 1px solid $grey-200;
+	padding: 1rem;
+	margin: 1rem;
+	background: $white;
+	color: $text;
+	cursor: default;
+	z-index: 10;
+	box-shadow: $shadow-lg;
+
+	@media screen and (max-width: ($defer-task-max-width)) {
+		left: .5rem;
+		right: .5rem;
+		max-width: 100%;
+		width: calc(100vw - 1rem - 2rem);
+	}
+}
+
+.defer-days {
+	justify-content: space-between;
+	display: flex;
+	margin: .5rem 0;
+}
+
+:deep() {
+	input.input {
+		display: none;
+	}
+
+	.flatpickr-calendar {
+		margin: 0 auto;
+		box-shadow: none;
+
+		@media screen and (max-width: ($defer-task-max-width)) {
+			max-width: 100%;
+		}
+
+		span {
+			width: auto !important;
+		}
+
+	}
+
+	.flatpickr-innerContainer {
+		@media screen and (max-width: ($defer-task-max-width)) {
+			overflow: scroll;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index b32743f8f..4eb354263 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -117,3 +117,33 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.assignee {
+	position: relative;
+
+	&:not(:first-child) {
+		margin-left: -1.5rem;
+	}
+
+	:deep(.user img) {
+		border: 2px solid $white;
+		margin-right: 0;
+	}
+
+	.remove-assignee {
+		position: absolute;
+		top: 4px;
+		left: 2px;
+		color: $red;
+		background: $white;
+		padding: 0 4px;
+		display: block;
+		border-radius: 100%;
+		font-size: .75rem;
+		width: 18px;
+		height: 18px;
+		z-index: 100;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 326b94e16..982315eb7 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="heading">
 		<h1 class="title task-id">{{ textIdentifier }}</h1>
-		<div class="is-done" v-if="task.done">Done</div>
+		<Done class="heading__done" :is-done="task.done" />
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -28,8 +28,13 @@
 <script>
 import {mapState} from 'vuex'
 
+import Done from '@/components/misc/Done.vue'
+
 export default {
 	name: 'heading',
+	components: {
+		Done,
+	},
 	data() {
 		return {
 			showSavedMessage: false,
@@ -90,3 +95,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.heading__done {
+	margin-left: .5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 6bc602973..5b63b341a 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -12,7 +12,7 @@
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
-			<span class="is-done" v-if="task.done">Done</span>
+			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -66,6 +66,7 @@
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
+import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
@@ -73,6 +74,7 @@ export default {
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
+		Done,
 		PriorityLabel,
 		User,
 		Labels,
@@ -110,3 +112,156 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+$task-background: $white;
+
+.task {
+	-webkit-touch-callout: none; // iOS Safari
+	user-select: none;
+	cursor: pointer;
+	box-shadow: $shadow-xs;
+	display: block;
+	border: 3px solid transparent;
+
+	font-size: .9rem;
+	margin: .5rem;
+	padding: .4rem;
+	border-radius: $radius;
+	background: $task-background;
+
+	&.loader-container.is-loading::after {
+		width: 1.5rem;
+		height: 1.5rem;
+		top: calc(50% - .75rem);
+		left: calc(50% - .75rem);
+		border-width: 2px;
+	}
+
+	h3 {
+		font-family: $family-sans-serif;
+		font-size: .85rem;
+		word-break: break-word;
+	}
+
+	.progress {
+		margin: 8px 0 0 0;
+		width: 100%;
+		height: 0.5rem;
+	}
+
+	.due-date {
+		float: right;
+		display: flex;
+		align-items: center;
+
+		.icon {
+			margin-right: .25rem;
+		}
+
+		&.overdue {
+			color: $red;
+		}
+	}
+
+	.label-wrapper .tag {
+		margin: .5rem .5rem 0 0;
+	}
+
+	.footer {
+		background: transparent;
+		padding: 0;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		:deep(.tag),
+		.assignees,
+		.icon,
+		.priority-label {
+			margin-top: .25rem;
+			margin-right: .25rem;
+		}
+
+		.assignees {
+			display: flex;
+
+			.user {
+				display: inline;
+				margin: 0;
+
+				img {
+					margin: 0;
+				}
+			}
+		}
+
+		// FIXME: should be in labels.vue
+		:deep(.tag) {
+			margin-left: 0;
+		}
+
+		.priority-label {
+			font-size: .75rem;
+			height: 2rem;
+
+			.icon {
+				height: 1rem;
+				padding: 0 .25rem;
+				margin-top: 0;
+			}
+		}
+	}
+
+	.footer .icon,
+	.due-date,
+	.priority-label {
+		background: $grey-100;
+		border-radius: $radius;
+		padding: 0 .5rem;
+	}
+
+	.due-date {
+		padding: 0 .25rem;
+	}
+
+	.task-id {
+		color: $grey-500;
+		font-size: .8rem;
+		margin-bottom: .25rem;
+		display: flex;
+	}
+
+	&.is-moving {
+		opacity: .5;
+	}
+
+	span {
+		width: auto;
+	}
+
+	&.has-light-text {
+		color: $white;
+
+		.task-id {
+			color: $grey-200;
+		}
+
+		.footer .icon,
+		.due-date,
+		.priority-label {
+			background: $grey-800;
+		}
+
+		.footer {
+			.icon svg {
+				fill: $white;
+			}
+		}
+	}
+}
+
+.kanban-card__done {
+	margin-right: .25rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/labels.vue b/src/components/tasks/partials/labels.vue
index ba28e4630..d596f7811 100644
--- a/src/components/tasks/partials/labels.vue
+++ b/src/components/tasks/partials/labels.vue
@@ -21,8 +21,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .label-wrapper {
 	display: inline;
 }
+
+.tag {
+	& + & {
+		margin-left: 0.5rem;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 252424f49..ea642f1f2 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -79,3 +79,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-namespace-title {
+  color: $grey-500;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 9279e1474..269382f4d 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -248,7 +248,9 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+$remove-icon-width: 24px;
+
 .add-task-relation-button {
 	margin-top: -3rem;
 
@@ -260,4 +262,72 @@ export default {
 		transform: rotate(45deg);
 	}
 }
-</style>
+
+.task-relations {
+  &.is-narrow .columns {
+    display: block;
+
+    .column {
+      width: 100%;
+    }
+  }
+
+  .different-list {
+    color: $grey-500;
+    width: auto;
+  }
+
+  .related-tasks {
+    .title {
+      font-size: 1rem;
+      margin: 0;
+    }
+
+    .tasks {
+      margin: 0;
+
+      a:not(.remove) {
+        width: calc(100% - #{$remove-icon-width});
+      }
+
+      .task .tasktext {
+        width: calc(100% - .25rem); // Magic .25rem extra space
+      }
+
+      .remove {
+        width: $remove-icon-width;
+        text-align: center;
+      }
+    }
+
+	.task {
+		display: flex;
+		flex-wrap: wrap;
+		padding: .4rem;
+		transition: background-color $transition;
+		align-items: center;
+		cursor: pointer;
+		border-radius: $radius;
+		border: 2px solid transparent;
+
+		a {
+			color: $text;
+			transition: color ease $transition-duration;
+
+			&:hover {
+				color: $grey-900;
+			}
+		}
+
+		.remove {
+			color: $red;
+		}
+	}
+  }
+
+  .none {
+    font-style: italic;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index f723522af..9d2a629ff 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -104,3 +104,25 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.reminders {
+  .reminder-input {
+    display: flex;
+    align-items: center;
+
+    &.overdue :deep(.datepicker a.show) {
+      color: $red;
+    }
+
+    &:last-child {
+      margin-bottom: 0.75rem;
+    }
+
+    a.remove {
+      color: $red;
+      padding-left: .5rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 697207cfa..a15c2b68c 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -30,7 +30,7 @@
 				{{ task.title }}
 			</span>
 
-			<labels :labels="task.labels"/>
+			<labels class="labels" :labels="task.labels"/>
 			<user
 				:avatar-size="27"
 				:is-inline="true"
@@ -211,3 +211,150 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.task {
+	display: flex;
+	flex-wrap: wrap;
+	padding: .4rem;
+	transition: background-color $transition;
+	align-items: center;
+	cursor: pointer;
+	border-radius: $radius;
+	border: 2px solid transparent;
+
+	&:hover {
+		background-color: $grey-100;
+	}
+
+	.tasktext,
+	&.tasktext {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		display: inline-block;
+		flex: 1 0 50%;
+
+		.overdue {
+			color: $red;
+		}
+	}
+
+	.task-list {
+		width: auto;
+		color: $grey-400;
+		font-size: .9rem;
+		white-space: nowrap;
+	}
+
+	.color-bubble {
+		height: 10px;
+		flex: 0 0 10px;
+	}
+
+	.labels {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+
+	.avatar {
+		border-radius: 50%;
+		vertical-align: bottom;
+		margin-left: 5px;
+		height: 27px;
+		width: 27px;
+	}
+
+	.list-task-icon {
+		margin-left: 6px;
+
+		&:not(:first-of-type) {
+			margin-left: 8px;
+		}
+
+	}
+
+	a {
+		color: $text;
+		transition: color ease $transition-duration;
+
+		&:hover {
+			color: $grey-900;
+		}
+	}
+
+	.favorite {
+		opacity: 0;
+		text-align: center;
+		width: 27px;
+		transition: opacity $transition, color $transition;
+
+		&:hover {
+			color: $orange;
+		}
+
+		&.is-favorite {
+			opacity: 1;
+			color: $orange;
+		}
+	}
+
+	&:hover .favorite {
+		opacity: 1;
+	}
+
+	.handle {
+		opacity: 0;
+		transition: opacity $transition;
+		margin-right: .25rem;
+		cursor: grab;
+	}
+
+	&:hover .handle {
+		opacity: 1;
+	}
+
+	:deep(.fancycheckbox) {
+		height: 18px;
+		padding-top: 0;
+		padding-right: .5rem;
+
+		span {
+			display: none;
+		}
+	}
+
+	.tasktext.done {
+		text-decoration: line-through;
+		color: $grey-500;
+	}
+
+	span.parent-tasks {
+		color: $grey-500;
+		width: auto;
+	}
+
+	.remove {
+		color: $red;
+	}
+
+	input[type="checkbox"] {
+		vertical-align: middle;
+	}
+
+	.settings {
+		float: right;
+		width: 24px;
+		cursor: pointer;
+	}
+
+	&.loader-container.is-loading:after {
+		top: calc(50% - 1rem);
+		left: calc(50% - 1rem);
+		width: 2rem;
+		height: 2rem;
+		border-left-color: $grey-300;
+		border-bottom-color: $grey-300;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index dba5ebb84..3e68dd1c1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,8 +23,6 @@ import {formatDate, formatDateShort, formatDateLong, formatDateSince} from '@/he
 // @ts-ignore
 import {VERSION} from './version.json'
 
-// Add CSS
-import './styles/vikunja.scss'
 // Notifications
 import Notifications from '@kyvg/vue3-notification'
 
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
deleted file mode 100644
index 2b4c19f45..000000000
--- a/src/styles/components/_all.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import 'base/all';
-
-@import 'attachments';
-@import 'gantt';
-@import 'labels';
-@import 'list';
-@import 'reminders';
-@import 'switch-view';
-@import 'task';
-@import 'taskRelations';
-@import 'tasks';
-@import 'teams';
-@import 'migrator';
-@import 'comments';
-@import 'table-view';
-@import 'kanban';
-@import 'list-backgrounds';
-@import 'color-picker';
-@import 'namespaces';
-@import 'legal';
-@import 'keyboard-shortcuts';
-@import 'api-config';
-@import 'datepicker';
-@import 'notifications';
-@import 'quick-actions';
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
new file mode 100644
index 000000000..99a3c5aa3
--- /dev/null
+++ b/src/styles/components/_index.scss
@@ -0,0 +1,6 @@
+@import "tooltip";
+@import "labels";
+@import "list";
+@import "task";
+@import "tasks";
+@import "namespaces";
\ No newline at end of file
diff --git a/src/styles/components/api-config.scss b/src/styles/components/api-config.scss
deleted file mode 100644
index 1da13452b..000000000
--- a/src/styles/components/api-config.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.api-config {
-  margin-bottom: .75rem;
-}
-
-.api-url-info {
-  font-size: .9rem;
-  text-align: right;
-
-  span.url {
-    border-bottom: 1px dashed $primary;
-  }
-}
diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
deleted file mode 100644
index c983ba076..000000000
--- a/src/styles/components/attachments.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.attachments {
-  input[type=file] {
-    display: none;
-  }
-
-  .files {
-    margin-bottom: 1rem;
-
-    .attachment {
-      margin-bottom: .5rem;
-      display: block;
-      transition: background-color $transition;
-      border-radius: $radius;
-      padding: .5rem;
-
-      &:hover {
-        background-color: $grey-200;
-      }
-
-      .filename {
-        font-weight: bold;
-        margin-bottom: .25rem;
-        color: $text;
-      }
-
-      .info {
-        color: $grey-500;
-        font-size: .9rem;
-
-        p {
-          margin-bottom: 0;
-          display: flex;
-
-          > span:not(:last-child):after,
-          > a:not(:last-child):after {
-            content: '·';
-            padding: 0 .25rem;
-          }
-
-          @media screen and (max-width: $mobile) {
-            &.collapses {
-              flex-direction: column;
-
-              > span:not(:last-child):after,
-              > a:not(:last-child):after {
-                display: none;
-              }
-
-              .user .username {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    .button {
-      width: 100%;
-    }
-  }
-
-  .dropzone {
-    position: fixed;
-    background: rgba(250, 250, 250, 0.8);
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 100;
-    text-align: center;
-
-    &.hidden {
-      display: none;
-    }
-
-    .drop-hint {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-
-      .icon {
-        width: 100%;
-        font-size: 5rem;
-        height: auto;
-        text-shadow: $shadow-md;
-        animation: bounce 2s infinite;
-      }
-
-      .hint {
-        margin: .5rem auto 2rem;
-        border-radius: 2px;
-        box-shadow: $shadow-md;
-        background: $primary;
-        padding: 1rem;
-        color: $white;
-        width: 100%;
-        max-width: 300px;
-      }
-    }
-  }
-}
diff --git a/src/styles/components/base/_all.scss b/src/styles/components/base/_all.scss
deleted file mode 100644
index 6f087b6e6..000000000
--- a/src/styles/components/base/_all.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'card';
-@import 'fancycheckbox';
-@import 'multiselect';
-@import 'scrollbars';
-@import 'tooltip';
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
deleted file mode 100644
index 519f0a1af..000000000
--- a/src/styles/components/base/card.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.card {
-  background-color: $white;
-  border-radius: $radius;
-  margin-bottom: 1rem;
-
-  .card-image {
-    img {
-      border-radius: $radius $radius 0 0;
-    }
-  }
-
-  .card-header {
-    box-shadow: none;
-    border-bottom: 1px solid $grey-200;
-    border-radius: $radius $radius 0 0;
-  }
-
-  .modal-card-foot {
-    background: $grey-50;
-    border-top: 0;
-  }
-}
-
-.box, .card {
-  border: 1px solid $grey-200;
-  box-shadow: $shadow-sm;
-}
diff --git a/src/styles/components/base/fancycheckbox.scss b/src/styles/components/base/fancycheckbox.scss
deleted file mode 100644
index 57651d981..000000000
--- a/src/styles/components/base/fancycheckbox.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// Fancy Checkboxes
-.fancycheckbox {
-  display: inline-block;
-  padding-right: 5px;
-  padding-top: 3px;
-
-  input[type=checkbox] {
-    display: none;
-  }
-
-  &.is-block {
-    margin: .5rem .2rem;
-  }
-
-  .check {
-    cursor: pointer;
-    position: relative;
-    margin: auto;
-    width: 18px;
-    height: 18px;
-    -webkit-tap-highlight-color: transparent;
-    transform: translate3d(0, 0, 0);
-
-    &:hover svg {
-      stroke: $primary;
-    }
-
-    span {
-      font-size: 0.8rem;
-      vertical-align: top;
-      padding-left: .5rem;
-    }
-
-    svg {
-      position: relative;
-      z-index: 1;
-      fill: none;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke: #c8ccd4;
-      stroke-width: 1.5;
-      transform: translate3d(0, 0, 0);
-      transition: all 0.2s ease;
-
-      path {
-        stroke-dasharray: 60;
-        stroke-dashoffset: 0;
-      }
-
-      polyline {
-        stroke-dasharray: 22;
-        stroke-dashoffset: 66;
-      }
-    }
-  }
-
-  &.is-disabled .check:hover svg {
-    stroke: #c8ccd4;
-  }
-
-  input[type=checkbox]:checked + .check svg {
-    stroke: $primary;
-  }
-
-  input[type=checkbox]:checked + .check svg path {
-    stroke-dashoffset: 60;
-    transition: all 0.3s linear;
-  }
-
-  input[type=checkbox]:checked + .check svg polyline {
-    stroke-dashoffset: 42;
-    transition: all 0.2s linear;
-    transition-delay: 0.15s;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
deleted file mode 100644
index 789ae3db4..000000000
--- a/src/styles/components/base/multiselect.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-.multiselect {
-	width: 100%;
-	position: relative;
-
-	.control.is-loading::after {
-		top: .75rem;
-	}
-
-	&.has-search-results .input-wrapper {
-		border-radius: $radius $radius 0 0;
-		border-color: $primary !important;
-		background: $white !important;
-
-		&, &:focus-within {
-			border-bottom-color: $grey-200 !important;
-		}
-	}
-
-	.input-wrapper {
-		padding: 0;
-		background: $white !important;
-		border-color: $grey-200 !important;
-		flex-wrap: wrap;
-		height: auto;
-
-		&:hover {
-			border-color: $grey-300 !important;
-		}
-
-		.input {
-			display: flex;
-			max-width: 100%;
-			width: 100%;
-			align-items: center;
-			border: none !important;
-			background: transparent;
-			height: auto;
-
-			&::placeholder {
-				font-style: normal !important;
-			}
-		}
-
-		&.has-multiple .input {
-			max-width: 250px;
-
-			input {
-				padding-left: 0;
-			}
-		}
-
-		&:focus-within {
-			border-color: $primary !important;
-			background: $white !important;
-		}
-
-		.loader {
-			margin: 0 .5rem;
-		}
-	}
-
-	.search-results {
-		background: $white;
-		border-radius: 0 0 $radius $radius;
-		border: 1px solid $primary;
-		border-top: none;
-
-		max-height: 50vh;
-		overflow-x: auto;
-		position: absolute;
-		z-index: 100;
-		max-width: 100%;
-		min-width: 100%;
-
-		&-inline {
-			position: static;
-		}
-
-		button {
-			background: transparent;
-			display: block;
-			text-align: left;
-			box-shadow: none;
-			border-radius: 0;
-			text-transform: none;
-			font-family: $family-sans-serif;
-			font-weight: normal;
-			padding: .5rem 0;
-			border: none;
-			cursor: pointer;
-
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			overflow: hidden;
-
-			.search-result {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				padding: .5rem .75rem;
-			}
-
-			.hint-text {
-				font-size: .75rem;
-				color: transparent;
-				transition: color $transition;
-				padding: 0 .5rem;
-			}
-
-			&:focus, &:hover {
-				background: $grey-100;
-				box-shadow: none !important;
-
-				.hint-text {
-					color: $text;
-				}
-			}
-
-			&:active {
-				background: $grey-200;
-			}
-		}
-	}
-
-	.assignee {
-		position: relative;
-
-		&:not(:first-child) {
-			margin-left: -1.5rem;
-		}
-
-		.user img {
-			border: 2px solid $white;
-			margin-right: 0;
-		}
-
-		.remove-assignee {
-			position: absolute;
-			top: 4px;
-			left: 2px;
-			color: $red;
-			background: $white;
-			padding: 0 4px;
-			display: block;
-			border-radius: 100%;
-			font-size: .75rem;
-			width: 18px;
-			height: 18px;
-			z-index: 100;
-		}
-	}
-}
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
deleted file mode 100644
index 0dbaff73c..000000000
--- a/src/styles/components/color-picker.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.color-picker-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-	// reset / see https://stackoverflow.com/a/11471224/15522256
-	input[type="color"] {
-		-webkit-appearance: none;
-		border: none;
-	}
-	input[type="color"]::-webkit-color-swatch-wrapper {
-		padding: 0;
-	}
-	input[type="color"]::-webkit-color-swatch {
-		border: none;
-	}
-
-	$PICKER_SIZE: 24px;
-	$BORDER_WIDTH: 1px;
-	.picker {
-		display: grid;
-		width: $PICKER_SIZE;
-		height: $PICKER_SIZE;
-		overflow: hidden;
-		border-radius: 100%;
-		border: $BORDER_WIDTH solid $grey-300;
-		box-shadow: $card-shadow;
-
-		& > * {
-			grid-row: 1;
-			grid-column: 1;
-		}
-	}
-
-	input.picker__input {
-		padding: 0;
-		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
-		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
-	}
-
-	.picker__input.is-empty {
-		opacity: 0;
-	}
-	
-	.picker__pattern {
-		pointer-events: none;
-	}
-}
\ No newline at end of file
diff --git a/src/styles/components/comments.scss b/src/styles/components/comments.scss
deleted file mode 100644
index b6e2afed6..000000000
--- a/src/styles/components/comments.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.media.comment {
-  align-items: center;
-
-  .media-left {
-    margin: 0 1rem;
-  }
-
-  .comment-info {
-    display: flex;
-    align-items: center;
-
-    * {
-      padding-right: .5rem;
-    }
-
-    img {
-      display: none;
-    }
-
-    @media screen and (max-width: $tablet) {
-      img {
-        display: block;
-        width: 20px;
-        height: 20px;
-        padding-right: 0;
-        margin-right: .5rem;
-      }
-    }
-
-    span {
-      font-size: .75rem;
-      line-height: 1;
-    }
-  }
-
-  .editor {
-    margin-top: .5rem;
-  }
-
-}
\ No newline at end of file
diff --git a/src/styles/components/datepicker.scss b/src/styles/components/datepicker.scss
deleted file mode 100644
index c4630b2ca..000000000
--- a/src/styles/components/datepicker.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.datepicker {
-	input.input {
-		display: none;
-	}
-
-	&.disabled a {
-		cursor: default;
-	}
-
-	.datepicker-popup {
-		position: absolute;
-		z-index: 99;
-		width: 320px;
-		background: $white;
-		border-radius: $radius;
-		box-shadow: $card-shadow;
-
-		a:not(.button) {
-			display: flex;
-			align-items: center;
-			padding: 0 .5rem;
-			width: 100%;
-			height: 2.25rem;
-			color: $text;
-			transition: all $transition;
-
-			&:first-child {
-				border-radius: $radius $radius 0 0;
-			}
-
-			&:hover {
-				background: $light;
-			}
-
-			.text {
-				width: 100%;
-				font-size: .85rem;
-				display: flex;
-				justify-content: space-between;
-				padding-right: .25rem;
-
-				.weekday {
-					color: $text-light;
-					text-transform: capitalize;
-				}
-			}
-
-			.icon {
-				width: 2rem;
-				text-align: center;
-			}
-		}
-			
-		a.button {
-			margin: 1rem;
-			width: calc(100% - 2rem);
-		}
-
-		.flatpickr-calendar {
-			margin: 0 auto 8px;
-			box-shadow: none;
-		}
-
-		@media screen and (max-width: ($tablet)) {
-			width: calc(100vw - 5rem);
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
deleted file mode 100644
index 686d06667..000000000
--- a/src/styles/components/gantt.scss
+++ /dev/null
@@ -1,251 +0,0 @@
-$gantt-border: 1px solid $grey-200;
-$gantt-vertical-border-color: $grey-100;
-
-.gantt-chart-container {
-	padding-bottom: 1rem;
-}
-
-.gantt-chart {
-	overflow-x: auto;
-	border-top: 1px solid $grey-200;
-
-	.dates {
-		display: flex;
-		text-align: center;
-
-		.months {
-			display: flex;
-
-			.month {
-				padding: 0.5rem 0 0;
-				border-right: $gantt-border;
-				font-family: $vikunja-font;
-				font-weight: bold;
-
-				&:last-child {
-					border-right: none;
-				}
-
-				.days {
-					display: flex;
-
-					.day {
-						padding: 0.5rem 0;
-						font-weight: normal;
-
-						&.today {
-							background: $primary;
-							color: $white;
-							border-radius: 5px 5px 0 0;
-							font-weight: bold;
-						}
-
-						.theday {
-							padding: 0 .5rem;
-							width: 100%;
-							display: block;
-						}
-
-						.weekday {
-							font-size: 0.8rem;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.tasks {
-		max-width: unset !important;
-		margin: 0;
-		border-top: $gantt-border;
-
-		.row {
-			height: 45px;
-
-			.task {
-				display: inline-block;
-				border: 2px solid $primary;
-				font-size: 0.85rem;
-				margin: 0.5rem;
-				border-radius: 6px;
-				padding: 0.25rem 0.5rem;
-				cursor: grab;
-				position: relative;
-				height: 31px !important;
-
-				user-select: none;
-
-				&.is-current-edit {
-					border-color: $orange !important;
-				}
-
-				&.has-light-text {
-					color: $light;
-
-					&.done span:after {
-						border-top: 1px solid $light;
-					}
-
-					.edit-toggle {
-						color: $light;
-					}
-				}
-
-				&.has-dark-text {
-					color: $text;
-
-					&.done span:after {
-						border-top: 1px solid $dark;
-					}
-
-					.edit-toggle {
-						color: $text;
-					}
-				}
-
-				&.done span {
-					position: relative;
-
-					&:after {
-						content: '';
-						position: absolute;
-						right: 0;
-						left: 0;
-						top: 57%;
-					}
-				}
-
-				span:not(.high-priority) {
-					max-width: calc(100% - 20px);
-					display: inline-block;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-
-					&.has-high-priority {
-						max-width: calc(100% - 90px);
-					}
-
-					&.has-not-so-high-priority {
-						max-width: calc(100% - 70px);
-					}
-
-					&.has-super-high-priority {
-						max-width: calc(100% - 111px);
-					}
-
-					&.icon {
-						width: 10px;
-						text-align: center;
-					}
-				}
-
-				.high-priority {
-					margin: 0 0 0 .5rem;
-					vertical-align: bottom;
-				}
-
-				.edit-toggle {
-					float: right;
-					cursor: pointer;
-					margin-right: 4px;
-				}
-
-				&.nodate {
-					border: 2px dashed $grey-300;
-					background: $grey-100;
-				}
-
-				&:active {
-					cursor: grabbing;
-				}
-			}
-		}
-	}
-
-	.taskedit {
-		position: fixed;
-		min-height: 0;
-		top: 10vh;
-		right: 10vw;
-		z-index: 5;
-
-		.card-content {
-			max-height: 60vh;
-			overflow-y: auto;
-		}
-	}
-
-	.add-new-task {
-		padding: 1rem .7rem .4rem .7rem;
-		display: flex;
-		max-width: 450px;
-
-		.input {
-			margin-right: .7rem;
-			font-size: .8rem;
-		}
-
-		.button {
-			font-size: .68rem;
-		}
-	}
-}
-
-.gantt-options {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	@media screen and (max-width: $tablet) {
-		flex-direction: column;
-	}
-
-	.range-picker {
-		display: flex;
-		margin-bottom: 1rem;
-		width: 50%;
-
-		@media screen and (max-width: $tablet) {
-			flex-direction: column;
-			width: 100%;
-		}
-
-		.field {
-			margin-bottom: 0;
-			width: 33%;
-
-			&:not(:last-child) {
-				padding-right: .5rem;
-			}
-
-			@media screen and (max-width: $tablet) {
-				width: 100%;
-				max-width: 100%;
-				margin-top: .5rem;
-				padding-right: 0 !important;
-			}
-
-			&, .input {
-				font-size: .8rem;
-			}
-
-			.select, .select select {
-				height: auto;
-				width: 100%;
-				font-size: .8rem;
-			}
-
-
-			.label {
-				font-size: .9rem;
-				padding-left: .4rem;
-			}
-		}
-	}
-}
-
-.vdr.active::before {
-	display: none;
-}
\ No newline at end of file
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
deleted file mode 100644
index 420c28807..000000000
--- a/src/styles/components/kanban.scss
+++ /dev/null
@@ -1,328 +0,0 @@
-$bucket-background: $grey-100;
-$task-background: $white;
-$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
-$bucket-width: 300px;
-$bucket-header-height: 60px;
-$bucket-right-margin: 1rem;
-
-$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
-$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
-$filter-container-height: '1rem - #{$switch-view-height}';
-
-.app-content.list\.kanban {
-	padding-bottom: 0;
-}
-
-.kanban {
-
-	overflow-x: auto;
-	overflow-y: hidden;
-	height: calc(#{$crazy-height-calculation});
-	margin: 0 -1.5rem;
-	padding: 0 1.5rem;
-
-	@media screen and (max-width: $tablet) {
-		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
-	}
-
-	&-bucket-container {
-		display: flex;
-		align-items: flex-start;
-	}
-
-	.ghost {
-		background: transparent !important;
-		border: 3px dashed $grey-300 !important;
-		box-shadow: none !important;
-
-		* {
-			opacity: 0;
-		}
-	}
-
-	.bucket {
-		background-color: $bucket-background;
-		border-radius: $radius;
-		position: relative;
-
-		margin: 0 $bucket-right-margin 0 0;
-		max-height: 100%;
-		min-height: 20px;
-		width: $bucket-width;
-
-		.tasks {
-			max-height: calc(#{$crazy-height-calculation-tasks});
-			overflow: auto;
-			margin-top: 0;
-
-			@media screen and (max-width: $tablet) {
-				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
-			}
-
-			.task {
-				user-select: none;
-
-				//transition: $ease-out;
-				cursor: pointer;
-				box-shadow: $shadow-xs;
-				display: block;
-				border: 3px solid transparent;
-
-				font-size: .9rem;
-				margin: .5rem;
-				border-radius: $radius;
-				background: $task-background;
-				padding-bottom: .125rem;
-
-				&.loader-container.is-loading:after {
-					width: 1.5rem;
-					height: 1.5rem;
-					top: calc(50% - .75rem);
-					left: calc(50% - .75rem);
-					border-width: 2px;
-				}
-
-				h3 {
-					font-family: $family-sans-serif;
-					font-size: .85rem;
-					word-break: break-word;
-				}
-
-				.progress {
-					margin: 8px 0 0 0;
-					width: 100%;
-					height: 0.5rem;
-				}
-
-				.due-date {
-					float: right;
-					display: flex;
-					align-items: center;
-
-					.icon {
-						margin-right: .25rem;
-					}
-
-					&.overdue {
-						color: $red;
-					}
-				}
-
-				.label-wrapper .tag {
-					margin: .5rem .5rem 0 0;
-				}
-
-				.footer {
-					background: transparent;
-					padding: 0;
-					display: flex;
-					flex-wrap: wrap;
-					align-items: center;
-					margin-top: .25rem;
-
-					.tag, .assignees, .icon, .priority-label, .checklist-summary {
-						margin-top: 0;
-						margin-right: .25rem;
-						margin-bottom: .25rem;
-					}
-					
-					.checklist-summary {
-						padding-left: 0;
-					}
-
-					.assignees {
-						display: flex;
-
-						.user {
-							display: inline;
-							margin: 0;
-
-							img {
-								margin: 0;
-							}
-						}
-					}
-
-					.tag {
-						margin-left: 0;
-					}
-
-					.priority-label {
-						font-size: .75rem;
-						height: 1.5rem;
-
-						.icon {
-							height: 1rem;
-							padding: 0 .25rem;
-							margin-top: 0;
-						}
-					}
-				}
-
-				.footer .icon,
-				.due-date,
-				.priority-label {
-					background: $grey-100;
-					border-radius: $radius;
-					padding: 0 .5rem;
-				}
-
-				.due-date {
-					padding: 0 .25rem;
-				}
-
-				.task-id {
-					color: $grey-500;
-					font-size: .8rem;
-					margin-bottom: .25rem;
-					display: flex;
-				}
-
-				.is-done {
-					font-size: .75rem;
-					padding: .2rem .3rem;
-					margin: 0 .25rem 0 0;
-				}
-
-				&.is-moving {
-					opacity: .5;
-				}
-
-				span {
-					width: auto;
-				}
-
-				&.has-light-text {
-					color: $white;
-
-					.task-id {
-						color: $grey-200;
-					}
-
-					.footer .icon,
-					.due-date,
-					.priority-label {
-						background: $grey-800;
-					}
-
-					.footer {
-						.icon svg {
-							fill: $white;
-						}
-					}
-				}
-
-				&.v-leave-from,
-				&.v-leave-to,
-				&.v-leave-active
-				&.move-card-leave-from,
-				&.move-card-leave-to,
-				&.move-card-leave-active {
-					display: none;
-				}
-			}
-
-			.dropper {
-				&, > div {
-					min-height: 40px;
-				}
-			}
-		}
-
-		.move-card-move {
-			transition: transform $transition-duration;
-		}
-
-		.no-move {
-			transition: transform 0s;
-		}
-
-		h2 {
-			font-size: 1rem;
-			margin: 0;
-			font-weight: 600 !important;
-		}
-
-		&.new-bucket {
-			// Because of reasons, this button ignores the margin we gave it to the right.
-			// To make it still look like it has some, we modify the container to have a padding of 1rem,
-			// which is the same as the margin it should have. Then we make the container itself bigger
-			// to hide the fact we just made the button smaller.
-			min-width: calc(#{$bucket-width} + 1rem);
-			background: transparent;
-			padding-right: 1rem;
-
-			.button {
-				background: $bucket-background;
-				width: 100%;
-			}
-		}
-
-		a.dropdown-item {
-			padding-right: 1rem;
-		}
-
-		&.is-collapsed {
-			transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
-			// Using negative margins instead of translateY here to make all other buckets fill the empty space
-			margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
-			margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
-			cursor: pointer;
-
-			.tasks, .bucket-footer {
-				display: none;
-			}
-		}
-	}
-
-	.bucket-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: .5rem;
-		height: $bucket-header-height;
-
-		.limit {
-			padding-left: .5rem;
-			font-weight: bold;
-
-			&.is-max {
-				color: $red;
-			}
-		}
-
-		.title.input {
-			height: auto;
-			padding: .4rem .5rem;
-			display: inline-block;
-			cursor: pointer;
-		}
-	}
-
-	.dropdown-trigger {
-		cursor: pointer;
-		padding: .5rem;
-	}
-
-	.bucket-footer {
-		padding: .5rem;
-
-		.button {
-			background-color: transparent;
-
-			&:hover {
-				background-color: $white;
-			}
-		}
-	}
-}
-
-.task-dragging {
-	transition: transform 0.18s ease;
-	transform: rotateZ(3deg)
-}
-
-.ghost-task-drop {
-	transition: transform 0.18s ease-in-out;
-	transform: rotateZ(0deg)
-}
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
deleted file mode 100644
index 58ee3e8e6..000000000
--- a/src/styles/components/keyboard-shortcuts.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.keyboard-shortcuts-button {
-	position: fixed;
-	bottom: calc(1rem - 4px);
-	right: 1rem;
-	z-index: 4500; // The modal has a z-index of 4000
-
-	color: $grey-500;
-	transition: color $transition;
-	
-	@media screen and (max-width: $tablet) {
-		display: none;
-	}
-}
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index 2037afb75..ee06d3f2e 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -1,3 +1,4 @@
+// FIXME: adapt lables.vue so that it can be used for this aswell 
 .labels-list {
   a, a:hover {
     text-decoration: none;
@@ -7,6 +8,7 @@
     margin: .5rem 0 .5rem .5rem;
     background: $grey-200;
 
+    // FIXME: only used in ListLabels.vue
     &.disabled {
       opacity: 0.7;
 
diff --git a/src/styles/components/legal.scss b/src/styles/components/legal.scss
deleted file mode 100644
index 2a63faa54..000000000
--- a/src/styles/components/legal.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.legal-links {
-  margin-top: 1rem;
-  text-align: right;
-  color: $grey-300;
-  font-size: 1rem;
-}
\ No newline at end of file
diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
deleted file mode 100644
index 1bbe04b7d..000000000
--- a/src/styles/components/list-backgrounds.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.list-background-setting {
-
-  .unsplash-link {
-    text-align: right;
-    font-size: .8rem;
-
-    a {
-      color: $grey-800;
-    }
-  }
-
-  .image-search-result {
-    margin-top: 1rem;
-    display: flex;
-    flex-flow: row wrap;
-
-    .image {
-      width: calc(100% / 5 - 1rem);
-      height: 120px;
-      margin: .5rem;
-      background-size: cover;
-      background-position: center;
-      display: flex;
-
-      @media screen and (min-width: $desktop) {
-        &:nth-child(5n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: $desktop) {
-        width: calc(100% / 4 - 1rem);
-
-        &:nth-child(4n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: $tablet) {
-        width: calc(100% / 2 - 1rem);
-
-        &:nth-child(2n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      @media screen and (max-width: ($mobile)) {
-        width: calc(100% - 1rem);
-
-        &:nth-child(1n) {
-          page-break-after: always; // CSS 2.1 syntax
-          break-after: always; // New syntax
-        }
-      }
-
-      .info {
-        align-self: flex-end;
-        display: block;
-        opacity: 0;
-        width: 100%;
-        padding: .25rem 0;
-        text-align: center;
-        background: rgba(0, 0, 0, 0.5);
-        font-size: .75rem;
-        font-weight: bold;
-        color: $white;
-        transition: opacity $transition;
-      }
-
-      &:hover .info {
-        opacity: 1;
-      }
-    }
-  }
-
-  .is-load-more-button {
-    margin: 1rem auto 0 !important;
-    display: block;
-    width: 200px;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index a9e83ce95..fadf0201d 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -1,53 +1,9 @@
-.card.is-fullwidth {
-  margin-bottom: 1rem;
-
-  .add-form {
-    margin: 1rem;
-  }
-
-  .content {
-    padding: 0;
-  }
-}
-
-.list-view .task-add {
-	padding: 1rem 1rem 0;
-}
-
-.list-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  $edit-icon-width: 1rem;
-
-  @media screen and (min-width: $tablet) {
-    // We need a fixed width for overflowing ellipsis to work
-    --nav-username-width: 0;
-    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
-  }
-
-  @media screen and (max-width: $tablet) {
-    // We need a fixed width for overflowing ellipsis to work
-    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  .dropdown-trigger {
-    color: $grey-400;
-    margin-left: 1rem;
-    height: 1rem;
-    width: 1rem;
-    cursor: pointer;
-  }
-}
-
-.edit-list {
-  padding-bottom: 1rem;
-}
+// FIXME: should be a component <FilterContainer>
+// used in
+// - gantt-component.vue
+// - Kanban.vue
+// - List.vue
+// - Table.vue
 
 $filter-container-top-default: -59px;
 $filter-container-top-link-share-gantt: -138px;
@@ -136,9 +92,6 @@ $filter-container-top-link-share-list: -47px;
   }
 }
 
-.list-namespace-title {
-  color: $grey-500;
-}
 
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
@@ -153,149 +106,4 @@ $filter-container-top-link-share-list: -47px;
 .link-share-container .filter-container {
   right: 9rem;
   margin-top: $filter-container-top-default;
-}
-
-.is-archived .notification.is-warning {
-  margin-bottom: 1rem;
-}
-
-$lists-per-row: 5;
-$list-height: 150px;
-$list-spacing: 1rem;
-
-.list-card {
-  cursor: pointer;
-  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-  height: $list-height;
-  background: $white;
-  margin: 0 $list-spacing $list-spacing 0;
-  padding: 1rem;
-  border-radius: $radius;
-  box-shadow: $shadow-sm;
-  transition: box-shadow $transition;
-
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  &:hover {
-    box-shadow: $shadow-md;
-  }
-
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
-  }
-
-  @media screen and (min-width: $widescreen) {
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
-    $lists-per-row: 3;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
-
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    $lists-per-row: 2;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
-
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $mobile) {
-    $lists-per-row: 1;
-    & {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-
-  .is-archived-container {
-    width: 100%;
-    text-align: right;
-
-    .is-archived {
-      font-size: .75rem;
-      float: left;
-    }
-  }
-
-  .title {
-    align-self: flex-end;
-    font-family: $vikunja-font;
-    font-weight: 400;
-    font-size: 1.5rem;
-    color: $text;
-    width: 100%;
-    margin-bottom: 0;
-    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  &.has-light-text .title {
-    color: $light;
-  }
-
-  &.has-background {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    .title {
-      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
-      color: $white;
-    }
-  }
-
-  .favorite {
-    transition: opacity $transition, color $transition;
-    opacity: 0;
-
-    &:hover {
-      color: $orange;
-    }
-
-    &.is-archived {
-      display: none;
-    }
-
-    &.is-favorite {
-      display: inline-block;
-      opacity: 1;
-      color: $orange;
-    }
-  }
-
-  &:hover .favorite {
-    opacity: 1;
-  }
-}
-
-.list-cards-wrapper-2-rows {
-	flex-wrap: wrap;
-	max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
-	overflow: hidden;
-	
-	@media screen and (max-width: $mobile) {
-		max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
-	}
-}
+}
\ No newline at end of file
diff --git a/src/styles/components/migrator.scss b/src/styles/components/migrator.scss
deleted file mode 100644
index a05f1066b..000000000
--- a/src/styles/components/migrator.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.migration-services-overview {
-  text-align: center;
-
-  a {
-    display: inline-block;
-    width: 100px;
-    text-transform: capitalize;
-    margin-right: 1rem;
-
-    img {
-      display: block;
-    }
-  }
-}
-
-.migration-in-progress-container {
-  max-width: 400px;
-  margin: 4rem auto 0;
-  text-align: center;
-}
-
-.migration-in-progress {
-  text-align: center;
-  display: flex;
-  max-width: 400px;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  img {
-    display: block;
-    max-height: 100px;
-  }
-
-  .progress-dots {
-    height: 40px;
-    width: 140px;
-    overflow: visible;
-
-    span {
-      transition: all 500ms ease;
-      background: $grey-500;
-      height: 10px;
-      width: 10px;
-      display: inline-block;
-      border-radius: 10px;
-      animation: wave 2s ease infinite;
-      margin-right: 5px;
-
-      &:nth-child(1) {
-        animation-delay: 0;
-      }
-
-      &:nth-child(2) {
-        animation-delay: 100ms;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 200ms;
-      }
-
-      &:nth-child(4) {
-        animation-delay: 300ms;
-      }
-
-      &:nth-child(5) {
-        animation-delay: 400ms;
-      }
-
-      &:nth-child(6) {
-        animation-delay: 500ms;
-      }
-
-      &:nth-child(7) {
-        animation-delay: 600ms;
-      }
-
-      &:nth-child(8) {
-        animation-delay: 700ms;
-      }
-    }
-  }
-
-  @keyframes wave {
-    0%, 40%, 100% {
-      transform: translate(0, 0);
-      background-color: $primary;
-    }
-    10% {
-      transform: translate(0, -15px);
-      background-color: $primary-dark;
-    }
-  }
-}
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index 2e63d051e..caead25e8 100644
--- a/src/styles/components/namespaces.scss
+++ b/src/styles/components/namespaces.scss
@@ -1,47 +1,4 @@
-.namespaces-list {
-  .button.new-namespace {
-    float: right;
-    margin-left: 1rem;
-
-    @media screen and (max-width: $mobile) {
-      float: none;
-      width: 100%;
-      margin-bottom: 1rem;
-    }
-  }
-
-  .show-archived-check {
-    margin-bottom: 1rem;
-  }
-
-  &.loader-container.is-loading {
-    min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
-  }
-
-  .namespace {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    h1 {
-      display: flex;
-      align-items: center;
-    }
-
-    .is-archived {
-      font-size: 0.75rem;
-      border: 1px solid $grey-500;
-      color: $grey !important;
-      padding: 2px 4px;
-      border-radius: 3px;
-      font-family: $vikunja-font;
-      background: rgba($white, 0.75);
-      margin-left: .5rem;
-    }
-
-    .lists {
-      display: flex;
-      flex-flow: row wrap;
-    }
-  }
+// FIXME: used in navigation.vue and in ListNamespaces.vue
+.namespaces-list.loader-container.is-loading {
+	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
\ No newline at end of file
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
deleted file mode 100644
index 8b0f1d233..000000000
--- a/src/styles/components/notifications.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-.notifications {
-	width: $navbar-icon-width;
-
-	.unread-indicator {
-		position: absolute;
-		top: .75rem;
-		right: 1.15rem;
-		width: .75rem;
-		height: .75rem;
-
-		background: $primary;
-		border-radius: 100%;
-		border: 2px solid $white;
-	}
-
-	.notifications-list {
-		position: fixed;
-		right: 1rem;
-		margin-top: 1rem;
-		max-height: 400px;
-		overflow-y: auto;
-
-		background: $white;
-		width: 350px;
-		max-width: calc(100vw - 2rem);
-		padding: .75rem .25rem;
-		border-radius: $radius;
-		box-shadow: $shadow-sm;
-		font-size: .85rem;
-
-		@media screen and (max-width: $tablet) {
-			max-height: calc(100vh - 1rem - #{$navbar-height});
-		}
-
-		.head {
-			font-family: $vikunja-font;
-			font-size: 1rem;
-			padding: .5rem;
-		}
-
-		.single-notification {
-			display: flex;
-			align-items: center;
-			padding: 0.25rem 0;
-
-			transition: background-color $transition;
-
-			&:hover {
-				background: $grey-100;
-				border-radius: $radius;
-			}
-
-			.read-indicator {
-				width: .35rem;
-				height: .35rem;
-				background: $primary;
-				border-radius: 100%;
-				margin-left: .5rem;
-
-				&.read {
-					background: transparent;
-				}
-			}
-
-			.user {
-				display: inline-flex;
-				align-items: center;
-				width: auto;
-				margin: 0 .5rem;
-
-				span {
-					font-family: $family-sans-serif;
-				}
-
-				.avatar {
-					height: 16px;
-				}
-
-				img {
-					margin-right: 0;
-				}
-			}
-
-			.created {
-				color: $grey-400;
-			}
-
-			&:last-child {
-				margin-bottom: .25rem;
-			}
-
-			a {
-				color: $grey-800;
-			}
-		}
-
-		.nothing {
-			text-align: center;
-			padding: 1rem 0;
-			color: $grey-500;
-
-			.explainer {
-				font-size: .75rem;
-			}
-		}
-	}
-}
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
deleted file mode 100644
index c6e6e603e..000000000
--- a/src/styles/components/quick-actions.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.quick-actions {
-	.action-input {
-		display: flex;
-		align-items: center;
-
-		.input {
-			border: 0;
-			font-size: 1.5rem;
-		}
-
-		&.has-active-cmd .input {
-			padding-left: .5rem;
-		}
-
-		.active-cmd {
-			font-size: 1.25rem;
-			margin-left: .5rem;
-		}
-	}
-
-	.results {
-		text-align: left;
-		width: 100%;
-		color: $grey-800;
-
-		.result {
-			&-title {
-				background: $grey-50;
-				padding: .5rem;
-				display: block;
-				font-size: .75rem;
-			}
-
-			&-items {
-				button {
-					font-size: .9rem;
-					width: 100%;
-					background: transparent;
-					text-align: left;
-					box-shadow: none;
-					border-radius: 0;
-					text-transform: none;
-					font-family: $family-sans-serif;
-					font-weight: normal;
-					padding: .5rem .75rem;
-					border: none;
-					cursor: pointer;
-
-					&:focus, &:hover {
-						background: $grey-50;
-						box-shadow: none !important;
-					}
-
-					&:active {
-						background: $grey-100;
-					}
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/styles/components/reminders.scss b/src/styles/components/reminders.scss
deleted file mode 100644
index 3015834d4..000000000
--- a/src/styles/components/reminders.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.reminders {
-  .reminder-input {
-    display: flex;
-    align-items: center;
-
-    &.overdue .datepicker a.show {
-      color: $red;
-    }
-
-    &:last-child {
-      margin-bottom: 0.75rem;
-    }
-
-    a.remove {
-      color: $red;
-      padding-left: .5rem;
-    }
-  }
-}
diff --git a/src/styles/components/switch-view.scss b/src/styles/components/switch-view.scss
deleted file mode 100644
index 266143d6c..000000000
--- a/src/styles/components/switch-view.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.switch-view {
-  background: $white;
-  display: inline-flex;
-  border-radius: $radius;
-  font-size: .75rem;
-  box-shadow: $shadow-sm;
-  height: $switch-view-height;
-  margin-bottom: 1rem;
-  padding: .5rem;
-
-  a {
-    padding: .25rem .5rem;
-    display: block;
-    border-radius: $radius;
-
-    transition: all 100ms;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
-
-    &.is-active, &:hover {
-      color: $white;
-    }
-
-    &.is-active {
-      background: $primary;
-      font-weight: bold;
-      box-shadow: $shadow-xs;
-    }
-
-    &:hover {
-      background: $primary;
-    }
-  }
-}
-
-@media screen and (max-width: $tablet) {
-  .switch-view-container {
-    display: flex;
-    justify-content: center;
-  }
-}
diff --git a/src/styles/components/table-view.scss b/src/styles/components/table-view.scss
deleted file mode 100644
index e89ffd284..000000000
--- a/src/styles/components/table-view.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.table-view {
-	.table {
-		background: transparent;
-		overflow-x: auto;
-		overflow-y: hidden;
-	  
-		th {
-			white-space: nowrap;
-		}
-
-		.user {
-			margin: 0;
-		}
-
-		.is-done {
-			font-size: .9rem;
-			margin: 0;
-		}
-	}
-}
-
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 7a62b1f2b..3db356444 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -1,231 +1,9 @@
-.task-view {
-  // This is a workaround to hide the llama background from the top on the task detail page
-  margin-top: -1.5rem;
-  padding: 1rem;
-  background-color: $light-background;
-
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
-  }
-
-  .subtitle {
-    color: $grey-500;
-    margin-bottom: 1rem;
-
-    a {
-      color: $grey-800;
-    }
-  }
-
-  h3 .button {
-    vertical-align: middle;
-  }
-
-  .icon.is-grey {
-    color: $grey-400;
-  }
-
-  .heading {
-    display: flex;
-    justify-content: space-between;
-    text-transform: none;
-    align-items: center;
-
-    .title {
-      margin-bottom: 0;
-
-      &.input {
-        // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
-        min-height: calc(1.8rem * 1.125 + .6rem + 2px);
-      }
-    }
-
-    .title.task-id {
-      color: $grey-400;
-      white-space: nowrap;
-    }
-
-    @media screen and (max-width: $tablet) {
-      flex-direction: column;
-      align-items: start;
-
-      .title.input {
-        margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
-      }
-    }
-  }
-
-  .date-input {
-    display: flex;
-    align-items: center;
-
-    a.remove {
-      color: $red;
-      vertical-align: middle;
-      padding-left: .5rem;
-      line-height: 1;
-    }
-  }
-
-  .datepicker {
-    width: 100%;
-
-    a.show {
-      color: $text;
-      padding: .25rem .5rem;
-      transition: background-color $transition;
-      border-radius: $radius;
-      display: block;
-      margin: .1rem 0;
-
-      &:hover {
-        background: $white;
-      }
-    }
-
-    &.disabled a.show:hover {
-      background: transparent;
-    }
-  }
-
-  .details {
-    padding-bottom: 0.75rem;
-    flex-flow: row wrap;
-    margin-bottom: 0;
-
-    .detail-title {
-      display: block;
-      color: $grey-400;
-    }
-
-    .none {
-      font-style: italic;
-    }
-
-    // Break after the 2nd element
-    .column:nth-child(2n) {
-      page-break-after: always; // CSS 2.1 syntax
-      break-after: always; // New syntax
-    }
-
-    &.labels-list, .assignees {
-      .multiselect {
-        .input-wrapper {
-          &:not(:focus-within):not(:hover) {
-            background: transparent !important;
-            border-color: transparent !important;
-          }
-        }
-      }
-    }
-  }
-
-  .details, .heading {
-    .input:not(.has-defaults),
-    .textarea,
-    .select:not(.has-defaults) select {
-      border-color: transparent;
-      background: transparent;
-      cursor: pointer;
-      transition: all $transition-duration;
-
-      &::placeholder {
-        color: $text-light;
-        opacity: 1;
-        font-style: italic;
-      }
-
-      &:not(:disabled) {
-        &:hover, &:active {
-          background: $input-background-color;
-          border-color: $input-border-color;
-          cursor: text;
-        }
-
-        &:focus {
-          background: $input-background-color;
-          border-color: $input-focus-border-color;
-        }
-      }
-    }
-
-    .select:not(.has-defaults):after {
-      opacity: 0;
-    }
-
-    .select:not(.has-defaults):hover:after {
-      opacity: 1;
-    }
-  }
-
-  .attachments {
-    margin-bottom: 0;
-
-    table tr:last-child td {
-      border-bottom: none;
-    }
-  }
-
-  .action-buttons {
-    a.button {
-      width: 100%;
-      margin-bottom: .5rem;
-      justify-content: left;
-    }
-  }
-
-  .created {
-    font-size: .75rem;
-    color: $grey-500;
-    text-align: right;
-  }
-	
-  .checklist-summary {
-    margin-left: .25rem;
-  }	
-}
-
+// FIXME: should be in TaskDetailView.vue
 .link-share-container:not(.has-background) .task-view {
   background: transparent;
 }
 
-.task-view-container {
-  padding-bottom: 1rem;
-	
-  @media screen and (max-width: $desktop) {
-	padding-bottom: 0;
-  }
-
-  .task-view * {
-    opacity: 0;
-    transition: opacity 50ms ease;
-  }
-
-  &.is-loading {
-    opacity: 1;
-
-    .task-view * {
-      opacity: 0;
-    }
-  }
-
-  &.visible:not(.is-loading) .task-view * {
-    opacity: 1;
-  }
-}
-
-.is-done {
-  background: $green;
-  color: $white;
-  padding: .5rem;
-  font-size: 1rem;
-  margin-left: .5rem;
-  font-weight: bold;
-  line-height: 1;
-  border-radius: 4px;
-  text-align: center;
-}
-
+// FIXME: should be a prop of TaskDetailView.vue
 .modal-container .task-view {
   border-radius: $radius;
   padding: 1rem;
@@ -236,18 +14,4 @@
     border-radius: 0;
     padding-top: 2rem;
   }
-}
-
-.flash-background-enter-from,
-.flash-background-enter-active  {
-  animation: flash-background $flash-background-duration ease 1;
-}
-
-@keyframes flash-background {
-  0% {
-    background: lighten($primary, 30);
-  }
-  100% {
-    background: transparent;
-  }
 }
\ No newline at end of file
diff --git a/src/styles/components/taskRelations.scss b/src/styles/components/taskRelations.scss
deleted file mode 100644
index 4da758ee3..000000000
--- a/src/styles/components/taskRelations.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-$remove-icon-width: 24px;
-
-.task-relations {
-  &.is-narrow .columns {
-    display: block;
-
-    .column {
-      width: 100%;
-    }
-  }
-
-  .different-list {
-    color: $grey-500;
-    width: auto;
-  }
-
-  .related-tasks {
-    .title {
-      font-size: 1rem;
-      margin: 0;
-    }
-
-    .tasks {
-      margin: 0;
-
-      a:not(.remove) {
-        width: calc(100% - #{$remove-icon-width});
-      }
-
-      .task .tasktext {
-        width: calc(100% - .25rem); // Magic .25rem extra space
-      }
-
-      .remove {
-        width: $remove-icon-width;
-        text-align: center;
-      }
-    }
-  }
-
-  .none {
-    font-style: italic;
-    text-align: center;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 99e8e3c15..ca8aeaf58 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -1,211 +1,41 @@
-.tasks-container {
-	display: flex;
-
-	.tasks {
-		width: 100%;
-
-		.ghost {
-			border-radius: $radius;
-			background: $grey-100;
-			border: 2px dashed $grey-300;
-
-			* {
-				opacity: 0;
-			}
-		}
-	}
-
-	&.has-task-edit-open {
-		flex-direction: column;
-
-		@media screen and (min-width: $tablet) {
-			flex-direction: row;
-
-			.tasks {
-				width: 66%;
-			}
-		}
-	}
-
-	.taskedit {
-		width: 33%;
-		margin-right: 1rem;
-		margin-left: .5rem;
-
-		@media screen and (max-width: $tablet) {
-			width: 100%;
-			border-radius: 0;
-			margin: 0;
-			border-left: 0;
-			border-right: 0;
-			border-bottom: 0;
-		}
-	}
-}
-
+// FIXME: These classes are used all over.
+// very hard to untangle
+// they have many overwrites at different positions
 .tasks {
 	margin-top: 1rem;
 	padding: 0;
 	text-align: left;
 
+	
+	@media screen and (max-width: $tablet) {
+		max-width: 100%;
+	}
+
+	&.short {
+		@media screen and (min-width: $tablet) {
+			max-width: 53vw;
+		}
+	}
+
+	.progress {
+		// overwrite bulma
+		margin-bottom: 0;
+	}
+
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}
 
 	.task {
-		display: flex;
-		flex-wrap: wrap;
-		padding: .4rem;
-		transition: background-color $transition;
-		align-items: center;
-		cursor: pointer;
 		margin: 0 .5rem;
-		border-radius: $radius;
-		border: 2px solid transparent;
-
+	
 		&:first-child {
 			margin-top: .5rem;
 		}
-
+	
 		&:last-child {
 			margin-bottom: .5rem;
-		}
-
-		&:hover {
-			background-color: $grey-100;
-		}
-
-		.tasktext,
-		&.tasktext {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			display: inline-block;
-			flex: 1 0 50%;
-
-			.overdue {
-				color: $red;
-			}
-		}
-
-		.task-list {
-			width: auto;
-			color: $grey-400;
-			font-size: .9rem;
-			white-space: nowrap;
-		}
-
-		.fancycheckbox span {
-			display: none;
-		}
-
-		.color-bubble {
-			height: 10px;
-			flex: 0 0 10px;
-		}
-
-		.tag {
-			margin: 0 0.5rem;
-		}
-
-		.avatar {
-			border-radius: 50%;
-			vertical-align: bottom;
-			margin-left: 5px;
-			height: 27px;
-			width: 27px;
-		}
-
-		.list-task-icon {
-			margin-left: 6px;
-
-			&:not(:first-of-type) {
-				margin-left: 8px;
-			}
-
-		}
-
-		a {
-			color: $text;
-			transition: color ease $transition-duration;
-
-			&:hover {
-				color: $grey-900;
-			}
-		}
-
-		.favorite {
-			opacity: 0;
-			text-align: center;
-			width: 27px;
-			transition: opacity $transition, color $transition;
-
-			&:hover {
-				color: $orange;
-			}
-
-			&.is-favorite {
-				opacity: 1;
-				color: $orange;
-			}
-		}
-
-		&:hover .favorite {
-			opacity: 1;
-		}
-
-		.handle {
-			opacity: 0;
-			transition: opacity $transition;
-			margin-right: .25rem;
-			cursor: grab;
-		}
-
-		&:hover .handle {
-			opacity: 1;
-		}
-
-		.fancycheckbox {
-			height: 18px;
-			padding-top: 0;
-			padding-right: .5rem;
-
-			span {
-				display: none;
-			}
-		}
-
-		.tasktext.done {
-			text-decoration: line-through;
-			color: $grey-500;
-		}
-
-		span.parent-tasks {
-			color: $grey-500;
-			width: auto;
-		}
-
-		.remove {
-			color: $red;
-		}
-
-		input[type="checkbox"] {
-			vertical-align: middle;
-		}
-
-		.settings {
-			float: right;
-			width: 24px;
-			cursor: pointer;
-		}
-
-		&.loader-container.is-loading:after {
-			top: calc(50% - 1rem);
-			left: calc(50% - 1rem);
-			width: 2rem;
-			height: 2rem;
-			border-left-color: $grey-300;
-			border-bottom-color: $grey-300;
+			border-bottom: none;
 		}
 	}
 
@@ -214,26 +44,15 @@
 		font-size: .9rem;
 	}
 
-	.progress {
-		width: 50px;
-		margin: 0 0.5rem 0 0;
-		flex: 3 1 auto;
-
-		@media screen and (max-width: $tablet) {
-			margin: 0.5rem 0 0 0;
-			order: 1;
-			width: 100%;
-		}
-	}
-
-	.task:last-child {
-		border-bottom: none;
-	}
 }
 
+// FIXME: seems only necessary for
+// - relatedTasks.vue
+// - singleTaskInList.vue
 .is-menu-enabled .tasks .task {
 	span:not(.tag), a {
-		.tasktext, &.tasktext {
+		.tasktext,
+		&.tasktext {
 			@media screen and (max-width: $desktop) {
 				max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
 			}
@@ -247,128 +66,10 @@
 	}
 }
 
-.taskedit {
-	.priority-select {
-		.select, select {
-			width: 100%;
-		}
-	}
-
-	ul.assingees {
-		list-style: none;
-		margin: 0;
-
-		li {
-			padding: 0.5rem 0.5rem 0;
-
-			a {
-				float: right;
-				color: $red;
-				transition: all $transition;
-			}
-		}
-	}
-
-	.tag {
-		margin-right: 0.5rem;
-		margin-bottom: 0.5rem;
-
-		&:last-child {
-			margin-right: 0;
-		}
-	}
-}
-
-.show-tasks {
-	h3 {
-		text-align: left;
-
-		&.nothing {
-			text-align: center;
-			margin-top: 3rem;
-		}
-
-		.input {
-			width: 190px;
-			vertical-align: middle;
-			margin: .5rem 0;
-		}
-	}
-
-	img {
-		margin-top: 2rem;
-	}
-
-	.user img {
-		margin: 0;
-	}
-}
-
-.defer-task {
-	$defer-task-max-width: 350px;
-
-	position: absolute;
-	width: 100%;
-	max-width: $defer-task-max-width;
-	border-radius: $radius;
-	border: 1px solid $grey-200;
-	padding: 1rem;
-	margin: 1rem;
-	background: $white;
-	color: $text;
-	cursor: default;
-	z-index: 10;
-	box-shadow: $shadow-lg;
-
-	input.input {
-		display: none;
-	}
-
-	.flatpickr-calendar {
-		margin: 0 auto;
-		box-shadow: none;
-
-		span {
-			width: auto !important;
-		}
-	}
-
-	.defer-days {
-		justify-content: space-between;
-		display: flex;
-		margin: .5rem 0;
-	}
-
-	@media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
-		left: .5rem;
-		right: .5rem;
-		max-width: 100%;
-		width: calc(100vw - 1rem - 2rem);
-
-		.flatpickr-calendar {
-			max-width: 100%;
-
-			.flatpickr-innerContainer {
-				overflow: scroll;
-			}
-		}
-	}
-}
-
+// FIXME: is only used where <edit-task> is used aswell:
+// - gantt-component.vue
+// - List.vue
+// -> Move the <card> wrapper including this class definition inside <edit-task>
 .is-max-width-desktop .tasks .task {
 	max-width: $desktop;
-}
-
-.tasktext {
-	:focus {
-		box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
-	}
-
-	:focus:not(:focus-visible) {
-		outline: 0;
-	}
-
-	:focus-visible, :-moz-focusring {
-		box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
-	}
-}
+}
\ No newline at end of file
diff --git a/src/styles/components/teams.scss b/src/styles/components/teams.scss
deleted file mode 100644
index acf5b4a74..000000000
--- a/src/styles/components/teams.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-ul.teams {
-  padding: 0;
-  margin-left: 0;
-  overflow: hidden;
-
-  li {
-    list-style: none;
-    margin: 0;
-    border-bottom: 1px solid $border;
-
-    a {
-      color: #363636;
-      display: block;
-      padding: 0.5rem 1rem;
-      transition: background-color $transition;
-
-      &:hover {
-        background: $grey-100;
-      }
-    }
-  }
-
-  li:last-child {
-    border-bottom: none;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/components/base/tooltip.scss b/src/styles/components/tooltip.scss
similarity index 91%
rename from src/styles/components/base/tooltip.scss
rename to src/styles/components/tooltip.scss
index a31b61466..20acf5792 100644
--- a/src/styles/components/base/tooltip.scss
+++ b/src/styles/components/tooltip.scss
@@ -1,3 +1,5 @@
+// FIXME: https://www.bram.us/2021/09/13/dont-attach-tooltips-to-document-body/
+
 .tooltip {
   visibility: collapse;
   z-index: 10000;
diff --git a/src/styles/theme/fonts.scss b/src/styles/fonts.scss
similarity index 100%
rename from src/styles/theme/fonts.scss
rename to src/styles/fonts.scss
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 000000000..1aa66c090
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,17 @@
+@import "fonts";
+
+@import "transitions";
+
+// This imports are the same as in "bulma/bulma.sass"
+// with the expeption of the bulma utilities.
+// They are imported globally in variables.scss
+@import "bulma/sass/base/_all";
+@import "bulma/sass/elements/_all";
+@import "bulma/sass/form/_all";
+@import "bulma/sass/components/_all";
+@import "bulma/sass/grid/_all";
+@import "bulma/sass/helpers/_all";
+@import "bulma/sass/layout/_all";
+
+@import "theme";
+@import "components";
\ No newline at end of file
diff --git a/src/styles/theme/_all.scss b/src/styles/theme/_all.scss
deleted file mode 100644
index 1afff997d..000000000
--- a/src/styles/theme/_all.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'theme';
-
-@import 'content';
-@import 'form';
-@import 'link-share';
-@import 'loading';
-@import 'navigation';
-@import 'notification';
-@import 'offline';
-@import 'update-notification';
-@import 'background';
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
new file mode 100644
index 000000000..f56ea1d08
--- /dev/null
+++ b/src/styles/theme/_index.scss
@@ -0,0 +1,11 @@
+@import "scrollbars";
+
+@import "theme";
+
+@import "background";
+@import "content";
+@import "form";
+@import "link-share";
+@import "loading";
+@import "navigation";
+@import "notification";
\ No newline at end of file
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 0db72d0a8..e57ef22ca 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -1,4 +1,5 @@
-.app-container.has-background, .link-share-container.has-background {
+.app-container.has-background,
+.link-share-container.has-background {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -31,13 +32,4 @@
       border-radius: $radius !important;
     }
   }
-}
-
-.link-share-container.has-background .view {
-  background: transparent;
-  border: none;
-
-  .logout .button {
-    box-shadow: none;
-  }
 }
\ No newline at end of file
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index de219f839..2edbdbfd4 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -1,75 +1,10 @@
-.app-container {
-  min-height: calc(100vh - 65px);
-  @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height;
-  }
-
-  .app-content {
-    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-    z-index: 2;
-
-    &.is-menu-enabled {
-      margin-left: $navbar-width;
-    }
-
-    @media screen and (max-width: $tablet) {
-      margin-left: 0;
-      padding-top: 1.5rem;
-      min-height: calc(100vh - 4rem);
-
-      &.is-menu-enabled {
-        min-width: 100%;
-        margin-left: 0;
-      }
-    }
-
-    .card {
-      background: $white;
-    }
-	  
-	&.task\.detail {
-		padding-left: 0;
-		padding-right: 0;
-	}
-  }
-}
-
-.no-auth-wrapper {
-  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
-  min-height: 100vh;
-
-  .noauth-container {
-    max-width: 450px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 1rem;
-
-    @media screen and (max-width: 450px) {
-      .login-buttons {
-        flex-direction: column;
-
-        .control:first-child {
-          margin-bottom: 1rem;
-        }
-      }
-    }
-  }
-}
-
-.media-content {
-  width: calc(100% - 48px - 2rem);
-}
-
 .content h3 {
-  .icon, .is-small {
+  .icon,
+  .is-small {
     font-size: 1rem;
   }
 }
 
-.underline-none {
-  text-decoration: none !important;
-}
-
 .table.has-actions {
   border-top: 1px solid $grey-100;
   border-radius: 4px;
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index e33835a0f..b5bbf0c5c 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -1,39 +1,3 @@
-.button {
-  transition: all $transition;
-  border: 0;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  font-weight: bold;
-  height: $button-height;
-  box-shadow: $shadow-sm;
-
-  &.is-hovered,
-  &:hover {
-    box-shadow: $shadow-md;
-  }
-
-  &.fullheight {
-    padding-right: 7px;
-    height: 100%;
-  }
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
-  }
-
-  &.is-primary.is-outlined:hover {
-    color: $white;
-  }
-
-  &.is-small {
-    border-radius: $radius;
-  }
-}
-
 .field.has-addons .button {
   height: 2.5rem;
   margin-left: 0 !important;
@@ -95,8 +59,9 @@
     height: 100%;
 }
 
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  z-index: 0;
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  z-index: 4;
 }
 
 // Buttons icons
@@ -104,19 +69,9 @@
   margin-right: 0.05rem !important;
 }
 
-// menu buttons
-.button-bottom {
-  margin-bottom: 1rem;
-}
-
-.button-right {
-  float: right;
-}
-
-.control.has-icons-left .icon, .control.has-icons-right .icon {
-  z-index: 4;
-}
-
+// FIXME: used for
+// - the <h1> in heading.vue
+// - the <h2> in Kanban.vue
 // Contenteditable form
 .input.title {
   font-size: 1.8rem;
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index a38856f29..cafb41c90 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -1,49 +1,24 @@
-.link-share-view {
-  .logo {
-    max-width: 300px;
-    width: 90%;
-    margin: 2rem 0 1.5rem;
-  }
-
-  .column {
-    max-width: 100%;
-  }
-
-  .card {
-    background: $white;
-  }
-
-  .title {
-    text-shadow: 0 0 1rem $white;
-  }
-}
-
 .field.has-addons.no-input-mobile {
   .control:first-child {
     width: 100%;
+
+		@media screen and (max-width: $tablet) {
+				display: none;
+		}
   }
 
   .button {
     height: 40px;
+
+		@media screen and (max-width: $tablet) {
+			border-radius: $radius !important;
+		}
   }
-
-  @media screen and (max-width: $tablet) {
-    .control:first-child {
-      display: none;
-    }
-
-    .button {
-      border-radius: $radius !important;
-    }
-  }
-}
-
-.sharables-list:not(.card-content) {
-  overflow-y: auto
 }
 
 .link-share-container {
-  &.has-background,&.list\.kanban-view {
+  &.has-background,
+	&.list\.kanban-view {
     .container {
       max-width: 100vw;
 
@@ -60,14 +35,12 @@
     max-width: 100%;
   }
 
-  .loader-container, .gantt-chart-container {
-    > .card {
-      box-shadow: none !important;
-      border: none;
+  .loader-container, .gantt-chart-container > .card {
+		box-shadow: none !important;
+		border: none;
 
-      .task-add {
-        padding: 1rem 0 0;
-      }
-    }
+		.task-add {
+			padding: 1rem 0 0;
+		}
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
index 49c7310d2..a4a76a4c4 100644
--- a/src/styles/theme/loading.scss
+++ b/src/styles/theme/loading.scss
@@ -1,32 +1,30 @@
-.loader-container {
-  &.is-loading {
-    position: relative;
-    pointer-events: none;
-    opacity: 0.5;
+// FIXME: move to loading.vue 
+.loader-container.is-loading {
+	position: relative;
+	pointer-events: none;
+	opacity: 0.5;
 
-    &:after {
-      @include loader;
-      position: absolute;
-      top: calc(50% - 2.5rem);
-      left: calc(50% - 2.5rem);
-      width: 5rem;
-      height: 5rem;
-      border-width: 0.25rem;
-    }
-  }
+	&::after {
+		@include loader;
+		position: absolute;
+		top: calc(50% - 2.5rem);
+		left: calc(50% - 2.5rem);
+		width: 5rem;
+		height: 5rem;
+		border-width: 0.25rem;
+	}
 }
 
-.spinner {
-  &.is-loading {
-    pointer-events: none;
+// FIXME: move to ShowTasks.vue 
+.spinner.is-loading {
+	pointer-events: none;
 
-    &:after {
-      @include loader;
-      width: 2rem;
-      height: 2rem;
-      margin-left: calc(50% - 1rem);
-      margin-top: 1rem;
-      border-width: 0.25rem;
-    }
-  }
-}
+	&::after {
+		@include loader;
+		width: 2rem;
+		height: 2rem;
+		margin-left: calc(50% - 1rem);
+		margin-top: 1rem;
+		border-width: 0.25rem;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 67f588e33..894ef2e12 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,406 +1,7 @@
-.navbar {
-	z-index: 4 !important;
+// FIXME: create <MenuButton> component
 
-	.navbar-dropdown {
-		box-shadow: $navbar-dropdown-boxed-shadow;
-		top: 101%;
-	}
-
-	.navbar-brand {
-		display: flex;
-		align-items: center;
-
-		.logo img {
-			width: $vikunja-nav-logo-full-width;
-		}
-	}
-}
-
-.navbar.main-theme {
-	background: $light-background;
-	z-index: 5 !important;
-	justify-content: space-between;
-	align-items: center;
-
-	.title {
-		margin: 0;
-		font-size: 1.75rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.navbar-end {
-		margin-left: 0;
-		align-items: center;
-		display: flex;
-	}
-
-	@media screen and (max-width: $desktop) {
-		display: flex;
-		justify-content: space-between;
-
-		@media screen and (max-width: $tablet) {
-			.navbar-brand {
-				display: none;
-			}
-
-			.user {
-				width: $user-dropdown-width-mobile;
-				display: flex;
-				align-items: center;
-
-				.dropdown-trigger {
-					line-height: 1;
-
-					.button {
-						padding: 0 .5rem;
-						height: 1rem;
-
-						.icon {
-							width: .5rem;
-						}
-					}
-				}
-
-				.username {
-					display: none;
-				}
-			}
-		}
-	}
-}
-
-.navbar-menu .navbar-item .icon {
-	margin: 0 0.5rem;
-}
-
-.app-container {
-	.namespace-container {
-		background: $vikunja-nav-background;
-		z-index: 6;
-		color: $vikunja-nav-color;
-		padding: 0;
-		transition: all $transition;
-		position: fixed;
-		bottom: 0;
-		top: $navbar-height;
-		overflow-x: auto;
-		width: $navbar-width;
-
-		padding: 0 0 1rem;
-		left: -147vw;
-		bottom: 0;
-
-		@media screen and (max-width: $tablet) {
-			top: 0;
-			width: 70vw;
-		}
-
-		&.is-active {
-			left: 0;
-		}
-
-		.menu {
-			.menu-label {
-				font-size: 1rem;
-				font-weight: 700;
-				font-weight: bold;
-				font-family: $vikunja-font;
-				color: $vikunja-nav-color;
-				font-weight: 500;
-				min-height: 2.5rem;
-				padding-top: 0;
-				padding-left: $navbar-padding;
-
-				overflow: hidden;
-			}
-
-			.menu-label, .menu-list span.list-menu-link, .menu-list a {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				cursor: pointer;
-
-				.list-menu-title {
-					overflow: hidden;
-					text-overflow: ellipsis;
-					width: 100%;
-				}
-
-				.color-bubble {
-					height: 12px;
-					flex: 0 0 12px;
-				}
-
-				.favorite {
-					margin-left: .25rem;
-					transition: opacity $transition, color $transition;
-					opacity: 0;
-
-					&:hover {
-						color: $orange;
-					}
-
-					&.is-favorite {
-						opacity: 1;
-						color: $orange;
-					}
-				}
-
-				&:hover .favorite {
-					opacity: 1;
-				}
-			}
-
-			.menu-label {
-				.color-bubble {
-					width: 14px !important;
-					height: 14px !important;
-				}
-
-				.is-archived {
-					min-width: 85px;
-				}
-			}
-
-			.namespace-title {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.menu-label {
-					margin-bottom: 0;
-					flex: 1 1 auto;
-
-					.name {
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-
-				a:not(.dropdown-item) {
-					color: $vikunja-nav-color;
-					padding: 0 .25rem;
-				}
-
-				.dropdown-trigger {
-					padding: .5rem;
-					cursor: pointer;
-				}
-
-				.toggle-lists-icon {
-					svg {
-						transition: all $transition;
-						transform: rotate(90deg);
-						opacity: 1;
-					}
-
-					&.active svg {
-						transform: rotate(0deg);
-						opacity: 0;
-					}
-				}
-
-				&:hover .toggle-lists-icon svg {
-					opacity: 1;
-				}
-
-				&:not(.has-menu) .toggle-lists-icon {
-					padding-right: 1rem;
-				}
-			}
-
-			.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
-				color: $vikunja-nav-color;
-			}
-
-			.menu-list {
-				li {
-					height: 44px;
-					display: flex;
-					align-items: center;
-
-					.dropdown-trigger {
-						opacity: 0;
-						padding: .5rem;
-						cursor: pointer;
-						transition: $transition;
-					}
-
-					&:hover {
-						background: $white;
-
-						.dropdown-trigger {
-							opacity: 1;
-						}
-					}
-
-					&.loader-container.is-loading:after {
-						width: 1.5rem;
-						height: 1.5rem;
-						top: calc(50% - .75rem);
-						left: calc(50% - .75rem);
-						border-width: 2px;
-					}
-				}
-
-				.flip-list-move {
-					transition: transform $transition-duration;
-				}
-
-				.ghost {
-					background: $grey-200;
-
-					* {
-						opacity: 0;
-					}
-				}
-
-				a:hover {
-					background: transparent;
-				}
-
-				span.list-menu-link, li > a {
-					padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-					transition: all 0.2s ease;
-
-					border-radius: 0;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					width: 100%;
-					border-left: $vikunja-nav-selected-width solid transparent;
-
-					.icon {
-						height: 1rem;
-						vertical-align: middle;
-						padding-right: 0.5rem;
-						
-						&.handle {
-							opacity: 0;
-							transition: opacity $transition;
-							margin-right: .25rem;
-							cursor: grab;
-						}
-
-					}
-					
-					&:hover .icon.handle {
-						opacity: 1;
-					}
-
-					&.router-link-exact-active {
-						color: $primary;
-						border-left: $vikunja-nav-selected-width solid $primary;
-
-						.icon {
-							color: $primary;
-						}
-					}
-
-					&:hover {
-						border-left: $vikunja-nav-selected-width solid $primary;
-					}
-				}
-			}
-
-			.logo {
-				display: none;
-
-				@media screen and (max-width: $tablet) {
-					display: block;
-				}
-			}
-
-			&.namespaces-lists {
-				padding-top: math.div($navbar-padding, 2);
-			}
-
-			&.loader-container.is-loading:after {
-				width: 1.5rem;
-				height: 1.5rem;
-				top: calc(50% - .75rem);
-				left: calc(50% - .75rem);
-				border-width: 2px;
-			}
-
-			.icon {
-				color: $grey-400 !important;
-			}
-		}
-
-		.top-menu {
-			margin-top: math.div($navbar-padding, 2);
-
-			.menu-list {
-				li {
-					font-weight: 500;
-					font-family: $vikunja-font;
-				}
-
-				span.list-menu-link, li > a {
-					padding-left: 2rem;
-					display: inline-block;
-					
-					.icon {
-						padding-bottom: .25rem;
-					}
-				}
-			}
-
-		}
-	}
-}
-
-.navbar {
-	.trigger-button {
-		cursor: pointer;
-		color: $grey-400;
-		padding: .5rem;
-		font-size: 1.25rem;
-		position: relative;
-	}
-
-	> * > .trigger-button {
-		width: $navbar-icon-width;
-	}
-
-	.user {
-		display: flex;
-		align-items: center;
-
-		span {
-			font-family: $vikunja-font;
-		}
-
-		.avatar {
-			border-radius: 100%;
-			vertical-align: middle;
-			height: 40px;
-		}
-
-		.logout-icon {
-			color: $grey-900;
-
-			.icon {
-				vertical-align: middle;
-			}
-		}
-
-		.dropdown-trigger .button {
-			background: none;
-
-			&:focus:not(:active), &:active {
-				outline: none !important;
-				box-shadow: none !important;
-			}
-		}
-	}
-}
-
-.menu-hide-button, .menu-show-button {
+.menu-hide-button,
+.menu-show-button {
 	display: none;
 	z-index: 31;
 	font-weight: bold;
@@ -409,7 +10,8 @@
 	line-height: 1;
 	transition: all $transition;
 
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		height: 1rem;
 		color: $grey-600;
 	}
@@ -419,7 +21,14 @@
 	height: .75rem;
 	width: 2rem;
 
-	&:before, &:after {
+	@media screen and (max-width: $tablet) {
+		display: block;
+		margin-left: $hamburger-menu-icon-spacing;
+	}
+
+	// menu line icon and animationanimation // START
+	&::before,
+	&::after {
 		display: block;
 		content: '';
 		border-top: 3px solid $grey-400;
@@ -427,31 +36,38 @@
 		transition: all $transition;
 	}
 
-	&:before {
+	&::before {
 		margin-bottom: .5rem;
 	}
 
-	&:after {
+	&::after {
 		margin-top: .5rem;
 	}
 
-	&:hover, &:focus {
-		color: $grey-600;
-
-		&:before {
+	&:hover,
+	&:focus {
+		&::before {
 			margin-bottom: .75rem;
 		}
 
-		&:after {
+		&::after {
 			margin-top: .75rem;
 		}
 	}
+	// menu line animation // END
 }
 
 .menu-hide-button {
 	position: fixed;
 
-	&:hover, &:focus {
+	@media screen and (max-width: $tablet) {
+		display: block;
+		top: $hamburger-menu-icon-spacing;
+		right: $hamburger-menu-icon-spacing;
+	}
+
+	&:hover,
+	&:focus {
 		color: $text;
 	}
 }
@@ -460,45 +76,12 @@
 	display: block;
 }
 
-.mobile-overlay {
-	display: none;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: rgba(250, 250, 250, 0.8);
-	z-index: 5;
-	opacity: 0;
-	transition: all $transition;
-}
-
 @media screen and (max-width: $tablet) {
-	.menu-hide-button {
-		display: block;
-		top: $hamburger-menu-icon-spacing;
-		right: $hamburger-menu-icon-spacing;
-	}
-
-	.menu-show-button {
-		display: block;
-		margin-left: $hamburger-menu-icon-spacing;
-	}
-
-	.mobile-overlay {
-		display: block;
-		opacity: 1;
-	}
-
 	.navbar.is-dark .navbar-brand > .navbar-item {
 		margin: 0 auto;
 	}
 }
 
-.logout-icon {
-	margin-right: 0.85rem !important;
-}
-
 .menu-bottom-link {
 	width: 100%;
 	color: $grey-300;
diff --git a/src/styles/theme/notification.scss b/src/styles/theme/notification.scss
index f90a08992..aaf83968c 100644
--- a/src/styles/theme/notification.scss
+++ b/src/styles/theme/notification.scss
@@ -15,8 +15,6 @@
   }
 }
 
-.message {
-  .message-body {
-    border: $thickness solid;
-  }
+.message .message-body {
+	border: $thickness solid;
 }
diff --git a/src/styles/theme/offline.scss b/src/styles/theme/offline.scss
deleted file mode 100644
index 037e3db0a..000000000
--- a/src/styles/theme/offline.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.offline {
-  background: url('@/assets/llama-nightscape.jpg') no-repeat center;
-  background-size: cover;
-  height: 100vh;
-
-  .offline-message {
-    text-align: center;
-    position: absolute;
-    width: 100vw;
-    bottom: 5vh;
-    color: $white;
-    padding: 0 1rem;
-
-    h1 {
-      font-weight: bold;
-      font-size: 1.5rem;
-      text-align: center;
-      color: $white;
-      font-weight: 700 !important;
-      font-size: 1.5rem;
-    }
-  }
-}
diff --git a/src/styles/components/base/scrollbars.scss b/src/styles/theme/scrollbars.scss
similarity index 78%
rename from src/styles/components/base/scrollbars.scss
rename to src/styles/theme/scrollbars.scss
index 92a856e33..29d241067 100644
--- a/src/styles/components/base/scrollbars.scss
+++ b/src/styles/theme/scrollbars.scss
@@ -1,3 +1,8 @@
+$scrollbar-height: 8px;
+$scrollbar-track-color: $grey-200;
+$scrollbar-thumb-color: $grey-300;
+$scrollbar-hover-color: $grey-500;
+
 // Chrome
 ::-webkit-scrollbar {
   width: $scrollbar-height;
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 2004f44f4..b2549db73 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -1,18 +1,3 @@
-// bulma utilities are imported in variables.scss
-@import "bulma/sass/utilities/_all";
-@import "bulma/sass/base/_all";
-@import "bulma/sass/elements/_all";
-@import "bulma/sass/form/_all";
-@import "bulma/sass/components/_all";
-@import "bulma/sass/grid/_all";
-@import "bulma/sass/helpers/_all";
-@import "bulma/sass/layout/_all";
-
-
-@import "fonts";
-
-@import "variables-derived";
-
 *,
 *:hover,
 *:active,
@@ -57,14 +42,29 @@ h6 {
   }
 }
 
+// FIXME: create <ProgressBar> component. used in
+// - attachments.vue
+// - kanban-card.vue
+// - singleTaskInList.vue
 .progress {
   border-radius: $radius-large;
+	width: 50px;
+	margin: 0 0.5rem 0 0;
+	flex: 3 1 auto;
 
-	&::-moz-progress-bar, &::-webkit-progress-value {
+	&::-moz-progress-bar,
+	&::-webkit-progress-value {
 	  background: $grey-500;
 	}
+
+	@media screen and (max-width: $tablet) {
+		margin: 0.5rem 0 0 0;
+		order: 1;
+		width: 100%;
+	}
 }
 
+// FIXME: these helpers should be mixins
 .has-no-border {
   border: none !important;
 }
@@ -82,6 +82,7 @@ h6 {
 	overflow-x: auto;
 }
 
+// FIXME: this should be moved in a Avatar component
 .image.is-avatar {
   border-radius: 100%;
 }
@@ -90,6 +91,8 @@ button.table {
   margin-bottom: 0 !important;
 }
 
+// FIXME: merge with dropdown-item.vue
+// for this to happen the component has to be used everywhere
 .dropdown-item {
   display: flex;
   align-items: center;
@@ -145,10 +148,8 @@ button.table {
   margin-right: 4px;
 }
 
-.dropdown-menu {
-  .dropdown-content {
-    box-shadow: $shadow-md;
-  }
+.dropdown-menu  .dropdown-content {
+	box-shadow: $shadow-md;
 }
 
 .is-strikethrough {
@@ -162,3 +163,8 @@ button.table {
 .dragging-disabled .handle {
 	opacity: 0 !important;
 }
+
+.box {
+  border: 1px solid $grey-200;
+  box-shadow: $shadow-sm;
+}
\ No newline at end of file
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
deleted file mode 100644
index 36cda4225..000000000
--- a/src/styles/theme/update-notification.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.update-notification {
-  margin: 1rem;
-  display: flex;
-  align-items: center;
-  background: $warning;
-  padding: 0 0 0 .5rem;
-  border-radius: $radius;
-  font-size: .9rem;
-  color: $grey-900;
-  justify-content: space-between;
-
-  @media screen and (max-width: $desktop) {
-    & {
-      position: fixed;
-      bottom: 1rem;
-      margin: 0;
-      width: 450px;
-      left: calc(50vw - 225px);
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    & {
-      position: fixed;
-      left: 1rem;
-      right: 1rem;
-      bottom: 1rem;
-      width: auto;
-    }
-  }
-
-  p {
-    text-align: center;
-    width: 100%;
-  }
-
-  .button {
-    margin-left: .5rem;
-  }
-}
diff --git a/src/styles/theme/variables-derived.scss b/src/styles/theme/variables-derived.scss
deleted file mode 100644
index ee5c640f1..000000000
--- a/src/styles/theme/variables-derived.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Variables that are derived from bulma variables need to be included after them
-$mobile: math.div($tablet, 2);
diff --git a/src/styles/utilities/transitions.scss b/src/styles/transitions.scss
similarity index 100%
rename from src/styles/utilities/transitions.scss
rename to src/styles/transitions.scss
diff --git a/src/styles/utilities/_all.scss b/src/styles/utilities/_all.scss
deleted file mode 100644
index 2d0c76dea..000000000
--- a/src/styles/utilities/_all.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'animations';
-@import 'transitions';
diff --git a/src/styles/utilities/animations.scss b/src/styles/utilities/animations.scss
deleted file mode 100644
index a0550a16c..000000000
--- a/src/styles/utilities/animations.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@keyframes bounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    transform: translate3d(0, -4px, 0);
-  }
-}
\ No newline at end of file
diff --git a/src/styles/variables/_all.scss b/src/styles/variables/_all.scss
deleted file mode 100644
index 8fa73e444..000000000
--- a/src/styles/variables/_all.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import 'colors';
-@import 'shadows';
-@import 'variables';
-
-// the default values get overwritten by the definitions above
-@import "bulma/sass/utilities/_all";
\ No newline at end of file
diff --git a/src/styles/variables/_index.scss b/src/styles/variables/_index.scss
index ba1a82473..bef2ad0cb 100644
--- a/src/styles/variables/_index.scss
+++ b/src/styles/variables/_index.scss
@@ -3,4 +3,10 @@
 @import "variables";
 
 // the default values get overwritten by the definitions above
-@import "bulma/sass/utilities/_all";
\ No newline at end of file
+@import "bulma/sass/utilities/_all";
+
+// this is needed so that the shared form variables are globally defined aswell 
+@import "bulma/sass/form/shared";
+
+// since $tablet is defined by bulma we can just define it after importing the utilities
+$mobile: math.div($tablet, 2);
\ No newline at end of file
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 33f344072..6317d87a4 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 $white: #fff;
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
@@ -8,34 +6,24 @@ $red: #ff4136;
 $blue: #1973ff;
 $primary: $blue;
 
-$info-invert: #fff;
+$info-invert: $white;
+
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
+$vikunja-font: 'Quicksand', sans-serif;
+
 $thickness: 1px;
 $pagination-current-border: $primary;
 $navbar-item-active-color: $primary;
+
 $dropdown-content-shadow: none;
-$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
+$dropdown-item-hover-background-color: $grey-100;
+
 $bulmaswatch-import-font: false !default;
 $light-background: $grey-100;
-$transition-duration: 100ms;
-$flash-background-duration: 750ms;
-
-$vikunja-font: 'Quicksand', sans-serif;
-
-$navbar-padding: 2rem;
-$vikunja-nav-background: $light-background;
-$vikunja-nav-color: $grey-700;
-$vikunja-nav-selected-width: 0.4rem;
-$vikunja-nav-logo-full-width: 164px;
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;
 
-$scrollbar-height: 8px;
-$scrollbar-track-color: $grey-200;
-$scrollbar-thumb-color: $grey-300;
-$scrollbar-hover-color: $grey-500;
-
 $button-height: 34px;
 
 $switch-view-height: 2.69rem;
@@ -47,6 +35,7 @@ $navbar-height: 4rem;
 $navbar-width: 300px;
 $navbar-icon-width: 40px;
 
-$editor-border-color: #ddd;
 
-$dropdown-item-hover-background-color: $grey-100;
+$lists-per-row: 5;
+$list-height: 150px;
+$list-spacing: 1rem;
diff --git a/src/styles/vikunja.scss b/src/styles/vikunja.scss
deleted file mode 100644
index 448985380..000000000
--- a/src/styles/vikunja.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'theme/all';
-@import 'utilities/all';
-@import 'components/all';
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d5231bd90..c31febc0e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -141,3 +141,15 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-cards-wrapper-2-rows {
+	flex-wrap: wrap;
+	max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
+	overflow: hidden;
+	
+	@media screen and (max-width: $mobile) {
+		max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 68e417d9e..cca9b3d52 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -148,3 +148,54 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.switch-view-container {
+  @media screen and (max-width: $tablet) {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.switch-view {
+  background: $white;
+  display: inline-flex;
+  border-radius: $radius;
+  font-size: .75rem;
+  box-shadow: $shadow-sm;
+  height: $switch-view-height;
+  margin-bottom: 1rem;
+  padding: .5rem;
+
+  a {
+    padding: .25rem .5rem;
+    display: block;
+    border-radius: $radius;
+
+    transition: all 100ms;
+
+    &:not(:last-child) {
+      margin-right: .5rem;
+    }
+
+    &.is-active,
+	&:hover {
+      color: $white;
+    }
+
+    &.is-active {
+      background: $primary;
+      font-weight: bold;
+      box-shadow: $shadow-xs;
+    }
+
+    &:hover {
+      background: $primary;
+    }
+  }
+}
+
+.is-archived .notification.is-warning {
+  margin-bottom: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index fc78156f8..bb3ead15d 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -158,3 +158,86 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-background-setting {
+
+  .unsplash-link {
+    text-align: right;
+    font-size: .8rem;
+
+    a {
+      color: $grey-800;
+    }
+  }
+
+  .image-search-result {
+    margin-top: 1rem;
+    display: flex;
+    flex-flow: row wrap;
+
+    .image {
+      width: calc(100% / 5 - 1rem);
+      height: 120px;
+      margin: .5rem;
+      background-size: cover;
+      background-position: center;
+      display: flex;
+
+      @media screen and (min-width: $desktop) {
+        &:nth-child(5n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: $desktop) {
+        width: calc(100% / 4 - 1rem);
+
+        &:nth-child(4n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: $tablet) {
+        width: calc(100% / 2 - 1rem);
+
+        &:nth-child(2n) {
+          break-after: always;
+        }
+      }
+
+      @media screen and (max-width: ($mobile)) {
+        width: calc(100% - 1rem);
+
+        &:nth-child(1n) {
+          break-after: always;
+        }
+      }
+
+      .info {
+        align-self: flex-end;
+        display: block;
+        opacity: 0;
+        width: 100%;
+        padding: .25rem 0;
+        text-align: center;
+        background: rgba(0, 0, 0, 0.5);
+        font-size: .75rem;
+        font-weight: bold;
+        color: $white;
+        transition: opacity $transition;
+      }
+
+      &:hover .info {
+        opacity: 1;
+      }
+    }
+  }
+
+  .is-load-more-button {
+    margin: 1rem auto 0 !important;
+    display: block;
+    width: 200px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index f5eab4967..b3628238b 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -103,4 +103,68 @@ export default {
 		},
 	},
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+.gantt-chart-container {
+	padding-bottom: 1rem;
+}
+
+.gantt-options {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	@media screen and (max-width: $tablet) {
+		flex-direction: column;
+	}
+
+	.range-picker {
+		display: flex;
+		margin-bottom: 1rem;
+		width: 50%;
+
+		@media screen and (max-width: $tablet) {
+			flex-direction: column;
+			width: 100%;
+		}
+
+		.field {
+			margin-bottom: 0;
+			width: 33%;
+
+			&:not(:last-child) {
+				padding-right: .5rem;
+			}
+
+			@media screen and (max-width: $tablet) {
+				width: 100%;
+				max-width: 100%;
+				margin-top: .5rem;
+				padding-right: 0 !important;
+			}
+
+			&, .input {
+				font-size: .8rem;
+			}
+
+			.select, .select select {
+				height: auto;
+				width: 100%;
+				font-size: .8rem;
+			}
+
+
+			.label {
+				font-size: .9rem;
+				padding-left: .4rem;
+			}
+		}
+	}
+}
+
+// vue-draggable overwrites
+.vdr.active::before {
+	display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index cc456aad0..1aa1a3c89 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -591,3 +591,172 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+$bucket-background: $grey-100;
+$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
+$bucket-width: 300px;
+$bucket-header-height: 60px;
+$bucket-right-margin: 1rem;
+
+$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
+$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
+$filter-container-height: '1rem - #{$switch-view-height}';
+
+// FIXME:
+.app-content.list\.kanban {
+	padding-bottom: 0 !important;
+}
+
+.kanban {
+
+	overflow-x: auto;
+	overflow-y: hidden;
+	height: calc(#{$crazy-height-calculation});
+	margin: 0 -1.5rem;
+	padding: 0 1.5rem;
+
+	@media screen and (max-width: $tablet) {
+		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
+	}
+
+	&-bucket-container {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.ghost {
+		background: transparent !important;
+		border: 3px dashed $grey-300 !important;
+		box-shadow: none !important;
+
+		* {
+			opacity: 0;
+		}
+	}
+
+	.bucket {
+		background-color: $bucket-background;
+		border-radius: $radius;
+		position: relative;
+
+		margin: 0 $bucket-right-margin 0 0;
+		max-height: 100%;
+		min-height: 20px;
+		width: $bucket-width;
+
+		.tasks {
+			max-height: calc(#{$crazy-height-calculation-tasks});
+			overflow: auto;
+			margin-top: 0;
+
+			@media screen and (max-width: $tablet) {
+				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
+			}
+
+			.dropper {
+				&, > div {
+					min-height: 40px;
+				}
+			}
+		}
+
+		.move-card-move {
+			transition: transform $transition-duration;
+		}
+
+		.no-move {
+			transition: transform 0s;
+		}
+
+		h2 {
+			font-size: 1rem;
+			margin: 0;
+			font-weight: 600 !important;
+		}
+
+		&.new-bucket {
+			// Because of reasons, this button ignores the margin we gave it to the right.
+			// To make it still look like it has some, we modify the container to have a padding of 1rem,
+			// which is the same as the margin it should have. Then we make the container itself bigger
+			// to hide the fact we just made the button smaller.
+			min-width: calc(#{$bucket-width} + 1rem);
+			background: transparent;
+			padding-right: 1rem;
+
+			.button {
+				background: $bucket-background;
+				width: 100%;
+			}
+		}
+
+		a.dropdown-item {
+			padding-right: 1rem;
+		}
+
+		&.is-collapsed {
+			transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
+			// Using negative margins instead of translateY here to make all other buckets fill the empty space
+			margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
+			margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
+			cursor: pointer;
+
+			.tasks, .bucket-footer {
+				display: none;
+			}
+		}
+	}
+
+	.bucket-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: .5rem;
+		height: $bucket-header-height;
+
+		.limit {
+			padding-left: .5rem;
+			font-weight: bold;
+
+			&.is-max {
+				color: $red;
+			}
+		}
+
+		.title.input {
+			height: auto;
+			padding: .4rem .5rem;
+			display: inline-block;
+			cursor: pointer;
+		}
+	}
+
+	:deep(.dropdown-trigger) {
+		cursor: pointer;
+		padding: .5rem;
+	}
+
+	.bucket-footer {
+		padding: .5rem;
+
+		.button {
+			background-color: transparent;
+
+			&:hover {
+				background-color: $white;
+			}
+		}
+	}
+}
+
+.task-dragging {
+	transition: transform 0.18s ease;
+	transform: rotateZ(3deg)
+}
+
+.move-card-leave-from,
+.move-card-leave-to,
+.move-card-leave-active {
+	display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 7324b4603..11ce974f5 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -309,3 +309,54 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.tasks-container {
+	display: flex;
+
+	&.has-task-edit-open {
+		flex-direction: column;
+
+		@media screen and (min-width: $tablet) {
+			flex-direction: row;
+
+			.tasks {
+				width: 66%;
+			}
+		}
+	}
+
+	.tasks {
+		width: 100%;
+
+		.ghost {
+			border-radius: $radius;
+			background: $grey-100;
+			border: 2px dashed $grey-300;
+
+			* {
+				opacity: 0;
+			}
+		}
+	}
+
+	.taskedit {
+		width: 33%;
+		margin-right: 1rem;
+		margin-left: .5rem;
+
+		@media screen and (max-width: $tablet) {
+			width: 100%;
+			border-radius: 0;
+			margin: 0;
+			border-left: 0;
+			border-right: 0;
+			border-bottom: 0;
+		}
+	}
+}
+
+.list-view .task-add {
+	padding: 1rem 1rem 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 8a5f86058..f90a597d3 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -134,7 +134,7 @@
 							</router-link>
 						</td>
 						<td v-if="activeColumns.done">
-							<div class="is-done" v-if="t.done">Done</div>
+							<Done :is-done="t.done" variant="small" />
 						</td>
 						<td v-if="activeColumns.title">
 							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
@@ -190,6 +190,7 @@
 
 <script>
 import taskList from '../../../components/tasks/mixins/taskList'
+import Done from '@/components/misc/Done.vue'
 import User from '../../../components/misc/user'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import Labels from '../../../components/tasks/partials/labels'
@@ -203,6 +204,7 @@ import Pagination from '@/components/misc/pagination.vue'
 export default {
 	name: 'Table',
 	components: {
+		Done,
 		FilterPopup,
 		Sort,
 		Fancycheckbox,
@@ -304,3 +306,21 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.table-view {
+	.table {
+		background: transparent;
+		overflow-x: auto;
+		overflow-y: hidden;
+
+		th {
+			white-space: nowrap;
+		}
+
+		.user {
+			margin: 0;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/migrator/Migrate.vue b/src/views/migrator/Migrate.vue
index c081e1235..3f3a6e343 100644
--- a/src/views/migrator/Migrate.vue
+++ b/src/views/migrator/Migrate.vue
@@ -34,3 +34,20 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.migration-services-overview {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    width: 100px;
+    text-transform: capitalize;
+    margin-right: 1rem;
+
+    img {
+      display: block;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index 21f68cd73..addaa596e 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -101,3 +101,49 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.namespaces-list {
+  .button.new-namespace {
+    float: right;
+    margin-left: 1rem;
+
+    @media screen and (max-width: $mobile) {
+      float: none;
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .show-archived-check {
+    margin-bottom: 1rem;
+  }
+
+  .namespace {
+    &:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    h1 {
+      display: flex;
+      align-items: center;
+    }
+
+    .is-archived {
+      font-size: 0.75rem;
+      border: 1px solid $grey-500;
+      color: $grey !important;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: $vikunja-font;
+      background: rgba($white, 0.75);
+      margin-left: .5rem;
+    }
+
+    .lists {
+      display: flex;
+      flex-flow: row wrap;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index f9f1a9d37..9da80d15b 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -254,3 +254,30 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.show-tasks {
+	h3 {
+		text-align: left;
+
+		&.nothing {
+			text-align: center;
+			margin-top: 3rem;
+		}
+
+		:deep(.input) {
+			width: 190px;
+			vertical-align: middle;
+			margin: .5rem 0;
+		}
+	}
+
+	img {
+		margin-top: 2rem;
+	}
+
+	.user img {
+		margin: 0;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 9ccefd402..b27f3ef67 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -692,3 +692,236 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+$flash-background-duration: 750ms;
+
+.task-view {
+  // This is a workaround to hide the llama background from the top on the task detail page
+  margin-top: -1.5rem;
+  padding: 1rem;
+  background-color: $light-background;
+
+  @media screen and (max-width: $desktop) {
+    padding-bottom: 0;
+  }
+
+  .subtitle {
+    color: $grey-500;
+	margin-bottom: 1rem;
+
+    a {
+      color: $grey-800;
+    }
+  }
+
+  h3 .button {
+    vertical-align: middle;
+  }
+
+  .icon.is-grey {
+    color: $grey-400;
+  }
+
+  :deep(.heading) {
+    display: flex;
+    justify-content: space-between;
+    text-transform: none;
+    align-items: center;
+
+    @media screen and (max-width: $tablet) {
+      flex-direction: column;
+      align-items: start;
+    }
+
+    .title {
+      margin-bottom: 0;
+	}
+
+   .title.input {
+		// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
+		min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+
+		@media screen and (max-width: $tablet) {
+			margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
+		}
+    }
+
+    .title.task-id {
+      color: $grey-400;
+      white-space: nowrap;
+    }
+
+  }
+
+  .date-input {
+    display: flex;
+    align-items: center;
+
+    a.remove {
+      color: $red;
+      vertical-align: middle;
+      padding-left: .5rem;
+      line-height: 1;
+    }
+  }
+
+  :deep(.datepicker) {
+    width: 100%;
+
+    a.show {
+      color: $text;
+      padding: .25rem .5rem;
+      transition: background-color $transition;
+      border-radius: $radius;
+      display: block;
+      margin: .1rem 0;
+
+      &:hover {
+        background: $white;
+      }
+    }
+
+    &.disabled a.show:hover {
+      background: transparent;
+    }
+  }
+
+  .details {
+    padding-bottom: 0.75rem;
+    flex-flow: row wrap;
+    margin-bottom: 0;
+
+    .detail-title {
+      display: block;
+      color: $grey-400;
+    }
+
+    .none {
+      font-style: italic;
+    }
+
+    // Break after the 2nd element
+    .column:nth-child(2n) {
+      page-break-after: always; // CSS 2.1 syntax
+      break-after: always; // New syntax
+    }
+
+    &.labels-list,
+	.assignees {
+      :deep(.multiselect) {
+        .input-wrapper {
+          &:not(:focus-within):not(:hover) {
+            background: transparent !important;
+            border-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.details),
+  :deep(.heading) {
+    .input:not(.has-defaults),
+    .textarea,
+    .select:not(.has-defaults) select {
+      border-color: transparent;
+      background: transparent;
+      cursor: pointer;
+      transition: all $transition-duration;
+
+      &::placeholder {
+        color: $text-light;
+        opacity: 1;
+        font-style: italic;
+      }
+
+      &:not(:disabled) {
+        &:hover, &:active {
+          background: $input-background-color;
+          border-color: $input-border-color;
+          cursor: text;
+        }
+
+        &:focus {
+          background: $input-background-color;
+          border-color: $input-focus-border-color;
+        }
+      }
+    }
+
+    .select:not(.has-defaults):after {
+      opacity: 0;
+    }
+
+    .select:not(.has-defaults):hover:after {
+      opacity: 1;
+    }
+  }
+
+  .attachments {
+    margin-bottom: 0;
+
+    table tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  .action-buttons {
+    a.button {
+      width: 100%;
+      margin-bottom: .5rem;
+      justify-content: left;
+    }
+  }
+
+  .created {
+    font-size: .75rem;
+    color: $grey-500;
+    text-align: right;
+  }
+
+  .checklist-summary {
+    margin-left: .25rem;
+  }	
+}
+
+.task-view-container {
+  padding-bottom: 1rem;
+	
+  @media screen and (max-width: $desktop) {
+	padding-bottom: 0;
+  }
+
+  .task-view * {
+    opacity: 0;
+    transition: opacity 50ms ease;
+  }
+
+  &.is-loading {
+    opacity: 1;
+
+    .task-view * {
+      opacity: 0;
+    }
+  }
+
+  &.visible:not(.is-loading) .task-view * {
+    opacity: 1;
+  }
+}
+
+.flash-background-enter-from,
+.flash-background-enter-active  {
+  animation: flash-background $flash-background-duration ease 1;
+}
+
+@keyframes flash-background {
+  0% {
+    background: lighten($primary, 30);
+  }
+  100% {
+    background: transparent;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 65fd5bd4b..741c9565b 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -298,3 +298,13 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.card.is-fullwidth {
+  margin-bottom: 1rem;
+
+  .content {
+    padding: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index d6dd95afe..2fc6f87e7 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -49,3 +49,32 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+ul.teams {
+  padding: 0;
+  margin-left: 0;
+  overflow: hidden;
+
+  li {
+    list-style: none;
+    margin: 0;
+    border-bottom: 1px solid $border;
+
+    a {
+      color: #363636;
+      display: block;
+      padding: 0.5rem 1rem;
+      transition: background-color $transition;
+
+      &:hover {
+        background: $grey-100;
+      }
+    }
+  }
+
+  li:last-child {
+    border-bottom: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 0ad4dac0a..9267d4243 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -222,7 +222,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.login-buttons {
+	@media screen and (max-width: 450px) {
+		flex-direction: column;
+
+		.control:first-child {
+			margin-bottom: 1rem;
+		}
+	}
+}
+
 .button {
 	margin: 0 0.4rem 0 0;
 }