diff --git a/html/template/rmo/district-compliance.html b/html/template/rmo/district-compliance.html
index 462b53e4..a2d8a084 100644
--- a/html/template/rmo/district-compliance.html
+++ b/html/template/rmo/district-compliance.html
@@ -2,80 +2,6 @@
 
 {{ define "title" }}Compliance Request{{ end }}
 {{ define "extraheader" }}
-	<style>
-		body {
-			background-color: #f8f9fa;
-			min-height: 100vh;
-			display: flex;
-			flex-direction: column;
-		}
-
-		body > .container-fluid {
-			flex: 1;
-		}
-
-		.progress-bar {
-			background-color: #0d6efd;
-			transition: width 0.3s ease;
-		}
-	</style>
 {{ end }}
 {{ define "content" }}
-	<div class="container-fluid px-3 py-3">
-		<!-- Header -->
-		<header class="text-center mb-4 pb-3 border-bottom">
-			<div class="d-flex align-items-center justify-content-center mb-2">
-				<img
-					src="{{ .District.URLLogo }}"
-					alt="{{ .District.Name }} logo"
-					class="me-2"
-					style="height: 40px; width: auto;"
-				/>
-				<h1 class="h5 mb-0">{{ .District.Name }}</h1>
-			</div>
-			<div class="text-muted small">
-				<i class="bi bi-telephone"></i> {{ .District.OfficePhone }}
-			</div>
-		</header>
-
-		<!-- Progress Bar -->
-		<div class="mb-4">
-			<div class="d-flex justify-content-between align-items-center mb-2">
-				<span class="small text-muted">Step 1 of 8</span>
-			</div>
-			<div class="progress" style="height: 8px;">
-				<div
-					class="progress-bar"
-					role="progressbar"
-					style="width: 12%;"
-					aria-valuenow="12"
-					aria-valuemin="0"
-					aria-valuemax="100"
-				></div>
-			</div>
-		</div>
-
-		<!-- Main Content -->
-		<main>
-			<h2 class="h4 mb-3">Action requested for this property</h2>
-
-			<div class="alert alert-warning" role="alert">
-				<p class="mb-2">
-					The {{ .District.Name }} has identified a possible mosquito breeding
-					source at this property during a recent inspection.
-				</p>
-				<p class="mb-0">
-					Please confirm the property address and provide any photos, access
-					details, and contact information to help us review and resolve this
-					issue quickly.
-				</p>
-			</div>
-
-			<div class="d-grid mt-4">
-				<a class="btn btn-primary btn-lg" href="compliance/address"
-					>Get Started</a
-				>
-			</div>
-		</main>
-	</div>
 {{ end }}
diff --git a/ts/components/HeaderDistrict.vue b/ts/components/HeaderDistrict.vue
index 4f52268b..bd0dd7ca 100644
--- a/ts/components/HeaderDistrict.vue
+++ b/ts/components/HeaderDistrict.vue
@@ -31,7 +31,7 @@
 	</header>
 </template>
 <script setup lang="ts">
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 interface Props {
 	district?: District;
 }
diff --git a/ts/rmo/App.vue b/ts/rmo/App.vue
index 6338b4c3..9973d486 100644
--- a/ts/rmo/App.vue
+++ b/ts/rmo/App.vue
@@ -9,7 +9,7 @@ import { onMounted, ref } from "vue";
 import { useHead } from "@vueuse/head";
 import { router } from "@/rmo/router";
 import { useDistrictStore } from "@/rmo/store/district";
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 
 const district = useDistrictStore();
 const count = ref<number>(0);
diff --git a/ts/rmo/content/compliance/Intro.vue b/ts/rmo/content/compliance/Intro.vue
new file mode 100644
index 00000000..28e4da02
--- /dev/null
+++ b/ts/rmo/content/compliance/Intro.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="container-fluid px-3 py-3">
+		<HeaderCompliance :district="district" />
+		<!-- Progress Bar -->
+		<div class="mb-4">
+			<div class="d-flex justify-content-between align-items-center mb-2">
+				<span class="small text-muted">Step 1 of 8</span>
+			</div>
+			<div class="progress" style="height: 8px">
+				<div
+					class="progress-bar"
+					role="progressbar"
+					style="width: 12%"
+					aria-valuenow="12"
+					aria-valuemin="0"
+					aria-valuemax="100"
+				></div>
+			</div>
+		</div>
+
+		<!-- Main Content -->
+		<main>
+			<h2 class="h4 mb-3">Action requested for this property</h2>
+
+			<div class="alert alert-warning" role="alert">
+				<p class="mb-2">
+					The {{ district.name }} has identified a possible mosquito breeding
+					source at this property during a recent inspection.
+				</p>
+				<p class="mb-0">
+					Please confirm the property address and provide any photos, access
+					details, and contact information to help us review and resolve this
+					issue quickly.
+				</p>
+			</div>
+
+			<div class="d-grid mt-4">
+				<RouterLink class="btn btn-primary btn-lg" to="./address">
+					Get Started</RouterLink
+				>
+			</div>
+		</main>
+	</div>
+</template>
+<script setup lang="ts">
+import type { District } from "@/type/api";
+import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
+interface Props {
+	district: District;
+}
+const props = defineProps<Props>();
+</script>
diff --git a/ts/rmo/router.ts b/ts/rmo/router.ts
index 85cf4b80..fd7f194f 100644
--- a/ts/rmo/router.ts
+++ b/ts/rmo/router.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import type { RouteRecordRaw } from "vue-router";
+import Compliance from "@/rmo/view/Compliance.vue";
 import HomeBase from "@/rmo/view/Home.vue";
 import HomeDistrict from "@/rmo/view/district/Home.vue";
 import NuisanceBase from "@/rmo/view/Nuisance.vue";
