diff --git a/frontend/components/cart/delivery/AddressModal.vue b/frontend/components/cart/delivery/AddressModal.vue
index e262c8f..d7f763d 100644
--- a/frontend/components/cart/delivery/AddressModal.vue
+++ b/frontend/components/cart/delivery/AddressModal.vue
@@ -5,6 +5,8 @@ import useCreateOrUpdateAddress from "~/composables/api/account/useCreateOrUpdat
 import useGetAccount from "~/composables/api/account/useGetAccount";
 import { QUERY_KEYS } from "~/constants";
 import { useToast } from "~/composables/global/useToast";
+import useVuelidate from "@vuelidate/core";
+import { helpers, required, minLength } from "@vuelidate/validators";
 
 // types
 
@@ -42,6 +44,35 @@ const addressData = ref({
     is_main: address.value?.is_main ?? false,
 });
 
+// computed
+
+const formRules = computed(() => {
+    return {
+        province: {
+            required: helpers.withMessage("فیلد استان سکونت الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد استان سکونت حداقل 2 کرکتر می باشد", minLength(2)),
+        },
+        city: {
+            required: helpers.withMessage("فیلد شهر سکونت الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد شهر سکونت حداقل 2 کرکتر می باشد", minLength(2)),
+        },
+        postal_code: {
+            required: helpers.withMessage("فیلد کد پستی الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد کد پستی حداقل 10 کرکتر می باشد", minLength(10)),
+        },
+        address: {
+            required: helpers.withMessage("فیلد آدرس کامل الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد آدرس کامل حداقل 2 کرکتر می باشد", minLength(2)),
+        },
+        phone: {
+            required: helpers.withMessage("فیلد تلفن همراه الزامی می باشد", required),
+            minLength: helpers.withMessage("فیلد تلفن همراه حداقل 10 کرکتر می باشد", minLength(10)),
+        },
+    };
+});
+
+const formValidator$ = useVuelidate(formRules, addressData);
+
 // queries
 
 const { data: account } = useGetAccount();
@@ -64,35 +95,42 @@ const closeModal = () => {
             is_main: false,
         };
     }
+    formValidator$.value.$reset();
     isShow.value = false;
 };
 
