diff --git a/resources/css/app.css b/resources/css/app.css
index 3fb73c3..3d82668 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -42,6 +42,9 @@ @theme inline {
     --color-success: var(--success);
     --color-success-foreground: var(--success-foreground);
 
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -136,6 +139,8 @@ :root {
     --destructive-foreground: hsl(0 0% 98%);
     --success: var(--color-lime-400);
     --success-foreground: var(--color-foreground);
+    --warning: var(--color-amber-300);
+    --warning-foreground: var(--color-amber-900);
     --border: hsl(0 0% 92.8%);
     --input: var(--color-zinc-100);
     --ring: hsl(0 0% 3.9%);
@@ -158,7 +163,7 @@ :root {
     --status-draft: var(--color-gray-100);
     --status-sent: var(--color-sky-400);
     --status-paid: var(--color-lime-500);
-    --status-due: var(--color-amber-300);
+    --status-due: var(--color-warning);
     --status-reminded: var(--color-destructive);
     --scrollbar-thumb: --alpha(black / 20%);
     --scrollbar-track: transparent;
@@ -168,22 +173,24 @@ .dark {
     --background: var(--color-neutral-800);
     --foreground: var(--color-neutral-300);
     --card: var(--color-neutral-800);
-    --card-foreground: hsl(0 0% 98%);
+    --card-foreground: var(--color-neutral-300);
     /* --popover: hsl(0 0% 3.9%); */
     --popover: var(--color-neutral-900);
-    --popover-foreground: hsl(0 0% 98%);
+    --popover-foreground: var(--color-neutral-300);
     --primary: var(--color-orange-300);
     --primary-foreground: var(--color-orange-400);
     --secondary: hsl(0 0% 14.9%);
-    --secondary-foreground: hsl(0 0% 98%);
+    --secondary-foreground: var(--color-neutral-300);
     --muted: var(--color-neutral-700);
-    --muted-foreground: var(--color-neutral-400);
+    --muted-foreground: var(--color-neutral-500);
     --accent: oklch(25% 0 0);
-    --accent-foreground: hsl(0 0% 98%);
+    --accent-foreground: var(--color-neutral-300);
     --destructive: var(--color-red-600);
     --destructive-foreground: var(--color-red-200);
     --success: var(--color-lime-900);
     --success-foreground: var(--color-lime-400);
+    --warning: var(--color-amber-900);
+    --warning-foreground: var(--color-amber-400);
     --border: var(--color-neutral-700);
     --input: var(--color-neutral-700);
     --ring: var(--color-neutral-500);
@@ -205,7 +212,7 @@ .dark {
     --status-draft: var(--color-zinc-500);
     --status-sent: var(--color-sky-700);
     --status-paid: var(--color-lime-700);
-    --status-due: var(--color-amber-900);
+    --status-due: var(--color-warning);
     --status-reminded: var(--color-destructive-foreground);
     --scrollbar-thumb: --alpha(white / 35%);
 }
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 203e603..7d8d80f 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -94,36 +94,48 @@ const todos = ref<Todo[]>([])
                     <!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
 
                     <!-- TODO: make TodoList component -->
-                    <ul class="flex flex-col">
+                    <ul>
                         <li v-for="todo in todos"
-                            class="grid grid-cols-[calc(var(--spacing)_*_6)_auto] gap-y-0 gap-x-2 items-start border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
+                            class="flex gap-3 items-baseline border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
                             <!-- TODO: make Todo component -->
+
+                            <!-- Check mark -->
                             <div
-                                class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border-1 flex items-center justify-center">
+                                class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border flex items-center justify-center">
                                 <div
-                                    class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
+                                    class="absolute inset-[2px] rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
                                     <input type="checkbox" class="absolute -inset-2 opacity-0"
-                                        :checked="todo.status?.toLowerCase() == 'completed'">
+                                        :checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
                                 </div>
                             </div>
 
-                            <div class="flex items-center gap-2">
-                                <span class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none"
+                            <!-- Text -->
+                            <div class="grow overflow-hidden truncate">
+                                <!-- Priority -->
+                                <span v-if="todo.priority < 5 && todo.priority > 0"
+                                    class="mr-2 text-destructive">!!!</span>
+                                <span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
+                                <span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
+                                <!-- Title -->
+                                <label :for="todo.id" class="my-0 px-0 text-base! border-0 outline-0 shadow-none"
                                     :class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
                                         todo.title
-                                    }}</span>
-                                <div class="grow"></div>
-                                <div class="text-muted-foreground">
-                                    <PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
-                                    <ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
-                                    <Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
+                                    }}</label>
+
+                                <!-- Date -->
+                                <div class="text-sm text-muted-foreground flex gap-3 items-center mt-1">
+                                    <span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate) }}</span>
+                                    <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
                                 </div>
                             </div>
 
-                            <div class="text-sm text-muted-foreground flex gap-3 items-center">
-                                <span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate)}}</span>
-                                <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
+                            <!-- Icon -->
+                            <div class="relative top-0.75 text-muted-foreground shrink-0">
+                                <PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
+                                <ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
+                                <Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
                             </div>
+
                         </li>
                     </ul>