diff --git a/apps/web/public/Bewerbungsfoto.png b/apps/web/public/Bewerbungsfoto.png
new file mode 100644
index 0000000..99ad6a7
Binary files /dev/null and b/apps/web/public/Bewerbungsfoto.png differ
diff --git a/apps/web/src/features/contact/components/ContactSection.tsx b/apps/web/src/features/contact/components/ContactSection.tsx
index b1968dd..7f20a70 100644
--- a/apps/web/src/features/contact/components/ContactSection.tsx
+++ b/apps/web/src/features/contact/components/ContactSection.tsx
@@ -38,14 +38,14 @@ export const ContactSection: React.FC = () => {
             transition={{ duration: 0.5 }}
             className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
           >
-            <span className="text-green-400 text-sm font-medium">GET IN TOUCH</span>
+            <span className="text-green-400 text-sm font-medium">Kontakt aufnehmen</span>
           </motion.div>
 
           <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
-            Let's Work Together
+            Lass uns zusammenarbeiten
           </h2>
           <p className="text-gray-400 text-lg max-w-2xl mx-auto">
-            Have a project in mind? Let's discuss how we can bring your ideas to life
+            Hast du ein Projekt? Lass uns besprechen, wie wir deine Idee umsetzen.
           </p>
         </div>
 
@@ -63,32 +63,32 @@ export const ContactSection: React.FC = () => {
               <label className="block text-white font-medium mb-3">Name</label>
               <input
                 type="text"
-                placeholder="Your name"
-                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors"
+                placeholder="Dein Name"
+                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
               />
             </motion.div>
 
             <motion.div variants={itemVariants}>
-              <label className="block text-white font-medium mb-3">Email</label>
+              <label className="block text-white font-medium mb-3">E-Mail</label>
               <input
                 type="email"
-                placeholder="your.email@example.com"
-                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors"
+                placeholder="deine.email@example.com"
+                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
               />
             </motion.div>
 
             <motion.div variants={itemVariants}>
-              <label className="block text-white font-medium mb-3">Message</label>
+              <label className="block text-white font-medium mb-3">Nachricht</label>
               <textarea
-                placeholder="Tell me about your project"
+                placeholder="Erzähle mir von deinem Projekt"
                 rows={5}
-                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none transition-colors resize-none"
+                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none resize-none"
               />
             </motion.div>
 
             <motion.div variants={itemVariants}>
               <Button variant="primary" size="lg" className="w-full">
-                Send Message
+                Nachricht senden
               </Button>
             </motion.div>
           </motion.div>
@@ -102,10 +102,10 @@ export const ContactSection: React.FC = () => {
             className="space-y-6"
           >
             <motion.div variants={itemVariants}>
-              <h3 className="text-2xl font-bold text-white mb-4">Let's Connect</h3>
+              <h3 className="text-2xl font-bold text-white mb-4">Kontakt</h3>
               <p className="text-gray-400">
-                I'm always open to discussing new projects, creative ideas, or opportunities
-                to be part of your vision. Feel free to reach out!
+                Ich freue mich auf neue Projekte, kreative Ideen und spannende Kooperationen.
+                Schreibe mir gerne eine Nachricht!
               </p>
             </motion.div>
 
@@ -117,7 +117,7 @@ export const ContactSection: React.FC = () => {
                     <Mail className="text-green-500" size={24} />
                   </div>
                   <div>
-                    <p className="text-gray-400 text-sm">Email</p>
+                    <p className="text-gray-400 text-sm">E-Mail</p>
                     <p className="text-white font-medium">robert@bretz.dev</p>
                   </div>
                 </div>
@@ -127,8 +127,8 @@ export const ContactSection: React.FC = () => {
                     <MapPin className="text-green-500" size={24} />
                   </div>
                   <div>
-                    <p className="text-gray-400 text-sm">Location</p>
-                    <p className="text-white font-medium">Germany</p>
+                    <p className="text-gray-400 text-sm">Standort</p>
+                    <p className="text-white font-medium">Deutschland</p>
                   </div>
                 </div>
               </div>
@@ -136,29 +136,29 @@ export const ContactSection: React.FC = () => {
 
             {/* Social Links */}
             <motion.div variants={itemVariants}>
-              <p className="text-white font-medium mb-4">Connect with me</p>
+              <p className="text-white font-medium mb-4">Folge mir</p>
               <div className="flex gap-4">
                 <motion.a
                   href="#"
-                  whileHover={{ scale: 1.1 }}
+                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                   whileTap={{ scale: 0.95 }}
-                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
+                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                 >
                   <FaGithub size={24} />
                 </motion.a>
                 <motion.a
                   href="#"
-                  whileHover={{ scale: 1.1 }}
+                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                   whileTap={{ scale: 0.95 }}
-                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
+                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                 >
                   <FaLinkedin size={24} />
                 </motion.a>
                 <motion.a
                   href="#"
-                  whileHover={{ scale: 1.1 }}
+                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                   whileTap={{ scale: 0.95 }}
-                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 hover:bg-green-500/20 text-green-500 transition-colors"
+                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                 >
                   <FaTwitter size={24} />
                 </motion.a>
diff --git a/apps/web/src/features/experience/components/ExperienceSection.tsx b/apps/web/src/features/experience/components/ExperienceSection.tsx
index abf9688..81d6e27 100644
--- a/apps/web/src/features/experience/components/ExperienceSection.tsx
+++ b/apps/web/src/features/experience/components/ExperienceSection.tsx
@@ -17,14 +17,14 @@ export const ExperienceSection: React.FC = () => {
             transition={{ duration: 0.5 }}
             className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
           >
-            <span className="text-green-400 text-sm font-medium">My Journey</span>
+            <span className="text-green-400 text-sm font-medium">Mein Weg</span>
           </motion.div>
 
           <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
-            Professional Experience
+            Berufserfahrung
           </h2>
           <p className="text-gray-400 text-lg">
-            A timeline of my work experience and achievements
+            Eine Übersicht meiner beruflichen Stationen und Erfolge
           </p>
         </div>
 
diff --git a/apps/web/src/features/experience/components/TimelineItem.tsx b/apps/web/src/features/experience/components/TimelineItem.tsx
index a5b0d68..6c95290 100644
--- a/apps/web/src/features/experience/components/TimelineItem.tsx
+++ b/apps/web/src/features/experience/components/TimelineItem.tsx
@@ -42,15 +42,16 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
         className={`w-full md:w-5/12 ${isEven ? 'md:ml-0 md:text-right' : 'md:ml-auto'}`}
       >
         <motion.div
-          whileHover={{ scale: 1.02 }}
-          className="p-6 rounded-xl border border-green-500/30 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/60 transition-all duration-300"
+          whileHover={{ scale: 1.02, boxShadow: '0 10px 30px rgba(34,197,94,0.15)' }}
+          transition={{ type: 'spring', stiffness: 300 }}
+          className="p-6 rounded-xl border border-green-500/30 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
         >
           {/* Year Badge */}
           <div className="flex items-center gap-3 mb-4">
             <div className="px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50">
               <span className="text-green-400 font-bold text-sm">
                 {experience.startYear}
-                {experience.endYear ? `-${experience.endYear}` : '-Present'}
+                {experience.endYear ? `-${experience.endYear}` : '-Heute'}
               </span>
             </div>
           </div>
@@ -72,12 +73,14 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
           {experience.technologies && (
             <div className="flex flex-wrap gap-2 justify-end">
               {experience.technologies.map((tech) => (
-                <span
+                <motion.span
                   key={tech}
+                  whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.2)' }}
+                  transition={{ type: 'spring', stiffness: 300 }}
                   className="text-xs px-2 py-1 rounded border border-green-500/30 text-green-400 bg-green-500/10"
                 >
                   {tech}
-                </span>
+                </motion.span>
               ))}
             </div>
           )}
diff --git a/apps/web/src/features/experience/data/experienceData.ts b/apps/web/src/features/experience/data/experienceData.ts
index 251df31..c6e9dd9 100644
--- a/apps/web/src/features/experience/data/experienceData.ts
+++ b/apps/web/src/features/experience/data/experienceData.ts
@@ -32,11 +32,11 @@ export const experienceData: Experience[] = [
   },
   {
     id: '4',
-    position: 'Creative Tech Consultant',
+    position: 'Consultant für kreative Technologien',
     startYear: 2018,
     endYear: 2020,
     description:
-      'Delivered immersive digital experiences using Unity, Blender, Godot and LaTeX documentation for creative product storytelling.',
+      'Entwicklung immersiver digitaler Erlebnisse mit Unity, Blender, Godot und LaTeX für kreative Produktstorytelling.',
     technologies: ['Unity', 'Blender', 'Godot', 'LaTeX'],
   },
 ];
diff --git a/apps/web/src/features/hero/components/HeroSection.tsx b/apps/web/src/features/hero/components/HeroSection.tsx
index 7d76ecb..d274a6e 100644
--- a/apps/web/src/features/hero/components/HeroSection.tsx
+++ b/apps/web/src/features/hero/components/HeroSection.tsx
@@ -9,8 +9,8 @@ export const HeroSection: React.FC = () => {
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.2,
-        delayChildren: 0.3,
+        staggerChildren: 0.15,
+        delayChildren: 0.2,
       },
     },
   };
@@ -20,10 +20,27 @@ export const HeroSection: React.FC = () => {
     visible: {
       opacity: 1,
       y: 0,
+      transition: { duration: 0.6 },
+    },
+  };
+
+  const imageVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
       transition: { duration: 0.8 },
     },
   };
 
+  const borderVariants = {
+    hidden: { pathLength: 0 },
+    visible: {
+      pathLength: 1,
+      transition: { duration: 2, delay: 0.6 },
+    },
+  };
+
   return (
     <section
       id="home"
@@ -41,6 +58,51 @@ export const HeroSection: React.FC = () => {
         animate="visible"
         className="max-w-5xl mx-auto text-center"
       >
+        {/* 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"
+            >
+              <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>
+
+            {/* 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>
+
         {/* 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">
@@ -56,7 +118,7 @@ export const HeroSection: React.FC = () => {
           <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">
-            Crafting clean, performant digital products
+            Saubere, performante digitale Lösungen
           </span>
         </motion.h1>
 
@@ -74,18 +136,30 @@ export const HeroSection: React.FC = () => {
           variants={itemVariants}
           className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 mb-12 max-w-2xl mx-auto"
         >
-          <div className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm">
+          <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">4+</div>
-            <div className="text-gray-400 text-sm">Years Engineering</div>
-          </div>
-          <div className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm">
+            <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">Delivered Solutions</div>
-          </div>
-          <div className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm">
+            <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 Focus</div>
-          </div>
+            <div className="text-gray-400 text-sm">Performance-Fokus</div>
+          </motion.div>
         </motion.div>
 
         {/* CTA Buttons */}
@@ -102,7 +176,7 @@ export const HeroSection: React.FC = () => {
         <motion.div
           variants={itemVariants}
           animate={{ y: [0, 12, 0] }}
-          transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
+          transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
           className="flex justify-center"
         >
           <ArrowDown className="text-green-500" size={32} />
diff --git a/apps/web/src/features/navigation/components/Navigation.tsx b/apps/web/src/features/navigation/components/Navigation.tsx
index be53a93..4b3cfbb 100644
--- a/apps/web/src/features/navigation/components/Navigation.tsx
+++ b/apps/web/src/features/navigation/components/Navigation.tsx
@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Menu, X } from 'lucide-react';
-import { useNavigation } from '../hooks/useNavigation';
-import { useScrollToSection } from '../../../shared/hooks/useScrollToSection';
-import Button from '../../../shared/components/Button';
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Menu, X } from "lucide-react";
+import { useNavigation } from "../hooks/useNavigation";
+import { useScrollToSection } from "../../../shared/hooks/useScrollToSection";
+import Button from "../../../shared/components/Button";
 
 const navItems = [
-  { id: 'home', label: 'Über mich' },
-  { id: 'skills', label: 'Fähigkeiten' },
-  { id: 'projects', label: 'Projekte' },
-  { id: 'experience', label: 'Erfahrung' },
-  { id: 'contact', label: 'Kontakt' },
+  { id: "home", label: "Über mich" },
+  { id: "skills", label: "Fähigkeiten" },
+  { id: "projects", label: "Projekte" },
+  { id: "experience", label: "Erfahrung" },
+  { id: "contact", label: "Kontakt" },
 ];
 
 export const Navigation: React.FC = () => {
@@ -27,81 +27,98 @@ export const Navigation: React.FC = () => {
     <motion.nav
       initial={{ y: -120 }}
       animate={{ y: 0 }}
-      transition={{ duration: 0.45, ease: 'easeOut' }}
-      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+      transition={{ duration: 0.45, ease: "easeOut" }}
+      className={`fixed top-0 w-full z-50 ${
         isScrolled
-          ? 'bg-black/90 backdrop-blur-xl border-b border-green-500/20 shadow-lg shadow-emerald-500/5'
-          : 'bg-transparent'
+          ? "bg-black/90 backdrop-blur-xl border-b border-green-500/20 shadow-lg shadow-emerald-500/5"
+          : "bg-transparent"
       }`}
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
+          {/* Logo */}
           <motion.div
             whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
             className="text-2xl font-bold text-green-500 cursor-pointer"
-            onClick={() => handleNavClick('home')}
+            onClick={() => handleNavClick("home")}
           >
             &lt;/&gt; Robert Bretz
           </motion.div>
 
+          {/* Desktop Navigation */}
           <div className="hidden md:flex gap-8">
             {navItems.map((item) => (
               <motion.button
                 key={item.id}
                 onClick={() => handleNavClick(item.id)}
-                className={`text-sm font-medium transition-colors duration-300 pb-2 border-b-2 ${
+                whileHover={activeSection !== item.id ? { color: '#ffffff' } : {}}
+                className={`text-sm font-medium pb-2 border-b-2 ${
                   activeSection === item.id
-                    ? 'text-green-500 border-green-500'
-                    : 'text-gray-300 border-transparent hover:text-white'
+                    ? "text-green-500 border-green-500"
+                    : "text-gray-300 border-transparent"
                 }`}
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
               >
                 {item.label}
               </motion.button>
             ))}
           </div>
 
+          {/* Desktop CTA + Mobile Toggle */}
           <div className="flex items-center gap-3">
-            <div className="hidden md:block">
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="hidden md:block"
+            >
               <Button variant="primary" size="sm">
                 Anfrage
               </Button>
-            </div>
+            </motion.div>
 
-            <button
+            {/* Mobile Menu Toggle */}
+            <motion.button
               type="button"
               aria-label="Open mobile menu"
-              className="md:hidden p-2 rounded-full border border-green-500/20 bg-green-500/10 text-green-400 hover:text-white hover:border-green-500 transition-all"
+              className="md:hidden p-2 rounded-full border border-green-500/20 bg-green-500/10 text-green-400"
               onClick={() => setIsOpen((prev) => !prev)}
+              whileHover={{ scale: 1.1, borderColor: "#22c55e", color: "#ffffff" }}
+              whileTap={{ scale: 0.9 }}
             >
               {isOpen ? <X size={22} /> : <Menu size={22} />}
-            </button>
+            </motion.button>
           </div>
         </div>
       </div>
 
+      {/* Mobile Menu */}
       <AnimatePresence>
         {isOpen && (
           <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="md:hidden bg-black/95 border-t border-green-500/20"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className="md:hidden bg-black/95 border-t border-green-500/20 overflow-hidden"
           >
-            <div className="px-6 py-6 space-y-4">
-              {navItems.map((item) => (
-                <button
+            <div className="px-6 py-6 space-y-2">
+              {navItems.map((item, index) => (
+                <motion.button
                   key={item.id}
                   onClick={() => handleNavClick(item.id)}
-                  className={`w-full text-left text-lg font-medium px-4 py-3 rounded-xl transition-colors duration-300 ${
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.05 }}
+                  whileHover={activeSection !== item.id ? { scale: 1.02, x: 4, backgroundColor: 'rgba(255,255,255,0.05)' } : { scale: 1.02, x: 4 }}
+                  whileTap={{ scale: 0.98 }}
+                  className={`w-full text-left text-lg font-medium px-4 py-3 rounded-xl ${
                     activeSection === item.id
-                      ? 'bg-green-500/15 text-green-400'
-                      : 'text-gray-300 hover:bg-white/5 hover:text-white'
+                      ? "bg-green-500/15 text-green-400"
+                      : "text-gray-300"
                   }`}
                 >
                   {item.label}
-                </button>
+                </motion.button>
               ))}
             </div>
           </motion.div>
@@ -109,4 +126,4 @@ export const Navigation: React.FC = () => {
       </AnimatePresence>
     </motion.nav>
   );
-};
+};
\ No newline at end of file
diff --git a/apps/web/src/features/projects/components/ProjectCard.tsx b/apps/web/src/features/projects/components/ProjectCard.tsx
index 4a3a21f..d9228cd 100644
--- a/apps/web/src/features/projects/components/ProjectCard.tsx
+++ b/apps/web/src/features/projects/components/ProjectCard.tsx
@@ -18,35 +18,43 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
       viewport={{ once: true }}
       transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
       whileHover={{ y: -8, scale: 1.01 }}
-      className="group rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/55 transition-all duration-300 shadow-[0_20px_60px_-40px_rgba(34,197,94,0.8)]"
+      className="rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
     >
       {/* Image */}
       <div className="relative h-64 overflow-hidden bg-gradient-to-br from-gray-900 to-black">
-        <img
+        <motion.img
           src={project.image}
           alt={project.title}
-          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-out"
+          className="w-full h-full object-cover"
+          whileHover={{ scale: 1.1 }}
+          transition={{ duration: 0.5 }}
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
       </div>
 
       {/* Content */}
       <div className="p-6">
-        <div className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-green-500/15 border border-green-500/25">
+        <motion.div
+          className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-green-500/15 border border-green-500/25"
+          whileHover={{ scale: 1.05 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
           <span className="text-green-400 text-xs font-semibold">{project.category}</span>
-        </div>
+        </motion.div>
 
         <h3 className="text-2xl font-bold text-white mb-3">{project.title}</h3>
         <p className="text-gray-400 text-sm mb-5 line-clamp-3">{project.description}</p>
 
         <div className="flex flex-wrap gap-2 mb-6">
           {project.tags.slice(0, 3).map((tag) => (
-            <span
+            <motion.span
               key={tag}
+              whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.2)' }}
+              transition={{ type: 'spring', stiffness: 300 }}
               className="text-xs px-2 py-1 rounded-full border border-green-500/25 text-green-300 bg-white/5"
             >
               {tag}
-            </span>
+            </motion.span>
           ))}
           {project.tags.length > 3 && (
             <span className="text-xs px-2 py-1 rounded-full text-gray-400 bg-gray-900/40">
@@ -61,9 +69,9 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
               href={project.link}
               target="_blank"
               rel="noreferrer"
-              whileHover={{ scale: 1.05 }}
+              whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.3)' }}
               whileTap={{ scale: 0.95 }}
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 hover:bg-green-500/30 text-green-300 transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 text-green-300 text-sm font-medium"
             >
               <ExternalLink size={16} />
               Live
@@ -74,9 +82,9 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
               href={project.github}
               target="_blank"
               rel="noreferrer"
-              whileHover={{ scale: 1.05 }}
+              whileHover={{ scale: 1.05, borderColor: 'rgba(34,197,94,0.5)', color: '#ffffff' }}
               whileTap={{ scale: 0.95 }}
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 hover:border-green-500/50 text-gray-300 hover:text-white transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 text-gray-300 text-sm font-medium"
             >
               <FaGithub size={16} />
               Code
diff --git a/apps/web/src/features/projects/components/ProjectsSection.tsx b/apps/web/src/features/projects/components/ProjectsSection.tsx
index 8b8226b..f8666cf 100644
--- a/apps/web/src/features/projects/components/ProjectsSection.tsx
+++ b/apps/web/src/features/projects/components/ProjectsSection.tsx
@@ -14,7 +14,7 @@ export const ProjectsSection: React.FC = () => {
 
   const filteredProjects = projectsData.filter(
     (project: Project) =>
-      selectedCategory === 'All' || project.category === selectedCategory
+      selectedCategory === 'Alle' || project.category === selectedCategory
   );
 
   return (
@@ -53,10 +53,19 @@ export const ProjectsSection: React.FC = () => {
               onClick={() => setSelectedCategory(category)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className={`px-6 py-2 rounded-full font-medium transition-all duration-300 ${
+              animate={{
+                backgroundColor:
+                  selectedCategory === category ? 'rgba(34,197,94,1)' : 'transparent',
+                borderColor:
+                  selectedCategory === category
+                    ? 'rgba(34,197,94,1)'
+                    : 'rgba(34,197,94,0.3)',
+              }}
+              transition={{ duration: 0.2 }}
+              className={`px-6 py-2 rounded-full font-medium ${
                 selectedCategory === category
-                  ? 'bg-green-500 text-black'
-                  : 'border border-green-500/30 text-gray-300 hover:border-green-500/60'
+                  ? 'text-black'
+                  : 'border border-green-500/30 text-gray-300'
               }`}
             >
               {category}
diff --git a/apps/web/src/features/skills/components/SkillCard.tsx b/apps/web/src/features/skills/components/SkillCard.tsx
index c93f2ee..d34350b 100644
--- a/apps/web/src/features/skills/components/SkillCard.tsx
+++ b/apps/web/src/features/skills/components/SkillCard.tsx
@@ -32,13 +32,17 @@ export const SkillCard: React.FC<SkillCardProps> = ({ skill, index }) => {
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
-      whileHover={{ scale: 1.025, y: -6 }}
-      className="p-6 rounded-3xl border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm hover:border-green-500/60 transition-all duration-300 shadow-[0_20px_60px_-40px_rgba(34,197,94,0.75)]"
+      whileHover={{ scale: 1.025, y: -6, boxShadow: '0 20px 60px -40px rgba(34,197,94,0.75)' }}
+      className="p-6 rounded-3xl border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
     >
       <div className="flex items-start justify-between mb-4">
-        <div className="p-3 rounded-2xl bg-green-500/15">
+        <motion.div
+          className="p-3 rounded-2xl bg-green-500/15"
+          whileHover={{ scale: 1.1, rotate: 5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
           {IconComponent && <IconComponent className="text-green-500" size={24} />}
-        </div>
+        </motion.div>
         <span className={`text-xs font-semibold px-3 py-1 rounded-full ${levelBg[skill.level]}`}>
           <span className={levelColors[skill.level]}>{skill.level}</span>
         </span>
@@ -48,8 +52,8 @@ export const SkillCard: React.FC<SkillCardProps> = ({ skill, index }) => {
 
       <div className="space-y-3">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-gray-400">Experience</span>
-          <span className="text-green-400 font-medium">{skill.years}+ yrs</span>
+          <span className="text-gray-400">Erfahrung</span>
+          <span className="text-green-400 font-medium">{skill.years}+ Jahre</span>
         </div>
 
         <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
diff --git a/apps/web/src/features/skills/components/SkillsSection.tsx b/apps/web/src/features/skills/components/SkillsSection.tsx
index 834875f..a90142a 100644
--- a/apps/web/src/features/skills/components/SkillsSection.tsx
+++ b/apps/web/src/features/skills/components/SkillsSection.tsx
@@ -27,7 +27,7 @@ export const SkillsSection: React.FC = () => {
   ];
 
   const filteredSkills = skillsData.filter(
-    (skill) => selectedCategory === 'All' || skill.category === selectedCategory
+    (skill) => selectedCategory === 'Alle' || skill.category === selectedCategory
   );
 
   return (
@@ -66,10 +66,19 @@ export const SkillsSection: React.FC = () => {
               onClick={() => setSelectedCategory(category)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className={`px-6 py-2 rounded-full font-medium transition-all duration-300 ${
+              animate={{
+                backgroundColor:
+                  selectedCategory === category ? 'rgba(34,197,94,1)' : 'transparent',
+                borderColor:
+                  selectedCategory === category
+                    ? 'rgba(34,197,94,1)'
+                    : 'rgba(34,197,94,0.3)',
+              }}
+              transition={{ duration: 0.2 }}
+              className={`px-6 py-2 rounded-full font-medium ${
                 selectedCategory === category
-                  ? 'bg-green-500 text-black'
-                  : 'border border-green-500/30 text-gray-300 hover:border-green-500/60'
+                  ? 'text-black'
+                  : 'border border-green-500/30 text-gray-300'
               }`}
             >
               {category}
diff --git a/apps/web/src/features/skills/data/skillsData.ts b/apps/web/src/features/skills/data/skillsData.ts
index 8b788ab..1c1dad1 100644
--- a/apps/web/src/features/skills/data/skillsData.ts
+++ b/apps/web/src/features/skills/data/skillsData.ts
@@ -11,8 +11,10 @@ import {
   Terminal,
   Box,
   FileText,
-  Gamepad,
+  Gamepad2,
   ShieldCheck,
+  Smartphone,
+  Cpu,
 } from 'lucide-react';
 import type { Skill } from '../../../shared/types';
 
@@ -34,11 +36,11 @@ export const iconMap = {
   'Linux': Terminal,
   'Clean Architecture': Layers,
   'Vertical Slice Architecture': Layers,
-  'Design Patterns': Layout,
+  'Design Patterns': Cpu,
   'Figma': PenTool,
-  'Unity': Gamepad,
+  'Unity': Gamepad2,
   'Blender': Package,
-  'Godot': Package,
+  'Godot': Gamepad2,
   'LaTeX': FileText,
 };
 
@@ -54,7 +56,7 @@ export const skillsData: Array<Omit<Skill, 'icon'> & { iconName: keyof typeof ic
     name: 'Vue.js',
     iconName: 'Vue.js',
     level: 'Advanced',
-    years: 3,
+    years: 0.5,
     category: 'Frontend',
   },
   {
diff --git a/apps/web/src/shared/components/Button.tsx b/apps/web/src/shared/components/Button.tsx
index b9674a6..666d8ce 100644
--- a/apps/web/src/shared/components/Button.tsx
+++ b/apps/web/src/shared/components/Button.tsx
@@ -16,7 +16,7 @@ const Button: React.FC<ButtonProps> = ({
   size = 'md',
   className = '',
 }) => {
-  const baseClasses = 'font-semibold rounded-full transition-all duration-300';
+  const baseClasses = 'font-semibold rounded-full';
 
   const sizeClasses = {
     sm: 'px-4 py-2 text-sm',
@@ -25,15 +25,13 @@ const Button: React.FC<ButtonProps> = ({
   };
 
   const variantClasses = {
-    primary:
-      'bg-green-500 hover:bg-green-600 text-black shadow-lg hover:shadow-green-500/50',
-    secondary:
-      'border-2 border-green-500 text-green-500 hover:bg-green-500/10',
+    primary: 'bg-green-500 text-black',
+    secondary: 'border-2 border-green-500 text-green-500',
   };
 
   return (
     <motion.button
-      whileHover={{ scale: 1.05 }}
+      whileHover={{ scale: 1.05, boxShadow: '0 10px 25px rgba(34,197,94,0.2)' }}
       whileTap={{ scale: 0.95 }}
       onClick={onClick}
       className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
diff --git a/apps/web/src/shared/components/Footer.tsx b/apps/web/src/shared/components/Footer.tsx
index da8fce4..fa87232 100644
--- a/apps/web/src/shared/components/Footer.tsx
+++ b/apps/web/src/shared/components/Footer.tsx
@@ -27,13 +27,22 @@ const Footer: React.FC = () => {
             viewport={{ once: true }}
             transition={{ delay: 0.1 }}
           >
-            <h4 className="text-white font-semibold mb-4">Quick Links</h4>
+            <h4 className="text-white font-semibold mb-4">Schnellzugriff</h4>
             <ul className="space-y-2">
-              {['About', 'Skills', 'Projects', 'Contact'].map((link) => (
-                <li key={link}>
-                  <a href={`#${link.toLowerCase()}`} className="text-gray-400 hover:text-green-400 transition-colors">
-                    {link}
-                  </a>
+              {[
+                { label: 'Über mich', href: '#home' },
+                { label: 'Fähigkeiten', href: '#skills' },
+                { label: 'Projekte', href: '#projects' },
+                { label: 'Kontakt', href: '#contact' },
+              ].map((link) => (
+                <li key={link.label}>
+                  <motion.a
+                    href={link.href}
+                    whileHover={{ color: '#22c55e' }}
+                    className="text-gray-400"
+                  >
+                    {link.label}
+                  </motion.a>
                 </li>
               ))}
             </ul>
@@ -46,9 +55,9 @@ const Footer: React.FC = () => {
             viewport={{ once: true }}
             transition={{ delay: 0.2 }}
           >
-            <h4 className="text-white font-semibold mb-4">Services</h4>
+            <h4 className="text-white font-semibold mb-4">Leistungen</h4>
             <ul className="space-y-2">
-              {['Frontend Development', 'UI/UX Design', 'Full Stack Dev'].map((service) => (
+              {['Frontend-Entwicklung', 'UI/UX-Design', 'Fullstack-Entwicklung'].map((service) => (
                 <li key={service}>
                   <span className="text-gray-400">{service}</span>
                 </li>
@@ -83,7 +92,7 @@ const Footer: React.FC = () => {
             © {currentYear} Robert Bretz. All rights reserved.
           </p>
           <p className="text-gray-500 text-sm mt-4 md:mt-0">
-            Built with 💚 using React & Tailwind CSS
+            Erstellt mit 💚 in React & Tailwind CSS
           </p>
         </div>
       </div>