diff --git a/src/pages/progress-connect/index.css b/src/pages/progress-connect/index.css
index 4c8f633b..472fa37a 100644
--- a/src/pages/progress-connect/index.css
+++ b/src/pages/progress-connect/index.css
@@ -10,7 +10,7 @@
     --text-medium: 51 65 85;
     --text-strong: 15 23 42;
     --text-error: 239 68 68;
-    --text-disabled: 148 163 184;
+    --text-disabled: 168 174 184;
 
     /* Background colors */
     --bg-primary: 59 130 246;
diff --git a/src/popup/components/ui/Code.tsx b/src/popup/components/ui/Code.tsx
index 0e112751..5082f0cf 100644
--- a/src/popup/components/ui/Code.tsx
+++ b/src/popup/components/ui/Code.tsx
@@ -11,7 +11,7 @@ export const Code = ({ value, className, ...props }: CodeProps) => {
   return (
     <div
       className={cn(
-        'flex items-center justify-between break-all rounded-xl bg-disabled px-4 py-4 text-sm text-medium',
+        'flex items-center justify-between break-all rounded-xl bg-disabled px-4 py-4 text-sm text-disabled',
         className,
       )}
       {...props}
diff --git a/src/popup/components/ui/Input.tsx b/src/popup/components/ui/Input.tsx
index ebbe9786..26928118 100644
--- a/src/popup/components/ui/Input.tsx
+++ b/src/popup/components/ui/Input.tsx
@@ -16,10 +16,10 @@ const inputVariants = cva(
         default: 'border-base',
       },
       disabled: {
-        true: 'border-transparent bg-disabled',
+        true: 'border-transparent bg-disabled text-disabled',
       },
       readOnly: {
-        true: 'border-transparent bg-disabled',
+        true: 'border-transparent bg-disabled text-disabled',
       },
     },
     defaultVariants: {
diff --git a/src/popup/index.css b/src/popup/index.css
index 10acdfca..63b44d6a 100644
--- a/src/popup/index.css
+++ b/src/popup/index.css
@@ -12,7 +12,7 @@
     --text-medium: 51 65 85;
     --text-strong: 15 23 42;
     --text-error: 239 68 68;
-    --text-disabled: 148 163 184;
+    --text-disabled: 168 174 184;
 
     /* Background colors */
     --bg-primary: 59 130 246;