diff --git a/package.json b/package.json
index 3a5ebe2f..a37a8490 100644
--- a/package.json
+++ b/package.json
@@ -95,4 +95,4 @@
     "linux": {},
     "mac": {}
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Navigation/index.svelte b/src/components/Navigation/index.svelte
index 495cff00..a598957f 100644
--- a/src/components/Navigation/index.svelte
+++ b/src/components/Navigation/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { goto, stores } from '@sapper/app';
   import { user } from '../../utils/store/user';
+  import { appStore } from '../../utils/store/app';
   import { isCoursePage } from '../../utils/functions/app';
   import PrimaryButton from '../PrimaryButton/index.svelte';
   import { VARIANTS } from '../PrimaryButton/constants';
@@ -86,7 +87,9 @@
     <span class="flex-grow" />
 
     {#if $user.isLoggedIn}
-      <li><a class="block" href="/lms"> Go to LMS </a></li>
+      {#if $appStore.isStudentDomain}
+        <li><a class="block" href="/lms"> Go to LMS </a></li>
+      {/if}
     {:else}
       <li>
         {#if !disableLogin}
diff --git a/src/routes/404.svelte b/src/routes/404.svelte
index 911b9553..ab798b12 100644
--- a/src/routes/404.svelte
+++ b/src/routes/404.svelte
@@ -1,6 +1,54 @@
 <script>
   import { stores, goto } from '@sapper/app';
-  const { page } = stores();
 
+  import { appStore } from '../utils/store/app';
+  import PrimaryButton from '../components/PrimaryButton/index.svelte';
+  const { page } = stores();
+  const src = './bg-404.png';
   $: console.log('route', $page);
 </script>
+
+<div
+  style={$appStore.isDark ? `background-image:url(${src})` : ''}
+  class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
+>
+  <div class=" dark:text-white gap-3 w-4/5 lg: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"
+    class="errorImg"
+  />
+</div>
+
+<style>
+  .error {
+    height: calc(100vh - 57px);
+  }
+
+  @media (max-width: 920px) {
+    .error {
+      flex-direction: column-reverse;
+      gap: 20px;
+    }
+    .errorImg {
+      width: 160px;
+      height: 160px;
+    }
+  }
+</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