diff --git a/src/App.jsx b/src/App.jsx
index 21ad36e..c97b7fc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,24 +1,36 @@
-import "./index.css";
-import Card from "./components/Card";
-import Nav from "./components/Nav";
-import Footer from "./components/Footer";
+import React, { useState } from "react";
+import data from "../database/data.json"; // adjust the path if needed
+import Card from "./Card"; // adjust path if needed
 
-function App() {
+export default function App() {
+  const [selectedCategory, setSelectedCategory] = useState("");
+
+  const categories = [...new Set(data.map(project => project.category))];
 
-  
   return (
-    <div className="App sm:w-full dark:bg-[#13131d]">
-      <Nav />
-      <h1 className="text-2xl md:text-4xl text-center pt-6 pb-12 dark:text-white">
-        List of Beginner Friendly OpenSource Projects
-      </h1>
-      <Card />
-      <Footer />
+    <div className="p-4">
+      <h1 className="text-3xl font-bold mb-4 text-center dark:text-white">Code Nexus Projects</h1>
+
+      <div className="mb-6 text-center">
+        <label htmlFor="category" className="text-lg font-semibold dark:text-white mr-2">
+          Filter by Category:
+        </label>
+        <select
+          id="category"
+          value={selectedCategory}
+          onChange={(e) => setSelectedCategory(e.target.value)}
+          className="p-2 rounded border dark:bg-[#1f1f1f] dark:text-white"
+        >
+          <option value="">All</option>
+          {categories.map((category, idx) => (
+            <option key={idx} value={category}>
+              {category}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <Card selectedCategory={selectedCategory} />
     </div>
   );
 }
-
-export default App;
-
-
-// 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 
\ No newline at end of file
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index a125fa5..c517634 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,67 +1,77 @@
-import { BiGitRepoForked } from "react-icons/bi";
-import { BsFillArrowUpRightCircleFill } from "react-icons/bs";
+import React, { useState } from "react";
 import data from "../database/data.json";
-import React,{useState} from "react";
-export default function Card() {
-  // useState 
+
+export default function Card({ selectedCategory }) {
   const [numProjects, setNumProjects] = useState(5);
-  const [totalProjects, setTotalProjects] = useState(data.length);
 
-  // function to load more projects
+  const filteredData = selectedCategory
+    ? data.filter((item) => item.category === selectedCategory)
+    : data;
+
+  const visibleProjects = filteredData.slice(0, numProjects);
+
   const loadMore = () => {
     setNumProjects(numProjects + 5);
   };
 
   return (
     <div>
-      {data.slice(0, numProjects).map((item, i) => {
+      {visibleProjects.map((item, i) => {
         return (
           <div
             key={i}
-            className="mx-auto bg-[#8800ff]  w-5/6 flex-col flex p-6 items-center rounded-lg shadow-2xl text-white relative md:hover:shadow-3xl mb-12 md:w-11/12 md:flex-row  md:gap-24  md:p-12 dark:bg-[#242435]"
+            className="mx-auto bg-[#8800ff] w-5/6 flex-col flex p-6 items-center rounded-lg shadow-2xl text-white relative md:hover:shadow-3xl mb-12 md:w-11/12 md:flex-row md:gap-24 md:p-12 dark:bg-[#242435]"
           >
-            {/* image */}
             <a href={item.link}>
               <div className="h-[6rem] w-[10rem] md:h-[12rem] md:w-[20rem]">
                 <img
                   className="w-full h-full hover:scale-110 transition duration-100 ease-in hover:border-2 border-white"
                   src={item.img}
+                  alt={`${item.title} logo`}
                 />
               </div>
             </a>
-            {/* Content */}
-            <div className="content  flex flex-col  py-4 pr-4 md:p-2 ">
+
+            <div className="content flex flex-col py-4 pr-4 md:p-2">
               <a href={item.link}>
-                <h2 className="text-sm text-purple-200  mb-6 tracking-[0.1rem] font-bold hover:text-[white] dark:hover:text-[#00a3ff] md:text-3xl dark:text-white">
+                <h2 className="text-sm text-purple-200 mb-6 tracking-[0.1rem] font-bold hover:text-[white] dark:hover:text-[#00a3ff] md:text-3xl dark:text-white">
                   {item.title}
                 </h2>
               </a>
-              <p className="text-xs  font-inter md:w-5/6 md:text-lg dark:text-[#acacac]">
+              <p className="text-xs font-inter md:w-5/6 md:text-lg dark:text-[#acacac]">
                 {item.description}
               </p>
-            </div>
-            {/* Links */}
-            <div
-              className="flex  absolute bg-purple-500 dark:bg-[#00a3ff]  gap-2 md:gap-12 justify-between 
-            flex-col right-0 top-0 h-full w-6 rounded-tr-lg rounded-br-lg  px-4 py-6 
-             md:p-4 items-center md:h-full md:py-12 md:px-4 md:w-12 md:right-0 md:flex-col "
-            >
-              <a href={item.ghLink} target="_blank" rel="noopener noreferrer">
-                <BiGitRepoForked className=" text-[#062a64] dark:text-white hover:text-white md:text-3xl" />
-              </a>
-              <a href={item.link} target="_blank" rel="noopener noreferrer">
-                <BsFillArrowUpRightCircleFill className=" text-[#062a64] dark:text-white hover:text-white md:text-3xl" />
-              </a>
+              <p className="text-xs italic mt-2 dark:text-[#ababab]">
+                Category: {item.category}
+              </p>
+              <div className="mt-4 text-sm">
+                <a
+                  href={item.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline hover:text-white"
+                >
+                  Project Page
+                </a>{" "}
+                |{" "}
+                <a
+                  href={item.ghLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline hover:text-white"
+                >
+                  GitHub Repo
+                </a>
+              </div>
             </div>
           </div>
         );
       })}
-      {/* Load More Button */}
-      {numProjects < totalProjects && (
+
+      {numProjects < filteredData.length && (
         <button
           onClick={loadMore}
-          className="text-xl mx-auto block bg-purple-300 rounded-xl hover:bg-purple-400 hover:text-white p-2
-          my-6 md:mt-2 md:mb-12  md:px-4 md:py-2 "
+          className="text-xl mx-auto block bg-purple-300 rounded-xl hover:bg-purple-400 hover:text-white p-2 my-6 md:mt-2 md:mb-12 md:px-4 md:py-2"
         >
           Load more
         </button>
diff --git a/src/database/data.json b/src/database/data.json
index 33648ee..356714c 100644
--- a/src/database/data.json
+++ b/src/database/data.json
@@ -48,4 +48,11 @@
     "description": "Wind-Tails, an Open Source application for Tailwind CSS Prebuilt Components. You don't need to go anywhere to search for your required tailwind classes. Find here, a visual representation of the effects of various classes, along with a playground which shows in real-time the effect of tweaking various parameters of the class",
     "ghLink": "https://github.com/dcryptoniun/Wind-Tails"
   }
+  
+  {
+  "name": "First-Contributions",
+  "description": "A project to help you make your first open-source contribution.",
+  "url": "https://github.com/firstcontributions/first-contributions",
+  "category": "Documentation"
+  }
 ]