diff --git a/src/common/tables.js b/src/common/tables.js
index 2e5e51ba8..6f0bf1fce 100644
--- a/src/common/tables.js
+++ b/src/common/tables.js
@@ -13,3 +13,9 @@ export const TABLES = {
   MANUAL_JOURNALS: 'manual_journal',
   EXPENSES: 'expenses',
 };
+
+export const TABLE_SIZE = {
+  COMPACT: 'compact',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+}
\ No newline at end of file
diff --git a/src/components/DataTable.js b/src/components/DataTable.js
index 6a1b76952..c7489a800 100644
--- a/src/components/DataTable.js
+++ b/src/components/DataTable.js
@@ -196,7 +196,7 @@ export default function DataTable(props) {
 
 DataTable.defaultProps = {
   pagination: false,
-  size: 'medium',
+  size: null,
   spinnerProps: { size: 30 },
 
   expandToggleColumn: 1,
diff --git a/src/components/Datatable/TableWrapper.js b/src/components/Datatable/TableWrapper.js
index 6b1b74726..78646ea03 100644
--- a/src/components/Datatable/TableWrapper.js
+++ b/src/components/Datatable/TableWrapper.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import classNames from 'classnames';
+import clsx from 'classnames';
 import { ScrollSync } from 'react-scroll-sync';
 import TableContext from './TableContext';
 
@@ -22,19 +22,20 @@ export default function TableWrapper({ children }) {
 
   return (
     <div
-      className={classNames('bigcapital-datatable', className, {
+      className={clsx('bigcapital-datatable', className, {
         'has-sticky': sticky,
         'has-pagination': pagination,
         'is-expandable': expandable,
         'is-loading': loading,
         'has-virtualized-rows': virtualizedRows,
-        [`table-size--${size}`]: size,
       })}
     >
       <ScrollSync>
         <div
           {...getTableProps({ style: { minWidth: 'none' } })}
-          className="table"
+          className={clsx('table', {
+            [`table-size--${size}`]: size,
+          })}
         >
           {children}
         </div>
diff --git a/src/style/components/DataTable/DataTable.scss b/src/style/components/DataTable/DataTable.scss
index 62bbdc146..9c28ffe00 100644
--- a/src/style/components/DataTable/DataTable.scss
+++ b/src/style/components/DataTable/DataTable.scss
@@ -273,6 +273,21 @@
       display: flex;
       width: 100%;
     }
+
+    &-size{
+
+      &--medium{
+        .tbody .tr{
+          background-size: red;
+          min-height: 46px;
+        }
+      }
+      &--small{
+        .tbody .tr{
+          min-height: 40px;
+        }
+      }
+    }
   }
 
   .no-results {
@@ -335,6 +350,9 @@
   .ReactVirtualized__Grid {
     will-change: auto !important;
   }
+
+
+  
 }
 
 .table-constrant {
diff --git a/src/style/pages/Items/List.scss b/src/style/pages/Items/List.scss
index df1a9e76e..5be7f2fed 100644
--- a/src/style/pages/Items/List.scss
+++ b/src/style/pages/Items/List.scss
@@ -6,9 +6,6 @@
   .bigcapital-datatable {
     .table {
       .tbody {
-        .tr{
-          min-height: 46px;
-        }
         .item_type.td {
           .bp3-tag {
             font-size: 13px;
diff --git a/src/style/pages/SaleInvoice/List.scss b/src/style/pages/SaleInvoice/List.scss
index 68fcd4b6e..21e0328b1 100644
--- a/src/style/pages/SaleInvoice/List.scss
+++ b/src/style/pages/SaleInvoice/List.scss
@@ -4,9 +4,6 @@
 
   .bigcapital-datatable{
     .tbody{
-      .tr{
-        min-height: 46px;
-      }
       .balance.td{
 
         .cell-inner{