diff --git a/packages/styles/src/notification.scss b/packages/styles/src/notification.scss
index 671df68cad..038a7ea1e9 100644
--- a/packages/styles/src/notification.scss
+++ b/packages/styles/src/notification.scss
@@ -158,7 +158,7 @@ $block: #{$fd-namespace}-notification;
 
   &__footer {
     @include fd-reset();
-    @include fd-flex();
+    @include fd-flex-vertical-center();
   }
 
   &__footer-content {
@@ -198,15 +198,6 @@ $block: #{$fd-namespace}-notification;
     }
   }
 
-  // Banner Notification
-  &--banner {
-    @include fd-set-position-right(2rem);
-    
-    top: 2rem;
-    position: absolute;
-    box-shadow: var(--sapContent_Shadow2);
-  }
-
   .#{$block}__link {
     margin-inline-start: 1rem;
   }
@@ -344,6 +335,32 @@ $block: #{$fd-namespace}-notification;
     }
   }
 
+  // Banner
+  &-banner {
+    @include fd-reset();
+    @include fd-set-position-right(0);
+
+    @include fd-flex(column) {
+      gap: 0.5rem;
+    };
+  
+    top: 0;
+    align-items: flex-end;
+    position: absolute;
+    margin-inline-end: 2rem;
+    margin-block-start: 2rem;
+    max-width: var(--fdNotification_Popover_Max_Width, 26rem);
+
+    .#{$block} {
+      width: 100%;
+      box-shadow: var(--sapContent_Shadow2);
+
+      @include fd-media-sm() {
+        --fdNotification_Popover_Max_Width: 24rem;
+      }
+    }
+  }
+
   // Compact Mode
   @include fd-compact-and-condensed() {
     --fdNotification_Content_Gap: 0.5rem;
diff --git a/packages/styles/stories/Components/notification/banner.example.html b/packages/styles/stories/Components/notification/banner.example.html
index a8e39b5db5..e11d62a3dc 100644
--- a/packages/styles/stories/Components/notification/banner.example.html
+++ b/packages/styles/stories/Components/notification/banner.example.html
@@ -1,28 +1,59 @@
-<div style="position: relative; width: 100%; min-height: 300px; border: 2px solid #a5a2a2">
-    <div class="fd-notification fd-notification--banner" tabindex="0"  style="max-width: 500px;">
-        <div class="fd-notification__body">
-            <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
-                <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
-            </span>
-            <div class="fd-notification__content">
-                <div class="fd-notification__header">
-                    <span class="sap-icon sap-icon--error sap-icon--color-negative"></span>
-                    <h4 class="fd-notification__title fd-notification__title--unread">Notification Title (unread)</h4>
+<div style="position: relative; width: 100%; min-height: 600px; border: 2px solid #a5a2a2">
+    <div class="fd-notification-banner">
+        <div class="fd-notification" tabindex="0">
+            <div class="fd-notification__body">
+                <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
+                    <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
+                </span>
+                <div class="fd-notification__content">
+                    <div class="fd-notification__header">
+                        <h4 class="fd-notification__title fd-notification__title--unread">Sales Order #65665 for Lorem Inc is about to expire</h4>
+                    </div>
+                    <p class="fd-notification__paragraph">Sales order expires in 1 day</p>
+                    <div class="fd-notification__footer">
+                        <span class="fd-notification__footer-content">Lorem</span>
+                        <span class="fd-notification__separator"></span>
+                        <span class="fd-notification__footer-content">Sales</span>
+                        <span class="fd-notification__separator"></span>
+                        <span class="fd-notification__footer-content">11:11 AM</span>
+                    </div>
                 </div>
-                <p class="fd-notification__paragraph">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
-                <div class="fd-notification__footer">
-                    <span class="fd-notification__footer-content">Product Name</span>
-                    <span class="fd-notification__separator"></span>
-                    <span class="fd-notification__footer-content">Feature Name</span>
-                    <span class="fd-notification__separator"></span>
-                    <span class="fd-notification__footer-content">11:11</span>
-                    <a href="#" class="fd-link fd-notification__link" tabindex="0"><span class="fd-link__content">More</span></a>
+                <div class="fd-notification__actions">
+                    <button class="fd-button fd-button--transparent" aria-label="More">
+                        <i class="sap-icon--overflow"></i>
+                    </button>
+                    <button class="fd-button fd-button--transparent " aria-label="Close">
+                        <i class="sap-icon--decline"></i>
+                    </button>
                 </div>
             </div>
-            <div class="fd-notification__actions">
-                <button class="fd-button fd-button--transparent " aria-label="Close">
-                    <i class="sap-icon--decline"></i>
-                </button>
+        </div>
+        <div class="fd-notification" tabindex="0">
+            <div class="fd-notification__body">
+                <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
+                    <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
+                </span>
+                <div class="fd-notification__content">
+                    <div class="fd-notification__header">
+                        <h4 class="fd-notification__title fd-notification__title--unread">Notification Title Lorem Ipsum</h4>
+                    </div>
+                    <p class="fd-notification__paragraph">Description of notification topic</p>
+                    <div class="fd-notification__footer">
+                        <span class="fd-notification__footer-content">Product Name</span>
+                        <span class="fd-notification__separator"></span>
+                        <span class="fd-notification__footer-content">Feature Name</span>
+                        <span class="fd-notification__separator"></span>
+                        <span class="fd-notification__footer-content">11:12 AM</span>
+                    </div>
+                </div>
+                <div class="fd-notification__actions">
+                    <button class="fd-button fd-button--transparent" aria-label="More">
+                        <i class="sap-icon--overflow"></i>
+                    </button>
+                    <button class="fd-button fd-button--transparent " aria-label="Close">
+                        <i class="sap-icon--decline"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/packages/styles/stories/Components/notification/notification-group.example.html b/packages/styles/stories/Components/notification/notification-group.example.html
index 47d4e8450d..54a6f049cb 100644
--- a/packages/styles/stories/Components/notification/notification-group.example.html
+++ b/packages/styles/stories/Components/notification/notification-group.example.html
@@ -10,6 +10,7 @@
                 onclick="onPopoverClick('popoverNotificationsGroup');"
                 role="button">
                 <i class="sap-icon--bell" role="presentation"></i>
+                <span class="fd-button__badge">30</span>
             </button>
         </div>
         <div class="fd-popover__body" aria-hidden="false" id="popoverNotificationsGroup">
@@ -23,7 +24,7 @@ <h2 class="fd-title fd-title--h4 fd-toolbar__title">Notifications (30)</h2>
                             <i class="sap-icon--sort"></i>
                         </button>
                         <button aria-label="Add to cart" class="fd-button fd-button--transparent">
-                            <i class="sap-icon--settings"></i>
+                            <i class="sap-icon--action-settings"></i>
                         </button>
                     </div>
     
diff --git a/packages/styles/stories/Components/notification/primary.example.html b/packages/styles/stories/Components/notification/primary.example.html
index b015307a79..73dbb799ec 100644
--- a/packages/styles/stories/Components/notification/primary.example.html
+++ b/packages/styles/stories/Components/notification/primary.example.html
@@ -40,7 +40,7 @@ <h4 class="fd-notification__title fd-notification__title--unread">Notification T
         <div class="fd-notification__content">
             <div class="fd-notification__header">
                 <span class="sap-icon sap-icon--sys-enter-2 sap-icon--color-positive"></span>
-                <h4 class="fd-notification__title">Notification Title Notification Title (unread) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
+                <h4 class="fd-notification__title">Notification Title Notification Title (read) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
             </div>
             <p class="fd-notification__paragraph">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</p>
             <div class="fd-notification__footer">
@@ -96,12 +96,12 @@ <h4 class="fd-notification__title">Notification Title</h4>
 
 <div class="fd-notification" tabindex="0">
     <div class="fd-notification__body">
-        <span class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
+        <span class="fd-avatar fd-avatar--circle fd-avatar--accent-color-10 fd-avatar--xs" role="img" aria-label="Avatar">
             <i role="presentation" aria-hidden="true" aria-label="Product placeholder" class="fd-avatar__icon sap-icon--product"></i>
         </span>
         <div class="fd-notification__content">
             <div class="fd-notification__header">
-                <h4 class="fd-notification__title fd-notification__title--unread">Notification Title</h4>
+                <h4 class="fd-notification__title fd-notification__title--unread">Notification Title (unread)</h4>
             </div>
             <p class="fd-notification__paragraph">Description of notification topic</p>
             <div class="fd-notification__footer">
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 0ee2f3c89b..85658d8710 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -32709,31 +32709,62 @@ exports[`Check stories > Components/Micro Process Flow > Story OverflowMicroProc
 `;
 
 exports[`Check stories > Components/Notifications > Story NotificationBanner > Should match snapshot 1`] = `
-"<div style=\\"position: relative; width: 100%; min-height: 300px; border: 2px solid #a5a2a2\\">
-    <div class=\\"fd-notification fd-notification--banner\\" tabindex=\\"0\\"  style=\\"max-width: 500px;\\">
-        <div class=\\"fd-notification__body\\">
-            <span class=\\"fd-avatar fd-avatar--accent-color-10 fd-avatar--xs\\" role=\\"img\\" aria-label=\\"Avatar\\">
-                <i role=\\"presentation\\" aria-hidden=\\"true\\" aria-label=\\"Product placeholder\\" class=\\"fd-avatar__icon sap-icon--product\\"></i>
-            </span>
-            <div class=\\"fd-notification__content\\">
-                <div class=\\"fd-notification__header\\">
-                    <span class=\\"sap-icon sap-icon--error sap-icon--color-negative\\"></span>
-                    <h4 class=\\"fd-notification__title fd-notification__title--unread\\">Notification Title (unread)</h4>
-                </div>
-                <p class=\\"fd-notification__paragraph\\">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
-                <div class=\\"fd-notification__footer\\">
-                    <span class=\\"fd-notification__footer-content\\">Product Name</span>
-                    <span class=\\"fd-notification__separator\\"></span>
-                    <span class=\\"fd-notification__footer-content\\">Feature Name</span>
-                    <span class=\\"fd-notification__separator\\"></span>
-                    <span class=\\"fd-notification__footer-content\\">11:11</span>
-                    <a href=\\"#\\" class=\\"fd-link fd-notification__link\\" tabindex=\\"0\\"><span class=\\"fd-link__content\\">More</span></a>
-                </div>
-            </div>
-            <div class=\\"fd-notification__actions\\">
-                <button class=\\"fd-button fd-button--transparent \\" aria-label=\\"Close\\">
-                    <i class=\\"sap-icon--decline\\"></i>
-                </button>
+"<div style=\\"position: relative; width: 100%; min-height: 600px; border: 2px solid #a5a2a2\\">
+    <div class=\\"fd-notification-banner\\">
+        <div class=\\"fd-notification\\" tabindex=\\"0\\">
+            <div class=\\"fd-notification__body\\">
+                <span class=\\"fd-avatar fd-avatar--accent-color-10 fd-avatar--xs\\" role=\\"img\\" aria-label=\\"Avatar\\">
+                    <i role=\\"presentation\\" aria-hidden=\\"true\\" aria-label=\\"Product placeholder\\" class=\\"fd-avatar__icon sap-icon--product\\"></i>
+                </span>
+                <div class=\\"fd-notification__content\\">
+                    <div class=\\"fd-notification__header\\">
+                        <h4 class=\\"fd-notification__title fd-notification__title--unread\\">Sales Order #65665 for Lorem Inc is about to expire</h4>
+                    </div>
+                    <p class=\\"fd-notification__paragraph\\">Sales order expires in 1 day</p>
+                    <div class=\\"fd-notification__footer\\">
+                        <span class=\\"fd-notification__footer-content\\">Lorem</span>
+                        <span class=\\"fd-notification__separator\\"></span>
+                        <span class=\\"fd-notification__footer-content\\">Sales</span>
+                        <span class=\\"fd-notification__separator\\"></span>
+                        <span class=\\"fd-notification__footer-content\\">11:11 AM</span>
+                    </div>
+                </div>
+                <div class=\\"fd-notification__actions\\">
+                    <button class=\\"fd-button fd-button--transparent\\" aria-label=\\"More\\">
+                        <i class=\\"sap-icon--overflow\\"></i>
+                    </button>
+                    <button class=\\"fd-button fd-button--transparent \\" aria-label=\\"Close\\">
+                        <i class=\\"sap-icon--decline\\"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class=\\"fd-notification\\" tabindex=\\"0\\">
+            <div class=\\"fd-notification__body\\">
+                <span class=\\"fd-avatar fd-avatar--accent-color-10 fd-avatar--xs\\" role=\\"img\\" aria-label=\\"Avatar\\">
+                    <i role=\\"presentation\\" aria-hidden=\\"true\\" aria-label=\\"Product placeholder\\" class=\\"fd-avatar__icon sap-icon--product\\"></i>
+                </span>
+                <div class=\\"fd-notification__content\\">
+                    <div class=\\"fd-notification__header\\">
+                        <h4 class=\\"fd-notification__title fd-notification__title--unread\\">Notification Title Lorem Ipsum</h4>
+                    </div>
+                    <p class=\\"fd-notification__paragraph\\">Description of notification topic</p>
+                    <div class=\\"fd-notification__footer\\">
+                        <span class=\\"fd-notification__footer-content\\">Product Name</span>
+                        <span class=\\"fd-notification__separator\\"></span>
+                        <span class=\\"fd-notification__footer-content\\">Feature Name</span>
+                        <span class=\\"fd-notification__separator\\"></span>
+                        <span class=\\"fd-notification__footer-content\\">11:12 AM</span>
+                    </div>
+                </div>
+                <div class=\\"fd-notification__actions\\">
+                    <button class=\\"fd-button fd-button--transparent\\" aria-label=\\"More\\">
+                        <i class=\\"sap-icon--overflow\\"></i>
+                    </button>
+                    <button class=\\"fd-button fd-button--transparent \\" aria-label=\\"Close\\">
+                        <i class=\\"sap-icon--decline\\"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
@@ -32753,6 +32784,7 @@ exports[`Check stories > Components/Notifications > Story NotificationGroup > Sh
                 onclick=\\"onPopoverClick('popoverNotificationsGroup');\\"
                 role=\\"button\\">
                 <i class=\\"sap-icon--bell\\" role=\\"presentation\\"></i>
+                <span class=\\"fd-button__badge\\">30</span>
             </button>
         </div>
         <div class=\\"fd-popover__body\\" aria-hidden=\\"false\\" id=\\"popoverNotificationsGroup\\">
@@ -32766,7 +32798,7 @@ exports[`Check stories > Components/Notifications > Story NotificationGroup > Sh
                             <i class=\\"sap-icon--sort\\"></i>
                         </button>
                         <button aria-label=\\"Add to cart\\" class=\\"fd-button fd-button--transparent\\">
-                            <i class=\\"sap-icon--settings\\"></i>
+                            <i class=\\"sap-icon--action-settings\\"></i>
                         </button>
                     </div>
     
@@ -33009,7 +33041,7 @@ exports[`Check stories > Components/Notifications > Story Primary > Should match
         <div class=\\"fd-notification__content\\">
             <div class=\\"fd-notification__header\\">
                 <span class=\\"sap-icon sap-icon--sys-enter-2 sap-icon--color-positive\\"></span>
-                <h4 class=\\"fd-notification__title\\">Notification Title Notification Title (unread) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
+                <h4 class=\\"fd-notification__title\\">Notification Title Notification Title (read) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</h4>
             </div>
             <p class=\\"fd-notification__paragraph\\">Description of notification topic lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla pariatur quisquam suscipit odio. Nesciunt, assumenda. Quo dolores aperiam, repellendus animi dolorem rerum cumque fugiat corrupti pariatur, adipisci soluta odio voluptate? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni architecto aut nobis facere, eius ea accusantium dolores quae, alias molestiae repudiandae doloremque repellat quisquam voluptatum fugiat id magnam, vitae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione modi quas pariatur at eveniet inventore dolorum fugiat, cum animi ullam quisquam reiciendis aperiam quibusdam sapiente nobis atque omnis quae.</p>
             <div class=\\"fd-notification__footer\\">
@@ -33065,12 +33097,12 @@ exports[`Check stories > Components/Notifications > Story Primary > Should match
 
 <div class=\\"fd-notification\\" tabindex=\\"0\\">
     <div class=\\"fd-notification__body\\">
-        <span class=\\"fd-avatar fd-avatar--accent-color-10 fd-avatar--xs\\" role=\\"img\\" aria-label=\\"Avatar\\">
+        <span class=\\"fd-avatar fd-avatar--circle fd-avatar--accent-color-10 fd-avatar--xs\\" role=\\"img\\" aria-label=\\"Avatar\\">
             <i role=\\"presentation\\" aria-hidden=\\"true\\" aria-label=\\"Product placeholder\\" class=\\"fd-avatar__icon sap-icon--product\\"></i>
         </span>
         <div class=\\"fd-notification__content\\">
             <div class=\\"fd-notification__header\\">
-                <h4 class=\\"fd-notification__title fd-notification__title--unread\\">Notification Title</h4>
+                <h4 class=\\"fd-notification__title fd-notification__title--unread\\">Notification Title (unread)</h4>
             </div>
             <p class=\\"fd-notification__paragraph\\">Description of notification topic</p>
             <div class=\\"fd-notification__footer\\">