chore: Mobx & React-Router upgrade (#406)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

68 files changed, 780 insertions, 754 deletions

diff --git a/.gitignore b/.gitignore
index 325338740..77e359b22 100644
--- a/.gitignore
+++ b/.gitignore
@@ -124,7 +124,6 @@ fabric.properties
 # Icon must end with two \r
 Icon
 
-
 # Thumbnails
 ._*
 
diff --git a/package-lock.json b/package-lock.json
index 70ac3264a..53224704f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@krisdages/electron-process-manager": "3.0.0",
         "@mdi/js": "6.9.96",
         "@mdi/react": "1.6.0",
+        "@superwf/mobx-react-router": "7.4.0",
         "auto-launch": "5.0.5",
         "btoa": "1.2.1",
         "classnames": "2.3.1",
@@ -47,11 +48,10 @@
         "macos-version": "5.2.1",
         "mime-types": "2.1.35",
         "minimist": "1.2.6",
-        "mobx": "5.15.7",
+        "mobx": "6.6.1",
         "mobx-localstorage": "1.2.0",
-        "mobx-react": "6.3.1",
-        "mobx-react-form": "2.0.9",
-        "mobx-react-router": "3.1.2",
+        "mobx-react": "7.5.1",
+        "mobx-react-form": "3.2.0",
         "moment": "2.29.4",
         "ms": "2.1.3",
         "node-fetch": "2.6.7",
@@ -66,11 +66,11 @@
         "react-dom": "17.0.2",
         "react-dropzone": "11.7.1",
         "react-electron-web-view": "2.0.1",
-        "react-intl": "5.25.1",
+        "react-intl": "6.0.5",
         "react-jss": "10.9.0",
         "react-loader": "2.4.7",
         "react-modal": "3.15.1",
-        "react-router": "3.2.6",
+        "react-router-dom": "6.3.0",
         "react-sortable-hoc": "2.0.0",
         "react-tooltip": "4.2.21",
         "react-topbar-progress-indicator": "4.1.1",
@@ -3100,11 +3100,11 @@
       }
     },
     "node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz",
+      "integrity": "sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/icu-messageformat-parser": {
@@ -3129,17 +3129,17 @@
       }
     },
     "node_modules/@formatjs/intl": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
-      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.3.1.tgz",
+      "integrity": "sha512-f06qZ/ukpeN24gc01qFjh3P+r3FU/ikY4yG+fDJu6dPNvpUQzDy98lYogA1dr6ig2UtrnoEk3xncyFPL1e9cZw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/fast-memoize": "1.2.4",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "@formatjs/intl-displaynames": "6.0.3",
+        "@formatjs/intl-listformat": "7.0.3",
+        "intl-messageformat": "10.1.1",
+        "tslib": "2.4.0"
       },
       "peerDependencies": {
         "typescript": "^4.5"
@@ -3151,102 +3151,77 @@
       }
     },
     "node_modules/@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.0.3.tgz",
+      "integrity": "sha512-Mxh6W1VOlmiEvO/QPBrBQHlXrIn5VxjJWyyEI0V7ZHNGl0ee8AjSlq7vIJG8GodRJqGUuutF6N3OB/6qFv0YWg==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+      "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
       "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.0.3.tgz",
+      "integrity": "sha512-ampNLRGZl/08epHa3i5sRmcHGLneC6JrknexbbgnexYFNSmJ6AbL/dCzgrQzw2Efl+5AZK7UbNFxcDYY3RePvw==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+      "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl-localematcher": {
       "version": "0.2.28",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz",
       "integrity": "sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==",
-      "dev": true,
       "dependencies": {
         "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+      "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+      "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/icu-skeleton-parser": "1.3.10",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/intl/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+      "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/@formatjs/intl/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/@formatjs/ts-transformer": {
@@ -4509,6 +4484,16 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/@superwf/mobx-react-router": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@superwf/mobx-react-router/-/mobx-react-router-7.4.0.tgz",
+      "integrity": "sha512-3Mq3p1mTJPYpDkYzAzhFLBCPqP528pHyu2V3UFSwcGGPUiFqFFmz31RIRYFHF13anQ2joxwrSllKZj0NiLMFpw==",
+      "peerDependencies": {
+        "history": ">=5",
+        "mobx": ">=6",
+        "path-to-regexp": ">=6"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -13879,22 +13864,11 @@
       }
     },
     "node_modules/history": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz",
-      "integrity": "sha512-ABLnJwKEZGXGqWsXaKYD8NNle49ZbKs1WEBlxrFsQ8dIudZpO5NJaH8WJOqh5lXVhAq7bHksfirrobBmrT7qBw==",
-      "dependencies": {
-        "invariant": "^2.2.1",
-        "loose-envify": "^1.2.0",
-        "query-string": "^4.2.2",
-        "warning": "^3.0.0"
-      }
-    },
-    "node_modules/history/node_modules/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
       "dependencies": {
-        "loose-envify": "^1.0.0"
+        "@babel/runtime": "^7.7.6"
       }
     },
     "node_modules/hoist-non-react-statics": {
@@ -14549,50 +14523,42 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
-      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.1.1.tgz",
+      "integrity": "sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/fast-memoize": "1.2.4",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/intl-messageformat/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+      "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/intl-messageformat/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+      "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/icu-skeleton-parser": "1.3.10",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/intl-messageformat/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+      "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/intl-messageformat/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/invariant": {
@@ -18810,9 +18776,9 @@
       }
     },
     "node_modules/mobx": {
-      "version": "5.15.7",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.7.tgz",
-      "integrity": "sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw==",
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.1.tgz",
+      "integrity": "sha512-7su3UZv5JF+ohLr2opabjbUAERfXstMY+wiBtey8yNAPoB8H187RaQXuhFjNkH8aE4iHbDWnhDFZw0+5ic4nGQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mobx"
@@ -18830,21 +18796,33 @@
       }
     },
     "node_modules/mobx-react": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.1.tgz",
-      "integrity": "sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.1.tgz",
+      "integrity": "sha512-VNRpKBNpJEYER3XdkcY1PAr9zxFIaR2Ka6xwKFvySbEUC/uIITKt8rioVDqBdTc9pPzaYiCLw2dYpUOU85GQ5w==",
       "dependencies": {
-        "mobx-react-lite": "^2.2.0"
+        "mobx-react-lite": "^3.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
       },
       "peerDependencies": {
-        "mobx": "^5.15.4 || ^4.15.4",
-        "react": "^16.8.0 || 16.9.0-alpha.0"
+        "mobx": "^6.1.0",
+        "react": "^16.8.0 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
       }
     },
     "node_modules/mobx-react-form": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-2.0.9.tgz",
-      "integrity": "sha512-YLbtXVUF6BtifeVr6XWJ76dQWJs3T/+aPNI/DKvNs1Opcl4jNCzENahqlqNsNI+RgXZbP36zck//IGWBNZsr0A==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-3.2.0.tgz",
+      "integrity": "sha512-7ddOvBulXW5VSMpxrok0A1VGZuWgn1cSvQ2HFXK2uMg631/37Anck7ASWEqK3AzKOaaP9/0kr7VCChqvhyotzQ==",
       "dependencies": {
         "lodash": "^4.17.11"
       },
@@ -18852,16 +18830,20 @@
         "node": ">=8.0.0"
       },
       "peerDependencies": {
-        "mobx": "^2.5.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+        "mobx": "^6.0.0"
       }
     },
     "node_modules/mobx-react-lite": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz",
-      "integrity": "sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      },
       "peerDependencies": {
-        "mobx": "^4.0.0 || ^5.0.0",
-        "react": "^16.8.0"
+        "mobx": "^6.1.0",
+        "react": "^16.8.0 || ^17 || ^18"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -18872,15 +18854,6 @@
         }
       }
     },
-    "node_modules/mobx-react-router": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/mobx-react-router/-/mobx-react-router-3.1.2.tgz",
-      "integrity": "sha512-3mIngG560hNJke5yHH77WuDmr2M0L+N9Og0ebRz+SqjaN/JkIoyF7zN7/THJadcnj6Eoscxq+KtkjlZRzf1pbg==",
-      "peerDependencies": {
-        "mobx": "^3.0.0",
-        "react-router": "3.x"
-      }
-    },
     "node_modules/modify-filename": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modify-filename/-/modify-filename-1.1.0.tgz",
@@ -21206,18 +21179,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==",
-      "dependencies": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -21466,23 +21427,23 @@
       }
     },
     "node_modules/react-intl": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
-      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl": "2.2.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.0.5.tgz",
+      "integrity": "sha512-nDZ3BosuE8WdovcGxsrjj1aIgJZklSL5aORs5oah+5tLQTzUdOEstzJEYQPM+sxl1dkDOu7RCuw0z9oI9ENf9g==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "@formatjs/intl": "2.3.1",
+        "@formatjs/intl-displaynames": "6.0.3",
+        "@formatjs/intl-listformat": "7.0.3",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react": "16 || 17 || 18",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.1.1",
+        "tslib": "2.4.0"
       },
       "peerDependencies": {
-        "react": "^16.3.0 || 17 || 18",
+        "react": "^16.6.0 || 17 || 18",
         "typescript": "^4.5"
       },
       "peerDependenciesMeta": {
@@ -21492,39 +21453,31 @@
       }
     },
     "node_modules/react-intl/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+      "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/react-intl/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+      "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/icu-skeleton-parser": "1.3.10",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/react-intl/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+      "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/react-intl/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "tslib": "2.4.0"
       }
     },
     "node_modules/react-is": {
@@ -21592,34 +21545,27 @@
       }
     },
     "node_modules/react-router": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.6.tgz",
