diff --git a/__tests__/components/uswds/Alert.test.js b/__tests__/components/uswds/Alert.test.js
index 672187d2..0384f743 100644
--- a/__tests__/components/uswds/Alert.test.js
+++ b/__tests__/components/uswds/Alert.test.js
@@ -11,7 +11,7 @@ function selectAlert(rendered) {
 
 describe('<Alert />', () => {
   it('renders a default USWDS styled alert', () => {
-    const res = render(<Alert id="test"></Alert>);
+    const res = render(<Alert id="test" isVisible={true}></Alert>);
 
     const alert = selectAlert(res);
     expect(alert).toBeInTheDocument();
@@ -21,7 +21,9 @@ describe('<Alert />', () => {
 
   for (const type of types) {
     it(`renders an alert of type ${type}`, () => {
-      const res = render(<Alert id="test" type={type}></Alert>);
+      const res = render(
+        <Alert id="test" type={type} isVisible={true}></Alert>
+      );
 
       const alert = selectAlert(res);
       expect(alert).toHaveClass(`usa-alert--${type}`);
@@ -29,14 +31,21 @@ describe('<Alert />', () => {
   }
 
   it('renders an h4 heading by default', () => {
-    render(<Alert id="test" heading="Testing"></Alert>);
+    render(<Alert id="test" heading="Testing" isVisible={true}></Alert>);
 
     const heading = screen.getByRole('heading', { level: 4 });
     expect(heading).toBeInTheDocument();
   });
 
   it('renders an h3 if specified', () => {
-    render(<Alert id="test" heading="Testing" headingLevel="h3"></Alert>);
+    render(
+      <Alert
+        id="test"
+        heading="Testing"
+        headingLevel="h3"
+        isVisible={true}
+      ></Alert>
+    );
 
     const heading = screen.getByRole('heading', { level: 3 });
     expect(heading).toBeInTheDocument();
@@ -44,7 +53,11 @@ describe('<Alert />', () => {
 
   describe('with children', () => {
     it('renders normally within a p tag', () => {
-      const res = render(<Alert id="test">Test contents</Alert>);
+      const res = render(
+        <Alert id="test" isVisible={true}>
+          Test contents
+        </Alert>
+      );
 
       const alert = selectAlert(res);
       expect(alert).toHaveTextContent('Test contents');
@@ -53,7 +66,7 @@ describe('<Alert />', () => {
 
     it('renders validation without a p tag', () => {
       const res = render(
-        <Alert id="test" validation>
+        <Alert id="test" validation isVisible={true}>
           Test contents
         </Alert>
       );
@@ -65,7 +78,7 @@ describe('<Alert />', () => {
   });
 
   it('can render a slim alert without an icon', () => {
-    const res = render(<Alert id="test" slim noIcon></Alert>);
+    const res = render(<Alert id="test" slim noIcon isVisible={true}></Alert>);
 
     const alert = selectAlert(res);
     expect(alert).toHaveClass('usa-alert--slim');
diff --git a/src/app/orgs/[orgId]/users/[userId]/org-roles/error.tsx b/src/app/orgs/[orgId]/users/[userId]/org-roles/error.tsx
index 49a9ed1e..3f287346 100644
--- a/src/app/orgs/[orgId]/users/[userId]/org-roles/error.tsx
+++ b/src/app/orgs/[orgId]/users/[userId]/org-roles/error.tsx
@@ -3,5 +3,9 @@
 import { Alert } from '@/components/uswds/Alert';
 
 export default function EditOrgPageError({ error }: { error: Error }) {
-  return <Alert type="error">{error.message}</Alert>;
+  return (
+    <Alert type="error" isVisible={true}>
+      {error.message}
+    </Alert>
+  );
 }
diff --git a/src/app/orgs/error.tsx b/src/app/orgs/error.tsx
index 596af33a..795ff77d 100644
--- a/src/app/orgs/error.tsx
+++ b/src/app/orgs/error.tsx
@@ -17,7 +17,9 @@ export default function Error({
 
   return (
     <div className="padding-top-4">
-      <Alert type="error">Error: {error.message}</Alert>
+      <Alert type="error" isVisible={true}>
+        Error: {error.message}
+      </Alert>
     </div>
   );
 }
diff --git a/src/app/prototype/alerts/page.tsx b/src/app/prototype/alerts/page.tsx
new file mode 100644
index 00000000..55b947ad
--- /dev/null
+++ b/src/app/prototype/alerts/page.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Alert } from '@/components/uswds/Alert';
+import { useState } from 'react';
+
+export default function AlertsPage() {
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [successCount, setSuccessCount] = useState(0);
+  const [showError, setShowError] = useState(false);
+  const [errorCount, setErrorCount] = useState(0);
+
+  return (
+    <div className="grid-container margin-1 margin-y-4">
+      <h2>Success alert</h2>
+
+      <button
+        className="usa-button"
+        onClick={() => {
+          setShowSuccess(!showSuccess);
+          setSuccessCount(showSuccess ? successCount + 1 : successCount);
+        }}
+      >
+        show success alert
+      </button>
+
+      <div className="margin-top-2">
+        <Alert type="success" isVisible={showSuccess}>
+          This is success alert number {successCount}
+        </Alert>
+      </div>
+
+      <h2>Error alert</h2>
+
+      <button
+        className="usa-button"
+        onClick={() => {
+          setShowError(!showError);
+          setErrorCount(showError ? errorCount + 1 : errorCount);
+        }}
+      >
+        show error alert
+      </button>
+
+      <div className="margin-top-2">
+        <Alert type="error" isVisible={showError}>
+          This is an error alert number {errorCount}
+        </Alert>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/prototype/design-guide/page.tsx b/src/app/prototype/design-guide/page.tsx
index 656785ce..4102a12d 100644
--- a/src/app/prototype/design-guide/page.tsx
+++ b/src/app/prototype/design-guide/page.tsx
@@ -84,22 +84,43 @@ export default function DesignGuidePage() {
         <div className="grid-row grid-gap">
           <div className="grid-col-6">
             <h3>Full sized with icons and default h4 heading size</h3>
-            <Alert type="success" heading="Success" className="display-block">
+            <Alert
+              type="success"
+              heading="Success"
+              className="display-block"
+              isVisible={true}
+            >
               Good job
             </Alert>
-            <Alert type="info" heading="Info" className="display-block">
+            <Alert
+              type="info"
+              heading="Info"
+              className="display-block"
+              isVisible={true}
+            >
               So you know
             </Alert>
-            <Alert type="warning" heading="Warning" className="display-block">
+            <Alert
+              type="warning"
+              heading="Warning"
+              className="display-block"
+              isVisible={true}
+            >
               Watch out
             </Alert>
-            <Alert type="error" heading="Error" className="display-block">
+            <Alert
+              type="error"
+              heading="Error"
+              className="display-block"
+              isVisible={true}
+            >
               Something is wrong
             </Alert>
             <Alert
               type="emergency"
               heading="Emergency"
               className="display-block"
+              isVisible={true}
             >
               Fear! Fire! Foes!
             </Alert>
@@ -110,42 +131,88 @@ export default function DesignGuidePage() {
               heading="Validation"
               validation
               className="display-block"
+              isVisible={true}
             >
               Validations do not use usa-alert__text p tag
             </Alert>
           </div>
           <div className="grid-col-6">
             <h3>Slim with icons and no headings</h3>
-            <Alert type="success" slim className="display-block">
+            <Alert
+              type="success"
+              slim
+              className="display-block"
+              isVisible={true}
+            >
               Success
             </Alert>
-            <Alert type="info" slim className="display-block">
+            <Alert type="info" slim className="display-block" isVisible={true}>
               Info
             </Alert>
-            <Alert type="warning" slim className="display-block">
+            <Alert
+              type="warning"
+              slim
+              className="display-block"
+              isVisible={true}
+            >
               Warning
             </Alert>
-            <Alert type="error" slim className="display-block">
+            <Alert type="error" slim className="display-block" isVisible={true}>
               Error
             </Alert>
-            <Alert type="emergency" slim className="display-block">
+            <Alert
+              type="emergency"
+              slim
+              className="display-block"
+              isVisible={true}
+            >
               Emergency
             </Alert>
 
             <h3>Slim with no icons and no headings</h3>
-            <Alert type="success" slim noIcon className="display-block">
+            <Alert
+              type="success"
+              slim
+              noIcon
+              className="display-block"
+              isVisible={true}
+            >
               Success
             </Alert>
-            <Alert type="info" slim noIcon className="display-block">
+            <Alert
+              type="info"
+              slim
+              noIcon
+              className="display-block"
+              isVisible={true}
+            >
               Info
             </Alert>
-            <Alert type="warning" slim noIcon className="display-block">
+            <Alert
+              type="warning"
+              slim
+              noIcon
+              className="display-block"
+              isVisible={true}
+            >
               Warning
             </Alert>
-            <Alert type="error" slim noIcon className="display-block">
+            <Alert
+              type="error"
+              slim
+              noIcon
+              className="display-block"
+              isVisible={true}
+            >
               Error
             </Alert>
-            <Alert type="emergency" slim noIcon className="display-block">
+            <Alert
+              type="emergency"
+              slim
+              noIcon
+              className="display-block"
+              isVisible={true}
+            >
               Emergency
             </Alert>
           </div>
diff --git a/src/components/OrgActions/OrgActionsAddUser.tsx b/src/components/OrgActions/OrgActionsAddUser.tsx
index 990cf863..e6f1e566 100644
--- a/src/components/OrgActions/OrgActionsAddUser.tsx
+++ b/src/components/OrgActions/OrgActionsAddUser.tsx
@@ -78,22 +78,21 @@ export function OrgActionsAddUser({
         able to manage their roles once they're added.
       </p>
 
-      {actionStatus === 'error' && (
-        <Alert type="error">{actionErrors.join(', ')}</Alert>
-      )}
-      {actionStatus === 'success' && (
-        <Alert type="success">
-          <strong>{emailInput || 'User'}</strong> has been added!
-          {userId && (
-            <>
-              <br />
-              <Link href={`/orgs/${orgId}/users/${userId}/org-roles`}>
-                Manage their organization roles
-              </Link>
-            </>
-          )}
-        </Alert>
-      )}
+      <Alert type="error" isVisible={actionStatus === 'error'}>
+        {actionErrors.join(', ')}
+      </Alert>
+
+      <Alert type="success" isVisible={actionStatus === 'success'}>
+        <strong>{emailInput || 'User'}</strong> has been added!
+        {userId && (
+          <>
+            <br />
+            <Link href={`/orgs/${orgId}/users/${userId}/org-roles`}>
+              Manage their organization roles
+            </Link>
+          </>
+        )}
+      </Alert>
 
       <fieldset className="usa-fieldset">
         <legend className="usa-legend usa-sr-only">
diff --git a/src/components/UsersActions/UsersActionsOrgRoles.tsx b/src/components/UsersActions/UsersActionsOrgRoles.tsx
index 7acaa162..9b42f9d3 100644
--- a/src/components/UsersActions/UsersActionsOrgRoles.tsx
+++ b/src/components/UsersActions/UsersActionsOrgRoles.tsx
@@ -144,7 +144,11 @@ export function UsersActionsOrgRoles({
   }
 
   if (loadingErrorMessage) {
-    return <Alert type="error">{loadingErrorMessage}</Alert>;
+    return (
+      <Alert type="error" isVisible={!!loadingErrorMessage}>
+        {loadingErrorMessage}
+      </Alert>
+    );
   }
 
   if (!dataLoaded) {
@@ -162,21 +166,26 @@ export function UsersActionsOrgRoles({
       >
         {actionErrors.join(', ')}
       </div>
-      {actionStatus === 'success' && (
-        <Alert type="success">Org roles have been saved!</Alert>
-      )}
-      {actionStatus === 'error' && (
-        <Alert type="error" heading="An error has occured.">
-          {actionErrors.join(', ')} If the error occurs again, please contact{' '}
-          <Link
-            className="text-bold text-ink"
-            href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
-          >
-            Cloud.gov support
-          </Link>
-          .
-        </Alert>
-      )}
+
+      <Alert type="success" isVisible={actionStatus === 'success'}>
+        Org roles have been saved!
+      </Alert>
+
+      <Alert
+        type="error"
+        isVisible={actionStatus === 'error'}
+        heading="An error has occured."
+      >
+        {actionErrors.join(', ')} If the error occurs again, please contact{' '}
+        <Link
+          className="text-bold text-ink"
+          href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
+        >
+          Cloud.gov support
+        </Link>
+        .
+      </Alert>
+
       <form onSubmit={onSubmit} name="edit-org-roles-form">
         <fieldset className="usa-fieldset">
           <legend className="usa-legend usa-sr-only margin-bottom-2">
@@ -226,7 +235,11 @@ export function UsersActionsOrgRoles({
               </Button>
             )}
           </div>
-          {actionStatus === 'pending' && <p>submission in progress...</p>}
+          {actionStatus === 'pending' && (
+            <div role="alert">
+              <p>submission in progress...</p>
+            </div>
+          )}
         </fieldset>
       </form>
     </>
diff --git a/src/components/UsersActions/UsersActionsRemoveFromOrg.tsx b/src/components/UsersActions/UsersActionsRemoveFromOrg.tsx
index 672186c9..dedc2de7 100644
--- a/src/components/UsersActions/UsersActionsRemoveFromOrg.tsx
+++ b/src/components/UsersActions/UsersActionsRemoveFromOrg.tsx
@@ -56,19 +56,6 @@ function FormDefault({
   );
 }
 
-function FormSuccess({ user }: { user: UserObj }) {
-  return (
-    <Alert type="success">
-      <strong>{user.username}</strong> has been successfully removed from the
-      org.
-    </Alert>
-  );
-}
-
-function FormError({ errors }: { errors: string[] }) {
-  return <Alert type="error">{errors.join(', ')}</Alert>;
-}
-
 export function UsersActionsRemoveFromOrg({
   user,
   roles,
@@ -126,7 +113,10 @@ export function UsersActionsRemoveFromOrg({
           modalId={`modal-remove-from-org-user-${user.guid}`}
           headingId={modalHeadingId(user)}
         >
-          {actionStatus === 'error' && <FormError errors={actionErrors} />}
+          <Alert type="error" isVisible={actionStatus === 'error'}>
+            {actionErrors.join(', ')}
+          </Alert>
+
           {actionStatus !== 'success' && (
             <FormDefault
               user={user}
@@ -135,7 +125,11 @@ export function UsersActionsRemoveFromOrg({
               actionStatus={actionStatus}
             />
           )}
-          {actionStatus === 'success' && <FormSuccess user={user} />}
+
+          <Alert type="success" isVisible={actionStatus === 'success'}>
+            <strong>{user.username}</strong> has been successfully removed from
+            the org.
+          </Alert>
         </Modal>
       )}
     </>
diff --git a/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx b/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
index 226ad817..7227d7f9 100644
--- a/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
+++ b/src/components/UsersActions/UsersActionsSpaceRoles/UsersActionsSpaceRoles.tsx
@@ -99,7 +99,11 @@ export function UsersActionsSpaceRoles({
   };
 
   if (loadingErrorMessage) {
-    return <Alert type="error">{loadingErrorMessage}</Alert>;
+    return (
+      <Alert type="error" isVisible={true}>
+        {loadingErrorMessage}
+      </Alert>
+    );
   }
 
   if (!dataLoaded) {
@@ -115,21 +119,26 @@ export function UsersActionsSpaceRoles({
           </p>
         </div>
       </div>
-      {actionStatus === 'success' && (
-        <Alert type="success">Changes saved!</Alert>
-      )}
-      {actionStatus === 'error' && (
-        <Alert type="error" heading="An error has occured.">
-          {actionErrors.join(', ')} If the error occurs again, please contact{' '}
-          <Link
-            className="text-bold text-ink"
-            href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
-          >
-            Cloud.gov support
-          </Link>
-          .
-        </Alert>
-      )}
+
+      <Alert type="success" isVisible={actionStatus === 'success'}>
+        Changes saved!
+      </Alert>
+
+      <Alert
+        type="error"
+        isVisible={actionStatus === 'error'}
+        heading="An error has occured."
+      >
+        {actionErrors.join(', ')} If the error occurs again, please contact{' '}
+        <Link
+          className="text-bold text-ink"
+          href={process.env.NEXT_PUBLIC_CLOUD_SUPPORT_URL || '/'}
+        >
+          Cloud.gov support
+        </Link>
+        .
+      </Alert>
+
       <div className="margin-top-3 border-bottom border-top border-base-light">
         <GridList>
           {spaces.map((space: any) => (
@@ -169,7 +178,11 @@ export function UsersActionsSpaceRoles({
           </Button>
         )}
       </div>
-      {actionStatus === 'pending' && <p>Submission in progress...</p>}
+      {actionStatus === 'pending' && (
+        <div role="alert">
+          <p>Submission in progress...</p>
+        </div>
+      )}
     </form>
   );
 }
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
index f687a42c..e851b2a9 100644
--- a/src/components/UsersList/UsersList.tsx
+++ b/src/components/UsersList/UsersList.tsx
@@ -162,13 +162,6 @@ export function UsersList({
 
   return (
     <>
-      {/*
-      aria-live region needs to show up on initial page render.
-      More info: https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
-      */}
-      <div role="region" aria-live="assertive" aria-atomic={true}>
-        {successMsg}
-      </div>
       <OverlayDrawer
         ariaLabel={overlayAriaLabel}
         id="overlay-drawer-manage-users"
@@ -199,21 +192,20 @@ export function UsersList({
         )}
       </OverlayDrawer>
 
-      {successMsg && (
-        <Alert
-          type="success"
-          className="margin-bottom-4"
-          heading="Your changes have been saved."
+      <Alert
+        type="success"
+        isVisible={!!successMsg}
+        className="margin-bottom-4"
+        heading="Your changes have been saved."
+      >
+        {successMsg}{' '}
+        <Button
+          onClick={() => dismissSuccessMsg()}
+          className="usa-button--unstyled text-bold text-ink"
         >
-          {successMsg}{' '}
-          <Button
-            onClick={() => dismissSuccessMsg()}
-            className="usa-button--unstyled text-bold text-ink"
-          >
-            (Dismiss this message.)
-          </Button>
-        </Alert>
-      )}
+          (Dismiss this message.)
+        </Button>
+      </Alert>
 
       <ListSearchInput
         onSubmit={onSearchAction}
@@ -236,7 +228,11 @@ export function UsersList({
           modalId="removeUserSuccess"
           headingId={modalHeadingId(removedUsername)}
         >
-          <Alert type="success" id={modalHeadingId(removedUsername)}>
+          <Alert
+            type="success"
+            id={modalHeadingId(removedUsername)}
+            isVisible={true}
+          >
             <strong>{removedUsername}</strong> has successfully been removed.
           </Alert>
         </Modal>
diff --git a/src/components/uswds/Alert.tsx b/src/components/uswds/Alert.tsx
index 0ac4acbe..608fd086 100644
--- a/src/components/uswds/Alert.tsx
+++ b/src/components/uswds/Alert.tsx
@@ -1,10 +1,17 @@
-// Copied largely from
-// https://github.com/trussworks/react-uswds/ Alert component
+/***
+ * Because Alert components are aria-live regions,
+ * Alerts should always be present on page load
+ * and show/hide themselves using the isVisible prop:
+ * Examples:
+ * Good: <Alert isVisible={status === 'success'}>...
+ * Bad: { status === 'success' && <Alert> ... }
+ ***/
 
 import React from 'react';
 import classnames from 'classnames';
 
 type AlertProps = {
+  isVisible: boolean;
   type: 'emergency' | 'error' | 'info' | 'success' | 'warning';
   heading?: React.ReactNode;
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -19,6 +26,7 @@ export function Alert({
   className,
   heading,
   headingLevel = 'h4',
+  isVisible = false,
   noIcon,
   slim,
   type,
@@ -51,25 +59,26 @@ export function Alert({
   }
 
   return (
-    <div
-      className={classes}
-      role={role}
-      {...defaultProps}
-      aria-label={role === 'region' ? `${type} alert` : ''}
-    >
-      <div className="usa-alert__body">
-        {heading && (
-          <Heading className="usa-alert__heading font-sans-md">
-            {heading}
-          </Heading>
-        )}
-        {children &&
-          (validation ? (
-            children
-          ) : (
-            <p className="usa-alert__text">{children}</p>
-          ))}
-      </div>
+    <div role={role} aria-label={role === 'region' ? `${type} alert` : ''}>
+      {isVisible && (
+        <div className={classes} {...defaultProps}>
+          <div className="usa-alert__body">
+            {heading && (
+              <Heading className="usa-alert__heading font-sans-md">
+                {heading}
+              </Heading>
+            )}
+            {children &&
+              (validation ? (
+                children
+              ) : (
+                // extra padding-left is needed here due to a bug with the $theme-site-margins-width setting
+                <p className="usa-alert__text">{children}</p>
+              ))}
+          </div>
+        </div>
+      )}
+      {!isVisible && ''}
     </div>
   );
 }