diff --git a/components/form-builder/app/edit/Edit.tsx b/components/form-builder/app/edit/Edit.tsx
index c0e0b82753..f2bb52dc9d 100644
--- a/components/form-builder/app/edit/Edit.tsx
+++ b/components/form-builder/app/edit/Edit.tsx
@@ -12,6 +12,7 @@ import { useTemplateStore } from "../../store";
 import { getQuestionNumber, sortByLayout } from "../../util";
 import { Panel } from "../settings-modal/panel";
 import { cleanInput } from "@formbuilder/util";
+import { SaveButton } from "../shared/SaveButton";
 
 export const Edit = () => {
   const { t } = useTranslation("form-builder");
@@ -85,6 +86,9 @@ export const Edit = () => {
   return (
     <>
       <h1 className="visually-hidden">{t("edit")}</h1>
+      <div className="mb-4">
+        <SaveButton />
+      </div>
       <Panel />
       <RichTextLocked
         className="rounded-t-lg"
diff --git a/components/form-builder/app/navigation/EditNavigation.tsx b/components/form-builder/app/navigation/EditNavigation.tsx
index f403c60192..eb25191ac1 100644
--- a/components/form-builder/app/navigation/EditNavigation.tsx
+++ b/components/form-builder/app/navigation/EditNavigation.tsx
@@ -8,7 +8,6 @@ import { QuestionsIcon, TranslateIcon } from "@components/form-builder/icons";
 export const EditNavigation = () => {
   const { t } = useTranslation("form-builder");
   const { activePathname } = useActivePathname();
-
   return (
     <div className="relative flex max-w-[800px] flex-col tablet:flex-row">
       <div className="flex">
diff --git a/components/form-builder/app/navigation/LeftNavigation.tsx b/components/form-builder/app/navigation/LeftNavigation.tsx
index 97dcbd2832..ed634d6204 100644
--- a/components/form-builder/app/navigation/LeftNavigation.tsx
+++ b/components/form-builder/app/navigation/LeftNavigation.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useTranslation } from "next-i18next";
 import { DesignIcon, PreviewIcon, PublishIcon, GearIcon, MessageIcon } from "../../icons";
 import { useTemplateContext } from "@components/form-builder/hooks";
-import { SaveButton } from "../shared/SaveButton";
 import { useTemplateStore } from "../../store/useTemplateStore";
 import { useSession } from "next-auth/react";
 import { useActivePathname, cleanPath } from "../../hooks/useActivePathname";
@@ -67,11 +66,6 @@ export const LeftNavigation = () => {
             {t("responsesNavLabel")}
           </NavLink>
         </li>
-        {!isPublished && activePathname === "/form-builder/edit" && (
-          <li>
-            <SaveButton />
-          </li>
-        )}
       </ul>
     </nav>
   );
diff --git a/components/form-builder/app/shared/DownloadFileButton.tsx b/components/form-builder/app/shared/DownloadFileButton.tsx
index d96c215952..937b6e8f7b 100644
--- a/components/form-builder/app/shared/DownloadFileButton.tsx
+++ b/components/form-builder/app/shared/DownloadFileButton.tsx
@@ -53,12 +53,14 @@ export const DownloadFileButton = ({
   showInfo = true,
   buttonText,
   autoShowDialog = false,
+  theme = "secondary",
 }: {
   className?: string;
   onClick?: any; // eslint-disable-line  @typescript-eslint/no-explicit-any
   showInfo?: boolean;
   buttonText?: string;
   autoShowDialog?: boolean;
+  theme?: "primary" | "secondary";
 }) => {
   const { t, i18n } = useTranslation("form-builder");
   const { getSchema, form, name } = useTemplateStore((s) => ({
@@ -114,7 +116,7 @@ export const DownloadFileButton = ({
     <div>
       <Button
         className={className}
-        theme="secondary"
+        theme={theme}
         onClick={() => {
           downloadfile();
           downloadFileEvent();
diff --git a/components/form-builder/app/shared/SaveButton.tsx b/components/form-builder/app/shared/SaveButton.tsx
index a2556390d7..9f1a89cff2 100644
--- a/components/form-builder/app/shared/SaveButton.tsx
+++ b/components/form-builder/app/shared/SaveButton.tsx
@@ -1,25 +1,85 @@
-import React, { useState, useEffect } from "react";
-import { useRouter } from "next/router";
+import React from "react";
 import { useTranslation } from "next-i18next";
 import { useSession } from "next-auth/react";
+import { cn } from "@lib/utils";
 
-import { Button } from "@components/globals";
+import { Button, StyledLink } from "@components/globals";
 import { useTemplateStore } from "../../store";
 import { useTemplateStatus, useTemplateContext } from "../../hooks";
 import { formatDateTime } from "../../util";
-import Markdown from "markdown-to-jsx";
+import { useActivePathname } from "@components/form-builder/hooks";
+import { SavedFailIcon, SavedCheckIcon } from "@components/form-builder/icons";
+
+const SaveDraft = ({
+  handleSave,
+  templateIsDirty,
+}: {
+  handleSave: () => void;
+  templateIsDirty: boolean;
+}) => {
+  const { t } = useTranslation(["common", "form-builder"]);
+
+  if (templateIsDirty) {
+    return (
+      <>
+        <Button theme="link" onClick={handleSave} className={cn("mr-1 font-bold text-slate-500")}>
+          {t("saveDraft", { ns: "form-builder" })}
+        </Button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <span className="inline-block px-1">
+        <SavedCheckIcon className="mr-1 inline-block" />
+      </span>
+      <span className="mr-2 inline-block text-slate-500">{t("saved", { ns: "form-builder" })}</span>
+    </>
+  );
+};
+
+export const DateTime = ({ updatedAt }: { updatedAt: number }) => {
+  const { t, i18n } = useTranslation(["common", "form-builder"]);
+  const dateTime =
+    (updatedAt && formatDateTime(new Date(updatedAt).getTime(), `${i18n.language}-CA`)) || [];
+
+  if (!dateTime || dateTime.length < 2) {
+    return null;
+  }
+
+  const [date, time] = dateTime;
+
+  return <span>{` - ${t("lastSaved", { ns: "form-builder" })} ${time}, ${date}`}</span>;
+};
+
+export const ErrorSavingForm = () => {
+  const { t, i18n } = useTranslation(["common", "form-builder"]);
+  const supportHref = `/${i18n.language}/form-builder/support`;
+  return (
+    <span className="inline-block">
+      <span className="inline-block px-1">
+        <SavedFailIcon className="inline-block fill-red" />
+      </span>
+      <StyledLink
+        href={supportHref}
+        className="mr-2 !text-red-700 underline hover:no-underline focus:bg-transparent focus:shadow-none active:bg-transparent"
+      >
+        {t("errorSavingForm.failedLink", { ns: "form-builder" })}
+      </StyledLink>
+    </span>
+  );
+};
 
 export const SaveButton = () => {
-  const { id } = useTemplateStore((s) => ({
+  const { isPublished, id } = useTemplateStore((s) => ({
+    isPublished: s.isPublished,
     id: s.id,
   }));
 
-  const { error, saveForm } = useTemplateContext();
-
+  const { error, saveForm, templateIsDirty } = useTemplateContext();
+  const { activePathname } = useActivePathname();
   const { status } = useSession();
-  const { t, i18n } = useTranslation(["common", "form-builder"]);
-  const { isReady, asPath } = useRouter();
-  const [isStartPage, setIsStartPage] = useState(false);
   const { updatedAt, getTemplateById } = useTemplateStatus();
 
   const handleSave = async () => {
@@ -30,43 +90,33 @@ export const SaveButton = () => {
     }
   };
 
-  useEffect(() => {
-    if (isReady) {
-      const activePathname = new URL(asPath, location.href).pathname;
-      if (activePathname === "/form-builder") {
-        setIsStartPage(true);
-      } else {
-        setIsStartPage(false);
-      }
-    }
-  }, [asPath, isReady]);
+  if (isPublished) {
+    return null;
+  }
 
-  const dateTime =
-    (updatedAt && formatDateTime(new Date(updatedAt).getTime(), `${i18n.language}-CA`)) || [];
+  const showSave =
+    activePathname === "/form-builder/edit" || activePathname === "/form-builder/edit/translate";
 
-  return !isStartPage && status === "authenticated" ? (
+  if (!showSave) {
+    return null;
+  }
+
+  return status === "authenticated" ? (
     <div
       data-id={id}
-      className={`-ml-4 mt-12 w-40 p-4 text-sm laptop:w-52 laptop:text-base ${
-        id && (error ? "bg-red-100" : "bg-yellow-100")
-      }`}
+      className={cn(
+        "mb-2 flex w-[800px] text-sm laptop:text-base text-slate-500",
+        id && error && "text-red-destructive"
+      )}
+      aria-live="polite"
+      aria-atomic="true"
     >
-      <Button onClick={handleSave}>{t("saveDraft", { ns: "form-builder" })}</Button>
-      {error && (
-        <div className="pt-4 text-sm text-red-500">
-          <Markdown options={{ forceBlock: true }}>{error}</Markdown>
-        </div>
+      {error ? (
+        <ErrorSavingForm />
+      ) : (
+        <SaveDraft handleSave={handleSave} templateIsDirty={templateIsDirty.current} />
       )}
-      <div className="mt-4" aria-live="polite">
-        {dateTime.length == 2 && (
-          <>
-            <div className="font-bold">{t("lastSaved", { ns: "form-builder" })}</div>
-            <div className="text-sm">
-              {dateTime[0]} {t("at")} {dateTime[1]}{" "}
-            </div>
-          </>
-        )}
-      </div>
+      {updatedAt && <DateTime updatedAt={updatedAt} />}
     </div>
   ) : null;
 };
diff --git a/components/form-builder/app/shared/Toast.tsx b/components/form-builder/app/shared/Toast.tsx
index ae44a7d7ef..0d11d71ad3 100644
--- a/components/form-builder/app/shared/Toast.tsx
+++ b/components/form-builder/app/shared/Toast.tsx
@@ -51,11 +51,19 @@ type ToastContext = {
 
 export const ToastContainer = ({
   autoClose = 3000,
+  width = "",
+  containerId = "",
+  limit,
 }: {
   autoClose?: number | false | undefined;
+  width?: string;
+  containerId?: string;
+  limit?: number;
 }) => {
   return (
     <OriginalContainer
+      enableMultiContainer
+      containerId={containerId}
       toastClassName={(context?: ToastContext) => {
         return `${
           contextClass[context?.type || "default"]["background"]
@@ -69,11 +77,13 @@ export const ToastContainer = ({
       }) => {
         return `${contextClass[context?.type || "default"]["text"]} flex text-base`;
       }}
+      style={{ width: width }}
       position={originalToast.POSITION.TOP_CENTER}
       autoClose={autoClose}
       hideProgressBar={true}
       closeOnClick={true}
       transition={Bounce}
+      limit={limit}
       icon={(context?: ToastContext) => {
         return contextClass[context?.type || "default"]["icon"];
       }}
@@ -81,23 +91,27 @@ export const ToastContainer = ({
   );
 };
 
+const toastContent = (message: string | JSX.Element) => {
+  return React.isValidElement(message) ? message : <p className="py-2">{message}</p>;
+};
+
 export const toast = {
-  success: (message: string) => {
-    originalToast.success(<p className="py-2">{message}</p>);
+  success: (message: string | JSX.Element, containerId = "default") => {
+    originalToast.success(toastContent(message), { containerId });
   },
-  error: (message: string) => {
-    originalToast.error(<p className="py-2">{message}</p>);
+  error: (message: string | JSX.Element, containerId = "default") => {
+    originalToast.error(toastContent(message), { containerId });
   },
-  info: (message: string) => {
-    originalToast.info(<p className="py-2">{message}</p>);
+  info: (message: string | JSX.Element, containerId = "default") => {
+    originalToast.info(toastContent(message), { containerId });
   },
-  warn: (message: string) => {
-    originalToast.warn(<p className="py-2">{message}</p>);
+  warn: (message: string | JSX.Element, containerId = "default") => {
+    originalToast.warn(toastContent(message), { containerId });
   },
-  warning: (message: string) => {
-    originalToast.warning(<p className="py-2">{message}</p>);
+  warning: (message: string | JSX.Element, containerId = "") => {
+    originalToast.warning(toastContent(message), { containerId });
   },
-  default: (message: string) => {
-    originalToast(<p className="py-2">{message}</p>);
+  default: (message: string | JSX.Element, containerId = "default") => {
+    originalToast(toastContent(message), { containerId });
   },
 };
diff --git a/components/form-builder/app/translate/Translate.tsx b/components/form-builder/app/translate/Translate.tsx
index 9859cdbdd8..9b0d3aac6e 100644
--- a/components/form-builder/app/translate/Translate.tsx
+++ b/components/form-builder/app/translate/Translate.tsx
@@ -10,6 +10,7 @@ import { DownloadCSV } from "./DownloadCSV";
 import { RichTextEditor } from "../edit/elements/lexical-editor/RichTextEditor";
 import { LanguageLabel } from "./LanguageLabel";
 import { FieldsetLegend, SectionTitle } from ".";
+import { SaveButton } from "../shared/SaveButton";
 
 import { FormElement } from "@lib/types";
 import { alphabet, sortByLayout } from "../../util";
@@ -116,6 +117,10 @@ export const Translate = () => {
         <p>{t("translateDescription")}</p>
         <br />
 
+        <div className="mb-4">
+          <SaveButton />
+        </div>
+
         <div className="mb-8">
           <DownloadCSV />
         </div>
diff --git a/components/form-builder/hooks/useTemplateContext.tsx b/components/form-builder/hooks/useTemplateContext.tsx
index a1ed9e8bca..872db61377 100644
--- a/components/form-builder/hooks/useTemplateContext.tsx
+++ b/components/form-builder/hooks/useTemplateContext.tsx
@@ -4,22 +4,46 @@ import { useTemplateApi } from "../hooks";
 import { useTranslation } from "next-i18next";
 import { logMessage } from "@lib/logger";
 import { useSession } from "next-auth/react";
+import { toast } from "../app/shared/Toast";
+import { StyledLink } from "@components/globals";
+import { DownloadFileButton } from "../app/shared/";
 
 interface TemplateApiType {
-  error: string | null;
+  error: string | null | undefined;
   saveForm: () => Promise<boolean>;
+  templateIsDirty: React.MutableRefObject<boolean>;
 }
 
 const defaultTemplateApi: TemplateApiType = {
   error: null,
   saveForm: async () => false,
+  templateIsDirty: { current: false },
 };
 
 const TemplateApiContext = createContext<TemplateApiType>(defaultTemplateApi);
 
+const ErrorSaving = ({ supportHref, errorCode }: { supportHref: string; errorCode?: string }) => {
+  const { t } = useTranslation("form-builder");
+
+  return (
+    <div className="w-full">
+      <h3 className="!mb-0 pb-0 text-xl font-semibold">{t("errorSavingForm.title")}</h3>
+      <p className="mb-2 text-black">
+        {t("errorSavingForm.description")}{" "}
+        <StyledLink href={supportHref}>{t("errorSavingForm.supportLink")}.</StyledLink>
+      </p>
+      <p className="mb-5 text-sm text-black">
+        {errorCode && t("errorSavingForm.errorCode", { code: errorCode })}
+      </p>
+      <DownloadFileButton theme="primary" showInfo={false} autoShowDialog={false} />
+    </div>
+  );
+};
+
 export function TemplateApiProvider({ children }: { children: React.ReactNode }) {
-  const { t } = useTranslation(["form-builder"]);
-  const [error, setError] = useState<string | null>(null);
+  const { t, i18n } = useTranslation(["form-builder"]);
+  const [error, setError] = useState<string | null>();
+  const supportHref = `/${i18n.language}/form-builder/support`;
   const { id, getSchema, getName, hasHydrated, setId, getIsPublished } = useTemplateStore((s) => ({
     id: s.id,
     getSchema: s.getSchema,
@@ -67,12 +91,13 @@ export function TemplateApiProvider({ children }: { children: React.ReactNode })
     } catch (err) {
       logMessage.error(err as Error);
       setError(t("errorSaving"));
+      toast.error(<ErrorSaving supportHref={supportHref} />, "wide");
       return false;
     }
-  }, [status, getIsPublished, getSchema, getName, id, save, setError, setId, t]);
+  }, [status, getIsPublished, getSchema, getName, id, save, setError, setId, t, supportHref]);
 
   return (
-    <TemplateApiContext.Provider value={{ error, saveForm }}>
+    <TemplateApiContext.Provider value={{ error, saveForm, templateIsDirty }}>
       {children}
     </TemplateApiContext.Provider>
   );
diff --git a/components/form-builder/icons/SavedCheckIcon.tsx b/components/form-builder/icons/SavedCheckIcon.tsx
new file mode 100644
index 0000000000..82e8b3d045
--- /dev/null
+++ b/components/form-builder/icons/SavedCheckIcon.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+export const SavedCheckIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z" fill="#64748B" />
+  </svg>
+);
diff --git a/components/form-builder/icons/SavedFailIcon.tsx b/components/form-builder/icons/SavedFailIcon.tsx
new file mode 100644
index 0000000000..061d7b6f5a
--- /dev/null
+++ b/components/form-builder/icons/SavedFailIcon.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+export const SavedFailIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path
+      fill="#BC3331"
+      d="M6.2 17 5 15.8 9.8 11 5 6.2 6.2 5 11 9.8 15.8 5 17 6.2 12.2 11l4.8 4.8-1.2 1.2-4.8-4.8L6.2 17Z"
+    />
+  </svg>
+);
diff --git a/components/form-builder/icons/index.ts b/components/form-builder/icons/index.ts
index f5f06e2356..1abb875913 100644
--- a/components/form-builder/icons/index.ts
+++ b/components/form-builder/icons/index.ts
@@ -76,3 +76,5 @@ export { DeleteIcon } from "./DeleteIcon";
 export { InboxIcon } from "./InboxIcon";
 export { ForwardArrowIcon } from "./ForwardArrowIcon";
 export { StartIcon } from "./StartIcon";
+export { SavedCheckIcon } from "./SavedCheckIcon";
+export { SavedFailIcon } from "./SavedFailIcon";
diff --git a/components/globals/layouts/TwoColumnLayout.tsx b/components/globals/layouts/TwoColumnLayout.tsx
index ec262f673f..045c818829 100644
--- a/components/globals/layouts/TwoColumnLayout.tsx
+++ b/components/globals/layouts/TwoColumnLayout.tsx
@@ -25,12 +25,12 @@ export const TwoColumnLayout = ({
 
         <Header context={context} user={user} />
         <div className="mx-4 shrink-0 grow basis-auto laptop:mx-32 desktop:mx-64">
-          <ToastContainer />
+          <ToastContainer containerId="default" />
+          <ToastContainer limit={1} containerId="wide" autoClose={false} width="600px" />
           <>
             <div>
               <div className="flex flex-row gap-10">
                 <div className="min-w-[181px]">{leftColumnContent}</div>
-
                 <main
                   id="content"
                   className={cn("w-full", context === "formBuilder" && "form-builder")}
diff --git a/public/static/locales/en/form-builder.json b/public/static/locales/en/form-builder.json
index 51240767b8..8091a1f9af 100644
--- a/public/static/locales/en/form-builder.json
+++ b/public/static/locales/en/form-builder.json
@@ -360,7 +360,7 @@
   "incomplete": "Incomplete",
   "inputDescription": "Description",
   "insertLink": "Insert link",
-  "lastSaved": "Last saved:",
+  "lastSaved": "updated at",
   "linkUrl": "Link URL",
   "lockedBlock": "Locked block",
   "longAnswerText": "Long answer text",
@@ -697,7 +697,8 @@
     "title": "There was an error saving the form",
     "description": "Download a copy of the form and try again or",
     "supportLink": "contact Support",
-    "errorCode": "Error code: {{code}}"
+    "errorCode": "Error code: {{code}}",
+    "failedLink": "Saving failed - Contact support"
   },
   "addConditionalRules": {
     "modalTitle": "Add a rule to a question",
@@ -712,5 +713,6 @@
     "addOther": "Add input field for \"other\"",
     "other": "Other ",
     "show": "Show:"
-  }
+  },
+  "saved": "Saved"
 }
diff --git a/public/static/locales/fr/form-builder.json b/public/static/locales/fr/form-builder.json
index 49b9193a53..9861165c03 100644
--- a/public/static/locales/fr/form-builder.json
+++ b/public/static/locales/fr/form-builder.json
@@ -359,7 +359,7 @@
   "incomplete": "Incomplet",
   "inputDescription": "Description",
   "insertLink": "Insérer un lien  ",
-  "lastSaved": "Dernier enregistrement :",
+  "lastSaved": "mise à jour à",
   "linkUrl": "URL du lien",
   "lockedBlock": "Bloc verrouillé",
   "longAnswerText": "Réponse longue",
@@ -697,7 +697,8 @@
     "title": "Une erreur s'est produite lors de l'enregistrement du formulaire",
     "description": "Veuillez télécharger une copie du formulaire et réessayer ou",
     "supportLink": "contacter l'équipe de soutien",
-    "errorCode": "Code d'erreur : {{code}}"
+    "errorCode": "Code d'erreur : {{code}}",
+    "failedLink": "L'enregistrement a échoué - Contacter l'équipe de soutien"
   },
   "addConditionalRules": {
     "modalTitle": "Ajouter une règle à une question",
@@ -712,5 +713,6 @@
     "addOther": "Ajouter un champ de saisi pour  « Autre »",
     "other": "Autre ",
     "show": "Afficher :"
-  }
-}
\ No newline at end of file
+  },
+  "saved": "Enregistré"
+}