diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 00000000..5fee1870
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,12 @@
+import Image from 'next/image'
+import LayoutCenter from '../components/layout-center'
+import styles from '../styles/404.module.css'
+
+export default function fourZeroFour () {
+  return (
+    <LayoutCenter>
+      <Image width='500' height='376' src='/maze.gif' />
+      <h1 className={styles.fourZeroFour}><span>404</span><span className={styles.notFound}>page not found</span></h1>
+    </LayoutCenter>
+  )
+}
diff --git a/pages/500.js b/pages/500.js
new file mode 100644
index 00000000..419ddc08
--- /dev/null
+++ b/pages/500.js
@@ -0,0 +1,12 @@
+import Image from 'next/image'
+import LayoutCenter from '../components/layout-center'
+import styles from '../styles/404.module.css'
+
+export default function fourZeroFour () {
+  return (
+    <LayoutCenter>
+      <Image width='500' height='375' src='/falling.gif' />
+      <h1 className={styles.fourZeroFour}><span>500</span><span className={styles.notFound}>server error</span></h1>
+    </LayoutCenter>
+  )
+}
diff --git a/public/falling.gif b/public/falling.gif
new file mode 100644
index 00000000..1420e65b
Binary files /dev/null and b/public/falling.gif differ
diff --git a/public/maze.gif b/public/maze.gif
new file mode 100644
index 00000000..e9225f88
Binary files /dev/null and b/public/maze.gif differ
diff --git a/styles/404.module.css b/styles/404.module.css
new file mode 100644
index 00000000..da0d1748
--- /dev/null
+++ b/styles/404.module.css
@@ -0,0 +1,13 @@
+.fourZeroFour {
+    font-family: 'lightning';
+    font-size: 96px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 1rem;
+    width: 100%;
+}
+
+.notFound {
+    font-size: 24px;
+}
\ No newline at end of file