diff --git a/src/Components/Common/ConfirmDialog.tsx b/src/Components/Common/ConfirmDialog.tsx
index 915bafc7973..a6bc14e8d4f 100644
--- a/src/Components/Common/ConfirmDialog.tsx
+++ b/src/Components/Common/ConfirmDialog.tsx
@@ -27,7 +27,7 @@ const ConfirmDialog = ({
   return (
     <DialogModal {...props}>
       {children}
-      <div className="mt-6 flex justify-end gap-2 w-full flex-col md:flex-row">
+      <div className="mt-6 flex w-full flex-col justify-end gap-2 md:flex-row">
         <Cancel onClick={props.onClose} label={cancelLabel} />
         <Submit onClick={onConfirm} variant={variant} disabled={disabled}>
           {action}
diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx
index bfd4c87a3ea..ad60edd5a74 100644
--- a/src/Components/Common/Dialog.tsx
+++ b/src/Components/Common/Dialog.tsx
@@ -53,20 +53,16 @@ const DialogModal = (props: DialogProps) => {
                 <Dialog.Panel
                   className={classNames(
                     className,
-                    fixedWidth && "max-w-md w-full",
+                    fixedWidth && "w-full max-w-md",
                     "transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
                   )}
                 >
                   <Dialog.Title
                     as="h4"
-                    className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
+                    className="flex w-full flex-col text-lg font-medium leading-6 text-gray-900"
                   >
-                    <div>
-                      <h4>{title}</h4>
-                      <p className="mt-2 text-sm text-gray-600">
-                        {description}
-                      </p>
-                    </div>
+                    <h4>{title}</h4>
+                    <p className="mt-2 text-sm text-gray-600">{description}</p>
                     {props.titleAction}
                   </Dialog.Title>
                   {children}
diff --git a/src/Components/Common/OnlineUsersSelect.tsx b/src/Components/Common/OnlineUsersSelect.tsx
deleted file mode 100644
index bb5e55ef65a..00000000000
--- a/src/Components/Common/OnlineUsersSelect.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-import CircularProgress from "../Common/components/CircularProgress";
-import React, { useCallback, useState, useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import moment from "moment";
-import { getUserList } from "../../Redux/actions";
-import { UserModel } from "../Users/models";
-import { classNames } from "../../Utils/utils";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import ButtonV2 from "./components/ButtonV2";
-import { FieldLabel } from "../Form/FormFields/FormField";
-
-type UserFetchState = {
-  loading: boolean;
-  users: Array<UserModel>;
-  searchTerm: string;
-  searchFieldRef: React.RefObject<HTMLInputElement>;
-};
-
-type Props = {
-  selectedUser: UserModel | null;
-  userId: string;
-  onSelect: (user: UserModel | null) => void;
-  user_type: string;
-  outline?: boolean;
-};
-
-const initialState: UserFetchState = {
-  loading: false,
-  users: new Array<UserModel>(),
-  searchTerm: "",
-  searchFieldRef: React.createRef<HTMLInputElement>(),
-};
-
-/**
- * This component consists temperory design hacks made to look identical to a
- * form field during the consultation form redesign.
- *
- * However to make the design and functionallity consistent, this component is
- * to be converted to use `AutocompleteFormField` along with `useAsyncOptions`
- * hook and `prefixIcon` for the online state of the users.
- */
-export const OnlineUsersSelect = (props: Props) => {
-  const dispatchAction: any = useDispatch();
-  const { selectedUser, userId, onSelect, user_type, outline } = props;
-  const [state, setState] = useState(initialState);
-  const { loading, users, searchTerm, searchFieldRef } = state;
-  const [isDropdownExpanded, setDropdownExpand] = useState(false);
-
-  const fetchUsers = useCallback(
-    async (status: statusType) => {
-      setState({ ...state, loading: true });
-      const params = {
-        user_type: user_type,
-        ordering: "-last-login",
-        search_text: searchTerm,
-      };
-      const res = await dispatchAction(getUserList(params));
-      if (!status.aborted) {
-        if (res && res.data) {
-          setState({ ...state, loading: false, users: res.data.results });
-        }
-      }
-    },
-    [dispatchAction, searchTerm]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      const debounce_timer = setTimeout(() => {
-        fetchUsers(status);
-      }, 1000);
-      return () => clearTimeout(debounce_timer);
-    },
-    [searchTerm]
-  );
-
-  useEffect(() => {
-    if (isDropdownExpanded && searchFieldRef.current) {
-      searchFieldRef.current.focus();
-    }
-  }, [isDropdownExpanded]);
-
-  return (
-    <div className="pb-2">
-      <div className="space-y-1">
-        <FieldLabel>Assigned to</FieldLabel>
-        <div className="relative">
-          <div className="relative flex-1">
-            <span className="flex w-full rounded-md flex-col md:flex-row">
-              <button
-                onClick={(_) => {
-                  setDropdownExpand(true);
-                }}
-                type="button"
-                aria-haspopup="listbox"
-                aria-expanded="true"
-                aria-labelledby="listbox-label"
-                className={classNames(
-                  "border border-gray-400 cursor-default relative w-full rounded-md pl-3 pr-10 text-left transition ease-in-out duration-150 sm:text-sm sm:leading-5",
-                  (isDropdownExpanded &&
-                    outline &&
-                    "ring-primary-500 border-primary-500 py-0.5") ||
-                    "py-3"
-                )}
-              >
-                <input
-                  ref={searchFieldRef}
-                  name="searchTerm"
-                  type="text"
-                  placeholder="Search by name or username"
-                  className={classNames(
-                    "pl-3 w-full focus:outline-none border-0 focus:ring-0",
-                    !isDropdownExpanded && "hidden"
-                  )}
-                  value={searchTerm}
-                  onBlur={(_) => {
-                    setDropdownExpand(false);
-                  }}
-                  onChange={(e) =>
-                    setState({ ...state, searchTerm: e.target.value })
-                  }
-                  onKeyUp={(e) => e.preventDefault()}
-                />
-                <div
-                  className={classNames(
-                    "flex items-center justify-between",
-                    isDropdownExpanded && "hidden"
-                  )}
-                >
-                  <div className="space-x-3 flex items-center overflow-hidden">
-                    <span
-                      aria-label="Online"
-                      className={
-                        "shrink-0 inline-block h-2 w-2 rounded-full " +
-                        (selectedUser
-                          ? moment()
-                              .subtract(5, "minutes")
-                              .isBefore(selectedUser?.last_login)
-                            ? "bg-primary-400"
-                            : "bg-gray-300"
-                          : "bg-blue-400")
-                      }
-                    ></span>
-                    <span className="block truncate">
-                      {selectedUser
-                        ? selectedUser?.first_name +
-                          " " +
-                          selectedUser?.last_name
-                        : `Assign a ${
-                            user_type == "Doctor" ? "Doctor" : "Volunteer"
-                          }`}
-                    </span>
-                  </div>
-                </div>
-                <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                  <svg
-                    className="h-5 w-5 text-gray-400"
-                    viewBox="0 0 20 20"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    <path
-                      d="M7 7l3-3 3 3m0 6l-3 3-3-3"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </span>
-            {isDropdownExpanded && (
-              <div
-                role="listbox"
-                aria-labelledby="listbox-label"
-                aria-activedescendant="listbox-item-3"
-                className="multiselect-dropdown__search-dropdown w-full border border-gray-400 bg-white mt-1 rounded-lg shadow-lg px-4 py-2 z-50"
-              >
-                {!loading ? (
-                  users.map((user: UserModel) => {
-                    return (
-                      <button
-                        key={user.id}
-                        onMouseDown={(_) => {
-                          setDropdownExpand(false);
-                          onSelect(user);
-                          setState({
-                            ...state,
-                            searchTerm: "",
-                          });
-                        }}
-                        id="listbox-item-0"
-                        role="option"
-                        className="flex text-xs py-1 items-center justify-between w-full hover:bg-gray-200 focus:outline-none focus:bg-gray-200"
-                      >
-                        <div className="flex items-center space-x-3">
-                          <span
-                            aria-label="Online"
-                            className={
-                              "shrink-0 inline-block h-2 w-2 rounded-full " +
-                              (moment()
-                                .subtract(5, "minutes")
-                                .isBefore(user.last_login)
-                                ? "bg-primary-400"
-                                : "bg-gray-300")
-                            }
-                          ></span>
-                          <span className="font-normal block truncate">
-                            {user.first_name} {user.last_name}{" "}
-                            {user.home_facility_object?.name && (
-                              <span className="text-gray-700 ml-2">
-                                {user.home_facility_object?.name}
-                              </span>
-                            )}
-                          </span>
-                        </div>
-                        {user.id?.toString() == userId && (
-                          <span className="flex items-center">
-                            <svg
-                              className="h-5 w-5"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 20 20"
-                              fill="currentColor"
-                            >
-                              <path
-                                fillRule="evenodd"
-                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          </span>
-                        )}
-                      </button>
-                    );
-                  })
-                ) : (
-                  <div className="w-1/12 mx-auto">
-                    <CircularProgress />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-          <ButtonV2
-            type="button"
-            variant="secondary"
-            ghost
-            circle
-            className={`p-1 absolute right-8 top-1/2 -translate-y-1/2 ${
-              isDropdownExpanded && "hidden"
-            }`}
-            onClick={(_) => {
-              onSelect(null);
-              setDropdownExpand(false);
-            }}
-          >
-            <CareIcon className="care-l-times text-gray-600" />
-          </ButtonV2>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index ceb7d6a3045..51b2ec8622c 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -1,3 +1,4 @@
+import moment from "moment";
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 import { getFacilityUsers, getUserList } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
@@ -11,6 +12,8 @@ import { UserModel } from "../Users/models";
 type Props = FormFieldBaseProps<UserModel> & {
   placeholder?: string;
   facilityId?: string;
+  userType?: string;
+  showActiveStatus?: boolean;
 };
 
 export default function UserAutocompleteFormField(props: Props) {
@@ -20,27 +23,64 @@ export default function UserAutocompleteFormField(props: Props) {
     { queryResponseExtractor: (data) => data.results }
   );
 
+  let search_filter: {
+    limit: number;
+    offset: number;
+    user_type?: string;
+    search_text?: string;
+  } = { limit: 5, offset: 0 };
+
+  if (props.showActiveStatus && props.userType) {
+    search_filter = { ...search_filter, user_type: props.userType };
+  }
+
+  const getStatusIcon = (option: UserModel) => {
+    if (!props.showActiveStatus) return null;
+
+    const isOnline = moment()
+      .subtract(5, "minutes")
+      .isBefore(option.last_login);
+
+    return (
+      <div className="mr-6 mt-[2px]">
+        <svg
+          className={`h-3 w-3 ${isOnline ? "text-green-500" : "text-gray-400"}`}
+          fill="currentColor"
+          viewBox="0 0 8 8"
+        >
+          <circle cx="4" cy="4" r="4" />
+        </svg>
+      </div>
+    );
+  };
+
   return (
     <FormField field={field}>
-      <Autocomplete
-        id={field.id}
-        disabled={field.disabled}
-        placeholder={props.placeholder}
-        value={field.value}
-        onChange={field.handleChange}
-        options={options(field.value && [field.value])}
-        optionLabel={getUserFullName}
-        optionDescription={(option) => `${option.user_type}`}
-        optionValue={(option) => option}
-        onQuery={(query) =>
-          fetchOptions(
-            props.facilityId
-              ? getFacilityUsers(props.facilityId)
-              : getUserList({ limit: 5, offset: 0, search_text: query })
-          )
-        }
-        isLoading={isLoading}
-      />
+      <div className="relative">
+        <Autocomplete
+          id={field.id}
+          disabled={field.disabled}
+          placeholder={props.placeholder}
+          value={field.value}
+          onChange={field.handleChange}
+          options={options(field.value && [field.value])}
+          optionLabel={getUserFullName}
+          optionIcon={getStatusIcon}
+          optionDescription={(option) => `${option.user_type}`}
+          optionValue={(option) => option}
+          onQuery={(query) =>
+            fetchOptions(
+              props.facilityId
+                ? getFacilityUsers(props.facilityId)
+                : getUserList({
+                    ...search_filter,
+                    search_text: query,
+                  })
+            )
+          }
+          isLoading={isLoading}
+        />
+      </div>
     </FormField>
   );
 }
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index cf187561df1..c2eb2294354 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -21,7 +21,6 @@ import {
 import * as Notification from "../../Utils/Notifications.js";
 import { FacilitySelect } from "../Common/FacilitySelect";
 import { BedModel, FacilityModel, ICD11DiagnosisModel } from "./models";
-import { OnlineUsersSelect } from "../Common/OnlineUsersSelect";
 import { UserModel } from "../Users/models";
 import { BedSelect } from "../Common/BedSelect";
 import Beds from "./Consultations/Beds";
@@ -48,6 +47,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import { DraftSection, useAutoSaveReducer } from "../../Utils/AutoSave";
 import { FormAction } from "../Form/Utils";
+import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
+
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -1238,12 +1239,16 @@ export const ConsultationForm = (props: any) => {
                               className="flex-[2] col-span-6"
                               ref={fieldRef["assigned_to"]}
                             >
-                              <OnlineUsersSelect
-                                userId={state.form.assigned_to}
-                                selectedUser={state.form.assigned_to_object}
-                                onSelect={handleDoctorSelect}
-                                user_type="Doctor"
-                                outline
+                              <UserAutocompleteFormField
+                                showActiveStatus
+                                value={
+                                  state.form.assigned_to_object ?? undefined
+                                }
+                                onChange={(option) =>
+                                  handleDoctorSelect(option.value)
+                                }
+                                userType={"Doctor"}
+                                name={"assigned_to"}
                               />
                             </div>
                           )}
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index 7622f59da42..303f13298d7 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -91,18 +91,17 @@ type AutocompleteProps<T, V = T> = {
 export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const [query, setQuery] = useState(""); // Ensure lower case
   useEffect(() => {
-    props.onQuery && props.onQuery(query);
+    props.onQuery?.(query);
   }, [query]);
 
   const mappedOptions = props.options.map((option) => {
     const label = props.optionLabel(option);
-    const description =
-      props.optionDescription && props.optionDescription(option);
+    const description = props.optionDescription?.(option);
     return {
       label,
       description,
       search: label.toLowerCase(),
-      icon: props.optionIcon && props.optionIcon(option),
+      icon: props.optionIcon?.(option),
       value: props.optionValue ? props.optionValue(option) : option,
     };
   });
@@ -139,27 +138,27 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
     <div
       className={
         props.requiredError || props.error
-          ? "border rounded border-red-500 " + props.className
+          ? "rounded border border-red-500 " + props.className
           : props.className
       }
       id={props.id}
     >
       <Combobox
         disabled={props.disabled}
-        value={value}
+        value={value ?? props.placeholder ?? "Select"}
         onChange={(selection: any) => props.onChange(selection.value)}
       >
         <div className="relative">
           <div className="flex">
             <Combobox.Input
-              className="cui-input-base pr-16 truncate"
-              placeholder={props.placeholder || "Select"}
-              displayValue={(value: any) => value?.label}
+              className="cui-input-base truncate pr-16"
+              placeholder={props.placeholder ?? "Select"}
+              displayValue={(value: any) => value?.label || ""}
               onChange={(event) => setQuery(event.target.value.toLowerCase())}
               autoComplete="off"
             />
             <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
-              <div className="pb-2 absolute h-full top-1 right-0 flex gap-1 items-center mr-2 text-lg text-gray-900">
+              <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
                 <span>{value?.icon}</span>
                 {props.isLoading ? (
                   <CareIcon className="care-l-spinner animate-spin" />
@@ -167,11 +166,24 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   <CareIcon className="care-l-angle-down" />
                 )}
               </div>
+              {value && (
+                <div
+                  className="absolute right-0 top-1 mr-7 flex h-full items-center gap-1 pb-2 text-lg text-gray-900 hover:text-gray-500"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (!props.required) props.onChange(undefined);
+                  }}
+                >
+                  {!props.isLoading && (
+                    <CareIcon className="care-l-times-circle h-4 w-4" />
+                  )}
+                </div>
+              )}
             </Combobox.Button>
           </div>
 
           <DropdownTransition>
-            <Combobox.Options className="origin-top-right absolute z-10 mt-0.5 cui-dropdown-base">
+            <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
               {filteredOptions.length === 0 && (
                 <div className="p-2 text-sm text-gray-500">
                   No options found
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index c0f12d7419e..2db425836e7 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { GENDER_TYPES, SAMPLE_TEST_STATUS } from "../../Common/constants";
 import loadable from "@loadable/component";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { OnlineUsersSelect } from "../Common/OnlineUsersSelect";
 import {
   getConsultationList,
   listShiftRequests,
@@ -31,7 +30,7 @@ import { useTranslation } from "react-i18next";
 import CircularProgress from "../Common/components/CircularProgress";
 import Page from "../Common/components/Page";
 import ConfirmDialog from "../Common/ConfirmDialog";
-import { FieldErrorText } from "../Form/FormFields/FormField";
+import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -144,7 +143,7 @@ export const PatientHome = (props: any) => {
   };
 
   const handleVolunteerSelect = (volunteer: any) => {
-    setAssignedVolunteerObject(volunteer);
+    setAssignedVolunteerObject(volunteer.value);
   };
 
   const limit = 5;
@@ -1423,19 +1422,20 @@ export const PatientHome = (props: any) => {
       </div>
 
       <ConfirmDialog
+        className="w-full justify-between"
         title={`Assign a volunteer to ${patientData.name}`}
         show={openAssignVolunteerDialog}
         onClose={() => setOpenAssignVolunteerDialog(false)}
         description={
-          <div>
-            <OnlineUsersSelect
-              userId={assignedVolunteerObject?.id || patientData.assigned_to}
-              selectedUser={assignedVolunteerObject}
-              onSelect={handleVolunteerSelect}
-              user_type={"Volunteer"}
-              outline={false}
+          <div className="mt-6">
+            <UserAutocompleteFormField
+              showActiveStatus
+              value={assignedVolunteerObject}
+              onChange={handleVolunteerSelect}
+              userType={"Volunteer"}
+              name={"assign_volunteer"}
+              error={errors.assignedVolunteer}
             />
-            <FieldErrorText error={errors.assignedVolunteer} />
           </div>
         }
         action="Assign"