diff --git a/src/Frontend/src/components/AdaptiveTimestamp.spec.ts b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
new file mode 100644
index 000000000..0a70f5890
--- /dev/null
+++ b/src/Frontend/src/components/AdaptiveTimestamp.spec.ts
@@ -0,0 +1,89 @@
+import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import { cleanup, render, screen } from "@testing-library/vue";
+import AdaptiveTimestamp from "@/components/AdaptiveTimestamp.vue";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+const NOW = new Date("2026-09-03T15:00:00");
+
+function renderAt(date: Date) {
+  cleanup();
+  render(AdaptiveTimestamp, { props: { dateUtc: date.toISOString() } });
+  return {
+    absolute: screen.getByTestId("adaptive-absolute").textContent!,
+    relative: screen.getByTestId("adaptive-relative").textContent!,
+  };
+}
+
+describe("FEATURE: Age-adaptive timestamps", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    useTimestampZone().zone.value = "local";
+  });
+
+  test("EXAMPLE: Today shows the time only", () => {
+    const date = new Date("2026-09-03T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(date.toLocaleTimeString());
+    expect(relative).toContain("2 hours ago");
+  });
+
+  test("EXAMPLE: Yesterday is labeled yesterday", () => {
+    const date = new Date("2026-09-02T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(`yesterday ${date.toLocaleTimeString()}`);
+    expect(relative).toContain("1 day ago");
+  });
+
+  test("EXAMPLE: Within the past week the weekday is named", () => {
+    const date = new Date("2026-08-31T13:00:00"); // Monday
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(`${date.toLocaleDateString(undefined, { weekday: "long" })} ${date.toLocaleTimeString()}`);
+    expect(relative).toContain("3 days ago");
+  });
+
+  test("EXAMPLE: Older dates keep the regular browser format", () => {
+    const date = new Date("2026-08-20T13:00:00");
+    const { absolute, relative } = renderAt(date);
+
+    expect(absolute).toBe(date.toLocaleString());
+    expect(relative).toContain("2 weeks ago");
+  });
+
+  test("EXAMPLE: The part prop renders only one half, for split layouts", () => {
+    cleanup();
+    render(AdaptiveTimestamp, { props: { dateUtc: new Date("2026-09-03T13:00:00").toISOString(), part: "relative" } });
+    expect(screen.queryByTestId("adaptive-absolute")).not.toBeInTheDocument();
+    expect(screen.getByTestId("adaptive-relative").textContent).toBe("2 hours ago");
+
+    cleanup();
+    render(AdaptiveTimestamp, { props: { dateUtc: new Date("2026-09-03T13:00:00").toISOString(), part: "absolute" } });
+    expect(screen.queryByTestId("adaptive-relative")).not.toBeInTheDocument();
+    expect(screen.getByTestId("adaptive-absolute")).toBeInTheDocument();
+  });
+
+  test("EXAMPLE: In UTC mode the wall-clock time is UTC", () => {
+    const { zone } = useTimestampZone();
+    zone.value = "utc";
+
+    const date = new Date("2026-09-03T13:00:00");
+    const utcWall = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+
+    // toContain: near the UTC midnight boundary the day prefix may differ from local mode
+    expect(renderAt(date).absolute).toContain(utcWall.toLocaleTimeString());
+  });
+
+  test("EXAMPLE: The coarse relative label covers moments to years", () => {
+    expect(renderAt(new Date("2026-09-03T14:59:50")).relative).toContain("moments ago");
+    expect(renderAt(new Date("2026-09-03T14:30:00")).relative).toContain("30 minutes ago");
+    expect(renderAt(new Date("2026-06-03T15:00:00")).relative).toContain("3 months ago");
+    expect(renderAt(new Date("2024-09-03T15:00:00")).relative).toContain("2 years ago");
+  });
+});
diff --git a/src/Frontend/src/components/AdaptiveTimestamp.vue b/src/Frontend/src/components/AdaptiveTimestamp.vue
new file mode 100644
index 000000000..9addc2a7f
--- /dev/null
+++ b/src/Frontend/src/components/AdaptiveTimestamp.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useDateFormatter } from "@/composables/dateFormatter";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+// part: render only one half — lets a layout place the absolute time and the
+// age in separate (grid) cells while both keep the dual-zone tooltip
+const props = defineProps<{ dateUtc: string; part?: "absolute" | "relative" }>();
+
+const { formatAdaptiveDate, formatCoarseRelative, formatDateTooltip } = useDateFormatter();
+const { zone } = useTimestampZone();
+
+// tick so the relative label stays honest and the adaptive form rolls over at midnight
+const now = ref(new Date());
+let timer: number | undefined;
+onMounted(() => {
+  timer = window.setInterval(() => (now.value = new Date()), 5000);
+});
+onBeforeUnmount(() => window.clearInterval(timer));
+
+const absolute = computed(() => formatAdaptiveDate(props.dateUtc, () => now.value, zone.value));
+const relative = computed(() => formatCoarseRelative(props.dateUtc, () => now.value));
+const tooltip = computed(() => formatDateTooltip(props.dateUtc));
+</script>
+
+<template>
+  <span class="adaptive-timestamp" :title="tooltip">
+    <span v-if="props.part !== 'relative'" data-testid="adaptive-absolute">{{ absolute }}</span>
+    <span v-if="props.part !== 'absolute'" class="relative" data-testid="adaptive-relative">{{ props.part === "relative" ? "" : " · " }}{{ relative }}</span>
+  </span>
+</template>
+
+<style scoped>
+.relative {
+  color: #999;
+}
+</style>
diff --git a/src/Frontend/src/components/ResultsCount.spec.ts b/src/Frontend/src/components/ResultsCount.spec.ts
index 20e695c3b..84255aaf8 100644
--- a/src/Frontend/src/components/ResultsCount.spec.ts
+++ b/src/Frontend/src/components/ResultsCount.spec.ts
@@ -23,6 +23,15 @@ describe("FEATURE: Results count", () => {
     expect(screen.getByText("Showing 10 of 10 result(s) · took 320 ms")).toBeInTheDocument();
   });
 
