diff --git a/src/app.js b/src/app.js
index 9372a8403f..60ab86233c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -52,6 +52,7 @@ const TestTab = require('./app/tabs/test-tab')
 const RunTab = require('./app/tabs/run-tab')
 const FilePanel = require('./app/panels/file-panel')
 
+import PanelsResize from './lib/panels-resize'
 import { EntityStore } from './lib/store'
 import { RemixAppManager } from './remixAppManager'
 
@@ -85,9 +86,8 @@ var css = csjs`
     position           : absolute;
     top                : 0;
     bottom             : 0;
-    left               : 450px;
     overflow           : hidden;
-    width              : 800px;
+    width              : 82%;
   }
   .iconpanel           {
     background-color  : ${styles.leftPanel.backgroundColor_Panel};
@@ -98,18 +98,16 @@ var css = csjs`
     bottom             : 0;
     left               : 0;
     overflow           : hidden;
-    width              : 50px;
+    width              : 2%;
   }
   .swappanel          {
     display            : flex;
     flex-direction     : column;
     position           : absolute;
     top                : 0;
-    left               : 50px;
     bottom             : 0;
     overflow           : hidden;
-    width              : 400px;
-    height             : 100%;
+    width              : 16%;
   }
   .highlightcode {
     position:absolute;
@@ -187,31 +185,13 @@ class App {
       }
     }
   }
-  _adjustLayout (direction, delta) {
-    /* var self = this
-    var layout = self.data._layout[direction]
-    if (layout) {
-      if (delta === undefined) {
-        layout.show = !layout.show
-        if (layout.show) delta = layout.offset
-        else delta = 0
-      } else {
-        self._components.config.set(`${direction}-offset`, delta)
-        layout.offset = delta
-      }
-    }
-    if (direction === 'left') {
-      self._view.swappanel.style.width = delta + 'px'
-      self._view.mainpanel.style.left = delta + 'px'
-    }
-     if (direction === 'right') {
-       self._view.mainpanel.style.width = delta + 'px'
-       self._view.swappanel.style.right = delta + 'px'
-    }
-    */
-  }
+
   init () {
     var self = this
+    self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
+    self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
+
+    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 300 }) // eslint-disable-line
     run.apply(self)
   }
 
@@ -467,7 +447,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   let test = new TestTab(self._components.registry, compileTab)
   let sourceHighlighters = registry.get('editor').api.sourceHighlighters
   let configProvider = self._components.filesProviders['config']
-  
+
   appStore.addEntities([
   { profile: this.profile(), api: this },
   { profile: udapp.profile(), api: udapp },
@@ -487,12 +467,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   const swapPanelComponent = new SwapPanelComponent()
   const verticalIconComponent = new VerticalIconsComponent()
-  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager)
-  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager)
+  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager) // eslint-disable-line
+  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line
 
   self._components.editorpanel.init()
   self._components.fileManager.init()
-  
+
   self._view.mainpanel.appendChild(self._components.editorpanel.render())
   self._view.iconpanel.appendChild(verticalIconComponent.render())
   self._view.swappanel.appendChild(swapPanelComponent.render())
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 87d6b45335..14c3d04733 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -172,18 +172,12 @@ class EditorPanel {
     self._view.tabsbar = yo`
       <div class=${css.tabsbar}>
         <div class=${css.buttons}>
-          <span class=${css.toggleLHP} onclick=${toggleLHP} title="Toggle left hand panel">
-            <i class="fa fa-angle-double-left"></i>
-          </span>
           <span class=${css.changeeditorfontsize} >
             <i class="increditorsize fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
             <i class="decreditorsize fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
           </span>
         </div>
         ${self._view.tabs}
-        <span class="${css.toggleRHP}" onclick=${toggleRHP} title="Toggle right hand panel">
-          <i class="fa fa-angle-double-right"></i>
-        </span>
       </div>
     `
 
@@ -237,14 +231,6 @@ class EditorPanel {
         rightArrow.classList.add(css.hide)
       }
     }