-const addNew = () => {
-    createOrUpdateAddress(
-        { ...addressData.value },
-        {
-            onSuccess: () => {
-                queryClient.invalidateQueries({
-                    queryKey: [QUERY_KEYS.addresses],
-                });
-                closeModal();
-                addToast({
-                    message: isEditing.value ? "آدرس با موفقیت ویرایش شد" : "آدرس با موفقیت اضافه شد",
-                    options: {
-                        status: "success",
-                    },
-                });
-            },
-            onError: () => {
-                addToast({
-                    message: isEditing.value ? "آدرس با موفقیت ویرایش شد" : "مشکلی در افزودن آدرس رخ داد",
-                    options: {
-                        status: "error",
-                    },
-                });
-            },
-        }
-    );
+const handleSubmit = async () => {
+    await formValidator$.value.$validate();
+    if (!formValidator$.value.$errors.length) {
+        createOrUpdateAddress(
+            { ...addressData.value },
+            {
+                onSuccess: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.addresses],
+                    });
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.cart],
+                    });
+                    closeModal();
+                    addToast({
+                        message: isEditing.value ? "آدرس با موفقیت ویرایش شد" : "آدرس با موفقیت اضافه شد",
+                        options: {
+                            status: "success",
+                        },
+                    });
+                },
+                onError: () => {
+                    addToast({
+                        message: isEditing.value ? "آدرس با موفقیت ویرایش شد" : "مشکلی در افزودن آدرس رخ داد",
+                        options: {
+                            status: "error",
+                        },
+                    });
+                },
+            }
+        );
+    }
 };
 
 watch(
@@ -122,9 +160,9 @@ watch(
             <Button
                 :end-icon="!!address ? 'bi:pen' : 'ci:plus'"
                 size="md"
-                class="rounded-full"
+                class="rounded-full transition-all"
                 :variant="!!address ? 'ghost' : 'solid'"
-                :class="!!address ? '!bg-transparent !underline' : ''"
+                :class="!!address ? '!bg-transparent !underline underline-offset-4' : ''"
             >
                 <span class="whitespace-pre max-lg:text-xs">
                     {{ !!address ? "ویرایش" : "افزودن آدرس" }}
@@ -138,115 +176,111 @@ watch(
                 dir="rtl"
             >
                 <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="name"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                            >نام پیش فرض <span class="text-sm text-red-500">*</span></label
-                        >
-
+                    <DataField
+                        id="name"
+                        label="نام پیش فرض"
+                    >
                         <Input
                             id="name"
                             type="text"
                             placeholder="اینجا وارد کنید ..."
                             v-model="addressData.name!"
                         />
-                    </div>
-
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="province"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                        >
-                            آدرس شما؟
-                            <span class="text-sm text-red-500"> * </span>
-                        </label>
+                    </DataField>
 
+                    <DataField
+                        id="for_me"
+                        label="آدرس شما؟"
+                        :required="true"
+                    >
                         <Select
+                            id="for_me"
                             :options="['بله', 'خیر']"
                             placeholder="انتخاب کنید"
                             v-model="addressData.for_me as string"
                         />
-                    </div>
-
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="phone"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                            >شماره تلفن <span class="text-sm text-red-500">*</span></label
-                        >
+                    </DataField>
 
+                    <DataField
+                        id="phone"
+                        label="تلفن همراه"
+                        :required="true"
+                        :error="formValidator$.phone"
+                    >
                         <Input
                             id="phone"
                             type="text"
                             placeholder="اینجا وارد کنید ..."
+                            :error="formValidator$.phone.$error"
                             v-model="addressData.phone!"
                         />
-                    </div>
-
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="province"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                            >استان
-                            <span class="text-sm text-red-500">*</span>
-                        </label>
+                    </DataField>
 
+                    <DataField
+                        id="province"
+                        label="استان"
+                        :required="true"
+                        :error="formValidator$.province"
+                    >
                         <Input
                             id="province"
                             type="text"
                             placeholder="اینجا وارد کنید ..."
+                            :error="formValidator$.province.$error"
                             v-model="addressData.province!"
                         />
-                    </div>
+                    </DataField>
 
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="city"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                            >شهر <span class="text-sm text-red-500">*</span></label
-                        >
+                    <DataField
+                        id="city"
+                        label="شهر"
+                        :required="true"
+                        :error="formValidator$.city"
+                    >
                         <Input
                             id="city"
                             type="text"
                             placeholder="اینجا وارد کنید ..."
+                            :error="formValidator$.city.$error"
                             v-model="addressData.city!"
                         />
-                    </div>
+                    </DataField>
 
-                    <div class="flex flex-col gap-2">
-                        <label
-                            for="post"
-                            class="text-xs font-semibold lg:text-sm text-gray-900"
-                            >کد پستی <span class="text-sm text-red-500">*</span></label
-                        >
+                    <DataField
+                        id="postal_code"
+                        label="کد پستی"
+                        :required="true"
+                        :error="formValidator$.postal_code"
+                    >
                         <Input
-                            id="post"
+                            id="postal_code"
                             type="text"
                             placeholder="اینجا وارد کنید ..."
+                            :error="formValidator$.postal_code.$error"
                             v-model="addressData.postal_code!"
                         />
-                    </div>
+                    </DataField>
                 </div>
 
-                <div class="flex flex-col w-full gap-2">
-                    <label
-                        for="address"
-                        class="text-xs font-semibold lg:text-sm text-gray-900"
-                        >آدرس کامل <span class="text-sm text-red-500">*</span></label
-                    >
-                    <textarea
+                <DataField
+                    id="address"
+                    label="آدرس کامل"
+                    :required="true"
+                    :error="formValidator$.address"
+                >
+                    <Textarea
                         id="address"
                         placeholder="آدرس خود را بنویسید"
                         v-model="addressData.address"
-                        class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-1.5 lg:py-3.5 selection:bg-slate-100 rounded-md lg:rounded-100 outline-none flex-1 text-xs lg:!text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
-                    ></textarea>
-                </div>
+                        :error="formValidator$.address.$error"
+                        class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-2.5 lg:py-3 leading-[175%] selection:bg-slate-100 rounded-md lg:rounded-100 outline-none max-lg:h-[5rem] lg:flex-1 text-xs lg:!text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
+                    ></Textarea>
+                </DataField>
 
                 <div class="flex items-center justify-between w-full gap-2">
                     <label
                         for="is_main"
-                        class="text-xs font-semibold lg:text-sm text-gray-900"
+                        class="text-xs font-medium lg:text-sm text-gray-900"
                     >
                         به عنوان آدرس پیش فرض ثبت شود؟
                     </label>
@@ -260,7 +294,7 @@ watch(
             <div class="py-6 border-t border-slate-200 flex gap-3">
                 <Button
                     :disabled="createAddressIsPending"
-                    @click="addNew"
+                    @click="handleSubmit"
                     class="rounded-full px-10"
                     size="md"
                 >