diff --git a/demo/vue/app/frontend/package-lock.json b/demo/vue/app/frontend/package-lock.json
index 87478734..a27da904 100644
--- a/demo/vue/app/frontend/package-lock.json
+++ b/demo/vue/app/frontend/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@babel/eslint-parser": "^7.24.6",
+        "@babel/eslint-parser": "^7.24.7",
         "@bcgov/bc-sans": "^2.1.0",
         "@vue/eslint-config-prettier": "^9.0.0",
         "axios": "^1.7.2",
@@ -34,8 +34,8 @@
         "eslint-plugin-vue": "^9.26.0",
         "eslint-plugin-vuetify": "^1.1.0",
         "lodash": "^4.17.21",
-        "prettier": "^3.2.5",
-        "sass": "^1.77.2",
+        "prettier": "^3.3.1",
+        "sass": "^1.77.4",
         "sass-loader": "^14.2.1",
         "vue-cli-plugin-vuetify": "^2.5.8",
         "vue-template-compiler": "^2.7.16",
@@ -116,9 +116,9 @@
       }
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.24.6",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.24.6.tgz",
-      "integrity": "sha512-Q1BfQX42zXHx732PLW0w4+Y3wJjoZKEMaatFUEAmQ7Z+jCXxinzeqX9bvv2Q8xNPes/H6F0I23oGkcgjaItmLw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.24.7.tgz",
+      "integrity": "sha512-SO5E3bVxDuxyNxM5agFv480YA2HO6ohZbGxbazZdIk3KQOPOGVNw6q78I9/lbviIf95eq6tPozeYnJLbjnC8IA==",
       "dependencies": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
@@ -13517,9 +13517,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.1.tgz",
+      "integrity": "sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14128,9 +14128,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.77.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
-      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+      "version": "1.77.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz",
+      "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
diff --git a/demo/vue/app/frontend/package.json b/demo/vue/app/frontend/package.json
index 28100fe0..6f25f4c8 100644
--- a/demo/vue/app/frontend/package.json
+++ b/demo/vue/app/frontend/package.json
@@ -17,7 +17,7 @@
     "reinstall": "npm run purge && npm install"
   },
   "dependencies": {
-    "@babel/eslint-parser": "^7.24.6",
+    "@babel/eslint-parser": "^7.24.7",
     "@bcgov/bc-sans": "^2.1.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "axios": "^1.7.2",
@@ -42,8 +42,8 @@
     "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vuetify": "^1.1.0",
     "lodash": "^4.17.21",
-    "prettier": "^3.2.5",
-    "sass": "^1.77.2",
+    "prettier": "^3.3.1",
+    "sass": "^1.77.4",
     "sass-loader": "^14.2.1",
     "vue-cli-plugin-vuetify": "^2.5.8",
     "vue-template-compiler": "^2.7.16",
diff --git a/demo/vue/app/package-lock.json b/demo/vue/app/package-lock.json
index 9e1bfef9..716adf68 100644
--- a/demo/vue/app/package-lock.json
+++ b/demo/vue/app/package-lock.json
@@ -22,7 +22,7 @@
         "fs-extra": "^11.2.0",
         "js-yaml": "^4.1.0",
         "jsonwebtoken": "^9.0.2",
-        "keycloak-connect": "^24.0.4",
+        "keycloak-connect": "^24.0.5",
         "winston": "^3.13.0",
         "winston-transport": "^4.7.0"
       },
@@ -31,7 +31,7 @@
         "eslint-config-recommended": "^4.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "jest": "^29.7.0",
-        "nodemon": "^3.1.1",
+        "nodemon": "^3.1.3",
         "supertest": "^7.0.0"
       }
     },
