diff --git a/package-lock.json b/package-lock.json
index ff273c2..d21a7e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "clsx": "^2.1.1",
+        "framer-motion": "^11.7.0",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18",
@@ -2177,6 +2178,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.7.0.tgz",
+      "integrity": "sha512-m+1E3mMzDIQ5DsVghMvXyC+jSkZSm5RHBLA2gHa/LczcXwW6JbQK4Uz48LsuCTGV8bZFVUezcauHj3M33tY/5w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 8722fc9..d8e443c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "framer-motion": "^11.7.0",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
diff --git a/public/img/forumassociatif.png b/public/img/forumassociatif.png
new file mode 100644
index 0000000..991fee0
Binary files /dev/null and b/public/img/forumassociatif.png differ
diff --git a/public/img/hackerjourney.png b/public/img/hackerjourney.png
new file mode 100644
index 0000000..fa36706
Binary files /dev/null and b/public/img/hackerjourney.png differ
diff --git a/public/img/pixelwar.png b/public/img/pixelwar.png
new file mode 100644
index 0000000..f9b40c1
Binary files /dev/null and b/public/img/pixelwar.png differ
diff --git a/src/components/project.tsx b/src/components/project.tsx
new file mode 100644
index 0000000..b679a8b
--- /dev/null
+++ b/src/components/project.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import cn from "@/utils/function";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState } from "react";
+
+interface ProjectProps {
+  project: {
+    name: string;
+    date: string;
+    image: string;
+  };
+  index: number;
+}
+
+const anim = {
+  initial: {width: 0},
+  open: {width: "auto", transition: {duration: 0.4, ease: [0.23, 1, 0.32, 1]}},
+  closed: {width: 0}
+}
+
+const Project = ({ project, index }: ProjectProps) => {
+
+  const [isActive, setIsActive] = useState(false);
+
+  return ( 
+    <div 
+      key={`project:${index}`}
+      className={cn(
+        "h-40 flex items-center justify-between p-8",
+        index === 0 
+          ? "border-t border-b border-gray-800" 
+          : "border-b border-gray-800"
+      )}
+      onMouseEnter={() => {setIsActive(true)}}
+      onMouseLeave={() => {setIsActive(false)}}
+    >
+      <div className="flex items-center gap-8 justify-center">
+        <h3 className="text-6xl text-gray-50 font-medium">{project.name}</h3>
+        <motion.div 
+          variants={anim} 
+          animate={isActive ? "open" : "closed"}
+          className="overflow-hidden origin-center flex justify-center"
+        >
+          <Image
+            src={`/img/${project.image}`}
+            alt={project.name}
+            width={0}
+            height={0}
+            sizes="208px"
+            className="w-52 max-w-none"
+          />
+        </motion.div>
+      </div>
+      <p className="text-gray-400">{project.date}</p>
+    </div>
+   );
+}
+ 
+export default Project;
\ No newline at end of file
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx
index a2c0ee2..e2e5ab8 100644
--- a/src/components/sections/projects.tsx
+++ b/src/components/sections/projects.tsx
@@ -1,14 +1,21 @@
 import { gasoekOne } from "@/app/font";
-import cn from "@/utils/function";
+import Project from "../project";
 
 const projects = [
   {
     "name": "Pixel War",
     "date": "2023-2024",
+    "image": "pixelwar.png",
   },
   {
     "name": "Hacker's Journey",
     "date": "2023-2024",
+    "image": "hackerjourney.png",
+  },
+  {
+    "name": "Forum Associatif",
+    "date": "2023-2024",
+    "image": "forumassociatif.png",
   },
 ]
 
@@ -20,18 +27,7 @@ const ProjectsSection = () => {
       </h2>
       <div className="flex flex-col w-full">
         {projects.map((project, index) => (
-          <div 
-            key={`project:${index}`}
-            className={cn(
-              "h-40 flex items-center justify-between p-8",
-              index === 0 
-                ? "border-t border-b border-gray-800" 
-                : "border-b border-gray-800"
-            )}
-          >
-            <h3 className="text-6xl text-gray-50 font-medium">{project.name}</h3>
-            <p className="text-gray-400">{project.date}</p>
-          </div>
+          <Project key={`project:${index}`}  project={project} index={index} />
         ))}
       </div>
     </div>