diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue
index 6c7c9814a..707f27ec1 100644
--- a/pages/landing/ComponentSection.vue
+++ b/pages/landing/ComponentSection.vue
@@ -1,92 +1,78 @@
 <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   relative ">
+        <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="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'/>
+                                <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>
                             <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')" />
+                                    <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')" />
+                                    <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')" />
+                                    <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 ">
+                        <div class="box p-4">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
                         </div>
-                        <div class="box p-4 ">
+                        <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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" />
+                                    <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="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'/>
+                                <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">
@@ -100,15 +86,14 @@
                         <div class="box p-4">
                             <Tree :value="nodes" class="bg-transparent border-none p-0" />
                         </div>
-                        <div class="box p-4 ">
+                        <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" />
+                                <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
                             </div>
                         </div>
                         <div class="box p-4 block xl:hidden">
@@ -119,8 +104,7 @@
                     </div>
                 </div>
 
-                <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 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">
@@ -131,8 +115,7 @@
                             <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" />
+                                        <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>
@@ -140,8 +123,7 @@
                                     </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'">
+                                    <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>
@@ -150,8 +132,7 @@
                                     </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'">
+                                    <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>
@@ -161,8 +142,7 @@
                                     </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'">
+                                    <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>
@@ -174,10 +154,9 @@
                         </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>
+                        <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>
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index 8ae9d788a..51d266d26 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -26,7 +26,7 @@
                                 <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 ">
+                            <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>
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 9b7460f2b..2b9829d63 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -5,63 +5,62 @@
         <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>
-                    <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
+                    <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>
+                        <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
+                    </div>
+                </div>
+                <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-community.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Community</div>
+                        <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
+                    </div>
+                </div>
+                <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-productivity.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Productivity</div>
+                        <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
+                    </div>
+                </div>
+                <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-accessibility.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Accessibility</div>
+                        <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
+                    </div>
+                </div>
+                <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-support.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
+                        <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
+                    </div>
+                </div>
+                <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-mobile.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Mobile</div>
+                        <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
+                    </div>
+                </div>
+                <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-theme.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Themes</div>
+                        <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
+                    </div>
+                </div>
+                <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-ts.svg" alt="components icon" class="block mb-3" />
+                        <div class="font-semibold mb-3 text-lg">Typescript</div>
+                        <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
+                    </div>
                 </div>
             </div>
-            <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-community.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Community</div>
-                    <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
-                </div>
-            </div>
-            <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-productivity.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Productivity</div>
-                    <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
-                </div>
-            </div>
-            <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-accessibility.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Accessibility</div>
-                    <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
-                </div>
-            </div>
-            <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-support.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
-                    <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
-                </div>
-            </div>
-            <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-mobile.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Mobile</div>
-                    <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
-                </div>
-            </div>
-            <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-theme.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Themes</div>
-                    <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
-                </div>
-            </div>
-            <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-ts.svg" alt="components icon" class="block mb-3" />
-                    <div class="font-semibold mb-3 text-lg">Typescript</div>
-                    <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/HeaderSection.vue b/pages/landing/HeaderSection.vue
index 9bb608541..c8550afd2 100644
--- a/pages/landing/HeaderSection.vue
+++ b/pages/landing/HeaderSection.vue
@@ -2,53 +2,52 @@
     <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>
+                <img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
+            </span>
 
-        <div class="flex align-items-center">
-            <nav class="scalein origin-top">
-                <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
-                    <li class="mr-0 lg:mr-2">
-                        <router-link to="/installation">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
-                            <span>Components</span>
-                        </router-link>
-                    </li>
-                    <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/primeblocks-vue">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
-                            <span>Blocks</span>
-                        </a>
-                    </li>
-                    <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/designer-vue">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
-                            <span>Designer</span>
-                        </a>
-                    </li>
-                    <li class="mr-0 lg:mr-2">
-                        <a href="https://www.primefaces.org/store/templates.xhtml">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
-                            <span>Templates</span>
-                        </a>
-                    </li>
-                </ol>
-            </nav>
-            <a href="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
-                <i class="pi pi-github"></i>
-            </a>
-            <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
-                <i class="pi pi-discord"></i>
-            </a>
-            <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
-                <i :class="['pi', { 'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme() }]"></i>
-            </button>
-            <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive">
-                <i class="pi pi-bars"></i>
-            </button>
+            <div class="flex align-items-center">
+                <nav class="scalein origin-top">
+                    <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
+                        <li class="mr-0 lg:mr-2">
+                            <router-link to="/installation">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
+                                <span>Components</span>
+                            </router-link>
+                        </li>
+                        <li class="mr-0 lg:mr-2">
+                            <a href="https://www.primefaces.org/primeblocks-vue">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
+                                <span>Blocks</span>
+                            </a>
+                        </li>
+                        <li class="mr-0 lg:mr-2">
+                            <a href="https://www.primefaces.org/designer-vue">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/designer-icon.svg" alt="primevue templates" />
+                                <span>Designer</span>
+                            </a>
+                        </li>
+                        <li class="mr-0 lg:mr-2">
+                            <a href="https://www.primefaces.org/store/templates.xhtml">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/templates-icon.svg" alt="primevue templates" />
+                                <span>Templates</span>
+                            </a>
+                        </li>
+                    </ol>
+                </nav>
+                <a href="https://github.com/primefaces/primevue" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+                    <i class="pi pi-github"></i>
+                </a>
+                <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+                    <i class="pi pi-discord"></i>
+                </a>
+                <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
+                    <i :class="['pi', { 'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme() }]"></i>
+                </button>
+                <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive">
+                    <i class="pi pi-bars"></i>
+                </button>
+            </div>
         </div>
-        </div>
-      
     </section>
 </template>
 
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 38ebb88d1..480726a83 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -1,25 +1,20 @@
 <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>
@@ -28,11 +23,9 @@
                     </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>
@@ -40,22 +33,18 @@
                         </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>
@@ -64,11 +53,9 @@
                     </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>
@@ -76,11 +63,9 @@
                         </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>
@@ -96,15 +81,13 @@
         </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 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">
+            <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>
+                <span class="font-bold" :style="{ fontFamily: 'monaco' }">{{ npmText }}</span>
             </div>
         </section>
 
@@ -119,8 +102,8 @@
 export default {
     data() {
         return {
-            npmIcon:'download-icon pi pi-download mr-3',
-            npmText:'npm i primevue',
+            npmIcon: 'download-icon pi pi-download mr-3',
+            npmText: 'npm i primevue',
             setAnimation: false
         };
     },
@@ -129,12 +112,12 @@ export default {
     },
     methods: {
         copyMe() {
-            navigator.clipboard.writeText("npm i primevue");
-            this.npmText = 'copied!'
-            this.npmIcon = 'pi pi-copy download-icon mr-3'
+            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"
+                this.npmIcon = 'download-icon pi pi-download mr-3';
+                this.npmText = 'npm i primevue';
             }, 2000);
         },
         navigateTo(url) {
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index dc649c6b6..0d8ebfce2 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -18,7 +18,7 @@
                 </div>
             </div>
             <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') }">
+                <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 hidden lg:flex justify-content-center align-items-center flex-column">