diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1db9854c..106beb62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- [todo] Migrated todo route and all corresponding components (TodoList, TodoInput, Todo, TodoListOverlay, +page) to Svelte 5 runes syntax ($props, $state, $derived, $effect) for improved reactivity and type safety.
+- [todo] Enhanced Todo component with improved UI/UX including clickable rows, better visual feedback, and proper accessibility.
+- [todo] Improved TodoList with sorted todos (unchecked first), better state management using $derived, and enhanced history management.
+- [todo] Enhanced TodoListOverlay with better form handling, proper state management, and automatic list selection after creation.
+- [todo] Updated translations for global menu button text to be more descriptive.
 - [food-scan] Migrated food-scan route and all corresponding components (FoodScan, ContentOutput, DebugInformation) to Svelte 5 runes syntax ($props, $state, $derived, $effect) for improved reactivity and type safety.
 - [uno-sort] Migrated uno-sort route and ToggledApplicationInfo component to Svelte 5 runes syntax ($props, $state, $derived, $effect) for improved reactivity and type safety.
 - [settings] Migrated settings route and all corresponding components (+page, SettingsDashboard, OnlinePersistenceCheck, ThemeSwitch, LanguageSwitch, BackgroundSwitch, IdentifierInformation) to Svelte 5 runes syntax ($props, $state, $derived, $effect) for improved reactivity and type safety.
diff --git a/frontend/src/lib/components/todo/Todo.svelte b/frontend/src/lib/components/todo/Todo.svelte
index 1e755371..31025fa5 100644
--- a/frontend/src/lib/components/todo/Todo.svelte
+++ b/frontend/src/lib/components/todo/Todo.svelte
@@ -1,33 +1,55 @@
 <script lang="ts">
+  // 1. IMPORTS
   import type { Todo } from '$lib/types/todo.ts';
   import { t } from '$lib/util/translations';
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import Checkbox from 'carbon-components-svelte/src/Checkbox/Checkbox.svelte';
   import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
 
-  export let todo: Todo;
-  export let deleteTodo;
-  export let todoChecked;
+  // 2. PROPS
+  let {
+    todo,
+    deleteTodo,
+    todoChecked,
+  }: {
+    todo: Todo;
+    deleteTodo: () => void;
+    todoChecked: () => void;
+  } = $props();
+
+  // 5. DERIVED
+  let todoTitle = $derived(todo.title);
+  let isDone = $derived(todo.done);
 </script>
 
-<section>
-  <Checkbox
-    bind:checked={todo['done']}
-    labelText="Label text"
-    on:click={todoChecked}
-  >
-    <span slot="labelText" class={todo?.done ? 'ml1 striked' : 'ml1'}>
-      {todo?.title}
+<section onclick={todoChecked}>
+  <label class="checkbox-wrapper">
+    <input
+      type="checkbox"
+      checked={isDone}
+      onchange={todoChecked}
+      class="hidden-checkbox"
+    />
+    <Checkbox checked={isDone} readonly />
+    <span class={isDone ? 'striked todo-label' : 'todo-label'}>
+      {todoTitle}
     </span>
-  </Checkbox>
-  <Button
-    kind="danger"
-    size="small"
-    iconDescription={$t('page.todos.deleteTodo')}
-    tooltipAlignment="end"
-    icon={TrashCan}
-    on:click={deleteTodo}
-  />
+  </label>
+  <div
+    onclick={(e) => e.stopPropagation()}
+    role="button"
+    tabindex="-1"
+    style="display: contents;"
+  >
+    <Button
+      kind="danger"
+      size="small"
+      iconDescription={$t('page.todos.deleteTodo')}
+      tooltipAlignment="end"
+      icon={TrashCan}
+      onclick={deleteTodo}
+    />
+  </div>
 </section>
 
 <style lang="scss">
