diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
index b8cba46c..4ec1cb46 100644
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
+import { Coffee } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
 
 useHead({ title: 'Page not found - IT Tools' });
 </script>
 
 <template>
-  <div class="e404-wrapper">
-    <n-result status="404" title="404 Not Found" description="Sorry, this page does not seem to exist">
-      <template #footer>
-        <router-link to="/" #="{ navigate, href }" custom>
-          <n-button tag="a" :href="href" secondary type="success" @click="navigate"> Back home </n-button>
-        </router-link>
-      </template>
-    </n-result>
+  <div mt-20 flex flex-col items-center>
+    <n-icon :component="Coffee" size="100" depth="3" />
+
+    <n-h1 m-0 mt-3>404 Not Found</n-h1>
+    <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
+    <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
+
+    <router-link to="/" #="{ navigate, href }" custom>
+      <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button>
+    </router-link>
   </div>
 </template>
-
-<style scoped>
-.e404-wrapper {
-  padding-top: 150px;
-}
-</style>