diff --git a/src/components/Filters.vue b/src/components/Filters.vue
index fe4a0e74..54620715 100644
--- a/src/components/Filters.vue
+++ b/src/components/Filters.vue
@@ -21,7 +21,9 @@
           <ion-label>{{ translate("Type") }}</ion-label>
           <ion-select interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
             <ion-select-option value="">{{ translate("All") }}</ion-select-option>
-            <ion-select-option :value="facilityType" :key="facilityType" v-for="(description, facilityType) in facilityTypes">{{ description }}</ion-select-option>
+            <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
+              {{ type.description }}
+            </ion-select-option>
           </ion-select>
         </ion-item>
       </ion-list>
diff --git a/src/components/ProductStorePopover.vue b/src/components/ProductStorePopover.vue
index 51d5ad13..d4f60f11 100644
--- a/src/components/ProductStorePopover.vue
+++ b/src/components/ProductStorePopover.vue
@@ -196,4 +196,4 @@ export default defineComponent({
     };
   }
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/SelectProductStoreModal.vue b/src/components/SelectProductStoreModal.vue
index c54ad6ea..9dd78e96 100644
--- a/src/components/SelectProductStoreModal.vue
+++ b/src/components/SelectProductStoreModal.vue
@@ -69,8 +69,8 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters({
+      productStores: 'util/getProductStores',
       facilityProductStores: 'facility/getFacilityProductStores',
-      productStores: 'util/getProductStores'
     })
   },
   props: ["facilityId", "selectedProductStores"],
diff --git a/src/components/TimezoneModal.vue b/src/components/TimezoneModal.vue
index 7363e67f..89156320 100644
--- a/src/components/TimezoneModal.vue
+++ b/src/components/TimezoneModal.vue
@@ -6,10 +6,10 @@
           <ion-icon :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Select time zone") }}</ion-title>
