diff --git a/apps/web/src/features/hero/components/HeroSection.tsx b/apps/web/src/features/hero/components/HeroSection.tsx
index d274a6e..b0802f0 100644
--- a/apps/web/src/features/hero/components/HeroSection.tsx
+++ b/apps/web/src/features/hero/components/HeroSection.tsx
@@ -56,128 +56,134 @@ export const HeroSection: React.FC = () => {
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="max-w-5xl mx-auto text-center"
+        className="max-w-7xl mx-auto w-full"
       >
-        {/* Profile Image with Green Border */}
-        <motion.div
-          variants={imageVariants}
-          className="mb-12 flex justify-center"
-        >
-          <div className="relative w-48 h-48 sm:w-56 sm:h-56">
-            {/* Animated green borders on sides */}
-            <svg
-              className="absolute inset-0 w-full h-full pointer-events-none"
-              viewBox="0 0 224 224"
-              xmlns="http://www.w3.org/2000/svg"
+        {/* Grid Layout: Text left, Image right on desktop, stacked on mobile */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+          {/* Text Content */}
+          <div className="text-center lg:text-left">
+            {/* Badge */}
+            <motion.div variants={itemVariants} className="mb-8">
+              <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
+                <span className="text-green-400 text-sm font-medium flex items-center gap-2 justify-center lg:justify-start">
+                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                  Softwareentwickler & Architektur-Enthusiast | Deutschland
+                </span>
+              </div>
+            </motion.div>
+
+            {/* Main Heading */}
+            <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+              <span className="text-white">Robert Bretz</span>
+              <br />
+              <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
+                Saubere, performante digitale Lösungen
+              </span>
+            </motion.h1>
+
+            {/* Subtitle */}
+            <motion.p
+              variants={itemVariants}
+              className="text-gray-300 text-lg sm:text-xl mb-8"
             >
-              <motion.line
-                x1="10"
-                y1="0"
-                x2="10"
-                y2="224"
-                stroke="#22c55e"
-                strokeWidth="3"
-                variants={borderVariants}
-                initial="hidden"
-                animate="visible"
-              />
-              <motion.line
-                x1="214"
-                y1="0"
-                x2="214"
-                y2="224"
-                stroke="#22c55e"
-                strokeWidth="3"
-                variants={borderVariants}
-                initial="hidden"
-                animate="visible"
-              />
-            </svg>
+              Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
+              Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
+            </motion.p>
 
-            {/* Profile Image */}
-            <img
-              src="/Bewerbungsfoto.png"
-              alt="Robert Bretz"
-              className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30"
-            />
+            {/* Stats */}
+            <motion.div
+              variants={itemVariants}
+              className="grid grid-cols-3 gap-3 sm:gap-6 mb-12"
+            >
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">4+</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Jahre Erfahrung</div>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">30+</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Projekte umgesetzt</div>
+              </motion.div>
+              <motion.div
+                whileHover={{ scale: 1.05, y: -4 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+              >
+                <div className="text-2xl sm:text-3xl font-bold text-green-500">99%</div>
+                <div className="text-gray-400 text-xs sm:text-sm">Performance-Fokus</div>
+              </motion.div>
+            </motion.div>
+
+            {/* CTA Buttons */}
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
+              <Button variant="primary" size="lg">
+                Lass uns sprechen
+              </Button>
+              <Button variant="secondary" size="lg">
+                Projekte ansehen
+              </Button>
+            </motion.div>
           </div>
-        </motion.div>
 
-        {/* Badge */}
-        <motion.div variants={itemVariants} className="mb-8">
-          <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
-            <span className="text-green-400 text-sm font-medium flex items-center gap-2">
-              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-              Softwareentwickler & Architektur-Enthusiast | Deutschland
-            </span>
-          </div>
-        </motion.div>
-
-        {/* Main Heading */}
-        <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-          <span className="text-white">Robert Bretz</span>
-          <br />
-          <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
-            Saubere, performante digitale Lösungen
-          </span>
-        </motion.h1>
-
-        {/* Subtitle */}
-        <motion.p
-          variants={itemVariants}
-          className="text-gray-300 text-lg sm:text-xl max-w-2xl mx-auto mb-8"
-        >
-          Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
-          Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
-        </motion.p>
-
-        {/* Stats */}
-        <motion.div
-          variants={itemVariants}
-          className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 mb-12 max-w-2xl mx-auto"
-        >
+          {/* Profile Image - Right side on desktop, centered on mobile */}
           <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
+            variants={imageVariants}
+            className="flex justify-center lg:justify-end"
           >
-            <div className="text-3xl font-bold text-green-500">4+</div>
-            <div className="text-gray-400 text-sm">Jahre Erfahrung</div>
-          </motion.div>
-          <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
-          >
-            <div className="text-3xl font-bold text-green-500">30+</div>
-            <div className="text-gray-400 text-sm">Projekte umgesetzt</div>
-          </motion.div>
-          <motion.div
-            whileHover={{ scale: 1.05, y: -4 }}
-            transition={{ type: 'spring', stiffness: 300 }}
-            className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
-          >
-            <div className="text-3xl font-bold text-green-500">99%</div>
-            <div className="text-gray-400 text-sm">Performance-Fokus</div>
-          </motion.div>
-        </motion.div>
+            <div className="relative w-56 h-56 sm:w-72 sm:h-72 lg:w-96 lg:h-96">
+              {/* Animated green borders on sides */}
+              <svg
+                className="absolute inset-0 w-full h-full pointer-events-none"
+                viewBox="0 0 224 224"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <motion.line
+                  x1="10"
+                  y1="0"
+                  x2="10"
+                  y2="224"
+                  stroke="#22c55e"
+                  strokeWidth="3"
+                  variants={borderVariants}
+                  initial="hidden"
+                  animate="visible"
+                />
+                <motion.line
+                  x1="214"
+                  y1="0"
+                  x2="214"
+                  y2="224"
+                  stroke="#22c55e"
+                  strokeWidth="3"
+                  variants={borderVariants}
+                  initial="hidden"
+                  animate="visible"
+                />
+              </svg>
 
-        {/* CTA Buttons */}
-        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <Button variant="primary" size="lg">
-            Lass uns sprechen
-          </Button>
-          <Button variant="secondary" size="lg">
-            Projekte ansehen
-          </Button>
-        </motion.div>
+              {/* Profile Image */}
+              <img
+                src="/Bewerbungsfoto.png"
+                alt="Robert Bretz"
+                className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30"
+              />
+            </div>
+          </motion.div>
+        </div>
 
         {/* Scroll Indicator */}
         <motion.div
           variants={itemVariants}
           animate={{ y: [0, 12, 0] }}
           transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
-          className="flex justify-center"
+          className="flex justify-center mt-16"
         >
           <ArrowDown className="text-green-500" size={32} />
         </motion.div>