diff --git a/public/main.css b/public/main.css
index 4afdda5..63fa28c 100644
--- a/public/main.css
+++ b/public/main.css
@@ -27,3 +27,20 @@ a.white-link:active {
 .nav-link {
   cursor: pointer;
 }
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: rgb(155, 155, 155);
+  opacity: 1; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgb(155, 155, 155);;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgb(155, 155, 155);;
+}
+
+.input-field [type=text] {
+  color: white;
+}
\ No newline at end of file
diff --git a/src/components/root/common/Forms/GenericForm.js b/src/components/root/common/Forms/GenericForm.js
index 7ee92d2..81049c6 100644
--- a/src/components/root/common/Forms/GenericForm.js
+++ b/src/components/root/common/Forms/GenericForm.js
@@ -150,7 +150,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
+                      "form-control input-field" +
                       (errors.booked_date && touched.booked_date
                         ? " is-invalid"
                         : "")
@@ -173,7 +173,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.domain && touched.domain ? " is-invalid" : "")
                     }
                   />
@@ -194,7 +193,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.original_server && touched.original_server
                         ? " is-invalid"
                         : "")
@@ -217,7 +215,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.ticket_id && touched.ticket_id
                         ? " is-invalid"
                         : "")
@@ -270,7 +267,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.username && touched.username ? " is-invalid" : "")
                     }
                   />
@@ -292,7 +288,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.new_server && touched.new_server
                         ? " is-invalid"
                         : "")
@@ -342,7 +337,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.additional_domains && touched.additional_domains
                         ? " is-invalid"
                         : "")
@@ -366,7 +360,6 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control" +
                       (errors.agent_booked && touched.agent_booked
                         ? " is-invalid"
                         : "")