diff --git a/packages/react-component-library/src/components/Alert/Alert.tsx b/packages/react-component-library/src/components/Alert/Alert.tsx
index 187950d6e..a62f344a8 100644
--- a/packages/react-component-library/src/components/Alert/Alert.tsx
+++ b/packages/react-component-library/src/components/Alert/Alert.tsx
@@ -13,7 +13,6 @@ import { StyledIcon } from './partials/StyledIcon'
 import { StyledContent } from './partials/StyledContent'
 import { StyledTitle } from './partials/StyledTitle'
 import { StyledDescription } from './partials/StyledDescription'
-import { StyledFooter } from './partials/StyledFooter'
 import { StyledCloseButton } from './partials/StyledCloseButton'
 import { useExternalId } from '../../hooks/useExternalId'
 import { ValueOf } from '../../helpers'
@@ -84,6 +83,7 @@ export const Alert = ({
       aria-labelledby={title ? titleId : undefined}
       role="alert"
       $hideBorder={hideBorder}
+      $hideDismiss={hideDismiss}
       {...rest}
     >
       <StyledIcon
@@ -100,14 +100,10 @@ export const Alert = ({
           </StyledTitle>
         )}
         <StyledDescription id={descriptionId}>{children}</StyledDescription>
-        <StyledFooter>
-          {!hideDismiss && (
-            <StyledCloseButton onClick={handleOnClose}>
-              Dismiss
-            </StyledCloseButton>
-          )}
-        </StyledFooter>
       </StyledContent>
+      {!hideDismiss && (
+        <StyledCloseButton onClick={handleOnClose}>Dismiss</StyledCloseButton>
+      )}
     </StyledAlert>
   )
 }
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx b/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx
index 9fe451344..4c16aeba1 100644
--- a/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx
+++ b/packages/react-component-library/src/components/Alert/partials/StyledAlert.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { mq, spacing, shadow } from '@royalnavy/design-tokens'
+import { spacing, shadow, mq } from '@royalnavy/design-tokens'
 
 import { AlertVariantType } from '../Alert'
 
@@ -16,6 +16,7 @@ import {
 interface StyledAlertProps {
   $variant: AlertVariantType
   $hideBorder?: boolean
+  $hideDismiss?: boolean
 }
 
 const STATE_VARIANT_MAP = {
@@ -42,18 +43,21 @@ const getBorderStyles = ({ $hideBorder }: StyledAlertProps) => {
 }
 
 export const StyledAlert = styled.div<StyledAlertProps>`
-  background-color: ${ALERT_BACKGROUND_COLOR};
-  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} ${spacing('6')};
   position: relative;
   display: flex;
-  align-items: flex-start;
-
-  ${getBorderStyles}
+  align-items: stretch;
+  flex-wrap: wrap;
+  background-color: ${ALERT_BACKGROUND_COLOR};
+  padding: ${spacing('4')};
+  padding-left: ${spacing('10')};
 
   ${mq({ gte: 'xs' })`
-    padding-right: ${spacing('18')};
+    flex-wrap: unset;
+    padding: ${spacing('4')};
   `}
 
+  ${getBorderStyles}
+
   &::before {
     content: '';
     position: absolute;
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx b/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx
index 79751d8bc..500edfaee 100644
--- a/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx
+++ b/packages/react-component-library/src/components/Alert/partials/StyledCloseButton.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { breakpoint, fontSize, spacing } from '@royalnavy/design-tokens'
+import { fontSize, spacing, mq } from '@royalnavy/design-tokens'
 
 import {
   ALERT_CLOSE_COLOR,
@@ -9,26 +9,22 @@ import {
 } from '../constants'
 
 export const StyledCloseButton = styled.button`
-  margin-left: auto;
+  flex-basis: 100%;
   border: none;
   font-size: ${fontSize('base')};
   color: ${ALERT_CLOSE_COLOR};
   font-weight: 600;
   transition: all 0.3s;
   border-radius: 2px;
-  padding: ${spacing('4')} ${spacing('10')};
-  background-color: ${ALERT_CLOSE_BACKGROUND_COLOR_HOVER};
+  padding: ${spacing('4')};
+  margin-top: ${spacing('4')};
+  background-color: ${ALERT_CLOSE_BACKGROUND_COLOR};
+  text-align: center;
 
-  @media only screen and (min-width: ${breakpoint('xs').breakpoint}) {
-    position: absolute;
-    background-color: ${ALERT_CLOSE_BACKGROUND_COLOR};
-    margin-top: 0;
-    top: ${spacing('4')};
-    right: ${spacing('4')};
-    bottom: ${spacing('4')};
-    padding: ${spacing('2')};
-    width: ${spacing('17')};
-  }
+  ${mq({ gte: 'xs' })`
+    flex-basis: auto;
+    width: ${spacing('18')};
+  `}
 
   &:hover {
     background-color: ${ALERT_CLOSE_BACKGROUND_COLOR_HOVER};
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx b/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx
index 8534a9a1e..9584588af 100644
--- a/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx
+++ b/packages/react-component-library/src/components/Alert/partials/StyledContent.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { spacing } from '@royalnavy/design-tokens'
 
 export const StyledContent = styled.div`
-  width: 100%;
-  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} 0;
+  flex: 1 1 auto;
+  padding: ${spacing('4')} ${spacing('4')} ${spacing('4')} ${spacing('2')};
+  min-width: 0;
 `
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledFooter.tsx b/packages/react-component-library/src/components/Alert/partials/StyledFooter.tsx
deleted file mode 100644
index 004aa589f..000000000
--- a/packages/react-component-library/src/components/Alert/partials/StyledFooter.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-import { breakpoint, spacing } from '@royalnavy/design-tokens'
-
-import { ALERT_FOOTER_BORDER_COLOR } from '../constants'
-
-export const StyledFooter = styled.div`
-  border-top: ${spacing('px')} solid ${ALERT_FOOTER_BORDER_COLOR};
-  padding-top: ${spacing('6')};
-  margin-top: ${spacing('6')};
-
-  @media only screen and (min-width: ${breakpoint('xs').breakpoint}) {
-    border-top: none;
-    padding-top: 0;
-    margin-top: 0;
-  }
-`
diff --git a/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx b/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx
index 55ca1faa4..b0e12dfa8 100644
--- a/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx
+++ b/packages/react-component-library/src/components/Alert/partials/StyledIcon.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { spacing } from '@royalnavy/design-tokens'
+import { spacing, mq } from '@royalnavy/design-tokens'
 
 import { AlertVariantType } from '../Alert'
 
@@ -24,8 +24,12 @@ const ICON_VARIANT_MAP = {
 
 export const StyledIcon = styled.div<StyledIconProps>`
   display: inline-flex;
-  align-self: flex-start;
+  align-self: stretch;
+  flex: 0 0 auto;
   color: ${({ $variant }) => ICON_VARIANT_MAP[$variant]};
-  padding: ${spacing('4')} ${spacing('5')} ${spacing('4')} ${spacing('6')};
   transform: translateY(1px);
+
+  ${mq({ gte: 'xs' })`
+    padding: ${spacing('4')} ${spacing('4')} 0 ${spacing('8')};
+  `}
 `