diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
index 47bf4e877bb2e5bc63f3d6b4fc2af436ffa177eb..3cac4e35c8d1587969675f710e245688974ffff3 100644
--- a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
@@ -51,7 +51,7 @@ export default class ApplicationDisplay extends Component {
         const { metaResponses, responses } = this.props.submissionData;
 
         return (
-            <div className="application-display">
+            <div>
                 <h3>Proposal Information</h3>
 
                 <div className="grid grid--proposal-info">
diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
index e7d2cac37ac3bb0110235a697dcd4e772586b381..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss
@@ -1,3 +0,0 @@
-.application-display {
-    padding: 20px;
-}
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
index d5dbbfc41abe1803c00253dda3a0cee5954958b5..7e4980cd2e94af83068bad37c9bed314949bf5a0 100644
--- a/opentech/static_src/src/app/src/components/DisplayPanel/index.js
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ApplicationDisplay from '@components/ApplicationDisplay'
 import Tabber from '@components/Tabber'
+import {Tab} from '@components/Tabber'
 import './style.scss';
 
 const DisplayPanel = () => {
@@ -31,10 +32,17 @@ const DisplayPanel = () => {
     }
 
     return (
-        <div className="display-panel">
-            <ApplicationDisplay submissionData={data} />
-            <Tabber />
-        </div>
+        <Tabber className="display-panel">
+            <Tab name="Application">
+                <ApplicationDisplay submissionData={data} />
+            </Tab>
+            <Tab name="Notes">
+                <p>Notes</p>
+            </Tab>
+            <Tab name="Status">
+                <p>Status</p>
+            </Tab>
+        </Tabber>
     )
 };
 
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/style.scss b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
index 00e22068d32b078b04289db1b407af6e54dd20ce..8b08643bcbde9128523a1b25780c303220892a72 100644
--- a/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/style.scss
@@ -1,8 +1,5 @@
 .display-panel {
-    // temporary to visualise middle column
-    > div:first-child {
-        background-color: $color--white;
-    }
+    background-color: $color--white;
 
     @include media-query(tablet-landscape) {
         display: grid;
@@ -11,9 +8,43 @@
 
     @include media-query(desktop) {
         grid-template-columns: 1fr 390px;
+        grid-template-rows: 75px 1fr;
+    }
+
     @include target-ie11 {
         display: flex;
         flex-wrap: wrap;
     }
+
+    &__body,
+    &__header {
+        @include submission-list-item;
+        padding: 20px;
+    }
+
+    &__header {
+        &--spacer {
+            display: none;
+
+            @include media-query(tablet-landscape) {
+                display: block;
+            }
+        }
+    }
+
+    &__links {
+        display: flex;
+        align-items: center;
+        padding: 0;
+    }
+
+    &__link {
+        padding: 20px;
+
+        @include media-query(tablet-landscape) {
+            &:first-child {
+                display: none;
+            }
+        }
     }
 }
diff --git a/opentech/static_src/src/app/src/components/Tabber/index.js b/opentech/static_src/src/app/src/components/Tabber/index.js
index 1fb0d353784635de2c102c026d4ca09043732add..7ba90c2e2d351061dff5079266a47fca401ef73f 100644
--- a/opentech/static_src/src/app/src/components/Tabber/index.js
+++ b/opentech/static_src/src/app/src/components/Tabber/index.js
@@ -1,5 +1,45 @@
-import React from 'react';
+import React, {Component} from 'react';
 
-const Tabber = () => <div>Tabber</div>
+export const Tab = ({name, children}) => <div>{children}</div>
+
+class Tabber extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+            activeTab: 0
+        }
+    }
+
+    handleClick = (e) => {
+        e.preventDefault();
+        this.setState({
+            activeTab: event.target.getAttribute('data-tab')
+        })
+    }
+
+    render() {
+
+        const { children, className } = this.props;
+        const [ mainDisplay, ...other ] = children;
+
+        return (
+            <div className={className}>
+                <div className="display-panel__header display-panel__header--spacer"></div>
+                <div className="display-panel__header display-panel__links">
+                    <a data-tab="0" onClick={this.handleClick} className="display-panel__link">{mainDisplay.props.name}</a>
+                    {other.map((child, i) => <a data-tab={i + 1} onClick={this.handleClick} className="display-panel__link" key={child.props.name}>{child.props.name}</a>)}
+                </div>
+                <div className="display-panel__body">
+                    {mainDisplay}
+                </div>
+                <div className="display-panel__body">
+                    {other[0]}
+                </div>
+            </div>
+        )
+    }
+
+}
 
 export default Tabber;