diff --git a/src/components/forms/event-category-form.js b/src/components/forms/event-category-form.js
index 8bde330d3..6a123b04e 100644
--- a/src/components/forms/event-category-form.js
+++ b/src/components/forms/event-category-form.js
@@ -11,434 +11,478 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useFormik, FormikProvider } from "formik";
+import * as yup from "yup";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"
-import Panel from "openstack-uicore-foundation/lib/components/sections/panel"
-import TagInput from "openstack-uicore-foundation/lib/components/inputs/tag-input"
-import UploadInput from "openstack-uicore-foundation/lib/components/inputs/upload-input"
-import AccessLevelsInput from "openstack-uicore-foundation/lib/components/inputs/access-levels-input"
-import SortableTable from "openstack-uicore-foundation/lib/components/table-sortable";
-import TextEditorV3 from "openstack-uicore-foundation/lib/components/inputs/editor-input-v3";
 import {
-  isEmpty,
-  scrollToError,
-  shallowEqual,
-  hasErrors
-} from "../../utils/methods";
-import TrackDropdown from "../inputs/track-dropdown";
-
-class EventCategoryForm extends React.Component {
-  constructor(props) {
-    super(props);
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Grid2,
+  InputLabel,
+  TextField,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { UploadInputV3 } from "openstack-uicore-foundation/lib/components";
+import { useSnackbarMessage } from "openstack-uicore-foundation/lib/components/mui/snackbar-notification";
+import MuiTableSortable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import {
+  queryTags,
+  queryAccessLevels
+} from "openstack-uicore-foundation/lib/utils/query-actions";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
+import FormikTextEditor from "openstack-uicore-foundation/lib/components/mui/formik-inputs/texteditor";
+import MuiFormikAsyncAutocomplete from "openstack-uicore-foundation/lib/components/mui/formik-inputs/async-select";
+import MuiFormikColorField from "../mui/formik-inputs/mui-formik-color-field";
+import useScrollToError from "../../hooks/useScrollToError";
+import {
+  requiredStringValidation,
+  requiredHTMLValidation,
+  hexColorValidation
+} from "../../utils/yup";
 
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors,
-      showSection: "main",
-      subtrack: null
-    };
+const validationSchema = yup.object().shape({
+  name: requiredStringValidation(),
+  code: requiredStringValidation(),
+  color: hexColorValidation().required(T.translate("validation.required")),
+  text_color: hexColorValidation().required(T.translate("validation.required")),
+  description: requiredHTMLValidation()
+});
 
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleUploadPic = this.handleUploadPic.bind(this);
-    this.handleRemovePic = this.handleRemovePic.bind(this);
-    this.handleEditSubCategory = this.handleEditSubCategory.bind(this);
-    this.handleLinkSubCategory = this.handleLinkSubCategory.bind(this);
-    this.handleUnlinkSubCategory = this.handleUnlinkSubCategory.bind(this);
-    this.handleUpdateSubCategoryOrder =
-      this.handleUpdateSubCategoryOrder.bind(this);
+const subtrackColumns = [
+  { columnKey: "id", header: T.translate("general.id") },
+  { columnKey: "name", header: T.translate("event_category_list.name") },
+  { columnKey: "code", header: T.translate("event_category_list.code") },
+  {
+    columnKey: "color",
+    header: T.translate("event_category_list.color"),
+    render: (row) => (
+      <Box
+        sx={{
+          width: 24,
+          height: 24,
+          borderRadius: 0.5,
+          backgroundColor: row.color?.startsWith("#")
+            ? row.color
+            : `#${row.color}`
+        }}
+      />
+    )
   }
+];
 
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
+const EventCategoryForm = ({
+  currentSummit,
+  entity,
+  errors,
+  history,
+  onSubmit,
+  onRemoveImage,
+  onLinkSubCategory,
+  onUnlinkSubCategory,
+  onUpdateSubCategoryOrder
+}) => {
+  const { errorMessage } = useSnackbarMessage();
+  const [isSaving, setIsSaving] = useState(false);
+  const [subtrackToLink, setSubtrackToLink] = useState(null);
+  const [iconUrl, setIconUrl] = useState(entity.icon_url);
+  const [scheduleSettingsExpanded, setScheduleSettingsExpanded] =
+    useState(false);
 
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
+  useEffect(() => {
+    setIconUrl(entity.icon_url);
+  }, [entity.icon_url]);
 
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
-    }
+  const handleSubmit = (values) => {
+    setIsSaving(true);
+    const normalizedValues = {
+      ...values,
+      allowed_tags: values.allowed_tags.map((t) => ({
+        id: parseInt(t.value, 10),
+        tag: t.label
+      })),
+      allowed_access_levels: values.allowed_access_levels.map((al) => ({
+        id: parseInt(al.value, 10),
+        name: al.label
+      }))
+    };
+    Promise.resolve(onSubmit(normalizedValues)).finally(() =>
+      setIsSaving(false)
+    );
+  };
 
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  const formik = useFormik({
+    initialValues: {
+      id: entity.id,
+      name: entity.name,
+      code: entity.code,
+      color: entity.color,
+      text_color: entity.text_color,
+      description: entity.description,
+      session_count: entity.session_count,
+      alternate_count: entity.alternate_count,
+      lightning_count: entity.lightning_count,
+      lightning_alternate_count: entity.lightning_alternate_count,
+      voting_visible: entity.voting_visible,
+      chair_visible: entity.chair_visible,
+      allowed_tags: (entity.allowed_tags || []).map((t) => ({
+        value: String(t.id),
+        label: t.tag
+      })),
+      allowed_access_levels: (entity.allowed_access_levels || []).map((al) => ({
+        value: String(al.id),
+        label: al.name
+      })),
+      proposed_schedule_transition_time:
+        entity.proposed_schedule_transition_time ?? ""
+    },
+    validationSchema,
+    enableReinitialize: true,
+    onSubmit: handleSubmit
+  });
 
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
-    let { value, id } = ev.target;
+  useScrollToError(formik);
 
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
+  useEffect(() => {
+    if (errors && Object.keys(errors).length > 0) {
+      formik.setErrors(errors);
+      formik.setTouched(
+        Object.keys(errors).reduce((acc, key) => ({ ...acc, [key]: true }), {})
+      );
     }
+  }, [errors]);
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity, errors });
-  }
+  const handleIconUploadComplete = (response) => {
+    setIconUrl(response.url ?? response.file_url ?? response.path ?? null);
+  };
 
