diff --git a/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts b/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts
new file mode 100644
index 000000000..b5e1cacf9
--- /dev/null
+++ b/packages/server/src/modules/Warehouses/WarehouseItems.controller.ts
@@ -0,0 +1,37 @@
+import { Controller, Get, Param } from '@nestjs/common';
+import { WarehousesApplication } from './WarehousesApplication.service';
+import {
+  ApiOperation,
+  ApiParam,
+  ApiResponse,
+  ApiTags,
+} from '@nestjs/swagger';
+import { ApiCommonHeaders } from '@/common/decorators/ApiCommonHeaders';
+
+@Controller('items')
+@ApiTags('Warehouses')
+@ApiCommonHeaders()
+export class WarehouseItemsController {
+  constructor(private warehousesApplication: WarehousesApplication) { }
+
+  @Get(':id/warehouses')
+  @ApiOperation({
+    summary: 'Retrieves the item associated warehouses.',
+  })
+  @ApiResponse({
+    status: 200,
+    description:
+      'The item associated warehouses have been successfully retrieved.',
+  })
+  @ApiResponse({ status: 404, description: 'The item not found.' })
+  @ApiParam({
+    name: 'id',
+    required: true,
+    type: Number,
+    description: 'The item id',
+  })
+  getItemWarehouses(@Param('id') itemId: string) {
+    return this.warehousesApplication.getItemWarehouses(Number(itemId));
+  }
+}
+
diff --git a/packages/server/src/modules/Warehouses/Warehouses.controller.ts b/packages/server/src/modules/Warehouses/Warehouses.controller.ts
index c77e89393..825b5a572 100644
--- a/packages/server/src/modules/Warehouses/Warehouses.controller.ts
+++ b/packages/server/src/modules/Warehouses/Warehouses.controller.ts
@@ -85,10 +85,4 @@ export class WarehousesController {
   markWarehousePrimary(@Param('id') warehouseId: string) {
     return this.warehousesApplication.markWarehousePrimary(Number(warehouseId));
   }
-
-  @Get('items/:itemId')
-  @ApiOperation({ summary: 'Get item warehouses' })
-  getItemWarehouses(@Param('itemId') itemId: string) {
-    return this.warehousesApplication.getItemWarehouses(Number(itemId));
-  }
 }
diff --git a/packages/server/src/modules/Warehouses/Warehouses.module.ts b/packages/server/src/modules/Warehouses/Warehouses.module.ts
index aa899f2dc..c3a6e2a0b 100644
--- a/packages/server/src/modules/Warehouses/Warehouses.module.ts
+++ b/packages/server/src/modules/Warehouses/Warehouses.module.ts
@@ -7,6 +7,7 @@ import { CreateWarehouse } from './commands/CreateWarehouse.service';
 import { EditWarehouse } from './commands/EditWarehouse.service';
 import { DeleteWarehouseService } from './commands/DeleteWarehouse.service';
 import { WarehousesController } from './Warehouses.controller';
+import { WarehouseItemsController } from './WarehouseItems.controller';
 import { GetWarehouse } from './queries/GetWarehouse';
 import { WarehouseMarkPrimary } from './commands/WarehouseMarkPrimary.service';
 import { GetWarehouses } from './queries/GetWarehouses';
@@ -47,7 +48,7 @@ const models = [RegisterTenancyModel(Warehouse)];
 
 @Module({
   imports: [TenancyDatabaseModule, ...models],
-  controllers: [WarehousesController],
+  controllers: [WarehousesController, WarehouseItemsController],
   providers: [
     CreateWarehouse,
     EditWarehouse,
@@ -90,6 +91,6 @@ const models = [RegisterTenancyModel(Warehouse)];
     InventoryTransactionsWarehouses,
     ValidateWarehouseExistance
   ],
-  exports: [WarehousesSettings, WarehouseTransactionDTOTransform, ...models],
+  exports: [WarehousesSettings, WarehouseTransactionDTOTransform, WarehousesApplication, ...models],
 })
 export class WarehousesModule {}
