diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index 58680b7..700f820 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { Link } from 'react-router-dom'
-import { ArrowLeftIcon, Building2Icon, ChevronDownIcon } from 'lucide-react'
+import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
 import { useFieldSaver } from '../../admin/AdminContext'
 import { InlineEdit } from '../admin/InlineEdit'
+import { HeroProjectBadge } from './HeroProjectBadge'
 import { SingletonPill } from '../../admin/Editable'
 
 export function Hero() {
@@ -131,7 +132,7 @@ export function Hero() {
           initial={{ opacity: 0, x: -24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.6, delay: 0.36, ease: [0.23, 1, 0.32, 1] }}
-          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-72 lg:block lg:ltr:right-10 lg:rtl:left-10"
+          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-fit max-w-[22rem] lg:block lg:ltr:right-10 lg:rtl:left-10"
         >
           <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-ink/55 p-6 shadow-2xl shadow-black/50 backdrop-blur-2xl transition-colors duration-500 group-hover:border-copper/40">
             {/* خط مویی مسی روی لبهٔ شروع */}
@@ -139,24 +140,8 @@ export function Hero() {
             {/* هالهٔ مسی نرم گوشهٔ مقابل — با هاور پررنگ‌تر */}
             <span aria-hidden="true" className="absolute -top-20 -end-20 h-44 w-44 rounded-full bg-copper/10 blur-3xl transition-colors duration-700 group-hover:bg-copper/20" />
 
-            <div className="relative flex items-start gap-4">
-              <span className="relative mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
-                <Building2Icon className="h-5 w-5 text-copper" aria-hidden="true" />
-                <span className="absolute -end-1 -top-1 flex h-2.5 w-2.5" aria-hidden="true">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
-                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full border border-ink bg-copper" />
-                </span>
-              </span>
-              <div className="min-w-0">
-                {String(hero.badge_value ?? '').trim() !== '' && (
-                  <p className="font-mono text-[2rem] font-bold leading-none tracking-tight text-copper">
-                    <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
-                  </p>
-                )}
-                <p className={`text-[13px] font-light leading-6 text-ivory/75 ${String(hero.badge_value ?? '').trim() !== '' ? 'mt-2.5' : ''}`}>
-                  <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
-                </p>
-              </div>
+            <div className="relative">
+              <HeroProjectBadge value={String(hero.badge_value ?? '').trim()} label={hero.badge_label} />
             </div>
           </div>
         </motion.div>
diff --git a/frontend/src/components/home/HeroProjectBadge.tsx b/frontend/src/components/home/HeroProjectBadge.tsx
new file mode 100644
index 0000000..e524730
--- /dev/null
+++ b/frontend/src/components/home/HeroProjectBadge.tsx
@@ -0,0 +1,26 @@
+import { Building2Icon } from 'lucide-react'
+
+/**
+ * نشان «پروژه فعال» هیرو — آیکون و متن کنار هم، با فاصلهٔ یکنواخت و
+ * چیدمان وسط‌چین. فلکس‌باکس ستون را از بین می‌برد تا فاصلهٔ آیکون و متن
+ * یکدست بماند و آیکون درست با متن هم‌تراز شود.
+ */
+export function HeroProjectBadge({ value, label }: { value: string; label: string }) {
+  return (
+    <div className="flex items-center gap-3.5 text-center">
+      {/* آیکون در کادر مربعی با نشان زندهٔ مسی */}
+      <span className="relative flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
+        <Building2Icon className="h-6 w-6 text-copper" aria-hidden="true" />
+        <span className="absolute -end-1 -top-1 flex h-3 w-3" aria-hidden="true">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
+          <span className="relative inline-flex h-3 w-3 rounded-full border border-ink bg-copper" />
+        </span>
+      </span>
+
+      <div className="flex flex-col items-center">
+        {value && <p className="font-mono text-[2.5rem] font-bold leading-none tracking-tight text-copper">{value}</p>}
+        <p className={`text-center text-[15px] font-light leading-7 text-ivory/85 ${value ? 'mt-2' : ''}`}>{label}</p>
+      </div>
+    </div>
+  )
+}