diff --git a/web/src/common/api/config.ts b/web/src/common/api/config.ts
index 4e120a38e..6276ec8a5 100644
--- a/web/src/common/api/config.ts
+++ b/web/src/common/api/config.ts
@@ -63,7 +63,7 @@ export function getMetaContent(key: string): string {
 }
 
 export const DEFAULT_CONFIG = new Configuration({
-    basePath: process.env.AK_API_BASE_PATH + "/api/v3",
+    basePath: (process.env.AK_API_BASE_PATH || window.location.origin) + "/api/v3",
     headers: {
         "sentry-trace": getMetaContent("sentry-trace"),
     },
diff --git a/web/src/common/api/middleware.ts b/web/src/common/api/middleware.ts
index b6f77ec47..745a5d1c9 100644
--- a/web/src/common/api/middleware.ts
+++ b/web/src/common/api/middleware.ts
@@ -25,8 +25,13 @@ export class LoggingMiddleware implements Middleware {
 
     post(context: ResponseContext): Promise<Response | void> {
         let msg = `authentik/api[${this.tenant.matchedDomain}]: `;
-        msg += `${context.response.status} ${context.init.method} ${context.url}`;
-        console.debug(msg);
+        // https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output
+        msg += `%c${context.response.status}%c ${context.init.method} ${context.url}`;
+        let style = "";
+        if (context.response.status >= 400) {
+            style = "color: red; font-weight: bold;";
+        }
+        console.debug(msg, style, "");
         return Promise.resolve(context.response);
     }
 }