diff --git a/images/moon.png b/images/moon.png
new file mode 100644
index 0000000..da8d1b1
Binary files /dev/null and b/images/moon.png differ
diff --git a/images/sun (1).png b/images/sun (1).png
new file mode 100644
index 0000000..647eef9
Binary files /dev/null and b/images/sun (1).png differ
diff --git a/index.html b/index.html
index bc19121..462c19b 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,8 @@
     <!-- Fav Icon -->
     <link rel="icon" href="images/logo.png" type="image/gif" sizes="16x16">
     <!-- Bootstrap CSS -->
+    <!-- <script src="switch.js"></script> -->
+    
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
         integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
     <!-- Main css -->
@@ -40,14 +42,15 @@
     <main class="container">
         <!-- Header start -->
         <header>
-            <nav class="navbar navbar-expand-lg navbar-light fill">
+            <nav class="navbar navbar-expand-lg navbar-light fill" >
                 <a class="navbar-brand" href="/index.html"><img src="images/logo.png" alt=""></a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse"
                     data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                     aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
+                   
                 </button>
-
+                
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item active">
@@ -71,6 +74,7 @@
                         <li class="nav-item active">
                             <a class="nav-link" href="#contact">Contact Us</a>
                         </li>
+                        <img src="/images/moon.png" id="icon">
                     </ul>
                 </div>
             </nav>
@@ -90,8 +94,8 @@
                     <div class="carousel-item active">
                         <div class="row">
                             <div class="col-md-6 mack">
-                                <h1>Iphone 15 Pro</h1>
-                                <p>Both models are 0.31 inches (7.80 mm) thick, with the iPhone 15 weighing 6.02
+                                <h1 class="me">Iphone 15 Pro</h1>
+                                <p class="for">Both models are 0.31 inches (7.80 mm) thick, with the iPhone 15 weighing 6.02
                                     ounces (171 grams) and the iPhone 15 Plus weighing 7.09 ounces (201 grams).
                                     The iPhone 15 models feature an all-glass front and a colorful, matte glass
                                     back that is framed by a color-matched aerospace-grade aluminum frame.</p>
@@ -113,8 +117,8 @@ <h1>Iphone 15 Pro</h1>
                     <div class="carousel-item">
                         <div class="row">
                             <div class="col-md-6 mack">
-                                <h2>Alexa</h2>
-                                <p>Alexa is the intelligent cloud-based voice AI that you can talk to on [your product].
+                                <h2 class="me">Alexa</h2>
+                                <p class="for">Alexa is the intelligent cloud-based voice AI that you can talk to on [your product].
                                     Speak to Alexa through [your product] to play music, hear the news, check weather,
                                     control smart home devices, and more.</p>
                                 <a class="mack-btn">Buy Now
@@ -135,8 +139,8 @@ <h2>Alexa</h2>
                     <div class="carousel-item">
                         <div class="row">
                             <div class="col-md-6 mack">
-                                <h2>Apple Smartwatch</h2>
-                                <p>Apple Watch is a wearable smartwatch that allows users to accomplish a variety of
+                                <h2 class="me">Apple Smartwatch</h2>
+                                <p class="for">Apple Watch is a wearable smartwatch that allows users to accomplish a variety of
                                     tasks, including making phone calls, sending text messages and reading email.</p>
                                 <a class="mack-btn">Buy Now
                                     <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right"
@@ -166,7 +170,7 @@ <h2>Apple Smartwatch</h2>
                     <div class="row">
                         <div class="col-md-6">
 
-                            <h2>SmartPhones</h2>
+                            <h2 class="fo">SmartPhones</h2>
 
                         </div>
                         <div class="col-md-6 text-right">
@@ -247,7 +251,7 @@ <h5><b>$150</b></h5>
                     <div class="row">
                         <div class="col-md-6">
 
-                            <h2>Men Tshirts</h2>
+                            <h2 class="fo">Men Tshirts</h2>
 
                         </div>
                         <div class="col-md-6 text-right">
@@ -331,7 +335,7 @@ <h5><b>$30</b></h5>
                     <div class="row">
                         <div class="col-md-6">
 
-                            <h2>Woman Jackets</h2>
+                            <h2 class="fo">Woman Jackets</h2>
 
                         </div>
                         <div class="col-md-6 text-right">
@@ -409,7 +413,7 @@ <h5><b>$20</b></h5>
                     <div class="row">
                         <div class="col-md-6">
 
