diff --git a/web/package-lock.json b/web/package-lock.json
index 12e2d86b..19a501bb 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -14,9 +14,13 @@
         "@mui/material": "latest",
         "dexie": "^3.2.1",
         "dexie-react-hooks": "^1.1.1",
+        "i18next": "^21.6.14",
+        "i18next-browser-languagedetector": "^6.1.4",
+        "i18next-http-backend": "^1.4.0",
         "js-base64": "^3.7.2",
         "react": "latest",
         "react-dom": "latest",
+        "react-i18next": "^11.16.2",
         "react-infinite-scroll-component": "^6.1.0",
         "react-router-dom": "^6.2.2",
         "react-scripts": "^5.0.0",
@@ -3706,9 +3710,9 @@
       "integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA=="
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -3726,9 +3730,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.0.tgz",
+      "integrity": "sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5596,6 +5600,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "dependencies": {
+        "node-fetch": "2.6.7"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6287,9 +6299,9 @@
       }
     },
     "node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "funding": [
         {
           "type": "github",
@@ -6390,9 +6402,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.104",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz",
-      "integrity": "sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ=="
+      "version": "1.4.106",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
+      "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -8193,6 +8205,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -8327,6 +8347,44 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "21.6.14",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.14.tgz",
+      "integrity": "sha512-XL6WyD+xlwQwbieXRlXhKWoLb/rkch50/rA+vl6untHnJ+aYnkQ0YDZciTWE78PPhOpbi2gR0LTJCJpiAhA+uQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.17.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.4.tgz",
+      "integrity": "sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.6"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.4.0.tgz",
+      "integrity": "sha512-wsvx7E/CT1pHmBM99Vu57YLJpsrHbVjxGxf25EIJ/6oTjsvCkZZ6c3SA4TejcK5jIHfv9oLxQX8l+DFKZHZ0Gg==",
+      "dependencies": {
+        "cross-fetch": "3.1.5"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -10940,9 +10998,9 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.7.3.tgz",
-      "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.8.0.tgz",
+      "integrity": "sha512-AmXqneQZL3KZMIgBpaPTeI6pfwh+xQ2vutMsyqOu1TBdEXFZgpG/80wuJ531w2ZN7TI0/oc8CPxzh/DKQudZqg==",
       "engines": {
         "node": ">=12"
       }
@@ -11231,6 +11289,44 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -13311,6 +13407,28 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-i18next": {
+      "version": "11.16.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.2.tgz",
+      "integrity": "sha512-1iuZduvARUelL5ux663FvIoDZExwFO+9QtRAAt4uvs1/aun4cUZt8XBrVg7iiDgNls9cOSORAhE7Ri5KA9RMvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-infinite-scroll-component": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
@@ -15331,6 +15449,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -15387,9 +15513,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.71.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
-      "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+      "version": "5.72.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
+      "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -18726,9 +18852,9 @@
       "integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA=="
     },
     "@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/q": {
       "version": "1.5.5",
@@ -18746,9 +18872,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.0.tgz",
+      "integrity": "sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -20152,6 +20278,14 @@
         "yaml": "^1.7.2"
       }
     },
+    "cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "requires": {
+        "node-fetch": "2.6.7"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -20640,9 +20774,9 @@
       }
     },
     "domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
     },
     "domexception": {
       "version": "2.0.1",
@@ -20715,9 +20849,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.104",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz",
-      "integrity": "sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ=="
+      "version": "1.4.106",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
+      "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -22026,6 +22160,14 @@
         "terser": "^5.10.0"
       }
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
     "html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -22117,6 +22259,30 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "i18next": {
+      "version": "21.6.14",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.14.tgz",
+      "integrity": "sha512-XL6WyD+xlwQwbieXRlXhKWoLb/rkch50/rA+vl6untHnJ+aYnkQ0YDZciTWE78PPhOpbi2gR0LTJCJpiAhA+uQ==",
+      "requires": {
+        "@babel/runtime": "^7.17.2"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.4.tgz",
+      "integrity": "sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg==",
+      "requires": {
+        "@babel/runtime": "^7.14.6"
+      }
+    },
+    "i18next-http-backend": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.4.0.tgz",
+      "integrity": "sha512-wsvx7E/CT1pHmBM99Vu57YLJpsrHbVjxGxf25EIJ/6oTjsvCkZZ6c3SA4TejcK5jIHfv9oLxQX8l+DFKZHZ0Gg==",
+      "requires": {
+        "cross-fetch": "3.1.5"
+      }
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -23989,9 +24155,9 @@
       }
     },
     "lru-cache": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.7.3.tgz",
-      "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw=="
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.8.0.tgz",
+      "integrity": "sha512-AmXqneQZL3KZMIgBpaPTeI6pfwh+xQ2vutMsyqOu1TBdEXFZgpG/80wuJ531w2ZN7TI0/oc8CPxzh/DKQudZqg=="
     },
     "magic-string": {
       "version": "0.25.9",
@@ -24201,6 +24367,35 @@
         "tslib": "^2.0.3"
       }
     },
