diff --git a/appview/middleware/middleware.go b/appview/middleware/middleware.go
--- a/appview/middleware/middleware.go
+++ b/appview/middleware/middleware.go
@@ -217,7 +217,7 @@
 			if err != nil {
 				// invalid did or handle
 				log.Println("failed to resolve repo")
-				mw.pages.Error404(w)
+				mw.pages.ErrorKnot404(w)
 				return
 			}
 
diff --git a/appview/pages/templates/errors/404.html b/appview/pages/templates/errors/404.html
--- a/appview/pages/templates/errors/404.html
+++ b/appview/pages/templates/errors/404.html
@@ -1,8 +1,28 @@
 {{ define "title" }}404 · tangled{{ end }}
 
 {{ define "content" }}
-    <h1>404 &mdash; nothing like that here!</h1>
-    <p>
-        It seems we couldn't find what you were looking for. Sorry about that!
-    </p>
+<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+    <div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+        <div class="mb-6">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                {{ i "search-x" "w-8 h-8 text-gray-400 dark:text-gray-500" }}
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+                404 &mdash; page not found
+            </h1>
+            <p class="text-gray-600 dark:text-gray-300">
+                The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+                <a href="javascript:history.back()" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    {{ i "arrow-left" "w-4 h-4" }}
+                    go back
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}
diff --git a/appview/pages/templates/errors/500.html b/appview/pages/templates/errors/500.html
--- a/appview/pages/templates/errors/500.html
+++ b/appview/pages/templates/errors/500.html
@@ -1,6 +1,39 @@
 {{ define "title" }}500 &middot; tangled{{ end }}
 
 {{ define "content" }}
-    <h1>500 &mdash; something broke!</h1>
-    <p>We're working on getting service back up. Hang tight!</p>
-{{ end }}
+<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+    <div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+        <div class="mb-6">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+                {{ i "alert-triangle" "w-8 h-8 text-red-500 dark:text-red-400" }}
+            </div>
+        </div>
+        
+        <div class="space-y-4">
+            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+                500 &mdash; internal server error
+            </h1>
+            <p class="text-gray-600 dark:text-gray-300">
+                Something went wrong on our end. We've been notified and are working to fix the issue.
+            </p>
+            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded p-3 text-sm text-yellow-800 dark:text-yellow-200">
+                <div class="flex items-center gap-2">
+                    {{ i "info" "w-4 h-4" }}
+                    <span class="font-medium">we're on it!</span>
+                </div>
+                <p class="mt-1">Our team has been automatically notified about this error.</p>
+            </div>
+            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+                <button onclick="location.reload()" class="btn-create px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline hover:text-white">
+                    {{ i "refresh-cw" "w-4 h-4" }}
+                    try again
+                </button>
+                <a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    {{ i "home" "w-4 h-4" }}
+                    back to home
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/appview/pages/templates/errors/503.html b/appview/pages/templates/errors/503.html
--- a/appview/pages/templates/errors/503.html
+++ b/appview/pages/templates/errors/503.html
@@ -1,9 +1,32 @@
 {{ define "title" }}503 &middot; tangled{{ end }}
 
 {{ define "content" }}
-    <h1>503 &mdash; unable to reach knot</h1>
-    <p>
-        We were unable to reach the knot hosting this repository. Try again
-        later.
-    </p>
+<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+    <div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+        <div class="mb-6">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
+                {{ i "server-off" "w-8 h-8 text-blue-500 dark:text-blue-400" }}
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+                503 &mdash; service unavailable
+            </h1>
+            <p class="text-gray-600 dark:text-gray-300">
+                We were unable to reach the knot hosting this repository. The service may be temporarily unavailable.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+                <button onclick="location.reload()" class="btn-create px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline hover:text-white">
+                    {{ i "refresh-cw" "w-4 h-4" }}
+                    try again
+                </button>
+                <a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    {{ i "arrow-left" "w-4 h-4" }}
+                    back to timeline
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}
diff --git a/appview/pages/templates/errors/knot404.html b/appview/pages/templates/errors/knot404.html
--- a/appview/pages/templates/errors/knot404.html
+++ b/appview/pages/templates/errors/knot404.html
@@ -1,9 +1,28 @@
 {{ define "title" }}404 &middot; tangled{{ end }}
 
 {{ define "content" }}
-    <h1>404 &mdash; repository not found!</h1>
-    <p>
-        The repository you were looking for could not be found.
-        The knot serving the repository may be unavailable.
-    </p>
+<div class="flex flex-col items-center justify-center min-h-[60vh] text-center">
+    <div class="bg-white dark:bg-gray-800 rounded-lg drop-shadow-sm p-8 max-w-lg mx-auto">
+        <div class="mb-6">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
+                {{ i "book-x" "w-8 h-8 text-orange-500 dark:text-orange-400" }}
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
+                404 &mdash; repository not found
+            </h1>
+            <p class="text-gray-600 dark:text-gray-300">
+                The repository you were looking for could not be found. The knot serving the repository may be unavailable.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-6">
+                <a href="/" class="btn px-4 py-2 rounded flex items-center gap-2 no-underline hover:no-underline">
+                    {{ i "arrow-left" "w-4 h-4" }}
+                    back to timeline
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}