diff --git a/apps/web/pages/404.jsx b/apps/web/pages/404.jsx
index cb13a44af..1939e23d8 100644
--- a/apps/web/pages/404.jsx
+++ b/apps/web/pages/404.jsx
@@ -1,36 +1,32 @@
-import Image from "next/image";
-import Link from "next/link";
+import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 
-import bgwood from "../public/img/bgwood.jpg";
+import { Button } from "@documenso/ui";
 import Logo from "../components/logo";
 
 export default function Custom404() {
   return (
     <>
-      <main className="relative min-h-full isolate">
+      <main className="relative min-h-full bg-gray-200 isolate">
         <Logo className="absolute w-20 top-10 left-10" />
-        <Image
-          src={bgwood}
-          alt=""
-          className="absolute inset-0 object-cover object-top w-full h-full -z-10 grayscale"
-        />
+
         <div className="px-6 py-48 mx-auto text-center max-w-7xl sm:py-40 lg:px-8">
-          <p className="text-base font-semibold leading-8 text-slate-700">
+          <p className="text-base font-semibold leading-8 text-brown">
             404
           </p>
           <h1 className="mt-4 text-3xl font-bold tracking-tight text-brown sm:text-5xl font-monteserrat">
             Page not found
           </h1>
-          <p className="mt-4 text-base text-slate-700 sm:mt-6">
+          <p className="mt-4 text-base text-gray-700 sm:mt-6">
             Sorry, we couldn’t find the page you’re looking for.
           </p>
           <div className="flex justify-center mt-10">
-            <Link
+            <Button
+              color="secondary"
               href="/"
-              className="text-sm font-semibold leading-7 text-brown font-monteserrat"
+              className="text-base font-semibold leading-7 text-brown font-monteserrat"
             >
-              <span aria-hidden="true">&larr;</span> Back to home
-            </Link>
+              <ArrowSmallLeftIcon className="w-5 h-5 mr-2" /> Back to home
+            </Button>
           </div>
         </div>
       </main>