diff --git a/502.html b/502.html
new file mode 100644
index 0000000..8e4411d
--- /dev/null
+++ b/502.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+    <link rel="icon" href="/icons/icon.svg" type="image/svg+xml" sizes="any"/>
+    <link rel="icon apple-touch-icon" href="/icons/icon.png" type="image/png" sizes="512x512"/>
+
+    <title>Bad Gateway | 2FA Directory</title>
+  </head>
+  <body>
+    <!-- navbar -->
+
+    <main role="main">
+      <h1 class="display-1">502</h1>
+      <p class="note">Bad Gateway</p>
+    </main>
+
+    <!-- footer -->
+
+    <script type="module" src="/src/components/style.js"></script>
+    <script type="module" src="/src/components/style.error.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 3e176c3..4aa3775 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@ <h5 class="modal-title">Attention!</h5>
     <!-- footer -->
 
     <script type="module" src="/src/components/style.js"></script>
+    <script type="module" src="/src/components/style.directory.js"></script>
     <script type="module" src="/src/components/regions.js"></script>
     <script type="module" src="/src/components/category.js"></script>
     <script type="module" src="/src/components/search.js"></script>
diff --git a/src/components/style.directory.js b/src/components/style.directory.js
new file mode 100644
index 0000000..5042805
--- /dev/null
+++ b/src/components/style.directory.js
@@ -0,0 +1,3 @@
+import "/assets/css/search.scss";
+import "/assets/css/category-buttons.scss";
+import "/assets/css/table.scss";
diff --git a/src/components/style.error.js b/src/components/style.error.js
new file mode 100644
index 0000000..2fb01a4
--- /dev/null
+++ b/src/components/style.error.js
@@ -0,0 +1 @@
+import "/assets/css/error.scss";
diff --git a/src/components/style.js b/src/components/style.js
index 35a5c81..66e39fe 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -1,7 +1,4 @@
 import "/assets/css/root.scss";
 import "/assets/css/page.scss";
 import "/assets/css/navbar.scss";
-import "/assets/css/search.scss";
-import "/assets/css/category-buttons.scss";
-import "/assets/css/table.scss";
 import "/assets/css/footer.scss";
diff --git a/vite.config.js b/vite.config.js
index 6ddf98a..ebab9d9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
     rollupOptions: {
       input: {
         main: resolve(__dirname, "index.html"),
+        502: resolve(__dirname, "502.html"),
       },
     },
     cssCodeSplit: true, // This is the default behavior
