diff --git a/frontend/src/app/edit/edit.component.ts b/frontend/src/app/edit/edit.component.ts
index 4a9c3b4..3ef96c7 100644
--- a/frontend/src/app/edit/edit.component.ts
+++ b/frontend/src/app/edit/edit.component.ts
@@ -1,7 +1,8 @@
-import {Component, inject, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from "@angular/router";
-import {TodoService} from "../service/todo.service";
+import {Component, inject, input, InputSignal, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetTask} from "../dto/models";
+import {TodoService} from "../service/todo.service";
+import {assert} from "@angular/compiler-cli/linker";
 
 @Component({
   selector: 'app-edit',
@@ -12,33 +13,19 @@ import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/
   styleUrl: './edit.component.css'
 })
 export default class EditComponent implements OnInit{
-  private id!: number;
-  private todoService: TodoService = inject(TodoService);
-  private route: ActivatedRoute = inject(ActivatedRoute);
   private fb: FormBuilder = inject(FormBuilder);
+  private todoService: TodoService = inject(TodoService);
   public form!: FormGroup;
-
+  public todo: InputSignal<GetTask|null> = input<GetTask|null>(null);
 
   ngOnInit() {
-    this.id = parseInt(this.route.snapshot.paramMap.get('id') ?? '', 10);
-
-    const old = this.todoService.getOne(this.id);
     this.form = this.fb.group({
-      title: ['', Validators.required],
-      dueDate: ['', Validators.required],
+      title: [this.todo()?.title, Validators.required],
+      dueDate: [this.todo()?.dueDate, Validators.required],
     });
-
-    old.subscribe((old => {
-      this.form.patchValue({
-        title: old.title,
-        dueDate: old.dueDate,
-      })
-    }))
   }
 
   edit() {
-    const edited = this.form.value as { title: string, dueDate: Date };
-
-    this.todoService.edit(edited, this.id).subscribe(() => this.todoService.todos.reload());
+    this.todoService.edit(this.form.value, this.todo()?.id ?? 0)
   }
 }
diff --git a/frontend/src/app/table/table.component.html b/frontend/src/app/table/table.component.html
index 795e0c1..61ec60a 100644
--- a/frontend/src/app/table/table.component.html
+++ b/frontend/src/app/table/table.component.html
@@ -1,27 +1,31 @@
 <table>
   <thead>
-    <tr>
-      <th>Title</th>
-      <th>Due Date</th>
-      <th>Actions</th>
-    </tr>
+  <tr>
+    <th>Title</th>
+    <th>Due Date</th>
+    <th>Actions</th>
+  </tr>
   </thead>
   <tbody>
-  @for (todo of todos.value(); track todo.id) {
-    <tr>
-      <td>
-        {{todo.title}}
-        @if (todo.done) {
-          &checkmark;
-        }
-      </td>
-      <td>{{todo.dueDate | date}}</td>
-      <td>
-        <button (click)="markAsDone(todo)">Done</button>
-        <button (click)="edit(todo)">Edit</button>
-        <button (click)="delete(todo.id)">Delete</button>
-      </td>
-    </tr>
-  }
+    @for (todo of todos.value(); track todo.id) {
+      <tr>
+        <td>
+          {{ todo.title }}
+          @if (todo.done) {
+            &checkmark;
+          }
+        </td>
+        <td>{{ todo.dueDate | date }}</td>
+        <td>
+          <button (click)="markAsDone(todo)">Done</button>
+          <button (click)="edit(todo)">Edit</button>
+          <button (click)="delete(todo.id)">Delete</button>
+        </td>
+      </tr>
+    }
   </tbody>
 </table>
+
+@if (editingTodo() !== null) {
+  <app-edit [todo]="editingTodo()" />
+}
diff --git a/frontend/src/app/table/table.component.ts b/frontend/src/app/table/table.component.ts
index 596d27b..68029a4 100644
--- a/frontend/src/app/table/table.component.ts
+++ b/frontend/src/app/table/table.component.ts
@@ -1,13 +1,15 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal, WritableSignal} from '@angular/core';
 import {TodoService} from "../service/todo.service";
 import {DatePipe} from "@angular/common";
 import {GetTask} from "../dto/models";
+import EditComponent from "../edit/edit.component";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
     DatePipe,
+    EditComponent,
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'
@@ -15,7 +17,7 @@ import {GetTask} from "../dto/models";
 export class TableComponent {
   todoService: TodoService = inject(TodoService);
   todos = this.todoService.todos;
-  
+  editingTodo: WritableSignal<GetTask|null> = signal(null);
 
   markAsDone(todo: GetTask) {
     this.todoService.markAsDone(todo).subscribe(() => this.todos.reload());
@@ -26,6 +28,6 @@ export class TableComponent {
   }
 
   edit(todo: GetTask) {
-
+    this.editingTodo.set(todo);
   }
 }