diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css
new file mode 100644
index 00000000000..0387fd63fac
--- /dev/null
+++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css
@@ -0,0 +1,9 @@
+.OnEmphasisWrapper {
+  background-color: var(--bgColor-black);
+  padding: var(--base-size-16);
+}
+
+.OnPrimaryWrapper {
+  background-color: var(--button-primary-bgColor-rest);
+  padding: var(--base-size-16);
+}
\ No newline at end of file
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
index feeb2d60fbe..d459119c6fb 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {KeybindingHint, type KeybindingHintProps} from '.'
-import Box from '../Box'
+import styles from './KeybindingHint.features.stories.module.css'
 
 export default {
   title: 'Experimental/Components/KeybindingHint/Features',
@@ -21,18 +21,18 @@ export const SequenceFull = {args: {keys: sequence, format: 'full'}}
 
 export const OnEmphasis: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'var(--bgColor-black)', p: 3}}>
+    <div className={styles.OnEmphasisWrapper}>
       <KeybindingHint {...args} />
-    </Box>
+    </div>
   ),
   args: {keys: chord, variant: 'onEmphasis'},
 }
 
 export const OnPrimary: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'var(--button-primary-bgColor-rest)', p: 3}}>
+    <div className={styles.OnPrimaryWrapper}>
       <KeybindingHint {...args} />
-    </Box>
+    </div>
   ),
   args: {keys: chord, variant: 'onPrimary'},
 }