From 51fe851c5a659a095012018088f9de7802cc25ec Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 3 Apr 2026 18:50:23 +0000
Subject: [PATCH] Add district-styled pages for all 3 main RMO pages

---
 ts/components/HeaderDistrict.vue  |  45 +++
 ts/rmo/components/Header.vue      |   7 +
 ts/rmo/content/Home.vue           |  21 +-
 ts/rmo/content/Nuisance.vue       | 417 +++++++++++++++++++++++
 ts/rmo/content/Status.vue         | 116 +++++++
 ts/rmo/content/Water.vue          | 528 +++++++++++++++++++++++++++++
 ts/rmo/router.ts                  |  28 +-
 ts/rmo/view/Home.vue              |   7 +-
 ts/rmo/view/Nuisance.vue          | 411 +----------------------
 ts/rmo/view/Status.vue            | 124 +------
 ts/rmo/view/Water.vue             | 529 +-----------------------------
 ts/rmo/view/district/Home.vue     |  37 +--
 ts/rmo/view/district/Nuisance.vue |  29 ++
 ts/rmo/view/district/Status.vue   |  29 ++
 ts/rmo/view/district/Water.vue    |  29 ++
 15 files changed, 1268 insertions(+), 1089 deletions(-)
 create mode 100644 ts/components/HeaderDistrict.vue
 create mode 100644 ts/rmo/components/Header.vue
 create mode 100644 ts/rmo/content/Nuisance.vue
 create mode 100644 ts/rmo/content/Status.vue
 create mode 100644 ts/rmo/content/Water.vue
 create mode 100644 ts/rmo/view/district/Nuisance.vue
 create mode 100644 ts/rmo/view/district/Status.vue
 create mode 100644 ts/rmo/view/district/Water.vue

diff --git a/ts/components/HeaderDistrict.vue b/ts/components/HeaderDistrict.vue
new file mode 100644
index 00000000..99b02bca
--- /dev/null
+++ b/ts/components/HeaderDistrict.vue
@@ -0,0 +1,45 @@
+<style scoped>
+.district-logo {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	max-height: 88px;
+	width: auto;
+}
+</style>
+<template>
+	<template v-if="district">
+		<section class="py-5 bg-primary text-white">
+			<div class="container">
+				<div class="row justify-content-center">
+					<div class="col-lg-10">
+						<h2 class="text-center mb-4">Report a Mosquito Problem</h2>
+						<p class="lead text-center">
+							Submit a report to help reduce mosquito activity in your
+							neighborhood.
+						</p>
+						<p class="lead text-center">
+							Report Mosquitoes Online works with local mosquito control
+							agencies to receive public reports.
+						</p>
+						<p class="lead text-center">
+							For this area, mosquito control services are provided by
+						</p>
+						<h3 class="text-center">{{ district.name }}</h3>
+						<img class="district-logo" :src="district.url_logo" />
+					</div>
+				</div>
+			</div>
+		</section>
+	</template>
+	<template v-else>
+		<p>loading district...</p>
+	</template>
+</template>
+<script setup lang="ts">
+import type { District } from "@/rmo/type";
+interface Props {
+	district?: District;
+}
+const props = defineProps<Props>();
+</script>
diff --git a/ts/rmo/components/Header.vue b/ts/rmo/components/Header.vue
new file mode 100644
index 00000000..29fadfaa
--- /dev/null
+++ b/ts/rmo/components/Header.vue
@@ -0,0 +1,7 @@
+<template>
+	<section class="py-2 bg-primary text-white">
+		<div class="banner-container d-flex justify-content-center">
+			<img class="banner" src="/static/img/rmo/banner.jpg" />
+		</div>
+	</section>
+</template>
diff --git a/ts/rmo/content/Home.vue b/ts/rmo/content/Home.vue
index 6ef00eb9..14bace12 100644
--- a/ts/rmo/content/Home.vue
+++ b/ts/rmo/content/Home.vue
@@ -5,7 +5,6 @@
 }
 </style>
 <template>
-	<!-- Main Content -->
 	<main>
 		<slot name="header"></slot>
 
@@ -25,7 +24,7 @@
 									Report areas with high adult mosquito activity causing
 									discomfort or concern.
 								</p>
-								<RouterLink to="/nuisance" class="btn btn-primary mt-3"
+								<RouterLink :to="link('nuisance')" class="btn btn-primary mt-3"
 									>Report Problem</RouterLink
 								>
 							</div>
@@ -42,7 +41,7 @@
 									Report any water that has been sitting for several days, where
 									mosquitoes can live.
 								</p>
-								<RouterLink to="/water" class="btn btn-primary mt-3"
+								<RouterLink :to="link('water')" class="btn btn-primary mt-3"
 									>Report Source</RouterLink
 								>
 							</div>
@@ -59,7 +58,7 @@
 									Check on a previous request or view current mosquito activity
 									in your area.
 								</p>
-								<RouterLink to="/status" class="btn btn-primary mt-3"
+								<RouterLink :to="link('status')" class="btn btn-primary mt-3"
 									>Get Status</RouterLink
 								>
 							</div>
@@ -71,4 +70,16 @@
 	</main>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+	slug?: string;
