diff --git a/.changeset/seven-scissors-explain.md b/.changeset/seven-scissors-explain.md
new file mode 100644
index 00000000000..a9904b30f61
--- /dev/null
+++ b/.changeset/seven-scissors-explain.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TextInput: Update trailing action styles for hover state 
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-colorblind-linux.png
index ec10be85a2b..75e4a9c3ed9 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-dimmed-linux.png
index 2a108d3d00b..04cf7291223 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png
index 274706e2dab..abd1a290113 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png
index ec10be85a2b..75e4a9c3ed9 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-tritanopia-linux.png
index ec10be85a2b..75e4a9c3ed9 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-colorblind-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-colorblind-linux.png
index 06c7ef2248e..e3b4ccca838 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-high-contrast-linux.png
index cd9c4dbf6bc..529176125fb 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png
index db2d06f6907..e3b4ccca838 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-linux.png differ
diff --git a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-tritanopia-linux.png
index 06c7ef2248e..e3b4ccca838 100644
Binary files a/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/TextInput.test.ts-snapshots/TextInput-With-Trailing-Action-light-tritanopia-linux.png differ
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 59d34967f03..672be82b4e7 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {Box, FormControl} from '..'
+import {Box, FormControl, Stack} from '..'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {CalendarIcon, CheckIcon, XCircleFillIcon} from '@primer/octicons-react'
@@ -121,7 +121,7 @@ export const WithTrailingIcon = () => (
 )
 
 export const WithTrailingAction = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('sample text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -131,18 +131,15 @@ export const WithTrailingAction = () => {
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
-          trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
-              }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              sx={{color: 'fg.subtle'}}
-            />
-          }
           value={value}
           onChange={handleChange}
+          trailingAction={
+            <Stack justify="center" style={{minWidth: '34px'}}>
+              {value.length ? (
+                <TextInput.Action onClick={() => setValue('')} icon={XCircleFillIcon} aria-label="Clear input" />
+              ) : undefined}
+            </Stack>
+          }
         />
       </FormControl>
     </Box>
@@ -150,7 +147,7 @@ export const WithTrailingAction = () => {
 }
 
 export const WithTooltipDirection = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('sample text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -160,19 +157,20 @@ export const WithTooltipDirection = () => {
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
-          trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
-              }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              tooltipDirection="nw"
-              sx={{color: 'fg.subtle'}}
-            />
-          }
           value={value}
           onChange={handleChange}
+          trailingAction={
+            <Stack justify="center" style={{minWidth: '34px'}}>
+              {value.length ? (
+                <TextInput.Action
+                  onClick={() => setValue('')}
+                  icon={XCircleFillIcon}
+                  aria-label="Clear input"
+                  tooltipDirection="nw"
+                />
+              ) : undefined}
+            </Stack>
+          }
         />
       </FormControl>
     </Box>
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 6e41d302e67..9db52672367 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1964,6 +1964,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c4[data-size="small"][data-no-visuals]:hover,
+.c4[data-size="small"][data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-size="small"][data-no-visuals][data-component="IconButton"] {
@@ -2566,12 +2573,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+}
+
+.c4[data-no-visuals]:hover,
+.c4[data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-no-visuals][data-component="IconButton"] {
@@ -2742,7 +2755,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
       data-loading={false}
       data-no-visuals={true}
       onClick={[MockFunction]}
-      style={{}}
+      style={
+        {
+          "--button-color": "fg.subtle",
+        }
+      }
       type="button"
     >
       <span
@@ -3047,12 +3064,18 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+}
+
+.c4[data-no-visuals]:hover,
+.c4[data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-no-visuals][data-component="IconButton"] {
@@ -3340,7 +3363,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       onFocus={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
-      style={{}}
+      style={
+        {
+          "--button-color": "fg.subtle",
+        }
+      }
       type="button"
     >
       <span
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index c4aa909d767..ec9b6100828 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -32,6 +32,9 @@ const invisibleButtonStyleOverrides = {
   paddingBottom: '2px',
   paddingLeft: '4px',
   position: 'relative',
+  backgroundColor: 'transparent',
+  color: 'fg.subtle',
+  '&:hover, &:focus': {color: 'fg.default'},
 
   '&[data-component="IconButton"]': {
     width: 'var(--inner-action-size)',