diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
index bdb63be8204ba1..0a6e3a5645dc69 100644
--- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
@@ -37,7 +37,6 @@ storiesOf('Textarea Converged', module)
       <Textarea aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
     </div>
   ))
-  .addStory('Disabled', () => <Textarea disabled />)
   .addStory('With value', () => <Textarea defaultValue="Value" />);
 
 // Non interactive
@@ -49,6 +48,11 @@ storiesOf('Textarea Converged', module)
   .addStory('Size: small', () => <Textarea size="small" placeholder="Placeholder" />)
   .addStory('Size: medium', () => <Textarea size="medium" placeholder="Placeholder" />)
   .addStory('Size: large', () => <Textarea size="large" placeholder="Placeholder" />)
+  .addStory('Disabled', () => <Textarea defaultValue="Example Textarea value" disabled />)
+  .addStory('Disabled + placeholder', () => <Textarea placeholder="Example Textarea placeholder" disabled />)
+  .addStory('Disabled + filled', () => (
+    <Textarea appearance="filled-darker" defaultValue="Example Textarea value" disabled />
+  ))
   .addStory('With appearance override', () => (
     <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
diff --git a/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json
new file mode 100644
index 00000000000000..e6ef814ed6ae7e
--- /dev/null
+++ b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: When Textarea is disabled, make the text gray and add an outline for the filled appearance.",
+  "packageName": "@fluentui/react-textarea",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
index 91f4350cf545f4..aa3c03da9442e3 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts
@@ -32,6 +32,7 @@ const useRootStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),
     [`& > textarea`]: {
+      color: tokens.colorNeutralForegroundDisabled,
       cursor: 'not-allowed',
       '::placeholder': {
         color: tokens.colorNeutralForegroundDisabled,
@@ -244,9 +245,9 @@ export const useTextareaStyles_unstable = (state: TextareaState): TextareaState
   state.root.className = mergeClasses(
     textareaClassNames.root,
     rootStyles.base,
-    rootStyles[appearance],
-    filled && rootStyles.filled,
     disabled && rootStyles.disabled,
+    !disabled && filled && rootStyles.filled,
+    !disabled && rootStyles[appearance],
     !disabled && rootStyles.interactive,
     !disabled && appearance === 'outline' && rootStyles.outlineInteractive,
     !disabled && invalid && rootStyles.invalid,