diff --git a/resources/js/components/Todos.vue b/resources/js/components/Todos.vue
index 130d8bf..4eb5a6c 100644
--- a/resources/js/components/Todos.vue
+++ b/resources/js/components/Todos.vue
@@ -12,7 +12,6 @@ const props = defineProps<{
 }>()
 const todos = ref<Todo[]>([])
 const emit = defineEmits(['update:modelValue'])
-const showCompleted = ref(props.showCompleted)
 
 watch(() => props.modelValue, value => {
     todos.value = value as Todo[];
@@ -55,6 +54,12 @@ const groupedTodos = computed(() => {
     return groups
 })
 
+const todosEmpty = (todos: Todo[]) => {
+    if (todos.length === 0) return true
+    if (!props.showCompleted && !todos.some(todo => todo.status?.toLowerCase() !== 'completed')) return true
+    return false
+}
+
 const todoTitle = (title: string) => {
     // If there's no title, return empty string
     if (!title) return '';
@@ -82,71 +87,75 @@ const todoBadge = (title: string) => {
 const shouldDisplay = (todo: Todo) => {
     if (todo.status?.toLowerCase() !== 'completed') return true
 
-    return showCompleted.value; // && moment(todo.dueDate).isSameOrAfter(moment(new Date()), 'day')
+    return props.showCompleted;
 }
 
 </script>
 
 <template>
     <div v-if="todos" v-for="(todos, groupKey) in groupedTodos" :key="groupKey">
-        <!-- Group header -->
-        <h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
-            'text-destructive! font-bold': groupKey === 'overdue',
-            'text-warning! font-bold': groupKey === 'today'
-        }">
-            {{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
-        </h3>
-        <hr>
+        <div v-if="!todosEmpty(todos)">
+            <!-- Group header -->
+            <h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
+                'text-destructive! font-bold': groupKey === 'overdue',
+                'text-warning! font-bold': groupKey === 'today'
+            }">
+                {{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
+            </h3>
 
-        <ul>
-            <li v-for="todo in todos" class="flex gap-3 items-baseline py-2.5 pr-1 transition-all"
-                :class="{ 'scale-y-0 h-0 py-0! my-0 origin-top': !shouldDisplay(todo) }">
+            <hr>
 
-                <!-- Check mark -->
-                <div
-                    class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary border flex items-center justify-center">
-                    <div class="absolute inset-0.5 rounded-full bg-transparent has-[input:checked]:bg-primary">
-                        <input type="checkbox" class="absolute -inset-2 opacity-0"
-                            :checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
+            <ul>
+                <li v-for="todo in todos" class="flex gap-3 items-baseline py-2.5 pr-1 transition-all"
+                    :class="{ 'scale-y-0 h-0 py-0! my-0 origin-top': !shouldDisplay(todo) }">
+
+                    <!-- Check mark -->
+                    <div
+                        class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary border flex items-center justify-center">
+                        <div class="absolute inset-0.5 rounded-full bg-transparent has-[input:checked]:bg-primary">
+                            <input type="checkbox" class="absolute -inset-2 opacity-0"
+                                :checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
+                        </div>
                     </div>
-                </div>
 
-                <!-- 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>
+                    <!-- 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 border-0 outline-0 shadow-none" :class="{
-                        'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
-                    }">
-                        {{ todoTitle(todo.title) }}
-                    </label>
-
-                    <!-- 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">{{ todoBadge(todo.title)
-                        }}
-                        </Badge>
-                        <span v-if="todo.dueDate" :class="{
-                            'text-destructive! font-bold': groupKey === 'overdue',
-                            'text-warning! font-bold': groupKey === 'today'
+                        <!-- Title -->
+                        <label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
+                            'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
                         }">
-                            {{ toDuration(todo.dueDate) }}</span>
-                        <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
+                            {{ todoTitle(todo.title) }}
+                        </label>
+
+                        <!-- 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">{{
+                                todoBadge(todo.title)
+                                }}
+                            </Badge>
+                            <span v-if="todo.dueDate" :class="{
+                                'text-destructive! font-bold': groupKey === 'overdue',
+                                'text-warning! font-bold': groupKey === 'today'
+                            }">
+                                {{ toDuration(todo.dueDate) }}</span>
+                            <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
+                        </div>
                     </div>
-                </div>
 
-                <!-- Icon -->
-                <div class="relative top-0.75 text-muted-foreground shrink-0">
-                    <PhoneCall v-if="todo.type?.name === 'phoneCall'" :size="18" />
-                    <ClipboardCheck v-else-if="todo.type?.name === 'todo'" :size="18" />
-                    <Mail v-else-if="todo.type?.name === 'mail'" :size="18" />
-                </div>
+                    <!-- Icon -->
+                    <div class="relative top-0.75 text-muted-foreground shrink-0">
+                        <PhoneCall v-if="todo.type?.name === 'phoneCall'" :size="18" />
+                        <ClipboardCheck v-else-if="todo.type?.name === 'todo'" :size="18" />
+                        <Mail v-else-if="todo.type?.name === 'mail'" :size="18" />
+                    </div>
 
-            </li>
-        </ul>
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
\ No newline at end of file