diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Home.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Home.razor
index e4d9fde5..fe6e2d07 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Home.razor
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Home.razor
@@ -1,5 +1,6 @@
 @page "/"
 @inject IStringLocalizer<Home> L
+@inject IJSRuntime JS
 
 <PageTitle>aPOS - @L["HeroHeadline"]</PageTitle>
 
@@ -22,11 +23,11 @@
 
     <div class="hero-actions">
         <a href="#pricing" class="btn-accent btn-accent-lg">
-            <i class="lucide lucide-arrow-right"></i>
+            <i data-lucide="arrow-right"></i>
             @L["HeroCTA_Primary"]
         </a>
         <a href="#features" class="btn-outline btn-outline-lg">
-            <i class="lucide lucide-play"></i>
+            <i data-lucide="play"></i>
             @L["HeroCTA_Secondary"]
         </a>
     </div>
@@ -67,7 +68,7 @@
             {
                 <div class="tpos-feature-card">
                     <div class="tpos-feature-icon-bg" style="background: @f.IconBg;">
-                        <i class="lucide lucide-@L[f.Icon]" style="color: @f.IconColor;"></i>
+                        <i data-lucide="@L[f.Icon]" style="color: @f.IconColor;"></i>
                     </div>
                     <h3 class="tpos-feature-title">@L[f.Title]</h3>
                     <p class="tpos-feature-desc">@L[f.Desc]</p>
@@ -209,7 +210,7 @@
                 {
                     <div class="tpos-addon-item">
                         <div class="tpos-addon-left">
-                            <i class="lucide lucide-@L[addon.Icon]" style="color: var(--accent);"></i>
+                            <i data-lucide="@L[addon.Icon]" style="color: var(--accent-primary);"></i>
                             <span class="tpos-addon-name">@L[addon.Name]</span>
                         </div>
                         <div class="tpos-addon-price">@L[addon.Price]</div>
@@ -228,7 +229,7 @@
     <p class="tpos-cta-sub">@L["CTA_Subtitle"]</p>
     <div class="tpos-cta-actions">
         <a href="#" class="btn-accent btn-accent-lg">
-            <i class="lucide lucide-arrow-right"></i>
+            <i data-lucide="arrow-right"></i>
             @L["CTA_Primary"]
         </a>
         <a href="#" class="btn-outline btn-outline-lg">@L["CTA_Secondary"]</a>
@@ -277,15 +278,24 @@
     <div class="tpos-footer-bottom">
         <div class="tpos-footer-copy">@L["Footer_Copyright"]</div>
         <div class="tpos-footer-socials">
-            <a href="#" class="tpos-social-link"><i class="lucide lucide-facebook"></i></a>
-            <a href="#" class="tpos-social-link"><i class="lucide lucide-instagram"></i></a>
-            <a href="#" class="tpos-social-link"><i class="lucide lucide-youtube"></i></a>
-            <a href="#" class="tpos-social-link"><i class="lucide lucide-linkedin"></i></a>
+            <a href="#" class="tpos-social-link"><i data-lucide="facebook"></i></a>
+            <a href="#" class="tpos-social-link"><i data-lucide="instagram"></i></a>
+            <a href="#" class="tpos-social-link"><i data-lucide="youtube"></i></a>
+            <a href="#" class="tpos-social-link"><i data-lucide="linkedin"></i></a>
         </div>
     </div>
 </footer>
 
 @code {
+    // Initialize Lucide icons after render
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JS.InvokeVoidAsync("lucide.createIcons");
+        }
+    }
+
     // Feature cards data
     private record FeatureItem(string Icon, string Title, string Desc, string IconColor, string IconBg);
     private readonly FeatureItem[] _features =
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
index 31c8e9b4..5ef59eb3 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
@@ -15,8 +15,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&display=swap"
         rel="stylesheet">
 
-    <!-- Lucide Icons (matching Pencil design) -->
-    <link href="https://unpkg.com/lucide-static@latest/font/lucide.css" rel="stylesheet">
+    <!-- Lucide Icons JS (matching Pencil design) -->
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 
     <!-- Material Design Icons -->
     <link
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/en-US.json b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/en-US.json
index c9f9594c..df337058 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/en-US.json
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/en-US.json
@@ -5,7 +5,7 @@
     "Nav_Contact": "Contact",
     "Nav_Login": "Login",
     "Nav_FreeTrial": "Start Free Trial",
-    "HeroBadge": "AI-Powered POS &amp; Loyalty",
+    "HeroBadge": "AI-Powered POS & Loyalty",
     "HeroHeadline": "Smart Sales Management with AI",
     "HeroSubtext": "All-in-one POS solution for Restaurants, Cafes, Bars, Karaoke and Spas — automate accounting, customer loyalty and real-time reporting.",
     "HeroCTA_Primary": "Start for Free",
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/vi-VN.json b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/vi-VN.json
index 35ced12c..1d222d0e 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/vi-VN.json
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/vi-VN.json
@@ -5,7 +5,7 @@
     "Nav_Contact": "Liên hệ",
     "Nav_Login": "Đăng nhập",
     "Nav_FreeTrial": "Dùng thử miễn phí",
-    "HeroBadge": "AI-Powered POS &amp; Loyalty",
+    "HeroBadge": "AI-Powered POS & Loyalty",
     "HeroHeadline": "Quản lý bán hàng thông minh với AI",
     "HeroSubtext": "Giải pháp POS toàn diện cho Nhà hàng, Cafe, Bar, Karaoke và Spa — tự động hóa kế toán, tích điểm khách hàng và báo cáo realtime.",
     "HeroCTA_Primary": "Bắt đầu miễn phí",