diff --git a/frontend/assets/css/overrides.css b/frontend/assets/css/overrides.css
index 7ad0cfd..6876964 100644
--- a/frontend/assets/css/overrides.css
+++ b/frontend/assets/css/overrides.css
@@ -18,9 +18,12 @@ div.p-toast {
     width: auto;
 }
 
-.code {
+.code, .code-block {
   font-family: monospace;
   background-color: #eee;
-  padding: .25rem .5rem;
-  border-radius: .25rem;
+  padding: .5rem;
+  border-radius: .5rem;
+  display: inline-block;
+  font-size: 0.75rem;
+  white-space: pre-wrap;
 }
\ No newline at end of file
diff --git a/frontend/components/standard/Debug.vue b/frontend/components/standard/Debug.vue
index 81377a2..de113ba 100644
--- a/frontend/components/standard/Debug.vue
+++ b/frontend/components/standard/Debug.vue
@@ -40,7 +40,7 @@ function createCircularReplacer (): (this: any, key: string, value: any) => any
       header-class="surface-800"
     >
       <div
-        class="code surface-50"
+        class="code-block surface-50"
       >
         {{ valueAsStr }}
       </div>
@@ -53,14 +53,6 @@ function createCircularReplacer (): (this: any, key: string, value: any) => any
     width: fit-content;
     display: inline-block;
 
-    .code {
-      display: inline-block;
-      font-size: 0.75rem;
-      line-height: 0.75rem;
-      white-space: pre-wrap;
-      font-family: monospace;
-    }
-
     .p-accordion-header .p-accordion-header-link {
       gap: 1rem;
       padding: 0.5rem 0.75rem;
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 7ea3d43..8c0528a 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -307,5 +307,22 @@
     "Uploading": "Uploading",
     "Validating": "Validating",
     "Waiting": "Waiting"
+  },
+  "pages/audit-logs": {
+    "Action": "Action",
+    "Actor": "Actor",
+    "Actor ID": "Actor ID",
+    "Actor Owner ID": "Actor Owner ID",
+    "Actor Type": "Actor Type",
+    "Time": "Time",
+    "ID": "ID",
+    "Primary Target": "Primary Target",
+    "Primary Target ID": "Primary Target ID",
+    "Primary Target Owner": "Primary Target Owner",
+    "Primary Target Type": "Primary Target Type",
+    "Secondary Target": "Secondary Target",
+    "Secondary Target ID": "Secondary Target ID",
+    "Secondary Target Owner": "Secondary Target Owner",
+    "Secondary Target Type": "Secondary Target Type"
   }
 }
