diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormContent.tsx b/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormContent.tsx
deleted file mode 100644
index a73c7d1dd..000000000
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormContent.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-import ExpenseFormFields from './ExpenseFormFields';
-import ExpneseFormFloatingActions from './ExpneseFormFloatingActions';
-
-/**
- * Expense form content.
- * @returns
- */
-export default function ExpenseFormContent() {
-  return (
-    <Form>
-      <ExpenseFormFields />
-      <ExpneseFormFloatingActions />
-    </Form>
-  );
-}
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormDialogContent.tsx b/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormDialogContent.tsx
deleted file mode 100644
index 12a9f01b9..000000000
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormDialogContent.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { ExpenseFormProvider } from './ExpenseFormProvider';
-import ExpenseForm from './ExpenseForm';
-
-/**
- * Expense form dialog content.
- * @returns
- */
-export default function ExpenseFormDialogContent({
-  // #ownProps
-  dialogName,
-  expense,
-}) {
-  return (
-    <ExpenseFormProvider dialogName={dialogName} expenseId={expense}>
-      <ExpenseForm />
-    </ExpenseFormProvider>
-  );
-}
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormProvider.tsx b/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormProvider.tsx
deleted file mode 100644
index eea3375a4..000000000
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormProvider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-//@ts-nocheck
-import React from 'react';
-import { DialogContent } from 'components';
-
-const ExpenseFormContext = React.createContext();
-
-/**
- * Expense form provider.
- * @returns
- */
-function ExpenseFormProvider({
-  //#OwnProps
-  dialogName,
-  expenseId,
-  ...props
-}) {
-  // state provider.
-  const provider = {
-    dialogName,
-  };
-
-  return (
-    <DialogContent>
-      <ExpenseFormContext.Provider value={provider} {...props} />
-    </DialogContent>
-  );
-}
-
-const useExpenseFormContext = () => React.useContext(ExpenseFormContext);
-export { ExpenseFormProvider, useExpenseFormContext };
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.schema.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.schema.tsx
similarity index 53%
rename from src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.schema.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.schema.tsx
index c2bc038cc..643d3eab2 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.schema.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.schema.tsx
@@ -4,18 +4,20 @@ import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   expenseName: Yup.string().label(
-    intl.get('expense.schema.label.expense_name'),
+    intl.get('project_expense.schema.label.expense_name'),
   ),
   estimatedExpense: Yup.number().label(
-    intl.get('expense.schema.label.estimated_expense'),
+    intl.get('project_expense.schema.label.estimated_expense'),
   ),
   expemseDate: Yup.date(),
-  expenseQuantity: Yup.number().label(intl.get('expense.schema.label.quantity')),
+  expenseQuantity: Yup.number().label(
+    intl.get('project_expense.schema.label.quantity'),
+  ),
   expenseUnitPrice: Yup.number().label(
-    intl.get('expense.schema.label.unitPrice'),
+    intl.get('project_expense.schema.label.unitPrice'),
   ),
   expenseTotal: Yup.number(),
   expenseCharge: Yup.string(),
 });
 
-export const CreateExpenseFormSchema = Schema;
+export const CreateProjectExpenseFormSchema = Schema;
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.tsx
similarity index 72%
rename from src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.tsx
index 6bcf46531..c7c82b2f2 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseForm.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseForm.tsx
@@ -3,9 +3,9 @@ import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { AppToaster } from 'components';
-import { CreateExpenseFormSchema } from './ExpenseForm.schema';
-import ExpenseFormContent from './ExpenseFormContent';
-import { useExpenseFormContext } from './ExpenseFormProvider';
+import { CreateProjectExpenseFormSchema } from './ProjectExpenseForm.schema';
+import ProjectExpenseFormContent from './ProjectExpenseFormContent';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
@@ -22,10 +22,10 @@ const defaultInitialValues = {
 };
 
 /**
- * Expense form.
+ * Project expense form.
  * @returns
  */
