diff --git a/src/locales/en.json b/src/locales/en.json
index 40d9a7f3..900c4086 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -41,6 +41,7 @@
   "Facility ID": "Facility ID",
   "Facility name": "Facility name",
   "Facility Management": "Facility Management",
+  "Failed to fetch facility information": "Failed to fetch facility information",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
   "Friday": "Friday",
diff --git a/src/store/index.ts b/src/store/index.ts
index 9bc4a805..f8bc8d21 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,10 +3,10 @@ import mutations  from './mutations'
 import getters  from './getters'
 import actions from './actions'
 import RootState from './RootState'
-import createPersistedState from "vuex-persistedstate";
+import createPersistedState from 'vuex-persistedstate';
 import userModule from './modules/user';
 import { setPermissions } from '@/authorization'
-import facilityModule from "./modules/facility"
+import facilityModule from './modules/facility'
 import utilModule from "./modules/util"
 
 
diff --git a/src/store/modules/facility/FacilityState.ts b/src/store/modules/facility/FacilityState.ts
index 416a59aa..2b9f8839 100644
--- a/src/store/modules/facility/FacilityState.ts
+++ b/src/store/modules/facility/FacilityState.ts
@@ -9,4 +9,5 @@ export default interface FacilityState {
     list: Array<object>,
     total: number
   };
+  current: any;
 }
\ No newline at end of file
diff --git a/src/store/modules/facility/actions.ts b/src/store/modules/facility/actions.ts
index 88ee6b76..874eb000 100644
--- a/src/store/modules/facility/actions.ts
+++ b/src/store/modules/facility/actions.ts
@@ -43,7 +43,7 @@ const actions: ActionTree<FacilityState, RootState> = {
       "entityName": "FacilityAndProductStore",
       "noConditionFind": "Y",
       "distinct": "Y",
-      "fieldList": ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit'],
+      "fieldList": ['defaultDaysToShip', 'facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit'],
       ...payload
     }
 
@@ -90,6 +90,46 @@ const actions: ActionTree<FacilityState, RootState> = {
     commit(types.FACILITY_LIST_UPDATED , { facilities, total });
   },
 
+  async fetchCurrentFacility({ commit, state }, payload) {
+    // checking that if the list contains basic information for facility then not fetching the same information again
+    const cachedFacilities = JSON.parse(JSON.stringify(state.facilities.list))
+    const current = cachedFacilities.find((facility: any) => facility.facilityId === payload.facilityId)
+    if(current?.facilityId) {
+      commit(types.FACILITY_CURRENT_UPDATED, current);
+      return;
+    }
+
+    emitter.emit("presentLoader");
+
+    const params = {
+      inputFields: {
+        facilityId: payload.facilityId
+      },
+      entityName: "FacilityAndProductStore",
+      noConditionFind: "Y",
+      distinct: "Y",
+      fieldList: ['defaultDaysToShip', 'facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit'],
+      viewSize: 1
+    }
+
+    let facility = {};
+
+    try {
+      const resp = await FacilityService.fetchFacilities(params)
+
+      if(!hasError(resp) && resp.data.count > 0) {
+        facility = resp.data.docs[0]
+      } else {
+        throw resp.data
+      }
+    } catch(error) {
+      logger.error(error)
+    }
+
+    emitter.emit("dismissLoader");
+    commit(types.FACILITY_CURRENT_UPDATED, facility);
+  },
+
   updateQuery({ commit }, query) {
     commit(types.FACILITY_QUERY_UPDATED, query)
   },
diff --git a/src/store/modules/facility/getters.ts b/src/store/modules/facility/getters.ts
index 211686f1..c3582cc9 100644
--- a/src/store/modules/facility/getters.ts
+++ b/src/store/modules/facility/getters.ts
@@ -14,5 +14,8 @@ const getters: GetterTree <FacilityState, RootState> = {
       state.facilities.list?.length > 0 && state.facilities.list?.length < state.facilities.total
     );
   },
