diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000000000000000000000000000000000000..00323d21ac87458145755c538e31e4ed8f5b299c
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1 @@
+ErrorDocument 404 "/error/404.php"
\ No newline at end of file
diff --git a/error/404.php b/error/404.php
new file mode 100644
index 0000000000000000000000000000000000000000..d1cd28cbac017fab6f689779f6428a716fefd443
--- /dev/null
+++ b/error/404.php
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Error 404</title>
+  <link rel="stylesheet" type="text/css" href="/public/css/error404.css">
+</head>
+<body>
+    <section>
+    <?php for ($i = 0; $i < 260; $i++) { ?>
+        <span></span>
+    <?php } ?>
+
+    <div class="random404">
+        <h1>404</h1>
+    </div>
+    <div class="mahasiswa">
+        <h1>Mahasiswa</h1>
+        <h1>Leveling</h1>
+    </div>
+    <div class="error404">
+        <div class="error404-content">
+        
+        <h2>Page Not Found</h2>
+        <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
+        <button id="btn" class="btn" onclick="window.location.href='/app/views/landing/'">Back to Home</button>
+        </div>
+    </div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/css/error404.css b/public/css/error404.css
new file mode 100644
index 0000000000000000000000000000000000000000..d3ab765a3f76906b93a7dd9cc8032e8b2848cf1b
--- /dev/null
+++ b/public/css/error404.css
@@ -0,0 +1,159 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Quicksand', sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #000;
+}
+
+section {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+    flex-wrap: wrap;
+    overflow: hidden;
+}
+
+section::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(black,red,orange,blue,green,yellow,red,black);
+    animation: animate 15s linear infinite;
+}
+
+section span {
+    position: relative;
+    display: block;
+    width: calc(6.25vw - 2px);
+    height: calc(6.25vw - 2px);
+    background: #181818;
+    z-index: 2;
+    transition: 1.5s;
+}
+
+section span:hover {
+    background: crimson;
+    transition: 0s;
+}
+
+section .error404 {
+    position: absolute;
+    width: 60%;
+    height: 60%;
+    background: transparent;  
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 20px;
+}
+
+section .random404,
+section .mahasiswa,
+section .leveling {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: transparent;  
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0;
+}
+
+section .random404 h1 {
+    width: 80%;
+    font-size: 200px;
+    color: white;
+    text-shadow: 0 10px 20px rgba(255, 0, 0, 0.5);
+    animation: animate 5s linear infinite;
+}
+
+section .mahasiswa h1 {
+    width: 120%;
+    font-size: 50px;
+    color: white;
+    text-shadow: 0 10px 20px rgba(38, 0, 255, 0.5);
+    animation: animate2 7s linear infinite;
+}
+
+section .error404 h2 {
+    font-size: 2em;
+    color: white;
+}
+
+section .error404 p {
+    font-size: 1.5em;
+    color: white;
+}
+
+section .error404 .btn {
+    position: relative;
+    display: inline-block;
+    padding: 10px 20px;
+    border-radius: 10px;
+    color: rgb(0, 0, 0);
+    background: rgb(255, 255, 255);
+    letter-spacing: 0.05em;
+    text-decoration: none;
+    font-size: 15px;
+    transition: all 0.3s;
+}
+
+section .error404 .btn:hover {
+    color: white;
+    background: crimson;
+}
+
+
+@keyframes animate {
+    0% {
+        transform: translateX(0%) translateY(-100%) rotate(0deg);
+    }
+    25% {
+        transform: translateX(100%) translateY(0%) rotate(90deg);
+    }
+    50% {
+        transform: translateX(0%) translateY(100%) rotate(180deg);
+    }
+    75% {
+        transform: translateX(-100%) translateY(0%) rotate(270deg);
+    }
+    100% {
+        transform: translateX(0%) translateY(-100%) rotate(360deg);
+    }
+}
+
+@keyframes animate2 {
+    0% {
+        transform: translateX(100%) translateY(-100%) rotate(360deg);
+    }
+    25% {
+        transform: translateX(0%) translateY(0%) rotate(270deg);
+    }
+    50% {
+        transform: translateX(-100%) translateY(100%) rotate(180deg);
+    }
+    75% {
+        transform: translateX(0) translateY(0%) rotate(90deg);
+    }
+    100% {
+        transform: translateX(100%) translateY(-100%) rotate(0);
+    }
+}