diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a4b0d18..c8ee5f9 100644
--- a/index.html
+++ b/index.html
@@ -85,7 +85,7 @@ <h3>Coding Community of MSIT</h3>
           </div>
         </div>
       </div>
-      <img src="./public/background.png" alt="" class="background" />
+      <img id="bgimage" src="./public/background.png" alt="" class="background" />
     </div>
     <!-- image gallery -->
     <div class="page photo-gallery-page">
diff --git a/js/toggle-theme.js b/js/toggle-theme.js
index a910556..de9ada1 100644
--- a/js/toggle-theme.js
+++ b/js/toggle-theme.js
@@ -1,4 +1,13 @@
+const imageElement = document.getElementById("bgimage");
+let isImage1 = true;
+
 var theme=document.getElementById("change-theme");
 theme.onclick=function(){
     document.body.classList.toggle("light-theme");
+    if (isImage1) {
+        imageElement.src = "./public/lightbg.png"; 
+      } else {
+        imageElement.src = "./public/background.png"; 
+      }
+      isImage1 = !isImage1;
 }
\ No newline at end of file
diff --git a/public/lightbg.png b/public/lightbg.png
new file mode 100644
index 0000000..a793acf
Binary files /dev/null and b/public/lightbg.png differ