diff --git a/src/components/DataTableCells/ProjectBillableEntriesCell.tsx b/src/components/DataTableCells/ProjectBillableEntriesCell.tsx
new file mode 100644
index 000000000..9eca07132
--- /dev/null
+++ b/src/components/DataTableCells/ProjectBillableEntriesCell.tsx
@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { Popover2 } from '@blueprintjs/popover2';
+import { Button } from '@blueprintjs/core';
+import { CellType } from '@/constants';
+import { Icon, FormattedMessage as T } from '@/components';
+import ProjectBillableEntries from '@/containers/Projects/containers/ProjectBillableEntries';
+
+/**
+ *
+ * @return
+ */
+export function ProjectBillableEntriesCell() {
+  const content = <ProjectBillableEntries />;
+  return (
+    <Popover2 content={content}>
+      <Button
+        icon={<Icon icon={'info'} iconSize={14} />}
+        className="m12"
+        minimal={true}
+      />
+    </Popover2>
+  );
+}
+
+ProjectBillableEntriesCell.cellType = CellType.Button;
diff --git a/src/components/DataTableCells/ProjectInvoicingCell.tsx b/src/components/DataTableCells/ProjectInvoicingCell.tsx
deleted file mode 100644
index 65fbf1f37..000000000
--- a/src/components/DataTableCells/ProjectInvoicingCell.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import styled from 'styled-components';
-import { Popover2 } from '@blueprintjs/popover2';
-import { Button } from '@blueprintjs/core';
-import { CellType } from '@/constants';
-import {
-  Icon,
-  FormattedMessage as T,
-  ButtonLink,
-  DetailsMenu,
-  DetailItem,
-  FormatDate,
-} from '@/components';
-
-/**
- * @return
- */
-export function ProjectInvoicingCell({}) {
-  const content = (
-    <ProjectInvoicingContent>
-      <DetailsMenu direction={'vertical'}>
-        <DetailItem label={'Type'}>
-          <ButtonLink>Expense</ButtonLink>
-        </DetailItem>
-        <DetailItem label={'Transaction No.'}>EXP-1000</DetailItem>
-        <DetailItem label={'Date'}>2022-02-02</DetailItem>
-        <DetailItem label={'Amount'}>$1000.00</DetailItem>
-      </DetailsMenu>
-    </ProjectInvoicingContent>
-  );
-  return (
-    <Popover2 content={content}>
-      <Button
-        icon={<Icon icon={'info'} iconSize={14} />}
-        className="m12"
-        minimal={true}
-      />
-    </Popover2>
-  );
-}
-
-ProjectInvoicingCell.cellType = CellType.Button;
-
-const ProjectInvoicingContent = styled.div`
-  width: 450px;
-  padding: 7px 12px;
-`;
diff --git a/src/components/DataTableCells/index.tsx b/src/components/DataTableCells/index.tsx
index af20d7f5b..253a8479b 100644
--- a/src/components/DataTableCells/index.tsx
+++ b/src/components/DataTableCells/index.tsx
@@ -12,7 +12,7 @@ import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
 import BranchesListFieldCell from './BranchesListFieldCell';
 import { ProjectsListFieldCell } from './ProjectsListFieldCell';
-import { ProjectInvoicingCell } from './ProjectInvoicingCell';
+import { ProjectBillableEntriesCell } from './ProjectBillableEntriesCell';
 import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
@@ -30,6 +30,6 @@ export {
   TextAreaCell,
   BranchesListFieldCell,
   ProjectsListFieldCell,
-  ProjectInvoicingCell,
+  ProjectBillableEntriesCell,
   TextOverviewTooltipCell,
 };
diff --git a/src/containers/Entries/components.tsx b/src/containers/Entries/components.tsx
index 87713042e..337e9d355 100644
--- a/src/containers/Entries/components.tsx
+++ b/src/containers/Entries/components.tsx
@@ -14,7 +14,7 @@ import {
   PercentFieldCell,
   NumericInputCell,
   CheckBoxFieldCell,
-  ProjectInvoicingCell,
+  ProjectBillableEntriesCell,
 } from '@/components/DataTableCells';
 
 /**
@@ -157,7 +157,7 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
       {
         Header: '',
         accessor: 'invoicing',
-        Cell: ProjectInvoicingCell,
+        Cell: ProjectBillableEntriesCell,
         disableSortBy: true,
         disableResizing: true,
         width: 45,
diff --git a/src/containers/Projects/components/ProjectBillableTypeSuggestField.tsx b/src/containers/Projects/components/ProjectBillableTypeSuggestField.tsx
index 12996c5b8..e1fea7d79 100644
--- a/src/containers/Projects/components/ProjectBillableTypeSuggestField.tsx
+++ b/src/containers/Projects/components/ProjectBillableTypeSuggestField.tsx
@@ -61,10 +61,10 @@ const billableTypeInputValueRenderer = (inputValue) => {
 };
 
 /**
- * Project billable suggest field.
+ * Project billable type suggest field.
  * @param
  */
