diff --git a/src/App.css b/src/App.css
index f7911795f61d3f1a6c0d56c5416bc568f0a61eea..c2bd292de5643a36a7b87b8759cbd9bb11fac3cc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -145,3 +145,12 @@ div.login button:hover {
   z-index: 2020;
   background-color: #ffffff80;
 }
+
+.tasklist-item {
+  margin: 20px;
+}
+
+.task-form{
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
index 7e1c96869686b02aff655e085a57e256e7d2f1d7..b2a318b1b13e0e27f346fe5988a8c79e2e3d561c 100644
--- a/src/components/TaskItem.js
+++ b/src/components/TaskItem.js
@@ -1,15 +1,18 @@
 import React from 'react';
 
 class TaskItem extends React.Component{
-    render(){
-        return(
-            <p>
-                <label>Name: {this.props.text}</label>
-                <br />
-                <label>Description: {this.props.description}</label>
-            </p>
-        );
-    }
+  render(){
+    return(
+      <div className='tasklist-item'>
+        <div>
+          <label>{this.props.text}</label>
+        </div>
+        <div>
+          <label>{this.props.description}</label>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default TaskItem;
\ No newline at end of file
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index d67b16cd2ab5c7acfec223977243a675fb57b363..3410a152bedec27dff8f8f132e2df0f0dffb5295 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -3,16 +3,21 @@ import React from 'react';
 import TaskItem from './TaskItem';
 
 class TaskList extends React.Component{
-    render(){
-        return ReactDOM.createPortal(
-            <div className='tasklist'>
-                <TaskItem text='asd' description='asudhaiud'/>
-                <TaskItem text='asd2' description='q7213761923769821'/>
-                <TaskItem text='asd3' description='tehtävä3'/>
-            </div>,
-            document.getElementById('tasklist')
-        );
-    }
+  render(){
+    return ReactDOM.createPortal(
+      <div className='tasklist'>
+      <div className='task-form'>
+        <input type='text' placeholder='Task name'></input>
+        <textarea placeholder='Task description'></textarea>
+        <button>Add new task</button>
+      </div>
+      <TaskItem text='asd' description='asudhaiud'/>
+      <TaskItem text='asd2' description='q7213761923769821'/>
+      <TaskItem text='asd3' description='tehtävä3'/>
+      </div>,
+      document.getElementById('tasklist')
+    );
+  }
 }
 
 export default TaskList;
\ No newline at end of file