diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/ToDosPanel.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/ToDosPanel.svelte
index 4971958b..a0f23555 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/ToDosPanel.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/ToDosPanel.svelte
@@ -35,5 +35,5 @@
 </div>
 
 <Modal on:close={() => (isOpen = false)} show={isOpen}>
-	<ToDoList on:editTask on:persistToDos {toDos} />
+	<ToDoList on:close={() => (isOpen = false)} on:editTask on:persistToDos {toDos} />
 </Modal>
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/to-do-list/ToDoList.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/to-do-list/ToDoList.svelte
index 2c18174c..4bbd51b9 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/to-do-list/ToDoList.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/to-dos-panel/to-do-list/ToDoList.svelte
@@ -13,6 +13,7 @@
 	export let toDos: ToDo[];
 
 	const dispatch = createEventDispatcher<{
+		close: null;
 		editTask: { targetDate: string; task: AnyTask };
 		persistToDos: ToDo[];
 	}>();
@@ -21,6 +22,12 @@
 
 	$: totalDuration = getTotalDuration(uncompletedToDos);
 
+	$: {
+		if (toDos.length === 0) {
+			dispatch('close');
+		}
+	}
+
 	function postponeToDos() {
 		const postponedToDos = uncompletedToDos.map((toDo) => ({
 			...toDo,
@@ -31,7 +38,7 @@
 	}
 </script>
 
-<div class="text-sm leading-6 text-gray-900 lg:col-start-3 lg:row-end-1">
+<div class="w-11/12 text-sm leading-6 text-gray-900 md:w-[543px]">
 	<h2 class="sr-only">To Dos</h2>
 	<div class="divide-y divide-gray-900/5 rounded-lg bg-gray-50 shadow-sm ring-1 ring-gray-900/5">
 		<div class="p-6 font-semibold">
@@ -48,13 +55,11 @@
 					class="flex cursor-pointer justify-between gap-3 px-6 py-3 hover:bg-gray-100 hover:underline"
 					on:click={() => dispatch('editTask', { targetDate: '', task: toDo })}
 				>
-					<div class="flex grow gap-5">
-						<Icon class="h-6 w-5 text-gray-400" src={CalendarDays} theme="solid" />
-						<div
-							class={clsx({ 'line-through': toDo.isDone }, 'truncate font-medium text-gray-500')}
-						>
-							{toDo.name}
-						</div>
+					<Icon class="h-6 w-5 text-gray-400" src={CalendarDays} theme="solid" />
+					<div
+						class={clsx({ 'line-through': toDo.isDone }, 'grow truncate font-medium text-gray-500')}
+					>
+						{toDo.name}
 					</div>
 					<div>
 						{getDuration(toDo)}
diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 43238dfa..dc95886f 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -13,7 +13,7 @@
 			<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events-->
 			<div class="absolute inset-0 bg-black opacity-50" on:click={() => dispatch('close')} />
 
-			<div class="relative flex w-full justify-center">
+			<div class="relative">
 				<slot />
 			</div>
 		</div>