-export function ProjectBillableSuggestField({
+export function ProjectBillableTypeSuggestField({
   billableType,
   initialBillableTypeId,
   selectedBillableTypeId,
diff --git a/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesContent.tsx b/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesContent.tsx
new file mode 100644
index 000000000..f163adf6a
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesContent.tsx
@@ -0,0 +1,23 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { BillableEntriesItems } from './components';
+import { useProjectBillableEntriesContext } from './ProjectBillableEntriesProvider';
+
+/**
+ * Project billable entries content.
+ */
+export default function ProjectBillableEntriesContent() {
+  const { billableEntries } = useProjectBillableEntriesContext();
+
+  return (
+    <BillableEntriesContentRoot>
+      <BillableEntriesItems billableEntries={billableEntries} />
+    </BillableEntriesContentRoot>
+  );
+}
+
+const BillableEntriesContentRoot = styled.div`
+  width: 400px;
+  padding: 6px 12px;
+`;
diff --git a/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesProvider.tsx b/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesProvider.tsx
new file mode 100644
index 000000000..243a2170f
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesProvider.tsx
@@ -0,0 +1,36 @@
+// @ts-nocheck
+
+import React, { useState } from 'react';
+import { useProjectBillableEntries } from '../../hooks';
+import { DialogContent } from '@/components';
+
+const ProjectBillableEntriesContext = React.createContext();
+
+/**
+ * Project billable entries provider.
+ * @returns
+ */
+function ProjectBillableEntriesProvider({ projectId, ...props }) {
+  // Handle fetch project billable entries.
+  const { data: billableEntries, isLoading: isProjectBillableEntriesLoading } =
+    useProjectBillableEntries(projectId, {
+      enabled: !!projectId,
+    });
+
+  //state provider.
+  const provider = {
+    projectId,
+    billableEntries,
+  };
+
+  return (
+    <DialogContent isLoading={isProjectBillableEntriesLoading}>
+      <ProjectBillableEntriesContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useProjectBillableEntriesContext = () =>
+  React.useContext(ProjectBillableEntriesContext);
+
+export { ProjectBillableEntriesProvider, useProjectBillableEntriesContext };
diff --git a/src/containers/Projects/containers/ProjectBillableEntries/components.tsx b/src/containers/Projects/containers/ProjectBillableEntries/components.tsx
new file mode 100644
index 000000000..03c4ae8c9
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectBillableEntries/components.tsx
@@ -0,0 +1,64 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FormattedMessage as T, ButtonLink, FormatDate } from '@/components';
+
+function BillableEntry({ label, children }) {
+  return (
+    <BillableEntryItem>
+      <BillableEntryItemLabel>{label}</BillableEntryItemLabel>
+      <BillableEntryItemContent>{children}</BillableEntryItemContent>
+    </BillableEntryItem>
+  );
+}
+
+function BillableEntriesList({ billableEntries }) {
+  return (
+    <BillableEntriesContent>
+      <BillableEntry label={'Type'}>
+        <ButtonLink>{billableEntries.billable_type} </ButtonLink>
+      </BillableEntry>
+
+      <BillableEntry label={'Transaction No.'}>
+        {billableEntries.billable_transaction_no}
+      </BillableEntry>
+      <BillableEntry label={'Date'}>2022-02-02</BillableEntry>
+      <BillableEntry label={'Amount'}>
+        {billableEntries.billable_amount_formatted}
+      </BillableEntry>
+    </BillableEntriesContent>
+  );
+}
+
+export function BillableEntriesItems({ billableEntries }) {
+  return billableEntries.map((entries) => (
+    <BillableEntriesList billableEntries={entries} />
+  ));
+}
+
+const BillableEntriesContent = styled.div`
+  display: flex;
+  padding: 6px 0px;
+  &:not(:last-child) {
+    border-bottom: 1px solid #d2dce2;
+  }
+`;
+
+const BillableEntryItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  &:last-child {
+    text-align: right;
+  }
+`;
+
+const BillableEntryItemLabel = styled.div`
+  color: #727983;
+  font-weight: 500;
+`;
+const BillableEntryItemContent = styled.div`
+  text-transform: capitalize;
+  margin: 4px 0px;
+`;
diff --git a/src/containers/Projects/containers/ProjectBillableEntries/index.tsx b/src/containers/Projects/containers/ProjectBillableEntries/index.tsx
new file mode 100644
index 000000000..80795a948
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectBillableEntries/index.tsx
@@ -0,0 +1,12 @@
+// @ts-nocheck
+import React from 'react';
+import ProjectBillableEntriesContent from './ProjectBillableEntriesContent';
+import { ProjectBillableEntriesProvider } from './ProjectBillableEntriesProvider';
+
+export default function ProjectBillableEntries() {
+  return (
+    <ProjectBillableEntriesProvider projectId={1}>
+      <ProjectBillableEntriesContent />
+    </ProjectBillableEntriesProvider>
+  );
+}
diff --git a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx
index b0f771eba..f561ed3e8 100644
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx
@@ -9,7 +9,7 @@ import {
   FieldRequiredHint,
   FormattedMessage as T,
 } from '@/components';
-import { ProjectBillableSuggestField } from '../../components';
+import { ProjectBillableTypeSuggestField } from '../../components';
 import { billableTypeOption } from '../common';
 import { ProjectRowDivider, ProjectEntiresBox } from './components';
 import { useProjectBillableEntriesFormContext } from './ProjectBillableEntriesFormProvider';
@@ -41,7 +41,10 @@ export default function ProjectBillableEntriesFormFields() {
         label={<T id={'project_billable_entries.dialog.filter_by_type'} />}
         labelInfo={<FieldRequiredHint />}
       >
-        <ProjectBillableSuggestField billableType={billableTypeOption} />
+        <ProjectBillableTypeSuggestField
+          billableType={billableTypeOption}
+          // onBillableTypeSelected={()=>}
+        />
       </FFormGroup>
 
       <ProjectEntiresBox billableEntries={[]} />
diff --git a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/utils.tsx b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/utils.tsx
new file mode 100644
index 000000000..986c0f27f
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/utils.tsx
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import moment from 'moment';
+
+export const getDefaultQuery = () => {
+  return {
+    billableType: '',
+    to_date: moment(new Date()).format('YYYY-MM-DD'),
+  };
+};
diff --git a/src/containers/Projects/containers/common/index.ts b/src/containers/Projects/containers/common/index.ts
new file mode 100644
index 000000000..5ab810c30
--- /dev/null
+++ b/src/containers/Projects/containers/common/index.ts
@@ -0,0 +1 @@
+export * from './modalChargeOptions'
\ No newline at end of file
diff --git a/src/containers/Projects/containers/common/modalChargeOptions.ts b/src/containers/Projects/containers/common/modalChargeOptions.ts
index f4462b3c0..12901909b 100644
--- a/src/containers/Projects/containers/common/modalChargeOptions.ts
+++ b/src/containers/Projects/containers/common/modalChargeOptions.ts
@@ -21,9 +21,18 @@ export const expenseChargeOption = [
 ];
 
 export const billableTypeOption = [
-  { name: intl.get('project_billable_entries.dialog.task'), value: 'Task' },
-  { name: intl.get('project_billable_entries.dialog.bill'), value: 'Bill' },
   {
+    id: 1,
+    name: intl.get('project_billable_entries.dialog.task'),
+    value: 'Task',
+  },
+  {
+    id: 2,
+    name: intl.get('project_billable_entries.dialog.bill'),
+    value: 'Bill',
+  },
+  {
+    id: 3,
     name: intl.get('project_billable_entries.dialog.expense'),
     value: 'Expense',
   },
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.tsx b/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.tsx
index 510a6e439..c247b7b5a 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.tsx
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.tsx
@@ -37,6 +37,7 @@ const getSchema = () =>
     exchange_rate: Yup.number(),
     branch_id: Yup.string(),
     warehouse_id: Yup.string(),
+    project_id: Yup.string(),
     entries: Yup.array().of(
       Yup.object().shape({
         quantity: Yup.number()
diff --git a/src/containers/Sales/Invoices/InvoiceForm/utils.tsx b/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
index b081e3b19..43eb0e164 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -51,6 +51,7 @@ export const defaultInvoice = {
   currency_code: '',
   branch_id: '',
   warehouse_id: '',
+  project_id: '',
   entries: [...repeatValue(defaultInvoiceEntry, MIN_LINES_NUMBER)],
 };