diff --git a/app/projects/(project-card)/index.jsx b/app/projects/(project-card)/index.jsx
new file mode 100644
index 0000000..d1f3942
--- /dev/null
+++ b/app/projects/(project-card)/index.jsx
@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { motion } from "framer-motion";
+import Image from "next/image";
+export default function projectCard({project, index}) {
+  return (
+		<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 "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					type: "spring",
+				}}>
+				{" "}
+				{/* Add relative here */}
+				<Image
+					src={project.bg.src}
+					alt="Alvalens"
+					layout="fill"
+					objectFit="cover"
+					placeholder="blur"
+					className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
+					blurDataURL={project.bg.blurDataURL}
+				/>
+				<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
+					<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>
+					<p>{project.desc}</p>
+					<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
+						{project.tech.split(",").map((t, index) => (
+							<span
+								key={index}
+								className="m-1 px-4 py-2 bg-gray-600 text-white ">
+								{t}
+							</span>
+						))}
+					</div>
+				</div>
+			</motion.div>
+		</Link>
+  );
+}
diff --git a/app/projects/data/projects.js b/app/projects/data/projects.js
new file mode 100644
index 0000000..bc65527
--- /dev/null
+++ b/app/projects/data/projects.js
@@ -0,0 +1,76 @@
+
+import Trivia from "@/public/projects/main-project/trivia.png";
+import SakuSenyum from "@/public/projects/main-project/saku-senyum.png";
+import LUDOang from "@/public/projects/main-project/ludo.png";
+import ReactChatMain from "@/public/projects/main-project/react-chat.png";
+import ReactTools from "@/public/projects/main-project/react-tools.png";
+import AlephBot from "@/public/projects/main-project/aleph-bot.png";
+import LPTK from "@/public/projects/lptk/lptk1.png";
+import NUINO from "@/public/projects/ino/ino1.png";
+
+export const projects = [
+	{
+		title: "Generative Trivia",
+		desc: "Generative Trivia is a web application that I created using Gemini AI API to generate trivia questions and answers.",
+		year: "2024",
+		tech: "NextJS, Typescript, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
+		bg: Trivia,
+		slug: "trivia",
+	},
+	{
+		title: "Saku Senyum",
+		desc: "A website for UMKM sales management. This project is a client project that I created as a Fullstack Developer.",
+		year: "2024",
+		tech: "NextJS, Typescript, Tailwind CSS, Shadcn UI, Prisma, MySQL",
+		bg: SakuSenyum,
+		slug: "saku-senyum",
+	},
+	{
+		title: "LUDOang",
+		desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
+		year: "2023",
+		tech: "Python, Pygame, OpenGL",
+		bg: LUDOang,
+		slug: "ludoang",
+	},
+	{
+		title: "React Chat WebApp",
+		desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
+		year: "2023",
+		tech: "Javascript, React Js, Firebase, Daisy UI",
+		bg: ReactChatMain,
+		slug: "react-chat",
+	},
+	{
+		title: "React Tools",
+		desc: "My first React project. contain three main tools: Todo List, Note, and Expense Tracker that usefull for daily activity",
+		year: "2023",
+		tech: "Javascript, React Js, TailwindCSS",
+		bg: ReactTools,
+		slug: "react-tools",
+	},
+	{
+		title: "Aleph Discord Bot",
+		desc: "Discord bot that can search images on google and send the result to discord channel, with this bot you can search images on google without leaving discord.",
+		year: "2023",
+		tech: "Python, Serp API, Discord.py",
+		bg: AlephBot,
+		slug: "aleph-discord-bot",
+	},
+	{
+		title: "LPTK Cup 2023 Website",
+		desc: "LPTK Cup 2023 is a website for a competition that held by Universitas Negeri Malang. This is my second freelance project using Laravel.",
+		year: "2023",
+		tech: "PHP, Laravel, Bootstrap, JQuery, MySQL",
+		bg: LPTK,
+		slug: "lptk-cup-2023",
+	},
+	{
+		title: "NU INO Website",
+		desc: "My first freelance project. This project is a website for a School based on a JALAKAR curriculum. The website is built mainly using Laravel and Bootstrap.",
+		year: "2023",
+		tech: "PHP, Laravel, Livewire, Bootstrap, JQuery, MySQL",
+		bg: NUINO,
+		slug: "nu-ino-website",
+	},
+];
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index 2450182..52e4e55 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -10,88 +10,19 @@ import ReactChat1 from "@/public/projects/trivia/trivia1.png";
 import ReactChat2 from "@/public/projects/trivia/trivia2.png";
 import ReactChat3 from "@/public/projects/trivia/trivia3.png";
 import ProjectAll from "@/public/img/projects.png";
