diff --git a/static-site/app/not-found.tsx b/static-site/app/not-found.tsx
new file mode 100644
index 000000000..b73ad8309
--- /dev/null
+++ b/static-site/app/not-found.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import styles from "./styles/not-found.module.css";
+
+export default function FourOhFour(): React.ReactElement {
+  return (
+    <>
+      <div className={styles.errorContainer}>
+        Oops - that page doesn’t exist! (404).
+        <br />
+        Maybe start again with <a href="/">our main page</a>?
+      </div>
+    </>
+  );
+}
diff --git a/static-site/app/styles/globals.css b/static-site/app/styles/globals.css
index 15f1e374a..45dcbdc2f 100644
--- a/static-site/app/styles/globals.css
+++ b/static-site/app/styles/globals.css
@@ -15,6 +15,7 @@
 
   --blue: #5097ba;
   --darkGrey: #333;
+  --errorRed: #DE3C26;
   --mediumGrey: #888;
   --lightGrey: #ccc;
 
diff --git a/static-site/app/styles/not-found.module.css b/static-site/app/styles/not-found.module.css
new file mode 100644
index 000000000..d525cc306
--- /dev/null
+++ b/static-site/app/styles/not-found.module.css
@@ -0,0 +1,15 @@
+.errorContainer {
+  color: var(--errorRed);
+  font-size: 28px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0 80px;
+  text-align: center;
+}
+
+.errorContainer a {
+  color: var(--errorRed);
+  text-decoration: underline;
+}
diff --git a/test/requests.test.js b/test/requests.test.js
index 09b24e897..43bcf1c9c 100644
--- a/test/requests.test.js
+++ b/test/requests.test.js
@@ -328,7 +328,7 @@ function testBase404Page(path) {
     the 404 page, but nextstrain.org without JS is not feasible */
     test("body looks like 404 page", async () => {
       const res = await req;
-      expect((await res.text()).includes('"page":"/404"')).toBe(true)
+      expect((await res.text()).includes("Oops - that page doesn’t exist!")).toBe(true)
     });
   });
 }