diff --git a/client/src/actions/index.js b/client/src/actions/index.js
index 550c304f..478a3021 100644
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@@ -70,9 +70,18 @@ export const initSettings = (settingsList) => async (dispatch) => {
             safesearch,
         } = settingsList;
         const newSettingsList = {
-            safebrowsing: { ...safebrowsing, enabled: safebrowsingStatus.enabled },
-            parental: { ...parental, enabled: parentalStatus.enabled },
-            safesearch: { ...safesearch, enabled: safesearchStatus.enabled },
+            safebrowsing: {
+                ...safebrowsing,
+                enabled: safebrowsingStatus.enabled,
+            },
+            parental: {
+                ...parental,
+                enabled: parentalStatus.enabled,
+            },
+            safesearch: {
+                ...safesearch,
+                enabled: safesearchStatus.enabled,
+            },
         };
         dispatch(initSettingsSuccess({ settingsList: newSettingsList }));
     } catch (error) {
@@ -274,13 +283,14 @@ export const testUpstream = (config) => async (dispatch) => {
         values.upstream_dns = normalizeTextarea(values.upstream_dns);
 
         const upstreamResponse = await apiClient.testUpstream(values);
-        const testMessages = Object.keys(upstreamResponse).map((key) => {
-            const message = upstreamResponse[key];
-            if (message !== 'OK') {
-                dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) }));
-            }
-            return message;
-        });
+        const testMessages = Object.keys(upstreamResponse)
+            .map((key) => {
+                const message = upstreamResponse[key];
+                if (message !== 'OK') {
+                    dispatch(addErrorToast({ error: i18next.t('dns_test_not_ok_toast', { key }) }));
+                }
+                return message;
+            });
 
         if (testMessages.every((message) => message === 'OK')) {
             dispatch(addSuccessToast('dns_test_ok_toast'));
@@ -393,11 +403,17 @@ export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS');
 
 export const toggleDhcp = (values) => async (dispatch) => {
     dispatch(toggleDhcpRequest());
-    let config = { ...values, enabled: false };
+    let config = {
+        ...values,
+        enabled: false,
+    };
     let successMessage = 'disabled_dhcp';
 
     if (!values.enabled) {
-        config = { ...values, enabled: true };
+        config = {
+            ...values,
+            enabled: true,
+        };
         successMessage = 'enabled_dhcp';
         dispatch(findActiveDhcp(values.interface_name));
     }
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
index 2318c7a9..afbd3888 100644
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@@ -36,6 +36,7 @@ import i18n from '../../i18n';
 import Loading from '../ui/Loading';
 import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
 import Services from '../Filters/Services';
+import { setHtmlLangAttr } from '../../helpers/helpers';
 
 class App extends Component {
     componentDidMount() {
@@ -62,6 +63,7 @@ class App extends Component {
         if (!processing) {
             if (language) {
                 i18n.changeLanguage(language);
+                setHtmlLangAttr(language);
             }
         }
 
diff --git a/client/src/components/ui/Footer.js b/client/src/components/ui/Footer.js
index 14f37637..482573d6 100644
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 
 import { REPOSITORY, PRIVACY_POLICY_LINK } from '../../helpers/constants';
@@ -10,6 +10,7 @@ import i18n from '../../i18n';
 import Version from './Version';
 import './Footer.css';
 import './Select.css';
+import { setHtmlLangAttr } from '../../helpers/helpers';
 
 const linksData = [
     {
@@ -27,83 +28,85 @@ const linksData = [
     },
 ];
 
-class Footer extends Component {
-    getYear = () => {
+const Footer = (props) => {
+    const { t } = useTranslation();
+
+    const getYear = () => {
         const today = new Date();
         return today.getFullYear();
     };
 
-    changeLanguage = (event) => {
-        i18n.changeLanguage(event.target.value);
+    const changeLanguage = (event) => {
+        const { value } = event.target;
+        i18n.changeLanguage(value);
+        setHtmlLangAttr(value);
     };
 
-    renderCopyright = () => <div className="footer__column">
+    const renderCopyright = () => <div className="footer__column">
         <div className="footer__copyright">
-            <Trans>copyright</Trans> &copy; {this.getYear()}{' '}
+            {t('copyright')} &copy; {getYear()}{' '}
             <a target="_blank" rel="noopener noreferrer" href="https://adguard.com/">AdGuard</a>
         </div>
     </div>;
 
-    renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
-        key={name}
-        href={href}
-        className={classNames('footer__link', className)}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
-        <Trans>{name}</Trans>
-    </a>);
+    const renderLinks = (linksData) => linksData.map(({ name, href, className = '' }) => <a
+            key={name}
+            href={href}
+            className={classNames('footer__link', className)}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            {t(name)}
+        </a>);
 
 
-    render() {
-        const {
-            dnsVersion, processingVersion, getVersion, checkUpdateFlag,
-        } = this.props;
+    const {
+        dnsVersion, processingVersion, getVersion, checkUpdateFlag,
+    } = props;
 
-        return (
-            <Fragment>
-                <footer className="footer">
-                    <div className="container">
-                        <div className="footer__row">
-                            <div className="footer__column footer__column--links">
-                                {this.renderLinks(linksData)}
-                            </div>
-                            <div className="footer__column footer__column--language">
-                                <select
-                                    className="form-control select select--language"
-                                    value={i18n.language}
-                                    onChange={this.changeLanguage}
-                                >
-                                    {Object.keys(LANGUAGES)
-                                        .map((lang) => (
-                                            <option key={lang} value={lang}>
-                                                {LANGUAGES[lang]}
-                                            </option>
-                                        ))}
-                                </select>
-                            </div>
+    return (
+        <>
+            <footer className="footer">
+                <div className="container">
+                    <div className="footer__row">
+                        <div className="footer__column footer__column--links">
+                            {renderLinks(linksData)}
                         </div>
-                    </div>
-                </footer>
-                <div className="footer">
-                    <div className="container">
-                        <div className="footer__row">
-                            {this.renderCopyright()}
-                            <div className="footer__column footer__column--language">
-                                <Version
-                                    dnsVersion={dnsVersion}
-                                    processingVersion={processingVersion}
-                                    getVersion={getVersion}
-                                    checkUpdateFlag={checkUpdateFlag}
-                                />
-                            </div>
+                        <div className="footer__column footer__column--language">
+                            <select
+                                className="form-control select select--language"
+                                value={i18n.language}
+                                onChange={changeLanguage}
+                            >
+                                {Object.keys(LANGUAGES)
+                                    .map((lang) => (
+                                        <option key={lang} value={lang}>
+                                            {LANGUAGES[lang]}
+                                        </option>
+                                    ))}
+                            </select>
                         </div>
                     </div>
                 </div>
-            </Fragment>
-        );
-    }
-}
+            </footer>
+            <div className="footer">
+                <div className="container">
+                    <div className="footer__row">
+                        {renderCopyright()}
+                        <div className="footer__column footer__column--language">
+                            <Version
+                                dnsVersion={dnsVersion}
+                                processingVersion={processingVersion}
+                                getVersion={getVersion}
+                                checkUpdateFlag={checkUpdateFlag}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
 
 Footer.propTypes = {
     dnsVersion: PropTypes.string,
@@ -112,4 +115,4 @@ Footer.propTypes = {
     checkUpdateFlag: PropTypes.bool,
 };
 
-export default withTranslation()(Footer);
+export default Footer;
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 253a0506..8b3308c3 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -588,3 +588,10 @@ export const formatElapsedMs = (elapsedMs, t) => {
         .toFixed(2);
     return `${formattedElapsedMs} ${t('milliseconds_abbreviation')}`;
 };
+
+/**
+ * @param language {string}
+ */
+export const setHtmlLangAttr = (language) => {
+    window.document.documentElement.lang = language;
+};
diff --git a/client/src/i18n.js b/client/src/i18n.js
index 699e59dc..ee776147 100644
--- a/client/src/i18n.js
+++ b/client/src/i18n.js
@@ -33,6 +33,7 @@ import hr from './__locales/hr.json';
 import fa from './__locales/fa.json';
 import th from './__locales/th.json';
 import ro from './__locales/ro.json';
+import { setHtmlLangAttr } from './helpers/helpers';
 
 const resources = {
     en: {
@@ -143,10 +144,12 @@ i18n
             wait: true,
         },
         whitelist: availableLanguages,
-    }, () => {
+    },
+    () => {
         if (!availableLanguages.includes(i18n.language)) {
             i18n.changeLanguage(BASE_LOCALE);
         }
+        setHtmlLangAttr(i18n.language);
     });
 
 export default i18n;