diff --git a/changes/32419-fix-conditional-access-delete b/changes/32419-fix-conditional-access-delete
new file mode 100644
index 0000000000..2e027f5603
--- /dev/null
+++ b/changes/32419-fix-conditional-access-delete
@@ -0,0 +1 @@
+* Fixed deletion of conditional access integration by adding a spinner and clearing the tenant ID after the deletion.
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
index 99ee47e82a..116251988d 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/ConditionalAccess.tsx
@@ -40,14 +40,31 @@ const MSETID = "microsoft_entra_tenant_id";
 interface IDeleteConditionalAccessModal {
   toggleDeleteConditionalAccessModal: () => void;
   onDelete: () => void;
-  isUpdating: boolean;
 }
 
 const DeleteConditionalAccessModal = ({
   toggleDeleteConditionalAccessModal,
   onDelete,
-  isUpdating,
 }: IDeleteConditionalAccessModal) => {
+  const { renderFlash } = useContext(NotificationContext);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await conditionalAccessAPI.deleteMicrosoftConditionalAccess();
+      renderFlash("success", "Successfully disconnected from Microsoft Entra.");
+      toggleDeleteConditionalAccessModal();
+      onDelete();
+    } catch {
+      renderFlash(
+        "error",
+        "Could not disconnect from Microsoft Entra, please try again."
+      );
+    }
+    setIsDeleting(false);
+  };
+
   return (
     <Modal
       title="Delete"
@@ -63,14 +80,16 @@ const DeleteConditionalAccessModal = ({
           <Button
             type="button"
             variant="alert"
-            onClick={onDelete}
-            isLoading={isUpdating}
+            onClick={handleDelete}
+            isLoading={isDeleting}
+            disabled={isDeleting}
           >
             Delete
           </Button>
           <Button
             onClick={toggleDeleteConditionalAccessModal}
             variant="inverse-alert"
+            disabled={isDeleting}
           >
             Cancel
           </Button>
@@ -282,19 +301,8 @@ const ConditionalAccess = () => {
   };
 
   const onDeleteConditionalAccess = async () => {
-    setIsUpdating(true);
-    try {
-      await conditionalAccessAPI.deleteMicrosoftConditionalAccess();
-      renderFlash("success", "Successfully disconnected from Microsoft Entra.");
-      toggleDeleteConditionalAccessModal();
-      refetchConfig();
-    } catch {
-      renderFlash(
-        "error",
-        "Could not disconnect from Microsoft Entra, please try again."
-      );
-      setIsUpdating(false);
-    }
+    setFormData({ [MSETID]: "" });
+    refetchConfig();
   };
 
   const onInputChange = ({ name, value }: IInputFieldParseTarget) => {
@@ -401,7 +409,6 @@ const ConditionalAccess = () => {
           toggleDeleteConditionalAccessModal={
             toggleDeleteConditionalAccessModal
           }
-          isUpdating={isUpdating}
         />
       )}
     </div>