diff --git a/src/app/contract/contractParser.js b/src/app/contract/contractParser.js
index 5f45cea55a..27796062d8 100644
--- a/src/app/contract/contractParser.js
+++ b/src/app/contract/contractParser.js
@@ -1,6 +1,5 @@
 'use strict'
 
-var $ = require('jquery')
 var txHelper = require('../execution/txHelper')
 
 module.exports = (contractName, contract, compiledSource) => {
@@ -63,7 +62,7 @@ var formatAssemblyText = function (asm, prefix, source) {
     return prefix + asm + '\n'
   }
   var text = prefix + '.code\n'
-  $.each(asm['.code'], function (i, item) {
+  asm['.code'].forEach(function (item, _i) {
     var v = item.value === undefined ? '' : item.value
     var src = ''
     if (item.begin !== undefined && item.end !== undefined) {
@@ -78,11 +77,12 @@ var formatAssemblyText = function (asm, prefix, source) {
     text += prefix + item.name + ' ' + v + '\t\t\t' + src + '\n'
   })
   text += prefix + '.data\n'
-  if (asm['.data']) {
-    $.each(asm['.data'], function (i, item) {
-      text += '  ' + prefix + '' + i + ':\n'
-      text += formatAssemblyText(item, prefix + '    ', source)
-    })
+  let asmData = (asm['.data'] || [])
+  for (let i in asmData) {
+    let item = asmData[i]
+
+    text += '  ' + prefix + '' + i + ':\n'
+    text += formatAssemblyText(item, prefix + '    ', source)
   }
   return text
 }
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 605e8995ec..9c7cb19ab1 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -1,181 +1,12 @@
-var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
 
 var Terminal = require('./terminal')
 
-var cssTabs = yo`
-  <style>
-    #files .file {
-      padding: 0 0.6em;
-      box-sizing: border-box;
-      background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
-      cursor: pointer;
-      margin-right: 10px;
-      margin-top: 5px;
-      position: relative;
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-      color: ${styles.editor.text_Teriary};
-    }
-    #files .file.active {
-      color: ${styles.editor.text_Primary};
-      font-weight: bold;
-      border-bottom: 0 none;
-      padding-right: 1.5em;
-    }
-    #files .file .remove {
-      font-size: 12px;
-      display: flex;
-      color: ${styles.editor.text_Primary};
-      position: absolute;
-      top: -7px;
-      right: 5px;
-      display: none;
-    }
-    #files .file input {
-      background-color: ${styles.colors.transparent};
-      border: 0 none;
-      border-bottom: 1px dotted ${styles.editor.text_Primary};
-      line-height: 1em;
-      margin: 0.5em 0;
-    }
-    #files .file.active .remove {
-      display: inline-block;
-      color: ${styles.editor.text_Primary};
-    }
-  </style>
-`
-
-var css = csjs`
-  .editorpanel         {
-    display            : flex;
-    flex-direction     : column;
-    height             : 100%;
-  }
-  .tabsbar             {
-    background-color   : ${styles.editor.backgroundColor_Panel};
-    display            : flex;
-    overflow           : hidden;
-    height             : 30px;
-  }
-  .tabs               {
-    position          : relative;
-    display           : flex;
-    margin            : 0;
-    left              : 10px;
-    margin-right      : 10px;
-    width             : 100%;
-    overflow          : hidden;
-  }
-  .files              {
-    display           : flex;
-    position          : relative;
-    list-style        : none;
-    margin            : 0;
-    font-size         : 15px;
-    height            : 2.5em;
-    box-sizing        : border-box;
-    line-height       : 2em;
-    top               : 0;
-    border-bottom     : 0 none;
-  }
-  .changeeditorfontsize {
-    margin            : 0;
-    font-size         : 9px;
-    margin-top        : 0.5em;
-  }
-  .changeeditorfontsize i {
-    cursor            : pointer;
-    display           : block;
-    color             : ${styles.editor.icon_Color_Editor};
-  }
-  .changeeditorfontsize i {
-    cursor            : pointer;
-  }
-  .changeeditorfontsize i:hover {
-    color             : ${styles.editor.icon_HoverColor_Editor};
-  }
-  .buttons            {
-    display           : flex;
-    flex-direction    : row;
-    justify-content   : space-around;
-    align-items       : center;
-    min-width         : 45px;
-  }
-  .toggleLHP          {
-    display           : flex;
-    padding           : 10px;
-    width             : 100%;
-    font-weight       : bold;
-    color             : ${styles.leftPanel.icon_Color_TogglePanel};
-  }
-  .toggleLHP i        {
-    cursor            : pointer;
-    font-size         : 14px;
-    font-weight       : bold;
-  }
-  .toggleLHP i:hover  {
-    color             : ${styles.leftPanel.icon_HoverColor_TogglePanel};
-  }
-  .scroller           {
-    position          : absolute;
-    z-index           : 999;
-    text-align        : center;
-    cursor            : pointer;
-    vertical-align    : middle;
-    background-color  : ${styles.colors.general_BackgroundColor};
-    height            : 100%;
-    font-size         : 1.3em;
-    color             : orange;
-  }
-  .scrollerright      {
-    right             : 0;
-    margin-right      : 15px;
-  }
-  .scrollerleft       {
-    left              : 0;
-  }
-  .toggleRHP          {
-    margin            : 0.5em;
-    font-weight       : bold;
-    color             : ${styles.rightPanel.icon_Color_TogglePanel};
-    right             : 0;
-  }
-  .toggleRHP i        {
-    cursor            : pointer;
-    font-size         : 14px;
-    font-weight       : bold;
-  }
-  .toggleRHP i:hover  {
-    color             : ${styles.rightPanel.icon_HoverColor_TogglePanel};
-  }
-  .show               {
-    opacity           : 1;
-    transition        : .3s opacity ease-in;
-  }
-  .hide               {
-    opacity           : 0;
-    pointer-events    : none;
-    transition        : .3s opacity ease-in;
-  }
-  .content            {
-    position          : relative;
-    display           : flex;
-    flex-direction    : column;
-    height            : 100%;
-    width             : 100%;
-  }
-  .contextviewcontainer{
-    width             : 100%;
-    height            : 20px;
-    background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
-  }
-`
+var styles = require('./styles/editor-panel-styles')
+var cssTabs = styles.cssTabs
+var css = styles.css
 
 class EditorPanel {
   constructor (opts = {}) {
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index bb4015ff32..1547f66896 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -1,6 +1,5 @@
 var async = require('async')
 var $ = require('jquery')
-var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var minixhr = require('minixhr')  // simple and small cross-browser XMLHttpRequest (XHR)
 var remixLib = require('remix-lib')
@@ -15,110 +14,7 @@ var helper = require('../../lib/helper')
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
 
-module.exports = filepanel
-
-var css = csjs`
-  .container {
-    display           : flex;
-    flex-direction    : row;
-    width             : 100%;
-    height            : 100%;
-    box-sizing        : border-box;
-  }
-  .fileexplorer       {
-    display           : flex;
-    flex-direction    : column;
-    position          : relative;
-    width             : 100%;
-  }
-  .menu               {
-    margin-top        : -0.2em;
-    flex-shrink       : 0;
-    display           : flex;
-    flex-direction    : row;
-    min-width         : 160px;
-  }
-  .newFile            {
-    padding           : 10px;
-  }
-  .newFile i          {
-    cursor            : pointer;
-  }
-  .newFile i:hover    {
-    color             : ${styles.colors.orange};
-  }
-  .gist            {
-    padding           : 10px;
-  }
-  .gist i          {
-    cursor            : pointer;
-  }
-  .gist i:hover    {
-    color             : orange;
-  }
-  .copyFiles            {
-    padding           : 10px;
-  }
-  .copyFiles i          {
-    cursor            : pointer;
-  }
-  .copyFiles i:hover    {
-    color             : orange;
-  }
-  .connectToLocalhost {
-    padding           : 10px;
-  }
-  .connectToLocalhost i {
-    cursor            : pointer;
-  }
-  .connectToLocalhost i:hover   {
-    color             : ${styles.colors.orange};
-  }
-  .uploadFile         {
-    padding           : 10px;
-  }
-  .uploadFile label:hover   {
-    color             : ${styles.colors.orange};
-  }
-  .uploadFile label   {
-    cursor            : pointer;
-  }
-  .treeview {
-    background-color  : ${styles.colors.general_BackgroundColor};
-  }
-  .treeviews {
-    overflow-y        : auto;
-  }
-  .dragbar            {
-    position          : absolute;
-    top               : 37px;
-    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;
-  }
-  .dialogParagraph {
-    ${styles.infoTextBox}
-    margin-bottom: 2em;
-    word-break: break-word;
-  }
-`
+var css = require('./styles/file-panel-styles')
 
 var limit = 60
 var canUpload = window.File || window.FileReader || window.FileList || window.Blob
@@ -403,3 +299,5 @@ function packageFiles (files, callback) {
     callback(null, ret)
   })
 }
+
+module.exports = filepanel
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index f870913867..53f65c5f85 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -11,111 +11,7 @@ var supportTab = require('../tabs/support-tab')
 var pluginTab = require('../tabs/plugin-tab')
 var PluginManager = require('../../pluginManager')
 
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  #righthand-panel {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  #optionViews {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    overflow: scroll;
-    height: 100%;
-  }
-  #optionViews > div {
-    display: none;
-  }
-  #optionViews .pre {
-    word-wrap: break-word;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-  }
-  #optionViews .hide {
-    display: none;
-  }
-  a {
-    color: ${styles.rightPanel.text_link};
-  }
-  .menu {
-    display: flex;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-  }
-  .options {
-    float: left;
-    padding-top: 0.7em;
-    min-width: 60px;
-    font-size: 0.9em;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-  }
-  .opts {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .opts_li {
-    display: block;
-    font-weight: bold;
-    color: ${styles.rightPanel.text_Teriary};
-  }
-  .opts_li.active {
-    color: ${styles.rightPanel.text_Primary};
-  }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
-  }
-  .dragbar             {
-    position           : absolute;
-    width              : 0.5em;
-    top                : 3em;
-    bottom             : 0;
-    cursor             : col-resize;
-    z-index            : 999;
-    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : ${styles.rightPanel.bar_Ghost};
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
-  .panel              {
-    height            : 100%;
-  }
-  .header             {
-    height            : 100%;
-  }
-  .solIcon {
-    margin-left: 10px;
-    margin-right: 30px;
-    display: flex;
-    align-self: center;
-    height: 29px;
-    width: 20px;
-    background-color: ${styles.colors.transparent};
-  }
-`
-
-// ------------------------------------------------------------------
-
-module.exports = RighthandPanel
+var css = require('./styles/righthand-panel-styles')
 
 function RighthandPanel (appAPI, events, opts) {
   var self = this
@@ -146,21 +42,21 @@ function RighthandPanel (appAPI, events, opts) {
 
   // load tabbed menu component
   var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
-  self._view.tabbedMenu = new TabbedMenu(options, {}, tabEvents, {})
+  self._view.tabbedMenu = new TabbedMenu(options, tabEvents)
 
   events.rhp = self.event
 
   this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events))
+  this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
+  this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
+  this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
+  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
   self.pluginManager = new PluginManager(appAPI, events)
   events.rhp.register('plugin-loadRequest', (json) => {
-    var content = pluginTab(optionViews, {}, {}, {}, json.url)
+    var content = pluginTab(optionViews, json.url)
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)
     self.pluginManager.register(json, content)
   })
@@ -211,3 +107,5 @@ function RighthandPanel (appAPI, events, opts) {
     }
   }
 }
+
+module.exports = RighthandPanel
diff --git a/src/app/panels/styles/editor-panel-styles.js b/src/app/panels/styles/editor-panel-styles.js
new file mode 100644
index 0000000000..2d9ece153b
--- /dev/null
+++ b/src/app/panels/styles/editor-panel-styles.js
@@ -0,0 +1,180 @@
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var cssTabs = yo`
+  <style>
+    #files .file {
+      padding: 0 0.6em;
+      box-sizing: border-box;
+      background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+      cursor: pointer;
+      margin-right: 10px;
+      margin-top: 5px;
+      position: relative;
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      color: ${styles.editor.text_Teriary};
+    }
+    #files .file.active {
+      color: ${styles.editor.text_Primary};
+      font-weight: bold;
+      border-bottom: 0 none;
+      padding-right: 1.5em;
+    }
+    #files .file .remove {
+      font-size: 12px;
+      display: flex;
+      color: ${styles.editor.text_Primary};
+      position: absolute;
+      top: -7px;
+      right: 5px;
+      display: none;
+    }
+    #files .file input {
+      background-color: ${styles.colors.transparent};
+      border: 0 none;
+      border-bottom: 1px dotted ${styles.editor.text_Primary};
+      line-height: 1em;
+      margin: 0.5em 0;
+    }
+    #files .file.active .remove {
+      display: inline-block;
+      color: ${styles.editor.text_Primary};
+    }
+  </style>
+`
+
+var css = csjs`
+  .editorpanel         {
+    display            : flex;
+    flex-direction     : column;
+    height             : 100%;
+  }
+  .tabsbar             {
+    background-color   : ${styles.editor.backgroundColor_Panel};
+    display            : flex;
+    overflow           : hidden;
+    height             : 30px;
+  }
+  .tabs               {
+    position          : relative;
+    display           : flex;
+    margin            : 0;
+    left              : 10px;
+    margin-right      : 10px;
+    width             : 100%;
+    overflow          : hidden;
+  }
+  .files              {
+    display           : flex;
+    position          : relative;
+    list-style        : none;
+    margin            : 0;
+    font-size         : 15px;
+    height            : 2.5em;
+    box-sizing        : border-box;
+    line-height       : 2em;
+    top               : 0;
+    border-bottom     : 0 none;
+  }
+  .changeeditorfontsize {
+    margin            : 0;
+    font-size         : 9px;
+    margin-top        : 0.5em;
+  }
+  .changeeditorfontsize i {
+    cursor            : pointer;
+    display           : block;
+    color             : ${styles.editor.icon_Color_Editor};
+  }
+  .changeeditorfontsize i {
+    cursor            : pointer;
+  }
+  .changeeditorfontsize i:hover {
+    color             : ${styles.editor.icon_HoverColor_Editor};
+  }
+  .buttons            {
+    display           : flex;
+    flex-direction    : row;
+    justify-content   : space-around;
+    align-items       : center;
+    min-width         : 45px;
+  }
+  .toggleLHP          {
+    display           : flex;
+    padding           : 10px;
+    width             : 100%;
+    font-weight       : bold;
+    color             : ${styles.leftPanel.icon_Color_TogglePanel};
+  }
+  .toggleLHP i        {
+    cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
+  }
+  .toggleLHP i:hover  {
+    color             : ${styles.leftPanel.icon_HoverColor_TogglePanel};
+  }
+  .scroller           {
+    position          : absolute;
+    z-index           : 999;
+    text-align        : center;
+    cursor            : pointer;
+    vertical-align    : middle;
+    background-color  : ${styles.colors.general_BackgroundColor};
+    height            : 100%;
+    font-size         : 1.3em;
+    color             : orange;
+  }
+  .scrollerright      {
+    right             : 0;
+    margin-right      : 15px;
+  }
+  .scrollerleft       {
+    left              : 0;
+  }
+  .toggleRHP          {
+    margin            : 0.5em;
+    font-weight       : bold;
+    color             : ${styles.rightPanel.icon_Color_TogglePanel};
+    right             : 0;
+  }
+  .toggleRHP i        {
+    cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
+  }
+  .toggleRHP i:hover  {
+    color             : ${styles.rightPanel.icon_HoverColor_TogglePanel};
+  }
+  .show               {
+    opacity           : 1;
+    transition        : .3s opacity ease-in;
+  }
+  .hide               {
+    opacity           : 0;
+    pointer-events    : none;
+    transition        : .3s opacity ease-in;
+  }
+  .content            {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    width             : 100%;
+  }
+  .contextviewcontainer{
+    width             : 100%;
+    height            : 20px;
+    background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
+  }
+`
+
+module.exports = {
+  cssTabs: cssTabs,
+  css: css
+}
diff --git a/src/app/panels/styles/file-panel-styles.js b/src/app/panels/styles/file-panel-styles.js
new file mode 100644
index 0000000000..6bd243422e
--- /dev/null
+++ b/src/app/panels/styles/file-panel-styles.js
@@ -0,0 +1,109 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .container {
+    display           : flex;
+    flex-direction    : row;
+    width             : 100%;
+    height            : 100%;
+    box-sizing        : border-box;
+  }
+  .fileexplorer       {
+    display           : flex;
+    flex-direction    : column;
+    position          : relative;
+    width             : 100%;
+  }
+  .menu               {
+    margin-top        : -0.2em;
+    flex-shrink       : 0;
+    display           : flex;
+    flex-direction    : row;
+    min-width         : 160px;
+  }
+  .newFile            {
+    padding           : 10px;
+  }
+  .newFile i          {
+    cursor            : pointer;
+  }
+  .newFile i:hover    {
+    color             : ${styles.colors.orange};
+  }
+  .gist            {
+    padding           : 10px;
+  }
+  .gist i          {
+    cursor            : pointer;
+  }
+  .gist i:hover    {
+    color             : orange;
+  }
+  .copyFiles            {
+    padding           : 10px;
+  }
+  .copyFiles i          {
+    cursor            : pointer;
+  }
+  .copyFiles i:hover    {
+    color             : orange;
+  }
+  .connectToLocalhost {
+    padding           : 10px;
+  }
+  .connectToLocalhost i {
+    cursor            : pointer;
+  }
+  .connectToLocalhost i:hover   {
+    color             : ${styles.colors.orange};
+  }
+  .uploadFile         {
+    padding           : 10px;
+  }
+  .uploadFile label:hover   {
+    color             : ${styles.colors.orange};
+  }
+  .uploadFile label   {
+    cursor            : pointer;
+  }
+  .treeview {
+    background-color  : ${styles.colors.general_BackgroundColor};
+  }
+  .treeviews {
+    overflow-y        : auto;
+  }
+  .dragbar            {
+    position          : absolute;
+    top               : 37px;
+    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;
+  }
+  .dialogParagraph {
+    ${styles.infoTextBox}
+    margin-bottom: 2em;
+    word-break: break-word;
+  }
+`
+
+module.exports = css
diff --git a/src/app/panels/styles/righthand-panel-styles.js b/src/app/panels/styles/righthand-panel-styles.js
new file mode 100644
index 0000000000..3233706d88
--- /dev/null
+++ b/src/app/panels/styles/righthand-panel-styles.js
@@ -0,0 +1,103 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  #righthand-panel {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  #optionViews {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    overflow: scroll;
+    height: 100%;
+  }
+  #optionViews > div {
+    display: none;
+  }
+  #optionViews .pre {
+    word-wrap: break-word;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
+  }
+  #optionViews .hide {
+    display: none;
+  }
+  a {
+    color: ${styles.rightPanel.text_link};
+  }
+  .menu {
+    display: flex;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+  }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Teriary};
+  }
+  .opts_li.active {
+    color: ${styles.rightPanel.text_Primary};
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
+  }
+  .dragbar             {
+    position           : absolute;
+    width              : 0.5em;
+    top                : 3em;
+    bottom             : 0;
+    cursor             : col-resize;
+    z-index            : 999;
+    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
+  }
+  .ghostbar           {
+    width             : 3px;
+    background-color  : ${styles.rightPanel.bar_Ghost};
+    opacity           : 0.5;
+    position          : absolute;
+    cursor            : col-resize;
+    z-index           : 9999;
+    top               : 0;
+    bottom            : 0;
+  }
+  .panel              {
+    height            : 100%;
+  }
+  .header             {
+    height            : 100%;
+  }
+  .solIcon {
+    margin-left: 10px;
+    margin-right: 30px;
+    display: flex;
+    align-self: center;
+    height: 29px;
+    width: 20px;
+    background-color: ${styles.colors.transparent};
+  }
+`
+
+module.exports = css
diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js
new file mode 100644
index 0000000000..cbb3d04422
--- /dev/null
+++ b/src/app/panels/styles/terminal-styles.js
@@ -0,0 +1,167 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .panel              {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    font-size         : 12px;
+    color             : ${styles.terminal.text_Regular_TransactionLog};
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
+    height            : 100%;
+    min-height        : 1.7em;
+    overflow          : hidden;
+  }
+  .bar                {
+    display           : flex;
+    min-height        : 3em;
+    padding           : 2px;
+    background-color  : ${styles.terminal.backgroundColor_Menu};
+    z-index           : 3;
+  }
+  .menu               {
+    color             : ${styles.terminal.text_Primary};
+    position          : relative;
+    display           : flex;
+    align-items       : center;
+    width             : 100%;
+    padding           : 5px;
+  }
+  .clear           {
+    margin-left       : 10px;
+    margin-right      : 10px; 
+    width             : 10px;
+    cursor            : pointer;
+    color             : ${styles.terminal.icon_Color_TogglePanel};
+  }
+  .clear:hover              {
+    color             : ${styles.terminal.icon_HoverColor_Menu};
+  }
+  .toggleTerminal              {
+    margin-right      : 10px;
+    font-size         : 14px;
+    font-weight       : bold;
+    cursor            : pointer;
+    color             : ${styles.terminal.icon_Color_Menu};
+  }
+  .toggleTerminal:hover              {
+    color             : ${styles.terminal.icon_HoverColor_TogglePanel};
+  }
+  .terminal_container {
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    overflow-y        : auto;
+    font-family       : monospace;
+  }
+  .terminal_bg     {
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    padding-left      : 5px;
+    padding-right     : 5px;
+    padding-bottom    : 3px;
+    overflow-y        : auto;
+    font-family       : monospace;
+    background-image  : ${styles.terminal.backgroundImage_Terminal};
+    opacity           : 0.1;
+    top               : 15%;
+    left              : 33%;
+    bottom            : 0;
+    right             : 0;
+    position          : absolute;
+    background-repeat : no-repeat;
+    background-size   : 45%;
+  }
+  .terminal    {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .journal            {
+    margin-top        : auto;
+    font-family       : monospace;
+  }
+  .block              {
+    word-break        : break-all;
+    white-space       : pre-wrap;
+    line-height       : 2ch;
+    margin            : 1ch;
+    margin-top        : 2ch;
+  }
+  .cli                {
+    line-height       : 1.7em;
+    font-family       : monospace;
+    background-color  : ${styles.terminal.backgroundColor_TerminalCLI};
+    padding           : .4em;
+    color             : ${styles.appProperties.mainText_Color};
+    border-top        : solid 2px ${styles.terminal.bar_Ghost};
+  }
+  .prompt             {
+    margin-right      : 0.5em;
+    font-family       : monospace;
+    font-weight       : bold;
+    font-size         : large;
+    color             : ${styles.appProperties.supportText_OppositeColor};
+  }
+  .input              {
+    word-break        : break-all;
+    outline           : none;
+    font-family       : monospace;
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+  .filter             {
+    ${styles.terminal.input_Search_MenuBar}
+    width                       : 200px;
+    padding-right               : 0px;
+    margin-right                : 0px;
+    border-top-left-radius      : 0px;
+    border-bottom-left-radius   : 0px;
+  }
+  .searchIcon {
+    background-color            : ${styles.colors.veryLightGrey};
+    color                       : ${styles.terminal.icon_Color_Menu};
+    height                      : 25px;
+    width                       : 25px;
+    border-top-left-radius      : 3px;
+    border-bottom-left-radius   : 3px;
+    display                     : flex;
+    align-items                 : center;
+    justify-content             : center;
+  }
+  .listen {
+    min-width         : 120px;
+    display           : flex;
+  }
+  .dragbarHorizontal  {
+    position          : absolute;
+    top               : 0;
+    height            : 0.5em;
+    right             : 0;
+    left              : 0;
+    cursor            : ns-resize;
+    z-index           : 999;
+    border-top        : 2px solid ${styles.terminal.bar_Dragging};
+  }
+  .ghostbar           {
+    position          : absolute;
+    height            : 6px;
+    background-color  : ${styles.terminal.bar_Ghost};
+    opacity           : 0.5;
+    cursor            : row-resize;
+    z-index           : 9999;
+    left              : 0;
+    right             : 0;
+  }
+`
+
+module.exports = css
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 914799689a..0095b96704 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -11,172 +11,11 @@ var Web3 = require('web3')
 var executionContext = require('../../execution-context')
 var Dropdown = require('../ui/dropdown')
 
