diff --git a/src/actions/__tests__/media-upload-actions.test.js b/src/actions/__tests__/media-upload-actions.test.js
new file mode 100644
index 000000000..bf20ef843
--- /dev/null
+++ b/src/actions/__tests__/media-upload-actions.test.js
@@ -0,0 +1,74 @@
+/**
+ * @jest-environment jsdom
+ */
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import flushPromises from "flush-promises";
+import { getRequest } from "openstack-uicore-foundation/lib/utils/actions";
+import { getMediaUpload } from "../media-upload-actions";
+import * as methods from "../../utils/methods";
+
+jest.mock("openstack-uicore-foundation/lib/utils/actions", () => ({
+  __esModule: true,
+  ...jest.requireActual("openstack-uicore-foundation/lib/utils/actions"),
+  getRequest: jest.fn()
+}));
+
+const requestMock =
+  (requestActionCreator, receiveActionCreator) => () => (dispatch) => {
+    if (typeof receiveActionCreator === "function") {
+      dispatch(receiveActionCreator({ response: { id: 7, name: "Slides" } }));
+    }
+    return Promise.resolve({ response: { id: 7, name: "Slides" } });
+  };
+
+describe("getMediaUpload", () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+
+  beforeEach(() => {
+    jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN");
+    getRequest.mockImplementation(requestMock);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  // Regression test for a bug where the fetch omitted `relations`, so the API
+  // response never included presentation_types. The reducer then defaulted it
+  // to [], the form rendered no chips, and saving wiped every real
+  // association even though nothing about them was touched. See
+  // SummitMediaUploadTypeSerializer::serialize (only emits presentation_types
+  // when the relation is requested) and
+  // SummitMediaUploadTypeService::update() (isset() on an empty array is
+  // still true, so clearPresentationTypes() runs and nothing is re-added).
+  it("requests the presentation_types relation so an existing entity's associations survive a fetch", async () => {
+    let capturedParams;
+    getRequest.mockImplementation((req, res) => (params) => (dispatch) => {
+      capturedParams = params;
+      return requestMock(req, res)(params)(dispatch);
+    });
+
+    const store = mockStore({
+      currentSummitState: { currentSummit: { id: 42 } }
+    });
+
+    await store.dispatch(getMediaUpload(7));
+    await flushPromises();
+
+    expect(capturedParams).toMatchObject({ relations: "presentation_types" });
+  });
+
+  it("dispatches RECEIVE_MEDIA_UPLOAD with the fetched entity", async () => {
+    const store = mockStore({
+      currentSummitState: { currentSummit: { id: 42 } }
+    });
+
+    store.dispatch(getMediaUpload(7));
+    await flushPromises();
+
+    const actionTypes = store.getActions().map((a) => a.type);
+    expect(actionTypes).toContain("RECEIVE_MEDIA_UPLOAD");
+  });
+});
diff --git a/src/actions/media-upload-actions.js b/src/actions/media-upload-actions.js
index 648398b3b..1695a2652 100644
--- a/src/actions/media-upload-actions.js
+++ b/src/actions/media-upload-actions.js
@@ -20,15 +20,13 @@ import {
   createAction,
   stopLoading,
   startLoading,
-  showMessage,
-  showSuccessMessage,
-  authErrorHandler,
+  snackbarErrorHandler,
+  snackbarSuccessHandler,
   escapeFilterValue,
   fetchResponseHandler,
   fetchErrorHandler
 } from "openstack-uicore-foundation/lib/utils/actions";
-import debounce from "lodash/debounce"
-import history from "../history";
+import debounce from "lodash/debounce";
 import { getAccessTokenSafely } from "../utils/methods";
 import { DEBOUNCE_WAIT, DEFAULT_PER_PAGE } from "../utils/constants";
 
@@ -66,8 +64,9 @@ export const getMediaUploads =
       access_token: accessToken,
       page,
       per_page: perPage,
-      fields: "id,name,description",
-      relations: "none"
+      expand: "type",
+      fields: "id,name,description,type.is_system_defined",
+      relations: "none,presentation_types"
     };
 
     if (term) {
@@ -89,9 +88,9 @@ export const getMediaUploads =
       createAction(REQUEST_MEDIA_UPLOADS),
       createAction(RECEIVE_MEDIA_UPLOADS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types`,
-      authErrorHandler,
-      { order, orderDir, term }
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler,
+      { order, orderDir, term, perPage }
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -104,101 +103,97 @@ export const getMediaUpload = (mediaUploadId) => async (dispatch, getState) => {
   dispatch(startLoading());
 
   const params = {
-    access_token: accessToken
+    access_token: accessToken,
+    relations: "presentation_types"
   };
 
   return getRequest(
     null,
     createAction(RECEIVE_MEDIA_UPLOAD),
     `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${mediaUploadId}`,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
+    snackbarErrorHandler
+  )(params)(dispatch).finally(() => {
     dispatch(stopLoading());
   });
 };
 
-export const queryMediaUploads = debounce(
-  async (summitId, input, callback) => {
-    const accessToken = await getAccessTokenSafely();
-    const apiUrl = URI(
-      `${window.API_BASE_URL}/api/v1/summits/${summitId}/media-upload-types`
-    );
-
-    apiUrl.addQuery("access_token", accessToken);
-    apiUrl.addQuery("order", "name");
-    apiUrl.addQuery("expand", "type");
-    apiUrl.addQuery("per_page", DEFAULT_PER_PAGE);
-
-    if (input) {
-      input = escapeFilterValue(input);
-      apiUrl.addQuery("filter[]", `name=@${input}`);
-    }
+export const queryMediaUploads = debounce(async (summitId, input, callback) => {
+  const accessToken = await getAccessTokenSafely();
+  const apiUrl = URI(
+    `${window.API_BASE_URL}/api/v1/summits/${summitId}/media-upload-types`
+  );
+
+  apiUrl.addQuery("access_token", accessToken);
+  apiUrl.addQuery("order", "name");
+  apiUrl.addQuery("expand", "type");
+  apiUrl.addQuery("per_page", DEFAULT_PER_PAGE);
+
+  if (input) {
+    input = escapeFilterValue(input);
+    apiUrl.addQuery("filter[]", `name=@${input}`);
+  }
 
-    fetch(apiUrl.toString())
-      .then(fetchResponseHandler)
-      .then((json) => {
-        const options = [...json.data];
-        callback(options);
-      })
-      .catch(fetchErrorHandler);
-  },
-  DEBOUNCE_WAIT
-);
+  fetch(apiUrl.toString())
+    .then(fetchResponseHandler)
+    .then((json) => {
+      const options = [...json.data];
+      callback(options);
+    })
+    .catch(fetchErrorHandler);
+}, DEBOUNCE_WAIT);
 
 export const resetMediaUploadForm = () => (dispatch) => {
   dispatch(createAction(RESET_MEDIA_UPLOAD_FORM)({}));
 };
 
-export const saveMediaUpload =
-  (entity, noAlert = false) =>
-  async (dispatch, getState) => {
-    const { currentSummitState } = getState();
-    const accessToken = await getAccessTokenSafely();
-    const { currentSummit } = currentSummitState;
+export const saveMediaUpload = (entity) => async (dispatch, getState) => {
+  const { currentSummitState } = getState();
+  const accessToken = await getAccessTokenSafely();
+  const { currentSummit } = currentSummitState;
 
-    dispatch(startLoading());
+  dispatch(startLoading());
 
-    const normalizedEntity = normalizeEntity(entity);
-    const params = { access_token: accessToken };
+  const normalizedEntity = normalizeEntity(entity);
+  const params = { access_token: accessToken };
 
-    if (entity.id) {
-      putRequest(
-        createAction(UPDATE_MEDIA_UPLOAD),
-        createAction(MEDIA_UPLOAD_UPDATED),
-        `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${entity.id}`,
-        normalizedEntity,
-        authErrorHandler,
-        entity
-      )(params)(dispatch).then(() => {
-        if (!noAlert)
-          dispatch(showSuccessMessage(T.translate("media_upload.saved")));
-        else dispatch(stopLoading());
-      });
-    } else {
-      const successMessage = {
-        title: T.translate("general.done"),
-        html: T.translate("media_upload.created"),
-        type: "success"
-      };
-
-      postRequest(
-        createAction(UPDATE_MEDIA_UPLOAD),
-        createAction(MEDIA_UPLOAD_ADDED),
-        `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types`,
-        normalizedEntity,
-        authErrorHandler,
-        entity
-      )(params)(dispatch).then((payload) => {
+  if (entity.id) {
+    return putRequest(
+      createAction(UPDATE_MEDIA_UPLOAD),
+      createAction(MEDIA_UPLOAD_UPDATED),
+      `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${entity.id}`,
+      normalizedEntity,
+      snackbarErrorHandler,
+      entity
+    )(params)(dispatch)
+      .then(() => {
         dispatch(
-          showMessage(successMessage, () => {
-            history.push(
-              `/app/summits/${currentSummit.id}/media-uploads/${payload.response.id}`
-            );
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("media_upload.saved")
           })
         );
-      });
-    }
-  };
+      })
+      .finally(() => dispatch(stopLoading()));
+  }
+
+  return postRequest(
+    createAction(UPDATE_MEDIA_UPLOAD),
+    createAction(MEDIA_UPLOAD_ADDED),
+    `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types`,
+    normalizedEntity,
+    snackbarErrorHandler,
+    entity
+  )(params)(dispatch)
+    .then(() => {
+      dispatch(
+        snackbarSuccessHandler({
+          title: T.translate("general.success"),
+          html: T.translate("media_upload.created")
+        })
+      );
+    })
+    .finally(() => dispatch(stopLoading()));
+};
 
 export const linkToPresentationType =
   (mediaUpload, presentationTypeId) => async (dispatch, getState) => {
@@ -215,8 +210,8 @@ export const linkToPresentationType =
       createAction(MEDIA_UPLOAD_LINKED)({ mediaUpload }),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${mediaUpload.id}/presentation-types/${presentationTypeId}`,
       null,
-      authErrorHandler
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -236,8 +231,8 @@ export const unlinkFromPresentationType =
       createAction(MEDIA_UPLOAD_UNLINKED)({ mediaUploadId }),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${mediaUploadId}/presentation-types/${presentationTypeId}`,
       null,
-      authErrorHandler
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -257,10 +252,8 @@ export const deleteMediaUpload =
       createAction(MEDIA_UPLOAD_DELETED)({ mediaUploadId }),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/media-upload-types/${mediaUploadId}`,
       null,
-      authErrorHandler
-    )(params)(dispatch).then(() => {
-      dispatch(stopLoading());
-    });
+      snackbarErrorHandler
+    )(params)(dispatch);
   };
 
 export const copyMediaUploads = (summitId) => async (dispatch, getState) => {
@@ -272,16 +265,23 @@ export const copyMediaUploads = (summitId) => async (dispatch, getState) => {
 
   const params = { access_token: accessToken };
 
-  postRequest(
+  return postRequest(
     null,
     createAction(MEDIA_UPLOADS_COPIED),
     `${window.API_BASE_URL}/api/v1/summits/${summitId}/media-upload-types/all/clone/${currentSummit.id}`,
     null,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-    dispatch(getMediaUploads());
-  });
+    snackbarErrorHandler
+  )(params)(dispatch)
+    .then(() => {
+      dispatch(
+        snackbarSuccessHandler({
+          title: T.translate("general.success"),
+          html: T.translate("media_upload.media_uploads_copied")
+        })
+      );
+      dispatch(getMediaUploads());
+    })
+    .finally(() => dispatch(stopLoading()));
 };
 
 const normalizeEntity = (entity) => {
diff --git a/src/components/forms/__tests__/media-upload-form.test.js b/src/components/forms/__tests__/media-upload-form.test.js
new file mode 100644
index 000000000..8e3e02337
--- /dev/null
+++ b/src/components/forms/__tests__/media-upload-form.test.js
@@ -0,0 +1,292 @@
+import React from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+  fireEvent
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import MediaUploadForm from "../media-upload-form";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  translate: jest.fn((key) => key)
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield",
+  () =>
+    function MockTextField({ name }) {
+      // eslint-disable-next-line global-require
+      const { useField } = require("formik");
+      const [field, meta] = useField(name);
+      return (
+        <>
+          <input
+            data-testid={`textfield-${name}`}
+            name={name}
+            value={field.value ?? ""}
+            onChange={field.onChange}
+          />
+          {meta.touched && meta.error && <span>{meta.error}</span>}
+        </>
+      );
+    }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/file-size-field",
+  () =>
+    function MockFilesizeField({ name }) {
+      // eslint-disable-next-line global-require
+      const { useField } = require("formik");
+      const [field, meta] = useField(name);
+      return (
+        <>
+          <input
+            data-testid={`filesize-${name}`}
+            name={name}
+            value={field.value ?? ""}
+            onChange={field.onChange}
+          />
+          {meta.touched && meta.error && <span>{meta.error}</span>}
+        </>
+      );
+    }
+);
+
+jest.mock(
+  "../../mui/formik-inputs/mui-formik-select",
+  () =>
+    function MockSelect({ name, children }) {
+      return <div data-testid={`select-${name}`}>{children}</div>;
+    }
+);
+
+jest.mock(
+  "../../inputs/formik-text-editor",
+  () =>
+    function MockTextEditor({ name }) {
+      return <textarea data-testid={`editor-${name}`} name={name} />;
+    }
+);
+
+jest.mock("../../../hooks/useScrollToError", () => jest.fn());
+
+const BASE_ENTITY = {
+  id: 0,
+  name: "",
+  description: "",
+  type_id: 0,
+  max_size: 0,
+  min_uploads_qty: 0,
+  max_uploads_qty: 0,
+  is_mandatory: false,
+  is_editable: true,
+  private_storage_type: "None",
+  public_storage_type: "None",
+  presentation_types: [],
+  use_temporary_links_on_public_storage: false,
+  temporary_links_public_storage_ttl: 0
+};
+
+const CURRENT_SUMMIT = {
+  id: 42,
+  event_types: [
+    { id: 1, name: "Talk", class_name: "PresentationType" },
+    { id: 2, name: "Panel", class_name: "PresentationType" },
+    { id: 3, name: "Keynote", class_name: "SummitEventType" }
+  ]
+};
+
+describe("MediaUploadForm", () => {
+  let onSubmit;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.PUBLIC_STORAGES = [];
+    onSubmit = jest.fn(() => Promise.resolve());
+  });
+
+  afterEach(() => {
+    delete window.PUBLIC_STORAGES;
+  });
+
+  const renderForm = (entity = BASE_ENTITY, errors = {}, mediaFileTypes = []) =>
+    render(
+      <MediaUploadForm
+        currentSummit={CURRENT_SUMMIT}
+        entity={entity}
+        errors={errors}
+        mediaFileTypes={mediaFileTypes}
+        onSubmit={onSubmit}
+      />
+    );
+
+  it("renders the name and max_size fields by default", () => {
+    renderForm();
+
+    expect(screen.getByTestId("textfield-name")).toBeInTheDocument();
+    expect(screen.getByTestId("filesize-max_size")).toBeInTheDocument();
+  });
+
+  it("only shows the TTL field once use_temporary_links_on_public_storage is checked", async () => {
+    const user = userEvent.setup();
+    renderForm();
+
+    expect(
+      screen.queryByTestId("textfield-temporary_links_public_storage_ttl")
+    ).not.toBeInTheDocument();
+
+    await act(async () => {
+      await user.click(
+        screen.getByRole("checkbox", {
+          name: "media_upload.use_temporary_links_on_public_storage"
+        })
+      );
+    });
+
+    expect(
+      screen.getByTestId("textfield-temporary_links_public_storage_ttl")
+    ).toBeInTheDocument();
+  });
+
+  it("disables the save button while saving and re-enables after resolve", async () => {
+    let resolveSave;
+    onSubmit = jest.fn(
+      () =>
+        new Promise((res) => {
+          resolveSave = res;
+        })
+    );
+    const user = userEvent.setup();
+    renderForm({ ...BASE_ENTITY, name: "Slides", max_size: 1024 });
+
+    const saveButton = screen.getByText("general.save").closest("button");
+    expect(saveButton).not.toBeDisabled();
+
+    await act(async () => {
+      await user.click(saveButton);
+    });
+
+    expect(saveButton).toBeDisabled();
+
+    await act(async () => {
+      resolveSave();
+    });
+
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+  });
+
+  it("re-enables save when onSubmit rejects", async () => {
+    onSubmit = jest.fn(() => Promise.reject(new Error("server error")));
+    const user = userEvent.setup();
+    renderForm({ ...BASE_ENTITY, name: "Slides", max_size: 1024 });
+
+    const saveButton = screen.getByText("general.save").closest("button");
+
+    await act(async () => {
+      await user.click(saveButton);
+    });
+
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+  });
+
+  describe("Yup validation", () => {
+    it("blocks submit and shows a required error when name is empty", async () => {
+      const user = userEvent.setup();
+      renderForm({ ...BASE_ENTITY, name: "", max_size: 1024 });
+
+      await act(async () => {
+        await user.click(screen.getByText("general.save").closest("button"));
+      });
+
+      expect(
+        screen.getByTestId("textfield-name").nextSibling
+      ).toHaveTextContent("validation.required");
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it("blocks submit and shows a required error when max_size is cleared to empty", async () => {
+      const user = userEvent.setup();
+      renderForm({ ...BASE_ENTITY, name: "Slides", max_size: 1024 });
+
+      const maxSizeInput = screen.getByTestId("filesize-max_size");
+      await act(async () => {
+        await user.clear(maxSizeInput);
+        await user.click(screen.getByText("general.save").closest("button"));
+      });
+
+      expect(
+        screen.getByTestId("filesize-max_size").nextSibling
+      ).toHaveTextContent("validation.required");
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  it("renders an inline error for a field when the errors prop is populated", () => {
+    renderForm(
+      { ...BASE_ENTITY, name: "Slides", max_size: 1024 },
+      { name: "Name already in use" }
+    );
+
+    expect(screen.getByText("Name already in use")).toBeInTheDocument();
+  });
+
+  it("clears a stale server-side error once the user edits the field", async () => {
+    renderForm(
+      { ...BASE_ENTITY, name: "Slides", max_size: 1024 },
+      { name: "Name already in use" }
+    );
+
+    expect(screen.getByText("Name already in use")).toBeInTheDocument();
+
+    const nameInput = screen.getByTestId("textfield-name");
+    fireEvent.change(nameInput, { target: { value: "New Slides" } });
+
+    await waitFor(() =>
+      expect(screen.queryByText("Name already in use")).not.toBeInTheDocument()
+    );
+  });
+
+  describe("presentation_types", () => {
+    it("shows pre-selected presentation types as chips when editing an existing entity", () => {
+      renderForm({
+        ...BASE_ENTITY,
+        id: 7,
+        name: "Slides",
+        max_size: 1024,
+        presentation_types: [1, 2]
+      });
+
+      expect(screen.getByText("Talk")).toBeInTheDocument();
+      expect(screen.getByText("Panel")).toBeInTheDocument();
+      expect(screen.queryByText("Keynote")).not.toBeInTheDocument();
+    });
+
+    it("adds the selected presentation type id and submits it on save", async () => {
+      const user = userEvent.setup();
+      renderForm({ ...BASE_ENTITY, name: "Slides", max_size: 1024 });
+
+      const combobox = screen.getByRole("combobox", {
+        name: "media_upload.presentation_types"
+      });
+
+      await act(async () => {
+        await user.click(combobox);
+      });
+
+      await act(async () => {
+        await user.click(screen.getByText("Talk"));
+      });
+
+      await act(async () => {
+        await user.click(screen.getByText("general.save").closest("button"));
+      });
+
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({ presentation_types: [1] })
+      );
+    });
+  });
+});
diff --git a/src/components/forms/media-upload-form.js b/src/components/forms/media-upload-form.js
index f73670a6c..8c8f725e2 100644
--- a/src/components/forms/media-upload-form.js
+++ b/src/components/forms/media-upload-form.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2019 OpenStack Foundation
+ * Copyright 2026 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -11,302 +11,351 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
-import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
+import { FormikProvider, useFormik } from "formik";
+import * as yup from "yup";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import Grid2 from "@mui/material/Grid2";
+import InputAdornment from "@mui/material/InputAdornment";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
+import MuiFormikFilesizeField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/file-size-field";
+import useScrollToError from "../../hooks/useScrollToError";
+import MuiFormikSelect from "../mui/formik-inputs/mui-formik-select";
+import FormikTextEditor from "../inputs/formik-text-editor";
+import { positiveNumberValidation } from "../../utils/yup";
 
-class MediaUploadForm extends React.Component {
-  constructor(props) {
-    super(props);
+const NUMERIC_FIELDS = [
+  "max_size",
+  "min_uploads_qty",
+  "max_uploads_qty",
+  "temporary_links_public_storage_ttl"
+];
 
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors
-    };
+const PRIVATE_STORAGE_DDL = [
+  { value: "None", label: "None" },
+  { value: "DropBox", label: "DropBox" },
+  { value: "Local", label: "Local" }
+];
 
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+const MediaUploadForm = ({
+  currentSummit,
+  entity,
+  errors,
+  mediaFileTypes,
+  onSubmit
+}) => {
+  const [isSaving, setIsSaving] = useState(false);
 
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
+  const publicStorageDdl = [
+    { value: "None", label: "None" },
+    { value: "Local", label: "Local" }
+  ];
 
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
-
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
-
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  if (window.PUBLIC_STORAGES.includes("S3"))
+    publicStorageDdl.push({ value: "S3", label: "S3" });
 
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
-    let { value, id } = ev.target;
+  if (window.PUBLIC_STORAGES.includes("SWIFT"))
+    publicStorageDdl.push({ value: "Swift", label: "Swift" });
 
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity, errors });
-  }
-
-  handleSubmit(ev) {
-    ev.preventDefault();
+  const presentationTypeOptions = currentSummit.event_types
+    .filter((t) => t.class_name === "PresentationType")
+    .map((t) => ({ id: t.id, name: t.name }));
 
-    this.props.onSubmit(this.state.entity);
-  }
-
-  hasErrors(field) {
-    const { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
-    }
+  const mediaFileTypesDdl = mediaFileTypes.map((mft) => ({
+    value: mft.id,
+    label: mft.name
+  }));
 
-    return "";
-  }
+  const handleSubmit = (values) => {
+    if (isSaving) return Promise.resolve();
+    const normalizedValues = { ...values };
+    NUMERIC_FIELDS.forEach((field) => {
+      const parsed = parseInt(values[field], 10);
+      // A cleared/non-numeric field must never serialize as NaN.
+      normalizedValues[field] = Number.isNaN(parsed) ? 0 : parsed;
+    });
 
-  render() {
-    const { entity } = this.state;
-    const { currentSummit, mediaFileTypes } = this.props;
-
-    const private_storage_ddl = [
-      { value: "None", label: "None" },
-      { value: "DropBox", label: "DropBox" },
-      { value: "Local", label: "Local" }
-    ];
+    setIsSaving(true);
+    return Promise.resolve(onSubmit(normalizedValues)).finally(() =>
+      setIsSaving(false)
+    );
+  };
 
-    const public_storage_ddl = [
-      { value: "None", label: "None" },
-      { value: "Local", label: "Local" }
-    ];
+  const formik = useFormik({
+    initialValues: entity,
+    enableReinitialize: true,
+    validationSchema: yup.object().shape({
+      name: yup.string().required(T.translate("validation.required")),
+      max_size: positiveNumberValidation()
+        .moreThan(0, T.translate("validation.positive"))
+        .required(T.translate("validation.required")),
+      min_uploads_qty: positiveNumberValidation(),
+      max_uploads_qty: positiveNumberValidation(),
+      temporary_links_public_storage_ttl: positiveNumberValidation().when(
+        "use_temporary_links_on_public_storage",
+        {
+          is: true,
+          then: (schema) =>
+            schema
+              .moreThan(0, T.translate("validation.positive"))
+              .required(T.translate("validation.required")),
+          otherwise: (schema) => schema
+        }
+      )
+    }),
+    onSubmit: handleSubmit
+  });
 
-    if (window.PUBLIC_STORAGES.includes("S3"))
-      public_storage_ddl.push({ value: "S3", label: "S3" });
+  const { values, setFieldValue } = formik;
 
-    if (window.PUBLIC_STORAGES.includes("SWIFT"))
-      public_storage_ddl.push({ value: "Swift", label: "Swift" });
+  useScrollToError(formik, true);
 
-    const presentation_types_ddl = currentSummit.event_types
-      .filter((t) => t.class_name === "PresentationType")
-      .map((t) => ({ value: t.id, label: t.name }));
+  useEffect(() => {
+    const errorFields = Object.keys(errors || {});
+    formik.setErrors(errorFields.length > 0 ? errors : {});
+    if (errorFields.length > 0) {
+      formik.setTouched(
+        errorFields.reduce((acc, field) => ({ ...acc, [field]: true }), {})
+      );
+    }
+  }, [errors]);
 
-    const mediaFileTypesDDL = mediaFileTypes.map((mft) => ({
-      value: mft.id,
-      label: mft.name
-    }));
+  return (
+    <FormikProvider value={formik}>
+      <Box
+        id="media-upload-form"
+        component="form"
+        onSubmit={formik.handleSubmit}
+      >
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12}>
+            <InputLabel htmlFor="name">
+              {T.translate("media_upload.name")} *
+            </InputLabel>
+            <MuiFormikTextField name="name" margin="none" fullWidth />
+          </Grid2>
+        </Grid2>
 
-    return (
-      <form className="media-upload-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("media_upload.name")} *</label>
-            <Input
-              id="name"
-              className="form-control"
-              error={this.hasErrors("name")}
-              onChange={this.handleChange}
-              value={entity.name}
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="max_size">
+              {T.translate("media_upload.max_size")} *
+            </InputLabel>
+            <MuiFormikFilesizeField
+              name="max_size"
+              valueUnit="KB"
+              displayUnit="KB"
+              margin="none"
+              fullWidth
             />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("media_upload.max_size")} *</label>
-            <Input
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="min_uploads_qty">
+              {T.translate("media_upload.min_qty")}
+            </InputLabel>
+            <MuiFormikTextField
+              name="min_uploads_qty"
               type="number"
-              id="max_size"
-              className="form-control"
-              error={this.hasErrors("max_size")}
-              onChange={this.handleChange}
-              value={entity.max_size}
+              margin="none"
+              fullWidth
             />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("media_upload.min_qty")} *</label>
-            <Input
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel
+              htmlFor="max_uploads_qty"
+              title={T.translate("media_upload.max_qty_hint")}
+            >
+              {T.translate("media_upload.max_qty")}
+            </InputLabel>
+            <MuiFormikTextField
+              name="max_uploads_qty"
               type="number"
-              id="min_uploads_qty"
-              min="0"
-              className="form-control"
-              error={this.hasErrors("min_uploads_qty")}
-              onChange={this.handleChange}
-              value={entity.min_uploads_qty}
+              margin="none"
+              fullWidth
             />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {T.translate("media_upload.max_qty")}{" "}
-              <i
-                className="fa fa-info-circle"
-                aria-hidden="true"
-                title={T.translate("media_upload.max_qty_hint")}
-              />
-            </label>
-            <Input
-              type="number"
-              id="max_uploads_qty"
-              min="0"
-              className="form-control"
-              error={this.hasErrors("max_uploads_qty")}
-              onChange={this.handleChange}
-              value={entity.max_uploads_qty}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-8">
-            <label> {T.translate("media_upload.description")}</label>
-            <TextEditorV3
-              id="description"
-              value={entity.description}
-              onChange={this.handleChange}
-              error={this.hasErrors("description")}
-              maxLength={5120}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4 text-left">
-            <label> {T.translate("media_upload.type")}</label>
-            <Dropdown
-              id="type_id"
-              className="right-space"
-              value={entity.type_id}
+          </Grid2>
+        </Grid2>
+
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12}>
+            <InputLabel htmlFor="description">
+              {T.translate("media_upload.description")}
+            </InputLabel>
+            <FormikTextEditor name="description" maxLength={5120} />
+          </Grid2>
+        </Grid2>
+
+        <Divider sx={{ mb: 2 }} />
+
+        <Grid2 container spacing={2} sx={{ mb: 2, alignItems: "center" }}>
+          <Grid2 size={{ xs: 12, md: 6 }}>
+            <InputLabel htmlFor="type_id">
+              {T.translate("media_upload.type")}
+            </InputLabel>
+            <MuiFormikSelect
+              name="type_id"
               placeholder={T.translate("media_upload.placeholders.select_type")}
-              options={mediaFileTypesDDL}
-              onChange={this.handleChange}
+            >
+              {mediaFileTypesDdl.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </MuiFormikSelect>
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 6 }} sx={{ mt: "8px" }}>
+            <MuiFormikCheckbox
+              name="is_editable"
+              label={T.translate("media_upload.is_editable")}
             />
