diff --git a/package-lock.json b/package-lock.json
index 41403e47..97e6797e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7604,6 +7604,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@vue/cli-plugin-unit-jest/node_modules/istanbul-lib-coverage": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
@@ -8176,6 +8185,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/node-notifier": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.5.tgz",
+      "integrity": "sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==",
+      "dev": true,
+      "dependencies": {
+        "growly": "^1.3.0",
+        "is-wsl": "^1.1.0",
+        "semver": "^5.5.0",
+        "shellwords": "^0.1.1",
+        "which": "^1.3.0"
+      }
+    },
+    "node_modules/@vue/cli-plugin-unit-jest/node_modules/node-notifier/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/@vue/cli-plugin-unit-jest/node_modules/normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@@ -26287,48 +26318,60 @@
       "dev": true
     },
     "node_modules/node-notifier": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.5.tgz",
-      "integrity": "sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-10.0.1.tgz",
+      "integrity": "sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "growly": "^1.3.0",
-        "is-wsl": "^1.1.0",
-        "semver": "^5.5.0",
+        "is-wsl": "^2.2.0",
+        "semver": "^7.3.5",
         "shellwords": "^0.1.1",
-        "which": "^1.3.0"
+        "uuid": "^8.3.2",
+        "which": "^2.0.2"
       }
     },
-    "node_modules/node-notifier/node_modules/is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+    "node_modules/node-notifier/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
       }
     },
     "node_modules/node-notifier/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/node-notifier/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
-        "isexe": "^2.0.0"
+        "lru-cache": "^6.0.0"
       },
       "bin": {
-        "which": "bin/which"
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
+    "node_modules/node-notifier/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -41641,6 +41684,12 @@
           "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
           "dev": true
         },
+        "is-wsl": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+          "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+          "dev": true
+        },
         "istanbul-lib-coverage": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
@@ -42104,6 +42153,27 @@
             }
           }
         },
+        "node-notifier": {
+          "version": "5.4.5",
+          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.5.tgz",
+          "integrity": "sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==",
+          "dev": true,
+          "requires": {
+            "growly": "^1.3.0",
+            "is-wsl": "^1.1.0",
+            "semver": "^5.5.0",
+            "shellwords": "^0.1.1",
+            "which": "^1.3.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "5.7.2",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+              "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+              "dev": true
+            }
+          }
+        },
         "normalize-path": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@@ -56244,38 +56314,50 @@
       }
     },
     "node-notifier": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.5.tgz",
-      "integrity": "sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-10.0.1.tgz",
+      "integrity": "sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "growly": "^1.3.0",
-        "is-wsl": "^1.1.0",
-        "semver": "^5.5.0",
+        "is-wsl": "^2.2.0",
+        "semver": "^7.3.5",
         "shellwords": "^0.1.1",
-        "which": "^1.3.0"
+        "uuid": "^8.3.2",
+        "which": "^2.0.2"
       },
       "dependencies": {
-        "is-wsl": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-          "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
-          "dev": true
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
         },
         "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
           "dev": true,
+          "optional": true,
+          "peer": true,
           "requires": {
-            "isexe": "^2.0.0"
+            "lru-cache": "^6.0.0"
           }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true,
+          "optional": true,
+          "peer": true
         }
       }
     },
