diff --git a/docs/index.html b/docs/index.html
index 11a10c18..d240648e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,6 +12,15 @@
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link rel="stylesheet" href="style.css">
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-131201011-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-131201011-1');
+  </script>
 </head>
 
 <body class="text-center">
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index 28435779..98256b7d 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -204,15 +204,39 @@ app-info-panel {
   bottom: 0;
   position: absolute;
   margin-bottom: 10px;
+  margin-right: 0;
+  margin-left: 0;
 }
 
 .zoom-progress-wrapper {
+  margin-top: 3px;
   height: 11px;
   border: 1px solid white;
   padding: 0;
 }
 
-.zoom-progress {
-  height: 10px;
-  background: white;
+
+
+
+input[type="range"].zoom-progress {
+  height: 11px;
+  margin-top: 3px;
+  border: 1px solid white;
+  background: transparent;
+  padding: 0;
+}
+
+input[type="range"].zoom-progress::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+input[type="range"].zoom-progress::-moz-range-track {
+  background: transparent;
+}
+
+
+
+
+.controls-zoom .oi {
+  cursor: pointer;
 }
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
index 9bfea6a7..1d216891 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -80,9 +80,15 @@
       class="oi oi-chevron-right"></span></div>
 
     <div class="controls controls-zoom row" *ngIf="zoom > 1">
-      <div class="zoom-progress-wrapper offset-1 col-10 col-md-4 offset-md-4">
-        <div class="zoom-progress"
-             [style.width.%]="(zoom-1)/(MAX_ZOOM-1)*100"></div>
+      <div class="col-1 col-md-4">
+        <span (click)="zoomOut()" class="oi oi-zoom-out float-right"></span>
+      </div>
+
+      <input type="range"
+             [(ngModel)]="zoom" min="1" [max]="MAX_ZOOM" step="0.1"
+             value="1" class="col-10 col-md-4 zoom-progress">
+      <div class="col-1 col-md-4">
+        <span (click)="zoomIn()" class="oi oi-zoom-in float-left"></span>
       </div>
     </div>
 
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
index fdb8a0de..14fe412e 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts
@@ -43,7 +43,7 @@ export enum PlayBackStates {
 })
 export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
-  readonly MAX_ZOOM=10;
+  readonly MAX_ZOOM = 10;
 
   @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
   @ViewChild('lightbox') lightboxElement: ElementRef;
@@ -187,7 +187,11 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
       return;
     }
     this.showControls();
-    this.setZoom(this.zoom + ($event.deltaY < 0 ? this.zoom / 10 : -this.zoom / 10));
+    if ($event.deltaY < 0) {
+      this.zoomIn();
+    } else {
+      this.zoomOut();
+    }
   }
 
   @HostListener('pinch', ['$event'])
@@ -229,6 +233,17 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     }
   }
 
+  zoomIn() {
+    this.showControls();
+    this.setZoom(this.zoom + this.zoom / 10);
+
+  }
+
+  zoomOut() {
+    this.showControls();
+    this.setZoom(this.zoom - this.zoom / 10);
+  }
+
 
   private setZoom(zoom: number) {
     if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
@@ -300,7 +315,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
       this.zoom = 1;
     }
     if (this.zoom > this.MAX_ZOOM) {
-      this.zoom =  this.MAX_ZOOM;
+      this.zoom = this.MAX_ZOOM;
     }
     fixDrag(this.drag);
     fixDrag(this.prevDrag);
