diff --git a/rmo/mock.go b/rmo/mock.go
index 7d6a6599..3e6874ce 100644
--- a/rmo/mock.go
+++ b/rmo/mock.go
@@ -17,11 +17,6 @@ var (
 	mockWaterT                  = buildTemplate("mock/water", "base")
 )
 
-type ContentDistrict struct {
-	Name       string
-	URLLogo    string
-	URLWebsite string
-}
 type ContentMock struct {
 	District    ContentDistrict
 	MapboxToken string
diff --git a/rmo/nuisance.go b/rmo/nuisance.go
index 5580daa4..3a66d23c 100644
--- a/rmo/nuisance.go
+++ b/rmo/nuisance.go
@@ -6,6 +6,7 @@ import (
 	"strconv"
 	"time"
 
+	"github.com/Gleipnir-Technology/nidus-sync/config"
 	"github.com/Gleipnir-Technology/nidus-sync/db"
 	"github.com/Gleipnir-Technology/nidus-sync/db/enums"
 	"github.com/Gleipnir-Technology/nidus-sync/db/models"
@@ -15,8 +16,12 @@ import (
 	"github.com/rs/zerolog/log"
 )
 
-type ContextNuisance struct{}
-type ContextNuisanceSubmitComplete struct {
+type ContentNuisance struct {
+	District    *ContentDistrict
+	MapboxToken string
+	URL         ContentURL
+}
+type ContentNuisanceSubmitComplete struct {
 	ReportID string
 }
 
@@ -29,7 +34,11 @@ func getNuisance(w http.ResponseWriter, r *http.Request) {
 	html.RenderOrError(
 		w,
 		Nuisance,
-		ContextNuisance{},
+		ContentNuisance{
+			District:    nil,
+			MapboxToken: config.MapboxToken,
+			URL:         makeContentURL(),
+		},
 	)
 }
 func getNuisanceSubmitComplete(w http.ResponseWriter, r *http.Request) {
@@ -37,7 +46,7 @@ func getNuisanceSubmitComplete(w http.ResponseWriter, r *http.Request) {
 	html.RenderOrError(
 		w,
 		NuisanceSubmitComplete,
-		ContextNuisanceSubmitComplete{
+		ContentNuisanceSubmitComplete{
 			ReportID: report,
 		},
 	)
diff --git a/rmo/root.go b/rmo/root.go
index b9edf4ab..a878e6ce 100644
--- a/rmo/root.go
+++ b/rmo/root.go
@@ -9,6 +9,11 @@ import (
 	"github.com/rs/zerolog/log"
 )
 
+type ContentDistrict struct {
+	Name       string
+	URLLogo    string
+	URLWebsite string
+}
 type ContentPrivacy struct {
 	Address   string
 	Company   string
@@ -56,7 +61,9 @@ func getRoot(w http.ResponseWriter, r *http.Request) {
 	html.RenderOrError(
 		w,
 		RootT,
-		ContentRoot{},
+		ContentRoot{
+			URL: makeContentURL(),
+		},
 	)
 }
 
@@ -68,11 +75,13 @@ func getTerms(w http.ResponseWriter, r *http.Request) {
 	html.RenderOrError(
 		w,
 		TermsT,
-		ContentRoot{},
+		ContentRoot{
+			URL: makeContentURL(),
+		},
 	)
 }
 
-func makeContentURL(slug string) ContentURL {
+func makeContentURL() ContentURL {
 	return ContentURL{
 		Nuisance:               makeURL("nuisance"),
 		NuisanceSubmitComplete: makeURL("nuisance-submit-complete"),
diff --git a/rmo/routes.go b/rmo/routes.go
index 415fb836..41662d7e 100644
--- a/rmo/routes.go
+++ b/rmo/routes.go
@@ -8,12 +8,18 @@ import (
 func Router() chi.Router {
 	r := chi.NewRouter()
 	r.Get("/", getRoot)
+	r.Get("/nuisance", getNuisance)
+	//r.Get("/district/{slug}", renderMock(mockDistrictRootT))
+	//r.Get("/district/{slug}/nuisance", renderMock(mockNuisanceT))
+	//r.Get("/district/{slug}/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
+	//r.Get("/district/{slug}/status", renderMock(mockStatusT))
+	//r.Get("/district/{slug}/water", renderMock(mockWaterT))
+
 	r.Get("/privacy", getPrivacy)
 	r.Get("/robots.txt", getRobots)
 	r.Get("/email", getEmailByCode)
 	r.Get("/image/{uuid}", getImageByUUID)
 	r.Route("/mock", addMockRoutes)
-	r.Get("/nuisance", getNuisance)
 	r.Post("/nuisance-submit", postNuisance)
 	r.Get("/nuisance-submit-complete", getNuisanceSubmitComplete)
 	r.Get("/pool", getPool)
diff --git a/rmo/template.go b/rmo/template.go
index 3238b81b..470c2596 100644
--- a/rmo/template.go
+++ b/rmo/template.go
@@ -10,7 +10,7 @@ import (
 //go:embed template/*
 var embeddedFiles embed.FS
 
-var components = [...]string{"footer", "header", "photo-upload", "photo-upload-header"}
+var components = [...]string{"footer", "header-district", "header-rmo", "photo-upload", "photo-upload-header"}
 
 func buildTemplate(files ...string) *html.BuiltTemplate {
 	subdir := "rmo"
diff --git a/rmo/template/component/header.html b/rmo/template/component/header-district.html
similarity index 62%
rename from rmo/template/component/header.html
rename to rmo/template/component/header-district.html
index 6679d739..b80301b8 100644
--- a/rmo/template/component/header.html
+++ b/rmo/template/component/header-district.html
@@ -1,11 +1,11 @@
-{{define "header"}}
+{{define "header-district"}}
 <header class="navbar navbar-expand-lg navbar-dark text-light bg-primary shadow-sm">
 	<div class="container">
 		<div class="d-flex align-items-center">
 			<a class="navbar-brand d-flex align-items-center" href="/">
-				<img src="{{.District.URLLogo}}" style="height: 48px;" alt="District logo"></img>
+				<img src="{{.URLLogo}}" style="height: 48px;" alt="District logo"></img>
 			</a>
-			<h1 class="mb-0 ms-3">{{.District.Name}}</h1>
+			<h1 class="mb-0 ms-3">{{.Name}}</h1>
 		</div>
 	</div>
 </header>
diff --git a/rmo/template/component/header-rmo.html b/rmo/template/component/header-rmo.html
new file mode 100644
index 00000000..912b6bba
--- /dev/null
+++ b/rmo/template/component/header-rmo.html
@@ -0,0 +1,12 @@
+{{define "header-rmo"}}
+<header class="navbar navbar-expand-lg navbar-dark text-light bg-primary shadow-sm">
+	<div class="container">
+		<div class="d-flex align-items-center">
+			<a class="navbar-brand d-flex align-items-center" href="/">
+				<img src="/static/img/rmo/banner.jpg" style="height: 224px;" alt="Report Mosquitoes Online logo"></img>
+			</a>
+		</div>
+	</div>
+</header>
+
+{{end}}
diff --git a/rmo/template/mock/district-root.html b/rmo/template/mock/district-root.html
index f3069987..9a32b37c 100644
--- a/rmo/template/mock/district-root.html
+++ b/rmo/template/mock/district-root.html
@@ -53,7 +53,7 @@
 					<div class="card service-card h-100">
 						<div class="card-body text-center">
 							<div class="mb-3">
-								{{ template "svg/mosquito" }}
+								{{ template "mosquito-color.svg" }}
 							</div>
 							<h4 class="card-title">Report Mosquito Nuisance</h4>
 							<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
@@ -65,7 +65,7 @@
 					<div class="card service-card h-100">
 						<div class="card-body text-center">
 							<div class="mb-3">
-								{{ template "svg/pond" }}
+								{{ template "pond-color.svg" }}
 							</div>
 							<h4 class="card-title">Report Standing Water</h4>
 							<p class="card-text">Report any water that has been sitting for several days, where mosquitoes can live.</p>
@@ -77,7 +77,7 @@
 					<div class="card service-card h-100">
 						<div class="card-body text-center">
 							<div class="mb-3">
-								{{ template "svg/check-report" }}
+								{{ template "check-report-color.svg" }}
 							</div>
 							<h4 class="card-title">Follow-up or Check Status</h4>
 							<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
diff --git a/rmo/template/mock/nuisance.html b/rmo/template/mock/nuisance.html
index aa2f88b6..83d02910 100644
--- a/rmo/template/mock/nuisance.html
+++ b/rmo/template/mock/nuisance.html
@@ -138,99 +138,6 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 <style>
-.district-logo {
-	max-height: 80px;
-	width: auto;
-}
-.form-section {
-	margin-bottom: 2.5rem;
-	padding-bottom: 2rem;
-	border-bottom: 1px solid #dee2e6;
-}
-.form-section:last-child {
-	border-bottom: none;
-	margin-bottom: 1rem;
-	padding-bottom: 0;
-}
-.section-heading {
-	margin-bottom: 1.5rem;
-	display: flex;
-	align-items: center;
-}
-.section-heading i {
-	margin-right: 10px;
-	font-size: 1.5rem;
-	color: #0d6efd;
-}
-.submit-container {
-	background-color: #f8f9fa;
-	padding: 20px;
-	border-radius: 5px;
-	margin-top: 2rem;
-}
-.source-card {
-	height: 100%;
-	transition: transform 0.3s;
-}
-.source-card:hover {
-	transform: translateY(-5px);
-	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-}
-.source-icon {
-	font-size: 2rem;
-	margin-bottom: 1rem;
-	color: #0d6efd;
-}
-.time-of-day-btn {
-	width: 100%;
-	margin-bottom: 10px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 15px 0;
-}
-.time-of-day-icon {
-	font-size: 1.5rem;
-	margin-bottom: 8px;
-}
-.time-label {
-	font-size: 0.9rem;
-}
-select.tall {
-	height: 160px;
-}
-.severity-item {
-	text-align: center;
-	padding: 10px;
-}
-.severity-scale {
-	display: flex;
-	justify-content: space-between;
-	margin: 20px 0;
-}
-.btn-check:checked + .btn.time-of-day-btn {
-	background-color: #0d6efd;
-	color: white;
-}
-.inspection-type-card {
-	cursor: pointer;
-	border: 1px solid #dee2e6;
-	padding: 20px;
-	border-radius: 5px;
-	height: 100%;
-	transition: all 0.3s;
-}
-.inspection-type-card.selected {
-	border-color: #0d6efd;
-	background-color: rgba(13, 110, 253, 0.05);
-}
-.inspection-type-card:hover {
-	border-color: #0d6efd;
-}
-.card-highlight {
-	border-left: 4px solid #0d6efd;
-	background-color: #f8f9fa;
-}
 </style>
 {{end}}
 {{define "content"}}
@@ -275,7 +182,7 @@ select.tall {
 		<!-- Mosquito Activity Section -->
 		<div class="form-section">
 			<div class="section-heading">
-				{{ template "svg/mosquito" }}
+				{{ template "mosquito-color.svg" }}
 				<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>
diff --git a/rmo/template/nuisance.html b/rmo/template/nuisance.html
index ccc5ee93..1f1a9e31 100644
--- a/rmo/template/nuisance.html
+++ b/rmo/template/nuisance.html
@@ -2,7 +2,14 @@
 
 {{define "title"}}Nuisance{{end}}
 {{define "extraheader"}}
+<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
+<script src="/static/js/address-display.js"></script>
+<script src="/static/js/address-suggestion.js"></script>
+<script src="/static/js/geocode.js"></script>
+<script src="/static/js/location.js"></script>
+<script src="/static/js/map-locator.js"></script>
 <script>
+const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
 // Handle inspection type selection
 function selectInspectionType(type) {
 	// Remove selected class from both cards
@@ -20,6 +27,15 @@ function selectInspectionType(type) {
 		document.getElementById('schedulingSection').style.display = 'none';
 	}
 }
+function toggleCollapse(something) {
+	el = document.getElementById(something)
+	if (el.classList.contains('collapse')) {
+		el.classList.remove('collapse');
+	} else {
+		el.classList.add('collapse');
+	}
+	document.getElementById("toggle-additional").classList.add("visually-hidden");
+}
 
 // Check for source identification
 document.addEventListener('DOMContentLoaded', function() {
@@ -41,110 +57,96 @@ document.addEventListener('DOMContentLoaded', function() {
 			}
 		});
 	});
+	// Elements
+	const photoInput = document.getElementById('photos');
+
+	// Handle photo selection
+	photoInput.addEventListener('change', handlePhotoSelection);
+
+	// Handle drag and drop
+	const photoDropArea = document.getElementById('photoDropArea');
+	
+	photoDropArea.addEventListener('dragover', function(e) {
+		e.preventDefault();
+		photoDropArea.style.backgroundColor = '#e9ecef';
+	});
+	
+	photoDropArea.addEventListener('dragleave', function() {
+		photoDropArea.style.backgroundColor = '#f8f9fa';
+	});
+	
+	photoDropArea.addEventListener('drop', function(e) {
+		e.preventDefault();
+		photoDropArea.style.backgroundColor = '#f8f9fa';
+		
+		if (e.dataTransfer.files.length) {
+			handleFiles(e.dataTransfer.files);
+		}
+	});
+	const mapLocator = document.querySelector("map-locator");
+	mapLocator.addEventListener("load", (event) => {
+		getGeolocation({
+			enableHighAccuracy: true,
+			timeout: 10000,
+			maximumAge: 0
+		}).then(position => {
+			mapLocator.jumpTo({
+				center: {
+					lng: position.coords.longitude,
+					lat: position.coords.latitude,
+				},
+				zoom: 14,
+			});
+			mapLocator.setMarker([
+				position.coords.longitude,
+				position.coords.latitude,
+			]);
+			geocodeReverse(MAPBOX_ACCESS_TOKEN, {
+				lat: position.coords.latitude,
+				lng: position.coords.longitude,
+			});
+		}).catch(error => {
+			console.log("location error", error);
+		})
+	})
+	//mapLocator.addEventListener("markerdragend", 
+	let mapZoom = document.getElementById('map-zoom');
+	mapLocator.addEventListener("zoomend", function(e) {
+		mapZoom.value = e.target.getZoom();
+	});
+	mapLocator.addEventListener("markerdragend", (e) => {
+		const lngLat = marker.getLngLat();
+		//displaySelectedCoordinates(lngLat);
+		geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
+	});
+
+	const addressDisplay = document.querySelector("address-display");
+	const addressInput = document.querySelector("address-input");
+	addressInput.addEventListener("address-selected", (event) => {
+		const l = event.detail.location;
+		console.log("Address selected", l);
+		// Center map on selected address
+		mapSetMarker(l.geometry.coordinates);
+		mapJumpTo({
+			center: l.geometry.coordinates,
+			zoom: 14,
+		});
+
+		addressDisplay.show(l);
+		setLocationInputs(l);
+	});
 });
 </script>
 <style>
-.district-logo {
-	max-height: 80px;
-	width: auto;
-}
-.form-section {
-	margin-bottom: 2.5rem;
-	padding-bottom: 2rem;
-	border-bottom: 1px solid #dee2e6;
-}
-.form-section:last-child {
-	border-bottom: none;
-	margin-bottom: 1rem;
-	padding-bottom: 0;
-}
-.section-heading {
-	margin-bottom: 1.5rem;
-	display: flex;
-	align-items: center;
-}
-.section-heading i {
-	margin-right: 10px;
-	font-size: 1.5rem;
-	color: #0d6efd;
-}
-.optional-label {
-	font-size: 0.875rem;
-	color: #6c757d;
-	font-weight: normal;
-	margin-left: 8px;
-}
-.submit-container {
-	background-color: #f8f9fa;
-	padding: 20px;
-	border-radius: 5px;
-	margin-top: 2rem;
-}
-.source-card {
-	height: 100%;
-	transition: transform 0.3s;
-}
-.source-card:hover {
-	transform: translateY(-5px);
-	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-}
-.source-icon {
-	font-size: 2rem;
-	margin-bottom: 1rem;
-	color: #0d6efd;
-}
-.time-of-day-btn {
-	width: 100%;
-	margin-bottom: 10px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 15px 0;
-}
-.time-of-day-icon {
-	font-size: 1.5rem;
-	margin-bottom: 8px;
-}
-.time-label {
-	font-size: 0.9rem;
-}
-.severity-item {
-	text-align: center;
-	padding: 10px;
-}
-.severity-scale {
-	display: flex;
-	justify-content: space-between;
-	margin: 20px 0;
-}
-.btn-check:checked + .btn.time-of-day-btn {
-	background-color: #0d6efd;
-	color: white;
-}
-.inspection-type-card {
-	cursor: pointer;
-	border: 1px solid #dee2e6;
-	padding: 20px;
-	border-radius: 5px;
-	height: 100%;
-	transition: all 0.3s;
-}
-.inspection-type-card.selected {
-	border-color: #0d6efd;
-	background-color: rgba(13, 110, 253, 0.05);
-}
-.inspection-type-card:hover {
-	border-color: #0d6efd;
-}
-.card-highlight {
-	border-left: 4px solid #0d6efd;
-	background-color: #f8f9fa;
-}
 </style>
 {{end}}
 {{define "content"}}
+{{if (eq .District nil)}}
+	{{template "header-rmo" .}}
+{{else}}
+	{{template "header-district" .District}}
+{{end}}
 <div class="container">
-	<!-- Page Title -->
 	<div class="row mb-4">
 		<div class="col-12">
 			<h2>Report Mosquito Nuisance</h2>
@@ -152,24 +154,38 @@ document.addEventListener('DOMContentLoaded', function() {
 		</div>
 	</div>
 
-	<!-- Info Alert -->
-	<div class="row mb-4">
-		<div class="col-12">
-			<div class="alert alert-info" role="alert">
-				<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>About Mosquito Control</h5>
-				<p class="mb-0">While we don't spray for adult mosquitoes based on individual requests, your reports help us identify and eliminate breeding sources. Adult mosquito control is based on trap counts and disease testing. Your detailed information helps us prioritize our work and locate potential breeding sites.</p>
-			</div>
-		</div>
-	</div>
-
 	<!-- Report Form -->
 	<form id="mosquitoNuisanceForm" action="/nuisance-submit" method="POST">
+		<!-- Location & Contact 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="{{ .MapboxToken }}">
+					</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>
+		<map-locator api-key="{{ .MapboxToken }}"></map-locator>
+		<input type="hidden" id="map-zoom" name="map-zoom"/>
+
 		<!-- Mosquito Activity Section -->
 		<div class="form-section">
 			<div class="section-heading">
-				<i class="bi bi-bug"></i>
+				{{ template "mosquito-color.svg" }}
 				<h3>Mosquito Activity Information</h3>
-				<span class="optional-label">optional</span>
 			</div>
 			<p class="mb-4">The time when mosquitoes are active can help us identify the species and likely breeding sources.</p>
 
@@ -227,260 +243,131 @@ document.addEventListener('DOMContentLoaded', function() {
 						<option value="seasonal">All season (recurring issue)</option>
 					</select>
 				</div>
-				
-				<!-- Severity -->
-				<div class="col-md-6">
-					<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
-					<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
-					<div class="severity-scale">
-						<div class="severity-item">
-							<div>Minor</div>
-							<small>Occasional mosquito</small>
-						</div>
-						<div class="severity-item">
-							<div>Moderate</div>
-							<small>Regular presence</small>
-						</div>
-						<div class="severity-item">
-							<div>Severe</div>
-							<small>Many mosquitoes</small>
-						</div>
-					</div>
-					<div class="text-center">
-						Current selection: <span id="severityValue">3</span>/5
-					</div>
-				</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" name="source-location">
+					<select class="form-select tall" multiple="true" name="source-location">
 						<option value="">Please select</option>
 						<option value="front-yard">Front yard</option>
 						<option value="backyard">Back yard</option>
-						<option value="patio">Patio/deck area</option>
 						<option value="garden">Garden</option>
 						<option value="pool-area">Pool area</option>
-						<option value="throughout">Throughout the property</option>
-						<option value="indoors">Indoors</option>
 						<option value="other">Other area</option>
 					</select>
 				</div>
 			</div>
 		</div>
 
-		<!-- Potential Sources Section -->
-		<div class="form-section">
-			<div class="section-heading">
-				<i class="bi bi-search"></i>
-				<h3>Potential Mosquito Sources</h3>
-				<span class="optional-label">optional</span>
-			</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>
+		<button id="toggle-additional" class="btn btn-warning" type="button" onClick="toggleCollapse('collapse-additional-fields')">
+			Click here to answer a few more questions to better help us solve your mosquito problem
+		</button>
+		<div class="collapse" id="collapse-additional-fields">
+			<!-- Potential Sources Section -->
+			<div class="form-section">
+				<div class="section-heading">
+					<i class="bi bi-search"></i>
+					<h3>Potential Mosquito Sources</h3>
 				</div>
-			</div>
+				<p class="mb-3">Have you noticed any of these common mosquito breeding sources in your area?</p>
 
-			<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">Roof & Gutters</h5>
-							<p class="card-text">Clogged gutters, flat roofs, or AC units that collect water</p>
-							<div class="form-check">
-								<input class="form-check-input" type="checkbox" name="source-roof" id="sourceGutters">
-								<label class="form-check-label" for="sourceGutters">
-									I've noticed this
-								</label>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
-				<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
-				<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
-			</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>
-				</div>
-			</div>
-		</div>
-
-		<!-- Inspection Request Section -->
-		<div class="form-section">
-			<div class="section-heading">
-				<i class="bi bi-clipboard-check"></i>
-				<h3>Inspection Request</h3>
-			</div>
-			<p class="mb-4">Would you like our technicians to inspect for potential mosquito sources?</p>
-
-			<div class="row g-4 mb-4">
-				<div class="col-md-6">
-					<div class="inspection-type-card" onclick="selectInspectionType('property')" id="propertyInspection">
-						<h5><i class="bi bi-house-door me-2"></i>Property Inspection</h5>
-						<p>Request a technician to inspect your property for mosquito sources. We'll contact you to schedule a convenient time.</p>
-						<div class="form-check">
-							<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeProperty" value="property">
-							<label class="form-check-label" for="inspectionTypeProperty">
-								<strong>Schedule a property inspection</strong>
-							</label>
-						</div>
-					</div>
-				</div>
-
-				<div class="col-md-6">
-					<div class="inspection-type-card" onclick="selectInspectionType('neighborhood')" id="neighborhoodInspection">
-						<h5><i class="bi bi-map me-2"></i>Neighborhood Inspection</h5>
-						<p>Request a general inspection of your neighborhood. We'll survey the area for potential mosquito breeding sources.</p>
-						<div class="form-check">
-							<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeNeighborhood" value="neighborhood">
-							<label class="form-check-label" for="inspectionTypeNeighborhood">
-								<strong>Request neighborhood inspection</strong>
-							</label>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Property Inspection Scheduling (hidden by default) -->
-			<div id="schedulingSection" style="display: none;">
-				<div class="card mb-4">
+				<div class="card card-highlight mb-4">
 					<div class="card-body">
-						<h5 class="card-title">Schedule Property Inspection</h5>
-						<p class="card-text">Please indicate your availability for a technician visit.</p>
-						
-						<div class="row mb-3">
-							<div class="col-md-6">
-								<label for="preferredDateRange" class="form-label">Preferred Date Range</label>
-								<select class="form-select" id="preferredDateRange" name="preferred-date-range">
-									<option value="">Select preferred dates</option>
-									<option value="next-week">Next week</option>
-									<option value="in-two-weeks">In two weeks</option>
-									<option value="any-time">Any time</option>
-								</select>
-							</div>
-							
-							<div class="col-md-6">
-								<label for="preferredTime" class="form-label">Preferred Time of Day</label>
-								<select class="form-select" id="preferredTime" name="preferred-time">
-									<option value="">Select preferred time</option>
-									<option value="morning">Morning (8am-12pm)</option>
-									<option value="afternoon">Afternoon (12pm-4pm)</option>
-									<option value="any-time">Any time</option>
-								</select>
+						<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 class="form-check">
-							<input class="form-check-input" type="checkbox" id="requestCall" name="request-call">
-							<label class="form-check-label" for="requestCall">
-								Please call me to schedule a specific appointment time
-							</label>
+					</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="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
+					<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
+					<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
+				</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>
+						{{template "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" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
+					</div>
+				</div>
+			</div>
+
 		</div>
-
-		<!-- Location & Contact Section -->
-		<div class="form-section">
-			<div class="section-heading">
-				<i class="bi bi-geo-alt"></i>
-				<h3>Location & Contact Information</h3>
-			</div>
-
-			<div class="row mb-4">
-				<div class="col-md-12">
-					<label for="address" class="form-label">Your Address</label>
-					<input type="text" class="form-control" name="address" placeholder="Enter your street address">
-				</div>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6 mb-3">
-					<label for="name" class="form-label">Your Name</label>
-					<input type="text" class="form-control" name="name">
-				</div>
-				<div class="col-md-6 mb-3">
-					<label for="phone" class="form-label">Phone Number</label>
-					<input type="tel" class="form-control" id="phone" name="phone">
-				</div>
-				<div class="col-md-12 mb-3">
-					<label for="email" class="form-label">Email Address</label>
-					<input type="email" class="form-control" id="email" name="email">
-					<div class="form-text">We'll use this to send you a confirmation and follow-up information.</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="form-section">
-			<div class="section-heading">
-				<i class="bi bi-card-text"></i>
-				<h3>Additional Information</h3>
-				<span class="optional-label">optional</span>
-			</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" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
-				</div>
-			</div>
-		</div>
-
 		<!-- Submit Section -->
 		<div class="submit-container">
 			<div class="row align-items-center">
@@ -489,9 +376,9 @@ document.addEventListener('DOMContentLoaded', function() {
 					<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">
+					<a class="btn btn-primary btn-lg" href="{{.URL.NuisanceSubmitComplete}}">
 						Submit Report
-					</button>
+					</a>
 				</div>
 			</div>
 		</div>
diff --git a/scss/custom.scss b/scss/custom.scss
index 4edb4fde..3d4714c5 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -41,4 +41,5 @@ $theme-colors: map-merge(
 @import "./bootstrap/scss/bootstrap";
 
 @import "./sidebar.scss";
+@import "./rmo/nuisance.scss";
 @import "./rmo/root.scss";
diff --git a/scss/rmo/nuisance.scss b/scss/rmo/nuisance.scss
new file mode 100644
index 00000000..6c32cca3
--- /dev/null
+++ b/scss/rmo/nuisance.scss
@@ -0,0 +1,93 @@
+.district-logo {
+	max-height: 80px;
+	width: auto;
+}
+.form-section {
+	margin-bottom: 2.5rem;
+	padding-bottom: 2rem;
+	border-bottom: 1px solid #dee2e6;
+}
+.form-section:last-child {
+	border-bottom: none;
+	margin-bottom: 1rem;
+	padding-bottom: 0;
+}
+.section-heading {
+	margin-bottom: 1.5rem;
+	display: flex;
+	align-items: center;
+}
+.section-heading i {
+	margin-right: 10px;
+	font-size: 1.5rem;
+	color: #0d6efd;
+}
+.submit-container {
+	background-color: #f8f9fa;
+	padding: 20px;
+	border-radius: 5px;
+	margin-top: 2rem;
+}
+.source-card {
+	height: 100%;
+	transition: transform 0.3s;
+}
+.source-card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+.source-icon {
+	font-size: 2rem;
+	margin-bottom: 1rem;
+	color: #0d6efd;
+}
+.time-of-day-btn {
+	width: 100%;
+	margin-bottom: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 15px 0;
+}
+.time-of-day-icon {
+	font-size: 1.5rem;
+	margin-bottom: 8px;
+}
+.time-label {
+	font-size: 0.9rem;
+}
+select.tall {
+	height: 160px;
+}
+.severity-item {
+	text-align: center;
+	padding: 10px;
+}
+.severity-scale {
+	display: flex;
+	justify-content: space-between;
+	margin: 20px 0;
+}
+.btn-check:checked + .btn.time-of-day-btn {
+	background-color: #0d6efd;
+	color: white;
+}
+.inspection-type-card {
+	cursor: pointer;
+	border: 1px solid #dee2e6;
+	padding: 20px;
+	border-radius: 5px;
+	height: 100%;
+	transition: all 0.3s;
+}
+.inspection-type-card.selected {
+	border-color: #0d6efd;
+	background-color: rgba(13, 110, 253, 0.05);
+}
+.inspection-type-card:hover {
+	border-color: #0d6efd;
+}
+.card-highlight {
+	border-left: 4px solid #0d6efd;
+	background-color: #f8f9fa;
+}