diff --git a/ts/components/PlanningColumnDetail.vue b/ts/components/PlanningColumnDetail.vue
index fd0064f5..501e408b 100644
--- a/ts/components/PlanningColumnDetail.vue
+++ b/ts/components/PlanningColumnDetail.vue
@@ -66,7 +66,6 @@ import MapMultipoint from "@/components/MapMultipoint.vue";
 import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
 import PlanningColumnDetailEntry from "@/components/PlanningColumnDetailEntry.vue";
 import TimeRelative from "@/components/TimeRelative.vue";
-import { shortAddress } from "@/format";
 import { useSessionStore } from "@/store/session";
 import { MapClickEvent, Marker } from "@/types";
 import type { Location, Signal } from "@/type/api";
diff --git a/ts/components/PlanningColumnDetailEntry.vue b/ts/components/PlanningColumnDetailEntry.vue
index c2e479bb..ea8faaaf 100644
--- a/ts/components/PlanningColumnDetailEntry.vue
+++ b/ts/components/PlanningColumnDetailEntry.vue
@@ -1,6 +1,6 @@
 <template>
 	<TimeRelative :time="signal.created"></TimeRelative>
-	<p>{{ shortAddress(signal.address) }}</p>
+	<p>{{ formatAddressShort(signal.address) }}</p>
 	<div v-if="signal.type == 'flyover pool' && signal.pool">
 		<FlyoverPoolCard :location="signal.location" :markers="[]" />
 	</div>
@@ -19,7 +19,7 @@
 import FlyoverPoolCard from "@/components/FlyoverPoolCard.vue";
 import PublicreportCard from "@/components/PublicreportCard.vue";
 import TimeRelative from "@/components/TimeRelative.vue";
