diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss
index e2f805d35..528290484 100644
--- a/assets/styles/layout/_responsive.scss
+++ b/assets/styles/layout/_responsive.scss
@@ -15,102 +15,100 @@
 }
 
 @media screen and (max-width: 991px) {
-    .layout-wrapper {    
-        .layout-topbar {   
-            padding-left: 2rem;
-            padding-right: 2rem;
+    .layout-topbar-inner {   
+        padding-left: 2rem;
+        padding-right: 2rem;
 
-            .menu-button {
-                display: block;
-            }
-
-            .layout-topbar-logo-container {
-                width: auto;
-                margin-right: 0;
-            }
-
-            #docsearch {
-                margin-left: auto;
-                margin-right: .5rem;
-            }
-
-            .DocSearch-Button {
-                width: 2rem;
-                height: 2rem;
-                overflow: hidden;
-                padding: 0;
-                justify-content: center;
-                align-items: center;
-
-                .DocSearch-Search-Icon {
-                    width: 1rem;
-                    height: 1rem;
-                }
-
-                .DocSearch-Button-Placeholder,
-                .DocSearch-Button-Keys {
-                    display: none;
-                }
-            }
-        }
-    
-        .layout-sidebar {
-            top: 0;
-            left: 0;
-            position: fixed;
-            z-index: 1102;
-            height: 100%;
-            transform: translateX(-100%);
-            background-color: var(--surface-overlay);
-            width: 300px;
-            opacity: 0;
-
-            nav {
-                padding: 1rem 1rem;
-            }
-    
-            &.active {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-     
-        .layout-mask {
-            background-color: rgba(0, 0, 0, 0.1);
-    
-            &.layout-mask-active {
-                z-index: 1101;
-                width: 100%;
-                height: 100%;
-                position: fixed;
-                top: 0;
-                left: 0;
-                background-color: rgba(0, 0, 0, 0.4);
-                transition: background-color .5s;
-            }
+        .menu-button {
+            display: block;
         }
 
-        .doc-section-nav {
-            display: none;
-        }
-
-        .doc-tabmenu {
+        .layout-topbar-logo-container {
+            width: auto;
             margin-right: 0;
         }
 
-        .video-container {
-            position: relative;
-            width: 100%;
-            height: 0;
-            padding-bottom: 56.25%;
+        #docsearch {
+            margin-left: auto;
+            margin-right: .5rem;
+        }
 
-            iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
+        .DocSearch-Button {
+            width: 2rem;
+            height: 2rem;
+            overflow: hidden;
+            padding: 0;
+            justify-content: center;
+            align-items: center;
+
+            .DocSearch-Search-Icon {
+                width: 1rem;
+                height: 1rem;
             }
+
+            .DocSearch-Button-Placeholder,
+            .DocSearch-Button-Keys {
+                display: none;
+            }
+        }
+    }
+
+    .layout-sidebar {
+        top: 0;
+        left: 0;
+        position: fixed;
+        z-index: 1102;
+        height: 100%;
+        transform: translateX(-100%);
+        background-color: var(--surface-overlay);
+        width: 300px;
+        opacity: 0;
+
+        nav {
+            padding: 1rem 1rem;
+        }
+
+        &.active {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .layout-mask {
+        background-color: rgba(0, 0, 0, 0.1);
+
+        &.layout-mask-active {
+            z-index: 1101;
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.4);
+            transition: background-color .5s;
+        }
+    }
+
+    .doc-section-nav {
+        display: none;
+    }
+
+    .doc-tabmenu {
+        margin-right: 0;
+    }
+
+    .video-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
     }
 
@@ -126,38 +124,36 @@
 }
 
 @media screen and (max-width: 575px) {
-    .layout-wrapper {
-        .layout-topbar {
-            padding-left: 1rem;
-            padding-right: 1rem;
+    .layout-topbar-inner {
+        padding-left: 1rem;
+        padding-right: 1rem;
 
-            .layout-topbar-logo {
-                display: none;
-            }
-
-            .layout-topbar-icon {
-                display: block;
-            }
+        .layout-topbar-logo {
+            display: none;
         }
 
-        .layout-content {
-            padding-left: 1rem;
-            padding-right: 1rem;
+        .layout-topbar-icon {
+            display: block;
         }
+    }
 
-        .layout-footer {
-            padding-left: 1rem;
-            padding-right: 1rem;
-        }
+    .layout-content {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 
-        .doc-tabmenu {
-            li {
-                flex: 1 1 0;
+    .layout-footer {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 
-                button {
-                    width: 100%;
-                    min-width: auto;
-                }
+    .doc-tabmenu {
+        li {
+            flex: 1 1 0;
+
+            button {
+                width: 100%;
+                min-width: auto;
             }
         }
     }
diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss
index 45b511bb1..fd5755f1a 100644
--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@@ -10,31 +10,31 @@
     &.layout-topbar-sticky {
         backdrop-filter: blur(8px);
     }
+}
 
-    .layout-topbar-inner {
-        height: 4rem;
-        padding: 0 4rem;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
+.layout-topbar-inner {
+    height: 4rem;
+    padding: 0 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .layout-topbar-logo-container {
         width: 250px;
         margin-right: 4rem;
+    }
 
-        .layout-topbar-logo {
-            svg {
-                width: 120px;
-            }
+    .layout-topbar-logo {
+        svg {
+            width: 120px;
         }
+    }
 
-        .layout-topbar-icon {
-            display: none;
+    .layout-topbar-icon {
+        display: none;
 
-            svg {
-                width: 25px;
-            }
+        svg {
+            width: 25px;
         }
     }
 
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index ed42cf674..c43633e27 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="landing-hero py-8 px-5 lg:px-8">
-       <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 flex flex-column justify-content-center px-8 align-items-center xl:align-items-stretch">
+        <div class="flex flex-wrap">
+            <div class="w-full xl:w-6 flex flex-column justify-content-center lg:px-8 align-items-center xl:align-items-stretch">
                 <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                 <div>
@@ -113,7 +113,7 @@
                     </div>
                 </div>
             </div>
-       </div>
+        </div>
     </section>
 </template>
 
@@ -193,4 +193,3 @@ export default {
     }
 };
 </script>
-