-  handleSubmit(ev) {
-    ev.preventDefault();
-    this.props.onSubmit(this.state.entity);
-  }
+  const handleIconUploadError = () => {
+    errorMessage(T.translate("edit_event_category.icon_upload_error"));
+  };
 
-  handleRemovePic() {
-    this.props.onRemoveImage(this.state.entity.id);
-  }
+  const handleRemoveIcon = () => {
+    setIconUrl(null);
+    onRemoveImage(entity.id);
+  };
 
-  handleUploadPic(file) {
-    const formData = new FormData();
-    formData.append("file", file);
-    this.props.onUploadImage(this.state.entity, formData);
-  }
-
-  toggleSection(section, ev) {
-    const { showSection } = this.state;
-    const newShowSection = showSection === section ? "main" : section;
-    ev.preventDefault();
-
-    this.setState({ showSection: newShowSection });
-  }
-
-  handleEditSubCategory(id) {
-    const { history, currentSummit } = this.props;
-    history.push(`/app/summits/${currentSummit.id}/event-categories/${id}`);
-  }
+  const availableSubTracks = currentSummit.tracks.filter(
+    (t) =>
+      !t.parent_id &&
+      !entity.subtracks?.map((st) => st.id).includes(t.id) &&
+      t.id !== entity.id
+  );
 
-  handleLinkSubCategory() {
-    const { entity, subtrack } = this.state;
-    this.setState({ subtrack: null });
-    this.props.onLinkSubCategory(entity.id, subtrack);
-  }
-
-  handleUnlinkSubCategory(subtrackId) {
-    const { entity } = this.state;
-    this.props.onUnlinkSubCategory(entity.id, subtrackId);
-  }
+  const handleAddSubtrack = () => {
+    if (!subtrackToLink) return;
+    onLinkSubCategory(entity.id, subtrackToLink.id);
+    setSubtrackToLink(null);
+  };
 
-  handleUpdateSubCategoryOrder(subtracks, subtrackId, newOrder) {
-    const { entity } = this.state;
-    this.props.onUpdateSubCategoryOrder(entity.id, subtrackId, newOrder);
-  }
+  const handleEditSubtrack = (subtrack) =>
+    history.push(
+      `/app/summits/${currentSummit.id}/event-categories/${subtrack.id}`
+    );
 
