diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..156d0b5
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+vscode:
+  extensions:
+    - dbaeumer.vscode-eslint
+
diff --git a/package.json b/package.json
index b4b4152..e60a6e9 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,12 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.0.0",
+    "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@faker-js/faker": "^5.5.3",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/user-event": "^12.0.2",
@@ -18,11 +21,12 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.3",
     "axios": "^0.21.1",
+    "date-fns": "^2.28.0",
+    "dayjs": "^1.10.7",
     "framer-motion": "^4.0.0",
-    "moment": "^2.29.1",
     "puppeteer": "^10.1.0",
     "react": "^17.0.2",
-    "react-datetime": "^3.0.4",
+    "react-dayjs-picker": "^1.3.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
diff --git a/src/components/GraphWrapper/graphWrapper.test.tsx b/src/components/GraphWrapper/graphWrapper.test.tsx
index ae58cd1..8a39168 100644
--- a/src/components/GraphWrapper/graphWrapper.test.tsx
+++ b/src/components/GraphWrapper/graphWrapper.test.tsx
@@ -12,8 +12,11 @@ import { queryEntities } from "../../services/queryEntity";
 import constants from "../../utils/constants";
 import { useGlobalStore } from "../../store/global";
 
-const { defaultStartTimestamp, defaultStepValue, defaultEndTimestamp } =
-  constants;
+const {
+  defaultStartTimestamp,
+  defaultStepValue,
+  defaultEndTimestamp,
+} = constants;
 
 const TestComponent = () => {
   const { changeRoute } = useGlobalStore();
diff --git a/src/components/GraphWrapper/index.tsx b/src/components/GraphWrapper/index.tsx
index fea4ba4..9b99864 100644
--- a/src/components/GraphWrapper/index.tsx
+++ b/src/components/GraphWrapper/index.tsx
@@ -20,8 +20,11 @@ interface PageProps {
 
 const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
   const { selectedRoutePath } = props;
-  const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    selectedStepValue,
+  } = useTimeQuerierStore();
 
   const { data, error, status } = useFetch<apiResponse<queryResponse>>(
     queryEntities(
diff --git a/src/components/ReusableGraph/index.tsx b/src/components/ReusableGraph/index.tsx
index 6cf4475..6c15da3 100644
--- a/src/components/ReusableGraph/index.tsx
+++ b/src/components/ReusableGraph/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 import {
   VStack,
   Alert,
@@ -63,9 +63,7 @@ const ReusableGraph: React.FC<reusableGraphProps> = ({
           dataKey="timestamp"
           domain={["dataMin", "dataMax"]}
           tickMargin={10}
-          tickFormatter={(unixTime) =>
-            moment(unixTime).format("D MMM HH:mm:ss")
-          }
+          tickFormatter={(unixTime) => dayjs(unixTime).format("D MMM HH:mm:ss")}
           interval={0}
           type="number"
         />
diff --git a/src/components/RouteSelector/routeSelector.test.tsx b/src/components/RouteSelector/routeSelector.test.tsx
index 9718198..1141faf 100644
--- a/src/components/RouteSelector/routeSelector.test.tsx
+++ b/src/components/RouteSelector/routeSelector.test.tsx
@@ -8,11 +8,8 @@ import { getRoutes } from "../../services/getRoutes";
 import { truncate } from "../../utils/stringManipulation";
 
 jest.mock("axios");
-jest.mock(
-  "react-virtualized-auto-sizer",
-  () =>
-    ({ children }: any) =>
-      children({ height: 600, width: 600 })
+jest.mock("react-virtualized-auto-sizer", () => ({ children }: any) =>
+  children({ height: 600, width: 600 })
 );
 
 const mockedAxios = axios as jest.Mocked<typeof axios>;
diff --git a/src/components/TimeQuerier/index.tsx b/src/components/TimeQuerier/index.tsx
index 7aa7060..435b8c2 100644
--- a/src/components/TimeQuerier/index.tsx
+++ b/src/components/TimeQuerier/index.tsx
@@ -13,28 +13,35 @@ import {
   Alert,
   AlertIcon,
 } from "@chakra-ui/react";
-import moment from "moment";
-import Datetime from "react-datetime";
 import constants from "../../utils/constants";
 import { useTimeQuerierStore } from "../../store/timeQuerier";
+import dayjs from "dayjs";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from "@material-ui/pickers";
 
 const TimeQuerier: React.FC = () => {
   const styles = useStyleConfig("DateTime", {});
-  const { selectedStartTimestamp, selectedEndTimestamp, changeTimeQuerier } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    changeTimeQuerier,
+  } = useTimeQuerierStore();
   const { defaultStepValue, minStepValue, dateFormat, timeFormat } = constants;
-  const [startTime, setStartTime] = useState(moment(selectedStartTimestamp));
-  const [endTime, setEndTime] = useState(moment(selectedEndTimestamp));
+  const [startTime, setStartTime] = useState(dayjs(selectedStartTimestamp));
+  const [endTime, setEndTime] = useState(dayjs(selectedEndTimestamp));
   const [stepTime, setStepTime] = useState(defaultStepValue);
   const [error, setError] = useState<undefined | string>(undefined);
 
-  const handleStartChange = (date: moment.Moment | string) => {
+  const handleStartChange = (date: dayjs.Dayjs | string) => {
     if (typeof date !== "string") {
       setStartTime(date);
       setError(undefined);
     }
   };
-  const handleEndChange = (date: moment.Moment | string) => {
+  const handleEndChange = (date: dayjs.Dayjs | string) => {
     if (typeof date !== "string") {
       setEndTime(date);
       setError(undefined);
@@ -44,13 +51,13 @@ const TimeQuerier: React.FC = () => {
     if (valueAsString !== "" && valueAsNumber >= minStepValue)
       setStepTime(valueAsNumber);
   };
-  const valid = (current: moment.Moment) => {
-    return current.isBefore(moment());
+  const valid = (current: dayjs.Dayjs) => {
+    return current.isBefore(dayjs());
   };
   const handleFetchTimeSeriesData = () => {
     if (
       endTime.isBefore(startTime) ||
-      endTime.isAfter(moment()) ||
+      endTime.isAfter(dayjs()) ||
       stepTime < minStepValue
     )
       setError("Kindy check your input");
@@ -74,14 +81,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>Start Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={startTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker start-time" }}
-            onChange={handleStartChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={startTime}
+              isValidDate={valid}
+              onChange={handleStartChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box
@@ -93,14 +107,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>End Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={endTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker end-time" }}
-            onChange={handleEndChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={endTime}
+              isValidDate={valid}
+              onChange={handleEndChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box
diff --git a/src/components/TimeQuerier/timeQuerier.test.tsx b/src/components/TimeQuerier/timeQuerier.test.tsx
index 38a4d1c..b1fa46b 100644
--- a/src/components/TimeQuerier/timeQuerier.test.tsx
+++ b/src/components/TimeQuerier/timeQuerier.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 import { fireEvent } from "@testing-library/react";
 import TimeQuerier from "./";
 import { render } from "../../utils/customRender";
@@ -21,12 +21,12 @@ describe("TimeQuerier Component", () => {
     expect(getByDisplayValue(defaultStepValue.toString(10))).toBeTruthy();
     expect(
       getByDisplayValue(
-        moment(defaultStartTimestamp).format(`${dateFormat} ${timeFormat}`)
+        dayjs(defaultStartTimestamp).format(`${dateFormat} ${timeFormat}`)
       )
     ).toBeTruthy();
     expect(
       getByDisplayValue(
-        moment(defaultEndTimestamp).format(`${dateFormat} ${timeFormat}`)
+        dayjs(defaultEndTimestamp).format(`${dateFormat} ${timeFormat}`)
       )
     ).toBeTruthy();
   });
diff --git a/src/e2e.test.ts b/src/e2e.test.ts
index 36f2d56..f1eb5bf 100644
--- a/src/e2e.test.ts
+++ b/src/e2e.test.ts
@@ -1,6 +1,6 @@
 import { routeResponse } from "./utils/types";
 import puppeteer from "puppeteer";
-import moment from "moment";
+import dayjs from "dayjs";
 import constants from "./utils/constants";
 import { getActiveMachines } from "./services/getActiveMachines";
 import { getRoutes } from "./services/getRoutes";
@@ -50,12 +50,12 @@ describe("E2E test for Dashboard", () => {
     );
     const graph = page.$('[data-testid="graph-info"]');
     const startTime = await page.$(
-      `input[class="custom-datepicker start-time"][value="${moment(
+      `input[class="custom-datepicker start-time"][value="${dayjs(
         defaultStartTimestamp
       ).format(`${dateFormat} ${timeFormat}"`)}]`
     );
     const endTime = await page.$(
-      `input[value="${moment(defaultEndTimestamp).format(
+      `input[value="${dayjs(defaultEndTimestamp).format(
         `${dateFormat} ${timeFormat}"`
       )}]`
     );
@@ -165,7 +165,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const startTime = await page.$(".start-time");
-    const newStart = moment().subtract(1, "days").subtract(1, "hours");
+    const newStart = dayjs().subtract(1, "days").subtract(1, "hours");
     if (startTime) {
       await startTime.click();
     }
@@ -176,7 +176,7 @@ describe("E2E test for Dashboard", () => {
     );
     await nextStart?.evaluate((b) => b.click());
     const start = await page.$(
-      `input[class="custom-datepicker start-time"][value="${moment(
+      `input[class="custom-datepicker start-time"][value="${dayjs(
         newStart
       ).format(`${dateFormat} ${timeFormat}`)}"]`
     );
@@ -189,7 +189,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const endTime = await page.$(".end-time");
-    const newEnd = moment().subtract(2, "days");
+    const newEnd = dayjs().subtract(2, "days");
     if (endTime) {
       await endTime.click();
     }
@@ -202,7 +202,7 @@ describe("E2E test for Dashboard", () => {
       return b.click();
     });
     const end = await page.$(
-      `input[class="custom-datepicker end-time"][value="${moment(newEnd).format(
+      `input[class="custom-datepicker end-time"][value="${dayjs(newEnd).format(
         `${dateFormat} ${timeFormat}"`
       )}]`
     );
@@ -226,7 +226,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const endTime = await page.$(".end-time");
-    const newEnd = moment().subtract(2, "days");
+    const newEnd = dayjs().subtract(2, "days");
     if (endTime) {
       await endTime.click();
     }
@@ -252,7 +252,7 @@ describe("E2E test for Dashboard", () => {
     await entities[0].click();
     if (await page.$('[data-testid="graph"]')) {
       const startTime = await page.$(".start-time");
-      const newStart = moment().subtract(1, "days").subtract(1, "hours");
+      const newStart = dayjs().subtract(1, "days").subtract(1, "hours");
       if (startTime) {
         await startTime.click();
       }
diff --git a/src/mock/mockGraph.ts b/src/mock/mockGraph.ts
index 2fdbfc6..9b65355 100644
--- a/src/mock/mockGraph.ts
+++ b/src/mock/mockGraph.ts
@@ -1,12 +1,12 @@
 import faker from "@faker-js/faker";
-import moment from "moment";
+import dayjs from "dayjs";
 
 /* Custom Generator
    Generate a datapoint with the given keys
    with random values using faker
 */
 const dataGenerator = () => ({
-  timestamp: moment(faker.date.past()).unix(),
+  timestamp: dayjs(faker.date.past()).unix(),
   value: faker.datatype.number,
 });
 
diff --git a/src/theme/components/DateTime.ts b/src/theme/components/DateTime.ts
index aa89ac5..6e42c43 100644
--- a/src/theme/components/DateTime.ts
+++ b/src/theme/components/DateTime.ts
@@ -26,10 +26,9 @@ export const DateTime = {
     },
     ".rdtPicker td.rdtDay:hover,.rdtPicker thead tr:first-of-type th:hover\
     ,.rdtPicker .rdtTimeToggle:hover,.rdtCounter .rdtBtn:hover\
-    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover":
-      {
-        bg: mode("#eee", "darkPrimary")(props),
-      },
+    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover": {
+      bg: mode("#eee", "darkPrimary")(props),
+    },
     ".rdtPicker td.rdtDisabled:hover": {
       bg: "none",
     },
diff --git a/src/theme/index.ts b/src/theme/index.ts
index e41a243..9f2b7ea 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -9,7 +9,6 @@ import { Heading } from "./components/Heading";
 import { extendTheme } from "@chakra-ui/react";
 // Global style overrides
 import styles from "./global";
-import "react-datetime/css/react-datetime.css";
 //Branding style ovverides
 import branding from "./branding";
 
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 4d740f7..8617200 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,12 +1,12 @@
-import moment from "moment";
+import dayjs from "dayjs";
 
 export default {
   defaultSelectedMachine: null,
   backendBaseUrl: "http://localhost:9990/api/v1",
   defaultStepValue: 15,
   minStepValue: 1,
-  defaultStartTimestamp: moment().subtract(1, "h").toISOString(),
-  defaultEndTimestamp: moment().toISOString(),
+  defaultStartTimestamp: dayjs().subtract(1, "h").toISOString(),
+  defaultEndTimestamp: dayjs().toISOString(),
   dateFormat: "DD/MM/yyyy",
   timeFormat: "h:mm A",
   graphDataLimit: 6000,
diff --git a/yarn.lock b/yarn.lock
index 44ab270..c5faa1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1127,6 +1127,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
@@ -1724,6 +1731,18 @@
   resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@date-io/core@1.x", "@date-io/core@^1.3.13":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
+  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
+
+"@date-io/date-fns@^1.3.13":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
+  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
+  dependencies:
+    "@date-io/core" "^1.3.13"
+
 "@emotion/babel-plugin@^11.1.2":
   version "11.2.0"
   resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.2.0.tgz"
@@ -2076,6 +2095,82 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@material-ui/core@^4.12.3":
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.12.1"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/pickers@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"
+  integrity sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==
+  dependencies:
+    "@babel/runtime" "^7.6.0"
+    "@date-io/core" "1.x"
+    "@types/styled-jsx" "^2.2.8"
+    clsx "^1.0.2"
+    react-transition-group "^4.0.0"
+    rifm "^0.7.0"
+
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -2581,6 +2676,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-transition-group@^4.2.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized-auto-sizer@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz"
@@ -2649,6 +2751,13 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/styled-jsx@^2.2.8":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.9.tgz#e50b3f868c055bcbf9bc353eca6c10fdad32a53f"
+  integrity sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.7"
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz"
@@ -4196,6 +4305,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clsx@^1.0.2, clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -4680,6 +4794,14 @@ css-unit-converter@^1.1.1:
   resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz"
   integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -4816,6 +4938,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.2:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
 csstype@^3.0.2, csstype@^3.0.6:
   version "3.0.7"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz"
@@ -4916,6 +5043,16 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -5174,6 +5311,14 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
@@ -6654,7 +6799,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6851,6 +6996,11 @@ husky@^7.0.2:
   resolved "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz"
   integrity sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -7231,6 +7381,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
@@ -8026,6 +8181,76 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
+  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.9.0"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
+  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-global@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
+  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-nested@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
+  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
+  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
+  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.9.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
+  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.9.0"
+
+jss@10.9.0, jss@^10.5.1:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
+  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz"
@@ -8628,11 +8853,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.29.1:
-  version "2.29.1"
-  resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
@@ -9424,6 +9644,11 @@ popmotion@9.3.5:
     style-value-types "4.1.4"
     tslib "^2.1.0"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz"
@@ -10207,7 +10432,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10413,12 +10638,10 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-react-datetime@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/react-datetime/-/react-datetime-3.0.4.tgz"
-  integrity sha512-v6MVwCve+DRaLN2f22LTO5TlrPpkUXumPkp1zfrbhaFtSYGl2grZ2JtwJfLxRj/T4ACyePAV4srCR6cMSiQ/Iw==
-  dependencies:
-    prop-types "^15.5.7"
+react-dayjs-picker@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-dayjs-picker/-/react-dayjs-picker-1.3.0.tgz#9478794cf79661436c98fdd1deb9022b0a61aabb"
+  integrity sha512-2HKdzJND7up18wSru8/Qv79U0U96J5JAM01MvmkI4CPZtYk9iUhidc9iR24UrNGULvfK4kmHMzKrHVncGeMrEA==
 
 react-dev-utils@^11.0.3:
   version "11.0.4"
@@ -10491,7 +10714,7 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -10658,6 +10881,16 @@ react-transition-group@2.9.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-transition-group@^4.0.0, react-transition-group@^4.4.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-virtualized-auto-sizer@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz"
@@ -11104,6 +11337,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
+  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -12211,7 +12451,7 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==