diff --git a/app/components/viewer/document/index.hbs b/app/components/viewer/document/index.hbs
index f3128a6c3cdfbe7bb1eb368a6255381e4eccf47e..bd599a2a59346592169fe88d42370ec30bf3df6e 100644
--- a/app/components/viewer/document/index.hbs
+++ b/app/components/viewer/document/index.hbs
@@ -1,8 +1,17 @@
 <div class="d-flex">
-  <Viewer::Thumbnails
-    @pages={{@pages}}
-    @onDblClick={{this.onThumbnailDblClick}} />
+  {{#if this.thumbnails_visible}}
+    <Viewer::Thumbnails
+      @pages={{@pages}}
+      @onDblClick={{this.onThumbnailDblClick}} />
+  {{/if}}
+  <Viewer::ThumbnailsSwitch
+    @onThumbnailsToggle={{this.onThumbnailsToggle}}
+    @thumbnails_visible={{this.thumbnails_visible}} />
   <Viewer::Pages
     @pages={{@pages}}
-    @scroll_to_page={{this.scroll_to_page}} />
+    @scroll_to_page={{this.scroll_to_page}}
+    @onZoomIn={{this.onZoomIn}}
+    @onZoomOut={{this.onZoomOut}}
+    @onZoomFit={{this.onZoomFit}}
+    @zoom_factor={{this.zoom_factor}} />
 </div>
\ No newline at end of file
diff --git a/app/components/viewer/document/index.js b/app/components/viewer/document/index.js
index e22025e058c5774ae4518a065882c9e4765c9e46..d4ff90b1906443865ab3bd07feab9471dcf65b2a 100644
--- a/app/components/viewer/document/index.js
+++ b/app/components/viewer/document/index.js
@@ -5,9 +5,35 @@ import { action } from '@ember/object';
 
 export default class ViewerDocumentComponent extends Component {
   @tracked scroll_to_page;
+  @tracked thumbnails_visible = true;
+  @tracked zoom_factor = 100;
 
   @action
   onThumbnailDblClick(page) {
     this.scroll_to_page = page;
   }
+
+  @action
+  onThumbnailsToggle() {
+    this.thumbnails_visible = !this.thumbnails_visible;
+  }
+
+  @action
+  onZoomIn() {
+    if (this.zoom_factor < 300) {
+      this.zoom_factor += 10;
+    }
+  }
+
+  @action
+  onZoomOut() {
+    if (this.zoom_factor > 20) {
+      this.zoom_factor -= 10;
+    }
+  }
+
+  @action
+  onZoomFit() {
+    this.zoom_factor = 100;
+  }
 }
\ No newline at end of file
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index 030d77dbcb2c3107f9df4ff9469a708ae2f7ee42..e3f3342d79dc8566fb0d5e9038985cbac1032148 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -20,6 +20,8 @@
     @hint={{@hint}} />
 
   <Viewer::Document
-    @pages={{this.pages}} />
+    @pages={{this.pages}}
+    @thumbnails_visible={{this.thumbnails_visible}}
+    @onThumbnailsToggle={{this.onThumbnailsToggle}} />
 
 </div>
diff --git a/app/components/viewer/page.hbs b/app/components/viewer/page.hbs
index f32dab0e2d3cdb1e2adb6f1ded1d87a221c557c8..ffbba071c81602322e91c5747b87a100e9a3bd1d 100644
--- a/app/components/viewer/page.hbs
+++ b/app/components/viewer/page.hbs
@@ -1,6 +1,7 @@
 <div
   class="page d-flex flex-column align-items-center"
-  {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}>
+  {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}
+  {{zoomFactor @zoom_factor}}>
 
   {{#if @page.svg_image}}
     {{{@page.svg_image}}}
diff --git a/app/components/viewer/pages.hbs b/app/components/viewer/pages.hbs
index 3d1fee973e5feea507180e13adcb466dc1479741..8c6e3616228753cb1328123a33798243f8b2efb4 100644
--- a/app/components/viewer/pages.hbs
+++ b/app/components/viewer/pages.hbs
@@ -1,9 +1,13 @@
-<div
-  class="d-flex flex-column pages"
+<div class="d-flex flex-column pages"
   {{adjust_element_height}}>
-  {{#each @pages as |page|}}
-    <Viewer::Page
-      @page={{page}}
-      @scroll_to_page={{@scroll_to_page}} />
-  {{/each}}
+    {{#each @pages as |page|}}
+      <Viewer::Page
+        @page={{page}}
+        @scroll_to_page={{@scroll_to_page}}
+        @zoom_factor={{@zoom_factor}} />
+    {{/each}}
+    <Viewer::Zoom
+      @onZoomIn={{@onZoomIn}}
+      @onZoomOut={{@onZoomOut}}
+      @onZoomFit={{@onZoomFit}} />
 </div>
diff --git a/app/components/viewer/thumbnails_switch.hbs b/app/components/viewer/thumbnails_switch.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..68b85fc15f3d63de3d469474ede27168649738b2
--- /dev/null
+++ b/app/components/viewer/thumbnails_switch.hbs
@@ -0,0 +1,7 @@
+<div class="thumbnails-switch" {{on "click" @onThumbnailsToggle}}>
+  {{#if @thumbnails_visible}}
+    <i class="bi bi-arrow-left-square fs-5"></i>
+  {{else}}
+    <i class="bi bi-arrow-right-square fs-5"></i>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/viewer/zoom.hbs b/app/components/viewer/zoom.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..ef8170c2cfbade96b24929efe2bd08043625b364
--- /dev/null
+++ b/app/components/viewer/zoom.hbs
@@ -0,0 +1,11 @@
+<div class="zoom d-flex justify-content-center">
+  <div>
+    <i class="bi bi-zoom-in px-1" {{on "click" @onZoomIn}}></i>
+  </div>
+  <div>
+    <i class="bi bi-zoom-out px-1" {{on "click" @onZoomOut}}></i>
+  </div>
+  <div class="px-1" {{on "click" @onZoomFit}}>
+    Fit
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/modifiers/adjust_element_height.js b/app/modifiers/adjust_element_height.js
index 18975f93bbbf5ff8181e2018c9e4363b3e6bdd7d..488afc5c9b1838e887ddb8747145eb87109e98f8 100644
--- a/app/modifiers/adjust_element_height.js
+++ b/app/modifiers/adjust_element_height.js
@@ -55,15 +55,6 @@ export default class AdjustElementHeightModifier extends Modifier {
     height += parseInt(styles.marginTop);
     height += parseInt(styles.marginBottom);
 
-    if (element_id) {
-      console.log(`ID=${element_id}: height=${styles.height}`);
-      console.log(`ID=${element_id}: marginTop=${styles.marginTop}`);
-      console.log(`ID=${element_id}: marginBottom=${styles.marginBottom}`);
-    } else {
-      console.log(`element_class=${element_class}: height=${styles.height}`);
-      console.log(`element_class=${element_class}: marginTop=${styles.marginTop}`);
-      console.log(`element_class=${element_class}: marginBottom=${styles.marginBottom}`);
-    }
     return height;
   }
 
diff --git a/app/modifiers/zoom_factor.js b/app/modifiers/zoom_factor.js
new file mode 100644
index 0000000000000000000000000000000000000000..fe2cf76cfb29a2d4fe5092a67b06e94362b8809c
--- /dev/null
+++ b/app/modifiers/zoom_factor.js
@@ -0,0 +1,11 @@
+import Modifier from 'ember-modifier';
+
+
+export default class ZoomFactorModifier extends Modifier {
+  didReceiveArguments() {
+    let zoom_factor = this.args.positional[0];
+
+    this.element.style.width = `${zoom_factor}%`;
+  }
+
+}
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index ceac81d4642f09e51c7f0f8ff3ec5ea88d98f871..3db9bc54c73bc97b2d63a858a81c9566ac3ab824 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -10,6 +10,7 @@
 @import "./preferences.scss";
 @import "./ui_select.scss";
 @import "./context_menu.scss";
+@import "./zoom.scss";
 
 
 body {
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index b5f46904320d6419a32ec45f2c23fa214e18aa33..7e2c22e9e79b4bf3107b215d566884baec49be20 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -12,10 +12,20 @@
   }
 }
 
+.thumbnails-switch {
+  background-color: #666;
+  color: white;
+}
+
 .pages {
   overflow: scroll;
+  position: relative;
   width: 100%;
+  background-color: #666;
+
   .page {
+    margin: auto;
+    color: white;
     img {
       width: 100%;
     }
diff --git a/app/styles/zoom.scss b/app/styles/zoom.scss
new file mode 100644
index 0000000000000000000000000000000000000000..17d835a364ad991cdc81d7cf52c8586b6e8d4ace
--- /dev/null
+++ b/app/styles/zoom.scss
@@ -0,0 +1,8 @@
+.zoom {
+  position: sticky;
+  bottom: 0;
+  background-color: #d4d4d47d;
+  padding: 0.5rem;
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file