-  render() {
-    const { entity, errors, showSection } = this.state;
-    const { currentSummit } = this.props;
+  const handleUnlinkSubtrack = (subtrackId) =>
+    onUnlinkSubCategory(entity.id, subtrackId);
 
-    const availableSubTracks = currentSummit.tracks.filter(
-      (t) =>
-        !t.parent_id &&
-        !entity.subtracks.map((t) => t.id).includes(t.id) &&
-        t.id !== entity.id
-    );
+  const handleReorderSubtracks = (_newOrder, subtrackId, newSubtrackOrder) =>
+    onUpdateSubCategoryOrder(entity.id, subtrackId, newSubtrackOrder);
 
-    const table_options = {
-      actions: {
-        edit: { onClick: this.handleEditSubCategory },
-        delete: { onClick: this.handleUnlinkSubCategory }
-      }
-    };
+  return (
+    <FormikProvider value={formik}>
+      <Box component="form" onSubmit={formik.handleSubmit}>
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="name">
+              {T.translate("edit_event_category.name")} *
+            </InputLabel>
+            <MuiFormikTextField name="name" margin="none" fullWidth />
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="code">
+              {T.translate("edit_event_category.code")} *
+            </InputLabel>
+            <MuiFormikTextField name="code" margin="none" fullWidth />
+          </Grid2>
+          <Grid2 size={{ xs: 6, md: 2 }}>
+            <InputLabel htmlFor="color">
+              {T.translate("edit_event_category.color")} *
+            </InputLabel>
+            <MuiFormikColorField name="color" />
+          </Grid2>
+          <Grid2 size={{ xs: 6, md: 2 }}>
+            <InputLabel htmlFor="text_color">
+              {T.translate("edit_event_category.text_color")} *
+            </InputLabel>
+            <MuiFormikColorField name="text_color" />
+          </Grid2>
+        </Grid2>
 
-    const columns = [
-      { columnKey: "id", value: T.translate("general.id") },
-      { columnKey: "name", value: T.translate("event_category_list.name") },
-      { columnKey: "code", value: T.translate("event_category_list.code") },
-      { columnKey: "color", value: T.translate("event_category_list.color") }
-    ];
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12}>
+            <InputLabel htmlFor="description">
+              {T.translate("edit_event_category.description")} *
+            </InputLabel>
+            <FormikTextEditor name="description" />
+          </Grid2>
+        </Grid2>
 
-    return (
-      <form className="event-type-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_event_category.name")} *</label>
-            <Input
-              id="name"
-              value={entity.name}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("name", errors)}
-            />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_event_category.code")} *</label>
-            <Input
-              id="code"
-              value={entity.code}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("code", errors)}
-            />
-          </div>
-          <div className="col-md-2">
-            <label> {T.translate("edit_event_category.color")} *</label>
-            <Input
-              id="color"
-              type="color"
-              value={entity.color}
-              onChange={this.handleChange}
-              className="form-control"
-            />
-          </div>
-          <div className="col-md-2">
-            <label> {T.translate("edit_event_category.text_color")} *</label>
-            <Input
-              id="text_color"
-              type="color"
-              value={entity.text_color}
-              onChange={this.handleChange}
-              className="form-control"
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("edit_event_category.description")} *</label>
-            <TextEditorV3
-              id="description"
-              placeholder="Enter text"
-              value={entity.description}
-              onChange={this.handleChange}
-              error={hasErrors("description", errors)}
-              license={process.env.JODIT_LICENSE_KEY}
-            />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-3">
-            <label> {T.translate("edit_event_category.number_sessions")}</label>
-            <Input
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
+            <InputLabel htmlFor="session_count">
+              {T.translate("edit_event_category.number_sessions")}
+            </InputLabel>
+            <MuiFormikTextField
+              name="session_count"
               type="number"
-              id="session_count"
-              value={entity.session_count}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("session_count", errors)}
+              margin="none"
+              fullWidth
             />
-          </div>
-          <div className="col-md-3">
-            <label>
-              {" "}
+          </Grid2>
+          <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
+            <InputLabel htmlFor="alternate_count">
               {T.translate("edit_event_category.number_alternates")}
-            </label>
-            <Input
+            </InputLabel>
+            <MuiFormikTextField
+              name="alternate_count"
               type="number"
-              id="alternate_count"
-              value={entity.alternate_count}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("alternate_count", errors)}
+              margin="none"
+              fullWidth
             />
-          </div>
-          <div className="col-md-3">
-            <label>
-              {" "}
+          </Grid2>
+          <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
+            <InputLabel htmlFor="lightning_count">
               {T.translate("edit_event_category.number_lightning")}
-            </label>
-            <Input
+            </InputLabel>
+            <MuiFormikTextField
+              name="lightning_count"
               type="number"
-              id="lightning_count"
-              value={entity.lightning_count}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("lightning_count", errors)}
+              margin="none"
+              fullWidth
             />
-          </div>
-          <div className="col-md-3">
-            <label>
-              {" "}
+          </Grid2>
+          <Grid2 size={{ xs: 12, sm: 6, md: 3 }}>
+            <InputLabel htmlFor="lightning_alternate_count">
               {T.translate("edit_event_category.number_lightning_alternates")}
-            </label>
-            <Input
+            </InputLabel>
+            <MuiFormikTextField
+              name="lightning_alternate_count"
               type="number"
-              id="lightning_alternate_count"
-              value={entity.lightning_alternate_count}
-              onChange={this.handleChange}
-              className="form-control"
-              error={hasErrors("lightning_alternate_count", errors)}
+              margin="none"
+              fullWidth
             />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-3 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="voting_visible"
