diff --git a/src/actions/__tests__/email-actions.test.js b/src/actions/__tests__/email-actions.test.js
index 8431c6a0f..8bc4769b2 100644
--- a/src/actions/__tests__/email-actions.test.js
+++ b/src/actions/__tests__/email-actions.test.js
@@ -12,28 +12,34 @@ import {
 } from "openstack-uicore-foundation/lib/utils/actions";
 import {
   saveEmailTemplate,
-  getEmailTemplates,
+  getEmailTemplate,
+  resetTemplateForm,
   deleteEmailTemplate,
+  queryTemplates,
   buildRenderPayload,
   normalizeRenderErrors
 } from "../email-actions";
 import * as methods from "../../utils/methods";
 
-jest.mock("../../history", () => ({ push: jest.fn() }));
-
 jest.mock("openstack-uicore-foundation/lib/utils/actions", () => ({
   __esModule: true,
   ...jest.requireActual("openstack-uicore-foundation/lib/utils/actions"),
   postRequest: jest.fn(),
   putRequest: jest.fn(),
   getRequest: jest.fn(),
-  deleteRequest: jest.fn()
+  deleteRequest: jest.fn(),
+  fetchErrorHandler: jest.fn()
 }));
 
 jest.mock("../marketing-actions", () => ({
   saveMarketingSetting: jest.fn()
 }));
 
+jest.mock("../../history", () => ({
+  __esModule: true,
+  default: { push: jest.fn() }
+}));
+
 const requestMock =
   (requestActionCreator, receiveActionCreator) => () => (dispatch) => {
     if (requestActionCreator && typeof requestActionCreator === "function") {
@@ -49,23 +55,6 @@ const requestMock =
     });
   };
 
