diff --git a/otter/src/web/templates/base.html b/otter/src/web/templates/base.html
index d9fe084..aeb5718 100644
--- a/otter/src/web/templates/base.html
+++ b/otter/src/web/templates/base.html
@@ -12,7 +12,7 @@ a:hover {
 }
         </style>
     </head>
-    <body>
+    <body hx-on::response-error="showErrorDialog(event)">
         <main>
             <nav>
                 <ul>
@@ -37,5 +37,38 @@ a:hover {
                 {{ inner | safe }}
             </article>
         </main>
+
+        <dialog id="error-dialog">
+            <article>
+                <header>
+                    <button aria-label="Close" rel="prev" onclick="this.closest('dialog').close()"></button>
+                    <h5>Failed web request</h5>
+                </header>
+                <p id="error-message">Failed web request</p>
+            </article>
+        </dialog>
+
+        <script>
+            function showErrorDialog(evt) {
+                // TODO exclude certain error codes, e.g. 400 bad request
+                const xhr = evt.detail.xhr;
+                const errorMessage = document.getElementById('error-message');
+
+                let message = 'An unexpected error occurred.';
+
+                if (xhr.status === 401) {
+                    message = 'You need to log in.';
+                } else if (xhr.status === 403) {
+                    message = 'Access denied.';
+                } else if (xhr.status === 404) {
+                    message = 'Resource not found.';
+                } else if (xhr.status === 500) {
+                    message = 'Server error occurred.';
+                }
+
+                errorMessage.textContent = message;
+                document.getElementById('error-dialog').showModal();
+            }
+        </script>
     </body>
 </html>
