diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e040891c..8317f6a7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@mui/material": "^5.9.0",
         "@mui/system": "^5.9.0",
         "@mui/x-data-grid": "^5.2.2",
+        "@mui/x-date-pickers": "^5.0.1",
         "@nivo/core": "^0.79.0",
         "@nivo/line": "^0.79.1",
         "country-flag-icons": "^1.4.25",
@@ -73,7 +74,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -97,7 +97,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz",
       "integrity": "sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -106,7 +105,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz",
       "integrity": "sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -186,7 +184,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz",
       "integrity": "sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.19.0",
         "@babel/helper-validator-option": "^7.18.6",
@@ -322,7 +319,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
       "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -393,7 +389,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
       "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -444,7 +439,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
       "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -468,7 +462,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
       "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.0",
@@ -1886,6 +1879,54 @@
         }
       }
     },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.15.0.tgz",
+      "integrity": "sha512-wgYzwaXr9KxkHNYxrOb1t8fYLfAdjIf0Q86qdVCwANObcvyGcPBm0uFtpPK7ApeE4DJUlbuG0IX75TtO+uITwQ==",
+      "dependencies": {
+        "@date-io/core": "^2.15.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.15.0.tgz",
+      "integrity": "sha512-CxTRCo5AM96ainnYaTpe1NS9GiA78SIgXBScgeAresCS20AvMcOd5XKerDj+y/KLhbSQbU6WUDqG9QcsrImXyQ==",
+      "dependencies": {
+        "@date-io/core": "^2.15.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.15.0.tgz",
+      "integrity": "sha512-AcYBjl3EnEGsByaM5ir644CKbhgJsgc1iWFa9EXfdb4fQexxOC8oCdPAurK2ZDTwg62odyyKa/05YE7ElYh5ag==",
+      "dependencies": {
+        "@date-io/core": "^2.15.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2862,7 +2903,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
       "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.0",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -3231,6 +3271,64 @@
         "react-dom": "^17.0.2 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.1.tgz",
+      "integrity": "sha512-S+qUdhs3M/awoON9tfcoCtjBqn7tyfmU9gQUG1WwdGj6jySpze2bIjS7v7uhwydjddk7AlJGyrLOIc17F6ZVIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.9.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0 || ^3.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nivo/annotations": {
       "version": "0.79.1",
       "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.79.1.tgz",
@@ -4758,7 +4856,6 @@
       "version": "4.21.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
       "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4843,7 +4940,6 @@
       "version": "1.0.30001393",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
       "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5498,8 +5594,7 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.244",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
-      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w==",
-      "dev": true
+      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -5675,7 +5770,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -6424,7 +6518,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -9034,7 +9127,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -9375,8 +9467,7 @@
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
-      "dev": true
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -12692,6 +12783,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -12782,7 +12881,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -13545,7 +13643,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
       "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -14137,7 +14234,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -14154,14 +14250,12 @@
     "@babel/compat-data": {
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz",
-      "integrity": "sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==",
-      "dev": true
+      "integrity": "sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw=="
     },
     "@babel/core": {
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz",
       "integrity": "sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==",
-      "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -14224,7 +14318,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz",
       "integrity": "sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.19.0",
         "@babel/helper-validator-option": "^7.18.6",
@@ -14321,7 +14414,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
       "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
-      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -14374,7 +14466,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
       "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -14409,8 +14500,7 @@
     "@babel/helper-validator-option": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
-      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.19.0",
@@ -14428,7 +14518,6 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
       "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.0",
@@ -15387,6 +15476,30 @@
         "@date-io/core": "^2.15.0"
       }
     },
+    "@date-io/dayjs": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.15.0.tgz",
+      "integrity": "sha512-wgYzwaXr9KxkHNYxrOb1t8fYLfAdjIf0Q86qdVCwANObcvyGcPBm0uFtpPK7ApeE4DJUlbuG0IX75TtO+uITwQ==",
+      "requires": {
+        "@date-io/core": "^2.15.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.15.0.tgz",
+      "integrity": "sha512-CxTRCo5AM96ainnYaTpe1NS9GiA78SIgXBScgeAresCS20AvMcOd5XKerDj+y/KLhbSQbU6WUDqG9QcsrImXyQ==",
+      "requires": {
+        "@date-io/core": "^2.15.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.15.0.tgz",
+      "integrity": "sha512-AcYBjl3EnEGsByaM5ir644CKbhgJsgc1iWFa9EXfdb4fQexxOC8oCdPAurK2ZDTwg62odyyKa/05YE7ElYh5ag==",
+      "requires": {
+        "@date-io/core": "^2.15.0"
+      }
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -15495,7 +15608,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -16123,7 +16237,6 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
       "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-      "dev": true,
       "requires": {
         "@jridgewell/set-array": "^1.0.0",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -16276,7 +16389,8 @@
     "@mui/types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.0.tgz",
-      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA=="
+      "integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==",
+      "requires": {}
     },
     "@mui/utils": {
       "version": "5.10.3",
@@ -16302,6 +16416,25 @@
         "reselect": "^4.1.6"
       }
     },
+    "@mui/x-date-pickers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.1.tgz",
+      "integrity": "sha512-S+qUdhs3M/awoON9tfcoCtjBqn7tyfmU9gQUG1WwdGj6jySpze2bIjS7v7uhwydjddk7AlJGyrLOIc17F6ZVIA==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.9.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      }
+    },
     "@nivo/annotations": {
       "version": "0.79.1",
       "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.79.1.tgz",
@@ -16354,7 +16487,8 @@
     "@nivo/legends": {
       "version": "0.79.1",
       "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.79.1.tgz",
-      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig=="
+      "integrity": "sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig==",
+      "requires": {}
     },
     "@nivo/line": {
       "version": "0.79.1",
@@ -17040,7 +17174,8 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
       "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@webpack-cli/info": {
       "version": "1.5.0",
@@ -17055,7 +17190,8 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
       "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -17103,13 +17239,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17142,7 +17280,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -17497,7 +17636,6 @@
       "version": "4.21.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
       "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
-      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001370",
         "electron-to-chromium": "^1.4.202",
@@ -17552,8 +17690,7 @@
     "caniuse-lite": {
       "version": "1.0.30001393",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001393.tgz",
-      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA==",
-      "dev": true
+      "integrity": "sha512-N/od11RX+Gsk+1qY/jbPa0R6zJupEa0lxeBG598EbrtblxVCTJsQwbRBm6+V+rxpc5lHKdsXb9RY83cZIPLseA=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -18080,8 +18217,7 @@
     "electron-to-chromium": {
       "version": "1.4.244",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.244.tgz",
-      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w==",
-      "dev": true
+      "integrity": "sha512-E21saXLt2eTDaTxgUtiJtBUqanF9A32wZasAwDZ8gvrqXoxrBrbwtDCx7c/PQTLp81wj4X0OLDeoGQg7eMo3+w=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -18219,8 +18355,7 @@
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-string-regexp": {
       "version": "4.0.0",
@@ -18459,7 +18594,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -18780,8 +18916,7 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -20051,7 +20186,8 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
       "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -20709,8 +20845,7 @@
     "json5": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-      "dev": true
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
     },
     "jsx-ast-utils": {
       "version": "3.3.3",
@@ -20974,8 +21109,7 @@
     "node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
-      "dev": true
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -22988,7 +23122,8 @@
     "react-image": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz",
-      "integrity": "sha512-19MUK9u1qaw9xys8XEsVkSpVhHctEBUeYFvrLTe1PN+4w5Co13AN2WA7xtBshPM6SthsOj77SlDrEAeOaJpf7g=="
+      "integrity": "sha512-19MUK9u1qaw9xys8XEsVkSpVhHctEBUeYFvrLTe1PN+4w5Co13AN2WA7xtBshPM6SthsOj77SlDrEAeOaJpf7g==",
+      "requires": {}
     },
     "react-is": {
       "version": "18.2.0",
@@ -23259,6 +23394,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "requires": {}
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -23318,8 +23459,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
     "serialize-javascript": {
       "version": "6.0.0",
@@ -23880,7 +24020,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
       "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
-      "dev": true,
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -24232,7 +24371,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index f09d623b..af7ad2bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,6 +45,7 @@
     "@mui/material": "^5.9.0",
     "@mui/system": "^5.9.0",
     "@mui/x-data-grid": "^5.2.2",
+    "@mui/x-date-pickers": "^5.0.1",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "country-flag-icons": "^1.4.25",
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 5d6bdbfc..51895943 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -13,17 +13,22 @@ import i18n from "./i18n";
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import SchoolIcon from '@mui/icons-material/School';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
+      expandedSettings: false,
       openLearn: false,
+      theme: {typography: { fontSize: 14 }},
     }
   }
 
-  lightTheme = createTheme({});
+  lightTheme = createTheme ({});
 
   darkTheme = createTheme({
     palette: {
@@ -34,19 +39,39 @@ export default class App extends Component {
     },
   });
 
+  onSettingsClick = () => {
+    this.setState({
+      expandedSettings: ! this.state.expandedSettings
+    })
+  }
+
+  onZoomClick = (direction) => {
+    let zoomChange;
+    direction === "out" ? zoomChange = -1 : zoomChange = 1;
+    this.setState(({theme}) => ({
+      theme: { 
+        ...theme,
+        typography: {
+          fontSize: this.state.theme.typography.fontSize + zoomChange,
+        },
+      }
+    }));
+  }
+
   render() {
     return (
       <Suspense fallback="loading language">
       <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
+        <ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}>
           <CssBaseline/>
           <LearnDialog open={this.state.openLearn} onClose={()=> this.setState({openLearn:false})}/>
           <IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
           <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
             {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
           </IconButton>
+          <IconButton sx={{position:'fixed',right:'34px'}} onClick={()=> this.setState({openLearn:true})}><SchoolIcon/></IconButton>
           <UnsafeAlert className="unsafeAlert"/>
-          <HomePage/>
+          <HomePage {...this.state}/>
         </ThemeProvider>
       </I18nextProvider>
       </Suspense>
diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js
index 949166da..73c43c66 100644
--- a/frontend/src/components/AutocompletePayments.js
+++ b/frontend/src/components/AutocompletePayments.js
@@ -281,4 +281,4 @@ export default function AutocompletePayments(props) {
       }
     </Root>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 01ccc126..152c5c58 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -149,11 +149,15 @@ bottomBarDesktop =()=>{
     const { t } = this.props;
     var hasRewards = this.props.earnedRewards > 0 ? true: false;
     var hasOrder = this.props.activeOrderId > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
-
+    const fontSize = this.props.theme.typography.fontSize;
+    const fontSizeFactor = fontSize / 14; // default fontSize is 14
+    const typographyProps = {
+        primaryTypographyProps: {fontSize: fontSize},
+        secondaryTypographyProps: {fontSize: fontSize * 12/14}
+    }
     return(
-        <Paper elevation={6} style={{height:40}}>
+        <Paper elevation={6} style={{height: 40*fontSizeFactor, width: window.innerWidth}}>
                 <Grid container>
-
                     <Grid item xs={1.9}>
                         <div style={{display: this.showProfileButton() ? '':'none'}}>
                         <ListItemButton onClick={this.handleClickOpenProfile} >
@@ -162,7 +166,7 @@ bottomBarDesktop =()=>{
                                 title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                     (hasOrder ? t("You have an active order"):"")}
                                 >
-                                <ListItemAvatar sx={{ width: 30, height: 30 }} >
+                                <ListItemAvatar sx={{ width: 30*fontSizeFactor, height: 30*fontSizeFactor }} >
                                     <Badge badgeContent={(this.props.activeOrderId > 0 & !this.props.profileShown) ? "": null} color="primary">
                                     <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
                                         alt={this.props.nickname}
@@ -192,8 +196,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.num_public_buy_orders}
                                 secondary={t("Public Buy Orders")} />
                         </ListItem>
@@ -212,8 +215,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.num_public_sell_orders}
                                 secondary={t("Public Sell Orders")} />
                         </ListItem>
@@ -232,8 +234,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.active_robots_today}
                                 secondary={t("Today Active Robots")}/>
                         </ListItem>
@@ -248,8 +249,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={this.state.last_day_nonkyc_btc_premium+"%"}
                                 secondary={t("24h Avg Premium")} />
                         </ListItem>
@@ -264,8 +264,7 @@ bottomBarDesktop =()=>{
                                 </IconButton>
                             </ListItemIcon>
                             <ListItemText
-                                primaryTypographyProps={{fontSize: '14px'}}
-                                secondaryTypographyProps={{fontSize: '12px'}}
+                                {...typographyProps}
                                 primary={(this.state.maker_fee + this.state.taker_fee)*100}
                                 secondary={t("Trade Fee")} />
                         </ListItem>
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index e3fae635..6d683263 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -40,19 +40,21 @@ export default class HomePage extends Component {
     }
 
     render() {
+        const fontSize = this.props.theme.typography.fontSize;
+        const fontSizeFactor = fontSize / 14; // default fontSize is 14
         return (
               <Router >
                   <div className='appCenter'>
                     <Switch>
-                        <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/make' render={(props) => <MakerPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
-                        <Route path='/book' render={(props) => <BookPage {...props} {...this.state} setAppState={this.setAppState} />}/>
-                        <Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} setAppState={this.setAppState}/>}/>
+                        <Route exact path='/' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/ref/:refCode' render={(props) => <UserGenPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/make' render={(props) => <MakerPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
+                        <Route path='/book' render={(props) => <BookPage {...props} {...this.state} {...this.props} setAppState={this.setAppState} />}/>
+                        <Route path="/order/:orderId" render={(props) => <OrderPage {...props} {...this.state} {...this.props} setAppState={this.setAppState}/>}/>
                     </Switch>
                   </div>
-                  <div className='bottomBar'>
-                    <BottomBar redirectTo={this.redirectTo} {...this.state} setAppState={this.setAppState} />
+                  <div className='bottomBar' style={{height: `${40*fontSizeFactor}px`, width: window.innerWidth}}>
+                    <BottomBar redirectTo={this.redirectTo} {...this.state} {...this.props} setAppState={this.setAppState} />
                   </div>
               </Router>
           );
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 54beb3b4..6751dc98 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withTranslation } from "react-i18next";
 import { InputAdornment, LinearProgress, Dialog, IconButton, DialogActions, DialogContent, DialogContentText, DialogTitle, Accordion, AccordionDetails, AccordionSummary, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
 import RangeSlider from "./RangeSlider";
-import { LocalizationProvider, TimePicker}  from '@mui/lab';
+import { LocalizationProvider, TimePicker}  from '@mui/x-date-pickers';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link as LinkRouter } from 'react-router-dom'
 import { StoreTokenDialog, NoRobotDialog } from "./Dialogs";
@@ -302,9 +302,9 @@ class MakerPage extends Component {
     StandardMakerOptions = () => {
         const { t } = this.props;
         return(
-            <Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
+            <Paper elevation={12} style={{ padding: 8, width: `${260/16}em`, align:'center'}}>
             <Grid item xs={12} align="center">
-                <div style={{position:'relative', left:'5px'}}>
+                <div style={{position:'relative'}}>
                 <FormControl component="fieldset">
                     <FormHelperText sx={{textAlign:"center"}}>
                         {t("Buy or Sell Bitcoin?")}
@@ -313,13 +313,13 @@ class MakerPage extends Component {
                     <RadioGroup row value={this.state.type} onChange={this.handleTypeChange}>
                         <FormControlLabel
                             value={0}
-                            control={<Radio icon={<BuySatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<BuySatsCheckedIcon sx={{width:"30px",height:"30px"}} color="primary"/>}/>}
+                            control={<Radio icon={<BuySatsIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="text.secondary"/>} checkedIcon={<BuySatsCheckedIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="primary"/>}/>}
                             label={this.state.type == 0 ? <Typography color="primary"><b>{t("Buy")}</b></Typography>: <Typography color="text.secondary">{t("Buy")}</Typography>}
                             labelPlacement="end"
                         />
                         <FormControlLabel
                             value={1}
-                            control={<Radio color="secondary" icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
+                            control={<Radio color="secondary" icon={<SellSatsIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="text.secondary"/>} checkedIcon={<SellSatsCheckedIcon sx={{width: `${30/24}em`, height: `${30/24}em`}} color="secondary"/>}/>}
                             label={this.state.type == 1 ? <Typography color="secondary"><b>{t("Sell")}</b></Typography>: <Typography color="text.secondary">{t("Sell")}</Typography>}
                             labelPlacement="end"
                         />
@@ -329,7 +329,7 @@ class MakerPage extends Component {
             </Grid>
 
             <Grid alignItems="stretch" style={{ display: "flex" }}>
-                    <div style={{maxWidth:150}}>
+                    <div style={{}}>
                     <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Amount of fiat to exchange for bitcoin")}>
                         <TextField
                             disabled = {this.state.enableAmountRange}
@@ -351,7 +351,7 @@ class MakerPage extends Component {
                         </div>
                         <div >
                             <Select
-                                sx={{width:'120px'}}
+                                sx={{width: `${120/16}em`}}
                                 required={true}
                                 defaultValue={this.defaultCurrency}
                                 inputProps={{
@@ -411,7 +411,7 @@ class MakerPage extends Component {
                 <Grid item xs={12} align="center">
                     <div style={{display: this.state.is_explicit ? '':'none'}}>
                     <TextField
-                            sx={{width:240}}
+                            sx={{width: `${240/16}em`}}
                             label={t("Satoshis")}
                             error={this.state.badSatoshis ? true : false}
                             helperText={this.state.badSatoshis}
@@ -428,7 +428,7 @@ class MakerPage extends Component {
                     </div>
                     <div style={{display: this.state.is_explicit ? 'none':''}}>
                         <TextField
-                                sx={{width:240}}
+                                sx={{width: `${240/16}em`}}
                                 error={this.state.badPremium}
                                 helperText={this.state.badPremium}
                                 label={t("Premium over Market (%)")}
@@ -527,8 +527,8 @@ class MakerPage extends Component {
     rangeText =()=> {
         const { t } = this.props;
         return (
-            <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
-                <span style={{width: t("From").length*8+2, textAlign:"left"}}>{t("From")}</span>
+            <div style={{display:'flex', alignItems:'center', flexWrap:'nowrap', justifyContent:'space-around'}}>
+                <span style={{ textAlign:"left" }}>{t("From")}</span>
                 <TextField
                     variant="standard"
                     type="number"
@@ -536,9 +536,9 @@ class MakerPage extends Component {
                     value={this.state.minAmount}
                     onChange={this.handleMinAmountChange}
                     error={this.minAmountError()}
-                    sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
+                    sx={{ px: "1em" }}
                   />
-                <span style={{width: t("to").length*8, textAlign:"center"}}>{t("to")}</span>
+                <span style={{ textAlign:"center" }}>{t("to")}</span>
                 <TextField
                     variant="standard"
                     size="small"
@@ -546,9 +546,9 @@ class MakerPage extends Component {
                     value={this.state.maxAmount}
                     error={this.maxAmountError()}
                     onChange={this.handleMaxAmountChange}
-                    sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
+                    sx={{ px: "1em" }}
                   />
-                <span style={{width: this.state.currencyCode.length*9+3, textAlign:"right"}}>{this.state.currencyCode}</span>
+                <span style={{ textAlign:"right" }}>{this.state.currencyCode}</span>
             </div>
             )
 
@@ -557,14 +557,14 @@ class MakerPage extends Component {
     AdvancedMakerOptions = () => {
         const { t } = this.props;
         return(
-            <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
+            <Paper elevation={12} style={{ padding: 8, width: `${280/16}em`, align:'center'}}>
 
             <Grid container spacing={1}>
 
             <Grid item xs={12} align="center">
                 <FormControl align="center">
                     <Tooltip enterTouchDelay={0} placement="top" align="center" title={t("Let the taker chose an amount within the range")}>
-                        <FormHelperText align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                        <FormHelperText align="center" style={{display:'flex',alignItems:'center', flexWrap:'nowrap'}}>
                             <Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked, is_explicit: false}) & this.recalcBounds()}/>
                             {this.state.enableAmountRange & this.state.minAmount != null? this.rangeText() : t("Enable Amount Range")}
                         </FormHelperText>
@@ -575,7 +575,7 @@ class MakerPage extends Component {
                     <div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
                         <RangeSlider
                             disableSwap={true}
-                            sx={{width:200, align:"center"}}
+                            sx={{width: `${200/16}em`, align:"center"}}
                             disabled={!this.state.enableAmountRange || this.state.loadingLimits}
                             value={[Number(this.state.minAmount), Number(this.state.maxAmount)]}
                             step={(this.getMaxAmount()-this.getMinAmount())/5000}
@@ -596,7 +596,7 @@ class MakerPage extends Component {
                 </Grid>
 
                 <Grid item xs={12} align="center">
-                    <Accordion defaultExpanded={true} elevation={0} sx={{width:'280px', position:'relative', left:'-8px'}}>
+                    <Accordion defaultExpanded={true} elevation={0} sx={{width:'17.5em', position:'relative', left:'-8px'}}>
                         <AccordionSummary expandIcon={<ExpandMoreIcon color="primary"/>}>
                             <Typography sx={{flexGrow: 1, textAlign: "center"}} color="text.secondary">{t("Expiry Timers")}</Typography>
                         </AccordionSummary>
@@ -605,7 +605,7 @@ class MakerPage extends Component {
                             <Grid item xs={12} align="center">
                                 <LocalizationProvider dateAdapter={DateFnsUtils}>
                                     <TimePicker
-                                        sx={{width:210, align:"center"}}
+                                        sx={{ align:"center"}}
                                         ampm={false}
                                         openTo="hours"
                                         views={['hours', 'minutes']}
@@ -634,7 +634,7 @@ class MakerPage extends Component {
                             <Grid item xs={12} align="center">
                                 <LocalizationProvider dateAdapter={DateFnsUtils}>
                                     <TimePicker
-                                        sx={{width:210, align:"center"}}
+                                        sx={{ align:"center" }}
                                         ampm={false}
                                         openTo="hours"
                                         views={['hours', 'minutes']}
@@ -668,11 +668,11 @@ class MakerPage extends Component {
                     <FormControl align="center">
                     <Tooltip enterDelay={800} enterTouchDelay={0} placement="top" title={t("Set the skin-in-the-game, increase for higher safety assurance")}>
                             <FormHelperText align="center" sx={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
-                                {t("Fidelity Bond Size")} <LockIcon sx={{height:20,width:20}}/>
+                                {t("Fidelity Bond Size")} <LockIcon sx={{height: `${20/24}em` ,width: `${20/24}em`}}/>
                             </FormHelperText>
                         </Tooltip>
                         <Slider
-                            sx={{width:220, align:"center"}}
+                            sx={{width: `${220/16}em`, align:"center"}}
                             aria-label="Bond Size (%)"
                             defaultValue={3}
                             valueLabelDisplay="auto"
@@ -711,7 +711,7 @@ class MakerPage extends Component {
     makeOrderBox=()=>{
         const { t } = this.props;
         return(
-            <Box sx={{width: this.state.tabValue==1? '270px':'252px'}}>
+            <Box sx={{width: this.state.tabValue==1? `${270/16}em`: `${252/16}em`}}>
                     <Box sx={{ borderBottom: 1, borderColor: 'divider', position:'relative',left:'5px'}}>
                         <Tabs value={this.state.tabValue} variant="fullWidth" >
                             <Tab label={t("Order")} {...this.a11yProps(0)} onClick={() => this.setState({tabValue:0})}/>
@@ -733,7 +733,7 @@ class MakerPage extends Component {
   render() {
     const { t } = this.props;
     return (
-        <Grid container align="center" spacing={1} sx={{minWidth:380}}>
+        <Grid container align="center" spacing={1} sx={{minWidth: "60%"}}>
             {getCookie("robot_token") ?
                 <StoreTokenDialog
                     open={this.state.openStoreToken}
diff --git a/frontend/src/components/RangeSlider.js b/frontend/src/components/RangeSlider.js
index b4a794f8..a0bcc715 100644
--- a/frontend/src/components/RangeSlider.js
+++ b/frontend/src/components/RangeSlider.js
@@ -6,15 +6,15 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
   height: 3,
   padding: '13px 0',
   '& .MuiSlider-thumb': {
-    height: 27,
-    width: 27,
+    height: `${27/16}em`,
+    width: `${27/16}em`,
     backgroundColor: '#fff',
     border: '1px solid currentColor',
     '&:hover': {
       boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
     },
     '& .range-bar': {
-      height: 9,
+      height: `${9/16}em`,
       width: 1,
       backgroundColor: 'currentColor',
       marginLeft: 1,
@@ -22,12 +22,12 @@ const RangeSlider = styled(Slider)(({ theme }) => ({
     },
   },
   '& .MuiSlider-track': {
-    height: 3,
+    height: `${3/16}em`,
   },
   '& .MuiSlider-rail': {
     color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
     opacity: theme.palette.mode === 'dark' ? undefined : 1,
-    height: 3,
+    height: `${3/16}em`,
   },
 }));
 
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index c1eef8f2..91f1b822 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -181,33 +181,37 @@ class UserGenPage extends Component {
 
   render() {
     const { t, i18n} = this.props;
+    const fontSize = this.props.theme.typography.fontSize;
+    const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14
     return (
       <Grid container spacing={1}>
         <Grid item>
           <div className='clickTrough'/>
         </Grid>
-        <Grid item xs={12} align="center" sx={{width:370, height:260}}>
-          {!this.state.loadingRobot && this.state.avatarUrl ?
+        <Grid item xs={12} align="center" sx={{width:370 * fontSizeFactor, height: 260 * fontSizeFactor}}>
+        {!this.state.loadingRobot && this.state.avatarUrl ?
             <div>
               <Grid item xs={12} align="center">
                 <Typography component="h5" variant="h5">
                   <b>{this.state.nickname && getCookie("sessionid") ?
-                    <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}>
-                      <BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/>
+                    <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height: 45 * fontSizeFactor}}>
+                      <BoltIcon sx={{ color: "#fcba03", height: 33 * fontSizeFactor, width: 33 * fontSizeFactor}}/>
+                      <a>{this.state.nickname}</a>
+                      <BoltIcon sx={{ color: "#fcba03", height: 33 * fontSizeFactor, width: 33 * fontSizeFactor}}/>
                     </div>
                     : ""}</b>
                 </Typography>
               </Grid>
               <Grid item xs={12} align="center">
               <Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
-                <div style={{ maxWidth: 200, maxHeight: 200 }}>
-                  <SmoothImage
+                <div style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor}}>
+                <SmoothImage
                     src={this.state.avatarUrl}
                     imageStyles={{borderRadius: "50%",
                       border: "2px solid #555", 
                       filter: "drop-shadow(1px 1px 1px #000000)",
-                      height: "195px",
-                      width: "200px"}}
+                      height: `${195*fontSizeFactor}px`,
+                      width: `${200*fontSizeFactor}px`}}
                   />
                 </div>
                 </Tooltip>
@@ -228,7 +232,7 @@ class UserGenPage extends Component {
           }
           <Grid container align="center">
             <Grid item xs={12} align="center">
-              <TextField sx={{maxWidth: 280}}
+              <TextField sx={{maxWidth: 280 * fontSizeFactor}}
                 error={this.state.bad_request ? true : false}
                 label={t("Store your token safely")}
                 required={true}
@@ -244,7 +248,7 @@ class UserGenPage extends Component {
                 }}
                 InputProps={{
                   startAdornment:
-                  <div style={{width:50, minWidth:50, position:'relative',left:-6}}>
+                  <div style={{width: 50*fontSizeFactor, minWidth: 50*fontSizeFactor, position:'relative',left:-6}}>
                     <Grid container>
                     <Grid item xs={6}>
                         <Tooltip enterTouchDelay={250} title={t("Save token and PGP credentials to file")}>
@@ -254,7 +258,7 @@ class UserGenPage extends Component {
                             disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} 
                             onClick={()=> saveAsJson(this.state.nickname+'.json', this.createJsonFile())}
                             >
-                            <DownloadIcon sx={{width:22, height:22}}/>
+                            <DownloadIcon sx={{width: 22*fontSizeFactor, height: 22*fontSizeFactor}}/>
                           </IconButton>
                           </span>
                         </Tooltip>
@@ -266,7 +270,7 @@ class UserGenPage extends Component {
                             disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} 
                             onClick={()=> (copyToClipboard(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))}
                             >
-                            <ContentCopy sx={{width:18, height:18}}/>
+                            <ContentCopy sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}}/>
                           </IconButton>
                         </Tooltip>
                       </Grid>
@@ -274,7 +278,9 @@ class UserGenPage extends Component {
                   </div>,
                   endAdornment:
                   <Tooltip enterTouchDelay={250} title={t("Generate a new token")}>
-                    <IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>
+                    <IconButton onClick={this.handleClickNewRandomToken}>
+                      <CasinoIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}}/>
+                    </IconButton>
                   </Tooltip>,
                   }}
               />
@@ -283,14 +289,14 @@ class UserGenPage extends Component {
           <Grid item xs={12} align="center">
             {this.state.tokenHasChanged ?
             <Button type="submit" size='small'  onClick= {this.handleClickSubmitToken}>
-              <SmartToyIcon sx={{width:18, height:18}} />
+              <SmartToyIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}} />
               <span> {t("Generate Robot")}</span>
             </Button>
             :
             <Tooltip enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("You must enter a new token first")}>
               <div>
               <Button disabled={true} type="submit" size='small' >
-                <SmartToyIcon sx={{width:18, height:18}} />
+                <SmartToyIcon sx={{width: 18*fontSizeFactor, height: 18*fontSizeFactor}} />
                 <span>{t("Generate Robot")}</span>
               </Button>
               </div>
@@ -306,11 +312,11 @@ class UserGenPage extends Component {
             </ButtonGroup>
           </Grid>
 
-          <Grid item xs={12} align="center" sx={{width:370}}>
+          <Grid item xs={12} align="center" sx={{width: 370*fontSizeFactor}}>
             <Grid item>
-              <div style={{height:40}}/>
+              <div style={{height: 30*fontSizeFactor}}/>
             </Grid>
-            <div style={{width:370, left:30}}>
+            <div style={{width: 370*fontSizeFactor, left: 30*fontSizeFactor}}>
               <Grid container align="center">
                 <Grid item xs={0.8}/>
                 <Grid item xs={7.5} align="right">
@@ -319,7 +325,9 @@ class UserGenPage extends Component {
                   </Typography>
                 </Grid>
                 <Grid item xs={2.5} align="left">
-                    <RoboSatsNoTextIcon color="primary" sx={{height:72, width:72}}/>
+                    <RoboSatsNoTextIcon color="primary" 
+                      sx={{height: 72 * fontSizeFactor, width: 72 * fontSizeFactor}}
+                      />
                 </Grid>
               </Grid>
             </div>
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 44dde160..3df760db 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -61,8 +61,6 @@ input[type=number] {
 .bottomBar {
   position: fixed;
   bottom: 0;
-  width: 100%;
-  height: 40px;
 }
 
 .amboss{
@@ -87,6 +85,12 @@ input[type=number] {
   left: -16px;
 }
 
+.newAvatar {
+  border-radius: 50%; 
+  border: 2px solid #555; 
+  filter: drop-shadow(1px 1px 1px #000000);
+}
+
 .profileAvatar {
   border: 0.5px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);