-          </div>
-          <div className="col-md-4 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="is_editable"
-                checked={entity.is_editable}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="is_editable">
-                {T.translate("media_upload.is_editable")}
-              </label>
-            </div>
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-3">
-            <label> {T.translate("media_upload.private_storage_type")}</label>
-            <Dropdown
-              id="private_storage_type"
-              className="right-space"
-              value={entity.private_storage_type}
+          </Grid2>
+        </Grid2>
+
+        <Divider sx={{ mb: 2 }} />
+
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="private_storage_type">
+              {T.translate("media_upload.private_storage_type")}
+            </InputLabel>
+            <MuiFormikSelect
+              name="private_storage_type"
               placeholder={T.translate(
                 "media_upload.placeholders.select_private_storage"
               )}
-              options={private_storage_ddl}
-              onChange={this.handleChange}
-            />
-          </div>
-          <div className="col-md-3">
-            <label> {T.translate("media_upload.public_storage_type")}</label>
-            <Dropdown
-              id="public_storage_type"
-              className="right-space"
-              value={entity.public_storage_type}
+            >
+              {PRIVATE_STORAGE_DDL.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </MuiFormikSelect>
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="public_storage_type">
+              {T.translate("media_upload.public_storage_type")}
+            </InputLabel>
+            <MuiFormikSelect
+              name="public_storage_type"
               placeholder={T.translate(
                 "media_upload.placeholders.select_public_storage"
               )}
-              options={public_storage_ddl}
-              onChange={this.handleChange}
+            >
+              {publicStorageDdl.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </MuiFormikSelect>
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }} sx={{ mt: "8px" }}>
+            <MuiFormikCheckbox
+              name="use_temporary_links_on_public_storage"
+              label={T.translate(
+                "media_upload.use_temporary_links_on_public_storage"
+              )}
             />