-                checked={entity.voting_visible}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="voting_visible">
-                {T.translate("edit_event_category.visible_voters")}
-              </label>
-            </div>
-          </div>
-          <div className="col-md-6 checkboxes-div">
-            <div className="form-check abc-checkbox">
-              <input
-                type="checkbox"
-                id="chair_visible"
-                checked={entity.chair_visible}
-                onChange={this.handleChange}
-                className="form-check-input"
-              />
-              <label className="form-check-label" htmlFor="chair_visible">
-                {T.translate("edit_event_category.visible_track_chairs")}
-              </label>
-            </div>
-          </div>
-        </div>
+          </Grid2>
+        </Grid2>
 
-        <hr />
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, sm: 4 }}>
+            <MuiFormikCheckbox
+              name="voting_visible"
+              label={T.translate("edit_event_category.visible_voters")}
+            />
+          </Grid2>
+          <Grid2 size={{ xs: 12, sm: 8 }}>
+            <MuiFormikCheckbox
+              name="chair_visible"
+              label={T.translate("edit_event_category.visible_track_chairs")}
+            />
+          </Grid2>
+        </Grid2>
 
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label> {T.translate("edit_event_category.tags")} </label>
-            <TagInput
-              id="allowed_tags"
-              value={entity.allowed_tags}
-              summitId={currentSummit.id}
-              onChange={this.handleChange}
-              error={hasErrors("allowed_tags", errors)}
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12}>
+            <InputLabel htmlFor="allowed_tags">
+              {T.translate("edit_event_category.tags")}
+            </InputLabel>
+            <MuiFormikAsyncAutocomplete
+              name="allowed_tags"
+              isMulti
+              fullWidth
+              placeholder={T.translate(
+                "edit_event_category.placeholders.select_tags"
+              )}
+              queryFunction={(input, callback) =>
+                queryTags(currentSummit.id, input, callback)
+              }
+              formatOption={(tag) => ({
+                value: tag.id.toString(),
+                label: tag.tag
+              })}
+              formatSelectedValue={(s) => ({ value: s.value, label: s.label })}
             />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-12">
-            <label>
-              {" "}
-              {T.translate("edit_event_category.allowed_access_levels")}&nbsp;
-              <i
-                className="fa fa-info-circle"
-                aria-hidden="true"
+          </Grid2>
+        </Grid2>
+
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12}>
+            <InputLabel
+              htmlFor="allowed_access_levels"
+              sx={{ display: "flex", alignItems: "center", gap: 0.5 }}
+            >
+              {T.translate("edit_event_category.allowed_access_levels")}
+              <Tooltip
                 title={T.translate(
                   "edit_event_category.allowed_access_levels_info"
                 )}
-              />
-            </label>
-            <AccessLevelsInput
-              id="allowed_access_levels"
-              value={entity.allowed_access_levels}
-              summitId={currentSummit.id}
-              onChange={this.handleChange}
+              >
+                <InfoOutlinedIcon fontSize="small" />
+              </Tooltip>
+            </InputLabel>
+            <MuiFormikAsyncAutocomplete
+              name="allowed_access_levels"
               isMulti
-              error={hasErrors("allowed_access_levels", errors)}
+              fullWidth
+              placeholder={T.translate(
+                "edit_event_category.placeholders.select_access_levels"
+              )}
+              queryFunction={(input, callback) =>
+                queryAccessLevels(currentSummit.id, input, callback)
+              }
+              formatOption={(al) => ({
+                value: al.id.toString(),
+                label: al.name
+              })}
+              formatSelectedValue={(s) => ({ value: s.value, label: s.label })}
             />
-          </div>
-        </div>
+          </Grid2>
+        </Grid2>
 
         {entity.id !== 0 && (
-          <div className="row form-group">
-            <div className="col-md-12">
-              <label> {T.translate("edit_event_category.pic")}</label>
-              <UploadInput
-                value={entity.icon_url}
-                handleUpload={this.handleUploadPic}
-                handleRemove={() => this.handleRemovePic()}
-                className="dropzone col-md-6"
-                multiple={false}
-                accept="image/*"
+          <Grid2 container spacing={2} sx={{ mb: 2 }}>
+            <Grid2 size={{ xs: 12, md: 6 }}>
+              <InputLabel htmlFor="icon_url">
+                {T.translate("edit_event_category.pic")}
+              </InputLabel>
+              <UploadInputV3
+                id="icon_url"
+                value={
+                  iconUrl ? [{ filename: iconUrl, file_path: iconUrl }] : []
+                }
+                onUploadComplete={handleIconUploadComplete}
+                onError={handleIconUploadError}
+                onRemove={handleRemoveIcon}
+                postUrl={`${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tracks/${entity.id}/icon`}
+                djsConfig={{ withCredentials: true }}
+                maxFiles={1}
+                canAdd={!iconUrl}
+                mediaType={{
+                  type: {
+                    allowed_extensions: ["jpg", "jpeg", "png", "gif", "svg"]
+                  }
+                }}
               />
-            </div>
-          </div>
+            </Grid2>
+          </Grid2>
         )}
