diff --git a/src/assets/images/qr-sample.png b/src/assets/images/qr-sample.png
new file mode 100644
index 0000000..e39f3ca
Binary files /dev/null and b/src/assets/images/qr-sample.png differ
diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index bac4931..7bda2ad 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -36,16 +36,6 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-// let initialValues = {
-//   // initial values for formik
-//   country: "NG",
-//   price: 0,
-//   title: "",
-//   description: "",
-//   job_detail: "",
-//   timeline_days: "",
-// };
-
 function AddJob() {
   const ApiCall = new usersService();
   const navigate = useNavigate();
diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index c17f860..355708c 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
+import qrSample from "../../assets/images/qr-sample.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
 
@@ -99,7 +100,7 @@ export default function FamilyManageTabs({
                 accountDetails={accountDetails}
               />
             </div>
-            <div className="col-span-3 p-6 h-full w-full">
+            <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
                 <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
                   {tabs.map(({ name, id }) => (
@@ -213,7 +214,9 @@ function ProfileInfo({
 
 function Account({ familyDetails }) {
   return (
-    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
+    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
+        <div className="flex items-center justify-around h-[380px]">
       <div className="flex flex-col">
         <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
@@ -222,6 +225,18 @@ function Account({ familyDetails }) {
           Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
         </h2>
       </div>
+
+      <span className="text-5xl text-gray-400 opacity-20 font-bold">or</span>
+
+<div className="">
+  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">scan the code from mobile app</p>
+<img src={qrSample} alt="qr-sample" className="h-[200px] w-[200px]" />
+</div>
+        </div>
+      <div className="h-[50px] w-full flex justify-center items-center">
+        <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center">Print</button>
+      </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index a65e54f..8801227 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -245,20 +245,34 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                     </div>
 
                     <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Timeline"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-[#dce4e9]"
-                        type="text"
-                        name="timeline_days"
-                        spanTag=" - Expected duration of this task"
-                        // placeholder="Please Enter Detail Description of Job"
-                        value={props.values.timeline_days}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                      />
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
+                      name="timeline_days"
+                      className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                       {props.errors.timeline_days &&
                         props.touched.timeline_days && (
                           <p className="text-sm text-red-500">
@@ -316,3 +330,16 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
 };
 
 export default EditJobPopOut;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 507222d..0933920 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -168,7 +168,7 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
+    <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -264,9 +264,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.family}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.family === "" && (
-                      <p>{errMsg.jobFields.family}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.family === "" && (
+                        <span>{errMsg.jobFields.family}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -292,9 +295,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.public}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.public === "" && (
-                      <p>{errMsg.jobFields.public}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.public === "" && (
+                        <span>{errMsg.jobFields.public}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -320,9 +326,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.individual}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.individual === "" && (
-                      <p>{errMsg.jobFields.individual}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.individual === "" && (
+                        <span>{errMsg.jobFields.individual}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -347,9 +356,12 @@ function JobListPopout({ details, onClose, situation }) {
                       loader={loader?.jobFields.group}
                       errorHandler={errorHandler}
                     />
-                    {props?.values.group === "" && (
-                      <p>{errMsg.jobFields.group}</p>
-                    )}
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.group === "" && (
+                        <span>{errMsg.jobFields.group}</span>
+                      )}
+                    </p>
                   </Form>
                 );
               }}
diff --git a/src/index.css b/src/index.css
index 5a4e0ee..6b1a5b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -787,4 +787,8 @@ TODO: Responsive ===========================
 
 .edit-popup{
   top: 75px;
+}
+
+.job-popup{
+  top: 55px;
 }
\ No newline at end of file