diff --git a/addon/components/o-s-s/banner.hbs b/addon/components/o-s-s/banner.hbs
index 63a77dd20..d612e8919 100644
--- a/addon/components/o-s-s/banner.hbs
+++ b/addon/components/o-s-s/banner.hbs
@@ -1,30 +1,38 @@
-<div class="upf-banner fx-1 fx-row fx-xalign-center fx-gap-px-12 {{this.modifierClasses}}"
-            ...attributes>
-  {{#if (has-block "custom-icon")}}
-    <div>{{yield to="custom-icon"}}</div>
-  {{else if @icon}}
-    <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}}
-               class="upf-badge upf-badge--shape-round upf-badge--size-md" />
-  {{else if @image}}
-    <img class="upf-badge upf-badge--size-md upf-badge--shape-round" src={{@image}} alt="banner" />
-  {{/if}}
-  <div class="fx-col fx-1 {{if (not-eq @size 'sm') 'fx-gap-px-3'}}">
-    {{#if @title}}
-      <div class="fx-row fx-xalign-center">
-        <span class="font-weight-semibold text-size-5 font-color-gray-900">{{@title}}</span>
-        {{#if (has-block "title-suffix")}}
-          {{yield to="title-suffix"}}
-        {{/if}}
-      </div>
-    {{/if}}
-    {{#if @subtitle}}
-      <span class="text-size-4 font-color-gray-500">{{@subtitle}}</span>
+<div class="fx-col fx-gap-px-6">
+  <div class="upf-banner fx-1 fx-row fx-xalign-center fx-gap-px-12 {{this.modifierClasses}}" ...attributes>
+    {{#if (has-block "custom-icon")}}
+      <div>{{yield to="custom-icon"}}</div>
+    {{else if @icon}}
+      <OSS::Icon
+        @style={{fa-icon-style @icon}}
+        @icon={{fa-icon-value @icon}}
+        class="upf-badge upf-badge--shape-round upf-badge--size-md"
+      />
+    {{else if @image}}
+      <img class="upf-badge upf-badge--size-md upf-badge--shape-round" src={{@image}} alt="banner" />
     {{/if}}
-    {{#if (has-block "secondary-actions")}}
-      {{yield to="secondary-actions"}}
+    <div class="fx-col fx-1 {{if (not-eq @size 'sm') 'fx-gap-px-3'}}">
+      {{#if @title}}
+        <div class="fx-row fx-xalign-center">
+          <span class="font-weight-semibold text-size-5 font-color-gray-900">{{@title}}</span>
+          {{#if (has-block "title-suffix")}}
+            {{yield to="title-suffix"}}
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if @subtitle}}
+        <span class="text-size-4 font-color-gray-500">{{@subtitle}}</span>
+      {{/if}}
+      {{#if (has-block "secondary-actions")}}
+        {{yield to="secondary-actions"}}
+      {{/if}}
+    </div>
+    {{#if (has-block "actions")}}
+      <div>{{yield to="actions"}}</div>
     {{/if}}
   </div>
-  {{#if (has-block "actions")}}
-    <div>{{yield to="actions"}}</div>
+
+  {{#if @feedbackMessage.value}}
+    <span class="font-color-error-500">{{@feedbackMessage.value}}</span>
   {{/if}}
-</div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/banner.stories.js b/addon/components/o-s-s/banner.stories.js
index e56161f60..bb9bf76fb 100644
--- a/addon/components/o-s-s/banner.stories.js
+++ b/addon/components/o-s-s/banner.stories.js
@@ -77,6 +77,16 @@ export default {
         type: 'boolean'
       }
     },
+    feedbackMessage: {
+      description: 'An error message that will be displayed below the banner.',
+      table: {
+        type: {
+          summary: '{ type: string, value: string }'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     size: {
       description:
         'Allows to adjust the size of the component. Currently available options are `sm`, `md` and `lg`. Defaults to `md`.',
diff --git a/addon/components/o-s-s/banner.ts b/addon/components/o-s-s/banner.ts
index 97623b832..f745963e5 100644
--- a/addon/components/o-s-s/banner.ts
+++ b/addon/components/o-s-s/banner.ts
@@ -1,5 +1,6 @@
 import { isBlank } from '@ember/utils';
 import Component from '@glimmer/component';
+import type { FeedbackMessage } from './input-container';
 
 type SizeType = 'sm' | 'md' | 'lg';
 
@@ -8,6 +9,7 @@ interface OSSBannerArgs {
   plain?: boolean;
   selected?: boolean;
   disabled?: boolean;
+  feedbackMessage?: FeedbackMessage;
 }
 
 const SIZE_CLASSES: Record<string, string> = {
@@ -24,6 +26,10 @@ export default class OSSBanner extends Component<OSSBannerArgs> {
     return this.args.selected ? 'upf-banner--selected' : '';
   }
 
+  get errorClass(): string {
+    return this.args.feedbackMessage ? 'upf-banner--error' : '';
+  }
+
   get plainClass(): string {
     return this.args.plain ? 'background-color-gray-50' : 'background-color-white';
   }
@@ -33,7 +39,7 @@ export default class OSSBanner extends Component<OSSBannerArgs> {
   }
 
   get modifierClasses(): string {
-    return [this.disabledClass, this.selectedClass, this.plainClass, this.sizeClass]
+    return [this.disabledClass, this.selectedClass, this.plainClass, this.sizeClass, this.errorClass]
       .filter((mc) => !isBlank(mc))
       .join(' ');
   }
diff --git a/app/styles/banner.less b/app/styles/banner.less
index 62e2d904d..498a86c73 100644
--- a/app/styles/banner.less
+++ b/app/styles/banner.less
@@ -9,6 +9,10 @@
     transition: ease-in-out 0.25s;
   }
 
+  &--error {
+    border: 1px solid var(--color-error-500);
+  }
+
   &--disabled {
     background-color: var(--color-gray-100);
     border: 1px solid var(--color-border-default);
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index 3d7e413b5..7bc5dc8b4 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -296,6 +296,24 @@
           </:actions>
         </OSS::Banner>
       </div>
+      <div class="fx-row fx-gap-px-12">
+        <OSS::Banner
+          @title="Error"
+          @subtitle="A banner with a feedback message"
+          @feedbackMessage={{hash type="error" value="This is a feedback message"}}
+        />
+        <OSS::Banner
+          @icon="fas fa-alicorn"
+          @title="Another error"
+          @selected={{true}}
+          @subtitle="Another banner with a feedback message"
+          @feedbackMessage={{hash type="error" value="This is another feedback message"}}
+        >
+          <:actions>
+            <OSS::RadioButton @selected={{true}} />
+          </:actions>
+        </OSS::Banner>
+      </div>
     </div>
   </div>
 
diff --git a/tests/integration/components/o-s-s/banner-test.ts b/tests/integration/components/o-s-s/banner-test.ts
index 878ca38b3..3d80eafa3 100644
--- a/tests/integration/components/o-s-s/banner-test.ts
+++ b/tests/integration/components/o-s-s/banner-test.ts
@@ -152,8 +152,36 @@ module('Integration | Component | o-s-s/banner', function (hooks) {
 
     test("when the value is undefined, it doesn't add the size class", async function (assert) {
       await render(hbs`<OSS::Banner />`);
+
       assert.dom('.upf-banner.upf-banner--size-sm').doesNotExist();
       assert.dom('.upf-banner.upf-banner--size-lg').doesNotExist();
     });
   });
+
+  module('@feedbackMessage parameter', function () {
+    hooks.beforeEach(function () {
+      this.feedbackMessage = {
+        type: 'error',
+        value: 'This is a feedback message'
+      };
+    });
+
+    test('When parameter is passed, it adds upf-banner--error class', async function (assert) {
+      await render(hbs`<OSS::Banner @feedbackMessage={{this.feedbackMessage}} />`);
+
+      assert.dom('.upf-banner.upf-banner--error').exists();
+    });
+
+    test('When parameter is passed, the feedback message is swhown', async function (assert) {
+      await render(hbs`<OSS::Banner @feedbackMessage={{this.feedbackMessage}} />`);
+
+      assert.dom('.font-color-error-500').hasText('This is a feedback message');
+    });
+
+    test('When parameter is not passed, it does not add upf-banner--error class', async function (assert) {
+      await render(hbs`<OSS::Banner />`);
+
+      assert.dom('.upf-banner.upf-banner--error').doesNotExist();
+    });
+  });
 });