diff --git a/docs-website/src/learn/_components/LearnListPage/index.jsx b/docs-website/src/learn/_components/LearnListPage/index.jsx
index 4df87a340f21e..1ceec9afa1e8a 100644
--- a/docs-website/src/learn/_components/LearnListPage/index.jsx
+++ b/docs-website/src/learn/_components/LearnListPage/index.jsx
@@ -58,8 +58,9 @@ function BlogListPageContent(props) {
             <strong>For: </strong>
             {audiences.map((audience) => (
               <button
-                className={`button button--secondary ${activeFilters.includes(audience) && "button--active"}`}
+                className={clsx(styles.button, "button button--secondary", { [styles.buttonActive]: activeFilters.includes(audience) })}
                 onClick={() => handleFilterToggle(audience)}
+                key={audience}
               >
                 {audience}
               </button>
diff --git a/docs-website/src/learn/_components/LearnListPage/styles.module.scss b/docs-website/src/learn/_components/LearnListPage/styles.module.scss
index d08b48a011de0..ce86e124afdb8 100644
--- a/docs-website/src/learn/_components/LearnListPage/styles.module.scss
+++ b/docs-website/src/learn/_components/LearnListPage/styles.module.scss
@@ -4,4 +4,10 @@
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
-}
\ No newline at end of file
+
+  .buttonActive {
+    background-color: var(--ifm-color-primary);
+    border: 1px solid var(--ifm-color-primary);
+    color: #ffffff;
+  }
+}