diff --git a/src/app/debugger/debuggerUI/ButtonNavigator.js b/src/app/debugger/debuggerUI/ButtonNavigator.js
index 86719dc41b..ab93272492 100644
--- a/src/app/debugger/debuggerUI/ButtonNavigator.js
+++ b/src/app/debugger/debuggerUI/ButtonNavigator.js
@@ -3,8 +3,6 @@ var EventManager = require('../../../lib/events')
 var yo = require('yo-yo')
 
 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .buttons {
@@ -17,7 +15,6 @@ var css = csjs`
     justify-content: center;
   }
   .stepButton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .jumpButtons {
     width: 100%;
@@ -25,13 +22,10 @@ var css = csjs`
     justify-content: center;
   }
   .jumpButton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .navigator {
-    color: ${styles.rightPanel.debuggerTab.text_Primary};
   }
   .navigator:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
 `
 
@@ -51,20 +45,20 @@ function ButtonNavigator () {
 ButtonNavigator.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.buttons}">
-    <div class="${css.stepButtons}">
-      <button id='overback' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
-      <button id='intoback' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
-      <button id='intoforward' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
-      <button id='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
+    <div class="${css.stepButtons} btn-group p-1">
+      <button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
+      <button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
+      <button id='intoforward' class='btn btn-primary btn-sm' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
+      <button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
     </div>
 
-    <div class="${css.jumpButtons}">
-      <button id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
-      <button id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
-      <button id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
+    <div class="${css.jumpButtons} btn-group p-1">
+      <button class='btn btn-primary btn-sm'  id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
     </div>
     <div id='reverted' style="display:none">
-      <button id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
+      <button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
       </button>
       <span>State changes made during this call will be reverted.</span>
       <span id='outofgas' style="display:none">This call will run out of gas.</span>
diff --git a/src/app/debugger/debuggerUI/TxBrowser.js b/src/app/debugger/debuggerUI/TxBrowser.js
index 382775b1cc..831b185acc 100644
--- a/src/app/debugger/debuggerUI/TxBrowser.js
+++ b/src/app/debugger/debuggerUI/TxBrowser.js
@@ -1,8 +1,6 @@
 var EventManager = require('../../../lib/events')
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .container {
@@ -19,7 +17,6 @@ var css = csjs`
     justify-content: center;
   }
   .txinput {
-    ${styles.rightPanel.debuggerTab.input_Debugger}
     margin: 3px;
     width: inherit;
   }
@@ -29,14 +26,11 @@ var css = csjs`
     justify-content: center;
   }
   .txbutton {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
     width: inherit;
   }
   .txbuttonstart {
-    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .txbutton:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
   .vmargin {
     margin-top: 10px;
@@ -99,13 +93,13 @@ TxBrowser.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.container}">
         <div class="${css.txContainer}">
-          <div class="${css.txinputs}">
-            <input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
-            <input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
+          <div class="${css.txinputs} p-1 input-group">
+            <input class="form-control" class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
+            <input class="form-control" class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
           </div>
-          <div class="${css.txbuttons}">
-            <button id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
-            <button id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
+          <div class="${css.txbuttons} btn-group p-1">
+            <button class='btn btn-primary btn-sm' id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
+            <button class='btn btn-primary btn-sm' id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
           </div>
         </div>
         <span id='error'></span>
diff --git a/src/app/debugger/debuggerUI/VmDebugger.js b/src/app/debugger/debuggerUI/VmDebugger.js
index 13a9f5907f..46c1e8f734 100644
--- a/src/app/debugger/debuggerUI/VmDebugger.js
+++ b/src/app/debugger/debuggerUI/VmDebugger.js
@@ -16,8 +16,6 @@ var DropdownPanel = require('./vmDebugger/DropdownPanel')
 
 var css = csjs`
   .asmCode {
-    float: left;
-    width: 50%;
   }
   .stepDetail {
   }
@@ -123,10 +121,10 @@ function VmDebugger (vmDebuggerLogic) {
 }
 
 VmDebugger.prototype.renderHead = function () {
-  var headView = yo`<div id='vmheadView' class=${css.vmheadView}>
-        <div>
-          <div class=${css.asmCode}>${this.asmCode.render()}</div>
-          <div class=${css.stepDetail}>${this.stepDetail.render()}</div>
+  var headView = yo`<div id='vmheadView' class="${css.vmheadView} container">
+        <div class="row" >
+          <div class="${css.asmCode} column">${this.asmCode.render()}</div>
+          <div class="${css.stepDetail} column">${this.stepDetail.render()}</div>
         </div>
       </div>`
   if (!this.headView) {
diff --git a/src/app/debugger/debuggerUI/vmDebugger/CodeListView.js b/src/app/debugger/debuggerUI/vmDebugger/CodeListView.js
index 76f3cc0f34..bafaf55b7a 100644
--- a/src/app/debugger/debuggerUI/vmDebugger/CodeListView.js
+++ b/src/app/debugger/debuggerUI/vmDebugger/CodeListView.js
@@ -4,12 +4,9 @@ var yo = require('yo-yo')
 var DropdownPanel = require('./DropdownPanel')
 var EventManager = require('../../../../lib/events')
 var csjs = require('csjs-inject')
-var styleGuide = require('../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .instructions {
-    ${styles.rightPanel.debuggerTab.box_Debugger}
     overflow-y: scroll;
     max-height: 150px;
   }
@@ -43,7 +40,6 @@ CodeListView.prototype.indexChanged = function (index) {
     }
   }
   this.itemSelected = this.codeView.children[index]
-  this.itemSelected.setAttribute('style', 'background-color: ' + styles.rightPanel.debuggerTab.text_BgHighlight)
   this.itemSelected.setAttribute('selected', 'selected')
   if (this.itemSelected.firstChild) {
     this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')
diff --git a/src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js b/src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js
index 282a5bd34d..254488cc2e 100644
--- a/src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js
+++ b/src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js
@@ -5,13 +5,9 @@ var EventManager = require('../../../../lib/events')
 var TreeView = require('../../../ui/TreeView') // TODO setup a direct reference to the UI components
 
 var csjs = require('csjs-inject')
-var styleGuide = require('../../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .title {
-    margin-top: 10px;
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
     display: flex;
     align-items: center;
   }
@@ -23,17 +19,14 @@ var css = csjs`
     margin-left: 3px;
   }
   .icon {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
     margin-right: 5%;
   }
   .eyeButton {
     margin: 3px;
   }
   .eyeButton:hover {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
   .dropdownpanel {
-    ${styles.rightPanel.debuggerTab.dropdown_Debugger};
     width: 100%;
   }
   .dropdownrawcontent {
@@ -85,14 +78,12 @@ DropdownPanel.prototype.setLoading = function () {
 
 DropdownPanel.prototype.setUpdating = function () {
   if (!this.view) return
-  this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.greyedText_color
 }
 
 DropdownPanel.prototype.update = function (_data, _header) {
   if (!this.view) return
   this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
   this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
-  this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.mainText_Color
   this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
   if (!this.displayContentOnly) {
     this.view.querySelector('.title div.btn').style.display = 'block'
@@ -130,7 +121,7 @@ DropdownPanel.prototype.render = function (overridestyle) {
       <div class='message' style='display:none'></div>
     </div>`
   var view = yo`
-    <div>
+    <div class="border border-primary rounded p-1 m-1 bg-light">
     <style>
       @-moz-keyframes spin {
         to { -moz-transform: rotate(359deg); }