-// -------------- styling ----------------------
 var csjs = require('csjs-inject')
-
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
 
-var css = csjs`
-  .panel              {
-    position          : relative;
-    display           : flex;
-    flex-direction    : column;
-    font-size         : 12px;
-    color             : ${styles.terminal.text_Regular_TransactionLog};
-    background-color  : ${styles.terminal.backgroundColor_Terminal};
-    height            : 100%;
-    min-height        : 1.7em;
-    overflow          : hidden;
-  }
-  .bar                {
-    display           : flex;
-    min-height        : 3em;
-    padding           : 2px;
-    background-color  : ${styles.terminal.backgroundColor_Menu};
-    z-index           : 3;
-  }
-  .menu               {
-    color             : ${styles.terminal.text_Primary};
-    position          : relative;
-    display           : flex;
-    align-items       : center;
-    width             : 100%;
-    padding           : 5px;
-  }
-  .clear           {
-    margin-left       : 10px;
-    margin-right      : 10px; 
-    width             : 10px;
-    cursor            : pointer;
-    color             : ${styles.terminal.icon_Color_TogglePanel};
-  }
-  .clear:hover              {
-    color             : ${styles.terminal.icon_HoverColor_Menu};
-  }
-  .toggleTerminal              {
-    margin-right      : 10px;
-    font-size         : 14px;
-    font-weight       : bold;
-    cursor            : pointer;
-    color             : ${styles.terminal.icon_Color_Menu};
-  }
-  .toggleTerminal:hover              {
-    color             : ${styles.terminal.icon_HoverColor_TogglePanel};
-  }
-  .terminal_container {
-    background-color  : ${styles.terminal.backgroundColor_Terminal};
-    display           : flex;
-    flex-direction    : column;
-    height            : 100%;
-    overflow-y        : auto;
-    font-family       : monospace;
-  }
-  .terminal_bg     {
-    display           : flex;
-    flex-direction    : column;
-    height            : 100%;
-    padding-left      : 5px;
-    padding-right     : 5px;
-    padding-bottom    : 3px;
-    overflow-y        : auto;
-    font-family       : monospace;
-    background-image  : ${styles.terminal.backgroundImage_Terminal};
-    opacity           : 0.1;
-    top               : 15%;
-    left              : 33%;
-    bottom            : 0;
-    right             : 0;
-    position          : absolute;
-    background-repeat : no-repeat;
-    background-size   : 45%;
-  }
-  .terminal    {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .journal            {
-    margin-top        : auto;
-    font-family       : monospace;
-  }
-  .block              {
-    word-break        : break-all;
-    white-space       : pre-wrap;
-    line-height       : 2ch;
-    margin            : 1ch;
-    margin-top        : 2ch;
-  }
-  .cli                {
-    line-height       : 1.7em;
-    font-family       : monospace;
-    background-color  : ${styles.terminal.backgroundColor_TerminalCLI};
-    padding           : .4em;
-    color             : ${styles.appProperties.mainText_Color};
-    border-top        : solid 2px ${styles.terminal.bar_Ghost};
-  }
-  .prompt             {
-    margin-right      : 0.5em;
-    font-family       : monospace;
-    font-weight       : bold;
-    font-size         : large;
-    color             : ${styles.appProperties.supportText_OppositeColor};
-  }
-  .input              {
-    word-break        : break-all;
-    outline           : none;
-    font-family       : monospace;
-  }
-  .search {
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-  }
-  .filter             {
-    ${styles.terminal.input_Search_MenuBar}
-    width                       : 200px;
-    padding-right               : 0px;
-    margin-right                : 0px;
-    border-top-left-radius      : 0px;
-    border-bottom-left-radius   : 0px;
-  }
-  .searchIcon {
-    background-color            : ${styles.colors.veryLightGrey};
-    color                       : ${styles.terminal.icon_Color_Menu};
-    height                      : 25px;
-    width                       : 25px;
-    border-top-left-radius      : 3px;
-    border-bottom-left-radius   : 3px;
-    display                     : flex;
-    align-items                 : center;
-    justify-content             : center;
-  }
-  .listen {
-    min-width         : 120px;
-    display           : flex;
-  }
-  .dragbarHorizontal  {
-    position          : absolute;
-    top               : 0;
-    height            : 0.5em;
-    right             : 0;
-    left              : 0;
-    cursor            : ns-resize;
-    z-index           : 999;
-    border-top        : 2px solid ${styles.terminal.bar_Dragging};
-  }
-  .ghostbar           {
-    position          : absolute;
-    height            : 6px;
-    background-color  : ${styles.terminal.bar_Ghost};
-    opacity           : 0.5;
-    cursor            : row-resize;
-    z-index           : 9999;
-    left              : 0;
-    right             : 0;
-  }
-`
+var css = require('./styles/terminal-styles')
 
 var KONSOLES = []
 
