Merge pull request #99 in DNS/adguard-dns from feature/442 to master

* commit '63f20bc3979c61f71afcad1e9c7bbcdbe783a98e': (27 commits) Request language from server i18n -— fiz broken change_language APO method Allow querying and changeing i18n language via API. Update readme and translations Add ru locale Move translations script to scripts folder Fix footer layout Add oneskyapp scripts for download and upload translations Fix minor mistake Translate Copyright text on footer Fix wrong translate key Fix wrong check update button text Convert i18n resource to key type Translate missing toast message when toggle query log feature create locales/en.js and change to key type. Next may be use auto load translate resource Tranlsate missing toast message add missing translate Update missing trasnlate Fix eslint Add translate PopoverFilter ...
2024-12-14 18:51:34 +03:00 · 2018-11-22 18:46:21 +03:00 · 2018-11-22 18:46:21 +03:00 · cdd2e8ecb4
commit cdd2e8ecb4
parent 4e27ad0c8e 63f20bc397
52 changed files with 1632 additions and 193 deletions
--- a/.gitignore
+++ b/.gitignore
@ -12,6 +12,8 @@ debug
 /dnsfilter.txt
 /querylog.json
 /querylog.json.1
+/scripts/translations/node_modules
+/scripts/translations/oneskyapp.json

 # Test output
 dnsfilter/dnsfilter.TestLotsOfRules*.pprof
