diff --git a/src/actions/selection-plan-actions.js b/src/actions/selection-plan-actions.js
index e0e48ae77..4ab993a52 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,
@@ -35,7 +35,12 @@ import {
   fetchErrorHandler
 } from "../utils/methods";
 import { saveMarketingSetting } from "./marketing-actions";
-import { DEBOUNCE_WAIT, DEFAULT_PER_PAGE } from "../utils/constants";
+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());
     });
diff --git a/src/components/forms/selection-plan-form.js b/src/components/forms/selection-plan-form.js
index eae94c098..b57e300ce 100644
--- a/src/components/forms/selection-plan-form.js
+++ b/src/components/forms/selection-plan-form.js
@@ -11,27 +11,28 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 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 DateTimePicker from "openstack-uicore-foundation/lib/components/inputs/datetimepicker";
+import SimpleLinkList from "openstack-uicore-foundation/lib/components/simple-link-list";
+import SortableTable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import Panel from "openstack-uicore-foundation/lib/components/sections/panel";
+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 Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import {
   isEmpty,
   scrollToError,
@@ -52,112 +53,83 @@ 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: [] });
+const SelectionPlanForm = (props) => {
+  const {
+    entity: propsEntity,
+    errors: propsErrors,
+    currentSummit,
+    extraQuestionsOrderDir,
+    extraQuestionsOrder,
+    actionTypesOrderDir,
+    actionTypesOrder,
+    allowedMembers,
+    onSaved,
+    onSubmit,
+    saveSelectionPlanSettings,
+    onTrackGroupLink,
+    onTrackGroupUnLink,
+    onAddEventType,
+    onDeleteEventType,
+    onAddRatingType,
+    onEditRatingType,
+    onDeleteRatingType,
+    onEditExtraQuestion,
+    onDeleteExtraQuestion,
+    onAddNewExtraQuestion,
+    onAssignExtraQuestion2SelectionPlan,
+    onAssignProgressFlag2SelectionPlan,
+    onUnassignProgressFlag,
+    onUpdateProgressFlagOrder,
+    onUpdateRatingTypeOrder,
+    updateExtraQuestionOrder,
+    onImportAllowedMembers,
+    onAllowedMemberAdd,
+    onAllowedMemberDelete,
+    onAllowedMembersPageChange
+  } = props;
+
+  const [entity, setEntity] = useState({ ...propsEntity });
+  const [errors, setErrors] = useState(propsErrors);
+  const [showSection, setShowSection] = useState("main");
+  const [newMemberEmail, setNewMemberEmail] = useState("");
+  const [showImportModal, setShowImportModal] = useState(false);
+
+  const prevPropsRef = useRef({ entity: propsEntity, errors: propsErrors });
+
+  useEffect(() => {
+    const prevEntity = prevPropsRef.current.entity;
+    const prevErrors = prevPropsRef.current.errors;
+
+    scrollToError(propsErrors);
+
+    const updates = {};
+
+    if (!shallowEqual(prevEntity, propsEntity)) {
+      updates.entity = { ...propsEntity };
+      updates.errors = {};
     }
-    querySelectionPlanExtraQuestions(currentSummit.id, input, callback);
-  }
 
-  fetchMembers(input, callback) {
-    if (!input) {
-      return Promise.resolve({ options: [] });
+    if (!shallowEqual(prevErrors, propsErrors)) {
+      updates.errors = { ...propsErrors };
     }
-    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);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
+    if (!isEmpty(updates)) {
+      if (updates.entity) setEntity(updates.entity);
+      if (updates.errors !== undefined) setErrors(updates.errors);
     }
 
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
+    prevPropsRef.current = { entity: propsEntity, errors: propsErrors };
+  }, [propsEntity, propsErrors]);
 
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  const hasErrors = (field) => {
+    if (field in errors) return errors[field];
+    return "";
+  };
 
-  handleChange(ev) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
+  const handleChange = (ev) => {
+    const newEntity = { ...entity };
+    const newErrors = { ...errors };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
@@ -169,7 +141,9 @@ class SelectionPlanForm extends React.Component {
     }
 
     if (id.startsWith("cfp_")) {
-      if (!newEntity.marketing_settings.hasOwnProperty(id)) {
+      if (
+        !Object.prototype.hasOwnProperty.call(newEntity.marketing_settings, id)
+      ) {
         newEntity.marketing_settings[id] = { value: "" };
       }
       newEntity.marketing_settings[id].value = value;
@@ -178,1299 +152,1197 @@ class SelectionPlanForm extends React.Component {
       newEntity[id] = value;
     }
 
-    this.setState({ entity: newEntity, errors: newErrors });
-  }
+    setEntity(newEntity);
+    setErrors(newErrors);
+  };
 
-  handleNotificationEmailTemplateChange(ev) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
+  const handleNotificationEmailTemplateChange = (ev) => {
     const { value, id } = ev.target;
+    setEntity((prev) => ({ ...prev, [id]: value }));
+    setErrors((prev) => ({ ...prev, [id]: "" }));
+  };
 
-    newErrors[id] = "";
-    newEntity[id] = value;
-    this.setState({ ...this.state, entity: newEntity, errors: newErrors });
-  }
-
-  handleSubmit(ev) {
+  const handleSubmit = (ev) => {
     ev.preventDefault();
+    return onSubmit(entity)
+      .then((e) => {
+        if (!e?.id) return null;
+        return saveSelectionPlanSettings(entity.marketing_settings, e.id).then(
+          () => {
+            if (onSaved) onSaved(e);
+          }
+        );
+      })
+      .catch(() => {
+        // errors are surfaced via error handler
+      });
+  };
+
+  const handleTrackGroupLink = (value) => onTrackGroupLink(entity.id, value);
+  const handleTrackGroupUnLink = (valueId) =>
+    onTrackGroupUnLink(entity.id, valueId);
+  const handleAddEventType = (value) => onAddEventType(entity.id, value);
+  const handleDeleteEventType = (valueId) =>
+    onDeleteEventType(entity.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(entity.id, valueId);
+  const handleAllowedMembersPageChange = (page) =>
+    onAllowedMembersPageChange(entity.id, page);
+
+  const handleAddAllowedMember = () =>
+    onAllowedMemberAdd(entity.id, newMemberEmail);
+
+  const handleImportAllowedMembers = (importFile) => {
+    if (importFile) onImportAllowedMembers(entity.id, importFile);
+    setShowImportModal(false);
+  };
+
+  const fetchSummitSelectionPlanExtraQuestions = (input, callback) => {
+    if (!input) return Promise.resolve({ options: [] });
+    querySelectionPlanExtraQuestions(currentSummit.id, input, callback);
+  };
 
-    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];
-    }
-
-    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,
+      entity.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,
+      entity.id,
       progressFlag.id
     );
