diff --git a/src/components/DataItem/styles.module.scss b/src/components/DataItem/styles.module.scss
index 6c69f358..cf2750e1 100644
--- a/src/components/DataItem/styles.module.scss
+++ b/src/components/DataItem/styles.module.scss
@@ -30,4 +30,5 @@
   font-weight: 500;
   margin-top: 2px;
   text-align: left;
+  word-break: break-all;
 }
diff --git a/src/components/DateInput/index.jsx b/src/components/DateInput/index.jsx
index 93484e84..916080e1 100644
--- a/src/components/DateInput/index.jsx
+++ b/src/components/DateInput/index.jsx
@@ -8,14 +8,16 @@ import PT from "prop-types";
 import DatePicker from "react-datepicker";
 import "./styles.module.scss";
 
-const DateInput = ({ value, onChange, placeholder }) => {
+const DateInput = (props) => {
   return (
     <div styleName="datepicker-wrapper">
       <DatePicker
         dateFormat="MM/dd/yyyy"
-        placeholderText={placeholder}
-        selected={value}
-        onChange={onChange}
+        placeholderText={props.placeholder}
+        selected={props.value}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -25,6 +27,8 @@ DateInput.propTypes = {
   value: PT.string,
   onChange: PT.func.isRequired,
   placeholder: PT.string,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default DateInput;
diff --git a/src/components/FormField/index.jsx b/src/components/FormField/index.jsx
index 1e89a552..e7b281cc 100644
--- a/src/components/FormField/index.jsx
+++ b/src/components/FormField/index.jsx
@@ -18,26 +18,28 @@ const FormField = ({ field, isGroupField }) => {
     <Field name={field.name}>
       {({ input, meta }) => (
         <div styleName={isGroupField ? "field-group-field" : ""}>
-          <label
-            styleName={
-              input.value
-                ? "job-field-label"
-                : "job-field-label job-field-no-label"
-            }
-          >
-            {field.label}
-          </label>
+          { !field.readonly && (             
+            <label
+              styleName={
+                (input.value != "undefined" && input.value !== null && input.value !== "") || meta.active
+                  ? "job-field-label"
+                  : "job-field-label job-field-no-label"
+              }
+            >
+              {field.label}
+            </label>
+          )}
           {field.type === FORM_FIELD_TYPE.TEXT && (
             <TextInput
               maxLength={field.maxLength}
               placeholder={field.placeholder}
               value={input.value ?? ""}
               type="text"
-              onChange={(v) => {
-                input.onChange(v);
-              }}
-              className={meta.error ? "error" : ""}
+              className={meta.error && meta.touched ? "error" : ""}
               readonly={field.readonly}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
           {field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -47,7 +49,9 @@ const FormField = ({ field, isGroupField }) => {
               type="number"
               minValue={field.minValue}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.TEXTAREA && (
@@ -55,29 +59,31 @@ const FormField = ({ field, isGroupField }) => {
               placeholder={field.placeholder}
               value={input?.value ?? ""}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (
             <DateInput
               placeholder={field.placeholder}
               value={input?.value ?? ""}
-              onChange={(date) => {
-                input.onChange(date);
-              }}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
           {field.type === FORM_FIELD_TYPE.SELECT && (
             <ReactSelect
               value={input?.value ?? ""}
-              onChange={(val) => {
-                input.onChange(val);
-              }}
               options={field.selectOptions}
               isMulti={field.isMulti}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
-          {field.isRequired && meta.error && (
+          {field.isRequired && meta.error &&  meta.touched && (
             <div styleName="field-error">{meta.error}</div>
           )}
         </div>
diff --git a/src/components/FormField/styles.module.scss b/src/components/FormField/styles.module.scss
index 715a47d0..4409651e 100644
--- a/src/components/FormField/styles.module.scss
+++ b/src/components/FormField/styles.module.scss
@@ -12,6 +12,7 @@
   top: 12px;
   background: white;
   z-index: 1;
+  padding: 0 3px;
 }
 
 .job-field-no-label {
@@ -21,6 +22,15 @@
 input:not([type="checkbox"]),
 textarea {
   margin-bottom: 0px;
+  &::placeholder {
+    color: #AAAAAA;
+    font-family: Roboto;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+    text-transform: none;
+  }
 }
 
 input:read-only {
diff --git a/src/components/ReactSelect/index.jsx b/src/components/ReactSelect/index.jsx
index 16e35318..25a226a2 100644
--- a/src/components/ReactSelect/index.jsx
+++ b/src/components/ReactSelect/index.jsx
@@ -8,53 +8,74 @@ import PT from "prop-types";
 import Select from "react-select";
 import "./styles.module.scss";
 
-const ReactSelect = ({
-  value,
-  onChange,
-  placeholder,
-  error,
-  isMulti,
-  options,
-}) => {
+const ReactSelect = (props) => {
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
-      minHeight: "36px",
+      minHeight: "40px",
+      border: "1px solid #aaaaab",
+      borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
+      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
     }),
-    menu: (provided, state) => ({
+    menu: (provided) => ({
       ...provided,
-      minHeight: "36px",
+      minHeight: "40px",
       zIndex: 10,
     }),
-    valueContainer: (provided, state) => ({
+    valueContainer: (provided) => ({
       ...provided,
-      padding: "0 6px",
+      padding: "2px 6px",
     }),
-    input: (provided, state) => ({
+    input: (provided) => ({
       ...provided,
       margin: "0px",
-      height: "36px",
+      height: "auto",
+      padding: "0",
+      
     }),
-    indicatorSeparator: (state) => ({
+    indicatorSeparator: () => ({
       display: "none",
     }),
-    indicatorsContainer: (provided, state) => ({
+    indicatorsContainer: (provided) => ({
       ...provided,
-      height: "40px",
+      height: "auto",
     }),
+    option: (provided) => ({
+      ...provided,
+      minHeight: "32px"
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      fontWeight: "400"
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      margin: "3px 3px",
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      borderRadius: "5px"
+    })
   };
 
   return (
     <div styleName="select-wrapper">
       <Select
-        value={value}
+        value={props.value}
         styles={customStyles}
-        onChange={(val) => {
-          onChange(val);
-        }}
-        options={options}
-        styleName={error ? "error" : ""}
-        isMulti={isMulti}
+        onChange={props.onChange}
+        options={props.options}
+        styleName={props.error ? "error" : ""}
+        isMulti={props.isMulti}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -66,6 +87,8 @@ ReactSelect.propTypes = {
   placeholder: PT.string,
   error: PT.string,
   isMulti: PT.bool,
+  onBlur: PT.func,
+  onFocus: PT.func,
   options: PT.arrayOf(
     PT.shape({
       value: PT.string.isRequired,
diff --git a/src/components/ReactSelect/styles.module.scss b/src/components/ReactSelect/styles.module.scss
index 1a748191..3d90f6fd 100644
--- a/src/components/ReactSelect/styles.module.scss
+++ b/src/components/ReactSelect/styles.module.scss
@@ -8,5 +8,11 @@
   input {
     border: none !important;
     box-shadow: none !important;
+    transition: none !important;
+    height: 28px;
   }
 }
+
+.react-select__option{
+  min-height: 32px;
+}
diff --git a/src/components/TCForm/index.jsx b/src/components/TCForm/index.jsx
index 33260074..c35c48cf 100644
--- a/src/components/TCForm/index.jsx
+++ b/src/components/TCForm/index.jsx
@@ -49,29 +49,31 @@ const TCForm = ({
         validate={getValidator(configuration.fields)}
         render={({ handleSubmit, invalid, dirty }) => (
           <form onSubmit={handleSubmit} styleName="tc-form">
-            <div styleName="job-form-fields">
-              {configuration.rows.map((row) => {
-                return (
-                  <>
-                    {row.type === FORM_ROW_TYPE.GROUP && (
-                      <div styleName="field-group">
-                        {row.fields.map((field) => {
-                          return (
-                            <FormField
-                              field={fields[field]}
-                              isGroupField={true}
-                            />
-                          );
+            <div styleName="job-form-fields-container">
+              <div styleName="job-form-fields-wrapper">
+                {configuration.rows.map((row) => {
+                  return (
+                    <>
+                      {row.type === FORM_ROW_TYPE.GROUP && (
+                        <div styleName="field-group">
+                          {row.fields.map((field) => {
+                            return (
+                              <FormField
+                                field={fields[field]}
+                                isGroupField={true}
+                              />
+                            );
+                          })}
+                        </div>
+                      )}
+                      {row.type === FORM_ROW_TYPE.SINGLE &&
+                        row.fields.map((field) => {
+                          return <FormField field={fields[field]} />;
                         })}
-                      </div>
-                    )}
-                    {row.type === FORM_ROW_TYPE.SINGLE &&
-                      row.fields.map((field) => {
-                        return <FormField field={fields[field]} />;
-                      })}
-                  </>
-                );
-              })}
+                    </>
+                  );
+                })}
+              </div>
             </div>
             <div styleName="form-actions">
               <Button
diff --git a/src/components/TCForm/styles.module.scss b/src/components/TCForm/styles.module.scss
index f7123ea4..ce2b0946 100644
--- a/src/components/TCForm/styles.module.scss
+++ b/src/components/TCForm/styles.module.scss
@@ -1,11 +1,20 @@
 @import "styles/include";
 @import "~react-datepicker/dist/react-datepicker.css";
 
+
+
 .tc-form {
   width: 100%;
 
-  .job-form-fields {
-    padding: 40px 19% 20px;
+  .job-form-fields-container {
+    padding: 40px 0px 20px;
+
+    .job-form-fields-wrapper{
+      width: 100%;
+      max-width: 640px;
+      margin: 0 auto;
+      text-align: left;
+    }
 
     input:not([type="checkbox"]),
     textarea {
@@ -49,4 +58,4 @@
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
   z-index: 100;
-}
+}
\ No newline at end of file
diff --git a/src/components/TextArea/index.jsx b/src/components/TextArea/index.jsx
index 9d759acc..8ec9e7e5 100644
--- a/src/components/TextArea/index.jsx
+++ b/src/components/TextArea/index.jsx
@@ -16,6 +16,8 @@ function TextArea(props) {
       placeholder={props.placeholder}
       value={props.value}
       autoFocus={props.autoFocus}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -31,6 +33,8 @@ TextArea.propTypes = {
   onChange: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default TextArea;
diff --git a/src/components/TextInput/index.jsx b/src/components/TextInput/index.jsx
index fe328042..1c0b5789 100644
--- a/src/components/TextInput/index.jsx
+++ b/src/components/TextInput/index.jsx
@@ -31,6 +31,8 @@ function TextInput(props) {
       value={props.value}
       autoFocus={props.autoFocus}
       readOnly={props.readonly ?? false}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -46,6 +48,8 @@ TextInput.propTypes = {
   className: PT.string,
   maxLength: PT.number,
   onChange: PT.func,
+  onBlur: PT.func,
+  onFocus: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
   type: PT.string.isRequired,
diff --git a/src/routes/JobForm/index.jsx b/src/routes/JobForm/index.jsx
index 7e3ac6d1..2ca9ea19 100644
--- a/src/routes/JobForm/index.jsx
+++ b/src/routes/JobForm/index.jsx
@@ -110,7 +110,7 @@ const JobForm = ({ teamId, jobId }) => {
                   : getCreateJobConfig(options, onSubmit)
               }
               initialValue={job}
-              submitButton={{ text: "Save" }}
+              submitButton={{ text: isEdit ? "Save" : "Create" }}
               backButton={{
                 text: "Cancel",
                 backTo: isEdit
diff --git a/src/routes/JobForm/utils.js b/src/routes/JobForm/utils.js
index fcb3a88f..365c64e9 100644
--- a/src/routes/JobForm/utils.js
+++ b/src/routes/JobForm/utils.js
@@ -18,6 +18,7 @@ const CREATE_JOB_ROWS = [
   { type: FORM_ROW_TYPE.SINGLE, fields: ["resourceType"] },
   { type: FORM_ROW_TYPE.SINGLE, fields: ["rateType"] },
   { type: FORM_ROW_TYPE.SINGLE, fields: ["workload"] },
+  { type: FORM_ROW_TYPE.SINGLE, fields: ["status"] },
 ];
 
 const EDIT_JOB_ROWS = [
@@ -186,6 +187,14 @@ export const getCreateJobConfig = (skillOptions, onSubmit) => {
         name: "workload",
         selectOptions: WORKLOAD_OPTIONS,
       },
+      {
+        label: "Status",
+        type: FORM_FIELD_TYPE.SELECT,
+        isRequired: true,
+        validationMessage: "Please, select Status",
+        name: "status",
+        selectOptions: STATUS_OPTIONS,
+      },
     ],
     onSubmit: onSubmit,
     rows: CREATE_JOB_ROWS,
diff --git a/src/routes/ResourceBookingForm/utils.js b/src/routes/ResourceBookingForm/utils.js
index db4b025a..7d8d18aa 100644
--- a/src/routes/ResourceBookingForm/utils.js
+++ b/src/routes/ResourceBookingForm/utils.js
@@ -27,17 +27,17 @@ export const getEditResourceBookingConfig = (onSubmit) => {
       { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "title" },
       { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "handle" },
       {
-        label: "Customer Rate",
+        label: "Client Rate",
         type: FORM_FIELD_TYPE.NUMBER,
         name: "customerRate",
-        minValue: 1,
-        placeholder: "Customer Rate",
+        minValue: 0,
+        placeholder: "Client Rate",
       },
       {
         label: "Member Rate",
         type: FORM_FIELD_TYPE.NUMBER,
         name: "memberRate",
-        minValue: 1,
+        minValue: 0,
         placeholder: "Member Rate",
       },
       {
diff --git a/src/services/jobs.js b/src/services/jobs.js
index 15b843ee..343950a8 100644
--- a/src/services/jobs.js
+++ b/src/services/jobs.js
@@ -28,6 +28,7 @@ export const getEmptyJob = (teamId) => {
       workload: "full-time",
       rateType: "weekly",
       skills: [],
+      status: "sourcing",
     },
   });
 };