-        <Panel
-          show={showSection === "proposed_schedule_settings"}
-          title={T.translate(
-            "edit_event_category.proposed_schedule_settings.title"
-          )}
-          handleClick={this.toggleSection.bind(
-            this,
-            "proposed_schedule_settings"
-          )}
+
+        <Accordion
+          expanded={scheduleSettingsExpanded}
+          onChange={() => setScheduleSettingsExpanded((prev) => !prev)}
+          sx={{ mb: 2 }}
         >
-          <div className="row form-group">
-            <div className="col-md-4">
-              <label>
-                {" "}
-                {T.translate(
-                  "edit_event_category.proposed_schedule_settings.transition_time"
-                )}
-              </label>
-              <Input
-                type="number"
-                id="proposed_schedule_transition_time"
-                value={entity.proposed_schedule_transition_time}
-                onChange={this.handleChange}
-                placeholder={T.translate(
-                  "edit_event_category.proposed_schedule_settings.placeholders.transition_time"
-                )}
-                className="form-control"
-                min="1"
-                max="240"
-                error={hasErrors("proposed_schedule_transition_time", errors)}
-              />
-            </div>
-          </div>
-        </Panel>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>
+              {T.translate(
+                "edit_event_category.proposed_schedule_settings.title"
+              )}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid2 container spacing={2}>
+              <Grid2 size={{ xs: 12, md: 4 }}>
+                <InputLabel htmlFor="proposed_schedule_transition_time">
+                  {T.translate(
+                    "edit_event_category.proposed_schedule_settings.transition_time"
+                  )}
+                </InputLabel>
+                <MuiFormikTextField
+                  name="proposed_schedule_transition_time"
+                  type="number"
+                  margin="none"
+                  fullWidth
+                  placeholder={T.translate(
+                    "edit_event_category.proposed_schedule_settings.placeholders.transition_time"
+                  )}
+                  slotProps={{ htmlInput: { min: 1, max: 240 } }}
+                />
+              </Grid2>
+            </Grid2>
+          </AccordionDetails>
+        </Accordion>
 
         {!!entity.id && !entity.parent?.id && (
-          <div>
-            <hr />
-            <div className="row">
-              <div className="col-md-6">
-                <label> {T.translate("edit_event_category.subtracks")}</label>
-                &nbsp;(<i>Nested tracks on schedule filter widget</i>)
-              </div>
-              <div className="col-md pull-right btn-group subtrackddlgrp">
-                <TrackDropdown
-                  onChange={(ev) =>
-                    this.setState({ subtrack: ev.target.value })
-                  }
-                  tracks={availableSubTracks}
-                  value={this.state.subtrack}
-                  id="subtracks"
-                  className="subtrackddl btn-group text-left"
+          <Box sx={{ mb: 2 }}>
+            <Grid2 container spacing={2} sx={{ mb: 1 }}>
+              <Grid2 size={12}>
+                <InputLabel>
+                  {T.translate("edit_event_category.subtracks")}
+                  &nbsp;(<i>Nested tracks on schedule filter widget</i>)
+                </InputLabel>
+              </Grid2>
+            </Grid2>
+            <Grid2 container spacing={1} sx={{ mb: 2, alignItems: "stretch" }}>
+              <Grid2 size={{ xs: 12, sm: 6 }}>
+                <Autocomplete
+                  options={availableSubTracks}
+                  getOptionLabel={(t) => t.name}
+                  value={subtrackToLink}
+                  onChange={(_ev, value) => setSubtrackToLink(value)}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      placeholder={T.translate(
+                        "edit_event_category.placeholders.select_subtrack"
+                      )}
+                      variant="outlined"
+                    />
+                  )}
                 />
-                <button
-                  type="button"
-                  className="btn btn-default add-button"
-                  onClick={this.handleLinkSubCategory}
-                  disabled={!this.state.subtrack}
+              </Grid2>
+              <Grid2>
+                <Button
+                  variant="outlined"
+                  disabled={!subtrackToLink}
+                  onClick={handleAddSubtrack}
+                  sx={{ height: "100%" }}
                 >
                   {T.translate("general.add")}
