diff --git a/Navabar.html b/Navabar.html
index a3d84de0..1a510bd4 100644
--- a/Navabar.html
+++ b/Navabar.html
@@ -183,6 +183,9 @@
             <a class="dropdown-item" href="order.html">
               <i class="fa-solid fa-box"></i>
               Orders</a>
+            <a class="dropdown-item" href="notifications.html">
+              <i class="fa-regular fa-bell"></i>
+              Notifications</a>
             <a class="dropdown-item" href="wishlist.html">
               <i class="fa-regular fa-heart"></i>
               Wishlist</a>
diff --git a/images/upi_img.webp b/images/upi_img.webp
new file mode 100644
index 00000000..9b94dd7d
Binary files /dev/null and b/images/upi_img.webp differ
diff --git a/notifications.css b/notifications.css
new file mode 100644
index 00000000..4ea6b3e9
--- /dev/null
+++ b/notifications.css
@@ -0,0 +1,452 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+header{
+    margin-bottom: 80px;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #dbe5f3;
+}
+
+main{
+    height: 1000px;
+    width: 100%;
+    background-color: #dbe5f3;
+}
+
+.main-content{
+    height: 100%;
+    width: 100%;
+    padding-top: 25px;
+    display: flex;
+    justify-content: center;
+}
+
+.options{
+    width: 20%;
+    height: 950px;
+    display: flex;
+    flex-direction: column;
+    margin-right: 15px;
+}
+
+.notifications{
+    width: 60%;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    background-color: white;
+    margin-left: 15px;
+}
+
+.options-hello{
+    background-color: white;
+    width: 100%;
+    height: 75px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+}
+
+
+.options-hello h4{
+    font-weight: 600;
+    flex: 1;
+    padding-left: 20px;
+}
+
+.options-myorders{
+    background-color: white;
+    width: 100%;
+    height: 75px;
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    padding-right: 20px;
+    color: rgb(3, 141, 226);
+    margin-bottom: 1px;
+}
+
+.options-myorders a{
+    text-decoration: none;
+    font-size: 1rem;
+    color: grey;
+    font-weight: 600;
+    flex: 1;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.options-myorders a:hover{
+    text-decoration: none;
+    color: rgb(3, 141, 226);
+}
+
+.options-account{
+    height: 205px;
+    width: 100%;
+    background-color: white;
+    margin-bottom: 1px;
+}
+
+.options-payments{
+    height: 205px;
+    width: 100%;
+    background-color: white;
+    margin-bottom: 1px;
+}
+
+.options-mystuff{
+    height: 250px;
+    width: 100%;
+    background-color: white;
+    margin-bottom: 1px;
+}
+
+.heading{
+    height: 70px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: rgb(3, 141, 226);
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.options-heading{
+    font-size: 1rem;
+    color: grey;
+    font-weight: 600;
+    flex: 1;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.lists{
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+}
+
+.lists li{
+    height: 45px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 54px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.lists a{
+    text-decoration: none;
+    color: black;
+}
+
+.lists li:hover{
+    background-color: #f5faff;
+}
+
+.lists li:hover a{
+    text-decoration: none;
+    color:#2874f0;
+}
+
+ul p{
+    padding-left: 100px;
+    color: green;
+    font-size: larger;
+    font-weight: 500;
+    padding-top: 12.9px;
+}
+
+.options-logout{
+    background-color: white;
+    width: 100%;
+    height: 50px;
+    margin-bottom: 15px;
+}
+
+.options-logout .heading{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: rgb(3, 141, 226);
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.options-logout .options-heading:hover{
+    color: #2874f0;
+}
+
+.options-frequently_visited{
+    height: 75px;
+    width: 100%;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.row-heading{
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding-left: 20px;
+}
+
+.row-contents{
+    font-size: 0.7rem;
+    color: grey;
+    padding-left: 20px;
+    margin-top: 5px;
+}
+
+.row-contents span{
+    cursor: pointer;
+}
+
+.row-contents #one{
+    padding-right: 10px;
+}
+
+.notifications-heading{
+    height: 70px;
+    width: 100%;
+    font-size: 1.3rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    padding-left: 30px;
+    border-bottom: 1px solid #dbe5f3;
+}
+.n1{
+    width: 100%;
+    height: 110px;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #dbe5f3;
+}
+
+.n-img{
+    height: 70px;
+    width: 10%;
+}
+
+.n-info{
+    height: 70px;
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 10px;
+}
+
+.n-details{
+    height: 70px;
+    width: 15%;
+}
+
+.n-details .details-content{
+    height: 100%;
+    width: 100%;
+    display: none;
+}
+
+.n-img img{
+    height: 70px;
+    width: 70px;
+}
+
+.info-details{
+    width: 100%;
+    height: auto;
+    font-size: 0.98rem;
+    font-weight: 500;
+}
+
+.info-date{
+    width: 100%;
+    height: auto;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: grey;
+}
+
+.n1:hover .details-content{
+    display: flex;
+    color: #2874f0;
+    align-items: center;
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding-left: 10px;
+    cursor: pointer;
+}
+
+.n1:hover .details-content i{
+    size: 0.85rem;
+    font-weight: 600;
+    padding-left: 5px;
+}
+
+.n1:hover {
+    background-color: #f5faff ;
+}
+
+
+footer {
+    background-color: rgba(0, 0, 0, 0.85);
+    color: #ffffff;
+    padding: 15px 35px;
+}
+.foot-top {
+    display: flex;
+    border-bottom: 1px solid rgb(85, 78, 78);
+    flex-wrap: nowrap;
+}
+.foot-top ul,.foot-down ul{
+    padding: 0;
+}
+.foot-left, .foot-right {
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+    padding: 25px;
+    flex: 1 1 500px;
+    flex-wrap: wrap;
+}
+.foot-left h5, .foot-right h5 {
+    font-size: 13px;
+    font-weight: 600;
+    color: #9b9898;
+}
+.foot-left .about li,.foot-down li, .foot-right .part, .foot-right .office, .social ul li {
+    list-style: none;
+}
+.foot-left .about li a, .social ul li a, .foot-down ul li a {
+    font-size: 12px;
+    color: rgb(255, 255, 255);
+    font-weight: 600;
+    text-decoration: none;
+}
+.about{
+    min-width: 150px;
+}
+.about li a:hover{
+    text-decoration: underline;
+}
+.social ul {
+    display: flex;
+    align-items: center;
+    gap: 20px; 
+    
+}
+.social>ul>li>a>i{
+    color: #ffffff;
+    font-size: 2rem;
+}
+.foot-right {
+    border-left: 1px solid rgb(85, 78, 78);
+    padding-left: 30px;
+}
+.foot-down {
+    padding: 10px 40px;
+    display: flex;
+    margin-top: 20px;
+    font-size: 12px;
+    justify-content: space-between;
+    font-weight: 600;
+    flex-wrap: wrap;
+}
+.foot-down .ft-1{
+    max-width: 500px;
+    width: -webkit-fill-available;
+}
+.foot-down ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    width: -webkit-fill-available;
+    justify-content: space-between;
+    flex-direction: row;
+}
+.payment-icons{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-items: center;
+}
+.payment-icons img {
+    height: 15px;
+}
+.office a{
+    color: #70ebf9;
+}
+#phones img {
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  #phones img:hover {
+    transform: scale(1.1); /* Increase the scale factor as needed */
+    opacity: 0.9;
+  }
+.bi-question-circle-fill,.bi-gift-fill,.bi-briefcase-fill
+{
+    color: #ffc600;
+}
+/* Tablets and below */
+@media (max-width: 768px) {
+    footer {
+        padding: 15px;
+    }
+    .foot-top {
+        flex-direction: column;
+    }
+    .foot-left, .foot-right {
+        flex: 1 1 auto;
+        padding: 15px;
+        justify-content: flex-start;
+    }
+    .foot-right {
+        border-left: none;
+    }
+    .foot-down {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+    .foot-down ul {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .payment-icons {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .foot-left, .foot-right {
+        flex-direction: column;
+    }
+    .social ul {
+        justify-content: center;
+
+    }
+    .foot-down ul {
+        justify-content: center;
+    }
+}
\ No newline at end of file
diff --git a/notifications.html b/notifications.html
new file mode 100644
index 00000000..c53afe76
--- /dev/null
+++ b/notifications.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+        integrity="sha512-..." crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Notifications</title>
+    <link rel="stylesheet" href="notifications.css">
+</head>
+<body>
+    <header>
+        <div id="navbar-container"></div>
+        <div id="loader"></div>
+        <div id="category-list"></div>
+    </header>
+    <main>
+        <div class="main-content">
+            <div class="options">
+                <div class="options-hello">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50"><defs><path id="a" d="M50 0v50H0V0z"/><path id="c" d="M0 50h50V0H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#EBCFB9" d="M23.05 39.873h4.02v-5.357h-4.02z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FFE11B" d="M50 25c0 13.807-11.192 25-25 25C11.193 50 0 38.807 0 25S11.193 0 25 0c13.808 0 25 11.193 25 25" mask="url(#b)"/><path fill="#FADDC5" d="M11.418 45.78s-.166-5.062 5.118-7.024c1.96-.727 5.776-.654 8.393-.654 2.54 0 7.468-.107 9.404.596 5.435 1.97 4.635 7.07 4.635 7.07s-4.83 4.06-14.04 4.06c-10.832 0-13.512-4.047-13.512-4.047"/><path fill="#47C3CF" d="M11.418 45.78s-.166-5.062 5.118-7.024c1.106-.41 2.802-.565 4.54-.624 0 0 .088 4.137 4.252 4.137 4.184 0 4.318-4.14 4.318-4.14 1.866.056 3.682.202 4.688.568 5.435 1.97 4.635 7.07 4.635 7.07s-4.83 4.06-14.04 4.06c-10.832 0-13.512-4.047-13.512-4.047"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#FADDC5" d="M23.27 39.873h4.02v-5.357h-4.02z" mask="url(#d)"/><path fill="#D3B8A3" d="M23.257 35.083h4.03s-.54 1.764-2.008 1.774c-1.468.01-2.023-1.774-2.023-1.774" mask="url(#d)"/><path fill="#FADDC5" d="M36.154 23.76c0 6.41-5.027 11.608-11.224 11.608-6.2 0-11.226-5.197-11.226-11.61 0-6.41 5.027-11.61 11.226-11.61 6.197 0 11.224 5.2 11.224 11.61" mask="url(#d)"/><path fill="#FFF" d="M26.64 32.27s-.163 1.294-1.28 1.294c-1.116 0-1.46-1.295-1.31-1.295" mask="url(#d)"/><path fill="#A56826" d="M18.204 19.192s1.665 5.688 7.124 4.148c7.347-2.073 10.62 2.023 10.826.715v-.296s1.81-13.04-11.225-13.04c-13.036 0-11.225 13.04-11.225 13.04s3.903-.937 4.5-4.568" mask="url(#d)"/></g></svg>
+                    <h4>Hello</h4>                
+                </div>
+                <div class="options-myorders">
+                    <i class="fa-solid fa-boxes-packing"></i>
+                    <a href="orders.html">MY ORDERS</a>
+                    <i class="fa-solid fa-angle-right"></i>
+                </div>
+                <div class="options-account">
+                    <div class="heading">
+                        <i class="fa-solid fa-user"></i>
+                        <div class="options-heading">ACCOUNT SETTINGS</div>
+                    </div>
+                    <ul class="lists">
+                        <li><a href="">Personal Information</a></li>
+                        <li><a href="">Manange Addresses</a></li>
+                        <li><a href="">PAN Card Information</a></li>
+                    </ul>
+                </div>
+                <div class="options-payments">
+                    <div class="heading">
+                        <i class="fa-solid fa-credit-card"></i>
+                        <div class="options-heading">PAYMENTS</div>
+                    </div>
+                    <ul class="lists">
+                        <li><a href="">Gift Cards</a>
+                        <p>₹0</p></li>
+                        <li><a href="">Saved UPI</a></li>
+                        <li><a href="">Saved Cards</a></li>
+                    </ul>
+                </div>
+                <div class="options-mystuff">
+                    <div class="heading">
+                        <i class="fa-solid fa-folder"></i>
+                        <div class="options-heading">MY STUFF</div>
+                    </div>
+                    <ul class="lists">
+                        <li><a href="">My coupons</a></li>
+                        <li><a href="">My reviews & Ratings</a></li>
+                        <li><a href="">All Notifications</a></li>
+                        <li><a href="">My wishlist</a></li>
+                    </ul>
+                </div>
+                <div class="options-logout">
+                    <div class="heading">
+                        <i class="fa-solid fa-power-off"></i>
+                        <div class="options-heading">LOGOUT</div>
+                    </div>
+                </div>
+                <div class="options-frequently_visited">
+                    <div class="row-heading">Frequently Visited:</div>
+                    <div class="row-contents"><span id="one">Track Order</span><span>Help Center</span></div>
+                </div>
+            </div>
+            <div class="notifications">
+                <div class="notifications-heading">All Notifications</div>
+                <div class="n1">
+                    <div class="n-img">
+                        <img src="/images/upi_img.webp" alt="notifi">
+                    </div>
+                    <div class="n-info">
+                        <div class="info-details">Sign-up for Flipkart UPI & get guaranteed reward on 1st Payment!</div>
+                        <div class="info-date">30 May, 2024</div>
+                    </div>
+                    <div class="n-details">
+                        <div class="details-content">
+                            More Details
+                            <i class="fa-solid fa-angle-right"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+
+    <footer>
+        <div class="foot-top">
+          <div class="foot-left">
+            <div class="about">
+              <h5>ABOUT</h5>
+              <ul>
+                <li><a href="">Contact Us</a></li>
+                <li><a href="">About Us</a></li>
+                <li><a href="">Careers</a></li>
+                <li><a href="">Flipkart Stories</a></li>
+                <li><a href="">Press</a></li>
+                <li><a href="">Corporate Information</a></li>
+               <li><i><a href="">Explore Plus</a></i></li>
+              </ul>
+            </div>
+            <div class="about">
+              <h5>GROUP COMPANIES</h5>
+              <ul>
+                <li><a href="https://www.myntra.com/">Myntra</a></li>
+                <li><a href="https://www.flipkartwholesale.com/">Flipkart Wholesale</a></li>
+                <li><a href="https://www.cleartrip.com/">Cleartrip</a></li>
+                <li><a href="https://www.shopsy.in/">Shopsy</a></li>
+              </ul>
+            </div>
+            <div class="about">
+              <h5>HELP</h5>
+              <ul>
+                <li><a href="">Payments</a></li>
+                <li><a href="">Shipping</a></li>
+                <li><a href="">Cancellation & Returns</a></li>
+                <li><a href="">FAQ</a></li>
+                <li><a href="">Report Infringement</a></li>
+              </ul>
+            </div>
+            <div class="about">
+              <div id="policy">
+                <h5>CONSUMER POLICY</h5>
+                <ul>
+                  <li><a href="">Cancellation & Returns</a></li>
+                  <li><a href="">Terms Of Use</a></li>
+                  <li><a href="">Security</a></li>
+                  <li><a href="">Privacy</a></li>
+                  <li><a href="">Sitemap</a></li>
+                  <li><a href="">Grievance Redressal</a></li>
+                  <li><a href="">EPR Compliance</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+    
+          <div class="foot-right">
+            <div class="part">
+              <div class="mail">
+                <h5>Mail Us:</h5>
+                <p>
+                  Flipkart Internet Private Limited,
+                  Buildings Alyssa, Begonia & Clove Embassy Tech Village,
+                  Outer Ring Road, Devarabeesanahalli Village, Bengaluru, 560103, Karnataka, India
+                </p>
+              </div>
+              
+              <div class="social">
+                <h5>Social</h5>
+                <div class="soc_icn">
+                  <div><a href="https://www.facebook.com/flipkart/"><i class="fa-brands fa-facebook"></i></a></div>
+                  <div><a href="https://twitter.com/Flipkart"><i class="fa-brands fa-x-twitter"></i></a></div>
+                  <div><a href="https://www.youtube.com/flipkart"><i class="fa-brands fa-youtube"></i></a></div>
+                </div>
+              </div>
+            </div>
+            <div class="office">
+              <h5>Registered Office Address:</h5>
+              <p>Flipkart Internet Private Limited,
+                Buildings Alyssa, Begonia & Clove Embassy Tech Village,
+                Outer Ring Road, Devarabeesanahalli Village, Bengaluru, 560103, Karnataka, India</p>
+              <p>CIN : U51109KA2012PTC066107</p>
+              <P>Telephone: <a href="tel:+044-45614700">044-45614700</a></P>
+            </div>
+          </div>
+        </div>
+        <div class="foot-down">
+    
+          <div>
+    
+            <ul>
+              <li><a href=""><i class="bi bi-briefcase-fill"></i> Become a seller</a></li>
+              <li><a href="./Gift Card/GiftCard.html"><i class="bi bi-gift-fill"></i> Gift Cards</a></li>
+              <li><a href=""><i class="bi bi-question-circle-fill"></i> Help Center</a></li>
+              <div>
+                <li>&copy;<span class="update_Cyear"></span> Flipkart.com</li>
+              </div>
+             </ul>
+          </div>
+    
+          
+          <div class="payment-icons">
+            <img src="./assets/images/visa.jpeg" alt="Visa">
+            <img src="./assets/images/mastercard.jpeg" alt="Mastercard">
+            <img src="./assets/images/rupay.png" alt="rupay">
+            <img src="./assets/images/discover.png" alt="discover">
+            <img src="./assets/images/emi.png" alt="emi">
+            <img src="./assets/images/net_banking.png" alt="net banking">
+            <img src="./assets/images/cod.png" alt="cash on delivery">
+          </div>
+        </div>
+      </footer>
+
+
+
+    <script>
+        $(function () {
+            $("#loader").load("./preloader.html");
+            $("#category-list").load("./categorylist.html");
+            $("#top-deals").load("./topdeals.html");
+        });
+
+        fetch('./Navabar.html')
+            .then(response => response.text())
+            .then(data => {
+                // Insert the retrieved HTML content into the navbar-container
+                document.getElementById('navbar-container').innerHTML = data;
+            })
+            .catch(error => console.error('Error fetching navbar:', error));
+    </script>
+</body>
+</html>
\ No newline at end of file