diff --git a/client/src/components/Expenses/ExpenseForm.js b/client/src/components/Expenses/ExpenseForm.js
deleted file mode 100644
index 011c0d828..000000000
--- a/client/src/components/Expenses/ExpenseForm.js
+++ /dev/null
@@ -1,246 +0,0 @@
-// import React, { useState } from 'react';
-// import * as Yup from 'yup';
-// import { useFormik } from 'formik';
-// import {
-//   FormGroup,
-//   MenuItem,
-//   Intent,
-//   InputGroup,
-//   Position,
-//   Button,
-//   TextArea,
-//   ControlGroup
-// } from '@blueprintjs/core';
-// import { DateInput } from '@blueprintjs/datetime';
-// import { Select } from '@blueprintjs/select';
-// import { FormattedMessage as T, useIntl } from 'react-intl';
-// import { momentFormatter } from 'utils';
-// import moment from 'moment';
-// import AppToaster from 'components/AppToaster';
-
-// export default function ExpenseForm({
-//   accounts,
-//   editExpense,
-//   submitExpense,
-//   expenseDetails,
-//   currencies
-// }) {
-//   const {formatMessage} = useIntl();
-
-//   const [state, setState] = useState({
-//     selectedExpenseAccount: null,
-//     selectedPaymentAccount: null
-//   });
-//   const validationSchema = Yup.object().shape({
-//     date: Yup.date().required().label(formatMessage({id:'date'})),
-//     description: Yup.string().trim().label(formatMessage({id:'description'})),
-//     expense_account_id: Yup.number().required().label(formatMessage({id:'expense_account_id'})),
-//     payment_account_id: Yup.number().required().label(formatMessage({id:'payment_account_id'})),
-//     amount: Yup.number().required().label(formatMessage({id:'amount'})),
-//     currency_code: Yup.string().required().label(formatMessage({id:'currency_code_'})),
-//     publish: Yup.boolean().label(formatMessage({id:'publish'})),
-//     exchange_rate: Yup.number().label(formatMessage({id:'exchange_rate_'}))
-//   });
-
-//   const formik = useFormik({
-//     enableReinitialize: true,
-//     validationSchema: validationSchema,
-//     initialValues: {
-//       date: null
-//     },
-//     onSubmit: values => {
-//       submitExpense(values)
-//         .then(response => {
-//           AppToaster.show({
-//             message: formatMessage({id:'the_expense_has_been_successfully_created'})
-//           });
-//         })
-//         .catch(error => {});
-//     }
-//   });
-
-//   // Account item of select accounts field.
-//   const accountItem = (item, { handleClick, modifiers, query }) => {
-//     return (
-//       <MenuItem
-//         text={item.name}
-//         label={item.code}
-//         key={item.id}
-//         onClick={handleClick}
-//       />
-//     );
-//   };
-
-//   const onChangeAccount = () => {};
-
-//   const onChangePaymentAccount = () => {};
-
-//   const handleDateChange = date => {
-//     const formatted = moment(date).format('YYYY/MM/DD');
-//     formik.setFieldValue('date', formatted);
-//   };
-
-//   // Filters accounts items.
-//   const filterAccountsPredicater = (query, account, _index, exactMatch) => {
-//     const normalizedTitle = account.name.toLowerCase();
-//     const normalizedQuery = query.toLowerCase();
-
-//     if (exactMatch) {
-//       return normalizedTitle === normalizedQuery;
-//     } else {
-//       return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-//     }
-//   };
-
-//   const onExpenseAccountSelect = account => {
-//     setState({ ...state, selectedExpenseAccount: account });
-//     formik.setFieldValue('expense_account_id', account.id);
-//   };
-
-//   const onChangePaymentAccountSelect = account => {
-//     setState({ ...state, selectedPaymentAccount: account });
-//     formik.setFieldValue('payment_account_id', account.id);
-//   };
-
-//   const onAmountCurrencySelect = currency => {
-//     formik.setFieldValue('currency_code', currency.id);
-//   };
-
-//   const paymentAccountLabel = state.selectedPaymentAccount
-//     ? state.selectedPaymentAccount.name
-//     : <T id={'select_payment_account'}/>;
-
-//   const expenseAccountLabel = state.selectedExpenseAccount
-//     ? state.selectedExpenseAccount.name
-//     : <T id={'select_expense_account'}/>;
-
-//   const handleClose = () => {};
-
-//   return (
-//     <div class='expense-form'>
-//       <form onSubmit={formik.handleSubmit}>
-//         <FormGroup
-//           label={<T id={'date'}/>}
-//           inline={true}
-//           intent={formik.errors.date && Intent.DANGER}
-//           helperText={formik.errors.date && formik.errors.date}
-//         >
-//           <DateInput
-//             {...momentFormatter('YYYY/MM/DD')}
-//             defaultValue={new Date()}
-//             onChange={handleDateChange}
-//             popoverProps={{ position: Position.BOTTOM }}
-//           />
-//         </FormGroup>
-
-//         <FormGroup
-//           label={<T id={'expense_account'}/>}
-//           className={'form-group--expense-account'}
-//           inline={true}
-//           intent={formik.errors.expense_account_id && Intent.DANGER}
-//           helperText={
-//             formik.errors.expense_account_id && formik.errors.expense_account_id
-//           }
-//         >
-//           <Select
-//             items={accounts}
-//             itemRenderer={accountItem}
-//             itemPredicate={filterAccountsPredicater}
-//             popoverProps={{ minimal: true }}
-//             onItemSelect={onExpenseAccountSelect}
-//           >
-//             <Button
-//               fill={true}
-//               rightIcon='caret-down'
-//               text={expenseAccountLabel}
-//             />
-//           </Select>
-//         </FormGroup>
-
-//         <FormGroup
-//           label={<T id={'amount'}/>}
-//           className={'form-group--amount'}
-//           intent={formik.errors.amount && Intent.DANGER}
-//           helperText={formik.errors.amount && formik.errors.amount}
-//           inline={true}
-//         >
-//           <ControlGroup>
-//             <Select
-//               items={currencies.map(c => ({
-//                 id: c.currency_code,
-//                 name: c.currency_code
-//               }))}
-//               itemRenderer={accountItem}
-//               itemPredicate={filterAccountsPredicater}
-//               popoverProps={{ minimal: true }}
-//               onItemSelect={onAmountCurrencySelect}
-//             >
-//               <Button
-//                 rightIcon='caret-down'
-//                 text={formik.values.currency_code}
-//               />
-//             </Select>
-
-//             <InputGroup
-//               medium={true}
-//               intent={formik.errors.amount && Intent.DANGER}
-//               {...formik.getFieldProps('amount')}
-//             />
-//           </ControlGroup>
-//         </FormGroup>
-
-//         <FormGroup
-//           label={<T id={'exchange_rate'}/>}
-//           className={'form-group--exchange-rate'}
-//           inline={true}
-//         >
-//           <InputGroup />
-//         </FormGroup>
-
-//         <FormGroup
-//           label={<T id={'payment_account'}/>}
-//           className={'form-group--payment-account'}
-//           inline={true}
-//           intent={formik.errors.payment_account_id && Intent.DANGER}
-//           helperText={
-//             formik.errors.payment_account_id && formik.errors.payment_account_id
-//           }
-//         >
-//           <Select
-//             items={accounts}
-//             itemRenderer={accountItem}
-//             itemPredicate={filterAccountsPredicater}
-//             popoverProps={{ minimal: true }}
-//             onItemSelect={onChangePaymentAccountSelect}
-//           >
-//             <Button
-//               fill={true}
-//               rightIcon='caret-down'
-//               text={paymentAccountLabel}
-//             />
-//           </Select>
-//         </FormGroup>
-
-//         <FormGroup
-//           label={<T id={'description'}/>}
-//           className={'form-group--description'}
-//           inline={true}
-//         >
-//           <TextArea
-//             growVertically={true}
-//             large={true}
-//             {...formik.getFieldProps('description')}
-//           />
-//         </FormGroup>
-
-//         <div class='form__floating-footer'>
-//           <Button intent={Intent.PRIMARY} type='submit'>
-//         <T id={'save'}/>
-//           </Button>
-//           <Button><T id={'save_as_draft'}/></Button>
-//           <Button onClick={handleClose}><T id={'close'}/></Button>
-//         </div>
-//       </form>
-//     </div>
-//   );
-// }
diff --git a/client/src/components/Expenses/ExpensesActionsBar.js b/client/src/components/Expenses/ExpensesActionsBar.js
deleted file mode 100644
index f68dabbfd..000000000
--- a/client/src/components/Expenses/ExpensesActionsBar.js
+++ /dev/null
@@ -1,82 +0,0 @@
-// import React from 'react';
-// import {
-//   Button,
-//   AnchorButton,
-//   Classes,
-//   NavbarGroup,
-//   Popover,
-//   MenuItem,
-//   PopoverInteractionKind,
-//   Position,
-//   Menu,
-//   NavbarDivider,
-//   Intent,
-// } from '@blueprintjs/core';
-// import { useRouteMatch } from 'react-router-dom'
-// import { FormattedMessage as T } from 'react-intl';
-// import classNames from 'classnames';
-
-// import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-// import Icon from 'components/Icon';
-
-// export default function ExpensesActionsBar() {
-//   const {path} = useRouteMatch();
-//   const onClickNewAccount = () => {};
-//   const views = [];
-
-//   const viewsMenuItems = views.map((view) => {
-//     return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
-//   });
-//   return (
-//     <DashboardActionsBar>
-//       <NavbarGroup>
-//         <Popover
-//           content={<Menu>{viewsMenuItems}</Menu>}
-//           minimal={true}
-//           interactionKind={PopoverInteractionKind.HOVER}
-//           position={Position.BOTTOM_LEFT}
-//         >
-//           <Button
-//             className={classNames(Classes.MINIMAL, 'button--table-views')}
-//             icon={<Icon icon='table' />}
-//             text={<T id={'table_views'}/>}
-//             rightIcon={'caret-down'}
-//           />
-//         </Popover>
-
-//         <NavbarDivider />
-
-//         <AnchorButton
-//           className={Classes.MINIMAL}
-//           icon={<Icon icon='plus' />}
-//           href='/expenses/new'
-//           text={<T id={'new_expense'}/>}
-//           onClick={onClickNewAccount}
-//         />
-//         <Button
-//           className={Classes.MINIMAL}
-//           intent={Intent.DANGER}
-//           icon={<Icon icon='plus' />}
-//           text={<T id={'delete'}/>}
-//           onClick={onClickNewAccount}
-//         />
-//         <Button
-//           className={Classes.MINIMAL}
-//           icon={<Icon icon='plus' />}
-//           text={<T id={'bulk_update'}/>}
-//           onClick={onClickNewAccount}
-//         />
-//         <Button
-//           className={Classes.MINIMAL}
-//           icon={<Icon icon='file-import' />}
-//           text={<T id={'import'}/>}
-//         />
-//         <Button
-//           className={Classes.MINIMAL}
-//           icon={<Icon icon='file-export' />}
-//           text={<T id={'export'}/>}
-//         />
-//       </NavbarGroup>
-//     </DashboardActionsBar>
-//   );
-// }
diff --git a/client/src/components/Expenses/ExpensesTable.js b/client/src/components/Expenses/ExpensesTable.js
deleted file mode 100644
index 242cb3bcc..000000000
--- a/client/src/components/Expenses/ExpensesTable.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// import React from 'react';
-// import {
-//   GridComponent,
-//   ColumnsDirective,
-//   ColumnDirective,
-//   Inject,
-//   Sort,
-  
-// } from '@syncfusion/ej2-react-grids';
-// import {
-//   Checkbox,
-//   Popover,
-//   Button,
-//   Menu,
-//   MenuItem,
-//   MenuDivider,
-//   Position,
-// } from '@blueprintjs/core';
-// import Icon from 'components/Icon';
-// import moment from 'moment';
-
-// export default function ExpensesTable({
-//   expenses,
-//   onDeleteExpense,
-//   onEditExpense,
-// }) {
-//   const onDateStateChange = () => {
-
-//   }
-
-//   const actionMenuList = (expense) => (
-//     <Menu>
-//       <MenuItem text="View Details" />
-//       <MenuDivider />
-//       <MenuItem text="Edit Expense" onClick={() => onEditExpense(expense)} />
-//       <MenuItem text="Delete Expense" onClick={() => onDeleteExpense(expense)} />
-//     </Menu>
-//   );
-//   const columns = [
-//     {
-//       headerText: '',
-//       template: () => (<Checkbox />)
-//     },
-//     {
-//       headerText: 'Date',
-//       template: (row) => (<span>{ moment(row.date).format('YYYY/MM/DD') }</span>),
-//     },
-//     {
-//       headerText: 'Expense Account',
-//       template: (row) => (<span>{ row.expenseAccount.name }</span>),
-//     },
-//     {
-//       headerText: 'Paid Through',
-//       template: (row) => (<span>{ row.paymentAccount.name }</span>),
-//     },
-//     {
-//       headerText: 'Amount',
-//       field: 'amount'
-//     },
-//     {
-//       headerText: 'Status',
-//     },
-//     {
-//       headerText: '',
-//       template: (expense) => (
-//         <Popover content={actionMenuList(expense)} position={Position.RIGHT_BOTTOM}>
-//           <Button icon={<Icon icon="ellipsis-h" />} />
-//         </Popover>
-//       )
-//     }
-//   ]
-//   return (
-//     <GridComponent
-//       allowSorting={true}
-//       dataSource={{ result: expenses, count: 20 }}
-//       dataStateChange={onDateStateChange}>
-
-//       <ColumnsDirective>
-//         {columns.map((column) => {
-//           return (<ColumnDirective
-//             field={column.field}
-//             headerText={column.headerText}
-//             template={column.template}
-//             allowSorting={true}
-//             customAttributes={column.customAttributes}
-//             />);
-//         })}
-//       </ColumnsDirective>
-//       <Inject services={[Sort]} />
-//     </GridComponent>
-//   );
-// }
\ No newline at end of file
diff --git a/client/src/components/Expenses/ExpensesViewsTabs.js b/client/src/components/Expenses/ExpensesViewsTabs.js
deleted file mode 100644
index 306810261..000000000
--- a/client/src/components/Expenses/ExpensesViewsTabs.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// import React from 'react';
-// import {useHistory} from 'react-router';
-// import {connect} from 'react-redux';
-// import {
-//   Alignment,
-//   Navbar,
-//   NavbarGroup,
-//   Tabs,
-//   Tab,
-//   Button
-// } from "@blueprintjs/core";
-// import Icon from 'components/Icon';
-// import {useRouteMatch, Link} from 'react-router-dom';
-
-// function AccountsViewsTabs({ views }) {
-//   const history = useHistory();
-//   const {path} = useRouteMatch();
-
-//   const handleClickNewView = () => {
-//     history.push('/custom_views/new');
-//   };
-
-//   const tabs = views.map((view) => {
-//     const link = (<Link to={`${path}/${view.id}/custom_view`}>{ view.name }</Link>);
-//     return (<Tab id={`custom_view_${view.id}`} title={link} />);
-//   });
-//   return (
-//     <Navbar className="navbar--dashboard-views">
-//       <NavbarGroup
-//         align={Alignment.LEFT}>
-//         <Tabs
-//           id="navbar"
-//           large={true}
-//           className="tabs--dashboard-views"
-//         >
-//           { tabs }
-//           <Button
-//             className="button--new-view"
-//             icon={<Icon icon="plus" />}
-//             onClick={handleClickNewView} />
-//         </Tabs>
-//       </NavbarGroup>
-//     </Navbar>
-//   );
-// }
-
-// const mapStateToProps = (state) => ({
-//   views: state.views.resourceViews['expenses'],
-// });
-
-// export default connect(mapStateToProps)(AccountsViewsTabs);
\ No newline at end of file
diff --git a/client/src/containers/Expenses/ExpenseDataTable.js b/client/src/containers/Expenses/ExpenseDataTable.js
index 7fd022fa6..fe925b2fa 100644
--- a/client/src/containers/Expenses/ExpenseDataTable.js
+++ b/client/src/containers/Expenses/ExpenseDataTable.js
@@ -30,19 +30,20 @@ import withExpenses from 'containers/Expenses/withExpenses';
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
 
 function ExpenseDataTable({
-  loading,
-
   //#withExpenes
   expenses,
   expensesLoading,
-
+  
   // #withDashboardActions
   changeCurrentView,
   changePageSubtitle,
   setTopbarEditView,
-
+  
+  // #withView
   viewMeta,
-
+  
+  // #ownProps
+  loading,
   onFetchData,
   onEditExpense,
   onDeleteExpense,
@@ -119,8 +120,7 @@ function ExpenseDataTable({
     ),
     [handleEditExpense, handleDeleteExpense, handlePublishExpense],
   );
-  console.log(Object.values(expenses), 'ER');
-  
+
   const columns = useMemo(
     () => [
       {
diff --git a/client/src/containers/Expenses/ExpenseFooter.js b/client/src/containers/Expenses/ExpenseFooter.js
index 2540cd66c..8bd219518 100644
--- a/client/src/containers/Expenses/ExpenseFooter.js
+++ b/client/src/containers/Expenses/ExpenseFooter.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 
-function ExpenseFooter({
+export default function ExpenseFooter({
   formik: { isSubmitting },
   onSubmitClick,
   onCancelClick,
@@ -40,6 +40,4 @@ function ExpenseFooter({
       </Button>
     </div>
   );
-}
-
-export default ExpenseFooter;
+};
diff --git a/client/src/containers/Expenses/ExpenseForm.js b/client/src/containers/Expenses/ExpenseForm.js
index 4b198b0c6..4ee251b61 100644
--- a/client/src/containers/Expenses/ExpenseForm.js
+++ b/client/src/containers/Expenses/ExpenseForm.js
@@ -43,6 +43,7 @@ function ExpenseForm({
   changePageSubtitle,
 
   //#withExpenseDetail
+  // @todo expenseDetail to expense
   expenseDetail,
 
   // #own Props
@@ -79,6 +80,7 @@ function ExpenseForm({
     } else {
       changePageTitle(formatMessage({ id: 'new_expense' }));
     }
+  // @todo not functions just states.
   }, [changePageTitle, changePageSubtitle, expenseDetail, formatMessage]);
 
   const validationSchema = Yup.object().shape({
@@ -98,11 +100,11 @@ function ExpenseForm({
       .label(formatMessage({ id: 'description' })),
 
     publish: Yup.boolean().label(formatMessage({ id: 'publish' })),
-
     categories: Yup.array().of(
       Yup.object().shape({
         index: Yup.number().nullable(),
         amount: Yup.number().nullable(),
+        // @todo expense_account_id is required.
         expense_account_id: Yup.number().nullable(),
         description: Yup.string().nullable(),
       }),
@@ -135,6 +137,7 @@ function ExpenseForm({
       reference_no: '',
       currency_code: '',
       categories: [
+        // @todo @mohamed index
         defaultCategory,
         defaultCategory,
         defaultCategory,
@@ -144,7 +147,6 @@ function ExpenseForm({
     [defaultCategory],
   );
 
-  
   const initialValues = useMemo(
     () => ({
       ...(expenseDetail
@@ -181,7 +183,6 @@ function ExpenseForm({
       const categories = values.categories.filter(
         (category) => category.amount || category.index,
       );
-
       const form = {
         ...values,
         published: payload.publish,
@@ -209,6 +210,7 @@ function ExpenseForm({
                 resolve(response);
               })
               .catch((errors) => {
+                // @todo handle errors.
                 if (errors.find((e) => e.type === 'TOTAL.AMOUNT.EQUALS.ZERO')) {
                 }
                 setErrors(
@@ -255,6 +257,8 @@ function ExpenseForm({
     },
   });
 
+  console.log(formik.errors);
+
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
@@ -280,6 +284,7 @@ function ExpenseForm({
     },
     [setDeletedFiles, deletedFiles],
   );
+  // @todo @mohamed
   const fetchHook = useQuery('expense-form', () => requestFetchExpensesTable());
 
   return (
diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js
index c5cdafc94..a5303fb23 100644
--- a/client/src/containers/Expenses/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseFormHeader.js
@@ -35,6 +35,7 @@ function ExpenseFormHeader({
     [setFieldValue],
   );
 
+  // @todo @mohamed reusable components.
   const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
 
   const requiredSpan = useMemo(() => <span className="required">*</span>, []);
@@ -74,6 +75,7 @@ function ExpenseFormHeader({
   };
 
   // Filters accounts items.
+  // @filter accounts predicator resauble
   const filterAccountsPredicater = useCallback(
     (query, account, _index, exactMatch) => {
       const normalizedTitle = account.name.toLowerCase();
@@ -101,6 +103,7 @@ function ExpenseFormHeader({
   const onItemsSelect = useCallback(
     (filedName) => {
       return (filed) => {
+        // @todo @mohamed
         setSelectedItems({
           ...selectedItems,
           [filedName]: filed,
diff --git a/client/src/containers/Expenses/ExpenseTable.js b/client/src/containers/Expenses/ExpenseTable.js
index e552696e7..f6e288d90 100644
--- a/client/src/containers/Expenses/ExpenseTable.js
+++ b/client/src/containers/Expenses/ExpenseTable.js
@@ -144,6 +144,7 @@ function ExpenseTable({
         disableSortBy: true,
       },
       {
+        // @todo Add hint component after the header label.
         Header: formatMessage({ id: 'expense_category' }),
         id: 'expense_account_id',
         accessor: 'expense_account_id',
@@ -161,7 +162,6 @@ function ExpenseTable({
         disableResizing: true,
         width: 150,
       },
-
       {
         Header: formatMessage({ id: 'description' }),
         accessor: 'description',
diff --git a/client/src/containers/Expenses/Expenses.js b/client/src/containers/Expenses/Expenses.js
index 941700cb7..f372fa43e 100644
--- a/client/src/containers/Expenses/Expenses.js
+++ b/client/src/containers/Expenses/Expenses.js
@@ -12,25 +12,29 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
 import { compose } from 'utils';
 
 function Expenses({
-  //#withwithAccountsActions
+  // #withwithAccountsActions
   requestFetchAccounts,
 
-  //#withExpensesActions
+  // #withExpensesActions
   requestFetchExpense,
+
   // #wihtCurrenciesActions
   requestFetchCurrencies,
 }) {
   const history = useHistory();
   const { id } = useParams();
 
+  // @todo
   const fetchAccounts = useQuery('accounts-expense-list', (key) =>
     requestFetchAccounts(),
   );
 
+  // @todo
   const fetchExpense = useQuery(id && ['expense', id], (key, expense_Id) =>
     requestFetchExpense(expense_Id),
   );
 
+  // @todo
   const fetchCurrencies = useQuery('currencies-expense-list', () =>
     requestFetchCurrencies(),
   );
diff --git a/client/src/containers/Expenses/ExpensesList.js b/client/src/containers/Expenses/ExpensesList.js
index 430d14896..1cdfe0cb0 100644
--- a/client/src/containers/Expenses/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesList.js
@@ -62,7 +62,6 @@ function ExpensesList({
   );
 
   // Handle cancel expense journal.
-
   const handleCancelExpenseDelete = useCallback(() => {
     setDeleteExpense(false);
   }, [setDeleteExpense]);
@@ -103,12 +102,8 @@ function ExpensesList({
       .then(() => {
         AppToaster.show({
           message: formatMessage(
-            {
-              id: 'the_expenses_has_been_successfully_deleted',
-            },
-            {
-              count: selectedRowsCount,
-            },
+            { id: 'the_expenses_has_been_successfully_deleted', },
+            { count: selectedRowsCount, },
           ),
           intent: Intent.SUCCESS,
         });
@@ -117,6 +112,8 @@ function ExpensesList({
       .catch((error) => {
         setBulkDelete(false);
       });
+  
+      // @todo 
   }, [requestDeleteBulkExpenses, bulkDelete, formatMessage, selectedRowsCount]);
 
   // Handle cancel bulk delete alert.
diff --git a/client/src/containers/Expenses/withExpenseDetail.js b/client/src/containers/Expenses/withExpenseDetail.js
index d18648d00..62a44c352 100644
--- a/client/src/containers/Expenses/withExpenseDetail.js
+++ b/client/src/containers/Expenses/withExpenseDetail.js
@@ -1,11 +1,8 @@
 import { connect } from 'react-redux';
 import { getExpenseById } from 'store/expenses/expenses.reducer';
 
-const mapStateToProps = (state, props) => {
-
-  return {
-    expenseDetail: getExpenseById(state, props.expenseId),
-  };
-};
+const mapStateToProps = (state, props) => ({
+  expenseDetail: getExpenseById(state, props.expenseId),
+});
 
 export default connect(mapStateToProps);
diff --git a/client/src/containers/Expenses/withExpensesActions.js b/client/src/containers/Expenses/withExpensesActions.js
index 64118f984..dc9e41fe5 100644
--- a/client/src/containers/Expenses/withExpensesActions.js
+++ b/client/src/containers/Expenses/withExpensesActions.js
@@ -14,7 +14,6 @@ export const mapDispatchToProps = (dispatch) => ({
   requestSubmitExpense: (form) => dispatch(submitExpense({ form })),
   requestFetchExpense: (id) => dispatch(fetchExpense({ id })),
   requestEditExpense: (id, form) => dispatch(editExpense({ id, form })),
- 
   requestDeleteExpense: (id) => dispatch(deleteExpense({ id })),
   requestFetchExpensesTable: (query = {}) =>
     dispatch(fetchExpensesTable({ query: { ...query } })),
diff --git a/client/src/store/expenses/expenses.actions.js b/client/src/store/expenses/expenses.actions.js
index 9bc992590..1f4ac1097 100644
--- a/client/src/store/expenses/expenses.actions.js
+++ b/client/src/store/expenses/expenses.actions.js
@@ -5,12 +5,11 @@ export const fetchExpensesTable = ({ query } = {}) => {
   return (dispatch, getState) =>
     new Promise((resolve, reject) => {
       const pageQuery = getState().expenses.tableQuery;
-      dispatch({
-        type: t.SET_DASHBOARD_REQUEST_LOADING,
-      });
       dispatch({
         type: t.EXPENSES_TABLE_LOADING,
-        loading: true,
+        payload: {
+          loading: true,
+        },
       });
       ApiService.get('expenses', {
         params: { ...pageQuery, ...query },
@@ -18,19 +17,22 @@ export const fetchExpensesTable = ({ query } = {}) => {
         .then((response) => {
           dispatch({
             type: t.EXPENSES_PAGE_SET,
-            expenses: response.data.expenses.results,
-            customViewId: response.data.customViewId || -1,
+            payload: {
+              expenses: response.data.expenses.results,
+              customViewId: response.data.customViewId || -1,
+            },            
           });
           dispatch({
             type: t.EXPENSES_ITEMS_SET,
-            expenses: response.data.expenses.results,
+            payload: {
+              expenses: response.data.expenses.results,
+            }
           });
           dispatch({
             type: t.EXPENSES_TABLE_LOADING,
-            loading: false,
-          });
-          dispatch({
-            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
+            payload: {
+              loading: false,
+            },
           });
           resolve(response);
         })
diff --git a/client/src/store/expenses/expenses.reducer.js b/client/src/store/expenses/expenses.reducer.js
index 0b2729111..444363a93 100644
--- a/client/src/store/expenses/expenses.reducer.js
+++ b/client/src/store/expenses/expenses.reducer.js
@@ -18,7 +18,9 @@ const defaultExpense = {
 const reducer = createReducer(initialState, {
   [t.EXPENSE_SET]: (state, action) => {
     const { id, expense } = action.payload;
-    state.items[id] = { ...defaultExpense, ...expense };
+    const oldExpense = state.items[id] || {};
+
+    state.items[id] = { ...defaultExpense, ...oldExpense, ...expense };
   },
 
   [t.EXPENSE_PUBLISH]: (state, action) => {
@@ -29,9 +31,10 @@ const reducer = createReducer(initialState, {
   },
 
   [t.EXPENSES_ITEMS_SET]: (state, action) => {
+    const { expenses } = action.payload;
     const _expenses = {};
 
-    action.expenses.forEach((expense) => {
+    expenses.forEach((expense) => {
       _expenses[expense.id] = {
         ...defaultExpense,
         ...expense,
@@ -44,17 +47,19 @@ const reducer = createReducer(initialState, {
   },
 
   [t.EXPENSES_PAGE_SET]: (state, action) => {
-    const viewId = action.customViewId || -1;
+    const { customViewId, expenses } = action.payload;
+    const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
 
     state.views[viewId] = {
       ...view,
-      ids: action.expenses.map((i) => i.id),
+      ids: expenses.map((i) => i.id),
     };
   },
 
   [t.EXPENSES_TABLE_LOADING]: (state, action) => {
-    state.loading = action.loading;
+    const { loading } = action.payload;
+    state.loading = loading;
   },
 
   [t.EXPENSES_SET_CURRENT_VIEW]: (state, action) => {
@@ -63,7 +68,6 @@ const reducer = createReducer(initialState, {
 
   [t.EXPENSE_DELETE]: (state, action) => {
     const { id } = action.payload;
-    // state.items = omit(state.items, [id]);
 
     if (typeof state.items[id] !== 'undefined') {
       delete state.items[id];