diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index f59a066..7a2fbdf 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -1,6 +1,13 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+.overflow-shadow {
+	overflow-x: auto;
+	position: relative;
+	mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
+	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
+}
+
 :root {
   --ui-primary: #C02942;
 --ui-text-dimmed: var(--ui-color-neutral-400);
diff --git a/web/components/ui/EventFormModal.vue b/web/components/ui/EventFormModal.vue
index 3810012..666a10d 100644
--- a/web/components/ui/EventFormModal.vue
+++ b/web/components/ui/EventFormModal.vue
@@ -71,6 +71,7 @@ function submit() {
 	}
 
 	emit('submnitted', {
+		id: props.input.id,
 		title: form.data.title,
 		description: form.data.description,
 		from: DateTime.fromISO(form.data.from),
diff --git a/web/components/ui/ListItem.vue b/web/components/ui/ListItem.vue
index b16cc92..a115f61 100644
--- a/web/components/ui/ListItem.vue
+++ b/web/components/ui/ListItem.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-	<UCard class="[&>*]:p-3">
+	<UCard class="[&>*]:p-3 w-full">
 		<slot />
 	</UCard>
 </template>
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index d8f7ee7..5e0445e 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -75,19 +75,19 @@ const selectedDate = computed({
 })
 
 type Task = {
-  id: number
-  userid: string
-  title: string
-  description: string
-  done: number
-  estimated_time: string
-  due_date: string
-  created_at: string
-  updated_at: string
+	id: number
+	userid: string
+	title: string
+	description: string
+	done: number
+	estimated_time: string
+	due_date: string
+	created_at: string
+	updated_at: string
 }
 
 defineProps<{
-  todos: Task[]
+	todos: Task[]
 }>()
 
 
@@ -109,7 +109,7 @@ function editTodo() {
 </script>
 
 <template>
-	<UCard class="flex w-64 h-full">
+	<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
 		<div class="flex flex-col h-full w-full gap-5">
 			<header class="flex flex-col gap-2">
 				<Title1>Calendar</Title1>
@@ -120,20 +120,37 @@ function editTodo() {
 					<Title1>Todos</Title1>
 					<div class="flex gap-2 flex-col">
 						<ListItem v-for="todo in todos">
-							<div class="flex justify-between">
-								<span>
+							<div class="flex w-full gap-4 items-center">
+								<span class="grow overflow-scroll py-3 overflow-shadow">
 									{{ todo.title }}
 								</span>
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center" @click="editTodo">
-										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
+											viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+											stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil">
+											<path
+												d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z">
+											</path>
+											<path d="m15 5 4 4"></path>
+										</svg>
 									</UButton>
-									<UButton size="xs" class="flex justify-center" color="primary" @click="() => deleteTodo(todo)">
-										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-2 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
+									<UButton size="xs" class="flex justify-center" color="primary"
+										@click="() => deleteTodo(todo)">
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
+											viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+											stroke-linecap="round" stroke-linejoin="round"
+											class="lucide lucide-trash-2">
+											<path d="M3 6h18"></path>
+											<path d="M19 6v14c0 1-2 2-2 2H7c-1 0-2-1-2-2V6"></path>
+											<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+											<line x1="10" x2="10" y1="11" y2="17"></line>
+											<line x1="14" x2="14" y1="11" y2="17"></line>
+										</svg>
 									</UButton>
 								</div>
 							</div>
-					</ListItem>
+						</ListItem>
 					</div>
 				</div>
 				<div class="flex">
@@ -157,4 +174,6 @@ function editTodo() {
 	</UCard>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>
diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue
index d9a8f33..91f1499 100644
--- a/web/components/ui/calendar/Calendar.vue
+++ b/web/components/ui/calendar/Calendar.vue
@@ -132,7 +132,19 @@ function openDeleteModal(event: Event) {
 function deleteEvent() {
 	if (deleteContext.value === undefined) return
 	emits('delete', deleteContext.value?.event)
-	events.value = events.value.filter(e => e.title !== deleteContext.value?.event.title)
+	console.log(events.value)
+	events.value = events.value.filter(e => {
+		if (e.id === undefined || deleteContext.value?.event.id === undefined) {
+			return true
+		}
+
+		if (e.id === deleteContext.value?.event.id) {
+			return false
+		}
+
+		return true
+	})
+
 	deleteModalOpened.value = false
 }
 
diff --git a/web/components/ui/calendar/CalendarCollumn.vue b/web/components/ui/calendar/CalendarCollumn.vue
index 5cbb2bc..e644b96 100644
--- a/web/components/ui/calendar/CalendarCollumn.vue
+++ b/web/components/ui/calendar/CalendarCollumn.vue
@@ -62,6 +62,13 @@ function mouseup(_: MouseEvent) {
 
 	const timeFrom = Math.min(endY.value, startY.value) / column.value.offsetHeight
 	const timeTo = Math.max(endY.value, startY.value) / column.value.offsetHeight
+
+	if (timeTo * column.value.offsetHeight - timeFrom * column.value.offsetHeight <= 10) {
+		startY.value = 0
+		endY.value = 0
+		return
+	}
+
 	emit('quick-create', props.day, {
 		from: timeFrom,
 		to: timeTo
diff --git a/web/components/ui/calendar/CalendarEvent.vue b/web/components/ui/calendar/CalendarEvent.vue
index 8802e6c..0b97445 100644
--- a/web/components/ui/calendar/CalendarEvent.vue
+++ b/web/components/ui/calendar/CalendarEvent.vue
@@ -64,7 +64,7 @@ function dragStart(e: DragEvent) {
 				</template>
 				<template #default>
 					<div>{{ event.event.from.toFormat('HH:mm') }} - {{ event.event.to.toFormat('HH:mm') }}</div>
-					<div class="overflow-scroll pb-5">
+					<div class="overflow-scroll pb-5 overflow-shadow">
 						{{ event.event.description }}
 					</div>
 				</template>
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 5f1b1f1..47e8371 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Body } from '#components';
 import axios from 'axios';
 import { DateTime } from 'luxon';
 import MainContent from '~/components/ui/MainContent.vue';
@@ -11,35 +10,35 @@ const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
 
 const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
-  'events',
-  () => axios.get('/events').then(res => res.data)
+	'events',
+	() => axios.get('/events').then(res => res.data)
 );
 
 onMounted(() => {
-  events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
+	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
 })
 
 type Task = {
-  id: number
-  userid: string
-  title: string
-  description: string
-  done: number
-  estimated_time: string
-  due_date: string
-  created_at: string
-  updated_at: string
+	id: number
+	userid: string
+	title: string
+	description: string
+	done: number
+	estimated_time: string
+	due_date: string
+	created_at: string
+	updated_at: string
 }
 
 
 const { data: tasks, refresh } = await useAsyncData<Task[]>(
-    'tasks',
-    () => {
+	'tasks',
+	() => {
 		return axios.get("/tasks").then(result => {
 			console.log(result.data)
 			return result.data
 		})
-    }
+	}
 )
 
 async function postEvent(event: Event) {
@@ -49,30 +48,31 @@ async function postEvent(event: Event) {
 
 async function postTask(name: string) {
 	console.log('posting Task')
-  await axios.post('/task', {
-    title: name,
-    description: "",
-    done: false,
-    estimated_time: (new Date()).toISOString(), //TODO
-    due_date: (new Date()).toISOString(),
-  })
-  await refresh()
+	await axios.post('/task', {
+		title: name,
+		description: "",
+		done: false,
+		estimated_time: (new Date()).toISOString(), //TODO
+		due_date: (new Date()).toISOString(),
+	})
+	await refresh()
 }
 
 async function deleteTask(id: number) {
-  console.log('deleting Task')
-  await axios.delete(`/task/${id}`)
-  await refresh()
+	console.log('deleting Task')
+	await axios.delete(`/task/${id}`)
+	await refresh()
 }
 
 </script>
 
 <template>
-    <div class="h-screen w-screen p-4 flex flex-row gap-5">
-        <Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask" @delete-task="deleteTask"/>
-        <MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent"/>
-    </div>
+	<div class="h-screen w-screen p-4 flex flex-row gap-5">
+		<Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask"
+			@delete-task="deleteTask" />
+		<MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent" />
+	</div>
 </template>
 
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/web/utils/event.ts b/web/utils/event.ts
index 6c73275..358fb98 100644
--- a/web/utils/event.ts
+++ b/web/utils/event.ts
@@ -4,7 +4,8 @@ export class Event {
 	private static readonly MINUTES_IN_DAY = 24 * 60
 
 	constructor(
-		public readonly title: string,
+		public id: number | undefined,
+		public title: string,
 		public from: DateTime,
 		public to: DateTime,
 		public description: string
@@ -39,15 +40,28 @@ export class Event {
 	}
 
 	static fromSimple(event: SimpleEvent): Event {
-		return new Event(event.title, event.from, event.to, event.description)
+		return new Event(
+			event.id,
+			event.title,
+			event.from,
+			event.to,
+			event.description
+		)
 	}
 
 	static fromSerializable(event: SerializableEvent) {
-		return new Event(event.title, DateTime.fromISO(event.from), DateTime.fromISO(event.to), event.description)
+		return new Event(
+			event.id,
+			event.title,
+			DateTime.fromISO(event.from),
+			DateTime.fromISO(event.to),
+			event.description
+		)
 	}
 
-	static fromPercentDimensions(title: string, dimensions: EventDimensions, date: DateTime, description: string): Event {
+	static fromPercentDimensions(id: number | undefined, title: string, dimensions: EventDimensions, date: DateTime, description: string): Event {
 		return new Event(
+			id,
 			title,
 			date.startOf('day').plus({ minutes: (dimensions.from / 100) * Event.MINUTES_IN_DAY }),
 			date.startOf('day').plus({ minutes: (dimensions.to / 100) * Event.MINUTES_IN_DAY }),
@@ -55,13 +69,13 @@ export class Event {
 		)
 	}
 
-	static fromPixelDimensions(title: string, dimensions: EventDimensions, height: number, date: DateTime, description: string): Event {
+	static fromPixelDimensions(id: number | undefined, title: string, dimensions: EventDimensions, height: number, date: DateTime, description: string): Event {
 		const percentDimensions: EventDimensions = {
 			from: dimensions.from * 100 / height,
 			to: dimensions.to * 100 / height
 		}
 
-		return Event.fromPercentDimensions(title, percentDimensions, date, description)
+		return Event.fromPercentDimensions(id, title, percentDimensions, date, description)
 	}
 
 	static fromDraggedEvent(draggedEvent: DraggedEvent, height: number): Event {
@@ -71,6 +85,7 @@ export class Event {
 		}
 
 		return Event.fromPixelDimensions(
+			draggedEvent.target.id,
 			draggedEvent.target.title,
 			pixelDimensions,
 			height,
@@ -91,6 +106,7 @@ export class Event {
 
 	toSimple(): SimpleEvent {
 		return {
+			id: this.id,
 			title: this.title,
 			from: this.from,
 			to: this.to,
@@ -100,6 +116,7 @@ export class Event {
 
 	toSerializable(): SerializableEvent {
 		return {
+			id: this.id,
 			title: this.title,
 			from: this.from.toISO() ?? '',
 			to: this.to.toISO() ?? '',
@@ -135,6 +152,7 @@ export type EventDimensions = {
 }
 
 export type SimpleEvent = {
+	id: number | undefined,
 	title: string,
 	from: DateTime,
 	to: DateTime
@@ -142,6 +160,7 @@ export type SimpleEvent = {
 }
 
 export type SerializableEvent = {
+	id: number | undefined,
 	title: string,
 	from: string,
 	to: string