diff --git a/src/components/FMultiSelect/BranchesMultiSelect.js b/src/components/Branches/BranchMultiSelect.js
similarity index 74%
rename from src/components/FMultiSelect/BranchesMultiSelect.js
rename to src/components/Branches/BranchMultiSelect.js
index 34b92e8b6..787f52eb7 100644
--- a/src/components/FMultiSelect/BranchesMultiSelect.js
+++ b/src/components/Branches/BranchMultiSelect.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
-import { MultiSelect as FMultiSelect } from 'blueprint-formik';
+import { FMultiSelect } from '../Forms';
 
 /**
  *
@@ -17,7 +17,7 @@ const branchItemPredicate = (query, branch, _index, exactMatch) => {
   if (exactMatch) {
     return normalizedTitle === normalizedQuery;
   } else {
-    return `${branch.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    return `${branch.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
   }
 };
 
@@ -32,17 +32,17 @@ const branchItemRenderer = (
   { handleClick, modifiers, query },
   { isSelected },
 ) => {
-  const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`;
+  // const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`;
 
   return (
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      icon={modifiers.selected ? 'tick' : 'blank'}
+      icon={isSelected ? 'tick' : 'blank'}
+      text={branch.name.toString()}
       label={branch.name.toString()}
       key={branch.id}
       onClick={handleClick}
-      text={text}
     />
   );
 };
@@ -55,6 +55,11 @@ const branchSelectProps = {
   tagRenderer: (item) => item.name,
 };
 
-export function BranchesMultiSelect({ branches, ...rest }) {
+/**
+ * branches mulit select.
+ * @param {*} param0
+ * @returns
+ */
+export function BranchMultiSelect({ branches, ...rest }) {
   return <FMultiSelect items={branches} {...branchSelectProps} {...rest} />;
 }
diff --git a/src/components/Branches/index.js b/src/components/Branches/index.js
index a4f97cb33..b9c3a7b24 100644
--- a/src/components/Branches/index.js
+++ b/src/components/Branches/index.js
@@ -1 +1,2 @@
-export * from './BranchSelect';
\ No newline at end of file
+export * from './BranchSelect';
+export * from './BranchMultiSelect'
\ No newline at end of file
diff --git a/src/components/FMultiSelect/index.js b/src/components/FMultiSelect/index.js
deleted file mode 100644
index e7edbee10..000000000
--- a/src/components/FMultiSelect/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './BranchesMultiSelect';
diff --git a/src/components/Forms/BlueprintFormik.js b/src/components/Forms/BlueprintFormik.js
index 40cffbbaf..7ea7fee9c 100644
--- a/src/components/Forms/BlueprintFormik.js
+++ b/src/components/Forms/BlueprintFormik.js
@@ -5,6 +5,7 @@ import {
   Checkbox,
   RadioGroup,
   Select,
+  MultiSelect
 } from 'blueprint-formik';
 
 export {
@@ -14,4 +15,5 @@ export {
   Checkbox as FCheckbox,
   RadioGroup as FRadioGroup,
   Select as FSelect,
+  MultiSelect as FMultiSelect
 };
diff --git a/src/components/index.js b/src/components/index.js
index 5ebdd5c83..29023a1b1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -101,7 +101,6 @@ export * from './FeatureGuard';
 export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
-export * from './FMultiSelect'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
index addc26e63..3acdc28eb 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -88,7 +88,7 @@ function BalanceSheetHeader({
             />
             <Tab
               id="dimensions"
-              title={'dimensions'}
+              title={'Dimensions'}
               panel={<BalanceSheetHeaderDimensionsPanel />}
             />
           </Tabs>
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
index 5c162f62e..dfc0ea698 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
@@ -1,24 +1,33 @@
 import React from 'react';
-import { Button } from '@blueprintjs/core';
-import { BranchesMultiSelect } from 'components';
-
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, FieldHint, Row, Col } from 'components';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 import { useBranches } from 'hooks/query';
 
+/**
+ * Balance sheet header dismension panel.
+ * @returns
+ */
 function BalanceSheetHeaderDimensionsPanel() {
   // Fetches the branches list.
-  const {
-    isLoading: isBranchesLoading,
-    isFetching: isBranchesFetching,
-    data: branches,
-  } = useBranches();
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
   return (
-    <div>
-      <BranchesMultiSelect
-        name={'branchesIds'}
-        branches={branches}
-        popoverProps={{ minimal: true }}
-      />
-    </div>
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={'Branches'}
+          labelInfo={<FieldHint />}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect
+            name={'branchesIds'}
+            branches={branches}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
   );
 }