diff --git a/passbook/core/templates/login/denied.html b/passbook/core/templates/login/denied.html
index 592ae2a5b..aff267096 100644
--- a/passbook/core/templates/login/denied.html
+++ b/passbook/core/templates/login/denied.html
@@ -4,27 +4,18 @@
 {% load i18n %}
 {% load utils %}
 
-{% block head %}
-{{ block.super }}
-<style>
-    .pf-icon {
-        font-size: 48px;
-        text-align: center;
-    }
-</style>
-{% endblock %}
-
 {% block card %}
-<header class="login-pf-header">
-  <h1>{% trans title %}</h1>
-</header>
-<form method="POST">
-  {% csrf_token %}
-  {% include 'partials/form.html' %}
-  <span class="pf-icon pficon-error-circle-o btn-block"></span>
-  Access denied
-  {% if 'back' in request.GET %}
-  <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
-  {% endif %}
+<form method="POST" class="pf-c-form">
+    {% csrf_token %}
+    {% include 'partials/form.html' %}
+    <div class="pf-c-form__group">
+        <p>
+            <i class="pf-icon pf-icon-error-circle-o"></i>
+            {% trans 'Access denied' %}
+        </p>
+    </div>
+    {% if 'back' in request.GET %}
+    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
+    {% endif %}
 </form>
 {% endblock %}
diff --git a/passbook/providers/oauth/templates/oauth2_provider/authorize.html b/passbook/providers/oauth/templates/oauth2_provider/authorize.html
index 4060f0090..0ae8e4393 100644
--- a/passbook/providers/oauth/templates/oauth2_provider/authorize.html
+++ b/passbook/providers/oauth/templates/oauth2_provider/authorize.html
@@ -3,15 +3,12 @@
 {% load utils %}
 {% load i18n %}
 
-{% block title %}
+{% block card_title %}
 {% title 'Authorize Application' %}
 {% endblock %}
 
 {% block card %}
-<header class="login-pf-header">
-  <h1>{% trans 'Authorize Application' %}</h1>
-</header>
-<form method="POST">
+<form method="POST" class="pf-c-form">
     {% csrf_token %}
     {% if not error %}
         {% csrf_token %}
@@ -20,32 +17,40 @@
                 {{ field }}
             {% endif %}
         {% endfor %}
-        <div class="form-group">
+        <div class="pf-c-form__group">
             <p class="subtitle">
                 {% blocktrans with remote=application.name %}
-                You're about to sign into {{ remote }}
+                You're about to sign into {{ remote }}.
                 {% endblocktrans %}
             </p>
             <p>{% trans "Application requires following permissions" %}</p>
-            <ul>
+            <ul class="pf-c-list">
                 {% for scope in scopes_descriptions %}
                 <li>{{ scope }}</li>
                 {% endfor %}
             </ul>
             {{ form.errors }}
             {{ form.non_field_errors }}
+        </div>
+        <div class="pf-c-form__group">
             <p>
                 {% blocktrans with user=user %}
                 You are logged in as {{ user }}. Not you?
                 {% endblocktrans %}
                 <a href="{% url 'passbook_core:auth-logout' %}">{% trans 'Logout' %}</a>
             </p>
-            <div class="form-group">
-                <input type="submit" class="btn btn-success btn-disabled btn-lg click-spinner" name="allow" value="{% trans 'Continue' %}">
-                <a href="{% back %}" class="btn btn-default btn-lg">{% trans "Cancel" %}</a>
-            </div>
-            <div class="form-group spinner-hidden hidden">
-                <div class="spinner"></div>
+        </div>
+        <div class="pf-c-form__group pf-m-action">
+            <input type="submit" class="pf-c-button pf-m-primary" name="allow" value="{% trans 'Continue' %}">
+            <a href="{% back %}" class="pf-c-button pf-m-secondary">{% trans "Cancel" %}</a>
+        </div>
+        <div class="pf-c-form__group" style="display: none;" id="loading">
+            <div class="pf-c-form__horizontal-group">
+                <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
+                    <span class="pf-c-spinner__clipper"></span>
+                    <span class="pf-c-spinner__lead-ball"></span>
+                    <span class="pf-c-spinner__tail-ball"></span>
+                </span>
             </div>
         </div>
     {% else %}
