diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index ebc810eb..edf10769 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 { useSearchQuery } from "@/hooks/useSearchQuery";
 import { MediaItem } from "@/utils/mediaTypes";
 
@@ -60,6 +61,8 @@ function MediaCardContent({
 
   const [searchQuery] = useSearchQuery();
 
+  const { isMobile } = useIsMobile();
+
   if (media.year) {
     dotListContent.push(media.year.toFixed());
   }
@@ -145,6 +148,15 @@ function MediaCardContent({
             </>
           ) : null}
 
+          <div
+            className={classNames("absolute", {
+              "bookmark-button": !isMobile,
+            })}
+            onClick={(e) => e.preventDefault()}
+          >
+            <MediaBookmarkButton media={media} />
+          </div>
+
           {searchQuery.length > 0 ? (
             <div className="absolute" onClick={(e) => e.preventDefault()}>
               <MediaBookmarkButton media={media} />
diff --git a/src/components/utils/Flare.css b/src/components/utils/Flare.css
index 1c17cda8..b46bdbc6 100644
--- a/src/components/utils/Flare.css
+++ b/src/components/utils/Flare.css
@@ -5,3 +5,12 @@
 .hover\:flare-enabled:hover .flare-light {
   opacity: 1 !important;
 }
+
+.bookmark-button {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.group:hover .bookmark-button {
+  opacity: 1;
+}