diff --git a/.changeset/crisp-socks-call.md b/.changeset/crisp-socks-call.md
new file mode 100644
index 0000000000000..c5887082ccc90
--- /dev/null
+++ b/.changeset/crisp-socks-call.md
@@ -0,0 +1,5 @@
+---
+'@node-core/ui-components': patch
+---
+
+In the light theme, the background color of items in the history change component that contain code elements is incorrect when hovering.
diff --git a/packages/ui-components/.storybook/preview.tsx b/packages/ui-components/.storybook/preview.tsx
index e4e421bb930e0..9799d28af0615 100644
--- a/packages/ui-components/.storybook/preview.tsx
+++ b/packages/ui-components/.storybook/preview.tsx
@@ -16,7 +16,7 @@ const preview: Preview = {
 
   decorators: [
     withThemeByDataAttribute<ReactRenderer>({
-      themes: { light: '', dark: 'dark' },
+      themes: { light: 'light', dark: 'dark' },
       defaultTheme: 'light',
       attributeName: 'data-theme',
     }),
diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css
index 0fbfc01add394..3e44d73aaa759 100644
--- a/packages/ui-components/src/Common/ChangeHistory/index.module.css
+++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css
@@ -67,6 +67,13 @@
     @apply bg-brand-600
       text-white!;
   }
+
+  /* Keep inline `code` readable in light theme, where hover/focus turns text white */
+  :where([data-theme='light'], [data-theme='light'] *)
+    &:is(:hover, :focus-visible)
+    code {
+    @apply text-brand-900;
+  }
 }
 
 .dropdownLabel {
diff --git a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx b/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx
index 9845ff0f419d8..62140b4ed62c2 100644
--- a/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx
+++ b/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx
@@ -14,6 +14,11 @@ const SAMPLE_CHANGES = [
   {
     versions: ['v15.0.0', 'v14.17.0'],
     label: 'Added in v15.0.0, v14.17.0',
+    content: (
+      <>
+        Added in: <code>v15.0.0</code>, <code>v14.17.0</code>
+      </>
+    ),
     url: 'https://github.com/nodejs/node/pull/67890',
   },
   {
@@ -107,9 +112,13 @@ const LARGE_SAMPLE_CHANGES = [
 
 export const Default: Story = {
   render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
+    // `main` reproduces the docs page context: markdown.css scopes inline
+    // `code` styles under `main`, which is what the hover fix interacts with /ui-components/src/styles/markdown.css
+    <main>
+      <div className="flex justify-end">
+        <ChangeHistory {...args} />
+      </div>
+    </main>
   ),
   args: {
     changes: SAMPLE_CHANGES,
@@ -118,9 +127,11 @@ export const Default: Story = {
 
 export const LargeHistory: Story = {
   render: args => (
-    <div className="right-0 flex justify-end">
-      <ChangeHistory {...args} />
-    </div>
+    <main>
+      <div className="flex justify-end">
+        <ChangeHistory {...args} />
+      </div>
+    </main>
   ),
   args: {
     changes: LARGE_SAMPLE_CHANGES,