diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/CrashErrorComponent/index.tsx
index f5018f885..0cf376195 100644
--- a/src/frontend/src/components/CrashErrorComponent/index.tsx
+++ b/src/frontend/src/components/CrashErrorComponent/index.tsx
@@ -1,36 +1,63 @@
+import { XCircle } from "lucide-react";
 import { crashComponentPropsType } from "../../types/components";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
 
 export default function CrashErrorComponent({
   error,
   resetErrorBoundary,
 }: crashComponentPropsType): JSX.Element {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
-      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
-        <h1 className="mb-4 text-3xl text-status-red">
-          Oops! An unknown error has occurred.
-        </h1>
-        <p className="mb-4 text-xl text-foreground">
-          Please click the 'Reset Application' button to restore the
-          application's state. If the error persists, please create an issue on
-          our GitHub page. We apologize for any inconvenience this may have
-          caused.
-        </p>
-        <div className="flex justify-center">
-          <button
-            onClick={resetErrorBoundary}
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
-          >
-            Reset Application
-          </button>
-          <a
-            href="https://github.com/logspace-ai/langflow/issues/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
-          >
-            Create Issue
-          </a>
+    <div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50">
+      <div className="flex h-screen w-screen flex-col  bg-background text-start shadow-lg">
+        <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
+          <Card className="p-8">
+            <CardHeader>
+              <div className="m-auto">
+                <XCircle strokeWidth={1.5} className="h-16 w-16" />
+              </div>
+              <div>
+                <p className="mb-4 text-xl text-foreground">
+                  Sorry, we found an unexpected error!
+                </p>
+              </div>
+            </CardHeader>
+
+            <CardContent className="grid">
+              <div>
+                <p>
+                Please report errors with detailed tracebacks on the{" "}
+                  <a
+                    href="https://github.com/logspace-ai/langflow/issues"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-medium  hover:underline "
+                  >
+                    GitHub Issues
+                  </a>{" "}
+                  page.
+                  <br></br>
+                   Thank you!
+                </p>
+              </div>
+            </CardContent>
+
+            <CardFooter>
+              <div className="m-auto mt-4 flex justify-center">
+                <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
+
+                <a
+                  href="https://github.com/logspace-ai/langflow/issues/new"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button className="ml-3" variant={"outline"}>
+                    Report on GitHub
+                  </Button>
+                </a>
+              </div>
+            </CardFooter>
+          </Card>
         </div>
       </div>
     </div>