+  getCurrent(state) {
+    return state.current ? JSON.parse(JSON.stringify(state.current)) : {}
+  }
 }
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/facility/index.ts b/src/store/modules/facility/index.ts
index 87d00f40..bc563c53 100644
--- a/src/store/modules/facility/index.ts
+++ b/src/store/modules/facility/index.ts
@@ -17,7 +17,8 @@ const facilityModule: Module<FacilityState, RootState> = {
     facilities: {
       list: [],
       total: 0
-    }
+    },
+    current: {}
   },
   getters,
   actions,
diff --git a/src/store/modules/facility/mutation-types.ts b/src/store/modules/facility/mutation-types.ts
index a6cb0882..4676bdb0 100644
--- a/src/store/modules/facility/mutation-types.ts
+++ b/src/store/modules/facility/mutation-types.ts
@@ -1,3 +1,4 @@
 export const SN_FACILITY = 'facility'
 export const FACILITY_LIST_UPDATED = SN_FACILITY + '/LIST_UPDATED'
-export const FACILITY_QUERY_UPDATED = SN_FACILITY + '/QUERY_UPDATED'
\ No newline at end of file
+export const FACILITY_QUERY_UPDATED = SN_FACILITY + '/QUERY_UPDATED'
+export const FACILITY_CURRENT_UPDATED = SN_FACILITY + '/CURRENT_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/facility/mutations.ts b/src/store/modules/facility/mutations.ts
index 157649ad..fab0e52c 100644
--- a/src/store/modules/facility/mutations.ts
+++ b/src/store/modules/facility/mutations.ts
@@ -9,6 +9,9 @@ const mutations: MutationTree <FacilityState> = {
   },
   [types.FACILITY_QUERY_UPDATED](state, payload) {
     state.query = payload
+  },
+  [types.FACILITY_CURRENT_UPDATED](state, payload) {
+    state.current = payload
   }
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 6e4c8890..80f2bc7c 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -7,356 +7,361 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ion-item lines="none">
-        <ion-label>
-          <h1>{{ "Facility Name" }}</h1>
-          <p>{{ "Facility Id" }}</p>
-        </ion-label>
-      </ion-item>
-  
-      <section>
-        <div>
+      <main v-if="current?.facilityId">
+        <ion-item lines="none" class="ion-margin-top">
+          <ion-label>
+            <h1>{{ current.facilityName }}</h1>
+            <p>{{ current.facilityId }}</p>
+          </ion-label>
+        </ion-item>
+
+        <section>
+          <div>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  {{ translate("Address") }}
+                </ion-card-title>
+              </ion-card-header>
+              <ion-item lines="full">
+                <ion-label>
+                  <h3>{{ "Address line 1" }}</h3>
+                  <h3>{{ "Address line 2" }}</h3>
+                  <p class="ion-text-wrap">{{ "City," }} {{ "Zipcode" }}</p>
+                  <p class="ion-text-wrap">{{ "State," }} {{ "Country" }}</p>
+                </ion-label>
+              </ion-item>
+              <ion-button fill="clear" @click="addAddress">{{ translate("Edit") }}</ion-button>
+              <ion-button expand="block" fill="outline" @click="addAddress">
+                {{ translate("Add") }}
+                <ion-icon slot="end" :icon="addCircleOutline" />
+              </ion-button>
+            </ion-card>
+
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  {{ translate("Latitude & Longitude") }}
+                </ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
+              </ion-card-content>
+              <ion-item lines="full">
+                <ion-label>{{ translate("Latitude") }}</ion-label>
+                <p>{{ "<latitude>" }}</p>
+              </ion-item>
+              <ion-item lines="full">
+                <ion-label>{{ translate("Longitude") }}</ion-label>
+                <p>{{ "<longitude>" }}</p>
+              </ion-item>
+              <ion-button fill="clear" @click="addGeoPoint">{{ translate("Edit") }}</ion-button>
+              <ion-button expand="block" fill="outline" @click="addGeoPoint">
+                {{ translate("Add") }}
+                <ion-icon slot="end" :icon="addCircleOutline" />
+              </ion-button>
+            </ion-card>
+          </div>
+
           <ion-card>
             <ion-card-header>
               <ion-card-title>
