diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
index 140e72543..108b23779 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
@@ -2,6 +2,8 @@ import React from 'react';
 
 import ItemDetailActionsBar from './ItemDetailActionsBar';
 import ItemDetailHeader from './ItemDetailHeader';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { Card } from 'components';
 
@@ -12,7 +14,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-
+      <ItemPaymentTransactions />
       <Card>
         <ItemDetailHeader />
       </Card>
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
new file mode 100644
index 000000000..08a9f7fea
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { DataTable, Card, FormatDateCell } from '../../../../components';
+
+/**
+ * Bill payment transactions data table.
+ */
+export default function BillPaymentTransactions() {
+  const columns = React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('date'),
+        accessor: 'bill_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'bill_date',
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor_name'),
+        accessor: 'vendor.display_name',
+        width: 180,
+        className: 'vendor',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Purchase',
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+      },
+      {
+        id: 'total',
+        Header: intl.get('total'),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        // accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="payment-transactions">
+      <Card>
+        <DataTable
+          columns={columns}
+          data={[]}
+          // loading={}
+          // headerLoading={}
+          // progressBarLoading={}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
new file mode 100644
index 000000000..507c48249
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { DataTable, Card, FormatDateCell } from '../../../../components';
+
+/**
+ * Esimtate payment transactions datatable.
+ */
+export default function EstimatePaymentTransactions() {
+  const columns = React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('date'),
+        accessor: 'estimate_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 100,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'reference',
+        Header: intl.get('reference_no'),
+        accessor: 'reference',
+        width: 140,
+        className: 'reference',
+      },
+      {
+        id: 'customer_id',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+      },
+      {
+        id: 'total',
+        Header: intl.get('total'),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="payment-transactions">
+      <Card>
+        <DataTable
+          columns={columns}
+          data={[]}
+          // loading={}
+          // headerLoading={}
+          // progressBarLoading={}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
new file mode 100644
index 000000000..d0bd96ec9
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { DataTable, Card, FormatDateCell } from '../../../../components';
+
+/**
+ * Invoice payment transactions datatable.
+ */
+export default function InvoicePaymentTransactionsTable() {
+  const columns = React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('date'),
+        accessor: 'invoice_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_no',
+        width: 100,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 180,
+        className: 'customer_id',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+      },
+      {
+        id: 'total',
+        Header: intl.get('total'),
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        // accessor: (row) => statusAccessor(row),
+        width: 160,
+        className: 'status',
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="payment-transactions">
+      <Card>
+        <DataTable
+          columns={columns}
+          data={[]}
+          // loading={}
+          // headerLoading={}
+          // progressBarLoading={}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
new file mode 100644
index 000000000..2566266ef
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { DataTable, Card, FormatDateCell } from '../../../../components';
+
+/**
+ * Receipt payment transactions datatable.
+ */
+export default function ReceiptPaymentTransactions() {
+  const columns = React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('date'),
+        accessor: 'receipt_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receipt_number',
+        width: 140,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer_name'),
+        accessor: 'customer.display_name',
+        width: 140,
+        className: 'customer_id',
+        textOverview: true,
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+        textOverview: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        // accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+      },
+      {
+        id: 'total',
+        Header: intl.get('total'),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="payment-transactions">
+      <Card>
+        <DataTable
+          columns={columns}
+          data={[]}
+          // loading={}
+          // headerLoading={}
+          // progressBarLoading={}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
new file mode 100644
index 000000000..7c6b78828
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs } from 'components';
+import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+
+import ItemSwitchMenuItem from './utils';
+
+export const ItemPaymentTransactions = () => {
+  return (
+    <DrawerMainTabs>
+      <Tab
+        id={'invoice'}
+        title={'Invoice'}
+        panel={<InvoicePaymentTransactionsTable />}
+      />
+      <Tab
+        id={'estiamte'}
+        title={'Estimate'}
+        panel={<EstimatePaymentTransactionsTable />}
+      />
+      <Tab
+        id={'receipt'}
+        title={'Receipt'}
+        panel={<ReceiptPaymentTransactionsTable />}
+      />
+      <Tab
+        id={'bill'}
+        title={'Bill'}
+        panel={<BillPaymentTransactionsTable />}
+      />
+    </DrawerMainTabs>
+  );
+};
+
+{
+  /* <ItemSwitchMenuItem onChange={handleSwitch} /> */
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
new file mode 100644
index 000000000..783e6dde0
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  Popover,
+  Menu,
+  Position,
+  Button,
+  MenuItem,
+  Classes,
+  NavbarGroup,
+  PopoverInteractionKind,
+} from '@blueprintjs/core';
+import { Icon } from '../../../../components';
+import { curry } from 'lodash/fp';
+import { Select } from '@blueprintjs/select';
+
+function ItemSwitchMenuItem({ onChange }) {
+  const Transaction = [
+    { name: 'Invoice' },
+    { name: 'Estimate' },
+    { name: 'Bill' },
+    { name: 'Receipt' },
+  ];
+
+  const handleSwitchMenutItem = (item) => {
+    onChange && onChange(item);
+  };
+
+  const content = (
+    <Menu>
+      {Transaction.map((item) => (
+        <MenuItem
+          onClick={() => handleSwitchMenutItem(item.name)}
+          text={item.name}
+        />
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Popover
+      content={content}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      minimal={true}
+    >
+      <Button
+        minimal={true}
+        text="Select Service"
+        rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
+      />
+    </Popover>
+  );
+}
+
+export default ItemSwitchMenuItem;
diff --git a/src/containers/Drawers/ItemDetailDrawer/index.js b/src/containers/Drawers/ItemDetailDrawer/index.js
index af6ef5569..9cd4f3b42 100644
--- a/src/containers/Drawers/ItemDetailDrawer/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/index.js
@@ -19,7 +19,12 @@ function ItemDetailDrawer({
   payload: { itemId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <ItemDetailDrawerContent itemId={itemId} />
       </DrawerSuspense>
diff --git a/src/style/components/Drawers/ItemDrawer.scss b/src/style/components/Drawers/ItemDrawer.scss
index b97b84eaa..358e66e31 100644
--- a/src/style/components/Drawers/ItemDrawer.scss
+++ b/src/style/components/Drawers/ItemDrawer.scss
@@ -1,12 +1,10 @@
 .item-drawer {
-
   .card {
     margin: 15px;
     padding: 22px 15px;
   }
 
   &__content {
-
     .detail-item--name {
       width: 30%;
 
@@ -16,7 +14,6 @@
     }
 
     .detail-item--quantity {
-
       .detail-item__content {
         font-weight: 600;
 
@@ -32,7 +29,6 @@
     }
 
     .details-menu--horizantal {
-
       .detail-item:not(:first-of-type) {
         margin-top: 16px;
       }
@@ -42,4 +38,9 @@
       }
     }
   }
-}
\ No newline at end of file
+  .payment-transactions {
+    .card {
+      padding: 0 !important;
+    }
+  }
+}