diff --git a/components/hero.tsx b/components/hero.tsx
index e7d7206..e4c5f2c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -83,7 +83,7 @@ export function Hero() {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.8, delay: 0.3 }}
-            className="lg:col-span-5 hidden lg:block"
+            className="lg:col-span-5"
           >
             <ProgrammerGraphic />
           </motion.div>
diff --git a/components/programmer-graphic.tsx b/components/programmer-graphic.tsx
index 44699d8..6f832ff 100644
--- a/components/programmer-graphic.tsx
+++ b/components/programmer-graphic.tsx
@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion'
 import Image from 'next/image'
-import programmiererImg from '../public/Programmierer.png'
+import programmiererSvg from '../public/programmierer-vector.svg'
 
 export function ProgrammerGraphic() {
   return (
@@ -10,10 +10,10 @@ export function ProgrammerGraphic() {
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.8 }}
-      className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square"
+      className="relative w-full max-w-xs mx-auto aspect-[3/5] sm:max-w-sm lg:max-w-md lg:aspect-square"
     >
       <Image
-        src={programmiererImg}
+        src={programmiererSvg}
         alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
         fill
         className="object-contain drop-shadow-lg"