diff --git a/components/Hero.jsx b/components/Hero.jsx
index e9bc353..3a9ba8a 100644
--- a/components/Hero.jsx
+++ b/components/Hero.jsx
@@ -11,6 +11,9 @@ const HeroContainer = styled.div`
     @media (max-width: 1050px) {
         gap: 5px;
     }
+    @media (max-width: 768px) {
+        margin-top:70px;
+    }
     font-family: 'Roboto', sans-serif;
     `
 
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 6a062c1..719062f 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
 const NavbarContainer = styled.div`
@@ -15,11 +15,28 @@ const NavbarContainer = styled.div`
     padding-right: 100px;
     }
     font-family: 'Roboto', sans-serif;
+    @media (max-width: 768px) {
+        width:100%;
+        position:absolute;
+        top:0;
+        background-color: #7baaf7;
+        overflow:hidden;
+        flex-direction: column;
+        align-items: flex-end;
+        height:${({ showNav }) => 
+        showNav ? 75 : 350
+        }px;
     `
 
 const NavLinks = styled.a`
     padding: 15px;
     font-family: 'Roboto', sans-serif;
+    @media (max-width: 768px) {
+        display:${({ showNav }) => 
+        showNav ? `none` : `block`
+        };
+
+    }
     `
 
 const SignIn = styled.a`
@@ -27,17 +44,51 @@ const SignIn = styled.a`
     background-color: white;
     border-radius: 10px;
     font-family: 'Roboto', sans-serif;
-    `
+    @media (max-width: 768px) {
+        display:${({ showNav }) => 
+        showNav ? `none` : `block`
+        };
+
+    }
+   
+ `
+
+ const Hmburger = styled.div`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  padding: 15px;
+  span {
+    height: 2px;
+    width: 25px;
+    background: #000;
+    margin-bottom: 4px;
+    border-radius: 5px;
+  }
+  @media (min-width: 768px) {
+    display:none;
+  }`
 
 export const Navbar = () => {
+    const [showNav, setShowNav] = useState(true);
     return (
         <>
-            <NavbarContainer>
-                <NavLinks href="/">Home</NavLinks>
-                <NavLinks href="/">Events</NavLinks>
-                <NavLinks href="/">About Us</NavLinks>
-                <NavLinks href="/">FAQs</NavLinks>
-                <SignIn href="/">Sign In</SignIn>
+            <NavbarContainer showNav={showNav}>
+            <Hmburger
+          onClick={() => {
+            setShowNav(!showNav);
+            console.log(showNav);
+          }}
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </Hmburger> 
+                <NavLinks showNav={showNav} href="/">Home</NavLinks>
+                <NavLinks showNav={showNav}  href="/">Events</NavLinks>
+                <NavLinks showNav={showNav}  href="/">About Us</NavLinks>
+                <NavLinks showNav={showNav}  href="/">FAQs</NavLinks>
+                <SignIn showNav={showNav} href="/">Sign In</SignIn>
             </NavbarContainer>
         </>
     )