diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 1014f8b..c2aa59c 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -4,16 +4,61 @@ import { NewTasks } from './forms'
 import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
 import { InputCom } from '../../AddJob/settings';
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+    country: Yup.string()
+      .min(1, "Minimum 3 characters")
+      .max(25, "Maximum 25 characters")
+      .required("required"),
+    amount: Yup.number()
+      .typeError("Invalid number")
+      .min(1, "Must be greater than 0")
+      .test("no-e", "Invalid number", (value) => {
+        if (value && /\d+e/.test(value)) {
+          return false;
+        }
+        return true;
+      })
+      .required("required"),
+      job_description: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(499, "Maximum 499 characters")
+      .required("required"),
+    timeline: Yup.number()
+      .typeError("you must specify a number")
+      .min(1, "Must be greater than 0")
+      .required("required"),
+  });
+
+
+
 
 export default function AssignMediaTask({
     commonMedia,
     requestStatus,
-    assignFamilyTask,
+    setRequestStatus,
+    assignMediaTask,
     activeMedia,
     handleActiveMedia,
-    closeModal
+    closeModal,
+    family_uid
 }) {
 
+  // For form initial values
+    const initialValues = {
+        // initial values for formik
+        country: "",
+        amount: "",
+        job_description: "",
+        timeline: "",
+        media_uid: activeMedia.uid,
+        family_uid: family_uid,
+        media_type: "COMMON"
+    };
+
   const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
@@ -21,14 +66,6 @@ export default function AssignMediaTask({
   let imageSrc = (localStorage.getItem("session_token")
   ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
 
-//   const handleInputChange = (event) => {
-//     const { name, value } = event.target;
-//     setFormState((prevState) => ({
-//       ...prevState,
-//       [name]: value,
-//     }));
-//   };
-
   return (
     <>
          {commonMedia?.loading ? (
@@ -36,235 +73,251 @@ export default function AssignMediaTask({
                 <LoadingSpinner color="sky-blue" size="16" />
               </div>
             ) : (
-              <>
-                <div
-                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
-                >
-                  <div className="p-4 pt-0">
-                      <div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                        {commonMedia?.data?.length ? (
-                          commonMedia?.data?.map((item, index) => (
-                            <div
-                              key={item.uid}
-                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                              onClick={() => handleActiveMedia(item)}
-                            >
-                              <input
-                                type="radio"
-                                name="media-list"
-                                checked={activeMedia?.uid == item?.uid}
-                                onChange={() =>
-                                  handleActiveMedia(item)
-                                }
-                                className="w-[15px] h-[15px] cursor-pointer"
-                              />
-                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
-                                {item?.title}
-                              </p>
-                            </div>
-                          ))
-                        ) : (
-                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                            No Media found!
-                          </p>
-                        )}
-                      </div>
-                  </div>
-
-                  {/*Right Hand Side for details && Task Type === select */}
-                    <>
-                      {commonMedia?.data?.length > 0 ? (
-                        <div className="p-4 py-0 h-full">
-                          <div className="w-full">
-                            <div className="mb-3 w-full">
-                              <label className="job-label">
-                                Description
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                {activeMedia?.description}
-                              </p>
-                            </div>
-
-                            <div className="my-3 w-full flex items-center justify-center">
-                                <div className="w-full h-28 rounded-2xl flex items-center justify-center">
-                                    <img 
-                                      className="w-full h-full object-cover"
-                                      loading="lazy"
-                                      src={imageSrc} 
-                                      alt='job image' 
-                                    />
-                                </div>
-                            </div>
-                            <div className="grid grid-cols-2 gap-3">
-                                {/* Price */}
-                                <div className="field w-full">
-                                    <label htmlFor="price" className="job-label">Price</label>
-                                    <InputCom
-                                    fieldClass="px-6 text-right"
-                                    // label="Price"
-                                    // labelClass="tracking-wide"
-                                    inputBg="bg-slate-100"
-                                    type="number"
-                                    name="price"
-                                    placeholder="0"
-                                    // value={formState.price}
-                                    // inputHandler={handleInputChange}
-                                    // blurHandler={props.handleBlur}
-                                    // error={props.errors.price && props.touched.price && props.errors.price}
-                                    />
-                                </div>
-
-                                {/* Currency */}
-                                <div className="field w-full">
-                                    <label
-                                    htmlFor="country"
-                                    className="job-label"
-                                    >
-                                    Currency
-                                    {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
-                                    </label>
-                                    <select
-                                    id="country"
-                                    name="country"
-                                    // value={formState.country}
-                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                    // onChange={handleInputChange}
-                                    >
-                                    {walletDetails?.loading ? (
-                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                        Loading...
-                                        </option>
-                                    ) : walletDetails.data.length ? (
-                                        <>
-                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                            Currency
-                                        </option>
-                                        {walletDetails.data?.map((item, index) => (
-                                            <option
-                                            key={index}
-                                            className="text-slate-500 text-lg"
-                                            value={item?.country}
+                <Formik
+                initialValues={initialValues}
+                validationSchema={validationSchema}
+                onSubmit={(values, helpers)=>{assignMediaTask(values, helpers)}}
+              >
+                {(props) => {
+                  return (
+                        <Form>
+                            <>
+                                <div
+                                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
+                                >
+                                <div className="p-4 pt-0">
+                                    <div className="p-4 w-full min-h-[400px] max-h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                        {commonMedia?.data?.length ? (
+                                        commonMedia?.data?.map((item, index) => (
+                                            <div
+                                            key={item.uid}
+                                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                                            onClick={() => handleActiveMedia(item)}
                                             >
-                                            {item?.code}
-                                            </option>
-                                        ))}
-                                        </>
-                                    ) : (
-                                        <option className="text-slate-500 text-lg" value="">
-                                        No Options Found! Try Again
-                                        </option>
-                                    )}
-                                    </select>
+                                            <input
+                                                type="radio"
+                                                name="media-list"
+                                                checked={activeMedia?.uid == item?.uid}
+                                                onChange={() =>
+                                                handleActiveMedia(item)
+                                                }
+                                                className="w-[15px] h-[15px] cursor-pointer"
+                                            />
+                                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                                                {item?.title}
+                                            </p>
+                                            </div>
+                                        ))
+                                        ) : (
+                                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                                            No Media found!
+                                        </p>
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
 
-                            {/* Duration */}
-                            <div className="field w-full">
-                                <label
-                                htmlFor="timeline_days"
-                                className="job-label"
-                                >
-                                Timeline
-                                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
-                                </label>
-                                <select
-                                id="timeline_days"
-                                name="timeline_days"
-                                // value={formState.timeline_days}
-                                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                // onChange={handleInputChange}
-                                >
-                                {publicArray.length && (
+                                {/*Right Hand Side for details && Task Type === select */}
                                     <>
-                                    <option className="text-slate-500 text-[13.975px]" value="">
-                                        Duration
-                                    </option>
-                                    {publicArray.map(({ name, duration }, idx) => (
-                                        <option
-                                        key={idx}
-                                        className="text-slate-500 text-[13.975px]"
-                                        value={duration}
-                                        >
-                                        {name}
-                                        </option>
-                                    ))}
+                                    {commonMedia?.data?.length > 0 ? (
+                                        <div className="p-4 py-0 h-full">
+                                        <div className="w-full">
+                                            <div className="mb-3 w-full">
+                                            <label className="job-label">
+                                                Description
+                                            </label>
+                                            <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                                {activeMedia?.description}
+                                            </p>
+                                            </div>
+
+                                            <div className="my-3 w-full flex items-center justify-center">
+                                                <div className="w-full h-28 rounded-2xl flex items-center justify-center">
+                                                    <img 
+                                                    className="w-full h-full object-cover"
+                                                    loading="lazy"
+                                                    src={imageSrc} 
+                                                    alt='job image' 
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div className="grid grid-cols-2 gap-3">
+                                                {/* Price */}
+                                                <div className="field w-full">
+                                                    <label htmlFor="price" className="job-label flex gap-1">
+                                                        Price
+                                                        <span className='text-red-500 text-[10px]'>{props.errors.amount && props.touched.amount && props.errors.amount}</span>
+                                                    </label>
+                                                    <InputCom
+                                                    fieldClass="px-6 text-right"
+                                                    // label="Price"
+                                                    // labelClass="tracking-wide"
+                                                    inputBg="bg-slate-100"
+                                                    type="number"
+                                                    name="amount"
+                                                    placeholder="0"
+                                                    value={props.values.amount}
+                                                    inputHandler={props.handleChange}
+                                                    // error={props.errors.price && props.touched.price && props.errors.price}
+                                                    />
+                                                </div>
+
+                                                {/* Currency */}
+                                                <div className="field w-full">
+                                                    <label
+                                                    htmlFor="country"
+                                                    className="job-label flex gap-1"
+                                                    >
+                                                    Currency
+                                                    {props.errors.country && props.touched.country && <span className="text-[10px] text-red-500">{props.errors.country}</span>}
+                                                    </label>
+                                                    <select
+                                                    id="country"
+                                                    name="country"
+                                                    value={props.values.country}
+                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                    onChange={props.handleChange}
+                                                    >
+                                                    {walletDetails?.loading ? (
+                                                        <option className="text-slate-500 text-[13.975px]" value="">
+                                                        Loading...
+                                                        </option>
+                                                    ) : walletDetails.data.length ? (
+                                                        <>
+                                                        <option className="text-slate-500 text-[13.975px]" value="">
+                                                            Currency
+                                                        </option>
+                                                        {walletDetails.data?.map((item, index) => (
+                                                            <option
+                                                            key={index}
+                                                            className="text-slate-500 text-lg"
+                                                            value={item?.country}
+                                                            >
+                                                            {item?.code}
+                                                            </option>
+                                                        ))}
+                                                        </>
+                                                    ) : (
+                                                        <option className="text-slate-500 text-lg" value="">
+                                                        No Options Found! Try Again
+                                                        </option>
+                                                    )}
+                                                    </select>
+                                                </div>
+                                            </div>
+
+                                            {/* Duration */}
+                                            <div className="field w-full">
+                                                <label
+                                                htmlFor="timeline_days"
+                                                className="job-label flex gap-1"
+                                                >
+                                                Timeline
+                                                {props.errors.timeline && props.touched.timeline && <span className="text-[12px] text-red-500">{props.errors.timeline}</span>}
+                                                </label>
+                                                <select
+                                                id="timeline_days"
+                                                name="timeline"
+                                                value={props.values.timeline}
+                                                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                onChange={props.handleChange}
+                                                >
+                                                {publicArray.length && (
+                                                    <>
+                                                    <option className="text-slate-500 text-[13.975px]" value="">
+                                                        Duration
+                                                    </option>
+                                                    {publicArray.map(({ name, duration }, idx) => (
+                                                        <option
+                                                        key={idx}
+                                                        className="text-slate-500 text-[13.975px]"
+                                                        value={duration}
+                                                        >
+                                                        {name}
+                                                        </option>
+                                                    ))}
+                                                    </>
+                                                )}
+                                                </select>
+                                            </div>
+                                            
+                                            {/* Delivery Detail */}
+                                            <div className="my-3">
+                                            <label className="w-full job-label flex gap-1">
+                                                Delivery Detail
+                                                {props.errors.job_description && props.touched.job_description && <span className="text-[12px] text-red-500">{props.errors.job_description}</span>}
+                                            </label>
+                                            <textarea
+                                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                                                rows="5"
+                                                style={{ resize: "none" }}
+                                                value={props.values.job_description}
+                                                onChange={props.handleChange}
+                                                name='job_description'
+                                            />
+                                            </div>
+                                        </div>
+                                        </div>
+                                    ) : (
+                                        <></>
+                                    )}
                                     </>
-                                )}
-                                </select>
-                            </div>
-                            
-                            {/* Delivery Detail */}
-                            <div className="my-3">
-                              <label className="w-full job-label">
-                                Delivery Detail
-                              </label>
-                              <textarea
-                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                                rows="5"
-                                style={{ resize: "none" }}
-                                // value={activeMedia?.data?.job_detail}
-                                readOnly
-                                // onChange={handleInputChange}
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <></>
-                      )}
-                    </>
-                </div>
+                                </div>
 
-                {/* BTN */}
-                <div className="modal-footer-wrapper">
-                  {/* error or success display */}
-                  <div className="w-auto h-auto flex items-center">
-                    {requestStatus.message != "" &&
-                      (!requestStatus.status ? (
-                        <div
-                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
-                        >
-                          {requestStatus.message}
-                        </div>
-                      ) : (
-                        requestStatus.status && (
-                          <div
-                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          >
-                            {requestStatus.message}
-                          </div>
+                                {/* BTN */}
+                                <div className="modal-footer-wrapper">
+                                {/* error or success display */}
+                                <div className="w-auto h-auto flex items-center">
+                                    {requestStatus.message != "" &&
+                                    (!requestStatus.status ? (
+                                        <div
+                                        className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
+                                        >
+                                        {requestStatus.message}
+                                        </div>
+                                    ) : (
+                                        requestStatus.status && (
+                                        <div
+                                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                        >
+                                            {requestStatus.message}
+                                        </div>
+                                        )
+                                    ))}
+                                </div>
+
+                                {/* End of error or success display */}
+                                <div className="w-auto h-auto flex items-center gap-20">
+                                    <button
+                                    disabled={requestStatus.loading}
+                                    onClick={()=>closeModal()}
+                                    type="button"
+                                    className="custom-btn border-gradient"
+                                    >
+                                    <span className="text-gradient">Close</span>
+                                    </button>
+                                    <div className="">
+                                    {requestStatus.loading ? (
+                                        <LoadingSpinner color="sky-blue" size="8" />
+                                    ) : (
+                                        <button
+                                        type="submit"
+                                        disabled={requestStatus.loading}
+                                        // onClick={assignFamilyTask}
+                                        className="custom-btn btn-gradient text-white"
+                                        >
+                                        Assign
+                                        </button>
+                                    ) 
+                                    }
+                                    </div>
+                                </div>
+                                </div>
+                            </>
+                        </Form>
                         )
-                      ))}
-                  </div>
-
-                  {/* End of error or success display */}
-                  <div className="w-auto h-auto flex items-center gap-20">
-                    <button
-                      disabled={requestStatus.loading}
-                      onClick={()=>closeModal()}
-                      type="button"
-                      className="custom-btn border-gradient"
-                    >
-                      <span className="text-gradient">Close</span>
-                    </button>
-                    <div className="">
-                      {requestStatus.loading ? (
-                        <LoadingSpinner color="sky-blue" size="8" />
-                      ) : (
-                        <button
-                          type="button"
-                          disabled={requestStatus.loading}
-                          onClick={assignFamilyTask}
-                          className="custom-btn btn-gradient text-white"
-                        >
-                          Assign
-                        </button>
-                      ) 
-                      }
-                    </div>
-                  </div>
-                </div>
-              </>
+                    }
+                }
+            </Formik>
             )  
         }     
     </>
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index bf2b0ca..4561d9f 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -256,6 +256,25 @@ const AssignTaskPopout = ({
     action()
   }
 
+  const assignMediaTask = (values, helpers) => {  // FUNCTION TO HANDLE ASSIGNING MEDIA TASK
+    setRequestStatus({ loading: true, status: false, message: "" });
+
+    if(!selectedFamilyUid){ // If no family found, throw error
+      setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
+    }
+    // values.family_uid = selectedFamilyUid
+    // values.media_uid = activeMedia.uid
+    // values.amount = values.amount * 100
+    let reqData = {...values, family_uid:selectedFamilyUid, media_uid:activeMedia.uid, amount:values.amount * 100}
+    console.log(reqData)
+    return setTimeout(()=>{
+      setRequestStatus({ loading: false, status: false, message: "" });
+    },2000)
+  }
+
   useEffect(()=>{ // effect to update family UID when components mounts
     if(familyDetailsData?.uid){
       setSelectedFamilyUid(familyDetailsData?.uid)
@@ -338,6 +357,7 @@ const AssignTaskPopout = ({
                 name='task'
                 className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='task' && 'bg-yellow-500'}`}
                 onClick={switchAssignType}
+                disabled={requestStatus.loading}
               >
               Task
               </button>
@@ -345,6 +365,7 @@ const AssignTaskPopout = ({
                 name='media'
                 className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='media' && 'bg-yellow-500'}`}
                 onClick={switchAssignType}
+                disabled={requestStatus.loading}
               >
               Media
               </button>
@@ -367,10 +388,11 @@ const AssignTaskPopout = ({
                 <AssignMediaTask 
                   commonMedia={commonMedia}
                   requestStatus={requestStatus}
-                  assignFamilyTask={assignFamilyTask}
+                  assignMediaTask={assignMediaTask}
                   activeMedia={activeMedia}
                   handleActiveMedia={handleActiveMedia}
                   closeModal={closeModal}
+                  family_uid = {selectedFamilyUid}
                 />
               }
             </div>