diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..04ebd33
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.wordWrap": "on"
+}
\ No newline at end of file
diff --git a/CSS/components.css b/CSS/components.css
index 2fb5a3f..1f6410f 100644
--- a/CSS/components.css
+++ b/CSS/components.css
@@ -11,13 +11,67 @@ html{
 }
 body{
     font-size: 1.6rem;
+    position: relative;
+}
+.msg, .display{
+    position: fixed;
+    left: 1rem;
+}
+.msg{
+    top: 45%;
+    color: #333;
+}
+.helper-nav{
+    display: none;
+}
+.display{
+    width: 4.8rem;
+    height: 4.8rem;
+    display: flex;
+    align-items: center;
+    top: 0;
+    left: 50%;
+    background-image: linear-gradient( #00370a, #175c24, #00370a);
+    border-radius: 10rem;
+    box-shadow: 0 1rem 3.4rem rgba(2, 46, 3, 0.464);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 1.5s;
+    display: block;
+}
+/* .display:hover {
+    width: 10rem;
+} */
+.off, .on{
+    color: var(--color-primary--shade-2);
+    position: absolute;
+    width: 4.8rem;
+    height: 4.8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.on{
+    right: 0;
+}
+.active-state{
+    border-radius: 50%;
+    background-color: var(--color-primary--shade-2);
+    font-size: 1.55rem;
+    font-weight: bold;
+    color: #333;
+    z-index: 1;
 }
 /* brand-color #e67e22 */
 :root{
-    --color-primary: #2236e6;
-    --color-primary-tint: #0f2cd3;
-    --color-primary--shade: #ebecfd;
-    --color-primary--shade-2: #8886f7;
+    --color-primary: #2ea932;
+    --color-primary-tint: #079821;
+    --color-primary--shade: #ebfded;
+    --color-primary--shade-2: #86f78c;
+}
+.daily-bread-logo{
+    width: 10rem;
+    border-radius: 3px;
 }
 .section-hero{
     grid-template-columns: 1fr 1fr;
@@ -30,7 +84,7 @@ body{
     margin-top: 3.2rem;
 }
 header{
-    background-image: linear-gradient(#2236e641, rgba(0, 0, 0, 0.514)), url('../img/gallery/gallery-10.jpg');
+    background-image: linear-gradient(#03631aaf, rgba(20, 20, 20, 0.783)), url('../img/logos/daily-bread-logo.png');
     background-size: cover;
     min-height: 100vh;
     padding: 1.8rem 3.2rem 3.2rem 3.2rem;
@@ -67,7 +121,7 @@ header{
     line-height: 1.5;
 }
 .text--md{
-    font-size: 1.8rem;
+    font-size: 1.4rem;
     font-weight: 600;
 }
 .sm-text{
@@ -92,8 +146,8 @@ strong{
     display: flex;
 }
 .customer-photos img{
-    width: 48px;
-    height: 48px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
     margin-right: -10px;
     border: 4px solid #f0ddcc;
@@ -188,8 +242,8 @@ nav{
 
 .sticky{
     position: fixed;
-    background-color: #b8b8ffe7;
-    z-index: 1000;   
+    background-color: #b8ffbde7;
+    z-index: 1000; 
 }
 /* remove sticky nav */
 .lap-nav{
@@ -207,13 +261,12 @@ nav{
     align-items: center;
 }
 .anoying-nav{
-    background-color: #0f2cd3;
+    background-color: #21811c;
     color: #fff;
     gap: 1rem;
     padding-right: 1.8rem;
     border-radius: 50px;
     display: none;
-    /* default width: ~234px */
 }
 .rm-sticy-nav{
     font-size: 3.2rem;
@@ -340,27 +393,29 @@ nav .cont{
     color: var(--color-primary--shade);
     border: none;
 }
-.header-form{
-    width: 55rem;
+.new-form{
+    /* width: 55rem; */
     order: 1;
 }
 /* ====================================================== */
                         /* FEATURED IN */
 /* ====================================================== */
-.featured-in img{
+/* .featured-in img{
     width:30%;
     filter:contrast(0);
     justify-self: center;
 }
 .featured-in img:nth-child(odd){
     width: 20rem;
+} */
+.featured-in img {
+    height: 3.2rem;
+    filter: brightness(0);
+    opacity: 50%;
 }
-.featured-in{
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    align-items: center;
-    justify-content: space-between;
-    max-width: 1064px;
+.featured-in {
+    display: flex;
+    justify-content: space-around;
     margin-top: 2.4rem;
 }
 .ft-in--text{
@@ -438,7 +493,7 @@ nav .cont{
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-primary--shade);
+    background-color: var(--color-primary--shade-2);
     border-radius: 50%;
 
 }
@@ -506,10 +561,16 @@ nav .cont{
 .meal:hover{
     transform: translateY(-2%);
 }
-.meal-icon, .list-icon {
+.meal-icon, .list-icon, .icon-gen, .lacki-ft {
 height: 2.4rem;
 width: 2.4rem;
 color: var(--color-primary);
+background-color: var(--color-primary--shade-2);
+padding: 5px;
+border-radius: 50%;
+}
+.lacking-ft{
+    display: inline-block
 }
 .ionicon-stroke-width {
 stroke-width: var(--color-primary, 32px);
@@ -631,11 +692,11 @@ stroke-width: var(--color-primary, 32px);
 }
 .starter{
     justify-self: end;
-    background-image: linear-gradient(#ebecfd9a
+    background-image: linear-gradient(#ebfdec9a
     , #fff);
 }
 .complete{
-    background-image: linear-gradient(#8886f7bb,#ebecfd9a
+    background-image: linear-gradient(#86f797bb,#ebfded9a
     );
     position: relative;
     overflow: hidden;
@@ -698,7 +759,7 @@ stroke-width: var(--color-primary, 32px);
 .tabbed-components{
     max-width: 100rem;
     height: 30rem;
-    background-image: linear-gradient(#d3d3ff, var(--color-primary--shade));
+    background-image: linear-gradient(#addfb0, var(--color-primary--shade));
     margin: auto;
     position: relative;
     padding: 0 5rem 3.2rem 5rem;
@@ -760,8 +821,8 @@ stroke-width: var(--color-primary, 32px);
     opacity: 1 !important;
 }
 .tab-heading{
-    transform: translateY(-100%);
-    font-size: 2.4rem;
+    transform: translateY(-55%);
+    font-size: 1.8rem;
     font-weight: 600;
 }
 .tab-contents img, 
@@ -771,7 +832,7 @@ stroke-width: var(--color-primary, 32px);
 }
 .txt{
     line-height: 1.5;
-    font-size: 2.2rem;
+    font-size: 1.6rem;
 }
 .images img, 
 .tab-contents,
@@ -796,7 +857,7 @@ stroke-width: var(--color-primary, 32px);
     color: green;
 }
 .color-blue{
-    color: var(--color-primary);
+    color: rgb(21, 21, 146);
 }
 .color-orange{
     color: orange;
@@ -804,7 +865,16 @@ stroke-width: var(--color-primary, 32px);
 .color-orange-red{
     color: rgb(255, 102, 46);
 }
+.tab-con .icon-gen{
+    position: absolute;
+    transform: translateY(-100%);
+    top: -2rem;
+}
 
+/* small phone */
+.feature-sm{
+    display: none;
+}
 
 /* ====================================================== */
                     /* CALL_TO_ACTION */
@@ -865,7 +935,7 @@ footer{
     grid-template-columns: repeat(4, 1fr);
     padding: 4.8rem; 
     gap: 3.2rem; 
-    background-color: #000837;
+    background-color: #00370a;
 }
 footer > .logo{
     grid-column: 1/-1;
@@ -899,19 +969,20 @@ footer a:visited{
 .last > h2{
     margin-bottom: 2.4rem;
     font-size: 3.2rem;
-    color: #cfd5f2a6;
+    color: #cff2d4a6;
 }
 .designer{
     font-size: 1.4rem;
-    color: #c6cdf7;
 }
 .designer:not(span){
     letter-spacing: 1.5;
 }
+.copy, .designer{
+    color: #c6f7d295;
+}
 .copy{
     grid-column: 4;
     align-self: end;
-    color: #c6cdf7;
     font-size: 1.2rem;
 }
 
diff --git a/CSS/media-queries.css b/CSS/media-queries.css
index 5ab47f6..95cd9e6 100644
--- a/CSS/media-queries.css
+++ b/CSS/media-queries.css
@@ -56,7 +56,6 @@
         font-size: 2.2rem;
     }
     .nav-btn{
-        /* top: -4%; */
         display: none;
     }
     .nav-cta{
@@ -70,13 +69,68 @@
         width: 30rem;
         position: relative;
     }
+    .show-btn{  /* helper-class: show-btn*/
+        display: block;
+        order: 1;
+        color: #333;
+    }
+    .show-nav-link-3 { /* helper-class: show-nav-link-3*/
+        width: 70%;
+        height: 100%;
+        background-color: #054303a3;
+        position: fixed;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 200;
+        transition: all 2s;
+    }
+    .show-nav-link-3, .content{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .content{
+        flex-direction: column;
+        gap: 3.2rem;
+        list-style: none;
+    }
+    .rremove-nav-btn{
+        font-size: 3.2rem;
+        color: var(--color-primary--shade);
+        position: absolute;
+        top: 3%;
+        right: 6%;
+        background-color: inherit;
+        width: 3.2rem;
+        height: 3.2rem;
+        border: none;
+    }
+
+    .hidden {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(4px);
+        z-index: 100;
+        transition: all 0.5s;
+}
+    .show-nav-link-3 a:link,
+    .show-nav-link-3 a:visited{
+        font-size: 1.6rem;
+        color: var(--color-primary--shade);
+        text-decoration: none;
+    }
+
     .nav-links--2{
         position: absolute;
         top: 50%;
         left: 0;
-        /* transform: translateY(-0.5%); */
     }
-    .header-form{
+    .new-form{
         display: none;
     }
     .section-hero{
@@ -170,8 +224,7 @@
 }
 
 
-@media screen and (max-width: 700px){
-    
+@media screen and (max-width: 700px){   
     .text{
         font-weight: 100;
     }
@@ -195,74 +248,28 @@
         display: none;
     }
 
-}
-
-/* @media screen and (max-width: 600px){
 
-} */
-
-@media screen and (max-width: 540px){
-    /* nav{
-        display: none;
-    } */
-    .nav-ctas{
-        display: none;      
-    }
-
-    .show-btn{  /* helper-class: show-btn*/
+    /* features */
+    .feature-sm{
         display: block;
-        order: 1;
-    }
-    .show-nav-link-3 { /* helper-class: show-nav-link-3*/
-        width: 70%;
-        height: 100%;
-        background-color: #111c5c;
-        /* transform: scale(1.1); */
-        position: fixed;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-        z-index: 200;
-        transition: all 2s;
+        transform: translateY(-60%);
     }
-    .show-nav-link-3, .content{
+    .feat-sm{
         display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .content{
         flex-direction: column;
-        gap: 3.2rem;
-        list-style: none;
+        gap: 2.2rem;
     }
-    .rremove-nav-btn{
-        font-size: 3.2rem;
-        color: var(--color-primary--shade);
-        position: absolute;
-        top: 3%;
-        right: 6%;
-        background-color: inherit;
-        width: 3.2rem;
-        height: 3.2rem;
-        border: none;
+    .featured-in img{
+        height: 2.4rem;
     }
-
-    .hidden {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(4px);
-        z-index: 100;
-        transition: all 0.5s;
 }
-    .show-nav-link-3 a:link,
-    .show-nav-link-3 a:visited{
-        font-size: 1.6rem;
-        color: var(--color-primary--shade);
-        text-decoration: none;
+
+@media screen and (max-width: 540px){
+    html{
+        font-size: 50%;
+    }
+    .nav-ctas{
+        display: none;      
     }
 
     /* hero section */
@@ -296,4 +303,18 @@
     .meal-name{
         font-weight: 600;
     }
+}
+
+@media (max-width: 34em) {
+    .featured-in img{
+        height: 1.2rem;
+    }
+    /* footer */
+    footer{
+        padding: 2.8rem;
+    }
+    .contact-us{
+        grid-column: 2/-1;
+        grid-row: 2;
+    }
 }
\ No newline at end of file
diff --git a/CSS/new.css b/CSS/new.css
new file mode 100644
index 0000000..141f6ed
--- /dev/null
+++ b/CSS/new.css
@@ -0,0 +1,27 @@
+header{
+    display: flex;
+    /* grid-template-columns: 1fr; */
+    justify-content: center;
+    align-items: center;
+}
+.new-hero{
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    margin-top: 4.8rem;
+}
+.new-hero--customers{
+    gap: 0;
+    flex-direction: column;
+    margin-top: 3.2rem;
+}
+/* .new-customer-img{
+    width: 32px;
+    height: 32px;
+} */
+.new-cta{
+    margin-top: 5.6rem;
+}
+.new-text{
+    font-size: 1.8rem;
+}
\ No newline at end of file
diff --git a/Omnifood.md b/Omnifood.md
deleted file mode 100644
index 450e6af..0000000
--- a/Omnifood.md
+++ /dev/null
@@ -1,83 +0,0 @@
-Omnifood
-About Omnifood
-We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month.
-
-Branding
-Headline: A healthy meal delivered to your door, every single day
-
-Brand color: #e67e22
-
-Omnifood Website Content
-Summary
-The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!
-
-Omnifood features
-Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. No waste: All our partners only use reusable containers to package all your meals. Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days.
-
-How Omnifood works
-[Show big app images]
-
-Your daily dose of health in 3 simple steps
-
-Tell us what you like (and what not): Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow!
-
-Approve your weekly meal plan: Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes.
-
-Receive meals at convenient time: Best chefs in town will cook your selected meal every day, and we will deliver it to your door whenever works best for you. You can change delivery schedule and address daily!
-
-Omnifood works with any diet
-Vegetarian Vegan Pescatarian Gluten-free Lactose-free Keto Paleo Low FODMAP Kid-friendly
-
-Sample meals
-Omnifood AI chooses from 5,000+ recipes
-
-Meal 1: Japanese Gyozas
-
-Category: Vegetarian
-Calories: 650
-NutriScore (Registered): 74
-Average rating: 4.9
-Number reviews: 537
-Meal 2: Avocado Salad
-
-Category: Vegan and Paleo
-Calories: 400
-NutriScore (Registered): 92
-Average rating: 4.8
-Number reviews: 441
-We offer a free sample meal
-[Create simple form for users to sign up]
-
-Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us!
-
-We have 2 pricing plans
-Prices include all applicable taxes. Users can cancel at any time.
-
-Starter: $399 per month
-
-1 meal per day
-Order times are between 11am and 9pm
-Delivery is free
-Complete: $649 per month
-
-2 meal2 per day
-Order 24/7
-Delivery is free
-Get access to latest recipes
-Photo gallery
-[Use the 12 photos we provided]
-
-Customer testimonials
-[Photos of customers included]
-
-
-Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) The AI algorithm is crazy good, it chooses the right meals for me every time. It's amazing not to worry about food anymore! (Ben Hadley) Omnifood is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals now! (Steve Miller) I got Omnifood for the whole family, and it frees up so much time! Plus, everything is organic and vegan and without plastic. (Hannah Smith)
-
-Section with logos of featured publications [see images]
-Contact information
-Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 Phone: 415-201-6370 Email: hello@omnifood.com
-
-Social profiles: instagram, facebook, twitter [links to them not available yet]
-
-Additional links [links not available yet]
-Create account Sign in iOS app Android app About Omnifood For Business Cooking partners Careers Recipe directory Help center Privacy & terms
\ No newline at end of file
diff --git a/img/favicon.png b/img/favicon.png
deleted file mode 100644
index 8ccd18f..0000000
Binary files a/img/favicon.png and /dev/null differ
diff --git a/img/hero.png b/img/hero.png
deleted file mode 100644
index 7bd8ca8..0000000
Binary files a/img/hero.png and /dev/null differ
diff --git a/img/logos/androidfav-ico-192.png b/img/logos/androidfav-ico-192.png
new file mode 100644
index 0000000..c039963
Binary files /dev/null and b/img/logos/androidfav-ico-192.png differ
diff --git a/img/logos/androidfav-ico-512.png b/img/logos/androidfav-ico-512.png
new file mode 100644
index 0000000..35586f7
Binary files /dev/null and b/img/logos/androidfav-ico-512.png differ
diff --git a/img/logos/apple-touch-icon.png b/img/logos/apple-touch-icon.png
new file mode 100644
index 0000000..3948850
Binary files /dev/null and b/img/logos/apple-touch-icon.png differ
diff --git a/img/logos/business-insider.png b/img/logos/business-insider.png
deleted file mode 100644
index d8974ff..0000000
Binary files a/img/logos/business-insider.png and /dev/null differ
diff --git a/img/logos/daily-bread-logo.png b/img/logos/daily-bread-logo.png
new file mode 100644
index 0000000..35586f7
Binary files /dev/null and b/img/logos/daily-bread-logo.png differ
diff --git a/img/logos/dbfav-icon.png b/img/logos/dbfav-icon.png
new file mode 100644
index 0000000..f961101
Binary files /dev/null and b/img/logos/dbfav-icon.png differ
diff --git a/img/logos/forbes.png b/img/logos/forbes.png
deleted file mode 100644
index 9d7dbfa..0000000
Binary files a/img/logos/forbes.png and /dev/null differ
diff --git a/img/logos/techcrunch.png b/img/logos/techcrunch.png
deleted file mode 100644
index a9149aa..0000000
Binary files a/img/logos/techcrunch.png and /dev/null differ
diff --git a/img/logos/the-new-york-times.png b/img/logos/the-new-york-times.png
deleted file mode 100644
index d4a6503..0000000
Binary files a/img/logos/the-new-york-times.png and /dev/null differ
diff --git a/img/logos/usa-today.png b/img/logos/usa-today.png
deleted file mode 100644
index 935434a..0000000
Binary files a/img/logos/usa-today.png and /dev/null differ
diff --git a/img/omnifood-logo.png b/img/omnifood-logo.png
deleted file mode 100644
index 2232b2e..0000000
Binary files a/img/omnifood-logo.png and /dev/null differ
diff --git a/dailybread.html b/index.html
similarity index 79%
rename from dailybread.html
rename to index.html
index 52f6e49..deb4345 100644
--- a/dailybread.html
+++ b/index.html
@@ -5,12 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!
     ">
-    <title>dailybread-foods.ng</title>
+    <title>dailybread-foods &mdash; Cook less or no more</title>
+    <link rel="icon" href="./img/logos/dbfav-icon.png">
+    <link rel="apple-touch-icon" href="./img/logos/apple-touch-icon.png">
+    <link rel="manifest" href="manifest.webmanifest">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./CSS/components.css">
     <link rel="stylesheet" href="./CSS/media-queries.css">
+    <link rel="stylesheet" href="./CSS/new.css">
 </head>
 <body>
     <nav class="nav-bar">
@@ -25,36 +29,35 @@
                 <a href="#how-it-works" class="nav-link">How It Works</a>
                 <a href="#list-of-diets" class="nav-link">List Of Diets</a>
                 <a href="#testimonial" class="nav-link">Testimonial</a>
-                <a href="#pricing" class="highlighted-link nav-link">Pricing Plans</a>
+                <a href="#pricing" class="nav-link">Pricing Plans</a>
                 <a href="#faq" class="nav-link">FAQ</a>
                 <a href="#contact-us" class="nav-link">Contact Us</a>
             </div>
 
-            <h3 class="omnifood-logo"><span class="logo">db</span>foods</h3>
+            <img src="./img/logos/daily-bread-logo.png" alt="" class="daily-bread-logo">
         </div>
-        <div class="header-form round-label">
-            <div class="round-label-white">
-                <input type="email" name="email" id="email" placeholder="e.g@gmail.com">
-                <input type="submit" value="Login" class="nav-input">
-                <input type="submit" value="Signup" class="nav-input">
-            </div>
-        </div>
-
-        <div class="nav-ctas round-label">
-            <div class="cta round-label-white">
-                <button name="hero-call-toac=-action-button" class="hero-cta eat-well nav-cta">Start eating well</button>
-            </div>
-            <button class="search" name="navigation-button">≡</button>
-            <div class="navigation nav-links--2">
-                <a href="#how-it-works" class="nav-link">How It Works</a>
-                <a href="#list-of-diets" class="nav-link">List Of Diets</a>
-                <a href="#testimonial" class="nav-link">Testimonial</a>
-                <a href="#pricing" class="highlighted-link nav-link">Pricing Plans</a>
-                <a href="#faq" class="nav-link">FAQ</a>
-                <a href="#contact-us" class="nav-link">Contact Us</a>
-            </div>
-        </div>      
-
+        <form class="new-form">
+            <input type="email" name="email" id="email" value="e.g@gmail.com">
+            <input type="submit" value="Login" class="nav-input">
+            <input type="submit" value="Signup" class="nav-input">
+        </form>
+
+         <!-- meadia query >= 800 -->
+         <div class="nav--2">
+             <button class="search mdq--540 show-btn" name="show-btn" >≡</button>
+             <div class="nav-links--3">
+                 <button class="rremove-nav-btn" name="remove-btn">&times;</button>
+                 <ul class="content">
+                     <li><a class='link--540' href="#how-it-works">How It Works</a></li>
+                     <li><a class='link--540' href="#list-of-diets">List Of Diets</a></li>
+                     <li><a class='link--540' href="#testimonial">Testimonial</a></li>
+                     <li><a class='link--540' href="#pricing" class="highlighted-link nav-link">Pricing Plans</a></li>
+                     <li><a class='link--540' href="#faq">FAQ</a></li>
+                     <li><a class='link--540' href="#contact-us">Contact Us</a></li>
+                 </ul>
+             </div>
+             <div class="overlay"></div>
+         </div>
         <!-- sticy nav could become a problem -->
         <div class="lap-nav">
             <div class="anoying-nav">
@@ -62,45 +65,28 @@ <h3 class="omnifood-logo"><span class="logo">db</span>foods</h3>
                 <span class="rm-txt">remove sticky navigation</span>
             </div>
         </div>
-    </nav>
 
-    <nav class="nav--540">
-         <!-- meadia query >= 540 -->
-         <button class="search mdq--540 show-btn" name="show-btn">≡</button>
-         <div class="nav-links--3">
-             <button class="rremove-nav-btn" name="remove-btn">&times;</button>
-             <ul class="content">
-                 <li><a class='link--540' href="#how-it-works">How It Works</a></li>
-                 <li><a class='link--540' href="#list-of-diets">List Of Diets</a></li>
-                 <li><a class='link--540' href="#testimonial">Testimonial</a></li>
-                 <li><a class='link--540' href="#pricing" class="highlighted-link nav-link">Pricing Plans</a></li>
-                 <li><a class='link--540' href="#faq">FAQ</a></li>
-                 <li><a class='link--540' href="#contact-us">Contact Us</a></li>
-             </ul>
-         </div>
-         <div class="overlay"></div>
+        <!-- <span class="msg">turn on sticky navigation</span> -->
+    <div class="helper-nav">
+        <div class="state on" data-state="on">on</div>
+        <div class="state off active-state" data-state="off">off</div>
+    </div>
     </nav>
-    <header>
 
-        <section class="section-hero container container-grid">
-            <div class="section-hero--text">
-                <h1 class="heading">Welcome to Daily Bread foods, an <strong>omni</strong> food provider that saves you from kitchen headache.</h1>
+    <header class="header-tag">       
+        <section class="new-hero">
+            <h1 class="heading">Cook less or no more!</h1>
 
-                <p class="text">Now is the time for you to face your daily activities whole heartedly without having the problems of manually scheduling meals for yourself and your family.</p>
+                <p class="text new-text">Have your meals conveniently, with no worries.</p>
+                <p class="text new-text">great meals from our professional cooks.</p>
 
-                <div class="removal-cta section-hero--cta">
-                    <div class="removal-cta-2 all-cta">
-                        <button class="hero-cta eat-well" name="eat-well">Start eating well</button>
-                        <!-- <button class="hero-cta learn-more">Learn more &rarr;</button> -->
-                        <button class="hero-cta learn-more"><a href="#how-it-works" class="link">Learn more &rarr;</a></button>
-                    </div>
-                    <span class="logo">db</span>
+                <div class="new-cta">
+                    <button class="hero-cta eat-well" name="eat-well">Start eating well</button>
+                    <button class="hero-cta learn-more">Learn more &rarr;</button>
                 </div>
-
-
-                <div class="section-hero--customers">
-                    <!-- <img src="" alt=""> -->
-                    <div class="customer-photos">
+                <div class="section-hero--customers new-hero--customers">
+                    <img src="" alt="">
+                    <div class="customer-photos new-customer-img">
                         <img src="./img/customers/customer--1.jpg" alt="customer--1">
                         <img src="./img/customers/customer--2.jpg" alt="customer--2">
                         <img src="./img/customers/customer--3.jpg" alt="customer--3">
@@ -112,8 +98,7 @@ <h1 class="heading">Welcome to Daily Bread foods, an <strong>omni</strong> food
                         <strong >250,000+</strong> meals delivered last year!
                     </aside>
                 </div>
-            </div>
-                <img src="./img/hero.png"  class="section-hero--img" alt="Chinese Food Archives">
+
         </section>
     </header>
 
@@ -139,7 +124,7 @@ <h3 class="primary-heading heading">Your daily dose of health in <strong>3</stro
                         <span class="number">01</span>
                         <p class="step-heading">Tell us what you like (and what not)</p>
                         <p class="description normal-text">
-                            Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow!
+                            Never again waste time thinking about what to eat! Daily-breadfoods AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow!
                         </p>
                     </figure>
                     </aside>
@@ -155,7 +140,7 @@ <h3 class="primary-heading heading">Your daily dose of health in <strong>3</stro
                         <span class="number">02</span>
                         <p class="step-heading">Approve your weekly meal plan</p>
                         <p class="description normal-text">
-                             Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes.
+                             Once per week, approve the meal plan generated for you by Daily-breadfoods AI. You can change ingredients, swap entire meals, or even add your own recipes.
                         </p>
                     </figure>
                     </aside>
@@ -257,13 +242,13 @@ <h3 class="primary-heading heading">Once you try it, you can't go back</h3>
                     <div class="cst--3">
                         <img src="./img/customers/steve.jpg" alt="our client steve photo">
     
-                        <p class="testimony description">Omnifood is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals now!</p>
+                        <p class="testimony description">Daily-breadfoods is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals now!</p>
                         <span class="cst-name">——  Steve Miller</span>
                     </div>
                     <div class="cst--4">
                         <img src="./img/customers/hannah.jpg" alt="our client hannah photo">
     
-                        <p class="testimony description"> I got Omnifood for the whole family, and it frees up so much time! Plus, everything is organic and vegan and without plastic. </p>
+                        <p class="testimony description"> I got dailybread-foods for the whole family, and it frees up so much time! Plus, everything is organic and vegan and without plastic. </p>
                         <span class="cst-name">—— Hannah Smith</span>
                     </div>
                 </div>
@@ -360,24 +345,65 @@ <h3 class="primary-heading heading">Get your meals rich in nutrients</h3>
                             <img src="./img/customers/customer--4.jpg" class="image-slide image-slide--3" alt="">
                         </div>
                         <figure class="tab-con active-content tab-con--0">
+                            <ion-icon class="icon-gen" name="infinite-outline"></ion-icon>
                             <p class="tab-heading">Available on daily basis</p>
                             <sapn class="txt">Our subscriptions cover 365 days per year, even including major holidays.</sapn>
                         </figure>
                         <figure class="tab-con tab-con--1">
+                            <ion-icon class="icon-gen" name="nutrition-outline"></ion-icon>
                             <p class="tab-heading">Carefully prepared meals</p>
                             <sapn class="txt">Our cooks only use local, fresh, and organic products to prepare your meals.</sapn>
                         </figure>
 
                         <figure class="tab-con tab-con--2">
+                            <ion-icon class="icon-gen" name="leaf-outline"></ion-icon>
                             <p class="tab-heading">Nicely packaged meals</p>
                             <sapn class="txt">All our partners only use reusable containers to package all your meals.</sapn>
                         </figure>
                         <figure class="tab-con tab-con--3">
+                            <ion-icon class="icon-gen" name="pause-outline"></ion-icon>
                             <p class="tab-heading">Flexible plans!</p>
                             <sapn class="txt">Going on vacation? Just pause your subscription, and we refund unused days.</sapn>
                         </figure>
                     </div>
                 </div>
+
+                <!-- for small phone: vw540 -->
+                <div class="feat-sm" id="feat-sm">
+                    
+                    <div class="feature-sm">
+                        <ion-icon class="icon-gen" name="infinite-outline"></ion-icon>
+                        <p class="feature-title-sm text--md">Never cook again!</p>
+                        <p class="text">
+                        Our subscriptions cover 365 days per year, even including major
+                        holidays.
+                        </p>
+                    </div>
+                    <div class="feature-sm">
+                        <ion-icon class="icon-gen" name="nutrition-outline"></ion-icon>
+                        <p class="feature-title-sm text--md">Local and organic</p>
+                        <p class="text">
+                        Our cooks only use local, fresh, and organic products to prepare
+                        your meals.
+                        </p>
+                    </div>
+                    <div class="feature-sm">
+                        <ion-icon class="icon-gen" name="leaf-outline"></ion-icon>
+                        <p class="feature-title-sm text--md">No waste</p>
+                        <p class="text">
+                        All our partners only use reusable containers to package all your
+                        meals.
+                        </p>
+                    </div>
+                    <div class="feature-sm">
+                        <ion-icon class="icon-gen" name="pause-outline"></ion-icon>
+                        <p class="feature-title-sm text--md">Pause anytime</p>
+                        <p class="text">
+                        Going on vacation? Just pause your subscription, and we refund
+                        unused days.
+                        </p>
+                    </div>
+                </div>
             </div>
         </section>
 
@@ -417,9 +443,9 @@ <h3 class="main-heading">Get your first meal for free!</h3>
         </section>
     </main>
 
-    <footer>
+    <footer id="contact-us">
         <div class="logo">
-            <h3 class="omnifood-logo"><span class="logo">db</span>foods</h3>
+            <img src="./img/logos/daily-bread-logo.png" alt="" class="daily-bread-logo">
             <ul class="social-links ul">
                 <li><a href="#"><ion-icon name="logo-facebook" class="sm-icon"></ion-icon></a ></li>
                 <li><a href="#"><ion-icon name="logo-instagram" class="sm-icon"></ion-icon></a ></li>
@@ -440,7 +466,7 @@ <h3 class="omnifood-logo"><span class="logo">db</span>foods</h3>
         </ul>
         <ul class="company ul">
             <li><a href="#">About Daily-Bread foods</a></li>
-            <li><a href="#">For Businessn</a></li>
+            <li><a href="#">For Business</a></li>
             <li><a href="#">Cooking partners</a></li>
             <li><a href="#">Careers</a></li>
         </ul>
diff --git a/manifest.webmanifest b/manifest.webmanifest
new file mode 100644
index 0000000..43e83ce
--- /dev/null
+++ b/manifest.webmanifest
@@ -0,0 +1,14 @@
+{
+    "icons": [
+        {
+            "src": "./img/logos/androidfav-ico-192.png",
+            "type": "image/png",
+            "size": "192x192"
+        },
+        {
+            "src": "./img/logos/androidfav-ico-512.png",
+            "type": "image/png",
+            "size": "512x512"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 7f1001d..47364f5 100644
--- a/script.js
+++ b/script.js
@@ -2,9 +2,8 @@
 const navLinks = document.querySelector(".nav-links")
 const navLinks2 = document.querySelector(".nav-links--2")
 const navbtn = document.querySelector(".nav-btn")
-const search = document.querySelector('.search')
 const navigation = document.querySelector('.navigation')
-const sectionHero = document.querySelector('.section-hero')
+const header =  document.querySelector('.header-tag')
 const navBar = document.querySelector('.nav-bar')
 const mainSection = document.querySelector('.main')
 
@@ -14,6 +13,7 @@ const overlay = document.querySelector('.overlay');
 const removeNavbtn = document.querySelector('.rremove-nav-btn');
 const removalCTA = document.querySelector('.removal-cta')
 const removalCTA2 = document.querySelector('.removal-cta-2')
+const link540 = document.querySelector('.link--540')
 
 const tabBtnCon = document.querySelector('.tab-btns') // tabbed component
 const btnTabs= document.querySelectorAll('.tab-btn')
@@ -24,7 +24,7 @@ const tabContentBG = document.querySelector('.tab-contents')
 const anoyingNav = document.querySelector('.anoying-nav') // remove anoying nav
 const stickyNavbtn = document.querySelector('.rm-sticy-nav')
 const lapNav = document.querySelector('.lap-nav')
-
+const helperNavigator = document.querySelector('.helper-nav')
 
 // handle class update
 class UpdateClasses {
@@ -62,7 +62,7 @@ function inspectClasses(el, classes){
     return anyObj.checkClass()
 }
 
-
+// nav lists
 const handleEvent = (...[arg, _]) => arg[0].style.display = arg[1]
 
 function partial(fn, arg){ // the partial function application
@@ -73,26 +73,23 @@ function partial(fn, arg){ // the partial function application
 
 navbtn.addEventListener("mouseover", partial(handleEvent, [navLinks, "flex"]))
 
-search.addEventListener("mouseover", partial(handleEvent, [navLinks2, "flex"]))
-
 navigation.addEventListener("mouseleave", partial(handleEvent, [navigation, "none"]))
 
 document.body.addEventListener("click", function(e){
     handleEvent([navigation, "none"])
 })
 
-let timeOut;
-// STICKY NAVIGATION
-const navWidth = getComputedStyle(navBar)
-if(parseFloat(navWidth.width) <= 600){initiateClasses(navBar, 'sticky', false)}
 
+
+// STICKY NAVIGATION
+let timeOut;
+let timeOut2;
 function callback(entries){
     const [entry] = entries;
-    const viewportWidth = entry.boundingClientRect.width
-    
     
     if(!entry.isIntersecting){
-        if(parseFloat(navWidth.width) > 600) initiateClasses(navBar, 'sticky')
+        intersecting = true
+        initiateClasses(navBar, 'sticky')
 
         // remove anoying sticky nav
         navBar.addEventListener("mouseover", function(e){
@@ -106,50 +103,111 @@ function callback(entries){
                  timeOut = setTimeout(() => lapNav.style.visibility = 'hidden', 1500)
                 
                 stickyNavbtn.addEventListener('click', function(){
-                    navBar.style.visibility = 'hidden'
+                    initiateClasses(navBar, 'sticky', false)
+
+                    if(!inspectClasses(navBar, 'sticky')){
+                        initiateClasses(helperNavigator, 'display')
+                        helperNavigator.style.left = '5%'
+                        helperNavigator.style.top = '50%'
+                    } 
+                    else { initiateClasses(helperNavigator, 'display', false) }
+                    
+                })
+                function expand(){
+                        helperNavigator.style.width = this
+                }
+                helperNavigator.addEventListener('mouseover', expand.bind('10rem'))
+                helperNavigator.addEventListener('mouseleave', expand.bind('4.8rem'))
+
+                helperNavigator.addEventListener('click', function(e){
+                const getTargetState = inspectClasses(e.target, 'state')
+
+                if(getTargetState){
+                    const toggleOn = () => {
+                    const allTargetState = document.querySelectorAll('.state')
+                    allTargetState.forEach((el) => initiateClasses(el, 'active-state', false))}
+
+                    toggleOn()
+                    initiateClasses(e.target, 'active-state')
+                    const dataState = e.target.dataset.state
+                    dataState ==='on' ?
+                    initiateClasses(navBar, 'sticky') :
+                    initiateClasses(navBar, 'sticky', false);
+
+                    clearTimeout(timeOut2)
+                    timeOut2 = setTimeout(() => {
+                        toggleOn()
+                        initiateClasses(document.querySelector('.off'), 'active-state')
+                        initiateClasses(helperNavigator, 'display', false)
+                    }, 1500)
+                    // if(!entry.isIntersecting) initiateClasses(helperNavigator, 'display', false)
+                }
                 })
             }
         })
-    }
-    else if(viewportWidth <= 600){ // small phone nav
-        openNav.addEventListener('click', function(){
-            initiateClasses(showNav3, 'show-nav-link-3')
-            initiateClasses(overlay, 'hidden')
-
-            // onclicking a link remove nav
-            document.querySelector('.nav--540').addEventListener('click', function(e){
-                const linktag = inspectClasses(e.target, 'link--540')
-
-                if(linktag) {
-                    initiateClasses(showNav3, 'show-nav-link-3', false)
-                    initiateClasses(overlay, 'hidden', false)
-                } 
-            })
-        })
 
-        // onclicking the disable btn remove nav
-        removeNavbtn.addEventListener('click', function(){
-            initiateClasses(showNav3, 'show-nav-link-3', false)
-            initiateClasses(overlay, 'hidden', false)
-        })
     }
     else{
         initiateClasses(navBar, 'sticky', false)
         navBar.style.visibility = 'visible'
+        intersecting = false;
     }
 }
-
+const navBarHeight = navBar.clientHeight
 const options = {
     root: null,
     threshold: 0,
+    rootMargin: `${-navBarHeight}px`,
 }
 const observer = new IntersectionObserver(callback, options);
-observer.observe(sectionHero)
+observer.observe(header)
+
+helperNavigator.addEventListener('click', function(){
+    
+})
+
+// SMOOTH SCROLLING
+function smoothScrolling(e){
+    e.preventDefault()
+    const targetEl = e.target.classList.contains(this);
+
+    if(!targetEl) return
+    const idEl = e.target.getAttribute('href');
+    const filterId = idEl.replace(/#/, '')
+    const elementSetId = document.getElementById(`${filterId}`)
+    elementSetId.scrollIntoView({ behavior: 'smooth' })
+}
+
+navLinks.addEventListener('click', smoothScrolling.bind('nav-link'))
+showNav3.addEventListener('click', smoothScrolling.bind('link--540'))
 
 navBar.addEventListener('mouseleave', function(){ // remove btn
     document.querySelector('.anoying-nav').style.display = "none";   
 })
 
+// small phone
+openNav.addEventListener('click', function(){
+    initiateClasses(showNav3, 'show-nav-link-3')
+    initiateClasses(overlay, 'hidden')
+
+    // onclicking a link remove nav
+    document.querySelector('.nav--2').addEventListener('click', function(e){
+        const linktag = inspectClasses(e.target, 'link--540');
+        const remByOverlay = inspectClasses(e.target, 'overlay')
+
+        if(linktag || remByOverlay) {
+            initiateClasses(showNav3, 'show-nav-link-3', false)
+            initiateClasses(overlay, 'hidden', false)
+        } 
+    })
+})
+
+// onclicking the disable btn remove nav
+removeNavbtn.addEventListener('click', function(){
+    initiateClasses(showNav3, 'show-nav-link-3', false)
+    initiateClasses(overlay, 'hidden', false)
+})
+
 
 
 // ======================= TABBED-COUROUSEL COMPONENT ===================