diff --git a/package.json b/package.json
index dad5b32ee..5ed5cd83d 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@verdaccio/local-storage": "2.1.0",
     "@verdaccio/streams": "2.0.0",
-    "@verdaccio/ui-theme": "0.1.2",
+    "@verdaccio/ui-theme": "0.1.5",
     "JSONStream": "1.3.5",
     "async": "3.0.1-0",
     "body-parser": "1.19.0",
diff --git a/src/api/web/index.js b/src/api/web/index.js
index ef0857703..8837dca01 100644
--- a/src/api/web/index.js
+++ b/src/api/web/index.js
@@ -75,14 +75,25 @@ module.exports = function(config, auth, storage) {
   });
 
   function renderHTML(req, res) {
-    const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), config.url_prefix);
+    const protocol = getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol);
+    const host = req.get('host');
+    const { url_prefix } = config;
+    const uri = `${protocol}://${host}`;
+    const base = combineBaseUrl(protocol, host, url_prefix);
+    const primaryColor = _.get(config, 'web.primary_color') ? config.web.primary_color : '';
+    const title = _.get(config, 'web.title') ? config.web.title : WEB_TITLE;
+    const scope = _.get(config, 'web.scope') ? config.web.scope : '';
+    const options = { uri, protocol, host, url_prefix, base, primaryColor, title, scope };
+
     const webPage = template
+      .replace(/ToReplaceByVerdaccioUI/g, JSON.stringify(options))
       .replace(/ToReplaceByVerdaccio/g, base)
+      .replace(/ToReplaceByPrefix/g, url_prefix)
       .replace(/ToReplaceByVersion/g, pkgJSON.version)
-      .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : WEB_TITLE)
+      .replace(/ToReplaceByTitle/g, title)
       .replace(/ToReplaceByLogo/g, logoURI)
-      .replace(/ToReplaceByPrimaryColor/g, _.get(config, 'web.primary_color') ? config.web.primary_color : '')
-      .replace(/ToReplaceByScope/g, _.get(config, 'web.scope') ? config.web.scope : '');
+      .replace(/ToReplaceByPrimaryColor/g, primaryColor)
+      .replace(/ToReplaceByScope/g, scope);
 
     res.setHeader('Content-Type', HEADERS.TEXT_HTML);
 
diff --git a/yarn.lock b/yarn.lock
index 1e7378272..4c03e7306 100644
Binary files a/yarn.lock and b/yarn.lock differ