-      "integrity": "sha512-nlxtQE8B22hb/JxdaslI1tfZacxFU8x8BJryXOnR2RxB4vc01zuHYAHAIgmBkdk1kzXaA25hZxK6KAH/+CXArw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "dependencies": {
-        "create-react-class": "^15.5.1",
-        "history": "^3.0.0",
-        "hoist-non-react-statics": "^3.3.2",
-        "invariant": "^2.2.1",
-        "loose-envify": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.13.0",
-        "warning": "^3.0.0"
+        "history": "^5.2.0"
       },
       "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+        "react": ">=16.8"
       }
     },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/react-router/node_modules/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "dependencies": {
-        "loose-envify": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/react-sortable-hoc": {
@@ -24211,14 +24157,6 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
       "dev": true
     },
-    "node_modules/strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -29658,11 +29596,11 @@
       }
     },
     "@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz",
+      "integrity": "sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==",
       "requires": {
-        "tslib": "^2.1.0"
+        "tslib": "2.4.0"
       }
     },
     "@formatjs/icu-messageformat-parser": {
@@ -29687,111 +29625,87 @@
       }
     },
     "@formatjs/intl": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
-      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.3.1.tgz",
+      "integrity": "sha512-f06qZ/ukpeN24gc01qFjh3P+r3FU/ikY4yG+fDJu6dPNvpUQzDy98lYogA1dr6ig2UtrnoEk3xncyFPL1e9cZw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/fast-memoize": "1.2.4",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "@formatjs/intl-displaynames": "6.0.3",
+        "@formatjs/intl-listformat": "7.0.3",
+        "intl-messageformat": "10.1.1",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "@formatjs/ecma402-abstract": {
-          "version": "1.11.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "version": "1.11.8",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+          "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
           "requires": {
-            "@formatjs/intl-localematcher": "0.2.25",
-            "tslib": "^2.1.0"
+            "@formatjs/intl-localematcher": "0.2.28",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-messageformat-parser": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-          "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+          "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
           "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "@formatjs/icu-skeleton-parser": "1.3.6",
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "@formatjs/icu-skeleton-parser": "1.3.10",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-skeleton-parser": {
-          "version": "1.3.6",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-          "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+          "version": "1.3.10",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+          "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
           "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "tslib": "^2.1.0"
-          }
-        },
-        "@formatjs/intl-localematcher": {
-          "version": "0.2.25",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-          "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-          "requires": {
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "tslib": "2.4.0"
           }
         }
       }
     },
     "@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.0.3.tgz",
+      "integrity": "sha512-Mxh6W1VOlmiEvO/QPBrBQHlXrIn5VxjJWyyEI0V7ZHNGl0ee8AjSlq7vIJG8GodRJqGUuutF6N3OB/6qFv0YWg==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "@formatjs/ecma402-abstract": {
-          "version": "1.11.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "version": "1.11.8",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+          "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
           "requires": {
-            "@formatjs/intl-localematcher": "0.2.25",
-            "tslib": "^2.1.0"
-          }
-        },
-        "@formatjs/intl-localematcher": {
-          "version": "0.2.25",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-          "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-          "requires": {
-            "tslib": "^2.1.0"
+            "@formatjs/intl-localematcher": "0.2.28",
+            "tslib": "2.4.0"
           }
         }
       }
     },
     "@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.0.3.tgz",
+      "integrity": "sha512-ampNLRGZl/08epHa3i5sRmcHGLneC6JrknexbbgnexYFNSmJ6AbL/dCzgrQzw2Efl+5AZK7UbNFxcDYY3RePvw==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/intl-localematcher": "0.2.28",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "@formatjs/ecma402-abstract": {
-          "version": "1.11.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
-          "requires": {
-            "@formatjs/intl-localematcher": "0.2.25",
-            "tslib": "^2.1.0"
-          }
-        },
-        "@formatjs/intl-localematcher": {
-          "version": "0.2.25",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-          "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+          "version": "1.11.8",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+          "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
           "requires": {
-            "tslib": "^2.1.0"
+            "@formatjs/intl-localematcher": "0.2.28",
+            "tslib": "2.4.0"
           }
         }
       }
@@ -29800,7 +29714,6 @@
       "version": "0.2.28",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz",
       "integrity": "sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==",
-      "dev": true,
       "requires": {
         "tslib": "2.4.0"
       }
@@ -30792,6 +30705,11 @@
         }
       }
     },
+    "@superwf/mobx-react-router": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@superwf/mobx-react-router/-/mobx-react-router-7.4.0.tgz",
+      "integrity": "sha512-3Mq3p1mTJPYpDkYzAzhFLBCPqP528pHyu2V3UFSwcGGPUiFqFFmz31RIRYFHF13anQ2joxwrSllKZj0NiLMFpw=="
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -38249,24 +38167,11 @@
       "integrity": "sha512-ciq6hFsSG/Bpt2DmrZJtv+56zpPdnq+NQ4ijEFrveKN0ZG1mhl/LdT1NQZ9se6ty1fACcI4d4vYqC9v8EYpH2A=="
     },
     "history": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz",
-      "integrity": "sha512-ABLnJwKEZGXGqWsXaKYD8NNle49ZbKs1WEBlxrFsQ8dIudZpO5NJaH8WJOqh5lXVhAq7bHksfirrobBmrT7qBw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
       "requires": {
-        "invariant": "^2.2.1",
-        "loose-envify": "^1.2.0",
-        "query-string": "^4.2.2",
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
+        "@babel/runtime": "^7.7.6"
       }
     },
     "hoist-non-react-statics": {
@@ -38762,50 +38667,42 @@
       "dev": true
     },
     "intl-messageformat": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
-      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.1.1.tgz",
+      "integrity": "sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/fast-memoize": "1.2.4",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "@formatjs/ecma402-abstract": {
-          "version": "1.11.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "version": "1.11.8",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+          "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
           "requires": {
-            "@formatjs/intl-localematcher": "0.2.25",
-            "tslib": "^2.1.0"
+            "@formatjs/intl-localematcher": "0.2.28",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-messageformat-parser": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-          "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+          "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
           "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "@formatjs/icu-skeleton-parser": "1.3.6",
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "@formatjs/icu-skeleton-parser": "1.3.10",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-skeleton-parser": {
-          "version": "1.3.6",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-          "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+          "version": "1.3.10",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+          "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
           "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "tslib": "^2.1.0"
-          }
-        },
-        "@formatjs/intl-localematcher": {
-          "version": "0.2.25",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-          "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
-          "requires": {
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "tslib": "2.4.0"
           }
         }
       }
@@ -42031,9 +41928,9 @@
       }
     },
     "mobx": {
-      "version": "5.15.7",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.7.tgz",
-      "integrity": "sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw=="
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.1.tgz",
+      "integrity": "sha512-7su3UZv5JF+ohLr2opabjbUAERfXstMY+wiBtey8yNAPoB8H187RaQXuhFjNkH8aE4iHbDWnhDFZw0+5ic4nGQ=="
     },
     "mobx-localstorage": {
       "version": "1.2.0",
@@ -42044,30 +41941,25 @@
       }
     },
     "mobx-react": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.1.tgz",
-      "integrity": "sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.1.tgz",
+      "integrity": "sha512-VNRpKBNpJEYER3XdkcY1PAr9zxFIaR2Ka6xwKFvySbEUC/uIITKt8rioVDqBdTc9pPzaYiCLw2dYpUOU85GQ5w==",
       "requires": {
-        "mobx-react-lite": "^2.2.0"
+        "mobx-react-lite": "^3.4.0"
       }
     },
     "mobx-react-form": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-2.0.9.tgz",
-      "integrity": "sha512-YLbtXVUF6BtifeVr6XWJ76dQWJs3T/+aPNI/DKvNs1Opcl4jNCzENahqlqNsNI+RgXZbP36zck//IGWBNZsr0A==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-form/-/mobx-react-form-3.2.0.tgz",
+      "integrity": "sha512-7ddOvBulXW5VSMpxrok0A1VGZuWgn1cSvQ2HFXK2uMg631/37Anck7ASWEqK3AzKOaaP9/0kr7VCChqvhyotzQ==",
       "requires": {
         "lodash": "^4.17.11"
       }
     },
     "mobx-react-lite": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz",
-      "integrity": "sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg=="
-    },
-    "mobx-react-router": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/mobx-react-router/-/mobx-react-router-3.1.2.tgz",
-      "integrity": "sha512-3mIngG560hNJke5yHH77WuDmr2M0L+N9Og0ebRz+SqjaN/JkIoyF7zN7/THJadcnj6Eoscxq+KtkjlZRzf1pbg=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
+      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ=="
     },
     "modify-filename": {
       "version": "1.1.0",
@@ -43899,15 +43791,6 @@
         "side-channel": "^1.0.4"
       }
     },
