diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx
index a47506ee..2b22e057 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Components/Navigation.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -6,81 +8,62 @@ import logo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlueLogo
 import blackLogo from '../../../ignitus-Assets/ignitus-Logos/logo-Svg/ignitusBlackLogo.svg';
 import '../Styles/style.scss';
 
+const handleSmallerScreen = () => {
+  const navlinks = document.querySelector('.navlinks');
+  const lines = document.querySelectorAll('.line');
+  lines.forEach((line) => {
+    line.classList.toggle('mobile');
+  });
+  navlinks.classList.toggle('mobile');
+};
 
 const PureNavigation = ({ displayClass, dynamicLogo }) => (
-  <nav className={`navbar navbar-expand-lg ${displayClass}`}>
+  <nav className={`navbar  ${displayClass}`}>
     <HashLink className="navbar-brand" to="/#">
       <img src={dynamicLogo} width="40" height="40" alt="logo" />
     </HashLink>
-    <button
-      className="navbar-toggler collapsed"
-      type="button"
-      data-toggle="collapse"
-      data-target="#navbarNav"
-      aria-controls="navbarNav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span />
-      <span />
-      <span />
-    </button>
-    <div className="collapse navbar-collapse" id="navbarNav">
-      <ul className="nav navbar-nav">
-        <li className="nav-item active">
-          <HashLink smooth to="/#">
-            <span className="nav-link">
-                  Home
-              {' '}
-              <span className="sr-only">(current)</span>
-            </span>
-          </HashLink>
-        </li>
-        <li className="nav-item">
-          <HashLink smooth to="/#what-we-do">
-            <span className="nav-link">What we provide?</span>
-          </HashLink>
-        </li>
-        <li className="nav-item">
-          <HashLink smooth to="/#contributors">
-            <span className="nav-link">Contributors</span>
-          </HashLink>
-        </li>
-        <li className="nav-item">
-          <Link to="/aboutus">
-            <span className="nav-link" href="/aboutus">
-                  About
-            </span>
-          </Link>
-        </li>
 
-        <li className="nav-item">
-          <a
-            className="nav-link"
-            rel="noopener noreferrer"
-            target="_blank"
-            href="https://bit.ly/2SaYXMO"
-          >
-                Join
-          </a>
-        </li>
+    <ul className="navlinks">
+      <li className="navlinks-item active">
+        <HashLink smooth to="/#" className="navlink">Home</HashLink>
+      </li>
+
+      <li className="navlinks-item">
+        <HashLink smooth to="/#what-we-do" className="navlink">What we provide?</HashLink>
+      </li>
+
+      <li className="navlinks-item">
+        <HashLink smooth to="/#contributors" className="navlink">Contributors</HashLink>
+      </li>
+
+      <li className="navlinks-item">
+        <Link to="/aboutus" className="navlink">About</Link>
+      </li>
+
+      <li className="navlinks-item">
+        <a
+          className="navlink"
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://bit.ly/2SaYXMO"
+        >
+          Join
+        </a>
+      </li>
+
+      <li className="navlinks-item">
+        <Link to="/Login" className="navlink">Sign in</Link>
+      </li>
 
-        <li className="nav-item">
-          <Link to="/Login">
-            <span className="nav-link" href="/Login">
-                  Sign in
-            </span>
-          </Link>
-        </li>
+      <li className="navlinks-item">
+        <Link to="/Signup" className="navlink">Sign up</Link>
+      </li>
+    </ul>
 
-        <li className="nav-item">
-          <Link to="/Signup">
-            <span className="nav-link" href="/Signup">
-                  Sign up
-            </span>
-          </Link>
-        </li>
-      </ul>
+    <div id="burger" onClick={handleSmallerScreen}>
+      <span className="line mobile" />
+      <span className="line mobile" />
+      <span className="line mobile" />
     </div>
   </nav>
 );
diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Styles/style.scss b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Styles/style.scss
index 9e9d52a2..692ec03f 100644
--- a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Styles/style.scss
+++ b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Navigation/Styles/style.scss
@@ -1,197 +1,111 @@
-// import ignitus token variables
-@import './src/ignitus-Shared/styles/ignitus-tokens';
-
-nav {
-  // background-color: $ignite-color-gray-12;
- 
-  button {
-   
-    position: relative;
-    
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.darkblue-background{
-  background: #000066 !important;
-}
-
-.transparent-background {
-  background-color: transparent;
-  transition: background-color 300ms ease-in;
-}
-
 .navbar {
+  align-items: center;
+  display:flex;
   position: fixed !important;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 9001;
+  justify-content: space-between;
+  transition: background-color 300ms ease-in;
 }
 
-.nav li a {
-  color: $ignite-color-blue-20;
-  font-weight: $ignite-font-weight-bold;
-  font-size: $ignite-font-size-xs;
+.navlinks{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right:1rem;
+}
 
-  &:hover {
-    color: $ignite-color-yellow;
-  }
+.navlinks-item{
+  padding:0rem 1rem;
+  align-self: stretch;
 }
 
-@media (min-width: 992px) {
-  nav {
-    .navbar-collapse {
-      width: 100%;
-      flex-grow: 0;
-      justify-content: flex-end;
-
-      position: fixed;
-      right: 0;
-      padding-right: 2%;
-
-      .nav-item {
-        margin-right: 3%;
-        padding: 0;
-
-        .nav-link {
-          padding: 0.25rem 1rem;
-        }
-      }
-
-      .navbar-nav {
-        width: 100%;
-        display: flex;
-      }
-    }
-
-    @media(max-width: 1232px) {
-      .nav li a {
-        font-size: 12px;
-      }
-    }
+.navlink{
+  color: #fff;
+  font-weight: 700;
+  font-size: 14px;
+  &:hover {
+    color: #F9BF64;
   }
+}
 
-  .nav li a {
-    color: $ignite-background-color-white;
-    transition: color 200ms ease-in;
-  }
+#burger{
+  width:1.5rem;
+  height:1.5rem;
+  position: absolute;
+  top:1.2rem;
+  right:2rem;
+  display:none;
+  cursor:pointer;
+}
 
-  #signup {
-    border: none !important;
-  }
+.line{
+  display:block;
+  background-color:#000e8c;
+  padding:0.1rem 0.8rem;
+  width:0.1rem;
+  margin:0.3rem;
+  border-radius:1rem;
+  transition:transform 100ms ease-in-out;
+}
 
-  #signin{
-    border: none !important;
+.navbar.whitenav{
+  background-color:#fff;
+  .navlink{
+    color:#000e8c;
   }
+}
 
-  .dropdown {
-    border: 1px solid $ignite-background-color-white;
-    padding: 10px inherit;
-    border-radius: 12px;
-  }
+.line.mobile:first-child{
+  transform: rotateZ(46deg) translateY(0.3rem) translateX(1px);
+}
 
-  .nav {
-      justify-content: space-around;
-      flex-wrap: nowrap !important;
-      width: 65% !important;
-  }
+.line.mobile:last-child{
+  transform: rotateZ(-43deg) translateY(-0.3rem) 
+}
 
-  .content-container .whitenav {
-    background-color: white;
+.line.mobile:nth-child(2){
+  display:none;
+}
 
-   -webkit-box-shadow: 0 8px 6px -6px $ignite-color-neutral-22;
-   -moz-box-shadow: 0 8px 6px -6px $ignite-color-neutral-22;
-    box-shadow: 0 8px 6px -6px $ignite-color-neutral-22;
+@media only screen and (max-width:1042px){
 
-    transition: background-color 700ms;
+  #burger{
+    display:block;
+    top:1.2rem;
+  }
 
-    li a {
-      color: $ignite-color-blue-20;
-      transition: color 700ms;
+  .navbar{
+    flex-direction: column;
+    background:#fff;
+  }
 
-      &:hover {
-        color: $ignite-color-yellow;
-      }
-    }
+  .navlinks.mobile{
+    display:none;
+  } 
 
-    #signin:hover, #signup:hover {
-      a {
-        color: $ignite-color-yellow;
-      }
-    }
+  .navlinks{
+    flex-direction: column;
+    align-items:center;
+    justify-content: center;
+    width:100%;
   }
-}
 
-@media (max-width: 992px) { 
-  nav {
-    background-color: white;
-    box-shadow: 0 8px 6px -6px #343a40;
-  }  
-}
+  .navlinks-item{
+    margin-left:0rem;
+    margin-bottom:1rem;
+  }
 
- .navbar-toggler {
-	&:focus, &:active {
-		outline: 0;
-		position: relative;
+  .navbar-brand{
+    align-self: flex-start;
+    margin-left:5px;
   }
-  
-	span {
-		display: block;
-    height: 3px;
-		width: 25px;
-		margin-top: 4px;
-		margin-bottom: 4px;
-		-webkit-transform: rotate(0deg);
-		-moz-transform: rotate(0deg);
-		-o-transform: rotate(0deg);
-		transform: rotate(0deg);
-		left: 0;
-		opacity: 1;
-		position: relative;
-		z-index: 5;
-    background-color: $ignite-color-blue-20;
-    
-		&:nth-child(1), &:nth-child(3) {
-			-webkit-transition: transform .35s ease-in-out;
-			-moz-transition: transform .35s ease-in-out;
-			-o-transition: transform .35s ease-in-out;
-			transition: transform .35s ease-in-out;
-    }
-    
+
+  .navlink{
+    color:#000e8c;
   }
-  
-	&:not(.collapsed) {
-		span {
-			&:nth-child(1) {
-				position: absolute;
-				left: 12px;
-				top: 10px;
-				-webkit-transform: rotate(135deg);
-				-moz-transform: rotate(135deg);
-				-o-transform: rotate(135deg);
-				transform: rotate(135deg);
-				opacity: 0.9;
-      }
-      
-			&:nth-child(2) {
-				height: 12px;
-				visibility: hidden;
-				background-color: transparent;
-      }
-      
-			&:nth-child(3) {
-				position: absolute;
-				left: 12px;
-				top: 10px;
-				-webkit-transform: rotate(-135deg);
-				-moz-transform: rotate(-135deg);
-				-o-transform: rotate(-135deg);
-				transform: rotate(-135deg);
-				opacity: 0.9;
-			}
-		}
-	}
+
 }
+ 
\ No newline at end of file