diff --git a/templates/base.html b/templates/base.html
index 972b2d9..b105386 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,7 +14,6 @@
     <link href="{% static 'bootstrap-5.3.0-dist/css/bootstrap.rtl.min.css' %}" rel="stylesheet">
     <link href="{% static 'bootstrap-icons-1.11.3/font/bootstrap-icons.css' %}" rel="stylesheet">
     <link href="{% static 'fonts/vazirmatn-v33.003/misc/UI-Farsi-Digits/Vazirmatn-UI-FD-font-face.css' %}" rel="stylesheet">
-    <link href="{% static 'fonts/Pelak/fonts.css' %}" rel="stylesheet">
     <link href="{% static 'main.css' %}" rel="stylesheet">
     <script src="{% static 'jquery-3.6.0.min.js' %}"></script>
 
diff --git a/templates/gooyal_oauth2/application_detail.html b/templates/gooyal_oauth2/application_detail.html
index 408b1c3..0835c07 100644
--- a/templates/gooyal_oauth2/application_detail.html
+++ b/templates/gooyal_oauth2/application_detail.html
@@ -25,16 +25,40 @@
 
 
 {% block content %}
-    <p>application: {{ object.name }}!</p>
-    <p>client id: {{ object.client_id }}!</p>
-    <p>allowed_scopes:</p>
-    {% for scope in object.allowed_scopes %}
-        <div>{{ scope }}</div>
-    {% endfor %}
-    <p>own_scopes:</p>
-    {% for scope in object.scopes.all %}
-        <div>{{ scope }}</div>
-    {% endfor %}
-
+    <h5>application</h5>
+    <p>{{ object.name }}</p>
+    <h5>allowed_scopes:</h5>
+    <div class="table-responsive">
+        <table class="table table-striped table-bordered table-hover table-sm">
+            <caption>allowed_scopes</caption>
+            <thead>
+            <tr>
+                <th scope="col">
+                    <div class="grid">
+                        <div class="d-flex justify-content-center">
+                            name
+                        </div>
+                    </div>
+                </th>
+                <th scope="col">
+                    <div class="grid">
+                        <div class="d-flex justify-content-center">
+                            description
+                        </div>
+                    </div>
+                </th>
+                {#            <th>actions</th>#}
+            </tr>
+            </thead>
+            <tbody>
+            {% for scope in object.scopes.all %}
+                <tr>
+                    <td>{{ scope.name }}</td>
+                    <td>{{ scope.description }}</td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
 
 {% endblock %}
diff --git a/templates/gooyal_oauth2/application_list.html b/templates/gooyal_oauth2/application_list.html
index 8e89b8c..2a7db52 100644
--- a/templates/gooyal_oauth2/application_list.html
+++ b/templates/gooyal_oauth2/application_list.html
@@ -21,41 +21,79 @@
 
 
 {% block content %}
-    <table class="table">
-        <tr>
-            <th><a href="?{% get_filter_link request 'ordering' 'name' %}" >name{% if request.GET.ordering and 'name' in request.GET.ordering %}<i class="bi bi-arrow-down-short"></i>{% endif %}</a></th>
-            <th><a href="?{% get_filter_link request 'ordering' 'client_id' %}" >client id{% if request.GET.ordering and 'client_id' in request.GET.ordering %}<i class="bi bi-arrow-down-short"></i>{% endif %}</a></th>
-            <th>type</th>
-            <th>actions</th>
-        </tr>
-        {% for obj in object_list %}
+    <div class="table-responsive">
+        <table class="table table-striped table-bordered table-hover table-sm">
+            <caption>application list</caption>
+            <thead>
+
             <tr>
-                <td>{{ obj.name }}</td>
-                <td>{{ obj.client_id }}</td>
-                <td>{{ obj.allows_grant_type }}</td>
-                <td>
+                <th>
                     <div class="grid">
-                        <div class="d-flex justify-content-end">
-                            <div class="me-2">
-                                <a href="{% url 'gooyal_oauth2:application_detail' pk=obj.pk %}">
-                                    <div class="btn btn-success">
-                                        <span class="bi bi-gear-fill"></span>
-                                    </div>
-                                </a>
-                            </div>
-{#                            <div class="me-2">#}
-{#                                <a href="{% url 'gooyal_oauth2:application_update' pk=obj.pk %}">#}
-{#                                    <div class="btn btn-success">#}
-{#                                        <span class="bi bi-info-circle-fill"></span>#}
-{#                                    </div>#}
-{#                                </a>#}
-{#                            </div>#}
+                        <div class="d-flex justify-content-center">
+                            <a class="text-decoration-none" href="?{% get_filter_link request 'ordering' 'name' %}">
+                                <span class="mt-1">name</span>
+                                {% if request.GET.ordering and 'name' in request.GET.ordering %}
+                                    <span class="bi bi-arrow-down-short"></span>
+                                {% endif %}
+                            </a>
                         </div>
                     </div>
-                </td>
+
+                </th>
+
+
+                <th>
+                    <div class="grid">
+                        <div class="d-flex justify-content-center">
+                            <a class="text-decoration-none"
+                               href="?{% get_filter_link request 'ordering' 'client_id' %}">
+                                <span class="mt-1">client id</span>
+                                {% if request.GET.ordering and 'client_id' in request.GET.ordering %}
+                                    <span class="bi bi-arrow-down-short"></span>
+                                {% endif %}
+                            </a>
+                        </div>
+                    </div>
+
+                </th>
+                <th class="grid">
+                    <div class="d-flex justify-content-center">
+                        actions
+                    </div>
+                </th>
             </tr>
-        {% endfor %}
-    </table>
+            </thead>
+            <tbody>
+            {% for obj in object_list %}
+                <tr>
+                    <td>{{ obj.name }}</td>
+                    <td>{{ obj.client_id }}</td>
+                    {#                    <td>{{ obj.allows_grant_type }}</td>#}
+                    <td>
+                        <div class="grid">
+                            <div class="d-flex justify-content-start">
+                                <div class="me-2">
+                                    <a href="{% url 'gooyal_oauth2:application_detail' pk=obj.pk %}">
+                                        <div class="btn btn-success btn-sm">
+                                            <span class="bi bi-gear-fill"></span>
+                                        </div>
+                                    </a>
+                                </div>
+                                {#                            <div class="me-2">#}
+                                {#                                <a href="{% url 'gooyal_oauth2:application_update' pk=obj.pk %}">#}
+                                {#                                    <div class="btn btn-success">#}
+                                {#                                        <span class="bi bi-info-circle-fill"></span>#}
+                                {#                                    </div>#}
+                                {#                                </a>#}
+                                {#                            </div>#}
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
     {% include 'include/paginator.html' %}
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/gooyal_oauth2/application_scope_detail.html b/templates/gooyal_oauth2/application_scope_detail.html
index 90d5b42..97723ad 100644
--- a/templates/gooyal_oauth2/application_scope_detail.html
+++ b/templates/gooyal_oauth2/application_scope_detail.html
@@ -20,14 +20,4 @@
 {% block content %}
     <p>application: {{ object.name }}!</p>
     <p>client id: {{ object.client_id }}!</p>
-    <p>allowed_scopes:</p>
-    {% for scope in object.allowed_scopes %}
-        <div>{{ scope }}</div>
-    {% endfor %}
-    <p>own_scopes:</p>
-    {% for scope in object.scopes.all %}
-        <div>{{ scope }}</div>
-    {% endfor %}
-
-
 {% endblock %}
diff --git a/templates/gooyal_oauth2/application_scope_list.html b/templates/gooyal_oauth2/application_scope_list.html
index c97f3fd..6a7eaa7 100644
--- a/templates/gooyal_oauth2/application_scope_list.html
+++ b/templates/gooyal_oauth2/application_scope_list.html
@@ -21,35 +21,59 @@
 
 
 {% block content %}
-    <table class="table">
+    <table class="table table-striped table-bordered table-hover table-sm">
+        <caption>application scope list</caption>
         <tr>
-            <th><a href="?{% get_filter_link request 'ordering' 'name' %}" >name{% if request.GET.ordering and 'name' in request.GET.ordering %}<i class="bi bi-arrow-down-short"></i>{% endif %}</a></th>
-{#            <th><a href="?{% get_filter_link request 'ordering' 'client_id' %}" >client id{% if request.GET.ordering and 'client_id' in request.GET.ordering %}<i class="bi bi-arrow-down-short"></i>{% endif %}</a></th>#}
-            <th>description</th>
-            <th>actions</th>
+            <th>
+                    <div class="grid">
+                        <div class="d-flex justify-content-center">
+                            <a class="text-decoration-none" href="?{% get_filter_link request 'ordering' 'name' %}">
+                                <span class="mt-1">name</span>
+                                {% if request.GET.ordering and 'name' in request.GET.ordering %}
+                                    <span class="bi bi-arrow-down-short"></span>
+                                {% endif %}
+                            </a>
+                        </div>
+                    </div>
+            </th>
+            {#            <th><a href="?{% get_filter_link request 'ordering' 'client_id' %}" >client id{% if request.GET.ordering and 'client_id' in request.GET.ordering %}<i class="bi bi-arrow-down-short"></i>{% endif %}</a></th>#}
+            <th scope="col">
+                <div class="grid">
+                    <div class="d-flex justify-content-center">
+                        description
+                    </div>
+                </div>
+            </th>
+            <th scope="col">
+                <div class="grid">
+                    <div class="d-flex justify-content-center">
+                        actions
+                    </div>
+                </div>
+            </th>
         </tr>
         {% for obj in object_list %}
             <tr>
                 <td>{{ obj.name }}</td>
-{#                <td>{{ obj.client_id }}</td>#}
+                {#                <td>{{ obj.client_id }}</td>#}
                 <td>{{ obj.description }}</td>
                 <td>
                     <div class="grid">
                         <div class="d-flex justify-content-end">
                             <div class="me-2">
                                 <a href="{% url 'gooyal_oauth2:application_scope_detail' pk=obj.pk application_pk=application.pk %}">
-                                    <div class="btn btn-success">
+                                    <div class="btn btn-success btn-sm">
                                         <span class="bi bi-gear-fill"></span>
                                     </div>
                                 </a>
                             </div>
-{#                            <div class="me-2">#}
-{#                                <a href="{% url 'gooyal_oauth2:application_update' pk=obj.pk %}">#}
-{#                                    <div class="btn btn-success">#}
-{#                                        <span class="bi bi-info-circle-fill"></span>#}
-{#                                    </div>#}
-{#                                </a>#}
-{#                            </div>#}
+                            {#                            <div class="me-2">#}
+                            {#                                <a href="{% url 'gooyal_oauth2:application_update' pk=obj.pk %}">#}
+                            {#                                    <div class="btn btn-success">#}
+                            {#                                        <span class="bi bi-info-circle-fill"></span>#}
+                            {#                                    </div>#}
+                            {#                                </a>#}
+                            {#                            </div>#}
                         </div>
                     </div>
                 </td>