diff --git a/index.html b/index.html
index fb38de5..c46ab68 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
 <html lang="en">
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
-    <title>Hello Jobs!</title>
+    <!--<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
+    --><title>Hello Jobs!</title>
 	<link rel="stylesheet" href="styles.css">
 	<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -25,13 +26,15 @@
 
         <div class="header-limiter">
     
-            <h1><a href="#">Hello <span>Jobs</span></a></h1>
+            <h1 style="font-size: 50px;"><a href="#">Hello <span>Jobs</span></a></h1>
     
-            <nav>
-                <a href="#">Home</a>
-                <a href="#" class="selected">Blog</a>
-                <a href="#">About</a>
-                <a href="#">Contact</a>
+            <nav id="header_content">
+                <a href="#" id="home" style="color:black"> Home </a>
+                <a href="#" id="blog" style="color:black"> Blog </a>
+                <a href="#" id="about" style="color:black"> About </a>
+                <a href="#" id="contact" style="color:black"> Contact </a>
+                <a href="#explore_jobs" id="explore_icon" style="color:black"> Explore </a>
+                <button id="login"> Login </button>
             </nav>
     
         </div>
@@ -45,9 +48,9 @@ <h1><a href="#">Hello <span>Jobs</span></a></h1>
             <div class="later-img"><img src="./resources/limg.png" alt="job" class="limg"></div>
             <div class="left-back"><img src="./resources/Ellipse 1.png" class="left-back-img"></div>
             <div class="banner-tag"><h3 class="banner-tag-h">Get Your<br>Dream Job</h3></div>
-            <div class="banner-msg"><p class="banner-msg-p">Explore some really exciting jobs for yourself</p></div>
+            <div class="banner-msg" ><p class="banner-msg-p">Explore some really exciting jobs for yourself</p></div>
             <div class="search-box">
-                <form action="Post">
+                <form action="Post" id="explore_jobs">
                     <input type="text" id="search-box" placeholder="Enter Job Type">
                     <input type="button" id="search" value="Search">
                 </form>
diff --git a/styles.css b/styles.css
index 3cb4993..6763a73 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,5 @@
 .header-fixed {
-  background-color: #292c2f;
+  background-color:rgba(185, 173, 252, 0.5);
   box-shadow: 0 1px 1px #ccc;
   padding: 20px 40px;
   height: 80px;
@@ -11,6 +11,61 @@
   transition: top 0.3s;
 }
 
+  
+a+a {
+  margin-left: 10px;
+}
+#explore_icon + button{
+  margin-left: 10px;
+}
+#login{
+  font-size:18px;
+  background-color: #5383d3;
+  color:azure;
+  border-radius: 15px;
+  padding:0.3vw 0.5vw 0.3vw 0.5vw;
+}
+/*---hover effects----*/ 
+#login:hover{
+  background-color:blueviolet;
+  transition: 0.4s ease-in-out;
+ cursor: pointer;
+}
+
+.header-fixed .header-limiter #header_content:hover{
+  color: black;
+  text-decoration: none;
+  transition: 0.2s ease-in-out;
+  
+  border-radius: 10px;
+  padding: 0.5vw 0.5vw 0.5vw 0.5vw;
+}
+#home:hover{
+  text-decoration:underline plum 4px;
+  font-weight: bolder;
+  transition: 0.4s ease-in-out;
+}
+#blog:hover{
+  text-decoration:underline plum 4px;
+  font-weight: bolder;
+  transition: 0.4s ease-in-out;
+}
+#about:hover{
+  text-decoration:underline plum 4px;
+  font-weight: bolder;
+  transition: 0.4s ease-in-out;
+}
+#contact:hover{
+  text-decoration:underline plum 4px;
+  font-weight: bolder;
+  transition: 0.4s ease-in-out;
+}
+#explore_icon:hover{
+  text-decoration:underline plum 4px;
+  font-weight: bolder;
+  transition: 0.4s ease-in-out;
+}
+/*---hover effects end---*/
 .header-fixed .header-limiter {
   max-width: 1200px;
   text-align: center;
@@ -87,11 +142,25 @@ body.fixed .header-fixed .header-limiter nav {
   line-height: 28px;
   font-size: 13px;
 }
+@media screen and(max-device-width:800px){
+  .header-fixed{
+    width:116%;
+  }
+  .header-fixed .header-limiter nav a {
+    display: inline-block;
+    padding: 0 5px;
+    text-decoration: none;
+    color: #ffffff;
+    opacity: 0.9;
+    font-size: 20px;
+  }
+}
+
 
 @media all and (max-width: 700px) {
   .header-fixed {
     padding: 20px 0;
-    height: 75px;
+  height: 7rem;
   }
 
   .header-fixed .header-limiter h1 {
