diff --git a/src/App.js b/src/App.js
index 3784575..7fcaa55 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
+import NavBar from './components/Navbar';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className ="App">
+          <NavBar />
     </div>
   );
 }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 0c9a075..c745341 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,27 +1,52 @@
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
-import { useState } from "react";
+import { useState, useEffect} from "react";
+import logo from '../assets/img/logo.svg';
+import navIcon1 from '../assets/img/nav-icon1.svg';
+import navIcon3 from '../assets/img/nav-icon2.svg';
+import navIcon2 from '../assets/img/nav-icon3.svg';
+
 
 const NavBar = () => {
+  const [activeLink, setActiveLink] = useState('home');
+  const [scrolled, setScrolled] = useState(false);
+//check for scrolling
+  useEffect(() => {
+    const onScroll = () => {
+      if (window.scrollY > 50) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    }
+
+    window.addEventListener("scroll", onScroll);
+  // remove event listener when components unmounts
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [])
+
+  const onUpdateLink = (value) => {
+    setActiveLink(value)
+  }
   return (
-    <Navbar expand="lg">
+    <Navbar expand="lg" className= {scrolled ? "scrolled": ""}>
       <Container>
         <Navbar.Brand href="#home">
-            <img src={''} alt="logo" /> 
+            <img src={logo} alt="logo" /> 
         </Navbar.Brand>
         <Navbar.Toggle/>
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="me-auto">
-            <Nav.Link href="#home">Home</Nav.Link>
-            <Nav.Link href="#skills">skills</Nav.Link>
-            <Nav.Link href="#projects">Projects</Nav.Link>
+            <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('home')}>Home</Nav.Link>
+            <Nav.Link href="#skills" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('skills')}>skills</Nav.Link>
+            <Nav.Link href="#projects" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('projects')}>Projects</Nav.Link>
           </Nav>
           <span className="navbar-text">
                 <div className="social-icon"> 
-                    <a href="#"><img src={} alt="" /></a>
-                    <a href="#"><img src={} alt="" /></a>
-                    <a href="#"><img src={} alt="" /></a>
+                    <a href="#"><img src={navIcon1} alt="nav-icon1" /></a>
+                    <a href="#"><img src={navIcon2} alt="nav-icon2" /></a>
+                    <a href="#"><img src={navIcon3} alt="nav-icon3" /></a>
                 </div>
                 <button className="vvd" onClick={() => console.log('connect')}>
                     <span>Let's connect!</span>