+    "node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      },
+      "dependencies": {
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
     "node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -25564,6 +25759,16 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-i18next": {
+      "version": "11.16.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.2.tgz",
+      "integrity": "sha512-1iuZduvARUelL5ux663FvIoDZExwFO+9QtRAAt4uvs1/aun4cUZt8XBrVg7iiDgNls9cOSORAhE7Ri5KA9RMvg==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-infinite-scroll-component": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
@@ -27067,6 +27272,11 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -27114,9 +27324,9 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.71.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
-      "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+      "version": "5.72.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
+      "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
diff --git a/web/package.json b/web/package.json
index 7b37584d..e97191b0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,9 +15,13 @@
     "@mui/material": "latest",
     "dexie": "^3.2.1",
     "dexie-react-hooks": "^1.1.1",
+    "i18next": "^21.6.14",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-http-backend": "^1.4.0",
     "js-base64": "^3.7.2",
     "react": "latest",
     "react-dom": "latest",
+    "react-i18next": "^11.16.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
new file mode 100644
index 00000000..08250850
--- /dev/null
+++ b/web/public/static/langs/en.json
@@ -0,0 +1,3 @@
+{
+  "nav_button_subscribe": "Subscribe to topic"
+}
diff --git a/web/src/components/App.js b/web/src/components/App.js
index 5e9a67ca..25e4983d 100644
--- a/web/src/components/App.js
+++ b/web/src/components/App.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Suspense } from "react";
 import {useEffect, useState} from 'react';
 import Box from '@mui/material/Box';
 import {ThemeProvider} from '@mui/material/styles';
@@ -20,30 +21,39 @@ import routes from "./routes";
 import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
 import SendDialog from "./SendDialog";
 import Messaging from "./Messaging";
+import "./i18n"; // Translations!
 
 // TODO races when two tabs are open
 // TODO investigate service workers
 
 const App = () => {
     return (
-        <BrowserRouter>
-            <ThemeProvider theme={theme}>
-                <CssBaseline/>
-                <ErrorBoundary>
-                    <Routes>
-                        <Route element={<Layout/>}>
-                            <Route path={routes.root} element={<AllSubscriptions/>}/>
-                            <Route path={routes.settings} element={<Preferences/>}/>
-                            <Route path={routes.subscription} element={<SingleSubscription/>}/>
-                            <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
-                        </Route>
-                    </Routes>
-                </ErrorBoundary>
-            </ThemeProvider>
-        </BrowserRouter>
+        <Suspense fallback={<Loader />}>
+            <BrowserRouter>
+                <ThemeProvider theme={theme}>
+                    <CssBaseline/>
+                    <ErrorBoundary>
+                        <Routes>
+                            <Route element={<Layout/>}>
+                                <Route path={routes.root} element={<AllSubscriptions/>}/>
+                                <Route path={routes.settings} element={<Preferences/>}/>
+                                <Route path={routes.subscription} element={<SingleSubscription/>}/>
+                                <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
+                            </Route>
+                        </Routes>
+                    </ErrorBoundary>
+                </ThemeProvider>
+            </BrowserRouter>
+        </Suspense>
     );
 }
 
+const Loader = () => (
+    <div>
+        <div>loading...</div>
+    </div>
+);
+
 const AllSubscriptions = () => {
     const { subscriptions } = useOutletContext();
     return <Notifications mode="all" subscriptions={subscriptions}/>;
diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js
index 1be8d075..8e408c78 100644
--- a/web/src/components/Navigation.js
+++ b/web/src/components/Navigation.js
@@ -24,6 +24,7 @@ import Box from "@mui/material/Box";
 import notifier from "../app/Notifier";
 import config from "../app/config";
 import ArticleIcon from '@mui/icons-material/Article';
+import {useTranslation} from "react-i18next";
 
 const navWidth = 280;
 
@@ -61,6 +62,7 @@ const Navigation = (props) => {
 Navigation.width = navWidth;
 
 const NavList = (props) => {
+    const { t } = useTranslation();
     const navigate = useNavigate();
     const location = useLocation();
     const [subscribeDialogKey, setSubscribeDialogKey] = useState(0);
@@ -124,7 +126,7 @@ const NavList = (props) => {
                 </ListItemButton>
                 <ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
                     <ListItemIcon><AddIcon/></ListItemIcon>
-                    <ListItemText primary="Subscribe to topic"/>
+                    <ListItemText primary={t("nav_button_subscribe")}/>
                 </ListItemButton>
             </List>
             <SubscribeDialog
diff --git a/web/src/components/i18n.js b/web/src/components/i18n.js
new file mode 100644
index 00000000..7400a998
--- /dev/null
+++ b/web/src/components/i18n.js
@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+// init i18next
+// for all options read: https://www.i18next.com/overview/configuration-options
+// learn more: https://github.com/i18next/i18next-browser-languageDetector
+// learn more: https://github.com/i18next/i18next-http-backend
+
+i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        fallbackLng: 'en',
+        debug: true,
+        interpolation: {
+            escapeValue: false, // not needed for react as it escapes by default
+        },
+        backend: {
+            loadPath: '/static/langs/{{lng}}.json',
+        }
+    });
+
+export default i18n;