diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab2d9bd6d..4f991b8a2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -50,6 +50,7 @@
         "react-hook-form": "^7.49.2",
         "react-i18next": "^14.0.3",
         "react-input-mask": "^2.0.4",
+        "react-number-format": "^5.4.3",
         "react-quill": "^2.0.0",
         "react-router-dom": "^6.21.1",
         "react-snowfall": "^1.2.1",
@@ -18018,6 +18019,16 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-number-format": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.3.tgz",
+      "integrity": "sha512-VCY5hFg/soBighAoGcdE+GagkJq0230qN6jcS5sp8wQX1qy1fYN/RX7/BXkrs0oyzzwqR8/+eSUrqXbGeywdUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d6bec5c8f..f88c9c874 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -72,6 +72,7 @@
     "react-hook-form": "^7.49.2",
     "react-i18next": "^14.0.3",
     "react-input-mask": "^2.0.4",
+    "react-number-format": "^5.4.3",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.21.1",
     "react-snowfall": "^1.2.1",
diff --git a/frontend/src/views/Transfers/components/TransferDetails.jsx b/frontend/src/views/Transfers/components/TransferDetails.jsx
index 22377b629..cc2452d33 100644
--- a/frontend/src/views/Transfers/components/TransferDetails.jsx
+++ b/frontend/src/views/Transfers/components/TransferDetails.jsx
@@ -14,6 +14,7 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { LabelBox } from './LabelBox'
 import { calculateTotalValue } from '@/utils/formatters'
+import { NumericFormat } from 'react-number-format'
 
 export const TransferDetails = () => {
   const { t } = useTranslation(['common', 'transfer', 'organization'])
@@ -26,6 +27,7 @@ export const TransferDetails = () => {
   } = useFormContext()
   const { data: currentUser } = useCurrentUser()
   const { data: orgData } = useRegExtOrgs()
+
   const organizations =
     orgData?.map((org) => ({
       value: parseInt(org.organizationId),
@@ -65,6 +67,7 @@ export const TransferDetails = () => {
       )
     )
   }
+
   return (
     <BCBox data-test="transfer-details">
       <LabelBox label={t('transfer:detailsLabel')}>
@@ -73,15 +76,29 @@ export const TransferDetails = () => {
             {currentUser?.organization?.name}
           </BCTypography>
           {` ${t('transfer:transfers')} `}
-          <TextField
-            inputProps={{ 'data-test': 'quantity' }}
-            {...register('quantity')}
-            placeholder={t('common:quantity')}
-            size="small"
-            error={!!errors.quantity}
-            helperText={errors.quantity?.message}
-            sx={{ width: '6rem', marginInline: '0.2rem', bottom: '0.2rem' }}
+
+          <Controller
+            name="quantity"
+            control={control}
+            render={({ field: { onChange, onBlur, value, name, ref } }) => (
+              <NumericFormat
+                customInput={TextField}
+                thousandSeparator
+                value={value}
+                onValueChange={(vals) => onChange(vals.floatValue)}
+                onBlur={onBlur}
+                name={name}
+                inputRef={ref}
+                inputProps={{ 'data-test': 'quantity' }}
+                placeholder={t('common:quantity')}
+                size="small"
+                error={!!errors.quantity}
+                helperText={errors.quantity?.message}
+                sx={{ width: '6rem', marginInline: '0.2rem', bottom: '0.2rem' }}
+              />
+            )}
           />
+
           {t('transfer:complianceUnitsTo')}
           <FormControl
             sx={{
@@ -149,30 +166,48 @@ export const TransferDetails = () => {
             />
             {renderError('toOrganizationId')}
           </FormControl>
+
           {t('transfer:for')}
-          <TextField
-            id="price-per-unit"
-            {...register('pricePerUnit')}
-            placeholder={t('transfer:fairMarketText')}
-            size="small"
-            error={!!errors.pricePerUnit}
-            helperText={errors.pricePerUnit?.message}
-            sx={{
-              minWidth: '25rem',
-              marginInline: '0.2rem',
-              bottom: '0.2rem'
-            }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">$</InputAdornment>
-              ),
-              style: { textAlign: 'right' }
-            }}
-            inputProps={{
-              maxLength: 13,
-              'data-test': 'price-per-unit'
-            }}
+
+          <Controller
+            name="pricePerUnit"
+            control={control}
+            render={({ field: { onChange, onBlur, value, name, ref } }) => (
+              <NumericFormat
+                id="price-per-unit"
+                customInput={TextField}
+                thousandSeparator
+                decimalScale={2}
+                fixedDecimalScale={false}
+                prefix=""
+                value={value}
+                onValueChange={(vals) => onChange(vals.floatValue)}
+                onBlur={onBlur}
+                name={name}
+                inputRef={ref}
+                placeholder={t('transfer:fairMarketText')}
+                size="small"
+                error={!!errors.pricePerUnit}
+                helperText={errors.pricePerUnit?.message}
+                sx={{
+                  minWidth: '25rem',
+                  marginInline: '0.2rem',
+                  bottom: '0.2rem'
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">$</InputAdornment>
+                  ),
+                  style: { textAlign: 'right' }
+                }}
+                inputProps={{
+                  maxLength: 13,
+                  'data-test': 'price-per-unit'
+                }}
+              />
+            )}
           />
+
           {t('transfer:totalValueText')}
           <BCTypography
             variant="body4"
@@ -187,6 +222,7 @@ export const TransferDetails = () => {
             })} CAD.`}
           </BCTypography>
         </BCTypography>
+
         <BCTypography
           variant="body4"
           component="div"