diff --git a/app/component-library/components/Banners/Banner/Banner.test.tsx b/app/component-library/components/Banners/Banner/Banner.test.tsx
new file mode 100644
index 00000000000..94ba52874eb
--- /dev/null
+++ b/app/component-library/components/Banners/Banner/Banner.test.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+import Banner from './Banner';
+import Text from '../../Texts/Text/Text';
+import { BannerAlertSeverity } from './variants/BannerAlert/BannerAlert.types';
+import { BannerVariant } from './Banner.types';
+import { ButtonVariants } from '../../Buttons/Button';
+import { IconName } from '../../Icons/Icon';
+import { ButtonIconSizes, ButtonIconVariants } from '../../Buttons/ButtonIcon';
+import { TESTID_BANNER_CLOSE_BUTTON_ICON } from './foundation/BannerBase/BannerBase.constants';
+
+describe('Banner', () => {
+  it('should render correctly', () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly with a start accessory', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        startAccessory={<Text>Test Start accessory</Text>}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Start accessory')).toBeDefined();
+  });
+
+  it('should render correctly with an action button', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        actionButtonProps={{
+          label: 'Test Action Button',
+          onPress: () => jest.fn(),
+          variant: ButtonVariants.Secondary,
+        }}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
+  });
+
+  it('should render correctly with a close button', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        actionButtonProps={{
+          label: 'Test Action Button',
+          onPress: () => jest.fn(),
+          variant: ButtonVariants.Secondary,
+        }}
+        closeButtonProps={{
+          onPress: () => jest.fn(),
+          iconName: IconName.Close,
+          variant: ButtonIconVariants.Primary,
+          size: ButtonIconSizes.Sm,
+        }}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
+    expect(
+      await wrapper.queryByTestId(TESTID_BANNER_CLOSE_BUTTON_ICON),
+    ).toBeDefined();
+  });
+});
diff --git a/app/component-library/components/Banners/Banner/README.md b/app/component-library/components/Banners/Banner/README.md
index a2e2beeeeab..a8e5ce7e2dd 100644
--- a/app/component-library/components/Banners/Banner/README.md
+++ b/app/component-library/components/Banners/Banner/README.md
@@ -114,6 +114,14 @@ Optional prop to control the close button's props.
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | [ButtonIconProps](../../../../Buttons/ButtonIcon/ButtonIcon.types.ts)                                  | No                                                     |
 