-    "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==",
-      "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      }
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -44085,56 +43968,48 @@
       }
     },
     "react-intl": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
-      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl": "2.2.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.0.5.tgz",
+      "integrity": "sha512-nDZ3BosuE8WdovcGxsrjj1aIgJZklSL5aORs5oah+5tLQTzUdOEstzJEYQPM+sxl1dkDOu7RCuw0z9oI9ENf9g==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.8",
+        "@formatjs/icu-messageformat-parser": "2.1.4",
+        "@formatjs/intl": "2.3.1",
+        "@formatjs/intl-displaynames": "6.0.3",
+        "@formatjs/intl-listformat": "7.0.3",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react": "16 || 17 || 18",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.1.1",
+        "tslib": "2.4.0"
       },
       "dependencies": {
         "@formatjs/ecma402-abstract": {
-          "version": "1.11.4",
-          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-          "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+          "version": "1.11.8",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz",
+          "integrity": "sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==",
           "requires": {
-            "@formatjs/intl-localematcher": "0.2.25",
-            "tslib": "^2.1.0"
+            "@formatjs/intl-localematcher": "0.2.28",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-messageformat-parser": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-          "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz",
+          "integrity": "sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==",
           "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "@formatjs/icu-skeleton-parser": "1.3.6",
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "@formatjs/icu-skeleton-parser": "1.3.10",
+            "tslib": "2.4.0"
           }
         },
         "@formatjs/icu-skeleton-parser": {
-          "version": "1.3.6",
-          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-          "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.11.4",
-            "tslib": "^2.1.0"
-          }
-        },
-        "@formatjs/intl-localematcher": {
-          "version": "0.2.25",
-          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-          "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+          "version": "1.3.10",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz",
+          "integrity": "sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==",
           "requires": {
-            "tslib": "^2.1.0"
+            "@formatjs/ecma402-abstract": "1.11.8",
+            "tslib": "2.4.0"
           }
         }
       }
@@ -44190,33 +44065,20 @@
       }
     },
     "react-router": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.6.tgz",
-      "integrity": "sha512-nlxtQE8B22hb/JxdaslI1tfZacxFU8x8BJryXOnR2RxB4vc01zuHYAHAIgmBkdk1kzXaA25hZxK6KAH/+CXArw==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "requires": {
-        "create-react-class": "^15.5.1",
-        "history": "^3.0.0",
-        "hoist-non-react-statics": "^3.3.2",
-        "invariant": "^2.2.1",
-        "loose-envify": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.13.0",
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        },
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
       }
     },
     "react-sortable-hoc": {
@@ -46286,11 +46148,6 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
       "dev": true
     },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
-    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
diff --git a/package.json b/package.json
index 80a433936..c5a962bda 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@krisdages/electron-process-manager": "3.0.0",
     "@mdi/js": "6.9.96",
     "@mdi/react": "1.6.0",
+    "@superwf/mobx-react-router": "7.4.0",
     "auto-launch": "5.0.5",
     "btoa": "1.2.1",
     "classnames": "2.3.1",
@@ -82,11 +83,10 @@
     "macos-version": "5.2.1",
     "mime-types": "2.1.35",
     "minimist": "1.2.6",
-    "mobx": "5.15.7",
+    "mobx": "6.6.1",
     "mobx-localstorage": "1.2.0",
-    "mobx-react": "6.3.1",
-    "mobx-react-form": "2.0.9",
-    "mobx-react-router": "3.1.2",
+    "mobx-react": "7.5.1",
+    "mobx-react-form": "3.2.0",
     "moment": "2.29.4",
     "ms": "2.1.3",
     "node-fetch": "2.6.7",
@@ -101,11 +101,11 @@
     "react-dom": "17.0.2",
     "react-dropzone": "11.7.1",
     "react-electron-web-view": "2.0.1",
-    "react-intl": "5.25.1",
+    "react-intl": "6.0.5",
     "react-jss": "10.9.0",
     "react-loader": "2.4.7",
     "react-modal": "3.15.1",
-    "react-router": "3.2.6",
+    "react-router-dom": "6.3.0",
     "react-sortable-hoc": "2.0.0",
     "react-tooltip": "4.2.21",
     "react-topbar-progress-indicator": "4.1.1",
diff --git a/src/@types/ferdium-components.types.ts b/src/@types/ferdium-components.types.ts
index 03cfdc3b7..516ef9dd7 100644
--- a/src/@types/ferdium-components.types.ts
+++ b/src/@types/ferdium-components.types.ts
@@ -7,7 +7,7 @@ export interface StoresProps {
 }
 
 export interface GlobalError {
-  status: number;
-  message: string;
-  code: string;
+  status?: number;
+  message?: string;
+  code?: string;
 }
