diff --git a/passbook/factors/otp/templates/otp/user_settings.html b/passbook/factors/otp/templates/otp/user_settings.html
index f095e4ad4..4764de835 100644
--- a/passbook/factors/otp/templates/otp/user_settings.html
+++ b/passbook/factors/otp/templates/otp/user_settings.html
@@ -16,9 +16,9 @@
                     Status: {{ state }}
                     {% endblocktrans %}
                     {% if state %}
-                    <clr-icon shape="check" size="32" class="is-success"></clr-icon>
+                    <i class="pf-icon pf-icon-ok"></i>
                     {% else %}
-                    <clr-icon shape="times" size="32" class="is-error"></clr-icon>
+                    <i class="pf-icon pf-icon-error-circle-o"></i>
                     {% endif %}
                 </p>
                 <p>
diff --git a/passbook/providers/oauth/templates/oauth2_provider/setup_url_modal.html b/passbook/providers/oauth/templates/oauth2_provider/setup_url_modal.html
index 902107626..555667ff6 100644
--- a/passbook/providers/oauth/templates/oauth2_provider/setup_url_modal.html
+++ b/passbook/providers/oauth/templates/oauth2_provider/setup_url_modal.html
@@ -1,40 +1,38 @@
 {% load i18n %}
+<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="oauth-{{ provider.pk }}">{% trans 'View Setup URLs' %}</button>
 
-<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{ provider.pk }}">{% trans 'View Setup URLs' %}</button>
-<div class="modal fade" id="{{ provider.pk }}" tabindex="-1" role="dialog" aria-labelledby="{{ provider.pk }}Label" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
-          <span class="pficon pficon-close"></span>
-        </button>
-        <h4 class="modal-title" id="{{ provider.pk }}Label">{% trans 'Setup URLs' %}</h4>
-      </div>
-      <div class="modal-body">
-        <form class="form-horizontal">
-          <div class="form-group">
-            <label class="col-sm-3 control-label">{% trans 'Authroize URL' %}</label>
-            <div class="col-sm-9">
-              <input type="text"class="form-control" readonly value="{{ authorize_url }}">
+<div class="pf-c-backdrop" id="oauth-{{ provider.pk }}" hidden>
+    <div class="pf-l-bullseye">
+        <div class="pf-c-modal-box pf-m-lg" role="dialog">
+            <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
+                <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+            <h1 class="pf-c-title pf-m-2xl" id="modal-title">{% trans 'Setup URLs' %}</h1>
+            <div class="pf-c-modal-box__body" id="modal-description">
+                <form class="pf-c-form">
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">{% trans 'Authorize URL' %}</span>
+                        </label>
+                        <input class="pf-c-form-control" readonly type="text" value="{{ authorize_url }}" />
+                    </div>
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">{% trans 'Token URL' %}</span>
+                        </label>
+                        <input class="pf-c-form-control" readonly type="text" value="{{ token_url }}" />
+                    </div>
+                    <div class="pf-c-form__group">
+                        <label class="pf-c-form__label" for="help-text-simple-form-name">
+                            <span class="pf-c-form__label-text">{% trans 'Userinfo Endpoint' %}</span>
+                        </label>
+                        <input class="pf-c-form-control" readonly type="text" value="{{ userinfo_url }}" />
+                    </div>
+                </form>
             </div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-3 control-label">{% trans 'Token URL' %}</label>
-            <div class="col-sm-9">
-              <input type="text" class="form-control" readonly value="{{ token_url }}">
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-3 control-label">{% trans 'Userinfo Endpoint' %}</label>
-            <div class="col-sm-9">
-              <input type="text" class="form-control" readonly value="{{ userinfo_url }}">
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">{% trans 'Close' %}</button>
-      </div>
+            <footer class="pf-c-modal-box__footer pf-m-align-left">
+                <button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
+            </footer>
+        </div>
     </div>
-  </div>
 </div>
diff --git a/passbook/providers/oidc/templates/oidc_provider/setup_url_modal.html b/passbook/providers/oidc/templates/oidc_provider/setup_url_modal.html
index ccceddb60..ccfd0cbe4 100644
--- a/passbook/providers/oidc/templates/oidc_provider/setup_url_modal.html
+++ b/passbook/providers/oidc/templates/oidc_provider/setup_url_modal.html
@@ -1,10 +1,10 @@
 {% load i18n %}
 
-<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="provider-{{ provider.pk }}">{% trans 'View Setup URLs' %}</button>
+<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="oidc-{{ provider.pk }}">{% trans 'View Setup URLs' %}</button>
 
-<div class="pf-c-backdrop" id="provider-{{ provider.pk }}" hidden>
+<div class="pf-c-backdrop" id="oidc-{{ provider.pk }}" hidden>
     <div class="pf-l-bullseye">
-        <div class="pf-c-modal-box pf-m-sm" role="dialog">
+        <div class="pf-c-modal-box pf-m-lg" role="dialog">
             <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
                 <i class="fas fa-times" aria-hidden="true"></i>
             </button>
diff --git a/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html b/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html
index dda4f46d1..1d08f3e39 100644
--- a/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html
+++ b/passbook/providers/saml/templates/saml/idp/admin_metadata_modal.html
@@ -7,11 +7,11 @@
 <link rel="stylesheet" href="{% static 'node_modules/codemirror/theme/monokai.css' %}">
 <script src="{% static 'node_modules/codemirror/mode/xml/xml.js' %}"></script>
 
-<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="{{ provider.pk }}">{% trans 'View Metadata' %}</button>
+<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="saml-{{ provider.pk }}">{% trans 'View Metadata' %}</button>
 
-<div class="pf-c-backdrop" id="{{ provider.pk }}" hidden>
+<div class="pf-c-backdrop" id="saml-{{ provider.pk }}" hidden>
     <div class="pf-l-bullseye">
-        <div class="pf-c-modal-box pf-m-sm" role="dialog">
+        <div class="pf-c-modal-box pf-m-lg" role="dialog">
             <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
                 <i class="fas fa-times" aria-hidden="true"></i>
             </button>
diff --git a/passbook/static/static/passbook/pf.js b/passbook/static/static/passbook/pf.js
index 04f0381eb..f29f3aa6a 100644
--- a/passbook/static/static/passbook/pf.js
+++ b/passbook/static/static/passbook/pf.js
@@ -15,7 +15,7 @@ document.querySelectorAll("[data-target='modal']").forEach((m) => {
         document.querySelector(`#${modalId}`).removeAttribute("hidden");
     });
 });
-document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach(b => {
+document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach((b) => {
     b.addEventListener("click", (e) => {
         const parentContainer = e.target.closest('.pf-c-backdrop');
         parentContainer.setAttribute("hidden", true);