@@ -36,9 +58,47 @@
     justify-content: space-between;
     align-items: center;
     margin-top: 0.5rem;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    background-color: transparent;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+      transform: translateX(4px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .checkbox-wrapper :global(.bx--checkbox-wrapper) {
+    margin: 0;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  .hidden-checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .todo-label {
+    user-select: none;
+    font-weight: 600;
   }
 
   .striked {
     text-decoration: line-through;
+    opacity: 0.6;
+    font-weight: 100;
   }
 </style>
diff --git a/frontend/src/lib/components/todo/TodoInput.svelte b/frontend/src/lib/components/todo/TodoInput.svelte
index 37b71cd1..0ae60261 100644
--- a/frontend/src/lib/components/todo/TodoInput.svelte
+++ b/frontend/src/lib/components/todo/TodoInput.svelte
@@ -1,35 +1,41 @@
 <script lang="ts">
+  // 1. IMPORTS
   import { todoStore } from '$lib/util/stores/store-todo';
   import { initialized, t } from '$lib/util/translations';
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
   import InputWithButton from '../shared/custom-carbon-components/InputWithButton.svelte';
 
-  export let listId;
+  // 2. PROPS
+  let { listId }: { listId: string } = $props();
 
-  let newTodoName = '';
+  // 4. STATE
+  let newTodoName = $state('');
 
+  // 8. FUNCTIONS
   const saveTodo = () => {
     if (newTodoName) {
       todoStore.update((todoListArray) => {
-        const list = todoListArray.find((list) => list.id === listId);
-        list.todos.push({
-          id: crypto.randomUUID(),
-          title: newTodoName,
-          done: false,
+        return todoListArray.map((list) => {
+          if (list.id === listId) {
+            return {
+              ...list,
+              todos: [
+                ...list.todos,
+                {
+                  id: crypto.randomUUID(),
+                  title: newTodoName,
+                  done: false,
+                },
+              ],
+              history: Array.from(new Set([...list.history, newTodoName])),
+            };
+          }
+          return list;
         });
-        return [...todoListArray];
       });
-      addToHistory(newTodoName);
       newTodoName = '';
     }
   };
-  const addToHistory = (todoName) => {
-    todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      list.history = Array.from(new Set(list.history).add(todoName));
-      return todoListArray;
-    });
-  };
 </script>
 
 {#if $initialized}
diff --git a/frontend/src/lib/components/todo/TodoList.svelte b/frontend/src/lib/components/todo/TodoList.svelte
index 615cb3ae..ed878045 100644
--- a/frontend/src/lib/components/todo/TodoList.svelte
+++ b/frontend/src/lib/components/todo/TodoList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  // 1. IMPORTS
   import { todoStore } from '$lib/util/stores/store-todo';
   import { initialized, t } from '$lib/util/translations';
   import Accordion from 'carbon-components-svelte/src/Accordion/Accordion.svelte';
@@ -9,33 +10,70 @@
   import Todo from './Todo.svelte';
   import TodoInput from './TodoInput.svelte';
 
-  export let listId;
+  // 2. PROPS
+  let { listId }: { listId: string } = $props();
 
-  $: list = $todoStore.find((list) => list.id === listId);
-  $: if (listId) console.log('listId', listId);
-  $: if (list) console.log('list', list);
+  // 5. DERIVED
+  let list = $derived.by(() => {
+    const allLists = $todoStore;
+    const foundList = listId ? allLists.find((l) => l.id === listId) : undefined;
 
+    if (foundList) {
+      // Sort todos: unchecked first, checked last
+      const sortedTodos = [...foundList.todos].sort((a, b) => {
+        if (a.done === b.done) return 0;
+        return a.done ? 1 : -1;
+      });
+
+      return {
+        ...foundList,
+        todos: sortedTodos,
+      };
+    }
+
+    return undefined;
+  });
+
+  // 8. FUNCTIONS
   const deleteTodo = (todoId: string) => {
     todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      const todoIndex = list.todos.findIndex((todo) => todo.id === todoId);
-      list.todos.splice(todoIndex, 1);
-      return todoListArray;
+      return todoListArray.map((list) => {
+        if (list.id === listId) {
+          return {
+            ...list,
+            todos: list.todos.filter((todo) => todo.id !== todoId),
+          };
+        }
+        return list;
+      });
     });
   };
   const checkTodo = (todoId: string) => {
     todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      const todoIndex = list.todos.findIndex((todo) => todo.id === todoId);
-      list.todos[todoIndex].done = !list.todos[todoIndex].done;
-      return todoListArray;
+      return todoListArray.map((list) => {
+        if (list.id === listId) {
+          return {
+            ...list,
+            todos: list.todos.map((todo) =>
+              todo.id === todoId ? { ...todo, done: !todo.done } : todo,
+            ),
+          };
+        }
+        return list;
+      });
     });
   };
   const clearHistory = () => {
     todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      list.history = [];
-      return todoListArray;
+      return todoListArray.map((list) => {
+        if (list.id === listId) {
+          return {
+            ...list,
+            history: [],
+          };
+        }
+        return list;
+      });
     });
   };
   const selectRandomTagColor = ():
