diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
index ae95f55ac..a952c9a75 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
@@ -4,6 +4,7 @@ import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
@@ -11,8 +12,8 @@ import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
 import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { compose } from 'utils';
 import { transformToForm } from '../../../utils';
+import { compose } from 'utils';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -72,7 +73,7 @@ function APAgingSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <APAgingDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -99,7 +100,7 @@ function APAgingSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </APAgingDrawerHeader>
   );
 }
 
@@ -109,3 +110,9 @@ export default compose(
     isFilterDrawerOpen: APAgingSummaryFilterDrawer,
   })),
 )(APAgingSummaryHeader);
+
+const APAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
index b8ea2fa97..124bf3b45 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
@@ -4,6 +4,7 @@ import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
@@ -57,14 +58,12 @@ function ARAgingSummaryHeader({
     },
     defaultValues,
   );
-
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
@@ -75,7 +74,7 @@ function ARAgingSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <ARAgingDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -103,7 +102,7 @@ function ARAgingSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </ARAgingDrawerHeader>
   );
 }
 
@@ -113,3 +112,9 @@ export default compose(
     isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
 )(ARAgingSummaryHeader);
+
+const ARAgingDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index c576adceb..05724c988 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -64,9 +66,11 @@ function BalanceSheetHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <BalanceSheetFinancialHeader
       isOpen={balanceSheetDrawerFilter}
-      drawerProps={{ onClose: handleDrawerClose }}
+      drawerProps={{
+        onClose: handleDrawerClose,
+      }}
     >
       <Formik
         initialValues={initialValues}
@@ -97,7 +101,7 @@ function BalanceSheetHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </BalanceSheetFinancialHeader>
   );
 }
 
@@ -107,3 +111,9 @@ export default compose(
   })),
   withBalanceSheetActions,
 )(BalanceSheetHeader);
+
+const BalanceSheetFinancialHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
index 8f74bc42b..79764b292 100644
--- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
+++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
@@ -3,6 +3,8 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -30,7 +32,6 @@ function CustomersBalanceSummaryHeader({
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
   });
-
   // Default form values.
   const defaultValues = {
     ...pageFilter,
@@ -47,21 +48,19 @@ function CustomersBalanceSummaryHeader({
     },
     defaultValues,
   );
-
   // handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleCustomerBalanceFilterDrawer(false);
     setSubmitting(false);
   };
-
   // handle close drawer.
   const handleDrawerClose = () => {
     toggleCustomerBalanceFilterDrawer(false);
   };
 
   return (
-    <FinancialStatementHeader
+    <CustomerBalanceDrawerHeader
       isOpen={customersBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -89,7 +88,7 @@ function CustomersBalanceSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </CustomerBalanceDrawerHeader>
   );
 }
 
@@ -99,3 +98,9 @@ export default compose(
   })),
   withCustomersBalanceSummaryActions,
 )(CustomersBalanceSummaryHeader);
+
+const CustomerBalanceDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
index bcfd1774e..1cb24fe08 100644
--- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
+++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
@@ -5,6 +5,7 @@ import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
+import styled from 'styled-components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel';
@@ -67,7 +68,7 @@ function CustomersTransactionsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <CustomerTransactionsDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -95,7 +96,7 @@ function CustomersTransactionsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </CustomerTransactionsDrawerHeader>
   );
 }
 
@@ -105,3 +106,9 @@ export default compose(
   })),
   withCustomersTransactionsActions,
 )(CustomersTransactionsHeader);
+
+const CustomerTransactionsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/FinancialStatementHeader.js b/src/containers/FinancialStatements/FinancialStatementHeader.js
index a1c66bfc5..44c5f2097 100644
--- a/src/containers/FinancialStatements/FinancialStatementHeader.js
+++ b/src/containers/FinancialStatements/FinancialStatementHeader.js
@@ -3,10 +3,15 @@ import classNames from 'classnames';
 import { Position, Drawer } from '@blueprintjs/core';
 import 'style/containers/FinancialStatements/DrawerHeader.scss';
 