-    function toggleLHP (event) {
-      this.children[0].classList.toggle('fa-angle-double-right')
-      this.children[0].classList.toggle('fa-angle-double-left')
-    }
-    function toggleRHP (event) {
-      this.children[0].classList.toggle('fa-angle-double-right')
-      this.children[0].classList.toggle('fa-angle-double-left')
-    }
     function increase () { self._components.editor.editorFontSize(1) }
     function decrease () { self._components.editor.editorFontSize(-1) }
     function scrollLeft (event) {
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index 1f58ac2afc..cb4716b5c8 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -20,9 +20,7 @@ var styles = styleGuide.chooser()
 
 var css = require('./styles/file-panel-styles')
 
-var limit = 60
 var canUpload = window.File || window.FileReader || window.FileList || window.Blob
-var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
 /*
   Overview of APIs:
@@ -71,8 +69,7 @@ function filepanel (localRegistry) {
   self._compilerMetadata.syncContractMetadata()
 
   self.compilerMetadata = () => { return self._compilerMetadata }
-  var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
-
+  
   function remixdDialog () {
     return yo`
       <div class=${css.dialog}>
@@ -128,7 +125,6 @@ function filepanel (localRegistry) {
             <div class="httpsexplorer ${css.treeview}">${httpsExplorer.init()}</div>
           </div>
         </div>
-        ${dragbar}
       </div>
     `
   }
@@ -239,41 +235,6 @@ function filepanel (localRegistry) {
     })
   }
 
-  // ----------------- resizeable ui ---------------
-  function mousedown (event) {
-    event.preventDefault()
-    if (event.which === 1) {
-      moveGhostbar(event)
-      document.body.appendChild(ghostbar)
-      document.addEventListener('mousemove', moveGhostbar)
-      document.addEventListener('mouseup', removeGhostbar)
-      document.addEventListener('keydown', cancelGhostbar)
-    }
-  }
-  function cancelGhostbar (event) {
-    if (event.keyCode === 27) {
-      document.body.removeChild(ghostbar)
-      document.removeEventListener('mousemove', moveGhostbar)
-      document.removeEventListener('mouseup', removeGhostbar)
-      document.removeEventListener('keydown', cancelGhostbar)
-    }
-  }
-  function getPosition (event) {
-    var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
-    var newpos = (event.pageX < limit) ? limit : event.pageX
-    newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
-    return newpos
-  }
-  function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
-    ghostbar.style.left = getPosition(event) + 'px'
-  }
-  function removeGhostbar (event) {
-    document.body.removeChild(ghostbar)
-    document.removeEventListener('mousemove', moveGhostbar)
-    document.removeEventListener('mouseup', removeGhostbar)
-    document.removeEventListener('keydown', cancelGhostbar)
-  }
-
   function createNewFile () {
     modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
       helper.createNonClashingName(input, self._deps.fileProviders['browser'], (error, newName) => {
diff --git a/src/app/panels/styles/file-panel-styles.js b/src/app/panels/styles/file-panel-styles.js
index 0d50abf89e..ea8c3ddc22 100644
--- a/src/app/panels/styles/file-panel-styles.js
+++ b/src/app/panels/styles/file-panel-styles.js
@@ -73,27 +73,7 @@ var css = csjs`
   }
   .treeviews {
     overflow-y        : auto;
-  }
-  .dragbar            {
-    position          : absolute;
-    top               : 29px;
-    width             : 0.5em;
-    right             : 0;
-    bottom            : 0;
-    cursor            : col-resize;
-    z-index           : 999;
-    border-right      : 2px solid hsla(215, 81%, 79%, .3);
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : ${styles.colors.lightBlue};
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
+  }  
   .dialog {
     display: flex;
     flex-direction: column;
diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index 8e5abef71a..dec4386d73 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/src/app/staticanalysis/staticAnalysisView.js
@@ -122,12 +122,6 @@ staticAnalysisView.prototype.run = function () {
           self._deps.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning', useSpan: true})
         })
       })
-      if (warningContainer.html() === '') {
-        $('#righthand-panel #menu .staticanalysisView').css('color', '')
-        warningContainer.html('No warning to report')
-      } else {
-        $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
-      }
       self.event.trigger('staticAnaysisWarning', [warningCount])
     })
   } else {
diff --git a/src/lib/panels-resize.js b/src/lib/panels-resize.js
new file mode 100644
index 0000000000..57a0475ce3
--- /dev/null
+++ b/src/lib/panels-resize.js
@@ -0,0 +1,85 @@
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const styleGuide = require('../app/ui/styles-guide/theme-chooser')
+const styles = styleGuide.chooser()
+
+const css = csjs`
+  .dragbar            {
+    position          : absolute;
+    top               : 29px;
+    width             : 0.5em;
+    right             : 0;
+    bottom            : 0;
+    cursor            : col-resize;
+    z-index           : 999;
+    border-right      : 2px solid hsla(215, 81%, 79%, .3);
+  }
+  .ghostbar           {
+    width             : 3px;
+    background-color  : ${styles.colors.lightBlue};
+    opacity           : 0.5;
+    position          : absolute;
+    cursor            : col-resize;
+    z-index           : 9999;
+    top               : 0;
+    bottom            : 0;
+  }
+`
+
+export default class PanelsResize {
+  constructor (idpanel1, idpanel2, opt) {
+    var panel1 = document.querySelector(idpanel1)
+    var panel2 = document.querySelector(idpanel2)
+
+    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+
+    let mousedown = (event) => {
+      event.preventDefault()
+      if (event.which === 1) {
+        moveGhostbar(event)
+        document.body.appendChild(ghostbar)
+        document.addEventListener('mousemove', moveGhostbar)
+        document.addEventListener('mouseup', removeGhostbar)
+        document.addEventListener('keydown', cancelGhostbar)
+      }
+    }
+
+    let cancelGhostbar = (event) => {
+      if (event.keyCode === 27) {
+        document.body.removeChild(ghostbar)
+        document.removeEventListener('mousemove', moveGhostbar)
+        document.removeEventListener('mouseup', removeGhostbar)
+        document.removeEventListener('keydown', cancelGhostbar)
+      }
+    }
+
+    let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
+      let p = processPositiions(event)
+      if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
+      ghostbar.style.left = event.x + 'px'
+    }
+
+    let removeGhostbar = (event) => {
+      document.body.removeChild(ghostbar)
+      document.removeEventListener('mousemove', moveGhostbar)
+      document.removeEventListener('mouseup', removeGhostbar)
+      document.removeEventListener('keydown', cancelGhostbar)
+      let p = processPositiions(event)
+      panel1.style.width = p.panel1Width + 'px'
+      panel2.style.left = p.panel2left + 'px'
+      panel2.style.width = p.panel2Width + 'px'
+    }
+
+    let processPositiions = (event) => {
+      let panel1Width = event.x - panel1.offsetLeft
+      panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
+      let panel2left = panel1.offsetLeft + panel1Width
+      let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
+      panel2Width = panel2Width < opt.minWidth ? opt.minWidth : panel2Width
+      return { panel1Width, panel2left, panel2Width }
+    }
+
+    var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+    panel1.appendChild(dragbar)
+  }
+}