diff --git a/html/404.ejs b/html/404.ejs
index 0e988c07..e9a1a1ce 100644
--- a/html/404.ejs
+++ b/html/404.ejs
@@ -1,78 +1,4 @@
-<!--
-    This Source Code Form is subject to the terms of the GNU General Public License:
-
-    Copyright (C) 2021-2022 POKETUBE (https://codeberg.org/Ashley/poketube)
-    
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program. If not, see https://www.gnu.org/licenses/.
--->
-<!DOCTYPE html><html>
-<head>
-  <title>1984!!1 - PokeTube</title>
-   <link href=/css/app-cdn.min.css rel=stylesheet>
-  <link href=/css/app.main.css rel=stylesheet>
-  <link href="/css/watch.main.css?v=56" rel=stylesheet>
-  <link href="/css/watch-util.css" rel=stylesheet>
-  <link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet>
-  <link href="/css/watch-navbar.css?v=56" rel=stylesheet>
-  <link href=https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css rel=stylesheet>
-     <base target="_top">
-   <link href=https://poketube.fun/css/yt-ukraine.svg rel=icon>
-<style>
-  body{
-    background:#111;
-      margin: auto;
-    transform: translateY(13em)
-  }
-  p,a,h1{
-    text-align:center;
-    color:#fff;
-  }
-  nav,error-page,div{
-    justify-content: center;
-    background: #111
-  }
-  </style>
-</head>
-<body>
-    <div id="error-page">
-      
-      
-        <div id="error-page-content" align="center">
-       
-          
-                  <h1 style="color:#fff;font-family:'PokeTube Flex',sans-serif;font-weight:900;white-space:yes;font-style: italic;font-size: 45px;" align="center">
-                    404!!1 
-          </h1>
-           <h3>
-             Very <a href="https://poketube.fun/watch?v=Yw8mcm3k1AQ" style="color:#fff">1984</a> Innit? I dont think that this webpage exist :p u can search for something else~ 
-          </h3>
-        </div>
-      
-<nav>
-
-       <div class="middle">
-
-         
-          <form action=/search><input class=search-bar placeholder="Search owo " autocomplete="on" id=fname name=query style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
-          <button class="btn btn-success" type=submit><i class="fa-light fa-search"></i></button>
-             
-         </form>
-            </div></nav>
-     
-        </div>
-   
- <img src="https://t.poketube.fun/t/rep.gif?from=param" style="width: 0;visibility: hidden;" id="404_page">
-
-</body>
-</html>
\ No newline at end of file
+<%- include('error.ejs', {
+  error: "404",
+  description: "Very 1984 Innit? I dont think this webpage exist :p u can search for something else~ "
+}) %>
\ No newline at end of file
diff --git a/html/502.ejs b/html/502.ejs
new file mode 100644
index 00000000..fe9d095f
--- /dev/null
+++ b/html/502.ejs
@@ -0,0 +1,4 @@
+<%- include('error.ejs', {
+  error: "502",
+  description: "An error has occurred. Try again or come back later."
+}) %>
\ No newline at end of file
diff --git a/html/error.ejs b/html/error.ejs
new file mode 100644
index 00000000..9f0d6183
--- /dev/null
+++ b/html/error.ejs
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>PokeTube</title>
+        <meta content="#111111" name="theme-color">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+        <meta name="darkreader-lock">
+        <link href="/css/yt-ukraine.svg?v=3" rel=icon>
+        <link rel="manifest" href="/manifest.json">
+    </head>
+    <body>
+        <p id="abstract"><%=error%></p>
+        <div class="error">
+            <h2><%=error%></h2>
+            <p><%=description%></p>
+        </div>
+        <div class="error-footer">
+            <a href="#">Games</a>
+            <a href="#">Source Code</a>
+            <a href="#">Status</a>
+        </div>
+    </body>
+</html>
+
+<style>
+body {
+    margin: auto;
+    background: #111111;
+    color: white;
+    font-family: arial;
+    max-width: 600px;
+}
+body::before {
+    background: linear-gradient(0deg, rgba(115, 32, 67, 1.0), rgba(17, 17, 17, 1.0));
+    background-repeat: no-repeat;
+    content: "";
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    transition: 1s height;
+}
+
+h2 {
+    font-size: 42px;
+}
+
+p#abstract {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 500px;
+    margin: 0px;
+    font-weight: bold;
+    opacity: 0.005;
+    pointer-events: none;
+    transition: 1s transform;
+}
+
+@media only screen and (max-width: 790px) {
+    p#abstract {transform: translate(-50%, -50%) rotate(90deg) !important}
+}
+
+.error {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    cursor: default;
+    max-width: 600px;
+    width: 100%;
+}
+
+.error-footer {
+    position: fixed;
+    bottom: 24px;
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+}
+.error-footer a {
+    color: #AC8FA5;
+    text-decoration: none;
+    margin: 0px 12px;
+}
+.error-footer a:hover {
+    color: #d69cc8;
+}
+</style>
\ No newline at end of file
diff --git a/src/libpoketube/init/pages-static.js b/src/libpoketube/init/pages-static.js
index 429f5eb3..ed01ddf4 100644
--- a/src/libpoketube/init/pages-static.js
+++ b/src/libpoketube/init/pages-static.js
@@ -48,6 +48,10 @@ module.exports = function (app, config, renderTemplate) {
     }
   });
 
+  app.get("/502", function (req, res) {
+    renderTemplate(res, req, "502.ejs");
+  });
+
   app.get("/143", function (req, res) {
     var number_easteregg = getRandomArbitrary(0, 143);
 