+/**
+ * Financial statement header.
+ * @returns {JSX.Element}
+ */
 export default function FinancialStatementHeader({
   children,
   isOpen,
   drawerProps,
+  className,
 }) {
   const timeoutRef = React.useRef();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -42,6 +47,7 @@ export default function FinancialStatementHeader({
         {
           'is-hidden': !isDrawerOpen,
         },
+        className,
       )}
     >
       <Drawer
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
index 80b2de834..014789d3c 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -3,6 +3,8 @@ import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -68,7 +70,7 @@ function GeneralLedgerHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <GeneralLedgerDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -97,7 +99,7 @@ function GeneralLedgerHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </GeneralLedgerDrawerHeader>
   );
 }
 
@@ -107,3 +109,9 @@ export default compose(
   })),
   withGeneralLedgerActions,
 )(GeneralLedgerHeader);
+
+const GeneralLedgerDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
index 5f7a2d2a2..b230913f0 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
+++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
@@ -3,8 +3,10 @@ import * as Yup from 'yup';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
@@ -35,24 +37,23 @@ function InventoryItemDetailsHeader({
   };
 
   // Filter form initial values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
       .label(intl.get('toDate')),
   });
-;
-
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
@@ -61,10 +62,12 @@ function InventoryItemDetailsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
-  
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
+
   return (
-    <FinancialStatementHeader
+    <InventoryItemDetailsDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -91,7 +94,7 @@ function InventoryItemDetailsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </InventoryItemDetailsDrawerHeader>
   );
 }
 
@@ -101,3 +104,9 @@ export default compose(
   })),
   withInventoryItemDetailsActions,
 )(InventoryItemDetailsHeader);
+
+const InventoryItemDetailsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 400px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
index dfdfbf964..9aee81b30 100644
--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel';
@@ -38,11 +40,14 @@ function InventoryValuationHeader({
     itemsIds: [],
   };
   // Initial values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    ...defaultValues,
-    asDate: moment(pageFilter.asDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...pageFilter,
+      ...defaultValues,
+      asDate: moment(pageFilter.asDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Handle the form of header submit.
   const handleSubmit = (values, { setSubmitting }) => {
@@ -62,7 +67,7 @@ function InventoryValuationHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <InventoryValuationDrawerHeader
       isOpen={isFilterDrawerOpen}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -89,7 +94,7 @@ function InventoryValuationHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </InventoryValuationDrawerHeader>
   );
 }
 
@@ -99,3 +104,9 @@ export default compose(
   })),
   withInventoryValuationActions,
 )(InventoryValuationHeader);
+
+const InventoryValuationDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/Journal/JournalHeader.js b/src/containers/FinancialStatements/Journal/JournalHeader.js
index 6549d001f..5ec5472f2 100644
--- a/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -3,6 +3,8 @@ import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
 import * as Yup from 'yup';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
@@ -55,7 +57,7 @@ function JournalHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <JournalDrawerHeader
       isOpen={journalSheetDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -83,7 +85,7 @@ function JournalHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </JournalDrawerHeader>
   );
 }
 
@@ -93,3 +95,9 @@ export default compose(
   })),
   withJournalActions,
 )(JournalHeader);
+
+const JournalDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 350px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
index b94abca64..fc7b6dd82 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import { Formik, Form } from 'formik';
 import * as R from 'ramda';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
 
 import { FormattedMessage as T } from 'components';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -52,8 +53,8 @@ function ProfitLossHeader({
     toggleFilterDrawer(false);
   };
 
-  return ( 
-    <FinancialStatementHeader
+  return (
+    <ProfitLossSheetHeader
       isOpen={profitLossDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -86,7 +87,7 @@ function ProfitLossHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </ProfitLossSheetHeader>
   );
 }
 
@@ -96,3 +97,9 @@ export default R.compose(
   })),
   withProfitLossActions,
 )(ProfitLossHeader);