--- a/README.md
+++ b/README.md
@ -141,10 +141,44 @@ cd AdGuardHome
 make
 ```

+### How to update translations
+
+Before updating translations you need to install dependencies:
+```
+cd scripts/translations
+npm install
+```
+
+Create file `oneskyapp.json` in `scripts/translations` folder.
+
+Example of `oneskyapp.json`
+```
+{
+    "url": "https://platform.api.onesky.io/1/projects/",
+    "projectId": <PROJECT ID>,
+    "apiKey": <API KEY>,
+    "secretKey": <SECRET KEY>
+}
+```
+
+#### Upload translations
+```
+node upload.js
+```
+
+#### Download translations
+```
+node download.js
+```
+
 ## Contributing

 You are welcome to fork this repository, make your changes and submit a pull request — https://github.com/AdguardTeam/AdGuardHome/pulls

+If you want to help with AdGuard Home translations, please learn more about translating AdGuard products here: https://kb.adguard.com/en/general/adguard-translations
+
+Here is a direct link to AdGuard Home project: http://translate.adguard.com/collaboration/project?id=153384
+
 ## Reporting issues

 If you run into any problem or have a suggestion, head to [this page](https://github.com/AdguardTeam/AdGuardHome/issues) and click on the `New issue` button.
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -94,6 +94,21 @@
      "integrity": "sha1-J87C30Cd9gr1gnDtj2qlVAnqhvY=",
      "dev": true
    },
+    "@babel/runtime": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.5.tgz",
+      "integrity": "sha512-xKnPpXG/pvK1B90JkwwxSGii90rQGKtzcMt2gI5G6+M0REXaq6rOHsGC2ay6/d0Uje7zzvSzjEzfR3ENhFlrfA==",
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
    "@babel/template": {
      "version": "7.0.0-beta.44",
      "resolved": "http://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz",
@ -3111,6 +3126,15 @@
        "sha.js": "^2.4.8"
      }
    },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
    "cross-spawn": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@ -6230,6 +6254,11 @@
      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
      "dev": true
    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
    "handle-thing": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
@ -6543,6 +6572,14 @@
        "uglify-js": "3.4.x"
      }
    },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "requires": {
+        "void-elements": "^2.0.1"
+      }
+    },
    "html-tags": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
@ -6700,6 +6737,16 @@
      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
      "dev": true
    },
+    "i18next": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-12.0.0.tgz",
+      "integrity": "sha512-Zy/nFpmBZxgmi6k9HkHbf+MwvAwiY5BDzNjNfvyLPKyalc2YBwwZtblESDlTKLDO8XSv23qYRY2uZcADDlRSjQ=="
+    },
+    "i18next-browser-languagedetector": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-2.2.3.tgz",
+      "integrity": "sha512-sJZ2n9Vgax0vGer23hJMwyO3FRO7P0dq2DXZPXWE329g3snfJUcw+S24Mp3lqJaxL/0McDu4BD75ds6pzIfhhw=="
+    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -12850,6 +12897,32 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-i18next": {
+      "version": "8.3.8",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-8.3.8.tgz",
+      "integrity": "sha512-ZcSpakSBcDxPJkl34fv/SI0TaoTDvVDrk4WpDF+WElorine+dHUjGMAA6RG5Km2KcLNW1t4GLunHprgKiqDrSw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "0.2.3",
+        "hoist-non-react-statics": "3.0.1",
+        "html-parse-stringify2": "2.0.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
+          "integrity": "sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==",
+          "requires": {
+            "react-is": "^16.3.2"
+          }
+        }
+      }
+    },
+    "react-is": {
+      "version": "16.6.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
+      "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA=="
+    },
    "react-lifecycles-compat": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -15599,6 +15672,11 @@
        "indexof": "0.0.1"
      }
    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+    },
    "walker": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -14,12 +14,15 @@
    "classnames": "^2.2.6",
    "date-fns": "^1.29.0",
    "file-saver": "^1.3.8",
+    "i18next": "^12.0.0",
+    "i18next-browser-languagedetector": "^2.2.3",
    "lodash": "^4.17.10",
    "nanoid": "^1.2.3",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-click-outside": "^3.0.1",
    "react-dom": "^16.4.0",
+    "react-i18next": "^8.2.0",
    "react-modal": "^3.4.5",
    "react-redux": "^5.0.7",
    "react-redux-loading-bar": "^4.0.7",
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@ -0,0 +1,124 @@
+{
+    "back": "Back",
+    "dashboard": "Dashboard",
+    "settings": "Settings",
+    "filters": "Filters",
+    "query_log": "Query Log",
+    "faq": "FAQ",
+    "version": "version",
+    "address": "address",
+    "on": "ON",
+    "off": "OFF",
+    "copyright": "Copyright",
+    "homepage": "Homepage",
+    "report_an_issue": "Report an issue",
+    "enable_protection": "Enable protection",
+    "enabled_protection": "Enabled protection",
+    "disable_protection": "Disable protection",
+    "disabled_protection": "Disabled protection",
+    "refresh_statics": "Refresh statistics",
+    "dns_query": "DNS Queries",
+    "blocked_by": "Blocked by",
+    "stats_malware_phishing": "Blocked malware\/phishing",
+    "stats_adult": "Blocked adult websites",
+    "stats_query_domain": "Top queried domains",
+    "for_last_24_hours": "for the last 24 hours",
+    "no_domains_found": "No domains found",
+    "requests_count": "Requests count",
+    "top_blocked_domains": "Top blocked domains",
+    "top_clients": "Top clients",
+    "no_clients_found": "No clients found",
+    "general_statistics": "General statistics",
+    "number_of_dns_query_24_hours": "A number of DNS quieries processed for the last 24 hours",
+    "number_of_dns_query_blocked_24_hours": "A number of DNS requests blocked by adblock filters and hosts blocklists",
+    "number_of_dns_query_blocked_24_hours_by_sec": "A number of DNS requests blocked by the AdGuard browsing security module",
+    "number_of_dns_query_blocked_24_hours_adult": "A number of adult websites blocked",
+    "enforced_save_search": "Enforced safe search",
+    "number_of_dns_query_to_safe_search": "A number of DNS requests to search engines for which Safe Search was enforced",
+    "average_processing_time": "Average processing time",
+    "average_processing_time_hint": "Average time in milliseconds on processing a DNS request",
+    "block_domain_use_filters_and_hosts": "Block domains using filters and hosts files",
+    "filters_block_toggle_hint": "You can setup blocking rules in the <a href='#filters'>Filters<\/a> settings.",
+    "use_adguard_browsing_sec": "Use AdGuard browsing security web service",
+    "use_adguard_browsing_sec_hint": "AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.",
+    "use_adguard_parental": "Use AdGuard parental control web service",
+    "use_adguard_parental_hint": "AdGuard Home will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.",
+    "enforce_safe_search": "Enforce safe search",
+    "enforce_save_search_hint": "AdGuard Home can enforce safe search in the following search engines: Google, Youtube, Bing, and Yandex.",
+    "no_servers_specified": "No servers specified",
+    "no_settings": "No settings",
+    "general_settings": "General settings",
+    "upstream_dns": "Upstream DNS servers",
+    "upstream_dns_hint": "If you keep this field empty, AdGuard Home will use <a href='https:\/\/1.1.1.1\/' target='_blank'>Cloudflare DNS<\/a> as an upstream. Use tls:\/\/ prefix for DNS over TLS servers.",
+    "test_upstream_btn": "Test upstreams",
+    "apply_btn": "Apply",
+    "disabled_filtering_toast": "Disabled filtering",
+    "enabled_filtering_toast": "Enabled filtering",
+    "disabled_safe_browsing_toast": "Disabled safebrowsing",
+    "enabled_safe_browsing_toast": "Enabled safebrowsing",
+    "disabled_parental_toast": "Disabled parental control",
+    "enabled_parental_toast": "Enabled parental control",
+    "disabled_safe_search_toast": "Disabled safe search",
+    "enabled_save_search_toast": "Enabled safe search",
+    "enabled_table_header": "Enabled",
+    "name_table_header": "Name",
+    "filter_url_table_header": "Filter URL",
+    "rules_count_table_header": "Rules count",
+    "last_time_updated_table_header": "Last time updated",
+    "actions_table_header": "Actions",
+    "delete_table_action": "Delete",
+    "filters_and_hosts": "Filters and hosts blocklists",
+    "filters_and_hosts_hint": "AdGuard Home understands basic adblock rules and hosts files syntax.",
+    "no_filters_added": "No filters added",
+    "add_filter_btn": "Add filter",
+    "cancel_btn": "Cancel",
+    "enter_name_hint": "Enter name",
+    "enter_url_hint": "Enter URL",
+    "check_updates_btn": "Check updates",
+    "new_filter_btn": "New filter subscription",
+    "enter_valid_filter_url": "Enter a valid URL to a filter subscription or a hosts file.",
+    "custom_filter_rules": "Custom filtering rules",
+    "custom_filter_rules_hint": "Enter one rule on a line. You can use either adblock rules or hosts files syntax.",
+    "examples_title": "Examples",
+    "example_meaning_filter_block": "block access to the example.org domain and all its subdomains",
+    "example_meaning_filter_whitelist": "unblock access to the example.org domain and all its subdomains",
+    "example_meaning_host_block": "AdGuard Home will now return 127.0.0.1 address for the example.org domain (but not its subdomains).",
+    "example_comment": "! Here goes a comment",
+    "example_comment_meaning": "just a comment",
+    "example_comment_hash": "# Also a comment",
+    "all_filters_up_to_date_toast": "All filters are already up-to-date",
+    "updated_upstream_dns_toast": "Updated the upstream DNS servers",
+    "dns_test_ok_toast": "Specified DNS servers are working correctly",
+    "dns_test_not_ok_toast": "Server \"{{key}}\": could not be used, please check that you've written it correctly",
+    "unblock_btn": "Unblock",
+    "block_btn": "Block",
+    "time_table_header": "Time",
+    "domain_name_table_header": "Domain name",
+    "type_table_header": "Type",
+    "response_table_header": "Response",
+    "empty_response_status": "Empty",
+    "show_all_filter_type": "Show all",
+    "show_filtered_type": "Show filtered",
+    "no_logs_found": "No logs found",
+    "disabled_log_btn": "Disable log",
+    "download_log_file_btn": "Download log file",
+    "refresh_btn": "Refresh",
+    "enabled_log_btn": "Enable log",
+    "last_dns_queries": "Last 5000 DNS queries",
+    "previous_btn": "Previous",
+    "next_btn": "Next",
+    "loading_table_status": "Loading...",
+    "page_table_footer_text": "Page",
+    "of_table_footer_text": "of",
+    "rows_table_footer_text": "rows",
+    "updated_custom_filtering_toast": "Updated the custom filtering rules",
+    "rule_removed_from_custom_filtering_toast": "Rule removed from the custom filtering rules",
+    "rule_added_to_custom_filtering_toast": "Rule added to the custom filtering rules",
+    "query_log_disabled_toast": "Query log disabled",
+    "query_log_enabled_toast": "Query log enabled",
+    "source_label": "Source",
+    "found_in_known_domain_db": "Found in the known domains database.",
+    "category_label": "Category",
+    "rule_label": "Rule",
+    "filter_label": "Filter"
+}
--- a/client/src/__locales/ru.json
+++ b/client/src/__locales/ru.json
@ -0,0 +1,124 @@
+{
+    "back": "\u041d\u0430\u0437\u0430\u0434",
+    "dashboard": "\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f",
+    "settings": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438",
+    "filters": "\u0424\u0438\u043b\u044c\u0442\u0440\u044b",
+    "query_log": "\u0416\u0443\u0440\u043d\u0430\u043b",
+    "faq": "FAQ",
+    "version": "\u0432\u0435\u0440\u0441\u0438\u044f",
+    "address": "\u0430\u0434\u0440\u0435\u0441",
+    "on": "\u0412\u043a\u043b",
+    "off": "\u0412\u044b\u043a\u043b",
+    "copyright": "\u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b",
+    "homepage": "\u0413\u043b\u0430\u0432\u043d\u0430\u044f",
+    "report_an_issue": "\u0421\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435",
+    "enable_protection": "\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0443",
+    "enabled_protection": "\u0417\u0430\u0449\u0438\u0442\u0430 \u0432\u043a\u043b.",
+    "disable_protection": "\u041e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0443",
+    "disabled_protection": "\u0417\u0430\u0449\u0438\u0442\u0430 \u0432\u044b\u043a\u043b.",
+    "refresh_statics": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443",
+    "dns_query": "DNS-\u0437\u0430\u043f\u0440\u043e\u0441\u044b",
+    "blocked_by": "\u0417\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043e ",
+    "stats_malware_phishing": "\u0417\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u044b\u0435 \u0438 \u0444\u0438\u0448\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0441\u0430\u0439\u0442\u044b",
+    "stats_adult": "\u0417\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \"\u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0435\" \u0441\u0430\u0439\u0442\u044b",
+    "stats_query_domain": "\u0427\u0430\u0441\u0442\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0434\u043e\u043c\u0435\u043d\u044b",
+    "for_last_24_hours": "\u0437\u0430 24 \u0447\u0430\u0441\u0430",
+    "no_domains_found": "\u0414\u043e\u043c\u0435\u043d\u044b \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b",
+    "requests_count": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432",
+    "top_blocked_domains": "\u0427\u0430\u0441\u0442\u043e \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0434\u043e\u043c\u0435\u043d\u044b",
+    "top_clients": "\u0427\u0430\u0441\u0442\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u044b",
+    "no_clients_found": "\u041a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e",
+    "general_statistics": "\u041e\u0431\u0449\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430",
+    "number_of_dns_query_24_hours": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e DNS-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0437\u0430 24 \u0447\u0430\u0441\u0430",
+    "number_of_dns_query_blocked_24_hours": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e DNS-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 \u0438 \u0431\u043b\u043e\u043a-\u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438",
+    "number_of_dns_query_blocked_24_hours_by_sec": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e DNS-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u043c \u0410\u043d\u0442\u0438\u0444\u0438\u0448\u0438\u043d\u0433\u0430 AdGuard",
+    "number_of_dns_query_blocked_24_hours_adult": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \"\u0441\u0430\u0439\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445\"",
+    "enforced_save_search": "\u0423\u0441\u0438\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a",
+    "number_of_dns_query_to_safe_search": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 DNS \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a",
+    "average_processing_time": "\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430",
+    "average_processing_time_hint": "\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 DNS  \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445",
+    "block_domain_use_filters_and_hosts": "\u0411\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043c\u0435\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0445\u043e\u0441\u0442\u043e\u0432",
+    "filters_block_toggle_hint": "\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0432 <a href='#filters'> \"\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0445\"<\/a>.",
+    "use_adguard_browsing_sec": "\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e AdGuard",
+    "use_adguard_browsing_sec_hint": "AdGuard Home \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442, \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u043b\u0438 \u0434\u043e\u043c\u0435\u043d \u0432 \u0432\u0435\u0431-\u0441\u043b\u0443\u0436\u0431\u0443 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c API, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443: \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u0438\u043c\u0435\u043d\u0438 \u0434\u043e\u043c\u0435\u043d\u0430 SHA256.",
+    "use_adguard_parental": "\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f AdGuard ",
+    "use_adguard_parental_hint": "AdGuard Home \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438 \u0434\u043e\u043c\u0435\u043d \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b 18+. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 API \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u0438 \u0432\u0435\u0431-\u0441\u043b\u0443\u0436\u0431\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.",
+    "enforce_safe_search": "\u0423\u0441\u0438\u043b\u0438\u0442\u044c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a",
+    "enforce_save_search_hint": "AdGuard Home \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445: Google, Youtube, Bing \u0438 Yandex.",
+    "no_servers_specified": "\u041d\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432",
+    "no_settings": "\u041d\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a",
+    "general_settings": "\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438",
+    "upstream_dns": "Upstream DNS-\u0441\u0435\u0440\u0432\u0435\u0440\u044b",
+    "upstream_dns_hint": "\u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u044b\u043c, \u0442\u043e AdGuard Home \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442  <a href='https:\/\/1.1.1.1\/' target='_blank'>Cloudflare DNS<\/a> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 upstream. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 tls:\/\/ \u0434\u043b\u044f DNS \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u044b TLS.",
+    "test_upstream_btn": "\u0422\u0435\u0441\u0442 upstream \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432",
+    "apply_btn": "\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c",
+    "disabled_filtering_toast": "\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u0432\u044b\u043a\u043b.",
+    "enabled_filtering_toast": "\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u0432\u043a\u043b.",
+    "disabled_safe_browsing_toast": "\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u044b\u043a\u043b.",
+    "enabled_safe_browsing_toast": "\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432\u043a\u043b.",
+    "disabled_parental_toast": "\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0432\u044b\u043a\u043b.",
+    "enabled_parental_toast": "\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0432\u043a\u043b.",
+    "disabled_safe_search_toast": "\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u0432\u044b\u043a\u043b.",
+    "enabled_save_search_toast": "\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u0432\u043a\u043b.",
+    "enabled_table_header": "\u0412\u043a\u043b.",
+    "name_table_header": "\u0418\u043c\u044f",
+    "filter_url_table_header": "URL \u0444\u0438\u043b\u044c\u0442\u0440\u0430",
+    "rules_count_table_header": "\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b:",
+    "last_time_updated_table_header": "\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435",
+    "actions_table_header": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f",
+    "delete_table_action": "\u0423\u0434\u0430\u043b\u0438\u0442\u044c",
+    "filters_and_hosts": "\u0424\u0438\u043b\u044c\u0442\u0440\u044b \u0438 \u0447\u0435\u0440\u043d\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438 hosts",
+    "filters_and_hosts_hint": "AdGuard Home \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0444\u0430\u0439\u043b\u043e\u0432 hosts.",
+    "no_filters_added": "\u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b",
+    "add_filter_btn": "\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440",
+    "cancel_btn": "\u041e\u0442\u043c\u0435\u043d\u0430",
+    "enter_name_hint": "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f",
+    "enter_url_hint": "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 URL",
+    "check_updates_btn": "\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f",
+    "new_filter_btn": "\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430",
+    "enter_valid_filter_url": "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 URL \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0444\u0438\u043b\u044c\u0442\u0440 \u0438\u043b\u0438 \u0444\u0430\u0439\u043b hosts.",
+    "custom_filter_rules": "\u041f\u0440\u0430\u0432\u0438\u043b\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u043e \u0438\u0437 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u0430\u0432\u0438\u043b \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438",
+    "custom_filter_rules_hint": "\u0412\u0432\u043e\u0434\u0438\u0442\u0435 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443 \u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0443. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u0438\u043b\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0444\u0430\u0439\u043b\u043e\u0432 hosts.",
+    "examples_title": "\u041f\u0440\u0438\u043c\u0435\u0440\u044b",
+    "example_meaning_filter_block": "\u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u043e\u043c\u0435\u043d\u0443 example.org \u0438 \u0432\u0441\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u0430\u043c",
+    "example_meaning_filter_whitelist": "\u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u043e\u043c\u0435\u043d\u0443 example.org \u0438 \u0432\u0441\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u0430\u043c",
+    "example_meaning_host_block": "\u0422\u0435\u043f\u0435\u0440\u044c AdGuard Home \u0432\u0435\u0440\u043d\u0435\u0442 127.0.0.1 \u0434\u043b\u044f \u0434\u043e\u043c\u0435\u043d\u0430 example.org (\u043d\u043e \u043d\u0435 \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u043e\u043c\u0435\u043d\u043e\u0432).",
+    "example_comment": "! \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
+    "example_comment_meaning": "\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439",
+    "example_comment_hash": "# \u0418 \u0432\u043e\u0442 \u0442\u0430\u043a \u0442\u043e\u0436\u0435",
+    "all_filters_up_to_date_toast": "\u0412\u0441\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b",
+    "updated_upstream_dns_toast": "Upstream DNS-\u0441\u0435\u0440\u0432\u0435\u0440\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b",
+    "dns_test_ok_toast": "\u0423\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u044b DNS \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e",
+    "dns_test_not_ok_toast": "\u0421\u0435\u0440\u0432\u0435\u0440 \"{{key}}\": \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f",
+    "unblock_btn": "\u0420\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c",
+    "block_btn": "\u0417\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c",
+    "time_table_header": "\u0412\u0440\u0435\u043c\u044f",
+    "domain_name_table_header": "\u0414\u043e\u043c\u0435\u043d",
+    "type_table_header": "\u0422\u0438\u043f",
+    "response_table_header": "\u041e\u0442\u0432\u0435\u0442",
+    "empty_response_status": "\u041f\u0443\u0441\u0442\u043e",
+    "show_all_filter_type": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435",
+    "show_filtered_type": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435",
+    "no_logs_found": "\u041b\u043e\u0433\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b",
+    "disabled_log_btn": "\u0416\u0443\u0440\u043d\u0430\u043b \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u043a\u043b.",
+    "download_log_file_btn": "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043e\u0442\u0447\u0451\u0442",
+    "refresh_btn": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c",
+    "enabled_log_btn": "\u0416\u0443\u0440\u043d\u0430\u043b \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043a\u043b.",
+    "last_dns_queries": "\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 5000 DNS-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432",
+    "previous_btn": "\u041d\u0430\u0437\u0430\u0434",
+    "next_btn": "\u0412\u043f\u0435\u0440\u0451\u0434",
+    "loading_table_status": "\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...",
+    "page_table_footer_text": "\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430",
+    "of_table_footer_text": "\u0438\u0437",
+    "rows_table_footer_text": "\u0441\u0442\u0440\u043e\u043a",
+    "updated_custom_filtering_toast": "\u0412\u043d\u0435\u0441\u0435\u043d\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430",
+    "rule_removed_from_custom_filtering_toast": "\u041f\u0440\u0430\u0432\u0438\u043b\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u043e \u0438\u0437 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u0430\u0432\u0438\u043b \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438",
+    "rule_added_to_custom_filtering_toast": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e",
+    "query_log_disabled_toast": "\u0416\u0443\u0440\u043d\u0430\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u044b\u043a\u043b.",
+    "query_log_enabled_toast": "\u0416\u0443\u0440\u043d\u0430\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432\u043a\u043b.",
+    "source_label": "\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a",
+    "found_in_known_domain_db": "\u041d\u0430\u0439\u0434\u0435\u043d \u0432 \u0431\u0430\u0437\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0434\u043e\u043c\u0435\u043d\u043e\u0432.",
+    "category_label": "\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f",
+    "rule_label": "\u041f\u0440\u0430\u0432\u0438\u043b\u043e",
+    "filter_label": "\u0424\u0438\u043b\u044c\u0442\u0440"
+}
--- a/client/src/__locales/vi.json
+++ b/client/src/__locales/vi.json
@ -0,0 +1,124 @@
+{
+    "back": "Quay l\u1ea1i",
+    "dashboard": "T\u1ed5ng quan",
+    "settings": "C\u00e0i \u0111\u1eb7t",
+    "filters": "B\u1ed9 l\u1ecdc",
+    "query_log": "L\u1ecbch s\u1eed truy v\u1ea5n",
+    "faq": "H\u1ecfi \u0111\u00e1p",
+    "version": "phi\u00ean b\u1ea3n",
+    "address": "\u0111\u1ecba ch\u1ec9",
+    "on": "\u0110ang b\u1eadt",
+    "off": "\u0110ang t\u1eaft",
+    "copyright": "B\u1ea3n quy\u1ec1n",
+    "homepage": "Trang ch\u1ee7",
+    "report_an_issue": "B\u00e1o l\u1ed7i",
+    "enable_protection": "B\u1eadt b\u1ea3o v\u1ec7",
+    "enabled_protection": "\u0110\u00e3 b\u1eadt b\u1ea3o v\u1ec7",
+    "disable_protection": "T\u1eaft b\u1ea3o v\u1ec7",
+    "disabled_protection": "\u0110\u00e3 t\u1eaft b\u1ea3o v\u1ec7",
+    "refresh_statics": "L\u00e0m m\u1edbi th\u1ed1ng k\u00ea",
+    "dns_query": "Truy v\u1ea5n DNS",
+    "blocked_by": "Ch\u1eb7n b\u1edfi",
+    "stats_malware_phishing": "M\u00e3 \u0111\u1ed9c\/l\u1eeba \u0111\u1ea3o \u0111\u00e3 ch\u1eb7n",
+    "stats_adult": "Website ng\u01b0\u1eddi l\u1edbn \u0111\u00e3 ch\u1eb7n",
+    "stats_query_domain": "T\u00ean mi\u1ec1n truy v\u1ea5n nhi\u1ec1u",
+    "for_last_24_hours": "trong 24 gi\u1edd qua",
+    "no_domains_found": "Kh\u00f4ng c\u00f3 t\u00ean mi\u1ec1n n\u00e0o",
+    "requests_count": "S\u1ed1 l\u1ea7n y\u00eau c\u1ea7u",
+    "top_blocked_domains": "T\u00ean mi\u1ec1n ch\u1eb7n nhi\u1ec1u",
+    "top_clients": "Client d\u00f9ng nhi\u1ec1u",
+    "no_clients_found": "Kh\u00f4ng c\u00f3 client n\u00e0o",
+    "general_statistics": "Th\u1ed1ng k\u00ea chung",
+    "number_of_dns_query_24_hours": "S\u1ed1 y\u00eau c\u1ea7u DNS \u0111\u00e3 x\u1eed l\u00fd trong 24 gi\u1edd qua",
+    "number_of_dns_query_blocked_24_hours": "S\u1ed1 y\u00eau c\u1ea7u DNS b\u1ecb ch\u1eb7n b\u1edfi b\u1ed9 l\u1ecdc qu\u1ea3ng c\u00e1o v\u00e0 danh s\u00e1ch ch\u1eb7n host",
+    "number_of_dns_query_blocked_24_hours_by_sec": "S\u1ed1 y\u00eau c\u1ea7u DNS b\u1ecb ch\u1eb7n b\u1edfi ch\u1ebf \u0111\u1ed9 b\u1ea3o v\u1ec7 duy\u1ec7t web AdGuard",
+    "number_of_dns_query_blocked_24_hours_adult": "S\u1ed1 website ng\u01b0\u1eddi l\u1edbn \u0111\u00e3 ch\u1eb7n",
+    "enforced_save_search": "T\u00ecm ki\u1ebfm an to\u00e0n",
+    "number_of_dns_query_to_safe_search": "S\u1ed1 y\u00eau c\u1ea7u DNS t\u1edbi c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm \u0111\u00e3 chuy\u1ec3n th\u00e0nh t\u00ecm ki\u1ebfm an to\u00e0n",
+    "average_processing_time": "Th\u1eddi gian x\u1eed l\u00fd trung b\u00ecnh",
+    "average_processing_time_hint": "Th\u1eddi gian trung b\u00ecnh cho m\u1ed9t y\u00eau c\u1ea7u DNS t\u00ednh b\u1eb1ng mili gi\u00e2y",
+    "block_domain_use_filters_and_hosts": "Ch\u1eb7n t\u00ean mi\u1ec1n s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 l\u1ecdc v\u00e0 file hosts",
+    "filters_block_toggle_hint": "B\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp quy t\u1eafc ch\u1eb7n t\u1ea1i c\u00e0i \u0111\u1eb7t <a href='#filters'>B\u1ed9 l\u1ecdc<\/a>.",
+    "use_adguard_browsing_sec": "S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 b\u1ea3o v\u1ec7 duy\u1ec7t web AdGuard",
+    "use_adguard_browsing_sec_hint": "AdGuard Home s\u1ebd ki\u1ec3m tra t\u00ean mi\u1ec1n v\u1edbi d\u1ecbch v\u1ee5 b\u1ea3o v\u1ec7 duy\u1ec7t web. T\u00ednh n\u0103ng s\u1eed d\u1ee5ng m\u1ed9t API th\u00e2n thi\u1ec7n v\u1edbi quy\u1ec1n ri\u00eang t\u01b0: ch\u1ec9 m\u1ed9t ph\u1ea7n ng\u1eafn ti\u1ec1n t\u1ed1 m\u00e3 b\u0103m SHA256 \u0111\u01b0\u1ee3c g\u1eedi \u0111\u1ebfn m\u00e1y ch\u1ee7",
+    "use_adguard_parental": "S\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 qu\u1ea3n l\u00fd c\u1ee7a ph\u1ee5 huynh AdGuard",
+    "use_adguard_parental_hint": "AdGuard Home s\u1ebd ki\u1ec3m tra n\u1ebfu t\u00ean mi\u1ec1n ch\u1ee9a t\u1eeb kho\u00e1 ng\u01b0\u1eddi l\u1edbn. T\u00ednh n\u0103ng s\u1eed d\u1ee5ng API th\u00e2n thi\u1ec7n v\u1edbi quy\u1ec1n ri\u00eang t\u01b0 t\u01b0\u01a1ng t\u1ef1 v\u1edbi d\u1ecbch v\u1ee5 b\u1ea3o v\u1ec7 duy\u1ec7t web",
+    "enforce_safe_search": "B\u1eaft bu\u1ed9c t\u00ecm ki\u1ebfm an to\u00e0n",
+    "enforce_save_search_hint": "AdGuard Home c\u00f3 th\u1ec3 b\u1eaft bu\u1ed9c t\u00ecm ki\u1ebfm an to\u00e0n v\u1edbi c\u00e1c d\u1ecbch v\u1ee5 t\u00ecm ki\u1ebfm: Google, Youtube, Bing, Yandex.",
+    "no_servers_specified": "Kh\u00f4ng c\u00f3 m\u00e1y ch\u1ee7 n\u00e0o \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea",
+    "no_settings": "Kh\u00f4ng c\u00f3 c\u00e0i \u0111\u1eb7t n\u00e0o",
+    "general_settings": "C\u00e0i \u0111\u1eb7t chung",
+    "upstream_dns": "M\u00e1y ch\u1ee7 DNS t\u00ecm ki\u1ebfm",
+    "upstream_dns_hint": "N\u1ebfu b\u1ea1n \u0111\u1ec3 tr\u1ed1ng m\u1ee5c n\u00e0y, AdGuard Home s\u1ebd s\u1eed d\u1ee5ng <a href='https:\/\/1.1.1.1\/' target='_blank'>Cloudflare DNS<\/a> \u0111\u1ec3 t\u00ecm ki\u1ebfm. S\u1eed d\u1ee5ng ti\u1ec1n t\u1ed1 tls:\/\/ cho c\u00e1c m\u00e1y ch\u1ee7 DNS d\u1ef1a tr\u00ean TLS.",
+    "test_upstream_btn": "Ki\u1ec3m tra",
+    "apply_btn": "\u00c1p d\u1ee5ng",
+    "disabled_filtering_toast": "\u0110\u00e3 t\u1eaft ch\u1eb7n qu\u1ea3ng c\u00e1o",
+    "enabled_filtering_toast": "\u0110\u00e3 b\u1eadt ch\u1eb7n qu\u1ea3ng c\u00e1o",
+    "disabled_safe_browsing_toast": "\u0110\u00e3 t\u1eaft b\u1ea3o v\u1ec7 duy\u1ec7t web",
+    "enabled_safe_browsing_toast": "\u0110\u00e3 b\u1eadt b\u1ea3o v\u1ec7 duy\u1ec7t web",
+    "disabled_parental_toast": "\u0110\u00e3 t\u1eaft qu\u1ea3n l\u00fd c\u1ee7a ph\u1ee5 huynh",
+    "enabled_parental_toast": "\u0110\u00e3 b\u1eadt qu\u1ea3n l\u00fd c\u1ee7a ph\u1ee5 huynh",
+    "disabled_safe_search_toast": "\u0110\u00e3 t\u1eaft t\u00ecm ki\u1ebfm an to\u00e0n",
+    "enabled_save_search_toast": "\u0110\u00e3 b\u1eadt t\u00ecm ki\u1ebfm an to\u00e0n",
+    "enabled_table_header": "K\u00edch ho\u1ea1t",
+    "name_table_header": "T\u00ean",
+    "filter_url_table_header": "URL b\u1ed9 l\u1ecdc",
+    "rules_count_table_header": "S\u1ed1 quy t\u1eafc",
+    "last_time_updated_table_header": "C\u1eadp nh\u1eadt cu\u1ed1i",
+    "actions_table_header": "Thao t\u00e1c",
+    "delete_table_action": "Xo\u00e1",
+    "filters_and_hosts": "Danh s\u00e1ch b\u1ed9 l\u1ecdc v\u00e0 hosts",
+    "filters_and_hosts_hint": "AdGuard home hi\u1ec3u c\u00e1c quy t\u1eafc ch\u1eb7n qu\u1ea3ng c\u00e1o \u0111\u01a1n gi\u1ea3n v\u00e0 c\u00fa ph\u00e1p file hosts",
+    "no_filters_added": "Kh\u00f4ng c\u00f3 b\u1ed9 l\u1ecdc n\u00e0o \u0111\u01b0\u1ee3c th\u00eam",
+    "add_filter_btn": "Th\u00eam b\u1ed9 l\u1ecdc",
+    "cancel_btn": "Hu\u1ef7",
+    "enter_name_hint": "Nh\u1eadp t\u00ean",
+    "enter_url_hint": "Nh\u1eadp URL",
+    "check_updates_btn": "Ki\u1ec3m tra c\u1eadp nh\u1eadt",
+    "new_filter_btn": "\u0110\u0103ng k\u00fd b\u1ed9 l\u1ecdc m\u1edbi",
+    "enter_valid_filter_url": "Nh\u1eadp URL h\u1ee3p l\u1ec7 c\u1ee7a b\u1ed9 l\u1ecdc ho\u1eb7c file hosts",
+    "custom_filter_rules": "Quy t\u1eafc l\u1ecdc tu\u1ef3 ch\u1ec9nh",
+    "custom_filter_rules_hint": "Nh\u1eadp m\u1ed7i quy t\u1eafc 1 d\u00f2ng. C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng quy t\u1eafc ch\u1eb7n qu\u1ea3ng c\u00e1o ho\u1eb7c c\u00fa ph\u00e1p file host",
+    "examples_title": "V\u00ed d\u1ee5",
+    "example_meaning_filter_block": "Ch\u1eb7n truy c\u1eadp t\u1edbi t\u00ean mi\u1ec1n example.org v\u00e0 t\u1ea5t c\u1ea3 t\u00ean mi\u1ec1n con",
+    "example_meaning_filter_whitelist": "Kh\u00f4ng ch\u1eb7n truy c\u1eadp t\u1edbi t\u00ean mi\u1ec1n example.org v\u00e0 t\u1ea5t c\u1ea3 t\u00ean mi\u1ec1n con",
+    "example_meaning_host_block": "AdGuard Home s\u1ebd ph\u1ea3n h\u1ed3i \u0111\u1ecba ch\u1ec9 IP 127.0.0.1 cho t\u00ean mi\u1ec1n example.org (kh\u00f4ng \u00e1p d\u1ee5ng t\u00ean mi\u1ec1n con)",
+    "example_comment": "! \u0110\u00e2y l\u00e0 m\u1ed9t ch\u00fa th\u00edch",
+    "example_comment_meaning": "Ch\u1ec9 l\u00e0 m\u1ed9t ch\u00fa th\u00edch",
+    "example_comment_hash": "# C\u0169ng l\u00e0 m\u1ed9t ch\u00fa th\u00edch",
+    "all_filters_up_to_date_toast": "T\u1ea5t c\u1ea3 b\u1ed9 l\u1ecdc \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt",
+    "updated_upstream_dns_toast": "\u0110\u00e3 c\u1eadp nh\u1eadt m\u00e1y ch\u1ee7 DNS t\u00ecm ki\u1ebfm",
+    "dns_test_ok_toast": "M\u00e1y ch\u1ee7 DNS c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng",
+    "dns_test_not_ok_toast": "M\u00e1y ch\u1ee7 '{{key}}': kh\u00f4ng th\u1ec3 s\u1eed d\u1ee5ng, vui l\u00f2ng ki\u1ec3m tra b\u1ea1n \u0111\u00e3 \u0111i\u1ec1n ch\u00ednh x\u00e1c",
+    "unblock_btn": "B\u1ecf ch\u1eb7n",
+    "block_btn": "Ch\u1eb7n",
+    "time_table_header": "Th\u1eddi gian",
+    "domain_name_table_header": "T\u00ean mi\u1ec1n",
+    "type_table_header": "Lo\u1ea1i",
+    "response_table_header": "Ph\u1ea3n h\u1ed3i",
+    "empty_response_status": "R\u1ed7ng",
+    "show_all_filter_type": "Hi\u1ec7n t\u1ea5t c\u1ea3",
+    "show_filtered_type": "Ch\u1ec9 hi\u1ec7n \u0111\u00e3 ch\u1eb7n",
+    "no_logs_found": "Kh\u00f4ng c\u00f3 l\u1ecbch s\u1eed truy v\u1ea5n",
+    "disabled_log_btn": "T\u1eaft l\u1ecbch s\u1eed truy v\u1ea5n",
+    "download_log_file_btn": "T\u1ea3i t\u1eadp tin l\u1ecbch s\u1eed truy v\u1ea5n",
+    "refresh_btn": "L\u00e0m m\u1edbi",
+    "enabled_log_btn": "B\u1eadt l\u1ecbch s\u1eed truy v\u1ea5n",
+    "last_dns_queries": "5000 truy v\u1ea5n DNS g\u1ea7n nh\u1ea5t",
+    "previous_btn": "Trang tr\u01b0\u1edbc",
+    "next_btn": "Trang sau",
+    "loading_table_status": "\u0110ang t\u1ea3i...",
+    "page_table_footer_text": "Trang",
+    "of_table_footer_text": "c\u1ee7a",
+    "rows_table_footer_text": "h\u00e0ng",
+    "updated_custom_filtering_toast": "\u0110\u00e3 c\u1eadp nh\u1eadt quy t\u1eafc l\u1ecdc tu\u1ef3 ch\u1ec9nh",
+    "rule_removed_from_custom_filtering_toast": "Quy t\u1eafc \u0111\u00e3 \u0111\u01b0\u1ee3c xo\u00e1 kh\u1ecfi quy t\u1eafc l\u1ecdc tu\u1ef3 ch\u1ec9nh",
+    "rule_added_to_custom_filtering_toast": "Quy t\u1eafc \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o quy t\u1eafc l\u1ecdc tu\u1ef3 ch\u1ec9nh",
+    "query_log_disabled_toast": "\u0110\u00e3 t\u1eaft l\u1ecbch s\u1eed truy v\u1ea5n",
+    "query_log_enabled_toast": "\u0110\u00e3 b\u1eadt l\u1ecbch s\u1eed truy v\u1ea5n",
+    "source_label": "Ngu\u1ed3n",
+    "found_in_known_domain_db": "T\u00ecm th\u1ea5y trong c\u01a1 s\u1edf d\u1eef li\u1ec7u t\u00ean mi\u1ec1n",
+    "category_label": "Th\u1ec3 lo\u1ea1i",
+    "rule_label": "Quy t\u1eafc",
+    "filter_label": "B\u1ed9 l\u1ecdc"
+}
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@ -1,5 +1,6 @@
 import { createAction } from 'redux-actions';
 import round from 'lodash/round';
+import { t } from 'i18next';
 import { showLoading, hideLoading } from 'react-redux-loading-bar';

 import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers';
@ -21,40 +22,40 @@ export const toggleSetting = (settingKey, status) => async (dispatch) => {
        switch (settingKey) {
            case 'filtering':
                if (status) {
-                    successMessage = 'Disabled filtering';
+                    successMessage = 'disabled_filtering_toast';
                    await apiClient.disableFiltering();
                } else {
-                    successMessage = 'Enabled filtering';
+                    successMessage = 'enabled_filtering_toast';
                    await apiClient.enableFiltering();
                }
                dispatch(toggleSettingStatus({ settingKey }));
                break;
            case 'safebrowsing':
                if (status) {
-                    successMessage = 'Disabled safebrowsing';
+                    successMessage = 'disabled_safe_browsing_toast';
                    await apiClient.disableSafebrowsing();
                } else {
-                    successMessage = 'Enabled safebrowsing';
+                    successMessage = 'enabled_safe_browsing_toast';
                    await apiClient.enableSafebrowsing();
                }
                dispatch(toggleSettingStatus({ settingKey }));
                break;
            case 'parental':
                if (status) {
-                    successMessage = 'Disabled parental control';
+                    successMessage = 'disabled_parental_toast';
                    await apiClient.disableParentalControl();
                } else {
-                    successMessage = 'Enabled parental control';
+                    successMessage = 'enabled_parental_toast';
                    await apiClient.enableParentalControl();
                }
                dispatch(toggleSettingStatus({ settingKey }));
                break;
            case 'safesearch':
                if (status) {
-                    successMessage = 'Disabled safe search';
+                    successMessage = 'disabled_safe_search_toast';
                    await apiClient.disableSafesearch();
                } else {
-                    successMessage = 'Enabled safe search';
+                    successMessage = 'enabled_save_search_toast';
                    await apiClient.enableSafesearch();
                }
                dispatch(toggleSettingStatus({ settingKey }));
@ -123,10 +124,10 @@ export const toggleProtection = status => async (dispatch) => {

    try {
        if (status) {
-            successMessage = 'Disabled protection';
+            successMessage = 'disabled_protection';
            await apiClient.disableGlobalProtection();
        } else {
-            successMessage = 'Enabled protection';
+            successMessage = 'enabled_protection';
            await apiClient.enableGlobalProtection();
        }

@ -271,14 +272,14 @@ export const toggleLogStatus = queryLogEnabled => async (dispatch) => {
    let successMessage;
    if (queryLogEnabled) {
        toggleMethod = apiClient.disableQueryLog.bind(apiClient);
-        successMessage = 'disabled';
+        successMessage = 'query_log_disabled_toast';
    } else {
        toggleMethod = apiClient.enableQueryLog.bind(apiClient);
-        successMessage = 'enabled';
+        successMessage = 'query_log_enabled_toast';
    }
    try {
        await toggleMethod();
-        dispatch(addSuccessToast(`Query log ${successMessage}`));
+        dispatch(addSuccessToast(successMessage));
        dispatch(toggleLogStatusSuccess());
    } catch (error) {
        dispatch(addErrorToast({ error }));
@ -297,7 +298,7 @@ export const setRules = rules => async (dispatch) => {
            .replace(/^\n/g, '')
            .replace(/\n\s*\n/g, '\n');
        await apiClient.setRules(replacedLineEndings);
-        dispatch(addSuccessToast('Updated the custom filtering rules'));
+        dispatch(addSuccessToast('updated_custom_filtering_toast'));
        dispatch(setRulesSuccess());
    } catch (error) {
        dispatch(addErrorToast({ error }));
@ -359,7 +360,7 @@ export const refreshFilters = () => async (dispatch) => {

        if (refreshText.includes('OK')) {
            if (refreshText.includes('OK 0')) {
-                dispatch(addSuccessToast('All filters are already up-to-date'));
+                dispatch(addSuccessToast('all_filters_up_to_date_toast'));
            } else {
                dispatch(addSuccessToast(refreshText.replace(/OK /g, '')));
            }
@ -456,7 +457,7 @@ export const setUpstream = url => async (dispatch) => {
    dispatch(setUpstreamRequest());
    try {
        await apiClient.setUpstream(url);
-        dispatch(addSuccessToast('Updated the upstream DNS servers'));
+        dispatch(addSuccessToast('updated_upstream_dns_toast'));
        dispatch(setUpstreamSuccess());
    } catch (error) {
        dispatch(addErrorToast({ error }));
@ -476,13 +477,13 @@ export const testUpstream = servers => async (dispatch) => {
        const testMessages = Object.keys(upstreamResponse).map((key) => {
            const message = upstreamResponse[key];
            if (message !== 'OK') {
-                dispatch(addErrorToast({ error: `Server "${key}": could not be used, please check that you've written it correctly` }));
+                dispatch(addErrorToast({ error: t('dns_test_not_ok_toast', { key }) }));
            }
            return message;
        });

        if (testMessages.every(message => message === 'OK')) {
-            dispatch(addSuccessToast('Specified DNS servers are working correctly'));
+            dispatch(addSuccessToast('dns_test_ok_toast'));
        }

        dispatch(testUpstreamSuccess());
