diff --git a/src/middleware.js b/src/middleware.js
index 7b7b088d..4975e070 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -3,11 +3,16 @@ import { NextResponse } from "next/server";
 export function middleware(req) {
   // Check the Host header, if HOMEPAGE_ALLOWED_HOSTS is set
   const host = req.headers.get("host");
-  const allowedHosts = process.env.HOMEPAGE_ALLOWED_HOSTS
-    ? process.env.HOMEPAGE_ALLOWED_HOSTS.split(",").concat(["localhost:3000"])
-    : [];
-  if (allowedHosts.length && !(host || allowedHosts.includes(host))) {
-    return new NextResponse("Invalid Host header", { status: 400 });
+  let allowedHosts = ["localhost:3000"];
+  if (process.env.HOMEPAGE_ALLOWED_HOSTS) {
+    allowedHosts = allowedHosts.concat(process.env.HOMEPAGE_ALLOWED_HOSTS.split(","));
+  }
+  if (!host || !allowedHosts.includes(host)) {
+    // eslint-disable-next-line no-console
+    console.error(
+      `Host validation failed for: ${host}. Hint: Set HOMEPAGE_ALLOWED_HOSTS to allow requests from this host.`,
+    );
+    return NextResponse.json({ error: "Host validation failed. See logs for more details." }, { status: 400 });
   }
   return NextResponse.next();
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index acf23340..0b1de2f4 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -86,6 +86,7 @@ function Index({ initialSettings, fallback }) {
   const windowFocused = useWindowFocus();
   const [stale, setStale] = useState(false);
   const { data: errorsData } = useSWR("/api/validate");
+  const { error: validateError } = errorsData || {};
   const { data: hashData, mutate: mutateHash } = useSWR("/api/hash");
 
   useEffect(() => {
@@ -117,6 +118,24 @@ function Index({ initialSettings, fallback }) {
     }
   }, [hashData]);
 
+  if (validateError) {
+    return (
+      <div className="w-full h-screen container m-auto justify-center p-10 pointer-events-none">
+        <div className="flex flex-col">
+          <div className="basis-1/2 bg-theme-500 dark:bg-theme-600 text-theme-600 dark:text-theme-300 m-2 rounded-md font-mono shadow-md border-4 border-transparent">
+            <div className="bg-rose-200 text-rose-800 dark:text-rose-200 dark:bg-rose-800 p-2 rounded-md font-bold">
+              <BiError className="float-right w-6 h-6" />
+              Error
+            </div>
+            <div className="p-2 text-theme-100 dark:text-theme-200">
+              <pre className="opacity-50 font-bold pb-2">{validateError}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (stale) {
     return (
       <div className="flex items-center justify-center h-screen">