diff --git a/content/_index.md b/content/_index.md
index da8eef5599f2000053d909244b44bb7dd612879a..d74c0ea013bf65bf5c3047939d65c7ffd95a4633 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -8,7 +8,7 @@ keywords: Cloud native, Software defined, Cloud native development, Automotive s
 
 # {{< figure class="banner-img" src="/images/ARM1828_SOAFEE_Dark_ST2.svg" alt="SOAFEE Logo">}}
 
-{{< banner >}}
+{{< carousel >}}
 
 ## Overview
 
diff --git a/themes/soafee/layouts/partials/banner.html b/themes/soafee/layouts/partials/banner.html
new file mode 100644
index 0000000000000000000000000000000000000000..5e287709d8bab6977a373d50a9055ead664d7b24
--- /dev/null
+++ b/themes/soafee/layouts/partials/banner.html
@@ -0,0 +1,20 @@
+{{ $self := .ctx | default . }}
+
+<div class="card banner bg-light text-light">
+    {{ $ctx := (dict 
+        "src" $self.background 
+        "alt" $self.title 
+        "media_page" "headless_media"
+        "class" "card-img" )}}
+    {{ with (dict "Page" .Page "ctx" $ctx) }}
+        {{ partial "img" . }}
+    {{ end }}
+    <div class="card-img-overlay d-flex flex-column">
+        <h3 class="card-title">{{ $self.title }} </h3>
+        <hr>
+        <p class="card-text text-center flex-grow-1">
+            {{ $self.description }}
+        </p>
+        <a href="{{ .Page.Permalink }}" class="btn btn-primary mt-auto">More Details</a>
+    </div>
+</div>
diff --git a/themes/soafee/layouts/partials/img.html b/themes/soafee/layouts/partials/img.html
index e639312af8dd72cdc839bc40e56ab98308a22936..0334b214c8cf8cb380dc239b2d20fe1f92495f56 100644
--- a/themes/soafee/layouts/partials/img.html
+++ b/themes/soafee/layouts/partials/img.html
@@ -2,16 +2,16 @@
 {{ $breakpoints := dict "sm" 576 "md" 768 "lg" 992 "xl" 1200 "xxl" 1400 }}
 
 <!-- TODO: Filter breakpoints if needed -->
+{{ $ctx := .ctx | default . }}
 
-{{ $alt := .alt | default "" }}
-{{ $columns := .columns | default 1 }}
-
-<!-- Allow specifying a resource bundle to source the image from -->
-{{ $mediaPage := .media_page | default .Page.File.Path }}
-{{ $resourcesPage := .site.GetPage $mediaPage }}
-{{ $image := $resourcesPage.Resources.GetMatch .src }}
+{{ $alt := $ctx.alt | default "" }}
+{{ $columns := $ctx.columns | default 1 }}
 
 
+<!-- Allow specifying a resource bundle to source the image from -->
+{{ $mediaPage := $ctx.media_page | default .Page.File.Path }}
+{{ $resourcesPage := .Page.Site.GetPage $mediaPage }}
+{{ $image := $resourcesPage.Resources.GetMatch $ctx.src }}
 {{ $imgSrcSet := slice }}
 {{ $sizes := slice }}
 {{ range $breakpoints }}
diff --git a/themes/soafee/layouts/shortcodes/banner.html b/themes/soafee/layouts/shortcodes/banner.html
index 53954dfdd2e773b8166cf3b70a6b7bb72f846879..3cba7ec4a67ecfe6e18c01daaf8ff0393810a558 100644
--- a/themes/soafee/layouts/shortcodes/banner.html
+++ b/themes/soafee/layouts/shortcodes/banner.html
@@ -1,14 +1,8 @@
+{{ $bannerSourcePage := .Get "source" | default .Page.File.Path }}
+{{ $page := .Page.Site.GetPage $bannerSourcePage }}
 
-{{ range where .Site.Pages "Params.banner.active" true }}
-  <div class="card banner bg-light text-light">
-    {{ partial "img" (dict "site" $.Site "src" .Params.banner.background "alt" .Params.banner.title "media_page" "headless_media" "class" "card-img") }}
-    <div class="card-img-overlay d-flex flex-column">
-        <h3 class="card-title">{{ .Params.banner.title }} </h3>
-        <hr>
-        <p class="card-text text-center flex-grow-1">
-            {{ .Params.banner.description }}
-        </p>
-        <a href="{{ .Permalink }}" class="btn btn-primary mt-auto">More Details</a>
-    </div>
-</div>
+{{ with $page }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
 {{ end }}
diff --git a/themes/soafee/layouts/shortcodes/carousel.html b/themes/soafee/layouts/shortcodes/carousel.html
new file mode 100644
index 0000000000000000000000000000000000000000..84cd58138c8f637f7c9d9dd9342738b8f084b079
--- /dev/null
+++ b/themes/soafee/layouts/shortcodes/carousel.html
@@ -0,0 +1,47 @@
+{{ $id := .Get "id" | default "carouselId" }}
+<!-- TODO: Add param to enable indicators -->
+{{ $showIndicators := false }}
+
+{{ $posts := (where .Site.Pages "Params.banner.active" "eq" true)}}
+
+
+<!-- If there are more than one posts, add the carousel-->
+{{ if gt (len $posts) 1 }}
+<div id="{{ $id }}" class="carousel slide" data-bs-ride="carousel">
+{{ if eq $showIndicators true}}
+    <div class="carousel-indicators">
+{{ range $index,$post := $posts }}
+        <button type="button" data-bs-target="#{{ $id }}" data-bs-slide-to="{{$index}}" {{ if eq $index 0 }}class="active" aria-current="true" {{ end }} aria-label="Slide {{ $index }}"></button>
+{{ end }}
+    </div>
+{{ end }}
+    <div class="carousel-inner">
+{{ range $index,$post := $posts }}
+        <div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
+            <div class="card banner bg-light text-light">
+                {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+                    {{ partial "banner" . }}
+                {{ end }}
+            </div>
+      </div>
+{{ end }}
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </button>
+</div>
+
+{{ else if (eq (len $posts) 1) }}
+<!-- Else, if there is just one post, add the banner-->
+{{ range $posts }}
+    {{ with (dict "Page" .Page "ctx" .Params.banner)}}
+        {{ partial "banner" . }}
+    {{ end }}
+{{ end }}
+{{ end }}
+
diff --git a/themes/soafee/layouts/shortcodes/imagegrid.html b/themes/soafee/layouts/shortcodes/imagegrid.html
index 80091d3cf130689d51a8d7ca60d9997154a7c384..fb29537533b8413b0f2849bb40537ee49d9644ff 100644
--- a/themes/soafee/layouts/shortcodes/imagegrid.html
+++ b/themes/soafee/layouts/shortcodes/imagegrid.html
@@ -16,6 +16,7 @@
 
 {{ $mediaPage := .Get "media_page" | default .Page.File.Path }}
 {{ $resourcesPage := .Site.GetPage $mediaPage }}
+{{ $page := .Page }}
 
 <div class="imagegrid row">
     {{ range index .Site.Data (split .Params.data "." ) }}
@@ -31,7 +32,9 @@
         {{ end }}
 
         <div class="col-md">
-        {{ partial "img" (dict "site" $.Site "src" .image "alt" .alt "columns" 3 "media_page" $mediaPage )}}
+            <a href="{{.url}}" style="width:100%">
+        {{ partial "img" (dict "Page" $page "src" .image "alt" .alt "columns" $columns "media_page" $mediaPage )}}
+            </a>
         </div>
 
         {{ if eq $row $lastRow }}