-  }
-
-  handleRemoveProgressFlag(progressFlagId) {
-    this.props.onUnassignProgressFlag(progressFlagId);
-  }
-
-  handleImportAllowedMembers(importFile) {
-    if (importFile) {
-      this.props.onImportAllowedMembers(this.state.entity.id, importFile);
-    }
-    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)) {
+  };
+
+  const handleOnSwitchChange = (setting, value) => {
+    const newEntity = { ...entity };
+    if (
+      !Object.prototype.hasOwnProperty.call(
+        newEntity.marketing_settings,
+        setting
+      )
+    ) {
       newEntity.marketing_settings[setting] = { value: "" };
     }
-
     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")
+    setEntity(newEntity);
+  };
+
+  const toggleSection = (section) => {
+    setShowSection((prev) => (prev === section ? "main" : section));
+  };
+
+  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);
       },
-      {
-        columnKey: "label",
-        value: T.translate("order_extra_question_list.visible_question")
+      delete: { onClick: handleTrackGroupUnLink },
+      add: { onClick: 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
+        );
       },
-      {
-        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 }
-      }
-    };
+      delete: { onClick: handleDeleteEventType },
+      add: { onClick: handleAddEventType }
+    }
+  };
+
+  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,
+    actions: {
+      edit: { onClick: handleEditExtraQuestion },
+      delete: { onClick: handleDeleteExtraQuestion }
+    }
+  };
 
-    const allowedMembersColumns = [
-      { columnKey: "id", value: T.translate("edit_selection_plan.id") },
-      { columnKey: "email", value: T.translate("edit_selection_plan.email") }
-    ];
+  const ratingTypesColumns = [
+    { columnKey: "name", header: T.translate("rating_type_list.name") },
+    { columnKey: "weight", header: T.translate("rating_type_list.weight") }
+  ];
 
-    const allowedMembersOptions = {
-      sortCol: "email",
-      sortDir: 1,
-      actions: {
-        delete: { onClick: this.handleDeleteAllowedMember }
-      }
-    };
+  const ratingTypesOptions = {
+    actions: {
+      edit: { onClick: handleEditRatingType },
+      delete: { onClick: handleDeleteRatingType }
+    }
+  };
 
-    console.log("CHECK...", entity, currentSummit);
+  const actionTypesColumns = [
+    { columnKey: "label", header: T.translate("progress_flags.label") }
+  ];
 
