diff --git a/src/options.ts b/src/options.ts
index 7b956e6..dff70c3 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -65,10 +65,7 @@ window.addEventListener('DOMContentLoaded', async function () {
         languageSelect.addEventListener('change', function () {
             const selectedLanguage = this.value
 
-            chrome.storage.sync.set({ preferredLanguage: selectedLanguage }, function () {
-                // Reload the current page to apply the language change
-                location.reload()
-            })
+            chrome.storage.sync.set({ preferredLanguage: selectedLanguage })
         })
     }
 
diff --git a/src/util.ts b/src/util.ts
index ab28f8a..1e1fa27 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -150,6 +150,13 @@ export function createTranslationProxy(translationData: LangFile): TranslationPr
 
 // Function to localize HTML elements using translation data
 export function localizeElements(translationData: LangFile) {
+    chrome.storage.onChanged.addListener((changes, areaName) => {
+        if (areaName === 'sync' && 'preferredLanguage' in changes) {
+            // Reload the page when the preferredLanguage is changed
+            location.reload()
+        }
+    })
+
     document.querySelectorAll('[data-locale]').forEach((elem) => {
         const element = elem as HTMLElement
         const localeKey = element.getAttribute('data-locale')