diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
index 5f1c394..8f395ff 100644
--- a/src/components/input/index.tsx
+++ b/src/components/input/index.tsx
@@ -15,7 +15,7 @@ export const Input = forwardRef(
     return (
       <div className={className}>
         <input
-          className="bg-gray-100 dark:bg-gray-800 border-2 border-custom-black rounded w-full p-3"
+          className="border-2 border-custom-black rounded w-full p-3"
           ref={ref}
           value={value}
           onChange={onChange}
diff --git a/src/styles/global.css b/src/styles/global.css
index 689acc3..57c6c0c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,38 +3,42 @@
 @tailwind utilities;
 
 :root {
-    --orange: #fb8500;
-    --orange-light: #ffb703;
-    --green: #004f2d;
-    --green-light: #7dc95e;
-    --red: #ff4e33;
-    --red-light:#ff8370;
+  --orange: #fb8500;
+  --orange-light: #ffb703;
+  --green: #004f2d;
+  --green-light: #7dc95e;
+  --red: #ff4e33;
+  --red-light: #ff8370;
 }
 
 .light {
-    --primary: var(--orange);
-    --secondary: var(--green);
-    --warning: var(--red);
+  --primary: var(--orange);
+  --secondary: var(--green);
+  --warning: var(--red);
 }
 
 .dark {
-    --primary: var(--orange-light);
-    --secondary: var(--green-light);
-    --warning: var(--red-light);
+  --primary: var(--orange-light);
+  --secondary: var(--green-light);
+  --warning: var(--red-light);
 }
 
 @layer base {
-    body {
-        @apply dark:bg-black dark:text-gray-100 bg-white text-gray-900
-    }
+  body {
+    @apply dark:bg-black dark:text-gray-100 bg-white text-gray-900;
+  }
+
+  textarea {
+    @apply dark:placeholder-gray-300 placeholder-gray-500;
+  }
 }
 
 @layer components {
-    .btn-main {
-      @apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold
-    }
-
-    .primary-hover {
-        @apply transition duration-300 hover:text-primary
-    }
+  .btn-main {
+    @apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold;
   }
+
+  .primary-hover {
+    @apply transition duration-300 hover:text-primary;
+  }
+}
diff --git a/src/views/receive/index.tsx b/src/views/receive/index.tsx
index ae4b250..a2ce9b4 100644
--- a/src/views/receive/index.tsx
+++ b/src/views/receive/index.tsx
@@ -17,7 +17,7 @@ const Message = ({ message, onChange }: MessageProps) => {
     <section className="p-4">
       <div className="border-0">
         <textarea
-          className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] placeholder-gray-50 p-1"
+          className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] p-1"
           value={message}
           onChange={(e) => onChange(e.currentTarget.value || "")}
           placeholder="Start typing here..."
diff --git a/src/views/send/index.tsx b/src/views/send/index.tsx
index 8c6d2e0..0eda730 100644
--- a/src/views/send/index.tsx
+++ b/src/views/send/index.tsx
@@ -21,7 +21,7 @@ const Message = ({ message, onChange }: MessageProps) => {
     <section className="p-4">
       <div className="border-0">
         <textarea
-          className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] placeholder-gray-50 p-1"
+          className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] p-1"
           value={message}
           onChange={(e) => onChange(e.currentTarget.value || "")}
           placeholder="Start typing here..."