diff --git a/src/components/AddExternalMappingPopover.vue b/src/components/AddExternalMappingPopover.vue
new file mode 100644
index 00000000..a4cb3456
--- /dev/null
+++ b/src/components/AddExternalMappingPopover.vue
@@ -0,0 +1,53 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ translate("Choose system") }}</ion-list-header>
+      <ion-item button>
+        {{ translate("Shopify") }}
+      </ion-item>
+      <ion-item button>
+        {{ translate("Netsuite") }}
+      </ion-item>
+      <ion-item button lines="none" @click="openCustomMappingModal">
+        {{ translate("Custom") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+import CustomMappingModal from "./CustomMappingModal.vue";
+
+export default defineComponent({
+  name: "AddExternalMappingPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  methods: {
+    async openCustomMappingModal() {
+      const customMappingModal = await modalController.create({
+        component: CustomMappingModal
+      })
+  
+      customMappingModal.present()
+    }
+  },
+  setup() {
+    return {
+      translate
+    };
+  }
+});
+</script>
diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
new file mode 100644
index 00000000..0993a396
--- /dev/null
+++ b/src/components/AddLocationModal.vue
@@ -0,0 +1,105 @@
+<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("Location") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label>{{ translate("Type") }}</ion-label>
+      <ion-select interface="popover" :placeholder="translate('Select')" value="bulk" required>
+        <ion-select-option>{{ "pick/primary" }}</ion-select-option>
+        <ion-select-option>{{ "bulk" }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-input placeholder="area"/>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-input placeholder="aisle" />
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-input placeholder="section"/>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-input placeholder="level"/>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Sequence") }}</ion-label>
+      <ion-input placeholder="sequence"/>
+    </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,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  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: "AddLocationModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonSelect,
+    IonSelectOption,
+    IonText,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/AddStaffMemberModal.vue b/src/components/AddStaffMemberModal.vue
new file mode 100644
index 00000000..7b41ee2c
--- /dev/null
+++ b/src/components/AddStaffMemberModal.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("Staff") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item>
+      <ion-label>{{ translate("Party Id") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-input placeholder="party id"/>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ translate("Role") }} <ion-text color="danger">*</ion-text></ion-label>
+      <ion-select interface="popover" :placeholder="translate('Select')" value="fulfillment">
+        <ion-select-option value="fulfillment">{{ "Fulfillment" }}</ion-select-option>
+      </ion-select>
+    </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,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  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: "AddStaffMemberModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonSelect,
+    IonSelectOption,
+    IonText,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/CustomMappingModal.vue b/src/components/CustomMappingModal.vue
new file mode 100644
index 00000000..36b1de5f
--- /dev/null
+++ b/src/components/CustomMappingModal.vue
@@ -0,0 +1,102 @@
+<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("Custom mapping") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ translate("Facility details") }}</ion-list-header>
+      <ion-item>
+        <ion-label>{{ translate("Facility ID") }}</ion-label>
+        <p>{{ "<facility-id>" }}</p>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>{{ translate("Facility name") }}</ion-label>
+        <p>{{ "<facility-name>" }}</p>
+      </ion-item>
+    </ion-list>
+
+    <ion-list>
+      <ion-list-header>{{ translate("Custom mapping") }}</ion-list-header>
+      <ion-item>
+        <ion-label>{{ translate("Mapping ID") }}</ion-label>
+        <ion-input placeholder="Mapping ID" />
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ translate("Mapping Name") }}</ion-label>
+        <ion-input placeholder="Mapping name" />
+      </ion-item>
+      <ion-item>
+        <ion-label>{{ translate("Identification") }}</ion-label>
+        <ion-input placeholder="Mapping Value" />
+      </ion-item>
+    </ion-list>
+  </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,
+  IonList,
+  IonListHeader,
+  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: "CustomMappingModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/LocationDetailsPopover.vue b/src/components/LocationDetailsPopover.vue
new file mode 100644
index 00000000..82c079f9
--- /dev/null
+++ b/src/components/LocationDetailsPopover.vue
@@ -0,0 +1,50 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ translate("Location details") }}</ion-list-header>
+      <ion-item button @click="addLocationModal">
+        {{ translate("Edit location") }}
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("Remove location") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+import AddLocationModal from "./AddLocationModal.vue";
+
+export default defineComponent({
+  name: "LocationDetailsPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  methods: {
+    async addLocationModal() {
+      const addLocationModal = await modalController.create({
+        component: AddLocationModal
+      })
+
+      addLocationModal.present()
+    }
+  },
+  setup() {
+    return {
+      translate
+    };
+  }
+});
+</script>
diff --git a/src/components/OpenStorePopover.vue b/src/components/OpenStorePopover.vue
index 0fd65112..bc88616e 100644
--- a/src/components/OpenStorePopover.vue
+++ b/src/components/OpenStorePopover.vue
@@ -27,7 +27,7 @@ import { starOutline, removeCircleOutline } from "ionicons/icons";
 import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
