diff --git a/Css-files/navbar.css b/Css-files/navbar.css
index be83c9cb..c583d83c 100644
--- a/Css-files/navbar.css
+++ b/Css-files/navbar.css
@@ -260,5 +260,6 @@ body {
 #theme-toggle-icon {
   width: 30px;
   cursor: pointer;
+  background-color: #000;
 }
 
diff --git a/Html-files/RateUs.html b/Html-files/RateUs.html
index d5711f25..6d56f511 100644
--- a/Html-files/RateUs.html
+++ b/Html-files/RateUs.html
@@ -200,6 +200,24 @@ <h2 class="rateus-heading">Rate Us</h2>
     </script>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 
+    <script >
+        //Themechange icon toggling behaviour
+        let themeToggleIcon = document.getElementById("theme-toggle-icon");
+        let themeToggleLogo = document.getElementById("theme-toggle-logo");
+        themeToggleIcon.addEventListener("click", function () {
+          document.body.classList.toggle("dark-theme");
+          document.body.classList.toggle(":root")
+          if (document.body.classList.contains("dark-theme")) {
+            themeToggleIcon.src = "../Images/navbar/sun.png";
+            themeToggleLogo.src = "Images/logo/Logo-Dark.png";
+          } else {
+            themeToggleIcon.src = "../Images/navbar/moon.png";
+            themeToggleLogo.src="Images/logo/Logo-Light.png";
+          }
+        });
+
+    </script>
+
     
 </body>
 </html>
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 03a8e5ba..dd1b626a 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "Food-ordering-website",
-  "lockfileVersion": 2,
+  "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "node_modules/aos": {