diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index fb29d5e4..1b151c44 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { MediaItem } from "@/utils/mediaTypes";
 
 import { MediaBookmarkButton } from "./MediaBookmark";
@@ -57,6 +58,8 @@ function MediaCardContent({
 
   const dotListContent = [t(`media.types.${media.type}`)];
 
+  const { isMobile } = useIsMobile();
+
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -143,7 +146,9 @@ function MediaCardContent({
           ) : null}
 
           <div
-            className="absolute bookmark-button"
+            className={classNames("absolute", {
+              "bookmark-button": !isMobile,
+            })}
             onClick={(e) => e.preventDefault()}
           >
             <MediaBookmarkButton media={media} />
diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index c4a721da..b46bdbc6 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -14,9 +14,3 @@
 .group:hover .bookmark-button {
   opacity: 1;
 }
-
-@media (max-width: 1024px) {
-  .bookmark-button {
-    opacity: 1 !important;
-  }
-}