diff --git a/static/application.css b/static/application.css
index db14a59..063e63a 100644
--- a/static/application.css
+++ b/static/application.css
@@ -36,6 +36,27 @@ textarea {
 	user-select: none;
 }
 
+.highlight {
+	background-color: rgba(187, 128, 9, 0.25);
+	position: absolute;
+	width: 100%;
+	height: 16px;
+}
+
+.linenumber {
+	color: #3D3F41;
+	z-index: 1000;
+	text-decoration:none;
+	position: absolute;
+	top: 20px;
+	left: 0px;
+	width: 30px; /* 30 to get 20 away from box */
+	font-size: 13px;
+	font-family: monospace;
+	text-align: right;
+	user-select: none;
+}
+
 /* code box when locked */
 
 #box {
diff --git a/static/application.js b/static/application.js
index d4028ca..17d56c4 100644
--- a/static/application.js
+++ b/static/application.js
@@ -170,16 +170,44 @@ haste.prototype.lookupTypeByExtension = function(ext) {
 // Add line numbers to the document
 // For the specified number of lines
 haste.prototype.addLineNumbers = function(lineCount) {
-  var h = '';
+  removeElementsByClass('linenumber');
   for (var i = 0; i < lineCount; i++) {
-    h += (i + 1).toString() + '<br/>';
+    let div = document.createElement('a');
+    div.classList.add('linenumber');
+    div.style.marginTop = i * 16 + 'px';
+    let line = i + 1;
+    div.href = '#' + line;
+    div.onclick = function() {
+        var box = document.getElementById("box");
+        // create highlight div
+        removeElementsByClass('highlight');
+        let highlight = document.createElement('div');
+        highlight.classList.add('highlight');
+        highlight.style.marginTop = ((line - 1) * 16) + 'px';
+        box.insertBefore(highlight, box.firstChild);
+    }
+    let text = document.createTextNode(line.toString());
+    div.appendChild(text);
+    document.body.appendChild(div)
   }
-  $('#linenos').html(h);
 };
 
+function removeElementsByClass(className){
+  const elements = document.getElementsByClassName(className);
+  while(elements.length > 0){
+    elements[0].parentNode.removeChild(elements[0]);
+  }
+}
+
 // Remove the line numbers
 haste.prototype.removeLineNumbers = function() {
-  $('#linenos').html('&gt;');
+  removeElementsByClass("highlight");
+  removeElementsByClass('linenumber');
+  let div = document.createElement('a');
+  div.classList.add('linenumber');
+  let text = document.createTextNode('>');
+  div.appendChild(text);
+  document.body.appendChild(div)
 };
 
 // Load a document and show it
diff --git a/static/application.min.js b/static/application.min.js
index b887887..052c5a9 100644
--- a/static/application.min.js
+++ b/static/application.min.js
@@ -1 +1 @@
-const workersUrl="https://api.knx.cool/";var haste_document=function(){this.locked=!1};haste_document.prototype.htmlEscape=function(t){return t.replace(/&/g,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;").replace(/"/g,"&quot;")},haste_document.prototype.load=function(t,e,o){var n=this;$.ajax(workersUrl+t,{type:"get",dataType:"json",success:function(s){n.locked=!0,n.key=t,n.data=s.data,e({value:n.data,key:t,language:o,lineCount:n.data.split("\n").length})},error:function(t,o,n){e(!1)}})},haste_document.prototype.save=function(t,e){if(this.locked)return!1;this.data=t;var o=this;$.ajax(workersUrl+"documents",{type:"put",data:t,dataType:"json",contentType:"text/plain; charset=utf-8",success:function(n){o.locked=!0,o.key=n.key,e(null,{value:t,key:n.key,language:null,lineCount:t.split("\n").length})},error:function(t){try{e($.parseJSON(t.responseText))}catch(t){e({message:"Something went wrong!"})}}})};var haste=function(t,e){this.appName=t,this.$textarea=$("textarea"),this.$box=$("#box"),this.$code=$("#box code"),this.$linenos=$("#linenos"),this.options=e,this.configureShortcuts(),this.configureButtons()};haste.prototype.setTitle=function(t){var e=t?this.appName+" - "+t:this.appName;document.title=e},haste.prototype.showMessage=function(t,e){var o=$('<li class="'+(e||"info")+'">'+t+"</li>");$("#messages").prepend(o),setTimeout(function(){o.slideUp("fast",function(){$(this).remove()})},3e3)},haste.prototype.lightKey=function(){this.configureKey(["new","save"])},haste.prototype.fullKey=function(){this.configureKey(["new","duplicate","raw"])},haste.prototype.configureKey=function(t){var e,o=0;$("#box2 .function").each(function(){for(e=$(this),o=0;o<t.length;o++)if(e.hasClass(t[o]))return e.addClass("enabled"),!0;e.removeClass("enabled")})},haste.prototype.newDocument=function(t){this.$box.hide(),this.doc=new haste_document,this.setTitle(),this.lightKey(),this.$textarea.val("").show("fast",function(){this.focus()}),this.removeLineNumbers()},haste.extensionMap={rb:"ruby",py:"python",pl:"perl",php:"php",scala:"scala",go:"go",xml:"xml",html:"xml",htm:"xml",css:"css",js:"javascript",vbs:"vbscript",lua:"lua",pas:"delphi",java:"java",cpp:"cpp",cc:"cpp",m:"objectivec",vala:"vala",sql:"sql",sm:"smalltalk",lisp:"lisp",ini:"ini",diff:"diff",bash:"bash",sh:"bash",tex:"tex",erl:"erlang",hs:"haskell",md:"markdown",txt:"",coffee:"coffee",swift:"swift"},haste.prototype.lookupExtensionByType=function(t){for(var e in haste.extensionMap)if(haste.extensionMap[e]===t)return e;return t},haste.prototype.lookupTypeByExtension=function(t){return haste.extensionMap[t]||t},haste.prototype.addLineNumbers=function(t){for(var e="",o=0;o<t;o++)e+=(o+1).toString()+"<br/>";$("#linenos").html(e)},haste.prototype.removeLineNumbers=function(){$("#linenos").html("&gt;")},haste.prototype.loadDocument=function(t){var e=t.split(".",2),o=this;o.doc=new haste_document,o.doc.load(e[0],function(t){t?(o.$code.html(t.value),o.setTitle(t.key),o.fullKey(),o.$textarea.val("").hide(),o.$box.show().focus(),o.addLineNumbers(t.lineCount)):o.newDocument()},this.lookupTypeByExtension(e[1]))},haste.prototype.duplicateDocument=function(){if(this.doc.locked){var t=this.doc.data;this.newDocument(),this.$textarea.val(t)}},haste.prototype.lockDocument=function(){var t=this;this.doc.save(this.$textarea.val(),function(e,o){if(e)t.showMessage(e.message,"error");else if(o){t.$code.html(o.value),t.setTitle(o.key);var n="/"+o.key;window.history.pushState(null,t.appName+"-"+o.key,n),t.fullKey(),t.$textarea.val("").hide(),t.$box.show().focus(),t.addLineNumbers(o.lineCount)}})},haste.prototype.configureButtons=function(){var t=this;this.buttons=[{$where:$("#box2 .save"),label:"Save",shortcutDescription:"control + s",shortcut:function(t){return t.ctrlKey&&83===t.keyCode},action:function(){""!==t.$textarea.val().replace(/^\s+|\s+$/g,"")&&t.lockDocument()}},{$where:$("#box2 .new"),label:"New",shortcut:function(t){return t.ctrlKey&&78===t.keyCode},shortcutDescription:"control + n",action:function(){t.newDocument(!t.doc.key)}},{$where:$("#box2 .duplicate"),label:"Duplicate & Edit",shortcut:function(e){return t.doc.locked&&e.ctrlKey&&68===e.keyCode},shortcutDescription:"control + d",action:function(){t.duplicateDocument()}},{$where:$("#box2 .raw"),label:"Just Text",shortcut:function(t){return t.ctrlKey&&t.shiftKey&&82===t.keyCode},shortcutDescription:"control + shift + r",action:function(){window.location.href=workersUrl+"raw/"+t.doc.key}}];for(var e=0;e<this.buttons.length;e++)this.configureButton(this.buttons[e])},haste.prototype.configureButton=function(t){t.$where.click(function(e){e.preventDefault(),!t.clickDisabled&&$(this).hasClass("enabled")&&t.action()}),t.$where.mouseenter(function(){$("#box3 .label").text(t.label),$("#box3 .shortcut").text(t.shortcutDescription||""),$("#box3").show(),$(this).append($("#pointer").remove().show())}),t.$where.mouseleave(function(){$("#box3").hide(),$("#pointer").hide()})},haste.prototype.configureShortcuts=function(){var t=this;$(document.body).keydown(function(e){for(var o,n=0;n<t.buttons.length;n++)if((o=t.buttons[n]).shortcut&&o.shortcut(e))return e.preventDefault(),void o.action()})},$(function(){$("textarea").keydown(function(t){if(9===t.keyCode){t.preventDefault();if(document.selection)this.focus(),document.selection.createRange().text="  ",this.focus();else if(this.selectionStart||"0"==this.selectionStart){var e=this.selectionStart,o=this.selectionEnd,n=this.scrollTop;this.value=this.value.substring(0,e)+"  "+this.value.substring(o,this.value.length),this.focus(),this.selectionStart=e+"  ".length,this.selectionEnd=e+"  ".length,this.scrollTop=n}else this.value+="  ",this.focus()}})});
\ No newline at end of file
+const workersUrl="https://api.knx.cool/";var haste_document=function(){this.locked=!1};haste_document.prototype.htmlEscape=function(e){return e.replace(/&/g,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;").replace(/"/g,"&quot;")},haste_document.prototype.load=function(e,t,o){var n=this;$.ajax(workersUrl+e,{type:"get",dataType:"json",success:function(s){n.locked=!0,n.key=e,n.data=s.data,t({value:n.data,key:e,language:o,lineCount:n.data.split("\n").length})},error:function(e,o,n){t(!1)}})},haste_document.prototype.save=function(e,t){if(this.locked)return!1;this.data=e;var o=this;$.ajax(workersUrl+"documents",{type:"put",data:e,dataType:"json",contentType:"text/plain; charset=utf-8",success:function(n){o.locked=!0,o.key=n.key,t(null,{value:e,key:n.key,language:null,lineCount:e.split("\n").length})},error:function(e){try{t($.parseJSON(e.responseText))}catch(e){t({message:"Something went wrong!"})}}})};var haste=function(e,t){this.appName=e,this.$textarea=$("textarea"),this.$box=$("#box"),this.$code=$("#box code"),this.$linenos=$("#linenos"),this.options=t,this.configureShortcuts(),this.configureButtons()};function removeElementsByClass(e){const t=document.getElementsByClassName(e);for(;t.length>0;)t[0].parentNode.removeChild(t[0])}haste.prototype.setTitle=function(e){var t=e?this.appName+" - "+e:this.appName;document.title=t},haste.prototype.showMessage=function(e,t){var o=$('<li class="'+(t||"info")+'">'+e+"</li>");$("#messages").prepend(o),setTimeout(function(){o.slideUp("fast",function(){$(this).remove()})},3e3)},haste.prototype.lightKey=function(){this.configureKey(["new","save"])},haste.prototype.fullKey=function(){this.configureKey(["new","duplicate","raw"])},haste.prototype.configureKey=function(e){var t,o=0;$("#box2 .function").each(function(){for(t=$(this),o=0;o<e.length;o++)if(t.hasClass(e[o]))return t.addClass("enabled"),!0;t.removeClass("enabled")})},haste.prototype.newDocument=function(e){this.$box.hide(),this.doc=new haste_document,this.setTitle(),this.lightKey(),this.$textarea.val("").show("fast",function(){this.focus()}),this.removeLineNumbers()},haste.extensionMap={rb:"ruby",py:"python",pl:"perl",php:"php",scala:"scala",go:"go",xml:"xml",html:"xml",htm:"xml",css:"css",js:"javascript",vbs:"vbscript",lua:"lua",pas:"delphi",java:"java",cpp:"cpp",cc:"cpp",m:"objectivec",vala:"vala",sql:"sql",sm:"smalltalk",lisp:"lisp",ini:"ini",diff:"diff",bash:"bash",sh:"bash",tex:"tex",erl:"erlang",hs:"haskell",md:"markdown",txt:"",coffee:"coffee",swift:"swift"},haste.prototype.lookupExtensionByType=function(e){for(var t in haste.extensionMap)if(haste.extensionMap[t]===e)return t;return e},haste.prototype.lookupTypeByExtension=function(e){return haste.extensionMap[e]||e},haste.prototype.addLineNumbers=function(e){removeElementsByClass("linenumber");for(var t=0;t<e;t++){let e=document.createElement("a");e.classList.add("linenumber"),e.style.marginTop=16*t+"px";let o=t+1;e.href="#"+o,e.onclick=function(){var e=document.getElementById("box");removeElementsByClass("highlight");let t=document.createElement("div");t.classList.add("highlight"),t.style.marginTop=16*(o-1)+"px",e.insertBefore(t,e.firstChild)};let n=document.createTextNode(o.toString());e.appendChild(n),document.body.appendChild(e)}},haste.prototype.removeLineNumbers=function(){removeElementsByClass("highlight"),removeElementsByClass("linenumber");let e=document.createElement("a");e.classList.add("linenumber");let t=document.createTextNode(">");e.appendChild(t),document.body.appendChild(e)},haste.prototype.loadDocument=function(e){var t=e.split(".",2),o=this;o.doc=new haste_document,o.doc.load(t[0],function(e){e?(o.$code.html(e.value),o.setTitle(e.key),o.fullKey(),o.$textarea.val("").hide(),o.$box.show().focus(),o.addLineNumbers(e.lineCount)):o.newDocument()},this.lookupTypeByExtension(t[1]))},haste.prototype.duplicateDocument=function(){if(this.doc.locked){var e=this.doc.data;this.newDocument(),this.$textarea.val(e)}},haste.prototype.lockDocument=function(){var e=this;this.doc.save(this.$textarea.val(),function(t,o){if(t)e.showMessage(t.message,"error");else if(o){e.$code.html(o.value),e.setTitle(o.key);var n="/"+o.key;window.history.pushState(null,e.appName+"-"+o.key,n),e.fullKey(),e.$textarea.val("").hide(),e.$box.show().focus(),e.addLineNumbers(o.lineCount)}})},haste.prototype.configureButtons=function(){var e=this;this.buttons=[{$where:$("#box2 .save"),label:"Save",shortcutDescription:"control + s",shortcut:function(e){return e.ctrlKey&&83===e.keyCode},action:function(){""!==e.$textarea.val().replace(/^\s+|\s+$/g,"")&&e.lockDocument()}},{$where:$("#box2 .new"),label:"New",shortcut:function(e){return e.ctrlKey&&78===e.keyCode},shortcutDescription:"control + n",action:function(){e.newDocument(!e.doc.key)}},{$where:$("#box2 .duplicate"),label:"Duplicate & Edit",shortcut:function(t){return e.doc.locked&&t.ctrlKey&&68===t.keyCode},shortcutDescription:"control + d",action:function(){e.duplicateDocument()}},{$where:$("#box2 .raw"),label:"Just Text",shortcut:function(e){return e.ctrlKey&&e.shiftKey&&82===e.keyCode},shortcutDescription:"control + shift + r",action:function(){window.location.href=workersUrl+"raw/"+e.doc.key}}];for(var t=0;t<this.buttons.length;t++)this.configureButton(this.buttons[t])},haste.prototype.configureButton=function(e){e.$where.click(function(t){t.preventDefault(),!e.clickDisabled&&$(this).hasClass("enabled")&&e.action()}),e.$where.mouseenter(function(){$("#box3 .label").text(e.label),$("#box3 .shortcut").text(e.shortcutDescription||""),$("#box3").show(),$(this).append($("#pointer").remove().show())}),e.$where.mouseleave(function(){$("#box3").hide(),$("#pointer").hide()})},haste.prototype.configureShortcuts=function(){var e=this;$(document.body).keydown(function(t){for(var o,n=0;n<e.buttons.length;n++)if((o=e.buttons[n]).shortcut&&o.shortcut(t))return t.preventDefault(),void o.action()})},$(function(){$("textarea").keydown(function(e){if(9===e.keyCode){e.preventDefault();if(document.selection)this.focus(),document.selection.createRange().text="  ",this.focus();else if(this.selectionStart||"0"==this.selectionStart){var t=this.selectionStart,o=this.selectionEnd,n=this.scrollTop;this.value=this.value.substring(0,t)+"  "+this.value.substring(o,this.value.length),this.focus(),this.selectionStart=t+"  ".length,this.selectionEnd=t+"  ".length,this.scrollTop=n}else this.value+="  ",this.focus()}})});
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index f4fc8fc..d2c3240 100644
--- a/static/index.html
+++ b/static/index.html
@@ -76,10 +76,8 @@
 			</div>
 		</div>
 
-		<div id="linenos"></div>
 		<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
 		<textarea spellcheck="false" style="display:none;"></textarea>
-
 	</body>
 
 </html>