diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 9c397b87d..fb7024abd 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -1,4 +1,4 @@
-<div class="min-h-screen overflow-hidden">
+<div class="min-h-screen overflow-hidden homepage-wrapper">
     <!-- Homepage-specific custom HTML -->
     @if(theme('custom_homepage_html'))
     <div class="custom-homepage-content">
@@ -178,15 +178,12 @@
     <section id="panel-features" class="py-24 md:py-32 relative">
         <div class="container mx-auto px-4">
             <!-- Section Header -->
-            <div class="max-w-3xl mb-16">
-                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 border border-secondary/30 text-secondary text-sm font-medium mb-6">
-                    <x-ri-dashboard-3-line class="size-4" />
-                    <span>Full-Featured Control Panel</span>
-                </div>
-                <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
+            <div class="max-w-2xl mb-12">
+                <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
+                <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
                     {{ theme('panel_title', 'Complete Server Management') }}
                 </h2>
-                <p class="text-xl text-color-muted leading-relaxed">
+                <p class="text-base text-color-muted leading-relaxed">
                     {{ theme('panel_subtitle', 'Take full control of your VPS with our comprehensive management dashboard. Every tool you need, right at your fingertips.') }}
                 </p>
             </div>
@@ -435,18 +432,19 @@
     <section id="services" class="py-24 md:py-32">
         <div class="container mx-auto px-4">
             <div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
-                <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
-                    <div class="max-w-2xl">
-                        <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
+                <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12">
+                    <div class="max-w-xl">
+                        <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">What We Offer</p>
+                        <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
                             {{ theme('services_title', 'Our Services') }}
                         </h2>
-                        <p class="text-xl text-color-muted leading-relaxed">
+                        <p class="text-base text-color-muted leading-relaxed">
                             {{ theme('services_subtitle', 'Choose the perfect option for your needs — all with full control panel access for all services we offer to give you total control') }}
                         </p>
                     </div>
-                    <a href="#services" class="group inline-flex items-center gap-2 text-primary font-semibold hover:gap-4 transition-all">
-                        <span>View all services</span>
-                        <x-ri-arrow-right-line class="size-5" />
+                    <a href="#services" class="group inline-flex items-center gap-2 text-primary text-sm font-medium hover:gap-3 transition-all">
+                        <span>View all</span>
+                        <x-ri-arrow-right-line class="size-4" />
                     </a>
                 </div>
 
@@ -482,11 +480,12 @@
     <!-- Infrastructure Features - Alternating Layout -->
     <section id="features" class="py-24 md:py-32">
         <div class="container mx-auto px-4">
-            <div class="text-center max-w-3xl mx-auto mb-20">
-                <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
+            <div class="text-center max-w-2xl mx-auto mb-14">
+                <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
+                <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
                     {{ theme('features_title', 'Enterprise Infrastructure') }}
                 </h2>
