diff --git a/package.json b/package.json
index ba814dae9e..cc38bf6842 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "npm-run-all": "^4.0.2",
     "onchange": "^3.2.1",
     "remix-analyzer": "latest",
-    "remix-lib": "latest",
+    "remix-lib": "../remix/remix-lib",
     "remix-solidity": "latest",
     "remix-tests": "latest",
     "remixd": "git+https://github.com/ethereum/remixd.git",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "http-server": "0.9.0",
-    "remix-debug": "latest",
+    "remix-debug": "../remix/remix-debug",
     "remixd": "git+https://github.com/ethereum/remixd.git"
   },
   "repository": {
diff --git a/src/app/debugger/debugger.js b/src/app/debugger/debugger.js
index 96f6d06ec0..296fc0c9f3 100644
--- a/src/app/debugger/debugger.js
+++ b/src/app/debugger/debugger.js
@@ -1,5 +1,6 @@
 'use strict'
-var Ethdebugger = require('./remix-debugger/src/ui/Ethdebugger')
+var EthdebuggerUI = require('./remix-debugger/src/ui/EthdebuggerUI')
+var Ethdebugger = require('remix-debug').EthDebugger
 var remixLib = require('remix-lib')
 var executionContext = require('../../execution-context')
 var globlalRegistry = require('../../global/registry')
@@ -20,6 +21,7 @@ function Debugger (container, sourceHighlighter, localRegistry) {
   }
   this.debugger = new Ethdebugger(
     {
+      executionContext: executionContext,
       compilationResult: () => {
         var compilationResult = this._deps.compiler.lastCompilationResult
         if (compilationResult) {
@@ -28,8 +30,12 @@ function Debugger (container, sourceHighlighter, localRegistry) {
         return null
       }
     })
+  this.debugger_ui = new EthdebuggerUI({debugger: this.debugger})
   this.sourceMappingDecoder = new remixLib.SourceMappingDecoder()
-  container.appendChild(this.debugger.render())
+  //
+  // TODO: render doesn't exist anymore
+  container.appendChild(this.debugger_ui.render())
+  //
   this.isActive = false
 
   this.breakPointManager = new remixLib.code.BreakpointManager(this.debugger, (sourceLocation) => {
@@ -50,6 +56,7 @@ function Debugger (container, sourceHighlighter, localRegistry) {
   })
 
   executionContext.event.register('contextChanged', this, function (context) {
+    debugger;
     self.switchProvider(context)
   })
 
@@ -103,6 +110,7 @@ Debugger.prototype.debug = function (txHash) {
  * @param {Object} obj  - provider
  */
 Debugger.prototype.addProvider = function (type, obj) {
+  debugger;
   this.debugger.addProvider(type, obj)
 }
 
@@ -112,6 +120,7 @@ Debugger.prototype.addProvider = function (type, obj) {
  * @param {String} type - type/name of the provider to use
  */
 Debugger.prototype.switchProvider = function (type) {
+  debugger;
   this.debugger.switchProvider(type)
 }
 
diff --git a/src/app/debugger/remix-debugger/index.html b/src/app/debugger/remix-debugger/index.html
index 4c6c33cf4c..5e3f491a5d 100644
--- a/src/app/debugger/remix-debugger/index.html
+++ b/src/app/debugger/remix-debugger/index.html
@@ -10,7 +10,7 @@
         container.debugger = new window.remix.ui.Debugger()
         container.debugger.addProvider('INTERNAL')
         container.debugger.switchProvider('INTERNAL')
-        container.appendChild(container.debugger.render())
+        container.appendChild(container.debugger_ui.render())
       }
     </script>
     <div id="app"></div>
diff --git a/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js b/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js
new file mode 100644
index 0000000000..f6461b03f6
--- /dev/null
+++ b/src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js
@@ -0,0 +1,266 @@
+'use strict'
+var TxBrowser = require('./TxBrowser')
+var StepManager = require('./StepManager')
+var VmDebugger = require('./VmDebugger')
+
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+
+var remixLib = require('remix-lib')
+// var TraceManager = remixLib.trace.TraceManager
+var init = remixLib.init
+var executionContext = remixLib.execution.executionContext
+var EventManager = remixLib.EventManager
+// var Web3Providers = remixLib.vm.Web3Providers
+// var DummyProvider = remixLib.vm.DummyProvider
+// var CodeManager = remixLib.code.CodeManager
+
+// var remixDebug = require('remix-debug')
+// var SolidityProxy = remixDebug.SolidityDecoder.SolidityProxy
+// var InternalCallTree = remixDebug.SolidityDecoder.InternalCallTree
+
+var css = csjs`
+  .statusMessage {
+    margin-left: 15px;
+  }
+  .innerShift {
+    padding: 2px;
+    margin-left: 10px;
+  }
+`
+
+function EthdebuggerUI (opts) {
+  this.opts = opts || {}
+  this.debugger = opts.debugger
+
+  if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null }
+
+  var self = this
+  this.event = new EventManager()
+
+  this.currentStepIndex = -1
+  this.tx
+  this.statusMessage = ''
+
+  this.view
+
+  this.event.register('indexChanged', this, function (index) {
+    self.debugger.codeManager.resolveStep(index, self.tx)
+  })
+
+  executionContext.event.register('contextChanged', this, function() {
+    console.dir("== contextChanged!!");
+    self.updateWeb3Reference()
+  });
+
+  setTimeout(function() {
+    self.updateWeb3Reference()
+  }, 10000);
+
+  this.txBrowser = new TxBrowser(this)
+  this.txBrowser.event.register('newTxLoading', this, function () {
+    self.unLoad()
+  })
+  this.txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) {
+    console.dir('newTraceRequestd')
+    console.dir(arguments)
+    self.startDebugging(blockNumber, txIndex, tx)
+  })
+  this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
+    self.unLoad()
+  })
+  this.stepManager = new StepManager(this, this.debugger.traceManager)
+  this.stepManager.event.register('stepChanged', this, function (stepIndex) {
+    self.stepChanged(stepIndex)
+  })
+
+  this.debugger.codeManager.event.register('changed', this, (code, address, instIndex) => {
+    self.debugger.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.debugger.solidityProxy.contracts, (error, sourceLocation) => {
+      if (!error) {
+        self.event.trigger('sourceLocationChanged', [sourceLocation])
+      }
+    })
+  })
+}
+
+EthdebuggerUI.prototype.setManagers = function () {
+  // const self = this
+  // this.traceManager = new TraceManager({web3: this.web3})
+  // this.codeManager = new CodeManager(this.traceManager)
+  // this.solidityProxy = new SolidityProxy(this.traceManager, this.codeManager)
+  // this.storageResolver = null
+  // var callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
+  // this.callTree = callTree // TODO: currently used by browser solidity, we should improve the API
+  // this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager, this.solidityProxy, callTree)
+
+  // this.callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
+  // this.txBrowser = new TxBrowser(this)
+  // this.txBrowser.event.register('newTxLoading', this, function () {
+  //  self.unLoad()
+  // })
+  // this.txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) {
+  //  console.dir('newTraceRequestd')
+  //  console.dir(arguments)
+  //  self.startDebugging(blockNumber, txIndex, tx)
+  // })
+  // this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
+  //  self.unLoad()
+  // })
+  // this.stepManager = new StepManager(this, this.traceManager)
+  // this.stepManager.event.register('stepChanged', this, function (stepIndex) {
+  //  self.stepChanged(stepIndex)
+  // })
+  // this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager, this.solidityProxy, callTree)
+
+  // this.codeManager.event.register('changed', this, (code, address, instIndex) => {
+  //  this.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.solidityProxy.contracts, (error, sourceLocation) => {
+  //    if (!error) {
+  //      this.event.trigger('sourceLocationChanged', [sourceLocation])
+  //    }
+  //  })
+  // })
+}
+
+EthdebuggerUI.prototype.setBreakpointManager = function (breakpointManager) {
+  this.breakpointManager = breakpointManager
+}
+
+EthdebuggerUI.prototype.get_web3 = function () {
+  return this.web3
+}
+
+EthdebuggerUI.prototype.addProvider = function (type, obj) {
+  this.web3Providers.addProvider(type, obj)
+  this.event.trigger('providerAdded', [type])
+}
+
+EthdebuggerUI.prototype.updateWeb3Reference = function () {
+  debugger;
+  if (!this.txBrowser) return
+  this.txBrowser.web3 = this.debugger.web3
+}
+
+EthdebuggerUI.prototype.switchProvider = function (type) {
+  debugger;
+  var self = this
+  this.web3Providers.get(type, function (error, obj) {
+    debugger;
+    if (error) {
+      console.log('provider ' + type + ' not defined')
+    } else {
+      self.web3 = obj
+      //self.setManagers()
+      self.updateWeb3Reference()
+      executionContext.detectNetwork((error, network) => {
+        debugger;
+        if (error || !network) {
+          self.web3Debug = obj
+          self.web3 = obj
+        } else {
+          var webDebugNode = init.web3DebugNode(network.name)
+          self.web3Debug = !webDebugNode ? obj : webDebugNode
+          self.web3 = !webDebugNode ? obj : webDebugNode
+        }
+        self.updateWeb3Reference()
+      })
+      self.event.trigger('providerChanged', [type])
+    }
+  })
+}
+
+EthdebuggerUI.prototype.setCompilationResult = function (compilationResult) {
+  if (compilationResult && compilationResult.sources && compilationResult.contracts) {
+    this.debugger.solidityProxy.reset(compilationResult)
+  } else {
+    this.debugger.solidityProxy.reset({})
+  }
+}
+
+EthdebuggerUI.prototype.debug = function (tx) {
+  this.setCompilationResult(this.opts.compilationResult())
+  if (tx instanceof Object) {
+    this.txBrowser.load(tx.hash)
+  } else if (tx instanceof String) {
+    this.txBrowser.load(tx)
+  }
+}
+
+EthdebuggerUI.prototype.render = function () {
+  var view = yo`<div>
+        <div class="${css.innerShift}">
+          ${this.txBrowser.render()}
+          ${this.stepManager.render()}
+        </div>
+        <div class="${css.statusMessage}" >${this.statusMessage}</div>
+     </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+EthdebuggerUI.prototype.unLoad = function () {
+  // this.debugger.traceManager.init()
+  // this.debugger.codeManager.clear()
+  // this.debugger.stepManager.reset()
+  this.debugger.unLoad()
+  this.event.trigger('traceUnloaded')
+}
+
+EthdebuggerUI.prototype.stepChanged = function (stepIndex) {
+  this.currentStepIndex = stepIndex
+  this.event.trigger('indexChanged', [stepIndex])
+}
+
+EthdebuggerUI.prototype.startDebugging = function (blockNumber, txIndex, tx) {
+  const self = this;
+  console.dir('startDebugging')
+  console.dir(arguments)
+  if (this.debugger.traceManager.isLoading) {
+    return
+  }
+
+  this.statusMessage = 'Loading trace...'
+  yo.update(this.view, this.render())
+  console.log('loading trace...')
+  this.tx = tx
+  //this.tx.hash = txIndex
+
+  // this.debugger.setCompilationResult(this.opts.compilationResult())
+  // this.setCompilationResult(this.opts.compilationResult())
+
+  //this.debugger.addProvider('web3', executionContext.web3())
+  //this.debugger.switchProvider('web3')
+
+  this.vmDebugger = new VmDebugger(this, this.debugger.traceManager, this.debugger.codeManager, this.debugger.solidityProxy, this.debugger.callTree)
+
+  this.view.appendChild(this.vmDebugger.render())
+
+  this.debugger.debug(tx)
+
+  //console.dir(this.vmDebugger.render())
+  //console.dir(this.view)
+
+  self.debugger.event.register('newTraceLoaded', function () {
+    // self.
+  })
+
+  console.dir('resolving a trace with tx: ')
+  console.dir(tx)
+  //this.debugger.traceManager.resolveTrace(tx, function (error, result) {
+  //  console.log('trace loaded ' + result)
+  //  if (result) {
+  //    self.statusMessage = ''
+  //    yo.update(self.view, self.render())
+  //    self.debugger.event.trigger('newTraceLoaded', [self.debugger.traceManager.trace])
+  //    // if (self.breakpointManager && self.breakpointManager.hasBreakpoint()) {
+  //    //  self.breakpointManager.jumpNextBreakpoint(0, false)
+  //    // }
+  //  } else {
+  //    self.statusMessage = error ? error.message : 'Trace not loaded'
+  //    yo.update(self.view, self.render())
+  //  }
+  //})
+}
+
+module.exports = EthdebuggerUI
diff --git a/src/app/debugger/remix-debugger/src/ui/FullStoragesChanges.js b/src/app/debugger/remix-debugger/src/ui/FullStoragesChanges.js
index 0c2dabd7ce..7051efac05 100644
--- a/src/app/debugger/remix-debugger/src/ui/FullStoragesChanges.js
+++ b/src/app/debugger/remix-debugger/src/ui/FullStoragesChanges.js
@@ -7,6 +7,7 @@ var yo = require('yo-yo')
 function FullStoragesChanges (_parent, _traceManager) {
   this.storageResolver = null
   this.parent = _parent
+  this.debugger = _parent.debugger
   this.traceManager = _traceManager
   this.addresses = []
   this.view
@@ -25,7 +26,7 @@ FullStoragesChanges.prototype.render = function () {
 
 FullStoragesChanges.prototype.init = function () {
   var self = this
-  this.parent.event.register('newTraceLoaded', this, function (length) {
+  this.debugger.event.register('newTraceLoaded', this, function (length) {
     self.panels = []
     self.traceManager.getAddresses(function (error, addresses) {
       if (!error) {
@@ -41,7 +42,7 @@ FullStoragesChanges.prototype.init = function () {
     })
   })
 
-  this.parent.event.register('indexChanged', this, function (index) {
+  this.debugger.event.register('indexChanged', this, function (index) {
     if (index < 0) return
     if (self.parent.currentStepIndex !== index) return
     if (!self.storageResolver) return
diff --git a/src/app/debugger/remix-debugger/src/ui/StepManager.js b/src/app/debugger/remix-debugger/src/ui/StepManager.js
index 2dc218986d..9f65feade2 100644
--- a/src/app/debugger/remix-debugger/src/ui/StepManager.js
+++ b/src/app/debugger/remix-debugger/src/ui/StepManager.js
@@ -8,7 +8,7 @@ var util = remixLib.util
 
 function StepManager (_parent, _traceManager) {
   this.event = new EventManager()
-  this.parent = _parent
+  this.parent = _parent.debugger
   this.traceManager = _traceManager
   this.sourceMapByAddress = {}
   this.solidityMode = false
diff --git a/src/app/debugger/remix-debugger/src/ui/TxBrowser.js b/src/app/debugger/remix-debugger/src/ui/TxBrowser.js
index 0ea2aa1aa1..f2ec323364 100644
--- a/src/app/debugger/remix-debugger/src/ui/TxBrowser.js
+++ b/src/app/debugger/remix-debugger/src/ui/TxBrowser.js
@@ -49,6 +49,7 @@ function TxBrowser (_parent) {
   this.txNumber
   this.view
   this.displayConnectionSetting = true
+  this.web3 = _parent.debugger.web3
   var self = this
   _parent.event.register('providerChanged', this, function (provider) {
     self.displayConnectionSetting = provider === 'INTERNAL'
diff --git a/src/app/debugger/remix-debugger/src/ui/VmDebugger.js b/src/app/debugger/remix-debugger/src/ui/VmDebugger.js
index b15219a076..1e73e5ea92 100644
--- a/src/app/debugger/remix-debugger/src/ui/VmDebugger.js
+++ b/src/app/debugger/remix-debugger/src/ui/VmDebugger.js
@@ -11,8 +11,8 @@ var StepDetail = require('./StepDetail')
 var DropdownPanel = require('./DropdownPanel')
 var SolidityState = require('./SolidityState')
 var SolidityLocals = require('./SolidityLocals')
-var remixLib = require('remix-lib')
-var StorageResolver = remixLib.Storage.StorageResolver
+var remixDebug = require('remix-debug')
+var StorageResolver = remixDebug.storage.StorageResolver
 var yo = require('yo-yo')
 
 var css = csjs`
@@ -25,7 +25,9 @@ var css = csjs`
   }
 `
 
-function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _callTree) {
+function VmDebugger (_parentUI, _traceManager, _codeManager, _solidityProxy, _callTree) {
+  let _parent = _parentUI.debugger
+
   this.asmCode = new CodeListView(_parent, _codeManager)
   this.stackPanel = new StackPanel(_parent, _traceManager)
   this.storagePanel = new StoragePanel(_parent, _traceManager)
@@ -39,24 +41,24 @@ function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _call
   /* Return values - */
   this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})
   this.returnValuesPanel.data = {}
-  _parent.event.register('indexChanged', this.returnValuesPanel, function (index) {
+  _parentUI.event.register('indexChanged', this.returnValuesPanel, function (index) {
     var self = this
     _traceManager.getReturnValue(index, function (error, returnValue) {
       if (error) {
         self.update([error])
-      } else if (_parent.currentStepIndex === index) {
+      } else if (_parentUI.currentStepIndex === index) {
         self.update([returnValue])
       }
     })
   })
   /* Return values - */
 
-  this.fullStoragesChangesPanel = new FullStoragesChangesPanel(_parent, _traceManager)
+  this.fullStoragesChangesPanel = new FullStoragesChangesPanel(_parentUI, _traceManager)
 
   this.view
   var self = this
   _parent.event.register('newTraceLoaded', this, function () {
-    var storageResolver = new StorageResolver()
+    var storageResolver = new StorageResolver({web3: _parent.web3})
     self.storagePanel.storageResolver = storageResolver
     self.solidityState.storageResolver = storageResolver
     self.solidityLocals.storageResolver = storageResolver