diff --git a/resources/js/components/Todos.vue b/resources/js/components/Todos.vue
index 34c22fe..e09f001 100644
--- a/resources/js/components/Todos.vue
+++ b/resources/js/components/Todos.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue"
 import { Todo } from "@/types";
-import { toLocalDate, toDuration, isToday, daysFromNow } from "@/lib/utils";
+import { toDuration, isToday, isSoon, daysFromNow } from "@/lib/utils";
 import { Mail, PhoneCall, ClipboardCheck, Repeat } from "lucide-vue-next"
 import { Badge } from '@/components/ui/crm-badge'
 
@@ -131,9 +131,10 @@ const shouldDisplay = (todo: Todo) => {
     <div v-if="todos" v-for="group in groupedTodos">
         <div v-if="!todosEmpty(group.todos)">
             <!-- Group header -->
-            <h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
-                'text-destructive! font-bold': group.key === 'overdue',
-                'text-warning! font-bold': group.key === 'today'
+            <h3 class="mt-4 mb-2 text-sm font-bold" :class="{
+                'text-destructive': group.key === 'overdue',
+                'text-warning': group.key === 'today',
+                'text-muted-foreground': group.key === 'noDueDate'
             }">
                 {{ groupNameForKey(group.key) }}
             </h3>
@@ -161,7 +162,10 @@ const shouldDisplay = (todo: Todo) => {
                         <span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
 
                         <!-- Title -->
-                        <label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
+                        <label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none text-sm" :class="{
+                            'font-bold': group.key === 'overdue',
+                            'font-semibold': group.key === 'tomorrow' || group.key === 'today',
+                            'font-medium': isSoon(todo.dueDate || ''),
                             'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
                         }">
                             {{ todoTitle(todo.title) }}
@@ -169,7 +173,7 @@ const shouldDisplay = (todo: Todo) => {
 
                         <!-- Date -->
                         <div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
-                            <Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="outline">{{
+                            <Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="secondary">{{
                                 todoBadge(todo.title)
                             }}
                             </Badge>