diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
index 0816976d2..b1ab566c3 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
@@ -10,7 +10,7 @@ import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
  * Receipt view detail.
  */
 export default function ReceiptDetail() {
-  const { transactions, receiptId } = useReceiptDetailDrawerContext();
+  const { transactions } = useReceiptDetailDrawerContext();
 
   return (
     <div className="view-detail-drawer">
@@ -18,7 +18,7 @@ export default function ReceiptDetail() {
         <Tab
           title={intl.get('details')}
           id={'details'}
-          panel={<ReceiptDetailTab receiptId={receiptId} />}
+          panel={<ReceiptDetailTab />}
         />
         <Tab
           title={intl.get('journal_entries')}
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
new file mode 100644
index 000000000..eb2eae415
--- /dev/null
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+import { safeCallback, compose } from 'utils';
+
+function ReceiptDetailActionBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+  const { receiptId } = useReceiptDetailDrawerContext();
+
+  // Handle edit sale receipt.
+  const onEditReceipt = () => {
+    return receiptId
+      ? (history.push(`/receipts/${receiptId}/edit`),
+        closeDrawer('receipt-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete sale receipt.
+  const onDeleteReceipt = () => {
+    return receiptId
+      ? (openAlert('receipt-delete', { receiptId }),
+        closeDrawer('receipt-detail-drawer'))
+      : null;
+  };
+  // Handle print receipt.
+  const onPrintReceipt = () => {
+    openDialog('receipt-pdf-preview', { receiptId });
+  };
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_receipt'} />}
+          onClick={safeCallback(onEditReceipt)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" />}
+          text={<T id={'print'} />}
+          onClick={safeCallback(onPrintReceipt)}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteReceipt)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(ReceiptDetailActionBar);
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
index 46f05ed01..57dfd8d43 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
-import { useTransactionsByReference } from 'hooks/query';
+import { useTransactionsByReference, useReceipt } from 'hooks/query';
 
 // useTransactionsByReference
 const ReceiptDetailDrawerContext = React.createContext();
@@ -10,6 +10,14 @@ const ReceiptDetailDrawerContext = React.createContext();
  * Receipt detail provider.
  */
 function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
+  // Fetch sale receipt details.
+  const { data: receipt, isFetching: isReceiptLoading } = useReceipt(
+    receiptId,
+    {
+      enabled: !!receiptId,
+    },
+  );
+
   // Handle fetch transaction by reference.
   const {
     data: { transactions },
@@ -26,10 +34,11 @@ function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
   const provider = {
     transactions,
     receiptId,
+    receipt,
   };
 
   return (
-    <DashboardInsider loading={isTransactionLoading}>
+    <DashboardInsider loading={isTransactionLoading || isReceiptLoading}>
       <DrawerHeaderContent
         name="receipt-detail-drawer"
         title={intl.get('receipt_details')}
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
new file mode 100644
index 000000000..13d1e54f4
--- /dev/null
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Card, DetailsMenu, DetailItem } from 'components';
+
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+/**
+ * receipt detail content.
+ */
+export default function ReceiptDetailHeader() {
+  const {
+    receipt: {
+      formatted_amount,
+      receipt_no,
+      customer,
+      deposit_account,
+      formatted_receipt_date,
+      formatted_closed_at_date,
+      entries,
+    },
+  } = useReceiptDetailDrawerContext();
+
+  return (
+    <DetailsMenu>
+      <Card>
+        <div className="details-menu--vertical">
+          <DetailItem label={intl.get('amount')}>{formatted_amount}</DetailItem>
+          <DetailItem label={intl.get('receipt_no')}>{receipt_no}</DetailItem>
+          <DetailItem label={intl.get('customer_name')}>
+            {customer?.display_name}
+          </DetailItem>
+          <DetailItem label={intl.get('deposit_account')}>
+            {deposit_account?.name}
+          </DetailItem>
+          <DetailItem label={intl.get('receipt_date')}>
+            {formatted_receipt_date}
+          </DetailItem>
+          <DetailItem label={intl.get('closed_date')}>
+            {formatted_closed_at_date}
+          </DetailItem>
+        </div>
+      </Card>
+    </DetailsMenu>
+  );
+}
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
index 07e4b690a..20ca1b65e 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js
@@ -1,85 +1,14 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import ReceiptDetailActionBar from './ReceiptDetailActionBar';
+import ReceiptDetailHeader from './ReceiptDetailHeader';
+import ReceiptDetailTable from './ReceiptDetailTable';
 
-import {
-  Button,
-  NavbarGroup,
-  Classes,
-  NavbarDivider,
-  Intent,
-} from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { Icon, FormattedMessage as T } from 'components';
-
-import { safeCallback, compose } from 'utils';
-
-function ReceiptDetailTab({
-  receiptId,
-  // #withDialogActions
-  openDialog,
-
-  // #withAlertsActions
-  openAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const history = useHistory();
-
-  // Handle edit sale receipt.
-  const onEditReceipt = () => {
-    return receiptId
-      ? (history.push(`/receipts/${receiptId}/edit`),
-        closeDrawer('receipt-detail-drawer'))
-      : null;
-  };
-
-  // Handle delete sale receipt.
-  const onDeleteReceipt = () => {
-    return receiptId
-      ? (openAlert('receipt-delete', { receiptId }),
-        closeDrawer('receipt-detail-drawer'))
-      : null;
-  };
-  // Handle print receipt.
-  const onPrintReceipt = () => {
-    openDialog('receipt-pdf-preview', { receiptId });
-  };
+export default function ReceiptDetailTab() {
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_receipt'} />}
-          onClick={safeCallback(onEditReceipt)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={safeCallback(onPrintReceipt)}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteReceipt)}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <div>
+      <ReceiptDetailActionBar />
+      <ReceiptDetailHeader />
+      <ReceiptDetailTable />
+    </div>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withDrawerActions,
-  withAlertsActions,
-)(ReceiptDetailTab);
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js
new file mode 100644
index 000000000..db2001b04
--- /dev/null
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTable.js
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import intl from 'react-intl-universal';
+
+import { DataTable, Card, DetailsMenu, DetailItem } from 'components';
+
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
+export default function ReceiptDetailTable() {
+  const {
+    receipt: { entries },
+  } = useReceiptDetailDrawerContext();
+
+  const columns = React.useMemo(() => [
+    {
+      Header: intl.get('product_and_service'),
+      accessor: 'item.name',
+      width: 150,
+    },
+    {
+      Header: intl.get('description'),
+      accessor: 'description',
+    },
+    {
+      Header: intl.get('quantity'),
+      accessor: 'quantity',
+      width: 100,
+    },
+    {
+      Header: intl.get('rate'),
+      accessor: 'rate',
+      width: 100,
+    },
+    {
+      Header: intl.get('amount'),
+      accessor: 'amount',
+      width: 100,
+    },
+  ]);
+
+  return (
+    <Card>
+      <DataTable columns={columns} data={entries} />
+    </Card>
+  );
+}
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index e98174d20..59ca411b9 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1209,5 +1209,6 @@
   "invoice_preview.dialog.title": "Invoice PDF Preview",
   "estimate_preview.dialog.title":"Estimate PDF Preview",
   "receipt_preview.dialog.title":"Receipt PDF Preview",
-  "edit_contact":"Edit {name}"
+  "edit_contact":"Edit {name}",
+  "closed_date":"Closed date"
 }
\ No newline at end of file