diff --git a/html/template/rmo/mailer/root.html b/html/template/rmo/mailer/root.html
index e9951070..a5085ffb 100644
--- a/html/template/rmo/mailer/root.html
+++ b/html/template/rmo/mailer/root.html
@@ -7,61 +7,6 @@
 		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
 	></script>
 	<script src="/static/js/map-locator-ro.js"></script>
-	<style>
-		body {
-			background-color: #f8f9fa;
-		}
-		.page-container {
-			max-width: 600px;
-			margin: 0 auto;
-			padding: 20px;
-		}
-		.content-card {
-			background-color: white;
-			border-radius: 15px;
-			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-			padding: 25px;
-			margin-bottom: 20px;
-		}
-		.logo-area {
-			text-align: center;
-			margin-bottom: 20px;
-		}
-		.logo-placeholder {
-			height: 50px;
-			max-width: 200px;
-			margin: 0 auto;
-		}
-		.map-container {
-			height: 300px;
-			background-color: #e9ecef;
-			border-radius: 10px;
-			margin-bottom: 20px;
-			position: relative;
-			overflow: hidden;
-		}
-		#map {
-			width: 510px;
-			height: 300px;
-		}
-		.address-container {
-			background-color: #f8f9fa;
-			border-radius: 10px;
-			padding: 15px;
-			margin-bottom: 20px;
-			border-left: 4px solid #0d6efd;
-		}
-		.action-buttons {
-			display: flex;
-			gap: 10px;
-		}
-		.progress-container {
-			margin: 30px 0 20px;
-		}
-		.progress {
-			height: 8px;
-		}
-	</style>
 {{ end }}
 {{ define "content" }}
 	<div class="page-container">
diff --git a/scss/custom.scss b/scss/custom.scss
index a152cfb4..127ac70d 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -47,6 +47,7 @@ $theme-colors: map-merge(
 
 @import "./sidebar.scss";
 @import "./table.scss";
+@import "./rmo/mailer.scss";
 @import "./rmo/nuisance.scss";
 @import "./rmo/root.scss";
 @import "./rmo/status.scss";
diff --git a/scss/rmo/mailer.scss b/scss/rmo/mailer.scss
new file mode 100644
index 00000000..33e3a428
--- /dev/null
+++ b/scss/rmo/mailer.scss
@@ -0,0 +1,54 @@
+
+body {
+	background-color: #f8f9fa;
+}
+.page-container {
+	max-width: 600px;
+	margin: 0 auto;
+	padding: 20px;
+}
+.content-card {
+	background-color: white;
+	border-radius: 15px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	padding: 25px;
+	margin-bottom: 20px;
+}
+.logo-area {
+	text-align: center;
+	margin-bottom: 20px;
+}
+.logo-placeholder {
+	height: 50px;
+	max-width: 200px;
+	margin: 0 auto;
+}
+.map-container {
+	height: 300px;
+	background-color: #e9ecef;
+	border-radius: 10px;
+	margin-bottom: 20px;
+	position: relative;
+	overflow: hidden;
+}
+#map {
+	width: 510px;
+	height: 300px;
+}
+.address-container {
+	background-color: #f8f9fa;
+	border-radius: 10px;
+	padding: 15px;
+	margin-bottom: 20px;
+	border-left: 4px solid #0d6efd;
+}
+.action-buttons {
+	display: flex;
+	gap: 10px;
+}
+.progress-container {
+	margin: 30px 0 20px;
+}
+.progress {
+	height: 8px;
+}