diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
index 90267a78d3..3b09d72e68 100644
--- a/assets/css/browser-solidity.css
+++ b/assets/css/browser-solidity.css
@@ -487,3 +487,7 @@ input[type="file"] {
     background-color:#F4B9B7;
     opacity: 0.5;
 }
+
+.ace_gutter-cell.ace_breakpoint{ 
+    background-color: #F77E79;
+}
diff --git a/src/app/debugger.js b/src/app/debugger.js
index 1a12d231a1..50690a4dbe 100644
--- a/src/app/debugger.js
+++ b/src/app/debugger.js
@@ -12,7 +12,27 @@ function Debugger (id, appAPI, executionContextEvent, editorEvent) {
   this.el.appendChild(this.debugger.render())
   this.appAPI = appAPI
 
+  this.breakPointManager = new remix.code.BreakpointManager(this.debugger, (sourceLocation) => {
+    return appAPI.offsetToLineColumn(sourceLocation, sourceLocation.file, this.editor, this.appAPI.lastCompilationResult().data)
+  })
+
+  this.debugger.setBreakpointManager(this.breakPointManager)
+  this.breakPointManager.event.register('breakpointHit', (sourceLocation) => {
+  })
+
   var self = this
+  editorEvent.register('breakpointCleared', (fileName, row) => {
+    if (self.appAPI.lastCompilationResult().data) {
+      this.breakPointManager.remove({fileName: fileName, row: row})
+    }
+  })
+
+  editorEvent.register('breakpointAdded', (fileName, row) => {
+    if (self.appAPI.lastCompilationResult().data) {
+      this.breakPointManager.add({fileName: fileName, row: row})
+    }
+  })
+
   executionContextEvent.register('contextChanged', this, function (context) {
     self.switchProvider(context)
   })
diff --git a/src/app/editor.js b/src/app/editor.js
index f92f07fdf4..ee500b60b4 100644
--- a/src/app/editor.js
+++ b/src/app/editor.js
@@ -18,6 +18,31 @@ function Editor () {
 
   var emptySession = createSession('')
 
+  var self = this
+  editor.on('guttermousedown', function (e) {
+    var target = e.domEvent.target
+    if (target.className.indexOf('ace_gutter-cell') === -1) {
+      return
+    }
+    var row = e.getDocumentPosition().row
+    var breakpoints = e.editor.session.getBreakpoints()
+    for (var k in breakpoints) {
+      if (k === row.toString()) {
+        event.trigger('breakpointCleared', [currentSession, row])
+        e.editor.session.clearBreakpoint(row)
+        e.stop()
+        return
+      }
+    }
+    self.setBreakpoint(row)
+    event.trigger('breakpointAdded', [currentSession, row])
+    e.stop()
+  })
+
+  this.setBreakpoint = function (row, css) {
+    editor.session.setBreakpoint(row, css)
+  }
+
   function createSession (content) {
     var s = new ace.EditSession(content, 'ace/mode/javascript')
     s.setUndoManager(new ace.UndoManager())
diff --git a/test-browser/helpers/contracts.js b/test-browser/helpers/contracts.js
index 9d687437a8..a4aa2ef2ab 100644
--- a/test-browser/helpers/contracts.js
+++ b/test-browser/helpers/contracts.js
@@ -21,7 +21,7 @@ function testContracts (browser, contractCode, compiledContractNames, callback)
       .clearValue('#input textarea')
       .click('.newFile')
       .setValue('#input textarea', contractCode, function () {})
-      .waitForElementPresent('.contract .create', 2000, true, function () {
+      .waitForElementPresent('.contract .create', 5000, true, function () {
         checkCompiledContracts(browser, compiledContractNames, callback)
       })
 }