diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index 0835722..d6ad9f7 100644
--- a/src/app/components/board/board.component.html
+++ b/src/app/components/board/board.component.html
@@ -44,7 +44,7 @@
             onclick="openAddTaskPage('todo')"
           />
         </div>
-        <div id="content-todo" class="content-tasks"></div>
+        <div id="content-todo"><app-task></app-task></div>
       </div>
 
       <div
@@ -60,7 +60,7 @@
             onclick="openAddTaskPage('inprogress')"
           />
         </div>
-        <div id="content-inprogress" class="content-tasks"></div>
+        <div id="content-inprogress"><app-task></app-task></div>
       </div>
 
       <div
@@ -76,7 +76,7 @@
             onclick="openAddTaskPage('awaitfeedback')"
           />
         </div>
-        <div id="content-awaitfeedback" class="content-tasks"></div>
+        <div id="content-awaitfeedback"><app-task></app-task></div>
       </div>
 
       <div
@@ -92,7 +92,7 @@
             onclick="openAddTaskPage('done')"
           />
         </div>
-        <div id="content-done" class="content-tasks"></div>
+        <div id="content-done"><app-task></app-task></div>
       </div>
     </div>
     <div id="content-tasks"></div>
diff --git a/src/app/components/board/board.component.scss b/src/app/components/board/board.component.scss
index 05f2f1e..56317a8 100644
--- a/src/app/components/board/board.component.scss
+++ b/src/app/components/board/board.component.scss
@@ -83,18 +83,7 @@ h1 {
   margin: 0 6px;
 }
 
