diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 20ad844..db77643 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -250,8 +250,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 w-full md:w-2/4 md:border-r-2">
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
+          <div className="p-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -277,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 />
             </div>
 
-            <div className="my-3">
+            <div className="">
               <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
@@ -293,155 +293,163 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/4 h-full">
-            <div className="grid grid-cols-3 mt-4">
-              {tabs.map(item => (
-                <button 
-                  // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
-                  className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
-                  value={item} 
-                  name={item}
-                  onClick={()=>setSelectedTab(item)}
+          <div className="p-4 w-ful flex flex-col justify-between">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
+            <div className="flex flex-col grow">
+              <div className="grid grid-cols-3 mt-4">
+                {tabs.map(item => (
+                  <button 
+                    // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
+                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
+                    value={item} 
+                    name={item}
+                    onClick={()=>setSelectedTab(item)}
+                  >
+                    <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                    {item[0].toUpperCase() + item.slice(1)}
+                  </button>
+                ))}
+              </div>
+              <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+                {selectedTab == 'family' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.family}
+                  onSubmit={jobFieldHandler}
                 >
-                  <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
-                  {item[0].toUpperCase() + item.slice(1)}
-                </button>
-              ))}
+                  {(props) => {
+                    return (
+                      <Form className="hidden">
+                        {/* Assign to Family */}
+                        <JobFieldInput
+                          label="Assign to family"
+                          select={true}
+                          inputName="family"
+                          value={props?.values.family}
+                          data={familyList}
+                          btnText="Assign to family"
+                          optionText="Select Family"
+                          loader={loader?.jobFields?.family}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values?.family === "" && (
+                            <span>{errMsg?.jobFields?.family}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {selectedTab == 'public' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.public}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to public input */}
+                        <JobFieldInput
+                          label="Offer this job to public"
+                          select={true}
+                          inputName="public"
+                          value={props?.values.public}
+                          data={publicArray}
+                          btnText="Show Task to Public"
+                          optionText="Select Duration"
+                          loader={loader?.jobFields?.public}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.public === "" && (
+                            <span>{errMsg?.jobFields?.public}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+
+                {selectedTab == 'individual' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.individual}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to individual input */}
+                        <JobFieldInput
+                          label="Offer this job to individual"
+                          input={true}
+                          inputName="individual"
+                          value={props?.values.individual}
+                          placeholder="Enter email of individual"
+                          inputHandler={props?.handleChange}
+                          btnText="Send Offer to Individual"
+                          loader={loader?.jobFields?.individual}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.individual === "" && (
+                            <span>{errMsg?.jobFields?.individual}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                {selectedTab == 'group' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.group}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to your group input */}
+                        <JobFieldInput
+                          label="Offer this job to your Group"
+                          select={true}
+                          inputName="group"
+                          value={props?.values.group}
+                          btnText="Send Order to Group"
+                          optionText="Select Group"
+                          loader={loader?.jobFields?.group}
+                          errorHandler={errorHandler}
+                          data={groupList}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.group === "" && (
+                            <span>{errMsg?.jobFields?.group}</span>
+                          )}
+                        </p>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+              </div>
             </div>
 
-            {selectedTab == 'family' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.family}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4 hidden">
-                    {/* Assign to Family */}
-                    <JobFieldInput
-                      label="Assign to family"
-                      select={true}
-                      inputName="family"
-                      value={props?.values.family}
-                      data={familyList}
-                      btnText="Assign to family"
-                      optionText="Select Family"
-                      loader={loader?.jobFields?.family}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values?.family === "" && (
-                        <span>{errMsg?.jobFields?.family}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-            
-            {selectedTab == 'public' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.public}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to public input */}
-                    <JobFieldInput
-                      label="Offer this job to public"
-                      select={true}
-                      inputName="public"
-                      value={props?.values.public}
-                      data={publicArray}
-                      btnText="Show Task to Public"
-                      optionText="Select Duration"
-                      loader={loader?.jobFields?.public}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.public === "" && (
-                        <span>{errMsg?.jobFields?.public}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-
-            {selectedTab == 'individual' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.individual}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to individual input */}
-                    <JobFieldInput
-                      label="Offer this job to individual"
-                      input={true}
-                      inputName="individual"
-                      value={props?.values.individual}
-                      placeholder="Enter email of individual"
-                      inputHandler={props?.handleChange}
-                      btnText="Send Offer to Individual"
-                      loader={loader?.jobFields?.individual}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.individual === "" && (
-                        <span>{errMsg?.jobFields?.individual}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-            
-            {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-            {selectedTab == 'group' &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.group}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to your group input */}
-                    <JobFieldInput
-                      label="Offer this job to your Group"
-                      select={true}
-                      inputName="group"
-                      value={props?.values.group}
-                      btnText="Send Order to Group"
-                      optionText="Select Group"
-                      loader={loader?.jobFields?.group}
-                      errorHandler={errorHandler}
-                      data={groupList}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.group === "" && (
-                        <span>{errMsg?.jobFields?.group}</span>
-                      )}
-                    </p>
-                  </Form>
-                );
-              }}
-            </Formik>
-            }
-
             {requestStatus.message &&
               <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
             }
@@ -473,7 +481,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -561,6 +569,7 @@ const JobFieldInput = ({
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
+          parentClass={`${parentClass}`}
         />
       )}