diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss
index 159a5fee..9e2adf1e 100644
--- a/docs/_sass/getnighthawk.scss
+++ b/docs/_sass/getnighthawk.scss
@@ -272,6 +272,28 @@ $blue-munsell-3: #4392a4ff;
   margin-top: 2rem;
 }
 
+
+@media (max-width: 500px) {
+  .head-h1 {
+    text-align: center;
+  }
+
+  .desc-h1 {
+    font-size: 30px;
+    line-height: 45px;
+    font-weight: 700;
+    color: #000000;
+  }
+
+  .why-getnighthawk-h2 {
+    font-size: 30px;
+    line-height: 50px;
+    font-weight: 700;
+    color: #000000;
+  }
+
+}
+
 // nighthawk-description ends
 
 // stewared by section startups
diff --git a/docs/index.html b/docs/index.html
index fb98c09d..df3d89bf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -87,7 +87,7 @@
             </div>
           </div>
           <div class="description-div">
-                <div class="nighthawk-desc-text desc-mob-view">
+                <div class="nighthawk-desc-text desc-mob-view head-h1">
                   <h1 class="desc-h1">What is Nighthawk?</h1><br>
                   <p class="des-para">Nighthawk is a Layer 7 (HTTP/HTTPS/HTTP2)</p>
                   <p class="des-para">performance characterization tool. Nighthawk</p>
@@ -100,8 +100,8 @@ <h1 class="desc-h1">What is Nighthawk?</h1><br>
       <div class="container description-div">
         <div class="custom-desc-div">
           <div class="nighthawk-meshery-div-columns">
-            <div class="nighthawk-desc-text-meshery">
-              <h1 class="desc-h1">Nighthawk and Meshery</h1><br><br>
+            <div class="nighthawk-desc-text-meshery head-h1">
+              <h1 class="desc-h1">Nighthawk and Meshery</h1><br>
               <p class="des-para">Meshery integrates Nighthawk as one of</p>
               <p class="des-para">(currently) three choices of load generator for</p>
               <p class="des-para">characterizing and managing the performance</p>