diff --git a/apps/web/pages/404.jsx b/apps/web/pages/404.jsx
index 29d8a4ce8..cda9ebbdc 100644
--- a/apps/web/pages/404.jsx
+++ b/apps/web/pages/404.jsx
@@ -1,10 +1,34 @@
-import Link from "next/link";
+import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 
-export default function FourOhFour() {
+import { Button } from "@documenso/ui";
+import Logo from "../components/logo";
+
+export default function Custom404() {
   return (
     <>
-      <h1>404 - Page Not Found</h1>
-      <Link href="/">Go back home</Link>
+      <main className="relative min-h-full bg-gray-100 isolate">
+        <Logo className="absolute w-20 top-10 left-10" />
+
+        <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-brown">404</p>
+          <h1 className="mt-4 text-3xl font-bold tracking-tight text-brown sm:text-5xl">
+            Page not found
+          </h1>
+          <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">
+            <Button
+              color="secondary"
+              href="/"
+              icon={ArrowSmallLeftIcon}
+              className="text-base font-semibold leading-7 text-brown"
+            >
+              Back to home
+            </Button>
+          </div>
+        </div>
+      </main>
     </>
   );
 }
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 85cee780a..460341788 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -24,7 +24,7 @@ export function Button(props: any) {
     >
       {props.icon ? (
         <props.icon
-          className="inline text-inherit h-5 mr-1"
+          className="inline h-5 mr-1 text-inherit"
           aria-hidden="true"
         ></props.icon>
       ) : (
@@ -47,7 +47,7 @@ export function Button(props: any) {
     >
       {props.icon ? (
         <props.icon
-          className="inline text-inherit h-5 mr-1"
+          className="inline h-5 mr-1 text-inherit"
           aria-hidden="true"
         ></props.icon>
       ) : (