-                {{ translate("Address") }}
+                {{ translate("Operating hours") }}
               </ion-card-title>
             </ion-card-header>
-            <ion-item lines="full">
-              <ion-label>
-                <h3>{{ "Address line 1" }}</h3>
-                <h3>{{ "Address line 2" }}</h3>
-                <p class="ion-text-wrap">{{ "City," }} {{ "Zipcode" }}</p>
-                <p class="ion-text-wrap">{{ "State," }} {{ "Country" }}</p>
-              </ion-label>
-            </ion-item>
-            <ion-button fill="clear" @click="addAddress">{{ translate("Edit") }}</ion-button>
-            <ion-button expand="block" fill="outline" @click="addAddress">
-              {{ translate("Add") }}
-              <ion-icon slot="end" :icon="addCircleOutline" />
-            </ion-button>
+            <ion-list lines="none">
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Monday") }}</p>
+                </ion-label>
+                <ion-label slot="end">
+                  {{ "7:30am - 8:00pm" }}
+                </ion-label>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Tuesday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Wednesday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Thursday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Friday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Saturday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+              <ion-item button @click="selectOperatingTime">
+                <ion-label>
+                  <p>{{ translate("Sunday") }}</p>
+                </ion-label>
+                <ion-button fill="clear" color="medium">
+                  <ion-icon :icon="addOutline" />
+                  {{ translate("Add timings") }}
+                </ion-button>
+              </ion-item>
+            </ion-list>
           </ion-card>
 
           <ion-card>
             <ion-card-header>
               <ion-card-title>
-                {{ translate("Latitude & Longitude") }}
+                {{ translate("Product Stores") }}
               </ion-card-title>
+              <ion-button @click="addProductStore" fill="clear">
+                <ion-icon :icon="addCircleOutline" slot="start" />
+                {{ translate("Add") }}
+              </ion-button>
             </ion-card-header>
-            <ion-card-content>
-              {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
-            </ion-card-content>
-            <ion-item lines="full">
-              <ion-label>{{ translate("Latitude") }}</ion-label>
-              <p>{{ "<latitude>" }}</p>
-            </ion-item>
-            <ion-item lines="full">
-              <ion-label>{{ translate("Longitude") }}</ion-label>
-              <p>{{ "<longitude>" }}</p>
-            </ion-item>
-            <ion-button fill="clear" @click="addGeoPoint">{{ translate("Edit") }}</ion-button>
-            <ion-button expand="block" fill="outline" @click="addGeoPoint">
-              {{ translate("Add") }}
-              <ion-icon slot="end" :icon="addCircleOutline" />
-            </ion-button>
-          </ion-card>
-        </div>
-  
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ translate("Operating hours") }}
-            </ion-card-title>
-          </ion-card-header>
-          <ion-list lines="none">
-            <ion-item button @click="selectOperatingTime">
-              <ion-label>
-                <p>{{ translate("Monday") }}</p>
-              </ion-label>
-              <ion-label slot="end">
-                {{ "7:30am - 8:00pm" }}
-              </ion-label>
-            </ion-item>
-            <ion-item button @click="selectOperatingTime">
+
+            <ion-item>
               <ion-label>
-                <p>{{ translate("Tuesday") }}</p>
+                {{ "NotNaked" }}
               </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
+              <ion-badge>{{ translate("primary store") }}</ion-badge>
+              <ion-button color="medium" fill="clear" slot="end" @click="openStorePopover">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
               </ion-button>
             </ion-item>
-            <ion-item button @click="selectOperatingTime">
+            
+            <ion-item>
               <ion-label>
-                <p>{{ translate("Wednesday") }}</p>
+                {{ "Wasatch Ski company" }}
               </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
