diff --git a/apps/blog/src/assets/HOA_logo_blue.png b/apps/blog/src/assets/HOA_logo_blue.png
new file mode 100644
index 000000000..d1df0947f
Binary files /dev/null and b/apps/blog/src/assets/HOA_logo_blue.png differ
diff --git a/apps/blog/src/assets/HOA_logo_white.png b/apps/blog/src/assets/HOA_logo_white.png
new file mode 100644
index 000000000..7b55747c3
Binary files /dev/null and b/apps/blog/src/assets/HOA_logo_white.png differ
diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json
index bf0e7d579..0521de88f 100644
--- a/apps/blog/src/assets/i18n/en.json
+++ b/apps/blog/src/assets/i18n/en.json
@@ -9,9 +9,8 @@
     "recommended": "Recommended Articles",
     "angularNews": "Angular News",
     "guides": "Guides",
-    "partners": "Community partners",
-    "mainPartner": "Main partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Article types",
     "categories": {
       "all": "Latest",
       "news": "News",
@@ -24,16 +23,27 @@
     "home": "Home Page",
     "about": "About us",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "In-Depth articles",
+    "partnership": "Let's discuss partnership",
     "become_author": "Become an author",
     "newsletter": "Angular.letter",
     "navLinks": "Navigation links",
     "roadmap": "Roadmap",
     "toggle_theme": "Toggle theme",
+    "open_search_dialog": "Open search dialog",
     "languagePicker": {
       "pl": "Polish",
-      "en": "English"
+      "en": "English",
+      "select_lang": "Select language"
     }
   },
+  "footer": {
+    "mainPartner": "Main partner",
+    "partners": "Community partners",
+    "al-description": "This is the place where you can learn Angular, discover best practices, and stay updated with the latest news and trends"
+  },
   "authorPage": {
     "posted_by": "Posted by {{name}}"
   },