@@ -25,6 +26,12 @@ const routes: RouteRecordRaw[] = [
 		component: HomeDistrict,
 		props: true,
 	},
+	{
+		path: "/district/:slug/compliance",
+		name: "Compliance",
+		component: Compliance,
+		props: true,
+	},
 	{
 		path: "/district/:slug/nuisance",
 		name: "NuisanceDistrict",
diff --git a/ts/rmo/store/district.ts b/ts/rmo/store/district.ts
index 27fa427c..5f34719c 100644
--- a/ts/rmo/store/district.ts
+++ b/ts/rmo/store/district.ts
@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import { District } from "@/rmo/type";
+import { District } from "@/type/api";
 
 export const useDistrictStore = defineStore("district", () => {
 	const districts = ref<District[] | null>(null);
diff --git a/ts/rmo/view/Compliance.vue b/ts/rmo/view/Compliance.vue
new file mode 100644
index 00000000..2281eddf
--- /dev/null
+++ b/ts/rmo/view/Compliance.vue
@@ -0,0 +1,45 @@
+<style scoped>
+body {
+	background-color: #f8f9fa;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+body > .container-fluid {
+	flex: 1;
+}
+
+.progress-bar {
+	background-color: #0d6efd;
+	transition: width 0.3s ease;
+}
+</style>
+<template>
+	<template v-if="district">
+		<Intro :district="district" />
+	</template>
+	<template v-else>
+		<p>loading {{ slug }}...</p>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { computedAsync } from "@vueuse/core";
+
+import { useDistrictStore } from "@/rmo/store/district";
+import Intro from "@/rmo/content/compliance/Intro.vue";
+import type { District } from "@/type/api";
+interface Props {
+	slug: string;
+}
+
+const districtStore = useDistrictStore();
+
+const props = defineProps<Props>();
+const district = computedAsync(async (): Promise<District | undefined> => {
+	const districts = await districtStore.get();
+	return districts.find((district: District) => district.slug == props.slug);
+});
+</script>
diff --git a/ts/rmo/view/district/Home.vue b/ts/rmo/view/district/Home.vue
index 99709285..5ee10846 100644
--- a/ts/rmo/view/district/Home.vue
+++ b/ts/rmo/view/district/Home.vue
@@ -45,7 +45,7 @@
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 import Home from "@/rmo/content/Home.vue";
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 import { useDistrictStore } from "@/rmo/store/district";
 import HeaderDistrict from "@/components/HeaderDistrict.vue";
 
diff --git a/ts/rmo/view/district/Nuisance.vue b/ts/rmo/view/district/Nuisance.vue
index f1fa8a52..176d1af7 100644
--- a/ts/rmo/view/district/Nuisance.vue
+++ b/ts/rmo/view/district/Nuisance.vue
@@ -12,7 +12,7 @@
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 import Nuisance from "@/rmo/content/Nuisance.vue";
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 import { useDistrictStore } from "@/rmo/store/district";
 import HeaderDistrict from "@/components/HeaderDistrict.vue";
 
diff --git a/ts/rmo/view/district/Status.vue b/ts/rmo/view/district/Status.vue
index c972e81a..f9dc215b 100644
--- a/ts/rmo/view/district/Status.vue
+++ b/ts/rmo/view/district/Status.vue
@@ -12,7 +12,7 @@
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 import Status from "@/rmo/content/Status.vue";
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 import { useDistrictStore } from "@/rmo/store/district";
 import HeaderDistrict from "@/components/HeaderDistrict.vue";
 
diff --git a/ts/rmo/view/district/Water.vue b/ts/rmo/view/district/Water.vue
index 4cf72227..6e368fd3 100644
--- a/ts/rmo/view/district/Water.vue
+++ b/ts/rmo/view/district/Water.vue
@@ -12,7 +12,7 @@
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 import Water from "@/rmo/content/Water.vue";
-import type { District } from "@/rmo/type";
+import type { District } from "@/type/api";
 import { useDistrictStore } from "@/rmo/store/district";
 import HeaderDistrict from "@/components/HeaderDistrict.vue";
 
diff --git a/ts/type/api.ts b/ts/type/api.ts
index 66099dc5..86bfe0bb 100644
--- a/ts/type/api.ts
+++ b/ts/type/api.ts
@@ -9,6 +9,12 @@ export interface Address {
 	street: string;
 	unit: string;
 }
+export interface District {
+	name: string;
+	phone_office: string;
+	slug: string;
+	url_logo: string;
+}
 export interface Location {
 	latitude: number;
 	longitude: number;