+  test("EXAMPLE: When the query ran is shown relatively with the timestamp as tooltip", () => {
+    const completedAt = new Date(Date.now() - 3 * 60 * 1000).toISOString();
+    render(ResultsCount, { props: { displayed: 10, total: 10, durationMs: 320, completedAt } });
+
+    const ran = screen.getByTestId("ran-ago");
+    expect(ran.textContent).toContain("minutes ago");
+    expect(ran.getAttribute("title")).toContain("(UTC)");
+  });
+
   test("EXAMPLE: Zero results render plainly", () => {
     render(ResultsCount, { props: { displayed: 0, total: 0 } });
 
diff --git a/src/Frontend/src/components/ResultsCount.vue b/src/Frontend/src/components/ResultsCount.vue
index c5eea31bc..5a90be26f 100644
--- a/src/Frontend/src/components/ResultsCount.vue
+++ b/src/Frontend/src/components/ResultsCount.vue
@@ -1,12 +1,25 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useDateFormatter } from "@/composables/dateFormatter";
 
 const props = defineProps<{
   displayed: number;
   total: number;
   durationMs?: number | null;
+  completedAt?: string | null;
 }>();
 
+const { formatCoarseRelative, formatDateTooltip } = useDateFormatter();
+const now = ref(new Date());
+let timer: number | undefined;
+onMounted(() => {
+  timer = window.setInterval(() => (now.value = new Date()), 5000);
+});
+onBeforeUnmount(() => window.clearInterval(timer));
+
+const ranAgo = computed(() => (props.completedAt ? formatCoarseRelative(props.completedAt, () => now.value) : null));
+const ranTooltip = computed(() => (props.completedAt ? formatDateTooltip(props.completedAt) : ""));
+
 // Large audit stores easily reach nine digits; format both numbers in the user's locale
 const numberFormat = new Intl.NumberFormat();
 const formattedDisplayed = computed(() => numberFormat.format(props.displayed));
@@ -21,7 +34,10 @@ const formattedDuration = computed(() => {
 <template>
   <div class="col format-showing-results">
     <div>
-      Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)<template v-if="formattedDuration"> · took {{ formattedDuration }}</template>
+      Showing {{ formattedDisplayed }} of {{ formattedTotal }} result(s)<template v-if="formattedDuration"> · took {{ formattedDuration }}</template
+      ><template v-if="ranAgo">
+        · ran <span :title="ranTooltip" data-testid="ran-ago">{{ ranAgo }}</span></template
+      >
     </div>
   </div>
 </template>
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 97e79306d..2f6241746 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -19,7 +19,7 @@ import { useConfigurationStore } from "@/stores/ConfigurationStore";
 import { loadDefaultRange, narrowingPresets, resolveTimeRange, type RangePreset } from "@/components/audit/timeRange";
 
 const store = useAuditStore();
-const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed, queryDurationMs } = storeToRefs(store);
+const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, timeRangeFrom, timeRangeTo, queryFailed, queryDurationMs, queryCompletedAt } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
@@ -202,7 +202,7 @@ watch(autoRefreshValue, (newValue) => {
       </div>
       <div class="row results-row">
         <div class="results-summary">
-          <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" />
+          <ResultsCount :displayed="messages.length" :total="totalCount" :duration-ms="queryDurationMs" :completed-at="queryCompletedAt" />
           <span v-if="slowQuery && queryInProgress" class="slow-query" role="status" data-testid="slow-query-hint">Still running · a narrower time range makes the query lighter.</span>
         </div>
         <ResultsOptions />
@@ -313,5 +313,30 @@ watch(autoRefreshValue, (newValue) => {
   margin-bottom: 5rem;
   background-color: #ffffff;
   position: relative;
+  /* The results list is a grid that places nothing itself: it only declares the six
+     columns, and every row (AuditListItem) joins them with `subgrid`. Declaring them here,
+     once, is what keeps rows aligned: a column is measured across ALL rows, which a row
+     laying out its own columns cannot do.
+
+       1.8em                       status icon
+       minmax(0, 1fr)              message id: the one value allowed to shrink and break,
+                                   so a long id never pushes the values off the row
+       minmax(max-content, 1fr)    each value column, read as: never narrower than its
+                                   widest value in the list (so nothing wraps), and once
+                                   every column has that, share the leftover width equally
+                                   (so the columns spread out on a wide screen instead of
+                                   huddling on the left)
+
+     Deliberately NOT a size container: combining container-type with content-sized
+     tracks froze Chrome's layout. */
+  display: grid;
+  grid-template-columns: 1.8em minmax(0, 1fr) repeat(4, minmax(max-content, 1fr));
+  column-gap: 0.375rem;
+  align-content: start;
+}
+
+/* Non-row children (the first-load spinner) span the full width */
+.results-table > :not(.item) {
+  grid-column: 1 / -1;
 }
 </style>
diff --git a/src/Frontend/src/components/audit/AuditListItem.spec.ts b/src/Frontend/src/components/audit/AuditListItem.spec.ts
new file mode 100644
index 000000000..331ff3c83
--- /dev/null
+++ b/src/Frontend/src/components/audit/AuditListItem.spec.ts
@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+import AuditListItem from "@/components/audit/AuditListItem.vue";
+import { type default as Message, MessageStatus } from "@/resources/Message";
+
+const NOW = new Date("2026-09-03T15:00:00");
+
+function renderRow(timeSent: string) {
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: "/:pathMatch(.*)*", component: { template: "<div />" } }] });
+  const message = {
+    id: "id-1",
+    message_id: "msg-1",
+    message_type: "Sales.OrderPlaced",
+    time_sent: timeSent,
+    status: MessageStatus.Successful,
+    processing_time: "00:00:00.012",
+    critical_time: "00:00:00.123",
+    delivery_time: "00:00:00.001",
+  } as unknown as Message;
+  render(AuditListItem, { props: { message }, global: { plugins: [router] } });
+}
+
+describe("FEATURE: Audit row layout", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe("RULE: The age belongs to Time Sent, not to a column of its own", () => {
+    test("EXAMPLE: The Time Sent cell carries the label, the absolute time and the age", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      const cell = document.querySelector(".time-sent")!;
+      expect(cell.textContent).toContain("Time Sent:");
+      expect(cell.querySelector('[data-testid="adaptive-absolute"]')).not.toBeNull();
+      expect(cell.querySelector('[data-testid="adaptive-relative"]')!.textContent).toContain("4 minutes ago");
+      expect(screen.getByText("4 minutes ago", { exact: false })).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: The age hides below Bootstrap's lg breakpoint through its display utilities", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      const age = document.querySelector('[data-testid="adaptive-relative"]')!.closest(".d-none.d-lg-inline");
+      expect(age).not.toBeNull();
+      // the separator hides together with the age
+      expect(age!.textContent).toContain("·");
+    });
+
+    test("EXAMPLE: There is no separate age cell", () => {
+      renderRow(new Date("2026-09-03T14:56:00").toISOString());
+
+      // the age is text inside the Time Sent cell, not a grid cell of the row
+      expect(document.querySelector(".item > .age")).toBeNull();
+    });
+  });
+});
diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index e82d35bda..0fb3c8457 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -5,6 +5,7 @@ import { computed } from "vue";
 import { formatDotNetTimespan } from "@/composables/formatUtils";
 import { useRouter, RouterLink } from "vue-router";
 import MessageStatusIcon from "@/components/audit/MessageStatusIcon.vue";
