diff --git a/0-Agents/AgentsWebUI/Components/Pages/Home.razor b/0-Agents/AgentsWebUI/Components/Pages/Home.razor
index 791bd0c..c2b8787 100644
--- a/0-Agents/AgentsWebUI/Components/Pages/Home.razor
+++ b/0-Agents/AgentsWebUI/Components/Pages/Home.razor
@@ -7,7 +7,7 @@
     <!-- Hero Banner -->
     <div class="hero-banner mb-5">
         <div class="d-flex align-items-center gap-3 mb-2">
-            <span aria-hidden="true" style="font-size:2.5rem;">🤖</span>
+            <span aria-hidden="true" class="hero-icon">🤖</span>
             <h1 class="display-5 fw-bold mb-0">Microsoft Agent Framework Samples</h1>
         </div>
         <p class="lead mb-4">
diff --git a/0-Agents/AgentsWebUI/wwwroot/app.css b/0-Agents/AgentsWebUI/wwwroot/app.css
index 2f90a2f..400b67e 100644
--- a/0-Agents/AgentsWebUI/wwwroot/app.css
+++ b/0-Agents/AgentsWebUI/wwwroot/app.css
@@ -97,6 +97,7 @@
     --font-size-2xl:          1.5rem;    /*  24px */
     --font-size-3xl:          1.875rem;  /*  30px */
     --font-size-4xl:          2.25rem;   /*  36px */
+    --font-size-5xl:          2.5rem;    /*  40px */
 
     --font-weight-normal:     400;
     --font-weight-medium:     500;
@@ -295,6 +296,11 @@ main > article.content {
     font-size: var(--font-size-lg);
 }
 
+/* Hero icon (robot emoji beside the h1) */
+.hero-icon {
+    font-size: var(--font-size-5xl);
+}
+
 /* Pill badges inside hero */
 .hero-badge {
     background: rgba(255,255,255,0.18);