diff --git a/package-lock.json b/package-lock.json
index 02b1a70..8d69a14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "devsphere",
       "version": "0.0.0",
       "dependencies": {
-        "axios": "^1.8.4",
+        "axios": "^1.11.0",
         "lucide-react": "^0.501.0",
         "moment": "^2.30.1",
         "react": "^19.0.0",
@@ -1467,13 +1467,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -2116,14 +2116,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
diff --git a/package.json b/package.json
index 8447a07..625bf48 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.4",
+    "axios": "^1.11.0",
     "lucide-react": "^0.501.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
diff --git a/src/App.jsx b/src/App.jsx
index f3deba0..8d1df18 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +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 Home from "./pages/Home";
+import Projects from "./pages/Projects";
+
 
 import Footer from './components/Footer';
 import './styles/App.css';
@@ -14,6 +18,10 @@ function App() {
         <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..a13050e 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
+import { Link } from "react-router-dom"
 import { useLocation } from 'react-router-dom'
 
 import { Github } from 'lucide-react';
@@ -20,9 +21,14 @@ const Navbar = () => {
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+           <Link to="/">Home</Link>
+       
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+             <Link to="/projects">Projects</Link>
+           
+
           </li>
         </ul>
       </div>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..a17e7d2 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';
@@ -16,6 +16,32 @@ const Home = () => {
     // API: https://api.github.com/users/YOUR_USERNAME
 
 
+    useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get("https://api.github.com/users/alqazimi")
+          .then((response) => {
+           setUser(response.data);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setError(err.message);
+            setLoading(false);
+          });
+      } catch (error) {
+        console.log(error);
+        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..cc99923 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 // TODO: Import axios here
 
-
+import axios from "axios";
 import ProjectCard from '../components/ProjectCard';
 import '../styles/Projects.css';
 
@@ -15,6 +15,31 @@ const Projects = () => {
  // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated
 
 
+    useEffect(() => {
+const fetchrepositories = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get("https://api.github.com/users/alqazimi/repos?per_page=10&sort=updated")
+          .then((response) => {
+            setRepos(response.data);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setError(err.message);
+            setLoading(false);
+          });
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+      }
+    };
+
+    
+    fetchrepositories();
+  }, []);
+
+
 
   if (loading) {
     return <div className="loading">Loading repositories...</div>;