+}
+const props = defineProps<Props>();
+const link = (path: string): string => {
+	if (props.slug) {
+		return `/district/${props.slug}/${path}`;
+	} else {
+		return path;
+	}
+};
+</script>
diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue
new file mode 100644
index 00000000..1ffcc961
--- /dev/null
+++ b/ts/rmo/content/Nuisance.vue
@@ -0,0 +1,417 @@
+<style scoped>
+.map-container {
+	background-color: #e9ecef;
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+	height: 500px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 20px;
+}
+#map {
+	width: 100%;
+	height: 100%;
+}
+</style>
+
+<template>
+	<main>
+		<slot name="header"></slot>
+		<div class="container">
+			<div class="row mb-4">
+				<div class="col-12">
+					<h2>Report Mosquito Nuisance</h2>
+					<p class="lead">Help us identify mosquito activity in your area</p>
+				</div>
+			</div>
+
+			<!-- Report Form -->
+			<form
+				id="mosquitoNuisanceForm"
+				action="/api/rmo/nuisance"
+				method="POST"
+				enctype="multipart/form-data"
+			>
+				<!-- Location Section -->
+				<div class="form-section">
+					<div class="section-heading">
+						<i class="bi bi-geo-alt"></i>
+						<h3>Nuisance Location Information</h3>
+					</div>
+					<div class="col-md-12">
+						<div class="alert alert-info" role="info">
+							<p class="mb-0">
+								You can select the location by address or by moving the marker
+								on the map.
+							</p>
+						</div>
+					</div>
+
+					<div class="col-md-6">
+						<div class="mb-3 position-relative">
+							<address-input
+								placeholder="Start typing an address (min 3 characters)"
+								api-key=""
+							>
+							</address-input>
+						</div>
+					</div>
+				</div>
+				<p class="small text-muted mb-2">
+					You can also click on the map to mark the location precisely
+				</p>
+				<div class="map-container">
+					<map-locator id="map"></map-locator>
+				</div>
+				<input type="hidden" id="map-zoom" name="map-zoom" />
+				<input type="hidden" id="address-country" name="address-country" />
+				<input type="hidden" id="address-locality" name="address-locality" />
+				<input type="hidden" id="address-number" name="address-number" />
+				<input
+					type="hidden"
+					id="address-postalcode"
+					name="address-postalcode"
+				/>
+				<input type="hidden" id="address-region" name="address-region" />
+				<input type="hidden" id="address-street" name="address-street" />
+				<input type="hidden" id="latitude" name="latitude" />
+				<input type="hidden" id="longitude" name="longitude" />
+				<input
+					type="hidden"
+					id="latlng-accuracy-type"
+					name="latlng-accuracy-type"
+				/>
+				<input
+					type="hidden"
+					id="latlng-accuracy-value"
+					name="latlng-accuracy-value"
+				/>
+
+				<!-- Mosquito Activity Section -->
+				<div class="form-section">
+					<div class="section-heading">
+						<i class="bi bi-mosquito-color"></i>
+						<h3>Mosquito Activity Information</h3>
+					</div>
+					<p class="mb-4">
+						The time when mosquitoes are active can help us identify the species
+						and likely breeding sources.
+					</p>
+
+					<!-- Time of Day -->
+					<div class="row mb-4">
+						<div class="col-12">
+							<label class="form-label"
+								>When do you typically notice mosquitoes? (Select all that
+								apply)</label
+							>
+							<div class="row">
+								<div class="col-6 col-md-3">
+									<input
+										type="checkbox"
+										class="btn-check"
+										id="earlyMorning"
+										name="tod-early"
+										autocomplete="off"
+									/>
+									<label
+										class="btn btn-outline-primary time-of-day-btn"
+										for="earlyMorning"
+									>
+										<span class="time-of-day-icon"
+											><i class="bi bi-sunrise"></i
+										></span>
+										<span class="time-label">Early Morning</span>
+										<small class="text-muted">5am-8am</small>
+									</label>
+								</div>
+								<div class="col-6 col-md-3">
+									<input
+										type="checkbox"
+										class="btn-check"
+										id="daytime"
+										name="tod-day"
+										autocomplete="off"
+									/>
+									<label
+										class="btn btn-outline-primary time-of-day-btn"
+										for="daytime"
+									>
+										<span class="time-of-day-icon"
+											><i class="bi bi-sun"></i
+										></span>
+										<span class="time-label">Daytime</span>
+										<small class="text-muted">8am-5pm</small>
+									</label>
+								</div>
+								<div class="col-6 col-md-3">
+									<input
+										type="checkbox"
+										class="btn-check"
+										id="evening"
+										name="tod-evening"
+										autocomplete="off"
+									/>
+									<label
+										class="btn btn-outline-primary time-of-day-btn"
+										for="evening"
+									>
+										<span class="time-of-day-icon"
+											><i class="bi bi-sunset"></i
+										></span>
+										<span class="time-label">Evening</span>
+										<small class="text-muted">5pm-9pm</small>
+									</label>
+								</div>
+								<div class="col-6 col-md-3">
+									<input
+										type="checkbox"
+										class="btn-check"
+										id="night"
+										name="tod-night"
+										autocomplete="off"
+									/>
+									<label
+										class="btn btn-outline-primary time-of-day-btn"
+										for="night"
+									>
+										<span class="time-of-day-icon"
+											><i class="bi bi-moon-stars"></i
+										></span>
+										<span class="time-label">Night</span>
+										<small class="text-muted">9pm-5am</small>
+									</label>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Duration -->
+					<div class="row mb-4">
+						<div class="col-md-6">
+							<label for="duration" class="form-label"
+								>How long have you been experiencing this mosquito
+								problem?</label
+							>
+							<select class="form-select" name="duration">
+								<option value="just-noticed">Just noticed recently</option>
+								<option value="few-days">A few days</option>
+								<option value="1-2-weeks">1-2 weeks</option>
+								<option value="2-4-weeks">2-4 weeks</option>
+								<option value="1-3-months">1-3 months</option>
+								<option value="seasonal">All season (recurring issue)</option>
+							</select>
+						</div>
+					</div>
+
+					<!-- Location -->
+					<div class="row">
+						<div class="col-md-12">
+							<label for="source-location" class="form-label"
+								>Where on your property do you notice the most mosquito
+								activity?</label
+							>
+							<select
+								class="form-select tall"
+								multiple="true"
+								name="source-location"
+							>
+								<option value="frontyard">Front yard</option>
+								<option value="backyard">Back yard</option>
+								<option value="garden">Garden</option>
+								<option value="pool-area">Pool area</option>
+								<option value="other">Other area</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<button
+					id="toggle-additional"
+					class="btn btn-warning"
+					type="button"
+					@click="toggleCollapse()"
+				>
+					Click here to answer a few more questions to better help us solve your
+					mosquito problem
+				</button>
+				<div v-show="!isCollapsed" class="collapse">
+					<!-- Potential Sources Section -->
+					<div class="form-section">
+						<div class="section-heading">
+							<i class="bi bi-search"></i>
+							<h3>Potential Mosquito Sources</h3>
+						</div>
+						<p class="mb-3">
+							Have you noticed any of these common mosquito breeding sources in
+							your area?
+						</p>
+
+						<div class="card card-highlight mb-4">
+							<div class="card-body">
+								<h5 class="card-title">Did you know?</h5>
+								<p class="card-text">
+									Mosquitoes can breed in as little as a bottle cap of water!
+									Eliminating standing water is the most effective way to reduce
+									mosquito populations.
+								</p>
+							</div>
+						</div>
+
+						<div class="row g-4 mb-4">
+							<!-- Source 1 -->
+							<div class="col-md-4">
+								<div class="card source-card">
+									<div class="card-body text-center">
+										<div class="source-icon">
+											<i class="bi bi-water"></i>
+										</div>
+										<h5 class="card-title">Stagnant Water</h5>
+										<p class="card-text">
+											Green pools, ponds, fountains, or birdbaths that aren't
+											maintained
+										</p>
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												name="source-stagnant"
+												id="sourceStagnantWater"
+											/>
+											<label class="form-check-label" for="sourceStagnantWater">
+												I've noticed this
+											</label>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<!-- Source 2 -->
+							<div class="col-md-4">
+								<div class="card source-card">
+									<div class="card-body text-center">
+										<div class="source-icon">
+											<i class="bi bi-droplet"></i>
+										</div>
+										<h5 class="card-title">Containers</h5>
+										<p class="card-text">
+											Buckets, planters, toys, tires, or any items that collect
+											rainwater
+										</p>
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												name="source-container"
+												id="sourceContainers"
+											/>
+											<label class="form-check-label" for="sourceContainers">
+												I've noticed this
+											</label>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<!-- Source 3 -->
+							<div class="col-md-4">
+								<div class="card source-card">
+									<div class="card-body text-center">
+										<div class="source-icon">
+											<i class="bi bi-house"></i>
+										</div>
+										<h5 class="card-title">Sprinklers & Gutters</h5>
+										<p class="card-text">
+											Clogged street gutters, yard drains, or AC units that
+											collect water
+										</p>
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												name="source-gutters"
+												id="sourceGutters"
+											/>
+											<label class="form-check-label" for="sourceGutters">
+												I've noticed this
+											</label>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="row">
+							<div class="col-md-12">
+								<label for="otherSources" class="form-label"
+									>Have you noticed any other potential mosquito breeding
+									sources?</label
+								>
+								<textarea
+									class="form-control"
+									id="otherSources"
+									name="source-description"
+									rows="2"
+									placeholder="Describe any other potential breeding sites you've noticed..."
+								></textarea>
+								<photo-upload />
+							</div>
+						</div>
+					</div>
+
+					<div class="form-section">
+						<div class="section-heading">
+							<i class="bi bi-card-text"></i>
+							<h3>Additional Information</h3>
+						</div>
+
+						<div class="row">
+							<div class="col-md-12">
+								<label for="additionalInfo" class="form-label"
+									>Is there anything else you'd like us to know?</label
+								>
+								<textarea
+									class="form-control"
+									id="additionalInfo"
+									maxlength="2048"
+									name="additional-info"
+									rows="4"
+									placeholder="Additional details about the mosquito issue..."
+								></textarea>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- Submit Section -->
+				<div class="submit-container">
+					<div class="row align-items-center">
+						<div class="col-md-8">
+							<p class="mb-0">
+								<strong>Thank you for reporting this mosquito issue.</strong>
+							</p>
+							<p class="mb-0 small text-muted">
+								After submission, you'll receive a confirmation with a report ID
+								and further information.
+							</p>
+						</div>
+						<div class="col-md-4 text-md-end mt-3 mt-md-0">
+							<button type="submit" class="btn btn-primary btn-lg">
+								Submit Report
+							</button>
+						</div>
+					</div>
+				</div>
+			</form>
+		</div>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isCollapsed = ref<boolean>(true);
+const toggleCollapse = () => {
+	isCollapsed.value = !isCollapsed.value;
+};
+</script>
diff --git a/ts/rmo/content/Status.vue b/ts/rmo/content/Status.vue
new file mode 100644
index 00000000..4d8c14e4
--- /dev/null
+++ b/ts/rmo/content/Status.vue
@@ -0,0 +1,116 @@
+<template>
+	<div class="container my-4">
+		<!-- Search Box -->
+		<div class="card search-box mb-4">
+			<div class="card-body">
+				<form class="row g-3 align-items-center" action="#" id="lookup-form">
+					<div class="col-md-9">
+						<address-or-report-input
+							name="address-or-report"
+							placeholder="Enter a report ID, address, neighborhood, or zip code"
+						></address-or-report-input>
+					</div>
+					<div class="col-md-3">
+						<span
+							data-bs-toggle="tooltip"
+							id="lookup-tooltip"
+							title="You can look up a report once you type in the full report ID. Start typing and I'll suggest complete IDs"
+						>
+							<button
+								type="submit"
+								class="btn btn-primary btn-lg w-100 disabled"
+								disabled
+								id="lookup"
+							>
+								Lookup Report by ID
+							</button>
+						</span>
+					</div>
+					<div class="col-12">
+						<div class="form-check custom-circle-checkbox">
+							<input
+								class="form-check-input"
+								type="checkbox"
+								id="checkboxNuisance"
+								data-color="danger"
+								checked
+							/>
+							<label class="form-check-label" for="checkboxNuisance"
+								>Mosquito Nuisance</label
+							>
+						</div>
+
+						<div class="form-check custom-circle-checkbox">
+							<input
+								class="form-check-input"
+								type="checkbox"
+								id="checkboxWater"
+								data-color="success"
+								checked
+							/>
+							<label class="form-check-label" for="checkboxWater"
+								>Standing Water</label
+							>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+
+		<!-- Map Section -->
+		<div class="card mb-4">
+			<div class="card-header bg-info text-white">
+				<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
+			</div>
+			<div class="card-body p-0">
+				<div class="map-container">
+					<map-multipoint
+						id="map"
+						xmax="-118.0"
+						ymax="37.0"
+						xmin="-119.0"
+						ymin="36.0"
+						tegola="{{ .URL.Tegola }}"
+						zoom="9"
+					></map-multipoint>
+				</div>
+			</div>
+		</div>
+
+		<!-- Results Section -->
+		<div class="card">
+			<div
+				class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
+			>
+				<h5 class="mb-0">
+					<i class="bi bi-geo-fill me-2"></i>Reports Near You
+				</h5>
+				<span class="badge bg-light text-dark" id="report-count"
+					>- Reports Found</span
+				>
+			</div>
+			<div class="card-body p-0">
+				<div class="table-responsive">
+					<table-report />
+				</div>
+			</div>
+			<!--
+		<div class="card-footer">
+			<nav aria-label="Page navigation">
+				<ul class="pagination justify-content-center mb-0">
+					<li class="page-item disabled">
+						<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+					</li>
+					<li class="page-item active"><a class="page-link" href="#">1</a></li>
+					<li class="page-item"><a class="page-link" href="#">2</a></li>
+					<li class="page-item"><a class="page-link" href="#">3</a></li>
+					<li class="page-item">
+						<a class="page-link" href="#">Next</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		-->
+		</div>
+	</div>
+</template>
diff --git a/ts/rmo/content/Water.vue b/ts/rmo/content/Water.vue
new file mode 100644
index 00000000..b2e56094
--- /dev/null
+++ b/ts/rmo/content/Water.vue
@@ -0,0 +1,528 @@
+<style scoped>
+.map-container {
+	background-color: #e9ecef;
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+	height: 500px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 20px;
+}
+#map {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<template>
+	<main class="py-5">
+		<slot name="header"></slot>
+		<div class="container">
+			<!-- Page Title -->
+			<div class="row mb-4">
+				<div class="col-12">
+					<h2>Report Standing Water</h2>
+					<p class="lead">
+						Help us locate and treat potential mosquito production sources in
+						your area
+					</p>
+				</div>
+			</div>
+
+			<!-- Report Form -->
+			<form
+				id="standingWater"
+				action="{{ .URL.WaterSubmit }}"
+				method="POST"
+				enctype="multipart/form-data"
+			>
+				<!-- Photo Upload Section -->
+				<div class="form-section">
+					<div class="section-heading">
+						<i class="bi bi-camera"></i>
+						<h3>Photos</h3>
+					</div>
+					<p class="mb-3">
+						Photos help us identify the severity of the issue and may contain
+						location data that can help us find the production source.
+					</p>
+					<div class="mb-4">
+						<photo-upload />
+					</div>
+				</div>
+
+				<!-- Additional Information Section -->
+				<div class="form-section">
+					<div class="section-heading">
+						<i class="bi bi-card-text"></i>
+						<h3>Additional Information</h3>
+					</div>
+					<p class="mb-3">
+						Please provide any other information that might help us address this
+						mosquito production source.
+					</p>
+
+					<div class="row">
+						<div class="col-md-12">
+							<label for="comments" class="form-label"
+								>Additional Details</label
+							>
+							<textarea
+								class="form-control"
+								id="comments"
+								maxlength="2048"
+								name="comments"
+								rows="4"
+								placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."
+							></textarea>
+						</div>
+					</div>
+				</div>
+
+				<!-- Location Section -->
+				<div class="form-section">
+					<div class="section-heading">
+						<i class="bi bi-geo-alt"></i>
+						<h3>Location</h3>
+					</div>
+					<p class="mb-3">
+						Please provide the location of the potential mosquito production
+						source. We may be able to extract this information from your photos
+						if they contain location data.
+					</p>
+					<div class="col-md-12">
+						<div class="alert alert-info" role="info">
+							<p class="mb-0">
+								You can select the location by address or by moving the marker
+								on the map.
+							</p>
+						</div>
+					</div>
+
+					<div class="row mb-3">
+						<!-- Hidden fields for location data -->
+						<input type="hidden" id="address-country" name="address-country" />
+						<input
+							type="hidden"
+							id="address-locality"
+							name="address-locality"
+						/>
+						<input type="hidden" id="address-number" name="address-number" />
+						<input
+							type="hidden"
+							id="address-postalcode"
+							name="address-postalcode"
+						/>
+						<input type="hidden" id="address-region" name="address-region" />
+						<input type="hidden" id="address-street" name="address-street" />
+						<input type="hidden" id="latitude" name="latitude" />
+						<input type="hidden" id="longitude" name="longitude" />
+						<input
+							type="hidden"
+							id="latlng-accuracy-type"
+							name="latlng-accuracy-type"
+						/>
+						<input
+							type="hidden"
+							id="latlng-accuracy-value"
+							name="latlng-accuracy-value"
+						/>
+						<div class="col-md-6">
+							<div class="mb-3 position-relative">
+								<address-input
+									placeholder="Start typing an address (min 3 characters)"
+								>
+								</address-input>
+							</div>
+						</div>
+					</div>
+
+					<p class="small text-muted mb-2">
+						You can also click on the map to mark the location precisely
+					</p>
+					<div class="map-container">
+						<map-locator id="map"></map-locator>
+					</div>
+					<input type="hidden" id="map-zoom" name="map-zoom" />
+				</div>
+
+				<button
+					id="toggle-additional"
+					class="btn btn-warning"
+					type="button"
+					@click="toggleCollapse()"
+				>
+					Click here to answer a few more questions to better help us solve your
+					mosquito problem
+				</button>
+				<div class="collapse" id="collapse-additional-fields">
+					<!-- Source Details Section -->
+					<div class="form-section">
+						<div class="section-heading">
+							<i class="bi bi-water"></i>
+							<h3>Source Details</h3>
+						</div>
+
+						<div class="row mb-4">
+							<div class="col-md-6">
+								<label for="duration" class="form-label"
+									>How long has this production source been present?</label
+								>
+								<select
+									class="form-select"
+									id="duration"
+									name="source-duration"
+								>
+									<option value="none">I don't know</option>
+									<option value="less-than-week">Less than a week</option>
+									<option value="1-2-weeks">1-2 weeks</option>
+									<option value="2-4-weeks">2-4 weeks</option>
+									<option value="1-3-months">1-3 months</option>
+									<option value="more-than-3-months">More than 3 months</option>
+								</select>
+							</div>
+
+							<div class="col-md-6">
+								<label class="form-label d-block"
+									>Have you observed any of the following?
+									<a
+										href="#"
+										data-bs-toggle="modal"
+										data-bs-target="#larvaeInfoModal"
+										><i class="bi bi-question-circle small ms-1"></i></a
+								></label>
+								<div class="form-check">
+									<input
+										class="form-check-input"
+										type="checkbox"
+										id="larvae"
+										name="has-larvae"
+									/>
+									<label class="form-check-label" for="larvae">
+										Larvae (wigglers) in water
+									</label>
+								</div>
+								<div class="form-check">
+									<input
+										class="form-check-input"
+										type="checkbox"
+										id="pupae"
+										name="has-pupae"
+									/>
+									<label class="form-check-label" for="pupae">
+										Pupae (tumblers) in water
+									</label>
+								</div>
+								<div class="form-check">
+									<input
+										class="form-check-input"
+										type="checkbox"
+										id="adult"
+										name="has-adult"
+									/>
+									<label class="form-check-label" for="adult">
+										Adult mosquitoes near the source
+									</label>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Access Information Section -->
+					<div class="form-section">
+						<div class="section-heading">
+							<i class="bi bi-unlock"></i>
+							<h3>Access Information</h3>
+						</div>
+						<p class="mb-3">
+							Please provide any details about how to access the mosquito
+							source. This helps our technicians when they visit the site.
+						</p>
+
+						<div class="row mb-3">
+							<div class="col-md-12">
+								<label for="access-comments" class="form-label"
+									>How can the source be accessed?</label
+								>
+								<textarea
+									class="form-control"
+									id="access-comments"
+									maxlength="1024"
+									name="access-comments"
+									rows="3"
+									placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."
+								></textarea>
+							</div>
+						</div>
+
+						<div class="row mb-3">
+							<div class="col-md-12">
+								<label class="form-label d-block"
+									>Access obstacles (check all that apply):</label
+								>
+								<div class="row">
+									<div class="col-md-4">
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												id="gate"
+												name="access-gate"
+											/>
+											<label class="form-check-label" for="gate">Gate</label>
+										</div>
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												id="fence"
+												name="access-fence"
+											/>
+											<label class="form-check-label" for="fence">Fence</label>
+										</div>
+									</div>
+									<div class="col-md-4">
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												id="locked"
+												name="access-locked"
+											/>
+											<label class="form-check-label" for="locked"
+												>Locked entrance</label
+											>
+										</div>
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												id="dogs"
+												name="access-dog"
+											/>
+											<label class="form-check-label" for="dogs"
+												>Dogs/pets</label
+											>
+										</div>
+									</div>
+									<div class="col-md-4">
+										<div class="form-check">
+											<input
+												class="form-check-input"
+												type="checkbox"
+												id="access-other"
+												name="access-other"
+											/>
+											<label class="form-check-label" for="access-other"
+												>Other obstacle</label
+											>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Contact Information Sections -->
+					<div class="form-section">
+						<div class="section-heading">
+							<i class="bi bi-person-lines-fill"></i>
+							<h3>Property Owner Information (if known)</h3>
+						</div>
+
+						<div class="row mb-4">
+							<div class="col-md-4 mb-3">
+								<label for="owner-name" class="form-label">Owner Name</label>
+								<input
+									type="text"
+									class="form-control"
+									id="owner-name"
+									maxlength="100"
+									name="owner-name"
+								/>
+							</div>
+							<div class="col-md-4 mb-3">
+								<label for="owner-phone" class="form-label">Owner Phone</label>
+								<input
+									type="tel"
+									class="form-control"
+									id="owner-phone"
+									maxlength="50"
+									name="owner-phone"
+								/>
+							</div>
+							<div class="col-md-4 mb-3">
+								<label for="owner-email" class="form-label">Owner Email</label>
+								<input
+									type="email"
+									class="form-control"
+									id="owner-email"
+									maxlength="100"
+									name="owner-email"
+								/>
+							</div>
+						</div>
+						<div class="row mb-4">
+							<div class="col-md-6 mb-3 row">
+								<div class="form-check mt-4">
+									<input
+										class="form-check-input"
+										id="property-ownership"
+										name="property-ownership"
+										type="checkbox"
+									/>
+									<label class="form-check-label" for="property-ownership"
+										>This is my property</label
+									>
+								</div>
+								<div class="form-check mt-4">
+									<input
+										class="form-check-input"
+										id="backyard-permission"
+										name="backyard-permission"
+										type="checkbox"
+									/>
+									<label class="form-check-label" for="backyard-permission"
+										>I grant permission to enter the back yard of this
+										property.</label
+									>
+								</div>
+								<div class="form-check mt-4">
+									<input
+										class="form-check-input"
+										id="reporter-confidential"
+										name="reporter-confidential"
+										type="checkbox"
+									/>
+									<label class="form-check-label" for="reporter-confidential">
+										<i
+											class="bi bi-info-circle-fill text-primary ms-1"
+											data-bs-toggle="tooltip"
+											data-bs-placement="top"
+											title="We share your information with mosquito control districts so they can follow up with any questions they may have about your report. Check this box if you would like the district to be careful not to share your information outside of the district operations team."
+										></i>
+										I would like my personal information kept
+										confidential.</label
+									>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Submit Section -->
+				<div class="submit-container">
+					<div class="row align-items-center">
+						<div class="col-md-8">
+							<p class="mb-0">
+								<strong
+									>Thank you for helping us keep our community safe from
+									mosquito-borne illnesses.</strong
+								>
+							</p>
+							<p class="mb-0 small text-muted">
+								After submission, you will receive a confirmation with a report
+								ID for tracking purposes.
+							</p>
+						</div>
+						<div class="col-md-4 text-md-end mt-3 mt-md-0">
+							<button type="submit" class="btn btn-primary btn-lg">
+								Submit Report
+							</button>
+						</div>
+					</div>
+				</div>
+			</form>
+		</div>
+	</main>
+
+	<!-- Larvae Info Modal -->
+	<div
+		class="modal fade"
+		id="larvaeInfoModal"
+		tabindex="-1"
+		aria-labelledby="larvaeInfoModalLabel"
+		aria-hidden="true"
+	>
+		<div class="modal-dialog modal-lg">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="larvaeInfoModalLabel">
+						How to Identify Mosquito Larvae and Pupae
+					</h5>
+					<button
+						type="button"
+						class="btn-close"
+						data-bs-dismiss="modal"
+						aria-label="Close"
+					></button>
+				</div>
+				<div class="modal-body">
+					<div class="row mb-4">
+						<div class="col-md-6">
+							<h6>Mosquito Larvae (Wigglers)</h6>
+							<p>Mosquito larvae, often called "wigglers," are:</p>
+							<ul>
+								<li>Small, worm-like aquatic organisms</li>
+								<li>Usually 1/4 to 1/2 inch long</li>
+								<li>Move with a wiggling motion in water</li>
+								<li>Hang upside-down at the water surface to breathe</li>
+								<li>Visible to the naked eye in standing water</li>
+							</ul>
+						</div>
+						<div class="col-md-6">
+							<h6>Mosquito Pupae (Tumblers)</h6>
+							<p>Mosquito pupae, often called "tumblers," are:</p>
+							<ul>
+								<li>Comma-shaped organisms</li>
+								<li>Typically darker than larvae</li>
+								<li>Move with a tumbling motion when disturbed</li>
+								<li>Rest at the water surface</li>
+								<li>The stage just before adult mosquitoes emerge</li>
+							</ul>
+						</div>
+					</div>
+					<p>
+						When looking for mosquito larvae and pupae, check standing water
+						sources like:
+					</p>
+					<ul>
+						<li>Swimming pools</li>
+						<li>Bird baths</li>
+						<li>Buckets or containers</li>
+						<li>Drainage ditches</li>
+						<li>Plant saucers</li>
+						<li>Rain gutters</li>
+					</ul>
+					<p>
+						If you see small creatures moving in standing water, there's a good
+						chance they're mosquito larvae or pupae.
+					</p>
+					<div class="text-center">
+						<a href="#" class="btn btn-outline-primary"
+							>View Detailed Identification Guide</a
+						>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button
+						type="button"
+						class="btn btn-secondary"
+						data-bs-dismiss="modal"
+					>
+						Close
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isCollapsed = ref<boolean>(true);
+const toggleCollapse = () => {
+	isCollapsed.value = !isCollapsed.value;
+};
+</script>
diff --git a/ts/rmo/router.ts b/ts/rmo/router.ts
index 2e2e83b9..85cf4b80 100644
--- a/ts/rmo/router.ts
+++ b/ts/rmo/router.ts
@@ -3,9 +3,11 @@ import type { RouteRecordRaw } from "vue-router";
 import HomeBase from "@/rmo/view/Home.vue";
 import HomeDistrict from "@/rmo/view/district/Home.vue";
 import NuisanceBase from "@/rmo/view/Nuisance.vue";
