diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.html b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.html
index bbe3435a..5c831870 100644
--- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.html
@@ -9,7 +9,7 @@ <h1 class="title">{{ title }}</h1>
   </div>
   <div
     [ngClass]="{
-      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-2': this.layout$ === 'two-column',
       'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
       'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
     }"
diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss
index b437f705..8e952314 100644
--- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss
+++ b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss
@@ -1,6 +1,6 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
@@ -8,7 +8,7 @@
 
 .psdk-grid-filter-2 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;