diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index ad8c9b217f58..7de93a0676be 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -1,53 +1,75 @@
+import { useEffect, useState } from "react";
+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";
 
-const Sponsors = () => (
-  <div className="sponsors">
-    <div className="sponsors__content">
-      <div className="sponsors__link-wrapper">
-        <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <img
-            className="agGridLogo"
-            src={AGLogo}
-            alt="ag grid"
-            width={220}
-            loading="lazy"
-          />
-        </Link>
-      </div>
-      <div className="sponsors__link-wrapper">
-        <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <img
-            className="agChartsLogo"
-            src={AGChartsLogo}
-            alt="ag charts"
-            width={220}
-            loading="lazy"
-          />
-        </Link>
-      </div>
-      <div className="sponsors__link-wrapper-2">
-        <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <div className="sponsors__tagline">
-            Datagrid and Charting for Enterprise Applications
-          </div>
-          <div className="sponsors__img__wrapper">
+const useDarkMode = () => {
+  const [isDark, setIsDark] = useState(
+    typeof document !== "undefined" &&
+      document.documentElement.getAttribute("data-theme") === "dark",
+  );
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const observer = new MutationObserver(() => {
+      setIsDark(document.documentElement.getAttribute("data-theme") === "dark");
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  return isDark;
+};
+
+const Sponsors = () => {
+  const isDark = useDarkMode();
+  return (
+    <div className="absolute mr-[8px] ml-[-250px] h-full w-[250px]">
+      <div className="sticky hidden my-[1.5em] top-6em mx-[0] pt-[0] px-[1.5em] pb-[3em] flex-wrap justify-center items-start overflow-hidden 2xl:flex border-r-2 border-solid border-[rgba(141, 214, 249, 0.35)] transition-colors duration-250">
+        <div className="rounded-[8px] m-[8px] transition-transform duration-200 dark:hover:bg-[rgb(50,50,50)] hover:scale-105 shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] hover:bg-[#f2f2f2]">
+          <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+            <img
+              className="agGridLogo"
+              src={isDark ? AGLogoDark : AGLogo}
+              alt="ag grid"
+              width={220}
+              loading="lazy"
+            />
+          </Link>
+        </div>
+        <div className="rounded-[8px] m-[8px] transition-transform duration-200 dark:hover:bg-[rgb(50,50,50)] hover:scale-105 shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] hover:bg-[#f2f2f2]">
+          <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
             <img
-              src={WebpackIcon}
-              alt="webpack"
-              width={150}
-              height={150}
+              className="agChartsLogo"
+              src={isDark ? AGChartsLogoDark : AGChartsLogo}
+              alt="ag charts"
+              width={220}
               loading="lazy"
             />
-          </div>
-          <div className="sponsors__footer">Proud to partner with webpack</div>
-        </Link>
+          </Link>
+        </div>
+        <div className="sponsors__link-wrapper-2">
+          <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+            <div className="text-center text-[2em] my-[1rem] mx-[0] text-[#535353] dark:text-[#f2f2f2]">
+              Datagrid and Charting for Enterprise Applications
+            </div>
+            <div className="flex justify-center">
+              <img src={WebpackIcon} alt="ag grid" width={220} loading="lazy" />
+            </div>
+            <div className="text-center italic text-[1.7em] my-[1rem] mx-[0] text-[#535353] dark:text-[#f2f2f2]">
+              Proud to partner with webpack
+            </div>
+          </Link>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Sponsors;
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%;
-    }
-  }
-}