diff --git a/assets/img/none-assigned.png b/assets/img/none-assigned.png
index fc1a31f..fbff0ff 100644
Binary files a/assets/img/none-assigned.png and b/assets/img/none-assigned.png differ
diff --git a/assets/img/none.png b/assets/img/none.png
new file mode 100644
index 0000000..fbff0ff
Binary files /dev/null and b/assets/img/none.png differ
diff --git a/components/addItem/style.css b/components/addItem/style.css
index 047224d..7e21f20 100644
--- a/components/addItem/style.css
+++ b/components/addItem/style.css
@@ -26,7 +26,7 @@
   box-shadow: none;
   outline: none;
   border: none;
-  border-left: 7.5px solid #eee;
+  border-left: 3.5px solid #eee;
   border-top: 1px solid #eee;
   border-right: 1px solid #eee;
   border-bottom: 1px solid #eee;
diff --git a/components/groups/index.js b/components/groups/index.js
index fd1d2ed..f70ef27 100644
--- a/components/groups/index.js
+++ b/components/groups/index.js
@@ -101,9 +101,15 @@ export default class BoardGroup extends Component {
         <table cellpadding="2" cellSpacing="2" class={style.group}>
           <thead class={style.tableHead} style={`display: table-header-group;`}>
             <tr>
-              <th scope="row" style={`text-align: left; font-size: 18px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0;`}>
+              <th scope="row" style={`text-align: left; font-size: 22px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0; padding-left: 12px;`}>
                 <input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
               </th>
+            </tr>
+            <tr class={style.tableH}>
+              {/* <th scope="row" style={`text-align: left; font-size: 18px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0;`}>
+                <input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
+              </th> */}
+              <th style={`width: 25%; min-width: 300px;`}>opdracht</th>
               <th style={`width: 5%; min-width: 60px; max-width: 90px;`}>Door wie</th>
               <th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p2</th>
               <th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p3</th>
diff --git a/components/groups/style.css b/components/groups/style.css
index 3906950..70b7960 100644
--- a/components/groups/style.css
+++ b/components/groups/style.css
@@ -22,6 +22,9 @@
 .group{
   width: 100%;
   display: table;
+  padding: 3px;
+  box-sizing: border-box;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
 }
 
 .group thead{
@@ -116,4 +119,12 @@
 
 .tdAddItem{
   padding: 0;
+}
+
+.tableH{
+  background: #f8f8f8;
+}
+
+.tableH th{
+  border-bottom: 1px solid #e9e9e9;
 }
\ No newline at end of file
diff --git a/components/item/index.js b/components/item/index.js
index 693a377..3e9d99d 100644
--- a/components/item/index.js
+++ b/components/item/index.js
@@ -2,10 +2,16 @@ import { h, Component } from 'preact';
 import style from './style';
 import SelectPerson from '../selectPerson';
 import SelectStatus from '../selectStatus';
+import moment from 'moment';
 
 import trashIcon from '../../assets/img/trash-alt.svg';
 
 export default class Item extends Component {
+  constructor() {
+    super();
+
+    this.checkIfPast = this.checkIfPast.bind(this);
+  }
   handleChange(e, key) {
     const item = this.props.details;
     const updatedOpdracht = {
@@ -15,6 +21,20 @@ export default class Item extends Component {
     this.props.updateItem(key, updatedOpdracht);
   }
 
+  checkIfPast() {
+    let timeAg = moment(this.props.details.deadline, 'DD/MM/YY').fromNow();
+    if ( timeAg.indexOf('ago') >= 0 && this.props.details.status !== 'Done'){
+      return <span class={style.inPast}>{timeAg}</span>;
+    }
+    else if ( timeAg.indexOf('ago') >= 0){
+      return <span class={style.inPastDone}>{timeAg}</span>;
+    }
+    else if (timeAg.indexOf('Invalid date') >= 0) {
+      return false;
+    }
+    return timeAg;
+  }
+
 
   render() {
     const details = this.props.details;
@@ -22,118 +42,159 @@ export default class Item extends Component {
     return (
       <tr class={style.tableRow}>
         <td style={`width: 25%; min-width: 300px;`}>
-          <div class={style.innerWrap} style={`border-left: 7.5px solid ${this.props.color}`}>
-            <input
-              class={style.inputDesc}
-              name="desc"
-              onChange={(e) => this.handleChange(e, this.props.index)}
-              type="text"
-              value={details.desc}
-              placeholder="This is a example description (Click to edit)"
-            />
+          <div class={style.innerWrap} style={`border-left: 3.5px solid ${this.props.color}`}>
+            <div class={style.subRow}>
+              <input
+                class={style.inputDesc}
+                name="desc"
+                onChange={(e) => this.handleChange(e, this.props.index)}
+                type="text"
+                value={details.desc}
+                placeholder="This is a example description (Click to edit)"
+              />
+            </div>
+            <div class={style.subRow} />
           </div>
         </td>
         <td style={`min-width: 60px; width: 5%; max-width: 90px;`}>
           <div class={style.innerWrap}>
-            <SelectPerson
-              personI={`p1`}
-              index={this.props.index}
-              details={this.props.details}
-              updateItem={this.props.updateItem}
-              teamname={this.props.teamname}
-              boardName={this.props.boardName}
-              groupI={this.props.groupI}
-            />
+            <div class={style.subRow}>
+              <SelectPerson
+                personI={`p1`}
+                index={this.props.index}
+                details={this.props.details}
+                updateItem={this.props.updateItem}
+                teamname={this.props.teamname}
+                boardName={this.props.boardName}
+                groupI={this.props.groupI}
+              />
+            </div>
+            <div class={style.subRow} >
+              <p>{details.p1}</p>
+            </div>
           </div>
         </td>
         <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
           <div class={style.innerWrap}>
-            <SelectPerson
-              personI={`p2`}
-              index={this.props.index}
-              details={this.props.details}
-              updateItem={this.props.updateItem}
-              teamname={this.props.teamname}
-              boardName={this.props.boardName}
-              groupI={this.props.groupI}
-            />
+            <div class={style.subRow}>
+              <SelectPerson
+                personI={`p2`}
+                index={this.props.index}
+                details={this.props.details}
+                updateItem={this.props.updateItem}
+                teamname={this.props.teamname}
+                boardName={this.props.boardName}
+                groupI={this.props.groupI}
+              />
+            </div>
+            <div class={style.subRow} >
+              <p>{details.p2}</p>
+            </div>
           </div>
         </td>
         <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
           <div class={style.innerWrap}>
-            <SelectPerson
-              personI={`p3`}
-              index={this.props.index}
-              details={this.props.details}
-              updateItem={this.props.updateItem}
-              teamname={this.props.teamname}
-              boardName={this.props.boardName}
-              groupI={this.props.groupI}
-            />
+            <div class={style.subRow} >
+              <SelectPerson
+                personI={`p3`}
+                index={this.props.index}
+                details={this.props.details}
+                updateItem={this.props.updateItem}
+                teamname={this.props.teamname}
+                boardName={this.props.boardName}
+                groupI={this.props.groupI}
+              />
+            </div>
+            <div class={style.subRow} >
+              <p>{details.p3}</p>
+            </div>
           </div>
         </td>
         <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
           <div class={style.innerWrap}>
-            <SelectPerson
-              personI={`p4`}
-              index={this.props.index}
-              details={this.props.details}
-              updateItem={this.props.updateItem}
-              teamname={this.props.teamname}
-              boardName={this.props.boardName}
-              groupI={this.props.groupI}
-            />
+            <div class={style.subRow}>
+              <SelectPerson
+                personI={`p4`}
+                index={this.props.index}
+                details={this.props.details}
+                updateItem={this.props.updateItem}
+                teamname={this.props.teamname}
+                boardName={this.props.boardName}
+                groupI={this.props.groupI}
+              />
+            </div>
+            <div class={style.subRow} >
+              <p>{details.p4}</p>
+            </div>
           </div>
         </td>
         <td style={`min-width: 130px;`}>
           <div class={style.innerWrap}>
-            <SelectStatus
-              statusI={`status`}
-              formId={`${details.in1d + 4}`}
-              index={this.props.index}
-              details={this.props.details}
-              updateItem={this.props.updateItem}
-              boardName={this.props.boardName}
-              groupI={this.props.groupI}
-            />
+            <div class={style.subRow} >
+              <SelectStatus
+                statusI={`status`}
+                formId={`${details.in1d + 4}`}
+                index={this.props.index}
+                details={this.props.details}
+                updateItem={this.props.updateItem}
+                boardName={this.props.boardName}
+                groupI={this.props.groupI}
+              />
+            </div>
+            <div class={style.subRow} />
           </div>
         </td>
         <td style={`min-width: 100px;`}>
           <div class={style.innerWrap}>
-            <input
-              autocomplete="nope"
-              class={style.deadline}
-              name="finishGoal"
-              onChange={(e) => this.handleChange(e, this.props.index)}
-              type="text"
-              value={details.finishGoal}
-              placeholder="dd/mm/yy"
-            />
+            <div class={style.subRow} >
+              <input
+                autocomplete="nope"
+                class={style.deadline}
+                name="finishGoal"
+                onChange={(e) => this.handleChange(e, this.props.index)}
+                type="text"
+                value={details.finishGoal}
+                placeholder="dd/mm/yy"
+              />
+            </div>
+            <div class={style.subRow} />
           </div>
         </td>
         <td style={`min-width: 100px;`}>
           <div class={style.innerWrap}>
-            <input
-              autocomplete="nope"
-              class={style.deadline}
-              name="deadline"
-              onChange={(e) => this.handleChange(e, this.props.index)}
-              type="date"
-              value={details.deadline}
-              placeholder="dd/mm/yy"
-            />
+            <div class={style.subRow} >
+              <input
+                autocomplete="nope"
+                class={style.deadline}
+                name="deadline"
+                onChange={(e) => this.handleChange(e, this.props.index)}
+                type="text"
+                value={details.deadline}
+                placeholder="dd/mm/yy"
+              />
+            </div>
+            <div class={style.subRow}>
+              <p>
+                {
+                  this.checkIfPast()
+                }
+              </p>
+            </div>
           </div>
         </td>
         <td style={`min-width: 100px;`}>
           <div class={style.innerWrap}>
-            <input
-              class={style.tookTime}
-              name="tooktime"
-              onChange={(e) => this.handleChange(e, this.props.index)}
-              type="number"
-              value={details.tooktime}
-              placeholder="000"
-            />
+            <div class={style.subRow} >
+              <input
+                class={style.tookTime}
+                name="tooktime"
+                onChange={(e) => this.handleChange(e, this.props.index)}
+                type="number"
+                value={details.tooktime}
+                placeholder="tijd in uren"
+              />
+            </div>
+            <div class={style.subRow} />
           </div>
         </td>
         <td style={`width: 3%;`}>
diff --git a/components/item/style.css b/components/item/style.css
index bc9eb1f..3cb0beb 100644
--- a/components/item/style.css
+++ b/components/item/style.css
@@ -9,7 +9,7 @@ tbody tr.tableRow{
 
 tbody tr.tableRow td{
   margin: 1px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid #e9e9e9;
   white-space: nowrap;
   padding: 0;
   width: 10%;
@@ -17,9 +17,9 @@ tbody tr.tableRow td{
 }
 
 .innerWrap{
-  background: #f0f0f0;
+  background: #f8f8f8;
   padding: 0;
-  height: 35px;
+  height: 50px;
   color: #596496;
   display: block;
   text-decoration: none;
@@ -32,6 +32,10 @@ tbody tr.tableRow td{
   font-size: 13px;
 }
 
+tbody tr.tableRow:nth-child(odd) td .innerWrap{
+  background: #f2f2f2;
+}
+
 .innerWrap input{
   background: none;
   width: 100%;
@@ -103,4 +107,45 @@ input.deadline::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
 
 /* ::-webkit-datetime-edit-month-field { color: blue; }
 ::-webkit-datetime-edit-day-field { color: green; }
-::-webkit-datetime-edit-year-field { color: purple; } */
\ No newline at end of file
+::-webkit-datetime-edit-year-field { color: purple; } */
+
+.subRow{
+  height: 35px;
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.subRow:last-of-type{
+  height: 15px;
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.subRow:last-of-type p{
+  padding: 0 3px;
+  padding-bottom: 3px;
+  margin: 0;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  font-size: 0.9em;
+  color: #333333;
+  box-sizing: border-box;
+}
+
+.inPast{
+  color: red;
+}
+
+.inPastDone{
+  color: green;
+}
\ No newline at end of file
diff --git a/components/newGroup/style.css b/components/newGroup/style.css
index 1b83f37..aa5e480 100644
--- a/components/newGroup/style.css
+++ b/components/newGroup/style.css
@@ -16,7 +16,7 @@
   box-shadow: none;
   outline: none;
   border: none;
-  border-left: 7.5px solid #eee;
+  border-left: 3.5px solid #eee;
   border-top: 1px solid #eee;
   border-right: 1px solid #eee;
   border-bottom: 1px solid #eee;
diff --git a/components/statusComp/index.js b/components/statusComp/index.js
new file mode 100644
index 0000000..f3c7931
--- /dev/null
+++ b/components/statusComp/index.js
@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+import { Link } from 'preact-router/match';
+import userMenu from '../user';
+import style from './style';
+
+import logo from '../../assets/img/logo.svg';
+import UserMenu from '../user/index';
+
+export default class StatusComp extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>hallo</h1>
+      </div>
+    );
+  }
+}
diff --git a/components/statusComp/style.css b/components/statusComp/style.css
new file mode 100644
index 0000000..cdd94a3
--- /dev/null
+++ b/components/statusComp/style.css
@@ -0,0 +1,79 @@
+/* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=F5F5F5&secondary.color=D81B60 */
+.header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 50px;
+  padding: 0;
+  background: #9c27b0;
+  color: white;
+  z-index: 50;
+  display: flex;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+}
+
+.headWrap{
+  height: 100%;
+  display: inline-block;
+  position: relative;
+  flex: 1 1 75%;
+}
+
+.headWrap nav {
+  float: right;
+  font-size: 100%;
+}
+
+.headWrap nav a {
+  display: inline-block;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 15px;
+  min-width: 50px;
+  text-align: center;
+  background: rgba(255,255,255,0);
+  text-decoration: none;
+  color: #fff;
+  vertical-align: top;
+}
+
+/* .headWrap nav a div{
+  width: 100%;
+} */
+
+.headWrap nav a.boooooooi {
+  padding: 0;
+}
+
+.headWrap nav a.boooooooi div {
+  width: 50px;
+}
+
+.headWrap nav a div div {
+  top: 50px !important;
+}
+
+.headWrap nav a div div ul li p{
+  padding-left: 15px;
+}
+
+.headWrap nav a div div ul li{
+  transition: all .3s ease;
+  background: #fff;
+}
+
+.headWrap nav a div div ul li:hover{
+  background-color: #f3f3f3;
+}
+
+.headWrap nav a:hover,
+.headWrap nav a:active {
+  background: #9a67ea;
+  color: #fff
+}
+
+.header nav a.active {
+  background: #320b86;
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/routes/board/index.js b/routes/board/index.js
index 456e4f7..bece4f2 100644
--- a/routes/board/index.js
+++ b/routes/board/index.js
@@ -3,6 +3,7 @@ import style from './style';
 
 import BoardGroup from '../../components/groups';
 import NewGroup from '../../components/newGroup';
+import StatusComp from '../../components/statusComp';
 import base from '../../base';
 
 export default class Board extends Component {
@@ -53,7 +54,7 @@ export default class Board extends Component {
   render({ teamname }, { boards, members, user }) {
     return (
       <div class={style.board}>
-        <h2>{teamname}</h2>
+        <StatusComp />
         <div class={style.boardGroupWrapper}>
           {
             Object
diff --git a/routes/board/style.css b/routes/board/style.css
index d5429b5..ac39165 100644
--- a/routes/board/style.css
+++ b/routes/board/style.css
@@ -12,4 +12,5 @@
   width: 100%;
   display: block;
   height: auto;
+  margin-bottom: 15px;
 }
\ No newline at end of file