diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html
index c8bf3f1..62e1fbf 100644
--- a/components/Navbar/Navbar.html
+++ b/components/Navbar/Navbar.html
@@ -41,6 +41,7 @@
         <div class="theme-switcher">
           <input type="checkbox" id="theme-toggle" />
           <label for="theme-toggle" class="switch"></label>
+          <img id="photo" src="/images/initialpng.png" alt="change mode" style="height: 40px; margin-left: 10px;">
         </div>
       </nav>
     </header>
diff --git a/components/Navbar/Navbar.js b/components/Navbar/Navbar.js
index 8edced4..9192e74 100644
--- a/components/Navbar/Navbar.js
+++ b/components/Navbar/Navbar.js
@@ -13,13 +13,20 @@ const toggleDarkMode = () => {
     const body = document.body;
     body.classList.toggle('darkmode');
 
+    //setting photopaths for the images
+    const photoPaths = ["/images/sun.png", "/images/moon.png"];
+    const photoElement = document.getElementById("photo");
+
     // Update the theme preference in local storage
     if (body.classList.contains('darkmode')) {
         icon.checked = true; // Set checkbox to checked
         localStorage.setItem('theme', 'dark');
+        photoElement.src = photoPaths[1]; //set moon for night mode
+
     } else {
         icon.checked = false; // Set checkbox to unchecked
         localStorage.setItem('theme', 'light');
+        photoElement.src = photoPaths[0];  //set sun for day
     }
 };
 
diff --git a/images/initialpng.png b/images/initialpng.png
new file mode 100644
index 0000000..48d7c87
Binary files /dev/null and b/images/initialpng.png differ
diff --git a/images/moon.png b/images/moon.png
new file mode 100644
index 0000000..387fb70
Binary files /dev/null and b/images/moon.png differ
diff --git a/images/sun.png b/images/sun.png
new file mode 100644
index 0000000..36237c2
Binary files /dev/null and b/images/sun.png differ