diff --git a/.env b/.env
index 2e32ac97bbf..3c4b26fdad4 100644
--- a/.env
+++ b/.env
@@ -6,6 +6,7 @@ REACT_APP_COVER_IMAGE=https://cdn.ohc.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.ohc.network/care_logo.svg
 REACT_PUBLIC_URL=https://care.ohc.network
 HEADERS="/*\n  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload\n  X-XSS-Protection: 1; mode=block\n  X-Frame-Options: SAMEORIGIN\n  X-Content-Type-Options: nosniff\n  Referrer-Policy: strict-origin-when-cross-origin\n  Permissions-Policy: geolocation=(self), microphone=()"
+REACT_RECAPTCHA_SITE_KEY=6LcedK8qAAAAAM2PpuqlqhZUxQpmIqHqluL74dDs
 
 # Care API URL without the /api prefix
 REACT_CARE_API_URL=https://careapi.ohc.network
diff --git a/care.config.ts b/care.config.ts
index 6813a60b331..78547b66d74 100644
--- a/care.config.ts
+++ b/care.config.ts
@@ -61,8 +61,7 @@ const careConfig = {
   govDataApiKey:
     env.REACT_GOV_DATA_API_KEY ||
     "579b464db66ec23bdd000001cdd3946e44ce4aad7209ff7b23ac571b",
-  reCaptchaSiteKey:
-    env.REACT_RECAPTCHA_SITE_KEY || "6LdvxuQUAAAAADDWVflgBqyHGfq-xmvNJaToM0pN",
+  reCaptchaSiteKey: env.REACT_RECAPTCHA_SITE_KEY,
 
   wartimeShifting: boolean("REACT_WARTIME_SHIFTING"),
 
diff --git a/package.json b/package.json
index ce9575a1b39..b8f4ccd9a02 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "care_fe",
-  "version": "2.13.0",
+  "version": "3.0.0",
   "description": "Care is a Digital Public Good enabling TeleICU & Decentralised Administration of Healthcare Capacity across States.",
   "private": true,
   "repository": {
diff --git a/public/locale/en.json b/public/locale/en.json
index ad07727eec9..21fc0d34843 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -506,7 +506,7 @@
   "care_backend": "Care Backend",
   "care_frontend": "Care Frontend",
   "category": "Category",
-  "category_description": "Choose the category that best describes the resource needed.",
+  "category_description": "Choose the category  ",
   "caution": "Caution",
   "central_nursing_station": "Central Nursing Station",
   "change_avatar": "Change Avatar",
@@ -1847,6 +1847,7 @@
   "resource_status__transportation_to_be_arranged": "Transportation to be arranged",
   "resource_title": "Resource Title",
   "resource_type": "Request Type",
+  "resource_updated_successfully": "Resource updated successfully",
   "respiratory_status": "Respiratory Status",
   "result": "Result",
   "result_date": "Result Date",
@@ -1940,6 +1941,7 @@
   "search_tags": "Search tags...",
   "search_user": "Search User",
   "search_user_description": "Search for a user and assign a role to add them to the patient.",
+  "search_users": "Search users...",
   "searching": "Searching...",
   "see_attachments": "See Attachments",
   "see_details": "See Details",
@@ -2244,6 +2246,7 @@
   "update_record": "Update Record",
   "update_record_for_asset": "Update record for asset",
   "update_request": "Update Request",
+  "update_resource_request": "Update Resource Request",
   "update_role": "Update Role",
   "update_shift_request": "Update Shift Request",
   "update_status": "Update Status",
diff --git a/src/CAREUI/display/Card.tsx b/src/CAREUI/display/Card.tsx
deleted file mode 100644
index 3772fa0b75b..00000000000
--- a/src/CAREUI/display/Card.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-
-export default function Card(
-  props: {
-    children?: ReactNode;
-  } & HTMLAttributes<HTMLDivElement>,
-) {
-  const { children, ...rest } = props;
-  return (
-    <div
-      {...rest}
-      className={"rounded-lg bg-white p-4 shadow " + props.className}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
index 00d052ba366..2aaa8c115e8 100644
--- a/src/Routers/routes/ConsultationRoutes.tsx
+++ b/src/Routers/routes/ConsultationRoutes.tsx
@@ -1,6 +1,5 @@
 import QuestionnaireResponseView from "@/components/Facility/ConsultationDetails/QuestionnaireResponseView";
 import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire";
-import FileUploadPage from "@/components/Patient/FileUploadPage";
 import TreatmentSummary from "@/components/Patient/TreatmentSummary";
 
 import { AppRoutes } from "@/Routers/AppRouter";
@@ -72,18 +71,6 @@ const consultationRoutes: AppRoutes = {
     ({ patientId, id }) => (
       <QuestionnaireResponseView responseId={id} patientId={patientId} />
     ),
-  "/facility/:facilityId/patient/:patientId/encounterId/:id/files/": ({
-    facilityId,
-    patientId,
-    id,
-  }) => (
-    <FileUploadPage
-      facilityId={facilityId}
-      patientId={patientId}
-      encounterId={id}
-      type="encounter"
-    />
-  ),
 };
 
 export default consultationRoutes;
diff --git a/src/Routers/routes/FacilityRoutes.tsx b/src/Routers/routes/FacilityRoutes.tsx
index bf716284545..875d3e32ebd 100644
--- a/src/Routers/routes/FacilityRoutes.tsx
+++ b/src/Routers/routes/FacilityRoutes.tsx
@@ -1,7 +1,7 @@
 import { Redirect } from "raviger";
 
 import FacilityUsers from "@/components/Facility/FacilityUsers";
-import ResourceCreate from "@/components/Resource/ResourceCreate";
+import ResourceCreate from "@/components/Resource/ResourceForm";
 
 import { AppRoutes } from "@/Routers/AppRouter";
 import { FacilityOverview } from "@/pages/Facility/overview";
diff --git a/src/Routers/routes/PatientRoutes.tsx b/src/Routers/routes/PatientRoutes.tsx
index 77230f3ee76..26b2ff4aa38 100644
--- a/src/Routers/routes/PatientRoutes.tsx
+++ b/src/Routers/routes/PatientRoutes.tsx
@@ -1,4 +1,3 @@
-import FileUploadPage from "@/components/Patient/FileUploadPage";
 import {
   facilityPatientTabs,
   patientTabs,
@@ -45,16 +44,6 @@ const PatientRoutes: AppRoutes = {
   "/facility/:facilityId/patient/:id/update": ({ facilityId, id }) => (
     <PatientRegistration facilityId={facilityId} patientId={id} />
   ),
-  "/facility/:facilityId/patient/:patientId/files": ({
-    facilityId,
-    patientId,
-  }) => (
-    <FileUploadPage
-      facilityId={facilityId}
-      patientId={patientId}
-      type="patient"
-    />
-  ),
 };
 
 export default PatientRoutes;
diff --git a/src/Routers/routes/ResourceRoutes.tsx b/src/Routers/routes/ResourceRoutes.tsx
index 390e566325b..d82b17d1672 100644
--- a/src/Routers/routes/ResourceRoutes.tsx
+++ b/src/Routers/routes/ResourceRoutes.tsx
@@ -1,6 +1,6 @@
 import PrintResourceLetter from "@/components/Resource/PrintResourceLetter";
 import ResourceDetails from "@/components/Resource/ResourceDetails";
-import { ResourceDetailsUpdate } from "@/components/Resource/ResourceDetailsUpdate";
+import ResourceForm from "@/components/Resource/ResourceForm";
 import ResourceList from "@/components/Resource/ResourceList";
 
 import { AppRoutes } from "@/Routers/AppRouter";
@@ -13,7 +13,7 @@ const ResourceRoutes: AppRoutes = {
     <ResourceDetails facilityId={facilityId} id={id} />
   ),
   "/facility/:facilityId/resource/:id/update": ({ facilityId, id }) => (
-    <ResourceDetailsUpdate facilityId={facilityId} id={id} />
+    <ResourceForm facilityId={facilityId} id={id} />
   ),
   "/facility/:facilityId/resource/:id/print": ({ id }) => (
     <PrintResourceLetter id={id} />
diff --git a/src/Utils/request/api.tsx b/src/Utils/request/api.tsx
index c01425c3d74..8e33d33b816 100644
--- a/src/Utils/request/api.tsx
+++ b/src/Utils/request/api.tsx
@@ -164,12 +164,6 @@ const routes = {
     TRes: Type<UserModel>(),
   },
 
-  userList: {
-    path: "/api/v1/users/",
-    method: "GET",
-    TRes: Type<PaginatedResponse<UserModel>>(),
-  },
-
   deleteProfilePicture: {
     path: "/api/v1/users/{username}/profile_picture/",
     method: "DELETE",
diff --git a/src/Utils/request/useQuery.ts b/src/Utils/request/useQuery.ts
deleted file mode 100644
index 422e5f96868..00000000000
--- a/src/Utils/request/useQuery.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMemo, useRef } from "react";
-
-import request from "@/Utils/request/request";
-import { ApiRoute, RequestOptions } from "@/Utils/request/types";
-
-import { mergeRequestOptions } from "./utils";
-
-export interface QueryOptions<TData> extends RequestOptions<TData> {
-  prefetch?: boolean;
-  key?: string;
-}
-
-/**
- * @deprecated use `useQuery` from `@tanstack/react-query` instead.
- */
-export default function useTanStackQueryInstead<TData, TBody = unknown>(
-  route: ApiRoute<TData, TBody>,
-  options?: QueryOptions<TData>,
-) {
-  const overridesRef = useRef<QueryOptions<TData>>();
-
-  // Ensure unique key for each usage of the hook unless explicitly provided
-  // (hack to opt-out of tanstack query's caching between usages)
-  const key = useMemo(() => options?.key ?? Math.random(), [options?.key]);
-
-  const {
-    data: response,
-    refetch,
-    isFetching: isLoading,
-  } = useQuery({
-    queryKey: [route.path, options?.pathParams, options?.query, key],
-    queryFn: async ({ signal }) => {
-      const resolvedOptions = overridesRef.current
-        ? mergeRequestOptions(options || {}, overridesRef.current)
-        : options;
-
-      return await request(route, { ...resolvedOptions, signal });
-    },
-    enabled: options?.prefetch ?? true,
-    refetchOnWindowFocus: false,
-  });
-
-  return {
-    data: response?.data,
-    loading: isLoading,
-    error: response?.error,
-    res: response?.res,
-    /**
-     * Refetch function that applies new options and fetches fresh data.
-     */
-    refetch: async (overrides?: QueryOptions<TData>) => {
-      overridesRef.current = overrides;
-      await refetch();
-      return response!;
-    },
-  };
-}
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
index c79eacaa7ba..dfe4aaac4de 100644
--- a/src/components/Auth/Login.tsx
+++ b/src/components/Auth/Login.tsx
@@ -504,7 +504,7 @@ const Login = (props: LoginProps) => {
                           )}
                         </div>
 
-                        {isCaptchaEnabled && (
+                        {isCaptchaEnabled && reCaptchaSiteKey && (
                           <div className="py-4">
                             <ReCaptcha
                               sitekey={reCaptchaSiteKey}
diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx
index cb556b84aae..f5c44865549 100644
--- a/src/components/Common/FilePreviewDialog.tsx
+++ b/src/components/Common/FilePreviewDialog.tsx
@@ -24,7 +24,6 @@ import {
 } from "@/components/ui/dialog";
 
 import CircularProgress from "@/components/Common/CircularProgress";
-import { StateInterface } from "@/components/Files/FileUpload";
 import { FileUploadModel } from "@/components/Patient/models";
 
 const PDFViewer = lazy(() => import("@/components/Common/PDFViewer"));
@@ -40,6 +39,19 @@ export const zoom_values = [
   "scale-200",
 ];
 
+export interface StateInterface {
+  open: boolean;
+  isImage: boolean;
+  name: string;
+  extension: string;
+  zoom: number;
+  isZoomInDisabled: boolean;
+  isZoomOutDisabled: boolean;
+  rotation: number;
+  id?: string;
+  associating_id?: string;
+}
+
 type FilePreviewProps = {
   title?: ReactNode;
   description?: ReactNode;
diff --git a/src/components/Common/HelperComponents.tsx b/src/components/Common/HelperComponents.tsx
deleted file mode 100644
index 5100476284e..00000000000
--- a/src/components/Common/HelperComponents.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Transition, TransitionEvents } from "@headlessui/react";
-import { ReactNode } from "react";
-
-type DropdownMenuTransitionProps = {
-  show?: boolean | undefined;
-  children: ReactNode;
-} & TransitionEvents;
-
-export const DropdownTransition = ({
-  show,
-  children,
-  ...transitionEvents
-}: DropdownMenuTransitionProps) => (
-  <Transition
-    show={show}
-    leave="transition ease-in duration-200"
-    enter="transition ease-out duration-100"
-    enterFrom="opacity-0"
-    enterTo="opacity-100"
-    leaveFrom="opacity-100"
-    leaveTo="opacity-0"
-    {...transitionEvents}
-  >
-    {children}
-  </Transition>
-);
diff --git a/src/components/Common/Tabs.tsx b/src/components/Common/Tabs.tsx
deleted file mode 100644
index 9c375db618e..00000000000
--- a/src/components/Common/Tabs.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { type ReactNode, useEffect, useRef } from "react";
-
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-
-import { classNames } from "@/Utils/utils";
-
-export default function Tabs(props: {
-  className?: string;
-  currentTab: string | number;
-  onTabChange: (value: string | number) => void;
-  tabs: { text: ReactNode; value: string | number; id?: string }[];
-}) {
-  const { className, currentTab, onTabChange, tabs } = props;
-  const ref = useRef<HTMLDivElement>(null);
-  const tabSwitcherRef = useRef<HTMLDivElement>(null);
-
-  const dimensions = useWindowDimensions();
-
-  useEffect(() => {
-    const currentTabIndex = tabs.findIndex((t) => t.value === currentTab);
-    if (
-      typeof currentTabIndex != "number" ||
-      !ref.current ||
-      !tabSwitcherRef.current
-    )
-      return;
-    const tabButton = ref.current.querySelectorAll("button")[currentTabIndex];
-    if (!tabButton) return;
-    tabSwitcherRef.current.style.width = tabButton.clientWidth + "px";
-    tabSwitcherRef.current.style.left =
-      tabButton.getBoundingClientRect().left -
-      ref.current.getBoundingClientRect().left +
-      ref.current.scrollLeft +
-      "px";
-  }, [currentTab, tabSwitcherRef.current, ref.current, dimensions]);
-
-  return (
-    <div
-      className={classNames(
-        "relative inline-flex w-full items-center justify-between overflow-auto rounded-md bg-primary-500/10 p-2 md:w-auto",
-        className,
-      )}
-      ref={ref}
-    >
-      <div
-        className="absolute inset-y-2 z-10 rounded bg-primary-500 transition-all"
-        ref={tabSwitcherRef}
-        style={{ left: 0 }}
-      />
-      {/* There has to be a better way of handling this... */}
-      {tabs.map((tab, i) => (
-        <div
-          key={i}
-          className={`flex-1 whitespace-nowrap px-6 py-2 text-sm font-semibold text-transparent transition-all`}
-        >
-          {tab.text}
-        </div>
-      ))}
-      <div className="absolute inset-2 z-10 flex items-center justify-between">
-        {tabs.map((tab, i) => (
-          <button
-            key={i}
-            id={tab?.id}
-            onClick={() => onTabChange(tab.value)}
-            className={`${currentTab === tab.value ? "text-white" : "text-primary-500 hover:text-primary-600"} flex-1 whitespace-nowrap px-6 py-2 text-sm font-semibold transition-all`}
-          >
-            {tab.text}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Common/UserAutocompleteFormField.tsx b/src/components/Common/UserAutocompleteFormField.tsx
deleted file mode 100644
index 90addafb702..00000000000
--- a/src/components/Common/UserAutocompleteFormField.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { Autocomplete } from "@/components/Form/FormFields/Autocomplete";
-import FormField from "@/components/Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "@/components/Form/FormFields/Utils";
-import { UserType } from "@/components/Users/UserFormValidations";
-import { UserBareMinimum } from "@/components/Users/models";
-
-import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import {
-  classNames,
-  formatName,
-  isUserOnline,
-  mergeQueryOptions,
-} from "@/Utils/utils";
-
-import { Avatar } from "./Avatar";
-
-type BaseProps = FormFieldBaseProps<UserBareMinimum> & {
-  placeholder?: string;
-  userType?: UserType;
-  noResultsError?: string;
-};
-
-type UserSearchProps = BaseProps & {
-  facilityId?: undefined;
-  homeFacility?: string;
-};
-
-export default function UserAutocomplete(props: UserSearchProps) {
-  const field = useFormFieldPropsResolver(props);
-  const [query, setQuery] = useState("");
-  const [disabled, setDisabled] = useState(false);
-
-  const { data, loading } = useTanStackQueryInstead(routes.userList, {
-    query: {
-      home_facility: props.homeFacility,
-      user_type: props.userType,
-      search_text: query,
-      limit: 50,
-      offset: 0,
-    },
-  });
-
-  useEffect(() => {
-    if (
-      loading ||
-      query ||
-      !field.required ||
-      !props.noResultsError ||
-      !data?.results
-    ) {
-      return;
-    }
-
-    if (data.results.length === 0) {
-      setDisabled(true);
-      field.handleChange(undefined as unknown as UserBareMinimum);
-    }
-  }, [loading, field.required, data?.results, props.noResultsError]);
-
-  const getAvatar = (option: UserBareMinimum) => {
-    return (
-      <Avatar
-        className="h-11 w-11 rounded-full"
-        name={formatName(option)}
-        imageUrl={option.read_profile_picture_url}
-      />
-    );
-  };
-
-  return (
-    <FormField field={field}>
-      <Autocomplete
-        id={field.id}
-        disabled={field.disabled || disabled}
-        required={field.required as true}
-        placeholder={(disabled && props.noResultsError) || props.placeholder}
-        value={field.value}
-        onChange={field.handleChange}
-        options={mergeQueryOptions(
-          field.value ? [field.value] : [],
-          data?.results ?? [],
-          (obj) => obj.username,
-        )}
-        optionLabel={formatName}
-        optionIcon={userOnlineDot}
-        optionImage={getAvatar}
-        optionDescription={(option) =>
-          `${option.user_type} - ${option.username}`
-        }
-        optionValue={(option) => option}
-        onQuery={setQuery}
-        isLoading={loading}
-      />
-    </FormField>
-  );
-}
-
-const userOnlineDot = (user: UserBareMinimum) => (
-  <div
-    className={classNames(
-      "mr-4 size-2.5 rounded-full",
-      isUserOnline(user) ? "bg-primary-500" : "bg-secondary-400",
-    )}
-  />
-);
diff --git a/src/components/Files/FileBlock.tsx b/src/components/Files/FileBlock.tsx
deleted file mode 100644
index 1b9cb9f8959..00000000000
--- a/src/components/Files/FileBlock.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import { t } from "i18next";
-
-import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
-
-import { Button } from "@/components/ui/button";
-
-import { FileUploadModel } from "@/components/Patient/models";
-
-import { FileManagerResult } from "@/hooks/useFileManager";
-
-import { FILE_EXTENSIONS } from "@/common/constants";
-
-import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
-
-export interface FileBlockProps {
-  file: FileUploadModel;
-  fileManager: FileManagerResult;
-  associating_id: string;
-  editable: boolean;
-  archivable?: boolean;
-}
-
-export default function FileBlock(props: FileBlockProps) {
-  const {
-    file,
-    fileManager,
-    associating_id,
-    editable = false,
-    archivable = false,
-  } = props;
-
-  const filetype = fileManager.getFileType(file);
-
-  const { data: fileData } = useQuery({
-    queryKey: ["file", { id: file.id, type: fileManager.type, associating_id }],
-    queryFn: query(routes.retrieveUpload, {
-      queryParams: { file_type: fileManager.type, associating_id },
-      pathParams: { id: file.id || "" },
-    }),
-    enabled: filetype === "AUDIO" && !file.is_archived,
-  });
-
-  const icons: Record<keyof typeof FILE_EXTENSIONS | "UNKNOWN", IconName> = {
-    AUDIO: "l-volume",
-    IMAGE: "l-image",
-    PRESENTATION: "l-presentation-play",
-    VIDEO: "l-video",
-    UNKNOWN: "l-file-medical",
-    DOCUMENT: "l-file-medical",
-  };
-
-  const archived = file.is_archived;
-
-  return (
-    <div
-      id="file-div"
-      className={`flex flex-col justify-between gap-2 rounded-lg border border-secondary-300 lg:flex-row lg:items-center ${archived ? "text-secondary-600" : "bg-white"} px-4 py-2 transition-all hover:bg-secondary-100`}
-    >
-      <div className="flex items-center gap-4">
-        <div
-          className={`${archived ? "bg-secondary-100 text-secondary-500" : "bg-primary-500/10 text-primary-700"} flex aspect-square w-14 items-center justify-center rounded-full`}
-        >
-          <CareIcon icon={icons[filetype]} className="text-4xl" />
-        </div>
-        <div className="min-w-[40%] break-all">
-          <div className="">
-            {file.name}
-            {file.extension} {file.is_archived && "(Archived)"}
-          </div>
-          <div className="text-xs text-secondary-700">
-            {dayjs(
-              file.is_archived ? file.archived_datetime : file.created_date,
-            ).format("DD MMM YYYY, hh:mm A")}{" "}
-            by{" "}
-            {file.is_archived
-              ? file.archived_by?.username
-              : file.uploaded_by?.username}
-          </div>
-        </div>
-      </div>
-      <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-        {filetype === "AUDIO" && !file.is_archived && (
-          <div className="w-full md:w-[300px]">
-            <audio
-              className="max-h-full w-full object-contain"
-              src={fileData?.read_signed_url}
-              controls
-              preload="auto"
-              controlsList="nodownload"
-            />
-          </div>
-        )}
-        {!file.is_archived &&
-          (fileManager.isPreviewable(file) ? (
-            <Button
-              variant={"secondary"}
-              onClick={() => fileManager.viewFile(file, associating_id)}
-              className="w-full md:w-auto"
-            >
-              <CareIcon icon="l-eye" />
-              {t("view")}
-            </Button>
-          ) : (
-            <Button
-              variant={"secondary"}
-              onClick={() => fileManager.downloadFile(file, associating_id)}
-              className="w-full md:w-auto"
-            >
-              <CareIcon icon="l-arrow-circle-down" />
-              {t("download")}
-            </Button>
-          ))}
-        <div className="inline-flex w-full gap-2 md:w-auto">
-          {!file.is_archived && editable && (
-            <Button
-              variant={"secondary"}
-              onClick={() => fileManager.editFile(file, associating_id)}
-              className="flex-1 md:flex-auto"
-            >
-              <CareIcon icon={"l-pen"} />
-              {t("rename")}
-            </Button>
-          )}
-          {(file.is_archived || editable) && archivable && (
-            <Button
-              variant={file.is_archived ? "primary" : "secondary"}
-              onClick={() => fileManager.archiveFile(file, associating_id)}
-              className="flex-1 md:flex-auto"
-            >
-              <CareIcon
-                icon={file.is_archived ? "l-info-circle" : "l-archive"}
-              />
-              {file.is_archived ? t("more_info") : t("archive")}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Files/FileUpload.tsx b/src/components/Files/FileUpload.tsx
deleted file mode 100644
index 54881c80c0a..00000000000
--- a/src/components/Files/FileUpload.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
-import { ReactNode, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-
-import Pagination from "@/components/Common/Pagination";
-import Tabs from "@/components/Common/Tabs";
-import FileBlock from "@/components/Files/FileBlock";
-import { FileUploadModel } from "@/components/Patient/models";
-
-import useAuthUser from "@/hooks/useAuthUser";
-import useFileManager from "@/hooks/useFileManager";
-import useFileUpload from "@/hooks/useFileUpload";
-
-import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
-
-import routes from "@/Utils/request/api";
-import query from "@/Utils/request/query";
-
-export const LinearProgressWithLabel = (props: { value: number }) => {
-  return (
-    <div className="flex align-middle">
-      <div className="my-auto mr-2 w-full">
-        <div className="mr-2 h-1.5 w-full rounded-full bg-primary-200">
-          <div
-            className="h-1.5 rounded-full bg-primary-500"
-            style={{ width: `${props.value}%` }}
-          />
-        </div>
-      </div>
-      <div className="min-w-[35]">
-        <p className="text-slate-600">{`${Math.round(props.value)}%`}</p>
-      </div>
-    </div>
-  );
-};
-
-interface FileUploadProps {
-  type: string;
-  patientId?: string;
-  encounterId?: string;
-  consentId?: string;
-  allowAudio?: boolean;
-  sampleId?: string;
-  claimId?: string;
-  className?: string;
-  hideUpload?: boolean;
-}
-
-export interface ModalDetails {
-  name?: string;
-  id?: string;
-  reason?: string;
-  userArchived?: string;
-  archiveTime?: string;
-  associatedId?: string;
-}
-
-export interface StateInterface {
-  open: boolean;
-  isImage: boolean;
-  name: string;
-  extension: string;
-  zoom: number;
-  isZoomInDisabled: boolean;
-  isZoomOutDisabled: boolean;
-  rotation: number;
-  id?: string;
-  associating_id?: string;
-}
-
-export const FileUpload = (props: FileUploadProps) => {
-  const { t } = useTranslation();
-  const {
-    encounterId,
-    patientId,
-    consentId,
-    type,
-    sampleId,
-    claimId,
-    allowAudio,
-    hideUpload,
-  } = props;
-  const [currentPage, setCurrentPage] = useState(1);
-  const [offset, setOffset] = useState(0);
-  const [tab, setTab] = useState("UNARCHIVED");
-  const authUser = useAuthUser();
-  const queryClient = useQueryClient();
-
-  const handlePagination = (page: number, limit: number) => {
-    const offset = (page - 1) * limit;
-    setCurrentPage(page);
-    setOffset(offset);
-  };
-
-  const UPLOAD_HEADING: { [index: string]: string } = {
-    PATIENT: t("upload_headings__patient"),
-    CONSULTATION: t("upload_headings__consultation"),
-    SAMPLE_MANAGEMENT: t("upload_headings__sample_report"),
-    CLAIM: t("upload_headings__supporting_info"),
-  };
-  const VIEW_HEADING: { [index: string]: string } = {
-    PATIENT: t("file_list_headings__patient"),
-    CONSULTATION: t("file_list_headings__consultation"),
-    SAMPLE_MANAGEMENT: t("file_list_headings__sample_report"),
-    CLAIM: t("file_list_headings__supporting_info"),
-  };
-
-  const associatedId =
-    {
-      PATIENT: patientId,
-      CONSENT_RECORD: consentId,
-      ENCOUNTER: encounterId,
-      SAMPLE_MANAGEMENT: sampleId,
-      CLAIM: claimId,
-    }[type] || "";
-
-  const refetchAll = () => {
-    queryClient.invalidateQueries({
-      queryKey: ["viewUpload", "active", type, associatedId],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["viewUpload", "archived", type, associatedId],
-    });
-    if (type === "consultation") {
-      queryClient.invalidateQueries({
-        queryKey: ["viewUpload", "discharge_summary", associatedId],
-      });
-    }
-  };
-
-  const { data: activeFiles, isLoading: activeFilesLoading } = useQuery({
-    queryKey: ["viewUpload", "active", type, associatedId, offset],
-    queryFn: query(routes.viewUpload, {
-      queryParams: {
-        file_type: type,
-        associating_id: associatedId,
-        is_archived: false,
-        limit: RESULTS_PER_PAGE_LIMIT,
-        offset: offset,
-      },
-    }),
-  });
-
-  const { data: archivedFiles, isLoading: archivedFilesLoading } = useQuery({
-    queryKey: ["viewUpload", "archived", type, associatedId, offset],
-    queryFn: query(routes.viewUpload, {
-      queryParams: {
-        file_type: type,
-        associating_id: associatedId,
-        is_archived: true,
-        limit: RESULTS_PER_PAGE_LIMIT,
-        offset: offset,
-      },
-    }),
-  });
-
-  const { data: dischargeSummary, isLoading: dischargeSummaryLoading } =
-    useQuery({
-      queryKey: ["viewUpload", "discharge_summary", associatedId, offset],
-      queryFn: query(routes.viewUpload, {
-        queryParams: {
-          file_type: "discharge_summary",
-          associating_id: associatedId,
-          is_archived: false,
-          limit: RESULTS_PER_PAGE_LIMIT,
-          offset: offset,
-          silent: true,
-        },
-      }),
-      enabled: type === "consultation",
-    });
-
-  const queries = {
-    UNARCHIVED: { data: activeFiles, isLoading: activeFilesLoading },
-    ARCHIVED: { data: archivedFiles, isLoading: archivedFilesLoading },
-    DISCHARGE_SUMMARY: {
-      data: dischargeSummary,
-      isLoading: dischargeSummaryLoading,
-    },
-  };
-
-  const loading = Object.values(queries).some((q) => q.isLoading);
-  const fileQuery = queries[tab as keyof typeof queries];
-
-  const tabs = [
-    { text: "Active Files", value: "UNARCHIVED" },
-    { text: "Archived Files", value: "ARCHIVED" },
-    ...(dischargeSummary?.results?.length
-      ? [
-          {
-            text: "Discharge Summary",
-            value: "DISCHARGE_SUMMARY",
-          },
-        ]
-      : []),
-  ];
-
-  const fileUpload = useFileUpload({
-    type,
-    allowedExtensions: [
-      "jpg",
-      "jpeg",
-      "png",
-      "gif",
-      "bmp",
-      "tiff",
-      "mp4",
-      "mov",
-      "avi",
-      "wmv",
-      "mp3",
-      "wav",
-      "ogg",
-      "txt",
-      "csv",
-      "rtf",
-      "doc",
-      "odt",
-      "pdf",
-      "xls",
-      "xlsx",
-      "ods",
-      "pdf",
-    ],
-    allowNameFallback: false,
-    onUpload: refetchAll,
-  });
-
-  const fileManager = useFileManager({
-    type,
-    onArchive: refetchAll,
-    onEdit: refetchAll,
-    uploadedFiles:
-      fileQuery?.data?.results
-        .slice()
-        .reverse()
-        .map((file) => ({
-          ...file,
-          associating_id: associatedId,
-        })) || [],
-  });
-  const dischargeSummaryFileManager = useFileManager({
-    type: "DISCHARGE_SUMMARY",
-    onArchive: refetchAll,
-    onEdit: refetchAll,
-  });
-
-  const uploadButtons: {
-    name: string;
-    icon: IconName;
-    onClick?: () => void;
-    children?: ReactNode;
-    show?: boolean;
-    id: string;
-  }[] = [
-    {
-      name: t("choose_file"),
-      icon: "l-file-upload-alt",
-      children: <fileUpload.Input />,
-      id: "upload-file",
-    },
-    {
-      name: t("open_camera"),
-      icon: "l-camera",
-      onClick: fileUpload.handleCameraCapture,
-      id: "open-webcam",
-    },
-    {
-      name: t("record"),
-      icon: "l-microphone",
-      onClick: fileUpload.handleAudioCapture,
-      show: allowAudio,
-      id: "record-audio",
-    },
-  ];
-  return (
-    <div className={`md:p-4 ${props.className}`}>
-      {fileUpload.Dialogues}
-      {fileManager.Dialogues}
-      {dischargeSummaryFileManager.Dialogues}
-      {!hideUpload && (
-        <>
-          <h4 className="mb-6 text-2xl">{UPLOAD_HEADING[type]}</h4>
-          {fileUpload.files[0] ? (
-            <div className="mb-8 rounded-lg border border-secondary-300 bg-white p-4">
-              <div className="mb-4 flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2">
-                <span>
-                  <CareIcon icon="l-paperclip" className="mr-2" />
-                  {fileUpload.files[0].name}
-                </span>
-                <button
-                  onClick={fileUpload.clearFiles}
-                  disabled={fileUpload.uploading}
-                  className="text-lg"
-                >
-                  <CareIcon icon="l-times" />
-                </button>
-              </div>
-              <Label>{t("enter_file_name")}</Label>
-              <Input
-                name="consultation_file"
-                type="text"
-                id="upload-file-name"
-                required
-                value={fileUpload.fileNames[0] || ""}
-                disabled={fileUpload.uploading}
-                onChange={(e) => fileUpload.setFileName(e.target.value)}
-              />
-              {fileUpload.error && (
-                <p className="text-red-500 text-sm mt-1">{fileUpload.error}</p>
-              )}
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline_primary"
-                  onClick={() => fileUpload.handleFileUpload(associatedId)}
-                  disabled={fileUpload.uploading} // Disable the button when loading
-                  className={`w-full ${fileUpload.uploading ? "opacity-50" : ""}`}
-                  id="upload_file_button"
-                >
-                  {fileUpload.uploading ? (
-                    <Loader2 className="animate-spin mr-2" size={16} />
-                  ) : (
-                    <CareIcon icon="l-check" className="" />
-                  )}
-                  {t("upload")}
-                </Button>
-                <Button
-                  variant="destructive"
-                  onClick={fileUpload.clearFiles}
-                  disabled={fileUpload.uploading}
-                >
-                  <CareIcon icon="l-trash-alt" className="" />
-                  {t("discard")}
-                </Button>
-              </div>
-              {!!fileUpload.progress && (
-                <LinearProgressWithLabel value={fileUpload.progress} />
-              )}
-            </div>
-          ) : (
-            <div className="mb-8 flex flex-col items-center gap-4 md:flex-row">
-              {uploadButtons
-                .filter((b) => b.show !== false)
-                .map((button, i) => (
-                  <label
-                    key={i}
-                    className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-primary-500/20 bg-primary-500/10 p-3 text-primary-700 transition-all hover:bg-primary-500/20 md:p-6"
-                    onClick={button.onClick}
-                    id={button.id}
-                  >
-                    <CareIcon icon={button.icon} className="text-2xl" />
-                    <div className="text-lg">{button.name}</div>
-                    {button.children}
-                  </label>
-                ))}
-            </div>
-          )}
-        </>
-      )}
-      <div className="mb-4 flex flex-col items-center justify-between gap-4 md:flex-row">
-        <h3>{VIEW_HEADING[type]}</h3>
-        <Tabs
-          tabs={tabs}
-          onTabChange={(v) => setTab(v.toString())}
-          currentTab={tab}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        {!(fileQuery?.data?.results || []).length && loading && (
-          <div className="skeleton-animate-alpha h-32 rounded-lg" />
-        )}
-        {fileQuery?.data?.results.map((item: FileUploadModel) => (
-          <FileBlock
-            file={item}
-            key={item.id}
-            fileManager={
-              tab !== "DISCHARGE_SUMMARY"
-                ? fileManager
-                : dischargeSummaryFileManager
-            }
-            associating_id={associatedId}
-            editable={item?.uploaded_by?.username === authUser.username}
-            archivable={tab !== "DISCHARGE_SUMMARY"}
-          />
-        ))}
-        {!(fileQuery?.data?.results || []).length && (
-          <div className="mt-4">
-            <div className="text-md flex items-center justify-center font-semibold capitalize text-secondary-500">
-              {t("no_files_found", { type: tab.toLowerCase() })}
-            </div>
-          </div>
-        )}
-      </div>
-      {(fileQuery?.data?.count ?? 0) > RESULTS_PER_PAGE_LIMIT && (
-        <div className="mt-4 flex w-full justify-center">
-          <Pagination
-            cPage={currentPage}
-            defaultPerPage={RESULTS_PER_PAGE_LIMIT}
-            data={{ totalCount: fileQuery?.data?.count ?? 0 }}
-            onChange={handlePagination}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/Form/FieldValidators.tsx b/src/components/Form/FieldValidators.tsx
deleted file mode 100644
index 989a7aa6688..00000000000
--- a/src/components/Form/FieldValidators.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export type FieldError = string | undefined;
diff --git a/src/components/Form/FormFields/Autocomplete.tsx b/src/components/Form/FormFields/Autocomplete.tsx
deleted file mode 100644
index 7e00c89fc7c..00000000000
--- a/src/components/Form/FormFields/Autocomplete.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import {
-  Combobox,
-  ComboboxButton,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from "@headlessui/react";
-import { ReactNode, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import { DropdownTransition } from "@/components/Common/HelperComponents";
-import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2";
-
-import { classNames } from "@/Utils/utils";
-
-type OptionCallback<T, R> = (option: T) => R;
-
-type AutocompleteProps<T, V = T> = {
-  id?: string;
-  options: readonly T[];
-  disabled?: boolean | undefined;
-  value: V | undefined;
-  placeholder?: string;
-  optionLabel: OptionCallback<T, string>;
-  optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionImage?: OptionCallback<T, ReactNode | undefined>;
-  optionValue?: OptionCallback<T, V>;
-  optionDescription?: OptionCallback<T, React.ReactNode>;
-  optionDisabled?: OptionCallback<T, boolean>;
-  className?: string;
-  minQueryLength?: number;
-  onQuery?: (query: string) => void;
-  requiredError?: boolean;
-  isLoading?: boolean;
-  allowRawInput?: boolean;
-  error?: string;
-} & (
-  | {
-      required?: false;
-      onChange: OptionCallback<V | undefined, void>;
-    }
-  | {
-      required: true;
-      onChange: OptionCallback<V, void>;
-    }
-);
-
-/**
- * Avoid using this component directly. Use `AutocompleteFormField` instead as
- * its API is easier to use and compliant with `FormField` based components.
- *
- * Use this only when you want to hack into the design and get more
- * customizability.
- */
-export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
-  const { t } = useTranslation();
-  const [query, setQuery] = useState(""); // Ensure lower case
-
-  useEffect(() => {
-    props.onQuery?.(query);
-  }, [query]);
-
-  const mappedOptions = props.options.map((option) => {
-    const label = props.optionLabel(option);
-    const description = props.optionDescription?.(option);
-    return {
-      label,
-      description,
-      search: label.toLowerCase(),
-      icon: props.optionIcon?.(option),
-      image: props.optionImage?.(option),
-      value: props.optionValue ? props.optionValue(option) : option,
-      disabled: props.optionDisabled?.(option),
-    };
-  });
-
-  const getOptions = () => {
-    if (!query) return mappedOptions;
-
-    const knownOption = mappedOptions.find(
-      (o) => o.value == props.value || o.label == props.value,
-    );
-
-    if (knownOption) return mappedOptions;
-    return [
-      {
-        label: query,
-        description: undefined,
-        search: query.toLowerCase(),
-        icon: <CareIcon icon="l-plus" />,
-        image: undefined,
-        value: query,
-        disabled: undefined,
-      },
-      ...mappedOptions,
-    ];
-  };
-
-  const options = props.allowRawInput ? getOptions() : mappedOptions;
-
-  const value = options.find((o) => props.value == o.value);
-
-  const filteredOptions =
-    props.onQuery === undefined
-      ? options.filter((o) => o.search.includes(query))
-      : options;
-
-  return (
-    <div
-      className={
-        props.requiredError || props.error
-          ? "rounded border border-red-500 " + props.className
-          : props.className
-      }
-      id={props.id}
-    >
-      <Combobox
-        immediate
-        disabled={props.disabled}
-        value={(value ?? props.placeholder ?? "Select") as T}
-        onChange={(selection: any) => props.onChange(selection?.value)}
-      >
-        <div className="relative">
-          <div className="flex">
-            <ComboboxInput
-              name={props.id}
-              className="cui-input-base truncate pr-16"
-              placeholder={props.placeholder ?? "Select"}
-              displayValue={(value: any) => value?.label || ""}
-              onChange={(event) => setQuery(event.target.value.toLowerCase())}
-              onBlur={() => value && setQuery("")}
-              autoComplete="off"
-            />
-            {!props.disabled && (
-              <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-secondary-900">
-                  <span>{value?.icon}</span>
-
-                  {value && !props.isLoading && !props.required && (
-                    <div className="tooltip" id="clear-button">
-                      <CareIcon
-                        icon="l-times-circle"
-                        className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          props.onChange(undefined);
-                        }}
-                      />
-                      <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
-                        {t("clear_selection")}
-                      </span>
-                    </div>
-                  )}
-
-                  {props.isLoading ? (
-                    <CareIcon icon="l-spinner" className="animate-spin" />
-                  ) : (
-                    <CareIcon id="dropdown-toggle" icon="l-angle-down" />
-                  )}
-                </div>
-              </ComboboxButton>
-            )}
-          </div>
-
-          <DropdownTransition>
-            <ComboboxOptions
-              modal={false}
-              as="ul"
-              className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right"
-            >
-              {props.minQueryLength && query.length < props.minQueryLength ? (
-                <div className="p-2 text-sm text-secondary-500">
-                  {`Please enter at least ${props.minQueryLength} characters to search`}
-                </div>
-              ) : filteredOptions.length === 0 ? (
-                <div className="p-2 text-sm text-secondary-500">
-                  No options found
-                </div>
-              ) : (
-                filteredOptions.map((option, index) => (
-                  <ComboboxOption
-                    as="li"
-                    id={`${props.id}-option-${option.label}-value-${index}`}
-                    key={`${props.id}-option-${option.label}-value-${index}`}
-                    className={dropdownOptionClassNames}
-                    value={option}
-                    disabled={option.disabled}
-                  >
-                    {({ focus }) => (
-                      <div className="flex flex-row gap-2">
-                        {option?.image}
-                        <div className="flex flex-grow flex-col">
-                          <div className="flex justify-between">
-                            <span>{option.label}</span>
-                            <span>{option.icon}</span>
-                          </div>
-                          {option.description && (
-                            <div
-                              className={classNames(
-                                "text-sm font-normal",
-                                option.disabled
-                                  ? "text-secondary-700"
-                                  : focus
-                                    ? "text-primary-200"
-                                    : "text-secondary-700",
-                              )}
-                            >
-                              {option.description}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    )}
-                  </ComboboxOption>
-                ))
-              )}
-            </ComboboxOptions>
-          </DropdownTransition>
-        </div>
-      </Combobox>
-    </div>
-  );
-};
diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx
deleted file mode 100644
index f3ad0559e44..00000000000
--- a/src/components/Form/FormFields/FormField.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { FieldError } from "@/components/Form/FieldValidators";
-import { FormFieldBaseProps } from "@/components/Form/FormFields/Utils";
-
-import { classNames } from "@/Utils/utils";
-
-type LabelProps = {
-  id?: string | undefined;
-  required?: boolean;
-  htmlFor?: string;
-  children: React.ReactNode;
-  className?: string | undefined;
-  noPadding?: boolean;
-};
-
-export const FieldLabel = (props: LabelProps) => {
-  return (
-    <label
-      id={props.id}
-      className={classNames(
-        "block text-base font-normal text-secondary-900",
-        !props.noPadding && "mb-2",
-        props.className,
-      )}
-      htmlFor={props.htmlFor}
-    >
-      {props.children}
-      {props.required && <span className="text-danger-500">{" *"}</span>}
-    </label>
-  );
-};
-
-type ErrorProps = {
-  error: FieldError;
-  className?: string | undefined;
-};
-
-export const FieldErrorText = (props: ErrorProps) => {
-  return (
-    <span
-      className={classNames(
-        "error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300",
-        props.error ? "opacity-100" : "opacity-0",
-        props.className,
-      )}
-    >
-      {props.error}
-    </span>
-  );
-};
-
-/**
- * @deprecated use shadcn/ui's solution for form fields instead along with react-hook-form
- */
-const FormField = ({
-  field,
-  ...props
-}: {
-  field?: FormFieldBaseProps<any>;
-  children: React.ReactNode;
-}) => {
-  return (
-    <div className={field?.className}>
-      <div className="flex items-center justify-between">
-        {field?.label && (
-          <FieldLabel
-            htmlFor={field?.id}
-            required={field?.required}
-            className={field?.labelClassName}
-          >
-            {field?.label}
-          </FieldLabel>
-        )}
-        {field?.labelSuffix && (
-          <span className="mb-2 text-xs">{field?.labelSuffix}</span>
-        )}
-      </div>
-      <div className={field?.className}>{props.children}</div>
-      <FieldErrorText error={field?.error} className={field?.errorClassName} />
-    </div>
-  );
-};
-
-export default FormField;
diff --git a/src/components/Form/FormFields/RadioFormField.tsx b/src/components/Form/FormFields/RadioFormField.tsx
deleted file mode 100644
index ca205fcccad..00000000000
--- a/src/components/Form/FormFields/RadioFormField.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { ChangeEventHandler, ReactNode } from "react";
-
-import FormField from "@/components/Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "@/components/Form/FormFields/Utils";
-
-import { classNames } from "@/Utils/utils";
-
-type Props<T, V = string> = FormFieldBaseProps<V | null> & {
-  options: readonly T[];
-  optionLabel: (option: T) => React.ReactNode;
-  optionValue: (option: T) => V;
-  containerClassName?: string;
-  unselectLabel?: string;
-  layout?: "vertical" | "horizontal" | "grid" | "auto";
-};
-
-/**
- * @deprecated use shadcn/ui's radio-group instead
- */
-const RadioFormField = <T, V extends string>(props: Props<T, V>) => {
-  const field = useFormFieldPropsResolver(props);
-  return (
-    <FormField field={field}>
-      <div
-        className={classNames(
-          {
-            auto: "flex flex-col gap-2 lg:flex-row lg:flex-wrap lg:gap-x-6",
-            vertical: "flex flex-col gap-1",
-            horizontal: "flex justify-between gap-4",
-            grid: "grid grid-cols-2 gap-x-8 gap-y-2",
-          }[props.layout ?? "auto"],
-          "p-1 transition-all duration-200 ease-in-out",
-        )}
-      >
-        {props.unselectLabel && (
-          <div className="flex items-center gap-2">
-            <input
-              className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
-              type="radio"
-              id="none"
-              name={props.name}
-              value={"__NULL__"}
-              checked={field.value == null}
-              onChange={() => field.handleChange(null)}
-            />
-            <label htmlFor="none">{props.unselectLabel}</label>
-          </div>
-        )}
-        {props.options.map((option) => {
-          const value = props.optionValue(option);
-          return (
-            <RadioInput
-              key={value}
-              id={`${props.name}-option-${value}`}
-              label={props.optionLabel(option)}
-              name={field.name}
-              value={props.optionValue(option)}
-              checked={value === field.value}
-              onChange={(e) => field.handleChange(e.target.value as V)}
-            />
-          );
-        })}
-      </div>
-    </FormField>
-  );
-};
-
-export default RadioFormField;
-
-export const RadioInput = (props: {
-  label?: ReactNode;
-  id?: string;
-  name?: string;
-  value?: string;
-  checked?: boolean;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-}) => {
-  return (
-    <div className="flex items-center gap-2">
-      <input
-        className="h-4 w-4 rounded-full border-secondary-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
-        type="radio"
-        id={props.id}
-        name={props.name}
-        value={props.value}
-        checked={props.checked}
-        onChange={(e) => props.onChange?.(e)}
-      />
-      <label htmlFor={props.id}>{props.label}</label>
-    </div>
-  );
-};
diff --git a/src/components/Form/FormFields/SelectFormField.tsx b/src/components/Form/FormFields/SelectFormField.tsx
deleted file mode 100644
index 6b95550299f..00000000000
--- a/src/components/Form/FormFields/SelectFormField.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import FormField from "@/components/Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "@/components/Form/FormFields/Utils";
-import SelectMenuV2 from "@/components/Form/SelectMenuV2";
-
-type OptionCallback<T, R> = (option: T) => R;
-
-type SelectFormFieldProps<T, V = T> = FormFieldBaseProps<V> & {
-  placeholder?: React.ReactNode;
-  options: readonly T[];
-  position?: "above" | "below";
-  optionLabel: OptionCallback<T, React.ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, React.ReactNode>;
-  optionDescription?: OptionCallback<T, React.ReactNode>;
-  optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-  inputClassName?: string;
-};
-
-/**
- * @deprecated use shadcn/ui's select instead
- */
-export const SelectFormField = <T, V>(props: SelectFormFieldProps<T, V>) => {
-  const field = useFormFieldPropsResolver<V>(props);
-  return (
-    <FormField field={field}>
-      <SelectMenuV2
-        id={field.id}
-        options={props.options}
-        disabled={field.disabled}
-        value={field.value}
-        required={field.required}
-        onChange={(value: any) => field.handleChange(value)}
-        position={props.position}
-        placeholder={props.placeholder}
-        optionLabel={props.optionLabel}
-        inputClassName={props.inputClassName}
-        optionSelectedLabel={props.optionSelectedLabel}
-        optionDescription={props.optionDescription}
-        optionIcon={props.optionIcon}
-        optionValue={props.optionValue}
-        optionDisabled={props.optionDisabled}
-        requiredError={field.error ? props.required : false}
-      />
-    </FormField>
-  );
-};
diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
deleted file mode 100644
index 18a4de18341..00000000000
--- a/src/components/Form/FormFields/TextFormField.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  forwardRef,
-  useState,
-} from "react";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import FormField from "@/components/Form/FormFields/FormField";
-import {
-  FormFieldBaseProps,
-  useFormFieldPropsResolver,
-} from "@/components/Form/FormFields/Utils";
-
-import { classNames } from "@/Utils/utils";
-
-export type TextFormFieldProps = FormFieldBaseProps<string> &
-  Omit<
-    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "onChange"
-  > & {
-    inputClassName?: string | undefined;
-    removeDefaultClasses?: true | undefined;
-    leading?: React.ReactNode | undefined;
-    trailing?: React.ReactNode | undefined;
-    leadingFocused?: React.ReactNode | undefined;
-    trailingFocused?: React.ReactNode | undefined;
-    trailingPadding?: string | undefined;
-    leadingPadding?: string | undefined;
-    suggestions?: string[];
-    clearable?: boolean | undefined;
-  };
-
-/**
- * @deprecated use shadcn/ui's Input instead
- */
-const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
-  const field = useFormFieldPropsResolver(props);
-  const { leading, trailing } = props;
-  const leadingFocused = props.leadingFocused || props.leading;
-  const trailingFocused = props.trailingFocused || props.trailing;
-  const hasLeading = !!(leading || leadingFocused);
-  const hasTrailing = !!(trailing || trailingFocused);
-  const hasIcon = hasLeading || hasTrailing;
-  const [showPassword, setShowPassword] = useState(false);
-
-  const getPasswordFieldType = () => {
-    return showPassword ? "text" : "password";
-  };
-
-  const minError =
-    typeof props.min !== "undefined" &&
-    typeof field.value !== "undefined" &&
-    parseFloat(`${props.min}`) > parseFloat(`${field.value}`)
-      ? `Value can not be smaller than ${props.min}`
-      : undefined;
-  const maxError =
-    typeof props.max !== "undefined" &&
-    typeof field.value !== "undefined" &&
-    parseFloat(`${props.max}`) < parseFloat(`${field.value}`)
-      ? `Value can not be greater than ${props.max}`
-      : undefined;
-
-  const labelSuffixWithThreshold = (
-    <div className="flex items-center gap-2">
-      <span>{field.labelSuffix}</span>
-    </div>
-  );
-
-  let child = (
-    <div className="relative">
-      <input
-        {...props}
-        ref={ref as React.Ref<HTMLInputElement>}
-        id={field.id}
-        className={classNames(
-          "cui-input-base peer",
-          hasLeading && (props.leadingPadding || "pl-10"),
-          hasTrailing && (props.trailingPadding || "pr-10"),
-          field.error && "border-danger-500",
-          props.inputClassName,
-        )}
-        disabled={field.disabled}
-        type={props.type === "password" ? getPasswordFieldType() : props.type}
-        name={field.name}
-        value={field.value}
-        required={field.required}
-        onChange={(e) => field.handleChange(e.target.value)}
-      />
-      {props.clearable && field.value && (
-        <button
-          type="button"
-          className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
-          onClick={() => field.handleChange("")}
-          aria-label="Clear input"
-        >
-          <CareIcon icon="l-times-circle" className="text-lg" />
-        </button>
-      )}
-    </div>
-  );
-
-  if (props.type === "password") {
-    child = (
-      <div className="relative">
-        {child}
-        <button
-          type="button"
-          className="z-5 absolute right-0 top-0 flex h-full items-center px-3 text-xl"
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          <CareIcon icon={showPassword ? "l-eye" : "l-eye-slash"} />
-        </button>
-      </div>
-    );
-  }
-
-  if (hasIcon) {
-    const _leading =
-      leading === leadingFocused ? (
-        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
-          {leading}
-        </div>
-      ) : (
-        <>
-          <div className="absolute inset-y-0 left-0 flex translate-y-0 items-center pl-3 opacity-100 transition-all delay-300 duration-500 ease-in-out peer-focus:translate-y-1 peer-focus:opacity-0">
-            {leading}
-          </div>
-          <div className="absolute inset-y-0 left-0 flex -translate-y-1 items-center pl-3 opacity-0 transition-all delay-300 duration-500 ease-in-out peer-focus:translate-y-0 peer-focus:opacity-100">
-            {leadingFocused}
-          </div>
-        </>
-      );
-    const _trailing =
-      trailing === trailingFocused ? (
-        <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-          {trailing}
-        </div>
-      ) : (
-        <>
-          <div className="absolute inset-y-0 right-0 flex translate-y-0 items-center pr-3 opacity-100 transition-all delay-300 duration-500 ease-in-out peer-focus:translate-y-1 peer-focus:opacity-0">
-            {trailing}
-          </div>
-          <div className="absolute inset-y-0 right-0 flex -translate-y-1 items-center pr-3 opacity-0 transition-all delay-300 duration-500 ease-in-out peer-focus:translate-y-0 peer-focus:opacity-100">
-            {trailingFocused}
-          </div>
-        </>
-      );
-
-    child = (
-      <div className="relative">
-        {(leading || leadingFocused) && _leading}
-        {child}
-        {(trailing || trailingFocused) && _trailing}
-      </div>
-    );
-  }
-
-  if (
-    props.suggestions?.length &&
-    !props.suggestions.includes(`${field.value}`)
-  ) {
-    child = (
-      <div className="flex flex-col gap-2">
-        {child}
-        <ul className="flex flex-wrap gap-x-2 gap-y-1 text-xs">
-          {props.suggestions.map((suggestion) => (
-            <li
-              key={suggestion}
-              className="cursor-pointer rounded-full border border-gray-300 bg-gray-50 px-2 py-0.5 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-100"
-              onClick={() => field.handleChange(suggestion)}
-            >
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-
-  return (
-    <FormField
-      field={{
-        ...field,
-        error: field.error || minError || maxError,
-        labelSuffix: labelSuffixWithThreshold,
-      }}
-    >
-      {child}
-    </FormField>
-  );
-});
-TextFormField.displayName = "TextFormField";
-
-export default TextFormField;
diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts
deleted file mode 100644
index 1e88bcbd6a0..00000000000
--- a/src/components/Form/FormFields/Utils.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { FocusEvent } from "react";
-
-import { FieldError } from "@/components/Form/FieldValidators";
-
-export type FieldChangeEvent<T> = { name: string; value: T };
-export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
-
-/**
- * The base props for a form field.
- *
- * If a form context is provided, the field will be registered with the form
- * and the onChange, value, and error props will be ignored.
- *
- * If a form context is not provided, the field will be treated as a standalone
- * field.
- *
- * @template T The type of the field value.
- * @template Form The type of the form details.
- */
-export type FormFieldBaseProps<T> = {
-  label?: React.ReactNode;
-  labelSuffix?: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  required?: boolean;
-  labelClassName?: string;
-  errorClassName?: string;
-  name: string;
-  validate?: undefined;
-  id?: string;
-  onChange: FieldChangeEventHandler<T>;
-  value?: T;
-  error?: FieldError;
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-};
-
-/**
- * Resolves the props for a form field.
- * If a form context is provided, the field will be registered with the form.
- * Otherwise, the field will be treated as a standalone field.
- *
- * @param props The props for the field.
- * @returns The resolved props along with a handleChange function.
- */
-export const useFormFieldPropsResolver = <T>(props: FormFieldBaseProps<T>) => {
-  const handleChange = (value: T) =>
-    props.onChange({ name: props.name, value });
-
-  return {
-    ...props,
-    id: props.id ?? props.name,
-    name: props.name,
-    onChange: props.onChange,
-    value: props.value,
-    error: props.error,
-    handleChange,
-  };
-};
diff --git a/src/components/Form/MultiSelectMenuV2.tsx b/src/components/Form/MultiSelectMenuV2.tsx
deleted file mode 100644
index b67da3656f4..00000000000
--- a/src/components/Form/MultiSelectMenuV2.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ReactNode } from "react";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import { classNames } from "@/Utils/utils";
-
-interface MultiSelectOptionChipProps {
-  label: ReactNode;
-  onRemove?: () => void;
-}
-
-export const MultiSelectOptionChip = ({
-  label,
-  onRemove,
-}: MultiSelectOptionChipProps) => {
-  return (
-    <span className="flex items-center gap-2 rounded-full border-secondary-300 bg-secondary-200 px-3 text-xs text-secondary-700">
-      <p className="py-1">{label}</p>
-      {onRemove && (
-        <p
-          className="cursor-pointer rounded-full hover:bg-white"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
-        >
-          <CareIcon icon="l-times" className="text-base" />
-        </p>
-      )}
-    </span>
-  );
-};
-
-interface OptionRenderPropArg {
-  focus: boolean;
-  selected: boolean;
-  disabled: boolean;
-}
-
-export const dropdownOptionClassNames = ({
-  focus,
-  selected,
-  disabled,
-}: OptionRenderPropArg) => {
-  return classNames(
-    "group/option relative w-full cursor-default select-none p-4 text-sm transition-colors duration-75 ease-in-out",
-    !disabled && focus && "bg-primary-500 text-white",
-    !disabled && !focus && selected && "text-primary-500",
-    !disabled && !focus && !selected && "text-secondary-900",
-    disabled && "cursor-not-allowed text-secondary-600",
-    selected ? "font-semibold" : "font-normal",
-  );
-};
diff --git a/src/components/Form/SelectMenuV2.tsx b/src/components/Form/SelectMenuV2.tsx
deleted file mode 100644
index a13d03607c6..00000000000
--- a/src/components/Form/SelectMenuV2.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import {
-  Label,
-  Listbox,
-  ListboxButton,
-  ListboxOption,
-  ListboxOptions,
-} from "@headlessui/react";
-import { ReactNode } from "react";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import { dropdownOptionClassNames } from "@/components/Form/MultiSelectMenuV2";
-
-import { classNames } from "@/Utils/utils";
-
-type OptionCallback<T, R> = (option: T) => R;
-
-type SelectMenuProps<T, V = T> = {
-  id?: string;
-  options: readonly T[];
-  disabled?: boolean | undefined;
-  value: V | undefined;
-  placeholder?: ReactNode;
-  position?: "above" | "below";
-  optionLabel: OptionCallback<T, ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, ReactNode>;
-  optionDescription?: OptionCallback<T, ReactNode>;
-  optionIcon?: OptionCallback<T, ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-  showIconWhenSelected?: boolean;
-  showChevronIcon?: boolean;
-  className?: string;
-  inputClassName?: string;
-  requiredError?: boolean;
-  onFocus?: () => void;
-  onBlur?: () => void;
-} & (
-  | {
-      required?: false;
-      onChange: OptionCallback<V | undefined, void>;
-    }
-  | {
-      required: true;
-      onChange: OptionCallback<V, void>;
-    }
-);
-
-/**
- * Avoid using this component directly. Use `SelectFormField` instead as its API
- * is easier to use and compliant with `FormField` based components.
- *
- * Use this only when you want to hack into the design and get more
- * customizability.
- */
-const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
-  const valueOptions = props.options.map((option) => {
-    const label = props.optionLabel(option);
-    return {
-      label,
-      selectedLabel: props.optionSelectedLabel
-        ? props.optionSelectedLabel(option)
-        : label,
-      description: props.optionDescription?.(option),
-      icon: props.optionIcon?.(option),
-      value: props.optionValue ? props.optionValue(option) : option,
-      disabled: props.optionDisabled?.(option),
-    };
-  });
-
-  const showChevronIcon = props.showChevronIcon ?? true;
-
-  const placeholder =
-    valueOptions?.length > 0 ? (props.placeholder ?? "Select") : "No options";
-  const defaultOption = {
-    label: placeholder,
-    selectedLabel: (
-      <span className="font-normal text-secondary-600">{placeholder}</span>
-    ),
-    description: undefined,
-    icon: undefined,
-    value: undefined,
-    disabled: undefined,
-  };
-
-  const options = props.required
-    ? valueOptions
-    : [defaultOption, ...valueOptions];
-
-  const value = options.find((o) => props.value == o.value) ?? defaultOption;
-
-  return (
-    <div className={props.className} id={props.id}>
-      <Listbox
-        disabled={props.disabled || valueOptions?.length === 0}
-        value={value}
-        onChange={(selection: any) => props.onChange(selection.value)}
-      >
-        <>
-          <Label className="sr-only !relative">{props.placeholder}</Label>
-          <div className="relative">
-            <ListboxButton
-              className={classNames(
-                "cui-input-base flex w-full rounded",
-                props?.requiredError && "border-red-500",
-                props.inputClassName,
-              )}
-              onFocus={props.onFocus}
-              onBlur={props.onBlur}
-            >
-              <div className="relative z-0 flex w-full items-center">
-                <div className="relative flex flex-1 items-center focus:z-10">
-                  {props.showIconWhenSelected && value?.icon && (
-                    <div className="ml-2 text-sm text-secondary-700">
-                      {value.icon}
-                    </div>
-                  )}
-                  <p className="ml-2.5 whitespace-pre-wrap text-start text-sm font-medium">
-                    {value.selectedLabel}
-                  </p>
-                </div>
-                {showChevronIcon && (
-                  <CareIcon
-                    id="dropdown-toggle"
-                    icon="l-angle-down"
-                    className="-mb-0.5 text-lg text-secondary-900"
-                  />
-                )}
-              </div>
-            </ListboxButton>
-            <div
-              className={classNames(
-                "absolute z-10 w-full",
-                props.position === "above" ? "bottom-0 mb-12" : "top-0 mt-12",
-              )}
-            >
-              <ListboxOptions
-                modal={false}
-                as="ul"
-                className="cui-dropdown-base"
-              >
-                {options.map((option, index) => (
-                  <ListboxOption
-                    as="li"
-                    id={`${props.id}-option-${option.value}`}
-                    key={index}
-                    className={dropdownOptionClassNames}
-                    value={option}
-                    disabled={option.disabled}
-                  >
-                    {({ focus, selected }) => (
-                      <div className="flex flex-col gap-2">
-                        <div className="flex justify-between">
-                          {option.label}
-                          {props.optionIcon
-                            ? option.icon
-                            : selected && (
-                                <CareIcon icon="l-check" className="text-lg" />
-                              )}
-                        </div>
-                        {option.description && (
-                          <span
-                            className={classNames(
-                              "text-sm font-normal",
-                              option.disabled
-                                ? "text-secondary-700"
-                                : focus
-                                  ? "text-primary-200"
-                                  : "text-secondary-700",
-                            )}
-                          >
-                            {option.description}
-                          </span>
-                        )}
-                      </div>
-                    )}
-                  </ListboxOption>
-                ))}
-              </ListboxOptions>
-            </div>
-          </div>
-        </>
-      </Listbox>
-    </div>
-  );
-};
-
-export default SelectMenuV2;
diff --git a/src/components/Patient/FileUploadPage.tsx b/src/components/Patient/FileUploadPage.tsx
deleted file mode 100644
index 83bce32954c..00000000000
--- a/src/components/Patient/FileUploadPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import Page from "@/components/Common/Page";
-import { FileUpload } from "@/components/Files/FileUpload";
-
-export default function FileUploadPage(props: {
-  facilityId: string;
-  patientId: string;
-  encounterId?: string;
-  type: "encounter" | "patient";
-}) {
-  const { patientId, encounterId, type } = props;
-  const { t } = useTranslation();
-
-  return (
-    <Page title={t("patient_files")}>
-      <FileUpload
-        patientId={patientId}
-        encounterId={encounterId}
-        type={type}
-        allowAudio={true}
-      />
-    </Page>
-  );
-}
diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx
deleted file mode 100644
index 49b1d3b98a7..00000000000
--- a/src/components/Resource/ResourceCreate.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { Link, navigate, useQueryParams } from "raviger";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import * as z from "zod";
-
-import Card from "@/CAREUI/display/Card";
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import Autocomplete from "@/components/ui/autocomplete";
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { PhoneInput } from "@/components/ui/phone-input";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-
-import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
-
-import useAppHistory from "@/hooks/useAppHistory";
-import useAuthUser from "@/hooks/useAuthUser";
-
-import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants";
-
-import routes from "@/Utils/request/api";
-import mutate from "@/Utils/request/mutate";
-import query from "@/Utils/request/query";
-import validators from "@/Utils/validators";
-import facilityApi from "@/types/facility/facilityApi";
-import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
-
-interface ResourceProps {
-  facilityId: number;
-}
-
-export default function ResourceCreate(props: ResourceProps) {
-  const [facilitySearch, setFacilitySearch] = useState("");
-  const { goBack } = useAppHistory();
-  const { facilityId } = props;
-  const { t } = useTranslation();
-  const [{ related_patient }] = useQueryParams();
-  const authUser = useAuthUser();
-
-  const resourceFormSchema = z.object({
-    category: z.string().min(1, { message: t("field_required") }),
-    assigned_facility: z
-      .object({
-        id: z.string(),
-        name: z.string(),
-      })
-      .nullable(),
-    emergency: z.enum(["true", "false"]),
-    title: z.string().min(1, { message: t("field_required") }),
-    reason: z.string().min(1, { message: t("field_required") }),
-    referring_facility_contact_name: z
-      .string()
-      .min(1, { message: t("field_required") }),
-    referring_facility_contact_number: validators().phoneNumber.required,
-    priority: z.number().default(1),
-  });
-
-  type ResourceFormValues = z.infer<typeof resourceFormSchema>;
-
-  const { data: patientData } = useQuery({
-    queryKey: ["patient", related_patient],
-    queryFn: query(routes.patient.getPatient, {
-      pathParams: { id: String(related_patient) },
-    }),
-    enabled: !!related_patient,
-  });
-
-  const form = useForm<ResourceFormValues>({
-    resolver: zodResolver(resourceFormSchema),
-    defaultValues: {
-      category: "",
-      assigned_facility: null,
-      emergency: "false" as const,
-      title: "",
-      reason: "",
-      referring_facility_contact_name: "",
-      referring_facility_contact_number: "",
-      priority: 1,
-    },
-  });
-
-  const { mutate: createResource, isPending } = useMutation({
-    mutationFn: mutate(routes.createResource),
-    onSuccess: (data: ResourceRequest) => {
-      toast.success(t("resource_created_successfully"));
-      navigate(`/facility/${facilityId}/resource/${data.id}`);
-    },
-  });
-
-  const onSubmit = (data: ResourceFormValues) => {
-    createResource({
-      status: "PENDING",
-      category: data.category,
-      origin_facility: String(props.facilityId),
-      assigned_facility: data.assigned_facility?.id || null,
-      approving_facility: null,
-      emergency: data.emergency === "true",
-      title: data.title,
-      reason: data.reason,
-      referring_facility_contact_name: data.referring_facility_contact_name,
-      referring_facility_contact_number: data.referring_facility_contact_number,
-      related_patient: related_patient,
-      priority: data.priority,
-    });
-  };
-
-  const { data: facilities } = useQuery({
-    queryKey: ["facilities", facilitySearch],
-    queryFn: query.debounced(facilityApi.getAllFacilities, {
-      queryParams: {
-        search_text: facilitySearch,
-        limit: 50,
-      },
-    }),
-  });
-
-  const facilityOptions = facilities?.results.map((facility) => ({
-    label: facility.name,
-    value: facility.id,
-  }));
-
-  const fillMyDetails = () => {
-    form.setValue(
-      "referring_facility_contact_name",
-      `${authUser.first_name} ${authUser.last_name}`.trim(),
-    );
-    if (authUser.phone_number) {
-      form.setValue("referring_facility_contact_number", authUser.phone_number);
-    }
-  };
-
-  if (isPending) {
-    return <Loading />;
-  }
-
-  return (
-    <Page title={t("create_resource_request")}>
-      <div className="container mx-auto max-w-4xl">
-        <Card className="mt-4">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              {patientData && (
-                <Alert>
-                  <div className="flex items-center gap-2">
-                    <Link
-                      href={`/facility/${facilityId}/patient/${related_patient}/resource_requests`}
-                      className="flex items-center gap-2"
-                    >
-                      <CareIcon
-                        icon="l-user"
-                        className="h-5 w-5 text-blue-700"
-                      />
-                      <AlertDescription className="text-sm text-blue-700">
-                        {t("linked_patient")}:{" "}
-                        <span className="font-medium">{patientData.name}</span>
-                      </AlertDescription>
-                    </Link>
-                  </div>
-                </Alert>
-              )}
-
-              <div className="space-y-6">
-                <div>
-                  <h3 className="text-lg font-medium">
-                    {t("basic_information")}
-                  </h3>
-                  <p className="text-sm text-gray-500">
-                    {t("resource_request_basic_info_description")}
-                  </p>
-                </div>
-
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="assigned_facility"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>
-                          {t("facility_for_care_support")}
-                        </FormLabel>
-                        <FormControl>
-                          <Autocomplete
-                            options={facilityOptions ?? []}
-                            value={field.value?.id ?? ""}
-                            placeholder={t("start_typing_to_search")}
-                            onSearch={setFacilitySearch}
-                            onChange={(value) => {
-                              const facility =
-                                facilities?.results.find(
-                                  (f) => f.id === value,
-                                ) ?? null;
-                              form.setValue("assigned_facility", facility);
-                            }}
-                          />
-                        </FormControl>
-                        <FormDescription>
-                          {t("select_facility_description")}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="emergency"
-                    render={({ field }) => (
-                      <FormItem className="space-y-3">
-                        <FormLabel>{t("is_this_an_emergency")}</FormLabel>
-                        <FormControl>
-                          <RadioGroup
-                            onValueChange={field.onChange}
-                            value={field.value}
-                            className="flex gap-4"
-                          >
-                            <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                <RadioGroupItem value="true" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                {t("yes")}
-                              </FormLabel>
-                            </FormItem>
-                            <FormItem className="flex items-center space-x-3 space-y-0">
-                              <FormControl>
-                                <RadioGroupItem value="false" />
-                              </FormControl>
-                              <FormLabel className="font-normal">
-                                {t("no")}
-                              </FormLabel>
-                            </FormItem>
-                          </RadioGroup>
-                        </FormControl>
-                        <FormDescription>
-                          {t("emergency_description")}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <FormField
-                  control={form.control}
-                  name="category"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel required>{t("category")}</FormLabel>
-                      <Select
-                        onValueChange={field.onChange}
-                        value={field.value}
-                      >
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder={t("select_category")} />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {RESOURCE_CATEGORY_CHOICES.map((category) => (
-                            <SelectItem key={category.id} value={category.id}>
-                              {category.text}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormDescription>
-                        {t("category_description")}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <Separator />
-
-              <div className="space-y-6">
-                <div>
-                  <h3 className="text-lg font-medium">
-                    {t("request_details")}
-                  </h3>
-                  <p className="text-sm text-gray-500">
-                    {t("resource_request_details_description")}
-                  </p>
-                </div>
-
-                <FormField
-                  control={form.control}
-                  name="title"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel required>{t("request_title")}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          placeholder={t("request_title_placeholder")}
-                          onChange={(value) => field.onChange(value)}
-                        />
-                      </FormControl>
-                      <FormDescription>
-                        {t("request_title_description")}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="reason"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel required>{t("request_reason")}</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          {...field}
-                          placeholder={t("request_reason_placeholder")}
-                          onChange={(value) => field.onChange(value)}
-                        />
-                      </FormControl>
-                      <FormDescription>
-                        {t("request_reason_description")}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <Separator />
-
-              <div className="space-y-6">
-                <div className="flex flex-col lg:flex-row gap-2 lg:items-center justify-between">
-                  <div>
-                    <h3 className="text-lg font-medium">
-                      {t("contact_information")}
-                    </h3>
-                    <p className="text-sm text-gray-500">
-                      {t("contact_information_description")}
-                    </p>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={fillMyDetails}
-                    className="shrink-0"
-                  >
-                    <CareIcon icon="l-user" className="mr-2 h-4 w-4" />
-                    {t("fill_my_details")}
-                  </Button>
-                </div>
-
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="referring_facility_contact_name"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>{t("contact_person")}</FormLabel>
-                        <FormControl>
-                          <Input
-                            {...field}
-                            onChange={(value) => field.onChange(value)}
-                          />
-                        </FormControl>
-                        <FormDescription>
-                          {t("contact_person_description")}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="referring_facility_contact_number"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>{t("contact_phone")}</FormLabel>
-                        <FormControl>
-                          <PhoneInput
-                            {...field}
-                            onChange={(value) => field.onChange(value)}
-                          />
-                        </FormControl>
-                        <FormDescription>
-                          {t("contact_phone_description")}
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              </div>
-
-              <div className="sticky bottom-0 flex justify-end gap-4 border-t bg-background pt-4">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => goBack()}
-                >
-                  {t("cancel")}
-                </Button>
-                <Button type="submit" variant="default" disabled={isPending}>
-                  {isPending && (
-                    <CareIcon
-                      icon="l-spinner"
-                      className="mr-2 h-4 w-4 animate-spin"
-                    />
-                  )}
-                  {isPending ? t("submitting") : t("submit")}
-                </Button>
-              </div>
-            </form>
-          </Form>
-        </Card>
-      </div>
-    </Page>
-  );
-}
diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
deleted file mode 100644
index e589a83c166..00000000000
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMutation } from "@tanstack/react-query";
-import { t } from "i18next";
-import { navigate, useQueryParams } from "raviger";
-import { useEffect, useReducer, useState } from "react";
-import { toast } from "sonner";
-
-import Card from "@/CAREUI/display/Card";
-
-import Autocomplete from "@/components/ui/autocomplete";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-import CircularProgress from "@/components/Common/CircularProgress";
-import Loading from "@/components/Common/Loading";
-import Page from "@/components/Common/Page";
-import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
-import RadioFormField from "@/components/Form/FormFields/RadioFormField";
-import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
-import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import { UserModel } from "@/components/Users/models";
-
-import useAppHistory from "@/hooks/useAppHistory";
-
-import { RESOURCE_STATUS_CHOICES } from "@/common/constants";
-
-import routes from "@/Utils/request/api";
-import mutate from "@/Utils/request/mutate";
-import query from "@/Utils/request/query";
-import facilityApi from "@/types/facility/facilityApi";
-import { UpdateResourceRequest } from "@/types/resourceRequest/resourceRequest";
-
-interface resourceProps {
-  id: string;
-  facilityId: string;
-}
-
-const initForm: Partial<UpdateResourceRequest> = {
-  assigned_facility: null,
-  emergency: false,
-  title: "",
-  reason: "",
-  assigned_to: null,
-};
-
-const requiredFields: any = {
-  assigned_facility_type: {
-    errorText: "Please Select Facility Type",
-  },
-};
-
-const initError = Object.assign(
-  {},
-  ...Object.keys(initForm).map((k) => ({ [k]: "" })),
-);
-
-const initialState = {
-  form: { ...initForm },
-  errors: { ...initError },
-};
-
-export const ResourceDetailsUpdate = (props: resourceProps) => {
-  const { goBack } = useAppHistory();
-  const [qParams, _] = useQueryParams();
-  const [facilitySearch, setFacilitySearch] = useState("");
-  const [assignedUser, SetAssignedUser] = useState<UserModel>();
-  const resourceFormReducer = (state = initialState, action: any) => {
-    switch (action.type) {
-      case "set_form": {
-        return {
-          ...state,
-          form: action.form,
-        };
-      }
-      case "set_error": {
-        return {
-          ...state,
-          errors: action.errors,
-        };
-      }
-      default:
-        return state;
-    }
-  };
-
-  const [state, dispatch] = useReducer(resourceFormReducer, initialState);
-  const { data, isLoading: assignedUserLoading } = useQuery({
-    queryKey: ["user", props.facilityId],
-    queryFn: query(routes.userList),
-  });
-
-  useEffect(() => {
-    if (data) {
-      SetAssignedUser(data.results[0]);
-    }
-  }, [data]);
-
-  const validateForm = () => {
-    const errors = { ...initError };
-    let isInvalidForm = false;
-    Object.keys(requiredFields).forEach((field) => {
-      if (!state.form[field] || !state.form[field].length) {
-        errors[field] = requiredFields[field].errorText;
-        isInvalidForm = true;
-      }
-    });
-
-    dispatch({ type: "set_error", errors });
-    return isInvalidForm;
-  };
-
-  const handleChange = (e: FieldChangeEvent<unknown>) => {
-    dispatch({
-      type: "set_form",
-      form: { ...state.form, [e.name]: e.value },
-    });
-  };
-
-  const handleOnSelect = (user: any) => {
-    const form = { ...state.form };
-    form["assigned_to"] = user?.value?.id;
-    SetAssignedUser(user.value);
-    dispatch({ type: "set_form", form });
-  };
-
-  const setFacility = (selected: any, name: string) => {
-    const form = { ...state.form };
-    form[name] = selected;
-    dispatch({ type: "set_form", form });
-  };
-  const { data: resourceDetails } = useQuery({
-    queryKey: ["resource", props.facilityId, props.id],
-    queryFn: query(routes.getResourceDetails, {
-      pathParams: { id: props.id },
-    }),
-  });
-  useEffect(() => {
-    if (resourceDetails) {
-      dispatch({
-        type: "set_form",
-        form: {
-          ...resourceDetails,
-          status: qParams.status || resourceDetails.status.toLowerCase(),
-        },
-      });
-    }
-  }, [resourceDetails]);
-
-  const { mutate: updateResource, isPending: updateResourceLoading } =
-    useMutation({
-      mutationFn: mutate(routes.updateResource, {
-        pathParams: { id: props.id },
-      }),
-      onSuccess: (data) => {
-        dispatch({ type: "set_form", form: data });
-        toast.success(t("request_updated_successfully"));
-        navigate(`/facility/${props.facilityId}/resource/${props.id}`);
-      },
-    });
-
-  const { data: facilities } = useQuery({
-    queryKey: ["facilities", facilitySearch],
-    queryFn: query.debounced(facilityApi.getAllFacilities, {
-      queryParams: {
-        search_text: facilitySearch,
-        limit: 50,
-      },
-    }),
-  });
-
-  const facilityOptions = facilities?.results.map((facility) => ({
-    label: facility.name,
-    value: facility.id,
-  }));
-
-  const handleSubmit = async () => {
-    const validForm = validateForm();
-
-    if (validForm) {
-      const resourceData: UpdateResourceRequest = {
-        id: props.id,
-        status: state.form.status,
-        origin_facility: state.form.origin_facility?.id,
-        assigned_facility: state.form?.assigned_facility?.id,
-        emergency: [true, "true"].includes(state.form.emergency),
-        title: state.form.title,
-        reason: state.form.reason,
-        assigned_to: state.form.assigned_to,
-        category: state.form.category,
-        priority: state.form.priority,
-        referring_facility_contact_number:
-          state.form.referring_facility_contact_number,
-        referring_facility_contact_name:
-          state.form.referring_facility_contact_name,
-        approving_facility: state.form.approving_facility?.id,
-        related_patient: state.form.related_patient?.id,
-      };
-      updateResource(resourceData);
-    }
-  };
-
-  if (updateResourceLoading || !resourceDetails) {
-    return <Loading />;
-  }
-
-  return (
-    <Page title={t("update_request")}>
-      <div className="mt-4">
-        <Card className="flex w-full flex-col">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="md:col-span-1">
-              <SelectFormField
-                label="Status"
-                name="status"
-                value={state.form.status}
-                options={RESOURCE_STATUS_CHOICES}
-                optionValue={(option) => option.text}
-                onChange={handleChange}
-                optionLabel={(option) => t(`resource_status__${option.text}`)}
-              />
-            </div>
-            <div className="md:col-span-1">
-              <div className="">
-                {assignedUserLoading ? (
-                  <CircularProgress />
-                ) : (
-                  <UserAutocomplete
-                    label="Assigned To"
-                    value={assignedUser === null ? undefined : assignedUser}
-                    onChange={handleOnSelect}
-                    error=""
-                    name="assigned_to"
-                  />
-                )}
-              </div>
-            </div>
-
-            <div>
-              <Label className="text-gray-700 -mt-3 mb-3">
-                {t("facility_assign_request")}
-              </Label>
-              <Autocomplete
-                options={facilityOptions ?? []}
-                placeholder={t("start_typing_to_search")}
-                value={state.form.assigned_facility}
-                onSearch={setFacilitySearch}
-                onChange={(selected) =>
-                  setFacility(selected, "assigned_facility")
-                }
-              />
-            </div>
-
-            <div className="md:col-span-2">
-              <TextFormField
-                name="title"
-                type="text"
-                label="Request Title*"
-                placeholder="Type your title here"
-                value={state.form.title}
-                onChange={handleChange}
-                error={state.errors.title}
-              />
-            </div>
-
-            <div className="md:col-span-2">
-              <Label className="text-gray-700 mb-3 mt-1">
-                {t("request_reason")}
-              </Label>
-              <Textarea
-                rows={5}
-                name="reason"
-                placeholder={t("request_reason_placeholder")}
-                value={state.form.reason}
-                onChange={(e) =>
-                  handleChange({ name: e.target.name, value: e.target.value })
-                }
-              />
-              {state.errors.reason && (
-                <p className="text-red-500 text-sm mt-2">
-                  {state.errors.emergency}
-                </p>
-              )}
-            </div>
-
-            <div>
-              <RadioFormField
-                name="emergency"
-                onChange={handleChange}
-                label={"Is this an emergency?"}
-                options={[true, false]}
-                optionLabel={(o) => (o ? "Yes" : "No")}
-                optionValue={(o) => String(o)}
-                value={String(state.form.emergency)}
-                error={state.errors.emergency}
-              />
-            </div>
-
-            <div className="mt-4 flex flex-col justify-between gap-2 md:col-span-2 md:flex-row">
-              <Button type="button" variant="outline" onClick={() => goBack()}>
-                {t("cancel")}
-              </Button>
-              <Button type="submit" variant="primary" onClick={handleSubmit}>
-                {t("submit")}
-              </Button>
-            </div>
-          </div>
-        </Card>
-      </div>
-    </Page>
-  );
-};
diff --git a/src/components/Resource/ResourceForm.tsx b/src/components/Resource/ResourceForm.tsx
new file mode 100644
index 00000000000..e7996a8fbc0
--- /dev/null
+++ b/src/components/Resource/ResourceForm.tsx
@@ -0,0 +1,562 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Link, navigate, useQueryParams } from "raviger";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import * as z from "zod";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import Autocomplete from "@/components/ui/autocomplete";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { PhoneInput } from "@/components/ui/phone-input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+
+import Loading from "@/components/Common/Loading";
+import Page from "@/components/Common/Page";
+import UserSelector from "@/components/Common/UserSelector";
+
+import useAppHistory from "@/hooks/useAppHistory";
+import useAuthUser from "@/hooks/useAuthUser";
+
+import { RESOURCE_STATUS_CHOICES } from "@/common/constants";
+import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants";
+
+import routes from "@/Utils/request/api";
+import mutate from "@/Utils/request/mutate";
+import query from "@/Utils/request/query";
+import validators from "@/Utils/validators";
+import facilityApi from "@/types/facility/facilityApi";
+import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
+import { UserBase } from "@/types/user/user";
+
+interface ResourceProps {
+  facilityId: number;
+  id?: string;
+}
+
+export default function ResourceForm({ facilityId, id }: ResourceProps) {
+  const [facilitySearch, setFacilitySearch] = useState("");
+  const { goBack } = useAppHistory();
+  const { t } = useTranslation();
+  const [{ related_patient }] = useQueryParams();
+  const [assignedToUser, setAssignedToUser] = useState<UserBase>();
+  const authUser = useAuthUser();
+
+  const resourceFormSchema = z.object({
+    status: z.string().min(1, { message: t("field_required") }),
+    category: z.string().min(1, { message: t("field_required") }),
+    assigned_facility: z
+      .object({
+        id: z.string(),
+        name: z.string(),
+      })
+      .nullable(),
+    assigned_to: z.string().min(1, { message: t("field_required") }),
+    emergency: z.enum(["true", "false"]),
+    title: z.string().min(1, { message: t("field_required") }),
+    reason: z.string().min(1, { message: t("field_required") }),
+    referring_facility_contact_name: z
+      .string()
+      .min(1, { message: t("field_required") }),
+    referring_facility_contact_number: validators().phoneNumber.required,
+    priority: z.number().default(1),
+  });
+
+  type ResourceFormValues = z.infer<typeof resourceFormSchema>;
+
+  const { data: patientData } = useQuery({
+    queryKey: ["patient", related_patient],
+    queryFn: query(routes.patient.getPatient, {
+      pathParams: { id: String(related_patient) },
+    }),
+    enabled: !!related_patient,
+  });
+
+  const { data: resourceData } = useQuery({
+    queryKey: ["resource_request", id],
+    queryFn: query(routes.getResourceDetails, {
+      pathParams: { id: String(id) },
+    }),
+    enabled: !!id,
+  });
+
+  const form = useForm<ResourceFormValues>({
+    resolver: zodResolver(resourceFormSchema),
+    defaultValues: {
+      status: "pending",
+      category: "",
+      assigned_facility: null,
+      assigned_to: "",
+      emergency: "false" as const,
+      title: "",
+      reason: "",
+      referring_facility_contact_name: "",
+      referring_facility_contact_number: "",
+      priority: 1,
+    },
+  });
+
+  useEffect(() => {
+    if (resourceData) {
+      form.reset({
+        status: resourceData.status,
+        category: resourceData.category,
+        assigned_facility: resourceData.assigned_facility,
+        assigned_to: resourceData.assigned_to?.id,
+        emergency: resourceData.emergency ? "true" : "false",
+        title: resourceData.title,
+        reason: resourceData.reason,
+        referring_facility_contact_name:
+          resourceData.referring_facility_contact_name,
+        referring_facility_contact_number:
+          resourceData.referring_facility_contact_number,
+        priority: resourceData.priority,
+      });
+      if (resourceData.assigned_to) {
+        setAssignedToUser(resourceData.assigned_to);
+      } else {
+        setAssignedToUser(undefined);
+      }
+    }
+  }, [resourceData, form]);
+
+  const { mutate: createResource, isPending } = useMutation({
+    mutationFn: mutate(routes.createResource),
+    onSuccess: (data: ResourceRequest) => {
+      toast.success(t("resource_created_successfully"));
+      navigate(`/facility/${facilityId}/resource/${data.id}`);
+    },
+  });
+
+  const { mutate: updateResource, isPending: isUpdatePending } = useMutation({
+    mutationFn: mutate(routes.updateResource, {
+      pathParams: { id: String(id) },
+    }),
+    onSuccess: (data: ResourceRequest) => {
+      toast.success(t("resource_updated_successfully"));
+      navigate(`/facility/${facilityId}/resource/${data.id}`);
+    },
+  });
+
+  const onSubmit = (data: ResourceFormValues) => {
+    const resourcePayload = {
+      status: data.status,
+      category: data.category,
+      origin_facility: String(facilityId),
+      assigned_facility: data.assigned_facility?.id || null,
+      assigned_to: assignedToUser?.id || null,
+      approving_facility: null,
+      emergency: data.emergency === "true",
+      title: data.title,
+      reason: data.reason,
+      referring_facility_contact_name: data.referring_facility_contact_name,
+      referring_facility_contact_number: data.referring_facility_contact_number,
+      related_patient: related_patient,
+      priority: data.priority,
+    };
+
+    if (id) {
+      updateResource({ ...resourcePayload, id });
+    } else {
+      createResource(resourcePayload);
+    }
+  };
+  const { data: facilities } = useQuery({
+    queryKey: ["facilities", facilitySearch],
+    queryFn: query.debounced(facilityApi.getAllFacilities, {
+      queryParams: {
+        search_text: facilitySearch,
+        limit: 50,
+      },
+    }),
+  });
+
+  const facilityOptions = facilities?.results.map((facility) => ({
+    label: facility.name,
+    value: facility.id,
+  }));
+
+  const handleUserChange = (user: UserBase) => {
+    form.setValue("assigned_to", user.id);
+    setAssignedToUser(user);
+  };
+
+  const fillMyDetails = () => {
+    form.setValue(
+      "referring_facility_contact_name",
+      `${authUser.first_name} ${authUser.last_name}`.trim(),
+    );
+    if (authUser.phone_number) {
+      form.setValue("referring_facility_contact_number", authUser.phone_number);
+    }
+  };
+
+  if (isPending || isUpdatePending) {
+    return <Loading />;
+  }
+
+  return (
+    <Page
+      title={id ? t("update_resource_request") : t("create_resource_request")}
+    >
+      <div className="container mx-auto max-w-4xl">
+        <Card>
+          <CardContent className="mt-4">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-6"
+              >
+                {patientData && (
+                  <Alert>
+                    <div className="flex items-center gap-2">
+                      <Link
+                        href={`/facility/${facilityId}/patient/${related_patient}/resource_requests`}
+                        className="flex items-center gap-2"
+                      >
+                        <CareIcon
+                          icon="l-user"
+                          className="h-5 w-5 text-blue-700"
+                        />
+                        <AlertDescription className="text-sm text-blue-700">
+                          {t("linked_patient")}:{" "}
+                          <span className="font-medium">
+                            {patientData.name}
+                          </span>
+                        </AlertDescription>
+                      </Link>
+                    </div>
+                  </Alert>
+                )}
+
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-medium">
+                      {t("basic_information")}
+                    </h3>
+                    <p className="text-sm text-gray-500">
+                      {t("resource_request_basic_info_description")}
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="assigned_facility"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("facility_for_care_support")}
+                          </FormLabel>
+                          <FormControl>
+                            <Autocomplete
+                              options={facilityOptions ?? []}
+                              value={field.value?.id ?? ""}
+                              placeholder={t("start_typing_to_search")}
+                              onSearch={setFacilitySearch}
+                              onChange={(value) => {
+                                const facility =
+                                  facilities?.results.find(
+                                    (f) => f.id === value,
+                                  ) ?? null;
+                                form.setValue("assigned_facility", facility);
+                              }}
+                            />
+                          </FormControl>
+                          <FormDescription>
+                            {t("select_facility_description")}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="emergency"
+                      render={({ field }) => (
+                        <FormItem className="space-y-3">
+                          <FormLabel>{t("is_this_an_emergency")}</FormLabel>
+                          <FormControl>
+                            <RadioGroup
+                              onValueChange={field.onChange}
+                              value={field.value}
+                              className="flex gap-4"
+                            >
+                              <FormItem className="flex items-center space-x-3 space-y-0">
+                                <FormControl>
+                                  <RadioGroupItem value="true" />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {t("yes")}
+                                </FormLabel>
+                              </FormItem>
+                              <FormItem className="flex items-center space-x-3 space-y-0">
+                                <FormControl>
+                                  <RadioGroupItem value="false" />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {t("no")}
+                                </FormLabel>
+                              </FormItem>
+                            </RadioGroup>
+                          </FormControl>
+                          <FormDescription>
+                            {t("emergency_description")}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="status"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>{t("status")}</FormLabel>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder={t("select_status")} />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {RESOURCE_STATUS_CHOICES.map((option, index) => (
+                                <SelectItem key={index} value={option.text}>
+                                  {t(`resource_status__${option.text}`)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="category"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>{t("category")}</FormLabel>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={t("category_description")}
+                                />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {RESOURCE_CATEGORY_CHOICES.map((category) => (
+                                <SelectItem
+                                  key={category.id}
+                                  value={category.id}
+                                >
+                                  {category.text}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="assigned_to"
+                      render={() => (
+                        <FormItem>
+                          <FormLabel required>{t("assigned_to")}</FormLabel>
+                          <FormControl>
+                            <UserSelector
+                              selected={assignedToUser}
+                              onChange={handleUserChange}
+                              placeholder={t("search_users")}
+                              noOptionsMessage={t("no_users_found")}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+                <Separator />
+
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-medium">
+                      {t("request_details")}
+                    </h3>
+                    <p className="text-sm text-gray-500">
+                      {t("resource_request_details_description")}
+                    </p>
+                  </div>
+
+                  <FormField
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>{t("request_title")}</FormLabel>
+                        <FormControl>
+                          <Input
+                            {...field}
+                            placeholder={t("request_title_placeholder")}
+                            onChange={(value) => field.onChange(value)}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t("request_title_description")}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="reason"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>{t("request_reason")}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            placeholder={t("request_reason_placeholder")}
+                            onChange={(value) => field.onChange(value)}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t("request_reason_description")}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <Separator />
+
+                <div className="space-y-6">
+                  <div className="flex flex-col lg:flex-row gap-2 lg:items-center justify-between">
+                    <div>
+                      <h3 className="text-lg font-medium">
+                        {t("contact_information")}
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        {t("contact_information_description")}
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={fillMyDetails}
+                      className="shrink-0"
+                    >
+                      <CareIcon icon="l-user" className="mr-2 h-4 w-4" />
+                      {t("fill_my_details")}
+                    </Button>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="referring_facility_contact_name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>{t("contact_person")}</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              onChange={(value) => field.onChange(value)}
+                            />
+                          </FormControl>
+                          <FormDescription>
+                            {t("contact_person_description")}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="referring_facility_contact_number"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>{t("contact_phone")}</FormLabel>
+                          <FormControl>
+                            <PhoneInput
+                              {...field}
+                              onChange={(value) => field.onChange(value)}
+                            />
+                          </FormControl>
+                          <FormDescription>
+                            {t("contact_phone_description")}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+
+                <div className="sticky bottom-0 flex justify-end gap-4 border-t bg-background pt-4">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => goBack()}
+                  >
+                    {t("cancel")}
+                  </Button>
+                  <Button type="submit" variant="default" disabled={isPending}>
+                    {isPending && (
+                      <CareIcon
+                        icon="l-spinner"
+                        className="mr-2 h-4 w-4 animate-spin"
+                      />
+                    )}
+                    {isPending ? t("submitting") : t("submit")}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx
index fd288000919..2d81119e30c 100644
--- a/src/components/Users/UserAvatar.tsx
+++ b/src/components/Users/UserAvatar.tsx
@@ -103,8 +103,8 @@ export default function UserAvatar({ username }: { username: string }) {
         <div className="my-4 overflow-visible rounded-lg bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6 flex justify-between">
           <div className="flex items-center">
             <Avatar
-              imageUrl={userData?.profile_picture_url}
               name={formatDisplayName(userData)}
+              imageUrl={userData?.profile_picture_url}
               className="h-20 w-20"
             />
             <div className="my-4 ml-4 flex flex-col gap-2">
diff --git a/src/components/Users/UserForm.tsx b/src/components/Users/UserForm.tsx
index 76010214af9..bfaa00d5f4b 100644
--- a/src/components/Users/UserForm.tsx
+++ b/src/components/Users/UserForm.tsx
@@ -155,7 +155,7 @@ export default function UserForm({
   const [isUsernameFieldFocused, setIsUsernameFieldFocused] = useState(false);
 
   //const userType = form.watch("user_type");
-  const usernameInput = form.watch("username");
+  const usernameInput = form.watch("username") || "";
   const phoneNumber = form.watch("phone_number");
 
   useEffect(() => {
diff --git a/src/components/ui/autocomplete.tsx b/src/components/ui/autocomplete.tsx
index 8e960e0db6c..3e868b38dc3 100644
--- a/src/components/ui/autocomplete.tsx
+++ b/src/components/ui/autocomplete.tsx
@@ -69,13 +69,11 @@ export default function Autocomplete({
           {options.map((option) => (
             <CommandItem
               key={option.value}
-              value={option.label}
+              value={option.value}
               onSelect={(v) => {
                 const currentValue =
-                  options.find(
-                    (option) => option.label.toLowerCase() === v.toLowerCase(),
-                  )?.value || "";
-                onChange(currentValue === value ? "" : currentValue);
+                  options.find((option) => option.value === v)?.value || "";
+                onChange(currentValue);
                 setOpen(false);
               }}
             >
diff --git a/src/hooks/useFileManager.tsx b/src/hooks/useFileManager.tsx
index 894c53597d9..83e999b97d0 100644
--- a/src/hooks/useFileManager.tsx
+++ b/src/hooks/useFileManager.tsx
@@ -20,7 +20,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 import FilePreviewDialog from "@/components/Common/FilePreviewDialog";
-import { StateInterface } from "@/components/Files/FileUpload";
+import { StateInterface } from "@/components/Common/FilePreviewDialog";
 import { FileUploadModel } from "@/components/Patient/models";
 
 import {
diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx
index ab7e8430033..7ba9c365b25 100644
--- a/src/pages/UserDashboard.tsx
+++ b/src/pages/UserDashboard.tsx
@@ -8,6 +8,7 @@ import { Avatar } from "@/components/Common/Avatar";
 
 import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser";
 
+import { formatDisplayName } from "@/Utils/utils";
 import { getOrgLabel } from "@/types/organization/organization";
 
 export default function UserDashboard() {
@@ -22,7 +23,7 @@ export default function UserDashboard() {
       <div className="flex flex-col gap-4 bg-card p-4 md:p-6 rounded-lg border shadow-sm">
         <div className="flex flex-col sm:flex-row sm:items-center gap-4">
           <Avatar
-            name={user.first_name}
+            name={formatDisplayName(user)}
             imageUrl={user.read_profile_picture_url}
             className="h-14 w-14 md:h-16 md:w-16"
           />
diff --git a/src/types/resourceRequest/resourceRequest.ts b/src/types/resourceRequest/resourceRequest.ts
index 7594766017c..07bfdbd2479 100644
--- a/src/types/resourceRequest/resourceRequest.ts
+++ b/src/types/resourceRequest/resourceRequest.ts
@@ -2,6 +2,7 @@ import { FacilityModel } from "@/components/Facility/models";
 import { UserBareMinimum } from "@/components/Users/models";
 
 import { PatientModel } from "@/types/emr/patient";
+import { UserBase } from "@/types/user/user";
 
 export interface ResourceRequest {
   approving_facility: FacilityModel | null;
@@ -17,9 +18,9 @@ export interface ResourceRequest {
   requested_quantity: number;
   status: string;
   title: string;
-  assigned_to: UserBareMinimum | null;
-  created_by: UserBareMinimum;
-  updated_by: UserBareMinimum;
+  assigned_to: UserBase | null;
+  created_by: UserBase;
+  updated_by: UserBase;
   created_date: string;
   modified_date: string;
   related_patient: PatientModel | null;
@@ -32,6 +33,7 @@ export interface CreateResourceRequest {
   referring_facility_contact_name: string;
   referring_facility_contact_number: string;
   approving_facility: string | null;
+  assigned_to: string | null;
   assigned_facility: string | null;
   origin_facility: string;
   related_patient: string;
diff --git a/src/types/user/userApi.ts b/src/types/user/userApi.ts
index f1f776cece0..dd11f7e2ae2 100644
--- a/src/types/user/userApi.ts
+++ b/src/types/user/userApi.ts
@@ -30,4 +30,4 @@ export default {
     TRes: Type<UserBase>(),
     TBody: Type<Partial<UpdateUserModel>>(),
   },
-};
+} as const;