diff --git a/src/app/tabs/analysis-tab.js b/src/app/tabs/analysis-tab.js
index bf17e4037a..8042a42ab1 100644
--- a/src/app/tabs/analysis-tab.js
+++ b/src/app/tabs/analysis-tab.js
@@ -1,34 +1,7 @@
 var yo = require('yo-yo')
-var remixLib = require('remix-lib')
+var css = require('./styles/analysis-tab-styles')
 
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .analysisTabView {
-    padding: 2%;
-    padding-bottom: 3em;
-    display: flex;
-    flex-direction: column;
-  }
-  #staticanalysisView {
-    display: block;
-  }
-  .infoBox  {
-    ${styles.infoTextBox}
-    margin-bottom: 1em;
-  }
-  .textBox  {
-    ${styles.textBoxL}
-    margin-bottom: 1em;
-  }
-`
-
-module.exports = analysisTab
-
-function analysisTab (container, appAPI, events, opts) {
+function analysisTab (container) {
   var el = yo`
     <div class="${css.analysisTabView} "id="staticanalysisView">
     </div>
@@ -36,3 +9,5 @@ function analysisTab (container, appAPI, events, opts) {
   container.appendChild(el)
   return el
 }
+
+module.exports = analysisTab
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 7e801d9806..a1ab760ec0 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -1,6 +1,5 @@
 /* global */
 var $ = require('jquery')
