diff --git a/package-lock.json b/package-lock.json
index 02b1a70..5603b96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -1363,6 +1364,7 @@
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1403,6 +1405,7 @@
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1515,6 +1518,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -1836,6 +1840,7 @@
       "integrity": "sha512-MsBdObhM4cEwkzCiraDv7A6txFXEqtNXOb877TsSp2FCkBNl8JfVQrmiuDqC1IkejT6JLPzYBXx/xAiYhyzgGA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2676,6 +2681,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2743,6 +2749,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2752,6 +2759,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -3022,6 +3030,7 @@
       "integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.3",
diff --git a/src/App.jsx b/src/App.jsx
index f3deba0..e92f2de 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import Navbar from './components/Navbar';
 
 // TODO: Import react router dom here
-
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import Footer from './components/Footer';
 import './styles/App.css';
-
+import Home from './pages/Home';
 function App() {
   return (
     <Router>
@@ -13,7 +13,10 @@ function App() {
         <Navbar />
         <main className="main-content">
          {/* TODO: Add react router dom routes here */}
-         
+         <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/projects" element={<projects/>} />
+         </Routes>
         </main>
         <Footer />
       </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c371cae..1b49778 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import { Github } from 'lucide-react';
 import '../styles/Navbar.css';
@@ -20,10 +20,20 @@ const Navbar = () => {
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+            <Link 
+           to="/"
+           className={location.pathname === "/" ? "active" : ""}>
+            Home
+           </Link>
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+               <Link to="/projects"
+            className= { location.pathname === "/projects" ? "active" : ""}>
+              projects
+            </Link>
           </li>
+          
         </ul>
       </div>
     </nav>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..a6cfd53 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 // TODO: Import axios here
-
+import axios from "axios"
 import moment from 'moment';
 import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import '../styles/Home.css';
@@ -15,7 +15,19 @@ const Home = () => {
   // TODO: Fetch user data from GitHub API using axios and useEffect and set the user state, also handle the loading and error states
     // API: https://api.github.com/users/YOUR_USERNAME
 
-
+useEffect(() => {
+  const fetchUser=async () => {
+    try
+    {setLoading(true);
+    
+    const response = await axios.get("https://api.github.com/users/mukhtaarbatuun");
+    setUser(response.data);
+  } finally{
+    setLoading(false);
+  }
+};
+fetchUser();
+ }, []);
 
   if (loading) {
     return <div className="loading">Loading profile data...</div>;
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index def4d8a..35ede54 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 // TODO: Import axios here
-
+import axios from "axios"
 
 import ProjectCard from '../components/ProjectCard';
 import '../styles/Projects.css';
@@ -14,6 +14,24 @@ const Projects = () => {
  // TODO: Fetch repositories from GitHub API using axios and useEffect and set the repos state, also handle the loading and error states
  // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated
 
+useEffect(() => {
+  const fetchRepos = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await axios.get(
+        "https://api.github.com/users/mukhtaarbatuun/repos?per_page=10&sort=updated"
+      );
+      setRepos(response.data);
+    } catch (err) {
+      setError("Failed to load repositories.");
+    } finally {
+      setLoading(false);
+         }
+  };
+     
+      fetchRepos();
+    }, []);
 
 
   if (loading) {