diff --git a/src/App.jsx b/src/App.jsx
index f3deba0..8624d12 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,13 @@
-import React from 'react';
-import Navbar from './components/Navbar';
+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';
+import Footer from "./components/Footer";
+import "./styles/App.css";
 
 function App() {
   return (
@@ -12,8 +15,12 @@ function App() {
       <div className="app">
         <Navbar />
         <main className="main-content">
-         {/* TODO: Add react router dom routes here */}
-         
+          {/* TODO: Add react router dom routes here */}
+
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/projects" element={<Projects />} />
+          </Routes>
         </main>
         <Footer />
       </div>
@@ -21,4 +28,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c371cae..849cd00 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React from "react";
+import { Link } from "react-router-dom";
 
 // TODO: Import LINK from react router dom components
-import { useLocation } from 'react-router-dom'
+import { useLocation } from "react-router-dom";
 
-import { Github } from 'lucide-react';
-import '../styles/Navbar.css';
+import { Github } from "lucide-react";
+import "../styles/Navbar.css";
 
 const Navbar = () => {
   const location = useLocation();
@@ -19,10 +20,16 @@ const Navbar = () => {
 
         <ul className="navbar-menu">
           <li className="navbar-item">
-           {/* TODO: Add the home route here */}
+            {/* TODO: Add the home route here */}
+            <Link to="/" className="nav-link">
+              Home
+            </Link>
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+            <Link to="/projects" className="nav-link">
+              Projects
+            </Link>
           </li>
         </ul>
       </div>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..fd563ac 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,11 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 
 // TODO: Import axios here
 
-import moment from 'moment';
-import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
-import '../styles/Home.css';
+import axios from "axios";
+
+import moment from "moment";
+import {
+  Users,
+  Star,
+  GitBranch,
+  MapPin,
+  Calendar,
+  ExternalLink,
+} from "lucide-react";
+import "../styles/Home.css";
 
 const Home = () => {
   const [user, setUser] = useState(null);
@@ -13,9 +22,33 @@ const Home = () => {
   const [error, setError] = useState(null);
 
   // 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
+  // API: https://api.github.com/users/YOUR_USERNAME
+
+  useEffect(() => {
+    // Create an async function that calls the API\
 
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get("https://api.github.com/users/zacimka")
+          .then((response) => {
+            setUser(response.data);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setError(err.message);
+            setLoading(false);
+          });
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+      }
+    };
 
+    // Execute the function
+    fetchUser();
+  }, []);
 
   if (loading) {
     return <div className="loading">Loading profile data...</div>;
@@ -32,10 +65,10 @@ const Home = () => {
           <div className="profile-card">
             <div className="profile-header">
               <div className="avatar-container">
-                <img 
-                  src={user.avatar_url} 
-                  alt={`${user.name}'s avatar`} 
-                  className="avatar" 
+                <img
+                  src={user.avatar_url}
+                  alt={`${user.name}'s avatar`}
+                  className="avatar"
                 />
               </div>
               <div className="profile-info">
@@ -49,13 +82,15 @@ const Home = () => {
                 )}
                 <p className="profile-joined">
                   <Calendar size={16} />
-                  <span>Joined on {moment(user.created_at).format('MMMM D, YYYY')}</span>
+                  <span>
+                    Joined on {moment(user.created_at).format("MMMM D, YYYY")}
+                  </span>
                 </p>
               </div>
             </div>
-            
+
             <div className="profile-bio">
-              <p>{user.bio || 'No bio available'}</p>
+              <p>{user.bio || "No bio available"}</p>
             </div>
 
             <div className="profile-stats">
@@ -91,10 +126,16 @@ const Home = () => {
                 )}
                 {user.blog && (
                   <p className="profile-website">
-                    <span>Website:</span> 
-                    <a href={user.blog.startsWith('http') ? user.blog : `https://${user.blog}`} 
-                       target="_blank" 
-                       rel="noopener noreferrer">
+                    <span>Website:</span>
+                    <a
+                      href={
+                        user.blog.startsWith("http")
+                          ? user.blog
+                          : `https://${user.blog}`
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       {user.blog} <ExternalLink size={14} />
                     </a>
                   </p>
@@ -103,10 +144,10 @@ const Home = () => {
             )}
 
             <div className="profile-actions">
-              <a 
-                href={user.html_url} 
+              <a
+                href={user.html_url}
                 className="btn btn-secondary"
-                target="_blank" 
+                target="_blank"
                 rel="noopener noreferrer"
               >
                 Visit GitHub
@@ -122,4 +163,4 @@ const Home = () => {
   );
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index def4d8a..2e6a8fa 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -1,20 +1,47 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 // TODO: Import axios here
 
+import axios from "axios";
 
-import ProjectCard from '../components/ProjectCard';
-import '../styles/Projects.css';
+import ProjectCard from "../components/ProjectCard";
+import "../styles/Projects.css";
 
 const Projects = () => {
   const [repos, setRepos] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
- // 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
+  // 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(() => {
+    // Create an async function that calls the API\
 
+    const fetchRepositories = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get(
+            "https://api.github.com/users/zacimka/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);
+      }
+    };
+
+    // Execute the function
+    fetchRepositories();
+  }, []);
 
   if (loading) {
     return <div className="loading">Loading repositories...</div>;
@@ -28,9 +55,7 @@ const Projects = () => {
     <div className="projects-container">
       <div className="projects-header">
         <h1 className="projects-title">GitHub Projects</h1>
-        <p className="projects-subtitle">
-          My latest GitHub repositories.
-        </p>
+        <p className="projects-subtitle">My latest GitHub repositories.</p>
       </div>
 
       <div className="projects-grid">
@@ -59,4 +84,4 @@ const Projects = () => {
   );
 };
 
-export default Projects;
\ No newline at end of file
+export default Projects;