diff --git a/404.html b/404.html
index bfacb3a..644dd65 100644
--- a/404.html
+++ b/404.html
@@ -14,9 +14,17 @@
 </head>
 
 <body>
-  <div class="box" style="margin-top:5rem;margin-left:2%;">
-    <h1 align="center">Error: 404</h1>
-    <h1 align="center">Something went wrong, try a different link/address</h1>
+  <div class="box" id="errorBox">
+    <div id="error">
+      <img src="/resources/img/error.png" alt="" id="errorImg">
+      <h1 align="center" id="errorText">Error: 404 <br>You are trying to acces a page that doesn't exist</h1>
+      <p onclick="goBack()" align="center">Click here to go back</p>
+      <script>
+        function goBack() {
+          window.history.back();
+        }
+      </script>
+    </div>
   </div>
 
   <script src="/resources/js/navbar.json.js"></script>
diff --git a/resources/css/404.css b/resources/css/404.css
index 2b86c94..4d2034c 100644
--- a/resources/css/404.css
+++ b/resources/css/404.css
@@ -1,5 +1,44 @@
- div {
-   height: 90%;
-   width: 96%;
-   padding: 2%;
- }
+@media screen and (min-width:0px) and (max-width:960px) {
+  #errorText {
+    font-size: 30px;
+  }
+  #errorImg {
+    width: 10rem!important;
+    height: 10rem!important;
+    margin-left: calc(50% - 5rem)!important;
+  }
+  #errorBox {
+    margin: 5rem 0 0 1rem!important;
+    width: 90%!important;
+    height: 84vh!important;
+  }
+}
+#errorBox {
+  margin: 6rem 0 0 1rem;
+  height: 87vh;
+  width: 98%;
+  padding: 2rem;
+}
+#error {
+  background-color: #363840;
+  border: #363840 1px solid;
+  border-radius: .5rem;
+  height: 99%;
+  width: 100%;
+}
+#errorImg {
+  height: 25rem;
+  width: 25rem;
+  margin-top: 3rem;
+  left: 50%;
+  margin-left: calc(50% - 12.5rem);
+}
+#errorText {
+  margin: 3rem 0 0 0;
+}
+p {
+  margin-top: 4rem!important;
+  cursor: pointer;
+  font-size: 20px;
+  text-decoration: underline;
+}
diff --git a/resources/img/error.png b/resources/img/error.png
new file mode 100644
index 0000000..115931e
Binary files /dev/null and b/resources/img/error.png differ
