diff --git a/static/application.css b/static/application.css
index 70458c0..c2155b1 100644
--- a/static/application.css
+++ b/static/application.css
@@ -25,7 +25,7 @@ textarea {
 
 #linenos {
   color: #7d7d7d;
-	z-index: -1000;
+	/*z-index: -1000;*/
 	position: absolute;
 	top: 20px;
 	left: 0px;
@@ -40,9 +40,9 @@ textarea {
 	/* display: block;*/
 }
 
-.line:hover {
+/*.line:hover {
 	background-color: #cbd387;
-}
+}*/
 
 .lineHighlight {
 	background-color: yellow;
diff --git a/static/application.js b/static/application.js
index d951f92..58774d2 100644
--- a/static/application.js
+++ b/static/application.js
@@ -42,17 +42,17 @@ haste_document.prototype.load = function(key, callback, lang) {
           }
       
           var currentLine = i + 1;
+          var spanClass = "";
           if (
             currentLine >= selectedLines.startLine &&
             currentLine <= selectedLines.endLine
           ) {
-            highlighted =
-              "<span class='lineHighlight'>" + highlighted + "</span>";
+            spanClass = "lineHighlight";
           }
-          highlighted = "<span onclick='handleLineClick(event," + i + ")' class='line' id='line-" + i + "'>" + highlighted + "</span>";
+          highlighted = "<span id='line-" + (i+1) + "' class="+spanClass+">" + highlighted + "</span>";
           high.value += highlighted + "\n";
         }
-        // scroll to position in document after ensuring components h"ve had time to render
+        //// scroll to position in document after ensuring components h"ve had time to render
         setTimeout(function() {
           // show current line and the one before it
           if (selectedLines.startLine >= 3) {
@@ -217,11 +217,11 @@ haste.prototype.lookupTypeByExtension = function(ext) {
 };
 
 // Add line numbers to the document
-// For the specified number of lines
+// For the specified number of lines, each with a class and id
 haste.prototype.addLineNumbers = function(lineCount) {
   var h = '';
   for (var i = 0; i < lineCount; i++) {
-    h += (i + 1).toString() + '<br/>';
+    h += '<span onclick="handleLineClick(' + i.toString() + ')" onmouseenter="handleMouseEnter(' + i.toString() + ')" onmouseleave="handleMouseLeave(' + i.toString() + ')" onmousedown="handleMouseDown(' + i.toString() + ')" onmouseup="handleMouseUp(' + i.toString() + ')" id="line-number-' + (i + 1) + '">' + (i + 1) + '</span><br/>';
   }
   $('#linenos').html(h);
 };
diff --git a/static/index.html b/static/index.html
index 59988bb..fce2b27 100644
--- a/static/index.html
+++ b/static/index.html
@@ -15,8 +15,16 @@
 
 	<script type="text/javascript">
 		var app = null;
+		var isHashChange=false;
+		var isDragging=false;
 		// Handle pops
 		var handlePop = function (evt) {
+			if (isHashChange||isDragging) {
+				evt.preventDefault();
+				// reset
+				isHashChange = false;
+				return false;
+			}
 			var path = evt.target.location.href;
 			if (path === app.baseUrl) { app.newDocument(true); }
 			else { app.loadDocument(path.split('#')[0].split('/').slice(-1)[0]); }
@@ -66,24 +74,58 @@
 			app = new haste('hastebin', { twitter: false, baseUrl: baseUrl, selectedLines: selectedLines });
 			handlePop({ target: window });
 		});
+		
+		$(window).on('hashchange', function() {
+			isHashChange = true;
+		});
 
-		function handleLineClick(event, lineId) {
-			var lineNumber = lineId + 1;
-			if (event.shiftKey && app.selectedLines.startLine != undefined && lineNumber != app.selectedLines.startLine) {
-				if (lineNumber > app.selectedLines.startLine) {
-					app.selectedLines.endLine = lineNumber;
-				} else {
-					app.selectedLines.endLine = this.app.selectedLines.startLine;
-					app.selectedLines.startLine = lineNumber;
-				}
-				window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
-			} else {
-				// no shift range to consider
-				app.selectedLines.startLine = lineNumber;
-				app.selectedLines.endLine = lineNumber;
-				window.location.hash = "#L" + (lineNumber);
+		function updateWindowLineHash(lineId){
+			console.log('updateWindowLineHash', lineId, app.selectedLines.startLine, app.selectedLines.endLine);
+			app.selectedLines.startLine = Math.min(lineId,app.selectedLines.startLine);
+			app.selectedLines.endLine = Math.max(lineId,app.selectedLines.endLine);
+			window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
+		}
+
+		function handleMouseEnter(lineId) {
+			lineId = lineId + 1;
+			console.log('lineId', lineId);
+			$('#line-number-' + lineId).css('background-color', '#cbd387');
+			$('#line-' + lineId).css('background-color', '#cbd387');
+			if(isDragging){
+				$('#line-' + lineId).addClass("lineHighlight");
+				updateWindowLineHash(lineId);
 			}
 		}
+
+		function handleMouseLeave(lineId) {
+			lineId = lineId + 1;
+			$('#line-number-' + lineId).css('background-color', '');
+			$('#line-' + lineId).css('background-color', '');
+		}
+
+		function unHighlightCurrent(){
+			startLine = app.selectedLines.startLine;
+			endLine = app.selectedLines.endLine;
+			for (var i = startLine; i <= endLine; i++) {
+				$('#line-' + i).removeClass("lineHighlight");
+			}
+			app.selectedLines.startLine = Number.MAX_SAFE_INTEGER;
+			app.selectedLines.endLine = Number.MIN_SAFE_INTEGER;
+		}
+		function handleMouseDown(lineId) {
+			unHighlightCurrent();
+			lineId = lineId + 1;
+			$('#line-' + lineId).addClass("lineHighlight");
+			isDragging = true;
+			updateWindowLineHash(lineId);
+		}
+
+		function handleMouseUp(lineId) {
+			lineId = lineId + 1;
+			isDragging = false;
+			updateWindowLineHash(lineId);
+
+		}
 	</script>
 
 </head>