diff --git a/src/components/AvaterCell.js b/src/components/AvaterCell.js
new file mode 100644
index 000000000..189042a61
--- /dev/null
+++ b/src/components/AvaterCell.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { firstLettersArgs } from 'utils';
+
+export default function AvatarCell({ row: { original }, size }) {
+  return (
+    <span className="avatar" data-size={size}>
+      {firstLettersArgs(original?.display_name)}
+    </span>
+  );
+}
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index b3e16ab36..c3e634560 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -86,7 +86,7 @@ function Pagination({
   currentPage,
   total,
   size,
-  pageSizesOptions = [5, 12, 20, 30, 50, 75, 100, 150],
+  pageSizesOptions = [20, 30, 50, 75, 100, 150],
   onPageChange,
   onPageSizeChange,
 }) {
diff --git a/src/components/UniversalSearch/UniversalSearch.js b/src/components/UniversalSearch/UniversalSearch.js
index a0c054ba7..251e23f0f 100644
--- a/src/components/UniversalSearch/UniversalSearch.js
+++ b/src/components/UniversalSearch/UniversalSearch.js
@@ -141,7 +141,6 @@ function UniversalSearchBar({ isOpen, onSearchTypeChange, ...listProps }) {
       {...handlers}
     >
       <InputGroup
-        autoFocus={true}
         large={true}
         leftIcon={<Icon icon={'universal-search'} iconSize={20} />}
         placeholder={intl.get('universal_search.placeholder')}
diff --git a/src/components/index.js b/src/components/index.js
index 836e7706f..4c93d1628 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -58,6 +58,7 @@ import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
 import { MoneyFieldCell } from './DataTableCells';
 import Card from './Card';
+import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
 
@@ -71,13 +72,13 @@ export * from './PdfPreview';
 export * from './Details';
 export * from './Drawer/DrawerInsider';
 export * from './Drawer/DrawerMainTabs';
-export * from './TotalLines/index'
+export * from './TotalLines/index';
 export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
 export * from './Drawer';
 export * from './Forms';
-export * from './MultiSelectTaggable'
+export * from './MultiSelectTaggable';
 export * from './Utils/FormatNumber';
 export * from './Utils/FormatDate';
 
@@ -150,4 +151,5 @@ export {
   MoneyFieldCell,
   ItemsMultiSelect,
   Card,
+  AvaterCell,
 };
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
index c75fc1a57..a3f65be13 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
@@ -73,7 +73,7 @@ function ManualJournalActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('manual_journal', 'tableSize', size);
+    addSetting('manualJournals', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
index 4b5efad04..7e2da9537 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
@@ -13,6 +13,7 @@ import withManualJournals from './withManualJournals';
 import withManualJournalsActions from './withManualJournalsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -38,6 +39,9 @@ function ManualJournalsDataTable({
 
   // #ownProps
   onSelectedRowsChange,
+
+  // #withSettings
+  manualJournalsTableSize,
 }) {
   // Manual journals context.
   const {
@@ -125,6 +129,7 @@ function ManualJournalsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={manualJournalsTableSize}
         payload={{
           onDelete: handleDeleteJournal,
           onPublish: handlePublishJournal,
@@ -143,4 +148,7 @@ export default compose(
   })),
   withAlertsActions,
   withDrawerActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    manualJournalsTableSize: manualJournalsSettings?.tableSize,
+  })),
 )(ManualJournalsDataTable);
