diff --git a/src/ui/components/landing/SponsorsLine.astro b/src/ui/components/landing/SponsorsLine.astro
index d6a069c2..7528c21b 100644
--- a/src/ui/components/landing/SponsorsLine.astro
+++ b/src/ui/components/landing/SponsorsLine.astro
@@ -85,13 +85,13 @@
     };
     //templates
     const sponsorCardsTemplate = document.querySelector(
-      "#sponsor-cards",
+      "#sponsor-cards"
     ) as HTMLTemplateElement;
     const sponsorCardWithNameTemplate = document.querySelector(
-      "#sponsor-card-with-name",
+      "#sponsor-card-with-name"
     ) as HTMLTemplateElement;
     const sponsorCardWithoutNameTemplate = document.querySelector(
-      "#sponsor-card-without-name",
+      "#sponsor-card-without-name"
     ) as HTMLTemplateElement;
     if (
       sponsorCardsTemplate &&
@@ -102,7 +102,7 @@
       sponsors.forEach((type) => {
         if (type.items.length) {
           const cards = sponsorCardsTemplate.content.cloneNode(
-            true,
+            true
           ) as HTMLElement;
           const headerName = cards.querySelector("#header-text")!;
           headerName.textContent = `${sponsorConfig[type.name].header} sponsors`;
@@ -114,12 +114,12 @@
             if (sponsorConfig[type.name].hasName) {
               //WITH NAME
               const card = sponsorCardWithNameTemplate.content.cloneNode(
-                true,
+                true
               ) as HTMLDivElement;
 
               //dark image
               const imgDark = card.querySelector(
-                "#avatar-dark",
+                "#avatar-dark"
               )! as HTMLImageElement;
               if (item.imageType === ImageType.IMAGE) {
                 imgDark.src = item.sponsorEntity.avatarUrl;
@@ -132,7 +132,7 @@
               if (!item.imageType) {
                 imgDark.src = getImgLink(
                   item.sponsorEntity.avatarUrl,
-                  sponsorConfig[type.name].size,
+                  sponsorConfig[type.name].size
                 );
               }
               imgDark.alt = item.sponsorEntity.name || item.sponsorEntity.login;
@@ -141,14 +141,14 @@
               imgDark.setAttribute(
                 "style",
                 `border-radius: ${roundPercentages}%; ${getStyleString(
-                  item.darkStyle || {},
-                )}`,
+                  item.darkStyle || {}
+                )}`
               );
 
               //light image
 
               const imgLight = card.querySelector(
-                "#avatar-light",
+                "#avatar-light"
               )! as HTMLImageElement;
               if (item.imageType === ImageType.IMAGE) {
                 imgLight.src = item.sponsorEntity.avatarUrl;
@@ -161,7 +161,7 @@
               if (!item.imageType) {
                 imgLight.src = getImgLink(
                   item.sponsorEntity.avatarUrl,
-                  sponsorConfig[type.name].size,
+                  sponsorConfig[type.name].size
                 );
               }
               imgLight.alt =
@@ -169,21 +169,21 @@
               imgLight.setAttribute(
                 "style",
                 `border-radius: ${roundPercentages}%; ${getStyleString(
-                  item.lightStyle || {},
-                )}`,
+                  item.lightStyle || {}
+                )}`
               );
 
               const imgWrapper = card.querySelector(
-                "#img-wrapper",
+                "#img-wrapper"
               )! as HTMLDivElement;
               imgWrapper.setAttribute(
                 "style",
                 `width: ${sponsorConfig[type.name].size}px; height: ${
                   sponsorConfig[type.name].size
-                }px`,
+                }px`
               );
               const gitLink = card.querySelector(
-                "#git-link",
+                "#git-link"
               )! as HTMLLinkElement;
               if (item.imageType) {
                 gitLink.href = `https://${item.sponsorEntity.login}`;
@@ -204,7 +204,7 @@
               }
               gitLink.rel = item.followLink ? "" : "nofollow";
               const cardName = card.querySelector(
-                "#card-name",
+                "#card-name"
               )! as HTMLDivElement;
               if (item.sponsorEntity.name) {
                 cardName.textContent =
@@ -221,7 +221,7 @@
                     : "" + item.sponsorEntity.login;
               }
               const cardWrapper = card.querySelector(
-                "#card-wrapper",
+                "#card-wrapper"
               )! as HTMLDivElement;
               cardWrapper.classList.add("with_name");
               if (sponsorConfig[type.name].hasCard) {
@@ -239,24 +239,24 @@
             } else {
               //WITHOUT NAME
               const card = sponsorCardWithoutNameTemplate.content.cloneNode(
-                true,
+                true
               ) as HTMLDivElement;
 
               //dark image
               const imgDark = card.querySelector(
-                "#avatar-dark",
+                "#avatar-dark"
               )! as HTMLImageElement;
               const roundPercentages =
                 item.sponsorEntity.__typename === "User" ? 50 : 20;
               imgDark.setAttribute(
                 "style",
-                `border-radius: ${roundPercentages}%`,
+                `border-radius: ${roundPercentages}%`
               );
               imgDark.setAttribute(
                 "style",
                 `border-radius: ${roundPercentages}%; ${getStyleString(
-                  item.darkStyle || {},
-                )}`,
+                  item.darkStyle || {}
+                )}`
               );
               if (item.imageType === ImageType.IMAGE) {
                 imgDark.src = item.sponsorEntity.avatarUrl;
@@ -269,24 +269,24 @@
               if (!item.imageType) {
                 imgDark.src = getImgLink(
                   item.sponsorEntity.avatarUrl,
-                  sponsorConfig[type.name].size,
+                  sponsorConfig[type.name].size
                 );
               }
               imgDark.alt = item.sponsorEntity.name || item.sponsorEntity.login;
 
               //light image
               const imgLight = card.querySelector(
-                "#avatar-light",
+                "#avatar-light"
               )! as HTMLImageElement;
               imgLight.setAttribute(
                 "style",
-                `border-radius: ${roundPercentages}%`,
+                `border-radius: ${roundPercentages}%`
               );
               imgLight.setAttribute(
                 "style",
                 `border-radius: ${roundPercentages}%; ${getStyleString(
-                  item.lightStyle || {},
-                )}`,
+                  item.lightStyle || {}
+                )}`
               );
               if (item.imageType === ImageType.IMAGE) {
                 imgLight.src = item.sponsorEntity.avatarUrl;
@@ -299,23 +299,23 @@
               if (!item.imageType) {
                 imgLight.src = getImgLink(
                   item.sponsorEntity.avatarUrl,
-                  sponsorConfig[type.name].size,
+                  sponsorConfig[type.name].size
                 );
               }
               imgLight.alt =
                 item.sponsorEntity.name || item.sponsorEntity.login;
 
               const imgWrapper = card.querySelector(
-                "#img-wrapper",
+                "#img-wrapper"
               )! as HTMLDivElement;
               imgWrapper.setAttribute(
                 "style",
                 `width: ${sponsorConfig[type.name].size}px; height: ${
                   sponsorConfig[type.name].size
-                }px`,
+                }px`
               );
               const gitLink = card.querySelector(
-                "#git-link",
+                "#git-link"
               )! as HTMLLinkElement;
               if (item.imageType) {
                 gitLink.href = `https://${item.sponsorEntity.login}`;
@@ -697,9 +697,10 @@
   }
 
   .scroll {
-    overflow: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -ms-overflow-style: auto;
+    scrollbar-width: thin;
     display: flex;
     flex-direction: row;
     height: 306px;
@@ -707,8 +708,22 @@
     gap: 80px;
   }
 
+  /* Show scrollbar on desktop */
   .scroll::-webkit-scrollbar {
-    display: none;
+    display: block;
+    height: 8px;
+    background: #e8e8e8;
+  }
+  .scroll::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+  }
+
+  /* Hide scrollbar on mobile */
+  @media (max-width: 767px) {
+    .scroll::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .gradient-left,