diff --git a/src/components/agents/AgentChartStatus.vue b/src/components/agents/AgentChartStatus.vue
index 4f2678b..e4b643f 100644
--- a/src/components/agents/AgentChartStatus.vue
+++ b/src/components/agents/AgentChartStatus.vue
@@ -10,22 +10,39 @@ const $api = inject("$api");
 
 const agentStore = useAgentStore();
 const { agents } = storeToRefs(agentStore);
+
 const agentChartStatus = ref(null);
 const chart = ref(null);
+const poll = ref(null); 
 
-onMounted(() => {
-  initChart();
+onMounted(async () => {
   window.addEventListener("resize", resizeChart);
+
+  const [cfg, ag] = await Promise.allSettled([
+    agentStore.getAgentConfig($api),
+    agentStore.getAgents($api),
+  ]);
+  if (cfg.status === "rejected") console.warn("[cmp] getAgentConfig failed:", cfg.reason);
+  if (ag.status === "rejected")  console.error("[cmp] getAgents failed:", ag.reason);
+
+  await initChart();
+
+  poll.value = setInterval(() => {
+    agentStore.getAgents($api).catch(err => console.warn("[poll] getAgents failed:", err));
+  }, 10_000);
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resizeChart);
+  if (poll.value) clearInterval(poll.value);
+  if (chart.value) {
+    chart.value.dispose(); // avoid ECharts memory leaks
+    chart.value = null;
+  }
 });
-
 watch(agents, () => {
-  setChartOption();
+  if (chart.value) setChartOption();
 });
-
 async function initChart() {
   chart.value = echarts.init(agentChartStatus.value);
   chart.value.showLoading("default", {
@@ -34,27 +51,25 @@ async function initChart() {
   });
   resizeChart();
 
-  await agentStore.getAgents($api);
-  setChartOption();
-  chart.value.hideLoading();
+  try {
+    await agentStore.getAgents($api); // initial fetch
+  } finally {
+    setChartOption();
+    chart.value.hideLoading();
+  }
 }
 
 function setChartOption() {
-  chart.value.setOption({
+  const option = {
     title: {
-      text: `${agents.value.length} Agent${agents.value.length == 1 ? "" : "s"}`,
-      textStyle: {
-        color: "white",
-      },
-    },
-    tooltip: {
-      trigger: "item",
-    },
-    legend: {
-      show: false,
+      text: `${agents.value.length} Agent${agents.value.length === 1 ? "" : "s"}`,
+      textStyle: { color: "white" },
     },
+    tooltip: { trigger: "item" },
+    legend: { show: false },
     series: [
       {
+        id: "agent-status",
         name: "Agent Status",
         type: "pie",
         radius: ["40%", "70%"],
@@ -64,47 +79,39 @@ function setChartOption() {
           borderColor: "hsl(0deg, 0%, 14%)",
           borderWidth: 2,
         },
-        label: {
-          show: false,
-          position: "center",
-        },
-        labelLine: {
-          show: false,
-        },
+        label: { show: false, position: "center" },
+        labelLine: { show: false },
         data: getChartData(),
       },
     ],
-  });
+  };
+  chart.value.setOption(option, { notMerge: true, replaceMerge: ["series"], lazyUpdate: true });
 }
 
 function getChartData() {
   if (!agents.value.length) return [];
+  const nowMs = agentStore.serverNowMs ?? Date.now();
+  const cfg = agentStore.agentConfig;
+
   return [
     {
       name: "Alive (trusted)",
-      value: agents.value.filter(
-        (agent) => getAgentStatus(agent) === "alive" && agent.trusted
-      ).length,
+      value: agents.value.filter(a => getAgentStatus(a, nowMs, cfg) === "alive" && a.trusted).length,
       itemStyle: { color: "#4a9" },
     },
     {
       name: "Alive (untrusted)",
-      value: agents.value.filter(
-        (agent) => getAgentStatus(agent) === "alive" && !agent.trusted
-      ).length,
+      value: agents.value.filter(a => getAgentStatus(a, nowMs, cfg) === "alive" && !a.trusted).length,
       itemStyle: { color: "#F7DB89" },
     },
     {
       name: "Pending kill",
-      value: agents.value.filter(
-        (agent) => getAgentStatus(agent) === "pending kill"
-      ).length,
+      value: agents.value.filter(a => getAgentStatus(a, nowMs, cfg) === "pending kill").length,
       itemStyle: { color: "hsl(207deg, 61%, 53%)" },
     },
     {
       name: "Dead",
-      value: agents.value.filter((agent) => getAgentStatus(agent) === "dead")
-        .length,
+      value: agents.value.filter(a => getAgentStatus(a, nowMs, cfg) === "dead").length,
       itemStyle: { color: "#c31" },
     },
   ];
@@ -121,8 +128,5 @@ function resizeChart() {
 </template>
 
 <style scoped>
-#agentChartStatus {
-  width: 100%;
-  height: 100%;
-}
+#agentChartStatus { width: 100%; height: 100%; }
 </style>
diff --git a/src/components/agents/DetailsModal.vue b/src/components/agents/DetailsModal.vue
index 1797d66..3bfc091 100644
--- a/src/components/agents/DetailsModal.vue
+++ b/src/components/agents/DetailsModal.vue
@@ -1,178 +1,202 @@
 <script setup>
-import { inject, reactive } from "vue";
-import { useAgentStore } from "../../stores/agentStore";
-import { useCoreDisplayStore } from "../../stores/coreDisplayStore";
+import { inject, reactive, computed } from "vue";
+import { useAgentStore } from "@/stores/agentStore";
+import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
 import { storeToRefs } from "pinia";
+import { getAgentStatus } from "@/utils/agentUtil.js";
+import { toMs } from "@/utils/utils.js";
 
 const $api = inject("$api");
 
 const agentStore = useAgentStore();
-const { selectedAgent } = storeToRefs(agentStore);
+const { selectedAgent, agentConfig, serverNowMs } = storeToRefs(agentStore);
+
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
 let validation = reactive({
-    group: "",
-    beaconTimer: "",
-    watchdogTimer: ""
+  group: "",
+  beaconTimer: "",
+  watchdogTimer: ""
 });
 
-function getAgentStatus(agent) {
-    if (!agent.last_seen) return '';
-    let lastSeen = new Date(agent.last_seen).getTime();
-    let msSinceSeen = Date.now() - lastSeen;
-    // Give a buffer of 1 minute to mark an agent dead
-    let isAlive = (msSinceSeen < (agent.sleep_max * 1000));
-
-    if (msSinceSeen <= 60000 && agent.sleep_min === 3 && agent.sleep_max === 3 && agent.watchdog === 1) {
-        return 'pending kill'
-    } else {
-        return msSinceSeen <= 60000 || isAlive ? 'alive' : 'dead';
-    }
-}
+// normalize selectedAgent's last_seen -> _lastSeenMs
+const selectedAgentWithMs = computed(() => {
+  const a = selectedAgent.value || {};
+  return a && a._lastSeenMs ? a : { ...a, _lastSeenMs: toMs(a.last_seen) };
+});
+
+// compute status using same util as table
+const status = computed(() =>
+  getAgentStatus(
+    selectedAgentWithMs.value,
+    serverNowMs.value ?? Date.now(),
+    agentConfig.value || {}
+  )
+);
+const trustedClass = computed(() => ({
+  'has-text-success': selectedAgent.value?.trusted === true,
+  'has-text-warning': selectedAgent.value?.trusted === false,
+}));
 
 function saveAgent() {
-    // Validate group
-    if (!selectedAgent.value.group) {
-        validation.group = "Group cannot be empty";
-    } else {
-        validation.group = "";
-    }
-    // Validate beacon timer
-    if (selectedAgent.value.sleep_min > selectedAgent.value.sleep_max) {
-        validation.beaconTimer = "Sleep min must be less than or equal to Sleep max";
-    } else if (selectedAgent.value.sleep_min < 0) {
-        validation.beaconTimer = "Sleep min must be greater than or equal to 0";
-    } else if (selectedAgent.value.sleep_max < 0) {
-        validation.beaconTimer = "Sleep max must be greater than or equal to 0";
-    } else if (!selectedAgent.value.sleep_min || !selectedAgent.value.sleep_max) {
-        validation.beaconTimer = "Sleep min and max cannot be empty";
-    } else {
-        validation.beaconTimer = "";
-    }
-    // Validate watchdog
-    if ((selectedAgent.value.watchdog !== 0 && !selectedAgent.value.watchdog) || selectedAgent.value.watchdog < 0) {
-        validation.watchdogTimer = "Watchdog timer must be greater than or equal to 0";
-    } else {
-        validation.watchdogTimer = "";
-    }
-
-    // If all inputs pass validation, save
-    if (!validation.group && !validation.beaconTimer && !validation.watchdogTimer) {
-        agentStore.saveSelectedAgent($api);
-    }
+  if (!selectedAgent.value.group) validation.group = "Group cannot be empty";
+  else validation.group = "";
+
+  if (selectedAgent.value.sleep_min > selectedAgent.value.sleep_max)
+    validation.beaconTimer = "Sleep min must be less than or equal to Sleep max";
+  else if (selectedAgent.value.sleep_min < 0)
+    validation.beaconTimer = "Sleep min must be greater than or equal to 0";
+  else if (selectedAgent.value.sleep_max < 0)
+    validation.beaconTimer = "Sleep max must be greater than or equal to 0";
+  else if (!selectedAgent.value.sleep_min || !selectedAgent.value.sleep_max)
+    validation.beaconTimer = "Sleep min and max cannot be empty";
+  else validation.beaconTimer = "";
+
+  if ((selectedAgent.value.watchdog !== 0 && !selectedAgent.value.watchdog) || selectedAgent.value.watchdog < 0)
+    validation.watchdogTimer = "Watchdog timer must be greater than or equal to 0";
+  else validation.watchdogTimer = "";
+
+  if (!validation.group && !validation.beaconTimer && !validation.watchdogTimer) {
+    agentStore.saveSelectedAgent($api);
+  }
 }
+// add below your other computed()s
+function statusClass(s) {
+  return {
+    'has-text-success': s === 'alive',
+    'has-text-info':    s === 'pending kill',
+    'has-text-warning': s === 'dead',
+  };
+}
+
+const isTrusted = computed(() => selectedAgent.value?.trusted === true);
+
 </script>
 
 <template lang="pug">
 .modal(:class="{ 'is-active': modals.agents.showDetails }")
-    .modal-background(@click="modals.agents.showDetails = false")
-    .modal-card 
-        header.modal-card-head 
-            p.modal-card-title Agent Details
-        .modal-card-body 
-            p.has-text-weight-bold.has-text-centered.mb-3 Settings 
-            table
-                col(width="30%")
-                col(width="70%")
-                tbody
-                    tr
-                        th.has-text-right Contact
-                        td
-                            .select.control
-                                select(v-model="selectedAgent.pending_contact")
-                                    option(v-for="contact in selectedAgent.available_contacts" :key="contact" :value="contact") {{ contact }}
-                    tr
-                        th.has-text-right Group 
-                        td
-                            input.input(type="text" v-model="selectedAgent.group" :class="{ 'is-danger': validation.group }")
-                            p.help.has-text-danger(v-if="validation.group") {{ validation.group }}
-                    tr 
-                        th.has-text-right Sleep Timer
-                        td
-                            .is-flex.is-align-items-center 
-                                label.mr-3 min
-                                input.input.mr-4(v-model="selectedAgent.sleep_min" type="number" placeholder="30" min="0" :max="selectedAgent.sleep_max" :class="{ 'is-danger': validation.beaconTimer }")
-                                label.mr-3 max
-                                input.input(v-model="selectedAgent.sleep_max" type="number" placeholder="60" :min="selectedAgent.sleep_min" :class="{ 'is-danger': validation.beaconTimer }")
-                            p.help.has-text-danger(v-if="validation.beaconTimer") {{ validation.beaconTimer }}
-                    tr
-                        th.has-text-right Watchdog Timer
-                        td
-                            input.input(type="number" v-model="selectedAgent.watchdog" min="0" :class="{ 'is-danger': validation.watchdogTimer }")
-                            p.help.has-text-danger(v-if="validation.watchdogTimer") {{ validation.watchdogTimer }}
-            button.button.is-primary.is-fullwidth.mt-4(@click="saveAgent()") Save Settings
-            hr
-            p.has-text-weight-bold.has-text-centered.mb-3 Agent Details
-            table
-                col(width="30%")
-                col(width="70%")
-                tbody
-                    tr
-                        th.has-text-right Status
-                        td 
-                            span(:class="{ 'has-text-warning': getAgentStatus(selectedAgent) === 'dead', 'has-text-success': getAgentStatus(selectedAgent) === 'alive', 'has-text-info': getAgentStatus(selectedAgent) === 'pending kill' }") {{ getAgentStatus(selectedAgent) }}
-                            span , 
-                            span(:class="{ 'has-text-warning': !selectedAgent.trusted, 'has-text-success': selectedAgent.trusted }") {{ selectedAgent.trusted ? 'trusted' : 'untrusted' }}
-                    tr
-                        th.has-text-right Paw
-                        td {{ selectedAgent.paw }}
-                    tr
-                        th.has-text-right Host
-                        td {{ `${selectedAgent.host} (${selectedAgent.host_ip_addrs ? selectedAgent.host_ip_addrs.join(', ') : ''})` }}
-                    tr(v-if="selectedAgent.display_name")
-                        th.has-text-right Display Name
-                        td {{ selectedAgent.display_name }}
-                    tr
-                        th.has-text-right Username
-                        td {{ selectedAgent.username }}
-                    tr
-                        th.has-text-right Privilege
-                        td {{ selectedAgent.privilege }}
-                    tr
-                        th.has-text-right Last Seen
-                        td {{ new Date(selectedAgent.last_seen).toLocaleString() }}
-                    tr
-                        th.has-text-right Created
-                        td {{ new Date(selectedAgent.created).toLocaleString() }}
-                    tr
-                        th.has-text-right Architecture
-                        td {{ selectedAgent.architecture }}
-                    tr
-                        th.has-text-right Platform
-                        td {{ selectedAgent.pid }}
-                    tr
-                        th.has-text-right PID
-                        td {{ selectedAgent.pid }}
-                    tr
-                        th.has-text-right PPID
-                        td {{ selectedAgent.ppid }}
-                    tr
-                        th.has-text-right Executable Name
-                        td {{ selectedAgent.exe_name }}
-                    tr
-                        th.has-text-right Location
-                        td {{ selectedAgent.location }}
-                    tr
-                        th.has-text-right Executors
-                        td {{ selectedAgent.executors ? selectedAgent.executors.join(", ") : '' }}
-                    tr(v-if="selectedAgent.host_ip_addrs")
-                        th.has-text-right Host IP Addresses
-                        td {{ selectedAgent.host_ip_addrs ? selectedAgent.host_ip_addrs.join(", ") : '' }}
-                    tr
-                        th.has-text-right Peer-to-Peer Proxy Receivers
-                        td {{ (selectedAgent.proxy_receivers && Object.keys(selectedAgent.proxy_receivers).length) ? Object.keys(selectedAgent.proxy_receivers) : 'No local P2P proxy receivers active.' }}
-                    tr
-                        th.has-text-right Peer-toPeer Proxy Chains
-                        td {{ (selectedAgent.proxy_chain && selectedAgent.proxy_chain.length) ? selectedAgent.proxy_chain.join(', ') : 'Not using P2P agents to reach C2.' }}
-        footer.modal-card-foot.is-flex.is-justify-content-flex-end 
-            button.button(@click="modals.agents.showDetails = false") Close
-            button.button.is-danger.is-outlined(@click="agentStore.killAgent($api, selectedAgent.paw); modals.agents.showDetails = false;")
-                span.icon 
-                    font-awesome-icon(icon="fas fa-skull-crossbones") 
-                span Kill Agent
+  .modal-background(@click="modals.agents.showDetails = false")
+  .modal-card 
+    header.modal-card-head 
+      p.modal-card-title Agent Details
+    .modal-card-body(v-if="selectedAgent") 
+      p.has-text-weight-bold.has-text-centered.mb-3 Settings 
+      table
+        col(width="30%")
+        col(width="70%")
+        tbody
+          tr
+            th.has-text-right Contact
+            td
+              .select.control
+                select(v-model="selectedAgent.pending_contact")
+                  option(v-for="contact in selectedAgent.available_contacts" :key="contact" :value="contact") {{ contact }}
+          tr
+            th.has-text-right Group 
+            td
+              input.input(type="text" v-model="selectedAgent.group" :class="{ 'is-danger': validation.group }")
+              p.help.has-text-danger(v-if="validation.group") {{ validation.group }}
+          tr 
+            th.has-text-right Sleep Timer
+            td
+              .is-flex.is-align-items-center 
+                label.mr-3 min
+                input.input.mr-4(
+                  v-model="selectedAgent.sleep_min"
+                  type="number" placeholder="30" min="0"
+                  :max="selectedAgent.sleep_max"
+                  :class="{ 'is-danger': validation.beaconTimer }"
+                )
+                label.mr-3 max
+                input.input(
+                  v-model="selectedAgent.sleep_max"
+                  type="number" placeholder="60"
+                  :min="selectedAgent.sleep_min"
+                  :class="{ 'is-danger': validation.beaconTimer }"
+                )
+              p.help.has-text-danger(v-if="validation.beaconTimer") {{ validation.beaconTimer }}
+          tr
+            th.has-text-right Watchdog Timer
+            td
+              input.input(type="number" v-model="selectedAgent.watchdog" min="0" :class="{ 'is-danger': validation.watchdogTimer }")
+              p.help.has-text-danger(v-if="validation.watchdogTimer") {{ validation.watchdogTimer }}
+
+      button.button.is-primary.is-fullwidth.mt-4(@click="saveAgent()") Save Settings
+      hr
+
+      p.has-text-weight-bold.has-text-centered.mb-3 Agent Details
+      table
+        col(width="30%")
+        col(width="70%")
+        tbody
+          tr
+            th.has-text-right Status
+            td
+                span(:class="statusClass(status)") {{ status }}
+                span ,&nbsp;
+                span(:class="{ 'has-text-success': isTrusted, 'has-text-warning': !isTrusted }") {{ isTrusted ? 'trusted' : 'untrusted' }}
+          tr
+            th.has-text-right Paw
+            td {{ selectedAgent.paw }}
+          tr
+            th.has-text-right Host
+            td {{ `${selectedAgent.host} (${selectedAgent.host_ip_addrs ? selectedAgent.host_ip_addrs.join(', ') : ''})` }}
+          tr(v-if="selectedAgent.display_name")
+            th.has-text-right Display Name
+            td {{ selectedAgent.display_name }}
+          tr
+            th.has-text-right Username
+            td {{ selectedAgent.username }}
+          tr
+            th.has-text-right Privilege
+            td {{ selectedAgent.privilege }}
+          tr
+            th.has-text-right Last Seen
+            td {{ new Date(selectedAgent.last_seen).toLocaleString() }}
+          tr
+            th.has-text-right Created
+            td {{ new Date(selectedAgent.created).toLocaleString() }}
+          tr
+            th.has-text-right Architecture
+            td {{ selectedAgent.architecture }}
+          tr
+            th.has-text-right Platform
+            td {{ selectedAgent.platform }}
+          tr
+            th.has-text-right PID
+            td {{ selectedAgent.pid }}
+          tr
+            th.has-text-right PPID
+            td {{ selectedAgent.ppid }}
+          tr
+            th.has-text-right Executable Name
+            td {{ selectedAgent.exe_name }}
+          tr
+            th.has-text-right Location
+            td {{ selectedAgent.location }}
+          tr
+            th.has-text-right Executors
+            td {{ selectedAgent.executors ? selectedAgent.executors.join(", ") : '' }}
+          tr(v-if="selectedAgent.host_ip_addrs")
+            th.has-text-right Host IP Addresses
+            td {{ selectedAgent.host_ip_addrs ? selectedAgent.host_ip_addrs.join(", ") : '' }}
+          tr
+            th.has-text-right Peer-to-Peer Proxy Receivers
+            td {{ (selectedAgent.proxy_receivers && Object.keys(selectedAgent.proxy_receivers).length) ? Object.keys(selectedAgent.proxy_receivers) : 'No local P2P proxy receivers active.' }}
+          tr
+            th.has-text-right Peer-toPeer Proxy Chains
+            td {{ (selectedAgent.proxy_chain && selectedAgent.proxy_chain.length) ? selectedAgent.proxy_chain.join(', ') : 'Not using P2P agents to reach C2.' }}
+
+    footer.modal-card-foot.is-flex.is-justify-content-flex-end 
+      button.button(@click="modals.agents.showDetails = false") Close
+      button.button.is-danger.is-outlined(@click="agentStore.killAgent($api, selectedAgent.paw); modals.agents.showDetails = false;")
+        span.icon 
+          font-awesome-icon(icon="fas fa-skull-crossbones") 
+        span Kill Agent
 </template>
 
+
 <style scoped>
 th {
     padding-right: 15px;
diff --git a/src/stores/agentStore.js b/src/stores/agentStore.js
index 5fb1488..9b372b9 100644
--- a/src/stores/agentStore.js
+++ b/src/stores/agentStore.js
@@ -1,77 +1,127 @@
+// src/stores/agentStore.js
 import { defineStore } from "pinia";
+import { toMs } from "@/utils/utils.js";
 
 export const useAgentStore = defineStore("agentStore", {
-    state: () => {
-        return {
-            agents: [],
-            agentConfig: {},
-            selectedAgent: {},
-            agentGroups: []
-        };
+  state: () => ({
+    agents: [],
+    agentConfig: {},
+    selectedAgent: {},
+    agentGroups: [],
+    // server clock from API response headers
+    serverNowMs: undefined,
+    pendingKill: new Set(),
+  }),
+
+  actions: {
+    async getAgents($api) {
+      try {
+        // no query cache-busters; your API forbids unknown params
+        const res = await $api.get("/api/v2/agents", {
+          headers: { "Cache-Control": "no-cache", Pragma: "no-cache" },
+        });
+
+        // capture server time (kills client/server clock skew)
+        this.serverNowMs = Date.parse(res.headers?.date) || Date.now();
+
+        // remember which agents were pending kill
+        const pendingMap = new Map(
+        (this.agents || [])
+            .filter(a => a._pendingKill)
+            .map(a => [a.paw, true])
+        );
+
+        // normalize + re-apply pendingKill
+        this.agents = (res.data || [])
+        .map(a => ({
+            ...a,
+            _lastSeenMs: toMs(a.last_seen),
+            _pendingKill: pendingMap.has(a.paw) || a._pendingKill === true,
+        }))
+        .sort((a, b) => b._lastSeenMs - a._lastSeenMs);
+        this.updateAgentGroups();
+      } catch (error) {
+        throw error;
+      }
+    },
+
+    async getAgentConfig($api) {
+      try {
+        const response = await $api.get("/api/v2/config/agents");
+        this.agentConfig = response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+
+    async saveConfig($api) {
+      const reqBody = { ...this.agentConfig };
+      delete reqBody.deployments;
+      try {
+        const response = await $api.patch("/api/v2/config/agents", reqBody);
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
     },
 
-    actions: {
-        async getAgents($api) {
-            try {
-                const response = await $api.get("/api/v2/agents");
-                // Sort agents so most recently seen is the first index
-                this.agents = response.data.sort((a, b) => new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime());
-            } catch(error) {
-                throw error;
-            }
-        },
-        async getAgentConfig($api) {
-            try {
-                const response = await $api.get("/api/v2/config/agents");
-                this.agentConfig = response.data;
-            } catch(error) {
-                throw error;
-            }
-        },
-        async saveConfig($api) {
-            let reqBody = this.agentConfig;
-            delete reqBody.deployments;
-            try {
-                const response = await $api.patch("/api/v2/config/agents", reqBody);
-                return response.data;
-            } catch(error) {
-                throw error;
-            }
-        },
-        async saveSelectedAgent($api) {
-            try {
-                let subset = (({group, trusted, sleep_min, sleep_max, watchdog, pending_contact}) => ({group, trusted, sleep_min, sleep_max, watchdog, pending_contact}))(this.selectedAgent);
-                const response = await $api.patch(`/api/v2/agents/${this.selectedAgent.paw}`, subset);
-                return response.data;
-            } catch(error) {
-                throw error;
-            }
-        },
-        async deleteAgent($api, agentPaw, index) {
-            try {
-                const response = await $api.delete(`/api/v2/agents/${agentPaw}`);
-                this.agents.splice(index, 1);
-                return response.data;
-            } catch(error) {
-                throw error;
-            }
-        },
-        async killAgent($api, agentPaw) {
-            const reqBody = {
+    async saveSelectedAgent($api) {
+      try {
+        const { group, trusted, sleep_min, sleep_max, watchdog, pending_contact } = this.selectedAgent;
+        const response = await $api.patch(
+          `/api/v2/agents/${this.selectedAgent.paw}`,
+          { group, trusted, sleep_min, sleep_max, watchdog, pending_contact }
+        );
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+
+    async deleteAgent($api, agentPaw, index) {
+      try {
+        const response = await $api.delete(`/api/v2/agents/${agentPaw}`);
+        this.agents.splice(index, 1);
+        // clean up the flag
+        this.pendingKill.delete(agentPaw);
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+
+    async killAgent($api, agentPaw) {
+      try {
+            const idx = this.agents.findIndex(a => a.paw === agentPaw);
+            if (idx !== -1) {
+                // WTF is this API voodoo?  Setting watchdog to 1 and sleep to 3 forces an agent to check in almost immediately and then die because of pending_kill flag
+                // This is a workaround until we have a proper "kill" command that an agent can execute immediately
+                const reqBody = {
                 watchdog: 1,
                 sleep_min: 3,
                 sleep_max: 3
-            };
-            try {
+                };
+
+                this.pendingKill.add(agentPaw);
                 const response = await $api.patch(`/api/v2/agents/${agentPaw}`, reqBody);
-                return response.data;
-            } catch(error) {
-                throw error;
-            }
-        },
-        updateAgentGroups() {
-            if (!this.agents) return;
-            this.agentGroups = [...new Set(this.agents.map((agent) => agent.group))];
+                this.agents = this.agents.map(a =>
+                a.paw === agentPaw
+                    ? { ...a, _pendingKill: true }
+                    : a
+                );
+                // Flag agent as pending kill immediately
+                this.agents[idx]._pendingKill = true;
+            return response.data;
         }
+        
+    } catch (error) {
+        throw error;
+    }
+    },
+
+    updateAgentGroups() {
+      if (!this.agents) return;
+      this.agentGroups = [...new Set(this.agents.map(agent => agent.group))];
     },
+  },
 });
diff --git a/src/utils/agentUtil.js b/src/utils/agentUtil.js
index 6654e61..67f7e77 100644
--- a/src/utils/agentUtil.js
+++ b/src/utils/agentUtil.js
@@ -1,17 +1,25 @@
-export {
-    getAgentStatus
-};
+// src/utils/agentUtil.js
+export function getAgentStatus(agent, nowMs = Date.now(), cfg = {}) {
+   
+  if (agent._pendingKill) {
+    // Optional: distinguish final killed vs still pending
+    const lastSeen = agent._lastSeenMs || (agent.last_seen ? new Date(agent.last_seen).getTime() : null);
+    if (lastSeen) {
+      const sleepMaxSec = Number(agent.sleep_max) || Number(cfg.sleep_max) || 60;
+      const bufferMs = Math.min(180_000, Math.max(15_000, Math.floor(sleepMaxSec * 500)));
+      if (nowMs - lastSeen > sleepMaxSec * 1000 + bufferMs) {
+        return "killed"; // final state
+      }
+    }
+    return "pending kill";
+  }
 
-function getAgentStatus(agent) {
-    if (!agent.last_seen) return '';
-    let lastSeen = new Date(agent.last_seen).getTime();
-    let msSinceSeen = Date.now() - lastSeen;
-    // Give a buffer of 1 minute to mark an agent dead
-    let isAlive = (msSinceSeen < (agent.sleep_max * 1000));
+  if (!agent.last_seen) return "dead";
+  const lastMs = new Date(agent.last_seen).getTime();
+  const msSinceSeen = nowMs - lastMs;
 
-    if (msSinceSeen <= 60000 && agent.sleep_min === 3 && agent.sleep_max === 3 && agent.watchdog === 1) {
-        return 'pending kill'
-    } else {
-        return msSinceSeen <= 60000 || isAlive ? 'alive' : 'dead';
-    }
+  const sleepMaxSec = Number(agent.sleep_max) || Number(cfg.sleep_max) || 60;
+  const bufferMs = Math.min(180_000, Math.max(15_000, Math.floor(sleepMaxSec * 500)));
+
+  return msSinceSeen <= (sleepMaxSec * 1000 + bufferMs) ? "alive" : "dead";
 }
diff --git a/src/utils/utils.js b/src/utils/utils.js
index bd82cd1..c1d908f 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,147 +1,114 @@
-export function getHumanFriendlyTime(date) {
-  if (!date) return "";
-  let split = date.split("-");
+// src/utils/utils.js
 
-  let hMonth = Number(split[1]) - 1;
-  let hDate = Number(split[2].split(" ")[0]);
-  let hTime = split[2].split(" ")[1].split(":");
+// ---------- Time helpers ----------
+export function toMs(x) {
+  if (x == null) return 0;
+  if (typeof x === "number") return x < 1e12 ? Math.floor(x * 1000) : x; // seconds→ms
+  const p = Date.parse(x);                 // ISO 8601 → ok
+  if (!Number.isNaN(p)) return p;
+  // Rescue "YYYY-MM-DD HH:mm:ss" (UTC) without TZ
+  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d+)?$/.test(x)) {
+    const q = Date.parse(x.replace(" ", "T") + "Z");
+    if (!Number.isNaN(q)) return q;
+  }
+  return 0;
+}
 
-  const givenDate = Date.UTC(
-    split[0],
-    hMonth,
-    hDate,
-    hTime[0],
-    hTime[1],
-    hTime[2]
-  );
-  // Make a fuzzy time
-  let delta = Math.round((Date.now() - givenDate) / 1000);
+export function getHumanFriendlyTimeISO8601(dateTime) {
+  const ms = toMs(dateTime);
+  if (!ms) return "";
+  return getHumanFriendlyDelta(ms);
+}
 
-  let minute = 60,
-    hour = minute * 60,
-    day = hour * 24;
+export function getHumanFriendlyTime(date) {
+  const ms = toMs(date);
+  if (!ms) return "";
+  return getHumanFriendlyDelta(ms);
+}
 
-  let fuzzy;
+function getHumanFriendlyDelta(givenMs) {
+  let delta = Math.round((Date.now() - givenMs) / 1000);
+  const minute = 60, hour = 60 * minute, day = 24 * hour;
+  if (delta < 30) return "just now";
+  if (delta < minute) return `${delta} seconds ago`;
+  if (delta < 2 * minute) return "a minute ago";
+  if (delta < hour) return `${Math.floor(delta / minute)} min ago`;
+  if (Math.floor(delta / hour) === 1) return "1 hr ago";
+  if (delta < day) return `${Math.floor(delta / hour)} hrs ago`;
 
-  if (delta < 30) {
-    fuzzy = "just now";
-  } else if (delta < minute) {
-    fuzzy = delta + " seconds ago";
-  } else if (delta < 2 * minute) {
-    fuzzy = "a minute ago";
-  } else if (delta < hour) {
-    fuzzy = Math.floor(delta / minute) + " min ago";
-  } else if (Math.floor(delta / hour) === 1) {
-    fuzzy = "1 hr ago";
-  } else if (delta < day) {
-    fuzzy = Math.floor(delta / hour) + " hrs ago";
-  } else if (delta < day * 2) {
-    fuzzy = "yesterday " + hTime.join(":");
-  } else {
-    switch (hMonth) {
-      case 0:
-        hMonth = "Jan";
-        break;
-      case 1:
-        hMonth = "Feb";
-        break;
-      case 2:
-        hMonth = "Mar";
-        break;
-      case 3:
-        hMonth = "Apr";
-        break;
-      case 4:
-        hMonth = "May";
-        break;
-      case 5:
-        hMonth = "Jun";
-        break;
-      case 6:
-        hMonth = "Jul";
-        break;
-      case 7:
-        hMonth = "Aug";
-        break;
-      case 8:
-        hMonth = "Sep";
-        break;
-      case 9:
-        hMonth = "Oct";
-        break;
-      case 10:
-        hMonth = "Nov";
-        break;
-      case 11:
-        hMonth = "Dec";
-        break;
-      default:
-        hMonth = "";
-        break;
-    }
-    fuzzy = hMonth + " " + hDate + " " + hTime.join(":");
+  const d = new Date(givenMs);
+  const yesterday = givenMs >= Date.now() - day;
+  if (yesterday) {
+    return `yesterday ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())} UTC`;
   }
-  return fuzzy;
+  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+  return `${months[d.getUTCMonth()]} ${d.getUTCDate()} ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())} UTC`;
 }
 
-/**
- * Parse timestamp into human-friendly date ISO8601-safe format
- * @param dateTime {string} - Expected ISO8601 input in UTC time: (i.e.) 2021-08-25T10:03:23Z
- * @returns {string} - (i.e.) '5 hrs ago'
- */
-export function getHumanFriendlyTimeISO8601(dateTime) {
-  return getHumanFriendlyTime(dateTime.replace("T", " ").replace("Z", ""));
+function pad2(n){ return String(n).padStart(2,"0"); }
+
+export function getReadableTime(dateTime) {
+  const ms = toMs(dateTime);
+  if (!ms) return "";
+  return new Date(ms).toLocaleString("en-US", { timeZoneName: "short" });
 }
 
-export function getReadableTime(date) {
-  // i.e. format 2021-08-03 19:37:08
-  if (!date) return "";
-  date = date.replace("T", " ").replace("Z", "");
-  let split = date.split("-");
+// ---------- Base64 helpers ----------
+/** Decode base64 into UTF-8 string; falls back to Latin-1 if not UTF-8 */
+export function b64DecodeUnicode(str) {
+  if (str == null) return "";
+  try {
+    return decodeURIComponent(
+      atob(str)
+        .split("")
+        .map(c => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
+        .join("")
+    );
+  } catch {
+    try { return atob(str); } catch { return ""; }
+  }
+}
 
-  let hMonth = Number(split[1]) - 1;
-  let hDate = Number(split[2].split(" ")[0]);
-  let hTime = split[2].split(" ")[1].split(":");
+/** Encode UTF-8 string to base64 (unicode-safe) */
+export function b64EncodeUnicode(str) {
+  if (str == null) return "";
+  // encodeURIComponent → percent bytes → base64
+  const pct = encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) =>
+    String.fromCharCode("0x" + p1)
+  );
+  return btoa(pct);
+}
 
-  return new Date(
-    Date.UTC(split[0], hMonth, hDate, hTime[0], hTime[1], hTime[2])
-  ).toLocaleString("en-US", { timeZoneName: "short" });
+/** Encode raw bytes (Uint8Array/Array) to base64 */
+export function b64EncodeBytes(bytes) {
+  if (!bytes) return "";
+  let bin = "";
+  const arr = bytes instanceof Uint8Array ? bytes : Uint8Array.from(bytes);
+  for (let i = 0; i < arr.length; i++) bin += String.fromCharCode(arr[i]);
+  return btoa(bin);
 }
 
-export function b64DecodeUnicode(str) {
-  //https://stackoverflow.com/a/30106551
-  if (str != null) {
-    // An error check is needed in case the wrong codec (i.e. not UTF-8) was used at source
-    try {
-      return decodeURIComponent(
-        window
-          .atob(str)
-          .split("")
-          .map(function (c) {
-            return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
-          })
-          .join("")
-      );
-    } catch {
-      return window.atob(str);
-    }
-  } else return "";
+/** Decode base64 to Uint8Array (raw bytes) */
+export function b64DecodeToBytes(str) {
+  if (!str) return new Uint8Array();
+  const bin = atob(str);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
 }
 
+// ---------- Misc ----------
+/** Cartesian product of an array of arrays (skips empties) */
 export function cartesian(args) {
-  // Remove empty arrays from the input
-  const filteredArgs = args.filter(arr => arr.length > 0);
-  if (!filteredArgs.length) return [];
-  let r = [], max = filteredArgs.length - 1;
-  
-  function helper(arr, i) {
-      for (const element of filteredArgs[i]) {
-          let a = arr.slice(0);
-          a.push(element);
-          (i === max) ? r.push(a) : helper(a, i + 1);
-      }
-  }
-  
-  helper([], 0);
+  const filtered = (args || []).filter(arr => Array.isArray(arr) && arr.length > 0);
+  if (!filtered.length) return [];
+  const r = [];
+  const max = filtered.length - 1;
+  (function helper(prefix, i) {
+    for (const el of filtered[i]) {
+      const next = prefix.concat([el]);
+      i === max ? r.push(next) : helper(next, i + 1);
+    }
+  })([], 0);
   return r;
 }
\ No newline at end of file
diff --git a/src/views/AgentsView.vue b/src/views/AgentsView.vue
index 85356a5..ee653b1 100644
--- a/src/views/AgentsView.vue
+++ b/src/views/AgentsView.vue
@@ -1,11 +1,10 @@
 <script setup>
-import { inject, onMounted, onBeforeUnmount, ref } from "vue";
+import { inject, onMounted, onBeforeUnmount, ref, computed } from "vue";
 import { storeToRefs } from "pinia";
-
-import { useAgentStore } from '@/stores/agentStore';
+import { useAgentStore } from "@/stores/agentStore";
 import { useCoreDisplayStore } from "@/stores/coreDisplayStore";
-import DeployModal from '@/components/agents/DeployModal.vue';
-import ConfigModal from '@/components/agents/ConfigModal.vue';
+import DeployModal from "@/components/agents/DeployModal.vue";
+import ConfigModal from "@/components/agents/ConfigModal.vue";
 import DetailsModal from "@/components/agents/DetailsModal.vue";
 import { getAgentStatus } from "@/utils/agentUtil.js";
 
@@ -16,109 +15,148 @@ const { agents, selectedAgent } = storeToRefs(agentStore);
 const coreDisplayStore = useCoreDisplayStore();
 const { modals } = storeToRefs(coreDisplayStore);
 
-let agentRefreshInterval = ref(null);
+const agentRefreshInterval = ref(null);
 
 onMounted(async () => {
-    await agentStore.getAgents($api);
-    await agentStore.getAgentConfig($api);
-    agentRefreshInterval.value = setInterval(async () => {
-        await agentStore.getAgents($api);
-    }, 3000);
+  await Promise.all([agentStore.getAgents($api), agentStore.getAgentConfig($api)]);
+  agentRefreshInterval.value = setInterval(() => {
+    agentStore.getAgents($api).catch(() => {});
+  }, 3000);
 });
-
 onBeforeUnmount(() => {
-    clearInterval(agentRefreshInterval.value);
-})
+  if (agentRefreshInterval.value) clearInterval(agentRefreshInterval.value);
+});
 
-function removeDeadAgents() {
-    agents.value.forEach((agent, index) => {
-        if (getAgentStatus(agent) === "dead") {
-            agentStore.deleteAgent($api, agent.paw, index);
-        }
-    });
+/** compute per-row status using server time + agentConfig */
+const rows = computed(() => {
+  const now = agentStore.serverNowMs ?? Date.now();
+  const cfg = agentStore.agentConfig;
+  return (agents.value || [])
+    .filter(Boolean)
+    .map(a => ({ ...a, _status: getAgentStatus(a, now, cfg) }));
+});
+
+const isAlive = r => r && (r._status === 'alive' || r._status === 'pending kill');
+const isDeadLike = r => r && (r._status === 'dead' || r._status === 'killed');
+const isCountableForTrust = r => r && r._status !== 'killed'; // exclude killed from trust buckets
+
+const aliveCount     = computed(() => rows.value.filter(isAlive).length);
+const deadCount      = computed(() => rows.value.filter(isDeadLike).length);
+const trustedCount   = computed(() => rows.value.filter(r => isCountableForTrust(r) && r.trusted).length);
+const untrustedCount = computed(() => rows.value.filter(r => isCountableForTrust(r) && !r.trusted).length);
+
+
+// row handlers
+function onRowClick(r) {
+  selectedAgent.value = r;
+  modals.value.agents.showDetails = true;
+}
+function onDeleteClick(r) {
+  const idx = agentStore.agents.findIndex(a => a.paw === r.paw);
+  if (idx !== -1) agentStore.deleteAgent($api, r.paw, idx).catch(console.error);
 }
 
+// bulk actions
+function removeDeadAgents() {
+  rows.value.filter(Boolean).filter(r => r._status === "dead").forEach(r => {
+    const idx = agentStore.agents.findIndex(a => a.paw === r.paw);
+    if (idx !== -1) agentStore.deleteAgent($api, r.paw, idx);
+  });
+}
 function removeAllAgents() {
-    agents.value.forEach((agent, index) => agentStore.deleteAgent($api, agent.paw, index));
+  [...agentStore.agents].forEach(a => {
+    const idx = agentStore.agents.findIndex(x => x.paw === a.paw);
+    if (idx !== -1) agentStore.deleteAgent($api, a.paw, idx);
+  });
 }
-
 function killAllAgents() {
-    agents.value.forEach((agent) => agentStore.killAgent($api, agent.paw));
+  rows.value.filter(Boolean).forEach(r => agentStore.killAgent($api, r.paw));
 }
+function statusClass(s) {
+  return {
+    'has-text-success': s === 'alive',
+    'has-text-info':    s === 'pending kill',
+    'has-text-warning': s === 'dead',
+  };
+}
+
 </script>
 
 <template lang="pug">
 //- Header
 .content
-    h2 Agents
-    p You must deploy at least 1 agent in order to run an operation. Groups are collections of agents so hosts can be compromised simultaneously.
+  h2 Agents
+  p You must deploy at least 1 agent in order to run an operation. Groups are collections of agents so hosts can be compromised simultaneously.
 hr
 
 //- Button row
 .columns.mb-4
-    .column.is-4.is-flex.buttons.mb-0
-        button.button.is-primary.level-item(@click="modals.agents.showDeploy = true")
-            span.icon
-                font-awesome-icon(icon="fas fa-plus") 
-            span Deploy an agent
-        button.button.is-primary.level-item(@click="modals.agents.showConfig = true")
-            span.icon
-                font-awesome-icon(icon="fas fa-cog")
-            span Configuration
-    .column.is-4.is-flex.is-justify-content-center
-        span.tag.is-medium.m-0
-            span.mr-4.has-text-success 
-                span.has-text-weight-bold.mr-3 {{ agents.filter((a) => getAgentStatus(a) === 'alive' || getAgentStatus(a) === 'pending kill').length }} alive
-                span.has-text-weight-bold {{ agents.filter((a) => a.trusted).length }} trusted
-            strong.mr-4 {{ agents.length }} agent{{ agents.length > 1 ? 's' : '' }}
-            span.mr-4.has-text-warning 
-                span.has-text-weight-bold.mr-3 {{ agents.filter((a) => getAgentStatus(a) === 'dead').length }} dead
-                span.has-text-weight-bold {{ agents.filter((a) => !a.trusted).length }} untrusted
-    .column.is-4.is-flex.is-justify-content-end
-        .dropdown.is-right.is-hoverable
-            .dropdown-trigger 
-                button.button.is-primary(aria-haspopup="true" aria-controls="bulk-actions")
-                    span Bulk Actions 
-                    span.icon 
-                        font-awesome-icon(icon="fas fa-angle-down" aria-hidden="true")
-            .dropdown-menu(role="menu")
-                .dropdown-content 
-                    a.dropdown-item(@click="removeDeadAgents()") Remove dead agents
-                    a.dropdown-item(@click="removeAllAgents()") Remove all agents 
-                    a.dropdown-item(@click="killAllAgents()") Kill all agents
+  .column.is-4.is-flex.buttons.mb-0
+    button.button.is-primary.level-item(@click="modals.agents.showDeploy = true")
+      span.icon
+        font-awesome-icon(icon="fas fa-plus")
+      span Deploy an agent
+    button.button.is-primary.level-item(@click="modals.agents.showConfig = true")
+      span.icon
+        font-awesome-icon(icon="fas fa-cog")
+      span Configuration
+  .column.is-4.is-flex.is-justify-content-center
+    span.tag.is-medium.m-0
+      span.mr-4.has-text-success
+        span.has-text-weight-bold.mr-3 {{ aliveCount }} alive
+        span.has-text-weight-bold {{ trustedCount }} trusted
+      strong.mr-4 {{ rows.filter(r => r._status !== 'killed').length }} agent{{ rows.filter(r => r._status !== 'killed').length > 1 ? 's' : '' }}
+      span.mr-4.has-text-warning
+        span.has-text-weight-bold.mr-3 {{ deadCount }} dead
+        span.has-text-weight-bold {{ untrustedCount }} untrusted
+  .column.is-4.is-flex.is-justify-content-end
+    .dropdown.is-right.is-hoverable
+      .dropdown-trigger
+        button.button.is-primary(aria-haspopup="true" aria-controls="bulk-actions")
+          span Bulk Actions
+          span.icon
+            font-awesome-icon(icon="fas fa-angle-down" aria-hidden="true")
+      .dropdown-menu(role="menu")
+        .dropdown-content
+          a.dropdown-item(@click="removeDeadAgents()") Remove dead agents
+          a.dropdown-item(@click="removeAllAgents()") Remove all agents
+          a.dropdown-item(@click="killAllAgents()") Kill all agents
 
 //- Agents table
-table.table.is-striped.is-hoverable.is-fullwidth(v-if="agents.length")
-    thead
-        tr
-            th id (paw)
-            th host 
-            th group 
-            th platform
-            th contact
-            th pid
-            th privilege
-            th status
-            th last seen
-            th
-    tbody
-        tr(v-for="(agent, index) in agents" :key="agent.paw" @click="selectedAgent = agent; modals.agents.showDetails = true")
-            td {{ agent.paw }}
-            td {{ agent.host }}
-            td {{ agent.group }}
-            td {{ agent.platform }}
-            td {{ agent.contact }}
-            td {{ agent.pid }}
-            td {{ agent.privilege }}
-            td 
-                span(:class="{ 'has-text-warning': getAgentStatus(agent) === 'dead', 'has-text-success': getAgentStatus(agent) === 'alive', 'has-text-info': getAgentStatus(agent) === 'pending kill' }") {{ getAgentStatus(agent) }}
-                span , 
-                span(:class="{ 'has-text-warning': !agent.trusted, 'has-text-success': agent.trusted }") {{ agent.trusted ? 'trusted' : 'untrusted' }}
-            td {{ new Date(agent.last_seen).toLocaleString() }}
-            td.has-text-centered 
-                button.delete.is-white(@click.stop="agentStore.deleteAgent($api, agent.paw, index)")
-.has-text-centered.content(v-if="!agents.length")
-    p No deployed agents
+table.table.is-striped.is-hoverable.is-fullwidth(v-if="rows.length")
+  thead
+    tr
+      th id (paw)
+      th host
+      th group
+      th platform
+      th contact
+      th pid
+      th privilege
+      th status
+      th last seen
+      th
+  tbody
+    tr(v-for="r in rows" :key="r.paw" @click="onRowClick(r)")
+      td {{ r.paw }}
+      td {{ r.host }}
+      td {{ r.group }}
+      td {{ r.platform }}
+      td {{ r.contact }}
+      td {{ r.pid }}
+      td {{ r.privilege }}
+      td
+        span(:class="statusClass(r && r._status)") {{ r && r._status }}
+        span(v-if="r && r._status !== 'killed'") , 
+        span(v-if="r && r._status !== 'killed'"
+            :class="{ 'has-text-success': r && r.trusted, 'has-text-warning': !(r && r.trusted) }"
+        ) {{ r && r.trusted ? 'trusted' : 'untrusted' }}
+      td {{ new Date(r.last_seen).toLocaleString() }}
+      td.has-text-centered
+        button.delete.is-white(@click.stop="onDeleteClick(r)")
+
+.has-text-centered.content(v-else)
+  p No deployed agents
 
 //- Modals
 DeployModal
@@ -127,7 +165,5 @@ DetailsModal
 </template>
 
 <style scoped>
-tr {
-    cursor: pointer;
-}
+tr { cursor: pointer; }
 </style>