-//import * as NuisanceDistrict from "@/rmo/view/district/Nuisance.vue";
-import Status from "@/rmo/view/Status.vue";
+import NuisanceDistrict from "@/rmo/view/district/Nuisance.vue";
+import StatusBase from "@/rmo/view/Status.vue";
+import StatusDistrict from "@/rmo/view/district/Status.vue";
 import Water from "@/rmo/view/Water.vue";
+import WaterDistrict from "@/rmo/view/district/Water.vue";
 const routes: RouteRecordRaw[] = [
 	{
 		path: "/",
@@ -23,16 +25,28 @@ const routes: RouteRecordRaw[] = [
 		component: HomeDistrict,
 		props: true,
 	},
-	/*{
-		path: "/district/{slug}/nuisance",
+	{
+		path: "/district/:slug/nuisance",
 		name: "NuisanceDistrict",
 		component: NuisanceDistrict,
 		props: true,
-	},*/
+	},
+	{
+		path: "/district/:slug/status",
+		name: "StatusDistrict",
+		component: StatusDistrict,
+		props: true,
+	},
+	{
+		path: "/district/:slug/water",
+		name: "WaterDistrict",
+		component: WaterDistrict,
+		props: true,
+	},
 	{
 		path: "/status",
-		name: "Status",
-		component: Status,
+		name: "StatusBase",
+		component: StatusBase,
 	},
 	{
 		path: "/water",
diff --git a/ts/rmo/view/Home.vue b/ts/rmo/view/Home.vue
index 16401084..42a5d43f 100644
--- a/ts/rmo/view/Home.vue
+++ b/ts/rmo/view/Home.vue
@@ -1,15 +1,12 @@
 <template>
 	<Home>
 		<template #header>
-			<section class="py-2 bg-primary text-white">
-				<div class="banner-container d-flex justify-content-center">
-					<img class="banner" src="/static/img/rmo/banner.jpg" />
-				</div>
-			</section>
+			<Header />
 		</template>
 	</Home>
 </template>
 
 <script setup lang="ts">
 import Home from "@/rmo/content/Home.vue";
+import Header from "@/rmo/components/Header.vue";
 </script>
diff --git a/ts/rmo/view/Nuisance.vue b/ts/rmo/view/Nuisance.vue
index 3cce11cc..2a3e641e 100644
--- a/ts/rmo/view/Nuisance.vue
+++ b/ts/rmo/view/Nuisance.vue
@@ -1,409 +1,12 @@
-<style scoped>
-.map-container {
-	background-color: #e9ecef;
-	border-radius: 10px;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-	height: 500px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: 20px;
-}
-#map {
-	width: 100%;
-	height: 100%;
-}
-</style>
-
 <template>
-	<div class="container">
-		<div class="row mb-4">
-			<div class="col-12">
-				<h2>Report Mosquito Nuisance</h2>
-				<p class="lead">Help us identify mosquito activity in your area</p>
-			</div>
-		</div>
-
-		<!-- Report Form -->
-		<form
-			id="mosquitoNuisanceForm"
-			action="/api/rmo/nuisance"
-			method="POST"
-			enctype="multipart/form-data"
-		>
-			<!-- Location Section -->
-			<div class="form-section">
-				<div class="section-heading">
-					<i class="bi bi-geo-alt"></i>
-					<h3>Nuisance Location Information</h3>
-				</div>
-				<div class="col-md-12">
-					<div class="alert alert-info" role="info">
-						<p class="mb-0">
-							You can select the location by address or by moving the marker on
-							the map.
-						</p>
-					</div>
-				</div>
-
-				<div class="col-md-6">
-					<div class="mb-3 position-relative">
-						<address-input
-							placeholder="Start typing an address (min 3 characters)"
-							api-key=""
-						>
-						</address-input>
-					</div>
-				</div>
-			</div>
-			<p class="small text-muted mb-2">
-				You can also click on the map to mark the location precisely
-			</p>
-			<div class="map-container">
-				<map-locator id="map"></map-locator>
-			</div>
-			<input type="hidden" id="map-zoom" name="map-zoom" />
-			<input type="hidden" id="address-country" name="address-country" />
-			<input type="hidden" id="address-locality" name="address-locality" />
-			<input type="hidden" id="address-number" name="address-number" />
-			<input type="hidden" id="address-postalcode" name="address-postalcode" />
-			<input type="hidden" id="address-region" name="address-region" />
-			<input type="hidden" id="address-street" name="address-street" />
-			<input type="hidden" id="latitude" name="latitude" />
-			<input type="hidden" id="longitude" name="longitude" />
-			<input
-				type="hidden"
-				id="latlng-accuracy-type"
-				name="latlng-accuracy-type"
-			/>
-			<input
-				type="hidden"
-				id="latlng-accuracy-value"
-				name="latlng-accuracy-value"
-			/>
-
-			<!-- Mosquito Activity Section -->
-			<div class="form-section">
-				<div class="section-heading">
-					<i class="bi bi-mosquito-color"></i>
-					<h3>Mosquito Activity Information</h3>
-				</div>
-				<p class="mb-4">
-					The time when mosquitoes are active can help us identify the species
-					and likely breeding sources.
-				</p>
-
-				<!-- Time of Day -->
-				<div class="row mb-4">
-					<div class="col-12">
-						<label class="form-label"
-							>When do you typically notice mosquitoes? (Select all that
-							apply)</label
-						>
-						<div class="row">
-							<div class="col-6 col-md-3">
-								<input
-									type="checkbox"
-									class="btn-check"
-									id="earlyMorning"
-									name="tod-early"
-									autocomplete="off"
-								/>
-								<label
-									class="btn btn-outline-primary time-of-day-btn"
-									for="earlyMorning"
-								>
-									<span class="time-of-day-icon"
-										><i class="bi bi-sunrise"></i
-									></span>
-									<span class="time-label">Early Morning</span>
-									<small class="text-muted">5am-8am</small>
-								</label>
-							</div>
-							<div class="col-6 col-md-3">
-								<input
-									type="checkbox"
-									class="btn-check"
-									id="daytime"
-									name="tod-day"
-									autocomplete="off"
-								/>
-								<label
-									class="btn btn-outline-primary time-of-day-btn"
-									for="daytime"
-								>
-									<span class="time-of-day-icon"
-										><i class="bi bi-sun"></i
-									></span>
-									<span class="time-label">Daytime</span>
-									<small class="text-muted">8am-5pm</small>
-								</label>
-							</div>
-							<div class="col-6 col-md-3">
-								<input
-									type="checkbox"
-									class="btn-check"
-									id="evening"
-									name="tod-evening"
-									autocomplete="off"
-								/>
-								<label
-									class="btn btn-outline-primary time-of-day-btn"
-									for="evening"
-								>
-									<span class="time-of-day-icon"
-										><i class="bi bi-sunset"></i
-									></span>
-									<span class="time-label">Evening</span>
-									<small class="text-muted">5pm-9pm</small>
-								</label>
-							</div>
-							<div class="col-6 col-md-3">
-								<input
-									type="checkbox"
-									class="btn-check"
-									id="night"
-									name="tod-night"
-									autocomplete="off"
-								/>
-								<label
-									class="btn btn-outline-primary time-of-day-btn"
-									for="night"
-								>
-									<span class="time-of-day-icon"
-										><i class="bi bi-moon-stars"></i
-									></span>
-									<span class="time-label">Night</span>
-									<small class="text-muted">9pm-5am</small>
-								</label>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Duration -->
-				<div class="row mb-4">
-					<div class="col-md-6">
-						<label for="duration" class="form-label"
-							>How long have you been experiencing this mosquito problem?</label
-						>
-						<select class="form-select" name="duration">
-							<option value="just-noticed">Just noticed recently</option>
-							<option value="few-days">A few days</option>
-							<option value="1-2-weeks">1-2 weeks</option>
-							<option value="2-4-weeks">2-4 weeks</option>
-							<option value="1-3-months">1-3 months</option>
-							<option value="seasonal">All season (recurring issue)</option>
-						</select>
-					</div>
-				</div>
-
-				<!-- Location -->
-				<div class="row">
-					<div class="col-md-12">
-						<label for="source-location" class="form-label"
-							>Where on your property do you notice the most mosquito
-							activity?</label
-						>
-						<select
-							class="form-select tall"
-							multiple="true"
-							name="source-location"
-						>
-							<option value="frontyard">Front yard</option>
-							<option value="backyard">Back yard</option>
-							<option value="garden">Garden</option>
-							<option value="pool-area">Pool area</option>
-							<option value="other">Other area</option>
-						</select>
-					</div>
-				</div>
-			</div>
-
-			<button
-				id="toggle-additional"
-				class="btn btn-warning"
-				type="button"
-				@click="toggleCollapse()"
-			>
-				Click here to answer a few more questions to better help us solve your
-				mosquito problem
-			</button>
-			<div v-show="!isCollapsed" class="collapse">
-				<!-- Potential Sources Section -->
-				<div class="form-section">
-					<div class="section-heading">
-						<i class="bi bi-search"></i>
-						<h3>Potential Mosquito Sources</h3>
-					</div>
-					<p class="mb-3">
-						Have you noticed any of these common mosquito breeding sources in
-						your area?
-					</p>
-
-					<div class="card card-highlight mb-4">
-						<div class="card-body">
-							<h5 class="card-title">Did you know?</h5>
-							<p class="card-text">
-								Mosquitoes can breed in as little as a bottle cap of water!
-								Eliminating standing water is the most effective way to reduce
-								mosquito populations.
-							</p>
-						</div>
-					</div>
-
-					<div class="row g-4 mb-4">
-						<!-- Source 1 -->
-						<div class="col-md-4">
-							<div class="card source-card">
-								<div class="card-body text-center">
-									<div class="source-icon">
-										<i class="bi bi-water"></i>
-									</div>
-									<h5 class="card-title">Stagnant Water</h5>
-									<p class="card-text">
-										Green pools, ponds, fountains, or birdbaths that aren't
-										maintained
-									</p>
-									<div class="form-check">
-										<input
-											class="form-check-input"
-											type="checkbox"
-											name="source-stagnant"
-											id="sourceStagnantWater"
-										/>
-										<label class="form-check-label" for="sourceStagnantWater">
-											I've noticed this
-										</label>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<!-- Source 2 -->
-						<div class="col-md-4">
-							<div class="card source-card">
-								<div class="card-body text-center">
-									<div class="source-icon">
-										<i class="bi bi-droplet"></i>
-									</div>
-									<h5 class="card-title">Containers</h5>
-									<p class="card-text">
-										Buckets, planters, toys, tires, or any items that collect
-										rainwater
-									</p>
-									<div class="form-check">
-										<input
-											class="form-check-input"
-											type="checkbox"
-											name="source-container"
-											id="sourceContainers"
-										/>
-										<label class="form-check-label" for="sourceContainers">
-											I've noticed this
-										</label>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<!-- Source 3 -->
-						<div class="col-md-4">
-							<div class="card source-card">
-								<div class="card-body text-center">
-									<div class="source-icon">
-										<i class="bi bi-house"></i>
-									</div>
-									<h5 class="card-title">Sprinklers & Gutters</h5>
-									<p class="card-text">
-										Clogged street gutters, yard drains, or AC units that
-										collect water
-									</p>
-									<div class="form-check">
-										<input
-											class="form-check-input"
-											type="checkbox"
-											name="source-gutters"
-											id="sourceGutters"
-										/>
-										<label class="form-check-label" for="sourceGutters">
-											I've noticed this
-										</label>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<div class="row">
-						<div class="col-md-12">
-							<label for="otherSources" class="form-label"
-								>Have you noticed any other potential mosquito breeding
-								sources?</label
-							>
-							<textarea
-								class="form-control"
-								id="otherSources"
-								name="source-description"
-								rows="2"
-								placeholder="Describe any other potential breeding sites you've noticed..."
-							></textarea>
-							<photo-upload />
-						</div>
-					</div>
-				</div>
-
-				<div class="form-section">
-					<div class="section-heading">
-						<i class="bi bi-card-text"></i>
-						<h3>Additional Information</h3>
-					</div>
-
-					<div class="row">
-						<div class="col-md-12">
-							<label for="additionalInfo" class="form-label"
-								>Is there anything else you'd like us to know?</label
-							>
-							<textarea
-								class="form-control"
-								id="additionalInfo"
-								maxlength="2048"
-								name="additional-info"
-								rows="4"
-								placeholder="Additional details about the mosquito issue..."
-							></textarea>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- Submit Section -->
-			<div class="submit-container">
-				<div class="row align-items-center">
-					<div class="col-md-8">
-						<p class="mb-0">
-							<strong>Thank you for reporting this mosquito issue.</strong>
-						</p>
-						<p class="mb-0 small text-muted">
-							After submission, you'll receive a confirmation with a report ID
-							and further information.
-						</p>
-					</div>
-					<div class="col-md-4 text-md-end mt-3 mt-md-0">
-						<button type="submit" class="btn btn-primary btn-lg">
-							Submit Report
-						</button>
-					</div>
-				</div>
-			</div>
-		</form>
-	</div>
+	<Nuisance>
+		<template #header>
+			<Header />
+		</template>
+	</Nuisance>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-const isCollapsed = ref<boolean>(true);
-const toggleCollapse = () => {
-	isCollapsed.value = !isCollapsed.value;
-};
+import Header from "@/rmo/components/Header.vue";
+import Nuisance from "@/rmo/content/Nuisance.vue";
 </script>
diff --git a/ts/rmo/view/Status.vue b/ts/rmo/view/Status.vue
index 4d8c14e4..dd043db5 100644
--- a/ts/rmo/view/Status.vue
+++ b/ts/rmo/view/Status.vue
@@ -1,116 +1,12 @@
 <template>
-	<div class="container my-4">
-		<!-- Search Box -->
-		<div class="card search-box mb-4">
-			<div class="card-body">
-				<form class="row g-3 align-items-center" action="#" id="lookup-form">
-					<div class="col-md-9">
-						<address-or-report-input
-							name="address-or-report"
-							placeholder="Enter a report ID, address, neighborhood, or zip code"
-						></address-or-report-input>
-					</div>
-					<div class="col-md-3">
-						<span
-							data-bs-toggle="tooltip"
-							id="lookup-tooltip"
-							title="You can look up a report once you type in the full report ID. Start typing and I'll suggest complete IDs"
-						>
-							<button
-								type="submit"
-								class="btn btn-primary btn-lg w-100 disabled"
-								disabled
-								id="lookup"
-							>
-								Lookup Report by ID
-							</button>
-						</span>
-					</div>
-					<div class="col-12">
-						<div class="form-check custom-circle-checkbox">
-							<input
-								class="form-check-input"
-								type="checkbox"
-								id="checkboxNuisance"
-								data-color="danger"
-								checked
-							/>
-							<label class="form-check-label" for="checkboxNuisance"
-								>Mosquito Nuisance</label
-							>
-						</div>
-
-						<div class="form-check custom-circle-checkbox">
-							<input
-								class="form-check-input"
-								type="checkbox"
-								id="checkboxWater"
-								data-color="success"
-								checked
-							/>
-							<label class="form-check-label" for="checkboxWater"
-								>Standing Water</label
-							>
-						</div>
-					</div>
-				</form>
-			</div>
-		</div>
-
-		<!-- Map Section -->
-		<div class="card mb-4">
-			<div class="card-header bg-info text-white">
-				<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
-			</div>
-			<div class="card-body p-0">
-				<div class="map-container">
-					<map-multipoint
-						id="map"
-						xmax="-118.0"
-						ymax="37.0"
-						xmin="-119.0"
-						ymin="36.0"
-						tegola="{{ .URL.Tegola }}"
-						zoom="9"
-					></map-multipoint>
-				</div>
-			</div>
-		</div>
-
-		<!-- Results Section -->
-		<div class="card">
-			<div
-				class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
-			>
-				<h5 class="mb-0">
-					<i class="bi bi-geo-fill me-2"></i>Reports Near You
-				</h5>
-				<span class="badge bg-light text-dark" id="report-count"
-					>- Reports Found</span
-				>
-			</div>
-			<div class="card-body p-0">
-				<div class="table-responsive">
-					<table-report />
-				</div>
-			</div>
-			<!--
-		<div class="card-footer">
-			<nav aria-label="Page navigation">
-				<ul class="pagination justify-content-center mb-0">
-					<li class="page-item disabled">
-						<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
-					</li>
-					<li class="page-item active"><a class="page-link" href="#">1</a></li>
-					<li class="page-item"><a class="page-link" href="#">2</a></li>
-					<li class="page-item"><a class="page-link" href="#">3</a></li>
-					<li class="page-item">
-						<a class="page-link" href="#">Next</a>
-					</li>
-				</ul>
-			</nav>
-		</div>
-		-->
-		</div>
-	</div>
+	<Status>
+		<template #header>
+			<Header />
+		</template>
+	</Status>
 </template>
+
+<script setup lang="ts">
+import Header from "@/rmo/components/Header.vue";
+import Status from "@/rmo/content/Status.vue";
+</script>
diff --git a/ts/rmo/view/Water.vue b/ts/rmo/view/Water.vue
index a993f148..df0e921c 100644
--- a/ts/rmo/view/Water.vue
+++ b/ts/rmo/view/Water.vue
@@ -1,527 +1,12 @@
-<style scoped>
-.map-container {
-	background-color: #e9ecef;
-	border-radius: 10px;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-	height: 500px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: 20px;
-}
-#map {
-	width: 100%;
-	height: 100%;
-}
-</style>
 <template>