-
 var yo = require('yo-yo')
 
 var parseContracts = require('../contract/contractParser')
@@ -9,153 +8,12 @@ var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
 var TreeView = require('remix-debugger').ui.TreeView
 var copyToClipboard = require('../ui/copy-to-clipboard')
-var remixLib = require('remix-lib')
 
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
+var css = require('./styles/compile-tab-styles')
+var remixLib = require('remix-lib')
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
 
-var css = csjs`
-  .compileTabView {
-    padding: 2%;
-  }
-  .contract {
-    display: block;
-    margin: 3% 0;
-  }
-  .compileContainer  {
-    ${styles.rightPanel.compileTab.box_CompileContainer};
-    margin-bottom: 2%;
-  }
-  .autocompileContainer {
-    width: 90px;
-    display: flex;
-    align-items: center;
-  }
-  .autocompile {}
-  .autocompileTitle {
-    font-weight: bold;
-    margin: 1% 0;
-  }
-  .autocompileText {
-    margin: 1% 0;
-    font-size: 12px;
-    overflow: hidden;
-    word-break: normal;
-    line-height: initial;
-  }
-  .warnCompilationSlow {
-    color: ${styles.rightPanel.compileTab.icon_WarnCompilation_Color};
-    margin-left: 1%;
-  }
-  .compileButtons {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  .name {
-    display: flex;
-  }
-  .size {
-    display: flex;
-  }
-  .compileButton {
-    ${styles.rightPanel.compileTab.button_Compile};
-    width: 120px;
-    min-width: 110px;
-    margin-right: 1%;
-    font-size: 12px;
-  }
-  .container {
-    ${styles.rightPanel.compileTab.box_CompileContainer};
-    margin: 0;
-    display: flex;
-    align-items: center;
-  }
-  .contractNames {
-    ${styles.rightPanel.compileTab.dropdown_CompileContract};
-    margin-right: 5%;
-  }
-  .contractButtons {
-    display: flex;
-    cursor: pointer;
-    justify-content: center;
-    text-align: center;
-  }
-  .details {
-    ${styles.rightPanel.compileTab.button_Details};
-  }
-  .publish {
-    ${styles.rightPanel.compileTab.button_Publish};
-    margin-left: 2%;
-    width: 120px;
-  }
-  .log {
-    ${styles.rightPanel.compileTab.box_CompileContainer};
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 5%;
-    overflow: visible;
-  }
-  .key {
-    margin-right: 5px;
-    color: ${styles.rightPanel.text_Primary};
-    text-transform: uppercase;
-    width: 100%;
-  }
-  .value {
-    display: flex;
-    width: 100%;
-    margin-top: 1.5%;
-  }
-  .questionMark {
-    margin-left: 2%;
-    cursor: pointer;
-    color: ${styles.rightPanel.icon_Color_TogglePanel};
-  }
-  .questionMark:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
-  }
-  .detailsJSON {
-    padding: 8px 0;
-    background-color: ${styles.rightPanel.modalDialog_BackgroundColor_Primary};
-    border: none;
-    color: ${styles.rightPanel.modalDialog_text_Secondary};
-  }
-  .icon {
-    margin-right: 3%;
-  }
-  .spinningIcon {
-    margin-right: .3em;
-    animation: spin 2s linear infinite;
-  }
-  .bouncingIcon {
-    margin-right: .3em;
-    animation: bounce 2s infinite;
-  }
-  @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-  }
-  @-webkit-keyframes bounce {
-  0% {
-    margin-bottom: 0;
-    color: ${styles.colors.transparent};
-  }
-  70% {
-    margin-bottom: 0;
-    color: ${styles.rightPanel.text_Secondary};
-  }
-  100% {
-    margin-bottom: 0;
-    color: ${styles.colors.transparent};
-  }
-}
-`
-
-module.exports = compileTab
-
 function compileTab (container, appAPI, appEvents, opts) {
   if (typeof container === 'string') container = document.querySelector(container)
   if (!container) throw new Error('no container given')
@@ -464,3 +322,5 @@ function detailsHelpSection () {
     'web3Deploy': 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
   }
 }
