diff --git a/ts/components/CommunicationColumnList.vue b/ts/components/CommunicationColumnList.vue
index 442b859d..35ee98cc 100644
--- a/ts/components/CommunicationColumnList.vue
+++ b/ts/components/CommunicationColumnList.vue
@@ -72,60 +72,7 @@
 					}"
 					@click="handleClick(comm.id)"
 				>
-					<!-- First row: icon, type badge, and time -->
-					<div class="d-flex justify-content-between align-items-center mb-2">
-						<div class="d-flex align-items-center">
-							<i
-								v-if="comm.type === 'publicreport.nuisance'"
-								class="bi bi-mosquito icon-nuisance fs-4 me-2"
-							>
-							</i>
-							<i
-								v-if="comm.type === 'publicreport.water'"
-								class="bi bi-droplet-fill icon-standing-water fs-4 me-2"
-							></i>
-							<span
-								class="badge"
-								:class="
-									comm.type === 'publicreport.nuisance'
-										? 'bg-danger'
-										: 'bg-info'
-								"
-							>
-								{{
-									comm.type === "publicreport.nuisance"
-										? "Nuisance"
-										: "Standing Water"
-								}}
-							</span>
-						</div>
-						<small>
-							<TimeRelative :time="comm.created" />
-						</small>
-					</div>
-
-					<!-- Details section: full width -->
-					<div>
-						<div>
-							<i class="bi bi-geo-alt text-muted"></i>
-							<span class="fw-medium">{{
-								comm.public_report?.address.postal_code
-							}}</span>
-						</div>
-						<small>{{ formatAddress(comm.public_report?.address) }}</small>
-						<div
-							v-if="
-								comm.public_report?.images &&
-								comm.public_report?.images.length > 0
-							"
-							class="mt-1"
-						>
-							<small class="text-muted">
-								<i class="bi bi-camera"></i>
-								{{ comm.public_report.images.length }} photo(s)
-							</small>
-						</div>
-					</div>
+					<ListCardPublicReport :comm="comm" />
 				</div>
 			</div>
 		</div>
@@ -142,8 +89,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import TimeRelative from "@/components/TimeRelative.vue";
-import { formatAddress } from "@/format";
+import ListCardPublicReport from "@/components/ListCardPublicReport.vue";
 import { Communication, LogEntry, PublicReport } from "@/type/api";
 
 interface Props {
diff --git a/ts/components/ListCardPublicReport.vue b/ts/components/ListCardPublicReport.vue
new file mode 100644
index 00000000..eecea656
--- /dev/null
+++ b/ts/components/ListCardPublicReport.vue
@@ -0,0 +1,77 @@
+<template>
+	<!-- First row: icon, type badge, and time -->
+	<div class="d-flex justify-content-between align-items-center mb-2">
+		<div class="d-flex align-items-center">
+			<i class="bi fs-4 me-2" :class="iconForType()"></i>
+			<span class="badge" :class="colorForType()">
+				{{ titleForType() }}
+			</span>
+		</div>
+		<small>
+			<TimeRelative :time="comm.created" />
+		</small>
+	</div>
+
+	<!-- Details section: full width -->
+	<div>
+		<div>
+			<i class="bi bi-geo-alt text-muted"></i>
+			<span class="fw-medium">{{
+				comm.public_report?.address.postal_code
+			}}</span>
+		</div>
+		<small>{{ formatAddress(comm.public_report?.address) }}</small>
+		<div
+			v-if="comm.public_report?.images && comm.public_report?.images.length > 0"
+			class="mt-1"
+		>
+			<small class="text-muted">
+				<i class="bi bi-camera"></i>
+				{{ comm.public_report.images.length }} photo(s)
+			</small>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import TimeRelative from "@/components/TimeRelative.vue";
+import { formatAddress } from "@/format";
+import { Communication } from "@/type/api";
+interface Props {
+	comm: Communication;
+}
+const props = defineProps<Props>();
+function colorForType(): string {
+	if (props.comm.type == "publicreport.compliance") {
+		return "bg-secondary";
+	} else if (props.comm.type == "publicreport.nuisance") {
+		return "bg-danger";
+	} else if (props.comm.type == "publicreport.water") {
+		return "bg-info";
+	} else {
+		return "";
+	}
+}
+function iconForType(): string {
+	if (props.comm.type == "publicreport.compliance") {
+		return "bi-postcard";
+	} else if (props.comm.type == "publicreport.nuisance") {
+		return "bi-mosquito";
+	} else if (props.comm.type == "publicreport.water") {
+		return "bi-droplet-fill";
+	} else {
+		return "";
+	}
+}
+function titleForType(): string {
+	if (props.comm.type == "publicreport.compliance") {
+		return "Compliance";
+	} else if (props.comm.type == "publicreport.nuisance") {
+		return "Nuisance";
+	} else if (props.comm.type == "publicreport.water") {
+		return "Standing Water";
+	} else {
+		return "Unknown";
+	}
+}
+</script>