diff --git a/src/routes/404.svelte b/src/routes/404.svelte
index 911b9553..af6b95ae 100644
--- a/src/routes/404.svelte
+++ b/src/routes/404.svelte
@@ -1,6 +1,42 @@
 <script>
-  import { stores, goto } from '@sapper/app';
+  import { stores, goto } from "@sapper/app";
   const { page } = stores();
+  import PrimaryButton from "../components/PrimaryButton/index.svelte";
+  const src = "./bg-404.png";
 
-  $: console.log('route', $page);
+  $: console.log("route", $page);
 </script>
+
+<div
+  style="background-image:url({src});
+background-size:contain"
+  class="error flex items-center justify-center w-screen overflow-hidden"
+>
+  <div
+    class="error flex items-center justify-center gap-20 bg-gray-200 dark:bg-transparent"
+  >
+    <div class=" dark:text-white gap-3 w-2/5">
+      <p class="text-3xl dark:text-white font-semibold mb-5">
+        Oops😕,where did the page go?
+      </p>
+      <p class="text-base text-gray-600 dark:text-white mb-5">
+        We're sorry, but something went wrong and we can't show you the page
+        you're looking for. In the meantime, here's a joke to make you laugh:<br
+        />
+        What do you call a fish with no eyes? Fsh!
+      </p>
+      <PrimaryButton
+        label="Go to Home"
+        className="rounded-md"
+        onClick={() => goto("/")}
+      />
+    </div>
+    <img src="/classroom-404.png" alt="classroomio_error_image" />
+  </div>
+</div>
+
+<style>
+  .error {
+    height: calc(100vh - 57px);
+  }
+</style>
diff --git a/static/bg-404.png b/static/bg-404.png
new file mode 100644
index 00000000..0d01b468
Binary files /dev/null and b/static/bg-404.png differ
diff --git a/static/classroom-404.png b/static/classroom-404.png
new file mode 100644
index 00000000..cf9a03be
Binary files /dev/null and b/static/classroom-404.png differ