diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index 307e912844f..70b5bc78e23 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -1,4 +1,7 @@
-import { PatientCategory } from "../Components/Facility/models";
+import {
+  PatientCategory,
+  SpokeRelationship,
+} from "../Components/Facility/models";
 import { SortOption } from "../Components/Common/SortDropdown";
 import { dateQueryString } from "../Utils/utils";
 import { IconName } from "../CAREUI/icons/CareIcon";
@@ -1517,6 +1520,17 @@ export const DEFAULT_ALLOWED_EXTENSIONS = [
   "application/vnd.oasis.opendocument.spreadsheet,application/pdf",
 ];
 
+export const SPOKE_RELATION_TYPES = [
+  {
+    text: "Regular",
+    value: SpokeRelationship.REGULAR,
+  },
+  {
+    text: "Tele ICU",
+    value: SpokeRelationship.TELE_ICU,
+  },
+];
+
 export const HumanBodyPaths = {
   anterior: [
     {
diff --git a/src/Components/Common/FacilitySelect.tsx b/src/Components/Common/FacilitySelect.tsx
index d718ef3e781..d91b9a7f8fc 100644
--- a/src/Components/Common/FacilitySelect.tsx
+++ b/src/Components/Common/FacilitySelect.tsx
@@ -23,6 +23,8 @@ interface FacilitySelectProps {
   selected?: FacilityModel | FacilityModel[] | null;
   setSelected: (selected: FacilityModel | FacilityModel[] | null) => void;
   allowNone?: boolean;
+  placeholder?: string;
+  filter?: (facilities: FacilityModel) => boolean;
 }
 
 export const FacilitySelect = (props: FacilitySelectProps) => {
@@ -44,6 +46,8 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     allowNone = false,
     freeText = false,
     errors = "",
+    placeholder,
+    filter,
   } = props;
 
   const facilitySearch = useCallback(
@@ -82,6 +86,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
 
   return (
     <AutoCompleteAsync
+      placeholder={placeholder}
       name={name}
       required={required}
       multiple={multiple}
@@ -97,6 +102,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
       compareBy="id"
       className={className}
       error={errors}
+      filter={filter}
     />
   );
 };
diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx
new file mode 100644
index 00000000000..64c0a24d78d
--- /dev/null
+++ b/src/Components/Facility/FacilityBlock.tsx
@@ -0,0 +1,34 @@
+import { Link } from "raviger";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { FacilityModel } from "./models";
+
+export default function FacilityBlock(props: { facility: FacilityModel }) {
+  const { facility } = props;
+
+  return (
+    <Link
+      className="flex items-center gap-4 text-inherit"
+      target="_blank"
+      href={`/facility/${facility.id}`}
+    >
+      <div className="flex aspect-square h-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-gray-400 bg-gray-200">
+        {facility.read_cover_image_url ? (
+          <img
+            className="h-full w-full object-cover"
+            src={facility.read_cover_image_url}
+          />
+        ) : (
+          <>
+            <CareIcon icon="l-hospital" />
+          </>
+        )}
+      </div>
+      <div>
+        <b className="font-semibold">{facility.name}</b>
+        <p className="text-sm">
+          {facility.address} {facility.local_body_object?.name}
+        </p>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index 1fe9d2e207e..e9e95fbcdfc 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -62,6 +62,7 @@ import routes from "../../Redux/api.js";
 import useQuery from "../../Utils/request/useQuery.js";
 import { RequestResult } from "../../Utils/request/types.js";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import SpokeFacilityEditor from "./SpokeFacilityEditor.js";
 import careConfig from "@careConfig";
 
 const Loading = lazy(() => import("../Common/Loading"));
@@ -247,7 +248,7 @@ export const FacilityCreate = (props: FacilityProps) => {
     },
   );
 
-  useQuery(routes.getPermittedFacility, {
+  const facilityQuery = useQuery(routes.getPermittedFacility, {
     pathParams: {
       id: facilityId!,
     },
@@ -850,6 +851,14 @@ export const FacilityCreate = (props: FacilityProps) => {
                     required
                     types={["mobile", "landline"]}
                   />
+                  <div className="py-4 md:col-span-2">
+                    <h4 className="mb-4">{t("spokes")}</h4>
+                    {facilityId && (
+                      <SpokeFacilityEditor
+                        facility={{ ...facilityQuery.data, id: facilityId }}
+                      />
+                    )}
+                  </div>
                   <div className="grid grid-cols-1 gap-4 py-4 sm:grid-cols-2 md:col-span-2 xl:grid-cols-4">
                     <TextFormField
                       {...field("oxygen_capacity")}
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 22dd2bc830f..e59d6f38bff 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -36,6 +36,7 @@ import { FieldLabel } from "../Form/FormFields/FormField.js";
 import { LocationSelect } from "../Common/LocationSelect.js";
 import { CameraFeedPermittedUserTypes } from "../../Utils/permissions.js";
 import { FacilityStaffList } from "./FacilityStaffList.js";
+import FacilityBlock from "./FacilityBlock.js";
 
 type Props = {
   facilityId: string;
@@ -93,6 +94,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
     });
   };
 
+  const spokesQuery = useQuery(routes.getFacilitySpokes, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
   if (isLoading) {
     return <Loading />;
   }
@@ -289,6 +297,20 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           />
                         </div>
                       </div>
+                      {!!spokesQuery.data?.results.length && (
+                        <div className="mt-4 flex items-center gap-3">
+                          <div id="spokes-view">
+                            <h1 className="text-base font-semibold text-[#B9B9B9]">
+                              {t("spokes")}
+                            </h1>
+                            <div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
+                              {spokesQuery.data?.results.map((spoke) => (
+                                <FacilityBlock facility={spoke.spoke_object} />
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>
diff --git a/src/Components/Facility/SpokeFacilityEditor.tsx b/src/Components/Facility/SpokeFacilityEditor.tsx
new file mode 100644
index 00000000000..197d68da2bf
--- /dev/null
+++ b/src/Components/Facility/SpokeFacilityEditor.tsx
@@ -0,0 +1,154 @@
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
+import useQuery from "../../Utils/request/useQuery";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import {
+  FacilityModel,
+  FacilitySpokeErrors,
+  FacilitySpokeModel,
+  FacilitySpokeRequest,
+  SpokeRelationship,
+} from "./models";
+import ModelCrudEditor from "../Form/ModelCrudEditor";
+import { FacilitySelect } from "../Common/FacilitySelect";
+import { useEffect, useState } from "react";
+import { SPOKE_RELATION_TYPES } from "../../Common/constants";
+import FacilityBlock from "./FacilityBlock";
+import { useTranslation } from "react-i18next";
+
+export interface SpokeFacilityEditorProps {
+  facility: Omit<FacilityModel, "id"> & { id: string };
+}
+
+export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
+  const { facility } = props;
+
+  const { t } = useTranslation();
+
+  const spokesQuery = useQuery(routes.getFacilitySpokes, {
+    pathParams: {
+      id: facility.id,
+    },
+  });
+
+  const spokes = spokesQuery.data?.results;
+
+  const createSpoke = (body: FacilitySpokeRequest) =>
+    request(routes.createFacilitySpoke, {
+      body,
+      pathParams: {
+        id: facility.id,
+      },
+      onResponse: ({ res }) => {
+        if (res?.ok) {
+          spokesQuery.refetch();
+        }
+      },
+    });
+
+  const deleteSpoke = (spokeFacilityId: string) =>
+    request(routes.deleteFacilitySpoke, {
+      pathParams: {
+        id: facility.id,
+        spoke_id: spokeFacilityId,
+      },
+      onResponse: ({ res }) => {
+        if (res?.ok) {
+          spokesQuery.refetch();
+        }
+      },
+    });
+
+  const updateSpoke = (spokeFacilityId: string, body: FacilitySpokeRequest) =>
+    request(routes.updateFacilitySpokes, {
+      pathParams: {
+        id: facility.id,
+        spoke_id: spokeFacilityId,
+      },
+      body,
+      onResponse: ({ res }) => {
+        if (res?.ok) {
+          spokesQuery.refetch();
+        }
+      },
+    });
+
+  const FormRender = (
+    item: FacilitySpokeModel | FacilitySpokeRequest,
+    setItem: (item: FacilitySpokeModel | FacilitySpokeRequest) => void,
+    processing: boolean,
+  ) => {
+    const [selectedFacility, setSelectedFacility] = useState<FacilityModel>();
+
+    useEffect(() => {
+      setItem({ ...item, spoke: selectedFacility?.id });
+    }, [selectedFacility]);
+
+    return (
+      <div className="flex w-full flex-col items-center gap-4 md:flex-row">
+        {"id" in item ? (
+          <div className="w-full">
+            <FacilityBlock facility={item.spoke_object} />
+          </div>
+        ) : (
+          <FacilitySelect
+            multiple={false}
+            name="facility"
+            placeholder={t("add_spoke")}
+            showAll={false}
+            showNOptions={8}
+            selected={selectedFacility}
+            setSelected={(v) =>
+              v && !Array.isArray(v) && setSelectedFacility(v)
+            }
+            errors=""
+            className="w-full"
+            disabled={processing}
+            filter={(f) =>
+              !!f.id &&
+              facility.id !== f.id &&
+              !spokes?.flatMap((s) => s.spoke_object.id).includes(f.id)
+            }
+          />
+        )}
+        <SelectFormField
+          name="relationship_type"
+          options={SPOKE_RELATION_TYPES}
+          optionLabel={(v) => v.text}
+          optionValue={(v) => v.value}
+          value={item.relationship}
+          onChange={(v) => setItem({ ...item, relationship: v.value })}
+          errorClassName="hidden"
+          className="w-full shrink-0 md:w-auto"
+          disabled={processing}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <ModelCrudEditor<
+        FacilitySpokeModel,
+        FacilitySpokeRequest,
+        FacilitySpokeErrors
+      >
+        items={spokes}
+        onCreate={createSpoke}
+        onUpdate={updateSpoke}
+        onDelete={deleteSpoke}
+        loading={spokesQuery.loading}
+        errors={{}}
+        emptyText={"No Spokes"}
+        empty={{
+          spoke: "",
+          relationship: SpokeRelationship.REGULAR,
+        }}
+        createText="Add Spoke"
+        allowCreate={(item) => !item.relationship || !item.spoke}
+      >
+        {FormRender}
+      </ModelCrudEditor>
+    </>
+  );
+}
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index 7756bf73f69..97d81674658 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -12,6 +12,7 @@ import {
   AssignedToObjectModel,
   BloodPressure,
   DailyRoundsModel,
+  FacilityNameModel,
   FileUploadModel,
 } from "../Patient/models";
 import { EncounterSymptom } from "../Symptoms/types";
@@ -79,8 +80,32 @@ export interface FacilityModel {
   local_body?: number;
   ward?: number;
   pincode?: string;
+  latitude?: string;
+  longitude?: string;
+  kasp_empanelled?: boolean;
+  patient_count?: string;
+  bed_count?: string;
+}
+
+export enum SpokeRelationship {
+  REGULAR = 1,
+  TELE_ICU = 2,
+}
+
+export interface FacilitySpokeModel {
+  id: string;
+  hub_object: FacilityNameModel;
+  spoke_object: FacilityNameModel;
+  relationship: SpokeRelationship;
 }
 
+export interface FacilitySpokeRequest {
+  spoke?: string;
+  relationship?: SpokeRelationship;
+}
+
+export interface FacilitySpokeErrors {}
+
 export interface CapacityModal {
   id?: number;
   room_type?: number;
@@ -588,13 +613,7 @@ export type IUserFacilityRequest = {
   facility: string;
 };
 
-export type FacilityRequest = Omit<FacilityModel, "location"> & {
-  latitude?: string;
-  longitude?: string;
-  kasp_empanelled?: boolean;
-  patient_count?: string;
-  bed_count?: string;
-};
+export type FacilityRequest = Omit<FacilityModel, "location" | "id">;
 
 export type InventorySummaryResponse = {
   id: string;
diff --git a/src/Components/Form/AutoCompleteAsync.tsx b/src/Components/Form/AutoCompleteAsync.tsx
index 18bffb0e11c..f362918dfc2 100644
--- a/src/Components/Form/AutoCompleteAsync.tsx
+++ b/src/Components/Form/AutoCompleteAsync.tsx
@@ -36,6 +36,7 @@ interface Props {
   required?: boolean;
   onBlur?: () => void;
   onFocus?: () => void;
+  filter?: (data: any) => boolean;
 }
 
 const AutoCompleteAsync = (props: Props) => {
@@ -56,6 +57,7 @@ const AutoCompleteAsync = (props: Props) => {
     disabled = false,
     required = false,
     error,
+    filter,
   } = props;
   const [data, setData] = useState([]);
   const [query, setQuery] = useState("");
@@ -69,7 +71,9 @@ const AutoCompleteAsync = (props: Props) => {
     () =>
       debounce(async (query: string) => {
         setLoading(true);
-        const data = (await fetchData(query)) || [];
+        const data = ((await fetchData(query)) || [])?.filter((d: any) =>
+          filter ? filter(d) : true,
+        );
 
         if (showNOptions !== undefined) {
           setData(data.slice(0, showNOptions));
diff --git a/src/Components/Form/ModelCrudEditor.tsx b/src/Components/Form/ModelCrudEditor.tsx
new file mode 100644
index 00000000000..3ce4b15eba3
--- /dev/null
+++ b/src/Components/Form/ModelCrudEditor.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from "react";
+import { classNames } from "../../Utils/utils";
+import ButtonV2 from "../Common/components/ButtonV2";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { useTranslation } from "react-i18next";
+
+interface Identifier {
+  id: string;
+}
+
+export interface ModelCrudEditorProps<TRes extends Identifier, TReq, TErr> {
+  onCreate?: (req: TReq) => Promise<unknown>;
+  onUpdate?: (itemId: string, req: TReq) => Promise<unknown>;
+  onDelete?: (itemId: string) => Promise<unknown>;
+  items?: TRes[];
+  children: (
+    item: TRes | TReq,
+    setItem: (item: TRes | TReq) => void,
+    processing: boolean,
+    errors?: TErr,
+  ) => React.ReactNode;
+  loading: boolean;
+  errors: TErr;
+  emptyText?: React.ReactNode;
+  empty: TReq;
+  createText?: React.ReactNode;
+  allowCreate?: (item: TReq) => boolean;
+}
+
+export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
+  props: ModelCrudEditorProps<TRes, TReq, TErr>,
+) {
+  const { t } = useTranslation();
+
+  const {
+    onCreate,
+    onUpdate,
+    onDelete,
+    items,
+    children,
+    loading,
+    errors,
+    emptyText,
+    empty,
+    createText,
+    allowCreate,
+  } = props;
+  const [creating, setCreating] = useState(false);
+  const [updating, setUpdating] = useState<string | null>(null);
+
+  const handleUpdate = async (itemId: string, item: TReq) => {
+    if (!onUpdate) return;
+    setUpdating(itemId);
+    await onUpdate(itemId, item);
+    setUpdating(null);
+  };
+
+  const handleDelete = async (itemId: string) => {
+    if (!onDelete) return;
+    setUpdating(itemId);
+    await onDelete(itemId);
+    setUpdating(null);
+  };
+
+  const handleCreate = async (item: TReq) => {
+    if (!onCreate) return;
+    setCreating(true);
+    await onCreate(item);
+    setCreating(false);
+  };
+
+  type FormProps =
+    | {
+        type: "creating";
+        item: TReq;
+      }
+    | {
+        type: "updating";
+        item: TRes;
+      };
+
+  const Form = (props: FormProps) => {
+    const [item, setItem] = useState(props.item);
+    const processing =
+      props.type === "creating" ? creating : props.item.id === updating;
+
+    useEffect(() => {
+      if (
+        props.type === "updating" &&
+        JSON.stringify(item) !== JSON.stringify(props.item)
+      ) {
+        const timeout = setTimeout(() => {
+          handleUpdate(props.item.id, item as TReq);
+        }, 1000);
+        return () => clearTimeout(timeout);
+      }
+    }, [item]);
+
+    return (
+      <div className="flex w-full flex-col items-center gap-4 md:flex-row">
+        {children(item, setItem, processing, errors)}
+        {props.type === "creating" && (
+          <ButtonV2
+            id="add-symptom"
+            type="button"
+            className="w-full py-3 md:w-auto"
+            loading={creating}
+            disabled={allowCreate?.(item as TReq)}
+            onClick={() => handleCreate(item as TReq)}
+          >
+            {createText || "Create"}
+          </ButtonV2>
+        )}
+        {props.type === "updating" && onDelete && (
+          <button
+            disabled={processing}
+            onClick={() => handleDelete(props.item.id)}
+            className="w-full text-xl text-red-500 hover:text-red-700 disabled:grayscale md:w-auto"
+          >
+            <CareIcon icon="l-times-circle" />{" "}
+            <span className="text-sm md:hidden">{t("remove")}</span>
+          </button>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex w-full flex-col items-start rounded-lg border border-secondary-400">
+      <ul
+        className={classNames(
+          "flex w-full flex-col gap-4 p-4",
+          loading && "pointer-events-none animate-pulse",
+        )}
+      >
+        {items?.map((item, i) => (
+          <li key={i} className="flex w-full items-center gap-4">
+            <Form type="updating" item={item} />
+          </li>
+        ))}
+
+        {items?.length === 0 && (
+          <div className="flex h-full w-full items-center justify-center py-10 text-center font-medium text-secondary-700">
+            {emptyText}
+          </div>
+        )}
+      </ul>
+      <div className="flex w-full items-center gap-4 rounded-b-lg border-t-2 border-dashed border-secondary-400 bg-secondary-100 p-4">
+        <Form type="creating" item={empty} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 661a1872cca..7f0b9f51802 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -175,6 +175,9 @@
   "summary": "Summary",
   "report": "Report",
   "treating_doctor": "Treating Doctor",
+  "hubs": "Hub Facilities",
+  "spokes": "Spoke Facilities",
+  "add_spoke" : "Add Spoke Facility",
   "ration_card__NO_CARD": "Non-card holder",
   "ration_card__BPL": "BPL",
   "ration_card__APL": "APL",
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index 0243db57df7..0bedb12dca5 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -26,6 +26,8 @@ import {
   DoctorModal,
   FacilityModel,
   FacilityRequest,
+  FacilitySpokeModel,
+  FacilitySpokeRequest,
   IFacilityNotificationRequest,
   IFacilityNotificationResponse,
   IUserFacilityRequest,
@@ -366,7 +368,7 @@ const routes = {
   getPermittedFacility: {
     path: "/api/v1/facility/{id}/",
     method: "GET",
-    TRes: Type<FacilityRequest>(),
+    TRes: Type<FacilityModel>(),
   },
 
   getAnyFacility: {
@@ -389,6 +391,38 @@ const routes = {
     TBody: Type<Partial<FacilityModel>>(),
   },
 
+  getFacilitySpokes: {
+    path: "/api/v1/facility/{id}/spokes/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<FacilitySpokeModel>>(),
+  },
+
+  updateFacilitySpokes: {
+    path: "/api/v1/facility/{id}/spokes/{spoke_id}/",
+    method: "PATCH",
+    TRes: Type<FacilitySpokeModel>(),
+    TBody: Type<FacilitySpokeRequest>(),
+  },
+
+  getFacilitySpoke: {
+    path: "/api/v1/facility/{id}/spokes/{spoke_id}/",
+    method: "GET",
+    TRes: Type<FacilitySpokeModel>(),
+  },
+
+  createFacilitySpoke: {
+    path: "/api/v1/facility/{id}/spokes/",
+    method: "POST",
+    TRes: Type<FacilitySpokeModel>(),
+    TBody: Type<Partial<FacilitySpokeRequest>>(),
+  },
+
+  deleteFacilitySpoke: {
+    path: "/api/v1/facility/{id}/spokes/{spoke_id}/",
+    method: "DELETE",
+    TRes: Type<Record<string, never>>(),
+  },
+
   deleteFacilityCoverImage: {
     path: "/api/v1/facility/{id}/cover_image/",
     method: "DELETE",