-          </div>
-          <div className="col-md-3 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="use_temporary_links_on_public_storage"
-                checked={entity.use_temporary_links_on_public_storage}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label
-                className="form-check-label"
-                htmlFor="use_temporary_links_on_public_storage"
-              >
+          </Grid2>
+        </Grid2>
+
+        {values.use_temporary_links_on_public_storage && (
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 4 }}>
+              <InputLabel htmlFor="temporary_links_public_storage_ttl">
                 {T.translate(
-                  "media_upload.use_temporary_links_on_public_storage"
+                  "media_upload.temporary_links_public_storage_ttl_info"
                 )}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-3">
-            <label>
-              {" "}
-              {T.translate(
-                "media_upload.temporary_links_public_storage_ttl_info"
-              )}
-            </label>
-            <div style={{ display: "inline-block" }}>
-              <Input
+              </InputLabel>
+              <MuiFormikTextField
+                name="temporary_links_public_storage_ttl"
                 type="number"
-                id="temporary_links_public_storage_ttl"
-                className="form-control"
-                style={{ width: "100px" }}
-                error={this.hasErrors("temporary_links_public_storage_ttl")}
-                onChange={this.handleChange}
-                placeholder={T.translate(
-                  "media_upload.placeholders.temporary_links_public_storage_ttl"
-                )}
-                value={entity.temporary_links_public_storage_ttl}
+                margin="none"
+                fullWidth
+                slotProps={{
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        {T.translate("media_upload.minutes")}
+                      </InputAdornment>
+                    )
+                  }
+                }}
               />
