diff --git a/src/app/tabs/debugger/debuggerUI/VmDebugger.js b/src/app/tabs/debugger/debuggerUI/VmDebugger.js
index 7c1ef392ba..c418cc9f77 100644
--- a/src/app/tabs/debugger/debuggerUI/VmDebugger.js
+++ b/src/app/tabs/debugger/debuggerUI/VmDebugger.js
@@ -123,12 +123,14 @@ function VmDebugger (vmDebuggerLogic) {
 }
 
 VmDebugger.prototype.renderHead = function () {
-  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>`
+  const 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) {
     this.headView = headView
   }
@@ -141,19 +143,21 @@ VmDebugger.prototype.remove = function () {
 }
 
 VmDebugger.prototype.render = function () {
-  var view = yo`<div id='vmdebugger'>
-        <div>
-            ${this.solidityLocals.render()}
-            ${this.solidityState.render()}
-            ${this.stackPanel.render()}
-            ${this.memoryPanel.render()}
-            ${this.storagePanel.render()}
-            ${this.callstackPanel.render()}
-            ${this.calldataPanel.render()}
-            ${this.returnValuesPanel.render()}
-            ${this.fullStoragesChangesPanel.render()}
-          </div>
-      </div>`
+  const view = yo`
+    <div id="vmdebugger">
+      <div>
+        ${this.solidityLocals.render()}
+        ${this.solidityState.render()}
+        ${this.stackPanel.render()}
+        ${this.memoryPanel.render()}
+        ${this.storagePanel.render()}
+        ${this.callstackPanel.render()}
+        ${this.calldataPanel.render()}
+        ${this.returnValuesPanel.render()}
+        ${this.fullStoragesChangesPanel.render()}
+      </div>
+    </div>
+  `
   if (!this.view) {
     this.view = view
   }
diff --git a/src/app/tabs/debugger/debuggerUI/vmDebugger/MemoryPanel.js b/src/app/tabs/debugger/debuggerUI/vmDebugger/MemoryPanel.js
index 02b3fba41a..e526285076 100644
--- a/src/app/tabs/debugger/debuggerUI/vmDebugger/MemoryPanel.js
+++ b/src/app/tabs/debugger/debuggerUI/vmDebugger/MemoryPanel.js
@@ -15,7 +15,7 @@ MemoryPanel.prototype.update = function (calldata) {
 }
 
 MemoryPanel.prototype.render = function () {
-  return yo`<div id='memorypanel' >${this.basicPanel.render()}</div>`
+  return yo`<div id="memorypanel" class="text-monospace small">${this.basicPanel.render()}</div>`
 }
 
 module.exports = MemoryPanel
diff --git a/src/app/tabs/debugger/debuggerUI/vmDebugger/StackPanel.js b/src/app/tabs/debugger/debuggerUI/vmDebugger/StackPanel.js
index f81a94d8d3..5dadc3a75b 100644
--- a/src/app/tabs/debugger/debuggerUI/vmDebugger/StackPanel.js
+++ b/src/app/tabs/debugger/debuggerUI/vmDebugger/StackPanel.js
@@ -11,7 +11,7 @@ StackPanel.prototype.update = function (calldata) {
 }
 
 StackPanel.prototype.render = function () {
-  return yo`<div id='stackpanel' >${this.basicPanel.render()}</div>`
+  return yo`<div id="stackpanel" class="text-monospace small">${this.basicPanel.render()}</div>`
 }
 
 module.exports = StackPanel
diff --git a/src/app/tabs/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter.js b/src/app/tabs/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter.js
index bac26125f6..249ca56e48 100644
--- a/src/app/tabs/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter.js
+++ b/src/app/tabs/debugger/debuggerUI/vmDebugger/utils/SolidityTypeFormatter.js
@@ -7,8 +7,8 @@ module.exports = {
 }
 
 function formatSelf (key, data) {
-  var style = fontColor(data)
-  var keyStyle = data.isProperty ? 'color:#847979' : ''
+  const style = fontColor(data)
+  const keyStyle = data.isProperty ? 'color: var(--info)' : ''
   if (data.type === 'string') {
     data.self = JSON.stringify(data.self)
   }
@@ -55,16 +55,20 @@ function extractData (item, parent, key) {
 }
 
 function fontColor (data) {
-  var color = '#124B46'
+  let color = 'var(--primary)'
   if (data.isArray || data.isStruct || data.isMapping) {
-    color = '#847979'
-  } else if (data.type.indexOf('uint') === 0 ||
-              data.type.indexOf('int') === 0 ||
-              data.type.indexOf('bool') === 0 ||
-              data.type.indexOf('enum') === 0) {
-    color = '#0F0CE9'
+    color = 'var(--info)'
+  } else if (
+    data.type.indexOf('uint') === 0 ||
+    data.type.indexOf('int') === 0 ||
+    data.type.indexOf('bool') === 0 ||
+    data.type.indexOf('enum') === 0
+  ) {
+    color = 'var(--green)'
   } else if (data.type === 'string') {
-    color = '#E91E0C'
+    color = 'var(--teal)'
+  } else if (data.self == 0x0) { // eslint-disable-line
+    color = 'var(--gray)'
   }
   return 'color:' + color
 }