-import { shortAddress } from "@/format";
+import { formatAddressShort } from "@/format";
 import { Signal } from "@/type/api";
 interface Props {
 	signal: Signal;
diff --git a/ts/components/PlanningColumnListEntry.vue b/ts/components/PlanningColumnListEntry.vue
index f92545c5..a4a840ed 100644
--- a/ts/components/PlanningColumnListEntry.vue
+++ b/ts/components/PlanningColumnListEntry.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { shortAddress } from "@/format";
+import { formatAddressShort } from "@/format";
 import { Signal } from "@/type/api";
 
 interface Props {
@@ -42,7 +42,7 @@ function icon(signal: Signal): string {
 }
 function location(signal: Signal): string {
 	if (signal.address != null) {
-		return shortAddress(signal.address);
+		return formatAddressShort(signal.address);
 	} else {
 		return `${signal.location.latitude}, ${signal.location.longitude}`;
 	}
diff --git a/ts/format.ts b/ts/format.ts
index e183ea2e..f26df465 100644
--- a/ts/format.ts
+++ b/ts/format.ts
@@ -9,6 +9,10 @@ export function formatAddress(address?: Address): string {
 	}
 	return `${address.number.trim()} ${address.street.trim()}, ${address.locality}`;
 }
+export function formatAddressShort(a: Address | undefined): string {
+	if (!a) return "unknown";
+	return `${a.number} ${a.street}, ${a.locality}`;
+}
 export function formatBigNumber(n: number): string {
 	// Convert the number to a string
 	const numStr = n.toString();
@@ -102,7 +106,3 @@ export function formatTimeRelative(t: Date): string {
 		}
 	}
 }
-export function shortAddress(a: Address | undefined): string {
-	if (!a) return "unknown";
-	return `${a.number} ${a.street}, ${a.locality}`;
-}
diff --git a/ts/store/mailer.ts b/ts/store/mailer.ts
index 09c10c99..79eff940 100644
--- a/ts/store/mailer.ts
+++ b/ts/store/mailer.ts
@@ -34,7 +34,8 @@ export const useStoreMailer = defineStore("publicreport", () => {
 		const params = new URLSearchParams();
 		params.append("sort", "-created");
 		const url = `${session.urls.api.mailer}?${params}`;
-		const mailers = (await apiClient.JSONGet(url)) as Mailer[];
+		const mailer_dtos = (await apiClient.JSONGet(url)) as MailerDTO[];
+		const mailers = mailer_dtos.map((m: MailerDTO) => Mailer.fromJSON(m));
 		_all.value = mailers;
 		for (const m of mailers) {
 			_byID.value.set(m.id, m);
diff --git a/ts/type/api.ts b/ts/type/api.ts
index 49edbcbb..d0a49e9f 100644
--- a/ts/type/api.ts
+++ b/ts/type/api.ts
@@ -659,7 +659,7 @@ export interface User {
 	uri: string;
 	username: string;
 }
-type MailerStatus = "created" | "printed" | "mailed" | "completed";
+export type MailerStatus = "created" | "printed" | "mailed" | "completed";
 export interface MailerDTO {
 	address: Address;
 	compliance_report_request_id?: string;
@@ -699,6 +699,9 @@ export class Mailer {
 		this.status = options.status;
 		this.uri = options.uri;
 	}
+	pdfUrl(): string {
+		return `/mailer/mode-3/${this.compliance_report_request_id}/preview`;
+	}
 	static fromJSON(json: MailerDTO): Mailer {
 		return new Mailer({
 			...json,
diff --git a/ts/view/review/Mailer.vue b/ts/view/review/Mailer.vue
index c8033535..7e294a58 100644
--- a/ts/view/review/Mailer.vue
+++ b/ts/view/review/Mailer.vue
@@ -34,7 +34,7 @@
 								</thead>
 								<tbody>
 									<tr v-for="mailer in mailers" :key="mailer.id">
-										<td>{{ formatDate(mailer.createdAt) }}</td>
+										<td>{{ formatDate(mailer.created) }}</td>
 										<td>
 											<span
 												class="badge"
@@ -44,13 +44,18 @@
 											</span>
 										</td>
 										<td>
-											<a :href="`/sites/${mailer.siteId}`">
-												{{ mailer.siteAddress }}
-											</a>
+											<RouterLink
+												:to="{
+													name: 'Site Review',
+													query: { site: mailer.site_id },
+												}"
+											>
+												{{ formatAddressShort(mailer.address) }}
+											</RouterLink>
 										</td>
 										<td>
 											<a
-												:href="mailer.pdfUrl"
+												:href="mailer.pdfUrl()"
 												target="_blank"
 												class="btn btn-sm btn-outline-primary"
 											>
@@ -63,7 +68,7 @@
 						</div>
 
 						<div
-							v-if="mailers.length === 0"
+							v-if="mailers && mailers.length === 0"
 							class="text-center py-5 text-muted"
 						>
 							<p>No mailers found</p>
@@ -76,74 +81,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
+import { computedAsync } from "@vueuse/core";
 
+import { formatDate, formatAddressShort } from "@/format";
 import { useStoreMailer } from "@/store/mailer";
-
-type MailerStatus = "created" | "printed" | "mailed" | "completed";
-
-interface Mailer {
-	id: string;
-	createdAt: Date;
-	status: MailerStatus;
-	pdfUrl: string;
-	siteId: string;
-	siteAddress: string;
-}
-
-// Mock data
-const mailers = ref<Mailer[]>([
-	{
-		id: "1",
-		createdAt: new Date("2024-01-15T10:30:00"),
-		status: "completed",
-		pdfUrl: "/pdfs/mailer-1.pdf",
-		siteId: "101",
-		siteAddress: "123 Main St, Springfield, IL 62701",
-	},
-	{
-		id: "2",
-		createdAt: new Date("2024-01-16T14:20:00"),
-		status: "mailed",
-		pdfUrl: "/pdfs/mailer-2.pdf",
-		siteId: "102",
-		siteAddress: "456 Oak Ave, Chicago, IL 60601",
-	},
-	{
-		id: "3",
-		createdAt: new Date("2024-01-17T09:15:00"),
-		status: "printed",
-		pdfUrl: "/pdfs/mailer-3.pdf",
-		siteId: "103",
-		siteAddress: "789 Pine Rd, Naperville, IL 60540",
-	},
-	{
-		id: "4",
-		createdAt: new Date("2024-01-18T11:45:00"),
-		status: "created",
-		pdfUrl: "/pdfs/mailer-4.pdf",
-		siteId: "104",
-		siteAddress: "321 Elm St, Peoria, IL 61602",
-	},
-	{
-		id: "5",
-		createdAt: new Date("2024-01-18T16:00:00"),
-		status: "mailed",
-		pdfUrl: "/pdfs/mailer-5.pdf",
-		siteId: "105",
-		siteAddress: "654 Maple Dr, Rockford, IL 61101",
-	},
-]);
-
-const formatDate = (date: Date): string => {
-	return new Intl.DateTimeFormat("en-US", {
-		year: "numeric",
-		month: "short",
-		day: "numeric",
-		hour: "2-digit",
-		minute: "2-digit",
-	}).format(date);
-};
+import { Mailer, MailerStatus } from "@/type/api";
 
 const formatStatus = (status: MailerStatus): string => {
 	return status.charAt(0).toUpperCase() + status.slice(1);
@@ -159,7 +102,7 @@ const getStatusBadgeClass = (status: MailerStatus): string => {
 	return classes[status];
 };
 const storeMailer = useStoreMailer();
-onMounted(() => {
-	storeMailer.list();
+const mailers = computedAsync(async (): Promise<Mailer[]> => {
+	return await storeMailer.list();
 });
 </script>