diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index dc1c063..3623eb9 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -107,7 +107,7 @@ function updateScopeState() {
 function updateScopes(scopes) {
     scopes.forEach((scope) => {
         if (scope.state) {
-            const scopeId = `${scope.name}_${scope.id}`;
+            const scopeId = `${scope.name}_${scope.id}`.replaceAll('.', '_');
             const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
             const iconCls = ['fas', 'far', 'text-danger', 'text-success',
                              'text-warning', 'text-wol'];
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index d6ef2af..6999fd6 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -21,7 +21,7 @@
 
 {% macro scopes_tree_collapse_level(scopes, i, parent_id) -%}
 {% for scope in scopes %}
-  <li id="{{ scope["name"] }}_{{ scope["id"] }}" class="nav-item">
+  <li id="{{ scope["name"]|replace(".", "_") }}_{{ scope["id"] }}" class="nav-item">
     {% if " ".join(scope["ip"]) %}
         <input class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ " ".join(scope["ip"]) }}"