diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts b/core/src/components/textarea/test/states/textarea.e2e.ts
index dc6b3ef5fa..942044e71d 100644
--- a/core/src/components/textarea/test/states/textarea.e2e.ts
+++ b/core/src/components/textarea/test/states/textarea.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('textarea: states'), () => {
     test('should render readonly textarea correctly', async ({ page }) => {
       await page.setContent(
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..29daa819f4
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..db2d1c9673
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..58a823f985
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..95e234ad2d
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8dbc9ac6e4
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..33aba4af40
Binary files /dev/null and b/core/src/components/textarea/test/states/textarea.e2e.ts-snapshots/textarea-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
index 4a19f85638..32d0d055b0 100644
--- a/core/src/components/textarea/textarea.ionic.scss
+++ b/core/src/components/textarea/textarea.ionic.scss
@@ -6,9 +6,10 @@
 // --------------------------------------------------
 
 :host {
+  --border-color: #{globals.$ion-primitives-neutral-500};
   --color: #{globals.$ion-primitives-neutral-1200};
-  --highlight-color-valid: #{globals.$ion-semantics-success-base};
-  --highlight-color-invalid: #{globals.$ion-semantics-danger-base};
+  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-primitives-base-white};
@@ -166,3 +167,35 @@ ion-icon {
 :host(.has-focus) .textarea-highlight {
   transform: scale(1);
 }
+
+// Textarea Hover
+// ----------------------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --border-color: #{globals.$ion-primitives-neutral-600};
+  }
+}
+
+// Textarea - Disabled
+// ----------------------------------------------------------------
+
+:host(.textarea-disabled) {
+  --color: #{globals.$ion-primitives-neutral-500};
+  --background: #{globals.$ion-primitives-neutral-100};
+  --border-color: #{globals.$ion-primitives-neutral-300};
+  --placeholder-color: #{globals.$ion-primitives-neutral-500};
+}
+
+:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
+:host(.textarea-disabled) .textarea-bottom .counter,
+:host(.textarea-disabled) .label-text-wrapper {
+  color: globals.$ion-primitives-neutral-500;
+}
+
+// Textarea - Readonly
+// ----------------------------------------------------------------
+
+:host(.textarea-readonly) {
+  --background: #{globals.$ion-primitives-neutral-100};
+}
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 96a3616522..9d76878875 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -676,7 +676,7 @@ export class Textarea implements ComponentInterface {
   }
 
   render() {
-    const { inputId, disabled, size, labelPlacement, el, hasFocus } = this;
+    const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
     const fill = this.getFill();
     const theme = getIonTheme(this);
     const shape = this.getShape();
@@ -719,6 +719,7 @@ export class Textarea implements ComponentInterface {
           [`textarea-size-${size}`]: true,
           [`textarea-label-placement-${labelPlacement}`]: true,
           'textarea-disabled': disabled,
+          'textarea-readonly': readonly,
         })}
       >
         {/**