diff --git a/src/actions/__tests__/selection-plan-actions.test.js b/src/actions/__tests__/selection-plan-actions.test.js
new file mode 100644
index 000000000..a67e63e66
--- /dev/null
+++ b/src/actions/__tests__/selection-plan-actions.test.js
@@ -0,0 +1,107 @@
+/**
+ * @jest-environment jsdom
+ */
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import flushPromises from "flush-promises";
+import {
+  postRequest,
+  putRequest
+} from "openstack-uicore-foundation/lib/utils/actions";
+import { saveSelectionPlan } from "../selection-plan-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"),
+  postRequest: jest.fn(),
+  putRequest: jest.fn()
+}));
+
+jest.mock("../marketing-actions", () => ({
+  saveMarketingSetting: jest.fn()
+}));
+
+const requestMock =
+  (requestActionCreator, receiveActionCreator) => () => (dispatch) => {
+    if (requestActionCreator && typeof requestActionCreator === "function") {
+      dispatch(requestActionCreator({}));
+    }
+    return new Promise((resolve) => {
+      if (typeof receiveActionCreator === "function") {
+        dispatch(receiveActionCreator({ response: { id: 1 } }));
+      } else {
+        dispatch(receiveActionCreator);
+      }
+      resolve({ response: { id: 1 } });
+    });
+  };
+
+const storeState = {
+  currentSummitState: { currentSummit: { id: 1 } }
+};
+
+describe("saveSelectionPlan", () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+
+  beforeEach(() => {
+    jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN");
+    postRequest.mockImplementation(requestMock);
+    putRequest.mockImplementation(requestMock);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe("create path (entity has no id)", () => {
+    it("returns a Promise that resolves with the response payload", async () => {
+      const store = mockStore(storeState);
+      const result = store.dispatch(
+        saveSelectionPlan({ name: "CFP 2026", is_enabled: true })
+      );
+      expect(result).toBeInstanceOf(Promise);
+      await expect(result).resolves.toEqual({ id: 1 });
+    });
+
+    it("dispatches SELECTION_PLAN_ADDED then STOP_LOADING on success", async () => {
+      const store = mockStore(storeState);
+      store.dispatch(saveSelectionPlan({ name: "CFP 2026", is_enabled: true }));
+      await flushPromises();
+
+      const actionTypes = store.getActions().map((a) => a.type);
+      expect(actionTypes).toContain("SELECTION_PLAN_ADDED");
+      expect(actionTypes).toContain("STOP_LOADING");
+      expect(actionTypes.indexOf("STOP_LOADING")).toBeGreaterThan(
+        actionTypes.indexOf("SELECTION_PLAN_ADDED")
+      );
+    });
+  });
+
+  describe("update path (entity has id)", () => {
+    it("returns a Promise that resolves with the response payload", async () => {
+      const store = mockStore(storeState);
+      const result = store.dispatch(
+        saveSelectionPlan({ id: 1, name: "CFP 2026", is_enabled: true })
+      );
+      expect(result).toBeInstanceOf(Promise);
+      await expect(result).resolves.toEqual({ id: 1 });
+    });
+
+    it("dispatches SELECTION_PLAN_UPDATED then STOP_LOADING on success", async () => {
+      const store = mockStore(storeState);
+      store.dispatch(
+        saveSelectionPlan({ id: 1, name: "CFP 2026", is_enabled: true })
+      );
+      await flushPromises();
+
+      const actionTypes = store.getActions().map((a) => a.type);
+      expect(actionTypes).toContain("SELECTION_PLAN_UPDATED");
+      expect(actionTypes).toContain("STOP_LOADING");
+      expect(actionTypes.indexOf("STOP_LOADING")).toBeGreaterThan(
+        actionTypes.indexOf("SELECTION_PLAN_UPDATED")
+      );
+    });
+  });
+});
diff --git a/src/actions/selection-plan-actions.js b/src/actions/selection-plan-actions.js
index e0e48ae77..669a138f6 100644
--- a/src/actions/selection-plan-actions.js
+++ b/src/actions/selection-plan-actions.js
@@ -12,7 +12,7 @@
  * */
 
 import T from "i18n-react/dist/i18n-react";
-import debounce from "lodash/debounce"
+import debounce from "lodash/debounce";
 import {
   getRequest,
   putRequest,
@@ -22,7 +22,6 @@ import {
   stopLoading,
   startLoading,
   showMessage,
-  showSuccessMessage,
   authErrorHandler,
   postFile
 } from "openstack-uicore-foundation/lib/utils/actions";
@@ -35,7 +34,13 @@ import {
   fetchErrorHandler
 } from "../utils/methods";
 import { saveMarketingSetting } from "./marketing-actions";
-import { DEBOUNCE_WAIT, DEFAULT_PER_PAGE } from "../utils/constants";
+import { snackbarSuccessHandler } from "./base-actions";
+import {
+  DEBOUNCE_WAIT,
+  DEFAULT_CURRENT_PAGE,
+  DEFAULT_ORDER_DIR,
+  DEFAULT_PER_PAGE
+} from "../utils/constants";
 
 URI.escapeQuerySpace = false;
 
@@ -66,7 +71,13 @@ export const SELECTION_PLAN_PROGRESS_FLAG_ORDER_UPDATED =
   "SELECTION_PLAN_PROGRESS_FLAG_ORDER_UPDATED";
 
 export const getSelectionPlans =
-  (term = "", page = 1, order = "id", orderDir = 1) =>
+  (
+    term = "",
+    page = DEFAULT_CURRENT_PAGE,
+    perPage = DEFAULT_PER_PAGE,
+    order = "id",
+    orderDir = DEFAULT_ORDER_DIR
+  ) =>
   async (dispatch, getState) => {
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
@@ -84,7 +95,7 @@ export const getSelectionPlans =
       access_token: accessToken,
       relations: "none",
       page,
-      per_page: DEFAULT_PER_PAGE,
+      per_page: perPage,
       order: `${orderDir === 1 ? "" : "-"}${order}`
     };
 
@@ -93,10 +104,11 @@ export const getSelectionPlans =
     }
 
     return getRequest(
-      null,
+      createAction(REQUEST_SELECTION_PLANS),
       createAction(RECEIVE_SELECTION_PLANS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/selection-plans`,
-      authErrorHandler
+      authErrorHandler,
+      { order, orderDir, page, perPage, term }
     )(params)(dispatch).then(async () => {
       dispatch(stopLoading());
     });
@@ -151,15 +163,19 @@ export const saveSelectionPlan = (entity) => async (dispatch, getState) => {
       normalizedEntity,
       authErrorHandler,
       entity
-    )({})(dispatch).then((payload) => {
-      dispatch(stopLoading());
-      dispatch(
-        showSuccessMessage(
-          T.translate("edit_selection_plan.selection_plan_saved")
-        )
-      );
-      return payload.response;
-    });
+    )({})(dispatch)
+      .then((payload) => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.done"),
+            html: T.translate("edit_selection_plan.selection_plan_saved")
+          })
+        );
+        return payload.response;
+      })
+      .finally(() => {
+        dispatch(stopLoading());
+      });
   }
   return postRequest(
     createAction(UPDATE_SELECTION_PLAN),
@@ -168,15 +184,19 @@ export const saveSelectionPlan = (entity) => async (dispatch, getState) => {
     normalizedEntity,
     authErrorHandler,
     entity
-  )({})(dispatch).then((payload) => {
-    dispatch(stopLoading());
-    dispatch(
-      showSuccessMessage(
-        T.translate("edit_selection_plan.selection_plan_created")
-      )
-    );
-    return payload.response;
-  });
+  )({})(dispatch)
+    .then((payload) => {
+      dispatch(
+        snackbarSuccessHandler({
+          title: T.translate("general.done"),
+          html: T.translate("edit_selection_plan.selection_plan_created")
+        })
+      );
+      return payload.response;
+    })
+    .finally(() => {
+      dispatch(stopLoading());
+    });
 };
 
 export const deleteSelectionPlan =
@@ -733,9 +753,10 @@ export const assignExtraQuestion2SelectionPlan =
     )({})(dispatch).then(() => {
       dispatch(stopLoading());
       dispatch(
-        showSuccessMessage(
-          T.translate("edit_selection_plan.selection_plan_saved")
-        )
+        snackbarSuccessHandler({
+          title: T.translate("general.done"),
+          html: T.translate("edit_selection_plan.selection_plan_saved")
+        })
       );
     });
   };
@@ -837,9 +858,12 @@ export const importAllowedMembersCSV =
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
       dispatch(
-        showSuccessMessage(
-          T.translate("edit_selection_plan.import_allowed_members_success")
-        )
+        snackbarSuccessHandler({
+          title: T.translate("general.done"),
+          html: T.translate(
+            "edit_selection_plan.import_allowed_members_success"
+          )
+        })
       );
     });
   };
@@ -882,9 +906,10 @@ export const assignProgressFlag2SelectionPlan =
     )({})(dispatch).then(() => {
       dispatch(stopLoading());
       dispatch(
-        showSuccessMessage(
-          T.translate("edit_selection_plan.selection_plan_saved")
-        )
+        snackbarSuccessHandler({
+          title: T.translate("general.done"),
+          html: T.translate("edit_selection_plan.selection_plan_saved")
+        })
       );
     });
   };
diff --git a/src/components/forms/__tests__/selection-plan-form.test.js b/src/components/forms/__tests__/selection-plan-form.test.js
new file mode 100644
index 000000000..9dab5e5b4
--- /dev/null
+++ b/src/components/forms/__tests__/selection-plan-form.test.js
@@ -0,0 +1,258 @@
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import SelectionPlanForm from "../selection-plan-form";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("openstack-uicore-foundation/lib/components", () => ({
+  Input: ({ id, value, onChange }) => (
+    <input id={id} value={value} onChange={onChange} />
+  ),
+  SimpleLinkList: () => null,
+  SortableTable: () => null,
+  Table: () => null,
+  UploadInput: () => null
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => ({
+    __esModule: true,
+    default: () => null
+  })
+);
+
+jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+jest.mock("../../inputs/email-template-input", () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+jest.mock("../../inputs/import-modal", () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+jest.mock("../../inputs/many-2-many-dropdown", () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+jest.mock("../../../actions/selection-plan-actions", () => ({
+  querySelectionPlanExtraQuestions: jest.fn()
+}));
+
+jest.mock("../../../actions/track-chair-actions", () => ({
+  querySummitProgressFlags: jest.fn()
+}));
+
+jest.mock("../../../reducers/selection_plans/selection-plan-reducer", () => ({
+  DEFAULT_ALLOWED_EDITABLE_QUESTIONS: [],
+  DEFAULT_ALLOWED_QUESTIONS: [],
+  DEFAULT_CFP_PRESENTATION_EDITION_TABS: []
+}));
+
+const defaultEntity = {
+  id: 0,
+  name: "",
+  is_enabled: false,
+  is_hidden: false,
+  allow_proposed_schedules: false,
+  submission_begin_date: null,
+  submission_end_date: null,
+  voting_begin_date: null,
+  voting_end_date: null,
+  selection_begin_date: null,
+  selection_end_date: null,
+  track_chair_rating_types: [],
+  extra_questions: [],
+  allowed_presentation_action_types: [],
+  allowed_event_types: [],
+  track_groups: [],
+  marketing_settings: {},
+  allowed_editable_questions: [],
+  allowed_questions: [],
+  cfp_presentation_edition_custom_message: "",
+  cfp_presentations_editable_allowed_status: []
+};
+
+const defaultProps = {
+  entity: defaultEntity,
+  errors: {},
+  currentSummit: { id: 1 },
+  extraQuestionsOrder: "id",
+  extraQuestionsOrderDir: 1,
+  actionTypesOrder: "id",
+  actionTypesOrderDir: 1,
+  allowedMembers: { data: [], total: 0 },
+  onSaved: jest.fn(),
+  onSavingChange: jest.fn(),
+  saveSelectionPlanSettings: jest.fn(() => Promise.resolve()),
+  onTrackGroupLink: jest.fn(),
+  onTrackGroupUnLink: jest.fn(),
+  onAddEventType: jest.fn(),
+  onDeleteEventType: jest.fn(),
+  onAddRatingType: jest.fn(),
+  onEditRatingType: jest.fn(),
+  onDeleteRatingType: jest.fn(),
+  onEditExtraQuestion: jest.fn(),
+  onDeleteExtraQuestion: jest.fn(),
+  onAddNewExtraQuestion: jest.fn(),
+  onAssignExtraQuestion2SelectionPlan: jest.fn(),
+  onAssignProgressFlag2SelectionPlan: jest.fn(),
+  onUnassignProgressFlag: jest.fn(),
+  onUpdateProgressFlagOrder: jest.fn(),
+  onUpdateRatingTypeOrder: jest.fn(),
+  updateExtraQuestionOrder: jest.fn(),
+  onImportAllowedMembers: jest.fn(),
+  onAllowedMemberAdd: jest.fn(),
+  onAllowedMemberDelete: jest.fn(),
+  onAllowedMembersPageChange: jest.fn(),
+  onAddProgressFlag: jest.fn(),
+  onEditProgressFlag: jest.fn()
+};
+
+// Mirrors the popup: form renders without a button; an external button submits
+// via the `form` attribute and tracks saving state via onSavingChange.
+const FormWithExternalButton = ({
+  onSavingChange: onSavingChangeProp,
+  ...rest
+}) => {
+  const [saving, setSaving] = React.useState(false);
+  const handleSavingChange = (s) => {
+    setSaving(s);
+    onSavingChangeProp(s);
+  };
+  return (
+    <>
+      <SelectionPlanForm {...rest} onSavingChange={handleSavingChange} />
+      <button type="submit" form="selection-plan-form" disabled={saving}>
+        general.save
+      </button>
+    </>
+  );
+};
+
+describe("SelectionPlanForm — save guard", () => {
+  let onSubmit;
+  let onSavingChange;
+
+  beforeEach(() => {
+    onSubmit = jest.fn();
+    onSavingChange = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  const renderForm = (props = {}) =>
+    render(
+      <FormWithExternalButton
+        {...defaultProps}
+        onSubmit={onSubmit}
+        onSavingChange={onSavingChange}
+        {...props}
+      />
+    );
+
+  it("disables submit and calls onSavingChange(true) while save is pending", async () => {
+    let resolveSave;
+    onSubmit.mockReturnValue(
+      new Promise((resolve) => {
+        resolveSave = resolve;
+      })
+    );
+
+    renderForm();
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "general.save" })
+      ).toBeDisabled();
+    });
+    expect(onSavingChange).toHaveBeenCalledWith(true);
+
+    await act(async () => {
+      resolveSave({ id: 1 });
+      await Promise.resolve();
+    });
+  });
+
+  it("does not re-trigger onSubmit while a save is in flight", async () => {
+    let resolveSave;
+    onSubmit.mockReturnValue(
+      new Promise((resolve) => {
+        resolveSave = resolve;
+      })
+    );
+
+    renderForm();
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "general.save" })
+      ).toBeDisabled()
+    );
+
+    // Second click on disabled button — should not fire onSubmit again
+    fireEvent.click(screen.getByRole("button", { name: "general.save" }));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      resolveSave({ id: 1 });
+      await Promise.resolve();
+    });
+  });
+
+  it("re-enables submit and calls onSavingChange(false) when onSubmit rejects", async () => {
+    onSubmit.mockImplementation(() => Promise.reject(new Error("API error")));
+
+    renderForm();
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "general.save" })
+      ).not.toBeDisabled();
+    });
+    expect(onSavingChange).toHaveBeenCalledWith(false);
+  });
+
+  it("calls saveSelectionPlanSettings then onSaved on successful submit", async () => {
+    const savedEntity = { id: 42 };
+    const onSubmitMock = jest.fn().mockResolvedValue(savedEntity);
+    const onSavedMock = jest.fn();
+    const saveSettingsMock = jest.fn().mockResolvedValue();
+
+    renderForm({
+      onSubmit: onSubmitMock,
+      onSaved: onSavedMock,
+      saveSelectionPlanSettings: saveSettingsMock
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() => {
+      expect(saveSettingsMock).toHaveBeenCalledWith(
+        defaultEntity.marketing_settings,
+        savedEntity.id
+      );
+      expect(onSavedMock).toHaveBeenCalledWith(savedEntity);
+    });
+  });
+});
diff --git a/src/components/forms/selection-plan-form.js b/src/components/forms/selection-plan-form.js
index eae94c098..fe3e6a7f5 100644
--- a/src/components/forms/selection-plan-form.js
+++ b/src/components/forms/selection-plan-form.js
@@ -11,39 +11,36 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
+import { useFormik, FormikProvider } from "formik";
+import moment from "moment-timezone";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import {
   queryTrackGroups,
-  queryEventTypes,
-  queryMembers
+  queryEventTypes
 } from "openstack-uicore-foundation/lib/utils/query-actions";
-import {
-  Input,
-  DateTimePicker,
-  SimpleLinkList,
-  SortableTable,
-  Panel,
-  Table,
-  Dropdown
-} from "openstack-uicore-foundation/lib/components";
+import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
+import MuiFormikDatepicker from "openstack-uicore-foundation/lib/components/mui/formik-inputs/datepicker";
+import SortableTable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import Table from "openstack-uicore-foundation/lib/components/mui/table";
+import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
 import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
-import Switch from "react-switch";
-import { Pagination } from "react-bootstrap";
-import {
-  isEmpty,
-  scrollToError,
-  shallowEqual,
-  stripTags
-} from "../../utils/methods";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Grid2 from "@mui/material/Grid2";
+import MuiSwitch from "@mui/material/Switch";
+import Pagination from "@mui/material/Pagination";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import TextField from "@mui/material/TextField";
+import { scrollToError, stripTags } from "../../utils/methods";
 import EmailTemplateInput from "../inputs/email-template-input";
 import ImportModal from "../inputs/import-modal";
-import {
-  MILLISECONDS_TO_SECONDS,
-  PresentationTypeClassName
-} from "../../utils/constants";
+import { PresentationTypeClassName } from "../../utils/constants";
 import Many2ManyDropDown from "../inputs/many-2-many-dropdown";
 import { querySelectionPlanExtraQuestions } from "../../actions/selection-plan-actions";
 import { querySummitProgressFlags } from "../../actions/track-chair-actions";
@@ -52,1425 +49,1409 @@ import {
   DEFAULT_ALLOWED_QUESTIONS,
   DEFAULT_CFP_PRESENTATION_EDITION_TABS
 } from "../../reducers/selection_plans/selection-plan-reducer";
-import history from "../../history";
-
-class SelectionPlanForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors,
-      showSection: "main",
-      newMemberEmail: "",
-      showImportModal: false,
-      importFile: null
-    };
-
-    this.handleTrackGroupLink = this.handleTrackGroupLink.bind(this);
-    this.handleTrackGroupUnLink = this.handleTrackGroupUnLink.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleEditExtraQuestion = this.handleEditExtraQuestion.bind(this);
-    this.handleDeleteExtraQuestion = this.handleDeleteExtraQuestion.bind(this);
-    this.handleNewExtraQuestion = this.handleNewExtraQuestion.bind(this);
-    this.handleDeleteEventType = this.handleDeleteEventType.bind(this);
-    this.handleAddEventType = this.handleAddEventType.bind(this);
-    this.handleAddRatingType = this.handleAddRatingType.bind(this);
-    this.handleDeleteRatingType = this.handleDeleteRatingType.bind(this);
-    this.handleEditRatingType = this.handleEditRatingType.bind(this);
-    this.handleRemoveProgressFlag = this.handleRemoveProgressFlag.bind(this);
-    this.toggleSection = this.toggleSection.bind(this);
-    this.handleNotificationEmailTemplateChange =
-      this.handleNotificationEmailTemplateChange.bind(this);
-    this.fetchSummitSelectionPlanExtraQuestions =
-      this.fetchSummitSelectionPlanExtraQuestions.bind(this);
-    this.fetchMembers = this.fetchMembers.bind(this);
-    this.linkSummitSelectionPlanExtraQuestion =
-      this.linkSummitSelectionPlanExtraQuestion.bind(this);
-    this.fetchSummitPresentationActionTypes =
-      this.fetchSummitPresentationActionTypes.bind(this);
-    this.linkSummitProgressFlag = this.linkSummitProgressFlag.bind(this);
-    this.handleAddAllowedMember = this.handleAddAllowedMember.bind(this);
-    this.handleImportAllowedMembers =
-      this.handleImportAllowedMembers.bind(this);
-    this.handleDeleteAllowedMember = this.handleDeleteAllowedMember.bind(this);
-    this.handleAllowedMembersPageChange =
-      this.handleAllowedMembersPageChange.bind(this);
-    this.handleOnSwitchChange = this.handleOnSwitchChange.bind(this);
-  }
-
-  fetchSummitSelectionPlanExtraQuestions(input, callback) {
-    const { currentSummit } = this.props;
-
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-    querySelectionPlanExtraQuestions(currentSummit.id, input, callback);
-  }
-
-  fetchMembers(input, callback) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
-    queryMembers(input, callback);
-  }
-
-  linkSummitSelectionPlanExtraQuestion(question) {
-    const { currentSummit } = this.props;
-    this.props.onAssignExtraQuestion2SelectionPlan(
-      currentSummit.id,
-      this.state.entity.id,
-      question.id
-    );
-  }
-
-  handleEditExtraQuestion(questionId) {
-    this.props.onEditExtraQuestion(questionId);
-  }
 
-  handleDeleteExtraQuestion(questionId) {
-    this.props.onDeleteExtraQuestion(questionId);
-  }
-
-  handleNewExtraQuestion() {
-    this.props.onAddNewExtraQuestion();
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
+const DATE_FIELDS = [
+  "submission_begin_date",
+  "submission_end_date",
+  "submission_lock_down_presentation_status_date",
+  "voting_begin_date",
+  "voting_end_date",
+  "selection_begin_date",
+  "selection_end_date"
+];
+
+const buildInitialValues = (entity, timezone) => {
+  const values = { ...entity };
+  DATE_FIELDS.forEach((field) => {
+    values[field] = entity[field]
+      ? epochToMomentTimeZone(entity[field], timezone)
+      : null;
+  });
+  return values;
+};
+
+const TAB_SX = {
+  fontSize: "1.4rem",
+  lineHeight: "1.8rem",
+  minHeight: "36px",
+  px: 2,
+  py: 1
+};
+
+const SelectionPlanForm = (props) => {
+  const {
+    entity: propsEntity,
+    errors: propsErrors,
+    currentSummit,
+    extraQuestionsOrderDir,
+    extraQuestionsOrder,
+    actionTypesOrderDir,
+    actionTypesOrder,
+    allowedMembers,
+    onSaved,
+    onSavingChange,
+    onSubmit,
+    saveSelectionPlanSettings,
+    onTrackGroupLink,
+    onTrackGroupUnLink,
+    onAddEventType,
+    onDeleteEventType,
+    onAddRatingType,
+    onEditRatingType,
+    onDeleteRatingType,
+    onEditExtraQuestion,
+    onDeleteExtraQuestion,
+    onAddNewExtraQuestion,
+    onAssignExtraQuestion2SelectionPlan,
+    onAssignProgressFlag2SelectionPlan,
+    onUnassignProgressFlag,
+    onUpdateProgressFlagOrder,
+    onUpdateRatingTypeOrder,
+    updateExtraQuestionOrder,
+    onImportAllowedMembers,
+    onAllowedMemberAdd,
+    onAllowedMemberDelete,
+    onAllowedMembersPageChange
+  } = props;
+
+  const [activeTab, setActiveTab] = useState("main");
+  const [newMemberEmail, setNewMemberEmail] = useState("");
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [trackGroupSelection, setTrackGroupSelection] = useState(null);
+  const [trackGroupSearchOptions, setTrackGroupSearchOptions] = useState([]);
+  const [eventTypeSelection, setEventTypeSelection] = useState(null);
+  const [eventTypeSearchOptions, setEventTypeSearchOptions] = useState([]);
+
+  const handleFormikSubmit = (values) => {
+    if (onSavingChange) onSavingChange(true);
+
+    const normalized = { ...values };
+    DATE_FIELDS.forEach((field) => {
+      if (values[field]) {
+        normalized[field] = moment
+          .tz(values[field], currentSummit.time_zone_id)
+          .unix();
+      } else {
+        normalized[field] = 0;
+      }
+    });
 
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
+    return onSubmit(normalized)
+      .then((e) => {
+        if (!e?.id) return null;
+        return saveSelectionPlanSettings(values.marketing_settings, e.id).then(
+          () => {
+            if (onSaved) onSaved(e);
+          }
+        );
+      })
+      .catch(() => {
+        // errors are surfaced via error handler
+      })
+      .finally(() => {
+        if (onSavingChange) onSavingChange(false);
+      });
+  };
+
+  const formik = useFormik({
+    initialValues: buildInitialValues(propsEntity, currentSummit.time_zone_id),
+    onSubmit: handleFormikSubmit,
+    enableReinitialize: true,
+    validateOnChange: false
+  });
+
+  useEffect(() => {
+    scrollToError(propsErrors);
+    if (propsErrors && Object.keys(propsErrors).length > 0) {
+      formik.setErrors(propsErrors);
     }
+  }, [propsErrors]);
 
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
+  // Reset tab if allowed_members becomes unavailable
+  useEffect(() => {
+    if (formik.values.is_hidden && activeTab === "allowed_members") {
+      setActiveTab("main");
     }
+  }, [formik.values.is_hidden]);
 
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  const hasErrors = (field) => formik.errors[field] ?? "";
 
-  handleChange(ev) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
+  const handleChange = (ev) => {
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
       value = ev.target.checked;
     }
 
-    if (ev.target.type === "datetime") {
-      value = value.valueOf() / MILLISECONDS_TO_SECONDS;
-    }
-
     if (id.startsWith("cfp_")) {
-      if (!newEntity.marketing_settings.hasOwnProperty(id)) {
-        newEntity.marketing_settings[id] = { value: "" };
-      }
-      newEntity.marketing_settings[id].value = value;
+      const current = formik.values.marketing_settings[id] || {};
+      formik.setFieldValue(`marketing_settings.${id}`, { ...current, value });
     } else {
-      newErrors[id] = "";
-      newEntity[id] = value;
-    }
-
-    this.setState({ entity: newEntity, errors: newErrors });
-  }
-
-  handleNotificationEmailTemplateChange(ev) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
-    const { value, id } = ev.target;
-
-    newErrors[id] = "";
-    newEntity[id] = value;
-    this.setState({ ...this.state, entity: newEntity, errors: newErrors });
-  }
-
-  handleSubmit(ev) {
-    ev.preventDefault();
-
-    const entity = { ...this.state.entity };
-    const { currentSummit } = this.props;
-
-    this.props.onSubmit(this.state.entity).then((e) => {
-      this.props
-        .saveSelectionPlanSettings(entity.marketing_settings, e.id)
-        .then(() => {
-          if (!entity.id)
-            history.push(
-              `/app/summits/${currentSummit.id}/selection-plans/${e.id}`
-            );
-        });
-    });
-  }
-
-  hasErrors(field) {
-    const { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
+      formik.setFieldValue(id, value);
     }
+  };
+
+  const handleNotificationEmailTemplateChange = (ev) => {
+    formik.setFieldValue(ev.target.id, ev.target.value);
+  };
+
+  const handleTrackGroupLink = (value) =>
+    onTrackGroupLink(formik.values.id, value);
+  const handleTrackGroupUnLink = (valueId) =>
+    onTrackGroupUnLink(formik.values.id, valueId);
+  const handleAddEventType = (value) => onAddEventType(formik.values.id, value);
+  const handleDeleteEventType = (valueId) =>
+    onDeleteEventType(formik.values.id, valueId);
+  const handleAddRatingType = () => onAddRatingType();
+  const handleEditRatingType = (ratingTypeId) => onEditRatingType(ratingTypeId);
+  const handleDeleteRatingType = (ratingTypeId) =>
+    onDeleteRatingType(ratingTypeId);
+  const handleEditExtraQuestion = (questionId) =>
+    onEditExtraQuestion(questionId);
+  const handleDeleteExtraQuestion = (questionId) =>
+    onDeleteExtraQuestion(questionId);
+  const handleNewExtraQuestion = () => onAddNewExtraQuestion();
+  const handleRemoveProgressFlag = (progressFlagId) =>
+    onUnassignProgressFlag(progressFlagId);
+  const handleDeleteAllowedMember = (valueId) =>
+    onAllowedMemberDelete(formik.values.id, valueId);
+  const handleAllowedMembersPageChange = (page) =>
+    onAllowedMembersPageChange(formik.values.id, page);
+
+  const handleAddAllowedMember = () =>
+    onAllowedMemberAdd(formik.values.id, newMemberEmail);
+
+  const handleImportAllowedMembers = (importFile) => {
+    if (importFile) onImportAllowedMembers(formik.values.id, importFile);
+    setShowImportModal(false);
+  };
+
+  const fetchSummitSelectionPlanExtraQuestions = (input, callback) => {
+    if (!input) return Promise.resolve({ options: [] });
+    querySelectionPlanExtraQuestions(currentSummit.id, input, callback);
+  };
 
-    return "";
-  }
-
-  handleTrackGroupLink(value) {
-    const { entity } = this.state;
-    this.props.onTrackGroupLink(entity.id, value);
-  }
-
-  handleTrackGroupUnLink(valueId) {
-    const { entity } = this.state;
-    this.props.onTrackGroupUnLink(entity.id, valueId);
-  }
-
-  handleAddEventType(value) {
-    const { entity } = this.state;
-    this.props.onAddEventType(entity.id, value);
-  }
-
-  handleDeleteEventType(valueId) {
-    const { entity } = this.state;
-    this.props.onDeleteEventType(entity.id, valueId);
-  }
-
-  handleAddRatingType() {
-    this.props.onAddRatingType();
-  }
-
-  handleEditRatingType(ratingTypeId) {
-    this.props.onEditRatingType(ratingTypeId);
-  }
-
-  handleDeleteRatingType(ratingTypeId) {
-    this.props.onDeleteRatingType(ratingTypeId);
-  }
-
-  fetchSummitPresentationActionTypes(input, callback) {
-    const { currentSummit } = this.props;
+  const linkSummitSelectionPlanExtraQuestion = (question) => {
+    onAssignExtraQuestion2SelectionPlan(
+      currentSummit.id,
+      formik.values.id,
+      question.id
+    );
+  };
 
-    if (!input) {
-      return Promise.resolve({ options: [] });
-    }
+  const fetchSummitPresentationActionTypes = (input, callback) => {
+    if (!input) return Promise.resolve({ options: [] });
     querySummitProgressFlags(currentSummit.id, input, callback);
-  }
+  };
 
-  linkSummitProgressFlag(progressFlag) {
-    const { currentSummit } = this.props;
-    this.props.onAssignProgressFlag2SelectionPlan(
+  const linkSummitProgressFlag = (progressFlag) => {
+    onAssignProgressFlag2SelectionPlan(
       currentSummit.id,
-      this.state.entity.id,
+      formik.values.id,
       progressFlag.id
     );
-  }
+  };
 
-  handleRemoveProgressFlag(progressFlagId) {
-    this.props.onUnassignProgressFlag(progressFlagId);
-  }
+  const handleOnSwitchChange = (setting, value) => {
+    const current = formik.values.marketing_settings[setting] || {};
+    formik.setFieldValue(`marketing_settings.${setting}`, {
+      ...current,
+      value
+    });
+  };
 
-  handleImportAllowedMembers(importFile) {
-    if (importFile) {
-      this.props.onImportAllowedMembers(this.state.entity.id, importFile);
+  const trackGroupsColumns = [
+    { columnKey: "name", header: T.translate("edit_selection_plan.name") },
+    {
+      columnKey: "description",
+      header: T.translate("edit_selection_plan.description")
     }
-    this.setState({ ...this.state, showImportModal: false });
-  }
-
-  handleAddAllowedMember() {
-    const { entity, newMemberEmail } = this.state;
-    this.props.onAllowedMemberAdd(entity.id, newMemberEmail);
-  }
-
-  handleDeleteAllowedMember(valueId) {
-    const { entity } = this.state;
-    this.props.onAllowedMemberDelete(entity.id, valueId);
-  }
-
-  handleAllowedMembersPageChange(page) {
-    const { entity } = this.state;
-    this.props.onAllowedMembersPageChange(entity.id, page);
-  }
-
-  toggleSection(section) {
-    const { showSection } = this.state;
-    const newShowSection = showSection === section ? "main" : section;
-    this.setState({ showSection: newShowSection });
-  }
-
-  handleOnSwitchChange(setting, value) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
-
-    if (!newEntity.marketing_settings.hasOwnProperty(setting)) {
-      newEntity.marketing_settings[setting] = { value: "" };
+  ];
+
+  const trackGroupsOptions = {};
+
+  const eventTypesColumns = [
+    { columnKey: "name", header: T.translate("edit_selection_plan.name") }
+  ];
+
+  const eventTypesOptions = {};
+
+  const extraQuestionColumns = [
+    {
+      columnKey: "type",
+      header: T.translate("order_extra_question_list.question_type")
+    },
+    {
+      columnKey: "label",
+      header: T.translate("order_extra_question_list.visible_question")
+    },
+    {
+      columnKey: "name",
+      header: T.translate("order_extra_question_list.question_id")
     }
+  ];
+
+  const extraQuestionsOptions = {
+    sortCol: extraQuestionsOrder,
+    sortDir: extraQuestionsOrderDir
+  };
+
+  const ratingTypesColumns = [
+    { columnKey: "name", header: T.translate("rating_type_list.name") },
+    { columnKey: "weight", header: T.translate("rating_type_list.weight") }
+  ];
+
+  const ratingTypesOptions = {};
+
+  const actionTypesColumns = [
+    { columnKey: "label", header: T.translate("progress_flags.label") }
+  ];
+
+  const actionTypesOptions = {
+    sortCol: actionTypesOrder,
+    sortDir: actionTypesOrderDir
+  };
+
+  const allowedMembersColumns = [
+    { columnKey: "id", header: T.translate("edit_selection_plan.id") },
+    { columnKey: "email", header: T.translate("edit_selection_plan.email") }
+  ];
+
+  const allowedMembersOptions = {
+    sortCol: "email",
+    sortDir: 1
+  };
+
+  const tabs = [
+    { value: "main", label: "Main" },
+    {
+      value: "track_groups",
+      label: T.translate("edit_selection_plan.track_groups")
+    },
+    {
+      value: "event_types",
+      label: T.translate("edit_selection_plan.event_types")
+    },
+    {
+      value: "extra_questions",
+      label: T.translate("edit_selection_plan.extra_questions")
+    },
+    {
+      value: "email_templates",
+      label: T.translate("edit_selection_plan.email_templates")
+    },
+    {
+      value: "track_chair_settings",
+      label: T.translate("track_chair_settings.title")
+    },
+    {
+      value: "presentation_action_types",
+      label: T.translate("edit_selection_plan.presentation_action_types")
+    },
+    ...(!formik.values.is_hidden
+      ? [
+          {
+            value: "allowed_members",
+            label: T.translate("edit_selection_plan.allowed_members")
+          }
+        ]
+      : []),
+    {
+      value: "cfp_settings",
+      label: T.translate("edit_selection_plan.cfp_settings")
+    }
+  ];
+
+  return (
+    <FormikProvider value={formik}>
+      <Box
+        id="selection-plan-form"
+        component="form"
+        className="selection-plan-form"
+        onSubmit={formik.handleSubmit}
+      >
+        <input type="hidden" id="id" value={formik.values.id} />
+
+        {formik.values.id !== 0 && (
+          <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 3 }}>
+            <Tabs
+              value={activeTab}
+              onChange={(_, val) => setActiveTab(val)}
+              variant="scrollable"
+              scrollButtons="auto"
+              sx={{
+                "& .MuiTabScrollButton-root.Mui-disabled": { display: "none" }
+              }}
+            >
+              {tabs.map((tab) => (
+                <Tab
+                  key={tab.value}
+                  value={tab.value}
+                  label={tab.label}
+                  id={`tab-${tab.value}`}
+                  aria-controls={`tabpanel-${tab.value}`}
+                  sx={TAB_SX}
+                />
+              ))}
+            </Tabs>
+          </Box>
+        )}
 
-    newEntity.marketing_settings[setting].value = value;
-
-    this.setState({ entity: newEntity, errors: newErrors });
-  }
-
-  render() {
-    const { entity, showSection, newMemberEmail, showImportModal } = this.state;
-    const {
-      currentSummit,
-      extraQuestionsOrderDir,
-      extraQuestionsOrder,
-      actionTypesOrderDir,
-      actionTypesOrder,
-      allowedMembers
-    } = this.props;
-
-    const trackGroupsColumns = [
-      { columnKey: "name", value: T.translate("edit_selection_plan.name") },
-      {
-        columnKey: "description",
-        value: T.translate("edit_selection_plan.description")
-      }
-    ];
-
-    const trackGroupsOptions = {
-      valueKey: "name",
-      labelKey: "name",
-      defaultOptions: true,
-      actions: {
-        search: (input, callback) => {
-          queryTrackGroups(currentSummit.id, input, callback);
-        },
-        delete: { onClick: this.handleTrackGroupUnLink },
-        add: { onClick: this.handleTrackGroupLink }
-      }
-    };
-
-    const eventTypesColumns = [
-      { columnKey: "name", value: T.translate("edit_selection_plan.name") }
-    ];
-
-    const eventTypesOptions = {
-      valueKey: "name",
-      labelKey: "name",
-      defaultOptions: true,
-      actions: {
-        search: (input, callback) => {
-          queryEventTypes(
-            currentSummit.id,
-            input,
-            callback,
-            PresentationTypeClassName
-          );
-        },
-        delete: { onClick: this.handleDeleteEventType },
-        add: { onClick: this.handleAddEventType }
-      }
-    };
-
-    const extraQuestionColumns = [
-      {
-        columnKey: "type",
-        value: T.translate("order_extra_question_list.question_type")
-      },
-      {
-        columnKey: "label",
-        value: T.translate("order_extra_question_list.visible_question")
-      },
-      {
-        columnKey: "name",
-        value: T.translate("order_extra_question_list.question_id")
-      }
-    ];
-
-    const extraQuestionsOptions = {
-      sortCol: extraQuestionsOrder,
-      sortDir: extraQuestionsOrderDir,
-      actions: {
-        edit: { onClick: this.handleEditExtraQuestion },
-        delete: { onClick: this.handleDeleteExtraQuestion }
-      }
-    };
-
-    const ratingTypesColumns = [
-      { columnKey: "name", value: T.translate("rating_type_list.name") },
-      { columnKey: "weight", value: T.translate("rating_type_list.weight") }
-    ];
-
-    const ratingTypesOptions = {
-      actions: {
-        edit: { onClick: this.handleEditRatingType },
-        delete: { onClick: this.handleDeleteRatingType }
-      }
-    };
-
-    const actionTypesColumns = [
-      { columnKey: "label", value: T.translate("progress_flags.label") }
-    ];
-
-    const actionTypesOptions = {
-      sortCol: actionTypesOrder,
-      sortDir: actionTypesOrderDir,
-      actions: {
-        delete: { onClick: this.handleRemoveProgressFlag }
-      }
-    };
-
-    const allowedMembersColumns = [
-      { columnKey: "id", value: T.translate("edit_selection_plan.id") },
-      { columnKey: "email", value: T.translate("edit_selection_plan.email") }
-    ];
-
-    const allowedMembersOptions = {
-      sortCol: "email",
-      sortDir: 1,
-      actions: {
-        delete: { onClick: this.handleDeleteAllowedMember }
-      }
-    };
-
-    console.log("CHECK...", entity, currentSummit);
-
-    return (
-      <form className="selection-plan-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_selection_plan.name")} *</label>
-            <Input
-              id="name"
-              className="form-control"
-              error={this.hasErrors("name")}
-              onChange={this.handleChange}
-              value={entity.name}
-            />
-          </div>
-          <div className="col-md-2 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="is_enabled"
-                checked={entity.is_enabled}
-                onChange={this.handleChange}
-                className="form-check-input"
+        {/* Main tab — always in DOM so the rich text editor is not re-initialized on tab switch */}
+        <div
+          role="tabpanel"
+          id="tabpanel-main"
+          hidden={formik.values.id !== 0 && activeTab !== "main"}
+        >
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 4 }}>
+              <label> {T.translate("edit_selection_plan.name")} *</label>
+              <Input
+                id="name"
+                className="form-control"
+                error={hasErrors("name")}
+                onChange={handleChange}
+                value={formik.values.name}
               />
-              <label className="form-check-label" htmlFor="is_enabled">
-                {T.translate("edit_selection_plan.enabled")}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-2 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="is_hidden"
-                checked={entity.is_hidden}
-                onChange={this.handleChange}
-                className="form-check-input"
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 2 }} sx={{ mt: "30px" }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    id="is_enabled"
+                    checked={formik.values.is_enabled}
+                    onChange={handleChange}
+                  />
+                }
+                label={T.translate("edit_selection_plan.enabled")}
               />
-              <label className="form-check-label" htmlFor="is_hidden">
-                {T.translate("edit_selection_plan.hidden")}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-2 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="allow_proposed_schedules"
-                checked={entity.allow_proposed_schedules}
-                onChange={this.handleChange}
-                className="form-check-input"
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 2 }} sx={{ mt: "30px" }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    id="is_hidden"
+                    checked={formik.values.is_hidden}
+                    onChange={handleChange}
+                  />
+                }
+                label={T.translate("edit_selection_plan.hidden")}
               />
-              <label
-                className="form-check-label"
-                htmlFor="allow_proposed_schedules"
-              >
-                {T.translate("edit_selection_plan.allow_proposed_schedules")}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-2 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="allow_new_presentations"
-                checked={entity.allow_new_presentations}
-                onChange={this.handleChange}
-                className="form-check-input"
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 2 }} sx={{ mt: "30px" }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    id="allow_proposed_schedules"
+                    checked={formik.values.allow_proposed_schedules}
+                    onChange={handleChange}
+                  />
+                }
+                label={T.translate(
+                  "edit_selection_plan.allow_proposed_schedules"
+                )}
               />
-              <label
-                className="form-check-label"
-                htmlFor="allow_new_presentations"
-              >
-                {T.translate("edit_selection_plan.allow_new_presentations")}
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.submission_begin_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="submission_begin_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.submission_begin_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.submission_end_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="submission_end_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.submission_end_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label> {T.translate("edit_selection_plan.max_submissions")}</label>
-            <Input
-              className="form-control"
-              type="number"
-              error={this.hasErrors("max_submission_allowed_per_user")}
-              id="max_submission_allowed_per_user"
-              value={entity.max_submission_allowed_per_user}
-              onChange={this.handleChange}
-              min={0}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {T.translate(
-                "edit_selection_plan.submission_lock_down_presentation_status_date"
-              )}{" "}
-              &nbsp;
-              <i
-                className="fa fa-info-circle"
-                aria-hidden="true"
-                title={T.translate(
-                  "edit_selection_plan.submission_lock_down_presentation_status_date_info"
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 2 }} sx={{ mt: "30px" }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    id="allow_new_presentations"
+                    checked={formik.values.allow_new_presentations}
+                    onChange={handleChange}
+                  />
+                }
+                label={T.translate(
+                  "edit_selection_plan.allow_new_presentations"
                 )}
               />
-            </label>
-            <DateTimePicker
-              id="submission_lock_down_presentation_status_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.submission_lock_down_presentation_status_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.voting_begin_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="voting_begin_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.voting_begin_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.voting_end_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="voting_end_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.voting_end_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.selection_begin_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="selection_begin_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.selection_begin_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-          <div className="col-md-6">
-            <label>
-              {" "}
-              {T.translate("edit_selection_plan.selection_end_date")}{" "}
-            </label>
-            <DateTimePicker
-              id="selection_end_date"
-              onChange={this.handleChange}
-              format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-              timezone={currentSummit.time_zone_id}
-              value={epochToMomentTimeZone(
-                entity.selection_end_date,
-                currentSummit.time_zone_id
-              )}
-            />
-          </div>
-        </div>
-
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label>
-              {" "}
-              {T.translate(
-                "edit_selection_plan.submission_period_disclaimer"
-              )}{" "}
-              *
-            </label>
-            <TextEditorV3
-              id="submission_period_disclaimer"
-              value={entity.submission_period_disclaimer}
-              onChange={this.handleChange}
-              error={this.hasErrors("submission_period_disclaimer")}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
+            </Grid2>
+          </Grid2>
 
-        <hr />
-
-        {entity.id !== 0 && (
-          <>
-            <Panel
-              show={showSection === "track_groups"}
-              title={T.translate("edit_selection_plan.track_groups")}
-              handleClick={() => {
-                this.toggleSection("track_groups");
-              }}
-            >
-              <SimpleLinkList
-                values={entity.track_groups}
-                columns={trackGroupsColumns}
-                options={trackGroupsOptions}
-              />
-            </Panel>
-            <Panel
-              show={showSection === "event_types"}
-              title={T.translate("edit_selection_plan.event_types")}
-              handleClick={() => {
-                this.toggleSection("event_types");
-              }}
-            >
-              <SimpleLinkList
-                values={entity.event_types}
-                columns={eventTypesColumns}
-                options={eventTypesOptions}
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.submission_begin_date")}
+              </label>
+              <MuiFormikDatepicker name="submission_begin_date" />
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.submission_end_date")}
+              </label>
+              <MuiFormikDatepicker name="submission_end_date" />
+            </Grid2>
+          </Grid2>
+
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.max_submissions")}
+              </label>
+              <Input
+                className="form-control"
+                type="number"
+                error={hasErrors("max_submission_allowed_per_user")}
+                id="max_submission_allowed_per_user"
+                value={formik.values.max_submission_allowed_per_user}
+                onChange={handleChange}
+                min={0}
               />
-            </Panel>
-            <Panel
-              show={showSection === "extra_questions"}
-              title={T.translate("edit_selection_plan.extra_questions")}
-              handleClick={() => {
-                this.toggleSection("extra_questions");
-              }}
-            >
-              <div className="row">
-                <Many2ManyDropDown
-                  id="addAllowedExtraQuestions"
-                  isClearable
-                  placeholder={T.translate(
-                    "edit_selection_plan.placeholders.link_question"
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate(
+                  "edit_selection_plan.submission_lock_down_presentation_status_date"
+                )}{" "}
+                &nbsp;
+                <i
+                  className="fa fa-info-circle"
+                  aria-hidden="true"
+                  title={T.translate(
+                    "edit_selection_plan.submission_lock_down_presentation_status_date_info"
                   )}
-                  fetchOptions={this.fetchSummitSelectionPlanExtraQuestions}
-                  onAdd={this.linkSummitSelectionPlanExtraQuestion}
-                />
-                <div className="col-md-6 text-right col-md-offset-6">
-                  <button
-                    className="btn btn-primary right-space"
-                    onClick={this.handleNewExtraQuestion}
-                  >
-                    {T.translate("edit_selection_plan.add_extra_questions")}
-                  </button>
-                </div>
-              </div>
-              {entity.extra_questions.length === 0 && (
-                <div>
-                  {T.translate("edit_selection_plan.no_extra_questions")}
-                </div>
-              )}
-              {entity.extra_questions.length > 0 && (
-                <SortableTable
-                  options={extraQuestionsOptions}
-                  data={entity.extra_questions.map((q) => ({
-                    ...q,
-                    label: stripTags(q.label)
-                  }))}
-                  columns={extraQuestionColumns}
-                  dropCallback={this.props.updateExtraQuestionOrder}
-                  orderField="order"
                 />
-              )}
-            </Panel>
-            <Panel
-              show={showSection === "email_templates"}
-              title={T.translate("edit_selection_plan.email_templates")}
-              handleClick={() => {
-                this.toggleSection("email_templates");
-              }}
+              </label>
+              <MuiFormikDatepicker name="submission_lock_down_presentation_status_date" />
+            </Grid2>
+          </Grid2>
+
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.voting_begin_date")}
+              </label>
+              <MuiFormikDatepicker name="voting_begin_date" />
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.voting_end_date")}
+              </label>
+              <MuiFormikDatepicker name="voting_end_date" />
+            </Grid2>
+          </Grid2>
+
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.selection_begin_date")}
+              </label>
+              <MuiFormikDatepicker name="selection_begin_date" />
+            </Grid2>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <label>
+                {T.translate("edit_selection_plan.selection_end_date")}
+              </label>
+              <MuiFormikDatepicker name="selection_end_date" />
+            </Grid2>
+          </Grid2>
+
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={12}>
+              <label>
+                {T.translate(
+                  "edit_selection_plan.submission_period_disclaimer"
+                )}{" "}
+                *
+              </label>
+              <TextEditorV3
+                id="submission_period_disclaimer"
+                value={formik.values.submission_period_disclaimer}
+                onChange={handleChange}
+                error={hasErrors("submission_period_disclaimer")}
+                license={process.env.JODIT_LICENSE_KEY}
+              />
+            </Grid2>
+          </Grid2>
+        </div>
+
+        {formik.values.id !== 0 && (
+          <>
+            <div
+              role="tabpanel"
+              id="tabpanel-track_groups"
+              hidden={activeTab !== "track_groups"}
             >
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.creator_notification_email_template"
-                    )}
-                  </label>
-                  <EmailTemplateInput
-                    id="presentation_creator_notification_email_template"
-                    value={
-                      entity.presentation_creator_notification_email_template
-                    }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.creator_notification_email_select_template"
+              <Box sx={{ pt: 2 }}>
+                <Box
+                  sx={{ display: "flex", gap: 1, alignItems: "center", mb: 2 }}
+                >
+                  <Autocomplete
+                    size="small"
+                    value={trackGroupSelection}
+                    options={trackGroupSearchOptions}
+                    getOptionLabel={(opt) => opt.name ?? ""}
+                    filterOptions={(x) => x}
+                    onInputChange={(_, val) => {
+                      if (val)
+                        queryTrackGroups(
+                          currentSummit.id,
+                          val,
+                          setTrackGroupSearchOptions
+                        );
+                    }}
+                    onChange={(_, val) => setTrackGroupSelection(val)}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        size="small"
+                        placeholder={T.translate(
+                          "edit_selection_plan.placeholders.track_groups_search"
+                        )}
+                      />
                     )}
-                    onChange={this.handleNotificationEmailTemplateChange}
-                    isClearable
-                    plainValue
+                    sx={{ width: 320 }}
                   />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.moderator_notification_email_template"
-                    )}
-                  </label>
-                  <EmailTemplateInput
-                    id="presentation_moderator_notification_email_template"
-                    value={
-                      entity.presentation_moderator_notification_email_template
+                  <Button
+                    type="button"
+                    variant="outlined"
+                    disabled={!trackGroupSelection}
+                    onClick={() => {
+                      handleTrackGroupLink(trackGroupSelection);
+                      setTrackGroupSelection(null);
+                      setTrackGroupSearchOptions([]);
+                    }}
+                  >
+                    {T.translate("general.add")}
+                  </Button>
+                </Box>
+                {formik.values.track_groups.length === 0 && (
+                  <div>
+                    {T.translate("edit_selection_plan.no_track_groups")}
+                  </div>
+                )}
+                {formik.values.track_groups.length > 0 && (
+                  <Table
+                    data={formik.values.track_groups.map((tg) => ({
+                      ...tg,
+                      description: stripTags(tg.description ?? "")
+                    }))}
+                    columns={trackGroupsColumns}
+                    options={trackGroupsOptions}
+                    onDelete={handleTrackGroupUnLink}
+                    confirmButtonColor="error"
+                    deleteDialogBody={(name) =>
+                      `${T.translate(
+                        "edit_selection_plan.delete_confirm.track_group"
+                      )} ${name}`
                     }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.moderator_notification_email_select_template"
-                    )}
-                    onChange={this.handleNotificationEmailTemplateChange}
-                    isClearable
-                    plainValue
                   />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.speaker_notification_email_template"
+                )}
+              </Box>
+            </div>
+
+            <div
+              role="tabpanel"
+              id="tabpanel-event_types"
+              hidden={activeTab !== "event_types"}
+            >
+              <Box sx={{ pt: 2 }}>
+                <Box
+                  sx={{ display: "flex", gap: 1, alignItems: "center", mb: 2 }}
+                >
+                  <Autocomplete
+                    size="small"
+                    value={eventTypeSelection}
+                    options={eventTypeSearchOptions}
+                    getOptionLabel={(opt) => opt.name ?? ""}
+                    filterOptions={(x) => x}
+                    onInputChange={(_, val) => {
+                      if (val)
+                        queryEventTypes(
+                          currentSummit.id,
+                          val,
+                          setEventTypeSearchOptions,
+                          PresentationTypeClassName
+                        );
+                    }}
+                    onChange={(_, val) => setEventTypeSelection(val)}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        size="small"
+                        placeholder={T.translate(
+                          "edit_selection_plan.placeholders.event_type_search"
+                        )}
+                      />
                     )}
-                  </label>
-                  <EmailTemplateInput
-                    id="presentation_speaker_notification_email_template"
-                    value={
-                      entity.presentation_speaker_notification_email_template
+                    sx={{ width: 320 }}
+                  />
+                  <Button
+                    type="button"
+                    variant="outlined"
+                    disabled={!eventTypeSelection}
+                    onClick={() => {
+                      handleAddEventType(eventTypeSelection);
+                      setEventTypeSelection(null);
+                      setEventTypeSearchOptions([]);
+                    }}
+                  >
+                    {T.translate("general.add")}
+                  </Button>
+                </Box>
+                {formik.values.event_types.length === 0 && (
+                  <div>{T.translate("edit_selection_plan.no_event_types")}</div>
+                )}
+                {formik.values.event_types.length > 0 && (
+                  <Table
+                    data={formik.values.event_types}
+                    columns={eventTypesColumns}
+                    options={eventTypesOptions}
+                    onDelete={handleDeleteEventType}
+                    confirmButtonColor="error"
+                    deleteDialogBody={(name) =>
+                      `${T.translate(
+                        "edit_selection_plan.delete_confirm.event_type"
+                      )} ${name}`
                     }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.speaker_notification_email_select_template"
-                    )}
-                    onChange={this.handleNotificationEmailTemplateChange}
-                    isClearable
-                    plainValue
                   />
-                </div>
-              </div>
-            </Panel>
-            <Panel
-              show={showSection === "track_chair_settings"}
-              title={T.translate("track_chair_settings.title")}
-              handleClick={() => {
-                this.toggleSection("track_chair_settings");
-              }}
+                )}
+              </Box>
+            </div>
+
+            <div
+              role="tabpanel"
+              id="tabpanel-extra_questions"
+              hidden={activeTab !== "extra_questions"}
             >
-              <div className="row">
-                <div className="col-md-4 checkboxes-div">
-                  <div className="form-check abc-checkbox">
-                    <input
-                      type="checkbox"
-                      id="allow_track_change_requests"
-                      checked={entity.allow_track_change_requests}
-                      onChange={this.handleChange}
-                      className="form-check-input"
+              <Box sx={{ pt: 2 }}>
+                <Grid2
+                  container
+                  spacing={2}
+                  sx={{ alignItems: "center", mb: 2 }}
+                >
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <Many2ManyDropDown
+                      id="addAllowedExtraQuestions"
+                      isClearable
+                      CSSClass=""
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.link_question"
+                      )}
+                      fetchOptions={fetchSummitSelectionPlanExtraQuestions}
+                      onAdd={linkSummitSelectionPlanExtraQuestion}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor="allow_track_change_requests"
+                  </Grid2>
+                  <Grid2
+                    size={{ xs: 12, md: 6 }}
+                    sx={{ display: "flex", justifyContent: "flex-end" }}
+                  >
+                    <Button
+                      type="button"
+                      variant="contained"
+                      onClick={handleNewExtraQuestion}
                     >
+                      {T.translate("edit_selection_plan.add_extra_questions")}
+                    </Button>
+                  </Grid2>
+                </Grid2>
+                {formik.values.extra_questions.length === 0 && (
+                  <div>
+                    {T.translate("edit_selection_plan.no_extra_questions")}
+                  </div>
+                )}
+                {formik.values.extra_questions.length > 0 && (
+                  <SortableTable
+                    options={extraQuestionsOptions}
+                    data={formik.values.extra_questions.map((q) => ({
+                      ...q,
+                      label: stripTags(q.label)
+                    }))}
+                    columns={extraQuestionColumns}
+                    onReorder={updateExtraQuestionOrder}
+                    updateOrderKey="order"
+                    onEdit={(item) => handleEditExtraQuestion(item.id)}
+                    onDelete={handleDeleteExtraQuestion}
+                    confirmButtonColor="error"
+                  />
+                )}
+              </Box>
+            </div>
+
+            <div
+              role="tabpanel"
+              id="tabpanel-email_templates"
+              hidden={activeTab !== "email_templates"}
+            >
+              <Box sx={{ pt: 2 }}>
+                <Grid2 container spacing={2}>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
                       {T.translate(
-                        "track_chair_settings.allow_change_requests"
+                        "edit_selection_plan.creator_notification_email_template"
                       )}
                     </label>
-                  </div>
-                </div>
-              </div>
-              <hr />
-              <div className="row">
-                <div className="col-md-6 text-right col-md-offset-6">
-                  <button
-                    className="btn btn-primary right-space"
-                    onClick={this.handleAddRatingType}
-                  >
-                    {T.translate("track_chair_settings.add_rating_type")}
-                  </button>
-                </div>
-              </div>
-              <SortableTable
-                options={ratingTypesOptions}
-                data={entity.track_chair_rating_types}
-                columns={ratingTypesColumns}
-                dropCallback={this.props.onUpdateRatingTypeOrder}
-                orderField="order"
-              />
-            </Panel>
-            <Panel
-              show={showSection === "presentation_action_types"}
-              title={T.translate(
-                "edit_selection_plan.presentation_action_types"
-              )}
-              handleClick={() => {
-                this.toggleSection("presentation_action_types");
-              }}
+                    <EmailTemplateInput
+                      id="presentation_creator_notification_email_template"
+                      value={
+                        formik.values
+                          .presentation_creator_notification_email_template
+                      }
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.creator_notification_email_select_template"
+                      )}
+                      onChange={handleNotificationEmailTemplateChange}
+                      isClearable
+                      plainValue
+                    />
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.moderator_notification_email_template"
+                      )}
+                    </label>
+                    <EmailTemplateInput
+                      id="presentation_moderator_notification_email_template"
+                      value={
+                        formik.values
+                          .presentation_moderator_notification_email_template
+                      }
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.moderator_notification_email_select_template"
+                      )}
+                      onChange={handleNotificationEmailTemplateChange}
+                      isClearable
+                      plainValue
+                    />
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.speaker_notification_email_template"
+                      )}
+                    </label>
+                    <EmailTemplateInput
+                      id="presentation_speaker_notification_email_template"
+                      value={
+                        formik.values
+                          .presentation_speaker_notification_email_template
+                      }
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.speaker_notification_email_select_template"
+                      )}
+                      onChange={handleNotificationEmailTemplateChange}
+                      isClearable
+                      plainValue
+                    />
+                  </Grid2>
+                </Grid2>
+              </Box>
+            </div>
+
+            <div
+              role="tabpanel"
+              id="tabpanel-track_chair_settings"
+              hidden={activeTab !== "track_chair_settings"}
             >
-              <div className="row">
-                <Many2ManyDropDown
-                  id="addAllowedPresentationActionType"
-                  isClearable
-                  CSSClass="col-md-9"
-                  placeholder={T.translate(
-                    "edit_selection_plan.placeholders.link_presentation_action_type"
+              <Box sx={{ pt: 2 }}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      id="allow_track_change_requests"
+                      checked={formik.values.allow_track_change_requests}
+                      onChange={handleChange}
+                    />
+                  }
+                  label={T.translate(
+                    "track_chair_settings.allow_change_requests"
                   )}
-                  fetchOptions={this.fetchSummitPresentationActionTypes}
-                  onAdd={this.linkSummitProgressFlag}
                 />
-              </div>
-              {entity.allowed_presentation_action_types.length === 0 && (
-                <div>
-                  {T.translate(
-                    "edit_selection_plan.no_presentation_action_types"
-                  )}
-                </div>
-              )}
-              {entity.allowed_presentation_action_types.length > 0 && (
+                <hr />
+                <Box
+                  sx={{ display: "flex", justifyContent: "flex-end", mb: 2 }}
+                >
+                  <Button
+                    type="button"
+                    variant="contained"
+                    onClick={handleAddRatingType}
+                  >
+                    {T.translate("track_chair_settings.add_rating_type")}
+                  </Button>
+                </Box>
                 <SortableTable
-                  options={actionTypesOptions}
-                  data={entity.allowed_presentation_action_types}
-                  columns={actionTypesColumns}
-                  dropCallback={this.props.onUpdateProgressFlagOrder}
-                  orderField="order"
+                  options={ratingTypesOptions}
+                  data={formik.values.track_chair_rating_types}
+                  columns={ratingTypesColumns}
+                  onReorder={onUpdateRatingTypeOrder}
+                  updateOrderKey="order"
+                  onEdit={(item) => handleEditRatingType(item.id)}
+                  onDelete={handleDeleteRatingType}
+                  confirmButtonColor="error"
                 />
-              )}
-            </Panel>
-            {!this.props.entity.is_hidden && (
-              <Panel
-                show={showSection === "allowed_members"}
-                title={T.translate("edit_selection_plan.allowed_members")}
-                handleClick={() => {
-                  this.toggleSection("allowed_members");
-                }}
-                className="allowed-members-panel"
-              >
-                <div className="allowed-members-header">
-                  <div className="pull-right input-group">
-                    <input
-                      className="form-control"
-                      onChange={(ev) =>
-                        this.setState({ newMemberEmail: ev.target.value })
-                      }
-                      value={newMemberEmail}
-                    />
-                    <span className="input-group-btn">
-                      <button
-                        type="button"
-                        className="btn btn-default add-button"
-                        onClick={this.handleAddAllowedMember}
-                        disabled={!newMemberEmail}
-                      >
-                        {T.translate("general.add")}
-                      </button>
-                    </span>
-                  </div>
-
-                  <div className="pull-left input-group">
-                    <button
-                      type="button"
-                      className="btn btn-primary"
-                      onClick={() => this.setState({ showImportModal: true })}
-                    >
-                      {T.translate("edit_selection_plan.import")}
-                    </button>
-                  </div>
-                </div>
+              </Box>
+            </div>
 
-                <Table
-                  data={allowedMembers.data}
-                  columns={allowedMembersColumns}
-                  options={allowedMembersOptions}
-                />
-                <Pagination
-                  bsSize="medium"
-                  prev
-                  next
-                  first
-                  last
-                  ellipsis
-                  boundaryLinks
-                  maxButtons={10}
-                  items={allowedMembers.lastPage}
-                  activePage={allowedMembers.currentPage}
-                  onSelect={this.handleAllowedMembersPageChange}
-                />
-              </Panel>
-            )}
-            <Panel
-              show={showSection === "cfp_settings"}
-              title={T.translate("edit_selection_plan.cfp_settings")}
-              handleClick={() => {
-                this.toggleSection("cfp_settings");
-              }}
+            <div
+              role="tabpanel"
+              id="tabpanel-presentation_action_types"
+              hidden={activeTab !== "presentation_action_types"}
             >
-              <div className="row form-group">
-                <div className="col-md-12">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_edition_custom_message"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_edition_custom_message_info"
+              <Box sx={{ pt: 2 }}>
+                <Grid2 container spacing={2} sx={{ mb: 2 }}>
+                  <Grid2 size={{ xs: 12, md: 9 }}>
+                    <Many2ManyDropDown
+                      id="addAllowedPresentationActionType"
+                      isClearable
+                      CSSClass=""
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.link_presentation_action_type"
                       )}
+                      fetchOptions={fetchSummitPresentationActionTypes}
+                      onAdd={linkSummitProgressFlag}
                     />
-                  </label>
-                  <TextEditorV3
-                    id="cfp_presentation_edition_custom_message"
-                    error={this.hasErrors(
-                      "cfp_presentation_edition_custom_message"
-                    )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_edition_custom_message?.value || ""
-                    }
-                    license={process.env.JODIT_LICENSE_KEY}
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-12">
-                  <label>
-                    {" "}
+                  </Grid2>
+                </Grid2>
+                {formik.values.allowed_presentation_action_types.length ===
+                  0 && (
+                  <div>
                     {T.translate(
-                      "edit_selection_plan.allowed_presentation_questions"
+                      "edit_selection_plan.no_presentation_action_types"
                     )}
-                  </label>
-                  <Dropdown
-                    id="allowed_presentation_questions"
-                    value={entity.allowed_presentation_questions}
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.allowed_presentation_questions"
-                    )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_ALLOWED_QUESTIONS}
-                    isMulti
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-12">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.allowed_presentation_editable_questions"
-                    )}{" "}
-                    *
-                  </label>
-                  <Dropdown
-                    id="allowed_presentation_editable_questions"
-                    value={entity.allowed_presentation_editable_questions}
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.allowed_presentation_editable_questions"
-                    )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_ALLOWED_EDITABLE_QUESTIONS}
-                    isMulti
+                  </div>
+                )}
+                {formik.values.allowed_presentation_action_types.length > 0 && (
+                  <SortableTable
+                    options={actionTypesOptions}
+                    data={formik.values.allowed_presentation_action_types}
+                    columns={actionTypesColumns}
+                    onReorder={onUpdateProgressFlagOrder}
+                    updateOrderKey="order"
+                    onDelete={handleRemoveProgressFlag}
+                    confirmButtonColor="error"
                   />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-12">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_edition_default_tab"
-                    )}
-                  </label>
-                  <Dropdown
-                    id="cfp_presentation_edition_default_tab"
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_edition_default_tab?.value || ""
+                )}
+              </Box>
+            </div>
+
+            {!formik.values.is_hidden && (
+              <div
+                role="tabpanel"
+                id="tabpanel-allowed_members"
+                hidden={activeTab !== "allowed_members"}
+              >
+                <Box sx={{ pt: 2 }}>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      mb: 2
+                    }}
+                  >
+                    <Button
+                      type="button"
+                      variant="contained"
+                      onClick={() => setShowImportModal(true)}
+                    >
+                      {T.translate("edit_selection_plan.import")}
+                    </Button>
+                    <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
+                      <TextField
+                        size="small"
+                        value={newMemberEmail}
+                        onChange={(ev) => setNewMemberEmail(ev.target.value)}
+                      />
+                      <Button
+                        type="button"
+                        variant="outlined"
+                        onClick={handleAddAllowedMember}
+                        disabled={!newMemberEmail}
+                      >
+                        {T.translate("general.add")}
+                      </Button>
+                    </Box>
+                  </Box>
+                  <Table
+                    data={allowedMembers.data}
+                    columns={allowedMembersColumns}
+                    options={allowedMembersOptions}
+                    onDelete={handleDeleteAllowedMember}
+                    confirmButtonColor="error"
+                    getName={(item) => item.email}
+                    deleteDialogBody={(email) =>
+                      `${T.translate(
+                        "edit_selection_plan.delete_confirm.allowed_member"
+                      )} ${email}`
                     }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.cfp_presentation_edition_default_tab"
-                    )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_CFP_PRESENTATION_EDITION_TABS}
-                    isMulti={false}
-                    isClearable
                   />
-                </div>
+                  <Box
+                    sx={{ display: "flex", justifyContent: "center", mt: 2 }}
+                  >
+                    <Pagination
+                      count={allowedMembers.lastPage}
+                      page={allowedMembers.currentPage}
+                      onChange={(_, page) =>
+                        handleAllowedMembersPageChange(page)
+                      }
+                      showFirstButton
+                      showLastButton
+                    />
+                  </Box>
+                </Box>
               </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate("edit_selection_plan.cfp_landing_page_title")}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_landing_page_title_info"
+            )}
+
+            {/* cfp_settings kept in DOM always (contains TextEditorV3) */}
+            <div
+              role="tabpanel"
+              id="tabpanel-cfp_settings"
+              hidden={activeTab !== "cfp_settings"}
+            >
+              <Box sx={{ pt: 2 }}>
+                <Grid2 container spacing={2}>
+                  <Grid2 size={12}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_edition_custom_message"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_edition_custom_message_info"
+                        )}
+                      />
+                    </label>
+                    <TextEditorV3
+                      id="cfp_presentation_edition_custom_message"
+                      error={hasErrors(
+                        "cfp_presentation_edition_custom_message"
+                      )}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_edition_custom_message?.value || ""
+                      }
+                      license={process.env.JODIT_LICENSE_KEY}
                     />
-                  </label>
-                  <Input
-                    id="cfp_landing_page_title"
-                    className="form-control"
-                    error={this.hasErrors("cfp_landing_page_title")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_landing_page_title?.value ||
-                      ""
-                    }
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_track_question_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_track_question_label_info"
+                  </Grid2>
+                  <Grid2 size={12}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.allowed_presentation_questions"
+                      )}
+                    </label>
+                    <Dropdown
+                      id="allowed_presentation_questions"
+                      value={formik.values.allowed_presentation_questions}
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.allowed_presentation_questions"
                       )}
+                      onChange={handleChange}
+                      options={DEFAULT_ALLOWED_QUESTIONS}
+                      isMulti
                     />
-                  </label>
-                  <Input
-                    id="cfp_track_question_label"
-                    className="form-control"
-                    error={this.hasErrors("cfp_track_question_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_track_question_label
-                        ?.value || ""
-                    }
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_speakers_singular_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_speakers_singular_label_info"
+                  </Grid2>
+                  <Grid2 size={12}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.allowed_presentation_editable_questions"
+                      )}{" "}
+                      *
+                    </label>
+                    <Dropdown
+                      id="allowed_presentation_editable_questions"
+                      value={
+                        formik.values.allowed_presentation_editable_questions
+                      }
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.allowed_presentation_editable_questions"
                       )}
+                      onChange={handleChange}
+                      options={DEFAULT_ALLOWED_EDITABLE_QUESTIONS}
+                      isMulti
                     />
-                  </label>
-                  <Input
-                    id="cfp_speakers_singular_label"
-                    className="form-control"
-                    error={this.hasErrors("cfp_speakers_singular_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_speakers_singular_label
-                        ?.value || ""
-                    }
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_speakers_plural_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_speakers_plural_label_info"
+                  </Grid2>
+                  <Grid2 size={12}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_edition_default_tab"
                       )}
+                    </label>
+                    <Dropdown
+                      id="cfp_presentation_edition_default_tab"
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_edition_default_tab?.value || ""
+                      }
+                      placeholder={T.translate(
+                        "edit_selection_plan.placeholders.cfp_presentation_edition_default_tab"
+                      )}
+                      onChange={handleChange}
+                      options={DEFAULT_CFP_PRESENTATION_EDITION_TABS}
+                      isMulti={false}
+                      isClearable
                     />
-                  </label>
-                  <Input
-                    id="cfp_speakers_plural_label"
-                    className="form-control"
-                    error={this.hasErrors("cfp_speakers_plural_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_speakers_plural_label
-                        ?.value || ""
-                    }
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentations_singular_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentations_singular_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_landing_page_title"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_landing_page_title_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_landing_page_title"
+                      className="form-control"
+                      error={hasErrors("cfp_landing_page_title")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings.cfp_landing_page_title
+                          ?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentations_singular_label"
-                    className="form-control"
-                    error={this.hasErrors("cfp_presentations_singular_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_presentations_singular_label
-                        ?.value || ""
-                    }
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentations_plural_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentations_plural_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_track_question_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_track_question_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_track_question_label"
+                      className="form-control"
+                      error={hasErrors("cfp_track_question_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_track_question_label?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentations_plural_label"
-                    className="form-control"
-                    error={this.hasErrors("cfp_presentations_plural_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_presentations_plural_label
-                        ?.value || ""
-                    }
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_title_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_title_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_speakers_singular_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_speakers_singular_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_speakers_singular_label"
+                      className="form-control"
+                      error={hasErrors("cfp_speakers_singular_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_speakers_singular_label?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_title_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_title_label"
-                    )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_title_label?.value || ""
-                    }
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_abstract_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_abstract_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_speakers_plural_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_speakers_plural_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_speakers_plural_label"
+                      className="form-control"
+                      error={hasErrors("cfp_speakers_plural_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_speakers_plural_label?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_abstract_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_abstract_label"
-                    )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_abstract_label?.value || ""
-                    }
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_social_summary_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_social_summary_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentations_singular_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentations_singular_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentations_singular_label"
+                      className="form-control"
+                      error={hasErrors("cfp_presentations_singular_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentations_singular_label?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_social_summary_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_social_summary_label"
-                    )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_social_summary_label?.value ||
-                      ""
-                    }
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_links_label"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_links_label_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentations_plural_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentations_plural_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentations_plural_label"
+                      className="form-control"
+                      error={hasErrors("cfp_presentations_plural_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentations_plural_label?.value || ""
+                      }
                     />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_links_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_links_label"
-                    )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_links_label?.value || ""
-                    }
-                  />
-                </div>
-              </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_hide_track_selection"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_hide_track_selection_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_summary_title_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_title_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentation_summary_title_label"
+                      className="form-control"
+                      error={hasErrors("cfp_presentation_summary_title_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_title_label?.value || ""
+                      }
                     />
-                  </label>{" "}
-                  <br />
-                  <Switch
-                    checked={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_hide_track_selection?.value ||
-                      false
-                    }
-                    onChange={(val) => {
-                      this.handleOnSwitchChange(
-                        "cfp_presentation_summary_hide_track_selection",
-                        val
-                      );
-                    }}
-                    uncheckedIcon={false}
-                    checkedIcon={false}
-                    className="react-switch"
-                  />
-                </div>
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_hide_activity_type_selection"
-                    )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_hide_activity_type_selection_info"
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_summary_abstract_label"
+                      )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_abstract_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentation_summary_abstract_label"
+                      className="form-control"
+                      error={hasErrors(
+                        "cfp_presentation_summary_abstract_label"
                       )}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_abstract_label?.value || ""
+                      }
                     />
-                  </label>{" "}
-                  <br />
-                  <Switch
-                    checked={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_hide_activity_type_selection
-                        ?.value || false
-                    }
-                    onChange={(val) => {
-                      this.handleOnSwitchChange(
-                        "cfp_presentation_summary_hide_activity_type_selection",
-                        val
-                      );
-                    }}
-                    uncheckedIcon={false}
-                    checkedIcon={false}
-                    className="react-switch"
-                  />
-                </div>
-              </div>
-              {window.CFP_APP_BASE_URL && (
-                <div className="row form-group">
-                  <div className="col-md-6">
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
                     <label>
                       {T.translate(
-                        "edit_selection_plan.cfp_presentation_selection_plan_link"
+                        "edit_selection_plan.cfp_presentation_summary_social_summary_label"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_social_summary_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentation_summary_social_summary_label"
+                      className="form-control"
+                      error={hasErrors(
+                        "cfp_presentation_summary_social_summary_label"
+                      )}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_social_summary_label
+                          ?.value || ""
+                      }
+                    />
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_summary_links_label"
+                      )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_links_label_info"
+                        )}
+                      />
+                    </label>
+                    <Input
+                      id="cfp_presentation_summary_links_label"
+                      className="form-control"
+                      error={hasErrors("cfp_presentation_summary_links_label")}
+                      onChange={handleChange}
+                      value={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_links_label?.value || ""
+                      }
+                    />
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
+                    <label>
+                      {T.translate(
+                        "edit_selection_plan.cfp_presentation_summary_hide_track_selection"
+                      )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_hide_track_selection_info"
+                        )}
+                      />
                     </label>
                     <br />
-                    <a
-                      className="text-table-link"
-                      href={`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans/${entity.id}`}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans/${entity.id}`}
-                    </a>
-                  </div>
-                  <div className="col-md-6">
+                    <MuiSwitch
+                      checked={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_hide_track_selection
+                          ?.value || false
+                      }
+                      onChange={(ev) =>
+                        handleOnSwitchChange(
+                          "cfp_presentation_summary_hide_track_selection",
+                          ev.target.checked
+                        )
+                      }
+                    />
+                  </Grid2>
+                  <Grid2 size={{ xs: 12, md: 6 }}>
                     <label>
                       {T.translate(
-                        "edit_selection_plan.cfp_presentation_all_selection_plan_link"
+                        "edit_selection_plan.cfp_presentation_summary_hide_activity_type_selection"
                       )}
+                      &nbsp;
+                      <i
+                        className="fa fa-info-circle"
+                        aria-hidden="true"
+                        title={T.translate(
+                          "edit_selection_plan.cfp_presentation_summary_hide_activity_type_selection_info"
+                        )}
+                      />
                     </label>
                     <br />
-                    <a
-                      className="text-table-link"
-                      href={`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans`}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans`}
-                    </a>
-                  </div>
-                </div>
-              )}
-            </Panel>
+                    <MuiSwitch
+                      checked={
+                        formik.values.marketing_settings
+                          .cfp_presentation_summary_hide_activity_type_selection
+                          ?.value || false
+                      }
+                      onChange={(ev) =>
+                        handleOnSwitchChange(
+                          "cfp_presentation_summary_hide_activity_type_selection",
+                          ev.target.checked
+                        )
+                      }
+                    />
+                  </Grid2>
+                  {window.CFP_APP_BASE_URL && (
+                    <>
+                      <Grid2 size={{ xs: 12, md: 6 }}>
+                        <label>
+                          {T.translate(
+                            "edit_selection_plan.cfp_presentation_selection_plan_link"
+                          )}
+                        </label>
+                        <br />
+                        <a
+                          className="text-table-link"
+                          href={`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans/${formik.values.id}`}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans/${formik.values.id}`}
+                        </a>
+                      </Grid2>
+                      <Grid2 size={{ xs: 12, md: 6 }}>
+                        <label>
+                          {T.translate(
+                            "edit_selection_plan.cfp_presentation_all_selection_plan_link"
+                          )}
+                        </label>
+                        <br />
+                        <a
+                          className="text-table-link"
+                          href={`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans`}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {`${window.CFP_APP_BASE_URL}/app/${currentSummit.slug}/all-plans`}
+                        </a>
+                      </Grid2>
+                    </>
+                  )}
+                </Grid2>
+              </Box>
+            </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>
-
         <ImportModal
           title={T.translate("edit_selection_plan.import_allowed_members")}
           show={showImportModal}
           wrapperClass="allowed-members-import-upload-wrapper"
