diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
index 24bee6aca5a..1bf1c583917 100644
--- a/src_assets/common/assets/web/pin.html
+++ b/src_assets/common/assets/web/pin.html
@@ -22,19 +22,6 @@ <h1 class="my-4 text-center">PIN Pairing</h1>
       </div>
       <div id="status"></div>
     </form>
-    <div id="client-management" class="m-auto mt-5" style="max-width: 900px;">
-      <div class="container">
-        <div class="d-flex justify-content-end align-items-center mb-2">
-          <h2 class="text-center me-auto">Paired Clients</h2>
-          <div id="client-refresh" class="btn btn-sm d-flex align-items-center me-1"><i class="fas fa-fw fa-refresh me-1"></i> Refresh</div>
-        </div>
-        <div id="apply-alert" class="alert alert-success d-flex align-items-center" style="display: none !important;">
-          <div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
-          <button class="btn btn-success ms-auto apply">Apply</button>
-        </div>
-        <ul id="client-list" class="list-group"></ul>
-      </div>
-    </div>
   </div>
 </body>
 
@@ -68,39 +55,6 @@ <h2 class="text-center me-auto">Paired Clients</h2>
             "#status"
           ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
         }
-        refreshClients();
       });
   });
-  
-  const clientList = document.querySelector("#client-list");
-
-  function refreshClients() {
-    fetch("/api/clients/list")
-      .then((response) => response.json())
-      .then((response) => {
-        clientList.innerHTML = "";
-        if (response.status === 'true' && response.named_certs && response.named_certs.length) {
-          for (const named_cert of response.named_certs) {
-            clientList.innerHTML += `<div class="list-group-item d-flex"><div class="p-2 flex-grow-1">${named_cert.name != "" ? named_cert.name : "Unknown"}</div><div class="unpair p-2 ms-auto btn btn-danger" data-uniqueid="${named_cert.uniqueID}">Remove</div></div>`;
-          }
-        } else {
-          clientList.innerHTML = `<p class="p-2 text-center mt-2">There are no paired clients.</p>`;
-        }
-        for (const unpairOption of clientList.querySelectorAll(".unpair")) {
-          unpairOption.addEventListener("click", () => {
-            fetch("/api/clients/unpair-single", { method: "POST", body: JSON.stringify({ uniqueid: unpairOption.dataset.uniqueid }) }).then(() => {
-              document.querySelector("#apply-alert").style.setProperty('display', 'flex', 'important');
-              refreshClients();
-            });
-          });
-        }
-      });
-  }
-  refreshClients();
-
-  document.querySelector("#client-refresh").addEventListener("click", refreshClients);
-  document.querySelector("#apply-alert .apply").addEventListener("click", () => { 
-    document.querySelector("#apply-alert").style.setProperty('display', 'none', 'important');
-    fetch("/api/restart", { method: "POST" });
-  });
 </script>
\ No newline at end of file
diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
index 6ad8afc59da..50e7f54d257 100644
--- a/src_assets/common/assets/web/troubleshooting.html
+++ b/src_assets/common/assets/web/troubleshooting.html
@@ -82,23 +82,38 @@ <h2 id="restart">Restart Sunshine</h2>
       </div>
     </div>
     <!-- Unpair all Clients -->
-    <div class="card p-2 my-4">
+    <div class="card my-4">
       <div class="card-body">
-        <h2 id="unpair">Unpair All Clients</h2>
-        <br>
-        <p>Remove all your paired devices</p>
-        <div class="alert alert-success" v-if="unpairAllStatus === true">
-          Unpair Successful!
-        </div>
-        <div class="alert alert-danger" v-if="unpairAllStatus === false">
-          Error while unpairing
-        </div>
-        <div>
-          <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
-            Unpair All
-          </button>
+        <div class="p-2">
+          <div class="d-flex justify-content-end align-items-center">
+            <h2 class="text-center me-auto">Unpair Clients</h2>
+            <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
+              Unpair All
+            </button>
+          </div>
+          <div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3" :style="{ 'display': (showApplyMessage ? 'flex !important': 'none !important') }">
+            <div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
+            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">Apply</button>
+          </div>
+          <div class="alert alert-success" v-if="unpairAllStatus === true">
+            Unpair Successful!
+          </div>
+          <div class="alert alert-danger" v-if="unpairAllStatus === false">
+            Error while unpairing
+          </div>
+          <br />
+          <p class="mb-0">Remove your paired devices.</p>
         </div>
       </div>
+      <ul id="client-list" class="list-group list-group-flush list-group-item-light" v-if="clients && clients.length > 0">
+        <div v-for="client in clients" class="list-group-item d-flex">
+          <div class="p-2 flex-grow-1">{{client.name != "" ? client.name : "Unknown Client"}}</div><div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
+        </div>
+      </ul>
+      <ul v-else class="list-group list-group-flush list-group-item-light">
+        <div class="list-group-item p-3 text-center"><em>There are no paired clients.</em></div>
+      </ul>
+      
     </div>
     <!-- Logs -->
     <div class="card p-2 my-4">
@@ -119,7 +134,7 @@ <h2 id="logs">Logs</h2>
   </div>
 
   <script type="module">
-    import { createApp } from 'vue'
+    import { createApp, ref } from 'vue'
     import Navbar from './Navbar.vue'
 
     const app = createApp({
@@ -133,6 +148,8 @@ <h2 id="logs">Logs</h2>
           unpairAllPressed: false,
           unpairAllStatus: null,
           restartPressed: false,
+          showApplyMessage: false,
+          clients: [],
           logs: 'Loading...',
           logFilter: null,
           logInterval: null,
@@ -151,6 +168,7 @@ <h2 id="logs">Logs</h2>
           this.refreshLogs();
         }, 5000);
         this.refreshLogs();
+        this.refreshClients();
       },
       beforeDestroy() {
         clearInterval(this.logInterval);
@@ -180,6 +198,7 @@ <h2 id="logs">Logs</h2>
           fetch("/api/clients/unpair", { method: "POST" })
             .then((r) => r.json())
             .then((r) => {
+              this.showApplyMessage = true;
               this.unpairAllPressed = false;
               this.unpairAllStatus = r.status.toString() === "true";
               setTimeout(() => {
@@ -187,6 +206,30 @@ <h2 id="logs">Logs</h2>
               }, 5000);
             });
         },
+        unpairSingle(uuid) {
+          fetch("/api/clients/unpair-single", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
+            this.showApplyMessage = true;
+            this.refreshClients();
+          });
+        },
+        refreshClients() {
+          fetch("/api/clients/list")
+            .then((response) => response.json())
+            .then((response) => {
+              const clientList = document.querySelector("#client-list");
+              if (response.status === 'true' && response.named_certs && response.named_certs.length) {
+                this.clients = response.named_certs;
+              } else {
+                this.clients = [];
+              }
+            });
+        },
+        clickedApplyBanner() {
+          this.showApplyMessage = false;
+          fetch("/api/restart", {
+            method: "POST",
+          });
+        },
         copyLogs() {
           navigator.clipboard.writeText(this.actualLogs);
         },