-            </div>
-            &nbsp;minutes
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-8 text-left">
-            <label> {T.translate("media_upload.presentation_types")}</label>
-            <Dropdown
-              id="presentation_types"
-              className="right-space"
-              value={entity.presentation_types}
-              placeholder={T.translate(
-                "media_upload.placeholders.select_presentation_types"
+            </Grid2>
+          </Grid2>
+        )}
+
+        <Divider sx={{ mb: 2 }} />
+
+        <Grid2 container spacing={2}>
+          <Grid2 size={12}>
+            <Autocomplete
+              multiple
+              size="small"
+              options={presentationTypeOptions}
+              value={presentationTypeOptions.filter((opt) =>
+                values.presentation_types.includes(opt.id)
+              )}
+              getOptionLabel={(opt) => opt.name ?? ""}
+              isOptionEqualToValue={(opt, val) => opt.id === val.id}
+              onChange={(_, selected) =>
+                setFieldValue(
+                  "presentation_types",
+                  selected.map((opt) => opt.id)
+                )
+              }
+              renderInput={(params) => (
+                <TextField
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...params}
+                  label={T.translate("media_upload.presentation_types")}
+                />
               )}
-              options={presentation_types_ddl}
-              onChange={this.handleChange}
-              isMulti
-            />
-          </div>
-        </div>
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
             />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