+
+module.exports = compileTab
diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index a0a03f6bdd..7d3b3e5947 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -1,22 +1,7 @@
 var yo = require('yo-yo')
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
+var css = require('./styles/debugger-tab-styles')
 
-var css = csjs`
-  .debuggerTabView {
-    padding: 2%;
-  }
-  .debugger {
-    margin-bottom: 1%;
-    ${styles.rightPanel.debuggerTab.box_Debugger}
-  }
-`
-
-module.exports = debuggerTab
-
-function debuggerTab (container, appAPI, events, opts) {
+function debuggerTab (container) {
   var el = yo`
     <div class="${css.debuggerTabView} "id="debugView">
       <div id="debugger" class="${css.debugger}"></div>
@@ -24,3 +9,5 @@ function debuggerTab (container, appAPI, events, opts) {
   container.appendChild(el)
   return el
 }
+
+module.exports = debuggerTab
diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js
index 62347ca7eb..74b4f31045 100644
--- a/src/app/tabs/plugin-tab.js
+++ b/src/app/tabs/plugin-tab.js
@@ -1,24 +1,7 @@
 var yo = require('yo-yo')
+var css = require('./styles/plugin-tab-styles')
 
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .pluginTabView {
-    height: 100%;
-    width: 100%;
-  }
-  
-  .iframe {
-    height: 100%;
-    width: 100%;
-    border: 0;
-  }
-`
-
-module.exports = plugintab
-
-function plugintab (container, appAPI, events, opts, url) {
+function plugintab (container, url) {
   var el = yo`
     <div class="${css.pluginTabView}" id="pluginView">
       <iframe class="${css.iframe}" src="${url}/index.html"></iframe>
@@ -26,3 +9,5 @@ function plugintab (container, appAPI, events, opts, url) {
   container.appendChild(el)
   return el
 }
+
+module.exports = plugintab
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index f7b2385671..c83e8f5743 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -12,204 +12,15 @@ var Recorder = require('../../recorder')
 var EventManager = require('remix-lib').EventManager
 var addTooltip = require('../ui/tooltip')
 
-// -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .runTabView {
-    padding: 2%;
-    display: flex;
-    flex-direction: column;
-  }
-  .settings {
-    ${styles.rightPanel.runTab.box_RunTab}
-    margin-bottom: 2%;
-    padding: 10px 15px 15px 15px;
-  }
-  .crow {
-    margin-top: .5em;
-    display: flex;
-    align-items: center;
-  }
-  .col1 {
-    width: 30%;
-    float: left;
-    align-self: center;
-  }
-  .col1_1 {
-    font-size: 12px;
-    width: 25%;
-    min-width: 75px;
-    float: left;
-    align-self: center;
-  }
-  .environment {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-  .col2 {
-    ${styles.rightPanel.runTab.input_RunTab}
-  }
-  .col2_1 {
-    ${styles.rightPanel.runTab.input_RunTab}
-    width: 165px;
-    min-width: 165px;
-  }
-  .col2_2 {
-    ${styles.rightPanel.runTab.dropdown_RunTab}
-    width: 82px;
-    min-width: 82px;
-  }
-  .select {
-    ${styles.rightPanel.runTab.dropdown_RunTab}
-    font-weight: normal;
-    min-width: 150px;
-  }
-  .instanceContainer {
-    display: flex;
-    flex-direction: column;
-    margin-top: 2%;
-    border: none;
-    text-align: center;
-  }
-  .pendingTxsContainer  {
-    ${styles.rightPanel.runTab.box_Instance}
-    display: flex;
-    flex-direction: column;
-    margin-top: 2%;
-    border: none;
-    text-align: center;
-  }
-  .container {
-    ${styles.rightPanel.runTab.box_RunTab}
-    margin-top: 2%;
-  }
-  .contractNames {
-    ${styles.rightPanel.runTab.dropdown_RunTab}
-    width: 100%;
-    border: 1px solid
-  }
-  .contractNamesError {
-    border: 1px solid ${styles.appProperties.errorText_Color}
-  }
-  .subcontainer {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-  }
-  .button {
-    display: flex;
-    align-items: center;
-    margin-top: 2%;
-  }
-  .transaction {
-    ${styles.rightPanel.runTab.button_transaction}
-  }
-  .atAddress {
-    ${styles.rightPanel.runTab.button_atAddress}
-  }
-  .create {
-    ${styles.rightPanel.runTab.button_Create}
-  }
-  .input {
-    ${styles.rightPanel.runTab.input_RunTab}
-  }
-  .noInstancesText {
-    ${styles.rightPanel.runTab.box_Instance}
-    font-style: italic;
-  }
-  .pendingTxsText {
-    ${styles.rightPanel.runTab.borderBox_Instance}
-    font-style: italic;
-  }
-  .item {
-    margin-right: 1em;
-    display: flex;
-    align-items: center;
-  }
-  .transact {
-    color: ${styles.colors.lightRed};
-    margin-right: .3em;
-  }
-  .payable {
-    color: ${styles.colors.red};
-    margin-right: .3em;
-  }
-  .call {
-    color: ${styles.colors.lightBlue};
-    margin-right: .3em;
-  }
-  .pendingContainer {
-    display: flex;
-    align-items: baseline;
-  }
-  .pending {
-    height: 25px;
-    text-align: center;
-    padding-left: 10px;
-    border-radius: 3px;
-    margin-left: 5px;
-  }
-  .icon {
-    font-size: 12px;
-    color: ${styles.rightPanel.runTab.icon_Color};
-    margin-left: 5px;
-  }
-  .icon:hover {
-    font-size: 12px;
-    color: ${styles.rightPanel.runTab.icon_HoverColor};
-  }
-  .errorIcon {
-    color: ${styles.appProperties.errorText_Color};
-    margin-left: 15px;
-  }
-  .failDesc {
-    color: ${styles.appProperties.errorText_Color};
-    padding-left: 10px;
-    display: inline;
-  }
-  .network {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    color: grey;
-    width: 100%;
-    height: 100%;
-    padding-right: 28px;
-    pointer-events: none;
-  }
-  .networkItem {
-    margin-right: 5px;
-  }
-  .clearinstance {
-    font-size: 20px;
-    cursor: pointer;
-    margin-right: 10px;
-  }
-  .transactionActions {
-    float: right;
-  }
-  .createAccount {
-    margin-left: 5px;
-    cursor: pointer;
-  }
-  .createAccount:hover   {
-    color: ${styles.colors.orange};
-  }
-`
-
-module.exports = runTab
+var css = require('./styles/run-tab-styles')
 
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
 var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
 
 var pendingTxsText = yo`<span></span>`
 
-function runTab (container, appAPI, appEvents, opts) {
+function runTab (container, appAPI, appEvents) {
   var events = new EventManager()
 
   var clearInstanceElement = yo`<i class="${css.clearinstance} fa fa-minus-square-o" title="Clear Instances List" aria-hidden="true"></i>`
@@ -630,3 +441,5 @@ function settings (container, appAPI, appEvents) {
 
   return el
 }
+
+module.exports = runTab
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index 1cfab7b5c2..17f9e6c7d5 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -5,85 +5,12 @@ var QueryParams = require('../../lib/query-params')
 var remixLib = require('remix-lib')
 var Storage = remixLib.Storage
 var styleGuide = remixLib.ui.themeChooser
-
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styles = styleGuide.chooser()
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 
-var css = csjs`
-  .settingsTabView {
-    padding: 2%;
-    display: flex;
-  }
-  .info {
-    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
-    margin-bottom: 1em;
-    word-break: break-word;
-  }
-  .title {
-    font-size: 1.1em;
-    font-weight: bold;
-    margin-bottom: 1em;
-  }
-  .crow {
-    display: flex;
-    overflow: auto;
-    clear: both;
-    padding: .2em;
-  }
-  .checkboxText {
-    font-weight: normal;
-  }
-  .crow label {
-    cursor:pointer;
-  }
-  .crowNoFlex {
-    overflow: auto;
-    clear: both;
-  }
-  .attention {
-    margin-bottom: 1em;
-    padding: .5em;
-    font-weight: bold;
-  }
-  .select {
-    font-weight: bold;
-    margin-top: 1em;
-    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
-  }
-  .heading {
-    margin-bottom: 0;
-  }
-  .explaination {
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
-  input {
-    margin-right: 5px;
-    cursor: pointer;
-  }
-  input[type=radio] {
-    margin-top: 2px;
-  }
-  .pluginTextArea {
-    font-family: unset;
-  }
-  .pluginLoad {
-    vertical-align: top;
-  }
-  i.warnIt {
-    color: ${styles.appProperties.warningText_Color};
-  }
-  .icon {
-    margin-right: .5em;
-  }
-}
-`
-module.exports = SettingsTab
+var css = require('./styles/settings-tab-styles')
 
-function SettingsTab (container, appAPI, appEvents, opts) {
+function SettingsTab (container, appAPI, appEvents) {
   if (typeof container === 'string') container = document.querySelector(container)
   if (!container) throw new Error('no container given')
 
@@ -305,3 +232,5 @@ function loadVersion (version, queryParams, appAPI, el) {
     setVersionText('(loading)', el)
   }
 }
+
+module.exports = SettingsTab
diff --git a/src/app/tabs/styles/analysis-tab-styles.js b/src/app/tabs/styles/analysis-tab-styles.js
new file mode 100644
index 0000000000..d99ceff421
--- /dev/null
+++ b/src/app/tabs/styles/analysis-tab-styles.js
@@ -0,0 +1,28 @@
+var remixLib = require('remix-lib')
+
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .analysisTabView {
+    padding: 2%;
+    padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
+  }
+  #staticanalysisView {
+    display: block;
+  }
+  .infoBox  {
+    ${styles.infoTextBox}
+    margin-bottom: 1em;
+  }
+  .textBox  {
+    ${styles.textBoxL}
+    margin-bottom: 1em;
+  }
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js
new file mode 100644
index 0000000000..e908b5c297
--- /dev/null
+++ b/src/app/tabs/styles/compile-tab-styles.js
@@ -0,0 +1,144 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .compileTabView {
+    padding: 2%;
+  }
+  .contract {
+    display: block;
+    margin: 3% 0;
+  }
+  .compileContainer  {
+    ${styles.rightPanel.compileTab.box_CompileContainer};
+    margin-bottom: 2%;
+  }
+  .autocompileContainer {
+    width: 90px;
+    display: flex;
+    align-items: center;
+  }
+  .autocompile {}
+  .autocompileTitle {
+    font-weight: bold;
+    margin: 1% 0;
+  }
+  .autocompileText {
+    margin: 1% 0;
+    font-size: 12px;
+    overflow: hidden;
+    word-break: normal;
+    line-height: initial;
+  }
+  .warnCompilationSlow {
+    color: ${styles.rightPanel.compileTab.icon_WarnCompilation_Color};
+    margin-left: 1%;
+  }
+  .compileButtons {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .name {
+    display: flex;
+  }
+  .size {
+    display: flex;
+  }
+  .compileButton {
+    ${styles.rightPanel.compileTab.button_Compile};
+    width: 120px;
+    min-width: 110px;
+    margin-right: 1%;
+    font-size: 12px;
+  }
+  .container {
+    ${styles.rightPanel.compileTab.box_CompileContainer};
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+  .contractNames {
+    ${styles.rightPanel.compileTab.dropdown_CompileContract};
+    margin-right: 5%;
+  }
+  .contractButtons {
+    display: flex;
+    cursor: pointer;
+    justify-content: center;
+    text-align: center;
+  }
+  .details {
+    ${styles.rightPanel.compileTab.button_Details};
+  }
+  .publish {
+    ${styles.rightPanel.compileTab.button_Publish};
+    margin-left: 2%;
+    width: 120px;
+  }
+  .log {
+    ${styles.rightPanel.compileTab.box_CompileContainer};
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 5%;
+    overflow: visible;
+  }
+  .key {
+    margin-right: 5px;
+    color: ${styles.rightPanel.text_Primary};
+    text-transform: uppercase;
+    width: 100%;
+  }
+  .value {
+    display: flex;
+    width: 100%;
+    margin-top: 1.5%;
+  }
+  .questionMark {
+    margin-left: 2%;
+    cursor: pointer;
+    color: ${styles.rightPanel.icon_Color_TogglePanel};
+  }
+  .questionMark:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
+  }
+  .detailsJSON {
+    padding: 8px 0;
+    background-color: ${styles.rightPanel.modalDialog_BackgroundColor_Primary};
+    border: none;
+    color: ${styles.rightPanel.modalDialog_text_Secondary};
+  }
+  .icon {
+    margin-right: 3%;
+  }
+  .spinningIcon {
+    margin-right: .3em;
+    animation: spin 2s linear infinite;
+  }
+  .bouncingIcon {
+    margin-right: .3em;
+    animation: bounce 2s infinite;
+  }
+  @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+  }
+  @-webkit-keyframes bounce {
+  0% {
+    margin-bottom: 0;
+    color: ${styles.colors.transparent};
+  }
+  70% {
+    margin-bottom: 0;
+    color: ${styles.rightPanel.text_Secondary};
+  }
+  100% {
+    margin-bottom: 0;
+    color: ${styles.colors.transparent};
+  }
+}
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/debugger-tab-styles.js b/src/app/tabs/styles/debugger-tab-styles.js
new file mode 100644
index 0000000000..966180a64f
--- /dev/null
+++ b/src/app/tabs/styles/debugger-tab-styles.js
@@ -0,0 +1,15 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .debuggerTabView {
+    padding: 2%;
+  }
+  .debugger {
+    margin-bottom: 1%;
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+  }
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/plugin-tab-styles.js b/src/app/tabs/styles/plugin-tab-styles.js
new file mode 100644
index 0000000000..3e22de4fa8
--- /dev/null
+++ b/src/app/tabs/styles/plugin-tab-styles.js
@@ -0,0 +1,16 @@
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .pluginTabView {
+    height: 100%;
+    width: 100%;
+  }
+  
+  .iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
new file mode 100644
index 0000000000..10e960f31a
--- /dev/null
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -0,0 +1,182 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .runTabView {
+    padding: 2%;
+    display: flex;
+    flex-direction: column;
+  }
+  .settings {
+    ${styles.rightPanel.runTab.box_RunTab}
+    margin-bottom: 2%;
+    padding: 10px 15px 15px 15px;
+  }
+  .crow {
+    margin-top: .5em;
+    display: flex;
+    align-items: center;
+  }
+  .col1 {
+    width: 30%;
+    float: left;
+    align-self: center;
+  }
+  .col1_1 {
+    font-size: 12px;
+    width: 25%;
+    min-width: 75px;
+    float: left;
+    align-self: center;
+  }
+  .environment {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  .col2 {
+    ${styles.rightPanel.runTab.input_RunTab}
+  }
+  .col2_1 {
+    ${styles.rightPanel.runTab.input_RunTab}
+    width: 165px;
+    min-width: 165px;
+  }
+  .col2_2 {
+    ${styles.rightPanel.runTab.dropdown_RunTab}
+    width: 82px;
+    min-width: 82px;
+  }
+  .select {
+    ${styles.rightPanel.runTab.dropdown_RunTab}
+    font-weight: normal;
+    min-width: 150px;
+  }
+  .instanceContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2%;
+    border: none;
+    text-align: center;
+  }
+  .pendingTxsContainer  {
+    ${styles.rightPanel.runTab.box_Instance}
+    display: flex;
+    flex-direction: column;
+    margin-top: 2%;
+    border: none;
+    text-align: center;
+  }
+  .container {
+    ${styles.rightPanel.runTab.box_RunTab}
+    margin-top: 2%;
+  }
+  .contractNames {
+    ${styles.rightPanel.runTab.dropdown_RunTab}
+    width: 100%;
+    border: 1px solid
+  }
+  .contractNamesError {
+    border: 1px solid ${styles.appProperties.errorText_Color}
+  }
+  .subcontainer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+  .button {
+    display: flex;
+    align-items: center;
+    margin-top: 2%;
+  }
+  .transaction {
+    ${styles.rightPanel.runTab.button_transaction}
+  }
+  .atAddress {
+    ${styles.rightPanel.runTab.button_atAddress}
+  }
+  .create {
+    ${styles.rightPanel.runTab.button_Create}
+  }
+  .input {
+    ${styles.rightPanel.runTab.input_RunTab}
+  }
+  .noInstancesText {
+    ${styles.rightPanel.runTab.box_Instance}
+    font-style: italic;
+  }
+  .pendingTxsText {
+    ${styles.rightPanel.runTab.borderBox_Instance}
+    font-style: italic;
+  }
+  .item {
+    margin-right: 1em;
+    display: flex;
+    align-items: center;
+  }
+  .transact {
+    color: ${styles.colors.lightRed};
+    margin-right: .3em;
+  }
+  .payable {
+    color: ${styles.colors.red};
+    margin-right: .3em;
+  }
+  .call {
+    color: ${styles.colors.lightBlue};
+    margin-right: .3em;
+  }
+  .pendingContainer {
+    display: flex;
+    align-items: baseline;
+  }
+  .pending {
+    height: 25px;
+    text-align: center;
+    padding-left: 10px;
+    border-radius: 3px;
+    margin-left: 5px;
+  }
+  .icon {
+    font-size: 12px;
+    color: ${styles.rightPanel.runTab.icon_Color};
+    margin-left: 5px;
+  }
+  .icon:hover {
+    font-size: 12px;
+    color: ${styles.rightPanel.runTab.icon_HoverColor};
+  }
+  .errorIcon {
+    color: ${styles.appProperties.errorText_Color};
+    margin-left: 15px;
+  }
+  .failDesc {
+    color: ${styles.appProperties.errorText_Color};
+    padding-left: 10px;
+    display: inline;
+  }
+  .network {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: absolute;
+    color: grey;
+    width: 100%;
+    height: 100%;
+    padding-right: 28px;
+    pointer-events: none;
+  }
+  .networkItem {
+    margin-right: 5px;
+  }
+  .clearinstance {
+    font-size: 20px;
+    cursor: pointer;
+    margin-right: 10px;
+  }
+  .transactionActions {
+    float: right;
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/settings-tab-styles.js b/src/app/tabs/styles/settings-tab-styles.js
new file mode 100644
index 0000000000..0ad0631794
--- /dev/null
+++ b/src/app/tabs/styles/settings-tab-styles.js
@@ -0,0 +1,76 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .settingsTabView {
+    padding: 2%;
+    display: flex;
+  }
+  .info {
+    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
+    margin-bottom: 1em;
+    word-break: break-word;
+  }
+  .title {
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-bottom: 1em;
+  }
+  .crow {
+    display: flex;
+    overflow: auto;
+    clear: both;
+    padding: .2em;
+  }
+  .checkboxText {
+    font-weight: normal;
+  }
+  .crow label {
+    cursor:pointer;
+  }
+  .crowNoFlex {
+    overflow: auto;
+    clear: both;
+  }
+  .attention {
+    margin-bottom: 1em;
+    padding: .5em;
+    font-weight: bold;
+  }
+  .select {
+    font-weight: bold;
+    margin-top: 1em;
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+  }
+  .heading {
+    margin-bottom: 0;
+  }
+  .explaination {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+  input {
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  input[type=radio] {
+    margin-top: 2px;
+  }
+  .pluginTextArea {
+    font-family: unset;
+  }
+  .pluginLoad {
+    vertical-align: top;
+  }
+  i.warnIt {
+    color: ${styles.appProperties.warningText_Color};
+  }
+  .icon {
+    margin-right: .5em;
+  }
+}
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/support-tab-styles.js b/src/app/tabs/styles/support-tab-styles.js
new file mode 100644
index 0000000000..36defdfe4a
--- /dev/null
+++ b/src/app/tabs/styles/support-tab-styles.js
@@ -0,0 +1,56 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .supportTabView {
+    height: 100vh;
+    padding: 2%;
+    padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat {
+    ${styles.rightPanel.supportTab.box_IframeContainer}
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 85%;
+    padding: 0;
+  }
+  .chatTitle {
+    height: 40px;
+    width: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15px;
+  }
+  .chatTitle:hover {
+    cursor: pointer;
+  }
+  .icon {
+    height: 70%;
+    margin-right: 2%;
+  }
+  .chatTitleText {
+    font-size: 17px;
+    font-weight: bold;
+  }
+  .chatTitleText {
+    opacity: 0.8;
+  }
+  .chatIframe {
+    width: 100%;
+    height: 100%;
+    transform: scale(0.9);
+    padding: 0;
+    border: none;
+  }
+  .infoBox {
+    ${styles.rightPanel.supportTab.box_SupportInfo}
+  }
+`
+
+module.exports = css
diff --git a/src/app/tabs/styles/tabbed-menu-styles.js b/src/app/tabs/styles/tabbed-menu-styles.js
new file mode 100644
index 0000000000..d1b6d76bdc
--- /dev/null
+++ b/src/app/tabs/styles/tabbed-menu-styles.js
@@ -0,0 +1,38 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  li.active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    color: ${styles.appProperties.mainText_Color}
+  }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Teriary}
+  }
+  .opts_li.active {
+    color: ${styles.rightPanel.text_Primary}
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
+  }
+`
+
+module.exports = css
diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index c3bfb49701..b7a3fb44cb 100644
--- a/src/app/tabs/support-tab.js
+++ b/src/app/tabs/support-tab.js
@@ -1,60 +1,6 @@
 var yo = require('yo-yo')
 
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .supportTabView {
-    height: 100vh;
-    padding: 2%;
-    padding-bottom: 3em;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .chat {
-    ${styles.rightPanel.supportTab.box_IframeContainer}
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 85%;
-    padding: 0;
-  }
-  .chatTitle {
-    height: 40px;
-    width: 90%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 15px;
-  }
-  .chatTitle:hover {
-    cursor: pointer;
-  }
-  .icon {
-    height: 70%;
-    margin-right: 2%;
-  }
-  .chatTitleText {
-    font-size: 17px;
-    font-weight: bold;
-  }
-  .chatTitleText {
-    opacity: 0.8;
-  }
-  .chatIframe {
-    width: 100%;
-    height: 100%;
-    transform: scale(0.9);
-    padding: 0;
-    border: none;
-  }
-  .infoBox {
-    ${styles.rightPanel.supportTab.box_SupportInfo}
-  }
-`
+var css = require('./styles/support-tab-styles')
 
 var infoText = yo`
   <div>
@@ -65,9 +11,7 @@ var infoText = yo`
   </div>
 `
 
-module.exports = supportTab
-
-function supportTab (container, appAPI, events, opts) {
+function supportTab (container) {
   var el = yo`
     <div class="${css.supportTabView} "id="supportView">
       <div>
@@ -90,3 +34,5 @@ function supportTab (container, appAPI, events, opts) {
 function openLink () {
   window.open('https://gitter.im/ethereum/remix')
 }
+
+module.exports = supportTab
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index f601086429..0bd7b31cda 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -1,47 +1,10 @@
 var yo = require('yo-yo')
-
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
 var helper = require('../../lib/helper')
 
-var css = csjs`
-  li.active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
-  }
-  .options {
-    float: left;
-    padding-top: 0.7em;
-    min-width: 60px;
-    font-size: 0.9em;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-  }
-  .opts {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .opts_li {
-    display: block;
-    font-weight: bold;
-    color: ${styles.rightPanel.text_Teriary}
-  }
-  .opts_li.active {
-    color: ${styles.rightPanel.text_Primary}
-  }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
-  }
-`
+var css = require('./styles/tabbed-menu-styles')
 
 class TabbedMenu {
-  constructor (tabView, api, events, opts) {
+  constructor (tabView, events) {
     var self = this
     this.tabView = tabView
     this.events = events