diff --git a/client/src/containers/Accounts/components.js b/client/src/containers/Accounts/components.js
new file mode 100644
index 000000000..97844651e
--- /dev/null
+++ b/client/src/containers/Accounts/components.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  Position,
+  Classes,
+  Tooltip,
+} from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { Icon, Money, If, Choose } from 'components';
+
+export function NormalCell({ cell }) {
+  const { formatMessage } = useIntl();
+
+  const account = cell.row.original;
+  const normal = account?.type?.normal || '';
+  const arrowDirection = normal === 'credit' ? 'down' : 'up';
+
+  return (
+    <Tooltip
+      className={Classes.TOOLTIP_INDICATOR}
+      content={formatMessage({ id: normal })}
+      position={Position.RIGHT}
+      hoverOpenDelay={100}
+    >
+      <Icon icon={`arrow-${arrowDirection}`} />
+    </Tooltip>
+  );
+}
+
+export function BalanceCell({ cell }) {
+  const account = cell.row.original;
+
+  return account.amount ? (
+    <span>
+      <Money amount={account.amount} currency={'USD'} />
+    </span>
+  ) : (
+    <span class="placeholder">—</span>
+  );
+}
+
+export function InactiveSemafro() {
+  return (
+    <Tooltip
+      content={<T id="inactive" />}
+      className={classNames(
+        Classes.TOOLTIP_INDICATOR,
+        'bp3-popover-wrapper--inactive-semafro',
+      )}
+      position={Position.TOP}
+      hoverOpenDelay={250}
+    >
+      <div className="inactive-semafro"></div>
+    </Tooltip>
+  );
+}
+
+export function AccountNameAccessor(row) {
+  return (
+    <>
+      <Choose>
+        <Choose.When condition={!!row.description}>
+          <Tooltip
+            className={classNames(
+              Classes.TOOLTIP_INDICATOR,
+              'bp3-popover-wrapper--account-desc',
+            )}
+            content={row.description}
+            position={Position.RIGHT_TOP}
+            hoverOpenDelay={500}
+          >
+            {row.name}
+          </Tooltip>
+        </Choose.When>
+
+        <Choose.Otherwise>{row.name}</Choose.Otherwise>
+      </Choose>
+
+      <If condition={!row.active}>
+        <InactiveSemafro />
+      </If>
+    </>
+  );
+}
diff --git a/server/src/api/controllers/Purchases/BillsPayments.ts b/server/src/api/controllers/Purchases/BillsPayments.ts
index b13013e94..073c53697 100644
--- a/server/src/api/controllers/Purchases/BillsPayments.ts
+++ b/server/src/api/controllers/Purchases/BillsPayments.ts
@@ -82,7 +82,7 @@ export default class BillsPayments extends BaseController {
     return [
       check('vendor_id').exists().isNumeric().toInt(),
       check('payment_account_id').exists().isNumeric().toInt(),
-      check('payment_number').exists().trim().escape(),
+      check('payment_number').optional({ nullable: true }).trim().escape(),
       check('payment_date').exists(),
       check('description').optional().trim().escape(),
       check('reference').optional().trim().escape(),
diff --git a/server/src/interfaces/BillPayment.ts b/server/src/interfaces/BillPayment.ts
index 51fab3a64..4c31923f8 100644
--- a/server/src/interfaces/BillPayment.ts
+++ b/server/src/interfaces/BillPayment.ts
@@ -27,7 +27,7 @@ export interface IBillPaymentEntryDTO {
 export interface IBillPaymentDTO {
   vendorId: number,
   paymentAccountId: number,
-  paymentNumber: string,
+  paymentNumber?: string,
   paymentDate: Date,
   description: string,
   reference: string,
diff --git a/server/src/interfaces/PaymentReceive.ts b/server/src/interfaces/PaymentReceive.ts
index 44c7615f4..2085a3086 100644
--- a/server/src/interfaces/PaymentReceive.ts
+++ b/server/src/interfaces/PaymentReceive.ts
@@ -19,7 +19,7 @@ export interface IPaymentReceiveDTO {
   amount: number,
   referenceNo: string,
   depositAccountId: number,
-  paymentReceiveNo: string,
+  paymentReceiveNo?: string,
   description: string,
   entries: IPaymentReceiveEntryDTO[],
 };