-    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"
+  const actionTypesOptions = {
+    sortCol: actionTypesOrder,
+    sortDir: actionTypesOrderDir,
+    actions: {
+      delete: { onClick: handleRemoveProgressFlag }
+    }
+  };
+
+  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,
+    actions: {
+      delete: { onClick: handleDeleteAllowedMember }
+    }
+  };
+
+  return (
+    <Box
+      component="form"
+      className="selection-plan-form"
+      onSubmit={handleSubmit}
+    >
+      <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={hasErrors("name")}
+            onChange={handleChange}
+            value={entity.name}
+          />
+        </div>
+        <div className="col-md-2 checkboxes-div">
+          <FormControlLabel
+            control={
+              <Checkbox
                 id="is_enabled"
                 checked={entity.is_enabled}
-                onChange={this.handleChange}
-                className="form-check-input"
+                onChange={handleChange}
               />
-              <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"
+            }
+            label={T.translate("edit_selection_plan.enabled")}
+          />
+        </div>
+        <div className="col-md-2 checkboxes-div">
+          <FormControlLabel
+            control={
+              <Checkbox
                 id="is_hidden"
                 checked={entity.is_hidden}
-                onChange={this.handleChange}
-                className="form-check-input"
+                onChange={handleChange}
               />
-              <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"
+            }
+            label={T.translate("edit_selection_plan.hidden")}
+          />
+        </div>
+        <div className="col-md-2 checkboxes-div">
+          <FormControlLabel
+            control={
+              <Checkbox
                 id="allow_proposed_schedules"
                 checked={entity.allow_proposed_schedules}
-                onChange={this.handleChange}
-                className="form-check-input"
+                onChange={handleChange}
               />
-              <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"
+            }
+            label={T.translate("edit_selection_plan.allow_proposed_schedules")}
+          />
+        </div>
+        <div className="col-md-2 checkboxes-div">
+          <FormControlLabel
+            control={
+              <Checkbox
                 id="allow_new_presentations"
                 checked={entity.allow_new_presentations}
-                onChange={this.handleChange}
-                className="form-check-input"
+                onChange={handleChange}
               />
-              <label
-                className="form-check-label"
-                htmlFor="allow_new_presentations"
-              >
-                {T.translate("edit_selection_plan.allow_new_presentations")}
-              </label>
-            </div>
-          </div>
+            }
+            label={T.translate("edit_selection_plan.allow_new_presentations")}
+          />
         </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.submission_begin_date")}{" "}
+          </label>
+          <DateTimePicker
+            id="submission_begin_date"
+            onChange={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="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"
-                )}
-              />
-            </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 className="col-md-6">
+          <label>
+            {" "}
+            {T.translate("edit_selection_plan.submission_end_date")}{" "}
+          </label>
+          <DateTimePicker
+            id="submission_end_date"
+            onChange={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 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.max_submissions")}</label>
+          <Input
+            className="form-control"
+            type="number"
+            error={hasErrors("max_submission_allowed_per_user")}
+            id="max_submission_allowed_per_user"
+            value={entity.max_submission_allowed_per_user}
+            onChange={handleChange}
+            min={0}
+          />
         </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 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"
               )}
             />
