diff --git a/package.json b/package.json
index 35e31b8..9e9a663 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react-router-redux": "next",
     "redux": "^3.7.2",
     "redux-saga": "^0.16.0",
+    "semantic-ui-react": "^0.79.1",
     "simple-peer": "^8.1.1",
     "socket.io": "^2.0.4",
     "socket.io-client": "^2.0.4",
diff --git a/public/index.html b/public/index.html
index f5eb9b4..598cf79 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/client/redux/ducks/peer.js b/src/client/redux/ducks/peer.js
index 24497aa..b120229 100644
--- a/src/client/redux/ducks/peer.js
+++ b/src/client/redux/ducks/peer.js
@@ -31,7 +31,6 @@ const peerReducer = (state = initialState, action) => {
         ...newState
       }
     case SOCKET_STREAM:
-      console.log('socketstreamreducer', action, state)
       return {
         ...state,
         [action.peerId]: {
diff --git a/src/client/redux/sagas/peer.js b/src/client/redux/sagas/peer.js
index 6a8ef9d..6b7f42d 100644
--- a/src/client/redux/sagas/peer.js
+++ b/src/client/redux/sagas/peer.js
@@ -15,7 +15,6 @@ const peerEventSignal = ({
   signal,
   socket
 }) => {
-  console.info('Peer event signal', signal)
   socket.emit('signal', { signal, peerId })
 }
 
@@ -28,7 +27,6 @@ const peerEventData = (data) => {
 }
 
 const peerEventStream = ({ peerId, socket, stream }) => {
-  console.info('Peer event stream', stream)
   // socket.emit('stream', { stream, peerId })
   return store.dispatch({
     type: 'SOCKET_STREAM',
@@ -49,7 +47,6 @@ const createPeer = ({
 }) => {
   return new Promise((resolve, reject) => {
     const isInitiator = socket.id === initiator
-    console.log('new peer - initiator', peerId, isInitiator)
     const peer = new Peer({
       initiator: isInitiator,
       config: {
@@ -79,10 +76,6 @@ const createPeer = ({
   })
 }
 
-// const destroyPeer = () => {
-
-// }
-
 // state
 function* addPeer ({ channel, peerId }) {
   yield put({
@@ -124,7 +117,6 @@ function* setupPeers (action) {
 
   // Destroy any old peers
   const peersToDestroy = keys(existingPeers).filter(key => !peers.includes(key))
-  console.log('Removing peers', peersToDestroy)
   for (const key of peersToDestroy) {
     const peerToDestroy = existingPeers[key]
     if (peerToDestroy && peerToDestroy.channel) {
diff --git a/src/client/ui-components/soundcheck/index.js b/src/client/ui-components/soundcheck/index.js
new file mode 100644
index 0000000..29f3347
--- /dev/null
+++ b/src/client/ui-components/soundcheck/index.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class Soundcheck extends Component {
+  render () {
+    return <span>Hello Soundcheck</span>
+  }
+}
+
+Soundcheck.propTypes = {
+
+}
+
+export default Soundcheck
diff --git a/src/client/ui-components/soundcheck/soundcheck-wrapper.js b/src/client/ui-components/soundcheck/soundcheck-wrapper.js
new file mode 100644
index 0000000..430ebdd
--- /dev/null
+++ b/src/client/ui-components/soundcheck/soundcheck-wrapper.js
@@ -0,0 +1,30 @@
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Modal } from 'semantic-ui-react'
+import Soundcheck from './index'
+
+class SoundcheckWrapper extends Component {
+  render () {
+    return (
+      <Modal
+        open={this.props.show}
+        closeOnDimmerClick
+        closeOnDocumentClick
+        onClose={this.props.onClose}
+      >
+        <Modal.Header>Soundcheck</Modal.Header>
+        <Modal.Content>
+          <Soundcheck />
+        </Modal.Content>
+      </Modal>
+    )
+  }
+}
+
+SoundcheckWrapper.propTypes = {
+  onClose: PropTypes.func,
+  show: PropTypes.bool
+}
+
+export default SoundcheckWrapper
diff --git a/src/client/ui-components/toolbar/index.js b/src/client/ui-components/toolbar/index.js
new file mode 100644
index 0000000..a23d7dd
--- /dev/null
+++ b/src/client/ui-components/toolbar/index.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Icon, Menu } from 'semantic-ui-react'
+import PropTypes from 'prop-types'
+import { map } from 'lodash'
+
+class Toolbar extends Component {
+  renderMenuItem = (item) => (
+    <Menu.Item
+      key={item.key}
+      name={item.name || item.key}
+      active={this.props.activeMenuItem === item.key}
+      onClick={item.onClick}
+    >
+      <Icon name={item.icon} />
+      {item.label || item.key}
+    </Menu.Item>
+  )
+  render() {
+    return (
+      <Menu compact icon='labeled'>
+        {map(this.props.items, item => this.renderMenuItem(item))}
+      </Menu>
+    )
+  }
+}
+
+Toolbar.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object),
+  activeMenuItem: PropTypes.string
+}
+
+Toolbar.defaultProps = {
+  activeMenuItem: null
+}
+
+export default Toolbar
diff --git a/src/client/ui-components/toolbar/toolbar-wrapper.js b/src/client/ui-components/toolbar/toolbar-wrapper.js
new file mode 100644
index 0000000..59cd4be
--- /dev/null
+++ b/src/client/ui-components/toolbar/toolbar-wrapper.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Toolbar from './index'
+import SoundcheckWrapper from '../soundcheck/soundcheck-wrapper'
+
+class ToolbarWrapper extends Component {
+  constructor (props) {
+    super(props)
+    this.onExitRoom = this.onExitRoom.bind(this)
+    this.onSettingsClick = this.onSettingsClick.bind(this)
+    this.state = {
+      showSettingsModal: false
+    }
+  }
+
+  toggleSettingsModalState = () => this.setState({
+    showSettingsModal: !this.state.showSettingsModal
+  })
+
+  onSettingsClick () {
+    this.toggleSettingsModalState()
+  }
+
+  onExitRoom () {
+    this.props.onLeaveRoom()
+    // @todo: Move to router history
+    window.location.replace('/')
+  }
+
+  render () {
+    const menuItems = [{
+      key: 'setting',
+      label: 'Settings',
+      icon: 'setting',
+      onClick: this.onSettingsClick
+    }, {
+      key: 'exit',
+      label: 'Exit Room',
+      icon: 'external',
+      onClick: this.onExitRoom
+    }]
+    return (
+      <div>
+        <Toolbar
+          items={menuItems}
+        />
+        <SoundcheckWrapper 
+          show={this.state.showSettingsModal}
+          onClose={this.toggleSettingsModalState}
+        />
+      </div>
+    )
+  }
+}
+
+ToolbarWrapper.propTypes = {
+  onLeaveRoom: PropTypes.func,
+  history: PropTypes.any
+}
+
+export default ToolbarWrapper
diff --git a/src/client/ui-components/video-container/index.js b/src/client/ui-components/video-container/index.js
index c7b310b..9af9704 100644
--- a/src/client/ui-components/video-container/index.js
+++ b/src/client/ui-components/video-container/index.js
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import { map } from 'lodash'
 import createObjectUrl from '../../utils/create-object-url'
 import cuid from 'cuid'
+import { Grid } from 'semantic-ui-react'
 
 class VideoContainer extends Component {
   constructor (props) {
@@ -20,21 +21,29 @@ class VideoContainer extends Component {
   render () {
     return (
       <div>
-        <VideoPlayer
-          metadata={this.props.user.socket ? this.props.user.socket.id : null}
-          src={this.props.user.streamUrl}
-          muted
-          onLoadedMetadata={this.playStream}
-        />
-        <br />
-        {map(this.props.peer, (peer, peerId) => (
-          <VideoPlayer
-            metadata={peer.socketId}
-            src={peer.streamUrl || (peer.stream ? createObjectUrl(peer.stream) : '')}
-            key={cuid()}
-            onLoadedMetadata={this.playStream}
-          />
-        ))}
+        <Grid columns={3}>
+          <Grid.Column>
+            <VideoPlayer
+              metadata={this.props.user.socket ? this.props.user.socket.id : null}
+              src={this.props.user.streamUrl}
+              muted
+              onLoadedMetadata={this.playStream}
+            />
+          </Grid.Column>
+          <Grid.Column>
+            <span />
+          </Grid.Column>
+          <Grid.Column>
+            {map(this.props.peer, (peer, peerId) => (
+              <VideoPlayer
+                metadata={peer.socketId}
+                src={peer.streamUrl || (peer.stream ? createObjectUrl(peer.stream) : '')}
+                key={cuid()}
+                onLoadedMetadata={this.playStream}
+              />
+            ))}
+          </Grid.Column>
+        </Grid>
       </div>
     )
   }
diff --git a/src/client/ui-components/video/index.js b/src/client/ui-components/video/index.js
index 31c1540..b30ad5f 100644
--- a/src/client/ui-components/video/index.js
+++ b/src/client/ui-components/video/index.js
@@ -46,7 +46,7 @@ VideoPlayer.propTypes = {
 
 VideoPlayer.defaultProps = {
   height: 480,
-  width: 640,
+  width: 500,
   playsInline: true,
   autoPlay: true,
   muted: false,
diff --git a/src/client/views/room/index.js b/src/client/views/room/index.js
index 245ccb1..3e20d58 100644
--- a/src/client/views/room/index.js
+++ b/src/client/views/room/index.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
-import VideoContainer from '../../ui-components/video-container'
 import PropTypes from 'prop-types'
+import VideoContainer from '../../ui-components/video-container'
+import ToolbarWrapper from '../../ui-components/toolbar/toolbar-wrapper'
+import { Grid } from 'semantic-ui-react'
 import { connect } from 'react-redux'
 import { initialize, shutdown } from '../../redux/ducks/room'
 
@@ -15,16 +17,27 @@ class Room extends Component {
   render () {
     return (
       <div>
-        {`Welcome to Room ${this.props.roomId}`}
+        <Grid.Row columns={2}>
+          <Grid.Column style={{ float: 'left' }}>
+            {`Welcome to Room ${this.props.roomId}`}
+          </Grid.Column>
+          <Grid.Column style={{ float: 'right' }}>
+            <ToolbarWrapper
+              onLeaveRoom={this.props.shutdown}
+            />
+          </Grid.Column>
+        </Grid.Row>
         <br />
-        {this.props.error
-          ? 'Encountered an error getting streams'
-          : (
-            this.props.user && this.props.user.streamUrl
-            ? <VideoContainer />
-            : 'Initializing streams...'
-          )
-        }
+        <Grid.Row>
+          {this.props.error
+            ? 'Encountered an error getting streams'
+            : (
+              this.props.user && this.props.user.streamUrl
+              ? <VideoContainer />
+              : 'Initializing streams...'
+            )
+          }
+        </Grid.Row>
       </div>
     )
   }
diff --git a/yarn.lock b/yarn.lock
index 03c31cc..47771cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -991,6 +991,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
+babel-runtime@^6.25.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
@@ -1371,6 +1378,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.0.x:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.10.tgz#6be448d6ba8c767654ebe11f158b97a887cb713f"
@@ -4144,6 +4155,10 @@ lodash.uniq@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.4:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
 longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -5472,6 +5487,10 @@ regenerator-runtime@^0.10.0:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
 regenerator-transform@0.9.8:
   version "0.9.8"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
@@ -5677,6 +5696,16 @@ seek-bzip@^1.0.5:
   dependencies:
     commander "~2.8.1"
 
+semantic-ui-react@^0.79.1:
+  version "0.79.1"
+  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.79.1.tgz#80bd0ccfb3b3c1184a1b1b3f6067ab1225aed5f0"
+  dependencies:
+    babel-runtime "^6.25.0"
+    classnames "^2.2.5"
+    fbjs "^0.8.16"
+    lodash "^4.17.4"
+    prop-types "^15.5.10"
+
 "semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"