diff --git a/src/actions/summitdoc-actions.js b/src/actions/summitdoc-actions.js
index 478811d18..92e10dedc 100644
--- a/src/actions/summitdoc-actions.js
+++ b/src/actions/summitdoc-actions.js
@@ -12,21 +12,19 @@
  * */
 import T from "i18n-react/dist/i18n-react";
 import {
-  getRequest,
-  deleteRequest,
-  createAction,
-  stopLoading,
-  startLoading,
-  showMessage,
-  showSuccessMessage,
   authErrorHandler,
+  createAction,
+  deleteRequest,
+  escapeFilterValue,
+  getRequest,
+  postFile,
   postRequest,
   putRequest,
-  postFile,
-  escapeFilterValue
+  snackbarSuccessHandler,
+  startLoading,
+  stopLoading
 } from "openstack-uicore-foundation/lib/utils/actions";
 import { getAccessTokenSafely, wrapFormFile } from "../utils/methods";
-import history from "../history";
 import { DEFAULT_PER_PAGE } from "../utils/constants";
 
 export const REQUEST_SUMMITDOCS = "REQUEST_SUMMITDOCS";
@@ -49,13 +47,12 @@ export const getSummitDocs =
     orderDir = 1
   ) =>
   async (dispatch, getState) => {
+    dispatch(startLoading());
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
     const filter = [];
 
-    dispatch(startLoading());
-
     if (term) {
       const escapedTerm = escapeFilterValue(term);
       filter.push(`name=@${escapedTerm}`);
@@ -65,9 +62,10 @@ export const getSummitDocs =
       page,
       per_page: perPage,
       access_token: accessToken,
-      expand: "event_types",
-      relations: "event_types.none",
-      fields: "id,description,label,event_types.id,event_types.name"
+      expand: "event_types,selection_plan",
+      relations: "event_types.none,selection_plan.none",
+      fields:
+        "id,description,label,event_types.id,event_types.name,selection_plan.name,show_always"
     };
 
     if (filter.length > 0) {
@@ -85,19 +83,20 @@ export const getSummitDocs =
       createAction(RECEIVE_SUMMITDOCS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents`,
       authErrorHandler,
-      { order, orderDir, term }
-    )(params)(dispatch).then(() => {
-      dispatch(stopLoading());
-    });
+      { order, orderDir, term, currentPage: page, perPage }
+    )(params)(dispatch)
+      .finally(() => {
+        dispatch(stopLoading());
+      })
+      .catch(() => {});
   };
 
 export const getSummitDoc = (summitDocId) => async (dispatch, getState) => {
+  dispatch(startLoading());
   const { currentSummitState } = getState();
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
 
-  dispatch(startLoading());
-
   const params = {
     access_token: accessToken
   };
@@ -107,9 +106,11 @@ export const getSummitDoc = (summitDocId) => async (dispatch, getState) => {
     createAction(RECEIVE_SUMMITDOC),
     `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents/${summitDocId}`,
     authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+  )(params)(dispatch)
+    .finally(() => {
+      dispatch(stopLoading());
+    })
+    .catch(() => {});
 };
 
 export const resetSummitDocForm = () => (dispatch) => {
@@ -117,34 +118,34 @@ export const resetSummitDocForm = () => (dispatch) => {
 };
 
 export const addFileToDoc = (entity, file) => async (dispatch, getState) => {
+  dispatch(startLoading());
   const { currentSummitState } = getState();
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
 
-  dispatch(startLoading());
-
   const params = {
     access_token: accessToken
   };
 
-  postRequest(
+  return postRequest(
     null,
     createAction(SUMMITDOC_FILE_ADDED),
     `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents/${entity.id}/file`,
     wrapFormFile(file),
     authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+  )(params)(dispatch)
+    .finally(() => {
+      dispatch(stopLoading());
+    })
+    .catch(() => {});
 };
 
 export const removeFileFromDoc = (entity) => async (dispatch, getState) => {
+  dispatch(startLoading());
   const { currentSummitState } = getState();
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
 
-  dispatch(startLoading());
-
   const params = {
     access_token: accessToken
   };
@@ -155,60 +156,65 @@ export const removeFileFromDoc = (entity) => async (dispatch, getState) => {
     `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents/${entity.id}/file`,
     null,
     authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+  )(params)(dispatch)
+    .finally(() => {
+      dispatch(stopLoading());
+    })
+    .catch(() => {});
 };
 
+// TODO: replace with snackbarErrorHandler once it handles 401s (re-login redirect) correctly.
 export const saveSummitDoc = (entity, file) => async (dispatch, getState) => {
+  dispatch(startLoading());
   const { currentSummitState } = getState();
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
 
-  dispatch(startLoading());
-
   const normalizedEntity = normalizeEntity(entity);
   const params = { access_token: accessToken };
 
   if (entity.id) {
-    putRequest(
+    return putRequest(
       createAction(UPDATE_SUMMITDOC),
       createAction(SUMMITDOC_UPDATED),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents/${entity.id}`,
       normalizedEntity,
       authErrorHandler,
       entity
-    )(params)(dispatch).then(() => {
-      dispatch(showSuccessMessage(T.translate("summitdoc.saved")));
-    });
-  } else {
-    const successMessage = {
-      title: T.translate("general.done"),
-      html: T.translate("summitdoc.created"),
-      type: "success"
-    };
+    )(params)(dispatch)
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.done"),
+            html: T.translate("summitdoc.saved")
+          })
+        );
+      })
+      .finally(() => dispatch(stopLoading()));
+  }
 