@@ -7556,9 +7556,9 @@
       }
     },
     "node_modules/keycloak-connect": {
-      "version": "24.0.4",
-      "resolved": "https://registry.npmjs.org/keycloak-connect/-/keycloak-connect-24.0.4.tgz",
-      "integrity": "sha512-MaXcNEvvNM7z4QBw2oBAj7iAkH8BFMIO3REP6eXok5C6CfKC0ljS4byeXic6EQ0tBT5OtV9s4Xcv4aCqSWHtZA==",
+      "version": "24.0.5",
+      "resolved": "https://registry.npmjs.org/keycloak-connect/-/keycloak-connect-24.0.5.tgz",
+      "integrity": "sha512-UtDzfsAF4IimlnLjt4Cu0XGOtMUwWFmBmEnzeybQZgxrkwXclHJ0iybpRe6k3tliB2b3/+bL1yOEsFaUmllR4Q==",
       "dependencies": {
         "jwk-to-pem": "^2.0.0"
       },
@@ -7942,9 +7942,9 @@
       "dev": true
     },
     "node_modules/nodemon": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.1.tgz",
-      "integrity": "sha512-k43xGaDtaDIcufn0Fc6fTtsdKSkV/hQzoQFigNH//GaKta28yoKVYXCnV+KXRqfT/YzsFaQU9VdeEG+HEyxr6A==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.3.tgz",
+      "integrity": "sha512-m4Vqs+APdKzDFpuaL9F9EVOF85+h070FnkHVEoU4+rmT6Vw0bmNl7s61VEkY/cJkL7RCv1p4urnUDUMrS5rk2w==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.2",
diff --git a/demo/vue/app/package.json b/demo/vue/app/package.json
index 48fd7a37..f5bd38e9 100644
--- a/demo/vue/app/package.json
+++ b/demo/vue/app/package.json
@@ -44,7 +44,7 @@
     "fs-extra": "^11.2.0",
     "js-yaml": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
-    "keycloak-connect": "^24.0.4",
+    "keycloak-connect": "^24.0.5",
     "winston": "^3.13.0",
     "winston-transport": "^4.7.0"
   },
@@ -53,7 +53,7 @@
     "eslint-config-recommended": "^4.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "jest": "^29.7.0",
-    "nodemon": "^3.1.1",
+    "nodemon": "^3.1.3",
     "supertest": "^7.0.0"
   }
 }
diff --git a/oidc-controller/api/templates/assets/hourglass.svg b/oidc-controller/api/templates/assets/hourglass.svg
deleted file mode 100644
index 432d7e8a..00000000
--- a/oidc-controller/api/templates/assets/hourglass.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version='1.0' encoding='iso-8859-1'?>
-<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#778ea1" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 235.319 235.319" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 235.319 235.319">
-  <g>
-    <path d="m201.094,29.997c2.649-0.623 4.623-2.996 4.623-5.835v-18.162c0-3.313-2.687-6-6-6h-164.114c-3.313,0-6,2.687-6,6v18.163c0,2.839 1.974,5.212 4.623,5.835 1.812,32.314 18.594,61.928 45.682,80.076l11.324,7.586-11.324,7.586c-27.089,18.147-43.871,47.762-45.682,80.076-2.649,0.623-4.623,2.996-4.623,5.835v18.163c0,3.313 2.687,6 6,6h164.114c3.313,0 6-2.687 6-6v-18.163c0-2.839-1.974-5.212-4.623-5.835-1.812-32.314-18.594-61.928-45.683-80.076l-11.324-7.586 11.324-7.586c27.089-18.148 43.871-47.763 45.683-80.077zm-159.491-17.997h152.114v6.163h-152.114v-6.163zm152.114,211.319h-152.114v-6.163h152.114v6.163zm-63.749-110.644c-1.663,1.114-2.661,2.983-2.661,4.985s0.998,3.871 2.661,4.985l18.765,12.571c23.71,15.883 38.49,41.705 40.333,69.941h-142.812c1.843-28.235 16.623-54.057 40.333-69.941l18.765-12.571c1.663-1.114 2.661-2.983 2.661-4.985s-0.998-3.871-2.661-4.985l-18.765-12.571c-23.71-15.884-38.49-41.706-40.333-69.941h142.812c-1.843,28.236-16.623,54.057-40.333,69.941l-18.765,12.571z"/>
-    <path d="m133.307,82.66h-31.295c-2.487,0-4.717,1.535-5.605,3.858-0.888,2.324-0.25,4.955 1.604,6.613l15.647,14c1.139,1.019 2.57,1.528 4,1.528s2.862-0.509 4-1.528l15.647-14c1.854-1.659 2.492-4.29 1.604-6.613-0.885-2.323-3.115-3.858-5.602-3.858z"/>
-    <path d="m117.414,140.581l-15.218,9.775c-13.306,8.914-21.292,23.876-21.292,39.892h76.511c0-16.016-7.986-30.978-21.292-39.892l-15.218-9.775c-1.074-0.644-2.416-0.644-3.491,0z"/>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/oidc-controller/api/templates/assets/spinner.svg b/oidc-controller/api/templates/assets/spinner.svg
new file mode 100644
index 00000000..0dfffcbc
--- /dev/null
+++ b/oidc-controller/api/templates/assets/spinner.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="spinner.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="6.5628348"
+     inkscape:cx="56.454263"
+     inkscape:cy="16.989609"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="3832"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     id="Icon_material-refresh"
+     data-name="Icon material-refresh"
+     d="M 41.026162,7.5363953 C 23.829804,-9.6119325 -5.0484867,7.0536883 1.3448609,30.41487 7.7382086,53.77605 41.120858,53.569275 47.204563,30.112169 H 41.036047 C 36.223718,43.656698 18.059973,46.160203 9.7286108,34.42839 1.3972477,22.696576 9.8333604,6.4950865 24.270334,6.5035165 c 4.711297,0.00754 9.221525,1.9005387 12.514971,5.2529245 L 47.9954,0.60135275 Z"
+     fill="#0048c4"
+     sodipodi:nodetypes="csccscccc"
+     style="stroke-width:1.97223" />
+</svg>
diff --git a/oidc-controller/api/templates/verified_credentials.html b/oidc-controller/api/templates/verified_credentials.html
index 19948418..ff15ac13 100644
--- a/oidc-controller/api/templates/verified_credentials.html
+++ b/oidc-controller/api/templates/verified_credentials.html
@@ -20,161 +20,129 @@
       integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
       crossorigin="anonymous"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/fontawesome.min.css"
