diff --git a/source/_static/js/main.js b/source/_static/js/main.js
index caeefe3b..a126b1fe 100644
--- a/source/_static/js/main.js
+++ b/source/_static/js/main.js
@@ -426,4 +426,70 @@ window.addEventListener("DOMContentLoaded", (event) => {
       });
     }
   })();
+
+  // --------------------------------------------------
+  // Carousel
+  // --------------------------------------------------
+  (function () {
+    const carousels = document.querySelectorAll(".sd-cards-carousel");
+    var scrollLength = 1000;
+
+    const arrowIcon = `<svg width="13" height="10" viewBox="0 0 12 10">
+                    <path d="M1.707 4.137H11.5c.277 0 .5.23.5.516 0 .137-.051.27-.145.363s-.223.152-.355.152H1.707l3.148 3.254a.53.53 0 0 1 0 .73c-.098.102-.223.152-.355.152s-.258-.051-.355-.152l-4-4.133c-.195-.203-.195-.531 0-.734l4-4.133A.5.5 0 0 1 4.5 0a.5.5 0 0 1 .355.152.53.53 0 0 1 0 .73zm0 0" fill-rule="evenodd" fill="currentColor" />
+                  </svg>`;
+
+    function toggleArrows(elem, arrowLeft, arrowRight) {
+      var scrollWidth = elem.scrollWidth;
+      var scrollLeft = elem.scrollLeft + elem.clientWidth;
+
+      // Set the scroll length based on the window width
+      window.innerWidth < 1400 ? scrollLength = 500 : scrollLength = 1000;
+
+      scrollWidth - scrollLeft <= 1
+        ? arrowRight.classList.add("inactive")
+        : arrowRight.classList.remove("inactive");
+      scrollLeft === elem.clientWidth
+        ? arrowLeft.classList.add("inactive")
+        : arrowLeft.classList.remove("inactive");
+    }
+
+    if(carousels.length > 0) {
+      carousels.forEach((item) => {
+        // Get the amount of columns
+        const colsAmount = item.className.match(/(^|\s)sd-card-cols-(\w+)/g).pop().split('-').pop();
+
+        // Wrap the carousel in a div
+        const wrapper = document.createElement("div");
+        wrapper.classList.add("carousel-wrapper");
+        item.insertAdjacentElement("beforebegin", wrapper);
+
+        // Create the arrows
+        const arrowLeft = document.createElement("button");
+        arrowLeft.classList.add("carousel-arrow", "carousel-arrow--left");
+        arrowLeft.innerHTML = arrowIcon;
+        arrowLeft.onclick = function() {
+          item.scrollLeft -= scrollLength/colsAmount;
+        }
+
+        const arrowRight = document.createElement("button");
+        arrowRight.classList.add("carousel-arrow", "carousel-arrow--right");
+        arrowRight.innerHTML = arrowIcon;
+        arrowRight.onclick = function() {
+          item.scrollLeft += scrollLength/colsAmount;
+        }
+        
+        wrapper.insertAdjacentElement("afterbegin", arrowLeft);
+        wrapper.insertAdjacentElement("beforeend", arrowRight);
+
+        // Move the carousel into the wrapper
+        wrapper.appendChild(item);
+
+        // Toggle arrows on manual scroll
+        item.addEventListener("scroll", () => {
+          toggleArrows(item, arrowLeft, arrowRight);
+        });
+        toggleArrows(item, arrowLeft, arrowRight);
+      });
+    }
+  })();
 });
\ No newline at end of file
diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss
index f3607bdf..d7e8a80b 100644
--- a/source/_static/scss/includes/_misc.scss
+++ b/source/_static/scss/includes/_misc.scss
@@ -206,6 +206,8 @@
   --sd-color-shadow: none;
   --sd-color-card-border: var(--theme-light-bg);
   --sd-color-card-border-hover: var(--theme-light-hover-bg);
+  
+  font-size: $font-size-sm;
 }
 
 .sd-card-hover {
@@ -215,7 +217,7 @@
 }
 
 .sd-card-body {
-  padding: 1.5rem;
+  padding: 1.35rem;
 
   img {
     border: 0;
@@ -223,10 +225,14 @@
 }
 
 .sd-card-title {
-  line-height: 100%;
-  margin: -0.2rem 0 1rem;
+  margin-bottom: 1rem;
+  color: var(--headings-color);
 }
 
+[data-lightbox] img {
+  padding: 0;
+  margin-bottom: 1rem;
+}
 
 // -----------------------------
 // Copy button
@@ -272,4 +278,83 @@ button.copybtn {
       content: "Copied";
     }
   }
-}
\ No newline at end of file
+}
+
+// -----------------------------
+// Carousel
+// -----------------------------
+.sd-cards-carousel {
+  border-radius: $border-radius;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+
+  @include hide-scrollbars();
+
+  &.sd-card-cols-1 {
+    & > .sd-card {
+      width: 100%;
+    }
+  }
+
+  &.sd-card-cols-2 {
+    & > .sd-card {
+      width: 50%;
+    }
+  }
+
+  &.sd-card-cols-3 {
+    & > .sd-card {
+      width: 33.333%;
+    }
+  }
+
+  &[class*=sd-card-cols] > .sd-card {
+    --sd-color-card-border: none
+    border-radius: 0;
+    margin: 0;
+    padding: 0.25rem;
+
+    .sd-card-body {
+      border: 1px solid var(--table-border-color);
+      border-radius: $border-radius;
+    }
+  }
+}
+
+.carousel-wrapper {
+  position: relative;
+}
+
+.carousel-arrow {
+  background-color: var(--body-bg);
+  border: 1px solid var(--table-border-color);
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  transition: background-color 300ms, opacity 200ms;
+  color: var(--headings-color);
+
+  &:hover {
+    background-color: var(--content-nav-bg);
+  }
+
+  &.inactive {
+    opacity: 0;
+  }
+
+  &.carousel-arrow--left {
+    left: -1rem;
+  }
+
+  &.carousel-arrow--right {
+    right: -1rem;
+    transform: rotate(180deg) translateY(50%);
+  }
+}