diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 749df592c..966d8f26d 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -48,7 +48,7 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
+              : (disabled ? " input-disable input-ring " : "") +
                 " input-primary text-muted-foreground "
           }
         >
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 6a878e5a6..84041837b 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -69,8 +69,8 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
-                " input-primary text-muted-foreground"
+              : (disabled ? " input-disable text-ring " : "") +
+                " input-primary text-muted-foreground "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 9925f19f2..5af8ff70a 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -216,7 +216,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply input-primary pr-7 mx-2
   }
   .input-disable{
-    @apply bg-input text-muted-foreground
+    @apply bg-border placeholder:text-ring border-transparent
   }
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent