diff --git a/epictrack-api/src/api/services/task.py b/epictrack-api/src/api/services/task.py
index b70c032fa..0923596db 100644
--- a/epictrack-api/src/api/services/task.py
+++ b/epictrack-api/src/api/services/task.py
@@ -65,12 +65,10 @@ def update_task_event(cls, data: dict, task_event_id) -> TaskEvent:
                 "Only team members can be assigned to a task"
             )
         task_event.update(data, commit=False)
-        if data.get("assignee_ids"):
-            cls._handle_assignees(data.get("assignee_ids"), [task_event.id])
-        if data.get("responsibility_ids"):
-            cls._handle_responsibilities(
-                data.get("responsibility_ids"), [task_event.id]
-            )
+        cls._handle_assignees(data.get("assignee_ids"), [task_event.id])
+        cls._handle_responsibilities(
+            data.get("responsibility_ids"), [task_event.id]
+        )
         db.session.commit()
         return task_event
 
diff --git a/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/Option.tsx b/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/Option.tsx
new file mode 100644
index 000000000..59492f4bd
--- /dev/null
+++ b/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/Option.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Box, Checkbox } from "@mui/material";
+import { components, OptionProps } from "react-select";
+
+const Option = ({
+  getStyles,
+  isDisabled,
+  isFocused,
+  children,
+  innerProps,
+  isMulti,
+  ...rest
+}: OptionProps) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+  const { filterProps } = rest.selectProps;
+
+  React.useEffect(() => {
+    if (filterProps?.selectedOptions && filterProps.getOptionValue) {
+      const val = filterProps.getOptionValue(rest.data);
+      setIsSelected(filterProps?.selectedOptions.indexOf(val) > -1);
+    }
+  }, [filterProps?.selectedOptions]);
+
+  return (
+    <Box>
+      <components.Option
+        {...rest}
+        isMulti={isMulti}
+        isDisabled={isDisabled}
+        isFocused={isFocused}
+        isSelected={isSelected}
+        getStyles={getStyles}
+        innerProps={innerProps}
+      >
+        <Checkbox checked={isSelected} />
+        {children}
+      </components.Option>
+    </Box>
+  );
+};
+
+export default Option;
diff --git a/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/index.tsx b/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/index.tsx
new file mode 100644
index 000000000..5cb6b132b
--- /dev/null
+++ b/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/index.tsx
@@ -0,0 +1,164 @@
+import React from "react";
+import { FormHelperText } from "@mui/material";
+import { Controller, useFormContext } from "react-hook-form";
+import Select, { CSSObjectWithLabel } from "react-select";
+import { Palette } from "../../../../styles/theme";
+import Option from "./Option";
+
+type IFormInputProps = {
+  placeholder?: string;
+  name: string;
+  options: Array<any>;
+  defaultValue?: string[] | undefined;
+  isMulti?: boolean;
+  getOptionLabel: (option: any) => string;
+  getOptionValue: (option: any) => string;
+  helperText?: string | undefined;
+  disabled?: boolean;
+  onHandleChange?: (val: any) => void;
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
+  // menuPortalTarget: HTMLElement | undefined;
+};
+
+const ControlledSelectV2: React.ForwardRefRenderFunction<
+  HTMLDivElement,
+  IFormInputProps
+> = (
+  {
+    placeholder,
+    name,
+    options,
+    getOptionLabel,
+    getOptionValue,
+    isMulti,
+    disabled,
+    helperText,
+    onHandleChange,
+    // menuPortalTarget,
+    closeMenuOnSelect,
+    hideSelectedOptions,
+    defaultValue,
+    ...otherProps
+  },
+  ref
+) => {
+  const [selectedOptions, setSelectedOptions] = React.useState<any>([]);
+
+  React.useEffect(() => {
+    setSelectedOptions(Array.from(new Set<string>(defaultValue)));
+  }, [defaultValue]);
+
+  const handleChange = (item: any) => {
+    const selected: Array<any> = [];
+    item.map((o: any) => {
+      const val = getOptionValue(o);
+      selected.push(val);
+    });
+    setSelectedOptions(Array.from(new Set<string>(selected)));
+  };
+
+  const {
+    control,
+    formState: { errors, defaultValues },
+  } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValues?.[name] || ""}
+      render={({ field }) => {
+        const { onChange, value, ref } = field;
+        return (
+          <>
+            <Select
+              placeholder={placeholder}
+              {...field}
+              ref={ref}
+              {...otherProps}
+              options={options}
+              menuPosition="fixed"
+              getOptionValue={getOptionValue}
+              getOptionLabel={getOptionLabel}
+              isSearchable={true}
+              isDisabled={!!disabled}
+              isClearable={false}
+              hideSelectedOptions={!!hideSelectedOptions}
+              closeMenuOnSelect={!!closeMenuOnSelect}
+              filterProps={{
+                selectedOptions,
+                options,
+                getOptionLabel,
+                getOptionValue,
+              }}
+              components={{
+                Option,
+                MultiValueRemove: () => null,
+              }}
+              value={options.filter((c) => {
+                if (isMulti && value) {
+                  return (value as any[])
+                    .map((p) => p.toString())
+                    .includes(getOptionValue(c));
+                }
+                return getOptionValue(c) === value?.toString();
+              })}
+              isMulti={isMulti}
+              onChange={(val: any) => {
+                let v;
+                if (isMulti) v = val.map((v: any) => getOptionValue(v));
+                else v = getOptionValue(val);
+                if (onHandleChange !== undefined) onHandleChange(v);
+                handleChange(val);
+                return onChange(v);
+              }}
+              menuPortalTarget={document.body}
+              styles={{
+                control: (baseStyles, state) => {
+                  return {
+                    ...baseStyles,
+                    borderColor: !!errors[name]
+                      ? "#d32f2f"
+                      : Palette.neutral.accent.light,
+                    borderWidth: "2px",
+                    fontSize: "16px",
+                    lineHeight: "24px",
+                    backgroundColor: !!disabled
+                      ? Palette.neutral.bg.dark
+                      : Palette.white,
+                    fontWeight: "400",
+                    "&:hover": {
+                      borderColor: Palette.primary.accent.light,
+                    },
+                  };
+                },
+                menuPortal: (base: CSSObjectWithLabel) => ({
+                  ...base,
+                  zIndex: 99999,
+                  fontSize: "1rem",
+                }),
+                multiValue(base, props) {
+                  return {
+                    ...base,
+                    padding: "0px 4px 0px 2px",
+                  };
+                },
+              }}
+            ></Select>
+            {helperText && (
+              <FormHelperText
+                error={true}
+                className="MuiFormHelperText-sizeSmall"
+                style={{ marginInline: "14px" }}
+              >
+                {String(errors[name]?.message || "")}
+              </FormHelperText>
+            )}
+          </>
+        );
+      }}
+    />
+  );
+};
+
+export default React.forwardRef(ControlledSelectV2);
diff --git a/epictrack-web/src/components/shared/filterSelect/type.ts b/epictrack-web/src/components/shared/filterSelect/type.ts
index f8767abb6..7af39753f 100644
--- a/epictrack-web/src/components/shared/filterSelect/type.ts
+++ b/epictrack-web/src/components/shared/filterSelect/type.ts
@@ -15,11 +15,15 @@ declare module "react-select/dist/declarations/src/Select" {
     // Marking as optional here to not raise errors for ControlledSelect
     // Make sure to add for FilterSelect
     filterProps?: {
-      applyFilters: () => void;
-      clearFilters: () => void;
+      applyFilters?: () => void;
+      clearFilters?: () => void;
       selectedOptions: any[];
-      onCancel: () => void;
-      variant: "inline" | "bar";
+      options?: any[];
+      onCancel?: () => void;
+      variant?: "inline" | "bar";
+      getOptionLabel?: (option: any) => string;
+      getOptionValue?: (option: any) => string;
+      label?: string;
     };
     filterAppliedCallback?: (value?: string[] | string) => void;
     filterClearedCallback?: (value?: [] | "") => void;
diff --git a/epictrack-web/src/components/workPlan/event/EventList.tsx b/epictrack-web/src/components/workPlan/event/EventList.tsx
index 5a93b0243..3036da643 100644
--- a/epictrack-web/src/components/workPlan/event/EventList.tsx
+++ b/epictrack-web/src/components/workPlan/event/EventList.tsx
@@ -696,7 +696,7 @@ const EventList = () => {
       </Grid>
       <TrackDialog
         open={showTaskForm}
-        dialogTitle="Add Task"
+        dialogTitle={taskEvent ? taskEvent?.name : "Add Task"}
         //onClose={(event, reason) => onDialogClose(event, reason)}
         disableEscapeKeyDown
         fullWidth
diff --git a/epictrack-web/src/components/workPlan/task/TaskForm.tsx b/epictrack-web/src/components/workPlan/task/TaskForm.tsx
index e8d7798be..072c87247 100644
--- a/epictrack-web/src/components/workPlan/task/TaskForm.tsx
+++ b/epictrack-web/src/components/workPlan/task/TaskForm.tsx
@@ -27,6 +27,7 @@ import RichTextEditor from "../../shared/richTextEditor";
 import { dateUtils } from "../../../utils";
 import { EVENT_TYPE } from "../phase/type";
 import { EventContext } from "../event/EventContext";
+import ControlledMultiSelect from "../../shared/controlledInputComponents/ControlledMultiSelect";
 
 const schema = yup.object().shape({
   name: yup.string().required("Name is required"),
@@ -68,6 +69,7 @@ const TaskForm = ({
     formState: { errors },
     reset,
     control,
+    setValue,
   } = methods;
 
   useEffect(() => {
@@ -186,6 +188,15 @@ const TaskForm = ({
     }
   };
 
+  const endDateChangeHandler = (endDate: any) => {
+    if (startDateRef?.current as any) {
+      const startDate = (startDateRef?.current as any)["value"];
+      const dateDiff = dateUtils.diff(endDate, startDate, "days");
+      (numberOfDaysRef.current as any)["value"] = dateDiff;
+      setValue("number_of_days", dateDiff);
+    }
+  };
+
   return (
     <>
       <FormProvider {...methods}>
@@ -209,7 +220,7 @@ const TaskForm = ({
             }}
           >
             <Grid item xs={12}>
-              <ETFormLabel required>Task Title</ETFormLabel>
+              <ETFormLabel required>Title</ETFormLabel>
               <TextField
                 fullWidth
                 placeholder="Title"
@@ -257,7 +268,7 @@ const TaskForm = ({
               />
             </Grid>
             <Grid item xs={4}>
-              <ETFormLabel>Days</ETFormLabel>
+              <ETFormLabel>Number of Days</ETFormLabel>
               <TextField
                 fullWidth
                 defaultValue={taskEvent?.number_of_days}
@@ -273,17 +284,50 @@ const TaskForm = ({
               />
             </Grid>
             <Grid item xs={4}>
-              <ETFormLabel required>End Date</ETFormLabel>
-              <TextField
-                fullWidth
-                disabled
-                placeholder="MM-DD-YYYY"
-                inputRef={endDateRef}
+              <ETFormLabel>End Date</ETFormLabel>
+              <Controller
+                name="start_date"
+                control={control}
+                render={({
+                  field: { onChange, value },
+                  fieldState: { error },
+                }) => (
+                  <LocalizationProvider dateAdapter={AdapterDayjs}>
+                    <DatePicker
+                      format={DATE_FORMAT}
+                      slotProps={{
+                        textField: {
+                          id: "start_date",
+                          fullWidth: true,
+                          inputRef: endDateRef,
+                          error: error ? true : false,
+                          helperText: error?.message,
+                          placeholder: "MM-DD-YYYY",
+                        },
+                      }}
+                      value={dayjs(
+                        dateUtils
+                          .add(
+                            taskEvent?.start_date || "",
+                            taskEvent?.number_of_days || 0,
+                            "days"
+                          )
+                          .toString()
+                      )}
+                      onChange={(event: any) => {
+                        const d = event ? event["$d"] : null;
+                        endDateChangeHandler(d);
+                      }}
+                      sx={{ display: "block" }}
+                    />
+                  </LocalizationProvider>
+                )}
               />
             </Grid>
-            <Grid item xs={4}>
-              <ETFormLabel required>Status</ETFormLabel>
+            <Grid item xs={5}>
+              <ETFormLabel required>Progress</ETFormLabel>
               <ControlledSelectV2
+                placeholder="Select your progress"
                 helperText={errors?.status?.message?.toString()}
                 defaultValue={taskEvent?.status}
                 options={statuses || []}
@@ -305,27 +349,31 @@ const TaskForm = ({
           >
             <Grid item xs={6}>
               <ETFormLabel>Assigned</ETFormLabel>
-              <ControlledSelectV2
+              <ControlledMultiSelect
                 isMulti={true}
-                defaultValue={taskEvent?.assignee_ids?.map((p) => parseInt(p))}
+                closeMenuOnSelect={false}
+                hideSelectedOptions={false}
+                defaultValue={taskEvent?.assignee_ids?.map((p) => p.toString())}
                 options={assignees || []}
                 getOptionValue={(o: Staff) => o?.id.toString()}
                 getOptionLabel={(o: Staff) => o.full_name}
                 {...register("assignee_ids")}
-              ></ControlledSelectV2>
+              ></ControlledMultiSelect>
             </Grid>
             <Grid item xs={6}>
               <ETFormLabel>Responsibility</ETFormLabel>
-              <ControlledSelectV2
+              <ControlledMultiSelect
                 isMulti
+                closeMenuOnSelect={false}
+                hideSelectedOptions={false}
                 defaultValue={taskEvent?.responsibility_ids?.map((p) =>
-                  parseInt(p)
+                  p.toString()
                 )}
                 options={responsibilities || []}
                 getOptionValue={(o: ListType) => o?.id.toString()}
                 getOptionLabel={(o: ListType) => o.name}
                 {...register("responsibility_ids")}
-              ></ControlledSelectV2>
+              ></ControlledMultiSelect>
             </Grid>
             <Grid item xs={12}>
               <ETFormLabel>Notes</ETFormLabel>