diff --git a/packages/react/src/components/F0Box/F0Box.tsx b/packages/react/src/components/F0Box/F0Box.tsx
index c81cbcbc9c..33f8b8a84b 100644
--- a/packages/react/src/components/F0Box/F0Box.tsx
+++ b/packages/react/src/components/F0Box/F0Box.tsx
@@ -109,6 +109,7 @@ export const F0Box = forwardRef<HTMLDivElement, F0BoxProps>(
       maxHeight,
       // Background
       background,
+      hoverBackground,
       // Border
       borderColor,
       border,
@@ -167,6 +168,7 @@ export const F0Box = forwardRef<HTMLDivElement, F0BoxProps>(
         ref={ref}
         className={cn(
           hasPerSideBorder && "border-0",
+          hoverBackground && "transition-colors",
           boxVariants({
             display,
             position,
@@ -197,6 +199,7 @@ export const F0Box = forwardRef<HTMLDivElement, F0BoxProps>(
             maxWidth,
             maxHeight,
             background,
+            hoverBackground,
             borderColor,
             border,
             borderTop,
diff --git a/packages/react/src/components/F0Box/index.tsx b/packages/react/src/components/F0Box/index.tsx
index 3c58fd34ba..3263537379 100644
--- a/packages/react/src/components/F0Box/index.tsx
+++ b/packages/react/src/components/F0Box/index.tsx
@@ -26,6 +26,7 @@ export type {
   FlexWrapToken,
   FractionToken,
   GapToken,
+  HoverBackgroundToken,
   JustifyContentToken,
   MarginToken,
   NumericSizeToken,
diff --git a/packages/react/src/components/F0Box/types.ts b/packages/react/src/components/F0Box/types.ts
index f04bb70f29..35e4f75868 100644
--- a/packages/react/src/components/F0Box/types.ts
+++ b/packages/react/src/components/F0Box/types.ts
@@ -168,6 +168,15 @@ export type BackgroundToken =
   | "selected-bold"
   | "overlay"
 
+/** Hover background tokens mapped to the f1 theme hover states */
+export type HoverBackgroundToken =
+  | "default"
+  | "secondary"
+  | "accent-bold"
+  | "promote"
+  | "selected"
+  | "selected-bold"
+
 /** Border color tokens mapped to the f1 theme */
 export type BorderColorToken =
   | "default"
diff --git a/packages/react/src/components/F0Box/utils/background.ts b/packages/react/src/components/F0Box/utils/background.ts
index 1045ca9876..49d971d447 100644
--- a/packages/react/src/components/F0Box/utils/background.ts
+++ b/packages/react/src/components/F0Box/utils/background.ts
@@ -1,4 +1,4 @@
-import type { BackgroundToken } from "../types"
+import type { BackgroundToken, HoverBackgroundToken } from "../types"
 
 export const backgroundVariants = {
   background: {
@@ -25,4 +25,12 @@ export const backgroundVariants = {
     "selected-bold": "bg-f1-background-selected-bold",
     overlay: "bg-f1-background-overlay",
   } satisfies Record<BackgroundToken, string>,
+  hoverBackground: {
+    default: "hover:bg-f1-background-hover",
+    secondary: "hover:bg-f1-background-secondary-hover",
+    "accent-bold": "hover:bg-f1-background-accent-bold-hover",
+    promote: "hover:bg-f1-background-promote-hover",
+    selected: "hover:bg-f1-background-selected-hover",
+    "selected-bold": "hover:bg-f1-background-selected-bold-hover",
+  } satisfies Record<HoverBackgroundToken, string>,
 }
diff --git a/packages/react/src/components/F0Box/utils/responsive-safelist.ts b/packages/react/src/components/F0Box/utils/responsive-safelist.ts
index ec7331a810..170772d178 100644
--- a/packages/react/src/components/F0Box/utils/responsive-safelist.ts
+++ b/packages/react/src/components/F0Box/utils/responsive-safelist.ts
@@ -144,6 +144,16 @@ export const RESPONSIVE_SAFELIST = [
   "xl:bg-f1-background-positive", "xl:bg-f1-background-positive-bold",
   "xl:bg-f1-background-selected", "xl:bg-f1-background-selected-secondary", "xl:bg-f1-background-selected-bold", "xl:bg-f1-background-overlay",
 
+  // ===================== HOVER BACKGROUND =====================
+  "sm:hover:bg-f1-background-hover", "sm:hover:bg-f1-background-secondary-hover", "sm:hover:bg-f1-background-accent-bold-hover",
+  "sm:hover:bg-f1-background-promote-hover", "sm:hover:bg-f1-background-selected-hover", "sm:hover:bg-f1-background-selected-bold-hover",
+  "md:hover:bg-f1-background-hover", "md:hover:bg-f1-background-secondary-hover", "md:hover:bg-f1-background-accent-bold-hover",
+  "md:hover:bg-f1-background-promote-hover", "md:hover:bg-f1-background-selected-hover", "md:hover:bg-f1-background-selected-bold-hover",
+  "lg:hover:bg-f1-background-hover", "lg:hover:bg-f1-background-secondary-hover", "lg:hover:bg-f1-background-accent-bold-hover",
+  "lg:hover:bg-f1-background-promote-hover", "lg:hover:bg-f1-background-selected-hover", "lg:hover:bg-f1-background-selected-bold-hover",
+  "xl:hover:bg-f1-background-hover", "xl:hover:bg-f1-background-secondary-hover", "xl:hover:bg-f1-background-accent-bold-hover",
+  "xl:hover:bg-f1-background-promote-hover", "xl:hover:bg-f1-background-selected-hover", "xl:hover:bg-f1-background-selected-bold-hover",
+
   // ===================== BORDER COLOR =====================
   "sm:border-f1-border", "sm:border-f1-border-secondary", "sm:border-f1-border-bold",
   "sm:border-f1-border-selected", "sm:border-f1-border-selected-bold",
diff --git a/packages/react/src/components/F0Box/utils/responsive.ts b/packages/react/src/components/F0Box/utils/responsive.ts
index 7944ef74eb..e66cc55fbc 100644
--- a/packages/react/src/components/F0Box/utils/responsive.ts
+++ b/packages/react/src/components/F0Box/utils/responsive.ts
@@ -13,6 +13,7 @@ import type {
   FlexDirectionToken,
   FlexWrapToken,
   GapToken,
+  HoverBackgroundToken,
   JustifyContentToken,
   MarginToken,
   OverflowToken,
@@ -74,6 +75,7 @@ export interface ResponsiveStyleProps {
   maxHeight?: SizeToken
   // Background
   background?: BackgroundToken
+  hoverBackground?: HoverBackgroundToken
   // Border
   borderColor?: BorderColorToken
   border?: BorderWidthToken