diff --git a/README.md b/README.md
index 18447a5..2e33158 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 # git-test
 This read me was created for the sole purpose of me learning how to create a readme with cmd.
-The page I modelled is https://dribbble.com/shots/9457767-Trip-Insurance-Concept/attachments/1483214?mode=media
\ No newline at end of file
+The page I modelled is https://dribbble.com/shots/9457767-Trip-Insurance-Concept/attachments/1483214?mode=media
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/9acec3ae-6c62-43e3-822d-13085cc6a437/deploy-status)](https://app.netlify.com/sites/insurance-landingpage/deploys)
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 92fa5e3..05018bb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,9 +6,6 @@
 .begin{
     padding-top: 50px;
 }
-.left{
-    align-content: left;
-}
 
 .trip{
     color: white;
@@ -16,9 +13,12 @@
 .guard{
     color: #74e6ef;
 }
-.links{
-    position: absolute;
-    left: 10em;
+.dropdown{
+    display: none;
+}
+.menu{
+    display: inline-flex;
+    justify-content: space-between;
 }
 .links a{
     padding-left: 30px;
@@ -125,6 +125,7 @@ margin-right: 100px;
     margin: 0;
     color: #232d67;
     font-size: smaller;
+    font-weight: 500;
 }
 .click h5{
     color: #232d67;
@@ -137,10 +138,20 @@ margin-right: 100px;
     margin-bottom: 20px;
     border-radius: 8px;
 }
-
+.click:hover{
+    background-color: #232d67;
+}
+.click:hover > .click-message h5, .click:hover > .click-message p{
+    color: white;
+}
 .click-icon{
     margin-right: 10px;
 }
+.why-pic{
+    background-image: url(../right.svg);
+    width: 600px;
+    background-repeat: no-repeat;
+}
 .talks{
 width: 500px;
 margin-top: 50px;
@@ -186,21 +197,24 @@ margin-top: 50px;
     justify-content: center;
     margin-top: 40px;
 }
+.right{
+    background-image: url(../3072835-removebg-preview.png);
+    background-repeat: no-repeat;
+    background-size: 300px 520px;
+    background-position-x: center;
+    height: 550px;
+    width: 550px;
+}
 .first{
     box-shadow: grey -1px 1px 5px;
     background-color: rgb(245, 245, 245, 0.7);
     padding: 10px;
-    position: absolute;
-    right: 300px;
-    top: 1720px;
+   margin-top: 60px;
     border-radius: 10px;
     height: 100px;
     width: 330px;
 }
 
-.phone{
-    margin-left: 150px;
-}
 .out{
     display: flex;
     justify-content: space-between;
@@ -213,21 +227,17 @@ margin-top: 50px;
 }
 .second{
     background-color: white;
-    border-radius: 40px;
-    box-shadow: grey 1px 1px 3px;
-    position: absolute;
-    right: 226px;
-    top: 1840px;
-    width: 225px;
-    height: 320px;
-    
+    border-top-right-radius: 40px;
+    border-top-left-radius: 40px;
+    box-shadow: grey 1px -1px 3px;
+    margin-left:158px;
+    width: 250px;
+    height: 170px;  
 }
-
 .re{
     display: flex;
     justify-content: space-between;
     background-color: rgb(128, 128, 128, 0.1);
-    
     margin-top: 10px;
     padding: 5px 0 5px 0;
 }
@@ -240,10 +250,8 @@ margin-top: 50px;
     padding: 10px;
     border-radius: 10px;
     height: 100px;
-    position: absolute;
-    right: 50px;
-    top: 2030px;
     width: 330px;
+    margin: 20px 0 0 200px;
 }
 .policy{
     display: flex;
@@ -265,8 +273,12 @@ box-shadow: grey 1px -1px 5px;
     box-shadow: grey 1px 1px 5px;
     margin-top: 0;
 }
+.how img{
+    height: 250px; 
+    width: 400px;
+}
 .how .card-body{
-    max-width: 400px;
+    width: 400px;
 }
 .top .card-body{
     max-width: 250px;
@@ -323,6 +335,7 @@ box-shadow: grey 1px -1px 5px;
     border: 0;
     background-color: rgb(53, 52, 167);
 }
+
 .frt{
     display: flex;
     justify-content: space-between;
@@ -336,3 +349,63 @@ justify-content: space-between;
 .attribute{
     margin-left: 200px;
 }
+
+@media screen and (max-width: 800px){
+    .head{overflow: hidden;}
+    .menu{display: none;}
+    .dropdown{display: block;}
+    .icon, .icon:hover{color: white;}
+    .dropdown-menu a{ color: #232d67;}
+    .dropdown-menu a:hover{background-color: rgb(128, 128, 128, 0.5);}
+    .dropdown-menu{left: -80px;}
+    .stuff{display: grid;}
+    .stuff1{width: auto;}
+    .why{display: grid;}
+    .clicks{margin-bottom: 50px;}
+   .compare{display: grid;}
+   .left{margin-bottom: 100px;}
+   .policy{display: grid; justify-items: center;}
+  .card-body{margin-bottom: 50px;}
+  .news{margin-top: 50px;}
+  .foot-work{display: grid;}
+  .foot-pic{width: auto; }
+  .frt-icon input{width: 140px}
+  .social{margin: 60px 80px 20px 160px;}
+  .attribute{margin-left: 100px;}
+}
+@media screen and (max-device-width: 400px){
+    .head{overflow: hidden;}
+    .menu{display: none;}
+    .dropdown{display: block;}
+    .icon, .icon:hover{color: white;}
+    .dropdown-menu a{ color: #232d67;}
+    .dropdown-menu a:hover{background-color: rgb(128, 128, 128, 0.5);}
+    .dropdown-menu{left: -150px;}
+    .stuff{display: grid;}
+    .stuff2 .row{margin-left: 15px; margin-right: 15px;}
+    h1{padding: 15px 0 15px 0;}
+    form{padding: 50px 50px 40px 50px;}
+    .why{display: grid;}
+    .clicks{margin-left: 0; margin-bottom: 70px; width: 55%;}
+    .talks{width: 57%; }
+   .compare{display: grid;}
+   .left{margin-bottom: 100px; width: 90%;}
+   .left h2{text-align: center;}
+   .right{width: auto; background-size: 250px 520px;}
+   .first, .third{width: 270px;}
+   .second{width: 210px;}
+   .second, .third{margin-left: 70px;}
+   .policy{display: grid; justify-items: center;}
+   .how img, .how .card-body{width: 320px;}
+  .card-body{margin-bottom: 50px;}
+  .news{margin-top: 50px;}
+  .foot-work{display: grid;}
+  .foot-left{margin-left: 30px;}
+  .foot-right{margin-left: 110px; margin-right: 80px;}
+  .foot-right h3{text-align: center;}
+  .foot-pic{width: auto; }
+  .frt{display: grid; justify-content: center;}
+  .frt-icon, .foot-right .quotebtn{justify-self: center; margin-bottom: 20px;}
+  .social{margin: 0 50px 20px 130px;}
+  .attribute{margin-left: 100px; text-align: center;}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3a02a27..c07ff01 100644
--- a/index.html
+++ b/index.html
@@ -7,33 +7,50 @@
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/fontawesome.css">
     <link rel="stylesheet" href="css/style.css">
-    <title>:-(</title>
+    <title>Trip Advisor</title>
 </head>
 
 <body>
     <div class="head">
         <div class="begin container">
-            <nav class="navbar">
+            <nav class="navbar navbar-expand-lg">
                 <div class="navbar-brand">
                     <a href="#" class="navbar-item">
                         <h4 class="trip">Trip<span class="guard">Guard</span></h4>
                     </a>
                 </div>
 
-                <div class="links">
-                    <a href="#" class="navbar-item">Buy Travel Insurance</a>
-                    <a href="#" class="navbar-item">Safety</a>
-                    <a href="#" class="navbar-item">Travel Tips</a>
-                    <a href="#" class="navbar-item">Claims</a>
-                    <a href="#" class="navbar-item">Help Center</a>
-                </div>
-                <div class="right">
-                    <button type="submit" class="signbtn text-center">
-                        <span style="color: #3534a7;">Sign Up </span> <i class="fa fa-arrow-right"
-                            style="color: #3534a7; margin-left: 5px;"></i>
-                    </button>
+                <div class="menu">
+                    <div class="links">
+                        <a href="#" class="navbar-item">Buy Travel Insurance</a>
+                        <a href="#" class="navbar-item">Safety</a>
+                        <a href="#" class="navbar-item">Travel Tips</a>
+                        <a href="#" class="navbar-item">Claims</a>
+                        <a href="#" class="navbar-item">Help Center</a>
+                    </div>
+                    <div class="nav-right">
+                        <button type="submit" class="signbtn text-center" style="position: absolute; right: 0;">
+                            <span style="color: #3534a7;">Sign Up </span> <i class="fa fa-arrow-right"
+                                style="color: #3534a7; margin-left: 5px;"></i>
+                        </button>
+                    </div>
                 </div>
 
+                <li class="nav-item dropdown">
+                    <a href="#" class="icon dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></a>
+                    <div class="dropdown-menu">
+                        <a href="#" class="dropdown-item">Buy Travel Insurance</a>
+                        <a href="#" class="dropdown-item">Safety</a>
+                        <a href="#" class="dropdown-item">Travel Tips</a>
+                        <a href="#" class="dropdown-item">Claims</a>
+                        <a href="#" class="dropdown-item">Help Center</a>
+                        <button type="submit" class="signbtn dropdown-item text-center" style="margin: auto;">
+                            <span style="color: #3534a7;">Sign Up </span> <i class="fa fa-arrow-right"
+                                style="color: #3534a7; margin-left: 5px;"></i>
+                        </button>
+                    </div>
+                </li>
+
             </nav>
 
             <div class="stuff">
@@ -180,20 +197,18 @@ <h5>100% Secure Checkout</h5>
                         </div>
                     </div>
                 </div>
-
-                <div class="talks">
-                    <h3>Travelguide helps compare plans from world's leading travel insurance providers.</h3>
-                    <p>Whether you are planning on going solo or with a a group of friends or family,
-                        travelinsurance.com can help you find an appropriate domestic or international travel insurance
-                        policy that meets your needs. You can compare all of your trip insurance options, procure
-                        coverage online, and travel worryfree.</p>
-                    <button type="submit" class="talks-button"><span>Explore</span></button>
+                <div class="why-pic">
+                    <div class="talks">
+                        <h3>Travelguide helps compare plans from world's leading travel insurance providers.</h3>
+                        <p>Whether you are planning on going solo or with a a group of friends or family,
+                            travelinsurance.com can help you find an appropriate domestic or international travel
+                            insurance
+                            policy that meets your needs. You can compare all of your trip insurance options, procure
+                            coverage online, and travel worryfree.</p>
+                        <button type="submit" class="talks-button"><span>Explore</span></button>
+                    </div>
                 </div>
 
-
-                <div class="pic">
-                    <img src="right.svg">
-                </div>
             </div>
 
             <div class="compare">
@@ -213,10 +228,6 @@ <h2>Compare and Buy Travel Insurance with Online</h2>
                     </div>
                 </div>
 
-                <div class="phone">
-                    <img src="3072835-removebg-preview.png" height="530px">
-                </div>
-
                 <div class="right">
                     <div class="first">
                         <div class="out">
@@ -282,7 +293,7 @@ <h6 style="color: #232d67; font-weight: 700;">Reminder</h6>
             <h2 style="margin-top: 100px;">Great Stories Our Policy</h2>
             <div class="policy">
                 <div class="how card">
-                    <img src="78869.jpg" class="card-img-top" style="height: 250px; width: 400px;">
+                    <img src="78869.jpg" class="card-img-top">
                     <div class="card-body">
                         <p style="font-size: smaller; color: grey;">Travel Tips</p>
                         <h6 style="color: #232d67; font-weight: 700; margin-bottom: 12px;">How to Save Money During
@@ -304,7 +315,8 @@ <h6 style="color: #232d67; font-weight: 700; margin-bottom: 12px;">Top Destinati
                             States remains a top destination for viewing fall foliage.
                             Full of tree-lined streets, roads and parks, the country provides perfect backdrop for
                             beautiful photography. People from all over the globe travel to North America in an attempt
-                            to view. </p>
+                            to view.
+                        </p>
                     </div>
                 </div>
                 <div class="news">
@@ -412,25 +424,27 @@ <h3 class="text text-white">Request a quote today</h3>
 
                         </div>
 
-                        <button type="submit" class="quotebtn" style="width: 150px;"><span class="text-white">Get Full quote</span></button>
+                        <button type="submit" class="quotebtn" style="width: 150px;"><span class="text-white">Get Full
+                                quote</span>
+                        </button>
+
 
-                        
                     </div>
 
                     <div class="social">
                         <i class="fab fa-facebook-f" style="color: white;"></i>
                         <i class="fab fa-linkedin-in" style="color: white;"></i>
                         <i class="fab fa-instagram" style="color: white;"></i>
-    
+
                     </div>
                     <div class="attribute">
                         <a href="http://www.freepik.com">
                             <b class="text-white"> Phone designed by Freepik</b>
                         </a>
                     </div>
-                    
+
                 </div>
-               
+
 
             </div>
 
@@ -439,12 +453,12 @@ <h3 class="text text-white">Request a quote today</h3>
 
         </div>
 
-
-
-        <script src="js/fontawesome.js"></script>
-        <script src="js/jquery-3.3.1.slim.min.js"></script>
-        <script src="js/popper.min.js"></script>
-        <script src="js/bootstrap.min.js"></script>
+    </div>
+    <script src="js/nav.js"></script>
+    <script src="js/fontawesome.js"></script>
+    <script src="js/jquery-3.3.1.slim.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/right.svg b/right.svg
index 49ab10f..10e1995 100644
--- a/right.svg
+++ b/right.svg
@@ -1,12 +1,10 @@
-<svg width="766" height="529" viewBox="0 0 966 629" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="723" height="434" viewBox="0 20 723 474" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<path d="M162.192 416.517C134.267 301.062 273.028 144.048 462.629 98.19C652.23 52.3321 785.391 133.457 813.315 248.911C841.24 364.366 753.354 470.432 563.753 516.29C374.152 562.148 190.116 531.972 162.192 416.517Z" fill="#74E7EF" fill-opacity="0.137255"/>
+<path d="M622.976 196.688C630.526 315.231 503.857 443.534 351.361 453.246C198.865 462.957 105.59 358.519 98.0411 239.975C90.4917 121.431 171.526 33.6718 324.022 23.9602C476.519 14.2485 615.427 78.144 622.976 196.688Z" fill="#74E7EF" fill-opacity="0.137255"/>
 </g>
 <defs>
 <clipPath id="clip0">
-<rect width="889.118" height="430.155" fill="white" transform="translate(966 419) rotate(166.403)"/>
+<rect width="696.486" height="430.155" fill="white" transform="translate(0.493896 44.5639) rotate(-3.64392)"/>
 </clipPath>
 </defs>
 </svg>
-
-