diff --git a/app/projects/(project-card)/index.jsx b/app/projects/(project-card)/index.jsx
index 06f312c..6347a33 100644
--- a/app/projects/(project-card)/index.jsx
+++ b/app/projects/(project-card)/index.jsx
@@ -2,9 +2,11 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import Image from "next/image";
 export default function projectCard({project, index, activeCategory}){
+	console.log(project.category[0], activeCategory);
+	console.log(project.category.includes(activeCategory));
   return (
 		<>
-			{activeCategory == project.category && (
+			{project.category.includes(parseInt(activeCategory)) && (
 				<Link href={"projects/" + project.slug} key={index}>
 					<motion.div
 						className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
@@ -19,8 +21,6 @@ export default function projectCard({project, index, activeCategory}){
 						transition={{
 							type: "spring",
 						}}>
-						{" "}
-						{/* Add relative here */}
 						<Image
 							src={project.thumbnail}
 							alt="Alvalens"
@@ -34,9 +34,7 @@ export default function projectCard({project, index, activeCategory}){
 							<h4 className="text-white">{project.year}</h4>
 						</div>
 						<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
-							<h1 className="text-3xl font-bold mb-3">
-								{project.title}
-							</h1>
+							<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
 							<p>
 								{project.desc[0].length > 125
 									? `${project.desc[0].slice(0, 125)}...`
@@ -56,5 +54,5 @@ export default function projectCard({project, index, activeCategory}){
 				</Link>
 			)}
 		</>
-  );
+	);
 }
diff --git a/json/data.json b/json/data.json
index 9b77463..b3f7492 100644
--- a/json/data.json
+++ b/json/data.json
@@ -1,5 +1,62 @@
 {
   "Projects": [
+    {
+      "show": true,
+      "title": "Client Personal Protfolio Website",
+      "desc": [
+        "A personal portfolio website that I created for a client. The website is built using two main tech, native (HTML, CSSS, JS) and react based (ReactJs, TailwindCSS, Typescript). The website also created based on the client design, and improved and sliced by me. The website has a few features such as a about page, a project page, resume page, and a contact page.",
+        "The website is created using a modern design and a clean interface that appeals to a wide audience. The website also has a responsive design that makes it easy to use on any device. The website also has a few animations that make the website more interactive and engaging."
+      ],
+      "year": "2025",
+      "preview": "",
+      "code": "",
+      "thumbnail": "/image/projects/web/apii-portfolio/porto-thumbnail.jpg",
+      "images": [
+        "/image/projects/web/apii-portfolio/porto1.png",
+        "/image/projects/web/apii-portfolio/porto2.png",
+        "/image/projects/web/apii-portfolio/porto3.png"
+      ],
+      "tech": [
+        "HTML",
+        "CSS",
+        "JS",
+        "ReactJS",
+        "TailwindCSS",
+        "Typescript"
+      ], 
+      "slug": "apii-porto",
+      "category": [1]
+    },
+    {
+      "show": true,
+      "title": "Mind Mirror",
+      "desc": [
+        "LMS website that integrated Generative AI feauture to track studnet various keys like mood, behavior, and cognitive ability when learning. The website is built using Laravel as a fullstack framework. In this website teacher can track student mood and other metrics data based on the material students accessed.",
+        "The website also has a few features such as a dashboard for the teacher to see the student's data, a material page, and a quiz page. The website also has a few charts to visualize the student's data. The website provided the student captured data that can be downloaded by the teacher.",
+        "The website also has a features to export the lecture data such as the mood, behaviour, and cognitive score to a xlxs file that can be downloaded by the teacher."
+      ],
+      "year": "2024",
+      "preview": "",
+      "code": "",
+      "thumbnail": "/image/projects/web/mind-mirror/mind-thumbnail.jpg",
+      "images": [
+        "/image/projects/web/mind-mirror/mind1.png",
+        "/image/projects/web/mind-mirror/mind2.png",
+        "/image/projects/web/mind-mirror/mind3.png",
+        "/image/projects/web/mind-mirror/mind4.png",
+        "/image/projects/web/mind-mirror/mind5.png"
+      ],
+      "tech": [
+        "PHP",
+        "Laravel",
+        "Bootstrap",
+        "MySQL",
+        "jQuery",
+        "DataTables"
+      ], 
+      "slug": "mind-mirror",
+      "category": [1, 2]
+    },
     {
       "show": true,
       "title": "Javanese Translation Website",
@@ -24,7 +81,7 @@
         "CSS"
       ], 
       "slug": "javanese-translation",
-      "category": 2
+      "category": [2]
     },
     {
       "show": true,
@@ -53,7 +110,7 @@
         "CSS"
       ], 
       "slug": "heart-attack",
-      "category": 2
+      "category": [2]
     },
     {
       "show": true,
@@ -79,7 +136,7 @@
         "Gemini API"
       ], 
       "slug": "trivia",
-      "category": 1
+      "category": [1, 2]
     },
     {
       "show": true,
@@ -105,7 +162,7 @@
         "MySQL"
       ], 
       "slug": "saku-senyum",
-      "category": 1
+      "category": [1]
     },
     {
       "show": true,
@@ -134,7 +191,7 @@
 
       ], 
       "slug": "simadun",
-      "category": 1
+      "category": [1]
     },
     {
       "show": true,
@@ -158,7 +215,7 @@
         "OpenGL"
       ], 
       "slug": "ludoang",
-      "category": 9
+      "category": [9]
     },
     {
       "show": true,
@@ -180,7 +237,7 @@
         "Tailwind CSS"
       ],
       "slug": "vicc",
-      "category": 1
+      "category": [1]
     },
     {
       "show": true,
@@ -207,7 +264,7 @@
         "Daisy UI"
       ],
       "slug": "react-chat",
