diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
index 6e2884cbb..9edb85748 100644
--- a/packages/api/v1/api-documentation.css
+++ b/packages/api/v1/api-documentation.css
@@ -1,101 +1,9 @@
-#swagger-ui.api-platform .wrapper {
-    padding: 0 60px;
-}
-
-#swagger-ui.api-platform .information-container.wrapper {
-    margin: 0 0 30px;
-    padding: 10px 0 0;
-    width: 100%;
-    max-width: 100%;
-    background-color: white;
-    border-bottom: 1px solid #ccc;
-}
-
-#swagger-ui.api-platform .info, #formats {
-    width: 100%;
-    max-width: 1460px;
-    padding: 0 50px;
-    margin: 0 auto;
-}
-
-#swagger-ui.api-platform .opblock .opblock-summary-method,
-#swagger-ui.api-platform .btn.execute {
-    transition: all ease 0.3s;
-    background-color: #3CAAB5;
-    border-color: #3CAAB5;
-}
-
-#swagger-ui.api-platform .opblock .opblock-summary-method:hover,
-#swagger-ui.api-platform .btn.execute:hover {
-    background-color: #288690;
-    border-color: #288690;
-}
-
-#swagger-ui.api-platform .opblock-summary {
-    padding: 0;
-}
-
-#swagger-ui.api-platform .opblock-tag:hover {
-    background-color: rgba(0, 0, 0, .1);
-    transform: scale(1.01);
-}
-
-#swagger-ui.api-platform .opblock.opblock-get,
-#swagger-ui.api-platform .opblock-section-header,
-#swagger-ui.api-platform .opblock-summary {
-    background-color: rgba(60, 170, 181, 0.1);
-    border-color: #3CAAB5;
-}
-
-#swagger-ui.api-platform .opblock-summary-method {
-    border-radius: 0;
-    padding: 10px;
-}
-
-#swagger-ui.api-platform .opblock-tag, .swagger-ui .table-container tr th,
-.swagger-ui .table-container tr td {
-    padding: 5px 0;
-    margin: 0 0 10px;
-}
-
-#swagger-ui.api-platform .btn-group .btn, #swagger-ui.api-platform .execute-wrapper .btn {
-    padding: 10px 40px;
-}
-
-#swagger-ui.api-platform .btn {
-    transition: all ease 0.2s;
-    box-shadow: none;
-    background-color: #f7f7f7;
-}
-
-#swagger-ui.api-platform .btn:hover, #swagger-ui.api-platform .btn.cancel:hover, 
-#swagger-ui.api-platform .btn.authorize:hover {
-    background-color: rgba(65, 68, 78, 0.1);
-    border-color: transparent;
-}
-
-#swagger-ui.api-platform select, #swagger-ui.api-platform input:focus,
-#swagger-ui.api-platform select:focus, #swagger-ui.api-platform textarea:focus,
-#swagger-ui.api-platform button:focus {
-    box-shadow: none;
-    cursor: pointer;
-    outline: none;
-}
-
-.swagger-ui .markdown p, .swagger-ui .markdown pre,
-.swagger-ui .renderedMarkdown p, .swagger-ui .renderedMarkdown pre {
-    margin: 0;
-}
-
-::placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
-    color: #fff;
-}
-
-:disabled::placeholder, :disabled:-moz-placeholder,
-:disabled::-moz-placeholder, :disabled:-ms-input-placeholder {
-    color: #fafafa;
-}
-
-#swagger-ui .topbar {
-    display: none;
-}
+/* Custom CSS for dark mode */
+@media (prefers-color-scheme: dark) {
+  .swagger-ui {
+      filter: invert(85%) hue-rotate(180deg);
+  }
+  .swagger-ui .microlight {
+      filter: invert(100%) hue-rotate(180deg);
+  }
+}
\ No newline at end of file
diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index 0ecdc4b39..b7c36fa8b 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/packages/api/v1/api-documentation.tsx
@@ -5,7 +5,7 @@ import 'swagger-ui-react/swagger-ui.css';
 
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
-// Custom CSS for the Swagger UI
+// Custom Dark Mode CSS for the Swagger UI
 // eslint-disable-next-line prettier/prettier
 import './api-documentation.css';