diff --git a/assets/hero-person.svg b/assets/hero-person.svg
new file mode 100644
index 0000000..1e47b87
--- /dev/null
+++ b/assets/hero-person.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 600">
+  <!-- Person with laptop -->
+  <defs>
+    <linearGradient id="laptopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e40af;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Table/Desk -->
+  <rect x="0" y="350" width="540" height="20" fill="#F59E0B" rx="5"/>
+  <rect x="520" y="350" width="20" height="250" fill="#9CA3AF" rx="3"/>
+  
+  <!-- Laptop -->
+  <rect x="80" y="250" width="200" height="120" fill="url(#laptopGrad)" rx="8" stroke="#1e40af" stroke-width="3"/>
+  <rect x="95" y="270" width="170" height="80" fill="#1e3a8a" rx="4"/>
+  
+  <!-- Login box -->
+  <rect x="110" y="285" width="140" height="50" fill="#374151" rx="6"/>
+  <circle cx="125" cy="300" r="3" fill="#10B981"/>
+  <circle cx="145" cy="300" r="3" fill="#10B981"/>
+  <circle cx="165" cy="300" r="3" fill="#10B981"/>
+  <circle cx="185" cy="300" r="3" fill="#10B981"/>
+  <circle cx="205" cy="300" r="3" fill="#10B981"/>
+  <rect x="115" y="315" width="120" height="12" fill="#10B981" rx="6"/>
+  
+  <!-- Browser dots -->
+  <circle cx="225" cy="265" r="3" fill="#EF4444"/>
+  <circle cx="240" cy="265" r="3" fill="#F59E0B"/>
+  <circle cx="255" cy="265" r="3" fill="#10B981"/>
+  
+  <!-- Person -->
+  <!-- Head -->
+  <circle cx="400" cy="80" r="40" fill="#FCA5A5"/>
+  <!-- Hair -->
+  <path d="M360 70 Q370 40, 400 35 Q430 40, 440 70 Q440 90, 420 95 L380 95 Q360 90, 360 70 Z" fill="#1e3a8a"/>
+  
+  <!-- Body (Green shirt) -->
+  <rect x="350" y="120" width="100" height="150" fill="#10B981" rx="10"/>
+  <path d="M350 130 Q400 140, 450 130" stroke="#059669" stroke-width="3" fill="none"/>
+  
+  <!-- Arms -->
+  <rect x="320" y="150" width="30" height="80" fill="#FCA5A5" rx="8"/>
+  <rect x="450" y="150" width="30" height="80" fill="#FCA5A5" rx="8"/>
+  
+  <!-- Hands on laptop -->
+  <ellipse cx="280" cy="260" rx="20" ry="12" fill="#FCA5A5"/>
+  <ellipse cx="380" cy="280" rx="20" ry="12" fill="#FCA5A5"/>
+  
+  <!-- Legs (Blue pants) -->
+  <rect x="360" y="270" width="35" height="150" fill="#3b82f6" rx="8"/>
+  <rect x="405" y="270" width="35" height="150" fill="#2563eb" rx="8"/>
+  
+  <!-- Background circle -->
+  <circle cx="450" cy="200" r="100" fill="#D1FAE5" opacity="0.3"/>
+</svg>
diff --git a/assets/hero-shield.svg b/assets/hero-shield.svg
new file mode 100644
index 0000000..5217392
--- /dev/null
+++ b/assets/hero-shield.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 300">
+  <!-- Shield gradient -->
+  <defs>
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#B8860B;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Outer shield -->
+  <path d="M125 10 C80 10, 40 20, 20 40 C20 120, 40 220, 125 280 C210 220, 230 120, 230 40 C210 20, 170 10, 125 10 Z" 
+        fill="url(#shieldGrad)" stroke="#D97706" stroke-width="3"/>
+  <!-- Inner shield -->
+  <path d="M125 40 C95 40, 70 47, 55 60 C55 120, 70 200, 125 250 C180 200, 195 120, 195 60 C180 47, 155 40, 125 40 Z" 
+        fill="#4B5563" opacity="0.8"/>
+  <!-- Check mark -->
+  <path d="M90 130 L110 160 L165 100" 
+        stroke="#10B981" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/src/presentation/web/pages/landing/index.py b/src/presentation/web/pages/landing/index.py
index 104f2ea..f4f6be9 100644
--- a/src/presentation/web/pages/landing/index.py
+++ b/src/presentation/web/pages/landing/index.py
@@ -266,12 +266,12 @@ def hero() -> rx.Component:
                         filter="blur(60px)",
                         style={"animation": "pulse 4s ease-in-out infinite"},
                     ),
-                    # Floating card 1 - top right
+                    # Floating card 1 - top right with shield
                     rx.box(
                         rx.vstack(
-                            rx.icon("shield-check", size=28, color="#10B981"),
+                            rx.image(src="/hero-shield.svg", width="50px", height="auto"),
                             rx.text("99.9%", font_size="24px", font_weight="900", color="white"),
-                            rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"),
+                            rx.text("امنیت", font_size="13px", color="#94A3B8", font_weight="600"),
                             spacing="2",
                             align="center",
                         ),
@@ -279,11 +279,11 @@ def hero() -> rx.Component:
                         top="-20px",
                         right="-30px",
                         padding="20px 28px",
-                        background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
-                        border="2px solid rgba(16, 185, 129, 0.3)",
+                        background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
+                        border="2px solid rgba(245, 158, 11, 0.3)",
                         border_radius="20px",
                         backdrop_filter="blur(10px)",
-                        box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
+                        box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
                         style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
                     ),
                     # Floating card 2 - left middle
@@ -331,13 +331,29 @@ def hero() -> rx.Component:
                         box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
                         style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
                     ),
-                    # Main image
-                    rx.image(
-                        src="https://illustrations.popsy.co/violet/web-design.svg",
-                        width="600px",
-                        height="auto",
-                        filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
-                        style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
+                    # Main illustration - person with laptop
+                    rx.box(
+                        # Background shield decoration
+                        rx.image(
+                            src="/hero-shield.svg",
+                            width="280px",
+                            height="auto",
+                            position="absolute",
+                            top="-60px",
+                            right="80px",
+                            opacity="0.2",
+                            filter="blur(2px)",
+                            style={"animation": "rotate 40s linear infinite"},
+                        ),
+                        # Main person image
+                        rx.image(
+                            src="/hero-person.svg",
+                            width="550px",
+                            height="auto",
+                            filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
+                            style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
+                        ),
+                        position="relative",
                     ),
                     position="relative",
                 ),
@@ -599,7 +615,7 @@ def about_section() -> rx.Component:
                 padding="10px 24px",
                 border_radius="full",
             ),
-            rx.heading("مزایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
+            rx.heading("زایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
             rx.text(
                 "ارائه‌دهنده معتبر خدمات هاستینگ و زیرساخت ابری در ایران",
                 color="#94A3B8",
@@ -1279,8 +1295,9 @@ def index() -> rx.Component:
         navbar(),
         hero(),
         wordpress_cloud_highlight(),
-        about_section(),
         services_section(),
+
+        about_section(),
         # pricing_section(),
         # server_comparison(),
         # testimonials_section(),