+          </Grid2>
+        </Grid2>
+
+        <Divider sx={{ my: 3 }} />
+        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Button
+            type="submit"
+            form="media-upload-form"
+            variant="contained"
+            disabled={isSaving}
+          >
+            {T.translate("general.save")}
+          </Button>
+        </Box>
+      </Box>
+    </FormikProvider>
+  );
+};
+
+MediaUploadForm.propTypes = {
+  currentSummit: PropTypes.shape({
+    event_types: PropTypes.arrayOf(PropTypes.shape({}))
+  }).isRequired,
+  entity: PropTypes.shape({
+    id: PropTypes.number,
+    presentation_types: PropTypes.arrayOf(PropTypes.number)
+  }).isRequired,
+  errors: PropTypes.shape({}),
+  mediaFileTypes: PropTypes.arrayOf(PropTypes.shape({})),
+  onSubmit: PropTypes.func.isRequired
+};
+
+MediaUploadForm.defaultProps = {
+  errors: {},
+  mediaFileTypes: []
+};
 
 export default MediaUploadForm;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 90d959ede..fc151a219 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -3503,18 +3503,19 @@
     "private_storage_type": "Private Storage Type",
     "presentation_types": "Presentation Types",
     "copy_media_uploads": "Copy Media Uploads",
+    "media_uploads_copied": "Media Upload Types copied successfully.",
     "delete_warning": "Are you sure you want to delete media media type ",
     "saved": "Media Upload Type saved successfully.",
     "created": "Media Upload Type created successfully.",
     "temporary_links_on_public_storage": "Temporary Links",
     "use_temporary_links_on_public_storage": "Use Temporary Links",
     "temporary_links_public_storage_ttl_info": "Temporary Link Time To Live (TTL)",
+    "minutes": "minutes",
     "placeholders": {
       "search": "Search types by name",
       "select_type": "Select File Type",
       "select_private_storage": "Select Public Storage",
       "select_public_storage": "Select Private Storage",
-      "select_presentation_types": "Select Presentation Types",
       "temporary_links_public_storage_ttl": "TTL"
     }
   },
diff --git a/src/layouts/media-upload-layout.js b/src/layouts/media-upload-layout.js
index c028a1dc7..910823ca7 100644
--- a/src/layouts/media-upload-layout.js
+++ b/src/layouts/media-upload-layout.js
@@ -9,53 +9,47 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import PropTypes from "prop-types";
+import { Switch, Route, withRouter } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
-import { connect } from "react-redux";
 import { Breadcrumb } from "react-breadcrumbs";
 import Restrict from "../routes/restrict";