@@ -61,9 +66,8 @@
 
 {% block scripts %}
 <script>
-    $('.click-spinner').on('click', function (e) {
-        $('.spinner-hidden').removeClass('hidden');
-        $(e.target).addClass('disabled');
-    })
+document.querySelector("form").addEventListener("submit", (e) => {
+    document.getElementById("loading").removeAttribute("style");
+});
 </script>
 {% endblock %}
diff --git a/passbook/providers/oidc/templates/oidc_provider/authorize.html b/passbook/providers/oidc/templates/oidc_provider/authorize.html
index d6392bf1e..6438d8a92 100644
--- a/passbook/providers/oidc/templates/oidc_provider/authorize.html
+++ b/passbook/providers/oidc/templates/oidc_provider/authorize.html
@@ -3,15 +3,12 @@
 {% load utils %}
 {% load i18n %}
 
-{% block title %}
-{% title 'Authorize Application' %}
+{% block card_title %}
+{% trans 'Authorize Application' %}
 {% endblock %}
 
 {% block card %}
-<header class="login-pf-header">
-  <h1>{% trans 'Authorize Application' %}</h1>
-</header>
-<form method="POST">
+<form method="POST" class="pf-c-form">
     {% csrf_token %}
     {% if not error %}
         {% csrf_token %}
@@ -20,14 +17,14 @@
                 {{ field }}
             {% endif %}
         {% endfor %}
-        <div class="form-group">
+        <div class="pf-c-form__group">
             <p class="subtitle">
                 {% blocktrans with remote=client.name %}
-                You're about to sign into {{ remote }}
+                You're about to sign into {{ remote }}.
                 {% endblocktrans %}
             </p>
             <p>{% trans "Application requires following permissions" %}</p>
-            <ul>
+            <ul class="pf-c-list">
                 {% for scope in scopes %}
                 <li>{{ scope.name }}</li>
                 {% endfor %}
@@ -35,18 +32,26 @@
             {{ hidden_inputs }}
             {{ form.errors }}
             {{ form.non_field_errors }}
+        </div>
+        <div class="pf-c-form__group">
             <p>
                 {% blocktrans with user=user %}
                 You are logged in as {{ user }}. Not you?
                 {% endblocktrans %}
                 <a href="{% url 'passbook_core:auth-logout' %}">{% trans 'Logout' %}</a>
             </p>
-            <div class="form-group">
-                <input type="submit" class="btn btn-success btn-disabled btn-lg click-spinner" name="allow" value="{% trans 'Continue' %}">
-                <a href="{% back %}" class="btn btn-default btn-lg">{% trans "Cancel" %}</a>
-            </div>
-            <div class="form-group spinner-hidden hidden">
-                <div class="spinner"></div>
+        </div>
+        <div class="pf-c-form__group pf-m-action">
+            <input type="submit" class="pf-c-button pf-m-primary" name="allow" value="{% trans 'Continue' %}">
+            <a href="{% back %}" class="pf-c-button pf-m-secondary">{% trans "Cancel" %}</a>
+        </div>
+        <div class="pf-c-form__group" style="display: none;" id="loading">
+            <div class="pf-c-form__horizontal-group">
+                <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
+                    <span class="pf-c-spinner__clipper"></span>
+                    <span class="pf-c-spinner__lead-ball"></span>
+                    <span class="pf-c-spinner__tail-ball"></span>
+                </span>
             </div>
         </div>
     {% else %}
@@ -62,9 +67,8 @@
 
 {% block scripts %}
 <script>
-    $('.click-spinner').on('click', function (e) {
-        $('.spinner-hidden').removeClass('hidden');
-        $(e.target).addClass('disabled');
-    })
+document.querySelector("form").addEventListener("submit", (e) => {
+    document.getElementById("loading").removeAttribute("style");
+});
 </script>
 {% endblock %}