diff --git a/client/src/components/email-documents/email-documents.component.jsx b/client/src/components/email-documents/email-documents.component.jsx
index 7607e23e4..a47e78de9 100644
--- a/client/src/components/email-documents/email-documents.component.jsx
+++ b/client/src/components/email-documents/email-documents.component.jsx
@@ -23,7 +23,7 @@ export default connect(
 
 export function EmailDocumentsComponent({
   emailConfig,
-
+  form,
   selectedMediaState,
 }) {
   const { t } = useTranslation();
@@ -48,7 +48,8 @@ export function EmailDocumentsComponent({
       {selectedMedia &&
       selectedMedia
         .filter((s) => s.isSelected)
-        .reduce((acc, val) => (acc = acc + val.size), 0) >= 9961472 ? (
+        .reduce((acc, val) => (acc = acc + val.size), 0) >=
+        10485760 - new Blob([form.getFieldValue("html")]).size ? (
         <div style={{ color: "red" }}>{t("general.errors.sizelimit")}</div>
       ) : null}
       {data && (
diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx
index 11dd30b2a..5fd70a838 100644
--- a/client/src/components/email-overlay/email-overlay.component.jsx
+++ b/client/src/components/email-overlay/email-overlay.component.jsx
@@ -162,7 +162,10 @@ export function EmailOverlayComponent({
       <Tabs>
         {!bodyshop.uselocalmediaserver && (
           <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
-            <EmailDocumentsComponent selectedMediaState={selectedMediaState} />
+            <EmailDocumentsComponent
+              selectedMediaState={selectedMediaState}
+              form={form}
+            />
           </Tabs.TabPane>
         )}
         <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
@@ -188,7 +191,8 @@ export function EmailOverlayComponent({
                     0
                   );
 
-                  const limit = 9961472;
+                  const limit =
+                    10485760 - new Blob([form.getFieldValue("html")]).size;
 
                   if (totalSize > limit) {
                     return Promise.reject(t("general.errors.sizelimit"));
diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx
index 9276f35ee..b6728b698 100644
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -168,7 +168,6 @@ export function EmailOverlayContainer({
   useEffect(() => {
     if (modalVisible) render();
   }, [modalVisible]); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <Modal
       destroyOnClose={true}
@@ -178,7 +177,15 @@ export function EmailOverlayContainer({
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}
-      okButtonProps={{ loading: sending }}
+      okButtonProps={{
+        loading: sending,
+        disabled:
+          selectedMedia &&
+         ( (selectedMedia
+            .filter((s) => s.isSelected)
+            .reduce((acc, val) => (acc = acc + val.size), 0) >=
+            10485760 - new Blob([form.getFieldValue("html")]).size) || selectedMedia.filter((s) => s.isSelected).length > 10),
+      }}
     >
       <Form layout="vertical" form={form} onFinish={handleFinish}>
         {loading && (