diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 6ddd776a8..b9121ce98 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -12,7 +12,7 @@
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
+			<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -65,8 +65,9 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent, type PropType} from 'vue'
+<script lang="ts" setup>
+import {ref, computed} from 'vue'
+import {useRouter} from 'vue-router'
 
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
 import User from '../../../components/misc/user.vue'
@@ -80,65 +81,43 @@ import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatD
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useTaskStore} from '@/stores/tasks'
 
-export default defineComponent({
-	name: 'kanban-card',
-	components: {
-		ChecklistSummary,
-		Done,
-		PriorityLabel,
-		User,
-		Labels,
-	},
-	data() {
-		return {
-			loadingInternal: false,
-			TASK_DEFAULT_COLOR,
-		}
-	},
-	props: {
-		task: {
-			type: Object as PropType<ITask>,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		formatDateLong,
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = true
-			try {
-				const done = !task.done
-				await useTaskStore().update({
-					...task,
-					done,
-				})
-			} finally {
-				this.loadingInternal = false
-			}
-		},
-		openTaskDetail() {
-			this.$router.push({
-				name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			})
-		},
-	},
+const router = useRouter()
+
+const loadingInternal = ref(false)
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	loading: boolean,
+}>(), {
+	loading: false,
 })
+
+const color = computed(() => {
+	return props.task.getHexColor
+		? props.task.getHexColor()
+		: TASK_DEFAULT_COLOR
+})
+
+async function toggleTaskDone(task: ITask) {
+	loadingInternal.value = true
+	try {
+		const done = !task.done
+		await useTaskStore().update({
+			...task,
+			done,
+		})
+	} finally {
+		loadingInternal.value = false
+	}
+}
+
+function openTaskDetail() {
+	router.push({
+		name: 'task.detail',
+		params: {id: props.task.id},
+		state: {backdropView: router.currentRoute.value.fullPath},
+	})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modelTypes/ITask.ts b/src/modelTypes/ITask.ts
index 6616a680f..80eaad693 100644
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@@ -47,4 +47,6 @@ export interface ITask extends IAbstract {
 
 	listId: IList['id'] // Meta, only used when creating a new task
 	bucketId: IBucket['id']
+	
+	getHexColor(): string
 }
\ No newline at end of file
diff --git a/src/models/task.ts b/src/models/task.ts
index 641b2bc53..5f4e01d70 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 	console.debug('This browser does not support triggered notifications')
 }
 
-export function	getHexColor(hexColor: string) {
+export function	getHexColor(hexColor: string): string {
 	if (hexColor === '' || hexColor === '#') {
 		return TASK_DEFAULT_COLOR
 	}