diff --git a/src/common/modalChargeOptions.tsx b/src/common/modalChargeOptions.tsx
new file mode 100644
index 000000000..623feefec
--- /dev/null
+++ b/src/common/modalChargeOptions.tsx
@@ -0,0 +1,7 @@
+import intl from 'react-intl-universal';
+
+export const modalChargeOptions = [
+  { name: 'Hourly rate', value: 'Hourly rate' },
+  { name: 'Fixed price', value: 'Fixed price' },
+  { name: 'Non-chargeable', value: 'Non-chargeable' },
+];
diff --git a/src/containers/Projects/containers/TaskFormDialog/TaskForm.schema.tsx b/src/containers/Projects/containers/TaskFormDialog/TaskForm.schema.tsx
index 85b5954ab..1586c993d 100644
--- a/src/containers/Projects/containers/TaskFormDialog/TaskForm.schema.tsx
+++ b/src/containers/Projects/containers/TaskFormDialog/TaskForm.schema.tsx
@@ -3,12 +3,12 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
-  taksName: Yup.string()
+  taskName: Yup.string()
     .label(intl.get('task.schema.label.task_name'))
     .required(),
   taskHouse: Yup.string().label(intl.get('task.schema.label.task_house')),
-  change: Yup.string().label(intl.get('task.schema.label.charge')).required(),
-  amount: Yup.number().label(intl.get('task.schema.label.amount')),
+  taskCharge: Yup.string().label(intl.get('task.schema.label.charge')).required(),
+  taskamount: Yup.number().label(intl.get('task.schema.label.amount')),
 });
 
 export const CreateTaskFormSchema = Schema;
diff --git a/src/containers/Projects/containers/TaskFormDialog/TaskForm.tsx b/src/containers/Projects/containers/TaskFormDialog/TaskForm.tsx
index 2cc6fbd59..63b00521c 100644
--- a/src/containers/Projects/containers/TaskFormDialog/TaskForm.tsx
+++ b/src/containers/Projects/containers/TaskFormDialog/TaskForm.tsx
@@ -10,11 +10,10 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 const defaultInitialValues = {
-  taksName: '',
+  taskName: '',
   taskHouse: '00:00',
-  change: 'Hourly Rate',
-  changeAmount: '100000000',
-  amount: '',
+  taskCharge: 'Hourly rate',
+  taskamount: '100000000',
 };
 
 /**
diff --git a/src/containers/Projects/containers/TaskFormDialog/TaskFormFields.tsx b/src/containers/Projects/containers/TaskFormDialog/TaskFormFields.tsx
index 5a053ac6a..8275a4403 100644
--- a/src/containers/Projects/containers/TaskFormDialog/TaskFormFields.tsx
+++ b/src/containers/Projects/containers/TaskFormDialog/TaskFormFields.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useFormikContext } from 'formik';
 import { Classes, ControlGroup } from '@blueprintjs/core';
 import {
   FFormGroup,
@@ -8,23 +9,29 @@ import {
   Row,
   FormattedMessage as T,
 } from 'components';
+import { modalChargeOptions } from '../../../../common/modalChargeOptions';
+
+import { TaskModalChargeSelect } from './components';
 
 /**
  * Task form fields.
  * @returns
  */
 function TaskFormFields() {
+  // Formik context.
+  const { values } = useFormikContext();
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Task Name -----------*/}
-      <FFormGroup label={<T id={'task.label.task_name'} />} name={'task_name'}>
+      <FFormGroup label={<T id={'task.dialog.task_name'} />} name={'taskName'}>
         <FInputGroup name="taskName" />
       </FFormGroup>
       {/*------------ Estimated Hours -----------*/}
       <Row>
         <Col xs={4}>
           <FFormGroup
-            label={<T id={'task.label.estimated_hours'} />}
+            label={<T id={'task.dialog.estimated_hours'} />}
             name={'taskHouse'}
           >
             <FInputGroup name="taskHouse" />
@@ -32,10 +39,19 @@ function TaskFormFields() {
         </Col>
         {/*------------ Charge -----------*/}
         <Col xs={8}>
-          <FFormGroup label={<T id={'task.label.charge'} />} name={'Charge'}>
+          <FFormGroup
+            name={'taskCharge'}
+            className={'form-group--select-list'}
+            label={<T id={'task.dialog.charge'} />}
+          >
             <ControlGroup>
-              <FInputGroup name="change" />
-              <FInputGroup name="changeAmount" />
+              <TaskModalChargeSelect
+                name="taskCharge"
+                items={modalChargeOptions}
+                popoverProps={{ minimal: true }}
+                filterable={false}
+              />
+              <FInputGroup name="taskamount" />
             </ControlGroup>
           </FFormGroup>
         </Col>
@@ -43,7 +59,7 @@ function TaskFormFields() {
       {/*------------ Estimated Amount -----------*/}
       <EstimatedAmountBase>
         <EstimatedAmountContent>
-          <T id={'task.label.estimated_amount'} />
+          <T id={'task.dialog.estimated_amount'} />
           <EstimateAmount>$100000</EstimateAmount>
         </EstimatedAmountContent>
       </EstimatedAmountBase>
diff --git a/src/containers/Projects/containers/TaskFormDialog/components.tsx b/src/containers/Projects/containers/TaskFormDialog/components.tsx
new file mode 100644
index 000000000..d5633208d
--- /dev/null
+++ b/src/containers/Projects/containers/TaskFormDialog/components.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from 'components';
+
+/**
+ *
+ * @param {*}
+ * @param {*} param1
+ * @returns
+ */
+const taskModalChargeRenderer = (item, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      label={item.label}
+      key={item.name}
+      onClick={handleClick}
+      text={item.name}
+    />
+  );
+};
+
+const taskModalChargeSelectProps = {
+  itemRenderer: taskModalChargeRenderer,
+  valueAccessor: 'value',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param param0
+ * @returns
+ */
+export function TaskModalChargeSelect({ items, ...rest }) {
+  return (
+    <FSelect
+      {...taskModalChargeSelectProps}
+      {...rest}
+      items={items}
+      input={TaskModalChargeSelectButton}
+    />
+  );
+}
+
+/**
+ *
+ * @param param0
+ * @returns
+ */
+function TaskModalChargeSelectButton({ label }) {
+  return <Button text={label} />;
+}
diff --git a/src/containers/Projects/containers/TaskFormDialog/index.tsx b/src/containers/Projects/containers/TaskFormDialog/index.tsx
index d57287c46..ee74f4719 100644
--- a/src/containers/Projects/containers/TaskFormDialog/index.tsx
+++ b/src/containers/Projects/containers/TaskFormDialog/index.tsx
@@ -17,7 +17,7 @@ function TaskFormDialog({ dialogName, payload: { taskId = null }, isOpen }) {
   return (
     <Dialog
       name={dialogName}
-      title={intl.get('task.label.new_task')}
+      title={intl.get('task.dialog.new_task')}
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}