diff --git a/src/@types/ferdium.types.ts b/src/@types/ferdium.types.ts
index 0747f8e14..db8711cd3 100644
--- a/src/@types/ferdium.types.ts
+++ b/src/@types/ferdium.types.ts
@@ -19,4 +19,4 @@ declare global {
  * Workaround to make TS recognize this file as a module.
  * https://fettblog.eu/typescript-augmenting-global-lib-dom/
  */
-export { };
+export {};
diff --git a/src/I18n.tsx b/src/I18n.tsx
index 5f725eebc..1a69ed1a2 100644
--- a/src/I18n.tsx
+++ b/src/I18n.tsx
@@ -24,6 +24,7 @@ class I18N extends Component<Props> {
   render(): ReactNode {
     const { stores, children } = this.props;
     const { locale } = stores.app;
+
     return (
       <IntlProvider
         {...{ locale, key: locale, messages: translations[locale] }}
diff --git a/src/api/apiBase.ts b/src/api/apiBase.ts
index 918213542..701919785 100644
--- a/src/api/apiBase.ts
+++ b/src/api/apiBase.ts
@@ -23,6 +23,7 @@ export default function apiBase(withVersion = true) {
     // Stores have not yet been loaded - return SERVER_NOT_LOADED to force a retry when stores are loaded
     return SERVER_NOT_LOADED;
   }
+
   const url =
     (window as any).ferdium.stores.settings.all.app.server === LOCAL_SERVER
       ? `http://${LOCAL_HOSTNAME}:${
@@ -34,7 +35,6 @@ export default function apiBase(withVersion = true) {
 };
 
 export function serverBase() {
-
   const serverType = (window as any).ferdium.stores.settings.all.app.server;
   const noServer = 'You are using Ferdium without a server';
 
@@ -54,7 +54,6 @@ export function serverBase() {
 }
 
 export function serverName(): string {
-
   const serverType = (window as any).ferdium.stores.settings.all.app.server;
   const noServer = 'You are using Ferdium without a server';
 
diff --git a/src/api/server/ServerApi.ts b/src/api/server/ServerApi.ts
index a636f3e0d..77a759b3e 100644
--- a/src/api/server/ServerApi.ts
+++ b/src/api/server/ServerApi.ts
@@ -291,6 +291,10 @@ export default class ServerApi {
 
   // Features
   async getDefaultFeatures() {
+    if (apiBase() === SERVER_NOT_LOADED) {
+      throw new Error('Server not loaded');
+    }
+
     const request = await sendAuthRequest(`${apiBase()}/features/default`);
     if (!request.ok) {
       throw new Error(request.statusText);
diff --git a/src/app.jsx b/src/app.jsx
index db0dee392..87297c664 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -2,8 +2,8 @@ import { webFrame } from 'electron';
 
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
-import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
-import { hashHistory } from 'react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
+import { createHashHistory } from 'history';
 
 import ServerApi from './api/server/ServerApi';
 import LocalApi from './api/server/LocalApi';
@@ -14,7 +14,7 @@ import MenuFactory from './lib/Menu';
 import TouchBarFactory from './lib/TouchBar';
 
 import I18N from './I18n';
-import Routes from './routes';
+import FerdiumRoutes from './routes';
 
 // Basic electron Setup
 webFrame.setVisualZoomLevelLimits(1, 1);
@@ -22,9 +22,9 @@ webFrame.setVisualZoomLevelLimits(1, 1);
 window.addEventListener('load', () => {
   const serverApi = new ServerApi();
   const api = apiFactory(serverApi, new LocalApi());
-  const router = new RouterStore();
+  const history = createHashHistory();
+  const router = new RouterStore(history);
   const stores = storeFactory(api, actions, router);
-  const history = syncHistoryWithStore(hashHistory, router);
   const menu = new MenuFactory(stores, actions);
   const touchBar = new TouchBarFactory(stores, actions);
 
@@ -39,7 +39,7 @@ window.addEventListener('load', () => {
       const preparedApp = (
         <Provider stores={stores} actions={actions}>
           <I18N stores={{ app: stores.app, user: stores.user }}>
-            <Routes history={history} />
+            <FerdiumRoutes history={history} />
           </I18N>
         </Provider>
       );
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index e43be07a8..41b887974 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 
 import Form from '../../lib/Form';
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 8e1ab514e..9eca924cd 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -2,7 +2,7 @@ import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 
 import Infobox from '../ui/Infobox';
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 3de576ca6..eb184f1ee 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -178,7 +178,7 @@ class Login extends Component {
           <Link to={signupRoute}>
             {intl.formatMessage(messages.signupLink)}
           </Link>
-          <Link 
+          <Link
             // to={passwordRoute} // TODO: Uncomment this line after fixing password recovery in-app
             to={`${serverBase()}/user/forgot`} // TODO: Remove this line after fixing password recovery in-app
             target='_blank' // TODO: Remove this line after fixing password recovery in-app
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.jsx
index c9d592a88..c784b75c3 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.jsx
@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: 'Change here!'
+    defaultMessage: 'Change here!',
   },
   serverless: {
     id: 'services.serverless',
@@ -65,7 +65,6 @@ class Welcome extends Component {
             className="welcome__logo"
             alt=""
           />
-          {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
         </div>
         <div className="welcome__text">
           <H1>Ferdium</H1>
@@ -82,9 +81,7 @@ class Welcome extends Component {
               {intl.formatMessage(messages.changeServerMessage, { serverNameParse })}
             </span>
             <Link to={changeServerRoute} className="button__change-server">
-                <span>
-                  {intl.formatMessage(messages.changeServer)}
-                </span>
+              <span>{intl.formatMessage(messages.changeServer)}</span>
             </Link>
           </div>
           <br />
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index e22d4eb50..f7860afc6 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -7,6 +7,7 @@ import injectSheet from 'react-jss';
 import { ipcRenderer } from 'electron';
 
 import { mdiFlash, mdiPowerPlug } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as QuickSwitch } from '../../features/quickSwitch';
@@ -83,7 +84,6 @@ class AppLayout extends Component {
     sidebar: PropTypes.element.isRequired,
     workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
-    children: PropTypes.element,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     authRequestFailed: PropTypes.bool.isRequired,
@@ -99,10 +99,6 @@ class AppLayout extends Component {
     shouldShowServicesUpdatedInfoBar: true,
   };
 
-  static defaultProps = {
-    children: [],
-  };
-
   render() {
     const {
       classes,
@@ -110,7 +106,6 @@ class AppLayout extends Component {
       workspacesDrawer,
       sidebar,
       services,
-      children,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       authRequestFailed,
@@ -205,7 +200,7 @@ class AppLayout extends Component {
               <QuickSwitch />
               <PublishDebugInfo />
               {services}
-              {children}
+              <Outlet />
             </div>
             <Todos />
           </div>
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 66dc8af41..502f87225 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { observable, reaction } from 'mobx';
+import { makeObservable, observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
 import { join } from 'path';
 
@@ -22,6 +22,8 @@ class ServiceWebview extends Component {
   constructor(props) {
     super(props);
 
+    makeObservable(this);
+
     reaction(
       () => this.webview,
       () => {
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.jsx
index b38b0e3c3..da700b5b1 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import Confetti from 'react-confetti';
 import ms from 'ms';
@@ -50,6 +50,7 @@ class Services extends Component {
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
     userHasCompletedSignup: PropTypes.bool.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
     classes: PropTypes.object.isRequired,
     isSpellcheckerEnabled: PropTypes.bool.isRequired,
   };
@@ -58,12 +59,16 @@ class Services extends Component {
     services: [],
   };
 
-  state = {
-    showConfetti: true,
-  };
-
   _confettiTimeout = null;
 
+  constructor() {
+    super();
+
+    this.state = {
+      showConfetti: true,
+    };
+  }
+
   componentDidMount() {
     this._confettiTimeout = window.setTimeout(() => {
       this.setState({
@@ -117,10 +122,7 @@ class Services extends Component {
                 style={{ maxHeight: '50vh' }}
               />
               <Appear timeout={300} transitionName="slideUp">
-                <Link
-                  to='/settings/recipes'
-                  className="button"
-                >
+                <Link to="/settings/recipes" className="button">
                   {intl.formatMessage(messages.getStarted)}
                 </Link>
               </Appear>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 9d2b6b333..a996990b5 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -8,7 +8,7 @@ import { SortableElement } from 'react-sortable-hoc';
 import injectSheet from 'react-jss';
 import ms from 'ms';
 
-import { observable, autorun, reaction } from 'mobx';
+import { observable, autorun, reaction, makeObservable } from 'mobx';
 import { mdiExclamation } from '@mdi/js';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey, shiftKey, altKey } from '../../../environment';
@@ -144,6 +144,9 @@ class TabItem extends Component {
 
   constructor(props) {
     super(props);
+
+    makeObservable(this);
+
     this.state = {
       showShortcutIndex: false,
     };
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.jsx
index d70f471d5..dea4bb387 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.jsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
 import ErrorBoundary from '../util/ErrorBoundary';
-import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
 
@@ -19,7 +19,6 @@ const messages = defineMessages({
 class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
-    children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
@@ -44,7 +43,7 @@ class SettingsLayout extends Component {
   }
 
   render() {
-    const { navigation, children, closeSettings } = this.props;
+    const { navigation, closeSettings } = this.props;
 
     const { intl } = this.props;
 
@@ -60,7 +59,8 @@ class SettingsLayout extends Component {
             />
             <div className="settings franz-form">
               {navigation}
-              {children}
+
+              <Outlet />
               <button
                 type="button"
                 className="settings__close"
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.jsx
index ad1cef1e4..bbbe8d888 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.jsx
@@ -2,10 +2,10 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 
+import { NavLink } from 'react-router-dom';
 import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config';
-import Link from '../../ui/Link';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -90,70 +90,94 @@ class SettingsNavigation extends Component {
 
     return (
       <div className="settings-navigation">
-        <Link
+        <NavLink
           to="/settings/recipes"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.availableServices)}
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/services"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourServices)}{' '}
           <span className="badge">{serviceCount}</span>
-        </Link>
-        <Link
+        </NavLink>
+        <NavLink
           to="/settings/workspaces"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.yourWorkspaces)}{' '}
           <span className="badge">{workspaceCount}</span>
-        </Link>
+        </NavLink>
         {!isUsingWithoutAccount && (
-          <Link
+          <NavLink
             to="/settings/user"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.account)}
-          </Link>
+          </NavLink>
         )}
         {isUsingFranzServer && (
-          <Link
+          <NavLink
             to="/settings/team"
-            className="settings-navigation__link"
-            activeClassName="is-active"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
           >
             {intl.formatMessage(messages.team)}
-          </Link>
+          </NavLink>
         )}
-        <Link
+        <NavLink
           to="/settings/app"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(globalMessages.settings)}
-          {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar ||
-            (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE ||
-              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && (
-            <span className="update-available">•</span>
-          )}
-        </Link>
-        <Link
+          {stores.settings.app.automaticUpdates &&
+            (stores.ui.showServicesUpdatedInfoBar ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.AVAILABLE ||
+              stores.app.updateStatus ===
+                stores.app.updateStatusTypes.DOWNLOADED) && (
+              <span className="update-available">•</span>
+            )}
+        </NavLink>
+        <NavLink
           to="/settings/support"
-          className="settings-navigation__link"
-          activeClassName="is-active"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
         >
           {intl.formatMessage(messages.supportFerdium)}
-        </Link>
+        </NavLink>
         <span className="settings-navigation__expander" />
         <button
           type="button"
-          to='/auth/logout'
+          to="/auth/logout"
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
         >
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.jsx
index c05144117..589b97ecd 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.jsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 import injectSheet from 'react-jss';
 
@@ -179,30 +179,33 @@ class RecipesDashboard extends Component {
             throttle
           />
           <div className="recipes__navigation">
-            <Link
+            <NavLink
               to="/settings/recipes"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={() =>
+                recipeFilter === 'featured' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.ferdiumPicksRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/all"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.allRecipes)}
-            </Link>
-            <Link
+            </NavLink>
+            <NavLink
               to="/settings/recipes/dev"
-              className="badge"
-              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              className={({ isActive }) =>
+                isActive && !searchNeedle ? 'badge badge--primary' : 'badge'
+              }
               onClick={() => resetSearch()}
             >
               {intl.formatMessage(messages.customRecipes)}
-            </Link>
+            </NavLink>
             <a
               href={FERDIUM_SERVICE_REQUEST}
               target="_blank"
@@ -257,24 +260,26 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
-              {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
-                <div className="align-middle settings__empty-state">
-                  {customWebsiteRecipe && customWebsiteRecipe.id && (
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
-                  )}
-                  <p className="settings__empty-state-text">
-                    {intl.formatMessage(messages.nothingFound)}
-                  </p>
-                </div>
-              )}
+              {hasLoadedRecipes &&
+                recipes.length === 0 &&
+                recipeFilter !== 'dev' && (
+                  <div className="align-middle settings__empty-state">
+                    {customWebsiteRecipe && customWebsiteRecipe.id && (
+                      <RecipeItem
+                        key={customWebsiteRecipe.id}
+                        recipe={customWebsiteRecipe}
+                        onClick={() =>
+                          showAddServiceInterface({
+                            recipeId: customWebsiteRecipe.id,
+                          })
+                        }
+                      />
+                    )}
+                    <p className="settings__empty-state-text">
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  </div>
+                )}
               {recipeFilter === 'dev' && devRecipes.length > 0 && (
                 <div className={classes.devRecipeList}>
                   <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index f69d86726..73136529a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import normalizeUrl from 'normalize-url';
 
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 991817175..fdcdb54c9 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Infobox from '../../ui/Infobox';
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index c5bb1433c..ac1c30ecb 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import SearchInput from '../../ui/SearchInput';
@@ -27,8 +27,7 @@ const messages = defineMessages({
   },
   noServiceFound: {
     id: 'settings.services.nothingFound',
-    defaultMessage:
-      'Sorry, but no service matched your search term.',
+    defaultMessage: 'Sorry, but no service matched your search term.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 436a6b76b..c2773a47d 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import Input from '../../ui/input/index';
 import Form from '../../../lib/Form';
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 5ab19bf74..714fc5a68 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../prop-types';
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 26fd6bcfe..a8bbfe730 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -169,20 +169,18 @@ class ButtonComponent extends Component<IProps> {
     busy: false,
   };
 
-  componentWillMount() {
-    this.setState({ busy: this.props.busy });
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = {
+      busy: props.busy || false,
+    };
   }
 
-  componentWillReceiveProps(nextProps: IProps) {
-    if (nextProps.busy !== this.props.busy) {
-      if (this.props.busy) {
-        setTimeout(() => {
-          this.setState({ busy: nextProps.busy });
-        }, 300);
-      } else {
-        this.setState({ busy: nextProps.busy });
-      }
-    }
+  static getDerivedStateFromProps(nextProps: IProps) {
+    return {
+      busy: nextProps.busy,
+    };
   }
 
   render() {
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 976ed5bc4..d1d7ef6cd 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -199,6 +199,4 @@ class InfoboxComponent extends Component<IProps, IState> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(
-  InfoboxComponent,
-);
+export default injectStyle(styles, { injectTheme: true })(InfoboxComponent);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index c3b5314e3..1ce6c674b 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -177,12 +177,16 @@ class SelectComponent extends Component<IProps> {
 
   private keyListener: any;
 
-  componentWillReceiveProps(nextProps: IProps) {
-    if (nextProps.value && nextProps.value !== this.props.value) {
-      this.setState({
+  static getDerivedStateFromProps(nextProps: IProps, prevState: IProps) {
+    if (nextProps.value && nextProps.value !== prevState.value) {
+      return {
         value: nextProps.value,
-      });
+      };
     }
+
+    return {
+      value: prevState.value,
+    };
   }
 
   componentDidUpdate() {
@@ -199,6 +203,7 @@ class SelectComponent extends Component<IProps> {
 
       if (data) {
         Object.keys(data).map(
+          // eslint-disable-next-line no-return-assign
           key => (this.inputRef.current!.dataset[key] = data[key]),
         );
       }
@@ -458,6 +463,6 @@ class SelectComponent extends Component<IProps> {
   }
 }
 
-export const Select = injectStyle(styles, { injectTheme: true })(
+export default injectStyle(styles, { injectTheme: true })(
   SelectComponent,
 );
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index e005767f8..6796ab83d 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -121,6 +121,6 @@ class TextareaComponent extends Component<IProps> {
   }
 }
 
-export const Textarea = injectSheet(styles, { injectTheme: true })(
+export default injectSheet(styles, { injectTheme: true })(
   TextareaComponent,
 );
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 0629d1a2c..d478cbba5 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -122,6 +122,4 @@ class ToggleComponent extends Component<IProps> {
   }
 }
 
-export default injectStyle(styles, { injectTheme: true })(
-  ToggleComponent,
-);
+export default injectStyle(styles, { injectTheme: true })(ToggleComponent);
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index 846d6dc3f..b042e62c8 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -32,8 +32,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps> {
   }
 
   render(): ReactNode {
-    const { classes } = this.props;
-    const { intl } = this.props;
+    const { classes, intl } = this.props;
 
     if (this.state.hasError) {
       return (
diff --git a/src/components/util/WithParams.tsx b/src/components/util/WithParams.tsx
new file mode 100644
index 000000000..6fc0957ff
--- /dev/null
+++ b/src/components/util/WithParams.tsx
@@ -0,0 +1,8 @@
+import { useParams } from 'react-router-dom';
+
+export default function withParams(Component: any) {
+  return (props: any) => {
+    const params = useParams();
+    return <Component {...props} params={params} />;
+  };
+}
diff --git a/src/containers/auth/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
index 1f2753a66..8d31cfb48 100644
--- a/src/containers/auth/AuthLayoutContainer.tsx
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -1,20 +1,17 @@
-import { Component, ReactElement, ReactNode } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
+import { Outlet } from 'react-router-dom';
 
-import { Location } from 'mobx-react-router';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppLoader from '../../components/ui/AppLoader';
 
-interface AuthLayoutContainerProps extends StoresProps {
-  location: Location;
-  children: ReactNode;
-}
+interface AuthLayoutContainerProps extends StoresProps {}
 
 class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
   render(): ReactElement {
-    const { stores, actions, children, location } = this.props;
+    const { stores, actions } = this.props;
     const { app, features, globalError, user } = stores;
 
     const isLoadingBaseFeatures =
@@ -42,7 +39,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
       <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
           error={globalError.response}
-          pathname={location.pathname}
+          pathname={stores.router.location.pathname}
           isOnline={app.isOnline}
           isAPIHealthy={!app.healthCheckRequest.isError}
           retryHealthCheck={actions.app.healthCheck}
@@ -53,7 +50,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
             app.updateStatus === app.updateStatusTypes.DOWNLOADED
           }
         >
-          {children}
+          <Outlet />
         </AuthLayout>
       </ThemeProvider>
     );
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index 984ea8b68..a4857a426 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -1,19 +1,17 @@
-import { Children, Component, ReactElement, ReactNode } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
+import { Outlet } from 'react-router-dom';
 
 import { StoresProps } from '../../@types/ferdium-components.types';
 import AppLayout from '../../components/layout/AppLayout';
 import Sidebar from '../../components/layout/Sidebar';
 import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
-
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
 
-interface AppLayoutContainerProps extends StoresProps {
-  children: ReactNode;
-}
+interface AppLayoutContainerProps extends StoresProps {}
 
 class AppLayoutContainer extends Component<AppLayoutContainerProps> {
   render(): ReactElement {
@@ -62,8 +60,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
 
     const { openSettings, closeSettings } = this.props.actions.ui;
 
-    const { children } = this.props;
-
     const isLoadingFeatures =
       features.featuresRequest.isExecuting &&
       !features.featuresRequest.wasExecuted;
@@ -162,7 +158,7 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
         >
-          {Children.count(children) > 0 ? children : null}
+          <Outlet />
         </AppLayout>
       </ThemeProvider>
     );
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index f8532a7b4..ba8f374c3 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { RouterStore } from 'mobx-react-router';
+import { Params } from 'react-router-dom';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import { IRecipe } from '../../models/Recipe';
 import Service from '../../models/Service';
@@ -22,6 +22,7 @@ import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
 
 import globalMessages from '../../i18n/globalMessages';
 import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config';
+import withParams from '../../components/util/WithParams';
 
 const messages = defineMessages({
   name: {
@@ -119,14 +120,13 @@ const messages = defineMessages({
 });
 
 interface EditServicesScreenProps extends StoresProps {
-  router: RouterStore;
   intl: any;
+  params: Params;
 }
 
 class EditServiceScreen extends Component<EditServicesScreenProps> {
   onSubmit(data: any) {
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
     const { recipes, services } = this.props.stores;
     const { createService, updateService } = this.props.actions.service;
     data.darkReaderSettings = {
@@ -151,10 +151,9 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form {
     const { intl } = this.props;
 
-    const { stores, router } = this.props;
+    const { stores } = this.props;
 
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = router.params;
+    const { action } = stores.router.pathValue;
 
     let defaultSpellcheckerLanguage =
       SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage];
@@ -389,8 +388,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   deleteService(): void {
     const { deleteService } = this.props.actions.service;
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     if (action === 'edit') {
       const { activeSettings: service } = this.props.stores.services;
@@ -403,8 +401,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   openRecipeFile(file: any): void {
     const { openRecipeFile } = this.props.actions.service;
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     if (action === 'edit') {
       const { activeSettings: service } = this.props.stores.services;
@@ -417,9 +414,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   render(): ReactElement {
     const { recipes, services, user } = this.props.stores;
-
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     let recipe: null | IRecipe = null;
     let service: null | Service = null;
@@ -427,7 +422,6 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
     if (action === 'add') {
       recipe = recipes.active;
-
       // TODO: render error message when recipe is `null`
       if (!recipe) {
         return <ServiceError />;
@@ -475,6 +469,8 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   }
 }
 
-export default injectIntl<'intl', EditServicesScreenProps>(
-  inject('stores', 'actions')(observer(EditServiceScreen)),
+export default withParams(
+  injectIntl<'intl', EditServicesScreenProps>(
+    inject('stores', 'actions')(observer(EditServiceScreen)),
+  ),
 );
diff --git a/src/containers/settings/RecipesScreen.tsx b/src/containers/settings/RecipesScreen.tsx
index bc7fa9ba0..fffdd39fa 100644
--- a/src/containers/settings/RecipesScreen.tsx
+++ b/src/containers/settings/RecipesScreen.tsx
@@ -3,6 +3,7 @@ import { Component, ReactElement } from 'react';
 import { autorun, IReactionDisposer } from 'mobx';
 import { inject, observer } from 'mobx-react';
 
+import { Params } from 'react-router-dom';
 import Recipe from '../../models/Recipe';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
@@ -13,11 +14,10 @@ import { asarRecipesPath } from '../../helpers/asar-helpers';
 import { communityRecipesStore } from '../../features/communityRecipes';
 import RecipePreview from '../../models/RecipePreview';
 import { openPath } from '../../helpers/url-helpers';
+import withParams from '../../components/util/WithParams';
 
 interface RecipesScreenProps extends StoresProps {
-  params: {
-    filter?: string | null;
-  };
+  params: Params;
 }
 
 class RecipesScreen extends Component<RecipesScreenProps> {
@@ -36,8 +36,6 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   constructor(props: RecipesScreenProps) {
     super(props);
 
-    this.props.params.filter = this.props.params.filter || null;
-
     this.customRecipes = readJsonSync(asarRecipesPath('all.json'));
   }
 
@@ -104,7 +102,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 
   resetSearch(): void {
-    this.setState({ needle: null });
+    this.setState({ needle: null, currentFilter: 'featured' });
   }
 
   render(): ReactElement {
@@ -112,7 +110,8 @@ class RecipesScreen extends Component<RecipesScreenProps> {
 
     const { app: appActions, service: serviceActions } = this.props.actions;
 
-    const { filter } = this.props.params;
+    const filter = this.state.currentFilter;
+
     let recipeFilter;
 
     if (filter === 'all') {
@@ -125,7 +124,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
     } else {
       recipeFilter = recipePreviews.featured;
     }
-    recipeFilter = recipeFilter.sort(this._sortByName);
+    recipeFilter = [...recipeFilter].sort(this._sortByName);
 
     const { needle } = this.state;
     const allRecipes =
@@ -185,4 +184,4 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(RecipesScreen));
+export default withParams(inject('stores', 'actions')(observer(RecipesScreen)));
diff --git a/src/containers/settings/SettingsWindow.tsx b/src/containers/settings/SettingsWindow.tsx
index 2192a6f69..93bb08c7c 100644
--- a/src/containers/settings/SettingsWindow.tsx
+++ b/src/containers/settings/SettingsWindow.tsx
@@ -1,23 +1,20 @@
-import { Component, ReactNode, ReactPortal } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Component, ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
-import { observer, inject } from 'mobx-react';
+import { Outlet } from 'react-router-dom';
 
 import { StoresProps } from '../../@types/ferdium-components.types';
-import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
+import Layout from '../../components/settings/SettingsLayout';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { workspaceStore } from '../../features/workspaces';
 
-interface SettingsContainerProps extends StoresProps {
-  children: ReactNode;
-}
-
-class SettingsContainer extends Component<SettingsContainerProps> {
+class SettingsContainer extends Component<StoresProps> {
   portalRoot: any;
 
   el: HTMLDivElement;
 
-  constructor(props: SettingsContainerProps) {
+  constructor(props: StoresProps) {
     super(props);
 
     this.portalRoot = document.querySelector('#portalContainer');
@@ -33,7 +30,7 @@ class SettingsContainer extends Component<SettingsContainerProps> {
   }
 
   render(): ReactPortal {
-    const { children, stores } = this.props;
+    const { stores } = this.props;
     const { closeSettings } = this.props.actions.ui;
 
     const navigation = (
@@ -46,7 +43,7 @@ class SettingsContainer extends Component<SettingsContainerProps> {
     return ReactDOM.createPortal(
       <ErrorBoundary>
         <Layout navigation={navigation} closeSettings={closeSettings}>
-          {children}
+          <Outlet />
         </Layout>
       </ErrorBoundary>,
       this.el,
diff --git a/src/electron/Settings.ts b/src/electron/Settings.ts
index d09ac7fb6..3e9c6ed99 100644
--- a/src/electron/Settings.ts
+++ b/src/electron/Settings.ts
@@ -1,4 +1,4 @@
-import { observable, toJS } from 'mobx';
+import { makeObservable, observable, toJS } from 'mobx';
 import { pathExistsSync, outputJsonSync, readJsonSync } from 'fs-extra';
 import { userDataPath } from '../environment-remote';
 
@@ -12,6 +12,8 @@ export default class Settings {
   @observable store: object = {};
 
   constructor(type: string, defaultState = {}) {
+    makeObservable(this);
+
     this.type = type;
     this.store = defaultState;
     this.defaultState = defaultState;
diff --git a/src/features/communityRecipes/store.ts b/src/features/communityRecipes/store.ts
index 34e6cd92c..d3b3318fa 100644
--- a/src/features/communityRecipes/store.ts
+++ b/src/features/communityRecipes/store.ts
@@ -1,7 +1,9 @@
 import { computed } from 'mobx';
 import FeatureStore from '../utils/FeatureStore';
 
-const debug = require('../../preload-safe-debug')('Ferdium:feature:communityRecipes:store');
+const debug = require('../../preload-safe-debug')(
+  'Ferdium:feature:communityRecipes:store',
+);
 
 export class CommunityRecipesStore extends FeatureStore {
   stores: any;
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 1a3d6c1e7..0f195f10d 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -1,4 +1,4 @@
-import { computed, action, observable } from 'mobx';
+import { computed, action, observable, makeObservable } from 'mobx';
 import localStorage from 'mobx-localstorage';
 
 import { ThemeType } from '../../themes';
@@ -33,6 +33,12 @@ export default class TodoStore extends FeatureStore {
 
   isInitialized = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get width() {
     const width = this.settings.width || DEFAULT_TODOS_WIDTH;
 
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 3dac6997c..e5567eec5 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
-import { autorun, observable } from 'mobx';
+import { autorun, makeObservable, observable } from 'mobx';
 import WebControls from '../components/WebControls';
 import ServicesStore from '../../../stores/ServicesStore';
 import Service from '../../../models/Service';
@@ -27,6 +27,12 @@ class WebControlsScreen extends Component {
 
   autorunDisposer = null;
 
+  constructor(props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
   componentDidMount() {
     const { service } = this.props;
 
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 3c7c36a3d..7e8541c44 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import injectSheet from 'react-jss';
 
 import Infobox from '../../../components/ui/infobox/index';
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.jsx
index 3454fdbe9..b0b0e639a 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.jsx
@@ -12,9 +12,7 @@ import Icon from '../../../components/ui/icon';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import workspaceActions from '../actions';
 import { workspaceStore } from '../index';
-import {
-  getUserWorkspacesRequest,
-} from '../api';
+import { getUserWorkspacesRequest } from '../api';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.tsx b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index f0c7e4574..0b66db0d0 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.tsx
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -1,23 +1,14 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 
+import { StoresProps } from '../../../@types/ferdium-components.types';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import { ServicesStore, WorkspacesStore } from '../../../@types/stores.types';
 
-type Props = {
-  actions: {
-    workspaces: WorkspacesStore;
-  };
-  stores: {
-    services: ServicesStore;
-  };
-};
-
-class EditWorkspaceScreen extends Component<Props> {
+class EditWorkspaceScreen extends Component<StoresProps> {
   // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
     const { workspaceBeingEdited } = workspaceStore;
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 5b153fb50..d43dc5efa 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.tsx
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
+import { StoresProps } from '../../../@types/ferdium-components.types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
@@ -9,15 +10,8 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import { WorkspacesStore } from '../../../@types/stores.types';
 
-type Props = {
-  actions: {
-    workspaces: WorkspacesStore;
-  };
-};
-
-class WorkspacesScreen extends Component<Props> {
+class WorkspacesScreen extends Component<StoresProps> {
   render() {
     const { actions } = this.props;
     return (
diff --git a/src/features/workspaces/models/Workspace.ts b/src/features/workspaces/models/Workspace.ts
index bc636011d..98086289f 100644
--- a/src/features/workspaces/models/Workspace.ts
+++ b/src/features/workspaces/models/Workspace.ts
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 
 import { KEEP_WS_LOADED_USID } from '../../../config';
 
@@ -18,6 +18,8 @@ export default class Workspace {
       throw new Error('Workspace requires Id');
     }
 
+    makeObservable(this);
+
     this.id = data.id;
     this.name = data.name;
     this.order = data.order;
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 9b4c4e928..e8c5d0590 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,4 +1,4 @@
-import { computed, observable, action } from 'mobx';
+import { computed, observable, action, makeObservable } from 'mobx';
 import localStorage from 'mobx-localstorage';
 import matchRoute from '../../helpers/routing-helpers';
 import workspaceActions from './actions';
@@ -32,6 +32,12 @@ export default class WorkspacesStore extends FeatureStore {
 
   @observable isSettingsRouteActive = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get workspaces() {
     if (!this.isFeatureActive) return [];
     return getUserWorkspacesRequest.result || [];
diff --git a/src/index.ts b/src/index.ts
index 7ca364a2e..739f653d4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -626,7 +626,6 @@ ipcMain.on('set-spellchecker-locales', (_e, { locale, serviceId }) => {
   serviceSession.setSpellCheckerLanguages(locales);
 });
 
-
 ipcMain.handle('get-desktop-capturer-sources', () => desktopCapturer.getSources({
   types: ['screen', 'window'],
 }));
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 0272f39c3..c2b43bd5c 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -7,7 +7,7 @@ import {
   systemPreferences,
   getCurrentWindow,
 } from '@electron/remote';
-import { autorun, observable } from 'mobx';
+import { autorun, makeObservable, observable } from 'mobx';
 import { defineMessages } from 'react-intl';
 import osName from 'os-name';
 import {
@@ -626,6 +626,8 @@ class FranzMenu {
     this.stores = stores;
     this.actions = actions;
 
+    makeObservable(this);
+
     setTimeout(() => {
       autorun(this._build.bind(this));
     }, 10);
diff --git a/src/models/Service.ts b/src/models/Service.ts
index 35d573cab..92b8ee64c 100644
--- a/src/models/Service.ts
+++ b/src/models/Service.ts
@@ -1,4 +1,4 @@
-import { autorun, computed, observable } from 'mobx';
+import { autorun, computed, makeObservable, observable } from 'mobx';
 import { ipcRenderer } from 'electron';
 import { webContents } from '@electron/remote';
 import normalizeUrl from 'normalize-url';
@@ -132,6 +132,8 @@ export default class Service {
       throw new Error('Service recipe not valid');
     }
 
+    makeObservable(this);
+
     this.recipe = recipe;
 
     this.userAgentModel = new UserAgent(recipe.overrideUserAgent);
diff --git a/src/models/User.ts b/src/models/User.ts
index 14481fbb6..6540a14e9 100644
--- a/src/models/User.ts
+++ b/src/models/User.ts
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 
 interface IUser {
   id: string | null;
@@ -42,6 +42,8 @@ export default class User {
   @observable team = {};
 
   constructor(data: IUser) {
+    makeObservable(this);
+
     if (!data) {
       throw new Error('User config not valid');
     }
diff --git a/src/models/UserAgent.ts b/src/models/UserAgent.ts
index 1d06d72b0..d54286ee8 100644
--- a/src/models/UserAgent.ts
+++ b/src/models/UserAgent.ts
@@ -1,4 +1,4 @@
-import { action, computed, observe, observable } from 'mobx';
+import { action, computed, makeObservable, observable, observe } from 'mobx';
 
 import ElectronWebView from 'react-electron-web-view';
 import defaultUserAgent from '../helpers/userAgent-helpers';
@@ -21,6 +21,8 @@ export default class UserAgent {
   @observable overrideUserAgent = (): string => '';
 
   constructor(overrideUserAgent: any = null) {
+    makeObservable(this);
+
     if (typeof overrideUserAgent === 'function') {
       this.overrideUserAgent = overrideUserAgent;
     }
diff --git a/src/routes.tsx b/src/routes.tsx
index 490d13ee8..1f929531e 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,6 +1,11 @@
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { Router, Route, IndexRedirect } from 'react-router';
+import { Route } from 'react-router';
+import {
+  Navigate,
+  Routes,
+  unstable_HistoryRouter as HistoryRouter,
+} from 'react-router-dom';
 
 import AppLayoutContainer from './containers/layout/AppLayoutContainer';
 import SettingsWindow from './containers/settings/SettingsWindow';
@@ -25,59 +30,137 @@ import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
 import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
 import { WORKSPACES_ROUTES } from './features/workspaces/constants';
+import { Actions } from './actions/lib/actions';
+import { RealStores } from './stores';
 
 type Props = {
+  stores: RealStores;
+  actions: Actions;
   history: any;
 };
 
-class Routes extends Component<Props> {
+class FerdiumRoutes extends Component<Props> {
   render(): ReactElement {
     const { history } = this.props;
+    const routeProps = {
+      stores: this.props.stores,
+      actions: this.props.actions,
+    };
+    const errorProps = {
+      error: this.props.stores.globalError.error || {},
+    };
 
     return (
-      <Router history={history}>
-        <Route path="/" component={AppLayoutContainer}>
-          <Route path="/settings" component={SettingsWindow}>
-            <IndexRedirect to="/settings/recipes" />
-            <Route path="/settings/recipes" component={RecipesScreen} />
-            <Route path="/settings/recipes/:filter" component={RecipesScreen} />
-            <Route path="/settings/services" component={ServicesScreen} />
+      <HistoryRouter history={history}>
+        <Routes>
+          <Route path="/auth" element={<AuthLayoutContainer {...routeProps} />}>
             <Route
-              path="/settings/services/:action/:id"
-              component={EditServiceScreen}
+              path="/auth"
+              element={<Navigate to="/auth/welcome" replace />}
             />
-            <Route path={WORKSPACES_ROUTES.ROOT} component={WorkspacesScreen} />
             <Route
-              path={WORKSPACES_ROUTES.EDIT}
-              component={EditWorkspaceScreen}
+              path="/auth/welcome"
+              element={<WelcomeScreen {...routeProps} />}
+            />
+            <Route
+              path="/auth/login"
+              element={<LoginScreen {...routeProps} {...errorProps} />}
+            />
+            <Route
+              path="/auth/server"
+              element={<ChangeServerScreen {...routeProps} />}
+            />
+            <Route path="/auth/signup">
+              <Route
+                path="/auth/signup"
+                element={<Navigate to="/auth/signup/form" replace />}
+              />
+              <Route
+                path="/auth/signup/form"
+                element={<SignupScreen {...routeProps} {...errorProps} />}
+              />
+              <Route
+                path="/auth/signup/import"
+                element={<ImportScreen {...routeProps} />}
+              />
+              <Route
+                path="/auth/signup/setup"
+                element={<SetupAssistentScreen {...routeProps} />}
+              />
+              <Route
+                path="/auth/signup/invite"
+                element={<InviteScreen {...routeProps} />}
+              />
+            </Route>
+            <Route
+              path="/auth/password"
+              element={<PasswordScreen {...routeProps} />}
+            />
+            <Route
+              path="/auth/logout"
+              element={<LoginScreen {...routeProps} {...errorProps} />}
             />
-            <Route path="/settings/user" component={AccountScreen} />
-            <Route path="/settings/user/edit" component={EditUserScreen} />
-            <Route path="/settings/team" component={TeamScreen} />
-            <Route path="/settings/app" component={EditSettingsScreen} />
-            <Route path="/settings/invite" component={InviteSettingsScreen} />
-            <Route path="/settings/support" component={SupportFerdiumScreen} />
           </Route>
-        </Route>
-        <Route path="/auth" component={AuthLayoutContainer}>
-          <IndexRedirect to="/auth/welcome" />
-          <Route path="/auth/welcome" component={WelcomeScreen} />
-          <Route path="/auth/login" component={LoginScreen} />
-          <Route path="/auth/server" component={ChangeServerScreen} />
-          <Route path="/auth/signup">
-            <IndexRedirect to="/auth/signup/form" />
-            <Route path="/auth/signup/form" component={SignupScreen} />
-            <Route path="/auth/signup/import" component={ImportScreen} />
-            <Route path="/auth/signup/setup" component={SetupAssistentScreen} />
-            <Route path="/auth/signup/invite" component={InviteScreen} />
+
+          <Route path="/" element={<AppLayoutContainer {...routeProps} />}>
+            <Route
+              path="/settings"
+              element={<SettingsWindow {...this.props} />}
+            >
+              <Route
+                path="/settings/recipes"
+                element={<RecipesScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/recipes/:filter"
+                element={<RecipesScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/services"
+                element={<ServicesScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/services/:action/:id"
+                element={<EditServiceScreen {...this.props} />}
+              />
+              <Route
+                path={WORKSPACES_ROUTES.ROOT}
+                element={<WorkspacesScreen {...this.props} />}
+              />
+              <Route
+                path={WORKSPACES_ROUTES.EDIT}
+                element={<EditWorkspaceScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/user"
+                element={<AccountScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/user/edit"
+                element={<EditUserScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/team"
+                element={<TeamScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/app"
+                element={<EditSettingsScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/invite"
+                element={<InviteSettingsScreen {...this.props} />}
+              />
+              <Route
+                path="/settings/support"
+                element={<SupportFerdiumScreen {...this.props} />}
+              />
+            </Route>
           </Route>
-          <Route path="/auth/password" component={PasswordScreen} />
-          <Route path="/auth/logout" component={LoginScreen} />
-        </Route>
-        <Route path="*" component={AppLayoutContainer} />
-      </Router>
+        </Routes>
+      </HistoryRouter>
     );
   }
 }
 
-export default inject('stores', 'actions')(observer(Routes));
+export default inject('stores', 'actions')(observer(FerdiumRoutes));
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index 0ecfdb7c0..ed6d0e263 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -7,7 +7,7 @@ import {
   getCurrentWindow,
   process as remoteProcess,
 } from '@electron/remote';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import moment from 'moment';
 import AutoLaunch from 'auto-launch';
 import ms from 'ms';
@@ -105,6 +105,8 @@ export default class AppStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.app.notify.listen(this._notify.bind(this));
     this.actions.app.setBadge.listen(this._setBadge.bind(this));
@@ -510,7 +512,7 @@ export default class AppStore extends TypedStore {
   }
 
   _setLocale() {
-    if (this.stores.user.isLoggedIn && this.stores.user.data.locale) {
+    if (this.stores.user?.isLoggedIn && this.stores.user?.data.locale) {
       this.locale = this.stores.user.data.locale;
     } else if (!this.locale) {
       this.locale = this._getDefaultLocale();
diff --git a/src/stores/FeaturesStore.ts b/src/stores/FeaturesStore.ts
index b63c252df..ed0c6c17b 100644
--- a/src/stores/FeaturesStore.ts
+++ b/src/stores/FeaturesStore.ts
@@ -1,5 +1,14 @@
-import { computed, observable, runInAction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 
+import { Stores } from '../@types/stores.types';
+import { ApiInterface } from '../api';
+import { Actions } from '../actions/lib/actions';
 import CachedRequest from './lib/CachedRequest';
 import serviceProxy from '../features/serviceProxy';
 import basicAuth from '../features/basicAuth';
@@ -24,6 +33,12 @@ export default class FeaturesStore extends TypedStore {
 
   @observable features = {};
 
+  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
+    super(stores, api, actions);
+
+    makeObservable(this);
+  }
+
   async setup(): Promise<void> {
     this.registerReactions([
       this._updateFeatures,
@@ -49,9 +64,11 @@ export default class FeaturesStore extends TypedStore {
       }
       Object.assign(features, requestResult);
     }
-    runInAction('FeaturesStore::_updateFeatures', () => {
-      this.features = features;
-    });
+    runInAction(
+      action('FeaturesStore::_updateFeatures', () => {
+        this.features = features;
+      }),
+    );
   };
 
   _monitorLoginStatus(): void {
diff --git a/src/stores/GlobalErrorStore.ts b/src/stores/GlobalErrorStore.ts
index 8c6317c91..c42e9a4af 100644
--- a/src/stores/GlobalErrorStore.ts
+++ b/src/stores/GlobalErrorStore.ts
@@ -1,4 +1,4 @@
-import { observable, action } from 'mobx';
+import { observable, action, makeObservable } from 'mobx';
 import { Actions } from '../actions/lib/actions';
 import { ApiInterface } from '../api';
 import { Stores } from '../@types/stores.types';
@@ -34,6 +34,8 @@ export default class GlobalErrorStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     window.addEventListener('error', (...errorArgs: any[]): void => {
       // @ts-ignore ts-message: Expected 5 arguments, but got 2.
       this._handleConsoleError.call(this, ['error', ...errorArgs]);
diff --git a/src/stores/RecipePreviewsStore.ts b/src/stores/RecipePreviewsStore.ts
index b1d50c8b8..1c95e6b54 100644
--- a/src/stores/RecipePreviewsStore.ts
+++ b/src/stores/RecipePreviewsStore.ts
@@ -1,4 +1,5 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
+
 import { Actions } from '../actions/lib/actions';
 import { ApiInterface } from '../api';
 import Recipe from '../models/Recipe';
@@ -28,6 +29,8 @@ export default class RecipePreviewsStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.recipePreview.search.listen(this._search.bind(this));
   }
diff --git a/src/stores/RecipesStore.ts b/src/stores/RecipesStore.ts
index 364d56dd2..25304e97c 100644
--- a/src/stores/RecipesStore.ts
+++ b/src/stores/RecipesStore.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { readJSONSync } from 'fs-extra';
 import semver from 'semver';
 
@@ -24,6 +24,8 @@ export default class RecipesStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.recipe.install.listen(this._install.bind(this));
     this.actions.recipe.update.listen(this._update.bind(this));
diff --git a/src/stores/RequestStore.ts b/src/stores/RequestStore.ts
index e5df1292d..a964c5d12 100644
--- a/src/stores/RequestStore.ts
+++ b/src/stores/RequestStore.ts
@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import ms from 'ms';
 
 import { Actions } from '../actions/lib/actions';
@@ -28,6 +28,8 @@ export default class RequestStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     this.actions.requests.retryRequiredRequests.listen(
       this._retryRequiredRequests.bind(this),
     );
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 4c1b4116c..7812d5aee 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -1,5 +1,5 @@
 import { shell } from 'electron';
-import { action, reaction, computed, observable } from 'mobx';
+import { action, reaction, computed, observable, makeObservable } from 'mobx';
 import { debounce, remove } from 'lodash';
 import ms from 'ms';
 import { ensureFileSync, pathExistsSync, writeFileSync } from 'fs-extra';
@@ -67,6 +67,8 @@ export default class ServicesStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.service.setActive.listen(this._setActive.bind(this));
     this.actions.service.blurActive.listen(this._blurActive.bind(this));
diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts
index 0296ba0e7..a03d3c188 100644
--- a/src/stores/SettingsStore.ts
+++ b/src/stores/SettingsStore.ts
@@ -1,6 +1,7 @@
+
 import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
-import { action, computed, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import localStorage from 'mobx-localstorage';
 import { Stores } from '../@types/stores.types';
 import { ApiInterface } from '../api';
@@ -22,7 +23,7 @@ export default class SettingsStore extends TypedStore {
     'updateAppSettings',
   );
 
-  loaded = false;
+  @observable loaded: boolean = false;
 
   fileSystemSettingsTypes = FILE_SYSTEM_SETTINGS_TYPES;
 
@@ -34,6 +35,8 @@ export default class SettingsStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.settings.update.listen(this._update.bind(this));
     this.actions.settings.remove.listen(this._remove.bind(this));
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index c43c6d8c7..e0589729f 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -1,4 +1,4 @@
-import { action, observable, computed, reaction } from 'mobx';
+import { action, observable, computed, reaction, makeObservable } from 'mobx';
 import { nativeTheme } from '@electron/remote';
 
 import { Stores } from '../@types/stores.types';
@@ -14,6 +14,9 @@ export default class UIStore extends TypedStore {
 
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
+
+    makeObservable(this);
+
     // Register action handlers
     this.actions.ui.openSettings.listen(this._openSettings.bind(this));
     this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index b9c3c7576..c5e67c966 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -1,4 +1,4 @@
-import { observable, computed, action } from 'mobx';
+import { observable, computed, action, makeObservable } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
@@ -93,6 +93,8 @@ export default class UserStore extends TypedStore {
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
     super(stores, api, actions);
 
+    makeObservable(this);
+
     // Register action handlers
     this.actions.user.login.listen(this._login.bind(this));
     this.actions.user.retrievePassword.listen(
diff --git a/src/stores/index.ts b/src/stores/index.ts
index d31f2c933..8836f2892 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,4 +1,4 @@
-import { RouterStore } from 'mobx-react-router';
+import { RouterStore } from '@superwf/mobx-react-router';
 import { ApiInterface } from '../api';
 import { Actions } from '../actions/lib/actions';
 import AppStore from './AppStore';
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index 0ac36a218..e58341790 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -1,4 +1,4 @@
-import { observable, action, computed } from 'mobx';
+import { observable, action, computed, makeObservable } from 'mobx';
 import { isEqual } from 'lodash/fp';
 
 export default class Request {
@@ -29,6 +29,8 @@ export default class Request {
   _currentApiCall = null;
 
   constructor(api, method) {
+    makeObservable(this);
+
     this._api = api;
     this._method = method;
   }
diff --git a/src/stores/lib/TypedStore.ts b/src/stores/lib/TypedStore.ts
index c97ae1aa5..e44eadd32 100644
--- a/src/stores/lib/TypedStore.ts
+++ b/src/stores/lib/TypedStore.ts
@@ -1,4 +1,4 @@
-import { computed, IReactionPublic, observable } from 'mobx';
+import { computed, IReactionPublic, makeObservable, observable } from 'mobx';
 import { Actions } from '../../actions/lib/actions';
 import { ApiInterface } from '../../api';
 import { Stores } from '../../@types/stores.types';
@@ -9,6 +9,12 @@ export default abstract class TypedStore {
 
   @observable _status: any = null;
 
+  stores: Stores;
+
+  api: ApiInterface;
+
+  actions: Actions;
+
   @computed get actionStatus() {
     return this._status || [];
   }
@@ -17,11 +23,13 @@ export default abstract class TypedStore {
     this._status = status;
   }
 
-  constructor(
-    public readonly stores: Stores,
-    public readonly api: ApiInterface,
-    public readonly actions: Actions,
-  ) {}
+  constructor(stores: Stores, api: ApiInterface, actions: Actions) {
+    makeObservable(this);
+
+    this.stores = stores;
+    this.api = api;
+    this.actions = actions;
+  }
 
   registerReactions(reactions: { (r: IReactionPublic): void }[]): void {
     for (const reaction of reactions) {
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 3c8a5326f..102d93642 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -2,7 +2,7 @@
 /* eslint-disable import/first */
 import { contextBridge, ipcRenderer } from 'electron';
 import { join } from 'path';
-import { autorun, computed, observable } from 'mobx';
+import { autorun, computed, makeObservable, observable } from 'mobx';
 import { pathExistsSync, readFileSync } from 'fs-extra';
 import { debounce } from 'lodash';
 
@@ -154,6 +154,8 @@ class RecipeController {
   hasUpdatedBeforeRecipeLoaded = false;
 
   constructor() {
+    makeObservable(this);
+
     this.initialize();
   }
 
diff --git a/tsconfig.json b/tsconfig.json
index 3e7ffc854..7a50a4a2d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -41,7 +41,8 @@
     "strictNullChecks": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
   },
   "include": [
     "src",