+              <ion-button color="medium" fill="clear" slot="end" @click="openStorePopover">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
               </ion-button>
             </ion-item>
-            <ion-item button @click="selectOperatingTime">
-              <ion-label>
-                <p>{{ translate("Thursday") }}</p>
-              </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
-              </ion-button>
+          </ion-card>
+        </section>
+
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Fulfillment Settings") }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
+              <ion-toggle :checked="true" slot="end" />
             </ion-item>
-            <ion-item button @click="selectOperatingTime">
-              <ion-label>
-                <p>{{ translate("Friday") }}</p>
-              </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
-              </ion-button>
+            <ion-item>
+              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
+              <ion-toggle :checked="true" slot="end" />
             </ion-item>
-            <ion-item button @click="selectOperatingTime">
-              <ion-label>
-                <p>{{ translate("Saturday") }}</p>
-              </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
-              </ion-button>
+            <ion-item>
+              <ion-label>{{ translate("Generate shipping labels") }}</ion-label>
+              <ion-toggle :checked="true" slot="end" />
             </ion-item>
-            <ion-item button @click="selectOperatingTime">
-              <ion-label>
-                <p>{{ translate("Sunday") }}</p>
-              </ion-label>
-              <ion-button fill="clear" color="medium">
-                <ion-icon :icon="addOutline" />
-                {{ translate("Add timings") }}
-              </ion-button>
+            <ion-item>
+              <ion-label>{{ translate("Allow pickup") }}</ion-label>
+              <ion-toggle :checked="true" slot="end" />
             </ion-item>
-          </ion-list>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ translate("Product Stores") }}
-            </ion-card-title>
-            <ion-button @click="addProductStore" fill="clear">
-              <ion-icon :icon="addCircleOutline" slot="start" />
-              {{ translate("Add") }}
+            <ion-item lines="full">
+              <ion-label>{{ translate("Days to ship") }}</ion-label>
+              <ion-input :value="current.defaultDaysToShip" type="number" min="0" placeholder="0"/>
+            </ion-item>
+            <ion-button fill="outline" expand="block">
+              {{ translate("Update days to ship") }}
             </ion-button>
-          </ion-card-header>
-
-          <ion-item>
-            <ion-label>
-              {{ "NotNaked" }}
-            </ion-label>
-            <ion-badge>{{ translate("primary store") }}</ion-badge>
-            <ion-button color="medium" fill="clear" slot="end" @click="openStorePopover">
-              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Online Order Fulfillment") }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              {{ translate("Configure the order fulfillment capacity of your facility.") }}
+              <br/><br/>
+              {{ translate("Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.") }}
+            </ion-card-content>
+            <ion-item lines="none">
+              <ion-text>{{ 10 }}</ion-text>
+              <ion-progress-bar class="ion-margin" :value="10/20"></ion-progress-bar>
+              <ion-chip :outline="true">{{ 20 }}</ion-chip>
+            </ion-item>
+            <ion-item lines="none" class="ion-margin-horizontal" detail button>
+              <ion-label>{{ translate("View order count history") }}</ion-label>
+            </ion-item>
+          </ion-card>
+        </section>
+
+        <div class="segments">
+          <ion-segment scrollable v-model="segment">
+            <ion-segment-button value="external-mappings" layout="icon-start">
+              <ion-icon :icon="globeOutline" />
+              <ion-label>{{ translate("External mappings") }}</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="staff" layout="icon-start">
+              <ion-icon :icon="personOutline" />
+              <ion-label>{{ translate("Staff") }}</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="locations" layout="icon-start">
+              <ion-icon :icon="locationOutline" />
+              <ion-label>{{ translate("Locations") }}</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+
+          <div v-if="segment === 'external-mappings'">
+            <ion-button fill="outline" @click="openExternalMappingPopover">
+              <ion-icon :icon="addCircleOutline" slot="start" />
+              {{ translate("Map facility to an external system") }}
             </ion-button>
