diff --git a/web/src/components/health/healthcheck.tsx b/web/src/components/health/healthcheck.tsx
index ec38f5c01..7bcb5648e 100644
--- a/web/src/components/health/healthcheck.tsx
+++ b/web/src/components/health/healthcheck.tsx
@@ -1,24 +1,51 @@
 "use client";
 
-import { errorHandlingFetcher } from "@/lib/fetcher";
+import { errorHandlingFetcher, FetchError, RedirectError } from "@/lib/fetcher";
 import useSWR from "swr";
+import { useRouter } from "next/navigation";
+import { Modal } from "../Modal";
 
 export const HealthCheckBanner = () => {
+  const router = useRouter();
   const { error } = useSWR("/api/health", errorHandlingFetcher);
+
   if (!error) {
     return null;
   }
 
-  return (
-    <div className="text-xs mx-auto bg-gradient-to-r from-red-900 to-red-700 p-2 rounded-sm border-hidden text-gray-300">
-      <p className="font-bold pb-1">The backend is currently unavailable.</p>
+  if (error instanceof RedirectError) {
+    return (
+      <Modal
+        width="w-1/4"
+        className="overflow-y-hidden flex flex-col"
+        title="You have been logged out!"
+      >
+        <div className="flex flex-col gap-y-4">
+          <p className="text-lg ">
+            You can click &quot;Log in&quot; to log back in! Apologies for the
+            inconvenience.
+          </p>
+          <a
+            href="/auth/login"
+            className="w-full mt-4 mx-auto rounded-md text-neutral-200 py-2 bg-neutral-800 text-center hover:bg-neutral-700 animtate duration-300 transition-bg  "
+          >
+            Log in
+          </a>
+        </div>
+      </Modal>
+    );
+  } else {
+    return (
+      <div className="text-xs mx-auto bg-gradient-to-r from-red-900 to-red-700 p-2 rounded-sm border-hidden text-gray-300">
+        <p className="font-bold pb-1">The backend is currently unavailable.</p>
 
-      <p className="px-1">
-        If this is your initial setup or you just updated your Danswer
-        deployment, this is likely because the backend is still starting up.
-        Give it a minute or two, and then refresh the page. If that does not
-        work, make sure the backend is setup and/or contact an administrator.
-      </p>
-    </div>
-  );
+        <p className="px-1">
+          If this is your initial setup or you just updated your Danswer
+          deployment, this is likely because the backend is still starting up.
+          Give it a minute or two, and then refresh the page. If that does not
+          work, make sure the backend is setup and/or contact an administrator.
+        </p>
+      </div>
+    );
+  }
 };
diff --git a/web/src/lib/fetcher.ts b/web/src/lib/fetcher.ts
index 6acfd1fb1..73e8689b4 100644
--- a/web/src/lib/fetcher.ts
+++ b/web/src/lib/fetcher.ts
@@ -1,7 +1,6 @@
 export class FetchError extends Error {
   status: number;
   info: any;
-
   constructor(message: string, status: number, info: any) {
     super(message);
     this.status = status;
@@ -9,10 +8,29 @@ export class FetchError extends Error {
   }
 }
 
+export class RedirectError extends FetchError {
+  constructor(message: string, status: number, info: any) {
+    super(message, status, info);
+  }
+}
+
+const DEFAULT_AUTH_ERROR_MSG =
+  "An error occurred while fetching the data, related to the user's authentication status.";
+
 const DEFAULT_ERROR_MSG = "An error occurred while fetching the data.";
 
 export const errorHandlingFetcher = async (url: string) => {
   const res = await fetch(url);
+
+  if (res.status === 403) {
+    const redirect = new RedirectError(
+      DEFAULT_AUTH_ERROR_MSG,
+      res.status,
+      await res.json()
+    );
+    throw redirect;
+  }
+
   if (!res.ok) {
     const error = new FetchError(
       DEFAULT_ERROR_MSG,
@@ -21,5 +39,6 @@ export const errorHandlingFetcher = async (url: string) => {
     );
     throw error;
   }
+
   return res.json();
 };