diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index f0256e7..0835722 100644
--- a/src/app/components/board/board.component.html
+++ b/src/app/components/board/board.component.html
@@ -1 +1,100 @@
-<p>board works!</p>
+<div
+  id="task-overlay-cart"
+  class="dialog-bg d-none"
+  onclick="closeCart(event)"
+></div>
+<div
+  id="add-task-dialog"
+  class="dialog-bg d-none"
+  onclick="closeAddTask(event)"
+></div>
+<section>
+  <div class="header">
+    <h1>Board</h1>
+    <div class="search">
+      <div>
+        <input
+          id="searchfield"
+          type="text"
+          placeholder="Find Task"
+          oninput="searchTask()"
+        />
+        <span class="line"></span>
+      </div>
+      <button class="btn-addtask" type="submit" onclick="openAddTaskPage()">
+        <div class="btn-inside">
+          <span>Add Task</span>
+          <img src="./../../../assets/img/board/add_white.svg" alt="check" />
+        </div>
+      </button>
+    </div>
+  </div>
+  <div class="content">
+    <div id="content-headline">
+      <div
+        class="content-column"
+        ondragover="allowDrop(event)"
+        ondrop="drop('todo')"
+      >
+        <div class="content-headline">
+          <span>To do</span
+          ><img
+            src="./../../../assets/img/board/add.svg"
+            alt="add"
+            onclick="openAddTaskPage('todo')"
+          />
+        </div>
+        <div id="content-todo" class="content-tasks"></div>
+      </div>
+
+      <div
+        class="content-column"
+        ondragover="allowDrop(event)"
+        ondrop="drop('inprogress')"
+      >
+        <div class="content-headline">
+          <span>In progress</span
+          ><img
+            src="./../../../assets/img/board/add.svg"
+            alt="add"
+            onclick="openAddTaskPage('inprogress')"
+          />
+        </div>
+        <div id="content-inprogress" class="content-tasks"></div>
+      </div>
+
+      <div
+        class="content-column"
+        ondragover="allowDrop(event)"
+        ondrop="drop('awaitfeedback')"
+      >
+        <div class="content-headline">
+          <span>Await feedback</span
+          ><img
+            src="./../../../assets/img/board/add.svg"
+            alt="add"
+            onclick="openAddTaskPage('awaitfeedback')"
+          />
+        </div>
+        <div id="content-awaitfeedback" class="content-tasks"></div>
+      </div>
+
+      <div
+        class="content-column"
+        ondragover="allowDrop(event)"
+        ondrop="drop('done')"
+      >
+        <div class="content-headline">
+          <span>Done</span
+          ><img
+            src="./../../../assets/img/board/add.svg"
+            alt="add"
+            onclick="openAddTaskPage('done')"
+          />
+        </div>
+        <div id="content-done" class="content-tasks"></div>
+      </div>
+    </div>
+    <div id="content-tasks"></div>
+  </div>
+</section>
diff --git a/src/app/components/board/board.component.scss b/src/app/components/board/board.component.scss
index e69de29..05f2f1e 100644
--- a/src/app/components/board/board.component.scss
+++ b/src/app/components/board/board.component.scss
@@ -0,0 +1,295 @@
+section {
+  margin: 0;
+  background-color: var(--very-light-gray);
+  padding-right: 24px;
+}
+
+h1 {
+  margin: 0;
+}
+
+.blue {
+  background-color: var(--blue);
+}
+
+/*------------- HEADER -------------*/
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1080px;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.btn-inside {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-inside span {
+  margin-right: 4px;
+}
+
+.btn-addtask {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 32px;
+  width: 165px;
+  padding: 8px 8px 8px 16px;
+  border-radius: 10px;
+  border: 0;
+  background-color: var(--dark-blue);
+  color: var(--white);
+  cursor: pointer;
+  font-size: 21px;
+  font-weight: 700;
+  margin-left: 16px;
+}
+
+.btn-addtask:hover {
+  background-color: var(--light-blue);
+  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+}
+
+.search input {
+  width: 312px;
+  padding: 8px 16px;
+  align-items: center;
+  border-radius: 10px;
+  border: 1px solid var(--gray);
+  background-color: var(--white);
+  background-image: url("./../../../assets/img/board/search.svg");
+  background-position-x: calc(100% - 10px);
+  background-position-y: center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+}
+
+.line {
+  position: absolute;
+  top: 8px;
+  right: 215px;
+  height: 18px;
+  width: 1px;
+  background-color: var(--gray);
+  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) -------------*/
+
+.content {
+  max-width: calc(1080px + 32px);
+}
+
+#content-headline {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 48px;
+}
+
+.content-headline {
+  display: flex;
+  justify-content: space-between;
+  min-width: 246px;
+}
+
+.content-headline span {
+  color: var(--blue-gray);
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.content-headline img {
+  border-radius: 8px;
+  border: 2px solid var(--dark-blue);
+  cursor: pointer;
+}
+
+.content-headline img:hover {
+  filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
+    brightness(92%) contrast(92%);
+}
+
+/*------------- BOARD CONTENT (TASKS) -------------*/
+
+.content-tasks {
+  width: 246px;
+  height: 100%;
+  margin: 15.5px 0;
+}
+
+.board-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);
+}
+
+.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);
+}
diff --git a/src/assets/img/board/add.svg b/src/assets/img/board/add.svg
new file mode 100644
index 0000000..168b447
--- /dev/null
+++ b/src/assets/img/board/add.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Subtasks icons11">
+<mask id="mask0_75601_15213" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">
+<rect id="Bounding box" x="0.248535" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_75601_15213)">
+<path id="add" d="M11.2485 13H6.24854C5.9652 13 5.7277 12.9042 5.53604 12.7125C5.34437 12.5208 5.24854 12.2833 5.24854 12C5.24854 11.7167 5.34437 11.4792 5.53604 11.2875C5.7277 11.0958 5.9652 11 6.24854 11H11.2485V6C11.2485 5.71667 11.3444 5.47917 11.536 5.2875C11.7277 5.09583 11.9652 5 12.2485 5C12.5319 5 12.7694 5.09583 12.961 5.2875C13.1527 5.47917 13.2485 5.71667 13.2485 6V11H18.2485C18.5319 11 18.7694 11.0958 18.961 11.2875C19.1527 11.4792 19.2485 11.7167 19.2485 12C19.2485 12.2833 19.1527 12.5208 18.961 12.7125C18.7694 12.9042 18.5319 13 18.2485 13H13.2485V18C13.2485 18.2833 13.1527 18.5208 12.961 18.7125C12.7694 18.9042 12.5319 19 12.2485 19C11.9652 19 11.7277 18.9042 11.536 18.7125C11.3444 18.5208 11.2485 18.2833 11.2485 18V13Z" fill="#2A3647"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/img/board/add_white.svg b/src/assets/img/board/add_white.svg
new file mode 100644
index 0000000..a0a325b
--- /dev/null
+++ b/src/assets/img/board/add_white.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="add">
+<mask id="mask0_105281_3931" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect id="Bounding box" width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_105281_3931)">
+<path id="add_2" d="M14.666 17.3327H6.66602V14.666H14.666V6.66602H17.3327V14.666H25.3327V17.3327H17.3327V25.3327H14.666V17.3327Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/img/board/search.svg b/src/assets/img/board/search.svg
new file mode 100644
index 0000000..c9823c8
--- /dev/null
+++ b/src/assets/img/board/search.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="search">
+<mask id="mask0_105281_5742" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect id="Bounding box" width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_105281_5742)">
+<path id="search_2" d="M13.7118 20.2137C11.8946 20.2137 10.3567 19.5843 9.098 18.3256C7.83931 17.0669 7.20996 15.529 7.20996 13.7118C7.20996 11.8946 7.83931 10.3567 9.098 9.098C10.3567 7.83931 11.8946 7.20996 13.7118 7.20996C15.529 7.20996 17.0669 7.83931 18.3256 9.098C19.5843 10.3567 20.2137 11.8946 20.2137 13.7118C20.2137 14.4454 20.097 15.1372 19.8636 15.7874C19.6302 16.4376 19.3134 17.0127 18.9133 17.5129L24.5149 23.1145C24.6983 23.2979 24.79 23.5313 24.79 23.8147C24.79 24.0981 24.6983 24.3315 24.5149 24.5149C24.3315 24.6983 24.0981 24.79 23.8147 24.79C23.5313 24.79 23.2979 24.6983 23.1145 24.5149L17.5129 18.9133C17.0127 19.3134 16.4376 19.6302 15.7874 19.8636C15.1372 20.097 14.4454 20.2137 13.7118 20.2137ZM13.7118 18.2131C14.9622 18.2131 16.025 17.7755 16.9002 16.9002C17.7755 16.025 18.2131 14.9622 18.2131 13.7118C18.2131 12.4615 17.7755 11.3987 16.9002 10.5234C16.025 9.64815 14.9622 9.21053 13.7118 9.21053C12.4615 9.21053 11.3987 9.64815 10.5234 10.5234C9.64815 11.3987 9.21053 12.4615 9.21053 13.7118C9.21053 14.9622 9.64815 16.025 10.5234 16.9002C11.3987 17.7755 12.4615 18.2131 13.7118 18.2131Z" fill="#2A3647"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/img/low.svg b/src/assets/img/low.svg
new file mode 100644
index 0000000..664f0d4
--- /dev/null
+++ b/src/assets/img/low.svg
@@ -0,0 +1,10 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Prio baja">
+<g id="Capa 2">
+<g id="Capa 1">
+<path id="Vector" d="M10.2485 9.50589C10.0139 9.5063 9.7854 9.43145 9.59655 9.29238L0.693448 2.72264C0.57761 2.63708 0.47977 2.52957 0.405515 2.40623C0.33126 2.28289 0.282043 2.14614 0.260675 2.00379C0.217521 1.71631 0.290421 1.42347 0.463337 1.1897C0.636253 0.955928 0.895022 0.800371 1.18272 0.757248C1.47041 0.714126 1.76347 0.786972 1.99741 0.95976L10.2485 7.04224L18.4997 0.95976C18.6155 0.874204 18.7471 0.812285 18.8869 0.777538C19.0266 0.742791 19.1719 0.735896 19.3144 0.757248C19.4568 0.7786 19.5937 0.82778 19.7171 0.901981C19.8405 0.976181 19.9481 1.07395 20.0337 1.1897C20.1194 1.30545 20.1813 1.43692 20.2161 1.57661C20.2509 1.71629 20.2578 1.86145 20.2364 2.00379C20.215 2.14614 20.1658 2.28289 20.0916 2.40623C20.0173 2.52957 19.9195 2.63708 19.8036 2.72264L10.9005 9.29238C10.7117 9.43145 10.4831 9.5063 10.2485 9.50589Z" fill="#7AE229"/>
+<path id="Vector_2" d="M10.2485 15.2544C10.0139 15.2548 9.7854 15.18 9.59655 15.0409L0.693448 8.47117C0.459502 8.29839 0.30383 8.03981 0.260675 7.75233C0.217521 7.46485 0.290421 7.17201 0.463337 6.93824C0.636253 6.70446 0.895021 6.54891 1.18272 6.50578C1.47041 6.46266 1.76347 6.53551 1.99741 6.7083L10.2485 12.7908L18.4997 6.7083C18.7336 6.53551 19.0267 6.46266 19.3144 6.50578C19.602 6.54891 19.8608 6.70446 20.0337 6.93824C20.2066 7.17201 20.2795 7.46485 20.2364 7.75233C20.1932 8.03981 20.0376 8.29839 19.8036 8.47117L10.9005 15.0409C10.7117 15.18 10.4831 15.2548 10.2485 15.2544Z" fill="#7AE229"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/src/assets/img/medium.svg b/src/assets/img/medium.svg
new file mode 100644
index 0000000..60a2f7b
--- /dev/null
+++ b/src/assets/img/medium.svg
@@ -0,0 +1,15 @@
+<svg width="21" height="8" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Prio media" clip-path="url(#clip0_104454_4289)">
+<g id="Capa 2">
+<g id="Capa 1">
+<path id="Vector" d="M19.1526 7.72528H1.34443C1.05378 7.72528 0.775033 7.60898 0.569514 7.40197C0.363995 7.19495 0.248535 6.91419 0.248535 6.62143C0.248535 6.32867 0.363995 6.0479 0.569514 5.84089C0.775033 5.63388 1.05378 5.51758 1.34443 5.51758H19.1526C19.4433 5.51758 19.722 5.63388 19.9276 5.84089C20.1331 6.0479 20.2485 6.32867 20.2485 6.62143C20.2485 6.91419 20.1331 7.19495 19.9276 7.40197C19.722 7.60898 19.4433 7.72528 19.1526 7.72528Z" fill="#FFA800"/>
+<path id="Vector_2" d="M19.1526 2.48211H1.34443C1.05378 2.48211 0.775033 2.36581 0.569514 2.1588C0.363995 1.95179 0.248535 1.67102 0.248535 1.37826C0.248535 1.0855 0.363995 0.804736 0.569514 0.597724C0.775033 0.390712 1.05378 0.274414 1.34443 0.274414L19.1526 0.274414C19.4433 0.274414 19.722 0.390712 19.9276 0.597724C20.1331 0.804736 20.2485 1.0855 20.2485 1.37826C20.2485 1.67102 20.1331 1.95179 19.9276 2.1588C19.722 2.36581 19.4433 2.48211 19.1526 2.48211Z" fill="#FFA800"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_104454_4289">
+<rect width="20" height="7.45098" fill="white" transform="translate(0.248535 0.274414)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/img/urgent.svg b/src/assets/img/urgent.svg
new file mode 100644
index 0000000..55f9ffb
--- /dev/null
+++ b/src/assets/img/urgent.svg
@@ -0,0 +1,15 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Prio alta" clip-path="url(#clip0_104454_4282)">
+<g id="Capa 2">
+<g id="Capa 1">
+<path id="Vector" d="M19.6528 15.2547C19.4182 15.2551 19.1896 15.1803 19.0007 15.0412L10.7487 8.958L2.49663 15.0412C2.38078 15.1267 2.24919 15.1887 2.10939 15.2234C1.96959 15.2582 1.82431 15.2651 1.68184 15.2437C1.53937 15.2223 1.40251 15.1732 1.27906 15.099C1.15562 15.0247 1.04801 14.927 0.96238 14.8112C0.876751 14.6954 0.814779 14.5639 0.780002 14.4243C0.745226 14.2846 0.738325 14.1394 0.759696 13.997C0.802855 13.7095 0.958545 13.4509 1.19252 13.2781L10.0966 6.70761C10.2853 6.56802 10.5139 6.49268 10.7487 6.49268C10.9835 6.49268 11.212 6.56802 11.4007 6.70761L20.3048 13.2781C20.4908 13.415 20.6286 13.6071 20.6988 13.827C20.7689 14.0469 20.7678 14.2833 20.6955 14.5025C20.6232 14.7216 20.4834 14.9124 20.2962 15.0475C20.1089 15.1826 19.8837 15.2551 19.6528 15.2547Z" fill="#FF3D00"/>
+<path id="Vector_2" d="M19.6528 9.50568C19.4182 9.50609 19.1896 9.43124 19.0007 9.29214L10.7487 3.20898L2.49663 9.29214C2.26266 9.46495 1.96957 9.5378 1.68184 9.49468C1.39412 9.45155 1.13532 9.29597 0.962385 9.06218C0.789449 8.82838 0.716541 8.53551 0.7597 8.24799C0.802859 7.96048 0.95855 7.70187 1.19252 7.52906L10.0966 0.958588C10.2853 0.818997 10.5139 0.743652 10.7487 0.743652C10.9835 0.743652 11.212 0.818997 11.4007 0.958588L20.3048 7.52906C20.4908 7.66598 20.6286 7.85809 20.6988 8.07797C20.769 8.29785 20.7678 8.53426 20.6955 8.75344C20.6232 8.97262 20.4834 9.16338 20.2962 9.29847C20.1089 9.43356 19.8837 9.50608 19.6528 9.50568Z" fill="#FF3D00"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_104454_4282">
+<rect width="20" height="14.5098" fill="white" transform="translate(0.748535 0.745117)"/>
+</clipPath>
+</defs>
+</svg>