diff --git a/backend/src/main.ts b/backend/src/main.ts
index e14c445..b2c374f 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -18,7 +18,7 @@ app.use(cors())
 app.use(express.json());
 
 app.get('/', (req, res) => {
-    res.send('Hello World');
+	res.send('Hello World');
 });
 
 app.get('/tasks', async (req, res) => {
@@ -29,115 +29,116 @@ app.get('/tasks', async (req, res) => {
 	}));
 });
 
-app.get('/events', async(req, res) => {
-    res.status(200).send(await db.select().from(event))
+app.get('/events', async (req, res) => {
+	res.status(200).send(await db.select().from(event))
 });
 
 app.get('/user/:id', (req, res) => {
-    const id = req.params['id'];
+	const id = req.params['id'];
 
-    if (id == null) {
-        res.status(400).send({error: 'Needs an user id'});
-        return;
-    }
+	if (id == null) {
+		res.status(400).send({ error: 'Needs an user id' });
+		return;
+	}
 
-    const user = {id: id, name: 'Cracker'}  //TODO
-    res.json(user);
+	const user = { id: id, name: 'Cracker' }  //TODO
+	res.json(user);
 
 });
 
-app.get('/task/:id', async(req, res) => {
+app.get('/task/:id', async (req, res) => {
 
-    const id = parseInt(req.params['id']);
+	const id = parseInt(req.params['id']);
 
-    if (id == null) {
-        res.status(400).send({error: 'Needs an id'});
-        return;
-    }
+	if (id == null) {
+		res.status(400).send({ error: 'Needs an id' });
+		return;
+	}
 
-    const returnedTask = await db.select().from(task).where(eq(task.id, id))
-    //
-    console.log(returnedTask)
-    res.json(returnedTask);
+	const returnedTask = await db.select().from(task).where(eq(task.id, id))
+	//
+	console.log(returnedTask)
+	res.json(returnedTask);
 });
 
 app.get('/event/:id', (req, res) => {
 
-    const id = req.params['id'];
+	const id = req.params['id'];
 
-    if (id == null) {
-        res.status(400).send({error: 'Needs an id'});
-        return;
-    }
+	if (id == null) {
+		res.status(400).send({ error: 'Needs an id' });
+		return;
+	}
 
-    const event = {id: id, name: 'Pary'}  //TODO
-    res.json(event);
+	const event = { id: id, name: 'Pary' }  //TODO
+	res.json(event);
 });
 
-app.post('/task', async(req, res) => {
+app.post('/task', async (req, res) => {
 
-    const newTask = req.body
-    newTask.userid = userId
+	const newTask = req.body
+	newTask.userid = userId
 
 	console.log(newTask)
-    const returnedTask = await db.insert(task).values(newTask).returning()
-    console.log(returnedTask)
+	const returnedTasks = await db.insert(task).values(newTask).returning()
+	console.log(returnedTasks)
 
-    res.status(201).json(returnedTask);
+	res.status(201).json(returnedTasks[0]);
 });
 
-app.post('/event', async(req, res) => {
+app.post('/event', async (req, res) => {
 
-    const newEvent: typeof event.$inferInsert = req.body
-    newEvent.userid = userId
+	const newEvent: typeof event.$inferInsert = req.body
+	newEvent.userid = userId
 
-    const returnedEvent = await db.insert(event).values(newEvent).returning()
-    console.log(returnedEvent)
+	const returnedEvent = await db.insert(event).values(newEvent).returning()
+	console.log(returnedEvent)
 
-    res.status(201).json(returnedEvent);
+	res.status(201).json(returnedEvent);
 });
 
 app.put('/task', (req, res) => {
 
-    const id = parseInt(req.params['id']);
-    const updatedTask: Partial<typeof task.$inferSelect> = req.body
+	const id = parseInt(req.params['id']);
+	const updatedTask: Partial<typeof task.$inferSelect> = req.body
 
-    if (id == null) {
-        res.status(400).send({error: 'Needs an id'});
-        return;
-    }
-    db.update(task).set(updatedTask).where(eq(task.id, id))
+	if (id == null) {
+		res.status(400).send({ error: 'Needs an id' });
+		return;
+	}
+	db.update(task).set(updatedTask).where(eq(task.id, id))
 
-    res.status(200).json(updatedTask);
+	res.status(200).json(updatedTask);
 });
 
 app.put('/event', (req, res) => {
 
-    const id = parseInt(req.params['id']);
-    const updatedEvent: Partial<typeof event.$inferSelect> = req.body
+	const id = parseInt(req.params['id']);
+	const updatedEvent: Partial<typeof event.$inferSelect> = req.body
 
-    if (id == null) {
-        res.status(400).send({error: 'Needs an id'});
-        return;
-    }
-    db.update(event).set(updatedEvent).where(eq(event.id, id))
+	if (id == null) {
+		res.status(400).send({ error: 'Needs an id' });
+		return;
+	}
+	db.update(event).set(updatedEvent).where(eq(event.id, id))
 
-    res.status(200).json(updatedEvent);});
-
-app.delete('/task/:id', async(req, res) => {
-    const id = parseInt(req.params['id']);
-
-    const success = await db.delete(task).where(eq(task.id, id))
-    res.send("Deleted");
+	res.status(200).json(updatedEvent);
 });
 
-app.delete('/event/:id', async(req, res) => {
-    const id = parseInt(req.params['id']);
+app.delete('/task/:id', async (req, res) => {
+	const id = parseInt(req.params['id']);
 
-    const success = await db.delete(event).where(eq(event.id, id))
-    res.send("Deleted");
+	const success = await db.delete(task).where(eq(task.id, id))
+	res.send("Deleted");
+});
+
+app.delete('/event/:id', async (req, res) => {
+	const id = parseInt(req.params['id']);
+
+	const success = await db.delete(event).where(eq(event.id, id))
+	res.send("Deleted");
 });
 
 app.listen(8080, () => {
-    console.log('Listening on port 8080');
+	console.log('Listening on port 8080');
 });
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index f8f17fa..78973cd 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -9,14 +9,15 @@ const colorMode = useColorMode();
 const toast = useToast()
 
 const currentTheme = ref<'dark' | 'system' | 'light'>(colorMode.preference as 'dark' | 'system' | 'light');
-const showTaskFormModal = ref(false);
+const showTaskCreateModal = ref(false);
+const showTaskEditModal = ref(false);
 const taskFormModalInput = ref<Partial<Task>>({});
 
 const date = defineModel<DateTime>('date', { required: true })
 const tasks = defineModel<Task[]>('tasks', { required: true })
 
 const emits = defineEmits<{
-	(e: 'createTask', name: string): void
+	(e: 'createTask', task: Task): void
 	(e: 'deleteTask', id: number): void
 	(e: 'editTask', task: Task): void
 }>()
@@ -78,22 +79,22 @@ const selectedDate = computed({
 	}
 })
 
-function addTask() {
-	const name = prompt("Todo name:")
-	console.log(name)
-	if (name !== null) {
-		emits('createTask', name)
-	}
+function addTask(task: Task) {
+	tasks.value.push(task)
+	console.log(tasks.value)
+	emits('createTask', task)
 }
-function deleteTask(todo: Task) {
-	if (todo.id === undefined) {
+function deleteTask(task: Task) {
+	if (task.id === undefined) {
 		toast.add({
 			title: "Task does not exist anymore"
 		})
 		return
 	}
 
-	emits('deleteTask', todo.id)
+	tasks.value = tasks.value.filter(t => t.id !== task.id)
+
+	emits('deleteTask', task.id)
 }
 function editTask(task: Task) {
 	emits('editTask', task)
@@ -101,14 +102,22 @@ function editTask(task: Task) {
 
 function openTaskFormModal(task: Partial<Task>) {
 	taskFormModalInput.value = task
-	showTaskFormModal.value = true
+	showTaskCreateModal.value = true
+}
+
+function openTaskEditModal(task: Task) {
+	taskFormModalInput.value = task
+	showTaskEditModal.value = true
 }
 
 </script>
 
 <template>
 	<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
-		<UiTaskFormModal v-model:open="showTaskFormModal" :input="taskFormModalInput" action="create" />
+		<UiTaskFormModal v-model:open="showTaskCreateModal" :input="taskFormModalInput" action="create"
+			@submnitted="addTask" />
+		<UiTaskFormModal v-model:open="showTaskEditModal" :input="taskFormModalInput" action="edit"
+			@submnitted="editTask" />
 
 		<div class="flex flex-col h-full w-full gap-5">
 			<header class="flex flex-col gap-2">
@@ -117,7 +126,7 @@ function openTaskFormModal(task: Partial<Task>) {
 			</header>
 			<div class="flex flex-col grow justify-between">
 				<div class="flex flex-col gap-2">
-					<Title1>Todos</Title1>
+					<Title1>Tasks</Title1>
 					<div class="flex gap-2 flex-col">
 						<ListItem v-for="task in todoTasks">
 							<div class="flex w-full gap-4 items-center">
@@ -127,7 +136,7 @@ function openTaskFormModal(task: Partial<Task>) {
 								</span>
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center"
-										icon="mingcute:pencil-line" @click="() => editTask(task)" />
+										icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
 									<UButton size="xs" color="primary" class="flex justify-center"
 										icon="octicon:trashcan-16" @click="() => deleteTask(task)" />
 								</div>
@@ -142,7 +151,7 @@ function openTaskFormModal(task: Partial<Task>) {
 								</span>
 								<div class="flex gap-1">
 									<UButton size="xs" color="neutral" class="flex justify-center"
-										icon="mingcute:pencil-line" @click="() => editTask(task)" />
+										icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
 									<UButton size="xs" color="primary" class="flex justify-center"
 										@click="() => deleteTask(task)" icon="octicon:trashcan-16" />
 								</div>
diff --git a/web/components/ui/TaskFormModal.vue b/web/components/ui/TaskFormModal.vue
index ec7b475..f74baab 100644
--- a/web/components/ui/TaskFormModal.vue
+++ b/web/components/ui/TaskFormModal.vue
@@ -35,6 +35,7 @@ watchEffect(() => {
 	descriptionField.value = props.input.description ?? ''
 	estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60)
 	dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? ''
+	dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? ''
 })
 
 const formSchema = z.object({
@@ -89,10 +90,13 @@ function cancel() {
 		<template #body>
 			<div class="flex flex-col gap-2">
 				<UInput type="text" placeholder="Name" v-model="titleField" required />
+				<UInput type="number" class="grow" placeholder="estimated time in hours" v-model="estimatedTimeField"
+					icon="mdi:stopwatch-outline" required />
 				<div class="flex flex-row gap-2">
-					<UInput class="grow" placeholder="2025-06-16" v-model="dueDateField" icon="i-lucide-calendar"
+					<UInput type="date" class="grow" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
+						icon="i-lucide-calendar" required />
+					<UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock"
 						required />
-					<UInput class="grow" placeholder="15:34" v-model="dueTimeField" icon="i-lucide-clock" required />
 				</div>
 				<UTextarea type="text" placeholder="Description" v-model="descriptionField" required />
 			</div>
diff --git a/web/pages/index.vue b/web/pages/index.vue
index 0303711..8d48ccd 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -7,23 +7,21 @@ import { Event, type SerializableEvent } from '~/utils/event';
 
 const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
+const tasks = ref<Task[]>([])
 
 const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
 	'events',
 	() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
 );
 
-const {data: tasksResponse, refresh} = await useAsyncData<SerializableTask[]>(
+const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
 	'tasks',
 	() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
 );
 
 onMounted(() => {
 	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
-})
-
-const tasks = computed(() => {
-	return tasksResponse.value?.map(Task.fromSerializable) ?? []
+	tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
 })
 
 async function postEvent(event: Event) {
@@ -31,16 +29,11 @@ async function postEvent(event: Event) {
 	await axios.post('/event', event.toSerializable())
 }
 
-async function postTask(name: string) {
+async function postTask(task: Task) {
 	console.log('posting Task')
-	await axios.post('/task', {
-		title: name,
-		description: "",
-		done: false,
-		estimated_time: 0,
-		due_date: (new Date()).toISOString(),
-	})
-	await refresh()
+	const createdTask = await axios.post<SerializableTask>('/task', task)
+	console.log(createdTask)
+	task.id = createdTask.data.id
 }
 
 async function deleteTask(id: number) {