diff --git a/apps/permission/templates/permission/scopes.html b/apps/permission/templates/permission/scopes.html
index 31a4395e..bebc0898 100644
--- a/apps/permission/templates/permission/scopes.html
+++ b/apps/permission/templates/permission/scopes.html
@@ -11,25 +11,25 @@
             <div class="accordion" id="accordionApps">
                 {% for app, app_scopes in scopes.items %}
                     <div class="card">
-                        <div class="card-header" id="app-{{ app.name.lower }}-title">
+                        <div class="card-header" id="app-{{ app.name|slugify }}-title">
                             <a class="text-decoration-none collapsed" href="#" data-toggle="collapse"
-                               data-target="#app-{{ app.name.lower }}" aria-expanded="false"
-                               aria-controls="app-{{ app.name.lower }}">
+                               data-target="#app-{{ app.name|slugify }}" aria-expanded="false"
+                               aria-controls="app-{{ app.name|slugify }}">
                                 {{ app.name }}
                             </a>
                         </div>
-                        <div class="collapse" id="app-{{ app.name.lower }}" aria-labelledby="app-{{ app.name.lower }}" data-target="#accordionApps">
+                        <div class="collapse" id="app-{{ app.name|slugify }}" aria-labelledby="app-{{ app.name|slugify }}" data-target="#accordionApps">
                             <div class="card-body">
                                 {% for scope_id, scope_desc in app_scopes.items %}
                                     <div class="form-group">
-                                        <label class="form-check-label" for="scope-{{ app.name.lower }}-{{ scope_id }}">
-                                            <input type="checkbox" id="scope-{{ app.name.lower }}-{{ scope_id }}"
-                                                   name="scope-{{ app.name.lower }}" class="checkboxinput form-check-input" value="{{ scope_id }}">
+                                        <label class="form-check-label" for="scope-{{ app.name|slugify }}-{{ scope_id }}">
+                                            <input type="checkbox" id="scope-{{ app.name|slugify }}-{{ scope_id }}"
+                                                   name="scope-{{ app.name|slugify }}" class="checkboxinput form-check-input" value="{{ scope_id }}">
                                             {{ scope_desc }}
                                         </label>
                                     </div>
                                 {% endfor %}
-                                <p id="url-{{ app.name.lower }}">
+                                <p id="url-{{ app.name|slugify }}">
                                     <a href="{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code" target="_blank">
                                         {{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code
                                     </a>
@@ -51,11 +51,10 @@
 {% block extrajavascript %}
     <script>
         {% for app in scopes.keys %}
-            let elements = document.getElementsByName("scope-{{ app.name.lower }}");
-            for (let element of elements) {
+            for (let element of document.getElementsByName("scope-{{ app.name|slugify }}")) {
                 element.onchange = function (event) {
                     let scope = ""
-                    for (let element of elements) {
+                    for (let element of document.getElementsByName("scope-{{ app.name|slugify }}")) {
                         if (element.checked) {
                             scope += element.value + " "
                         }
@@ -63,7 +62,7 @@
 
                     scope = scope.substr(0, scope.length - 1)
 
-                    document.getElementById("url-{{ app.name.lower }}").innerHTML = 'Scopes : ' + scope
+                    document.getElementById("url-{{ app.name|slugify }}").innerHTML = 'Scopes : ' + scope
                         + '<br><a href="{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code&scope='+ scope.replaceAll(' ', '%20')
                         + '" target="_blank">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code&scope='
                         + scope.replaceAll(' ', '%20') + '</a>'