diff --git a/projects/components/src/textarea/textarea.component.scss b/projects/components/src/textarea/textarea.component.scss
index 8dc38805d..4111112a7 100644
--- a/projects/components/src/textarea/textarea.component.scss
+++ b/projects/components/src/textarea/textarea.component.scss
@@ -70,3 +70,9 @@
   height: 100%;
   width: 100%;
 }
+
+.disabled {
+  background-color: $gray-2;
+  color: $gray-5;
+  cursor: not-allowed;
+}
diff --git a/projects/components/src/textarea/textarea.component.ts b/projects/components/src/textarea/textarea.component.ts
index c1ef6ca38..39708e8d6 100644
--- a/projects/components/src/textarea/textarea.component.ts
+++ b/projects/components/src/textarea/textarea.component.ts
@@ -22,7 +22,7 @@ import { LoggerService } from '@hypertrace/common';
     }
   ],
   template: `
-    <mat-form-field class="fill-container" floatLabel="never">
+    <mat-form-field class="fill-container" [ngClass]="{ disabled: this.disabled }" floatLabel="never">
       <textarea
         class="textarea"
         matInput
diff --git a/projects/components/src/textarea/textarea.module.ts b/projects/components/src/textarea/textarea.module.ts
index e3b44e55e..f1ca3386f 100644
--- a/projects/components/src/textarea/textarea.module.ts
+++ b/projects/components/src/textarea/textarea.module.ts
@@ -1,10 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { TextareaComponent } from './textarea.component';
 
 @NgModule({
-  imports: [FormsModule, MatInputModule],
+  imports: [CommonModule, FormsModule, MatInputModule],
   declarations: [TextareaComponent],
   exports: [TextareaComponent]
 })