-          </ion-item>
-          
-          <ion-item>
-            <ion-label>
-              {{ "Wasatch Ski company" }}
-            </ion-label>
-            <ion-button color="medium" fill="clear" slot="end" @click="openStorePopover">
-              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+            <div class="external-mappings">
+              <ion-card>
+                <ion-card-header>
+                  <ion-card-title>
+                    {{ translate("Shopify facility") }}
+                  </ion-card-title>
+                </ion-card-header>
+                <ion-item lines="full">
+                  <ion-label>
+                    {{ "shop name" }}
+                    <p>{{ "<Shop Id>" }}</p>
+                  </ion-label>
+                  <ion-note slot="end">{{"note"}}</ion-note>
+                </ion-item>
+                <ion-item lines="full">
+                  <ion-label>{{ "<shopify location id>" }}</ion-label>
+                  <ion-note slot="end">{{"note"}}</ion-note>
+                </ion-item>
+                <ion-item lines="full">
+                  <ion-label>{{ "<admin link>" }}</ion-label>
+                  <ion-button color="medium" fill="clear">
+                    <ion-icon :icon="openOutline" />
+                  </ion-button>
+                </ion-item>
+                <ion-item lines="full">
+                  <ion-label>{{ "<shopify link>" }}</ion-label>
+                  <ion-button color="medium" fill="clear">
+                    <ion-icon :icon="openOutline" />
+                  </ion-button>
+                </ion-item>
+                <ion-button fill="clear">{{ translate("Edit") }}</ion-button>
+                <ion-button fill="clear" color="danger">{{ translate("Remove") }}</ion-button>
+              </ion-card>
+            </div>          
+            <hr />
+          </div>
+
+          <div v-else-if="segment === 'staff'">
+            <ion-button fill="outline" @click="addStaffMemberModal">
+              <ion-icon :icon="addCircleOutline" slot="start" />
+              {{ translate("Add staff member to facility") }}
             </ion-button>
-          </ion-item>
-        </ion-card>
-      </section>
-        
-      <section>
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ translate("Fulfillment Settings") }}
-            </ion-card-title>
-          </ion-card-header>
-          <ion-item>
-            <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
-            <ion-toggle :checked="true" slot="end" />
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
-            <ion-toggle :checked="true" slot="end" />
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ translate("Generate shipping labels") }}</ion-label>
-            <ion-toggle :checked="true" slot="end" />
-          </ion-item>
-          <ion-item>
-            <ion-label>{{ translate("Allow pickup") }}</ion-label>
-            <ion-toggle :checked="true" slot="end" />
-          </ion-item>
-          <ion-item lines="full">
-            <ion-label>{{ translate("Days to ship") }}</ion-label>
-            <ion-input type="number" min="0" placeholder="0"/>
-          </ion-item>
-          <ion-button fill="outline" expand="block">
-            {{ translate("Update days to ship") }}
-          </ion-button>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              {{ translate("Online Order Fulfillment") }}
-            </ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            {{ translate("Configure the order fulfillment capacity of your facility.") }}
-            <br/><br/>
-            {{ translate("Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.") }}
-          </ion-card-content>
-          <ion-item lines="none">
-            <ion-text>{{ 10 }}</ion-text>
-            <ion-progress-bar class="ion-margin" :value="10/20"></ion-progress-bar>
-            <ion-chip :outline="true">{{ 20 }}</ion-chip>
-          </ion-item>
-          <ion-item lines="none" class="ion-margin-horizontal" detail button>
-            <ion-label>{{ translate("View order count history") }}</ion-label>
-          </ion-item>
-        </ion-card>
-      </section>
-
-      <div class="segments">
-        <ion-segment scrollable v-model="segment">
-          <ion-segment-button value="external-mappings" layout="icon-start">
-            <ion-icon :icon="globeOutline" />
-            <ion-label>{{ translate("External mappings") }}</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="staff" layout="icon-start">
-            <ion-icon :icon="personOutline" />
-            <ion-label>{{ translate("Staff") }}</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="locations" layout="icon-start">
-            <ion-icon :icon="locationOutline" />
-            <ion-label>{{ translate("Locations") }}</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <div v-if="segment === 'external-mappings'">
-          <ion-button fill="outline" @click="openExternalMappingPopover">
-            <ion-icon :icon="addCircleOutline" slot="start" />
-            {{ translate("Map facility to an external system") }}
-          </ion-button>
-          <div class="external-mappings">
-            <ion-card>
-              <ion-card-header>
-                <ion-card-title>
-                  {{ translate("Shopify facility") }}
-                </ion-card-title>
-              </ion-card-header>
-              <ion-item lines="full">
+
+            <div class="list-item staff">
+              <ion-item lines="none">
+                <ion-icon :icon="personOutline" slot="start" />
                 <ion-label>
