diff --git a/src/api/automation.js b/src/api/automation.js
new file mode 100644
index 0000000..d72946a
--- /dev/null
+++ b/src/api/automation.js
@@ -0,0 +1,8 @@
+import axios from "axios"
+
+const baseUrl = "/automation"
+
+export async function sendPatchPolicyReset(payload) {
+    const { data } = await axios.post(`${baseUrl}/patchpolicy/reset/`, payload)
+    return data
+}
\ No newline at end of file
diff --git a/src/components/modals/coresettings/ResetPatchPolicy.vue b/src/components/modals/coresettings/ResetPatchPolicy.vue
index 0382e0b..8f77197 100644
--- a/src/components/modals/coresettings/ResetPatchPolicy.vue
+++ b/src/components/modals/coresettings/ResetPatchPolicy.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-dialog ref="dialog" @hide="onHide">
-    <q-card class="q-dialog-plugin" style="min-width: 400px">
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin" style="min-width: 40vw">
       <q-bar>
         Reset Agent Patch Policy
         <q-space />
@@ -8,120 +8,137 @@
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
-      <q-card-section>
-        <div class="text-subtitle3">
-          Reset the patch policies for agents in a specific client or site. You can also leave the client and site blank
-          to reset the patch policy for all agents. (This might take a while)
-        </div>
-        <q-form @submit.prevent="submit">
-          <q-card-section>
-            <q-select
-              label="Clients"
-              @clear="clearClient"
-              clearable
-              options-dense
-              outlined
-              v-model="client"
-              :options="client_options"
-            />
-          </q-card-section>
-          <q-card-section>
-            <q-select
-              :disabled="client === null"
-              @clear="clearSite"
-              label="Sites"
-              clearable
-              options-dense
-              outlined
-              v-model="site"
-              :options="site_options"
-            />
-          </q-card-section>
-          <q-card-actions align="right">
-            <q-btn :label="buttonText" color="primary" type="submit" />
-            <q-btn label="Cancel" v-close-popup />
-          </q-card-actions>
-        </q-form>
+      <q-card-section class="text-subtitle3">
+        Reset the patch policies for agents in a specific client or site. You can also leave the client and site blank
+        to reset the patch policy for all agents. (This might take a while)
       </q-card-section>
+
+      <q-card-section>
+        <q-option-group v-model="target" :options="targetOptions" color="primary" inline dense />
+      </q-card-section>
+
+      <q-form @submit="submit">
+        <q-card-section v-if="target == 'client'">
+          <tactical-dropdown
+            :rules="[val => !!val || '*Required']"
+            label="Clients"
+            mapOptions
+            filterable
+            clearable
+            outlined
+            v-model="state.client"
+            :options="clientOptions"
+          />
+        </q-card-section>
+        <q-card-section v-if="target == 'site'">
+          <tactical-dropdown
+            :rules="[val => !!val || '*Required']"
+            label="Sites"
+            mapOptions
+            filterable
+            clearable
+            outlined
+            v-model="state.site"
+            :options="siteOptions"
+          />
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn flat push dense label="Cancel" v-close-popup />
+          <q-btn
+            :loading="loading"
+            flat
+            dense
+            push
+            :label="target == 'all' ? 'Clear Policies for ALL Agents' : 'Clear Policies'"
+            color="primary"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
 
 <script>
-import mixins from "@/mixins/mixins";
+// composition imports
+import { ref, watch } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { useClientDropdown, useSiteDropdown } from "@/composables/clients";
+import { sendPatchPolicyReset } from "@/api/automation";
+import { notifySuccess } from "@/utils/notify";
+
+//ui imports
+import TacticalDropdown from "@/components/ui/TacticalDropdown";
+
+// static data
+const targetOptions = [
+  { label: "All", value: "all" },
+  { label: "Client", value: "client" },
+  { label: "Site", value: "site" },
+];
 
 export default {
   name: "ResetPatchPolicy",
-  emits: ["hide", "ok", "cancel"],
-  mixins: [mixins],
-  data() {
+  components: {
+    TacticalDropdown,
+  },
+  emits: [...useDialogPluginComponent.emits],
+  setup(props) {
+    // setup quasar dialog plugin
+    const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
+
+    // setup dropdowns
+    const { client, clientOptions } = useClientDropdown(true);
+    const { site, siteOptions } = useSiteDropdown(true);
+
+    // reset patch policy logic
+    const state = ref({
+      client: client,
+      site: site,
+    });
+
+    const target = ref("all");
+    const loading = ref(false);
+
+    watch(target, (newValue, oldValue) => {
+      state.value.client = null;
+      state.value.site = null;
+    });
+
+    async function submit() {
+      loading.value = true;
+      try {
+        const data = {};
+        if (target.value === "client") data.client = state.value.client;
+        else if (target.value === "site") data.site = state.value.site;
+
+        const result = await sendPatchPolicyReset(data);
+        notifySuccess(result);
+        onDialogOK();
+      } catch (e) {
+        console.error(e);
+      }
+      loading.value = false;
+    }
+
     return {
-      client: null,
-      site: null,
-      client_options: [],
+      // reactive data
+      state,
+      target,
+      loading,
+
+      // non-reactive data
+      targetOptions,
+      clientOptions,
+      siteOptions,
+
+      // methods
+      submit,
+
+      // quasar dialog
+      dialogRef,
+      onDialogHide,
     };
   },
-  methods: {
-    submit() {
-      this.$q.loading.show();
-
-      let data = {};
-
-      if (this.client !== null) {
-        data.client = this.client.value;
-      }
-
-      if (this.site !== null) {
-        data.site = this.site.value;
-      }
-
-      this.$axios
-        .patch("automation/winupdatepolicy/reset/", data)
-        .then(r => {
-          this.$q.loading.hide();
-          this.notifySuccess("The agent policies were reset successfully!");
-          this.onOk();
-        })
-        .catch(e => {
-          this.$q.loading.hide();
-        });
-    },
-    getClients() {
-      this.$store.dispatch("loadClients").then(r => {
-        this.client_options = this.formatClientOptions(r.data);
-      });
-    },
-    clearClient() {
-      this.client = null;
-      this.site = null;
-    },
-    clearSite() {
-      this.site = null;
-    },
-    show() {
-      this.$refs.dialog.show();
-    },
-    hide() {
-      this.$refs.dialog.hide();
-    },
-    onHide() {
-      this.$emit("hide");
-    },
-    onOk() {
-      this.$emit("ok");
-      this.hide();
-    },
-  },
-  computed: {
-    site_options() {
-      return !!this.client ? this.formatSiteOptions(this.client.sites) : [];
-    },
-    buttonText() {
-      return !this.client ? "Clear Policies for ALL Agents" : "Clear Policies";
-    },
-  },
-  mounted() {
-    this.getClients();
-  },
 };
 </script>
\ No newline at end of file