diff --git a/changes/20933-disable-overlay-other-workflows-modal b/changes/20933-disable-overlay-other-workflows-modal
new file mode 100644
index 0000000000..e0386552c5
--- /dev/null
+++ b/changes/20933-disable-overlay-other-workflows-modal
@@ -0,0 +1 @@
+- add a disabled overlay to the Other Workflows modal on the policy page.
diff --git a/frontend/components/Modal/Modal.tsx b/frontend/components/Modal/Modal.tsx
index 8d96a37818..2cc3dccadd 100644
--- a/frontend/components/Modal/Modal.tsx
+++ b/frontend/components/Modal/Modal.tsx
@@ -18,6 +18,11 @@ export interface IModalProps {
   isHidden?: boolean;
   /**    isLoading can be set true to enable targeting elements by loading state */
   isLoading?: boolean;
+  /** isContentDisabled can be set to true to display the modal content as disabled.
+   * At the moment this will place an overlay over the modal content and make it
+   * unclickable.
+   */
+  isContentDisabled?: boolean;
   className?: string;
 }
 
@@ -29,6 +34,7 @@ const Modal = ({
   width = "medium",
   isHidden = false,
   isLoading = false,
+  isContentDisabled = false,
   className,
 }: IModalProps): JSX.Element => {
   useEffect(() => {
@@ -61,26 +67,30 @@ const Modal = ({
     }
   }, [onEnter]);
 
-  const modalContainerClassName = classnames(
-    `${baseClass}__modal_container`,
+  const backgroundClasses = classnames(`${baseClass}__background`, {
+    [`${baseClass}__hidden`]: isHidden,
+  });
+
+  const modalContainerClasses = classnames(
     className,
-    { [`${baseClass}__modal_container__medium`]: width === "medium" },
-    { [`${baseClass}__modal_container__large`]: width === "large" },
-    { [`${baseClass}__modal_container__xlarge`]: width === "xlarge" },
-    { [`${baseClass}__modal_container__auto`]: width === "auto" }
+    `${baseClass}__modal_container`,
+    `${baseClass}__modal_container__${width}`,
+    {
+      [`${className}__loading`]: isLoading,
+    }
   );
 
+  const contentWrapperClasses = classnames(`${baseClass}__content-wrapper`, {
+    [`${baseClass}__content-wrapper-disabled`]: isContentDisabled,
+  });
+
+  const contentClasses = classnames(`${baseClass}__content`, {
+    [`${baseClass}__content-disabled`]: isContentDisabled,
+  });
+
   return (
-    <div
-      className={`${baseClass}__background ${
-        isHidden ? `${baseClass}__hidden` : ""
-      }`}
-    >
-      <div
-        className={`${modalContainerClassName} ${
-          isLoading ? `${className}__loading` : ""
-        }`}
-      >
+    <div className={backgroundClasses}>
+      <div className={modalContainerClasses}>
         <div className={`${baseClass}__header`}>
           <span>{title}</span>
           <div className={`${baseClass}__ex`}>
@@ -89,7 +99,13 @@ const Modal = ({
             </Button>
           </div>
         </div>
-        <div className={`${baseClass}__content`}>{children}</div>
+
+        <div className={contentWrapperClasses}>
+          {isContentDisabled && (
+            <div className={`${baseClass}__disabled-overlay`} />
+          )}
+          <div className={contentClasses}>{children}</div>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/components/Modal/_styles.scss b/frontend/components/Modal/_styles.scss
index 33fc9939eb..04dc539176 100644
--- a/frontend/components/Modal/_styles.scss
+++ b/frontend/components/Modal/_styles.scss
@@ -16,7 +16,7 @@
     }
   }
 
-  &__content {
+  &__content-wrapper {
     margin-top: $pad-large;
     font-size: $x-small;
 
@@ -100,4 +100,21 @@
       width: auto;
     }
   }
+
+  // these styles are for the modal content when it is disabled
+  &__content-wrapper-disabled {
+    position: relative;
+  }
+
+  &__content-disabled {
+    transition: opacity 150ms ease-in-out;
+    opacity: 0.5; // this adds a disabled effect to the modal content
+  }
+
+  &__disabled-overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+  }
 }
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
index 924a16b0d8..c1cfe99bb9 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
+++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss
@@ -1,17 +1,25 @@
 .add-policy-modal {
   height: 90%;
   overflow: hidden;
-  min-height: 460px;
-  max-height: fit-content;
+
+  // we have to reach into the modal component classes to style the content
+  // correctly. This is because this modal always has a fixed height and
+  // the content is scrollable.
+  .modal__content-wrapper {
+    height: 95%;
+  }
 
   .modal__content {
-    height: 90%;
-    overflow: scroll;
+    height: 100%;
     display: flex;
     flex-direction: column;
     gap: $pad-large;
   }
 
+  &__policy-selection {
+    overflow-y: auto;
+  }
+
   .Select-multi-value-wrapper {
     display: flex;
   }
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
index 75c66b5fd7..d34ae56ff6 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
@@ -367,6 +367,7 @@ const OtherWorkflowsModal = ({
       title="Other workflows"
       className={baseClass}
       width="large"
+      isContentDisabled={isUpdating}
     >
       <div className={`${baseClass} form`}>
         <Slider