diff --git a/client/src/components/ui/Task/index.tsx b/client/src/components/ui/Task/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e79ab27c457ef72037d2e6ce1da602e2ef5e6f7
--- /dev/null
+++ b/client/src/components/ui/Task/index.tsx
@@ -0,0 +1,37 @@
+import './task.scss';
+
+interface TaskInt {
+    name: string,
+    icon: string,
+    start: number,
+    end: number
+}
+
+interface Props {
+    task: TaskInt,
+    active?: boolean,
+}
+
+function formattedTime(date: Date) {
+    return date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+}
+
+export default function Task({ task, active }: Props) {
+    const start = new Date(task.start);
+    const end = new Date(task.end);
+
+
+
+    return (
+        <div className="task">
+            <div className="icon-container">
+                {task.icon}
+            </div>
+            <div className="text-container">
+                <h4>{task.name}</h4>
+                <div className="time">{formattedTime(start)} - {formattedTime(end)}</div>
+            </div>
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ed71250b83faff8611e8932945a08d18ac203fba
--- /dev/null
+++ b/client/src/components/ui/Task/task.scss
@@ -0,0 +1,21 @@
+.task {
+    display: flex;
+    align-items: center;
+    padding: 15px 25px;
+    border-radius: 5px;
+    background: rgba(#fff, .5);
+
+    .icon-container {
+        font-size: 36px;
+        margin-right: 15px;
+    }
+
+    h4 {
+        margin-bottom: 0;
+    }
+
+    .time {
+        opacity: .75;
+        font-size: 12px;
+    }
+}
\ No newline at end of file
diff --git a/client/src/index.scss b/client/src/index.scss
index f83ef1d28df6d2633069e9924e4a35ae6442c310..7bdf4f617cc58c5e586d84ad1f6c44ea84d0f313 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -19,9 +19,6 @@ body {
     position: relative;
     background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
 
-    @include mx.breakpoint(xlarge) {
-        padding: 5rem 0;
-    }
 }
 
 a {
@@ -102,8 +99,9 @@ h2 {
 }
 
 h3 {
-    font-size: fn.toRem(20);
+    font-size: fn.toRem(18);
     margin-bottom: fn.toRem(12);
+    font-weight: s.$weight-semi-bold;
 
     @include mx.breakpoint(large) {
         font-size: fn.toRem(24);
@@ -162,4 +160,4 @@ h4 {
             background: s.$accent;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 8d01b07c0989f2dc0e2a1141a60a1af0e99e82a9..37267897323d015548ed1a394a51b67ef6605eff 100644
--- a/client/src/pages/Home/home.scss
+++ b/client/src/pages/Home/home.scss
@@ -6,6 +6,10 @@
 .landing-page {
     //General
 
+    @include mx.breakpoint(xlarge) {
+        padding: 5rem 0;
+    }
+
     section {
         margin-bottom: 70px;
 
@@ -447,4 +451,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 612654dfb26fa5807f82e14e2506e8a0b2b8dafd..9270a7592f68a96cce8691f04f64325e5542f7fc 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,4 +1,5 @@
 import Page from 'components/ui/Page';
+import Task from 'components/ui/Task';
 import './tasks.scss';
 
 export default function Tasks() {
@@ -10,6 +11,24 @@ export default function Tasks() {
                         <h1 className="underlined">Tasks</h1>
                         <p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
                     </section>
+                    <section className="tasks-container">
+                        <h2>Today</h2>
+                        <div className="hour-container">
+                            <h3>09:00</h3>
+                            <Task task={{
+                                 name: 'Create API Routes',
+                                 icon: '🌎',
+                                 start: 1619074800000,
+                                 end: 1619076600000
+                                 }} />
+                            <Task task={{
+                                 name: 'Create API Routes',
+                                 icon: '🌎',
+                                 start: 1619074800000,
+                                 end: 1619076600000
+                                 }} />
+                        </div>
+                    </section>
                 </main>
             </Page>
             <div className="background-container">
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index 494fdb800f57668e9eb79fd87c6c4f51521cccf1..401e675e070e0dd590d97602eb6df6616b3741ea 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/client/src/pages/Tasks/tasks.scss
@@ -4,6 +4,14 @@
 
 .tasks-page {
     .intro-section {
-       font-size: fn.toRem(18); 
+        font-size: fn.toRem(18);
+    }
+
+    .tasks-container {
+        margin-top: 50px;
+
+        .task {
+            margin-bottom: 30px;
+        }
     }
 }
\ No newline at end of file