-    postFile(
-      createAction(UPDATE_SUMMITDOC),
-      createAction(SUMMITDOC_ADDED),
-      `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents`,
-      file,
-      normalizedEntity,
-      authErrorHandler,
-      entity
-    )(params)(dispatch).then((payload) => {
+  return postFile(
+    createAction(UPDATE_SUMMITDOC),
+    createAction(SUMMITDOC_ADDED),
+    `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents`,
+    file,
+    normalizedEntity,
+    authErrorHandler,
+    entity
+  )(params)(dispatch)
+    .then(() => {
       dispatch(
-        showMessage(successMessage, () => {
-          history.push(
-            `/app/summits/${currentSummit.id}/summitdocs/${payload.response.id}`
-          );
+        snackbarSuccessHandler({
+          title: T.translate("general.done"),
+          html: T.translate("summitdoc.created")
         })
       );
-    });
-  }
+    })
+    .finally(() => dispatch(stopLoading()));
 };
 
 export const deleteSummitDoc = (summitDocId) => async (dispatch, getState) => {
+  dispatch(startLoading());
   const { currentSummitState } = getState();
   const accessToken = await getAccessTokenSafely();
   const { currentSummit } = currentSummitState;
@@ -223,9 +229,11 @@ export const deleteSummitDoc = (summitDocId) => async (dispatch, getState) => {
     `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/summit-documents/${summitDocId}`,
     null,
     authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+  )(params)(dispatch)
+    .finally(() => {
+      dispatch(stopLoading());
+    })
+    .catch(() => {});
 };
 
 const normalizeEntity = (entity) => {
diff --git a/src/components/forms/__tests__/summitdoc-form.test.js b/src/components/forms/__tests__/summitdoc-form.test.js
new file mode 100644
index 000000000..57161b5cd
--- /dev/null
+++ b/src/components/forms/__tests__/summitdoc-form.test.js
@@ -0,0 +1,367 @@
+// ---- Mocks must come first ----
+
+// jsdom does not implement scrollIntoView; polyfill so the errors effect
+// (which calls scrollToError -> firstNode.scrollIntoView) does not throw.
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/inputs/upload-input",
+  () => ({
+    __esModule: true,
+    default: ({ value, handleUpload, handleRemove, disabled }) => (
+      <div>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => handleUpload({ preview: "blob:new-file" })}
+        >
+          upload-file
+        </button>
+        {value && (
+          <button type="button" onClick={() => handleRemove()}>
+            remove-file
+          </button>
+        )}
+      </div>
+    )
+  })
+);
+
+// The vendor Formik-input wrappers (openstack-uicore-foundation) own their own
+// error/FormHelperText rendering and have their own tests; here we only need
+// them to read/write real Formik state, mirroring company-form.test.js and
+// payment-profile-dialog.test.js's mocking convention for these components.
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikTextField({ name, disabled }) {
+        const [field] = useField(name);
+        return (
+          <input
+            data-testid={`textfield-${name}`}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      }
+    };
+  }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/select",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikSelect({ name, disabled }) {
+        const [field] = useField(name);
+        return (
+          <div
+            data-testid={`select-${name}`}
+            data-disabled={String(!!disabled)}
+          >
+            {JSON.stringify(field.value)}
+          </div>
+        );
+      }
+    };
+  }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox",
+  () => {
+    const React = require("react");
+    const { useField } = require("formik");
+    return {
+      __esModule: true,
+      default: function MockMuiFormikCheckbox({ name, label, ...props }) {
+        const [field] = useField({ name, type: "checkbox" });
+        return (
+          <label>
+            {label}
+            <input
+              type="checkbox"
+              data-testid={`checkbox-${name}`}
+              checked={field.value}
+              {...field}
+              {...props}
+            />
+          </label>
+        );
+      }
+    };
+  }
+);
+
+// ---- Now imports ----
+/* eslint-disable import/first */
+import React, { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { FormikProvider, useFormik } from "formik";
+import SummitDocForm from "../summitdoc-form";
+import {
+  buildValues,
+  validationSchema
+} from "../../../pages/summitdocs/edit-summitdoc-page";
+/* eslint-enable import/first */
+
+const currentSummit = {
+  event_types: [
+    { id: 1, name: "Keynote" },
+    { id: 2, name: "Panel" }
+  ],
+  selection_plans: [{ id: 10, name: "Plan A" }]
+};
+
+const VALID_ENTITY = {
+  id: 0,
+  name: "A doc",
+  label: "A label",
+  description: "A description",
+  event_types: [1],
+  file_preview: "",
+  selection_plan_id: null,
+  show_always: false,
+  web_link: ""
+};
+
+// Mirrors the formik wiring edit-summitdoc-page.js provides in production, so
+// SummitDocForm's useFormikContext() has a real context to read from.
+const Harness = ({
+  entity,
+  onSubmit = jest.fn(),
+  addFileToDoc = jest.fn(),
+  removeFileFromDoc = jest.fn()
+}) => {
+  const [file, setFile] = useState(null);
+  const formik = useFormik({
+    initialValues: buildValues(entity),
+    validationSchema,
+    onSubmit: (values) => onSubmit(values, file)
+  });
+
+  return (
+    <FormikProvider value={formik}>
+      <SummitDocForm
+        currentSummit={currentSummit}
+        addFileToDoc={addFileToDoc}
+        removeFileFromDoc={removeFileFromDoc}
+        setFile={setFile}
+      />
+      <button type="button" onClick={() => formik.handleSubmit()}>
+        general.save
+      </button>
+      <pre data-testid="debug-values">{JSON.stringify(formik.values)}</pre>
+      <pre data-testid="debug-errors">{JSON.stringify(formik.errors)}</pre>
+    </FormikProvider>
+  );
+};
+
+const readFormikValues = () =>
+  JSON.parse(screen.getByTestId("debug-values").textContent);
+const readFormikErrors = () =>
+  JSON.parse(screen.getByTestId("debug-errors").textContent);
+
+const clickSave = () =>
+  userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+describe("SummitDocForm", () => {
+  it("clears and disables event types when show_always is checked", async () => {
+    render(<Harness entity={{ ...VALID_ENTITY, event_types: [1] }} />);
+
+    expect(screen.getByTestId("select-event_types")).toHaveTextContent("[1]");
+
+    await userEvent.click(
+      screen.getByRole("checkbox", { name: "summitdoc.show_always" })
+    );
+
+    expect(readFormikValues().event_types).toEqual([]);
+    expect(screen.getByTestId("select-event_types")).toHaveAttribute(
+      "data-disabled",
+      "true"
+    );
+  });
+
+  it("disables the file upload when a web link is entered", async () => {
+    render(<Harness entity={VALID_ENTITY} />);
+
+    await userEvent.type(
+      screen.getByTestId("textfield-web_link"),
+      "http://example.com"
+    );
+
+    expect(screen.getByRole("button", { name: "upload-file" })).toBeDisabled();
+  });
+
+  it("disables the web link field once a file is present", () => {
+    render(
+      <Harness
+        entity={{ ...VALID_ENTITY, file_preview: "blob:existing-file" }}
+      />
+    );
+
+    expect(screen.getByTestId("textfield-web_link")).toBeDisabled();
+  });
+
+  it("shows an existing doc's server-side file and disables web_link for it", () => {
+    render(
+      <Harness
+        entity={{
+          ...VALID_ENTITY,
+          id: 5,
+          file_preview: "",
+          file: "https://cdn.example.com/existing.pdf"
+        }}
+      />
+    );
+
+    expect(
+      screen.getByRole("button", { name: "remove-file" })
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("textfield-web_link")).toBeDisabled();
+  });
+
+  it("holds the file in local state for a new doc and submits it together with the entity on save", async () => {
+    const onSubmit = jest.fn();
+    const addFileToDoc = jest.fn();
+    render(
+      <Harness
+        entity={VALID_ENTITY}
+        onSubmit={onSubmit}
+        addFileToDoc={addFileToDoc}
+      />
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "upload-file" }));
+
+    expect(addFileToDoc).not.toHaveBeenCalled();
+    expect(
+      screen.getByRole("button", { name: "remove-file" })
+    ).toBeInTheDocument();
+
+    await clickSave();
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ file_preview: "blob:new-file" }),
+      { preview: "blob:new-file" }
+    );
+  });
+
+  it("uploads/removes the file directly against the API for an existing doc", async () => {
+    const addFileToDoc = jest.fn();
+    const removeFileFromDoc = jest.fn();
+    render(
+      <Harness
+        entity={{ ...VALID_ENTITY, id: 5, file_preview: "blob:existing-file" }}
+        addFileToDoc={addFileToDoc}
+        removeFileFromDoc={removeFileFromDoc}
+      />
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "upload-file" }));
+    expect(addFileToDoc).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 5 }),
+      { preview: "blob:new-file" }
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "remove-file" }));
+    expect(removeFileFromDoc).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 5 })
+    );
+  });
+
+  it("blocks submit and surfaces required-field errors (including event_types) on an empty doc", async () => {
+    const onSubmit = jest.fn();
+    render(
+      <Harness
+        entity={{
+          id: 0,
+          name: "",
+          label: "",
+          description: "",
+          event_types: [],
+          file_preview: "",
+          selection_plan_id: null,
+          show_always: false,
+          web_link: ""
+        }}
+        onSubmit={onSubmit}
+      />
+    );
+
+    await clickSave();
+
+    const errors = readFormikErrors();
+    expect(errors.name).toBeTruthy();
+    expect(errors.label).toBeTruthy();
+    expect(errors.description).toBeTruthy();
+    expect(errors.event_types).toBeTruthy();
+    expect(errors.web_link).toBeTruthy();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("does not require web_link when editing a doc that already has a server-side file", async () => {
+    const onSubmit = jest.fn();
+    render(
+      <Harness
+        entity={{
+          ...VALID_ENTITY,
+          id: 5,
+          file_preview: "",
+          file: "https://cdn.example.com/existing.pdf",
+          web_link: ""
+        }}
+        onSubmit={onSubmit}
+      />
+    );
+
+    // Editing an unrelated field re-runs validation against the whole
+    // schema - this used to flash a false "web_link required" error
+    // because entity.file (the existing file) never reached formik state.
+    await userEvent.type(
+      screen.getByTestId("textfield-description"),
+      " updated"
+    );
+
+    expect(readFormikErrors().web_link).toBeUndefined();
+  });
+
+  it("does not require event_types when show_always is checked, and submits successfully", async () => {
+    const onSubmit = jest.fn();
+    render(
+      <Harness
+        entity={{
+          ...VALID_ENTITY,
+          event_types: [],
+          web_link: "http://example.com"
+        }}
+        onSubmit={onSubmit}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole("checkbox", { name: "summitdoc.show_always" })
+    );
+    await clickSave();
+
+    expect(readFormikErrors().event_types).toBeUndefined();
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ show_always: true, event_types: [] }),
+      null
+    );
+  });
+});
diff --git a/src/components/forms/summitdoc-form.js b/src/components/forms/summitdoc-form.js
index 3af66746b..74b4fd754 100644
--- a/src/components/forms/summitdoc-form.js
+++ b/src/components/forms/summitdoc-form.js
@@ -9,249 +9,227 @@
  * 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 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 TextArea from "openstack-uicore-foundation/lib/components/inputs/textarea-input"
