diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css
index 291c534..dc86f97 100644
--- a/pdb-ui/src/main/resources/resources/css/design.css
+++ b/pdb-ui/src/main/resources/resources/css/design.css
@@ -97,6 +97,7 @@ textarea {
 #zoom-in-slider {
     background: #ccc;
     opacity:0.4;
+    cursor: zoom-in;
 }
 
 
diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index 3990414..b6139de 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -200,6 +200,7 @@ Vue.component('result-view', {
 	   return {
 	       in_drag_mode: false,
 	       drag_start_x: 0,
+	       drag_start_y: 0,
 	       drag_end_x: 0,
 	       zoomInSliderStyle: "display: none;",
 	   };
@@ -229,19 +230,32 @@ Vue.component('result-view', {
 		imageWidth: function() {
 		  return Math.floor($('#result').width());
 		},
-		isInPlot: function(x){
-		  return x > gnuplotLMargin && x < this.imageWidth() - gnuplotRMargin;
+		update_cursor: function(event){
+		  $('#result-image').css('cursor', this.isInPlot(event) ? 'zoom-in' : 'pointer');
+		},
+		isInPlot: function(event){
+          const rect = $('#result-image').offset();
+          const x= event.clientX - rect.left;
+          const y= event.clientY - rect.top;
+		
+		  return x > gnuplotLMargin 
+		      && x < this.imageWidth() - gnuplotRMargin
+		      && y > gnuplotTMargin
+		      && y < Math.floor($('#result').height()) - gnuplotBMargin;
 		},
 		drag_start: function(event) {
 		  event.preventDefault();
-		  if (event.buttons == 1 && this.isInPlot(event.x) && !data.searchBar.imageLastUsedParams.keyOutside) {
+		  if (event.buttons == 1 && this.isInPlot(event) && !data.searchBar.imageLastUsedParams.keyOutside) {
     		  this.in_drag_mode = true;
     		  this.drag_start_x = event.x;
     		  this.drag_end_x = event.x;
+    		  this.drag_start_y = event.y;
           }
 		},
 		dragging: function(event) {
 		  
+		  this.update_cursor(event);
+		  
 		  if (this.in_drag_mode && event.buttons == 1 && !data.searchBar.imageLastUsedParams.keyOutside){
 		      this.drag_end_x = Math.max(Math.min(event.x, this.imageWidth()-gnuplotRMargin), gnuplotLMargin);
 		      
@@ -267,10 +281,10 @@ Vue.component('result-view', {
 		          const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x);
 		          const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x);
 		          
-		          const imageWidth = Math.floor($('#result').width());
+		          const imageWidth = this.imageWidth();
 		          const widthPlotArea = imageWidth - gnuplotLMargin - gnuplotRMargin;
-		          const startPxWithinPlotArea = startPxInImage - gnuplotLMargin;  
-		          const endPxWithinPlotArea = endPxInImage - gnuplotLMargin;  
+		          const startPxWithinPlotArea = startPxInImage - gnuplotLMargin;
+		          const endPxWithinPlotArea = endPxInImage - gnuplotLMargin;
 		          
 		          const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea;
 		          const endPercentOfDateRange = 1-endPxWithinPlotArea / widthPlotArea;
@@ -281,11 +295,28 @@ Vue.component('result-view', {
 		      }
 		  }
 		},
-		drag_abort: function() {
-		  this.in_drag_mode = false;
-          this.drag_start_x = 0;
-          this.drag_end_x = 0;
-          this.hideZoomInSlider();
+		drag_abort: function(event) {
+		    if (this.in_drag_mode && !this.isInPlot(event)) {
+                this.in_drag_mode = false;
+                this.drag_start_x = 0;
+                this.drag_end_x = 0;
+                this.hideZoomInSlider();
+            }
+		},
+		zoom_click: function(event) {
+            if (this.isInPlot(event) && this.drag_start_x == event.x && this.drag_start_y == event.y) {
+                // zoom in
+                const dateRangeAsString = data.searchBar.imageLastUsedParams.dateRange;
+                const dateRange = parseDateRange(dateRangeAsString);
+                
+                const widthPlotArea = this.imageWidth() - gnuplotLMargin - gnuplotRMargin;
+                const cursorPxWithinPlotArea = event.x - gnuplotLMargin;
+                const cursorPercentOfDateRange = cursorPxWithinPlotArea / widthPlotArea;
+                
+                shiftDate(dateRangeAsString, cursorPercentOfDateRange-0.25, (cursorPercentOfDateRange-0.75));
+                  
+                plotCurrent();
+            }
 		}
 	},
 	computed: {
@@ -299,7 +330,8 @@ Vue.component('result-view', {
 	   v-on:mousedown="drag_start"
 	   v-on:mousemove="dragging"
 	   v-on:mouseup="drag_stop"
-	   v-on:click="drag_abort">
+	   v-on:mouseout="drag_abort"
+	   v-on:click="zoom_click">
 	    <div 
 	       id="zoom-in-slider" 
 	       v-if="in_drag_mode"