diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index bd25a47d0..395dac1fe 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -136,10 +136,10 @@ export const CardContainer = styled.div<{
 	cursor: ${({ $inert }) => ($inert ? 'auto' : 'pointer')};
 	flex-direction: column;
 	align-items: center;
-	background-color: ${({ theme }) =>
+	background-color: ${({ theme, $inert }) =>
 		theme.darkMode
 			? theme.colors.extended.dark[600]
-			: theme.colors.extended.grey[100]};
+			: theme.colors.extended.grey[$inert ? 200 : 100]};
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	box-shadow: ${({ theme }) =>
 		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
diff --git a/site/source/design-system/field/Radio/RadioCard.tsx b/site/source/design-system/field/Radio/RadioCard.tsx
index 67b9fe871..6b2c94ee8 100644
--- a/site/source/design-system/field/Radio/RadioCard.tsx
+++ b/site/source/design-system/field/Radio/RadioCard.tsx
@@ -1,6 +1,6 @@
 import { AriaRadioProps } from '@react-types/radio'
 import { ComponentProps } from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 import { Markdown } from '@/components/utils/markdown'
 import { CardContainer } from '@/design-system/card/Card'
@@ -36,11 +36,7 @@ const StyledCardContainer = styled(CardContainer)`
 		background: transparent;
 		border: none;
 	}
-	${({ theme, $inert }) =>
-		$inert &&
-		css`
-			background-color: ${theme.colors.extended.grey[200]};
-		`}
+
 	margin: 0.5rem 0;
 `