-          </div>
+          </label>
+          <DateTimePicker
+            id="submission_lock_down_presentation_status_date"
+            onChange={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 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>
+      <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={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>
-
-        <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}
+        <div className="col-md-6">
+          <label> {T.translate("edit_selection_plan.voting_end_date")} </label>
+          <DateTimePicker
+            id="voting_end_date"
+            onChange={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={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={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={handleChange}
+            error={hasErrors("submission_period_disclaimer")}
+            license={process.env.JODIT_LICENSE_KEY}
+          />
+        </div>
+      </div>
+
+      <hr />
+
+      {entity.id !== 0 && (
+        <>
+          <Panel
+            show={showSection === "track_groups"}
+            title={T.translate("edit_selection_plan.track_groups")}
+            handleClick={() => 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={() => toggleSection("event_types")}
+          >
+            <SimpleLinkList
+              values={entity.event_types}
+              columns={eventTypesColumns}
+              options={eventTypesOptions}
+            />
+          </Panel>
+          <Panel
+            show={showSection === "extra_questions"}
+            title={T.translate("edit_selection_plan.extra_questions")}
+            handleClick={() => toggleSection("extra_questions")}
+          >
+            <div className="row">
+              <Many2ManyDropDown
+                id="addAllowedExtraQuestions"
+                isClearable
+                placeholder={T.translate(
+                  "edit_selection_plan.placeholders.link_question"
+                )}
+                fetchOptions={fetchSummitSelectionPlanExtraQuestions}
+                onAdd={linkSummitSelectionPlanExtraQuestion}
               />
-            </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}
+              <div className="col-md-6 text-right col-md-offset-6">
+                <Button
+                  type="button"
+                  variant="contained"
+                  className="right-space"
+                  onClick={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}
+                onReorder={updateExtraQuestionOrder}
+                updateOrderKey="order"
               />
-            </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
+            )}
+          </Panel>
+          <Panel
+            show={showSection === "email_templates"}
+            title={T.translate("edit_selection_plan.email_templates")}
+            handleClick={() => toggleSection("email_templates")}
+          >
+            <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.link_question"
+                    "edit_selection_plan.placeholders.creator_notification_email_select_template"
                   )}
-                  fetchOptions={this.fetchSummitSelectionPlanExtraQuestions}
-                  onAdd={this.linkSummitSelectionPlanExtraQuestion}
+                  onChange={handleNotificationEmailTemplateChange}
+                  isClearable
+                  plainValue
                 />
-                <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"
+              <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
+                  }
+                  placeholder={T.translate(
+                    "edit_selection_plan.placeholders.moderator_notification_email_select_template"
+                  )}
+                  onChange={handleNotificationEmailTemplateChange}
+                  isClearable
+                  plainValue
                 />
-              )}
-            </Panel>
-            <Panel
-              show={showSection === "email_templates"}
-              title={T.translate("edit_selection_plan.email_templates")}
-              handleClick={() => {
-                this.toggleSection("email_templates");
-              }}
-            >
-              <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"
-                    )}
-                    onChange={this.handleNotificationEmailTemplateChange}
-                    isClearable
-                    plainValue
-                  />
-                </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
-                    }
-                    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"
-                    )}
-                  </label>
-                  <EmailTemplateInput
-                    id="presentation_speaker_notification_email_template"
-                    value={
-                      entity.presentation_speaker_notification_email_template
-                    }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.speaker_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"
+                  )}
+                </label>
+                <EmailTemplateInput
+                  id="presentation_speaker_notification_email_template"
+                  value={
+                    entity.presentation_speaker_notification_email_template
+                  }
+                  placeholder={T.translate(
+                    "edit_selection_plan.placeholders.speaker_notification_email_select_template"
+                  )}
+                  onChange={handleNotificationEmailTemplateChange}
+                  isClearable
+                  plainValue
+                />
               </div>
