diff --git a/src/components/mui/async-select-input.js b/src/components/mui/async-select-input.js
new file mode 100644
index 000000000..eb6ce8b03
--- /dev/null
+++ b/src/components/mui/async-select-input.js
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Autocomplete, CircularProgress, TextField } from "@mui/material";
+
+const AsyncSelectInput = ({
+  id,
+  label,
+  value,
+  onChange,
+  queryFunction,
+  formatOption = (item) => ({ value: item.id, label: item.name })
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchOptions = (input) => {
+    setLoading(true);
+    queryFunction(input, (results) => {
+      setOptions(results.map(formatOption));
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    fetchOptions("");
+  }, []);
+
+  return (
+    <Autocomplete
+      options={options}
+      value={value ? { value, label: value } : null}
+      loading={loading}
+      fullWidth
+      getOptionLabel={(option) => option.label || ""}
+      isOptionEqualToValue={(option, val) => option.value === val.value}
+      onInputChange={(ev, newInput) => fetchOptions(newInput)}
+      onChange={(ev, selected) =>
+        onChange({ target: { id, value: selected?.value ?? "" } })
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          size="small"
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={16} />}
+                  {params.InputProps?.endAdornment}
+                </>
+              )
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+
+export default AsyncSelectInput;
diff --git a/src/components/mui/chip-multi-select.js b/src/components/mui/chip-multi-select.js
new file mode 100644
index 000000000..2a0e59efa
--- /dev/null
+++ b/src/components/mui/chip-multi-select.js
@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  Box,
+  Chip,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select
+} from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+
+const ChipMultiSelect = ({ id, label, value, onChange, options, sx }) => {
+  const handleDelete = (val) =>
+    onChange({ target: { value: value.filter((v) => v !== val) } });
+
+  return (
+    <FormControl fullWidth size="small" sx={sx}>
+      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <Select
+        labelId={`${id}-label`}
+        id={id}
+        multiple
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput label={label} />}
+        renderValue={(selected) => (
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+            {selected.map((val) => {
+              const option = options.find((o) => o.value === val);
+              return option ? (
+                <Chip
+                  key={val}
+                  label={option.label}
+                  size="small"
+                  onDelete={() => handleDelete(val)}
+                  deleteIcon={
+                    <CancelIcon onMouseDown={(ev) => ev.stopPropagation()} />
+                  }
+                />
+              ) : null;
+            })}
+          </Box>
+        )}
+      >
+        {options.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default ChipMultiSelect;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 58eb3a2c0..9406755e9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -3265,6 +3265,7 @@
     }
   },
   "emails": {
+    "emails": "Emails",
     "email_templates": "Email Templates",
     "sent": "Sent",
     "templates": "Templates",
@@ -3319,6 +3320,9 @@
     "email_logs": "Email Logs",
     "email_list": "Email List",
     "apply_filters": "Apply Filters",
+    "enabled_filters": "Enabled Filters",
+    "all": "All",
+    "not_sent": "Not Sent",
     "email_templates": "Email Templates",
     "subject": "Subject",
     "from_email": "From Email",
@@ -3328,7 +3332,6 @@
     "payload": "Payload",
     "select_fields": "Show Columns",
     "placeholders": {
-      "select_fields": "Select data to display",
       "template": "Filter by Template",
       "sent_date_from": "Filter Sent Date from",
       "sent_date_to": "Filter Sent Date to"
diff --git a/src/pages/emails/email-log-list-page.js b/src/pages/emails/email-log-list-page.js
index 417c16571..1796a482c 100644
--- a/src/pages/emails/email-log-list-page.js
+++ b/src/pages/emails/email-log-list-page.js
@@ -14,37 +14,47 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Pagination } from "react-bootstrap";
-import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search"
-import Table from "openstack-uicore-foundation/lib/components/table"
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"
-import DateTimePicker from "openstack-uicore-foundation/lib/components/inputs/datetimepicker";
+import {
+  Box,
+  Button,
+  Grid2,
+  ToggleButton,
+  ToggleButtonGroup
+} from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
-import { SegmentedControl } from "segmented-control";
-import { getSentEmails } from "../../actions/email-actions";
-import "../../styles/email-logs-page.less";
-import EmailTemplateInput from "../../components/inputs/email-template-input";
+import { getSentEmails, queryTemplates } from "../../actions/email-actions";
+import ChipMultiSelect from "../../components/mui/chip-multi-select";
+import AsyncSelectInput from "../../components/mui/async-select-input";
 import {
   DATE_FILTER_ARRAY_SIZE,
   DEFAULT_CURRENT_PAGE
 } from "../../utils/constants";
 
-const SentEmailListPage = function ({
+const SentEmailListPage = ({
   emails,
-  lastPage,
   currentPage,
   term,
   order,
   orderDir,
   totalEmails,
-  match,
   perPage,
   filters,
-  getSentEmails,
-  ...props
-}) {
+  getSentEmails
+}) => {
   useEffect(() => {
-    getSentEmails(term, currentPage, perPage, order, orderDir, filters);
+    getSentEmails(
+      term,
+      DEFAULT_CURRENT_PAGE,
+      perPage,
+      order,
+      orderDir,
+      filters
+    );
   }, []);
 
   const defaultFilters = {
@@ -70,10 +80,21 @@ const SentEmailListPage = function ({
     getSentEmails(term, newPage, perPage, order, orderDir, emailFilters);
   };
 
-  const handleSort = (index, key, dir, func) => {
+  const handleSort = (index, key, dir) => {
     getSentEmails(term, currentPage, perPage, key, dir, emailFilters);
   };
 
+  const handlePerPageChange = (newPerPage) => {
+    getSentEmails(
+      term,
+      DEFAULT_CURRENT_PAGE,
+      newPerPage,
+      order,
+      orderDir,
+      emailFilters
+    );
+  };
+
   const handleSearch = (newTerm) => {
     getSentEmails(
       newTerm,
@@ -113,37 +134,19 @@ const SentEmailListPage = function ({
     }
   };
 
-  const handleChangeDateFilter = (ev, lastDate) => {
-    const { value, id } = ev.target;
-    const newDateFilter = emailFilters[id];
+  const handleChangeDateFilter = (value, lastDate) => {
+    const newDateFilter = emailFilters.sent_date_filter;
 
     setEmailFilters({
       ...emailFilters,
-      [id]: lastDate
-        ? [newDateFilter[0], value.unix()]
-        : [value.unix(), newDateFilter[1]]
+      sent_date_filter: lastDate
+        ? [newDateFilter[0], value ? value.unix() : null]
+        : [value ? value.unix() : null, newDateFilter[1]]
     });
   };
 
   const handleEmailFilterChange = (ev) => {
-    const { type, id } = ev.target;
-    let { value } = ev.target;
-    if (type === "operatorinput") {
-      value = Array.isArray(value)
-        ? value
-        : `${ev.target.operator}${ev.target.value}`;
-      if (id === "duration_filter") {
-        value = Array.isArray(value)
-          ? value
-          : `${ev.target.operator}${ev.target.value}`;
-      }
-    }
-    if (type === "mediatypeinput") {
-      value = {
-        operator: ev.target.operator,
-        value: ev.target.value
-      };
-    }
+    const { id, value } = ev.target;
     setEmailFilters({ ...emailFilters, [id]: value });
   };
 
@@ -170,11 +173,11 @@ const SentEmailListPage = function ({
   };
 
   const fieldNames = [
-    { columnKey: "last_error", value: "last_error" },
+    { columnKey: "last_error", header: "last_error" },
     {
       columnKey: "payload",
-      value: "payload",
-      render: (row, data) => <div className="email-table-payload">{data}</div>
+      header: "payload",
+      render: (row, data) => <Box sx={{ maxWidth: 300 }}>{data}</Box>
     }
   ];
 
@@ -183,7 +186,7 @@ const SentEmailListPage = function ({
     .map((f2) => {
       let c = {
         columnKey: f2.columnKey,
-        value: T.translate(`email_logs.${f2.value}`),
+        header: T.translate(`email_logs.${f2.header}`),
         sortable: f2.sortable
       };
       // optional fields
@@ -198,20 +201,20 @@ const SentEmailListPage = function ({
     { columnKey: "id", value: T.translate("general.id"), sortable: true },
     {
       columnKey: "template",
-      value: T.translate("email_logs.email_templates"),
+      header: T.translate("email_logs.email_templates"),
       styles: { wordBreak: "break-all" },
       sortable: true
     },
-    { columnKey: "subject", value: T.translate("email_logs.subject") },
-    { columnKey: "from_email", value: T.translate("email_logs.from_email") },
+    { columnKey: "subject", header: T.translate("email_logs.subject") },
+    { columnKey: "from_email", header: T.translate("email_logs.from_email") },
     {
       columnKey: "to_email",
-      value: T.translate("email_logs.to_email"),
+      header: T.translate("email_logs.to_email"),
       styles: { wordBreak: "break-word" }
     },
     {
       columnKey: "sent_date",
-      value: T.translate("email_logs.sent_date"),
+      header: T.translate("email_logs.sent_date"),
       sortable: true
     }
   ];
@@ -236,172 +239,168 @@ const SentEmailListPage = function ({
 
   return (
     <div className="container">
-      <h3>
-        {" "}
-        {T.translate("email_logs.email_list")} ({totalEmails})
-      </h3>
-      <div className="row">
-        <div className="col-md-6">
-          <FreeTextSearch
-            value={term}
-            placeholder={T.translate("emails.placeholders.search_emails")}
-            onSearch={handleSearch}
-          />
-        </div>
-      </div>
-      <hr />
-      <div className="row">
-        <div className="col-md-6">
-          <Dropdown
+      <h3> {T.translate("email_logs.email_list")}</h3>
+      <Grid2
+        container
+        spacing={2}
+        sx={{
+          justifyContent: "center",
+          alignItems: "center",
+          mb: 2
+        }}
+      >
+        <Grid2 size={2}>
+          <Box component="span">
+            {totalEmails} {T.translate("emails.emails")}
+          </Box>
+        </Grid2>
+        <Grid2
+          container
+          size={10}
+          spacing={1}
+          gap={1}
+          sx={{
+            justifyContent: "flex-end",
+            alignItems: "center"
+          }}
+        >
+          <Grid2 size={6}>
+            <SearchInput
+              term={term}
+              onSearch={handleSearch}
+              placeholder={T.translate("emails.placeholders.search_emails")}
+            />
+          </Grid2>
+        </Grid2>
+      </Grid2>
+      <Grid2 container spacing={1} sx={{ alignItems: "center", my: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <ChipMultiSelect
             id="enabled_filters"
-            placeholder="Enabled Filters"
+            label={T.translate("email_logs.enabled_filters")}
             value={enabledFilters}
             onChange={handleFiltersChange}
             options={handleDDLSortByLabel(filters_ddl)}
-            isClearable
-            isMulti
           />
-        </div>
-        <div className="col-md-6">
-          <button
-            className="btn btn-primary right-space"
+        </Grid2>
+        <Grid2>
+          <Button
+            variant="contained"
             onClick={handleApplyEmailFilters}
-            type="button"
+            sx={{ height: 36 }}
           >
             {T.translate("email_logs.apply_filters")}
-          </button>
-        </div>
-      </div>
-      <div className="filters-row">
+          </Button>
+        </Grid2>
+      </Grid2>
+      <Grid2 container spacing={2} sx={{ alignItems: "center", mb: 4 }}>
         {enabledFilters.includes("is_sent_filter") && (
-          <div className="col-md-6">
-            <SegmentedControl
-              name="is_sent_filter"
-              options={[
-                {
-                  label: "All",
-                  value: null,
-                  default: emailFilters.is_sent_filter === null
-                },
-                {
-                  label: "Sent",
-                  value: "1",
-                  default: emailFilters.is_sent_filter === "1"
-                },
-                {
-                  label: "Not Sent",
-                  value: "0",
-                  default: emailFilters.is_sent_filter === "0"
-                }
-              ]}
-              setValue={(newValue) => handleSetSentFilter(newValue)}
-              style={{
+          <Grid2 size={{ xs: 12, sm: 6 }}>
+            <ToggleButtonGroup
+              exclusive
+              value={emailFilters.is_sent_filter}
+              onChange={(ev, newValue) => handleSetSentFilter(newValue)}
+              sx={(theme) => ({
                 width: "100%",
                 height: 40,
-                color: "#337ab7",
-                fontSize: "10px"
-              }}
-            />
-          </div>
+                "& .MuiToggleButtonGroup-grouped": {
+                  flex: 1,
+                  "&.Mui-selected": {
+                    backgroundColor: theme.palette.primary.main,
+                    color: theme.palette.primary.contrastText,
+                    "&:hover": {
+                      backgroundColor: theme.palette.primary.dark
+                    }
+                  }
+                }
+              })}
+            >
+              <ToggleButton value={null}>
+                {T.translate("email_logs.all")}
+              </ToggleButton>
+              <ToggleButton value="1">
+                {T.translate("emails.sent")}
+              </ToggleButton>
+              <ToggleButton value="0">
+                {T.translate("email_logs.not_sent")}
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid2>
         )}
         {enabledFilters.includes("sent_date_filter") && (
-          <>
-            <div className="col-md-3">
+          <LocalizationProvider dateAdapter={AdapterMoment}>
+            <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
-                id="sent_date_filter"
-                format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-                inputProps={{
-                  placeholder: T.translate(
-                    "email_logs.placeholders.sent_date_from"
-                  )
-                }}
-                onChange={(ev) => handleChangeDateFilter(ev, false)}
+                label={T.translate("email_logs.placeholders.sent_date_from")}
+                format="YYYY-MM-DD HH:mm"
+                onChange={(value) => handleChangeDateFilter(value, false)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
                   emailFilters.sent_date_filter[0],
                   "UTC"
                 )}
-                className="event-list-date-picker"
+                slotProps={{
+                  textField: { fullWidth: true, size: "small" }
+                }}
               />
-            </div>
-            <div className="col-md-3">
+            </Grid2>
+            <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
-                id="sent_date_filter"
-                format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-                inputProps={{
-                  placeholder: T.translate(
-                    "email_logs.placeholders.sent_date_to"
-                  )
-                }}
-                onChange={(ev) => handleChangeDateFilter(ev, true)}
+                label={T.translate("email_logs.placeholders.sent_date_to")}
+                format="YYYY-MM-DD HH:mm"
+                onChange={(value) => handleChangeDateFilter(value, true)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
                   emailFilters.sent_date_filter[1],
                   "UTC"
                 )}
-                className="event-list-date-picker"
+                slotProps={{
+                  textField: { fullWidth: true, size: "small" }
+                }}
               />
-            </div>
-          </>
+            </Grid2>
+          </LocalizationProvider>
         )}
         {enabledFilters.includes("template_filter") && (
-          <div className="col-md-6">
-            <EmailTemplateInput
+          <Grid2 size={{ xs: 12, sm: 6 }}>
+            <AsyncSelectInput
               id="template_filter"
+              label={T.translate("email_logs.placeholders.template")}
               value={emailFilters.template_filter}
-              placeholder={T.translate("email_logs.placeholders.template")}
               onChange={handleEmailFilterChange}
-              isClearable
-              cacheOptions
-              defaultOptions
-              plainValue
+              queryFunction={queryTemplates}
+              formatOption={(t) => ({
+                value: t.identifier,
+                label: t.identifier
+              })}
             />
-          </div>
+          </Grid2>
         )}
-      </div>
-      <div className="row" style={{ marginBottom: 15 }}>
-        <div className="col-md-12">
-          <label htmlFor="select_fields">
-            {T.translate("email_logs.select_fields")}
-          </label>
-          <Dropdown
-            id="select_fields"
-            placeholder={T.translate("email_logs.placeholders.select_fields")}
-            value={selectedColumns}
-            onChange={handleColumnsChange}
-            options={handleDDLSortByLabel(ddl_columns)}
-            isClearable
-            isMulti
-          />
-        </div>
-      </div>
+      </Grid2>
+      <Grid2 sx={{ mb: 2 }}>
+        <ChipMultiSelect
+          id="select_fields"
+          label={T.translate("email_logs.select_fields")}
+          value={selectedColumns}
+          onChange={handleColumnsChange}
+          options={handleDDLSortByLabel(ddl_columns)}
+        />
+      </Grid2>
 
       {emails.length === 0 && <div>{T.translate("emails.no_emails")}</div>}
 
       {emails.length > 0 && (
-        <>
-          <div className="email-logs-table-wrapper">
-            <Table
-              options={table_options}
-              data={emails}
-              columns={columns}
-              onSort={handleSort}
-            />
-          </div>
-          <Pagination
-            bsSize="medium"
-            prev
-            next
-            first
-            last
-            ellipsis
-            boundaryLinks
-            maxButtons={10}
-            items={lastPage}
-            activePage={currentPage}
-            onSelect={handlePageChange}
-          />
-        </>
+        <MuiTable
+          options={table_options}
+          data={emails}
+          columns={columns}
+          onSort={handleSort}
+          perPage={perPage}
+          currentPage={currentPage}
+          totalRows={totalEmails}
+          onPageChange={handlePageChange}
+          onPerPageChange={handlePerPageChange}
+        />
       )}
     </div>
   );
diff --git a/src/styles/email-logs-page.less b/src/styles/email-logs-page.less
deleted file mode 100644
index 3e3ad68c4..000000000
--- a/src/styles/email-logs-page.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.email-logs-table-wrapper {
-  overflow: auto;
-}
-
-.email-table-payload {
-  max-width: 300px;
-}