diff --git a/src/features/kanban/Bucket.vue b/src/features/kanban/Bucket.vue
index 917211750..9434c5a94 100644
--- a/src/features/kanban/Bucket.vue
+++ b/src/features/kanban/Bucket.vue
@@ -1,132 +1,3 @@
-<script setup lang="ts">
-import {ref, computed, nextTick} from 'vue'
-import {useStore} from 'vuex'
-import {useI18n} from 'vue-i18n'
-import Draggable from 'vuedraggable'
-import { useVModels } from '@vueuse/core'
-
-import {success} from '@/message'
-import BucketModel from '@/models/bucket'
-import TaskModel from '@/models/task'
-
-import Dropdown from '@/components/misc/dropdown.vue'
-import KanbanCard from '@/feature/kanban/KanbanCard.vue'
-import KanbanTaskNew from '@/feature/kanban/KanbanTaskNew.vue'
-
-const MIN_SCROLL_HEIGHT_PERCENT = 0.25
-
-const props = defineProps<{
-	bucketIndex: number
-	isCollapsed: boolean
-	canWrite: boolean
-	bucket: BucketModel
-	isOnlyBucketLeft: boolean
-	dragOptions: Object
-	params: Object
-	shouldAcceptDrop: boolean
-	isDraggingTask: boolean
-	tasksUpdating: { [taskId: TaskModel['id']]: boolean },
-}>()
-const emit = defineEmits([
-	'openDeleteBucketModal',
-	'dragstart',
-	'dragend',
-	'update:isCollapsed',
-])
-
-const {t} = useI18n()
-const store = useStore()
-
-const { isCollapsed } = useVModels(props, emit)
-
-const bucketTitleEditable = ref(true)
-async function saveBucketTitle(bucketTitle: string) {
-		await store.dispatch('kanban/updateBucketTitle', {
-			id: props.bucket.id,
-			title: bucketTitle,
-		})
-		bucketTitleEditable.value = false
-		success({message: t('list.kanban.bucketTitleSavedSuccess')})
-}
-
-async function focusBucketTitle(e: Event) {
-	// This little helper allows us to drag a bucket around at the title without focusing on it right away.
-	bucketTitleEditable.value = true
-	await nextTick();
-	
-	(e.target as HTMLInputElement).focus()
-}
-
-const hasLimitInput = ref(false)
-
-async function setBucketLimit(limit: number) {
-	if (limit < 0) {
-		return
-	}
-
-	await store.dispatch('kanban/updateBucket', {
-		...props.bucket,
-		limit,
-	})
-	success({message: t('list.kanban.bucketLimitSavedSuccess')})
-}
-
-async function toggleDoneBucket() {
-	await store.dispatch('kanban/updateBucket', {
-		...props.bucket,
-		isDoneBucket: !props.bucket.isDoneBucket,
-	})
-	success({message: t('list.kanban.doneBucketSavedSuccess')})
-}
-
-function updateTasks(tasks: TaskModel[]) {
-	store.commit('kanban/setBucketById', {
-		...props.bucket,
-		tasks,
-	})
-}
-
-function handleTaskContainerScroll(el: HTMLElement) {
-	if (!el) {
-		return
-	}
-	const scrollTopMax = el.scrollHeight - el.clientHeight
-	const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
-	if (scrollTopMax > threshold) {
-		return
-	}
-
-	store.dispatch('kanban/loadNextTasksForBucket', {
-		listId: props.bucket.listId,
-		params: props.params,
-		bucketId: props.bucket.id,
-	})
-}
-
-const taskContainer = ref<HTMLElement>()
-
-const taskDraggableTaskComponentData = computed(() => ({
-	ref: 'taskContainer',
-	onScroll: (event: Event) => handleTaskContainerScroll(event.target as HTMLElement),
-	type: 'transition',
-	tag: 'div',
-	name: !props.isDraggingTask ? 'move-card' : null,
-	class: [
-		'tasks',
-		{'dragging-disabled': !props.canWrite},
-	],
-}))
-
-function scrollTaskContainerToBottom() {
-	if (!taskContainer.value) {
-		return
-	}
-	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
-}
-
-
-</script>
-
 <template>
 	<div
 		class="bucket"