+### `children`
+
+Optional prop to add children components to the Banner
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| React.ReactNode                                     | No                                                     |
+
 ## Usage
 
 ```javascript
diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
new file mode 100644
index 00000000000..11e7d17f6e3
--- /dev/null
+++ b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
@@ -0,0 +1,412 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner should render correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#D7384719",
+      "borderColor": "#D73847",
+      "borderLeftWidth": 4,
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "padding": 12,
+      "paddingLeft": 8,
+    }
+  }
+  testID="banneralert"
+  variant="Alert"
+>
+  <View
+    style={
+      Object {
+        "marginRight": 8,
+      }
+    }
+  >
+    <SvgMock
+      color="#D73847"
+      height={24}
+      name="Danger"
+      style={
+        Object {
+          "height": 24,
+          "width": 24,
+        }
+      }
+      width={24}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Hello Error Banner World
+    </Text>
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      This is nothing but a test of the emergency broadcast system.
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Banner should render correctly with a close button 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#D7384719",
+      "borderColor": "#D73847",
+      "borderLeftWidth": 4,
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "padding": 12,
+      "paddingLeft": 8,
+    }
+  }
+  testID="banneralert"
+  variant="Alert"
+>
+  <View
+    style={
+      Object {
+        "marginRight": 8,
+      }
+    }
+  >
+    <SvgMock
+      color="#D73847"
+      height={24}
+      name="Danger"
+      style={
+        Object {
+          "height": 24,
+          "width": 24,
+        }
+      }
+      width={24}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Hello Error Banner World
+    </Text>
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      This is nothing but a test of the emergency broadcast system.
+    </Text>
+    <TouchableOpacity
+      activeOpacity={0.5}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "borderColor": "#0376C9",
+          "borderRadius": 0,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": "auto",
+          "justifyContent": "center",
+          "paddingHorizontal": 0,
+        }
+      }
+      variant="Secondary"
+    >
+      <Text
+        style={
+          Object {
+            "color": "#0376C9",
+            "fontFamily": "Euclid Circular B",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Test Action Button
+      </Text>
+    </TouchableOpacity>
+  </View>
+  <View
+    style={
+      Object {
+        "marginLeft": 12,
+      }
+    }
+  >
+    <TouchableOpacity
+      accessible={true}
+      activeOpacity={0.5}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "height": 24,
+          "justifyContent": "center",
+          "width": 24,
+        }
+      }
+      testID="banner-close-button-icon"
+    >
+      <SvgMock
+        color="#0376C9"
+        height={16}
+        name="Close"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+        width={16}
+      />
+    </TouchableOpacity>
+  </View>
+</View>
+`;
+
+exports[`Banner should render correctly with a start accessory 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#D7384719",
+      "borderColor": "#D73847",
+      "borderLeftWidth": 4,
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "padding": 12,
+      "paddingLeft": 8,
+    }
+  }
+  testID="banneralert"
+  variant="Alert"
+>
+  <View
+    style={
+      Object {
+        "marginRight": 8,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Test Start accessory
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Hello Error Banner World
+    </Text>
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      This is nothing but a test of the emergency broadcast system.
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Banner should render correctly with an action button 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#D7384719",
+      "borderColor": "#D73847",
+      "borderLeftWidth": 4,
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "padding": 12,
+      "paddingLeft": 8,
+    }
+  }
+  testID="banneralert"
+  variant="Alert"
+>
+  <View
+    style={
+      Object {
+        "marginRight": 8,
+      }
+    }
+  >
+    <SvgMock
+      color="#D73847"
+      height={24}
+      name="Danger"
+      style={
+        Object {
+          "height": 24,
+          "width": 24,
+        }
+      }
+      width={24}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Hello Error Banner World
+    </Text>
+    <Text
+      style={
+        Object {
+          "color": "#24272A",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      This is nothing but a test of the emergency broadcast system.
+    </Text>
+    <TouchableOpacity
+      activeOpacity={0.5}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "borderColor": "#0376C9",
+          "borderRadius": 0,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": "auto",
+          "justifyContent": "center",
+          "paddingHorizontal": 0,
+        }
+      }
+      variant="Secondary"
+    >
+      <Text
+        style={
+          Object {
+            "color": "#0376C9",
+            "fontFamily": "Euclid Circular B",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Test Action Button
+      </Text>
+    </TouchableOpacity>
+  </View>
+</View>
+`;
diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
index bf13358249d..b1ae89b3eaa 100644
--- a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
@@ -17,6 +17,9 @@ import { SAMPLE_ICON_PROPS } from '../../../../Icons/Icon/Icon.constants';
 // Internal dependencies.
 import { BannerBaseProps } from './BannerBase.types';
 
+// Test IDs
+export const TESTID_BANNER_CLOSE_BUTTON_ICON = 'banner-close-button-icon';
+
 // Defaults
 export const DEFAULT_BANNERBASE_TITLE_TEXTVARIANT = TextVariant.BodyLGMedium;
 export const DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT = TextVariant.BodyMD;
diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
index 3e2954266b9..ea46b42f796 100644
--- a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
@@ -22,6 +22,7 @@ import {
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT,
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE,
   DEFAULT_BANNERBASE_CLOSEBUTTON_ICONNAME,
+  TESTID_BANNER_CLOSE_BUTTON_ICON,
 } from './BannerBase.constants';
 
 const BannerBase: React.FC<BannerBaseProps> = ({
@@ -32,6 +33,7 @@ const BannerBase: React.FC<BannerBaseProps> = ({
   actionButtonProps,
   onClose,
   closeButtonProps,
+  children,
   ...props
 }) => {
   const { styles } = useStyles(styleSheet, { style });
@@ -63,10 +65,12 @@ const BannerBase: React.FC<BannerBaseProps> = ({
             {...actionButtonProps}
           />
         )}
+        {children}
       </View>
       {(onClose || closeButtonProps) && (
         <View style={styles.endAccessory}>
           <ButtonIcon
+            testID={TESTID_BANNER_CLOSE_BUTTON_ICON}
             variant={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT}
             size={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE}
             onPress={onClose || closeButtonProps?.onPress || noop}
diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.types.ts b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.types.ts
index 806e1109244..a0bc1445887 100644
--- a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.types.ts
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.types.ts
@@ -38,6 +38,10 @@ export interface BannerBaseProps extends ViewProps {
    * Optional prop to control the close button's props.
    */
   closeButtonProps?: ButtonIconProps;
+  /**
+   * Optional prop to add children components to the Banner.
+   */
+  children?: React.ReactNode;
 }
 
 /**