diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
new file mode 100644
index 000000000..974a1a57d
--- /dev/null
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.js
@@ -0,0 +1,89 @@
+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 { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+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 EstimateDetailActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { estimateId } = useEstimateDetailDrawerContext();
+
+  const history = useHistory();
+
+  // Handle edit sale estimate.
+  const onEditEstimate = () => {
+    return estimateId
+      ? (history.push(`/estimates/${estimateId}/edit`),
+        closeDrawer('estimate-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete sale estimate.
+  const onDeleteEstimate = () => {
+    return estimateId
+      ? (openAlert('estimate-delete', { estimateId }),
+        closeDrawer('estimate-detail-drawer'))
+      : null;
+  };
+
+  // Handle print estimate.
+  const onPrintEstimate = () => {
+    openDialog('estimate-pdf-preview', { estimateId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_estimate'} />}
+          onClick={safeCallback(onEditEstimate)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" />}
+          text={<T id={'print'} />}
+          onClick={safeCallback(onPrintEstimate)}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteEstimate)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+  withDrawerActions,
+)(EstimateDetailActionsBar);
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
index f5caf34c2..d8780c272 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { useEstimate } from 'hooks/query';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
 
 const EstimateDetailDrawerContext = React.createContext();
@@ -8,12 +9,19 @@ const EstimateDetailDrawerContext = React.createContext();
  * Estimate detail provider.
  */
 function EstimateDetailDrawerProvider({ estimateId, ...props }) {
+  // Fetches the estimate by the given id.
+  const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
+    estimateId,
+    { enabled: !!estimateId },
+  );
+
   const provider = {
     estimateId,
+    estimate,
   };
 
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isEstimateLoading}>
       <DrawerHeaderContent
         name="estimate-detail-drawer"
         title={intl.get('estimate_details')}
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
new file mode 100644
index 000000000..4ecd07d8f
--- /dev/null
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import { Card, DetailsMenu, DetailItem } from 'components';
+
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate drawer header.
+ */
+export default function EstimateDetailHeader({}) {
+  const {
+    estimate: {
+      formatted_amount,
+      estimate_number,
+      formatted_estimate_date,
+      formatted_expiration_date,
+      customer,
+      reference,
+    },
+  } = useEstimateDetailDrawerContext();
+
+  return (
+    <DetailsMenu>
+      <Card>
+        <div className="details-menu--vertical">
+          <DetailItem label={intl.get('amount')}>{formatted_amount}</DetailItem>
+          <DetailItem label={intl.get('estimate_number')}>
+            {estimate_number}
+          </DetailItem>
+          <DetailItem label={intl.get('customer_name')}>
+            {customer?.display_name}
+          </DetailItem>
+          <DetailItem label={intl.get('estimate_date')}>
+            {formatted_estimate_date}
+          </DetailItem>
+          <DetailItem label={intl.get('expiration_date')}>
+            {formatted_expiration_date}
+          </DetailItem>
+          <DetailItem label={intl.get('reference')}>
+            {defaultTo(reference, '--')}
+          </DetailItem>
+        </div>
+      </Card>
+    </DetailsMenu>
+  );
+}
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTab.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTab.js
index 2de289201..096459168 100644
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTab.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTab.js
@@ -1,89 +1,14 @@
 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 { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
-
-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 EstimateDetailTab({
-  // #withDialogActions
-  openDialog,
-
-  // #withAlertsActions
-  openAlert,
-
-  // #withDrawerActions
-  closeDrawer,
-}) {
-  const history = useHistory();
-
-  const { estimateId } = useEstimateDetailDrawerContext();
-
-  // Handle edit sale estimate.
-  const onEditEstimate = () => {
-    return estimateId
-      ? (history.push(`/estimates/${estimateId}/edit`),
-        closeDrawer('estimate-detail-drawer'))
-      : null;
-  };
-
-  // Handle delete sale estimate.
-  const onDeleteEstimate = () => {
-    return estimateId
-      ? (openAlert('estimate-delete', { estimateId }),
-        closeDrawer('estimate-detail-drawer'))
-      : null;
-  };
-
-  // Handle print estimate.
-  const onPrintEstimate = () => {
-    openDialog('estimate-pdf-preview', { estimateId });
-  };
+import EstimateDetailActionsBar from './EstimateDetailActionsBar';
+import EstimateDetailHeader from './EstimateDetailHeader';
+import EstimateDetailTable from './EstimateDetailTable';
 
+export default function EstimateDetailTab() {
   return (
-    <DashboardActionsBar>
-      <NavbarGroup>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="pen-18" />}
-          text={<T id={'edit_estimate'} />}
-          onClick={safeCallback(onEditEstimate)}
-        />
-        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" />}
-          text={<T id={'print'} />}
-          onClick={safeCallback(onPrintEstimate)}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon={'trash-16'} iconSize={16} />}
-          text={<T id={'delete'} />}
-          intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteEstimate)}
-        />
-      </NavbarGroup>
-    </DashboardActionsBar>
+    <div>
+      <EstimateDetailActionsBar />
+      <EstimateDetailHeader />
+      <EstimateDetailTable />
+    </div>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withAlertsActions,
-  withDrawerActions,
-)(EstimateDetailTab);
diff --git a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
new file mode 100644
index 000000000..74471ec22
--- /dev/null
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { DataTable, Card } from 'components';
+
+import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
+
+/**
+ * Estimate detail table.
+ */
+export default function EstimateDetailTable() {
+  const {
+    estimate: { entries },
+  } = useEstimateDetailDrawerContext();
+
+  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>
+  );
+}