diff --git a/libs/blog-bff/banners/api/src/lib/dtos.ts b/libs/blog-bff/banners/api/src/lib/dtos.ts
index 173c86c1..18e1ff23 100644
--- a/libs/blog-bff/banners/api/src/lib/dtos.ts
+++ b/libs/blog-bff/banners/api/src/lib/dtos.ts
@@ -1,13 +1,22 @@
 export interface WPBannerDto {
   id: number;
   acf: {
+    is_slider_banner_displayed: boolean;
     display_time: string;
-    slides:
-      | {
-          slide_image: number /* slideId */;
-          slide_url: string /* url to navigate to after click */;
-        }[]
-      | null;
+    slides: {
+      slide_image_desktop: number /* slideId */;
+      slide_image_mobile: number /* slideId */;
+      slide_url: string /* url to navigate to after click */;
+    }[];
+
+    is_top_banner_displayed: boolean;
+    top_banner_image_desktop: number /* mediaId */;
+    top_banner_image_mobile: number /* mediaId */;
+    top_banner_image_url: string /* url to navigate to after click */;
+
+    is_card_banner_displayed: boolean;
+    card_banner_image: number /* mediaId */;
+    card_banner_url: string /* url to navigate to after click */;
   };
 }
 
diff --git a/libs/blog-bff/banners/api/src/lib/mappers.ts b/libs/blog-bff/banners/api/src/lib/mappers.ts
index c3e3ec10..d725af74 100644
--- a/libs/blog-bff/banners/api/src/lib/mappers.ts
+++ b/libs/blog-bff/banners/api/src/lib/mappers.ts
@@ -1,21 +1,46 @@
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 
 import { WPBannerDto, WPBannerMediaDto } from './dtos';
 
 export const toBanner = (
   dto: WPBannerDto,
   mediaDto: WPBannerMediaDto[],
-): Slider => {
+): Banners => {
   return {
-    slideDisplayTimeMs: +dto.acf.display_time,
-    slides:
-      dto.acf.slides?.map((slide) => {
-        const media = mediaDto.find((media) => media.id === slide.slide_image)!;
-        return {
-          url: media.guid.rendered,
-          alt: media.alt_text,
-          navigateTo: slide.slide_url,
-        };
-      }) ?? [],
+    ...(dto.acf.is_slider_banner_displayed && {
+      slider: {
+        slideDisplayTimeMs: +dto.acf.display_time,
+        slides: dto.acf.slides.map((slide) => {
+          const media = mediaDto.find(
+            (media) => media.id === slide.slide_image_desktop,
+          )!;
+          return {
+            url: media?.guid.rendered,
+            alt: media?.alt_text,
+            navigateTo: slide.slide_url,
+          };
+        }),
+      },
+    }),
+    ...(dto.acf.is_top_banner_displayed && {
+      topBanner: {
+        url: mediaDto.find(
+          (media) => media.id === dto.acf.top_banner_image_desktop,
+        )?.guid.rendered,
+        alt: mediaDto.find(
+          (media) => media.id === dto.acf.top_banner_image_desktop,
+        )?.alt_text,
+        navigateTo: dto.acf.top_banner_image_url,
+      },
+    }),
+    ...(dto.acf.is_card_banner_displayed && {
+      cardBanner: {
+        url: mediaDto.find((media) => media.id === dto.acf.card_banner_image)
+          ?.guid.rendered,
+        alt: mediaDto.find((media) => media.id === dto.acf.card_banner_image)
+          ?.alt_text,
+        navigateTo: dto.acf.card_banner_url,
+      },
+    }),
   };
 };
diff --git a/libs/blog-contracts/banners/src/lib/banners.ts b/libs/blog-contracts/banners/src/lib/banners.ts
index ba9c194e..8e57f085 100644
--- a/libs/blog-contracts/banners/src/lib/banners.ts
+++ b/libs/blog-contracts/banners/src/lib/banners.ts
@@ -1,8 +1,26 @@
 export interface Slider {
   slideDisplayTimeMs: number;
   slides: {
-    url: string;
-    alt: string;
+    url?: string;
+    alt?: string;
     navigateTo: string;
   }[];
 }