diff --git a/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx b/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx
index 851a9586e..f93ce0116 100644
--- a/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.tsx
@@ -8,7 +8,7 @@ import ReferenceNumberForm from '@/containers/JournalNumber/ReferenceNumberForm'
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { withSettingsActions } from '@/containers/Settings/withSettingsActions';
 import { withSettings } from '@/containers/Settings/withSettings';
-import { withBillActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
+import { withBillsActions } from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
 
 import { compose, optionsMapToArray } from '@/utils';
 
@@ -28,7 +28,7 @@ function BillNumberDialogContent({
   // #withDialogActions
   closeDialog,
 
-  // #withBillActions
+  // #withBillsActions
   setBillNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
@@ -76,5 +76,5 @@ export default compose(
     nextNumber: billsettings?.next_number,
     numberPrefix: billsettings?.number_prefix,
   })),
-  withBillActions,
+  withBillsActions,
 )(BillNumberDialogContent);
diff --git a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
index f6a4f5497..f77c1beab 100644
--- a/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
+++ b/packages/webapp/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.tsx
@@ -63,7 +63,6 @@ function ContactDuplicateForm({
               name={'contact_type'}
               label={<T id={'contact_type'} />}
               labelInfo={<FieldRequiredHint />}
-              className={'form-group--select-list'}
             >
               <FSelect
                 name={'contact_type'}
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx
index 43c085086..6a0f373ff 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.tsx
@@ -1,9 +1,17 @@
 // @ts-nocheck
 import React from 'react';
-import { Field, ErrorMessage, FastField } from 'formik';
+import { Field, ErrorMessage, FastField, useFormikContext } from 'formik';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import { inputIntent, toSafeNumber } from '@/utils';
-import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components';
+import {
+  Row,
+  Col,
+  MoneyInputGroup,
+  FormattedMessage as T,
+  FMoneyInputGroup,
+  FFormGroup,
+  FInputGroup,
+} from '@/components';
 import { useAutofocus } from '@/hooks';
 import { decrementQuantity } from './utils';
 
@@ -12,27 +20,19 @@ import { decrementQuantity } from './utils';
  */
 function DecrementAdjustmentFields() {
   const decrementFieldRef = useAutofocus();
+  const { values, setFieldValue } = useFormikContext();
 
   return (
     <Row className={'row--decrement-fields'}>
       {/*------------ Quantity on hand  -----------*/}
       <Col className={'col--quantity-on-hand'}>
-        <FastField name={'quantity_on_hand'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'qty_on_hand'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity_on_hand" />}
-            >
-              <InputGroup
-                disabled={true}
-                medium={'true'}
-                intent={inputIntent({ error, touched })}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'quantity_on_hand'} label={<T id={'qty_on_hand'} />}>
+          <FInputGroup
+            name={'quantity_on_hand'}
+            disabled={true}
+            medium={'true'}
+          />
+        </FFormGroup>
       </Col>
 
       <Col className={'col--sign'}>
@@ -41,40 +41,23 @@ function DecrementAdjustmentFields() {
 
       {/*------------ Decrement -----------*/}
       <Col className={'col--decrement'}>
-        <Field name={'quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'decrement'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="quantity" />}
-              fill={true}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                inputRef={(ref) => (decrementFieldRef.current = ref)}
-                onChange={(value) => {
-                  setFieldValue('quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'new_quantity',
-                    decrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup name={'quantity'} label={<T id={'decrement'} />} fill>
+          <FMoneyInputGroup
+            name={'quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            inputRef={(ref) => (decrementFieldRef.current = ref)}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'new_quantity',
+                decrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+          />
+        </FFormGroup>
       </Col>
 
       <Col className={'col--sign'}>
@@ -82,38 +65,27 @@ function DecrementAdjustmentFields() {
       </Col>
       {/*------------ New quantity -----------*/}
       <Col className={'col--quantity'}>
-        <Field name={'new_quantity'}>
-          {({
-            form: { values, setFieldValue },
-            field,
-            meta: { error, touched },
-          }) => (
-            <FormGroup
-              label={<T id={'new_quantity'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="new_quantity" />}
-            >
-              <MoneyInputGroup
-                value={field.value}
-                allowDecimals={false}
-                allowNegativeValue={true}
-                onChange={(value) => {
-                  setFieldValue('new_quantity', value);
-                }}
-                onBlurValue={(value) => {
-                  setFieldValue(
-                    'quantity',
-                    decrementQuantity(
-                      toSafeNumber(value),
-                      toSafeNumber(values.quantity_on_hand),
-                    ),
-                  );
-                }}
-                intent={inputIntent({ error, touched })}
-              />
-            </FormGroup>
-          )}
-        </Field>
+        <FFormGroup
+          name={'new_quantity'}
+          label={<T id={'new_quantity'} />}
+          fill
+          fastField
+        >
+          <FMoneyInputGroup
+            name={'new_quantity'}
+            allowDecimals={false}
+            allowNegativeValue={true}
+            onBlurValue={(value) => {
+              setFieldValue(
+                'quantity',
+                decrementQuantity(
+                  toSafeNumber(value),
+                  toSafeNumber(values.quantity_on_hand),
+                ),
+              );
+            }}
+          />
+        </FFormGroup>
       </Col>
     </Row>
   );
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx
index a04c98885..5fdc51667 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.tsx
@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React from 'react';
- 
+
 import '@/style/pages/Items/ItemAdjustmentDialog.scss';
- 
+
 import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider';
 import InventoryAdjustmentForm from './InventoryAdjustmentForm';
 
diff --git a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
index 0ac804d71..b9cdbf9e4 100644
--- a/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
@@ -160,7 +160,7 @@ export default function InventoryAdjustmentFormDialogFields() {
         name={'adjustment_account_id'}
         label={<T id={'adjustment_account'} />}
         labelInfo={<FieldRequiredHint />}
-        className={'form-group--adjustment-account'}
+        fill
       >
         <FAccountsSuggestField
           name={'adjustment_account_id'}
@@ -168,6 +168,8 @@ export default function InventoryAdjustmentFormDialogFields() {
           inputProps={{
             placeholder: intl.get('select_adjustment_account'),
           }}
+          fill
+          fastField
         />
       </FFormGroup>
 
@@ -185,16 +187,21 @@ export default function InventoryAdjustmentFormDialogFields() {
         name={'reason'}
         label={<T id={'adjustment_reasons'} />}
         labelInfo={<FieldRequiredHint />}
+        fill
         fastField
       >
-        <FTextArea name={'reason'} growVertically large fastField />
+        <FTextArea name={'reason'} growVertically large fastField fill />
       </FFormGroup>
     </div>
   );
 }
 
 export const FeatureRowDivider = styled.div`
+  --x-color-background: #e9e9e9;
+  .bp4-dark & {
+    --x-color-background: rgba(255, 255, 255, 0.1);
+  }
   height: 2px;
-  background: #e9e9e9;
+  background: var(--x-color-background);
   margin-bottom: 15px;
 `;
diff --git a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx
index 3750345ce..78e1eeea5 100644
--- a/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx
+++ b/packages/webapp/src/containers/ItemsCategories/ItemCategoriesList.tsx
@@ -9,13 +9,13 @@ import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
 
 import ItemCategoriesTable from './ItemCategoriesTable';
 import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
-import { withItemsCategories } from './withItemCategories';
+import { withItemCategories } from './withItemCategories';
 
 /**
  * Item categories list.
  */
 function ItemCategoryList({
-  // #withItemsCategories
+  // #withItemCategories
   itemsCategoriesTableState
 }) {
   return (
@@ -32,7 +32,7 @@ function ItemCategoryList({
 }
 
 export default R.compose(
-  withItemsCategories(({ itemsCategoriesTableState }) => ({
+  withItemCategories(({ itemsCategoriesTableState }) => ({
     itemsCategoriesTableState,
   })),
 )(ItemCategoryList);
diff --git a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
index 89ad30966..0497c493d 100644
--- a/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
+++ b/packages/webapp/src/containers/PaymentMethods/PaymentMethodSelect.tsx
@@ -63,7 +63,12 @@ export function PaymentMethodSelectField({
 }
 
 const PaymentMethodSelectRoot = styled(Group)`
-  border: 1px solid #d3d8de;
+  --x-color-border: #d3d8de;
+
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.2);
+  }
+  border: 1px solid var(--x-color-border);
   border-radius: 3px;
   padding: 8px;
   gap: 0;
@@ -72,13 +77,23 @@ const PaymentMethodSelectRoot = styled(Group)`
 `;
 
 const PaymentMethodCheckbox = styled(Checkbox)`
+  --x-color-border: #c5cbd3;
+
+  .bp4-dark & {
+    --x-color-border: rgba(255, 255, 255, 0.2);
+  }
   margin: 0;
 
   &.bp4-control .bp4-control-indicator {
-    box-shadow: 0 0 0 1px #c5cbd3;
+    box-shadow: 0 0 0 1px var(--x-color-border);
   }
 `;
 
 const PaymentMethodText = styled(Text)`
-  color: #404854;
+  --x-color-text: #404854;
+
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray4);
+  }
+  color: var(--x-color-text);
 `;
diff --git a/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx b/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx
index d89277c04..5b18ab254 100644
--- a/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx
+++ b/packages/webapp/src/containers/PaymentMethods/SelectPaymentMethodPopover.tsx
@@ -48,5 +48,5 @@ const PaymentMethodsTitle = styled('h6')`
   font-size: 12px;
   font-weight: 500;
   margin: 0;
-  color: rgb(95, 107, 124);
+  color: var(--color-muted-text);
 `;
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
index f5b2a27f8..8cc3084cb 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsActionsBar.tsx
@@ -45,7 +45,7 @@ import { isEmpty } from 'lodash';
  * Bills actions bar.
  */
 function BillActionsBar({
-  // #withBillActions
+  // #withBillsActions
   setBillsTableState,
 
   // #withBills
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
index b65722022..30ac5b37d 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsTable.tsx
@@ -13,7 +13,7 @@ import {
 import BillsEmptyStatus from './BillsEmptyStatus';
 
 import { withBills } from './withBills';
-import { withBillActions } from './withBillsActions';
+import { withBillsActions } from './withBillsActions';
 import { withAlertActions } from '@/containers/Alert/withAlertActions';
 import { withDialogActions } from '@/containers/Dialog/withDialogActions';
 import { withDrawerActions } from '@/containers/Drawer/withDrawerActions';
@@ -163,7 +163,7 @@ function BillsDataTable({
 
 export default compose(
   withBills(({ billsTableState }) => ({ billsTableState })),
-  withBillActions,
+  withBillsActions,
   withAlertActions,
   withDrawerActions,
   withDialogActions,
diff --git a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx
index 264b02e0a..df90ae1f8 100644
--- a/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.tsx
@@ -6,7 +6,7 @@ import { DashboardViewsTabs } from '@/components';
 import { useBillsListContext } from './BillsListProvider';
 
 import { withBills } from './withBills';
-import { withBillActions } from './withBillsActions';
+import { withBillsActions } from './withBillsActions';
 
 import { compose, transfromViewsToTabs } from '@/utils';
 
@@ -14,7 +14,7 @@ import { compose, transfromViewsToTabs } from '@/utils';
  * Bills view tabs.
  */
 function BillViewTabs({
-  // #withBillActions
+  // #withBillsActions
   setBillsTableState,
 
   // #withBills
@@ -47,7 +47,7 @@ function BillViewTabs({
 }
 
 export default compose(
-  withBillActions,
+  withBillsActions,
   withBills(({ billsTableState }) => ({
     billsCurrentView: billsTableState.viewSlug,
   })),
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
index f0507cc70..ccfc9a4aa 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/AdjustmentTotalLine.tsx
@@ -12,7 +12,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode';
 const inputGroupCss = css`
   & .bp4-input {
     max-width: 110px;
-    color: rgb(17, 17, 17);
     padding-left: 8px;
   }
 `;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
index da5d09127..767ab90ea 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/DiscountTotalLine.tsx
@@ -13,7 +13,6 @@ import { useIsDarkMode } from '@/hooks/useDarkMode';
 const inputGroupCss = css`
   & .bp4-input {
     max-width: 110px;
-    color: rgb(17, 17, 17);
     padding-left: 8px;
   }
 `;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
index 50691906c..cd24d261c 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterLeft.tsx
@@ -127,7 +127,7 @@ const PaymentOptionsText = styled(Box)`
   font-size: 13px;
   display: inline-flex;
   align-items: center;
-  color: #5f6b7c;
+  color: var(--color-muted-text);
 `;
 
 const PaymentOptionsButton = styled(Button)`
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx
index 7e4d1e6b0..8b4b26c76 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFloatingActions.tsx
@@ -11,12 +11,11 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { If, Icon, FormattedMessage as T } from '@/components';
+import { If, Icon, FormattedMessage as T, Group } from '@/components';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
-
 import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Warehouse transfer floating actions bar.
@@ -77,98 +76,101 @@ export default function WarehouseTransferFloatingActions() {
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save Intitate & transferred ----------- */}
-      <If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
-        <ButtonGroup>
+      <Group spacing={10}>
+        {/* ----------- Save Intitate & transferred ----------- */}
+        <If condition={!warehouseTransfer || !warehouseTransfer?.is_transferred}>
+          <ButtonGroup>
+            <Button
+              disabled={isSubmitting}
+              loading={isSubmitting}
+              intent={Intent.PRIMARY}
+              type="submit"
+              onClick={handleSubmitInitiateBtnClick}
+              style={{ minWidth: '85px' }}
+              text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
+            />
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={
+                      <T id={'warehouse_transfer.save_mark_as_transferred'} />
+                    }
+                    onClick={handleSubmitTransferredBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                intent={Intent.PRIMARY}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+
+          {/* ----------- Save As Draft ----------- */}
+          <ButtonGroup>
+            <Button
+              disabled={isSubmitting}
+              className={'ml1'}
+              onClick={handleSubmitDraftBtnClick}
+              text={<T id={'save_as_draft'} />}
+            />
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    text={<T id={'save_and_new'} />}
+                    onClick={handleSubmitDraftAndNewBtnClick}
+                  />
+                  <MenuItem
+                    text={<T id={'save_continue_editing'} />}
+                    onClick={handleSubmitDraftContinueEditingBtnClick}
+                  />
+                </Menu>
+              }
+              minimal={true}
+              interactionKind={PopoverInteractionKind.CLICK}
+              position={Position.BOTTOM_LEFT}
+            >
+              <Button
+                disabled={isSubmitting}
+                rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+              />
+            </Popover>
+          </ButtonGroup>
+        </If>
+        <If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
           <Button
             disabled={isSubmitting}
             loading={isSubmitting}
             intent={Intent.PRIMARY}
-            type="submit"
-            onClick={handleSubmitInitiateBtnClick}
-            style={{ minWidth: '85px' }}
-            text={<T id={'warehouse_transfer.save_initiate_transfer'} />}
+            onClick={handleSubmitTransferredBtnClick}
+            style={{ minWidth: '100px' }}
+            text={<T id={'save'} />}
           />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={
-                    <T id={'warehouse_transfer.save_mark_as_transferred'} />
-                  }
-                  onClick={handleSubmitTransferredBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              intent={Intent.PRIMARY}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
+        </If>
 
-        {/* ----------- Save As Draft ----------- */}
-        <ButtonGroup>
-          <Button
-            disabled={isSubmitting}
-            className={'ml1'}
-            onClick={handleSubmitDraftBtnClick}
-            text={<T id={'save_as_draft'} />}
-          />
-          <Popover
-            content={
-              <Menu>
-                <MenuItem
-                  text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitDraftAndNewBtnClick}
-                />
-                <MenuItem
-                  text={<T id={'save_continue_editing'} />}
-                  onClick={handleSubmitDraftContinueEditingBtnClick}
-                />
-              </Menu>
-            }
-            minimal={true}
-            interactionKind={PopoverInteractionKind.CLICK}
-            position={Position.BOTTOM_LEFT}
-          >
-            <Button
-              disabled={isSubmitting}
-              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
-            />
-          </Popover>
-        </ButtonGroup>
-      </If>
-      <If condition={warehouseTransfer && warehouseTransfer?.is_transferred}>
+        {/* ----------- Clear & Reset----------- */}
         <Button
+          className={'ml1'}
           disabled={isSubmitting}
-          loading={isSubmitting}
-          intent={Intent.PRIMARY}
-          onClick={handleSubmitTransferredBtnClick}
-          style={{ minWidth: '100px' }}
-          text={<T id={'save'} />}
+          onClick={handleClearBtnClick}
+          text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
         />
-      </If>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={warehouseTransfer ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
 
-      {/* ----------- Cancel  ----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleCancelBtnClick}
-        text={<T id={'cancel'} />}
-      />
+        {/* ----------- Cancel  ----------- */}
+        <Button
+          className={'ml1'}
+          disabled={isSubmitting}
+          onClick={handleCancelBtnClick}
+          text={<T id={'cancel'} />}
+        />
+      </Group>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
index 6f10b194c..4c1de2909 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
@@ -80,6 +80,7 @@ function WarehouseTransferFormHeaderFields({
           inputProps={{
             leftIcon: <Icon icon={'date-range'} />,
           }}
+          fill
           fastField
         />
       </FFormGroup>
diff --git a/packages/webapp/src/style/pages/Customers/List.scss b/packages/webapp/src/style/pages/Customers/List.scss
index 57ceabc3c..66ce5677d 100644
--- a/packages/webapp/src/style/pages/Customers/List.scss
+++ b/packages/webapp/src/style/pages/Customers/List.scss
@@ -8,12 +8,19 @@
 
       .avatar.td {
         .avatar {
+          --x-color-background: #adbcc9;
+          --x-color-text: #fff;
+            
+          .bp4-dark & {
+            --x-color-background: rgba(255, 255, 255, 0.2);
+            --x-color-text: #fff;
+          }
           display: inline-block;
-          background: #adbcc9;
+          background: var(--x-color-background);
           border-radius: 50%;
           text-align: center;
           font-weight: 400;
-          color: #fff;
+          color: var(--x-color-text);
 
           &[data-size='medium'] {
             height: 30px;
diff --git a/packages/webapp/src/style/pages/Vendors/List.scss b/packages/webapp/src/style/pages/Vendors/List.scss
index f71bc5eeb..311b5a1b9 100644
--- a/packages/webapp/src/style/pages/Vendors/List.scss
+++ b/packages/webapp/src/style/pages/Vendors/List.scss
@@ -9,12 +9,19 @@
 
     .avatar.td {
       .avatar {
+        --x-color-background: #adbcc9;
+        --x-color-text: #fff;
+        
+        .bp4-dark & {
+          --x-color-background: rgba(255, 255, 255, 0.2);
+          --x-color-text: #fff;
+        }
         display: inline-block;
-        background: #adbcc9;
+        background: var(--x-color-background);
+        color: var(--x-color-text);
         border-radius: 50%;
         text-align: center;
         font-weight: 400;
-        color: #fff;
 
         &[data-size='medium'] {
           height: 30px;