diff --git a/client/src/components/Flash/flash.css b/client/src/components/Flash/flash.css
index 88fccd1ad2a..da0514c3fdb 100644
--- a/client/src/components/Flash/flash.css
+++ b/client/src/components/Flash/flash.css
@@ -1,14 +1,20 @@
 /*
-For some reason this `div` is needed in order to overidde
+For some reason this `div` is needed in order to override
 the CSS rules of `ui-components`'s Alert.
 */
-div.flash-message {
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  padding-top: 3px;
-  padding-bottom: 3px;
+div.flash-container {
   position: fixed;
   width: 100%;
   z-index: var(--z-index-flash);
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+}
+div.flash-message {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  @media (max-width: 767.99px) {
+    padding: 0;
+  }
 }
diff --git a/client/src/components/Flash/index.tsx b/client/src/components/Flash/index.tsx
index 0a4c3d84541..d5b3f7fc1fe 100644
--- a/client/src/components/Flash/index.tsx
+++ b/client/src/components/Flash/index.tsx
@@ -1,9 +1,9 @@
 import { Alert, CloseButton, type AlertProps } from '@freecodecamp/ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { FlashState } from '../../redux/types';
 import { removeFlashMessage } from './redux';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import './flash.css';
 
@@ -27,22 +27,33 @@ function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element {
   }
 
   return (
-    <TransitionGroup>
-      <CSSTransition key={id} timeout={500}>
-        <Alert
-          variant={flashStyle}
-          className='flash-message'
-          data-playwright-test-label='flash-message'
-        >
-          {t(message, variables)}
-          <CloseButton
-            onClick={handleClose}
-            label={t('buttons.close')}
-            className='close'
-          />
-        </Alert>
-      </CSSTransition>
-    </TransitionGroup>
+    <Alert
+      key={id}
+      variant={flashStyle}
+      className='flash-container'
+      data-playwright-test-label='flash-message'
+    >
+      <Container>
+        <Row>
+          <Col
+            md={8}
+            mdOffset={2}
+            sm={10}
+            smOffset={1}
+            xs={12}
+            className='flash-message'
+            data-testid='flash-message-content'
+          >
+            {t(message, variables)}
+            <CloseButton
+              onClick={handleClose}
+              label={t('buttons.close')}
+              className='close'
+            />
+          </Col>
+        </Row>
+      </Container>
+    </Alert>
   );
 }