-// main project image
-import Trivia from "@/public/projects/main-project/trivia.png";
-import SakuSenyum from "@/public/projects/main-project/saku-senyum.png";
-import LUDOang from "@/public/projects/main-project/ludo.png";
-import ReactChatMain from "@/public/projects/main-project/react-chat.png";
-import ReactTools from "@/public/projects/main-project/react-tools.png";
-import AlephBot from "@/public/projects/main-project/aleph-bot.png";
-import LPTK from "@/public/projects/lptk/lptk1.png";
-import NUINO from "@/public/projects/ino/ino1.png";
-
 
 import Hr from "@/components/Hr";
+import ProjectCard from "./(project-card)";
+import { projects } from "./data/projects";
 import FixedButon from "@/components/FixedButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
-const projects = [
-	{
-		title: "Generative Trivia",
-		desc: "Generative Trivia is a web application that I created using Gemini AI API to generate trivia questions and answers.",
-		year: "2024",
-		tech: "NextJS, Typescript, Gemini AI API, Tailwind CSS, Shadcn UI, Firebase",
-		bg: Trivia,
-		slug: "trivia",
-	},
-	{
-		title: "Saku Senyum",
-		desc: "A website for UMKM sales management. This project is a client project that I created as a Fullstack Developer.",
-		year: "2024",
-		tech: "NextJS, Typescript, Tailwind CSS, Shadcn UI, Prisma, MySQL",
-		bg: SakuSenyum,
-		slug: "saku-senyum",
-	},
-	{
-		title: "LUDOang",
-		desc: "LUDOang is a game created using python and pygame. This game is inspired by LUDO game.",
-		year: "2023",
-		tech: "Python, Pygame, OpenGL",
-		bg: LUDOang,
-		slug: "ludoang",
-	},
-	{
-		title: "React Chat WebApp",
-		desc: "My second React project. This project is a realtime chat webapp that I created using ReactJS, Firebase, and TailwindCSS.",
-		year: "2023",
-		tech: "Javascript, React Js, Firebase, Daisy UI",
-		bg: ReactChatMain,
-		slug: "react-chat",
-	},
-	{
-		title: "React Tools",
-		desc: "My first React project. contain three main tools: Todo List, Note, and Expense Tracker that usefull for daily activity",
-		year: "2023",
-		tech: "Javascript, React Js, TailwindCSS",
-		bg: ReactTools,
-		slug: "react-tools",
-	},
-	{
-		title: "Aleph Discord Bot",
-		desc: "Discord bot that can search images on google and send the result to discord channel, with this bot you can search images on google without leaving discord.",
-		year: "2023",
-		tech: "Python, Serp API, Discord.py",
-		bg: AlephBot,
-		slug: "aleph-discord-bot",
-	},
-	{
-		title: "LPTK Cup 2023 Website",
-		desc: "LPTK Cup 2023 is a website for a competition that held by Universitas Negeri Malang. This is my second freelance project using Laravel.",
-		year: "2023",
-		tech: "PHP, Laravel, Bootstrap, JQuery, MySQL",
-		bg: LPTK,
-		slug: "lptk-cup-2023",
-	},
-	{
-		title: "NU INO Website",
-		desc: "My first freelance project. This project is a website for a School based on a JALAKAR curriculum. The website is built mainly using Laravel and Bootstrap.",
-		year: "2023",
-		tech: "PHP, Laravel, Livewire, Bootstrap, JQuery, MySQL",
-		bg: NUINO,
-		slug: "nu-ino-website",
-	},
-];
+const category = {
+	1: "Web Development",
+	2: "Mobile Development",
+	3: "Other",
+}
 
 export default function Page() {
 	useEffect(() => {
@@ -300,55 +231,7 @@ export default function Page() {
 				<div className="w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10 cursor-pointer">
 					{/* loop projeects data */}
 					{projects.map((project, index) => (
-						<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 "
-								initial={{
-									opacity: 0,
-									x: -200,
-								}}
-								whileInView={{
-									opacity: 1,
-									x: 0,
-								}}
-								transition={{
-									type: "spring",
-								}}>
-								{" "}
-								{/* Add relative here */}
-								<Image
-									src={project.bg.src}
-									alt="Alvalens"
-									layout="fill"
-									objectFit="cover"
-									placeholder="blur"
-									className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
-									blurDataURL={project.bg.blurDataURL}
-								/>
-								<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
-									<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>
-									<p>{project.desc}</p>
-									<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
-										{project.tech
-											.split(",")
-											.map((t, index) => (
-												<span
-													key={index}
-													className="m-1 px-4 py-2 bg-gray-600 text-white ">
-													{t}
-												</span>
-											))}
-									</div>
-								</div>
-							</motion.div>
-						</Link>
+						<ProjectCard project={project} key={index} />
 					))}
 				</div>
 				{/* view in archive btn */}