diff --git a/rmo/template/component/header-rmo.html b/rmo/template/component/header-rmo.html
index 912b6bba..dddf7eaf 100644
--- a/rmo/template/component/header-rmo.html
+++ b/rmo/template/component/header-rmo.html
@@ -3,7 +3,7 @@
 	<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>
+				<img class="banner" src="/static/img/rmo/banner.jpg" alt="Report Mosquitoes Online logo"></img>
 			</a>
 		</div>
 	</div>
diff --git a/rmo/template/root.html b/rmo/template/root.html
index 92965eb9..42443681 100644
--- a/rmo/template/root.html
+++ b/rmo/template/root.html
@@ -7,9 +7,9 @@
 <!-- Main Content -->
 <main>
 	<!-- Introduction Section -->
-	<section class="py-5 bg-primary text-white">
+	<section class="py-2 bg-primary text-white">
 		<div class="banner-container d-flex justify-content-center">
-			<img class="banner-image" src="/static/img/rmo/banner.jpg"/>
+			<img class="banner" src="/static/img/rmo/banner.jpg"/>
 		</div>
 	</section>
 
diff --git a/scss/rmo/root.scss b/scss/rmo/root.scss
index 5606b41a..d774dbbe 100644
--- a/scss/rmo/root.scss
+++ b/scss/rmo/root.scss
@@ -1,3 +1,16 @@
+.banner {
+	display: block;
+}
+@include media-breakpoint-up(xs) {
+  .banner {
+    width: 100%;
+  }
+}
+@include media-breakpoint-up(xl) {
+  .banner {
+    height: 100%;
+  }
+}
 .service-card {
 	transition: transform 0.3s;
 	height: 100%;
@@ -24,9 +37,3 @@
   background-color: #F76436;
   overflow: hidden;
 }
-
-.banner-image {
-  display: block;
-  /* width as needed */
-}
-