diff --git a/apps/dashboard/src/app/not-found.tsx b/apps/dashboard/src/app/not-found.tsx
new file mode 100644
index 00000000000..31dafe0b578
--- /dev/null
+++ b/apps/dashboard/src/app/not-found.tsx
@@ -0,0 +1,5 @@
+import { NotFoundPage } from "../components/not-found-page";
+
+export default function NotFound() {
+  return <NotFoundPage />;
+}
diff --git a/apps/dashboard/src/components/not-found-page.tsx b/apps/dashboard/src/components/not-found-page.tsx
new file mode 100644
index 00000000000..04274b92d84
--- /dev/null
+++ b/apps/dashboard/src/components/not-found-page.tsx
@@ -0,0 +1,86 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+
+export function NotFoundPage() {
+  return (
+    <div className="overflow-hidden">
+      <div className="container flex h-full min-h-screen flex-col justify-center">
+        <div className="flex flex-col items-center">
+          <div className="z-10 flex size-[90px] items-center justify-center rounded-3xl border bg-background font-semibold text-2xl text-muted-foreground tracking-tight shadow-lg md:size-[100px] md:text-3xl">
+            404
+          </div>
+
+          <div className="h-8" />
+
+          <p className="text-center font-bold text-3xl tracking-tighter md:text-5xl">
+            <span className="block"> Uh oh. </span>
+            <span className="block">Looks like web3</span>
+            <span className="block">can't be found here.</span>
+          </p>
+
+          <div className="h-12" />
+
+          <div>
+            <p className="text-center text-muted-foreground text-xl leading-7">
+              Try our{" "}
+              <TrackedLinkTW
+                category="page-not-found"
+                label="homepage"
+                href="/home"
+                className="text-foreground hover:underline"
+              >
+                homepage
+              </TrackedLinkTW>
+              ,{" "}
+              <TrackedLinkTW
+                category="page-not-found"
+                label="dashboard"
+                href="/team"
+                className="text-foreground hover:underline"
+              >
+                dashboard
+              </TrackedLinkTW>{" "}
+              or{" "}
+              <TrackedLinkTW
+                category="page-not-found"
+                label="portal"
+                href="https://portal.thirdweb.com"
+                className="text-foreground hover:underline"
+              >
+                developer portal
+              </TrackedLinkTW>{" "}
+              instead
+            </p>
+          </div>
+
+          <Aurora
+            color="hsl(var(--foreground)/8%)"
+            pos={{ top: "40%", left: "50%" }}
+            size={{ width: "100vw", height: "100vh" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AuroraProps = {
+  size: { width: string; height: string };
+  pos: { top: string; left: string };
+  color: string;
+};
+
+const Aurora: React.FC<AuroraProps> = ({ color, pos, size }) => {
+  return (
+    <div
+      className="pointer-events-none absolute"
+      style={{
+        top: pos.top,
+        left: pos.left,
+        width: size.width,
+        height: size.height,
+        transform: "translate(-50%, -50%)",
+        backgroundImage: `radial-gradient(ellipse at center, ${color}, transparent 60%)`,
+      }}
+    />
+  );
+};
diff --git a/apps/dashboard/src/pages/404.tsx b/apps/dashboard/src/pages/404.tsx
index 1798495d465..bbd6f5e05e9 100644
--- a/apps/dashboard/src/pages/404.tsx
+++ b/apps/dashboard/src/pages/404.tsx
@@ -1,101 +1,9 @@
-import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Flex } from "@chakra-ui/react";
-import { ChakraNextImage } from "components/Image";
-import { Aurora } from "components/homepage/Aurora";
-import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { PageId } from "page-id";
-import { Heading, Text, TrackedLink } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
-import NotFound from "../../public/assets/landingpage/not-found.png";
+import { NotFoundPage } from "../components/not-found-page";
 
 const PageNotFound: ThirdwebNextPage = () => {
-  useForceDarkTheme();
-  return (
-    <Flex
-      sx={{
-        // overwrite the theme colors because the home page is *always* in "dark mode"
-        "--chakra-colors-heading": "#F2F2F7",
-        "--chakra-colors-paragraph": "#AEAEB2",
-        "--chakra-colors-borderColor": "rgba(255,255,255,0.1)",
-      }}
-      justify="center"
-      flexDir="column"
-      as="main"
-      bg="#000"
-      justifyContent="center"
-      alignItems="center"
-      h="100vh"
-      overflow="hidden"
-    >
-      <HomepageSection>
-        <Aurora
-          pos={{ left: "50%", top: "50%" }}
-          size={{ width: "2400px", height: "2400px" }}
-          color="hsl(289deg 78% 30% / 35%)"
-        />
-
-        <div className="mb-6 flex items-center justify-center">
-          <div className="relative mb-6 flex items-center justify-center p-2">
-            <Box
-              position="absolute"
-              bgGradient="linear(to-r, #F213A4, #040BBF)"
-              top={0}
-              left={0}
-              bottom={0}
-              right={0}
-              borderRadius="3xl"
-              overflow="visible"
-              filter="blur(15px)"
-            />
-
-            <ChakraNextImage
-              alt=""
-              boxSize={{ base: 24, md: 32 }}
-              placeholder="empty"
-              src={NotFound}
-            />
-          </div>
-        </div>
-        <Heading textAlign="center" size="display.md">
-          Uh oh.
-          <br />
-          Looks like web3
-          <br />
-          can&apos;t be found here.
-        </Heading>
-        <Text size="body.2xl" textAlign="center" mt={3}>
-          Try our{" "}
-          <TrackedLink
-            category="page-not-found"
-            label="homepage"
-            href="/"
-            color="blue.500"
-          >
-            homepage
-          </TrackedLink>
-          ,{" "}
-          <TrackedLink
-            category="page-not-found"
-            label="homepage"
-            href="/team"
-            color="blue.500"
-          >
-            dashboard
-          </TrackedLink>{" "}
-          or{" "}
-          <TrackedLink
-            category="page-not-found"
-            label="portal"
-            href="https://portal.thirdweb.com"
-            color="blue.500"
-          >
-            developer portal
-          </TrackedLink>{" "}
-          instead.
-        </Text>
-      </HomepageSection>
-    </Flex>
-  );
+  return <NotFoundPage />;
 };
 
 PageNotFound.pageId = PageId.PageNotFound;