-	<main class="py-5">
-		<div class="container">
-			<!-- Page Title -->
-			<div class="row mb-4">
-				<div class="col-12">
-					<h2>Report Standing Water</h2>
-					<p class="lead">
-						Help us locate and treat potential mosquito production sources in
-						your area
-					</p>
-				</div>
-			</div>
-
-			<!-- Report Form -->
-			<form
-				id="standingWater"
-				action="{{ .URL.WaterSubmit }}"
-				method="POST"
-				enctype="multipart/form-data"
-			>
-				<!-- Photo Upload Section -->
-				<div class="form-section">
-					<div class="section-heading">
-						<i class="bi bi-camera"></i>
-						<h3>Photos</h3>
-					</div>
-					<p class="mb-3">
-						Photos help us identify the severity of the issue and may contain
-						location data that can help us find the production source.
-					</p>
-					<div class="mb-4">
-						<photo-upload />
-					</div>
-				</div>
-
-				<!-- Additional Information Section -->
-				<div class="form-section">
-					<div class="section-heading">
-						<i class="bi bi-card-text"></i>
-						<h3>Additional Information</h3>
-					</div>
-					<p class="mb-3">
-						Please provide any other information that might help us address this
-						mosquito production source.
-					</p>
-
-					<div class="row">
-						<div class="col-md-12">
-							<label for="comments" class="form-label"
-								>Additional Details</label
-							>
-							<textarea
-								class="form-control"
-								id="comments"
-								maxlength="2048"
-								name="comments"
-								rows="4"
-								placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."
-							></textarea>
-						</div>
-					</div>
-				</div>
-
-				<!-- Location Section -->
-				<div class="form-section">
-					<div class="section-heading">
-						<i class="bi bi-geo-alt"></i>
-						<h3>Location</h3>
-					</div>
-					<p class="mb-3">
-						Please provide the location of the potential mosquito production
-						source. We may be able to extract this information from your photos
-						if they contain location data.
-					</p>
-					<div class="col-md-12">
-						<div class="alert alert-info" role="info">
-							<p class="mb-0">
-								You can select the location by address or by moving the marker
-								on the map.
-							</p>
-						</div>
-					</div>
-
-					<div class="row mb-3">
-						<!-- Hidden fields for location data -->
-						<input type="hidden" id="address-country" name="address-country" />
-						<input
-							type="hidden"
-							id="address-locality"
-							name="address-locality"
-						/>
-						<input type="hidden" id="address-number" name="address-number" />
-						<input
-							type="hidden"
-							id="address-postalcode"
-							name="address-postalcode"
-						/>
-						<input type="hidden" id="address-region" name="address-region" />
-						<input type="hidden" id="address-street" name="address-street" />
-						<input type="hidden" id="latitude" name="latitude" />
-						<input type="hidden" id="longitude" name="longitude" />
-						<input
-							type="hidden"
-							id="latlng-accuracy-type"
-							name="latlng-accuracy-type"
-						/>
-						<input
-							type="hidden"
-							id="latlng-accuracy-value"
-							name="latlng-accuracy-value"
-						/>
-						<div class="col-md-6">
-							<div class="mb-3 position-relative">
-								<address-input
-									placeholder="Start typing an address (min 3 characters)"
-								>
-								</address-input>
-							</div>
-						</div>
-					</div>
-
-					<p class="small text-muted mb-2">
-						You can also click on the map to mark the location precisely
-					</p>
-					<div class="map-container">
-						<map-locator id="map"></map-locator>
-					</div>
-					<input type="hidden" id="map-zoom" name="map-zoom" />
-				</div>
-
-				<button
-					id="toggle-additional"
-					class="btn btn-warning"
-					type="button"
-					@click="toggleCollapse()"
-				>
-					Click here to answer a few more questions to better help us solve your
-					mosquito problem
-				</button>
-				<div class="collapse" id="collapse-additional-fields">
-					<!-- Source Details Section -->
-					<div class="form-section">
-						<div class="section-heading">
-							<i class="bi bi-water"></i>
-							<h3>Source Details</h3>
-						</div>
-
-						<div class="row mb-4">
-							<div class="col-md-6">
-								<label for="duration" class="form-label"
-									>How long has this production source been present?</label
-								>
-								<select
-									class="form-select"
-									id="duration"
-									name="source-duration"
-								>
-									<option value="none">I don't know</option>
-									<option value="less-than-week">Less than a week</option>
-									<option value="1-2-weeks">1-2 weeks</option>
-									<option value="2-4-weeks">2-4 weeks</option>
-									<option value="1-3-months">1-3 months</option>
-									<option value="more-than-3-months">More than 3 months</option>
-								</select>
-							</div>
-
-							<div class="col-md-6">
-								<label class="form-label d-block"
-									>Have you observed any of the following?
-									<a
-										href="#"
-										data-bs-toggle="modal"
-										data-bs-target="#larvaeInfoModal"
-										><i class="bi bi-question-circle small ms-1"></i></a
-								></label>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										id="larvae"
-										name="has-larvae"
-									/>
-									<label class="form-check-label" for="larvae">
-										Larvae (wigglers) in water
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										id="pupae"
-										name="has-pupae"
-									/>
-									<label class="form-check-label" for="pupae">
-										Pupae (tumblers) in water
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										id="adult"
-										name="has-adult"
-									/>
-									<label class="form-check-label" for="adult">
-										Adult mosquitoes near the source
-									</label>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<!-- Access Information Section -->
-					<div class="form-section">
-						<div class="section-heading">
-							<i class="bi bi-unlock"></i>
-							<h3>Access Information</h3>
-						</div>
-						<p class="mb-3">
-							Please provide any details about how to access the mosquito
-							source. This helps our technicians when they visit the site.
-						</p>
-
-						<div class="row mb-3">
-							<div class="col-md-12">
-								<label for="access-comments" class="form-label"
-									>How can the source be accessed?</label
-								>
-								<textarea
-									class="form-control"
-									id="access-comments"
-									maxlength="1024"
-									name="access-comments"
-									rows="3"
-									placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."
-								></textarea>
-							</div>
-						</div>
-
-						<div class="row mb-3">
-							<div class="col-md-12">
-								<label class="form-label d-block"
-									>Access obstacles (check all that apply):</label
-								>
-								<div class="row">
-									<div class="col-md-4">
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="checkbox"
-												id="gate"
-												name="access-gate"
-											/>
-											<label class="form-check-label" for="gate">Gate</label>
-										</div>
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="checkbox"
-												id="fence"
-												name="access-fence"
-											/>
-											<label class="form-check-label" for="fence">Fence</label>
-										</div>
-									</div>
-									<div class="col-md-4">
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="checkbox"
-												id="locked"
-												name="access-locked"
-											/>
-											<label class="form-check-label" for="locked"
-												>Locked entrance</label
-											>
-										</div>
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="checkbox"
-												id="dogs"
-												name="access-dog"
-											/>
-											<label class="form-check-label" for="dogs"
-												>Dogs/pets</label
-											>
-										</div>
-									</div>
-									<div class="col-md-4">
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="checkbox"
-												id="access-other"
-												name="access-other"
-											/>
-											<label class="form-check-label" for="access-other"
-												>Other obstacle</label
-											>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<!-- Contact Information Sections -->
-					<div class="form-section">
-						<div class="section-heading">
-							<i class="bi bi-person-lines-fill"></i>
-							<h3>Property Owner Information (if known)</h3>
-						</div>
-
-						<div class="row mb-4">
-							<div class="col-md-4 mb-3">
-								<label for="owner-name" class="form-label">Owner Name</label>
-								<input
-									type="text"
-									class="form-control"
-									id="owner-name"
-									maxlength="100"
-									name="owner-name"
-								/>
-							</div>
-							<div class="col-md-4 mb-3">
-								<label for="owner-phone" class="form-label">Owner Phone</label>
-								<input
-									type="tel"
-									class="form-control"
-									id="owner-phone"
-									maxlength="50"
-									name="owner-phone"
-								/>
-							</div>
-							<div class="col-md-4 mb-3">
-								<label for="owner-email" class="form-label">Owner Email</label>
-								<input
-									type="email"
-									class="form-control"
-									id="owner-email"
-									maxlength="100"
-									name="owner-email"
-								/>
-							</div>
-						</div>
-						<div class="row mb-4">
-							<div class="col-md-6 mb-3 row">
-								<div class="form-check mt-4">
-									<input
-										class="form-check-input"
-										id="property-ownership"
-										name="property-ownership"
-										type="checkbox"
-									/>
-									<label class="form-check-label" for="property-ownership"
-										>This is my property</label
-									>
-								</div>
-								<div class="form-check mt-4">
-									<input
-										class="form-check-input"
-										id="backyard-permission"
-										name="backyard-permission"
-										type="checkbox"
-									/>
-									<label class="form-check-label" for="backyard-permission"
-										>I grant permission to enter the back yard of this
-										property.</label
-									>
-								</div>
-								<div class="form-check mt-4">
-									<input
-										class="form-check-input"
-										id="reporter-confidential"
-										name="reporter-confidential"
-										type="checkbox"
-									/>
-									<label class="form-check-label" for="reporter-confidential">
-										<i
-											class="bi bi-info-circle-fill text-primary ms-1"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="We share your information with mosquito control districts so they can follow up with any questions they may have about your report. Check this box if you would like the district to be careful not to share your information outside of the district operations team."
-										></i>
-										I would like my personal information kept
-										confidential.</label
-									>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Submit Section -->
-				<div class="submit-container">
-					<div class="row align-items-center">
-						<div class="col-md-8">
-							<p class="mb-0">
-								<strong
-									>Thank you for helping us keep our community safe from
-									mosquito-borne illnesses.</strong
-								>
-							</p>
-							<p class="mb-0 small text-muted">
-								After submission, you will receive a confirmation with a report
-								ID for tracking purposes.
-							</p>
-						</div>
-						<div class="col-md-4 text-md-end mt-3 mt-md-0">
-							<button type="submit" class="btn btn-primary btn-lg">
-								Submit Report
-							</button>
-						</div>
-					</div>
-				</div>
-			</form>
-		</div>
-	</main>
-
-	<!-- Larvae Info Modal -->
-	<div
-		class="modal fade"
-		id="larvaeInfoModal"
-		tabindex="-1"
-		aria-labelledby="larvaeInfoModalLabel"
-		aria-hidden="true"
-	>
-		<div class="modal-dialog modal-lg">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="larvaeInfoModalLabel">
-						How to Identify Mosquito Larvae and Pupae
-					</h5>
-					<button
-						type="button"
-						class="btn-close"
-						data-bs-dismiss="modal"
-						aria-label="Close"
-					></button>
-				</div>
-				<div class="modal-body">
-					<div class="row mb-4">
-						<div class="col-md-6">
-							<h6>Mosquito Larvae (Wigglers)</h6>
-							<p>Mosquito larvae, often called "wigglers," are:</p>
-							<ul>
-								<li>Small, worm-like aquatic organisms</li>
-								<li>Usually 1/4 to 1/2 inch long</li>
-								<li>Move with a wiggling motion in water</li>
-								<li>Hang upside-down at the water surface to breathe</li>
-								<li>Visible to the naked eye in standing water</li>
-							</ul>
-						</div>
-						<div class="col-md-6">
-							<h6>Mosquito Pupae (Tumblers)</h6>
-							<p>Mosquito pupae, often called "tumblers," are:</p>
-							<ul>
-								<li>Comma-shaped organisms</li>
-								<li>Typically darker than larvae</li>
-								<li>Move with a tumbling motion when disturbed</li>
-								<li>Rest at the water surface</li>
-								<li>The stage just before adult mosquitoes emerge</li>
-							</ul>
-						</div>
-					</div>
-					<p>
-						When looking for mosquito larvae and pupae, check standing water
-						sources like:
-					</p>
-					<ul>
-						<li>Swimming pools</li>
-						<li>Bird baths</li>
-						<li>Buckets or containers</li>
-						<li>Drainage ditches</li>
-						<li>Plant saucers</li>
-						<li>Rain gutters</li>
-					</ul>
-					<p>
-						If you see small creatures moving in standing water, there's a good
-						chance they're mosquito larvae or pupae.
-					</p>
-					<div class="text-center">
-						<a href="#" class="btn btn-outline-primary"
-							>View Detailed Identification Guide</a
-						>
-					</div>
-				</div>
-				<div class="modal-footer">
-					<button
-						type="button"
-						class="btn btn-secondary"
-						data-bs-dismiss="modal"
-					>
-						Close
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+	<Water>
+		<template #header>
+			<Header />
+		</template>
+	</Water>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-const isCollapsed = ref<boolean>(true);
-const toggleCollapse = () => {
-	isCollapsed.value = !isCollapsed.value;
-};
+import Header from "@/rmo/components/Header.vue";
+import Water from "@/rmo/content/Water.vue";
 </script>
