diff --git a/frontend/src/components/supp-allowances/TransportationAllowance.vue b/frontend/src/components/supp-allowances/TransportationAllowance.vue
index da91e841..bb1a6917 100644
--- a/frontend/src/components/supp-allowances/TransportationAllowance.vue
+++ b/frontend/src/components/supp-allowances/TransportationAllowance.vue
@@ -80,15 +80,12 @@
                 <p>Vehicle mileage at time of application (odometer reading):</p>
               </v-col>
               <v-col cols="6" xl="7" class="pt-2 text-center">
-                <v-text-field
+                <AppNumberInput
                   v-model="model.odometer"
-                  required
-                  type="number"
+                  :format="wholeNumberFormat"
                   suffix="km"
-                  variant="outlined"
-                  density="compact"
-                  :rules="[rules.max(999999), ...rules.required]"
-                  :disabled="readOnly(model)"></v-text-field>
+                  :rules="[rules.max(999999), rules.min(1), ...rules.required]"
+                  :disabled="readOnly(model)"></AppNumberInput>
               </v-col>
             </v-row>
           </v-col>
@@ -98,15 +95,12 @@
                 <p>Estimated Yearly KM:</p>
               </v-col>
               <v-col cols="6" xl="7" class="pt-2 text-center">
-                <v-text-field
+                <AppNumberInput
                   v-model="model.estimatedMileage"
-                  required
-                  type="number"
+                  :format="wholeNumberFormat"
                   suffix="km"
-                  variant="outlined"
-                  density="compact"
-                  :rules="[rules.max(999999), ...rules.required]"
-                  :disabled="readOnly(model)"></v-text-field>
+                  :rules="[rules.max(999999), rules.min(1), ...rules.required]"
+                  :disabled="readOnly(model)"></AppNumberInput>
               </v-col>
             </v-row>
           </v-col>
@@ -227,6 +221,10 @@ export default {
         separator: ',',
         precision: 2,
       },
+      wholeNumberFormat: {
+        nullValue: '',
+        precision: 0,
+      },
     }
   },
   computed: {
diff --git a/frontend/src/utils/rules.js b/frontend/src/utils/rules.js
index 234b141b..d88afa16 100644
--- a/frontend/src/utils/rules.js
+++ b/frontend/src/utils/rules.js
@@ -36,7 +36,7 @@ const rules = {
     return (v) => !v || v <= number || `Max exceeded: ${number.toLocaleString('en-ca')}`
   },
   min(number) {
-    return (v) => !v || v >= number || `Min exceeded: ${number.toLocaleString('en-ca')}`
+    return (v) => !v || v >= number || `Please enter a number greater than  ${(number - 1).toLocaleString('en-ca')}  in the field`
   },
   maxLength(number) {
     return (v) => !v || v.length <= number || 'Max length exceeded'
diff --git a/frontend/src/views/supp-allowances/SupplementaryFormView.vue b/frontend/src/views/supp-allowances/SupplementaryFormView.vue
index e2aac757..2ef43598 100644
--- a/frontend/src/views/supp-allowances/SupplementaryFormView.vue
+++ b/frontend/src/views/supp-allowances/SupplementaryFormView.vue
@@ -221,6 +221,11 @@ export default {
       //disable all components on the form if user is in bad standing or does not have correct permissions
       return !this.hasGoodStanding || !this.hasPermission(this.PERMISSIONS.APPLY_FOR_FUNDING)
     },
+    transportAppsHaveZero() {
+      return this.models
+        .filter((el) => el.supplementaryType === SUPPLEMENTARY_TYPES.TRANSPORT)
+        ?.some((el) => el?.odometer === 0 || el?.odometer === '0' || el?.estimatedMileage === 0 || el?.estimatedMileage === '0')
+    },
   },
   watch: {
     back: {
@@ -243,7 +248,10 @@ export default {
     },
     next: {
       async handler() {
-        if (this.hasPermission(this.PERMISSIONS.APPLY_FOR_FUNDING)) {
+        if (this.transportAppsHaveZero) {
+          await this.$refs.form?.validate()
+          return
+        } else if (this.hasPermission(this.PERMISSIONS.APPLY_FOR_FUNDING)) {
           await this.saveApplication()
         }
         const applicationId = this.applicationId ? this.applicationId : this.$route.params.applicationGuid
@@ -296,6 +304,11 @@ export default {
       }
     },
     async saveApplication(showAlert = false) {
+      if (this.transportAppsHaveZero) {
+        await this.$refs.form?.validate()
+        this.setFailureAlert('Failed to save Transportation Allowance')
+        return
+      }
       try {
         this.loading = true
         this.$emit('process', true)