@@ -219,6 +229,7 @@
     "changeLangToEnglish": "Change language to English"
   },
   "socialLinks": {
+    "title": "Social media",
     "facebook": "Like our Facebook page",
     "twitter-x": "Follow us on X (formerly Twitter)",
     "linkedIn": "Follow us on LinkedIn",
diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json
index 0e7fac24d..6e6d7a02d 100644
--- a/apps/blog/src/assets/i18n/pl.json
+++ b/apps/blog/src/assets/i18n/pl.json
@@ -9,9 +9,8 @@
     "recommended": "Polecane Artykuły",
     "angularNews": "Wiadomości ze świata Angulara",
     "guides": "Poradniki",
-    "partners": "Community partnerzy",
-    "mainPartner": "Główny partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Typy artykułów",
     "categories": {
       "all": "Najnowsze",
       "news": "Nowości",
@@ -24,16 +23,27 @@
     "home": "Strona Główna",
     "about": "O nas",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "Artykuły In-Depth",
+    "partnership": "Porozmawiajmy o partnerstwie",
     "become_author": "Zostań autorem",
     "newsletter": "Angular.letter",
     "navLinks": "Menu",
     "roadmap": "Roadmap",
     "toggle_theme": "Przełącz motyw",
+    "open_search_dialog": "Otwórz okno wyszukiwania",
     "languagePicker": {
       "pl": "Polski",
-      "en": "Angielski"
+      "en": "Angielski",
+      "select_lang": "Wybierz język"
     }
   },
+  "footer": {
+    "partners": "Community partnerzy",
+    "mainPartner": "Główny partner",
+    "al-description": "To jest miejsce, w którym możesz nauczyć się Angulara, odkrywać najlepsze praktyki i być na bieżąco z najnowszymi wiadomościami i trendami"
+  },
   "home": {
     "latest": "Latest articles"
   },
@@ -222,6 +232,7 @@
     "changeLangToEnglish": "Zmień język na angielski"
   },
   "socialLinks": {
+    "title": "Media społecznościowe",
     "facebook": "Polub nas na Facebooku",
     "twitter-x": "Obserwuj nas na X (dawniej Twitter)",
     "linkedIn": "Obserwuj nas na LinkedInie",
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 60b0596b2..2b62ea74b 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
@@ -15,7 +15,7 @@
       />
 
       <div class="flex items-center gap-1">
-        <fast-svg name="clock" size="16" />
+        <fast-svg name="clock" aria-hidden="true" size="16" />
         {{ articleDetails().readingTime }} min
       </div>
     </div>
diff --git a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
index 411c9aab2..3f271c5e9 100644
--- a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
+++ b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
@@ -29,11 +29,15 @@ type ShareItem = {
           [href]="item.href"
           target="_blank"
         >
-          <fast-svg class="text-al-foreground" [name]="item.icon" size="28" />
+          <fast-svg
+            aria-hidden="true"
+            class="text-al-foreground"
+            [name]="item.icon"
+            size="28"
+          />
         </a>
       }
-      <a
-        role="button"
+      <button
         [attr.aria-label]="t('articleShareIcons.urlAriaLabel')"
         [class.url-icon-animated]="animating()"
         [cdkCopyToClipboard]="articleUrl()"
@@ -43,17 +47,19 @@ type ShareItem = {
       >
         <fast-svg
           name="link"
+          aria-hidden="true"
           class="text-al-foreground"
           [class.!hidden]="animating()"
           size="28"
         />
         <fast-svg
           name="circle-check"
+          aria-hidden="true"
           class="text-al-foreground"
           [class.!hidden]="!animating()"
           size="28"
         />
-      </a>
+      </button>
     </div>
   `,
 })
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 17802ad09..cd97e47b9 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
@@ -1,15 +1,23 @@
 <ng-container *transloco="let t; read: 'homePage'">
-  <section class="flex justify-center gap-3">
+  <div
+    role="tablist"
+    class="flex justify-center gap-3"
+    [attr.aria-label]="t('articleTypes')"
+  >
     @for (category of categories(); track $index) {
       <button
         alPill
+        alFocusableItem
+        [tabindex]="selected().name === category.name ? 0 : -1"
+        role="tab"
         [variant]="category.name === selected().name ? 'flat' : 'outline'"
         (click)="selected.set(category)"
+        (keydown)="onPillKeydown($event)"
       >
         {{ t(category.translationPath) }}
       </button>
     }
-  </section>
+  </div>
 
   <section
     class="mb-6 mt-6 grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 lg:gap-y-8"
@@ -24,16 +32,14 @@
           [imagePriority]="i < 2 ? 1 : null"
           cardType="regular"
         />
+        @if (i === 1) {
+          <ng-container *ngTemplateOutlet="newsletterCard" />
+        }
       }
     } @else {
       <al-article-regular-card-skeleton *alRepeat="take" />
+      <ng-container *ngTemplateOutlet="newsletterCard" />
     }
-    <al-card
-      alGradientCard
-      class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
-    >
-      <al-newsletter alCardContent />
-    </al-card>
   </section>
 
   <div class="flex justify-center gap-3">
@@ -41,4 +47,13 @@
       {{ t('categories.showAll', { category: t(selected().translationPath) }) }}
     </button>
   </div>
+
+  <ng-template #newsletterCard>
+    <al-card
+      alGradientCard
+      class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
+    >
+      <al-newsletter alCardContent />
+    </al-card>
+  </ng-template>
 </ng-container>
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 c49e13dae..0ffd14baa 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,10 +1,14 @@
-import { NgClass } from '@angular/common';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   computed,
   inject,
   linkedSignal,
+  QueryList,
+  ViewChildren,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
@@ -22,6 +26,7 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { PillDirective } from '@angular-love/blog/shared/ui-pill';
 import { ArticleCategory } from '@angular-love/contracts/articles';
+import { FocusableItemDirective } from '@angular-love/ui-focusable';
 import { RepeatDirective } from '@angular-love/utils';
 
 import { CategoryListItem, injectCategories } from './categories.const';
@@ -36,19 +41,21 @@ import { CategoryListItem, injectCategories } from './categories.const';
     CardComponent,
     GradientCardDirective,
     NgClass,
+    NgTemplateOutlet,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
     RepeatDirective,
     RouterLink,
     ButtonComponent,
     PillDirective,
+    FocusableItemDirective,
   ],
   host: {
     'data-testid': 'latest-articles-container',
   },
   providers: [ArticleListStore],
 })
-export class FeatureLatestArticlesComponent {
+export class FeatureLatestArticlesComponent implements AfterViewInit {
   readonly selectedCategorySlug = computed<ArticleCategory | null>(
     () => this.selected().slug,
   );
@@ -57,6 +64,11 @@ export class FeatureLatestArticlesComponent {
     () => this.categories()[0],
   );
 
+  @ViewChildren(FocusableItemDirective)
+  private readonly _focusableItems!: QueryList<FocusableItemDirective>;
+
+  private _keyManager!: FocusKeyManager<FocusableItemDirective>;
+
   readonly take = 8;
 
   private readonly _articleListStore = inject(ArticleListStore);
@@ -80,4 +92,17 @@ export class FeatureLatestArticlesComponent {
 
     this._articleListStore.fetchArticleList(query);
   }
+
+  ngAfterViewInit(): void {
+    this._keyManager = new FocusKeyManager(this._focusableItems)
+      .withWrap()
+      .withHorizontalOrientation('ltr');
+
+    // Set initial active item
+    this._keyManager.setActiveItem(0);
+  }
+
+  onPillKeydown(event: KeyboardEvent) {
+    this._keyManager.onKeydown(event);
+  }
 }
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
index 7804c05b9..4301dc8e3 100644
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
@@ -1,17 +1,16 @@
-<a [routerLink]="['/', article().slug] | alLocalize">
-  <article
-    class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
-    [attr.aria-labelledby]="article().slug"
-  >
-    <img
-      alt=""
-      class="absolute h-auto w-full bg-contain opacity-20"
-      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
-      [priority]="imagePriority()"
-      width="1215"
-      height="750"
-    />
-    <div class="relative flex h-full flex-col justify-between text-[#fff]">
+<article
+  class="h-full rounded-lg bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+  [style.background-image]="
+    'url(' +
+    (article().featuredImageUrl || 'assets/article-placeholder.webp') +
+    ')'
+  "
+  [attr.aria-labelledby]="article().slug"
+>
+  <a [routerLink]="['/', article().slug] | alLocalize">
+    <div
+      class="bg-al-background relative flex h-full flex-col justify-between opacity-85"
+    >
       <div
         class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
       ></div>
@@ -48,5 +47,5 @@ <h3 class="line-clamp-2 text-2xl font-bold" [id]="article().slug">
         </p>
       </div>
     </div>
-  </article>
-</a>
+  </a>
+</article>
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
index f3e345f17..f26d948f3 100644
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
@@ -1,4 +1,3 @@
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -10,13 +9,7 @@ import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
 @Component({
   selector: 'al-article-compact-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    AvatarComponent,
-    RouterLink,
-    AlLocalizePipe,
-    FastSvgComponent,
-    NgOptimizedImage,
-  ],
+  imports: [AvatarComponent, RouterLink, AlLocalizePipe, FastSvgComponent],
   templateUrl: './article-compact-card.component.html',
 })
 export class ArticleCompactCardComponent {
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.html
index d6c4bfc76..69e7353f5 100644
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.html
@@ -30,7 +30,7 @@
           </span>
           <al-difficulty [difficulty]="article().difficulty" />
           <span class="flex w-full flex-row items-center justify-end gap-2">
-            <fast-svg name="clock" size="16" />
+            <fast-svg name="clock" aria-hidden="true" size="16" />
             <time
               class="text-sm/[14px]"
               [attr.datetime]="'PT' + article().readingTime + 'M'"
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
index 43aedf05d..2b5bcf97b 100644
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
@@ -1,10 +1,13 @@
-<a [routerLink]="['/', article().slug] | alLocalize">
+<a
+  [attr.aria-label]="article().title"
+  [routerLink]="['/', article().slug] | alLocalize"
+>
   <article
     class="light:border group relative flex h-full w-full flex-row rounded-lg shadow-none"
     [attr.aria-labelledby]="article().slug"
   >
     <img
-      alt="Post featured image"
+      alt=""
       class="hidden h-auto w-auto rounded-l-lg bg-contain lg:block"
       [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
       [priority]="imagePriority()"
@@ -27,7 +30,7 @@
           <span class="hidden text-sm/[14px] lg:block">
             {{ article().publishDate | date: 'dd MMM yyyy' }}
           </span>
-          <fast-svg name="clock" size="16" />
+          <fast-svg name="clock" aria-hidden="true" size="16" />
           <time
             class="text-sm/[14px]"
             [attr.datetime]="'PT' + article().readingTime + 'M'"
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
index b9d86a3a1..75818e5cc 100644
--- a/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
@@ -1,14 +1,17 @@
-<a [routerLink]="['/', article().slug] | alLocalize">
-  <article
-    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent"
-    [attr.aria-labelledby]="article().slug"
+<article
+  class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border border-transparent shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
+  [attr.aria-labelledby]="article().slug"
+>
+  <a
+    [attr.aria-label]="article().title"
+    [routerLink]="['/', article().slug] | alLocalize"
   >
     <div
       class="md:group-hover:bg-al-bottom-radial-gradient absolute bottom-0 z-0 h-1/2 w-full opacity-50"
     ></div>
 
     <img
-      alt="Post featured image"
+      alt=""
       class="hidden w-full overflow-hidden rounded-t-lg object-cover lg:block"
       [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
       [priority]="imagePriority()"
@@ -28,7 +31,7 @@
           </span>
         </div>
         <div class="flex items-center gap-2">
-          <fast-svg name="clock" size="16" />
+          <fast-svg name="clock" aria-hidden="true" size="16" />
           <time
             class="text-sm/[14px]"
             [attr.datetime]="'PT' + article().readingTime + 'M'"
@@ -50,5 +53,5 @@
         </p>
       </div>
     </div>
-  </article>
-</a>
+  </a>
+</article>
diff --git a/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html b/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html
index d9b2544d2..c346640cc 100644
--- a/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html
+++ b/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html
@@ -12,7 +12,7 @@
     </div>
   } @else {
     <div class="ml-4 mr-2 mt-6 h-4 self-start md:mt-0 md:self-center">
-      <fast-svg name="tick" class="text-al-pink" size="16" />
+      <fast-svg name="tick" aria-hidden="true" class="text-al-pink" size="16" />
     </div>
   }
   <p class="ml-4 mr-6 block pb-4 pt-5 md:ml-4 md:py-5 lg:mr-[30px]">
diff --git a/libs/blog/home/feature-home/src/lib/home-page/home-page.component.html b/libs/blog/home/feature-home/src/lib/home-page/home-page.component.html
index bb0348671..b6d095d66 100644
--- a/libs/blog/home/feature-home/src/lib/home-page/home-page.component.html
+++ b/libs/blog/home/feature-home/src/lib/home-page/home-page.component.html
@@ -2,7 +2,4 @@
 
 <al-latest-articles />
 
-<al-articles-list />
-
-<al-partners [partnerList]="[hoaHireUs]" heading="homePage.mainPartner" />
-<al-partners [partnerList]="partnersList" heading="homePage.partners" />
+<al-articles-list class="mb-4 block" />
diff --git a/libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts b/libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts
index f5034a4da..92c75bc9b 100644
--- a/libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts
+++ b/libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts
@@ -2,17 +2,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { ArticlesListContainerComponent } from '@angular-love/blog/articles/feature-list';
-import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
 import { FeatureLatestArticlesComponent } from '@angular-love/feature-latest-articles';
 
-import { hoaHireUs, partnersList } from './partners';
 import { WelcomeMessageComponent } from './welcome-message/welcome-message.component';
 
 @Component({
   selector: 'al-home-page',
   imports: [
     ReactiveFormsModule,
-    PartnersComponent,
     FeatureLatestArticlesComponent,
     ArticlesListContainerComponent,
     WelcomeMessageComponent,
@@ -21,7 +18,4 @@ import { WelcomeMessageComponent } from './welcome-message/welcome-message.compo
   styleUrls: ['./home-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomePageComponent {
-  protected readonly hoaHireUs = hoaHireUs;
-  protected readonly partnersList = partnersList;
-}
+export class HomePageComponent {}
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
index 970ccb62c..61b2b7d87 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
@@ -7,12 +7,6 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
   imports: [SocialMediaIconsComponent],
   template: `
     <div class="flex flex-col items-start">
-      <h3
-        id="social-media-title"
-        class="text-al-foreground mb-4 hidden text-sm font-bold lg:block"
-      >
-        Social media
-      </h3>
       <al-social-media-icons variant="default" />
     </div>
   `,
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
index 36a73591b..6899ac4b3 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
@@ -1,13 +1,33 @@
-<footer class="bg-al-footer-background w-full">
+<footer
+  *transloco="let t; read: 'footer'"
+  class="bg-al-footer-background w-full"
+>
   <div
     class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
   >
-    <al-footer-logo class="self-center" />
-    <al-navigation [whiteFont]="true" />
-    <div
-      class="social-media-container flex items-center justify-self-end md:max-lg:justify-self-center"
-    >
-      <al-footer-social-media-icons />
+    <div class="logo-container">
+      <div>
+        <al-footer-logo class="mb-1 block" />
+        <div class="text-al-muted mb-4 inline-block max-w-48 text-xs">
+          {{ t('al-description') }}
+        </div>
+      </div>
+      <al-footer-social-media-icons class="block lg:ml-2" />
+    </div>
+    <al-navigation
+      class="navigation-component"
+      [whiteFont]="true"
+      [cols]="isXlScreen() ? 2 : undefined"
+      [navItems]="navItems"
+    />
+    <div class="partners-container">
+      <div class="mb-5 flex gap-2">
+        <h2>{{ t('mainPartner') }}</h2>
+        <a href="https://houseofangular.io/">
+          <img class="ml-4" [ngSrc]="hoaLogoSrc()" width="100" height="30" />
+        </a>
+      </div>
+      <al-partners [partnerList]="partnersList" heading="footer.partners" />
     </div>
   </div>
   <small class="text-al-muted block pb-4 text-center text-xs">
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
index cc4a1fa73..c597e5ad1 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
@@ -1,23 +1,45 @@
-al-footer-logo {
+.logo-container {
   grid-area: logo;
+  display: flex;
+  flex-direction: column;
 }
 
-al-navigation {
+.navigation-component {
   grid-area: nav;
 }
 
-.social-media-container {
-  grid-area: social;
+.partners-container {
+  grid-area: partners;
 }
 
 .al-container {
+  justify-items: center;
+  row-gap: 1rem;
   grid-template-areas:
-    'logo social'
-    'nav nav';
+    'logo'
+    'partners'
+    'nav';
+
+  align-items: start;
+}
+
+@screen sm {
+  .al-container {
+    justify-items: stretch;
+    grid-template-areas:
+      'logo partners'
+      'nav nav';
+  }
+
+  .logo-container {
+    justify-self: center;
+  }
 }
 
-@screen lg {
+@screen xl {
   .al-container {
-    grid-template-areas: 'logo nav social';
+    grid-template-areas: 'logo nav partners';
+    grid-template-columns: auto 1fr auto;
+    justify-items: center;
   }
 }
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts
index a6cdc7729..6ecc9c8e7 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts
@@ -1,9 +1,25 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { map } from 'rxjs';
 
-import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
+import {
+  NavigationComponent,
+  NavItem,
+} from '@angular-love/blog/layouts/ui-navigation';
+import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
 
 import { FooterLogoComponent } from './components/footer-logo.component';
 import { FooterSocialMediaIconsComponent } from './components/footer-social-media-icons.component';
+import { hoaHireUs, partnersList } from './partners';
 
 @Component({
   selector: 'al-footer',
@@ -11,11 +27,76 @@ import { FooterSocialMediaIconsComponent } from './components/footer-social-medi
     NavigationComponent,
     FooterLogoComponent,
     FooterSocialMediaIconsComponent,
+    PartnersComponent,
+    NgOptimizedImage,
+    TranslocoDirective,
   ],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
+  readonly theme = input.required<'light' | 'dark'>();
+  readonly hoaLogoSrc = computed(() =>
+    this.theme() === 'dark'
+      ? 'assets/HOA_logo_white.png'
+      : 'assets/HOA_logo_blue.png',
+  );
+
   currentYear = new Date().getFullYear();
+  readonly partnersList = partnersList;
+  readonly hoaHireUs = hoaHireUs;
+
+  private readonly _breakpointObserver = inject(BreakpointObserver);
+
+  readonly isXlScreen = toSignal(
+    this._breakpointObserver
+      .observe('(min-width: 1280px)')
+      .pipe(map(({ matches }) => matches)),
+  );
+
+  readonly navItems: NavItem[] = [
+    {
+      translationPath: 'nav.guides',
+      link: ['guides'],
+      dataTestId: 'navigation-guides',
+    },
+    {
+      translationPath: 'nav.about',
+      link: ['about'],
+      dataTestId: 'navigation-about',
+    },
+    {
+      translationPath: 'nav.news',
+      link: ['news'],
+      dataTestId: 'navigation-news',
+    },
+    {
+      translationPath: 'nav.become_author',
+      link: ['become-author'],
+      dataTestId: 'navigation-become-author',
+    },
+    {
+      translationPath: 'nav.meetups',
+      link: ['https://meetup.angular.love/'],
+      externalLink: true,
+      dataTestId: 'navigation-meetups',
+    },
+    {
+      translationPath: 'nav.newsletter',
+      link: ['newsletter'],
+      dataTestId: 'navigation-newsletter',
+    },
+    {
+      translationPath: 'nav.in_depth',
+      link: ['angular-in-depth'],
+      dataTestId: 'navigation-in-depth',
+    },
+    {
+      translationPath: 'nav.partnership',
+      link: ['mailto:angular@angular.love'],
+      externalLink: true,
+      dataTestId: 'navigation-partnership',
+    },
+  ];
 }
diff --git a/libs/blog/home/feature-home/src/lib/home-page/partners.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/partners.ts
similarity index 86%
rename from libs/blog/home/feature-home/src/lib/home-page/partners.ts
rename to libs/blog/layouts/ui-layouts/src/lib/footer/partners.ts
index 1baaab408..e757ddd84 100644
--- a/libs/blog/home/feature-home/src/lib/home-page/partners.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/partners.ts
@@ -21,12 +21,6 @@ export const partnersList: Partner[] = [
     link_URL: 'https://turso.tech/',
     title: 'Turso',
   },
-  {
-    asset_URL: 'assets/angular-js.png',
-    alt: 'Ng Poland Conference Logo',
-    link_URL: 'https://ng-poland.pl/',
-    title: 'Ng Poland',
-  },
   {
     asset_URL: 'assets/angular-community.png',
     alt: 'Angular Community Logo',
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts
index 42a45b449..32f934b79 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts
@@ -17,7 +17,7 @@ import { FastSvgComponent } from '@push-based/ngx-fast-svg';
       (click)="toggleOpen.emit()"
     >
       @if (isOpened()) {
-        <fast-svg name="cross" />
+        <fast-svg name="cross" aria-hidden="true" />
       } @else {
         <div class="bg-al-primary-foreground h-1 w-full rounded"></div>
         <div class="bg-al-primary-foreground h-1 w-full rounded"></div>
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-logo.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-logo.component.ts
index 9e1bc065b..0860f3913 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-logo.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-logo.component.ts
@@ -1,21 +1,22 @@
 import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import { TranslocoDirective } from '@jsverse/transloco';
 
 import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
 
 @Component({
-  standalone: true,
   selector: 'al-header-logo',
   template: `
     <a
+      *transloco="let t; read: 'nav'"
       data-testid="header-home"
-      aria-label="Home"
       class="flex items-center gap-2"
+      [attr.aria-label]="t('home')"
       [routerLink]="'/' | alLocalize"
     >
       <img
-        alt="Angular Love logo"
+        alt=""
         class="inline-block"
         height="40"
         width="36"
@@ -26,6 +27,6 @@ import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
     </a>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AlLocalizePipe, NgOptimizedImage, RouterLink],
+  imports: [AlLocalizePipe, NgOptimizedImage, RouterLink, TranslocoDirective],
 })
 export class HeaderLogoComponent {}
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.scss b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.scss
new file mode 100644
index 000000000..294beb523
--- /dev/null
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.scss
@@ -0,0 +1,4 @@
+.mobile-menu__navigation {
+  height: min(100%, 30rem);
+  padding-block: 2rem;
+}
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts
index 6c297e797..1b3cdc1ab 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts
@@ -11,8 +11,9 @@ import {
   NavigationComponent,
 } from '@angular-love/blog/layouts/ui-navigation';
 
