diff --git a/src/views/App.css b/src/views/App.css
index 8222d18..da9761b 100644
--- a/src/views/App.css
+++ b/src/views/App.css
@@ -13,3 +13,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.Workspace {
+  display: flex;
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/views/App.js b/src/views/App.js
index e0a215f..3181c32 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -1,21 +1,17 @@
 import React, { Component } from 'react'
 import './App.css'
 import 'semantic-ui-css/semantic.min.css'
-import CreateTableForm from './CreateTable/CreateTableForm'
-import TableList from './TableList/TableList'
-import CreateNodule from './CreateNodule/CreateNodule'
-import NoduleList from './NoduleList/NoduleList'
 import DataTable from './DataTable/DataTable'
+import ListViewer from './ListViewer/ListViewer'
 
 class App extends Component {
   render = () => {
     return (
       <div className='App'>
-        <CreateTableForm />
-        <CreateNodule />
-        <TableList />
-        <NoduleList />
-        <DataTable />
+        <div className='Workspace'>
+          <ListViewer />
+          <DataTable />
+        </div>
       </div>
     )
   }
diff --git a/src/views/CreateNodule/CreateNodule.css b/src/views/CreateNodule/CreateNodule.css
index 2561bd5..6289054 100644
--- a/src/views/CreateNodule/CreateNodule.css
+++ b/src/views/CreateNodule/CreateNodule.css
@@ -1,5 +1,6 @@
 .CreateNodule {
   width: 380px;
+  height: 100%;
   padding: 40px;
   border-radius: 6px;
   border: solid rgb(240, 240, 240) 1px;
diff --git a/src/views/CreateTable/CreateTableForm.css b/src/views/CreateTable/CreateTableForm.css
index be54434..8747b5e 100644
--- a/src/views/CreateTable/CreateTableForm.css
+++ b/src/views/CreateTable/CreateTableForm.css
@@ -1,10 +1,19 @@
 .CreateTableForm {
   width: 380px;
+  height: 100%;
   padding: 40px;
   border-radius: 6px;
   border: solid rgb(240, 240, 240) 1px;
 }
 
+.CreateTablePopOver {
+  position: fixed;
+  top: 30%;
+  left: 40%;
+  z-index: 1000;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 50px 20px;
+}
+
 .creatTableFormSubmitButtons {
   margin-top: 6px;
   display: flex;
diff --git a/src/views/CreateTable/CreateTablePopOver.js b/src/views/CreateTable/CreateTablePopOver.js
new file mode 100644
index 0000000..e8b3c4f
--- /dev/null
+++ b/src/views/CreateTable/CreateTablePopOver.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import CreateTableForm from './CreateTableForm'
+import './CreateTableForm.css'
+
+class CreateTablePopOver extends Component {
+  render = () => {
+    return (
+      <div className='CreateTablePopOver'>
+        <CreateTableForm />
+      </div>
+    )
+  }
+}
+
+export default CreateTablePopOver
diff --git a/src/views/DataTable/DataTable.css b/src/views/DataTable/DataTable.css
new file mode 100644
index 0000000..7565e91
--- /dev/null
+++ b/src/views/DataTable/DataTable.css
@@ -0,0 +1,4 @@
+.DataTable {
+  height: calc(100vh - 40px);
+  overflow: scroll;
+}
\ No newline at end of file
diff --git a/src/views/DataTable/DataTable.js b/src/views/DataTable/DataTable.js
index 6fea54b..103953c 100644
--- a/src/views/DataTable/DataTable.js
+++ b/src/views/DataTable/DataTable.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Table } from 'semantic-ui-react'
+import './DataTable.css'
 
 import Tables from '../../Models/Tables'
 import FocusTable from '../../Models/FocusTable'
diff --git a/src/views/ListViewer/ListViewer.css b/src/views/ListViewer/ListViewer.css
new file mode 100644
index 0000000..6d05197
--- /dev/null
+++ b/src/views/ListViewer/ListViewer.css
@@ -0,0 +1,3 @@
+.ListViewer {
+  width: 400px;
+}
\ No newline at end of file
diff --git a/src/views/ListViewer/ListViewer.js b/src/views/ListViewer/ListViewer.js
new file mode 100644
index 0000000..2f0b165
--- /dev/null
+++ b/src/views/ListViewer/ListViewer.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import TableList from '../TableList/TableList'
+import NoduleList from '../NoduleList/NoduleList'
+import './ListViewer.css'
+import { Tab } from 'semantic-ui-react'
+
+class ListViewer extends Component {
+  constructor () {
+    super()
+    this.panes = [
+      { menuItem: 'Tables', render: () => <Tab.Pane><TableList /></Tab.Pane> },
+      { menuItem: 'Nodules', render: () => <Tab.Pane><NoduleList /></Tab.Pane> }
+    ]
+  }
+  render = () => {
+    return (
+      <div className='ListViewer'>
+        <Tab panes={this.panes} />
+      </div>
+    )
+  }
+}
+
+export default ListViewer
diff --git a/src/views/NoduleList/NoduleList.css b/src/views/NoduleList/NoduleList.css
index e69de29..91fefc3 100644
--- a/src/views/NoduleList/NoduleList.css
+++ b/src/views/NoduleList/NoduleList.css
@@ -0,0 +1,3 @@
+.NoduleList {
+  height: calc(100vh - 100px);
+}
\ No newline at end of file
diff --git a/src/views/NoduleList/NoduleList.js b/src/views/NoduleList/NoduleList.js
index 7500a41..301e89b 100644
--- a/src/views/NoduleList/NoduleList.js
+++ b/src/views/NoduleList/NoduleList.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Card } from 'semantic-ui-react'
+import { Card, Icon, Button } from 'semantic-ui-react'
+import CreateNodule from '../CreateNodule/CreateNodule'
 import NoduleListItem from './NoduleListItem'
 import './NoduleList.css'
 
@@ -12,11 +13,16 @@ class NoduleList extends Component {
 
     this.nodules = new Nodule()
     this.controller = new NoduleListController()
-    this.state = { nodules: this.nodules.getCollectionProps() }
+    this.state = {
+      adding: false,
+      nodules: this.nodules.getCollectionProps()
+    }
 
     document.addEventListener('updateNodules', this.updateNoduleList)
   }
 
+  toggleAddingNodule = () => { this.setState({ adding: !this.state.adding }) }
+
   updateNoduleList = () => {
     this.setState({nodules: this.nodules.getCollectionProps()})
   }
@@ -29,8 +35,13 @@ class NoduleList extends Component {
 
   render = () => {
     return (
-      <div className='TableList'>
+      <div className='NoduleList'>
         <Card.Group>
+          <Button animated primary style={{ width: '100%', display: 'block' }} onClick={this.toggleAddingNodule}>
+            <Button.Content visible>Add Nodule</Button.Content>
+            <Button.Content hidden><Icon name='add' /></Button.Content>
+          </Button>
+          {this.state.adding ? <CreateNodule /> : ''}
           { this.renderTableListElements() }
         </Card.Group>
       </div>
diff --git a/src/views/NoduleList/NoduleListItem.js b/src/views/NoduleList/NoduleListItem.js
index 36b9f3a..176e28c 100644
--- a/src/views/NoduleList/NoduleListItem.js
+++ b/src/views/NoduleList/NoduleListItem.js
@@ -13,7 +13,7 @@ class NoduleListItem extends Component {
   render = () => {
     const { nodule } = this.props 
     return (
-      <Card key={nodule.id} id={nodule.id}>
+      <Card key={nodule.id} id={nodule.id} style={{ width: '380px' }}>
         <Card.Content>
           <Card.Header>{ nodule.label }</Card.Header>
           <Card.Meta>{`${nodule.tables.length} tables`}</Card.Meta>
diff --git a/src/views/TableList/TableList.css b/src/views/TableList/TableList.css
index e69de29..6ff8403 100644
--- a/src/views/TableList/TableList.css
+++ b/src/views/TableList/TableList.css
@@ -0,0 +1,7 @@
+.TableList {
+  height: calc(100vh - 100px);
+}
+
+.listItem {
+  width: 400px;
+}
\ No newline at end of file
diff --git a/src/views/TableList/TableList.js b/src/views/TableList/TableList.js
index 4178f44..a14f870 100644
--- a/src/views/TableList/TableList.js
+++ b/src/views/TableList/TableList.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Card } from 'semantic-ui-react'
+import { Card, Button, Icon } from 'semantic-ui-react'
+import CreateTableForm from '../CreateTable/CreateTableForm'
 import TableListItem from './TableListItem'
 import './TableList.css'
 
@@ -12,11 +13,16 @@ class TableList extends Component {
 
     this.tables = new Tables()
     this.controller = new TableListController()
-    this.state = { tables: this.tables.getCollectionProps() }
+    this.state = {
+      adding: false,
+      tables: this.tables.getCollectionProps()
+    }
 
     document.addEventListener('updateTables', this.updateTableList)
   }
 
+  toggleAddingTable = () => { this.setState({ adding: !this.state.adding }) }
+
   updateTableList = () => {
     this.setState({tables: this.tables.getCollectionProps()})
   }
@@ -31,6 +37,11 @@ class TableList extends Component {
     return (
       <div className='TableList'>
         <Card.Group>
+        <Button animated primary style={{ width: '100%', display: 'block' }} onClick={this.toggleAddingTable}>
+          <Button.Content visible>Add Table</Button.Content>
+          <Button.Content hidden><Icon name='add' /></Button.Content>
+        </Button>
+        {this.state.adding ? <CreateTableForm /> : ''}
           { this.renderTableListElements() }
         </Card.Group>
       </div>
diff --git a/src/views/TableList/TableListItem.js b/src/views/TableList/TableListItem.js
index d9a9ec2..876b509 100644
--- a/src/views/TableList/TableListItem.js
+++ b/src/views/TableList/TableListItem.js
@@ -13,7 +13,7 @@ class TableListItem extends Component {
   render = () => {
     const { table } = this.props
     return (
-      <Card key={table.id} id={table.id}>
+      <Card key={table.id} id={table.id} style={{ width: '380px' }}>
         <Card.Content>
           <Card.Header>{ table.label }</Card.Header>
           <Card.Meta>{`${table.rows.length} rows`}</Card.Meta>