-                <p class="text-xl text-color-muted leading-relaxed">
+                <p class="text-base text-color-muted leading-relaxed">
                     {{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
                 </p>
             </div>
@@ -546,11 +545,12 @@
     <!-- Quick Actions - Modern Cards -->
     <section class="py-24 md:py-32 bg-gradient-to-b from-transparent via-background-secondary/30 to-transparent">
         <div class="container mx-auto px-4">
-            <div class="text-center max-w-2xl mx-auto mb-16">
-                <h2 class="text-4xl md:text-5xl font-black text-color-base mb-6">
+            <div class="text-center max-w-xl mx-auto mb-12">
+                <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Quick Start</p>
+                <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
                     {{ theme('quick_actions_title', 'Get Started in Seconds') }}
                 </h2>
-                <p class="text-xl text-color-muted leading-relaxed">
+                <p class="text-base text-color-muted leading-relaxed">
                     {{ theme('quick_actions_subtitle', 'Deploy your VPS and start managing it immediately') }}
                 </p>
             </div>
@@ -632,16 +632,13 @@
                         <div class="absolute bottom-0 right-0 w-24 h-24 bg-secondary/10 rounded-full blur-2xl"></div>
                         
                         <div class="relative z-10">
-                            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
-                                <x-ri-rocket-fill class="size-4" />
-                                <span>Get Started Today</span>
-                            </div>
+                            <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Get Started</p>
                             
-                            <h2 class="text-4xl md:text-5xl font-black text-color-base mb-6 leading-tight">
+                            <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
                                 {{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
                             </h2>
                             
-                            <p class="text-lg text-color-muted mb-8 leading-relaxed">
+                            <p class="text-base text-color-muted mb-8 leading-relaxed">
                                 {{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
                             </p>
                             
@@ -746,6 +743,20 @@
 </div>
 
 <style>
+    /* Custom Color Palette */
+    :root {
+        --hp-lime-light: #D9ED92;
+        --hp-lime: #B5E48C;
+        --hp-green-light: #99D98C;
+        --hp-green: #76C893;
+        --hp-teal-light: #52B69A;
+        --hp-teal: #34A0A4;
+        --hp-blue-light: #168AAD;
+        --hp-blue: #1A759F;
+        --hp-blue-dark: #1E6091;
+        --hp-blue-darkest: #184E77;
+    }
+    
     @keyframes gradient {
         0%, 100% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
@@ -773,7 +784,7 @@
         display: block;
         flex: 1;
         min-width: 8px;
-        background: linear-gradient(to top, #6366f1, rgba(99, 102, 241, 0.5));
+        background: linear-gradient(to top, #1A759F, rgba(26, 117, 159, 0.5));
         border-radius: 4px 4px 0 0;
         animation: chartWave 2s ease-in-out infinite;
         animation-delay: var(--delay, 0s);
@@ -786,4 +797,136 @@
         75% { height: var(--h4, 50%); }
         100% { height: var(--h1, 60%); }
     }
+    
+    /* Homepage Color Overrides */
+    .homepage-wrapper .text-primary { color: #1A759F !important; }
+    .homepage-wrapper .text-secondary { color: #52B69A !important; }
+    .homepage-wrapper .text-success { color: #76C893 !important; }
+    .homepage-wrapper .text-info { color: #168AAD !important; }
+    .homepage-wrapper .text-warning { color: #34A0A4 !important; }
+    .homepage-wrapper .text-purple-500 { color: #1E6091 !important; }
+    .homepage-wrapper .text-orange-500 { color: #52B69A !important; }
+    .homepage-wrapper .text-blue-500 { color: #168AAD !important; }
+    .homepage-wrapper .text-emerald-500 { color: #76C893 !important; }
+    
+    .homepage-wrapper .bg-primary { background-color: #1A759F !important; }
+    .homepage-wrapper .bg-secondary { background-color: #52B69A !important; }
+    .homepage-wrapper .bg-success { background-color: #76C893 !important; }
+    .homepage-wrapper .bg-info { background-color: #168AAD !important; }
+    .homepage-wrapper .bg-warning { background-color: #34A0A4 !important; }
+    .homepage-wrapper .bg-error { background-color: #184E77 !important; }
+    .homepage-wrapper .bg-purple-500 { background-color: #1E6091 !important; }
+    .homepage-wrapper .bg-purple-600 { background-color: #184E77 !important; }
+    .homepage-wrapper .bg-orange-500 { background-color: #52B69A !important; }
+    .homepage-wrapper .bg-blue-500 { background-color: #168AAD !important; }
+    .homepage-wrapper .bg-blue-600 { background-color: #1A759F !important; }
+    .homepage-wrapper .bg-emerald-500 { background-color: #76C893 !important; }
+    .homepage-wrapper .bg-emerald-600 { background-color: #52B69A !important; }
+    
+    .homepage-wrapper .border-primary { border-color: #1A759F !important; }
+    .homepage-wrapper .border-secondary { border-color: #52B69A !important; }
+    .homepage-wrapper .border-success { border-color: #76C893 !important; }
+    .homepage-wrapper .border-info { border-color: #168AAD !important; }
+    .homepage-wrapper .border-warning { border-color: #34A0A4 !important; }
+    .homepage-wrapper .border-purple-500 { border-color: #1E6091 !important; }
+    
+    .homepage-wrapper .shadow-primary\/20,
+    .homepage-wrapper .shadow-primary\/25,
+    .homepage-wrapper .shadow-primary\/30 { --tw-shadow-color: rgba(26, 117, 159, 0.25) !important; }
+    .homepage-wrapper .shadow-success\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
+    .homepage-wrapper .shadow-warning\/30 { --tw-shadow-color: rgba(52, 160, 164, 0.3) !important; }
+    .homepage-wrapper .shadow-info\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
+    .homepage-wrapper .shadow-purple-500\/20,
+    .homepage-wrapper .shadow-purple-500\/30 { --tw-shadow-color: rgba(30, 96, 145, 0.25) !important; }
+    .homepage-wrapper .shadow-blue-500\/20,
+    .homepage-wrapper .shadow-blue-500\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.25) !important; }
+    .homepage-wrapper .shadow-emerald-500\/20,
+    .homepage-wrapper .shadow-emerald-500\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.25) !important; }
+    
+    /* Gradient text override */
+    .homepage-wrapper .bg-gradient-to-r.from-primary.via-secondary.to-primary {
+        background-image: linear-gradient(to right, #184E77, #52B69A, #184E77) !important;
+    }
+    
+    /* Gradient backgrounds */
+    .homepage-wrapper .from-primary { --tw-gradient-from: #1A759F !important; }
+    .homepage-wrapper .to-primary { --tw-gradient-to: #1A759F !important; }
+    .homepage-wrapper .via-primary { --tw-gradient-via: #1A759F !important; }
+    .homepage-wrapper .from-secondary { --tw-gradient-from: #52B69A !important; }
+    .homepage-wrapper .to-secondary { --tw-gradient-to: #52B69A !important; }
+    .homepage-wrapper .from-success { --tw-gradient-from: #76C893 !important; }
+    .homepage-wrapper .to-success { --tw-gradient-to: #76C893 !important; }
+    .homepage-wrapper .from-warning { --tw-gradient-from: #34A0A4 !important; }
+    .homepage-wrapper .to-warning { --tw-gradient-to: #34A0A4 !important; }
+    .homepage-wrapper .from-info { --tw-gradient-from: #168AAD !important; }
+    .homepage-wrapper .to-info { --tw-gradient-to: #168AAD !important; }
+    .homepage-wrapper .from-purple-500 { --tw-gradient-from: #1E6091 !important; }
+    .homepage-wrapper .to-purple-500 { --tw-gradient-to: #1E6091 !important; }
+    .homepage-wrapper .from-blue-500 { --tw-gradient-from: #168AAD !important; }
+    .homepage-wrapper .to-blue-500 { --tw-gradient-to: #168AAD !important; }
+    .homepage-wrapper .from-emerald-500 { --tw-gradient-from: #76C893 !important; }
+    .homepage-wrapper .to-emerald-500 { --tw-gradient-to: #76C893 !important; }
+    
+    /* Opacity variants */
+    .homepage-wrapper .bg-primary\/5 { background-color: rgba(26, 117, 159, 0.05) !important; }
+    .homepage-wrapper .bg-primary\/10 { background-color: rgba(26, 117, 159, 0.1) !important; }
+    .homepage-wrapper .bg-primary\/15 { background-color: rgba(26, 117, 159, 0.15) !important; }
+    .homepage-wrapper .bg-primary\/20 { background-color: rgba(26, 117, 159, 0.2) !important; }
+    .homepage-wrapper .bg-secondary\/5 { background-color: rgba(82, 182, 154, 0.05) !important; }
+    .homepage-wrapper .bg-secondary\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
+    .homepage-wrapper .bg-secondary\/15 { background-color: rgba(82, 182, 154, 0.15) !important; }
+    .homepage-wrapper .bg-secondary\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
+    .homepage-wrapper .bg-success\/10 { background-color: rgba(118, 200, 147, 0.1) !important; }
+    .homepage-wrapper .bg-success\/20 { background-color: rgba(118, 200, 147, 0.2) !important; }
+    .homepage-wrapper .bg-warning\/5 { background-color: rgba(52, 160, 164, 0.05) !important; }
+    .homepage-wrapper .bg-warning\/10 { background-color: rgba(52, 160, 164, 0.1) !important; }
+    .homepage-wrapper .bg-warning\/20 { background-color: rgba(52, 160, 164, 0.2) !important; }
+    .homepage-wrapper .bg-info\/5 { background-color: rgba(22, 138, 173, 0.05) !important; }
+    .homepage-wrapper .bg-info\/10 { background-color: rgba(22, 138, 173, 0.1) !important; }
+    .homepage-wrapper .bg-purple-500\/5 { background-color: rgba(30, 96, 145, 0.05) !important; }
+    .homepage-wrapper .bg-purple-500\/10 { background-color: rgba(30, 96, 145, 0.1) !important; }
+    .homepage-wrapper .bg-purple-500\/20 { background-color: rgba(30, 96, 145, 0.2) !important; }
+    .homepage-wrapper .bg-orange-500\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
+    .homepage-wrapper .bg-orange-500\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
+    
+    .homepage-wrapper .border-primary\/20 { border-color: rgba(26, 117, 159, 0.2) !important; }
+    .homepage-wrapper .border-primary\/30 { border-color: rgba(26, 117, 159, 0.3) !important; }
+    .homepage-wrapper .border-primary\/40 { border-color: rgba(26, 117, 159, 0.4) !important; }
+    .homepage-wrapper .border-secondary\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
+    .homepage-wrapper .border-secondary\/30 { border-color: rgba(82, 182, 154, 0.3) !important; }
+    .homepage-wrapper .border-secondary\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
+    .homepage-wrapper .border-success\/20 { border-color: rgba(118, 200, 147, 0.2) !important; }
+    .homepage-wrapper .border-success\/40 { border-color: rgba(118, 200, 147, 0.4) !important; }
+    .homepage-wrapper .border-warning\/20 { border-color: rgba(52, 160, 164, 0.2) !important; }
+    .homepage-wrapper .border-warning\/40 { border-color: rgba(52, 160, 164, 0.4) !important; }
+    .homepage-wrapper .border-info\/20 { border-color: rgba(22, 138, 173, 0.2) !important; }
+    .homepage-wrapper .border-info\/40 { border-color: rgba(22, 138, 173, 0.4) !important; }
+    .homepage-wrapper .border-purple-500\/20 { border-color: rgba(30, 96, 145, 0.2) !important; }
+    .homepage-wrapper .border-purple-500\/40 { border-color: rgba(30, 96, 145, 0.4) !important; }
+    .homepage-wrapper .border-orange-500\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
+    .homepage-wrapper .border-orange-500\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
+    
+    .homepage-wrapper .hover\:border-primary\/30:hover { border-color: rgba(26, 117, 159, 0.3) !important; }
+    .homepage-wrapper .hover\:border-primary\/40:hover { border-color: rgba(26, 117, 159, 0.4) !important; }
+    .homepage-wrapper .hover\:border-secondary\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
+    .homepage-wrapper .hover\:border-success\/30:hover { border-color: rgba(118, 200, 147, 0.3) !important; }
+    .homepage-wrapper .hover\:border-success\/40:hover { border-color: rgba(118, 200, 147, 0.4) !important; }
+    .homepage-wrapper .hover\:border-warning\/30:hover { border-color: rgba(52, 160, 164, 0.3) !important; }
+    .homepage-wrapper .hover\:border-warning\/40:hover { border-color: rgba(52, 160, 164, 0.4) !important; }
+    .homepage-wrapper .hover\:border-info\/40:hover { border-color: rgba(22, 138, 173, 0.4) !important; }
+    .homepage-wrapper .hover\:border-purple-500\/40:hover { border-color: rgba(30, 96, 145, 0.4) !important; }
+    .homepage-wrapper .hover\:border-orange-500\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
+    
+    /* Hover shadow effects */
+    .homepage-wrapper .hover\:shadow-primary\/10:hover { --tw-shadow-color: rgba(26, 117, 159, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-primary\/30:hover { --tw-shadow-color: rgba(26, 117, 159, 0.3) !important; }
+    .homepage-wrapper .hover\:shadow-secondary\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-success\/10:hover { --tw-shadow-color: rgba(118, 200, 147, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-warning\/10:hover { --tw-shadow-color: rgba(52, 160, 164, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-info\/10:hover { --tw-shadow-color: rgba(22, 138, 173, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-purple-500\/10:hover { --tw-shadow-color: rgba(30, 96, 145, 0.1) !important; }
+    .homepage-wrapper .hover\:shadow-purple-500\/30:hover { --tw-shadow-color: rgba(30, 96, 145, 0.3) !important; }
+    .homepage-wrapper .hover\:shadow-blue-500\/30:hover { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
+    .homepage-wrapper .hover\:shadow-emerald-500\/30:hover { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
+    .homepage-wrapper .hover\:shadow-orange-500\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
 </style>