-                  {{ "shop name" }}
-                  <p>{{ "<Shop Id>" }}</p>
+                  {{ "party name" }}
+                  <p>{{ translate("party id") }}</p>
                 </ion-label>
-                <ion-note slot="end">{{"note"}}</ion-note>
-              </ion-item>
-              <ion-item lines="full">
-                <ion-label>{{ "<shopify location id>" }}</ion-label>
-                <ion-note slot="end">{{"note"}}</ion-note>
-              </ion-item>
-              <ion-item lines="full">
-                <ion-label>{{ "<admin link>" }}</ion-label>
-                <ion-button color="medium" fill="clear">
-                  <ion-icon :icon="openOutline" />
-                </ion-button>
               </ion-item>
-              <ion-item lines="full">
-                <ion-label>{{ "<shopify link>" }}</ion-label>
-                <ion-button color="medium" fill="clear">
-                  <ion-icon :icon="openOutline" />
-                </ion-button>
-              </ion-item>
-              <ion-button fill="clear">{{ translate("Edit") }}</ion-button>
-              <ion-button fill="clear" color="danger">{{ translate("Remove") }}</ion-button>
-            </ion-card>
-          </div>          
-          <hr />
-        </div>
 
-        <div v-else-if="segment === 'staff'">
-          <ion-button fill="outline" @click="addStaffMemberModal">
-            <ion-icon :icon="addCircleOutline" slot="start" />
-            {{ translate("Add staff member to facility") }}
-          </ion-button>
-
-          <div class="list-item staff">
-            <ion-item lines="none">
-              <ion-icon :icon="personOutline" slot="start" />
-              <ion-label>
-                {{ "party name" }}
-                <p>{{ translate("party id") }}</p>
+              <ion-label class="tablet">
+                <ion-chip outline>{{ "fulfillment" }}</ion-chip>
+                <p>{{ translate("role") }}</p>
               </ion-label>
-            </ion-item>
 
-            <ion-label class="tablet">
-              <ion-chip outline>{{ "fulfillment" }}</ion-chip>
-              <p>{{ translate("role") }}</p>
-            </ion-label>
+              <ion-label class="tablet">
+                <ion-chip outline>{{ "3rd June 2023" }}</ion-chip>
+                <p>{{ "added" }}</p>
+              </ion-label>
 
-            <ion-label class="tablet">
-              <ion-chip outline>{{ "3rd June 2023" }}</ion-chip>
-              <p>{{ "added" }}</p>
-            </ion-label>
+              <ion-button fill="clear" color="medium">
+                <ion-icon slot="icon-only" :icon="closeCircleOutline" />
+              </ion-button>
+            </div>
+            <hr />
+          </div>
 
-            <ion-button fill="clear" color="medium">
-              <ion-icon slot="icon-only" :icon="closeCircleOutline" />
+          <div v-else-if="segment == 'locations'">
+            <ion-button fill="outline" @click="addLocationModal">
+              <ion-icon :icon="addCircleOutline" slot="start" />
+              {{ translate("Add locations to facility") }}
             </ion-button>
-          </div>
-          <hr />
-        </div>
 