@@ -80,6 +118,7 @@
     ];
     return colors[Math.floor(Math.random() * colors.length)];
   };
+
   const removeEntryFromHistory = (event) => {
     const tagText =
       event.explicitOriginalTarget.parentElement.parentElement.textContent.trim() ||
@@ -88,11 +127,15 @@
     if (!tagText) return;
 
     todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      list.history = list.history.filter((entry) => {
-        return entry !== tagText;
+      return todoListArray.map((list) => {
+        if (list.id === listId) {
+          return {
+            ...list,
+            history: list.history.filter((entry) => entry !== tagText),
+          };
+        }
+        return list;
       });
-      return todoListArray;
     });
   };
   const readdTodoFromHistory = (event) => {
@@ -101,9 +144,18 @@
     if (!tagText) return;
 
     todoStore.update((todoListArray) => {
-      const list = todoListArray.find((list) => list.id === listId);
-      list.todos.push({ id: crypto.randomUUID(), title: tagText, done: false });
-      return [...todoListArray];
+      return todoListArray.map((list) => {
+        if (list.id === listId) {
+          return {
+            ...list,
+            todos: [
+              ...list.todos,
+              { id: crypto.randomUUID(), title: tagText, done: false },
+            ],
+          };
+        }
+        return list;
+      });
     });
   };
 </script>
