diff --git a/apps/web/pages/404.jsx b/apps/web/pages/404.jsx
new file mode 100644
index 000000000..79ef6cf95
--- /dev/null
+++ b/apps/web/pages/404.jsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import bgwood from "../public/img/bgwood.jpg";
+
+export default function Custom404() {
+  return (
+    <>
+      <main className="relative min-h-full isolate">
+        <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">
+            404
+          </p>
+          <h1 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+            Page not found
+          </h1>
+          <p className="mt-4 text-base text-slate-700 sm:mt-6">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+          <div className="flex justify-center mt-10">
+            <Link
+              href="/"
+              className="text-sm font-semibold leading-7 text-slate-900"
+            >
+              <span aria-hidden="true">&larr;</span> Back to home
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/public/img/bgwood.jpg b/apps/web/public/img/bgwood.jpg
new file mode 100644
index 000000000..0d41ebfe1
Binary files /dev/null and b/apps/web/public/img/bgwood.jpg differ
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index e0527d9a0..097580311 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>
       ) : (
@@ -46,7 +46,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>
       ) : (