diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx
index 771f14707..a4ee63ff1 100644
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[slug]/page.tsx
@@ -50,6 +50,7 @@ const mdxComponents = {
   TeamGrid,
   JsonLd,
   Button,
+  Badge,
   AnimatedCounter,
   GrowthChart,
   DeepDrillAnimation,
diff --git a/content/de/ueber-uns.mdx b/content/de/ueber-uns.mdx
index 52d8baffc..b29961f3f 100644
--- a/content/de/ueber-uns.mdx
+++ b/content/de/ueber-uns.mdx
@@ -56,14 +56,14 @@ layout: "fullBleed"
   <div className="absolute inset-0 bg-[url('/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg')] opacity-20 bg-cover bg-center mix-blend-overlay group-hover:scale-105 transition-transform duration-1000"></div>
   <div className="absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322]/90 to-[#050B14]"></div>
   <div className="container max-w-4xl mx-auto px-4 relative z-10 text-center">
-    <div className="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary border border-primary/20 text-xs font-bold uppercase tracking-wider mb-8">
-      Bundesweite Präsenz
+    <div className="mb-8">
+      <Badge variant="accent">Bundesweite Präsenz</Badge>
     </div>
     <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70">Infrastruktur für<br />ein ganzes Land</h2>
     <p className="text-lg md:text-xl text-white/60 mb-12 max-w-2xl mx-auto leading-relaxed">Seit 2016 haben wir in über 200 Projekten quer durch Deutschland bewiesen, dass wir Infrastrukturprojekte jeder Größenordnung verlässlich umsetzen.</p>
-    <a href="/de/referenzen" className="inline-flex items-center gap-3 bg-primary text-[#050B14] px-8 py-4 rounded-xl font-bold uppercase tracking-wider hover:bg-white hover:-translate-y-1 transition-all duration-300 shadow-[0_0_20px_rgba(130,237,32,0.3)]">
+    <Button href="/de/referenzen" variant="primary" size="lg" className="shadow-[0_0_20px_rgba(130,237,32,0.3)]">
       Zu unseren Referenzen <span className="text-xl leading-none">&rarr;</span>
-    </a>
+    </Button>
   </div>
 </div>
 
diff --git a/content/en/ueber-uns.mdx b/content/en/ueber-uns.mdx
index 496c1849c..8a54db327 100644
--- a/content/en/ueber-uns.mdx
+++ b/content/en/ueber-uns.mdx
@@ -56,14 +56,14 @@ layout: "fullBleed"
   <div className="absolute inset-0 bg-[url('/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-54.jpg')] opacity-20 bg-cover bg-center mix-blend-overlay group-hover:scale-105 transition-transform duration-1000"></div>
   <div className="absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322]/90 to-[#050B14]"></div>
   <div className="container max-w-4xl mx-auto px-4 relative z-10 text-center">
-    <div className="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary border border-primary/20 text-xs font-bold uppercase tracking-wider mb-8">
-      Nationwide Presence
+    <div className="mb-8">
+      <Badge variant="accent">Nationwide Presence</Badge>
     </div>
     <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70">Infrastructure for<br />an entire country</h2>
     <p className="text-lg md:text-xl text-white/60 mb-12 max-w-2xl mx-auto leading-relaxed">Since 2016, we have proven in over 200 projects across Germany that we reliably implement infrastructure projects of any scale.</p>
-    <a href="/en/referenzen" className="inline-flex items-center gap-3 bg-primary text-[#050B14] px-8 py-4 rounded-xl font-bold uppercase tracking-wider hover:bg-white hover:-translate-y-1 transition-all duration-300 shadow-[0_0_20px_rgba(130,237,32,0.3)]">
+    <Button href="/en/referenzen" variant="primary" size="lg" className="shadow-[0_0_20px_rgba(130,237,32,0.3)]">
       View our references <span className="text-xl leading-none">&rarr;</span>
-    </a>
+    </Button>
   </div>
 </div>