+
 import MediaUploadListPage from "../pages/media_uploads/media-upload-list-page";
 import EditMediaUploadPage from "../pages/media_uploads/edit-media-upload-page";
 import NoMatchPage from "../pages/no-match-page";
 
-class MediaUploadLayout extends React.Component {
-  render() {
-    const { match } = this.props;
+const MediaUploadLayout = ({ match }) => (
+  <div>
+    <Breadcrumb
+      data={{
+        title: T.translate("media_upload.media_uploads"),
+        pathname: match.url
+      }}
+    />
 
-    return (
-      <div>
-        <Breadcrumb
-          data={{
-            title: T.translate("media_upload.media_uploads"),
-            pathname: match.url
-          }}
-        />
+    <Switch>
+      <Route exact strict path={match.url} component={MediaUploadListPage} />
+      <Route
+        strict
+        exact
+        path={`${match.url}/new`}
+        component={EditMediaUploadPage}
+      />
+      <Route
+        path={`${match.url}/:media_upload_id(\\d+)`}
+        component={EditMediaUploadPage}
+      />
+      <Route component={NoMatchPage} />
+    </Switch>
+  </div>
+);
 
-        <Switch>
-          <Route
-            exact
-            strict
-            path={match.url}
-            component={MediaUploadListPage}
-          />
-          <Route
-            strict
-            exact
-            path={`${match.url}/new`}
-            component={EditMediaUploadPage}
-          />
-          <Route
-            path={`${match.url}/:media_upload_id(\\d+)`}
-            component={EditMediaUploadPage}
-          />
-          <Route component={NoMatchPage} />
-        </Switch>
-      </div>
-    );
-  }
-}
+MediaUploadLayout.propTypes = {
+  match: PropTypes.shape({ url: PropTypes.string }).isRequired
+};
 
-export default Restrict(connect(null, {})(MediaUploadLayout), "events");
+export default Restrict(withRouter(MediaUploadLayout), "events");
diff --git a/src/pages/media_uploads/__tests__/media-upload-list-page.test.js b/src/pages/media_uploads/__tests__/media-upload-list-page.test.js
new file mode 100644
index 000000000..212586bb2
--- /dev/null
+++ b/src/pages/media_uploads/__tests__/media-upload-list-page.test.js
@@ -0,0 +1,172 @@
+import React from "react";
+import { act, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import flushPromises from "flush-promises";
+import { renderWithRedux } from "../../../utils/test-utils";
+import MediaUploadListPage from "../media-upload-list-page";
+import {
+  getMediaUploads,
+  deleteMediaUpload,
+  copyMediaUploads
+} from "../../../actions/media-upload-actions";
+
+jest.mock("../../../actions/media-upload-actions", () => ({
+  getMediaUploads: jest.fn(),
+  deleteMediaUpload: jest.fn(),
+  copyMediaUploads: jest.fn()
+}));
+
+jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
+  __esModule: true,
+  default: ({ onEdit, onDelete, onSort, onPageChange, onPerPageChange }) => (
+    <div data-testid="mui-table">
+      <button type="button" onClick={() => onEdit({ id: 7 })}>
+        edit-row
+      </button>
+      <button type="button" onClick={() => onDelete(7)}>
+        delete-row
+      </button>
+      <button type="button" onClick={() => onSort("name", 0)}>
+        sort-name
+      </button>
+      <button type="button" onClick={() => onPageChange(2)}>
+        page-2
+      </button>
+      <button type="button" onClick={() => onPerPageChange(20)}>
+        per-page-20
+      </button>
+    </div>
+  )
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => ({
+    __esModule: true,
+    default: ({ onSearch }) => (
+      <button type="button" onClick={() => onSearch("foo")}>
+        search-foo
+      </button>
+    )
+  })
+);
+
+jest.mock("../../../components/summit-dropdown", () => ({
+  __esModule: true,
+  default: ({ onClick }) => (
+    <button type="button" onClick={() => onClick(99)}>
+      copy-media-uploads
+    </button>
+  )
+}));
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+const initialState = {
+  currentSummitState: {
+    currentSummit: { id: 42 }
+  },
+  mediaUploadListState: {
+    media_uploads: [{ id: 7, name: "Slides", description: "Slides upload" }],
+    totalMediaUploads: 1,
+    perPage: 10,
+    currentPage: 3,
+    term: "",
+    order: "id",
+    orderDir: 1
+  }
+};
+
+describe("MediaUploadListPage", () => {
+  let history;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    history = { push: jest.fn() };
+    getMediaUploads.mockReturnValue(() => Promise.resolve());
+    deleteMediaUpload.mockReturnValue(() => Promise.resolve());
+    copyMediaUploads.mockReturnValue(() => Promise.resolve());
+  });
+
+  const renderPage = () =>
+    renderWithRedux(<MediaUploadListPage history={history} />, {
+      initialState
+    });
+
+  it("fetches media uploads on mount", () => {
+    renderPage();
+
+    expect(getMediaUploads).toHaveBeenCalledTimes(1);
+  });
+
+  it("threads search, pagination and sort params to getMediaUploads", async () => {
+    renderPage();
+
+    await userEvent.click(screen.getByRole("button", { name: "search-foo" }));
+    expect(getMediaUploads).toHaveBeenLastCalledWith("foo", 1, 10, "id", 1);
+
+    await userEvent.click(screen.getByRole("button", { name: "page-2" }));
+    expect(getMediaUploads).toHaveBeenLastCalledWith("", 2, 10, "id", 1);
+
+    await userEvent.click(screen.getByRole("button", { name: "per-page-20" }));
+    expect(getMediaUploads).toHaveBeenLastCalledWith("", 1, 20, "id", 1);
+
+    await userEvent.click(screen.getByRole("button", { name: "sort-name" }));
+    expect(getMediaUploads).toHaveBeenLastCalledWith("", 1, 10, "name", 0);
+  });
+
+  it("navigates to the edit route when clicking edit", async () => {
+    renderPage();
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "edit-row" }));
+      await flushPromises();
+    });
+
+    expect(history.push).toHaveBeenCalledWith(
+      "/app/summits/42/media-uploads/7"
+    );
+  });
+
+  it("navigates to the new route when clicking add", async () => {
+    renderPage();
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "media_upload.add" })
+    );
+
+    expect(history.push).toHaveBeenCalledWith(
+      "/app/summits/42/media-uploads/new"
+    );
+  });
+
+  it("reloads the list after a successful delete", async () => {
+    renderPage();
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "delete-row" }));
+      await flushPromises();
+    });
+
+    expect(deleteMediaUpload).toHaveBeenCalledWith(7);
+    // Call 1: useEffect on mount; call 2: handleDelete refresh
+    expect(getMediaUploads).toHaveBeenCalledTimes(2);
+  });
+
+  it("copies media uploads from the selected summit", async () => {
+    renderPage();
+
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole("button", { name: "copy-media-uploads" })
+      );
+      await flushPromises();
+    });
+
+    expect(copyMediaUploads).toHaveBeenCalledWith(99);
+  });
+});
diff --git a/src/pages/media_uploads/edit-media-upload-page.js b/src/pages/media_uploads/edit-media-upload-page.js
index 6e866795e..8a3e8c3c5 100644
--- a/src/pages/media_uploads/edit-media-upload-page.js
+++ b/src/pages/media_uploads/edit-media-upload-page.js
@@ -11,7 +11,7 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
@@ -22,66 +22,64 @@ import {
   saveMediaUpload
 } from "../../actions/media-upload-actions";
 import { getAllMediaFileTypes } from "../../actions/media-file-type-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
 
