diff --git a/changes/issue-11376-add-better-error-for-manual-modal b/changes/issue-11376-add-better-error-for-manual-modal
new file mode 100644
index 0000000000..cb0fc26e8a
--- /dev/null
+++ b/changes/issue-11376-add-better-error-for-manual-modal
@@ -0,0 +1 @@
+- add better UI error for manual enroll mdm modal
diff --git a/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/AutoEnrollMdmModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/AutoEnrollMdmModal.tsx
index 64ddd66d46..64bd0ecff9 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/AutoEnrollMdmModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/AutoEnrollMdmModal.tsx
@@ -7,7 +7,7 @@ interface IAutoEnrollMdmModalProps {
   onCancel: () => void;
 }
 
-const baseClass = "auto-enroll-mdm-modal enroll-mdm-modal";
+const baseClass = "auto-enroll-mdm-modal";
 
 const AutoEnrollMdmModal = ({
   onCancel,
diff --git a/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/_styles.scss
index e69de29bb2..1f0f33cfc3 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/_styles.scss
@@ -0,0 +1,3 @@
+.auto-enroll-mdm-modal {
+  @include enroll-mdm-modal;
+}
diff --git a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
index 8530c9f150..363ed9100c 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/ManualEnrollMdmModal.tsx
@@ -16,7 +16,7 @@ interface IManualEnrollMdmModalProps {
   token?: string;
 }
 
-const baseClass = "manual-enroll-mdm-modal enroll-mdm-modal";
+const baseClass = "manual-enroll-mdm-modal";
 
 const ManualEnrollMdmModal = ({
   onCancel,
@@ -35,6 +35,7 @@ const ManualEnrollMdmModal = ({
     () => mdmAPI.downloadDeviceUserEnrollmentProfile(token),
     {
       refetchOnWindowFocus: false,
+      retry: false,
     }
   );
 
@@ -60,20 +61,17 @@ const ManualEnrollMdmModal = ({
 
     return false;
   };
-  if (isFetchingMdmProfile) {
-    return <Spinner />;
-  }
-  if (fetchMdmProfileError) {
-    return <DataError card />;
-  }
 
-  return (
-    <Modal
-      title="Turn on MDM"
-      onExit={onCancel}
-      className={baseClass}
-      width="xlarge"
-    >
+  const renderModalBody = () => {
+    if (isFetchingMdmProfile) {
+      return <Spinner />;
+    }
+
+    if (fetchMdmProfileError) {
+      return <DataError card />;
+    }
+
+    return (
       <div>
         <p className={`${baseClass}__description`}>
           To turn on MDM, Apple Inc. requires that you download and install a
@@ -125,6 +123,17 @@ const ManualEnrollMdmModal = ({
           </Button>
         </div>
       </div>
+    );
+  };
+
+  return (
+    <Modal
+      title="Turn on MDM"
+      onExit={onCancel}
+      className={baseClass}
+      width="xlarge"
+    >
+      {renderModalBody()}
     </Modal>
   );
 };
diff --git a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
index e69de29bb2..beffa8375e 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/ManualEnrollMdmModal/_styles.scss
@@ -0,0 +1,7 @@
+.manual-enroll-mdm-modal {
+  @include enroll-mdm-modal;
+
+  &__error-message {
+    margin: $pad-xxxlarge;
+  }
+}
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index a2ba2ff8f7..2cba28bdfd 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -3,24 +3,7 @@
     height: 50px;
   }
 }
-.enroll-mdm-modal {
-  &__description {
-    margin: $pad-large 0;
-  }
 
-  &__download-button {
-    margin-top: 12px;
-  }
-
-  ol {
-    padding-left: 0;
-  }
-
-  li {
-    margin-bottom: $pad-large;
-    list-style-position: inside;
-  }
-}
 .device-user {
   display: flex;
   flex-direction: column;
diff --git a/frontend/styles/var/mixins.scss b/frontend/styles/var/mixins.scss
index 2dba7f447d..6d28be75df 100644
--- a/frontend/styles/var/mixins.scss
+++ b/frontend/styles/var/mixins.scss
@@ -88,3 +88,23 @@ $max-width: 2560px;
     margin-right: $pad-medium;
   }
 }
+
+// used to share styles across the manual enroll mdm modal and the auto enroll mdm modal.
+@mixin enroll-mdm-modal {
+  &__description {
+    margin: $pad-large 0;
+  }
+
+  &__download-button {
+    margin-top: 12px;
+  }
+
+  ol {
+    padding-left: 0;
+  }
+
+  li {
+    margin-bottom: $pad-large;
+    list-style-position: inside;
+  }
+}