diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx
index d66bd2f8ec1..64c0a24d78d 100644
--- a/src/Components/Facility/FacilityBlock.tsx
+++ b/src/Components/Facility/FacilityBlock.tsx
@@ -1,3 +1,4 @@
+import { Link } from "raviger";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { FacilityModel } from "./models";
 
@@ -5,8 +6,12 @@ export default function FacilityBlock(props: { facility: FacilityModel }) {
   const { facility } = props;
 
   return (
-    <div className="flex items-center gap-4">
-      <div className="flex aspect-square h-14 items-center justify-center overflow-hidden rounded-lg border border-gray-400 bg-gray-200">
+    <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"
@@ -24,6 +29,6 @@ export default function FacilityBlock(props: { facility: FacilityModel }) {
           {facility.address} {facility.local_body_object?.name}
         </p>
       </div>
-    </div>
+    </Link>
   );
 }
diff --git a/src/Components/Facility/FacilityCreate.tsx b/src/Components/Facility/FacilityCreate.tsx
index fc03d8b7e8c..678a356556d 100644
--- a/src/Components/Facility/FacilityCreate.tsx
+++ b/src/Components/Facility/FacilityCreate.tsx
@@ -851,7 +851,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                     types={["mobile", "landline"]}
                   />
                   <div className="py-4 md:col-span-2">
-                    <h4 className="mb-4">Spoke Facilities</h4>
+                    <h4 className="mb-4">{t("spokes")}</h4>
                     {facilityId && (
                       <SpokeFacilityEditor
                         facility={{ ...facilityQuery.data, id: facilityId }}
diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 50edef824c8..0b92e952dd8 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -37,6 +37,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;
@@ -96,6 +97,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
     });
   };
 
+  const spokesQuery = useQuery(routes.getFacilitySpokes, {
+    pathParams: {
+      id: facilityId,
+    },
+    silent: true,
+  });
+
   if (isLoading) {
     return <Loading />;
   }
@@ -293,6 +301,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
index 2af9da2b3d6..197d68da2bf 100644
--- a/src/Components/Facility/SpokeFacilityEditor.tsx
+++ b/src/Components/Facility/SpokeFacilityEditor.tsx
@@ -1,4 +1,3 @@
-//import { useTranslation } from "react-i18next";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import useQuery from "../../Utils/request/useQuery";
@@ -15,6 +14,7 @@ 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 };
@@ -23,7 +23,7 @@ export interface SpokeFacilityEditorProps {
 export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
   const { facility } = props;
 
-  //const { t } = useTranslation();
+  const { t } = useTranslation();
 
   const spokesQuery = useQuery(routes.getFacilitySpokes, {
     pathParams: {
@@ -85,7 +85,7 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
     }, [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} />
@@ -94,7 +94,7 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
           <FacilitySelect
             multiple={false}
             name="facility"
-            placeholder="Add Spoke Facility"
+            placeholder={t("add_spoke")}
             showAll={false}
             showNOptions={8}
             selected={selectedFacility}
@@ -119,10 +119,10 @@ export default function SpokeFacilityEditor(props: SpokeFacilityEditorProps) {
           value={item.relationship}
           onChange={(v) => setItem({ ...item, relationship: v.value })}
           errorClassName="hidden"
-          className="shrink-0"
+          className="w-full shrink-0 md:w-auto"
           disabled={processing}
         />
-      </>
+      </div>
     );
   };
 
diff --git a/src/Components/Form/ModelCrudEditor.tsx b/src/Components/Form/ModelCrudEditor.tsx
index 6ca2e70d0c9..3ce4b15eba3 100644
--- a/src/Components/Form/ModelCrudEditor.tsx
+++ b/src/Components/Form/ModelCrudEditor.tsx
@@ -2,6 +2,7 @@ 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;
@@ -29,6 +30,8 @@ export interface ModelCrudEditorProps<TRes extends Identifier, TReq, TErr> {
 export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
   props: ModelCrudEditorProps<TRes, TReq, TErr>,
 ) {
+  const { t } = useTranslation();
+
   const {
     onCreate,
     onUpdate,
@@ -94,7 +97,7 @@ export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
     }, [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
@@ -112,12 +115,13 @@ export default function ModelCrudEditor<TRes extends Identifier, TReq, TErr>(
           <button
             disabled={processing}
             onClick={() => handleDelete(props.item.id)}
-            className="text-xl text-red-500 hover:text-red-700 disabled:grayscale"
+            className="w-full text-xl text-red-500 hover:text-red-700 disabled:grayscale md:w-auto"
           >
-            <CareIcon icon="l-times-circle" />
+            <CareIcon icon="l-times-circle" />{" "}
+            <span className="text-sm md:hidden">{t("remove")}</span>
           </button>
         )}
-      </>
+      </div>
     );
   };
 
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 8b263366934..3c8ed6258f2 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -175,6 +175,7 @@
   "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",