diff --git a/ts/rmo/view/district/Home.vue b/ts/rmo/view/district/Home.vue
index 89ee7261..ad0fa0e3 100644
--- a/ts/rmo/view/district/Home.vue
+++ b/ts/rmo/view/district/Home.vue
@@ -8,36 +8,10 @@
 }
 </style>
 <template>
-	<Home>
+	<Home :slug="slug">
 		<template #header>
 			<!-- Introduction Section -->
-			<template v-if="district">
-				<section class="py-5 bg-primary text-white">
-					<div class="container">
-						<div class="row justify-content-center">
-							<div class="col-lg-10">
-								<h2 class="text-center mb-4">Report a Mosquito Problem</h2>
-								<p class="lead text-center">
-									Submit a report to help reduce mosquito activity in your
-									neighborhood.
-								</p>
-								<p class="lead text-center">
-									Report Mosquitoes Online works with local mosquito control
-									agencies to receive public reports.
-								</p>
-								<p class="lead text-center">
-									For this area, mosquito control services are provided by
-								</p>
-								<h3 class="text-center">{{ district.name }}</h3>
-								<img class="district-logo" :src="district.url_logo" />
-							</div>
-						</div>
-					</div>
-				</section>
-			</template>
-			<template v-else>
-				<p>loading district...</p>
-			</template>
+			<HeaderDistrict :district="district" />
 		</template>
 	</Home>
 </template>