diff --git a/src/containers/Accounting/JournalsLanding/utils.js b/src/containers/Accounting/JournalsLanding/utils.js
index 1a6dc19cb..d493958c2 100644
--- a/src/containers/Accounting/JournalsLanding/utils.js
+++ b/src/containers/Accounting/JournalsLanding/utils.js
@@ -37,6 +37,7 @@ export const useManualJournalsColumns = () => {
         className: 'journal_number',
         width: 100,
         clickable: true,
+        textOverview: true,
       },
       {
         id: 'journal_type',
@@ -44,6 +45,7 @@ export const useManualJournalsColumns = () => {
         accessor: 'journal_type',
         width: 110,
         clickable: true,
+        textOverview: true,
       },
       {
         id: 'status',
diff --git a/src/containers/Accounts/AccountsActionsBar.js b/src/containers/Accounts/AccountsActionsBar.js
index 3e85b13d5..e96d69c8a 100644
--- a/src/containers/Accounts/AccountsActionsBar.js
+++ b/src/containers/Accounts/AccountsActionsBar.js
@@ -17,7 +17,7 @@ import {
   If,
   DashboardActionViewsList,
   DashboardFilterButton,
-  DashboardRowsHeightButton
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -28,7 +28,8 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAccountsTableActions from './withAccountsTableActions';
-
+import withSettings from '../Settings/withSettings';
+import withSettingsActions from '../Settings/withSettingsActions';
 import { compose } from 'utils';
 
 /**
@@ -51,6 +52,12 @@ function AccountsActionsBar({
 
   // #ownProps
   onFilterChanged,
+
+  // #withSettings
+  accountsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const { resourceViews, fields } = useAccountsChartContext();
 
@@ -94,6 +101,10 @@ function AccountsActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('accounts', 'tableSize', size);
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -167,7 +178,10 @@ function AccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-        <DashboardRowsHeightButton />
+        <DashboardRowsHeightButton
+          initialValue={accountsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
         <NavbarDivider />
         <Switch
           labelElement={<T id={'inactive'} />}
@@ -189,10 +203,14 @@ function AccountsActionsBar({
 export default compose(
   withDialogActions,
   withAlertActions,
+  withSettingsActions,
   withAccounts(({ accountsSelectedRows, accountsTableState }) => ({
     accountsSelectedRows,
     accountsInactiveMode: accountsTableState.inactiveMode,
     accountsFilterConditions: accountsTableState.filterRoles,
   })),
+  withSettings(({ accountsSettings }) => ({
+    accountsTableSize: accountsSettings.tableSize,
+  })),
   withAccountsTableActions,
 )(AccountsActionsBar);
diff --git a/src/containers/Accounts/AccountsDataTable.js b/src/containers/Accounts/AccountsDataTable.js
index e004d501d..8d12404ee 100644
--- a/src/containers/Accounts/AccountsDataTable.js
+++ b/src/containers/Accounts/AccountsDataTable.js
@@ -10,6 +10,7 @@ import { TABLES } from 'common/tables';
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import withSettings from '../Settings/withSettings';
 
 import { useAccountsChartContext } from './AccountsChartProvider';
 import { useMemorizedColumnsWidths } from '../../hooks';
@@ -30,6 +31,9 @@ function AccountsDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  accountsTableSize,
 }) {
   const { isAccountsLoading, isAccountsFetching, accounts } =
     useAccountsChartContext();
@@ -102,11 +106,12 @@ function AccountsDataTable({
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
       // #TableVirtualizedListRows props.
-      vListrowHeight={42}
+      vListrowHeight={accountsTableSize == 'small' ? 40 : 42}
       vListOverscanRowCount={0}
       onCellClick={handleCellClick}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
+      size={accountsTableSize}
       payload={{
         onEdit: handleEditAccount,
         onDelete: handleDeleteAccount,
@@ -123,4 +128,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ accountsSettings }) => ({
+    accountsTableSize: accountsSettings.tableSize,
+  })),
 )(AccountsDataTable);
diff --git a/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js b/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js
index 7b71469ac..2dc6b0042 100644
--- a/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js
+++ b/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js
@@ -31,7 +31,7 @@ function CustomerBulkDeleteAlert({
     closeAlert(name);
   };
 
-  console.log(customersIds, 'EE');
+
 
   // Handle confirm customers bulk delete.
   const handleConfirmBulkDelete = useCallback(() => {
diff --git a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
index f90fd24fa..c8ed0fdb6 100644
--- a/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
+++ b/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
@@ -86,10 +86,10 @@ function CustomerActionsBar({
   const handleRefreshBtnClick = () => {
     refresh();
   };
-  
+
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('customer', 'tableSize', size);
+    addSetting('custoemrs', 'tableSize', size);
   };
 
   return (
@@ -177,8 +177,8 @@ export default compose(
     accountsInactiveMode: customersTableState.inactiveMode,
     customersFilterConditions: customersTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
-  //   customersTableSize:
-  // })),
+  withSettings(({ customersSettings }) => ({
+    customersTableSize: customersSettings?.tableSize,
+  })),
   withAlertActions,
 )(CustomerActionsBar);
diff --git a/src/containers/Customers/CustomersLanding/CustomersTable.js b/src/containers/Customers/CustomersLanding/CustomersTable.js
index 317468215..7619936ac 100644
--- a/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -14,6 +14,7 @@ import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -38,6 +39,9 @@ function CustomersTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  customersTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function CustomersTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={customersTableSize}
         payload={{
           onDelete: handleCustomerDelete,
           onEdit: handleCustomerEdit,
@@ -155,4 +160,7 @@ export default compose(
   withCustomersActions,
   withDrawerActions,
   withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withSettings(({ customersSettings }) => ({
+    customersTableSize: customersSettings?.tableSize,
+  })),
 )(CustomersTable);
diff --git a/src/containers/Customers/CustomersLanding/components.js b/src/containers/Customers/CustomersLanding/components.js
index 958563ae2..0cce24139 100644
--- a/src/containers/Customers/CustomersLanding/components.js
+++ b/src/containers/Customers/CustomersLanding/components.js
@@ -1,17 +1,12 @@
 import React, { useMemo } from 'react';
-import {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Intent,
-} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import clsx from 'classnames';
+
 import intl from 'react-intl-universal';
 
-import { CLASSES } from '../../../common/classes';
-import { Icon, Money, If } from 'components';
-import {  } from 'utils';
-import { safeCallback, firstLettersArgs } from 'utils';
+import { Icon, Money, If, AvaterCell } from 'components';
+
+import { safeCallback } from 'utils';
 
 /**
  * Actions menu.
@@ -69,13 +64,6 @@ export function ActionsMenu({
   );
 }
 
-/**
- * Avatar cell.
- */
-export function AvatarCell(row) {
-  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
-}
-
 /**
  * Phone number accessor.
  */
@@ -99,7 +87,7 @@ export function useCustomersTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarCell,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,
diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js
index 95f14bfe6..b39a1d86e 100644
--- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js
+++ b/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js
@@ -21,7 +21,7 @@ export const transformErrors = (errors, { setFieldError }) => {
       intl.get('payment_number_is_not_unique'),
     );
   }
-  if (getError('INVALID_PAYMENT_AMOUNT')) {
+  if (getError('INVALID_BILL_PAYMENT_AMOUNT')) {
     setFieldError(
       'payment_amount',
       intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
diff --git a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
index 78947d9fb..65bf1a998 100644
--- a/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
+++ b/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
@@ -16,7 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
 
 import { safeCallback, compose } from 'utils';
 
@@ -32,7 +32,7 @@ function BillDetailActionsBar({
 }) {
   const history = useHistory();
 
-  const { billId } = useBillDrawerContext();
+  const { billId, bill } = useBillDrawerContext();
 
   // Handle edit bill.
   const onEditBill = () => {
@@ -45,6 +45,11 @@ function BillDetailActionsBar({
     openAlert('bill-delete', { billId });
   };
 
+  // Handle quick bill payment .
+  const handleQuickBillPayment = () => {
+    openDialog('quick-payment-made', { billId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -54,6 +59,14 @@ function BillDetailActionsBar({
           text={<T id={'edit_bill'} />}
           onClick={safeCallback(onEditBill)}
         />
+        <If condition={bill.is_open && !bill.is_fully_paid}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={<T id={'payment_divider'} />}
+            onClick={handleQuickBillPayment}
+          />
+        </If>
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
index c0c37b870..5449e1f7e 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -16,7 +16,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { If, Icon, FormattedMessage as T } from 'components';
 
 import { compose } from 'utils';
 
@@ -36,7 +36,7 @@ function InvoiceDetailActionsBar({
   const history = useHistory();
 
   // Invoice detail drawer context.
-  const { invoiceId } = useInvoiceDetailDrawerContext();
+  const { invoiceId, invoice } = useInvoiceDetailDrawerContext();
 
   // Handle edit sale invoice.
   const handleEditInvoice = () => {
@@ -54,6 +54,11 @@ function InvoiceDetailActionsBar({
     openDialog('invoice-pdf-preview', { invoiceId });
   };
 
+  // Handle quick payment invoice.
+  const handleQuickPaymentInvoice = () => {
+    openDialog('quick-payment-receive', { invoiceId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,6 +68,14 @@ function InvoiceDetailActionsBar({
           text={<T id={'edit_invoice'} />}
           onClick={handleEditInvoice}
         />
+        <If condition={invoice.is_delivered && !invoice.is_fully_paid}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={<T id={'payment_divider'} />}
+            onClick={handleQuickPaymentInvoice}
+          />
+        </If>
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
diff --git a/src/containers/Expenses/ExpenseForm/utils.js b/src/containers/Expenses/ExpenseForm/utils.js
index 27ec5bd3a..d197b69b3 100644
--- a/src/containers/Expenses/ExpenseForm/utils.js
+++ b/src/containers/Expenses/ExpenseForm/utils.js
@@ -1,4 +1,5 @@
 import { AppToaster } from 'components';
+import { Intent } from '@blueprintjs/core';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
@@ -6,11 +7,13 @@ import {
   defaultFastFieldShouldUpdate,
   transformToForm,
   repeatValue,
-  ensureEntriesHasEmptyLine
+  ensureEntriesHasEmptyLine,
 } from 'utils';
 
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
+  ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED:
+    'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
 };
 
 // Transform API errors in toasts messages.
@@ -24,6 +27,14 @@ export const transformErrors = (errors, { setErrors }) => {
       }),
     );
   }
+  if (hasError(ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED)) {
+    setErrors(
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+      }),
+    );
+  }
 };
 
 export const MIN_LINES_NUMBER = 4;
diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
index 75b10b937..6b4e59ec5 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpenseActionsBar.js
@@ -80,7 +80,7 @@ function ExpensesActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('expense', 'tableSize', size);
+    addSetting('expenses', 'tableSize', size);
   };
   return (
     <DashboardActionsBar>
diff --git a/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js b/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
index d85b7dd72..1b90bb526 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
@@ -16,6 +16,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withExpensesActions from './withExpensesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { ActionsMenu, useExpensesTableColumns } from './components';
 
@@ -31,6 +32,9 @@ function ExpensesDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withSettings
+  expensesTableSize,
 }) {
   // Expenses list context.
   const {
@@ -119,6 +123,7 @@ function ExpensesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={expensesTableSize}
         payload={{
           onPublish: handlePublishExpense,
           onDelete: handleDeleteExpense,
@@ -135,4 +140,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withExpensesActions,
+  withSettings(({ expenseSettings }) => ({
+    expensesTableSize: expenseSettings?.tableSize,
+  })),
 )(ExpensesDataTable);
diff --git a/src/containers/ItemsCategories/ItemsCategoryActionsBar.js b/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
index 011228175..6fef2aab1 100644
--- a/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
+++ b/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
@@ -50,7 +50,7 @@ function ItemsCategoryActionsBar({
     });
   };
 
-  console.log(fields, categoriesFilterConditions, 'XXXX');
+
 
   return (
     <DashboardActionsBar>
diff --git a/src/containers/Purchases/Bills/BillForm/BillForm.js b/src/containers/Purchases/Bills/BillForm/BillForm.js
index 3df70d1af..a63e20c54 100644
--- a/src/containers/Purchases/Bills/BillForm/BillForm.js
+++ b/src/containers/Purchases/Bills/BillForm/BillForm.js
@@ -62,6 +62,18 @@ function BillForm({
         bill_number: intl.get('bill_number_exists'),
       });
     }
+    if (
+      errors.some(
+        (e) => e.type === ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED,
+      )
+    ) {
+      setErrors(
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+        }),
+      );
+    }
   };
 
   // Handles form submit.
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
index 403757ae8..d021d63b2 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.js
@@ -72,7 +72,7 @@ function BillActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('bill', 'tableSize', size);
+    addSetting('bills', 'tableSize', size);
   };
 
   return (
@@ -156,7 +156,7 @@ export default compose(
   withBills(({ billsTableState }) => ({
     billsConditionsRoles: billsTableState.filterRoles,
   })),
-  withSettings(({ billPaymentSettings }) => ({
-    billsTableSize: billPaymentSettings?.tableSize, // fix to bill
+  withSettings(({ billsettings }) => ({
+    billsTableSize: billsettings?.tableSize,
   })),
 )(BillActionsBar);
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
index c232c62f1..f2a2ef353 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -15,6 +15,7 @@ import withBillActions from './withBillsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useBillsTableColumns, ActionsMenu } from './components';
 import { useBillsListContext } from './BillsListProvider';
@@ -40,6 +41,9 @@ function BillsDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  billsTableSize,
 }) {
   // Bills list context.
   const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
@@ -125,6 +129,7 @@ function BillsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={billsTableSize}
         payload={{
           onDelete: handleDeleteBill,
           onEdit: handleEditBill,
@@ -144,4 +149,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ billsettings }) => ({
+    billsTableSize: billsettings?.tableSize,
+  })),
 )(BillsDataTable);
diff --git a/src/containers/Purchases/Bills/BillsLanding/components.js b/src/containers/Purchases/Bills/BillsLanding/components.js
index 9cd1ec6fa..bd995fdfd 100644
--- a/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -57,7 +57,7 @@ export function ActionsMenu({
       <If condition={original.is_open && !original.is_fully_paid}>
         <MenuItem
           icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
+          text={intl.get('payment_divider')}
           onClick={safeCallback(onQuick, original)}
         />
       </If>
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index fbc79001a..b3c8776c0 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -73,7 +73,7 @@ function PaymentMadeActionsBar({
   
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('payment_made', 'tableSize', size);
+    addSetting('billPayments', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
index 2fae9a6c0..b72c875ce 100644
--- a/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -16,6 +16,7 @@ import withCurrentOrganization from 'containers/Organization/withCurrentOrganiza
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { usePaymentMadesTableColumns, ActionsMenu } from './components';
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
@@ -36,6 +37,9 @@ function PaymentMadesTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  paymentMadesTableSize,
 }) {
   // Payment mades table columns.
   const columns = usePaymentMadesTableColumns();
@@ -114,6 +118,7 @@ function PaymentMadesTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={paymentMadesTableSize}
         payload={{
           onEdit: handleEditPaymentMade,
           onDelete: handleDeletePaymentMade,
@@ -130,4 +135,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withCurrentOrganization(),
+  withSettings(({ billPaymentSettings }) => ({
+    paymentMadesTableSize: billPaymentSettings?.tableSize,
+  })),
 )(PaymentMadesTable);
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index ea754ee67..e25b09083 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -73,7 +73,7 @@ function EstimateActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('estimate', 'tableSize', size);
+    addSetting('salesEstimates', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
index f2d0797b4..8e1568d43 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -10,6 +10,7 @@ import withEstimatesActions from './withEstimatesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
@@ -33,6 +34,9 @@ function EstimatesDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  estimatesTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function EstimatesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={estimatesTableSize}
         payload={{
           onApprove: handleApproveEstimate,
           onEdit: handleEditEstimate,
@@ -155,4 +160,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
 )(EstimatesDataTable);
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
index f78af696d..6b03ab3a7 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
@@ -71,7 +71,7 @@ function InvoiceActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('invoice', 'tableSize', size);
+    addSetting('salesInvoices', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
index 407e553d0..501618392 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -16,6 +16,7 @@ import withInvoiceActions from './withInvoiceActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useInvoicesTableColumns, ActionsMenu } from './components';
 import { useInvoicesListContext } from './InvoicesListProvider';
@@ -40,6 +41,9 @@ function InvoicesDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  invoicesTableSize,
 }) {
   const history = useHistory();
 
@@ -135,6 +139,7 @@ function InvoicesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={invoicesTableSize}
         payload={{
           onDelete: handleDeleteInvoice,
           onDeliver: handleDeliverInvoice,
@@ -155,4 +160,7 @@ export default compose(
   withDrawerActions,
   withDialogActions,
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
 )(InvoicesDataTable);
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/components.js b/src/containers/Sales/Invoices/InvoicesLanding/components.js
index 8bac61b39..b758a5cbe 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -55,6 +55,7 @@ export const statusAccessor = (row) => {
               })}
             </span>
             <ProgressBar
+          
               animate={false}
               stripes={false}
               intent={Intent.PRIMARY}
@@ -130,7 +131,7 @@ export function ActionsMenu({
       <If condition={original.is_delivered && !original.is_fully_paid}>
         <MenuItem
           icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={intl.get('add_payment')}
+          text={intl.get('payment_divider')}
           onClick={safeCallback(onQuick, original)}
         />
       </If>
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
index 02a449b6c..bb67f91a3 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -73,7 +73,7 @@ function PaymentReceiveActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('payment_receive', 'tableSize', size);
+    addSetting('paymentReceives', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
index 3d981dc76..5b6682b5d 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -13,6 +13,7 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
@@ -33,6 +34,9 @@ function PaymentReceivesDataTable({
 
   // #withDrawerActions
   openDrawer,
+
+  // #withSettings
+  paymentReceivesTableSize,
 }) {
   const history = useHistory();
 
@@ -115,6 +119,7 @@ function PaymentReceivesDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={paymentReceivesTableSize}
         payload={{
           onDelete: handleDeletePaymentReceive,
           onEdit: handleEditPaymentReceive,
@@ -132,4 +137,7 @@ export default compose(
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
 )(PaymentReceivesDataTable);
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
index ad365a3c2..4f7020d2d 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
@@ -72,7 +72,7 @@ function ReceiptActionsBar({
 
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
-    addSetting('receipt', 'tableSize', size);
+    addSetting('salesReceipts', 'tableSize', size);
   };
 
   return (
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
index 16f6c95a6..e7c73c3b1 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -14,6 +14,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withReceipts from './withReceipts';
 import withReceiptsActions from './withReceiptsActions';
+import withSettings from '../../../Settings/withSettings';
 
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
@@ -37,6 +38,9 @@ function ReceiptsDataTable({
 
   // #withDialogAction
   openDialog,
+
+  // #withSettings
+  receiptsTableSize,
 }) {
   const history = useHistory();
 
@@ -125,6 +129,7 @@ function ReceiptsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={receiptsTableSize}
         payload={{
           onEdit: handleEditReceipt,
           onDelete: handleDeleteReceipt,
@@ -145,4 +150,7 @@ export default compose(
   withReceipts(({ receiptTableState }) => ({
     receiptTableState,
   })),
+  withSettings(({ receiptSettings }) => ({
+    receiptsTableSize: receiptSettings?.tableSize,
+  })),
 )(ReceiptsDataTable);
diff --git a/src/containers/Settings/withSettings.js b/src/containers/Settings/withSettings.js
index 04f104343..5094f271c 100644
--- a/src/containers/Settings/withSettings.js
+++ b/src/containers/Settings/withSettings.js
@@ -6,6 +6,7 @@ export default (mapState) => {
       organizationSettings: state.settings.data.organization,
       manualJournalsSettings: state.settings.data.manualJournals,
       billPaymentSettings: state.settings.data.billPayments,
+      billsettings: state.settings.data.bills,
       paymentReceiveSettings: state.settings.data.paymentReceives,
       estimatesSettings: state.settings.data.salesEstimates,
       receiptSettings: state.settings.data.salesReceipts,
@@ -13,6 +14,8 @@ export default (mapState) => {
       itemsSettings: state.settings.data.items,
       expenseSettings: state.settings.data.expenses,
       accountsSettings: state.settings.data.accounts,
+      customersSettings: state.settings.data.custoemrs,
+      vendorsSettings: state.settings.data.vendors,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };
diff --git a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index a2a322567..6f392cb7c 100644
--- a/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -79,7 +79,7 @@ function VendorActionsBar({
   };
 
   const handleTableRowSizeChange = (size) => {
-    addSetting('vendor', 'tableSize', size);
+    addSetting('vendors', 'tableSize', size);
   };
   return (
     <DashboardActionsBar>
@@ -160,7 +160,7 @@ export default compose(
     vendorsInactiveMode: vendorsTableState.inactiveMode,
     vendorsFilterConditions: vendorsTableState.filterRoles,
   })),
-  // withSettings(({  }) => ({
-  //   vendorsTableSize:
-  // })),
+  withSettings(({ vendorsSettings }) => ({
+    vendorsTableSize: vendorsSettings?.tableSize,
+  })),
 )(VendorActionsBar);
diff --git a/src/containers/Vendors/VendorsLanding/VendorsTable.js b/src/containers/Vendors/VendorsLanding/VendorsTable.js
index 2d3640588..fc117d291 100644
--- a/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -17,6 +17,7 @@ import withVendors from './withVendors';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../../Settings/withSettings';
 
 import { ActionsMenu, useVendorsTableColumns } from './components';
 
@@ -40,6 +41,9 @@ function VendorsTable({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  vendorsTableSize,
 }) {
   // Vendors list context.
   const {
@@ -141,6 +145,7 @@ function VendorsTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={vendorsTableSize}
         payload={{
           onEdit: handleEditVendor,
           onDelete: handleDeleteVendor,
@@ -161,4 +166,7 @@ export default compose(
   withDrawerActions,
 
   withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+  withSettings(({ vendorsSettings }) => ({
+    vendorsTableSize: vendorsSettings?.tableSize,
+  })),
 )(VendorsTable);
diff --git a/src/containers/Vendors/VendorsLanding/components.js b/src/containers/Vendors/VendorsLanding/components.js
index 35d653930..680c1469c 100644
--- a/src/containers/Vendors/VendorsLanding/components.js
+++ b/src/containers/Vendors/VendorsLanding/components.js
@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
-import { Icon, Money, If } from 'components';
+import { Icon, Money, If, AvaterCell } from 'components';
 import { safeCallback, firstLettersArgs } from 'utils';
 
 /**
@@ -113,7 +113,7 @@ export function useVendorsTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        accessor: AvatarAccessor,
+        Cell: AvaterCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,
diff --git a/src/hooks/query/customers.js b/src/hooks/query/customers.js
index 630892453..3e397972a 100644
--- a/src/hooks/query/customers.js
+++ b/src/hooks/query/customers.js
@@ -5,7 +5,7 @@ import useApiRequest from '../useRequest';
 import t from './types';
 
 const defaultPagination = {
-  pageSize: 12,
+  pageSize: 20,
   page: 0,
   pagesCount: 0,
 };
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index 7b49349d6..26b4ecc63 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -86,7 +86,7 @@ export function useEstimates(query, props) {
         estimates: [],
         pagination: {
           page: 1,
-          pageSize: 12,
+          pageSize: 20,
           total: 0,
         },
         filterMeta: {},
diff --git a/src/hooks/query/exchangeRates.js b/src/hooks/query/exchangeRates.js
index 7f7435d37..7a0cd1efe 100644
--- a/src/hooks/query/exchangeRates.js
+++ b/src/hooks/query/exchangeRates.js
@@ -5,7 +5,7 @@ import { transformPagination } from 'utils';
 import useApiRequest from '../useRequest';
 
 const defaultPagination = {
-  pageSize: 12,
+  pageSize: 20,
   page: 0,
   pagesCount: 0,
 };
@@ -82,7 +82,7 @@ export function useExchangeRates(query, props) {
       exchangesRates: [],
       pagination: {
         page: 1,
-        pageSize: 12,
+        pageSize: 20,
         total: 0,
       },
       filterMeta: {},
diff --git a/src/hooks/query/expenses.js b/src/hooks/query/expenses.js
index ac5a3a24e..571f31c36 100644
--- a/src/hooks/query/expenses.js
+++ b/src/hooks/query/expenses.js
@@ -5,7 +5,7 @@ import { transformPagination } from 'utils';
 import t from './types';
 
 const defaultPagination = {
-  pageSize: 12,
+  pageSize: 20,
   page: 0,
   pagesCount: 0,
 };
diff --git a/src/hooks/query/inventoryAdjustments.js b/src/hooks/query/inventoryAdjustments.js
index b5b2f0b08..c2382b821 100644
--- a/src/hooks/query/inventoryAdjustments.js
+++ b/src/hooks/query/inventoryAdjustments.js
@@ -76,7 +76,7 @@ export function useInventoryAdjustments(query, props) {
         transactions: [],
         pagination: {
           page: 1,
-          pageSize: 12,
+          pageSize: 20,
           total: 0,
           pagesCount: 0,
         },
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 9d639d2a6..e397fd509 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -110,7 +110,7 @@ export function useInvoices(query, props) {
         invoices: [],
         pagination: {
           page: 1,
-          pageSize: 12,
+          pageSize: 20,
           total: 0,
         },
         filterMeta: {},
diff --git a/src/hooks/query/items.js b/src/hooks/query/items.js
index ebff0a27d..aa5c60559 100644
--- a/src/hooks/query/items.js
+++ b/src/hooks/query/items.js
@@ -5,7 +5,7 @@ import useApiRequest from '../useRequest';
 import t from './types';
 
 const DEFAULT_PAGINATION = {
-  pageSize: 12,
+  pageSize: 20,
   page: 0,
   pagesCount: 0,
 };
@@ -75,7 +75,7 @@ export function useDeleteItem(props) {
 /**
  * Activate the given item.
  */
- export function useActivateItem(props) {
+export function useActivateItem(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
@@ -114,7 +114,9 @@ export function useInactivateItem(props) {
 const transformItemsResponse = (response) => {
   return {
     items: response.data.items,
-    pagination: transformPagination(transformResponse(response.data.pagination)),
+    pagination: transformPagination(
+      transformResponse(response.data.pagination),
+    ),
     filterMeta: transformResponse(response.data.filter_meta),
   };
 };
@@ -137,8 +139,8 @@ export function useItems(query, props) {
         pagination: DEFAULT_PAGINATION,
         filterMeta: {},
       },
-      ...props
-    }
+      ...props,
+    },
   );
 }
 
@@ -149,7 +151,7 @@ export function useRefreshItems() {
     refresh: () => {
       queryClient.invalidateQueries(t.ITEMS);
     },
-  }
+  };
 }
 
 /**
@@ -166,7 +168,7 @@ export function useItem(id, props) {
     {
       select: (response) => response.data.item,
       defaultData: {},
-      ...props
+      ...props,
     },
   );
-}
\ No newline at end of file
+}
diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js
index b206e5a3d..b395ab053 100644
--- a/src/hooks/query/paymentReceives.js
+++ b/src/hooks/query/paymentReceives.js
@@ -44,7 +44,7 @@ export function usePaymentReceives(query, props) {
       select: transformPaymentReceives,
       defaultData: {
         paymentReceives: [],
-        pagination: { page: 1, pageSize: 12, total: 0 },
+        pagination: { page: 1, pageSize: 20, total: 0 },
         filterMeta: {},
       },
       ...props,
diff --git a/src/lang/ar/index.json b/src/lang/ar/index.json
index 8200dba9c..963fbbadb 100644
--- a/src/lang/ar/index.json
+++ b/src/lang/ar/index.json
@@ -833,7 +833,7 @@
   "the_payment_amount_that_received": "مبلغ الدفع الذي تم استلامه من الزبون أكبر من المبلغ المستحق لهذه الفاتورة.",
   "invoice_number": "رقم الفاتورة",
   "make_payment": "قم بالدفع",
-  "add_payment": "إضافة الدفع",
+  "payment_divider": "إضافة الدفع",
   "quick_receive_payment": "سند قبض سريع",
   "amount_received": "تم استلام المبلغ",
   "payment_receive_number_required": "مطلوب رقم استلام الدفعة",
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 59df7bcd2..320b6b16c 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -820,7 +820,7 @@
   "invoice_date": "Invoice date",
   "invoice_amount": "Invoice amount",
   "make_payment": "Make Payment",
-  "add_payment": "Add Payment",
+  "payment_divider": "Payment divider",
   "quick_receive_payment": "Quick Receive Payment",
   "amount_received": "Amount Received",
   "payment_no": "Payment No.",
diff --git a/src/store/Bills/bills.reducer.js b/src/store/Bills/bills.reducer.js
index 272f231d2..3311c6c6a 100644
--- a/src/store/Bills/bills.reducer.js
+++ b/src/store/Bills/bills.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
diff --git a/src/store/Estimate/estimates.reducer.js b/src/store/Estimate/estimates.reducer.js
index 616e97c8e..bef9b8925 100644
--- a/src/store/Estimate/estimates.reducer.js
+++ b/src/store/Estimate/estimates.reducer.js
@@ -1,13 +1,11 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { persistReducer, purgeStoredState } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
-import {
-  createTableStateReducers,
-} from 'store/tableState.reducer';
+import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
@@ -33,7 +31,4 @@ const reducerInstance = createReducer(initialState, {
   },
 });
 
-export default persistReducer(
-  CONFIG,
-  reducerInstance,
-);
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/ExchangeRate/exchange.reducer.js b/src/store/ExchangeRate/exchange.reducer.js
index 3b746a127..857ea7dcc 100644
--- a/src/store/ExchangeRate/exchange.reducer.js
+++ b/src/store/ExchangeRate/exchange.reducer.js
@@ -3,7 +3,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 
 const initialState = {
   tableState: {
-    pageSize: 12,
+    pageSize: 20,
     pageIndex: 0,
   },
 };
diff --git a/src/store/Invoice/invoices.reducer.js b/src/store/Invoice/invoices.reducer.js
index 958815d75..1d7aeec4d 100644
--- a/src/store/Invoice/invoices.reducer.js
+++ b/src/store/Invoice/invoices.reducer.js
@@ -1,13 +1,11 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { persistReducer, purgeStoredState } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
-import {
-  createTableStateReducers,
-} from 'store/tableState.reducer';
+import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
@@ -27,13 +25,10 @@ const CONFIG = {
 
 const reducerInstance = createReducer(initialState, {
   ...createTableStateReducers('INVOICES', defaultTableQuery),
-  
+
   [t.RESET]: () => {
     purgeStoredState(CONFIG);
-  }
+  },
 });
 
-export default persistReducer(
-  CONFIG,
-  reducerInstance,
-);
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/PaymentMades/paymentMades.reducer.js b/src/store/PaymentMades/paymentMades.reducer.js
index 98aba95bf..44400c74b 100644
--- a/src/store/PaymentMades/paymentMades.reducer.js
+++ b/src/store/PaymentMades/paymentMades.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   sortBy: [],
diff --git a/src/store/PaymentReceives/paymentReceives.reducer.js b/src/store/PaymentReceives/paymentReceives.reducer.js
index ef9fb2c04..0c6dece76 100644
--- a/src/store/PaymentReceives/paymentReceives.reducer.js
+++ b/src/store/PaymentReceives/paymentReceives.reducer.js
@@ -1,13 +1,11 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { persistReducer, purgeStoredState } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
-import {
-  createTableStateReducers,
-} from 'store/tableState.reducer';
+import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
@@ -33,7 +31,4 @@ const reducerInstance = createReducer(initialState, {
   },
 });
 
-export default persistReducer(
-  CONFIG,
-  reducerInstance,
-);
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/accounts/accounts.reducer.js b/src/store/accounts/accounts.reducer.js
index 755765a68..b19686f18 100644
--- a/src/store/accounts/accounts.reducer.js
+++ b/src/store/accounts/accounts.reducer.js
@@ -4,9 +4,8 @@ import storage from 'redux-persist/lib/storage';
 import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
-
-export const defaultTableQuery = { 
-  pageSize: 12,
+export const defaultTableQuery = {
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
 };
@@ -28,7 +27,7 @@ const reducerInstance = createReducer(initialState, {
 
   [t.RESET]: () => {
     purgeStoredState(CONFIG);
-  }
+  },
 });
 
 export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/customers/customers.reducer.js b/src/store/customers/customers.reducer.js
index 3b48816a7..4a1f14c33 100644
--- a/src/store/customers/customers.reducer.js
+++ b/src/store/customers/customers.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 
 // Default table query state.
 export const defaultTableQueryState = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   inactiveMode: false,
   filterRoles: [],
diff --git a/src/store/expenses/expenses.reducer.js b/src/store/expenses/expenses.reducer.js
index 9cbc6a8da..e377d0010 100644
--- a/src/store/expenses/expenses.reducer.js
+++ b/src/store/expenses/expenses.reducer.js
@@ -6,7 +6,7 @@ import t from 'store/types';
 
 // Default table query.
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
@@ -30,7 +30,7 @@ const reducerInstance = createReducer(initialState, {
 
   [t.RESET]: () => {
     purgeStoredState(CONFIG);
-  }
+  },
 });
 
 export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js b/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
index 15e673224..8545cfcb7 100644
--- a/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
+++ b/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js
@@ -6,7 +6,7 @@ import t from 'store/types';
 
 const initialState = {
   tableState: {
-    pageSize: 12,
+    pageSize: 20,
     pageIndex: 0,
     sortBy: [],
   },
diff --git a/src/store/items/items.reducer.js b/src/store/items/items.reducer.js
index fb4c3bce9..e28d44a93 100644
--- a/src/store/items/items.reducer.js
+++ b/src/store/items/items.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   inactiveMode: false,
diff --git a/src/store/manualJournals/manualJournals.reducers.js b/src/store/manualJournals/manualJournals.reducers.js
index 279ccf3ef..9d44bd1b5 100644
--- a/src/store/manualJournals/manualJournals.reducers.js
+++ b/src/store/manualJournals/manualJournals.reducers.js
@@ -5,11 +5,11 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
-}
+};
 
 const initialState = {
   tableState: defaultTableQuery,
diff --git a/src/store/receipts/receipts.reducer.js b/src/store/receipts/receipts.reducer.js
index 98029f7fe..5ac82ec3f 100644
--- a/src/store/receipts/receipts.reducer.js
+++ b/src/store/receipts/receipts.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQuery = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   filterRoles: [],
   viewSlug: null,
diff --git a/src/store/settings/settings.reducer.js b/src/store/settings/settings.reducer.js
index 29c9c117a..3c37aaefb 100644
--- a/src/store/settings/settings.reducer.js
+++ b/src/store/settings/settings.reducer.js
@@ -10,13 +10,39 @@ const initialState = {
     organization: {
       name: 'Bigcapital, LLC',
     },
-    manualJournals: {},
-    bills: {},
-    billPayments: {},
-    salesEstimates: {},
+    manualJournals: {
+      tableSize: 'medium',
+    },
+    bills: {
+      tableSize: 'medium',
+    },
+    billPayments: {
+      tableSize: 'medium',
+    },
+    paymentReceives: {
+      tableSize: 'medium',
+    },
+    salesEstimates: {
+      tableSize: 'medium',
+    },
     items: {
       tableSize: 'medium',
     },
+    salesInvoices: {
+      tableSize: 'medium',
+    },
+    salesReceipts: {
+      tableSize: 'medium',
+    },
+    expenses: {
+      tableSize: 'medium',
+    },
+    customers: {
+      tableSize: 'medium',
+    },
+    vendors: {
+      tableSize: 'medium',
+    },
   },
 };
 
diff --git a/src/store/vendors/vendors.reducer.js b/src/store/vendors/vendors.reducer.js
index 0f1fe726e..76c895bb8 100644
--- a/src/store/vendors/vendors.reducer.js
+++ b/src/store/vendors/vendors.reducer.js
@@ -5,7 +5,7 @@ import { createTableStateReducers } from 'store/tableState.reducer';
 import t from 'store/types';
 
 export const defaultTableQueryState = {
-  pageSize: 12,
+  pageSize: 20,
   pageIndex: 0,
   inactiveMode: false,
   filterRoles: [],
diff --git a/src/style/pages/Accounts/List.scss b/src/style/pages/Accounts/List.scss
index 97665f457..314dec53b 100644
--- a/src/style/pages/Accounts/List.scss
+++ b/src/style/pages/Accounts/List.scss
@@ -34,7 +34,7 @@
             border-radius: 8px;
           }
         }
-        .account-desc{
+        .account-desc {
           font-size: 11px;
           color: hsl(0, 0%, 50%);
           margin-top: 2px;
@@ -57,5 +57,15 @@
         }
       }
     }
+    .table-size--small {
+      .tbody .tr {
+        .normal {
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/style/pages/Bills/List.scss b/src/style/pages/Bills/List.scss
index 38fb79e66..2fcb700cb 100644
--- a/src/style/pages/Bills/List.scss
+++ b/src/style/pages/Bills/List.scss
@@ -1,9 +1,6 @@
 .dashboard__insider--bills {
   .bigcapital-datatable {
     .tbody {
-      .tr {
-        min-height: 46px;
-      }
       .td.amount {
         .cell-inner {
           > span {
diff --git a/src/style/pages/Customers/List.scss b/src/style/pages/Customers/List.scss
index a12f9e3b4..57ceabc3c 100644
--- a/src/style/pages/Customers/List.scss
+++ b/src/style/pages/Customers/List.scss
@@ -1,27 +1,33 @@
+.dashboard__insider--customers-list {
+  .bigcapital-datatable {
+    .tbody {
+      .tr .td {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
 
+      .avatar.td {
+        .avatar {
+          display: inline-block;
+          background: #adbcc9;
+          border-radius: 50%;
+          text-align: center;
+          font-weight: 400;
+          color: #fff;
 
-.dashboard__insider--customers-list{
-
-  .bigcapital-datatable{
-
-    .tr .td{
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-
-    .avatar.td{
-
-      .avatar{
-        height: 30px;
-        width: 30px;
-        display: inline-block;
-        background: #adbcc9;
-        border-radius: 50%;
-        line-height: 30px;
-        text-align: center;
-        font-weight: 400;
-        font-size: 14px;
-        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;
+          }
+        }
       }
     }
   }
diff --git a/src/style/pages/Expense/List.scss b/src/style/pages/Expense/List.scss
index e6471c90b..f8b29100c 100644
--- a/src/style/pages/Expense/List.scss
+++ b/src/style/pages/Expense/List.scss
@@ -5,10 +5,6 @@
   .bigcapital-datatable {
     .table {
       .tbody {
-
-        .tr{
-          min-height: 46px;
-        }
         .td.amount {
           span {
             font-weight: 600;
@@ -17,4 +13,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/ManualJournal/List.scss b/src/style/pages/ManualJournal/List.scss
index 3dff76dab..df30f4d0f 100644
--- a/src/style/pages/ManualJournal/List.scss
+++ b/src/style/pages/ManualJournal/List.scss
@@ -4,9 +4,9 @@
     }
 
     .tbody {
-      .tr .td{
-        padding: 0.8rem 0.5rem;
-      }
+      // .tr .td{
+      //   padding: 0.8rem 0.5rem;
+      // }
       .td.amount {
         .bp3-popover-target {
           border-bottom: 1px solid #e7e7e7;
diff --git a/src/style/pages/PaymentMade/List.scss b/src/style/pages/PaymentMade/List.scss
index e3e41df3c..27e9f34be 100644
--- a/src/style/pages/PaymentMade/List.scss
+++ b/src/style/pages/PaymentMade/List.scss
@@ -1,21 +1,13 @@
-
-.dashboard__insider--payment-mades-list{
-
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
+.dashboard__insider--payment-mades-list {
+  .bigcapital-datatable {
+    .tbody {
       .td.amount {
-
-        .cell-inner{
-          > span{
+        .cell-inner {
+          > span {
             font-weight: 600;
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/PaymentReceive/List.scss b/src/style/pages/PaymentReceive/List.scss
index 89d1bf4b3..4fc92a04a 100644
--- a/src/style/pages/PaymentReceive/List.scss
+++ b/src/style/pages/PaymentReceive/List.scss
@@ -1,21 +1,13 @@
-
-.dashboard__insider--payment-receives-list{
-
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr .td{
-        min-height: 46px;
-      }
-
+.dashboard__insider--payment-receives-list {
+  .bigcapital-datatable {
+    .tbody {
       .td.amount {
-
-        .cell-inner{
-          > span{
+        .cell-inner {
+          > span {
             font-weight: 600;
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/SaleEstimate/List.scss b/src/style/pages/SaleEstimate/List.scss
index 02e7d738b..434894ba4 100644
--- a/src/style/pages/SaleEstimate/List.scss
+++ b/src/style/pages/SaleEstimate/List.scss
@@ -1,26 +1,13 @@
-
-.dashboard__insider--sale_estimate{
-
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
-      .tr .td{
-        padding-top: 0.88rem;
-        padding-bottom: 0.88rem;
-      }
-
+.dashboard__insider--sale_estimate {
+  .bigcapital-datatable {
+    .tbody {
       .td.amount {
-
-        .cell-inner{
-          > span{
+        .cell-inner {
+          > span {
             font-weight: 600;
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/SaleInvoice/List.scss b/src/style/pages/SaleInvoice/List.scss
index 21e0328b1..adb06f1e7 100644
--- a/src/style/pages/SaleInvoice/List.scss
+++ b/src/style/pages/SaleInvoice/List.scss
@@ -1,43 +1,38 @@
-
-
-.dashboard__insider--sales-invoices-list{
-
-  .bigcapital-datatable{
-    .tbody{
-      .balance.td{
-
-        .cell-inner{
-          > span{
+.dashboard__insider--sales-invoices-list {
+  .bigcapital-datatable {
+    .tbody {
+      .balance.td {
+        .cell-inner {
+          > span {
             font-weight: 600;
           }
         }
       }
-      .status.td{
-
+      .status.td {
         .overdue-status,
-        .due-status{
+        .due-status {
           display: block;
           font-size: 13.5px;
           line-height: 1.4;
 
-          + .partial-paid{
+          + .partial-paid {
             margin-top: 2px;
           }
         }
-        .overdue-status{
+        .overdue-status {
           color: #ec5b0a;
         }
-        .due-status{
+        .due-status {
           color: #1652c8;
         }
-        .partial-paid{
+        .partial-paid {
           font-size: 12px;
           line-height: 1;
           display: block;
           margin-bottom: 6px;
           opacity: 0.7;
         }
-        .fully-paid-icon{
+        .fully-paid-icon {
           width: 18px;
           height: 18px;
           margin-right: 8px;
@@ -46,19 +41,26 @@
             fill: #2ba01d;
           }
         }
-        .fully-paid-text{
+        .fully-paid-text {
           font-size: 13.5px;
         }
-        .bp3-progress-bar{
+        .bp3-progress-bar {
           height: 4px;
           max-width: 180px;
-          
+
           &,
-          .bp3-progress-meter{
+          .bp3-progress-meter {
             border-radius: 0;
           }
         }
       }
     }
+    .table-size--small {
+      .status.td {
+        .bp3-progress-bar {
+          height: 3px;
+        }
+      }
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/SaleReceipt/List.scss b/src/style/pages/SaleReceipt/List.scss
index b246a5a9f..7522241ef 100644
--- a/src/style/pages/SaleReceipt/List.scss
+++ b/src/style/pages/SaleReceipt/List.scss
@@ -1,21 +1,13 @@
-
-.dashboard__insider--sales_receipts{
-
-  .bigcapital-datatable{
-
-    .tbody{
-      .tr{
-        min-height: 46px;
-      }
-
+.dashboard__insider--sales_receipts {
+  .bigcapital-datatable {
+    .tbody {
       .td.amount {
-
-        .cell-inner{
-          > span{
+        .cell-inner {
+          > span {
             font-weight: 600;
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/Vendors/List.scss b/src/style/pages/Vendors/List.scss
index ef592ef98..f71bc5eeb 100644
--- a/src/style/pages/Vendors/List.scss
+++ b/src/style/pages/Vendors/List.scss
@@ -1,28 +1,34 @@
 .dashboard__insider--vendors-list {
-
-    .bigcapital-datatable {
-
-        tbody {
-            .tr .td {
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
-            }
-        }
-
-        .avatar.td {
-
-            .avatar {
-                height: 30px;
-                width: 30px;
-                display: inline-block;
-                background: #adbcc9;
-                border-radius: 50%;
-                line-height: 30px;
-                text-align: center;
-                font-weight: 400;
-                font-size: 14px;
-                color: #fff;
-            }
-        }
+  .bigcapital-datatable {
+    tbody {
+      .tr .td {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
     }
-}
\ No newline at end of file
+
+    .avatar.td {
+      .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;
+        }
+      }
+    }
+  }
+}