diff --git a/html/template/rmo/district-compliance-concern.html b/html/template/rmo/district-compliance-concern.html
index 1e67615c..ebecd375 100644
--- a/html/template/rmo/district-compliance-concern.html
+++ b/html/template/rmo/district-compliance-concern.html
@@ -191,7 +191,7 @@
 				<a href="../compliance/address" class="btn btn-outline-secondary">
 					Back
 				</a>
-				<a href="response" class="btn btn-primary flex-grow-1"> Continue </a>
+				<a href="evidence" class="btn btn-primary flex-grow-1"> Continue </a>
 			</div>
 		</main>
 	</div>
diff --git a/html/template/rmo/district-compliance-evidence.html b/html/template/rmo/district-compliance-evidence.html
new file mode 100644
index 00000000..4255670a
--- /dev/null
+++ b/html/template/rmo/district-compliance-evidence.html
@@ -0,0 +1,314 @@
+{{ template "rmo/layout/base.html" . }}
+
+{{ define "title" }}Upload Photos{{ end }}
+{{ define "extraheader" }}
+	<style>
+		body {
+			background-color: #f8f9fa;
+		}
+
+		.progress-bar {
+			background-color: #0d6efd;
+			transition: width 0.3s ease;
+		}
+
+		.upload-area {
+			border: 2px dashed #0d6efd;
+			border-radius: 8px;
+			padding: 32px 16px;
+			text-align: center;
+			background-color: #fff;
+			cursor: pointer;
+			transition: all 0.2s ease;
+		}
+
+		.upload-area:hover {
+			background-color: #f8f9fa;
+			border-color: #0a58ca;
+		}
+
+		.upload-area.dragover {
+			background-color: #e7f1ff;
+			border-color: #0a58ca;
+		}
+
+		#file-input {
+			display: none;
+		}
+
+		.photo-preview {
+			position: relative;
+			width: 100%;
+			height: 120px;
+			border-radius: 8px;
+			overflow: hidden;
+			background-color: #e9ecef;
+			border: 1px solid #dee2e6;
+		}
+
+		.photo-preview img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.photo-preview .remove-btn {
+			position: absolute;
+			top: 4px;
+			right: 4px;
+			background-color: rgba(220, 53, 69, 0.9);
+			color: white;
+			border: none;
+			border-radius: 50%;
+			width: 28px;
+			height: 28px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			transition: all 0.2s ease;
+		}
+
+		.photo-preview .remove-btn:hover {
+			background-color: rgba(220, 53, 69, 1);
+			transform: scale(1.1);
+		}
+
+		.guidance-list {
+			list-style: none;
+			padding-left: 0;
+		}
+
+		.guidance-list li {
+			padding: 8px 0;
+			padding-left: 28px;
+			position: relative;
+		}
+
+		.guidance-list li::before {
+			content: "✓";
+			position: absolute;
+			left: 0;
+			color: #198754;
+			font-weight: bold;
+		}
+	</style>
+{{ end }}
+{{ define "content" }}
+	<div class="container-fluid px-3 py-3">
+		<!-- Header -->
+		<header class="text-center mb-4 pb-3 border-bottom">
+			<div class="d-flex align-items-center justify-content-center mb-2">
+				<img
+					src="{{ .District.URLLogo }}"
+					alt="{{ .District.Name }} logo"
+					class="me-2"
+					style="height: 40px; width: auto;"
+				/>
+				<h1 class="h5 mb-0">{{ .District.Name }}</h1>
+			</div>
+			<div class="text-muted small">
+				<i class="bi bi-telephone"></i> {{ .District.OfficePhone }}
+			</div>
+		</header>
+
+		<!-- Progress Bar -->
+		<div class="mb-4">
+			<div class="d-flex justify-content-between align-items-center mb-2">
+				<span class="small text-muted">Step 4 of 10</span>
+			</div>
+			<div class="progress" style="height: 8px;">
+				<div
+					class="progress-bar"
+					role="progressbar"
+					style="width: 40%;"
+					aria-valuenow="40"
+					aria-valuemin="0"
+					aria-valuemax="100"
+				></div>
+			</div>
+		</div>
+
+		<!-- Main Content -->
+		<main>
+			<h2 class="h4 mb-3">Upload photos of the area</h2>
+
+			<p class="text-muted mb-3">
+				Please provide current photos to help us assess the situation.
+			</p>
+
+			<!-- Photo Guidance -->
+			<div class="card mb-4">
+				<div class="card-body">
+					<h6 class="card-subtitle mb-3 text-muted">
+						<i class="bi bi-lightbulb"></i> Helpful photos are:
+					</h6>
+					<ul class="guidance-list mb-0">
+						<li>Recent (taken within the last 24 hours)</li>
+						<li>Showing the specific area of concern</li>
+						<li>Making water conditions clearly visible</li>
+					</ul>
+				</div>
+			</div>
+
+			<form
+				id="photo-form"
+				method="POST"
+				action="/compliance/photos"
+				enctype="multipart/form-data"
+			>
+				<!-- Upload Area -->
+				<div class="mb-4">
+					<label class="form-label fw-semibold">Photos</label>
+					<div
+						class="upload-area"
+						id="upload-area"
+						onclick="document.getElementById('file-input').click()"
+					>
+						<i
+							class="bi bi-camera-fill"
+							style="font-size: 2.5rem; color: #0d6efd;"
+						></i>
+						<p class="mb-2 mt-2 fw-semibold">Tap to take photo or upload</p>
+						<p class="text-muted small mb-0">You can add multiple photos</p>
+					</div>
+					<input
+						type="file"
+						id="file-input"
+						name="photos"
+						accept="image/*"
+						capture="environment"
+						multiple
+					/>
+				</div>
+
+				<!-- Photo Previews -->
+				<div id="photo-previews" class="mb-4">
+					<!-- Thumbnails will be dynamically added here -->
+					<div class="row g-2" id="preview-container" style="display: none;">
+						<!-- Example preview structure (hidden by default, shown when photos added):
+                                                <div class="col-4">
+                                                        <div class="photo-preview">
+                                                                <img src="..." alt="Preview">
+                                                                <button type="button" class="remove-btn" data-index="0">
+                                                                        <i class="bi bi-x-lg"></i>
+                                                                </button>
+                                                        </div>
+                                                </div>
+                                                -->
+					</div>
+				</div>
+
+				<!-- Additional Comments -->
+				<div class="mb-4">
+					<label for="comments" class="form-label fw-semibold">
+						Additional Comments
+						<span class="text-muted fw-normal">(Optional)</span>
+					</label>
+					<textarea
+						class="form-control"
+						id="comments"
+						name="comments"
+						rows="4"
+						placeholder="Provide any additional information that may be helpful..."
+					></textarea>
+					<div class="form-text">
+						Example: "This standing water appeared after recent rain" or "I've
+						already taken steps to address this issue"
+					</div>
+				</div>
+
+				<!-- Navigation Buttons -->
+				<div class="d-flex gap-2 mt-4">
+					<a href="/compliance/observations" class="btn btn-outline-secondary">
+						Back
+					</a>
+					<button type="submit" class="btn btn-primary flex-grow-1">
+						Continue
+					</button>
+				</div>
+			</form>
+		</main>
+	</div>
+
+	<script>
+		// File input handling
+		const fileInput = document.getElementById("file-input");
+		const uploadArea = document.getElementById("upload-area");
+		const previewContainer = document.getElementById("preview-container");
+		let selectedFiles = [];
+
+		fileInput.addEventListener("change", handleFiles);
+
+		function handleFiles(e) {
+			const files = Array.from(e.target.files);
+			files.forEach((file) => {
+				if (file.type.startsWith("image/")) {
+					selectedFiles.push(file);
+				}
+			});
+			updatePreviews();
+		}
+
+		function updatePreviews() {
+			if (selectedFiles.length === 0) {
+				previewContainer.style.display = "none";
+				return;
+			}
+
+			previewContainer.style.display = "block";
+			previewContainer.innerHTML = "";
+
+			selectedFiles.forEach((file, index) => {
+				const reader = new FileReader();
+				reader.onload = function (e) {
+					const col = document.createElement("div");
+					col.className = "col-4";
+					col.innerHTML = `
+                                                <div class="photo-preview">
+                                                        <img src="${e.target.result}" alt="Preview ${index + 1}">
+                                                        <button type="button" class="remove-btn" onclick="removePhoto(${index})">
+                                                                <i class="bi bi-x-lg"></i>
+                                                        </button>
+                                                </div>
+                                        `;
+					previewContainer.appendChild(col);
+				};
+				reader.readAsDataURL(file);
+			});
+		}
+
+		function removePhoto(index) {
+			selectedFiles.splice(index, 1);
+			updatePreviews();
+
+			// Reset file input
+			const dt = new DataTransfer();
+			selectedFiles.forEach((file) => dt.items.add(file));
+			fileInput.files = dt.files;
+		}
+
+		// Drag and drop support
+		uploadArea.addEventListener("dragover", (e) => {
+			e.preventDefault();
+			uploadArea.classList.add("dragover");
+		});
+
+		uploadArea.addEventListener("dragleave", () => {
+			uploadArea.classList.remove("dragover");
+		});
+
+		uploadArea.addEventListener("drop", (e) => {
+			e.preventDefault();
+			uploadArea.classList.remove("dragover");
+
+			const files = Array.from(e.dataTransfer.files);
+			files.forEach((file) => {
+				if (file.type.startsWith("image/")) {
+					selectedFiles.push(file);
+				}
+			});
+			updatePreviews();
+		});
+	</script>
+{{ end }}
diff --git a/rmo/compliance.go b/rmo/compliance.go
index 9f48235a..e2dcd2de 100644
--- a/rmo/compliance.go
+++ b/rmo/compliance.go
@@ -53,3 +53,19 @@ func getDistrictComplianceConcern(w http.ResponseWriter, r *http.Request) {
 		},
 	)
 }
