diff --git a/packages/dashboard-v2/src/pages/404.js b/packages/dashboard-v2/src/pages/404.js
index fd99104f..36c9165a 100644
--- a/packages/dashboard-v2/src/pages/404.js
+++ b/packages/dashboard-v2/src/pages/404.js
@@ -1,54 +1,27 @@
 import * as React from "react";
-import { Link } from "gatsby";
 
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
+import DashboardLayout from "../layouts/DashboardLayout";
 
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
+import { Metadata } from "../components/Metadata";
+import HighlightedLink from "../components/HighlightedLink";
 
-// markup
 const NotFoundPage = () => {
   return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
+    <div>
+      <Metadata>
+        <title>Not found</title>
+      </Metadata>
+      <section className="mt-12">
+        <h1>Oops! 😔</h1>
+        <p>Whatever you're looking for is not here.</p>
+        <p>
+          Would you like to <HighlightedLink to="/">go back to homepage</HighlightedLink>?
+        </p>
+      </section>
+    </div>
   );
 };
 
+NotFoundPage.Layout = DashboardLayout;
+
 export default NotFoundPage;