diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 61d37c0f..19b57eb4 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -11,9 +11,9 @@
     />
     <!-- Latest compiled and minified CSS -->
     <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
-      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
     />
 
@@ -22,9 +22,10 @@
         --big-font-size: 1.5rem;
         --small-font-size: 1.8rem;
         --font-family-sans-serif: Arial, Helvetica, sans-serif;
-        --primary: #003366;
-        --secondary: #6c757d;
-        --bs-primary: #000;
+        --bs-primary: #003366;
+        --bs-secondary: #335c85;
+        --bs-btn-disabled-color: #b2c1d1;
+        --bs-blue: #003366;
       }
       body {
         color: #313132;
@@ -33,35 +34,24 @@
         border: none;
         font-family: var(--font-family-sans-serif);
       }
-      .navbar {
-        border-radius: 0;
-      }
       .header-branding {
-        background-color: var(--primary);
-        height: 7rem;
+        background-color: var(--bs-primary);
+        height: 5rem;
         width: 100%;
         border-style: none none solid none;
         border-color: #fcba19;
         box-shadow: 0px 3px 3px 0px #dedede;
       }
-      .navbar-brand svg {
+      .header-branding svg {
         position: relative;
-        height: 5rem;
-      }
-      .header {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        height: 4rem;
       }
       .header-desc {
         display: grid;
         grid-template-columns: 5rem 1fr;
-        width: 22rem;
-      }
-      .centered-header {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        max-width: 22rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
       }
       .header-share {
         display: grid;
@@ -70,34 +60,12 @@
         margin-top: 1.5rem;
         margin-bottom: 1.75rem;
       }
-      .qr-code-desc {
-        text-align: left;
-      }
       .qr-code {
         display: flex;
         justify-content: center;
         position: relative;
         margin-bottom: 1rem;
       }
-      .qr-code-image {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
-      }
-      .qr-code .border svg {
-        position: absolute;
-        left: 48px;
-        width: 330px;
-        height: 330px;
-        transform: scale(1.05) translate(6px, 8px);
-        margin-left: -10px;
-        margin-top: -10px;
-      }
-      .qr-code.pending svg rect {
-        animation: dash 20s linear infinite;
-      }
       .qr-code img {
         border-radius: 25px;
         border: 5px dashed #003366;
@@ -132,14 +100,17 @@
         font-size: var(--small-font-size);
         font-weight: bold;
       }
-
+     .description {
+       --bs-btn-hover-color: var(--bs-primary);
+       color: var(--bs-primary);
+      }
       #refresh-button {
         background: rgba(256, 256, 256, 0.5);
-        width: 100%;
         transition-property: opacity;
         transition-duration: 0.2s;
         transition-timing-function: ease-in-out;
         display: none;
+        width: 100%;
       }
       #refresh-button:hover,
       #refresh-button:focus,
@@ -147,17 +118,8 @@
         opacity: 0.9;
       }
       #refresh-button .message {
-        font-size: var(--small-font-size);
-        font-weight: bold;
         margin-bottom: 0.8rem;
       }
-      .fake-button {
-        font-size: var(--big-font-size);
-        font-weight: 700;
-        letter-spacing: 1px;
-        background: white;
-        border-color: var(--primary);
-      }
       .header-desc.success,
       .header-desc.pending,
       .header-desc.expired,
@@ -168,10 +130,6 @@
         align-items: center;
         padding: 1rem 2rem 1rem 0.5rem;
       }
