diff --git a/client/src/Components/actions-menu/index.tsx b/client/src/Components/actions-menu/index.tsx
index 726ef6821..2eca19cee 100644
--- a/client/src/Components/actions-menu/index.tsx
+++ b/client/src/Components/actions-menu/index.tsx
@@ -33,7 +33,7 @@ export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
 				onClick={handleClick}
 				sx={{
 					"&:hover": {
-						backgroundColor: theme.palette.action.rowHover,
+						backgroundColor: theme.palette.action.controlHover,
 					},
 				}}
 			>
diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx
index 81205e967..1543766fc 100644
--- a/client/src/Components/design-elements/StatBox.tsx
+++ b/client/src/Components/design-elements/StatBox.tsx
@@ -11,9 +11,10 @@ import type { SxProps } from "@mui/material";
 type GradientBox = React.PropsWithChildren<{
 	palette?: PaletteKey;
 	sx?: SxProps;
+	interactive?: boolean;
 }>;
 
-export const GradientBox = ({ children, palette, sx }: GradientBox) => {
+export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
@@ -30,6 +31,12 @@ export const GradientBox = ({ children, palette, sx }: GradientBox) => {
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 				width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
 				background: bg,
+				...(interactive && {
+					cursor: "pointer",
+					"&:hover": {
+						backgroundImage: `linear-gradient(${theme.palette.action.rowHover}, ${theme.palette.action.rowHover}), ${bg}`,
+					},
+				}),
 				...sx,
 			}}
 		>
@@ -62,15 +69,8 @@ export const StatBox = ({
 	return (
 		<GradientBox
 			palette={palette}
-			sx={{
-				...(sx as object),
-				...(onClick
-					? {
-							cursor: "pointer",
-							"&:hover": { backgroundColor: theme.palette.action.rowHover },
-						}
-					: {}),
-			}}
+			interactive={Boolean(onClick)}
+			sx={{ ...(sx as object) }}
 		>
 			<Stack onClick={onClick}>
 				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>
diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx
index e4e636f80..c57616740 100644
--- a/client/src/Components/design-elements/Table.tsx
+++ b/client/src/Components/design-elements/Table.tsx
@@ -79,6 +79,7 @@ export function DataTable<
 	};
 
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isInteractive = Boolean(onRowClick) || expandableRows;
 
 	if (data.length === 0 || headers.length === 0) {
 		return (
@@ -107,8 +108,8 @@ export function DataTable<
 								borderColor: theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
 								padding: theme.spacing(LAYOUT.XS),
-								cursor: onRowClick ? "pointer" : "default",
-								...(onRowClick && {
+								cursor: isInteractive ? "pointer" : "default",
+								...(isInteractive && {
 									"&:hover": {
 										backgroundColor: theme.palette.action.rowHover,
 									},
@@ -240,9 +241,9 @@ export function DataTable<
 						return (
 							<Fragment key={key}>
 								<TableRow
-									className={onRowClick || expandableRows ? "is-clickable" : undefined}
+									className={isInteractive ? "is-clickable" : undefined}
 									sx={{
-										cursor: onRowClick || expandableRows ? "pointer" : "default",
+										cursor: isInteractive ? "pointer" : "default",
 										...(getRowSx?.(row) as object),
 									}}
 									onClick={() => {
@@ -328,7 +329,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				flexShrink: 0,
 				ml: { xs: 0, md: 2.5 },
 				"& .MuiIconButton-root:not(.Mui-disabled):hover": {
-					backgroundColor: theme.palette.action.rowHover,
+					backgroundColor: theme.palette.action.controlHover,
 				},
 			}}
 			className="table-pagination-actions"
@@ -432,7 +433,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				flexShrink: 0,
 				ml: { xs: 0, md: 2.5 },
 				"& .MuiIconButton-root:not(.Mui-disabled):hover": {
-					backgroundColor: theme.palette.action.rowHover,
+					backgroundColor: theme.palette.action.controlHover,
 				},
 			}}
 			className="table-pagination-actions"
diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts
index 9c9f4e04d..0d9168f8a 100644
--- a/client/src/Utils/Theme/Palette.ts
+++ b/client/src/Utils/Theme/Palette.ts
@@ -42,6 +42,7 @@ export const lightPalette = {
 	},
 	action: {
 		rowHover: alpha(colors.gray900, HOVER.ROW),
+		controlHover: alpha(colors.gray900, HOVER.CONTROL),
 	},
 	secondary: {
 		main: colors.gray200,
@@ -71,6 +72,7 @@ export const darkPalette = {
 	},
 	action: {
 		rowHover: alpha("#FFFFFF", HOVER.ROW),
+		controlHover: alpha("#FFFFFF", HOVER.CONTROL),
 	},
 	secondary: {
 		main: colors.gray700,
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index b39ba4abb..9b95fb121 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -15,9 +15,11 @@ declare module "@mui/material/styles" {
 	}
 	interface TypeAction {
 		rowHover: string;
+		controlHover: string;
 	}
 	interface TypeActionOptions {
 		rowHover?: string;
+		controlHover?: string;
 	}
 	interface Palette {
 		sidebar: { accent: string };
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
index c8641e7aa..70ddcd407 100644
--- a/client/src/Utils/Theme/constants.ts
+++ b/client/src/Utils/Theme/constants.ts
@@ -20,5 +20,6 @@ export const LAYOUT = {
 
 export const HOVER = {
 	DARKEN: 0.06, // This is a coefficient for darkening function
-	ROW: 0.025, // Overlay alpha for hoverable rows, cards and icon buttons
+	ROW: 0.025, // Overlay alpha for hoverable rows and cards
+	CONTROL: 0.05, // Stronger overlay for controls nested inside a hoverable row
 } as const;