diff --git a/src/gui/app.jsx b/src/gui/app.jsx
index 3123822..41fae2a 100644
--- a/src/gui/app.jsx
+++ b/src/gui/app.jsx
@@ -9,8 +9,8 @@ const App = () => {
   return (
     <div className={styles.layout} >
       <Navbar />
-      <Workbench />
-      <Documentation />
+      <Workbench className={styles.main} />
+      <Documentation className={styles.main} />
     </div>
   )
 }
diff --git a/src/gui/app.styles.js b/src/gui/app.styles.js
index 924dbc1..f0bc184 100644
--- a/src/gui/app.styles.js
+++ b/src/gui/app.styles.js
@@ -6,4 +6,9 @@ const layout = css({
   flexDirection: 'column',
 })
 
-export default { layout }
+const main = css({
+  height: '100%',
+  overflow: 'hidden',
+})
+
+export default { layout, main }
diff --git a/src/gui/components/navbar/navbar.jsx b/src/gui/components/navbar/navbar.jsx
index 519c4f9..7f22029 100644
--- a/src/gui/components/navbar/navbar.jsx
+++ b/src/gui/components/navbar/navbar.jsx
@@ -26,7 +26,7 @@ Navbar.propTypes = {
 
 Navbar.defaultProps = {
   style: {},
-  className: '',
+  className: undefined,
 }
 
 export default Navbar
diff --git a/src/gui/components/tabs/index.js b/src/gui/components/tabs/index.js
new file mode 100644
index 0000000..9a9d313
--- /dev/null
+++ b/src/gui/components/tabs/index.js
@@ -0,0 +1,4 @@
+import Tabs from './tabs'
+import Tab from './tab'
+
+export { Tabs, Tab }
diff --git a/src/gui/components/tabs/tab.jsx b/src/gui/components/tabs/tab.jsx
new file mode 100644
index 0000000..488204c
--- /dev/null
+++ b/src/gui/components/tabs/tab.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { merge } from 'glamor'
+
+import styles from './tab.styles'
+
+const Tab = ({ tabKey, title, className, children }) => {
+  return (
+    <div className={merge(styles.layout, className)} aria-hidden={tabKey} aria-label={title}>
+      {children}
+    </div>
+  )
+}
+
+Tab.propTypes = {
+  tabKey: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+}
+
+Tab.defaultProps = {
+  children: '',
+  className: undefined,
+}
+
+export default Tab
diff --git a/src/gui/components/tabs/tab.styles.js b/src/gui/components/tabs/tab.styles.js
new file mode 100644
index 0000000..0ad1b1b
--- /dev/null
+++ b/src/gui/components/tabs/tab.styles.js
@@ -0,0 +1,10 @@
+import { css } from 'glamor'
+
+const layout = css({
+  width: '100%',
+  height: '100%',
+  overflow: 'auto',
+  padding: '1em',
+})
+
+export default { layout }
diff --git a/src/gui/components/tabs/tabs.jsx b/src/gui/components/tabs/tabs.jsx
new file mode 100644
index 0000000..746ccd3
--- /dev/null
+++ b/src/gui/components/tabs/tabs.jsx
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { merge } from 'glamor'
+
+import TabsHeader from './tabsHeader'
+import TabsAction from './tabsActions'
+import styles from './tabs.styles'
+
+class Tabs extends Component {
+  state = {
+    selected: this.props.defaultKey,
+  }
+
+  handleSelectedTab = (key) => {
+    this.setState(() => ({ selected: key }))
+  }
+
+  render() {
+    const { children, actions, className, actionsClassName, headersClassName } = this.props
+
+    const childArray = React.Children.toArray(children)
+    const headers = childArray.map(({ props }) => ({ tabKey: props.tabKey, title: props.title }))
+    const selected = this.state.selected || headers[0].tabKey
+    const tab = childArray.find(c => c.props.tabKey === selected)
+
+    return (
+      <div className={merge(styles.layout, className)}>
+        <TabsHeader
+          headers={headers}
+          selectedTab={selected}
+          onSelectTab={this.handleSelectedTab}
+          className={headersClassName}
+        />
+        <TabsAction actions={actions} className={actionsClassName} />
+        {tab}
+      </div>
+    )
+  }
+}
+
+Tabs.propTypes = {
+  defaultKey: PropTypes.number,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]).isRequired,
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  actionsClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  headersClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}
+
+Tabs.defaultProps = {
+  defaultKey: undefined,
+  actions: undefined,
+  className: undefined,
+  actionsClassName: undefined,
+  headersClassName: undefined,
+}
+
+export default Tabs
diff --git a/src/gui/components/tabs/tabs.styles.js b/src/gui/components/tabs/tabs.styles.js
new file mode 100644
index 0000000..bc9a6fa
--- /dev/null
+++ b/src/gui/components/tabs/tabs.styles.js
@@ -0,0 +1,8 @@
+import { css } from 'glamor'
+
+const layout = css({
+  position: 'relative',
+  border: '.1em solid #ddd',
+})
+
+export default { layout }
diff --git a/src/gui/components/tabs/tabsActions.jsx b/src/gui/components/tabs/tabsActions.jsx
new file mode 100644
index 0000000..1df1fa1
--- /dev/null
+++ b/src/gui/components/tabs/tabsActions.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { merge } from 'glamor'
+
+import styles from './tabsActions.styles'
+
+const TabsActions = ({ actions, className }) => {
+  if (!actions) {
+    return null
+  }
+  return (
+    <div className={merge(styles.actions, className)}>
+      {actions}
+    </div>
+  )
+}
+
+TabsActions.propTypes = {
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}
+
+TabsActions.defaultProps = {
+  actions: undefined,
+  className: undefined,
+}
+
+export default TabsActions
diff --git a/src/gui/components/tabs/tabsActions.styles.js b/src/gui/components/tabs/tabsActions.styles.js
new file mode 100644
index 0000000..9c70c95
--- /dev/null
+++ b/src/gui/components/tabs/tabsActions.styles.js
@@ -0,0 +1,10 @@
+import { css } from 'glamor'
+
+const layout = css({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  padding: '.9em 1.1em',
+})
+
+export default { layout }
diff --git a/src/gui/components/tabs/tabsHeader.jsx b/src/gui/components/tabs/tabsHeader.jsx
new file mode 100644
index 0000000..285c629
--- /dev/null
+++ b/src/gui/components/tabs/tabsHeader.jsx
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { merge } from 'glamor'
+
+import styles from './tabsHeader.styles'
+
+class TabsHeader extends Component {
+
+  handleSelectedTab = tabKey => () => {
+    this.props.onSelectTab(tabKey)
+  }
+
+  render() {
+    const { headers, selectedTab, className } = this.props
+    return (
+      <ul className={merge(styles.layout, className)}>
+        {headers.map(({ tabKey, title }) =>
+          <li
+            key={tabKey}
+            className={merge(styles.item, selectedTab === tabKey && styles.selected)}
+            aria-expanded={selectedTab === tabKey}
+            onClick={this.handleSelectedTab(tabKey)}
+          >
+            {title}
+          </li>
+        )}
+      </ul>
+    )
+  }
+}
+
+TabsHeader.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedTab: PropTypes.string.isRequired,
+  onSelectTab: PropTypes.func.isRequired,
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}
+
+TabsHeader.defaultProps = {
+  className: undefined,
+}
+
+export default TabsHeader
diff --git a/src/gui/components/tabs/tabsHeader.styles.js b/src/gui/components/tabs/tabsHeader.styles.js
new file mode 100644
index 0000000..6160b13
--- /dev/null
+++ b/src/gui/components/tabs/tabsHeader.styles.js
@@ -0,0 +1,26 @@
+import { css } from 'glamor'
+
+const layout = css({
+  display: 'flex',
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+  borderBottom: '1px solid #ddd',
+})
+
+const item = css({
+  cursor: 'pointer',
+  marginRight: 0,
+  padding: '.9em 1.1em',
+  lineHeight: '1.1em',
+  color: '#607580',
+  fontWeight: 600,
+})
+
+const selected = css({
+  cursor: 'default',
+  color: '#243641',
+  backgroundColor: '#ddd',
+})
+
+export default { layout, item, selected }
diff --git a/src/gui/screens/workbench/props/__snapshots__/props.spec.js.snap b/src/gui/screens/workbench/props/__snapshots__/props.spec.js.snap
index 69df7ad..49f50ad 100644
--- a/src/gui/screens/workbench/props/__snapshots__/props.spec.js.snap
+++ b/src/gui/screens/workbench/props/__snapshots__/props.spec.js.snap
@@ -4,72 +4,39 @@ exports[`component/props props.container.js should map redux model into properti
 <div
   className={
     Object {
-      "data-css-ikffa7": "",
+      "data-css-7xct0c": "",
     }
   }
   style={Object {}}
->
-  <div
-    className={
-      Object {
-        "data-css-162aour": "",
-      }
-    }
-  >
-    props
-  </div>
-  <div />
-</div>
+/>
 `;
 
 exports[`component/props props.jsx should render by default 1`] = `
 <div
   className={
     Object {
-      "data-css-ikffa7": "",
+      "data-css-7xct0c": "",
     }
   }
   style={Object {}}
->
-  <div
-    className={
-      Object {
-        "data-css-162aour": "",
-      }
-    }
-  >
-    props
-  </div>
-  <div />
-</div>
+/>
 `;
 
 exports[`component/props props.jsx should render inputs following given properties 1`] = `
 <div
   className={
     Object {
-      "data-css-ikffa7": "",
+      "data-css-7xct0c": "",
     }
   }
   style={Object {}}
 >
-  <div
-    className={
-      Object {
-        "data-css-162aour": "",
-      }
-    }
-  >
-    props
-  </div>
-  <div>
-    <input
-      name="prop1"
-    />
-    <input
-      name="prop2"
-    />
-  </div>
+  <input
+    name="prop1"
+  />
+  <input
+    name="prop2"
+  />
 </div>
 `;
 
@@ -77,29 +44,18 @@ exports[`component/props props.jsx should take custom className 1`] = `
 <div
   className={
     Object {
-      "data-css-oj2paa": "",
+      "data-css-132or61": "",
     }
   }
   style={Object {}}
->
-  <div
-    className={
-      Object {
-        "data-css-162aour": "",
-      }
-    }
-  >
-    props
-  </div>
-  <div />
-</div>
+/>
 `;
 
 exports[`component/props props.jsx should take custom style 1`] = `
 <div
   className={
     Object {
-      "data-css-ikffa7": "",
+      "data-css-7xct0c": "",
     }
   }
   style={
@@ -107,16 +63,5 @@ exports[`component/props props.jsx should take custom style 1`] = `
       "backgroundColor": "red",
     }
   }
