diff --git a/src/containers/FinancialStatements/PurchasesByItems/components.js b/src/containers/FinancialStatements/PurchasesByItems/components.js
index 080ad6fcf..e18f01a14 100644
--- a/src/containers/FinancialStatements/PurchasesByItems/components.js
+++ b/src/containers/FinancialStatements/PurchasesByItems/components.js
@@ -7,6 +7,7 @@ import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { getColumnWidth } from 'utils';
+import { Align } from 'common';
 
 /**
  * Retrieve purchases by items table columns.
@@ -35,6 +36,7 @@ export const usePurchasesByItemsTableColumns = () => {
           minWidth: 150,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('purchase_amount'),
@@ -45,6 +47,7 @@ export const usePurchasesByItemsTableColumns = () => {
           minWidth: 150,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('average_price'),
@@ -55,6 +58,7 @@ export const usePurchasesByItemsTableColumns = () => {
           minWidth: 180,
         }),
         textOverview: true,
+        align: Align.Right,
       },
     ],
     [tableRows],
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
index f9d430738..86ce8b8a1 100644
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useSalesByItems, useItems } from 'hooks/query';
+import { useSalesByItems } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const SalesByItemsContext = createContext();
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItems.js b/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
index 81b0d8dc0..57c3c5e9e 100644
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
@@ -1,35 +1,29 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/SalesAndPurchasesSheet.scss';
-
 import { SalesByItemProvider } from './SalesByItemProvider';
 import SalesByItemsActionsBar from './SalesByItemsActionsBar';
 import SalesByItemsHeader from './SalesByItemsHeader';
-import SalesByItemsTable from './SalesByItemsTable';
+import { SalesByItemsBody } from './SalesByItemsBody';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { SalesByItemsLoadingBar } from './components';
+import { FinancialStatement } from 'components';
 
 import withSalesByItemsActions from './withSalesByItemsActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 
+import { getDefaultSalesByItemsQuery } from './utils';
 import { compose } from 'utils';
 
 /**
  * Sales by items.
  */
 function SalesByItems({
-  // #withPreferences
-  organizationName,
-
   // #withSellsByItemsActions
   toggleSalesByItemsFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
+    ...getDefaultSalesByItemsQuery(),
   });
 
   // Handle filter form submit.
@@ -69,23 +63,16 @@ function SalesByItems({
       <SalesByItemsLoadingBar />
 
       <DashboardPageContent>
-        <div class="financial-statement financial-statement--sales-by-items">
+        <FinancialStatement>
           <SalesByItemsHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-          <div class="financial-statement__body">
-            <SalesByItemsTable companyName={organizationName} />
-          </div>
-        </div>
+          <SalesByItemsBody />
+        </FinancialStatement>
       </DashboardPageContent>
     </SalesByItemProvider>
   );
 }
 
-export default compose(
-  withSalesByItemsActions,
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-)(SalesByItems);
+export default compose(withSalesByItemsActions)(SalesByItems);
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsBody.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsBody.js
new file mode 100644
index 000000000..69213c646
--- /dev/null
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsBody.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+
+import SalesByItemsTable from './SalesByItemsTable';
+
+import { useSalesByItemsContext } from './SalesByItemProvider';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+/**
+ *
+ * @returns {JSX.Element}
+ */
+function SalesByItemsBodyJSX({
+  // #withCurrentOrganization
+  organizationName,
+}) {
+  const { isLoading } = useSalesByItemsContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <SalesByItemsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const SalesByItemsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(SalesByItemsBodyJSX);
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js
index c8569498c..2ded60fa3 100644
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js
@@ -6,6 +6,9 @@ import { DataTable, FinancialSheet } from 'components';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import { useSalesByItemsTableColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
+
 /**
  * Sales by items data table.
  */
@@ -19,20 +22,6 @@ export default function SalesByItemsTable({ companyName }) {
   // Sales by items table columns.
   const columns = useSalesByItemsTableColumns();
 
-  const rowClassNames = (row) => {
-    const { original } = row;
-    const rowTypes = Array.isArray(original.rowType)
-      ? original.rowType
-      : [original.rowType];
-
-    return {
-      ...rowTypes.reduce((acc, rowType) => {
-        acc[`row_type--${rowType}`] = rowType;
-        return acc;
-      }, {}),
-    };
-  };
-
   return (
     <FinancialSheet
       companyName={companyName}
@@ -43,17 +32,17 @@ export default function SalesByItemsTable({ companyName }) {
       loading={isLoading}
     >
       <DataTable
-        className="bigcapital-datatable--financial-report"
         columns={columns}
         data={tableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
         sticky={true}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noResults={intl.get(
           'there_were_no_sales_during_the_selected_date_range',
         )}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
diff --git a/src/containers/FinancialStatements/SalesByItems/components.js b/src/containers/FinancialStatements/SalesByItems/components.js
index 1ca756ad9..33717374e 100644
--- a/src/containers/FinancialStatements/SalesByItems/components.js
+++ b/src/containers/FinancialStatements/SalesByItems/components.js
@@ -1,18 +1,18 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import { Button } from '@blueprintjs/core';
+
 import { getColumnWidth } from 'utils';
-import { If, Icon } from 'components';
+import { If } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useSalesByItemsContext } from './SalesByItemProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { Align } from 'common';
+
 /**
  * Retrieve sales by items table columns.
  */
 export const useSalesByItemsTableColumns = () => {
-  
-
   //sales by items context.
   const {
     salesByItems: { tableRows },
@@ -36,6 +36,7 @@ export const useSalesByItemsTableColumns = () => {
           minWidth: 150,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('sold_amount'),
@@ -46,6 +47,7 @@ export const useSalesByItemsTableColumns = () => {
           minWidth: 150,
         }),
         textOverview: true,
+        align: Align.Right,
       },
       {
         Header: intl.get('average_price'),
@@ -56,6 +58,7 @@ export const useSalesByItemsTableColumns = () => {
           minWidth: 150,
         }),
         textOverview: true,
+        align: Align.Right,
       },
     ],
     [tableRows],
diff --git a/src/containers/FinancialStatements/SalesByItems/utils.js b/src/containers/FinancialStatements/SalesByItems/utils.js
new file mode 100644
index 000000000..3ae064b96
--- /dev/null
+++ b/src/containers/FinancialStatements/SalesByItems/utils.js
@@ -0,0 +1,9 @@
+import moment from 'moment';
+
+export const getDefaultSalesByItemsQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  };
+};