diff --git a/package-lock.json b/package-lock.json
index 34fbb0406..690fbe9f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,12 @@
       "name": "opencast-editor",
       "version": "0.1.0",
       "dependencies": {
-        "@date-io/date-fns": "^2.16.0",
         "@emotion/babel-preset-css-prop": "^11.10.0",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
         "@fontsource-variable/roboto-flex": "^5.0.3",
         "@iarna/toml": "^2.2.5",
         "@mui/material": "^5.13.3",
-        "@mui/x-date-pickers": "^5.0.20",
         "@opencast/appkit": "^0.1.2",
         "@reduxjs/toolkit": "^1.9.5",
         "@testing-library/jest-dom": "^5.16.5",
@@ -2179,6 +2177,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
       "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "peer": true,
       "dependencies": {
         "@date-io/core": "^2.16.0"
       },
@@ -2195,6 +2194,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.0.tgz",
       "integrity": "sha512-wvu/40k128kF6P0jPbiyZcPR14VjJAgYEs+mYtsXz/AyWpC2DEJKly7ub+dpevUywbTzzpZysyCxCdzLzxD/uw==",
+      "peer": true,
       "dependencies": {
         "@date-io/core": "^2.16.0"
       },
@@ -4156,6 +4156,7 @@
       "version": "5.0.20",
       "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.20.tgz",
       "integrity": "sha512-ERukSeHIoNLbI1C2XRhF9wRhqfsr+Q4B1SAw2ZlU7CWgcG8UBOxgqRKDEOVAIoSWL+DWT6GRuQjOKvj6UXZceA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.9",
         "@date-io/core": "^2.15.0",
@@ -4214,6 +4215,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.0.tgz",
       "integrity": "sha512-L8UXHa/9VbfRqP4KB7JUZwFgOVxo22rONVod1o7GMN2Oku4PzJ0k1kXc+nLP9lRlF1UAA28oQsQqn85Y/PdBZw==",
+      "peer": true,
       "dependencies": {
         "@date-io/core": "^2.16.0"
       },
@@ -4230,6 +4232,7 @@
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
       "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peer": true,
       "peerDependencies": {
         "react": ">=16.8"
       }
@@ -21412,6 +21415,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
       "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "peer": true,
       "requires": {
         "@date-io/core": "^2.16.0"
       }
@@ -21420,6 +21424,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.0.tgz",
       "integrity": "sha512-wvu/40k128kF6P0jPbiyZcPR14VjJAgYEs+mYtsXz/AyWpC2DEJKly7ub+dpevUywbTzzpZysyCxCdzLzxD/uw==",
+      "peer": true,
       "requires": {
         "@date-io/core": "^2.16.0"
       }
@@ -22860,6 +22865,7 @@
       "version": "5.0.20",
       "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.20.tgz",
       "integrity": "sha512-ERukSeHIoNLbI1C2XRhF9wRhqfsr+Q4B1SAw2ZlU7CWgcG8UBOxgqRKDEOVAIoSWL+DWT6GRuQjOKvj6UXZceA==",
+      "peer": true,
       "requires": {
         "@babel/runtime": "^7.18.9",
         "@date-io/core": "^2.15.0",
@@ -22879,6 +22885,7 @@
           "version": "2.16.0",
           "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.0.tgz",
           "integrity": "sha512-L8UXHa/9VbfRqP4KB7JUZwFgOVxo22rONVod1o7GMN2Oku4PzJ0k1kXc+nLP9lRlF1UAA28oQsQqn85Y/PdBZw==",
+          "peer": true,
           "requires": {
             "@date-io/core": "^2.16.0"
           }
@@ -22887,6 +22894,7 @@
           "version": "0.12.1",
           "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
           "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+          "peer": true,
           "requires": {}
         }
       }
diff --git a/package.json b/package.json
index 15606efae..386458b4b 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "^2.16.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/roboto-flex": "^5.0.3",
     "@iarna/toml": "^2.2.5",
     "@mui/material": "^5.13.3",
-    "@mui/x-date-pickers": "^5.0.20",
     "@opencast/appkit": "^0.1.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/src/index.tsx b/src/index.tsx
index c3d468d94..fdc9bb989 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,8 +8,6 @@ import store from './redux/store'
 import { init } from './config'
 import { sleep } from './util/utilityFunctions'
 
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { GlobalHotKeys } from 'react-hotkeys';
 
 import "@fontsource-variable/roboto-flex";
