diff --git a/src/components/FormTopbar.js b/src/components/FormTopbar.js
new file mode 100644
index 000000000..c6312b795
--- /dev/null
+++ b/src/components/FormTopbar.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+
+/**
+ * @param {*} children
+ * @returns
+ */
+export function FormTopbar({ className, children }) {
+  return <FormTopBarRoot className={className}>{children}</FormTopBarRoot>;
+}
+
+const FormTopBarRoot = styled(Navbar)`
+  box-shadow: 0 0 0;
+  border-bottom: 2px solid #dce5ea;
+  height: 35px;
+  padding: 0 20px;
+
+  .bp3-navbar-group {
+    height: 35px;
+  }
+  .bp3-navbar-divider {
+    border-left-color: #d2dce2;
+  }
+
+  .bp3-skeleton {
+    max-height: 10px;
+  }
+
+  .bp3-button {
+    &:hover {
+      background: rgba(167, 182, 194, 0.12);
+      color: #32304a;
+    }
+  }
+`;
+
+export const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+  height: 10px;
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 0fa29af93..1bcac86f2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -102,6 +102,7 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
+export * from './FormTopbar'
 
 const Hint = FieldHint;
 
diff --git a/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js b/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js
index 3604f9b35..f248c7ecf 100644
--- a/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js
+++ b/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js
@@ -2,19 +2,24 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import {
   useSetPrimaryBranchToForm,
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useBillFormContext } from './BillFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +43,7 @@ export default function BillFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <BillFormSelectBranch />
@@ -50,7 +55,7 @@ export default function BillFormTopBar() {
           <BillFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +112,3 @@ function BillBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js
index c135acb19..970601856 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js
@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -14,7 +13,14 @@ import {
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function VendorCreditNoteFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <VendorCreditNoteFormSelectBranch />
@@ -50,7 +56,7 @@ export default function VendorCreditNoteFormTopBar() {
           <VendorCreditFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +113,3 @@ function VendorCreditNoteBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js
index d70a651dc..cfdda9616 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js
@@ -10,7 +10,13 @@ import {
 import styled from 'styled-components';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { Features } from 'common';
 
@@ -30,13 +36,13 @@ export default function PaymentMadeFormTopBar() {
     return null;
   }
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <PaymentMadeFormSelectBranch />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -66,12 +72,3 @@ function PaymentMadeBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js
index 7bc9b27a7..c73213f20 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js
@@ -2,19 +2,24 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import {
   useSetPrimaryBranchToForm,
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +43,7 @@ export default function CreditNoteFormTopbar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <CreditNoteFormSelectBranch />
@@ -50,7 +55,7 @@ export default function CreditNoteFormTopbar() {
           <CreditFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +112,3 @@ function CreditNoteBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js b/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js
index aaa2d12ec..84f709979 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js
@@ -2,7 +2,6 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -14,7 +13,14 @@ import {
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function EstimtaeFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <EstimateFormSelectBranch />
@@ -50,7 +56,7 @@ export default function EstimtaeFormTopBar() {
           <EstimateFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +113,3 @@ function EstimateBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
index b63aa5786..0588c9449 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
@@ -15,7 +15,13 @@ import {
 } from './utils';
 
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+} from 'components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function InvoiceFormTopBar() {
     return null;
   }
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <InvoiceFormSelectBranch />
@@ -50,7 +56,7 @@ export default function InvoiceFormTopBar() {
           <InvoiceFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js
index 3c94b6739..a66d48b1c 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Button,
-  Classes,
-} from '@blueprintjs/core';
-import styled from 'styled-components';
+import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { Features } from 'common';
 
@@ -31,13 +30,13 @@ export default function PaymentReceiveFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <PaymentReceiveFormSelectBranch />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -67,12 +66,3 @@ function PaymentReceiveBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
index 4fc2453d2..79310e87f 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
@@ -19,7 +19,7 @@ import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
 import ReceiptFormFooter from './ReceiptFormFooter';
 import ReceiptFormDialogs from './ReceiptFormDialogs';
-import ReceiptFormTopbar from './ReceiptFormTopbar';
+import ReceiptFormTopBar from './ReceiptFormTopBar';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -158,7 +158,7 @@ function ReceiptForm({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <ReceiptFormTopbar />
+          <ReceiptFormTopBar />
           <ReceiptFromHeader />
           <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />
diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js
index 357c7ab51..2f83d0323 100644
--- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js
+++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js
@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -15,7 +14,14 @@ import {
 } from './utils';
 
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { Features } from 'common';
 
@@ -23,7 +29,7 @@ import { Features } from 'common';
  * Receipt form topbar .
  * @returns {JSX.Element}
  */
-export default function ReceiptFormTopbar() {
+export default function ReceiptFormTopBar() {
   // Features guard.
   const { featureCan } = useFeatureCan();
 
@@ -39,7 +45,7 @@ export default function ReceiptFormTopbar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <ReceiptFormSelectBranch />
@@ -51,7 +57,7 @@ export default function ReceiptFormTopbar() {
           <ReceiptFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -116,12 +122,3 @@ function ReceiptWarehouseSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;
diff --git a/src/style/pages/Dashboard/Dashboard.scss b/src/style/pages/Dashboard/Dashboard.scss
index a4cd846cf..931d18f60 100644
--- a/src/style/pages/Dashboard/Dashboard.scss
+++ b/src/style/pages/Dashboard/Dashboard.scss
@@ -591,28 +591,3 @@ $dashboard-views-bar-height: 44px;
     }
   }
 }
-
-.navbar--dashboard-topbar {
-  box-shadow: 0 0 0;
-  border-bottom: 2px solid #dce5ea;
-  height: 35px;
-  padding: 0 20px;
-
-  .bp3-navbar-group {
-    height: 35px;
-  }
-  .bp3-navbar-divider {
-    border-left-color: #d2dce2;
-  }
-
-  .bp3-skeleton {
-    max-height: 10px;
-  }
-
-  .bp3-button {
-    &:hover {
-      background: rgba(167, 182, 194, 0.12);
-      color: #32304a;
-    }
-  }
-}
\ No newline at end of file