diff --git a/index.html b/index.html
index 028f3ce2..c14f36bf 100644
--- a/index.html
+++ b/index.html
@@ -199,10 +199,17 @@ <h2 class="h3 mb-3">Contribute to this Project</h2>
             html.dataset.bsTheme = theme;
             localStorage.setItem('theme', theme);
             const isLight = theme === 'light';
-            lightIcon.classList.toggle('d-none', !isLight);
-            darkIcon.classList.toggle('d-none', isLight);
+            // Show the icon for the theme that will be applied when the button is clicked.
+            // If the current theme is light, show the dark (moon) icon and vice-versa.
+            lightIcon.classList.toggle('d-none', isLight); // hide sun when currently light
+            darkIcon.classList.toggle('d-none', !isLight); // hide moon when currently dark
+            // Logos should reflect the current theme (no change)
             lightLogo.classList.toggle('d-none', !isLight);
             darkLogo.classList.toggle('d-none', isLight);
+            // Update accessible title/label to indicate the action (the next theme)
+            const nextTheme = isLight ? 'dark' : 'light';
+            themeSwitcher.title = `Switch to ${nextTheme.charAt(0).toUpperCase()}${nextTheme.slice(1)} theme`;
+            themeSwitcher.setAttribute('aria-label', themeSwitcher.title);
         }
         themeSwitcher.addEventListener('click', () => {
             const newTheme = html.dataset.bsTheme === 'dark' ? 'light' : 'dark';