diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 1014f8b..19aae99 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -1,19 +1,67 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, lazy, Suspense } from 'react'
 import LoadingSpinner from '../../Spinners/LoadingSpinner'
 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"),
+  });
+
+
+
+const VideoElement = lazy(() => import("../../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
 
 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 +69,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 +76,248 @@ 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 max-w-xs h-28 rounded-2xl flex items-center justify-center">
+                                                    <Suspense fallback={<p>Loading...</p>}>
+                                                        <VideoElement videoId={activeMedia?.uid} />
+                                                    </Suspense>
+                                                </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..545f6b8 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -187,13 +187,6 @@ const AssignTaskPopout = ({
       };
     }
 
-    if(assignType == 'media'){ // FOR ASSIGNING MEDIA TASK
-      setRequestStatus({ loading: false, status: false, message: "You cannnot assign, work still process" });
-      return setTimeout(()=>{
-        setRequestStatus({ loading: false, status: false, message: "" });
-      },2000)
-    }
-
     apiCall
       .assignFamilyTask(reqData)
       .then((res) => {
@@ -256,6 +249,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, assign_mode:'110012', 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 +350,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 +358,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 +381,11 @@ const AssignTaskPopout = ({
                 <AssignMediaTask 
                   commonMedia={commonMedia}
                   requestStatus={requestStatus}
-                  assignFamilyTask={assignFamilyTask}
+                  assignMediaTask={assignMediaTask}
                   activeMedia={activeMedia}
                   handleActiveMedia={handleActiveMedia}
                   closeModal={closeModal}
+                  family_uid = {selectedFamilyUid}
                 />
               }
             </div>
diff --git a/src/components/FamilyAcc/FamilyPopout/dummy.jsx b/src/components/FamilyAcc/FamilyPopout/dummy.jsx
deleted file mode 100644
index 375a573..0000000
--- a/src/components/FamilyAcc/FamilyPopout/dummy.jsx
+++ /dev/null
@@ -1,232 +0,0 @@
-{familyTask?.loading ? (
-    <div className="h-[30rem] w-full flex justify-center items-center">
-      <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 ${
-          taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
-        }`}
-      >
-        <div className="p-4">
-          <div className="mb-2 w-full flex items-center gap-4">
-            <div className="flex items-center gap-2 text-sky-blue text-base">
-              <input
-                type="radio"
-                name="task-type"
-                value="select"
-                className="w-[20px] h-[20px] cursor-pointer"
-                checked={taskType == "select"}
-                onChange={switchTaskType}
-              />
-              <span className="text-lg tracking-wide font-semibold">Previous Task</span>
-            </div>
-            <div className="flex items-center gap-2 text-sky-blue text-base">
-              <input
-                type="radio"
-                name="task-type"
-                value="new"
-                className="w-[20px] h-[20px] cursor-pointer"
-                checked={taskType == "new"}
-                onChange={switchTaskType}
-              />
-              <span className="text-lg tracking-wide font-semibold">New Task</span>
-            </div>
-          </div>
-          {/* Task Type === select */}
-          {taskType == "select" && (
-            <div className="p-4 w-full h-[380px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-              {familyTask?.data?.length ? (
-                familyTask?.data?.map((item, index) => (
-                  <div
-                    key={item.job_uid}
-                    className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                    onClick={() => handleActiveTask(item.job_uid, item)}
-                  >
-                    <input
-                      type="radio"
-                      name="task-list"
-                      checked={
-                        activeTask.id == item.job_uid ||
-                        (activeTask.id == index && true)
-                      }
-                      onChange={() =>
-                        handleActiveTask(item.job_uid, 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 Task found!
-                </p>
-              )}
-            </div>
-          )}
-          {taskType == "new" && (
-            <div className="p-4 w-full">
-              <NewTasks
-                formState={formState}
-                setFormState={setFormState}
-              />
-            </div>
-          )}
-        </div>
-
-        {/*Right Hand Side for details && Task Type === select */}
-        {taskType == "select" && (
-          <>
-            {familyTask?.data?.length > 0 ? (
-              <div className="p-4">
-                <div className="w-full">
-                  <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
-                    {activeTask?.data?.title}
-                  </p>
-                  {/* <div className="my-3">
-                    <Detail
-                      label="Description"
-                      value={activeTask?.data?.description}
-                    />
-                  </div> */}
-                  <div className="my-3 w-full">
-                    <label className="job-label">
-                      Description
-                    </label>
-                    <p className="p-1 text-sm text-slate-900 dark:text-white">
-                      {activeTask?.data?.description}
-                    </p>
-                  </div>
-                  <div className="grid grid-cols-2">
-                    <div className="w-full">
-                      <div className="my-3 w-full flex items-center gap-1">
-                        <label className="job-label">
-                          Reward
-                        </label>
-                        <p className="p-1 text-sm text-slate-900 dark:text-white">
-                          {PriceFormatter(
-                            activeTask?.data?.price * 0.01,
-                            activeTask?.data?.currency,
-                            activeTask?.data?.curreny_code
-                          )}
-                        </p>
-                      </div>
-
-                      <div className="my-3 w-full flex items-center gap-1">
-                        <label className="job-label">
-                          Timeline
-                        </label>
-                        <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
-                      </div>
-                    </div>
-                    <div className="w-full flex items-center justify-center">
-                      <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
-                          <img 
-                            className="w-full h-auto"
-                            loading="lazy"
-                            src={imageSrc} 
-                            alt='job image' 
-                          />
-                      </div>
-                    </div>
-                  </div>
-                  
-                  {/* Dummy, no value found for created! thus commented*/}
-                  {/* <div className="my-3 sm:flex items-center">
-                    <Detail
-                      label="Created"
-                      value={`Dummy, no value found for created!`}
-                    />
-                  </div> */}
-
-                  <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={activeTask?.data?.job_detail}
-                      readOnly
-                      // onChange={handleInputChange}
-                    />
-                  </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>
-              )
-            ))}
-        </div>
-
-        {/* End of error or success display */}
-        <div className="w-auto h-auto flex items-center gap-20">
-          <button
-            disabled={requestStatus.loading}
-            onClick={action}
-            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>
-            ) 
-            // : (
-            //   <button
-            //     type="button"
-            //     disabled={requestStatus.loading}
-            //     onClick={assignFamilyTask}
-            //     className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-            //   >
-            //     {details
-            //       ? `Assign task to ${details?.firstname}`
-            //       : familyDetailsData
-            //       ? `Assign task to ${familyDetailsData.firstname}`
-            //       : "Assign"}
-            //   </button>
-            // )
-            }
-          </div>
-        </div>
-      </div>
-    </>
-  )}
\ No newline at end of file
diff --git a/src/components/VideoCom/VideoElement.jsx b/src/components/VideoCom/VideoElement.jsx
new file mode 100644
index 0000000..aed358e
--- /dev/null
+++ b/src/components/VideoCom/VideoElement.jsx
@@ -0,0 +1,22 @@
+import React, { useEffect, useRef } from 'react'
+
+  
+export default function VideoElement({videoId}) {
+  let videoRef = useRef(null)
+
+  useEffect(()=>{
+    if(videoRef.current){
+        videoRef.current.pause()
+        videoRef.current.removeAttribute('src')
+        videoRef.current.load()
+    }
+  },[videoId])
+
+  return (
+    <video ref={videoRef} className='w-full h-full' controls autoPlay>
+      <source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
+      Your browser does not support the video tag.
+  </video>
+  )
+}
+  
\ No newline at end of file
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index d15521d..9938ec3 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -1343,7 +1343,19 @@ class usersService {
     };
     return this.postAuxEnd("/commonmedia", postData);
   }
-  
+
+  // API FUNCTION FOR PARENT TO ASSIGN MEDIA TASK
+  parentAssignMediaTask(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
+      ...reqData
+    };
+    return this.postAuxEnd("/assignmediatask", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)