diff --git a/assets/styles/layout/landing/_blocks.scss b/assets/styles/layout/landing/_blocks.scss
index e23d03b64..745e928ae 100644
--- a/assets/styles/layout/landing/_blocks.scss
+++ b/assets/styles/layout/landing/_blocks.scss
@@ -207,7 +207,7 @@
     }
 }
 
-@media screen and (max-width: $landingBreakpointLG) {
+@media screen and (max-width: $landingBreakpointXL) {
     .landing-blocks .prime-blocks {
         margin: -24rem 0;
         transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg) scale(0.6);
diff --git a/assets/styles/layout/landing/_components.scss b/assets/styles/layout/landing/_components.scss
index 0fcd804a5..470fc868a 100644
--- a/assets/styles/layout/landing/_components.scss
+++ b/assets/styles/layout/landing/_components.scss
@@ -22,4 +22,12 @@
         background: transparent;
         border-color: transparent;
     }
+}
+
+@media screen and (min-width: 1660px) {
+    .components-main-container {
+        width: 1504px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_designer.scss b/assets/styles/layout/landing/_designer.scss
index f01f75426..884e0f870 100644
--- a/assets/styles/layout/landing/_designer.scss
+++ b/assets/styles/layout/landing/_designer.scss
@@ -1,5 +1,4 @@
 .landing-designer {
-
     .designer-demo {
         --dd-primary:#4f8ff7;
         --dd-primary-darker:#3575dd;
@@ -132,12 +131,15 @@
     }
 
     .formgrid > .field {
-        padding: 2rem;
+        padding: 1rem 2rem 1rem;
     }
 
     .designer-editor {
         backdrop-filter: blur(1rem);
         box-shadow: var(--home-card-shadow);
+        max-width: 1250px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
     }
 
     .designer-controls {
diff --git a/assets/styles/layout/landing/_features.scss b/assets/styles/layout/landing/_features.scss
index 91cb74e6c..219b06476 100644
--- a/assets/styles/layout/landing/_features.scss
+++ b/assets/styles/layout/landing/_features.scss
@@ -2,4 +2,9 @@
     .box {
         box-shadow: var(--home-features-card-shadow);
     }
+    .features-container{
+        max-width: 1250px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_header.scss b/assets/styles/layout/landing/_header.scss
index ac3bad61a..2f5495bc3 100644
--- a/assets/styles/layout/landing/_header.scss
+++ b/assets/styles/layout/landing/_header.scss
@@ -7,9 +7,13 @@
     padding-top: 1rem;
     padding-bottom: 1rem;
     z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+
+    .landing-header-container {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
 
     .landing-header-logo {
         height: 2.5rem;
@@ -97,4 +101,11 @@
             }
         }
     }
+}
+@media screen and (min-width: 1960px) {
+    .landing-header-container{
+        width: 1650px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 106d19421..6bb8ad09c 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -99,4 +99,18 @@
         padding-left: 2rem;
         padding-right: 2rem;
     }
+}
+
+.users-container {
+    max-width: 1250px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+@media screen and (min-width: 1960px) {
+    .landing-footer{
+        width: 1650px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_templates.scss b/assets/styles/layout/landing/_templates.scss
index f5e817851..b83757e2f 100644
--- a/assets/styles/layout/landing/_templates.scss
+++ b/assets/styles/layout/landing/_templates.scss
@@ -193,6 +193,49 @@
         }
     }
 }
+@media screen and (max-width: $landingBreakpointXL) {
+    .landing-templates {
+        .templates {
+            .template-block {
+                width: 336px;
+                height: 171px;
+                border: none !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $landingBreakpointLG) {
+    .landing-templates {
+        .templates {
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            .template-block {
+                width: 336px;
+                height: 171px;
+                border: none !important;
+                animation: none !important;
+                margin-right: 0 !important;
+                margin-left: 0 !important;
+            }
+            .lines {
+                display: none;
+            }
+        }
+    }
+}
+@media screen and (max-width: $landingBreakpointMD) {
+    .landing-templates {
+        .templates {
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            .template-block {
+                width: 354px;
+                height: 180px;
+                
+            }
+        }
+    }
+}
+
 
 @keyframes animated-block-1 {
     to {
diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue
index 103c64aa3..6c7c9814a 100644
--- a/pages/landing/ComponentSection.vue
+++ b/pages/landing/ComponentSection.vue
@@ -1,151 +1,185 @@
 <template>
     <section class="landing-components py-8">
         <div class="section-header">Components</div>
-        <p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
-        <div class="components-main flex mt-7 relative md:justify-content-center overflow-auto">
-            <div class="flex flex-column px-3 py-8 z-1">
-                <div class="box p-4 mb-5">
-                    <span class="text-secondary font-medium block mb-3">Balance</span>
-                    <div class="flex">
-                        <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="mr-2" />
-                        <InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" />
-                    </div>
-                    <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
-                    <div class="flex justify-content-between">
-                        <div class="flex align-items-center">
-                            <RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
-                            <label for="category1" class="ml-2 font-medium">Clothing</label>
-                        </div>
-                        <div class="flex align-items-center">
-                            <RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
-                            <label for="category2" class="ml-2 font-medium">Fitness</label>
-                        </div>
-                        <div class="flex align-items-center">
-                            <RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
-                            <label for="category3" class="ml-2 font-medium">Electronics</label>
-                        </div>
-                    </div>
-                </div>
-                <div class="box p-4 mb-5">
-                    <Chart type="line" :data="chartData" :options="chartOptions" />
-                </div>
-                <div class="box p-4 mb-5">
-                    <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
-                </div>
-                <div class="box p-4">
-                    <ul class="list-none p-0 m-0">
-                        <li class="flex align-items-center mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
-                            <span class="font-medium">Darrel Steward</span>
-                            <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
-                            <span class="text-secondary font-medium">15%</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
-                            <span class="font-medium">Albert Flores</span>
-                            <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
-                            <span class="text-secondary font-medium">85%</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
-                            <span class="font-medium">Kathryn Murphy</span>
-                            <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
-                            <span class="text-secondary font-medium">50%</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
-                            <span class="font-medium">Cody Fisher</span>
-                            <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
-                            <span class="text-secondary font-medium">75%</span>
-                        </li>
-                        <li class="flex align-items-center mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
-                            <span class="font-medium">Brandon Atkinson</span>
-                            <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: 0.5rem" />
-                            <span class="text-secondary font-medium">60%</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="flex flex-column justify-content-start px-3 z-1">
-                <div class="box p-4 mb-5">
-                    <div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius: '10px'">
-                        <img src="https://primefaces.org/cdn/primevue/images/landing/watch.png" alt="Watch" />
-                    </div>
-                    <div class="flex align-items-center mb-4">
-                        <div class="flex flex-column">
-                            <span class="block font-semibold mb-1">Brown Watch</span>
-                            <span class="text-secondary text-sm">Premium Quality</span>
-                        </div>
-                        <span class="font-medium text-xl ml-auto">$12.45</span>
-                    </div>
-                    <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
-                </div>
-                <div class="box p-4 mb-5">
-                    <Tree :value="nodes" class="bg-transparent border-none p-0" />
-                </div>
-                <div class="box p-4 mb-5">
-                    <div class="flex align-items-center">
-                        <Chip label="Vue" class="mr-2 font-medium" removable />
-                        <span class="font-medium">Typescript</span>
-                        <InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
-                    </div>
-                    <div class="mt-5">
-                        <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
-                    </div>
-                </div>
-            </div>
-            <div class="flex flex-column px-3 py-5 z-1">
-                <div class="box p-4 mb-5">
-                    <div class="flex justify-content-center">
-                        <Slider v-model="rangeValues" range class="w-20rem" />
-                    </div>
-                </div>
-                <div class="box p-4 mb-5">
-                    <ul class="list-none p-0 m-0">
-                        <li class="flex mb-3">
-                            <span class="mr-3">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
-                            </span>
-                            <div class="flex flex-column">
-                                <span class="font-bold mb-2">Amanda Williams</span>
-                                <p class="m-0 text-secondary">Webmaster</p>
+        <p class="section-detail"><span class="font-bold text-900">Over 90</span> Vue UI Components with top-notch quality
+            to help you implement all your UI requirements in style.</p>
+        <div class="components-main   relative ">
+            <div class="components-main-container flex flex-column xl:flex-row mt-7 gap-5 justify-content-center mx-auto w-full xl:w-auto px-5 lg:px-8">
+                <div class="flex flex-column md:flex-row gap-5 w-full xl:w-auto">
+                    <div class="flex flex-column w-full gap-5 xl:mt-8 z-1  lg:w-28rem md:w-30rem">
+                        <div class="box p-4">
+                            <span class="text-secondary font-medium block mb-3">Balance</span>
+                            <div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
+                                <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass='lg:w-6'/>
+                                <InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US"  class="w-full" inputClass='lg:w-6'/>
                             </div>
-                        </li>
-                        <li class="flex">
-                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
-                                <i class="pi pi-home text-xl mr-3"></i>
-                                <span class="flex flex-column">
-                                    <span class="font-bold mb-1">Dashboard</span>
-                                    <span class="m-0 text-secondary">Control Panel</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li class="flex">
-                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
-                                <i class="pi pi-envelope text-xl mr-3"></i>
-                                <span class="flex flex-column">
-                                    <span class="font-bold mb-1">Inbox</span>
-                                    <span class="m-0 text-secondary">View Messages</span>
-                                </span>
-                                <Badge value="3" class="ml-auto"></Badge>
-                            </a>
-                        </li>
-                        <li class="flex">
-                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
-                                <i class="pi pi-cog text-xl mr-3"></i>
-                                <span class="flex flex-column">
-                                    <span class="font-bold mb-1">Profile</span>
-                                    <span class="m-0 text-secondary">Account Settings</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
+                            <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
+                            <div class="flex justify-content-between flex-wrap gap-3">
+                                <div class="flex align-items-center">
+                                    <RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue"
+                                        @change="setCategory('C')" />
+                                    <label for="category1" class="ml-2 font-medium">Clothing</label>
+                                </div>
+                                <div class="flex align-items-center">
+                                    <RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue"
+                                        @change="setCategory('F')" />
+                                    <label for="category2" class="ml-2 font-medium">Fitness</label>
+                                </div>
+                                <div class="flex align-items-center">
+                                    <RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue"
+                                        @change="setCategory('E')" />
+                                    <label for="category3" class="ml-2 font-medium">Electronics</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="box p-4 ">
+                            <Chart type="line" :data="chartData" :options="chartOptions" />
+                        </div>
+                        <div class="box p-4 ">
+                            <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
+                        </div>
+                        <div class="box p-4">
+                            <ul class="list-none p-0 m-0">
+                                <li class="flex align-items-center mb-3">
+                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-1.svg"
+                                        alt="avatar 1" class="w-2rem h-2rem mr-3" />
+                                    <span class="font-medium">Darrel Steward</span>
+                                    <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3"
+                                        style="height: 0.5rem" />
+                                    <span class="text-secondary font-medium">15%</span>
+                                </li>
+                                <li class="flex align-items-center mb-3">
+                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-2.svg"
+                                        alt="avatar 2" class="w-2rem h-2rem mr-3" />
+                                    <span class="font-medium">Albert Flores</span>
+                                    <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3"
+                                        style="height: 0.5rem" />
+                                    <span class="text-secondary font-medium">85%</span>
+                                </li>
+                                <li class="flex align-items-center mb-3">
+                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-3.svg"
+                                        alt="avatar 3" class="w-2rem h-2rem mr-3" />
+                                    <span class="font-medium">Kathryn Murphy</span>
+                                    <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3"
+                                        style="height: 0.5rem" />
+                                    <span class="text-secondary font-medium">50%</span>
+                                </li>
+                                <li class="flex align-items-center mb-3">
+                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-4.svg"
+                                        alt="avatar 4" class="w-2rem h-2rem mr-3" />
+                                    <span class="font-medium">Cody Fisher</span>
+                                    <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3"
+                                        style="height: 0.5rem" />
+                                    <span class="text-secondary font-medium">75%</span>
+                                </li>
+                                <li class="flex align-items-center mb-3">
+                                    <img src="https://primefaces.org/cdn/primevue/images/landing/avatar-5.svg"
+                                        alt="avatar 5" class="w-2rem h-2rem mr-3" />
+                                    <span class="font-medium">Brandon Atkinson</span>
+                                    <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3"
+                                        style="height: 0.5rem" />
+                                    <span class="text-secondary font-medium">60%</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="flex flex-column w-full  gap-5 justify-content-start  xl:w-24rem z-1">
+                        <div class="box p-4">
+                            <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
+                                <img src="images/landing/brown-watch.png" alt="Watch" class='w-14rem'/>
+                            </div>
+                            <div class="flex align-items-center mb-4">
+                                <div class="flex flex-column">
+                                    <span class="block font-semibold mb-1">Brown Watch</span>
+                                    <span class="text-secondary text-sm">Premium Quality</span>
+                                </div>
+                                <span class="font-medium text-xl ml-auto">$12.45</span>
+                            </div>
+                            <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
+                        </div>
+                        <div class="box p-4">
+                            <Tree :value="nodes" class="bg-transparent border-none p-0" />
+                        </div>
+                        <div class="box p-4 ">
+                            <div class="flex align-items-center">
+                                <Chip label="Vue" class="mr-2 font-medium" removable />
+                                <span class="font-medium">Typescript</span>
+                                <InputSwitch v-model="switchValue" class="ml-auto"></InputSwitch>
+                            </div>
+                            <div class="mt-5">
+                                <SelectButton v-model="selectButtonValue" :options="selectButtonOptions"
+                                    optionLabel="name" />
+                            </div>
+                        </div>
+                        <div class="box p-4 block xl:hidden">
+                            <div class="flex justify-content-center">
+                                <Slider v-model="rangeValues" range class="w-full" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="box p-4 mb-5">
-                    <Calendar v-model="dateValue" :inline="true" :showWeek="true" />
+
+                <div
+                    class="flex flex-column gap-5 flex-column  md:flex-row xl:flex-column justify-content-between xl:justify-content-start z-1 w-full md:w-auto">
+                    <div class="flex flex-column gap-5 xl:mt-5 w-full">
+                        <div class="box p-4 hidden xl:block">
+                            <div class="flex justify-content-center w-full">
+                                <Slider v-model="rangeValues" range class="w-full" />
+                            </div>
+                        </div>
+                        <div class="box p-4 w-full">
+                            <ul class="list-none p-0 m-0">
+                                <li class="flex mb-3">
+                                    <span class="mr-3">
+                                        <img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png"
+                                            alt="Avatar" class="w-3rem h-3rem" />
+                                    </span>
+                                    <div class="flex flex-column">
+                                        <span class="font-bold mb-2">Amanda Williams</span>
+                                        <p class="m-0 text-secondary">Webmaster</p>
+                                    </div>
+                                </li>
+                                <li class="flex">
+                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer"
+                                        style="border-radius: '10px'">
+                                        <i class="pi pi-home text-xl mr-3"></i>
+                                        <span class="flex flex-column">
+                                            <span class="font-bold mb-1">Dashboard</span>
+                                            <span class="m-0 text-secondary">Control Panel</span>
+                                        </span>
+                                    </a>
+                                </li>
+                                <li class="flex">
+                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer"
+                                        style="border-radius: '10px'">
+                                        <i class="pi pi-envelope text-xl mr-3"></i>
+                                        <span class="flex flex-column">
+                                            <span class="font-bold mb-1">Inbox</span>
+                                            <span class="m-0 text-secondary">View Messages</span>
+                                        </span>
+                                        <Badge value="3" class="ml-auto"></Badge>
+                                    </a>
+                                </li>
+                                <li class="flex">
+                                    <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer"
+                                        style="border-radius: '10px'">
+                                        <i class="pi pi-cog text-xl mr-3"></i>
+                                        <span class="flex flex-column">
+                                            <span class="font-bold mb-1">Profile</span>
+                                            <span class="m-0 text-secondary">Account Settings</span>
+                                        </span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="box p-4 md:w-6 xl:w-full">
+                            <Calendar v-model="dateValue" :inline="true" :showWeek="true" class="w-full"/>
+                        </div>
                 </div>
+
             </div>
+
             <div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
             <div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
         </div>
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 124496139..8ae9d788a 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -2,7 +2,7 @@
     <section class="landing-designer py-8">
         <div class="section-header">Theme Designer</div>
         <p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
-        <div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
+        <div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
             <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
                 <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
                     <div class="text-center mb-4">
@@ -21,16 +21,16 @@
                         <Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
 
                         <span class="font-semibold block mt-4 mb-3">Size</span>
-                        <div class="flex align-items-center">
+                        <div class="flex flex-wrap gap-4 align-items-center">
                             <div class="flex align-items-center">
                                 <RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
                                 <label for="size-small" class="ml-2 font-medium">Small</label>
                             </div>
-                            <div class="flex align-items-center ml-4">
+                            <div class="flex align-items-center ">
                                 <RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
                                 <label for="size-normal" class="ml-2 font-medium">Normal</label>
                             </div>
-                            <div class="flex align-items-center ml-4">
+                            <div class="flex align-items-center">
                                 <RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
                                 <label for="size-large" class="ml-2 font-medium">Large</label>
                             </div>
@@ -55,7 +55,7 @@
                     </div>
                 </div>
                 <div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
-                    <div class="p-fluid formgrid grid">
+                    <div class="p-fluid formgrid grid pt-3">
                         <div class="field col-12 xl:col-6">
                             <label for="username" class="font-semibold mb-3 p-component">Username</label>
                             <InputText id="username" type="text" />
@@ -159,7 +159,7 @@ export default {
     computed: {
         editorclass() {
             return [
-                'p-4 designer-demo',
+                'designer-demo',
                 {
                     'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                     'demo-size-small': this.size === 'small',
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index cd4898838..9b7460f2b 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -2,8 +2,9 @@
     <section class="landing-features py-8">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
-        <div class="grid mt-7 pad-section" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
-            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
+        <div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
+            <div class="features-container grid grid-nogutter">
+                <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                 <div class="box p-4 w-full">
                     <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
                     <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
@@ -59,6 +60,8 @@
                     <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                 </div>
             </div>
+            </div>
+           
         </div>
     </section>
 </template>
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index d10a77799..1e373da74 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="landing-footer pt-8 pad-section">
+    <section class="landing-footer pt-8 px-5 lg:px-8">
         <div class="flex flex-wrap z-1">
             <div class="w-6 lg:w-3 flex">
                 <ul class="list-none p-0 m-0">
diff --git a/pages/landing/HeaderSection.vue b/pages/landing/HeaderSection.vue
index 9502ebb61..9bb608541 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -1,6 +1,7 @@
 <template>
-    <section :ref="containerRef" :class="['landing-header pad-section', { 'landing-header-active': menuActive }]">
-        <span>
+    <section :ref="containerRef" :class="['landing-header px-5 lg:px-8', { 'landing-header-active': menuActive }]">
+        <div class="landing-header-container">
+            <span>
             <img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
         </span>
 
@@ -46,6 +47,8 @@
                 <i class="pi pi-bars"></i>
             </button>
         </div>
+        </div>
+      
     </section>
 </template>
 
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 055813106..38ebb88d1 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -1,20 +1,25 @@
 <template>
-    <section :class="['landing-hero flex align-items-center flex-column justify-content-center relative', { 'hero-animation': setAnimation }]">
+    <section
+        :class="['landing-hero flex align-items-center flex-column justify-content-center relative', { 'hero-animation': setAnimation }]">
         <div class="hero-inner z-2 relative">
             <div class="flex flex-column md:align-items-center md:flex-row">
                 <div class="p-2 flex flex-row md:flex-column">
-                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
+                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center"
+                        @click="navigateTo('https://www.primefaces.org/store')">
                         <div class="flex flex-column align-items-center">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg"
+                                alt="primevue templates" />
                             <div class="name">
                                 <b>Templates</b>
                                 <span>Spectacular Designs</span>
                             </div>
                         </div>
                     </div>
-                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')">
+                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center"
+                        @click="navigateTo('https://www.primefaces.org/designer-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg"
+                                alt="primevue templates" />
                             <div class="name">
                                 <b>Theme Designer</b>
                                 <span>Create Your Own</span>
@@ -23,9 +28,11 @@
                     </div>
                 </div>
                 <div class="p-2 flex flex-row md:flex-column">
-                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
+                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center"
+                        @click="navigateTo('https://github.com/primefaces/primevue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg"
+                                alt="primevue core" />
                             <div class="name">
                                 <b>Open Source</b>
                                 <span>90+ UI Components</span>
@@ -33,18 +40,22 @@
                         </div>
                     </div>
                     <router-link to="/installation">
-                        <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
+                        <div
+                            class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
                             <div class="hero-box-inner text-center">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/overview-icon.svg" alt="primevue main" />
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/overview-icon.svg"
+                                    alt="primevue main" />
                                 <div class="name">
                                     <b class="font-bold">NEXT-GEN VUE UI</b>
                                 </div>
                             </div>
                         </div>
                     </router-link>
-                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
+                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center"
+                        @click="navigateTo('https://www.primefaces.org/primeflex')">
                         <div class="flex flex-column align-items-center">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" />
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg"
+                                alt="primevue icons" />
                             <div class="name">
                                 <b>CSS Utilities</b>
                                 <span>PrimeFlex CSS</span>
@@ -53,9 +64,11 @@
                     </div>
                 </div>
                 <div class="p-2 flex flex-row md:flex-column">
-                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
+                    <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center"
+                        @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
                         <div class="flex flex-column align-items-center">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg"
+                                alt="primevue templates" />
                             <div class="name">
                                 <b>Prime Blocks</b>
                                 <span>400+ UI Blocks</span>
@@ -63,9 +76,11 @@
                         </div>
                     </div>
                     <router-link to="/icons">
-                        <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
+                        <div
+                            class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
                             <div class="flex flex-column align-items-center">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg" alt="primevue templates" />
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/icons-icon.svg"
+                                    alt="primevue templates" />
                                 <div class="name">
                                     <b>Icon Library</b>
                                     <span>200+ Icons</span>
@@ -81,13 +96,15 @@
         </div>
 
         <section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
-            <router-link to="/installation" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
+            <router-link to="/installation"
+                class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
                 Get Started
                 <i class="pi pi-arrow-right ml-3"></i>
             </router-link>
-            <div class="box download-box font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out">
-                <i class="download-icon pi pi-download mr-3"></i>
-                <span class="font-bold" :style="{ fontFamily: 'monaco' }">npm i primevue</span>
+            <div class="box download-box w-14rem cursor-pointer font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out"
+                @click="copyMe">
+                <i :class="npmIcon"></i>
+                <span class="font-bold" :style="{ fontFamily: 'monaco' }" >{{ npmText }}</span>
             </div>
         </section>
 
@@ -102,6 +119,8 @@
 export default {
     data() {
         return {
+            npmIcon:'download-icon pi pi-download mr-3',
+            npmText:'npm i primevue',
             setAnimation: false
         };
     },
@@ -109,6 +128,15 @@ export default {
         this.setAnimation = true;
     },
     methods: {
+        copyMe() {
+            navigator.clipboard.writeText("npm i primevue");
+            this.npmText = 'copied!'
+            this.npmIcon = 'pi pi-copy download-icon mr-3'
+            setTimeout(() => {
+                this.npmIcon = 'download-icon pi pi-download mr-3'
+                this.npmText = "npm i primevue"
+            }, 2000);
+        },
         navigateTo(url) {
             window.location.href = url;
         }
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index 91d210557..dc649c6b6 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -1,35 +1,35 @@
 <template>
     <section class="landing-templates theme-dark py-8">
-        <div class="section-header">Templates</div>
-        <p class="section-detail">Professionally designed highly customizable application templates to get started in style.</p>
-        <div class="flex justify-content-center mt-4">
+        <div class="section-header relative z-3">Templates</div>
+        <p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
+        <div class="flex justify-content-center mt-4 relative z-3">
             <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                 <span>Learn More</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
         <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
-            <div class="flex">
-                <div class="template-block block-1 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
+            <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
                     <a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/">Diamond Preview</a>
                 </div>
                 <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
                     <a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/">Freya Preview</a>
                 </div>
             </div>
-            <div class="flex my-4">
-                <div class="template-block block-3 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
+            <div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-3 mr-2 lg:mb-0  flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
                     <a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/">Atlantis Preview</a>
                 </div>
-                <div class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column">
+                <div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
                     <img class="img-1" :src="templateImg()" height="110" />
                 </div>
                 <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
                     <a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/">Apollo Preview</a>
                 </div>
             </div>
-            <div class="flex">
-                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('serenity') }">
+            <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('serenity') }">
                     <a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/">Serenity Preview</a>
                 </div>
                 <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index 5587f5cdb..80b10fe00 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -9,7 +9,7 @@
             <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
         </div>
         <div
-            class="themes-main flex mt-7 justify-content-center pad-section"
+            class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
             :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }"
         >
             <div class="box overflow-hidden z-1 p-5 table-container">
diff --git a/pages/landing/UsersSection.vue b/pages/landing/UsersSection.vue
index 5a018f35e..a9de2488a 100644
--- a/pages/landing/UsersSection.vue
+++ b/pages/landing/UsersSection.vue
@@ -1,8 +1,8 @@
 <template>
-    <section class="landing-users py-8 pad-section">
+    <section class="landing-users py-8 px-3 lg:px-8">
         <div class="section-header">Who Uses</div>
         <p class="section-detail">Open source products of PrimeTek are used all around the world by millions of developers.</p>
-        <div class="grid mt-7">
+        <div class="grid mt-7 users-container">
             <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                 <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                     <img :src="imgSrc('fox')" alt="fox logo" />
diff --git a/public/images/landing/brown-watch.png b/public/images/landing/brown-watch.png
new file mode 100644
index 000000000..b6245d3c2
Binary files /dev/null and b/public/images/landing/brown-watch.png differ