diff --git a/layouts/_default/contact_us.html b/layouts/_default/contact_us.html
index 6d95a2a500..9a6d91d98a 100644
--- a/layouts/_default/contact_us.html
+++ b/layouts/_default/contact_us.html
@@ -5,7 +5,7 @@
 {{ define "main" }}
 
 <!-- about hero  area start -->
-<section class="contact-hero" style="padding: 120px 0 60px;">
+<section class="contact-hero">
   <div class="container">
     <div class="columns">
       <div class="column is-6 d-table">
diff --git a/layouts/_default/embed_console.html b/layouts/_default/embed_console.html
index e041debec0..2e457692eb 100644
--- a/layouts/_default/embed_console.html
+++ b/layouts/_default/embed_console.html
@@ -30,6 +30,10 @@
       transition: 0.3s ease-in-out;
       width: calc(100% - 64px);
       gap: 8px;
+
+      @media screen and (max-width: 768px) {
+        height: 44px;
+      }
       &:hover {
         background-color: var(--ac-primary, #1c1c1c);
         color: var(--ac-text, #ffffff);
diff --git a/layouts/index.html b/layouts/index.html
index 8564fa6cb6..e2b458b600 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -255,7 +255,7 @@ <h2 data-aos="fade-up" data-aos-duration="600" class="mb-4">{{ $p.homepage.highl
     <!-- section title  -->
     <div class="columns is-centered">
       <div class="column is-8">
-        <div class="section-title has-text-centered">
+        <div class="section-title has-text-centered-desktop">
           <h2>Manage your Kubernetes native applications across public or private clouds</h2>
           <p>A single pane of glass for managing your stateful or stateless applications across various private and public clouds. Hide the complexity of Kubernetes behind a simple, elegant UI</p>
         </div>
@@ -421,7 +421,7 @@ <h2>Explore the Mechanics and Features of Our UI</h2>
    </div>
    <!-- section title  -->
 
-   <div class="columns" style="padding-bottom: 60px;">
+   <div class="columns is-vcentered" style="padding-bottom: 60px;">
     <div class="column is-4">
       <div class="is-flex is-flex-direction-column is-flex-wrap-wrap" style="gap: 8px;">
        
@@ -488,27 +488,27 @@ <h5 class="alert">Alert</h5>
       </div>
     </div>
     <div class="column is-8">
-      <div class="ui-dashboardd">
-        <div id="provisioing" class="Provisioning">
-          <h1>provisioning</h1>
+      <div class="ui-mechanism">
+        <div id="provisioing" class="single-ui-ss provisioning">
+          <img src="/assets/images/products/appscode/features/steps/provisioning.jpg" alt="provisioning-databases">
         </div>
         <div id="database-insight" class="database-insight is-hidden">
           <h1>database-insight</h1>
         </div>
 
-        <div id="managing" class="managing is-hidden">
+        <div id="managing" class="single-ui-ss managing is-hidden">
           <h1>managing</h1>
         </div>
 
-        <div id="disaster-recovery" class="disaster-recovery is-hidden">
+        <div id="disaster-recovery" class="single-ui-ss disaster-recovery is-hidden">
           <h1>disaster-recovery</h1>
         </div>
 
-        <div id="monitoting" class="minitoring is-hidden">
+        <div id="monitoting" class="single-ui-ss minitoring is-hidden">
           <h1>monitoring</h1>
         </div>
 
-        <div id="alert" class="alert is-hidden">
+        <div id="alert" class="single-ui-ss alert is-hidden">
           <h1>Alert</h1>
         </div>
       </div>
@@ -522,23 +522,22 @@ <h1>Alert</h1>
 // Add click event listener to each single-feature mechanism element
 singleFeatures.forEach(function(feature) {
     feature.addEventListener('click', function() {
-        const h5Element = feature.querySelector('h5');
+        const title = feature.querySelector('.mechanism .content h5');
 
-        const className = h5Element.className;
+        const className = title.className;
         showOnlySelectedDiv(className)
         singleFeatures.forEach(function(feature) {
             feature.classList.remove('is-active');
         });
 
         feature.classList.add('is-active');
-
         const divs=document.querySelectorAll(className)
         
         
     });
 });
 function showOnlySelectedDiv(selectedId) {
-    const divs = document.querySelectorAll('.ui-dashboardd > div');
+    const divs = document.querySelectorAll('.ui-mechanism > div');
 
     divs.forEach(function(div) {
         if (div.id === selectedId) {
diff --git a/static/assets/images/products/appscode/features/steps/provisioning.jpg b/static/assets/images/products/appscode/features/steps/provisioning.jpg
new file mode 100644
index 0000000000..2c2e58cea3
Binary files /dev/null and b/static/assets/images/products/appscode/features/steps/provisioning.jpg differ
diff --git a/static/assets/sass/base/_global.scss b/static/assets/sass/base/_global.scss
index d87f8f691c..83b75f3130 100644
--- a/static/assets/sass/base/_global.scss
+++ b/static/assets/sass/base/_global.scss
@@ -6,6 +6,9 @@
 }
 .section-padding {
   padding: 60px 0;
+  @include touch {
+    padding: 48px 0;
+  }
 }
 .list-items {
   display: flex;
diff --git a/static/assets/sass/components/_button.scss b/static/assets/sass/components/_button.scss
index db6b6e946b..6ae93a4d0a 100644
--- a/static/assets/sass/components/_button.scss
+++ b/static/assets/sass/components/_button.scss
@@ -14,6 +14,9 @@
     align-items: center;
     justify-content: center;
     height: 48px;
+    @include mobile {
+      height: 44px;
+    }
     &:focus-visible {
       outline: none;
     }
diff --git a/static/assets/sass/components/_product-hero-area.scss b/static/assets/sass/components/_product-hero-area.scss
index 6bf0e8c890..7f3322833b 100644
--- a/static/assets/sass/components/_product-hero-area.scss
+++ b/static/assets/sass/components/_product-hero-area.scss
@@ -470,14 +470,6 @@ Responsive Classes
       padding: 30px 0;
       padding-bottom: 0px;
       justify-content: center;
-      
-      .single-brand {
-        padding: 5px;
-
-        img {
-          max-height: 1.5rem;
-        }
-      }
     }
   }
 }
diff --git a/static/assets/sass/layouts/_responsive.scss b/static/assets/sass/layouts/_responsive.scss
index 9fc17066fd..7190b07483 100644
--- a/static/assets/sass/layouts/_responsive.scss
+++ b/static/assets/sass/layouts/_responsive.scss
@@ -1,10 +1,6 @@
 /* Normal desktop :1216px. */
 @media (min-width: 1216px) and (max-width: 1407px) {
 
-  .section-padding {
-    padding: 60px 0;
-  }
-
   // pricing page style start
   .pricing-area-wrapper {
     overflow-x: scroll;
@@ -59,9 +55,6 @@
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -617,9 +610,6 @@
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -712,9 +702,7 @@
   }
 
   .section-title h2 {
-    font-size: 22px;
-    margin-bottom: 30px;
-    line-height: 36px;
+ 
   }
 
   .carousel-wrapper {
diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
index a5f174a080..ce5c2a2f1d 100644
--- a/static/assets/sass/main.css
+++ b/static/assets/sass/main.css
@@ -18326,6 +18326,11 @@ strong {
 .section-padding {
   padding: 60px 0;
 }
+@media screen and (max-width: 1023px) {
+  .section-padding {
+    padding: 48px 0;
+  }
+}
 
 .list-items {
   display: flex;
@@ -21931,6 +21936,11 @@ a.nav-link.active:after {
   justify-content: center;
   height: 48px;
 }
+@media screen and (max-width: 768px) {
+  .button.ac-button {
+    height: 44px;
+  }
+}
 .button.ac-button:focus-visible {
   outline: none;
 }
@@ -22471,12 +22481,6 @@ Responsive Classes
     padding-bottom: 0px;
     justify-content: center;
   }
-  .social-prove-brand-area .brand-image-wrapper .single-brand {
-    padding: 5px;
-  }
-  .social-prove-brand-area .brand-image-wrapper .single-brand img {
-    max-height: 1.5rem;
-  }
 }
 @media (max-width: 378px) {
   .hero-area.is-product .buttons .button {
@@ -25085,6 +25089,11 @@ Responsive Classes
 .more-products .single-feature, .intro-kubedb-ui .single-feature {
   flex-basis: calc(50% - 6px);
 }
+@media screen and (max-width: 768px) {
+  .more-products .single-feature, .intro-kubedb-ui .single-feature {
+    flex-basis: 100%;
+  }
+}
 
 .single-feature {
   display: flex;
@@ -25143,6 +25152,13 @@ Responsive Classes
   color: #666F6A;
 }
 
+.single-ui-ss {
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  margin-left: 32px;
+}
+
 .ui-dashboard {
   position: relative;
   z-index: 1;
@@ -25717,7 +25733,9 @@ Responsive Classes
   .hero-area-1 h1 {
     font-size: 38px;
     letter-spacing: -0.57px;
-    text-align: center;
+  }
+  .hero-area-1 h1 img {
+    height: 32px;
   }
   .hero-area-1 p {
     text-align: center;
@@ -25725,12 +25743,12 @@ Responsive Classes
   }
   .hero-area-1 .buttons {
     margin-bottom: 15px;
-    justify-content: center;
   }
   .hero-area-1 .buttons .button.ac-button {
     margin-bottom: 0.5rem;
     margin-right: 0.5rem !important;
     padding: 0.5rem 1rem;
+    width: 100%;
   }
   .hero-area-1 .buttons .play-buttons a span {
     font-size: 20px;
@@ -25741,13 +25759,8 @@ Responsive Classes
   .hero-area-1 .h-right-content {
     margin-right: 0;
   }
-  .news-message-wrapper {
-    display: flex;
-    justify-content: center;
-  }
   .products-area .single-product {
     padding: 30px 20px;
-    text-align: center;
   }
   .others-products {
     padding: 50px 0;
@@ -25763,7 +25776,6 @@ Responsive Classes
   }
   .others-products .products .single-product {
     margin-top: 1rem;
-    text-align: center;
     border: 1px solid #e7e7e7;
     padding: 20px 15px;
     border-radius: 4px;
@@ -26020,6 +26032,14 @@ Responsive Classes
     padding: 0 !important;
   }
 }
+.contact-hero {
+  padding: 120px 0 60px;
+}
+@media screen and (max-width: 768px) {
+  .contact-hero {
+    padding: 150px 0 30px;
+  }
+}
 .contact-hero h2 {
   font-weight: 700;
   letter-spacing: -0.5px;
@@ -26027,6 +26047,13 @@ Responsive Classes
   text-wrap: balance;
   margin-bottom: 16px;
 }
+@media screen and (max-width: 768px) {
+  .contact-hero h2 {
+    font-size: 38px;
+    letter-spacing: -0.57px;
+    text-wrap: inherit;
+  }
+}
 .contact-hero p {
   margin-bottom: 16px;
 }
@@ -26037,9 +26064,19 @@ Responsive Classes
   flex-wrap: wrap;
   gap: 12px;
 }
+@media screen and (max-width: 768px) {
+  .location-area {
+    margin-top: 32px;
+  }
+}
 .location-area .location {
   width: calc(50% - 6px);
 }
+@media screen and (max-width: 768px) {
+  .location-area .location {
+    width: 100%;
+  }
+}
 
 .location {
   border: 1px solid #e7e7e7;
@@ -26101,9 +26138,6 @@ Responsive Classes
 
 /* Normal desktop :1216px. */
 @media (min-width: 1216px) and (max-width: 1407px) {
-  .section-padding {
-    padding: 60px 0;
-  }
   .pricing-area-wrapper {
     overflow-x: scroll;
     padding-top: 64px;
@@ -26145,9 +26179,6 @@ Responsive Classes
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -26601,9 +26632,6 @@ Responsive Classes
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -26681,11 +26709,6 @@ Responsive Classes
     padding: 0;
     overflow: hidden;
   }
-  .section-title h2 {
-    font-size: 22px;
-    margin-bottom: 30px;
-    line-height: 36px;
-  }
   .carousel-wrapper {
     padding: 30px 15px;
   }
diff --git a/static/assets/sass/pages/_contactus.scss b/static/assets/sass/pages/_contactus.scss
index 9b29e3599f..eca7e4de4e 100644
--- a/static/assets/sass/pages/_contactus.scss
+++ b/static/assets/sass/pages/_contactus.scss
@@ -1,10 +1,20 @@
 .contact-hero {
+  padding: 120px 0 60px;
+  @include mobile {
+    padding: 150px 0 30px;
+  }
+
   h2 {
     font-weight: 700;
     letter-spacing: -0.5px;
     line-height: 120%;
     text-wrap: balance;
     margin-bottom: 16px;
+    @include mobile {
+      font-size: 38px;
+      letter-spacing: -0.57px;
+      text-wrap: inherit;
+    }
   }
   p{
     margin-bottom: 16px;
@@ -16,8 +26,14 @@
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+  @include mobile {
+    margin-top: 32px;
+  }
   .location {
     width: calc(50% - 6px);
+    @include mobile {
+      width: 100%;
+    }
   }
 }
 
diff --git a/static/assets/sass/pages/_homepage.scss b/static/assets/sass/pages/_homepage.scss
index 74bdc88b5f..333cbbb0ae 100644
--- a/static/assets/sass/pages/_homepage.scss
+++ b/static/assets/sass/pages/_homepage.scss
@@ -230,6 +230,9 @@
   gap: 12px;
   .single-feature {
     flex-basis: calc(50% - 6px);
+    @include mobile {
+      flex-basis: 100%;
+    }
   }
 }
 .single-feature {
@@ -293,6 +296,12 @@
     }
   }
 }
+.single-ui-ss {
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  margin-left: 32px;
+}
 .ui-dashboard {
   position: relative;
   z-index: 1;
@@ -1009,7 +1018,9 @@ Responsive Classes
     h1 {
       font-size: 38px;
       letter-spacing: -0.57px;
-      text-align: center;
+      img {
+        height: 32px;
+      }
     }
 
     p {
@@ -1019,13 +1030,13 @@ Responsive Classes
 
     .buttons {
       margin-bottom: 15px;
-      justify-content: center;
 
       .button {
         &.ac-button {
           margin-bottom: 0.5rem;
           margin-right: 0.5rem !important;
           padding: 0.5rem 1rem;
+          width: 100%;
         }
       }
 
@@ -1046,15 +1057,11 @@ Responsive Classes
       margin-right: 0;
     }
   }
-  .news-message-wrapper {
-    display: flex;
-    justify-content: center;
-  }
+
 
   .products-area {
     .single-product {
       padding: 30px 20px;
-      text-align: center;
     }
   }
 
@@ -1076,7 +1083,6 @@ Responsive Classes
     .products {
       .single-product {
         margin-top: 1rem;
-        text-align: center;
         border: 1px solid $ac-white-light;
         padding: 20px 15px;
         border-radius: 4px;