diff --git a/src/app/shared/components/overlay/overlay.component.scss b/src/app/shared/components/overlay/overlay.component.scss
index 66626e3..c5f18e4 100644
--- a/src/app/shared/components/overlay/overlay.component.scss
+++ b/src/app/shared/components/overlay/overlay.component.scss
@@ -17,11 +17,3 @@
   align-items: center;
   justify-content: center;
 }
-
-.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/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html
index 5a22d0d..bd4a78f 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
@@ -1,2 +1,14 @@
-<p>task-overlay works!</p>
-<p>{{ overlayData }}</p>
+<section>
+  <div
+    class="category"
+    [style.background-color]="
+      categoryColors.get(getTask(overlayData)[0].category)
+    "
+  >
+    {{ getTask(overlayData)[0].category }}
+  </div>
+  <div class="headline">{{ getTask(overlayData)[0].title }}</div>
+  <div class="description">
+    {{ getTask(overlayData)[0].description }}
+  </div>
+</section>
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
index e69de29..bf1abfd 100644
--- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss
@@ -0,0 +1,31 @@
+section {
+  width: 525px;
+  height: 700px;
+  padding: 48px 40px 48px 40px;
+  border-radius: 30px;
+  background-color: var(--white);
+}
+
+.category {
+  font-size: 16px;
+  padding: 4px 16px;
+  border-radius: 8px;
+  color: var(--white);
+  text-shadow: 1px 1px 2px var(--black);
+}
+
+.headline {
+  color: var(--dark-blue);
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 40px;
+}
+
+.description {
+  color: var(--gray);
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: 8px;
+  max-height: 100px;
+  overflow: auto;
+}
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 06e5051..a75d165 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
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { FirebaseService } from '../../../../services/firebase.service';
 
 @Component({
   selector: 'app-task-overlay',
@@ -9,4 +10,17 @@ import { Component, Input } from '@angular/core';
 })
 export class TaskOverlayComponent {
   @Input() overlayData: string = '';
+
+  constructor(private firebaseService: FirebaseService) {}
+
+  categoryColors = new Map<string, string>([
+    ['User Story', '#0038ff'],
+    ['Technical Task', '#20d7c2'],
+  ]);
+
+  getTask(taskId: string) {
+    return this.firebaseService
+      .getAllTasks()
+      .filter((task) => task.id === taskId);
+  }
 }