diff --git a/frontend/src/components/areas/private/features/payments/payments.js b/frontend/src/components/areas/private/features/payments/payments.js
index e6eef75b4..482ea4738 100644
--- a/frontend/src/components/areas/private/features/payments/payments.js
+++ b/frontend/src/components/areas/private/features/payments/payments.js
@@ -1,45 +1,45 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback } from "react";
 
-import 'react-placeholder/lib/reactPlaceholder.css'
-import { messages } from '../../../public/features/task/messages/task-messages'
-import MomentComponent from 'moment'
-import PaymentProvider from '../../../../design-library/atoms/badges/payment-provider/payment-provider'
+import "react-placeholder/lib/reactPlaceholder.css";
+import { messages } from "../../../public/features/task/messages/task-messages";
+import MomentComponent from "moment";
+import PaymentProvider from "../../../../design-library/atoms/badges/payment-provider/payment-provider";
 
 import {
   Container,
   withStyles,
   Button,
   Link,
-  Typography
-} from '@material-ui/core'
+  Typography,
+} from "@material-ui/core";
 
 import {
   Refresh as RefreshIcon,
   Cancel as CancelIcon,
   Info as InfoIcon,
   SwapHoriz as TransferIcon,
-  Receipt as ReceiptIcon
-} from '@material-ui/icons'
-import slugify from '@sindresorhus/slugify'
-
-import TaskPaymentCancel from '../../../public/features/task/task-payment-cancel'
-import PropTypes from 'prop-types'
-import { FormattedMessage, injectIntl } from 'react-intl'
-
-import TaskOrderDetails from '../../../public/features/task/order/task-order-details'
-import TaskOrderTransfer from '../../../public/features/task/order/task-order-transfer'
-import PaymentRefund from './payment-refund'
-import CustomPaginationActionsTable from './payments-table'
-import InvoiceStatus from '../../../../design-library/atoms/status/payment-types-status/invoice-status/invoice-status'
-import PaymentStatus from '../../../../design-library/atoms/status/payment-types-status/payment-status/payment-status'
-
-const styles = theme => ({
+  Receipt as ReceiptIcon,
+} from "@material-ui/icons";
+import slugify from "@sindresorhus/slugify";
+
+import TaskPaymentCancel from "../../../public/features/task/task-payment-cancel";
+import PropTypes from "prop-types";
+import { FormattedMessage, injectIntl } from "react-intl";
+
+import TaskOrderDetails from "../../../public/features/task/order/task-order-details";
+import TaskOrderTransfer from "../../../public/features/task/order/task-order-transfer";
+import PaymentRefund from "./payment-refund";
+import CustomPaginationActionsTable from "./payments-table";
+import InvoiceStatus from "../../../../design-library/atoms/status/payment-types-status/invoice-status/invoice-status";
+import PaymentStatus from "../../../../design-library/atoms/status/payment-types-status/payment-status/payment-status";
+
+const styles = (theme) => ({
   paper: {
     padding: 10,
     marginTop: 10,
     marginBottom: 10,
-    textAlign: 'left',
-    color: theme.palette.text.secondary
+    textAlign: "left",
+    color: theme.palette.text.secondary,
   },
   button: {
     width: 100,
@@ -47,17 +47,34 @@ const styles = theme => ({
     margin: 5,
   },
   icon: {
-    marginLeft: 5
-  }
-})
-
-const Payments = ({ classes, tasks, orders, order, user, logged, listOrders, listTasks, filterTasks, getOrderDetails, cancelPaypalPayment, transferOrder, refundOrder, updateOrder, intl }) => {
-  const [cancelPaypalConfirmDialog, setCancelPaypalConfirmDialog] = useState(false)
-  const [orderDetailsDialog, setOrderDetailsDialog] = useState(false)
-  const [transferDialogOpen, setTransferDialogOpen] = useState(false)
-  const [refundDialogOpen, setRefundDialogOpen] = useState(false)
-  const [currentOrderId, setCurrentOrderId] = useState(null)
-  const [ transferOpened, setTransferOpened ] = useState(false)
+    marginLeft: 5,
+  },
+});
+
+const Payments = ({
+  classes,
+  tasks,
+  orders,
+  order,
+  user,
+  logged,
+  listOrders,
+  listTasks,
+  filterTasks,
+  getOrderDetails,
+  cancelPaypalPayment,
+  transferOrder,
+  refundOrder,
+  updateOrder,
+  intl,
+}) => {
+  const [cancelPaypalConfirmDialog, setCancelPaypalConfirmDialog] =
+    useState(false);
+  const [orderDetailsDialog, setOrderDetailsDialog] = useState(false);
+  const [transferDialogOpen, setTransferDialogOpen] = useState(false);
+  const [refundDialogOpen, setRefundDialogOpen] = useState(false);
+  const [currentOrderId, setCurrentOrderId] = useState(null);
+  const [transferOpened, setTransferOpened] = useState(false);
 
   const statuses = {
     open: intl.formatMessage(messages.openPaymentStatus),
@@ -66,81 +83,81 @@ const Payments = ({ classes, tasks, orders, order, user, logged, listOrders, lis
     failed: intl.formatMessage(messages.failStatus),
     canceled: intl.formatMessage(messages.canceledStatus),
     refunded: intl.formatMessage(messages.refundedStatus),
-    expired: intl.formatMessage(messages.expiredStatus)
-  }
+    expired: intl.formatMessage(messages.expiredStatus),
+  };
 
   useEffect(() => {
-    listOrders({ userId: user.id })
-  }, [])
+    listOrders({ userId: user.id });
+  }, []);
 
   const handlePayPalDialogOpen = (e, id) => {
-    e.preventDefault()
-    setCancelPaypalConfirmDialog(true)
-    setCurrentOrderId(id)
-  }
+    e.preventDefault();
+    setCancelPaypalConfirmDialog(true);
+    setCurrentOrderId(id);
+  };
 
   const handlePayPalDialogClose = () => {
-    setCancelPaypalConfirmDialog(false)
-  }
+    setCancelPaypalConfirmDialog(false);
+  };
 
   const handleCancelPaypalPayment = async () => {
-    const orderId = currentOrderId
-    setCancelPaypalConfirmDialog(false)
-    setOrderDetailsDialog(false)
-    await cancelPaypalPayment(orderId)
-  }
+    const orderId = currentOrderId;
+    setCancelPaypalConfirmDialog(false);
+    setOrderDetailsDialog(false);
+    await cancelPaypalPayment(orderId);
+  };
 
   const openOrderDetailsDialog = async (e, id) => {
-    await getOrderDetails(id)
-    setOrderDetailsDialog(true)
-    setCurrentOrderId(id)
-  }
+    await getOrderDetails(id);
+    setOrderDetailsDialog(true);
+    setCurrentOrderId(id);
+  };
 
   const handleTransferDrawer = useCallback(async () => {
-    if(!transferOpened) {
-      await listTasks({})
-      await filterTasks('userId')
-      setTransferOpened(true)
+    if (!transferOpened) {
+      await listTasks({});
+      await filterTasks("userId");
+      setTransferOpened(true);
     }
-    setTransferDialogOpen(true)
-  }, [])
+    setTransferDialogOpen(true);
+  }, []);
 
   const openTransferDialog = async (e) => {
-    e.preventDefault()
-    await handleTransferDrawer()
-  }
+    e.preventDefault();
+    await handleTransferDrawer();
+  };
 
   const openRefundDialog = async (e, item) => {
-    setRefundDialogOpen(true)
-    setCurrentOrderId(item.id)
-  }
+    setRefundDialogOpen(true);
+    setCurrentOrderId(item.id);
+  };
 
   const closeRefundDialog = async () => {
-    setRefundDialogOpen(false)
-  }
+    setRefundDialogOpen(false);
+  };
 
   const closeTransferDialog = (e, item) => {
-    setTransferDialogOpen(false)
-  }
+    setTransferDialogOpen(false);
+  };
 
   const closeOrderDetailsDialog = () => {
-    setOrderDetailsDialog(false)
-  }
+    setOrderDetailsDialog(false);
+  };
 
   const retryPaypalPayment = (e, item) => {
-    e.preventDefault()
-    const { payment_url: paymentUrl, status } = item
-    if(status === 'expired') {
-      return updateOrder({ id: item.id }).then(order => {
+    e.preventDefault();
+    const { payment_url: paymentUrl, status } = item;
+    if (status === "expired") {
+      return updateOrder({ id: item.id }).then((order) => {
         if (order.order.payment_url) {
-          window.location.href = order.order.payment_url
+          window.location.href = order.order.payment_url;
         }
-      })
+      });
     }
     if (paymentUrl) {
-      window.location.href = paymentUrl
+      window.location.href = paymentUrl;
     }
-  }
+  };
 
   /*
   const cancelPaypalPayment = (e, id) => {
@@ -153,174 +170,236 @@ const Payments = ({ classes, tasks, orders, order, user, logged, listOrders, lis
   */
 
   const retryPaypalPaymentButton = (item) => {
-    const { payment_url: paymentUrl } = item
+    const { payment_url: paymentUrl } = item;
     return (
-      <Button variant='contained' size='small' color='secondary' className={ classes.button } onClick={ (e) => {
-        retryPaypalPayment(e, item)
-      } }>
-        <FormattedMessage id='general.buttons.retry' defaultMessage='Retry' />
+      <Button
+        variant="contained"
+        size="small"
+        color="secondary"
+        className={classes.button}
+        onClick={(e) => {
+          retryPaypalPayment(e, item);
+        }}
+      >
+        <FormattedMessage id="general.buttons.retry" defaultMessage="Retry" />
         <RefreshIcon className={classes.icon} />
       </Button>
-    )
-  }
+    );
+  };
 
   const cancelPaypalPaymentButton = (id) => {
     return (
-      <Button variant='contained' size='small' color='secondary' className={ classes.button } onClick={ (e) => {
-        cancelPaypalPayment(id)
-      } }>
-        <FormattedMessage id='general.buttons.cancel' defaultMessage='Cancel' />
+      <Button
+        variant="contained"
+        size="small"
+        color="secondary"
+        className={classes.button}
+        onClick={(e) => {
+          cancelPaypalPayment(id);
+        }}
+      >
+        <FormattedMessage id="general.buttons.cancel" defaultMessage="Cancel" />
         <CancelIcon className={classes.icon} />
       </Button>
-    )
-  }
+    );
+  };
 
   const detailsOrderButton = (item, userId) => {
-    if (item.provider === 'paypal') {
+    if (item.provider === "paypal") {
       if (item.User && userId === item.User.id) {
         return (
           <Button
-            variant='contained'
-            size='small'
-            color='secondary'
-            className={ classes.button }
-            onClick={ (e) => openOrderDetailsDialog(e, item.id) }
+            variant="contained"
+            size="small"
+            color="secondary"
+            className={classes.button}
+            onClick={(e) => openOrderDetailsDialog(e, item.id)}
           >
-            <FormattedMessage id='general.buttons.details' defaultMessage='Details' />
-          <InfoIcon className={classes.icon} />
+            <FormattedMessage
+              id="general.buttons.details"
+              defaultMessage="Details"
+            />
+            <InfoIcon className={classes.icon} />
           </Button>
-        )
+        );
       }
     }
-  }
+  };
 