+
+const ProfitLossSheetHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 520px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
index 0ada94130..a5cedbd48 100644
--- a/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
+++ b/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel';
@@ -36,7 +38,6 @@ function PurchasesByItemsHeader({
       .required()
       .label(intl.get('to_date')),
   });
-
   // Default form values.
   const defaultValues = {
     ...pageFilter,
@@ -68,7 +69,7 @@ function PurchasesByItemsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <PurchasesByItemsDrawerHeader
       isOpen={purchasesByItemsDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -95,7 +96,7 @@ function PurchasesByItemsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </PurchasesByItemsDrawerHeader>
   );
 }
 
@@ -105,3 +106,9 @@ export default compose(
   })),
   withPurchasesByItemsActions,
 )(PurchasesByItemsHeader);
+
+const PurchasesByItemsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
index 059de708c..2e500ed5e 100644
--- a/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
+++ b/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import SalesByItemsHeaderGeneralPanel from './SalesByItemsHeaderGeneralPanel';
@@ -61,7 +63,7 @@ function SalesByItemsHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <SalesByItemsDrawerHeader
       isOpen={salesByItemsDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -88,7 +90,7 @@ function SalesByItemsHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </SalesByItemsDrawerHeader>
   );
 }
 
@@ -98,3 +100,9 @@ export default compose(
   })),
   withSalesByItemsActions,
 )(SalesByItemsHeader);
+
+const SalesByItemsDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
index 891b8e925..2dcd1d27a 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -22,9 +22,6 @@ import { compose } from 'utils';
  * Trial balance sheet.
  */
 function TrialBalanceSheet({
-  // #withPreferences
-  organizationName,
-
   // #withTrialBalanceSheetActions
   toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
@@ -44,7 +41,6 @@ function TrialBalanceSheet({
     },
     [setFilter],
   );
-
   // Handle numebr format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
index 77e993c85..83550e3ca 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
+import intl from 'react-intl-universal';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGeneralPanel';
@@ -59,13 +61,17 @@ function TrialBalanceSheetHeader({
     toggleFilterDrawer(false);
   };
   // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
 
   // Handle cancel button click.
-  const handleCancelClick = () => { toggleFilterDrawer(false); };
+  const handleCancelClick = () => {
+    toggleFilterDrawer(false);
+  };
 
   return (
-    <FinancialStatementHeader
+    <TrialBalanceSheetDrawerHeader
       isOpen={trialBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
@@ -93,7 +99,7 @@ function TrialBalanceSheetHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </TrialBalanceSheetDrawerHeader>
   );
 }
 
@@ -103,3 +109,9 @@ export default compose(
   })),
   withTrialBalanceActions,
 )(TrialBalanceSheetHeader);
+
+const TrialBalanceSheetDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;
diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
index 4dbbf10c1..057241099 100644
--- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
+++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
@@ -3,6 +3,8 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+
 import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
@@ -61,7 +63,7 @@ function VendorsBalanceSummaryHeader({
   };
 
   return (
-    <FinancialStatementHeader
+    <VendorBalanceDrawerHeader
       isOpen={VendorsSummaryFilterDrawer}
       drawerProps={{ onClose: handleCancelClick }}
     >
@@ -88,7 +90,7 @@ function VendorsBalanceSummaryHeader({
           </div>
         </Form>
       </Formik>
-    </FinancialStatementHeader>
+    </VendorBalanceDrawerHeader>
   );
 }
 
@@ -98,3 +100,9 @@ export default compose(
   })),
   withVendorsBalanceSummaryActions,
 )(VendorsBalanceSummaryHeader);
+
+const VendorBalanceDrawerHeader = styled(FinancialStatementHeader)`
+  .bp3-drawer {
+    max-height: 450px;
+  }
+`;