diff --git a/app/components/HoverPreview/Components.tsx b/app/components/HoverPreview/Components.tsx
index 9e2967c05..55ee05abb 100644
--- a/app/components/HoverPreview/Components.tsx
+++ b/app/components/HoverPreview/Components.tsx
@@ -56,7 +56,7 @@ export const CardContent = styled.div`
 // &:after — gradient mask for overflow text
 export const Card = styled.div<{ fadeOut?: boolean; $borderRadius?: string }>`
   backdrop-filter: blur(10px);
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   padding: ${CARD_PADDING}px;
   width: ${CARD_WIDTH}px;
   font-size: 0.9em;
diff --git a/app/components/HoverPreview/HoverPreviewLink.tsx b/app/components/HoverPreview/HoverPreviewLink.tsx
index 702fea52e..41fa4a1ab 100644
--- a/app/components/HoverPreview/HoverPreviewLink.tsx
+++ b/app/components/HoverPreview/HoverPreviewLink.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import {
   Preview,
@@ -44,6 +45,7 @@ const Thumbnail = styled.img`
   object-fit: cover;
   max-width: ${CARD_WIDTH}px;
   height: ${THUMBNAIL_HEIGHT}px;
+  background: ${s("menuBackground")};
 `;
 
 export default HoverPreviewLink;