+import { useFormikContext } from "formik";
+import Box from "@mui/material/Box";
+import { Grid2 } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import Tooltip from "@mui/material/Tooltip";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
+import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
 import UploadInput from "openstack-uicore-foundation/lib/components/inputs/upload-input";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
-
-class SummitDocForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleUploadFile = this.handleUploadFile.bind(this);
-    this.handleRemoveFile = this.handleRemoveFile.bind(this);
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    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 });
-    }
-  }
-
-  handleChange(ev) {
-    let entity = { ...this.state.entity };
-    let errors = { ...this.state.errors };
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    if (ev.target.type === "number") {
-      value = parseInt(ev.target.value);
-    }
-
-    errors[id] = "";
-    entity[id] = value;
-
-    if (id === "show_always" && value) {
-      entity.event_types = [];
-    }
-
-    this.setState({ entity: entity, errors: errors });
-  }
-
-  handleSubmit(ev) {
-    const { entity, file } = this.state;
-    ev.preventDefault();
-
-    this.props.onSubmit(entity, file);
-  }
-
-  hasErrors(field) {
-    let { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
-    }
-
-    return "";
-  }
-
-  handleUploadFile(file) {
-    let entity = { ...this.state.entity };
-
-    if (entity.id) {
-      this.props.addFileToDoc(entity, file);
+import useScrollToError from "../../hooks/useScrollToError";
+
+const SummitDocForm = ({
+  currentSummit,
+  addFileToDoc,
+  removeFileFromDoc,
+  setFile
+}) => {
+  const formik = useFormikContext();
+  const { values, setFieldValue, setValues } = formik;
+
+  useScrollToError(formik, true);
+
+  const eventTypesDDL = currentSummit.event_types.map((et) => ({
+    value: et.id,
+    label: et.name
+  }));
+
+  const selectionPlansDDL = currentSummit.selection_plans.map((sp) => ({
+    value: sp.id,
+    label: sp.name
+  }));
+
+  const handleShowAlwaysChange = (ev) => {
+    const { checked } = ev.target;
+    // Update both fields in one call - two sequential setFieldValue calls
+    // each trigger their own validation pass against a stale snapshot of
+    // the other field, flashing a spurious "required" error on event_types.
+    setValues({
+      ...values,
+      show_always: checked,
+      event_types: checked ? [] : values.event_types
+    });
+  };
+
+  const handleUploadFile = (uploadedFile) => {
+    if (values.id) {
+      addFileToDoc(values, uploadedFile);
     } else {
-      entity.file_preview = file.preview;
-      this.setState({ file: file, entity: entity });
+      setFieldValue("file_preview", uploadedFile.preview);
+      setFile(uploadedFile);
     }
-  }
-
-  handleRemoveFile(ev) {
-    let entity = { ...this.state.entity };
+  };
 
-    if (entity.id) {
-      this.props.removeFileFromDoc(entity);
+  const handleRemoveFile = () => {
+    if (values.id) {
+      removeFileFromDoc(values);
     } else {
-      entity.file_preview = "";
-      this.setState({ file: null, entity: entity });
+      setFieldValue("file_preview", "");
+      setFile(null);
     }
-  }
-
-  render() {
-    const { entity } = this.state;
-    const { currentSummit } = this.props;
-
-    let event_types_ddl = currentSummit.event_types.map((et) => ({
-      value: et.id,
-      label: et.name
-    }));
-
-    let selection_plans_ddl = currentSummit.selection_plans.map((et) => ({
-      value: et.id,
-      label: et.name
-    }));
-
-    return (
-      <form className="summitdoc-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("summitdoc.name")} *</label>
-            <Input
-              id="name"
-              value={entity.name}
-              onChange={this.handleChange}
-              className="form-control"
-              error={this.hasErrors("name")}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("summitdoc.label")} *</label>
-            <Input
-              id="label"
-              value={entity.label}
-              onChange={this.handleChange}
-              className="form-control"
-              error={this.hasErrors("label")}
-            />
-          </div>
-          <div className="col-md-4">
-            <label>
-              {T.translate("summitdoc.event_types")} * &nbsp;
-              <i
-                className="fa fa-info-circle"
-                aria-hidden="true"
-                title={T.translate("summitdoc.event_types_info")}
-              />
-            </label>
-            <Dropdown
-              id="event_types"
-              value={entity.event_types}
-              placeholder={T.translate("summitdoc.placeholders.select_type")}
-              options={event_types_ddl}
-              onChange={this.handleChange}
-              isMulti
-              disabled={entity.show_always}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-8">
-            <label> {T.translate("summitdoc.description")} *</label>
-            <TextArea
-              id="description"
-              value={entity.description}
-              onChange={this.handleChange}
-              className="form-control"
-              error={this.hasErrors("description")}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("summitdoc.selection_plan")}</label>
-            <Dropdown
-              id="selection_plan_id"
-              value={entity.selection_plan_id || null}
-              isClearable={true}
-              placeholder={T.translate("summitdoc.placeholders.selection_plan")}
-              options={selection_plans_ddl}
-              onChange={this.handleChange}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4 col-md-offset-8 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="show_always"
-                checked={entity.show_always}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="show_always">
-                {T.translate("summitdoc.show_always")}
-              </label>
-            </div>
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("summitdoc.file")} *</label>
+  };
+
+  return (
+    <Box>
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, md: 3 }}>
+          <label htmlFor="name">{T.translate("summitdoc.name")} *</label>
+          <MuiFormikTextField
+            name="name"
+            margin="none"
+            fullWidth
+            size="small"
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 3 }}>
+          <label htmlFor="label">{T.translate("summitdoc.label")} *</label>
+          <MuiFormikTextField
+            name="label"
+            margin="none"
+            fullWidth
+            size="small"
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 3 }}>
+          <label htmlFor="event_types">
+            {T.translate("summitdoc.event_types")} *{" "}
+            <Tooltip title={T.translate("summitdoc.event_types_info")}>
+              <InfoOutlinedIcon fontSize="inherit" />
+            </Tooltip>
+          </label>
+          <MuiFormikSelect
+            name="event_types"
+            data-testid="event-types-select"
+            multiple
+            fullWidth
+            size="small"
+            displayEmpty
+            disabled={values.show_always}
+            renderValue={(selected) =>
+              selected
+                .map(
+                  (id) => eventTypesDDL.find((opt) => opt.value === id)?.label
+                )
+                .filter(Boolean)
+                .join(", ")
+            }
+          >
+            {eventTypesDDL.map((opt) => (
+              <MenuItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </MenuItem>
+            ))}
+          </MuiFormikSelect>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 3 }}>
+          <MuiFormikCheckbox
+            name="show_always"
+            label={T.translate("summitdoc.show_always")}
+            onChange={handleShowAlwaysChange}
+          />
+        </Grid2>
+      </Grid2>
+
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12, md: 9 }}>
+          <label htmlFor="description">
+            {T.translate("summitdoc.description")} *
+          </label>
+          <MuiFormikTextField
+            name="description"
+            margin="none"
+            fullWidth
+            multiline
+            minRows={3}
+            size="small"
+          />
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: 3 }}>
+          <label htmlFor="selection_plan_id">
+            {T.translate("summitdoc.selection_plan")}
+          </label>
+          <MuiFormikSelect
+            name="selection_plan_id"
+            fullWidth
+            size="small"
+            displayEmpty
+            renderValue={(selected) =>
+              selected
+                ? selectionPlansDDL.find((opt) => opt.value === selected)?.label
+                : T.translate("summitdoc.placeholders.selection_plan")
+            }
+          >
+            <MenuItem value="">
+              {T.translate("summitdoc.placeholders.selection_plan")}
+            </MenuItem>
+            {selectionPlansDDL.map((opt) => (
+              <MenuItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </MenuItem>
+            ))}
+          </MuiFormikSelect>
+        </Grid2>
+      </Grid2>
+
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={{ xs: 12 }}>
+          <label>{T.translate("summitdoc.file")} *</label>
+          {/* need this styles to adapt bootstrap to MUI */}
+          <Box
+            sx={{
+              "& .file-upload": {
+                display: "flex",
+                gap: 2,
+                alignItems: "flex-start"
+              },
+              "& .file-upload > :first-of-type": { flex: 1 },
+              "& .selected-files-box": { flex: "0 0 auto", maxWidth: "50%" }
+            }}
+          >
             <UploadInput