@@ -245,7 +116,7 @@ function scrollTaskContainerToBottom() {
 		>
 			<template #item="{element: task}">
 				<div class="task-item">
-					<kanban-card
+					<TaskCard
 						class="kanban-card" 
 						:task="task"
 						:loading="tasksUpdating[task.id]"
@@ -254,7 +125,7 @@ function scrollTaskContainerToBottom() {
 			</template>
 
 			<template #footer>
-				<KanbanTaskNew
+				<TaskNew
 					v-if="canWrite"
 					:bucketId="bucket.id"
 					:listId="bucket.listId"
@@ -266,6 +137,135 @@ function scrollTaskContainerToBottom() {
 	</div>
 </template>
 
+<script setup lang="ts">
+import {ref, computed, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useI18n} from 'vue-i18n'
+import Draggable from 'vuedraggable'
+import { useVModels } from '@vueuse/core'
+
+import {success} from '@/message'
+import BucketModel from '@/models/bucket'
+import TaskModel from '@/models/task'
+
+import Dropdown from '@/components/misc/dropdown.vue'
+import TaskCard from '@/features/kanban/TaskCard.vue'
+import TaskNew from '@/features/kanban/TaskNew.vue'
+
+const MIN_SCROLL_HEIGHT_PERCENT = 0.25
+
+const props = defineProps<{
+	bucketIndex: number
+	isCollapsed: boolean
+	canWrite: boolean
+	bucket: BucketModel
+	isOnlyBucketLeft: boolean
+	dragOptions: Object
+	params: Object
+	shouldAcceptDrop: boolean
+	isDraggingTask: boolean
+	tasksUpdating: { [taskId: TaskModel['id']]: boolean },
+}>()
+const emit = defineEmits([
+	'openDeleteBucketModal',
+	'dragstart',
+	'dragend',
+	'update:isCollapsed',
+])
+
+const {t} = useI18n()
+const store = useStore()
+
+const { isCollapsed } = useVModels(props, emit)
+
+const bucketTitleEditable = ref(true)
+async function saveBucketTitle(bucketTitle: string) {
+		await store.dispatch('kanban/updateBucketTitle', {
+			id: props.bucket.id,
+			title: bucketTitle,
+		})
+		bucketTitleEditable.value = false
+		success({message: t('list.kanban.bucketTitleSavedSuccess')})
+}
+
+async function focusBucketTitle(e: Event) {
+	// This little helper allows us to drag a bucket around at the title without focusing on it right away.
+	bucketTitleEditable.value = true
+	await nextTick();
+	
+	(e.target as HTMLInputElement).focus()
+}
+
+const hasLimitInput = ref(false)
+
+async function setBucketLimit(limit: number) {
+	if (limit < 0) {
+		return
+	}
+
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		limit,
+	})
+	success({message: t('list.kanban.bucketLimitSavedSuccess')})
+}
+
+async function toggleDoneBucket() {
+	await store.dispatch('kanban/updateBucket', {
+		...props.bucket,
+		isDoneBucket: !props.bucket.isDoneBucket,
+	})
+	success({message: t('list.kanban.doneBucketSavedSuccess')})
+}
+
+function updateTasks(tasks: TaskModel[]) {
+	store.commit('kanban/setBucketById', {
+		...props.bucket,
+		tasks,
+	})
+}
+
+function handleTaskContainerScroll(el: HTMLElement) {
+	if (!el) {
+		return
+	}
+	const scrollTopMax = el.scrollHeight - el.clientHeight
+	const threshold = el.scrollTop + el.scrollTop * MIN_SCROLL_HEIGHT_PERCENT
+	if (scrollTopMax > threshold) {
+		return
+	}
+
+	store.dispatch('kanban/loadNextTasksForBucket', {
+		listId: props.bucket.listId,
+		params: props.params,
+		bucketId: props.bucket.id,
+	})
+}
+
+const taskContainer = ref<HTMLElement>()
+
+const taskDraggableTaskComponentData = computed(() => ({
+	ref: 'taskContainer',
+	onScroll: (event: Event) => handleTaskContainerScroll(event.target as HTMLElement),
+	type: 'transition',
+	tag: 'div',
+	name: !props.isDraggingTask ? 'move-card' : null,
+	class: [
+		'tasks',
+		{'dragging-disabled': !props.canWrite},
+	],
+}))
+
+function scrollTaskContainerToBottom() {
+	if (!taskContainer.value) {
+		return
+	}
+	taskContainer.value.scrollTop = taskContainer.value.scrollHeight
+}
+
+
+</script>
+
 <style lang="scss" scoped>
 .bucket {
 	--bucket-header-height: 60px;