-            </Panel>
-            <Panel
-              show={showSection === "track_chair_settings"}
-              title={T.translate("track_chair_settings.title")}
-              handleClick={() => {
-                this.toggleSection("track_chair_settings");
-              }}
-            >
-              <div className="row">
-                <div className="col-md-4 checkboxes-div">
-                  <div className="form-check abc-checkbox">
-                    <input
-                      type="checkbox"
+            </div>
+          </Panel>
+          <Panel
+            show={showSection === "track_chair_settings"}
+            title={T.translate("track_chair_settings.title")}
+            handleClick={() => toggleSection("track_chair_settings")}
+          >
+            <div className="row">
+              <div className="col-md-4 checkboxes-div">
+                <FormControlLabel
+                  control={
+                    <Checkbox
                       id="allow_track_change_requests"
                       checked={entity.allow_track_change_requests}
-                      onChange={this.handleChange}
-                      className="form-check-input"
+                      onChange={handleChange}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor="allow_track_change_requests"
+                  }
+                  label={T.translate(
+                    "track_chair_settings.allow_change_requests"
+                  )}
+                />
+              </div>
+            </div>
+            <hr />
+            <div className="row">
+              <div className="col-md-6 text-right col-md-offset-6">
+                <Button
+                  type="button"
+                  variant="contained"
+                  className="right-space"
+                  onClick={handleAddRatingType}
+                >
+                  {T.translate("track_chair_settings.add_rating_type")}
+                </Button>
+              </div>
+            </div>
+            <SortableTable
+              options={ratingTypesOptions}
+              data={entity.track_chair_rating_types}
+              columns={ratingTypesColumns}
+              onReorder={onUpdateRatingTypeOrder}
+              updateOrderKey="order"
+            />
+          </Panel>
+          <Panel
+            show={showSection === "presentation_action_types"}
+            title={T.translate("edit_selection_plan.presentation_action_types")}
+            handleClick={() => toggleSection("presentation_action_types")}
+          >
+            <div className="row">
+              <Many2ManyDropDown
+                id="addAllowedPresentationActionType"
+                isClearable
+                CSSClass="col-md-9"
+                placeholder={T.translate(
+                  "edit_selection_plan.placeholders.link_presentation_action_type"
+                )}
+                fetchOptions={fetchSummitPresentationActionTypes}
+                onAdd={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 && (
+              <SortableTable
+                options={actionTypesOptions}
+                data={entity.allowed_presentation_action_types}
+                columns={actionTypesColumns}
+                onReorder={onUpdateProgressFlagOrder}
+                updateOrderKey="order"
+              />
+            )}
+          </Panel>
+          {!propsEntity.is_hidden && (
+            <Panel
+              show={showSection === "allowed_members"}
+              title={T.translate("edit_selection_plan.allowed_members")}
+              handleClick={() => toggleSection("allowed_members")}
+              className="allowed-members-panel"
+            >
+              <div className="allowed-members-header">
+                <div className="pull-right input-group">
+                  <input
+                    className="form-control"
+                    onChange={(ev) => setNewMemberEmail(ev.target.value)}
+                    value={newMemberEmail}
+                  />
+                  <span className="input-group-btn">
+                    <Button
+                      type="button"
+                      variant="outlined"
+                      className="add-button"
+                      onClick={handleAddAllowedMember}
+                      disabled={!newMemberEmail}
                     >
-                      {T.translate(
-                        "track_chair_settings.allow_change_requests"
-                      )}
-                    </label>
-                  </div>
+                      {T.translate("general.add")}
+                    </Button>
+                  </span>
                 </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}
+
+                <div className="pull-left input-group">
+                  <Button
+                    type="button"
+                    variant="contained"
+                    onClick={() => setShowImportModal(true)}
                   >
-                    {T.translate("track_chair_settings.add_rating_type")}
-                  </button>
+                    {T.translate("edit_selection_plan.import")}
+                  </Button>
                 </div>
               </div>
-              <SortableTable
-                options={ratingTypesOptions}
-                data={entity.track_chair_rating_types}
-                columns={ratingTypesColumns}
-                dropCallback={this.props.onUpdateRatingTypeOrder}
-                orderField="order"
+
+              <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={handleAllowedMembersPageChange}
               />
             </Panel>
-            <Panel
-              show={showSection === "presentation_action_types"}
-              title={T.translate(
-                "edit_selection_plan.presentation_action_types"
-              )}
-              handleClick={() => {
-                this.toggleSection("presentation_action_types");
-              }}
-            >
-              <div className="row">
-                <Many2ManyDropDown
-                  id="addAllowedPresentationActionType"
-                  isClearable
-                  CSSClass="col-md-9"
-                  placeholder={T.translate(
-                    "edit_selection_plan.placeholders.link_presentation_action_type"
+          )}
+          <Panel
+            show={showSection === "cfp_settings"}
+            title={T.translate("edit_selection_plan.cfp_settings")}
+            handleClick={() => toggleSection("cfp_settings")}
+          >
+            <div className="row form-group">
+              <div className="col-md-12">
+                <label>
+                  {" "}
+                  {T.translate(
+                    "edit_selection_plan.cfp_presentation_edition_custom_message"
                   )}
-                  fetchOptions={this.fetchSummitPresentationActionTypes}
-                  onAdd={this.linkSummitProgressFlag}
+                  &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={
+                    entity.marketing_settings
+                      .cfp_presentation_edition_custom_message?.value || ""
+                  }
+                  license={process.env.JODIT_LICENSE_KEY}
                 />
               </div>
-              {entity.allowed_presentation_action_types.length === 0 && (
-                <div>
+            </div>
+            <div className="row form-group">
+              <div className="col-md-12">
+                <label>
+                  {" "}
                   {T.translate(
-                    "edit_selection_plan.no_presentation_action_types"
+                    "edit_selection_plan.allowed_presentation_questions"
                   )}
-                </div>
-              )}
-              {entity.allowed_presentation_action_types.length > 0 && (
-                <SortableTable
-                  options={actionTypesOptions}
-                  data={entity.allowed_presentation_action_types}
-                  columns={actionTypesColumns}
-                  dropCallback={this.props.onUpdateProgressFlagOrder}
-                  orderField="order"
+                </label>
+                <Dropdown
+                  id="allowed_presentation_questions"
+                  value={entity.allowed_presentation_questions}
+                  placeholder={T.translate(
+                    "edit_selection_plan.placeholders.allowed_presentation_questions"
+                  )}
+                  onChange={handleChange}
+                  options={DEFAULT_ALLOWED_QUESTIONS}
+                  isMulti
                 />
-              )}
-            </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>
-
-                <Table
-                  data={allowedMembers.data}
-                  columns={allowedMembersColumns}
-                  options={allowedMembersOptions}
+              </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={handleChange}
+                  options={DEFAULT_ALLOWED_EDITABLE_QUESTIONS}
+                  isMulti
                 />
-                <Pagination
-                  bsSize="medium"
-                  prev
-                  next
-                  first
-                  last
-                  ellipsis
-                  boundaryLinks
-                  maxButtons={10}
-                  items={allowedMembers.lastPage}
-                  activePage={allowedMembers.currentPage}
-                  onSelect={this.handleAllowedMembersPageChange}
+              </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 || ""
+                  }
+                  placeholder={T.translate(
+                    "edit_selection_plan.placeholders.cfp_presentation_edition_default_tab"
+                  )}
+                  onChange={handleChange}
+                  options={DEFAULT_CFP_PRESENTATION_EDITION_TABS}
+                  isMulti={false}
+                  isClearable
                 />
