src/App.css

@@ -14,6 +14,10 @@
   border-radius: 10px;
 }
 
+.border-radius-10 {
+  border-radius: 10px;
+}
+
 .login-links{
   margin-top: 50px;
   display: flex;

src/component/profile_complete/ProfileCompleteCom.jsx

@@ -40,6 +40,7 @@ export default function ProfileCompleteCom() {
         practice: '',
         specialization: '',
         introduction: '',
+        url_name: ''
     })
 
     const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
@@ -215,6 +216,35 @@ export default function ProfileCompleteCom() {
                                             </div>
                                         </div>
 
+                                        <div className="">
+                                            <div className="form-group position-relative">
+                                                <label className={`text-black fw-bold control-label`}>URL Name :</label>
+                                                <div className="position-relative d-xxl-flex" style={{gap: '10px'}}>
+                                                    {/* <select onChange={handlePracticeChange} name='url_name'
+                                                            value={initialValues.url_name} className="form-control">
+                                                        <option value=''>Select</option>
+                                                        {practices.map((practice, index) => (
+                                                            <option key={index}
+                                                                    value={practice.practice}>{practice.practice}</option>
+                                                        ))}
+                                                    </select>
+                                                    <IoMdArrowDropdown className='position-absolute w-auto' style={{
+                                                        top: '50%',
+                                                        right: '2px',
+                                                        transform: 'translateY(-50%)'
+                                                    }}/> */}
+                                                    <input 
+                                                        className="form-control" 
+                                                        onChange={handlePracticeChange} name='url_name'
+                                                        value={initialValues.url_name} 
+                                                    />
+                                                    <p className="border-radius-10 p-2 border border-warning">We use the URL Name to form part of your default URL when we configure
+                                                        a new URL for your products. You can always change your product URL
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+
                                         {(mutation.isError || mutation.isSuccess) &&
                                             <>
                                                 <div className="">