diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index 5a1e82b5474d..84b0892db897 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -9,9 +9,6 @@ import Additional from "./AdditionalSupporters.mjs";
 /* eslint import/no-unresolved: ["error", { ignore: ["_supporters\.json$"] }] */
 import Backers from "./_supporters.json";
 
-// Load Styling
-import "./Support.scss";
-
 const SUPPORTERS = [...Backers];
 
 // Merge or add additional backers/sponsors
@@ -88,6 +85,16 @@ function formatMoney(number) {
   return Math.round(number).toLocaleString("en-US");
 }
 
+const AVATAR_CLASSES = {
+  backer:
+    "inline-block w-[31px] h-[31px] rounded-full border border-white shadow-[0_0_0_1px_rgb(112,202,10)] overflow-hidden align-middle",
+  latest: "max-h-16 max-w-48 align-middle",
+  bronze: "max-h-8 max-w-24 align-middle",
+  silver: "max-h-16 max-w-48 align-middle",
+  gold: "max-h-24 max-w-72 align-middle",
+  platinum: "max-h-32 max-w-full min-[400px]:max-w-96 align-middle",
+};
+
 export default class Support extends Component {
   static propTypes = {
     rank: PropTypes.string,
@@ -198,8 +205,11 @@ export default class Support extends Component {
                   type === "monthly" ? "Monthly " : ""
                 }Sponsors`}
         </h2>
-        <div ref={(el) => (this.containerRef = el)} className="support">
-          <div className="support__description">
+        <div
+          ref={(el) => (this.containerRef = el)}
+          className="flex flex-wrap justify-center px-2 pb-4"
+        >
+          <div className="w-full mb-4">
             {rank === "backer" ? (
               <p>
                 The following <b>Backers</b> are individuals who have
@@ -216,7 +226,7 @@ export default class Support extends Component {
               </p>
             ) : (
               <p>
-                <b className="support__rank">
+                <b className="capitalize mr-1">
                   {type === "monthly" ? `${rank} monthly` : rank} sponsors
                 </b>
                 {type === "monthly" ? (
@@ -246,7 +256,7 @@ export default class Support extends Component {
               } ($${formatMoney(supporter.monthlyDonations / 100)} monthly)`}
             >
               <a
-                className="support__item"
+                className="relative mx-0.5 mb-0.5 dark:bg-white"
                 target="_blank"
                 rel="noopener noreferrer nofollow"
                 href={
@@ -256,7 +266,7 @@ export default class Support extends Component {
               >
                 {
                   <img
-                    className={`support__${rank}-avatar`}
+                    className={AVATAR_CLASSES[rank]}
                     src={
                       inView && supporter.avatar ? supporter.avatar : SmallIcon
                     }
@@ -273,9 +283,9 @@ export default class Support extends Component {
             </Tooltip>
           ))}
 
-          <div className="support__bottom">
+          <div className="w-full mt-4">
             <a
-              className="support__button"
+              className="inline-block py-[0.4em] px-[1em] uppercase text-[#175d96] border border-[#175d96] rounded-4xl transition-all duration-[250ms] hover:bg-[#175d96] hover:text-white"
               href="https://opencollective.com/webpack#support"
             >
               Become a {rank === "backer" ? "backer" : "sponsor"}
diff --git a/src/components/Support/Support.scss b/src/components/Support/Support.scss
deleted file mode 100644
index e343838f49d8..000000000000
--- a/src/components/Support/Support.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@use "../../styles/partials/functions" as *;
-
-.support {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 0 0.5em 1em;
-
-  &__description {
-    flex: 0 0 100%;
-    margin-bottom: 1em;
-  }
-
-  &__rank {
-    text-transform: capitalize;
-
-    &:after {
-      content: " ";
-    }
-  }
-
-  &__item {
-    position: relative;
-    margin: 0 2px 2px 2px;
-    @media (prefers-color-scheme: dark) {
-      background-color: getColor(white);
-    }
-  }
-
-  &__latest-avatar {
-    max-height: 64px;
-    max-width: 192px;
-    vertical-align: middle;
-  }
-
-  &__bronze-avatar {
-    max-height: 32px;
-    max-width: 96px;
-    vertical-align: middle;
-  }
-
-  &__silver-avatar {
-    max-height: 64px;
-    max-width: 192px;
-    vertical-align: middle;
-  }
-
-  &__gold-avatar {
-    max-height: 96px;
-    max-width: 288px;
-    vertical-align: middle;
-  }
-
-  &__platinum-avatar {
-    max-height: 128px;
-    max-width: 100%;
-    vertical-align: middle;
-
-    @media (min-width: 400px) {
-      max-width: 384px;
-    }
-  }
-
-  &__backer-avatar {
-    display: inline-block;
-    width: 31px;
-    height: 31px;
-    border-radius: 50%;
-    border: 1px solid white;
-    box-shadow: 0 0 0 1px rgb(112, 202, 10);
-    overflow: hidden;
-  }
-
-  &__bottom {
-    flex: 0 0 100%;
-    margin-top: 1em;
-  }
-
-  &__button {
-    display: inline-block;
-    padding: 0.4em 1em;
-    text-transform: uppercase;
-    color: getColor(denim);
-    border: 1px solid getColor(denim);
-    border-radius: 1.25em;
-    transition: all 250ms;
-
-    &:hover {
-      background: getColor(denim);
-      color: getColor(white);
-    }
-  }
-}