-          onHide={() => this.setState({ showImportModal: false })}
-          onIngest={this.handleImportAllowedMembers}
+          onHide={() => setShowImportModal(false)}
+          onIngest={handleImportAllowedMembers}
         >
           * email ( text )<br />
         </ImportModal>
-      </form>
-    );
-  }
-}
+      </Box>
+    </FormikProvider>
+  );
+};
 
 export default SelectionPlanForm;
diff --git a/src/components/inputs/import-modal/index.jsx b/src/components/inputs/import-modal/index.jsx
index c2f8a3a4d..210ca514e 100644
--- a/src/components/inputs/import-modal/index.jsx
+++ b/src/components/inputs/import-modal/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Modal } from "react-bootstrap";
 import T from "i18n-react";
-import { UploadInput } from "openstack-uicore-foundation/lib/components";
+import UploadInput from "openstack-uicore-foundation/lib/components/inputs/upload-input";
 
 export default ({ title, children, show, wrapperClass, onHide, onIngest }) => {
   const [importFile, setImportFile] = useState(null);
diff --git a/src/i18n/en.json b/src/i18n/en.json
index eda7913d2..afcbd0660 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -556,12 +556,22 @@
     "cfp_presentation_edition_default_tab": "Default Landing Tab on Edition",
     "cfp_presentation_selection_plan_link": "Selection Plan Link",
     "cfp_presentation_all_selection_plan_link": "All Selection Plans Link",
+    "delete_confirm": {
+      "track_group": "Please verify you want to delete category group",
+      "event_type": "Please verify you want to delete activity type",
+      "extra_question": "Please verify you want to delete extra question",
+      "rating_type": "Please verify you want to delete rating type",
+      "action_type": "Please verify you want to delete progress flag",
+      "allowed_member": "Please verify you want to delete member"
+    },
     "placeholders": {
       "creator_notification_email_select_template": "Select a creator notification email template...",
       "moderator_notification_email_select_template": "Select a moderator notification email template...",
       "speaker_notification_email_select_template": "Select a speaker notification email template...",
       "link_question": "Link an Existent Question...",
       "link_presentation_action_type": "Link an Existent Action Type...",
+      "track_groups_search": "Search category groups...",
+      "event_type_search": "Search activity types...",
       "allowed_presentation_questions": "Select questions to display...",
       "allowed_presentation_editable_questions": "Select questions to Edit...",
       "cfp_presentation_edition_default_tab": "Select a landing tab ..."
diff --git a/src/layouts/selection-plan-id-layout.js b/src/layouts/selection-plan-id-layout.js
index 4fffb8749..04e41a5ed 100644
--- a/src/layouts/selection-plan-id-layout.js
+++ b/src/layouts/selection-plan-id-layout.js
@@ -11,9 +11,6 @@ import {
 import { getMarketingSettingsBySelectionPlan } from "../actions/marketing-actions";
 import { MAX_PER_PAGE } from "../utils/constants";
 
-const EditSelectionPlanPage = React.lazy(() =>
-  import("../pages/selection-plans/edit-selection-plan-page")
-);
 const SelectionPlanExtraQuestionsLayout = React.lazy(() =>
   import("./selection-plan-extra-questions-layout")
 );
@@ -54,12 +51,6 @@ const SelectionPlanIdLayout = ({
       <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
       <Suspense fallback={<AjaxLoader show relative size={120} />}>
         <Switch>
-          <Route
-            strict
-            exact
-            path={`${match.url}`}
-            component={EditSelectionPlanPage}
-          />
           <Route
             path={`${match.url}/extra-questions`}
             component={SelectionPlanExtraQuestionsLayout}
@@ -68,9 +59,7 @@ const SelectionPlanIdLayout = ({
             path={`${match.url}/rating-types`}
             component={SelectionPlanRatingTypesLayout}
           />
-          <Redirect
-            to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
-          />
+          <Redirect to={`/app/summits/${currentSummit.id}/selection-plans`} />
         </Switch>
       </Suspense>
     </div>
diff --git a/src/layouts/selection-plan-layout.js b/src/layouts/selection-plan-layout.js
index 57d103b6d..3a4043345 100644
--- a/src/layouts/selection-plan-layout.js
+++ b/src/layouts/selection-plan-layout.js
@@ -38,7 +38,7 @@ const SelectionPlanLayout = ({ match, currentSummit }) => (
         strict
         exact
         path={`${match.url}/new`}
-        component={SelectionPlanIdLayout}
+        render={() => <Redirect to={`${match.url}`} />}
       />
       <Route
         path={`${match.url}/:selection_plan_id(\\d+)`}
diff --git a/src/pages/selection-plans/__tests__/selection-plan-list-page.test.js b/src/pages/selection-plans/__tests__/selection-plan-list-page.test.js
new file mode 100644
index 000000000..c7a9cbdbb
--- /dev/null
+++ b/src/pages/selection-plans/__tests__/selection-plan-list-page.test.js
@@ -0,0 +1,165 @@
+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 SelectionPlanListPage from "../selection-plan-list-page";
+import {
+  getSelectionPlans,
+  getSelectionPlan,
+  deleteSelectionPlan,
+  resetSelectionPlanForm
+} from "../../../actions/selection-plan-actions";
+import { getMarketingSettingsBySelectionPlan } from "../../../actions/marketing-actions";
+
+jest.mock("../../../actions/selection-plan-actions", () => ({
+  getSelectionPlans: jest.fn(),
+  getSelectionPlan: jest.fn(),
+  deleteSelectionPlan: jest.fn(),
+  resetSelectionPlanForm: jest.fn()
+}));
+
+jest.mock("../../../actions/marketing-actions", () => ({
+  getMarketingSettingsBySelectionPlan: jest.fn()
+}));
+
+jest.mock("openstack-uicore-foundation/lib/components/mui/table", () => ({
+  __esModule: true,
+  default: ({ onEdit, onDelete }) => (
+    <div>
+      <button type="button" onClick={() => onEdit({ id: 1, name: "CFP 2026" })}>
+        edit-row
+      </button>
+      <button
+        type="button"
+        onClick={() => onDelete({ id: 1, name: "CFP 2026" })}
+      >
+        delete-row
+      </button>
+    </div>
+  )
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => ({
+    __esModule: true,
+    default: () => <input placeholder="search-plans" />
+  })
+);
+
+jest.mock("../edit-selection-plan-page", () => ({
+  __esModule: true,
+  default: ({ onSaved, onSavingChange }) => (
+    <div data-testid="edit-selection-plan">
+      <button type="button" onClick={() => onSaved()}>
+        popup-save
+      </button>
+      <button type="button" onClick={() => onSavingChange(true)}>
+        start-saving
+      </button>
+    </div>
+  )
+}));
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+const mockHistory = { replace: jest.fn() };
+const mockMatch = { params: {} };
+
+const initialState = {
+  currentSummitState: {
+    currentSummit: { id: 1 }
+  },
+  currentSelectionPlanListState: {
+    selectionPlans: [
+      { id: 1, name: "CFP 2026", is_enabled: "yes", is_hidden: "no" }
+    ],
+    totalSelectionPlans: 1,
+    perPage: 10,
+    currentPage: 1,
+    term: "",
+    order: "id",
+    orderDir: 1
+  },
+  currentSelectionPlanState: {
+    entity: { id: 0, name: "" },
+    errors: {}
+  }
+};
+
+describe("SelectionPlanListPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getSelectionPlans.mockReturnValue(() => Promise.resolve());
+    getSelectionPlan.mockReturnValue(() => Promise.resolve());
+    deleteSelectionPlan.mockReturnValue(() => Promise.resolve());
+    resetSelectionPlanForm.mockReturnValue({
+      type: "RESET_SELECTION_PLAN_FORM"
+    });
+    getMarketingSettingsBySelectionPlan.mockReturnValue(() =>
+      Promise.resolve()
+    );
+  });
+
+  it("reloads the list after a successful save", async () => {
+    renderWithRedux(
+      <SelectionPlanListPage history={mockHistory} match={mockMatch} />,
+      { initialState }
+    );
+
+    // Open dialog
+    await userEvent.click(
+      screen.getByRole("button", {
+        name: "selection_plan_list.add_selection_plan"
+      })
+    );
+    expect(screen.getByTestId("edit-selection-plan")).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "popup-save" }));
+      await flushPromises();
+    });
+
+    // Call 1: useEffect on mount; call 2: handleSelectionPlanSaved → refreshSelectionPlans
+    expect(getSelectionPlans).toHaveBeenCalledTimes(2);
+  });
+
+  it("reloads the list after a successful delete", async () => {
+    renderWithRedux(
+      <SelectionPlanListPage history={mockHistory} match={mockMatch} />,
+      { initialState }
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "delete-row" }));
+      await flushPromises();
+    });
+
+    // Call 1: useEffect on mount; call 2: handleDelete .finally()
+    expect(getSelectionPlans).toHaveBeenCalledTimes(2);
+  });
+
+  it("re-syncs the list after a failed delete", async () => {
+    deleteSelectionPlan.mockReturnValue(() =>
+      Promise.reject(new Error("delete failed"))
+    );
+
+    renderWithRedux(
+      <SelectionPlanListPage history={mockHistory} match={mockMatch} />,
+      { initialState }
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: "delete-row" }));
+      await flushPromises();
+    });
+
+    // Call 1: useEffect on mount; call 2: handleDelete .finally() fires even on rejection
+    expect(getSelectionPlans).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/pages/selection-plans/edit-selection-plan-page.js b/src/pages/selection-plans/edit-selection-plan-page.js
index 07d37b595..f03003e02 100644
--- a/src/pages/selection-plans/edit-selection-plan-page.js
+++ b/src/pages/selection-plans/edit-selection-plan-page.js
@@ -35,13 +35,14 @@ import {
   updateRatingTypeOrder,
   updateSelectionPlanExtraQuestionOrder
 } from "../../actions/selection-plan-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
 
 const EditSelectionPlanPage = ({
   currentSummit,
   entity,
   allowedMembers,
   errors,
+  onSaved,
+  onSavingChange,
   history,
   extraQuestionsOrder,
   extraQuestionsOrderDir,
@@ -64,10 +65,6 @@ const EditSelectionPlanPage = ({
   importAllowedMembersCSV,
   removeAllowedMemberFromSelectionPlan
 }) => {
-  const title = entity.id
-    ? T.translate("general.edit")
-    : T.translate("general.add");
-
   const onDeleteExtraQuestion = (questionId) => {
     const extraQuestion = entity.extra_questions.find(
       (t) => t.id === questionId
@@ -184,45 +181,40 @@ const EditSelectionPlanPage = ({
   };
 
   return (
-    <div className="container">
-      <h3>
-        {title} {T.translate("edit_selection_plan.selection_plan")}
-        <AddNewButton entity={entity} />
-      </h3>
-      <hr />
-      <SelectionPlanForm
-        entity={entity}
-        allowedMembers={allowedMembers}
-        currentSummit={currentSummit}
-        errors={errors}
-        extraQuestionsOrder={extraQuestionsOrder}
-        extraQuestionsOrderDir={extraQuestionsOrderDir}
-        onTrackGroupLink={addTrackGroupToSelectionPlan}
-        onTrackGroupUnLink={removeTrackGroupFromSelectionPlan}
-        onSubmit={saveSelectionPlan}
-        saveSelectionPlanSettings={saveSelectionPlanSettings}
-        updateExtraQuestionOrder={onUpdateExtraQuestionOrder}
-        onAddNewExtraQuestion={onAddNewExtraQuestion}
-        onDeleteExtraQuestion={onDeleteExtraQuestion}
-        onAddEventType={addEventTypeSelectionPlan}
-        onDeleteEventType={deleteEventTypeSelectionPlan}
-        onEditExtraQuestion={onEditExtraQuestion}
-        onAddRatingType={onAddRatingType}
-        onEditRatingType={onEditRatingType}
-        onUpdateRatingTypeOrder={onUpdateRatingTypeOrder}
-        onDeleteRatingType={onDeleteRatingType}
-        onAssignExtraQuestion2SelectionPlan={assignExtraQuestion2SelectionPlan}
-        onAddProgressFlag={onAddProgressFlag}
-        onEditProgressFlag={onEditProgressFlag}
-        onAssignProgressFlag2SelectionPlan={assignProgressFlag2SelectionPlan}
-        onUnassignProgressFlag={onUnassignProgressFlag}
-        onUpdateProgressFlagOrder={onUpdateProgressFlagOrder}
-        onAllowedMemberAdd={addAllowedMemberToSelectionPlan}
-        onAllowedMemberDelete={removeAllowedMemberFromSelectionPlan}
-        onAllowedMembersPageChange={getAllowedMembers}
-        onImportAllowedMembers={importAllowedMembersCSV}
-      />
-    </div>
+    <SelectionPlanForm
+      entity={entity}
+      allowedMembers={allowedMembers}
+      currentSummit={currentSummit}
+      errors={errors}
+      onSaved={onSaved}
+      onSavingChange={onSavingChange}
+      extraQuestionsOrder={extraQuestionsOrder}
+      extraQuestionsOrderDir={extraQuestionsOrderDir}
+      onTrackGroupLink={addTrackGroupToSelectionPlan}
+      onTrackGroupUnLink={removeTrackGroupFromSelectionPlan}
+      onSubmit={saveSelectionPlan}
+      saveSelectionPlanSettings={saveSelectionPlanSettings}
+      updateExtraQuestionOrder={onUpdateExtraQuestionOrder}
+      onAddNewExtraQuestion={onAddNewExtraQuestion}
+      onDeleteExtraQuestion={onDeleteExtraQuestion}
+      onAddEventType={addEventTypeSelectionPlan}
+      onDeleteEventType={deleteEventTypeSelectionPlan}
+      onEditExtraQuestion={onEditExtraQuestion}
+      onAddRatingType={onAddRatingType}
+      onEditRatingType={onEditRatingType}
+      onUpdateRatingTypeOrder={onUpdateRatingTypeOrder}
+      onDeleteRatingType={onDeleteRatingType}
+      onAssignExtraQuestion2SelectionPlan={assignExtraQuestion2SelectionPlan}
+      onAddProgressFlag={onAddProgressFlag}
+      onEditProgressFlag={onEditProgressFlag}
+      onAssignProgressFlag2SelectionPlan={assignProgressFlag2SelectionPlan}
+      onUnassignProgressFlag={onUnassignProgressFlag}
+      onUpdateProgressFlagOrder={onUpdateProgressFlagOrder}
+      onAllowedMemberAdd={addAllowedMemberToSelectionPlan}
+      onAllowedMemberDelete={removeAllowedMemberFromSelectionPlan}
+      onAllowedMembersPageChange={getAllowedMembers}
+      onImportAllowedMembers={importAllowedMembersCSV}
+    />
   );
 };
 
diff --git a/src/pages/selection-plans/selection-plan-list-page.js b/src/pages/selection-plans/selection-plan-list-page.js
index 349ac5218..28669b2a3 100644
--- a/src/pages/selection-plans/selection-plan-list-page.js
+++ b/src/pages/selection-plans/selection-plan-list-page.js
@@ -11,169 +11,240 @@
  * limitations under the License.
  * */
 
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } 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 Table from "openstack-uicore-foundation/lib/components/table"
-import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search";
+import Grid2 from "@mui/material/Grid2";
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import {
   deleteSelectionPlan,
-  getSelectionPlans
+  getSelectionPlan,
+  getSelectionPlans,
+  resetSelectionPlanForm
 } from "../../actions/selection-plan-actions";
+import { getMarketingSettingsBySelectionPlan } from "../../actions/marketing-actions";
+import { DEFAULT_CURRENT_PAGE, MAX_PER_PAGE } from "../../utils/constants";
+import SelectionPlanPopup from "./selection-plan-popup";
 
 const SelectionPlanListPage = ({
   currentSummit,
   history,
   selectionPlans,
+  currentSelectionPlan,
   totalSelectionPlans,
+  perPage,
   term,
   order,
   orderDir,
-  lastPage,
   currentPage,
+  getSelectionPlan,
   getSelectionPlans,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan,
   deleteSelectionPlan
 }) => {
+  const [openSelectionPlanPopup, setOpenSelectionPlanPopup] = useState(false);
+
+  const openEditModal = useCallback(
+    (selectionPlanId) => {
+      if (!selectionPlanId) return;
+
+      getSelectionPlan(selectionPlanId)
+        .then(() =>
+          getMarketingSettingsBySelectionPlan(
+            selectionPlanId,
+            null,
+            DEFAULT_CURRENT_PAGE,
+            MAX_PER_PAGE
+          )
+        )
+        .then(() => setOpenSelectionPlanPopup(true));
+    },
+    [getMarketingSettingsBySelectionPlan, getSelectionPlan]
+  );
+
   useEffect(() => {
-    getSelectionPlans();
-  }, []);
+    if (currentSummit?.id) {
+      getSelectionPlans(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
+    }
+  }, [currentSummit]);
 
-  const handleEdit = (selectionPlanId) => {
-    history.push(
-      `/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`
-    );
+  const refreshSelectionPlans = () =>
+    getSelectionPlans(term, currentPage, perPage, order, orderDir);
+
+  const handleEdit = (selectionPlan) => {
+    if (!selectionPlan?.id) return;
+    openEditModal(selectionPlan.id);
   };
 
-  const handleDelete = (selectionPlanId) => {
-    const selectionPlan = selectionPlans.find((s) => s.id === selectionPlanId);
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: `${T.translate("selection_plan_list.remove_warning")} ${
-        selectionPlan.name
-      }`,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then((result) => {
-      if (result.value) {
-        deleteSelectionPlan(selectionPlanId);
-      }
-    });
+  const handleDelete = (selectionPlan) => {
+    if (!selectionPlan?.id) return;
+
+    deleteSelectionPlan(selectionPlan.id)
+      .finally(() => refreshSelectionPlans())
+      .catch(() => {});
   };
 
   const handleNew = () => {
-    history.push(`/app/summits/${currentSummit.id}/selection-plans/new`);
+    resetSelectionPlanForm();
+    setOpenSelectionPlanPopup(true);
+  };
+
+  const handleClosePopup = () => {
+    resetSelectionPlanForm();
+    setOpenSelectionPlanPopup(false);
   };
 
-  const handleSort = (index, key, dir) => {
-    getSelectionPlans(term, currentPage, key, dir);
+  const handleSelectionPlanSaved = () => {
+    setOpenSelectionPlanPopup(false);
+    refreshSelectionPlans();
   };
 
-  const handlePageChange = (newPage) => {
-    getSelectionPlans(term, newPage, order, orderDir);
+  const handleSort = (key, dir) => {
+    getSelectionPlans(term, currentPage, perPage, key, dir);
+  };
+
+  const handlePageChange = (page) => {
+    getSelectionPlans(term, page, perPage, order, orderDir);
+  };
+
+  const handlePerPageChange = (newPerPage) => {
+    getSelectionPlans(
+      term,
+      DEFAULT_CURRENT_PAGE,
+      parseInt(newPerPage, 10),
+      order,
+      orderDir
+    );
   };
 
   const handleSearch = (newTerm) => {
-    getSelectionPlans(newTerm, 1, order, orderDir);
+    getSelectionPlans(newTerm, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
   };
 
   const columns = [
-    { columnKey: "id", value: T.translate("selection_plan_list.id") },
+    {
+      columnKey: "id",
+      header: T.translate("selection_plan_list.id"),
+      width: 120,
+      sortable: true
+    },
     {
       columnKey: "name",
-      value: T.translate("selection_plan_list.name")
+      header: T.translate("selection_plan_list.name")
     },
     {
       columnKey: "type",
-      value: T.translate("selection_plan_list.type")
+      header: T.translate("selection_plan_list.type")
     },
     {
       columnKey: "is_enabled",
-      value: T.translate("selection_plan_list.is_enabled")
+      header: T.translate("selection_plan_list.is_enabled")
     },
     {
       columnKey: "is_hidden",
-      value: T.translate("selection_plan_list.is_hidden")
+      header: T.translate("selection_plan_list.is_hidden")
     }
   ];
 
   const tableOptions = {
     sortCol: order,
-    sortDir: orderDir,
-    actions: {
-      edit: { onClick: handleEdit },
-      delete: { onClick: handleDelete }
-    }
+    sortDir: orderDir
   };
 
   if (!currentSummit.id) return <div />;
 
   return (
     <div className="container">
-      <h3>
-        {" "}
-        {T.translate("selection_plan_list.selection_plan_list")} (
-        {totalSelectionPlans})
-      </h3>
-
-      <div className="row">
-        <div className="col-md-6">
-          <FreeTextSearch
-            value={term}
-            placeholder={T.translate("selection_plan_list.placeholders.search")}
-            onSearch={handleSearch}
-          />
-        </div>
-        <div className="col-md-6 text-right">
-          <button className="btn btn-primary right-space" onClick={handleNew}>
-            {T.translate("selection_plan_list.add_selection_plan")}
-          </button>
-        </div>
-      </div>
+      <h3>{T.translate("selection_plan_list.selection_plan_list")}</h3>
+
+      <Grid2
+        container
+        spacing={2}
+        sx={{ justifyContent: "space-between", alignItems: "center", mb: 2 }}
+      >
+        <Grid2 size={{ xs: 12, md: 2 }}>
+          <span>{totalSelectionPlans} items</span>
+        </Grid2>
+        <Grid2
+          container
+          size={{ xs: 12, md: 10 }}
+          spacing={1}
+          sx={{ justifyContent: "flex-end", alignItems: "center" }}
+        >
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <SearchInput
+              onSearch={handleSearch}
+              term={term}
+              placeholder={T.translate(
+                "selection_plan_list.placeholders.search"
+              )}
+            />
+          </Grid2>
+          <Grid2>
+            <Button
+              variant="contained"
+              onClick={handleNew}
+              startIcon={<AddIcon />}
+            >
+              {T.translate("selection_plan_list.add_selection_plan")}
+            </Button>
+          </Grid2>
+        </Grid2>
+      </Grid2>
+
       {selectionPlans.length === 0 && (
         <div>{T.translate("selection_plan_list.no_selection_plans")}</div>
       )}
 
       {selectionPlans.length > 0 && (
         <div>
-          <Table
-            options={tableOptions}
+          <MuiTable
             data={selectionPlans}
             columns={columns}
+            options={tableOptions}
+            perPage={perPage}
+            currentPage={currentPage}
+            totalRows={totalSelectionPlans}
+            onPageChange={handlePageChange}
+            onPerPageChange={handlePerPageChange}
             onSort={handleSort}
-          />
-          <Pagination
-            bsSize="medium"
-            prev
-            next
-            first
-            last
-            ellipsis
-            boundaryLinks
-            maxButtons={10}
-            items={lastPage}
-            activePage={currentPage}
-            onSelect={handlePageChange}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            confirmButtonColor="error"
           />
         </div>
       )}
+
+      {openSelectionPlanPopup && (
+        <SelectionPlanPopup
+          isEditing={!!currentSelectionPlan?.id}
+          onClose={handleClosePopup}
+          onSaved={handleSelectionPlanSaved}
+          history={history}
+        />
+      )}
     </div>
   );
 };
 
 const mapStateToProps = ({
   currentSummitState,
-  currentSelectionPlanListState
+  currentSelectionPlanListState,
+  currentSelectionPlanState
 }) => ({
   currentSummit: currentSummitState.currentSummit,
-  ...currentSelectionPlanListState
+  ...currentSelectionPlanListState,
+  currentSelectionPlan: currentSelectionPlanState.entity
 });
 
 export default connect(mapStateToProps, {
   getSelectionPlans,
+  getSelectionPlan,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan,
   deleteSelectionPlan
 })(SelectionPlanListPage);
diff --git a/src/pages/selection-plans/selection-plan-popup.js b/src/pages/selection-plans/selection-plan-popup.js
new file mode 100644
index 000000000..16c1bded9
--- /dev/null
+++ b/src/pages/selection-plans/selection-plan-popup.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright 2019 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
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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, { useRef, useState } from "react";
+import T from "i18n-react/dist/i18n-react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import EditSelectionPlanPage from "./edit-selection-plan-page";
+
+const SelectionPlanPopup = ({ isEditing, onClose, onSaved, history }) => {
+  const [isSaving, setIsSaving] = useState(false);
+  const isSavingRef = useRef(false);
+
+  const handleSavingChange = (saving) => {
+    isSavingRef.current = saving;
+    setIsSaving(saving);
+  };
+
+  const handleClose = () => {
+    if (isSavingRef.current) return;
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open
+      onClose={handleClose}
+      disableEscapeKeyDown={isSaving}
+      maxWidth="xl"
+      fullWidth
+      disableEnforceFocus
+      disableAutoFocus
+      disableRestoreFocus
+      PaperProps={{ sx: { height: "90vh" } }}
+    >
+      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
+        {isEditing ? T.translate("general.edit") : T.translate("general.add")}{" "}
+        {T.translate("edit_selection_plan.selection_plan")}
+        <IconButton size="small" onClick={handleClose} disabled={isSaving}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <Divider />
+      <DialogContent sx={{ overflowY: "auto" }}>
+        <EditSelectionPlanPage
+          onSaved={onSaved}
+          onSavingChange={handleSavingChange}
+          history={history}
+        />
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button
+          type="submit"
+          form="selection-plan-form"
+          variant="contained"
+          disabled={isSaving}
+        >
+          {T.translate("general.save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SelectionPlanPopup;
diff --git a/src/pages/sponsors/__tests__/edit-sponsor-page.test.js b/src/pages/sponsors/__tests__/edit-sponsor-page.test.js
index 48af66530..0818b46a7 100644
--- a/src/pages/sponsors/__tests__/edit-sponsor-page.test.js
+++ b/src/pages/sponsors/__tests__/edit-sponsor-page.test.js
@@ -16,6 +16,7 @@ jest.mock(
   "../sponsor-page/tabs/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js"
 );
 jest.mock("../sponsor-page/tabs/sponsor-users-list-per-sponsor/index.js");
+jest.mock("../sponsor-page/tabs/sponsor-cart-tab/index.js", () => () => null);
 
 jest.mock("../../../actions/sponsor-actions", () => ({
   ...jest.requireActual("../../../actions/sponsor-actions"),
diff --git a/src/reducers/selection_plans/selection-plan-list-reducer.js b/src/reducers/selection_plans/selection-plan-list-reducer.js
index 888fa5783..8118e9a42 100644
--- a/src/reducers/selection_plans/selection-plan-list-reducer.js
+++ b/src/reducers/selection_plans/selection-plan-list-reducer.js
@@ -39,12 +39,19 @@ const selectionPlanListReducer = (state = DEFAULT_STATE, action) => {
       return DEFAULT_STATE;
     }
     case REQUEST_SELECTION_PLANS: {
-      const { order, orderDir } = payload;
+      const { order, orderDir, page, perPage, term } = payload;
 
-      return { ...state, order, orderDir };
+      return {
+        ...state,
+        order,
+        orderDir,
+        currentPage: page,
+        perPage,
+        term
+      };
     }
     case RECEIVE_SELECTION_PLANS: {
-      const { current_page, total, last_page, data } = payload.response;
+      const { total, last_page, data } = payload.response;
 
       const selectionPlans = data.map((sp) => ({
         ...sp,
@@ -56,7 +63,6 @@ const selectionPlanListReducer = (state = DEFAULT_STATE, action) => {
         ...state,
         selectionPlans,
         totalSelectionPlans: total,
-        currentPage: current_page,
         lastPage: last_page
       };
     }