-/*------------- BOARD CONTENT -------------*/
-
-.content-column {
-  display: flex;
-  flex-direction: column;
-  padding-right: 32px;
-}
-
-.content-column:first-child {
-  padding-left: 0;
-}
-/*------------- BOARD CONTENT (HEADLINE) -------------*/
+/*------------- HEADLINE -------------*/
 
 .content {
   max-width: calc(1080px + 32px);
@@ -131,165 +120,14 @@ h1 {
     brightness(92%) contrast(92%);
 }
 
-/*------------- BOARD CONTENT (TASKS) -------------*/
+/*------------- CONTENT -------------*/
 
-.content-tasks {
-  width: 246px;
-  height: 100%;
-  margin: 15.5px 0;
-}
-
-.board-empty-task {
+.content-column {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-width: 246px;
-  height: 48px;
-  border-radius: 10px;
-  border: 1px dashed var(--gray);
-  background-color: var(--very-light-gray2);
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--gray);
+  padding-right: 32px;
 }
 
-.board-cart {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 214px;
-  padding: 16px;
-  border-radius: 24px;
-  background-color: var(--white);
-  box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-  margin-bottom: 16px;
-}
-
-.board-cart:hover {
-  box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
-}
-
-.board-card-category {
-  position: absolute;
-  font-size: 16px;
-  top: 16px;
-  left: 16px;
-  padding: 4px 16px;
-  border-radius: 8px;
-  color: var(--white);
-  text-shadow: 1px 1px 2px var(--black);
-}
-
-.board-card-headline {
-  color: var(--dark-blue);
-  font-size: 16px;
-  font-weight: 700;
-  margin-top: 40px;
-}
-
-.board-card-description {
-  color: var(--gray);
-  font-size: 16px;
-  font-weight: 400;
-  margin-top: 8px;
-  max-height: 100px;
-  overflow: auto;
-}
-
-.board-card-subtask {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 24px;
-}
-
-.board-card-subtask-line {
-  display: flex;
-  width: 120px;
-  height: 8px;
-  padding-right: 0px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  border-radius: 8px;
-  background-color: var(--very-light-gray3);
-  margin-right: 11px;
-}
-
-.filler-full {
-  border-radius: 16px;
-  background-color: var(--medium-blue);
-  height: 8px;
-}
-
-.board-card-subtask-text {
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.board-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 24px;
-  width: 100%;
-}
-
-#board-card-footer-badge {
-  display: flex;
-  width: 170px;
-  overflow: auto;
-}
-
-.board-card-footer-badged {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 32px;
-  min-height: 32px;
-  border-radius: 45px;
-  border: 1px solid var(--white);
-  color: var(--white);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-#board-card-footer-badge span {
-  margin-right: 4px;
-  text-shadow: 1px 1px 2px var(--black);
-}
-
-#board-card-footer-badge span:first-child {
-  margin-left: 0 !important;
-}
-
-.board-card-footer-priority {
-  background-size: 32px;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 32px;
-  height: 32px;
-}
-.board-card-priority {
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 24px;
-  height: 24px;
-}
-
-.prio-urgent {
-  background-image: url(./../../../assets/img/urgent.svg);
-}
-
-.prio-medium {
-  background-image: url(./../../../assets/img/medium.svg);
-}
-
-.prio-low {
-  background-image: url(./../../../assets/img/low.svg);
+.content-column:first-child {
+  padding-left: 0;
 }
diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts
index 012da04..11a1852 100644
--- a/src/app/components/board/board.component.ts
+++ b/src/app/components/board/board.component.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { TaskComponent } from './task/task.component';
 
 @Component({
   selector: 'app-board',
   standalone: true,
-  imports: [],
+  imports: [TaskComponent],
   templateUrl: './board.component.html',
-  styleUrl: './board.component.scss'
+  styleUrl: './board.component.scss',
 })
-export class BoardComponent {
-
-}
+export class BoardComponent {}
diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html
new file mode 100644
index 0000000..40a6399
--- /dev/null
+++ b/src/app/components/board/task/task.component.html
@@ -0,0 +1,23 @@
+<section>
+  <div
+    class="content"
+    draggable="true"
+    ondragstart="startDragging(
+    tasks[id].id
+  )"
+  >
+    <div
+      class="category"
+      style="background-color: var(--generateTaskCategoryColor(id))"
+    >
+      category
+    </div>
+    <div class="headline">title</div>
+    <div class="description">description</div>
+    checkSubtasks(tasks[id].id)
+    <div class="footer">
+      <div id="footer-badge">checkAssignetContacts(tasks[id].id)</div>
+      <div class="footer-priority"></div>
+    </div>
+  </div>
+</section>
diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss
new file mode 100644
index 0000000..b0e40a9
--- /dev/null
+++ b/src/app/components/board/task/task.component.scss
@@ -0,0 +1,159 @@
+section {
+  width: 246px;
+  height: 100%;
+  margin: 15.5px 0;
+}
+
+.empty-task {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-width: 246px;
+  height: 48px;
+  border-radius: 10px;
+  border: 1px dashed var(--gray);
+  background-color: var(--very-light-gray2);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--gray);
+}
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 214px;
+  padding: 16px;
+  border-radius: 24px;
+  background-color: var(--white);
+  box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  margin-bottom: 16px;
+  &:hover {
+    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.category {
+  position: absolute;
+  font-size: 16px;
+  top: 16px;
+  left: 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;
+}
+
+.subtask {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+}
+
+.subtask-line {
+  display: flex;
+  width: 120px;
+  height: 8px;
+  padding-right: 0px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 8px;
+  background-color: var(--very-light-gray3);
+  margin-right: 11px;
+}
+
+.filler-full {
+  border-radius: 16px;
+  background-color: var(--medium-blue);
+  height: 8px;
+}
+
+.subtask-text {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+  width: 100%;
+}
+
+#footer-badge {
+  display: flex;
+  width: 170px;
+  overflow: auto;
+}
+
+.footer-badged {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 32px;
+  min-height: 32px;
+  border-radius: 45px;
+  border: 1px solid var(--white);
+  color: var(--white);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+#footer-badge span {
+  margin-right: 4px;
+  text-shadow: 1px 1px 2px var(--black);
+}
+
+#footer-badge span:first-child {
+  margin-left: 0 !important;
+}
+
+.footer-priority {
+  background-size: 32px;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 32px;
+  height: 32px;
+}
+.priority {
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 24px;
+  height: 24px;
+}
+
+.prio-urgent {
+  background-image: url(./../../../../assets/img/urgent.svg);
+}
+
+.prio-medium {
+  background-image: url(./../../../../assets/img/medium.svg);
+}
+
+.prio-low {
+  background-image: url(./../../../../assets/img/low.svg);
+}
diff --git a/src/app/components/board/task/task.component.spec.ts b/src/app/components/board/task/task.component.spec.ts
new file mode 100644
index 0000000..27dca01
--- /dev/null
+++ b/src/app/components/board/task/task.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskComponent } from './task.component';
+
+describe('TaskComponent', () => {
+  let component: TaskComponent;
+  let fixture: ComponentFixture<TaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts
new file mode 100644
index 0000000..e3d816f
--- /dev/null
+++ b/src/app/components/board/task/task.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task',
+  standalone: true,
+  imports: [],
+  templateUrl: './task.component.html',
+  styleUrl: './task.component.scss',
+})
+export class TaskComponent {}