-                            <h2>Kids Section</h2>
+                            <h2 class="fo">Kids Section</h2>
 
                         </div>
                         <div class="col-md-6 text-right">
@@ -487,7 +491,7 @@ <h5><b>$20</b></h5>
                 <div class="laptop-header">
                     <div class="row">
                         <div class="col-md-6">
-                            <h2>About Us</h2>
+                            <h2 class="fo">About Us</h2>
                         </div>
                     </div>
                 </div>
@@ -518,7 +522,7 @@ <h4 class="card-title"><b>Who we are</b></h4>
             <div class="container">
                 <div class="row text-center">
                     <div class="col-md-12">
-                        <h2>Categories</h2>
+                        <h2 class="fo">Categories</h2>
                         <hr>
                     </div>
                 </div>
@@ -553,7 +557,7 @@ <h2>Shoes</h2>
                 <div class="laptop-header">
                     <div class="row">
                         <div class="col-md-6">
-                            <h2>Contact us</h2>
+                            <h2 class="fo">Contact us</h2>
                         </div>
                     </div>
                 </div>
diff --git a/script.js b/script.js
index 94b0e66..1a0a2ac 100644
--- a/script.js
+++ b/script.js
@@ -3,3 +3,24 @@ function topFunction() {
     document.body.scrollTop = 0; // For Safari
     document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
+  $(document).ready(function(){
+    $(window).scroll(function(){
+      var scroll = $(window).scrollTop();
+      if (scroll > 100) {
+        $(".navbar").removeClass('rgb(255, 239, 239)').css( "backdrop-filter","blur(6px)");
+      }else{
+        $(".navbar").css("background" , "").addClass('rgb(255, 239, 239)');    
+      }
+    });
+  });
+ // function to Toggle Light and Dark Mode 
+var icon = document.getElementById("icon");
+icon.onclick = function(){
+  document.body.classList.toggle("dark-theme");
+  if(document.body.classList.contains("dark-theme")){
+    icon.src = "/images/sun (1).png";
+  }
+  else{
+    icon.src = "/images/moon.png";
+  }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 713dd91..8cd74f1 100644
--- a/style.css
+++ b/style.css
@@ -3,14 +3,16 @@
 html {
   scroll-behavior: smooth;
 }
-
+:root{
+  --primary-color:rgb(255, 239, 239);
+  --secondary-color:black;
+}
 body {
   font-family: "Abel", sans-serif;
   font-size: large;
-  background-color: rgb(255, 239, 239);
+  background-color: var(--primary-color);
 }
 
-
 h2{
     font-size: 2.5rem;
 }
@@ -25,7 +27,21 @@ p {
   cursor: pointer;
 }
 
-
+.dark-theme{
+ --primary-color:rgb(38, 37, 37);
+ --secondary-color:white;
+}
+#icon{
+  width:20px;
+  height:20px;
+  cursor:pointer;
+  margin-top:10px;
+}
+#smartphone, #MenTshirt , #WomanMenTshirt,
+#Kids, #categories, #About ,#contact {.container .fo{
+  color: var(--secondary-color);
+}
+}
 /* Header nav start  */
 
 a.nav-link {
@@ -39,7 +55,12 @@ a.nav-link {
 nav.fill ul li a.nav-link {
   transition: all 0.5s;
 }
-
+header{
+  position:sticky;
+  top:0px;
+  z-index:20;
+  /* style="background-color: #ffffffcc;" */
+}
 nav.fill ul li a.nav-link:after {
   text-align: left;
   content: ".";
@@ -76,7 +97,12 @@ nav.fill ul li a.nav-link:after {
 }
 
 /* End  */
-
+#mack-book .row .me{
+    color:var(--secondary-color);
+}
+#mack-book .row .for{
+  color:var(--secondary-color);
+}
 /* section Mack book start  */
 
 section#mack-book {
@@ -236,6 +262,7 @@ a.laptop-btn:hover svg.bi.bi-arrow-right {
 
 hr {
   width: 130px;
+  
   background-image: linear-gradient(145deg, #f1c40f, #e67e22);
   height: 10px;
   border: none;
@@ -243,6 +270,7 @@ hr {
   margin-bottom: 50px;
 }
 .categories-card {
+  background-color:rgb(255, 239, 239);
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);;
   padding: 5%;
   transition: ease-in-out 0.2s;