+      integrity="sha384-BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK"
+      crossorigin="anonymous"
+    />
 
     <style>
       :root {
-        --big-font-size: 1.5rem;
-        --font-family-sans-serif: Arial, Helvetica, sans-serif;
-        --bs-primary: #003366;
-        --bs-secondary: #335c85;
-        --bs-btn-disabled-color: #b2c1d1;
-        --bs-blue: #003366;
+        --alert-link-text: #1a5a96;
+        --bc-primary: #003366;
+        --bc-secondary: #335c85;
+        --bc-accent: #fcba19;
+        --bc-btn-disabled-color: #b2c1d1;
+        --bc-btn-focus-color: #3b99fc;
+        --font-color: #313132;
+        --grid-container-max-width: 480px;
+        --grid-qr-width: 324px;
+        --qr-accent-color: #0048c4;
       }
       body {
-        color: #313132;
-        text-align: center;
-        border-radius: 0.5rem;
-        border: none;
-        font-family: var(--font-family-sans-serif);
+        font-family: "Arial", sans-serif;
+        color: var(--font-color);
       }
-      .header-branding {
-        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;
+      main.container {
+        max-width: var(--grid-container-max-width);
+        padding: 0 15px;
       }
-      .header-branding svg {
-        position: relative;
-        height: 4rem;
+      h1 {
+        font-size: 2.25rem;
+        font-weight: 700;
       }
-      .header-desc {
-        display: grid;
-        grid-template-columns: 5rem 1fr;
-        max-width: 22rem;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
+      .custom-column {
+        max-width: var(--grid-qr-width);
       }
-      .qr-code {
-        display: flex;
-        justify-content: center;
-        position: relative;
-        margin-bottom: 1rem;
+      .alert {
+        color: black;
       }
-      .qr-code img {
-        border-radius: 25px;
-        border: 5px dashed #003366;
+      a {
+        color: var(--alert-link-text);
       }
-
-      @keyframes dash {
+      .status-icon svg {
+        height: 3rem;
+        width: 3rem;
+      }
+      @keyframes spin {
         to {
-          stroke-dashoffset: -1200px;
+          transform: rotate(360deg);
         }
       }
-      a {
-        color: #1a5a96;
-        line-height: 1.5rem;
+      .icon-rotate {
+        animation: spin 2s linear infinite;
+      }
+      .qr-code-container {
+        position: relative;
       }
-      .qr-button,
-      .scanned-mask {
+      .qr-code-container .qr-code-img {
+        border-radius: 25px;
+        border: 5px dashed var(--bc-primary);
+      }
+      .qr-button {
         position: absolute;
         top: 10px;
+        left: 10px;
+        height: 90%;
+        width: 90%;
+        background-color: rgba(255, 255, 255, 0.9);
         display: flex;
-        background-color: rgba(255, 255, 255, 0.8);
-        height: 85%;
-        width: 17rem;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        z-index: 1;
         border-style: none;
         cursor: pointer;
       }
-      .scanned-mask {
-        font-size: var(--big-font-size);
-        font-weight: bold;
-      }
-      .message {
-        background-color: rgba(255, 255, 255, 1);
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        border: black 1px solid;
-        opacity: 1;
-      }
-      .description {
-        --bs-btn-hover-color: var(--bs-primary);
-        color: var(--bs-primary);
-      }
-      #refresh-button {
-        background: rgba(256, 256, 256, 0.5);
-        transition-property: opacity;
-        transition-duration: 0.2s;
-        transition-timing-function: ease-in-out;
+      .qr-button .btn {
+        border-radius: 4px;
+        border-width: 2px;
+        border-color: var(--qr-accent-color);
+        color: var(--qr-accent-color);
       }
-      #refresh-button:hover,
-      #refresh-button:focus,
-      #refresh-button:active {
-        opacity: 0.9;
-      }
-      #refresh-button .message {
-        margin-bottom: 0.8rem;
-      }
-      .header-desc.success,
-      .header-desc.pending,
-      .header-desc.expired,
-      .header-desc.abandoned,
-      .header-desc.failed {
-        border-radius: 0.5rem;
-        align-items: center;
-        padding: 1rem 2rem 1rem 0.5rem;
-      }
-      .header-desc.pending svg {
-        width: 2rem;
-        height: 2rem;
-      }
-      .header-desc.expired svg {
-        width: 2rem;
-        height: 2rem;
-        opacity: 0.7;
-      }
-      .header-desc.expired {
-        background-color: #f0f0f0;
-      }
-      .header-desc.failed {
-        background-color: #f2dede;
-      }
-      .header-desc.pending {
-        background-color: #cbe8ff;
-      }
-      .header-desc.success {
-        background-color: #dff0d8;
-      }
-      .header-desc.abandoned {
-        background-color: #f2dede;
-      }
-      .disabled {
-        --bs-btn-disabled-bg: #b2c1d1;
-        --bs-btn-disabled-border-color: #b2c1d1;
+      .qr-button .btn:hover,
+      .qr-button .btn:active {
+        background-color: #f8f9fa;
+        border-color: var(--bc-primary);
+        color: var(--bc-primary);
       }
+      /* BC Gov Styles */
       .btn {
-        --bs-btn-hover-bg: #335c85;
-        --bs-btn-hover-border-color: #335c85;
+        --bs-btn-hover-bg: var(--bc-secondary);
+        --bs-btn-active-bg: var(--bc-secondary);
+        --bs-btn-hover-border-color: var(--bc-secondary);
       }
       .btn-primary {
-        border-color: var(--bs-primary);
-        background-color: var(--bs-primary);
-      }
-      .btn-outline-primary {
-        color: var(--bs-primary);
-        border-color: var(--bs-primary);
-        --bs-btn-hover-color: var(--bs-primary);
-        --bs-btn-active-bg: #fff;
-        --bs-btn-hover-bg: #fff;
+        border-color: var(--bc-primary);
+        background-color: var(--bc-primary);
+      }
+      .btn-primary.disabled {
+        --bs-btn-disabled-bg: var(--bc-btn-disabled-color);
+        --bs-btn-disabled-border-color: var(--bc-btn-disabled-color);
+      }
+      .btn-primary:focus,
+      .btn-block-secondary:focus {
+        outline-offset: 1px;
+        outline: 4px solid var(--bc-btn-focus-color);
+      }
+      .btn-block-secondary {
+        color: var(--bc-primary);
+        border-color: var(--bc-primary);
+      }
+      .btn-block-secondary.disabled {
+        opacity: 0.3;
+        color: var(--bc-primary);
+        border-color: var(--bc-primary);
+      }
+      .navbar {
+        background-color: var(--bc-primary);
+        border-bottom: 4px solid var(--bc-accent);
+        box-shadow: 0px 3px 3px 0px #dedede;
       }
-      /* Mobile device */
-      .mobile-device {
-        display: none;
+      .navbar svg {
+        height: 4rem;
       }
+
       [v-cloak] {
         display: none;
       }
@@ -183,111 +151,74 @@
   <body>
     <div id="app">
       <div v-cloak>
-        <nav class="navbar navbar-expand-lg navbar-custom header-branding">
-          <!-- If the BC_ID is clicked on 10 times in a row, display the link textbox -->
-          <div v-html="svgContent" v-on:click="bcIdClicks++"></div>
+        <nav class="navbar">
+          <div v-html="bcGovLogo" v-on:click="bcIdClicks++"></div>
         </nav>
-        <h1 class="my-2">[[ headerText ]]</h1>
-        <div class="d-flex flex-row justify-content-center">
-          <status-description
-            key="state.current"
-            :current-state="state.current"
-          >
-          </status-description>
-        </div>
-        <div class="mx-3">
-          <error-message v-if="failed"></error-message>
-          <!-- BC Wallet deep link if the user agent is a mobile device -->
-          <div v-if="mobileDevice && !failed">
-            <a
-              id="deep-link-button"
-              href="{{wallet_deep_link}}"
-              class="btn btn-lg btn-block btn-primary w-100 my-2 rounded-1"
-              title="Open BC Wallet"
-              target="_blank"
-              :class="{disabled: state.disableDeeplink}"
-              v-on:click="deepLinkOpen"
-            >
-              BC Wallet
-            </a>
 
-            <!-- If the other device button is clicked, show the qr code area -->
-            <a
-              id="other-device-button"
-              class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2 my-2 rounded-1"
-              title="Open BC Wallet"
-              v-on:click="toggleQr"
-            >
-              BC Wallet on other device
-            </a>
-          </div>
-        </div>
-        <div v-if="displayQr && !failed">
-          <div
-            v-if="state.current === 'intro'"
-            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="text-start mx-2">
-                Scanning this QR code will send you a request to share your
-                information
-              </div>
-            </div>
-          </div>
-          <div class="media qr-code">
-            <button
-              id="refresh-button"
-              class="qr-button"
-              title="Refresh QR Code"
-              v-if="state.showRefresh"
-              v-on:click="reload"
+        <main class="container mt-4 text-center">
+          <h1 v-if="!mobileDevice" class="mb-3">Scan with a Digital Wallet</h1>
+          <div class="row">
+            <div
+              class="col mx-auto"
+              :class="{'custom-column': state.current !== 'failed'}"
             >
-              <div
-                class="button-content btn fw-bolder btn-outline-primary bg-white fs-6 d-flex flex-row"
+              <h1 v-if="mobileDevice" class="mb-3 text-start fw-bolder fs-1">
+                Continue with:
+              </h1>
+              <status-description
+                key="state.current"
+                :current-status="state.current"
               >
-                <div class="icon mx-1">{{add_asset("refresh.svg")}}</div>
-                <div class="description mx-1">Refresh QR code</div>
+              </status-description>
+
+              <error-message v-if="state.current === 'failed'"></error-message>
+
+              <div v-else>
+                <mobile-links
+                  v-if="mobileDevice"
+                  :state="state"
+                  v-on:open="deepLinkOpen"
+                  v-on:toggle="toggleQr"
+                ></mobile-links>
+
+                <div
+                  v-if="state.current === 'intro'"
+                  class="row align-items-center my-3"
+                >
+                  <div class="col-auto">{{add_asset("hand-qrcode.svg")}}</div>
+                  <div class="col text-start">
+                    <span v-if="mobileDevice">
+                      A request to share your information will be sent to your
+                      BC Wallet.
+                    </span>
+                    <span v-else>
+                      Scanning this QR code will send you a request to share
+                      your information.
+                    </span>
+                  </div>
+                </div>
+
+                <qr-code
+                  v-if="displayQr"
+                  :state="state"
+                  v-on:reload="reload"
+                ></qr-code>
+
+                <hr v-if="mobileDevice" />
+
+                <p>
+                  <b>Don't have a digital wallet?</b>
+                  <br />
+                  <a
+                    title="Download BC Wallet"
+                    href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
+                    >Download the BC Wallet app
+                  </a>
+                </p>
               </div>
-            </button>
-            <div v-if="state.showScanned" class="scanned-mask">
-              <div class="message">QR code scanned</div>
             </div>
-            <img
-              class="qr-code"
-              :class="{pending: state.current === 'pending'}"
-              src="data:image/jpeg;base64,{{image_contents}}"
-              alt="{{image_contents}}"
-              width="300px"
-              height="300px"
-            />
           </div>
-        </div>
-
-        <!-- Add a input box with the url_to_message data -->
-        <div v-if="bcIdClicks >= 10" id="text-link">
-          <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>
-        </div>
-
-        <p>
-          <b>Don't have a digital wallet?</b>
-        </p>
-        <p>
-          <a
-            title="Download BC Wallet"
-            href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
-            >Download the BC Wallet app
-          </a>
-        </p>
+        </main>
       </div>
     </div>
 
@@ -297,43 +228,110 @@ <h1 class="my-2">[[ headerText ]]</h1>
   <!-- Components -->
   <script type="text/x-template" id="status-description">
     <div v-if="status">
-      <div class="header-desc" :class="status.className">
-        <div class="qr-code-image" v-html="status.icon"></div>
-        <div class="text-start">
-          <b>[[status.title]]</b>
-          <div v-if="status.text">[[status.text]]</div>
-          <div v-if="status.link">
-            <a
-              href="javascript:window.location.reload(true)"
-              title="Refresh QR code."
-            > [[status.link]]
-            </a>
+      <div class="alert d-flex" :class="[[status.className]]" role="alert">
+        <div class="row align-items-center">
+          <div class="col-auto">
+            <div class="status-icon"
+              :class="{ 'icon-rotate': status.rotate }"
+              v-html="status.icon">
+            </div>
+          </div>
+          <div class="col text-start">
+            <b>[[status.title]]</b>
+            <div v-if="status.text">[[status.text]]</div>
+            <div v-if="status.link">
+              <a
+                href="javascript:window.location.reload(true)"
+                title="Refresh QR code."
+              > [[status.link]]
+              </a>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </script>
-  <script type="text/x-template" id="error-message">
-    <div class="d-flex flex-row justify-content-center my-2">
-      <div class="content">
-        <div class="container-sm" style="max-width: 25rem;">
-          <div class="card-body">
-            <div  class="text-start">
-              <b>We couldn't verify your credentials because they may be:</b>
-              <ul>
-                <li>revoked</li>
-                <li>expired</li>
-                <li>or missing</li>
-              </ul>
-              <p>
-                Please ensure you shared the right credentials in your wallet and try again.
-              </p>
-            </div>
-          </div>
+
+  <script type="text/x-template" id="qr-code">
+    <div class="qr-code-container mb-3">
+      <button
+        id="refresh-button"
+        class="qr-button"
+        title="Refresh QR Code"
+        v-if="state.showScanned || state.showRefresh"
+        v-on:click="state.showRefresh ? $emit('reload') : null"
+      >
+        <h5 v-if="state.showScanned" class="fw-bolder mb-3">
+          QR Code Scanned
+        </h5>
+        <div
+          v-if="state.showRefresh"
+          class="btn btn-outline-primary bg-white fs-6 d-flex flex-row"
+        >
+          <div class="icon mx-1">{{add_asset("refresh.svg")}}</div>
+          <div class="mx-1 fw-bolder">Refresh QR code</div>
         </div>
-      </div>
+      </button>
+      <img
+        class="qr-code-img"
+        :class="{pending: state.current === 'pending'}"
+        src="data:image/jpeg;base64,{{image_contents}}"
+        alt="{{image_contents}}"
+        width="300px"
+        height="300px"
+      />
     </div>
   </script>
+
+  <script type="text/x-template" id="mobile-links">
+    <div>
+      <a
+        id="deep-link-button"
+        href="{{wallet_deep_link}}"
+        class="btn btn-lg btn-block btn-primary w-100 mb-4 rounded-1"
+        title="Open BC Wallet"
+        target="_blank"
+        :class="{disabled: state.disableDeeplink}"
+        v-on:click="$emit('open')"
+      >
+        BC Wallet
+      </a>
+
+      <!-- If the other device button is clicked, show the qr code area -->
+      <a
+        id="other-device-button"
+        href="#"
+        class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 mb-2 border-2 rounded-1"
+        title="Show QR Code for other device"
+        :class="{disabled: state.disableDeeplink}"
+        v-on:click.prevent="$emit('toggle')"
+      >
+        BC Wallet on other device
+      </a>
+    </div>
+  </script>
+
+  <script type="text/x-template" id="error-message">
+    <div class="text-start">
+      <b>We couldn't verify your credentials because they may be:</b>
+      <ul>
+        <li>revoked</li>
+        <li>expired</li>
+        <li>or missing</li>
+      </ul>
+      <p>
+        Please ensure you shared the right credentials in your wallet and try again.
+      </p>
+      <p>
+        Learn <a
+          href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet/add-digital-credentials"
+          target="_blank">
+          how to add credentials in your wallet.
+        </a>
+      </p>
+    </div>
+  </script>
+
   <script type="text/javascript">
     const { createApp, ref, reactive, computed, watch } = Vue;
 
@@ -345,7 +343,6 @@ <h1 class="my-2">[[ headerText ]]</h1>
        * @type {AppStates}
        */
       current: "intro",
-      showSpinner: false,
       showScanned: false,
       showRefresh: false,
       disableDeeplink: false,
@@ -374,17 +371,12 @@ <h1 class="my-2">[[ headerText ]]</h1>
         const mobileDevice = ref(
           getBrowser() === "Android" || getBrowser() === "iOS" ? true : false
         );
-        const failed = computed(() => state.current === "failed");
 
         return {
           mobileDevice,
           state,
-          failed,
-          headerText: mobileDevice.value
-            ? "Continue with:"
-            : "Scan with a Digital Wallet",
           displayQr: mobileDevice.value ? false : true,
-          svgContent: `{{add_asset("BCID_H_rgb_rev.svg")}}`,
+          bcGovLogo: `{{add_asset("BCID_H_rgb_rev.svg")}}`,
           bcIdClicks: 0,
           socket: null,
         };
@@ -392,6 +384,7 @@ <h1 class="my-2">[[ headerText ]]</h1>
       methods: {
         deepLinkOpen() {
           this.setUiStates("pending");
+          this.displayQr = false;
         },
         // Only used on mobile devices to toggle the qrcode using the button
         toggleQr() {
@@ -402,7 +395,6 @@ <h1 class="my-2">[[ headerText ]]</h1>
         },
         setUiStates(status) {
           state.current = status;
-          state.showSpinner = status === "pending";
           state.showScanned = ["pending", "verified"].includes(status);
           state.showRefresh = ["abandoned", "expired", "failed"].includes(
             status
@@ -479,36 +471,36 @@ <h1 class="my-2">[[ headerText ]]</h1>
       },
       delimiters: ["[[", "]]"],
     });
-    const updateStatus = (currentState) => {
-      console.log(currentState);
-      switch (currentState) {
+    const updateStatus = (currentStatus) => {
+      console.log(currentStatus);
+      switch (currentStatus) {
         case "verified":
           setTimeout(() => {
             window.location.replace("{{callback_url}}", { method: "POST" });
           }, 2000);
           return {
-            className: "success",
+            className: "alert-success",
             icon: `{{add_asset("circle-check.svg")}}`,
             title: "Success!",
             text: "You will be redirected shortly.",
           };
         case "failed":
           return {
-            className: "failed",
+            className: "alert-danger",
             icon: `{{add_asset("circle-x.svg")}}`,
-            title: "Proof not accepted.",
-            link: "Please try again.",
+            title: "Unable to verify credentials.",
+            link: "Try again.",
           };
         case "expired":
           return {
-            className: "expired",
+            className: "alert-secondary",
             icon: `{{add_asset("expired.svg")}}`,
             title: "Proof has expired.",
             link: "Refresh Proof",
           };
         case "abandoned":
           return {
-            className: "abandoned",
+            className: "alert-danger",
             icon: `{{add_asset("circle-x.svg")}}`,
             title: "Proof declined",
             link: "Try again",
@@ -516,20 +508,21 @@ <h1 class="my-2">[[ headerText ]]</h1>
         // The proof has been pending for too long
         case "timeout":
           return {
-            className: "pending",
-            icon: `{{add_asset("hourglass.svg")}}`,
-            title: "Proof is pending.",
-            text: "Taking too long?",
-            link: "Try again.",
+            className: "alert-primary",
+            icon: `{{add_asset("spinner.svg")}}`,
+            title: "This is taking longer than usual",
+            link: "Try again",
+            rotate: true,
           };
         case "pending":
           setInterval(() => {
             if (state.current === "pending") state.current = "timeout";
           }, 60000);
           return {
-            className: "pending",
-            icon: `{{add_asset("hourglass.svg")}}`,
-            title: "Proof is pending.",
+            className: "alert-primary",
+            icon: `{{add_asset("spinner.svg")}}`,
+            title: "Accept the request in your wallet.",
+            rotate: true,
           };
       }
       return null;
@@ -537,15 +530,31 @@ <h1 class="my-2">[[ headerText ]]</h1>
     app.component("error-message", {
       template: `#error-message`,
     });
+    app.component("mobile-links", {
+      template: `#mobile-links`,
+      props: {
+        state: {
+          required: true,
+        },
+      },
+    });
+    app.component("qr-code", {
+      template: `#qr-code`,
+      props: {
+        state: {
+          required: true,
+        },
+      },
+    });
     app.component("status-description", {
       template: `#status-description`,
       props: {
-        currentState: {
+        currentStatus: {
           required: true,
         },
       },
       setup(props) {
-        const status = computed(() => updateStatus(props.currentState));
+        const status = computed(() => updateStatus(props.currentStatus));
         return {
           status,
         };
diff --git a/oidc-controller/requirements-dev.txt b/oidc-controller/requirements-dev.txt
index 3b0af3bc..39ba2aaa 100644
--- a/oidc-controller/requirements-dev.txt
+++ b/oidc-controller/requirements-dev.txt
@@ -4,6 +4,6 @@ mock==5.1.0
 mongomock==4.1.2
 pytest-asyncio==0.23.7
 pytest-cov==5.0.0
-pytest==8.2.1
+pytest==8.2.2
 requests-mock==1.12.1
 setuptools==70.0.0
diff --git a/oidc-controller/requirements.txt b/oidc-controller/requirements.txt
index 275c8740..200e23c6 100644
--- a/oidc-controller/requirements.txt
+++ b/oidc-controller/requirements.txt
@@ -1,12 +1,12 @@
 fastapi==0.111.0
 jinja2==3.1.4
 oic==1.7.0
-pymongo==4.7.2
+pymongo==4.7.3
 pyop==3.4.1
 python-multipart==0.0.9 # required by fastapi to serve/upload files
 qrcode[pil]==7.4.2
 structlog==24.2.0
-uvicorn[standard]==0.30.0
+uvicorn[standard]==0.30.1
 python-socketio==5.11.2 # required to run websockets
 canonicaljson==2.0.0 # used to provide unique consistent user identifiers
-pydantic-settings==2.2.1
+pydantic-settings==2.3.1