-  const issueRow = issue => {
+  const issueRow = (issue) => {
     return (
       <span>
-        { issue && issue.title ? (
-          <Link href='' onClick={ (e) => {
-            e.preventDefault()
-            window.location.href = `/#/task/${issue.id}/${slugify(issue.title)}`
-            window.location.reload()
-          } }>{ issue.title }</Link>
+        {issue && issue.title ? (
+          <Link
+            href=""
+            onClick={(e) => {
+              e.preventDefault();
+              window.location.href = `/#/task/${issue.id}/${slugify(
+                issue.title
+              )}`;
+              window.location.reload();
+            }}
+          >
+            {issue.title}
+          </Link>
         ) : (
-          'no issue found'
-        ) }
+          "no issue found"
+        )}
       </span>
-    )
-  }
+    );
+  };
 
   const retryOrCancelButton = (item, userId) => {
-    if (item.User && item.provider === 'paypal' && userId === item.User.id) {
-      if ((item.status === 'fail' || item.status === 'open' || item.status === 'expired' || item.status === 'canceled') && item.payment_url) {
-        return retryPaypalPaymentButton(item)
-      }
-      else if (item.status === 'succeeded') {
-        return cancelPaypalPaymentButton(item.id)
-      }
-      else {
-        return ''
+    if (item.User && item.provider === "paypal" && userId === item.User.id) {
+      if (
+        (item.status === "fail" ||
+          item.status === "open" ||
+          item.status === "expired" ||
+          item.status === "canceled") &&
+        item.payment_url
+      ) {
+        return retryPaypalPaymentButton(item);
+      } else if (item.status === "succeeded") {
+        return cancelPaypalPaymentButton(item.id);
+      } else {
+        return "";
       }
     }
-  }
+  };
 
   const transferButton = (item, userId) => {
-    if (item.User && item.provider === 'stripe' && userId === item.User.id) {
-      if (item.status === 'succeeded' && item.Task && item.Task.status === 'open' && item.Task.paid === false && !item.Task.transfer_id) {
+    if (item.User && item.provider === "stripe" && userId === item.User.id) {
+      if (
+        item.status === "succeeded" &&
+        item.Task &&
+        item.Task.status === "open" &&
+        item.Task.paid === false &&
+        !item.Task.transfer_id
+      ) {
         return (
           <React.Fragment>
             <Button
-              variant='contained'
-              size='small'
-              color='secondary'
-              className={ classes.button }
+              variant="contained"
+              size="small"
+              color="secondary"
+              className={classes.button}
               onClick={(e) => openTransferDialog(e)}
             >
-              <FormattedMessage id='general.buttons.transfer' defaultMessage='Transfer' />
+              <FormattedMessage
+                id="general.buttons.transfer"
+                defaultMessage="Transfer"
+              />
               <TransferIcon classes={classes.icon} />
             </Button>
-            <TaskOrderTransfer task={ item.Task } order={ item } onSend={ transferOrder } tasks={ tasks } open={ transferDialogOpen } onClose={ closeTransferDialog } listOrders={async () => await listOrders({ userId: user.id })} />
+            <TaskOrderTransfer
+              task={item.Task}
+              order={item}
+              onSend={transferOrder}
+              tasks={tasks}
+              open={transferDialogOpen}
+              onClose={closeTransferDialog}
+              listOrders={async () => await listOrders({ userId: user.id })}
+            />
           </React.Fragment>
-        )
-      }
-      else {
-        return ''
+        );
+      } else {
+        return "";
       }
     }
-  }
+  };
 
   const refundButton = (item, userId) => {
     if (item.User && userId === item.User.id) {
-      if (item.status === 'succeeded' && item.provider === 'stripe' && item.Task && item.Task.status === 'open' && item.Task.paid === false && !item.Task.transfer_id) {
+      if (
+        item.status === "succeeded" &&
+        item.provider === "stripe" &&
+        item.Task &&
+        item.Task.status === "open" &&
+        item.Task.paid === false &&
+        !item.Task.transfer_id
+      ) {
         return (
           <React.Fragment>
             <Button
-              variant='contained'
-              size='small'
-              color='secondary'
-              className={ classes.button }
-              onClick={ (e) => openRefundDialog(e, item) }
+              variant="contained"
+              size="small"
+              color="secondary"
+              className={classes.button}
+              onClick={(e) => openRefundDialog(e, item)}
             >
-              <FormattedMessage id='general.buttons.refund' defaultMessage='Refund' />
-              <ReceiptIcon className={classes.icon } />
+              <FormattedMessage
+                id="general.buttons.refund"
+                defaultMessage="Refund"
+              />
+              <ReceiptIcon className={classes.icon} />
             </Button>
           </React.Fragment>
-        )
-      }
-      else {
-        return ''
+        );
+      } else {
+        return "";
       }
     }
-  }
+  };
 
