diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 17ada085..9c7a55c3 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -66,7 +66,7 @@ function MediaCardContent({
 
   return (
     <Flare.Base
-      className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${
+      className={`group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
         canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
       }`}
       tabIndex={canLink ? 0 : -1}
@@ -81,13 +81,13 @@ function MediaCardContent({
         })}
       />
       <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${
+        className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-300 ${
           canLink ? "group-hover:scale-95" : "opacity-60"
         }`}
       >
         <div
           className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100",
+            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
             {
               "group-hover:rounded-lg": canLink,
             },
@@ -142,13 +142,13 @@ function MediaCardContent({
           ) : null}
 
           <div
-            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${
+            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
               closable ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
           >
             <IconPatch
               clickable
-              className="text-2xl text-mediaCard-badgeText"
+              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
               onClick={() => closable && onClose?.()}
               icon={Icons.X}
             />
diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
index 93a64ad2..fe57cc17 100644
--- a/src/pages/Discover.tsx
+++ b/src/pages/Discover.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { Divider } from "@/components/utils/Divider";
+import { Flare } from "@/components/utils/Flare";
 import { HomeLayout } from "@/pages/layouts/HomeLayout";
 import { conf } from "@/setup/config";
 import { useThemeStore } from "@/stores/theme";
@@ -270,30 +271,51 @@ export function Discover() {
           onWheel={(e) => handleWheel(e, categorySlug)}
         >
           {medias.slice(0, 20).map((media) => (
-            <a
-              key={media.id}
-              onClick={
-                () =>
+            <Flare.Base
+              className="group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable"
+              tabIndex={0} // Assuming all items are linkable for simplicity; adjust as needed
+              onKeyUp={(e) => {
+                if (e.key === "Enter") {
                   navigate(
                     `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
                       isTVShow ? media.name : media.title
                     }`,
-                  )
-                // Navigate instead of href!
-              }
-              rel="noopener noreferrer"
-              className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5"
-              style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
+                  );
+                }
+              }}
             >
-              <img
-                src={`https://image.tmdb.org/t/p/w500${media.poster_path}`} // Dont change this fucking line!
-                alt={isTVShow ? media.name : media.title}
-                loading="lazy"
-                className="rounded-xl"
+              <Flare.Light
+                flareSize={300}
+                cssColorVar="--colors-mediaCard-hoverAccent"
+                backgroundClass="bg-mediaCard-hoverBackground duration-100"
+                className="rounded-xl bg-background-main group-hover:opacity-100"
               />
-            </a>
+              <Flare.Child className="pointer-events-auto relative mb-2 p-3 transition-transform duration-300 group-hover:scale-95">
+                <a
+                  key={media.id}
+                  onClick={() =>
+                    navigate(
+                      `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
+                        isTVShow ? media.name : media.title
+                      }`,
+                    )
+                  }
+                  rel="noopener noreferrer"
+                  className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5"
+                  style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
+                >
+                  <img
+                    src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
+                    alt={isTVShow ? media.name : media.title}
+                    loading="lazy"
+                    className="rounded-xl"
+                  />
+                </a>
+              </Flare.Child>
+            </Flare.Base>
           ))}
         </div>
+
         <button
           type="button"
           title="Back"
diff --git a/themes/default.ts b/themes/default.ts
index 93a0673e..d7266766 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -70,6 +70,7 @@ const tokens = {
     c900: "#0C1216",
   },
   shade: {
+    c25: "#5d5db3",
     c50: "#676790",
     c100: "#52527A",
     c200: "#3F3F60",
@@ -172,7 +173,7 @@ export const defaultTheme = {
       // media cards
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,
diff --git a/themes/list/blue.ts b/themes/list/blue.ts
index 4266b3c3..3b1776b8 100644
--- a/themes/list/blue.ts
+++ b/themes/list/blue.ts
@@ -14,6 +14,7 @@ const tokens = {
     c900: "#03102a"
   },
   shade: {
+    c25: "#5d7db3",
     c50: "#756790",
     c100: "#60527a",
     c200: "#4a3f60",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,
diff --git a/themes/list/gray.ts b/themes/list/gray.ts
index bf37f20f..78e96a0b 100644
--- a/themes/list/gray.ts
+++ b/themes/list/gray.ts
@@ -14,6 +14,7 @@ const tokens = {
     c900: "#0b0d22"
   },
   shade: {
+    c25: "#9c9c9c",
     c50: "#7c7c7c",
     c100: "#666666",
     c200: "#4f4f4f",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,
diff --git a/themes/list/red.ts b/themes/list/red.ts
index 5b6fcb44..cc72fdae 100644
--- a/themes/list/red.ts
+++ b/themes/list/red.ts
@@ -14,6 +14,7 @@ const tokens = {
     c900: "#220c0c"
   },
   shade: {
+    c25: "#b3675d",
     c50: "#9c605c",
     c100: "#834d49",
     c200: "#673b38",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,
diff --git a/themes/list/teal.ts b/themes/list/teal.ts
index ea0f1323..6076071c 100644
--- a/themes/list/teal.ts
+++ b/themes/list/teal.ts
@@ -14,6 +14,7 @@ const tokens = {
     c900: "#0b1822"
   },
   shade: {
+    c25: "#5db3a8",
     c50: "#677c90",
     c100: "#52667a",
     c200: "#3f4f60",
@@ -121,7 +122,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c600,
-        hoverAccent: tokens.shade.c50,
+        hoverAccent: tokens.shade.c25,
         hoverShadow: tokens.shade.c900,
         shadow: tokens.shade.c700,
         barColor: tokens.ash.c200,