diff --git a/package-lock.json b/package-lock.json
index 26fa847..39ecb7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@radix-ui/react-scroll-area": "1.1.0",
         "@radix-ui/react-slot": "1.1.0",
         "@radix-ui/react-tabs": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
         "class-variance-authority": "0.7.0",
         "clsx": "2.1.1",
         "lucide-react": "0.436.0",
@@ -1655,14 +1656,14 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2531,7 +2532,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
diff --git a/src/components/ProjectPage/Projects.jsx b/src/components/ProjectPage/Projects.jsx
index db1f272..f85b8e9 100644
--- a/src/components/ProjectPage/Projects.jsx
+++ b/src/components/ProjectPage/Projects.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import ProjectCards from "../ProjectCards";
 import search_icon from "../../assets/images/Search.svg";
+import { ListFilter } from "lucide-react";
 import {
   Pagination,
   PaginationContent,
@@ -10,6 +11,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../ui/pagination";
+
 import FilterSortModal from "./FilterSortModal";
 import { Cross2Icon } from "@radix-ui/react-icons";
 
@@ -17,6 +19,7 @@ const Projects = ({ data }) => {
   const [projectsData, setProjectsData] = useState(data);
   const [filteredProjects, setFilteredProjects] = useState(data);
   const [searchQuery, setSearchQuery] = useState("");
+  
   const [pageNumber, setPageNumber] = useState(() => {
     // Initialize the page number using the value in local storage or default to 1
     const savedPageNumber = localStorage.getItem("currentPage");
@@ -146,7 +149,6 @@ const Projects = ({ data }) => {
 
     return pages;
   };
-
   const removeFilter = (filter) => {
     setSelectedFields((prevFields) =>
       prevFields.filter((item) => item !== filter)
@@ -167,7 +169,6 @@ const Projects = ({ data }) => {
       setFilteredProjects(projectsData);
     }
   }, [selectedFields]);
-
   return (
     <div className="bg-[#ffffe3] w-full p-5 py-10 md:p-20 lg:px-36 justify-center items-center">
       {/* title */}
@@ -271,6 +272,49 @@ const Projects = ({ data }) => {
           </p>
         )}
       </>
+          />
+        </div>
+        <div className="flex gap-2 justify-center items-center border border-[#E1E1CA] p-4 rounded-lg">
+          <div>
+            <ListFilter />
+          </div>
+          <p className="font-medium text-base">Filter</p>
+        </div>
+      </div>
+
+      {/* Cards */}
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2 py-4 justify-center ">
+        {projectsData.map((project, index) => (
+          <ProjectCards
+            key={project.id}
+            image={project.logoimagelink + "?random=" + index + 1}
+            title={project.title}
+            category={project.category}
+            description={project.description}
+            project_link={project.link}
+          />
+        ))}
+      </div>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              className="cursor-pointer"
+              onClick={() => setPageNumber((page) => Math.max(1, page - 1))}
+            />
+          </PaginationItem>
+          {renderPagination()}
+          <PaginationItem>
+            <PaginationNext
+              className="cursor-pointer"
+              onClick={() =>
+                setPageNumber((page) => Math.min(totalPageNumber, page + 1))
+              }
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
     </div>
   );
 };