-const getRequestMock =
-  (requestActionCreator, receiveActionCreator, _url, _handler, syncPayload) =>
-  () =>
-  (dispatch) => {
-    if (requestActionCreator && typeof requestActionCreator === "function") {
-      dispatch(requestActionCreator(syncPayload || {}));
-    }
-    return new Promise((resolve) => {
-      if (typeof receiveActionCreator === "function") {
-        dispatch(receiveActionCreator({ response: {} }));
-      } else {
-        dispatch(receiveActionCreator);
-      }
-      resolve({});
-    });
-  };
-
 const deleteRequestMock =
   (_requestActionCreator, receiveAction) => () => (dispatch) =>
     new Promise((resolve) => {
@@ -92,15 +81,6 @@ describe("saveEmailTemplate", () => {
   });
 
   describe("create path (entity has no id)", () => {
-    it("returns a Promise", async () => {
-      const store = mockStore({});
-      const result = store.dispatch(
-        saveEmailTemplate({ identifier: "test-template" })
-      );
-      expect(result).toBeInstanceOf(Promise);
-      await expect(result).resolves.toBeUndefined();
-    });
-
     it("dispatches TEMPLATE_ADDED then STOP_LOADING on success", async () => {
       const store = mockStore({});
       store.dispatch(saveEmailTemplate({ identifier: "test-template" }));
@@ -116,15 +96,6 @@ describe("saveEmailTemplate", () => {
   });
 
   describe("update path (entity has id)", () => {
-    it("returns a Promise", async () => {
-      const store = mockStore({});
-      const result = store.dispatch(
-        saveEmailTemplate({ id: 1, identifier: "test-template" })
-      );
-      expect(result).toBeInstanceOf(Promise);
-      await expect(result).resolves.toBeUndefined();
-    });
-
     it("dispatches TEMPLATE_UPDATED then STOP_LOADING on success", async () => {
       const store = mockStore({});
       store.dispatch(saveEmailTemplate({ id: 1, identifier: "test-template" }));
@@ -140,26 +111,88 @@ describe("saveEmailTemplate", () => {
   });
 });
 
-describe("getEmailTemplates", () => {
+describe("getEmailTemplate - stale response guard", () => {
   const middlewares = [thunk];
   const mockStore = configureStore(middlewares);
 
+  const isTemplateFetchUrl = (url) => /\/mail-templates\/[^/]+$/.test(url);
+
+  // each template fetch stays in flight until the test calls resolvers[id]()
+  const mockDeferredTemplateFetches = () => {
+    const resolvers = {};
+    getRequest.mockImplementation(
+      (requestActionCreator, receiveActionCreator, url) => () => (dispatch) => {
+        if (isTemplateFetchUrl(url)) {
+          const id = Number(url.split("/").pop());
+          return new Promise((resolve) => {
+            resolvers[id] = () => {
+              dispatch(receiveActionCreator({ response: { id } }));
+              resolve();
+            };
+          });
+        }
+        if (requestActionCreator) dispatch(requestActionCreator({}));
+        dispatch(receiveActionCreator({ response: {} }));
+        return Promise.resolve();
+      }
+    );
+    return resolvers;
+  };
+
   beforeEach(() => {
     jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN");
-    getRequest.mockImplementation(getRequestMock);
   });
 
   afterEach(() => {
     jest.restoreAllMocks();
   });
 
-  it("dispatches REQUEST_TEMPLATES with page and perPage", async () => {
+  it("drops an older template's response after a newer template's response already landed", async () => {
+    const resolvers = mockDeferredTemplateFetches();
+
     const store = mockStore({});
-    store.dispatch(getEmailTemplates("foo", 2, 25));
+
+    // User opens template 5, then quickly navigates to template 8 before
+    // template 5's fetch settles - both requests are genuinely in flight when
+    // template 8's response lands first.
+    store.dispatch(getEmailTemplate("5"));
     await flushPromises();
+    store.dispatch(getEmailTemplate("8"));
+    await flushPromises();
+    resolvers[8]();
+    await flushPromises();
+    resolvers[5]();
+    await flushPromises();
+
+    const receivedIds = store
+      .getActions()
+      .filter((a) => a.type === "RECEIVE_TEMPLATE")
+      .map((a) => a.payload.response.id);
+
+    expect(receivedIds).toEqual([8]);
+  });
+
+  it("drops a template's response that lands after resetTemplateForm supersedes it", async () => {
+    const resolvers = mockDeferredTemplateFetches();
+
+    const store = mockStore({});
+
+    // User opens template 5, then navigates back to the list and clicks
+    // "Add new" before template 5's fetch settles.
+    store.dispatch(getEmailTemplate("5"));
+    await flushPromises();
+    store.dispatch(resetTemplateForm());
+    await flushPromises();
+    resolvers[5]();
+    await flushPromises();
+
+    const actionTypes = store.getActions().map((a) => a.type);
 
-    const req = store.getActions().find((a) => a.type === "REQUEST_TEMPLATES");
-    expect(req.payload).toMatchObject({ page: 2, perPage: 25 });
+    expect(actionTypes).not.toContain("RECEIVE_TEMPLATE");
+    expect(actionTypes).toContain("RESET_TEMPLATE_FORM");
+    expect(actionTypes.lastIndexOf("STOP_LOADING")).toBeGreaterThan(
+      actionTypes.indexOf("START_LOADING")
+    );
   });
 });
 
@@ -189,6 +222,32 @@ describe("deleteEmailTemplate", () => {
   });
 });
 
+describe("queryTemplates", () => {
+  beforeEach(() => {
+    jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN");
+    global.fetch = jest.fn(() => Promise.reject(new Error("network down")));
+  });
+
+  afterEach(() => {
+    delete global.fetch;
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it("settles the callback with no options when the search request fails", async () => {
+    jest.useFakeTimers();
+    const callback = jest.fn();
+
+    queryTemplates("welcome", callback);
+    jest.runAllTimers();
+    // flushPromises schedules on a timer, so it needs the real ones
+    jest.useRealTimers();
+    await flushPromises();
+
+    expect(callback).toHaveBeenCalledWith([]);
+  });
+});
+
 describe("buildRenderPayload", () => {
   it("sends the mjml param when isMjml is true", () => {
     expect(
diff --git a/src/actions/email-actions.js b/src/actions/email-actions.js
index 62f54d116..9b4b5310b 100644
--- a/src/actions/email-actions.js
+++ b/src/actions/email-actions.js
@@ -11,9 +11,7 @@
  * limitations under the License.
  * */
 import T from "i18n-react/dist/i18n-react";
-import Swal from "sweetalert2";
 import {
-  VALIDATE,
   getRequest,
   putRequest,
   postRequest,
@@ -21,21 +19,24 @@ import {
   createAction,
   stopLoading,
   startLoading,
-  showSuccessMessage,
   authErrorHandler,
+  snackbarErrorHandler,
+  snackbarSuccessHandler,
   fetchResponseHandler,
   fetchErrorHandler,
   escapeFilterValue
 } from "openstack-uicore-foundation/lib/utils/actions";
 import URI from "urijs";
 import debounce from "lodash/debounce";
-import history from "../history";
-import { checkOrFilter, getAccessTokenSafely } from "../utils/methods";
+import {
+  checkOrFilter,
+  getAccessTokenSafely,
+  sequenced
+} from "../utils/methods";
 import { saveMarketingSetting } from "./marketing-actions";
 import {
   DEBOUNCE_WAIT,
   DEFAULT_PER_PAGE,
-  ERROR_CODE_412,
   HUNDRED_PER_PAGE
 } from "../utils/constants";
 
@@ -97,17 +98,32 @@ export const getEmailTemplates =
       createAction(REQUEST_TEMPLATES),
       createAction(RECEIVE_TEMPLATES),
       `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates`,
-      authErrorHandler,
+      snackbarErrorHandler,
       { order, orderDir, term, page, perPage }
-    )(params)(dispatch).then(() => {
-      dispatch(stopLoading());
-    });
+    )(params)(dispatch)
+      .finally(() => {
+        dispatch(stopLoading());
+      })
+      .catch(() => {});
   };
 
+// Sequence-guard (see sequenced()): EditEmailTemplatePage dispatches a fresh
+// getEmailTemplate(id) on every route param change, and concurrent calls for
+// different template ids never abort each other - a stale response landing
+// after a newer one (or after a reset) would overwrite the store's entity
+// with the wrong template's data, and EmailTemplateForm's loadedEntityIdRef
+// check would silently reseed the visible form with it. guardedDispatch
+// drops the RECEIVE/loading dispatches from a superseded call.
+const getEmailTemplateSeq = sequenced();
+
 export const getEmailTemplate = (templateId) => async (dispatch) => {
+  const { isCurrent, guardedDispatch } = getEmailTemplateSeq(dispatch);
   const accessToken = await getAccessTokenSafely();
 
-  dispatch(startLoading());
+  // Superseded while awaiting the token -> don't fire a request at all.
+  if (!isCurrent()) return Promise.resolve();
+
+  guardedDispatch(startLoading());
 
   const params = { access_token: accessToken, expand: "parent,versions" };
 
@@ -115,13 +131,13 @@ export const getEmailTemplate = (templateId) => async (dispatch) => {
     null,
     createAction(RECEIVE_TEMPLATE),
     `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates/${templateId}`,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+    snackbarErrorHandler
+  )(params)(guardedDispatch).finally(() => guardedDispatch(stopLoading()));
 };
 
 export const resetTemplateForm = () => (dispatch) => {
+  getEmailTemplateSeq(dispatch); // invalidates any in-flight getEmailTemplate
+  dispatch(stopLoading());
   dispatch(createAction(RESET_TEMPLATE_FORM)({}));
 };
 
@@ -141,12 +157,17 @@ export const saveEmailTemplate =
         createAction(TEMPLATE_UPDATED),
         `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates/${entity.id}`,
         normalizedEntity,
-        customErrorHandler,
+        snackbarErrorHandler,
         entity
       )(params)(dispatch)
         .then(() => {
           if (!noAlert)
-            dispatch(showSuccessMessage(T.translate("emails.template_saved")));
+            dispatch(
+              snackbarSuccessHandler({
+                title: T.translate("general.success"),
+                html: T.translate("emails.template_saved")
+              })
+            );
         })
         .finally(() => {
           dispatch(stopLoading());
@@ -157,12 +178,16 @@ export const saveEmailTemplate =
       createAction(TEMPLATE_ADDED),
       `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates`,
       normalizedEntity,
-      customErrorHandler,
+      snackbarErrorHandler,
       entity
     )(params)(dispatch)
-      .then((payload) => {
-        dispatch(showSuccessMessage(T.translate("emails.template_created")));
-        history.push(`/app/emails/templates/${payload.response.id}`);
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("emails.template_created")
+          })
+        );
       })
       .finally(() => {
         dispatch(stopLoading());
@@ -181,8 +206,8 @@ export const deleteEmailTemplate = (templateId) => async (dispatch) => {
     createAction(TEMPLATE_DELETED)({ templateId }),
     `${window.EMAIL_API_BASE_URL}/api/v1/mail-templates/${templateId}`,
     null,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
+    snackbarErrorHandler
+  )(params)(dispatch).finally(() => {
     dispatch(stopLoading());
   });
 };
@@ -274,7 +299,11 @@ export const queryTemplates = debounce(async (input, callback) => {
 
       callback(options);
     })
-    .catch(fetchErrorHandler);
+    .catch((err) => {
+      fetchErrorHandler(err);
+      // settle the callback so callers can clear their loading state
+      callback([]);
+    });
 }, DEBOUNCE_WAIT);
 
 /** ********************************************************************************************************* */
@@ -351,11 +380,13 @@ export const getSentEmails =
       createAction(REQUEST_EMAILS),
       createAction(RECEIVE_EMAILS),
       `${window.EMAIL_API_BASE_URL}/api/v1/mails`,
-      authErrorHandler,
+      snackbarErrorHandler,
       { order, orderDir, term, page, perPage, filters }
-    )(params)(dispatch).then(() => {
-      dispatch(stopLoading());
-    });
+    )(params)(dispatch)
+      .finally(() => {
+        dispatch(stopLoading());
+      })
+      .catch(() => {});
   };
 
 export const updateTemplateJsonData = (data) => async (dispatch) =>
@@ -380,10 +411,12 @@ export const getAllClients = () => async (dispatch) => {
     createAction(REQUEST_EMAIL_CLIENTS),
     createAction(RECEIVE_EMAIL_CLIENTS),
     `${window.EMAIL_API_BASE_URL}/api/v1/clients`,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
-    dispatch(stopLoading());
-  });
+    snackbarErrorHandler
+  )(params)(dispatch)
+    .finally(() => {
+      dispatch(stopLoading());
+    })
+    .catch(() => {});
 };
 
 /** ********************************************************************************************************* */
@@ -437,43 +470,6 @@ export const saveMarketingEmailSettings =
       })
     );
 
-export const customErrorHandler = (err, res) => (dispatch) => {
-  const code = err.status;
-  let msg = "";
-
-  dispatch(stopLoading());
-
-  switch (code) {
-    case ERROR_CODE_412:
-      if (Array.isArray(err.response.body)) {
-        err.response.body.forEach((er) => {
-          msg += `${er}<br>`;
-        });
-      } else {
-        for (const [key, value] of Object.entries(err.response.body)) {
-          if (isNaN(key)) {
-            msg += `${key}: `;
-          }
-
-          msg += `${value}<br>`;
-        }
-      }
-
-      Swal.fire("Validation error", msg, "warning");
-
-      if (err.response.body.errors) {
-        dispatch({
-          type: VALIDATE,
-          payload: { errors: err.response.body }
-        });
-      }
-
-      break;
-    default:
-      dispatch(authErrorHandler(err, res));
-  }
-};
-
 const parseFilters = (filters) => {
   let filter = {};
 
diff --git a/src/actions/sponsor-reports-actions.js b/src/actions/sponsor-reports-actions.js
index 2f7112fdf..c0e94197a 100644
--- a/src/actions/sponsor-reports-actions.js
+++ b/src/actions/sponsor-reports-actions.js
@@ -13,7 +13,8 @@ import {
   getAccessTokenSafely,
   isPositiveIntId,
   escapeFilterValue,
-  toCSV
+  toCSV,
+  sequenced
 } from "../utils/methods";
 import {
   DEFAULT_CURRENT_PAGE,
@@ -73,35 +74,6 @@ export const SET_PURCHASE_DETAILS_BY_ITEM_SORT =
 // line for one item together — the shape the warehouse pull sheet needs.
 export const LINES_ORDER_BY_ITEM = "item_code";
 
-// Per-thunk sequence-token factory guarding against stale-response commits.
-// Two concurrent invocations of the same thunk (different filters/page/sponsor)
-// carry different getRequest abort keys (only access_token is stripped from the
-// key), so they never cancel each other and whichever response lands LAST would
-// win — even the older one. Each begin(dispatch) bumps the thunk's counter and
-// returns helpers scoped to that invocation:
-//   isCurrent()        — false once a newer invocation has begun
-//   guardedDispatch(a) — forwards to dispatch only while current, so a
-//                        superseded invocation cannot mutate state at all
-//                        (REQUEST, RECEIVE, error handlers, start/stopLoading).
-// The newest invocation is always current, so the overlay is always cleared by
-// whichever call finishes last. A STALE call's 401 re-login is also dropped
-// (uicore authErrorHandler reaches doLogin by dispatching a thunk through the
-// dispatch it is given) — safe: the fresh call carries the same token, so it
-// 401s too and drives the re-login, and uicore's isClearingSessionState guard
-// dedupes concurrent attempts.
-const sequenced = () => {
-  let seq = 0;
-  return (dispatch) => {
-    seq += 1;
-    const mySeq = seq;
-    return {
-      isCurrent: () => mySeq === seq,
-      guardedDispatch: (action) => {
-        if (mySeq === seq) dispatch(action);
-      }
-    };
-  };
-};
 // One sequence per thunk that commits fetched data to the store.
 const purchaseDetailsSeq = sequenced();
 const purchaseLinesSeq = sequenced();
diff --git a/src/components/forms/__tests__/email-template-form.test.js b/src/components/forms/__tests__/email-template-form.test.js
index a90b57e15..ee13a8d65 100644
--- a/src/components/forms/__tests__/email-template-form.test.js
+++ b/src/components/forms/__tests__/email-template-form.test.js
@@ -7,22 +7,30 @@ import {
   beforeEach,
   afterEach
 } from "@jest/globals";
-import { render, act, fireEvent } from "@testing-library/react";
+import { render, act, fireEvent, screen, within } from "@testing-library/react";
+import mjml2html from "mjml-browser";
+import showConfirmDialog from "../../mui/showConfirmDialog";
+import { EMAIL_TEMPLATE_TYPE_MJML } from "../../../utils/constants";
 
 import EmailTemplateForm from "../email-template-form";
 
-// Mock heavy children that don't matter for the effect logic under test.
 jest.mock("@uiw/react-codemirror", () => ({
   __esModule: true,
-  default: () => null
+  default: ({ id, value, onChange }) => (
+    <textarea
+      data-testid={`editor-${id}`}
+      value={value}
+      onChange={(ev) => onChange(ev.target.value)}
+    />
+  )
 }));
-jest.mock("sweetalert2", () => ({
+jest.mock("../../mui/showConfirmDialog", () => ({
   __esModule: true,
-  default: { fire: jest.fn(() => Promise.resolve({})) }
+  default: jest.fn(() => Promise.resolve(true))
 }));
 jest.mock("mjml-browser", () => ({
   __esModule: true,
-  default: () => ({ html: "<html></html>" })
+  default: jest.fn(() => ({ html: "<html></html>" }))
 }));
 jest.mock("../../inputs/email-template-input", () => ({
   __esModule: true,
@@ -31,7 +39,6 @@ jest.mock("../../inputs/email-template-input", () => ({
 
 const baseProps = (entity) => ({
   entity,
-  match: { params: { template_id: `${entity.id}` } },
   errors: {},
   clients: [],
   preview: null,
@@ -62,7 +69,10 @@ const htmlEntity = {
 };
 
 describe("EmailTemplateForm preview dispatch", () => {
-  beforeEach(() => jest.useFakeTimers());
+  beforeEach(() => {
+    jest.useFakeTimers();
+    showConfirmDialog.mockResolvedValue(true);
+  });
   afterEach(() => {
     jest.runOnlyPendingTimers();
     jest.useRealTimers();
@@ -83,6 +93,16 @@ describe("EmailTemplateForm preview dispatch", () => {
     );
   });
 
+  it("drops the queued preview render when the form unmounts", async () => {
+    const props = baseProps(mjmlEntity);
+    const { unmount } = render(<EmailTemplateForm {...props} />);
+    unmount();
+    await act(async () => {
+      jest.advanceTimersByTime(600);
+    });
+    expect(props.renderEmailTemplate).not.toHaveBeenCalled();
+  });
+
   it("sends html with isMjml=false for an HTML template", async () => {
     const props = baseProps(htmlEntity);
     render(<EmailTemplateForm {...props} />);
@@ -108,14 +128,13 @@ describe("EmailTemplateForm preview dispatch", () => {
     await act(async () => {
       jest.advanceTimersByTime(600);
     });
-    // initial MJML-mode request
     expect(sharedRender).toHaveBeenLastCalledWith(
       mjProps.templateJsonData,
       mjmlEntity.mjml_content,
       true
     );
 
-    // simulate in-place navigation to a DIFFERENT (HTML) template on the SAME form instance
+    // navigate to a different template on the same form instance (no remount)
     const htmlProps = {
       ...baseProps(htmlEntity),
       renderEmailTemplate: sharedRender
@@ -125,7 +144,6 @@ describe("EmailTemplateForm preview dispatch", () => {
       jest.advanceTimersByTime(600);
     });
 
-    // FIX: mode must re-init to HTML and send isMjml=false (pre-fix this stays true / sends mjml_content)
     expect(sharedRender).toHaveBeenLastCalledWith(
       htmlProps.templateJsonData,
       htmlEntity.html_content,
@@ -135,9 +153,8 @@ describe("EmailTemplateForm preview dispatch", () => {
 
   it("re-fires the HTML-mode preview when toggled from MJML to HTML", async () => {
     const props = baseProps(mjmlEntity);
-    const { getByDisplayValue } = render(<EmailTemplateForm {...props} />);
+    const { getByText } = render(<EmailTemplateForm {...props} />);
 
-    // initial mount → one MJML-mode request
     await act(async () => {
       jest.advanceTimersByTime(600);
     });
@@ -148,17 +165,14 @@ describe("EmailTemplateForm preview dispatch", () => {
       true
     );
 
-    // click the "switch to HTML" button — button-only mode toggle,
-    // mutates neither content field directly
     // T.translate returns the key string when no i18n config is loaded
     await act(async () => {
-      fireEvent.click(getByDisplayValue("emails.display_html"));
+      fireEvent.click(getByText("emails.display_html"));
     });
     await act(async () => {
       jest.advanceTimersByTime(600);
     });
 
-    // the HTML-mode effect re-fires with isMjml=false
     expect(props.renderEmailTemplate).toHaveBeenCalledTimes(2);
     expect(props.renderEmailTemplate).toHaveBeenLastCalledWith(
       props.templateJsonData,
@@ -166,4 +180,294 @@ describe("EmailTemplateForm preview dispatch", () => {
       false
     );
   });
+
+  it.each([
+    [true, "emails.display_html"],
+    [false, "emails.display_mjml"]
+  ])(
+    "holds HTML mode while the MJML switch warning is pending, then applies confirmed=%s",
+    async (confirmed, finalButton) => {
+      let resolveConfirm;
+      showConfirmDialog.mockReturnValue(
+        new Promise((resolve) => {
+          resolveConfirm = resolve;
+        })
+      );
+      const props = baseProps(htmlEntity);
+      const { getByText } = render(<EmailTemplateForm {...props} />);
+
+      await act(async () => {
+        jest.advanceTimersByTime(600);
+      });
+      props.renderEmailTemplate.mockClear();
+
+      fireEvent.click(getByText("emails.display_mjml"));
+      await act(async () => {
+        jest.advanceTimersByTime(600);
+      });
+
+      // no preview request for the (empty) mjml_content while still asking
+      expect(props.renderEmailTemplate).not.toHaveBeenCalled();
+      expect(getByText("emails.display_mjml")).toBeTruthy();
+
+      await act(async () => {
+        resolveConfirm(confirmed);
+      });
+      expect(getByText(finalButton)).toBeTruthy();
+    }
+  );
+});
+
+describe("EmailTemplateForm submit", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    showConfirmDialog.mockResolvedValue(true);
+  });
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  it.each(["resolves", "rejects"])(
+    "blocks a double submit while saving and re-enables Save once the save %s",
+    async (outcome) => {
+      let settleSave;
+      const onSubmit = jest.fn(
+        () =>
+          new Promise((resolve, reject) => {
+            settleSave = outcome === "resolves" ? resolve : reject;
+          })
+      );
+      const props = { ...baseProps(htmlEntity), onSubmit };
+      const { getByRole } = render(<EmailTemplateForm {...props} />);
+
+      const saveButton = getByRole("button", { name: "general.save" });
+      await act(async () => {
+        fireEvent.click(saveButton);
+      });
+      expect(saveButton).toBeDisabled();
+
+      await act(async () => {
+        fireEvent.click(saveButton);
+      });
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        settleSave(new Error("save failed"));
+      });
+      expect(saveButton).not.toBeDisabled();
+    }
+  );
+
+  it("shows server errors per field, clears only the edited field's error, and keeps unsaved edits", async () => {
+    Element.prototype.scrollIntoView = jest.fn();
+    const props = baseProps(htmlEntity);
+    const { container, getByRole, findByText, queryByText, rerender } = render(
+      <EmailTemplateForm {...props} />
+    );
+
+    fireEvent.change(container.querySelector("#subject"), {
+      target: { name: "subject", value: "Edited subject" }
+    });
+    rerender(
+      <EmailTemplateForm
+        {...props}
+        errors={{ identifier: "already taken", from_email: "invalid" }}
+      />
+    );
+    expect(await findByText("already taken")).toBeTruthy();
+    expect(container.querySelector("#subject").value).toBe("Edited subject");
+
+    await act(async () => {
+      fireEvent.change(container.querySelector("#identifier"), {
+        target: { name: "identifier", value: "new-identifier" }
+      });
+    });
+    expect(queryByText("already taken")).toBeNull();
+    expect(queryByText("invalid")).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(getByRole("button", { name: "general.save" }));
+    });
+    expect(props.onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        subject: "Edited subject",
+        identifier: "new-identifier"
+      })
+    );
+  });
+});
+
+describe("EmailTemplateForm mjml validation", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    mjml2html.mockImplementation(() => {
+      throw new Error("Malformed MJML");
+    });
+  });
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    mjml2html.mockImplementation(() => ({ html: "<html></html>" }));
+  });
+
+  it("does not compile unedited mjml (on load or a bare mode switch), so Save stays enabled", async () => {
+    const { getByRole, getByText } = render(
+      <EmailTemplateForm {...baseProps(mjmlEntity)} />
+    );
+    await act(async () => {
+      jest.advanceTimersByTime(600);
+    });
+    await act(async () => {
+      fireEvent.click(getByText("emails.display_html"));
+    });
+    await act(async () => {
+      fireEvent.click(getByText("emails.display_mjml"));
+    });
+
+    expect(mjml2html).not.toHaveBeenCalled();
+    expect(getByRole("button", { name: "general.save" })).not.toBeDisabled();
+  });
+
+  it("disables Save once an edit makes the mjml invalid", async () => {
+    const { getByRole, getByTestId } = render(
+      <EmailTemplateForm {...baseProps(mjmlEntity)} />
+    );
+
+    await act(async () => {
+      fireEvent.change(getByTestId("editor-mjml_content"), {
+        target: { value: "<mjml><mj-body><mj-text foo='1'>" }
+      });
+    });
+
+    expect(mjml2html).toHaveBeenCalled();
+    expect(getByRole("button", { name: "general.save" })).toBeDisabled();
+  });
+
+  it("never compiles a child template's raw mjml, even after an edit", async () => {
+    const childEntity = {
+      ...mjmlEntity,
+      parent: { id: 3, identifier: "layout" },
+      mjml_content: "{% extends 'layout' %}{% block content %}{% endblock %}"
+    };
+    const { getByRole, getByTestId } = render(
+      <EmailTemplateForm {...baseProps(childEntity)} />
+    );
+
+    await act(async () => {
+      fireEvent.change(getByTestId("editor-mjml_content"), {
+        target: {
+          value: "{% extends 'layout' %}{% block content %}x{% endblock %}"
+        }
+      });
+    });
+
+    expect(mjml2html).not.toHaveBeenCalled();
+    expect(getByRole("button", { name: "general.save" })).not.toBeDisabled();
+  });
+
+  it("compiles the seeded sample MJML of a new template", async () => {
+    mjml2html.mockImplementation(() => ({ html: "<p>compiled sample</p>" }));
+    const newEntity = {
+      ...mjmlEntity,
+      id: 0,
+      mjml_content: "",
+      html_content: ""
+    };
+    render(<EmailTemplateForm {...baseProps(newEntity)} />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("emails.display_html"));
+    });
+
+    expect(screen.getByTestId("editor-html_content")).toHaveValue(
+      "<p>compiled sample</p>"
+    );
+  });
+
+  it("puts back the stored HTML when an MJML edit is undone", async () => {
+    mjml2html.mockImplementation(() => ({ html: "<p>compiled edit</p>" }));
+    const entity = {
+      ...mjmlEntity,
+      html_content: "<p>stored</p>",
+      original_mjml_content: mjmlEntity.mjml_content,
+      original_html_content: "<p>stored</p>"
+    };
+    render(<EmailTemplateForm {...baseProps(entity)} />);
+
+    const mjmlEditor = screen.getByTestId("editor-mjml_content");
+    await act(async () => {
+      fireEvent.change(mjmlEditor, {
+        target: {
+          value: "<mjml><mj-body><mj-text>B</mj-text></mj-body></mjml>"
+        }
+      });
+    });
+    await act(async () => {
+      fireEvent.change(mjmlEditor, {
+        target: { value: mjmlEntity.mjml_content }
+      });
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByText("emails.display_html"));
+    });
+
+    expect(screen.getByTestId("editor-html_content")).toHaveValue(
+      "<p>stored</p>"
+    );
+  });
+
+  it("re-enables Save after Current version restores the stored MJML from HTML mode", async () => {
+    const entity = {
+      ...mjmlEntity,
+      original_mjml_content: mjmlEntity.mjml_content,
+      original_html_content: "",
+      versions: [
+        {
+          sha: "abc123",
+          type: EMAIL_TEMPLATE_TYPE_MJML,
+          content: "<mjml><mj-body><mj-text foo='1'>",
+          commit_date: 1700000000,
+          commit_message: "broken",
+          html_url: "https://example.com/abc123"
+        }
+      ]
+    };
+    render(<EmailTemplateForm {...baseProps(entity)} />);
+    const save = () => screen.getByRole("button", { name: "general.save" });
+    const pickVersion = async (label) => {
+      await act(async () => {
+        fireEvent.mouseDown(
+          screen
+            .getAllByRole("combobox")
+            .find((el) => /select_version|abc123/.test(el.textContent))
+        );
+      });
+      await act(async () => {
+        fireEvent.click(
+          within(screen.getByRole("listbox")).getByText(label, {
+            exact: false
+          })
+        );
+      });
+    };
+
+    await pickVersion("abc123");
+    expect(save()).toBeDisabled();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("emails.display_html"));
+    });
+    await pickVersion("emails.current_version");
+    await act(async () => {
+      fireEvent.click(screen.getByText("emails.display_mjml"));
+    });
+
+    expect(screen.getByTestId("editor-mjml_content")).toHaveValue(
+      mjmlEntity.mjml_content
+    );
+    expect(save()).not.toBeDisabled();
+  });
 });
diff --git a/src/components/forms/email-template-form.js b/src/components/forms/email-template-form.js
index 7acba8e57..436ae9298 100644
--- a/src/components/forms/email-template-form.js
+++ b/src/components/forms/email-template-form.js
@@ -11,27 +11,167 @@
  * limitations under the License.
  * */
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useMemo, useRef } from "react";
 import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 import debounce from "lodash/debounce";
-import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
+import { useFormik, FormikProvider } from "formik";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Grid2 from "@mui/material/Grid2";
+import InputLabel from "@mui/material/InputLabel";
+import CircularProgress from "@mui/material/CircularProgress";
+import MuiDropdown from "openstack-uicore-foundation/lib/components/mui/dropdown";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import CodeMirror from "@uiw/react-codemirror";
 import { sublimeInit } from "@uiw/codemirror-theme-sublime";
 import { html } from "@codemirror/lang-html";
 import mjml2html from "mjml-browser";
-import Swal from "sweetalert2";
+import showConfirmDialog from "../mui/showConfirmDialog";
 import EmailTemplateInput from "../inputs/email-template-input";
-import { scrollToError, shallowEqual, hasErrors } from "../../utils/methods";
-import "./email-template.less";
+import useScrollToError from "../../hooks/useScrollToError";
 import {
+  DEBOUNCE_WAIT,
   EMAIL_TEMPLATE_TYPE_HTML,
   EMAIL_TEMPLATE_TYPE_MJML
 } from "../../utils/constants";
 
+const TemplateModeToggle = ({ mjmlEditor, onDisplayMjml, onDisplayHtml }) =>
+  mjmlEditor ? (
+    <>
+      <InputLabel htmlFor="mjml_content">
+        {`${T.translate("emails.mjml_content")} ${T.translate(
+          "emails.using"
+        )} `}
+        <a
+          target="_blank"
+          href="https://documentation.mjml.io/"
+          rel="noreferrer"
+        >
+          {T.translate("emails.mjml_format")}
+        </a>
+      </InputLabel>
+      <br />
+      <Button variant="contained" onClick={onDisplayHtml}>
+        {T.translate("emails.display_html")}
+      </Button>
+    </>
+  ) : (
+    <>
+      <InputLabel htmlFor="html_content">
+        {`${T.translate("emails.html_content")} ${T.translate("emails.in")} `}
+        <a
+          target="_blank"
+          href="https://opensource.com/sites/default/files/gated-content/osdc_cheatsheet-jinja2.pdf"
+          rel="noreferrer"
+        >
+          {T.translate("emails.jinja_format")}
+        </a>
+        {" *"}
+      </InputLabel>
+      <br />
+      <Button variant="contained" onClick={onDisplayMjml}>
+        {T.translate("emails.display_mjml")}
+      </Button>
+    </>
+  );
+
+const VersionHistoryPicker = ({
+  historyVersion,
+  versionsDdl,
+  currentVersionExternalLink,
+  onChange
+}) => (
+  <Grid2 container spacing={1} sx={{ width: "66.66%" }}>
+    <Grid2 size={11}>
+      <InputLabel htmlFor="history_version">
+        {T.translate("emails.previous_template")}
+      </InputLabel>
+      <MuiDropdown
+        id="history_version"
+        size="small"
+        value={historyVersion}
+        placeholder={T.translate("emails.placeholders.select_version")}
+        options={versionsDdl}
+        onChange={onChange}
+      />
+    </Grid2>
+    {currentVersionExternalLink && (
+      <Grid2 size={1}>
+        <a
+          href={currentVersionExternalLink}
+          title={T.translate("emails.placeholders.see_version")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <i className="fa fa-github fa-lg" />
+        </a>
+      </Grid2>
+    )}
+  </Grid2>
+);
+
+const CodeEditorPane = ({ width, id, value, onChange }) => (
+  <Box sx={{ width, minWidth: "50%" }}>
+    <CodeMirror
+      id={id}
+      value={value}
+      onChange={onChange}
+      height="960px"
+      theme={sublimeInit({
+        settings: { caret: "#c6c6c6", fontFamily: "monospace" }
+      })}
+      extensions={[
+        html({
+          autoCloseTags: true,
+          matchClosingTags: true,
+          selfClosingTags: true
+        })
+      ]}
+    />
+  </Box>
+);
+
+const toolbarSx = {
+  display: "flex",
+  flexDirection: "row",
+  "& > div:first-of-type": {
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between",
+    mr: "30px"
+  },
+  "& > div:last-of-type": { ml: "30px" },
+  "@media only screen and (max-width: 992px)": {
+    "& > div:first-of-type": {
+      ml: 0,
+      "& > div:last-of-type": { width: "100%" }
+    }
+  },
+  "@media only screen and (max-width: 600px)": {
+    "& > div:first-of-type": {
+      flexDirection: "column",
+      alignItems: "start",
+      "& > div:last-of-type": { padding: 0 }
+    }
+  }
+};
+
+const paneToggleButtonSx = {
+  width: "100%",
+  padding: 0,
+  backgroundColor: "#42474e",
+  border: "none",
+  borderRight: "1px solid #343436",
+  color: "#fff",
+  cursor: "pointer",
+  flex: 1,
+  fontSize: "12px",
+  justifyContent: "center",
+  transition: "background-color 0.3s ease-in-out",
+  "&:hover": { backgroundColor: "#535a63" }
+};
+
 const default_mjml_content = `
 ### Sample MJML Code
 <mjml>
@@ -47,9 +187,12 @@ const default_mjml_content = `
 </mjml>
 `;
 
+// HTML-only templates open in the HTML editor, everything else in MJML
+const getInitialMjmlMode = (entity) =>
+  entity.mjml_content.length > 0 ? true : !entity.html_content;
+
 const EmailTemplateForm = ({
   entity,
-  match,
   errors,
   clients,
   preview,
@@ -60,169 +203,183 @@ const EmailTemplateForm = ({
   templateJsonData,
   renderEmailTemplate
 }) => {
-  const [stateEntity, setStateEntity] = useState({ ...entity });
-  const [stateErrors, setStateErrors] = useState(errors);
-  const [historyVersion, setHistoryVersion] = useState(null);
+  const [historyVersion, setHistoryVersion] = useState("");
   const [currentVersionExternalLink, setCurrentVersionExternalLink] =
     useState(null);
-  const [mjmlEditor, setMjmlEditor] = useState(null);
+  const [mjmlEditor, setMjmlEditor] = useState(() =>
+    getInitialMjmlMode(entity)
+  );
   const [codeOnly, setCodeOnly] = useState(false);
   const [previewOnly, setPreviewOnly] = useState(false);
   const [mobileView, setMobileView] = useState(false);
   const [scale, setScale] = useState(1);
   const [singleTab, setSingleTab] = useState(false);
-  const [templateLoaded, setTemplateLoaded] = useState(false);
   const [previewLoaded, setPreviewLoaded] = useState(false);
   const [mjmlWarning, setMjmlWarning] = useState(false);
   const [mjmlRenderError, setMjmlRenderError] = useState(null);
 
   const previewRef = useRef(null);
 
-  const style = mobileView
-    ? { width: "320px", height: "960px", transform: `scale(${scale})` }
-    : { width: "800px", height: "960px", transform: `scale(${scale})` };
+  // the server is the only validator (412 -> errors prop), so formik's own
+  // validation passes are turned off -- they would only wipe server errors
+  const formik = useFormik({
+    initialValues:
+      entity.id === 0
+        ? { ...entity, mjml_content: default_mjml_content }
+        : { ...entity },
+    enableReinitialize: true,
+    validateOnChange: false,
+    validateOnBlur: false,
+    onSubmit: (values) => Promise.resolve(onSubmit(values)).catch(() => {})
+  });
+  const { values } = formik;
 
-  useEffect(() => {
-    scrollToError(errors);
-
-    // check if the current entity is sync with template_id param
-    const templateId = match.params.template_id;
-    if (
-      templateId === `${entity.id}` ||
-      templateId === entity.identifier ||
-      (entity.id === 0 && !templateId)
-    ) {
-      setTemplateLoaded(true);
-    }
+  useScrollToError(formik);
 
-    if (!shallowEqual(stateErrors, errors)) {
-      setStateErrors({ ...errors });
-    }
+  useEffect(() => {
+    formik.setErrors(errors);
+    formik.setTouched(
+      Object.keys(errors).reduce((acc, key) => ({ ...acc, [key]: true }), {}),
+      false
+    );
+  }, [errors]);
+
+  // a different template (or the id assigned right after a create) resets
+  // the editor mode; enableReinitialize already reseeds the values
+  useEffect(() => {
+    setMjmlEditor(getInitialMjmlMode(entity));
+  }, [entity.id]);
 
-    if (!shallowEqual(stateEntity, entity)) {
-      setStateEntity({ ...entity });
-    }
-  }, [errors, entity]);
+  const setFieldValue = (field, value) => {
+    formik.setFieldValue(field, value, false);
+    formik.setFieldError(field, undefined);
+  };
 
-  useEffect(() => {
-    // if entity is correctly loaded, set state for entity use
-    if (templateLoaded) {
-      if (entity.id === 0) {
-        setStateEntity({ ...entity, mjml_content: default_mjml_content });
-      } else {
-        setStateEntity({ ...entity });
-      }
-      setStateErrors({});
-      setMjmlEditor(
-        entity.mjml_content.length > 0 ? true : !entity.html_content
-      );
-    }
-  }, [templateLoaded, entity.id]);
+  const handleFieldChange = (ev) => {
+    formik.handleChange(ev);
+    formik.setFieldError(ev.target.name, undefined);
+  };
 
   useEffect(() => {
     if (singleTab) {
-      setCodeOnly(true);
+      if (!previewOnly) setCodeOnly(true);
     } else {
       setCodeOnly(false);
       setPreviewOnly(false);
     }
   }, [singleTab]);
 
-  const DEBOUNCE_MS = 500;
   const debouncedRenderTemplate = useRef(
     debounce(async (content, json_data, isMjml) => {
-      renderEmailTemplate(json_data, content, isMjml).then(() => {
-        // wait until first API email preview to display template on screen
-        if (!previewLoaded) setPreviewLoaded(true);
-      });
-    }, DEBOUNCE_MS)
+      renderEmailTemplate(json_data, content, isMjml)
+        .then(() => {
+          // wait until first API email preview to display template on screen
+          if (!previewLoaded) setPreviewLoaded(true);
+        })
+        .catch(() => {});
+    }, DEBOUNCE_WAIT)
   ).current;
 
-  // MJML mode: send raw mjml_content so the API runs Jinja -> official MJML CLI
-  // (same pipeline as production). mjmlEditor is in the deps so a button-only
-  // mode switch re-fires this; the debounce coalesces with the HTML effect so
-  // only one preview request goes out per mode.
+  // a render still queued when the page navigates away (e.g. after a save)
+  // must not fire against the next page
+  useEffect(() => () => debouncedRenderTemplate.cancel(), []);
+
+  // MJML mode sends raw mjml_content so the API runs Jinja -> official MJML CLI
+  // (same pipeline as production); HTML mode sends html_content unchanged.
+  // mjmlEditor is in the deps so a button-only mode switch re-fires this with
+  // the other field's content.
+  const editorContent = mjmlEditor ? values.mjml_content : values.html_content;
+
   useEffect(() => {
-    if (templateLoaded && mjmlEditor)
-      debouncedRenderTemplate(stateEntity.mjml_content, templateJsonData, true);
-  }, [stateEntity.mjml_content, mjmlEditor, entity, templateJsonData]);
+    debouncedRenderTemplate(editorContent, templateJsonData, mjmlEditor);
+  }, [editorContent, mjmlEditor, entity, templateJsonData]);
+
+  // only compile a new template's seeded sample or what the user changed (an
+  // edit or a picked history version): the stored mjml was already validated
+  // by the API, and a child template's raw mjml ({% extends 'layout' %} +
+  // blocks) is never a full <mjml> document -- the API validates it after
+  // merging the parent, so the browser compiler can't judge it. Skipping
+  // returns a null error so a stale one doesn't keep Save disabled.
+  const mjmlEdited =
+    !entity.id ||
+    values.mjml_content !== formik.initialValues.mjml_content ||
+    historyVersion !== "";
+  const isChildTemplate = Boolean(values.parent?.id);
+
+  const mjmlCompileResult = useMemo(() => {
+    if (!mjmlEditor) return null;
+    if (!mjmlEdited || isChildTemplate)
+      return { htmlContent: null, error: null };
+    try {
+      const htmlContent = mjml2html(values.mjml_content, {
+        validationLevel: "strict",
+        keepComments: false,
+        collapseWhitespace: true,
+        minifyOptions: { collapseWhitespace: false }
+      }).html;
+      return { htmlContent, error: null };
+    } catch (err) {
+      return { htmlContent: null, error: err };
+    }
+  }, [
+    values.mjml_content,
+    historyVersion,
+    mjmlEdited,
+    isChildTemplate,
+    mjmlEditor
+  ]);
+
+  // tracks whether html_content currently holds our own compile output, so an
+  // edit undone back to the stored mjml can put back the stored html that
+  // matches it -- without clobbering html the user edited by hand
+  const htmlCompiledRef = useRef(false);
 
-  // HTML mode: unchanged Jinja-on-HTML preview. Guarded on !mjmlEditor so it
-  // does not fire for MJML templates.
   useEffect(() => {
-    if (templateLoaded && !mjmlEditor)
-      debouncedRenderTemplate(
-        stateEntity.html_content,
-        templateJsonData,
+    if (!mjmlCompileResult) return;
+    setMjmlRenderError(mjmlCompileResult.error);
+    if (mjmlCompileResult.htmlContent !== null) {
+      formik.setFieldValue(
+        "html_content",
+        mjmlCompileResult.htmlContent,
         false
       );
-  }, [stateEntity.html_content, mjmlEditor, entity, templateJsonData]);
-
-  useEffect(() => {
-    if (mjmlEditor) {
-      try {
-        const htmlContent = mjml2html(stateEntity.mjml_content, {
-          validationLevel: "strict",
-          keepComments: false,
-          collapseWhitespace: true,
-          minifyOptions: { collapseWhitespace: false }
-        }).html;
-        setStateEntity({ ...stateEntity, html_content: htmlContent });
-        setMjmlRenderError(null);
-      } catch (err) {
-        setMjmlRenderError(err);
-      }
+      htmlCompiledRef.current = true;
+    } else if (!mjmlEdited && htmlCompiledRef.current) {
+      formik.setFieldValue("html_content", values.original_html_content, false);
+      htmlCompiledRef.current = false;
     }
-  }, [stateEntity.mjml_content, historyVersion]);
+  }, [mjmlCompileResult]);
 
-  useEffect(() => {
-    if (
+  // gate the confirm dialog BEFORE flipping mjmlEditor -- flipping it first and
+  // asking after let the preview/compile effects fire on the still-empty
+  // mjml_content while the dialog was still pending
+  const handleDisplayMjml = () => {
+    const needsMjmlWarning =
       entity.mjml_content.length === 0 &&
       entity.html_content.length > 0 &&
-      mjmlEditor &&
-      !mjmlWarning
-    ) {
-      console.log("warning mjml");
-      Swal.fire({
-        title: T.translate("general.are_you_sure"),
-        text: T.translate("emails.mjml_warning"),
-        type: "warning",
-        confirmButtonColor: "#DD6B55",
-        confirmButtonText: T.translate("emails.understand")
-      }).then(() => {
-        setMjmlWarning(true);
-      });
-    }
-  }, [mjmlEditor]);
-
-  const handleCodeMirrorHTMLChange = (value) => {
-    setStateErrors({ ...stateErrors, html_content: "" });
-    setStateEntity({ ...stateEntity, html_content: value });
-  };
-
-  const handleCodeMirrorMJMLChange = (value) => {
-    setStateErrors({ ...stateErrors, mjml_content: "" });
-    setStateEntity({ ...stateEntity, mjml_content: value });
-  };
+      !mjmlWarning;
 
-  const handleChange = (ev) => {
-    let { value, id } = ev.target;
-
-    if (ev.target.type === "checkbox") {
-      value = ev.target.checked;
-    }
-
-    if (ev.target.type === "number") {
-      value = parseInt(ev.target.value);
+    if (!needsMjmlWarning) {
+      setMjmlEditor(true);
+      return;
     }
 
-    setStateEntity({ ...stateEntity, [id]: value });
-    setStateErrors({ ...stateErrors, [id]: "" });
+    showConfirmDialog({
+      title: T.translate("general.are_you_sure"),
+      text: T.translate("emails.mjml_warning"),
+      iconType: "warning",
+      confirmButtonColor: "error",
+      confirmButtonText: T.translate("emails.understand")
+    }).then((confirmed) => {
+      if (confirmed) {
+        setMjmlWarning(true);
+        setMjmlEditor(true);
+      }
+    });
   };
 
-  const handleSubmit = (ev) => {
-    ev.preventDefault();
-    onSubmit(stateEntity);
+  const handleCodeMirrorChange = (value) => {
+    setFieldValue(mjmlEditor ? "mjml_content" : "html_content", value);
   };
 
   const handleJsonDataEdit = (ev) => {
@@ -234,26 +391,28 @@ const EmailTemplateForm = ({
   const MOBILE_PREVIEW_WIDTH = 320;
   const DESKTOP_PREVIEW_WIDTH = 800;
 
+  const style = {
+    width: `${mobileView ? MOBILE_PREVIEW_WIDTH : DESKTOP_PREVIEW_WIDTH}px`,
+    height: "960px",
+    transform: `scale(${scale})`
+  };
+
   const handleResizeWindow = () => {
-    if (window.innerWidth < SINGLE_TAB_BREAKPOINT) {
-      setSingleTab(true);
-    } else {
-      setSingleTab(false);
-    }
+    setSingleTab(window.innerWidth < SINGLE_TAB_BREAKPOINT);
     const currentPreviewWidth = previewRef?.current?.offsetWidth;
-    if (mobileView) {
-      if (currentPreviewWidth < MOBILE_PREVIEW_WIDTH) {
-        const newScale = currentPreviewWidth / MOBILE_PREVIEW_WIDTH;
-        setScale(newScale);
-      }
-    } else if (currentPreviewWidth < DESKTOP_PREVIEW_WIDTH) {
-      const newScale = currentPreviewWidth / DESKTOP_PREVIEW_WIDTH;
-      setScale(newScale);
-    }
+    if (!currentPreviewWidth) return;
+    const targetWidth = mobileView
+      ? MOBILE_PREVIEW_WIDTH
+      : DESKTOP_PREVIEW_WIDTH;
+    // always recompute the full ratio -- shrink to fit when the container is
+    // narrower than the target, but also grow back to 1 once there is room
+    // again (a narrow measurement early in the mount sequence must not
+    // permanently lock the preview at a reduced scale)
+    setScale(Math.min(1, currentPreviewWidth / targetWidth));
   };
 
   const handleTabChange = (ev) => {
-    const { id } = ev.target;
+    const { id } = ev.currentTarget;
     if (singleTab) {
       if (id === "preview") {
         setCodeOnly(false);
@@ -277,381 +436,307 @@ const EmailTemplateForm = ({
 
   const handleVersionChange = (ev) => {
     const { value } = ev.target;
-    if (value === null) {
+    if (!value) {
       // restore original version
-      setStateEntity({
-        ...stateEntity,
-        html_content: stateEntity.original_html_content,
-        mjml_content: stateEntity.original_mjml_content
-      });
-      setHistoryVersion(null);
+      formik.setValues(
+        {
+          ...values,
+          html_content: values.original_html_content,
+          mjml_content: values.original_mjml_content
+        },
+        false
+      );
+      setHistoryVersion("");
       setCurrentVersionExternalLink(null);
       return;
     }
 
-    const selectedHistory = stateEntity.versions.find((h) => h.sha === value);
+    const selectedHistory = values.versions.find((h) => h.sha === value);
     setHistoryVersion(selectedHistory.sha);
     setCurrentVersionExternalLink(selectedHistory.html_url);
     if (selectedHistory.type === EMAIL_TEMPLATE_TYPE_HTML) {
       setMjmlEditor(false);
-      setStateEntity({ ...stateEntity, html_content: selectedHistory.content });
+      setFieldValue("html_content", selectedHistory.content);
     }
     if (selectedHistory.type === EMAIL_TEMPLATE_TYPE_MJML) {
       setMjmlEditor(true);
-      setStateEntity({ ...stateEntity, mjml_content: selectedHistory.content });
+      setFieldValue("mjml_content", selectedHistory.content);
     }
   };
 
-  const isTemplateInvalid = () => mjmlEditor && mjmlRenderError !== null;
+  const isTemplateInvalid = mjmlEditor && mjmlRenderError !== null;
 
+  // recompute whenever a layout-affecting toggle changes the preview
+  // container's rendered width (not just on an actual window resize)
   useEffect(() => {
     handleResizeWindow();
-    window.addEventListener("resize", handleResizeWindow);
+  }, [mobileView, codeOnly, previewOnly, singleTab]);
+
+  // bind the native listener once; the ref keeps it pointed at the latest
+  // closure so a real resize still sees current state without rebinding
+  const handleResizeWindowRef = useRef(handleResizeWindow);
+  handleResizeWindowRef.current = handleResizeWindow;
+
+  useEffect(() => {
+    const onResize = () => handleResizeWindowRef.current();
+    window.addEventListener("resize", onResize);
     return () => {
-      window.removeEventListener("resize", handleResizeWindow);
+      window.removeEventListener("resize", onResize);
     };
-  });
+  }, []);
 
   const email_clients_ddl = clients
     ? clients.map((cli) => ({ label: cli.name, value: cli.id }))
     : [];
-  const versions_ddl = stateEntity.versions
-    ? stateEntity.versions.map((v) => ({
-        label: `${epochToMomentTimeZone(v.commit_date, "UTC").format(
-          "YYYY-MM-DD HH:mm z"
-        )} - ${v.sha} - ${v.commit_message}`,
-        value: v.sha
-      }))
+  const versions_ddl = values.versions
+    ? [
+        { value: "", label: T.translate("emails.current_version") },
+        ...values.versions.map((v) => ({
+          label: `${epochToMomentTimeZone(v.commit_date, "UTC").format(
+            "YYYY-MM-DD HH:mm z"
+          )} - ${v.sha} - ${v.commit_message}`,
+          value: v.sha
+        }))
+      ]
     : [];
 
+  const showCodeEditor = !previewOnly;
+  const showPreview = !codeOnly;
+  const codeWidth = codeOnly ? "100%" : "50%";
+  const previewWidth = previewOnly ? "100%" : "50%";
+
+  const renderPreviewBody = () => {
+    if (renderErrors.length > 0) {
+      return (
+        <Box>
+          {T.translate("emails.error_render_template")}
+          <ul>
+            {renderErrors.map((err) => (
+              <li key={err}>{err}</li>
+            ))}
+          </ul>
+        </Box>
+      );
+    }
+    if (mjmlEditor && mjmlRenderError?.message) {
+      return (
+        <Box>
+          {T.translate("emails.error_render_template")}
+          <ul>
+            <li>{mjmlRenderError.message}</li>
+          </ul>
+        </Box>
+      );
+    }
+    return (
+      previewLoaded && (
+        <iframe
+          style={{ ...style }}
+          id="preview"
+          name="preview"
+          title={T.translate("emails.preview_title")}
+          sandbox="allow-same-origin"
+          srcDoc={preview}
+        />
+      )
+    );
+  };
+
+  const textField = (name, label) => (
+    <Grid2 size={{ xs: 12, md: 4 }}>
+      <InputLabel htmlFor={name}>{`${T.translate(label)} *`}</InputLabel>
+      <MuiFormikTextField
+        id={name}
+        name={name}
+        size="small"
+        margin="none"
+        fullWidth
+        onChange={handleFieldChange}
+      />
+    </Grid2>
+  );
+
   return (
-    <form className="email-template-form">
-      <input type="hidden" id="id" value={stateEntity.id} />
-      <div className="row form-group">
-        <div className="col-md-4">
-          <label> {T.translate("emails.name")} *</label>
-          <Input
-            id="identifier"
-            value={stateEntity.identifier}
-            onChange={handleChange}
-            className="form-control"
-            error={hasErrors("identifier", errors)}
-          />
-        </div>
-        <div className="col-md-4">
-          <label> {T.translate("emails.client")} *</label>
-          <Dropdown
-            id="allowed_clients"
-            value={stateEntity.allowed_clients}
-            placeholder={T.translate("emails.placeholders.select_client")}
-            options={email_clients_ddl}
-            onChange={handleChange}
-            isMulti
-          />
-        </div>
-        <div className="col-md-4">
-          <label> {T.translate("emails.parent")} *</label>
-          <EmailTemplateInput
-            id="parent"
-            value={stateEntity.parent}
-            ownerId={stateEntity.id}
-            placeholder={T.translate("emails.placeholders.select_parent")}
-            onChange={handleChange}
-          />
-        </div>
-      </div>
-      <div className="row form-group">
-        <div className="col-md-4">
-          <label> {T.translate("emails.from_email")} *</label>
-          <Input
-            id="from_email"
-            value={stateEntity.from_email}
-            onChange={handleChange}
-            className="form-control"
-            error={hasErrors("from_email", errors)}
-          />
-        </div>
-        <div className="col-md-4">
-          <label> {T.translate("emails.subject")} *</label>
-          <Input
-            id="subject"
-            value={stateEntity.subject}
-            onChange={handleChange}
-            className="form-control"
-            error={hasErrors("subject", errors)}
-          />
-        </div>
-        <div className="col-md-4">
-          <label> {T.translate("emails.max_retries")} *</label>
-          <Input
-            id="max_retries"
-            type="number"
-            value={stateEntity.max_retries}
-            onChange={handleChange}
-            className="form-control"
-            error={hasErrors("max_retries", errors)}
-          />
-        </div>
-      </div>
-      <div className="row form-group">
-        <div className="col-md-12">
-          <input
-            type="button"
-            onClick={handleJsonDataEdit}
-            className="btn btn-primary pull-right"
-            value={T.translate("emails.edit_json")}
-          />
-        </div>
-      </div>
-      <div className="row form-group">
-        <div className="col-md-12">
-          {templateLoaded ? (
-            <div className="email-template-container">
-              <div
-                className="email-template-buttons"
-                style={{ width: singleTab && mjmlEditor ? "" : "" }}
-              >
-                {!previewOnly && (
-                  <div>
-                    <div>
-                      {mjmlEditor ? (
-                        <>
-                          <label>
-                            {T.translate("emails.mjml_content")}
-                            {" using "}
-                            <a
-                              target="_blank"
-                              href="https://documentation.mjml.io/"
-                              rel="noreferrer"
-                            >
-                              MJML format
-                            </a>
-                          </label>
-                          <br />
-                          <input
-                            type="button"
-                            onClick={() => {
-                              setMjmlEditor(false);
-                            }}
-                            className="btn btn-primary"
-                            value={T.translate("emails.display_html")}
-                          />
-                        </>
-                      ) : (
-                        <>
-                          <label>
-                            {T.translate("emails.html_content")}
-                            {" in "}
-                            <a
-                              target="_blank"
-                              href="https://opensource.com/sites/default/files/gated-content/osdc_cheatsheet-jinja2.pdf"
-                              rel="noreferrer"
-                            >
-                              jinja format
-                            </a>
-                            {" *"}
-                          </label>
-                          <br />
-                          <input
-                            type="button"
-                            onClick={() => {
-                              setMjmlEditor(true);
-                            }}
-                            className="btn btn-primary"
-                            value={T.translate("emails.display_mjml")}
-                          />
-                        </>
-                      )}
-                    </div>
-                    <div className="col-md-8">
-                      <div className="row">
-                        {entity.id > 0 && stateEntity.versions.length > 0 && (
-                          <div className="col-md-11">
-                            <label>
-                              {T.translate("emails.previous_template")}
-                            </label>
-                            <br />
-                            <Dropdown
-                              id="history_version"
-                              value={historyVersion}
-                              isClearable
-                              placeholder={T.translate(
-                                "emails.placeholders.select_version"
-                              )}
-                              options={versions_ddl}
-                              styles={{
-                                menu: (baseStyles, state) => ({
-                                  ...baseStyles,
-                                  color: state.isSelected ? "white" : "inherit"
-                                })
-                              }}
-                              className="email-history-ddl"
-                              onChange={handleVersionChange}
-                            />
-                          </div>
-                        )}
-                        {currentVersionExternalLink && (
-                          <div className="col-md-1">
-                            <a
-                              href={currentVersionExternalLink}
-                              title={T.translate(
-                                "emails.placeholders.see_version"
-                              )}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              <i className="fa fa-github fa-lg" />
-                            </a>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {!codeOnly && (
-                  <div>
-                    <label>{T.translate("emails.preview_title")}</label>
-                    <br />
-                    <input
-                      type="button"
-                      onClick={() => setMobileView(!mobileView)}
-                      className="btn btn-primary"
-                      value={
-                        mobileView
-                          ? T.translate("emails.display_desktop")
-                          : T.translate("emails.display_mobile")
-                      }
-                    />
-                  </div>
+    <FormikProvider value={formik}>
+      <Box
+        component="form"
+        className="email-template-form"
+        onSubmit={formik.handleSubmit}
+        noValidate
+        autoComplete="off"
+      >
+        <input type="hidden" name="id" value={values.id} />
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          {textField("identifier", "emails.name")}
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="allowed_clients">
+              {`${T.translate("emails.client")} *`}
+            </InputLabel>
+            <MuiDropdown
+              id="allowed_clients"
+              size="small"
+              multiple
+              value={values.allowed_clients}
+              placeholder={T.translate("emails.placeholders.select_client")}
+              options={email_clients_ddl}
+              onChange={(ev) =>
+                setFieldValue("allowed_clients", ev.target.value)
+              }
+            />
+          </Grid2>
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="parent">
+              {`${T.translate("emails.parent")} *`}
+            </InputLabel>
+            <EmailTemplateInput
+              id="parent"
+              value={values.parent}
+              ownerId={values.id}
+              placeholder={T.translate("emails.placeholders.select_parent")}
+              onChange={(ev) => setFieldValue("parent", ev.target.value)}
+            />
+          </Grid2>
+        </Grid2>
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          {textField("from_email", "emails.from_email")}
+          {textField("subject", "emails.subject")}
+          <Grid2 size={{ xs: 12, md: 4 }}>
+            <InputLabel htmlFor="max_retries">
+              {`${T.translate("emails.max_retries")} *`}
+            </InputLabel>
+            <MuiFormikTextField
+              id="max_retries"
+              name="max_retries"
+              type="number"
+              size="small"
+              margin="none"
+              fullWidth
+              onChange={handleFieldChange}
+            />
+          </Grid2>
+        </Grid2>
+        <Grid2 container spacing={2} sx={{ mb: 2 }}>
+          <Grid2 size={12} sx={{ display: "flex", justifyContent: "flex-end" }}>
+            <Button variant="contained" onClick={handleJsonDataEdit}>
+              {T.translate("emails.edit_json")}
+            </Button>
+          </Grid2>
+        </Grid2>
+        <Box sx={{ height: "960px", mb: "50px" }}>
+          <Box sx={toolbarSx}>
+            {showCodeEditor && (
+              <div style={{ width: codeWidth }}>
+                <div>
+                  <TemplateModeToggle
+                    mjmlEditor={mjmlEditor}
+                    onDisplayMjml={handleDisplayMjml}
+                    onDisplayHtml={() => setMjmlEditor(false)}
+                  />
+                </div>
+                {entity.id > 0 && values.versions.length > 0 && (
+                  <VersionHistoryPicker
+                    historyVersion={historyVersion}
+                    versionsDdl={versions_ddl}
+                    currentVersionExternalLink={currentVersionExternalLink}
+                    onChange={handleVersionChange}
+                  />
                 )}
               </div>
-              <br />
-              <div className="email-template-content">
-                {!previewOnly && (
-                  <div className="email-template-code">
-                    {mjmlEditor ? (
-                      <CodeMirror
-                        id="mjml_content"
-                        value={stateEntity.mjml_content}
-                        onChange={(value, viewUpdate) =>
-                          handleCodeMirrorMJMLChange(value, viewUpdate)
-                        }
-                        height="960px"
-                        theme={sublimeInit({
-                          settings: {
-                            caret: "#c6c6c6",
-                            fontFamily: "monospace"
-                          }
-                        })}
-                        extensions={[
-                          html({
-                            autoCloseTags: true,
-                            matchClosingTags: true,
-                            selfClosingTags: true
-                          })
-                        ]}
-                      />
-                    ) : (
-                      <CodeMirror
-                        id="html_content"
-                        value={stateEntity.html_content}
-                        onChange={(value, viewUpdate) =>
-                          handleCodeMirrorHTMLChange(value, viewUpdate)
-                        }
-                        height="960px"
-                        theme={sublimeInit({
-                          settings: {
-                            caret: "#c6c6c6",
-                            fontFamily: "monospace"
-                          }
-                        })}
-                        extensions={[
-                          html({
-                            autoCloseTags: true,
-                            matchClosingTags: true,
-                            selfClosingTags: true
-                          })
-                        ]}
-                      />
-                    )}
-                  </div>
-                )}
-                <div
-                  className={`email-template-content-buttons ${
-                    previewOnly || codeOnly ? "single-button" : ""
-                  }`}
+            )}
+            {showPreview && (
+              <div style={{ width: previewWidth }}>
+                <InputLabel>{T.translate("emails.preview_title")}</InputLabel>
+                <Button
+                  variant="contained"
+                  onClick={() => setMobileView(!mobileView)}
                 >
-                  {!codeOnly && (
-                    <button
-                      type="button"
-                      id="code"
-                      onClick={(ev) => handleTabChange(ev)}
-                    >
-                      <i className="fa fa-chevron-right" />
-                    </button>
-                  )}
-                  {!previewOnly && (
-                    <button
-                      type="button"
-                      id="preview"
-                      onClick={(ev) => handleTabChange(ev)}
-                    >
-                      <i className="fa fa-chevron-left" />
-                    </button>
-                  )}
-                </div>
-                {!codeOnly && (
-                  <div className="email-template-preview" ref={previewRef}>
-                    <AjaxLoader show={templateLoading} size={120} relative />
-                    {renderErrors.length > 0 ? (
-                      <div className="container">
-                        There is an error trying to render the email template:
-                        <ul>
-                          {renderErrors.map((err) => (
-                            <li>{err}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    ) : mjmlRenderError?.message ? (
-                      <div className="container">
-                        There is an error trying to render the email template:
-                        <ul>{mjmlRenderError.message}</ul>
-                      </div>
-                    ) : (
-                      previewLoaded && (
-                        <iframe
-                          style={{ ...style }}
-                          id="preview"
-                          name="preview"
-                          title="Email template preview"
-                          sandbox="allow-same-origin"
-                          srcDoc={preview}
-                        />
-                      )
-                    )}
-                  </div>
-                )}
+                  {mobileView
+                    ? T.translate("emails.display_desktop")
+                    : T.translate("emails.display_mobile")}
+                </Button>
               </div>
-            </div>
-          ) : (
-            <div>Loading template...</div>
-          )}
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-md-12 submit-buttons">
-          <input
-            type="button"
-            onClick={handleSubmit}
-            disabled={isTemplateInvalid()}
-            className="btn btn-primary pull-right"
-            value={T.translate("general.save")}
-          />
-          {/* <input type="button" onClick={this.handleSendTest}
-                            className="btn btn-primary pull-right" value={T.translate("emails.send_test")}/> */}
-        </div>
-      </div>
-    </form>
+            )}
+          </Box>
+          <br />
+          <Box sx={{ display: "flex", flexDirection: "row", height: "100%" }}>
+            {showCodeEditor && (
+              <CodeEditorPane
+                width={codeWidth}
+                id={mjmlEditor ? "mjml_content" : "html_content"}
+                value={editorContent}
+                onChange={handleCodeMirrorChange}
+              />
+            )}
+            <Box
+              sx={{
+                width: codeOnly || previewOnly ? "20px" : "30px",
+                display: "flex",
+                "& > button": paneToggleButtonSx
+              }}
+            >
+              {showPreview && (
+                <button
+                  type="button"
+                  id="code"
+                  onClick={(ev) => handleTabChange(ev)}
+                >
+                  <i className="fa fa-chevron-right" />
+                </button>
+              )}
+              {showCodeEditor && (
+                <button
+                  type="button"
+                  id="preview"
+                  onClick={(ev) => handleTabChange(ev)}
+                >
+                  <i className="fa fa-chevron-left" />
+                </button>
+              )}
+            </Box>
+            {showPreview && (
+              <Box
+                ref={previewRef}
+                sx={{
+                  width: previewWidth,
+                  minWidth: "50%",
+                  position: "relative",
+                  "& > iframe": {
+                    border: "none",
+                    display: "block",
+                    margin: "0 auto",
+                    transformOrigin: "top left"
+                  }
+                }}
+              >
+                {templateLoading && (
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      zIndex: 1
+                    }}
+                  >
+                    <CircularProgress size={120} />
+                  </Box>
+                )}
+                {renderPreviewBody()}
+              </Box>
+            )}
+          </Box>
+        </Box>
+        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 2 }}>
+          <Button
+            type="submit"
+            variant="contained"
+            disabled={formik.isSubmitting || isTemplateInvalid}
+          >
+            {T.translate("general.save")}
+          </Button>
+        </Box>
+      </Box>
+    </FormikProvider>
   );
 };
 
diff --git a/src/components/forms/email-template.less b/src/components/forms/email-template.less
deleted file mode 100644
index cd0c924f3..000000000
--- a/src/components/forms/email-template.less
+++ /dev/null
@@ -1,105 +0,0 @@
-.email-template-container {
-  height: 960px;
-  margin-bottom: 50px;
-  .email-template-buttons {
-    display: flex;
-    flex-direction: row;
-
-    > div {
-      width: 50%;
-      &:first-of-type {
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        margin-right: 30px;
-      }
-      &:last-of-type {
-        margin-left: 30px;
-      }
-    }
-  }
-
-  .email-template-content {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-
-    .email-template-code {
-      min-width: 50%;
-    }
-
-    .email-template-content-buttons {
-      width: 30px;
-      display: flex;
-      &.single-button {
-        width: 20px;
-      }
-
-      button {
-        width: 100%;
-        padding: 0;
-        background-color: #42474e;
-        border-right: 1px solid #343436;
-        color: #fff;
-        cursor: pointer;
-        flex: 1;
-        font-size: 12px;
-        justify-content: center;
-        transition: background-color 0.3s ease-in-out;
-        &:hover {
-          background-color: #535a63;
-        }
-      }
-    }
-
-    .email-template-preview {
-      min-width: 50%;
-      position: relative;
-      > iframe {
-        border: none;
-        display: block;
-        margin: 0 auto;
-        transform-origin: top left;
-      }
-    }
-  }
-}
-
-.email-history-ddl {
-  a {
-    color: inherit;
-  }
-}
-
-@media only screen and (max-width: 992px) {
-  .email-template-container {
-    .email-template-buttons {
-      > div {
-        width: 100%;
-        &:first-of-type {
-          margin-left: 0;
-          > div:last-of-type {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .email-template-container {
-    .email-template-buttons {
-      > div {
-        &:first-of-type {
-          margin-left: 0;
-          flex-direction: column;
-          align-items: start;
-          > div:last-of-type {
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/inputs/__tests__/email-template-input.test.js b/src/components/inputs/__tests__/email-template-input.test.js
new file mode 100644
index 000000000..167a1cbbf
--- /dev/null
+++ b/src/components/inputs/__tests__/email-template-input.test.js
@@ -0,0 +1,208 @@
+import React from "react";
+import { render, screen, within, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import EmailTemplateInput from "../email-template-input";
+import { queryTemplates } from "../../../actions/email-actions";
+
+jest.mock("../../../actions/email-actions", () => ({
+  queryTemplates: jest.fn()
+}));
+
+const mockTemplates = (templates) =>
+  queryTemplates.mockImplementation((input, callback) => callback(templates));
+
+describe("EmailTemplateInput", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    {
+      mode: "object",
+      plainValue: false,
+      selected: { id: "42", identifier: "welcome_email" },
+      cleared: { id: "", identifier: "" }
+    },
+    {
+      mode: "plainValue",
+      plainValue: true,
+      selected: "welcome_email",
+      cleared: ""
+    }
+  ])(
+    "emits the $mode shape on select and clear",
+    async ({ plainValue, selected, cleared }) => {
+      mockTemplates([{ id: 42, identifier: "welcome_email" }]);
+      const onChange = jest.fn();
+
+      const { rerender } = render(
+        <EmailTemplateInput
+          id="tpl"
+          value={null}
+          onChange={onChange}
+          plainValue={plainValue}
+          isClearable
+        />
+      );
+
+      await userEvent.type(screen.getByRole("combobox"), "welcome");
+      expect(queryTemplates).toHaveBeenLastCalledWith(
+        "welcome",
+        expect.any(Function)
+      );
+
+      const callsBeforeSelect = queryTemplates.mock.calls.length;
+      await userEvent.click(await screen.findByText("welcome_email"));
+
+      expect(onChange).toHaveBeenLastCalledWith({
+        target: { id: "tpl", value: selected, type: "emailtemplateinput" }
+      });
+      // selecting fills the input with the label, which must not re-search
+      expect(queryTemplates).toHaveBeenCalledTimes(callsBeforeSelect);
+
+      rerender(
+        <EmailTemplateInput
+          id="tpl"
+          value={
+            plainValue ? selected : { id: 42, identifier: "welcome_email" }
+          }
+          onChange={onChange}
+          plainValue={plainValue}
+          isClearable
+        />
+      );
+      await userEvent.click(screen.getByLabelText(/clear/i));
+
+      expect(onChange).toHaveBeenLastCalledWith({
+        target: { id: "tpl", value: cleared, type: "emailtemplateinput" }
+      });
+    }
+  );
+
+  it("excludes the owner template from the options", async () => {
+    mockTemplates([
+      { id: 1, identifier: "self" },
+      { id: 2, identifier: "other" }
+    ]);
+
+    render(
+      <EmailTemplateInput
+        id="tpl"
+        value={null}
+        onChange={jest.fn()}
+        ownerId={1}
+      />
+    );
+
+    await userEvent.type(screen.getByRole("combobox"), "e");
+
+    const listbox = await screen.findByRole("listbox");
+    expect(within(listbox).queryByText("self")).not.toBeInTheDocument();
+    expect(within(listbox).getByText("other")).toBeInTheDocument();
+  });
+
+  it("does not duplicate the selected template in the options", async () => {
+    mockTemplates([
+      { id: 42, identifier: "welcome_email" },
+      { id: 43, identifier: "welcome_email_2" }
+    ]);
+
+    const Harness = () => {
+      const [value, setValue] = React.useState("");
+      return (
+        <EmailTemplateInput
+          id="tpl"
+          value={value}
+          onChange={(ev) => setValue(ev.target.value)}
+          plainValue
+        />
+      );
+    };
+    render(<Harness />);
+
+    const input = screen.getByRole("combobox");
+    await userEvent.type(input, "welcome");
+    await userEvent.click(
+      await screen.findByRole("option", { name: "welcome_email" })
+    );
+
+    // reopen the listbox with the value selected
+    await userEvent.click(input);
+    await userEvent.keyboard("{ArrowDown}");
+
+    const labels = (await screen.findAllByRole("option")).map(
+      (option) => option.textContent
+    );
+    expect(labels).toEqual(["welcome_email", "welcome_email_2"]);
+  });
+
+  it("clears the loading state when the search input is emptied", async () => {
+    queryTemplates.mockImplementation(() => {});
+    render(<EmailTemplateInput id="parent" value={null} onChange={() => {}} />);
+
+    const input = screen.getByRole("combobox");
+    await userEvent.type(input, "w");
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+
+    await userEvent.clear(input);
+    await waitFor(() =>
+      expect(screen.queryByRole("progressbar")).not.toBeInTheDocument()
+    );
+  });
+
+  it("ignores an older search response that lands after a newer one", async () => {
+    const callbacks = {};
+    queryTemplates.mockImplementation((input, callback) => {
+      callbacks[input] = callback;
+    });
+    render(<EmailTemplateInput id="parent" value={null} onChange={() => {}} />);
+
+    const input = screen.getByRole("combobox");
+    await userEvent.type(input, "ab");
+
+    act(() => callbacks.ab([{ id: 2, identifier: "abc_newer" }]));
+    act(() => callbacks.a([{ id: 1, identifier: "a_older" }]));
+
+    expect(
+      await screen.findByRole("option", { name: "abc_newer" })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: "a_older" })
+    ).not.toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      mode: "object",
+      plainValue: false,
+      value: { id: 42, identifier: "welcome_email" }
+    },
+    { mode: "plainValue", plainValue: true, value: "welcome_email" }
+  ])(
+    "keeps the typed search when a template is already selected ($mode)",
+    async ({ plainValue, value }) => {
+      queryTemplates.mockImplementation((input, callback) => {
+        setTimeout(() => callback([{ id: 7, identifier: "newsletter" }]), 10);
+      });
+      render(
+        <EmailTemplateInput
+          id="parent"
+          value={value}
+          onChange={() => {}}
+          plainValue={plainValue}
+        />
+      );
+
+      const input = screen.getByRole("combobox");
+      await userEvent.click(input);
+      await userEvent.clear(input);
+      await userEvent.type(input, "news");
+
+      expect(
+        await screen.findByRole("option", { name: "newsletter" })
+      ).toBeInTheDocument();
+      expect(input).toHaveValue("news");
+    }
+  );
+});
diff --git a/src/components/inputs/email-template-input.js b/src/components/inputs/email-template-input.js
index d0be2e9eb..31eb7ddc2 100644
--- a/src/components/inputs/email-template-input.js
+++ b/src/components/inputs/email-template-input.js
@@ -11,87 +11,150 @@
  * limitations under the License.
  * */
 
-import React from "react";
-import AsyncSelect from "react-select/lib/Async";
+import React, { useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import CircularProgress from "@mui/material/CircularProgress";
 import { queryTemplates } from "../../actions/email-actions";
 
-export default class EmailTemplateInput extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleChange = this.handleChange.bind(this);
-    this.getTemplates = this.getTemplates.bind(this);
-  }
+const EmailTemplateInput = ({
+  id,
+  name,
+  value,
+  onChange,
+  ownerId,
+  placeholder,
+  error,
+  plainValue,
+  isClearable
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const requestSeq = useRef(0);
+
+  const fetchOptions = (input) => {
+    requestSeq.current += 1;
+    const mySeq = requestSeq.current;
+    setLoading(true);
+    queryTemplates(input, (templates) => {
+      // a newer search (or a clear) superseded this one
+      if (mySeq !== requestSeq.current) return;
+      const filtered = ownerId
+        ? templates.filter((t) => t.id !== ownerId)
+        : templates;
+      const mappedOptions = filtered.map((t) => ({
+        value: plainValue ? t.identifier : t.id.toString(),
+        label: t.identifier
+      }));
+      setOptions(mappedOptions);
+      setLoading(false);
+    });
+  };
+
+  const handleInputChange = (ev, input, reason) => {
+    // Autocomplete also fires this for "selectOption"/"reset" (the input text
+    // set programmatically) -- only a real keystroke or a clear should re-search.
+    if (reason !== "input" && reason !== "clear") return;
+
+    if (!input) {
+      requestSeq.current += 1;
+      setOptions([]);
+      setLoading(false);
+      return;
+    }
+    fetchOptions(input);
+  };
 
-  handleChange(value, { action }) {
-    const { plainValue } = this.props;
-    let theValue = null;
+  const handleChange = (ev, newValue) => {
+    let theValue;
 
-    if (action === "clear") {
+    if (!newValue) {
       theValue = plainValue ? "" : { id: "", identifier: "" };
     } else {
       theValue = plainValue
-        ? value.label
-        : { id: value.value, identifier: value.label };
+        ? newValue.label
+        : { id: newValue.value, identifier: newValue.label };
     }
 
-    const ev = {
-      target: {
-        id: this.props.id,
-        value: theValue,
-        type: "emailtemplateinput"
+    onChange({ target: { id, value: theValue, type: "emailtemplateinput" } });
+  };
+
+  // keep the reference stable between renders: MUI Autocomplete resets the
+  // typed text whenever the value reference changes
+  const selectedOption = useMemo(() => {
+    if (!value) return null;
+    return plainValue
+      ? { value, label: value }
+      : { value: String(value.id ?? ""), label: value.identifier ?? "" };
+  }, [value, plainValue]);
+
+  // the selected value may not be in the freshly-fetched options list --
+  // pin it in so Autocomplete doesn't warn about an "invalid" controlled value
+  const displayOptions =
+    selectedOption && !options.some((o) => o.value === selectedOption.value)
+      ? [selectedOption, ...options]
+      : options;
+
+  return (
+    <Autocomplete
+      id={id}
+      fullWidth
+      size="small"
+      disableClearable={!isClearable}
+      options={displayOptions}
+      loading={loading}
+      value={selectedOption}
+      isOptionEqualToValue={(option, selected) =>
+        option.value === selected.value
       }
-    };
-
-    this.props.onChange(ev);
-  }
-
-  getTemplates(input, callback) {
-    const { ownerId, defaultOptions } = this.props;
-
-    if (!input && !defaultOptions) {
-      return Promise.resolve({ options: [] });
-    }
-
-    // we need to map into value/label because of a bug in react-select 2
-    // https://github.com/JedWatson/react-select/issues/2998
-
-    const translateOptions = (options) => {
-      const newOptions = (
-        ownerId ? options.filter((t) => t.id !== ownerId) : options
-      ).map((c) => ({ value: c.id.toString(), label: c.identifier }));
-      callback(newOptions);
-    };
-
-    queryTemplates(input, translateOptions);
-  }
-
-  render() {
-    const { error, value, onChange, id, name, multi, plainValue, ...rest } =
-      this.props;
-    const has_error = this.props.hasOwnProperty("error") && error !== "";
-
-    // we need to map into value/label because of a bug in react-select 2
-    // https://github.com/JedWatson/react-select/issues/2998
-    let theValue = null;
-
-    if (value) {
-      theValue = plainValue
-        ? { value, label: value }
-        : { value: value.id.toString(), label: value.identifier };
-    }
-
-    return (
-      <div name={name}>
-        <AsyncSelect
-          value={theValue}
-          onChange={this.handleChange}
-          loadOptions={this.getTemplates}
-          isMulti={false}
-          {...rest}
+      getOptionLabel={(option) => option.label || ""}
+      onChange={handleChange}
+      onInputChange={handleInputChange}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          name={name}
+          placeholder={placeholder}
+          error={!!error}
+          helperText={error || undefined}
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={20} />}
+                  {params.InputProps.endAdornment}
+                </>
+              )
+            }
+          }}
         />
-        {has_error && <p className="error-label">{error}</p>}
-      </div>
-    );
-  }
-}
+      )}
+    />
+  );
+};
+
+EmailTemplateInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onChange: PropTypes.func.isRequired,
+  ownerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  plainValue: PropTypes.bool,
+  isClearable: PropTypes.bool
+};
+
+EmailTemplateInput.defaultProps = {
+  name: undefined,
+  value: null,
+  ownerId: null,
+  placeholder: "",
+  error: "",
+  plainValue: false,
+  isClearable: false
+};
+
+export default EmailTemplateInput;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ea9c9f400..171a5e778 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -3354,6 +3354,7 @@
     "no_templates": "No templates found for this search criteria.",
     "no_emails": "No emails found for this search criteria.",
     "previous_template": "Previous Template version",
+    "current_version": "Current version",
     "id": "Id",
     "name": "Name (alphanumeric)",
     "parent": "Parent",
@@ -3368,6 +3369,12 @@
     "display_preview": "Show Template Preview",
     "html_content": "Html Content",
     "mjml_content": "MJML Template",
+    "mjml_format": "MJML format",
+    "jinja_format": "jinja format",
+    "using": "using",
+    "in": "in",
+    "json": "JSON",
+    "format": "format",
     "plain_content": "Plain Content",
     "display_mobile": "View Mobile",
     "display_desktop": "View Desktop",
@@ -3376,6 +3383,8 @@
     "preview": "Preview",
     "sample_data": "Sample Data",
     "sample_data_legend": "* You could use this data as it is or your could edit it",
+    "invalid_json": "Invalid JSON, please fix it before updating.",
+    "loading_template": "Loading template...",
     "mjml_warning": "Editing an MJML template will overwrite the content from the current HTML content",
     "understand": "I understand",
     "render": "Render",
@@ -3384,6 +3393,7 @@
     "delete_template_warning": "Are you sure you want to delete template ",
     "template_saved": "Template saved successfully.",
     "template_created": "Template created successfully.",
+    "error_render_template": "There is an error trying to render the email template:",
     "placeholders": {
       "search_emails": "Search emails",
       "search_templates": "Search templates by name",
diff --git a/src/layouts/email-layout.js b/src/layouts/email-layout.js
index 28f048617..4b1e131b4 100644
--- a/src/layouts/email-layout.js
+++ b/src/layouts/email-layout.js
@@ -9,7 +9,7 @@
  * 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, Redirect } from "react-router-dom";
@@ -21,48 +21,42 @@ import EmailTemplateListPage from "../pages/emails/email-template-list-page";
 import EditEmailTemplatePage from "../pages/emails/edit-email-template-page";
 import EmailLogListPage from "../pages/emails/email-log-list-page";
 
-class EmailLayout extends React.Component {
-  render() {
-    const { match, currentSummit } = this.props;
+const EmailLayout = ({ match }) => (
+  <div>
+    <Breadcrumb
+      data={{
+        title: T.translate("emails.email_templates"),
+        pathname: match.url
+      }}
+    />
 
-    return (
-      <div>
-        <Breadcrumb
-          data={{
-            title: T.translate("emails.email_templates"),
-            pathname: match.url
-          }}
-        />
-
-        <Switch>
-          <Route
-            exact
-            strict
-            path={`${match.url}/templates`}
-            component={EmailTemplateListPage}
-          />
-          <Route
-            strict
-            exact
-            path={`${match.url}/templates/new`}
-            component={EditEmailTemplatePage}
-          />
-          <Route
-            path={`${match.url}/templates/:template_id`}
-            component={EditEmailTemplatePage}
-          />
-          <Route
-            exact
-            strict
-            path={`${match.url}/log`}
-            component={EmailLogListPage}
-          />
-          <Redirect to={`/app/emails/templates`} />
-        </Switch>
-      </div>
-    );
-  }
-}
+    <Switch>
+      <Route
+        exact
+        strict
+        path={`${match.url}/templates`}
+        component={EmailTemplateListPage}
+      />
+      <Route
+        exact
+        path={`${match.url}/templates/new`}
+        component={EditEmailTemplatePage}
+      />
+      <Route
+        exact
+        path={`${match.url}/templates/:template_id`}
+        component={EditEmailTemplatePage}
+      />
+      <Route
+        exact
+        strict
+        path={`${match.url}/log`}
+        component={EmailLogListPage}
+      />
+      <Redirect to="/app/emails/templates" />
+    </Switch>
+  </div>
+);
 
 const mapStateToProps = ({ currentSummitState }) => ({
   ...currentSummitState
diff --git a/src/pages/emails/__tests__/edit-email-template-page.test.js b/src/pages/emails/__tests__/edit-email-template-page.test.js
new file mode 100644
index 000000000..91075f3fb
--- /dev/null
+++ b/src/pages/emails/__tests__/edit-email-template-page.test.js
@@ -0,0 +1,228 @@
+import React from "react";
+import { act, fireEvent, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router-dom";
+import flushPromises from "flush-promises";
+import { renderWithRedux } from "../../../utils/test-utils";
+import EditEmailTemplatePage from "../edit-email-template-page";
+import {
+  getEmailTemplate,
+  resetTemplateForm,
+  saveEmailTemplate,
+  getAllClients
+} from "../../../actions/email-actions";
+
+jest.mock("../../../actions/email-actions", () => ({
+  getEmailTemplate: jest.fn(),
+  resetTemplateForm: jest.fn(),
+  saveEmailTemplate: jest.fn(),
+  getAllClients: jest.fn(),
+  renderEmailTemplate: jest.fn(),
+  updateTemplateJsonData: jest.fn()
+}));
+
+jest.mock("../../../components/forms/email-template-form", () => ({
+  __esModule: true,
+  default: ({ onSubmit }) => (
+    <button
+      type="button"
+      data-testid="email-template-form"
+      onClick={() => onSubmit({ id: 42 }).catch(() => {})}
+    />
+  )
+}));
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+const initialState = {
+  emailTemplateState: {
+    entity: { id: 0, identifier: "" },
+    templateLoading: false,
+    clients: null,
+    preview: null,
+    json_data: {},
+    errors: {},
+    render_errors: []
+  }
+};
+
+describe("EditEmailTemplatePage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getEmailTemplate.mockReturnValue(() => Promise.resolve());
+    resetTemplateForm.mockReturnValue({ type: "RESET_TEMPLATE_FORM" });
+    getAllClients.mockReturnValue(() => Promise.resolve());
+  });
+
+  it("fetches the template and defers mounting the form until the fetch resolves", async () => {
+    let resolveFetch;
+    getEmailTemplate.mockReturnValue(
+      () =>
+        new Promise((resolve) => {
+          resolveFetch = resolve;
+        })
+    );
+
+    renderWithRedux(
+      <EditEmailTemplatePage
+        match={{
+          url: "/app/emails/templates/42",
+          params: { template_id: "42" }
+        }}
+      />,
+      { initialState }
+    );
+
+    expect(getEmailTemplate).toHaveBeenCalledWith("42");
+    expect(resetTemplateForm).not.toHaveBeenCalled();
+    expect(screen.getByText("emails.loading_template")).toBeInTheDocument();
+    expect(screen.queryByTestId("email-template-form")).not.toBeInTheDocument();
+
+    await act(async () => {
+      resolveFetch();
+      await flushPromises();
+    });
+
+    expect(
+      screen.queryByText("emails.loading_template")
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("email-template-form")).toBeInTheDocument();
+  });
+
+  it("ignores a stale fetch when template_id changes before it resolves", async () => {
+    let resolveFirst;
+    let resolveSecond;
+    getEmailTemplate.mockImplementation((templateId) => () => {
+      if (templateId === "1") {
+        return new Promise((resolve) => {
+          resolveFirst = resolve;
+        });
+      }
+      return new Promise((resolve) => {
+        resolveSecond = resolve;
+      });
+    });
+
+    const { rerender } = renderWithRedux(
+      <EditEmailTemplatePage
+        match={{ url: "/app/emails/templates/1", params: { template_id: "1" } }}
+      />,
+      { initialState }
+    );
+
+    rerender(
+      <EditEmailTemplatePage
+        match={{ url: "/app/emails/templates/2", params: { template_id: "2" } }}
+      />
+    );
+
+    await act(async () => {
+      resolveFirst();
+      await flushPromises();
+    });
+
+    // must stay in the loading state -- the stale response must not flip entityReady
+    expect(screen.getByText("emails.loading_template")).toBeInTheDocument();
+    expect(screen.queryByTestId("email-template-form")).not.toBeInTheDocument();
+
+    await act(async () => {
+      resolveSecond();
+      await flushPromises();
+    });
+
+    expect(
+      screen.queryByText("emails.loading_template")
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("email-template-form")).toBeInTheDocument();
+  });
+
+  it("resets the form instead of fetching on the new-template route", () => {
+    renderWithRedux(
+      <EditEmailTemplatePage
+        match={{ url: "/app/emails/templates/new", params: {} }}
+      />,
+      { initialState }
+    );
+
+    expect(resetTemplateForm).toHaveBeenCalled();
+    expect(getEmailTemplate).not.toHaveBeenCalled();
+  });
+
+  it("does not mount the form with a stale entity when the template fetch fails", async () => {
+    getEmailTemplate.mockReturnValue(() =>
+      Promise.reject(Object.assign(new Error("Not Found"), { status: 404 }))
+    );
+
+    renderWithRedux(
+      <MemoryRouter>
+        <EditEmailTemplatePage
+          match={{
+            url: "/app/emails/templates/5",
+            params: { template_id: "5" }
+          }}
+        />
+      </MemoryRouter>,
+      {
+        initialState: {
+          emailTemplateState: {
+            ...initialState.emailTemplateState,
+            // persisted from a previously viewed template
+            entity: { id: 7, identifier: "other-template" }
+          }
+        }
+      }
+    );
+
+    await act(async () => {
+      await flushPromises();
+    });
+
+    expect(getEmailTemplate).toHaveBeenCalledWith("5");
+    expect(screen.queryByTestId("email-template-form")).not.toBeInTheDocument();
+  });
+
+  it.each([
+    { outcome: "succeeds", result: () => Promise.resolve(), redirects: true },
+    {
+      outcome: "fails",
+      result: () => Promise.reject(new Error("412")),
+      redirects: false
+    }
+  ])(
+    "redirects to the list only when the save $outcome",
+    async ({ result, redirects }) => {
+      saveEmailTemplate.mockReturnValue(result);
+      const history = { push: jest.fn() };
+
+      renderWithRedux(
+        <EditEmailTemplatePage
+          match={{
+            url: "/app/emails/templates/42",
+            params: { template_id: "42" }
+          }}
+          history={history}
+        />,
+        { initialState }
+      );
+
+      await act(async () => {
+        await flushPromises();
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("email-template-form"));
+        await flushPromises();
+      });
+
+      expect(saveEmailTemplate).toHaveBeenCalledWith({ id: 42 });
+      if (redirects) {
+        expect(history.push).toHaveBeenCalledWith("/app/emails/templates");
+      } else {
+        expect(history.push).not.toHaveBeenCalled();
+      }
+    }
+  );
+});
diff --git a/src/pages/emails/__tests__/email-template-json-dialog.test.js b/src/pages/emails/__tests__/email-template-json-dialog.test.js
new file mode 100644
index 000000000..673016f84
--- /dev/null
+++ b/src/pages/emails/__tests__/email-template-json-dialog.test.js
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import EmailTemplateJsonDialog from "../email-template-json-dialog";
+
+jest.mock("@uiw/react-codemirror", () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <textarea
+      data-testid="json-editor"
+      value={value}
+      onChange={(ev) => onChange(ev.target.value)}
+    />
+  )
+}));
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+describe("EmailTemplateJsonDialog", () => {
+  it.each([
+    ["resolves", true],
+    ["rejects", false]
+  ])(
+    "seeds the formatted JSON, sends the parsed edit, and closes only when the update %s",
+    async (_outcome, closes) => {
+      const onUpdate = jest.fn(() =>
+        closes ? Promise.resolve() : Promise.reject(new Error("failed"))
+      );
+      const onClose = jest.fn();
+      render(
+        <EmailTemplateJsonDialog
+          jsonData={{ foo: "bar" }}
+          renderErrors={[]}
+          onUpdate={onUpdate}
+          onClose={onClose}
+        />
+      );
+
+      const editor = screen.getByTestId("json-editor");
+      expect(editor).toHaveValue(JSON.stringify({ foo: "bar" }, null, 2));
+      expect(
+        screen.getByRole("button", { name: "emails.close" })
+      ).toBeInTheDocument();
+
+      fireEvent.change(editor, {
+        target: { value: JSON.stringify({ baz: 1 }) }
+      });
+      await userEvent.click(
+        screen.getByRole("button", { name: "emails.update" })
+      );
+
+      await waitFor(() => expect(onUpdate).toHaveBeenCalledWith({ baz: 1 }));
+      if (closes) await waitFor(() => expect(onClose).toHaveBeenCalled());
+      else expect(onClose).not.toHaveBeenCalled();
+    }
+  );
+
+  it("shows an inline error and does not call onUpdate when the JSON is invalid", async () => {
+    const onUpdate = jest.fn();
+    render(
+      <EmailTemplateJsonDialog
+        jsonData={{ foo: "bar" }}
+        renderErrors={[]}
+        onUpdate={onUpdate}
+        onClose={jest.fn()}
+      />
+    );
+
+    fireEvent.change(screen.getByTestId("json-editor"), {
+      target: { value: "not-json" }
+    });
+    await userEvent.click(
+      screen.getByRole("button", { name: "emails.update" })
+    );
+
+    expect(await screen.findByText("emails.invalid_json")).toBeInTheDocument();
+    expect(onUpdate).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/pages/emails/__tests__/email-template-list-page.test.js b/src/pages/emails/__tests__/email-template-list-page.test.js
index 362c1c0ff..273d3603e 100644
--- a/src/pages/emails/__tests__/email-template-list-page.test.js
+++ b/src/pages/emails/__tests__/email-template-list-page.test.js
@@ -48,8 +48,6 @@ jest.mock("i18n-react/dist/i18n-react", () => ({
   default: { translate: (key) => key }
 }));
 
-const mockHistory = { push: jest.fn() };
-
 const initialState = {
   emailTemplateListState: {
     templates: [
@@ -70,14 +68,17 @@ const initialState = {
 };
 
 describe("EmailTemplateListPage", () => {
+  let history;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    history = { push: jest.fn() };
     getEmailTemplates.mockReturnValue(() => Promise.resolve());
     deleteEmailTemplate.mockReturnValue(() => Promise.resolve());
   });
 
   it("reloads the list after a successful delete", async () => {
-    renderWithRedux(<EmailTemplateListPage history={mockHistory} />, {
+    renderWithRedux(<EmailTemplateListPage history={history} />, {
       initialState
     });
 
@@ -95,7 +96,7 @@ describe("EmailTemplateListPage", () => {
       Promise.reject(new Error("delete failed"))
     );
 
-    renderWithRedux(<EmailTemplateListPage history={mockHistory} />, {
+    renderWithRedux(<EmailTemplateListPage history={history} />, {
       initialState
     });
 
diff --git a/src/pages/emails/edit-email-template-page.js b/src/pages/emails/edit-email-template-page.js
index ef2210226..30f851e87 100644
--- a/src/pages/emails/edit-email-template-page.js
+++ b/src/pages/emails/edit-email-template-page.js
@@ -11,18 +11,15 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import { Modal } from "react-bootstrap";
-import CodeMirror from "@uiw/react-codemirror";
-import { json } from "@codemirror/lang-json";
-import { sublimeInit } from "@uiw/codemirror-theme-sublime";
-import { getSummitById } from "../../actions/summit-actions";
+import Box from "@mui/material/Box";
 import EmailTemplateForm from "../../components/forms/email-template-form";
+import EmailTemplateJsonDialog from "./email-template-json-dialog";
 import AddNewButton from "../../components/buttons/add-new-button";
-import { DECIMAL_DIGITS } from "../../utils/constants";
 import {
   getEmailTemplate,
   resetTemplateForm,
@@ -32,187 +29,113 @@ import {
   updateTemplateJsonData
 } from "../../actions/email-actions";
 
-import "../../styles/edit-email-template-page.less";
-
-class EditEmailTemplatePage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { json_data } = props;
-
-    this.state = {
-      showModal: false,
-      json_data,
-      json_preview: json_data
-    };
-
-    this.handlePreview = this.handlePreview.bind(this);
-    this.handleJsonChange = this.handleJsonChange.bind(this);
-    this.handlePopupClose = this.handlePopupClose.bind(this);
-  }
-
-  componentDidMount() {
-    const { match } = this.props;
+const EditEmailTemplatePage = ({
+  match,
+  history,
+  entity,
+  templateLoading,
+  errors,
+  clients,
+  preview,
+  render_errors,
+  json_data,
+  getEmailTemplate,
+  resetTemplateForm,
+  saveEmailTemplate,
+  getAllClients,
+  renderEmailTemplate,
+  updateTemplateJsonData
+}) => {
+  const [showJsonDialog, setShowJsonDialog] = useState(false);
+  const [entityReady, setEntityReady] = useState(false);
+  const [loadFailed, setLoadFailed] = useState(false);
+
+  useEffect(() => {
+    getAllClients();
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    setEntityReady(false);
+    setLoadFailed(false);
     const templateId = match.params.template_id;
+    const loadEntity = templateId
+      ? getEmailTemplate(templateId)
+      : resetTemplateForm();
+
+    Promise.resolve(loadEntity)
+      .catch(() => {
+        if (active) setLoadFailed(true);
+      })
+      .finally(() => {
+        if (active) setEntityReady(true);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [match.params.template_id]);
 
-    if (!templateId) {
-      this.props.resetTemplateForm();
-    } else {
-      this.props.getEmailTemplate(templateId);
-    }
-
-    this.props.getAllClients();
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const oldId = prevProps.match.params.template_id;
-    const newId = this.props.match.params.template_id;
-
-    if (oldId !== newId) {
-      if (!newId) {
-        this.props.resetTemplateForm();
-      } else {
-        this.props.getEmailTemplate(newId);
-      }
-    }
-  }
-
-  handleJsonChange(value, changes) {
-    this.setState({ json_preview: value });
-  }
-
-  handlePopupClose() {
-    const { json_preview } = this.state;
-    const parsedJSON = JSON.parse(json_preview);
-    this.props
-      .updateTemplateJsonData(parsedJSON)
-      .then(() =>
-        this.setState({ showModal: false, json_data: parsedJSON, json_preview })
-      );
-  }
-
-  handlePreview() {
-    const { json_data } = this.state;
-    this.setState({
-      ...this.state,
-      showModal: true,
-      json_preview: JSON.stringify(json_data, null, DECIMAL_DIGITS)
-    });
-  }
-
-  render() {
-    const {
-      currentSummit,
-      entity,
-      templateLoading,
-      errors,
-      match,
-      clients,
-      preview,
-      render_errors
-    } = this.props;
-    const { showModal, json_preview, json_data } = this.state;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-    const breadcrumb = entity.id
-      ? entity.identifier
-      : T.translate("general.new");
+  const title = entity.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
+  const breadcrumb = entity.id ? entity.identifier : T.translate("general.new");
 
-    return (
-      <div
-        className="edit-template-page"
-        style={{
-          backgroundColor: "white",
-          padding: "2vh 2vw",
-          margin: "2vh 2vw"
-        }}
-      >
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <h3>
-          {title} {T.translate("emails.email_template")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        <EmailTemplateForm
-          match={match}
-          currentSummit={currentSummit}
-          entity={entity}
-          clients={clients}
-          errors={errors}
-          onSubmit={this.props.saveEmailTemplate}
-          onRender={this.handlePreview}
-          preview={preview}
-          renderErrors={render_errors}
-          templateLoading={templateLoading}
-          templateJsonData={json_data}
-          renderEmailTemplate={this.props.renderEmailTemplate}
-        />
-        <Modal
-          className="preview-email-template-modal"
-          show={showModal}
-          onHide={() => {
-            this.setState({ ...this.state, showModal: false });
-          }}
-        >
-          <Modal.Header closeButton>
-            <Modal.Title>{T.translate("emails.sample_data")}</Modal.Title>
-            <span>{T.translate("emails.sample_data_legend")}</span>
-          </Modal.Header>
-          <Modal.Body style={{ overflow: "auto", maxHeight: "75vh" }}>
-            {render_errors?.length > 0 && (
-              <div className="row">
-                <div className="col-md-12 error">{render_errors}</div>
-              </div>
-            )}
-            <div className="row">
-              <div className="col-md-12">
-                <label>
-                  {" "}
-                  JSON{" "}
-                  <a
-                    href="https://jsonformatter.curiousconcept.com/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    format
-                  </a>
-                </label>
-                <CodeMirror
-                  id="json_preview"
-                  value={json_preview}
-                  onChange={(value, viewUpdate) =>
-                    this.handleJsonChange(value, viewUpdate)
-                  }
-                  theme={sublimeInit({
-                    settings: {
-                      caret: "#c6c6c6",
-                      fontFamily: "monospace"
-                    }
-                  })}
-                  extensions={[json()]}
-                />
-              </div>
-            </div>
-          </Modal.Body>
-          <Modal.Footer>
-            <button className="btn btn-primary" onClick={this.handlePopupClose}>
-              {T.translate("emails.update")}
-            </button>
-          </Modal.Footer>
-        </Modal>
-      </div>
-    );
+  if (loadFailed) {
+    return <Redirect to="/app/emails/templates" />;
   }
-}
 
-const mapStateToProps = ({ currentSummitState, emailTemplateState }) => ({
-  currentSummit: currentSummitState.currentSummit,
+  return (
+    <Box
+      className="edit-template-page"
+      sx={{ backgroundColor: "white", padding: "2vh 2vw", margin: "2vh 2vw" }}
+    >
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <h3>
+        {title} {T.translate("emails.email_template")}
+        <AddNewButton entity={entity} />
+      </h3>
+      <hr />
+      {entityReady ? (
+        <>
+          <EmailTemplateForm
+            entity={entity}
+            clients={clients}
+            errors={errors}
+            onSubmit={(values) =>
+              saveEmailTemplate(values).then(() =>
+                history.push("/app/emails/templates")
+              )
+            }
+            onRender={() => setShowJsonDialog(true)}
+            preview={preview}
+            renderErrors={render_errors}
+            templateLoading={templateLoading}
+            templateJsonData={json_data}
+            renderEmailTemplate={renderEmailTemplate}
+          />
+
+          {showJsonDialog && (
+            <EmailTemplateJsonDialog
+              jsonData={json_data}
+              renderErrors={render_errors}
+              onUpdate={updateTemplateJsonData}
+              onClose={() => setShowJsonDialog(false)}
+            />
+          )}
+        </>
+      ) : (
+        <div>{T.translate("emails.loading_template")}</div>
+      )}
+    </Box>
+  );
+};
+
+const mapStateToProps = ({ emailTemplateState }) => ({
   ...emailTemplateState
 });
 
 export default connect(mapStateToProps, {
-  getSummitById,
   getEmailTemplate,
   resetTemplateForm,
   saveEmailTemplate,
diff --git a/src/pages/emails/email-template-json-dialog.js b/src/pages/emails/email-template-json-dialog.js
new file mode 100644
index 000000000..e4214ae40
--- /dev/null
+++ b/src/pages/emails/email-template-json-dialog.js
@@ -0,0 +1,136 @@
+/**
+ * Copyright 2020 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 PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import { useFormik } from "formik";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import InputLabel from "@mui/material/InputLabel";
+import CloseIcon from "@mui/icons-material/Close";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { sublimeInit } from "@uiw/codemirror-theme-sublime";
+import { DECIMAL_DIGITS } from "../../utils/constants";
+
+const EmailTemplateJsonDialog = ({
+  jsonData,
+  renderErrors,
+  onUpdate,
+  onClose
+}) => {
+  const formik = useFormik({
+    initialValues: { json: JSON.stringify(jsonData, null, DECIMAL_DIGITS) },
+    // validate on submit only, then live while the user fixes it
+    validateOnChange: false,
+    validateOnBlur: false,
+    validate: ({ json: value }) => {
+      try {
+        JSON.parse(value);
+        return {};
+      } catch {
+        return { json: T.translate("emails.invalid_json") };
+      }
+    },
+    onSubmit: ({ json: value }) =>
+      onUpdate(JSON.parse(value))
+        .then(() => onClose())
+        .catch(() => {})
+  });
+
+  const handleJsonChange = (value) => {
+    formik.setFieldValue("json", value, formik.submitCount > 0);
+  };
+
+  return (
+    <Dialog open onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <Box>
+          {T.translate("emails.sample_data")}
+          <br />
+          <Box component="span" sx={{ fontSize: "0.8rem", fontWeight: 400 }}>
+            {T.translate("emails.sample_data_legend")}
+          </Box>
+        </Box>
+        <IconButton aria-label={T.translate("emails.close")} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent dividers sx={{ maxHeight: "75vh" }}>
+        {renderErrors?.length > 0 && (
+          <Box sx={{ color: "error.main", mb: 2 }}>{renderErrors}</Box>
+        )}
+        {formik.errors.json && (
+          <Box sx={{ color: "error.main", mb: 2 }}>{formik.errors.json}</Box>
+        )}
+        <InputLabel htmlFor="json_preview">
+          {`${T.translate("emails.json")} `}
+          <a
+            href="https://jsonformatter.curiousconcept.com/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {T.translate("emails.format")}
+          </a>
+        </InputLabel>
+        <CodeMirror
+          id="json_preview"
+          value={formik.values.json}
+          onChange={(value) => handleJsonChange(value)}
+          theme={sublimeInit({
+            settings: {
+              caret: "#c6c6c6",
+              fontFamily: "monospace"
+            }
+          })}
+          extensions={[json()]}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          onClick={formik.handleSubmit}
+          disabled={formik.isSubmitting}
+        >
+          {T.translate("emails.update")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+EmailTemplateJsonDialog.propTypes = {
+  jsonData: PropTypes.object,
+  renderErrors: PropTypes.array,
+  onUpdate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+EmailTemplateJsonDialog.defaultProps = {
+  jsonData: {},
+  renderErrors: []
+};
+
+export default EmailTemplateJsonDialog;
diff --git a/src/reducers/emails/__tests__/email-template-reducer.test.js b/src/reducers/emails/__tests__/email-template-reducer.test.js
index 717a664f8..a132066e5 100644
--- a/src/reducers/emails/__tests__/email-template-reducer.test.js
+++ b/src/reducers/emails/__tests__/email-template-reducer.test.js
@@ -1,3 +1,4 @@
+import { VALIDATE } from "openstack-uicore-foundation/lib/utils/actions";
 import emailTemplateReducer from "../email-template-reducer";
 import {
   REQUEST_TEMPLATE_RENDER,
@@ -144,6 +145,11 @@ const buildTemplateASessionState = () => {
     type: VALIDATE_RENDER,
     payload: { errors: ["A render error"], requestId: 4 }
   });
+  // a failed save left field errors behind
+  state = emailTemplateReducer(state, {
+    type: VALIDATE,
+    payload: { errors: ["identifier: taken"] }
+  });
   return emailTemplateReducer(state, {
     type: REQUEST_TEMPLATE_RENDER,
     payload: { requestId: 5 }
@@ -155,6 +161,7 @@ const expectRenderStateCleared = (state) => {
   expect(state.render_errors).toEqual([]);
   expect(state.templateLoading).toBe(false);
   expect(state.latestRenderId).toBe(0);
+  expect(state.errors).toEqual({});
 };
 
 describe("render sequencing state reset on entity change", () => {
@@ -260,3 +267,32 @@ describe("render sequencing state reset on entity change", () => {
     expect(afterStaleResponse.preview).not.toBe("A_LATE_PREVIEW");
   });
 });
+
+describe("validation errors", () => {
+  it("maps mailing-api's 'field: message' list onto field keys", () => {
+    // the API only prefixes a message with its field when the message
+    // doesn't already name it -- an unprefixed one stays snackbar-only
+    const state = emailTemplateReducer(undefined, {
+      type: VALIDATE,
+      payload: {
+        errors: [
+          "from_email: Enter a valid email address",
+          "subject: This field may not be blank",
+          "mail template with this identifier already exists"
+        ]
+      }
+    });
+    expect(state.errors).toEqual({
+      from_email: "Enter a valid email address",
+      subject: "This field may not be blank"
+    });
+
+    // an already keyed object passes through untouched
+    expect(
+      emailTemplateReducer(undefined, {
+        type: VALIDATE,
+        payload: { errors: { subject: "required" } }
+      }).errors
+    ).toEqual({ subject: "required" });
+  });
+});
diff --git a/src/reducers/emails/email-template-reducer.js b/src/reducers/emails/email-template-reducer.js
index d7370b68c..dcf416371 100644
--- a/src/reducers/emails/email-template-reducer.js
+++ b/src/reducers/emails/email-template-reducer.js
@@ -69,6 +69,18 @@ const normalizeEntityFields = (entity) => {
   return normalized;
 };
 
+// mailing-api 412s carry a flat list of "field: message" strings -- map them
+// onto field keys so the form can show each one under its input. Messages the
+// API leaves unprefixed (it skips the prefix when the text already names the
+// field) have no key to map to and only show in the snackbar.
+const toFieldErrors = (errors) => {
+  if (!Array.isArray(errors)) return errors;
+  return errors.reduce((acc, error) => {
+    const [field, ...rest] = String(error).split(": ");
+    return rest.length > 0 ? { ...acc, [field]: rest.join(": ") } : acc;
+  }, {});
+};
+
 const emailTemplateReducer = (state = DEFAULT_STATE, action) => {
   const { type, payload } = action;
   switch (type) {
@@ -103,6 +115,7 @@ const emailTemplateReducer = (state = DEFAULT_STATE, action) => {
           original_mjml_content: entity.mjml_content,
           original_html_content: entity.html_content
         },
+        errors: {},
         preview: null,
         render_errors: [],
         templateLoading: false,
@@ -121,6 +134,7 @@ const emailTemplateReducer = (state = DEFAULT_STATE, action) => {
           original_mjml_content: entity.mjml_content,
           original_html_content: entity.html_content
         },
+        errors: {},
         preview: null,
         render_errors: [],
         templateLoading: false,
@@ -169,7 +183,7 @@ const emailTemplateReducer = (state = DEFAULT_STATE, action) => {
       return { ...state, json_data: payload };
 
     case VALIDATE:
-      return { ...state, errors: payload.errors };
+      return { ...state, errors: toFieldErrors(payload.errors) };
 
     default:
       return state;
diff --git a/src/styles/edit-email-template-page.less b/src/styles/edit-email-template-page.less
deleted file mode 100644
index 2605fddc1..000000000
--- a/src/styles/edit-email-template-page.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.preview-email-template-modal {
-  .col-md-12 {
-    margin-bottom: 30px;
-  }
-}
-
-.email-preview {
-  border: 1px solid lightgrey;
-  min-height: 200px;
-  padding: 10px;
-}
-
-@media only screen and (min-width: 768px) {
-  .preview-email-template-modal {
-    > div {
-      width: 70%;
-    }
-  }
-}
diff --git a/src/utils/methods.js b/src/utils/methods.js
index 613919e59..5439c01bb 100644
--- a/src/utils/methods.js
+++ b/src/utils/methods.js
@@ -156,6 +156,36 @@ export const getAccessTokenSafely = async () => {
   }
 };
 
+// Per-thunk sequence-token factory guarding against stale-response commits.
+// Two concurrent invocations of the same thunk (different filters/page/id)
+// carry different getRequest abort keys (only access_token is stripped from the
+// key), so they never cancel each other and whichever response lands LAST would
+// win — even the older one. Each begin(dispatch) bumps the thunk's counter and
+// returns helpers scoped to that invocation:
+//   isCurrent()        — false once a newer invocation has begun
+//   guardedDispatch(a) — forwards to dispatch only while current, so a
+//                        superseded invocation cannot mutate state at all
+//                        (REQUEST, RECEIVE, error handlers, start/stopLoading).
+// The newest invocation is always current, so the overlay is always cleared by
+// whichever call finishes last. A STALE call's 401 re-login is also dropped
+// (uicore authErrorHandler reaches doLogin by dispatching a thunk through the
+// dispatch it is given) — safe: the fresh call carries the same token, so it
+// 401s too and drives the re-login, and uicore's isClearingSessionState guard
+// dedupes concurrent attempts.
+export const sequenced = () => {
+  let seq = 0;
+  return (dispatch) => {
+    seq += 1;
+    const mySeq = seq;
+    return {
+      isCurrent: () => mySeq === seq,
+      guardedDispatch: (action) => {
+        if (mySeq === seq) dispatch(action);
+      }
+    };
+  };
+};
+
 export const escapeFilterValue = (value) => {
   value = value.replace(/,/g, "\\,");
   value = value.replace(/;/g, "\\;");