diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 93f374c94..2d88aaa38 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -7,6 +7,52 @@
         border: 1px solid var(--home-border-color);
         border-radius: 10px;
         background-color: var(--home-box-bg);
+        position: relative;
+        z-index: 0;
+        
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+        
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    @keyframes clippath {
+        0%,
+        100% {
+            clip-path: inset(0 0 98% 0);
+        }
+        
+        25% {
+            clip-path: inset(0 98% 0 0);
+        }
+        50% {
+            clip-path: inset(98% 0 0 0);
+        }
+        75% {
+            clip-path: inset(0 0 0 98%);
+        }
     }
 
     .linkbox {
diff --git a/assets/styles/layout/variables/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss
index ccb8a7901..6b0579725 100644
--- a/assets/styles/layout/variables/landing/_dark.scss
+++ b/assets/styles/layout/variables/landing/_dark.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid #424b57;
     --home-templates-btn-border-left:3px solid #424b57;
     --home-features-card-shadow: none;
+    --home-box-ring-color: rgba(52, 211, 153, .3);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/landing/_light.scss b/assets/styles/layout/variables/landing/_light.scss
index 314bc62bf..8352457a4 100644
--- a/assets/styles/layout/variables/landing/_light.scss
+++ b/assets/styles/layout/variables/landing/_light.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
     --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
     --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-ring-color: var(--primary-100);
 }
\ No newline at end of file
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index f48bebc64..efa297b3b 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -10,7 +10,7 @@
                     class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold text-lg transition-colors transition-duration-300 hover:border-yellow-600"
                     >🎉 Introducing the Tailwind CSS Presets <i class="pi pi-arrow-right text-sm"></i
                 ></a>
-                <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
+                <h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
                     Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
                 </p>
@@ -58,7 +58,7 @@
                                 </div>
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Date</span>
-                            <Calendar v-model="dateValue" :showWeek="true" class="w-full" />
+                            <Calendar v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
                         </div>
                         <div class="box p-4 fadein animation-duration-500">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
@@ -72,7 +72,7 @@
                             <div class="mt-5 flex justify-content-center">
                                 <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
                             </div>
-                            <div class="mt-5">
+                            <div class="mt-5 pt-1 pb-2">
                                 <Slider v-model="rangeValues" range class="w-full" />
                             </div>
                         </div>
@@ -80,7 +80,7 @@
                     <div class="flex flex-column w-6 gap-5 pl-3">
                         <div class="box p-4 fadein animation-duration-500">
                             <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-14rem" />
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-10rem" />
                             </div>
                             <div class="flex align-items-center mb-4">
                                 <div class="flex flex-column">
@@ -124,6 +124,27 @@
                             </ul>
                         </div>
                         <div class="box p-4 fadein animation-duration-500">
+                            <div class="flex justify-content-between align-items-center mb-5">
+                                <span class="inline-flex align-items-center">
+                                    <Checkbox id="cbox" v-model="checked" :binary="true" />
+                                    <label for="cbox" class="ml-2">Confirm</label>
+                                </span>
+                                <SplitButton
+                                    label="Save"
+                                    icon="pi pi-plus"
+                                    :model="splitButtonItems"
+                                    outlined
+                                    :pt="{
+                                        button: {
+                                            root: 'p-2'
+                                        },
+                                        menuButton: {
+                                            width: 'auto',
+                                            root: 'p-2'
+                                        }
+                                    }"
+                                />
+                            </div>
                             <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
                         </div>
                     </div>
@@ -157,9 +178,20 @@ export default {
             selectButtonValue: { name: 'Styled', value: 1 },
             dateValue: null,
             rangeValues: [20, 80],
+            checked: false,
+            splitButtonItems: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ],
             items: [
                 { label: 'Home', icon: 'pi pi-fw pi-home' },
-                { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }
+                { label: 'Inbox', icon: 'pi pi-fw pi-inbox' }
             ],
             selectButtonOptions: [
                 { name: 'Styled', value: 1 },