@@ -36,12 +34,10 @@ initialize.then(
     ReactDOM.render(
       <React.StrictMode>
         <Provider store={store}>
-          <LocalizationProvider dateAdapter={AdapterDateFns}>
-            {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
-            <GlobalHotKeys>
-              <App />
-            </GlobalHotKeys>
-          </LocalizationProvider>
+          {/* Workaround for getApplicationKeyMap based on https://github.com/greena13/react-hotkeys/issues/228 */}
+          <GlobalHotKeys>
+            <App />
+          </GlobalHotKeys>
         </Provider>
       </React.StrictMode>,
       document.getElementById('root')
diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
index f7fcb83c0..7ae05d587 100644
--- a/src/main/Metadata.tsx
+++ b/src/main/Metadata.tsx
@@ -13,13 +13,6 @@ import { Form, Field, FieldInputProps } from 'react-final-form'
 import Select from 'react-select'
 import CreatableSelect from 'react-select/creatable';
 
-import {
-  DateTimePicker,
-  TimePicker,
-  showErrorOnBlur,
-} from 'mui-rff';
-import DateFnsUtils from "@date-io/date-fns";
-
 import { useTranslation } from 'react-i18next';
 import { DateTime as LuxonDateTime} from "luxon";
 
@@ -28,6 +21,7 @@ import { AppDispatch } from "../redux/store";
 import { selectTheme } from "../redux/themeSlice";
 import { ThemeProvider } from "@mui/material/styles";
 import { TFuncKey } from "i18next";
+import { cloneDeep } from "lodash";
 
 /**
  * Creates a Metadata form
@@ -152,42 +146,6 @@ const Metadata: React.FC = () => {
     );
   }
 
-  const dateTimeTypeStyle = (isReadOnly: boolean) => {
-    return (
-      css({
-        padding: '5px 10px',
-        border: isReadOnly ? '0px solid #ccc' : '1px solid #ccc',
-        background: isReadOnly ? `${theme.background}` : `${theme.element_bg}`,
-        '.Mui-disabled, .Mui-disabled button > svg': {
-          color: `${theme.disabled} !important`,
-          'WebkitTextFillColor': `${theme.disabled}`,
-        },
-        'button > svg': {
-          color: `${theme.indicator_color}`
-        },
-        '.MuiInput-input, button': {
-          color: `${theme.text}`,
-          background: 'transparent !important',
-          '&:hover': {
-            background: 'transparent !important',
-            outline: 'none'
-          },
-        },
-        // Stop the underline from changing
-        '.MuiInput-root': {
-          '&:before, &:after': {
-            transition: 'unset',
-            transform: 'unset',
-            borderBottom: `1px solid ${theme.text}`,
-          },
-          '&:hover:not::before': {
-            borderBottom: `0px solid ${theme.text}`,
-          }
-        }
-      })
-    );
-  }
-
   const validateStyle = (isError: boolean) => {
     return css({
       lineHeight: '32px',
@@ -564,41 +522,38 @@ const Metadata: React.FC = () => {
 
     } else if (field.type === "date") {
       return (
-        <div data-testid="dateTimePicker" css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-          <ThemeProvider theme={calendarStyle(theme)}>
-            <DateTimePicker {...input}
-              name={field.id}
-              inputFormat="yyyy/MM/dd HH:mm"
-              disabled={field.readOnly}
-              dateFunsUtils={DateFnsUtils}
-              TextFieldProps={{
-                variant: 'standard', // Removes default outline
-                onBlur: (e: any) => { blurWithSubmit(e, input) },
-                showError: showErrorOnBlur
-              }}
-              leftArrowButtonText={t('metadata.calendar-prev')}
-              rightArrowButtonText={t('metadata.calendar-next')}
-            />
-          </ThemeProvider>
-        </div>
+        <ThemeProvider theme={calendarStyle(theme)}>
+          <input {...input}
+            type="datetime-local"
+            name={field.id}
+            // inputFormat="yyyy/MM/dd HH:mm"
+            onBlur={e => { blurWithSubmit(e, input) }}
+            readOnly={field.readOnly}
+            css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+              {
+                resize: 'none',
+              }
+            ]}
+            data-testid="dateTimePicker"
+          />
+        </ThemeProvider>
       );
     } else if (field.type === "time") {
       return (
-        <div css={[fieldTypeStyle(field.readOnly), dateTimeTypeStyle(field.readOnly)]}>
-          <ThemeProvider theme={calendarStyle(theme)}>
-            <TimePicker {...input}
-              name={field.id}
-              inputFormat="HH:mm"
-              disabled={field.readOnly}
-              dateFunsUtils={DateFnsUtils}
-              TextFieldProps={{
-                variant: 'standard', // Removes default outline
-                onBlur: (e: any) => { blurWithSubmit(e, input) },
-                showError: showErrorOnBlur
-              }}
-            />
-          </ThemeProvider>
-        </div>
+        <ThemeProvider theme={calendarStyle(theme)}>
+          <input {...input}
+            type="time"
+            name={field.id}
+            // inputFormat="HH:mm"
+            onBlur={e => { blurWithSubmit(e, input) }}
+            readOnly={field.readOnly}
+            css={[fieldTypeStyle(field.readOnly), inputFieldTypeStyle(field.readOnly),
+              {
+                resize: 'none',
+              }
+            ]}
+          />
+        </ThemeProvider>
       );
     } else if (field.type === "text_long") {
       return (
@@ -637,6 +592,18 @@ const Metadata: React.FC = () => {
       if ((field.type === "date" || field.type === "time") && input.value === "") {
         const {value, ...other} = input
         return generateComponent(field, other)
+      }
+      // <input type="datetime-local"> is picky about its value and won't accept
+      // global datetime strings, so we have to convert them to local ourselves.
+      // TODO: Also we really should not be modifying the input element like that
+      // so ideally the conversion happens somewhere else in the code
+      // (see error in the console for further details)
+      if ((field.type === "date" || field.type === "time")) {
+        input = cloneDeep(input)
+        const leDate = new Date(input.value)
+        leDate.setMinutes(leDate.getMinutes() - leDate.getTimezoneOffset());
+        input.value = leDate.toISOString().slice(0, 16);
+        return generateComponent(field, input)
       } else {
         return generateComponent(field, input)
       }