diff --git a/app/projects/(project-card)/index.jsx b/app/projects/(project-card)/index.jsx
index 731439c..06f312c 100644
--- a/app/projects/(project-card)/index.jsx
+++ b/app/projects/(project-card)/index.jsx
@@ -22,13 +22,13 @@ export default function projectCard({project, index, activeCategory}){
 						{" "}
 						{/* Add relative here */}
 						<Image
-							src={project.bg.src}
+							src={project.thumbnail}
 							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}
+							blurDataURL={project.thumbnail}
 						/>
 						<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
 							<h4 className="text-white">{project.year}</h4>
@@ -37,9 +37,13 @@ export default function projectCard({project, index, activeCategory}){
 							<h1 className="text-3xl font-bold mb-3">
 								{project.title}
 							</h1>
-							<p>{project.desc}</p>
+							<p>
+								{project.desc[0].length > 125
+									? `${project.desc[0].slice(0, 125)}...`
+									: project.desc[0]}
+							</p>
 							<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
-								{project.tech.split(",").map((t, index) => (
+								{project.tech.map((t, index) => (
 									<span
 										key={index}
 										className="m-1 px-4 py-2 bg-gray-600 text-white ">
diff --git a/app/projects/[slug]/page.jsx b/app/projects/[slug]/page.jsx
index 8719d7c..8010df5 100644
--- a/app/projects/[slug]/page.jsx
+++ b/app/projects/[slug]/page.jsx
@@ -198,6 +198,7 @@ function Page({ params }) {
 							className="mb-5 h-auto max-h-screen max-w-7xl mx-auto"
 							width={1920}
 							height={1080}
+							blurDataURL={image}
 							layout="responsive"
 							objectFit="contain"
 						/>
diff --git a/app/projects/archive/page.jsx b/app/projects/archive/page.jsx
index e98d33e..3e889be 100644
--- a/app/projects/archive/page.jsx
+++ b/app/projects/archive/page.jsx
@@ -6,110 +6,10 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import FixedButon from "@/components/FixedButton";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-const projects = [
-	{
-		year: "2024",
-		title: "Generative Trivia",
-		tech: "NextJS, Gemini AI, TailwindCSS, ShadcnUI, Firebase",
-		github: "https://github.com/Alvalens/generative-trivia",
-		preview: "https://generative-trivia.vercel.app/",
-	},
-	{
-		year: "2024",
-		title: "Saku Senyum",
-		tech: "NextJS, TypeScript, TailwindCSS, ShadcnUI, Prisma, MySQL",
-	},
-	{
-		year: "2024",
-		title: "SIMADUN",
-		tech: "Laravel, Bootstrap, JQuery, MySQL, DataTables",
-	},
-	{
-		year: "2023",
-		title: "LUDOang",
-		tech: "Python, Pygame, OpenGL",
-		github: "https://github.com/Alvalens/ludo-game",
-		preview:
-			"https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
-	},
-	{
-		year: "2023",
-		title: "React Realtime Chat",
-		tech: "Javascript, React Js, Firebase, Daisy UI",
-		github: "https://github.com/Alvalens/react-realtime-chat",
-		preview: "https://react-chat-rouge.vercel.app",
-	},
-	{
-		year: "2023",
-		title: "React Tools",
-		tech: "Javascript, React Js, TailwindCSS",
-		github: "https://github.com/Alvalens/react-tools",
-		preview: "react-tools-flax.vercel.app",
-	},
-	{
-		year: "2023",
-		title: "Aleph Discord Bot",
-		tech: "Python, Serp API, Discord.py",
-		github: "https://github.com/Alvalens/aleph-discord-bot",
-	},
-	{
-		year: "2023",
-		title: "LPTK CUP UM 2023",
-		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
-		github: "",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "NU INO Website",
-		tech: "PHP, Laravel, Livewire Bootstrap, MySQL, jQuery, DataTables",
-		github: "",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Unmuh Jember Landing Page",
-		tech: "HTML, CSS, Javascript",
-		github: "https://github.com/Alvalens/unmuh-jember-landing-page",
-		preview: "https://alvalens.github.io/unmuh-jember-landing-page/",
-	},
-	{
-		year: "2022",
-		title: "Alvalens Website",
-		tech: "Javascript, Next Js, TailwindCSS",
-		github: "https://github.com/Alvalens/Alvalens-porto-1",
-		preview: "https://alvalens.my.id",
-	},
-	{
-		year: "2023",
-		title: "Python audio tranlator",
-		tech: "Python, Assembly AI",
-		github: "https://github.com/Alvalens/python-audio-translation",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "A4 Education website",
-		tech: "PHP, Laravel, Bootstrap, MySQL, jQuery, DataTables",
-		github: "https://github.com/Alvalens/A4",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Cry Cast crypto forecast",
-		tech: "PHP, Laravel, Bootstrap, MySQL",
-		github: "https://github.com/Alvalens/cry-cast",
-		preview: "",
-	},
-	{
-		year: "2023",
-		title: "Mini Harbor",
-		tech: "Python, Pygame",
-		github: "https://github.com/Alvalens/mini-harbor",
-		preview: "",
-	},
-];
+import Projects from "@/json/data.json"
+
 export default function Page () {
+	const projects = Projects.Projects
   return (
 		<>
 			<main className="overflow-hidden">
@@ -188,12 +88,14 @@ export default function Page () {
 										className="hover:shadow-md transition-all ease duration-500">
 										<td>{project.year}</td>
 										<td>{project.title}</td>
-										<td>{project.tech}</td>
+										<td>
+											{project.tech.map((t) => `${t}, `)}
+										</td>
 										<td>
 											<div className="flex flex-row justify-center items-center">
-												{project.github && (
+												{project.code && (
 													<a
-														href={project.github}
+														href={project.code}
 														title="Link to GitHub">
 														<FontAwesomeIcon
 															icon={faGithub}
diff --git a/app/projects/data/projects.js b/app/projects/data/projects.js
deleted file mode 100644
index dcf867f..0000000
--- a/app/projects/data/projects.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import Simadun from "@/public/image/projects/main-project/simadun.png";
-import Trivia from "@/public/image/projects/main-project/trivia.png";
-import SakuSenyum from "@/public/image/projects/main-project/saku-senyum.png";
-import LUDOang from "@/public/image/projects/main-project/ludo.png";
-import ReactChatMain from "@/public/image/projects/main-project/react-chat.png";
-import ReactTools from "@/public/image/projects/main-project/react-tools.png";
-import AlephBot from "@/public/image/projects/main-project/aleph-bot.png";
-import LPTK from "@/public/image/projects/web/lptk/lptk1.png";
-import NUINO from "@/public/image/projects/web/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",
-		category: 1,
-	},
-	{
-		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",
-		category: 1,
-	},
-	{
-		title: "Simadun",
-		desc: "Simadun is a exam management system for doctoral that I created as a Fullstack Developer. This project created using Laravel, Bootstrap, and JQuery.",
-		year: "2024",
-		tech: "PHP, Laravel, Bootstrap, JQuery, MySQL, Datatables",
-		bg: Simadun,
-		slug: "simadun",
-		category: 1,
-	},
-	{
-		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",
-		category: 9,
-	},
-	{
-		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",
-		category: 1,
-	},
-	{
-		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",
-		category: 1,
-	},
-	{
-		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",
-		category: 9,
-	},
-	{
-		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",
-		category: 1,
-	},
-	{
-		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",
-		category: 1,
-	},
-];
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index 07c8db6..885593e 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -3,17 +3,17 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
-import Image from "next/legacy/image";
+import Image from "next/image";
 
 // images
-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 ReactChat1 from "@/public/image/projects/web/trivia/trivia1.png";
+import ReactChat2 from "@/public/image/projects/web/trivia/trivia2.png";
+import ReactChat3 from "@/public/image/projects/web/trivia/trivia3.png";
 import ProjectAll from "@/public/image/projects.png";
 
 import Hr from "@/components/Hr";
 import ProjectCard from "./(project-card)";
-import { projects } from "./data/projects";
+import Projects from "@/json/data.json";
 import FixedButon from "@/components/FixedButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
@@ -26,6 +26,8 @@ const category = {
 
 export default function Page() {
 	const [activeCategory, setActiveCategory] = useState(1);
+	const projects = Projects.Projects.filter	((item) => item.show === true
+	);
 
 	useEffect(() => {
 		window.scrollTo(0, 0);
@@ -205,7 +207,7 @@ export default function Page() {
 					</motion.div>
 				</div>
 				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
-					<div className="flex justify-start items-start flex-col my-5 self-start ">
+					<div className="flex justify-center items-center flex-col my-5 self-start">
 						<Hr variant="long"></Hr>
 						<motion.h1
 							className="text-3xl font-bold mt-3"
@@ -264,6 +266,7 @@ export default function Page() {
 						/>
 					))}
 				</div>
+
 				{/* view in archive btn */}
 				<motion.div
 					initial={{
diff --git a/json/data.json b/json/data.json
index b30bae5..f9f2e77 100644
--- a/json/data.json
+++ b/json/data.json
@@ -1,6 +1,33 @@
 {
   "Projects": [
     {
+      "show": true,
+      "title": "Javanese Translation Website",
+      "desc": [
+        "A Javanese ngoko - krama translation website that I created as a collaborative project with my friends. The website is built using the original Transformer architecture by Vaswani et al. (2017). Built with Python, TensorFlow, Flask, HTML, and CSS, the website allows users to input text in Javanese krama and receive the corresponding ngoko translation.", 
+        "The website is designed to be simple to use, with a clean and modern interface that appeals to a wide audience. Users can input text in Javanese krama and receive the corresponding ngoko translation. The Project also provide ipynb file for the model training and the model itself."
+      ],
+      "year": "2024",
+      "preview": "",
+      "code": "https://github.com/Alvalens/web-javanese-translation",
+      "thumbnail": "/image/projects/ai/javanese-translation/javanese-translation-thumbnail.jpg",
+      "images": [
+        "/image/projects/ai/javanese-translation/javanese-translation1.png",
+        "/image/projects/ai/javanese-translation/javanese-translation2.png"
+      ],
+      "tech": [
+        "Transformers",
+        "Python",
+        "Tensorflow",
+        "Flask",
+        "HTML",
+        "CSS"
+      ], 
+      "slug": "trivia",
+      "category": 2
+    },
+    {
+      "show": true,
       "title": "Generative Trivia",
       "desc": [
         "A generative trivia website built with Next.js, Firebase, NextAuth, Google OAuth, and TypeScript. Users can generate trivia questions for predefined school subjects and answer them with a unique interactive input style. The application supports user authentication with Google and stores data in Firestore.",
@@ -9,6 +36,7 @@
       "year": "2024",
       "preview": "https://generative-trivia.vercel.app/",
       "code": "https://github.com/Alvalens/generative-trivia",
+      "thumbnail": "/image/projects/web/trivia/trivia-thumbnail.png",
       "images": [
         "/image/projects/web/trivia/trivia1.png",
         "/image/projects/web/trivia/trivia2.png",
@@ -21,15 +49,18 @@
         "Firebase",
         "Gemini API"
       ], 
-      "slug": "trivia"
+      "slug": "trivia",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Saku Senyum",
       "desc": [
         "Saku Senyum is a website that I created as a Fullstack Developer in PT Hafdzahmedia based on client request. The website is a sales management for UMKM or small business. The website is built using Next.js, TypeScript, Tailwind CSS, ShadCN UI, Prisma, and MySQL.",
         "The website has a few features such as a dashboard for the user to manage their business sales, a statistic page, and a sales report page. User can see their sales performance in a fancy chart to make it easier to understand. The user also can export their sales report to a PDF file which can be printed or saved to their device."
       ],
       "year": "2024",
+      "thumbnail": "/image/projects/web/saku-senyum/saku-senyum-thumbnail.png",
       "images": [
         "/image/projects/web/saku-senyum/saku-senyum1.png",
         "/image/projects/web/saku-senyum/saku-senyum2.png",
@@ -44,9 +75,11 @@
         "Prisma",
         "MySQL"
       ], 
-      "slug": "saku-senyum"
+      "slug": "saku-senyum",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Simadun",
       "desc": [
         "Simadun is an Exam Management System developed for doctoral students in the Department of Electrical Engineering and Informatics Universitas Negeri Malang. The system facilitates the management of five different types of examinations, allowing students to apply for exams with ease. Professors and program heads can efficiently oversee the exam processes.",
@@ -54,6 +87,7 @@
         "With Simadun, students can submit their exam applications online, track their application status, and receive timely notifications regarding their exam schedules. Program heads and relevant lecturers have access to comprehensive dashboards where they can manage exam requests, allocate resources, and monitor overall exam logistics. "
       ],
       "year": "2024",
+      "thumbnail": "/image/projects/web/simadun/simadun-thumbnail.png",
       "images": [
         "/image/projects/web/simadun/simadun1.png",
         "/image/projects/web/simadun/simadun2.png",
@@ -70,9 +104,11 @@
         "DataTables"
 
       ], 
-      "slug": "simadun"
+      "slug": "simadun",
+      "category": 1
     },
     {
+      "show": true,
       "title": "LUDOang",
       "desc": [
         "LUDOang is a game that my team and I created for a final project in my university. The game is built python, pygame, and OpenGL. The game is a 2D game that is inspired by a Ludo game. The game has a few features such randomZone, and a 3D dice.",
@@ -81,6 +117,7 @@
       "year": "2023",
       "preview": "https://github.com/Alvalens/ludo-game/releases/tag/pre-release",
       "code": "https://github.com/Alvalens/ludo-game",
+      "thumbnail": "/image/projects/other/LUDOang/ludo-thumbnail.png",
       "images": [
         "/image/projects/other/LUDOang/ludo1.png",
         "/image/projects/other/LUDOang/ludo2.png",
@@ -91,9 +128,33 @@
         "Pygame",
         "OpenGL"
       ], 
-      "slug": "ludoang"
+      "slug": "ludoang",
+      "category": 9
     },
     {
+      "show": true,
+      "title": "VICC Landing Page",
+      "desc": [
+        "This project is one of my freelance projects. This project is a landing page for Vocational Inter-cultural Camp event held by Vocational Faculty of Universitas Negeri Malang. The website is built using Next.js, Javascript, and Tailwind CSS.", "The website is mainly frontend project, which is already using responsive design. The website has a few features such carousel, and a few animations. The website also has a few pages such as home, topic, and speaker page."
+      ],
+      "year": "2023",
+      "preview": "https://inter-cultural-camp.vercel.app",
+      "thumbnail": "/image/projects/web/vicc/vicc-thumbnail.jpg",
+      "images": [
+        "/image/projects/web/vicc/vicc1.png",
+        "/image/projects/web/vicc/vicc2.png",
+        "/image/projects/web/vicc/vicc3.png"
+      ],
+      "tech": [
+        "JavaScript",
+        "NextJS",
+        "Tailwind CSS"
+      ],
+      "slug": "vicc",
+      "category": 1
+    },
+    {
+      "show": true,
       "title": "React Realtime Chat",
       "desc": [
         "My ambitious project that delves into the world of interactive web development using React. This project is a realtime chat application that allows users to create chat rooms and chat with other users in realtime. The application is built using React, Firebase, and Daisy UI.",
@@ -102,6 +163,7 @@
       "year": "2023",
       "preview": "https://react-chat-rouge.vercel.app",
       "code": "https://github.com/Alvalens/react-realtime-chat",
+      "thumbnail": "/image/projects/web/react-chat/chat-thumbnail.png",
       "images": [
         "/image/projects/web/react-chat/chat1.png",
         "/image/projects/web/react-chat/chat2.png",
@@ -115,9 +177,11 @@
         "Firebase",
         "Daisy UI"
       ],
-      "slug": "react-chat"
+      "slug": "react-chat",
+      "category": 1
     },
     {
+      "show": true,
       "title": "React Tools",
       "desc": [
         "React Tools is a groundbreaking and user-friendly project that brings together a comprehensive collection of tools and components crafted with cutting-edge technologies, including React, React Router, and TailwindCSS. What sets this project apart is that it's not just a suite of powerful features, but it's also a significant milestone as it marks my very first venture into the world of React development.",
@@ -129,6 +193,7 @@
       "year": "2023",
       "preview": "https://react-tools-flax.vercel.app",
       "code": "https://github.com/Alvalens/react-tools",
+      "thumbnail": "/image/projects/web/tools/tools-thumbnail.png",
       "images": [
         "/image/projects/web/tools/tools.png",
         "/image/projects/web/tools/tools1.png",
@@ -141,15 +206,18 @@
         "React Router",
         "TailwindCSS"
       ],
-      "slug": "react-tools"
+      "slug": "react-tools",
+      "category": 1
     },
     {
+      "show": true,
       "title": "Aleph Discord Bot",
       "desc": [
         "Aleph is a Discord bot that I created for my dircord server to use. The bot is built using Python and the discord.py library. The bot has image grabber feauture that takes argument (keywords) and returns an image from the internet.", "Other than that this bot has a few other features such as utility command to delete a messages, and a command to get the server's ping. This bot is still in development and I plan to add more features in the future."],
       "year": "2023",
       "preview": "",
       "code": "https://github.com/Alvalens/aleph-discord-bot",
+      "thumbnail": "/image/projects/other/bot/bot-thumbnail.png",
       "images": [
         "/image/projects/other/bot/bot1.png",
         "/image/projects/other/bot/bot2.png"
@@ -159,9 +227,11 @@
         "Discord.py",
         "Google Serp API"
       ],
-      "slug": "aleph-discord-bot"
+      "slug": "aleph-discord-bot",
+      "category": 9
     }, 
     {
+      "show": true,
       "title": "LPTK Cup 2023 Website",
       "desc": [
         "LPTK Cup UM is a website that I created for a competition held by  the Universitas Negeri Malang. The website is mainly built using Laravel and Bootstrap. The website has a few features such as a registration form, a login system, article system, file upload,  and a dashboard for the admin to manage the contents.",
@@ -170,6 +240,7 @@
       "year": "2023",
       "preview": "",
       "code": "",
+      "thumbnail": "/image/projects/web/lptk/lptk1.png",
       "images": [
         "/image/projects/web/lptk/lptk1.png",
         "/image/projects/web/lptk/lptk2.png",
@@ -184,15 +255,18 @@
         "jQuery",
         "DataTables"
       ],
-      "slug": "lptk-cup-2023"
+      "slug": "lptk-cup-2023",
+      "category": 1
     }, 
     {
+      "show": true,
       "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.", "This website is LMS like system, have a user management, user auth, quiz and material for student and FAQ",  "In this project I learned how to work with a team and how to manage a project. I also learned new library such as livewire and alpine.js."],
       "year": "2023",
       "preview": "",
       "code": "",
+      "thumbnail": "/image/projects/web/ino/ino1.png",
       "images": [
         "/image/projects/web/ino/ino1.png",
         "/image/projects/web/ino/ino2.png",
@@ -207,7 +281,8 @@
         "jQuery",
         "DataTables"
       ],
-      "slug": "nu-ino-website"
+      "slug": "nu-ino-website",
+      "category": 1
     }
   ]
 }
diff --git a/public/image/projects/main-project/heart-attack-prediction.jpg b/public/image/projects/ai/heart-attack-prediction/heart-attack-prediction-thumbnail.jpg
similarity index 100%
rename from public/image/projects/main-project/heart-attack-prediction.jpg
rename to public/image/projects/ai/heart-attack-prediction/heart-attack-prediction-thumbnail.jpg
diff --git a/public/image/projects/main-project/javanese-translation.jpg b/public/image/projects/ai/javanese-translation/javanese-translation-thumbnail.jpg
similarity index 100%
rename from public/image/projects/main-project/javanese-translation.jpg
rename to public/image/projects/ai/javanese-translation/javanese-translation-thumbnail.jpg
diff --git a/public/image/projects/ai/javanese-translation/javanese-translation1.png b/public/image/projects/ai/javanese-translation/javanese-translation1.png
new file mode 100644
index 0000000..22a2fae
Binary files /dev/null and b/public/image/projects/ai/javanese-translation/javanese-translation1.png differ
diff --git a/public/image/projects/ai/javanese-translation/javanese-translation2.png b/public/image/projects/ai/javanese-translation/javanese-translation2.png
new file mode 100644
index 0000000..2463d89
Binary files /dev/null and b/public/image/projects/ai/javanese-translation/javanese-translation2.png differ
diff --git a/public/image/projects/main-project/echoes-of-the-shadows.jpg b/public/image/projects/other/EoS/EoS-thumbnail.jpg
similarity index 100%
rename from public/image/projects/main-project/echoes-of-the-shadows.jpg
rename to public/image/projects/other/EoS/EoS-thumbnail.jpg
diff --git a/public/image/projects/main-project/ludo.png b/public/image/projects/other/LUDOang/ludo-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/ludo.png
rename to public/image/projects/other/LUDOang/ludo-thumbnail.png
diff --git a/public/image/projects/main-project/aleph-bot.png b/public/image/projects/other/bot/bot-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/aleph-bot.png
rename to public/image/projects/other/bot/bot-thumbnail.png
diff --git a/public/image/projects/main-project/mood-now.jpg b/public/image/projects/web/mood-now/mood-now-thumbnail.jpg
similarity index 100%
rename from public/image/projects/main-project/mood-now.jpg
rename to public/image/projects/web/mood-now/mood-now-thumbnail.jpg
diff --git a/public/image/projects/main-project/react-chat.png b/public/image/projects/web/react-chat/chat-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/react-chat.png
rename to public/image/projects/web/react-chat/chat-thumbnail.png
diff --git a/public/image/projects/main-project/saku-senyum.png b/public/image/projects/web/saku-senyum/saku-senyum-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/saku-senyum.png
rename to public/image/projects/web/saku-senyum/saku-senyum-thumbnail.png
diff --git a/public/image/projects/main-project/simadun.png b/public/image/projects/web/simadun/simadun-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/simadun.png
rename to public/image/projects/web/simadun/simadun-thumbnail.png
diff --git a/public/image/projects/main-project/react-tools.png b/public/image/projects/web/tools/tools-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/react-tools.png
rename to public/image/projects/web/tools/tools-thumbnail.png
diff --git a/public/image/projects/main-project/trivia.png b/public/image/projects/web/trivia/trivia-thumbnail.png
similarity index 100%
rename from public/image/projects/main-project/trivia.png
rename to public/image/projects/web/trivia/trivia-thumbnail.png
diff --git a/public/image/projects/main-project/vicc.jpg b/public/image/projects/web/vicc/vicc-thumbnail.jpg
similarity index 100%
rename from public/image/projects/main-project/vicc.jpg
rename to public/image/projects/web/vicc/vicc-thumbnail.jpg
diff --git a/public/image/projects/web/vicc/vicc1.png b/public/image/projects/web/vicc/vicc1.png
new file mode 100644
index 0000000..d063401
Binary files /dev/null and b/public/image/projects/web/vicc/vicc1.png differ
diff --git a/public/image/projects/web/vicc/vicc2.png b/public/image/projects/web/vicc/vicc2.png
new file mode 100644
index 0000000..3632477
Binary files /dev/null and b/public/image/projects/web/vicc/vicc2.png differ
diff --git a/public/image/projects/web/vicc/vicc3.png b/public/image/projects/web/vicc/vicc3.png
new file mode 100644
index 0000000..d72c662
Binary files /dev/null and b/public/image/projects/web/vicc/vicc3.png differ