-              value={entity.file_preview || entity.file}
-              handleUpload={this.handleUploadFile}
-              handleRemove={this.handleRemoveFile}
-              className="dropzone col-md-6"
+              value={values.file_preview || values.file}
+              handleUpload={handleUploadFile}
+              handleRemove={handleRemoveFile}
+              className="dropzone"
               multiple={false}
-              disabled={entity.web_link?.length > 0}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("summitdoc.web_link")} *</label>
-            <Input
-              id="web_link"
-              value={entity.web_link}
-              onChange={this.handleChange}
-              placeholder={T.translate("summitdoc.placeholders.web_link")}
-              className="form-control"
-              disabled={entity.file_preview || entity.file}
-              error={this.hasErrors("web_link")}
-            />
-          </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")}
+              disabled={values.web_link?.length > 0}
             />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
+          </Box>
+        </Grid2>
+      </Grid2>
+
+      <Grid2 container spacing={2} sx={{ mb: 2 }}>
+        <Grid2 size={12}>
+          <label htmlFor="web_link">
+            {T.translate("summitdoc.web_link")} *
+          </label>
+          <MuiFormikTextField
+            name="web_link"
+            margin="none"
+            fullWidth
+            size="small"
+            placeholder={T.translate("summitdoc.placeholders.web_link")}
+            disabled={!!(values.file_preview || values.file)}
+          />
+        </Grid2>
+      </Grid2>
+    </Box>
+  );
+};
+
+SummitDocForm.propTypes = {
+  currentSummit: PropTypes.object.isRequired,
+  addFileToDoc: PropTypes.func.isRequired,
+  removeFileFromDoc: PropTypes.func.isRequired,
+  setFile: PropTypes.func.isRequired
+};
 
 export default SummitDocForm;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c7e8c64fc..cbfc7ea20 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -3355,6 +3355,7 @@
     "label": "Label",
     "description": "Description",
     "event_types": "Activity Types",
