diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index 3d2db100..d59f985f 100644
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@@ -165,8 +165,7 @@ const App = () => {
         }
 
         const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
-        const prefersDark = colorSchemeMedia.matches;
-        setUITheme(prefersDark ? THEMES.dark : THEMES.light);
+        setUITheme(theme);
 
         if (colorSchemeMedia.addEventListener !== undefined) {
             colorSchemeMedia.addEventListener('change', (e) => {
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
index 014c8fd1..2cfe14ca 100644
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@@ -33,14 +33,18 @@ const Footer = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
-    const currentTheme = useSelector((state) => (state.dashboard ? state.dashboard.theme : 'auto'));
-    const profileName = useSelector((state) => (state.dashboard ? state.dashboard.name : ''));
+    const currentTheme = useSelector((state) => (
+        state.dashboard ? state.dashboard.theme : THEMES.auto
+    ));
+    const profileName = useSelector((state) => (
+        state.dashboard ? state.dashboard.name : ''
+    ));
     const isLoggedIn = profileName !== '';
-    const [currentThemeLocal, setCurrentThemeLocal] = useState('auto');
+    const [currentThemeLocal, setCurrentThemeLocal] = useState(THEMES.auto);
 
     useEffect(() => {
         if (!isLoggedIn) {
-            setUITheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? THEMES.dark : THEMES.light);
+            setUITheme(currentThemeLocal);
         }
     }, []);
 
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index d3c69054..3c1c606f 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -25,6 +25,7 @@ import {
     STANDARD_HTTPS_PORT,
     STANDARD_WEB_PORT,
     SPECIAL_FILTER_ID,
+    THEMES,
 } from './constants';
 
 /**
@@ -684,7 +685,14 @@ export const setHtmlLangAttr = (language) => {
  * @param theme
  */
 export const setUITheme = (theme) => {
-    document.body.dataset.theme = theme;
+    let currentTheme = theme;
+
+    if (currentTheme === THEMES.auto) {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        currentTheme = prefersDark ? THEMES.dark : THEMES.light;
+    }
+
+    document.body.dataset.theme = currentTheme;
 };
 
 /**
diff --git a/client/src/login/Login/index.js b/client/src/login/Login/index.js
index 1603d24d..3bca509a 100644
--- a/client/src/login/Login/index.js
+++ b/client/src/login/Login/index.js
@@ -8,6 +8,7 @@ import * as actionCreators from '../../actions/login';
 import logo from '../../components/ui/svg/logo.svg';
 import Toasts from '../../components/Toasts';
 import Footer from '../../components/ui/Footer';
+import Icons from '../../components/ui/Icons';
 import Form from './Form';
 
 import './Login.css';
@@ -69,6 +70,7 @@ class Login extends Component {
                 </div>
                 <Footer />
                 <Toasts />
+                <Icons />
             </div>
         );
     }