diff --git a/app/views/404.php b/app/views/404.php
index 4cabb7e7..ee671bf3 100644
--- a/app/views/404.php
+++ b/app/views/404.php
@@ -1,9 +1,10 @@
 <!-- views/404.php -->
 <?php require APPROOT . '/views/inc/header.php'; ?>
 
-<div class="container">
-    <h1>404 - Page Not Found</h1>
-    <p>The page you are looking for does not exist.</p>
+<div class="container" style="text-align: center">
+    <img class="error-img" style="width: 550px; margin-top: 30px;" src="<?php echo URLROOT ?>/images/404-img.jpg" alt="">
+    <br><br>
+    <a href="<?php echo URLROOT ?>/<?php echo $_SESSION['user_type'] ?>/index" class="error-btn">Go to home</a>
 </div>
 
 <?php require APPROOT . '/views/inc/footer.php'; ?>
diff --git a/public/css/style.css b/public/css/style.css
index 0203d9cb..a864c289 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -29,6 +29,24 @@
     font-size: 50px;
 }
 
+.container .error-img{
+    width: 50px
+}
+
+.container .error-btn{
+    text-decoration: none;
+    border: 2px solid rgb(255,167,41);
+    border-radius: 20px;
+    padding: 10px;
+    color: black;
+    transition: 0.5s;
+}
+
+.container .error-btn:hover{
+    box-shadow: 0 0 10px 0.1px rgba(0, 0, 0, 0.20);
+    scale: 1.1;
+}
+
 /* ----------------- Merchandiser Dashboard Styles ---------------- */
 .page-container .section .container .emptyParking{
     margin-top: 100px;
diff --git a/public/images/404-img.jpg b/public/images/404-img.jpg
new file mode 100644
index 00000000..0e37eb5a
Binary files /dev/null and b/public/images/404-img.jpg differ