diff --git a/html/template/rmo/root.html b/html/template/rmo/root.html
index 67bd995f..2c81bbfb 100644
--- a/html/template/rmo/root.html
+++ b/html/template/rmo/root.html
@@ -2,110 +2,6 @@
 
 {{ define "title" }}Main{{ end }}
 {{ define "extraheader" }}
-	<style>
-		.bi-large {
-			height: 48px;
-			width: 48px;
-		}
-	</style>
 {{ end }}
 {{ define "content" }}
-	<!-- Main Content -->
-	<main>
-		{{ if eq .District nil }}
-			<!-- Introduction Section -->
-			<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>
-		{{ else }}
-			<!-- Introduction Section -->
-			<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>
-							{{ if not (eq .District nil) }}
-								<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.URLLogo }}" />
-							{{ end }}
-						</div>
-					</div>
-				</div>
-			</section>
-		{{ end }}
-
-
-		<!-- Services Section -->
-		<section class="py-5">
-			<div class="container">
-				<h3 class="text-center mb-4">How Can We Help You Today?</h3>
-				<div class="row g-4">
-					<div class="col-md-4">
-						<div class="card service-card h-100">
-							<div class="card-body text-center">
-								<div class="mb-3">
-									<i class="bi bi-large bi-mosquito-color"></i>
-								</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>
-								<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3"
-									>Report Problem</a
-								>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4">
-						<div class="card service-card h-100">
-							<div class="card-body text-center">
-								<div class="mb-3">
-									<i class="bi bi-large bi-pond-color"></i>
-								</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>
-								<a href="{{ .URL.Water }}" class="btn btn-primary mt-3"
-									>Report Source</a
-								>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-4">
-						<div class="card service-card h-100">
-							<div class="card-body text-center">
-								<div class="mb-3">
-									<i class="bi bi-large bi-check-report-color"></i>
-								</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>
-								<a href="{{ .URL.Status }}" class="btn btn-primary mt-3"
-									>Get Status</a
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-	</main>
 {{ end }}
diff --git a/ts/rmo/view/Home.vue b/ts/rmo/view/Home.vue
index 9b2b7f09..5be71a98 100644
--- a/ts/rmo/view/Home.vue
+++ b/ts/rmo/view/Home.vue
@@ -1,3 +1,114 @@
+<style scoped>
+.bi-large {
+	height: 48px;
+	width: 48px;
+}
+</style>
 <template>
-	<p>hey there!</p>
+	<!-- Main Content -->
+	<main>
+		<template v-if="district">
+			<!-- Introduction Section -->
+			<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>
+			<!-- Introduction Section -->
+			<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>
+
+		<!-- Services Section -->
+		<section class="py-5">
+			<div class="container">
+				<h3 class="text-center mb-4">How Can We Help You Today?</h3>
+				<div class="row g-4">
+					<div class="col-md-4">
+						<div class="card service-card h-100">
+							<div class="card-body text-center">
+								<div class="mb-3">
+									<i class="bi bi-large bi-mosquito-color"></i>
+								</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>
+								<RouteLink to="/nuisance" class="btn btn-primary mt-3"
+									>Report Problem</RouteLink
+								>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="card service-card h-100">
+							<div class="card-body text-center">
+								<div class="mb-3">
+									<i class="bi bi-large bi-pond-color"></i>
+								</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>
+								<RouteLink to="/water" class="btn btn-primary mt-3"
+									>Report Source</RouteLink
+								>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-4">
+						<div class="card service-card h-100">
+							<div class="card-body text-center">
+								<div class="mb-3">
+									<i class="bi bi-large bi-check-report-color"></i>
+								</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>
+								<RouteLink to="/status" class="btn btn-primary mt-3"
+									>Get Status</RouteLink
+								>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
 </template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface District {
+	name: string;
+	url_logo: string;
+}
+const district = ref<District | null>(null);
+</script>
diff --git a/ts/style/rmo.scss b/ts/style/rmo.scss
new file mode 100644
index 00000000..6211480d
--- /dev/null
+++ b/ts/style/rmo.scss
@@ -0,0 +1,29 @@
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+// Make custom SVG icons about the same size as other icons
+i.bi svg {
+	height: 18px;
+	width: 18px;
+}
+@import "bootstrap/scss/functions";
+// Import Bootstrap's variables (this merges with your custom variables)
+@import "bootstrap/scss/variables";
+
+// Import Bootstrap's mixins
+@import "bootstrap/scss/mixins";
+
+// Import all of Bootstrap (or pick specific components)
+@import "bootstrap/scss/bootstrap";
+
+// Import Bootstrap Icons
+//@import "bootstrap-icons/font/bootstrap-icons.scss";
+
+@import "./dashboard.scss";
+@import "./sidebar.scss";
diff --git a/vite/rmo/main.ts b/vite/rmo/main.ts
index 508bbd7b..4f4e9e44 100644
--- a/vite/rmo/main.ts
+++ b/vite/rmo/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { createHead } from "@vueuse/head";
 import router from "@/rmo/router";
 import App from "@/rmo/App.vue";
+import "@/style/rmo.scss";
 
 const app = createApp(App);
 const head = createHead();