-              </Panel>
-            )}
-            <Panel
-              show={showSection === "cfp_settings"}
-              title={T.translate("edit_selection_plan.cfp_settings")}
-              handleClick={() => {
-                this.toggleSection("cfp_settings");
-              }}
-            >
-              <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"
-                      )}
-                    />
-                  </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>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.allowed_presentation_questions"
-                    )}
-                  </label>
-                  <Dropdown
-                    id="allowed_presentation_questions"
-                    value={entity.allowed_presentation_questions}
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.allowed_presentation_questions"
+            </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"
                     )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_ALLOWED_QUESTIONS}
-                    isMulti
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_landing_page_title"
+                  className="form-control"
+                  error={hasErrors("cfp_landing_page_title")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings.cfp_landing_page_title?.value ||
+                    ""
+                  }
+                />
               </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"
+              <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"
                     )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_ALLOWED_EDITABLE_QUESTIONS}
-                    isMulti
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_track_question_label"
+                  className="form-control"
+                  error={hasErrors("cfp_track_question_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings.cfp_track_question_label?.value ||
+                    ""
+                  }
+                />
               </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 || ""
-                    }
-                    placeholder={T.translate(
-                      "edit_selection_plan.placeholders.cfp_presentation_edition_default_tab"
+            </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"
                     )}
-                    onChange={this.handleChange}
-                    options={DEFAULT_CFP_PRESENTATION_EDITION_TABS}
-                    isMulti={false}
-                    isClearable
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_speakers_singular_label"
+                  className="form-control"
+                  error={hasErrors("cfp_speakers_singular_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings.cfp_speakers_singular_label
+                      ?.value || ""
+                  }
+                />
               </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"
-                      )}
-                    />
-                  </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"
+              <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"
                     )}
-                    &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={this.hasErrors("cfp_track_question_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_track_question_label
-                        ?.value || ""
-                    }
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_speakers_plural_label"
+                  className="form-control"
+                  error={hasErrors("cfp_speakers_plural_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings.cfp_speakers_plural_label
+                      ?.value || ""
+                  }
+                />
               </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_speakers_singular_label"
+            </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"
                     )}
-                    &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={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"
+                </label>
+                <Input
+                  id="cfp_presentations_singular_label"
+                  className="form-control"
+                  error={hasErrors("cfp_presentations_singular_label")}
+                  onChange={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"
                     )}
-                    &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={this.hasErrors("cfp_speakers_plural_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_speakers_plural_label
-                        ?.value || ""
-                    }
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_presentations_plural_label"
+                  className="form-control"
+                  error={hasErrors("cfp_presentations_plural_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings.cfp_presentations_plural_label
+                      ?.value || ""
+                  }
+                />
               </div>
-              <div className="row form-group">
-                <div className="col-md-6">
-                  <label>
-                    {" "}
-                    {T.translate(
-                      "edit_selection_plan.cfp_presentations_singular_label"
+            </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"
                     )}
-                    &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={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"
+                </label>
+                <Input
+                  id="cfp_presentation_summary_title_label"
+                  className="form-control"
+                  error={hasErrors("cfp_presentation_summary_title_label")}
+                  onChange={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"
                     )}
-                    &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={this.hasErrors("cfp_presentations_plural_label")}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings.cfp_presentations_plural_label
-                        ?.value || ""
-                    }
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_presentation_summary_abstract_label"
+                  className="form-control"
+                  error={hasErrors("cfp_presentation_summary_abstract_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings
+                      .cfp_presentation_summary_abstract_label?.value || ""
+                  }
+                />
               </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"
-                      )}
-                    />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_title_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_title_label"
+            </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"
                     )}
-                    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"
-                      )}
-                    />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_abstract_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_abstract_label"
+                </label>
+                <Input
+                  id="cfp_presentation_summary_social_summary_label"
+                  className="form-control"
+                  error={hasErrors(
+                    "cfp_presentation_summary_social_summary_label"
+                  )}
+                  onChange={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"
                     )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_abstract_label?.value || ""