-  name: "CreateMappingModal",
+  name: "OpenStorePopover",
   components: {
     IonContent,
     IonList,
diff --git a/src/components/SelectOperatingTimeModal.vue b/src/components/SelectOperatingTimeModal.vue
index 432ad9ed..22b55104 100644
--- a/src/components/SelectOperatingTimeModal.vue
+++ b/src/components/SelectOperatingTimeModal.vue
@@ -14,36 +14,32 @@
     <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-datetime-button datetime="opentime" />
       </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-datetime-button datetime="endtime" />
+      </ion-item>
+      <ion-item lines="none">
+        <ion-button color="danger">{{ translate("Reset") }}</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 :keep-contents-mounted="true">
+    <ion-datetime id="opentime" presentation="time" show-default-buttons hour-cycle="h23" />
   </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>
+  <ion-modal :keep-contents-mounted="true">
+    <ion-datetime id="endtime" presentation="time" show-default-buttons hour-cycle="h23" />
+  </ion-modal>
+
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
 </template>
   
 <script lang="ts">
@@ -52,7 +48,9 @@ import {
   IonButtons,
   IonContent,
   IonDatetime,
-  IonFooter,
+  IonDatetimeButton,
+  IonFab,
+  IonFabButton,
   IonHeader,
   IonIcon,
   IonItem,
@@ -64,7 +62,7 @@ import {
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline } from "ionicons/icons";
+import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
@@ -74,7 +72,9 @@ export default defineComponent({
     IonButtons,
     IonContent,
     IonDatetime,
-    IonFooter,
+    IonDatetimeButton,
+    IonFab,
+    IonFabButton,
     IonHeader,
     IonIcon,
     IonItem,
@@ -100,6 +100,7 @@ export default defineComponent({
   setup() {
     return {
       closeOutline,
+      saveOutline,
       translate
     };
   },
diff --git a/src/locales/en.json b/src/locales/en.json
index 1736e270..900c4086 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,34 +1,46 @@
 {
   "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "Add": "Add",
+  "Add locations to facility": "Add locations to facility",
+  "Add staff member to facility": "Add staff member to facility",
   "Add timings": "Add timings",
   "Address": "Address",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
+  "aisle": "aisle",
+  "Aisle": "Aisle",
   "All": "All",
   "Allow pickup": "Allow pickup",
   "App": "App",
   "Apply": "Apply",
+  "area": "area",
+  "Area": "Area",
   "Back to Launchpad": "Back to Launchpad",
   "Built: ": "Built: { builtDateTime }",
   "Cancel": "Cancel",
   "Change": "Change",
   "Change time zone": "Change time zone",
+  "Choose system": "Choose system",
   "Choose language": "Choose language",
   "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",
+  "Custom mapping": "Custom mapping",
+  "Country": "Country",
   "Days to ship": "Days to ship",
   "Dismiss": "Dismiss",
   "Edit": "Edit",
+  "Edit location": "Edit location",
+  "External mappings": "External mappings",
   "Facilities": "Facilities",
   "Facility": "Facility",
-  "Facility Management": "Facility Management",
   "Facility details": "Facility details",
+  "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",
@@ -41,18 +53,28 @@
   "Go to Launchpad": "Go to Launchpad",
   "Go to OMS": "Go to OMS",
   "Groups": "Groups",
+  "Identification": "Identification",
   "Instance Url": "Instance Url",
   "Language": "Language",
   "Latitude": "Latitude",
   "Latitude & Longitude": "Latitude & Longitude",
+  "level": "level",
+  "Level": "Level",
   "Loading": "Loading",
+  "Location": "Location",
+  "Location details": "Location details",
+  "Locations": "Locations",
   "Logging out": "Logging out",
   "Login": "Login",
   "Login failed": "Login failed",
   "Logout": "Logout",
   "Longitude": "Longitude",
   "Make primary": "Make primary",
+  "Mapping ID": "Mapping ID",
+  "Mapping Name": "Mapping Name",
+  "Map facility to an external system": "Map facility to an external system",
   "Monday": "Monday",
+  "Netsuite": "Netsuite",
   "No Capacity": "No Capacity",
   "No capacity": "No capacity",
   "No facilities found": "No facilities found",
@@ -66,6 +88,8 @@
   "Operating hours": "Operating hours",
   "Order fulfillment capacity": "Order fulfillment capacity",
   "Parking": "Parking",
+  "party id": "party id",
+  "Party Id": "Party Id",
   "Password": "Password",
   "Please contact the administrator.": "Please contact the administrator.",
   "primary store": "primary store",
@@ -73,24 +97,36 @@
   "Product Stores": "Product Stores",
   "Reason:": "Reason:",
   "Reset": "Reset",
+  "Remove": "Remove",
+  "Remove location": "Remove location",
+  "role": "role",
+  "Role": "Role",
   "Saturday": "Saturday",
   "Save": "Save",
+  "section": "section",
+  "Section": "Section",
+  "Select": "Select",
   "Search facilities": "Search facilities",
+  "Search time zones": "Search time zones",
   "Select store": "Select store",
   "Select time": "Select time",
-  "Search time zones": "Search time zones",
-  "Select facility": "Select facility",
   "Select time zone": "Select time zone",
+  "Select facility": "Select facility",
   "Select product stores": "Select product stores",
   "Select your preferred language.": "Select your preferred language.",
   "Sell Online": "Sell Online",
-  "Settings": "Settings",
   "Sell Inventory Online": "Sell Inventory Online",
+  "sequence": "sequence",
+  "Sequence": "Sequence",
+  "Settings": "Settings",
   "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.",
+  "Shopify": "Shopify",
+  "Shopify facility": "Shopify facility",
   "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.",
   "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",
+  "Staff": "Staff",
   "State": "State",
   "Store": "Store",
   "store name": "store name",
@@ -98,12 +134,12 @@
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "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.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
+  "threshold consumed": "threshold consumed",
   "Thursday": "Thursday",
   "Time zone updated successfully": "Time zone updated successfully",
   "Timezone": "Timezone",
   "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",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 1307daf1..5fbb21f2 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -86,53 +86,6 @@ http://ionicframework.com/docs/theming/ */
   --spacer-3xl: 10rem;   /* 160px */
 }
 
-.empty-state {
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-}
-
-.empty-state > img {
-  object-fit: contain;
-}
-
-.empty-state > p {
-  text-align: center;
-}
-
-.desktop-only {
-  display: none;
-}
-
-.mobile-only {
-  display: unset;
-}
-
-.find {
-  display: grid;
-  grid-template-areas: "search"
-                       "main";
-}
-
-.find > .filters{
-  display: none;
-}
-
-.find > main {
-  grid-area: main;
-}
-
-.filters {
-  grid-area: filters;
-}
-
-.search {
-  grid-area: search;
-}
-
 @media (prefers-color-scheme: dark) {
   /*
    * Dark Colors
@@ -315,7 +268,115 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+body {
+  /** Border variable **/
+  --border-medium: 1px solid var(--ion-color-medium);
+}
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
+.desktop-only {
+  display: none;
+}
+
+.mobile-only {
+  display: unset;
+}
+
+.find {
+  display: grid;
+  grid-template-areas: "search"
+                       "main";
+}
+
+.find > .filters{
+  display: none;
+}
+
+.find > main {
+  grid-area: main;
+}
+
+.filters {
+  grid-area: filters;
+}
+
+.search {
+  grid-area: search;
+}
+
+hr {
+  border-top: var(--border-medium);
+}
+
+.list-item {
+  --columns-mobile: 2;
+  --columns-tablet: 5;
+  --columns-desktop: 7;
+  --col-calc: var(--columns-mobile);
+  --implicit-columns: calc(var(--col-calc) - 1);
+  display: grid;
+  grid-template-columns: repeat(var(--implicit-columns), 1fr) max-content;
+  justify-items: center;
+  align-items: center;
+}
+
+.list-item > * {
+  display: none;
+}
+
+.list-item > *:last-child {
+  display: unset;
+  justify-self: end;
+}
+
+.list-item > ion-label {
+  text-align: center;
+}
+
+.list-item > *:first-child {
+  display: unset;
+  justify-self: start
+}
+
+@media (min-width: 700px) {
+  .list-item {
+    --col-calc: var(--columns-tablet);
+  }
+
+  .tablet {
+    display: unset;
+  }
+}
+
 @media (min-width: 991px) {
+  .list-item {
+    --col-calc: var(--columns-desktop);
+  }
+
+  .list-item > * {
+    display: unset;
+  }
+
+  .tablet {
+    display: unset;
+  }
+
   .find {
     grid: "search  main" min-content
           "filters main" 1fr
@@ -328,10 +389,6 @@ http://ionicframework.com/docs/theming/ */
     margin-top: var(--spacer-lg);
   }
 
-  .filters {
-    margin-top: var(--spacer-lg);
-  }
-
   .find > .filters{
     display: unset;
   }
@@ -343,5 +400,4 @@ http://ionicframework.com/docs/theming/ */
   .mobile-only {
     display: none;
   }
-
 }
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index d09e9e33..80f2bc7c 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -2,12 +2,12 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-back-button slot="start" default-href="/"/>
+        <ion-back-button slot="start" default-href="/find-facilities"/>
         <ion-title>{{ translate("Facility details") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <div v-if="current?.facilityId">
+      <main v-if="current?.facilityId">
         <ion-item lines="none" class="ion-margin-top">
           <ion-label>
             <h1>{{ current.facilityName }}</h1>
@@ -220,10 +220,148 @@
             </ion-item>
           </ion-card>
         </section>
-      </div>
-      <div v-else-if="!isLoading" class="ion-text-center ion-padding-top">
+
+        <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">
+                  <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>
+
+            <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>
+              </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-button fill="clear" color="medium">
+                <ion-icon slot="icon-only" :icon="closeCircleOutline" />
+              </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>
+
+              <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>
+            </div>
+            <hr />
+          </div>
+        </div>
+      </main>
+      <main v-else-if="!isLoading" class="ion-text-center ion-padding-top">
         {{ translate("Failed to fetch facility information") }}
-      </div>
+      </main>
     </ion-content>
   </ion-page>
 </template>
@@ -246,8 +384,11 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonNote,
   IonPage,
   IonProgressBar,
+  IonSegment,
+  IonSegmentButton,
   IonText,
   IonTitle,
   IonToggle,
@@ -255,13 +396,27 @@ import {
   modalController,
   popoverController
 } from '@ionic/vue'
-import { addCircleOutline, addOutline, closeOutline, ellipsisVerticalOutline } from 'ionicons/icons'
-import OpenStorePopover from '@/components/OpenStorePopover.vue';
+import { 
+  addCircleOutline,
+  addOutline,
+  closeCircleOutline,
+  closeOutline,
+  ellipsisVerticalOutline,
+  globeOutline,
+  locationOutline,
+  openOutline,
+  personOutline
+} from 'ionicons/icons'
 import { translate } from '@hotwax/dxp-components';
+import AddExternalMappingPopover from '@/components/AddExternalMappingPopover.vue'
+import LocationDetailsPopover from '@/components/LocationDetailsPopover.vue';
+import OpenStorePopover from '@/components/OpenStorePopover.vue';
 import AddAddressModal from '@/components/AddAddressModal.vue'
 import AddGeoPointModal from '@/components/AddGeoPointModal.vue';
 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({
@@ -282,8 +437,11 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
+    IonNote,
     IonPage,
     IonProgressBar,
+    IonSegment,
+    IonSegmentButton,
     IonText,
     IonTitle,
     IonToggle,
@@ -292,7 +450,8 @@ export default defineComponent({
   data() {
     return {
       isTimeModalOpen: false as boolean,
-      isLoading: true // shows whether the facility information fetching is completed or not
+      isLoading: true, // shows whether the facility information fetching is completed or not
+      segment: 'external-mappings'
     }
   },
   computed: {
@@ -335,12 +494,42 @@ export default defineComponent({
 
       addProductStoreModal.present()
     },
+    async addLocationModal() {
+      const addLocationModal = await modalController.create({
+        component: AddLocationModal
+      })
+
+      addLocationModal.present()
+    },
+    async addStaffMemberModal() {
+      const addStaffModal = await modalController.create({
+        component: AddStaffMemberModal
+      })
+
+      addStaffModal.present()
+    },
     async selectOperatingTime() {
       const selectOperatingTimeModal = await modalController.create({
         component: SelectOperatingTimeModal
       })
   
       selectOperatingTimeModal.present()
+    },
+    async openLocationDetailsPopover(ev: Event) {
+      const locationDetailsPopover = await popoverController.create({
+        component: LocationDetailsPopover,
+        event: ev,
+        showBackdrop: false
+      });
+      return locationDetailsPopover.present()
+    },
+    async openExternalMappingPopover(ev: Event) {
+      const externalMappingPopover = await popoverController.create({
+        component: AddExternalMappingPopover,
+        event: ev,
+        showBackdrop: false
+      });
+      return externalMappingPopover.present()
     }
   },
   setup() {
@@ -349,8 +538,13 @@ export default defineComponent({
     return {
       addCircleOutline,
       addOutline,
+      closeCircleOutline,
       closeOutline,
       ellipsisVerticalOutline,
+      globeOutline,
+      locationOutline,
+      openOutline,
+      personOutline,
       store,
       translate
     }
@@ -359,11 +553,17 @@ export default defineComponent({
 </script>
 
 <style scoped>
+
+ion-content > main {
+  margin: var(--spacer-lg)
+}
+
 section {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   align-items: start;
 }
+
 ion-modal.date-time-modal {
   --width: 290px;
   --height: 440px;
@@ -375,4 +575,29 @@ ion-card-header {
   justify-content: space-between;
   align-items: center;
 }
+
+
+/*Height of segment is defined now since their are less list items. Will remove it later */
+.segments {
+  height: 400px;
+  margin-top: var(--spacer-2xl);
+}
+
+.segments > div {
+  margin-top: var(--spacer-lg)
+}
+
+ion-segment {
+  justify-content: start;
+}
+
+.staff {
+  --columns-desktop: 5;
+}
+
+.external-mappings {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start; 
+}
 </style>