diff --git a/CSS/covidEssentials.css b/CSS/covidEssentials.css
new file mode 100644
index 0000000..d04a30f
--- /dev/null
+++ b/CSS/covidEssentials.css
@@ -0,0 +1,279 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Patrick Hand', cursive;
+    font-family: 'Roboto', sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-family: 'Source Serif 4', sans-serif;
+}
+
+.main{
+    display: flex; 
+    background-color: rgb(250, 250, 250);
+    flex-direction: row;
+    padding: 10px;
+}
+
+.leftsidebar{
+    width: 21%;
+    display: flex;
+    flex-direction: column;
+    column-gap: 10px;
+}
+
+.sidebar{
+    background-color: #fff;
+    position: relative;
+    top: 60px;
+    left: 0;
+    width: 90%;
+    height: 250px;
+    background: #fff;
+    padding-right: 10px;
+    margin-left: 10px;
+    border-radius: 8px;
+    padding:5px 10px;
+}
+
+.sidebar1{
+    overflow: hidden;
+    background-color: #fff;
+    position: relative;
+    top: 80px;
+    left: 0;
+    width: 90%;
+    height: 1000px;
+    background: #fff;
+    padding-right: 10px;
+    margin-left: 10px;
+    border-radius: 8
+    px;
+    padding:5px 10px;
+    margin-bottom: 60px;
+}
+
+/* list */
+.sidebar *{
+    background-color: white;
+}
+
+.sidebar1 *{
+    background-color: #fff;
+}
+
+.sidebar h1, h2, h3{
+    margin-top: 10px;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: .8;
+    letter-spacing: .01px;
+    text-align: left;
+    color: black;
+    border-bottom: 1px solid rgba(21,27,57,.04);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+.sidebar1 h1, h2, h3{
+    margin-top: 10px;
+    padding: 4px 0;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: .8;
+    letter-spacing: .01px;
+    text-align: left;
+    color: black;
+    border-bottom: 1px solid rgba(21,27,57,.04);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+h1{
+    font-size: 18px;
+    color: #151b39;
+}
+
+h2{
+    font-size: 16px;
+    color: #151b39;
+    font-weight: bold;
+}
+
+h3{
+    font-size: 12px;
+    color: #151b39;
+    font-weight: bold;
+}
+
+span{
+    font-size: 10px;
+}
+
+.menu{
+    list-style: none;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    width: 98%;
+    height: 180px;
+}
+
+.menu li{
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: .8;
+    letter-spacing: .01px;
+    text-align: left;
+    color: grey;
+    border-bottom: 1px solid rgba(21,27,57,.04);
+    padding: 8px 0;
+}
+
+.menu::-webkit-scrollbar{
+    width: 3px;
+    background-color: #fff;
+}
+
+.menu::-webkit-scrollbar-track{
+    background-color: rgb(185, 184, 184);
+    box-shadow: inset 0 0 5px rgb(204, 201, 201);
+}
+
+.menu::-webkit-scrollbar-thumb{
+    border-radius: 3px;
+    background-color: rgb(36, 35, 35);
+}
+
+.menu li::before{
+ content: "\f105 ";
+ font-weight: bold;
+ color: gray;
+ font-size: 13px;
+}
+
+
+.C_list {
+    list-style: none;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    width: 98%;
+    height: 180px;
+}
+
+.C_list li{
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.2;
+    letter-spacing: .01px;
+    text-align: left;
+    color: black;
+    border-bottom: 1px solid rgba(21,27,57,.04);
+    padding: 9px;
+    justify-content: center;
+}
+
+
+.C_list::-webkit-scrollbar{
+    width: 3px;
+    background-color: #fff;
+}
+
+.C_list::-webkit-scrollbar-track{
+    background-color: rgb(185, 184, 184);
+    box-shadow: inset 0 0 5px rgb(204, 201, 201);
+}
+
+.C_list::-webkit-scrollbar-thumb{
+    border-radius: 3px;
+    background-color: rgb(36, 35, 35);
+}
+
+
+
+input::placeholder{
+    color: grey;
+    padding: 2px;
+}
+
+input[type=search]{
+    border: none;
+    outline: none;
+    font-size: 10px;
+    background-color: rgb(233, 230, 230);
+    padding: 5px 1px;
+    border-radius: 3px;
+}
+
+/* Promo banner */
+
+.rightblock{
+    width: 79%;
+    border-radius: 8px;
+    position: relative;
+    top: 60px;
+}
+
+.promo-banner{
+    border-radius: 8px;
+    padding: 20px;
+    height: 160px;
+    background-color: rgb(223, 248, 255);
+}
+
+
+.shop_by_category{
+    display: flex;
+    margin-top: 20px;
+    border-radius: 8px;
+    height:190px;
+    padding: 16px;
+    background-color: #fff;
+    column-gap: 20px;
+}
+
+.shop_by_category > div{
+    display: flex;
+    border: 1px solid grey;
+    border-radius: 8px;
+    justify-content: center;
+}
+
+.shop_by_category div > img{
+    padding: 5px;
+    width: 100%;
+    height: 80%;
+}
+
+.all_products{
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    margin-top: 20px;
+    border-radius: 8px;
+    height:710px;
+    padding: 16px;
+    background-color: #fff;
+    column-gap: 20px;
+    row-gap: 10px;
+    justify-content: center;
+    align-items: center;
+}
+
+.all_products > div{
+    border: 1px solid grey;
+    border-radius: 8px;
+}
+
+.all_products div > img{
+    padding: 5px;
+}
+
+
+/* show 20 products */
+
diff --git a/CSS/login.css b/CSS/login.css
new file mode 100644
index 0000000..5989f51
--- /dev/null
+++ b/CSS/login.css
@@ -0,0 +1,155 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background: #f6f6f7;
+    font-weight: 300;
+    font-family: Lato;
+    line-height: 1rem;
+    color: #212529;
+    text-align: left;
+}
+
+/* login */
+.login {
+    margin: 50px;
+    background: #f6f6f7;
+    display: flex;
+    justify-content: center;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+}
+
+.login_img > img{
+    width: 100%;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+}
+
+.content{
+    background-color: white;
+    padding: 40px;
+    cursor: auto;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.title{
+    padding: 20px;
+}
+
+.sign_txt{
+    font-size: 14px;
+    padding-top: 25px;
+    margin-bottom: 35px;
+    width: 350px;
+}
+
+/* number input */
+
+
+.phone_label{
+    font-weight: bold;
+    font-size: 11px;
+    color: #24aeb1;
+} 
+
+#number{
+    border: none;
+    border-bottom: 2px solid rgba(21,27,57,.04) ;
+    margin: 5px ;
+    width: 80%;
+    font-size: 15px;
+}
+
+#number::placeholder{
+    color: rgb(177, 171, 171);
+    font-size: 1em;
+    text-align: left;
+}
+
+.login_form > button, label{
+    display: flex;
+    padding: 30px px;
+}
+
+.otp_btn{
+    font-weight: bold;
+    color: white;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #24aeb1;
+}
+
+/* +91 Prefix */
+.prefix{
+    font-weight: bold;
+    font-size: 15px;
+}
+
+/* google  */
+
+#auth{
+    margin-top:80px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.google_logo{
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    padding: 5px;
+    justify-content: space-around;
+    border: 1px solid rgb(192, 189, 189);
+    width: 120px;
+    font-size: 15px;
+}
+
+.google_logo > img{
+    width: 24px;
+}
+
+/* facebook */
+
+.fb_logo {
+    cursor: pointer;
+    display: flex;
+    border-radius: 3px;
+    padding: 5px;
+    justify-content: space-around;
+    border: 1px solid rgb(192, 192, 192);
+    width: 120px;
+    font-size: 15px;
+}
+
+.fb_logo > img{
+    width: 24px;
+}
+
+
+/* copy right */
+.copy_right{
+    display: flex;
+    justify-content: center;
+    font-size: 11px;
+    margin-bottom: 10px;
+}
+
+textarea:focus, input:focus{
+    outline: none;
+}
+/* Responsive  */
+
+@media (max-width: 600px) {
+    .login{
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/JS/covidEssentials.js b/JS/covidEssentials.js
new file mode 100644
index 0000000..a547fd1
--- /dev/null
+++ b/JS/covidEssentials.js
@@ -0,0 +1,271 @@
+let list = document.querySelector(".menu");
+
+let data1 = ["Ayush", "Fitness", "Mom & Baby", "Sexual Wellness", "Treatments", "Devices", "Health Conditions", "Otc Deals", "Eyewear", 
+"Covid Essentials", "Surgical ", "Diabetes Support", "Fragrances ", "Make-Up", "Hair", 
+"Men's Grooming", "Skin Care", "Tools & Appliances", "Wellness", "Personal Care"]
+
+data1.forEach((item) => {
+    let li = document.createElement("li");
+    li.innerHTML = item;
+
+    list.appendChild(li);
+});
+
+
+let list2 = document.querySelector(".Categories_list")
+
+let data2 = ["Mask(308)", "Personal & Home Essentials(154)", "Business Essentials(146)", "Immunity Booster(52)", "Travel Essentials(13)"]
+
+data2.forEach((item) => {
+    let li2 = document.createElement("li");
+    li2.innerHTML = "<input type='checkbox'> " + item;
+    list2.appendChild(li2);
+})
+
+let Manu_list = document.querySelector(".manufacturers_list")
+
+let data3 = [" 1 Mile Healthcare (51)", " Advind Healthcare India Pvt. Ltd. (44)", " Advind Healthcare India Pvt. Ltd. (44)", " Advind Healthcare India Pvt. Ltd. (44)", "Livinguard Technologies Pvt. Ltd. (31)",
+"Boldfit (28)", "Orient Exports Private Limited (28)","Reckitt Benckiser India Ltd (19)",
+"West Coast Pharmaceuticals Works Ltd (16)","Axio Biosolutions Pvt.Ltd. (14)","Requity Applied Sciences Pvt Ltd (14)","Reliance Retail Limited (12)",
+"Itc India Ltd (11)","Redroom Technology Private Limited (11)","Rising Sun Enterprise (11)","San Nap Healthcare (11)",
+"Sahyog Wellness (10)","CRESCENZIA TRADETECH PVT LTD. (9)","Inlife Pharma Private Limited (9)",
+"Medipride (9)","Medisales India Pvt Ltd (9)","Romsons Scientific & Surgical Pvt Ltd (9)",
+"Antrix Health Care Pvt. Ltd. (8)","Chinar Forge Ltd. (8)","ENETSTUDIOZ INC (8)",
+"Inventz Lifesciences Pvt Ltd (8)","Schulke India Pvt Ltd (8)","Sirona Hygiene Private Limited (8)",
+"Visionaari LLP (8)", "Cipla Ltd(Otc) (7)",
+"Piramal Healthcare Ltd (7)", "PASSIM MEDICHEM AGENCIES (6)",
+"The Mask Lab (6)","Yakhi Retail (6)","Aditya Birla Fashion And Retail Limited (5)",
+"Ansell India (5)","Eliph Nutrition Pvt Ltd (5)","Microgo LLP (5)",
+"SFT Technologies Pvt. Ltd. (5)","Sanmed Healthcare Pvt Ltd (5)","Skyra Professional Equipment Pvt. Ltd (5)",
+"Aeronutrix Sports Products Private Limited (4)","Airwell Enterprises (4)","Dhanvantari Nano Ayushadi (4)",
+"Dispo Concept Pvt Ltd (4)","GRD Pharmaceuticals (4)","Genus Apparels Limited (4)",
+"Helyxon Healthcare Solutions Pvt Ltd (4)","Kamadgiri Fashion Ltd. (4)","Kee Healthcare Private Limited (4)","Medichems (4)",
+]
+
+data3.forEach((item) => {
+    let li3 = document.createElement("li");
+    li3.innerHTML = "<input type='checkbox'>" + item;
+    Manu_list.appendChild(li3);
+})
+
+// brand list 
+
+let brand_list = document.querySelector(".brandlist");
+
+let data4 = ["1Mile (51)","Advind Healthcare (44)","Care View (31)","Livinguard (31)","Boldfit (28)",
+    "Shield Xtra (5)"]
+
+    data4.forEach((item) => {
+        let li4 = document.createElement("li");
+        li4.innerHTML = "<input type='checkbox'>" + item;
+        brand_list.appendChild(li4);
+    })
+
+// arr
+
+var arr =  [
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/930971/skin_elements_face_pack_turmeric_multani_mitti_100_gm_0_2.jpg",
+          "Skin Elements Face Pack - Turmeric & Multani.",
+          "Ayur Herbals",
+          247,
+          260,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/959727/hashmi_vetoll_xl_capsule_20s_0_0.jpg",
+          "Hashmi Vetoll XL Capsule 20's",
+          "Blossom Kochhar Beauty",
+          184,
+          205,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/959708/hashmi_hard_rock_capsule_20s_0_0.jpg",
+          "Hashmi Multani Rock 20's",
+          "Nivea India Pvt Ltd",
+          189,
+          199,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/924985/skin_elements_mens_intimate_wash_60_ml_0_2.jpg",
+          "Skin Elements Men's Intimate Wash 60ml",
+          "Ayur Herbals",
+          247,
+          399,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/924992/skin_elements_mens_intimate_wash_120_ml_0_2.jpg",
+          "Skin Elements Men's Intimate Wash 160ml",
+          "Blossom Kochhar Beauty",
+          166,
+          175,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/927520/prolixr_daily_essentials_bundle_0_0.jpg",
+          "Prolixr Daily Essentials Bundle",
+          "Ayur India Pvt",
+          337,
+          375,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/927532/prolixr_definite_detox_bundle_0_0.jpg",
+          "Prolixr Definite Essential Bundle",
+          "Pt Invent India Pvt",
+          337,
+          375,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/835774/accu_chek_instant_test_strips_50_s_0.jpg",
+          "Accu-check test Strip",
+          "Patanjali Herbals",
+          161,
+          170,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/38061/b_protin_nutritional_powder_supplement_chocolate_500_gm_0.jpg",
+          "B-Protin Nutritional Powder",
+          "Blossom Kochhar Beauty",
+          450,
+          450,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/853021/ducray_anaphase_anti_hair_loss_complement_shampoo_100_ml_0_3.jpg",
+          "Ducray Anaphase + Anti-Hair Loss Complement Shampoo",
+          "Pvt India Pvt",
+          260,
+          500,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/14608/nestle_peptamen_peptide_based_diet_powder_vanilla_flavour_400_gm_tin_0_1.jpg",
+          "Nestle Peptamen  Poweder - Vanilla Flavour 400",
+          "Ayur Herbals",
+          247,
+          260,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/362506/scalpe_plus_anti_dandruff_shampoo_75_ml_0_1.jpg",
+          "MilkShake Prolixr Powder",
+          "Blossom Kochhar Beauty",
+          184,
+          205,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/413072/ensure_diabetes_care_powder_vanilla_flavour_400_gm_pet_jar_0.jpg",
+          "MilkShake Prolixr Powder",
+          "Nivea India Pvt Ltd",
+          189,
+          199,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/914676/accu_chek_guide_test_strip_50s_0_1.jpg",
+          "MilkShake Prolixr Powder",
+          "Ayur Herbals",
+          247,
+          399,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/38061/b_protin_nutritional_powder_supplement_chocolate_500_gm_0.jpg",
+          "Scalpe Plus Anti Dandruff 75ml",
+          "Blossom Kochhar Beauty",
+          166,
+          175,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/38061/b_protin_nutritional_powder_supplement_chocolate_500_gm_0.jpg",
+          "Ensure Diabets Care Powder",
+          "Ayur India Pvt",
+          337,
+          375,
+        ],
+        [
+          "https://www.netmeds.com/images/product-v1/150x150/902372/ensure_diabetes_care_powder_vanilla_flavour_1_kg_refill_pack_0_0.jpg",
+          "Ensure Diabets Care Powder",
+          "Pt Invent India Pvt",
+          337,
+          375,
+        ],
+]
+
+
+let items = document.querySelector(".shop_by_category");
+
+
+arr.slice(0,6).forEach( (ele) => {
+    let items_inShopCategory = document.createElement("div");
+    let items_img = document.createElement("img");
+    let random = Math.floor(Math.random()*100);
+
+
+    let dis = document.createElement("span");
+    dis.innerHTML = "UPTO " + random + "%";
+    dis.style.position = "absolute";
+    dis.style.top="335px";
+    dis.style.textAlign = "center";
+    dis.style.color ="green";
+    dis.style.fontWeight = "bold";
+
+    let item_name = document.createElement("span");
+    item_name.textContent = ele[2].slice(0,15) + "..";
+    item_name.style.position = "absolute";
+    item_name.style.top = "319px";
+    item_name.style.overflow ="hidden";
+    item_name.style.fontWeight = "bold";
+    
+
+        items_img.src = ele[0];
+        items_inShopCategory.append(items_img, item_name, dis);
+        items.append(items_inShopCategory);
+        console.log(ele[2])
+    
+});
+
+
+// show 8 products 
+
+let products_8 = document.querySelector(".all_products");
+
+arr.slice(0,8).forEach( (ele) => {
+    let items_inShopCategory = document.createElement("div");
+    items_inShopCategory.style.display = "flex";
+    items_inShopCategory.style.flexDirection = "column";
+    items_inShopCategory.style.alignItems = "left";
+    items_inShopCategory.style.padding = "10px";
+
+    let items_img = document.createElement("img");
+
+
+    let item_name = document.createElement("h6");
+    item_name.textContent = ele[1];
+    item_name.style.fontWeight = "bold";
+
+    let item_manf = document.createElement("span");
+    item_manf.textContent = "Mkt:"+ele[2];
+    item_manf.style.marginTop = "10px";
+    
+    let price = document.createElement("p");
+    price.innerHTML = "Best price* <span style='color:red; font-size:18px'> Rs" + ele[3] +".00</span>";
+    price.fontSize = "20px";
+
+    let mrp = document.createElement("p");
+    mrp.innerHTML = "MRP <s>Rs." + ele[4] + ".00 </s>";
+
+    let addToCart = document.createElement("button");
+    addToCart.textContent = "ADD TO CART";
+    addToCart.style.backgroundColor = "#24aeb1";
+    addToCart.style.color = "white";
+    addToCart.style.border = "none";
+    addToCart.style.padding = "10px";
+    addToCart.style.fontWeight = "bold";
+    addToCart.style.borderRadius = "2px";
+
+    let random = Math.floor(Math.random()*100);
+    let discount_tag = document.createElement("div");
+    discount_tag.innerHTML = "<span style='color:white; background-color:green; padding:2px; display:flex; width:55px; position: absolute; >"+ random +"% OFF</span>"
+
+    items_img.src = ele[0];
+    items_inShopCategory.append(items_img, item_name, item_manf, price, mrp, addToCart, discount_tag);
+    products_8.append(items_inShopCategory, );
+    
+    console.log(ele[3])
+});
+
+
diff --git a/JS/navbar-footer.js b/JS/navbar-footer.js
index 29801c6..c66719a 100644
--- a/JS/navbar-footer.js
+++ b/JS/navbar-footer.js
@@ -8,7 +8,7 @@ navbar.innerHTML = `<section id="top">
             </div>
             <p><i class="fa fa-upload"></i> Upload</p>
             <p><i class='fa fa-shopping-cart'></i> Cart</p>
-            <p><i class='fas fa-user-edit'></i> Sign in / Sign up</p>
+            <p><i class='fas fa-user-edit'></i> <a href="login.html">Sign in / Sign up<a></p>
         </section>
         <section id="middle">
             <p class="drop-p">
@@ -52,7 +52,7 @@ navbar.innerHTML = `<section id="top">
 
         </section>
         <section id="bottom">
-            <a href="#">COVID Essentials</a>
+            <a href="covidEssentials.html">COVID Essentials</a>
             <a href="#">Diabetes</a>
             <a href="#">Eyewear</a>
             <a href="#">Ayush</a>
diff --git a/JS/wellness.js b/JS/wellness.js
index 0090b47..06f319e 100644
--- a/JS/wellness.js
+++ b/JS/wellness.js
@@ -557,6 +557,7 @@ let data = [
   },
 ];
 
