diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
index 65f65d232..aef1cf6f4 100644
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -232,11 +232,13 @@ function InvoiceForm({
   );
 
   return (
-    <div className={classNames(
-      CLASSES.PAGE_FORM,
-      CLASSES.PAGE_FORM_STRIP_STYLE,
-      CLASSES.PAGE_FORM_INVOICE
-    )}>
+    <div
+      className={classNames(
+        CLASSES.PAGE_FORM,
+        CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM_INVOICE,
+      )}
+    >
       <Formik
         validationSchema={
           isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
@@ -244,7 +246,7 @@ function InvoiceForm({
         initialValues={initialValues}
         onSubmit={handleSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting, values }) => (
           <Form>
             <InvoiceFormHeader
               onInvoiceNumberChanged={handleInvoiceNumberChanged}
diff --git a/client/src/containers/Sales/Invoice/InvoiceList.js b/client/src/containers/Sales/Invoice/InvoiceList.js
index 9f88b427f..9c8f3f89e 100644
--- a/client/src/containers/Sales/Invoice/InvoiceList.js
+++ b/client/src/containers/Sales/Invoice/InvoiceList.js
@@ -38,11 +38,13 @@ function InvoiceList({
   //#withInvoiceActions
   requestFetchInvoiceTable,
   requestDeleteInvoice,
+  requestDeliverInvoice,
   addInvoiceTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
   const [deleteInvoice, setDeleteInvoice] = useState(false);
+  const [deliverInvoice, setDeliverInvoice] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
@@ -88,6 +90,34 @@ function InvoiceList({
     });
   }, [deleteInvoice, requestDeleteInvoice, formatMessage]);
 
+  // Handle cancel/confirm invoice deliver.
+  const handleDeliverInvoice = useCallback((invoice) => {
+    setDeliverInvoice(invoice);
+  }, []);
+
+  // Handle cancel deliver invoice alert.
+  const handleCancelDeliverInvoice = useCallback(() => {
+    setDeliverInvoice(false);
+  }, []);
+
+  // Handle confirm invoiec deliver.
+  const handleConfirmInvoiceDeliver = useCallback(() => {
+    requestDeliverInvoice(deliverInvoice.id)
+      .then(() => {
+        setDeliverInvoice(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_invoice_has_been_successfully_delivered',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+      })
+      .catch((error) => {
+        // setDeliverInvoice(false);
+      });
+  }, [deliverInvoice, requestDeliverInvoice, formatMessage]);
+
   const handleEditInvoice = useCallback((invoice) => {
     history.push(`/invoices/${invoice.id}/edit`);
   });
@@ -127,6 +157,7 @@ function InvoiceList({
             <InvoicesDataTable
               onDeleteInvoice={handleDeleteInvoice}
               onEditInvoice={handleEditInvoice}
+              onDeliverInvoice={handleDeliverInvoice}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -145,6 +176,18 @@ function InvoiceList({
             <T id={'once_delete_this_invoice_you_will_able_to_restore_it'} />
           </p>
         </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'deliver'} />}
+          intent={Intent.WARNING}
+          isOpen={deliverInvoice}
+          onCancel={handleCancelDeliverInvoice}
+          onConfirm={handleConfirmInvoiceDeliver}
+        >
+          <p>
+            <T id={'are_sure_to_deliver_this_invoice'} />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
index 532ed1555..7944be3be 100644
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js
@@ -50,6 +50,7 @@ function InvoicesDataTable({
   // #OwnProps
   onEditInvoice,
   onDeleteInvoice,
+  onDeliverInvoice,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -82,6 +83,12 @@ function InvoicesDataTable({
           text={formatMessage({ id: 'edit_invoice' })}
           onClick={handleEditInvoice(invoice)}
         />
+        <If condition={!invoice.is_delivered}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_delivered' })}
+            onClick={() => onDeliverInvoice(invoice)}
+          />
+        </If>
         <MenuItem
           text={formatMessage({ id: 'delete_invoice' })}
           intent={Intent.DANGER}
diff --git a/client/src/containers/Sales/Invoice/withInvoiceActions.js b/client/src/containers/Sales/Invoice/withInvoiceActions.js
index 69a379b09..a3f65974e 100644
--- a/client/src/containers/Sales/Invoice/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoice/withInvoiceActions.js
@@ -6,6 +6,7 @@ import {
   fetchInvoice,
   fetchInvoicesTable,
   fetchDueInvoices,
+  deliverInvoice,
 } from 'store/Invoice/invoices.actions';
 import t from 'store/types';
 
@@ -18,6 +19,7 @@ const mapDipatchToProps = (dispatch) => ({
   requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
   requestFetchDueInvoices: (customerId) =>
     dispatch(fetchDueInvoices({ customerId })),
+  requestDeliverInvoice: (id) => dispatch(deliverInvoice({ id })),
   changeInvoiceView: (id) =>
     dispatch({
       type: t.INVOICES_SET_CURRENT_VIEW,
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
index daa509e08..05be0abbd 100644
--- a/client/src/store/Invoice/invoices.actions.js
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -121,31 +121,35 @@ export const fetchInvoice = ({ id }) => {
     });
 };
 
-export const fetchDueInvoices = ({ customerId }) => (dispatch) => new Promise((resovle, reject) => {
+export const fetchDueInvoices = ({ customerId }) => (dispatch) =>
+  new Promise((resovle, reject) => {
     ApiService.get(`sales/invoices/payable`, {
       params: { customer_id: customerId },
     })
-    .then((response) => {
-      dispatch({
-        type: t.INVOICES_ITEMS_SET,
-        payload: {
-          sales_invoices: response.data.sales_invoices,
-        },
-      });
-      if (customerId) {
+      .then((response) => {
         dispatch({
-          type: t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID,
+          type: t.INVOICES_ITEMS_SET,
           payload: {
-            customerId,
-            saleInvoices: response.data.sales_invoices,
+            sales_invoices: response.data.sales_invoices,
           },
         });
-      }
-      resovle(response);
-    })
-    .catch((error) => {
-      const { response } = error;
-      const { data } = response;
-      reject(data?.errors);
-    });
+        if (customerId) {
+          dispatch({
+            type: t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID,
+            payload: {
+              customerId,
+              saleInvoices: response.data.sales_invoices,
+            },
+          });
+        }
+        resovle(response);
+      })
+      .catch((error) => {
+        const { response } = error;
+        const { data } = response;
+        reject(data?.errors);
+      });
   });
+export const deliverInvoice = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/invoices/${id}/deliver`);
+};