diff --git a/src/components/Datatable/TableHeader.js b/src/components/Datatable/TableHeader.js
index 57b5be5cd..b05c15c67 100644
--- a/src/components/Datatable/TableHeader.js
+++ b/src/components/Datatable/TableHeader.js
@@ -88,15 +88,15 @@ export default function TableHeader() {
     },
   } = useContext(TableContext);
 
-  if (headerLoading && TableHeaderSkeletonRenderer) {
-    return <TableHeaderSkeletonRenderer />;
-  }
-
   // Can't contiunue if the thead is disabled.
   if (hideTableHeader) {
     return null;
   }
 
+  if (headerLoading && TableHeaderSkeletonRenderer) {
+    return <TableHeaderSkeletonRenderer />;
+  }
+
   return (
     <ScrollSyncPane>
       <div className="thead">
diff --git a/src/containers/Projects/components/ChangeTypesSelect.tsx b/src/containers/Projects/components/ChangeTypesSelect.tsx
index 956c1d25f..61763206d 100644
--- a/src/containers/Projects/components/ChangeTypesSelect.tsx
+++ b/src/containers/Projects/components/ChangeTypesSelect.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { FSelect } from '../../../components';
diff --git a/src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx b/src/containers/Projects/components/ProjectsSelect.tsx
similarity index 80%
rename from src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx
rename to src/containers/Projects/components/ProjectsSelect.tsx
index 1d7d55960..2e715af80 100644
--- a/src/containers/Projects/containers/ProjectDetails/components/ProjectSelect.tsx
+++ b/src/containers/Projects/components/ProjectsSelect.tsx
@@ -11,7 +11,7 @@ import { FSelect } from 'components';
  * @param {*} exactMatch
  * @returns
  */
-const projectItemPredicate = (query, project, _index, exactMatch) => {
+const projectsItemPredicate = (query, project, _index, exactMatch) => {
   const normalizedTitle = project.name.toLowerCase();
   const normalizedQuery = query.toLowerCase();
 
@@ -28,7 +28,7 @@ const projectItemPredicate = (query, project, _index, exactMatch) => {
  * @param {*} param1
  * @returns
  */
-const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
+const projectsItemRenderer = (project, { handleClick, modifiers, query }) => {
   return (
     <MenuItem
       active={modifiers.active}
@@ -41,13 +41,13 @@ const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
 };
 
 const projectSelectProps = {
-  itemPredicate: projectItemPredicate,
-  itemRenderer: projectItemRenderer,
+  itemPredicate: projectsItemPredicate,
+  itemRenderer: projectsItemRenderer,
   valueAccessor: 'id',
   labelAccessor: 'name',
 };
 
-export function ProjectSelect({ projects, ...rest }) {
+export function ProjectsSelect({ projects, ...rest }) {
   return (
     <FSelect
       items={projects}
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/TaskSelect.tsx b/src/containers/Projects/components/TaskSelect.tsx
similarity index 95%
rename from src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/TaskSelect.tsx
rename to src/containers/Projects/components/TaskSelect.tsx
index 44bf0c69f..a9d75b1ed 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/TaskSelect.tsx
+++ b/src/containers/Projects/components/TaskSelect.tsx
@@ -1,7 +1,8 @@
+// @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
 import { MenuItem, Button } from '@blueprintjs/core';
-import { FSelect } from '../../../../../components/Forms';
+import { FSelect } from 'components';
 
 /**
  *
diff --git a/src/containers/Projects/components/index.ts b/src/containers/Projects/components/index.ts
index 5f7ca6279..3e29cc72e 100644
--- a/src/containers/Projects/components/index.ts
+++ b/src/containers/Projects/components/index.ts
@@ -1,3 +1,5 @@
 export * from './ExpenseSelect';
 export * from './ChangeTypesSelect';
-export * from './FInputGroupComponent'
+export * from './TaskSelect';
+export * from './ProjectsSelect';
+export * from './FInputGroupComponent';
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
index 0dec2fa19..c46bbc5ea 100644
--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
@@ -14,10 +14,11 @@ import {
   FormattedMessage as T,
   DashboardRowsHeightButton,
 } from 'components';
-import { TransactionSelect } from './components';
+import { ProjectTransactionsSelect } from './components';
 import withSettings from '../../../Settings/withSettings';
 import withSettingsActions from '../../../Settings/withSettingsActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import { projectTranslations } from './common';
 import { useProjectDetailContext } from './ProjectDetailProvider';
 import { compose } from 'utils';
 
@@ -44,7 +45,7 @@ function ProjectDetailActionsBar({
       case 'expense':
         openDialog('project-expense-form', { projectId });
         break;
-      case 'estimatedExpense':
+      case 'estimated_expense':
         openDialog('estimated-expense-form', { projectId });
     }
   };
@@ -73,11 +74,8 @@ function ProjectDetailActionsBar({
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <TransactionSelect
-          transactions={[
-            { name: 'New Expense', path: 'expense' },
-            { name: 'New Estimated Expense', path: 'estimatedExpense' },
-          ]}
+        <ProjectTransactionsSelect
+          transactions={projectTranslations}
           onItemSelect={handleNewTransactionBtnClick}
         />
         <Button
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
index cfee1a524..51f4c7c92 100644
--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { Tabs, Tab } from '@blueprintjs/core';
-import TimeSheets from './Timesheets';
-import Purchases from './Purchases';
-import Sales from './Sales';
+import ProjectTimeSheets from './ProjectTimeSheets';
+import ProjectPurchasesTable from './ProjectPurchasesTable';
+import ProjectSalesTable from './ProjectSalesTable';
 
 /**
  * Project detail tabs.
@@ -23,17 +23,17 @@ export default function ProjectDetailTabs() {
         <Tab
           id="timesheet"
           title={intl.get('project_details.label.timesheet')}
-          panel={<TimeSheets />}
+          panel={<ProjectTimeSheets />}
         />
         <Tab
           id="purchases"
           title={intl.get('project_details.label.purchases')}
-          panel={<Purchases />}
+          panel={<ProjectPurchasesTable />}
         />
         <Tab
           id="sales"
           title={intl.get('project_details.label.sales')}
-          panel={<Sales />}
+          panel={<ProjectSalesTable />}
         />
         <Tab id="journals" title={intl.get('project_details.label.journals')} />
       </Tabs>
diff --git a/src/containers/Projects/containers/ProjectDetails/Purchases/PurchasesTable.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/ProjectPurchasesTable.tsx
similarity index 71%
rename from src/containers/Projects/containers/ProjectDetails/Purchases/PurchasesTable.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/ProjectPurchasesTable.tsx
index e19c005c9..4ea887978 100644
--- a/src/containers/Projects/containers/ProjectDetails/Purchases/PurchasesTable.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/ProjectPurchasesTable.tsx
@@ -6,33 +6,22 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import { TABLES } from 'common/tables';
 import { useMemorizedColumnsWidths } from 'hooks';
-import { usePurchasesColumns, ActionMenu } from './components';
+import { ActionMenu } from './components';
+import { useProjectPurchasesColumns } from './hooks';
 import withSettings from '../../../../Settings/withSettings';
 
 import { compose } from 'utils';
 
-const Purchases = [
-  {
-    id: 1,
-    date: '2022-06-08T22:00:00.000Z',
-    type: 'Invoice',
-    transaction_no: 'Inv-12345',
-    due_date: '2022-06-08T22:00:00.000Z',
-    balance: '$100.00',
-    status: 'Paid',
-    total: '$100.00',
-  },
-];
 /**
- * Purchases DataTable.
+ * Project Purchases DataTable.
  * @returns
  */
-function PurchasesTable({
+function ProjectPurchasesTableRoot({
   // #withSettings
   purchasesTableSize,
 }) {
   // Retrieve purchases table columns.
-  const columns = usePurchasesColumns();
+  const columns = useProjectPurchasesColumns();
 
   // Handle delete purchase.
   const handleDeletePurchase = () => {};
@@ -44,10 +33,7 @@ function PurchasesTable({
   return (
     <DataTable
       columns={columns}
-      data={Purchases}
-      // loading={}
-      // headerLoading={}
-      // progressBarLoading={}
+      data={[]}
       manualSortBy={true}
       selectionColumn={true}
       noInitialFetch={true}
@@ -64,8 +50,8 @@ function PurchasesTable({
     />
   );
 }
-export default compose(
+export const ProjectPurchasesTable = compose(
   withSettings(({ purchasesSettings }) => ({
     purchasesTableSize: purchasesSettings?.tableSize,
   })),
-)(PurchasesTable);
+)(ProjectPurchasesTableRoot);
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/components.tsx
new file mode 100644
index 000000000..732ba9398
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/components.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Icon } from 'components';
+import { Menu, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions cell.
+ */
+export function ActionMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('purchases.action.delete')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
diff --git a/src/containers/Projects/containers/ProjectDetails/Purchases/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/hooks.ts
similarity index 71%
rename from src/containers/Projects/containers/ProjectDetails/Purchases/components.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/hooks.ts
index d3a5ce9e9..a18ab5bcd 100644
--- a/src/containers/Projects/containers/ProjectDetails/Purchases/components.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/hooks.ts
@@ -1,30 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+import { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { CLASSES } from 'common/classes';
-import { FormatDateCell, Icon, FormattedMessage as T } from 'components';
-import { Menu, MenuItem, Intent } from '@blueprintjs/core';
-import { safeCallback } from 'utils';
+import { FormatDateCell } from 'components';
 
-/**
- * Table actions cell.
- */
-export function ActionMenu({ payload: { onDelete }, row: { original } }) {
-  return (
-    <Menu>
-      <MenuItem
-        text={intl.get('purchases.action.delete')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
-    </Menu>
-  );
-}
-
-export function usePurchasesColumns() {
-  return React.useMemo(
+export function useProjectPurchasesColumns() {
+  return useMemo(
     () => [
       {
         id: 'date',
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx
new file mode 100644
index 000000000..df0474131
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ProjectPurchasesTable } from './ProjectPurchasesTable';
+import { DashboardContentTable } from 'components';
+
+/**
+ *
+ * @returns
+ */
+export default function ProjectPurchasesTableRoot() {
+  return (
+    <DashboardContentTable>
+      <ProjectPurchasesTable />
+    </DashboardContentTable>
+  );
+}
diff --git a/src/containers/Projects/containers/ProjectDetails/Sales/SalesTable.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/ProjectSalesTable.tsx
similarity index 69%
rename from src/containers/Projects/containers/ProjectDetails/Sales/SalesTable.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/ProjectSalesTable.tsx
index d43bc7b34..bfd28f207 100644
--- a/src/containers/Projects/containers/ProjectDetails/Sales/SalesTable.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/ProjectSalesTable.tsx
@@ -5,34 +5,22 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import { TABLES } from 'common/tables';
 import { useMemorizedColumnsWidths } from 'hooks';
-import { useSalesColumns, ActionMenu } from './components';
+import { ActionMenu } from './components';
+import { useProjectSalesColumns } from './hooks';
 import withSettings from '../../../../Settings/withSettings';
 
 import { compose } from 'utils';
 
-const Sales = [
-  {
-    id: 1,
-    date: '2022-06-08T22:00:00.000Z',
-    type: 'Invoice',
-    transaction_no: 'Inv-12345',
-    due_date: '2022-06-08T22:00:00.000Z',
-    balance: '$100.00',
-    status: 'Paid',
-    total: '$100.00',
-  },
-];
-
 /**
- * Sales DataTable.
+ * Porject sales datatable.
  * @returns
  */
-function SalesTable({
+function ProjectSalesTableRoot({
   // #withSettings
   salesTableSize,
 }) {
-  // Retrieve sales table columns.
-  const columns = useSalesColumns();
+  // Retrieve project sales table columns.
+  const columns = useProjectSalesColumns();
 
   // Handle delete sale.
   const handleDeleteSale = () => {};
@@ -44,10 +32,7 @@ function SalesTable({
   return (
     <DataTable
       columns={columns}
-      data={Sales}
-      // loading={}
-      // headerLoading={}
-      // progressBarLoading={}
+      data={[]}
       manualSortBy={true}
       selectionColumn={true}
       noInitialFetch={true}
@@ -64,8 +49,8 @@ function SalesTable({
     />
   );
 }
-export default compose(
+export const ProjectSalesTable = compose(
   withSettings(({ salesSettings }) => ({
     salesTableSize: salesSettings?.tableSize,
   })),
-)(SalesTable);
+)(ProjectSalesTableRoot);
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/components.tsx
new file mode 100644
index 000000000..a4859608e
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/components.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatDateCell, Icon, FormattedMessage as T } from 'components';
+import { Menu, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions cell.
+ */
+export function ActionMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        text={intl.get('sales.action.delete')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
diff --git a/src/containers/Projects/containers/ProjectDetails/Sales/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/hooks.ts
similarity index 71%
rename from src/containers/Projects/containers/ProjectDetails/Sales/components.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/hooks.ts
index d72e5057c..63a1d0499 100644
--- a/src/containers/Projects/containers/ProjectDetails/Sales/components.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/hooks.ts
@@ -1,30 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+import { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { CLASSES } from 'common/classes';
-import { FormatDateCell, Icon, FormattedMessage as T } from 'components';
-import { Menu, MenuItem, Intent } from '@blueprintjs/core';
-import { safeCallback } from 'utils';
+import { FormatDateCell } from 'components';
 
-/**
- * Table actions cell.
- */
-export function ActionMenu({ payload: { onDelete }, row: { original } }) {
-  return (
-    <Menu>
-      <MenuItem
-        text={intl.get('sales.action.delete')}
-        intent={Intent.DANGER}
-        onClick={safeCallback(onDelete, original)}
-        icon={<Icon icon="trash-16" iconSize={16} />}
-      />
-    </Menu>
-  );
-}
-
-export function useSalesColumns() {
-  return React.useMemo(
+export function useProjectSalesColumns() {
+  return useMemo(
     () => [
       {
         id: 'date',
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/index.tsx
new file mode 100644
index 000000000..55d4ab88a
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectSalesTable/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ProjectSalesTable } from './ProjectSalesTable';
+import { DashboardContentTable } from 'components';
+
+/**
+ * Project Sales Table.
+ * @returns
+ */
+export default function ProjectSalesTableRoot() {
+  return (
+    <ProjectSalesContentTable>
+      <ProjectSalesTable />
+    </ProjectSalesContentTable>
+  );
+}
+
+const ProjectSalesContentTable = styled(DashboardContentTable)``;
diff --git a/src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsHeader.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsHeader.tsx
similarity index 94%
rename from src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsHeader.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsHeader.tsx
index d883a758a..df29324e2 100644
--- a/src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsHeader.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsHeader.tsx
@@ -13,10 +13,10 @@ import {
 import { calculateStatus } from 'utils';
 
 /**
- * Timesheets header
+ * Project Timesheets header
  * @returns
  */
-export default function TimesheetsHeader() {
+export function ProjectTimesheetsHeader() {
   return (
     <DetailFinancialSection>
       <DetailFinancialCard label={'Project estimate'} value={'3.14'} />
diff --git a/src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsTable.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
similarity index 58%
rename from src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsTable.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
index 38c748841..33f3105d2 100644
--- a/src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsTable.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
@@ -5,42 +5,24 @@ import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 import { ActionsMenu } from './components';
-import { useTimesheetColumns } from './hooks';
+import { useProjectTimesheetColumns } from './hooks';
 import { TABLES } from 'common/tables';
 import { useMemorizedColumnsWidths } from 'hooks';
 import withSettings from '../../../../Settings/withSettings';
 
 import { compose } from 'utils';
 
-const Timesheet = [
-  {
-    id: 1,
-    date: '2022-06-08T22:00:00.000Z',
-    name: 'Lighting',
-    display_name: 'Kyrie Rearden',
-    description: 'Laid paving stones',
-    duration: '12:00',
-  },
-  {
-    id: 2,
-    date: '2022-06-08T22:00:00.000Z',
-    name: 'Interior Decoration',
-    display_name: 'Project Sherwood',
-    description: 'Laid paving stones',
-    duration: '11:00',
-  },
-];
 
 /**
  * Timesheet DataTable.
  * @returns
  */
-function TimesheetsTable({
+function ProjectTimesheetsTableRoot({
   // #withSettings
   timesheetsTableSize,
 }) {
-  // Retrieve timesheet table columns.
-  const columns = useTimesheetColumns();
+  // Retrieve project timesheet table columns.
+  const columns = useProjectTimesheetColumns();
 
   // Handle delete timesheet.
   const handleDeleteTimesheet = () => {};
@@ -50,9 +32,9 @@ function TimesheetsTable({
     useMemorizedColumnsWidths(TABLES.TIMESHEETS);
 
   return (
-    <TimesheetDataTable
+    <ProjectTimesheetDataTable
       columns={columns}
-      data={Timesheet}
+      data={[]}
       manualSortBy={true}
       noInitialFetch={true}
       sticky={true}
@@ -69,13 +51,13 @@ function TimesheetsTable({
     />
   );
 }
-export default compose(
+export const ProjectTimesheetsTable = compose(
   withSettings(({ timesheetsSettings }) => ({
     timesheetsTableSize: timesheetsSettings?.tableSize,
   })),
-)(TimesheetsTable);
+)(ProjectTimesheetsTableRoot);
 
-const TimesheetDataTable = styled(DataTable)`
+const ProjectTimesheetDataTable = styled(DataTable)`
   .table {
     .thead .tr .th {
       .resizer {
@@ -88,25 +70,27 @@ const TimesheetDataTable = styled(DataTable)`
       }
 
       .avatar.td {
-        .avatar {
-          display: inline-block;
-          background: #adbcc9;
-          border-radius: 50%;
-          text-align: center;
-          font-weight: 400;
-          color: #fff;
+        .cell-inner {
+          .avatar {
+            display: inline-block;
+            background: #adbcc9;
+            border-radius: 50%;
+            text-align: center;
+            font-weight: 400;
+            color: #fff;
 
-          &[data-size='medium'] {
-            height: 30px;
-            width: 30px;
-            line-height: 30px;
-            font-size: 14px;
-          }
-          &[data-size='small'] {
-            height: 25px;
-            width: 25px;
-            line-height: 25px;
-            font-size: 12px;
+            &[data-size='medium'] {
+              height: 30px;
+              width: 30px;
+              line-height: 30px;
+              font-size: 14px;
+            }
+            &[data-size='small'] {
+              height: 25px;
+              width: 25px;
+              line-height: 25px;
+              font-size: 12px;
+            }
           }
         }
       }
diff --git a/src/containers/Projects/containers/ProjectDetails/Timesheets/components.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx
similarity index 100%
rename from src/containers/Projects/containers/ProjectDetails/Timesheets/components.tsx
rename to src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx
diff --git a/src/containers/Projects/containers/ProjectDetails/Timesheets/hooks.ts b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
similarity index 90%
rename from src/containers/Projects/containers/ProjectDetails/Timesheets/hooks.ts
rename to src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
index 18f8c1c59..0a0ba1521 100644
--- a/src/containers/Projects/containers/ProjectDetails/Timesheets/hooks.ts
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
@@ -3,9 +3,9 @@ import intl from 'react-intl-universal';
 import { AvatarCell, TimesheetAccessor } from './components';
 
 /**
- * Retrieve timesheet list columns columns.
+ * Retrieve project timesheet list columns.
  */
-export function useTimesheetColumns() {
+export function useProjectTimesheetColumns() {
   return React.useMemo(
     () => [
       {
diff --git a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/index.tsx b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/index.tsx
new file mode 100644
index 000000000..1e443e5a8
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ProjectTimesheetsTable } from './ProjectTimesheetsTable';
+import { ProjectTimesheetsHeader } from './ProjectTimesheetsHeader';
+
+/**
+ * Project Timesheets.
+ * @returns
+ */
+export default function ProjectTimeSheets() {
+  return (
+    <React.Fragment>
+      <ProjectTimesheetsHeader />
+      <ProjectTimesheetTableCard>
+        <ProjectTimesheetsTable />
+      </ProjectTimesheetTableCard>
+    </React.Fragment>
+  );
+}
+
+const ProjectTimesheetTableCard = styled.div`
+  margin: 22px 32px;
+  border: 1px solid #c8cad0;
+  border-radius: 3px;
+  background: #fff;
+`;
diff --git a/src/containers/Projects/containers/ProjectDetails/Purchases/index.tsx b/src/containers/Projects/containers/ProjectDetails/Purchases/index.tsx
deleted file mode 100644
index 9f8e5523a..000000000
--- a/src/containers/Projects/containers/ProjectDetails/Purchases/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PurchasesTable from './PurchasesTable';
-import { DashboardContentTable } from 'components';
-
-/**
- *
- * @returns
- */
-export default function Purchases() {
-  return (
-    <DashboardContentTable>
-      <PurchasesTable />
-    </DashboardContentTable>
-  );
-}
-
-const PurchasesContentTable = styled.div`
-  margin: 22px 20px;
-  border: 1px solid #d2dce2;
-  background: #fff;
-  /* .bigcapital-datatable {
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 0;
-
-    .pagination {
-      margin-top: auto;
-    }
-
-    &:not(.has-pagination) {
-      padding-bottom: 30px;
-    }
-  } */
-`;
diff --git a/src/containers/Projects/containers/ProjectDetails/Sales/index.tsx b/src/containers/Projects/containers/ProjectDetails/Sales/index.tsx
deleted file mode 100644
index 73503df7c..000000000
--- a/src/containers/Projects/containers/ProjectDetails/Sales/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import SalesTable from './SalesTable';
-import { DashboardContentTable } from 'components';
-
-/**
- *
- * @returns
- */
-export default function Sales() {
-  return (
-    <SalesContentTable>
-      <SalesTable />
-    </SalesContentTable>
-  );
-}
-
-const SalesContentTable = styled(DashboardContentTable)``;
diff --git a/src/containers/Projects/containers/ProjectDetails/Timesheets/index.tsx b/src/containers/Projects/containers/ProjectDetails/Timesheets/index.tsx
deleted file mode 100644
index 97114157b..000000000
--- a/src/containers/Projects/containers/ProjectDetails/Timesheets/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import TimesheetsTable from './TimesheetsTable';
-import TimesheetsHeader from './TimesheetsHeader';
-
-/**
- * Project Timesheet.
- * @returns
- */
-export default function TimeSheets() {
-  return (
-    <React.Fragment>
-      <TimesheetsHeader />
-      <TimesheetTableCard>
-        <TimesheetsTable />
-      </TimesheetTableCard>
-    </React.Fragment>
-  );
-}
-
-const TimesheetTableCard = styled.div`
-  margin: 22px 32px;
-  border: 1px solid #c8cad0; // #000a1e33 #f0f0f0
-  border-radius: 3px;
-  background: #fff;
-`;
diff --git a/src/containers/Projects/containers/ProjectDetails/common.ts b/src/containers/Projects/containers/ProjectDetails/common.ts
new file mode 100644
index 000000000..aa811c2f0
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectDetails/common.ts
@@ -0,0 +1,9 @@
+import intl from 'react-intl-universal';
+
+export const projectTranslations = [
+  { name: intl.get('project_details.new_expenses'), path: 'expense' },
+  {
+    name: intl.get('project_details.new_estimated_expenses'),
+    path: 'estimated_expense',
+  },
+];
diff --git a/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx b/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
index 495e6e129..5533e1660 100644
--- a/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/components/FinancialSection.tsx
@@ -29,7 +29,6 @@ export const FinancialProgressBar = ({ ...rest }) => {
 
 const FinancialSectionWrap = styled.div`
   display: flex;
-  /* flex-wrap: wrap; */
   margin: 22px 32px;
   gap: 10px;
 `;
@@ -47,7 +46,6 @@ const FinancialSectionCard = styled.div`
 
 const FinancialSectionCardContent = styled.div`
   margin: 16px;
-  /* flex-direction: column; */
 `;
 
 const FinancialCardWrap = styled.div``;
diff --git a/src/containers/Projects/containers/ProjectDetails/components/TransactionSelect.tsx b/src/containers/Projects/containers/ProjectDetails/components/ProjectTransactionsSelect.tsx
similarity index 75%
rename from src/containers/Projects/containers/ProjectDetails/components/TransactionSelect.tsx
rename to src/containers/Projects/containers/ProjectDetails/components/ProjectTransactionsSelect.tsx
index 643f8cd57..ae897f3e7 100644
--- a/src/containers/Projects/containers/ProjectDetails/components/TransactionSelect.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/components/ProjectTransactionsSelect.tsx
@@ -15,7 +15,7 @@ import { Icon, FormattedMessage as T } from 'components';
  * @param {*} param1
  * @returns
  */
-const transactionItemRenderer = (
+const projectTransactionItemRenderer = (
   transaction,
   { handleClick, modifiers, query },
 ) => {
@@ -29,8 +29,8 @@ const transactionItemRenderer = (
   );
 };
 
-const transactionSelectProps = {
-  itemRenderer: transactionItemRenderer,
+const projectTransactionSelectProps = {
+  itemRenderer: projectTransactionItemRenderer,
   filterable: false,
   popoverProps: {
     minimal: true,
@@ -43,13 +43,13 @@ const transactionSelectProps = {
 };
 
 /**
- *
+ * Project transactions select
  * @param
  * @returns
  */
-export function TransactionSelect({ transactions, ...rest }) {
+export function ProjectTransactionsSelect({ transactions, ...rest }) {
   return (
-    <Select {...transactionSelectProps} items={transactions} {...rest}>
+    <Select {...projectTransactionSelectProps} items={transactions} {...rest}>
       <Button
         minimal={true}
         icon={<Icon icon={'plus'} />}
diff --git a/src/containers/Projects/containers/ProjectDetails/components/index.tsx b/src/containers/Projects/containers/ProjectDetails/components/index.tsx
index 80aef5655..2a9e9fb63 100644
--- a/src/containers/Projects/containers/ProjectDetails/components/index.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/components/index.tsx
@@ -1,3 +1,2 @@
-export * from './ProjectSelect';
-export * from './TransactionSelect';
+export * from './ProjectTransactionsSelect';
 export * from './FinancialSection';
diff --git a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.schema.tsx b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.schema.tsx
index 530fec56b..49efc1b21 100644
--- a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.schema.tsx
+++ b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.schema.tsx
@@ -10,7 +10,7 @@ const Schema = Yup.object().shape({
   projectDeadline: Yup.date()
     .label(intl.get('project.schema.label.deadline'))
     .required(),
-  projectState: Yup.boolean().label(
+    published: Yup.boolean().label(
     intl.get('project.schema.label.project_state'),
   ),
   projectCost: Yup.number().label(
diff --git a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
index af039a715..4a75c8292 100644
--- a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
+++ b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
@@ -15,7 +15,7 @@ const defaultInitialValues = {
   contact: '',
   projectName: '',
   projectDeadline: moment(new Date()).format('YYYY-MM-DD'),
-  projectState: false,
+  published: false,
   projectCost: '',
 };
 
diff --git a/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx b/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
index 239530454..464e7db56 100644
--- a/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
@@ -86,9 +86,9 @@ function ProjectFormFields() {
       </FFormGroup>
 
       {/*------------ CheckBox -----------*/}
-      <FFormGroup name={'projectState'}>
+      <FFormGroup name={'published'}>
         <FCheckbox
-          name="projectState"
+          name="published"
           label={intl.get('projects.dialog.calculator_expenses')}
         />
       </FFormGroup>
@@ -100,7 +100,7 @@ function ProjectFormFields() {
         <ControlGroup>
           <InputPrependText text={'USD'} />
           <FMoneyInputGroup
-            disabled={values.projectState}
+            disabled={values.published}
             name={'project_cost'}
             allowDecimals={true}
             allowNegativeValue={true}
diff --git a/src/containers/Projects/containers/ProjectTaskFormDialog/components.tsx b/src/containers/Projects/containers/ProjectTaskFormDialog/components.tsx
deleted file mode 100644
index d5633208d..000000000
--- a/src/containers/Projects/containers/ProjectTaskFormDialog/components.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
index fda2a01f1..07721fbaf 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
@@ -14,7 +14,7 @@ import {
   FieldRequiredHint,
   FormattedMessage as T,
 } from 'components';
-import { ProjectSelect, TaskSelect } from './components';
+import { TaskSelect, ProjectsSelect } from '../../components';
 import { momentFormatter } from 'utils';
 
 /**
@@ -31,8 +31,8 @@ function ProjectTimeEntryFormFields() {
         labelInfo={<FieldRequiredHint />}
         className={classNames('form-group--select-list', Classes.FILL)}
       >
-        <ProjectSelect
-          name={'tesc'}
+        <ProjectsSelect
+          name={'projectId'}
           projects={[]}
           popoverProps={{ minimal: true }}
         />
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/ProjectSelect.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/ProjectSelect.tsx
deleted file mode 100644
index b2c9b89dc..000000000
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/ProjectSelect.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import { MenuItem, Button } from '@blueprintjs/core';
-import { FSelect } from 'components/Forms';
-
-/**
- *
- * @param {*} query
- * @param {*} project
- * @param {*} _index
- * @param {*} exactMatch
- * @returns
- */
-const projectItemPredicate = (query, project, _index, exactMatch) => {
-  const normalizedTitle = project.name.toLowerCase();
-  const normalizedQuery = query.toLowerCase();
-
-  if (exactMatch) {
-    return normalizedTitle === normalizedQuery;
-  } else {
-    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-  }
-};
-
-/**
- *
- * @param {*} project
- * @param {*} param1
- * @returns
- */
-const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      key={project.id}
-      onClick={handleClick}
-      text={project.name}
-    />
-  );
-};
-
-const projectSelectProps = {
-  // itemPredicate: projectItemPredicate,
-  itemRenderer: projectItemRenderer,
-  valueAccessor: 'id',
-  labelAccessor: 'name',
-};
-
-export function ProjectSelect({ projects, ...rest }) {
-  return (
-    <FSelect
-      items={projects}
-      {...projectSelectProps}
-      {...rest}
-      input={ProjectSelectButton}
-    />
-  );
-}
-
-function ProjectSelectButton({ label }) {
-  return <Button text={label ? label : intl.get('find_or_choose_a_project')} />;
-}
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/index.ts b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/index.ts
deleted file mode 100644
index 7d912788e..000000000
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ProjectSelect';
-export * from './TaskSelect';
\ No newline at end of file
diff --git a/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx b/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
index 0b164ac8e..d0d5cabc6 100644
--- a/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
+++ b/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
@@ -138,32 +138,32 @@ const ProjectsTable = styled(DataTable)`
     .tr .td {
       padding: 0.5rem 0.8rem;
     }
-
     .avatar.td {
-      .avatar {
-        display: inline-block;
-        background: #adbcc9;
-        border-radius: 8%;
-        text-align: center;
-        font-weight: 400;
-        color: #fff;
+      .cell-inner {
+        .avatar {
+          display: inline-block;
+          background: #adbcc9;
+          border-radius: 8%;
+          text-align: center;
+          font-weight: 400;
+          color: #fff;
 
-        &[data-size='medium'] {
-          height: 30px;
-          width: 30px;
-          line-height: 30px;
-          font-size: 14px;
-        }
-        &[data-size='small'] {
-          height: 25px;
-          width: 25px;
-          line-height: 25px;
-          font-size: 12px;
+          &[data-size='medium'] {
+            height: 30px;
+            width: 30px;
+            line-height: 30px;
+            font-size: 14px;
+          }
+          &[data-size='small'] {
+            height: 25px;
+            width: 25px;
+            line-height: 25px;
+            font-size: 12px;
+          }
         }
       }
     }
   }
-
   .table-size--small {
     .tbody .tr {
       height: 45px;
diff --git a/src/containers/Projects/containers/ProjectsLanding/components.tsx b/src/containers/Projects/containers/ProjectsLanding/components.tsx
index d4ed1a586..d7029368a 100644
--- a/src/containers/Projects/containers/ProjectsLanding/components.tsx
+++ b/src/containers/Projects/containers/ProjectsLanding/components.tsx
@@ -175,10 +175,10 @@ const ProjectItemDescription = styled.div`
 const ProjectStatusRoot = styled.div`
   display: flex;
   align-items: center;
-  /* justify-content: flex-end; */
   margin-right: 0.5rem;
   flex-direction: row-reverse;
 `;
+
 const ProjectStatusTaskAmount = styled.div`
   text-align: right;
   font-weight: 400;
@@ -198,6 +198,7 @@ const ProjectProgressBar = styled(ProgressBar)`
     }
   }
 `;
+
 const StatusTag = styled(Tag)`
   min-width: 65px;
   text-align: center;
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 94e0afd9d..54bfd8a37 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -2082,6 +2082,8 @@
   "project_details.label.purchases": "Purchases",
   "project_details.label.sales": "Sales",
   "project_details.label.journals": "Journals",
+  "project_details.new_expenses": "New Expenses",
+  "project_details.new_estimated_expenses": "New Estimated Expenses",
   "timesheets.actions.delete_timesheet": "Delete",
   "timesheets.column.date": "Date",
   "timesheets.column.task": "Task",
@@ -2110,13 +2112,13 @@
   "project_expense.dialog.unit_price": "Unit Price",
   "project_expense.dialog.expense_total": "Total",
   "project_expense.dialog.percentage": "Percentage",
-  "project_expense.dialog.total":"Total:",
+  "project_expense.dialog.total": "Total:",
   "project_expense.dialog.markup": "% Markup",
   "project_expense.dialog.pass_cost_on": "Pass cost on",
   "project_expense.dialog.custom_pirce": "Custom Pirce",
   "project_expense.dialog.non_chargeable": "Non-chargeable",
-  "project_expense.dialog.cost_to_you":"Cost to you",
-  "project_expense.dialog.what_you_ll_charge":"What you'll charge",
+  "project_expense.dialog.cost_to_you": "Cost to you",
+  "project_expense.dialog.what_you_ll_charge": "What you'll charge",
   "project_expense.schema.label.expense_name": "Expense name",
   "project_expense.schema.label.estimated_expense": "Estimated expense",
   "project_expense.schema.label.quantity": "Quantity",
@@ -2130,8 +2132,8 @@
   "estimated_expenses.dialog.charge": "Charge",
   "estimated_expenses.dialog.percentage": "Percentage",
   "estimated_expenses.dialog.estimated_amount": "Estimated Amount:",
-  "estimated_expenses.dialog.cost_to_you":"Cost to you",
-  "estimated_expenses.dialog.what_you_ll_charge":"What you'll charge",
+  "estimated_expenses.dialog.cost_to_you": "Cost to you",
+  "estimated_expenses.dialog.what_you_ll_charge": "What you'll charge",
   "estimated_expense.schema.label.estimated_expense": "Estimated expense name",
   "estimated_expense.schema.label.quantity": "Quantity",
   "estimated_expense.schema.label.unit_price": "Unit price",