diff --git a/index.html b/index.html
index acbc611..fd0cb44 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,14 @@
         --background: #fff;
         --border-light: #999;
         --border-dark: #000;
+        --overlay-background: #ffffff47;
       }
       .dark {
         --foreground: #fff;
         --background: #000;
         --border-dark: #999;
         --border-light: #fff;
+        --overlay-background: #00000066;
       }
       body {
         overflow-x: hidden;
@@ -97,6 +99,21 @@
       .hidden {
         display: none;
       }
+      #pauseIndicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        font-size: xx-large;
+        font-size: xxx-large;
+        background-color: var(--overlay-background);
+        height: 1.5em;
+        width: 1.5em;
+        text-align: center;
+        vertical-align: baseline;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
     </style>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
@@ -149,6 +166,7 @@
                 leftElement.classList.add('left');
                 rightElement.classList.remove('right');
                 window.isPaused = false;
+                document.getElementById('pauseIndicator').classList.add('hidden');
               } else {
                 const { left: leftElement, right: rightElement} = getImagePositions();
                 leftElement.style.transitionDelay = '0s';
@@ -156,6 +174,13 @@
                 leftElement.classList.remove('left');
                 rightElement.classList.add('right');
                 window.isPaused = true;
+
+                const pauseIndicator = document.getElementById('pauseIndicator');
+                const imageRect = getImagePositions().left.getBoundingClientRect();
+                pauseIndicator.style.top = imageRect.top + 'px';
+                pauseIndicator.style.left = imageRect.left + 'px';
+
+                document.getElementById('pauseIndicator').classList.remove('hidden');
               }
               break;
             case 'ArrowRight':
@@ -230,6 +255,7 @@
 
           document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
           document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
+          //document.getElementById('pauseIndicator').style.top = '';
 
           if (controls.elements['submit'].value === 'save') {
             return;
@@ -257,8 +283,11 @@
             return;
           }
           remainingTransitions = document.querySelectorAll('img').length;
-          const leftElement = document.querySelector('.left');
-          const rightElement = document.querySelector('img:not([class~=left])');
+          let leftElement = document.querySelector('.left');
+          let rightElement = document.querySelector('img:not([class~=left])');
+          if (leftElement === null) {
+            return;
+          }
           leftElement.classList.add('instant');
           leftElement.style.transitionDelay = '0s';
           // Wait until 'instant' and transitionDelay are applied
@@ -325,7 +354,7 @@
           const second = document.getElementById('second');
 
           let leftElement, rightElement;
-          if (first.className.includes('left')) {
+          if (first.className.includes('left') || second.className.includes('right')) {
             leftElement = first;
             rightElement = second;
           } else {
@@ -382,6 +411,7 @@
     </script>
   </head>
   <body>
+    <div id="pauseIndicator" class="hidden">&#x23F8;</div>
     <form id="controls">
       <h3 id="headline">Zeige Album: </h3>
       <label for="random">Zufällig</label>
