diff --git a/projects/landing-page/css/styles.css b/projects/landing-page/css/styles.css
index 16145e98c..4ed87236b 100755
--- a/projects/landing-page/css/styles.css
+++ b/projects/landing-page/css/styles.css
@@ -7,8 +7,26 @@
  * To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
  *
 */
-
-
+.navbar_menu {
+  color: green;
+}
+#navbar_list {
+  display: flex;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+.navbar_menu li {
+  display: inline-flex;
+  align-items: center;
+  cursor: context-menu;
+  padding:0 5%;
+}
+li:hover {
+    background: #000;
+    color: #fff;
+    transition: ease 0.3s all;
+}
 /* ---- Base Rules ---- */
 body {
     background: rgb(136,203,171);
@@ -74,7 +92,7 @@ section {
     display: inline-block;
 }
 
-.navbar__menu .menu__link {
+.navbar_menu .menu__link {
     display: block;
     padding: 1em;
     font-weight: bold;
@@ -89,7 +107,7 @@ section {
 }
 
 /* Header Styles */
-.page__header {
+.page_header {
     background: #fff;
     position: fixed;
     top: 0;
@@ -220,4 +238,4 @@ section.your-active-class .landing__container::after {
 		           translate(-1em) 
 		           rotate(-360deg);
 	}
-}
\ No newline at end of file
+}
diff --git a/projects/landing-page/index.html b/projects/landing-page/index.html
index baadb068a..2b422c7a5 100755
--- a/projects/landing-page/index.html
+++ b/projects/landing-page/index.html
@@ -8,17 +8,20 @@
   <!-- Load Google Fonts -->
   <link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">  <!-- Load Styles -->
   <link href="css/styles.css" rel="stylesheet">
+  <script src="js/app.js"> </script>
 </head>
-<body>
+
   <!-- HTML Follows BEM naming conventions 
   IDs are only used for sections to connect menu achors to sections -->
-  <header class="page__header">
-    <nav class="navbar__menu">
+    <header class="page_header">
+    <nav class="navbar_menu">
       <!-- Navigation starts as empty UL that will be populated with JS -->
-      <ul id="navbar__list"></ul>
+      <ul id="navbar_list">
+      </ul>
     </nav>
   </header>
-  <main>
+  
+    <main>
     <header class="main__hero">
       <h1>Landing Page </h1>
     </header>
@@ -50,10 +53,14 @@ <h2>Section 3</h2>
         <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
       </div>
     </section>
+      <img class="top-Scroll hidden"src="https://flyclipart.com/thumb2/get-up-arrow-png-pictures-99092.png" height="50" alt="Back to top">
   </main>
-  <footer class="page__footer">
+  
+    <footer class="page__footer">
     <p>&copy Udacity</p>
   </footer>
-
-</body>
+    <script src="js/app.js" charset="utf-8"></script>
+  </body>
 </html>
+
+<!--- Image https://flyclipart.com/get-up-arrow-png-pictures-up-arrow-png-99092 --->
diff --git a/projects/landing-page/js/app.js b/projects/landing-page/js/app.js
index f52ee8672..6109b1007 100755
--- a/projects/landing-page/js/app.js
+++ b/projects/landing-page/js/app.js
@@ -1,3 +1,4 @@
+
 /**
  * 
  * Manipulating the DOM exercise.
@@ -22,7 +23,12 @@
  * Define Global Variables
  * 
 */
-
+const sections = document.querySelectorAll('section');
+const main = document.querySelector('main');
+const navBar = document.getElementById("navbar_list");
+const header = document.querySelector(".page_header");
+const topScroll = document.querySelector(".top-Scroll");
+const fragment = document.createDocumentFragment();
 
 /**
  * End Global Variables
@@ -39,12 +45,48 @@
 */
 
 // build the nav
+for (let i=0; i < sections.length; i++) {
+  const liElement = document.createElement('li');
+
+  liElement.innerText = sections[i].dataset.nav;
+  liElement.href= sections[i].id;
+  liElement.dataset.id = sections[i].id;
 
+  fragment.appendChild(liElement);
+}
+navBar.appendChild(fragment);
 
 // Add class 'active' to section when near top of viewport
+function changeActive(actions) {
+  for(const active of actions) {
+    let navEl = document.querySelector('[data-id="'+ active.target.id+'"]');
+
+    if(active.isIntersecting == true) {
+      active.target.classList.add('your-active-class');
+      navEl.classList.add('your-active-class');
+    } else {
+      active.target.classList.remove('your-active-class');
+      navEl.classList.remove('your-active-class');
+    }
+  }
+}
+
 
+const observer = new IntersectionObserver(changeActive,{threshold:0.5});
+
+for(const section of sections) {
+  observer.observe(section);
+}
 
 // Scroll to anchor ID using scrollTO event
+navBar.addEventListener('click',function(evnt) {
+
+  evnt.preventDefault();
+  console.log(evnt.target.href);
+  let selected = document.getElementById(evnt.target.href);
+  selected.scrollIntoView({behavior:"smooth"});
+  // });
+});
 
 
 /**
@@ -53,10 +95,17 @@
  * 
 */
 
+// Scroll to top
+topScroll.addEventListener('click', function(){
+  window.scrollTo({
+    top:0,
+    left:0,
+    behavior:'smooth'
+  });
+});
+
 // Build menu 
 
 // Scroll to section on link click
 
 // Set sections as active
-
-