-                    }
                   />
-                </div>
+                </label>
+                <Input
+                  id="cfp_presentation_summary_links_label"
+                  className="form-control"
+                  error={hasErrors("cfp_presentation_summary_links_label")}
+                  onChange={handleChange}
+                  value={
+                    entity.marketing_settings
+                      .cfp_presentation_summary_links_label?.value || ""
+                  }
+                />
               </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"
-                      )}
-                    />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_social_summary_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_social_summary_label"
+            </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"
                     )}
-                    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"
-                      )}
-                    />
-                  </label>
-                  <Input
-                    id="cfp_presentation_summary_links_label"
-                    className="form-control"
-                    error={this.hasErrors(
-                      "cfp_presentation_summary_links_label"
+                </label>{" "}
+                <br />
+                <Switch
+                  checked={
+                    entity.marketing_settings
+                      .cfp_presentation_summary_hide_track_selection?.value ||
+                    false
+                  }
+                  onChange={(val) => {
+                    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"
                     )}
-                    onChange={this.handleChange}
-                    value={
-                      entity.marketing_settings
-                        .cfp_presentation_summary_links_label?.value || ""
-                    }
                   />
-                </div>
+                </label>{" "}
+                <br />
+                <Switch
+                  checked={
+                    entity.marketing_settings
+                      .cfp_presentation_summary_hide_activity_type_selection
+                      ?.value || false
+                  }
+                  onChange={(val) => {
+                    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">
                   <label>
-                    {" "}
                     {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_hide_track_selection"
+                      "edit_selection_plan.cfp_presentation_selection_plan_link"
                     )}
-                    &nbsp;
-                    <i
-                      className="fa fa-info-circle"
-                      aria-hidden="true"
-                      title={T.translate(
-                        "edit_selection_plan.cfp_presentation_summary_hide_track_selection_info"
-                      )}
-                    />
-                  </label>{" "}
+                  </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"
-                  />
+                  <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">
                   <label>
-                    {" "}
                     {T.translate(
-                      "edit_selection_plan.cfp_presentation_summary_hide_activity_type_selection"
+                      "edit_selection_plan.cfp_presentation_all_selection_plan_link"
                     )}
-                    &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>{" "}
+                  </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"
-                  />
+                  <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>
-              {window.CFP_APP_BASE_URL && (
-                <div className="row form-group">
-                  <div className="col-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/${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">
-                    <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>
-                  </div>
-                </div>
-              )}
-            </Panel>
-          </>
-        )}
-
-        <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>
+            )}
+          </Panel>
+        </>
+      )}
+
+      <div className="row">
+        <div className="col-md-12 submit-buttons">
+          <Button type="submit" variant="contained" className="pull-right">
+            {T.translate("general.save")}
+          </Button>
         </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}
-        >
-          * email ( text )<br />
-        </ImportModal>
-      </form>
-    );
-  }
-}
+      </div>
+
+      <ImportModal
+        title={T.translate("edit_selection_plan.import_allowed_members")}
+        show={showImportModal}
+        wrapperClass="allowed-members-import-upload-wrapper"
+        onHide={() => setShowImportModal(false)}
+        onIngest={handleImportAllowedMembers}
+      >
+        * email ( text )<br />
+      </ImportModal>
+    </Box>
+  );
+};
 
 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/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..d0f6a62fe 100644
