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 023b8866..51895943 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -65,10 +65,8 @@ export default class App extends Component {
         <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:'0px'}} onClick={()=> this.setState({expandedSettings: !this.state.expandedSettings})}><SettingsIcon/></IconButton>
-          <IconButton sx={{position:'fixed', right:'0px', top: '34px', display: this.state.expandedSettings ? '':'none'}} onClick={() => this.onZoomClick("in")}><ZoomInIcon/></IconButton>
-          <IconButton sx={{position:'fixed', right:'0px', top: '68px', display: this.state.expandedSettings ? '':'none'}} onClick={() => this.onZoomClick("out")}><ZoomOutIcon/></IconButton>
-          <IconButton sx={{position:'fixed', right:'0px', top: '102px', display: this.state.expandedSettings ? '':'none'}} onClick={()=>this.setState({dark:!this.state.dark})}>
+          <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>
diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js
index 62bc9974..73c43c66 100644
--- a/frontend/src/components/AutocompletePayments.js
+++ b/frontend/src/components/AutocompletePayments.js
@@ -18,7 +18,7 @@ const Root = styled('div')(
   color: ${
     theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
   };
-  font-size: ${14/16}em;
+  font-size: 14px;
 `,
 );
 
@@ -26,20 +26,21 @@ const Label = styled('label')(
     ({ theme , error}) => `
   color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') :  (error? '#dd0000':'#717171')};
   align: center;
+  padding: 0 0 4px;
   line-height: 1.5; f44336
   display: block;
-  font-size: ${13/16}em;
+  font-size: 13px;
 `,
 );
 
 const InputWrapper = styled('div')(
   ({ theme , error}) => `
-  width: ${244/16}em;
-  min-height: ${44/16}em;
-  max-height: ${124/16}em;
+  width: 244px;
+  min-height: 44px;
+  max-height: 124px;
   border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')};
   background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
-  border-radius: ${4/16}em;
+  border-radius: 4px;
   padding: 1px;
   display: flex;
   flex-wrap: wrap;
@@ -58,17 +59,17 @@ const InputWrapper = styled('div')(
     color: ${
       theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
     };
-    height: ;${30/16}em
+    height: 30px;
     box-sizing: border-box;
-    padding: ${4/16}em ${6/16}em;
+    padding: 4px 6px;
     width: 0;
-    min-width: ${30/16}em;
-    font-size: ${15/16}em;
+    min-width: 30px;
+    font-size: 15px;
     flex-grow: 1;
     border: 0;
     margin: 0;
     outline: 0;
-    max-height: ${124/16}em;
+    max-height: 124px;
   }
 `,
 );
@@ -77,8 +78,8 @@ function Tag(props) {
   const { label, icon, onDelete, ...other } = props;
   return (
     <div {...other}>
-        <div style={{position:'relative',left: `-${5/16}em`,top: `${4/16}em`}}>
-          <PaymentIcon width={`22em`} height={`22em`} icon={icon}/>
+        <div style={{position:'relative',left:'-5px',top:'4px'}}>
+          <PaymentIcon width={22} height={22} icon={icon}/>
         </div>
         <span style={{position:'relative',left:'2px'}}>{label}</span>
       <CloseIcon onClick={onDelete} />
@@ -96,16 +97,16 @@ const StyledTag = styled(Tag)(
   ({ theme }) => `
   display: flex;
   align-items: center;
-  height: ${34/16}em;
-  margin: ${2/16}em;
-  line-height: ${22/16}em;
+  height: 34px;
+  margin: 2px;
+  line-height: 22px;
   background-color: ${
     theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
   };
   border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
   border-radius: 2px;
   box-sizing: content-box;
-  padding: 0 ${4/16}em 0 ${10/16}em;
+  padding: 0 4px 0 10px;
   outline: 0;
   overflow: hidden;
 
@@ -118,13 +119,13 @@ const StyledTag = styled(Tag)(
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: ${15/16}em;
+    font-size: 15px;
   }
 
   & svg {
-    font-size: ${15/16}em;
+    font-size: 15px;
     cursor: pointer;
-    padding: ${4/16}em;
+    padding: 4px;
   }
 `,
 );
@@ -133,31 +134,31 @@ const ListHeader = styled('span')(
     ({ theme }) => `
   color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
   align: left;
-  line-height: ${10/16}em;
-  max-height: ${10/16}em;
+  line-height:10px;
+  max-height: 10px;
   display: inline-block;
   background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
-  font-size: ${12/16}em;
+  font-size: 12px;
   pointer-events: none;
 `,
 );
 
 const Listbox = styled('ul')(
   ({ theme }) => `
-  width: ${244/16}em;
+  width: 244px;
   margin: 2px 0 0;
   padding: 0;
   position: absolute;
   list-style: none;
   background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   overflow: auto;
-  max-height: ${250/16}em;
-  border-radius: ${4/16}em;
-  box-shadow: 0 ${2/16}em ${8/16}em rgba(0, 0, 0, 0.15);
+  max-height: 250px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   z-index: 999;
 
   & li {
-    padding: ${5/16}em ${12/16}em;
+    padding: 5px 12px;
     display: flex;
 
     & span {
@@ -204,7 +205,7 @@ export default function AutocompletePayments(props) {
     focused="true",
     setAnchorEl,
   } = useAutocomplete({
-    sx: {width: `${200/16}em`, align:'left'},
+    sx: {width:'200px', align:'left'},
     id: 'payment-methods',
     multiple: true,
     options: props.optionsType=="fiat" ? paymentMethods : swapDestinations,
@@ -236,7 +237,7 @@ export default function AutocompletePayments(props) {
 
   return (
     <Root>
-      <div style={{height: `${5/16}em`}} />
+      <div style={{height:'5px'}}></div>
       <Tooltip placement="top" enterTouchDelay={300} enterDelay={700} enterNextDelay={2000} title={props.tooltipTitle}>
         <div {...getRootProps()} >
           <Label {...getInputLabelProps()} error={props.error ? "error" : null}> {props.label}</Label>
@@ -250,23 +251,23 @@ export default function AutocompletePayments(props) {
       </Tooltip>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-            <div style={{position:'fixed', minHeight: `${20/16}em`,  marginLeft: `${(120-3*props.listHeaderText.length)/16}em`, marginTop: `-${13/16}em`}}>
+            <div style={{position:'fixed', minHeight:'20px',  marginLeft: 120-props.listHeaderText.length*3, marginTop: '-13px'}}>
                 <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
             </div>
           {groupedOptions.map((option, index) => (
             <li key={option.name} {...getOptionProps({ option, index })}>
               <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
-                  <div style={{position:'relative', right: `${4/16}em`, top: `${4/16}em`}}>
-                    <AddIcon style={{color : '#1976d2'}} sx={{width: `${18/24}em`, height: `${18/24}em`}} />
+                  <div style={{position:'relative', right: '4px', top:'4px'}}>
+                    <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
                   </div>
                   {t(option.name)}
               </Button>
-              <div style={{position:'relative', top: `${5/16}em`}}><CheckIcon/></div>
+              <div style={{position:'relative', top: '5px'}}><CheckIcon/></div>
             </li>
           ))}
           {val != null?
               (val.length > 2 ?
-                  <Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width: `${18/16}em`, height: `${18/16}em`}}/>{props.addNewButtonText}</Button>
+                  <Button size="small" fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>{props.addNewButtonText}</Button>
               :null)
             :null}
         </Listbox>
@@ -274,10 +275,10 @@ export default function AutocompletePayments(props) {
       //Here goes what happens if there is no groupedOptions
       (getInputProps().value.length > 0 ?
         <Listbox {...getListboxProps()}>
-          <Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width: `${20/16}em`, height: `${20/16}em`}}/>{props.addNewButtonText}</Button>
+          <Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:20,height:20}}/>{props.addNewButtonText}</Button>
         </Listbox>
         :null)
       }
     </Root>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 7bf59fb6..6d683263 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -44,7 +44,7 @@ export default class HomePage extends Component {
         const fontSizeFactor = fontSize / 14; // default fontSize is 14
         return (
               <Router >
-                  <div className='appCenter' style={{height: window.innerHeight - 40*fontSizeFactor - 20, overflow:'auto'}}>
+                  <div className='appCenter'>
                     <Switch>
                         <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}/>}/>
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 8a8897c6..3afda14e 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";
@@ -596,7 +596,7 @@ class MakerPage extends Component {
                 </Grid>
 
                 <Grid item xs={12} align="center">
-                    <Accordion defaultExpanded={true} elevation={0} sx={{ 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>