diff --git a/frontend/lib/auditlogquery/index.ts b/frontend/lib/auditlogquery/index.ts
new file mode 100644
index 0000000..5b690c5
--- /dev/null
+++ b/frontend/lib/auditlogquery/index.ts
@@ -0,0 +1,200 @@
+import { type AuditLogQueryReq, type AuditLogQuerySort, type AuditLogQueryWhere, type AuditLogQuerySortBy } from '@/openapi/generated/pacta'
+import { type WritableComputedRef } from 'vue'
+import { type LocalePathFunction } from 'vue-i18n-routing'
+import { computed } from 'vue'
+
+const encodeAuditLogQuerySorts = (sorts: AuditLogQuerySort[]): string => {
+  const components: string[] = []
+  for (const sort of sorts) {
+    components.push(`${sort.ascending ? 'A' : 'D'}:${sort.by.replace('AuditLogQuerySortBy', '')}`)
+  }
+  return components.join(',')
+}
+
+const decodeAuditLogQuerySorts = (sorts: string): AuditLogQuerySort[] => {
+  const components = sorts.split(',')
+  const result: AuditLogQuerySort[] = []
+  for (const component of components) {
+    if (component === '') {
+      continue
+    }
+    const [dir, byStr] = component.split(':')
+    result.push({
+      ascending: dir === 'A',
+      by: 'AuditLogQuerySortBy' + byStr as AuditLogQuerySortBy,
+    })
+  }
+  return result
+}
+
+const encodeAuditLogQueryWheres = (wheres: AuditLogQueryWhere[]): string => {
+  const components: string[] = []
+  for (const where of wheres) {
+    if (where.inAction) {
+      components.push(`Action:${where.inAction.join('|')}`)
+    } else if (where.inActorId) {
+      components.push(`ActorId:${where.inActorId.join('|')}`)
+    } else if (where.inActorType) {
+      components.push(`ActorType:${where.inActorType.join('|')}`)
+    } else if (where.inActorOwnerId) {
+      components.push(`ActorOwnerId:${where.inActorOwnerId.join('|')}`)
+    } else if (where.inId) {
+      components.push(`Id:${where.inId.join('|')}`)
+    } else if (where.inTargetType) {
+      components.push(`TargetType:${where.inTargetType.join('|')}`)
+    } else if (where.inTargetId) {
+      components.push(`TargetId:${where.inTargetId.join('|')}`)
+    } else if (where.inTargetOwnerId) {
+      components.push(`TargetOwnerId:${where.inTargetOwnerId.join('|')}`)
+    } else if (where.minCreatedAt) {
+      components.push(`MinCreatedAt:${where.minCreatedAt}`)
+    } else if (where.maxCreatedAt) {
+      components.push(`MaxCreatedAt:${where.maxCreatedAt}`)
+    } else {
+      console.warn(new Error(`Unknown where: ${JSON.stringify(where)}`))
+    }
+  }
+  return components.join(',')
+}
+
+const decodeAudtLogQueryWheres = (wheres: string): AuditLogQueryWhere[] => {
+  const components = wheres.split(',')
+  const result: AuditLogQueryWhere[] = []
+  for (const component of components) {
+    if (component === '') {
+      continue
+    }
+    const [key, value] = component.split(':')
+    switch (key) {
+      case 'Action':
+        result.push({
+          inAction: value.split('|') as AuditLogQueryWhere['inAction'],
+        })
+        break
+      case 'ActorId':
+        result.push({
+          inActorId: value.split('|') as AuditLogQueryWhere['inActorId'],
+        })
+        break
+      case 'ActorType':
+        result.push({
+          inActorType: value.split('|') as AuditLogQueryWhere['inActorType'],
+        })
+        break
+      case 'ActorOwnerId':
+        result.push({
+          inActorOwnerId: value.split('|') as AuditLogQueryWhere['inActorOwnerId'],
+        })
+        break
+      case 'Id':
+        result.push({
+          inId: value.split('|') as AuditLogQueryWhere['inId'],
+        })
+        break
+      case 'TargetType':
+        result.push({
+          inTargetType: value.split('|') as AuditLogQueryWhere['inTargetType'],
+        })
+        break
+      case 'TargetId':
+        result.push({
+          inTargetId: value.split('|') as AuditLogQueryWhere['inTargetId'],
+        })
+        break
+      case 'TargetOwnerId':
+        result.push({
+          inTargetOwnerId: value.split('|') as AuditLogQueryWhere['inTargetOwnerId'],
+        })
+        break
+      case 'MinCreatedAt':
+        result.push({
+          minCreatedAt: value,
+        })
+        break
+      case 'MaxCreatedAt':
+        result.push({
+          maxCreatedAt: value,
+        })
+        break
+      default:
+        console.warn(new Error(`Unknown where: ${JSON.stringify(key)}`))
+    }
+  }
+  return result
+}
+
+const encodeAuditLogQueryLimit = (limit: number): string => {
+  if (limit === limitDefault) {
+    return ''
+  }
+  return `${limit}`
+}
+
+const decodeAuditLogQueryLimit = (limit: string): number => {
+  if (limit === '') {
+    return limitDefault
+  }
+  return parseInt(limit)
+}
+
+const encodeAuditLogQueryCursor = (cursor: string): string => {
+  return encodeURIComponent(cursor)
+}
+
+const decodeAuditLogQueryCursor = (cursor: string): string => {
+  return decodeURIComponent(cursor)
+}
+
+const sortsQP = 's'
+const wheresQP = 'w'
+const limitQP = 'l'
+const limitDefault = 100
+const cursorQP = 'c'
+const pageURLBase = '/auditlog'
+
+export const urlReactiveAuditLogQuery = (fromQueryReactiveWithDefault: (key: string, defaultValue: string) => WritableComputedRef<string>): WritableComputedRef<AuditLogQueryReq> => {
+  const qSorts = fromQueryReactiveWithDefault(sortsQP, '')
+  const qWheres = fromQueryReactiveWithDefault(wheresQP, '')
+  const qLimit = fromQueryReactiveWithDefault(limitQP, '')
+  const qCursor = fromQueryReactiveWithDefault(cursorQP, '')
+
+  return computed({
+    get: (): AuditLogQueryReq => {
+      return {
+        sorts: decodeAuditLogQuerySorts(qSorts.value),
+        wheres: decodeAudtLogQueryWheres(qWheres.value),
+        limit: decodeAuditLogQueryLimit(qLimit.value),
+        cursor: decodeAuditLogQueryCursor(qCursor.value),
+      }
+    },
+    set: (value: AuditLogQueryReq) => {
+      qSorts.value = encodeAuditLogQuerySorts(value.sorts ?? [])
+      qWheres.value = encodeAuditLogQueryWheres(value.wheres)
+      qLimit.value = encodeAuditLogQueryLimit(value.limit ?? limitDefault)
+      qCursor.value = encodeAuditLogQueryCursor(value.cursor ?? '')
+    },
+  })
+}
+
+export const createURLAuditLogQuery = (localePath: LocalePathFunction, req: AuditLogQueryReq): string => {
+  const qSorts = encodeAuditLogQuerySorts(req.sorts ?? [])
+  const qWheres = encodeAuditLogQueryWheres(req.wheres)
+  const qLimit = encodeAuditLogQueryLimit(req.limit ?? limitDefault)
+  const qCursor = encodeAuditLogQueryCursor(req.cursor ?? '')
+  const q = new URLSearchParams()
+  if (qSorts) {
+    q.set(sortsQP, qSorts)
+  }
+  if (qWheres) {
+    q.set(wheresQP, qWheres)
+  }
+  if (qLimit) {
+    q.set(limitQP, qLimit)
+  }
+  if (qCursor) {
+    q.set(cursorQP, qCursor)
+  }
+  const url = new URL(pageURLBase)
+  url.search = q.toString()
+  return localePath(url.toString())
+}
diff --git a/frontend/pages/audit-logs.vue b/frontend/pages/audit-logs.vue
new file mode 100644
index 0000000..0a6abbe
--- /dev/null
+++ b/frontend/pages/audit-logs.vue
@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import { type AuditLogQuerySort, type AuditLogQueryReq, AuditLogTargetType, AuditLogQuerySortBy, type AuditLog } from '@/openapi/generated/pacta'
+import { urlReactiveAuditLogQuery } from '@/lib/auditlogquery'
+import { type DataTableSortMeta } from 'primevue/datatable'
+
+const prefix = 'pages/audit-logs'
+
+const localePath = useLocalePath()
+const { fromQueryReactiveWithDefault, waitForURLToUpdate } = useURLParams()
+const { t } = useI18n()
+const pactaClient = usePACTA()
+const { loading: { withLoading } } = useModal()
+const { getMaybeMe } = useSession()
+const { humanReadableTimeFromStandardString } = useTime()
+
+const { maybeMe } = await getMaybeMe()
+const tt = (s: string) => t(`${prefix}.${s}`)
+
+const auditLogQuery = urlReactiveAuditLogQuery(fromQueryReactiveWithDefault)
+const selectedColumnsQuery = fromQueryReactiveWithDefault('cols', 'createdAt,actor,action,primaryTarget,secondaryTarget')
+
+interface DataResponse {
+  auditLogs: AuditLog[]
+  cursor: string | undefined
+  hasNextPage: boolean
+}
+const dataResponse = useState<DataResponse>(`${prefix}.dataResponse`, () => ({
+  auditLogs: [] as AuditLog[],
+  cursor: undefined,
+  hasNextPage: true,
+}))
+const expandedRows = useState<AuditLog[]>(`${prefix}.expandedRows`, () => [])
+
+const refreshAuditLogs = () => withLoading(
+  () => pactaClient.listAuditLogs(auditLogQuery.value).then((resp) => { dataResponse.value = resp }),
+  'audit-logs.refresh',
+)
+const auditLogs = computed<AuditLog[]>(() => dataResponse.value.auditLogs)
+const hasNextPage = computed<boolean>(() => dataResponse.value.hasNextPage)
+const hasPrevPage = computed<boolean>(() => showingRange.value.start > 1)
+const showingRange = computed<{ start: number, end: number }>(() => {
+  const start = auditLogQuery.value.cursor ? parseInt(auditLogQuery.value.cursor) : 1
+  const end = start + auditLogs.value.length
+  return { start, end }
+})
+const clickPrev = () => {
+  if (hasPrevPage.value) {
+    cursor.value = `${Math.max(showingRange.value.start - (auditLogQuery.value.limit ?? 100), 0)}`
+    void withLoading(refreshAuditLogs, `${prefix}.`)
+  } else {
+    console.warn('clickPrev called when hasPrevPage is false')
+  }
+}
+const clickNext = () => {
+  if (hasNextPage.value) {
+    cursor.value = dataResponse.value.cursor
+    void withLoading(refreshAuditLogs, `${prefix}.next`)
+  } else {
+    console.warn('clickNext called when hasNext is false')
+  }
+}
+
+const doUpdate = (fn: (v: AuditLogQueryReq) => void): void => {
+  const newQuery = { ...auditLogQuery.value }
+  fn(newQuery)
+  auditLogQuery.value = newQuery
+}
+/* When we support filtering, we'll need this
+const wheres = computed<AuditLogQueryWhere[]>({
+  get: () => auditLogQuery.value.wheres,
+  set: (v: AuditLogQueryWhere[]) => { doUpdate((alq: AuditLogQueryReq) => { alq.wheres = v }) },
+})
+*/
+const sorts = computed<AuditLogQuerySort[]>({
+  get: () => auditLogQuery.value.sorts ?? [],
+  set: (v: AuditLogQuerySort[]) => { doUpdate((alq: AuditLogQueryReq) => { alq.sorts = v }) },
+})
+const cursor = computed<string | undefined>({
+  get: () => auditLogQuery.value.cursor,
+  set: (v: string | undefined) => { doUpdate((alq: AuditLogQueryReq) => { alq.cursor = v }) },
+})
+
+interface Column {
+  field: string
+  header: string
+  sortBy?: AuditLogQuerySortBy | undefined
+  customBody?: boolean
+}
+
+const allColumns: Column[] = [
+  { field: 'id', header: tt('ID') },
+  {
+    field: 'createdAt',
+    header: tt('Time'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT,
+    customBody: true,
+  },
+  {
+    field: 'actor',
+    header: tt('Actor'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_ACTOR_ID,
+    customBody: true,
+  },
+  {
+    field: 'action',
+    header: tt('Action'),
+    customBody: true,
+  },
+  {
+    field: 'primaryTarget',
+    header: tt('Primary Target'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_TYPE,
+    customBody: true,
+  },
+  {
+    field: 'secondaryTarget',
+    header: tt('Secondary Target'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_SECONDARY_TARGET_TYPE,
+    customBody: true,
+  },
+  {
+    field: 'actorId',
+    header: tt('Actor ID'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_ACTOR_ID,
+  },
+  {
+    field: 'actorOwnerId',
+    header: tt('Actor Owner ID'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_ACTOR_OWNER_ID,
+  },
+  {
+    field: 'primaryTargetType',
+    header: tt('Primary Target Type'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_TYPE,
+  },
+  {
+    field: 'primaryTargetId',
+    header: tt('Primary Target ID'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_ID,
+  },
+  {
+    field: 'primaryTargetOwner',
+    header: tt('Primary Target Owner'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_OWNER_ID,
+  },
+  {
+    field: 'secondaryTargetType',
+    header: tt('Secondary Target Type'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_SECONDARY_TARGET_TYPE,
+  },
+  {
+    field: 'secondaryTargetId',
+    header: tt('Secondary Target ID'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_SECONDARY_TARGET_ID,
+  },
+  {
+    field: 'secondaryTargetOwner',
+    header: tt('Secondary Target Owner'),
+    sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_SECONDARY_TARGET_OWNER_ID,
+  },
+]
+const selectedColumns = computed<Column[]>({
+  get: () => {
+    const selectedColumns = selectedColumnsQuery.value.split(',')
+    return allColumns.filter(c => selectedColumns.includes(c.field))
+  },
+  set: (v: Column[]) => { selectedColumnsQuery.value = v.map(c => c.field).join(',') },
+})
+const tableSortModel = computed<DataTableSortMeta[]>({
+  get: () => {
+    return sorts.value.map((s): DataTableSortMeta | null => {
+      const column = allColumns.find((c) => c.sortBy === s.by)
+      if (!column) {
+        console.warn(`Could not find column for sort ${s.by}`)
+        return null
+      }
+      return {
+        field: column.field,
+        order: s.ascending ? 1 : -1,
+      }
+    }).filter((s) => s !== null).map((s) => s as DataTableSortMeta)
+  },
+  set: (v: DataTableSortMeta[]) => {
+    const result = v.map((s) => {
+      const column = allColumns.find((c) => c.field === s.field)
+      if (!column) {
+        console.warn(`Could not find column for field ${s.field}`)
+        return null
+      }
+      return {
+        by: column.sortBy,
+        ascending: s.order === 1,
+      }
+    }).filter((s) => (s !== null)).map((s) => s as AuditLogQuerySort)
+    sorts.value = result
+  },
+})
+
+const getTargetLink = (t: AuditLogTargetType, id: string): string => {
+  switch (t) {
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_PORTFOLIO:
+      // TODO(grady) make this directly addressable
+      return localePath(`/my-data/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_PORTFOLIO_GROUP:
+      // TODO(grady) make this directly addressable
+      return localePath(`/my-data/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_INCOMPLETE_UPLOAD:
+      // TODO(grady) make this directly addressable
+      return localePath(`/my-data/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_ANALYSIS:
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_ANALYSIS_ARTIFACT:
+      // TODO(grady) make this directly addressable
+      return localePath(`/my-data/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER:
+      return localePath(`/user/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_INITIATIVE:
+      return localePath(`/initiative/${id}`)
+    case AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_PACTA_VERSION:
+      return localePath(`/admin/pacta-version/${id}`)
+  }
+  console.warn(`Unknown target type ${t}`)
+  return '#'
+}
+
+onMounted(() => {
+  if (auditLogQuery.value.wheres.length === 0) {
+    const mm = maybeMe.value
+    auditLogQuery.value = {
+      limit: 100,
+      cursor: undefined,
+      wheres: [{
+        inActorId: mm ? [mm.id] : [],
+      }],
+      sorts: [{
+        by: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT,
+        ascending: false,
+      }],
+    }
+  }
+  void waitForURLToUpdate().then(refreshAuditLogs)
+})
+</script>
+
+<template>
+  <StandardContent class="portfolios-page">
+    <TitleBar title="Audit Logs" />
+    <p>
+      TODO(#80) Add Copy Here
+    </p>
+    <PVButton
+      icon="pi pi-refresh"
+      label="Refresh"
+      @click="refreshAuditLogs"
+    />
+    <PVMultiSelect
+      v-model="selectedColumns"
+      display="chip"
+      :options="allColumns"
+      option-label="header"
+      placeholder="Select Columns"
+      class="better-multiselect-layout"
+    />
+    <StandardDebug
+      label="Query Sort"
+      :value="sorts"
+    />
+    <StandardDebug
+      label="Table Sort Model"
+      :value="tableSortModel"
+    />
+    <PVDataTable
+      v-model:multiSortMeta="tableSortModel"
+      v-model:expanded-rows="expandedRows"
+      sort-mode="multiple"
+      removable-sort
+      :value="auditLogs"
+      size="small"
+    >
+      <PVColumn
+        v-for="column in selectedColumns"
+        :key="column.field"
+        :sortable="column.sortBy !== undefined"
+        :field="column.field"
+        :header="column.header"
+      >
+        <template
+          v-if="column.customBody"
+          #body="slotProps"
+        >
+          <template v-if="column.field === 'createdAt'">
+            {{ humanReadableTimeFromStandardString(slotProps.data.createdAt).value }}
+          </template>
+          <template
+            v-else-if="column.field === 'actor'"
+          >
+            <div class="flex flex-column gap-1">
+              <span class="text-sm">
+                {{ slotProps.data.actorId }}
+              </span>
+              <span class="text-sm">
+                {{ slotProps.data.actorOwnerId }}
+              </span>
+              <div class="flex align-items-center gap-2">
+                <span>
+                  Acting as <b>{{ `${slotProps.data.actorType}`.replace("AuditLogActorType", '') }}</b>
+                </span>
+                <LinkButton
+                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                  class="p-button-xs p-button-outlined p-button-secondary"
+                  icon="pi pi-external-link"
+                />
+              </div>
+            </div>
+          </template>
+          <template v-else-if="column.field === 'action'">
+            {{ `${slotProps.data.action}`.replace("AuditLogAction", '') }}
+          </template>
+          <template v-else-if="column.field === 'primaryTarget'">
+            <div class="flex flex-column gap-1">
+              <div class="flex align-items-center gap-2">
+                <b>{{ slotProps.data.primaryTargetType.replace("AuditLogTargetType", '') }}</b>
+                <LinkButton
+                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                  class="p-button-xs p-button-outlined p-button-secondary"
+                  icon="pi pi-external-link"
+                />
+              </div>
+              <span class="text-sm">
+                {{ slotProps.data.primaryTargetId }}
+              </span>
+              <span class="text-sm">
+                {{ slotProps.data.primaryTargetOwner }}
+              </span>
+            </div>
+          </template>
+          <template v-else-if="column.field === 'secondaryTarget'">
+            <div
+              v-if="slotProps.data.secondaryTargetId"
+              class="flex flex-column gap-1"
+            >
+              <b>
+                {{ slotProps.data.secondaryTargetType.replace("AuditLogTargetType", '') }}
+                <LinkButton
+                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                  class="p-button-xs p-button-outlined p-button-secondary"
+                  icon="pi pi-external-link"
+                />
+              </b>
+              <span>
+                {{ slotProps.data.secondaryTargetId }}
+              </span>
+              <span>
+                {{ slotProps.data.secondaryTargetOwner }}
+              </span>
+            </div>
+          </template>
+        </template>
+      </PVColumn>
+      <PVColumn
+        expander
+        header="Details"
+      />
+      <template #expansion="slotProps">
+        <div class="code-block my-2">
+          {{ slotProps.data }}
+        </div>
+      </template>
+      <template
+        #footer
+      >
+        <div class="flex align-items-center gap-3 flex-wrap">
+          <PVButton
+            v-if="hasPrevPage"
+            label="Previous Page"
+            icon="pi pi-caret-left"
+            class="p-button-outlined p-button-xs p-button-secondary"
+            @click="clickPrev"
+          />
+          <span>
+            Showing Logs
+            {{ showingRange.start }}
+            -
+            {{ showingRange.end }}
+          </span>
+          <PVButton
+            v-if="hasNextPage"
+            label="Next Page"
+            icon="pi pi-caret-right"
+            class="p-button-outlined p-button-xs p-button-secondary"
+            icon-pos="right"
+            @click="clickNext"
+          />
+        </div>
+      </template>
+    </PVDataTable>
+    <StandardDebug
+      label="Data Response Cursor"
+      :value="dataResponse.cursor"
+    />
+    <StandardDebug
+      label="Audit Log Query"
+      :value="auditLogQuery"
+    />
+  </StandardContent>
+</template>
+
+<style lang="scss">
+.better-multiselect-layout.p-multiselect.p-multiselect-chip {
+  .p-multiselect-label {
+    padding: 0.25rem;
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+
+    .p-multiselect-token {
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/frontend/plugins/primevue.ts b/frontend/plugins/primevue.ts
index 5726010..7017c90 100644
--- a/frontend/plugins/primevue.ts
+++ b/frontend/plugins/primevue.ts
@@ -20,6 +20,7 @@ import TabView from 'primevue/tabview'
 import Textarea from 'primevue/textarea'
 import Tooltip from 'primevue/tooltip'
 import Message from 'primevue/message'
+import MultiSelect from 'primevue/multiselect'
 import OverlayPanel from 'primevue/overlaypanel'
 import ProgressSpinner from 'primevue/progressspinner'
 import ToastService from 'primevue/toastservice'
@@ -44,6 +45,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVInputText', InputText)
   vueApp.component('PVInputSwitch', InputSwitch)
   vueApp.component('PVMessage', Message)
+  vueApp.component('PVMultiSelect', MultiSelect)
   vueApp.component('PVOverlayPanel', OverlayPanel)
   vueApp.component('PVProgressSpinner', ProgressSpinner)
   vueApp.component('PVTabPanel', TabPanel)