diff --git a/package.json b/package.json
index b3436b2..6501303 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "v8-compile-cache": "^2.3.0"
   },
   "devDependencies": {
-    "electron": "^22.3.2",
+    "electron": "^21.4.2",
     "electron-builder": "^23.6.0",
     "nodemon": "^2.0.21"
   },
diff --git a/src/main.js b/src/main.js
index 7b891e3..60f8980 100644
--- a/src/main.js
+++ b/src/main.js
@@ -89,6 +89,11 @@
 
     ipcMain?.on('closed', () => win?.close());
 
+    // for changing light/dark mode on settings
+    ipcMain?.on('background', (_, dark) => {
+        dark ? win?.setBackgroundColor('#2e3338') : win?.setBackgroundColor('#f4f5fb');
+    });
+
     ipcMain?.on('minimizable', () => {
 
         if (win?.isMaximized()) win?.unmaximize();
diff --git a/src/preload/preload.js b/src/preload/preload.js
index 6cb9c08..8802ecc 100644
--- a/src/preload/preload.js
+++ b/src/preload/preload.js
@@ -13,7 +13,7 @@ window.addEventListener('DOMContentLoaded', async (event) => {
   document.getElementById('closed').addEventListener('click', e => ipcRenderer.send('closed'));
   document.getElementById('minimizable').addEventListener('click', e => ipcRenderer.send('minimizable'));
   document.getElementById('minimize').addEventListener('click', e => ipcRenderer.send('minimize'));
-
+    
   /* DARK/LIGHT MODE */
   const settings = fs.readJsonSync(path.join(App_Path, './data/settings.json'));
 
@@ -393,7 +393,7 @@ window.addEventListener('DOMContentLoaded', async (event) => {
         icon_info.src = '../public/icon/dark/info.png';
 
         let settingsPage = require('./preload_modules/settings.js');
-        await settingsPage(fs, path, App_Path, settings);
+        await settingsPage(fs, path, App_Path, settings, ipcRenderer);
         break;
 
       case "info.html":
@@ -495,7 +495,7 @@ window.addEventListener('DOMContentLoaded', async (event) => {
       case "settings.html":
         variables_css.href = '../public/css/var.css';
         let settingsPage = require('./preload_modules/settings.js');
-        await settingsPage(fs, path, App_Path, settings);
+        await settingsPage(fs, path, App_Path, settings, ipcRenderer);
         break;
 
       case "info.html":
diff --git a/src/preload/preload_modules/settings.js b/src/preload/preload_modules/settings.js
index bd9474c..3e4aa85 100644
--- a/src/preload/preload_modules/settings.js
+++ b/src/preload/preload_modules/settings.js
@@ -1,4 +1,4 @@
-module.exports = function settings(fs, path, App_Path, settings) {
+module.exports = function settings(fs, path, App_Path, settings, ipcRenderer) {
 
     let location = fs.readJsonSync(path.join(App_Path, './data/location.json'));
 
@@ -41,7 +41,7 @@ module.exports = function settings(fs, path, App_Path, settings) {
     function handleVolumeRange(volume) {
         volumeValue.innerHTML = volumeRange.value;
     }
-    
+
     let adhanVolumeRange = document.getElementById('adhan_volume');
     let adhanVolumeValue = document.getElementById('adhan_volume_value');
     adhanVolumeRange.addEventListener('input', adhanHandleVolumeRange)
@@ -57,6 +57,9 @@ module.exports = function settings(fs, path, App_Path, settings) {
 
     save.addEventListener('click', e => {
 
+        dark_mode?.checked ? ipcRenderer.send('background', true)
+            : ipcRenderer.send('background', false)
+
         if (latitude.value !== '') {
 
             location.lat = Number(latitude.value)
@@ -99,9 +102,13 @@ module.exports = function settings(fs, path, App_Path, settings) {
             adhanVolume: adhanVolumeRange.value / 100
         }, { spaces: '\t' });
 
-    
+
         alrt.style.display = 'inline-flex';
-        setTimeout(() => { alrt.style.display = 'none'; }, 1000);
+        setTimeout(() => {
+            alrt.style.display = 'none'; 
+            window.location.href = "./settings.html";
+        }, 1000);
+
     })
 
 }
\ No newline at end of file