diff --git a/dlibrary/static/viewer.css b/dlibrary/static/viewer.css
index 0955210..f521e83 100644
--- a/dlibrary/static/viewer.css
+++ b/dlibrary/static/viewer.css
@@ -5,23 +5,36 @@ html, body {
     margin: 0;
 }
 
-#button-left, #button-right {
+.tap {
+    background: #000000;
+    opacity: 0.8;
+    position: fixed;
+    animation: 2s linear forwards fade;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes fade {
+    to { opacity: 0; }
+}
+
+#tap-left, #tap-right {
     position: fixed;
     bottom: 0px;
     width: 30vw;
     height: 100vh;
 }
 
-#button-left {
+#tap-left {
     left: 0px;
 }
 
-#button-right {
+#tap-right {
     right: 0px;
 }
 
-#button-back {
-    position: fixed;
+#tap-back {
     top: 0px;
     left: 30vw;
     width: 40vw;
diff --git a/dlibrary/static/viewer.js b/dlibrary/static/viewer.js
index 3c2e1a4..f6bc30d 100644
--- a/dlibrary/static/viewer.js
+++ b/dlibrary/static/viewer.js
@@ -101,10 +101,18 @@ document.addEventListener('DOMContentLoaded', () => {
         window.location.href = "../";
     }
 
+    function hideTapZones() {
+        for (const el of document.getElementsByClassName('tap')) {
+            el.style.opacity = 0;
+        }
+    }
+
     changePage(currentPage);
     changeDuration(duration, paused);
 
-    document.onkeydown = event =>{
+    document.onkeydown = event => {
+        hideTapZones();
+
         switch (event.keyCode) {
         case 32: //space
             changeDuration(duration, !paused);
@@ -139,7 +147,8 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    document.getElementById("button-left").onclick = left;
-    document.getElementById("button-right").onclick = right;
-    document.getElementById("button-back").onclick = exitToWork;
+    document.onclick = hideTapZones;
+    document.getElementById("tap-left").onclick = left;
+    document.getElementById("tap-right").onclick = right;
+    document.getElementById("tap-back").onclick = exitToWork;
 });
diff --git a/dlibrary/templates/viewer.html b/dlibrary/templates/viewer.html
index c1de14e..9ef6315 100644
--- a/dlibrary/templates/viewer.html
+++ b/dlibrary/templates/viewer.html
@@ -17,9 +17,21 @@
 <div id="page-num"></div>
 <div id="duration"></div>
 <div id="controls">
-  <div id="button-left"></div>
-  <div id="button-right"></div>
-  <div id="button-back"></div>
+  <div id="tap-left" class="tap">
+    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
+      <path d='M 60 -60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
+    </svg>
+  </div>
+  <div id="tap-right" class="tap">
+    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
+      <path d='M 0 -60 L 60 0 L 0 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
+    </svg>
+  </div>
+  <div id="tap-back" class="tap">
+    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='80' viewBox='-70 -10 140 80'>
+      <path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
+    </svg>
+  </div>
 </div>
 <div id="image-container"></div>
 {% endblock %}