-                </button>
-              </div>
-            </div>
-            <div className="row form-group">
-              <div className="col-md-12">
-                <SortableTable
-                  options={table_options}
-                  data={entity.subtracks}
-                  columns={columns}
-                  dropCallback={this.handleUpdateSubCategoryOrder}
-                  orderField="order"
-                />
-              </div>
-            </div>
-          </div>
+                </Button>
+              </Grid2>
+            </Grid2>
+            <MuiTableSortable
+              data={entity.subtracks || []}
+              columns={subtrackColumns}
+              getName={(subtrack) => subtrack.name}
+              onEdit={handleEditSubtrack}
+              onDelete={handleUnlinkSubtrack}
+              deleteDialogBody={(name) =>
+                `${T.translate(
+                  "edit_event_category.unlink_subtrack_warning"
+                )}${name}`
+              }
+              confirmButtonColor="error"
+              onReorder={handleReorderSubtracks}
+            />
+          </Box>
         )}
 
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={this.handleSubmit}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
-            />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
+        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 2 }}>
+          <Button type="submit" variant="contained" disabled={isSaving}>
+            {T.translate("general.save")}
+          </Button>
+        </Box>
+      </Box>
+    </FormikProvider>
+  );
+};
 
 export default EventCategoryForm;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 90d959ede..6257bc345 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1328,6 +1328,7 @@
   },
   "edit_event_category": {
     "event_category": "Activity Category",
+    "add_new": "Add new",
     "name": "Name",
     "code": "Code",
     "color": "Color",
@@ -1351,12 +1352,19 @@
     "category_saved": "Activity Category saved successfully.",
     "category_created": "Activity Category created successfully.",
     "delete_warning": "Are you sure you want to delete extra question ",
+    "unlink_subtrack_warning": "Are you sure you want to unlink subtrack ",
+    "icon_upload_error": "There was an error uploading the image.",
     "proposed_schedule_settings": {
       "title": "Proposed Schedule Settings",
       "transition_time": "Transition Time (in minutes)",
       "placeholders": {
         "transition_time": "Transition Time (in minutes)"
       }
+    },
+    "placeholders": {
+      "select_tags": "Select tags...",
+      "select_access_levels": "Select access levels...",
+      "select_subtrack": "Select subtrack..."
     }
   },
   "edit_event_category_question": {
diff --git a/src/pages/events/edit-event-category-page.js b/src/pages/events/edit-event-category-page.js
index 0ee45d679..68a17fc74 100644
--- a/src/pages/events/edit-event-category-page.js
+++ b/src/pages/events/edit-event-category-page.js
@@ -14,37 +14,51 @@
 import React from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
+import { Button } from "@mui/material";
 import EventCategoryForm from "../../components/forms/event-category-form";
 import { getSummitById } from "../../actions/summit-actions";
 import {
   getEventCategory,
   resetEventCategoryForm,
   saveEventCategory,
-  uploadImage,
   removeImage,
   linkSubCategory,
   unlinkSubCategory,
   updateSubCategoryOrder
 } from "../../actions/event-category-actions";
-import "../../styles/edit-event-category-page.less";
-import AddNewButton from "../../components/buttons/add-new-button";
 
-function EditEventCategoryPage({
+const EditEventCategoryPage = ({
   currentSummit,
   entity,
   errors,
   history,
-  ...rest
-}) {
+  saveEventCategory,
+  removeImage,
+  linkSubCategory,
+  unlinkSubCategory,
+  updateSubCategoryOrder
+}) => {
   const title = entity.id
     ? T.translate("general.edit")
     : T.translate("general.add");
 
+  const handleAddNew = () => {
+    if (!entity?.id) return null;
+
+    history.push(`/app/summits/${currentSummit.id}/event-categories/new`);
+  };
+
   return (
     <div className="container">
       <h3>
         {title} {T.translate("edit_event_category.event_category")}
-        <AddNewButton entity={entity} />
+        <Button
+          variant="outlined"
+          sx={{ float: "right" }}
+          onClick={handleAddNew}
+        >
+          {T.translate("edit_event_category.add_new")}
+        </Button>
       </h3>
       <hr />
       {currentSummit && (
@@ -53,17 +67,16 @@ function EditEventCategoryPage({
           currentSummit={currentSummit}
           entity={entity}
           errors={errors}
-          onSubmit={rest.saveEventCategory}
-          onUploadImage={rest.uploadImage}
-          onRemoveImage={rest.removeImage}
-          onLinkSubCategory={rest.linkSubCategory}
-          onUnlinkSubCategory={rest.unlinkSubCategory}
-          onUpdateSubCategoryOrder={rest.updateSubCategoryOrder}
+          onSubmit={saveEventCategory}
+          onRemoveImage={removeImage}
+          onLinkSubCategory={linkSubCategory}
+          onUnlinkSubCategory={unlinkSubCategory}
+          onUpdateSubCategoryOrder={updateSubCategoryOrder}
         />
       )}
     </div>
   );
-}
+};
 
 const mapStateToProps = ({
   currentSummitState,
@@ -78,7 +91,6 @@ export default connect(mapStateToProps, {
   getEventCategory,
   resetEventCategoryForm,
   saveEventCategory,
-  uploadImage,
   removeImage,
   linkSubCategory,
   unlinkSubCategory,
diff --git a/src/pages/events/event-category-list-page.js b/src/pages/events/event-category-list-page.js
index 17b183787..84fa0733c 100644
--- a/src/pages/events/event-category-list-page.js
+++ b/src/pages/events/event-category-list-page.js
@@ -11,12 +11,13 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import Swal from "sweetalert2";
-import SortableTable from "openstack-uicore-foundation/lib/components/table-sortable";
-import SummitDropdown from "../../components/summit-dropdown";
+import { Box, Button, Grid2 } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import MuiTableSortable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import SummitsDropdown from "openstack-uicore-foundation/lib/components/mui/summits-dropdown";
 import { getSummitById } from "../../actions/summit-actions";
 import {
   getEventCategories,
@@ -25,119 +26,133 @@ import {
   updateEventCategoryOrder
 } from "../../actions/event-category-actions";
 
-class EventCategoryListPage extends React.Component {
-  constructor(props) {
-    super(props);
+const columns = [
+  { columnKey: "id", header: T.translate("general.id") },
+  { columnKey: "name", header: T.translate("event_category_list.name") },
+  { columnKey: "code", header: T.translate("event_category_list.code") },
+  {
+    columnKey: "color",
+    header: T.translate("event_category_list.color"),
+    render: (row) => (
+      <Box
+        sx={{
+          width: 24,
+          height: 24,
+          borderRadius: 0.5,
+          backgroundColor: row.color?.startsWith("#")
+            ? row.color
+            : `#${row.color}`
+        }}
+      />
+    )
+  }
+];
 
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handleCopyCategories = this.handleCopyCategories.bind(this);
-    this.handleNew = this.handleNew.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
+const EventCategoryListPage = ({
+  currentSummit,
+  eventCategories,
+  history,
+  getEventCategories,
+  deleteEventCategory,
+  copyEventCategories,
+  updateEventCategoryOrder
+}) => {
+  const [summitToCopy, setSummitToCopy] = useState(null);
 
-    this.state = {};
-  }
+  useEffect(() => {
+    if (currentSummit) getEventCategories();
+  }, [currentSummit?.id]);
 
-  componentDidMount() {
-    const { currentSummit } = this.props;
-    if (currentSummit) {
-      this.props.getEventCategories();
-    }
-  }
+  if (!currentSummit?.id) return null;
 
-  handleEdit(categoryId) {
-    const { currentSummit, history } = this.props;
+  const handleEdit = (category) =>
     history.push(
-      `/app/summits/${currentSummit.id}/event-categories/${categoryId}`
+      `/app/summits/${currentSummit.id}/event-categories/${category.id}`
     );
-  }
 
-  handleCopyCategories(fromSummitId) {
-    this.props.copyEventCategories(fromSummitId);
-  }
-
-  handleNew(ev) {
-    const { currentSummit, history } = this.props;
+  const handleNew = () =>
     history.push(`/app/summits/${currentSummit.id}/event-categories/new`);
-  }
 
-  handleDelete(categoryId) {
-    const { deleteEventCategory, eventCategories } = this.props;
-    const category = eventCategories.find((c) => c.id === categoryId);
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: `${T.translate("event_category_list.delete_warning")} ${
-        category.name
-      }`,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then((result) => {
-      if (result.value) {
-        deleteEventCategory(categoryId);
-      }
-    });
-  }
-
-  render() {
-    const { currentSummit, eventCategories } = this.props;
-
-    const columns = [
-      { columnKey: "id", value: T.translate("general.id") },
-      { columnKey: "name", value: T.translate("event_category_list.name") },
-      { columnKey: "code", value: T.translate("event_category_list.code") },
-      { columnKey: "color", value: T.translate("event_category_list.color") }
-    ];
-
-    const table_options = {
-      actions: {
-        edit: { onClick: this.handleEdit },
-        delete: { onClick: this.handleDelete }
-      }
-    };
-
-    if (!currentSummit.id) return null;
-
-    return (
-      <div className="container">
-        <h3> {T.translate("event_category_list.event_category_list")} </h3>
-        <div className="row">
-          <div className="col-md-6 col-md-offset-6 text-right">
-            <button
-              className="btn btn-primary right-space"
-              onClick={this.handleNew}
-            >
-              {T.translate("event_category_list.add_category")}
-            </button>
-            <SummitDropdown
-              onClick={this.handleCopyCategories}
-              actionLabel={T.translate("event_category_list.copy_categories")}
-            />
-          </div>
+  const handleCopyCategories = () => copyEventCategories(summitToCopy);
+
+  return (
+    <div className="container">
+      <h3> {T.translate("event_category_list.event_category_list")} </h3>
+      <Grid2
+        container
+        size={{ xs: 12, m3: 6 }}
+        spacing={1}
+        sx={{
+          justifyContent: "flex-end",
+          alignItems: "stretch",
+          ml: "auto",
+          mb: 2
+        }}
+      >
+        <Grid2>
+          <Button
+            variant="contained"
+            startIcon={<AddIcon />}
+            onClick={handleNew}
+          >
+            {T.translate("event_category_list.add_category")}
+          </Button>
+        </Grid2>
+      </Grid2>
+
+      <Grid2
+        container
+        size={{ xs: 12, m3: 6 }}
+        spacing={1}
+        sx={{
+          justifyContent: "flex-end",
+          alignItems: "stretch",
+          ml: "auto",
+          mb: 2
+        }}
+      >
+        <Grid2 size={{ xs: 12, sm: 3 }}>
+          <SummitsDropdown
+            label={T.translate("general.select_summit")}
+            onChange={setSummitToCopy}
+            summits={[]}
+            excludeSummitIds={[currentSummit.id]}
+          />
+        </Grid2>
+        <Grid2>
+          <Button
+            variant="outlined"
+            disabled={!summitToCopy}
+            onClick={handleCopyCategories}
+          >
+            {T.translate("event_category_list.copy_categories")}
+          </Button>
+        </Grid2>
+      </Grid2>
+
+      {eventCategories.length === 0 && (
+        <div className="no-items">
+          {T.translate("event_category_list.no_items")}
         </div>
-
-        {eventCategories.length === 0 && (
-          <div className="no-items">
-            {T.translate("event_category_list.no_items")}
-          </div>
-        )}
-
-        {eventCategories.length > 0 && (
-          <div>
-            <SortableTable
-              options={table_options}
-              data={eventCategories}
-              columns={columns}
-              dropCallback={this.props.updateEventCategoryOrder}
-              orderField="order"
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
+      )}
+
+      {eventCategories.length > 0 && (
+        <MuiTableSortable
+          data={eventCategories}
+          columns={columns}
+          getName={(category) => category.name}
+          onEdit={handleEdit}
+          onDelete={deleteEventCategory}
+          deleteDialogBody={(name) =>
+            `${T.translate("event_category_list.delete_warning")}${name}`
+          }
+          confirmButtonColor="error"
+          onReorder={updateEventCategoryOrder}
+        />
+      )}
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   currentSummitState,
diff --git a/src/reducers/events/event-category-list-reducer.js b/src/reducers/events/event-category-list-reducer.js
index f7349b0fe..b338e2096 100644
--- a/src/reducers/events/event-category-list-reducer.js
+++ b/src/reducers/events/event-category-list-reducer.js
@@ -9,7 +9,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
+
+import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 
 import {
   RECEIVE_EVENT_CATEGORIES,
@@ -20,7 +22,6 @@ import {
 } from "../../actions/event-category-actions";
 
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
-import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 
 const DEFAULT_STATE = {
   eventCategories: []
@@ -39,49 +40,45 @@ const eventCategoryListReducer = (state = DEFAULT_STATE, action) => {
     case RECEIVE_EVENT_CATEGORIES: {
       return {
         ...state,
-        eventCategories: payload.response.data.map((e) => {
-          return {
-            id: e.id,
-            name: e.name,
-            code: e.code,
-            color: `<div style="background-color: ${e.color}">&nbsp;</div>`,
-            order: e.order
-          };
-        })
+        eventCategories: payload.response.data.map((e) => ({
+          id: e.id,
+          name: e.name,
+          code: e.code,
+          color: e.color,
+          order: e.order
+        }))
       };
     }
     case EVENT_CATEGORY_ORDER_UPDATED: {
-      const tracks = payload.map((t) => {
-        return {
-          id: t.id,
-          name: t.name,
-          code: t.code,
-          color: t.color,
-          order: parseInt(t.order)
-        };
-      });
+      const tracks = payload.map((t) => ({
+        id: t.id,
+        name: t.name,
+        code: t.code,
+        color: t.color,
+        order: parseInt(t.order)
+      }));
 
       return { ...state, eventCategories: tracks };
     }
     case EVENT_CATEGORIES_SEEDED: {
-      let eventCategoriesAdded = payload.response.data.map((e) => {
-        return {
-          id: e.id,
-          name: e.name
-        };
-      });
+      const eventCategoriesAdded = payload.response.data.map((e) => ({
+        id: e.id,
+        name: e.name,
+        code: e.code,
+        color: e.color,
+        order: e.order
+      }));
 
       if (eventCategoriesAdded.length > 0) {
         return {
           ...state,
           eventCategories: [...state.eventCategories, ...eventCategoriesAdded]
         };
-      } else {
-        return state;
       }
+      return state;
     }
     case EVENT_CATEGORY_DELETED: {
-      let { categoryId } = payload;
+      const { categoryId } = payload;
       return {
         ...state,
         eventCategories: state.eventCategories.filter(
diff --git a/src/styles/edit-event-category-page.less b/src/styles/edit-event-category-page.less
deleted file mode 100644
index 763d5abde..000000000
--- a/src/styles/edit-event-category-page.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.subtrackddl {
-  width: 200px;
-  .Select-control {
-    border-radius: 4px 0 0 4px;
-    height: 100%;
-    .Select-input {
-      height: 32px;
-    }
-  }
-}
-
-.subtrackddlgrp {
-  & > div {
-    float: left;
-  }
-
-  .add-button {
-    height: 38px;
-    border-color: #afafaf;
-  }
-}