diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index 9060e7aa..75f6843a 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -9,7 +9,6 @@
 @import "teams";
 @import "migrator";
 @import "table-view";
-@import "kanban";
 @import "list-backgrounds";
 @import "namespaces";
 @import "legal";
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
deleted file mode 100644
index 420c2880..00000000
--- 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/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index cc456aad..20df0931 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -591,3 +591,321 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+$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 {
+				-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;
+				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;
+
+					.tag, .assignees, .icon, .priority-label {
+						margin-top: .25rem;
+						margin-right: .25rem;
+					}
+
+					.assignees {
+						display: flex;
+
+						.user {
+							display: inline;
+							margin: 0;
+
+							img {
+								margin: 0;
+							}
+						}
+					}
+
+					.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-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;
+		}
+	}
+
+	::v-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)
+}
+</style>
\ No newline at end of file