@ -491,3 +492,33 @@ export const testUpstream = servers => async (dispatch) => {
        dispatch(testUpstreamFailure());
    }
 };
+
+export const changeLanguageRequest = createAction('CHANGE_LANGUAGE_REQUEST');
+export const changeLanguageFailure = createAction('CHANGE_LANGUAGE_FAILURE');
+export const changeLanguageSuccess = createAction('CHANGE_LANGUAGE_SUCCESS');
+
+export const changeLanguage = lang => async (dispatch) => {
+    dispatch(changeLanguageRequest());
+    try {
+        await apiClient.changeLanguage(lang);
+        dispatch(changeLanguageSuccess());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(changeLanguageFailure());
+    }
+};
+
+export const getLanguageRequest = createAction('GET_LANGUAGE_REQUEST');
+export const getLanguageFailure = createAction('GET_LANGUAGE_FAILURE');
+export const getLanguageSuccess = createAction('GET_LANGUAGE_SUCCESS');
+
+export const getLanguage = () => async (dispatch) => {
+    dispatch(getLanguageRequest());
+    try {
+        const language = await apiClient.getCurrentLanguage();
+        dispatch(getLanguageSuccess(language));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getLanguageFailure());
+    }
+};
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@ -284,4 +284,22 @@ export default class Api {
        const { path, method } = this.SAFESEARCH_DISABLE;
        return this.makeRequest(path, method);
    }