-        <div v-else-if="segment == 'locations'">
-          <ion-button fill="outline" @click="addLocationModal">
-            <ion-icon :icon="addCircleOutline" slot="start" />
-            {{ translate("Add locations to facility") }}
-          </ion-button>
+            <div class="list-item">
+              <ion-item lines="none">
+                <ion-icon :icon="locationOutline" slot="start" />
+                <ion-label>
+                  {{ "locations id" }}
+                  <p>{{ "pick/primary" }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-label class="tablet">
+                AI
+                <p>{{ translate("area") }}</p>
+              </ion-label>
 
-          <div class="list-item">
-            <ion-item lines="none">
-              <ion-icon :icon="locationOutline" slot="start" />
               <ion-label>
-                {{ "locations id" }}
-                <p>{{ "pick/primary" }}</p>
+                AL
+                <p>{{ translate("aisle") }}</p>
               </ion-label>
-            </ion-item>
 
-            <ion-label class="tablet">
-              AI
-              <p>{{ translate("area") }}</p>
-            </ion-label>
-
-            <ion-label>
-              AL
-              <p>{{ translate("aisle") }}</p>
-            </ion-label>
-
-            <ion-label>
-              SI
-              <p>{{ translate("section") }}</p>
-            </ion-label>
-
-            <ion-label class="tablet">
-              SI
-              <p>{{ translate("level") }}</p>
-            </ion-label>
-
-            <ion-label>
-              1
-              <p>{{ translate("sequence") }}</p>
-            </ion-label>
-            
-            <ion-button fill="clear" color="medium" @click="openLocationDetailsPopover">
-              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
-            </ion-button>
+              <ion-label>
+                SI
+                <p>{{ translate("section") }}</p>
+              </ion-label>
+
+              <ion-label class="tablet">
+                SI
+                <p>{{ translate("level") }}</p>
+              </ion-label>
+
+              <ion-label>
+                1
+                <p>{{ translate("sequence") }}</p>
+              </ion-label>
+              
+              <ion-button fill="clear" color="medium" @click="openLocationDetailsPopover">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+              </ion-button>
+            </div>
+            <hr />
           </div>
-          <hr />
         </div>
-      </div>
+      </main>
+      <main v-else-if="!isLoading" class="ion-text-center ion-padding-top">
+        {{ translate("Failed to fetch facility information") }}
+      </main>
     </ion-content>
   </ion-page>
 </template>
@@ -412,6 +417,7 @@ import SelectProductStoreModal from '@/components/SelectProductStoreModal.vue'
 import SelectOperatingTimeModal from '@/components/SelectOperatingTimeModal.vue';
 import AddLocationModal from '@/components/AddLocationModal.vue';
 import AddStaffMemberModal from '@/components/AddStaffMemberModal.vue';
+import { mapGetters, useStore } from 'vuex';
 
 export default defineComponent({
   name: 'FacilityDetails',
@@ -443,10 +449,21 @@ export default defineComponent({
   },
   data() {
     return {
-      isTimeModalOpen: false,
+      isTimeModalOpen: false as boolean,
+      isLoading: true, // shows whether the facility information fetching is completed or not
       segment: 'external-mappings'
     }
   },
+  computed: {
+    ...mapGetters({
+      current: 'facility/getCurrent'
+    })
+  },
+  props: ["facilityId"],
+  async ionViewWillEnter() {
+    await this.store.dispatch('facility/fetchCurrentFacility', { facilityId: this.facilityId })
+    this.isLoading = false
+  },
   methods: {
     async openStorePopover(ev: Event) {
       const popover = await popoverController.create({
@@ -516,6 +533,8 @@ export default defineComponent({
     }
   },
   setup() {
+    const store = useStore();
+
     return {
       addCircleOutline,
       addOutline,
@@ -526,6 +545,7 @@ export default defineComponent({
       locationOutline,
       openOutline,
       personOutline,
+      store,
       translate
     }
   }