diff --git a/src/App.css b/src/App.css
index e4b79a3..f72297b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,6 +9,43 @@ body {
   overflow-x: hidden !important;
 }
 
+/* Starts */
+
+
+#header{background:#1E262D;width:100%;position:relative}
+#header:after{content:"";clear:both;display:block}
+
+
+
+.row  a:hover{text-decoration: none;color: white;}
+.mr-auto{float:right;}
+.mr-auto>ul{float:left;position:relative}
+.mr-auto li{list-style:none;float:left;padding-top: 20px;}
+.mr-auto .dropdown{position:relative}
+.mr-auto li a{float:left;padding:25px;color:white;}
+.mr-auto li a:hover{background:#2C3E50; text-decoration: none; color: white; }
+.mr-auto li .linkname{float:left;padding:25px;color:white;} */
+.mr-auto li .linkname:hover{background:#2C3E50; text-decoration: none; color: white; }
+.linkname{float:left;padding:25px;color:white;}
+.mr-auto li ul{display:none}
+.mr-auto li:hover ul{display:inline}
+.mr-auto li li{float:none}
+.mr-auto .dropdown ul{position:absolute;left:0;top:100%;background:#fff;padding:20px 0;border-bottom:3px solid #34495e}
+.mr-auto .dropdown li{white-space:nowrap}
+.mr-auto .dropdown li a{padding:10px 40px;font-size:13px;min-width:200px}
+.mr-auto .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:10px 30px;border-bottom:3px solid #34495e}
+.mr-auto .mega-dropdown1{width:100%;position:absolute ;top:100%;left:0;background:#fff;overflow:hidden;padding:10px 30px;border-bottom:3px solid #34495e}
+.mr-auto li li a{float:none;color:#333;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
+.mr-auto li li a:hover{background:#bdc3c7;background:blue}
+.mr-auto li li .link{float:none;color:#333;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
+.mr-auto li li .link:hover{background:#bdc3c7;background:yellow; color: white;}
+.mega-col{width:33%;float:left}
+.mega-col1{width:20%;float:left}
+.mega-col2{width:100%;float: right;}
+
+
+
+/* Ends */
 h1 {
   font-family: Playfair Display;
 }
diff --git a/src/components/NavbarComponent.jsx b/src/components/NavbarComponent.jsx
index c6389d5..7d28654 100644
--- a/src/components/NavbarComponent.jsx
+++ b/src/components/NavbarComponent.jsx
@@ -14,7 +14,9 @@ const NavbarComponent = () => {
   const { currentUser } = useContext(AuthContext);
   return (
     <>
-      <Navbar center  expand="lg" data-aos="zoom-out" data-aos-duration="1000">
+      <div id="header">
+      <div class="row">
+      <Navbar center bg="dark" expand="lg">
         <Navbar.Brand href="#home">
           <img className="logo mt-n4" src={NavigationLogo} alt="logo" />
           <span className="missioned-nav font-weight-bold">
@@ -24,12 +26,110 @@ const NavbarComponent = () => {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="mr-auto">
-            <Nav.Link href="/">Home</Nav.Link>
-            <NavDropdown title="Classes" id="basic-nav-dropdown">
-              <NavDropdown.Item href="#action/3.1">Class 8</NavDropdown.Item>
-              <NavDropdown.Item href="#action/3.2">Class 9</NavDropdown.Item>
-              <NavDropdown.Item href="#action/3.3">Class 10</NavDropdown.Item>
-              <NavDropdown.Item href="#action/3.4">
+
+            <ul>
+              {/* <li>
+            <Nav.Link href="/" className="linkname">Home</Nav.Link>
+              </li> */}
+              <li>
+        <a href="/">Home</a>
+        
+      </li>
+              
+      <li>
+        <a href="">Classes</a>
+        <ul class="mega-dropdown">
+          <li class="row">
+            <ul class="mega-col">
+              <li><Nav.Link href="#action/3.1" className="link">Class 8</Nav.Link></li>
+              <li><Nav.Link href="#action/3.2" className="link">Class 9</Nav.Link></li>
+            </ul>
+            <ul class="mega-col">
+              <li><Nav.Link href="#action/3.3" className="link">Class 10</Nav.Link></li>
+              <li><Nav.Link href="#action/3.4" className="link">Class 11 Science</Nav.Link></li>
+              <li><Nav.Link href="#action/3.5" className="link">Class 12 Science</Nav.Link></li>
+            </ul>
+            <ul class="mega-col">
+              <li><Nav.Link href="#action/3.6" className="link">Class 11 Commerce</Nav.Link></li>
+              <li><Nav.Link href="#action/3.7" className="link">Class 12 Commerce</Nav.Link></li>
+            </ul>
+            
+          </li>
+        </ul>        
+      </li>
+      <li>
+        <a href="">STUDY MATERIALS</a>
+        <ul class="mega-dropdown">
+          <li class="row">
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">NEET</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NTSE</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">CBSE</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">ICSE</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">JEE MAINS</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">JEE ADVANCED</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NCERT SOL</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">IMO</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">KVPY</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NSEJS</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NSO</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">InPHO</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">InCHO</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">RMO</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NSO</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">NSTSE</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">BITSAT</Nav.Link></li>
+              <li><Nav.Link href="#action/3.1" className="link">SRMJEE</Nav.Link></li>
+            </ul>
+            
+          </li>
+        </ul>        
+      </li>
+      <li>
+        <a href="">MORE</a>
+        <ul class="mega-dropdown">
+          <li class="row">
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">About Us</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">Features</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">Testimonials</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">Counselling</Nav.Link></li>
+            </ul>
+            <ul class="mega-col1">
+              <li><Nav.Link href="#action/3.1" className="link">FAQ's</Nav.Link></li>
+            </ul>
+            
+          </li>
+        </ul>        
+      </li>
+      <li>
+      <a href="/pricing"> PRICING</a>
+      </li>
+      <li>
+      <a href="/https://missioned.in/blog/">BLOG</a>
+      </li>
+              
+    </ul> 
+            
+            {/* <NavDropdown title="Classes" id="basic-nav-dropdown">
+              <NavDropdown.Item href="#action/3.1" className="link">Class 8</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.2" className="link">Class 9</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.3" className="link">Class 10</NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.4" className="link">
                 Class 11 Science
               </NavDropdown.Item>
               <NavDropdown.Item href="#action/3.5">
@@ -71,7 +171,7 @@ const NavbarComponent = () => {
               <NavDropdown.Item href="/faq">FAQ's</NavDropdown.Item>
             </NavDropdown>
             <Nav.Link href="/pricing">Pricing</Nav.Link>
-            <Nav.Link href="https://missioned.in/blog/">Blog</Nav.Link>
+            <Nav.Link href="https://missioned.in/blog/">Blog</Nav.Link> */}
           </Nav>
           {currentUser !== null ? (
             <Link to="/dashboard">
@@ -98,6 +198,8 @@ const NavbarComponent = () => {
           )}
         </Navbar.Collapse>
       </Navbar>
+      </div>
+      </div>
     </>
   );
 };