diff --git a/index.html b/index.html
index 23de9dd..6f382f3 100644
--- a/index.html
+++ b/index.html
@@ -32,15 +32,15 @@
         <span class="toggler-icon"><i class="fas fa-bars"></i></span>
       </button>
       <div class="collapse navbar-collapse" id="myNav">
-        <ul class="navbar-nav mx-auto text-capitalize">
-          <li class="nav-item active">
+        <ul class="navbar-nav mx-auto text-capitalize me-5 pe-5 d-flex justify-between">
+          <li class="nav-item active px-3">
             <a class="nav-link" href="#">home</a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link " href="#">about</a>
+          <li class="nav-item px-3">
+            <a class="nav-link " href="#about">about</a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">store</a>
+          <li class="nav-item px-3">
+            <a class="nav-link" href="#store">store</a>
           </li>
         </ul>
         <div class="nav-info-items d-none d-lg-flex ">
diff --git a/js/app.js b/js/app.js
index 2218e4c..59dabc5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -95,4 +95,15 @@
         })
     })
 
-})();
\ No newline at end of file
+})();
+
+
+//added smooth scrolling when clicking any anchor link
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
\ No newline at end of file