diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index 9e1d301..c3a0dd2 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { motion, useScroll, useTransform } from 'framer-motion'
-import { ChevronDownIcon } from 'lucide-react'
-import { PremiumButton } from '../PremiumButton'
+import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
+import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
 import { useFieldSaver } from '../../admin/AdminContext'
@@ -84,20 +84,45 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
             className="mt-10 flex flex-wrap items-center gap-4"
           >
-            {/* دکمه اصلی */}
-            <PremiumButton to={href(hero.cta_primary_href)}>
-              <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
-            </PremiumButton>
+            {/* دکمه اصلی: کپسولی شیشه‌ای دودی با دایره کهربایی اختصاصی برای آیکون */}
+            <ButtonLink
+              to={href(hero.cta_primary_href)}
+              variant="copper"
+              className="!p-1.5 !pr-7 !rounded-full shadow-lg shadow-black/40 hover:shadow-copper/25 transition-all duration-300"
+            >
+              <span className="text-sm font-medium tracking-wide text-ivory">
+                <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
+              </span>
+              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-copper text-char shadow-md transition-all duration-300 group-hover:scale-110 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1">
+                <ArrowLeftIcon className="h-4 w-4 stroke-[2.5] ltr:-scale-x-100" />
+              </span>
+            </ButtonLink>
 
-            {/* دکمه ثانویه */}
-            <PremiumButton to={href(hero.cta_secondary_href)} className="bg-char/40 backdrop-blur-md">
+            {/* دکمه ثانویه: شیشه دودی مات (Smoked Glass) با کادر ظریف */}
+            <ButtonLink
+              to={href(hero.cta_secondary_href)}
+              variant="outline"
+              className="!rounded-full !px-8 !py-3.5 bg-char/40 backdrop-blur-md border border-ivory/20 text-ivory hover:border-copper/70 hover:text-copper transition-all duration-300 shadow-sm"
+            >
               <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
-            </PremiumButton>
+            </ButtonLink>
           </motion.div>
         </div>
 
         {/* کادر آمار شناور (گوشه پایین چپ): شیشه‌ای با لبه‌های گرد مدرن */}
-       
+        <motion.div
+          initial={{ opacity: 0, x: -24 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
+          className="absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:ltr:right-10 lg:rtl:left-10"
+        >
+          <p className="text-3xl font-bold text-copper font-mono">
+            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
+          </p>
+          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
+            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
+          </p>
+        </motion.div>
       </motion.div>
 
       {/* دکمه اسکرول پایین: تبدیل‌شده به یک گوی شیشه‌ای دایره‌ای */}