diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index 6beca76..e20c26d 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -1,7 +1,9 @@
 <div *ngIf="overlayData" class="overlay">
   <div class="overlay-content">
     @if (overlayType === "taskOverlay") {
-    <div class="task-overlay">{{ overlayData }}</div>
+    <div class="task-overlay">
+      <app-task-overlay [overlayData]="overlayData"></app-task-overlay>
+    </div>
     }
   </div>
 </div>
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 14add3e..6f93a7c 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -1,18 +1,12 @@
-import {
-  Component,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { OverlayService } from '../../../services/overlay.service';
 import { CommonModule } from '@angular/common';
+import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 
 @Component({
   selector: 'app-overlay',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TaskOverlayComponent],
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })
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
new file mode 100644
index 0000000..5a22d0d
--- /dev/null
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
@@ -0,0 +1,2 @@
+<p>task-overlay works!</p>
+<p>{{ overlayData }}</p>
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.spec.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.spec.ts
new file mode 100644
index 0000000..1eb5f40
--- /dev/null
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskOverlayComponent } from './task-overlay.component';
+
+describe('TaskOverlayComponent', () => {
+  let component: TaskOverlayComponent;
+  let fixture: ComponentFixture<TaskOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskOverlayComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000..06e5051
--- /dev/null
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-task-overlay',
+  standalone: true,
+  imports: [],
+  templateUrl: './task-overlay.component.html',
+  styleUrl: './task-overlay.component.scss',
+})
+export class TaskOverlayComponent {
+  @Input() overlayData: string = '';
+}