diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 6cdea17..6db82da 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -325,6 +325,7 @@ button:hover > .tooltip {
   box-shadow: none !important;
   border: none !important;
   min-width: 0;
+  padding: 0.5rem 0.75rem;
 
   .text {
     padding: 0;
diff --git a/src/components/NoticeBar.stories.ts b/src/components/NoticeBar.stories.ts
index d9ba9e9..9076189 100644
--- a/src/components/NoticeBar.stories.ts
+++ b/src/components/NoticeBar.stories.ts
@@ -41,8 +41,8 @@ export const CTAControls: Story = {
   render: () => ({
     components: { NoticeBar, PrimaryButton, LinkButton },
     template: `
-      <notice-bar>
-        This form is dirty.
+      <notice-bar type="warning">
+        You have unsaved changes.
 
         <template #cta>
           <link-button>Revert changes</link-button>
@@ -54,7 +54,7 @@ export const CTAControls: Story = {
   parameters: {
     docs: {
       source: {
-        code: '<notice-bar>\n  This form is dirty.\n\n  <template #cta>\n    <link-button>Revert changes</link-button>\n    <primary-button size="small">Save changes</primary-button>\n  </template>\n</notice-bar>',
+        code: '<notice-bar type="warning">\n  You have unsaved changes.\n\n  <template #cta>\n    <link-button>Revert changes</link-button>\n    <primary-button size="small">Save changes</primary-button>\n  </template>\n</notice-bar>',
       },
     },
   },
diff --git a/src/components/NoticeBar.vue b/src/components/NoticeBar.vue
index 0bdd9aa..f547ce5 100644
--- a/src/components/NoticeBar.vue
+++ b/src/components/NoticeBar.vue
@@ -25,15 +25,17 @@ const isError = computed(() => props.type === NoticeBarTypes.Critical);
 
 <template>
   <div :class="{ [type]: type }" class="notice notice-bar" :data-testid="dataTestid">
-    <span class="icon">
-      <notice-info-icon v-if="isInfo" />
-      <notice-success-icon v-if="isSuccess" />
-      <notice-warning-icon v-if="isWarning" />
-      <notice-critical-icon v-if="isError" />
-    </span>
-    <span class="body">
-      <slot />
-    </span>
+    <div class="notice-bar-content">
+      <span class="icon">
+        <notice-info-icon v-if="isInfo" />
+        <notice-success-icon v-if="isSuccess" />
+        <notice-warning-icon v-if="isWarning" />
+        <notice-critical-icon v-if="isError" />
+      </span>
+      <span class="body">
+        <slot />
+      </span>
+    </div>
     <div class="cta" v-if="$slots?.cta">
       <slot name="cta" />
     </div>
@@ -43,42 +45,51 @@ const isError = computed(() => props.type === NoticeBarTypes.Critical);
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
-.icon {
+.notice {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-}
+  border-radius: 1rem;
+  border: 0.0625rem solid;
+  padding: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 
-.body {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 132%;
-  color: var(--colour-ti-secondary);
-  flex-grow: 1;
+  &:has(.cta) {
+    padding: 0.75rem 0.75rem 0.75rem 1rem;
+  }
 }
 
-.cta {
+.notice-bar-content {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-
-.notice {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
   justify-content: start;
-  align-items: center;
-  border-radius: 1rem;
   gap: 0.5rem;
-  border: 0.0625rem solid;
-  padding: 1rem;
+  flex-wrap: wrap;
 
-  &:has(.cta) {
-    padding: 0.75rem 0.75rem 0.75rem 1rem;
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .body {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 132%;
+    color: var(--colour-ti-secondary);
+    flex-grow: 1;
   }
 }
 
+.cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
 .info {
   background-color: var(--colour-primary-soft);
   border-color: var(--colour-primary-default);