diff --git a/apps/ui/main.py b/apps/ui/main.py
index b78d8d7..af506f7 100644
--- a/apps/ui/main.py
+++ b/apps/ui/main.py
@@ -87,7 +87,10 @@ async def rooms(request: Request) -> HTMLResponse:
     Returns:
         HTMLResponse: Rendered rooms template
     """
-    return templates.TemplateResponse("rooms.html", {"request": request})
+    return templates.TemplateResponse("rooms.html", {
+        "request": request,
+        "api_base": API_BASE
+    })
 
 
 @app.get("/dashboard", response_class=HTMLResponse)
diff --git a/apps/ui/templates/rooms.html b/apps/ui/templates/rooms.html
index 0486b58..cb15241 100644
--- a/apps/ui/templates/rooms.html
+++ b/apps/ui/templates/rooms.html
@@ -147,7 +147,13 @@
     </div>
 
     <script>
-        const API_BASE = window.location.origin;
+        // API configuration from backend
+        window.API_BASE = '{{ api_base }}';
+        
+        // Helper function to construct API URLs
+        function api(url) {
+            return `${window.API_BASE}${url}`;
+        }
 
         // Room icon mapping
         const roomIcons = {
@@ -188,14 +194,14 @@
 
             try {
                 // Load layout
-                const layoutResponse = await fetch(`${API_BASE}/layout`);
+                const layoutResponse = await fetch(api('/layout'));
                 if (!layoutResponse.ok) {
                     throw new Error(`Layout API error: ${layoutResponse.status}`);
                 }
                 const layoutData = await layoutResponse.json();
 
                 // Load devices for feature checks
-                const devicesResponse = await fetch(`${API_BASE}/devices`);
+                const devicesResponse = await fetch(api('/devices'));
                 if (!devicesResponse.ok) {
                     throw new Error(`Devices API error: ${devicesResponse.status}`);
                 }