diff --git a/ts/rmo/content/compliance/Complete.vue b/ts/rmo/content/compliance/Complete.vue
index 53647e19..d15be528 100644
--- a/ts/rmo/content/compliance/Complete.vue
+++ b/ts/rmo/content/compliance/Complete.vue
@@ -237,52 +237,45 @@
 		<!-- Reference Number -->
 		<div class="reference-number">
 			<small>
-				Reference number: <strong>{{ referenceNumber }}</strong>
+				Reference number: <strong>{{ modelValue.public_id }}</strong>
 			</small>
 		</div>
-
-		<!-- Action Buttons -->
-		<div class="action-buttons mt-4">
-			<div class="d-grid gap-2">
-				<template v-if="hasCompleteResponse">
-					<button class="btn btn-outline-primary" @click="changeResponse()">
-						<i class="bi bi-dash"></i>Remove useful and complete
-					</button>
-				</template>
-				<template v-else-if="hasUsefulInfo">
-					<button class="btn btn-outline-primary" @click="changeResponse()">
-						<i class="bi bi-plus"></i>Add complete response
-					</button>
-				</template>
-				<template v-else>
-					<button class="btn btn-outline-primary" @click="changeResponse()">
-						<i class="bi bi-plus"></i>Add useful response
-					</button>
-				</template>
-			</div>
-		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import type { District } from "@/type/api";
+import { computed, ref } from "vue";
+import {
+	type District,
+	PermissionType,
+	PublicReportCompliance,
+} from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 interface Props {
+	modelValue: PublicReportCompliance;
 	district: District;
 }
 const props = defineProps<Props>();
-const referenceNumber = "abc-123";
-const hasCompleteResponse = ref<boolean>(false);
-const hasUsefulInfo = ref<boolean>(false);
-function changeResponse() {
-	if (hasCompleteResponse.value && hasUsefulInfo.value) {
-		hasCompleteResponse.value = false;
-		hasUsefulInfo.value = false;
-	} else if (hasUsefulInfo.value) {
-		hasCompleteResponse.value = true;
-	} else {
-		hasUsefulInfo.value = true;
+const hasCompleteResponse = computed(() => {
+	const r = props.modelValue;
+	if (
+		r.images.length > 0 ||
+		r.permission_type == PermissionType.GRANTED ||
+		r.reporter.name ||
+		r.reporter.phone ||
+		r.reporter.has_phone ||
+		r.reporter.email ||
+		r.reporter.has_email
+	) {
+		return true;
 	}
-}
+	return false;
+});
+const hasUsefulInfo = computed(() => {
+	const r = props.modelValue;
+	if (r.images.length > 0 || r.permission_type == PermissionType.GRANTED) {
+		return true;
+	}
+	return false;
+});
 </script>
diff --git a/ts/type/api.ts b/ts/type/api.ts
index 6c6b4ffa..b0277076 100644
--- a/ts/type/api.ts
+++ b/ts/type/api.ts
@@ -171,6 +171,7 @@ export interface PublicReportDTO {
 	location: Location;
 	log: LogEntryDTO[];
 	//nuisance?: Nuisance;
+	public_id: string;
 	reporter: Contact;
 	status: string;
 	type: string;
@@ -185,6 +186,7 @@ export interface PublicReportOptions {
 	images: Image[];
 	location: Location;
 	log: LogEntry[];
+	public_id: string;
 	reporter: Contact;
 	status: string;
 	type: string;
@@ -197,6 +199,7 @@ export class PublicReport {
 	id: string;
 	images: Image[];
 	log: LogEntry[];
+	public_id: string;
 	reporter: Contact;
 	status: string;
 	type: string;
@@ -209,6 +212,7 @@ export class PublicReport {
 		this.id = options?.id ?? "";
 		this.images = options?.images ?? [];
 		this.log = options?.log ?? [];
+		this.public_id = options?.public_id ?? "";
 		this.reporter = options?.reporter ?? new Contact();
 		this.status = options?.status ?? "";
 		this.type = options?.type ?? "";
@@ -224,6 +228,7 @@ export class PublicReport {
 			images: json.images,
 			location: json.location,
 			log: json.log.map((l: LogEntryDTO) => LogEntry.fromJSON(l)),
+			public_id: json.public_id,
 			reporter: json.reporter,
 			status: json.status,
 			type: json.type,