diff --git a/src/pages/orders/components/CreateOrderCustomerSection.tsx b/src/pages/orders/components/CreateOrderCustomerSection.tsx
index d6f9049..5410871 100644
--- a/src/pages/orders/components/CreateOrderCustomerSection.tsx
+++ b/src/pages/orders/components/CreateOrderCustomerSection.tsx
@@ -3,6 +3,8 @@ import { Profile, SearchNormal, TickCircle, UserAdd } from 'iconsax-react'
 import type { FormikProps } from 'formik'
 import { toast } from 'react-toastify'
 import { clx } from '@/helpers/utils'
+import Button from '@/components/Button'
+import DefaulModal from '@/components/DefaulModal'
 import Input from '@/components/Input'
 import { useSearchUserByPhone } from '@/pages/customers/hooks/useUsersData'
 import type { UserWithAddresses } from '@/pages/customers/types/Types'
@@ -28,6 +30,7 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
 }) => {
     const { mutate: searchUser, isPending: isSearching } = useSearchUserByPhone()
     const [searchState, setSearchState] = useState<CustomerSearchState>('idle')
+    const [isCustomerModalOpen, setIsCustomerModalOpen] = useState(false)
 
     const handleSearch = () => {
         const phone = formik.values.userPhone.trim()
@@ -87,131 +90,159 @@ const CreateOrderCustomerSection: FC<CreateOrderCustomerSectionProps> = ({
             : ''
 
     return (
-        <div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
-            <div className='flex items-center justify-between gap-3 mb-3'>
-                <div className='flex items-center gap-2'>
-                    <div
-                        className={clx(
-                            'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
-                            searchState === 'found'
-                                ? 'bg-green-50'
-                                : searchState === 'not_found'
-                                  ? 'bg-[#EEF0F7]'
-                                  : 'bg-[#EEF0F7]',
-                        )}
-                    >
-                        {searchState === 'found' ? (
-                            <TickCircle size={18} color='#16A34A' />
-                        ) : searchState === 'not_found' ? (
-                            <UserAdd size={18} color='#8C90A3' />
-                        ) : (
-                            <Profile size={18} color='#8C90A3' />
-                        )}
-                    </div>
-                    <div>
-                        <div className='text-sm font-light'>اطلاعات مشتری</div>
-                        {searchState === 'found' && customerName && (
-                            <div className='text-[11px] text-green-600 mt-0.5'>
-                                {customerName}
-                            </div>
-                        )}
-                        {searchState === 'not_found' && (
-                            <div className='text-[11px] text-description mt-0.5'>
-                                مشتری جدید
-                            </div>
-                        )}
-                    </div>
-                </div>
-
-                {searchState === 'found' && (
-                    <span className='text-[11px] text-green-600 bg-green-50 rounded-full px-3 py-1 flex-shrink-0'>
-                        مشتری یافت شد
-                    </span>
-                )}
-                {searchState === 'idle' && (
-                    <span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-3 py-1 flex-shrink-0 hidden sm:inline'>
-                        ابتدا شماره را جستجو کنید
-                    </span>
-                )}
-            </div>
-
-            <div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
-                <div className='w-full'>
-                    <label className='text-xs text-description'>شماره تلفن</label>
-                    <div className='flex mt-1'>
-                        <input
-                            name='userPhone'
-                            placeholder='۰۹۱۲۱۲۳۴۵۶۷'
-                            value={formik.values.userPhone}
-                            onChange={handlePhoneChange}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                    e.preventDefault()
-                                    handleSearch()
-                                }
-                            }}
+        <>
+            <div className='w-full bg-white rounded-4xl px-5 py-4 flex-shrink-0'>
+                <div className='flex items-center justify-between gap-3'>
+                    <div className='flex items-center gap-2'>
+                        <div
                             className={clx(
-                                'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white',
-                                'rounded-r-xl border-l-0 focus:outline-none',
-                                phoneError && 'border-red-400',
-                            )}
-                        />
-                        <button
-                            type='button'
-                            disabled={isSearching}
-                            onClick={handleSearch}
-                            className={clx(
-                                'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
-                                'bg-primary text-white text-xs rounded-l-xl',
-                                'hover:opacity-90 transition-opacity disabled:opacity-60',
+                                'w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 transition-colors',
+                                searchState === 'found' ? 'bg-green-50' : 'bg-[#EEF0F7]',
                             )}
                         >
-                            {isSearching ? (
-                                <span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
+                            {searchState === 'found' ? (
+                                <TickCircle size={18} color='#16A34A' />
+                            ) : searchState === 'not_found' ? (
+                                <UserAdd size={18} color='#8C90A3' />
                             ) : (
-                                <SearchNormal size={16} color='#fff' />
+                                <Profile size={18} color='#8C90A3' />
                             )}
-                            <span className='hidden sm:inline'>جستجو</span>
-                        </button>
+                        </div>
+                        <div>
+                            <div className='text-sm font-light flex items-center gap-2'>
+                                اطلاعات مشتری
+                                <span className='text-[11px] text-description bg-[#F8F9FC] rounded-full px-2 py-0.5'>
+                                    اختیاری
+                                </span>
+                            </div>
+                            {searchState === 'found' && customerName && (
+                                <div className='text-[11px] text-green-600 mt-0.5'>
+                                    {customerName}
+                                </div>
+                            )}
+                            {searchState === 'not_found' && (
+                                <div className='text-[11px] text-description mt-0.5'>
+                                    مشتری جدید
+                                </div>
+                            )}
+                            {searchState === 'idle' && (
+                                <div className='text-[11px] text-description mt-0.5'>
+                                    برای این سفارش وارد کردن اطلاعات مشتری الزامی نیست
+                                </div>
+                            )}
+                        </div>
                     </div>
-                    {phoneError && (
-                        <p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
-                    )}
+                    <Button
+                        type='button'
+                        className='w-fit px-4 h-10'
+                        onClick={() => setIsCustomerModalOpen(true)}
+                    >
+                        {searchState === 'idle' ? 'افزودن مشتری' : 'ویرایش مشتری'}
+                    </Button>
                 </div>
-
-                <Input
-                    label='نام'
-                    name='firstName'
-                    placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
-                    value={formik.values.firstName}
-                    onChange={formik.handleChange}
-                    readOnly={isCustomerLocked}
-                    disabled={isNameDisabled}
-                    className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
-                    error_text={
-                        formik.touched.firstName && formik.errors.firstName
-                            ? formik.errors.firstName
-                            : ''
-                    }
-                />
-
-                <Input
-                    label='نام خانوادگی'
-                    name='lastName'
-                    placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
-                    value={formik.values.lastName}
-                    onChange={formik.handleChange}
-                    readOnly={isCustomerLocked}
-                    disabled={isNameDisabled}
-                    className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
-                    error_text={
-                        formik.touched.lastName && formik.errors.lastName
-                            ? formik.errors.lastName
-                            : ''
-                    }
-                />
             </div>
-        </div>
+
+            <DefaulModal
+                open={isCustomerModalOpen}
+                close={() => setIsCustomerModalOpen(false)}
+                isHeader={true}
+                title_header='اطلاعات مشتری'
+                width={700}
+            >
+                <div className='p-2'>
+                    <div className='text-xs text-description mb-4'>
+                        اطلاعات مشتری اختیاری است و در صورت نیاز می‌توانید ثبت کنید.
+                    </div>
+
+                    <div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-[1.2fr_1fr_1fr] gap-3 xl:items-end'>
+                        <div className='w-full'>
+                            <label className='text-xs text-description'>شماره تلفن</label>
+                            <div className='flex mt-1'>
+                                <input
+                                    name='userPhone'
+                                    placeholder='۰۹۱۲۱۲۳۴۵۶۷'
+                                    value={formik.values.userPhone}
+                                    onChange={handlePhoneChange}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault()
+                                            handleSearch()
+                                        }
+                                    }}
+                                    className={clx(
+                                        'flex-1 min-w-0 h-10 text-xs px-4 border border-border bg-white',
+                                        'rounded-r-xl border-l-0 focus:outline-none',
+                                        phoneError && 'border-red-400',
+                                    )}
+                                />
+                                <button
+                                    type='button'
+                                    disabled={isSearching}
+                                    onClick={handleSearch}
+                                    className={clx(
+                                        'h-10 px-4 flex items-center gap-1.5 flex-shrink-0',
+                                        'bg-primary text-white text-xs rounded-l-xl',
+                                        'hover:opacity-90 transition-opacity disabled:opacity-60',
+                                    )}
+                                >
+                                    {isSearching ? (
+                                        <span className='w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin' />
+                                    ) : (
+                                        <SearchNormal size={16} color='#fff' />
+                                    )}
+                                    <span className='hidden sm:inline'>جستجو</span>
+                                </button>
+                            </div>
+                            {phoneError && (
+                                <p className='text-[11px] text-red-500 mt-1'>{phoneError}</p>
+                            )}
+                        </div>
+
+                        <Input
+                            label='نام'
+                            name='firstName'
+                            placeholder={isNameDisabled ? 'پس از جستجو' : 'نام'}
+                            value={formik.values.firstName}
+                            onChange={formik.handleChange}
+                            readOnly={isCustomerLocked}
+                            disabled={isNameDisabled}
+                            className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
+                            error_text={
+                                formik.touched.firstName && formik.errors.firstName
+                                    ? formik.errors.firstName
+                                    : ''
+                            }
+                        />
+
+                        <Input
+                            label='نام خانوادگی'
+                            name='lastName'
+                            placeholder={isNameDisabled ? 'پس از جستجو' : 'نام خانوادگی'}
+                            value={formik.values.lastName}
+                            onChange={formik.handleChange}
+                            readOnly={isCustomerLocked}
+                            disabled={isNameDisabled}
+                            className={isNameDisabled ? 'bg-[#F8F9FC] border-0 text-description cursor-not-allowed' : ''}
+                            error_text={
+                                formik.touched.lastName && formik.errors.lastName
+                                    ? formik.errors.lastName
+                                    : ''
+                            }
+                        />
+                    </div>
+
+                    <div className='mt-5 flex justify-end'>
+                        <Button
+                            type='button'
+                            className='w-fit px-6'
+                            onClick={() => setIsCustomerModalOpen(false)}
+                        >
+                            تایید
+                        </Button>
+                    </div>
+                </div>
+            </DefaulModal>
+        </>
     )
 }