--- a/src/layouts/selection-plan-layout.js
+++ b/src/layouts/selection-plan-layout.js
@@ -38,7 +38,13 @@ const SelectionPlanLayout = ({ match, currentSummit }) => (
         strict
         exact
         path={`${match.url}/new`}
-        component={SelectionPlanIdLayout}
+        render={() => <Redirect to={`${match.url}`} />}
+      />
+      <Route
+        strict
+        exact
+        path={`${match.url}/:selection_plan_id(\\d+)`}
+        component={SelectionPlanListPage}
       />
       <Route
         path={`${match.url}/:selection_plan_id(\\d+)`}
diff --git a/src/pages/selection-plans/edit-selection-plan-page.js b/src/pages/selection-plans/edit-selection-plan-page.js
index 07d37b595..8fef6fe12 100644
--- a/src/pages/selection-plans/edit-selection-plan-page.js
+++ b/src/pages/selection-plans/edit-selection-plan-page.js
@@ -35,13 +35,13 @@ import {
   updateRatingTypeOrder,
   updateSelectionPlanExtraQuestionOrder
 } from "../../actions/selection-plan-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
 
 const EditSelectionPlanPage = ({
   currentSummit,
   entity,
   allowedMembers,
   errors,
+  onSaved,
   history,
   extraQuestionsOrder,
   extraQuestionsOrderDir,
@@ -64,10 +64,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 +180,39 @@ 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}
+      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..336e8343a 100644
--- a/src/pages/selection-plans/selection-plan-list-page.js
+++ b/src/pages/selection-plans/selection-plan-list-page.js
@@ -11,169 +11,281 @@
  * 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 Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Divider from "@mui/material/Divider";
+import Grid2 from "@mui/material/Grid2";
+import IconButton from "@mui/material/IconButton";
+import Button from "@mui/material/Button";
+import AddIcon from "@mui/icons-material/Add";
+import CloseIcon from "@mui/icons-material/Close";
+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 EditSelectionPlanPage from "./edit-selection-plan-page";
 
 const SelectionPlanListPage = ({
   currentSummit,
   history,
+  match,
   selectionPlans,
+  currentSelectionPlan,
+  currentSelectionPlanErrors,
   totalSelectionPlans,
+  perPage,
   term,
   order,
   orderDir,
-  lastPage,
   currentPage,
+  getSelectionPlan,
   getSelectionPlans,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan,
   deleteSelectionPlan
 }) => {
+  const [openSelectionPlanPopup, setOpenSelectionPlanPopup] = useState(false);
+  const routeSelectionPlanId = match?.params?.selection_plan_id;
+
+  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();
+    getSelectionPlans(term, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
   }, []);
 
-  const handleEdit = (selectionPlanId) => {
-    history.push(
-      `/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`
-    );
+  useEffect(() => {
+    if (routeSelectionPlanId) {
+      openEditModal(routeSelectionPlanId);
+    }
+  }, [openEditModal, routeSelectionPlanId]);
+
+  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).then(() => refreshSelectionPlans());
   };
 
   const handleNew = () => {
-    history.push(`/app/summits/${currentSummit.id}/selection-plans/new`);
+    resetSelectionPlanForm();
+    setOpenSelectionPlanPopup(true);
+  };
+
+  const handleClosePopup = () => {
+    resetSelectionPlanForm();
+    setOpenSelectionPlanPopup(false);
+
+    if (routeSelectionPlanId) {
+      history.replace(`/app/summits/${currentSummit.id}/selection-plans`);
+    }
+  };
+
+  const handleSelectionPlanSaved = () => {
+    setOpenSelectionPlanPopup(false);
+    refreshSelectionPlans();
+
+    if (routeSelectionPlanId) {
+      history.replace(`/app/summits/${currentSummit.id}/selection-plans`);
+    }
   };
 
-  const handleSort = (index, key, dir) => {
-    getSelectionPlans(term, currentPage, key, dir);
+  const handleSort = (key, dir) => {
+    getSelectionPlans(term, currentPage, perPage, key, dir);
   };
 
-  const handlePageChange = (newPage) => {
-    getSelectionPlans(term, newPage, order, orderDir);
+  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>
       )}
+
+      <Dialog
+        open={openSelectionPlanPopup}
+        onClose={handleClosePopup}
+        maxWidth="xl"
+        fullWidth
+        disableEnforceFocus
+        disableAutoFocus
+        disableRestoreFocus
+      >
+        <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
+          {currentSelectionPlan?.id
+            ? T.translate("general.edit")
+            : T.translate("general.add")}{" "}
+          {T.translate("edit_selection_plan.selection_plan")}
+          <IconButton size="small" onClick={handleClosePopup}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </DialogTitle>
+        <Divider />
+        <DialogContent>
+          <EditSelectionPlanPage
+            onSaved={handleSelectionPlanSaved}
+            history={history}
+            currentSummit={currentSummit}
+            entity={currentSelectionPlan}
+            errors={currentSelectionPlanErrors}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
 
 const mapStateToProps = ({
   currentSummitState,
-  currentSelectionPlanListState
+  currentSelectionPlanListState,
+  currentSelectionPlanState
 }) => ({
   currentSummit: currentSummitState.currentSummit,
-  ...currentSelectionPlanListState
+  ...currentSelectionPlanListState,
+  currentSelectionPlan: currentSelectionPlanState.entity,
+  currentSelectionPlanErrors: currentSelectionPlanState.errors
 });
 
 export default connect(mapStateToProps, {
   getSelectionPlans,
+  getSelectionPlan,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan,
   deleteSelectionPlan
 })(SelectionPlanListPage);
diff --git a/src/pages/sponsors/__tests__/edit-sponsor-page.test.js b/src/pages/sponsors/__tests__/edit-sponsor-page.test.js
index 4bec7b1c6..9e6d80c32 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
       };
     }