diff --git a/web/src/components/AuditManager.vue b/web/src/components/AuditManager.vue
index 99d1f0ea..5530451b 100644
--- a/web/src/components/AuditManager.vue
+++ b/web/src/components/AuditManager.vue
@@ -35,6 +35,16 @@
               <q-item-section class="text-grey">No results</q-item-section>
             </q-item>
           </template>
+          <template v-slot:option="scope">
+            <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" class="q-pl-lg">
+              <q-item-section>
+                <q-item-label v-html="scope.opt.label"></q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
+              scope.opt.category
+            }}</q-item-label>
+          </template>
         </q-select>
       </div>
       <div class="q-pa-sm col-2" v-if="filterType === 'clients'">
@@ -158,6 +168,7 @@
 import AuditLogDetail from "@/components/modals/logs/AuditLogDetail";
 import mixins from "@/mixins/mixins";
 import { exportFile } from "quasar";
+import { formatAgentOptions } from "@/utils/format";
 
 function wrapCsvValue(val, formatFn) {
   let formatted = formatFn !== void 0 ? formatFn(val) : val;
@@ -327,7 +338,7 @@ export default {
         this.$axios
           .post(`logs/auditlogs/optionsfilter/`, data)
           .then(r => {
-            this.getAgentOptions().then(options => (this.agentOptions = Object.freeze(options)));
+            this.agentOptions = Object.freeze(formatAgentOptions(r.data));
             this.$q.loading.hide();
           })
           .catch(e => {
diff --git a/web/src/mixins/mixins.js b/web/src/mixins/mixins.js
index 28760330..ac8882ef 100644
--- a/web/src/mixins/mixins.js
+++ b/web/src/mixins/mixins.js
@@ -1,6 +1,8 @@
 import { Notify, date } from "quasar";
 import axios from 'axios'
 
+import { formatAgentOptions } from "@/utils/format"
+
 function getTimeLapse(unixtime) {
   var previous = unixtime * 1000;
   var current = new Date();
@@ -195,35 +197,9 @@ export default {
     },
     async getAgentOptions() {
 
-      let options = []
       const { data } = await axios.get("/agents/listagentsnodetail/")
-      const agents = data.map(agent => ({
-        label: agent.hostname,
-        value: agent.pk,
-        cat: `${agent.client} > ${agent.site}`,
-      }));
 
-      let categories = [];
-      agents.forEach(option => {
-        if (!categories.includes(option.cat)) {
-          categories.push(option.cat);
-        }
-      });
-
-      categories.sort().forEach(cat => {
-        options.push({ category: cat });
-        let tmp = []
-        agents.forEach(agent => {
-          if (agent.cat === cat) {
-            tmp.push(agent);
-          }
-        });
-
-        const sorted = tmp.sort((a, b) => a.label.localeCompare(b.label));
-        options.push(...sorted);
-      });
-
-      return options;
+      return formatAgentOptions(data)
     },
     getNextAgentUpdateTime() {
       const d = new Date();
diff --git a/web/src/utils/format.js b/web/src/utils/format.js
new file mode 100644
index 00000000..1e252774
--- /dev/null
+++ b/web/src/utils/format.js
@@ -0,0 +1,31 @@
+
+export function formatAgentOptions(data) {
+  let options = []
+  const agents = data.map(agent => ({
+    label: agent.hostname,
+    value: agent.pk,
+    cat: `${agent.client} > ${agent.site}`,
+  }));
+
+  let categories = [];
+  agents.forEach(option => {
+    if (!categories.includes(option.cat)) {
+      categories.push(option.cat);
+    }
+  });
+
+  categories.sort().forEach(cat => {
+    options.push({ category: cat });
+    let tmp = []
+    agents.forEach(agent => {
+      if (agent.cat === cat) {
+        tmp.push(agent);
+      }
+    });
+
+    const sorted = tmp.sort((a, b) => a.label.localeCompare(b.label));
+    options.push(...sorted);
+  });
+
+  return options
+}
\ No newline at end of file