diff --git a/src/components/05_quotation/FormReferDocument.vue b/src/components/05_quotation/FormReferDocument.vue
new file mode 100644
index 00000000..33e170a6
--- /dev/null
+++ b/src/components/05_quotation/FormReferDocument.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
+const alienReferenceNumber = defineModel<string>('alienReferenceNumber');
+const documentExpireDate = defineModel<Date>('documentExpireDate');
+
+defineProps<{
+  noAction?: boolean;
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  typeCustomer?: string;
+  employee?: boolean;
+  prefixId: string;
+  showBtnSave?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row col-12">
+    <div
+      class="col-12 items-center row justify-between q-pb-sm text-weight-bold text-body1"
+    >
+      <div>
+        <q-icon
+          flat
+          size="xs"
+          class="q-pa-sm rounded q-mr-xs"
+          color="info"
+          name="mdi-office-building-outline"
+          style="background-color: var(--surface-3)"
+        />
+        {{ $t(`${title}`) }}
+      </div>
+      <!-- v-if="!readonly" -->
+    </div>
+
+    <div class="col-12 row" style="gap: var(--size-2)">
+      <q-input
+        :for="`${prefixId}-input-alien-reference-number`"
+        :dense="dense"
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        :disable="!readonly"
+        class="col-4"
+        :label="$t('form.alienReferenceNumber')"
+        v-model="alienReferenceNumber"
+      />
+
+      <DatePicker
+        v-model="documentExpireDate"
+        class="col-4"
+        :id="`${prefixId}-input-document-expire-date`"
+        :label="$t('quotation.documentExpireDate')"
+        :readonly="readonly"
+        clearable
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.clear-btn {
+  opacity: 50%;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    opacity: 100%;
+  }
+}
+</style>