diff --git a/src/App.css b/src/App.css
index 9d0c406..7fa8a56 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 .App {
-  /* height: 500px; */
+ height: 100%;
   background-color: #0054B5;
   text-align: center;
   display: flex;
diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
index 315b89e..f7ed913 100644
--- a/src/components/Navbar/Navbar.css
+++ b/src/components/Navbar/Navbar.css
@@ -2,29 +2,79 @@
     background-color: #0054B5;
     overflow: hidden;
     text-align: right;
+    position: fixed;
+    /* top: 0; */
+    width: 100%;
+    z-index: 2
 }
+
+.title {
+    font-size: 20px;
+}
+
+.btn {
+    display: none;
+    z-index: 10;
+}
+
 @media (max-width: 700px) {
     .topnav {
         text-align: center;
+        display: flex;
+        /* flex-direction: column; */
+        position: fixed;
+        width: 97%;
+        margin: 0 3%;
+        top: -400px;
+        transition: all 0.8s;
+        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) ease-in-out;
+        z-index: 2;
+    }
+
+    .show {
+        display: flex;
+        top: -30px;
+    }
+
+    .title {
+        font-size: 2.5vw;
     }
+
+    .main {
+        /* background-color: #000; */
+    }
+
+    .btn {
+        display: block;
+        z-index: 10;
+        position: fixed;
+        top: 0;
+        height:93px;
+        background-color: #0054B5;
+        border:none;
+        cursor: pointer;
+    }
+
+
+   
 }
 
 .topnav a {
-    display: inline-block;
+    /* display: inline-block; */
     color: #f2f2f2;
-    text-align: center;
+    /* text-align: center; */
     padding: 20px 15px;
     text-decoration: none;
     font-size: 20px;
 }
 
 .topnav a:hover {
-    background-color: #72B1E4;
-    color: #f2f2f2;
-    border-radius: 25px;
+    /* background-color: #72B1E4; */
+    /* color: #000; */
+    border-radius: 10px;
     border: #72B1E4;
     block-size: auto;
-    display: inline;
+    /* display: inline; */
 }
 
 .topnav a.active {
@@ -32,10 +82,11 @@
     color: white;
 }
 
-.logo{
+.logo {
     margin-top: 10px;
-    width: 70px;
-    vertical-align:middle;
-    height: 50px;
+    width: 60px;
+    vertical-align: middle;
+    height:30px;
     display: inline-block;
-}
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 41de4bc..fdbf36f 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React ,{useState}from 'react';
 import './Navbar.css';
 import slack from './slack.svg';
 import youtube from './youtube.svg';
@@ -6,25 +6,45 @@ import twitter  from './twitter.svg';
 import github from './github.svg';
 
 const Navbar = () => {
+    const [show,setShow]=useState(false);
+    let showClass
+    let mainShow
+    if(show){
+         showClass="topnav show"
+         mainShow="main"
+    }else{
+         showClass="topnav"
+         mainShow=""
+    }
   return (
-      <div className="topnav">
+      <div style={{textAlign:"left"}} className={mainShow}>
+      <button  className="btn"
+      onClick={()=>setShow(!show)}
+      >
+        <div style={{display:"flex",flexDirection:"column",fontSize:"20px",rowGap:"2px",fontWeight:"bolder",lineHeight:"12px",width:"40px",padding:"4px",zIndex:"10",color:"white"}}>
+        <span >---</span>
+        <span>---</span>
+        <span>---</span></div>
+       </button>   
+     <div className={showClass} >
+    
           <a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1n4y7xnk0-DnLVTaN6U9xLU79H5Hi62w"  target="_blank" rel="noopener noreferrer">
               <img src={slack} className="logo" alt="slack logo" />
               <span>Slack</span>
           </a>
           <a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">
               <img  src={youtube} className="logo" alt="youtube logo" />
-              <span>Youtube</span>    
+              <span className='title'>Youtube</span>    
           </a>
           <a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">
               <img   src={twitter} className="logo" alt="twitter logo" />
-              <span>Twitter</span>
+              <span className='title'>Twitter</span>
           </a>
           <a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">
               <img  src={github} className="logo" alt="github logo" />
-              <span>GitHub</span>
+              <span className='title'>GitHub</span>
           </a>
-      </div>
+      </div></div>
   );
 };
 
diff --git a/src/index.css b/src/index.css
index b4cc725..2098660 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,4 +2,5 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  height: 100%;
 }