diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md
index 2e1caa51a..91cc31abc 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md
@@ -4,13 +4,12 @@
     
 A full-featured page for interacting with Coalesce's [Audit Logging](/topics/audit-logging.md). Presents a view similar to [c-admin-table-page](/stacks/vue/coalesce-vue-vuetify/components/c-admin-table-page.md) with content optimized for viewing audit log records. Designed to be routed to directly with [vue-router](https://router.vuejs.org/).
 
-Currently only supports Vue3.
-
 <!-- MARKER:summary-end -->
 
 ## Examples
 
 ``` ts
+import { CAdminAuditLogPage } from 'coalesce-vue-vuetify3';
 const router = new Router({
   // ...
   routes: [
diff --git a/docs/topics/audit-logging.md b/docs/topics/audit-logging.md
index 0e6e381f8..27c79380f 100644
--- a/docs/topics/audit-logging.md
+++ b/docs/topics/audit-logging.md
@@ -84,6 +84,20 @@ When you're inheriting from `DefaultObjectChange` for your `IObjectChange` imple
 
 The operation context class passed to `WithAugmentation` will be injected from the application service provider if available; otherwise, a new instance will be constructed using dependencies from the application service provider. To make an injected dependency optional, make the constructor parameter nullable with a default value of `null`, or create [alternate constructors](https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection#multiple-constructor-discovery-rules).
 
+### 4. Add the UI
+
+For Vue applications, the [c-admin-audit-log-page](/stacks/vue/coalesce-vue-vuetify/components/c-admin-audit-log-page.md) component provides an out-of-the-box user interface for browsing through audit logs. Simply define the following route in your application's router:
+
+``` ts
+import { CAdminAuditLogPage } from 'coalesce-vue-vuetify3';
+
+{
+  path: '/admin/audit-logs',
+  component: CAdminAuditLogPage,
+  props: { type: 'ObjectChange' }
+}
+```
+
 ## Configuration
 
 ### Suppression
diff --git a/playground/Coalesce.Domain/AppDbContext.cs b/playground/Coalesce.Domain/AppDbContext.cs
index 3d36284e2..69f794494 100644
--- a/playground/Coalesce.Domain/AppDbContext.cs
+++ b/playground/Coalesce.Domain/AppDbContext.cs
@@ -41,7 +41,10 @@ protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
                 .UseCoalesceAuditLogging<ObjectChange>(x => x
                     .WithAugmentation<OperationContext>()
                     .WithMergeWindow(TimeSpan.FromSeconds(15))
-                    // TODO: add nice spot here to setup Z EFPLUS config
+                    .ConfigureAudit(x => x
+                        // Just a random example of EFPlus config:
+                        .ExcludeProperty<Person>(p => p.ProfilePic)
+                    )
                 );
         }
 
diff --git a/playground/Coalesce.Domain/Coalesce.Domain.csproj b/playground/Coalesce.Domain/Coalesce.Domain.csproj
index 809777718..8c1bc4eb3 100644
--- a/playground/Coalesce.Domain/Coalesce.Domain.csproj
+++ b/playground/Coalesce.Domain/Coalesce.Domain.csproj
@@ -2,24 +2,14 @@
   <PropertyGroup>
     <!-- All these frameworks are included for testing code generation.
     Override the used framework by specifying (framework: "tfm") in coalesce.json. -->
-    <!--
-      IMPORTANT NOTE REGARDING ENTITYFRAMEWORK MIGRATIONS (Ctrl+f: EFCore, EF Core):
-      All EF commands need to be ran with - -framework net6.0. E.g.:
-      dotnet ef database update - -framework net6.0
-      (no space between the dashes; space is there because double dash is illegal in XML comments).
-    -->
     <TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
     <IsPackable>false</IsPackable>
     <Nullable>enable</Nullable>
   </PropertyGroup>
   
   <ItemGroup>
-    <ProjectReference Include="..\..\src\IntelliTect.Coalesce\IntelliTect.Coalesce.csproj">
-      <SetTargetFramework>TargetFramework=$(TargetFramework)</SetTargetFramework>
-    </ProjectReference>
-    <ProjectReference Include="..\..\src\IntelliTect.Coalesce.AuditLogging\IntelliTect.Coalesce.AuditLogging.csproj">
-      <SetTargetFramework>TargetFramework=$(TargetFramework)</SetTargetFramework>
-    </ProjectReference>
+    <ProjectReference Include="..\..\src\IntelliTect.Coalesce\IntelliTect.Coalesce.csproj" />
+    <ProjectReference Include="..\..\src\IntelliTect.Coalesce.AuditLogging\IntelliTect.Coalesce.AuditLogging.csproj" />
   </ItemGroup>
 
   <ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">
diff --git a/playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.Designer.cs b/playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.Designer.cs
similarity index 97%
rename from playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.Designer.cs
rename to playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.Designer.cs
index 1c671eab0..80cf55e21 100644
--- a/playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.Designer.cs
+++ b/playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.Designer.cs
@@ -12,7 +12,7 @@
 namespace Coalesce.Domain.Migrations
 {
     [DbContext(typeof(AppDbContext))]
-    [Migration("20231013200054_AddAuditLogging")]
+    [Migration("20231017172408_AddAuditLogging")]
     partial class AddAuditLogging
     {
         protected override void BuildTargetModel(ModelBuilder modelBuilder)
@@ -190,15 +190,24 @@ protected override void BuildTargetModel(ModelBuilder modelBuilder)
 
                     SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<long>("Id"), 1L, 1);
 
+                    b.Property<string>("ClientIp")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<DateTimeOffset>("Date")
                         .HasColumnType("datetimeoffset");
 
+                    b.Property<string>("Endpoint")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("KeyValue")
                         .HasColumnType("nvarchar(450)");
 
                     b.Property<string>("Message")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("Referrer")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<byte>("State")
                         .HasColumnType("tinyint");
 
diff --git a/playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.cs b/playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.cs
similarity index 94%
rename from playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.cs
rename to playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.cs
index b6e07a9d4..479e90131 100644
--- a/playground/Coalesce.Domain/Migrations/20231013200054_AddAuditLogging.cs
+++ b/playground/Coalesce.Domain/Migrations/20231017172408_AddAuditLogging.cs
@@ -40,7 +40,10 @@ protected override void Up(MigrationBuilder migrationBuilder)
                     Type = table.Column<string>(type: "varchar(100)", maxLength: 100, nullable: false),
                     KeyValue = table.Column<string>(type: "nvarchar(450)", nullable: true),
                     State = table.Column<byte>(type: "tinyint", nullable: false),
-                    Date = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: false)
+                    Date = table.Column<DateTimeOffset>(type: "datetimeoffset", nullable: false),
+                    ClientIp = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    Referrer = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    Endpoint = table.Column<string>(type: "nvarchar(max)", nullable: true)
                 },
                 constraints: table =>
                 {
diff --git a/playground/Coalesce.Domain/Migrations/AppDbContextModelSnapshot.cs b/playground/Coalesce.Domain/Migrations/AppDbContextModelSnapshot.cs
index 58da75f1e..03f22f46e 100644
--- a/playground/Coalesce.Domain/Migrations/AppDbContextModelSnapshot.cs
+++ b/playground/Coalesce.Domain/Migrations/AppDbContextModelSnapshot.cs
@@ -188,15 +188,24 @@ protected override void BuildModel(ModelBuilder modelBuilder)
 
                     SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<long>("Id"), 1L, 1);
 
+                    b.Property<string>("ClientIp")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<DateTimeOffset>("Date")
                         .HasColumnType("datetimeoffset");
 
+                    b.Property<string>("Endpoint")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("KeyValue")
                         .HasColumnType("nvarchar(450)");
 
                     b.Property<string>("Message")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("Referrer")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<byte>("State")
                         .HasColumnType("tinyint");
 
diff --git a/playground/Coalesce.Web.Vue2/src/main.ts b/playground/Coalesce.Web.Vue2/src/main.ts
index 166c9fa44..4d9ae8fba 100644
--- a/playground/Coalesce.Web.Vue2/src/main.ts
+++ b/playground/Coalesce.Web.Vue2/src/main.ts
@@ -24,7 +24,7 @@ import $metadata from '@/metadata.g';
 // viewmodels.g has sideeffects - it populates the global lookup on ViewModel and ListViewModel.
 import '@/viewmodels.g';
 
-import CoalesceVuetify, { CAdminTablePage, CAdminEditorPage } from 'coalesce-vue-vuetify';
+import CoalesceVuetify, { CAdminTablePage, CAdminEditorPage, CAdminAuditLogPage } from 'coalesce-vue-vuetify';
 Vue.use(CoalesceVuetify, {
   metadata: $metadata
 });
@@ -47,6 +47,7 @@ const router = new VueRouter({ mode: 'history', routes: [
     path: '/test',
     component: () => import("./components/test.vue"),  },
 
+  { path: '/audit-logs', component: CAdminAuditLogPage, props: {type: 'ObjectChange'} },
   { path: '/admin/:type', 
     name: 'coalesce-admin-list', 
     component: CAdminTablePage, 
diff --git a/playground/Coalesce.Web.Vue3/src/App.vue b/playground/Coalesce.Web.Vue3/src/App.vue
index a37c6f5d6..5299fa9ba 100644
--- a/playground/Coalesce.Web.Vue3/src/App.vue
+++ b/playground/Coalesce.Web.Vue3/src/App.vue
@@ -1,44 +1,42 @@
 <template>
   <v-app>
-    <v-app-bar
-    >
-
+    <v-app-bar>
       <v-toolbar-title style="line-height: 1">
-        <router-link to="/" class="white--text" >
+        <router-link to="/" class="white--text">
           Coalesce Vue Demo
         </router-link>
       </v-toolbar-title>
 
       <!-- <div class="nav-items"> -->
-        <v-switch
-                    label="Dark Mode"
-                    v-model="darkMode"
-                    hide-details
-                    class="ml-2"
-                    density="compact"
-                  />
+      <v-switch
+        label="Dark Mode"
+        v-model="darkMode"
+        hide-details
+        class="ml-2"
+        density="compact"
+      />
 
-        <v-btn variant="text" to="/">Home</v-btn>
-        <v-btn variant="text" to="/test">Test</v-btn>
-        <v-btn variant="text" href="/coalesce-security">Security Overview</v-btn>
+      <v-btn variant="text" to="/">Home</v-btn>
+      <v-btn variant="text" to="/test">Test</v-btn>
+      <v-btn variant="text" href="/coalesce-security">Security Overview</v-btn>
 
-        <v-menu offset-y>
-          <template #activator="{props}">
-            <v-btn variant="text" v-bind="props">
-              Dropdown Menu
-              <i class="fa fa-caret-down pl-1"></i>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item to="/"><v-list-item-title>Home</v-list-item-title></v-list-item>
-          </v-list>
-        </v-menu>
+      <v-menu offset-y>
+        <template #activator="{ props }">
+          <v-btn variant="text" v-bind="props">
+            Dropdown Menu
+            <i class="fa fa-caret-down pl-1"></i>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item to="/" title="Home" />
+        </v-list>
+      </v-menu>
       <!-- </div> -->
     </v-app-bar>
 
     <v-main>
       <router-view v-slot="{ Component }">
-        <transition name="router-transition" mode="out-in"  appear>
+        <transition name="router-transition" mode="out-in" appear>
           <!-- https://stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath -->
           <component ref="routerView" :is="Component" :key="$route.path" />
         </transition>
@@ -47,7 +45,7 @@
   </v-app>
 </template>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useTheme } from "vuetify";
 
@@ -63,20 +61,18 @@ const darkMode = computed({
 });
 </script>
 
-
 <style lang="scss">
-  .router-transition-enter-active,
-  .router-transition-leave-active {
-    // transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
-    transition: 0.1s ease-out;
-  }
-  .router-transition-move {
-    transition: transform 0.4s;
-  }
-  .router-transition-enter,
-  .router-transition-leave-to {
-    opacity: 0;
-    // transform: translateY(5px);
-  }
-
-</style>
\ No newline at end of file
+.router-transition-enter-active,
+.router-transition-leave-active {
+  // transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: 0.1s ease-out;
+}
+.router-transition-move {
+  transition: transform 0.4s;
+}
+.router-transition-enter,
+.router-transition-leave-to {
+  opacity: 0;
+  // transform: translateY(5px);
+}
+</style>
diff --git a/src/IntelliTect.Coalesce.AuditLogging/CoalesceAuditLoggingBuilder.cs b/src/IntelliTect.Coalesce.AuditLogging/CoalesceAuditLoggingBuilder.cs
index acaf7233a..1d36bf918 100644
--- a/src/IntelliTect.Coalesce.AuditLogging/CoalesceAuditLoggingBuilder.cs
+++ b/src/IntelliTect.Coalesce.AuditLogging/CoalesceAuditLoggingBuilder.cs
@@ -17,6 +17,13 @@ public CoalesceAuditLoggingBuilder(AuditOptions options)
         this.options = options;
     }
 
+    /// <summary>
+    /// Configures the operation context service that will be used to populate additional contextual
+    /// fields on audit log entries. The service will be injected from the application service 
+    /// provider if available; otherwise, a new instance will be constructed using dependencies 
+    /// from the application service provider. To make an injected dependency optional, make the
+    /// constructor parameter nullable with a default value of `null`, or create alternate constructors.
+    /// </summary>
     public CoalesceAuditLoggingBuilder<TObjectChange> WithAugmentation<T>()
         where T : IAuditOperationContext<TObjectChange>
     {
diff --git a/src/coalesce-vue-vuetify2/src/components/admin/c-admin-audit-log-page.vue b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-audit-log-page.vue
new file mode 100644
index 000000000..e27168f06
--- /dev/null
+++ b/src/coalesce-vue-vuetify2/src/components/admin/c-admin-audit-log-page.vue
@@ -0,0 +1,448 @@
+<template>
+  <v-container fluid class="c-admin-audit-log-page">
+    <v-card class="c-admin-audit-log-page">
+      <v-toolbar
+        extended
+        class="c-admin-table-toolbar"
+        dense
+        :color="color"
+        dark
+      >
+        <v-toolbar-title
+          class="c-admin-table-toolbar--model-name hidden-xs-only"
+        >
+          {{ list.$metadata.displayName }}
+        </v-toolbar-title>
+
+        <v-divider class="hidden-xs-only mx-4" vertical></v-divider>
+
+        <v-btn
+          class="c-admin-table-toolbar--button-reload"
+          text
+          @click="list.$load()"
+        >
+          <v-icon left>fa fa-sync-alt</v-icon>
+          <span class="hidden-sm-and-down">Reload</span>
+        </v-btn>
+
+        <v-spacer></v-spacer>
+
+        <span class="c-admin-table-toolbar--range hidden-sm-and-down">
+          Showing <c-list-range-display :list="list" />
+        </span>
+
+        <v-spacer></v-spacer>
+
+        <c-list-page class="c-admin-table-toolbar--page" :list="list" />
+
+        <template v-slot:extension>
+          <div class="c-audit-logs--filters">
+            <v-text-field
+              v-model="list.$params.filter.type"
+              label="Type Name"
+              style="width: 150px"
+              @clear="$nextTick(() => (list.$params.filter.type = ''))"
+              flat
+              solo-inverted
+              hide-details
+              single-line
+              clearable
+            />
+
+            <v-text-field
+              v-model="list.$params.filter.keyValue"
+              label="Key Value"
+              style="width: 150px"
+              @clear="$nextTick(() => (list.$params.filter.keyValue = ''))"
+              flat
+              solo-inverted
+              hide-details
+              single-line
+              clearable
+            />
+
+            <c-input
+              v-model="list.$params.filter.state"
+              :for="list.$metadata.props.state"
+              @clear="$nextTick(() => (list.$params.filter.state = ''))"
+              style="min-width: 210px; max-width: 210px"
+              flat
+              solo-inverted
+              hide-details
+              single-line
+              clearable
+            />
+
+            <c-select
+              v-if="userPropMeta"
+              :for="userPropMeta"
+              v-model:key-value="
+                list.$params.filter[userPropMeta.foreignKey.name]
+              "
+              style="width: 240px"
+              @clear="
+                $nextTick(
+                  () => (list.$params.filter[userPropMeta.foreignKey.name] = '')
+                )
+              "
+              flat
+              solo-inverted
+              hide-details
+              single-line
+              clearable
+            />
+          </div>
+
+          <v-spacer></v-spacer>
+          <c-list-page-size :list="list" />
+        </template>
+      </v-toolbar>
+
+      <v-card-text>
+        <c-loader-status
+          :loaders="{
+            'no-initial-content no-error-content': [list.$load],
+          }"
+        >
+          <v-simple-table class="c-audit-logs--table">
+            <thead>
+              <tr>
+                <th class="c-audit-logs--column-user-date">By/Date</th>
+                <th class="c-audit-logs--column-entity">Entity</th>
+                <th class="c-audit-logs--column-details">Details</th>
+                <th class="c-audit-logs--column-properties">Properties</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(objectChange, index) in list.$items"
+                :key="objectChange.$stableId"
+              >
+                <td class="c-audit-logs--column-user-date">
+                  <c-display
+                    v-if="userPropMeta"
+                    :model="objectChange"
+                    element="div"
+                    :for="userPropMeta.name"
+                    class="text-no-wrap"
+                  />
+                  <c-display
+                    :model="objectChange"
+                    element="div"
+                    for="date"
+                    class="text-no-wrap text-caption d-block"
+                    format="M/dd/yy h:mm:ss.SSS a"
+                  />
+                  <pre
+                    :class="timeDiffClass(objectChange, list.$items[index + 1])"
+                    v-text="timeDiff(objectChange, list.$items[index + 1])"
+                    title="Time delta from the preceding row"
+                  ></pre>
+                </td>
+
+                <td class="c-audit-logs--column-entity">
+                  <pre>Type: <c-display :model="objectChange" for="type" /></pre>
+                  <pre> Key: <c-display 
+                    :model="objectChange"       
+                    for="keyValue" 
+                    style="    
+                      white-space: break-spaces;
+                      display: inline-block;
+                      padding-right: 40px;
+                      vertical-align: top;
+                    "/></pre>
+                </td>
+
+                <td class="c-audit-logs--column-details">
+                  <slot name="row-detail" :item="objectChange">
+                    <table>
+                      <tr class="prop-state">
+                        <td>Change:</td>
+                        <td><c-display :model="objectChange" for="state" /></td>
+                      </tr>
+                      <tr
+                        v-for="propMeta in otherProps"
+                        :key="objectChange.$stableId + '-prop-' + propMeta.name"
+                        :class="'prop-' + propMeta.name"
+                      >
+                        <td>{{ propMeta.displayName }}:</td>
+                        <td>
+                          <c-display
+                            :model="objectChange"
+                            :for="propMeta"
+                            class="grey--text"
+                          />
+                        </td>
+                      </tr>
+                      <slot name="row-detail-append" :item="objectChange" />
+                    </table>
+                  </slot>
+                </td>
+
+                <td class="c-audit-logs--column-properties">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th class="c-audit-logs--property-name">Property</th>
+                        <th>Old</th>
+                        <th>New</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="prop in objectChange.properties"
+                        :key="prop.id"
+                      >
+                        <td class="c-audit-logs--property-name">
+                          <c-display :model="prop" for="propertyName" />
+                        </td>
+                        <td class="c-audit-logs--property-value">
+                          <c-display :model="prop" for="oldValue" />
+                        </td>
+                        <td class="c-audit-logs--property-value">
+                          <c-display :model="prop" for="newValue" />
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </tbody>
+          </v-simple-table>
+
+          <v-divider />
+          <c-list-pagination :list="list" class="mt-4" />
+        </c-loader-status>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { differenceInMilliseconds } from "date-fns";
+import {
+  HiddenAreas,
+  ListViewModel,
+  ModelApiClient,
+  ModelReferenceNavigationProperty,
+  ModelType,
+  useBindToQueryString,
+  ViewModel,
+} from "coalesce-vue";
+
+interface ObjectChangeBase {
+  $metadata: ModelType;
+  id: number | null;
+  type: string | null;
+  keyValue: string | null;
+  date: Date | null;
+  state: number | null;
+  properties: {
+    $metadata: ModelType;
+    id: number | null;
+    parentId: number | null;
+    oldValue: string | null;
+    newValue: string | null;
+  }[];
+}
+
+type ObjectChangeViewModel = ViewModel<ObjectChangeBase> & ObjectChangeBase;
+type ObjectChangeListViewModel = ListViewModel<
+  ObjectChangeBase,
+  ModelApiClient<ObjectChangeBase>,
+  ObjectChangeViewModel
+>;
+
+const props = withDefaults(
+  defineProps<{
+    type?: string;
+    color?: string;
+    list?: string;
+  }>(),
+  { color: "primary" }
+);
+
+let list: ObjectChangeListViewModel;
+if (props.list) {
+  list = props.list as any;
+} else {
+  if (!props.type) {
+    throw Error(
+      "c-admin-audit-log-page: If prop `list` is not provided, `type` is required."
+    );
+  } else if (!ListViewModel.typeLookup![props.type]) {
+    throw Error(
+      `No model named ${props.type} is registered to ListViewModel.typeLookup`
+    );
+  }
+  list = new ListViewModel.typeLookup![props.type]() as any;
+}
+
+const userPropMeta = computed(() => {
+  return (
+    Object.values(list.$metadata.props)
+      .filter(
+        (p): p is ModelReferenceNavigationProperty =>
+          p.role == "referenceNavigation"
+      )
+      // FUTURE: Could there be other props that we detect as representing a user?
+      .filter((p) => ["user"].includes(p.name.toLowerCase()))[0]
+  );
+});
+
+const otherProps = computed(() => {
+  return Object.values(list.$metadata.props).filter(
+    (p) =>
+      ((p.hidden || 0) & HiddenAreas.List) != HiddenAreas.List &&
+      p != userPropMeta.value &&
+      !["id", "type", "keyValue", "date", "state", "properties"].includes(
+        p.name
+      ) &&
+      (p.role !== "foreignKey" || !p.navigationProp)
+  );
+});
+
+function timeDiff(
+  current: ObjectChangeViewModel,
+  older?: ObjectChangeViewModel
+) {
+  if (!older) return "";
+  let ms = differenceInMilliseconds(current.date!, older.date!);
+  const positive = ms >= 0;
+  ms = Math.abs(ms);
+
+  var totalSec = ms / 1000;
+  var hours = Math.floor(totalSec / 3600);
+  var minutes = Math.floor((totalSec - hours * 3600) / 60);
+  var seconds = totalSec - hours * 3600 - minutes * 60;
+
+  return (
+    (positive ? "+" : "-") +
+    (hours > 0 ? hours + "h " : "") +
+    (hours > 0 || minutes > 0 ? minutes + "m " : "") +
+    seconds.toFixed(2) +
+    "s"
+  );
+}
+
+function timeDiffClass(
+  current: ObjectChangeViewModel,
+  older?: ObjectChangeViewModel
+) {
+  if (!older) return "";
+  const diff = current.date!.valueOf() - (older?.date ?? 0).valueOf();
+  return diff == 0 ? "grey--text" : diff > 0 ? "success--text" : "error--text";
+}
+
+let filter = {
+  type: "",
+  keyValue: "",
+  state: "",
+};
+
+if (userPropMeta.value) {
+  const fkName = userPropMeta.value.foreignKey.name;
+  //@ts-ignore
+  filter[fkName] = "";
+  useBindToQueryString(filter, fkName, "user");
+}
+
+list.$params.filter = filter;
+
+useBindToQueryString(filter, "type");
+useBindToQueryString(filter, "keyValue");
+useBindToQueryString(filter, "state");
+useBindToQueryString(list.$params, "page", "page", (p) => +p);
+useBindToQueryString(list.$params, "pageSize", "pageSize", (p) => +p);
+
+list.$load();
+list.$useAutoLoad({ wait: 0 });
+
+defineExpose({
+  /** Support for common convention of exposing 'pageTitle' from router-view hosted components. */
+  pageTitle: "Audit Logs",
+});
+</script>
+
+<style lang="scss">
+@mixin small {
+  font-size: 0.75rem !important;
+  font-weight: 400;
+  letter-spacing: 0.0333333333em !important;
+  line-height: 1rem;
+}
+
+.c-audit-logs--filters {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+  > * {
+    margin-right: 16px !important;
+  }
+}
+
+.c-audit-logs--table {
+  --v-table-header-height: auto !important;
+
+  > .v-data-table__wrapper > table > tbody > tr > td {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+  th {
+    vertical-align: bottom;
+  }
+  td {
+    vertical-align: top;
+  }
+}
+
+.c-audit-logs--column-details {
+  table {
+    @include small;
+    font-family: monospace;
+    td {
+      white-space: pre-wrap;
+      vertical-align: top;
+      padding: 0 2px;
+
+      &:first-child {
+        white-space: nowrap;
+        text-align: right;
+      }
+    }
+  }
+}
+
+.c-audit-logs--column-properties table {
+  @include small;
+  table-layout: fixed;
+  border-spacing: 0;
+  width: 100%;
+  text-align: left;
+
+  min-width: 500px;
+
+  .c-audit-logs--property-name {
+    width: 170px;
+    white-space: nowrap;
+  }
+  .c-audit-logs--property-value {
+    white-space: pre-wrap;
+    overflow: auto;
+    min-width: 100px;
+  }
+
+  th,
+  td {
+    padding: 1px 6px;
+    line-height: 1.25rem;
+  }
+  th {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  tr:not(:last-child) td {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+}
+</style>
diff --git a/src/coalesce-vue-vuetify2/src/components/index.ts b/src/coalesce-vue-vuetify2/src/components/index.ts
index 0d4051990..05752ebf6 100644
--- a/src/coalesce-vue-vuetify2/src/components/index.ts
+++ b/src/coalesce-vue-vuetify2/src/components/index.ts
@@ -1,4 +1,5 @@
 // In alphabetical order:
+export { default as CAdminAuditLogPage } from "./admin/c-admin-audit-log-page.vue";
 export { default as CAdminDisplay } from "./admin/c-admin-display";
 export { default as CAdminEditor } from "./admin/c-admin-editor.vue";
 export { default as CAdminEditorPage } from "./admin/c-admin-editor-page.vue";
@@ -27,6 +28,7 @@ export { default as CTable } from "./display/c-table.vue";
 import "vue";
 declare module "vue" {
   interface GlobalComponents {
+    CAdminAuditLogPage: typeof import(".")["CAdminAuditLogPage"];
     CAdminDisplay: typeof import(".")["CAdminDisplay"];
     CAdminEditor: typeof import(".")["CAdminEditor"];
     CAdminEditorPage: typeof import(".")["CAdminEditorPage"];
diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-audit-log-page.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-audit-log-page.vue
index 3b64b0490..3174e564d 100644
--- a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-audit-log-page.vue
+++ b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-audit-log-page.vue
@@ -222,6 +222,7 @@
 import { computed } from "vue";
 import { differenceInMilliseconds } from "date-fns";
 import {
+  HiddenAreas,
   ListViewModel,
   ModelApiClient,
   ModelReferenceNavigationProperty,
@@ -293,6 +294,7 @@ const userPropMeta = computed(() => {
 const otherProps = computed(() => {
   return Object.values(list.$metadata.props).filter(
     (p) =>
+      ((p.hidden || 0) & HiddenAreas.List) != HiddenAreas.List &&
       p != userPropMeta.value &&
       !["id", "type", "keyValue", "date", "state", "properties"].includes(
         p.name
@@ -401,9 +403,11 @@ defineExpose({
       white-space: pre-wrap;
       vertical-align: top;
       padding: 0 2px;
-    }
-    td:first-child {
-      text-align: right;
+
+      &:first-child {
+        white-space: nowrap;
+        text-align: right;
+      }
     }
   }
 }