-      .header-desc.expired.expired-deep-link {
-        margin-left: 0;
-        width: 100%;
-      }
       .header-desc.pending svg {
         width: 2rem;
         height: 2rem;
@@ -184,9 +142,6 @@
       .header-desc.expired {
         background-color: #f0f0f0;
       }
-      .header-desc.expired-deep-link {
-        margin-bottom: 1.5rem;
-      }
       .header-desc.failed {
         background-color: #f2dede;
       }
@@ -199,42 +154,22 @@
       .header-desc.abandoned {
         background-color: #f2dede;
       }
-      .header-desc a {
-        line-height: 1rem;
-      }
-      .text-link {
-        display: none;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-      .text-link textarea {
-        border-radius: 5px;
-        display: block;
-        max-width: 100%;
-        resize: none;
-        width: 100%;
+      .disabled {
+        --bs-btn-disabled-bg: #b2c1d1;
+        --bs-btn-disabled-border-color: #b2c1d1;
       }
-      .text-link label {
-        display: block;
+      .btn {
+        --bs-btn-hover-bg: #335c85;
+        --bs-btn-hover-border-color: #335c85;
       }
-
-      /* BC Gov style buttons */
-      .btn-primary,
-      .btn-outline-primary {
-        font-size: var(--big-font-size);
-        font-weight: 700;
-        letter-spacing: 1px;
-        cursor: pointer;
-        margin-top: 1rem;
-        margin-bottom: 1.5rem;
-      }
-
       .btn-primary {
-        background-color: var(--primary);
+        border-color: var(--bs-primary);
+        background-color: var(--bs-primary);
       }
       .btn-outline-primary {
-        color: var(--primary);
-        border-color: var(--primary);
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        --bs-btn-active-bg: #335c85;
       }
       /* Mobile device */
       .mobile-device {
@@ -248,25 +183,25 @@
         <div class="navbar-brand">{{add_asset("BCID_H_rgb_rev.svg")}}</div>
       </nav>
       <div class="container">
-        <h1 class="desktop-device desktop-header">
+        <h1 class="desktop-device desktop-header my-2">
           Scan with a Digital Wallet
         </h1>
-        <h1 class="mobile-device">Continue with:</h1>
-        <div class="header">
+        <h1 class="mobile-device my-1">Continue with:</h1>
+        <div class="d-flex flex-row justify-content-center">
           <div class="header-desc success">
             <div class="qr-code-image mw-90">
               {{add_asset("circle-check.svg")}}
             </div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Success!</b> You will be redirected shortly.
             </div>
           </div>
 
           <div class="header-desc failed">
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof not accepted.</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Please try again."
@@ -277,9 +212,9 @@ <h1 class="mobile-device">Continue with:</h1>
 
           <div class="header-desc expired">
             <div class="qr-code-image">{{add_asset("expired.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof has expired.</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh Proof."
@@ -290,9 +225,9 @@ <h1 class="mobile-device">Continue with:</h1>
 
           <div class="header-desc abandoned">
             <div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof declined</b>
-              <br/>
+              <br />
               <a
                 href="javascript:window.location.reload(true)"
                 title="Refresh QR code."
@@ -303,35 +238,35 @@ <h1 class="mobile-device">Continue with:</h1>
 
           <div class="header-desc pending">
             <div class="qr-code-image">{{add_asset("hourglass.svg")}}</div>
-            <div class="qr-code-desc">
+            <div class="text-start">
               <b>Proof is pending.</b>
             </div>
           </div>
         </div>
         <!-- BC Wallet deep link if the user agent is a mobile device -->
         <div class="mobile-device">
-            <a
-              id="deep-link-button"
-	      href="{{wallet_deep_link}}"
-              type="submit"
-              class="btn btn-lg btn-block btn-primary"
-              title="Open BC Wallet"
-              target="_blank"
-            >
-              BC Wallet
-            </a>
+          <a
+            id="deep-link-button"
+            href="{{wallet_deep_link}}"
+            type="submit"
+            class="btn btn-lg btn-block btn-primary w-100 my-2"
+            title="Open BC Wallet"
+            target="_blank"
+          >
+            BC Wallet
+          </a>
           <a
             id="other-device-button"
-            class="btn btn-lg btn-default btn-block btn-outline-secondary btn-secondary"
+            class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2 my-2"
             title="Open BC Wallet"
           >
             BC Wallet on other device
           </a>
 
-          <div class="centered-header">
+          <div class="d-flex flex-row justify-content-center">
             <div class="header-share">
               <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
-              <div class="qr-code-desc">
+              <div class="text-start">
                 A request to share your information will be sent to your BC
                 Wallet
               </div>
@@ -342,10 +277,10 @@ <h1 class="mobile-device">Continue with:</h1>
 
         <!-- QR Code for desktop/other -->
         <div class="desktop-device">
-          <div class="header">
-            <div class="header-desc intro">
+          <div class="d-flex flex-row justify-content-center">
+            <div class="header-desc intro my-2">
               <div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
-              <div class="qr-code-desc">
+              <div class="text-start">
                 Scanning this QR code will send you a request to share your
                 information
               </div>
@@ -354,14 +289,14 @@ <h1 class="mobile-device">Continue with:</h1>
           <div class="media qr-code">
             <button
               id="refresh-button"
-              class="btn btn-default qr-button secondary"
+              class="qr-button"
               title="Refresh QR Code"
             >
-              <div class="button-content">
-                <div class="btn btn-block btn-outline-primary fake-button">
-                  <div class="icon">{{add_asset("refresh.svg")}}</div>
-                  <div class="description">Refresh QR code</div>
-                </div>
+              <div
+                class="button-content btn fw-bolder btn-outline-primary bg-white fs-6 d-flex flex-row"
+              >
+                <div class="icon mx-1">{{add_asset("refresh.svg")}}</div>
+                <div class="description mx-1">Refresh QR code</div>
               </div>
             </button>
             <div class="scanned-mask">
@@ -378,13 +313,14 @@ <h1 class="mobile-device">Continue with:</h1>
         </div>
 
         <!-- Add a input box with the url_to_message data -->
-        <div class="text-link">
+        <div id="text-link" style="display: none">
           <label for="url_to_message">Presentation Exchange URL:</label>
           <textarea
             id="url_to_message"
             rows="3"
             disabed
             value="{{url_to_message}}"
+            class="w-100"
           >
             {{url_to_message}}
           </textarea>
@@ -414,10 +350,12 @@ <h1 class="mobile-device">Continue with:</h1>
         return "Android";
       }
 
-      if (/iPad|iPhone|iPod/.test(userAgent) || 
-          /Macintosh/.test(userAgent) && 'ontouchend' in document ||
-          (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
-          navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
+      if (
+        /iPad|iPhone|iPod/.test(userAgent) ||
+        (/Macintosh/.test(userAgent) && "ontouchend" in document) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ||
+        (navigator.vendor && navigator.vendor.indexOf("Apple") > -1)
+      ) {
         return "iOS";
       }
 
@@ -576,7 +514,7 @@ <h1 class="mobile-device">Continue with:</h1>
      * If the BC_ID is clicked on 10 times in a row, display the link textbox
      */
     let counter = 0;
-    const textLinkDiv = document.querySelector(".text-link");
+    const textLinkDiv = document.querySelector("#text-link");
     document.querySelector("#BC_ID").addEventListener("click", () => {
       counter++;
       if (counter === 10) {