diff --git a/ui/src/routes/__root.tsx b/ui/src/routes/__root.tsx
index b661f1a..873fd29 100644
--- a/ui/src/routes/__root.tsx
+++ b/ui/src/routes/__root.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Menu, Database } from "lucide-react";
+import { Menu, Database, Frown } from "lucide-react";
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
 
 import { Button } from "@/components/ui/button";
@@ -15,6 +15,7 @@ const TanStackRouterDevtools = import.meta.env.PROD
 
 export const Route = createRootRoute({
   component: Root,
+  errorComponent: ErrorComponent,
 });
 
 export function Root() {
@@ -130,3 +131,14 @@ function Github({ className }: { className: string }) {
     </svg>
   );
 }
+
+function ErrorComponent() {
+  return (
+    <div className="w-screen h-screen text-red-500 flex flex-col items-center justify-center gap-6">
+      <Frown className="w-12 h-12" />
+      <h1 className="scroll-m-20 text-3xl tracking-tight lg:text-4xl">
+        Something Went Wrong.
+      </h1>
+    </div>
+  );
+}