diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/index.js b/client/src/containers/Drawers/EstimateDetailDrawer/index.js
index f7aee682d..5f83833eb 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/index.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/index.js
@@ -15,7 +15,15 @@ function EstimateDetailDrawer({
   payload: { estimateId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <EstimateDetailDrawerContent estimate={estimateId} />
       </DrawerSuspense>
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index abd18f28c..4a9037206 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -10,20 +10,15 @@ import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
  * Invoice view detail.
  */
 export default function InvoiceDetail() {
-  const { transactions, invoiceId } = useInvoiceDetailDrawerContext();
+  const { transactions } = useInvoiceDetailDrawerContext();
 
   return (
     <div className="view-detail-drawer">
-      <Tabs
-        animate={true}
-        large={true}
-        defaultSelectedTabId="journal_entries"
-        renderActiveTabPanelOnly={false}
-      >
+      <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
         <Tab
           title={intl.get('details')}
           id={'details'}
-          panel={<InvoiceDetailTab invoiceId={invoiceId} />}
+          panel={<InvoiceDetailTab />}
         />
         <Tab
           title={intl.get('journal_entries')}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
new file mode 100644
index 000000000..c9375f6ea
--- /dev/null
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
@@ -0,0 +1,90 @@
+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 { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+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 InvoiceDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Handle edit sale invoice.
+  const onEditInvoice = () => {
+    return invoiceId
+      ? (history.push(`/invoices/${invoiceId}/edit`),
+        closeDrawer('invoice-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete sale invoice.
+  const onDeleteInvoice = () => {
+    return invoiceId
+      ? (openAlert('invoice-delete', { invoiceId }),
+        closeDrawer('invoice-detail-drawer'))
+      : null;
+  };
+
+  // Handle print invoices.
+  const onPrintInvoice = () => {
+    openDialog('invoice-pdf-preview', { invoiceId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_invoice'} />}
+          onClick={safeCallback(onEditInvoice)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" />}
+          text={<T id={'print'} />}
+          onClick={safeCallback(onPrintInvoice)}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteInvoice)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(InvoiceDetailActionsBar);
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index ac05e44dd..d19a5906e 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.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, useInvoice } from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
 /**
@@ -20,13 +20,19 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     { enabled: !!invoiceId },
   );
 
+  // Fetch sale invoice details.
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+
   //provider.
   const provider = {
     transactions,
     invoiceId,
+    invoice,
   };
   return (
-    <DashboardInsider loading={isTransactionLoading}>
+    <DashboardInsider loading={isTransactionLoading || isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
new file mode 100644
index 000000000..a556d8eff
--- /dev/null
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { Card, DetailsMenu, DetailItem } from 'components';
+
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice detail header.
+ */
+export default function InvoiceDetailHeader() {
+  const {
+    invoice: {
+      formatted_amount,
+      invoice_no,
+      customer,
+      formatted_invoice_date,
+      formatted_due_date,
+      formatted_due_amount,
+    },
+  } = useInvoiceDetailDrawerContext();
+
+  return (
+    <DetailsMenu>
+      <Card>
+        <div className="details-menu--vertical">
+          <DetailItem label={intl.get('amount')}>{formatted_amount}</DetailItem>
+          <DetailItem label={intl.get('invoice_no')}>{invoice_no}</DetailItem>
+          <DetailItem label={intl.get('customer_name')}>
+            {customer?.display_name}
+          </DetailItem>
+          <DetailItem label={intl.get('invoice_date')}>
+            {formatted_invoice_date}
+          </DetailItem>
+          <DetailItem label={intl.get('due_amount')}>
+            {formatted_due_amount}
+          </DetailItem>
+          <DetailItem label={intl.get('due_date')}>
+            {formatted_due_date}
+          </DetailItem>
+        </div>
+      </Card>
+    </DetailsMenu>
+  );
+}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
index 8dbaf7cec..8ea4a800c 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
@@ -1,89 +1,16 @@
 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 { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
-
-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 InvoiceDetailTab({
-  invoiceId,
-  // #withDialogActions
-  openDialog,
-
-  // #withAlertsActions
-  openAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const history = useHistory();
-
-  // Handle edit sale invoice.
-  const onEditInvoice = () => {
-    return invoiceId
-      ? (history.push(`/invoices/${invoiceId}/edit`),
-        closeDrawer('invoice-detail-drawer'))
-      : null;
-  };
-
-  // Handle delete sale invoice.
-  const onDeleteInvoice = () => {
-    return invoiceId
-      ? (openAlert('invoice-delete', { invoiceId }),
-        closeDrawer('invoice-detail-drawer'))
-      : null;
-  };
-
-  // Handle print invoices.
-  const onPrintInvoice = () => {
-    openDialog('invoice-pdf-preview', { invoiceId });
-  };
+import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
+import InvoiceDetailHeader from './InvoiceDetailHeader';
+import InvoiceDetailTable from './InvoiceDetailTable';
 
+function InvoiceDetailTab() {
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_invoice'} />}
-          onClick={safeCallback(onEditInvoice)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={safeCallback(onPrintInvoice)}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteInvoice)}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <div>
+      <InvoiceDetailActionsBar />
+      <InvoiceDetailHeader />
+      <InvoiceDetailTable />
+    </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-  withDrawerActions,
-  withAlertsActions,
-)(InvoiceDetailTab);
+export default InvoiceDetailTab;
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
new file mode 100644
index 000000000..354c67f83
--- /dev/null
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable, Card } from 'components';
+
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+export default function InvoiceDetailTable() {
+  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,
+    },
+  ]);
+
+  const {
+    invoice: { entries },
+  } = useInvoiceDetailDrawerContext();
+
+  return (
+    <Card>
+      <DataTable columns={columns} data={entries} />
+    </Card>
+  );
+}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/index.js b/client/src/containers/Drawers/InvoiceDetailDrawer/index.js
index 35f1609ec..20d08eac0 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/index.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/index.js
@@ -18,7 +18,15 @@ function InvoiceDetailDrawer({
   payload: { invoiceId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <InvoiceDetailDrawerContent invoice={invoiceId} />
       </DrawerSuspense>