diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html
index 8f39bcb..14d67ab 100644
--- a/src/app/components/board/task/task.component.html
+++ b/src/app/components/board/task/task.component.html
@@ -1,4 +1,4 @@
-<section (click)="showTaskDetails(task.id)">
+<section (click)="openTaskDetailsOverlay(task.id)">
   <div
     class="content"
     draggable="true"
diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts
index 212fbb4..acfacc2 100644
--- a/src/app/components/board/task/task.component.ts
+++ b/src/app/components/board/task/task.component.ts
@@ -26,8 +26,8 @@ export class TaskComponent {
     public overlayService: OverlayService
   ) {}
 
-  showTaskDetails(taskId: string | undefined) {
-    this.overlayService.setOverlayData(taskId);
+  openTaskDetailsOverlay(taskId: string | undefined) {
+    this.overlayService.setOverlayData('taskOverlay', taskId);
   }
 
   // Subtasks
diff --git a/src/app/services/overlay.service.ts b/src/app/services/overlay.service.ts
index 9e021d4..51918b6 100644
--- a/src/app/services/overlay.service.ts
+++ b/src/app/services/overlay.service.ts
@@ -10,7 +10,7 @@ export class OverlayService {
 
   constructor() {}
 
-  setOverlayData(data: any) {
-    this.overlayDataSubject.next(data);
+  setOverlayData(overlay: string, data: any) {
+    this.overlayDataSubject.next({ overlay, data });
   }
 }
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index b51b466..6beca76 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -1,3 +1,7 @@
 <div *ngIf="overlayData" class="overlay">
-  <div class="overlay-content">{{ overlayData }}</div>
+  <div class="overlay-content">
+    @if (overlayType === "taskOverlay") {
+    <div class="task-overlay">{{ overlayData }}</div>
+    }
+  </div>
 </div>
diff --git a/src/app/shared/components/overlay/overlay.component.scss b/src/app/shared/components/overlay/overlay.component.scss
index e1a449c..66626e3 100644
--- a/src/app/shared/components/overlay/overlay.component.scss
+++ b/src/app/shared/components/overlay/overlay.component.scss
@@ -5,17 +5,23 @@
   width: 100vw;
   height: 100vh;
   backdrop-filter: blur(5px);
+  background-color: rgba($color: #000000, $alpha: 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 999;
 }
 
-.overlayContent {
+.overlay-content {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: aqua;
-  height: auto;
-  width: auto;
+}
+
+.task-overlay {
+  width: 525px;
+  height: 700px;
+  padding: 48px 40px 48px 40px;
+  border-radius: 30px;
+  background-color: var(--white);
 }
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 366441c..1fd2d57 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -17,13 +17,17 @@ import { CommonModule } from '@angular/common';
   styleUrl: './overlay.component.scss',
 })
 export class OverlayComponent implements OnInit {
+  overlayType: any;
   overlayData: any;
 
   constructor(private overlayService: OverlayService) {}
 
   ngOnInit(): void {
     this.overlayService.overlayData$.subscribe((data) => {
-      this.overlayData = data;
+      if (data) {
+        this.overlayType = data.overlay;
+        this.overlayData = data.data;
+      }
     });
   }
 
@@ -34,7 +38,7 @@ export class OverlayComponent implements OnInit {
   @HostListener('document:click', ['$event'])
   checkOpenContactEdit(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
-    if (targetElement.closest('.overlay-content')) {
+    if (targetElement.closest('.overlay')) {
       this.onCloseOverlay();
     }
   }