diff --git a/src/components/AddAddressModal.vue b/src/components/AddAddressModal.vue
new file mode 100644
index 00000000..dd25a63a
--- /dev/null
+++ b/src/components/AddAddressModal.vue
@@ -0,0 +1,96 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Address") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label>{{ translate("Address line 1") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item class="ion-margin-bottom">
+      <ion-label>{{ translate("Address line 2") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("City") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Country") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("State") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Zipcode") }}</ion-label>
+      <ion-input />
+    </ion-item>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+  
+export default defineComponent({
+  name: "AddAddressModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/AddGeoPointModal.vue b/src/components/AddGeoPointModal.vue
new file mode 100644
index 00000000..02d57d96
--- /dev/null
+++ b/src/components/AddGeoPointModal.vue
@@ -0,0 +1,88 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal()">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Latitude & Longitude") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item class="ion-margin-bottom">
+      <ion-label>{{ "<postal code value>" }}</ion-label>
+      <ion-button fill="outline">
+        {{ translate("Generate") }}
+        <ion-icon slot="end" :icon="colorWandOutline" />
+      </ion-button>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Latitude") }}</ion-label>
+      <ion-input />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Longitude") }}</ion-label>
+      <ion-input />
+    </ion-item>
+  </ion-content>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, colorWandOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+  
+export default defineComponent({
+  name: "AddGeoPointModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonTitle,
+    IonToolbar,
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      colorWandOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/OpenStorePopover.vue b/src/components/OpenStorePopover.vue
new file mode 100644
index 00000000..0fd65112
--- /dev/null
+++ b/src/components/OpenStorePopover.vue
@@ -0,0 +1,46 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ "NotNaked" }}</ion-list-header>
+      <ion-item button>
+        {{ translate("Make primary") }}
+        <ion-icon slot="end" :icon="starOutline" />
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("Unlink") }}
+        <ion-icon slot="end" :icon="removeCircleOutline" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonList,
+  IonListHeader,
+  IonIcon,
+  IonItem
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { starOutline, removeCircleOutline } from "ionicons/icons";
+import { translate } from "@hotwax/dxp-components";
+
+export default defineComponent({
+  name: "CreateMappingModal",
+  components: {
+    IonContent,
+    IonList,
+    IonListHeader,
+    IonIcon,
+    IonItem
+  },
+  setup() {
+    return {
+      removeCircleOutline,
+      starOutline,
+      translate
+    };
+  }
+});
+</script>
diff --git a/src/components/SelectOperatingTimeModal.vue b/src/components/SelectOperatingTimeModal.vue
new file mode 100644
index 00000000..432ad9ed
--- /dev/null
+++ b/src/components/SelectOperatingTimeModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select time") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Opening Time") }}</ion-label>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</ion-button>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Closing Time") }}</ion-label>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</ion-button>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+
+  <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
+    <ion-content>
+      <ion-datetime
+        presentation="time"  
+        show-default-buttons
+        hour-cycle="h12"
+      />
+    </ion-content>
+  </ion-modal>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-item lines="none">
+        <ion-button color="danger">{{ translate("Reset") }}</ion-button>
+      </ion-item>
+      <ion-item slot="end" lines="none">
+        <ion-button class="ion-margin-end" fill="outline">{{ translate("Cancel") }}</ion-button>
+        <ion-button >{{ translate("Save") }}</ion-button>
+      </ion-item>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+  
+<script lang="ts">
+import { 
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonDatetime,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "SelectOperatingTimeModal",
+  components: { 
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonDatetime,
+    IonFooter,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  },
+  data() {
+    return {
+      isTimeModalOpen: false
+    }
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true});
+    },
+    selectTime() {
+      this.isTimeModalOpen = true
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      translate
+    };
+  },
+});
+</script>
+
+<style scoped>
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SelectProductStoreModal.vue b/src/components/SelectProductStoreModal.vue
new file mode 100644
index 00000000..1b4edb16
--- /dev/null
+++ b/src/components/SelectProductStoreModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select product stores") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item>
+        <ion-label>
+          {{ "Demo Store" }}
+          <p>{{ "STORE_ID" }}</p>
+        </ion-label>
+        <ion-checkbox slot="end" :checked="true" />
+      </ion-item>
+    </ion-list>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="saveOutline" />  
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+  
+<script lang="ts">
+import { 
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "SelectProductStoreModal",
+  components: { 
+    IonButton,
+    IonButtons,
+    IonCheckbox,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true});
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
+    
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index fb17e859..0ce75893 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,25 +1,47 @@
 {
+  "Add": "Add",
+  "Add timings": "Add timings",
+  "Address": "Address",
+  "Address line 1": "Address line 1",
+  "Address line 2": "Address line 2",
   "All": "All",
+  "Allow pickup": "Allow pickup",
   "Apply": "Apply",
   "Built: ": "Built: { builtDateTime }",
   "Cancel": "Cancel",
   "Change": "Change",
   "Change time zone": "Change time zone",
+  "City": "City",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "Closing Time": "Closing Time",
+  "Configure the order fulfillment capacity of your facility.": "Configure the order fulfillment capacity of your facility.",
+  "Country": "Country",
   "Custom": "Custom",
   "Custom fulfillment capacity": "Custom fulfillment capacity",
+  "Days to ship": "Days to ship",
   "Dismiss": "Dismiss",
+  "Edit": "Edit",
   "Facilities": "Facilities",
   "Facility Management": "Facility Management",
   "Fetching TimeZones": "Fetching TimeZones",
+  "Facility details": "Facility details",
   "Find Facilities": "Find Facilities",
+  "Friday": "Friday",
   "Fulfillment Capacity": "Fulfillment Capacity",
   "Fulfillment capacity updated successfully for ": "Fulfillment capacity updated successfully for {facilityName}",
+  "Fulfillment Settings": "Fulfillment Settings",
+  "Generate": "Generate",
+  "Generate shipping labels": "Generate shipping labels",
   "Groups": "Groups",
   "Instance Url": "Instance Url",
   "Loading": "Loading",
   "Login": "Login",
   "Logout": "Logout",
+  "Latitude": "Latitude",
+  "Latitude & Longitude": "Latitude & Longitude",
+  "Longitude": "Longitude",
+  "Make primary": "Make primary",
+  "Monday": "Monday",
   "No Capacity": "No Capacity",
   "No capacity": "No capacity",
   "No facilities found": "No facilities found",
@@ -27,27 +49,51 @@
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
+  "Online Order Fulfillment": "Online Order Fulfillment",
+  "Opening Time": "Opening Time",
+  "Operating hours": "Operating hours",
   "Order fulfillment capacity": "Order fulfillment capacity",
   "Parking": "Parking",
   "Password": "Password",
+  "primary store": "primary store",
   "Product Store": "Product Store",
+  "Product Stores": "Product Stores",
+  "Reset": "Reset",
+  "Saturday": "Saturday",
+  "Save": "Save",
   "Search facilities": "Search facilities",
+  "Select time": "Select time",
   "Search time zones": "Search time zones",
   "Select time zone": "Select time zone",
+  "Select product stores": "Select product stores",
   "Sell Online": "Sell Online",
   "Settings": "Settings",
+  "Sell Inventory Online": "Sell Inventory Online",
+  "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.": "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.",
+  "Something went wrong": "Something went wrong",
   "Something went wrong while login. Please contact administrator.": "Something went wrong while login. Please contact administrator.",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
+  "State": "State",
   "Store": "Store",
   "store name": "store name",
+  "Sunday": "Sunday",
+  "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.": "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.",
+  "Thursday": "Thursday",
   "Time zone updated successfully": "Time zone updated successfully",
+  "Tuesday": "Tuesday",
   "Type": "Type",
   "threshold consumed": "threshold consumed",
   "Unlimited Capacity": "Unlimited Capacity",
   "Unlimited capacity removes the fulfillment capacity limit entirely. To add a fulfillment capacity to this facility, use the custom option.": "Unlimited capacity removes the fulfillment capacity limit entirely. To add a fulfillment capacity to this facility, use the custom option.",
   "Unlimited fulfillment capacity": "Unlimited fulfillment capacity",
   "Unlimited orders": "Unlimited orders",
+  "Unlink":"Unlink",
+  "Update days to ship": "Update days to ship",
   "Username": "Username",
+  "Uses native fulfillment app": "Uses native fulfillment app",
   "Version: ": "Version: { appVersion }",
-  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."
+  "View order count history": "View order count history",
+  "Wednesday": "Wednesday",
+  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu.",
+  "Zipcode": "Zipcode"
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 37680a4c..273b9495 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
+import FacilityDetails from '@/views/FacilityDetails.vue';
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
@@ -60,6 +61,13 @@ const routes: Array<RouteRecordRaw> = [
     component: FindFacilities,
     beforeEnter: authGuard
   },
+  {
+    path: "/facility-details/:facilityId",
+    name: "Facility Details",
+    component: FacilityDetails,
+    props: true,
+    beforeEnter: authGuard
+  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
new file mode 100644
index 00000000..a4c42f06
--- /dev/null
+++ b/src/views/FacilityDetails.vue
@@ -0,0 +1,358 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/"/>
+        <ion-title>{{ translate("Facility details") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-item lines="none" class="ion-margin-top">
+        <ion-label>
+          <h1>{{ "Facility Name" }}</h1>
+          <p>{{ "Facility Id" }}</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("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-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("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-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-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" />
+            </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>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  IonBackButton,
+  IonBadge,
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonChip,
+  IonContent,
+  IonHeader, 
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonProgressBar,
+  IonText,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+  modalController,
+  popoverController
+} from '@ionic/vue'
+import { addCircleOutline, addOutline, closeOutline, ellipsisVerticalOutline } from 'ionicons/icons'
+import OpenStorePopover from '@/components/OpenStorePopover.vue';
+import { translate } from '@hotwax/dxp-components';
+import AddAddressModal from '@/components/AddAddressModal.vue'
+import AddGeoPointModal from '@/components/AddGeoPointModal.vue';
+import SelectProductStoreModal from '@/components/SelectProductStoreModal.vue'
+import SelectOperatingTimeModal from '@/components/SelectOperatingTimeModal.vue';
+
+export default defineComponent({
+  name: 'FacilityDetails',
+  components: {
+    IonBackButton,
+    IonBadge,
+    IonButton,
+    IonCard,
+    IonCardContent,
+    IonCardHeader,
+    IonCardTitle,
+    IonChip,
+    IonContent,
+    IonHeader, 
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonProgressBar,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  },
+  data() {
+    return {
+      isTimeModalOpen: false as boolean
+    }
+  },
+  methods: {
+    async openStorePopover(ev: Event) {
+      const popover = await popoverController.create({
+        component: OpenStorePopover,
+        event: ev,
+        showBackdrop: false
+      });
+      return popover.present()
+    },
+    async addAddress() {
+      const addAddressModal = await modalController.create({
+        component: AddAddressModal
+      })
+
+      addAddressModal.present()
+    },
+    async addGeoPoint() {
+      const addGeoPointModal = await modalController.create({
+        component: AddGeoPointModal
+      })
+
+      addGeoPointModal.present()
+    },
+    async addProductStore() {
+      const addProductStoreModal = await modalController.create({
+        component: SelectProductStoreModal
+      })
+
+      addProductStoreModal.present()
+    },
+    async selectOperatingTime() {
+      const selectOperatingTimeModal = await modalController.create({
+        component: SelectOperatingTimeModal
+      })
+  
+      selectOperatingTimeModal.present()
+    }
+  },
+  setup() {
+    return {
+      addCircleOutline,
+      addOutline,
+      closeOutline,
+      ellipsisVerticalOutline,
+      translate
+    }
+  }
+});
+</script>
+
+<style scoped>
+section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start;
+}
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+
+ion-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>