diff --git a/containers/libreportal/frontend/js/components/app/routing-manager.js b/containers/libreportal/frontend/js/components/app/routing-manager.js
index 7754917..5ffa4ae 100644
--- a/containers/libreportal/frontend/js/components/app/routing-manager.js
+++ b/containers/libreportal/frontend/js/components/app/routing-manager.js
@@ -59,6 +59,7 @@ class RoutingManager {
           protocol: parts[4] || 'tcp',
           traefik: isNine ? parts[6] === 'true' : parts[5] === 'true',
           webui,
+          subdomain: isTwelve ? (parts[10] || '') : '',
           recommended: isTwelve ? parts[11] === 'true' : webui,
           description: isNine ? (parts[8] || '') : (parts[7] || '')
         };
@@ -70,11 +71,14 @@ class RoutingManager {
   }
 
   _previewUrl(port, app) {
-    const hostName = app && app.config && app.config[`CFG_${port.appSlug.toUpperCase()}_HOST_NAME`];
     const domainIdx = app && app.config && app.config[`CFG_${port.appSlug.toUpperCase()}_DOMAIN`];
     const domain = app && app.config && app.config[`CFG_DOMAIN_${domainIdx || 1}`];
-    if (hostName && domain) return `https://${hostName}.${domain}`;
-    return `https://${port.appSlug}.<your-domain>`;
+    const sub = (port.subdomain || '').trim();
+    const placeholder = '<your-domain>';
+    const base = domain || placeholder;
+    if (sub === '@' || sub === 'root') return `https://${base}`;
+    if (sub) return `https://${sub}.${base}`;
+    return `https://${port.appSlug}.${base}`;
   }
 
   _render() {