diff --git a/frontend/404.html b/frontend/404.html
index 381fa674..dbc21861 100644
--- a/frontend/404.html
+++ b/frontend/404.html
@@ -1,3 +1,53 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>404 - Page Not Found</title>
+  <style>
+    body {
+      background: #0d1117;
+      color: #58a6ff;
+      font-family: monospace;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+
+    .terminal {
+      max-width: 700px;
+      padding: 20px;
+    }
+
+    a {
+      color: #7ee787;
+      text-decoration: none;
+      display: block;
+      margin-top: 10px;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <div class="terminal">
+    <p>guest@codepvg:~$ cd /that-page</p>
+    <p>bash: /that-page: No such file or directory</p>
+
+    <br>
+
+    <p>404: Route not found.</p>
+    <p>This route doesn't exist. Unlike your rank, which does.</p>
+
+    <a href="/leaderboard">→ Leaderboard</a>
+    <a href="/registration">→ Registration</a>
+  </div>
+</body>
+</html>
 <!doctype html>
 <html lang="en">
   <head>
diff --git a/frontend/index.html b/frontend/index.html
index 3255d3b0..58629b16 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -92,8 +92,13 @@
         </div>
       </div>
     </main>
+  
+    <div class="custom-cursor"></div>
+    
     <script src="js/boot.js"></script>
     <script src="js/hero_fx.js"></script>
     <script src="js/matrix.js"></script>
+    <script src="js/custom_cursor.js"></script>
   </body>
+
 </html>
diff --git a/frontend/js/custom_cursor.js b/frontend/js/custom_cursor.js
new file mode 100644
index 00000000..0a0d6d70
--- /dev/null
+++ b/frontend/js/custom_cursor.js
@@ -0,0 +1,26 @@
+const cursor = document.querySelector(".custom-cursor");
+
+let lastTrail = 0;
+
+document.addEventListener("mousemove", (e) => {
+  cursor.style.left = e.clientX + "px";
+  cursor.style.top = e.clientY + "px";
+
+  const now = Date.now();
+
+    if (now - lastTrail > 20) {
+    lastTrail = now;
+
+    const trail = document.createElement("div");
+    trail.className = "trail";
+
+    trail.style.left = e.clientX + "px";
+    trail.style.top = e.clientY + "px";
+
+    document.body.appendChild(trail);
+
+    setTimeout(() => {
+    trail.remove();
+    }, 500);
+  }
+});
\ No newline at end of file
diff --git a/frontend/styles/main.css b/frontend/styles/main.css
index cc6604b3..d33214f4 100644
--- a/frontend/styles/main.css
+++ b/frontend/styles/main.css
@@ -2575,6 +2575,56 @@ body::-webkit-scrollbar-thumb {
   color: var(--text-muted);
 }
 
+
+
+.custom-cursor {
+  position: fixed;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #00ff66;
+  box-shadow:
+    0 0 10px #00ff66,
+    0 0 20px #00ff66,
+    0 0 40px #00ff66;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  transition: transform 0.08s linear;
+}
+
+.trail {
+  position: fixed;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #00ff66;
+  box-shadow:
+    0 0 10px #00ff66,
+    0 0 20px #00ff66,
+    0 0 30px #00ff66;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  animation: fadeTrail 0.8s linear forwards;
+  z-index: 9998;
+}
+
+@keyframes fadeTrail {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+}
+
+body{
+  cursor: none;
+}
+=======
 /* scroll to top button */
 #scroll-top-btn {
   display: none;
diff --git a/server.js b/server.js
index 8ab527e7..d32dafc0 100644
--- a/server.js
+++ b/server.js
@@ -171,3 +171,10 @@ app.use((req, res) => {
 app.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);
 });
+
+// Must be last route
+app.use((req, res) => {
+  res
+    .status(404)
+    .sendFile(path.join(__dirname, "frontend", "404.html"));
+});
\ No newline at end of file