-function ExpenseForm({
+function ProjectExpenseForm({
   //#withDialogActions
   closeDialog,
 }) {
@@ -53,12 +53,12 @@ function ExpenseForm({
   };
   return (
     <Formik
-      validationSchema={CreateExpenseFormSchema}
+      validationSchema={CreateProjectExpenseFormSchema}
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
-      component={ExpenseFormContent}
+      component={ProjectExpenseFormContent}
     />
   );
 }
 
-export default compose(withDialogActions)(ExpenseForm);
+export default compose(withDialogActions)(ProjectExpenseForm);
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormChargeFields.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormChargeFields.tsx
similarity index 90%
rename from src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormChargeFields.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormChargeFields.tsx
index 9f8272592..d4cb3c8b3 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormChargeFields.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormChargeFields.tsx
@@ -44,10 +44,10 @@ export default function ExpenseFormChargeFields() {
 
   return (
     <Choose>
-      <Choose.When condition={values.expenseCharge === '% markup'}>
+      <Choose.When condition={values.expenseCharge === 'markup'}>
         <PercentageFormField />
       </Choose.When>
-      <Choose.When condition={values.expenseCharge === 'Custom Pirce'}>
+      <Choose.When condition={values.expenseCharge === 'custom_pirce'}>
         <CustomPirceField />
       </Choose.When>
     </Choose>
diff --git a/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormContent.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormContent.tsx
new file mode 100644
index 000000000..6cab3f4b8
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormContent.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+import ProjectExpenseFormFields from './ProjectExpenseFormFields';
+import ProjectExpneseFormFloatingActions from './ProjectExpneseFormFloatingActions';
+
+/**
+ * Expense form content.
+ * @returns
+ */
+export default function ProjectExpenseFormContent() {
+  return (
+    <Form>
+      <ProjectExpenseFormFields />
+      <ProjectExpneseFormFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormDialogContent.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormDialogContent.tsx
new file mode 100644
index 000000000..5cb1a4518
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormDialogContent.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ProjectExpenseFormProvider } from './ProjectExpenseFormProvider';
+import ProjectExpenseForm from './ProjectExpenseForm';
+
+/**
+ * Project expense form dialog content.
+ * @returns
+ */
+export default function ProjectExpenseFormDialogContent({
+  // #ownProps
+  dialogName,
+  expense,
+}) {
+  return (
+    <ProjectExpenseFormProvider dialogName={dialogName} expenseId={expense}>
+      <ProjectExpenseForm />
+    </ProjectExpenseFormProvider>
+  );
+}
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormFields.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormFields.tsx
similarity index 76%
rename from src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormFields.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormFields.tsx
index 2b73d0a1c..092e67793 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpenseFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormFields.tsx
@@ -12,22 +12,22 @@ import {
   FormattedMessage as T,
 } from 'components';
 import { ExpenseSelect, FInputGroupComponent } from '../../components';
-import ExpenseFormChargeFields from './ExpenseFormChargeFields';
+import ExpenseFormChargeFields from './ProjectExpenseFormChargeFields';
 import { momentFormatter } from 'utils';
-import { useExpenseFormContext } from './ExpenseFormProvider';
-import { ChargeSelect } from '../../components';
-import { expenseChargeOption } from 'common/modalChargeOptions';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
+import { ChangeTypesSelect } from '../../components';
+import { expenseChargeOption } from 'containers/Projects/containers/common/modalChargeOptions';
 
 /**
- * Expense form fields.
+ * Project expense form fields.
  * @returns
  */
-export default function ExpenseFormFields() {
+export default function ProjectExpenseFormFields() {
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Expense Name -----------*/}
       <FFormGroup
-        label={intl.get('expenses.dialog.expense_name')}
+        label={intl.get('project_expense.dialog.expense_name')}
         name={'expenseName'}
       >
         <FInputGroup name="expenseName" />
@@ -35,7 +35,7 @@ export default function ExpenseFormFields() {
       {/*------------ Track to Expense -----------*/}
       <FFormGroup
         name={'estimatedExpense'}
-        label={intl.get('expenses.dialog.track_expense')}
+        label={intl.get('project_expense.dialog.track_expense')}
         className={classNames('form-group--select-list', Classes.FILL)}
       >
         <ExpenseSelect
@@ -47,7 +47,7 @@ export default function ExpenseFormFields() {
 
       {/*------------ Extimated Date -----------*/}
       <FFormGroup
-        label={intl.get('expenses.dialog.expense_date')}
+        label={intl.get('project_expense.dialog.expense_date')}
         name={'expemseDate'}
         className={classNames(CLASSES.FILL, 'form-group--date')}
       >
@@ -63,41 +63,41 @@ export default function ExpenseFormFields() {
       </FFormGroup>
       {/*------------ Quantity -----------*/}
       <FFormGroup
-        label={intl.get('expenses.dialog.quantity')}
+        label={intl.get('project_expense.dialog.quantity')}
         name={'expenseQuantity'}
       >
         <FInputGroupComponent name="expenseQuantity" />
       </FFormGroup>
 
       <MetaLineLabel>
-        <T id={'expenses.dialog.cost_to_you'} />
+        <T id={'project_expense.dialog.cost_to_you'} />
       </MetaLineLabel>
       {/*------------ Unit Price -----------*/}
       <ControlGroup className={Classes.FILL}>
         <FFormGroup
           name={'unitPrice'}
-          label={intl.get('expenses.dialog.unit_price')}
+          label={intl.get('project_expense.dialog.unit_price')}
         >
           <FInputGroupComponent name="expenseUnitPrice" />
         </FFormGroup>
         <FFormGroup
           name={'expenseTotal'}
-          label={intl.get('expenses.dialog.expense_total')}
+          label={intl.get('project_expense.dialog.expense_total')}
         >
           <FInputGroup name="expenseTotal" />
         </FFormGroup>
       </ControlGroup>
 
       <MetaLineLabel>
-        <T id={'expenses.dialog.what_you_ll_charge'} />
+        <T id={'project_expense.dialog.what_you_ll_charge'} />
       </MetaLineLabel>
       {/*------------ Charge -----------*/}
       <FFormGroup
         name={'expenseCharge'}
-        label={<T id={'expenses.dialog.charge'} />}
+        label={<T id={'project_expense.dialog.charge'} />}
         className={classNames('form-group--select-list', Classes.FILL)}
       >
-        <ChargeSelect
+        <ChangeTypesSelect
           name="expenseCharge"
           items={expenseChargeOption}
           popoverProps={{ minimal: true }}
@@ -111,7 +111,7 @@ export default function ExpenseFormFields() {
       {/*------------ Total -----------*/}
       <ExpenseTotalBase>
         <ExpenseTotalLabel>
-          <T id={'expenses.dialog.total'} />
+          <T id={'project_expense.dialog.total'} />
         </ExpenseTotalLabel>
         <ExpenseTotal>0.00</ExpenseTotal>
       </ExpenseTotalBase>
diff --git a/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormProvider.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormProvider.tsx
new file mode 100644
index 000000000..ffba5f8e0
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpenseFormProvider.tsx
@@ -0,0 +1,30 @@
+//@ts-nocheck
+import React from 'react';
+import { DialogContent } from 'components';
+
+const ProjectExpenseFormContext = React.createContext();
+
+/**
+ * Project expense form provider.
+ * @returns
+ */
+function ProjectExpenseFormProvider({
+  //#OwnProps
+  dialogName,
+  expenseId,
+  ...props
+}) {
+  // state provider.
+  const provider = {
+    dialogName,
+  };
+
+  return (
+    <DialogContent>
+      <ProjectExpenseFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useProjectExpenseFormContext = () => React.useContext(ProjectExpenseFormContext);
+export { ProjectExpenseFormProvider, useProjectExpenseFormContext };
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/ExpneseFormFloatingActions.tsx b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpneseFormFloatingActions.tsx
similarity index 79%
rename from src/containers/Projects/containers/ExpenseFormDialog/ExpneseFormFloatingActions.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/ProjectExpneseFormFloatingActions.tsx
index ad056b14b..29f73756f 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/ExpneseFormFloatingActions.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/ProjectExpneseFormFloatingActions.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import { useExpenseFormContext } from './ExpenseFormProvider';
+import { useProjectExpenseFormContext } from './ProjectExpenseFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
-function ExpneseFormFloatingActions({
+function ProjectExpneseFormFloatingActions({
   // #withDialogActions
   closeDialog,
 }) {
@@ -15,7 +15,7 @@ function ExpneseFormFloatingActions({
   const { isSubmitting } = useFormikContext();
 
   // expense form dialog context.
-  const { dialogName } = useExpenseFormContext();
+  const { dialogName } = useProjectExpenseFormContext();
 
   // Handle close button click.
   const handleCancelBtnClick = () => {
@@ -41,4 +41,4 @@ function ExpneseFormFloatingActions({
   );
 }
 
-export default compose(withDialogActions)(ExpneseFormFloatingActions);
+export default compose(withDialogActions)(ProjectExpneseFormFloatingActions);
diff --git a/src/containers/Projects/containers/ExpenseFormDialog/index.tsx b/src/containers/Projects/containers/ProjectExpenseForm/index.tsx
similarity index 63%
rename from src/containers/Projects/containers/ExpenseFormDialog/index.tsx
rename to src/containers/Projects/containers/ProjectExpenseForm/index.tsx
index fbcd6d079..ad05e6a36 100644
--- a/src/containers/Projects/containers/ExpenseFormDialog/index.tsx
+++ b/src/containers/Projects/containers/ProjectExpenseForm/index.tsx
@@ -4,41 +4,41 @@ import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';
 
-const ExpenseFormeDialogContent = React.lazy(
-  () => import('./ExpenseFormDialogContent'),
+const ProjectExpenseFormeDialogContent = React.lazy(
+  () => import('./ProjectExpenseFormDialogContent'),
 );
 
 /**
- * Expense form dialog.
+ * Project expense form dialog.
  * @returns
  */
-function ExpenseFormDialog({
+function ProjectExpenseFormDialog({
   dialogName,
   payload: { projectId = null },
   isOpen,
 }) {
   return (
-    <ExpenseFormDialogRoot
+    <ProjectExpenseFormDialogRoot
       name={dialogName}
-      title={<T id={'expenses.dialog.label'} />}
+      title={<T id={'project_expense.dialog.label'} />}
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}
       style={{ width: '400px' }}
     >
       <DialogSuspense>
-        <ExpenseFormeDialogContent
+        <ProjectExpenseFormeDialogContent
           dialogName={dialogName}
           expense={projectId}
         />
       </DialogSuspense>
-    </ExpenseFormDialogRoot>
+    </ProjectExpenseFormDialogRoot>
   );
 }
 
-export default compose(withDialogRedux())(ExpenseFormDialog);
+export default compose(withDialogRedux())(ProjectExpenseFormDialog);
 
-const ExpenseFormDialogRoot = styled(Dialog)`
+const ProjectExpenseFormDialogRoot = styled(Dialog)`
   .bp3-dialog-body {
     .bp3-form-group {
       margin-bottom: 15px;