@@ -126,7 +178,7 @@
               {#if list?.history?.length > 0}
                 <div class="history_list">
                   <div class="history_entry_list">
-                    {#each list?.history as entry}
+                    {#each list.history as entry (entry)}
                       <Tag
                         filter
                         interactive
@@ -162,14 +214,12 @@
       </div>
 
       <div class="mt1 list_content">
-        {#each list?.todos as todo}
-          {#if todo}
-            <Todo
-              {todo}
-              deleteTodo={() => deleteTodo(todo.id)}
-              todoChecked={() => checkTodo(todo.id)}
-            />
-          {/if}
+        {#each list?.todos || [] as todo (todo.id)}
+          <Todo
+            {todo}
+            deleteTodo={() => deleteTodo(todo.id)}
+            todoChecked={() => checkTodo(todo.id)}
+          />
         {/each}
       </div>
     </div>
diff --git a/frontend/src/lib/components/todo/TodoListOverlay.svelte b/frontend/src/lib/components/todo/TodoListOverlay.svelte
index 74bdb1cd..a4add8d8 100644
--- a/frontend/src/lib/components/todo/TodoListOverlay.svelte
+++ b/frontend/src/lib/components/todo/TodoListOverlay.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  // 1. IMPORTS
   import type { TodoList } from '$lib/types/todo.ts';
   import { isEmoji, isEnter } from '$lib/util/helper.ts';
   import { listOverlayOptionsStore } from '$lib/util/stores/store-other';
@@ -10,62 +11,82 @@
   import Tooltip from 'carbon-components-svelte/src/Tooltip/Tooltip.svelte';
   import Save from 'carbon-icons-svelte/lib/Save.svelte';
 
-  export let listId;
-  export let listName = '';
-  export let listEmoji = '';
+  // 2. PROPS
+  let {
+    listId,
+    listName = '',
+    listEmoji = '',
+  }: {
+    listId: string;
+    listName?: string;
+    listEmoji?: string;
+  } = $props();
 
-  $: listIndex = $todoStore.findIndex((list) => list.id === listId);
+  // 4. STATE
+  let localListName = $state<string>(listName);
+  let localListEmoji = $state<string>(listEmoji);
 
-  $: modalStates = () => {
+  // 5. DERIVED
+  let listIndex = $derived($todoStore.findIndex((list) => list.id === listId));
+  let modalStates = $derived.by(() => {
     let classes = '';
-
-    if (!listName || (!isEmoji(listEmoji) && listEmoji !== ''))
+    if (!localListName || (!isEmoji(localListEmoji) && localListEmoji !== ''))
       classes += 'modal_unsavable';
     if ($listOverlayOptionsStore.type === 'new')
       classes += ' modal_undeletable';
-
     return classes;
-  };
+  });
 
+  // 6. EFFECTS
+  $effect(() => {
+    localListName = listName || '';
+    localListEmoji = listEmoji || '';
+  });
+
+  // 8. FUNCTIONS
   const createList = () => {
-    const list: TodoList = {
+    const newList: TodoList = {
       id: listId || crypto.randomUUID(),
-      name: listName,
-      emoji: listEmoji || '📝',
+      name: localListName,
+      emoji: localListEmoji || '📝',
       history: [],
       todos: [],
     };
     todoStore.update((n) => {
-      return [...n, list];
+      return [...n, newList];
     });
 
     closeOverlay();
     celebrate();
+
+    // Dispatch event to parent to set this as active list
+    window.dispatchEvent(new CustomEvent('list-created', { detail: { id: newList.id } }));
   };
   const updateList = () => {
     todoStore.update((n) => {
-      console.log(listIndex);
-      console.log(n);
-      n[listIndex].name = listName;
-      n[listIndex].emoji = listEmoji || '📝';
-      return n;
+      return n.map((list, index) => {
+        if (index === listIndex) {
+          return {
+            ...list,
+            name: localListName,
+            emoji: localListEmoji || '📝',
+          };
+        }
+        return list;
+      });
     });
 
     closeOverlay();
   };
-  const deleteList = (listId) => {
-    const deletionTodoListIndex = $todoStore.findIndex(
-      (todoList) => todoList.id === listId,
-    );
+  const deleteList = () => {
     todoStore.update((n) => {
-      n.splice(deletionTodoListIndex, 1);
-      return n;
+      return n.filter((list) => list.id !== listId);
     });
     closeOverlay();
   };
-  const proceedOnEnter = (event) => {
+  const proceedOnEnter = (event: KeyboardEvent) => {
     if (isEnter(event)) {
-      if (listName && (isEmoji(listEmoji) || listEmoji === '')) {
+      if (localListName && (isEmoji(localListEmoji) || localListEmoji === '')) {
         $listOverlayOptionsStore.type === 'new' ? createList() : updateList();
       }
     }
@@ -73,10 +94,9 @@
   const closeOverlay = () => {
     $listOverlayOptionsStore.showOverlay = false;
     $listOverlayOptionsStore.type = undefined;
-    listId = undefined;
-    listIndex = undefined;
-    listName = '';
-    listEmoji = '';
+    listIndex = -1;
+    localListName = '';
+    localListEmoji = '';
   };
 </script>
 
@@ -98,9 +118,9 @@
     : updateList}
   on:click:button--secondary={({ detail }) => {
     if (detail.text === $t('page.shared.abort')) closeOverlay();
-    if (detail.text === $t('page.shared.delete')) deleteList(listIndex);
+    if (detail.text === $t('page.shared.delete')) deleteList();
   }}
-  class={modalStates()}
+  class={modalStates}
 >
   {#if $initialized}
     {#if $listOverlayOptionsStore.type === 'new'}
@@ -111,7 +131,7 @@
       <p class="subtitle">
         <b
           >{$t('page.todos.overlay.createSubtitle', {
-            listName: listName,
+            listName: localListName,
           })}</b
         >.
       </p>
@@ -119,7 +139,7 @@
 
     <div class="create_list_section">
       <TextInput
-        bind:value={listName}
+        bind:value={localListName}
         labelText={$t('page.todos.overlay.listName')}
         placeholder={$t('page.todos.overlay.listName')}
         autofocus
@@ -128,7 +148,7 @@
       />
       <div>
         <TextInput
-          bind:value={listEmoji}
+          bind:value={localListEmoji}
           placeholder={$t('page.todos.overlay.listEmoji')}
           labelText={$t('page.todos.overlay.listEmojiDescription')}
           class="mb1"
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index b419f5d5..31376795 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -253,7 +253,7 @@
   "page.shared.blue": "Blau",
   "page.shared.reset": "Zurücksetzen",
   "page.shared.button.idCopy": "ID kopieren",
-  "page.shared.button.globalMenu": "Menü öffnen",
+  "page.shared.button.globalMenu": "Alle Apps",
   "page.shared.button.github": "Github Seite öffnen",
   "page.shared.button.settings": "Einstellungen öffnen",
   "page.shared.button.stadtwerk": "stadt.werk Seite öffnen",
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index 7e1bb94d..c6016cd5 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -253,7 +253,7 @@
   "page.shared.blue": "Blue",
   "page.shared.reset": "Reset",
   "page.shared.button.idCopy": "Copy ID",
-  "page.shared.button.globalMenu": "Open menu",
+  "page.shared.button.globalMenu": "All apps",
   "page.shared.button.github": "Open github page",
   "page.shared.button.stadtwerk": "Open stadtwerk page",
   "page.shared.button.settings": "Open settings",
diff --git a/frontend/src/routes/todo/+page.svelte b/frontend/src/routes/todo/+page.svelte
index 446f5489..2f86042f 100644
--- a/frontend/src/routes/todo/+page.svelte
+++ b/frontend/src/routes/todo/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  // 1. IMPORTS
   import ToggledApplicationInfo from '$lib/components/shared/ToggledApplicationInfo.svelte';
   import TodoListComponent from '$lib/components/todo/TodoList.svelte';
   import TodoListOverlay from '$lib/components/todo/TodoListOverlay.svelte';
@@ -15,18 +16,31 @@
   import TaskAdd from 'carbon-icons-svelte/lib/TaskAdd.svelte';
   import { onMount } from 'svelte';
 
+  // 2. CONST (non-reactive constants)
   const { todo: todoRoute } = applicationRoutes;
 
-  let currentListId = '';
-  let newListId = '';
-  let openMenu = false;
+  // 4. STATE
+  let currentListId = $state('');
+  let newListId = $state('');
+  let openMenu = $state(false);
+  let locale = $state($languageStore);
 
-  $: locale = $languageStore;
+  // 6. EFFECTS
+  $effect(() => {
+    locale = $languageStore;
+  });
 
+  // 7. LIFECYCLE
   onMount(async () => {
     await setLocale($languageStore);
+
+    // Listen for list creation events
+    window.addEventListener('list-created', ((e: CustomEvent) => {
+      currentListId = e.detail.id;
+    }) as EventListener);
   });
 
+  // 8. FUNCTIONS
   const showListOverlay = (type: 'new' | 'edit', id?: string) => {
     openMenu = false;
     if (type === 'new') {
@@ -118,7 +132,7 @@
         <div class="main_content">
           <Button
             kind="tertiary"
-            iconDescription={$t('page.shared.button.globalMenu')}
+            iconDescription={$t('page.todos.sideMenu.title')}
             icon={Catalog}
             id="list_menu_button"
             tooltipPosition="left"
@@ -142,9 +156,15 @@
 
       {#if $listOverlayOptionsStore.showOverlay}
         <TodoListOverlay
-          listId={newListId}
-          listName={getListInformation(newListId).name}
-          listEmoji={getListInformation(newListId).emoji}
+          listId={$listOverlayOptionsStore.type === 'new'
+            ? newListId
+            : currentListId}
+          listName={getListInformation(
+            $listOverlayOptionsStore.type === 'new' ? newListId : currentListId,
+          ).name}
+          listEmoji={getListInformation(
+            $listOverlayOptionsStore.type === 'new' ? newListId : currentListId,
+          ).emoji}
         />
       {/if}
     </section>