diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index ad8c9b217f58..9063e7399a91 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -1,40 +1,69 @@
+import AGChartsLogoDark from "../../assets/ag-charts-logo-dark.png";
 import AGChartsLogo from "../../assets/ag-charts-logo.png";
+import AGLogoDark from "../../assets/ag-grid-logo-dark.png";
 import AGLogo from "../../assets/ag-grid-logo.png";
 import WebpackIcon from "../../assets/icon-square-small.svg";
 import Link from "../Link/Link.jsx";
-import "../Sponsors/Sponsors.scss";
+
+// Tailwind CSS is used for styling
 
 const Sponsors = () => (
-  <div className="sponsors">
-    <div className="sponsors__content">
-      <div className="sponsors__link-wrapper">
+  <div className="absolute h-full w-[250px] ml-[-250px] mr-2.5">
+    <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 my-6 px-6 pb-12 overflow-hidden bg-transparent transition-colors duration-200 top-24">
+      {/* AG Grid */}
+      <div className="bg-white dark:bg-black shadow-lg rounded-lg m-2 transition-transform duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-105 dark:shadow-[0_0_40px_rgba(255,255,255,0.18)]">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+          {/* Light mode */}
           <img
-            className="agGridLogo"
             src={AGLogo}
             alt="ag grid"
             width={220}
             loading="lazy"
+            className="block dark:hidden"
+          />
+
+          {/* Dark mode */}
+          <img
+            src={AGLogoDark}
+            alt="ag grid dark"
+            width={220}
+            loading="lazy"
+            className="hidden dark:block"
           />
         </Link>
       </div>
-      <div className="sponsors__link-wrapper">
+
+      {/* AG Charts */}
+      <div className="bg-white dark:bg-black shadow-lg rounded-lg m-2 transition-transform duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-105 dark:shadow-[0_0_40px_rgba(255,255,255,0.18)]">
         <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+          {/* Light mode */}
           <img
-            className="agChartsLogo"
             src={AGChartsLogo}
             alt="ag charts"
             width={220}
             loading="lazy"
+            className="block dark:hidden"
+          />
+
+          {/* Dark mode */}
+          <img
+            src={AGChartsLogoDark}
+            alt="ag charts dark"
+            width={220}
+            loading="lazy"
+            className="hidden dark:block"
           />
         </Link>
       </div>
-      <div className="sponsors__link-wrapper-2">
+
+      {/* Webpack Sponsor */}
+      <div className="m-5 flex flex-col items-center transition-transform duration-200">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <div className="sponsors__tagline">
+          <div className="text-3xl font-normal text-gray-600 dark:text-gray-400 my-4 text-center leading-snug">
             Datagrid and Charting for Enterprise Applications
           </div>
-          <div className="sponsors__img__wrapper">
+
+          <div className="flex justify-center w-full">
             <img
               src={WebpackIcon}
               alt="webpack"
@@ -43,7 +72,10 @@ const Sponsors = () => (
               loading="lazy"
             />
           </div>
-          <div className="sponsors__footer">Proud to partner with webpack</div>
+
+          <div className="italic text-2xl text-gray-600 dark:text-gray-400 my-4 text-center">
+            Proud to partner with webpack
+          </div>
         </Link>
       </div>
     </div>
diff --git a/src/components/Sponsors/Sponsors.scss b/src/components/Sponsors/Sponsors.scss
deleted file mode 100644
index ea7fd7d6a937..000000000000
--- a/src/components/Sponsors/Sponsors.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/mixins" as *;
-
-$sponsor-text-color-dark: #cecece;
-$sponsor-text-color-light: getColor(emperor);
-$background-color-hover: rgb(50, 50, 50);
-$link-wrapper-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
-$link-wrapper-shadow-dark: 0 3px 10px 0px rgba(255, 255, 255, 0.2);
-$link-wrapper-radius: 8px;
-$link-wrapper-margin: 8px;
-$tagline-font-size: 2em;
-$footer-font-size: 1.7em;
-
-[data-theme="dark"] {
-  .agGridLogo {
-    content: url("../../assets/ag-grid-logo-dark.png");
-  }
-
-  .agChartsLogo {
-    content: url("../../assets/ag-charts-logo-dark.png");
-  }
-
-  .sponsors {
-    &__tagline,
-    &__footer {
-      margin: 1rem 0;
-      text-align: center;
-      color: $sponsor-text-color-dark;
-    }
-    &__tagline {
-      font-size: $tagline-font-size;
-    }
-    &__footer {
-      font-size: $footer-font-size;
-      font-style: italic;
-    }
-    &__link-wrapper {
-      background: rgb(12, 12, 12);
-      box-shadow: $link-wrapper-shadow-dark;
-      border-radius: $link-wrapper-radius;
-      margin: $link-wrapper-margin;
-      transition: transform 0.2s;
-      &:hover {
-        background-color: $background-color-hover;
-        transform: scale(1.05);
-      }
-    }
-  }
-}
-
-.sponsors {
-  position: absolute;
-  height: 100%;
-  width: 250px;
-  margin-left: -250px;
-  margin-right: 8px;
-
-  &__link-wrapper {
-    box-shadow: $link-wrapper-shadow;
-    border-radius: $link-wrapper-radius;
-    margin: $link-wrapper-margin;
-    transition: transform 0.2s;
-    &:hover {
-      background-color: getColor(concrete);
-      transform: scale(1.05);
-    }
-  }
-  &__tagline,
-  &__footer {
-    margin: 1rem 0;
-    text-align: center;
-    color: $sponsor-text-color-light;
-  }
-  &__tagline {
-    font-size: $tagline-font-size;
-  }
-  &__footer {
-    font-size: $footer-font-size;
-    font-style: italic;
-  }
-  &__content {
-    position: sticky;
-    display: none;
-    margin: 1.5em 0;
-    top: 6em;
-    padding: 0 1.5em 3em;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-    border-right: 2px solid getColor(concrete);
-    overflow: hidden;
-    transition: background-color 250ms;
-    @include break(xlarge) {
-      display: flex;
-    }
-  }
-  &__img {
-    &__wrapper {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    }
-  }
-}