diff --git a/src/components/common/VnAccountNumber.vue b/src/components/common/VnAccountNumber.vue
new file mode 100644
index 0000000000..3568ad9144
--- /dev/null
+++ b/src/components/common/VnAccountNumber.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { QInput } from 'quasar';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
+
+let internalValue = ref(props.modelValue);
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        internalValue.value = newVal;
+    }
+);
+
+watch(
+    () => internalValue.value,
+    (newVal) => {
+        emit('update:modelValue', newVal);
+        accountShortToStandard();
+    }
+);
+
+function accountShortToStandard() {
+    internalValue.value = internalValue.value.replace(
+        '.',
+        '0'.repeat(11 - internalValue.value.length)
+    );
+    emit('accountShortToStandard', internalValue.value);
+}
+</script>
+
+<template>
+    <q-input v-model="internalValue" />
+</template>