From 48563d193a78537cee0a37ea47d9fa41627d8e79 Mon Sep 17 00:00:00 2001
From: Anthony Rose <20302208+Cx01N@users.noreply.github.com>
Date: Sun, 1 Mar 2026 13:12:07 -0500
Subject: [PATCH 1/6] Fix module execution snackbar displaying [object Object]
 instead of agent name (#258)

---
 CHANGELOG.md                                 | 4 ++++
 src/components/agents/AgentExecuteModule.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f56caff5..0fa8c484 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Fixed module execution snackbar displaying "[object Object]" instead of agent name
+
 ## [3.3.0] - 2026-01-18
 
 ### Added
diff --git a/src/components/agents/AgentExecuteModule.vue b/src/components/agents/AgentExecuteModule.vue
index 333f280d..fc910944 100644
--- a/src/components/agents/AgentExecuteModule.vue
+++ b/src/components/agents/AgentExecuteModule.vue
@@ -453,7 +453,7 @@ export default {
         const displayName =
           this.agents.length > 1
             ? `${this.agents.length} agents.`
-            : `${this.agents[0]}.`;
+            : `${this.agents[0].name}`;
         this.$snack.info(`Module execution queued for ${displayName}`);
         this.selectedItem = {};
         this.selectedModule = "";

From b5b46208caa16aaceffd03381a5da91dcbe0aed9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Maes?=
 <55604242+jfmaes@users.noreply.github.com>
Date: Tue, 3 Mar 2026 06:35:40 +0200
Subject: [PATCH 2/6] Jobview (#108)

---
 CHANGELOG.md                        |   5 +
 src/api/agent-task-api.js           |  17 +
 src/components/agents/AgentJobs.vue | 513 ++++++++++++++++++++++++++++
 src/views/AgentEdit.vue             |  18 +-
 4 files changed, 551 insertions(+), 2 deletions(-)
 create mode 100644 src/components/agents/AgentJobs.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fa8c484..3d04644a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   Added Jobs tab to agent page for viewing and managing background jobs
+-   Added ability to kill background jobs from the Jobs tab
+
 ### Fixed
 
 -   Fixed module execution snackbar displaying "[object Object]" instead of agent name
diff --git a/src/api/agent-task-api.js b/src/api/agent-task-api.js
index 59f32fad..755038fe 100644
--- a/src/api/agent-task-api.js
+++ b/src/api/agent-task-api.js
@@ -159,6 +159,11 @@ export function updateSleep(sessionId, delay, jitter) {
     .catch((error) => Promise.reject(handleError(error)));
 }
 
+/**
+ * Task the agent to report its background jobs.
+ * Returns the created task object; poll with getTask() for actual results.
+ * @param {string} sessionId agent sessionId
+ */
 export function getJobs(sessionId) {
   return axios
     .post(`/agents/${sessionId}/tasks/jobs`)
@@ -166,6 +171,18 @@ export function getJobs(sessionId) {
     .catch((error) => Promise.reject(handleError(error)));
 }
 
+/**
+ * Kill a background job on an agent.
+ * @param {string} sessionId agent sessionId
+ * @param {number} jobId job ID to kill
+ */
+export function killJob(sessionId, jobId) {
+  return axios
+    .post(`/agents/${sessionId}/tasks/kill_job`, { id: jobId })
+    .then(({ data }) => data)
+    .catch((error) => Promise.reject(handleError(error)));
+}
+
 export function updateProxies(sessionId, proxies) {
   return axios
     .post(`/agents/${sessionId}/tasks/proxy_list`, proxies)
diff --git a/src/components/agents/AgentJobs.vue b/src/components/agents/AgentJobs.vue
new file mode 100644
index 00000000..f7efff25
--- /dev/null
+++ b/src/components/agents/AgentJobs.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="pa-4">
+    <div class="d-flex align-center mb-4">
+      <h3>Background Jobs</h3>
+      <v-spacer />
+      <v-btn small color="primary" :loading="loading" @click="refreshJobs">
+        <v-icon left small>fa-sync</v-icon>
+        Refresh
+      </v-btn>
+      <v-switch
+        v-model="autoRefresh"
+        label="Auto-refresh"
+        class="ml-4 mt-0"
+        hide-details
+      />
+    </div>
+
+    <v-alert
+      v-if="error"
+      type="error"
+      dismissible
+      class="mb-4"
+      @input="error = null"
+    >
+      {{ error }}
+    </v-alert>
+
+    <v-alert
+      v-if="successMessage"
+      type="success"
+      dismissible
+      class="mb-4"
+      @input="successMessage = null"
+    >
+      {{ successMessage }}
+    </v-alert>
+
+    <v-data-table
+      :headers="headers"
+      :items="jobs"
+      :loading="loading"
+      :items-per-page="10"
+      :expanded.sync="expanded"
+      item-key="id"
+      show-expand
+      class="elevation-1"
+      no-data-text="No background jobs found. Jobs will appear here when you run modules with Background=true."
+    >
+      <template #item.status="{ item }">
+        <v-chip :color="getStatusColor(item.agentStatus)" small dark>
+          {{ item.agentStatus }}
+        </v-chip>
+      </template>
+
+      <template #item.created_at="{ item }">
+        {{ formatDate(item.created_at) }}
+      </template>
+
+      <template #item.actions="{ item }">
+        <v-btn
+          v-if="isKillable(item.agentStatus)"
+          small
+          color="error"
+          :loading="killingJob === item.id"
+          @click="killJob(item)"
+        >
+          <v-icon left small>fa-stop</v-icon>
+          Kill
+        </v-btn>
+        <span v-else class="grey--text">
+          {{ item.agentStatus === "completed" ? "Completed" : "N/A" }}
+        </span>
+      </template>
+
+      <template #item.input="{ item }">
+        <span
+          class="text-truncate"
+          style="max-width: 300px; display: inline-block"
+        >
+          {{ truncateInput(item.input) }}
+        </span>
+      </template>
+
+      <template #expanded-item="{ headers: scopedHeaders, item }">
+        <td
+          v-if="expandedJobs[item.id]"
+          :colspan="scopedHeaders.length"
+          class="pa-4"
+        >
+          <div>
+            <div class="d-flex align-center mb-2">
+              <v-btn
+                x-small
+                text
+                @click="
+                  downloadText(item.input || '', `task-${item.id}-input.txt`)
+                "
+              >
+                <v-icon left small>fa-download</v-icon>
+                Download Input
+              </v-btn>
+              <v-btn
+                x-small
+                text
+                class="ml-2"
+                @click="
+                  downloadText(item.output || '', `task-${item.id}-output.txt`)
+                "
+              >
+                <v-icon left small>fa-download</v-icon>
+                Download Output
+              </v-btn>
+              <v-spacer />
+              <v-switch
+                v-model="expandedJobs[item.id].backgroundColor"
+                false-value="white"
+                true-value="black"
+                label="Dark Background"
+                class="mt-0"
+                hide-details
+              />
+            </div>
+
+            <p><b>Full Input:</b></p>
+            <p
+              :class="
+                'mono ' +
+                (expandedJobs[item.id].backgroundColor === 'white'
+                  ? 'font-black'
+                  : 'font-white')
+              "
+              :style="
+                'background-color: ' +
+                expandedJobs[item.id].backgroundColor +
+                ';'
+              "
+            >
+              {{ item.input || "No input" }}
+            </p>
+
+            <p><b>Output:</b></p>
+            <div
+              :class="
+                'mono ' +
+                (expandedJobs[item.id].backgroundColor === 'white'
+                  ? 'font-black'
+                  : 'font-white')
+              "
+              :style="
+                'background-color: ' +
+                expandedJobs[item.id].backgroundColor +
+                ';'
+              "
+            >
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                v-if="expandedJobs[item.id].htmlOutput"
+                v-html="expandedJobs[item.id].htmlOutput"
+              />
+              <div v-else>{{ item.output || "No output yet" }}</div>
+            </div>
+          </div>
+        </td>
+      </template>
+    </v-data-table>
+
+    <v-dialog v-model="confirmDialog" max-width="400">
+      <v-card>
+        <v-card-title>Confirm Kill Job</v-card-title>
+        <v-card-text>
+          Are you sure you want to kill job #{{ jobToKill?.id }}?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text @click="confirmDialog = false">Cancel</v-btn>
+          <v-btn color="error" @click="confirmKillJob">Kill Job</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+// eslint-disable-next-line import/no-named-default
+import { default as AnsiUp } from "ansi_up";
+import * as agentTaskApi from "@/api/agent-task-api";
+import pause from "@/utils/pause";
+import DownloadMixin from "@/mixins/download-stager";
+
+const KILLABLE_STATUSES = ["running", "started", "continuous"];
+const ACTIVE_STATUSES = [...KILLABLE_STATUSES, "queued"];
+
+const ansiUp = new AnsiUp();
+
+export default {
+  name: "AgentJobs",
+  mixins: [DownloadMixin],
+  props: {
+    agent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      jobs: [],
+      loading: false,
+      error: null,
+      successMessage: null,
+      autoRefresh: false,
+      autoRefreshInterval: null,
+      killRefreshTimeout: null,
+      isDestroyed: false,
+      killingJob: null,
+      confirmDialog: false,
+      jobToKill: null,
+      expanded: [],
+      expandedJobs: {},
+      headers: [
+        { text: "ID", value: "id", width: "80px" },
+        { text: "Task Name", value: "task_name" },
+        { text: "Status", value: "status", width: "120px" },
+        { text: "Input", value: "input" },
+        { text: "Created", value: "created_at", width: "180px" },
+        { text: "Actions", value: "actions", sortable: false, width: "120px" },
+      ],
+    };
+  },
+  watch: {
+    autoRefresh(val) {
+      if (val) {
+        this.startAutoRefresh();
+      } else {
+        this.stopAutoRefresh();
+      }
+    },
+    agent: {
+      handler() {
+        this.refreshJobs();
+      },
+      immediate: true,
+    },
+  },
+  beforeDestroy() {
+    this.isDestroyed = true;
+    this.stopAutoRefresh();
+    if (this.killRefreshTimeout) {
+      clearTimeout(this.killRefreshTimeout);
+    }
+  },
+  methods: {
+    async refreshJobs() {
+      if (!this.agent?.session_id) return;
+      if (this.loading) return;
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        // Request the agent to report its jobs, returns the task object
+        const task = await agentTaskApi.getJobs(this.agent.session_id);
+
+        // Poll for the task result using a delay based on agent check-in interval
+        const pollDelay = Math.max(
+          this.agent.delay != null ? this.agent.delay * 1000 : 5000,
+          1000,
+        );
+        const maxAttempts = 30;
+        let getJobsOutput = null;
+        let consecutiveErrors = 0;
+
+        for (let i = 0; i < maxAttempts; i++) {
+          if (this.isDestroyed) return;
+          // eslint-disable-next-line no-await-in-loop
+          await pause(pollDelay);
+          if (this.isDestroyed) return;
+          try {
+            // eslint-disable-next-line no-await-in-loop
+            const result = await agentTaskApi.getTask(
+              this.agent.session_id,
+              task.id,
+            );
+            consecutiveErrors = 0;
+            if (result.output) {
+              getJobsOutput = result.output;
+              break;
+            }
+          } catch (pollErr) {
+            consecutiveErrors += 1;
+            if (consecutiveErrors >= 3) {
+              const detail =
+                typeof pollErr === "string"
+                  ? pollErr
+                  : pollErr.message || "Unknown error";
+              throw new Error(
+                `Failed to poll for job results after ${consecutiveErrors} consecutive errors: ${detail}`,
+              );
+            }
+          }
+        }
+
+        if (!getJobsOutput) {
+          this.error =
+            "Timed out waiting for agent to report jobs. " +
+            "The agent may be offline or have a high check-in delay. Try refreshing again later.";
+          this.jobs = [];
+          return;
+        }
+
+        // Parse the TASK_GETJOBS output to extract background job information
+        const agentJobs = this.parseGetJobsOutput(getJobsOutput);
+
+        // Fetch tasks to match jobs with their creator tasks
+        const response = await agentTaskApi.getTasks(this.agent.session_id, {
+          limit: 100,
+          page: 1,
+          sortBy: "id",
+          sortOrder: "desc",
+          status: null,
+        });
+
+        // Build jobs array by matching agent jobs with their corresponding tasks
+        this.jobs = agentJobs
+          .map((agentJob) => {
+            // Find the task that created this job
+            const creatorTask = response.records.find((t) =>
+              t.output?.includes(`Job started: ${agentJob.jobId}`),
+            );
+
+            return {
+              id: agentJob.jobId,
+              agentStatus: agentJob.status,
+              task_name: creatorTask?.task_name ?? "Unknown",
+              module_name: creatorTask?.module_name ?? null,
+              input: creatorTask?.input ?? "Unknown",
+              output: creatorTask?.output ?? "",
+              created_at: creatorTask?.created_at ?? null,
+              updated_at: creatorTask?.updated_at ?? null,
+              taskId: creatorTask?.id ?? null,
+            };
+          })
+          .filter((job) => ACTIVE_STATUSES.includes(job.agentStatus));
+
+        // Clean up stale expandedJobs entries
+        const activeJobIds = new Set(this.jobs.map((j) => j.id));
+        Object.keys(this.expandedJobs).forEach((key) => {
+          if (!activeJobIds.has(Number(key))) {
+            this.$delete(this.expandedJobs, key);
+          }
+        });
+
+        // Process each job for display
+        this.jobs.forEach((job) => {
+          const output = job.output || "";
+          const htmlOutput = this.hasAnsi(output)
+            ? ansiUp.ansi_to_html(output)
+            : null;
+
+          if (!this.expandedJobs[job.id]) {
+            this.$set(this.expandedJobs, job.id, {
+              backgroundColor: "black",
+              htmlOutput,
+            });
+          } else {
+            this.expandedJobs[job.id].htmlOutput = htmlOutput;
+          }
+        });
+      } catch (err) {
+        const detail =
+          typeof err === "string" ? err : err.message || "Unknown error";
+        this.error = `Failed to fetch jobs: ${detail}`;
+      } finally {
+        this.loading = false;
+      }
+    },
+    parseGetJobsOutput(output) {
+      // Parse the table output from TASK_GETJOBS.
+      // The agent labels the column "Task ID" but it actually represents the
+      // background job/thread ID, stored here as jobId.
+      // Note: this format is specific to Empire's TASK_GETJOBS output and may vary by agent language.
+      // Expected format:
+      // Task ID | Status
+      // --------------------
+      // 27 | started
+      // 1 | running
+      const lines = output
+        .split("\n")
+        .filter(
+          (line) =>
+            line.trim() && !line.includes("Task ID") && !line.includes("---"),
+        );
+
+      const parsed = lines
+        .map((line) => line.match(/^\s*(\d+)\s*\|\s*(\w+)\s*$/))
+        .filter((match) => match != null)
+        .map((match) => ({
+          jobId: parseInt(match[1], 10),
+          status: match[2],
+        }));
+
+      if (lines.length > 0 && parsed.length === 0) {
+        this.error =
+          "Received job data from agent but could not parse it. " +
+          "The agent may be running an incompatible version.";
+      }
+
+      return parsed;
+    },
+    killJob(job) {
+      this.jobToKill = job;
+      this.confirmDialog = true;
+    },
+    async confirmKillJob() {
+      if (!this.jobToKill) return;
+
+      const job = this.jobToKill;
+      this.confirmDialog = false;
+      this.killingJob = job.id;
+      this.error = null;
+
+      try {
+        await agentTaskApi.killJob(this.agent.session_id, job.id);
+        this.successMessage = `Kill command sent for job #${job.id}. The job will be stopped on the agent's next check-in.`;
+        if (!this.autoRefresh) {
+          this.killRefreshTimeout = setTimeout(() => this.refreshJobs(), 3000);
+        }
+      } catch (err) {
+        const detail =
+          typeof err === "string"
+            ? err
+            : err.message || `Failed to kill job #${job.id}`;
+        this.error = detail;
+      } finally {
+        this.killingJob = null;
+        this.jobToKill = null;
+      }
+    },
+    startAutoRefresh() {
+      this.stopAutoRefresh();
+      const loop = async () => {
+        if (!this.autoRefresh || this.isDestroyed) return;
+        await this.refreshJobs();
+        if (this.autoRefresh && !this.isDestroyed) {
+          // Schedule next refresh after current one completes to avoid stacking
+          this.autoRefreshInterval = setTimeout(loop, 10000);
+        }
+      };
+      this.autoRefreshInterval = setTimeout(loop, 10000);
+    },
+    stopAutoRefresh() {
+      if (this.autoRefreshInterval) {
+        clearTimeout(this.autoRefreshInterval);
+        this.autoRefreshInterval = null;
+      }
+    },
+    getStatusColor(status) {
+      const colors = {
+        queued: "orange",
+        pulled: "blue",
+        running: "blue",
+        started: "orange",
+        completed: "green",
+        error: "red",
+        continuous: "purple",
+      };
+      return colors[status] || "grey";
+    },
+    formatDate(date) {
+      if (!date) return "N/A";
+      return moment(date).format("YYYY-MM-DD HH:mm:ss");
+    },
+    truncateInput(input) {
+      if (!input) return "";
+      return input.length > 50 ? `${input.substring(0, 50)}...` : input;
+    },
+    isKillable(status) {
+      return KILLABLE_STATUSES.includes(status);
+    },
+    hasAnsi(text) {
+      return text.includes("\u001b") || text.includes("\u009b");
+    },
+  },
+};
+</script>
+
+<!-- Unscoped so styles apply inside v-html rendered ANSI output content -->
+<style>
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mono {
+  white-space: pre-wrap;
+  font:
+    1.1em "Andale Mono",
+    Consolas,
+    "Courier New";
+  font-weight: bold;
+  line-height: 1.6em;
+  text-align: left;
+}
+
+.font-white {
+  color: white;
+}
+
+.font-black {
+  color: black;
+}
+</style>
diff --git a/src/views/AgentEdit.vue b/src/views/AgentEdit.vue
index 46694c6d..01fc45bb 100644
--- a/src/views/AgentEdit.vue
+++ b/src/views/AgentEdit.vue
@@ -16,6 +16,10 @@
               Tasks
               <v-icon x-small class="ml-1"> fa-sticky-note </v-icon>
             </v-tab>
+            <v-tab key="jobs" href="#jobs">
+              Jobs
+              <v-icon x-small class="ml-1"> fa-cogs </v-icon>
+            </v-tab>
             <v-tab key="view" href="#view">
               View
               <v-icon x-small class="ml-1"> fa-eye </v-icon>
@@ -206,6 +210,16 @@
                   />
                 </v-card>
               </v-tab-item>
+              <v-tab-item
+                key="jobs"
+                :value="'jobs'"
+                :transition="false"
+                :reverse-transition="false"
+              >
+                <v-card flat>
+                  <agent-jobs :agent="agent" />
+                </v-card>
+              </v-tab-item>
               <v-tab-item
                 key="view"
                 :value="'view'"
@@ -239,6 +253,7 @@
 import AgentForm from "@/components/agents/AgentForm.vue";
 import AgentInteract from "@/components/agents/AgentInteract.vue";
 import AgentTasksList from "@/components/agents/AgentTasksList.vue";
+import AgentJobs from "@/components/agents/AgentJobs.vue";
 import AgentExecuteModule from "@/components/agents/AgentExecuteModule.vue";
 import AgentFileBrowser from "@/components/agents/AgentFileBrowser.vue";
 import AgentTerminal from "@/components/agents/AgentTerminal.vue";
@@ -262,6 +277,7 @@ export default {
     AgentExecuteModule,
     AgentFileBrowser,
     AgentTasksList,
+    AgentJobs,
     AgentTerminal,
     AgentUploadDialog,
     AgentDownloadDialog,
@@ -277,11 +293,9 @@ export default {
       nameLoading: false,
       uploadLoading: false,
       downloadLoading: false,
-      scriptImportLoading: false,
       nameDialog: false,
       uploadDialog: false,
       downloadDialog: false,
-      scriptImportDialog: false,
       initialized: true,
       errorState: false,
       paneSize: 100,

From 518758d1df0764a1bd49e89d2ebc577a68c26623 Mon Sep 17 00:00:00 2001
From: Vincent Rose <vrose04@gmail.com>
Date: Thu, 5 Mar 2026 23:17:40 -0700
Subject: [PATCH 3/6] Vue 3 / Vuetify 3 Migration (#259)

---
 .eslintrc.js                                  |   12 +-
 .github/workflows/lint-and-test.yml           |    2 +-
 .github/workflows/release-private-start.yml   |    2 +-
 .github/workflows/release-private-tag.yml     |    2 +-
 .github/workflows/release-public-start.yml    |    2 +-
 .github/workflows/release-public-tag.yml      |    2 +-
 .../workflows/release-sponsor-kali-start.yml  |    2 +-
 .../workflows/release-sponsor-kali-tag.yml    |    2 +-
 CHANGELOG.md                                  |    8 +
 package.json                                  |   24 +-
 src/App.vue                                   |   82 +-
 src/app.scss                                  |    9 +-
 src/components/AuthorChips.vue                |    5 +-
 src/components/AutoRunModules.vue             |  100 +-
 src/components/Chat.vue                       |  420 +++-
 src/components/ClickToEdit.vue                |  105 +-
 src/components/Confirm.vue                    |    8 +-
 src/components/DateTimeDisplay.vue            |    6 +-
 src/components/DynamicFormInput.vue           |   47 +-
 src/components/EditPageTop.vue                |   18 +-
 src/components/ErrorStateAlert.vue            |   12 +-
 src/components/FileInput.vue                  |   19 +-
 src/components/FileUploadDialog.vue           |   26 +-
 src/components/GeneralForm.vue                |   33 +-
 src/components/HeaderMenu.vue                 |   23 +-
 src/components/InfoViewer.vue                 |    8 +-
 src/components/ListPageTop.vue                |   18 +-
 src/components/Login.vue                      |   27 +-
 src/components/NotificationBell.vue           |   44 +-
 src/components/SideNav.vue                    |  162 +-
 src/components/SocketNotifications.vue        |   22 +-
 src/components/StarkillerSnackbar.vue         |   11 +-
 src/components/TagChip.vue                    |   31 +-
 src/components/TechniqueChips.vue             |    2 +-
 src/components/TooltipButton.vue              |    9 +-
 src/components/TooltipButtonToggle.vue        |   15 +-
 src/components/agents/AgentDownloadDialog.vue |   27 +-
 src/components/agents/AgentExecuteModule.vue  |   78 +-
 src/components/agents/AgentFileBrowser.vue    |   66 +-
 src/components/agents/AgentForm.vue           |   68 +-
 src/components/agents/AgentInteract.vue       |   89 +-
 src/components/agents/AgentJobs.vue           |   73 +-
 src/components/agents/AgentTasksList.vue      |   19 +-
 src/components/agents/AgentTasksTable.vue     |  365 ++-
 src/components/agents/AgentTerminal.vue       |   29 +-
 src/components/agents/AgentUploadDialog.vue   |   19 +-
 src/components/agents/AgentsList.vue          |   15 +-
 src/components/agents/AgentsTable.vue         |  125 +-
 src/components/agents/ExecuteModuleDialog.vue |   11 +-
 src/components/listeners/ListenersList.vue    |    9 +-
 src/components/listeners/ListenersTable.vue   |   46 +-
 .../listeners/MalleableProfilesList.vue       |  242 +-
 src/components/modules/ModulesTable.vue       |   53 +-
 src/components/plugins/PluginMarketplace.vue  |   74 +-
 src/components/plugins/PluginTasksList.vue    |    4 +-
 src/components/plugins/PluginTasksTable.vue   |  347 ++-
 src/components/plugins/PluginsList.vue        |   25 +-
 src/components/stagers/StagersTable.vue       |   32 +-
 src/components/tables/AdvancedTable.vue       |    4 +-
 .../tables/ExpansionPanelBoolean.vue          |    5 +-
 .../tables/ExpansionPanelFilter.vue           |   24 +-
 .../tables/ExpansionPanelSearch.vue           |   19 +-
 src/main.js                                   |   38 +-
 src/mixins/copy-stager.js                     |   12 +-
 src/plugins/vuetify.js                        |   59 +-
 src/router/index.js                           |   10 +-
 src/stores/agent-module.js                    |   25 +-
 src/stores/application-module.js              |    2 +
 src/utils/clipboard.js                        |   12 +
 src/utils/tags.js                             |   16 +
 src/views/About.vue                           |    2 +-
 src/views/AgentEdit.vue                       |  315 +--
 src/views/BypassEdit.vue                      |   44 +-
 src/views/Bypasses.vue                        |   35 +-
 src/views/CredentialEdit.vue                  |   42 +-
 src/views/Credentials.vue                     |   85 +-
 src/views/Downloads.vue                       |  128 +-
 src/views/ListenerEdit.vue                    |  127 +-
 src/views/MalleableProfileEdit.vue            |   44 +-
 src/views/ModuleExecute.vue                   |   12 +-
 src/views/Modules.vue                         |    4 +-
 src/views/Notifications.vue                   |   45 +-
 src/views/Obfuscation.vue                     |  198 +-
 src/views/PluginEdit.vue                      |  115 +-
 src/views/Settings.vue                        |   68 +-
 src/views/StagerEdit.vue                      |   72 +-
 src/views/Stagers.vue                         |   10 +-
 src/views/UserEdit.vue                        |   61 +-
 src/views/Users.vue                           |   35 +-
 vite.config.js                                |   17 +-
 yarn.lock                                     | 1960 ++++++-----------
 91 files changed, 3329 insertions(+), 3452 deletions(-)
 create mode 100644 src/utils/clipboard.js
 create mode 100644 src/utils/tags.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 42a94355..4405f033 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,7 +8,11 @@ module.exports = {
   env: {
     es2021: true,
   },
-  extends: ["plugin:vue/recommended", "@vue/eslint-config-airbnb", "prettier"],
+  extends: [
+    "plugin:vue/vue3-recommended",
+    "@vue/eslint-config-airbnb",
+    "prettier",
+  ],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
@@ -61,5 +65,11 @@ module.exports = {
         mocha: true,
       },
     },
+    {
+      files: ["src/plugins/vuetify.js"],
+      rules: {
+        "import/no-unresolved": "off",
+      },
+    },
   ],
 };
diff --git a/.github/workflows/lint-and-test.yml b/.github/workflows/lint-and-test.yml
index 5e915a94..649e2a6b 100644
--- a/.github/workflows/lint-and-test.yml
+++ b/.github/workflows/lint-and-test.yml
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v6
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
           cache: "yarn"
       - name: Get app version
         run: |
diff --git a/.github/workflows/release-private-start.yml b/.github/workflows/release-private-start.yml
index 30cb989c..862755e1 100644
--- a/.github/workflows/release-private-start.yml
+++ b/.github/workflows/release-private-start.yml
@@ -36,7 +36,7 @@ jobs:
           git config user.email noreply@github.com
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
       - name: Change version number
         run: |
           if [ -n "${{ github.event.inputs.overrideVersion }}" ]; then
diff --git a/.github/workflows/release-private-tag.yml b/.github/workflows/release-private-tag.yml
index 1c58c93c..9d3513c7 100644
--- a/.github/workflows/release-private-tag.yml
+++ b/.github/workflows/release-private-tag.yml
@@ -23,7 +23,7 @@ jobs:
           git config user.email noreply@github.com
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
       - name: Set application version as variable
         run: |
           echo "APP_VERSION=$(npm pkg get version | sed 's/"//g')" >> $GITHUB_ENV
diff --git a/.github/workflows/release-public-start.yml b/.github/workflows/release-public-start.yml
index 853b7646..0c95a15e 100644
--- a/.github/workflows/release-public-start.yml
+++ b/.github/workflows/release-public-start.yml
@@ -31,7 +31,7 @@ jobs:
           git config user.email noreply@github.com
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
       - name: Get app version
         run: |
           echo "APP_VERSION=$(npm pkg get version | sed 's/"//g')" >> $GITHUB_ENV
diff --git a/.github/workflows/release-public-tag.yml b/.github/workflows/release-public-tag.yml
index 2f34f74f..eab39659 100644
--- a/.github/workflows/release-public-tag.yml
+++ b/.github/workflows/release-public-tag.yml
@@ -27,7 +27,7 @@ jobs:
           echo "LATEST_TAG=$latest_tag" >> $GITHUB_ENV
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
           cache: "yarn"
       - name: Set application version as variable
         run: |
diff --git a/.github/workflows/release-sponsor-kali-start.yml b/.github/workflows/release-sponsor-kali-start.yml
index 2e017f67..8ee2e129 100644
--- a/.github/workflows/release-sponsor-kali-start.yml
+++ b/.github/workflows/release-sponsor-kali-start.yml
@@ -23,7 +23,7 @@ jobs:
           git config user.email noreply@github.com
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
       - name: Get app version
         run: |
           echo "APP_VERSION=$(npm pkg get version | sed 's/"//g')" >> $GITHUB_ENV
diff --git a/.github/workflows/release-sponsor-kali-tag.yml b/.github/workflows/release-sponsor-kali-tag.yml
index 955821e1..eea23982 100644
--- a/.github/workflows/release-sponsor-kali-tag.yml
+++ b/.github/workflows/release-sponsor-kali-tag.yml
@@ -25,7 +25,7 @@ jobs:
           git config user.email noreply@github.com
       - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 20
           cache: "yarn"
       - name: Set application version as variable
         run: |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d04644a..2e6b81c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   Migrated from Vue 2 to Vue 3
+-   Migrated from Vuetify 2 to Vuetify 3
+-   Replaced vue-beautiful-chat with native Vuetify 3 chat drawer
+-   Updated CI workflows to Node 20
+
 ### Added
 
 -   Added Jobs tab to agent page for viewing and managing background jobs
@@ -22,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   Fixed module execution snackbar displaying "[object Object]" instead of agent name
+-   Fixed bulk delete on malleable profiles page using wrong identifier
 
 ## [3.3.0] - 2026-01-18
 
diff --git a/package.json b/package.json
index 05b45851..b8c725fc 100644
--- a/package.json
+++ b/package.json
@@ -14,37 +14,35 @@
   "dependencies": {
     "@fontsource/roboto": "^4.5.1",
     "@fortawesome/fontawesome-free": "^6",
-    "@mdi/font": "5.9.55",
+    "@mdi/font": "^7.0",
     "ansi_up": "^5.2.1",
     "axios": "^0.24.0",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.29.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
-    "portal-vue": "^2.1.7",
     "qs": "^6.10.3",
     "semver": "^7.3.5",
     "socket.io-client": "^4.1.2",
-    "splitpanes": "^2.3.8",
+    "splitpanes": "^3.1.0",
     "table": "^6.8.1",
     "uuid": "^8.3.2",
-    "vue": "2.7",
-    "vue-beautiful-chat": "^2.5.0",
-    "vue-markdown-render": "1.1.2",
-    "vue-router": "^3.5.1",
-    "vuedraggable": "^2.24.3",
-    "vuetify": "^2.6.0"
+    "vue": "^3.5",
+    "vue-markdown-render": "^2.3.0",
+    "vue-router": "^4.3",
+    "vuedraggable": "^4.1",
+    "vuetify": "^3.12"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.0",
     "@vue/eslint-config-airbnb": "^7.0.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vue": "^9.8.0",
     "prettier": "^3.0.2",
-    "sass": "~1.32",
-    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4"
+    "sass": "^1.70",
+    "vite": "^5.0",
+    "vite-plugin-vuetify": "^2.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 05a4367a..9f6d663b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,10 @@
       <confirm ref="confirm" />
       <socket-notifications
         v-if="isLoggedIn && versionSatisfies('>=4.0') && !hideSideBar"
+        ref="socketNotifications"
       />
       <starkiller-snackbar ref="snack" />
-      <v-app-bar v-if="isLoggedIn" elevate-on-scroll app>
+      <v-app-bar v-if="isLoggedIn" scroll-behavior="elevate">
         <template
           v-if="
             $route.name === 'agentEdit' ||
@@ -16,19 +17,33 @@
           "
           #extension
         >
-          <portal-target name="app-bar-extension" slim />
+          <div
+            id="app-bar-extension"
+            style="display: flex; flex: 1 1 auto; align-items: center"
+          ></div>
         </template>
-        <portal-target name="app-bar" multiple slim />
+        <div
+          id="app-bar"
+          style="display: flex; flex: 1 1 auto; align-items: center"
+        ></div>
+        <div v-if="isLoggedIn && chatWidget" class="pt-2">
+          <v-btn icon variant="text" size="small" @click="openChat">
+            <v-badge
+              :content="chatUnreadCount"
+              :model-value="chatUnreadCount > 0"
+              color="#F37C22"
+            >
+              <v-icon>mdi-chat</v-icon>
+            </v-badge>
+          </v-btn>
+        </div>
         <notification-bell
           v-show="$route.name !== 'notifications'"
           ref="bell"
         />
       </v-app-bar>
-      <!-- Sizes your content based upon application components -->
       <v-main>
-        <!-- Provides the application the proper gutter -->
         <v-container fluid>
-          <!-- If using vue-router -->
           <router-view />
         </v-container>
       </v-main>
@@ -66,7 +81,6 @@
   </div>
 </template>
 <script>
-import Vue from "vue";
 import semver from "semver";
 import { mapState } from "pinia";
 
@@ -86,11 +100,49 @@ export default {
     SocketNotifications,
     StarkillerSnackbar,
   },
+  provide() {
+    return {
+      snack: this.snackProxy,
+      bell: this.bellProxy,
+      confirm: (...args) => {
+        if (!this.$refs.confirm) {
+          console.warn("[Starkiller] confirm ref unavailable:", ...args);
+          return false;
+        }
+        return this.$refs.confirm.open(...args);
+      },
+    };
+  },
+  data() {
+    const createRefProxy = (refName, methods) =>
+      Object.fromEntries(
+        methods.map((method) => [
+          method,
+          (...args) => {
+            if (!this.$refs[refName]) {
+              console.error(
+                `[Starkiller] ${refName} ref unavailable, ${method}:`,
+                ...args,
+              );
+              return;
+            }
+            this.$refs[refName][method](...args);
+          },
+        ]),
+      );
+
+    return {
+      snackProxy: createRefProxy("snack", ["error", "warn", "success", "info"]),
+      bellProxy: createRefProxy("bell", ["push"]),
+    };
+  },
   computed: {
     ...mapState(useApplicationStore, [
       "isLoggedIn",
       "empireVersion",
       "connectionError",
+      "chatWidget",
+      "chatUnreadCount",
     ]),
     isLoginPage() {
       return this.$route.name === "home";
@@ -122,7 +174,7 @@ export default {
         if (val.length > 0) {
           if (semver.satisfies(val.split(" ")[0].split("-")[0], "<5.2")) {
             await this.$nextTick();
-            this.$snack.warn(
+            this.snackProxy.warn(
               "This version of Starkiller is recommended to be used with Empire 5.2 or greater." +
                 " Some features may not work properly.",
             );
@@ -133,20 +185,14 @@ export default {
     },
     connectionError(val) {
       if (val > 0) {
-        this.$snack.error("Could not reach Empire server");
+        this.snackProxy.error("Could not reach Empire server");
       }
     },
   },
-  mounted() {
-    this.$root.$confirm = this.$refs.confirm.open;
-
-    // register global snackbar
-    Vue.prototype.$snack = this.$refs.snack;
-
-    // register global notification bell
-    Vue.prototype.$bell = this.$refs.bell;
-  },
   methods: {
+    openChat() {
+      this.$refs.socketNotifications?.$refs.chat?.open();
+    },
     versionSatisfies(version) {
       return semver.satisfies(
         this.empireVersion.split(" ")[0].split("-")[0],
diff --git a/src/app.scss b/src/app.scss
index 3ad3dd9f..109078ea 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -7,8 +7,9 @@
   margin-bottom: 15px;
 }
 
-.sc-launcher,
-.sc-open-icon,
-.sc-closed-icon {
-  bottom: 0 !important;
+// Overrides vuetify.css
+// Because Teleport wraps tabs in a div, which changes the background color.
+.v-toolbar__content > div > .v-tabs,
+.v-toolbar__extension > div > .v-tabs {
+  background-color: inherit;
 }
diff --git a/src/components/AuthorChips.vue b/src/components/AuthorChips.vue
index 4590633c..02895402 100644
--- a/src/components/AuthorChips.vue
+++ b/src/components/AuthorChips.vue
@@ -1,9 +1,8 @@
 <template>
   <div>
-    <template v-for="(author, index) in authors">
+    <template v-for="(author, index) in authors" :key="index">
       <a
         v-if="author.link"
-        :key="index"
         :href="author.link"
         target="_blank"
         rel="noopener noreferrer"
@@ -14,7 +13,7 @@
         </v-chip>
       </a>
 
-      <v-chip v-else :key="index" medium class="mr-1 mb-1">
+      <v-chip v-else medium class="mr-1 mb-1">
         {{ formatDisplayName(author) }}
       </v-chip>
     </template>
diff --git a/src/components/AutoRunModules.vue b/src/components/AutoRunModules.vue
index b02a23e3..b3919b0f 100644
--- a/src/components/AutoRunModules.vue
+++ b/src/components/AutoRunModules.vue
@@ -8,15 +8,15 @@
           <v-col cols="8">
             <v-autocomplete
               v-model="selectedModule"
+              v-model:search="searchText"
               :items="availableModuleOptions"
               label="Select Module to Add"
               item-value="id"
-              item-text="name"
+              item-title="name"
               :menu-props="{ maxHeight: '300px', offsetY: true, nudgeTop: 5 }"
-              outlined
-              dense
+              variant="outlined"
+              density="compact"
               clearable
-              :search-input.sync="searchText"
             />
           </v-col>
           <v-col cols="4">
@@ -36,38 +36,45 @@
     <v-row>
       <v-col>
         <h3>Selected Modules</h3>
-        <draggable v-model="moduleList" group="modules" handle=".handle">
-          <div
-            v-for="(module, index) in moduleList"
-            :key="module.id || module.module_id"
-            class="module-block"
-          >
-            <v-card style="padding: 10px">
-              <div
-                class="handle"
-                style="
-                  cursor: grab;
-                  display: flex;
-                  align-items: center;
-                  margin-bottom: 5px;
-                "
-              >
-                <v-icon left>mdi-drag-horizontal</v-icon>
-                {{ index + 1 }}. {{ module.id || module.module_id }}
-              </div>
-              <v-btn small color="primary" @click="openOptionsDialog(module)">
-                Edit Options
-              </v-btn>
-              <v-btn
-                small
-                color="red"
-                style="margin-left: 20px"
-                @click="removeModuleFromList(index)"
-              >
-                Delete
-              </v-btn>
-            </v-card>
-          </div>
+        <draggable
+          v-model="moduleList"
+          group="modules"
+          handle=".handle"
+          item-key="id"
+        >
+          <template #item="{ element: module, index }">
+            <div class="module-block">
+              <v-card style="padding: 10px">
+                <div
+                  class="handle"
+                  style="
+                    cursor: grab;
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 5px;
+                  "
+                >
+                  <v-icon start>mdi-drag-horizontal</v-icon>
+                  {{ index + 1 }}. {{ module.id || module.module_id }}
+                </div>
+                <v-btn
+                  size="small"
+                  color="primary"
+                  @click="openOptionsDialog(module)"
+                >
+                  Edit Options
+                </v-btn>
+                <v-btn
+                  size="small"
+                  color="red"
+                  style="margin-left: 20px"
+                  @click="removeModuleFromList(index)"
+                >
+                  Delete
+                </v-btn>
+              </v-card>
+            </div>
+          </template>
         </draggable>
       </v-col>
     </v-row>
@@ -107,17 +114,22 @@
                   :name="field.name"
                   :type="fieldType(field)"
                 />
-                <v-subheader>{{ field.description }}</v-subheader>
+                <v-list-subheader>{{ field.description }}</v-list-subheader>
               </v-col>
             </v-row>
           </v-form>
         </v-card-text>
 
         <v-card-actions>
-          <v-btn color="blue darken-1" text @click="showDialog = false"
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="showDialog = false"
             >Cancel</v-btn
           >
-          <v-btn color="blue darken-1" text @click="saveOptions">Save</v-btn>
+          <v-btn color="blue-darken-1" variant="text" @click="saveOptions"
+            >Save</v-btn
+          >
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -133,6 +145,7 @@ import { getAutorunTasks, saveAutorunTasks } from "@/api/listener-api"; // Impor
 export default {
   name: "AutoRunModules",
   components: { draggable, DynamicFormInput },
+  inject: ["snack"],
   props: {
     selectedListener: {
       type: Object,
@@ -220,6 +233,9 @@ export default {
           });
         } catch (error) {
           console.error("Failed to fetch autorun tasks", error);
+          this.snack.error(
+            `Failed to load autorun modules: ${error.message || error}`,
+          );
         }
       }
     },
@@ -275,9 +291,9 @@ export default {
       try {
         // Send the cleanedModules (even if it's an empty array) directly to the server
         await saveAutorunTasks(this.selectedListener.id, cleanedModules);
-        this.$snack.success("Autorun modules saved.");
+        this.snack.success("Autorun modules saved.");
       } catch (error) {
-        this.$snack.error("Failed to save autorun modules.");
+        this.snack.error("Failed to save autorun modules.");
         console.error("Failed to save autorun modules", error);
       }
     },
@@ -293,7 +309,7 @@ export default {
         (mod) => mod.id === this.selectedModuleForEdit.id,
       );
       if (index !== -1) {
-        this.$set(this.moduleList, index, this.selectedModuleForEdit);
+        this.moduleList[index] = this.selectedModuleForEdit;
       }
       this.showDialog = false;
     },
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index b7b9da69..f46ff325 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -1,48 +1,124 @@
 <template>
-  <div>
-    <beautiful-chat
-      :participants="participants"
-      :on-message-was-sent="onMessageWasSent"
-      :message-list="messageList"
-      :new-messages-count="newMessagesCount"
-      :is-open="isChatOpen"
-      :close="closeChat"
-      :open="openChat"
-      :show-emoji="false"
-      :show-file="false"
-      :show-edition="false"
-      :show-deletion="false"
-      :deletion-confirmation="false"
-      :show-typing-indicator="showTypingIndicator"
-      :show-launcher="true"
-      :show-close-button="true"
-      :colors="colors"
-      :always-scroll-to-bottom="alwaysScrollToBottom"
-      :disable-user-list-toggle="false"
-      :message-styling="messageStyling"
-    >
-      <template #user-avatar="{ message, user }">
-        <div
-          v-if="message.type !== 'system' && user && user.name !== 'me'"
-          v-tooltip="user.name"
-          :title="user.name"
-          class="sc-message--avatar"
-          :style="{
-            backgroundImage: `url(${user.imageUrl})`,
-            width: '40px',
-            height: '40px',
-          }"
-        >
-          <div
-            :class="user.online ? 'online-indicator' : 'offline-indicator'"
+  <v-navigation-drawer
+    v-model="isChatOpen"
+    location="right"
+    temporary
+    width="380"
+    class="chat-drawer"
+  >
+    <!-- Header -->
+    <template #prepend>
+      <div class="chat-header">
+        <div class="d-flex align-center">
+          <v-spacer />
+          <v-btn
+            icon
+            variant="text"
+            size="x-small"
+            class="chat-header__btn"
+            @click="showParticipants = !showParticipants"
+          >
+            <v-icon size="16">mdi-account-group</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            variant="text"
+            size="x-small"
+            class="chat-header__btn"
+            @click="isChatOpen = false"
+          >
+            <v-icon size="16">mdi-close</v-icon>
+          </v-btn>
+        </div>
+
+        <!-- Participant Bar -->
+        <v-expand-transition>
+          <div v-if="showParticipants" class="chat-participants">
+            <div
+              v-for="p in participants"
+              :key="p.id"
+              class="chat-participants__user"
+            >
+              <v-avatar size="22" :image="p.imageUrl" />
+              <span
+                class="chat-participants__status"
+                :class="{ 'chat-participants__status--online': p.online }"
+              />
+              <span class="chat-participants__name">{{ p.name }}</span>
+            </div>
+          </div>
+        </v-expand-transition>
+      </div>
+    </template>
+
+    <!-- Messages Area -->
+    <div ref="messageContainer" class="chat-messages">
+      <template v-for="(m, i) in messages" :key="i">
+        <!-- System message -->
+        <div v-if="m.type === 'system'" class="chat-msg-system">
+          <span>{{ m.text }}</span>
+        </div>
+
+        <!-- My message -->
+        <div v-else-if="m.author === 'me'" class="chat-msg chat-msg--me">
+          <div class="chat-msg__bubble chat-msg__bubble--me">
+            {{ m.text }}
+          </div>
+        </div>
+
+        <!-- Other's message -->
+        <div v-else class="chat-msg chat-msg--other">
+          <v-avatar
+            size="24"
+            :image="getAvatar(m.author)"
+            class="chat-msg__avatar"
           />
+          <div>
+            <span class="chat-msg__author">{{ m.author }}</span>
+            <div class="chat-msg__bubble chat-msg__bubble--other">
+              {{ m.text }}
+            </div>
+          </div>
         </div>
       </template>
-    </beautiful-chat>
-  </div>
+    </div>
+
+    <!-- Input -->
+    <template #append>
+      <div class="chat-input">
+        <v-text-field
+          v-model="inputText"
+          placeholder="Message..."
+          variant="plain"
+          density="compact"
+          hide-details
+          class="chat-input__field"
+          @keyup.enter="send"
+        >
+          <template #append-inner>
+            <v-btn
+              icon
+              variant="text"
+              size="x-small"
+              :disabled="!inputText.trim()"
+              @click="send"
+            >
+              <v-icon
+                size="18"
+                :color="inputText.trim() ? '#F37C22' : undefined"
+              >
+                mdi-send
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-text-field>
+      </div>
+    </template>
+  </v-navigation-drawer>
 </template>
 
 <script>
+import { nextTick } from "vue";
 import { useUserStore } from "@/stores/user-module";
 import { useApplicationStore } from "@/stores/application-module";
 
@@ -57,13 +133,12 @@ export default {
   data() {
     return {
       rawParticipants: [],
-      messageList: [],
+      messages: [],
       newMessagesCount: 0,
+      historyLoaded: false,
       isChatOpen: false,
-      showTypingIndicator: "",
-      alwaysScrollToBottom: false,
-      // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
-      messageStyling: true,
+      inputText: "",
+      showParticipants: false,
     };
   },
   computed: {
@@ -79,97 +154,101 @@ export default {
     me() {
       return this.applicationStore.user.username;
     },
-    colors() {
-      return {
-        header: { bg: "#F37C22", text: "#FFFFFF" },
-        launcher: { bg: "#F37C22" },
-        messageList: { bg: "#1E1E1E" },
-        userList: { bg: "#1E1E1E" },
-        sentMessage: { bg: "#1F89FB", text: "#FFFFFF" },
-        receivedMessage: { bg: "#3B3B3D", text: "#E1E1E1" },
-        userInput: { bg: "#1C1C1C", text: "#D7D7D7" },
-      };
+    onlineCount() {
+      return this.rawParticipants.length;
     },
     participants() {
-      // for each user from the main user list
-      const temp = this.allUsers.map((user) => {
-        // convert it to a a participant
-        const user2 = this.mapUser(user);
-        // if it exists in the rawParticipants array then they are online
-        user2.online =
-          this.rawParticipants.find((p) => p === user2.name) !== undefined;
-        return user2;
+      return this.allUsers.map((user) => {
+        const mapped = this.mapUser(user);
+        mapped.online =
+          this.rawParticipants.find((p) => p === mapped.name) !== undefined;
+        return mapped;
       });
-      return temp;
+    },
+  },
+  watch: {
+    messages() {
+      this.scrollToBottom();
+    },
+    newMessagesCount(val) {
+      this.applicationStore.chatUnreadCount = val;
+    },
+    isChatOpen(val) {
+      if (val) this.newMessagesCount = 0;
     },
   },
   mounted() {
     this.userStore.getUsers();
     this.socket.on("chat/join", (data) => {
-      if (!this.isChatOpen) this.newMessagesCount++;
-      const message = { type: "system", data: { text: data.message } };
-      this.messageList = [...this.messageList, message];
+      if (!this.isChatOpen && this.historyLoaded) this.newMessagesCount++;
+      this.messages.push({ type: "system", text: data.message });
       this.addUser(data.user);
     });
     this.socket.on("chat/leave", (data) => {
-      if (!this.isChatOpen) this.newMessagesCount++;
-      const message = { type: "system", data: { text: data.message } };
-      this.messageList = [...this.messageList, message];
+      if (!this.isChatOpen && this.historyLoaded) this.newMessagesCount++;
+      this.messages.push({ type: "system", text: data.message });
       this.removeUser(data.user);
     });
     this.socket.on("chat/message", (data) => {
-      if (!this.isChatOpen) this.newMessagesCount++;
-      if (data.username === this.me) {
-        data.username = "me";
-      }
-      const message = {
+      // Skip our own messages — already added locally in send()
+      // But allow them during history loading so past messages appear
+      if (data.username === this.me && this.historyLoaded) return;
+      if (!this.isChatOpen && this.historyLoaded) this.newMessagesCount++;
+      this.messages.push({
         type: "text",
-        author: data.username,
-        data: { text: data.message },
-      };
-      this.messageList = [...this.messageList, message];
+        author: data.username === this.me ? "me" : data.username,
+        text: data.message,
+      });
     });
     this.socket.on("chat/participants", (data) => {
-      this.setUsers(data);
+      this.rawParticipants = data;
     });
     this.socket.emit("chat/join");
     this.socket.emit("chat/history");
     this.socket.emit("chat/participants");
+    // Mark history as loaded after a short delay to allow history messages through
+    setTimeout(() => {
+      this.historyLoaded = true;
+    }, 1000);
   },
-  destroyed() {
+  unmounted() {
     this.socket.emit("chat/leave");
   },
   methods: {
-    onMessageWasSent(message) {
-      this.socket.emit("chat/message", { message: message.data.text });
-    },
-    openChat() {
+    open() {
       this.isChatOpen = true;
-      this.newMessagesCount = 0;
     },
-    closeChat() {
-      this.isChatOpen = false;
+    send() {
+      const text = this.inputText.trim();
+      if (!text) return;
+      this.socket.emit("chat/message", { message: text });
+      this.messages.push({ type: "text", author: "me", text });
+      this.inputText = "";
     },
-    handleScrollToTop() {
-      // called when the user scrolls message list to top
-      // leverage pagination for loading another page of messages
+    scrollToBottom() {
+      nextTick(() => {
+        const el = this.$refs.messageContainer;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
     },
     addUser(user) {
       if (this.rawParticipants.find((u) => u === user.username)) return;
-      this.rawParticipants.push(user);
+      this.rawParticipants.push(user.username);
     },
     removeUser(user) {
       const index = this.rawParticipants.findIndex((u) => u === user.username);
       if (index > -1) {
         this.rawParticipants.splice(index, 1);
-        this.rawParticipants = [...this.rawParticipants];
       }
     },
-    setUsers(users) {
-      this.rawParticipants = users;
+    getAvatar(username) {
+      const user = this.allUsers.find((u) => u.username === username);
+      return (
+        user?.avatarUrl ||
+        `https://ui-avatars.com/api/?background=random&name=${username}`
+      );
     },
     mapUser(user) {
-      // todo generate avatar images offline.
       return {
         id: user.username,
         name: user.username,
@@ -182,32 +261,139 @@ export default {
 };
 </script>
 
-<style>
-.sc-chat-window {
-  z-index: 99;
+<style lang="scss">
+.chat-drawer {
+  .v-navigation-drawer__content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 }
-.sc-launcher {
-  z-index: 99;
+
+.chat-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(0, 0, 0, 0.2);
+
+  &__btn {
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
-.sc-message--text-content {
-  margin-bottom: 0px !important; /* Overriding the v-application paragraph margin */
+
+.chat-participants {
+  padding-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &__user {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px 2px 2px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  &__status {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: #555;
+
+    &--online {
+      background: #4caf50;
+      box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
+    }
+  }
+
+  &__name {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.5);
+    letter-spacing: 0.02em;
+  }
 }
-.online-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background-color: #9dff00;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
-  box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
-.offline-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background-color: #f52a0f;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
-  box-shadow: 0px 0px 0px 1px rgba(112, 112, 112, 1);
+
+.chat-msg-system {
+  text-align: center;
+  padding: 4px 0;
+
+  span {
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: rgba(255, 255, 255, 0.25);
+  }
+}
+
+.chat-msg {
+  display: flex;
+  max-width: 85%;
+
+  &--me {
+    align-self: flex-end;
+  }
+
+  &--other {
+    align-self: flex-start;
+    gap: 8px;
+  }
+
+  &__avatar {
+    flex-shrink: 0;
+    margin-top: 14px;
+  }
+
+  &__author {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: rgba(255, 255, 255, 0.35);
+    text-transform: uppercase;
+    margin-bottom: 2px;
+    display: block;
+  }
+
+  &__bubble {
+    padding: 8px 12px;
+    font-size: 13px;
+    line-height: 1.4;
+    border-radius: 12px;
+
+    &--me {
+      background: rgba(243, 124, 34, 0.15);
+      border: 1px solid rgba(243, 124, 34, 0.2);
+      border-radius: 12px 12px 2px 12px;
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    &--other {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      border-radius: 12px 12px 12px 2px;
+      color: rgba(255, 255, 255, 0.75);
+    }
+  }
+}
+
+.chat-input {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 6px 12px;
+  background: rgba(0, 0, 0, 0.15);
+
+  &__field {
+    font-size: 13px;
+  }
 }
 </style>
diff --git a/src/components/ClickToEdit.vue b/src/components/ClickToEdit.vue
index 49d5c0d6..8145bfc6 100644
--- a/src/components/ClickToEdit.vue
+++ b/src/components/ClickToEdit.vue
@@ -2,9 +2,9 @@
   <v-row class="pb-5">
     <v-col cols="4" class="d-flex align-center justify-start">
       <span class="text--bold">{{ label }}</span>
-      <v-tooltip v-if="infoText" bottom>
-        <template #activator="{ on, attrs }">
-          <v-icon small class="ml-2" v-bind="attrs" v-on="on">
+      <v-tooltip v-if="infoText" location="bottom">
+        <template #activator="{ props: activatorProps }">
+          <v-icon size="small" class="ml-2" v-bind="activatorProps">
             mdi-information-outline
           </v-icon>
         </template>
@@ -19,8 +19,8 @@
           v-model="internalValue"
           :items="suggestedValues"
           :label="label"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           @blur="update"
           @keyup.enter="update"
         />
@@ -30,53 +30,51 @@
           v-model="menu"
           :close-on-content-click="false"
           transition="scale-transition"
-          offset-y
           min-width="auto"
         >
-          <template #activator="{ on, attrs }">
+          <template #activator="{ props: activatorProps }">
             <v-text-field
               ref="field"
               v-model="internalValue"
               label="Picker in menu"
               prepend-icon="mdi-calendar"
               readonly
-              v-bind="attrs"
+              v-bind="activatorProps"
               clearable
-              v-on="on"
               @click:clear="clear"
             />
           </template>
           <v-date-picker
-            v-model="internalValue"
-            outlined
-            dense
-            :range="dataType === 'date-range'"
-            :min="moment().format('YYYY-MM-DD')"
-            @blur="update"
-            @keyup.enter="update"
+            :model-value="
+              internalValue ? new Date(internalValue + 'T00:00:00') : undefined
+            "
+            :min="new Date()"
+            @update:model-value="onDatePicked"
           >
-            <v-spacer />
-            <v-btn
-              text
-              color="primary"
-              @click="
-                menu = false;
-                editing = false;
-                revert();
-              "
-            >
-              Cancel
-            </v-btn>
-            <v-btn
-              text
-              color="primary"
-              @click="
-                menu = false;
-                update();
-              "
-            >
-              OK
-            </v-btn>
+            <template #actions>
+              <v-spacer />
+              <v-btn
+                variant="text"
+                color="primary"
+                @click="
+                  menu = false;
+                  editing = false;
+                  revert();
+                "
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                variant="text"
+                color="primary"
+                @click="
+                  menu = false;
+                  update();
+                "
+              >
+                OK
+              </v-btn>
+            </template>
           </v-date-picker>
         </v-menu>
         <v-text-field
@@ -90,11 +88,11 @@
           :step="label === 'Jitter' ? '0.1' : '1'"
           :max="label === 'Jitter' ? '1' : ''"
           min="0"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           @blur="update"
-          @keyup.enter.native="update"
+          @keyup.enter="update"
         />
       </template>
       <span v-else class="ml-3">
@@ -108,7 +106,6 @@
 import moment from "moment";
 
 export default {
-  components: {},
   props: {
     editable: {
       type: Boolean,
@@ -118,7 +115,7 @@ export default {
       type: String,
       required: true,
     },
-    value: {
+    modelValue: {
       type: [String, Number],
       default: "",
     },
@@ -143,9 +140,10 @@ export default {
       default: () => [],
     },
   },
+  emits: ["update:modelValue", "update"],
   data() {
     return {
-      internalValue: this.value,
+      internalValue: this.modelValue,
       editing: false,
       menu: false,
       original: "",
@@ -158,12 +156,16 @@ export default {
     },
   },
   watch: {
+    modelValue(val) {
+      this.internalValue = val;
+      this.original = val;
+    },
     internalValue(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
   },
   mounted() {
-    this.original = this.value;
+    this.original = this.modelValue;
   },
   methods: {
     clicked() {
@@ -178,8 +180,12 @@ export default {
       });
     },
     async update() {
-      if (this.$refs.field.validate && this.$refs.field.validate() === false) {
-        return;
+      if (this.$refs.field && this.$refs.field.validate) {
+        const result = await this.$refs.field.validate();
+        const isValid = Array.isArray(result)
+          ? result.length === 0
+          : result?.valid !== false;
+        if (!isValid) return;
       }
 
       if (this.label === "Delay") {
@@ -203,6 +209,9 @@ export default {
       this.editing = false;
       this.$emit("update");
     },
+    onDatePicked(date) {
+      this.internalValue = date ? moment(date).format("YYYY-MM-DD") : "";
+    },
     getColClass() {
       if (this.editing === false && this.editable === true) {
         return "column-not-editing-dark";
diff --git a/src/components/Confirm.vue b/src/components/Confirm.vue
index d7416adf..e3b914c4 100644
--- a/src/components/Confirm.vue
+++ b/src/components/Confirm.vue
@@ -6,8 +6,8 @@
     @keydown.esc="cancel"
   >
     <v-card>
-      <v-toolbar dark :color="options.color" dense flat>
-        <v-toolbar-title class="white--text">
+      <v-toolbar :color="options.color" density="compact" flat>
+        <v-toolbar-title class="text-white">
           {{ title }}
         </v-toolbar-title>
       </v-toolbar>
@@ -16,8 +16,8 @@
       </v-card-text>
       <v-card-actions class="pt-0">
         <v-spacer />
-        <v-btn color="grey" text @click.native="cancel"> Cancel </v-btn>
-        <v-btn color="primary" @click.native="agree"> Yes </v-btn>
+        <v-btn color="grey" variant="text" @click="cancel"> Cancel </v-btn>
+        <v-btn color="primary" @click="agree"> Yes </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/components/DateTimeDisplay.vue b/src/components/DateTimeDisplay.vue
index 21b69083..8d90dcb3 100644
--- a/src/components/DateTimeDisplay.vue
+++ b/src/components/DateTimeDisplay.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-tooltip top>
-    <template #activator="{ on }">
-      <span v-on="on">{{ moment(timestamp).fromNow() }}</span>
+  <v-tooltip location="top">
+    <template #activator="{ props: activatorProps }">
+      <span v-bind="activatorProps">{{ moment(timestamp).fromNow() }}</span>
     </template>
     <span>{{ moment(timestamp).format("MMM D YYYY, h:mm:ss a") }}</span>
   </v-tooltip>
diff --git a/src/components/DynamicFormInput.vue b/src/components/DynamicFormInput.vue
index fd0c7d30..e3bda50d 100644
--- a/src/components/DynamicFormInput.vue
+++ b/src/components/DynamicFormInput.vue
@@ -8,6 +8,7 @@
         suggestedValues.includes('False')
       "
       v-model="internalValue"
+      color="primary"
       false-value="False"
       true-value="True"
       :label="name"
@@ -18,7 +19,7 @@
       v-model="internalValue"
       :items="suggestedValues"
       :label="name"
-      outlined
+      variant="outlined"
       multiple
       chips
     />
@@ -34,10 +35,10 @@
       v-model="internalValue"
       :items="suggestedValues"
       :label="name"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
       item-value="session_id"
-      item-text="name"
+      item-title="name"
     />
 
     <v-autocomplete
@@ -45,24 +46,24 @@
       v-model="internalValue"
       :items="suggestedValues"
       :label="name"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
       item-value="id"
-      item-text="id"
+      item-title="id"
     >
-      <template #item="data">
-        <v-list-item-content>
+      <template #item="{ item, props: itemProps }">
+        <v-list-item v-bind="itemProps">
           <v-list-item-title>
             {{
               truncate(
-                `${data.item.username}, ${data.item.domain}, ${data.item.password}`,
+                `${item.raw.username}, ${item.raw.domain}, ${item.raw.password}`,
               )
             }}
           </v-list-item-title>
           <v-list-item-subtitle>
-            {{ truncate(`id: ${data.item.id}, notes: ${data.item.notes}`) }}
+            {{ truncate(`id: ${item.raw.id}, notes: ${item.raw.notes}`) }}
           </v-list-item-subtitle>
-        </v-list-item-content>
+        </v-list-item>
       </template>
     </v-autocomplete>
 
@@ -71,8 +72,8 @@
       v-model="internalValue"
       :items="suggestedValues"
       :label="name"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
     />
 
     <v-autocomplete
@@ -80,8 +81,8 @@
       v-model="internalValue"
       :items="suggestedValues"
       :label="name"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
     />
 
     <v-text-field
@@ -90,8 +91,8 @@
       :rules="rules"
       :label="name"
       :type="type === 'string' ? 'text' : 'number'"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
       required
     />
   </div>
@@ -103,7 +104,7 @@ import FileInput from "@/components/FileInput.vue";
 export default {
   components: { FileInput },
   props: {
-    value: {
+    modelValue: {
       type: [String, Array, Number],
       required: true,
     },
@@ -128,14 +129,18 @@ export default {
       default: "text",
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
-      internalValue: this.value,
+      internalValue: this.modelValue,
     };
   },
   watch: {
+    modelValue(val) {
+      this.internalValue = val;
+    },
     internalValue(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
   },
   methods: {
diff --git a/src/components/EditPageTop.vue b/src/components/EditPageTop.vue
index 7f430af4..033546d0 100644
--- a/src/components/EditPageTop.vue
+++ b/src/components/EditPageTop.vue
@@ -1,22 +1,22 @@
 <template>
-  <portal to="app-bar">
+  <Teleport defer to="#app-bar">
     <div class="v-toolbar__content pt-2" style="width: 100%">
       <v-breadcrumbs :items="breads" />
       <v-spacer />
       <div
-        class="pt-3"
-        style="display: flex; flex-direction: row; align-items: flex-start"
+        style="display: flex; flex-direction: row; align-items: center"
+        class="mr-4"
       >
         <slot name="extra-stuff" />
         <v-btn
           v-if="showDelete && !smallDelete"
           color="error"
-          text
+          variant="text"
           class="mr-2"
           @click="$emit('delete')"
         >
           {{ deleteText }}
-          <v-icon right> fa-trash-alt </v-icon>
+          <v-icon end> fa-trash-alt </v-icon>
         </v-btn>
         <tooltip-button
           v-else-if="showDelete && smallDelete"
@@ -28,12 +28,12 @@
         <v-btn
           v-if="showCopy && Object.keys(copyLink).length > 0 && !smallCopy"
           color="primary"
-          text
+          variant="text"
           class="mr-2"
           :to="copyLink"
         >
           {{ copyText }}
-          <v-icon right> fa-copy </v-icon>
+          <v-icon end> fa-copy </v-icon>
         </v-btn>
         <tooltip-button
           v-else-if="showCopy && Object.keys(copyLink).length > 0 && smallCopy"
@@ -45,7 +45,7 @@
           v-if="showSubmit"
           :disabled="disableSubmit"
           type="submit"
-          class="primary"
+          color="primary"
           :loading="submitLoading"
           @click="$emit('submit')"
         >
@@ -53,7 +53,7 @@
         </v-btn>
       </div>
     </div>
-  </portal>
+  </Teleport>
 </template>
 
 <script>
diff --git a/src/components/ErrorStateAlert.vue b/src/components/ErrorStateAlert.vue
index 124941e6..7cdfade0 100644
--- a/src/components/ErrorStateAlert.vue
+++ b/src/components/ErrorStateAlert.vue
@@ -2,7 +2,7 @@
   <v-alert prominent type="error">
     <v-row align="center">
       <v-col class="grow">
-        {{ message }}
+        {{ displayMessage }}
       </v-col>
       <v-col class="shrink">
         <v-btn @click="$router.go(-1)"> Go back </v-btn>
@@ -25,9 +25,13 @@ export default {
     },
     message: {
       type: String,
-      default() {
-        return `The resource '${this.resourceType}/${this.resourceId}' Not Found.`;
-      },
+      default: "",
+    },
+  },
+  computed: {
+    displayMessage() {
+      if (this.message) return this.message;
+      return `The resource '${this.resourceType}/${this.resourceId}' Not Found.`;
     },
   },
 };
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index 43c5448f..b298d8c9 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -7,20 +7,18 @@
     />
     <v-autocomplete
       v-model="internalValue"
+      v-model:search="search"
       :items="fileItems"
       :loading="isLoading"
-      :search-input.sync="search"
       hide-no-data
-      hide-selected
       clearable
-      cache-items
-      item-text="description"
+      item-title="description"
       item-value="id"
       :label="label"
       placeholder="Start typing to Search"
       prepend-icon="fa-upload"
-      outlined
-      dense
+      variant="outlined"
+      density="compact"
       :return-object="returnObject"
       @click:prepend="showDialog = true"
     />
@@ -35,7 +33,7 @@ import formatBytes from "@/utils/format-bytes";
 export default {
   components: { FileUploadDialog },
   props: {
-    value: {
+    modelValue: {
       type: [String, Array, Number],
       required: true,
     },
@@ -58,9 +56,10 @@ export default {
       default: false,
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
-      internalValue: this.value,
+      internalValue: this.modelValue,
       isLoading: false,
       count: 0,
       entries: [],
@@ -85,9 +84,9 @@ export default {
   },
   watch: {
     internalValue(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
-    value(val) {
+    modelValue(val) {
       this.internalValue = val;
     },
     search() {
diff --git a/src/components/FileUploadDialog.vue b/src/components/FileUploadDialog.vue
index 965ccacc..b1f9243b 100644
--- a/src/components/FileUploadDialog.vue
+++ b/src/components/FileUploadDialog.vue
@@ -14,8 +14,8 @@
                   v-model="file"
                   accept="*/*"
                   :rules="rules"
-                  outlined
-                  dense
+                  variant="outlined"
+                  density="compact"
                 />
               </v-col>
             </v-row>
@@ -24,10 +24,15 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="blue darken-1" text @click.stop="show = false">
+        <v-btn color="blue-darken-1" variant="text" @click.stop="show = false">
           Close
         </v-btn>
-        <v-btn color="blue darken-1" text :loading="loading" @click="submit">
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          :loading="loading"
+          @click="submit"
+        >
           Upload
         </v-btn>
       </v-card-actions>
@@ -40,9 +45,8 @@ import * as downloadApi from "@/api/download-api";
 
 export default {
   name: "FileUploadDialog",
-  components: {},
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -51,6 +55,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ["update:modelValue", "submit"],
   data() {
     return {
       loading: false,
@@ -60,18 +65,17 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value;
+        return this.modelValue;
       },
       set(value) {
-        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
       },
     },
   },
   methods: {
     async submit() {
-      if (!this.$refs.form.validate()) {
-        return;
-      }
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       const formData = new FormData();
       formData.append("file", this.file);
diff --git a/src/components/GeneralForm.vue b/src/components/GeneralForm.vue
index d72da76a..889084f0 100644
--- a/src/components/GeneralForm.vue
+++ b/src/components/GeneralForm.vue
@@ -1,10 +1,5 @@
 <template>
-  <v-form
-    ref="form"
-    v-model="valid"
-    :readonly="readonly"
-    @submit.prevent.native="submit"
-  >
+  <v-form ref="form" v-model="valid" :readonly="readonly" @submit.prevent>
     <v-row
       v-for="field in requiredFields"
       :key="field.name"
@@ -21,11 +16,13 @@
         />
       </v-col>
       <v-col cols="6">
-        <v-subheader>{{ field.description }}</v-subheader>
+        <v-list-subheader>{{ field.description }}</v-list-subheader>
       </v-col>
     </v-row>
 
-    <v-subheader v-if="optionalFields.length > 0">Optional Fields</v-subheader>
+    <v-list-subheader v-if="optionalFields.length > 0"
+      >Optional Fields</v-list-subheader
+    >
     <v-divider v-if="optionalFields.length > 0" class="mb-8" />
     <v-row
       v-for="field in optionalFields"
@@ -43,13 +40,12 @@
         />
       </v-col>
       <v-col cols="6">
-        <v-subheader>{{ field.description }}</v-subheader>
+        <v-list-subheader>{{ field.description }}</v-list-subheader>
       </v-col>
     </v-row>
   </v-form>
 </template>
 <script>
-import Vue from "vue";
 import { useListenerStore } from "@/stores/listener-module";
 import { useBypassStore } from "@/stores/bypass-module";
 import { useCredentialStore } from "@/stores/credential-module";
@@ -75,6 +71,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       form: {},
@@ -180,7 +177,7 @@ export default {
           updatedForm.Bypasses = updatedForm.Bypasses.join(" ");
         }
 
-        this.$emit("input", updatedForm);
+        this.$emit("update:modelValue", updatedForm);
       },
       deep: true,
     },
@@ -203,7 +200,7 @@ export default {
           }
           return map;
         }, {});
-        Vue.set(this, "form", map2);
+        this.form = map2;
       },
     },
     defaultBypasses: {
@@ -222,10 +219,14 @@ export default {
     this.credentialStore.getCredentials();
   },
   methods: {
+    async validate() {
+      const { valid } = await this.$refs.form.validate();
+      return valid;
+    },
     initializeForm(options) {
       this.form = {};
       Object.keys(options).forEach((key) => {
-        this.$set(this.form, key, options[key].value || null);
+        this.form[key] = options[key].value || null;
       });
     },
     tryInitializeBypassesDefaults() {
@@ -242,7 +243,7 @@ export default {
         (typeof current === "string" && current.trim() === "");
       if (!isEmpty) return;
       if (!this.defaultBypasses || this.defaultBypasses.length === 0) return;
-      this.$set(this.form, "Bypasses", [...this.defaultBypasses]);
+      this.form.Bypasses = [...this.defaultBypasses];
       this.initializedBypassesDefaults = true;
     },
     updateFieldVisibility(form, initial = false) {
@@ -257,12 +258,12 @@ export default {
           if (shouldBeVisible && !oldVisibleFields[field.name]) {
             if (!initial) newlyVisibleFields.push(field.name);
           }
-          this.$set(this.visibleFields, field.name, shouldBeVisible);
+          this.visibleFields[field.name] = shouldBeVisible;
         } else {
           if (!this.visibleFields[field.name]) {
             if (!initial) newlyVisibleFields.push(field.name);
           }
-          this.$set(this.visibleFields, field.name, true);
+          this.visibleFields[field.name] = true;
         }
       });
 
diff --git a/src/components/HeaderMenu.vue b/src/components/HeaderMenu.vue
index dc5e0e38..9b269c76 100644
--- a/src/components/HeaderMenu.vue
+++ b/src/components/HeaderMenu.vue
@@ -1,30 +1,37 @@
 <template>
-  <v-menu v-model="show" offset-y :close-on-content-click="false">
-    <template #activator="{ on, attrs }">
-      <v-btn text icon x-small v-bind="attrs" v-on="on">
+  <v-menu v-model="show" :close-on-content-click="false">
+    <template #activator="{ props: activatorProps }">
+      <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
         <v-icon>mdi-format-columns</v-icon>
       </v-btn>
     </template>
     <v-card>
       <v-list style="overflow-y: auto" max-height="400px">
         <v-list-item>
-          <v-checkbox v-model="selectedAll" :label="'Select All'" />
+          <v-checkbox
+            v-model="selectedAll"
+            color="primary"
+            :label="'Select All'"
+          />
         </v-list-item>
         <v-divider class="pb-4" />
         <v-list-item v-for="(item, index) in selectableHeaders" :key="index">
           <v-checkbox
             v-model="selectedHeadersTemp"
-            :label="item.text"
+            color="primary"
+            :label="item.title"
             :value="item"
           />
         </v-list-item>
       </v-list>
       <v-divider />
       <v-card-actions>
-        <v-btn text color="error" @click="resetHeaders"> Reset </v-btn>
+        <v-btn variant="text" color="error" @click="resetHeaders">
+          Reset
+        </v-btn>
         <v-spacer />
-        <v-btn text @click="show = false"> Cancel </v-btn>
-        <v-btn text @click="submitHeaderForm"> Save </v-btn>
+        <v-btn variant="text" @click="show = false"> Cancel </v-btn>
+        <v-btn variant="text" @click="submitHeaderForm"> Save </v-btn>
       </v-card-actions>
     </v-card>
   </v-menu>
diff --git a/src/components/InfoViewer.vue b/src/components/InfoViewer.vue
index ce7ee9f0..51f63314 100644
--- a/src/components/InfoViewer.vue
+++ b/src/components/InfoViewer.vue
@@ -5,10 +5,10 @@
       class="collapse"
     >
       <v-expansion-panel>
-        <v-expansion-panel-header v-if="Object.keys(info).length > 0">
+        <v-expansion-panel-title v-if="Object.keys(info).length > 0">
           {{ info.description }}
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
           <div style="text-align: left">
             <div style="margin-bottom: 10px">
               <b class="mr-2">Authors:</b>
@@ -35,7 +35,7 @@
               {{ detail.value }}
             </span>
           </div>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
   </div>
diff --git a/src/components/ListPageTop.vue b/src/components/ListPageTop.vue
index 7b231741..d52678e6 100644
--- a/src/components/ListPageTop.vue
+++ b/src/components/ListPageTop.vue
@@ -1,32 +1,30 @@
 <template>
-  <portal to="app-bar">
+  <Teleport defer to="#app-bar">
     <div class="v-toolbar__content pt-2" style="width: 100%">
       <v-breadcrumbs :items="breads" />
       <v-spacer />
-      <div class="pt-2">
+      <div style="display: flex; flex-direction: row; align-items: center">
         <slot name="extra-stuff" />
-      </div>
-      <div>
         <v-btn
           v-if="showDelete"
           color="error"
-          text
+          variant="text"
           class="mr-2"
           @click="$emit('delete')"
         >
           {{ deleteText }}
-          <v-icon right> fa-trash-alt </v-icon>
+          <v-icon end> fa-trash-alt </v-icon>
         </v-btn>
         <v-btn
           v-if="showRefresh && !isAutoRefresh"
           :disabled="refreshLoading"
           color="primary"
-          text
+          variant="text"
           class="mr-2"
           @click="$emit('refresh')"
         >
           {{ refreshText }}
-          <v-icon right> fa-redo {{ refreshLoading ? "fa-spin" : "" }} </v-icon>
+          <v-icon end> fa-redo {{ refreshLoading ? "fa-spin" : "" }} </v-icon>
         </v-btn>
         <tooltip-button-toggle
           v-if="showRefresh && isAutoRefresh"
@@ -43,11 +41,11 @@
           @click="$emit('create')"
         >
           {{ createText }}
-          <v-icon right> fa-plus-square </v-icon>
+          <v-icon end> fa-plus-square </v-icon>
         </v-btn>
       </div>
     </div>
-  </portal>
+  </Teleport>
 </template>
 
 <script>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 3ead211b..2e73d129 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,16 +1,26 @@
 <template>
   <div class="hello">
-    <v-form class="inputs" @submit.prevent.native="submit">
-      <v-text-field v-model="form.url" label="Url" dense outlined />
-      <v-text-field v-model="form.username" label="Username" dense outlined />
+    <v-form class="inputs" @submit.prevent="submit">
+      <v-text-field
+        v-model="form.url"
+        label="Url"
+        density="compact"
+        variant="outlined"
+      />
+      <v-text-field
+        v-model="form.username"
+        label="Username"
+        density="compact"
+        variant="outlined"
+      />
       <v-text-field
         v-model="form.password"
         label="Password"
         :type="showPassword ? 'text' : 'password'"
-        :append-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
-        outlined
-        dense
-        @click:append="showPassword = !showPassword"
+        :append-inner-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
+        variant="outlined"
+        density="compact"
+        @click:append-inner="showPassword = !showPassword"
       />
       <v-checkbox v-model="rememberMe" label="Remember URL and Username" />
       <v-btn color="primary" type="submit" :loading="loading" rounded>
@@ -25,6 +35,7 @@ import { useApplicationStore } from "@/stores/application-module";
 
 export default {
   name: "Login",
+  inject: ["snack"],
   data() {
     return {
       loading: false,
@@ -52,7 +63,7 @@ export default {
     loginError(val) {
       if (val.length > 0) {
         this.loading = false;
-        this.$snack.error(`Error Logging In: ${val}`);
+        this.snack.error(`Error Logging In: ${val}`);
       }
     },
   },
diff --git a/src/components/NotificationBell.vue b/src/components/NotificationBell.vue
index 9aa4b1be..4f57cb7a 100644
--- a/src/components/NotificationBell.vue
+++ b/src/components/NotificationBell.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="pt-2">
-    <v-menu v-model="menu" offset-y>
-      <template #activator="{ on, attrs }">
-        <v-btn class="text-none mr-5" stacked icon v-bind="attrs" v-on="on">
+    <v-menu v-model="menu">
+      <template #activator="{ props: activatorProps }">
+        <v-btn
+          class="text-none mr-5"
+          variant="text"
+          icon
+          size="small"
+          v-bind="activatorProps"
+        >
           <v-badge v-if="unreadCount > 0" :content="unreadCount" color="error">
             <v-icon>mdi-bell-outline</v-icon>
           </v-badge>
@@ -17,28 +23,31 @@
             item.read ? '' : 'background-color: rgba(118, 127, 134, 0.5);'
           "
         >
-          <v-list-item-content>
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
-            <v-list-item-subtitle>{{ item.text }}</v-list-item-subtitle>
-          </v-list-item-content>
-          <v-list-item-action>
-            <v-btn v-if="item.route" color="primary" text :to="item.route">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+          <v-list-item-subtitle>{{ item.text }}</v-list-item-subtitle>
+          <template #append>
+            <v-btn
+              v-if="item.route"
+              color="primary"
+              variant="text"
+              :to="item.route"
+            >
               {{ item.buttonText }}
             </v-btn>
-          </v-list-item-action>
+          </template>
         </v-list-item>
         <v-list-item v-if="notifications.length === 0">
-          <v-list-item-content>
-            <v-list-item-title>No notifications</v-list-item-title>
-          </v-list-item-content>
+          <v-list-item-title>No notifications</v-list-item-title>
         </v-list-item>
       </v-list>
       <v-divider />
       <v-list>
-        <v-list-item v-if="notifications.length > 0">
-          <v-list-item-content style="cursor: pointer" @click="toNotifications">
-            <v-list-item-title>View All</v-list-item-title>
-          </v-list-item-content>
+        <v-list-item
+          v-if="notifications.length > 0"
+          style="cursor: pointer"
+          @click="toNotifications"
+        >
+          <v-list-item-title>View All</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>
@@ -73,7 +82,6 @@ export default {
       }
     },
   },
-  mounted() {},
   methods: {
     toNotifications() {
       this.$router.push({ name: "notifications" });
diff --git a/src/components/SideNav.vue b/src/components/SideNav.vue
index 6540709b..6883a5f0 100644
--- a/src/components/SideNav.vue
+++ b/src/components/SideNav.vue
@@ -2,66 +2,51 @@
   <div>
     <!-- I drew some inspiration for the sidenav from -->
     <!-- https://dribbble.com/shots/22474831-Dashboard-Sidebar-Navigation-Taurus -->
-    <!-- Future improvements -->
-    <!-- When mini, parent menu item should be selected -->
-    <!-- Agents/{id} should also trigger the active submenu -->
-    <v-navigation-drawer app permanent :mini-variant="mini">
-      <v-list dense nav>
+    <v-navigation-drawer permanent :rail="mini">
+      <v-list v-model:opened="openedGroups" density="compact" nav>
         <v-list-item class="px-0">
-          <v-list-item-avatar>
-            <img src="../../src/assets/icon.png" alt="Starkiller Icon" />
-          </v-list-item-avatar>
+          <template #prepend>
+            <v-avatar size="40">
+              <v-img :src="iconSrc" alt="Starkiller Icon" cover />
+            </v-avatar>
+          </template>
 
-          <v-list-item-content>
+          <template v-if="!mini">
             <v-list-item-title>Starkiller: {{ version }}</v-list-item-title>
             <v-list-item-subtitle
               >Empire: {{ empireVersion }}</v-list-item-subtitle
             >
-          </v-list-item-content>
-          <v-list-item-icon>
-            <v-btn icon @click.stop="toggle">
+          </template>
+          <template v-if="!mini" #append>
+            <v-btn variant="text" icon @click.stop="toggle">
               <v-icon>mdi-page-first</v-icon>
             </v-btn>
-          </v-list-item-icon>
-        </v-list-item>
-        <v-list-item v-if="mini">
-          <v-list-item-icon>
-            <v-btn icon @click.stop="toggle">
-              <v-icon>mdi-page-last</v-icon>
-            </v-btn>
-          </v-list-item-icon>
+          </template>
         </v-list-item>
+        <div v-if="mini" class="d-flex justify-center py-1">
+          <v-btn variant="text" icon size="small" @click.stop="toggle">
+            <v-icon>mdi-page-last</v-icon>
+          </v-btn>
+        </div>
         <v-divider class="pb-3" />
 
-        <template v-for="item in items">
+        <template v-for="item in items" :key="item.title">
           <!-- If there are no subItems, just a regular v-list-item is used -->
           <!-- for mini and full -->
-          <v-list-item
-            v-if="!item.items"
-            :key="item.title"
-            link
-            :to="{ name: item.pathName }"
-          >
-            <v-list-item-icon>
+          <v-list-item v-if="!item.items" link :to="{ name: item.pathName }">
+            <template #prepend>
               <v-icon>{{ item.icon }}</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.title }}
-              </v-list-item-title>
-            </v-list-item-content>
+            </template>
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
           </v-list-item>
           <!-- If there are subItems and in full mode, us a list group -->
-          <v-list-group
-            v-else-if="item.items && !mini"
-            :key="item.title + 'group'"
-            :value="isActiveGroup(item)"
-          >
-            <template #activator>
-              <v-list-item-title>{{ item.title }}</v-list-item-title>
-            </template>
-            <template #prependIcon>
-              <v-icon>{{ item.icon }}</v-icon>
+          <v-list-group v-else-if="item.items && !mini" :value="item.title">
+            <template #activator="{ props: activatorProps }">
+              <v-list-item v-bind="activatorProps" :prepend-icon="item.icon">
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
+              </v-list-item>
             </template>
             <v-list-item
               v-for="subItem in item.items"
@@ -70,43 +55,36 @@
               :to="{ name: subItem.pathName }"
               class="pl-4 sub-item"
             >
-              <v-list-item-icon>
+              <template #prepend>
                 <v-icon>{{ subItem.icon }}</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ subItem.title }}
-                </v-list-item-title>
-              </v-list-item-content>
+              </template>
+              <v-list-item-title>
+                {{ subItem.title }}
+              </v-list-item-title>
             </v-list-item>
           </v-list-group>
 
           <!-- If there are subItems and in mini mode, use a menu on hover -->
           <v-menu
             v-else
-            :key="item.title + 'mini'"
             v-model="menu[item.title]"
             open-on-hover
             transition="scale-transition"
-            close-delay="1"
-            right
-            offset-x
+            close-delay="150"
+            location="end"
           >
-            <template #activator="{ on, attrs }">
+            <template #activator="{ props: activatorProps }">
               <v-list-item
-                v-bind="attrs"
-                :value="isActiveGroup(item)"
-                v-on="on"
+                v-bind="activatorProps"
+                :active="isGroupActive(item)"
               >
-                <template #activator>
-                  <v-list-item-title>{{ item.title }}</v-list-item-title>
-                </template>
-                <v-list-item-icon>
+                <template #prepend>
                   <v-icon>{{ item.icon }}</v-icon>
-                </v-list-item-icon>
+                </template>
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
               </v-list-item>
             </template>
-            <v-list dense>
+            <v-list density="compact">
               <v-list-item
                 v-for="subItem in item.items"
                 :key="subItem.title"
@@ -114,14 +92,12 @@
                 :to="{ name: subItem.pathName }"
                 class="pl-8 sub-item"
               >
-                <v-list-item-icon>
+                <template #prepend>
                   <v-icon>{{ subItem.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ subItem.title }}
-                  </v-list-item-title>
-                </v-list-item-content>
+                </template>
+                <v-list-item-title>
+                  {{ subItem.title }}
+                </v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
@@ -134,14 +110,17 @@
 <script>
 import { mapState } from "pinia";
 import { useApplicationStore } from "@/stores/application-module";
+import iconSrc from "@/assets/icon.png";
 import { version } from "../../package.json";
 
 export default {
   data() {
     return {
       version,
+      iconSrc,
       menu: {},
       mini: true,
+      openedGroups: [],
       items: [
         {
           title: "Listeners",
@@ -235,16 +214,43 @@ export default {
   },
   computed: {
     ...mapState(useApplicationStore, ["empireVersion"]),
-    isActiveGroup() {
-      return (group) =>
-        !this.mini &&
-        group.items.some((subItem) => subItem.pathName === this.$route.name);
+  },
+  watch: {
+    "$route.name": {
+      immediate: true,
+      handler() {
+        this.updateOpenedGroups();
+      },
+    },
+    mini() {
+      this.updateOpenedGroups();
     },
   },
   methods: {
     toggle() {
       this.mini = !this.mini;
     },
+    isGroupActive(item) {
+      if (!item.items) return false;
+      return item.items.some((subItem) => {
+        const resolved = this.$router.resolve({ name: subItem.pathName });
+        return this.$route.path.startsWith(resolved.path);
+      });
+    },
+    updateOpenedGroups() {
+      if (this.mini) return;
+      const activeGroups = this.items
+        .filter((item) => this.isGroupActive(item))
+        .map((item) => item.title);
+      if (
+        activeGroups.length > 0 &&
+        !activeGroups.every((g) => this.openedGroups.includes(g))
+      ) {
+        this.openedGroups = [
+          ...new Set([...this.openedGroups, ...activeGroups]),
+        ];
+      }
+    },
   },
 };
 </script>
@@ -258,13 +264,13 @@ export default {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.v-list-item__icon {
+.v-list-item__prepend > .v-icon {
   justify-content: center;
   width: 27px;
   min-width: 27px;
 }
 
-.v-icon {
+.v-navigation-drawer .v-icon {
   width: 27px;
   height: 24px;
 }
diff --git a/src/components/SocketNotifications.vue b/src/components/SocketNotifications.vue
index a5bd8580..b08b6313 100644
--- a/src/components/SocketNotifications.vue
+++ b/src/components/SocketNotifications.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chat v-if="socket && chatWidget" :socket="socket" />
+    <chat v-if="socket && chatWidget" ref="chat" :socket="socket" />
   </div>
 </template>
 
@@ -15,9 +15,8 @@ import { useAgentStore } from "@/stores/agent-module";
 
 export default {
   name: "SocketNotifications",
-  components: {
-    Chat,
-  },
+  components: { Chat },
+  inject: ["snack", "bell"],
   data() {
     return {
       socket: null,
@@ -82,7 +81,7 @@ export default {
       this.setAgentHandlers();
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.disconnect();
   },
   methods: {
@@ -99,6 +98,7 @@ export default {
       });
     },
     disconnect() {
+      if (!this.socket) return;
       console.log("Closing Socket");
       this.socket.close();
       this.socket = null;
@@ -112,7 +112,7 @@ export default {
           }
 
           this.socket.on(`agents/${sessionId}/task`, (data) => {
-            this.$bell.push({
+            this.bell.push({
               title: `Task Results for Agent ${data.agent_id}`,
               text: `${data.output?.substring(0, 50)}...`,
               route: {
@@ -128,7 +128,7 @@ export default {
     setPluginHandlers() {
       this.plugins.forEach((plugin) => {
         this.socket.on(`plugins/${plugin.name}/notifications`, (data) => {
-          this.$bell.push({
+          this.bell.push({
             title: `${plugin.name}`,
             text: `${data.message}`,
             // todo instead of color we could add an icon to bells
@@ -139,7 +139,7 @@ export default {
     },
     setHandlers() {
       this.socket.on("listeners/new", (data) => {
-        this.$bell.push({
+        this.bell.push({
           title: "New Listener",
           text: `New Listener '${data.name}' started!`,
           route: {
@@ -151,7 +151,7 @@ export default {
       });
 
       this.socket.on("agents/new", (data) => {
-        this.$bell.push({
+        this.bell.push({
           title: "New Agent",
           text: `New Agent '${data.session_id}' callback!`,
           buttonText: "View",
@@ -165,12 +165,12 @@ export default {
 
       this.socket.on("reconnect_failed", () => {
         console.log("Failed to connect to SocketIO");
-        this.$snack.error("Failed to connect to SocketIO");
+        this.snack.error("Failed to connect to SocketIO");
       });
       this.socket.on("connect_error", () => {
         console.log("SocketIO Connection Error, retrying.");
         // a bit too noisy to popup on every reconnect attempt.
-        // this.$snack.warn('SocketIO Connection Error, retrying.');
+        // this.snack.warn('SocketIO Connection Error, retrying.');
       });
     },
     getColorForPluginMessage(message) {
diff --git a/src/components/StarkillerSnackbar.vue b/src/components/StarkillerSnackbar.vue
index 1cbce5f0..9b1dad9c 100644
--- a/src/components/StarkillerSnackbar.vue
+++ b/src/components/StarkillerSnackbar.vue
@@ -3,13 +3,11 @@
     v-model="notification.enabled"
     :color="notification.color"
     transition="scroll-y-transition"
-    left
-    bottom
-    app
+    location="bottom start"
   >
     {{ notification.text }}
 
-    <template #action="{ attrs }">
+    <template #actions>
       <v-btn
         v-if="notification.showButton"
         :color="
@@ -19,8 +17,7 @@
             ? 'white'
             : 'orange darken-2'
         "
-        text
-        v-bind="attrs"
+        variant="text"
         @click="notification.buttonAction"
       >
         {{ notification.buttonText }}
@@ -29,7 +26,7 @@
         v-if="notification.dismissable"
         class="ml-2"
         icon
-        x-small
+        size="x-small"
         @click="notification.enabled = false"
       >
         <v-icon>fa-times</v-icon>
diff --git a/src/components/TagChip.vue b/src/components/TagChip.vue
index 4f88e331..e63a56ea 100644
--- a/src/components/TagChip.vue
+++ b/src/components/TagChip.vue
@@ -3,22 +3,20 @@
     v-model="menu"
     :close-on-content-click="false"
     :close-on-click="false"
-    bottom
-    right
+    location="bottom end"
     transition="scale-transition"
     origin="top left"
   >
-    <template #activator="{ on }">
+    <template #activator="{ props: activatorProps }">
       <v-chip
         :color="internalTag.color"
-        text-color="white"
-        class="mt-4 mr-1 ml-1 mb-4"
-        :close="close"
+        class="mt-4 mr-1 ml-1 mb-4 text-white"
+        :closable="close"
+        v-bind="activatorProps"
         @click:close="deleteTag(internalTag)"
-        v-on="on"
       >
         {{ `${tag.name}:${tag.value}` }}
-        <v-icon v-if="customIcon" right>
+        <v-icon v-if="customIcon" end>
           {{ customIcon }}
         </v-icon>
       </v-chip>
@@ -32,16 +30,16 @@
           <v-text-field
             ref="nameField"
             v-model="internalTag.name"
-            outlined
-            dense
+            variant="outlined"
+            density="compact"
             label="Name"
             :rules="rules.noColon"
             required
           />
           <v-text-field
             v-model="internalTag.value"
-            outlined
-            dense
+            variant="outlined"
+            density="compact"
             label="Value"
             :rules="rules.noColon"
             required
@@ -56,7 +54,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn color="green" text @click="updateTag(internalTag)">
+          <v-btn color="green" variant="text" @click="updateTag(internalTag)">
             Update
           </v-btn>
         </v-card-actions>
@@ -121,10 +119,9 @@ export default {
     deleteTag(tag) {
       this.$emit("delete-tag", tag);
     },
-    updateTag(tag) {
-      if (!this.$refs.form.validate()) {
-        return;
-      }
+    async updateTag(tag) {
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
       this.$emit("update-tag", tag);
       this.menu = false;
       this.$refs.form.resetValidation();
diff --git a/src/components/TechniqueChips.vue b/src/components/TechniqueChips.vue
index c61ddf61..98672fd9 100644
--- a/src/components/TechniqueChips.vue
+++ b/src/components/TechniqueChips.vue
@@ -4,7 +4,7 @@
     <v-chip
       v-for="tech in techniques.filter((t) => t !== '')"
       :key="tech"
-      small
+      size="small"
       :href="getTechniqueUrl(tech)"
       target="_blank"
       rel="noopener noreferrer"
diff --git a/src/components/TooltipButton.vue b/src/components/TooltipButton.vue
index 29bb5227..3bcb9c81 100644
--- a/src/components/TooltipButton.vue
+++ b/src/components/TooltipButton.vue
@@ -1,15 +1,14 @@
 <template>
-  <v-tooltip bottom>
-    <template #activator="{ on }">
+  <v-tooltip location="bottom">
+    <template #activator="{ props: activatorProps }">
       <v-btn
         :color="flat ? '' : color"
         :to="to"
         :disabled="disabled"
         class="mr-5"
         icon
-        :small="!xSmall"
-        :x-small="xSmall"
-        v-on="on"
+        :size="xSmall ? 'x-small' : 'small'"
+        v-bind="activatorProps"
         @click="$emit('click')"
       >
         <v-icon :style="padLeft !== 0 ? `padding-left: ${padLeft}px` : ''">
diff --git a/src/components/TooltipButtonToggle.vue b/src/components/TooltipButtonToggle.vue
index ad10623a..0ded7562 100644
--- a/src/components/TooltipButtonToggle.vue
+++ b/src/components/TooltipButtonToggle.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-tooltip bottom>
-    <template #activator="{ on }">
+  <v-tooltip location="bottom">
+    <template #activator="{ props: activatorProps }">
       <v-btn-toggle v-model="internalValue" class="mr-5">
-        <v-btn :value="true" v-on="on">
-          <v-icon left>
+        <v-btn :value="true" v-bind="activatorProps">
+          <v-icon start>
             {{ icon }}
           </v-icon>
           <span>{{ buttonText }}</span>
@@ -18,7 +18,7 @@
 export default {
   name: "TooltipButtonToggle",
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: false,
     },
@@ -35,13 +35,14 @@ export default {
       required: true,
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       internalValue: false,
     };
   },
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
       handler(newValue) {
         this.internalValue = newValue;
@@ -49,7 +50,7 @@ export default {
     },
     internalValue: {
       handler(newValue) {
-        this.$emit("input", newValue);
+        this.$emit("update:modelValue", !!newValue);
       },
     },
   },
diff --git a/src/components/agents/AgentDownloadDialog.vue b/src/components/agents/AgentDownloadDialog.vue
index 7d6d15fb..e0603f16 100644
--- a/src/components/agents/AgentDownloadDialog.vue
+++ b/src/components/agents/AgentDownloadDialog.vue
@@ -13,8 +13,8 @@
                   v-model="pathToFile"
                   label="path/to/file"
                   :rules="rules['pathToFile']"
-                  outlined
-                  dense
+                  variant="outlined"
+                  density="compact"
                   required
                 />
               </v-col>
@@ -24,10 +24,15 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="blue darken-1" text @click.stop="show = false">
+        <v-btn color="blue-darken-1" variant="text" @click.stop="show = false">
           Close
         </v-btn>
-        <v-btn color="blue darken-1" text :loading="loading" @click="submit">
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          :loading="loading"
+          @click="submit"
+        >
           Save
         </v-btn>
       </v-card-actions>
@@ -38,12 +43,13 @@
 <script>
 export default {
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     loading: {
       type: Boolean,
       default: false,
     },
   },
+  emits: ["update:modelValue", "submit"],
   data() {
     return {
       pathToFile: "",
@@ -55,15 +61,15 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value;
+        return this.modelValue;
       },
       set(value) {
-        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
       },
     },
   },
   watch: {
-    value(val) {
+    modelValue(val) {
       if (val === false) {
         this.$refs.form.reset();
       }
@@ -71,9 +77,8 @@ export default {
   },
   methods: {
     async submit() {
-      if (!this.$refs.form.validate()) {
-        return;
-      }
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       this.$emit("submit", { pathToFile: this.pathToFile });
     },
diff --git a/src/components/agents/AgentExecuteModule.vue b/src/components/agents/AgentExecuteModule.vue
index fc910944..bfc02ed1 100644
--- a/src/components/agents/AgentExecuteModule.vue
+++ b/src/components/agents/AgentExecuteModule.vue
@@ -15,7 +15,9 @@
       <technique-chips :techniques="selectedItem.techniques" />
 
       <v-alert
-        v-if="reset && modules.length > 0 && autocompleteOptions.length === 0"
+        v-if="
+          initialLoad && modules.length > 0 && autocompleteOptions.length === 0
+        "
         type="error"
       >
         No modules are compatible with all selected agents.
@@ -26,21 +28,21 @@
           <v-autocomplete
             v-model="selectedModule"
             :items="autocompleteOptions"
-            item-text="text"
+            item-title="text"
             item-value="value"
-            :loading="!reset"
+            :loading="!initialLoad"
             placeholder="Search module..."
-            outlined
-            dense
+            variant="outlined"
+            density="compact"
             clearable
-            @change="handleSelect"
+            @update:model-value="handleSelect"
           />
         </v-col>
 
         <v-col cols="1" class="d-flex align-center" style="margin-top: -25px">
           <tooltip-button
             :icon="showTreeDialog ? 'mdi-folder-open' : 'mdi-folder'"
-            color="grey lighten-2"
+            color="grey-lighten-2"
             tooltip="Browse modules by folder"
             @click="toggleTree"
           />
@@ -54,20 +56,23 @@
           </v-card-title>
           <v-card-text>
             <v-treeview
+              v-model:activated="treeSelected"
+              v-model:opened="treeOpen"
               :items="treeOptions"
               open-on-click
               activatable
-              :active.sync="treeSelected"
-              :open.sync="treeOpen"
-              item-key="id"
-              item-text="name"
+              item-value="id"
+              item-title="name"
               item-children="children"
-              @update:active="handleTreeSelect"
+              @update:activated="handleTreeSelect"
             />
           </v-card-text>
           <v-card-actions>
             <v-spacer />
-            <v-btn text color="primary" @click="showTreeDialog = false"
+            <v-btn
+              variant="text"
+              color="primary"
+              @click="showTreeDialog = false"
               >Close</v-btn
             >
           </v-card-actions>
@@ -104,7 +109,8 @@
       </div>
 
       <general-form
-        v-if="reset"
+        v-if="initialLoad"
+        :key="selectedModule"
         ref="generalform"
         v-model="form"
         :options="moduleOptions"
@@ -126,10 +132,10 @@
           </v-card-title>
           <v-card-text>
             <v-data-table
-              dense
+              density="compact"
               :items="results"
               :headers="headers"
-              :item-class="rowClass"
+              :row-props="getRowProps"
             >
               <template #item.agent="{ item }">
                 <div>
@@ -155,7 +161,11 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer />
-            <v-btn color="blue darken-1" text @click="showDialog = false">
+            <v-btn
+              color="blue-darken-1"
+              variant="text"
+              @click="showDialog = false"
+            >
               Okay
             </v-btn>
           </v-card-actions>
@@ -180,6 +190,7 @@ export default {
     TechniqueChips,
     ErrorStateAlert,
   },
+  inject: ["snack"],
   props: {
     agents: {
       type: Array,
@@ -201,13 +212,13 @@ export default {
   data() {
     return {
       loading: false,
+      initialLoad: false,
       selectedModule: "",
       selectedItem: {},
       results: [],
-      reset: true,
       headers: [
-        { text: "Agent", value: "agent" },
-        { text: "Result", value: "result" },
+        { title: "Agent", key: "agent" },
+        { title: "Result", key: "result" },
       ],
       showDialog: false,
       form: {},
@@ -371,6 +382,7 @@ export default {
   },
   async mounted() {
     await this.moduleStore.getModules();
+    this.initialLoad = true;
   },
   methods: {
     toggleTree() {
@@ -379,22 +391,14 @@ export default {
     async handleSelect(item) {
       this.errorState = false;
       if (!item) {
-        this.reset = false;
         this.selectedItem = {};
-        setTimeout(() => {
-          this.reset = true;
-        }, 500);
         return;
       }
       const results = this.modules.find((el) => el.id === item);
-      this.reset = false;
       this.selectedItem = results || {};
       if (!Object.keys(this.selectedItem).length) {
         this.errorState = true;
       }
-      setTimeout(() => {
-        this.reset = true;
-      }, 500);
     },
     handleTreeSelect(selected) {
       if (selected.length > 0) {
@@ -407,17 +411,19 @@ export default {
         }
       }
     },
-    rowClass(item) {
-      return item.status === "rejected" ? "red" : "";
+    getRowProps({ item }) {
+      return { class: item.status === "rejected" ? "red" : "" };
     },
     emitModuleChange(newVal) {
       this.$emit("moduleChange", newVal);
     },
-    validate() {
-      return this.$refs.generalform.$refs.form.validate();
+    async validate() {
+      return this.$refs.generalform.validate();
     },
     async create() {
-      if (this.agents.length < 1 || this.loading || !this.validate()) return;
+      if (this.agents.length < 1 || this.loading) return;
+      const valid = await this.validate();
+      if (!valid) return;
       this.loading = true;
       const result = await Promise.allSettled(
         this.agents.map((agent) =>
@@ -441,20 +447,20 @@ export default {
           { rejected: [], fulfilled: [] },
         );
         if (this.agents.length > 1) {
-          this.$snack.warn(
+          this.snack.warn(
             `Module failed to execute for ${split.rejected.length} out of ${this.agents.length} agents.`,
           );
           this.results = result;
           this.showDialog = true;
         } else {
-          this.$snack.error(`Error: ${result[0].reason.error}`);
+          this.snack.error(`Error: ${result[0].reason.error}`);
         }
       } else {
         const displayName =
           this.agents.length > 1
             ? `${this.agents.length} agents.`
             : `${this.agents[0].name}`;
-        this.$snack.info(`Module execution queued for ${displayName}`);
+        this.snack.info(`Module execution queued for ${displayName}`);
         this.selectedItem = {};
         this.selectedModule = "";
         this.$emit("submitted");
diff --git a/src/components/agents/AgentFileBrowser.vue b/src/components/agents/AgentFileBrowser.vue
index bf0cd749..833c5caa 100644
--- a/src/components/agents/AgentFileBrowser.vue
+++ b/src/components/agents/AgentFileBrowser.vue
@@ -13,24 +13,24 @@
     />
     <v-treeview
       ref="treeview"
-      dense
+      v-model:opened="open"
+      density="compact"
       hoverable
       open-on-click
-      item-key="id"
+      item-value="id"
       :load-children="debouncedLoadChildren"
-      :open.sync="open"
       :items="tree"
     >
-      <template #label="{ item, open: isOpen }">
+      <template #title="{ item }">
         <v-btn
-          style="margin-left: -15px; width: 100%"
-          class="text-left"
-          text
+          :data-tree-id="item.id"
+          style="margin-left: -15px; width: 100%; justify-content: flex-start"
+          variant="text"
           @contextmenu="show(item, $event)"
         >
           <div style="display: flex; justify-content: flex-start">
             <v-icon v-if="!item.file">
-              {{ isOpen ? "mdi-folder-open" : "mdi-folder" }}
+              {{ open.includes(item.id) ? "mdi-folder-open" : "mdi-folder" }}
             </v-icon>
             <v-icon v-else>
               {{ files[item.file] || "mdi-file" }}
@@ -42,11 +42,8 @@
     </v-treeview>
     <v-menu
       v-model="showMenu"
-      :position-x="menuPosition.x"
-      :position-y="menuPosition.y"
+      :target="[menuPosition.x, menuPosition.y]"
       close-on-content-click
-      absolute
-      offset-y
     >
       <v-list>
         <v-list-item
@@ -54,7 +51,7 @@
           :key="menuItem.id"
           @click="clickAction(menuItem.id)"
         >
-          <v-list-item-content>{{ menuItem.name }}</v-list-item-content>
+          <v-list-item-title>{{ menuItem.name }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>
@@ -62,7 +59,7 @@
 </template>
 
 <script>
-import Vue from "vue";
+import { nextTick } from "vue";
 import * as agentApi from "@/api/agent-api";
 import * as agentTaskApi from "@/api/agent-task-api";
 import debounce from "lodash.debounce";
@@ -73,6 +70,7 @@ export default {
   components: {
     ExecuteModuleDialog,
   },
+  inject: ["snack"],
   props: {
     agent: {
       type: Object,
@@ -263,7 +261,7 @@ export default {
         }
 
         if (!complete) {
-          this.$snack.error(
+          this.snack.error(
             "Agent didn't respond in time. Please try again later.",
           );
         }
@@ -275,34 +273,49 @@ export default {
     },
     async clickAction(action) {
       if (action === "open") {
+        // Click the actual treeview item to trigger Vuetify's internal
+        // expand pipeline (including the loading animation)
+        const treeEl = this.$refs.treeview?.$el;
+        if (treeEl) {
+          const btn = Array.from(
+            treeEl.querySelectorAll("[data-tree-id]"),
+          ).find((el) => el.dataset.treeId === String(this.selected.id));
+          const treeItem = btn?.closest(".v-treeview-item");
+          if (treeItem) {
+            treeItem.click();
+            return;
+          }
+        }
+        // Fallback: open without loading animation
+        console.warn(
+          "[Starkiller] Treeview DOM click failed, using fallback open",
+        );
         this.open.push(this.selected.id);
+        this.debouncedLoadChildren(this.selected);
       } else if (action === "close") {
         this.open.splice(
           this.open.findIndex((id) => id === this.selected.id),
           1,
         );
       } else if (action === "refresh") {
-        // Hackiness to get refreshes to work properly. Have to force the node to think it hasn't
-        // been loaded. https://github.com/vuetifyjs/vuetify/issues/10587
+        // Force refresh: clear children and re-open to trigger loadChildren
         this.selected.children = [];
 
-        const vueObj = this.$refs.treeview.nodes[this.selected.id];
         this.open.splice(
           this.open.findIndex((id) => id === this.selected.id),
           1,
         );
 
-        await Vue.nextTick();
+        await nextTick();
 
-        vueObj.vnode.hasLoaded = false;
         this.force[this.selected.id] = true;
 
-        await Vue.nextTick();
+        await nextTick();
 
         this.open.push(this.selected.id);
       } else if (action === "download") {
         agentTaskApi.downloadFile(this.agent.session_id, this.selected.path);
-        this.$snack.success(
+        this.snack.success(
           `Tasked ${this.agent.session_id} for download ${this.selected.path}`,
         );
       } else if (action === "zip") {
@@ -358,8 +371,7 @@ export default {
         return Promise.resolve();
       }
       if (!stopTrying && !this.readOnly) {
-        console.log(stopTrying, this.readOnly);
-        this.$snack.success(
+        this.snack.success(
           `Attempting to retrieve directory: ${a.path} with id ${a.id}`,
         );
         const task = await this.scrapeDirectory(a.path);
@@ -371,7 +383,6 @@ export default {
           await pause(6000);
           // eslint-disable-next-line no-await-in-loop
           if (await this.checkTaskComplete(task.id)) {
-            console.log("task complete", task.id);
             complete = true;
             break;
           }
@@ -379,7 +390,7 @@ export default {
         }
 
         if (!complete) {
-          this.$snack.error(
+          this.snack.error(
             "Agent didn't respond in time. Please try again later.",
           );
         }
@@ -426,6 +437,9 @@ export default {
 
 <style lang="scss">
 .v-treeview {
+  .v-list-item-title {
+    text-align: left;
+  }
   .v-btn__content {
     div {
       align-items: center;
diff --git a/src/components/agents/AgentForm.vue b/src/components/agents/AgentForm.vue
index a4bdb450..8f89da9e 100644
--- a/src/components/agents/AgentForm.vue
+++ b/src/components/agents/AgentForm.vue
@@ -10,7 +10,7 @@
       <click-to-edit
         label="Session ID"
         :editable="false"
-        :value="form.session_id"
+        :model-value="form.session_id"
       />
       <click-to-edit
         v-model="form.name"
@@ -21,22 +21,22 @@
       />
       <click-to-edit
         label="External IP"
-        :value="form.external_ip"
+        :model-value="form.external_ip"
         :editable="false"
       />
       <click-to-edit
         label="Internal IP"
-        :value="form.internal_ip"
+        :model-value="form.internal_ip"
         :editable="false"
       />
       <click-to-edit
         label="Host Name"
-        :value="form.hostname"
+        :model-value="form.hostname"
         :editable="false"
       />
       <click-to-edit
         label="Username"
-        :value="form.username"
+        :model-value="form.username"
         :editable="false"
       />
       <click-to-edit
@@ -67,12 +67,12 @@
       />
       <click-to-edit
         label="Check In Time"
-        :value="moment(form.checkin_time).fromNow()"
+        :model-value="moment(form.checkin_time).fromNow()"
         :editable="false"
       />
       <click-to-edit
         label="Last Seen Time"
-        :value="moment(form.lastseen_time).fromNow()"
+        :model-value="moment(form.lastseen_time).fromNow()"
         :editable="false"
       />
       <click-to-edit
@@ -101,41 +101,44 @@
       />
       <click-to-edit
         label="OS Details"
-        :value="form.os_details"
+        :model-value="form.os_details"
         :editable="false"
       />
       <click-to-edit
         label="Architecture"
-        :value="form.architecture"
+        :model-value="form.architecture"
         :editable="false"
       />
       <click-to-edit
         label="Process ID"
-        :value="form.process_id"
+        :model-value="form.process_id"
         :editable="false"
       />
       <click-to-edit
         label="Process Name"
-        :value="form.process_name"
+        :model-value="form.process_name"
         :editable="false"
       />
       <click-to-edit
         label="Language"
-        :value="form.language"
+        :model-value="form.language"
         :editable="false"
       />
       <click-to-edit
         label="Language Version"
-        :value="form.language_version"
+        :model-value="form.language_version"
+        :editable="false"
+      />
+      <click-to-edit
+        label="Profile"
+        :model-value="form.profile"
         :editable="false"
       />
-      <click-to-edit label="Profile" :value="form.profile" :editable="false" />
     </v-form>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
 import moment from "moment";
 import TagViewer from "@/components/TagViewer.vue";
 import ClickToEdit from "@/components/ClickToEdit.vue";
@@ -146,6 +149,7 @@ import { useAgentStore } from "@/stores/agent-module";
 
 export default {
   components: { TagViewer, ClickToEdit },
+  inject: ["snack"],
   props: {
     /**
      * The agent object to populate the form fields.
@@ -236,7 +240,7 @@ export default {
           return map;
         }, {});
 
-        Vue.set(this, "form", map2);
+        this.form = map2;
       },
     },
   },
@@ -250,16 +254,16 @@ export default {
         .then(() => {
           this.$emit("refresh-agent");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(tag) {
       agentApi
         .updateTag(this.agent.session_id, tag)
         .then(() => {
           this.$emit("refresh-agent");
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(tag) {
       agentApi
@@ -267,7 +271,7 @@ export default {
         .then(() => {
           this.$emit("refresh-agent");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     async updateName() {
       if (this.agent.name === this.form.name) return;
@@ -278,10 +282,10 @@ export default {
           newName: this.form.name,
         });
       } catch (err) {
-        this.$snack.error(`Update agent listener failed: ${err}`);
+        this.snack.error(`Update agent listener failed: ${err}`);
         return;
       }
-      this.$snack.info(`Agent ${this.agent.name} name updated`);
+      this.snack.info(`Agent ${this.agent.name} name updated`);
       this.$emit("refresh-agent");
     },
     async updateListener() {
@@ -293,10 +297,10 @@ export default {
         )[0].id;
         await agentTaskApi.updateComms(this.agent.session_id, listenerId);
       } catch (err) {
-        this.$snack.error(`Update agent listener failed: ${err}`);
+        this.snack.error(`Update agent listener failed: ${err}`);
         return;
       }
-      this.$snack.info(
+      this.snack.info(
         `Tasked agent to change listener to: ${this.form.listener}`,
       );
       this.$emit("refresh-agent");
@@ -311,10 +315,10 @@ export default {
       try {
         await agentTaskApi.updateKillDate(this.agent.session_id, date);
       } catch (err) {
-        this.$snack.error(`Update agent kill date failed: ${err}`);
+        this.snack.error(`Update agent kill date failed: ${err}`);
         return;
       }
-      this.$snack.info(`Tasked agent to change kill date to: ${date}`);
+      this.snack.info(`Tasked agent to change kill date to: ${date}`);
       this.$emit("refresh-agent");
     },
     async updateWorkingHours() {
@@ -326,10 +330,10 @@ export default {
           this.form.working_hours,
         );
       } catch (err) {
-        this.$snack.error(`Update agent working hours failed: ${err}`);
+        this.snack.error(`Update agent working hours failed: ${err}`);
         return;
       }
-      this.$snack.info(
+      this.snack.info(
         `Tasked agent to change working hours to: ${this.form.working_hours}`,
       );
       this.$emit("refresh-agent");
@@ -344,10 +348,10 @@ export default {
           this.form.jitter,
         );
       } catch (err) {
-        this.$snack.error(`Update agent delay failed: ${err}`);
+        this.snack.error(`Update agent delay failed: ${err}`);
         return;
       }
-      this.$snack.info(`Tasked agent to change delay to: ${this.form.delay}`);
+      this.snack.info(`Tasked agent to change delay to: ${this.form.delay}`);
       this.$emit("refresh-agent");
     },
     async updateJitter() {
@@ -360,10 +364,10 @@ export default {
           this.form.jitter,
         );
       } catch (err) {
-        this.$snack.error(`Update agent delay failed: ${err}`);
+        this.snack.error(`Update agent delay failed: ${err}`);
         return;
       }
-      this.$snack.info(`Tasked agent to change jitter to: ${this.form.jitter}`);
+      this.snack.info(`Tasked agent to change jitter to: ${this.form.jitter}`);
       this.$emit("refresh-agent");
     },
     fieldExists(name) {
diff --git a/src/components/agents/AgentInteract.vue b/src/components/agents/AgentInteract.vue
index 9cbe0961..edb0c282 100644
--- a/src/components/agents/AgentInteract.vue
+++ b/src/components/agents/AgentInteract.vue
@@ -1,39 +1,30 @@
 <template>
   <div style="padding: 10px">
-    <v-form ref="form" class="form" @submit.prevent.native="submit">
-      <v-container>
-        <v-row>
-          <v-col cols="10">
-            <div style="display: flex">
-              <v-checkbox
-                v-model="form.literal"
-                class="pr-2"
-                label="Literal"
-                :disabled="literal.disabled"
-              />
-              <v-tooltip bottom>
-                <template #activator="{ on }">
-                  <v-icon small class="pr-2" v-on="on">
-                    fa-question-circle
-                  </v-icon>
-                </template>
-                <p>{{ literal.tooltipText }}</p>
-              </v-tooltip>
-              <v-text-field
-                v-model="form.command"
-                dense
-                outlined
-                label="Shell Command"
-              />
-            </div>
-          </v-col>
-          <v-col cols="2" md="2">
-            <v-btn color="primary" :loading="loading" type="submit">
-              Run
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-container>
+    <v-form ref="form" class="form" @submit.prevent="submit">
+      <v-text-field
+        v-model="form.command"
+        density="compact"
+        variant="outlined"
+        label="Shell Command"
+      />
+      <div class="d-flex align-center mb-4">
+        <v-checkbox
+          v-model="form.literal"
+          label="Literal"
+          density="compact"
+          hide-details
+          :disabled="literal.disabled"
+        />
+        <v-tooltip location="bottom">
+          <template #activator="{ props: activatorProps }">
+            <v-icon size="small" class="ml-1" v-bind="activatorProps">
+              fa-question-circle
+            </v-icon>
+          </template>
+          <span>{{ literal.tooltipText }}</span>
+        </v-tooltip>
+      </div>
+      <v-btn color="primary" :loading="loading" type="submit"> Submit </v-btn>
     </v-form>
   </div>
 </template>
@@ -42,6 +33,7 @@
 import * as agentTaskApi from "@/api/agent-task-api";
 
 export default {
+  inject: ["snack"],
   props: {
     agent: {
       type: Object,
@@ -71,20 +63,23 @@ export default {
       }
 
       this.loading = true;
-
-      if (this.form.command.trim() === "sysinfo") {
-        await agentTaskApi.sysinfo(this.agent.session_id);
-      } else {
-        await agentTaskApi.shell(
-          this.agent.session_id,
-          this.form.command,
-          this.form.literal,
-        );
+      try {
+        if (this.form.command.trim() === "sysinfo") {
+          await agentTaskApi.sysinfo(this.agent.session_id);
+        } else {
+          await agentTaskApi.shell(
+            this.agent.session_id,
+            this.form.command,
+            this.form.literal,
+          );
+        }
+        this.form.command = "";
+        this.snack.success(`Shell Command queued for ${this.agent.name}`);
+      } catch (err) {
+        this.snack.error(`Error executing command: ${err}`);
+      } finally {
+        this.loading = false;
       }
-
-      this.form.command = "";
-      this.loading = false;
-      this.$snack.success(`Shell Command queued for ${this.agent.name}`);
     },
   },
 };
diff --git a/src/components/agents/AgentJobs.vue b/src/components/agents/AgentJobs.vue
index f7efff25..43fb068b 100644
--- a/src/components/agents/AgentJobs.vue
+++ b/src/components/agents/AgentJobs.vue
@@ -3,12 +3,18 @@
     <div class="d-flex align-center mb-4">
       <h3>Background Jobs</h3>
       <v-spacer />
-      <v-btn small color="primary" :loading="loading" @click="refreshJobs">
-        <v-icon left small>fa-sync</v-icon>
+      <v-btn
+        size="small"
+        color="primary"
+        :loading="loading"
+        @click="refreshJobs"
+      >
+        <v-icon start size="small">fa-sync</v-icon>
         Refresh
       </v-btn>
       <v-switch
         v-model="autoRefresh"
+        color="primary"
         label="Auto-refresh"
         class="ml-4 mt-0"
         hide-details
@@ -18,9 +24,9 @@
     <v-alert
       v-if="error"
       type="error"
-      dismissible
+      closable
       class="mb-4"
-      @input="error = null"
+      @click:close="error = null"
     >
       {{ error }}
     </v-alert>
@@ -28,26 +34,26 @@
     <v-alert
       v-if="successMessage"
       type="success"
-      dismissible
+      closable
       class="mb-4"
-      @input="successMessage = null"
+      @click:close="successMessage = null"
     >
       {{ successMessage }}
     </v-alert>
 
     <v-data-table
+      v-model:expanded="expanded"
       :headers="headers"
       :items="jobs"
       :loading="loading"
       :items-per-page="10"
-      :expanded.sync="expanded"
-      item-key="id"
+      item-value="id"
       show-expand
       class="elevation-1"
       no-data-text="No background jobs found. Jobs will appear here when you run modules with Background=true."
     >
       <template #item.status="{ item }">
-        <v-chip :color="getStatusColor(item.agentStatus)" small dark>
+        <v-chip :color="getStatusColor(item.agentStatus)" size="small">
           {{ item.agentStatus }}
         </v-chip>
       </template>
@@ -59,15 +65,15 @@
       <template #item.actions="{ item }">
         <v-btn
           v-if="isKillable(item.agentStatus)"
-          small
+          size="small"
           color="error"
           :loading="killingJob === item.id"
           @click="killJob(item)"
         >
-          <v-icon left small>fa-stop</v-icon>
+          <v-icon start size="small">fa-stop</v-icon>
           Kill
         </v-btn>
-        <span v-else class="grey--text">
+        <span v-else class="text-grey">
           {{ item.agentStatus === "completed" ? "Completed" : "N/A" }}
         </span>
       </template>
@@ -81,38 +87,35 @@
         </span>
       </template>
 
-      <template #expanded-item="{ headers: scopedHeaders, item }">
-        <td
-          v-if="expandedJobs[item.id]"
-          :colspan="scopedHeaders.length"
-          class="pa-4"
-        >
+      <template #expanded-row="{ columns, item }">
+        <td v-if="expandedJobs[item.id]" :colspan="columns.length" class="pa-4">
           <div>
             <div class="d-flex align-center mb-2">
               <v-btn
-                x-small
-                text
+                size="x-small"
+                variant="text"
                 @click="
                   downloadText(item.input || '', `task-${item.id}-input.txt`)
                 "
               >
-                <v-icon left small>fa-download</v-icon>
+                <v-icon start size="small">fa-download</v-icon>
                 Download Input
               </v-btn>
               <v-btn
-                x-small
-                text
+                size="x-small"
+                variant="text"
                 class="ml-2"
                 @click="
                   downloadText(item.output || '', `task-${item.id}-output.txt`)
                 "
               >
-                <v-icon left small>fa-download</v-icon>
+                <v-icon start size="small">fa-download</v-icon>
                 Download Output
               </v-btn>
               <v-spacer />
               <v-switch
                 v-model="expandedJobs[item.id].backgroundColor"
+                color="primary"
                 false-value="white"
                 true-value="black"
                 label="Dark Background"
@@ -172,7 +175,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn text @click="confirmDialog = false">Cancel</v-btn>
+          <v-btn variant="text" @click="confirmDialog = false">Cancel</v-btn>
           <v-btn color="error" @click="confirmKillJob">Kill Job</v-btn>
         </v-card-actions>
       </v-card>
@@ -218,12 +221,12 @@ export default {
       expanded: [],
       expandedJobs: {},
       headers: [
-        { text: "ID", value: "id", width: "80px" },
-        { text: "Task Name", value: "task_name" },
-        { text: "Status", value: "status", width: "120px" },
-        { text: "Input", value: "input" },
-        { text: "Created", value: "created_at", width: "180px" },
-        { text: "Actions", value: "actions", sortable: false, width: "120px" },
+        { title: "ID", key: "id", width: "80px" },
+        { title: "Task Name", key: "task_name" },
+        { title: "Status", key: "status", width: "120px" },
+        { title: "Input", key: "input" },
+        { title: "Created", key: "created_at", width: "180px" },
+        { title: "Actions", key: "actions", sortable: false, width: "120px" },
       ],
     };
   },
@@ -242,7 +245,7 @@ export default {
       immediate: true,
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.isDestroyed = true;
     this.stopAutoRefresh();
     if (this.killRefreshTimeout) {
@@ -346,7 +349,7 @@ export default {
         const activeJobIds = new Set(this.jobs.map((j) => j.id));
         Object.keys(this.expandedJobs).forEach((key) => {
           if (!activeJobIds.has(Number(key))) {
-            this.$delete(this.expandedJobs, key);
+            delete this.expandedJobs[key];
           }
         });
 
@@ -358,10 +361,10 @@ export default {
             : null;
 
           if (!this.expandedJobs[job.id]) {
-            this.$set(this.expandedJobs, job.id, {
+            this.expandedJobs[job.id] = {
               backgroundColor: "black",
               htmlOutput,
-            });
+            };
           } else {
             this.expandedJobs[job.id].htmlOutput = htmlOutput;
           }
diff --git a/src/components/agents/AgentTasksList.vue b/src/components/agents/AgentTasksList.vue
index 1953edd4..20904abe 100644
--- a/src/components/agents/AgentTasksList.vue
+++ b/src/components/agents/AgentTasksList.vue
@@ -64,7 +64,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import { mapState } from "pinia";
 
 import AgentTasksTable from "@/components/agents/AgentTasksTable.vue";
@@ -87,6 +86,7 @@ export default {
     ListPageTop,
   },
   mixins: [DownloadMixin],
+  inject: ["snack"],
   props: {
     agent: {
       type: Object,
@@ -108,7 +108,7 @@ export default {
     return {
       breads: [
         {
-          text: "Agent Tasks",
+          title: "Agent Tasks",
           disabled: true,
           href: "/agents-tasks",
         },
@@ -116,7 +116,6 @@ export default {
       tasks: [],
       search: "",
       loading: false,
-      moment,
       selectedAgents: [],
       selectedUsers: [],
       selectedTags: [],
@@ -154,11 +153,15 @@ export default {
     },
   },
   async mounted() {
-    await Promise.all([
-      this.agentStore.getAgents(),
-      this.userStore.getUsers(),
-      this.getTags(),
-    ]);
+    try {
+      await Promise.all([
+        this.agentStore.getAgents(),
+        this.userStore.getUsers(),
+        this.getTags(),
+      ]);
+    } catch (err) {
+      this.snack.error(`Failed to load filter data: ${err}`);
+    }
   },
   methods: {
     async getTags() {
diff --git a/src/components/agents/AgentTasksTable.vue b/src/components/agents/AgentTasksTable.vue
index 290ffacc..05d1ed63 100644
--- a/src/components/agents/AgentTasksTable.vue
+++ b/src/components/agents/AgentTasksTable.vue
@@ -12,29 +12,22 @@
         @submit="submitHeaderForm"
       />
     </div>
-    <v-pagination
-      v-model="currentPage"
-      :length="totalPages"
-      :total-visible="10"
-      @input="handlePageChange"
-    />
-    <v-data-table
+    <v-data-table-server
+      v-model:sort-by="sortBy"
+      v-model:items-per-page="itemsPerPage"
+      v-model:page="currentPage"
       :headers="headers"
       :items="tasks"
-      item-key="uniqueId"
-      :sort-by="sortBy"
-      :sort-desc="sortDesc"
-      :server-items-length="totalItems"
-      :footer-props="{ 'items-per-page-options': [10, 25, 50, 100] }"
-      :items-per-page.sync="itemsPerPage"
+      item-value="uniqueId"
+      :items-length="totalItems"
+      :items-per-page-options="[10, 25, 50, 100]"
       :loading="loading"
-      :page="currentPage"
       show-expand
-      @item-expanded="handleItemExpanded"
+      @update:expanded="handleItemExpanded"
       @update:options="handleOptionsChange"
     >
-      <template #expanded-item="{ headers: scopedHeaders, item }">
-        <td :colspan="scopedHeaders.length" class="pa-4">
+      <template #expanded-row="{ columns, item }">
+        <td :colspan="columns.length" class="pa-4">
           <v-card flat>
             <v-card-title class="subtitle-1 pb-4">
               <v-row no-gutters align="center">
@@ -42,10 +35,10 @@
                   <span class="font-weight-bold">Task #{{ item.id }}</span>
                   <v-chip
                     v-if="item.module_name || item.task_name"
-                    small
+                    size="small"
                     class="ml-2"
                     color="primary"
-                    outlined
+                    variant="outlined"
                   >
                     {{ item.module_name || item.task_name }}
                   </v-chip>
@@ -69,7 +62,7 @@
                       v-for="(value, key) in expandedTasks[item.uniqueId]
                         .options || expandedTasks[item.uniqueId].module_options"
                       :key="key"
-                      small
+                      size="small"
                       label
                       class="mr-1 mb-1"
                     >
@@ -87,12 +80,13 @@
                 <v-col class="text-right">
                   <v-switch
                     v-model="expandedTasks[item.uniqueId].backgroundColor"
+                    color="primary"
                     false-value="white"
                     true-value="black"
                     label="Dark Mode Output"
                     hide-details
                     class="mt-0 pt-0 d-inline-block"
-                    @change="updateTaskBackgroundColor(item)"
+                    @update:model-value="updateTaskBackgroundColor(item)"
                   />
                 </v-col>
               </v-row>
@@ -154,8 +148,8 @@
                             d.filename.match(/[^/]+(jpg|jpeg|png|gif)$/),
                           )
                         "
-                        text
-                        x-small
+                        variant="text"
+                        size="x-small"
                         @click="getImagesForTask(item)"
                       >
                         View Images
@@ -177,7 +171,7 @@
                           :src="imageData(item, download)"
                           :alt="download.filename"
                           :max-width="400"
-                          class="grey lighten-2 rounded mb-2"
+                          class="bg-grey-lighten-2 rounded mb-2"
                           contain
                         >
                           <template #placeholder>
@@ -188,7 +182,7 @@
                             >
                               <v-progress-circular
                                 indeterminate
-                                color="grey lighten-5"
+                                color="grey-lighten-5"
                               />
                             </v-row>
                           </template>
@@ -226,19 +220,31 @@
         </td>
       </template>
       <template #item.status="{ item }">
-        <v-icon v-if="item.status === 'pulled'" color="blue" small>
+        <v-icon v-if="item.status === 'pulled'" color="blue" size="small">
           fa-check-square
         </v-icon>
-        <v-icon v-else-if="item.status === 'queued'" color="orange" small>
+        <v-icon
+          v-else-if="item.status === 'queued'"
+          color="orange"
+          size="small"
+        >
           fa-clock
         </v-icon>
-        <v-icon v-else-if="item.status === 'completed'" color="green" small>
+        <v-icon
+          v-else-if="item.status === 'completed'"
+          color="green"
+          size="small"
+        >
           fa-check-circle
         </v-icon>
-        <v-icon v-else-if="item.status === 'error'" color="red" small>
+        <v-icon v-else-if="item.status === 'error'" color="red" size="small">
           fa-times-circle
         </v-icon>
-        <v-icon v-else-if="item.status === 'continuous'" color="purple" small>
+        <v-icon
+          v-else-if="item.status === 'continuous'"
+          color="purple"
+          size="small"
+        >
           fa-infinity
         </v-icon>
       </template>
@@ -270,14 +276,14 @@
         />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
           <v-list class="ml-2 mr-2">
-            <v-subheader>Execution</v-subheader>
+            <v-list-subheader>Execution</v-list-subheader>
             <v-list-item
               v-show="supportsRerun(item)"
               key="rerunTask"
@@ -285,32 +291,32 @@
               @click="rerunTask(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-redo</v-icon>
+                <v-icon size="small">fa-redo</v-icon>
                 Rerun Task
               </v-list-item-title>
             </v-list-item>
             <v-list-item key="stopTask" link @click="stopTask(item)">
               <v-list-item-title>
-                <v-icon small>fa-stop</v-icon>
+                <v-icon size="small">fa-stop</v-icon>
                 Stop Task
               </v-list-item-title>
             </v-list-item>
             <v-divider />
-            <v-subheader>Input</v-subheader>
+            <v-list-subheader>Input</v-list-subheader>
             <v-list-item key="clipboardInput" link @click="copyInput(item)">
               <v-list-item-title>
-                <v-icon small>fa-paperclip</v-icon>
+                <v-icon size="small">fa-paperclip</v-icon>
                 Copy to Clipboard
               </v-list-item-title>
             </v-list-item>
             <v-list-item key="downloadInput" link @click="downloadInput(item)">
               <v-list-item-title>
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 Download
               </v-list-item-title>
             </v-list-item>
             <v-divider v-if="hasOutput(item)" />
-            <v-subheader v-if="hasOutput(item)">Output</v-subheader>
+            <v-list-subheader v-if="hasOutput(item)">Output</v-list-subheader>
             <v-list-item
               v-if="hasOutput(item)"
               key="clipboardOutput"
@@ -318,7 +324,7 @@
               @click="copyOutput(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-paperclip</v-icon>
+                <v-icon size="small">fa-paperclip</v-icon>
                 Copy to Clipboard
               </v-list-item-title>
             </v-list-item>
@@ -329,12 +335,14 @@
               @click="downloadOutput(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 Download
               </v-list-item-title>
             </v-list-item>
             <v-divider v-if="item.downloads.length > 0" />
-            <v-subheader v-if="item.downloads.length > 0">Files</v-subheader>
+            <v-list-subheader v-if="item.downloads.length > 0"
+              >Files</v-list-subheader
+            >
             <v-list-item
               v-for="download in item.downloads"
               :key="'download-' + download.id"
@@ -342,20 +350,18 @@
               @click="downloadFile(download)"
             >
               <v-list-item-title title="Download file">
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 {{ download.filename }}
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
       </template>
-    </v-data-table>
+    </v-data-table-server>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
-import moment from "moment";
 import debounce from "lodash.debounce";
 // eslint-disable-next-line import/no-named-default
 import { default as AnsiUp } from "ansi_up";
@@ -368,6 +374,7 @@ import { useApplicationStore } from "@/stores/application-module";
 import * as downloadApi from "@/api/download-api";
 import * as agentTaskApi from "@/api/agent-task-api";
 import * as moduleApi from "@/api/module-api";
+import { copyToClipboard } from "@/utils/clipboard";
 
 export default {
   name: "AgentTasksTable",
@@ -378,6 +385,7 @@ export default {
     HeaderMenu,
   },
   mixins: [DownloadMixin],
+  inject: ["snack"],
   props: {
     agent: {
       type: Object,
@@ -417,21 +425,18 @@ export default {
     return {
       tasks: [],
       currentPage: 1,
-      totalPages: 1,
       totalItems: 0,
       itemsPerPage: 10,
       loading: false,
-      moment,
-      sortBy: "updated_at",
-      sortDesc: true,
+      sortBy: [{ key: "updated_at", order: "desc" }],
       refreshInterval: null,
       expandedTasks: {},
       debouncedGetTasks: debounce(this.getTasks, 500),
       selectedHeadersTemp: [],
       headersFull: [
         {
-          text: "Task ID",
-          value: "id",
+          title: "Task ID",
+          key: "id",
           sortable: true,
           defaultHeader: false,
           alwaysShow: false,
@@ -439,58 +444,58 @@ export default {
           order: 1,
         },
         {
-          text: "Status",
-          value: "status",
+          title: "Status",
+          key: "status",
           sortable: true,
           defaultHeader: true,
           order: 2,
         },
         {
-          text: "Task Input",
-          value: "input",
+          title: "Task Input",
+          key: "input",
           sortable: false,
           defaultHeader: false,
           order: 4,
         },
         {
-          text: "Task Name",
-          value: "task_name",
+          title: "Task Name",
+          key: "task_name",
           sortable: false,
           defaultHeader: true,
           order: 3,
         },
         {
-          text: "Agent",
-          value: "agent_id",
+          title: "Agent",
+          key: "agent_id",
           sortable: true,
           defaultHeader: true,
           order: 5,
         },
         {
-          text: "User",
-          value: "username",
+          title: "User",
+          key: "username",
           sortable: false,
           defaultHeader: true,
           order: 6,
         },
         {
-          text: "Updated At",
-          value: "updated_at",
+          title: "Updated At",
+          key: "updated_at",
           sortable: true,
           defaultHeader: true,
           order: 7,
         },
         {
-          text: "Tags",
-          value: "tags",
+          title: "Tags",
+          key: "tags",
           sortable: false,
           width: 400,
           defaultHeader: true,
           order: 8,
         },
         {
-          text: "Actions",
-          value: "actions",
+          title: "Actions",
+          key: "actions",
           sortable: false,
           defaultHeader: true,
           alwaysShow: true,
@@ -508,7 +513,7 @@ export default {
         .filter(
           (h) =>
             this.applicationStore.taskHeaders.findIndex(
-              (h2) => h2.text === h.text,
+              (h2) => h2.title === h.title,
             ) > -1,
         )
         .sort((a, b) => a.order - b.order);
@@ -553,16 +558,19 @@ export default {
   },
   async mounted() {
     this.debouncedGetTasks();
-    if (this.applicationStore.taskHeaders.length === 0) {
+    if (
+      this.applicationStore.taskHeaders.length === 0 ||
+      !this.applicationStore.taskHeaders[0].title
+    ) {
       this.applicationStore.taskHeaders = this.headersFull.filter(
         (h) => h.defaultHeader === true,
       );
     }
     this.selectedHeadersTemp = this.headersFull.filter((h) =>
-      this.applicationStore.taskHeaders.some((h2) => h2.text === h.text),
+      this.applicationStore.taskHeaders.some((h2) => h2.title === h.title),
     );
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.refreshInterval);
   },
   methods: {
@@ -575,7 +583,7 @@ export default {
         (h) => h.defaultHeader === true,
       );
       this.selectedHeadersTemp = this.headersFull.filter((h) =>
-        this.applicationStore.taskHeaders.some((h2) => h2.text === h.text),
+        this.applicationStore.taskHeaders.some((h2) => h2.title === h.title),
       );
     },
     // eslint-disable-next-line no-unused-vars
@@ -597,14 +605,10 @@ export default {
       agentTaskApi
         .deleteTag(task.agent_id, task.id, tag.id)
         .then(() => {
-          this.$set(
-            task,
-            "tags",
-            task.tags.filter((t) => t.id !== tag.id),
-          );
+          task.tags = task.tags.filter((t) => t.id !== tag.id);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(task, tag) {
       agentTaskApi
@@ -613,9 +617,9 @@ export default {
           const index = task.tags.findIndex((x) => x.id === t.id);
           task.tags.splice(index, 1, t);
           this.$emit("refresh-tags");
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addBlankLines(text) {
       return `\n${text}\n`;
@@ -624,10 +628,10 @@ export default {
       agentTaskApi
         .addTag(task.agent_id, task.id, tag)
         .then((t) => {
-          this.$set(task, "tags", [...task.tags, t]);
+          task.tags = [...task.tags, t];
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     truncateMessage(task) {
       if (task) {
@@ -643,11 +647,8 @@ export default {
       }
       this.expandedTasks[task.uniqueId].backgroundColor = task.backgroundColor;
 
-      // Need to call vue set to trigger reactivity on the table
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
-    },
-    isDownload(task) {
-      return task.downloads && task.downloads.length > 0;
+      // Trigger reactivity on the table
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
     },
     downloadFile(download) {
       downloadApi.getDownload(download.id);
@@ -659,10 +660,10 @@ export default {
       if (task.input) {
         if (!this.expandedTasks[task.uniqueId]?.full_input) {
           const data = await agentTaskApi.getTask(task.agent_id, task.id);
-          Vue.set(this.expandedTasks, task.uniqueId, {
+          this.expandedTasks[task.uniqueId] = {
             ...this.expandedTasks[task.uniqueId],
             ...data,
-          });
+          };
         }
 
         this.downloadText(
@@ -680,32 +681,21 @@ export default {
       if (task.input) {
         if (!this.expandedTasks[task.uniqueId]?.full_input) {
           const data = await agentTaskApi.getTask(task.agent_id, task.id);
-          Vue.set(this.expandedTasks, task.uniqueId, {
+          this.expandedTasks[task.uniqueId] = {
             ...this.expandedTasks[task.uniqueId],
             ...data,
-          });
+          };
         }
 
-        try {
-          navigator.clipboard.writeText(
-            this.expandedTasks[task.uniqueId].full_input,
-          );
-        } catch (error) {
-          this.$snack.warn(
-            "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-          );
-        }
+        await copyToClipboard(
+          this.expandedTasks[task.uniqueId].full_input,
+          this.snack,
+        );
       }
     },
-    copyOutput(task) {
+    async copyOutput(task) {
       if (task.output) {
-        try {
-          navigator.clipboard.writeText(task.output);
-        } catch (error) {
-          this.$snack.warn(
-            "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-          );
-        }
+        await copyToClipboard(task.output, this.snack);
       }
     },
     imageData(task, download) {
@@ -721,11 +711,11 @@ export default {
     async getImagesForTask(task) {
       if (!this.expandedTasks[task.uniqueId].imagesRetrieved) {
         const data = await agentTaskApi.getTask(task.agent_id, task.id);
-        Vue.set(this.expandedTasks, task.uniqueId, {
+        this.expandedTasks[task.uniqueId] = {
           ...this.expandedTasks[task.uniqueId],
           ...data,
           imagesRetrieved: true,
-        });
+        };
       }
 
       for (let i = 0; i < task.downloads.length; i++) {
@@ -739,36 +729,49 @@ export default {
           this.expandedTasks[task.uniqueId].downloads[i].image = url;
         }
       }
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
     },
     async toggleSeeFullInput(task) {
       if (!task.expandedInput) {
         const data = await agentTaskApi.getTask(task.agent_id, task.id);
-        Vue.set(this.expandedTasks, task.uniqueId, {
+        this.expandedTasks[task.uniqueId] = {
           ...this.expandedTasks[task.uniqueId],
           ...data,
           expandedInput: true,
-        });
+        };
         task.expandedInput = true;
       } else {
         this.expandedTasks[task.uniqueId].expandedInput = false;
         task.expandedInput = false;
       }
 
-      // Need to call vue set to trigger reactivity on the table
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
-    },
-    async handleItemExpanded({ item, value }) {
-      if (value && !this.expandedTasks[item.uniqueId].fullTaskLoaded) {
-        const data = await agentTaskApi.getTask(item.agent_id, item.id);
-        Vue.set(this.expandedTasks, item.uniqueId, {
-          ...this.expandedTasks[item.uniqueId],
-          ...data,
-          fullTaskLoaded: true,
-        });
-        // Need to call vue set to trigger reactivity on the table
-        Vue.set(this.tasks, this.tasks.indexOf(item), item);
-      }
+      // Trigger reactivity on the table
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
+    },
+    async handleItemExpanded(expandedIds) {
+      const toLoad = expandedIds.filter(
+        (uniqueId) =>
+          this.expandedTasks[uniqueId] &&
+          !this.expandedTasks[uniqueId].fullTaskLoaded,
+      );
+
+      await Promise.all(
+        toLoad.map(async (uniqueId) => {
+          const item = this.tasks.find((t) => t.uniqueId === uniqueId);
+          if (!item) return;
+          try {
+            const data = await agentTaskApi.getTask(item.agent_id, item.id);
+            this.expandedTasks[item.uniqueId] = {
+              ...this.expandedTasks[item.uniqueId],
+              ...data,
+              fullTaskLoaded: true,
+            };
+            this.tasks.splice(this.tasks.indexOf(item), 1, item);
+          } catch (err) {
+            this.snack.error(`Error loading task ${item.id}: ${err}`);
+          }
+        }),
+      );
     },
     async rerunTask(task) {
       try {
@@ -779,20 +782,18 @@ export default {
             Agent: fullTask.agent_id,
           };
           await moduleApi.executeModule(fullTask.module_name, options);
-          this.$snack.info(`Module ${fullTask.module_name} rerun queued.`);
+          this.snack.info(`Module ${fullTask.module_name} rerun queued.`);
         } else if (fullTask.task_name === "TASK_SHELL") {
           await agentTaskApi.shell(fullTask.agent_id, fullTask.full_input);
-          this.$snack.info("Shell command rerun queued.");
+          this.snack.info("Shell command rerun queued.");
         } else if (fullTask.task_name === "TASK_SYSINFO") {
           await agentTaskApi.sysinfo(fullTask.agent_id);
-          this.$snack.info("Sysinfo task rerun queued.");
+          this.snack.info("Sysinfo task rerun queued.");
         } else {
-          this.$snack.error(
-            `Rerunning ${fullTask.task_name} is not supported.`,
-          );
+          this.snack.error(`Rerunning ${fullTask.task_name} is not supported.`);
         }
       } catch (err) {
-        this.$snack.error(`Error rerunning task: ${err}`);
+        this.snack.error(`Error rerunning task: ${err}`);
       }
     },
     supportsRerun(item) {
@@ -812,25 +813,15 @@ export default {
     async stopTask(task) {
       try {
         await agentTaskApi.stopTask(task.agent_id, task.id);
-        this.$snack.success(`Task ${task.id} stop queued.`);
+        this.snack.success(`Task ${task.id} stop queued.`);
       } catch (err) {
-        this.$snack.error(`Error stopping task: ${err}`);
+        this.snack.error(`Error stopping task: ${err}`);
       }
     },
-    handlePageChange() {
-      this.debouncedGetTasks();
-    },
     handleOptionsChange(value) {
       this.currentPage = value.page;
       this.itemsPerPage = value.itemsPerPage;
-
-      if (value.sortBy.length > 0) {
-        this.sortBy = value.sortBy[0];
-        this.sortDesc = value.sortDesc[0];
-      } else {
-        this.sortBy = "id";
-        this.sortDesc = true;
-      }
+      this.sortBy = Array.isArray(value.sortBy) ? value.sortBy : [];
       this.debouncedGetTasks();
     },
     async getTasks() {
@@ -842,7 +833,6 @@ export default {
         // when no agents are selected. Even though the api sees no agents as all agents.
         this.tasks = [];
         this.currentPage = 1;
-        this.totalPages = 1;
         this.totalItems = 0;
         return;
       }
@@ -851,47 +841,52 @@ export default {
       if (this.selectedAgents.length > 0) {
         agents = this.selectedAgents;
       }
-      const response = await agentTaskApi.getTasks(agents, {
-        page: this.currentPage,
-        limit: this.itemsPerPage,
-        sortBy: this.sortBy,
-        sortOrder: this.sortDesc ? "desc" : "asc",
-        users: this.selectedUsers,
-        tags: this.selectedTags,
-        search: this.search,
-      });
-      this.currentPage = response.page;
-      this.totalPages = response.total_pages;
-      this.totalItems = response.total;
+      const sortEntry =
+        this.sortBy.length > 0 ? this.sortBy[0] : { key: "id", order: "desc" };
+      try {
+        const response = await agentTaskApi.getTasks(agents, {
+          page: this.currentPage,
+          limit: this.itemsPerPage,
+          sortBy: sortEntry.key,
+          sortOrder: sortEntry.order,
+          users: this.selectedUsers,
+          tags: this.selectedTags,
+          search: this.search,
+        });
+        this.currentPage = response.page;
+        this.totalItems = response.total;
 
-      // iterate response.records and add expandedInput if it exists in expandedTasks
-      // this ensures that the expandedInput doesn't get wiped away after a refresh
-      this.tasks = response.records.map((task) => {
-        task.uniqueId = `${task.agent_id}-${task.id}`;
+        // iterate response.records and add expandedInput if it exists in expandedTasks
+        // this ensures that the expandedInput doesn't get wiped away after a refresh
+        this.tasks = response.records.map((task) => {
+          task.uniqueId = `${task.agent_id}-${task.id}`;
 
-        if (!this.expandedTasks[task.uniqueId]) {
-          Vue.set(this.expandedTasks, task.uniqueId, {});
-        }
-
-        if (this.expandedTasks[task.uniqueId].expandedInput) {
-          task.expandedInput = true;
-        }
+          if (!this.expandedTasks[task.uniqueId]) {
+            this.expandedTasks[task.uniqueId] = {};
+          }
 
-        this.expandedTasks[task.uniqueId].backgroundColor =
-          this.expandedTasks[task.uniqueId].backgroundColor || "black";
-        task.backgroundColor =
-          this.expandedTasks[task.uniqueId].backgroundColor;
+          if (this.expandedTasks[task.uniqueId].expandedInput) {
+            task.expandedInput = true;
+          }
 
-        if (this.isAnsi(task.output || "")) {
-          this.expandedTasks[task.uniqueId].htmlOutput = this.ansiToHtml(
-            task.output,
-          );
-        }
+          this.expandedTasks[task.uniqueId].backgroundColor =
+            this.expandedTasks[task.uniqueId].backgroundColor || "black";
+          task.backgroundColor =
+            this.expandedTasks[task.uniqueId].backgroundColor;
 
-        return task;
-      });
+          if (this.isAnsi(task.output || "")) {
+            this.expandedTasks[task.uniqueId].htmlOutput = this.ansiToHtml(
+              task.output,
+            );
+          }
 
-      this.loading = false;
+          return task;
+        });
+      } catch (err) {
+        this.snack.error(`Failed to load tasks: ${err}`);
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/src/components/agents/AgentTerminal.vue b/src/components/agents/AgentTerminal.vue
index ab9e01fe..1fd17993 100644
--- a/src/components/agents/AgentTerminal.vue
+++ b/src/components/agents/AgentTerminal.vue
@@ -828,14 +828,19 @@ export default {
     // The other function is for when not in the shell menu.
     async shellCommandOperator(stdin) {
       let response = null;
-      if (stdin.trim() === "sysinfo") {
-        response = await agentTaskApi.sysinfo(this.agent.session_id);
-      } else {
-        response = await agentTaskApi.shell(
-          this.agent.session_id,
-          stdin,
-          false,
-        );
+      try {
+        if (stdin.trim() === "sysinfo") {
+          response = await agentTaskApi.sysinfo(this.agent.session_id);
+        } else {
+          response = await agentTaskApi.shell(
+            this.agent.session_id,
+            stdin,
+            false,
+          );
+        }
+      } catch (error) {
+        this.addError(`Error executing command: ${error.message}`);
+        return;
       }
 
       const complete = await this.pollForResult(response.id, { print: false });
@@ -1035,8 +1040,12 @@ export default {
       }
     },
     async getSysInfo() {
-      const task = await agentTaskApi.sysinfo(this.agent.session_id);
-      this.pollForResult(task.id);
+      try {
+        const task = await agentTaskApi.sysinfo(this.agent.session_id);
+        this.pollForResult(task.id);
+      } catch (error) {
+        this.addError(`Error requesting sysinfo: ${error.message}`);
+      }
     },
     displayHelpMenu() {
       if (this.currentModule) {
diff --git a/src/components/agents/AgentUploadDialog.vue b/src/components/agents/AgentUploadDialog.vue
index d7a1e4a7..2c74693f 100644
--- a/src/components/agents/AgentUploadDialog.vue
+++ b/src/components/agents/AgentUploadDialog.vue
@@ -16,20 +16,20 @@
           v-model="internalPathToFile"
           label="path/to/file (On the agent's machine)"
           :rules="rules['pathToFile']"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           :disabled="!file"
         />
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="blue darken-1" text @click.stop="show = false">
+        <v-btn color="blue-darken-1" variant="text" @click.stop="show = false">
           Close
         </v-btn>
         <v-btn
-          color="blue darken-1"
-          text
+          color="blue-darken-1"
+          variant="text"
           :loading="loading"
           :disabled="submitDisabled"
           @click="submit"
@@ -50,7 +50,7 @@ const MAX_BYTES = 1048576;
 export default {
   components: { FileInput },
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     language: {
       type: String,
       default: "",
@@ -64,6 +64,7 @@ export default {
       default: "",
     },
   },
+  emits: ["update:modelValue", "submit"],
   data() {
     return {
       formatBytes,
@@ -86,10 +87,10 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value;
+        return this.modelValue;
       },
       set(value) {
-        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
       },
     },
     fileName() {
@@ -106,7 +107,7 @@ export default {
     pathToFile(val) {
       this.internalPathToFile = val;
     },
-    value(val) {
+    modelValue(val) {
       if (val === false) {
         this.file = null;
         this.internalPathToFile = null;
diff --git a/src/components/agents/AgentsList.vue b/src/components/agents/AgentsList.vue
index e69ae31a..c33d3ff6 100644
--- a/src/components/agents/AgentsList.vue
+++ b/src/components/agents/AgentsList.vue
@@ -17,10 +17,12 @@
       <template #filters>
         <v-switch
           v-model="applicationStore.hideStaleAgents"
+          color="primary"
           label="Hide Stale Agents"
         />
         <v-switch
           v-model="applicationStore.hideArchivedAgents"
+          color="primary"
           class="pl-4"
           label="Hide Archived Agents"
         />
@@ -51,7 +53,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
 import ExpansionPanelFilter from "@/components/tables/ExpansionPanelFilter.vue";
 import AgentsTable from "@/components/agents/AgentsTable.vue";
@@ -68,11 +69,12 @@ export default {
     AgentsTable,
     ListPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       breads: [
         {
-          text: "Agents",
+          title: "Agents",
           disabled: true,
           href: "/agents",
         },
@@ -80,7 +82,6 @@ export default {
       selected: [],
       selectedTags: [],
       tags: [],
-      moment,
       autoRefresh: true,
     };
   },
@@ -143,7 +144,7 @@ export default {
     },
     async killAgents() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Kill Agent",
           `Do you want to kill ${this.selected.length} agents?`,
           { color: "red" },
@@ -152,7 +153,7 @@ export default {
         this.selected.forEach((agent) => {
           this.agentStore.killAgent({ sessionId: agent.session_id });
         });
-        this.$snack.success(
+        this.snack.success(
           `${this.selected.length} agents tasked to run TASK_EXIT.`,
         );
         this.selected = [];
@@ -163,14 +164,14 @@ export default {
     },
     async killAgent(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Kill Agent",
           `Do you want to kill agent ${item.name}?`,
           { color: "red" },
         )
       ) {
         this.agentStore.killAgent({ sessionId: item.session_id });
-        this.$snack.success(`Agent ${item.name} tasked to run TASK_EXIT.`);
+        this.snack.success(`Agent ${item.name} tasked to run TASK_EXIT.`);
       }
     },
   },
diff --git a/src/components/agents/AgentsTable.vue b/src/components/agents/AgentsTable.vue
index 6e78a1bf..00b30121 100644
--- a/src/components/agents/AgentsTable.vue
+++ b/src/components/agents/AgentsTable.vue
@@ -15,21 +15,23 @@
     <v-data-table
       v-model="selected"
       :loading="agentsStatus === 'loading'"
-      :item-class="rowClass"
+      :row-props="getRowProps"
       :headers="headers"
       :items="sortedAgents"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
+      :items-per-page-options="[5, 10, 15, 20, 50, 100]"
       :items-per-page="15"
-      item-key="session_id"
-      dense
+      item-value="session_id"
+      density="compact"
       show-select
     >
       <template #item.name="{ item }">
-        <v-tooltip top>
-          <template #activator="{ on }">
-            <v-icon v-if="item.high_integrity" small v-on="on">
+        <v-tooltip location="top">
+          <template #activator="{ props: activatorProps }">
+            <v-icon
+              v-if="item.high_integrity"
+              size="small"
+              v-bind="activatorProps"
+            >
               fa-user-cog
             </v-icon>
           </template>
@@ -68,9 +70,9 @@
         />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -115,7 +117,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
 import TagViewer from "@/components/TagViewer.vue";
 import HeaderMenu from "@/components/HeaderMenu.vue";
@@ -131,6 +132,7 @@ export default {
     TagViewer,
     HeaderMenu,
   },
+  inject: ["snack"],
   props: {
     input: {
       type: Array,
@@ -153,85 +155,86 @@ export default {
       default: false,
     },
   },
+  emits: ["update:modelValue", "refresh-tags", "kill-agent"],
   data() {
     return {
       loading: false,
       headersFull: [
         {
-          text: "Name",
-          value: "name",
+          title: "Name",
+          key: "name",
           defaultHeader: true,
           alwaysShow: true,
           order: 1,
         },
         {
-          text: "Last Seen",
-          value: "lastseen_time",
+          title: "Last Seen",
+          key: "lastseen_time",
           defaultHeader: true,
           alwaysShow: true,
           order: 2,
         },
         {
-          text: "First Seen",
-          value: "checkin_time",
+          title: "First Seen",
+          key: "checkin_time",
           defaultHeader: true,
           alwaysShow: true,
           order: 3,
         },
         {
-          text: "Listener",
-          value: "listener",
+          title: "Listener",
+          key: "listener",
           order: 4,
         },
         {
-          text: "Hostname",
-          value: "hostname",
+          title: "Hostname",
+          key: "hostname",
           defaultHeader: true,
           order: 5,
         },
         {
-          text: "Process",
-          value: "process_name",
+          title: "Process",
+          key: "process_name",
           defaultHeader: true,
           order: 6,
         },
-        { text: "Process ID", value: "process_id", order: 7 },
+        { title: "Process ID", key: "process_id", order: 7 },
         {
-          text: "Architecture",
-          value: "architecture",
+          title: "Architecture",
+          key: "architecture",
           order: 8,
         },
         {
-          text: "Language",
-          value: "language",
+          title: "Language",
+          key: "language",
           defaultHeader: true,
           order: 9,
         },
-        { text: "Language Version", value: "language_version", order: 10 },
+        { title: "Language Version", key: "language_version", order: 10 },
         {
-          text: "Username",
-          value: "username",
+          title: "Username",
+          key: "username",
           defaultHeader: true,
           order: 11,
         },
-        { text: "Working Hours", value: "working_hours", order: 12 },
-        { text: "External IP", value: "external_ip", order: 13 },
+        { title: "Working Hours", key: "working_hours", order: 12 },
+        { title: "External IP", key: "external_ip", order: 13 },
         {
-          text: "Internal IP",
-          value: "internal_ip",
+          title: "Internal IP",
+          key: "internal_ip",
           defaultHeader: true,
           order: 14,
         },
-        { text: "Delay", value: "delay", order: 15 },
-        { text: "Jitter", value: "jitter", order: 16 },
+        { title: "Delay", key: "delay", order: 15 },
+        { title: "Jitter", key: "jitter", order: 16 },
         {
-          text: "Tags",
-          value: "tags",
+          title: "Tags",
+          key: "tags",
           order: 17,
         },
         {
-          text: "Actions",
-          value: "actions",
+          title: "Actions",
+          key: "actions",
           defaultHeader: true,
           alwaysShow: true,
           order: 18,
@@ -240,7 +243,6 @@ export default {
       selectedHeadersTemp: [],
       selected: [],
       refreshInterval: null,
-      moment,
     };
   },
   computed: {
@@ -261,7 +263,7 @@ export default {
         .filter(
           (h) =>
             this.applicationStore.agentHeaders.findIndex(
-              (h2) => h2.text === h.text,
+              (h2) => h2.title === h.title,
             ) > -1,
         )
         .sort((a, b) => a.order - b.order);
@@ -292,7 +294,7 @@ export default {
       this.getAgents();
     },
     selected(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
     refreshAgents: {
       handler(newVal) {
@@ -302,25 +304,27 @@ export default {
             this.getAgents();
           }, 8000);
         } else {
-          console.log("Clearing interval");
           clearInterval(this.refreshInterval);
         }
       },
       immediate: true,
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.refreshInterval);
   },
   async mounted() {
     this.getAgents();
-    if (this.applicationStore.agentHeaders.length === 0) {
+    if (
+      this.applicationStore.agentHeaders.length === 0 ||
+      !this.applicationStore.agentHeaders[0].title
+    ) {
       this.applicationStore.agentHeaders = this.headersFull.filter(
         (h) => h.defaultHeader === true,
       );
     }
     this.selectedHeadersTemp = this.headersFull.filter((h) =>
-      this.applicationStore.agentHeaders.some((h2) => h2.text === h.text),
+      this.applicationStore.agentHeaders.some((h2) => h2.title === h.title),
     );
   },
   methods: {
@@ -331,7 +335,7 @@ export default {
           agent.tags = agent.tags.filter((t) => t.id !== tag.id);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(agent, tag) {
       agentApi
@@ -340,9 +344,9 @@ export default {
           const index = agent.tags.findIndex((x) => x.id === t.id);
           agent.tags.splice(index, 1, t);
           this.$emit("refresh-tags");
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(agent, tag) {
       agentApi
@@ -351,7 +355,7 @@ export default {
           agent.tags.push(t);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     submitHeaderForm(val) {
       this.selectedHeadersTemp = val;
@@ -362,7 +366,7 @@ export default {
         (h) => h.defaultHeader === true,
       );
       this.selectedHeadersTemp = this.headersFull.filter((h) =>
-        this.applicationStore.agentHeaders.some((h2) => h2.text === h.text),
+        this.applicationStore.agentHeaders.some((h2) => h2.title === h.title),
       );
     },
     getAgents() {
@@ -371,9 +375,9 @@ export default {
     async reloadSysInfo(agent) {
       try {
         await agentTaskApi.sysinfo(agent.session_id);
-        this.$snack.success(`SysInfo reload queued for ${agent.name}`);
+        this.snack.success(`SysInfo reload queued for ${agent.name}`);
       } catch (error) {
-        this.$snack.error(
+        this.snack.error(
           `Error reloading SysInfo for ${agent.name}: ${error.message}`,
         );
       }
@@ -394,9 +398,8 @@ export default {
       }
       return "";
     },
-    rowClass(item) {
-      if (item.stale) return "warning-row";
-      return "";
+    getRowProps({ item }) {
+      return { class: item.stale ? "warning-row" : "" };
     },
   },
 };
@@ -406,7 +409,7 @@ export default {
 .warning-row {
   background-color: #ffcccc;
 }
-.v-data-table.theme--dark .warning-row {
+.v-theme--dark .warning-row {
   background-color: #bd4c4c;
 }
 </style>
diff --git a/src/components/agents/ExecuteModuleDialog.vue b/src/components/agents/ExecuteModuleDialog.vue
index d11384dc..cfc133a6 100644
--- a/src/components/agents/ExecuteModuleDialog.vue
+++ b/src/components/agents/ExecuteModuleDialog.vue
@@ -17,7 +17,9 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="error" text @click.stop="show = false"> Close </v-btn>
+        <v-btn color="error" variant="text" @click.stop="show = false">
+          Close
+        </v-btn>
         <v-btn color="primary" :loading="loading" @click="submit">
           Submit
         </v-btn>
@@ -34,7 +36,7 @@ export default {
     AgentExecuteModule,
   },
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     loading: {
       type: Boolean,
       default: false,
@@ -52,16 +54,17 @@ export default {
       default: () => {},
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {};
   },
   computed: {
     show: {
       get() {
-        return this.value;
+        return this.modelValue;
       },
       set(value) {
-        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
       },
     },
   },
diff --git a/src/components/listeners/ListenersList.vue b/src/components/listeners/ListenersList.vue
index b61c9e4f..77187193 100644
--- a/src/components/listeners/ListenersList.vue
+++ b/src/components/listeners/ListenersList.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
 import ExpansionPanelFilter from "@/components/tables/ExpansionPanelFilter.vue";
 import AdvancedTable from "@/components/tables/AdvancedTable.vue";
@@ -51,12 +50,12 @@ export default {
     ExpansionPanelFilter,
     ListPageTop,
   },
+  inject: ["confirm"],
   data() {
     return {
-      moment,
       breads: [
         {
-          text: "Listeners",
+          title: "Listeners",
           disabled: true,
           href: "/listeners",
         },
@@ -107,7 +106,7 @@ export default {
     },
     async killListener(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to kill listener ${item.name}?`,
           { color: "red" },
@@ -118,7 +117,7 @@ export default {
     },
     async killListeners() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to kill ${this.selected.length} listeners?`,
           { color: "red" },
diff --git a/src/components/listeners/ListenersTable.vue b/src/components/listeners/ListenersTable.vue
index a77d6928..9fa9200f 100644
--- a/src/components/listeners/ListenersTable.vue
+++ b/src/components/listeners/ListenersTable.vue
@@ -6,12 +6,10 @@
       :loading="listenersStatus === 'loading'"
       :headers="headers"
       :items="sortedListeners"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
+      :items-per-page-options="[5, 10, 15, 20, 50, 100]"
       :items-per-page="15"
-      item-key="id"
-      dense
+      item-value="id"
+      density="compact"
       show-select
     >
       <template #item.enabled="{ item }">
@@ -37,9 +35,9 @@
         />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -81,7 +79,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import TagViewer from "@/components/TagViewer.vue";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
 import * as listenerApi from "@/api/listener-api";
@@ -93,6 +90,7 @@ export default {
     DateTimeDisplay,
     TagViewer,
   },
+  inject: ["snack"],
   props: {
     input: {
       type: Array,
@@ -103,24 +101,24 @@ export default {
       default: () => [],
     },
   },
+  emits: ["update:modelValue", "refresh-tags", "kill-listener"],
   data() {
     return {
-      moment,
       headers: [
         {
-          text: "",
+          title: "",
           align: "start",
           sortable: false,
           width: "5px",
-          value: "enabled",
+          key: "enabled",
         },
-        { text: "Name", value: "name" },
-        { text: "Template", value: "template" },
-        { text: "Host", value: "options.Host" },
-        { text: "Port", value: "options.Port" },
-        { text: "Created At", value: "created_at" },
-        { text: "Tags", value: "tags", sortable: false },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Name", key: "name" },
+        { title: "Template", key: "template" },
+        { title: "Host", key: "options.Host" },
+        { title: "Port", key: "options.Port" },
+        { title: "Created At", key: "created_at" },
+        { title: "Tags", key: "tags", sortable: false },
+        { title: "Actions", key: "actions", sortable: false },
       ],
       selected: [],
     };
@@ -152,7 +150,7 @@ export default {
       this.getListeners();
     },
     selected(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
   },
   mounted() {
@@ -166,7 +164,7 @@ export default {
           listener.tags = listener.tags.filter((t) => t.id !== tag.id);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(listener, tag) {
       listenerApi
@@ -175,9 +173,9 @@ export default {
           const index = listener.tags.findIndex((x) => x.id === t.id);
           listener.tags.splice(index, 1, t);
           this.$emit("refresh-tags");
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(listener, tag) {
       listenerApi
@@ -186,7 +184,7 @@ export default {
           listener.tags.push(t);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     async killListener(item) {
       this.$emit("kill-listener", item);
diff --git a/src/components/listeners/MalleableProfilesList.vue b/src/components/listeners/MalleableProfilesList.vue
index ce2a4ecc..af854944 100644
--- a/src/components/listeners/MalleableProfilesList.vue
+++ b/src/components/listeners/MalleableProfilesList.vue
@@ -8,98 +8,123 @@
       @create="create"
       @delete="deleteMalleableProfiles"
       @refresh="getMalleableProfiles"
-    >
-      <template slot="extra-stuff">
-        <v-text-field
-          v-model="filter"
-          append-icon="mdi-magnify"
-          outlined
-          dense
-          label="Search"
-          style="max-width: 250px; padding-top: 25px"
-        />
+    />
+    <advanced-table>
+      <template #filters>
+        <v-expansion-panel title="Search">
+          <v-expansion-panel-text>
+            <v-text-field
+              v-model="filter"
+              append-icon="mdi-magnify"
+              variant="outlined"
+              density="compact"
+              label="Search"
+              hide-details
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+        <v-expansion-panel title="Category">
+          <v-expansion-panel-text>
+            <v-checkbox
+              v-for="cat in categories"
+              :key="cat"
+              v-model="selectedCategories"
+              :label="cat"
+              :value="cat"
+              density="compact"
+              hide-details
+              color="primary"
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
       </template>
-    </list-page-top>
-    <v-data-table
-      v-model="selected"
-      :headers="headers"
-      :items="malleableProfiles"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
-      :items-per-page="15"
-      item-key="name"
-      :search="filter"
-      dense
-      show-select
-      :sort-by.sync="sortBy"
-      :sort-desc.sync="sortDesc"
-    >
-      <template #item.name="{ item }">
-        <router-link
-          style="color: inherit"
-          :to="{ name: 'malleableProfileEdit', params: { id: item.id } }"
+      <template #table>
+        <v-data-table
+          v-model="selected"
+          v-model:sort-by="sortBy"
+          :headers="headers"
+          :items="filteredProfiles"
+          :items-per-page-options="[5, 10, 15, 20, 50, 100]"
+          :items-per-page="15"
+          item-value="id"
+          density="compact"
+          show-select
         >
-          {{ item.name }}
-        </router-link>
-      </template>
-      <template #item.updated_at="{ item }">
-        <date-time-display :timestamp="item.updated_at" />
-      </template>
-      <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
-              <v-icon>fa-ellipsis-v</v-icon>
-            </v-btn>
-          </template>
-          <v-list class="ml-2 mr-2">
-            <v-list-item key="view" link>
-              <router-link
-                class="text-decoration-none"
-                style="color: inherit"
-                :to="{ name: 'malleableProfileEdit', params: { id: item.id } }"
-              >
-                <v-list-item-title>
-                  <v-icon>fa-binoculars</v-icon>
-                  View
-                </v-list-item-title>
-              </router-link>
-            </v-list-item>
-            <v-list-item
-              key="copy"
-              :to="{
-                name: 'malleableProfileNew',
-                params: { copy: true, id: item.id },
-              }"
-              link
-            >
-              <v-list-item-title>
-                <v-icon>fa-clone</v-icon>
-                Copy
-              </v-list-item-title>
-            </v-list-item>
-            <v-divider class="pb-4" />
-            <v-list-item
-              key="delete"
-              link
-              @click="deleteMalleableProfile(item)"
+          <template #item.name="{ item }">
+            <router-link
+              style="color: inherit"
+              :to="{ name: 'malleableProfileEdit', params: { id: item.id } }"
             >
-              <v-list-item-title>
-                <v-icon>fa-trash-alt</v-icon>
-                Delete
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
+              {{ item.name }}
+            </router-link>
+          </template>
+          <template #item.updated_at="{ item }">
+            <date-time-display :timestamp="item.updated_at" />
+          </template>
+          <template #item.actions="{ item }">
+            <v-menu>
+              <template #activator="{ props: activatorProps }">
+                <v-btn
+                  variant="text"
+                  icon
+                  size="x-small"
+                  v-bind="activatorProps"
+                >
+                  <v-icon>fa-ellipsis-v</v-icon>
+                </v-btn>
+              </template>
+              <v-list class="ml-2 mr-2">
+                <v-list-item key="view" link>
+                  <router-link
+                    class="text-decoration-none"
+                    style="color: inherit"
+                    :to="{
+                      name: 'malleableProfileEdit',
+                      params: { id: item.id },
+                    }"
+                  >
+                    <v-list-item-title>
+                      <v-icon>fa-binoculars</v-icon>
+                      View
+                    </v-list-item-title>
+                  </router-link>
+                </v-list-item>
+                <v-list-item
+                  key="copy"
+                  :to="{
+                    name: 'malleableProfileNew',
+                    params: { copy: true, id: item.id },
+                  }"
+                  link
+                >
+                  <v-list-item-title>
+                    <v-icon>fa-clone</v-icon>
+                    Copy
+                  </v-list-item-title>
+                </v-list-item>
+                <v-divider class="pb-4" />
+                <v-list-item
+                  key="delete"
+                  link
+                  @click="deleteMalleableProfile(item)"
+                >
+                  <v-list-item-title>
+                    <v-icon>fa-trash-alt</v-icon>
+                    Delete
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </v-data-table>
       </template>
-    </v-data-table>
+    </advanced-table>
   </div>
 </template>
 
 <script>
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
+import AdvancedTable from "@/components/tables/AdvancedTable.vue";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
 import { useMalleableProfileStore } from "@/stores/malleable-module";
 
@@ -108,27 +133,28 @@ export default {
   components: {
     DateTimeDisplay,
     ListPageTop,
+    AdvancedTable,
   },
+  inject: ["confirm"],
   data() {
     return {
       breads: [
         {
-          text: "Malleable Profiles",
+          title: "Malleable Profiles",
           disabled: true,
           href: "/malleable-profiles",
         },
       ],
       headers: [
-        { text: "Name", value: "name" },
-        { text: "Category", value: "category" },
-        { text: "Updated At", value: "updated_at" },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Name", key: "name" },
+        { title: "Category", key: "category" },
+        { title: "Updated At", key: "updated_at" },
+        { title: "Actions", key: "actions", sortable: false },
       ],
-      sortBy: "name",
-      sortDesc: false,
-      moment,
+      sortBy: [{ key: "name", order: "asc" }],
       filter: "",
       selected: [],
+      selectedCategories: [],
     };
   },
   computed: {
@@ -138,6 +164,32 @@ export default {
     malleableProfiles() {
       return this.malleableProfileStore.malleableProfiles;
     },
+    categories() {
+      const cats = new Set(
+        this.malleableProfiles.map((p) => p.category).filter(Boolean),
+      );
+      return [...cats].sort();
+    },
+    filteredProfiles() {
+      let profiles = this.malleableProfiles;
+
+      if (this.filter) {
+        const search = this.filter.toLowerCase();
+        profiles = profiles.filter(
+          (p) =>
+            p.name.toLowerCase().includes(search) ||
+            (p.category && p.category.toLowerCase().includes(search)),
+        );
+      }
+
+      if (this.selectedCategories.length > 0) {
+        profiles = profiles.filter((p) =>
+          this.selectedCategories.includes(p.category),
+        );
+      }
+
+      return profiles;
+    },
     showDelete() {
       return this.selected.length > 0;
     },
@@ -160,7 +212,7 @@ export default {
     },
     async deleteMalleableProfile(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete profile ${item.name}?`,
           { color: "red" },
@@ -171,14 +223,14 @@ export default {
     },
     async deleteMalleableProfiles() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete ${this.selected.length} profiles?`,
           { color: "red" },
         )
       ) {
-        this.selected.forEach((profile) => {
-          this.malleableProfileStore.deleteMalleableProfile(profile.id);
+        this.selected.forEach((id) => {
+          this.malleableProfileStore.deleteMalleableProfile(id);
         });
         this.selected = [];
       }
diff --git a/src/components/modules/ModulesTable.vue b/src/components/modules/ModulesTable.vue
index 43af2363..15d314ec 100644
--- a/src/components/modules/ModulesTable.vue
+++ b/src/components/modules/ModulesTable.vue
@@ -3,13 +3,11 @@
     <v-data-table
       :headers="headers"
       :items="filteredModules"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
+      :items-per-page-options="[5, 10, 15, 20, 50, 100]"
       :items-per-page="15"
-      item-key="id"
+      item-value="id"
       show-expand
-      dense
+      density="compact"
     >
       <template #item.id="{ item }">
         <router-link
@@ -31,16 +29,31 @@
         <technique-chips :techniques="item.techniques" :show-title="false" />
       </template>
       <template #item.needs_admin="{ item }">
-        <v-simple-checkbox v-model="item.needs_admin" disabled />
+        <v-checkbox
+          v-model="item.needs_admin"
+          disabled
+          hide-details
+          density="compact"
+        />
       </template>
       <template #item.opsec_safe="{ item }">
-        <v-simple-checkbox v-model="item.opsec_safe" disabled />
+        <v-checkbox
+          v-model="item.opsec_safe"
+          disabled
+          hide-details
+          density="compact"
+        />
       </template>
       <template #item.background="{ item }">
-        <v-simple-checkbox v-model="item.background" disabled />
+        <v-checkbox
+          v-model="item.background"
+          disabled
+          hide-details
+          density="compact"
+        />
       </template>
-      <template #expanded-item="{ headers: scopedHeader, item }">
-        <td :colspan="scopedHeader.length">
+      <template #expanded-row="{ columns, item }">
+        <td :colspan="columns.length">
           <div class="d-flex flex-column">
             <b>Description:</b>
             {{ item.description }}
@@ -104,25 +117,25 @@ export default {
     headers() {
       const headers = [
         {
-          text: "Name",
-          value: "name",
+          title: "Name",
+          key: "name",
         },
-        { text: "Language", value: "language", sort: this.sortLanguage },
-        { text: "Needs Admin", value: "needs_admin", width: "75px" },
-        { text: "Opsec Safe", value: "opsec_safe", width: "75px" },
-        { text: "Background", value: "background", width: "75px" },
+        { title: "Language", key: "language", sort: this.sortLanguage },
+        { title: "Needs Admin", key: "needs_admin", width: "75px" },
+        { title: "Opsec Safe", key: "opsec_safe", width: "75px" },
+        { title: "Background", key: "background", width: "75px" },
         {
-          text: "Techniques",
-          value: "techniques",
+          title: "Techniques",
+          key: "techniques",
           width: "300px",
           sortable: false,
         },
       ];
       if (this.showIds) {
         headers.unshift({
-          text: "id",
+          title: "id",
           align: "start",
-          value: "id",
+          key: "id",
         });
       }
 
diff --git a/src/components/plugins/PluginMarketplace.vue b/src/components/plugins/PluginMarketplace.vue
index 4d88658a..6b8ba6db 100644
--- a/src/components/plugins/PluginMarketplace.vue
+++ b/src/components/plugins/PluginMarketplace.vue
@@ -9,46 +9,36 @@
     />
     <div style="display: flex; flex-direction: row">
       <div style="width: 350px; min-width: 350px; max-width: 350px">
-        <v-card elevation="2" outlined flat class="pl-4 pr-4 pb-4">
+        <v-card elevation="2" border class="pl-4 pr-4 pb-4">
           <v-list
             :disabled="installing"
             class="overflow-y-auto"
             style="max-height: 600px"
           >
-            <v-list-item-group
-              v-model="selectedPluginIndex"
-              mandatory
-              active-class="primary--text"
+            <v-list-item
+              v-for="(plugin, pluginIdx) in marketplacePlugins"
+              :key="plugin.name"
+              :active="selectedPluginIndex === pluginIdx"
+              selectable
+              @click="selectedPluginIndex = pluginIdx"
             >
-              <v-list-item
-                v-for="plugin in marketplacePlugins"
-                :key="plugin.name"
-                selectable
-              >
-                <v-list-item-avatar>
+              <template #prepend>
+                <v-avatar>
                   <img
                     v-if="plugin.icon"
                     :src="plugin.icon"
                     alt="Plugin Icon"
                   />
                   <v-icon v-else>fa-puzzle-piece</v-icon>
-                </v-list-item-avatar>
-                <v-list-item-content>
-                  <v-list-item-title>{{ plugin.name }}</v-list-item-title>
-                </v-list-item-content>
-                <v-list-item-action>
-                  <v-icon
-                    v-if="
-                      marketplacePlugins.find((p) => p.name === plugin.name)
-                        .installed
-                    "
-                    color="green"
-                  >
-                    fa-circle-check
-                  </v-icon>
-                </v-list-item-action>
-              </v-list-item>
-            </v-list-item-group>
+                </v-avatar>
+              </template>
+              <v-list-item-title>{{ plugin.name }}</v-list-item-title>
+              <template #append>
+                <v-icon v-if="plugin.installed" color="green">
+                  fa-circle-check
+                </v-icon>
+              </template>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -56,8 +46,7 @@
         <v-card
           v-if="selectedPluginObj"
           elevation="2"
-          outlined
-          flat
+          border
           style="max-height: 600px"
           class="pl-4 pr-4 pb-4 overflow-y-auto"
         >
@@ -96,7 +85,7 @@
             >
               <v-btn
                 v-if="!isSelectedInstalled"
-                class="pa-4 ma-4"
+                class="ma-4"
                 color="primary"
                 :loading="installing"
                 @click="installSelectedPlugin"
@@ -115,7 +104,7 @@
                   },
                 }"
               >
-                <v-btn color="primary" class="pa-4 ma-4">Go To Plugin</v-btn>
+                <v-btn color="primary" class="ma-4">Go To Plugin</v-btn>
               </router-link>
               <v-select
                 v-model="selectedPluginRegistry"
@@ -123,7 +112,7 @@
                 :disabled="registryOptions.length < 2"
                 label="Registry"
                 :items="registryOptions"
-                item-text="name"
+                item-title="name"
                 item-value="name"
               />
               <span v-if="isSelectedInstalled">
@@ -137,13 +126,13 @@
                 label="Version"
                 style="width: 200px; max-width: 200px"
                 :items="versionOptions"
-                item-text="name"
+                item-title="name"
                 item-value="name"
               />
             </div>
           </div>
           <v-divider class="mt-4 mb-4" />
-          <v-card class="pa-4" outlined elevation="2">
+          <v-card class="pa-4" elevation="2" border>
             <vue-markdown :source="selectedPluginObj.description" />
           </v-card>
           <v-divider class="mt-4 mb-4" />
@@ -164,19 +153,20 @@ export default {
     VueMarkdown,
     AuthorChips,
   },
+  inject: ["snack"],
   data() {
     return {
       marketplacePlugins: [],
       breads: [
         {
-          text: "Plugin Marketplace",
+          title: "Plugin Marketplace",
           disabled: true,
           href: "/plugin-marketplace",
         },
       ],
       headers: [
-        { text: "Name", value: "name" },
-        { text: "Description", value: "description" },
+        { title: "Name", key: "name" },
+        { title: "Description", key: "description" },
       ],
       selectedPluginIndex: -1,
       selectedPluginRegistry: "",
@@ -218,7 +208,11 @@ export default {
     },
   },
   async mounted() {
-    this.refreshMarketplace();
+    try {
+      await this.refreshMarketplace();
+    } catch (err) {
+      this.snack.error(`Failed to load plugin marketplace: ${err}`);
+    }
   },
   methods: {
     async refreshMarketplace() {
@@ -236,7 +230,7 @@ export default {
           registry: this.selectedPluginRegistry,
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.installing = false;
diff --git a/src/components/plugins/PluginTasksList.vue b/src/components/plugins/PluginTasksList.vue
index b0f8c145..3e75b9e5 100644
--- a/src/components/plugins/PluginTasksList.vue
+++ b/src/components/plugins/PluginTasksList.vue
@@ -63,7 +63,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import { mapState } from "pinia";
 
 import PluginTasksTable from "@/components/plugins/PluginTasksTable.vue";
@@ -107,7 +106,7 @@ export default {
     return {
       breads: [
         {
-          text: "Plugin Tasks",
+          title: "Plugin Tasks",
           disabled: true,
           href: "/plugin-tasks",
         },
@@ -115,7 +114,6 @@ export default {
       tasks: [],
       search: "",
       loading: false,
-      moment,
       selectedPlugins: [],
       selectedUsers: [],
       selectedTags: [],
diff --git a/src/components/plugins/PluginTasksTable.vue b/src/components/plugins/PluginTasksTable.vue
index 44960502..692af676 100644
--- a/src/components/plugins/PluginTasksTable.vue
+++ b/src/components/plugins/PluginTasksTable.vue
@@ -12,29 +12,22 @@
         @submit="submitHeaderForm"
       />
     </div>
-    <v-pagination
-      v-model="currentPage"
-      :length="totalPages"
-      :total-visible="10"
-      @input="handlePageChange"
-    />
-    <v-data-table
+    <v-data-table-server
+      v-model:sort-by="sortBy"
+      v-model:items-per-page="itemsPerPage"
+      v-model:page="currentPage"
       :headers="headers"
       :items="tasks"
-      item-key="uniqueId"
-      :sort-by="sortBy"
-      :sort-desc="sortDesc"
-      :server-items-length="totalItems"
-      :footer-props="{ 'items-per-page-options': [10, 25, 50, 100] }"
-      :items-per-page.sync="itemsPerPage"
+      item-value="uniqueId"
+      :items-length="totalItems"
+      :items-per-page-options="[10, 25, 50, 100]"
       :loading="loading"
-      :page="currentPage"
       show-expand
-      @item-expanded="handleItemExpanded"
+      @update:expanded="handleItemExpanded"
       @update:options="handleOptionsChange"
     >
-      <template #expanded-item="{ headers: scopedHeaders, item }">
-        <td :colspan="scopedHeaders.length" class="pa-4">
+      <template #expanded-row="{ columns, item }">
+        <td :colspan="columns.length" class="pa-4">
           <v-card flat>
             <v-card-title class="subtitle-1 pb-4">
               <v-row no-gutters align="center">
@@ -42,10 +35,10 @@
                   <span class="font-weight-bold">Task #{{ item.id }}</span>
                   <v-chip
                     v-if="item.module_name || item.task_name"
-                    small
+                    size="small"
                     class="ml-2"
                     color="primary"
-                    outlined
+                    variant="outlined"
                   >
                     {{ item.module_name || item.task_name }}
                   </v-chip>
@@ -69,7 +62,7 @@
                       v-for="(value, key) in expandedTasks[item.uniqueId]
                         .options || expandedTasks[item.uniqueId].module_options"
                       :key="key"
-                      small
+                      size="small"
                       label
                       class="mr-1 mb-1"
                     >
@@ -83,12 +76,13 @@
                 <v-col class="text-right">
                   <v-switch
                     v-model="expandedTasks[item.uniqueId].backgroundColor"
+                    color="primary"
                     false-value="white"
                     true-value="black"
                     label="Dark Mode Output"
                     hide-details
                     class="mt-0 pt-0 d-inline-block"
-                    @change="updateTaskBackgroundColor(item)"
+                    @update:model-value="updateTaskBackgroundColor(item)"
                   />
                 </v-col>
               </v-row>
@@ -150,8 +144,8 @@
                             d.filename.match(/[^/]+(jpg|jpeg|png|gif)$/),
                           )
                         "
-                        text
-                        x-small
+                        variant="text"
+                        size="x-small"
                         @click="getImagesForTask(item)"
                       >
                         View Images
@@ -173,7 +167,7 @@
                           :src="imageData(item, download)"
                           :alt="download.filename"
                           :max-width="400"
-                          class="grey lighten-2 rounded mb-2"
+                          class="bg-grey-lighten-2 rounded mb-2"
                           contain
                         >
                           <template #placeholder>
@@ -184,7 +178,7 @@
                             >
                               <v-progress-circular
                                 indeterminate
-                                color="grey lighten-5"
+                                color="grey-lighten-5"
                               />
                             </v-row>
                           </template>
@@ -222,19 +216,31 @@
         </td>
       </template>
       <template #item.status="{ item }">
-        <v-icon v-if="item.status === 'started'" color="blue" small>
+        <v-icon v-if="item.status === 'started'" color="blue" size="small">
           fa-check-square
         </v-icon>
-        <v-icon v-else-if="item.status === 'queued'" color="orange" small>
+        <v-icon
+          v-else-if="item.status === 'queued'"
+          color="orange"
+          size="small"
+        >
           fa-clock
         </v-icon>
-        <v-icon v-else-if="item.status === 'completed'" color="green" small>
+        <v-icon
+          v-else-if="item.status === 'completed'"
+          color="green"
+          size="small"
+        >
           fa-check-circle
         </v-icon>
-        <v-icon v-else-if="item.status === 'error'" color="red" small>
+        <v-icon v-else-if="item.status === 'error'" color="red" size="small">
           fa-times-circle
         </v-icon>
-        <v-icon v-else-if="item.status === 'continuous'" color="purple" small>
+        <v-icon
+          v-else-if="item.status === 'continuous'"
+          color="purple"
+          size="small"
+        >
           fa-infinity
         </v-icon>
       </template>
@@ -261,14 +267,14 @@
         />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
           <v-list class="ml-2 mr-2">
-            <v-subheader>Execution</v-subheader>
+            <v-list-subheader>Execution</v-list-subheader>
             <v-list-item
               v-show="supportsRerun(item)"
               key="rerunTask"
@@ -276,26 +282,26 @@
               @click="rerunTask(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-redo</v-icon>
+                <v-icon size="small">fa-redo</v-icon>
                 Rerun Task
               </v-list-item-title>
             </v-list-item>
             <v-divider />
-            <v-subheader>Input</v-subheader>
+            <v-list-subheader>Input</v-list-subheader>
             <v-list-item key="clipboardInput" link @click="copyInput(item)">
               <v-list-item-title>
-                <v-icon small>fa-paperclip</v-icon>
+                <v-icon size="small">fa-paperclip</v-icon>
                 Copy to Clipboard
               </v-list-item-title>
             </v-list-item>
             <v-list-item key="downloadInput" link @click="downloadInput(item)">
               <v-list-item-title>
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 Download
               </v-list-item-title>
             </v-list-item>
             <v-divider v-if="hasOutput(item)" />
-            <v-subheader v-if="hasOutput(item)">Output</v-subheader>
+            <v-list-subheader v-if="hasOutput(item)">Output</v-list-subheader>
             <v-list-item
               v-if="hasOutput(item)"
               key="clipboardOutput"
@@ -303,7 +309,7 @@
               @click="copyOutput(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-paperclip</v-icon>
+                <v-icon size="small">fa-paperclip</v-icon>
                 Copy to Clipboard
               </v-list-item-title>
             </v-list-item>
@@ -314,12 +320,14 @@
               @click="downloadOutput(item)"
             >
               <v-list-item-title>
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 Download
               </v-list-item-title>
             </v-list-item>
             <v-divider v-if="item.downloads.length > 0" />
-            <v-subheader v-if="item.downloads.length > 0">Files</v-subheader>
+            <v-list-subheader v-if="item.downloads.length > 0"
+              >Files</v-list-subheader
+            >
             <v-list-item
               v-for="download in item.downloads"
               :key="'download-' + download.id"
@@ -327,20 +335,18 @@
               @click="downloadFile(download)"
             >
               <v-list-item-title title="Download file">
-                <v-icon small>fa-download</v-icon>
+                <v-icon size="small">fa-download</v-icon>
                 {{ download.filename }}
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
       </template>
-    </v-data-table>
+    </v-data-table-server>
   </div>
 </template>
 
 <script>
-import Vue from "vue";
-import moment from "moment";
 import debounce from "lodash.debounce";
 // eslint-disable-next-line import/no-named-default
 import { default as AnsiUp } from "ansi_up";
@@ -352,6 +358,7 @@ import DownloadMixin from "@/mixins/download-stager";
 import { useApplicationStore } from "@/stores/application-module";
 import * as downloadApi from "@/api/download-api";
 import * as pluginApi from "@/api/plugin-api";
+import { copyToClipboard } from "@/utils/clipboard";
 
 export default {
   name: "PluginTasksTable",
@@ -362,6 +369,7 @@ export default {
     HeaderMenu,
   },
   mixins: [DownloadMixin],
+  inject: ["snack"],
   props: {
     plugin: {
       type: Object,
@@ -401,21 +409,18 @@ export default {
     return {
       tasks: [],
       currentPage: 1,
-      totalPages: 1,
       totalItems: 0,
       itemsPerPage: 10,
       loading: false,
-      moment,
-      sortBy: "updated_at",
-      sortDesc: true,
+      sortBy: [{ key: "updated_at", order: "desc" }],
       refreshInterval: null,
       expandedTasks: {},
       debouncedGetTasks: debounce(this.getTasks, 500),
       selectedHeadersTemp: [],
       headersFull: [
         {
-          text: "Task ID",
-          value: "id",
+          title: "Task ID",
+          key: "id",
           sortable: true,
           defaultHeader: false,
           alwaysShow: false,
@@ -423,51 +428,51 @@ export default {
           order: 1,
         },
         {
-          text: "Status",
-          value: "status",
+          title: "Status",
+          key: "status",
           sortable: true,
           defaultHeader: true,
           order: 2,
         },
         {
-          text: "Plugin",
-          value: "plugin_id",
+          title: "Plugin",
+          key: "plugin_id",
           sortable: true,
           defaultHeader: true,
           order: 3,
         },
         {
-          text: "Task Input",
-          value: "input",
+          title: "Task Input",
+          key: "input",
           sortable: false,
           defaultHeader: false,
           order: 5,
         },
         {
-          text: "User",
-          value: "username",
+          title: "User",
+          key: "username",
           sortable: false,
           defaultHeader: true,
           order: 6,
         },
         {
-          text: "Updated At",
-          value: "updated_at",
+          title: "Updated At",
+          key: "updated_at",
           sortable: true,
           defaultHeader: true,
           order: 7,
         },
         {
-          text: "Tags",
-          value: "tags",
+          title: "Tags",
+          key: "tags",
           sortable: false,
           width: 400,
           defaultHeader: true,
           order: 8,
         },
         {
-          text: "Actions",
-          value: "actions",
+          title: "Actions",
+          key: "actions",
           sortable: false,
           defaultHeader: true,
           alwaysShow: true,
@@ -485,7 +490,7 @@ export default {
         .filter(
           (h) =>
             this.applicationStore.pluginTaskHeaders.findIndex(
-              (h2) => h2.text === h.text,
+              (h2) => h2.title === h.title,
             ) > -1,
         )
         .sort((a, b) => a.order - b.order);
@@ -530,16 +535,21 @@ export default {
   },
   mounted() {
     this.debouncedGetTasks();
-    if (this.applicationStore.pluginTaskHeaders.length === 0) {
+    if (
+      this.applicationStore.pluginTaskHeaders.length === 0 ||
+      !this.applicationStore.pluginTaskHeaders[0].title
+    ) {
       this.applicationStore.pluginTaskHeaders = this.headersFull.filter(
         (h) => h.defaultHeader === true,
       );
     }
     this.selectedHeadersTemp = this.headersFull.filter((h) =>
-      this.applicationStore.pluginTaskHeaders.some((h2) => h2.text === h.text),
+      this.applicationStore.pluginTaskHeaders.some(
+        (h2) => h2.title === h.title,
+      ),
     );
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.refreshInterval);
   },
   methods: {
@@ -553,7 +563,7 @@ export default {
       );
       this.selectedHeadersTemp = this.headersFull.filter((h) =>
         this.applicationStore.pluginTaskHeaders.some(
-          (h2) => h2.text === h.text,
+          (h2) => h2.title === h.title,
         ),
       );
     },
@@ -579,14 +589,10 @@ export default {
       pluginApi
         .deleteTag(task.plugin_id, task.id, tag.id)
         .then(() => {
-          this.$set(
-            task,
-            "tags",
-            task.tags.filter((t) => t.id !== tag.id),
-          );
+          task.tags = task.tags.filter((t) => t.id !== tag.id);
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(task, tag) {
       pluginApi
@@ -595,18 +601,18 @@ export default {
           const index = task.tags.findIndex((x) => x.id === t.id);
           task.tags.splice(index, 1, t);
           this.$emit("refresh-tags");
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(task, tag) {
       pluginApi
         .addTag(task.plugin_id, task.id, tag)
         .then((t) => {
-          this.$set(task, "tags", [...task.tags, t]);
+          task.tags = [...task.tags, t];
           this.$emit("refresh-tags");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     truncateMessage(task) {
       if (task) {
@@ -622,11 +628,8 @@ export default {
       }
       this.expandedTasks[task.uniqueId].backgroundColor = task.backgroundColor;
 
-      // Need to call vue set to trigger reactivity on the table
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
-    },
-    isDownload(task) {
-      return task.downloads && task.downloads.length > 0;
+      // Trigger reactivity on the table
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
     },
     downloadFile(download) {
       downloadApi.getDownload(download.id);
@@ -638,10 +641,10 @@ export default {
       if (task.input) {
         if (!this.expandedTasks[task.uniqueId]?.full_input) {
           const data = await pluginApi.getTask(task.plugin_id, task.id);
-          Vue.set(this.expandedTasks, task.uniqueId, {
+          this.expandedTasks[task.uniqueId] = {
             ...this.expandedTasks[task.uniqueId],
             ...data,
-          });
+          };
         }
 
         this.downloadText(
@@ -659,32 +662,21 @@ export default {
       if (task.input) {
         if (!this.expandedTasks[task.uniqueId]?.full_input) {
           const data = await pluginApi.getTask(task.plugin_id, task.id);
-          Vue.set(this.expandedTasks, task.uniqueId, {
+          this.expandedTasks[task.uniqueId] = {
             ...this.expandedTasks[task.uniqueId],
             ...data,
-          });
+          };
         }
 
-        try {
-          navigator.clipboard.writeText(
-            this.expandedTasks[task.uniqueId].full_input,
-          );
-        } catch (error) {
-          this.$snack.warn(
-            "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-          );
-        }
+        await copyToClipboard(
+          this.expandedTasks[task.uniqueId].full_input,
+          this.snack,
+        );
       }
     },
-    copyOutput(task) {
+    async copyOutput(task) {
       if (task.output) {
-        try {
-          navigator.clipboard.writeText(task.output);
-        } catch (error) {
-          this.$snack.warn(
-            "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-          );
-        }
+        await copyToClipboard(task.output, this.snack);
       }
     },
     imageData(task, download) {
@@ -700,11 +692,11 @@ export default {
     async getImagesForTask(task) {
       if (!this.expandedTasks[task.uniqueId].imagesRetrieved) {
         const data = await pluginApi.getTask(task.plugin_id, task.id);
-        Vue.set(this.expandedTasks, task.uniqueId, {
+        this.expandedTasks[task.uniqueId] = {
           ...this.expandedTasks[task.uniqueId],
           ...data,
           imagesRetrieved: true,
-        });
+        };
       }
 
       for (let i = 0; i < task.downloads.length; i++) {
@@ -718,64 +710,67 @@ export default {
           this.expandedTasks[task.uniqueId].downloads[i].image = url;
         }
       }
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
     },
     async toggleSeeFullInput(task) {
       if (!task.expandedInput) {
         const data = await pluginApi.getTask(task.plugin_id, task.id);
-        Vue.set(this.expandedTasks, task.uniqueId, {
+        this.expandedTasks[task.uniqueId] = {
           ...this.expandedTasks[task.uniqueId],
           ...data,
           expandedInput: true,
-        });
+        };
         task.expandedInput = true;
       } else {
         this.expandedTasks[task.uniqueId].expandedInput = false;
         task.expandedInput = false;
       }
 
-      // Need to call vue set to trigger reactivity on the table
-      Vue.set(this.tasks, this.tasks.indexOf(task), task);
+      // Trigger reactivity on the table
+      this.tasks.splice(this.tasks.indexOf(task), 1, task);
     },
     async rerunTask(task) {
       try {
         const fullTask = await pluginApi.getTask(task.plugin_id, task.id);
         const options = fullTask.options || {};
         await pluginApi.executePlugin(fullTask.plugin_id, options);
-        this.$snack.info(`Plugin ${fullTask.plugin_id} rerun queued.`);
+        this.snack.info(`Plugin ${fullTask.plugin_id} rerun queued.`);
       } catch (err) {
-        this.$snack.error(`Error rerunning task: ${err}`);
+        this.snack.error(`Error rerunning task: ${err}`);
       }
     },
     supportsRerun() {
       return true;
     },
-    async handleItemExpanded({ item, value }) {
-      if (value && !this.expandedTasks[item.uniqueId].fullTaskLoaded) {
-        const data = await pluginApi.getTask(item.plugin_id, item.id);
-        Vue.set(this.expandedTasks, item.uniqueId, {
-          ...this.expandedTasks[item.uniqueId],
-          ...data,
-          fullTaskLoaded: true,
-        });
-        // Need to call vue set to trigger reactivity on the table
-        Vue.set(this.tasks, this.tasks.indexOf(item), item);
-      }
-    },
-    handlePageChange() {
-      this.debouncedGetTasks();
+    async handleItemExpanded(expandedIds) {
+      const toLoad = expandedIds.filter(
+        (uniqueId) =>
+          this.expandedTasks[uniqueId] &&
+          !this.expandedTasks[uniqueId].fullTaskLoaded,
+      );
+
+      await Promise.all(
+        toLoad.map(async (uniqueId) => {
+          const item = this.tasks.find((t) => t.uniqueId === uniqueId);
+          if (!item) return;
+          try {
+            const data = await pluginApi.getTask(item.plugin_id, item.id);
+            this.expandedTasks[item.uniqueId] = {
+              ...this.expandedTasks[item.uniqueId],
+              ...data,
+              fullTaskLoaded: true,
+            };
+            this.tasks.splice(this.tasks.indexOf(item), 1, item);
+          } catch (err) {
+            this.snack.error(`Error loading task ${item.id}: ${err}`);
+          }
+        }),
+      );
     },
     handleOptionsChange(value) {
       this.currentPage = value.page;
       this.itemsPerPage = value.itemsPerPage;
-
-      if (value.sortBy.length > 0) {
-        this.sortBy = value.sortBy[0];
-        this.sortDesc = value.sortDesc[0];
-      } else {
-        this.sortBy = "id";
-        this.sortDesc = true;
-      }
+      this.sortBy = Array.isArray(value.sortBy) ? value.sortBy : [];
       this.debouncedGetTasks();
     },
     async getTasks() {
@@ -787,7 +782,6 @@ export default {
         // when no agents are selected. Even though the api sees no agents as all agents.
         this.tasks = [];
         this.currentPage = 1;
-        this.totalPages = 1;
         this.totalItems = 0;
         return;
       }
@@ -797,47 +791,52 @@ export default {
         plugins = this.selectedPlugins;
       }
 
-      const response = await pluginApi.getTasks(plugins, {
-        page: this.currentPage,
-        limit: this.itemsPerPage,
-        sortBy: this.sortBy,
-        sortOrder: this.sortDesc ? "desc" : "asc",
-        users: this.selectedUsers,
-        tags: this.selectedTags,
-        search: this.search,
-      });
-      this.currentPage = response.page;
-      this.totalPages = response.total_pages;
-      this.totalItems = response.total;
-
-      // iterate response.records and add expandedInput if it exists in expandedTasks
-      // this ensures that the expandedInput doesn't get wiped away after a refresh
-      this.tasks = response.records.map((task) => {
-        task.uniqueId = `${task.plugin_id}-${task.id}`;
+      const sortEntry =
+        this.sortBy.length > 0 ? this.sortBy[0] : { key: "id", order: "desc" };
+      try {
+        const response = await pluginApi.getTasks(plugins, {
+          page: this.currentPage,
+          limit: this.itemsPerPage,
+          sortBy: sortEntry.key,
+          sortOrder: sortEntry.order,
+          users: this.selectedUsers,
+          tags: this.selectedTags,
+          search: this.search,
+        });
+        this.currentPage = response.page;
+        this.totalItems = response.total;
 
-        if (!this.expandedTasks[task.uniqueId]) {
-          Vue.set(this.expandedTasks, task.uniqueId, {});
-        }
+        // iterate response.records and add expandedInput if it exists in expandedTasks
+        // this ensures that the expandedInput doesn't get wiped away after a refresh
+        this.tasks = response.records.map((task) => {
+          task.uniqueId = `${task.plugin_id}-${task.id}`;
 
-        if (this.expandedTasks[task.uniqueId].expandedInput) {
-          task.expandedInput = true;
-        }
+          if (!this.expandedTasks[task.uniqueId]) {
+            this.expandedTasks[task.uniqueId] = {};
+          }
 
-        this.expandedTasks[task.uniqueId].backgroundColor =
-          this.expandedTasks[task.uniqueId].backgroundColor || "black";
-        task.backgroundColor =
-          this.expandedTasks[task.uniqueId].backgroundColor;
+          if (this.expandedTasks[task.uniqueId].expandedInput) {
+            task.expandedInput = true;
+          }
 
-        if (this.isAnsi(task.output || "")) {
-          this.expandedTasks[task.uniqueId].htmlOutput = this.ansiToHtml(
-            task.output,
-          );
-        }
+          this.expandedTasks[task.uniqueId].backgroundColor =
+            this.expandedTasks[task.uniqueId].backgroundColor || "black";
+          task.backgroundColor =
+            this.expandedTasks[task.uniqueId].backgroundColor;
 
-        return task;
-      });
+          if (this.isAnsi(task.output || "")) {
+            this.expandedTasks[task.uniqueId].htmlOutput = this.ansiToHtml(
+              task.output,
+            );
+          }
 
-      this.loading = false;
+          return task;
+        });
+      } catch (err) {
+        this.snack.error(`Failed to load tasks: ${err}`);
+      } finally {
+        this.loading = false;
+      }
     },
   },
 };
diff --git a/src/components/plugins/PluginsList.vue b/src/components/plugins/PluginsList.vue
index c92eb902..9fa21eb2 100644
--- a/src/components/plugins/PluginsList.vue
+++ b/src/components/plugins/PluginsList.vue
@@ -8,20 +8,14 @@
       @refresh="getPlugins"
     />
     <v-list>
-      <v-list-item-group v-model="activeThing">
-        <router-link
-          v-for="plugin in plugins"
-          :key="plugin.id"
-          style="color: inherit; text-decoration: none"
-          :to="{ name: 'pluginEdit', params: { id: plugin.id } }"
-        >
-          <v-list-item class="list-item">
-            <v-list-item-content>
-              <v-list-item-title>{{ plugin.name }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </router-link>
-      </v-list-item-group>
+      <v-list-item
+        v-for="plugin in plugins"
+        :key="plugin.id"
+        :to="{ name: 'pluginEdit', params: { id: plugin.id } }"
+        link
+      >
+        <v-list-item-title>{{ plugin.name }}</v-list-item-title>
+      </v-list-item>
     </v-list>
   </div>
 </template>
@@ -37,10 +31,9 @@ export default {
   },
   data() {
     return {
-      activeThing: null,
       breads: [
         {
-          text: "Plugins",
+          title: "Plugins",
           disabled: true,
           href: "/plugins",
         },
diff --git a/src/components/stagers/StagersTable.vue b/src/components/stagers/StagersTable.vue
index eaf4752c..bf52fd36 100644
--- a/src/components/stagers/StagersTable.vue
+++ b/src/components/stagers/StagersTable.vue
@@ -4,13 +4,11 @@
       v-model="selected"
       :headers="headers"
       :items="filteredStagers"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
+      :items-per-page-options="[5, 10, 15, 20, 50, 100]"
       :items-per-page="15"
       :loading="stagersStatus === 'loading'"
-      item-key="id"
-      dense
+      item-value="id"
+      density="compact"
       show-select
     >
       <template #item.name="{ item }">
@@ -33,9 +31,9 @@
         <date-time-display :timestamp="item.created_at" />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -87,7 +85,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import DownloadMixin from "@/mixins/download-stager";
 import CopyMixin from "@/mixins/copy-stager";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
@@ -101,6 +98,7 @@ export default {
     DateTimeDisplay,
   },
   mixins: [DownloadMixin, CopyMixin],
+  inject: ["snack"],
   props: {
     onlyMyStagers: {
       type: Boolean,
@@ -111,16 +109,16 @@ export default {
       default: () => [],
     },
   },
+  emits: ["update:modelValue", "delete-stager"],
   data() {
     return {
-      moment,
       headers: [
-        { text: "Name", value: "name" },
-        { text: "Listener", value: "options.Listener" },
-        { text: "Type", value: "template" },
-        { text: "Language", value: "options.Language" },
-        { text: "Created At", value: "created_at" },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Name", key: "name" },
+        { title: "Listener", key: "options.Listener" },
+        { title: "Type", key: "template" },
+        { title: "Language", key: "options.Language" },
+        { title: "Created At", key: "created_at" },
+        { title: "Actions", key: "actions", sortable: false },
       ],
       selected: [],
     };
@@ -151,7 +149,7 @@ export default {
   },
   watch: {
     selected(val) {
-      this.$emit("input", val);
+      this.$emit("update:modelValue", val);
     },
   },
   mounted() {
diff --git a/src/components/tables/AdvancedTable.vue b/src/components/tables/AdvancedTable.vue
index 1d693a69..77909b71 100644
--- a/src/components/tables/AdvancedTable.vue
+++ b/src/components/tables/AdvancedTable.vue
@@ -1,11 +1,11 @@
 <template>
   <div style="display: flex; flex-direction: row; flex-wrap: wrap">
-    <v-card class="mr-2 pa-2" elevation="2" outlined style="flex-basis: 250px">
+    <v-card class="mr-2 pa-2" elevation="2" border style="flex-basis: 250px">
       <v-expansion-panels class="mb-6" multiple>
         <slot name="filters" />
       </v-expansion-panels>
     </v-card>
-    <v-card style="flex: 1; min-width: 0" elevation="2" outlined>
+    <v-card style="flex: 1; min-width: 0" elevation="2" border>
       <slot name="table" />
     </v-card>
   </div>
diff --git a/src/components/tables/ExpansionPanelBoolean.vue b/src/components/tables/ExpansionPanelBoolean.vue
index 184eddfa..c48daf45 100644
--- a/src/components/tables/ExpansionPanelBoolean.vue
+++ b/src/components/tables/ExpansionPanelBoolean.vue
@@ -19,7 +19,7 @@ export default {
     ExpansionPanelFilter,
   },
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default: () => [],
     },
@@ -32,6 +32,7 @@ export default {
       default: false,
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       selectedItems: [],
@@ -44,7 +45,7 @@ export default {
   watch: {
     selectedItems: {
       handler(val) {
-        this.$emit("input", val);
+        this.$emit("update:modelValue", val);
       },
     },
   },
diff --git a/src/components/tables/ExpansionPanelFilter.vue b/src/components/tables/ExpansionPanelFilter.vue
index f3f72562..e4dcde54 100644
--- a/src/components/tables/ExpansionPanelFilter.vue
+++ b/src/components/tables/ExpansionPanelFilter.vue
@@ -1,21 +1,26 @@
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header expand-icon="mdi-menu-down">
+    <v-expansion-panel-title expand-icon="mdi-menu-down">
       {{ title }}
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
-      <v-checkbox v-model="selectedAll" x-small dense label="Select All" />
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <v-checkbox
+        v-model="selectedAll"
+        color="primary"
+        density="compact"
+        label="Select All"
+      />
       <v-divider class="pb-4" />
       <v-checkbox
         v-for="item in items"
         :key="item[itemKey]"
         v-model="selectedItems"
         :value="item[itemValue]"
-        x-small
-        dense
+        color="primary"
+        density="compact"
         :label="item[label]"
       />
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -23,7 +28,7 @@
 export default {
   name: "ExpansionPanelFilter",
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default: () => [],
     },
@@ -52,6 +57,7 @@ export default {
       default: false,
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       selectedItems: [],
@@ -74,7 +80,7 @@ export default {
   watch: {
     selectedItems: {
       handler(val) {
-        this.$emit("input", val);
+        this.$emit("update:modelValue", val);
       },
     },
     items: {
diff --git a/src/components/tables/ExpansionPanelSearch.vue b/src/components/tables/ExpansionPanelSearch.vue
index 6e739c0d..516090c9 100644
--- a/src/components/tables/ExpansionPanelSearch.vue
+++ b/src/components/tables/ExpansionPanelSearch.vue
@@ -1,17 +1,17 @@
 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header expand-icon="mdi-menu-down">
+    <v-expansion-panel-title expand-icon="mdi-menu-down">
       {{ title }}
-    </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <v-text-field
         v-model="internalValue"
         :label="label"
-        outlined
-        dense
+        variant="outlined"
+        density="compact"
         required
       />
-    </v-expansion-panel-content>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -19,7 +19,7 @@
 export default {
   name: "ExpansionPanelSearch",
   props: {
-    value: {
+    modelValue: {
       type: String,
       required: true,
     },
@@ -32,6 +32,7 @@ export default {
       required: true,
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       internalValue: "",
@@ -40,12 +41,12 @@ export default {
   watch: {
     internalValue: {
       handler(val) {
-        this.$emit("input", val);
+        this.$emit("update:modelValue", val);
       },
     },
   },
   mounted() {
-    this.internalValue = this.value;
+    this.internalValue = this.modelValue;
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index a7ec5376..e13a5edc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,5 @@
-import Vue from "vue";
-import Chat from "vue-beautiful-chat";
-import { createPinia, PiniaVuePlugin } from "pinia";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 import App from "./App.vue";
@@ -9,17 +8,30 @@ import router from "./router";
 import "@fontsource/roboto";
 import vuetify from "./plugins/vuetify";
 
-Vue.use(Chat);
+const app = createApp(App);
 
-Vue.use(PiniaVuePlugin);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
-Vue.use(pinia);
-Vue.config.productionTip = false;
 
-new Vue({
-  vuetify,
-  pinia,
-  router,
-  render: (h) => h(App),
-}).$mount("#app");
+app.config.errorHandler = (err, instance, info) => {
+  console.error(`[Starkiller] Unhandled error in ${info}:`, err);
+  try {
+    // eslint-disable-next-line no-underscore-dangle
+    const root = instance?.$?.appContext?.app?._instance;
+    const snack = root?.proxy?.$data?.snackProxy;
+    if (snack) {
+      snack.error(`Unexpected error: ${err.message || err}`);
+    }
+  } catch (secondaryErr) {
+    console.warn(
+      "[Starkiller] Could not display error notification:",
+      secondaryErr,
+    );
+  }
+};
+
+app.use(pinia);
+app.use(router);
+app.use(vuetify);
+
+app.mount("#app");
diff --git a/src/mixins/copy-stager.js b/src/mixins/copy-stager.js
index 6d3230b0..48226ea5 100644
--- a/src/mixins/copy-stager.js
+++ b/src/mixins/copy-stager.js
@@ -1,18 +1,14 @@
+import { copyToClipboard } from "@/utils/clipboard";
+
 export default {
+  inject: ["snack"],
   methods: {
     /**
      * Copies stager output to clipboard
      * @param {*} output text to copy
      */
     async copyStager(output) {
-      try {
-        await navigator.clipboard.writeText(output);
-        this.$snack.success("Output copied to clipboard");
-      } catch (error) {
-        this.$snack.warn(
-          "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-        );
-      }
+      await copyToClipboard(output, this.snack);
     },
   },
 };
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 00eda32e..ff0cef35 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,22 +1,57 @@
-import Vue from "vue";
-import Vuetify from "vuetify/lib/framework";
-import colors from "vuetify/lib/util/colors";
-import PortalVue from "portal-vue";
-
+import { createVuetify } from "vuetify";
+import * as labsComponents from "vuetify/labs/components";
+import { aliases } from "vuetify/iconsets/fa";
+import "vuetify/styles";
 import "@mdi/font/css/materialdesignicons.css";
 import "@fortawesome/fontawesome-free/css/all.css";
+import { h } from "vue";
 
-Vue.use(PortalVue);
-Vue.use(Vuetify);
+// Custom icon component that auto-detects FA vs MDI based on icon name prefix
+const autoIconComponent = {
+  props: {
+    icon: { type: [String, Function, Object], required: true },
+    tag: { type: String, default: "i" },
+  },
+  render() {
+    if (typeof this.icon === "string") {
+      // MDI icons: mdi-bell-outline -> <i class="mdi mdi-bell-outline">
+      if (this.icon.startsWith("mdi-")) {
+        return h(this.tag, { class: `mdi ${this.icon}` });
+      }
+      // Bare FA icons: fa-server -> <i class="fas fa-server">
+      if (this.icon.startsWith("fa-")) {
+        return h(this.tag, { class: `fas ${this.icon}` });
+      }
+      // Full FA class strings from aliases: "fas fa-check" -> <i class="fas fa-check">
+      return h(this.tag, { class: this.icon });
+    }
+    // For component icons, render as-is
+    return h(this.icon);
+  },
+};
 
-export default new Vuetify({
+export default createVuetify({
+  components: {
+    ...labsComponents,
+  },
   theme: {
-    dark: true,
+    defaultTheme: "dark",
     themes: {
       dark: {
-        primary: colors.orange.darken2,
-        secondary: colors.orange.lighten2,
-        accent: colors.orange.base,
+        colors: {
+          primary: "#f57c00",
+          secondary: "#FFB74D",
+          accent: "#FF9800",
+        },
+      },
+    },
+  },
+  icons: {
+    defaultSet: "custom",
+    aliases,
+    sets: {
+      custom: {
+        component: autoIconComponent,
       },
     },
   },
diff --git a/src/router/index.js b/src/router/index.js
index c50db135..5c3e0f66 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,7 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import { useApplicationStore } from "@/stores/application-module";
 import Home from "../views/Home.vue";
 
-Vue.use(VueRouter);
-
 const routes = [
   {
     path: "/",
@@ -180,9 +177,8 @@ const routes = [
   },
 ];
 
-const router = new VueRouter({
-  mode: "hash",
-  base: import.meta.env.BASE_URL,
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 });
 
diff --git a/src/stores/agent-module.js b/src/stores/agent-module.js
index 679541ec..7f4fa4fe 100644
--- a/src/stores/agent-module.js
+++ b/src/stores/agent-module.js
@@ -14,17 +14,22 @@ export const useAgentStore = defineStore("agent", {
   actions: {
     async getAgents() {
       this.status = "loading";
-      const agents = await agentApi.getAgents(true);
-      this.agents = agents;
-      this.status = "success";
+      try {
+        const agents = await agentApi.getAgents(true);
+        this.agents = agents;
+        this.status = "success";
 
-      const { autoSubscribeAgents } = useApplicationStore();
-      if (autoSubscribeAgents) {
-        agents.forEach((agent) => {
-          if (!this.subscribed[agent.session_id]) {
-            this.subscribe({ sessionId: agent.session_id });
-          }
-        });
+        const { autoSubscribeAgents } = useApplicationStore();
+        if (autoSubscribeAgents) {
+          agents.forEach((agent) => {
+            if (!this.subscribed[agent.session_id]) {
+              this.subscribe({ sessionId: agent.session_id });
+            }
+          });
+        }
+      } catch (err) {
+        console.error("[Starkiller] Failed to fetch agents:", err);
+        this.status = "error";
       }
     },
     async getAgent({ sessionId }) {
diff --git a/src/stores/application-module.js b/src/stores/application-module.js
index 2cc10294..b2c1dfa1 100644
--- a/src/stores/application-module.js
+++ b/src/stores/application-module.js
@@ -5,6 +5,7 @@ import { setInstance } from "@/api/axios-instance";
 // eslint-disable-next-line import/prefer-default-export
 export const useApplicationStore = defineStore("application", {
   persist: {
+    omit: ["chatUnreadCount"],
     afterRestore: (ctx) => {
       setInstance(ctx.store.url, ctx.store.token);
     },
@@ -25,6 +26,7 @@ export const useApplicationStore = defineStore("application", {
     taskHeaders: [],
     pluginTaskHeaders: [],
     connectionError: 0,
+    chatUnreadCount: 0,
     notifications: [],
   }),
   actions: {
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
new file mode 100644
index 00000000..e23ac7f5
--- /dev/null
+++ b/src/utils/clipboard.js
@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/prefer-default-export
+export async function copyToClipboard(text, snack) {
+  try {
+    await navigator.clipboard.writeText(text);
+    snack.success("Copied to clipboard");
+  } catch (error) {
+    console.error("[Starkiller] Clipboard write failed:", error);
+    snack.warn(
+      "Failed to copy to clipboard. You must be on HTTPS or localhost.",
+    );
+  }
+}
diff --git a/src/utils/tags.js b/src/utils/tags.js
new file mode 100644
index 00000000..9e54ac18
--- /dev/null
+++ b/src/utils/tags.js
@@ -0,0 +1,16 @@
+import * as tagApi from "@/api/tag-api";
+
+// eslint-disable-next-line import/prefer-default-export
+export async function fetchDedupedTags(source) {
+  const tags = await tagApi.getTags({ page: 1, limit: -1, sources: source });
+  const dedupedTags = [];
+  tags.records.forEach((tag) => {
+    const existingTag = dedupedTags.find(
+      (t) => t.name === tag.name && t.value === tag.value,
+    );
+    if (!existingTag) {
+      dedupedTags.push(tag);
+    }
+  });
+  return dedupedTags;
+}
diff --git a/src/views/About.vue b/src/views/About.vue
index aac28ff0..3cd65c69 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -39,7 +39,7 @@ export default {
     return {
       breads: [
         {
-          text: "About",
+          title: "About",
           disabled: true,
           href: "/about",
         },
diff --git a/src/views/AgentEdit.vue b/src/views/AgentEdit.vue
index 01fc45bb..85a32b1a 100644
--- a/src/views/AgentEdit.vue
+++ b/src/views/AgentEdit.vue
@@ -1,28 +1,28 @@
 <template>
   <div>
     <div>
-      <portal to="app-bar-extension">
+      <Teleport defer to="#app-bar-extension">
         <div style="display: flex; flex-direction: row; width: 100%">
-          <v-tabs v-model="tab" align-with-title>
-            <v-tab key="interact" href="#interact">
+          <v-tabs v-model="tab" color="primary" align-with-title>
+            <v-tab key="interact" value="interact">
               Interact
-              <v-icon x-small class="ml-1"> fa-arrow-pointer </v-icon>
+              <v-icon size="x-small" class="ml-1"> fa-arrow-pointer </v-icon>
             </v-tab>
-            <v-tab key="file-browser" href="#file-browser">
+            <v-tab key="file-browser" value="file-browser">
               File Browser
-              <v-icon x-small class="ml-1"> fa-folder-open </v-icon>
+              <v-icon size="x-small" class="ml-1"> fa-folder-open </v-icon>
             </v-tab>
-            <v-tab key="tasks" href="#tasks">
+            <v-tab key="tasks" value="tasks">
               Tasks
-              <v-icon x-small class="ml-1"> fa-sticky-note </v-icon>
+              <v-icon size="x-small" class="ml-1"> fa-sticky-note </v-icon>
             </v-tab>
-            <v-tab key="jobs" href="#jobs">
+            <v-tab key="jobs" value="jobs">
               Jobs
-              <v-icon x-small class="ml-1"> fa-cogs </v-icon>
+              <v-icon size="x-small" class="ml-1"> fa-cogs </v-icon>
             </v-tab>
-            <v-tab key="view" href="#view">
+            <v-tab key="view" value="view">
               View
-              <v-icon x-small class="ml-1"> fa-eye </v-icon>
+              <v-icon size="x-small" class="ml-1"> fa-eye </v-icon>
             </v-tab>
           </v-tabs>
           <div style="display: flex; flex-direction: row">
@@ -33,13 +33,15 @@
             </v-btn>
           </div>
         </div>
-      </portal>
-      <portal to="app-bar">
+      </Teleport>
+      <Teleport defer to="#app-bar">
         <div class="v-toolbar__content" style="width: 100%">
           <v-breadcrumbs :items="breads" />
-          <v-tooltip v-if="agent.high_integrity" bottom>
-            <template #activator="{ on }">
-              <v-icon small v-on="on"> fa-user-cog </v-icon>
+          <v-tooltip v-if="agent.high_integrity" location="bottom">
+            <template #activator="{ props: activatorProps }">
+              <v-icon size="small" v-bind="activatorProps">
+                fa-user-cog
+              </v-icon>
             </template>
             <span>Elevated Process</span>
           </v-tooltip>
@@ -68,59 +70,90 @@
               :button-text="isRefreshTasks ? 'On' : 'Off'"
               text="Auto-refresh Tasks"
             />
-            <tooltip-button
-              icon="fa-calendar-times"
-              text="Clear Queued Tasks"
-              @click="clearQueue"
-            />
-            <tooltip-button
-              icon="fa-upload"
-              text="Upload"
-              @click="uploadDialog = true"
-            />
-            <tooltip-button
-              icon="fa-download"
-              text="Download"
-              @click="downloadDialog = true"
-            />
-            <tooltip-button
-              v-if="!hideSideBar"
-              icon="fa-external-link-alt"
-              text="Popout"
-              @click="popout"
-            />
-            <tooltip-button
-              v-if="!subscribed"
-              icon="fa-bell"
-              text="Subscribe to Notifications"
-              @click="subscribe"
-            />
-            <tooltip-button
-              v-else
-              icon="fa-bell-slash"
-              text="Unsubscribe from Notifications"
-              @click="unsubscribe"
-            />
-            <tooltip-button
-              icon="fa-sync"
-              text="Reload SysInfo"
-              @click="reloadSysInfo"
-            />
-            <tooltip-button
-              icon="fa-tasks"
-              text="Get Agent Task Status List"
-              @click="getAgentTasks"
-            />
-            <tooltip-button
-              v-if="initialized && !archived"
-              icon="fa-trash-alt"
-              text="Kill Agent"
-              color="error"
-              @click="killAgent"
-            />
+            <v-menu>
+              <template #activator="{ props: activatorProps }">
+                <v-btn
+                  variant="text"
+                  icon
+                  size="small"
+                  class="mr-5"
+                  v-bind="activatorProps"
+                >
+                  <v-icon>fa-ellipsis-v</v-icon>
+                </v-btn>
+              </template>
+              <v-list density="compact">
+                <v-list-item @click="clearQueue">
+                  <template #prepend>
+                    <v-icon size="small">fa-calendar-times</v-icon>
+                  </template>
+                  <v-list-item-title>Clear Queued Tasks</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="uploadDialog = true">
+                  <template #prepend>
+                    <v-icon size="small">fa-upload</v-icon>
+                  </template>
+                  <v-list-item-title>Upload</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="downloadDialog = true">
+                  <template #prepend>
+                    <v-icon size="small">fa-download</v-icon>
+                  </template>
+                  <v-list-item-title>Download</v-list-item-title>
+                </v-list-item>
+                <v-list-item v-if="!hideSideBar" @click="popout">
+                  <template #prepend>
+                    <v-icon size="small">fa-external-link-alt</v-icon>
+                  </template>
+                  <v-list-item-title>Popout</v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item v-if="!subscribed" @click="subscribe">
+                  <template #prepend>
+                    <v-icon size="small">fa-bell</v-icon>
+                  </template>
+                  <v-list-item-title
+                    >Subscribe to Notifications</v-list-item-title
+                  >
+                </v-list-item>
+                <v-list-item v-else @click="unsubscribe">
+                  <template #prepend>
+                    <v-icon size="small">fa-bell-slash</v-icon>
+                  </template>
+                  <v-list-item-title
+                    >Unsubscribe from Notifications</v-list-item-title
+                  >
+                </v-list-item>
+                <v-list-item @click="reloadSysInfo">
+                  <template #prepend>
+                    <v-icon size="small">fa-sync</v-icon>
+                  </template>
+                  <v-list-item-title>Reload SysInfo</v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="getAgentTasks">
+                  <template #prepend>
+                    <v-icon size="small">fa-tasks</v-icon>
+                  </template>
+                  <v-list-item-title
+                    >Get Agent Task Status List</v-list-item-title
+                  >
+                </v-list-item>
+                <v-divider />
+                <v-list-item
+                  v-if="initialized && !archived"
+                  class="text-error"
+                  @click="killAgent"
+                >
+                  <template #prepend>
+                    <v-icon size="small" color="error">fa-trash-alt</v-icon>
+                  </template>
+                  <v-list-item-title>Kill Agent</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </div>
         </div>
-      </portal>
+      </Teleport>
       <error-state-alert
         v-if="errorState"
         :resource-id="id"
@@ -129,62 +162,74 @@
       <div v-if="!errorState" :style="splitPaneHeight()">
         <splitpanes :disabled="true" @resize="paneSize = $event[0].size">
           <pane min-size="30" :size="paneSize">
-            <v-tabs-items v-model="tab" class="scrollable-pane">
-              <v-tab-item
+            <v-window v-model="tab" class="scrollable-pane">
+              <v-window-item
                 key="interact"
-                :value="'interact'"
+                value="interact"
                 :transition="false"
                 :reverse-transition="false"
               >
                 <v-card v-if="initialized && !archived" flat>
-                  <v-tabs v-model="interactTab" :height="30" align-with-title>
-                    <v-tab key="form" href="#form">
-                      Form
-                      <v-icon x-small class="ml-1"> fa-list-check </v-icon>
+                  <v-tabs
+                    v-model="interactTab"
+                    :height="30"
+                    color="primary"
+                    align-with-title
+                  >
+                    <v-tab key="module" value="module">
+                      Module
+                      <v-icon size="x-small" class="ml-1">
+                        fa-grip-horizontal
+                      </v-icon>
                     </v-tab>
-                    <v-tab key="terminal" href="#terminal">
+                    <v-tab key="shell" value="shell">
+                      Shell
+                      <v-icon size="x-small" class="ml-1"> fa-terminal </v-icon>
+                    </v-tab>
+                    <v-tab key="terminal" value="terminal">
                       Terminal
-                      <v-icon x-small class="ml-1"> fa-terminal </v-icon>
+                      <v-icon size="x-small" class="ml-1"> fa-code </v-icon>
                     </v-tab>
                   </v-tabs>
-                  <v-tabs-items v-model="interactTab">
-                    <v-tab-item
-                      key="form"
-                      :value="'form'"
+                  <v-window v-model="interactTab">
+                    <v-window-item
+                      key="shell"
+                      value="shell"
                       :transition="false"
                       :reverse-transition="false"
                     >
                       <agent-interact :agent="agent" />
-                      <v-divider />
-                      <h4 class="pl-4 pt-2">Execute Module</h4>
+                    </v-window-item>
+                    <v-window-item
+                      key="module"
+                      value="module"
+                      :transition="false"
+                      :reverse-transition="false"
+                    >
                       <agent-execute-module :agents="[agent]" />
-                    </v-tab-item>
-                    <v-tab-item
+                    </v-window-item>
+                    <v-window-item
                       key="terminal"
                       style="height: auto"
-                      :value="'terminal'"
+                      value="terminal"
                       :transition="false"
                       :reverse-transition="false"
                     >
                       <agent-terminal class="mt-2" :agent="agent" />
-                    </v-tab-item>
-                  </v-tabs-items>
+                    </v-window-item>
+                  </v-window>
                 </v-card>
                 <v-card v-else-if="initialized && archived" flat>
                   <v-card-text>
-                    <v-alert
-                      type="error"
-                      icon="fa-exclamation-triangle"
-                      :value="true"
-                    >
+                    <v-alert type="error" icon="fa-exclamation-triangle">
                       This agent is archived.
                     </v-alert>
                   </v-card-text>
                 </v-card>
-              </v-tab-item>
-              <v-tab-item
+              </v-window-item>
+              <v-window-item
                 key="browser"
-                :value="'file-browser'"
+                value="file-browser"
                 :transition="false"
                 :reverse-transition="false"
               >
@@ -192,13 +237,13 @@
                   <agent-file-browser
                     :agent="agent"
                     :read-only="initialized && archived"
-                    @openUploadDialog="openUploadDialogPrefilled"
+                    @open-upload-dialog="openUploadDialogPrefilled"
                   />
                 </v-card>
-              </v-tab-item>
-              <v-tab-item
+              </v-window-item>
+              <v-window-item
                 key="tasks"
-                :value="'tasks'"
+                value="tasks"
                 :transition="false"
                 :reverse-transition="false"
               >
@@ -209,20 +254,20 @@
                     :refresh-tasks="isRefreshTasks"
                   />
                 </v-card>
-              </v-tab-item>
-              <v-tab-item
+              </v-window-item>
+              <v-window-item
                 key="jobs"
-                :value="'jobs'"
+                value="jobs"
                 :transition="false"
                 :reverse-transition="false"
               >
                 <v-card flat>
                   <agent-jobs :agent="agent" />
                 </v-card>
-              </v-tab-item>
-              <v-tab-item
+              </v-window-item>
+              <v-window-item
                 key="view"
-                :value="'view'"
+                value="view"
                 :transition="false"
                 :reverse-transition="false"
               >
@@ -233,8 +278,8 @@
                     @refresh-agent="getAgent(id)"
                   />
                 </v-card>
-              </v-tab-item>
-            </v-tabs-items>
+              </v-window-item>
+            </v-window>
           </pane>
           <!-- <pane :size="100 - paneSize">
             <div
@@ -259,7 +304,6 @@ import AgentFileBrowser from "@/components/agents/AgentFileBrowser.vue";
 import AgentTerminal from "@/components/agents/AgentTerminal.vue";
 import AgentUploadDialog from "@/components/agents/AgentUploadDialog.vue";
 import AgentDownloadDialog from "@/components/agents/AgentDownloadDialog.vue";
-import TooltipButton from "@/components/TooltipButton.vue";
 import TooltipButtonToggle from "@/components/TooltipButtonToggle.vue";
 import ErrorStateAlert from "@/components/ErrorStateAlert.vue";
 import { Pane, Splitpanes } from "splitpanes";
@@ -281,12 +325,12 @@ export default {
     AgentTerminal,
     AgentUploadDialog,
     AgentDownloadDialog,
-    TooltipButton,
     TooltipButtonToggle,
     ErrorStateAlert,
     Splitpanes,
     Pane,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       agent: {},
@@ -302,7 +346,7 @@ export default {
       rightPaneInitialized: false,
       pathToFile: "",
       isRefreshTasks: true,
-      interactTab: "form",
+      interactTab: "module",
     };
   },
   computed: {
@@ -318,13 +362,13 @@ export default {
     breads() {
       return [
         {
-          text: "Agents",
+          title: "Agents",
           disabled: this.isChild,
           to: "/agents",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/agent-edit",
         },
@@ -388,9 +432,9 @@ export default {
     async reloadSysInfo() {
       try {
         await agentTaskApi.sysinfo(this.agent.session_id);
-        this.$snack.success(`SysInfo reload queued for ${this.agent.name}`);
+        this.snack.success(`SysInfo reload queued for ${this.agent.name}`);
       } catch (error) {
-        this.$snack.error(
+        this.snack.error(
           `Error reloading SysInfo for ${this.agent.name}: ${error.message}`,
         );
       }
@@ -398,9 +442,9 @@ export default {
     async getAgentTasks() {
       try {
         await agentTaskApi.getJobs(this.agent.session_id);
-        this.$snack.success(`Task list queued for ${this.agent.name}`);
+        this.snack.success(`Task list queued for ${this.agent.name}`);
       } catch (error) {
-        this.$snack.error(
+        this.snack.error(
           `Error getting jobs for ${this.agent.name}: ${error.message}`,
         );
       }
@@ -431,13 +475,15 @@ export default {
         .then((data) => {
           this.agent = data;
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
     async killAgent() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Kill Agent",
           `Do you want to kill agent ${this.agent.name}?`,
           {
@@ -446,9 +492,7 @@ export default {
         )
       ) {
         this.agentStore.killAgent({ sessionId: this.agent.session_id });
-        this.$snack.success(
-          `Agent ${this.agent.name} tasked to run TASK_EXIT.`,
-        );
+        this.snack.success(`Agent ${this.agent.name} tasked to run TASK_EXIT.`);
         this.$router.push({ name: "agents" });
       }
     },
@@ -460,11 +504,11 @@ export default {
       });
       const queuedIds = queuedTasks.records.map((el) => el.id);
       if (queuedIds.length === 0) {
-        this.$snack.info("No queued tasks to clear.");
+        this.snack.info("No queued tasks to clear.");
         return;
       }
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "",
           `Do you want to clear ${queuedIds.length} queued tasks?`,
           {
@@ -476,7 +520,7 @@ export default {
           sessionId: this.agent.session_id,
           tasks: queuedIds,
         });
-        this.$snack.success(
+        this.snack.success(
           `Clearing queued tasks for Agent ${this.agent.session_id}.`,
         );
       }
@@ -497,11 +541,11 @@ export default {
       this.uploadLoading = true;
       try {
         await agentTaskApi.uploadFile(this.agent.session_id, file, pathToFile);
-        this.$snack.success(
+        this.snack.success(
           `Tasked agent ${this.agent.name} to upload file to ${pathToFile}`,
         );
       } catch (err) {
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
 
       this.uploadLoading = false;
@@ -514,22 +558,16 @@ export default {
       this.downloadLoading = true;
       try {
         await agentTaskApi.downloadFile(this.agent.session_id, pathToFile);
-        this.$snack.success(
+        this.snack.success(
           `Tasked agent ${this.agent.name} to downloaded file ${pathToFile}`,
         );
       } catch (err) {
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
 
       this.downloadLoading = false;
       this.downloadDialog = false;
     },
-    /**
-     * When new results appear in the AgentCommandViewer, scroll it down to the bottom.
-     */
-    scrollResults() {
-      // this.$refs.bottomScrollable.scrollTop = this.$refs.bottomScrollable.scrollHeight;
-    },
   },
 };
 </script>
@@ -541,13 +579,6 @@ export default {
   overflow-x: hidden;
 }
 
-// Overrides vuetify.css
-// Because we moved the tabs into a div, which made the color funky.
-.v-toolbar__content > div > .v-tabs > .v-slide-group.v-tabs-bar,
-.v-toolbar__extension > div > .v-tabs > .v-slide-group.v-tabs-bar {
-  background-color: inherit;
-}
-
 .splitpanes__splitter {
   background-color: #fff;
   box-sizing: border-box;
diff --git a/src/views/BypassEdit.vue b/src/views/BypassEdit.vue
index b12b55eb..b6998e15 100644
--- a/src/views/BypassEdit.vue
+++ b/src/views/BypassEdit.vue
@@ -22,13 +22,13 @@
       resource-type="bypass"
     />
     <v-card v-else style="padding: 10px">
-      <v-form ref="form" v-model="valid" @submit.prevent.native="submit">
+      <v-form ref="form" v-model="valid" @submit.prevent="submit">
         <v-text-field
           v-model="form.name"
           :rules="rules['name']"
           label="name"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           :disabled="!isNew"
         />
@@ -36,16 +36,16 @@
           v-model="form.language"
           :rules="rules['language']"
           label="language"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
         />
         <v-textarea
           v-model="form.code"
           :rules="rules['code']"
           label="code"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           auto-grow
         />
@@ -55,7 +55,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 import ErrorStateAlert from "@/components/ErrorStateAlert.vue";
 import EditPageTop from "@/components/EditPageTop.vue";
 import * as bypassApi from "@/api/bypass-api";
@@ -67,6 +66,7 @@ export default {
     ErrorStateAlert,
     EditPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       form: {},
@@ -119,13 +119,13 @@ export default {
     breads() {
       return [
         {
-          text: "Bypasses",
+          title: "Bypasses",
           disabled: false,
           to: "/bypasses",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/bypasses-edit",
         },
@@ -156,9 +156,9 @@ export default {
   },
   methods: {
     async submit() {
-      if (this.loading || !this.$refs.form.validate()) {
-        return;
-      }
+      if (this.loading) return;
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
@@ -170,30 +170,30 @@ export default {
             this.form.language,
           )
           .then(() => {
-            this.$snack.success("Bypass updated");
+            this.snack.success("Bypass updated");
             this.loading = false;
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       } else {
         bypassApi
           .createBypass(this.form.name, this.form.code, this.form.language)
           .then(({ id }) => {
-            this.$snack.success("Bypass created");
+            this.snack.success("Bypass created");
             this.loading = false;
             this.$router.push({ name: "bypassEdit", params: { id } });
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       }
     },
     async deleteBypass() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete bypass ${this.form.name}?`,
           { color: "red" },
@@ -203,7 +203,7 @@ export default {
           this.bypassStore.deleteBypass(this.form.id);
           this.$router.push({ name: "bypasses" });
         } catch (err) {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         }
       }
     },
@@ -213,9 +213,11 @@ export default {
         .then((data) => {
           this.bypass = { ...data };
           this.initialLoad = true;
-          Vue.set(this, "form", { ...data });
+          this.form = { ...data };
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
diff --git a/src/views/Bypasses.vue b/src/views/Bypasses.vue
index 85cd119b..9c8b2cd7 100644
--- a/src/views/Bypasses.vue
+++ b/src/views/Bypasses.vue
@@ -11,17 +11,14 @@
     />
     <v-data-table
       v-model="selected"
+      v-model:sort-by="sortBy"
       :headers="headers"
       :items="bypasses"
-      :footer-props="{
-        itemsPerPageOptions: [5, 10, 15, 20, 50, 100],
-      }"
+      :items-per-page-options="[5, 10, 15, 20, 50, 100]"
       :items-per-page="15"
-      item-key="name"
-      dense
+      item-value="name"
+      density="compact"
       show-select
-      :sort-by.sync="sortBy"
-      :sort-desc.sync="sortDesc"
     >
       <template #item.name="{ item }">
         <router-link
@@ -35,9 +32,9 @@
         <date-time-display :timestamp="item.updated_at" />
       </template>
       <template #item.actions="{ item }">
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn text icon x-small v-bind="attrs" v-on="on">
+        <v-menu>
+          <template #activator="{ props: activatorProps }">
+            <v-btn variant="text" icon size="x-small" v-bind="activatorProps">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -79,7 +76,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
 import { useBypassStore } from "@/stores/bypass-module";
@@ -91,23 +87,22 @@ export default {
     DateTimeDisplay,
     ListPageTop,
   },
+  inject: ["confirm"],
   data() {
     return {
       breads: [
         {
-          text: "Bypasses",
+          title: "Bypasses",
           disabled: true,
           href: "/bypasses",
         },
       ],
       headers: [
-        { text: "Name", value: "name" },
-        { text: "Updated At", value: "updated_at" },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Name", key: "name" },
+        { title: "Updated At", key: "updated_at" },
+        { title: "Actions", key: "actions", sortable: false },
       ],
-      sortBy: "name",
-      sortDesc: false,
-      moment,
+      sortBy: [{ key: "name", order: "asc" }],
       selected: [],
     };
   },
@@ -135,7 +130,7 @@ export default {
     },
     async deleteBypass(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete bypass ${item.name}?`,
           { color: "red" },
@@ -146,7 +141,7 @@ export default {
     },
     async deleteBypasses() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete ${this.selected.length} bypasses?`,
           { color: "red" },
diff --git a/src/views/CredentialEdit.vue b/src/views/CredentialEdit.vue
index a0b4ee0f..5e5b36dc 100644
--- a/src/views/CredentialEdit.vue
+++ b/src/views/CredentialEdit.vue
@@ -27,7 +27,8 @@
     />
     <v-card v-else style="padding: 10px">
       <general-form
-        v-if="reset"
+        v-if="initialLoad"
+        :key="credential.id"
         ref="generalform"
         v-model="form"
         :options="options"
@@ -53,9 +54,9 @@ export default {
     ErrorStateAlert,
     EditPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
-      reset: true,
       loading: false,
       initialLoad: false,
       credential: {},
@@ -67,13 +68,13 @@ export default {
     breads() {
       return [
         {
-          text: "Credentials",
+          title: "Credentials",
           disabled: false,
           to: "/credentials",
           exact: true,
         },
         {
-          text: this.id && !this.isCopy ? `${this.id}` : "New",
+          title: this.id && !this.isCopy ? `${this.id}` : "New",
           disabled: true,
           to: "/credential-edit",
         },
@@ -151,7 +152,7 @@ export default {
         .then(() => {
           this.credential.tags = this.credential.tags.filter((t) => t !== tag);
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(tag) {
       credentialApi
@@ -159,9 +160,9 @@ export default {
         .then((t) => {
           const index = this.credential.tags.findIndex((x) => x.id === t.id);
           this.credential.tags.splice(index, 1, t);
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(tag) {
       credentialApi
@@ -169,12 +170,12 @@ export default {
         .then((t) => {
           this.credential.tags.push(t);
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
-    submit() {
-      if (this.loading || !this.$refs.generalform.$refs.form.validate()) {
-        return;
-      }
+    async submit() {
+      if (this.loading) return;
+      const valid = await this.$refs.generalform.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
@@ -184,7 +185,7 @@ export default {
             this.loading = false;
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       } else {
@@ -195,7 +196,7 @@ export default {
             this.$router.push({ name: "credentialEdit", params: { id } });
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       }
@@ -203,7 +204,7 @@ export default {
     },
     async deleteCredential() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete credential ${this.id}?`,
           { color: "red" },
@@ -213,7 +214,7 @@ export default {
           this.credentialStore.deleteCredential(this.id);
           this.$router.push({ name: "credentials" });
         } catch (err) {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         }
       }
     },
@@ -221,15 +222,12 @@ export default {
       credentialApi
         .getCredential(id)
         .then((data) => {
-          this.reset = false;
-
           this.credential = data;
           this.initialLoad = true;
-          setTimeout(() => {
-            this.reset = true;
-          }, 500);
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
diff --git a/src/views/Credentials.vue b/src/views/Credentials.vue
index a050282b..4d2567f3 100644
--- a/src/views/Credentials.vue
+++ b/src/views/Credentials.vue
@@ -11,12 +11,7 @@
       @refresh="getCredentials"
     />
     <div style="display: flex; flex-direction: row; flex-wrap: wrap">
-      <v-card
-        class="mr-2 pa-2"
-        elevation="2"
-        outlined
-        style="flex-basis: 250px"
-      >
+      <v-card class="mr-2 pa-2" elevation="2" border style="flex-basis: 250px">
         <v-expansion-panels class="mb-6" multiple>
           <expansion-panel-search
             v-model="search"
@@ -34,14 +29,14 @@
           />
         </v-expansion-panels>
       </v-card>
-      <v-card style="flex: 1; min-width: 0" elevation="2" outlined>
+      <v-card style="flex: 1; min-width: 0" elevation="2" border>
         <v-data-table
           v-model="selected"
           :loading="loading"
           :headers="headers"
           :items="credentials"
-          item-key="id"
-          dense
+          item-value="id"
+          density="compact"
           show-select
         >
           <template #item.id="{ item }">
@@ -73,9 +68,14 @@
             />
           </template>
           <template #item.actions="{ item }">
-            <v-menu offset-y>
-              <template #activator="{ on, attrs }">
-                <v-btn text icon x-small v-bind="attrs" v-on="on">
+            <v-menu>
+              <template #activator="{ props: activatorProps }">
+                <v-btn
+                  variant="text"
+                  icon
+                  size="x-small"
+                  v-bind="activatorProps"
+                >
                   <v-icon>fa-ellipsis-v</v-icon>
                 </v-btn>
               </template>
@@ -129,8 +129,9 @@ import ListPageTop from "@/components/ListPageTop.vue";
 import TagViewer from "@/components/TagViewer.vue";
 import ExpansionPanelSearch from "@/components/tables/ExpansionPanelSearch.vue";
 import ExpansionPanelFilter from "@/components/tables/ExpansionPanelFilter.vue";
-import * as tagApi from "@/api/tag-api";
 import * as credentialApi from "@/api/credential-api";
+import { copyToClipboard } from "@/utils/clipboard";
+import { fetchDedupedTags } from "@/utils/tags";
 import { useCredentialStore } from "@/stores/credential-module";
 
 export default {
@@ -141,24 +142,25 @@ export default {
     TagViewer,
     ListPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       breads: [
         {
-          text: "Credentials",
+          title: "Credentials",
           disabled: true,
           href: "/credentials",
         },
       ],
       headers: [
-        { text: "id", value: "id" },
-        { text: "CredType", value: "credtype" },
-        { text: "Username", value: "username" },
-        { text: "Password", value: "password" },
-        { text: "Domain", value: "domain" },
-        { text: "Host", value: "host" },
-        { text: "Tags", value: "tags", width: 300 },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "id", key: "id" },
+        { title: "CredType", key: "credtype" },
+        { title: "Username", key: "username" },
+        { title: "Password", key: "password" },
+        { title: "Domain", key: "domain" },
+        { title: "Host", key: "host" },
+        { title: "Tags", key: "tags", width: 300 },
+        { title: "Actions", key: "actions", sortable: false },
       ],
       selected: [],
       selectedTags: [],
@@ -191,23 +193,7 @@ export default {
   },
   methods: {
     async getTags() {
-      const tags = await tagApi.getTags({
-        page: 1,
-        limit: -1,
-        sources: "credential",
-      });
-
-      const dedupedTags = [];
-      tags.records.forEach((tag) => {
-        const existingTag = dedupedTags.find(
-          (t) => t.name === tag.name && t.value === tag.value,
-        );
-        if (!existingTag) {
-          dedupedTags.push(tag);
-        }
-      });
-
-      this.tags = dedupedTags;
+      this.tags = await fetchDedupedTags("credential");
     },
     deleteTag(credential, tag) {
       credentialApi
@@ -216,7 +202,7 @@ export default {
           credential.tags = credential.tags.filter((t) => t.id !== tag.id);
           this.getTags();
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(credential, tag) {
       credentialApi
@@ -225,9 +211,9 @@ export default {
           const index = credential.tags.findIndex((x) => x.id === t.id);
           credential.tags.splice(index, 1, t);
           this.getTags();
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(credential, tag) {
       credentialApi
@@ -236,7 +222,7 @@ export default {
           credential.tags.push(t);
           this.getTags();
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     async getCredentials() {
       this.loading = true;
@@ -255,7 +241,7 @@ export default {
     },
     async deleteCredential(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete credential ${item.id}?`,
           { color: "red" },
@@ -267,7 +253,7 @@ export default {
     },
     async deleteCredentials() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete ${this.selected.length} credentials?`,
           { color: "red" },
@@ -280,14 +266,7 @@ export default {
       }
     },
     async copyToClipboard(val) {
-      try {
-        await navigator.clipboard.writeText(val);
-        this.$snack.success("Output copied to clipboard");
-      } catch (error) {
-        this.$snack.warn(
-          "Failed to copy to clipboard. You must be on HTTPS or localhost.",
-        );
-      }
+      await copyToClipboard(val, this.snack);
     },
   },
 };
diff --git a/src/views/Downloads.vue b/src/views/Downloads.vue
index 1a8f432b..b9a35bc0 100644
--- a/src/views/Downloads.vue
+++ b/src/views/Downloads.vue
@@ -7,7 +7,7 @@
       :show-delete="false"
       @refresh="refreshDownloads"
     >
-      <template slot="extra-stuff">
+      <template #extra-stuff>
         <tooltip-button
           icon="fa-upload"
           text="Upload"
@@ -23,12 +23,7 @@
       </template>
     </list-page-top>
     <div style="display: flex; flex-direction: row; flex-wrap: wrap">
-      <v-card
-        class="mr-2 pa-2"
-        elevation="2"
-        outlined
-        style="flex-basis: 250px"
-      >
+      <v-card class="mr-2 pa-2" elevation="2" border style="flex-basis: 250px">
         <v-expansion-panels class="mb-6" multiple>
           <expansion-panel-search
             v-model="search"
@@ -54,24 +49,17 @@
           />
         </v-expansion-panels>
       </v-card>
-      <v-card style="flex: 1; min-width: 0" elevation="2" outlined>
-        <v-pagination
-          v-model="currentPage"
-          :length="totalPages"
-          :total-visible="10"
-          @input="handlePageChange"
-        />
-        <v-data-table
+      <v-card style="flex: 1; min-width: 0" elevation="2" border>
+        <v-data-table-server
+          v-model:sort-by="sortBy"
+          v-model:items-per-page="itemsPerPage"
+          v-model:page="currentPage"
           :headers="headers"
           :items="items"
-          item-key="id"
-          :sort-by="sortBy"
-          :sort-desc="sortDesc"
-          :server-items-length="totalItems"
-          :footer-props="{ 'items-per-page-options': [10, 25, 50, 100] }"
-          :items-per-page.sync="itemsPerPage"
+          item-value="id"
+          :items-length="totalItems"
+          :items-per-page-options="[10, 25, 50, 100]"
           :loading="loading"
-          :page="currentPage"
           @update:options="handleOptionsChange"
         >
           <template #item.updated_at="{ item }">
@@ -92,9 +80,14 @@
             />
           </template>
           <template #item.actions="{ item }">
-            <v-menu offset-y>
-              <template #activator="{ on, attrs }">
-                <v-btn text icon x-small v-bind="attrs" v-on="on">
+            <v-menu>
+              <template #activator="{ props: activatorProps }">
+                <v-btn
+                  variant="text"
+                  icon
+                  size="x-small"
+                  v-bind="activatorProps"
+                >
                   <v-icon>fa-ellipsis-v</v-icon>
                 </v-btn>
               </template>
@@ -109,7 +102,7 @@
               </v-list>
             </v-menu>
           </template>
-        </v-data-table>
+        </v-data-table-server>
       </v-card>
     </div>
   </div>
@@ -118,14 +111,13 @@
 <script>
 import * as downloadApi from "@/api/download-api";
 import debounce from "lodash.debounce";
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
 import TooltipButton from "@/components/TooltipButton.vue";
 import TagViewer from "@/components/TagViewer.vue";
 import ExpansionPanelFilter from "@/components/tables/ExpansionPanelFilter.vue";
 import ExpansionPanelSearch from "@/components/tables/ExpansionPanelSearch.vue";
 import DateTimeDisplay from "@/components/DateTimeDisplay.vue";
-import * as tagApi from "@/api/tag-api";
+import { fetchDedupedTags } from "@/utils/tags";
 
 export default {
   name: "Downloads",
@@ -137,33 +129,31 @@ export default {
     ListPageTop,
     TooltipButton,
   },
+  inject: ["snack"],
   data() {
     return {
-      moment,
       items: [],
       currentPage: 1,
-      totalPages: 1,
       totalItems: 0,
       itemsPerPage: 10,
-      sortBy: "updated_at",
-      sortDesc: true,
+      sortBy: [{ key: "updated_at", order: "desc" }],
       loading: false,
       search: "",
       breads: [
         {
-          text: "Downloads",
+          title: "Downloads",
           disabled: true,
           href: "/downloads",
         },
       ],
       headers: [
-        { text: "Id", value: "id", sortable: false },
-        { text: "Filename", value: "filename", sortable: true },
-        { text: "Size", value: "size", sortable: true },
-        { text: "Created At", value: "created_at", sortable: true },
-        { text: "Updated At", value: "updated_at", sortable: true },
-        { text: "Tags", value: "tags", sortable: false },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Id", key: "id", sortable: false },
+        { title: "Filename", key: "filename", sortable: true },
+        { title: "Size", key: "size", sortable: true },
+        { title: "Created At", key: "created_at", sortable: true },
+        { title: "Updated At", key: "updated_at", sortable: true },
+        { title: "Tags", key: "tags", sortable: false },
+        { title: "Actions", key: "actions", sortable: false },
       ],
       isSelecting: false,
       selectedFile: null,
@@ -209,23 +199,7 @@ export default {
   },
   methods: {
     async getTags() {
-      const tags = await tagApi.getTags({
-        page: 1,
-        limit: -1,
-        sources: "download",
-      });
-
-      const dedupedTags = [];
-      tags.records.forEach((tag) => {
-        const existingTag = dedupedTags.find(
-          (t) => t.name === tag.name && t.value === tag.value,
-        );
-        if (!existingTag) {
-          dedupedTags.push(tag);
-        }
-      });
-
-      this.tags = dedupedTags;
+      this.tags = await fetchDedupedTags("download");
     },
     deleteTag(download, tag) {
       downloadApi
@@ -234,7 +208,7 @@ export default {
           download.tags = download.tags.filter((t) => t.id !== tag.id);
           this.getTags();
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(download, tag) {
       downloadApi
@@ -243,9 +217,9 @@ export default {
           const index = download.tags.findIndex((x) => x.id === t.id);
           download.tags.splice(index, 1, t);
           this.getTags();
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(download, tag) {
       downloadApi
@@ -254,22 +228,25 @@ export default {
           download.tags.push(t);
           this.getTags();
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     async getDownloads() {
       this.loading = true;
+      const sortEntry =
+        this.sortBy.length > 0
+          ? this.sortBy[0]
+          : { key: "updated_at", order: "desc" };
       const response = await downloadApi.getDownloads({
         page: this.currentPage,
         limit: this.itemsPerPage,
         query: this.search,
         sources: this.selectedSources,
-        sortBy: this.sortBy,
-        sortOrder: this.sortDesc ? "desc" : "asc",
+        sortBy: sortEntry.key,
+        sortOrder: sortEntry.order,
         tags: this.selectedTags,
       });
       this.items = response.records;
       this.currentPage = response.page;
-      this.totalPages = response.total_pages;
       this.totalItems = response.total;
       this.loading = false;
     },
@@ -300,25 +277,18 @@ export default {
       const data = new FormData();
       data.append("file", this.selectedFile);
 
-      await downloadApi.createDownload(data);
-      this.$snack.success("Upload complete");
-      this.debouncedGetDownloads();
-    },
-    handlePageChange(page) {
-      this.currentPage = page;
-      this.debouncedGetDownloads();
+      try {
+        await downloadApi.createDownload(data);
+        this.snack.success("Upload complete");
+        this.debouncedGetDownloads();
+      } catch (err) {
+        this.snack.error(`Upload failed: ${err}`);
+      }
     },
     handleOptionsChange(value) {
       this.currentPage = value.page;
       this.itemsPerPage = value.itemsPerPage;
-
-      if (value.sortBy.length > 0) {
-        this.sortBy = value.sortBy[0];
-        this.sortDesc = value.sortDesc[0];
-      } else {
-        this.sortBy = "updated_at";
-        this.sortDesc = true;
-      }
+      this.sortBy = value.sortBy;
       this.debouncedGetDownloads();
     },
     // https://gist.github.com/zentala/1e6f72438796d74531803cc3833c039c
diff --git a/src/views/ListenerEdit.vue b/src/views/ListenerEdit.vue
index ac96ef2a..d6c0c4e7 100644
--- a/src/views/ListenerEdit.vue
+++ b/src/views/ListenerEdit.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
-    <portal to="app-bar-extension">
+    <Teleport v-if="!isNew" defer to="#app-bar-extension">
       <div style="display: flex; flex-direction: row; width: 100%">
-        <v-tabs v-model="tab" align-with-title>
-          <v-tab key="view" href="#view">
+        <v-tabs v-model="tab" color="primary" align-with-title>
+          <v-tab key="view" value="view">
             View
-            <v-icon x-small class="ml-1"> fa-eye </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-eye </v-icon>
           </v-tab>
-          <v-tab key="autorun" href="#autorun">
+          <v-tab key="autorun" value="autorun">
             Autorun
-            <v-icon x-small class="ml-1"> fa-play </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-play </v-icon>
           </v-tab>
         </v-tabs>
       </div>
-    </portal>
+    </Teleport>
 
     <edit-page-top
       :breads="breads"
@@ -34,12 +34,19 @@
           v-model="listener.enabled"
           color="green"
           label="Enabled"
-          class="mr-2 mt-1"
-          @change="toggleEnabled"
+          hide-details
+          class="mr-2"
+          @update:model-value="toggleEnabled"
         />
-        <v-menu v-if="!isNew && initialLoad" offset-y open-on-hover>
-          <template #activator="{ on, attrs }">
-            <v-btn class="mr-5" text icon small v-bind="attrs" v-on="on">
+        <v-menu v-if="!isNew && initialLoad" open-on-hover>
+          <template #activator="{ props: activatorProps }">
+            <v-btn
+              class="mr-5"
+              variant="text"
+              icon
+              size="small"
+              v-bind="activatorProps"
+            >
               <v-icon>fa-suitcase-rolling</v-icon>
             </v-btn>
           </template>
@@ -74,11 +81,11 @@
     />
 
     <!-- Tab Items -->
-    <v-tabs-items v-else v-model="tab">
+    <v-window v-else v-model="tab">
       <!-- General Tab Content -->
-      <v-tab-item
+      <v-window-item
         key="view"
-        :value="'view'"
+        value="view"
         :transition="false"
         :reverse-transition="false"
       >
@@ -103,9 +110,9 @@
             <v-autocomplete
               v-model="selectedTemplate"
               :items="listenerTemplateIds"
-              :loading="!reset"
-              dense
-              outlined
+              :loading="loadingTemplate"
+              density="compact"
+              variant="outlined"
               label="Type"
               :readonly="!canEdit"
             />
@@ -117,7 +124,8 @@
               </v-row>
             </v-alert>
             <general-form
-              v-if="reset"
+              v-if="initialLoad"
+              :key="selectedTemplate"
               ref="generalform"
               v-model="form"
               :options="listenerOptions"
@@ -126,20 +134,20 @@
             />
           </v-card>
         </v-card>
-      </v-tab-item>
+      </v-window-item>
 
       <!-- Autorun Modules Tab Content -->
-      <v-tab-item
+      <v-window-item
         key="autorun"
-        :value="'autorun'"
+        value="autorun"
         :transition="false"
         :reverse-transition="false"
       >
         <v-card flat>
           <AutoRunModules :selected-listener="listener" />
         </v-card>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 
@@ -163,14 +171,15 @@ export default {
     EditPageTop,
     AutoRunModules,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       listener: { options: {} },
       listenerTemplate: { options: {} },
       selectedTemplate: "",
       form: {},
-      reset: true,
       loading: false,
+      loadingTemplate: false,
       formPriorities: ["Name", "Host", "Port"],
       errorState: false,
       validationMessage: null,
@@ -231,20 +240,25 @@ export default {
         });
         return options;
       }
-      const { options } = this.listenerTemplate;
-      if (!options) return {};
+      const templateOptions =
+        (this.listenerTemplate && this.listenerTemplate.options) || {};
+      const options = Object.keys(templateOptions).reduce((acc, k) => {
+        acc[k] = { ...templateOptions[k] };
+        return acc;
+      }, {});
+      if (Object.keys(options).length === 0) return {};
       return options;
     },
     breads() {
       return [
         {
-          text: "Listeners",
+          title: "Listeners",
           disabled: false,
           to: "/listeners",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/listeners-edit",
         },
@@ -268,15 +282,17 @@ export default {
   watch: {
     selectedTemplate: {
       async handler(val) {
+        this.loadingTemplate = true;
         const a = await listenerApi
           .getListenerTemplate(val)
-          .catch((err) => this.$snack.error(`Error: ${err}`));
+          .catch((err) =>
+            this.snack.error(
+              `Error: ${err?.response?.data?.detail || err?.message || err}`,
+            ),
+          );
+        this.loadingTemplate = false;
         if (a) {
-          this.reset = false;
-
           this.listenerTemplate = a;
-          await this.$nextTick();
-          this.reset = true;
           this.initialLoad = true;
         }
       },
@@ -305,7 +321,7 @@ export default {
             (t) => t.id !== tag.id,
           );
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     updateTag(tag) {
       listenerApi
@@ -313,9 +329,9 @@ export default {
         .then((t) => {
           const index = this.listener.tags.findIndex((x) => x.id === t.id);
           this.listener.tags.splice(index, 1, t);
-          this.$snack.success("Tag updated");
+          this.snack.success("Tag updated");
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     addTag(tag) {
       listenerApi
@@ -323,26 +339,26 @@ export default {
         .then((t) => {
           this.listener.tags.push(t);
         })
-        .catch((err) => this.$snack.error(`Error: ${err}`));
+        .catch((err) => this.snack.error(`Error: ${err}`));
     },
     async submit() {
-      if (this.loading || !this.$refs.generalform.$refs.form.validate()) {
-        return;
-      }
+      if (this.loading) return;
+      const valid = await this.$refs.generalform.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
         listenerApi
           .updateListener({ ...this.listener, options: this.form })
           .then(() => {
-            this.$snack.success("Listener updated");
+            this.snack.success("Listener updated");
             this.loading = false;
           })
           .catch((err) => {
             if (err.startsWith("[*]")) {
               this.validationMessage = err;
             } else {
-              this.$snack.error(`Error: ${err}`);
+              this.snack.error(`Error: ${err}`);
             }
             this.loading = false;
           });
@@ -350,7 +366,7 @@ export default {
         listenerApi
           .createListener(this.selectedTemplate, this.form)
           .then(({ id }) => {
-            this.$snack.success("Listener created");
+            this.snack.success("Listener created");
             this.loading = false;
             this.$router.push({ name: "listenerEdit", params: { id } });
           })
@@ -358,7 +374,7 @@ export default {
             if (err.startsWith("[*]")) {
               this.validationMessage = err;
             } else {
-              this.$snack.error(`Error: ${err}`);
+              this.snack.error(`Error: ${err}`);
             }
             this.loading = false;
           });
@@ -366,7 +382,7 @@ export default {
     },
     async kill() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to kill listener ${this.form.Name}?`,
           { color: "red" },
@@ -376,7 +392,7 @@ export default {
           await this.listenerStore.killListener(this.id);
           this.$router.push({ name: "listeners" });
         } catch (err) {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         }
       }
     },
@@ -390,7 +406,9 @@ export default {
           });
           this.selectedTemplate = data.template;
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
@@ -399,7 +417,7 @@ export default {
 
       if (
         val === true &&
-        !(await this.$root.$confirm(
+        !(await this.confirm(
           "",
           "Re-enabling the listener will also save any unsaved option changes.",
           { color: "yellow" },
@@ -417,18 +435,9 @@ export default {
         this.listener = response;
       } catch (err) {
         this.listener.enabled = !val;
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
     },
   },
 };
 </script>
-
-<style lang="scss">
-// Overrides vuetify.css
-// Because we moved the tabs into a div, which made the color funky.
-.v-toolbar__content > div > .v-tabs > .v-slide-group.v-tabs-bar,
-.v-toolbar__extension > div > .v-tabs > .v-slide-group.v-tabs-bar {
-  background-color: inherit;
-}
-</style>
diff --git a/src/views/MalleableProfileEdit.vue b/src/views/MalleableProfileEdit.vue
index 1c9a9b11..10b0cd1b 100644
--- a/src/views/MalleableProfileEdit.vue
+++ b/src/views/MalleableProfileEdit.vue
@@ -26,14 +26,14 @@
         ref="form"
         v-model="valid"
         style="max-width: 500px"
-        @submit.prevent.native="submit"
+        @submit.prevent="submit"
       >
         <v-text-field
           v-model="form.name"
           :rules="rules['name']"
           label="name"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           :disabled="!isNew"
         />
@@ -41,8 +41,8 @@
           v-model="form.category"
           :rules="rules['category']"
           label="category"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           :disabled="!isNew"
         />
@@ -50,8 +50,8 @@
           v-model="form.data"
           :rules="rules['code']"
           label="code"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           auto-grow
         />
@@ -61,7 +61,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 import ErrorStateAlert from "@/components/ErrorStateAlert.vue";
 import EditPageTop from "@/components/EditPageTop.vue";
 import * as malleableApi from "@/api/malleable-api";
@@ -73,6 +72,7 @@ export default {
     ErrorStateAlert,
     EditPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       form: {},
@@ -124,13 +124,13 @@ export default {
     breads() {
       return [
         {
-          text: "Malleable Profiles",
+          title: "Malleable Profiles",
           disabled: false,
           to: "/malleable-profiles",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/malleable-profiles-edit",
         },
@@ -161,20 +161,20 @@ export default {
   },
   methods: {
     async submit() {
-      if (this.loading || !this.$refs.form.validate()) {
-        return;
-      }
+      if (this.loading) return;
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
         malleableApi
           .updateMalleableProfile(this.id, this.form.data)
           .then(() => {
-            this.$snack.success("Malleable Profile updated");
+            this.snack.success("Malleable Profile updated");
             this.loading = false;
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       } else {
@@ -185,19 +185,19 @@ export default {
             this.form.data,
           )
           .then(({ id }) => {
-            this.$snack.success("Malleable Profile created");
+            this.snack.success("Malleable Profile created");
             this.loading = false;
             this.$router.push({ name: "malleableProfileEdit", params: { id } });
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       }
     },
     async deleteMalleableProfile() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete profile ${this.form.name}?`,
           { color: "red" },
@@ -210,7 +210,7 @@ export default {
             query: { tab: "malleable-profiles" },
           });
         } catch (err) {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         }
       }
     },
@@ -220,9 +220,11 @@ export default {
         .then((data) => {
           this.malleableProfile = data;
           this.initialLoad = true;
-          Vue.set(this, "form", { ...data });
+          this.form = { ...data };
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
diff --git a/src/views/ModuleExecute.vue b/src/views/ModuleExecute.vue
index 66b7d40a..5109975c 100644
--- a/src/views/ModuleExecute.vue
+++ b/src/views/ModuleExecute.vue
@@ -4,13 +4,13 @@
     <h4 class="pl-4 pb-4">Execute Module</h4>
     <v-autocomplete
       v-model="selectedAgents"
-      dense
-      outlined
+      density="compact"
+      variant="outlined"
       chips
       multiple
       placeholder="Agents"
       :items="agents"
-      item-text="name"
+      item-title="name"
       item-value="session_id"
     />
     <v-card>
@@ -19,7 +19,7 @@
         :module-name="moduleName"
         :agents="selectedAgents"
         :show-submit="false"
-        @moduleChange="moduleChange"
+        @module-change="moduleChange"
         @submitted="clearAgents"
       />
     </v-card>
@@ -55,13 +55,13 @@ export default {
     breads() {
       return [
         {
-          text: "Modules",
+          title: "Modules",
           disabled: false,
           to: "/modules",
           exact: true,
         },
         {
-          text: `${this.moduleName}`,
+          title: `${this.moduleName}`,
           disabled: true,
           to: "/modules/execute",
         },
diff --git a/src/views/Modules.vue b/src/views/Modules.vue
index 87c5e44e..0d28913b 100644
--- a/src/views/Modules.vue
+++ b/src/views/Modules.vue
@@ -8,7 +8,7 @@
     />
     <advanced-table>
       <template #filters>
-        <v-switch v-model="showIds" label="Show IDs" />
+        <v-switch v-model="showIds" color="primary" label="Show IDs" />
         <expansion-panel-search
           v-model="search"
           title="Search"
@@ -64,7 +64,7 @@ export default {
       search: "",
       breads: [
         {
-          text: "Modules",
+          title: "Modules",
           disabled: true,
           href: "/modules",
         },
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
index dd33c1f7..d823102b 100644
--- a/src/views/Notifications.vue
+++ b/src/views/Notifications.vue
@@ -3,45 +3,52 @@
     <list-page-top
       :breads="[
         {
-          text: 'Notifications',
+          title: 'Notifications',
           disabled: true,
           to: '/notifications',
         },
       ]"
     >
       <template #extra-stuff>
-        <v-btn color="primary" text @click="clearNotifications">
+        <v-btn color="primary" variant="text" @click="clearNotifications">
           Clear
-          <v-icon right> mdi-delete </v-icon>
+          <v-icon end> mdi-delete </v-icon>
         </v-btn>
       </template>
     </list-page-top>
-    <v-card class="mr-2 pa-2" elevation="2" outlined style="flex-basis: 250px">
+    <v-card
+      class="mr-2 pa-2"
+      elevation="2"
+      variant="outlined"
+      style="flex-basis: 250px"
+    >
       <v-list>
-        <template v-for="(item, i) in notifications">
+        <template v-for="(item, i) in notifications" :key="i">
           <v-list-item
-            :key="`list-'${i}`"
             :style="
               item.read ? '' : 'background-color: rgba(118, 127, 134, 0.5);'
             "
             :to="item.route"
             link
           >
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.title }}
-              </v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.text }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-btn v-if="item.route" color="primary" text :to="item.route">
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ item.text }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-btn
+                v-if="item.route"
+                color="primary"
+                variant="text"
+                :to="item.route"
+              >
                 {{ item.buttonText }}
               </v-btn>
-            </v-list-item-action>
+            </template>
           </v-list-item>
-          <v-divider :key="`divider-${i}`" />
+          <v-divider />
         </template>
       </v-list>
     </v-card>
@@ -63,7 +70,7 @@ export default {
       return this.applicationStore.notifications;
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.applicationStore.markAllNotificationsAsRead();
   },
   methods: {
diff --git a/src/views/Obfuscation.vue b/src/views/Obfuscation.vue
index a4063037..83ab7c4b 100644
--- a/src/views/Obfuscation.vue
+++ b/src/views/Obfuscation.vue
@@ -14,24 +14,20 @@
         </v-card-title>
         <v-card-text>
           <v-container>
-            <v-form
-              ref="form"
-              v-model="valid"
-              @submit.prevent.native="saveKeyword"
-            >
+            <v-form ref="form" v-model="valid" @submit.prevent="saveKeyword">
               <v-text-field
                 v-model="editedKeyword.keyword"
                 :rules="rules['keyword']"
-                dense
-                outlined
+                density="compact"
+                variant="outlined"
                 required
                 label="Keyword"
               />
               <v-text-field
                 v-model="editedKeyword.replacement"
                 :rules="rules['replacement']"
-                dense
-                outlined
+                density="compact"
+                variant="outlined"
                 required
                 label="Replacement"
               />
@@ -42,10 +38,16 @@
 
         <v-card-actions>
           <v-spacer />
-          <v-btn color="blue darken-1" text @click="keywordDialog = false">
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="keywordDialog = false"
+          >
             Cancel
           </v-btn>
-          <v-btn color="blue darken-1" text @click="saveKeyword"> Save </v-btn>
+          <v-btn color="blue-darken-1" variant="text" @click="saveKeyword">
+            Save
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -67,10 +69,18 @@
 
         <v-card-actions>
           <v-spacer />
-          <v-btn color="blue darken-1" text @click="preobfuscateDialog = false">
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="preobfuscateDialog = false"
+          >
             Cancel
           </v-btn>
-          <v-btn color="blue darken-1" text @click="preobfuscateModules">
+          <v-btn
+            color="blue-darken-1"
+            variant="text"
+            @click="preobfuscateModules"
+          >
             Save
           </v-btn>
         </v-card-actions>
@@ -85,15 +95,20 @@
             <span class="headline">Keyword Obfuscation</span>
             <v-btn color="primary" @click="createKeyword">
               Create
-              <v-icon right> fa-plus-square </v-icon>
+              <v-icon end> fa-plus-square </v-icon>
             </v-btn>
           </span>
         </v-card-title>
         <v-data-table :headers="headers" :items="keywords">
           <template #item.actions="{ item }">
-            <v-menu offset-y>
-              <template #activator="{ on, attrs }">
-                <v-btn text icon x-small v-bind="attrs" v-on="on">
+            <v-menu>
+              <template #activator="{ props: activatorProps }">
+                <v-btn
+                  variant="text"
+                  icon
+                  size="x-small"
+                  v-bind="activatorProps"
+                >
                   <v-icon>fa-ellipsis-v</v-icon>
                 </v-btn>
               </template>
@@ -123,63 +138,64 @@
           </span>
         </v-card-title>
         <v-card-text>
-          <v-card
-            v-for="(config, index) in configs"
-            :key="index"
-            outlined
-            class="ma-2 pa-2"
-          >
-            <v-card-subtitle>{{ config.language }}</v-card-subtitle>
-            <v-card-text>
-              <v-form>
-                <v-switch
-                  v-model="config.enabled"
-                  label="Enabled"
-                  :readonly="readonly"
-                />
-                <v-text-field
-                  v-model="config.command"
-                  label="Command"
-                  :rules="
-                    config.language !== 'csharp'
-                      ? [(v) => !!v || 'Command is required']
-                      : []
-                  "
-                  dense
-                  outlined
-                  :readonly="readonly"
-                />
-                <!-- This isn't currently used. Showing it would probably just confuse people. -->
-                <!-- <v-text-field
+          <template v-for="(config, index) in configs" :key="index">
+            <v-divider v-if="index > 0" class="my-2" />
+            <v-card border class="ma-2 pa-2">
+              <v-card-subtitle>{{ config.language }}</v-card-subtitle>
+              <v-card-text>
+                <v-form>
+                  <v-switch
+                    v-model="config.enabled"
+                    color="primary"
+                    label="Enabled"
+                    :readonly="readonly"
+                  />
+                  <v-text-field
+                    v-model="config.command"
+                    label="Command"
+                    :rules="
+                      config.language !== 'csharp'
+                        ? [(v) => !!v || 'Command is required']
+                        : []
+                    "
+                    density="compact"
+                    variant="outlined"
+                    :readonly="readonly"
+                  />
+                  <!-- This isn't currently used. Showing it would probably just confuse people. -->
+                  <!-- <v-text-field
                   v-model="configs[0].module"
                   label="ModuleName"
                   :rules="[v => !!v || 'ModuleName is required']"
-                  dense
-                  outlined
+                  density="compact"
+                  variant="outlined"
                   :readonly="true"
                 /> -->
-              </v-form>
-            </v-card-text>
-            <v-card-actions>
-              <v-btn color="primary" @click="editConfig(config)"> Save </v-btn>
-              <v-btn
-                :disabled="!config.preobfuscatable"
-                text
-                color="primary"
-                @click="openPreobfuscateDialog(config)"
-              >
-                Preobfuscate
-              </v-btn>
-              <v-btn
-                :disabled="!config.preobfuscatable"
-                text
-                color="error"
-                @click="deletePreobfuscatedModules(config)"
-              >
-                Remove preobfuscated modules
-              </v-btn>
-            </v-card-actions>
-          </v-card>
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn color="primary" @click="editConfig(config)">
+                  Save
+                </v-btn>
+                <v-btn
+                  :disabled="!config.preobfuscatable"
+                  variant="text"
+                  color="primary"
+                  @click="openPreobfuscateDialog(config)"
+                >
+                  Preobfuscate
+                </v-btn>
+                <v-btn
+                  :disabled="!config.preobfuscatable"
+                  variant="text"
+                  color="error"
+                  @click="deletePreobfuscatedModules(config)"
+                >
+                  Remove preobfuscated modules
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
         </v-card-text>
       </v-card>
     </div>
@@ -196,6 +212,7 @@ export default {
   components: {
     ListPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       valid: true,
@@ -207,7 +224,7 @@ export default {
       reobfuscate: false,
       breads: [
         {
-          text: "Obfuscation",
+          title: "Obfuscation",
           disabled: true,
           href: "/obfuscation",
         },
@@ -216,16 +233,16 @@ export default {
       readonly: false,
       headers: [
         {
-          text: "Keyword",
-          value: "keyword",
+          title: "Keyword",
+          key: "keyword",
         },
         {
-          text: "Replacement",
-          value: "replacement",
+          title: "Replacement",
+          key: "replacement",
         },
         {
-          text: "Actions",
-          value: "actions",
+          title: "Actions",
+          key: "actions",
           sortable: false,
           width: 15,
         },
@@ -262,10 +279,6 @@ export default {
     refreshConfigs() {
       this.obfuscationStore.getConfigs();
     },
-    toggleEditing(item) {
-      console.log("editing");
-      this.$set(item, "editing", !item.editing);
-    },
     editKeyword(item) {
       this.editedKeyword = { ...item };
       this.keywordDialogTitle = "Edit Keyword";
@@ -285,9 +298,8 @@ export default {
         .substring(2, 8);
     },
     async saveKeyword() {
-      if (!this.$refs.form.validate()) {
-        return;
-      }
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
       try {
         if (!this.editedKeyword.id) {
           await obfuscationApi.createKeyword(this.editedKeyword);
@@ -297,12 +309,12 @@ export default {
         this.refreshKeywords();
         this.keywordDialog = false;
       } catch (e) {
-        this.$snack.error(`${e}`);
+        this.snack.error(`${e}`);
       }
     },
     async deleteKeyword(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete keyword ${item.keyword}?`,
           { color: "red" },
@@ -315,14 +327,14 @@ export default {
       try {
         await obfuscationApi.updateObfuscationConfig(config);
         if (config.preobfuscatable) {
-          this.$snack.success(
+          this.snack.success(
             'Updated config. Use "preobfuscate" to re-apply obfuscation.',
           );
         } else {
-          this.$snack.success("Updated config.");
+          this.snack.success("Updated config.");
         }
       } catch (e) {
-        this.$snack.error(`${e}`);
+        this.snack.error(`${e}`);
       }
     },
     openPreobfuscateDialog(config) {
@@ -340,17 +352,17 @@ export default {
           this.editedPreobfuscate.language,
           this.reobfuscate,
         );
-        this.$snack.info(
+        this.snack.info(
           "Preobfuscation started in the background. This will take a few minutes.",
         );
       } catch (e) {
-        this.$snack.error(`${e}`);
+        this.snack.error(`${e}`);
       }
       this.preobfuscateDialog = false;
     },
     async deletePreobfuscatedModules(config) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "",
           "Are you sure? This will delete all preobfuscated modules.",
           { color: "red", width: 500 },
@@ -358,9 +370,9 @@ export default {
       ) {
         try {
           await obfuscationApi.deletePreobfuscatedModules(config.language);
-          this.$snack.success("Preobfuscated modules deleted.");
+          this.snack.success("Preobfuscated modules deleted.");
         } catch (e) {
-          this.$snack.error(`${e}`);
+          this.snack.error(`${e}`);
         }
       }
     },
diff --git a/src/views/PluginEdit.vue b/src/views/PluginEdit.vue
index 076825d7..7a24bbd9 100644
--- a/src/views/PluginEdit.vue
+++ b/src/views/PluginEdit.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="p4">
-    <portal to="app-bar-extension">
+    <Teleport defer to="#app-bar-extension">
       <div style="display: flex; flex-direction: row; width: 100%">
-        <v-tabs v-model="tab" align-with-title>
-          <v-tab key="interact" href="#interact" :disabled="interactDisabled">
+        <v-tabs v-model="tab" color="primary" align-with-title>
+          <v-tab key="interact" value="interact" :disabled="interactDisabled">
             Interact
-            <v-icon x-small class="ml-1"> fa-terminal </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-terminal </v-icon>
           </v-tab>
-          <v-tab key="tasks" href="#tasks" :disabled="!plugin.loaded">
+          <v-tab key="tasks" value="tasks" :disabled="!plugin.loaded">
             Tasks
-            <v-icon x-small class="ml-1"> fa-sticky-note </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-sticky-note </v-icon>
           </v-tab>
-          <v-tab key="details" href="#details">
+          <v-tab key="details" value="details">
             Details
-            <v-icon x-small class="ml-1"> fa-info-circle </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-info-circle </v-icon>
           </v-tab>
-          <v-tab key="settings" href="#settings" :disabled="!plugin.loaded">
+          <v-tab key="settings" value="settings" :disabled="!plugin.loaded">
             Settings
-            <v-icon x-small class="ml-1"> fa-cog </v-icon>
+            <v-icon size="x-small" class="ml-1"> fa-cog </v-icon>
           </v-tab>
         </v-tabs>
       </div>
-    </portal>
+    </Teleport>
     <edit-page-top
       :breads="breads"
       :show-submit="false"
@@ -43,8 +43,9 @@
           :disabled="!plugin.loaded"
           color="green"
           label="Enabled"
-          class="mr-2 mt-3"
-          @change="toggleEnabled"
+          hide-details
+          class="mr-2"
+          @update:model-value="toggleEnabled"
         ></v-switch>
       </template>
     </edit-page-top>
@@ -53,10 +54,10 @@
       :resource-id="id"
       resource-type="plugin"
     />
-    <v-tabs-items v-else v-model="tab" class="scrollable-pane">
-      <v-tab-item
+    <v-window v-else v-model="tab" class="scrollable-pane">
+      <v-window-item
         key="interact"
-        :value="'interact'"
+        value="interact"
         :transition="false"
         :reverse-transition="false"
       >
@@ -64,7 +65,8 @@
         <v-card style="padding: 10px">
           <technique-chips :techniques="plugin.TechniqueChips" />
           <general-form
-            v-if="reset"
+            v-if="initialLoad"
+            :key="plugin.id"
             ref="generalform"
             v-model="form"
             :options="pluginOptions"
@@ -78,10 +80,10 @@
             Submit
           </v-btn>
         </v-card>
-      </v-tab-item>
-      <v-tab-item
+      </v-window-item>
+      <v-window-item
         key="tasks"
-        :value="'tasks'"
+        value="tasks"
         :transition="false"
         :reverse-transition="false"
       >
@@ -92,11 +94,11 @@
             :use-header="false"
           />
         </v-card>
-      </v-tab-item>
-      <v-tab-item
+      </v-window-item>
+      <v-window-item
         v-if="initialLoad"
         key="details"
-        :value="'details'"
+        value="details"
         :transition="false"
         :reverse-transition="false"
       >
@@ -106,7 +108,7 @@
             <v-row>
               <v-col cols="12">
                 <span v-if="!plugin.loaded">
-                  <v-alert prominent type="warning" outlined>
+                  <v-alert prominent type="warning" variant="outlined">
                     <v-row align="center">
                       <v-col class="grow">
                         <vue-markdown
@@ -124,7 +126,7 @@
                 <v-card
                   v-if="plugin.readme"
                   class="pa-4"
-                  outlined
+                  variant="outlined"
                   elevation="2"
                 >
                   <vue-markdown :source="plugin.readme" />
@@ -133,10 +135,10 @@
             </v-row>
           </v-card-text>
         </v-card>
-      </v-tab-item>
-      <v-tab-item
+      </v-window-item>
+      <v-window-item
         key="settings"
-        :value="'settings'"
+        value="settings"
         :transition="false"
         :reverse-transition="false"
       >
@@ -150,7 +152,8 @@
                 >
                 <template v-else>
                   <general-form
-                    v-if="reset"
+                    v-if="initialLoad"
+                    :key="`settings-${plugin.id}`"
                     ref="settingsform"
                     v-model="settingsForm"
                     :options="pluginSettingsOptions"
@@ -167,8 +170,8 @@
             </v-row>
           </v-card-text>
         </v-card>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 
@@ -195,9 +198,9 @@ export default {
     ErrorStateAlert,
     VueMarkdown,
   },
+  inject: ["snack"],
   data() {
     return {
-      reset: true,
       loading: false,
       isRefreshTasks: false,
       initialLoad: false,
@@ -211,13 +214,13 @@ export default {
     breads() {
       return [
         {
-          text: "Plugins",
+          title: "Plugins",
           disabled: false,
           to: "/plugins",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/plugins/edit",
         },
@@ -289,9 +292,9 @@ poetry add ${this.plugin.python_deps.join(" ")}
   },
   methods: {
     async submit() {
-      if (this.loading || !this.$refs.generalform.$refs.form.validate()) {
-        return;
-      }
+      if (this.loading) return;
+      const valid = await this.$refs.generalform.validate();
+      if (!valid) return;
 
       this.loading = true;
 
@@ -300,26 +303,26 @@ poetry add ${this.plugin.python_deps.join(" ")}
           this.plugin.id,
           this.form,
         );
-        this.$snack.success(`${response.detail}`);
+        this.snack.success(`${response.detail}`);
       } catch (err) {
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
 
       this.loading = false;
     },
     async submitSettings() {
-      if (this.loading || !this.$refs.settingsform.$refs.form.validate()) {
-        return;
-      }
+      if (this.loading) return;
+      const valid = await this.$refs.settingsform.validate();
+      if (!valid) return;
 
       this.loading = true;
 
       try {
         await pluginApi.updatePluginSettings(this.plugin.id, this.settingsForm);
         await this.getPlugin(this.id);
-        this.$snack.success("Settings updated");
+        this.snack.success("Settings updated");
       } catch (err) {
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
 
       this.loading = false;
@@ -335,36 +338,22 @@ poetry add ${this.plugin.python_deps.join(" ")}
         this.plugin = response;
       } catch (err) {
         this.plugin.enabled = !val;
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
       }
     },
     getPlugin(id) {
       pluginApi
         .getPlugin(id)
         .then((data) => {
-          this.reset = false;
-
           this.plugin = data;
-          setTimeout(() => {
-            this.reset = true;
-          }, 500);
+          this.initialLoad = true;
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
-        })
-        .finally(() => {
-          this.initialLoad = true;
         });
     },
   },
 };
 </script>
-
-<style lang="scss">
-// Overrides vuetify.css
-// Because we moved the tabs into a div, which made the color funky.
-.v-toolbar__content > div > .v-tabs > .v-slide-group.v-tabs-bar,
-.v-toolbar__extension > div > .v-tabs > .v-slide-group.v-tabs-bar {
-  background-color: inherit;
-}
-</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 0c832613..3022a7e0 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -23,12 +23,13 @@
         <span class="ma-2">{{ user.username }}</span>
 
         <v-spacer />
-        <v-btn color="primary" text @click="logout"> Logout </v-btn>
+        <v-btn color="primary" variant="text" @click="logout"> Logout </v-btn>
       </div>
       <v-divider />
       <div style="display: flex; flex-direction: row">
         <v-switch
           v-model="applicationStore.chatWidget"
+          color="primary"
           class="pl-8"
           :label="`Chat Widget`"
         />
@@ -41,7 +42,7 @@
         ref="form"
         v-model="valid"
         style="max-width: 500px"
-        @submit.prevent.native="submit"
+        @submit.prevent="submit"
       >
         <v-text-field
           v-model="password.form.password"
@@ -50,8 +51,8 @@
           :rules="rules['password']"
           label="Password"
           autocomplete="off"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           @click:append="showPassword = !showPassword"
         />
@@ -62,8 +63,8 @@
           :rules="rules['confirmPassword']"
           label="Confirm Password"
           autocomplete="off"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           @click:append="showConfirm = !showConfirm"
         />
@@ -215,6 +216,7 @@ export default {
   components: {
     ListPageTop,
   },
+  inject: ["snack", "confirm"],
   data() {
     return {
       password: {
@@ -250,7 +252,7 @@ export default {
       valid: false,
       breads: [
         {
-          text: "Settings",
+          title: "Settings",
           disabled: true,
           href: "/settings",
         },
@@ -307,13 +309,17 @@ export default {
       const data = new FormData();
       data.append("file", selectedFile);
 
-      await userApi.uploadAvatar(this.userId, data);
-      this.applicationStore.refreshMe();
-      this.$snack.success("Upload complete");
+      try {
+        await userApi.uploadAvatar(this.userId, data);
+        this.applicationStore.refreshMe();
+        this.snack.success("Upload complete");
+      } catch (err) {
+        this.snack.error(`Error uploading avatar: ${err}`);
+      }
     },
     async logout() {
       if (
-        await this.$root.$confirm("", "Are you sure you want to logout?", {
+        await this.confirm("", "Are you sure you want to logout?", {
           color: "green",
         })
       ) {
@@ -324,21 +330,21 @@ export default {
       this.applicationStore.clear();
       this.agentStore.clear();
     },
-    submit() {
-      if (this.password.loading || !this.$refs.form.validate()) {
-        return;
-      }
+    async submit() {
+      if (this.password.loading) return;
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       this.password.loading = true;
       userApi
         .updatePassword(this.user.id, this.password.form.password)
         .then(() => {
-          this.$snack.success("Password updated");
+          this.snack.success("Password updated");
           this.password.form = {};
           this.$refs.form.resetValidation();
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.password.loading = false;
@@ -349,10 +355,10 @@ export default {
       malleableApi
         .resetProfiles()
         .then(() => {
-          this.$snack.success("Profiles reset successful");
+          this.snack.success("Profiles reset successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.profiles.loading = false;
@@ -363,10 +369,10 @@ export default {
       malleableApi
         .reloadProfiles()
         .then(() => {
-          this.$snack.success("Profiles reload successful");
+          this.snack.success("Profiles reload successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.profiles.loading = false;
@@ -377,10 +383,10 @@ export default {
       moduleApi
         .reloadModules()
         .then(() => {
-          this.$snack.success("Module reload successful");
+          this.snack.success("Module reload successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.modules.loading = false;
@@ -391,10 +397,10 @@ export default {
       moduleApi
         .resetModules()
         .then(() => {
-          this.$snack.success("Module reset successful");
+          this.snack.success("Module reset successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.modules.loading = false;
@@ -405,10 +411,10 @@ export default {
       bypassApi
         .reloadBypasses()
         .then(() => {
-          this.$snack.success("Bypass reload successful");
+          this.snack.success("Bypass reload successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.bypasses.loading = false;
@@ -419,10 +425,10 @@ export default {
       bypassApi
         .resetBypasses()
         .then(() => {
-          this.$snack.success("Bypass reset successful");
+          this.snack.success("Bypass reset successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.bypasses.loading = false;
@@ -433,10 +439,10 @@ export default {
       pluginApi
         .reloadPlugins()
         .then(() => {
-          this.$snack.success("Plugin reload successful");
+          this.snack.success("Plugin reload successful");
         })
         .catch((err) => {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         })
         .finally(() => {
           this.plugins.loading = false;
diff --git a/src/views/StagerEdit.vue b/src/views/StagerEdit.vue
index 2b0a87ff..9291d444 100644
--- a/src/views/StagerEdit.vue
+++ b/src/views/StagerEdit.vue
@@ -43,9 +43,9 @@
       <v-autocomplete
         v-model="selectedTemplate"
         :items="stagerTemplateIds"
-        :loading="!reset"
-        dense
-        outlined
+        :loading="!initialLoad"
+        density="compact"
+        variant="outlined"
         label="Type"
         :readonly="!canEdit"
       />
@@ -53,20 +53,21 @@
         <v-col cols="6">
           <v-text-field
             v-model="stager.name"
-            outlined
-            dense
+            variant="outlined"
+            density="compact"
             label="Name"
             :readonly="!canEdit"
           />
         </v-col>
         <v-col cols="6">
-          <v-subheader>
+          <v-list-subheader>
             A name for the stager. Leave blank for an autogenerated name.
-          </v-subheader>
+          </v-list-subheader>
         </v-col>
       </v-row>
       <general-form
-        v-if="reset"
+        v-if="initialLoad"
+        :key="selectedTemplate"
         ref="generalform"
         v-model="form"
         :options="stagerOptions"
@@ -98,13 +99,13 @@ export default {
     TooltipButton,
   },
   mixins: [CopyMixin],
+  inject: ["snack", "confirm"],
   data() {
     return {
       stager: { options: {} },
       stagerTemplate: { options: {} },
       selectedTemplate: "",
       form: {},
-      reset: true,
       loading: false,
       formPriorities: ["Listener", "Language"],
       errorState: false,
@@ -184,13 +185,13 @@ export default {
     breads() {
       return [
         {
-          text: "Stagers",
+          title: "Stagers",
           disabled: false,
           to: "/stagers",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/stagers-edit",
         },
@@ -211,13 +212,9 @@ export default {
       async handler(val) {
         const a = await stagerApi
           .getStagerTemplate(val)
-          .catch((err) => this.$snack.error(`Error: ${err}`));
+          .catch((err) => this.snack.error(`Error: ${err}`));
         if (a) {
-          this.reset = false;
-
           this.stagerTemplate = a;
-          await this.$nextTick();
-          this.reset = true;
           this.initialLoad = true;
         }
       },
@@ -242,26 +239,25 @@ export default {
     }
   },
   methods: {
-    submit() {
-      if (this.loading || !this.$refs.generalform.$refs.form.validate()) {
-        return;
-      }
+    async submit() {
+      if (this.loading) return;
+      const valid = await this.$refs.generalform.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
-        stagerApi
-          .updateStager(this.id, { name: this.stager.name, options: this.form })
-          .then(() => {
-            this.$snack.success("Stager updated");
-            this.loading = false;
-          })
-          .then(() => {
-            this.getStager(this.id);
-          })
-          .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
-            this.loading = false;
+        try {
+          await stagerApi.updateStager(this.id, {
+            name: this.stager.name,
+            options: this.form,
           });
+          this.snack.success("Stager updated");
+          this.loading = false;
+          this.getStager(this.id);
+        } catch (err) {
+          this.snack.error(`Error: ${err}`);
+          this.loading = false;
+        }
       } else {
         stagerApi
           .createStager(
@@ -270,19 +266,19 @@ export default {
             this.form,
           )
           .then(({ id }) => {
-            this.$snack.success("Stager created");
+            this.snack.success("Stager created");
             this.loading = false;
             this.$router.push({ name: "stagerEdit", params: { id } });
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       }
     },
     async deleteStager() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete stager ${this.form.StarkillerName}?`,
           { color: "red" },
@@ -292,7 +288,7 @@ export default {
           await this.stagerStore.deleteStager(this.id);
           this.$router.push({ name: "stagers" });
         } catch (err) {
-          this.$snack.error(`Error: ${err}`);
+          this.snack.error(`Error: ${err}`);
         }
       }
     },
@@ -303,7 +299,9 @@ export default {
           this.stager = data;
           this.selectedTemplate = data.template;
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
diff --git a/src/views/Stagers.vue b/src/views/Stagers.vue
index a3c24201..4b1a5d5d 100644
--- a/src/views/Stagers.vue
+++ b/src/views/Stagers.vue
@@ -13,6 +13,7 @@
       <template #filters>
         <v-switch
           v-model="applicationStore.filterOnlyMyStagers"
+          color="primary"
           label="Only My Stagers"
         />
       </template>
@@ -29,7 +30,6 @@
 </template>
 
 <script>
-import moment from "moment";
 import DownloadMixin from "@/mixins/download-stager";
 import CopyMixin from "@/mixins/copy-stager";
 import ListPageTop from "@/components/ListPageTop.vue";
@@ -47,12 +47,12 @@ export default {
     StagersTable,
   },
   mixins: [DownloadMixin, CopyMixin],
+  inject: ["snack", "confirm"],
   data() {
     return {
-      moment,
       breads: [
         {
-          text: "Stagers",
+          title: "Stagers",
           disabled: true,
           href: "/stagers",
         },
@@ -80,7 +80,7 @@ export default {
     },
     async deleteStager(item) {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           "Are you sure you want to delete this stager?",
           { color: "red" },
@@ -91,7 +91,7 @@ export default {
     },
     async deleteStagers() {
       if (
-        await this.$root.$confirm(
+        await this.confirm(
           "Delete",
           `Are you sure you want to delete ${this.selected.length} stagers?`,
           { color: "red" },
diff --git a/src/views/UserEdit.vue b/src/views/UserEdit.vue
index f20d9867..82d56935 100644
--- a/src/views/UserEdit.vue
+++ b/src/views/UserEdit.vue
@@ -19,14 +19,14 @@
         ref="form"
         v-model="valid"
         style="max-width: 500px"
-        @submit.prevent.native="submit"
+        @submit.prevent="submit"
       >
         <v-text-field
           v-model="form.username"
           :rules="rules['name']"
           label="Username"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
           :disabled="!isNew"
         />
@@ -34,30 +34,40 @@
           v-if="isNew"
           v-model="form.password"
           :type="showPassword ? 'text' : 'password'"
-          :append-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
+          :append-inner-icon="showPassword ? 'fa-eye' : 'fa-eye-slash'"
           :rules="rules['password']"
           label="Password"
           autocomplete="off"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
-          @click:append="showPassword = !showPassword"
+          @click:append-inner="showPassword = !showPassword"
         />
         <v-text-field
           v-if="isNew"
           v-model="form.confirm_password"
           :type="showConfirm ? 'text' : 'password'"
-          :append-icon="showConfirm ? 'fa-eye' : 'fa-eye-slash'"
+          :append-inner-icon="showConfirm ? 'fa-eye' : 'fa-eye-slash'"
           :rules="rules['confirmPassword']"
           label="Confirm Password"
           autocomplete="off"
-          outlined
-          dense
+          variant="outlined"
+          density="compact"
           required
-          @click:append="showConfirm = !showConfirm"
+          @click:append-inner="showConfirm = !showConfirm"
+        />
+        <v-switch
+          v-if="isAdmin"
+          v-model="form.is_admin"
+          color="primary"
+          label="Admin"
+        />
+        <v-switch
+          v-if="!isNew"
+          v-model="form.enabled"
+          color="primary"
+          label="Enabled"
         />
-        <v-switch v-if="isAdmin" v-model="form.is_admin" label="Admin" />
-        <v-switch v-if="!isNew" v-model="form.enabled" label="Enabled" />
       </v-form>
     </v-card>
   </div>
@@ -76,6 +86,7 @@ export default {
     ErrorStateAlert,
     EditPageTop,
   },
+  inject: ["snack"],
   data() {
     return {
       form: {
@@ -114,13 +125,13 @@ export default {
     breads() {
       return [
         {
-          text: "Users",
+          title: "Users",
           disabled: false,
           to: "/users",
           exact: true,
         },
         {
-          text: this.breadcrumbName,
+          title: this.breadcrumbName,
           disabled: true,
           to: "/users-edit",
         },
@@ -144,33 +155,33 @@ export default {
     }
   },
   methods: {
-    submit() {
-      if (this.loading || !this.$refs.form.validate()) {
-        return;
-      }
+    async submit() {
+      if (this.loading) return;
+      const { valid } = await this.$refs.form.validate();
+      if (!valid) return;
 
       this.loading = true;
       if (this.id > 0) {
         userApi
           .updateUser(this.form)
           .then(() => {
-            this.$snack.success("User updated");
+            this.snack.success("User updated");
             this.loading = false;
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       } else {
         userApi
           .createUser(this.form)
           .then(({ id }) => {
-            this.$snack.success("User created");
+            this.snack.success("User created");
             this.loading = false;
             this.$router.push({ name: "userEdit", params: { id } });
           })
           .catch((err) => {
-            this.$snack.error(`Error: ${err}`);
+            this.snack.error(`Error: ${err}`);
             this.loading = false;
           });
       }
@@ -182,7 +193,9 @@ export default {
           this.user = data;
           this.form = data;
         })
-        .catch(() => {
+        .catch((err) => {
+          console.error(err);
+          this.snack.error(`Failed to load resource: ${err}`);
           this.errorState = true;
         });
     },
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 360977a9..5e2a98d0 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -8,7 +8,7 @@
       @create="create"
       @refresh="getUsers"
     />
-    <v-data-table :headers="headers" :items="users" dense>
+    <v-data-table :headers="headers" :items="users" density="compact">
       <template #item.username="{ item }">
         <router-link
           v-if="isAdmin"
@@ -20,18 +20,26 @@
         <span v-else>{{ item.username }}</span>
       </template>
       <template #item.is_admin="{ item }">
-        <v-simple-checkbox v-model="item.is_admin" disabled />
+        <v-checkbox
+          v-model="item.is_admin"
+          color="primary"
+          density="compact"
+          hide-details
+          disabled
+        />
       </template>
       <template #item.actions="{ item }">
-        <v-tooltip v-if="isAdmin" :disabled="!item.admin" top>
-          <template #activator="{ on }">
-            <div style="max-width: 120px" v-on="on">
+        <v-tooltip v-if="isAdmin" :disabled="!item.admin" location="top">
+          <template #activator="{ props: activatorProps }">
+            <div style="max-width: 120px" v-bind="activatorProps">
               <v-switch
                 v-model="item.enabled"
+                color="primary"
+                density="compact"
+                hide-details
                 :disabled="item.admin"
                 label="Enabled"
-                v-on="on"
-                @change="disableUser(item)"
+                @update:model-value="disableUser(item)"
               />
             </div>
           </template>
@@ -45,7 +53,6 @@
 <script>
 import { mapState } from "pinia";
 import * as userApi from "@/api/user-api";
-import moment from "moment";
 import ListPageTop from "@/components/ListPageTop.vue";
 import { useUserStore } from "@/stores/user-module";
 import { useApplicationStore } from "@/stores/application-module";
@@ -55,20 +62,20 @@ export default {
   components: {
     ListPageTop,
   },
+  inject: ["snack"],
   data() {
     return {
-      moment,
       breads: [
         {
-          text: "Users",
+          title: "Users",
           disabled: true,
           href: "/users",
         },
       ],
       headers: [
-        { text: "Name", value: "username" },
-        { text: "Is Admin", value: "is_admin" },
-        { text: "Actions", value: "actions", sortable: false },
+        { title: "Name", key: "username" },
+        { title: "Is Admin", key: "is_admin" },
+        { title: "Actions", key: "actions", sortable: false },
       ],
     };
   },
@@ -90,7 +97,7 @@ export default {
     },
     async disableUser(item) {
       userApi.updateUser(item).catch((err) => {
-        this.$snack.error(`Error: ${err}`);
+        this.snack.error(`Error: ${err}`);
         item.enabled = !item.enabled;
       });
     },
diff --git a/vite.config.js b/vite.config.js
index 45e92af7..2b82529e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,18 +1,13 @@
 import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue2";
-import { VuetifyResolver } from "unplugin-vue-components/resolvers";
-import Components from "unplugin-vue-components/vite";
+import vue from "@vitejs/plugin-vue";
+import vuetify from "vite-plugin-vuetify";
+import path from "path";
+import { fileURLToPath } from "url";
 
-const path = require("path");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [VuetifyResolver()],
-    }),
-  ],
+  plugins: [vue(), vuetify({ autoImport: true })],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
diff --git a/yarn.lock b/yarn.lock
index 1a22fed6..334e9bd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,152 +2,145 @@
 # yarn lockfile v1
 
 
-"@antfu/utils@^0.7.2":
-  version "0.7.10"
-  resolved "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz"
-  integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
-
 "@babel/helper-string-parser@^7.27.1":
   version "7.27.1"
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz"
   integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
 
-"@babel/helper-validator-identifier@^7.27.1":
-  version "7.27.1"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz"
-  integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
-
-"@babel/parser@^7.18.4":
-  version "7.27.2"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.27.2.tgz"
-  integrity sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==
-  dependencies:
-    "@babel/types" "^7.27.1"
+"@babel/helper-validator-identifier@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
+  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
 
-"@babel/runtime@^7.13.10":
-  version "7.26.0"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz"
-  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+"@babel/parser@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.0.tgz#669ef345add7d057e92b7ed15f0bac07611831b6"
+  integrity sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==
   dependencies:
-    regenerator-runtime "^0.14.0"
+    "@babel/types" "^7.29.0"
 
-"@babel/types@^7.27.1":
-  version "7.27.1"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz"
-  integrity sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==
+"@babel/types@^7.29.0":
+  version "7.29.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.0.tgz#9f5b1e838c446e72cf3cd4b918152b8c605e37c7"
+  integrity sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==
   dependencies:
     "@babel/helper-string-parser" "^7.27.1"
-    "@babel/helper-validator-identifier" "^7.27.1"
-
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
-
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+    "@babel/helper-validator-identifier" "^7.28.5"
+
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -210,23 +203,15 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@jridgewell/sourcemap-codec@^1.4.13":
-  version "1.4.15"
-  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+"@jridgewell/sourcemap-codec@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
 
-"@mdi/font@5.9.55":
-  version "5.9.55"
-  resolved "https://registry.npmjs.org/@mdi/font/-/font-5.9.55.tgz"
-  integrity sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==
-
-"@mrmlnc/readdir-enhanced@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz"
-  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
-  dependencies:
-    call-me-maybe "^1.0.1"
-    glob-to-regexp "^0.3.0"
+"@mdi/font@^7.0":
+  version "7.4.47"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
+  integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -236,17 +221,12 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.stat@^1.1.2":
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz"
-  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
-
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -254,14 +234,219 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@rollup/pluginutils@^5.0.2":
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz"
-  integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
-  dependencies:
-    "@types/estree" "^1.0.0"
-    estree-walker "^2.0.2"
-    picomatch "^4.0.2"
+"@parcel/watcher-android-arm64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz#5f32e0dba356f4ac9a11068d2a5c134ca3ba6564"
+  integrity sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==
+
+"@parcel/watcher-darwin-arm64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz#88d3e720b59b1eceffce98dac46d7c40e8be5e8e"
+  integrity sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==
+
+"@parcel/watcher-darwin-x64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz#bf05d76a78bc15974f15ec3671848698b0838063"
+  integrity sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==
+
+"@parcel/watcher-freebsd-x64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz#8bc26e9848e7303ac82922a5ae1b1ef1bdb48a53"
+  integrity sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==
+
+"@parcel/watcher-linux-arm-glibc@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz#1328fee1deb0c2d7865079ef53a2ba4cc2f8b40a"
+  integrity sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==
+
+"@parcel/watcher-linux-arm-musl@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz#bad0f45cb3e2157746db8b9d22db6a125711f152"
+  integrity sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==
+
+"@parcel/watcher-linux-arm64-glibc@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz#b75913fbd501d9523c5f35d420957bf7d0204809"
+  integrity sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==
+
+"@parcel/watcher-linux-arm64-musl@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz#da5621a6a576070c8c0de60dea8b46dc9c3827d4"
+  integrity sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==
+
+"@parcel/watcher-linux-x64-glibc@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz#ce437accdc4b30f93a090b4a221fd95cd9b89639"
+  integrity sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==
+
+"@parcel/watcher-linux-x64-musl@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz#02400c54b4a67efcc7e2327b249711920ac969e2"
+  integrity sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==
+
+"@parcel/watcher-win32-arm64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz#caae3d3c7583ca0a7171e6bd142c34d20ea1691e"
+  integrity sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==
+
+"@parcel/watcher-win32-ia32@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz#9ac922550896dfe47bfc5ae3be4f1bcaf8155d6d"
+  integrity sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==
+
+"@parcel/watcher-win32-x64@2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz#73fdafba2e21c448f0e456bbe13178d8fe11739d"
+  integrity sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==
+
+"@parcel/watcher@^2.4.1":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.6.tgz#3f932828c894f06d0ad9cfefade1756ecc6ef1f1"
+  integrity sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==
+  dependencies:
+    detect-libc "^2.0.3"
+    is-glob "^4.0.3"
+    node-addon-api "^7.0.0"
+    picomatch "^4.0.3"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.5.6"
+    "@parcel/watcher-darwin-arm64" "2.5.6"
+    "@parcel/watcher-darwin-x64" "2.5.6"
+    "@parcel/watcher-freebsd-x64" "2.5.6"
+    "@parcel/watcher-linux-arm-glibc" "2.5.6"
+    "@parcel/watcher-linux-arm-musl" "2.5.6"
+    "@parcel/watcher-linux-arm64-glibc" "2.5.6"
+    "@parcel/watcher-linux-arm64-musl" "2.5.6"
+    "@parcel/watcher-linux-x64-glibc" "2.5.6"
+    "@parcel/watcher-linux-x64-musl" "2.5.6"
+    "@parcel/watcher-win32-arm64" "2.5.6"
+    "@parcel/watcher-win32-ia32" "2.5.6"
+    "@parcel/watcher-win32-x64" "2.5.6"
+
+"@rollup/rollup-android-arm-eabi@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz#a6742c74c7d9d6d604ef8a48f99326b4ecda3d82"
+  integrity sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==
+
+"@rollup/rollup-android-arm64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz#97247be098de4df0c11971089fd2edf80a5da8cf"
+  integrity sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==
+
+"@rollup/rollup-darwin-arm64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz#674852cf14cf11b8056e0b1a2f4e872b523576cf"
+  integrity sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==
+
+"@rollup/rollup-darwin-x64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz#36dfd7ed0aaf4d9d89d9ef983af72632455b0246"
+  integrity sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==
+
+"@rollup/rollup-freebsd-arm64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz#2f87c2074b4220260fdb52a9996246edfc633c22"
+  integrity sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==
+
+"@rollup/rollup-freebsd-x64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz#9b5a26522a38a95dc06616d1939d4d9a76937803"
+  integrity sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz#86aa4859385a8734235b5e40a48e52d770758c3a"
+  integrity sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==
+
+"@rollup/rollup-linux-arm-musleabihf@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz#cbe70e56e6ece8dac83eb773b624fc9e5a460976"
+  integrity sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==
+
+"@rollup/rollup-linux-arm64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz#d14992a2e653bc3263d284bc6579b7a2890e1c45"
+  integrity sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==
+
+"@rollup/rollup-linux-arm64-musl@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz#2fdd1ddc434ea90aeaa0851d2044789b4d07f6da"
+  integrity sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==
+
+"@rollup/rollup-linux-loong64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz#8a181e6f89f969f21666a743cd411416c80099e7"
+  integrity sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==
+
+"@rollup/rollup-linux-loong64-musl@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz#904125af2babc395f8061daa27b5af1f4e3f2f78"
+  integrity sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==
+
+"@rollup/rollup-linux-ppc64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz#a57970ac6864c9a3447411a658224bdcf948be22"
+  integrity sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==
+
+"@rollup/rollup-linux-ppc64-musl@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz#bb84de5b26870567a4267666e08891e80bb56a63"
+  integrity sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==
+
+"@rollup/rollup-linux-riscv64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz#72d00d2c7fb375ce3564e759db33f17a35bffab9"
+  integrity sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==
+
+"@rollup/rollup-linux-riscv64-musl@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz#4c166ef58e718f9245bd31873384ba15a5c1a883"
+  integrity sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==
+
+"@rollup/rollup-linux-s390x-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz#bb5025cde9a61db478c2ca7215808ad3bce73a09"
+  integrity sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==
+
+"@rollup/rollup-linux-x64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz#9b66b1f9cd95c6624c788f021c756269ffed1552"
+  integrity sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==
+
+"@rollup/rollup-linux-x64-musl@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz#b007ca255dc7166017d57d7d2451963f0bd23fd9"
+  integrity sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==
+
+"@rollup/rollup-openbsd-x64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz#e8b357b2d1aa2c8d76a98f5f0d889eabe93f4ef9"
+  integrity sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==
+
+"@rollup/rollup-openharmony-arm64@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz#96c2e3f4aacd3d921981329831ff8dde492204dc"
+  integrity sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==
+
+"@rollup/rollup-win32-arm64-msvc@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz#2d865149d706d938df8b4b8f117e69a77646d581"
+  integrity sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==
+
+"@rollup/rollup-win32-ia32-msvc@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz#abe1593be0fa92325e9971c8da429c5e05b92c36"
+  integrity sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==
+
+"@rollup/rollup-win32-x64-gnu@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz#c4af3e9518c9a5cd4b1c163dc81d0ad4d82e7eab"
+  integrity sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==
+
+"@rollup/rollup-win32-x64-msvc@4.59.0":
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz#4584a8a87b29188a4c1fe987a9fcf701e256d86c"
+  integrity sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -278,10 +463,10 @@
   resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz"
   integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
-"@types/estree@^1.0.0":
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz"
-  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+"@types/estree@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -293,21 +478,54 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue2@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.2.0.tgz"
-  integrity sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==
+"@vitejs/plugin-vue@^5.0":
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz#9e8a512eb174bfc2a333ba959bbf9de428d89ad8"
+  integrity sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==
+
+"@vue/compiler-core@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.29.tgz#3fb70630c62a2e715eeddc3c2a48f46aa4507adc"
+  integrity sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==
+  dependencies:
+    "@babel/parser" "^7.29.0"
+    "@vue/shared" "3.5.29"
+    entities "^7.0.1"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.1"
+
+"@vue/compiler-dom@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz#055cf5492005249591c7fb45868a874468e4ffb3"
+  integrity sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==
+  dependencies:
+    "@vue/compiler-core" "3.5.29"
+    "@vue/shared" "3.5.29"
+
+"@vue/compiler-sfc@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz#8b1b0707fb53c122fedd566244a564eaf40ee71f"
+  integrity sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==
+  dependencies:
+    "@babel/parser" "^7.29.0"
+    "@vue/compiler-core" "3.5.29"
+    "@vue/compiler-dom" "3.5.29"
+    "@vue/compiler-ssr" "3.5.29"
+    "@vue/shared" "3.5.29"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.21"
+    postcss "^8.5.6"
+    source-map-js "^1.2.1"
 
-"@vue/compiler-sfc@2.7.14":
-  version "2.7.14"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz"
-  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+"@vue/compiler-ssr@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz#83ac28c860271bd1c9822d135ac78c388403f949"
+  integrity sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==
   dependencies:
-    "@babel/parser" "^7.18.4"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
+    "@vue/compiler-dom" "3.5.29"
+    "@vue/shared" "3.5.29"
 
-"@vue/devtools-api@^6.6.3":
+"@vue/devtools-api@^6.6.3", "@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -326,12 +544,57 @@
     eslint-plugin-vuejs-accessibility "^1.2.0"
     vue-eslint-parser "^9.0.3"
 
+"@vue/reactivity@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.29.tgz#68fbaedcc2584328060edceedc4d4370b49c9fab"
+  integrity sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==
+  dependencies:
+    "@vue/shared" "3.5.29"
+
+"@vue/runtime-core@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.29.tgz#fbd34110aa47e74a22fe430734018bec56913b40"
+  integrity sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==
+  dependencies:
+    "@vue/reactivity" "3.5.29"
+    "@vue/shared" "3.5.29"
+
+"@vue/runtime-dom@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz#4eb686b22178f13c262ea1d0d7171a3134ced21f"
+  integrity sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==
+  dependencies:
+    "@vue/reactivity" "3.5.29"
+    "@vue/runtime-core" "3.5.29"
+    "@vue/shared" "3.5.29"
+    csstype "^3.2.3"
+
+"@vue/server-renderer@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.29.tgz#9cbcbf676b2976fbb8171d5de79501894ba84cad"
+  integrity sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.29"
+    "@vue/shared" "3.5.29"
+
+"@vue/shared@3.5.29":
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.29.tgz#0fe0d7637b05599d56ca58d83a77c637a1774110"
+  integrity sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==
+
+"@vuetify/loader-shared@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@vuetify/loader-shared/-/loader-shared-2.1.2.tgz#faf27cb8c40ba5a45b930b9a2785e35525e9c96f"
+  integrity sha512-X+1jBLmXHkpQEnC0vyOb4rtX2QSkBiFhaFXz8yhQqN2A4vQ6k2nChxN4Ol7VAY5KoqMdFoRMnmNdp/1qYXDQig==
+  dependencies:
+    upath "^2.0.1"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.12.1, acorn@^8.9.0:
+acorn@^8.9.0:
   version "8.14.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
@@ -373,14 +636,6 @@ ansi_up@^5.2.1:
   resolved "https://registry.npmjs.org/ansi_up/-/ansi_up-5.2.1.tgz"
   integrity sha512-5bz5T/7FRmlxA37zDXhG6cAwlcZtfnmNLDJra66EEIT3kYlw5aPJdbkJEhm59D6kA4Wi5ict6u6IDYHJaQlH+g==
 
-anymatch@~3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
-  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
@@ -391,21 +646,6 @@ aria-query@^5.0.0, aria-query@^5.3.2:
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz"
   integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
 
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz"
-  integrity sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz"
-  integrity sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==
-
 array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz"
@@ -426,23 +666,6 @@ array-includes@^3.1.6, array-includes@^3.1.8:
     get-intrinsic "^1.2.4"
     is-string "^1.0.7"
 
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz"
-  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz"
-  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz"
-  integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
-
 array.prototype.findlast@^1.2.5:
   version "1.2.5"
   resolved "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz"
@@ -512,16 +735,6 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz"
-  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz"
-  integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
-
 ast-types-flow@^0.0.8:
   version "0.0.8"
   resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz"
@@ -532,16 +745,6 @@ astral-regex@^2.0.0:
   resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-atob@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
-  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
-
-autolinker@^1.8.3:
-  version "1.8.3"
-  resolved "https://registry.npmjs.org/autolinker/-/autolinker-1.8.3.tgz"
-  integrity sha512-FtH5edduS5XwI1u9tLirRJv33ql5ualzHflFWX/ko5bggDXI8llFG/347VZGK2NAeDXuTh9p5xvCGQ+UrgpjtQ==
-
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz"
@@ -571,24 +774,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.npmjs.org/base/-/base-0.11.2.tgz"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
@@ -602,51 +787,6 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace-expansion@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
-  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
-  dependencies:
-    balanced-match "^1.0.0"
-
-braces@^2.3.1:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
-braces@^3.0.3, braces@~3.0.2:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
-  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
-  dependencies:
-    fill-range "^7.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz"
@@ -658,11 +798,6 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
-call-me-maybe@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz"
-  integrity sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@@ -676,38 +811,12 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
-  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
-
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz"
-  integrity sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==
+chokidar@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
+  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
   dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
+    readdirp "^4.0.1"
 
 color-convert@^2.0.1:
   version "2.0.1"
@@ -721,11 +830,6 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -736,11 +840,6 @@ confusing-browser-globals@^1.0.10:
   resolved "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz"
   integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
 
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
-  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
-
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -755,10 +854,10 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.1.0:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+csstype@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
@@ -792,13 +891,6 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-debug@^2.2.0, debug@^2.3.3:
-  version "2.6.9"
-  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -813,10 +905,12 @@ debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   dependencies:
     ms "2.1.2"
 
-decode-uri-component@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz"
-  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+debug@^4.3.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
 
 deep-is@^0.1.3:
   version "0.1.4"
@@ -841,35 +935,10 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz"
-  integrity sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz"
-  integrity sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-dir-glob@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz"
-  integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==
-  dependencies:
-    arrify "^1.0.1"
-    path-type "^3.0.0"
+detect-libc@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
 
 doctrine@^2.1.0:
   version "2.1.0"
@@ -885,18 +954,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-emoji-datasource@7.0.2:
-  version "7.0.2"
-  resolved "https://registry.npmjs.org/emoji-datasource/-/emoji-datasource-7.0.2.tgz"
-  integrity sha512-F5TTUSktTIfbjHIlaz8tjsQ8EAD0UpJtj1i5O13jQARWTddtFgam3nE1W5WgSQoqU/cuTnF1H9tK/wlCOyzfiA==
-
-emoji-js@^3.4.0:
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/emoji-js/-/emoji-js-3.7.0.tgz"
-  integrity sha512-YNJCF8DOYI1AZnkSIcJbmIN6rtXtSv5DObqzvHuGAP8VLQc15MMN+DG9rQVSfHPXGFkFub9pGvbiO4FNz5+sjg==
-  dependencies:
-    emoji-datasource "7.0.2"
-
 emoji-regex@^10.0.0:
   version "10.4.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz"
@@ -928,10 +985,15 @@ engine.io-parser@~5.2.1:
   resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz"
   integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
 
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
+entities@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-7.0.1.tgz#26e8a88889db63417dcb9a1e79a3f1bc92b5976b"
+  integrity sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==
 
 es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
   version "1.23.3"
@@ -1049,38 +1111,34 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
-
-escape-goat@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/escape-goat/-/escape-goat-1.3.0.tgz"
-  integrity sha512-E2nU1Y39N5UgfLU8qwMlK0vZrZprIwWLeVmDYN8wd/e37hMtGzu2w1DBiREts0XHfgyZEQlj/hYr0H0izF0HDQ==
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
@@ -1314,76 +1372,11 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz"
-  integrity sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz"
-  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz"
-  integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^2.0.2:
-  version "2.2.7"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz"
-  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
-  dependencies:
-    "@mrmlnc/readdir-enhanced" "^2.2.1"
-    "@nodelib/fs.stat" "^1.1.2"
-    glob-parent "^3.1.0"
-    is-glob "^4.0.0"
-    merge2 "^1.2.3"
-    micromatch "^3.1.10"
-
-fast-glob@^3.2.12:
-  version "3.3.2"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
@@ -1408,28 +1401,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-type@^10.7.0:
-  version "10.11.0"
-  resolved "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz"
-  integrity sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
-  integrity sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
-fill-range@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
-  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
-  dependencies:
-    to-regex-range "^5.0.1"
-
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
@@ -1464,24 +1435,12 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
-  integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz"
-  integrity sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==
-  dependencies:
-    map-cache "^0.2.2"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -1526,26 +1485,6 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz"
-  integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
-
-glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz"
-  integrity sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-parent@^5.1.2, glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
@@ -1553,12 +1492,7 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz"
-  integrity sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==
-
-glob@^7.1.2, glob@^7.1.3:
+glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -1585,19 +1519,6 @@ globalthis@^1.0.3, globalthis@^1.0.4:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
-globby@^8.0.1:
-  version "8.0.2"
-  resolved "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz"
-  integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==
-  dependencies:
-    array-union "^1.0.1"
-    dir-glob "2.0.0"
-    fast-glob "^2.0.2"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
-
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -1644,37 +1565,6 @@ has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   dependencies:
     has-symbols "^1.0.3"
 
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz"
-  integrity sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz"
-  integrity sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz"
-  integrity sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz"
-  integrity sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
 hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
@@ -1682,27 +1572,15 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-ignore@^3.3.5:
-  version "3.3.10"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz"
-  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
-
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
-imagemin@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.npmjs.org/imagemin/-/imagemin-6.1.0.tgz"
-  integrity sha512-8ryJBL1CN5uSHpiBMX0rJw79C9F9aJqMnjGnrd/1CafegpNuA81RBAAru/jQQEOWlOJJlpRnlcVFF6wq+Ist0A==
-  dependencies:
-    file-type "^10.7.0"
-    globby "^8.0.1"
-    make-dir "^1.0.0"
-    p-pipe "^1.1.0"
-    pify "^4.0.1"
-    replace-ext "^1.0.0"
+immutable@^5.0.2:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.4.tgz#e3f8c1fe7b567d56cf26698f31918c241dae8c1f"
+  integrity sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==
 
 import-fresh@^3.2.1:
   version "3.3.0"
@@ -1739,13 +1617,6 @@ internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
-is-accessor-descriptor@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.1.tgz"
-  integrity sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==
-  dependencies:
-    hasown "^2.0.0"
-
 is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz"
@@ -1768,13 +1639,6 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
@@ -1783,11 +1647,6 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
@@ -1800,13 +1659,6 @@ is-core-module@^2.13.0, is-core-module@^2.15.1:
   dependencies:
     hasown "^2.0.2"
 
-is-data-descriptor@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.1.tgz"
-  integrity sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==
-  dependencies:
-    hasown "^2.0.0"
-
 is-data-view@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz"
@@ -1821,35 +1673,7 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-descriptor@^0.1.0:
-  version "0.1.7"
-  resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.7.tgz"
-  integrity sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==
-  dependencies:
-    is-accessor-descriptor "^1.0.1"
-    is-data-descriptor "^1.0.1"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz"
-  integrity sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==
-  dependencies:
-    is-accessor-descriptor "^1.0.1"
-    is-data-descriptor "^1.0.1"
-
-is-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
-  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
-is-extglob@^2.1.0, is-extglob@^2.1.1:
+is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
@@ -1873,14 +1697,7 @@ is-generator-function@^1.0.10:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz"
-  integrity sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==
-  dependencies:
-    is-extglob "^2.1.0"
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1904,30 +1721,11 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz"
-  integrity sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==
-  dependencies:
-    kind-of "^3.0.2"
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
 is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
@@ -1989,16 +1787,6 @@ is-weakset@^2.0.3:
     call-bind "^1.0.7"
     get-intrinsic "^1.2.4"
 
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
-isarray@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz"
@@ -2009,18 +1797,6 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz"
-  integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz"
-  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
-
 iterator.prototype@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz"
@@ -2088,25 +1864,6 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@6.0.3, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
-  integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz"
-  integrity sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==
-  dependencies:
-    is-buffer "^1.1.5"
-
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz"
@@ -2127,17 +1884,12 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-linkify-it@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz"
-  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
   dependencies:
-    uc.micro "^1.0.1"
-
-local-pkg@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz"
-  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
+    uc.micro "^2.0.0"
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -2173,79 +1925,29 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-magic-string@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz"
-  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.13"
-
-make-dir@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz"
-  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
-  dependencies:
-    pify "^3.0.0"
-
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz"
-  integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz"
-  integrity sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==
+magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
   dependencies:
-    object-visit "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.5.5"
 
-markdown-it@^12.0.6:
-  version "12.3.2"
-  resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz"
-  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
+markdown-it@^14.1.0:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.1.tgz#856f90b66fc39ae70affd25c1b18b581d7deee1f"
+  integrity sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==
   dependencies:
     argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
+    entities "^4.4.0"
+    linkify-it "^5.0.0"
+    mdurl "^2.0.0"
+    punycode.js "^2.3.1"
+    uc.micro "^2.1.0"
 
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz"
-  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
-
-merge2@^1.2.3, merge2@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
-  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-
-micromatch@^3.1.10:
-  version "3.1.10"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
-micromatch@^4.0.4:
-  version "4.0.8"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
-  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
-  dependencies:
-    braces "^3.0.3"
-    picomatch "^2.3.1"
+mdurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
 
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
@@ -2254,82 +1956,40 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.1.1:
-  version "5.1.6"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz"
-  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimist@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.3.tgz"
-  integrity sha512-+bMdgqjMN/Z77a6NlY/I3U5LlRDbnmaAk6lDveAPKwSpcPM4tKAuYsvYF8xjhOPXhOYGe/73vVLVez5PW+jqhw==
-
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
 moment@^2.29.1:
   version "2.29.4"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
-  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
-
 ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-msgdown@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/msgdown/-/msgdown-1.0.2.tgz"
-  integrity sha512-KY0nYCeFfG34umrpWPPRLQTh0apC6RdsnAaKZIG9A38HZ3RfVxamgvYwuxA1Z1o/wk6ycR/JmZI5ZKFpMO7AFA==
-
-nanoid@^3.3.6:
-  version "3.3.7"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nanoid@^3.3.11:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
 
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
 
 nth-check@^2.1.1:
   version "2.1.1"
@@ -2343,15 +2003,6 @@ object-assign@^4.1.1:
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz"
-  integrity sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
 object-inspect@^1.13.1:
   version "1.13.2"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz"
@@ -2362,13 +2013,6 @@ object-keys@^1.1.1:
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz"
-  integrity sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==
-  dependencies:
-    isobject "^3.0.0"
-
 object.assign@^4.1.2, object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz"
@@ -2407,13 +2051,6 @@ object.groupby@^1.0.3:
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz"
-  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
-  dependencies:
-    isobject "^3.0.1"
-
 object.values@^1.1.6, object.values@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz"
@@ -2456,11 +2093,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-pipe@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/p-pipe/-/p-pipe-1.2.0.tgz"
-  integrity sha512-IA8SqjIGA8l9qOksXJvsvkeQ+VGb0TAzNCzvKvz9wt5wWLqfWbV6fXy43gpR2L4Te8sOq3S+Ql9biAaMKPdbtw==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -2468,16 +2100,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz"
-  integrity sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz"
-  integrity sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -2498,37 +2120,15 @@ path-parse@^1.0.7:
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
-picomatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz"
-  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
-  integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+picomatch@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.3.tgz#796c76136d1eead715db1e7bad785dedd695a042"
+  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
 pinia-plugin-persistedstate@^3.2.0:
   version "3.2.0"
@@ -2543,21 +2143,6 @@ pinia@^2.1.7:
     "@vue/devtools-api" "^6.6.3"
     vue-demi "^0.14.10"
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
-portal-vue@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz"
-  integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
-
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
@@ -2571,14 +2156,14 @@ postcss-selector-parser@^6.0.15:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.27:
-  version "8.4.31"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+postcss@^8.4.43, postcss@^8.5.6:
+  version "8.5.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.8.tgz#6230ecc8fb02e7a0f6982e53990937857e13f399"
+  integrity sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==
   dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -2599,6 +2184,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+punycode.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -2621,12 +2211,10 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-readdirp@~3.6.0:
-  version "3.6.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
-  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-  dependencies:
-    picomatch "^2.2.1"
+readdirp@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d"
+  integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
 
 reflect.getprototypeof@^1.0.4:
   version "1.0.6"
@@ -2641,19 +2229,6 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
-regenerator-runtime@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
-  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
-
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
 regexp.prototype.flags@^1.5.2:
   version "1.5.3"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz"
@@ -2664,21 +2239,6 @@ regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.2"
 
-repeat-element@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz"
-  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz"
-  integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
-
-replace-ext@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz"
-  integrity sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==
-
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
@@ -2689,12 +2249,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
-  integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
-
-resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4:
+resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -2712,11 +2267,6 @@ resolve@^2.0.0-next.5:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@@ -2729,11 +2279,38 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^3.27.1:
-  version "3.29.5"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz"
-  integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
+rollup@^4.20.0:
+  version "4.59.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.59.0.tgz#cf74edac17c1486f562d728a4d923a694abdf06f"
+  integrity sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==
+  dependencies:
+    "@types/estree" "1.0.8"
   optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.59.0"
+    "@rollup/rollup-android-arm64" "4.59.0"
+    "@rollup/rollup-darwin-arm64" "4.59.0"
+    "@rollup/rollup-darwin-x64" "4.59.0"
+    "@rollup/rollup-freebsd-arm64" "4.59.0"
+    "@rollup/rollup-freebsd-x64" "4.59.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.59.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.59.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.59.0"
+    "@rollup/rollup-linux-arm64-musl" "4.59.0"
+    "@rollup/rollup-linux-loong64-gnu" "4.59.0"
+    "@rollup/rollup-linux-loong64-musl" "4.59.0"
+    "@rollup/rollup-linux-ppc64-gnu" "4.59.0"
+    "@rollup/rollup-linux-ppc64-musl" "4.59.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.59.0"
+    "@rollup/rollup-linux-riscv64-musl" "4.59.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.59.0"
+    "@rollup/rollup-linux-x64-gnu" "4.59.0"
+    "@rollup/rollup-linux-x64-musl" "4.59.0"
+    "@rollup/rollup-openbsd-x64" "4.59.0"
+    "@rollup/rollup-openharmony-arm64" "4.59.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.59.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.59.0"
+    "@rollup/rollup-win32-x64-gnu" "4.59.0"
+    "@rollup/rollup-win32-x64-msvc" "4.59.0"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -2762,19 +2339,16 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz"
-  integrity sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==
+sass@^1.70:
+  version "1.97.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.97.3.tgz#9cb59339514fa7e2aec592b9700953ac6e331ab2"
+  integrity sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==
   dependencies:
-    ret "~0.1.10"
-
-sass@~1.32:
-  version "1.32.13"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz"
-  integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
+    chokidar "^4.0.0"
+    immutable "^5.0.2"
+    source-map-js ">=0.6.2 <2.0.0"
+  optionalDependencies:
+    "@parcel/watcher" "^2.4.1"
 
 semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
@@ -2808,16 +2382,6 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -2840,11 +2404,6 @@ side-channel@^1.0.4, side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz"
-  integrity sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==
-
 slice-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
@@ -2854,36 +2413,6 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
 socket.io-client@^4.1.2:
   version "4.8.1"
   resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz"
@@ -2902,61 +2431,20 @@ socket.io-parser@~4.2.4:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-sortablejs@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
-
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-source-map-resolve@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
-
-source-map-url@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz"
-  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
-
-source-map@^0.5.6:
-  version "0.5.7"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
-  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
-splitpanes@^2.3.8:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz"
-  integrity sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz"
-  integrity sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
+splitpanes@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/splitpanes/-/splitpanes-3.2.0.tgz#5f549594b76c7ace5ef51a0554275a6255e75b0a"
+  integrity sha512-K+WKxWdqtKShV33gPjQl769wHxB3glypTOReCvYu/AJd38J+abHlpiF8rK6uBNPMrgw5thHZCI5JkEwsAqa9XA==
 
 string-width@^4.2.3:
   version "4.2.3"
@@ -3075,38 +2563,6 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz"
-  integrity sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==
-  dependencies:
-    kind-of "^3.0.2"
-
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz"
-  integrity sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz"
@@ -3173,10 +2629,10 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+uc.micro@^2.0.0, uc.micro@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -3188,47 +2644,10 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-unplugin-vue-components@^0.22.12:
-  version "0.22.12"
-  resolved "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.12.tgz"
-  integrity sha512-FxyzsuBvMCYPIk+8cgscGBQ345tvwVu+qY5IhE++eorkyvA4Z1TiD/HCiim+Kbqozl10i4K+z+NCa2WO2jexRA==
-  dependencies:
-    "@antfu/utils" "^0.7.2"
-    "@rollup/pluginutils" "^5.0.2"
-    chokidar "^3.5.3"
-    debug "^4.3.4"
-    fast-glob "^3.2.12"
-    local-pkg "^0.4.2"
-    magic-string "^0.27.0"
-    minimatch "^5.1.1"
-    resolve "^1.22.1"
-    unplugin "^1.0.1"
-
-unplugin@^1.0.1:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz"
-  integrity sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==
-  dependencies:
-    acorn "^8.12.1"
-    webpack-virtual-modules "^0.6.2"
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz"
-  integrity sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
+upath@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -3237,16 +2656,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz"
-  integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -3257,40 +2666,25 @@ uuid@^8.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v-tooltip@^2.0.1:
+vite-plugin-vuetify@^2.0:
   version "2.1.3"
-  resolved "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz"
-  integrity sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==
+  resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.3.tgz#9968d1e85429f93fc2dc06da8c4a5e7651986964"
+  integrity sha512-Q4SC/4TqbNvaZIFb9YsfBqkGlYHbJJJ6uU3CnRBZqLUF3s5eCMVZAaV4GkTbehIH/bhSj42lMXztOwc71u6rVw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    lodash "^4.17.21"
-    popper.js "^1.16.1"
-    vue-resize "^1.0.1"
+    "@vuetify/loader-shared" "^2.1.2"
+    debug "^4.3.3"
+    upath "^2.0.1"
 
-vite@^4:
-  version "4.5.5"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz"
-  integrity sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==
+vite@^5.0:
+  version "5.4.21"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.21.tgz#84a4f7c5d860b071676d39ba513c0d598fdc7027"
+  integrity sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
   optionalDependencies:
-    fsevents "~2.3.2"
-
-vue-beautiful-chat@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.npmjs.org/vue-beautiful-chat/-/vue-beautiful-chat-2.5.0.tgz"
-  integrity sha512-P/XnjgvqD7bdss9wL+88ukaXVhRAYAgNg990G1U3K3sIy7ijkvvuzP2qnLge8Ce01iqRT61OY/f25gjFIOU22g==
-  dependencies:
-    autolinker "^1.8.3"
-    emoji-js "^3.4.0"
-    escape-goat "^1.3.0"
-    imagemin "^6.1.0"
-    kind-of "6.0.3"
-    minimist "1.2.3"
-    msgdown "^1.0.2"
-    v-tooltip "^2.0.1"
+    fsevents "~2.3.3"
 
 vue-demi@^0.14.10:
   version "0.14.10"
@@ -3310,50 +2704,42 @@ vue-eslint-parser@^9.0.1, vue-eslint-parser@^9.0.3, vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-markdown-render@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-1.1.2.tgz"
-  integrity sha512-g0UFjCOaaPxpNkVz7JyJ3gOV4AIxITCVMXx0Jc2KYjpyUXjQH6CRHAditrVL4sv4Yp9jiOZd0Vf9nFSg5bWeVg==
+vue-markdown-render@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vue-markdown-render/-/vue-markdown-render-2.3.0.tgz#e06498aa8d42eefb8e8770039b0f8c27be506a46"
+  integrity sha512-ZWVVKba8t0tKBlaUGaWmNynIk38gE7Bt3psC/iN2NsqpdGY15VGfBeBvF0A8cEmwHnjNVJo2IzUUqkhhfldhtg==
   dependencies:
-    markdown-it "^12.0.6"
-    vue "^2.6.13"
+    markdown-it "^14.1.0"
 
-vue-resize@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz"
-  integrity sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==
+vue-router@^4.3:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.6.4.tgz#a0a9cb9ef811a106d249e4bb9313d286718020d8"
+  integrity sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-
-vue-router@^3.5.1:
-  version "3.6.5"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
+    "@vue/devtools-api" "^6.6.4"
 
-vue@2.7, vue@^2.6.13:
-  version "2.7.14"
-  resolved "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz"
-  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
+vue@^3.4:
+  version "3.5.29"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.29.tgz#859a1cc5219eb1228c7ce6f355b27de080517111"
+  integrity sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==
   dependencies:
-    "@vue/compiler-sfc" "2.7.14"
-    csstype "^3.1.0"
+    "@vue/compiler-dom" "3.5.29"
+    "@vue/compiler-sfc" "3.5.29"
+    "@vue/runtime-dom" "3.5.29"
+    "@vue/server-renderer" "3.5.29"
+    "@vue/shared" "3.5.29"
 
-vuedraggable@^2.24.3:
-  version "2.24.3"
-  resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+vuedraggable@^4.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    sortablejs "1.10.2"
-
-vuetify@^2.6.0:
-  version "2.7.2"
-  resolved "https://registry.npmjs.org/vuetify/-/vuetify-2.7.2.tgz"
-  integrity sha512-qr04ww7uzAPQbpk751x4fSdjsJ+zREzjQ/rBlcQGuWS6MIMFMXcXcwvp4+/tnGsULZxPMWfQ0kmZmg5Yc/XzgQ==
+    sortablejs "1.14.0"
 
-webpack-virtual-modules@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz"
-  integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
+vuetify@^3.5:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.12.1.tgz#c5937d96ea5b53544d4419cd8769787b4206804f"
+  integrity sha512-JDHDzs1e195YJ9L3X4nWQySGSMyTxr0BefIY4+l/CpAgTd9pPV5F6oZzI8ZLuikMxS4HhfSGHteOAe6u/zh4vQ==
 
 which-boxed-primitive@^1.0.2:
   version "1.0.2"

From 4845e75f5a456a8f7caedc7638afb0d55c25594a Mon Sep 17 00:00:00 2001
From: Anthony Rose <20302208+Cx01N@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:30:19 -0500
Subject: [PATCH 4/6] added cpire agent (#257)

---
 src/components/agents/AgentExecuteModule.vue | 1 +
 src/components/agents/AgentUploadDialog.vue  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/agents/AgentExecuteModule.vue b/src/components/agents/AgentExecuteModule.vue
index bfc02ed1..cc4604e6 100644
--- a/src/components/agents/AgentExecuteModule.vue
+++ b/src/components/agents/AgentExecuteModule.vue
@@ -244,6 +244,7 @@ export default {
           case "powershell":
           case "csharp":
           case "go":
+          case "c":
             return ["powershell", "csharp", "bof"];
           case "ironpython":
             return ["powershell", "csharp", "bof", "python"];
diff --git a/src/components/agents/AgentUploadDialog.vue b/src/components/agents/AgentUploadDialog.vue
index 2c74693f..1ec05b13 100644
--- a/src/components/agents/AgentUploadDialog.vue
+++ b/src/components/agents/AgentUploadDialog.vue
@@ -124,7 +124,7 @@ export default {
             this.internalPathToFile = `/tmp/${val}`;
           }
         } else if (
-          ["powershell", "csharp"].includes(this.language.toLowerCase())
+          ["powershell", "csharp", "c"].includes(this.language.toLowerCase())
         ) {
           if (this.pathToFile) {
             this.internalPathToFile =

From 3e018c8f9b5bab3cbf2078d044f05b36c1e26117 Mon Sep 17 00:00:00 2001
From: Anthony Rose <20302208+Cx01N@users.noreply.github.com>
Date: Fri, 6 Mar 2026 23:50:06 -0500
Subject: [PATCH 5/6] Vue update fixes (#262)

---
 src/components/EditPageTop.vue                     |  3 ++-
 src/components/FileInput.vue                       |  4 ++--
 src/components/FileUploadDialog.vue                |  2 +-
 src/components/GeneralForm.vue                     |  5 +++++
 src/components/ListPageTop.vue                     |  1 +
 src/components/NotificationBell.vue                |  3 ++-
 src/components/agents/AgentExecuteModule.vue       |  4 +++-
 src/components/agents/AgentTasksTable.vue          | 10 ++++++++++
 src/components/listeners/ListenersTable.vue        |  6 ++++--
 src/components/listeners/MalleableProfilesList.vue |  2 +-
 src/components/plugins/PluginMarketplace.vue       |  4 +++-
 src/components/stagers/StagersTable.vue            |  2 +-
 src/views/AgentEdit.vue                            |  2 +-
 src/views/BypassEdit.vue                           | 11 ++++++-----
 src/views/Bypasses.vue                             |  2 +-
 src/views/CredentialEdit.vue                       | 10 +++++-----
 src/views/Credentials.vue                          |  2 +-
 src/views/ListenerEdit.vue                         | 10 +++++-----
 src/views/MalleableProfileEdit.vue                 | 10 +++++-----
 src/views/Notifications.vue                        |  3 ++-
 src/views/StagerEdit.vue                           | 10 +++++-----
 src/views/UserEdit.vue                             |  2 +-
 yarn.lock                                          | 10 +++++-----
 23 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/EditPageTop.vue b/src/components/EditPageTop.vue
index 033546d0..55739370 100644
--- a/src/components/EditPageTop.vue
+++ b/src/components/EditPageTop.vue
@@ -60,7 +60,7 @@
 import TooltipButton from "@/components/TooltipButton.vue";
 
 export default {
-  name: "ListPageTop",
+  name: "EditPageTop",
   components: { TooltipButton },
   props: {
     deleteText: {
@@ -111,6 +111,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ["submit", "delete"],
 };
 </script>
 
diff --git a/src/components/FileInput.vue b/src/components/FileInput.vue
index b298d8c9..1d72966f 100644
--- a/src/components/FileInput.vue
+++ b/src/components/FileInput.vue
@@ -34,8 +34,8 @@ export default {
   components: { FileUploadDialog },
   props: {
     modelValue: {
-      type: [String, Array, Number],
-      required: true,
+      type: [Number, Object],
+      default: null,
     },
     label: {
       type: String,
diff --git a/src/components/FileUploadDialog.vue b/src/components/FileUploadDialog.vue
index b1f9243b..fb754318 100644
--- a/src/components/FileUploadDialog.vue
+++ b/src/components/FileUploadDialog.vue
@@ -5,7 +5,7 @@
         <span class="headline">Upload To Empire Server</span>
       </v-card-title>
       <v-card-text>
-        <v-form ref="form" on-submit="return false;" @submit.prevent>
+        <v-form ref="form" @submit.prevent>
           <v-container>
             <v-row>
               <v-col cols="12">
diff --git a/src/components/GeneralForm.vue b/src/components/GeneralForm.vue
index 889084f0..7d93f0e5 100644
--- a/src/components/GeneralForm.vue
+++ b/src/components/GeneralForm.vue
@@ -57,7 +57,12 @@ export default {
   components: {
     DynamicFormInput,
   },
+  inheritAttrs: false,
   props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
     options: {
       type: Object,
       required: true,
diff --git a/src/components/ListPageTop.vue b/src/components/ListPageTop.vue
index d52678e6..8656d36e 100644
--- a/src/components/ListPageTop.vue
+++ b/src/components/ListPageTop.vue
@@ -98,6 +98,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ["create", "refresh", "delete", "update:auto-refresh"],
   data() {
     return {
       autoRefreshInternal: false,
diff --git a/src/components/NotificationBell.vue b/src/components/NotificationBell.vue
index 4f57cb7a..16a074ee 100644
--- a/src/components/NotificationBell.vue
+++ b/src/components/NotificationBell.vue
@@ -19,6 +19,7 @@
         <v-list-item
           v-for="(item, index) in notifications"
           :key="index"
+          :value="index"
           :style="
             item.read ? '' : 'background-color: rgba(118, 127, 134, 0.5);'
           "
@@ -30,7 +31,7 @@
               v-if="item.route"
               color="primary"
               variant="text"
-              :to="item.route"
+              @click="$router.push(item.route)"
             >
               {{ item.buttonText }}
             </v-btn>
diff --git a/src/components/agents/AgentExecuteModule.vue b/src/components/agents/AgentExecuteModule.vue
index cc4604e6..9210281a 100644
--- a/src/components/agents/AgentExecuteModule.vue
+++ b/src/components/agents/AgentExecuteModule.vue
@@ -43,7 +43,7 @@
           <tooltip-button
             :icon="showTreeDialog ? 'mdi-folder-open' : 'mdi-folder'"
             color="grey-lighten-2"
-            tooltip="Browse modules by folder"
+            text="Browse modules by folder"
             @click="toggleTree"
           />
         </v-col>
@@ -182,6 +182,7 @@ import ErrorStateAlert from "@/components/ErrorStateAlert.vue";
 import { useModuleStore } from "@/stores/module-module";
 import GeneralForm from "../GeneralForm.vue";
 import TechniqueChips from "../TechniqueChips.vue";
+import TooltipButton from "../TooltipButton.vue";
 
 export default {
   components: {
@@ -189,6 +190,7 @@ export default {
     GeneralForm,
     TechniqueChips,
     ErrorStateAlert,
+    TooltipButton,
   },
   inject: ["snack"],
   props: {
diff --git a/src/components/agents/AgentTasksTable.vue b/src/components/agents/AgentTasksTable.vue
index 05d1ed63..40e695e7 100644
--- a/src/components/agents/AgentTasksTable.vue
+++ b/src/components/agents/AgentTasksTable.vue
@@ -434,6 +434,14 @@ export default {
       debouncedGetTasks: debounce(this.getTasks, 500),
       selectedHeadersTemp: [],
       headersFull: [
+        {
+          title: "",
+          key: "data-table-expand",
+          sortable: false,
+          defaultHeader: true,
+          alwaysShow: true,
+          order: 0,
+        },
         {
           title: "Task ID",
           key: "id",
@@ -448,6 +456,7 @@ export default {
           key: "status",
           sortable: true,
           defaultHeader: true,
+          align: "center",
           order: 2,
         },
         {
@@ -512,6 +521,7 @@ export default {
       return this.headersFull
         .filter(
           (h) =>
+            h.key === "data-table-expand" ||
             this.applicationStore.taskHeaders.findIndex(
               (h2) => h2.title === h.title,
             ) > -1,
diff --git a/src/components/listeners/ListenersTable.vue b/src/components/listeners/ListenersTable.vue
index 9fa9200f..7a4b47a5 100644
--- a/src/components/listeners/ListenersTable.vue
+++ b/src/components/listeners/ListenersTable.vue
@@ -13,7 +13,9 @@
       show-select
     >
       <template #item.enabled="{ item }">
-        <v-badge dot :color="item.enabled === true ? 'green' : 'red'" />
+        <div class="d-flex align-center" style="height: 100%">
+          <v-badge dot :color="item.enabled === true ? 'green' : 'red'" />
+        </div>
       </template>
       <template #item.name="{ item }">
         <router-link
@@ -56,7 +58,7 @@
             </v-list-item>
             <v-list-item
               key="copy"
-              :to="{ name: 'listenerNew', params: { copy: true, id: item.id } }"
+              :to="{ name: 'listenerNew', query: { copy: true, id: item.id } }"
               link
             >
               <v-list-item-title>
diff --git a/src/components/listeners/MalleableProfilesList.vue b/src/components/listeners/MalleableProfilesList.vue
index af854944..140c01bb 100644
--- a/src/components/listeners/MalleableProfilesList.vue
+++ b/src/components/listeners/MalleableProfilesList.vue
@@ -93,7 +93,7 @@
                   key="copy"
                   :to="{
                     name: 'malleableProfileNew',
-                    params: { copy: true, id: item.id },
+                    query: { copy: true, id: item.id },
                   }"
                   link
                 >
diff --git a/src/components/plugins/PluginMarketplace.vue b/src/components/plugins/PluginMarketplace.vue
index 6b8ba6db..f0c0faf8 100644
--- a/src/components/plugins/PluginMarketplace.vue
+++ b/src/components/plugins/PluginMarketplace.vue
@@ -5,7 +5,7 @@
       :show-create="false"
       :show-delete="false"
       :show-refresh="true"
-      @refresh="getPlugins"
+      @refresh="refreshMarketplace"
     />
     <div style="display: flex; flex-direction: row">
       <div style="width: 350px; min-width: 350px; max-width: 350px">
@@ -146,12 +146,14 @@
 import VueMarkdown from "vue-markdown-render";
 import * as pluginApi from "@/api/plugin-api";
 import AuthorChips from "@/components/AuthorChips.vue";
+import ListPageTop from "@/components/ListPageTop.vue";
 
 export default {
   name: "PluginMarketplace",
   components: {
     VueMarkdown,
     AuthorChips,
+    ListPageTop,
   },
   inject: ["snack"],
   data() {
diff --git a/src/components/stagers/StagersTable.vue b/src/components/stagers/StagersTable.vue
index bf52fd36..cb7b4614 100644
--- a/src/components/stagers/StagersTable.vue
+++ b/src/components/stagers/StagersTable.vue
@@ -62,7 +62,7 @@
             </v-list-item>
             <v-list-item
               key="copy"
-              :to="{ name: 'stagerNew', params: { copy: true, id: item.id } }"
+              :to="{ name: 'stagerNew', query: { copy: true, id: item.id } }"
               link
             >
               <v-list-item-title>
diff --git a/src/views/AgentEdit.vue b/src/views/AgentEdit.vue
index 85a32b1a..2dfe9a05 100644
--- a/src/views/AgentEdit.vue
+++ b/src/views/AgentEdit.vue
@@ -370,7 +370,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/agent-edit",
+          to: `/agents/${this.id}`,
         },
       ];
     },
diff --git a/src/views/BypassEdit.vue b/src/views/BypassEdit.vue
index b6998e15..2eb12584 100644
--- a/src/views/BypassEdit.vue
+++ b/src/views/BypassEdit.vue
@@ -69,6 +69,7 @@ export default {
   inject: ["snack", "confirm"],
   data() {
     return {
+      initialLoad: false,
       form: {},
       rules: {
         name: [
@@ -98,7 +99,7 @@ export default {
       return this.$route.name === "bypassNew";
     },
     isCopy() {
-      return this.$route.params.copy === true;
+      return this.$route.query.copy === "true";
     },
     mode() {
       if (this.isCopy) return "Copy";
@@ -109,11 +110,11 @@ export default {
       return true;
     },
     id() {
-      return this.isCopy ? 0 : this.$route.params.id;
+      return this.isCopy ? 0 : this.$route.params.id || this.$route.query.id;
     },
     copyLink() {
       if (this.id > 0)
-        return { name: "bypassNew", params: { copy: true, id: this.id } };
+        return { name: "bypassNew", query: { copy: true, id: this.id } };
       return {};
     },
     breads() {
@@ -127,7 +128,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/bypasses-edit",
+          to: `/bypasses/${this.id}`,
         },
       ];
     },
@@ -149,7 +150,7 @@ export default {
     if (!this.isNew || this.isCopy) {
       // using the route param id instad of this.id
       // since this.id is 0 for copies.
-      this.getBypass(this.$route.params.id);
+      this.getBypass(this.$route.params.id || this.$route.query.id);
     } else {
       this.initialLoad = true;
     }
diff --git a/src/views/Bypasses.vue b/src/views/Bypasses.vue
index 9c8b2cd7..0004c427 100644
--- a/src/views/Bypasses.vue
+++ b/src/views/Bypasses.vue
@@ -53,7 +53,7 @@
             </v-list-item>
             <v-list-item
               key="copy"
-              :to="{ name: 'bypassNew', params: { copy: true, id: item.id } }"
+              :to="{ name: 'bypassNew', query: { copy: true, id: item.id } }"
               link
             >
               <v-list-item-title>
diff --git a/src/views/CredentialEdit.vue b/src/views/CredentialEdit.vue
index 5e5b36dc..bec90baf 100644
--- a/src/views/CredentialEdit.vue
+++ b/src/views/CredentialEdit.vue
@@ -76,7 +76,7 @@ export default {
         {
           title: this.id && !this.isCopy ? `${this.id}` : "New",
           disabled: true,
-          to: "/credential-edit",
+          to: `/credentials/${this.id}`,
         },
       ];
     },
@@ -87,7 +87,7 @@ export default {
       return this.$route.name === "credentialNew";
     },
     isCopy() {
-      return this.$route.params.copy === true;
+      return this.$route.query.copy === "true";
     },
     mode() {
       if (this.isCopy) return "Copy";
@@ -99,11 +99,11 @@ export default {
       return true;
     },
     id() {
-      return this.isCopy ? 0 : this.$route.params.id;
+      return this.isCopy ? 0 : this.$route.params.id || this.$route.query.id;
     },
     copyLink() {
       if (this.id > 0)
-        return { name: "credentialNew", params: { copy: true, id: this.id } };
+        return { name: "credentialNew", query: { copy: true, id: this.id } };
       return {};
     },
     options() {
@@ -140,7 +140,7 @@ export default {
     if (!this.isNew || this.isCopy) {
       // using the route param id instad of this.id
       // since this.id is 0 for copies.
-      this.getCredential(this.$route.params.id);
+      this.getCredential(this.$route.params.id || this.$route.query.id);
     } else {
       this.initialLoad = true;
     }
diff --git a/src/views/Credentials.vue b/src/views/Credentials.vue
index 4d2567f3..b954bcc4 100644
--- a/src/views/Credentials.vue
+++ b/src/views/Credentials.vue
@@ -98,7 +98,7 @@
                     style="color: inherit"
                     :to="{
                       name: 'credentialNew',
-                      params: { copy: true, id: item.id },
+                      query: { copy: true, id: item.id },
                     }"
                   >
                     <v-list-item-title>
diff --git a/src/views/ListenerEdit.vue b/src/views/ListenerEdit.vue
index d6c0c4e7..63ad9e38 100644
--- a/src/views/ListenerEdit.vue
+++ b/src/views/ListenerEdit.vue
@@ -204,7 +204,7 @@ export default {
       return this.$route.name === "listenerNew";
     },
     isCopy() {
-      return this.$route.params.copy === true;
+      return this.$route.query.copy === "true";
     },
     mode() {
       if (this.isCopy) return "Copy";
@@ -215,11 +215,11 @@ export default {
       return this.isNew || !this.listener.enabled;
     },
     id() {
-      return this.isCopy ? 0 : this.$route.params.id;
+      return this.isCopy ? 0 : this.$route.params.id || this.$route.query.id;
     },
     copyLink() {
       if (this.id > 0)
-        return { name: "listenerNew", params: { copy: true, id: this.id } };
+        return { name: "listenerNew", query: { copy: true, id: this.id } };
       return {};
     },
     listenerInfo() {
@@ -260,7 +260,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/listeners-edit",
+          to: `/listeners/${this.id}`,
         },
       ];
     },
@@ -309,7 +309,7 @@ export default {
     if (!this.isNew || this.isCopy) {
       // using the route param id instead of this.id
       // since this.id is 0 for copies.
-      this.getListener(this.$route.params.id);
+      this.getListener(this.$route.params.id || this.$route.query.id);
     }
   },
   methods: {
diff --git a/src/views/MalleableProfileEdit.vue b/src/views/MalleableProfileEdit.vue
index 10b0cd1b..b03a1907 100644
--- a/src/views/MalleableProfileEdit.vue
+++ b/src/views/MalleableProfileEdit.vue
@@ -100,7 +100,7 @@ export default {
       return this.$route.name === "malleableProfileNew";
     },
     isCopy() {
-      return this.$route.params.copy === true;
+      return this.$route.query.copy === "true";
     },
     mode() {
       if (this.isCopy) return "Copy";
@@ -111,13 +111,13 @@ export default {
       return true;
     },
     id() {
-      return this.isCopy ? 0 : this.$route.params.id;
+      return this.isCopy ? 0 : this.$route.params.id || this.$route.query.id;
     },
     copyLink() {
       if (this.id > 0)
         return {
           name: "malleableProfileNew",
-          params: { copy: true, id: this.id },
+          query: { copy: true, id: this.id },
         };
       return {};
     },
@@ -132,7 +132,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/malleable-profiles-edit",
+          to: `/malleable-profiles/${this.id}`,
         },
       ];
     },
@@ -154,7 +154,7 @@ export default {
     if (!this.isNew || this.isCopy) {
       // using the route param id instad of this.id
       // since this.id is 0 for copies.
-      this.getMalleableProfile(this.$route.params.id);
+      this.getMalleableProfile(this.$route.params.id || this.$route.query.id);
     } else {
       this.initialLoad = true;
     }
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
index d823102b..53b26afc 100644
--- a/src/views/Notifications.vue
+++ b/src/views/Notifications.vue
@@ -25,6 +25,7 @@
       <v-list>
         <template v-for="(item, i) in notifications" :key="i">
           <v-list-item
+            :value="i"
             :style="
               item.read ? '' : 'background-color: rgba(118, 127, 134, 0.5);'
             "
@@ -42,7 +43,7 @@
                 v-if="item.route"
                 color="primary"
                 variant="text"
-                :to="item.route"
+                @click.stop="$router.push(item.route)"
               >
                 {{ item.buttonText }}
               </v-btn>
diff --git a/src/views/StagerEdit.vue b/src/views/StagerEdit.vue
index 9291d444..8a678731 100644
--- a/src/views/StagerEdit.vue
+++ b/src/views/StagerEdit.vue
@@ -123,7 +123,7 @@ export default {
       return this.$route.name === "stagerNew";
     },
     isCopy() {
-      return this.$route.params.copy === true;
+      return this.$route.query.copy === "true";
     },
     mode() {
       if (this.isCopy) return "Copy";
@@ -134,11 +134,11 @@ export default {
       return true;
     },
     id() {
-      return this.isCopy ? 0 : this.$route.params.id;
+      return this.isCopy ? 0 : this.$route.params.id || this.$route.query.id;
     },
     copyLink() {
       if (this.id > 0)
-        return { name: "stagerNew", params: { copy: true, id: this.id } };
+        return { name: "stagerNew", query: { copy: true, id: this.id } };
       return {};
     },
     stagerInfo() {
@@ -193,7 +193,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/stagers-edit",
+          to: `/stagers/${this.id}`,
         },
       ];
     },
@@ -231,7 +231,7 @@ export default {
     if (!this.isNew || this.isCopy) {
       // using the route param id instad of this.id
       // since this.id is 0 for copies.
-      this.getStager(this.$route.params.id);
+      this.getStager(this.$route.params.id || this.$route.query.id);
     }
 
     if (this.$route.query.template) {
diff --git a/src/views/UserEdit.vue b/src/views/UserEdit.vue
index 82d56935..78279d34 100644
--- a/src/views/UserEdit.vue
+++ b/src/views/UserEdit.vue
@@ -133,7 +133,7 @@ export default {
         {
           title: this.breadcrumbName,
           disabled: true,
-          to: "/users-edit",
+          to: `/users/${this.id}`,
         },
       ];
     },
diff --git a/yarn.lock b/yarn.lock
index 334e9bd9..b96eb20c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2718,7 +2718,7 @@ vue-router@^4.3:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
-vue@^3.4:
+vue@^3.5:
   version "3.5.29"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.29.tgz#859a1cc5219eb1228c7ce6f355b27de080517111"
   integrity sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==
@@ -2736,10 +2736,10 @@ vuedraggable@^4.1:
   dependencies:
     sortablejs "1.14.0"
 
-vuetify@^3.5:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.12.1.tgz#c5937d96ea5b53544d4419cd8769787b4206804f"
-  integrity sha512-JDHDzs1e195YJ9L3X4nWQySGSMyTxr0BefIY4+l/CpAgTd9pPV5F6oZzI8ZLuikMxS4HhfSGHteOAe6u/zh4vQ==
+vuetify@^3.12:
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.12.2.tgz#c6d5a74243925115b56a488a9627d0a4a57108be"
+  integrity sha512-cVQa4+5iQpDs00ToMUnWRHlMdv1d5tEH2wcZIthqSCmBipQAG4rQKE55zFwZFYlPyiDhUVY1RcAFtXCuHNcCww==
 
 which-boxed-primitive@^1.0.2:
   version "1.0.2"

From 8b8089c0ebfa32b9f6311c52dddbfc32692e50c2 Mon Sep 17 00:00:00 2001
From: GitHub Actions <noreply@github.com>
Date: Sun, 8 Mar 2026 19:58:58 +0000
Subject: [PATCH 6/6] Prepare release 3.4.0 private

---
 CHANGELOG.md | 6 +++++-
 package.json | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e6b81c2..a09462dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.4.0] - 2026-03-08
+
 ### Changed
 
 -   Migrated from Vue 2 to Vue 3
@@ -457,7 +459,9 @@ Including but not limited to:
 
 -   Initial Release
 
-[Unreleased]: https://github.com/BC-SECURITY/Starkiller-Sponsors/compare/v3.3.0...HEAD
+[Unreleased]: https://github.com/BC-SECURITY/Starkiller-Sponsors/compare/v3.4.0...HEAD
+
+[3.4.0]: https://github.com/BC-SECURITY/Starkiller-Sponsors/compare/v3.3.0...v3.4.0
 
 [3.3.0]: https://github.com/BC-SECURITY/Starkiller-Sponsors/compare/v3.2.0...v3.3.0
 
diff --git a/package.json b/package.json
index b8c725fc..b04aec62 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starkiller",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "private": true,
   "scripts": {
     "dev": "vite",