diff --git a/layouts/_default/embed_console.html b/layouts/_default/embed_console.html
index c9d50a5036..69932dfaee 100644
--- a/layouts/_default/embed_console.html
+++ b/layouts/_default/embed_console.html
@@ -97,7 +97,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
       </svg>
     </span>
-     <span>SIGN IN</span><span id="betaTag" class="tag is-hidden">BETA</span> <span class="smooth spinner"></span>
+     <span class="sign-in-text">SIGN IN</span><span id="betaTag" class="tag is-hidden">BETA</span> <span class="smooth spinner"></span>
   </a>
 
   <script src="/assets/js/jquery-3.6.0.min.js"></script>
@@ -150,11 +150,14 @@
             "X-Requested-With": "xmlhttprequest"
           }
         })
-  
+
         if(response.status === 200) {
           // user is logged in
           // show console link
-          acSignInButton.firstElementChild.innerHTML =  "CONSOLE"
+          let icon = acSignInButton.querySelector(".icon");
+          icon.style.display = "none";
+          let signInText = acSignInButton.querySelector(".sign-in-text");
+          signInText.innerHTML =  "CONSOLE"
           acSignInButton.href = consoleDomain
           acSignInButton.querySelector("#betaTag").classList.remove("is-hidden")
         }
diff --git a/layouts/index.html b/layouts/index.html
index cac2c2f720..1c9619bfab 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -450,7 +450,7 @@ <h2>Deploy & Manage Databases with 1-click</h2>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="provisioing">Provisioning</h5>
-            <p class="is-ellipsis-1">Provision your favorite databases with just a few clicks</p>
+            <p class="is-ellipsis-2">Provision your favorite databases with just a few clicks</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
@@ -460,7 +460,7 @@ <h5 class="provisioing">Provisioning</h5>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="database-insight">Database Insights</h5>
-            <p class="is-ellipsis-1">Gain live insights in your databases with a glance</p>
+            <p class="is-ellipsis-2">Gain live insights in your databases with a glance</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
@@ -470,7 +470,7 @@ <h5 class="database-insight">Database Insights</h5>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="managing">Auto DBA</h5>
-            <p class="is-ellipsis-1">Manage Day 2 lifecycle of your database right from the UI</p>
+            <p class="is-ellipsis-2">Manage Day 2 lifecycle of your database right from the UI</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
@@ -480,7 +480,7 @@ <h5 class="managing">Auto DBA</h5>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="disaster-recovery">Disaster Recovery</h5>
-            <p class="is-ellipsis-1">Stay ready for any disaster with just a few clicks.</p>
+            <p class="is-ellipsis-2">Stay ready for any disaster with just a few clicks.</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
@@ -490,7 +490,7 @@ <h5 class="disaster-recovery">Disaster Recovery</h5>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="monitoring">Monitoring</h5>
-            <p class="is-ellipsis-1">Monitor your database with embedded Grafana dashboards</p>
+            <p class="is-ellipsis-2">Monitor your database with embedded Grafana dashboards</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
@@ -500,7 +500,7 @@ <h5 class="monitoring">Monitoring</h5>
           <div class="icon"><img src="https://img.icons8.com/100/E6E7E6/puzzle.png" alt="Kubernetes Made Easy"></div>
           <div class="content">
             <h5 class="alert">Alert</h5>
-            <p class="is-ellipsis-1">Stay alert for your mission critical databases</p>
+            <p class="is-ellipsis-2">Stay alert for your mission critical databases</p>
           </div>
         </div>
         <!-- single features mechanism item end -->
diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
index 0af26639b9..c14158c947 100644
--- a/static/assets/sass/main.css
+++ b/static/assets/sass/main.css
@@ -24961,12 +24961,13 @@ Responsive Classes
 .single-feature.mechanism {
   transition: 0.3s ease-in-out;
   border-radius: 8px;
-  padding: 16px;
+  padding: 8px 16px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   cursor: pointer;
 }
 .single-feature.mechanism .content h5 {
   margin-bottom: 4px;
+  font-size: 16px;
 }
 .single-feature.mechanism:hover {
   background-color: rgba(255, 255, 255, 0.1);
@@ -25010,6 +25011,31 @@ Responsive Classes
   height: 0px;
   padding-top: 69.9300699301%;
 }
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+  .single-ui-ss {
+    padding-top: 108.6956521739%;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1215px) {
+  .single-ui-ss {
+    padding-top: 90.9090909091%;
+  }
+}
+@media screen and (min-width: 1216px) and (max-width: 1407px) {
+  .single-ui-ss {
+    padding-top: 71.4285714286%;
+  }
+}
+@media screen and (min-width: 1408px) {
+  .single-ui-ss {
+    padding-top: 64.1025641026%;
+  }
+}
+@media (min-width: 1216px) and (max-width: 1440px) {
+  .single-ui-ss {
+    padding-top: 71.4285714286%;
+  }
+}
 .single-ui-ss img {
   position: absolute;
   top: 0;
@@ -25823,4 +25849,4 @@ Responsive Classes
 .modify-contact-form .fs-webform-container .select2-selection__choice {
   font-size: 12px;
   line-height: 1;
-}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/static/assets/sass/pages/_homepage.scss b/static/assets/sass/pages/_homepage.scss
index a5e3808f84..397de49411 100644
--- a/static/assets/sass/pages/_homepage.scss
+++ b/static/assets/sass/pages/_homepage.scss
@@ -300,12 +300,13 @@
   &.mechanism {
     transition: 0.3s ease-in-out;
     border-radius: 8px;
-    padding: 16px;
+    padding: 8px 16px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     cursor: pointer;
     .content {
       h5 {
         margin-bottom: 4px;
+        font-size: 16px;
       }
     }
     &:hover {
@@ -352,6 +353,22 @@
   width: 100%;
   height: 0px;
   padding-top: calc(100% * (100 / 143));
+  @include tablet-only {
+    padding-top: calc(100% * (100 / 92));
+  }
+  @include desktop-only {
+    padding-top: calc(100% * (100 / 110));
+  }
+  @include widescreen-only {
+    padding-top: calc(100% * (100 / 140));
+  }
+  @include fullhd {
+    padding-top: calc(100% * (100 / 156));
+  }
+  @media (min-width: 1216px) and (max-width: 1440px){
+    padding-top: calc(100% * (100 / 140));
+  }
+
   img {
     position: absolute;
     top: 0;