-  const displayOrders = orders => {
-    if (!orders) return []
+  const displayOrders = (orders) => {
+    if (!orders) return [];
 
     if (!orders.length) {
-      return []
+      return [];
     }
 
-    let userId
+    let userId;
 
     if (logged) {
-      userId = user.id
+      userId = user.id;
     }
+    console.log(item.status + item.completed);
 
     return orders.map((item, i) => [
-      item.paid ? intl.formatMessage(messages.labelYes) : intl.formatMessage(messages.labelNo),
-      item.source_type === 'invoice-item' ?
-      <InvoiceStatus invoiceStatus={item.status === 'succeeded' ? 'paid' : item.status} />
-      : <PaymentStatus orderStatus={item.status} />,
+      item.paid
+        ? intl.formatMessage(messages.labelYes)
+        : intl.formatMessage(messages.labelNo),
+      item.source_type === "invoice-item" ? (
+        <InvoiceStatus
+          status={item.status === "succeeded" ? "paid" : item.status}
+          completed={item.completed}
+        />
+      ) : (
+        <PaymentStatus status={item.status} completed={item.completed} />
+      ),
       issueRow(item.Task),
       `$ ${item.amount}`,
-      <PaymentProvider provider={item.provider} sourceType={item.source_type} />,
+      <PaymentProvider
+        provider={item.provider}
+        sourceType={item.source_type}
+      />,
       MomentComponent(item.createdAt).fromNow(),
-      <div style={ { display: 'flex', justifyContent: 'space-around' } }>
-        { detailsOrderButton(item, userId) }
-        { retryOrCancelButton(item, userId) }
-        { transferButton(item, userId) }
-        { refundButton(item, userId) }
+      <div style={{ display: "flex", justifyContent: "space-around" }}>
+        {detailsOrderButton(item, userId)}
+        {retryOrCancelButton(item, userId)}
+        {transferButton(item, userId)}
+        {refundButton(item, userId)}
       </div>,
-    ])
-  }
+    ]);
+  };
 
   return (
-    <div style={ { marginTop: 40 } }>
+    <div style={{ marginTop: 40 }}>
       <Container>
-        <Typography variant='h5' gutterBottom>
-          <FormattedMessage id='general.payments' defaultMessage='Payments' />
+        <Typography variant="h5" gutterBottom>
+          <FormattedMessage id="general.payments" defaultMessage="Payments" />
         </Typography>
-        <div style={ { marginTop: 40, marginBottom: 30 } }>
+        <div style={{ marginTop: 40, marginBottom: 30 }}>
           <CustomPaginationActionsTable
-            tableHead={ [
+            tableHead={[
               intl.formatMessage(messages.cardTableHeaderPaid),
               intl.formatMessage(messages.cardTableHeaderStatus),
               intl.formatMessage(messages.cardTableHeaderIssue),
               intl.formatMessage(messages.cardTableHeaderValue),
               intl.formatMessage(messages.cardTableHeaderPayment),
               intl.formatMessage(messages.cardTableHeaderCreated),
-              intl.formatMessage(messages.cardTableHeaderActions)
-            ] }
+              intl.formatMessage(messages.cardTableHeaderActions),
+            ]}
             payments={
               orders && orders.data && orders.data.length
                 ? { ...orders, data: displayOrders(orders.data) }
@@ -330,27 +409,27 @@ const Payments = ({ classes, tasks, orders, order, user, logged, listOrders, lis
         </div>
       </Container>
       <TaskPaymentCancel
-        cancelPaypalConfirmDialog={ cancelPaypalConfirmDialog }
-        handlePayPalDialogClose={ handlePayPalDialogClose }
-        handleCancelPaypalPayment={ handleCancelPaypalPayment }
-        listOrders={ async () => listOrders({ userId: user.id }) }
+        cancelPaypalConfirmDialog={cancelPaypalConfirmDialog}
+        handlePayPalDialogClose={handlePayPalDialogClose}
+        handleCancelPaypalPayment={handleCancelPaypalPayment}
+        listOrders={async () => listOrders({ userId: user.id })}
       />
       <TaskOrderDetails
-        open={ orderDetailsDialog }
-        order={ order }
-        onClose={ closeOrderDetailsDialog }
-        onCancel={ handlePayPalDialogOpen }
+        open={orderDetailsDialog}
+        order={order}
+        onClose={closeOrderDetailsDialog}
+        onCancel={handlePayPalDialogOpen}
       />
       <PaymentRefund
-        open={ refundDialogOpen }
-        handleClose={ () => closeRefundDialog() }
-        orderId={ currentOrderId }
-        onRefund={ refundOrder }
-        listOrders={ async () => listOrders({ userId: user.id }) }
+        open={refundDialogOpen}
+        handleClose={() => closeRefundDialog()}
+        orderId={currentOrderId}
+        onRefund={refundOrder}
+        listOrders={async () => listOrders({ userId: user.id })}
       />
     </div>
-  )
-}
+  );
+};
 
 Payments.propTypes = {
   classes: PropTypes.object.isRequired,
@@ -362,7 +441,7 @@ Payments.propTypes = {
   cancelPaypalPayment: PropTypes.func,
   transferOrder: PropTypes.func,
   refundOrder: PropTypes.func,
-  intl: PropTypes.object
-}
+  intl: PropTypes.object,
+};
 