-      "category": 1
+      "category": [1]
     },
     {
       "show": true,
@@ -236,7 +293,7 @@
         "TailwindCSS"
       ],
       "slug": "react-tools",
-      "category": 1
+      "category": [1]
     },
     {
       "show": true,
@@ -257,7 +314,7 @@
         "Google Serp API"
       ],
       "slug": "aleph-discord-bot",
-      "category": 9
+      "category": [9]
     }, 
     {
       "show": true,
@@ -285,7 +342,7 @@
         "DataTables"
       ],
       "slug": "lptk-cup-2023",
-      "category": 1
+      "category": [1]
     }, 
     {
       "show": true,
@@ -311,7 +368,7 @@
         "DataTables"
       ],
       "slug": "nu-ino-website",
-      "category": 1
+      "category": [1]
     }
   ]
 }
diff --git a/public/image/projects/lms.png b/public/image/projects/lms.png
deleted file mode 100644
index ee283e8..0000000
Binary files a/public/image/projects/lms.png and /dev/null differ
diff --git a/public/image/projects/web/apii-portfolio/porto-thumbnail.jpg b/public/image/projects/web/apii-portfolio/porto-thumbnail.jpg
new file mode 100644
index 0000000..d0a1621
Binary files /dev/null and b/public/image/projects/web/apii-portfolio/porto-thumbnail.jpg differ
diff --git a/public/image/projects/web/apii-portfolio/porto1.png b/public/image/projects/web/apii-portfolio/porto1.png
new file mode 100644
index 0000000..4d88a34
Binary files /dev/null and b/public/image/projects/web/apii-portfolio/porto1.png differ
diff --git a/public/image/projects/web/apii-portfolio/porto2.png b/public/image/projects/web/apii-portfolio/porto2.png
new file mode 100644
index 0000000..9226135
Binary files /dev/null and b/public/image/projects/web/apii-portfolio/porto2.png differ
diff --git a/public/image/projects/web/apii-portfolio/porto3.png b/public/image/projects/web/apii-portfolio/porto3.png
new file mode 100644
index 0000000..b1314a0
Binary files /dev/null and b/public/image/projects/web/apii-portfolio/porto3.png differ
diff --git a/public/image/projects/web/mind-mirror/mind-thumbnail.jpg b/public/image/projects/web/mind-mirror/mind-thumbnail.jpg
new file mode 100644
index 0000000..0d0cac0
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind-thumbnail.jpg differ
diff --git a/public/image/projects/web/mind-mirror/mind1.png b/public/image/projects/web/mind-mirror/mind1.png
new file mode 100644
index 0000000..a9e670e
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind1.png differ
diff --git a/public/image/projects/web/mind-mirror/mind2.png b/public/image/projects/web/mind-mirror/mind2.png
new file mode 100644
index 0000000..432370c
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind2.png differ
diff --git a/public/image/projects/web/mind-mirror/mind3.png b/public/image/projects/web/mind-mirror/mind3.png
new file mode 100644
index 0000000..4fc6fbe
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind3.png differ
diff --git a/public/image/projects/web/mind-mirror/mind4.png b/public/image/projects/web/mind-mirror/mind4.png
new file mode 100644
index 0000000..6e04649
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind4.png differ
diff --git a/public/image/projects/web/mind-mirror/mind5.png b/public/image/projects/web/mind-mirror/mind5.png
new file mode 100644
index 0000000..de24094
Binary files /dev/null and b/public/image/projects/web/mind-mirror/mind5.png differ