+import AdaptiveTimestamp from "@/components/AdaptiveTimestamp.vue";
 
 const router = useRouter();
 
@@ -33,7 +34,9 @@ const link = computed(() => {
     </div>
     <div class="message-id">{{ props.message.message_id }}</div>
     <div class="message-type">{{ props.message.message_type }}</div>
-    <div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
+    <div class="time-sent">
+      <span class="label-name">Time Sent:</span><AdaptiveTimestamp :date-utc="props.message.time_sent" part="absolute" /><span class="age d-none d-lg-inline"> · <AdaptiveTimestamp :date-utc="props.message.time_sent" part="relative" /></span>
+    </div>
     <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
     <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
     <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
@@ -41,6 +44,19 @@ const link = computed(() => {
 </template>
 
 <style scoped>
+/* A row is a two-line card that is also a link.
+ *
+ * Its columns are NOT its own. The list (AuditList.vue) declares the six columns once and
+ * every row joins them with `subgrid`, so a value in one row sits exactly under the same
+ * value in the next: the widest "Time Sent" in the list sets that column for all rows.
+ * A row that sized its own columns could only measure its own values, and rows would
+ * drift apart (or wrap) as soon as one of them held a longer value.
+ *
+ *   grid-column: 1 / -1            span all six columns of the list
+ *   grid-template-columns: subgrid use them as this row's columns
+ *   grid-template-areas            where each cell goes, by name: the message type owns
+ *                                  the top line, the id and the values share the bottom
+ *                                  line, the status icon spans both */
 .item {
   color: inherit;
   text-decoration: none;
@@ -48,12 +64,13 @@ const link = computed(() => {
   border: 1px solid #ffffff;
   border-bottom: 1px solid #eee;
   display: grid;
-  grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: auto auto;
   gap: 0.375rem;
   grid-template-areas:
-    "status message-type message-type message-type time-sent"
-    "status message-id processing-time critical-time delivery-time";
+    "status message-type message-type message-type message-type message-type"
+    "status message-id processing-time critical-time delivery-time time-sent";
 }
 .item:not(:first-child) {
   border-top-color: #eee;
@@ -75,6 +92,25 @@ const link = computed(() => {
 .time-sent {
   grid-area: time-sent;
 }
+
+/* The age reads as a footnote to the timestamp it follows. It is the first thing to go
+   when width gets tight: hidden below Bootstrap's lg breakpoint (d-none d-lg-inline on
+   the span), the absolute timestamp carries the information */
+.age,
+.age :deep(.relative) {
+  color: #777f7f;
+}
+
+/* All data cells share the bottom line; when one wraps taller, the rest stay
+   bottom aligned with it */
+.message-id,
+.processing-time,
+.critical-time,
+.delivery-time,
+.time-sent {
+  align-self: end;
+}
+
 .message-type {
   grid-area: message-type;
   font-weight: bold;
diff --git a/src/Frontend/src/components/audit/ResultsOptions.vue b/src/Frontend/src/components/audit/ResultsOptions.vue
index 08ff3042a..2658c5d6a 100644
--- a/src/Frontend/src/components/audit/ResultsOptions.vue
+++ b/src/Frontend/src/components/audit/ResultsOptions.vue
@@ -3,7 +3,9 @@ import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { FieldNames, useAuditStore } from "@/stores/AuditStore";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
+import { useTimestampZone } from "@/composables/timestampZone";
 
+const { zone, toggle } = useTimestampZone();
 const store = useAuditStore();
 const { sortBy, itemsPerPage } = storeToRefs(store);
 
@@ -61,6 +63,10 @@ function findKeyByValue(searchValue: string) {
       <span class="option-label">Sort:</span>
       <ListFilterSelector :items="sortByItems" v-model="selectedSortByItem" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
     </div>
+    <div class="option">
+      <span class="option-label">Times:</span>
+      <button type="button" class="zone-toggle" data-testid="zone-toggle" :title="`Switch to ${zone === 'local' ? 'UTC' : 'local'} times`" @click="toggle">{{ zone === "local" ? "local" : "UTC" }}</button>
+    </div>
   </div>
 </template>
 
@@ -81,4 +87,16 @@ function findKeyByValue(searchValue: string) {
 .option-label {
   font-weight: bold;
 }
+
+.zone-toggle {
+  border: 0;
+  background: none;
+  color: #00729c;
+  cursor: pointer;
+  padding: 0.1rem 0.25rem;
+}
+
+.zone-toggle:hover {
+  text-decoration: underline;
+}
 </style>
diff --git a/src/Frontend/src/composables/dateFormatter.ts b/src/Frontend/src/composables/dateFormatter.ts
index 1ec3d9feb..8b8792172 100644
--- a/src/Frontend/src/composables/dateFormatter.ts
+++ b/src/Frontend/src/composables/dateFormatter.ts
@@ -61,6 +61,36 @@ export function useDateFormatter() {
   /**
    * Format date for tooltip display (local and UTC)
    */
+  // Coarse relative age: moments/minutes/hours/days/weeks/months/years ago
+  function formatCoarseRelative(dateInput: string | Date, now: () => Date = () => new Date()): string {
+    const then = dayjs.utc(dateInput).valueOf();
+    const seconds = Math.max(0, Math.round((now().getTime() - then) / 1000));
+    const unit = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"} ago`;
+    if (seconds < 45) return "moments ago";
+    if (seconds < 60 * 60) return unit(Math.max(1, Math.round(seconds / 60)), "minute");
+    if (seconds < 24 * 60 * 60) return unit(Math.round(seconds / 3600), "hour");
+    if (seconds < 7 * 24 * 60 * 60) return unit(Math.round(seconds / 86400), "day");
+    if (seconds < 5 * 7 * 24 * 60 * 60) return unit(Math.round(seconds / (7 * 86400)), "week");
+    if (seconds < 365 * 24 * 60 * 60) return unit(Math.max(1, Math.round(seconds / (30.44 * 86400))), "month");
+    return unit(Math.max(1, Math.round(seconds / (365.25 * 86400))), "year");
+  }
+
+  // Age-adaptive absolute: time only for today, 'yesterday HH:MM' and weekday
+  // names for the past week, the regular browser-formatted value beyond that.
+  // In UTC mode both the instant and "now" are rebased to UTC wall time, so the
+  // same code path also gets the day boundaries right for that zone.
+  function formatAdaptiveDate(dateInput: string | Date, now: () => Date = () => new Date(), zone: "local" | "utc" = "local"): string {
+    const toWall = (d: Date) => (zone === "utc" ? new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds()) : d);
+    const date = toWall(dayjs.utc(dateInput).toDate());
+    const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    const dayDiff = Math.round((startOfDay(toWall(now())) - startOfDay(date)) / 86400000);
+    const time = date.toLocaleTimeString();
+    if (dayDiff <= 0) return time;
+    if (dayDiff === 1) return `yesterday ${time}`;
+    if (dayDiff < 7) return `${date.toLocaleDateString(undefined, { weekday: "long" })} ${time}`;
+    return date.toLocaleString();
+  }
+
   function formatDateTooltip(dateInput: string | Date | null, titleValue?: string): string {
     if (titleValue) return titleValue;
     if (!dateInput || dateInput === emptyDate) return "";
@@ -116,6 +146,8 @@ export function useDateFormatter() {
     formatDateRange,
     formatDateTooltip,
     formatRelativeTime,
+    formatCoarseRelative,
+    formatAdaptiveDate,
     formatLicenseDate,
     isValidDateRange,
     emptyDate,
diff --git a/src/Frontend/src/composables/timestampZone.spec.ts b/src/Frontend/src/composables/timestampZone.spec.ts
new file mode 100644
index 000000000..9240956cd
--- /dev/null
+++ b/src/Frontend/src/composables/timestampZone.spec.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { nextTick } from "vue";
+import { useTimestampZone } from "@/composables/timestampZone";
+
+describe("FEATURE: Local/UTC timestamp zone preference", () => {
+  afterEach(() => {
+    useTimestampZone().zone.value = "local";
+    localStorage.clear();
+  });
+
+  test("EXAMPLE: Toggling flips between local and UTC", () => {
+    const { zone, toggle } = useTimestampZone();
+
+    expect(zone.value).toBe("local");
+    toggle();
+    expect(zone.value).toBe("utc");
+    toggle();
+    expect(zone.value).toBe("local");
+  });
+
+  test("EXAMPLE: Every consumer sees the same choice", () => {
+    const first = useTimestampZone();
+    const second = useTimestampZone();
+
+    first.toggle();
+
+    expect(second.zone.value).toBe("utc");
+  });
+
+  test("EXAMPLE: The choice is persisted in this browser", async () => {
+    const { toggle } = useTimestampZone();
+
+    toggle();
+    await nextTick();
+
+    expect(localStorage.getItem("timestampZone")).toBe("utc");
+  });
+});
diff --git a/src/Frontend/src/composables/timestampZone.ts b/src/Frontend/src/composables/timestampZone.ts
new file mode 100644
index 000000000..7961eb7b1
--- /dev/null
+++ b/src/Frontend/src/composables/timestampZone.ts
@@ -0,0 +1,33 @@
+import { ref, watch } from "vue";
+
+export type TimestampZone = "local" | "utc";
+
+const STORAGE_KEY = "timestampZone";
+
+function load(): TimestampZone {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "utc" ? "utc" : "local";
+  } catch {
+    return "local";
+  }
+}
+
+// Module-level so every timestamp on screen flips together, and the choice
+// survives navigation; persisted per browser
+const zone = ref<TimestampZone>(load());
+
+watch(zone, (value) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, value);
+  } catch {
+    // storage unavailable: the preference just doesn't persist
+  }
+});
+
+export function useTimestampZone() {
+  function toggle() {
+    zone.value = zone.value === "local" ? "utc" : "local";
+  }
+
+  return { zone, toggle };
+}
diff --git a/src/Frontend/src/stores/AuditStore.spec.ts b/src/Frontend/src/stores/AuditStore.spec.ts
index dad1797a7..07d809872 100644
--- a/src/Frontend/src/stores/AuditStore.spec.ts
+++ b/src/Frontend/src/stores/AuditStore.spec.ts
@@ -174,6 +174,17 @@ describe("AuditStore refresh", () => {
     expect(store.queryDurationMs).toBeNull();
   });
 
+  test("clearResults forgets when the results were fetched", async () => {
+    const store = useAuditStore();
+    fetchTypedFromServiceControl.mockResolvedValueOnce([responseWithTotalCount(1), [message]]);
+    await store.refresh();
+    expect(store.queryCompletedAt).not.toBeNull();
+
+    store.clearResults();
+
+    expect(store.queryCompletedAt).toBeNull();
+  });
+
   test("a superseded query is not reported as a failure", async () => {
     const store = useAuditStore();
 
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index b2aad3255..2a32a2cba 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -38,6 +38,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   // of the query that produced the current results
   const queryStartedAt = ref<number | null>(null);
   const queryDurationMs = ref<number | null>(null);
+  const queryCompletedAt = ref<string | null>(null);
   const searchHistory = ref(loadSearchHistory());
   let activeQuery: AbortController | null = null;
 
@@ -90,6 +91,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
       messages.value = data;
       queryFailed.value = false;
       queryDurationMs.value = Math.round(performance.now() - started);
+      queryCompletedAt.value = new Date().toISOString();
     } catch {
       if (thisQuery.signal.aborted) {
         // Superseded by a newer query, or the view was left
@@ -131,6 +133,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     totalCount.value = 0;
     queryFailed.value = false;
     queryDurationMs.value = null;
+    queryCompletedAt.value = null;
   }
 
   return {
@@ -150,6 +153,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     queryFailed,
     queryStartedAt,
     queryDurationMs,
+    queryCompletedAt,
     searchHistory,
     clearSearchHistory: clearHistory,
   };