+
+func getDistrictComplianceEvidence(w http.ResponseWriter, r *http.Request) {
+	district, err := districtBySlug(r)
+	if err != nil {
+		respondError(w, "Failed to lookup organization", err, http.StatusBadRequest)
+		return
+	}
+	html.RenderOrError(
+		w,
+		"rmo/district-compliance-evidence.html",
+		ContentNuisance{
+			District: newContentDistrict(district),
+			URL:      makeContentURL(nil),
+		},
+	)
+}
diff --git a/rmo/routes.go b/rmo/routes.go
index 79707df9..cba8e667 100644
--- a/rmo/routes.go
+++ b/rmo/routes.go
@@ -19,6 +19,7 @@ func Router(r *mux.Router) {
 	r.HandleFunc("/district/{slug}/compliance", getDistrictCompliance).Methods("GET")
 	r.HandleFunc("/district/{slug}/compliance/address", getDistrictComplianceAddress).Methods("GET")
 	r.HandleFunc("/district/{slug}/compliance/concern", getDistrictComplianceConcern).Methods("GET")
+	r.HandleFunc("/district/{slug}/compliance/evidence", getDistrictComplianceEvidence).Methods("GET")
 	r.HandleFunc("/district/{slug}/nuisance", getNuisanceDistrict).Methods("GET")
 	//r.HandleFunc("/district/{slug}/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT)).Methods("GET")
 	//r.HandleFunc("/district/{slug}/status", renderMock(mockStatusT)).Methods("GET")