diff --git a/client/src/common/classes.js b/client/src/common/classes.js
index b4dcb22e3..0fbd97965 100644
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -1,16 +1,20 @@
 import { Classes } from '@blueprintjs/core';
 
 const CLASSES = {
-  DATATABLE_EDITOR: 'DATATABLE_EDITOR',
+  DATATABLE_EDITOR: 'datatable-editor',
+  DATATABLE_EDITOR_ACTIONS: 'datatable-editor__actions',
+  DATATABLE_EDITOR_ITEMS_ENTRIES: 'items-entries-table',
 
   PAGE_FORM: 'page-form',
   PAGE_FORM_HEADER: 'page-form__header',
+  PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
   PAGE_FORM_FOOTER: 'page-form__footer',
   PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-action',
 
   PAGE_FORM_BILL: 'page-form--bill',
   PAGE_FORM_ESTIMATE: 'page-form--estimate',
-
+  PAGE_FORM_INVOICE: 'page-form--invoice',
+  PAGE_FORM_RECEIPT: 'page-form--receipt',
   ...Classes,
 };
 
diff --git a/client/src/containers/Accounting/MakeJournalEntriesTable.js b/client/src/containers/Accounting/MakeJournalEntriesTable.js
index 7b81e54fc..fef091b5b 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesTable.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js
@@ -247,7 +247,7 @@ function MakeJournalEntriesTable({
   };
 
   return (
-    <div class="make-journal-entries__table">
+    <div class="make-journal-entries__table datatable-editor">
       <DataTable
         columns={columns}
         data={tableRows}
diff --git a/client/src/containers/Sales/Estimate/EntriesItemsTable.js b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
index 162cf1de4..0c8446a01 100644
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -2,6 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
 import { Hint, Icon } from 'components';
@@ -229,7 +230,10 @@ function EstimateTable({
   );
 
   return (
-    <div className={'estimate-form__table datatable-editor'}>
+    <div className={classNames(
+      CLASSES.DATATABLE_EDITOR,
+      CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
+    )}>
       <DataTable
         columns={columns}
         data={rows}
@@ -240,9 +244,8 @@ function EstimateTable({
           updateData: handleUpdateData,
           removeRow: handleRemoveRow,
         }}
-        className={CLASSES.DATATABLE_EDITOR}
       />
-      <div className={'datatable-editor__actions mt1'}>
+      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
         <Button
           small={true}
           className={'button--secondary button--new-line'}
diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimate/EstimateForm.js
index ed1138fe4..43d71e04f 100644
--- a/client/src/containers/Sales/Estimate/EstimateForm.js
+++ b/client/src/containers/Sales/Estimate/EstimateForm.js
@@ -317,7 +317,7 @@ const EstimateForm = ({
 
         <div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
           <Row>
-            <Col md={7}>
+            <Col md={8}>
               <FormGroup
                 label={<T id={'customer_note'} />}
                 className={'form-group--customer_note'}
@@ -327,6 +327,7 @@ const EstimateForm = ({
                   {...formik.getFieldProps('note')}
                 />
               </FormGroup>
+
               <FormGroup
                 label={<T id={'terms_conditions'} />}
                 className={'form-group--terms_conditions'}
@@ -338,7 +339,7 @@ const EstimateForm = ({
               </FormGroup>
             </Col>
           
-            <Col md={5}>
+            <Col md={4}>
               <Dragzone
                 initialFiles={initialAttachmentFiles}
                 onDrop={handleDropFiles}
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
index a1b092cf5..c120a6ebb 100644
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -139,7 +139,7 @@ function EstimateFormHeader({
               />
             </FormGroup>
           </Col>
-          <Col md={4}>
+          <Col md={4} className={'col--expiration-date'}>
             <FormGroup
               label={<T id={'expiration_date'} />}
               inline={true}
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
index f7955d252..627781375 100644
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -8,10 +8,11 @@ import React, {
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
+import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-import { Row, Col } from 'react-grid-system';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 import InvoiceFormHeader from './InvoiceFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -23,7 +24,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
 
-import { AppToaster } from 'components';
+import { AppToaster, Col, Row } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 
@@ -307,7 +308,7 @@ function InvoiceForm({
   };
 
   return (
-    <div className={'invoice-form'}>
+    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
       <form onSubmit={formik.handleSubmit}>
         <InvoiceFormHeader formik={formik} />
         <EstimatesItemsTable
@@ -316,37 +317,43 @@ function InvoiceForm({
           onClickClearAllLines={handleClearAllLines}
           formik={formik}
         />
-        <Row>
-          <Col>
-            <FormGroup
-              label={<T id={'invoice_message'} />}
-              className={'form-group--customer_note'}
-            >
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('invoice_message')}
-              />
-            </FormGroup>
-            <FormGroup
-              label={<T id={'terms_conditions'} />}
-              className={'form-group--terms_conditions'}
-            >
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('terms_conditions')}
-              />
-            </FormGroup>
-          </Col>
 
-          <Col>
-            <Dragzone
-              initialFiles={initialAttachmentFiles}
-              onDrop={handleDropFiles}
-              onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
-            />
-          </Col>
-        </Row>
+        <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+          <Row>
+            <Col md={8}>
+              {/* --------- Invoice message --------- */}
+              <FormGroup
+                label={<T id={'invoice_message'} />}
+                className={'form-group--invoice_message'}
+              >
+                <TextArea
+                  growVertically={true}
+                  {...formik.getFieldProps('invoice_message')}
+                />
+              </FormGroup>
+
+              {/* --------- Terms and conditions --------- */}
+              <FormGroup
+                label={<T id={'terms_conditions'} />}
+                className={'form-group--terms_conditions'}
+              >
+                <TextArea
+                  growVertically={true}
+                  {...formik.getFieldProps('terms_conditions')}
+                />
+              </FormGroup>
+            </Col>
+
+            <Col md={4}>
+              <Dragzone
+                initialFiles={initialAttachmentFiles}
+                onDrop={handleDropFiles}
+                onDeleteFile={handleDeleteFile}
+                hint={'Attachments: Maxiumum size: 20MB'}
+              />
+            </Col>
+          </Row>
+        </div>
       </form>
 
       <InvoiceFormFooter
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
index 8d11b7349..0f1eb9da3 100644
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -5,20 +5,21 @@ import {
   Intent,
   Position,
   MenuItem,
-  Classes,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
-import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import {
   ListSelect,
   ErrorMessage,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
+  Row,
+  Col,
 } from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
@@ -81,13 +82,17 @@ function InvoiceFormHeader({
   }, [openDialog]);
 
   return (
-    <div class="page-form page-form--invoice">
-      <div className={'page-form__primary-section'}>
-        {/* customer name */}
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+        {/* ----------- Customer name ----------- */}
         <FormGroup
           label={<T id={'customer_name'} />}
           inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames(
+            'form-group--select-list',
+            'form-group--customer-name',
+            CLASSES.FILL,
+          )}
           labelInfo={<FieldRequiredHint />}
           intent={errors.customer_id && touched.customer_id && Intent.DANGER}
           helperText={
@@ -107,79 +112,109 @@ function InvoiceFormHeader({
             labelProp={'display_name'}
           />
         </FormGroup>
-      </div>
 
-      <Row>
-        <Col>
-          <FormGroup
-            label={<T id={'invoice_date'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            intent={
-              errors.invoice_date && touched.invoice_date && Intent.DANGER
-            }
-            helperText={
-              <ErrorMessage name="invoice_date" {...{ errors, touched }} />
-            }
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(values.invoice_date)}
-              onChange={handleDateChange('invoice_date')}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-            />
-          </FormGroup>
-        </Col>
+        <Row>
+          <Col md={7} className={'col--invoice-date'}>
+            {/* ----------- Invoice date ----------- */}
+            <FormGroup
+              label={<T id={'invoice_date'} />}
+              inline={true}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames(
+                'form-group--select-list',
+                'form-group--invoice-date',
+                CLASSES.FILL
+              )}
+              intent={
+                errors.invoice_date && touched.invoice_date && Intent.DANGER
+              }
+              helperText={
+                <ErrorMessage name="invoice_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.invoice_date)}
+                onChange={handleDateChange('invoice_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
 
-        <Col>
-          <FormGroup
-            label={<T id={'due_date'} />}
-            inline={true}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            intent={errors.due_date && touched.due_date && Intent.DANGER}
-            helperText={
-              <ErrorMessage name="due_date" {...{ errors, touched }} />
-            }
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(values.due_date)}
-              onChange={handleDateChange('due_date')}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-            />
-          </FormGroup>
-        </Col>
-      </Row>
-      {/* invoice */}
-      <FormGroup
-        label={<T id={'invoice_no'} />}
-        inline={true}
-        className={('form-group--estimate', Classes.FILL)}
-        labelInfo={<FieldRequiredHint />}
-        intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
-        helperText={<ErrorMessage name="invoice_no" {...{ errors, touched }} />}
-      >
-        <InputGroup
+          <Col md={5} className={'col--due-date'}>
+            {/* ----------- Due date ----------- */}
+            <FormGroup
+              label={<T id={'due_date'} />}
+              inline={true}
+              className={classNames(
+                'form-group--select-list',
+                'form-group--due-date',
+                CLASSES.FILL
+              )}
+              intent={errors.due_date && touched.due_date && Intent.DANGER}
+              helperText={
+                <ErrorMessage name="due_date" {...{ errors, touched }} />
+              }
+            >
+              <DateInput
+                {...momentFormatter('YYYY/MM/DD')}
+                value={tansformDateValue(values.due_date)}
+                onChange={handleDateChange('due_date')}
+                popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        {/* ----------- Invoice number ----------- */}
+        <FormGroup
+          label={<T id={'invoice_no'} />}
+          inline={true}
+          className={classNames('form-group--invoice-no', CLASSES.FILL)}
+          labelInfo={<FieldRequiredHint />}
           intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
-          minimal={true}
-          {...getFieldProps('invoice_no')}
-        />
-      </FormGroup>
+          helperText={
+            <ErrorMessage name="invoice_no" {...{ errors, touched }} />
+          }
+          rightElement={
+            <InputPrependButton
+              buttonProps={{
+                onClick: handleInvoiceNumberChange,
+                icon: <Icon icon={'settings-18'} />,
+              }}
+              tooltip={true}
+              tooltipProps={{
+                content: 'Setting your auto-generated invoice number',
+                position: Position.BOTTOM_LEFT,
+              }}
+            />
+          }
+        >
+          <InputGroup
+            intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
+            minimal={true}
+            {...getFieldProps('invoice_no')}
+          />
+        </FormGroup>
 
-      <FormGroup
-        label={<T id={'reference'} />}
-        inline={true}
-        className={classNames('form-group--reference', Classes.FILL)}
-        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-      >
-        <InputGroup
+        {/* ----------- Reference ----------- */}
+        <FormGroup
+          label={<T id={'reference'} />}
+          inline={true}
+          className={classNames('form-group--reference', CLASSES.FILL)}
           intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          minimal={true}
-          {...getFieldProps('reference_no')}
-        />
-      </FormGroup>
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.reference_no && touched.reference_no && Intent.DANGER
+            }
+            minimal={true}
+            {...getFieldProps('reference_no')}
+          />
+        </FormGroup>
+      </div>
     </div>
   );
 }
diff --git a/client/src/containers/Sales/Receipt/ReceiptForm.js b/client/src/containers/Sales/Receipt/ReceiptForm.js
index 058a46ad7..f9bcdfede 100644
--- a/client/src/containers/Sales/Receipt/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipt/ReceiptForm.js
@@ -12,7 +12,9 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-import { Row, Col } from 'react-grid-system';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 
 import ReceiptFromHeader from './ReceiptFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
@@ -24,7 +26,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
 
-import { AppToaster } from 'components';
+import { AppToaster, Row, Col } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 
@@ -305,7 +307,7 @@ function ReceiptForm({
   }, [receiptNumber]);
 
   return (
-    <div className={'receipt-form'}>
+    <div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
       <form onSubmit={formik.handleSubmit}>
         <ReceiptFromHeader formik={formik} />
 
@@ -316,37 +318,40 @@ function ReceiptForm({
           formik={formik}
         />
 
-        <Row>
-          <Col>
-            <FormGroup
-              label={<T id={'receipt_message'} />}
-              className={'form-group--'}
-            >
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('receipt_message')}
-              />
-            </FormGroup>
-            <FormGroup
-              label={<T id={'statement'} />}
-              className={'form-group--statement'}
-            >
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('statement')}
-              />
-            </FormGroup>
-          </Col>
+        <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+          <Row>
+            <Col md={8}>
+              <FormGroup
+                label={<T id={'receipt_message'} />}
+                className={'form-group--receipt_message'}
+              >
+                <TextArea
+                  growVertically={true}
+                  {...formik.getFieldProps('receipt_message')}
+                />
+              </FormGroup>
 
-          <Col>
-            <Dragzone
-              initialFiles={initialAttachmentFiles}
-              onDrop={handleDropFiles}
-              onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
-            />
-          </Col>
-        </Row>
+              <FormGroup
+                label={<T id={'statement'} />}
+                className={'form-group--statement'}
+              >
+                <TextArea
+                  growVertically={true}
+                  {...formik.getFieldProps('statement')}
+                />
+              </FormGroup>
+            </Col>
+
+            <Col md={4}>
+              <Dragzone
+                initialFiles={initialAttachmentFiles}
+                onDrop={handleDropFiles}
+                onDeleteFile={handleDeleteFile}
+                hint={'Attachments: Maxiumum size: 20MB'}
+              />
+            </Col>
+          </Row>
+        </div>
       </form>
       <ReceiptFormFooter
         formik={formik}
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
index 9b4182d47..390442ac2 100644
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -5,7 +5,6 @@ import {
   Intent,
   Position,
   MenuItem,
-  Classes,
 } from '@blueprintjs/core';
 
 import { DateInput } from '@blueprintjs/datetime';
@@ -13,6 +12,7 @@ import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import {
   AccountsSelectList,
   ListSelect,
@@ -91,15 +91,15 @@ function ReceiptFormHeader({
   }, [openDialog]);
 
   return (
-    <div class="page-form receipt-form">
-      <div class="page-form__primary-section">
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
         {/*- Customer name -*/}
         <FormGroup
           label={<T id={'customer_name'} />}
           inline={true}
           className={classNames(
             'form-group--select-list',
-            Classes.FILL,
+            CLASSES.FILL,
             'form-group--customer',
           )}
           labelInfo={<FieldRequiredHint />}
@@ -128,7 +128,7 @@ function ReceiptFormHeader({
           className={classNames(
             'form-group--deposit-account',
             'form-group--select-list',
-            Classes.FILL,
+            CLASSES.FILL,
           )}
           inline={true}
           labelInfo={<FieldRequiredHint />}
@@ -155,7 +155,7 @@ function ReceiptFormHeader({
         <FormGroup
           label={<T id={'receipt_date'} />}
           inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames('form-group--select-list', CLASSES.FILL)}
           intent={errors.receipt_date && touched.receipt_date && Intent.DANGER}
           helperText={
             <ErrorMessage name="receipt_date" {...{ errors, touched }} />
@@ -168,73 +168,61 @@ function ReceiptFormHeader({
             popoverProps={{ position: Position.BOTTOM, minimal: true }}
           />
         </FormGroup>
-      </div>
-      {/* receipt_no */}
-      <FormGroup
-        label={<T id={'receipt'} />}
-        inline={true}
-        className={('form-group--receipt_number', Classes.FILL)}
-        labelInfo={<FieldRequiredHint />}
-        intent={
-          errors.receipt_number && touched.receipt_number && Intent.DANGER
-        }
-        helperText={
-          <ErrorMessage name="receipt_number" {...{ errors, touched }} />
-        }
-      >
-        <InputGroup
+
+        {/* receipt_no */}
+        <FormGroup
+          label={<T id={'receipt'} />}
+          inline={true}
+          className={('form-group--receipt_number', CLASSES.FILL)}
+          labelInfo={<FieldRequiredHint />}
           intent={
             errors.receipt_number && touched.receipt_number && Intent.DANGER
           }
-          minimal={true}
-          rightElement={
-            <InputPrependButton
-              buttonProps={{
-                onClick: handleReceiptNumberChange,
-                icon: <Icon icon={'settings-18'} />,
-              }}
-              tooltip={true}
-              tooltipProps={{
-                content: 'Setting your auto-generated receipt number',
-                position: Position.BOTTOM_LEFT,
-              }}
-            />
+          helperText={
+            <ErrorMessage name="receipt_number" {...{ errors, touched }} />
           }
-          {...getFieldProps('receipt_number')}
-        />
-      </FormGroup>
+        >
+          <InputGroup
+            intent={
+              errors.receipt_number && touched.receipt_number && Intent.DANGER
+            }
+            minimal={true}
+            rightElement={
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleReceiptNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated receipt number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            }
+            {...getFieldProps('receipt_number')}
+          />
+        </FormGroup>
 
-      {/*- Reference -*/}
-      <FormGroup
-        label={<T id={'reference'} />}
-        inline={true}
-        className={classNames('form-group--reference', Classes.FILL)}
-        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-      >
-        <InputGroup
+        {/*- Reference -*/}
+        <FormGroup
+          label={<T id={'reference'} />}
+          inline={true}
+          className={classNames('form-group--reference', CLASSES.FILL)}
           intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          minimal={true}
-          {...getFieldProps('reference_no')}
-        />
-      </FormGroup>
-
-      {/*- Send to email -*/}
-      <FormGroup
-        label={<T id={'send_to_email'} />}
-        inline={true}
-        className={classNames('form-group--send_to_email', Classes.FILL)}
-        intent={errors.send_to_email && touched.send_to_email && Intent.DANGER}
-        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-      >
-        <InputGroup
-          intent={
-            errors.send_to_email && touched.send_to_email && Intent.DANGER
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
           }
-          minimal={true}
-          {...getFieldProps('send_to_email')}
-        />
-      </FormGroup>
+        >
+          <InputGroup
+            intent={
+              errors.reference_no && touched.reference_no && Intent.DANGER
+            }
+            minimal={true}
+            {...getFieldProps('reference_no')}
+          />
+        </FormGroup>
+      </div>
     </div>
   );
 }
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 560c30464..0c01e0da6 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -68,11 +68,13 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'pages/register-organizaton';
 @import 'pages/bills';
 @import 'pages/estimates';
+@import 'pages/invoice-form';
+@import 'pages/receipt-form';
 
 // Views
 @import 'views/filter-dropdown';
 @import 'views/sidebar';
-@import 'pages/estimate';
+// @import 'pages/estimate';
 
 .App {
   min-width: 960px;
@@ -215,11 +217,152 @@ body.authentication {
   }
   &__footer{
     padding: 15px;
+    margin: 15px 0 0 0;
   }
 }
 
 .datatable-editor{
 
+  padding: 15px 15px 0;
+
+    .bp3-form-group {
+      margin-bottom: 0;
+    }
+    .table {
+      border: 1px dotted rgb(195, 195, 195);
+      border-bottom: transparent;
+      border-left: transparent;
+
+      .th,
+      .td {
+        border-left: 1px dotted rgb(195, 195, 195);
+
+        &.index {
+          text-align: center;
+
+          span {
+            width: 100%;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .thead {
+        .tr .th {
+          padding: 10px 10px;
+          background-color: #f2f5fa;
+          font-size: 14px;
+          font-weight: 500;
+          color: #1e1c3e;
+
+          &.index > div {
+            width: 100%;
+          }
+        }
+      }
+
+      .tbody {
+        .tr .td {
+          padding: 7px;
+          border-bottom: 1px dotted rgb(195, 195, 195);
+          min-height: 46px;
+
+          &.index {
+            background-color: #f2f5fa;
+
+            > span {
+              margin-top: auto;
+              margin-bottom: auto;
+            }
+          }
+        }
+        .tr {
+          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
+          .form-group--select-list .bp3-button {
+            border-color: #e5e5e5;
+            border-radius: 3px;
+            padding-left: 8px;
+            padding-right: 8px;
+          }
+
+          .form-group--select-list {
+            &.bp3-intent-danger {
+              .bp3-button:not(.bp3-minimal) {
+                border-color: #db3737;
+              }
+            }
+          }
+
+          &:last-of-type {
+            .td {
+              border-bottom: transparent;
+
+              .bp3-button,
+              .bp3-input-group {
+                display: none;
+              }
+            }
+          }
+
+          .td.actions {
+            .bp3-button {
+              background-color: transparent;
+              color: #e66d6d;
+
+              &:hover {
+                color: #c23030;
+              }
+
+              svg {
+                color: inherit;
+              }
+            }
+          }
+
+          &.row--total {
+            .account.td,
+            .debit.td,
+            .credit.td {
+              > span {
+                padding-top: 2px;
+              }
+            }
+            .debit.td,
+            .credit.td {
+              > span {
+                font-weight: 600;
+                color: #444;
+              }
+            }
+          }
+
+          .td {
+            &.note {
+              .bp3-form-group {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+      .th {
+        color: #444;
+        font-weight: 600;
+        border-bottom: 1px dotted #666;
+      }
+
+      .td {
+        border-bottom: 1px dotted #999;
+      }
+
+      .actions.td {
+        .bp3-button {
+          background: transparent;
+          margin: 0;
+        }
+      }
+    }
+
   .table{
     .tbody{
       .tr .td.actions .bp3-button{
diff --git a/client/src/style/pages/bills.scss b/client/src/style/pages/bills.scss
index 7146e3a69..471aea864 100644
--- a/client/src/style/pages/bills.scss
+++ b/client/src/style/pages/bills.scss
@@ -17,7 +17,7 @@
 
     .bp3-form-group{
       &.bp3-inline{
-        max-width: 450px; 
+        max-width: 420px; 
       }
 
       &.form-group{  
@@ -45,12 +45,9 @@
     .row--bill-date{
 
       .col:first-of-type{
-        max-width: 465px;
+        max-width: 435px;
       }
     }
-    .col--estimate-date{
-      max-width: 530px;
-    }
   }
 
   #{$self}__footer{
diff --git a/client/src/style/pages/estimates.scss b/client/src/style/pages/estimates.scss
index 35a772d80..e8776581f 100644
--- a/client/src/style/pages/estimates.scss
+++ b/client/src/style/pages/estimates.scss
@@ -3,5 +3,57 @@
 
   #{$self}__header{
     
+    .bp3-form-group{
+      margin-bottom: 18px;
+    }
+    .bp3-label{
+      min-width: 140px;
+    }
+
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      &.bp3-inline{
+        max-width: 420px; 
+      }
+    }
+
+    .bp3-form-group{
+
+      &.form-group{
+
+        &--customer{
+          max-width: 650px;
+        }
+
+        &--expiration-date{
+          max-width: 340px;
+
+          .bp3-label{
+            min-width: 120px;
+          }
+        }
+      }
+    }
+
+    .col--estimate-date{
+      max-width: 435px;
+    }
+  }
+
+
+  #{$self}__footer{
+    .form-group--customer_note,
+    .form-group--terms_conditions{
+      max-width: 450px;
+      width: 100%;
+
+      textarea{
+        width: 100%;
+        min-height: 50px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/invoice-form.scss b/client/src/style/pages/invoice-form.scss
new file mode 100644
index 000000000..e7075f8c4
--- /dev/null
+++ b/client/src/style/pages/invoice-form.scss
@@ -0,0 +1,52 @@
+
+
+.page-form--invoice{
+  $self: '.page-form';
+
+  #{$self}__header{
+    .bp3-label{
+      min-width: 140px;
+    }
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      margin-bottom: 18px;
+
+      &.bp3-inline{
+        max-width: 420px; 
+      }
+
+      &.form-group{
+        &--customer-name{
+          max-width: 600px
+        }
+        &--due-date{
+          max-width: 300px;
+  
+          .bp3-label{
+            min-width: 95px;
+          }
+        }
+      }
+    }
+
+    .col--invoice-date{  
+      max-width: 435px;
+    }
+  }
+
+  #{$self}__footer{
+    .form-group--invoice_message,
+    .form-group--terms_conditions{
+      max-width: 450px;
+      width: 100%;
+
+      textarea{
+        width: 100%;
+        min-height: 60px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/style/pages/make-journal-entries.scss b/client/src/style/pages/make-journal-entries.scss
index 9cfdbb132..61cf4adf3 100644
--- a/client/src/style/pages/make-journal-entries.scss
+++ b/client/src/style/pages/make-journal-entries.scss
@@ -17,145 +17,7 @@
   }
 
   &__table {
-    padding: 15px 15px 0;
-
-    .bp3-form-group {
-      margin-bottom: 0;
-    }
-    .table {
-      border: 1px dotted rgb(195, 195, 195);
-      border-bottom: transparent;
-      border-left: transparent;
-
-      .th,
-      .td {
-        border-left: 1px dotted rgb(195, 195, 195);
-
-        &.index {
-          text-align: center;
-
-          span {
-            width: 100%;
-            font-weight: 500;
-          }
-        }
-      }
-
-      .thead {
-        .tr .th {
-          padding: 10px 10px;
-          background-color: #f2f5fa;
-          font-size: 14px;
-          font-weight: 500;
-          color: #1e1c3e;
-
-          &.index > div {
-            width: 100%;
-          }
-        }
-      }
-
-      .tbody {
-        .tr .td {
-          padding: 7px;
-          border-bottom: 1px dotted rgb(195, 195, 195);
-          min-height: 46px;
-
-          &.index {
-            background-color: #f2f5fa;
-
-            > span {
-              margin-top: auto;
-              margin-bottom: auto;
-            }
-          }
-        }
-        .tr {
-          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
-          .form-group--select-list .bp3-button {
-            border-color: #e5e5e5;
-            border-radius: 3px;
-            padding-left: 8px;
-            padding-right: 8px;
-          }
-
-          .form-group--select-list {
-            &.bp3-intent-danger {
-              .bp3-button:not(.bp3-minimal) {
-                border-color: #db3737;
-              }
-            }
-          }
-
-          &:last-of-type {
-            .td {
-              border-bottom: transparent;
-
-              .bp3-button,
-              .bp3-input-group {
-                display: none;
-              }
-            }
-          }
-
-          .td.actions {
-            .bp3-button {
-              background-color: transparent;
-              color: #e66d6d;
-
-              &:hover {
-                color: #c23030;
-              }
-
-              svg {
-                color: inherit;
-              }
-            }
-          }
-
-          &.row--total {
-            .account.td,
-            .debit.td,
-            .credit.td {
-              > span {
-                padding-top: 2px;
-              }
-            }
-            .debit.td,
-            .credit.td {
-              > span {
-                font-weight: 600;
-                color: #444;
-              }
-            }
-          }
-
-          .td {
-            &.note {
-              .bp3-form-group {
-                width: 100%;
-              }
-            }
-          }
-        }
-      }
-      .th {
-        color: #444;
-        font-weight: 600;
-        border-bottom: 1px dotted #666;
-      }
-
-      .td {
-        border-bottom: 1px dotted #999;
-      }
-
-      .actions.td {
-        .bp3-button {
-          background: transparent;
-          margin: 0;
-        }
-      }
-    }
+    
   }
 
   .bp3-button {
diff --git a/client/src/style/pages/receipt-form.scss b/client/src/style/pages/receipt-form.scss
new file mode 100644
index 000000000..30dde1d0b
--- /dev/null
+++ b/client/src/style/pages/receipt-form.scss
@@ -0,0 +1,41 @@
+
+
+.page-form--receipt{
+  $self: '.page-form';
+
+  #{$self}__header{
+    .bp3-label{
+      min-width: 140px;
+    }
+    .bp3-form-content{
+      width: 100%;
+    }
+
+    .bp3-form-group{
+      margin-bottom: 18px;
+
+      &.bp3-inline{
+        max-width: 450px; 
+      }
+
+      &.form-group{
+        &--customer{
+          max-width: 600px
+        }
+      }
+    }
+  }
+
+  #{$self}__footer{
+    .form-group--receipt_message,
+    .form-group--statement{
+      max-width: 450px;
+      width: 100%;
+
+      textarea{
+        width: 100%;
+        min-height: 50px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/server/src/data/options.js b/server/src/data/options.js
index 575bf910e..38d52c7d2 100644
--- a/server/src/data/options.js
+++ b/server/src/data/options.js
@@ -103,4 +103,14 @@ export default {
       type: "string",
     },
   ],
+  payment_receives: [
+    {
+      key: 'next_number',
+      type: 'number',
+    },
+    {
+      key: 'number_prefix',
+      type: 'string',
+    },
+  ]
 };
diff --git a/server/src/loaders/events.ts b/server/src/loaders/events.ts
index a0602f8ba..b87fb00f6 100644
--- a/server/src/loaders/events.ts
+++ b/server/src/loaders/events.ts
@@ -10,3 +10,5 @@ import 'subscribers/customers';
 import 'subscribers/vendors';
 import 'subscribers/paymentMades';
 import 'subscribers/paymentReceives';
+import 'subscribers/saleEstimates';
+import 'subscribers/saleReceipts';
\ No newline at end of file
diff --git a/server/src/services/Sales/SalesInvoices.ts b/server/src/services/Sales/SalesInvoices.ts
index 7a7f3dba3..e2560b1b6 100644
--- a/server/src/services/Sales/SalesInvoices.ts
+++ b/server/src/services/Sales/SalesInvoices.ts
@@ -400,6 +400,7 @@ export default class SaleInvoicesService extends SalesInvoicesCost {
       salesInvoicesFilter.page - 1,
       salesInvoicesFilter.pageSize,
     );
+
     return {
       salesInvoices: results,
       pagination,
diff --git a/server/src/services/Settings/SettingsService.ts b/server/src/services/Settings/SettingsService.ts
new file mode 100644
index 000000000..b405eb780
--- /dev/null
+++ b/server/src/services/Settings/SettingsService.ts
@@ -0,0 +1,30 @@
+import { Service, Inject } from "typedi";
+import TenancyService from 'services/Tenancy/TenancyService';
+
+@Service()
+export default class SettingsService {
+  @Inject()
+  tenancy: TenancyService;
+
+  @Inject('logger')
+  logger: any;
+
+  /**
+   * Increment next number based on the given find query.
+   * @param {number} tenantId 
+   * @param {any} findQuery 
+   */
+  async incrementNextNumber(tenantId: number, findQuery: any): Promise<void> {
+    const settings = this.tenancy.settings(tenantId);
+
+    this.logger.info('[settings] increment the next number.', { tenantId, findQuery });
+    const currentNumber = settings.find(findQuery);
+
+    if (currentNumber) {
+      const nextNumber = parseInt(currentNumber.value, 10) + 1;
+      settings.set(findQuery, nextNumber);
+
+      await settings.save();
+    }
+  }
+}
\ No newline at end of file
diff --git a/server/src/services/Tenancy/TenancyService.ts b/server/src/services/Tenancy/TenancyService.ts
index 2d4dfe160..7ca787375 100644
--- a/server/src/services/Tenancy/TenancyService.ts
+++ b/server/src/services/Tenancy/TenancyService.ts
@@ -103,4 +103,10 @@ export default class HasTenancyService {
       return tenantCacheLoader(tenantId);
     });
   }
+
+  settings(tenantId: number) {
+    return this.singletonService(tenantId, 'settings', () => {
+      throw new Error('Settings is not injected yet.');
+    });
+  }
 }
\ No newline at end of file
diff --git a/server/src/subscribers/paymentReceives.ts b/server/src/subscribers/paymentReceives.ts
index 746eb24da..861dc4d86 100644
--- a/server/src/subscribers/paymentReceives.ts
+++ b/server/src/subscribers/paymentReceives.ts
@@ -3,6 +3,7 @@ import { EventSubscriber, On } from 'event-dispatch';
 import events from 'subscribers/events';
 import TenancyService from 'services/Tenancy/TenancyService';
 import PaymentReceiveService from 'services/Sales/PaymentsReceives';
+import SettingsService from 'services/Settings/SettingsService';
 
 @EventSubscriber()
 export default class PaymentReceivesSubscriber {
@@ -10,10 +11,14 @@ export default class PaymentReceivesSubscriber {
   logger: any;
   paymentReceivesService: PaymentReceiveService;
 
+  settingsService: SettingsService;
+
   constructor() {
     this.tenancy = Container.get(TenancyService);
     this.logger = Container.get('logger');
     this.paymentReceivesService = Container.get(PaymentReceiveService);
+
+    this.settingsService = Container.get(SettingsService);
   }
 
   /**
@@ -84,4 +89,15 @@ export default class PaymentReceivesSubscriber {
       oldPaymentReceive.customerId,
     );
   }
+
+  /**
+   * Handles increment next number of payment receive once be created.
+   */
+  @On(events.paymentReceive.onCreated)
+  public async handlePaymentNextNumberIncrement({ tenantId, paymentReceiveId }) {
+    await this.settingsService.incrementNextNumber(tenantId, {
+      key: 'next_number',
+      group: 'payment_receives',
+    });
+  }
 }
\ No newline at end of file
diff --git a/server/src/subscribers/saleEstimates.ts b/server/src/subscribers/saleEstimates.ts
new file mode 100644
index 000000000..32facc31c
--- /dev/null
+++ b/server/src/subscribers/saleEstimates.ts
@@ -0,0 +1,29 @@
+import { Container } from 'typedi';
+import { On, EventSubscriber } from "event-dispatch";
+import events from 'subscribers/events';
+import TenancyService from 'services/Tenancy/TenancyService';
+import SettingsService from 'services/Settings/SettingsService';
+
+@EventSubscriber()
+export default class SaleEstimateSubscriber {
+  logger: any;
+  tenancy: TenancyService;
+  settingsService: SettingsService;
+
+  constructor() {
+    this.logger = Container.get('logger');
+    this.tenancy = Container.get(TenancyService);
+    this.settingsService = Container.get(SettingsService);
+  }
+
+  /**
+   * Handle sale estimate increment next number once be created.
+   */
+  @On(events.saleEstimate.onCreated)
+  public async handleEstimateNextNumberIncrement({ tenantId, saleEstimateId }) {
+    await this.settingsService.incrementNextNumber(tenantId, {
+      key: 'next_number',
+      group: 'sales_estimates',
+    });
+  }
+}
\ No newline at end of file
diff --git a/server/src/subscribers/saleInvoices.ts b/server/src/subscribers/saleInvoices.ts
index 5c7ddb915..f783d1a67 100644
--- a/server/src/subscribers/saleInvoices.ts
+++ b/server/src/subscribers/saleInvoices.ts
@@ -2,15 +2,18 @@ import { Container } from 'typedi';
 import { On, EventSubscriber } from "event-dispatch";
 import events from 'subscribers/events';
 import TenancyService from 'services/Tenancy/TenancyService';
+import SettingsService from 'services/Settings/SettingsService';
 
 @EventSubscriber()
 export default class SaleInvoiceSubscriber {
   logger: any;
   tenancy: TenancyService;
+  settingsService: SettingsService;
 
   constructor() {
     this.logger = Container.get('logger');
     this.tenancy = Container.get(TenancyService);
+    this.settingsService = Container.get(SettingsService);
   }
 
   /**
@@ -48,9 +51,20 @@ export default class SaleInvoiceSubscriber {
     const { customerRepository } = this.tenancy.repositories(tenantId);
 
     this.logger.info('[sale_invoice] trying to decrement customer balance.', { tenantId });
-    await customerRepository.changeBalance(
+    await customerRepository.changeBalance( 
       oldSaleInvoice.customerId,
       oldSaleInvoice.balance * -1,
     );
   }
+
+  /**
+   * Handles sale invoice next number increment once invoice created.
+   */
+  @On(events.saleInvoice.onCreated)
+  public async handleInvoiceNextNumberIncrement({ tenantId, saleInvoiceId, saleInvoice }) {
+    await this.settingsService.incrementNextNumber(tenantId, {
+      key: 'next_number',
+      group: 'sales_invoices'
+    });
+  }
 }
\ No newline at end of file
diff --git a/server/src/subscribers/saleReceipts.ts b/server/src/subscribers/saleReceipts.ts
new file mode 100644
index 000000000..510bda4d0
--- /dev/null
+++ b/server/src/subscribers/saleReceipts.ts
@@ -0,0 +1,29 @@
+import { Container } from 'typedi';
+import { On, EventSubscriber } from "event-dispatch";
+import events from 'subscribers/events';
+import TenancyService from 'services/Tenancy/TenancyService';
+import SettingsService from 'services/Settings/SettingsService';
+
+@EventSubscriber()
+export default class SaleReceiptSubscriber {
+  logger: any;
+  tenancy: TenancyService;
+  settingsService: SettingsService;
+
+  constructor() {
+    this.logger = Container.get('logger');
+    this.tenancy = Container.get(TenancyService);
+    this.settingsService = Container.get(SettingsService);
+  }
+
+  /**
+   * Handle sale receipt increment next number once be created.
+   */
+  @On(events.saleReceipt.onCreated)
+  public async handleReceiptNextNumberIncrement({ tenantId, saleReceiptId }) {
+    await this.settingsService.incrementNextNumber(tenantId, {
+      key: 'next_number',
+      group: 'sales_receipts',
+    });
+  }
+}
\ No newline at end of file