diff --git a/personal-portfolio/src/App.js b/personal-portfolio/src/App.js
index fd5489b5d..55338f7b8 100644
--- a/personal-portfolio/src/App.js
+++ b/personal-portfolio/src/App.js
@@ -1,3 +1,4 @@
+import { BrowserRouter as Router } from "react-router-dom"; // Import Router
 import logo from './logo.svg';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -10,14 +11,16 @@ import { Footer } from "./components/Footer";
 
 function App() {
   return (
-    <div className="App">
-      <NavBar />
-      <Banner />
-      <Skills />
-      <Projects />
-      <Contact />
-      <Footer />
-    </div>
+    <Router> {/* Wrap with Router */}
+      <div className="App">
+        <NavBar />
+        <Banner />
+        <Skills />
+        <Projects />
+        <Contact />
+        <Footer />
+      </div>
+    </Router>
   );
 }
 
diff --git a/personal-portfolio/src/components/NavBar.js b/personal-portfolio/src/components/NavBar.js
index cce00e7d5..a24a913f7 100644
--- a/personal-portfolio/src/components/NavBar.js
+++ b/personal-portfolio/src/components/NavBar.js
@@ -5,62 +5,69 @@ import navIcon1 from '../assets/img/nav-icon1.svg';
 import navIcon2 from '../assets/img/nav-icon2.svg';
 import navIcon3 from '../assets/img/nav-icon3.svg';
 import { HashLink } from 'react-router-hash-link';
-import {
-  BrowserRouter as Router
-} from "react-router-dom";
 
 export const NavBar = () => {
-
   const [activeLink, setActiveLink] = useState('home');
   const [scrolled, setScrolled] = useState(false);
 
   useEffect(() => {
     const onScroll = () => {
-      if (window.scrollY > 50) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    }
+      setScrolled(window.scrollY > 50);
+    };
 
     window.addEventListener("scroll", onScroll);
-
     return () => window.removeEventListener("scroll", onScroll);
-  }, [])
+  }, []);
 
   const onUpdateActiveLink = (value) => {
     setActiveLink(value);
-  }
+  };
 
   return (
-    <Router>
-      <Navbar expand="md" className={scrolled ? "scrolled" : ""}>
-        <Container>
-          <Navbar.Brand href="/">
-            <img src={logo} alt="Logo" />
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="basic-navbar-nav">
-            <span className="navbar-toggler-icon"></span>
-          </Navbar.Toggle>
-          <Navbar.Collapse id="basic-navbar-nav">
-            <Nav className="ms-auto">
-              <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
-              <Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
-              <Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
-            </Nav>
-            <span className="navbar-text">
-              <div className="social-icon">
-                <a href="#"><img src={navIcon1} alt="" /></a>
-                <a href="#"><img src={navIcon2} alt="" /></a>
-                <a href="#"><img src={navIcon3} alt="" /></a>
-              </div>
-              <HashLink to='#connect'>
-                <button className="vvd"><span>Let’s Connect</span></button>
-              </HashLink>
-            </span>
-          </Navbar.Collapse>
-        </Container>
-      </Navbar>
-    </Router>
-  )
-}
+    <Navbar expand="md" className={scrolled ? "scrolled" : ""}>
+      <Container>
+        <Navbar.Brand href="/">
+          <img src={logo} alt="Logo" />
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav">
+          <span className="navbar-toggler-icon"></span>
+        </Navbar.Toggle>
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="ms-auto">
+            <Nav.Link 
+              href="#home" 
+              className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} 
+              onClick={() => onUpdateActiveLink('home')}
+            >
+              Home
+            </Nav.Link>
+            <Nav.Link 
+              href="#skills" 
+              className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} 
+              onClick={() => onUpdateActiveLink('skills')}
+            >
+              Skills
+            </Nav.Link>
+            <Nav.Link 
+              href="#projects" 
+              className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} 
+              onClick={() => onUpdateActiveLink('projects')}
+            >
+              Projects
+            </Nav.Link>
+          </Nav>
+          <span className="navbar-text">
+            <div className="social-icon">
+              <a href="#"><img src={navIcon1} alt="" /></a>
+              <a href="#"><img src={navIcon2} alt="" /></a>
+              <a href="#"><img src={navIcon3} alt="" /></a>
+            </div>
+            <HashLink to='#connect'>
+              <button className="vvd"><span>Let’s Connect</span></button>
+            </HashLink>
+          </span>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};