+    "all_types": "All Types",
     "show_always": "Show Always",
     "file": "File",
     "delete_warning": "Are you sure you want to delete doc ",
diff --git a/src/pages/summitdocs/__tests__/summitdoc-list-page.test.js b/src/pages/summitdocs/__tests__/summitdoc-list-page.test.js
new file mode 100644
index 000000000..14730bc7f
--- /dev/null
+++ b/src/pages/summitdocs/__tests__/summitdoc-list-page.test.js
@@ -0,0 +1,183 @@
+import React from "react";
+import { act, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { renderWithRedux, createMockSummit } from "../../../utils/test-utils";
+import SummitDocListPage from "../summitdoc-list-page";
+import {
+  getSummitDocs,
+  deleteSummitDoc
+} from "../../../actions/summitdoc-actions";
+import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
+
+jest.mock("../../../actions/summitdoc-actions", () => ({
+  getSummitDocs: jest.fn(),
+  deleteSummitDoc: jest.fn()
+}));
+
+jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
+  __esModule: true,
+  default: ({ onEdit, onDelete, onSort, onPageChange, onPerPageChange }) => (
+    <div>
+      <button
+        type="button"
+        onClick={() => onEdit({ id: 1, label: "test-label" })}
+      >
+        edit-row
+      </button>
+      <button type="button" onClick={() => onDelete(1)}>
+        delete-row
+      </button>
+      <button type="button" onClick={() => onSort("label", -1)}>
+        sort-col
+      </button>
+      <button type="button" onClick={() => onPageChange(2)}>
+        page-2
+      </button>
+      <button type="button" onClick={() => onPerPageChange(50)}>
+        perpage-50
+      </button>
+    </div>
+  )
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => ({
+    __esModule: true,
+    default: ({ onSearch }) => (
+      <button type="button" onClick={() => onSearch("newterm")}>
+        search-trigger
+      </button>
+    )
+  })
+);
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+const mockHistory = { push: jest.fn() };
+
+const initialState = {
+  currentSummitState: { currentSummit: createMockSummit() },
+  summitDocListState: {
+    summitDocs: [
+      {
+        id: 1,
+        name: "test-doc",
+        label: "test-label",
+        description: "test-description",
+        event_types_string: "Keynote, Panel"
+      }
+    ],
+    totalSummitDocs: 1,
+    perPage: 10,
+    currentPage: 1,
+    term: "",
+    order: "id",
+    orderDir: 1,
+    lastPage: 1
+  }
+};
+
+describe("SummitDocListPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getSummitDocs.mockReturnValue(() => Promise.resolve());
+    deleteSummitDoc.mockReturnValue(() => Promise.resolve());
+  });
+
+  it("deletes the summit doc by id (confirm is handled inside MuiTable)", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "delete-row" }));
+    });
+
+    expect(deleteSummitDoc).toHaveBeenCalledWith(1);
+  });
+
+  it("resets to the first page on search", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole("button", { name: "search-trigger" })
+      );
+    });
+
+    expect(getSummitDocs).toHaveBeenLastCalledWith(
+      "newterm",
+      DEFAULT_CURRENT_PAGE,
+      10,
+      "id",
+      1
+    );
+  });
+
+  it("resets to the first page on per-page change", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "perpage-50" }));
+    });
+
+    expect(getSummitDocs).toHaveBeenLastCalledWith(
+      "",
+      DEFAULT_CURRENT_PAGE,
+      50,
+      "id",
+      1
+    );
+  });
+
+  it("keeps the current page on sort", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "sort-col" }));
+    });
+
+    expect(getSummitDocs).toHaveBeenLastCalledWith("", 1, 10, "label", -1);
+  });
+
+  it("navigates to the edit page", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "edit-row" }));
+    });
+
+    expect(mockHistory.push).toHaveBeenCalledWith(
+      "/app/summits/456/summitdocs/1"
+    );
+  });
+
+  it("navigates to the add page", async () => {
+    renderWithRedux(<SummitDocListPage history={mockHistory} />, {
+      initialState
+    });
+
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole("button", { name: "summitdoc.add" })
+      );
+    });
+
+    expect(mockHistory.push).toHaveBeenCalledWith(
+      "/app/summits/456/summitdocs/new"
+    );
+  });
+});
diff --git a/src/pages/summitdocs/edit-summitdoc-page.js b/src/pages/summitdocs/edit-summitdoc-page.js
index 1a48bab25..94bb8e7cb 100644
--- a/src/pages/summitdocs/edit-summitdoc-page.js
+++ b/src/pages/summitdocs/edit-summitdoc-page.js
@@ -11,10 +11,14 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
+import { FormikProvider, useFormik } from "formik";
+import * as yup from "yup";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import SummitDocForm from "../../components/forms/summitdoc-form";
 import { getSummitById } from "../../actions/summit-actions";
 import {
@@ -25,62 +29,125 @@ import {
   saveSummitDoc
 } from "../../actions/summitdoc-actions";
 import AddNewButton from "../../components/buttons/add-new-button";
+import { requiredStringValidation } from "../../utils/yup";
 // import '../../styles/edit-summitdoc-page.less';
 
-class EditSummitDocPage extends React.Component {
-  constructor(props) {
-    const summitDocId = props.match.params.summitdoc_id;
-    super(props);
+export const buildValues = (entity) => ({
+  id: entity?.id ?? 0,
+  name: entity?.name ?? "",
+  label: entity?.label ?? "",
+  description: entity?.description ?? "",
+  event_types: entity?.event_types ?? [],
+  file_preview: entity?.file_preview ?? "",
+  file: entity?.file ?? null,
+  selection_plan_id: entity?.selection_plan_id ?? "",
+  show_always: !!entity?.show_always,
+  web_link: entity?.web_link ?? ""
+});
+
+export const validationSchema = yup.object().shape({
+  name: requiredStringValidation(),
+  label: requiredStringValidation(),
+  description: requiredStringValidation(),
+  event_types: yup.array().when("show_always", {
+    is: true,
+    then: (schema) => schema,
+    otherwise: (schema) => schema.min(1, T.translate("validation.required"))
+  }),
+  file_preview: yup.string().nullable(),
+  file: yup.mixed().nullable(),
+  web_link: yup
+    .string()
+    .nullable()
+    .when(["file_preview", "file"], {
+      is: (filePreview, file) => !filePreview && !file,
+      then: (schema) => schema.required(T.translate("validation.required")),
+      otherwise: (schema) => schema
+    })
+});
 
+const EditSummitDocPage = ({
+  currentSummit,
+  entity,
+  match,
+  history,
+  getSummitDoc,
+  resetSummitDocForm,
+  saveSummitDoc,
+  addFileToDoc,
+  removeFileFromDoc
+}) => {
+  const summitDocId = match.params.summitdoc_id;
+  const [file, setFile] = useState(null);
+
+  useEffect(() => {
     if (!summitDocId) {
-      props.resetSummitDocForm();
+      resetSummitDocForm();
     } else {
-      props.getSummitDoc(summitDocId);
+      getSummitDoc(summitDocId);
     }
-  }
+  }, [summitDocId]);
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const oldId = prevProps.match.params.summitdoc_id;
-    const newId = this.props.match.params.summitdoc_id;
+  const formik = useFormik({
+    initialValues: buildValues(entity),
+    validationSchema,
+    onSubmit: (values) =>
+      saveSummitDoc(values, file)
+        .then(() => {
+          history.push(`/app/summits/${currentSummit.id}/summitdocs`);
+        })
+        .catch(() => {})
+  });
 
-    if (newId !== oldId) {
-      if (!newId) {
-        this.props.resetSummitDocForm();
-      } else {
-        this.props.getSummitDoc(newId);
-      }
-    }
-  }
+  useEffect(() => {
+    formik.resetForm({ values: buildValues(entity) });
+    setFile(null);
+  }, [entity.id]);
+
+  // addFileToDoc/removeFileFromDoc update entity.file directly via redux,
+  // independent of entity.id - resync just this field so it doesn't go
+  // stale, without resetting the rest of the in-progress form.
+  useEffect(() => {
+    formik.setFieldValue("file", entity.file ?? null);
+  }, [entity.file]);
 
-  render() {
-    const { currentSummit, entity, errors, match } = this.props;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id ? entity.label : T.translate("general.new");
+  const title = entity.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+  const breadcrumb = entity.id ? entity.label : T.translate("general.new");
 
-    return (
-      <div className="container">
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("summitdoc.summitdoc")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        {currentSummit && (
-          <SummitDocForm
-            currentSummit={currentSummit}
-            entity={entity}
-            errors={errors}
-            onSubmit={this.props.saveSummitDoc}
-            addFileToDoc={this.props.addFileToDoc}
-            removeFileFromDoc={this.props.removeFileFromDoc}
-          />
-        )}
-      </div>
-    );
-  }
-}
+  return (
+    <div className="container">
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <h3>
+        {title} {T.translate("summitdoc.summitdoc")}
+        <AddNewButton entity={entity} />
+      </h3>
+      <hr />
+      {currentSummit && (
+        <FormikProvider value={formik}>
+          <Box component="form" onSubmit={formik.handleSubmit} noValidate>
+            <SummitDocForm
+              currentSummit={currentSummit}
+              addFileToDoc={addFileToDoc}
+              removeFileFromDoc={removeFileFromDoc}
+              setFile={setFile}
+            />
+            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+              <Button
+                type="submit"
+                variant="contained"
+                disabled={formik.isSubmitting}
+              >
+                {T.translate("general.save")}
+              </Button>
+            </Box>
+          </Box>
+        </FormikProvider>
+      )}
+    </div>
+  );
+};
 
 const mapStateToProps = ({ currentSummitState, summitDocState }) => ({
   currentSummit: currentSummitState.currentSummit,
diff --git a/src/pages/summitdocs/summitdoc-list-page.js b/src/pages/summitdocs/summitdoc-list-page.js
index cfad0996b..b8e14c3fd 100644
--- a/src/pages/summitdocs/summitdoc-list-page.js
+++ b/src/pages/summitdocs/summitdoc-list-page.js
@@ -9,175 +9,138 @@
  * 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 React, { useEffect } from "react";
 import { connect } from "react-redux";
 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 Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import GridToolbar from "../../components/mui/grid-toolbar";
 import { getSummitById } from "../../actions/summit-actions";
 import {
   getSummitDocs,
   deleteSummitDoc
 } from "../../actions/summitdoc-actions";
+import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
+
+const SummitDocListPage = ({
+  currentSummit,
+  summitDocs,
+  currentPage,
+  perPage,
+  term,
+  order,
+  orderDir,
+  totalSummitDocs,
+  history,
+  getSummitDocs,
+  deleteSummitDoc
+}) => {
+  useEffect(() => {
+    if (currentSummit) {
+      getSummitDocs(term, currentPage, perPage, order, orderDir);
+    }
+  }, [currentSummit]);
 
-class SummitDocListPage extends React.Component {
-  constructor(props) {
-    super(props);
+  const handleEdit = (row) => {
+    history.push(`/app/summits/${currentSummit.id}/summitdocs/${row.id}`);
+  };
 
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handlePageChange = this.handlePageChange.bind(this);
-    this.handleSort = this.handleSort.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleNew = this.handleNew.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-  }
+  const handlePageChange = (page) => {
+    getSummitDocs(term, page, perPage, order, orderDir);
+  };
 
-  componentDidMount() {
-    const { currentSummit } = this.props;
-    if (currentSummit) {
-      this.props.getSummitDocs();
-    }
-  }
-
-  handleEdit(summitdoc_id) {
-    const { currentSummit, history } = this.props;
-    history.push(`/app/summits/${currentSummit.id}/summitdocs/${summitdoc_id}`);
-  }
-
-  handlePageChange(page) {
-    const { term, order, orderDir, perPage } = this.props;
-    this.props.getSummitDocs(term, page, perPage, order, orderDir);
-  }
-
-  handleSort(index, key, dir, func) {
-    const { term, page, perPage } = this.props;
-    this.props.getSummitDocs(term, page, perPage, key, dir);
-  }
-
-  handleSearch(term) {
-    const { order, orderDir, page, perPage } = this.props;
-    this.props.getSummitDocs(term, page, perPage, order, orderDir);
-  }
-
-  handleNew(ev) {
-    const { currentSummit, history } = this.props;
+  const handlePerPageChange = (newPerPage) => {
+    getSummitDocs(term, DEFAULT_CURRENT_PAGE, newPerPage, order, orderDir);
+  };
+
+  const handleSort = (key, dir) => {
+    getSummitDocs(term, currentPage, perPage, key, dir);
+  };
+
+  const handleSearch = (newTerm) => {
+    getSummitDocs(newTerm, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
+  };
+
+  const handleNew = (ev) => {
+    ev.preventDefault();
     history.push(`/app/summits/${currentSummit.id}/summitdocs/new`);
-  }
-
-  handleDelete(summitDocId) {
-    const { deleteSummitDoc, summitDocs } = this.props;
-    let summitDoc = summitDocs.find((s) => s.id === summitDocId);
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: T.translate("summitdoc.delete_warning") + " " + summitDoc.label,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then(function (result) {
-      if (result.value) {
-        deleteSummitDoc(summitDocId);
-      }
-    });
-  }
-
-  render() {
-    const {
-      currentSummit,
-      summitDocs,
-      lastPage,
-      currentPage,
-      term,
-      order,
-      orderDir,
-      totalSummitDocs
-    } = this.props;
-
-    const columns = [
-      { columnKey: "id", value: T.translate("general.id"), sortable: true },
-      {
-        columnKey: "label",
-        value: T.translate("summitdoc.label"),
-        sortable: true
-      },
-      { columnKey: "description", value: T.translate("summitdoc.description") },
-      {
-        columnKey: "event_types_string",
-        value: T.translate("summitdoc.event_types")
-      }
-    ];
-
-    const table_options = {
-      sortCol: order,
-      sortDir: orderDir,
-      actions: {
-        edit: { onClick: this.handleEdit },
-        delete: { onClick: this.handleDelete }
-      }
-    };
-
-    if (!currentSummit.id) return <div />;
-
-    return (
-      <div className="container">
-        <h3>
-          {" "}
-          {T.translate("summitdoc.list")} ({totalSummitDocs})
-        </h3>
-        <div className={"row"}>
-          <div className={"col-md-6"}>
-            <FreeTextSearch
-              value={term}
-              placeholder={T.translate("summitdoc.placeholders.search")}
-              onSearch={this.handleSearch}
-            />
-          </div>
-          <div className="col-md-2 text-right">
-            <button
-              className="btn btn-primary right-space"
-              onClick={this.handleNew}
-            >
-              {T.translate("summitdoc.add")}
-            </button>
-          </div>
+  };
+
+  const columns = [
+    { columnKey: "id", header: T.translate("general.id"), sortable: true },
+    {
+      columnKey: "label",
+      header: T.translate("summitdoc.label"),
+      sortable: true
+    },
+    {
+      columnKey: "description",
+      header: T.translate("summitdoc.description")
+    },
+    {
+      columnKey: "selection_plan",
+      header: T.translate("summitdoc.selection_plan")
+    },
+    {
+      columnKey: "event_types_string",
+      header: T.translate("summitdoc.event_types")
+    }
+  ];
+
+  const tableOptions = { sortCol: order, sortDir: orderDir };
+
+  if (!currentSummit.id) return <div />;
+
+  return (
+    <div className="container">
+      <h3>
+        {" "}
+        {T.translate("summitdoc.list")} ({totalSummitDocs})
+      </h3>
+      <GridToolbar
+        searchProps={{
+          term,
+          onSearch: handleSearch,
+          placeholder: T.translate("summitdoc.placeholders.search")
+        }}
+      >
+        <Button variant="contained" onClick={handleNew} startIcon={<AddIcon />}>
+          {T.translate("summitdoc.add")}
+        </Button>
+      </GridToolbar>
+
+      {summitDocs.length === 0 && (
+        <div className="no-items">{T.translate("summitdoc.no_items")}</div>
+      )}
+
+      {summitDocs.length > 0 && (
+        <div>
+          <MuiTable
+            options={tableOptions}
+            data={summitDocs}
+            columns={columns}
+            perPage={perPage}
+            currentPage={currentPage}
+            totalRows={totalSummitDocs}
+            onPageChange={handlePageChange}
+            onPerPageChange={handlePerPageChange}
+            onSort={handleSort}
+            onEdit={handleEdit}
+            onDelete={deleteSummitDoc}
+            getName={(row) => row.label}
+            deleteDialogBody={(name) =>
+              `${T.translate("summitdoc.delete_warning")} ${name}`
+            }
+            confirmButtonColor="error"
+          />
         </div>
-
-        {summitDocs.length === 0 && (
-          <div className="no-items">{T.translate("summitdoc.no_items")}</div>
-        )}
-
-        {summitDocs.length > 0 && (
-          <div>
-            <Table
-              options={table_options}
-              data={summitDocs}
-              columns={columns}
-              onSort={this.handleSort}
-            />
-            <Pagination
-              bsSize="medium"
-              prev
-              next
-              first
-              last
-              ellipsis
-              boundaryLinks
-              maxButtons={10}
-              items={lastPage}
-              activePage={currentPage}
-              onSelect={this.handlePageChange}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
+      )}
+    </div>
+  );
+};
 
 const mapStateToProps = ({ currentSummitState, summitDocListState }) => ({
   currentSummit: currentSummitState.currentSummit,
diff --git a/src/reducers/summitdoc/summitdoc-list-reducer.js b/src/reducers/summitdoc/summitdoc-list-reducer.js
index d07ba9a8a..58358817c 100644
--- a/src/reducers/summitdoc/summitdoc-list-reducer.js
+++ b/src/reducers/summitdoc/summitdoc-list-reducer.js
@@ -9,16 +9,16 @@
  * 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 { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
+import T from "i18n-react/dist/i18n-react";
 import {
   RECEIVE_SUMMITDOCS,
   REQUEST_SUMMITDOCS,
   SUMMITDOC_DELETED
 } from "../../actions/summitdoc-actions";
-
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
-import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 
 const DEFAULT_STATE = {
   summitDocs: [],
@@ -39,32 +39,37 @@ const summitDocListReducer = (state = DEFAULT_STATE, action) => {
       return DEFAULT_STATE;
     }
     case REQUEST_SUMMITDOCS: {
-      let { order, orderDir, term } = payload;
+      const { order, orderDir, term, currentPage, perPage } = payload;
 
-      return { ...state, order, orderDir, term };
+      return { ...state, order, orderDir, term, currentPage, perPage };
     }
     case RECEIVE_SUMMITDOCS: {
-      let { total, last_page, current_page } = payload.response;
-      let summitDocs = payload.response.data.map((s) => {
-        return {
-          id: s.id,
-          name: s.name,
-          label: s.label,
-          description: s.description,
-          event_types_string: s.event_types.map((et) => et.name).join(", ")
-        };
-      });
+      const {
+        total: totalSummitDocs,
+        last_page: lastPage,
+        current_page: currentPage
+      } = payload.response;
+      const summitDocs = payload.response.data.map((s) => ({
+        id: s.id,
+        name: s.name,
+        label: s.label,
+        description: s.description,
+        event_types_string: s.show_always
+          ? T.translate("summitdoc.all_types")
+          : s.event_types.map((et) => et.name).join(", "),
+        selection_plan: s.selection_plan?.name
+      }));
 
       return {
         ...state,
-        summitDocs: summitDocs,
-        currentPage: current_page,
-        totalSummitDocs: total,
-        lastPage: last_page
+        summitDocs,
+        currentPage,
+        totalSummitDocs,
+        lastPage
       };
     }
     case SUMMITDOC_DELETED: {
-      let { summitDocId } = payload;
+      const { summitDocId } = payload;
       return {
         ...state,
         summitDocs: state.summitDocs.filter((s) => s.id !== summitDocId)