->
-  <div
-    className={
-      Object {
-        "data-css-162aour": "",
-      }
-    }
-  >
-    props
-  </div>
-  <div />
-</div>
+/>
 `;
diff --git a/src/gui/screens/workbench/props/input/input.jsx b/src/gui/screens/workbench/props/input/input.jsx
index e138a13..496bbf1 100644
--- a/src/gui/screens/workbench/props/input/input.jsx
+++ b/src/gui/screens/workbench/props/input/input.jsx
@@ -27,7 +27,7 @@ Input.propTypes = {
 
 Input.defaultProps = {
   style: {},
-  className: '',
+  className: undefined,
   value: undefined,
 }
 
diff --git a/src/gui/screens/workbench/props/props.jsx b/src/gui/screens/workbench/props/props.jsx
index 121bfe5..851e59a 100644
--- a/src/gui/screens/workbench/props/props.jsx
+++ b/src/gui/screens/workbench/props/props.jsx
@@ -8,10 +8,7 @@ import styles from './props.styles'
 const Props = ({ style, className, properties }) => {
   return (
     <div style={style} className={merge(styles.layout, className)}>
-      <div className={styles.title}>props</div>
-      <div>
-        { properties.map(prop => <Input key={prop} name={prop} />) }
-      </div>
+      { properties.map(prop => <Input key={prop} name={prop} />) }
     </div>
   )
 }
@@ -24,7 +21,7 @@ Props.propTypes = {
 
 Props.defaultProps = {
   style: {},
-  className: '',
+  className: undefined,
   properties: [],
 }
 
diff --git a/src/gui/screens/workbench/props/props.styles.js b/src/gui/screens/workbench/props/props.styles.js
index 9fdb089..5771023 100644
--- a/src/gui/screens/workbench/props/props.styles.js
+++ b/src/gui/screens/workbench/props/props.styles.js
@@ -3,12 +3,7 @@ import { css } from 'glamor'
 const layout = css({
   display: 'block',
   boxSizing: 'border-box',
+  overflow: 'auto',
 })
 
-const title = css({
-  fontWeight: 'bold',
-  fontSize: '1.1em',
-  paddingBottom: '.5em',
-})
-
-export default { layout, title }
+export default { layout }
diff --git a/src/gui/screens/workbench/workbench.jsx b/src/gui/screens/workbench/workbench.jsx
index 9a48e5a..ce27eeb 100644
--- a/src/gui/screens/workbench/workbench.jsx
+++ b/src/gui/screens/workbench/workbench.jsx
@@ -2,6 +2,8 @@ import React from 'react'
 
 import Props from './props'
 import styles from './workbench.styles'
+
+import { Tabs, Tab } from '../../components/tabs'
 import WrappedComponent from '../../component.container'
 
 const Workbench = () => {
@@ -10,7 +12,10 @@ const Workbench = () => {
       <div className={styles.content}>
         <WrappedComponent />
       </div>
-      <Props className={styles.sidebar} />
+      <Tabs className={styles.sidebar}>
+        <Tab tabKey="props" title="props"><Props /></Tab>
+        <Tab tabKey="state" title="state">Not implemented yet.</Tab>
+      </Tabs>
     </div>
   )
 }
diff --git a/src/gui/screens/workbench/workbench.styles.js b/src/gui/screens/workbench/workbench.styles.js
index 2729ef4..9388218 100644
--- a/src/gui/screens/workbench/workbench.styles.js
+++ b/src/gui/screens/workbench/workbench.styles.js
@@ -2,6 +2,7 @@ import { css } from 'glamor'
 
 const layout = css({
   display: 'flex',
+  height: '100%',
   justifyContent: 'space-between',
 })
 
@@ -12,7 +13,7 @@ const content = css({
 
 const sidebar = css({
   overflow: 'auto',
-  padding: '1em',
+  width: '25em',
 })
 
 export default { layout, content, sidebar }
diff --git a/src/gui/styles/global.js b/src/gui/styles/global.js
index 1533089..938b6dc 100644
--- a/src/gui/styles/global.js
+++ b/src/gui/styles/global.js
@@ -9,3 +9,7 @@ css.global('html, body', {
   fontFamily: 'Arial, Helvetica, sans-serif',
   fontSize: '13px',
 })
+
+css.global('*', {
+  boxSizing: 'border-box',
+})