@@ -48,6 +22,7 @@ import { computedAsync } from "@vueuse/core";
 import Home from "@/rmo/content/Home.vue";
 import type { District } from "@/rmo/type";
 import { useDistrictStore } from "@/rmo/store/district";
+import HeaderDistrict from "@/components/HeaderDistrict.vue";
 
 interface Props {
 	slug: string;
@@ -55,10 +30,8 @@ interface Props {
 const props = defineProps<Props>();
 const districtStore = useDistrictStore();
 
-const district = computedAsync(async (): Promise<District | null> => {
+const district = computedAsync(async (): Promise<District | undefined> => {
 	const districts = await districtStore.get();
-	return (
-		districts.find((district: District) => district.slug == props.slug) || null
-	);
+	return districts.find((district: District) => district.slug == props.slug);
 });
 </script>
diff --git a/ts/rmo/view/district/Nuisance.vue b/ts/rmo/view/district/Nuisance.vue
new file mode 100644
index 00000000..f1fa8a52
--- /dev/null
+++ b/ts/rmo/view/district/Nuisance.vue
@@ -0,0 +1,29 @@
+<style scoped></style>
+<template>
+	<Nuisance :slug="slug">
+		<template #header>
+			<!-- Introduction Section -->
+			<HeaderDistrict :district="district" />
+		</template>
+	</Nuisance>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { computedAsync } from "@vueuse/core";
+import Nuisance from "@/rmo/content/Nuisance.vue";
+import type { District } from "@/rmo/type";
+import { useDistrictStore } from "@/rmo/store/district";
+import HeaderDistrict from "@/components/HeaderDistrict.vue";
+
+interface Props {
+	slug: string;
+}
+const props = defineProps<Props>();
+const districtStore = useDistrictStore();
+
+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/Status.vue b/ts/rmo/view/district/Status.vue
new file mode 100644
index 00000000..c972e81a
--- /dev/null
+++ b/ts/rmo/view/district/Status.vue
@@ -0,0 +1,29 @@
+<style scoped></style>
+<template>
+	<Status :slug="slug">
+		<template #header>
+			<!-- Introduction Section -->
+			<HeaderDistrict :district="district" />
+		</template>
+	</Status>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { computedAsync } from "@vueuse/core";
+import Status from "@/rmo/content/Status.vue";
+import type { District } from "@/rmo/type";
+import { useDistrictStore } from "@/rmo/store/district";
+import HeaderDistrict from "@/components/HeaderDistrict.vue";
+
+interface Props {
+	slug: string;
+}
+const props = defineProps<Props>();
+const districtStore = useDistrictStore();
+
+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/Water.vue b/ts/rmo/view/district/Water.vue
new file mode 100644
index 00000000..4cf72227
--- /dev/null
+++ b/ts/rmo/view/district/Water.vue
@@ -0,0 +1,29 @@
+<style scoped></style>
+<template>
+	<Water :slug="slug">
+		<template #header>
+			<!-- Introduction Section -->
+			<HeaderDistrict :district="district" />
+		</template>
+	</Water>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { computedAsync } from "@vueuse/core";
+import Water from "@/rmo/content/Water.vue";
+import type { District } from "@/rmo/type";
+import { useDistrictStore } from "@/rmo/store/district";
+import HeaderDistrict from "@/components/HeaderDistrict.vue";
+
+interface Props {
+	slug: string;
+}
+const props = defineProps<Props>();
+const districtStore = useDistrictStore();
+
+const district = computedAsync(async (): Promise<District | undefined> => {
+	const districts = await districtStore.get();
+	return districts.find((district: District) => district.slug == props.slug);
+});
+</script>