+      <ion-title>{{ translate("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
     </ion-toolbar>
   </ion-header>
 
@@ -17,12 +17,12 @@
     <form @keyup.enter="setUserTimeZone">
       <div class="empty-state" v-if="isLoading">
         <ion-spinner name="crescent" />
-        <p>{{ $t("Fetching TimeZones")}}</p>
+        <p>{{ translate("Fetching TimeZones")}}</p>
       </div>
 
       <!-- Empty state -->
       <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
-        <p>{{ $t("No time zone found")}}</p>
+        <p>{{ translate("No time zone found")}}</p>
       </div>
 
       <!-- Timezones -->
@@ -74,6 +74,7 @@ import { UserService } from "@/services/UserService";
 import { hasError } from '@/adapter'
 import { DateTime } from 'luxon';
 import logger from "@/logger";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "TimeZoneModal",
@@ -153,6 +154,7 @@ export default defineComponent({
     return {
       closeOutline,
       saveOutline,
+      translate,
       store
     };
   }
diff --git a/src/locales/en.json b/src/locales/en.json
index 23a525a5..76cb92ee 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,7 +1,11 @@
 {
   "Add": "Add",
+  "Add address later": "Add address later",
   "Add locations to facility": "Add locations to facility",
   "Add staff member to facility": "Add staff member to facility",
+  "Add Store": "Add Store",
+  "Add Store Address": "Add Store Address",
+  "Add Store Configuration": "Add Store Configuration",
   "Add timings": "Add timings",
   "Address": "Address",
   "Address line 1": "Address line 1",
@@ -25,8 +29,11 @@
   "City": "City",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Closing Time": "Closing Time",
+  "Configure settings later": "Configure settings later",
   "Configure the order fulfillment capacity of your facility.": "Configure the order fulfillment capacity of your facility.",
   "Consumed Order Limit": "Consumed Order Limit",
+  "Create login credentials": "Create login credentials",
+  "Create store": "Create store",
   "Custom": "Custom",
   "Custom fulfillment capacity": "Custom fulfillment capacity",
   "Custom mapping": "Custom mapping",
@@ -38,10 +45,14 @@
   "Filters": "Filters",
   "Edit": "Edit",
   "Edit location": "Edit location",
+  "External ID": "External ID",
   "External mapping created successfully": "External mapping created successfully",
   "External mapping updated successfully": "External mapping updated successfully",
   "External mappings": "External mappings",
   "Facilities": "Facilities",
+  "Facility address created successfully.": "Facility address created successfully.",
+  "Facility created successfully.": "Facility created successfully.",
+  "Facility configurations created successfully.": "Facility configurations created successfully.",
   "Facility": "Facility",
   "Facility address updated successfully.": "Facility address updated successfully.",
   "Facility details": "Facility details",
@@ -51,12 +62,19 @@
   "Facility location removed successfully": "Facility location removed successfully", 
   "Facility location updated successfully": "Facility location updated successfully",
   "Facility name": "Facility name",
+  "Facility name is required.": "Facility name is required.",
   "Facility Management": "Facility Management",
+  "Failed to add some product stores to the facility.": "Failed to add some product stores to the facility.",
   "Failed to create external mapping": "Failed to create external mapping",
+  "Failed to create facility.": "Failed to create facility.",
+  "Failed to create facility address.": "Failed to create facility address.",
   "Failed to create facility location": "Failed to create facility location",
   "Failed to create shopify mapping": "Failed to create shopify mapping",
   "Failed to fetch facility information": "Failed to fetch facility information",
   "Failed to find the facility locations": "Failed to find the facility locations",
+  "Failed to generate latitude and longitude.": "Failed to generate latitude and longitude.",
+  "Failed to make product store as primary.": "Failed to make product store as primary.",
+  "Failed to create facility login credentials.": "Failed to create facility login credentials.",
   "Failed to generate latitude & Longitude.": "Failed to generate latitude & Longitude.",
   "Failed to make product store primary.": "Failed to make product store primary.",
   "Failed to remove facility location": "Failed to remove facility location",
@@ -71,6 +89,7 @@
   "Failed to update fulfillment capacity for ": "Failed to update fulfillment capacity for {facilityName}",
   "Failed to update fulfillment setting": "Failed to update fulfillment setting",
   "Failed to update shopify mapping": "Failed to update shopify mapping",
+  "Failed to update some fulfillment settings.": "Failed to update some fulfillment settings.",
   "Failed to update some product stores": "Failed to update some product stores",
   "Failed to update some role(s).": "Failed to update some role(s).",
   "Fetching TimeZones": "Fetching TimeZones",
@@ -86,6 +105,7 @@
   "Go to OMS": "Go to OMS",
   "Groups": "Groups",
   "Identification": "Identification",
+  "Internal ID": "Internal ID",
   "Instance Url": "Instance Url",
   "Language": "Language",
   "Latitude": "Latitude",
@@ -107,6 +127,7 @@
   "Mapping Name": "Mapping Name",
   "Map facility to an external system": "Map facility to an external system",
   "Monday": "Monday",
+  "Name": "Name",
   "Netsuite": "Netsuite",
   "No Capacity": "No Capacity",
   "No capacity": "No capacity",
@@ -114,6 +135,7 @@
   "No facilities found": "No facilities found",
   "No fulfillment capacity": "No fulfillment capacity",
   "No party found": "No party found",
+  "No product stores added.": "No product stores added.",
   "No records found": "No records found",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
@@ -133,6 +155,7 @@
   "Please contact the administrator.": "Please contact the administrator.",
   "Please enter a valid value": "Please enter a valid value",
   "Please fill all the required fields": "Please fill all the required fields",
+  "Please provide a password.": "Please provide a password.",
   "Primary": "Primary",
   "primary store": "primary store",
   "Product Store": "Product Store",
@@ -149,9 +172,13 @@
   "Role(s) updated successfully.": "Role(s) updated successfully.",
   "Saturday": "Saturday",
   "Save": "Save",
+  "Save address": "Save address",
+  "Save configurations": "Save configurations",
   "Section": "Section",
   "section": "section",
   "Select": "Select",
+  "Select country": "Select country",
+  "Select state": "Select state",
   "Search facilities": "Search facilities",
   "Search time zones": "Search time zones",
   "Select time": "Select time",
@@ -164,6 +191,7 @@
   "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.",
+  "Setup Store": "Setup Store",
   "Shopify": "Shopify",
   "Shopify facility": "Shopify facility",
   "Shopify location": "Shopify location",
@@ -194,7 +222,7 @@
   "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",
+  "Unlink": "Unlink",
   "Update days to ship": "Update days to ship",
   "Username": "Username",
   "Uses native fulfillment app": "Uses native fulfillment app",
@@ -203,4 +231,4 @@
   "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
+  }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 273b9495..c2ad66d1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,6 +10,9 @@ import { loader } from '@/utils/user';
 import FacilityManagement from '@/views/FacilityManagement.vue'
 import Settings from '@/views/Settings.vue';
 import FindFacilities from '@/views/FindFacilities.vue';
+import CreateFacility from '@/views/CreateFacility.vue';
+import AddFacilityAddress from '@/views/AddFacilityAddress.vue';
+import AddFacilityConfig from '@/views/AddFacilityConfig.vue';
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -68,6 +71,26 @@ const routes: Array<RouteRecordRaw> = [
     props: true,
     beforeEnter: authGuard
   },
+  {
+    path: "/create-facility",
+    name: "Create Facility",
+    component: CreateFacility,
+    beforeEnter: authGuard
+  },
+  {
+    path: "/add-facility-address/:facilityId",
+    name: "Add Facility Address",
+    component: AddFacilityAddress,
+    props: true,
+    beforeEnter: authGuard
+  },
+  {
+    path: "/add-facility-config/:facilityId",
+    name: "Add Facility Config",
+    component: AddFacilityConfig,
+    props: true,
+    beforeEnter: authGuard
+  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/services/FacilityService.ts b/src/services/FacilityService.ts
index 94d624c4..9d80c162 100644
--- a/src/services/FacilityService.ts
+++ b/src/services/FacilityService.ts
@@ -150,7 +150,7 @@ const fetchFacilityOrderCounts = async(facilityId: string): Promise<any> => {
   return facilityOrderCounts;
 }
 
-const fetchFacilityContactDetails = async(payload: any): Promise <any> => {
+const fetchFacilityGroup = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
     method: "post",
@@ -158,15 +158,15 @@ const fetchFacilityContactDetails = async(payload: any): Promise <any> => {
   });
 }
 
-const addPartyToFacility = async (payload: any): Promise <any> => {
+const fetchFacilityContactDetails = async(payload: any): Promise <any> => {
   return api({
-    url: "service/addPartyToFacility",
+    url: "performFind",
     method: "post",
     data: payload
   });
 }
 
-const fetchFacilityGroup = async (payload: any): Promise<any> => {
+const getFacilityProductStores = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
     method: "POST",
@@ -174,6 +174,18 @@ const fetchFacilityGroup = async (payload: any): Promise<any> => {
   })
 }
 
+
+
+const addPartyToFacility = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/addPartyToFacility",
+    method: "post",
+    data: payload
+  });
+}
+
+
+
 const removePartyFromFacility = async (payload: any): Promise <any> => {
   return api({
     url: "service/removePartyFromFacility",
@@ -182,15 +194,16 @@ const removePartyFromFacility = async (payload: any): Promise <any> => {
   });
 }
 
-const fetchFacilityLocations = async(payload: any): Promise<any> => {
+
+const updateProductStoreFacility = async (payload: any): Promise <any> => {
   return api({
-    url: "performFind",
+    url: "service/updateProductStoreFacility",
     method: "post",
     data: payload
-  })
+  });
 }
 
-const getFacilityProductStores = async (payload: any): Promise<any> => {
+const fetchFacilityLocations = async(payload: any): Promise<any> => {
   return api({
     url: "performFind",
     method: "POST",
@@ -198,6 +211,7 @@ const getFacilityProductStores = async (payload: any): Promise<any> => {
   })
 }
 
+
 const addFacilityToGroup = async (payload: any): Promise<any> => {
   return api({
     url: "service/addFacilityToGroup",
@@ -270,22 +284,23 @@ const updateFacilityToGroup = async (payload: any): Promise<any> => {
   })
 }
 
-const updateFacilityPostalAddress = async (payload: any): Promise<any> => {
+const createFacility = async (payload: any): Promise<any> => {
   return api({
-    url: "service/updateFacilityPostalAddress",
+    url: "service/createFacility",
     method: "post",
     data: payload
   })
 }
 
-const updateProductStoreFacility = async (payload: any): Promise <any> => {
+const updateFacilityPostalAddress = async (payload: any): Promise<any> => {
   return api({
-    url: "service/updateProductStoreFacility",
+    url: "service/updateFacilityPostalAddress",
     method: "post",
     data: payload
-  });
+  })
 }
 
+
 const fetchFacilityMappings = async (payload: any): Promise<any> => {
   return api({
     url: "performFind",
@@ -352,28 +367,29 @@ const createEnumeration = async (payload: any): Promise<any> => {
 
 export const FacilityService = {
   addFacilityToGroup,
+  createFacilityGroup,
+  createFacility,
+  createFacilityLocation,
   addPartyToFacility,
   createEnumeration,
-  createFacilityLocation,
-  createFacilityGroup,
   createFacilityIdentification,
   createFacilityPostalAddress,
   createProductStoreFacility,
-  createShopifyShopLocation,
   deleteFacilityLocation,
+  fetchFacilityGroup,
+  fetchFacilityLocations,
+  fetchFacilityContactDetails,
+  createShopifyShopLocation,
   deleteShopifyShopLocation,
   fetchFacilities,
   fetchFacilitiesOrderCount,
-  fetchFacilityContactDetails,
   fetchFacilityGroupInformation,
-  fetchFacilityGroup,
-  fetchFacilityLocations,
   fetchFacilityMappings,
   fetchFacilityOrderCounts,
   fetchFacilityPrimaryMember,
+  getFacilityProductStores,
   fetchShopifyFacilityMappings,
   getFacilityParties,
-  getFacilityProductStores,
   getPartyRoleAndPartyDetails,
   removePartyFromFacility,
   updateFacility,
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index be353c14..c4415b5c 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -136,8 +136,26 @@ const getUserProfile = async (token: any): Promise<any> => {
   }
 }
 
+const createFacilityUser = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/createRelationship", 
+    method: "post",
+    data: payload
+  });
+}
+
+const addPartyToFacility = async (payload: any): Promise <any> => {
+  return api({
+    url: "service/addPartyToFacility", 
+    method: "post",
+    data: payload
+  });
+}
+
 export const UserService = {
+  addPartyToFacility,
   login,
+  createFacilityUser,
   getAvailableTimeZones,
   getUserProfile,
   setUserTimeZone,
diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
index 0978745b..d9f7efd6 100644
--- a/src/services/UtilService.ts
+++ b/src/services/UtilService.ts
@@ -77,9 +77,9 @@ export const UtilService = {
   fetchExternalMappingTypes,
   fetchFacilityTypes,
   fetchLocationTypes,
-  fetchPartyRoles,
   fetchProductStores,
   fetchStates,
-  generateLatLong
+  generateLatLong,
+  fetchPartyRoles,
 }
 
diff --git a/src/store/modules/facility/actions.ts b/src/store/modules/facility/actions.ts
index d2552d12..8006cdd8 100644
--- a/src/store/modules/facility/actions.ts
+++ b/src/store/modules/facility/actions.ts
@@ -41,7 +41,7 @@ const actions: ActionTree<FacilityState, RootState> = {
 
       const facilityGroupInformation = facilitiesGroupInformation[facility.facilityId]
 
-      if(facilityGroupInformation.length) {
+      if(facilityGroupInformation?.length) {
         facility.groupInformation = facilityGroupInformation
         facility.sellOnline = (facilityGroupInformation.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'FAC_GRP'))
         facility.useOMSFulfillment = (facilityGroupInformation.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'OMS_FULFILLMENT'))
@@ -209,6 +209,10 @@ const actions: ActionTree<FacilityState, RootState> = {
     commit(types.FACILITY_CURRENT_UPDATED, facility);
   },
 
+  updateCurrentFacility({ commit }, facility) {
+    commit(types.FACILITY_CURRENT_UPDATED, facility);
+  },
+
   async fetchFacilityContactDetails({ commit }, payload) {
     let postalAddress = {} as any
     const params = {
diff --git a/src/store/modules/facility/mutations.ts b/src/store/modules/facility/mutations.ts
index 85722a06..7ba8747c 100644
--- a/src/store/modules/facility/mutations.ts
+++ b/src/store/modules/facility/mutations.ts
@@ -13,6 +13,15 @@ const mutations: MutationTree <FacilityState> = {
   [types.FACILITY_CURRENT_UPDATED](state, payload) {
     state.current = payload
   },
+  [types.FACILITY_CURRENT_LOCATION_UPDATED](state, payload) {
+    state.current.locations = payload
+  },
+  [types.FACILITY_POSTAL_ADDRESS_UPDATED](state, payload) {
+    state.current.postalAddress = payload
+  },
+  [types.FACILITY_PRODUCT_STORES_UPDATED](state, payload) {
+    state.current.productStores = payload
+  },
   [types.FACILITY_LOCATIONS_UPDATED](state, payload) {
     state.current.locations = payload
   },
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
index bf4937d6..f9ca6851 100644
--- a/src/store/modules/util/UtilState.ts
+++ b/src/store/modules/util/UtilState.ts
@@ -1,6 +1,8 @@
 export default interface UtilState {
   facilityTypes: object;
   locationTypes: object;
+  countries: any[];
+  states: any;
   externalMappingTypes: object;
   productStores: any[];
   partyRoles: any[];
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index e01a9630..ef957054 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -45,14 +45,14 @@ const actions: ActionTree<UtilState, RootState> = {
       viewSize: 100,
       noConditionFind: 'Y',
       entityName: 'FacilityType',
-      fieldList: ['facilityTypeId', 'description']
+      fieldList: ['facilityTypeId', 'description', 'parentTypeId']
     } as any
 
     try {
       const resp = await UtilService.fetchFacilityTypes(params)
       if (!hasError(resp)) {
         facilityTypes = resp.data.docs.reduce((facilityType: any, type: any) => {
-          facilityType[type.facilityTypeId] = type.description
+          facilityType[type.facilityTypeId] = { description: type.description, parentTypeId: type.parentTypeId }
 
           return facilityType
         }, {})
@@ -239,10 +239,12 @@ const actions: ActionTree<UtilState, RootState> = {
 
   clearUtilState({ commit }) {
     commit(types.UTIL_PRODUCT_STORES_UPDATED, [])
-    commit(types.UTIL_FACILITY_TYPES_UPDATED, {})
+    commit(types.UTIL_FACILITY_TYPES_UPDATED, [])
+    commit(types.UTIL_COUNTRIES_UPDATED, [])
+    commit(types.UTIL_STATES_UPDATED, {})
     commit(types.UTIL_LOCATION_TYPES_UPDATED, {})
     commit(types.UTIL_EXTERNAL_MAPPING_TYPES_UPDATED, {})
-  }
+  },
 }
 
 export default actions;
\ No newline at end of file
diff --git a/src/store/modules/util/mutations.ts b/src/store/modules/util/mutations.ts
index f202487d..450a72e1 100644
--- a/src/store/modules/util/mutations.ts
+++ b/src/store/modules/util/mutations.ts
@@ -12,6 +12,12 @@ const mutations: MutationTree<UtilState> = {
   [types.UTIL_LOCATION_TYPES_UPDATED](state, payload) {
     state.locationTypes = payload
   },
+  [types.UTIL_COUNTRIES_UPDATED](state, payload) {
+    state.countries = payload
+  },
+  [types.UTIL_STATES_UPDATED](state, payload) {
+    state.states[payload.countryGeoId] = payload.states
+  },
   [types.UTIL_EXTERNAL_MAPPING_TYPES_UPDATED](state, payload) {
     state.externalMappingTypes = payload
   },
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2ebc61d5..b0da7257 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -40,4 +40,10 @@ const copyToClipboard = async (value: string, text?: string) => {
   });
 }
 
-export { copyToClipboard, showToast }
+const isValidPassword = (password : string) => {
+  // Regular expression pattern for a valid password
+  const passwordPattern = /^.*(?=.{5,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).*$/;
+  return passwordPattern.test(password);
+}
+
+export { copyToClipboard, isValidPassword, showToast }
diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
new file mode 100644
index 00000000..997f267a
--- /dev/null
+++ b/src/views/AddFacilityAddress.vue
@@ -0,0 +1,255 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/find-facilities" slot="start" />
+        <ion-title>{{ translate("Add Store Address") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>{{ translate('Address') }}</ion-card-title>
+          </ion-card-header>
+          <ion-list>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Address line 1') }} <ion-text color="danger">*</ion-text>
+              </ion-label>
+              <ion-input v-model="formData.address1" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Address line 2') }}
+              </ion-label>
+              <ion-input v-model="formData.address2" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('City') }} <ion-text color="danger">*</ion-text>
+              </ion-label>
+              <ion-input v-model="formData.city" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Zipcode') }}
+              </ion-label>
+              <ion-input v-model="formData.postalCode" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Country') }}
+              </ion-label>
+              <ion-select interface="popover" :placeholder="translate('Select country')" @ionChange="updateState($event)" v-model="formData.countryGeoId">
+                <ion-select-option v-for="country in countries" :key="country.geoId" :value="country.geoId">
+                  {{ country.geoName }}
+                </ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('State') }}
+              </ion-label>
+              <ion-select interface="popover" :placeholder="translate('Select state')" v-model="formData.stateProvinceGeoId">
+                <ion-select-option v-for="state in states[formData.countryGeoId]" :key="state.geoId" :value="state.geoId">
+                  {{ state.geoName }}
+                </ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>{{ translate('Latitude & Longitude') }}</ion-card-title>
+          </ion-card-header>
+          <ion-list>
+            <ion-item>
+              <ion-input v-model="formData.postalCode" :placeholder="translate('Zipcode')" />
+              <ion-button :disabled="!formData.postalCode || !formData.address1 || !formData.city" @click="generateLatLong()" slot="end" fill="outline">
+                <ion-icon slot="end" :icon='colorWandOutline' />
+                {{ translate('Generate') }}
+              </ion-button>
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Latitude') }}
+              </ion-label>
+              <ion-input :disabled="!formData.address1 || !formData.city" v-model="formData.latitude" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Longitude') }}
+              </ion-label>
+              <ion-input :disabled="!formData.address1 || !formData.city" v-model="formData.longitude" />
+            </ion-item>
+          </ion-list>
+        </ion-card>
+        <div class="ion-text-center ion-margin">
+          <ion-button @click="addAddress()">
+            <ion-icon slot="start" :icon="locationOutline"/>
+            {{ translate("Save address") }}
+          </ion-button>
+          <ion-button @click="router.replace(`/add-facility-config/${facilityId}`)" fill="clear">
+            {{ translate("Add address later") }}
+          </ion-button>
+        </div>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { mapGetters, useStore } from "vuex";
+import { useRouter } from 'vue-router'
+import { colorWandOutline, locationOutline } from 'ionicons/icons';
+import { translate } from "@hotwax/dxp-components";
+import { showToast } from "@/utils";
+import logger from "@/logger";
+import { hasError } from "@/adapter";
+import { FacilityService } from "@/services/FacilityService";
+import { UtilService } from "@/services/UtilService";
+
+export default defineComponent({
+  name: "AddFacilityAddress",
+  components: {
+    IonBackButton,
+    IonButton,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonSelect,
+    IonSelectOption,
+    IonText,
+    IonTitle,
+    IonToolbar,
+  },
+  computed: {
+    ...mapGetters({
+      countries: 'util/getCountries',
+      states: 'util/getStates'
+    })
+  },
+  data() {
+    return {
+      formData: {
+        address1: '',
+        address2: '',
+        city: '',
+        postalCode: '',
+        stateProvinceGeoId: '',
+        countryGeoId: '',
+        latitude: '',
+        longitude: '',
+      }
+    }
+  },
+  props: ['facilityId'],
+  async ionViewWillEnter() {
+    await this.store.dispatch('util/fetchCountries', { countryGeoId: "USA" })
+  },
+  methods: {
+    async addAddress() {
+      let resp;
+      if (!this.formData.address1 || !this.formData.city) {
+        showToast("Please fill all the required fields.")
+        return
+      }
+      const payload = {
+        facilityId: this.facilityId,
+        contactMechPurposeTypeId: 'PRIMARY_LOCATION',
+        ...this.formData
+      }
+
+      try {
+        resp = await FacilityService.createFacilityPostalAddress(payload)
+        if (!hasError(resp)) {
+          showToast(translate("Facility address created successfully."))
+          this.router.replace(`/add-facility-config/${this.facilityId}`)
+        } else {
+          throw resp.data
+        }
+      } catch (error) {
+        showToast(translate("Failed to create facility address."))
+        logger.error("Failed to create facility address.", error)
+      }
+    },
+    async generateLatLong() {
+      const payload = {
+        json: {
+          params: {
+            q: `postcode: ${this.formData.postalCode}`
+          }
+        }
+      }
+      try {
+        const resp = await UtilService.generateLatLong(payload)
+        if (!hasError(resp)) {
+          const result = resp.data.response.docs[0]
+          this.formData.latitude = result.latitude
+          this.formData.longitude = result.longitude
+        } else {
+          throw resp.data
+        }
+      } catch (error) {
+        showToast(translate("Failed to generate latitude and longitude."))
+        logger.error("Failed to generate latitude and longitude.", error)
+      }
+    },
+    async updateState(event: CustomEvent) {
+      await this.store.dispatch('util/fetchStates', { geoId: event.detail.value })
+    } 
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+
+    return {
+      colorWandOutline,
+      locationOutline,
+      store,
+      router,
+      translate
+    };
+  }
+});
+</script>
+
+<style scoped>
+@media (min-width: 700px) {
+  main {
+    max-width: 375px;
+    margin: auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/AddFacilityConfig.vue b/src/views/AddFacilityConfig.vue
new file mode 100644
index 00000000..153c0e09
--- /dev/null
+++ b/src/views/AddFacilityConfig.vue
@@ -0,0 +1,444 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/find-facilities" slot="start" />
+        <ion-title>{{ translate("Add Store Configuration") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ translate("Product Stores") }}
+            </ion-card-title>
+            <ion-button @click="selectProductStore()" fill="clear">
+              <ion-icon :icon="addCircleOutline" slot="start" />
+              {{ translate("Add") }}
+            </ion-button>
+          </ion-card-header>
+          <div v-if="selectedProductStores.length">
+            <ion-list>
+              <ion-item v-for="store in selectedProductStores" :key="store.productStoreId">
+                <ion-label>
+                  <h2>{{ getProductStore(store.productStoreId)?.storeName }}</h2>
+                </ion-label>
+                <ion-badge v-if="store.productStoreId === primaryProductStoreId">
+                  {{ translate("primary store") }}
+                </ion-badge>
+                <!-- TODO add logic for make primary -->
+                <ion-button id="product-store-actions-trigger" slot="end" fill="clear" color="medium">
+                  <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+                </ion-button>
+                <!-- inline popover as ProductStorePopover logic is complex and different from the use case here -->
+                <ion-popover trigger="product-store-actions-trigger" showBackdrop="false" dismissOnSelect="true">
+                  <ion-content>
+                    <ion-list>
+                      <ion-list-header>{{ getProductStore(store.productStoreId).storeName }}</ion-list-header>
+                      <ion-item button @click="updatePrimaryProductStoreId(store.productStoreId)">
+                        {{ translate("Primary") }}
+                        <ion-icon slot="end" :color="store.productStoreId === primaryProductStoreId ? 'warning' : ''" :icon="store.productStoreId === primaryProductStoreId ? star : starOutline" />
+                      </ion-item>
+                      <ion-item button lines="none" @click="removeProductStore(store.productStoreId)">
+                        {{ translate("Unlink") }}
+                        <ion-icon slot="end" :icon="removeCircleOutline" />
+                      </ion-item>
+                    </ion-list>
+                  </ion-content>
+                </ion-popover>
+              </ion-item>
+            </ion-list>
+          </div>
+          <div v-else class="empty-state">
+            <p>{{ translate("No product stores added.") }}</p>
+          </div>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ translate("Fulfillment Settings") }}
+            </ion-card-title>
+          </ion-card-header>
+          <ion-list>
+            <ion-item>
+              <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
+              <ion-toggle :value="fulfillmentSettings.FAC_GRP" slot="end" @click="updateFulfillmentSettings($event, 'FAC_GRP')"/>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
+              <ion-toggle :value="fulfillmentSettings.OMS_FULFILLMENT" slot="end" @click="updateFulfillmentSettings($event, 'OMS_FULFILLMENT')"/>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ translate("Allow pickup") }}</ion-label>
+              <ion-toggle :value="fulfillmentSettings.PICKUP" slot="end" @click="updateFulfillmentSettings($event, 'PICKUP')"/>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ translate("Create login credentials") }}</ion-label>
+              <ion-toggle :value="createLoginCreds" @click="createLoginCreds = !createLoginCreds" slot="end" />
+            </ion-item>
+            <ion-item v-if="createLoginCreds" ref="password">
+              <ion-label position="floating">
+                {{ translate('Password') }} <ion-text color="danger">*</ion-text>
+              </ion-label>
+              <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password"/>
+              <ion-note slot="helper">
+                {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
+              </ion-note>
+            </ion-item>
+          </ion-list>
+        </ion-card>
+
+        <div class="ion-text-center ion-margin">
+          <ion-button @click="saveStoreConfig()">
+            <ion-icon slot="start" :icon="locationOutline"/>
+            {{ translate("Save configurations") }}
+          </ion-button>
+          <ion-button @click="router.replace(`/facility-details/${facilityId}`)" fill="clear">
+            {{ translate("Configure settings later") }}
+          </ion-button>
+        </div>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonBadge,
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonPage,
+  IonPopover,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  IonToggle,
+  modalController,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { mapGetters, useStore } from "vuex";
+import { useRouter } from 'vue-router'
+import {
+  addCircleOutline,
+  ellipsisVerticalOutline,
+  locationOutline,
+  removeCircleOutline,
+  star,
+  starOutline
+} from 'ionicons/icons';
+import { translate } from "@hotwax/dxp-components";
+import { showToast } from "@/utils";
+import { hasError } from "@/adapter";
+import logger from "@/logger";
+import { FacilityService } from "@/services/FacilityService";
+import { isValidPassword } from '@/utils'
+import { UserService } from "@/services/UserService";
+import SelectProductStoreModal from '@/components/SelectProductStoreModal.vue';
+import { DateTime } from "luxon";
+
+export default defineComponent({
+  name: "AddFacilityConfig",
+  components: {
+    IonBackButton,
+    IonBadge,
+    IonButton,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonNote,
+    IonPage,
+    IonPopover,
+    IonText,
+    IonTitle,
+    IonToggle,
+    IonToolbar,
+  },
+  computed: {
+    ...mapGetters({
+      current: 'facility/getCurrent',
+      getProductStore: 'util/getProductStore',
+    })
+  },
+  data() {
+    return {
+      fulfillmentSettings: {
+        PICKUP: false,
+        FAC_GRP: false,
+        OMS_FULFILLMENT: false
+      } as any,
+      createLoginCreds: false as any,
+      password: '',
+      selectedProductStores: [] as any,
+      primaryProductStoreId: ''
+    }
+  },
+  props: ['facilityId'],
+  async ionViewWillEnter() {
+    await this.store.dispatch('facility/fetchCurrentFacility', { facilityId: this.facilityId })
+    await this.store.dispatch('util/fetchProductStores')
+  },
+  methods: {
+    async updateFulfillmentSettings(event: any, facilityGroupId: string) {
+      // Using `not` as the click event returns the current status of toggle,
+      // but on click we want to change the toggle status
+      this.fulfillmentSettings[facilityGroupId] = !event.target.checked
+    },
+    async saveFulfillmentSettings() {
+      const responses = []
+      if (this.fulfillmentSettings.PICKUP) {
+        const resp = await FacilityService.addFacilityToGroup({
+          "facilityId": this.facilityId,
+          "facilityGroupId": 'PICKUP'
+        })
+        responses.push(resp)
+      }
+
+      if (this.fulfillmentSettings.FAC_GRP) {
+        const resp = await FacilityService.addFacilityToGroup({
+          "facilityId": this.facilityId,
+          "facilityGroupId": 'FAC_GRP'
+        })
+        responses.push(resp)
+      }
+
+      if (this.fulfillmentSettings.OMS_FULFILLMENT) {
+        const resp = await FacilityService.addFacilityToGroup({
+          "facilityId": this.facilityId,
+          "facilityGroupId": 'OMS_FULFILLMENT'
+        })
+        responses.push(resp)
+      }
+
+      const hasFailedResponse = responses.some((response: any) => hasError(response))
+      if (hasFailedResponse) {
+        throw { message: translate('Failed to update some fulfillment settings.') }
+      }
+    },
+    async createFacilityUser() {
+      try {
+        const payload = {
+          "groupName": this.current.facilityName,
+          "facilityId": this.facilityId,
+          "loginPassword": this.password,
+          "partyTypeId": "PARTY_GROUP",
+          "partyIdFrom": "COMPANY",
+          "roleTypeIdFrom": "INTERNAL_ORGANIZATIO", // not a typo
+          "roleTypeIdTo": "APPLICATION_USER",
+          "partyRelationshipTypeId": "EMPLOYMENT"
+        }
+
+        const resp = await UserService.createFacilityUser(payload);
+        if (!hasError(resp)) {
+          const partyId = resp.data.partyId;
+          await UserService.addPartyToFacility({
+            "partyId": partyId,
+            "facilityId": this.facilityId,
+            "roleTypeId": "WAREHOUSE_MANAGER"
+          })
+        } else {
+          throw { message: translate('Failed to create facility login credentials.') }
+        }
+
+        return Promise.resolve(resp.data)
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    },
+    async saveStoreConfig() {
+      if (this.createLoginCreds && !this.password) {
+        showToast(translate('Please provide a password.'))
+        return
+      }
+
+      try {
+        if (Object.values(this.fulfillmentSettings).includes(true)) {
+          await this.saveFulfillmentSettings()
+        }
+
+        if (this.createLoginCreds) {
+          await this.createFacilityUser()
+        }
+
+        if (this.selectedProductStores) {
+          await this.addProductStoresToFacility()
+          if (this.primaryProductStoreId) {
+            await this.makeProductStorePrimary()
+          }
+        }
+
+        showToast(translate("Facility configurations created successfully."))
+        this.$router.replace({ path: `/facility-details/${this.facilityId}` })
+      } catch (error: any) {
+        showToast(error.message)
+        logger.error(error.message)
+      }
+    },
+    async addProductStoresToFacility() {
+      const responses = await Promise.allSettled(this.selectedProductStores
+        .map(async (payload: any) => await FacilityService.createProductStoreFacility({
+          productStoreId: payload.productStoreId,
+          facilityId: this.facilityId,
+          fromDate: DateTime.now().toMillis(),
+        }))
+      )
+
+      const hasFailedResponse = responses.some((response: any) => response.status === 'rejected')
+      if (hasFailedResponse) {
+        throw { message: translate('Failed to add some product stores to the facility.') }
+      }
+    },
+    async fetchFacilityGroup(productStoreId: string) {
+      let facilityGroupId;
+      try {
+        const resp = await FacilityService.fetchFacilityGroup({
+          inputFields: {
+            facilityGroupId: productStoreId
+          },
+          entityName: 'FacilityGroup',
+          viewSize: 100
+        })
+        if (!hasError(resp)) {
+          facilityGroupId = resp.data.docs[0].facilityGroupId
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error(err)
+      }
+      return facilityGroupId
+    },
+    async makeProductStorePrimary() {
+      try {
+        let resp = await FacilityService.fetchFacilityGroup({
+          inputFields: {
+            facilityGroupId: this.primaryProductStoreId
+          },
+          entityName: 'FacilityGroup',
+          viewSize: 100
+        })
+
+        // count check to handle only errors and not 404 (when facility group doesn't exist)
+        // as we create it below in case it doesn't exist
+        if (hasError(resp) && resp?.data?.count !== 0) {
+          throw { message: translate('Failed to make product store as primary.') }
+        }
+
+        let facilityGroupId = resp.data.docs[0].facilityGroupId
+        if (!facilityGroupId) {
+          resp = await FacilityService.createFacilityGroup({
+            facilityGroupTypeId: 'FEATURING',
+            facilityGroupName: this.getProductStore(this.primaryProductStoreId).storeName,
+            facilityGroupId: this.primaryProductStoreId
+          })
+          facilityGroupId = resp.data.facilityGroupId
+        }
+
+        if (facilityGroupId) {
+          resp = await FacilityService.addFacilityToGroup({
+            facilityId: this.facilityId,
+            facilityGroupId: facilityGroupId
+          })
+          if (hasError(resp)) {
+            throw { message: translate('Failed to make product store as primary.') }
+          }
+          return Promise.resolve(resp.data)
+        } else {
+          throw { message: translate('Failed to make product store as primary.') }
+        }
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+    async selectProductStore() {
+      const selectProductStoreModal = await modalController.create({
+        component: SelectProductStoreModal,
+        componentProps: {
+          facilityId: this.facilityId,
+          selectedProductStores: this.selectedProductStores
+        }
+      })
+
+      selectProductStoreModal.onDidDismiss().then(async(result: any) => {
+        if (result.data && result.data.value) {
+          this.selectedProductStores = result.data.value.selectedProductStores
+        }
+      })
+
+      selectProductStoreModal.present()
+    },
+    removeProductStore(productStoreId: string) {
+      this.selectedProductStores = this.selectedProductStores.filter((store: any) => store.productStoreId !== productStoreId)
+    },
+    updatePrimaryProductStoreId(productStoreId: string) {
+      productStoreId === this.primaryProductStoreId ? (this.primaryProductStoreId = '') : (this.primaryProductStoreId = productStoreId)
+    },
+    validatePassword(event: any) {
+      const value = event.target.value;
+      (this as any).$refs.password.$el.classList.remove('ion-valid');
+      (this as any).$refs.password.$el.classList.remove('ion-invalid');
+
+      if (value === '') return;
+
+      isValidPassword(value)
+        ? (this as any).$refs.password.$el.classList.add('ion-valid')
+        : (this as any).$refs.password.$el.classList.add('ion-invalid');
+    },
+    markPasswordTouched() {
+      (this as any).$refs.password.$el.classList.add('ion-touched');
+    },
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+
+    return {
+      addCircleOutline,
+      ellipsisVerticalOutline,
+      locationOutline,
+      removeCircleOutline,
+      router,
+      star,
+      starOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>
+
+<style scoped>
+ion-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media (min-width: 700px) {
+  main {
+    max-width: 375px;
+    margin: auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/CreateFacility.vue b/src/views/CreateFacility.vue
new file mode 100644
index 00000000..9e2b0981
--- /dev/null
+++ b/src/views/CreateFacility.vue
@@ -0,0 +1,208 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/find-facilities" slot="start" />
+        <ion-title>{{ translate("Add Store") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>{{ translate('Setup Store') }}</ion-card-title>
+          </ion-card-header>
+          <ion-list>
+            <ion-item lines="none">
+              <ion-label>{{ translate("Type") }}</ion-label>
+              <ion-select interface="popover" :value="selectedFacilityTypeId">
+                <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypesByParentTypeId">
+                  {{ type.description }}
+                </ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Name') }} <ion-text color="danger">*</ion-text>
+              </ion-label>
+              <ion-input clear-input @ionBlur="setFacilityId($event)" v-model="formData.facilityName" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('Internal ID') }}
+              </ion-label>
+              <ion-input clear-input v-model="formData.facilityId" />
+            </ion-item>
+            <ion-item>
+              <ion-label position="floating">
+                {{ translate('External ID') }}
+              </ion-label>
+              <ion-input clear-input v-model="formData.externalId" />
+            </ion-item>
+          </ion-list>
+        </ion-card>
+
+        <div class="ion-text-center ion-margin">
+          <ion-button @click="createFacility()">
+            <ion-icon slot="start" :icon="addOutline"/>
+            {{ translate("Create store") }}
+          </ion-button>
+        </div>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { mapGetters, useStore } from "vuex";
+import { useRouter } from 'vue-router'
+import { addOutline } from 'ionicons/icons';
+import { translate } from "@hotwax/dxp-components";
+import { showToast } from "@/utils";
+import { FacilityService } from "@/services/FacilityService";
+import { hasError } from "@/adapter";
+import logger from "@/logger";
+
+export default defineComponent({
+  name: "CreateFacility",
+  components: {
+    IonBackButton,
+    IonButton,
+    IonCard,
+    IonCardTitle,
+    IonCardHeader,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonText,
+    IonTitle,
+    IonToolbar,
+  },
+  computed: {
+    ...mapGetters({
+      facilityTypes: "util/getFacilityTypes"
+    })
+  },
+  data() {
+    return {
+      formData: {
+        facilityName: '',
+        facilityId: '',
+        externalId: '',
+      },
+      selectedFacilityTypeId: '' as any,
+      facilityTypesByParentTypeId: {} as any
+    }
+  },
+  async ionViewWillEnter() {
+    this.clearFormData()
+    await Promise.all([
+      this.store.dispatch('facility/updateCurrentFacility', {}),
+      this.store.dispatch('util/fetchFacilityTypes', {
+        parentTypeId: 'VIRTUAL_FACILITY',
+        parentTypeId_op: 'notEqual',
+        facilityTypeId: 'VIRTUAL_FACILITY',
+        facilityTypeId_op: 'notEqual'
+      })
+    ])
+    this.facilityTypesByParentTypeId = this.getFacilityTypesByParentTypeId(this.$route.query.type as string)
+    this.selectedFacilityTypeId = Object.keys(this.facilityTypesByParentTypeId)[0]
+  },
+  methods: {
+    clearFormData() {
+      this.formData = {
+        facilityName: '',
+        facilityId: '',
+        externalId: '',
+      }
+    },
+    setFacilityId(event: any) {
+      this.formData.facilityId = event.target.value.trimEnd().trimStart().toUpperCase().split(' ').join('_');
+    },
+    async createFacility() {
+      if (!this.formData.facilityName) {
+        showToast(translate('Facility name is required.'))
+        return
+      }
+
+      // In case the user does not lose focus from the facility name input
+      // and click on create the button, we need to set the internal id manually
+      if (!this.formData.facilityId) {
+        this.formData.facilityId = this.formData.facilityName.trimEnd().trimStart().toUpperCase().split(' ').join('_');
+      }
+
+      try {
+        const payload = {
+          ...this.formData,
+          facilityTypeId: this.selectedFacilityTypeId,
+          ownerPartyId: "COMPANY"
+        }
+
+        const resp = await FacilityService.createFacility(payload);
+        if (!hasError(resp)) {
+          const { facilityId } = resp.data
+          showToast(translate("Facility created successfully."))
+          this.router.replace(`/add-facility-address/${facilityId}`)
+        } else {
+          throw resp.data;
+        }
+      } catch (error) {
+        logger.error(error)
+        showToast(translate('Failed to create facility.'))
+      }
+    },
+    getFacilityTypesByParentTypeId(parentTypeId: string) {
+      return parentTypeId ? Object.keys(this.facilityTypes).reduce((facilityTypesByParentTypeId: any, facilityTypeId: string) => {
+        if (this.facilityTypes[facilityTypeId].parentTypeId === parentTypeId) {
+          facilityTypesByParentTypeId[facilityTypeId] = this.facilityTypes[facilityTypeId]
+        }
+        return facilityTypesByParentTypeId
+      }, {}) : this.facilityTypes
+    }
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+
+    return {
+      addOutline,
+      store,
+      router,
+      translate
+    };
+  }
+});
+</script>
+
+<style scoped>
+@media (min-width: 700px) {
+  main {
+    max-width: 375px;
+    margin: auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index 0c53f80a..fb8f836b 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -35,7 +35,9 @@
               <ion-label>{{ translate("Type") }}</ion-label>
               <ion-select interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
                 <ion-select-option value="">{{ translate("All") }}</ion-select-option>
-                <ion-select-option :value="facilityType" :key="facilityType" v-for="(description, facilityType) in facilityTypes">{{ description }}</ion-select-option>
+                <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
+                  {{ type.description }}
+                </ion-select-option>
               </ion-select>
             </ion-item>
           </ion-list>
@@ -46,7 +48,7 @@
             <ion-item lines="none">
               <ion-icon slot="start" :icon="storefrontOutline" />
               <ion-label>
-                <p class="overline">{{ facility.facilityTypeId ? facilityTypes[facility.facilityTypeId] ? facilityTypes[facility.facilityTypeId] : facilityTypes.facilityTypeId : '' }}</p>
+                <p class="overline">{{ facility.facilityTypeId ? facilityTypes[facility.facilityTypeId] ? facilityTypes[facility.facilityTypeId].description : facilityTypes.facilityTypeId : '' }}</p>
                 {{ facility.facilityName }}
                 <p>{{ facility.facilityId }}</p>
               </ion-label>
@@ -82,6 +84,20 @@
         </main>
       </div>
 
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button>
+          <ion-icon :icon="addOutline" />
+        </ion-fab-button>
+        <ion-fab-list side="top">
+          <ion-fab-button @click="router.push('/create-facility?type=DISTRIBUTION_CENTER')">
+            <ion-icon :icon="businessOutline" />
+          </ion-fab-button>
+          <ion-fab-button @click="router.push('/create-facility?type=PHYSICAL_STORE')">
+            <ion-icon :icon="storefrontOutline" />
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+
       <ion-infinite-scroll
         @ionInfinite="loadMoreFacilities($event)"
         threshold="100px"
@@ -102,6 +118,9 @@ import {
   IonButtons,
   IonChip,
   IonContent,
+  IonFab,
+  IonFabButton,
+  IonFabList,
   IonHeader,
   IonIcon,
   IonInfiniteScroll,
@@ -120,6 +139,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import {
+  addOutline,
   businessOutline,
   filterOutline,
   globeOutline,
@@ -146,6 +166,9 @@ export default defineComponent({
     IonButtons,
     IonChip,
     IonContent,
+    IonFab,
+    IonFabButton,
+    IonFabList,
     IonHeader,
     IonIcon,
     IonInfiniteScroll,
@@ -243,6 +266,7 @@ export default defineComponent({
     const store = useStore();
 
     return {
+      addOutline,
       businessOutline,
       filterOutline,
       globeOutline,