diff --git a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheet.ts b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheet.ts
index 8eab7581d..2fb7f2cf7 100644
--- a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheet.ts
+++ b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheet.ts
@@ -211,7 +211,7 @@ export class InventoryValuationSheet extends FinancialSheet {
    * Detarmines whether the items post filter is active.
    */
   private isItemsPostFilter = (): boolean => {
-    return isEmpty(this.query.itemsIds);
+    return !isEmpty(this.query.itemsIds);
   };
 
   /**
diff --git a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetService.ts b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetService.ts
index 059c6648d..560b77a8d 100644
--- a/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetService.ts
+++ b/packages/server/src/modules/FinancialStatements/modules/InventoryValuationSheet/InventoryValuationSheetService.ts
@@ -18,7 +18,7 @@ export class InventoryValuationSheetService {
     private readonly inventoryValuationMeta: InventoryValuationMetaInjectable,
     private readonly eventPublisher: EventEmitter2,
     private readonly inventoryValuationSheetRepository: InventoryValuationSheetRepository,
-  ) {}
+  ) { }
 
   /**
    * Inventory valuation sheet.
diff --git a/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheet.ts b/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheet.ts
index 9110920fc..1cee9693a 100644
--- a/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheet.ts
+++ b/packages/server/src/modules/FinancialStatements/modules/TrialBalanceSheet/TrialBalanceSheet.ts
@@ -172,7 +172,10 @@ export class TrialBalanceSheet extends FinancialSheet {
   private filterNoneTransactions = (
     accountNode: ITrialBalanceAccount
   ): boolean => {
-    return false === this.repository.totalAccountsLedger.isEmpty();
+    const accountLedger = this.repository.totalAccountsLedger.whereAccountId(
+      accountNode.id,
+    );
+    return !accountLedger.isEmpty();
   };
 
   /**
diff --git a/packages/server/src/modules/SaleInvoices/SaleInvoiceCostGLEntries.ts b/packages/server/src/modules/SaleInvoices/SaleInvoiceCostGLEntries.ts
index a209e2290..78053973f 100644
--- a/packages/server/src/modules/SaleInvoices/SaleInvoiceCostGLEntries.ts
+++ b/packages/server/src/modules/SaleInvoices/SaleInvoiceCostGLEntries.ts
@@ -19,7 +19,7 @@ export class SaleInvoiceCostGLEntries {
     private readonly inventoryCostLotTracker: TenantModelProxy<
       typeof InventoryCostLotTracker
     >,
-  ) {}
+  ) { }
 
   /**
    * Writes journal entries from sales invoices.
diff --git a/packages/server/src/modules/SaleInvoices/subscribers/InvoiceGLEntriesSubscriber.ts b/packages/server/src/modules/SaleInvoices/subscribers/InvoiceGLEntriesSubscriber.ts
index 1917d1477..0c27afa51 100644
--- a/packages/server/src/modules/SaleInvoices/subscribers/InvoiceGLEntriesSubscriber.ts
+++ b/packages/server/src/modules/SaleInvoices/subscribers/InvoiceGLEntriesSubscriber.ts
@@ -10,7 +10,7 @@ import { events } from '@/common/events/events';
 
 @Injectable()
 export class InvoiceGLEntriesSubscriber {
-  constructor(public readonly saleInvoiceGLEntries: SaleInvoiceGLEntries) {}
+  constructor(public readonly saleInvoiceGLEntries: SaleInvoiceGLEntries) { }
 
   /**
    * Records journal entries of the non-inventory invoice.
diff --git a/packages/webapp/src/components/Branches/BranchSelect.tsx b/packages/webapp/src/components/Branches/BranchSelect.tsx
index 2641f2704..190c5122b 100644
--- a/packages/webapp/src/components/Branches/BranchSelect.tsx
+++ b/packages/webapp/src/components/Branches/BranchSelect.tsx
@@ -20,12 +20,3 @@ export function BranchSelect({ branches, ...rest }) {
     />
   );
 }
-
-/**
- *
- * @param {*} param0
- * @returns
- */
-export function BranchSelectButton({ label, ...rest }) {
-  return <Button text={label} {...rest} />;
-}
diff --git a/packages/webapp/src/constants/financialReportsMenu.tsx b/packages/webapp/src/constants/financialReportsMenu.tsx
index c659462bd..507e63c76 100644
--- a/packages/webapp/src/constants/financialReportsMenu.tsx
+++ b/packages/webapp/src/constants/financialReportsMenu.tsx
@@ -171,6 +171,15 @@ export const financialReportMenus = [
         subject: AbilitySubject.Report,
         ability: ReportsAction.READ_INVENTORY_ITEM_DETAILS,
       },
+      {
+        title: <T id={'inventory_valuation'} />,
+        desc: (
+          <T id={'summerize_your_transactions_for_each_inventory_item'} />
+        ),
+        link: '/financial-reports/inventory-valuation',
+        subject: AbilitySubject.Report,
+        ability: ReportsAction.READ_INVENTORY_VALUATION_SUMMARY,
+      },
     ],
   },
   {
diff --git a/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx b/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx
index 2b86e02b5..9ca8ab041 100644
--- a/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -10,15 +10,14 @@ import {
   InputGroup,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T, If } from '@/components';
-import { inputIntent, handleStringChange } from '@/utils';
-import { FieldRequiredHint, ListSelect } from '@/components';
+import { FormattedMessage as T, If, FFormGroup, FSelect } from '@/components';
+import { handleStringChange } from '@/utils';
+import { FieldRequiredHint } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import allocateLandedCostType from '@/constants/allocateLandedCostType';
 
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
 import {
-  transactionsSelectShouldUpdate,
   allocateCostToEntries,
   resetAllocatedCostEntries,
 } from './utils';
@@ -32,137 +31,109 @@ export default function AllocateLandedCostFormFields() {
   const { costTransactionEntries, landedCostTransactions } =
     useAllocateLandedConstDialogContext();
 
+  const { values, setFieldValue } = useFormikContext();
+
+  // Handle transaction type select change.
+  const handleTransactionTypeChange = (type) => {
+    const { items } = values;
+
+    setFieldValue('transaction_type', type.value);
+    setFieldValue('transaction_id', '');
+    setFieldValue('transaction_entry_id', '');
+    setFieldValue('amount', '');
+    setFieldValue('items', resetAllocatedCostEntries(items));
+  };
+
+  // Handle transaction select change.
+  const handleTransactionChange = (transaction) => {
+    const { items } = values;
+    setFieldValue('transaction_id', transaction.id);
+    setFieldValue('transaction_entry_id', '');
+    setFieldValue('amount', '');
+    setFieldValue('items', resetAllocatedCostEntries(items));
+  };
+
+  // Handle transaction entry select change.
+  const handleTransactionEntryChange = (entry) => {
+    const { id, unallocated_cost_amount: unallocatedAmount } = entry;
+    const { items, allocation_method } = values;
+
+    setFieldValue('amount', unallocatedAmount);
+    setFieldValue('transaction_entry_id', id);
+    setFieldValue(
+      'items',
+      allocateCostToEntries(unallocatedAmount, allocation_method, items),
+    );
+  };
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------Transaction type -----------*/}
-      <FastField
+      <FFormGroup
         name={'transaction_type'}
-        transactions={allocateLandedCostType}
-        shouldUpdate={transactionsSelectShouldUpdate}
+        label={<T id={'transaction_type'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
+        fastField
       >
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'transaction_type'} />}
-            labelInfo={<FieldRequiredHint />}
-            helperText={<ErrorMessage name="transaction_type" />}
-            intent={inputIntent({ error, touched })}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
-          >
-            <ListSelect
-              items={allocateLandedCostType}
-              onItemSelect={(type) => {
-                const { items } = values;
-
-                setFieldValue('transaction_type', type.value);
-                setFieldValue('transaction_id', '');
-                setFieldValue('transaction_entry_id', '');
-
-                setFieldValue('amount', '');
-                setFieldValue('items', resetAllocatedCostEntries(items));
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <FSelect
+          name={'transaction_type'}
+          items={allocateLandedCostType}
+          onItemChange={handleTransactionTypeChange}
+          filterable={false}
+          valueAccessor={'value'}
+          textAccessor={'name'}
+          popoverProps={{ minimal: true }}
+          fastField
+        />
+      </FFormGroup>
 
       {/*------------ Transaction  -----------*/}
-      <Field
+      <FFormGroup
         name={'transaction_id'}
-        transactions={landedCostTransactions}
-        shouldUpdate={transactionsSelectShouldUpdate}
+        label={<T id={'transaction_id'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'transaction_id'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="transaction_id" />}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
-            inline={true}
-          >
-            <ListSelect
-              items={landedCostTransactions}
-              onItemSelect={({ id }) => {
-                const { items } = form.values;
-                form.setFieldValue('transaction_id', id);
-                form.setFieldValue('transaction_entry_id', '');
-
-                form.setFieldValue('amount', '');
-                form.setFieldValue('items', resetAllocatedCostEntries(items));
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'id'}
-              textProp={'name'}
-              labelProp={'formatted_unallocated_cost_amount'}
-              defaultText={intl.get(
-                'landed_cost.dialog.label_select_transaction',
-              )}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </Field>
+        <FSelect
+          name={'transaction_id'}
+          items={landedCostTransactions}
+          onItemChange={handleTransactionChange}
+          filterable={false}
+          valueAccessor={'id'}
+          textAccessor={'name'}
+          labelAccessor={'formatted_unallocated_cost_amount'}
+          placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
 
       {/*------------ Transaction line  -----------*/}
       <If condition={costTransactionEntries.length > 0}>
-        <Field
+        <FFormGroup
           name={'transaction_entry_id'}
-          transactions={costTransactionEntries}
-          shouldUpdate={transactionsSelectShouldUpdate}
+          label={<T id={'transaction_line'} />}
+          inline
+          fill
+          fastField
         >
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'transaction_line'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="transaction_entry_id" />}
-              className={classNames(
-                CLASSES.FILL,
-                'form-group--transaction_entry_id',
-              )}
-              inline={true}
-            >
-              <ListSelect
-                items={costTransactionEntries}
-                onItemSelect={(entry) => {
-                  const { id, unallocated_cost_amount: unallocatedAmount } =
-                    entry;
-                  const { items, allocation_method } = form.values;
-
-                  form.setFieldValue('amount', unallocatedAmount);
-                  form.setFieldValue('transaction_entry_id', id);
-                  form.setFieldValue(
-                    'items',
-                    allocateCostToEntries(
-                      unallocatedAmount,
-                      allocation_method,
-                      items,
-                    ),
-                  );
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                labelProp={'formatted_unallocated_cost_amount'}
-                defaultText={intl.get(
-                  'landed_cost.dialog.label_select_transaction_entry',
-                )}
-                popoverProps={{ minimal: true }}
-              />
-            </FormGroup>
-          )}
-        </Field>
+          <FSelect
+            name={'transaction_entry_id'}
+            items={costTransactionEntries}
+            onItemChange={handleTransactionEntryChange}
+            filterable={false}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            labelAccessor={'formatted_unallocated_cost_amount'}
+            placeholder={intl.get(
+              'landed_cost.dialog.label_select_transaction_entry',
+            )}
+            popoverProps={{ minimal: true }}
+            fastField
+          />
+        </FFormGroup>
       </If>
 
       {/*------------ Amount -----------*/}
diff --git a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
index 534450c08..09fb43907 100644
--- a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
@@ -2,10 +2,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import * as Yup from 'yup';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
-import { inputIntent } from '@/utils';
-import { ListSelect, FieldRequiredHint } from '@/components';
-import { Button, FormGroup, Intent, Classes } from '@blueprintjs/core';
+import { Formik, Form } from 'formik';
+import { FFormGroup, FSelect, FieldRequiredHint } from '@/components';
+import { Button, Intent, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
@@ -60,29 +59,22 @@ function ContactDuplicateForm({
             </p>
 
             {/*------------ Contact Type -----------*/}
-            <Field name={'contact_type'}>
-              {({ form, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'contact_type'} />}
-                  labelInfo={<FieldRequiredHint />}
-                  intent={inputIntent({ error, touched })}
-                  className={'form-group--select-list'}
-                  helperText={<ErrorMessage name="contact_type" />}
-                >
-                  <ListSelect
-                    items={Contacts}
-                    onItemSelect={({ path }) =>
-                      form.setFieldValue('contact_type', path)
-                    }
-                    defaultText={<T id={'select_contact'} />}
-                    textProp={'name'}
-                    selectedItemProp={'name'}
-                    filterable={false}
-                    popoverProps={{ minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </Field>
+            <FFormGroup
+              name={'contact_type'}
+              label={<T id={'contact_type'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={'form-group--select-list'}
+            >
+              <FSelect
+                name={'contact_type'}
+                items={Contacts}
+                placeholder={<T id={'select_contact'} />}
+                textAccessor={'name'}
+                valueAccessor={'path'}
+                filterable={false}
+                popoverProps={{ minimal: true }}
+              />
+            </FFormGroup>
           </div>
 
           <div className={Classes.DIALOG_FOOTER}>
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
index 0d054efee..f350fc9ce 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FastField, ErrorMessage, Field } from 'formik';
+import { useFormikContext } from 'formik';
 import { Classes, FormGroup, Position } from '@blueprintjs/core';
 import {
   FFormGroup,
@@ -11,10 +11,10 @@ import {
   FDateInput,
   FInputGroup,
   FTextArea,
+  FSelect,
 } from '@/components';
 import { useAutofocus } from '@/hooks';
 import {
-  ListSelect,
   FieldRequiredHint,
   Col,
   Row,
@@ -24,7 +24,7 @@ import {
   BranchSelectButton,
   FAccountsSuggestField,
 } from '@/components';
-import { inputIntent, momentFormatter, toSafeNumber } from '@/utils';
+import { momentFormatter, toSafeNumber } from '@/utils';
 import { Features, CLASSES } from '@/constants';
 
 import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
@@ -52,6 +52,7 @@ export default function InventoryAdjustmentFormDialogFields() {
 
   // Inventory adjustment dialog context.
   const { accounts, branches, warehouses } = useInventoryAdjContext();
+  const { values, setFieldValue } = useFormikContext();
 
   // Sets the primary warehouse to form.
   useSetPrimaryWarehouseToForm();
@@ -59,6 +60,17 @@ export default function InventoryAdjustmentFormDialogFields() {
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
+  // Handle adjustment type change.
+  const handleAdjustmentTypeChange = (type) => {
+    const result = diffQuantity(
+      toSafeNumber(values.quantity),
+      toSafeNumber(values.quantity_on_hand),
+      type.value,
+    );
+    setFieldValue('type', type.value);
+    setFieldValue('new_quantity', result);
+  };
+
   return (
     <div className={Classes.DIALOG_BODY}>
       <Row>
@@ -122,39 +134,24 @@ export default function InventoryAdjustmentFormDialogFields() {
 
         <Col xs={5}>
           {/*------------ Adjustment type -----------*/}
-          <Field name={'type'}>
-            {({
-              form: { values, setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FFormGroup
-                name={'type'}
-                label={<T id={'adjustment_type'} />}
-                labelInfo={<FieldRequiredHint />}
-                fill
-              >
-                <ListSelect
-                  items={adjustmentTypes}
-                  onItemSelect={(type) => {
-                    const result = diffQuantity(
-                      toSafeNumber(values.quantity),
-                      toSafeNumber(values.quantity_on_hand),
-                      type.value,
-                    );
-                    setFieldValue('type', type.value);
-                    setFieldValue('new_quantity', result);
-                  }}
-                  filterable={false}
-                  selectedItem={value}
-                  selectedItemProp={'value'}
-                  textProp={'name'}
-                  popoverProps={{ minimal: true }}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FFormGroup>
-            )}
-          </Field>
+          <FFormGroup
+            name={'type'}
+            label={<T id={'adjustment_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            fill
+            fastField
+          >
+            <FSelect
+              name={'type'}
+              items={adjustmentTypes}
+              onItemChange={handleAdjustmentTypeChange}
+              filterable={false}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+              popoverProps={{ minimal: true }}
+              fastField
+            />
+          </FFormGroup>
         </Col>
       </Row>
 
diff --git a/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx b/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
index 01f4ce69e..f0f0fdd42 100644
--- a/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx
@@ -73,7 +73,6 @@ function RefundCreditNoteFormFields({
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FormGroup>
diff --git a/packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx b/packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx
index d1c4ca3f8..b0039db8f 100644
--- a/packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx
@@ -1,19 +1,16 @@
 // @ts-nocheck
 import React from 'react';
 import {
-  FormGroup,
-  InputGroup,
   Intent,
   Classes,
   Button,
 } from '@blueprintjs/core';
-import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import classNames from 'classnames';
 
-import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import { FFormGroup, FInputGroup, FSelect, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
-import { inputIntent } from '@/utils';
-import { ListSelect, FieldRequiredHint } from '@/components';
+import { FieldRequiredHint } from '@/components';
 import { useUserFormContext } from './UserFormProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';
@@ -68,31 +65,21 @@ function UserFormContent({
         </FFormGroup>
 
         {/* ----------- Role name ----------- */}
-        <FastField name={'role_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'roles.label.role_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              helperText={<ErrorMessage name="role_id" />}
-              className={classNames(CLASSES.FILL, 'form-group--role_name')}
-              intent={inputIntent({ error, touched })}
-            >
-              <ListSelect
-                items={roles}
-                onItemSelect={({ id }) => {
-                  form.setFieldValue('role_id', id);
-                }}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                // labelProp={'id '}
-                popoverProps={{ minimal: true }}
-                intent={inputIntent({ error, touched })}
-                disabled={isAuth}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'role_id'}
+          label={<T id={'roles.label.role_name'} />}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames(CLASSES.FILL, 'form-group--role_name')}
+        >
+          <FSelect
+            name={'role_id'}
+            items={roles}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            popoverProps={{ minimal: true }}
+            disabled={isAuth}
+          />
+        </FFormGroup>
       </div>
 
       <div className={CLASSES.DIALOG_FOOTER}>
diff --git a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
index 9035be7e6..4b4144ce6 100644
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx
@@ -105,11 +105,6 @@ function APAgingSummaryActionsBar({
           />
         </Popover>
 
-        <Button
-          className={Classes.MINIMAL}
-          text={<T id={'filter'} />}
-          icon={<Icon icon="filter-16" iconSize={16} />}
-        />
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
index e0a0ab51c..9e972165c 100644
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx
@@ -106,11 +106,6 @@ function ARAgingSummaryActionsBar({
           />
         </Popover>
 
-        <Button
-          className={Classes.MINIMAL}
-          text={<T id={'filter'} />}
-          icon={<Icon icon="filter-16" iconSize={16} />}
-        />
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
index 75d1a3236..f9ba192af 100644
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx
@@ -104,18 +104,6 @@ function BalanceSheetActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
index 0be63e16d..75f459057 100644
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx
@@ -107,18 +107,6 @@ function CashFlowStatementActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
index 844745a10..775952d3b 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx
@@ -104,18 +104,6 @@ function CustomersBalanceSummaryActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
index ff8a2b532..0511f633d 100644
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx
@@ -106,18 +106,6 @@ function CustomersTransactionsActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
index e7475e3d2..7f04253b3 100644
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx
@@ -77,19 +77,6 @@ function GeneralLedgerActionsBar({
         />
         <NavbarDivider />
 
-        <Popover
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
-        <NavbarDivider />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
index a272cbc24..1bb63210a 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.tsx
@@ -102,18 +102,6 @@ function InventoryItemDetailsActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
index cfc20c75f..e30ba51c2 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx
@@ -103,18 +103,6 @@ function InventoryValuationActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx
index c1f7cbe8c..39620e718 100644
--- a/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx
@@ -55,17 +55,29 @@ const InventoryValuationSheet = styled(FinancialSheet)`
 `;
 
 const InventoryValuationDataTable = styled(ReportDataTable)`
+  --color-table-text-color: #252a31;
+  --color-table-total-text-color: #000;
+  --color-table-total-border: #bbb;
+
+  .bp4-dark & {
+    --color-table-text-color: var(--color-light-gray1);
+    --color-table-total-text-color: var(--color-light-gray4);
+    --color-table-total-border: var(--color-dark-gray5);
+  }
+
   .table {
     .tbody {
       .tr .td {
         border-bottom: 0;
         padding-top: 0.4rem;
         padding-bottom: 0.4rem;
+        color: var(--color-table-text-color);
       }
       .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
+        border-top: 1px solid var(--color-table-total-border);
+        border-bottom: 3px double var(--color-table-total-border);
         font-weight: 500;
-        border-bottom: 3px double #000;
+        color: var(--color-table-total-text-color);
       }
     }
   }
diff --git a/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
index 6a424b02a..cb2b9db86 100644
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalActionsBar.tsx
@@ -78,19 +78,6 @@ function JournalActionsBar({
         />
         <NavbarDivider />
 
-        <Popover
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
-        <NavbarDivider />
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
index dbffa90f2..9c0ed1095 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.tsx
@@ -103,18 +103,6 @@ function ProfitLossActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryActionsBar.tsx
index 197ed136e..e88ce2f21 100644
--- a/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProjectProfitabilitySummary/ProjectProfitabilitySummaryActionsBar.tsx
@@ -93,17 +93,6 @@ function ProjectProfitabilitySummaryActionsBar({
             icon={<Icon icon="numbers" width={23} height={16} />}
           />
         </Popover>
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
 
         <NavbarDivider />
 
diff --git a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
index 8e88a5155..190fc32cd 100644
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.tsx
@@ -100,17 +100,6 @@ function PurchasesByItemsActionsBar({
             icon={<Icon icon="numbers" width={23} height={16} />}
           />
         </Popover>
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
 
         <Button
           className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.tsx
index 5997d43dc..501049f5d 100644
--- a/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.tsx
@@ -91,11 +91,6 @@ function RealizedGainOrLossActionsBar({
           />
         </Popover>
 
-        <Button
-          className={classNames(Classes.MINIMAL, 'button--filter')}
-          text={<T id={'filter'} />}
-          icon={<Icon icon="filter-16" iconSize={16} />}
-        />
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
index 649bda2e5..86231fd54 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.tsx
@@ -102,18 +102,6 @@ function SalesByItemsActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
index 1779ba329..1db166ebb 100644
--- a/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesTaxLiabilitySummary/SalesTaxLiabilitySummaryActionsBar.tsx
@@ -104,18 +104,6 @@ function SalesTaxLiabilitySummaryActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
index 3ce0b6a14..08fc339da 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.tsx
@@ -103,18 +103,6 @@ function TrialBalanceActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="print-16" iconSize={16} />}
diff --git a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
index 7cb170509..5fd7e61db 100644
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
@@ -52,6 +52,7 @@ function TrialBalanceSheetHeader({
     fromDate: moment().toDate(),
     toDate: moment().toDate(),
     branchesIds: [],
+    filterByOption: 'with-transactions',
   };
 
   // Initial values.
diff --git a/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.tsx
index 363ee51b4..9eab1e8c6 100644
--- a/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/UnrealizedGainOrLoss/UnrealizedGainOrLossActionsBar.tsx
@@ -92,11 +92,6 @@ function UnrealizedGainOrLossActionsBar({
           />
         </Popover>
 
-        <Button
-          className={classNames(Classes.MINIMAL, 'button--filter')}
-          text={<T id={'filter'} />}
-          icon={<Icon icon="filter-16" iconSize={16} />}
-        />
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
index 09d8740f7..cb950e183 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.tsx
@@ -105,11 +105,6 @@ function VendorsBalanceSummaryActionsBar({
           />
         </Popover>
 
-        <Button
-          className={Classes.MINIMAL}
-          text={<T id={'filter'} />}
-          icon={<Icon icon="filter-16" iconSize={16} />}
-        />
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
index f426fbd53..52a2b7198 100644
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.tsx
@@ -106,18 +106,6 @@ function VendorsTransactionsActionsBar({
           />
         </Popover>
 
-        <Popover
-          // content={}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'} />}
-            icon={<Icon icon="filter-16" iconSize={16} />}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button
diff --git a/packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.tsx b/packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.tsx
index 613931a3d..96f622b57 100644
--- a/packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.tsx
+++ b/packages/webapp/src/containers/NotifyViaSMS/NotifyViaSMSFormFields.tsx
@@ -6,7 +6,8 @@ import classNames from 'classnames';
 import styled from 'styled-components';
 
 import {
-  ListSelect,
+  FFormGroup,
+  FSelect,
   FieldRequiredHint,
   FormattedMessage as T,
 } from '@/components';
@@ -16,29 +17,23 @@ import { inputIntent } from '@/utils';
 export default function NotifyViaSMSFormFields({ notificationTypes }) {
   return (
     <NotifyViaSMSFormFieldsRoot>
-      <FastField name={'notification_key'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'notify_via_sms.dialog.notification_type'} />}
-            className={classNames(CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'customer_name'} />}
-          >
-            <ListSelect
-              items={notificationTypes}
-              selectedItemProp={'key'}
-              selectedItem={value}
-              textProp={'label'}
-              popoverProps={{ minimal: true }}
-              filterable={false}
-              onItemSelect={(notification) => {
-                form.setFieldValue('notification_key', notification.key);
-              }}
-              disabled={notificationTypes.length < 2}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'notification_key'}
+        label={<T id={'notify_via_sms.dialog.notification_type'} />}
+        className={classNames(CLASSES.FILL)}
+        fastField
+      >
+        <FSelect
+          name={'notification_key'}
+          items={notificationTypes}
+          valueAccessor={'key'}
+          textAccessor={'label'}
+          popoverProps={{ minimal: true }}
+          filterable={false}
+          disabled={notificationTypes.length < 2}
+          fastField
+        />
+      </FFormGroup>
 
       {/* ----------- Send Notification to ----------- */}
       <FastField name={'customer_name'}>
diff --git a/packages/webapp/src/utils/withConnectHOC.tsx b/packages/webapp/src/utils/withConnectHOC.tsx
new file mode 100644
index 000000000..d58e41fe2
--- /dev/null
+++ b/packages/webapp/src/utils/withConnectHOC.tsx
@@ -0,0 +1,98 @@
+import { ComponentType } from 'react';
+import { Dispatch } from 'redux';
+import { connect, MapStateToProps } from 'react-redux';
+
+/**
+ * Creates a simple dispatch HOC that injects action props into a component.
+ * This is the DRY utility for Pattern 1: Action HOCs.
+ *
+ * @example
+ * ```tsx
+ * export interface WithAlertActionsProps {
+ *   openAlert: (name: string) => void;
+ * }
+ *
+ * export const mapDispatchToProps = (dispatch: Dispatch): WithAlertActionsProps => ({
+ *   openAlert: (name) => dispatch({ type: 'OPEN_ALERT', name }),
+ * });
+ *
+ * export const withAlertActions = createActionHOC<WithAlertActionsProps>(mapDispatchToProps);
+ * ```
+ */
+export function createActionHOC<TInjectedProps extends object>(
+  mapDispatchToProps: (dispatch: Dispatch) => TInjectedProps,
+) {
+  return function withHOC<P extends TInjectedProps>(
+    WrappedComponent: ComponentType<P>,
+  ): ComponentType<Omit<P, keyof TInjectedProps>> {
+    const Connected = connect(null, mapDispatchToProps)(
+      WrappedComponent as ComponentType<any>,
+    );
+    return Connected as unknown as ComponentType<Omit<P, keyof TInjectedProps>>;
+  };
+}
+
+/**
+ * Creates a state factory HOC that accepts an optional mapState function.
+ * This is the DRY utility for Pattern 2: State Factory HOCs.
+ *
+ * @example
+ * ```tsx
+ * export interface WithDrawersProps {
+ *   isOpen: boolean;
+ *   payload: Record<string, unknown>;
+ * }
+ *
+ * export const withDrawers = createStateFactoryHOC<WithDrawersProps>((state, props) => ({
+ *   isOpen: isDrawerOpen(state, props),
+ *   payload: getDrawerPayload(state, props),
+ * }));
+ * ```
+ */
+export function createStateFactoryHOC<TInjectedProps extends object>(
+  createMapState: () => (state: any, props: any) => TInjectedProps,
+) {
+  type MapStateFn<T> = (mapped: TInjectedProps, state?: unknown, props?: unknown) => T;
+
+  return function withHOC<P, T = TInjectedProps>(mapState?: MapStateFn<T>) {
+    const mapStateToProps = createMapState();
+    const wrappedMapState = (state: any, props: any) => {
+      const mapped = mapStateToProps(state, props);
+      return mapState ? mapState(mapped, state, props) : mapped;
+    };
+
+    return function <C extends ComponentType<P>>(WrappedComponent: C) {
+      return connect(wrappedMapState)(WrappedComponent as ComponentType<any>) as unknown as ComponentType<
+        Omit<P, keyof (T extends TInjectedProps ? T : TInjectedProps)>
+      >;
+    };
+  };
+}
+
+/**
+ * Creates a simple state HOC that directly connects state to component props.
+ * This is for HOCs that don't use the factory pattern.
+ *
+ * @example
+ * ```tsx
+ * export interface WithCurrencyDetailProps {
+ *   currency: Record<string, unknown> | null;
+ * }
+ *
+ * export const withCurrencyDetail = createStateHOC<WithCurrencyDetailProps>((state, props) => ({
+ *   currency: getCurrencyByCode(state, props),
+ * }));
+ * ```
+ */
+export function createStateHOC<TInjectedProps extends object>(
+  mapStateToProps: (state: any, props: any) => TInjectedProps,
+) {
+  return function withHOC<P extends TInjectedProps>(
+    WrappedComponent: ComponentType<P>,
+  ): ComponentType<Omit<P, keyof TInjectedProps>> {
+    const Connected = connect(mapStateToProps)(
+      WrappedComponent as ComponentType<any>,
+    );
+    return Connected as unknown as ComponentType<Omit<P, keyof TInjectedProps>>;
+  };
+}