diff --git a/docs/_sass/index.scss b/docs/_sass/index.scss
index 955be46d..3260363e 100644
--- a/docs/_sass/index.scss
+++ b/docs/_sass/index.scss
@@ -216,13 +216,14 @@ $blue-munsell-3: #4392a4ff;
 }
 .description-div {
   text-align: center;
+  flex:1
  
 }
 .nighthawk-desc-text {
   display: inline-block;
   text-align: left;
   padding: 1rem 1rem;
-  margin-top: 5rem;
+  margin-top: 0rem;
 }
 .nighthawk-desc-text-meshery {
   display: inline-block;
diff --git a/docs/_sass/layout.scss b/docs/_sass/layout.scss
index d9476144..45ebb2c3 100644
--- a/docs/_sass/layout.scss
+++ b/docs/_sass/layout.scss
@@ -473,28 +473,32 @@ hr {
   display: flex;
   padding: 0rem 0;
 }
-
+.nighthawk-img-container {
+  flex: 1;
+}
 @media only screen and (max-width: 1300px) {
   .nighthawk-img-container {
     padding-top: 5rem;
+    flex: 1;
   }
 }
 
 @media only screen and (max-width: 1070px) {
   .nighthawk-img-container {
     padding-top: 10rem;
+    flex: 1;
   }
 }
 
 @media only screen and (max-width: 992px) {
   .custom-desc-div {
     display: flex;
-    flex-direction: column;
+    flex-direction: column-reverse;
     padding: 0rem;
   }
   .description-div-grpc {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     padding: 0rem;
     margin: 0 !important;
     max-width: 100% !important;
@@ -509,7 +513,8 @@ hr {
     margin-bottom: 6rem !important;
   }
   .nighthawk-img-container {
-    padding-top: 3rem;
+    flex: 1;
+    padding-top: 0rem;
   }
 }
 
@@ -527,7 +532,7 @@ hr {
   }
   .custom-desc-div {
     display: flex;
-    flex-direction: column;
+    flex-direction: column-reverse;
     padding: 0;
   }
 }
diff --git a/docs/index.html b/docs/index.html
index ad56f937..db46151c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -68,7 +68,7 @@
   <section>
 
   <div class="nighthawk-description-div">
-      <div class="custom-desc-div">
+      <div class="custom-desc-div container">
           <div class="nighthawk-img-container">
             <img src="/assets/images/screenshots/meshery-nighthawk-performance-chart.png" />              
           </div>
@@ -93,8 +93,7 @@ <h1 class="desc-h1">Nighthawk and Meshery</h1>
       </div>
     <div class="nighthawk-meshery-div">
       <div class="container description-div description-div-grpc">
-        <div class="custom-desc-div">
-    
+        <div>
             <div class="nighthawk-desc-text-meshery head-h1">
               <h1 class="desc-h1">Layer 7 Performance Analysis</h1>