diff --git a/frontend.html b/frontend.html
index 3aaf414..71de713 100644
--- a/frontend.html
+++ b/frontend.html
@@ -25,6 +25,7 @@
             padding: 20px;
             user-select: none;
             transition: color 0.2s;
+            text-decoration: none;
         }
         .chevron:hover { color: rgba(255, 255, 255, 0.9); }
         .chevron.left { left: 10px; }
@@ -33,23 +34,30 @@
 </head>
 <body>
     <div id="container">
-        <img id="img" alt="Random image">
-        <div class="chevron left" id="prev-btn">&#8249;</div>
-        <div class="chevron right" id="next-btn">&#8250;</div>
+        <a href="#" id="img-link"><img id="img" alt="Random image"></a>
+        <a href="#" class="chevron left" id="prev-btn">&#8249;</a>
+        <a href="#" class="chevron right" id="next-btn">&#8250;</a>
     </div>
     <script>
         let currentData = null;
 
         function loadImageSrc(hash) {
             document.getElementById('img').src = '/' + hash + '/data';
+            document.getElementById('img-link').href = '#';
             history.replaceState(null, '', '#' + hash);
         }
 
         async function loadInfo(hash) {
             const response = await fetch('/' + hash);
+            if (!response.ok) {
+                loadRandom();
+                return;
+            }
             currentData = await response.json();
             loadImageSrc(currentData.img);
             document.getElementById('img').title = currentData.filename || '';
+            document.getElementById('prev-btn').href = '#' + currentData.previous;
+            document.getElementById('next-btn').href = '#' + currentData.next;
         }
 
         async function loadRandom() {
@@ -58,24 +66,30 @@
             await loadInfo(data.img);
         }
 
-        document.getElementById('img').addEventListener('click', loadRandom);
-        document.getElementById('prev-btn').addEventListener('click', function() {
-            if (currentData && currentData.previous) loadInfo(currentData.previous);
+        window.addEventListener('hashchange', function() {
+            const hash = window.location.hash.slice(1);
+            if (hash) {
+                loadInfo(hash);
+            } else {
+                loadRandom();
+            }
         });
-        document.getElementById('next-btn').addEventListener('click', function() {
-            if (currentData && currentData.next) loadInfo(currentData.next);
+
+        window.addEventListener('hashchange', function() {
+            const hash = window.location.hash.slice(1);
+            if (hash) loadInfo(hash);
         });
 
         document.addEventListener('keydown', function(e) {
+            e.preventDefault();
             if (e.code === 'Space') {
-                e.preventDefault();
-                loadRandom();
-            } else if (e.code === 'ArrowLeft' && currentData && currentData.previous) {
-                e.preventDefault();
-                loadInfo(currentData.previous);
-            } else if (e.code === 'ArrowRight' && currentData && currentData.next) {
-                e.preventDefault();
-                loadInfo(currentData.next);
+                window.location.hash = '';
+            } else if (e.code === 'ArrowLeft') {
+                document.getElementById('prev-btn').click();
+            } else if (e.code === 'ArrowRight') {
+                document.getElementById('next-btn').click();
+            } else {
+                return;
             }
         });
 
