diff --git a/projects/website/src/app/global-error.tsx b/projects/website/src/app/global-error.tsx
index 362f8e8..383ddee 100644
--- a/projects/website/src/app/global-error.tsx
+++ b/projects/website/src/app/global-error.tsx
@@ -1,23 +1,37 @@
 "use client";
 
-import * as Sentry from "@sentry/nextjs";
-import NextError from "next/error";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
 import { useEffect } from "react";
+import * as Sentry from "@sentry/nextjs";
+import Card from "@/components/card";
 
-export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+/**
+ * Error page component for handling global errors.
+ *
+ * @param error - The error object passed to the component.
+ */
+export default function ErrorPage({ error }: { error: Error & { digest?: string } }) {
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);
 
   return (
-    <html>
-      <body>
-        {/* `NextError` is the default Next.js error page component. Its type
-        definition requires a `statusCode` prop. However, since the App Router
-        does not expose status codes for errors, we simply pass 0 to render a
-        generic error message. */}
-        <NextError statusCode={0} />
-      </body>
-    </html>
+    <Card>
+      <div className="flex flex-col items-center justify-center text-center h-screen">
+        <GlobeAmericasIcon className="h-24 w-24 text-red-500" />
+        <h1 className="text-4xl font-bold text-gray-200 mt-6">Oops! Something went wrong.</h1>
+        <p className="text-lg text-gray-400 mt-2">
+          We&#39;re experiencing some technical difficulties. Please try again later.
+        </p>
+        {error?.digest && <p className="text-sm text-gray-500 mt-1">Error Code: {error.digest}</p>}
+
+        <div className="mt-6">
+          <Link href="/" className="text-blue-500 hover:underline">
+            Go back to the homepage
+          </Link>
+        </div>
+      </div>
+    </Card>
   );
 }