+
 let article = document.querySelector("article");
 for (let i = 0; i < data.length; i++) {
   let res = "";
@@ -595,3 +596,4 @@ spans.forEach((span) => {
     sec.querySelector("section").classList.toggle("toggle");
   });
 });
+
diff --git a/covidEssentials.html b/covidEssentials.html
new file mode 100644
index 0000000..e9bfb24
--- /dev/null
+++ b/covidEssentials.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CSS/covidEssentials.css">
+    <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=Patrick+Hand&family=Roboto:wght@300&family=Source+Sans+Pro:wght@700&family=Source+Serif+4&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="CSS/navbar-footer.css">
+    <title>Covid Essentials</title>
+</head>
+<body>
+    <script src="https://kit.fontawesome.com/6ff2c6e034.js" crossorigin="anonymous"></script>
+    <!-- Navbar -->
+    <nav></nav>
+
+    <!-- sidebar -->
+
+    <div class="main">
+
+    
+    <div class="leftsidebar">
+    <div class="sidebar">
+        <div class="white-bg">
+            <h1>Categories</h1>
+            <ul class="menu">
+            </ul>
+        </div>
+    </div>
+
+    <div class="sidebar1">
+        <div class="white-bg">
+            <h1>Filters</h1>
+            <div class="available">
+                <h2>Availability</h2>
+                <input type="checkbox" name="" class="checkbox"><span>Exclude out of stock(392)</span>
+            </div>
+            <div class="categories">
+                <h3>Categories</h3>
+                <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off" maxlength="512" placeholder="Search...">
+                <ul class="Categories_list C_list"></ul>
+            </div>
+            <!-- Manufacturers List -->
+            <div class="manufacturers">
+                <h3>Manufacturers</h3>
+                <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off" maxlength="512" placeholder="Search...">
+                <ul class="manufacturers_list C_list"></ul>
+            </div>
+            <!-- Brands -->
+            <div class="brand">
+                <h3>Brands</h3>
+                <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off" maxlength="512" placeholder="Search...">
+                <ul class="brandlist C_list"></ul>
+            </div>
+
+            <!-- price -->
+            <div class="price">
+                <h2>Price</h2>
+                <input type="range" name="" id="" min="1" max="39000" step="20">
+            </div>
+            <div class="discount">
+                <h2>Discount</h2>
+                <input type="range" aria-valuemax="39000" aria-valuemin="10" aria-disabled="false" data-handle-key="0" step="20">
+            </div>
+        </div>
+    </div>
+</div>
+
+    <div class="rightblock">
+
+        <div class="promo-banner">
+            <h1>Covid Essentials</h1>
+        </div>
+
+        <div class="shop_by_category">
+            <h3>SHOP BY CATEGORY</h3>
+        </div>
+
+        <div class="all_products">
+            
+        </div>
+
+        <!-- show 20 products -->
+        <div class="20_products"></div>
+    </div>
+    </div>
+
+
+
+</div>
+
+    <!-- footer -->
+    <footer></footer>
+    <!-- script -->
+    <script src="JS/navbar-footer.js"></script>
+    <script type="module" src="JS/covidEssentials.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..0de574f
--- /dev/null
+++ b/login.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="CSS/login.css" />
+    <link rel="stylesheet" href="CSS/navbar-footer.css">
+    <title>Login</title>
+  </head>
+  <body>
+    <!-- Navbar -->
+    <nav></nav>
+
+    <!-- signup -->
+    <div class="login">
+      <div class="login_img">
+        <img
+          src="https://www.netmeds.com/images/cms/wysiwyg/cms/1588773798_sign-in-banner-new.png"
+          alt=""
+        />
+      </div>
+      <div class="content">
+        <div class="title">
+          <h2>Sign In / Sign Up</h2>
+          <p class="sign_txt">
+            Sign up or Sign in to access your orders, special offers, health
+            tips and more!
+          </p>
+          <div class="login_form">
+            <label for="" class="phone_label">PHONE NUMBER</label>
+            <span class="prefix">+91 |</span>
+            <input
+              type="tel"
+              name=""
+              id="number"
+              placeholder="Enter your mobile no"
+            />
+            <button type="submit" class="otp_btn">USE OTP</button>
+          </div>
+
+          <div id="auth">
+            <!-- google signin -->
+            
+            <div class="google_logo">
+              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/800px-Google_%22G%22_Logo.svg.png" alt="">
+              <span>Google</span>
+            </div>
+            
+            <!-- fb siginin -->
+            <div class="fb_logo">
+              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCbqVNMMWJANxmYzxEB_PNB76oHAf6FAieRGAD1C3mdeacAnWgOF_QrN_A0E1vWW42_mI&usqp=CAU" alt="">
+              <span>Facebook</span>
+            </div>
+          </div>
+          
+          
+        </div>
+      </div>
+    </div>
+    <div class="copy_right">
+      <p>By continuing you agree to our Terms of service
+        and Privacy & Legal Policy.</p>
+    </div>
+   
+
+    <!-- footer -->
+    <footer></footer>
+
+    <script src="./JS/navbar-footer.js"></script>
+  </body>
+</html>