diff --git a/src/actions/tax-actions.js b/src/actions/tax-actions.js
index 244fecdae..e964c9ed3 100644
--- a/src/actions/tax-actions.js
+++ b/src/actions/tax-actions.js
@@ -9,10 +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 T from "i18n-react/dist/i18n-react";
-import history from "../history";
 import {
   getRequest,
   putRequest,
@@ -21,11 +20,16 @@ import {
   createAction,
   stopLoading,
   startLoading,
-  showMessage,
   showSuccessMessage,
-  authErrorHandler
+  authErrorHandler,
+  escapeFilterValue
 } from "openstack-uicore-foundation/lib/utils/actions";
 import { getAccessTokenSafely } from "../utils/methods";
+import {
+  DEFAULT_CURRENT_PAGE,
+  DEFAULT_ORDER_DIR,
+  DEFAULT_PER_PAGE
+} from "../utils/constants";
 
 export const REQUEST_TAX_TYPES = "REQUEST_TAX_TYPES";
 export const RECEIVE_TAX_TYPES = "RECEIVE_TAX_TYPES";
@@ -37,27 +41,47 @@ export const TAX_TYPE_ADDED = "TAX_TYPE_ADDED";
 export const TAX_TYPE_DELETED = "TAX_TYPE_DELETED";
 export const TAX_TICKET_ADDED = "TAX_TICKET_ADDED";
 export const TAX_TICKET_REMOVED = "TAX_TICKET_REMOVED";
+const ALLOWED_TAX_TYPE_SORT_FIELDS = ["name", "rate"];
 
 export const getTaxTypes =
-  (order = "name", orderDir = 1) =>
+  (
+    term = "",
+    page = DEFAULT_CURRENT_PAGE,
+    perPage = DEFAULT_PER_PAGE,
+    order = "name",
+    orderDir = DEFAULT_ORDER_DIR
+  ) =>
   async (dispatch, getState) => {
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
+    const filter = [];
+    const normalizedOrder = ALLOWED_TAX_TYPE_SORT_FIELDS.includes(order)
+      ? order
+      : "name";
 
     dispatch(startLoading());
 
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filter.push(`name=@${escapedTerm}`);
+    }
+
     const params = {
-      page: 1,
-      per_page: 100,
+      page,
+      per_page: perPage,
       access_token: accessToken,
       expand: "ticket_types"
     };
 
+    if (filter.length > 0) {
+      params["filter[]"] = filter;
+    }
+
     // order
-    if (order != null && orderDir != null) {
-      const orderDirSign = orderDir === 1 ? "+" : "-";
-      params["order"] = `${orderDirSign}${order}`;
+    if (normalizedOrder != null && orderDir != null) {
+      const orderDirSign = orderDir === 1 ? "" : "-";
+      params.order = `${orderDirSign}${normalizedOrder}`;
     }
 
     return getRequest(
@@ -65,7 +89,7 @@ export const getTaxTypes =
       createAction(RECEIVE_TAX_TYPES),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
       authErrorHandler,
-      { order, orderDir }
+      { order, orderDir, page, perPage, term }
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -93,7 +117,7 @@ export const getTaxType = (taxTypeId) => async (dispatch, getState) => {
   });
 };
 
-export const resetTaxTypeForm = () => (dispatch, getState) => {
+export const resetTaxTypeForm = () => (dispatch) => {
   dispatch(createAction(RESET_TAX_TYPE_FORM)({}));
 };
 
@@ -111,7 +135,7 @@ export const saveTaxType = (entity) => async (dispatch, getState) => {
   const normalizedEntity = normalizeEntity(entity);
 
   if (entity.id) {
-    putRequest(
+    return putRequest(
       createAction(UPDATE_TAX_TYPE),
       createAction(TAX_TYPE_UPDATED),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types/${entity.id}`,
@@ -120,31 +144,20 @@ export const saveTaxType = (entity) => async (dispatch, getState) => {
       entity
     )(params)(dispatch).then((payload) => {
       dispatch(showSuccessMessage(T.translate("edit_tax_type.tax_type_saved")));
-    });
-  } else {
-    const success_message = {
-      title: T.translate("general.done"),
-      html: T.translate("edit_tax_type.tax_type_created"),
-      type: "success"
-    };
-
-    postRequest(
-      createAction(UPDATE_TAX_TYPE),
-      createAction(TAX_TYPE_ADDED),
-      `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
-      normalizedEntity,
-      authErrorHandler,
-      entity
-    )(params)(dispatch).then((payload) => {
-      dispatch(
-        showMessage(success_message, () => {
-          history.push(
-            `/app/summits/${currentSummit.id}/tax-types/${payload.response.id}`
-          );
-        })
-      );
+      return payload;
     });
   }
+  return postRequest(
+    createAction(UPDATE_TAX_TYPE),
+    createAction(TAX_TYPE_ADDED),
+    `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
+    normalizedEntity,
+    authErrorHandler,
+    entity
+  )(params)(dispatch).then((payload) => {
+    dispatch(showSuccessMessage(T.translate("edit_tax_type.tax_type_created")));
+    return payload;
+  });
 };
 
 export const deleteTaxType = (taxTypeId) => async (dispatch, getState) => {
diff --git a/src/components/forms/tax-type-form.js b/src/components/forms/tax-type-form.js
index a81b7955c..e529790b0 100644
--- a/src/components/forms/tax-type-form.js
+++ b/src/components/forms/tax-type-form.js
@@ -13,178 +13,134 @@
 
 import React from "react";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import {
-  Input,
-  SimpleLinkList
-} from "openstack-uicore-foundation/lib/components";
+import { useFormik, FormikProvider } from "formik";
+import * as yup from "yup";
+import Button from "@mui/material/Button";
+import Grid2 from "@mui/material/Grid2";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import SimpleLinkList from "openstack-uicore-foundation/lib/components/simple-link-list";
 import { queryTicketTypes } from "openstack-uicore-foundation/lib/utils/query-actions";
-import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
-import { MILLISECONDS_TO_SECONDS } from "../../utils/constants";
-
-class TaxTypeForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      errors: props.errors
-    };
-
-    this.handleTicketLink = this.handleTicketLink.bind(this);
-    this.handleTicketUnLink = this.handleTicketUnLink.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.errors = {};
-    }
-
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
+import useScrollToError from "../../hooks/useScrollToError";
+
+const validationSchema = yup.object({
+  name: yup.string().required(T.translate("validation.required")),
+  rate: yup
+    .number()
+    .typeError(T.translate("validation.number"))
+    .min(0, T.translate("validation.min", { min: 0 }))
+    .required(T.translate("validation.required")),
+  tax_id: yup.string().required(T.translate("validation.required"))
+});
+
+const TaxTypeForm = ({
+  entity: entityProp,
+  currentSummit,
+  onTicketLink,
+  onTicketUnLink,
+  onSubmit
+}) => {
+  const initialValues = {
+    id: entityProp.id,
+    name: entityProp.name || "",
+    rate: entityProp.rate ?? "",
+    tax_id: entityProp.tax_id || "",
+    ticket_types: entityProp.ticket_types ?? []
+  };
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    enableReinitialize: true,
+    onSubmit: (values) => {
+      onSubmit({ ...entityProp, ...values });
+    },
+    validateOnChange: false
+  });
+
+  useScrollToError(formik);
+
+  const handleTicketLink = (value) => {
+    onTicketLink(formik.values.id, value);
+  };
+  const handleTicketUnLink = (valueId) => {
+    onTicketUnLink(formik.values.id, valueId);
+  };
+
+  const ticketColumns = [
+    { columnKey: "name", value: T.translate("edit_tax_type.name") },
+    {
+      columnKey: "description",
+      value: T.translate("edit_tax_type.description")
     }
-
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
+  ];
+  const ticketOptions = {
+    title: T.translate("edit_tax_type.ticket_types"),
+    valueKey: "name",
+    labelKey: "name",
+    defaultOptions: true,
+    actions: {
+      search: (ev, callback) =>
+        queryTicketTypes(currentSummit.id, { name: ev }, callback, "v2"),
+      delete: { onClick: handleTicketUnLink },
+      add: { onClick: handleTicketLink }
     }
-  }
-
-  handleChange(ev) {
-    const newEntity = { ...this.state.entity };
-    const newErrors = { ...this.state.errors };
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    if (ev.target.type === "datetime") {
-      value = value.valueOf() / MILLISECONDS_TO_SECONDS;
-    }
-
-    newErrors[id] = "";
-    newEntity[id] = value;
-    this.setState({ entity: newEntity, errors: newErrors });
-  }
-
-  handleSubmit(ev) {
-    const entity = { ...this.state.entity };
-    ev.preventDefault();
-
-    this.props.onSubmit(entity);
-  }
-
-  hasErrors(field) {
-    const { errors } = this.state;
-    if (field in errors) {
-      return errors[field];
-    }
-
-    return "";
-  }
-
-  handleTicketLink(value) {
-    const { entity } = this.state;
-    this.props.onTicketLink(entity.id, value);
-  }
-
-  handleTicketUnLink(valueId) {
-    const { entity } = this.state;
-    this.props.onTicketUnLink(entity.id, valueId);
-  }
-
-  render() {
-    const { entity } = this.state;
-    const { currentSummit } = this.props;
-
-    const ticketColumns = [
-      { columnKey: "name", value: T.translate("edit_tax_type.name") },
-      {
-        columnKey: "description",
-        value: T.translate("edit_tax_type.description")
-      }
-    ];
-
-    const ticketOptions = {
-      title: T.translate("edit_tax_type.ticket_types"),
-      valueKey: "name",
-      labelKey: "name",
-      defaultOptions: true,
-      actions: {
-        search: (ev, callback) =>
-          queryTicketTypes(currentSummit.id, { name: ev }, callback, "v2"),
-        delete: { onClick: this.handleTicketUnLink },
-        add: { onClick: this.handleTicketLink }
-      }
-    };
-
-    return (
-      <form className="tax-type-form">
-        <input type="hidden" id="id" value={entity.id} />
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_tax_type.name")} *</label>
-            <Input
-              id="name"
-              className="form-control"
-              error={this.hasErrors("name")}
-              onChange={this.handleChange}
-              value={entity.name}
+  };
+
+  return (
+    <FormikProvider value={formik}>
+      <Box
+        component="form"
+        onSubmit={formik.handleSubmit}
+        noValidate
+        autoComplete="off"
+      >
+        <input type="hidden" name="id" value={formik.values.id} />
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
+            <MuiFormikTextField
+              name="name"
+              label={T.translate("edit_tax_type.name")}
+              required
+              fullWidth
             />
-          </div>
-        </div>
-        <div className="row form-group">
-          <div className="col-md-4">
-            <label> {T.translate("edit_tax_type.rate")}</label>
-            <Input
-              className="form-control"
+          </Grid2>
+        </Grid2>
+        <Grid2 container spacing={2} sx={{ mb: 3 }}>
+          <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
+            <MuiFormikTextField
+              name="rate"
+              label={T.translate("edit_tax_type.rate")}
               type="number"
-              error={this.hasErrors("rate")}
-              id="rate"
-              value={entity.rate}
-              onChange={this.handleChange}
+              fullWidth
             />
-          </div>
-          <div className="col-md-4">
-            <label> {T.translate("edit_tax_type.tax_id")}</label>
-            <Input
-              className="form-control"
-              error={this.hasErrors("tax_id")}
-              id="tax_id"
-              value={entity.tax_id}
-              onChange={this.handleChange}
+          </Grid2>
+          <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
+            <MuiFormikTextField
+              name="tax_id"
+              label={T.translate("edit_tax_type.tax_id")}
+              fullWidth
             />
-          </div>
-        </div>
-
-        <hr />
-        {entity.id !== 0 && (
-          <SimpleLinkList
-            values={entity.ticket_types}
-            columns={ticketColumns}
-            options={ticketOptions}
-          />
-        )}
-
-        <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")}
+          </Grid2>
+        </Grid2>
+        {formik.values.id !== 0 && (
+          <Box sx={{ mb: 3 }}>
+            <SimpleLinkList
+              values={formik.values.ticket_types}
+              columns={ticketColumns}
+              options={ticketOptions}
             />
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
+          </Box>
+        )}
+        <Stack direction="row" justifyContent="flex-end">
+          <Button variant="contained" type="submit">
+            {T.translate("general.save")}
+          </Button>
+        </Stack>
+      </Box>
+    </FormikProvider>
+  );
+};
 
 export default TaxTypeForm;
diff --git a/src/layouts/summit-id-layout.js b/src/layouts/summit-id-layout.js
index 02e81c7ce..816bc92b7 100644
--- a/src/layouts/summit-id-layout.js
+++ b/src/layouts/summit-id-layout.js
@@ -48,7 +48,9 @@ const LocationLayout = React.lazy(() => import("./location-layout"));
 const SignagePage = React.lazy(() => import("../pages/signage"));
 const RsvpTemplateLayout = React.lazy(() => import("./rsvp-template-layout"));
 const TicketTypeLayout = React.lazy(() => import("./ticket-type-layout"));
-const TaxTypeLayout = React.lazy(() => import("./tax-type-layout"));
+const TaxTypeListPage = React.lazy(() =>
+  import("../pages/taxes/tax-type-list-page")
+);
 const RefundPolicyListPage = React.lazy(() =>
   import("../pages/tickets/refund-policy-list-page")
 );
@@ -205,7 +207,12 @@ const SummitIdLayout = ({ currentSummit, loading, match, ...props }) => {
             path={`${match.url}/ticket-types`}
             component={TicketTypeLayout}
           />
-          <Route path={`${match.url}/tax-types`} component={TaxTypeLayout} />
+          <Route
+            strict
+            exact
+            path={`${match.url}/tax-types`}
+            component={TaxTypeListPage}
+          />
           <Route
             path={`${match.url}/refund-policies`}
             component={RefundPolicyListPage}
diff --git a/src/layouts/tax-type-layout.js b/src/layouts/tax-type-layout.js
deleted file mode 100644
index 28f326772..000000000
--- a/src/layouts/tax-type-layout.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2017 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
-
-import React from "react";
-import { Switch, Route, withRouter } from "react-router-dom";
-import T from "i18n-react/dist/i18n-react";
-import { Breadcrumb } from "react-breadcrumbs";
-import Restrict from "../routes/restrict";
-
-import TaxTypeListPage from "../pages/taxes/tax-type-list-page";
-import EditTaxTypePage from "../pages/taxes/edit-tax-type-page";
-import NoMatchPage from "../pages/no-match-page";
-
-class TaxTypeLayout extends React.Component {
-  render() {
-    const { match } = this.props;
-    return (
-      <div>
-        <Breadcrumb
-          data={{
-            title: T.translate("tax_type_list.tax_types"),
-            pathname: match.url
-          }}
-        />
-
-        <Switch>
-          <Route strict exact path={match.url} component={TaxTypeListPage} />
-          <Route
-            strict
-            exact
-            path={`${match.url}/new`}
-            component={EditTaxTypePage}
-          />
-          <Route
-            strict
-            exact
-            path={`${match.url}/:tax_type_id(\\d+)`}
-            component={EditTaxTypePage}
-          />
-          <Route component={NoMatchPage} />
-        </Switch>
-      </div>
-    );
-  }
-}
-
-export default Restrict(withRouter(TaxTypeLayout), "taxes");
diff --git a/src/pages/taxes/edit-tax-type-page.js b/src/pages/taxes/edit-tax-type-page.js
deleted file mode 100644
index 6df78e609..000000000
--- a/src/pages/taxes/edit-tax-type-page.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright 2018 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React from "react";
-import { connect } from "react-redux";
-import { Breadcrumb } from "react-breadcrumbs";
-import T from "i18n-react/dist/i18n-react";
-import TaxTypeForm from "../../components/forms/tax-type-form";
-import { getSummitById } from "../../actions/summit-actions";
-import {
-  getTaxType,
-  resetTaxTypeForm,
-  saveTaxType,
-  addTicketToTaxType,
-  removeTicketFromTaxType
-} from "../../actions/tax-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
-
-class EditTaxTypePage extends React.Component {
-  constructor(props) {
-    const taxTypeId = props.match.params.tax_type_id;
-    super(props);
-
-    if (!taxTypeId) {
-      props.resetTaxTypeForm();
-    } else {
-      props.getTaxType(taxTypeId);
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const oldId = prevProps.match.params.tax_type_id;
-    const newId = this.props.match.params.tax_type_id;
-
-    if (newId !== oldId) {
-      if (!newId) {
-        this.props.resetTaxTypeForm();
-      } else {
-        this.props.getTaxType(newId);
-      }
-    }
-  }
-
-  render() {
-    const { currentSummit, entity, errors, match, history } = this.props;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id ? entity.name : T.translate("general.new");
-
-    return (
-      <div className="container">
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("edit_tax_type.tax_type")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        {currentSummit && (
-          <TaxTypeForm
-            entity={entity}
-            currentSummit={currentSummit}
-            errors={errors}
-            onTicketLink={this.props.addTicketToTaxType}
-            onTicketUnLink={this.props.removeTicketFromTaxType}
-            onSubmit={this.props.saveTaxType}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = ({ currentSummitState, currentTaxTypeState }) => ({
-  currentSummit: currentSummitState.currentSummit,
-  ...currentTaxTypeState
-});
-
-export default connect(mapStateToProps, {
-  getSummitById,
-  getTaxType,
-  resetTaxTypeForm,
-  saveTaxType,
-  addTicketToTaxType,
-  removeTicketFromTaxType
-})(EditTaxTypePage);
diff --git a/src/pages/taxes/popup/tax-type-popup.js b/src/pages/taxes/popup/tax-type-popup.js
new file mode 100644
index 000000000..2a09c325f
--- /dev/null
+++ b/src/pages/taxes/popup/tax-type-popup.js
@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+import CloseIcon from "@mui/icons-material/Close";
+import TaxTypeForm from "../../../components/forms/tax-type-form";
+
+const TaxTypePopup = ({
+  open,
+  onClose,
+  entity,
+  errors,
+  currentSummit,
+  onSubmit,
+  onTicketLink,
+  onTicketUnLink
+}) => {
+  const title = entity?.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Typography fontSize="1.8rem">
+          {title} {T.translate("edit_tax_type.tax_type")}
+        </Typography>
+        <IconButton size="small" onClick={onClose}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <Divider />
+      <DialogContent>
+        <TaxTypeForm
+          entity={entity}
+          currentSummit={currentSummit}
+          errors={errors}
+          onTicketLink={onTicketLink}
+          onTicketUnLink={onTicketUnLink}
+          onSubmit={onSubmit}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+TaxTypePopup.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  entity: PropTypes.object.isRequired,
+  errors: PropTypes.object,
+  currentSummit: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onTicketLink: PropTypes.func.isRequired,
+  onTicketUnLink: PropTypes.func.isRequired
+};
+
+TaxTypePopup.defaultProps = {
+  errors: {}
+};
+
+export default TaxTypePopup;
diff --git a/src/pages/taxes/tax-type-list-page.js b/src/pages/taxes/tax-type-list-page.js
index d35dbe62b..bf6f227fb 100644
--- a/src/pages/taxes/tax-type-list-page.js
+++ b/src/pages/taxes/tax-type-list-page.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2019 OpenStack Foundation
+ * Copyright 2026 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -9,133 +9,239 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
+import { Breadcrumb } from "react-breadcrumbs";
 import T from "i18n-react/dist/i18n-react";
-import Swal from "sweetalert2";
-import Table from "openstack-uicore-foundation/lib/components/table";
-import { getSummitById } from "../../actions/summit-actions";
-import { getTaxTypes, deleteTaxType } from "../../actions/tax-actions";
-
-class TaxTypeListPage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-    this.handleSort = this.handleSort.bind(this);
-    this.handleNewTaxType = this.handleNewTaxType.bind(this);
-
-    this.state = {};
-  }
-
-  componentDidMount() {
-    const { currentSummit } = this.props;
-    if (currentSummit) {
-      this.props.getTaxTypes();
+import Button from "@mui/material/Button";
+import Grid2 from "@mui/material/Grid2";
+import Typography from "@mui/material/Typography";
+import AddIcon from "@mui/icons-material/Add";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import Restrict from "../../routes/restrict";
+import {
+  getTaxTypes,
+  deleteTaxType,
+  getTaxType,
+  resetTaxTypeForm,
+  saveTaxType,
+  addTicketToTaxType,
+  removeTicketFromTaxType
+} from "../../actions/tax-actions";
+import TaxTypePopup from "./popup/tax-type-popup";
+import { DEFAULT_CURRENT_PAGE } from "../../utils/constants";
+
+const TaxTypeListPage = ({
+  currentSummit,
+  taxTypes,
+  term,
+  order,
+  orderDir,
+  perPage,
+  currentPage,
+  totalTaxTypes,
+  currentTaxType,
+  currentTaxTypeErrors,
+  getTaxTypes,
+  deleteTaxType,
+  getTaxType,
+  resetTaxTypeForm,
+  saveTaxType,
+  addTicketToTaxType,
+  removeTicketFromTaxType,
+  match
+}) => {
+  const [showTaxTypeModal, setShowTaxTypeModal] = useState(false);
+
+  useEffect(() => {
+    if (currentSummit?.id) {
+      getTaxTypes(term, currentPage, perPage, order, orderDir);
     }
-  }
-
-  handleEdit(tax_type_id) {
-    const { currentSummit, history } = this.props;
-    history.push(`/app/summits/${currentSummit.id}/tax-types/${tax_type_id}`);
-  }
-
-  handleDelete(taxTypeId) {
-    const { deleteTaxType, taxTypes } = this.props;
-    let taxType = taxTypes.find((t) => t.id === taxTypeId);
-
-    Swal.fire({
-      title: T.translate("general.are_you_sure"),
-      text: T.translate("tax_type_list.remove_warning") + " " + taxType.name,
-      type: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
-      confirmButtonText: T.translate("general.yes_delete")
-    }).then(function (result) {
-      if (result.value) {
-        deleteTaxType(taxTypeId);
-      }
+  }, [currentSummit]);
+
+  const handleDelete = (taxTypeId) => {
+    deleteTaxType(taxTypeId);
+  };
+
+  const handleSort = (key, dir) => {
+    getTaxTypes(term, currentPage, perPage, key, dir);
+  };
+
+  const handleSearch = (searchTerm) => {
+    getTaxTypes(searchTerm, DEFAULT_CURRENT_PAGE, perPage, order, orderDir);
+  };
+
+  const handlePageChange = (page) => {
+    getTaxTypes(term, page, perPage, order, orderDir);
+  };
+
+  const handlePerPageChange = (newPerPage) => {
+    getTaxTypes(term, DEFAULT_CURRENT_PAGE, newPerPage, order, orderDir);
+  };
+
+  const handleOpenNewTaxType = () => {
+    resetTaxTypeForm();
+    setShowTaxTypeModal(true);
+  };
+
+  const handleEdit = (row) => {
+    getTaxType(row.id).then(() => setShowTaxTypeModal(true));
+  };
+
+  const handleSave = (entity) => {
+    saveTaxType(entity).then(() => {
+      getTaxTypes(term, currentPage, perPage, order, orderDir);
+      setShowTaxTypeModal(false);
     });
-  }
-
-  handleSort(index, key, dir, func) {
-    this.props.getTaxTypes(key, dir);
-  }
-
-  handleNewTaxType(ev) {
-    const { currentSummit, history } = this.props;
-    history.push(`/app/summits/${currentSummit.id}/tax-types/new`);
-  }
-
-  render() {
-    const { currentSummit, taxTypes, order, orderDir, totalTaxTypes } =
-      this.props;
-
-    const columns = [
-      {
-        columnKey: "name",
-        value: T.translate("tax_type_list.name"),
-        sortable: true
-      },
-      { columnKey: "rate", value: T.translate("tax_type_list.rate") },
-      { columnKey: "tax_id", value: T.translate("tax_type_list.tax_id") }
-    ];
-
-    const table_options = {
-      sortCol: order,
-      sortDir: orderDir,
-      actions: {
-        edit: { onClick: this.handleEdit },
-        delete: { onClick: this.handleDelete }
-      }
-    };
-
-    if (!currentSummit.id) return <div />;
-
-    return (
+  };
+
+  const handleClosePopup = () => {
+    setShowTaxTypeModal(false);
+    resetTaxTypeForm();
+  };
+
+  const columns = [
+    {
+      columnKey: "name",
+      header: T.translate("tax_type_list.name"),
+      sortable: true
+    },
+    {
+      columnKey: "rate",
+      header: T.translate("tax_type_list.rate")
+    },
+    {
+      columnKey: "tax_id",
+      header: T.translate("tax_type_list.tax_id")
+    }
+  ];
+
+  const tableOptions = {
+    sortCol: order,
+    sortDir: orderDir
+  };
+
+  if (!currentSummit?.id) return <div />;
+
+  return (
+    <>
+      <Breadcrumb
+        data={{
+          title: T.translate("tax_type_list.tax_types"),
+          pathname: match.url
+        }}
+      />
       <div className="container">
-        <h3>
-          {" "}
-          {T.translate("tax_type_list.tax_type_list")} ({totalTaxTypes})
-        </h3>
-        <div className={"row"}>
-          <div className="col-md-6 text-right col-md-offset-6">
-            <button
-              className="btn btn-primary right-space"
-              onClick={this.handleNewTaxType}
-            >
-              {T.translate("tax_type_list.add_tax_type")}
-            </button>
-          </div>
-        </div>
+        <h3>{T.translate("tax_type_list.tax_type_list")}</h3>
+
+        <Grid2
+          container
+          spacing={2}
+          sx={{
+            justifyContent: "center",
+            alignItems: "center",
+            mb: 2
+          }}
+        >
+          <Grid2 size={6}>
+            <Typography>
+              {totalTaxTypes} {T.translate("general.items")}
+            </Typography>
+          </Grid2>
+          <Grid2
+            container
+            size={6}
+            spacing={1}
+            sx={{
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Grid2 size={2} />
+            <Grid2 size={6}>
+              <SearchInput
+                onSearch={handleSearch}
+                term={term}
+                placeholder={T.translate("tax_type_list.name")}
+                debounced
+              />
+            </Grid2>
+            <Grid2 size={4}>
+              <Button
+                variant="contained"
+                fullWidth
+                onClick={handleOpenNewTaxType}
+                startIcon={<AddIcon />}
+                sx={{ height: "36px" }}
+              >
+                {T.translate("tax_type_list.add_tax_type")}
+              </Button>
+            </Grid2>
+          </Grid2>
+        </Grid2>
 
         {taxTypes.length === 0 && (
           <div>{T.translate("tax_type_list.no_tax_types")}</div>
         )}
 
         {taxTypes.length > 0 && (
-          <Table
-            options={table_options}
+          <MuiTable
+            options={tableOptions}
             data={taxTypes}
             columns={columns}
-            onSort={this.handleSort}
+            totalRows={totalTaxTypes}
+            perPage={perPage}
+            currentPage={currentPage}
+            getName={(item) => item.name}
+            onSort={handleSort}
+            onPageChange={handlePageChange}
+            onPerPageChange={handlePerPageChange}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            confirmButtonColor="error"
           />
         )}
-      </div>
-    );
-  }
-}
 
-const mapStateToProps = ({ currentSummitState, currentTaxTypeListState }) => ({
+        {showTaxTypeModal && (
+          <TaxTypePopup
+            open={showTaxTypeModal}
+            onClose={handleClosePopup}
+            entity={currentTaxType}
+            errors={currentTaxTypeErrors}
+            currentSummit={currentSummit}
+            onSubmit={handleSave}
+            onTicketLink={addTicketToTaxType}
+            onTicketUnLink={removeTicketFromTaxType}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+const mapStateToProps = ({
+  currentSummitState,
+  currentTaxTypeListState,
+  currentTaxTypeState
+}) => ({
   currentSummit: currentSummitState.currentSummit,
-  ...currentTaxTypeListState
+  ...currentTaxTypeListState,
+  currentTaxType: currentTaxTypeState.entity,
+  currentTaxTypeErrors: currentTaxTypeState.errors
 });
 
-export default connect(mapStateToProps, {
-  getSummitById,
-  getTaxTypes,
-  deleteTaxType
-})(TaxTypeListPage);
+export default Restrict(
+  connect(mapStateToProps, {
+    getTaxTypes,
+    deleteTaxType,
+    getTaxType,
+    resetTaxTypeForm,
+    saveTaxType,
+    addTicketToTaxType,
+    removeTicketFromTaxType
+  })(TaxTypeListPage),
+  "taxes"
+);
diff --git a/src/reducers/taxes/tax-type-list-reducer.js b/src/reducers/taxes/tax-type-list-reducer.js
index 494629820..736b76135 100644
--- a/src/reducers/taxes/tax-type-list-reducer.js
+++ b/src/reducers/taxes/tax-type-list-reducer.js
@@ -9,8 +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_TAX_TYPES,
   REQUEST_TAX_TYPES,
@@ -18,12 +19,15 @@ import {
 } from "../../actions/tax-actions";
 
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
-import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 
 const DEFAULT_STATE = {
   taxTypes: [],
+  term: "",
   order: "name",
   orderDir: 1,
+  currentPage: 1,
+  lastPage: 1,
+  perPage: 10,
   totalTaxTypes: 0
 };
 
@@ -35,18 +39,30 @@ const taxTypeListReducer = (state = DEFAULT_STATE, action) => {
       return DEFAULT_STATE;
     }
     case REQUEST_TAX_TYPES: {
-      let { order, orderDir } = payload;
+      const { order, orderDir, page, ...rest } = payload;
 
-      return { ...state, order, orderDir };
+      return {
+        ...state,
+        order,
+        orderDir,
+        currentPage: page,
+        ...rest
+      };
     }
     case RECEIVE_TAX_TYPES: {
-      let { total } = payload.response;
-      let taxTypes = payload.response.data;
+      const { total, current_page, last_page } = payload.response;
+      const taxTypes = payload.response.data;
 
-      return { ...state, taxTypes: taxTypes, totalTaxTypes: total };
+      return {
+        ...state,
+        taxTypes,
+        totalTaxTypes: total,
+        currentPage: current_page,
+        lastPage: last_page
+      };
     }
     case TAX_TYPE_DELETED: {
-      let { taxTypeId } = payload;
+      const { taxTypeId } = payload;
       return {
         ...state,
         taxTypes: state.taxTypes.filter((t) => t.id !== taxTypeId)