diff --git a/backend/api/src/app.ts b/backend/api/src/app.ts
index efb328e..4592695 100644
--- a/backend/api/src/app.ts
+++ b/backend/api/src/app.ts
@@ -518,6 +518,12 @@ app.get(
   swaggerUi.setup(swaggerDocument, {
     customSiteTitle: 'Compass API Docs',
     customCssUrl: '/swagger.css',
+    customJs: `
+      const meta = document.createElement('meta');
+      meta.name = 'viewport';
+      meta.content = 'width=device-width, initial-scale=1';
+      document.head.appendChild(meta);
+    `,
   }),
 )
 app.use(rootPath, swaggerUi.serve)
diff --git a/backend/api/src/public/swagger.css b/backend/api/src/public/swagger.css
index 0ee08a3..838c02a 100644
--- a/backend/api/src/public/swagger.css
+++ b/backend/api/src/public/swagger.css
@@ -65,13 +65,20 @@
 }
 
 /* Increase font sizes on mobile for better readability */
+/* Still not working though */
 @media (max-width: 640px) {
+    html,
     body,
     .swagger-ui {
-        font-size: 16px !important;
+        font-size: 32px !important;
         line-height: 1.5 !important;
     }
 
+    .swagger-ui {
+        -webkit-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+    }
+
     /* Common text elements */
     .swagger-ui p,
     .swagger-ui label,
@@ -85,11 +92,9 @@
     .swagger-ui table tbody tr td,
     .swagger-ui .tab li,
     .swagger-ui .response-col_links,
+    .swagger-ui .opblock-summary-path,
     .swagger-ui .opblock-summary-description {
-        font-size: 16px !important;
-    }
-    .swagger-ui .opblock-summary-path {
-        font-size: 20px !important;
+        font-size: 32px !important;
     }
 
     /* Headings scale */