diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index b7b832c..a4fa47c 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -1,12 +1,15 @@
 <div *ngIf="overlayData" class="overlay">
   <div class="overlay-content">
     @if (overlayType === "taskOverlay") {
-    <div class="task-overlay">
-      <app-task-overlay
-        [overlayData]="overlayData"
-        (closeDialogEmitter)="onCloseOverlay($event)"
-      ></app-task-overlay>
-    </div>
+    <app-task-overlay
+      [overlayData]="overlayData"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-task-overlay>
+    } @if (overlayType === "taskOverlayEdit") {
+    <app-task-edit-overlay
+      [overlayData]="overlayData"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-task-edit-overlay>
     }
   </div>
 </div>
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 713da49..88a5af9 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -9,11 +9,12 @@ import { OverlayService } from '../../../services/overlay.service';
 import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 import { FirebaseService } from '../../../services/firebase.service';
+import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.component';
 
 @Component({
   selector: 'app-overlay',
   standalone: true,
-  imports: [CommonModule, TaskOverlayComponent],
+  imports: [CommonModule, TaskOverlayComponent, TaskEditOverlayComponent],
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
new file mode 100644
index 0000000..3254d08
--- /dev/null
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
@@ -0,0 +1,5 @@
+<section>
+  <div class="header">
+    <app-btn-close (click)="closeDialog()"></app-btn-close>
+  </div>
+</section>
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
new file mode 100644
index 0000000..bf7881f
--- /dev/null
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
@@ -0,0 +1,13 @@
+section {
+  width: 525px;
+  height: 700px;
+  padding: 48px 40px 48px 40px;
+  border-radius: 30px;
+  background-color: var(--white);
+}
+
+.header {
+  display: flex;
+  justify-content: right;
+  margin-bottom: 32px;
+}
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.spec.ts b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.spec.ts
new file mode 100644
index 0000000..91f7ca4
--- /dev/null
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskEditOverlayComponent } from './task-edit-overlay.component';
+
+describe('TaskEditOverlayComponent', () => {
+  let component: TaskEditOverlayComponent;
+  let fixture: ComponentFixture<TaskEditOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskEditOverlayComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskEditOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
new file mode 100644
index 0000000..d72d77d
--- /dev/null
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FirebaseService } from '../../../../services/firebase.service';
+import { OverlayService } from '../../../../services/overlay.service';
+import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
+
+@Component({
+  selector: 'app-task-edit-overlay',
+  standalone: true,
+  imports: [BtnCloseComponent],
+  templateUrl: './task-edit-overlay.component.html',
+  styleUrl: './task-edit-overlay.component.scss',
+})
+export class TaskEditOverlayComponent {
+  @Input() overlayData: string = '';
+  @Output() closeDialogEmitter = new EventEmitter<string>();
+
+  constructor(
+    public firebaseService: FirebaseService,
+    private overlayService: OverlayService
+  ) {}
+
+  closeDialog() {
+    this.closeDialogEmitter.emit('');
+  }
+}
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
index 74cce99..11b6c99 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
@@ -88,7 +88,7 @@
       <p>Delete</p>
     </div>
     <span>|</span>
-    <div class="btn btn-edit">
+    <div class="btn btn-edit" (click)="editTask(overlayData)">
       <img src="./../../../../../assets/img/contact/edit.svg" alt="" />
       <p>Edit</p>
     </div>
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
index d59169f..d8fba25 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { CommonModule } from '@angular/common';
+import { OverlayService } from '../../../../services/overlay.service';
 
 @Component({
   selector: 'app-task-overlay',
@@ -14,7 +15,10 @@ export class TaskOverlayComponent {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
-  constructor(public firebaseService: FirebaseService) {}
+  constructor(
+    public firebaseService: FirebaseService,
+    private overlayService: OverlayService
+  ) {}
 
   categoryColors = new Map<string, string>([
     ['User Story', '#0038ff'],
@@ -25,6 +29,10 @@ export class TaskOverlayComponent {
     this.closeDialogEmitter.emit('');
   }
 
+  editTask(overlayData: string) {
+    this.overlayService.setOverlayData('taskOverlayEdit', overlayData);
+  }
+
   getTaskData(taskId: string) {
     return this.firebaseService
       .getAllTasks()