+
+export interface TopBanner {
+  url?: string;
+  alt?: string;
+  navigateTo: string;
+}
+
+export interface CardBanner {
+  url?: string;
+  alt?: string;
+  navigateTo: string;
+}
+
+export interface Banners {
+  slider?: Slider;
+  topBanner?: TopBanner;
+  cardBanner?: CardBanner;
+}
diff --git a/libs/blog/ad-banner/data-access/src/lib/infrastructure/ad-banner.service.ts b/libs/blog/ad-banner/data-access/src/lib/infrastructure/ad-banner.service.ts
index d6836f4b..e6e4787d 100644
--- a/libs/blog/ad-banner/data-access/src/lib/infrastructure/ad-banner.service.ts
+++ b/libs/blog/ad-banner/data-access/src/lib/infrastructure/ad-banner.service.ts
@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 import { ConfigService } from '@angular-love/shared/config';
 
 @Injectable({ providedIn: 'root' })
@@ -9,7 +9,7 @@ export class AdBannerService {
   private readonly _apiBaseUrl = inject(ConfigService).get('apiBaseUrl');
   private readonly _http = inject(HttpClient);
 
-  getBannerSlider() {
-    return this._http.get<Slider>(`${this._apiBaseUrl}/banners`);
+  getVisibleBanners() {
+    return this._http.get<Banners>(`${this._apiBaseUrl}/banners`);
   }
 }
diff --git a/libs/blog/ad-banner/data-access/src/lib/state/ad-banner.store.ts b/libs/blog/ad-banner/data-access/src/lib/state/ad-banner.store.ts
index 30fb615b..6e7edc31 100644
--- a/libs/blog/ad-banner/data-access/src/lib/state/ad-banner.store.ts
+++ b/libs/blog/ad-banner/data-access/src/lib/state/ad-banner.store.ts
@@ -4,16 +4,16 @@ import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe, switchMap } from 'rxjs';
 
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 
 import { AdBannerService } from '../infrastructure/ad-banner.service';
 
 type AdBannerState = {
-  slider: Slider | null;
+  banners: Banners | null;
 };
 
 const initialState: AdBannerState = {
-  slider: null,
+  banners: null,
 };
 
 export const AdBannerStore = signalStore(
@@ -23,10 +23,10 @@ export const AdBannerStore = signalStore(
     getData: rxMethod<void>(
       pipe(
         switchMap(() =>
-          adBannerService.getBannerSlider().pipe(
+          adBannerService.getVisibleBanners().pipe(
             tapResponse({
-              next: (slider) => {
-                patchState(store, { slider });
+              next: (banners) => {
+                patchState(store, { banners });
               },
               error: () => {
                 patchState(store);
diff --git a/libs/blog/ad-banner/ui/src/index.ts b/libs/blog/ad-banner/ui/src/index.ts
index 09b611ad..40009e49 100644
--- a/libs/blog/ad-banner/ui/src/index.ts
+++ b/libs/blog/ad-banner/ui/src/index.ts
@@ -2,3 +2,4 @@ export * from './lib/ad-image-banner/ad-image-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner-data.interface';
 export * from './lib/instances/al-indepth-banner.component';
 export * from './lib/banner-carousel/al-banner-carousel.component';
+export * from './lib/newsletter-banner/al-newsletter-banner.component';
diff --git a/libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html b/libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html
index e2913e7f..95d28440 100644
--- a/libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html
+++ b/libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html
@@ -4,6 +4,7 @@
     role="button"
     class="!relative cursor-pointer"
     [attr.aria-label]="banner().alt"
+    [alt]="banner().alt"
     [ngSrc]="banner().url"
     (click)="navigateFromBanner()"
     (keydown.enter)="navigateFromBanner()"
diff --git a/libs/blog/ad-banner/ui/src/lib/newsletter-banner/al-newsletter-banner.component.ts b/libs/blog/ad-banner/ui/src/lib/newsletter-banner/al-newsletter-banner.component.ts
new file mode 100644
index 00000000..86541647
--- /dev/null
+++ b/libs/blog/ad-banner/ui/src/lib/newsletter-banner/al-newsletter-banner.component.ts
@@ -0,0 +1,44 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { CardBanner } from '@angular-love/blog/contracts/banners';
+
+@Component({
+  selector: 'al-newsletter-banner',
+  imports: [NgOptimizedImage],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <a
+      class="relative flex h-full items-center"
+      [href]="cardBanner().navigateTo!"
+    >
+      <aside class="absolute h-full w-full overflow-hidden rounded-lg">
+        <img
+          tabindex="0"
+          role="button"
+          class="!relative object-cover shadow-inner blur-xl"
+          [attr.aria-label]="cardBanner()!.alt!"
+          [alt]="cardBanner().alt!"
+          [ngSrc]="cardBanner().url!"
+          fill
+          priority
+        />
+      </aside>
+      <aside>
+        <img
+          tabindex="0"
+          role="button"
+          class="!relative"
+          [attr.aria-label]="cardBanner().alt!"
+          [alt]="cardBanner().alt!"
+          [ngSrc]="cardBanner().url!"
+          fill
+          priority
+        />
+      </aside>
+    </a>
+  `,
+})
+export class AlNewsletterBannerComponent {
+  readonly cardBanner = input.required<CardBanner>();
+}
diff --git a/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html b/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html
index bab625bb..0fa0e5c9 100644
--- a/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html
+++ b/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html
@@ -62,8 +62,8 @@ <h2 id="article-title" class="flex text-[40px] font-bold">
       <div
         class="sticky top-24 mt-5 hidden flex-col gap-4 lg:flex"
         [ngClass]="{
-          'top-24': !adBannerStoreVisible(),
-          'top-48': adBannerStoreVisible()
+          'top-24': !bannerStore.banners()?.topBanner,
+          'top-48': bannerStore.banners()?.topBanner,
         }"
       >
         @if (articleDetails().anchors.length) {
diff --git a/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts b/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts
index f6265db2..b4f3edf8 100644
--- a/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts
+++ b/libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts
@@ -2,11 +2,12 @@ import { DatePipe, NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
   input,
-  signal,
 } from '@angular/core';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
+import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { GiscusCommentsComponent } from '@angular-love/blog/articles/feature-comments';
 import { RelatedArticlesComponent } from '@angular-love/blog/articles/feature-related-articles';
 import { ArticleCompactCardSkeletonComponent } from '@angular-love/blog/articles/ui-article-card';
@@ -57,5 +58,5 @@ import { ArticleShareIconsComponent } from '../article-share-icons/article-share
 })
 export class ArticleDetailsComponent {
   readonly articleDetails = input.required<Article>();
-  protected readonly adBannerStoreVisible = signal(false);
+  protected readonly bannerStore = inject(AdBannerStore);
 }
diff --git a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
index 6ce21dfb..23742412 100644
--- a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
+++ b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
@@ -21,10 +21,12 @@
   } @else {
     <al-article-regular-card-skeleton *alRepeat="4" />
   }
-  <al-card
-    alGradientCard
-    class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
-  >
-    <al-newsletter alCardContent />
-  </al-card>
+  <div class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1">
+    <!-- when "newsletter banner" exist put it in place of the real newsletter -->
+    @if (cardBanner()) {
+      <al-newsletter-banner [cardBanner]="cardBanner()!" />
+    } @else {
+      <al-newsletter alCardContent />
+    }
+  </div>
 </section>
diff --git a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
index 2853667f..42c9b75d 100644
--- a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
+++ b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
@@ -1,7 +1,13 @@
 import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
 import { TranslocoDirective } from '@jsverse/transloco';
 
+import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { ArticleListStore } from '@angular-love/blog/articles/data-access';
 import {
   ArticleRegularCardSkeletonComponent,
@@ -9,9 +15,10 @@ import {
 } from '@angular-love/blog/articles/ui-article-card';
 import { UiArticleListTitleComponent } from '@angular-love/blog/articles/ui-article-list-title';
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
+import { AlNewsletterBannerComponent } from '@angular-love/blog/shared/ad-banner';
 import {
   CardComponent,
-  GradientCardDirective,
+  CardContentDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { RepeatDirective } from '@angular-love/utils';
 
@@ -24,12 +31,12 @@ import { RepeatDirective } from '@angular-love/utils';
     UiArticleCardComponent,
     NewsletterComponent,
     CardComponent,
-    GradientCardDirective,
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
-    CardComponent,
     RepeatDirective,
+    CardContentDirective,
+    AlNewsletterBannerComponent,
   ],
   host: {
     'data-testid': 'latest-articles-container',
@@ -38,13 +45,12 @@ import { RepeatDirective } from '@angular-love/utils';
 })
 export class FeatureLatestArticlesComponent {
   private readonly _articleListStore = inject(ArticleListStore);
-
+  private readonly _bannerStore = inject(AdBannerStore);
+  protected readonly cardBanner = computed(
+    () => this._bannerStore.banners()?.cardBanner,
+  );
   readonly isFetchArticleListLoading =
     this._articleListStore.isFetchArticleListLoading;
-
-  readonly isFetchArticleListError =
-    this._articleListStore.isFetchArticleListError;
-
   readonly articles = this._articleListStore.articles;
 
   constructor() {
diff --git a/libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts b/libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts
index 65a68224..f8f3a02f 100644
--- a/libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts
+++ b/libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts
@@ -1,5 +1,5 @@
-import { NgClass, ViewportScroller } from '@angular/common';
-import { Component, computed, effect, inject } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router, RouterOutlet } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
@@ -15,13 +15,26 @@ import {
 import { SearchComponent } from '@angular-love/blog/search/feature-search';
 import {
   AdImageBanner,
+  AdImageBannerComponent,
   AlBannerCarouselComponent,
 } from '@angular-love/blog/shared/ad-banner';
 
 @Component({
   selector: 'al-root-shell',
   template: `
-    <div class="fixed top-0 z-10 w-full">
+    <div class="sticky top-0 z-10 w-full">
+      @if (topBanner(); as topBanner) {
+        <al-ad-image-banner
+          [banner]="{
+            url: topBanner.url!,
+            alt: topBanner.alt!,
+            action: {
+              type: 'url',
+              url: topBanner.navigateTo!,
+            },
+          }"
+        />
+      }
       <al-header
         class="block w-full"
         [language]="language()"
@@ -30,7 +43,7 @@ import {
         <al-search />
       </al-header>
     </div>
-    <al-layout class="mt-20" [ngClass]="{ 'mt-40': adBannerVisible() }">
+    <al-layout>
       @if (slides(); as slides) {
         <al-banner-carousel [banners]="slides" [msPerSlide]="msPerSlide()!" />
       }
@@ -46,14 +59,15 @@ import {
     SearchComponent,
     NgClass,
     AlBannerCarouselComponent,
+    AdImageBannerComponent,
   ],
 })
 export class RootShellComponent {
-  protected readonly sliderStore = inject(AdBannerStore);
+  protected readonly bannerStore = inject(AdBannerStore);
   protected readonly slides = computed<AdImageBanner[] | undefined>(() =>
-    this.sliderStore.slider()?.slides.map((slide) => ({
-      url: slide.url,
-      alt: slide.alt,
+    this.bannerStore.banners()?.slider?.slides.map((slide) => ({
+      url: slide.url!,
+      alt: slide.alt!,
       action: {
         type: 'url',
         url: slide.navigateTo,
@@ -61,14 +75,14 @@ export class RootShellComponent {
     })),
   );
   protected readonly msPerSlide = computed(
-    () => this.sliderStore.slider()?.slideDisplayTimeMs,
+    () => this.bannerStore.banners()?.slider?.slideDisplayTimeMs,
+  );
+  protected readonly topBanner = computed(
+    () => this.bannerStore.banners()?.topBanner,
   );
 
   readonly translocoService = inject(TranslocoService);
 
-  // todo: temporary solution to keep in mind how banner influence the layout
-  protected readonly adBannerVisible = computed(() => false);
-
   readonly language = toSignal(
     this.translocoService.langChanges$.pipe(
       startWith(this.translocoService.getActiveLang()),
@@ -87,13 +101,7 @@ export class RootShellComponent {
     );
   }
 
-  constructor(viewport: ViewportScroller) {
-    // todo: temporary solution to keep in mind how banner influence the layout
-    effect(() => {
-      this.adBannerVisible()
-        ? viewport.setOffset([0, 160])
-        : viewport.setOffset([0, 80]);
-    });
-    this.sliderStore.getData();
+  constructor() {
+    this.bannerStore.getData();
   }
 }