+import { headerNavItems } from '../header-nav-items';
+
 @Component({
-  standalone: true,
   selector: 'al-header-mobile-menu',
   template: `
     <div
@@ -20,7 +21,12 @@ import {
       [ngClass]="{ 'translate-y-[100%]': isOpened() }"
       [attr.aria-hidden]="isOpened()"
     >
-      <al-navigation (navigated)="closed.emit()" layout="vertical">
+      <al-navigation
+        class="mobile-menu__navigation"
+        [navItems]="navItems"
+        (navigated)="closed.emit()"
+        layout="vertical"
+      >
         <li class="flex justify-center">
           <al-language-picker
             [language]="language()"
@@ -30,10 +36,13 @@ import {
       </al-navigation>
     </div>
   `,
+  styleUrl: './header-mobile-menu.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NavigationComponent, NgClass, LanguagePickerComponent],
 })
 export class HeaderMobileMenuComponent {
+  readonly navItems = headerNavItems;
+
   readonly isOpened = input.required<boolean>();
   readonly language = input.required<string>();
 
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/header-nav-items.ts b/libs/blog/layouts/ui-layouts/src/lib/header/header-nav-items.ts
new file mode 100644
index 000000000..f3b3f9f8e
--- /dev/null
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/header-nav-items.ts
@@ -0,0 +1,25 @@
+import { NavItem } from '@angular-love/blog/layouts/ui-navigation';
+
+export const headerNavItems: NavItem[] = [
+  {
+    translationPath: 'nav.guides',
+    link: ['guides'],
+    dataTestId: 'navigation-guides',
+  },
+  {
+    translationPath: 'nav.news',
+    link: ['news'],
+    dataTestId: 'navigation-news',
+  },
+  {
+    translationPath: 'nav.meetups',
+    link: ['https://meetup.angular.love/'],
+    externalLink: true,
+    dataTestId: 'navigation-meetups',
+  },
+  {
+    translationPath: 'nav.roadmap',
+    link: ['roadmap'],
+    dataTestId: 'navigation-roadmap',
+  },
+] as const;
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
index 4bac3c6b2..2df631167 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
@@ -19,9 +19,9 @@ import {
   HeaderLogoComponent,
   HeaderMobileMenuComponent,
 } from './components';
+import { headerNavItems } from './header-nav-items';
 
 @Component({
-  standalone: true,
   selector: 'al-header',
   template: `
     <header
@@ -33,7 +33,7 @@ import {
       >
         <al-header-logo />
 
-        <al-navigation class="hidden lg:block" [showNewsletter]="false" />
+        <al-navigation class="hidden lg:block" [navItems]="navItems" />
 
         <div class="flex flex-row items-center">
           <al-language-picker
@@ -84,6 +84,8 @@ import {
   ],
 })
 export class HeaderComponent {
+  readonly navItems = headerNavItems;
+
   readonly language = input.required<string>();
   readonly theme = input.required<'light' | 'dark'>();
 
diff --git a/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts b/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts
index 0abe0893a..04adde63c 100644
--- a/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts
+++ b/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts
@@ -16,17 +16,20 @@ import { Lang } from '@angular-love/contracts/articles';
     <div class="flex h-full items-center text-sm">
       <label
         class="text-al-primary-foreground relative block focus-within:text-gray-600"
-        for="language"
+        for="language-picker"
       >
-        <span class="sr-only">Select language</span>
+        <span class="sr-only">
+          {{ baseTranslationPath + '.select_lang' | transloco }}
+        </span>
         <fast-svg
           name="translate"
+          aria-hidden="true"
           class="text-al-primary pointer-events-none absolute left-0 top-1/2 !block -translate-y-1/2"
           size="20"
         />
 
         <select
-          id="language"
+          id="language-picker"
           #selectLang
           class="bg-al-background appearance-none rounded-md px-8 py-1"
           (change)="languageChange.emit(selectLang.value)"
@@ -40,6 +43,7 @@ import { Lang } from '@angular-love/contracts/articles';
 
         <fast-svg
           name="arrow-down"
+          aria-hidden="true"
           class="pointer-events-none absolute right-0 top-1/2 !block -translate-y-1/2"
           size="20"
         />
@@ -54,8 +58,10 @@ export class LanguagePickerComponent {
 
   readonly languageChange = output<string>();
 
+  readonly baseTranslationPath = 'nav.languagePicker';
+
   readonly availableLangs = [
-    { value: 'pl', translationPath: 'nav.languagePicker.pl' },
-    { value: 'en', translationPath: 'nav.languagePicker.en' },
+    { value: 'pl', translationPath: `${this.baseTranslationPath}.pl` },
+    { value: 'en', translationPath: `${this.baseTranslationPath}.en` },
   ] satisfies { value: Lang; translationPath: string }[];
 }
diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html
index 5dd1b61e7..b134d28fa 100644
--- a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html
+++ b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html
@@ -1,16 +1,16 @@
-@let isVerticalLayout = layout() === 'vertical';
-<nav *transloco="let t" [class]="isVerticalLayout ? 'flex-col' : 'flex-row'">
+<nav *transloco="let t" class="h-full">
   <ul
-    class="flex flex-wrap justify-center"
+    class="h-full"
     [attr.aria-label]="t('nav.navLinks')"
-    [class]="isVerticalLayout ? 'flex-col justify-between' : ''"
+    [class]="listClasses()"
   >
-    @for (item of filteredNavItems(); track $index) {
+    @for (item of navItems(); track $index) {
       @if (!item.externalLink) {
-        <li [class]="isVerticalLayout ? 'py-10 text-center' : ''">
+        <li>
           <a
             [attr.data-testid]="item.dataTestId"
             class="text-al-foreground p-2 font-medium md:p-6"
+            [class.md:p-6]="!cols() && layout() === 'horizontal'"
             [routerLinkActive]="'text-al-pink'"
             [routerLink]="item.link | alLocalize"
             (click)="navigated.emit()"
@@ -19,10 +19,11 @@
           </a>
         </li>
       } @else {
-        <li [class]="isVerticalLayout ? 'py-10 text-center' : ''">
+        <li>
           <a
             [attr.data-testid]="item.dataTestId"
-            class="text-al-foreground p-2 font-medium md:p-6"
+            class="text-al-foreground p-2 font-medium"
+            [class.md:p-6]="!cols() && layout() === 'horizontal'"
             [href]="item.link"
             target="_blank"
           >
diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts
index 81d11cac1..904fd1ba8 100644
--- a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts
+++ b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts
@@ -26,44 +26,22 @@ export type NavItem = {
   imports: [RouterLink, RouterLinkActive, TranslocoDirective, AlLocalizePipe],
 })
 export class NavigationComponent {
-  readonly layout = input<'vertical' | 'horizontal'>('horizontal');
+  readonly navItems = input.required<NavItem[]>();
   readonly whiteFont = input<boolean>(false);
-  showNewsletter = input(true);
+  readonly cols = input<number>();
+  readonly layout = input<'vertical' | 'horizontal'>('horizontal');
+
+  protected readonly listClasses = computed(() => {
+    if (this.layout() === 'vertical') {
+      return 'flex flex-col justify-between text-center';
+    }
+
+    if (!this.cols()) {
+      return 'flex flex-wrap justify-center';
+    }
 
-  readonly filteredNavItems = computed(() => {
-    return this.navItems.filter(
-      (item) =>
-        item.translationPath !== 'nav.newsletter' || this.showNewsletter(),
-    );
+    return `grid gap-2 grid-cols-${this.cols()}`;
   });
 
-  readonly navItems: NavItem[] = [
-    {
-      translationPath: 'nav.about',
-      link: ['about-us'],
-      dataTestId: 'navigation-about-us',
-    },
-    {
-      translationPath: 'nav.meetups',
-      link: ['https://meetup.angular.love/'],
-      externalLink: true,
-      dataTestId: 'navigation-meetups',
-    },
-    {
-      translationPath: 'nav.become_author',
-      link: ['become-author'],
-      dataTestId: 'navigation-become-author',
-    },
-    {
-      translationPath: 'nav.roadmap',
-      link: ['roadmap'],
-      dataTestId: 'navigation-roadmap',
-    },
-    {
-      translationPath: 'nav.newsletter',
-      link: ['newsletter'],
-      dataTestId: 'navigation-newsletter',
-    },
-  ];
   protected navigated = output();
 }
diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
index 0ee08ceac..e7b44132c 100644
--- a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
+++ b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
@@ -16,7 +16,7 @@
             <input
               aria-required="true"
               type="text"
-              class="bg-al-background text-al-muted border-al-border my-2 h-[60px] w-full flex-grow rounded-md border p-6 text-sm focus:outline-none"
+              class="bg-al-background text-al-muted border-al-border my-2 h-[60px] w-full flex-grow rounded-md border p-6 text-sm"
               [attr.aria-label]="t('namePlaceholder')"
               [placeholder]="t('namePlaceholder')"
               formControlName="name"
@@ -26,7 +26,7 @@
               <input
                 aria-required="true"
                 type="email"
-                class="bg-al-background text-al-muted border-al-border h-[60px] w-full flex-grow rounded-l-md border border-r-0 p-6 text-sm focus:outline-none"
+                class="bg-al-background text-al-muted border-al-border h-[60px] w-full flex-grow rounded-l-md border border-r-0 p-6 text-sm"
                 [attr.aria-label]="t('emailPlaceholder')"
                 [placeholder]="t('emailPlaceholder')"
                 formControlName="email"
@@ -40,7 +40,7 @@
                 (click)="postEmailAddress()"
                 size="small"
               >
-                <fast-svg name="send" size="20" />
+                <fast-svg name="send" aria-hidden="true" size="20" />
               </button>
             </div>
             <div class="mt-2 lg:mt-4">
@@ -73,7 +73,9 @@
                         !form.controls['checkbox'].value
                       )
                     "
-                    (keydown.enter)="
+                    (keydown.space)="
+                      $event.stopPropagation();
+                      $event.preventDefault();
                       form.controls['checkbox'].setValue(
                         !form.controls['checkbox'].value
                       )
diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html
index 9775557fa..765c555a1 100644
--- a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html
+++ b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html
@@ -4,7 +4,7 @@
   [cdkTrapFocusAutoCapture]="true"
   cdkTrapFocus
 >
-  <fast-svg name="circle-check" size="80" />
+  <fast-svg name="circle-check" aria-hidden="true" size="80" />
   <h2 class="my-2 text-2xl font-bold">
     {{ t('success.title') }}
   </h2>
diff --git a/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html b/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
index 8660e8d4a..daa22f00d 100644
--- a/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
+++ b/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
@@ -1,9 +1,7 @@
-<div
-  class="mb-8 flex flex-row flex-wrap justify-center gap-2 px-8 md:gap-6 xl:gap-x-[54px]"
->
+<div class="mb-8 flex flex-row gap-2 sm:gap-3">
   @for (partner of partnersList(); track partner.asset_URL) {
     <a
-      class="light:outline light:outline-1 light:outline-al-border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
+      class="light:outline light:outline-1 light:outline-al-border aspect-[2/1] w-full max-w-[84px] rounded bg-white lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
       [href]="partner.link_URL"
       [title]="partner.title"
       target="_blank"
@@ -12,7 +10,7 @@
         <img
           class="object-scale-down p-1"
           [ngSrc]="partner.asset_URL"
-          [alt]="partner.alt"
+          [alt]=""
           fill
         />
       </div>
diff --git a/libs/blog/partners/ui-partners/src/lib/partners/partners.component.html b/libs/blog/partners/ui-partners/src/lib/partners/partners.component.html
index 5806259fa..c3c61655c 100644
--- a/libs/blog/partners/ui-partners/src/lib/partners/partners.component.html
+++ b/libs/blog/partners/ui-partners/src/lib/partners/partners.component.html
@@ -1,11 +1,9 @@
 <section
   aria-labelledby="partners-heading"
-  class="bg-al-card my-8 flex w-full flex-col justify-between rounded-lg lg:my-16"
+  class="flex w-full flex-col justify-between rounded-lg bg-transparent"
 >
-  <div class="py-8 pl-8">
-    <h2 id="partners-heading" *transloco="let t" class="text-2xl font-bold">
-      {{ t(heading()) }}
-    </h2>
-  </div>
+  <h2 id="partners-heading" *transloco="let t" class="mb-4">
+    {{ t(heading()) }}
+  </h2>
   <al-partners-list [partnersList]="partnerList()"></al-partners-list>
 </section>
diff --git a/libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-footer/roadmap-dialog-footer.component.ts b/libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-footer/roadmap-dialog-footer.component.ts
index 86574d5c3..cd3d774be 100644
--- a/libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-footer/roadmap-dialog-footer.component.ts
+++ b/libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-footer/roadmap-dialog-footer.component.ts
@@ -25,6 +25,7 @@ type ShareItem = {
               target="_blank"
             >
               <fast-svg
+                aria-hidden="true"
                 class="text-al-foreground"
                 [name]="item.icon"
                 size="30"
diff --git a/libs/blog/search/feature-search/src/lib/feature-search/global-search.component.ts b/libs/blog/search/feature-search/src/lib/feature-search/global-search.component.ts
index 8612cd505..4176bba6f 100644
--- a/libs/blog/search/feature-search/src/lib/feature-search/global-search.component.ts
+++ b/libs/blog/search/feature-search/src/lib/feature-search/global-search.component.ts
@@ -4,6 +4,7 @@ import {
   HostListener,
   inject,
 } from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
 import { GlobalSearchService } from './global-search.service';
@@ -11,15 +12,21 @@ import { SearchDialogComponent } from './search-dialog';
 
 @Component({
   selector: 'al-search',
-  imports: [SearchDialogComponent, FastSvgComponent],
+  imports: [SearchDialogComponent, FastSvgComponent, TranslocoDirective],
   template: `
     <button
+      *transloco="let t; read: 'nav'"
       data-testid="header-search"
-      aria-label="Open a search dialog"
       class="flex items-center bg-transparent p-1"
+      [attr.aria-label]="t('open_search_dialog')"
       (click)="service.showSearchDialog()"
     >
-      <fast-svg name="magnifier-glass" class="text-al-pink" size="24" />
+      <fast-svg
+        name="magnifier-glass"
+        aria-hidden="true"
+        class="text-al-pink"
+        size="24"
+      />
     </button>
 
     @defer (when service.isSearchOpen()) {
diff --git a/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html b/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html
index 5980cdd23..92c4c9230 100644
--- a/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html
+++ b/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html
@@ -1,9 +1,10 @@
 <div
+  role="dialog"
   class="al-overlay fixed left-0 top-0 z-40 h-screen w-screen bg-black bg-opacity-60"
 >
   <div
     class="bg-al-card relative z-50 m-auto w-full max-w-screen-xl rounded-tl-lg rounded-tr-lg"
-    [ngClass]="adBannerStoreVisible() ? 'top-[168px]' : 'top-[84px]'"
+    [class]="adBannerStoreVisible() ? 'top-[168px]' : 'top-[84px]'"
   >
     <div class="w-full border-b p-4">
       <div
@@ -16,7 +17,7 @@
           [formControl]="searchForm"
         />
         <button class="flex flex-row items-center" (click)="goToAllResults()">
-          <fast-svg name="magnifier-glass" size="24" />
+          <fast-svg name="magnifier-glass" aria-hidden="true" size="24" />
         </button>
       </div>
     </div>
diff --git a/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.ts b/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.ts
index 6a4cfa299..6a379ba33 100644
--- a/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.ts
+++ b/libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.ts
@@ -44,7 +44,6 @@ import { GlobalSearchService } from '../global-search.service';
     SearchResultItemComponent,
     RouterLink,
     TranslocoDirective,
-    NgClass,
     FastSvgComponent,
     AlLocalizePipe,
   ],
diff --git a/libs/blog/search/ui-search-result/src/lib/search-result-item/search-result-item.component.html b/libs/blog/search/ui-search-result/src/lib/search-result-item/search-result-item.component.html
index 181e56c8b..bec81655e 100644
--- a/libs/blog/search/ui-search-result/src/lib/search-result-item/search-result-item.component.html
+++ b/libs/blog/search/ui-search-result/src/lib/search-result-item/search-result-item.component.html
@@ -15,8 +15,13 @@
     </div>
 
     <div class="flex items-center gap-4">
-      <time class="mr-4">{{ item.publishDate | date: 'dd MMM yyyy' }}</time>
-      <fast-svg name="clock" size="16" />
+      <time
+        class="mr-4"
+        [attr.datetime]="item.publishDate | date: 'yyyy-MM-dd'"
+      >
+        {{ item.publishDate | date: 'dd MMM yyyy' }}
+      </time>
+      <fast-svg name="clock" aria-hidden="true" size="16" />
       <span>{{ item.readingTime }} min</span>
     </div>
   </article>
diff --git a/libs/blog/shared/ui-focusable/.eslintrc.json b/libs/blog/shared/ui-focusable/.eslintrc.json
new file mode 100644
index 000000000..bc59e44c5
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/.eslintrc.json
@@ -0,0 +1,37 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "al",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "al",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/blog/shared/ui-focusable/README.md b/libs/blog/shared/ui-focusable/README.md
new file mode 100644
index 000000000..c0292abbd
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/README.md
@@ -0,0 +1,7 @@
+# ui-tooltip
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-tooltip` to execute the unit tests.
diff --git a/libs/blog/shared/ui-focusable/jest.config.ts b/libs/blog/shared/ui-focusable/jest.config.ts
new file mode 100644
index 000000000..f0512f94c
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui-focusable',
+  preset: '../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../../coverage/libs/blog/shared/ui-focusable',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};
diff --git a/libs/blog/shared/ui-focusable/project.json b/libs/blog/shared/ui-focusable/project.json
new file mode 100644
index 000000000..de49c67c7
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/project.json
@@ -0,0 +1,20 @@
+{
+  "name": "ui-focusable",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/blog/shared/ui-focusable/src",
+  "prefix": "al",
+  "projectType": "library",
+  "tags": ["scope:client", "type:ui"],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/blog/shared/ui-focusable/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
diff --git a/libs/blog/shared/ui-focusable/src/index.ts b/libs/blog/shared/ui-focusable/src/index.ts
new file mode 100644
index 000000000..f265c73e4
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/focusable-item.directive';
diff --git a/libs/blog/shared/ui-focusable/src/lib/focusable-item.directive.ts b/libs/blog/shared/ui-focusable/src/lib/focusable-item.directive.ts
new file mode 100644
index 000000000..0f46a6891
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/src/lib/focusable-item.directive.ts
@@ -0,0 +1,19 @@
+import { FocusableOption } from '@angular/cdk/a11y';
+import { Directive, ElementRef, inject, input } from '@angular/core';
+
+@Directive({
+  selector: '[alFocusableItem]',
+})
+export class FocusableItemDirective implements FocusableOption {
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly focusDisabled = input<boolean>(false);
+
+  get disabled(): boolean {
+    return this.focusDisabled();
+  }
+
+  focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
+}
diff --git a/libs/blog/shared/ui-focusable/src/test-setup.ts b/libs/blog/shared/ui-focusable/src/test-setup.ts
new file mode 100644
index 000000000..d2c50cd70
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/src/test-setup.ts
@@ -0,0 +1,9 @@
+import 'jest-preset-angular/setup-jest';
+
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
diff --git a/libs/blog/shared/ui-focusable/tsconfig.json b/libs/blog/shared/ui-focusable/tsconfig.json
new file mode 100644
index 000000000..52a0866e0
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/libs/blog/shared/ui-focusable/tsconfig.lib.json b/libs/blog/shared/ui-focusable/tsconfig.lib.json
new file mode 100644
index 000000000..912738705
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/tsconfig.lib.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}
diff --git a/libs/blog/shared/ui-focusable/tsconfig.spec.json b/libs/blog/shared/ui-focusable/tsconfig.spec.json
new file mode 100644
index 000000000..6e5925e5c
--- /dev/null
+++ b/libs/blog/shared/ui-focusable/tsconfig.spec.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icon-item.component.ts b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icon-item.component.ts
index 867e6a889..fe1074a6c 100644
--- a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icon-item.component.ts
+++ b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icon-item.component.ts
@@ -38,7 +38,11 @@ export type SocialMediaIconItemUi =
         [href]="href"
         target="_blank"
       >
-        <fast-svg [name]="socialMediaConfig().iconName" size="24" />
+        <fast-svg
+          aria-hidden="true"
+          [name]="socialMediaConfig().iconName"
+          size="24"
+        />
       </a>
     }
   `,
diff --git a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
index b69855a48..1eb508953 100644
--- a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
+++ b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html
@@ -1,4 +1,8 @@
-<ul aria-label="Social media" class="flex items-center justify-center">
+<ul
+  *transloco="let t; read: 'socialLinks'"
+  class="flex items-center justify-center"
+  [attr.aria-label]="t('title')"
+>
   @for (social of socials; track $index) {
     <li>
       <al-social-media-icon-item
diff --git a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
index c59d4adc8..7cf9004d1 100644
--- a/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
+++ b/libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
@@ -2,10 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  inject,
   input,
 } from '@angular/core';
-import { TranslocoService } from '@jsverse/transloco';
+import { TranslocoDirective } from '@jsverse/transloco';
 
 import {
   SocialMediaIconItemComponent,
@@ -19,11 +18,9 @@ export type SocialMediaIconsVariant = 'light' | 'dark' | 'default';
   templateUrl: './social-media-icons.component.html',
   styleUrls: ['./social-media-icons.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [SocialMediaIconItemComponent],
+  imports: [SocialMediaIconItemComponent, TranslocoDirective],
 })
 export class SocialMediaIconsComponent {
-  private _transloco = inject(TranslocoService);
-
   variant = input<SocialMediaIconsVariant>('default');
 
   readonly iconColorClass = computed(() => {
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 0a85db12c..f73a7a761 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
@@ -55,7 +55,7 @@ import { AppThemeStore } from '@angular-love/data-access-app-theme';
       }
       <router-outlet />
     </al-layout>
-    <al-footer class="mt-auto block" />
+    <al-footer class="mt-auto block" [theme]="theme()" />
   `,
   imports: [
     RouterOutlet,
diff --git a/libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html b/libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html
index 89730a5e6..511333591 100644
--- a/libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html
+++ b/libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html
@@ -21,7 +21,7 @@
       class="mr-5 mt-5 self-start transition-transform duration-300"
       [class.rotate-180]="isOpen()"
     >
-      <fast-svg name="down-arrow" size="16" />
+      <fast-svg name="down-arrow" aria-hidden="true" size="16" />
     </div>
   </div>
 
diff --git a/libs/shared/assets/src/lib/styles/main.scss b/libs/shared/assets/src/lib/styles/main.scss
index 3a39567ac..b79804d17 100644
--- a/libs/shared/assets/src/lib/styles/main.scss
+++ b/libs/shared/assets/src/lib/styles/main.scss
@@ -40,7 +40,7 @@
     --roadmap-hover-secondary: 255 0 106;
     --roadmap-label-optional: 25 26 34;
     --roadmap-label-comingSoon: 25 26 34;
-    --footer-background: 254 254 254;
+    --footer-background: 245 245 244;
   }
 }
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 0a09bc239..92fdaea58 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -225,6 +225,9 @@
         "libs/shared/utils-signal-store/src/index.ts"
       ],
       "@angular-love/storybook": ["libs/shared/storybook/src/index.ts"],
+      "@angular-love/ui-focusable": [
+        "libs/blog/shared/ui-focusable/src/index.ts"
+      ],
       "@angular-love/ui-tooltip": ["libs/blog/shared/ui-tooltip/src/index.ts"],
       "@angular-love/util-wp": ["libs/blog-bff/shared/util-wp/src/index.ts"],
       "@angular-love/utils": ["libs/utils/src/index.ts"]