diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2e7f100..28fab8d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -15,7 +15,7 @@ Welcome to the list of people who contributed to this repo 💥
 6. [Manjeet Sharma](https://github.com/manjeet-sharma)
 
 ## General Contributors below:
-1.
+1. [Rifqi Anshari](https://github.com/riansha)
 2.
 3.
 4.
diff --git a/css/style.css b/css/style.css
index 51f8a74..58b2921 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,12 +3,157 @@
     padding: 0;
     font-family: sans-serif;
 }
+
+*, *::after, *::before{
+    box-sizing: border-box;
+}
+
+html{
+    scroll-behavior: smooth; 
+}
+
+/* navbar */
+.navbar-edu{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    background-color: #f4b2c4;
+    font-size: 14px;
+}
+    .navbar-edu .container{
+        max-width: 1400px;
+        margin: 0 1.5em;
+        padding: 1.5em 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    @media only screen and (min-width: 768px){
+        .navbar-edu .container{
+            margin: 0 2em;
+        }
+    }
+        .navbar-edu .container .title-web{
+            color: #ffffff;
+        }
+        .navbar-edu .container .navbar-item{
+            width: 100%;
+            overflow: hidden;
+            background: #f4b2c4;
+        }
+            @media only screen and (min-width: 768px){
+                .navbar-edu .container .navbar-item{
+                    width: auto;
+                }
+            }
+        
+            .navbar-edu .container .mobile-btn{
+                width: 2em;
+                height: 2em;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+            }
+            @media only screen and (min-width: 768px){
+                .navbar-edu .container .mobile-btn{
+                    display: none;
+                }
+            }
+            .mobile-btn.active{
+                transform: rotate(45deg);
+            }
+            .mobile-btn.active span::before{
+                top: 0;
+                transform: rotate(90deg);
+            }
+            .mobile-btn.active span::after{
+                display: none;
+            }
+                .mobile-btn span, 
+                .mobile-btn span::after, 
+                .mobile-btn span::before{
+                    position: relative;
+                    display: block;
+                    width: 100%;
+                    height: 3px;
+                    background: #ffffff;
+                    border-radius: 4px;
+                }
+                .mobile-btn span::after,
+                .mobile-btn span::before{
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                }
+                .mobile-btn span::after{
+                    top: 8px;
+                    
+                }
+                .mobile-btn span::before{
+                    top: -8px;
+                }
+
+            .mobile-btn + .navbar-item{
+                max-height: 0;
+                transition: .3s;
+            }
+            @media only screen and (min-width: 768px){
+                .mobile-btn + .navbar-item{
+                    max-height: unset;
+                }
+            }
+            .mobile-btn.active + .navbar-item{
+                max-height: 150px;
+                transition: .3s;
+                transform-origin: bottom;
+            }
+            .menu-item{
+             padding: 1.5em 0 0;
+            }
+            @media only screen and (min-width: 768px){
+                .menu-item{
+                    display: flex;
+                    padding: 0;
+                }
+            }
+            .menu-item li{
+                list-style: none;
+                text-align: center;
+                margin-top: 2em;
+                color: #ffffff;
+                font-size: 1.25em;
+            }
+            @media only screen and (min-width: 768px){
+                .menu-item li{
+                    margin: 0 0 0 2em;
+                }
+            }
+            .menu-item li:first-child{
+                margin: 0;
+            }
+            .menu-item li a{
+                cursor: pointer;
+                text-decoration: none;
+                color: inherit;
+            }
+            
 /* Header */
 #header{
+    padding-top: 70px;
     height: 100vh;
     background-position: center;
     background-size: cover;
 }
+@media only screen and (min-width: 768px){
+    #header{
+        padding-top: 90px;
+    }
+}
 .container{
     margin-right: 100px;
     margin-left: 100px;
diff --git a/index.html b/index.html
index fafb288..5238439 100644
--- a/index.html
+++ b/index.html
@@ -1,135 +1,183 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Educode</title>
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" href="img/logo.png">
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="shortcut icon" href="img/logo.png" />
     <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
-</head>
-<body>
+  </head>
+  <body>
     <!-- TODO: Add a responsive navbar -->
-    <section id="header" style="background-image: url('img/background.png');">
-        <div class="container">
-            <h1>Edu Code</h1>
-            <div class="header-text">
-                <h1>The purpose is to <br> teach, bring learning to people</h1>
-                <span class="square"></span>
-                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</p>
-                <a href="#about"><button class="common-btn">Read More</button></a>
-                <div class="line">
-                    <span class="line-1"></span> <br>
-                    <span class="line-2"></span> <br>
-                    <span class="line-3"></span>
-                </div>
-            </div>
+    <nav class="navbar-edu">
+      <div class="container">
+        <h1 class="title-web">Edu Code</h1>
+        <div id="mobileBtn" class="mobile-btn">
+          <span />
+        </div>
+        <div class="navbar-item">
+          <ul class="menu-item">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="pricing.html" target="_blank">Pricing</a></li>
+            <li><a href="#about"> About </a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <section id="header" style="background-image: url('img/background.png')">
+      <div class="container">
+        <div class="header-text">
+          <h1>
+            The purpose is to <br />
+            teach, bring learning to people
+          </h1>
+          <span class="square"></span>
+          <p>
+            There are many variations of passages of Lorem Ipsum available, but
+            the majority have suffered alteration in some form, by injected
+            humour, or randomised words which don't look even slightly
+            believable
+          </p>
+          <a href="#about"><button class="common-btn">Read More</button></a>
+          <div class="line">
+            <span class="line-1"></span> <br />
+            <span class="line-2"></span> <br />
+            <span class="line-3"></span>
+          </div>
         </div>
+      </div>
     </section>
-    
-    
+
     <!-- About Us -->
     <section id="about">
-        <div class="about-left-col">
-            <img src="img/about.png" alt="abt-img">
-        </div>
-        <div class="about-right-col">
-            <div class="about-text">
-                <h1>About Us</h1>
-                <span class="square"></span>
-                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it oer 2000 years old. Richard McClintock, a Latin professor at Hampden-Syndey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cities of the word in classical literature, discovered the undoubtable source.</p><br><br>
-                <div class="line">
-                    <span class="line-1"></span> <br>
-                    <span class="line-2"></span> <br>
-                    <span class="line-3"></span>
-                </div>
-                <h2>"Learning is not attached by chance, it must be sought for with ardor and attended to with diligence"</h2>
-                <h3> -Anonymous - </h3>
-            </div>
+      <div class="about-left-col">
+        <img src="img/about.png" alt="abt-img" />
+      </div>
+      <div class="about-right-col">
+        <div class="about-text">
+          <h1>About Us</h1>
+          <span class="square"></span>
+          <p>
+            Contrary to popular belief, Lorem Ipsum is not simply random text.
+            It has roots in a piece of classical Latin literature from 45 BC,
+            making it oer 2000 years old. Richard McClintock, a Latin professor
+            at Hampden-Syndey College in Virginia, looked up one of the more
+            obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+            going through the cities of the word in classical literature,
+            discovered the undoubtable source.
+          </p>
+          <br /><br />
+          <div class="line">
+            <span class="line-1"></span> <br />
+            <span class="line-2"></span> <br />
+            <span class="line-3"></span>
+          </div>
+          <h2>
+            "Learning is not attached by chance, it must be sought for with
+            ardor and attended to with diligence"
+          </h2>
+          <h3>-Anonymous -</h3>
         </div>
+      </div>
     </section>
 
     <!-- Features -->
     <section id="features">
-        <div class="feature-row">
-            <div class="feature-col">
-                <img src="img/pic-1.png" alt="">
-                <h4>Learn Anywhere</h4>
-                <p>Switch between your computer, tablet or mobile</p>
-            </div>
-            <div class="feature-col">
-                <img src="img/pic-2.png" alt="">
-                <h4>Expert Teachers</h4>
-                <p>Learn from industry experts who are passionate about teaching.</p>
-            </div>
-            <div class="feature-col">
-                <img src="img/pic-3.png" alt="">
-                <h4>Unlimited Resources</h4>
-                <p>Choose what you'd like to learn from our extensive subscription library</p>
-            </div>
+      <div class="feature-row">
+        <div class="feature-col">
+          <img src="img/pic-1.png" alt="" />
+          <h4>Learn Anywhere</h4>
+          <p>Switch between your computer, tablet or mobile</p>
         </div>
-        <div class="feature-btn">
-            <div class="line">
-                <span class="line-1"></span><br>
-                <span class="line-2"></span><br>
-                <span class="line-3"></span>
-            </div>
-            <a href="#courses"><button class="common-btn">Start Free Trial</button></a>
+        <div class="feature-col">
+          <img src="img/pic-2.png" alt="" />
+          <h4>Expert Teachers</h4>
+          <p>Learn from industry experts who are passionate about teaching.</p>
+        </div>
+        <div class="feature-col">
+          <img src="img/pic-3.png" alt="" />
+          <h4>Unlimited Resources</h4>
+          <p>
+            Choose what you'd like to learn from our extensive subscription
+            library
+          </p>
         </div>
+      </div>
+      <div class="feature-btn">
+        <div class="line">
+          <span class="line-1"></span><br />
+          <span class="line-2"></span><br />
+          <span class="line-3"></span>
+        </div>
+        <a href="#courses"
+          ><button class="common-btn">Start Free Trial</button></a
+        >
+      </div>
     </section>
 
     <!-- Courses -->
     <section id="courses">
-        <div class="container course-row">
-            <div class="course-left-col">
-                <div class="course-text">
-                    <h1>Browse our top <br>courses</h1>
-                    <span class="square"></span>
-                    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
-                    from 45 BC, making it oer 2000 years old. Richard McClintock, a Latin professor at Hampden</p>
-                    <a href="pricing.html" target="_blank"><button class="common-btn">View Pricing</button></a>
-                    <div class="line">
-                        <span class="line-1"></span><br>
-                        <span class="line-2"></span><br>
-                        <span class="line-3"></span>
-                    </div>
-                </div>
-            </div>
-            <div class="course-right-col">
-                <img src="img/course.png" alt="">
+      <div class="container course-row">
+        <div class="course-left-col">
+          <div class="course-text">
+            <h1>Browse our top <br />courses</h1>
+            <span class="square"></span>
+            <p>
+              Contrary to popular belief, Lorem Ipsum is not simply random text.
+              It has roots in a piece of classical Latin literature from 45 BC,
+              making it oer 2000 years old. Richard McClintock, a Latin
+              professor at Hampden
+            </p>
+            <a href="pricing.html" target="_blank"
+              ><button class="common-btn">View Pricing</button></a
+            >
+            <div class="line">
+              <span class="line-1"></span><br />
+              <span class="line-2"></span><br />
+              <span class="line-3"></span>
             </div>
+          </div>
+        </div>
+        <div class="course-right-col">
+          <img src="img/course.png" alt="" />
         </div>
+      </div>
     </section>
 
     <!-- Offers -->
     <section id="offer">
-        <div class="about-left-col">
-            <img src="img/offer.png" alt="offers-img">
-        </div>
-        <div class="about-right-col">
-            <div class="about-text">
-                <h1>Limitless learning, <br>limitless possibilities</h1>
-                <span class="square"></span>
-                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it oer 2000 years old. Richard McClintock, a Latin professor at Hampden-Syndey College in Virginia.</p>
-                <a href="#contact"><button class="common-btn">Start Free Trial</button></a>
-                <div class="line">
-                    <span class="line-1"></span><br>
-                    <span class="line-2"></span><br>
-                    <span class="line-3"></span>
-                </div>
-            </div>
+      <div class="about-left-col">
+        <img src="img/offer.png" alt="offers-img" />
+      </div>
+      <div class="about-right-col">
+        <div class="about-text">
+          <h1>Limitless learning, <br />limitless possibilities</h1>
+          <span class="square"></span>
+          <p>
+            Contrary to popular belief, Lorem Ipsum is not simply random text.
+            It has roots in a piece of classical Latin literature from 45 BC,
+            making it oer 2000 years old. Richard McClintock, a Latin professor
+            at Hampden-Syndey College in Virginia.
+          </p>
+          <a href="#contact"
+            ><button class="common-btn">Start Free Trial</button></a
+          >
+          <div class="line">
+            <span class="line-1"></span><br />
+            <span class="line-2"></span><br />
+            <span class="line-3"></span>
+          </div>
         </div>
+      </div>
     </section>
-    
 
     <!-- TODO : Make a Footer -->
-   
 
     <!-- TODO : Add Social Icons -->
-    
 
     <script src="js/smooth-scroll.min.js"></script>
     <script src="js/smooth-scroll.polyfills.min.js"></script>
     <script src="js/app.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/js/app.js b/js/app.js
index cef72f1..8881605 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,6 +12,11 @@
 
 let menuBtn = document.getElementById("menuBtn");
 let sideNav = document.getElementById("sideNav");
+let mobileBtn = document.getElementById("mobileBtn")
+
+mobileBtn.addEventListener("click", function () {
+  mobileBtn.classList.toggle("active");
+});
 
 sideNav.style.right = "-250px";
 menuBtn.onclick = () => {
diff --git a/pricing.html b/pricing.html
index befa463..b51f472 100644
--- a/pricing.html
+++ b/pricing.html
@@ -1,30 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" href="img/logo.png">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="shortcut icon" href="img/logo.png" />
     <title>Pricing</title>
-</head>
-<body>
-    <section id="header">
-        <div class="container">
-            <!--<img src="img/logo.png" alt="logo" class="logo">-->
-            <h1>Edu Code</h1>
-            <br>
-            <h2>Pricing</h2>
+  </head>
+  <body>
+    <nav class="navbar-edu">
+      <div class="container">
+        <h1 class="title-web">Edu Code</h1>
+        <div id="mobileBtn" class="mobile-btn">
+          <span />
+        </div>
+        <div class="navbar-item">
+          <ul class="menu-item">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="pricing.html" target="_blank">Pricing</a></li>
+            <li><a href="#about"> About </a></li>
+          </ul>
         </div>
-        
+      </div>
+    </nav>
+    <section id="header">
+      <div class="container">
+        <!--<img src="img/logo.png" alt="logo" class="logo">-->
+        <h1>Edu Code</h1>
+        <br />
+        <h2>Pricing</h2>
+      </div>
     </section>
 
     <!-- TODO : Gotta build the this page -->
-    
 
     <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
     <script src="js/smooth-scroll.min.js"></script>
     <script src="js/smooth-scroll.polyfills.min.js"></script>
     <script src="js/app.js"></script>
-</body>
+  </body>
 </html>