diff --git a/components/Hero.tsx b/components/Hero.tsx
index 50ddc94..5bef124 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,4 +1,13 @@
+// components/Hero.tsx
+"use client";
+
+import { useMemo } from "react";
+import { useTypewriter } from "@/hooks/useTypewriter";
+
 export default function Hero() {
+  const words = useMemo(() => ["Professionell.", "DSGVO-konform.", "Zuverlässig.", "Skalierbar."], []);
+  const typed = useTypewriter(words);
+
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       {/* Background grid */}
@@ -21,7 +30,10 @@ export default function Hero() {
         {/* Headline */}
         <h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-tight mb-6 tracking-tight">
           Ihre IT-Infrastruktur.{" "}
-          <span className="text-gradient">Professionell.</span>
+          <span className="text-gradient">
+            {typed}
+            <span className="animate-pulse">|</span>
+          </span>
           <br />
           Skalierbar. Zuverlässig.
         </h1>
@@ -47,16 +59,10 @@ export default function Hero() {
 
         {/* CTAs */}
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <a
-            href="#contact"
-            className="btn-primary w-full sm:w-auto px-8 py-4 text-lg"
-          >
+          <a href="#contact" className="btn-primary w-full sm:w-auto px-8 py-4 text-lg">
             Projekt anfragen
           </a>
-          <a
-            href="#services"
-            className="btn-secondary w-full sm:w-auto px-8 py-4 text-lg"
-          >
+          <a href="#services" className="btn-secondary w-full sm:w-auto px-8 py-4 text-lg">
             Services ansehen
           </a>
         </div>