diff --git a/src/App.js b/src/App.js
index 1ec9a6a..056cb85 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,37 @@
-import "./App.css";
-import Home from "./pages/Home";
-import ReactGA from 'react-ga';
-import React, {useEffect} from 'react'
+// import "./App.css";
+// import Home from "./pages/Home";
+// import ReactGA from 'react-ga';
+// import React, { useEffect } from 'react'
 
-function App() {
-  useEffect(() => {
-    ReactGA.initialize('G-SW2KGM0L12');
-    ReactGA.pageview(window.location.pathname + window.location.search)
-    },[]);
+// function App() {
+//   useEffect(() => {
+//     ReactGA.initialize('G-SW2KGM0L12');
+//     ReactGA.pageview(window.location.pathname + window.location.search)
+//   }, []);
+//   return (
+//     <Home />
+//   );
+// }
+
+// export default App;
+// src/App.js
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import Home from './pages/Home'; // Adjust path based on your structure
+// import Projects from './pages/Projects';
+import ProjectCard from './pages/projects';
+
+const App = () => {
   return (
-      <Home />
+    <Router>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/projects" element={<ProjectCard />} />
+      </Routes>
+    </Router>
+
   );
-}
+};
 
 export default App;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..51ee51b
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,80 @@
+/* src/components/Header.css */
+.Nav {
+    background: transparent;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 10;
+}
+
+.NavLinkHome {
+    color: rgb(119, 119, 121);
+    display: flex;
+    font-size: 1.2rem;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+}
+
+.NavLinkHome:hover {
+    color: #f6f6f6;
+}
+
+.NavLink {
+    color: rgb(119, 119, 121);
+    display: flex;
+    font-size: 1.2rem;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+}
+
+.NavLink:hover {
+    color: black;
+}
+
+.Logo img {
+    width: 47px;
+    height: 47px;
+    border-radius: 50%;
+}
+
+.Bars {
+    display: none;
+    color: #fff;
+    font-size: 1.8rem;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+    .Bars {
+        display: block;
+    }
+
+    .NavMenu {
+        display: none;
+    }
+}
+
+.NavMenu {
+    display: flex;
+    align-items: center;
+    margin-right: -24px;
+}
+
+.menu-item+.menu-item {
+    margin-left: 1rem;
+}
+
+.NavBtn {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+}
+
+@media screen and (max-width: 768px) {
+    .NavBtn {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 3e2a275..2b59707 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,25 +1,34 @@
+
 import React from "react";
-import { Nav, Logo, NavLink, Bars, NavMenu, NavBtn } from "./HeaderElements";
 import logoImage from '../../assets/Images/SSlogo.jpg';
-const Header = ({ toggle }) => {
+import './Header.css'; // Import the CSS file
+import { Link } from "react-router-dom";
+
+import { Nav, Logo, NavLink, Bars, NavMenu, NavBtn } from "./HeaderElements";
+const Header = ({ toggle, home }) => {
   return (
     <div className="Container" style={{ padding: 0 }}>
-      <Nav>
-        <Logo to="/">
+      <nav className="Nav">
+        <div className="Logo">
           <img src={logoImage} alt="Header Logo" />
-        </Logo>
-        <NavMenu>
-          <NavLink className="menu-item" to="projects">
-            Projects
-          </NavLink>
-          <NavLink className="menu-item" to="about">
-            About
-          </NavLink>
-          <NavLink className="menu-item" to="skill">
-            Skills
-          </NavLink>
-        </NavMenu>
-        <NavBtn>
+        </div>
+        {home ? (
+          <div className="NavMenu">
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="projects">
+              Projects
+            </NavLink>
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="about">
+              About
+            </NavLink>
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="skill">
+              Skills
+            </NavLink>
+          </div>) : (<div className="NavMenu">
+            <Link className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="/">
+              Home
+            </Link>
+          </div>)}
+        <div className="NavBtn">
           <a
             className="btn PrimaryBtn"
             href="https://www.linkedin.com/in/sathya--seelan/"
@@ -28,9 +37,9 @@ const Header = ({ toggle }) => {
           >
             Connect With Me
           </a>
-        </NavBtn>
-        <Bars onClick={toggle} />
-      </Nav>
+        </div>
+        <div className="Bars" onClick={toggle} />
+      </nav>
     </div>
   );
 };
diff --git a/src/components/Header/HeaderElements.js b/src/components/Header/HeaderElements.js
index c938c6b..452ebac 100644
--- a/src/components/Header/HeaderElements.js
+++ b/src/components/Header/HeaderElements.js
@@ -12,7 +12,7 @@ export const Nav = styled.nav`
 `;
 
 export const NavLink = styled(ScrollLink)`
-  color: rgb(119, 119, 121);
+  ${'' /* color: rgb(119, 119, 121);
   display: flex;
   font-size: 1.2rem;
   align-items: center;
@@ -20,7 +20,7 @@ export const NavLink = styled(ScrollLink)`
   cursor: pointer;
   &:hover {
     color: #f6f6f6;
-  }
+  } */}
 `;
 export const Logo = styled('div')`
   img {
diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js
index 5cfbfdf..92cecf8 100644
--- a/src/components/Hero/Hero.js
+++ b/src/components/Hero/Hero.js
@@ -26,7 +26,7 @@ function Hero() {
   return (
     <main>
       <Dropdown isOpen={isOpen} toggle={toggle} />
-      <Header toggle={toggle} />
+      <Header toggle={toggle} home={true} />
       <HeroContainer>
         <HeroWrapper>
           <HeroLeft>
diff --git a/src/components/Projects/AllProjects.js b/src/components/Projects/AllProjects.js
new file mode 100644
index 0000000..035f597
--- /dev/null
+++ b/src/components/Projects/AllProjects.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { ProjectList } from "../../data/ProjectData"; // Adjusted import path
+import ProjectCard from "./ProjectCard/ProjectCard"; // Adjust the import path as necessary
+
+function AllProjects() {
+    return (
+        <div>
+            <h1>All Projects</h1>
+            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                {ProjectList.map((project, index) => (
+                    <ProjectCard key={index} project={project} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default AllProjects;
diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
index 8af2c87..8937e7e 100644
--- a/src/components/Projects/Projects.js
+++ b/src/components/Projects/Projects.js
@@ -22,8 +22,17 @@ function Projects() {
         <div className="Container">
           <div className="SectionTitle">Projects</div>
           <ProjectCard />
+          <div style={{ display: "flex", justifyContent: "center", marginTop: "20px" }}>
+            <button
+              className="btn PrimaryBtn btn-shadow"
+              onClick={() => (window.location.href = "/projects")}
+            >
+              More Projects
+            </button>
+          </div>
         </div>
       </div>
+
     </>
   );
 }
diff --git a/src/components/SocialIcon/ScrollToTop.js b/src/components/SocialIcon/ScrollToTop.js
index 330e779..61e2124 100644
--- a/src/components/SocialIcon/ScrollToTop.js
+++ b/src/components/SocialIcon/ScrollToTop.js
@@ -43,21 +43,17 @@ function ScrollToTop() {
 
         shouldRender &&
 
-        <Tooltip title='Scroll to top' placement='top' open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
-
+        <>
             <div style={{ backgroundColor: 'black', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <h1 style={{ color: 'white', fontWeight: 'bold', margin: '0' }}> &copy; 2024 [ Sathya Seelan G   ]</h1>
             </div>
 
-            {/* <div  style={{ backgroundColor:'black' , height:'50px'}} >
-    <h1 style={{ color: 'white', fontWeight: 'bold' }} >copy</h1>
-    <h3 >&copy; 2023 [ Sathya Seelan G   ]</h3>
-</div> */}
-
-            <StyledIconButton size='large' aria-label='scroll to top' onClick={handleClick} >
-                <StyledArrowIcon fontSize={40} />
-            </StyledIconButton>
-        </Tooltip>
+            <Tooltip title='Scroll to top' placement='top' open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
+                <StyledIconButton size='large' aria-label='scroll to top' onClick={handleClick} >
+                    <StyledArrowIcon fontSize={40} />
+                </StyledIconButton>
+            </Tooltip>
+        </>
     )
 }
 
diff --git a/src/data/ProjectData.js b/src/data/ProjectData.js
index d24b350..505ef98 100644
--- a/src/data/ProjectData.js
+++ b/src/data/ProjectData.js
@@ -3,11 +3,97 @@
 
 export const ProjectList = [
   {
-    img:  "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/MODERNGUI1.jpg",
-
-    // "/jobDetect.png",
-    // {logoImage},
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/Qbot.webp",
+    title: "QBot",
+    description: "The Telegram Bot project utilizes a Node.js backend to automate tasks and engage users through the Telegram Bot API.",
+    tech_stack: ["Nodejs", "API"],
+    github_url: "https://github.com/SathyaSeelanG/Telegram_bot",
+    demo_url: "https://t.me/QBotAI_bot",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/FileStore.webp",
+    title: "FileStore",
+    description: "A Node.js app leveraging the Cloudinary API for efficient image and file management, including upload, transformation, and optimization",
+    tech_stack: ["Nextjs", "API", "Cloudinary",],
+    github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App",
+    demo_url: "https://filestore-one.vercel.app/",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/Price_engine.webp",
+    title: "Price Comparision App",
+    description: "Price Comparison App is a web application that retrieves and displays price details from various online platforms",
+    tech_stack: ["Python", "Django", "HTML", "CSS",],
+    github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App",
+    demo_url: "https://price-comparision-django-keim.onrender.com/",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/NFT_creator.webp",
+    title: "NFT Collection Creator",
+    description: "A Node.js-based NFT generator for the Chia blockchain that creates unique NFTs with layered images and metadata.",
+    tech_stack: ["Nodejs"],
+    github_url: "https://github.com/SathyaSeelanG/NFT-Generator",
+    demo_url: "",
+  },
+  // {
+  //   img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/Ecom.png",
+  //   title: "Ecommerce website",
+  //   description:
+  //     "E-commerce Web Application is a powerful solution for businesses to establish and manage their online stores.",
+  //   tech_stack: ["ReactJs", "NodeJs", "MySQl"],
+  //   github_url: "https://github.com/SathyaSeelanG/Ecommerce_website",
+  //   demo_url: "https://ecom-web-sathya.netlify.app/",
+  // },
+  // {
+  //   img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/Wall.png",
+  //   title: "Wallmart Data Analysis",
+  //   description:
+  //     "Python project focuses on analyzing Walmart's data using four popular modules: NumPy, Pandas, Matplotlib, and Seaborn.",
+  //   tech_stack: ["Python", "Numpy", "Pandas",],
+  //   github_url: "https://github.com/SathyaSeelanG/Wallmart_Sales_Analysis_Python",
+  //   demo_url: "",
+  // },
+  // {
+  //   img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/e7ab083f50926cd1d3ceda5d5d825236f626d3ad/src/assets/Images/CHIA.jpg",
+  //   title: "Chia Currency Converter",
+  //   description:
+  //     "Chia Currency Convert streamlines Chia to any currency, user-friendly interface ensures swift, accurate Conversions.",
+  //   tech_stack: ["Nextjs ", "React js","Chia "],
+  //   github_url: "",
+  //   demo_url: "https://www.spacescan.io/tools/converter/currency",
+  // },
+];
+//-------------------all projects
+export const AllProjectList = [
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/Qbot.webp",
 
+    title: "QBot",
+    description:
+      "The Telegram Bot project utilizes a Node.js backend to automate tasks and engage users through the Telegram Bot API.",
+    tech_stack: ["Nodejs", "API"],
+    github_url: "https://github.com/SathyaSeelanG/Telegram_bot",
+    demo_url: "https://t.me/QBotAI_bot",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/FileStore.webp",
+    title: "FileStore",
+    description:
+      "Price Comparison App is a web application that retrieves and displays price details from various online platforms",
+    tech_stack: ["Nextjs", "API", "Cloudinary",],
+    github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App",
+    demo_url: "https://price-comparision-django-keim.onrender.com/",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/assets/refs/heads/main/Portfolio/Projects/NFT_creator.webp",
+    title: "NFT Collection Creator",
+    description:
+      "Price Comparison App is a web application that retrieves and displays price details from various online platforms",
+    tech_stack: ["Nodejs"],
+    github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App",
+    demo_url: "https://price-comparision-django-keim.onrender.com/",
+  },
+  {
+    img: "https://raw.githubusercontent.com/SathyaSeelanG/Portfolio/main/public/MODERNGUI1.jpg",
     title: "MODERN-GUI",
     description:
       "Project involves building a modern Graphical User Interface (GUI) using Python and advanced UI libraries",
@@ -20,7 +106,7 @@ export const ProjectList = [
     title: "Price Comparision App",
     description:
       "Price Comparison App is a web application that retrieves and displays price details from various online platforms",
-    tech_stack: ["Python","Django","HTML", "CSS", ],
+    tech_stack: ["Python", "Django", "HTML", "CSS",],
     github_url: "https://github.com/SathyaSeelanG/Price_Comparision_Django_App",
     demo_url: "https://price-comparision-django-keim.onrender.com/",
   },
@@ -47,12 +133,11 @@ export const ProjectList = [
     title: "Chia Currency Converter",
     description:
       "Chia Currency Convert streamlines Chia to any currency, user-friendly interface ensures swift, accurate Conversions.",
-    tech_stack: ["Nextjs ", "React js","Chia "],
+    tech_stack: ["Nextjs ", "React js", "Chia "],
     github_url: "",
     demo_url: "https://www.spacescan.io/tools/converter/currency",
   },
 ];
-
 // --------------------------------------- Skills
 
 export const stackList = [
@@ -72,7 +157,7 @@ export const stackList = [
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg",
     name: "ReactJS",
   },
- 
+
   {
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/nextjs/nextjs-original.svg",
     name: "NextJS",
@@ -85,7 +170,7 @@ export const stackList = [
   {
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg",
     name: "Python",
-  }, 
+  },
   {
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg",
     name: "Java",
@@ -105,7 +190,7 @@ export const stackList = [
   {
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/vscode/vscode-original.svg",
     name: "VS Code",
-  },{
+  }, {
     img: "https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg",
     name: "Github",
   },
diff --git a/src/pages/Home.js b/src/pages/Home.js
index e84cb4c..7701afb 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -13,13 +13,13 @@ function Home() {
     <>
       <Hero />
       <About />
-      <Tech/>
+      <Tech />
       <Contributions />
-      <Projects /> 
+      <Projects />
       {/* <Contact />       */}
       {/* <FixSocialIcon /> */}
 
-      
+
       <Footer />
       <ScrollToTop />
     </>
diff --git a/src/pages/projects.js b/src/pages/projects.js
new file mode 100644
index 0000000..a0b4e7d
--- /dev/null
+++ b/src/pages/projects.js
@@ -0,0 +1,68 @@
+import React from "react";
+import { AllProjectList } from "../data/ProjectData";
+import {
+    Card,
+    CardLeft,
+    CardRight,
+    TechCardContainer,
+    TechCard,
+    BtnGroup,
+} from "../components/Projects/ProjectCard/ProjectCardElements";
+import ScrollAnimation from "react-animate-on-scroll";
+import Header from "../components/Header/Header";
+import ScrollToTop from "../components/SocialIcon/ScrollToTop";
+function ProjectCard() {
+    return (
+        <>
+            <Header toggle={false} home={false} />
+            <div className="ProjectWrapper" id="projects">
+                <div className="Container">
+                    <div className="SectionTitle">Projects</div>
+                    {AllProjectList.map((list, index) => (
+                        <ScrollAnimation animateIn="fadeInLeft" key={index}>
+                            <Card>
+                                <CardLeft>
+                                    <img src={list.img} alt={list.name} />
+                                </CardLeft>
+                                <CardRight>
+                                    <h4>{list.title}</h4>
+                                    <p>{list.description}</p>
+                                    <TechCardContainer>
+                                        {list.tech_stack.map((tech, index) => (
+                                            <TechCard key={index}>{tech}</TechCard>
+                                        ))}
+                                    </TechCardContainer>
+                                    <BtnGroup>
+                                        {list.github_url.length > 0 &&
+                                            <a
+                                                className="btn SecondaryBtn btn-shadow"
+                                                href={list.github_url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
+                                                Github
+                                            </a>
+                                        }
+                                        {list.demo_url.length > 0 &&
+                                            <a
+                                                className="btn PrimaryBtn btn-shadow"
+                                                href={list.demo_url}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                            >
+                                                Demo ➜
+                                            </a>
+                                        }
+                                    </BtnGroup>
+                                </CardRight>
+                            </Card>
+                        </ScrollAnimation>
+                    ))}
+                </div>
+            </div>
+            <ScrollToTop />
+        </>
+    );
+}
+
+export default ProjectCard;