+
+    // Language
+    CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
+    CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
+
+    getCurrentLanguage() {
+        const { path, method } = this.CURRENT_LANGUAGE;
+        return this.makeRequest(path, method);
+    }
+
+    changeLanguage(lang) {
+        const { path, method } = this.CHANGE_LANGUAGE;
+        const parameters = {
+            data: lang,
+            headers: { 'Content-Type': 'text/plain' },
+        };
+        return this.makeRequest(path, method, parameters);
+    }
 }
--- a/client/src/components/App/index.js
+++ b/client/src/components/App/index.js
@ -17,6 +17,7 @@ import Footer from '../ui/Footer';
 import Toasts from '../Toasts';
 import Status from '../ui/Status';
 import Update from '../ui/Update';
+import i18n from '../../i18n';

 class App extends Component {
    componentDidMount() {
@ -24,10 +25,32 @@ class App extends Component {
        this.props.getVersion();
    }

+    componentDidUpdate(prevProps) {
+        if (this.props.dashboard.language !== prevProps.dashboard.language) {
+            this.setLanguage();
+        }
+    }
+
    handleStatusChange = () => {
        this.props.enableDns();
    };

+    setLanguage = () => {
+        const { processing, language } = this.props.dashboard;
+
+        if (!processing) {
+            if (!language) {
+                this.props.changeLanguage(i18n.language);
+            } else {
+                i18n.changeLanguage(language);
+            }
+        }
+
+        i18n.on('languageChanged', (lang) => {
+            this.props.changeLanguage(lang);
+        });
+    }
+
    render() {
        const { dashboard } = this.props;
        const updateAvailable =
@ -78,6 +101,7 @@ App.propTypes = {
    isCoreRunning: PropTypes.bool,
    error: PropTypes.string,
    getVersion: PropTypes.func,
+    changeLanguage: PropTypes.func,
 };

 export default App;
--- a/client/src/components/Dashboard/BlockedDomains.js
+++ b/client/src/components/Dashboard/BlockedDomains.js
@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
+import { withNamespaces, Trans } from 'react-i18next';

 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@ -29,7 +30,7 @@ class BlockedDomains extends Component {
            );
        },
    }, {
-        Header: 'Requests count',
+        Header: <Trans>requests_count</Trans>,
        accessor: 'domain',
        maxWidth: 190,
        Cell: ({ value }) => {
@ -48,15 +49,16 @@ class BlockedDomains extends Component {
    }];

    render() {
+        const { t } = this.props;
        return (
-            <Card title="Top blocked domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+            <Card title={ t('top_blocked_domains') } subtitle={ t('for_last_24_hours') } bodyType="card-table" refresh={this.props.refreshButton}>
                <ReactTable
                    data={map(this.props.topBlockedDomains, (value, prop) => (
                        { ip: prop, domain: value }
                    ))}
                    columns={this.columns}
                    showPagination={false}
-                    noDataText="No domains found"
+                    noDataText={ t('no_domains_found') }
                    minRows={6}
                    className="-striped -highlight card-table-overflow stats__table"
                />
@ -71,6 +73,7 @@ BlockedDomains.propTypes = {
    replacedSafebrowsing: PropTypes.number.isRequired,
    replacedParental: PropTypes.number.isRequired,
    refreshButton: PropTypes.node.isRequired,
+    t: PropTypes.func,
 };

-export default BlockedDomains;
+export default withNamespaces()(BlockedDomains);
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
+import { Trans, withNamespaces } from 'react-i18next';

 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@ -25,7 +26,7 @@ class Clients extends Component {
        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
        sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
    }, {
-        Header: 'Requests count',
+        Header: <Trans>requests_count</Trans>,
        accessor: 'count',
        Cell: ({ value }) => {
            const percent = getPercent(this.props.dnsQueries, value);
@ -38,15 +39,16 @@ class Clients extends Component {
    }];

    render() {
+        const { t } = this.props;
        return (
-            <Card title="Top clients" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+            <Card title={ t('top_clients') } subtitle={ t('for_last_24_hours') } bodyType="card-table" refresh={this.props.refreshButton}>
                <ReactTable
                    data={map(this.props.topClients, (value, prop) => (
                        { ip: prop, count: value }
                    ))}
                    columns={this.columns}
                    showPagination={false}
-                    noDataText="No clients found"
+                    noDataText={ t('no_clients_found') }
                    minRows={6}
                    className="-striped -highlight card-table-overflow"
                />
@ -59,6 +61,7 @@ Clients.propTypes = {
    topClients: PropTypes.object.isRequired,
    dnsQueries: PropTypes.number.isRequired,
    refreshButton: PropTypes.node.isRequired,
+    t: PropTypes.func,
 };

-export default Clients;
+export default withNamespaces()(Clients);
--- a/client/src/components/Dashboard/Counters.js
+++ b/client/src/components/Dashboard/Counters.js
@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';

 import Card from '../ui/Card';
 import Tooltip from '../ui/Tooltip';
@ -7,13 +8,13 @@ import Tooltip from '../ui/Tooltip';
 const tooltipType = 'tooltip-custom--narrow';

 const Counters = props => (
-    <Card title="General statistics" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
+    <Card title={ props.t('general_statistics') } subtitle={ props.t('for_last_24_hours') } bodyType="card-table" refresh={props.refreshButton}>
        <table className="table card-table">
            <tbody>
                <tr>
                    <td>
-                        DNS Queries
-                        <Tooltip text="A number of DNS quieries processed for the last 24 hours" type={tooltipType} />
+                        <Trans>dns_query</Trans>
+                        <Tooltip text={ props.t('number_of_dns_query_24_hours') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -23,8 +24,8 @@ const Counters = props => (
                </tr>
                <tr>
                    <td>
-                        Blocked by <a href="#filters">Filters</a>
-                        <Tooltip text="A number of DNS requests blocked by adblock filters and hosts blocklists" type={tooltipType} />
+                        <Trans>blocked_by</Trans> <a href="#filters"><Trans>filters</Trans></a>
+                        <Tooltip text={ props.t('number_of_dns_query_blocked_24_hours') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -34,8 +35,8 @@ const Counters = props => (
                </tr>
                <tr>
                    <td>
-                        Blocked malware/phishing
-                        <Tooltip text="A number of DNS requests blocked by the AdGuard browsing security module" type={tooltipType} />
+                        <Trans>stats_malware_phishing</Trans>
+                        <Tooltip text={ props.t('number_of_dns_query_blocked_24_hours_by_sec') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -45,8 +46,8 @@ const Counters = props => (
                </tr>
                <tr>
                    <td>
-                        Blocked adult websites
-                        <Tooltip text="A number of adult websites blocked" type={tooltipType} />
+                        <Trans>stats_adult</Trans>
+                        <Tooltip text={ props.t('number_of_dns_query_blocked_24_hours_adult') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -56,8 +57,8 @@ const Counters = props => (
                </tr>
                <tr>
                    <td>
-                        Enforced safe search
-                        <Tooltip text="A number of DNS requests to search engines for which Safe Search was enforced" type={tooltipType} />
+                        <Trans>enforced_save_search</Trans>
+                        <Tooltip text={ props.t('number_of_dns_query_to_safe_search') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -67,8 +68,8 @@ const Counters = props => (
                </tr>
                <tr>
                    <td>
-                        Average processing time
-                        <Tooltip text="Average time in milliseconds on processing a DNS request" type={tooltipType} />
+                        <Trans>average_processing_time</Trans>
+                        <Tooltip text={ props.t('average_processing_time_hint') } type={tooltipType} />
                    </td>
                    <td className="text-right">
                        <span className="text-muted">
@ -89,6 +90,7 @@ Counters.propTypes = {
    replacedSafesearch: PropTypes.number.isRequired,
    avgProcessingTime: PropTypes.number.isRequired,
    refreshButton: PropTypes.node.isRequired,
+    t: PropTypes.func,
 };

-export default Counters;
+export default withNamespaces()(Counters);
--- a/client/src/components/Dashboard/QueriedDomains.js
+++ b/client/src/components/Dashboard/QueriedDomains.js
@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
+import { withNamespaces, Trans } from 'react-i18next';

 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@ -38,7 +39,7 @@ class QueriedDomains extends Component {
            );
        },
    }, {
-        Header: 'Requests count',
+        Header: <Trans>requests_count</Trans>,
        accessor: 'count',
        maxWidth: 190,
        Cell: ({ value }) => {
@ -52,15 +53,16 @@ class QueriedDomains extends Component {
    }];

    render() {
+        const { t } = this.props;
        return (
-            <Card title="Top queried domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+            <Card title={ t('stats_query_domain') } subtitle={ t('for_last_24_hours') } bodyType="card-table" refresh={this.props.refreshButton}>
                <ReactTable
                    data={map(this.props.topQueriedDomains, (value, prop) => (
                        { ip: prop, count: value }
                    ))}
                    columns={this.columns}
                    showPagination={false}
-                    noDataText="No domains found"
+                    noDataText={ t('no_domains_found') }
                    minRows={6}
                    className="-striped -highlight card-table-overflow stats__table"
                />
@ -73,6 +75,7 @@ QueriedDomains.propTypes = {
    topQueriedDomains: PropTypes.object.isRequired,
    dnsQueries: PropTypes.number.isRequired,
    refreshButton: PropTypes.node.isRequired,
+    t: PropTypes.func,
 };

-export default QueriedDomains;
+export default withNamespaces()(QueriedDomains);
--- a/client/src/components/Dashboard/Statistics.js
+++ b/client/src/components/Dashboard/Statistics.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';

 import Card from '../ui/Card';
 import Line from '../ui/Line';
@ -24,13 +25,13 @@ class Statistics extends Component {
        return (
            <div className="row">
                <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                        <div className="card-body-stats">
                            <div className="card-value card-value-stats text-blue">
                                {dnsQueries}
                            </div>
                            <div className="card-title-stats">
-                                DNS Queries
+                                <Trans>dns_query</Trans>
                            </div>
                        </div>
                        <div className="card-chart-bg">
@ -39,7 +40,7 @@ class Statistics extends Component {
                    </Card>
                </div>
                <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                        <div className="card-body-stats">
                            <div className="card-value card-value-stats text-red">
                                {blockedFiltering}
@ -48,7 +49,7 @@ class Statistics extends Component {
                                {getPercent(dnsQueries, blockedFiltering)}
                            </div>
                            <div className="card-title-stats">
-                                Blocked by <a href="#filters">Filters</a>
+                                <Trans>blocked_by</Trans><a href="#filters"> <Trans>filters</Trans></a>
                            </div>
                        </div>
                        <div className="card-chart-bg">
@ -57,7 +58,7 @@ class Statistics extends Component {
                    </Card>
                </div>
                <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                        <div className="card-body-stats">
                            <div className="card-value card-value-stats text-green">
                                {replacedSafebrowsing}
@ -66,7 +67,7 @@ class Statistics extends Component {
                                {getPercent(dnsQueries, replacedSafebrowsing)}
                            </div>
                            <div className="card-title-stats">
-                                Blocked malware/phishing
+                                <Trans>stats_malware_phishing</Trans>
                            </div>
                        </div>
                        <div className="card-chart-bg">
@ -75,7 +76,7 @@ class Statistics extends Component {
                    </Card>
                </div>
                <div className="col-sm-6 col-lg-3">
-                    <Card bodyType="card-wrap">
+                    <Card type="card--full" bodyType="card-wrap">
                        <div className="card-body-stats">
                            <div className="card-value card-value-stats text-yellow">
                                {replacedParental}
@ -84,7 +85,7 @@ class Statistics extends Component {
                                {getPercent(dnsQueries, replacedParental)}
                            </div>
                            <div className="card-title-stats">
-                                Blocked adult websites
+                                <Trans>stats_adult</Trans>
                            </div>
                        </div>
                        <div className="card-chart-bg">
@ -106,4 +107,4 @@ Statistics.propTypes = {
    refreshButton: PropTypes.node.isRequired,
 };

-export default Statistics;
+export default withNamespaces()(Statistics);
--- a/client/src/components/Dashboard/index.js
+++ b/client/src/components/Dashboard/index.js
@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import 'whatwg-fetch';
+import { Trans, withNamespaces } from 'react-i18next';

 import Statistics from './Statistics';
 import Counters from './Counters';
@ -25,30 +26,30 @@ class Dashboard extends Component {

    getToggleFilteringButton = () => {
        const { protectionEnabled } = this.props.dashboard;
-        const buttonText = protectionEnabled ? 'Disable' : 'Enable';
+        const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
        const buttonClass = protectionEnabled ? 'btn-gray' : 'btn-success';

        return (
            <button type="button" className={`btn btn-sm mr-2 ${buttonClass}`} onClick={() => this.props.toggleProtection(protectionEnabled)}>
-                {buttonText} protection
+                <Trans>{buttonText}</Trans>
            </button>
        );
    }

    render() {
-        const { dashboard } = this.props;
+        const { dashboard, t } = this.props;
        const dashboardProcessing =
            dashboard.processing ||
            dashboard.processingStats ||
            dashboard.processingStatsHistory ||
            dashboard.processingTopStats;

-        const refreshFullButton = <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => this.getAllStats()}>Refresh statistics</button>;
+        const refreshFullButton = <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => this.getAllStats()}><Trans>refresh_statics</Trans></button>;
        const refreshButton = <button type="button" className="btn btn-outline-primary btn-sm card-refresh" onClick={() => this.getAllStats()} />;

        return (
            <Fragment>
-                <PageTitle title="Dashboard">
+                <PageTitle title={ t('dashboard') }>
                    <div className="page-title__actions">
                        {this.getToggleFilteringButton()}
                        {refreshFullButton}
@ -124,6 +125,7 @@ Dashboard.propTypes = {
    isCoreRunning: PropTypes.bool,
    getFiltering: PropTypes.func,
    toggleProtection: PropTypes.func,
+    t: PropTypes.func,
 };

-export default Dashboard;
+export default withNamespaces()(Dashboard);
--- a/client/src/components/Filters/UserRules.js
+++ b/client/src/components/Filters/UserRules.js
@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
 import Card from '../ui/Card';

-export default class UserRules extends Component {
+class UserRules extends Component {
    handleChange = (e) => {
        const { value } = e.currentTarget;
        this.props.handleRulesChange(value);
@ -14,10 +15,11 @@ export default class UserRules extends Component {
    };

    render() {
+        const { t } = this.props;
        return (
            <Card
-                title="Custom filtering rules"
-                subtitle="Enter one rule on a line. You can use either adblock rules or hosts files syntax."
+                title={ t('custom_filter_rules') }
+                subtitle={ t('custom_filter_rules_hint') }
            >
                <form onSubmit={this.handleSubmit}>
                    <textarea className="form-control form-control--textarea-large" value={this.props.userRules} onChange={this.handleChange} />
@ -27,31 +29,28 @@ export default class UserRules extends Component {
                            type="submit"
                            onClick={this.handleSubmit}
                        >
-                            Apply
+                            <Trans>apply_btn</Trans>
                        </button>
                    </div>
                </form>
                <hr/>
                <div className="list leading-loose">
-                    Examples:
+                    <Trans>examples_title</Trans>:
                    <ol className="leading-loose">
                        <li>
-                            <code>||example.org^</code> - block access to the example.org domain
-                            and all its subdomains
+                            <code>||example.org^</code> - { t('example_meaning_filter_block') }
                        </li>
                        <li>
-                            <code> @@||example.org^</code> - unblock access to the example.org
-                            domain and all its subdomains
+                            <code> @@||example.org^</code> - { t('example_meaning_filter_whitelist') }
                        </li>
                        <li>
-                            <code>127.0.0.1 example.org</code> - AdGuard Home will now return
-                            127.0.0.1 address for the example.org domain (but not its subdomains).
+                            <code>127.0.0.1 example.org</code> - { t('example_meaning_host_block') }
                        </li>
                        <li>
-                            <code>! Here goes a comment</code> - just a comment
+                            <code>{ t('example_comment') }</code> - { t('example_comment_meaning') }
                        </li>
                        <li>
-                            <code># Also a comment</code> - just a comment
+                            <code>{ t('example_comment_hash') }</code> - { t('example_comment_meaning') }
                        </li>
                    </ol>
                </div>
@ -64,4 +63,7 @@ UserRules.propTypes = {
    userRules: PropTypes.string,
    handleRulesChange: PropTypes.func,
    handleRulesSubmit: PropTypes.func,
+    t: PropTypes.func,
 };
+
+export default withNamespaces()(UserRules);
--- a/client/src/components/Filters/index.js
+++ b/client/src/components/Filters/index.js
@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
 import Modal from '../ui/Modal';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
@ -33,60 +34,61 @@ class Filters extends Component {
    };

    columns = [{
-        Header: 'Enabled',
+        Header: this.props.t('enabled_table_header'),
        accessor: 'enabled',
        Cell: this.renderCheckbox,
        width: 90,
        className: 'text-center',
    }, {
-        Header: 'Name',
+        Header: this.props.t('name_table_header'),
        accessor: 'name',
        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
    }, {
-        Header: 'Filter URL',
+        Header: this.props.t('filter_url_table_header'),
        accessor: 'url',
        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><a href={value} target='_blank' rel='noopener noreferrer' className="link logs__text">{value}</a></div>),
    }, {
-        Header: 'Rules count',
+        Header: this.props.t('rules_count_table_header'),
        accessor: 'rulesCount',
        className: 'text-center',
        Cell: props => props.value.toLocaleString(),
    }, {
-        Header: 'Last time updated',
+        Header: this.props.t('last_time_updated_table_header'),
        accessor: 'lastUpdated',
        className: 'text-center',
    }, {
-        Header: 'Actions',
+        Header: this.props.t('actions_table_header'),
        accessor: 'url',
-        Cell: ({ value }) => (<span className='remove-icon fe fe-trash-2' onClick={() => this.props.removeFilter(value)}/>),
+        Cell: ({ value }) => (<span title={ this.props.t('delete_table_action') } className='remove-icon fe fe-trash-2' onClick={() => this.props.removeFilter(value)}/>),
        className: 'text-center',
-        width: 75,
+        width: 80,
        sortable: false,
    },
    ];

    render() {
+        const { t } = this.props;
        const { filters, userRules } = this.props.filtering;
        return (
            <div>
-                <PageTitle title="Filters" />
+                <PageTitle title={ t('filters') } />
                <div className="content">
                    <div className="row">
                        <div className="col-md-12">
                            <Card
-                                title="Filters and hosts blocklists"
-                                subtitle="AdGuard Home understands basic adblock rules and hosts files syntax."
+                                title={ t('filters_and_hosts') }
+                                subtitle={ t('filters_and_hosts_hint') }
                            >
                                <ReactTable
                                    data={filters}
                                    columns={this.columns}
                                    showPagination={false}
-                                    noDataText="No filters added"
+                                    noDataText={ t('no_filters_added') }
                                    minRows={4} // TODO find out what to show if rules.length is 0
                                />
                                <div className="card-actions">
-                                    <button className="btn btn-success btn-standart mr-2" type="submit" onClick={this.props.toggleFilteringModal}>Add filter</button>
-                                    <button className="btn btn-primary btn-standart" type="submit" onClick={this.props.refreshFilters}>Check updates</button>
+                                    <button className="btn btn-success btn-standart mr-2" type="submit" onClick={this.props.toggleFilteringModal}><Trans>add_filter_btn</Trans></button>
+                                    <button className="btn btn-primary btn-standart" type="submit" onClick={this.props.refreshFilters}><Trans>check_updates_btn</Trans></button>
                                </div>
                            </Card>
                        </div>
@ -104,8 +106,8 @@ class Filters extends Component {
                    toggleModal={this.props.toggleFilteringModal}
                    addFilter={this.props.addFilter}
                    isFilterAdded={this.props.filtering.isFilterAdded}
-                    title="New filter subscription"
-                    inputDescription="Enter a valid URL to a filter subscription or a hosts file."
+                    title={ t('new_filter_btn') }
+                    inputDescription={ t('enter_valid_filter_url') }
                />
            </div>
        );
@ -127,7 +129,8 @@ Filters.propTypes = {
    toggleFilteringModal: PropTypes.func.isRequired,
    handleRulesChange: PropTypes.func.isRequired,
    refreshFilters: PropTypes.func.isRequired,
+    t: PropTypes.func,
 };


-export default Filters;
+export default withNamespaces()(Filters);
--- a/client/src/components/Header/Header.css
+++ b/client/src/components/Header/Header.css
@ -88,6 +88,8 @@
    .nav-tabs .nav-link {
        width: auto;
        border-bottom: 1px solid transparent;
+        font-size: 13px;
+        white-space: nowrap;
    }

    .mobile-menu {
@ -107,6 +109,15 @@

    .nav-version {
        padding: 0;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .nav-tabs .nav-link {
+        font-size: 14px;
+    }
+
+    .nav-version {
        font-size: 0.85rem;
    }
 }
--- a/client/src/components/Header/Menu.js
+++ b/client/src/components/Header/Menu.js
@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import enhanceWithClickOutside from 'react-click-outside';
 import classnames from 'classnames';
-
+import { Trans, withNamespaces } from 'react-i18next';
 import { REPOSITORY } from '../../helpers/constants';

 class Menu extends Component {
@ -17,48 +17,48 @@ class Menu extends Component {

    render() {
        const menuClass = classnames({
-            'col-lg mobile-menu': true,
+            'col-lg-6 mobile-menu': true,
            'mobile-menu--active': this.props.isMenuOpen,
        });

        return (
            <Fragment>
                <div className={menuClass}>
-                    <ul className="nav nav-tabs border-0 flex-column flex-lg-row">
+                    <ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
                        <li className="nav-item border-bottom d-lg-none" onClick={this.toggleMenu}>
                            <div className="nav-link nav-link--back">
                                <svg className="nav-icon" fill="none" height="24" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m19 12h-14"/><path d="m12 19-7-7 7-7"/></svg>
-                                Back
+                                <Trans>back</Trans>
                            </div>
                        </li>
                        <li className="nav-item">
                            <NavLink to="/" exact={true} className="nav-link">
                                <svg className="nav-icon" fill="none" height="24" stroke="#9aa0ac" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m3 9 9-7 9 7v11a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2-2z"/><path d="m9 22v-10h6v10"/></svg>
-                                Dashboard
+                                <Trans>dashboard</Trans>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <NavLink to="/settings" className="nav-link">
                                <svg className="nav-icon" fill="none" height="24" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"/><path d="m19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1 -2.83 0l-.06-.06a1.65 1.65 0 0 0 -1.82-.33 1.65 1.65 0 0 0 -1 1.51v.17a2 2 0 0 1 -2 2 2 2 0 0 1 -2-2v-.09a1.65 1.65 0 0 0 -1.08-1.51 1.65 1.65 0 0 0 -1.82.33l-.06.06a2 2 0 0 1 -2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0 -1.51-1h-.17a2 2 0 0 1 -2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0 -.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33h.08a1.65 1.65 0 0 0 1-1.51v-.17a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0 -.33 1.82v.08a1.65 1.65 0 0 0 1.51 1h.17a2 2 0 0 1 2 2 2 2 0 0 1 -2 2h-.09a1.65 1.65 0 0 0 -1.51 1z"/></svg>
-                                Settings
+                                <Trans>settings</Trans>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <NavLink to="/filters" className="nav-link">
                                <svg className="nav-icon" fill="none" height="24" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m22 3h-20l8 9.46v6.54l4 2v-8.54z"/></svg>
-                                Filters
+                                <Trans>filters</Trans>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <NavLink to="/logs" className="nav-link">
                                <svg className="nav-icon" fill="none" height="24" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m14 2h-8a2 2 0 0 0 -2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-12z"/><path d="m14 2v6h6"/><path d="m16 13h-8"/><path d="m16 17h-8"/><path d="m10 9h-1-1"/></svg>
-                                Query Log
+                                <Trans>query_log</Trans>
                            </NavLink>
                        </li>
                        <li className="nav-item">
                            <a href={`${REPOSITORY.URL}/wiki`} className="nav-link" target="_blank" rel="noopener noreferrer">
                                <svg className="nav-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#66b574" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
-                                FAQ
+                                <Trans>faq</Trans>
                            </a>
                        </li>
                    </ul>
@ -74,4 +74,4 @@ Menu.propTypes = {
    toggleMenuOpen: PropTypes.func,
 };

-export default enhanceWithClickOutside(Menu);
+export default withNamespaces()(enhanceWithClickOutside(Menu));
--- a/client/src/components/Header/Version.js
+++ b/client/src/components/Header/Version.js
@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';

-export default function Version(props) {
+function Version(props) {
    const { dnsVersion, dnsAddress, dnsPort } = props;
    return (
        <div className="nav-version">
            <div className="nav-version__text">
-                version: <span className="nav-version__value">{dnsVersion}</span>
+                <Trans>version</Trans>: <span className="nav-version__value">{dnsVersion}</span>
            </div>
            <div className="nav-version__text">
-                address: <span className="nav-version__value">{dnsAddress}:{dnsPort}</span>
+                <Trans>address</Trans>: <span className="nav-version__value">{dnsAddress}:{dnsPort}</span>
            </div>
        </div>
    );
@ -20,3 +21,5 @@ Version.propTypes = {
    dnsAddress: PropTypes.string,
    dnsPort: PropTypes.number,
 };
+
+export default withNamespaces()(Version);
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Trans, withNamespaces } from 'react-i18next';

 import Menu from './Menu';
 import Version from './Version';
@ -44,7 +45,7 @@ class Header extends Component {
                                </Link>
                                {!dashboard.proccessing && dashboard.isCoreRunning &&
                                    <span className={badgeClass}>
-                                        {dashboard.protectionEnabled ? 'ON' : 'OFF'}
+                                        <Trans>{dashboard.protectionEnabled ? 'on' : 'off'}</Trans>
                                    </span>
                                }
                            </div>
@ -72,4 +73,4 @@ Header.propTypes = {
    location: PropTypes.object,
 };

-export default Header;
+export default withNamespaces()(Header);
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@ -4,6 +4,7 @@ import ReactTable from 'react-table';
 import { saveAs } from 'file-saver/FileSaver';
 import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
+import { Trans, withNamespaces } from 'react-i18next';

 import { formatTime } from '../../helpers/helpers';
 import { getTrackerData } from '../../helpers/trackers/trackers';
@ -45,6 +46,7 @@ class Logs extends Component {

    toggleBlocking = (type, domain) => {
        const { userRules } = this.props.filtering;
+        const { t } = this.props;
        const lineEnding = !endsWith(userRules, '\n') ? '\n' : '';
        const baseRule = `||${domain}^$important`;
        const baseUnblocking = `@@${baseRule}`;
@ -55,10 +57,10 @@ class Logs extends Component {

        if (userRules.match(preparedBlockingRule)) {
            this.props.setRules(userRules.replace(`${blockingRule}`, ''));
-            this.props.addSuccessToast(`Rule removed from the custom filtering rules: ${blockingRule}`);
+            this.props.addSuccessToast(`${t('rule_removed_from_custom_filtering_toast')}: ${blockingRule}`);
        } else if (!userRules.match(preparedUnblockingRule)) {
            this.props.setRules(`${userRules}${lineEnding}${unblockingRule}\n`);
-            this.props.addSuccessToast(`Rule added to the custom filtering rules: ${unblockingRule}`);
+            this.props.addSuccessToast(`${t('rule_added_to_custom_filtering_toast')}: ${unblockingRule}`);
        }

        this.props.getFilteringStatus();
@ -66,7 +68,7 @@ class Logs extends Component {

    renderBlockingButton(isFiltered, domain) {
        const buttonClass = isFiltered ? 'btn-outline-secondary' : 'btn-outline-danger';
-        const buttonText = isFiltered ? 'Unblock' : 'Block';
+        const buttonText = isFiltered ? 'unblock_btn' : 'block_btn';

        return (
            <div className="logs__action">
@ -75,21 +77,22 @@ class Logs extends Component {
                    className={`btn btn-sm ${buttonClass}`}
                    onClick={() => this.toggleBlocking(buttonText.toLowerCase(), domain)}
                >
-                    {buttonText}
+                    <Trans>{buttonText}</Trans>
                </button>
            </div>
        );
    }

    renderLogs(logs) {
+        const { t } = this.props;
        const columns = [{
-            Header: 'Time',
+            Header: t('time_table_header'),
            accessor: 'time',
            maxWidth: 110,
            filterable: false,
            Cell: ({ value }) => (<div className="logs__row"><span className="logs__text" title={value}>{formatTime(value)}</span></div>),
        }, {
-            Header: 'Domain name',
+            Header: t('domain_name_table_header'),
            accessor: 'domain',
            Cell: (row) => {
                const response = row.value;
@ -105,11 +108,11 @@ class Logs extends Component {
                );
            },
        }, {
-            Header: 'Type',
+            Header: t('type_table_header'),
            accessor: 'type',
            maxWidth: 60,
        }, {
-            Header: 'Response',
+            Header: t('response_table_header'),
            accessor: 'response',
            Cell: (row) => {
                const responses = row.value;
@ -123,7 +126,7 @@ class Logs extends Component {

                if (reason === 'FilteredBlackList' || reason === 'NotFilteredWhiteList') {
                    if (filterId === 0) {
-                        filterName = 'Custom filtering rules';
+                        filterName = 'custom_filter_rules';
                    } else {
                        const filterItem = Object.keys(filters)
                            .filter(key => filters[key].id === filterId);
@ -156,7 +159,7 @@ class Logs extends Component {
                }
                return (
                    <div className="logs__row">
-                        <span>Empty</span>
+                        <span><Trans>empty_response_status</Trans></span>
                        {this.renderTooltip(isFiltered, rule, filterName)}
                    </div>
                );
@ -174,11 +177,11 @@ class Logs extends Component {
                    className="form-control"
                    value={filter ? filter.value : 'all'}
                >
-                    <option value="all">Show all</option>
-                    <option value="filtered">Show filtered</option>
+                    <option value="all">{ t('show_all_filter_type') }</option>
+                    <option value="filtered">{ t('show_filtered_type') }</option>
                </select>,
        }, {
-            Header: 'Client',
+            Header: t('Client'),
            accessor: 'client',
            maxWidth: 250,
            Cell: (row) => {
@ -206,7 +209,14 @@ class Logs extends Component {
                showPagination={true}
                defaultPageSize={50}
                minRows={7}
-                noDataText="No logs found"
+                // Text
+                previousText={ t('previous_btn') }
+                nextText={ t('next_btn') }
+                loadingText={ t('loading_table_status') }
+                pageText={ t('page_table_footer_text') }
+                ofText={ t('of_table_footer_text') }
+                rowsText={ t('rows_table_footer_text') }
+                noDataText={ t('no_logs_found') }
                defaultFilterMethod={(filter, row) => {
                    const id = filter.pivotId || filter.id;
                    return row[id] !== undefined ?
@ -259,17 +269,17 @@ class Logs extends Component {
                        className="btn btn-gray btn-sm mr-2"
                        type="submit"
                        onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
-                    >Disable log</button>
+                    ><Trans>disabled_log_btn</Trans></button>
                    <button
                        className="btn btn-primary btn-sm mr-2"
                        type="submit"
                        onClick={this.handleDownloadButton}
-                    >Download log file</button>
+                    ><Trans>download_log_file_btn</Trans></button>
                    <button
                        className="btn btn-outline-primary btn-sm"
                        type="submit"
                        onClick={this.getLogs}
-                    >Refresh</button>
+                    ><Trans>refresh_btn</Trans></button>
                </Fragment>
            );
        }
@ -279,16 +289,16 @@ class Logs extends Component {
                className="btn btn-success btn-sm mr-2"
                type="submit"
                onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
-            >Enable log</button>
+            ><Trans>enabled_log_btn</Trans></button>
        );
    }

    render() {
-        const { queryLogs, dashboard } = this.props;
+        const { queryLogs, dashboard, t } = this.props;
        const { queryLogEnabled } = dashboard;
        return (
            <Fragment>
-                <PageTitle title="Query Log" subtitle="Last 5000 DNS queries">
+                <PageTitle title={ t('query_log') } subtitle={ t('last_dns_queries') }>
                    <div className="page-title__actions">
                        {this.renderButtons(queryLogEnabled)}
                    </div>
@ -314,6 +324,7 @@ Logs.propTypes = {
    userRules: PropTypes.string,
    setRules: PropTypes.func,
    addSuccessToast: PropTypes.func,
+    t: PropTypes.func,
 };

-export default Logs;
+export default withNamespaces()(Logs);
--- a/client/src/components/Settings/Upstream.js
+++ b/client/src/components/Settings/Upstream.js
@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Trans, withNamespaces } from 'react-i18next';
 import Card from '../ui/Card';

-export default class Upstream extends Component {
+class Upstream extends Component {
    handleChange = (e) => {
        const { value } = e.currentTarget;
        this.props.handleUpstreamChange(value);
@ -23,11 +24,12 @@ export default class Upstream extends Component {
            'btn btn-primary btn-standart mr-2': true,
            'btn btn-primary btn-standart mr-2 btn-loading': this.props.processingTestUpstream,
        });
+        const { t } = this.props;

        return (
            <Card
-                title="Upstream DNS servers"
-                subtitle="If you keep this field empty, AdGuard Home will use <a href='https://1.1.1.1/' target='_blank'>Cloudflare DNS</a> as an upstream. Use tls:// prefix for DNS over TLS servers."
+                title={ t('upstream_dns') }
+                subtitle={ t('upstream_dns_hint') }
                bodyType="card-body box-body--settings"
            >
                <div className="row">
@ -44,14 +46,14 @@ export default class Upstream extends Component {
                                    type="button"
                                    onClick={this.handleTest}
                                >
-                                    Test upstreams
+                                    <Trans>test_upstream_btn</Trans>
                                </button>
                                <button
                                    className="btn btn-success btn-standart"
                                    type="submit"
                                    onClick={this.handleSubmit}
                                >
-                                    Apply
+                                    <Trans>apply_btn</Trans>
                                </button>
                            </div>
                        </form>
@ -68,4 +70,7 @@ Upstream.propTypes = {
    handleUpstreamChange: PropTypes.func,
    handleUpstreamSubmit: PropTypes.func,
    handleUpstreamTest: PropTypes.func,
+    t: PropTypes.func,
 };
+
+export default withNamespaces()(Upstream);
--- a/client/src/components/Settings/index.js
+++ b/client/src/components/Settings/index.js
@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { withNamespaces, Trans } from 'react-i18next';
 import Upstream from './Upstream';
 import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
@ -7,27 +8,27 @@ import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import './Settings.css';

-export default class Settings extends Component {
+class Settings extends Component {
    settings = {
        filtering: {
            enabled: false,
-            title: 'Block domains using filters and hosts files',
-            subtitle: 'You can setup blocking rules in the <a href="#filters">Filters</a> settings.',
+            title: 'block_domain_use_filters_and_hosts',
+            subtitle: 'filters_block_toggle_hint',
        },
        safebrowsing: {
            enabled: false,
-            title: 'Use AdGuard browsing security web service',
-            subtitle: 'AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.',
+            title: 'use_adguard_browsing_sec',
+            subtitle: 'use_adguard_browsing_sec_hint',
        },
        parental: {
            enabled: false,
-            title: 'Use AdGuard parental control web service',
-            subtitle: 'AdGuard Home will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.',
+            title: 'use_adguard_parental',
+            subtitle: 'use_adguard_parental_hint',
        },
        safesearch: {
            enabled: false,
-            title: 'Enforce safe search',
-            subtitle: 'AdGuard Home can enforce safe search in the following search engines: Google, Youtube, Bing, and Yandex.',
+            title: 'enforce_safe_search',
+            subtitle: 'enforce_save_search_hint',
        },
    };

@ -47,7 +48,7 @@ export default class Settings extends Component {
        if (this.props.dashboard.upstreamDns.length > 0) {
            this.props.testUpstream(this.props.dashboard.upstreamDns);
        } else {
-            this.props.addErrorToast({ error: 'No servers specified' });
+            this.props.addErrorToast({ error: this.props.t('no_servers_specified') });
        }
    };

@ -64,22 +65,22 @@ export default class Settings extends Component {
            });
        }
        return (
-            <div>No settings</div>
+            <div><Trans>no_settings</Trans></div>
        );
    }

    render() {
-        const { settings } = this.props;
+        const { settings, t } = this.props;
        const { upstreamDns } = this.props.dashboard;
        return (
            <Fragment>
-                <PageTitle title="Settings" />
+                <PageTitle title={ t('settings') } />
                {settings.processing && <Loading />}
                {!settings.processing &&
                    <div className="content">
                        <div className="row">
                            <div className="col-md-12">
-                                <Card title="General settings" bodyType="card-body box-body--settings">
+                                <Card title={ t('general_settings') } bodyType="card-body box-body--settings">
                                    <div className="form">
                                        {this.renderSettings(settings.settingsList)}
                                    </div>
@ -108,4 +109,7 @@ Settings.propTypes = {
    handleUpstreamChange: PropTypes.func,
    setUpstream: PropTypes.func,
    upstream: PropTypes.string,
+    t: PropTypes.func,
 };
+
+export default withNamespaces()(Settings);
--- a/client/src/components/Toasts/Toast.js
+++ b/client/src/components/Toasts/Toast.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';

 class Toast extends Component {
    componentDidMount() {
@ -18,7 +19,7 @@ class Toast extends Component {
        return (
            <div className={`toast toast--${this.props.type}`}>
                <p className="toast__content">
-                    {this.props.message}
+                    <Trans>{this.props.message}</Trans>
                </p>
                <button className="toast__dismiss" onClick={() => this.props.removeToast(this.props.id)}>
                    <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18 6-12 12"/><path d="m6 6 12 12"/></svg>
@ -35,4 +36,4 @@ Toast.propTypes = {
    removeToast: PropTypes.func.isRequired,
 };

-export default Toast;
+export default withNamespaces()(Toast);
--- a/client/src/components/ui/Card.css
+++ b/client/src/components/ui/Card.css
@ -49,15 +49,14 @@
 }

 .card-title-stats {
+    font-size: 13px;
    color: #9aa0ac;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
 }

 .card-body-stats {
    position: relative;
    flex: 1 1 auto;
+    height: calc(100% - 3rem);
    margin: 0;
    padding: 1rem 1.5rem;
 }
@ -84,3 +83,17 @@
 .card-value-percent:after {
    content: "%";
 }
+
+.card--full {
+    height: calc(100% - 1.5rem);
+}
+
+.card-wrap {
+    height: 100%;
+}
+
+@media screen and (min-width: 1280px) {
+    .card-title-stats {
+        font-size: 14px;
+    }
+}
--- a/client/src/components/ui/Card.js
+++ b/client/src/components/ui/Card.js
@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import './Card.css';

 const Card = props => (
-    <div className="card">
-        { props.title &&
+    <div className={props.type ? `card ${props.type}` : 'card'}>
+        {props.title &&
        <div className="card-header with-border">
            <div className="card-inner">
                <div className="card-title">
@ -33,6 +33,7 @@ Card.propTypes = {
    title: PropTypes.string,
    subtitle: PropTypes.string,
    bodyType: PropTypes.string,
+    type: PropTypes.string,
    refresh: PropTypes.node,
    children: PropTypes.node.isRequired,
 };
--- a/client/src/components/ui/Checkbox.js
+++ b/client/src/components/ui/Checkbox.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { withNamespaces } from 'react-i18next';

 import './Checkbox.css';

@ -10,6 +11,7 @@ class Checkbox extends Component {
            subtitle,
            enabled,
            handleChange,
+            t,
        } = this.props;
        return (
            <div className="form__group">
@ -18,8 +20,8 @@ class Checkbox extends Component {
                <input type="checkbox" className="checkbox__input" onChange={handleChange} checked={enabled}/>
                <span className="checkbox__label">
                    <span className="checkbox__label-text">
-                    <span className="checkbox__label-title">{title}</span>
-                    <span className="checkbox__label-subtitle" dangerouslySetInnerHTML={{ __html: subtitle }}/>
+                    <span className="checkbox__label-title">{ t(title) }</span>
+                    <span className="checkbox__label-subtitle" dangerouslySetInnerHTML={{ __html: t(subtitle) }}/>
                    </span>
                </span>
                </label>
@ -33,6 +35,7 @@ Checkbox.propTypes = {
    subtitle: PropTypes.string.isRequired,
    enabled: PropTypes.bool.isRequired,
    handleChange: PropTypes.func.isRequired,
+    t: PropTypes.func,
 };

-export default Checkbox;
+export default withNamespaces()(Checkbox);
--- a/client/src/components/ui/Footer.css
+++ b/client/src/components/ui/Footer.css
@ -0,0 +1,45 @@
+.footer__row {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.footer__column {
+    margin-bottom: 15px;
+}
+
+.footer__column--language {
+    min-width: 220px;
+    margin-bottom: 0;
+}
+
+.footer__link {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 15px;
+}
+
+.footer__link--report {
+    position: relative;
+    top: 1px;
+    margin-right: 0;
+}
+
+@media screen and (min-width: 768px) {
+    .footer__copyright {
+        margin-right: 25px;
+    }
+
+    .footer__row {
+        flex-direction: row;
+    }
+
+    .footer__column {
+        margin-bottom: 0;
+    }
+
+    .footer__column--language {
+        min-width: initial;
+        margin-left: auto;
+    }
+}
--- a/client/src/components/ui/Footer.js
+++ b/client/src/components/ui/Footer.js
@ -1,5 +1,10 @@
 import React, { Component } from 'react';
-import { REPOSITORY } from '../../helpers/constants';
+import { Trans, withNamespaces } from 'react-i18next';
+import { REPOSITORY, LANGUAGES } from '../../helpers/constants';
+import i18n from '../../i18n';
+
+import './Footer.css';
+import './Select.css';

 class Footer extends Component {
    getYear = () => {
@ -7,30 +12,36 @@ class Footer extends Component {
        return today.getFullYear();
    };

+    changeLanguage = (event) => {
+        i18n.changeLanguage(event.target.value);
+    }
+
    render() {
        return (
            <footer className="footer">
                <div className="container">
-                    <div className="row align-items-center flex-row">
-                        <div className="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
-                            <div className="row align-items-center justify-content-center">
-                                <div className="col-auto">
-                                    Copyright © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
-                                </div>
-                                <div className="col-auto">
-                                    <ul className="list-inline text-center mb-0">
-                                        <li className="list-inline-item">
-                                            <a href={REPOSITORY.URL} target="_blank" rel="noopener noreferrer">Homepage</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div className="col-auto">
-                                    <a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
-                                        Report an issue
-                                    </a>
-                                </div>
+                    <div className="footer__row">
+                        <div className="footer__column">
+                            <div className="footer__copyright">
+                                <Trans>copyright</Trans> © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
                            </div>
                        </div>
+                        <div className="footer__column">
+                            <a href={REPOSITORY.URL} className="footer__link" target="_blank" rel="noopener noreferrer">
+                                <Trans>homepage</Trans>
+                            </a>
+                            <a href={`${REPOSITORY.URL}/issues/new`} className="btn btn-outline-primary btn-sm footer__link footer__link--report" target="_blank" rel="noopener noreferrer">
+                                <Trans>report_an_issue</Trans>
+                            </a>
+                        </div>
+                        <div className="footer__column footer__column--language">
+                            <select className="form-control select select--language" value={i18n.language} onChange={this.changeLanguage}>
+                                {LANGUAGES.map(language =>
+                                    <option key={language.key} value={language.key}>
+                                        {language.name}
+                                    </option>)}
+                            </select>
+                        </div>
                    </div>
                </div>
            </footer>
@ -38,4 +49,4 @@ class Footer extends Component {
    }
 }

-export default Footer;
+export default withNamespaces()(Footer);
--- a/client/src/components/ui/Modal.js
+++ b/client/src/components/ui/Modal.js
@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
 import classnames from 'classnames';
+import { Trans, withNamespaces } from 'react-i18next';
 import { R_URL_REQUIRES_PROTOCOL } from '../../helpers/constants';
 import './Modal.css';

@ -13,7 +14,7 @@ const initialState = {
    isUrlValid: false,
 };

-export default class Modal extends Component {
+class Modal extends Component {
    state = initialState;

    // eslint-disable-next-line
@ -70,8 +71,8 @@ export default class Modal extends Component {
            if (!this.props.isFilterAdded) {
                return (
                    <React.Fragment>
-                        <input type="text" className={inputNameClass} placeholder="Enter name" onChange={this.handleNameChange} />
-                        <input type="text" className={inputUrlClass} placeholder="Enter URL" onChange={this.handleUrlChange} />
+                        <input type="text" className={inputNameClass} placeholder={ this.props.t('enter_name_hint') } onChange={this.handleNameChange} />
+                        <input type="text" className={inputUrlClass} placeholder={ this.props.t('enter_url_hint') } onChange={this.handleUrlChange} />
                        {inputDescription &&
                            <div className="description">
                                {inputDescription}
@ -81,7 +82,7 @@ export default class Modal extends Component {
            }
            return (
                <div className="description">
-                    Url added successfully
+                    <Trans>Url added successfully</Trans>
                </div>
            );
        };
@ -110,8 +111,8 @@ export default class Modal extends Component {
                    {
                        !this.props.isFilterAdded &&
                            <div className="modal-footer">
-                                <button type="button" className="btn btn-secondary" onClick={this.closeModal}>Cancel</button>
-                                <button type="button" className="btn btn-success" onClick={this.handleNext} disabled={isValidForSubmit}>Add filter</button>
+                                <button type="button" className="btn btn-secondary" onClick={this.closeModal}><Trans>cancel_btn</Trans></button>
+                                <button type="button" className="btn btn-success" onClick={this.handleNext} disabled={isValidForSubmit}><Trans>add_filter_btn</Trans></button>
                            </div>
                    }
                </div>
@ -127,4 +128,7 @@ Modal.propTypes = {
    inputDescription: PropTypes.string,
    addFilter: PropTypes.func.isRequired,
    isFilterAdded: PropTypes.bool,
+    t: PropTypes.func,
 };
+
+export default withNamespaces()(Modal);
--- a/client/src/components/ui/Popover.js
+++ b/client/src/components/ui/Popover.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
 import { getSourceData } from '../../helpers/trackers/trackers';
 import { captitalizeWords } from '../../helpers/helpers';

@ -13,13 +14,13 @@ class Popover extends Component {

        const source = (
            <div className="popover__list-item">
-                Source: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={sourceData.url}><strong>{sourceData.name}</strong></a>
+                <Trans>source_label</Trans>: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={sourceData.url}><strong>{sourceData.name}</strong></a>
            </div>
        );

        const tracker = (
            <div className="popover__list-item">
-                Name: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={data.url}><strong>{data.name}</strong></a>
+                <Trans>name_table_header</Trans>: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={data.url}><strong>{data.name}</strong></a>
            </div>
        );

@ -33,11 +34,12 @@ class Popover extends Component {
                <div className="popover__body">
                    <div className="popover__list">
                        <div className="popover__list-title">
-                            Found in the known domains database.
+                            <Trans>found_in_known_domain_db</Trans>
                        </div>
                        {tracker}
                        <div className="popover__list-item">
-                            Category: <strong>{categoryName}</strong>
+                            <Trans>category_label</Trans>: <strong>
+                            <Trans>{categoryName}</Trans></strong>
                        </div>
                        {source}
                    </div>
@ -51,4 +53,4 @@ Popover.propTypes = {
    data: PropTypes.object.isRequired,
 };

-export default Popover;
+export default withNamespaces()(Popover);
--- a/client/src/components/ui/PopoverFilter.js
+++ b/client/src/components/ui/PopoverFilter.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';

 import './Popover.css';

@ -13,10 +14,10 @@ class PopoverFilter extends Component {
                <div className="popover__body popover__body--filter">
                    <div className="popover__list">
                        <div className="popover__list-item popover__list-item--nowrap">
-                            Rule: <strong>{this.props.rule}</strong>
+                            <Trans>rule_label</Trans>: <strong>{this.props.rule}</strong>
                        </div>
                        {this.props.filter && <div className="popover__list-item popover__list-item--nowrap">
-                            Filter: <strong>{this.props.filter}</strong>
+                            <Trans>filter_label</Trans>: <strong>{this.props.filter}</strong>
                        </div>}
                    </div>
                </div>
@ -30,4 +31,4 @@ PopoverFilter.propTypes = {
    filter: PropTypes.string,
 };

-export default PopoverFilter;
+export default withNamespaces()(PopoverFilter);
--- a/client/src/components/ui/Select.css
+++ b/client/src/components/ui/Select.css
@ -0,0 +1,16 @@
+.select.select--language {
+    height: 45px;
+    padding: 0 32px 2px 33px;
+    outline: 0;
+    border-color: rgba(0, 40, 100, 0.12);
+    background-image: url("./svg/globe.svg"), url("./svg/chevron-down.svg");
+    background-repeat: no-repeat, no-repeat;
+    background-position: left 11px center, right 9px center;
+    background-size: 14px, 17px 20px;
+    appearance: none;
+    cursor: pointer;
+}
+
+.select--language::-ms-expand {
+    opacity: 0;
+}
--- a/client/src/components/ui/Tooltip.css
+++ b/client/src/components/ui/Tooltip.css
@ -50,5 +50,5 @@
 }

 .tooltip-custom--narrow:before {
-    width: 206px;
+    width: 220px;
 }
--- a/client/src/components/ui/svg/chevron-down.svg
+++ b/client/src/components/ui/svg/chevron-down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
--- a/client/src/components/ui/svg/globe.svg
+++ b/client/src/components/ui/svg/globe.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@ -1,12 +1,12 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;

 export const STATS_NAMES = {
-    avg_processing_time: 'Average processing time',
+    avg_processing_time: 'average_processing_time',
    blocked_filtering: 'Blocked by filters',
    dns_queries: 'DNS queries',
-    replaced_parental: 'Blocked adult websites',
-    replaced_safebrowsing: 'Blocked malware/phishing',
-    replaced_safesearch: 'Enforced safe search',
+    replaced_parental: 'stats_adult',
+    replaced_safebrowsing: 'stats_malware_phishing',
+    replaced_safesearch: 'enforced_save_search',
 };

 export const STATUS_COLORS = {
@ -20,3 +20,18 @@ export const REPOSITORY = {
    URL: 'https://github.com/AdguardTeam/AdGuardHome',
    TRACKERS_DB: 'https://github.com/AdguardTeam/AdGuardHome/tree/master/client/src/helpers/trackers/adguard.json',
 };
+
+export const LANGUAGES = [
+    {
+        key: 'en',
+        name: 'English',
+    },
+    {
+        key: 'ru',
+        name: 'Русский',
+    },
+    {
+        key: 'vi',
+        name: 'Tiếng Việt',
+    },
+];
--- a/client/src/i18n.js
+++ b/client/src/i18n.js
@ -0,0 +1,37 @@
+import i18n from 'i18next';
+import { reactI18nextModule } from 'react-i18next';
+import { initReactI18n } from 'react-i18next/hooks';
+import langDetect from 'i18next-browser-languagedetector';
+
+import vi from './__locales/vi.json';
+import en from './__locales/en.json';
+import ru from './__locales/ru.json';
+
+i18n
+    .use(langDetect)
+    .use(initReactI18n)
+    .use(reactI18nextModule) // passes i18n down to react-i18next
+    .init({
+        resources: {
+            en: {
+                translation: en,
+            },
+            vi: {
+                translation: vi,
+            },
+            ru: {
+                translation: ru,
+            },
+        },
+        fallbackLng: 'en',
+        keySeparator: false, // we use content as keys
+        nsSeparator: false, // Fix character in content
+        interpolation: {
+            escapeValue: false, // not needed for react!!
+        },
+        react: {
+            wait: true,
+        },
+    });
+
+export default i18n;
--- a/client/src/index.js
+++ b/client/src/index.js
@ -5,6 +5,7 @@ import './components/App/index.css';
 import App from './containers/App';
 import configureStore from './configureStore';
 import reducers from './reducers';
+import './i18n';

 const store = configureStore(reducers, {}); // set initial state
 ReactDOM.render(
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@ -49,6 +49,7 @@ const dashboard = handleActions({
            querylog_enabled: queryLogEnabled,
            upstream_dns: upstreamDns,
            protection_enabled: protectionEnabled,
+            language,
        } = payload;
        const newState = {
            ...state,
@ -60,6 +61,7 @@ const dashboard = handleActions({
            queryLogEnabled,
            upstreamDns: upstreamDns.join('\n'),
            protectionEnabled,
+            language,
        };
        return newState;
    },
@ -145,6 +147,11 @@ const dashboard = handleActions({
        const { upstreamDns } = payload;
        return { ...state, upstreamDns };
    },
+
+    [actions.getLanguageSuccess]: (state, { payload }) => {
+        const newState = { ...state, language: payload };
+        return newState;
+    },
 }, {
    processing: true,
    isCoreRunning: false,
--- a/config.go
+++ b/config.go
@ -45,6 +45,7 @@ type configuration struct {
 	CoreDNS       coreDNSConfig `yaml:"coredns"`
 	Filters       []filter      `yaml:"filters"`
 	UserRules     []string      `yaml:"user_rules"`
+	Language      string        `yaml:"language"` // two-letter ISO 639-1 language code

 	sync.RWMutex `yaml:"-"`
 }
--- a/control.go
+++ b/control.go
@ -84,6 +84,7 @@ func handleStatus(w http.ResponseWriter, r *http.Request) {
 		"bootstrap_dns":      config.CoreDNS.BootstrapDNS,
 		"upstream_dns":       config.CoreDNS.UpstreamDNS,
 		"version":            VersionString,
+		"language":           config.Language,
 	}

 	jsonVal, err := json.Marshal(data)
@ -876,6 +877,8 @@ func registerControlHandlers() {
 	http.HandleFunc("/control/querylog_disable", optionalAuth(ensurePOST(handleQueryLogDisable)))
 	http.HandleFunc("/control/set_upstream_dns", optionalAuth(ensurePOST(handleSetUpstreamDNS)))
 	http.HandleFunc("/control/test_upstream_dns", optionalAuth(ensurePOST(handleTestUpstreamDNS)))
+	http.HandleFunc("/control/i18n/change_language", optionalAuth(ensurePOST(handleI18nChangeLanguage)))
+	http.HandleFunc("/control/i18n/current_language", optionalAuth(ensureGET(handleI18nCurrentLanguage)))
 	http.HandleFunc("/control/stats_top", optionalAuth(ensureGET(corednsplugin.HandleStatsTop)))
 	http.HandleFunc("/control/stats", optionalAuth(ensureGET(corednsplugin.HandleStats)))
 	http.HandleFunc("/control/stats_history", optionalAuth(ensureGET(corednsplugin.HandleStatsHistory)))
--- a/i18n.go
+++ b/i18n.go
@ -0,0 +1,66 @@
+package main
+
+import (
+	"fmt"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"strings"
+)
+
+// --------------------
+// internationalization
+// --------------------
+var allowedLanguages = map[string]bool{
+	"en": true,
+	"ru": true,
+	"vi": true,
+}
+
+func isLanguageAllowed(language string) bool {
+	l := strings.ToLower(language)
+	if allowedLanguages[l] {
+		return true
+	}
+	return false
+}
+
+func handleI18nCurrentLanguage(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/plain")
+	log.Printf("config.Language is %s", config.Language)
+	_, err := fmt.Fprintf(w, "%s\n", config.Language)
+	if err != nil {
+		errortext := fmt.Sprintf("Unable to write response json: %s", err)
+		log.Println(errortext)
+		http.Error(w, errortext, http.StatusInternalServerError)
+		return
+	}
+}
+
+func handleI18nChangeLanguage(w http.ResponseWriter, r *http.Request) {
+	body, err := ioutil.ReadAll(r.Body)
+	if err != nil {
+		errorText := fmt.Sprintf("failed to read request body: %s", err)
+		log.Println(errorText)
+		http.Error(w, errorText, http.StatusBadRequest)
+		return
+	}
+
+	language := strings.TrimSpace(string(body))
+	if language == "" {
+		errorText := fmt.Sprintf("empty language specified")
+		log.Println(errorText)
+		http.Error(w, errorText, http.StatusBadRequest)
+		return
+	}
+	if !isLanguageAllowed(language) {
+		errorText := fmt.Sprintf("unknown language specified: %s", language)
+		log.Println(errorText)
+		http.Error(w, errorText, http.StatusBadRequest)
+		return
+	}
+
+	config.Language = language
+
+	httpUpdateConfigReloadDNSReturnOK(w, r)
+}
--- a/openapi.yaml
+++ b/openapi.yaml
@ -46,6 +46,7 @@ paths:
                              - 1.1.1.1
                              - 1.0.0.1
                            version: "v0.1"
+                            language: "en"
    /enable_protection:
        post:
            tags:
@ -193,6 +194,33 @@ paths:
                            8.8.8.8: OK
                            8.8.4.4: OK
                            "192.168.1.104:53535": "Couldn't communicate with DNS server"
+    /i18n/change_language:
+        post:
+            tags:
+                - i18n
+            operationId: changeLanguage
+            summary: "Change current language. Argument must be an ISO 639-1 two-letter code"
+            consumes:
+                - text/plain
+            parameters:
+                - in: body
+                  name: language
+                  description: "New language. It must be known to the server and must be an ISO 639-1 two-letter code"
+                  schema:
+                    type: string
+                    example: en
+    /i18n/current_language:
+        get:
+            tags:
+                - i18n
+            operationId: currentLanguage
+            summary: "Get currently set language. Result is ISO 639-1 two-letter code. Empty result means default language."
+            responses:
+                200:
+                    description: OK
+                    examples:
+                        text/plain:
+                            en
    /stats_top:
        get:
            tags:
--- a/scripts/translations/README.md
+++ b/scripts/translations/README.md
@ -0,0 +1,13 @@
+## OneSky intergration script
+
+### Usage
+
+Rename `oneskyapp.json.dist` to `oneskyapp.json` and put your data in appropriate fields.
+
+```
+npm install
+node download.js
+node upload.js
+```
+
+After download you'll find the output locales in the `client/src/__locales/` folder.
--- a/scripts/translations/download.js
+++ b/scripts/translations/download.js
@ -0,0 +1,107 @@
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const requestPromise = require('request-promise');
+
+const LOCALES_DIR = '../../client/src/__locales';
+const LOCALES_LIST = ['en', 'ru', 'vi'];
+
+/**
+ * Hash content
+ * @param {string} content
+ */
+const hashString = content => crypto.createHash('md5').update(content, 'utf8').digest('hex');
+
+/**
+ * Prepare params to get translations from oneskyapp
+ * @param {string} locale language shortcut
+ * @param {object} oneskyapp config oneskyapp
+ */
+const prepare = (locale, oneskyapp) => {
+    const timestamp = Math.round(new Date().getTime() / 1000);
+
+    let url = [];
+    url.push(oneskyapp.url + oneskyapp.projectId);
+    url.push(`/translations?locale=${locale}`);
+    url.push('&source_file_name=en.json');
+    url.push(`&export_file_name=${locale}.json`);
+    url.push(`&api_key=${oneskyapp.apiKey}`);
+    url.push(`&timestamp=${timestamp}`);
+    url.push(`&dev_hash=${hashString(timestamp + oneskyapp.secretKey)}`);
+    url = url.join('');
+
+    return url;
+};
+
+/**
+ * Promise wrapper for writing in file
+ * @param {string} filename
+ * @param {any} body
+ */
+function writeInFile(filename, body) {
+    return new Promise((resolve, reject) => {
+        if (typeof body !== 'string') {
+            try {
+                body = JSON.stringify(body, null, 4); // eslint-disable-line
+            } catch (err) {
+                reject(err);
+            }
+        }
+
+        fs.writeFile(filename, body, (err) => {
+            if (err) reject(err);
+            resolve('Ok');
+        });
+    });
+}
+
+/**
+ * Request to server onesky
+ * @param {string} url
+ * @param {string} locale
+ */
+const request = (url, locale) => (
+    requestPromise.get(url)
+        .then((res) => {
+            if (res.length) {
+                const pathToFile = path.join(LOCALES_DIR, `${locale}.json`);
+                return writeInFile(pathToFile, res);
+            }
+            return null;
+        })
+        .then((res) => {
+            let result = locale;
+            result += res ? ' - OK' : ' - Empty';
+            return result;
+        })
+        .catch((err) => {
+            console.log(err);
+            return `${locale} - Not OK`;
+        }));
+
+/**
+ * Download locales
+ */
+const download = () => {
+    const locales = LOCALES_LIST;
+    let oneskyapp;
+    try {
+        oneskyapp = JSON.parse(fs.readFileSync('./oneskyapp.json'));
+    } catch (err) {
+        throw new Error(err);
+    }
+
+    const requests = locales.map((locale) => {
+        const url = prepare(locale, oneskyapp);
+        return request(url, locale);
+    });
+
+    Promise
+        .all(requests)
+        .then((res) => {
+            res.forEach(item => console.log(item));
+        })
+        .catch(err => console.log(err));
+};
+
+download();
--- a/scripts/translations/oneskyapp.json.dist
+++ b/scripts/translations/oneskyapp.json.dist
@ -0,0 +1,6 @@
+{
+    "url": "https://platform.api.onesky.io/1/projects/",
+    "projectId": "<PROJECT ID>",
+    "apiKey": "<API KEY>",
+    "secretKey": "<SECRET KEY>"
+}
--- a/scripts/translations/package-lock.json
+++ b/scripts/translations/package-lock.json
@ -0,0 +1,380 @@
+{
+  "name": "translations",
+  "version": "0.1.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "ajv": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz",
+      "integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==",
+      "requires": {
+        "fast-deep-equal": "^2.0.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "bluebird": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
+      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw=="
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "combined-stream": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
+      "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
+    "fast-deep-equal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
+    },
+    "har-validator": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "requires": {
+        "ajv": "^6.5.5",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+    },
+    "mime-db": {
+      "version": "1.37.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
+      "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg=="
+    },
+    "mime-types": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
+      "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==",
+      "requires": {
+        "mime-db": "~1.37.0"
+      }
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
+    "psl": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz",
+      "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ=="
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+    },
+    "request": {
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      }
+    },
+    "request-promise": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.2.tgz",
+      "integrity": "sha1-0epG1lSm7k+O5qT+oQGMIpEZBLQ=",
+      "requires": {
+        "bluebird": "^3.5.0",
+        "request-promise-core": "1.1.1",
+        "stealthy-require": "^1.1.0",
+        "tough-cookie": ">=2.3.3"
+      }
+    },
+    "request-promise-core": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz",
+      "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=",
+      "requires": {
+        "lodash": "^4.13.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sshpk": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz",
+      "integrity": "sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==",
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+    },
+    "tough-cookie": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "requires": {
+        "psl": "^1.1.24",
+        "punycode": "^1.4.1"
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
+    },
+    "uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "requires": {
+        "punycode": "^2.1.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+        }
+      }
+    },
+    "uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    }
+  }
+}
--- a/scripts/translations/package.json
+++ b/scripts/translations/package.json
@ -0,0 +1,9 @@
+{
+    "name": "translations",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "request": "^2.88.0",
+        "request-promise": "^4.2.2"
+    }
+}
--- a/scripts/translations/upload.js
+++ b/scripts/translations/upload.js
@ -0,0 +1,51 @@
+const path = require('path');
+const fs = require('fs');
+const crypto = require('crypto');
+const request = require('request-promise');
+
+const LOCALES_DIR = '../../client/src/__locales';
+
+/**
+ * Hash content
+ *
+ * @param {string} content
+ */
+const hashString = content => crypto.createHash('md5').update(content, 'utf8').digest('hex');
+
+/**
+ * Prepare post params
+ */
+const prepare = () => {
+    let oneskyapp;
+    try {
+        oneskyapp = JSON.parse(fs.readFileSync('./oneskyapp.json'));
+    } catch (err) {
+        throw new Error(err);
+    }
+
+    const url = `${oneskyapp.url}${oneskyapp.projectId}/files`;
+    const timestamp = Math.round(new Date().getTime() / 1000);
+    const formData = {
+        timestamp,
+        file: fs.createReadStream(path.resolve(LOCALES_DIR, 'en.json')),
+        file_format: 'HIERARCHICAL_JSON',
+        locale: 'en',
+        is_keeping_all_strings: 'false',
+        api_key: oneskyapp.apiKey,
+        dev_hash: hashString(timestamp + oneskyapp.secretKey),
+    };
+
+    return { url, formData };
+};
+
+/**
+ * Make request to onesky to upload new json
+ */
+const upload = () => {
+    const { url, formData } = prepare();
+    request
+        .post({ url, formData })
+        .catch(err => console.log(err));
+};
+
+upload();
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9aa0ac" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>`