-export default injectIntl(withStyles(styles)(Payments))
+export default injectIntl(withStyles(styles)(Payments));
diff --git a/frontend/src/components/areas/private/features/wallets/wallets.tsx b/frontend/src/components/areas/private/features/wallets/wallets.tsx
index 6ad392dbe..4c86b9ffe 100644
--- a/frontend/src/components/areas/private/features/wallets/wallets.tsx
+++ b/frontend/src/components/areas/private/features/wallets/wallets.tsx
@@ -200,7 +200,7 @@ const Wallets = ({
                   ...walletOrders,
                   data: walletOrders?.data?.map( wo => [
                     <InvoiceId key={wo.id} walletOrderId={wo.id} fetchWalletOrder={fetchWalletOrder} />,
-                    <InvoiceStatus invoiceStatus={wo.status} />,
+                    <InvoiceStatus status={wo.status} completed={wo.completed} />,
                     formatCurrency(wo.amount),
                     moment(wo.createdAt).fromNow(),
                     <InvoiceDueDate key={wo.id} walletOrderId={wo.id} fetchWalletOrder={fetchWalletOrder} />,
diff --git a/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.stories.tsx b/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.stories.tsx
index 8914bf9e1..311a308ac 100644
--- a/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.stories.tsx
+++ b/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.stories.tsx
@@ -1,63 +1,39 @@
 import React from 'react';
-
 import InvoiceStatus from './invoice-status';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Design Library/Atoms/Status/Payments/Invoice Status',
+  title: 'Design Library/Atoms/Status/Payments/InvoiceStatus',
   component: InvoiceStatus,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  //argTypes: {
-  //  tags: { control: '' },
-  //},
 };
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <InvoiceStatus {...args} />;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  invoiceStatus: 'paid',
+export const Pending ={
+args : { status: 'pending' }
 };
-
-export const PendingStatus = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-PendingStatus.args = {
-  invoiceStatus: 'pending',
+export const Draft ={
+args : { status: 'draft' }
 };
-
-export const DraftStatus = Template.bind({});
-DraftStatus.args = {
-  invoiceStatus: 'draft',
+export const Open ={
+args : { status: 'open' }
 };
-
-export const OpenStatus = Template.bind({});
-OpenStatus.args = {
-  invoiceStatus: 'open',
+export const Paid ={
+args : { status: 'paid' }
 };
-
-export const PaidStatus = Template.bind({});
-PaidStatus.args = {
-  invoiceStatus: 'paid',
+export const Failed ={
+args : { status: 'failed' }
 };
-
-export const FailedStatus = Template.bind({});
-FailedStatus.args = {
-  invoiceStatus: 'failed',
+export const Uncollectible ={
+args : { status: 'uncollectible' }
 };
-
-export const UncollectibleStatus = Template.bind({});
-UncollectibleStatus.args = {
-  invoiceStatus: 'uncollectible',
+export const Void ={
+args : { status: 'void' }
 };
-
-export const VoidStatus = Template.bind({});
-VoidStatus.args = {
-  invoiceStatus: 'void',
+export const Refunded ={
+args : { status: 'refunded' }
 };
-
-export const RefundedStatus = Template.bind({});
-RefundedStatus.args = {
-  invoiceStatus: 'refunded',
+export const Loading ={
+args : {
+  status: 'pending',
+  completed: false,
+}
 };
diff --git a/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.tsx b/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.tsx
index 589676738..d812703a6 100644
--- a/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.tsx
+++ b/frontend/src/components/design-library/atoms/status/payment-types-status/invoice-status/invoice-status.tsx
@@ -1,86 +1,93 @@
 import React from 'react';
-import { createStyles, Theme } from '@material-ui/core/styles';
-import { cyan, blue, lime, orange } from '@material-ui/core/colors';
-import Chip from '@material-ui/core/Chip';
-import { status } from '../../../../../../consts'
-import useStyles from './invoice-status.styles'
+import useStyles from './invoice-status.styles';
+import BaseStatus from '../../base-status/base-status';
+import {
+  CheckCircleOutlineTwoTone as ActiveIcon,
+  InfoSharp as InfoIcon,
+  HelpOutline as QuestionInfoIcon,
+  NotInterested as InactiveIcon
+} from '@material-ui/icons';
 
-
-type statusProps = {
-  invoiceStatus: string;
+interface InvoiceStatusProps {
+  status: string;
+  completed?: boolean;
 }
 
-type GetStatusProps = { label?: string, color?: 'pending' | 'draft' | 'open' | 'paid' | 'failed' | 'uncollectible' | 'void' | 'refunded' | 'unknown' }
-type GetStatus = (currentStatus:string) => GetStatusProps
-
-export default function InvoiceStatus({ invoiceStatus }:statusProps) {
+const InvoiceStatus: React.FC<InvoiceStatusProps> = ({
+  status,
+  completed = true,
+}) => {
   const classes = useStyles();
 
-  const getStatus:GetStatus = (currentStatus:string) => {
-    const { invoice } = status;
-    let choosenStatus:GetStatusProps = {};
-    switch (currentStatus) {
-      case `${invoice.pending}`:
-        choosenStatus = {
-          label: 'Pending',
-          color: 'pending',
-        };
-      break;
-      case invoice.draft:
-        choosenStatus = {
-          label: 'Draft',
-          color: 'draft',
-        };
-      break;
-      case `${invoice.open}`:
-        choosenStatus = {
-          label: 'Open',
-          color: 'open',
-        };
-      break;
-      case `${invoice.paid}`:
-        choosenStatus = {
-          label: 'Paid',
-          color: 'paid',
-        };
-      break;
-      case invoice.failed:
-        choosenStatus = {
-          label: 'Failed',
-          color: 'failed',
-        };
-      break;
-      case invoice.uncollectible:
-        choosenStatus = {
-          label: 'Uncollectible',
-          color: 'uncollectible',
-        };
-      break;
-      case invoice.void:
-        choosenStatus = {
-          label: 'Void',
-          color: 'void',
-        };
-      break;
-      case invoice.refunded:
-        choosenStatus = {
-          label: 'Refunded',
-          color: 'refunded',
-        };
-      break;
-      default:
-        choosenStatus = {
-          label: 'Unknown',
-          color: 'unknown',
-        };
-      break;
-    }
-    return choosenStatus;
-  }
-
-  const currentStatus = getStatus(invoiceStatus)
+  const statusList = [
+    {
+      status: 'pending',
+      label: 'Pending',
+      color: 'pending',
+      icon: <InfoIcon className={classes.pending} />,
+      message: 'Your invoice is pending. It may require additional actions to complete.',
+    },
+    {
+      status: 'draft',
+      label: 'Draft',
+      color: 'draft',
+      icon: <InactiveIcon className={classes.draft} />,
+      message: 'This invoice is in draft state and has not been finalized yet.',
+    },
+    {
+      status: 'open',
+      label: 'Open',
+      color: 'open',
+      icon: <InfoIcon className={classes.open} />,
+    },
+    {
+      status: 'paid',
+      label: 'Paid',
+      color: 'paid',
+      icon: <ActiveIcon className={classes.paid} />,
+    },
+    {
+      status: 'failed',
+      label: 'Failed',
+      color: 'failed',
+      icon: <InactiveIcon className={classes.failed} />,
+      message: 'This invoice payment has failed. Please retry or contact support.',
+    },
+    {
+      status: 'uncollectible',
+      label: 'Uncollectible',
+      color: 'uncollectible',
+      icon: <InactiveIcon className={classes.uncollectible} />,
+    },
+    {
+      status: 'void',
+      label: 'Void',
+      color: 'void',
+      icon: <InactiveIcon className={classes.void} />,
+    },
+    {
+      status: 'refunded',
+      label: 'Refunded',
+      color: 'refunded',
+      icon: <InfoIcon className={classes.refunded} />,
+    },
+    {
+      status: 'unknown',
+      label: 'Unknown',
+      color: 'unknown',
+      icon: <QuestionInfoIcon className={classes.unknown} />,
+      message: 'Your status is unknown. Please check back later.',
+    },
+  ];
 
   return (
-    <Chip size="small" label={currentStatus.label} className={classes[currentStatus.color]} />
+    <BaseStatus
+      status={status}
+      statusList={statusList}
+      classes={classes}
+      completed={completed}
+    />
   );
-}
+};
+
+export default InvoiceStatus;
diff --git a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.stories.tsx b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.stories.tsx
index 4c93ee883..9e131f10d 100644
--- a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.stories.tsx
+++ b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.stories.tsx
@@ -1,73 +1,61 @@
-import React from 'react';
-
 import PaymentStatus from './payment-status';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Design Library/Atoms/Status/Payments/PaymentStatus',
   component: PaymentStatus,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  //argTypes: {
-  //  tags: { control: '' },
-  //},
-};
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <PaymentStatus {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  orderStatus: 'succeeded',
 };
 
-export const OpenStatus = Template.bind({});
-OpenStatus.args = {
-  orderStatus: 'open',
+export const Open = {
+  args: {
+    status: 'open',
+  },
 };
 
-export const PendingStatus = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-PendingStatus.args = {
-  orderStatus: 'pending',
+export const Pending = {
+  args: {
+    status: 'pending',
+  },
 };
 
-export const SucceededStatus = Template.bind({});
-SucceededStatus.args = {
-  orderStatus: 'succeeded',
+export const Succeeded = {
+  args: {
+    status: 'succeeded',
+  },
 };
 
-export const FailedStatus = Template.bind({});
-FailedStatus.args = {
-  orderStatus: 'failed',
+export const Failed = {
+  args: {
+    status: 'failed',
+  },
 };
 
-export const ExpiredStatus = Template.bind({});
-ExpiredStatus.args = {
-  orderStatus: 'expired',
+export const Expired = {
+  args: {
+    status: 'expired',
+  },
 };
 
-export const CancelledStatus = Template.bind({});
-CancelledStatus.args = {
-  orderStatus: 'cancelled',
+export const Canceled = {
+  args: {
+    status: 'canceled',
+  },
 };
 
-export const FailStatus = Template.bind({});
-FailStatus.args = {
-  orderStatus: 'fail',
+export const Refunded = {
+  args: {
+    status: 'refunded',
+  },
 };
 
-export const CanceledStatus = Template.bind({});
-CanceledStatus.args = {
-  orderStatus: 'canceled',
+export const Unknown = {
+  args: {
+    status: 'unknown',
+  },
 };
 
-export const RefundedStatus = Template.bind({});
-RefundedStatus.args = {
-  orderStatus: 'refunded',
-};
-
-export const UndefinedStatus = Template.bind({});
-UndefinedStatus.args = {
-  orderStatus: 'undefined',
-};
+export const Loading = {
+  args: {
+    status: 'pending',
+    completed: false,
+  },
+};
\ No newline at end of file
diff --git a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.styles.ts b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.styles.ts
index e94340ee8..7165c866a 100644
--- a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.styles.ts
+++ b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.styles.ts
@@ -1,5 +1,5 @@
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
-import { orange, green, yellow } from '@material-ui/core/colors'
+import { orange, green, blue, yellow } from '@material-ui/core/colors'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -23,6 +23,11 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.grey[500],
       color: theme.palette.common.white,
     },
+    
+        refunded: {
+          backgroundColor: blue[500],
+          color: theme.palette.common.white,
+        },
     canceled: {
       backgroundColor: theme.palette.grey[500],
       color: theme.palette.common.white,
diff --git a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.tsx b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.tsx
index a74bcaceb..9a82ee765 100644
--- a/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.tsx
+++ b/frontend/src/components/design-library/atoms/status/payment-types-status/payment-status/payment-status.tsx
@@ -1,91 +1,86 @@
 import React from 'react';
-import { orange, green, yellow } from '@material-ui/core/colors';
-import Chip from '@material-ui/core/Chip';
-import { status } from '../../../../../../consts'
-import useStyles from './payment-status.styles'
+import useStyles from './payment-status.styles';
+import BaseStatus from '../../base-status/base-status';
+import {
+  CheckCircleOutlineTwoTone as ActiveIcon,
+  InfoSharp as InfoIcon,
+  HelpOutline as QuestionInfoIcon,
+  NotInterested as InactiveIcon,
+} from '@material-ui/icons';
 
-
-type statusProps = {
-  orderStatus: string;
+interface PaymentStatusProps {
+  status: string;
+  completed?: boolean;
 }
 
-type GetStatusProps = { label?: string, color?: 'open' | 'pending' | 'succeeded' | 'failed' | 'cancelled' | 'canceled' | 'expired' | 'unknown' }
-type GetStatus = (currentStatus:string) => GetStatusProps
-
-export default function PaymentStatus({ orderStatus }:statusProps) {
+const PaymentStatus: React.FC<PaymentStatusProps> = ({
+  status,
+  completed = true,
+}) => {
   const classes = useStyles();
 
-  const getStatus:GetStatus = (currentStatus:string) => {
-    const { order } = status;
-    let choosenStatus:GetStatusProps = {};
-    switch (currentStatus) {
-      case `${order.open}`:
-        choosenStatus = {
-          label: 'Open',
-          color: 'open',
-        };
-      break;
-      case `${order.pending}`:
-        choosenStatus = {
-          label: 'Pending',
-          color: 'pending',
-        };
-      break;
-      case `${order.succeeded}`:
-        choosenStatus = {
-          label: 'Succeeded',
-          color: 'succeeded',
-        };
-      break;
-      case order.failed:
-        choosenStatus = {
-          label: 'Failed',
-          color: 'failed',
-        };
-      break;
-      case order.fail:
-        choosenStatus = {
-          label: 'Failed',
-          color: 'failed',
-        };
-      break;
-      case order.expired:
-        choosenStatus = {
-          label: 'Expired',
-          color: 'expired',
-        };
-      break;
-      case order.cancelled:
-        choosenStatus = {
-          label: 'Cancelled',
-          color: 'failed',
-        };
-      break;
-      case order.canceled:
-        choosenStatus = {
-          label: 'Cancelled',
-          color: 'failed',
-        };
-      break;
-      case order.refunded:
-        choosenStatus = {
-          label: 'Refunded',
-          color: 'expired',
-        };
-      break;
-      default:
-        choosenStatus = {
-          label: 'unknown',
-          color: 'unknown',
-        };
-      break;
-    }
-    return choosenStatus;
-  }
-
-  const currentStatus = getStatus(orderStatus)
+  const statusList = [
+    {
+      status: 'open',
+      label: 'Open',
+      color: 'open',
+      icon: <InfoIcon className={classes.open} />,
+    },
+    {
+      status: 'pending',
+      label: 'Pending',
+      color: 'pending',
+      icon: <InfoIcon className={classes.pending} />,
+      message: 'Your payment is pending. Please wait while we process it.',
+    },
+    {
+      status: 'succeeded',
+      label: 'Succeeded',
+      color: 'succeeded',
+      icon: <ActiveIcon className={classes.succeeded} />,
+    },
+    {
+      status: 'failed',
+      label: 'Failed',
+      color: 'failed',
+      icon: <InactiveIcon className={classes.failed} />,
+      message: 'Your payment has failed. Please try again or contact support.',
+    },
+    {
+      status: 'expired',
+      label: 'Expired',
+      color: 'expired',
+      icon: <InactiveIcon className={classes.expired} />,
+    },
+    {
+      status: 'canceled',
+      label: 'Canceled',
+      color: 'canceled',
+      icon: <InactiveIcon className={classes.canceled} />,
+    },
+    {
+      status: 'refunded',
+      label: 'Refunded',
+      color: 'refunded',
+      icon: <InfoIcon className={classes.refunded} />,
+    },
+    {
+      status: 'unknown',
+      label: 'Unknown',
+      color: 'unknown',
+      icon: <QuestionInfoIcon className={classes.unknown} />,
+      message: 'Your status is unknown. Please check back later.',
+    },
+  ];
 
   return (
-    <Chip size="small" label={currentStatus.label} className={classes[currentStatus.color]} />
+    <BaseStatus
+      status={status}
+      statusList={statusList}
+      classes={classes}
+      completed={completed}
+    />
   );
-}
+};
+
+export default PaymentStatus;