diff --git a/src/pages/WorkExperience.tsx b/src/pages/WorkExperience.tsx
index 14c7ef2..b563f2e 100644
--- a/src/pages/WorkExperience.tsx
+++ b/src/pages/WorkExperience.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 const WORK_EXPERIENCES = [
     {
@@ -138,48 +139,54 @@ export default function WorkExperience() {
                         }}>All Jobs</span>
                     </div>
 
-                    {filteredExperiences.map((experience, index) => (
-                        <div key={`${experience.company}-${experience.period}`} style={{
-                            marginBottom: "30px",
-                            padding: "20px",
-                            backgroundColor: "rgba(152, 116, 116, 0.1)",
-                            borderRadius: "10px",
-                            border: "1px solid rgba(255, 255, 255, 0.2)",
-                            display: "flex",
-                            gap: "20px",
-                            alignItems: "flex-start",
-                            animation: "slideInFromLeft 0.6s ease-out forwards",
-                            // Reset key when filtering to re-trigger animation cleanly, or just use index if that's preferred strictly for list stability (though re-animating feels nicer for a filter change usually, let's keep it simple with unique key first)
-                            animationDelay: `${index * 0.2}s`, // Faster stagger for filtered list
-                            opacity: 0
-                        }}>
-                            {experience.image && (
-                                <img
-                                    src={experience.image}
-                                    alt={experience.company}
-                                    style={{
-                                        width: "120px",
-                                        height: "120px",
-                                        objectFit: "cover",
-                                        borderRadius: "8px",
-                                        flexShrink: 0
-                                    }}
-                                />
-                            )}
-                            <div style={{ flex: 1 }}>
-                                <h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
-                                <p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
-                                <p style={{ margin: "0 0 15px 0", fontSize: "clamp(11px, 1.2vw, 16px)", opacity: 0.8 }}>{experience.period}</p>
-                                <ul style={{ margin: 0, paddingLeft: "20px" }}>
-                                    {experience.description.map((item, idx) => (
-                                        <li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
-                                            {item}
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </div>
-                    ))}
+                    <AnimatePresence mode="popLayout">
+                        {filteredExperiences.map((experience, index) => (
+                            <motion.div
+                                layout
+                                key={`${experience.company}-${experience.period}`}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                exit={{ opacity: 0, x: -20 }}
+                                transition={{ duration: 0.3 }}
+                                style={{
+                                    marginBottom: "30px",
+                                    padding: "20px",
+                                    backgroundColor: "rgba(152, 116, 116, 0.1)",
+                                    borderRadius: "10px",
+                                    border: "1px solid rgba(255, 255, 255, 0.2)",
+                                    display: "flex",
+                                    gap: "20px",
+                                    alignItems: "flex-start",
+                                }}
+                            >
+                                {experience.image && (
+                                    <img
+                                        src={experience.image}
+                                        alt={experience.company}
+                                        style={{
+                                            width: "120px",
+                                            height: "120px",
+                                            objectFit: "cover",
+                                            borderRadius: "8px",
+                                            flexShrink: 0
+                                        }}
+                                    />
+                                )}
+                                <div style={{ flex: 1 }}>
+                                    <h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
+                                    <p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
+                                    <p style={{ margin: "0 0 15px 0", fontSize: "clamp(11px, 1.2vw, 16px)", opacity: 0.8 }}>{experience.period}</p>
+                                    <ul style={{ margin: 0, paddingLeft: "20px" }}>
+                                        {experience.description.map((item, idx) => (
+                                            <li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
+                                                {item}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
                 </div>
             </div>
         </div>