-// import '../../styles/edit-media-upload-page.less';
-
-class EditMediaUploadPage extends React.Component {
-  constructor(props) {
-    const mediaUploadId = props.match.params.media_upload_id;
-    super(props);
-
-    this.state = {};
+const EditMediaUploadPage = ({
+  currentSummit,
+  entity,
+  errors,
+  media_file_types: mediaFileTypes,
+  match,
+  history,
+  getMediaUpload,
+  resetMediaUploadForm,
+  saveMediaUpload,
+  getAllMediaFileTypes
+}) => {
+  const mediaUploadId = match.params.media_upload_id;
 
+  useEffect(() => {
     if (!mediaUploadId) {
-      props.resetMediaUploadForm();
+      resetMediaUploadForm();
     } else {
-      props.getMediaUpload(mediaUploadId);
+      getMediaUpload(mediaUploadId);
     }
+  }, [mediaUploadId]);
 
-    props.getAllMediaFileTypes();
-  }
+  useEffect(() => {
+    if (mediaFileTypes.length === 0) {
+      getAllMediaFileTypes();
+    }
+  }, [mediaFileTypes.length]);
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const oldId = prevProps.match.params.media_upload_id;
-    const newId = this.props.match.params.media_upload_id;
+  const handleSubmit = (values) =>
+    saveMediaUpload(values).then(() => {
+      history.push(`/app/summits/${currentSummit.id}/media-uploads`);
+    });
 
-    if (oldId !== newId) {
-      if (!newId) {
-        this.props.resetTemplateForm();
-      } else {
-        this.props.getMediaUpload(newId);
-      }
-    }
-  }
+  const title = entity.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+  const breadcrumb = entity.id ? entity.name : T.translate("general.new");
 
-  render() {
-    const { entity, errors, match, currentSummit, media_file_types } =
-      this.props;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id ? entity.name : T.translate("general.new");
+  if (!currentSummit) return <div />;
 
-    return (
-      <div className="container edit-media-uploads-page">
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("media_upload.media_upload")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        <MediaUploadForm
-          entity={entity}
-          errors={errors}
-          currentSummit={currentSummit}
-          mediaFileTypes={media_file_types}
-          onSubmit={this.props.saveMediaUpload}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <div className="container edit-media-uploads-page">
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <h3>
+        {title} {T.translate("media_upload.media_upload")}
+      </h3>
+      <hr />
+      <MediaUploadForm
+        entity={entity}
+        errors={errors}
+        currentSummit={currentSummit}
+        mediaFileTypes={mediaFileTypes}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+};
 
 const mapStateToProps = ({ mediaUploadState, currentSummitState }) => ({
   currentSummit: currentSummitState.currentSummit,
diff --git a/src/pages/media_uploads/media-upload-list-page.js b/src/pages/media_uploads/media-upload-list-page.js
index 3299f61e8..c061ef4cf 100644
--- a/src/pages/media_uploads/media-upload-list-page.js
+++ b/src/pages/media_uploads/media-upload-list-page.js
@@ -13,169 +13,211 @@
 
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
+import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
-import Swal from "sweetalert2";
-import { Pagination } from "react-bootstrap";
-import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search"
-import Table from "openstack-uicore-foundation/lib/components/table";
-import { getSummitById } from "../../actions/summit-actions";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Grid2 from "@mui/material/Grid2";
+import AddIcon from "@mui/icons-material/Add";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import RawHTML from "openstack-uicore-foundation/lib/components/raw-html";
+import SummitDropdown from "../../components/summit-dropdown";
 import {
-  getMediaUploads,
-  deleteMediaUpload,
-  copyMediaUploads
+  getMediaUploads as getMediaUploadsAction,
+  deleteMediaUpload as deleteMediaUploadAction,
+  copyMediaUploads as copyMediaUploadsAction
 } from "../../actions/media-upload-actions";
-import SummitDropdown from "../../components/summit-dropdown";
+import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
 
 const MediaUploadListPage = ({
-  history,
   currentSummit,
   media_uploads,
   term,
-  order,
-  orderDir,
   currentPage,
-  lastPage,
   perPage,
-  ...props
+  order,
+  orderDir,
+  totalMediaUploads,
+  history,
+  getMediaUploads,
+  deleteMediaUpload,
+  copyMediaUploads
 }) => {
   useEffect(() => {
-    props.getMediaUploads();
+    getMediaUploads();
   }, []);
 
-  const handleEdit = (media_upload_id) => {
-    history.push(
-      `/app/summits/${currentSummit.id}/media-uploads/${media_upload_id}`
-    );
+  const handleEdit = (row) => {
+    history.push(`/app/summits/${currentSummit.id}/media-uploads/${row.id}`);
   };
 
-  const handlePageChange = (page) => {
-    props.getMediaUploads(term, page, perPage, order, orderDir);
+  const handleNew = () => {
+    history.push(`/app/summits/${currentSummit.id}/media-uploads/new`);
+  };
+
+  const handleDelete = (mediaUploadId) => {
+    deleteMediaUpload(mediaUploadId).then(() =>
+      getMediaUploads(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir)
+    );
   };
 
-  const handleSort = (index, key, dir) => {
-    props.getMediaUploads(term, currentPage, perPage, key, dir);
+  const handleSearch = (searchTerm) => {
+    getMediaUploads(searchTerm, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
   };
 
-  const handleSearch = (term) => {
-    props.getMediaUploads(term, currentPage, perPage, order, orderDir);
+  const handlePageChange = (page) => {
+    getMediaUploads(term, page, perPage, order, orderDir);
   };
 
-  const handleNewMediaUpload = (ev) => {
-    ev.preventDefault();
-    history.push(`/app/summits/${currentSummit.id}/media-uploads/new`);
+  const handlePerPageChange = (newPerPage) => {
+    getMediaUploads(term, DEFAULT_CURRENT_PAGE, newPerPage, order, orderDir);
   };
 
-  const handleDelete = (mediaUploadId) => {
-    const media_upload = media_uploads.find((t) => t.id === mediaUploadId);
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: `${T.translate("media_upload.delete_warning")} ${
-        media_upload.name
-      }}`,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then((result) => {
-      if (result.value) {
-        props.deleteMediaUpload(mediaUploadId);
-      }
-    });
+  const handleSort = (key, dir) => {
+    getMediaUploads(term, DEFAULT_CURRENT_PAGE, perPage, key, dir);
   };
 
   const handleCopyMediaUploads = (fromSummitId) => {
-    props.copyMediaUploads(fromSummitId);
+    copyMediaUploads(fromSummitId);
   };
 
-  const canEdit = (item) => !item.is_system_defined;
+  const canDeleteMediaUpload = (row) => !row.is_system_defined;
 
   const columns = [
-    { columnKey: "id", value: T.translate("general.id"), sortable: true },
+    { columnKey: "id", header: T.translate("general.id"), sortable: true },
     {
       columnKey: "name",
-      value: T.translate("media_upload.name"),
+      header: T.translate("media_upload.name"),
       sortable: true
     },
     {
       columnKey: "description",
-      value: T.translate("media_upload.description")
+      header: T.translate("media_upload.description"),
+      render: (row) => <RawHTML>{row.description}</RawHTML>
     }
   ];
 
-  const table_options = {
-    sortCol: order,
-    sortDir: orderDir,
-    actions: {
-      edit: { onClick: handleEdit },
-      delete: { onClick: handleDelete, display: canEdit }
-    }
-  };
+  const tableOptions = { sortCol: order, sortDir: orderDir };
+
+  if (!currentSummit.id) return <div />;
 
   return (
     <div className="container">
-      <h3> {T.translate("media_upload.media_upload_list")}</h3>
-      <div className="row">
-        <div className="col-md-6">
-          <FreeTextSearch
-            value={term}
-            placeholder={T.translate("media_upload.placeholders.search")}
-            onSearch={handleSearch}
-          />
-        </div>
-        <div className="col-md-6 text-right">
-          <button
-            className="btn btn-primary right-space"
-            onClick={handleNewMediaUpload}
-          >
-            {T.translate("media_upload.add")}
-          </button>
+      <h3>{T.translate("media_upload.media_upload_list")}</h3>
+      <Grid2
+        container
+        spacing={1}
+        sx={{
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2
+        }}
+      >
+        <Grid2 size={2}>
+          <Box component="span">
+            {totalMediaUploads} {T.translate("media_upload.media_uploads")}
+          </Box>
+        </Grid2>
+        <Grid2
+          container
+          size={10}
+          gap={1}
+          sx={{
+            justifyContent: "flex-end",
+            alignItems: "center"
+          }}
+        >
+          <Grid2 size={4}>
+            <SearchInput term={term} onSearch={handleSearch} />
+          </Grid2>
           <SummitDropdown
             onClick={handleCopyMediaUploads}
             actionLabel={T.translate("media_upload.copy_media_uploads")}
           />
-        </div>
-      </div>
+          <Button
+            variant="contained"
+            onClick={handleNew}
+            startIcon={<AddIcon />}
+            sx={{
+              height: "36px",
+              padding: "6px 16px",
+              fontSize: "1.4rem",
+              lineHeight: "2.4rem",
+              letterSpacing: "0.4px"
+            }}
+          >
+            {T.translate("media_upload.add")}
+          </Button>
+        </Grid2>
+      </Grid2>
 
-      {media_uploads.length === 0 && (
-        <div>{T.translate("media_upload.no_results")}</div>
+      {media_uploads.length > 0 && (
+        <MuiTable
+          columns={columns}
+          data={media_uploads}
+          tableSx={{ tableLayout: "auto" }}
+          options={tableOptions}
+          perPage={perPage}
+          currentPage={currentPage}
+          totalRows={totalMediaUploads}
+          onPageChange={handlePageChange}
+          onPerPageChange={handlePerPageChange}
+          onSort={handleSort}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          canDelete={canDeleteMediaUpload}
+          deleteDialogBody={(name) =>
+            `${T.translate("media_upload.delete_warning")}${name}`
+          }
+          confirmButtonColor="error"
+        />
       )}
 
-      {media_uploads.length > 0 && (
-        <div>
-          <Table
-            options={table_options}
-            data={media_uploads}
-            columns={columns}
-            onSort={handleSort}
-          />
-          <Pagination
-            bsSize="medium"
-            prev
-            next
-            first
-            last
-            ellipsis
-            boundaryLinks
-            maxButtons={10}
-            items={lastPage}
-            activePage={currentPage}
-            onSelect={handlePageChange}
-          />
-        </div>
+      {media_uploads.length === 0 && (
+        <div>{T.translate("media_upload.no_results")}</div>
       )}
     </div>
   );
 };
 
+MediaUploadListPage.propTypes = {
+  currentSummit: PropTypes.shape({ id: PropTypes.number }).isRequired,
+  media_uploads: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      description: PropTypes.string
+    })
+  ).isRequired,
+  term: PropTypes.string,
+  currentPage: PropTypes.number,
+  perPage: PropTypes.number,
+  order: PropTypes.string,
+  orderDir: PropTypes.number,
+  totalMediaUploads: PropTypes.number,
+  history: PropTypes.shape({ push: PropTypes.func }).isRequired,
+  getMediaUploads: PropTypes.func.isRequired,
+  deleteMediaUpload: PropTypes.func.isRequired,
+  copyMediaUploads: PropTypes.func.isRequired
+};
+
+MediaUploadListPage.defaultProps = {
+  term: "",
+  currentPage: 1,
+  perPage: 10,
+  order: "id",
+  orderDir: 1,
+  totalMediaUploads: 0
+};
+
 const mapStateToProps = ({ currentSummitState, mediaUploadListState }) => ({
   currentSummit: currentSummitState.currentSummit,
   ...mediaUploadListState
 });
 
 export default connect(mapStateToProps, {
-  getSummitById,
-  getMediaUploads,
-  deleteMediaUpload,
-  copyMediaUploads
+  getMediaUploads: getMediaUploadsAction,
+  deleteMediaUpload: deleteMediaUploadAction,
+  copyMediaUploads: copyMediaUploadsAction
 })(MediaUploadListPage);
diff --git a/src/reducers/media_uploads/media-upload-reducer.js b/src/reducers/media_uploads/media-upload-reducer.js
index 9de06ca9b..a7dba94a4 100644
--- a/src/reducers/media_uploads/media-upload-reducer.js
+++ b/src/reducers/media_uploads/media-upload-reducer.js
@@ -79,7 +79,8 @@ const mediaUploadReducer = (state = DEFAULT_STATE, action) => {
       return {
         ...state,
         entity: { ...DEFAULT_ENTITY, ...entity },
-        preview: null
+        preview: null,
+        errors: {}
       };
     }
     case VALIDATE: {
diff --git a/src/reducers/media_uploads/media-uploads-list-reducer.js b/src/reducers/media_uploads/media-uploads-list-reducer.js
index e196c81f6..23adea55e 100644
--- a/src/reducers/media_uploads/media-uploads-list-reducer.js
+++ b/src/reducers/media_uploads/media-uploads-list-reducer.js
@@ -26,7 +26,8 @@ const DEFAULT_STATE = {
   orderDir: 1,
   currentPage: 1,
   lastPage: 1,
-  perPage: 10
+  perPage: 10,
+  totalMediaUploads: 0
 };
 
 const mediaUploadListReducer = (state = DEFAULT_STATE, action = {}) => {
@@ -37,24 +38,29 @@ const mediaUploadListReducer = (state = DEFAULT_STATE, action = {}) => {
       return DEFAULT_STATE;
     }
     case REQUEST_MEDIA_UPLOADS: {
-      const { order, orderDir, term } = payload;
+      const { order, orderDir, term, perPage } = payload;
 
-      return { ...state, order, orderDir, term };
+      return { ...state, order, orderDir, term, perPage };
     }
     case RECEIVE_MEDIA_UPLOADS: {
-      const { last_page: lastPage, current_page: currentPage } =
-        payload.response;
+      const {
+        total,
+        last_page: lastPage,
+        current_page: currentPage
+      } = payload.response;
       const media_uploads = payload.response.data.map((mft) => ({
         id: mft.id,
         name: mft.name,
-        description: mft.description
+        description: mft.description,
+        is_system_defined: mft.type?.is_system_defined
       }));
 
       return {
         ...state,
         media_uploads,
         currentPage,
-        lastPage
+        lastPage,
+        totalMediaUploads: total
       };
     }
     case MEDIA_UPLOAD_DELETED: {