diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index dbde2d7b..5429eeb2 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -16,8 +16,15 @@ import * as ProjectActions from '../actions/project';
 import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
+import SplitPane from 'react-split-pane';
 
 class IDEView extends React.Component {
+  constructor(props) {
+    super(props);
+    this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
+    this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
+  }
+
   componentDidMount() {
     if (this.props.params.project_id) {
       const id = this.props.params.project_id;
@@ -30,6 +37,19 @@ class IDEView extends React.Component {
         this.autosaveInterval = setInterval(this.props.saveProject, 30000);
       }
     }
+
+    this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
+    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20;
+  }
+
+  componentWillUpdate(nextProps) {
+    if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
+      this.consoleSize = nextProps.ide.consoleIsExpanded ? 180 : 29;
+    }
+
+    if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
+      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -54,6 +74,22 @@ class IDEView extends React.Component {
     this.autosaveInterval = null;
   }
 
+  _handleConsolePaneOnDragFinished() {
+    this.consoleSize = this.refs.consolePane.state.draggedSize;
+    this.refs.consolePane.setState({
+      resized: false,
+      draggedSize: undefined,
+    });
+  }
+
+  _handleSidebarPaneOnDragFinished() {
+    this.sidebarSize = this.refs.sidebarPane.state.draggedSize;
+    this.refs.sidebarPane.setState({
+      resized: false,
+      draggedSize: undefined
+    });
+  }
+
   render() {
     return (
       <div className="ide">
@@ -91,58 +127,84 @@ class IDEView extends React.Component {
           setLintWarning={this.props.setLintWarning}
         />
         <div className="editor-preview-container">
-          <Sidebar
-            files={this.props.files}
-            setSelectedFile={this.props.setSelectedFile}
-            newFile={this.props.newFile}
-            isExpanded={this.props.ide.sidebarIsExpanded}
-            expandSidebar={this.props.expandSidebar}
-            collapseSidebar={this.props.collapseSidebar}
-            showFileOptions={this.props.showFileOptions}
-            hideFileOptions={this.props.hideFileOptions}
-            deleteFile={this.props.deleteFile}
-            showEditFileName={this.props.showEditFileName}
-            hideEditFileName={this.props.hideEditFileName}
-            updateFileName={this.props.updateFileName}
-          />
-          <div className="editor-console-container">
-            <Editor
-              lintWarning={this.props.preferences.lintWarning}
-              lintMessages={this.props.editorAccessibility.lintMessages}
-              updateLineNumber={this.props.updateLineNumber}
-              updateLintMessage={this.props.updateLintMessage}
-              clearLintMessage={this.props.clearLintMessage}
-              file={this.props.selectedFile}
-              updateFileContent={this.props.updateFileContent}
-              fontSize={this.props.preferences.fontSize}
-              indentationAmount={this.props.preferences.indentationAmount}
-              isTabIndent={this.props.preferences.isTabIndent}
+          <SplitPane
+            split="vertical"
+            defaultSize={this.sidebarSize}
+            ref="sidebarPane"
+            onDragFinished={this._handleSidebarPaneOnDragFinished}
+            allowResize={this.props.ide.sidebarIsExpanded}
+          >
+            <Sidebar
               files={this.props.files}
+              setSelectedFile={this.props.setSelectedFile}
+              newFile={this.props.newFile}
+              isExpanded={this.props.ide.sidebarIsExpanded}
+              expandSidebar={this.props.expandSidebar}
+              collapseSidebar={this.props.collapseSidebar}
+              showFileOptions={this.props.showFileOptions}
+              hideFileOptions={this.props.hideFileOptions}
+              deleteFile={this.props.deleteFile}
+              showEditFileName={this.props.showEditFileName}
+              hideEditFileName={this.props.hideEditFileName}
+              updateFileName={this.props.updateFileName}
             />
-            <EditorAccessibility
-              lintMessages={this.props.editorAccessibility.lintMessages}
-              lineNo={this.props.editorAccessibility.lineNo}
-            />
-            <Console
-              consoleEvent={this.props.ide.consoleEvent}
-              isPlaying={this.props.ide.isPlaying}
-              isExpanded={this.props.ide.consoleIsExpanded}
-              expandConsole={this.props.expandConsole}
-              collapseConsole={this.props.collapseConsole}
-            />
-          </div>
-          <PreviewFrame
-            htmlFile={this.props.htmlFile}
-            jsFiles={this.props.jsFiles}
-            cssFiles={this.props.cssFiles}
-            files={this.props.files}
-            content={this.props.selectedFile.content}
-            head={
-              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-            }
-            isPlaying={this.props.ide.isPlaying}
-            dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-          />
+            <SplitPane
+              split="vertical"
+              defaultSize={'50%'}
+              onChange={() => (this.refs.overlay.style.display = 'block')}
+              onDragFinished={() => (this.refs.overlay.style.display = 'none')}
+            >
+              <SplitPane
+                split="horizontal"
+                primary="second"
+                defaultSize={this.consoleSize}
+                minSize={29}
+                ref="consolePane"
+                onDragFinished={this._handleConsolePaneOnDragFinished}
+                allowResize={this.props.ide.consoleIsExpanded}
+              >
+                <Editor
+                  lintWarning={this.props.preferences.lintWarning}
+                  lintMessages={this.props.editorAccessibility.lintMessages}
+                  updateLineNumber={this.props.updateLineNumber}
+                  updateLintMessage={this.props.updateLintMessage}
+                  clearLintMessage={this.props.clearLintMessage}
+                  file={this.props.selectedFile}
+                  updateFileContent={this.props.updateFileContent}
+                  fontSize={this.props.preferences.fontSize}
+                  indentationAmount={this.props.preferences.indentationAmount}
+                  isTabIndent={this.props.preferences.isTabIndent}
+                />
+                <EditorAccessibility
+                  lintMessages={this.props.editorAccessibility.lintMessages}
+                  lineNo={this.props.editorAccessibility.lineNo}
+                />
+                <Console
+                  consoleEvent={this.props.ide.consoleEvent}
+                  isPlaying={this.props.ide.isPlaying}
+                  isExpanded={this.props.ide.consoleIsExpanded}
+                  expandConsole={this.props.expandConsole}
+                  collapseConsole={this.props.collapseConsole}
+                />
+              </SplitPane>
+              <div>
+                <div className="preview-frame-overlay" ref="overlay">
+                </div>
+                <PreviewFrame
+                  htmlFile={this.props.htmlFile}
+                  jsFiles={this.props.jsFiles}
+                  cssFiles={this.props.cssFiles}
+                  files={this.props.files}
+                  content={this.props.selectedFile.content}
+                  head={
+                    <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+                  }
+                  isPlaying={this.props.ide.isPlaying}
+                  dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+                />
+              </div>
+            </SplitPane>
+          </SplitPane>
         </div>
         {(() => {
           if (this.props.ide.modalIsVisible) {
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4a0be1a3..8149e3c6 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -113,6 +113,7 @@
 	border: 1px solid $light-modal-border-color;
 	border-radius: 2px;
 	box-shadow: 0 12px 12px $light-shadow-color;
+	z-index: 20;
 }
 
 %hidden-element {
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 2b7b2151..e1fd9658 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -1,10 +1,6 @@
 .preview-console {
-	position: absolute;
 	width: 100%;
-	height: #{150 / $base-font-size}rem;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	height: 100%;
 	background: $console-light-background-color;
 	z-index: 1000;
 	overflow: hidden;
@@ -26,10 +22,6 @@
 	.preview-console__warn {
 		color: $console-warn-color;
 	}
-
-	&.preview-console--collapsed {
-		height: #{29 / $base-font-size}rem;
-	}
 }
 
 .preview-console__header {
diff --git a/client/styles/components/_resizer.scss b/client/styles/components/_resizer.scss
new file mode 100644
index 00000000..2e30edfb
--- /dev/null
+++ b/client/styles/components/_resizer.scss
@@ -0,0 +1,43 @@
+.Resizer {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: $ide-border-color;
+    opacity: .2;
+    z-index: 1;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+// .Resizer:hover {
+//     -webkit-transition: all 2s ease;
+//     transition: all 2s ease;
+// }
+
+.Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+}
+
+.Resizer.horizontal:hover {
+    // border-top: 5px solid rgba(0, 0, 0, 0.5);
+    // border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    // border-left: 5px solid rgba(0, 0, 0, 0.5);
+    // border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index c3e4bb54..94248be3 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -13,6 +13,8 @@
   .sidebar--contracted & {
     display: none;
   }
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .sidebar__add {
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index 581c9628..0a041542 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -9,11 +9,13 @@
   width: 100%;
   flex: 1 0 0px;
   display: flex;
+  position: relative;
 }
 
 .editor-console-container {
-  flex: 1 0 0px;
-  max-width: 45%;
+  // flex: 1 0 0px;
+  // max-width: 45%;
+  width: 100%;
   height: 100%;
   position: relative;
 
@@ -32,8 +34,16 @@
 }
 
 .preview-frame {
-	flex: 1 0 0px;
-  min-height: 100%;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.preview-frame-overlay {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 10;
 }
 
 .toolbar {
@@ -41,8 +51,6 @@
 }
 
 .sidebar {
-  width: #{180 / $base-font-size}rem;
-  &.sidebar--contracted {
-  	width: #{20 / $base-font-size}rem;
-  }
+  width: 100%;
+  height: 100%;
 }
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 170d84fb..7a565c25 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -19,6 +19,7 @@
 @import 'components/sidebar';
 @import 'components/modal';
 @import 'components/console';
+@import 'components/resizer';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';
diff --git a/package.json b/package.json
index 4140cf0b..98e9ab23 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "react-inlinesvg": "^0.4.2",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.1",
+    "react-split-pane": "^0.1.44",
     "redux": "^3.5.2",
     "redux-form": "^5.2.5",
     "redux-thunk": "^2.1.0",