diff --git a/.env.example b/.env.example
index aa97581d..cfcf6146 100644
--- a/.env.example
+++ b/.env.example
@@ -9,5 +9,5 @@ VUE_APP_PERMISSION_ID=
 VUE_APP_ALIAS={}
 VUE_APP_DEFAULT_ALIAS=""
 VUE_APP_DEFAULT_LOG_LEVEL="error"
-VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
 VUE_APP_CRON_EXPRESSIONS={"Every 5 minutes":"0 */5 * ? * *","Every 15 minutes":"0 */15 * ? * *","Every 30 minutes":"0 */30 * ? * *","Hourly":"0 0 * ? * *","Every six hours":"0 0 */6 ? * *","Every day at midnight":"0 0 0 * * ?"}
+VUE_APP_LOGIN_URL="https://launchpad.hotwax.io/login"
diff --git a/.firebaserc b/.firebaserc
index 4ae76f8c..3796fa5d 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,23 +1,23 @@
 {
   "projects": {
-    "default": "hotwax-digital-commerce",
+    "default": "hotwax-digital-commerce-uat",
     "production": "digital-commerce-71eb8"
   },
   "targets": {
-    "hotwax-digital-commerce": {
+    "hotwax-digital-commerce-uat": {
       "hosting": {
         "dev": [
-          "dev-threshold-management"
+          "hotwax-atp-dev"
         ],
         "uat": [
-          "threshold-management-uat"
+          "hotwax-atp-uat"
         ]
       }
     },
     "digital-commerce-71eb8": {
       "hosting": {
         "prod": [
-          "threshold-management"
+          "hotwax-atp"
         ]
       }
     }
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index b9ef0fbb..5189d59b 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,7 @@
 ### Related Issues
  <!--  Put related issue number which this PR is closing. For example #123 -->
 
- Closes #
+ #
 
  ### Short Description and Why It's Useful
  <!-- Describe in a few words what is this Pull Request changing and why it's useful -->
@@ -11,10 +11,7 @@
  <!-- If you made any changes in the UI layer, please provide before/after screenshots -->
 
 
- **IMPORTANT NOTICE** - Remember to add changelog entry
-
-
  ### Contribution and Currently Important Rules Acceptance
  <!-- Please get familiar with following info -->
 
- - [ ] I read and followed [contribution rules](https://github.com/hotwax/threshold-management#contribution-guideline)
\ No newline at end of file
+ - [ ] I read and followed [contribution rules](https://github.com/hotwax/available-to-promise#contribution-guideline)
\ No newline at end of file
diff --git a/README.md b/README.md
index b5375c3d..9d633bd1 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-Threshold Management App
+Available to Promise App
 # Prerequisite
 Ionic CLI - If you don't have the ionic CLI installed refer [official documentation](https://ionicframework.com/docs/intro/cli) for the installation instructions.
 
 
 # Build Notes (Users)
 
-1. Download the app from [release](https://github.com/hotwax/threshold-management/releases) page and extract it.
+1. Download the app from [release](https://github.com/hotwax/available-to-promise/releases) page and extract it.
 2. Go to the app directory.
 3. Run following command to download dependencies  
     `npm i`
@@ -16,7 +16,7 @@ Ionic CLI - If you don't have the ionic CLI installed refer [official documentat
 # Build Notes (Contributors)
 
 1. Open a Terminal window
-2. Clone app using the command: `git clone https://github.com/hotwax/threshold-management.git <repository-name>`
+2. Clone app using the command: `git clone https://github.com/hotwax/available-to-promise.git <repository-name>`
 3. Go to the <repository-name> directory using command: `cd <repository-name>`
 4. Run following command to download dependencies
     `npm i`
@@ -27,11 +27,11 @@ Ionic CLI - If you don't have the ionic CLI installed refer [official documentat
 # Contribution Guideline
 
 1. Fork the repository and clone it locally from the `main` branch. Before starting your work make sure it's up to date with current `main` branch.
-2. Pick an issue from [here](https://github.com/hotwax/threshold-management/issues). Write in the issue comment that you want to pick it, if you can't assign yourself. **Please stay assigned to one issue at a time to not block others**.
-3. Create a branch for your edits. Use the following branch naming conventions: **threshold-management/issue-number**.
+2. Pick an issue from [here](https://github.com/hotwax/available-to-promise/issues). Write in the issue comment that you want to pick it, if you can't assign yourself. **Please stay assigned to one issue at a time to not block others**.
+3. Create a branch for your edits. Use the following branch naming conventions: **available-to-promise/issue-number**.
 4. Please add issue number to your commit message.
 5. Propose a Pull Request to `main` branch containing issue number and issue title.
-6. Use [Pull Request template](https://github.com/hotwax/threshold-management/blob/main/.github/PULL_REQUEST_TEMPLATE.md) (it's automatically added to each PR) and fill as much fields as possible to describe your solution.
+6. Use [Pull Request template](https://github.com/hotwax/available-to-promise/blob/main/.github/PULL_REQUEST_TEMPLATE.md) (it's automatically added to each PR) and fill as much fields as possible to describe your solution.
 7. Reference any relevant issues or other information in your PR.
 8. Wait for review and adjust your PR according to it.
 9. Congrats! Your PR should now be merged in!
@@ -55,4 +55,4 @@ If you have any questions or ideas feel free to join our <a href="https://discor
     
 # The license
 
-Threshold Management app is completely free and released under the Apache v2.0 License. Check <a href="https://github.com/hotwax/threshold-management/blob/main/LICENSE" target="_blank">LICENSE</a> for more details.
+Available to Promise app is completely free and released under the Apache v2.0 License. Check <a href="https://github.com/hotwax/available-to-promise/blob/main/LICENSE" target="_blank">LICENSE</a> for more details.
diff --git a/capacitor.config.json b/capacitor.config.json
index 028deb7d..4e62e57e 100644
--- a/capacitor.config.json
+++ b/capacitor.config.json
@@ -1,6 +1,6 @@
 {
-  "appId": "co.hotwax.thresholdmanagement",
-  "appName": "Threshold Management",
+  "appId": "co.hotwax.availabletopromise",
+  "appName": "Available to Promise",
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "dist",
diff --git a/manifest.json b/manifest.json
index 14851ddb..4d86cec1 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "HotWax Commerce Threshold Management",
-    "short_name": "Threshold Management",
+    "name": "HotWax Commerce Available to Promise",
+    "short_name": "Available to Promise",
     "theme_color": "#FFFFFF",
     "icons": [{
             "src": "public/img/icons/favicon-16x16.png",
diff --git a/package-lock.json b/package-lock.json
index 9faea759..a6ba0c70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "threshold-management",
-  "version": "2.8.0",
+  "name": "available-to-promise",
+  "version": "3.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "threshold-management",
-      "version": "2.8.0",
+      "name": "available-to-promise",
+      "version": "3.0.2",
       "dependencies": {
         "@capacitor/android": "^2.4.7",
         "@capacitor/core": "^2.4.7",
@@ -16,6 +16,7 @@
         "@hotwax/app-version-info": "^1.0.0",
         "@hotwax/apps-theme": "^1.2.6",
         "@hotwax/dxp-components": "^1.13.0",
+        "@hotwax/oms-api": "^1.14.0",
         "@ionic/core": "7.6.0",
         "@ionic/vue": "7.6.0",
         "@ionic/vue-router": "7.6.0",
@@ -9665,20 +9666,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
diff --git a/package.json b/package.json
index e11a3758..399facbe 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "threshold-management",
-  "version": "2.8.0",
+  "name": "available-to-promise",
+  "version": "3.0.2",
   "private": true,
-  "description": "Threshold Management",
+  "description": "Available to Promise",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -19,6 +19,7 @@
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.13.0",
+    "@hotwax/oms-api": "^1.14.0",
     "@ionic/core": "7.6.0",
     "@ionic/vue": "7.6.0",
     "@ionic/vue-router": "7.6.0",
diff --git a/public/index.html b/public/index.html
index f8506117..fe8ea8d3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Threshold Management - HotWax Commerce</title>
+    <title>Available to Promise - HotWax Commerce</title>
 
     <base href="/" />
 
diff --git a/src/App.vue b/src/App.vue
index c0a04213..0634a9da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,16 +9,35 @@
 
 <script setup lang="ts">
 import { IonApp, IonRouterOutlet, IonSplitPane, loadingController } from '@ionic/vue';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
 import emitter from "@/event-bus"
 import { Settings } from 'luxon'
 import Menu from '@/components/Menu.vue';
 import store from "./store";
 import { translate } from '@hotwax/dxp-components';
+import { initialise, resetConfig } from '@/adapter'
 
 
-const loader = ref(null) as any
 const userProfile = computed(() => store.getters["user/getUserProfile"])
+const userToken = computed(() => store.getters["user/getUserToken"])
+const instanceUrl = computed(() => store.getters["user/getInstanceUrl"])
+
+const loader = ref(null) as any
+const maxAge = process.env.VUE_APP_CACHE_MAX_AGE ? parseInt(process.env.VUE_APP_CACHE_MAX_AGE) : 0
+
+initialise({
+  token: userToken.value,
+  instanceUrl: instanceUrl.value,
+  cacheMaxAge: maxAge,
+  events: {
+    responseError: () => {
+      setTimeout(() => dismissLoader(), 100);
+    },
+    queueTask: (payload: any) => {
+      emitter.emit("queueTask", payload);
+    }
+  }
+})
 
 async function presentLoader(options = { message: '', backdropDismiss: true }) {
   // When having a custom message remove already existing loader
@@ -42,16 +61,12 @@ function dismissLoader() {
   }
 }
 
-onMounted(async () => {
-  loader.value = await loadingController
-    .create({
-      message: translate("Click the backdrop to dismiss."),
-      translucent: true,
-      backdropDismiss: true
-    });
+onBeforeMount(() => {
   emitter.on('presentLoader', presentLoader);
   emitter.on('dismissLoader', dismissLoader);
+})
 
+onMounted(async () => {
   // Handles case when user resumes or reloads the app
   // Luxon timezzone should be set with the user's selected timezone
   if (userProfile.value && userProfile.value.timeZone) {
@@ -62,6 +77,8 @@ onMounted(async () => {
 onUnmounted(() => {
   emitter.off("presentLoader", presentLoader);
   emitter.off("dismissLoader", dismissLoader);
+
+  resetConfig()
 })
 </script>
 <style>
diff --git a/src/adapter/index.ts b/src/adapter/index.ts
new file mode 100644
index 00000000..fdb8d301
--- /dev/null
+++ b/src/adapter/index.ts
@@ -0,0 +1,15 @@
+import { api, client, getConfig, getProductIdentificationPref, getUserFacilities, initialise, logout, resetConfig, setProductIdentificationPref, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+
+export {
+  api,
+  client,
+  getConfig,
+  getProductIdentificationPref,
+  getUserFacilities,
+  initialise,
+  logout,
+  resetConfig,
+  setProductIdentificationPref,
+  updateInstanceUrl,
+  updateToken
+}
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
index dbe7b402..84939cfe 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,7 +4,6 @@ import OfflineHelper from "@/offline-helper"
 import emitter from "@/event-bus"
 import store from "@/store";
 import { StatusCodes } from "http-status-codes";
-import router from "@/router"
 
 axios.interceptors.request.use((config: any) => {
   // TODO: pass csrf token
@@ -46,7 +45,9 @@ axios.interceptors.response.use(function (response: any) {
     const { status } = error.response;
     if (status === StatusCodes.UNAUTHORIZED) {
       store.dispatch("user/logout");
-      router.push("/login")
+      const redirectUrl = window.location.origin + '/login';
+      // Explicitly passing isLoggedOut as in case of maarg apps we need to call the logout api in launchpad
+      window.location.href = `${process.env.VUE_APP_LOGIN_URL}?redirectUrl=${redirectUrl}&isLoggedOut=true`;
     }
   }
   // Any status codes that falls outside the range of 2xx cause this function to trigger
@@ -86,7 +87,7 @@ const api = async (customConfig: any) => {
   }
 
   const baseURL = store.getters["user/getInstanceUrl"];
-  if (baseURL) config.baseURL = `https://${baseURL}.hotwax.io/rest/s1/available-to-promise/`;
+  if (baseURL) config.baseURL = baseURL.startsWith('http') ? baseURL.includes('/rest/s1/available-to-promise') ? baseURL : `${baseURL}/rest/s1/available-to-promise/` : `https://${baseURL}.hotwax.io/rest/s1/available-to-promise/`;
   if(customConfig.cache) config.adapter = axiosCache.adapter;
   const networkStatus =  await OfflineHelper.getNetworkStatus();
   if (customConfig.queue && !networkStatus.connected) {
diff --git a/src/components/AddProductFacilityGroupModal.vue b/src/components/AddProductFacilityGroupModal.vue
index a1e6facf..8406881f 100644
--- a/src/components/AddProductFacilityGroupModal.vue
+++ b/src/components/AddProductFacilityGroupModal.vue
@@ -7,15 +7,19 @@
         </ion-button>
       </ion-buttons>
       <ion-title>{{ type === "included" ? translate("Include facility groups") : translate("Exclude facility groups") }}</ion-title>
+      <ion-buttons slot="end">
+        <!-- Clear button should be disabled till no group is selected -->
+        <ion-button fill="clear" color="danger" :disabled="!selectedGroups.length" @click="selectedGroups = []">{{ translate("Clear All") }}</ion-button>
+      </ion-buttons>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list v-if="facilityGroups.length">
-      <ion-item v-for="group in facilityGroups" :key="group.facilityGroupId"  @click="updateSelectedGroups(group)">
+      <ion-item v-for="group in facilityGroups" :key="group.facilityGroupId"  @click="!isAlreadyApplied(group.facilityGroupId) ? updateSelectedGroups(group) : null">
         <ion-label v-if="isAlreadyApplied(group.facilityGroupId)">{{ group.facilityGroupName }}</ion-label>
         <ion-checkbox v-if="!isAlreadyApplied(group.facilityGroupId)" :checked="isAlreadySelected(group.facilityGroupId)">
-          {{ group.facilityGroupName }}
+          {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
         </ion-checkbox>
         <ion-note v-else slot="end" color="danger">{{ type === 'included' ? translate("excluded") : translate("included") }}</ion-note>
       </ion-item>
diff --git a/src/components/AddProductFiltersModal.vue b/src/components/AddProductFiltersModal.vue
index 6df94c87..2feb3857 100644
--- a/src/components/AddProductFiltersModal.vue
+++ b/src/components/AddProductFiltersModal.vue
@@ -8,7 +8,8 @@
       </ion-buttons>
       <ion-title>{{ type === "included" ? translate("Include", { label }) : translate("Exclude", { label }) }}</ion-title>
       <ion-buttons slot="end">
-        <ion-button fill="clear" color="danger" @click="selectedValues = []">{{ translate("Clear All") }}</ion-button>
+        <!-- Clear all button should be disabled if no facetOptions are available to select or if no filter is selected. -->
+        <ion-button fill="clear" color="danger" :disabled="!facetOptions.length || !selectedValues.length" @click="selectedValues = []">{{ translate("Clear All") }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
@@ -16,8 +17,8 @@
   <ion-content>
     <ion-searchbar :placeholder="translate('Search', { label })" v-model="queryString" @keyup.enter="search()"/>
 
-    <ion-list>
-      <ion-item v-for="option in facetOptions" :key="option.id"  @click="updateSelectedValues(option.id)">
+    <ion-list v-if="facetOptions.length">
+      <ion-item v-for="option in facetOptions" :key="option.id"  @click="!isAlreadyApplied(option.id) ? updateSelectedValues(option.id) : null">
         <ion-label v-if="isAlreadyApplied(option.id)">{{ option.label }}</ion-label>
         <ion-checkbox v-if="!isAlreadyApplied(option.id)" :checked="selectedValues.includes(option.id)">
           {{ option.label }}
@@ -25,6 +26,12 @@
         <ion-note v-else slot="end" color="danger">{{ type === 'included' ? translate("excluded") : translate("included") }}</ion-note>
       </ion-item>
     </ion-list>
+    <div class="empty-state" v-else-if="!queryString">
+      <p>{{ translate("Search for to find results", { label }) }}</p>
+    </div>
+    <div class="empty-state" v-else>
+      <p>{{ translate("No result found for", { label: queryString }) }}</p>
+    </div>
 
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button @click="saveFilters()">
@@ -91,7 +98,7 @@ function search() {
 async function getFilters(vSize?: any, vIndex?: any) {
   const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
   const viewIndex = vIndex ? vIndex : 0;
-
+  
   const payload = {
     facetToSelect: props.facetToSelect,
     docType: 'PRODUCT',
diff --git a/src/components/CreateGroupModal.vue b/src/components/CreateGroupModal.vue
index 12ef19cc..60b1387f 100644
--- a/src/components/CreateGroupModal.vue
+++ b/src/components/CreateGroupModal.vue
@@ -6,7 +6,7 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ translate("Create group") }}</ion-title>
+      <ion-title>{{ translate("Create channel group") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
@@ -21,7 +21,7 @@
         <ion-input :label="translate('ID')" labelPlacement="floating" ref="facilityGroupId" v-model="formData.facilityGroupId" @ionInput="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')" />
       </ion-item>
       <ion-item>
-        <ion-textarea :label="translate('Description')" v-model="formData.description" labelPlacement="floating" />
+        <ion-textarea :label="translate('Description')" v-model="formData.description" labelPlacement="floating" :maxlength="255" />
       </ion-item>
       <ion-item>
         <ion-label>{{ translate("Product store") }}</ion-label>
@@ -73,7 +73,7 @@ function closeModal() {
 
 async function createGroup() {
   if (!formData.value.facilityGroupName?.trim()) {
-    showToast(translate("Please fill in all the required fields"))
+    showToast(translate("Please fill in all the required fields."))
     return;
   }
 
@@ -113,6 +113,10 @@ async function createGroup() {
           ...selectedConfigFacility,
           facilityId: resp.data.facilityId
         }
+
+        // Associating the config facility with the product store.
+        resp = await ChannelService.updateFacilityAssociationWithProductStore({productStoreId: eComStore.value.productStoreId, facilityId: selectedConfigFacility.facilityId})
+        if(hasError(resp)) throw resp.data;
       } else {
         throw resp.data;
       }
@@ -120,10 +124,6 @@ async function createGroup() {
       selectedConfigFacility = configFacilities.value.find((facility: any) => facility.facilityId === selectedConfigFacilityId.value)
     }
 
-    // Associating the config facility with the product store.
-    resp = await ChannelService.updateFacilityAssociationWithProductStore({productStoreId: eComStore.value.productStoreId, facilityId: selectedConfigFacility.facilityId})
-    if(hasError(resp)) throw resp.data;
-
     // Associating the facility group with the product store.
     resp = await ChannelService.updateGroupAssociationWithProductStore({productStoreId: eComStore.value.productStoreId, facilityGroupId: formData.value.facilityGroupId})
     if(hasError(resp)) throw resp.data;
@@ -136,9 +136,9 @@ async function createGroup() {
     await store.dispatch("channel/fetchInventoryChannels");
     await store.dispatch("util/fetchConfigFacilities");
     modalController.dismiss();
-  } catch (error) {
+  } catch (error: any) {
     logger.error(error)
-    showToast(translate("Something went wrong."))
+    showToast(error.response?.data?.errors ? error.response.data.errors : translate("Failed to create channel group."))
   }
   modalController.dismiss()
   emitter.emit("dismissLoader");
diff --git a/src/components/EditGroupModal.vue b/src/components/EditGroupModal.vue
index 040524e9..36271cdc 100644
--- a/src/components/EditGroupModal.vue
+++ b/src/components/EditGroupModal.vue
@@ -6,17 +6,19 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ translate("Edit group") }}</ion-title>
+      <ion-title>{{ translate("Edit channel group") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-input :label="translate('Name')" labelPlacement="floating" v-model="formData.facilityGroupName"/>
+        <ion-input labelPlacement="floating" v-model="formData.facilityGroupName">
+          <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-textarea :label="translate('Description')" labelPlacement="floating" v-model="formData.description" />
+        <ion-textarea :label="translate('Description')" labelPlacement="floating" v-model="formData.description" :maxlength="255" />
       </ion-item>
     </ion-list>
   </ion-content>
@@ -29,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonList, IonTextarea, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonList, IonText, IonTextarea, IonTitle, IonToolbar, modalController } from "@ionic/vue";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components';
 import { defineProps, onMounted, ref } from "vue";
@@ -55,6 +57,11 @@ function isGroupUpdated() {
 }
 
 async function updateGroup() {
+  if (!formData.value.facilityGroupName?.trim()) {
+    showToast(translate("Please fill in all the required fields."))
+    return;
+  }
+
   emitter.emit("presentLoader");
   try {
     const resp = await ChannelService.updateGroup({...formData.value, facilityGroupId: props.group.facilityGroupId})
diff --git a/src/components/FacilityItem.vue b/src/components/FacilityItem.vue
index 368c09ba..093605ad 100644
--- a/src/components/FacilityItem.vue
+++ b/src/components/FacilityItem.vue
@@ -5,9 +5,9 @@
       <ion-card-title>{{ facility.facilityName }}</ion-card-title>
     </ion-card-header>
 
-    <ion-item lines="none">
+    <ion-item lines="none" v-for="group in pickupGroups" :key="group.facilityGroupId">
       <ion-icon :icon="storefrontOutline" slot="start" />
-      <ion-toggle>{{ translate("Store pickup") }}</ion-toggle>
+      <ion-toggle :checked="isPickupAllowed(group)" @click.prevent="updatePickupAllowed($event, group)">{{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}</ion-toggle>
     </ion-item>
   </ion-card>
 
@@ -45,6 +45,7 @@ import { hasError, showToast } from '@/utils';
 import logger from '@/logger';
 import { useStore } from 'vuex';
 import emitter from '@/event-bus';
+import { DateTime } from 'luxon';
 
 const router = useRouter();
 const store = useStore();
@@ -56,6 +57,8 @@ const selectedPage = ref({
 
 const props = defineProps(["facility"]);
 const facilities = computed(() => store.getters["util/getFacilities"]);
+const pickupGroups = computed(() => store.getters["util/getPickupGroups"]);
+const pickupGroupFacilities = computed(() => store.getters["util/getPickupGroupFacilities"]);
 
 onMounted(() => {
     selectedPage.value.path = router.currentRoute.value.path
@@ -105,4 +108,51 @@ async function updateFacility(maximumOrderLimit: number | string) {
   }
   emitter.emit("dismissLoader");
 }
+
+function isPickupAllowed(group: any) {
+  const facilities = pickupGroupFacilities.value[group.facilityGroupId]
+  return facilities.find((facility: any) => facility.facilityId === props.facility.facilityId);
+}
+
+async function updatePickupAllowed(event: Event, group: any) {
+  event.stopImmediatePropagation();
+
+  let payload = {} as any;
+  const isPickupActive = isPickupAllowed(group);
+
+  if(isPickupActive) {
+    const facilities = pickupGroupFacilities.value[group.facilityGroupId]
+    payload = facilities.find((facility: any) => facility.facilityId === props.facility.facilityId)
+    payload = {
+      ...payload,
+      thruDate: DateTime.now().toMillis()
+    }
+  } else {
+    payload = {
+      facilityId: props.facility.facilityId,
+      facilityGroupId: group.facilityGroupId,
+      fromDate: DateTime.now().toMillis()
+    }
+  }
+
+  try {
+    const resp = await UtilService.updateFacilityAssociationWithPickupGroup(payload)
+    if(!hasError(resp)) {
+      const facilitiesByPickupGroup = JSON.parse(JSON.stringify(pickupGroupFacilities.value));
+      if(isPickupActive) {
+        facilitiesByPickupGroup[group.facilityGroupId] = facilitiesByPickupGroup[group.facilityGroupId].filter((record: any) => record.facilityId !== props.facility.facilityId);
+      } else {
+        facilitiesByPickupGroup[group.facilityGroupId].push(payload)
+      }
+      store.dispatch("util/updatePickupGroupFacilities", facilitiesByPickupGroup);
+      showToast(translate("Facility association updated successfully with pickup group."))
+    } else {
+      throw resp.data;
+    }
+  } catch(error: any) {
+    logger.error(error);
+    showToast(translate("Failed to update facility association with pickup group."));
+  }
+  
+}
 </script>
\ No newline at end of file
diff --git a/src/components/LinkFacilitiesToGroupModal.vue b/src/components/LinkFacilitiesToGroupModal.vue
index d8f4b758..a752e5bf 100644
--- a/src/components/LinkFacilitiesToGroupModal.vue
+++ b/src/components/LinkFacilitiesToGroupModal.vue
@@ -13,7 +13,13 @@
   <ion-content>
     <ion-searchbar v-model="queryString" @keyup.enter="fetchFacilities()" />
 
-    <ion-list v-if="facilities?.length">
+    <div class="empty-state" v-if="isLoading">
+      <ion-item lines="none">
+        <ion-spinner name="crescent" slot="start" />
+        {{ translate("Fetching facilities") }}
+      </ion-item>
+    </div>
+    <ion-list v-else-if="facilities?.length">
       <ion-item lines="none" v-for="facility in facilities" :key="facility.facilityId" @click="updateSelectedFacilities(facility.facilityId)">
         <ion-checkbox :checked="isFacilitySelected(facility.facilityId)">
           <ion-label>
@@ -36,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonSearchbar, IonSpinner, IonTitle, IonToolbar, modalController } from "@ionic/vue";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components';
 import { defineProps, onMounted, ref } from "vue";
@@ -51,6 +57,7 @@ import emitter from "@/event-bus";
 const store = useStore();
 const queryString = ref('');
 const selectedFacilityValues = ref([]) as any;
+const isLoading = ref(false);
 
 const props = defineProps(["group", "selectedFacilities"]);
 const facilities = ref([]) as any;
@@ -65,6 +72,7 @@ function closeModal() {
 }
 
 async function fetchFacilities () {
+  isLoading.value = true;
   facilities.value = []
 
   try {
@@ -95,6 +103,7 @@ async function fetchFacilities () {
   } catch (err: any) {
     logger.error(err)
   }
+  isLoading.value = false;
 }
 
 function isFacilitySelected(facilityId: string) {
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index e26b9ed6..0eed4dc7 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -30,12 +30,12 @@
         </ion-item>
         <ion-item v-if="userProfile?.stores?.length > 1" lines="none">
           <ion-select interface="popover" :value="eComStore.productStoreId" @ionChange="setEComStore($event)">
-            <ion-select-option v-for="store in (userProfile?.stores ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName }}</ion-select-option>
+            <ion-select-option v-for="store in (userProfile?.stores ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName ? store.storeName : store.productStoreId }}</ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item v-else lines="none">
           <ion-label class="ion-text-wrap">
-            {{ eComStore.storeName }}
+            {{ eComStore.storeName ? eComStore.storeName : eComStore.productStoreId }}
           </ion-label>
         </ion-item>
       </ion-toolbar>
@@ -59,12 +59,15 @@
     IonSelectOption,
     IonTitle,
     IonToolbar,
+    alertController,
+    SelectCustomEvent
   } from "@ionic/vue";
   import { computed } from "vue";
   import { useStore } from "@/store";
   import { useRouter } from "vue-router";
   import { cloudUploadOutline, globeOutline, settingsOutline, sendOutline, storefrontOutline, pulseOutline } from 'ionicons/icons';
-import { translate } from '@hotwax/dxp-components';
+  import { translate } from "@hotwax/dxp-components";
+  import emitter from "@/event-bus";
 
   const store = useStore();
   const router = useRouter();
@@ -72,28 +75,28 @@ import { translate } from '@hotwax/dxp-components';
         {
           title: "Threshold",
           url: "/threshold",
-          childRoutes: ["/create-threshold"],
+          childRoutes: ["/create-threshold", "/update-threshold/"],
           iosIcon: globeOutline,
           mdIcon: globeOutline
         },
         {
           title: "Safety stock",
           url: "/safety-stock",
-          childRoutes: ["/create-safety-stock"],
+          childRoutes: ["/create-safety-stock", "/update-safety-stock/"],
           iosIcon: pulseOutline,
           mdIcon: pulseOutline
         },
         {
           title: "Store pickup",
           url: "/store-pickup",
-          childRoutes: ["/create-store-pickup"],
+          childRoutes: ["/create-store-pickup", "update-store-pickup/"],
           iosIcon: storefrontOutline,
           mdIcon: storefrontOutline
         },
         {
           title: "Shipping",
           url: "/shipping",
-          childRoutes: ["/create-shipping"],
+          childRoutes: ["/create-shipping", "/update-shipping/"],
           iosIcon: sendOutline,
           mdIcon: sendOutline
         },
@@ -120,14 +123,45 @@ import { translate } from '@hotwax/dxp-components';
     return appPages.findIndex((screen) => screen.url === path || screen.childRoutes?.includes(path) || screen.childRoutes?.some((route) => path.includes(route)));
   });
 
-  function setEComStore(event: CustomEvent) {
+  async function setEComStore(event: SelectCustomEvent) {
+    const createUpdateRoute = ["/create-threshold", "/update-threshold/", "/create-safety-stock", "/update-safety-stock/", "/create-store-pickup", "update-store-pickup/", "/create-shipping", "/update-shipping/"]
+    const path = router.currentRoute.value.path;
     if(userProfile.value?.stores) {
-      store.dispatch("user/setEcomStore", {
-        "productStoreId": event.detail.value
-      })
+      if(createUpdateRoute.some((route) => path.includes(route))) {
+        const alert = await alertController.create({
+          header: translate("Leave page"),
+          message: translate("Any page made on this page will be lost. You will not be able to reverse this action."),
+          buttons: [
+            {
+              text: translate("No"),
+              role: "cancel",
+              handler: async () => {
+                // Reverting the selected ecomStore in ion-select if user select no to change product store.
+                event.target.value = eComStore.value.productStoreId
+              }
+            },
+            {
+              text: translate("Yes"),
+              handler: async () => {
+                await store.dispatch("user/setEcomStore", {
+                  "productStoreId": event.detail.value
+                })
+                emitter.emit("productStoreOrConfigChanged")
+              }
+            }
+          ]
+        })
+
+        alert.present();
+      } else {
+        store.dispatch("user/setEcomStore", {
+          "productStoreId": event.detail.value
+        })
+        emitter.emit("productStoreOrConfigChanged")
+      }
     }
   }
-  </script>
+</script>
   
   <style scoped>
   ion-menu.md ion-item.selected ion-icon {
diff --git a/src/components/OrderLimitPopover.vue b/src/components/OrderLimitPopover.vue
index 2cc1ac9c..a2f672dd 100644
--- a/src/components/OrderLimitPopover.vue
+++ b/src/components/OrderLimitPopover.vue
@@ -65,6 +65,7 @@ async function showOrderLimitAlert(header: string, message: string, showInput: b
       name: "setLimit",
       placeholder: translate("Order fulfillment capacity"),
       type: "number",
+      value: props.fulfillmentOrderLimit,
       min: 0
     }] : [],
     buttons: [{
@@ -92,6 +93,6 @@ async function showOrderLimitAlert(header: string, message: string, showInput: b
       }
     }]
   })
-  await alert.present()
+  alert.present()
 }
 </script>
\ No newline at end of file
diff --git a/src/components/RuleGroupHistoryModal.vue b/src/components/RuleGroupHistoryModal.vue
index c8f6e9d0..57eba57f 100644
--- a/src/components/RuleGroupHistoryModal.vue
+++ b/src/components/RuleGroupHistoryModal.vue
@@ -6,20 +6,25 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ translate("Group history") }}</ion-title>
+      <ion-title>{{ translate("Execution history") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content>
-    <ion-list>
-      <ion-item v-for="history in groupHistory" :key="history.jobRunId">
-        <ion-label>
-          <h3>{{ getTime(history.startTime) }}</h3>
-          <p>{{ getDate(history.startTime) }}</p>
-        </ion-label>
-        <ion-badge color="dark" v-if="history.endTime">{{ timeTillRun(history.endTime) }}</ion-badge>
-      </ion-item>
+    <ion-list v-if="groupHistory.length">
+      <template v-for="history in groupHistory" :key="history.jobRunId">
+        <ion-item v-if="history.startTime">
+          <ion-label>
+            <h3>{{ getTime(history.startTime) }}</h3>
+            <p>{{ getDate(history.startTime) }}</p>
+          </ion-label>
+          <ion-badge color="dark" v-if="history.endTime">{{ timeTillRun(history.endTime) }}</ion-badge>
+        </ion-item>
+      </template>
     </ion-list>
+    <div class="empty-state" v-else>
+      <p>{{ translate("No available history for rule.", { name: router.currentRoute.value.name?.toString().toLowerCase() }) }}</p>
+    </div>
   </ion-content>
 </template>
 
@@ -45,7 +50,9 @@ import { getDate, getTime, timeTillRun, hasError } from "@/utils";
 import { useStore } from "vuex";
 import { RuleService } from "@/services/RuleService";
 import logger from "@/logger";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const store = useStore();
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
 
@@ -63,7 +70,7 @@ async function fetchGroupHistory() {
   }
 
   try {
-    const resp = await RuleService.fetchRuleGroupHistory(ruleGroup.value.jobName)
+    const resp = await RuleService.fetchRuleGroupHistory({ jobName: ruleGroup.value.jobName, pageSize: 20, orderByField: "lastUpdatedStamp DESC" })
 
     if(!hasError(resp)) {
       // Sorting the history based on startTime, as we does not get the records in sorted order from api
diff --git a/src/components/RuleItem.vue b/src/components/RuleItem.vue
index cd55d413..77d12f6e 100644
--- a/src/components/RuleItem.vue
+++ b/src/components/RuleItem.vue
@@ -1,138 +1,134 @@
 <template>
   <ion-card>
-    <ion-card-header>
-      <div>
-        <ion-card-subtitle class="overline">{{ rule.ruleId }}</ion-card-subtitle>
-        <ion-card-title>{{ rule.ruleName }}</ion-card-title>
-        <ion-card-subtitle>{{ ruleIndex+1 }}/{{ total }}</ion-card-subtitle>
-      </div>
-      <div>
-        <ion-button fill="clear" color="medium" class="ion-no-padding" :disabled="ruleIndex === 0" @click="updateRuleOrder('prev')">
-          <ion-icon :icon="chevronUpOutline" slot="icon-only" />
-        </ion-button>
-        <ion-button fill="clear" color="medium" class="ion-no-padding" :disabled="ruleIndex === rules.length - 1" @click="updateRuleOrder('next')">
-          <ion-icon :icon="chevronDownOutline" slot="icon-only" />
-        </ion-button>
-      </div>
-    </ion-card-header>
-
-    <ion-item lines="full" v-if="selectedPage.path === '/threshold'">
-      <ion-icon slot="start" :icon="globeOutline"/>
-      <ion-label class="ion-text-wrap">{{ translate(selectedPage.name) }}</ion-label>
-      <ion-chip slot="end" outline @click="editThreshold()">{{ rule.ruleActions?.length ? rule.ruleActions[0]?.fieldValue : '-' }}</ion-chip>
-    </ion-item>
-    <ion-item lines="full" v-else-if="selectedPage.path === '/safety-stock'">
-      <ion-icon slot="start" :icon="pulseOutline"/>
-      <ion-label class="ion-text-wrap">{{ translate(selectedPage.name) }}</ion-label>
-      <ion-chip slot="end" outline @click="editSafetyStock()">{{ rule.ruleActions?.length ? rule.ruleActions[0].fieldValue : '-' }}</ion-chip>
-    </ion-item>
-    <ion-item lines="full" v-else-if="selectedPage.path === '/store-pickup'">
-      <ion-icon slot="start" :icon="storefrontOutline"/>
-      <ion-toggle :checked="props.rule.ruleActions ? props.rule.ruleActions[0].fieldValue : false" @click.prevent="updateRulePickup($event)">{{ translate(selectedPage.name) }}</ion-toggle>
-    </ion-item>
-    <ion-item lines="full" v-else-if="selectedPage.path === '/shipping'">
-      <ion-icon slot="start" :icon="sendOutline"/>
-      <ion-toggle :checked="props.rule.ruleActions ? props.rule.ruleActions[0].fieldValue : false" @click.prevent="updateRuleShipping($event)">{{ translate(selectedPage.name) }}</ion-toggle>
-    </ion-item>
-
-    <ion-list>
-      <template v-if="selectedPage.path === '/threshold' || selectedSegment === 'RG_PICKUP_CHANNEL' || selectedSegment === 'RG_SHIPPING_CHANNEL'">
-        <ion-item-divider color="light">
-          <ion-label>{{ translate("Channels") }}</ion-label>
-          <ion-button slot="end" fill="clear" color="medium" @click="openSelectConfigFacilitiesModal()">
-            <ion-icon :icon="optionsOutline" slot="icon-only" />
-          </ion-button>
-        </ion-item-divider>
-
-        <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FACILITIES')" lines="none">
-          <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
-          <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FACILITIES") }}</ion-label>
-        </ion-item>
-      </template>
-      
-      <template v-else>
-        <ion-item-divider color="light">
-          <ion-label>{{ translate("Facility groups") }}</ion-label>
-          <ion-button slot="end" fill="clear" color="medium" @click="openUpdateFacilityGroupModal()">
-            <ion-icon :icon="optionsOutline" slot="icon-only" />
-          </ion-button>
-        </ion-item-divider>
-        
-        <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FAC_GROUPS', 'facilityGroups', 'in')">
-          <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
-          <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FAC_GROUPS", "facilityGroups", "in") }}</ion-label>
-        </ion-item>
-        <ion-item lines="none" v-if="isRuleConditionAvailable('ENTCT_ATP_FAC_GROUPS', 'facilityGroups', 'not-in')">
-          <ion-icon slot="start" :icon="closeCircleOutline"/>
-          <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FAC_GROUPS", "facilityGroups", "not-in") }}</ion-label>
-        </ion-item>
-      </template>
-
-      <ion-item-divider color="light">
-        <ion-label>{{ translate("Product tags") }}</ion-label>
-        <ion-button slot="end" fill="clear" color="medium" @click="openUpdateProductFiltersModal('tags', 'tagsFacet', 'tags')">
-          <ion-icon :icon="optionsOutline" slot="icon-only" />
-        </ion-button>
-      </ion-item-divider>
-
-      <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'in')">
-        <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
-        <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "tags", "in") }}</ion-label>
-      </ion-item>
-      <ion-item lines="none" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'not-in')">
-        <ion-icon slot="start" :icon="closeCircleOutline"/>
-        <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "tags", "not-in") }}</ion-label>
-      </ion-item>
-
-      <ion-item-divider color="light">
-        <ion-label>{{ translate("Product features") }}</ion-label>
-        <ion-button slot="end" fill="clear" color="medium"  @click="openUpdateProductFiltersModal('product features', 'productFeaturesFacet', 'productFeatures')">
-          <ion-icon :icon="optionsOutline" slot="icon-only" />
-        </ion-button>
-      </ion-item-divider>
-
-      <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'in')">
-        <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
-        <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "productFeatures", "in") }}</ion-label>
-      </ion-item>
-      <ion-item lines="full" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'not-in')">
-        <ion-icon slot="start" :icon="closeCircleOutline"/>
-        <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "productFeatures", "not-in") }}</ion-label>
-      </ion-item>
-
-      <ion-item lines="none">
-        <ion-button @click="editRuleName()" fill="clear">{{ translate("Edit name") }}</ion-button>
-        <ion-button @click="archiveRule()" color="medium" fill="clear" slot="end">
-          <ion-icon :icon="archiveOutline" slot="icon-only"/>
-        </ion-button>
-      </ion-item>
-    </ion-list>
+    <ion-accordion-group :value="isReorderActive">
+      <ion-accordion value="false">
+        <ion-card-header slot="header" @click="$event.stopImmediatePropagation()">
+          <div>
+            <ion-card-subtitle class="overline">{{ rule.ruleId }}</ion-card-subtitle>
+            <ion-card-title>{{ rule.ruleName }}</ion-card-title>
+            <ion-card-subtitle>{{ ruleIndex+1 }}/{{ total }}</ion-card-subtitle>
+          </div>
+          <ion-item v-if="isReorderActive" lines="none">
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        </ion-card-header>
+        <div slot="content">
+          <ion-item lines="full" v-if="selectedPage.path === '/threshold'">
+            <ion-icon slot="start" :icon="globeOutline"/>
+            <ion-label class="ion-text-wrap">{{ translate(selectedPage.name) }}</ion-label>
+            <ion-chip slot="end" outline @click="editThreshold()">{{ rule.ruleActions?.length ? rule.ruleActions[0]?.fieldValue : '-' }}</ion-chip>
+          </ion-item>
+          <ion-item lines="full" v-else-if="selectedPage.path === '/safety-stock'">
+            <ion-icon slot="start" :icon="pulseOutline"/>
+            <ion-label class="ion-text-wrap">{{ translate(selectedPage.name) }}</ion-label>
+            <ion-chip slot="end" outline @click="editSafetyStock()">{{ rule.ruleActions?.length ? rule.ruleActions[0].fieldValue : '-' }}</ion-chip>
+          </ion-item>
+          <ion-item lines="full" v-else-if="selectedPage.path === '/store-pickup'">
+            <ion-icon slot="start" :icon="storefrontOutline"/>
+            <ion-toggle :checked="props.rule.ruleActions[0].fieldValue === 'Y' ? true : false" @click.prevent="updateRulePickup($event)">{{ translate(selectedPage.name) }}</ion-toggle>
+          </ion-item>
+          <ion-item lines="full" v-else-if="selectedPage.path === '/shipping'">
+            <ion-icon slot="start" :icon="sendOutline"/>
+            <ion-toggle :checked="props.rule.ruleActions[0].fieldValue === 'Y' ? true : false" @click.prevent="updateRuleShipping($event)">{{ translate(selectedPage.name) }}</ion-toggle>
+          </ion-item>
+
+          <template v-if="selectedPage.path === '/threshold' || selectedSegment === 'RG_PICKUP_CHANNEL' || selectedSegment === 'RG_SHIPPING_CHANNEL'">
+            <ion-item-divider color="light">
+              <ion-label>{{ translate("Channels") }}</ion-label>
+            </ion-item-divider>
+
+            <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FACILITIES')" lines="full">
+              <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FACILITIES") }}</ion-label>
+            </ion-item>
+          </template>
+          
+          <template v-else>
+            <ion-item-divider color="light">
+              <ion-label>{{ translate("Facilities") }}</ion-label>
+            </ion-item-divider>
+            
+            <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FAC_GROUPS', 'facilityGroupId', 'in')">
+              <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FAC_GROUPS", "facilityGroupId", "in") }}</ion-label>
+            </ion-item>
+            <ion-item lines="full" v-if="isRuleConditionAvailable('ENTCT_ATP_FAC_GROUPS', 'facilityGroupId', 'not-in')">
+              <ion-icon slot="start" :icon="closeCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FAC_GROUPS", "facilityGroupId", "not-in") }}</ion-label>
+            </ion-item>
+          </template>
+
+          <template v-if="areProductFiltersSelected()">
+            <ion-item-divider color="light" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'in') || isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'not-in')">
+              <ion-label>{{ translate("Product tags") }}</ion-label>
+            </ion-item-divider>
+
+            <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'in')" :lines="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'not-in') ? '' : 'full'">
+              <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "tags", "in") }}</ion-label>
+            </ion-item>
+            <ion-item lines="full" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'tags', 'not-in')">
+              <ion-icon slot="start" :icon="closeCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "tags", "not-in") }}</ion-label>
+            </ion-item>
+
+            <ion-item-divider color="light" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'in') || isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'not-in')">
+              <ion-label>{{ translate("Product features") }}</ion-label>
+            </ion-item-divider>
+
+            <ion-item v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'in')" :lines="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'not-in') ? '' : 'full'">
+              <ion-icon slot="start" :icon="checkmarkDoneCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "productFeatures", "in") }}</ion-label>
+            </ion-item>
+            <ion-item lines="full" v-if="isRuleConditionAvailable('ENTCT_ATP_FILTER', 'productFeatures', 'not-in')">
+              <ion-icon slot="start" :icon="closeCircleOutline"/>
+              <ion-label class="ion-text-wrap">{{ getRuleConditions("ENTCT_ATP_FILTER", "productFeatures", "not-in") }}</ion-label>
+            </ion-item>
+          </template>
+          <template v-else>
+            <ion-item-divider color="light">
+              <ion-label>{{ translate("Products") }}</ion-label>
+            </ion-item-divider>
+
+            <ion-item lines="full">
+              <ion-icon slot="start" :icon="shirtOutline"/>
+              <ion-label class="ion-text-wrap">{{ translate("All products selected.") }}</ion-label>
+            </ion-item>
+          </template>
+
+          <div class="actions">
+            <ion-button @click="editRule()" fill="clear">{{ translate("Edit rule") }}</ion-button>
+            <ion-button @click="archiveRule()" color="medium" fill="clear" slot="end">
+              <ion-icon :icon="archiveOutline" slot="icon-only"/>
+            </ion-button>
+          </div>
+        </div>
+      </ion-accordion>
+    </ion-accordion-group>
   </ion-card>
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonToggle, alertController, modalController } from '@ionic/vue';
+import { IonAccordion, IonAccordionGroup, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonIcon, IonItem, IonItemDivider, IonLabel, IonReorder, IonToggle, alertController } from '@ionic/vue';
 import { computed, defineProps, onMounted, ref } from 'vue';
-import { archiveOutline, checkmarkDoneCircleOutline, chevronDownOutline, chevronUpOutline, closeCircleOutline, globeOutline, optionsOutline, pulseOutline, sendOutline, storefrontOutline } from 'ionicons/icons';
+import { archiveOutline, checkmarkDoneCircleOutline, closeCircleOutline, globeOutline, pulseOutline, sendOutline, shirtOutline, storefrontOutline } from 'ionicons/icons';
 import { useRouter } from 'vue-router';
 import { translate } from '@hotwax/dxp-components';
 import { RuleService } from '@/services/RuleService';
 import { useStore } from 'vuex';
 import { showToast } from '@/utils';
 import logger from '@/logger';
-import SelectConfigFacilitiesModal from '@/components/SelectConfigFacilitiesModal.vue';
-import UpdateProductFiltersModal from '@/components/UpdateProductFiltersModal.vue';
-import UpdateFacilityGroupModal from '@/components/UpdateFacilityGroupModal.vue';
 import emitter from '@/event-bus';
 
 const router = useRouter();
 const store = useStore();
 
-const props = defineProps(["selectedSegment", "rule", "ruleIndex"])
+const props = defineProps(["rule", "ruleIndex"])
 const total = computed(() => store.getters["rule/getTotalRulesCount"])
 const configFacilities = computed(() => store.getters["util/getConfigFacilities"])
 const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
-const rules = computed(() => store.getters["rule/getRules"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"])
 
 const selectedPage = ref({
   path: '',
@@ -152,7 +148,13 @@ async function editThreshold() {
       placeholder: translate("Threshold"),
       type: "number",
       value: props.rule.ruleActions?.length ? props.rule.ruleActions[0].fieldValue : 0,
-      min: 0
+      min: 0,
+      attributes: {
+        // Added check to not allow mainly .(period) and other special characters to be entered in the alert input
+        onkeydown: ($event: any) => {
+          if(/[`!@#$%^&*()_+\-=\\|,.<>?~^e]/.test($event.key) && event.key !== 'Backspace') $event.preventDefault();
+        }
+      }
     }],
     buttons: [{
       text: translate('Cancel'),
@@ -166,6 +168,8 @@ async function editThreshold() {
           return false;
         }
 
+        if(data.threshold === props.rule.ruleActions[0].fieldValue) return;
+
         emitter.emit("presentLoader");
 
         const rule = JSON.parse(JSON.stringify(props.rule))
@@ -206,7 +210,13 @@ async function editSafetyStock() {
       placeholder: translate("Safety stock"),
       type: "number",
       value: props.rule.ruleActions?.length ? props.rule.ruleActions[0].fieldValue : 0,
-      min: 0
+      min: 0,
+      attributes: {
+        // Added check to not allow mainly .(period) and other special characters to be entered in the alert input
+        onkeydown: ($event: any) => {
+          if(/[`!@#$%^&*()_+\-=\\|,.<>?~e]/.test($event.key) && event.key !== 'Backspace') $event.preventDefault();
+        }
+      }
     }],
     buttons: [{
       text: translate('Cancel'),
@@ -220,6 +230,8 @@ async function editSafetyStock() {
           return false;
         }
 
+        if(data.safetyStock === props.rule.ruleActions[0].fieldValue) return;
+
         emitter.emit("presentLoader");
 
         const rule = JSON.parse(JSON.stringify(props.rule))
@@ -252,55 +264,18 @@ async function editSafetyStock() {
   await alert.present()
 }
 
-async function editRuleName() {
-  const alert = await alertController.create({
-    header: translate("Edit name"),
-    inputs: [{
-      name: "name",
-      placeholder: translate("Name"),
-      type: "text",
-      value: props.rule.ruleName
-    }],
-    buttons: [{
-      text: translate('Cancel'),
-      role: "cancel"
-    },
-    {
-      text: translate('Update'),
-      handler: async(data) => {
-        if(data.name) {
-          emitter.emit("presentLoader");
-          const rule = JSON.parse(JSON.stringify(props.rule))
-          rule.ruleName = data.name
-
-          try {
-            await RuleService.updateRule(rule, props.rule.ruleId)
-            showToast(translate("Rule name updated successfully."))
-            await store.dispatch('rule/updateRuleData', { rule })
-            alertController.dismiss()
-          } catch(err: any) {
-            logger.error(err)
-            showToast(translate("Failed to update rule name."))
-          }
-          emitter.emit("dismissLoader");
-        }
-      }
-    }]
-  })
-
-  await alert.present()
-}
-
 function getRuleConditions(conditionTypeEnumId: string, fieldName?: string, operator? : string) {
   if(!props.rule.ruleConditions) return;
 
   if(fieldName && operator) {
     const condition = props.rule.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === conditionTypeEnumId && condition.fieldName === fieldName && condition.operator === operator)
     if(condition && conditionTypeEnumId === 'ENTCT_ATP_FAC_GROUPS') {
+      if(condition.fieldValue === "ALL") return translate("All facility groups selected");
+
       let facilityGroupIds = condition?.fieldValue.split(",")
         facilityGroupIds = facilityGroupIds.map((id: string) => {
           let group = facilityGroups.value.find((group: any) => group.facilityGroupId === id)
-          return group ? group.facilityGroupName : null
+          return group?.facilityGroupName ? group.facilityGroupName : id
         })
         return facilityGroupIds.join(", ")
     } else {
@@ -310,10 +285,12 @@ function getRuleConditions(conditionTypeEnumId: string, fieldName?: string, oper
     const condition = props.rule.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === conditionTypeEnumId)
 
     if(condition && condition.fieldValue) {
+      if(condition.fieldValue === "ALL") return translate("All channels selected");
+
       let facilities = condition?.fieldValue.split(",")
       facilities = facilities.map((id: string) => {
         let facility = configFacilities.value.find((facility: any) => facility.facilityId === id)
-        return facility ? facility.facilityName : null
+        return facility?.facilityName ? facility.facilityName : id
       })
       return facilities.join(", ")
     }
@@ -351,56 +328,13 @@ async function archiveRule() {
   return alert.present();
 }
 
-function getSelectedFacilities() {
-  const condition = props.rule.ruleConditions?.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FACILITIES")
-  return (condition && condition.fieldValue) ? condition.fieldValue.split(",") : []
-}
-
-function getSelectedFacilityGroups() {
-  const condition = props.rule.ruleConditions?.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS")
-  return (condition && condition.fieldValue) ? condition.fieldValue.split(",") : []
-}
-
-async function openSelectConfigFacilitiesModal() {
-  const modal = await modalController.create({
-    component: SelectConfigFacilitiesModal,
-    componentProps: {
-      selectedFacilities: getSelectedFacilities(),
-      rule: props.rule
-    },
-  })
-
-  modal.present()
-}
-
-async function openUpdateFacilityGroupModal() {
-  const modal = await modalController.create({
-    component: UpdateFacilityGroupModal,
-    componentProps: {
-      rule: props.rule
-    },
-  })
-
-  modal.present()
-}
-
 function isRuleConditionAvailable(conditionTypeEnumId: string, fieldName?: string, operator? : string) {
   if(fieldName) return props.rule.ruleConditions?.find((condition: any) => condition.conditionTypeEnumId === conditionTypeEnumId && condition.fieldName === fieldName && condition.operator === operator)?.fieldValue
   else return props.rule.ruleConditions?.find((condition: any) => condition.conditionTypeEnumId === conditionTypeEnumId)?.fieldValue
 }
 
-async function openUpdateProductFiltersModal(label: string, facetToSelect: string, searchfield: string) {
-  const modal = await modalController.create({
-    component: UpdateProductFiltersModal,
-    componentProps: {
-      label,
-      facetToSelect,
-      searchfield,
-      rule: props.rule
-    },
-  })
-
-  modal.present()
+function areProductFiltersSelected() {
+  return props.rule.ruleConditions.some((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FILTER" && condition.fieldValue);
 }
 
 async function updateRulePickup(event: any) {
@@ -411,7 +345,7 @@ async function updateRulePickup(event: any) {
   try {
     const rule = JSON.parse(JSON.stringify(props.rule))
     rule.ruleActions.map((action: any) => {
-      if(action.actionTypeEnumId === "ATP_ALLOW_PICKUP") action.fieldValue = isChecked
+      if(action.actionTypeEnumId === "ATP_ALLOW_PICKUP") action.fieldValue = isChecked ? "Y" : "N"
     })
 
     await RuleService.updateRule(rule, props.rule.ruleId)
@@ -433,7 +367,7 @@ async function updateRuleShipping(event: any) {
   try {
     const rule = JSON.parse(JSON.stringify(props.rule))
     rule.ruleActions.map((action: any) => {
-      if(action.actionTypeEnumId === "ATP_ALLOW_BROKERING") action.fieldValue = isChecked
+      if(action.actionTypeEnumId === "ATP_ALLOW_BROKERING") action.fieldValue = isChecked ? "Y" : "N"
     })
 
     await RuleService.updateRule(rule, props.rule.ruleId)
@@ -447,46 +381,23 @@ async function updateRuleShipping(event: any) {
   emitter.emit("dismissLoader");
 }
 
-async function updateRuleOrder(ruleDir: string) {
-  const prevSeq = JSON.parse(JSON.stringify(rules.value));
-  const updatedSeq = JSON.parse(JSON.stringify(rules.value));
-  let alternateRuleIndex = '' as any;
-
-  if(ruleDir === 'prev') alternateRuleIndex = props.ruleIndex - 1
-  else alternateRuleIndex = props.ruleIndex + 1;
-
-  [updatedSeq[props.ruleIndex], updatedSeq[alternateRuleIndex]] = [updatedSeq[alternateRuleIndex], updatedSeq[props.ruleIndex]]
-
-  let diffSeq = findRulesDiff(prevSeq, updatedSeq)
-
-  const updatedSeqenceNum = prevSeq.map((rule: any) => rule.sequenceNum)
-  Object.keys(diffSeq).map((key: any) => {
-    diffSeq[key].sequenceNum = updatedSeqenceNum[key]
-  })
-
-  diffSeq = Object.keys(diffSeq).map((key) => diffSeq[key])
-
-  try {
-    diffSeq.map(async (rule: any) => {
-      await RuleService.updateRule(rule, rule.ruleId);
-    })
-    await store.dispatch('rule/updateRules', { rules: updatedSeq })
-    showToast(translate("Rules order has been updated successfully."))
-  } catch(err: any) {
-    logger.error(err);
-    showToast(translate("Failed to update rules order."))
+function editRule() {
+  let path = ""
+  if(selectedPage.value.path === "/threshold") {
+    path = `update-threshold/${props.rule.ruleId}`
+  } else if(selectedPage.value.path === "/safety-stock") {
+    path = `update-safety-stock/${props.rule.ruleId}`
+  } else if(selectedPage.value.path === "/store-pickup") {
+    path = `update-store-pickup/${props.rule.ruleId}`
+  } else if(selectedPage.value.path === "/shipping") {
+    path = `update-shipping/${props.rule.ruleId}`
   }
-}
 
-function findRulesDiff(previousSeq: any, updatedSeq: any) {
-  const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
-    if (updatedSeq[key].ruleId === previousSeq[key].ruleId) return diff
-    return {
-      ...diff,
-      [key]: updatedSeq[key]
-    }
-  }, {})
-  return diffSeq;
+  if(selectedSegment.value) {
+    router.push({ path, query: { groupTypeEnumId: selectedSegment.value } });
+  } else {
+    router.push(path)
+  }
 }
 </script>
 
@@ -497,4 +408,9 @@ ion-card-header {
   justify-content: space-between;
   align-items: center;
 }
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/ScheduleActionsPopover.vue b/src/components/ScheduleActionsPopover.vue
index 5b3ad0ce..95288991 100644
--- a/src/components/ScheduleActionsPopover.vue
+++ b/src/components/ScheduleActionsPopover.vue
@@ -89,6 +89,8 @@ async function runNow() {
               const payload = {
                 ruleGroupId: ruleGroup.value.ruleGroupId,
                 paused: "Y",  // passing Y as we just need to configure the scheduler and do not need to schedule it in active state
+                // Hardcoding for now, need to fetch system message remote id for the ftp server config.
+                systemMessageRemoteId: "RemoteSftp"
               }
 
               try {
@@ -107,6 +109,7 @@ async function runNow() {
               const resp = await RuleService.runNow(ruleGroup.value.ruleGroupId)
               if(!hasError(resp) && resp.data.jobRunId) {
                 showToast(translate("Service has been scheduled"))
+                await store.dispatch('rule/fetchRules', { groupTypeEnumId: ruleGroup.value.groupTypeEnumId, pageSize: 50 })
                 popoverController.dismiss();
               } else {
                 throw resp.data
@@ -121,6 +124,7 @@ async function runNow() {
       ]
     });
 
-  return scheduleAlert.present();
+  await scheduleAlert.present();
+  popoverController.dismiss()
 }
 </script> 
\ No newline at end of file
diff --git a/src/components/ScheduleRuleItem.vue b/src/components/ScheduleRuleItem.vue
index a8043efc..09608abc 100644
--- a/src/components/ScheduleRuleItem.vue
+++ b/src/components/ScheduleRuleItem.vue
@@ -1,35 +1,40 @@
 <template>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>{{ translate("Schedule") }}</ion-card-title>
-      <ion-badge :color="ruleGroup.schedule?.paused === 'Y' ? 'warning' : 'dark'">{{ ruleGroup.schedule?.paused === "Y" ? translate("Paused") : timeTillJob(ruleGroup.schedule?.nextExecutionDateTime) }}</ion-badge>
-    </ion-card-header>
+  <ion-accordion-group :value="isReorderActive">
+    <ion-accordion value="false">
+      <div slot="header" @click="$event.stopImmediatePropagation()"></div>
+      <ion-card slot="content">
+        <ion-card-header>
+          <ion-card-title>{{ translate("Schedule") }}</ion-card-title>
+          <ion-badge :color="ruleGroup.schedule?.paused === 'Y' ? 'warning' : 'dark'">{{ ruleGroup.schedule?.paused === "Y" ? translate("Paused") : timeTillJob(ruleGroup.schedule?.nextExecutionDateTime) }}</ion-badge>
+        </ion-card-header>
 
-    <ion-item>
-      <ion-icon slot="start" :icon="timeOutline"/>
-      <ion-label>{{ translate("Run time") }}</ion-label>
-      <!-- When the group is in draft status, do not display the runTime from the schedule -->
-      <ion-label slot="end">{{ ruleGroup.schedule?.paused === 'N' ? getDateAndTime(ruleGroup.schedule?.nextExecutionDateTime) : "-" }}</ion-label>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" :icon="timerOutline"/>
-      <!-- When the group is in draft status or the job is not present, do not display the frequency and just display the label for schedule -->
-      <ion-select :label="translate('Schedule')" interface="popover" :placeholder="translate('Select')" value="0 0 0 * * ?" :disabled="true">
-        <ion-select-option v-for="(expression, description) in cronExpressions" :key="expression" :value="expression">{{ description }}</ion-select-option>
-      </ion-select>
-    </ion-item>
-  
-    <ion-item lines="none">
-      <ion-button fill="clear" :disabled="ruleGroup.schedule?.paused === 'N'" @click="saveSchedule()">{{ translate("Schedule") }}</ion-button>
-      <ion-button color="medium" fill="clear" slot="end" @click="OpenScheduleActionsPopover($event)">
-        <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
-      </ion-button>
-    </ion-item>
-  </ion-card>
+        <ion-item>
+          <ion-icon slot="start" :icon="timeOutline"/>
+          <ion-label>{{ translate("Run time") }}</ion-label>
+          <!-- When the group is in draft status, do not display the runTime from the schedule -->
+          <ion-label slot="end">{{ ruleGroup.schedule?.paused === 'N' ? getDateAndTime(ruleGroup.schedule?.nextExecutionDateTime) : "-" }}</ion-label>
+        </ion-item>
+        <ion-item lines="full">
+          <ion-icon slot="start" :icon="timerOutline"/>
+          <!-- When the group is in draft status or the job is not present, do not display the frequency and just display the label for schedule -->
+          <ion-select :label="translate('Schedule')" interface="popover" :placeholder="translate('Select')" value="0 0 0 * * ?" :disabled="true">
+            <ion-select-option v-for="(expression, description) in cronExpressions" :key="expression" :value="expression">{{ description }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+      
+        <div class="actions">
+          <ion-button fill="clear" :disabled="ruleGroup.schedule?.paused === 'N'" @click="saveSchedule()">{{ translate("Schedule") }}</ion-button>
+          <ion-button color="medium" fill="clear" slot="end" @click="openScheduleActionsPopover($event)">
+            <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
+          </ion-button>
+        </div>
+      </ion-card>
+    </ion-accordion>
+  </ion-accordion-group>
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonButton, IonCard, IonCardHeader, IonCardTitle, IonIcon, IonItem, IonLabel, IonSelect, IonSelectOption, popoverController } from '@ionic/vue';
+import { IonAccordion, IonAccordionGroup, IonBadge, IonButton, IonCard, IonCardHeader, IonCardTitle, IonIcon, IonItem, IonLabel, IonSelect, IonSelectOption, popoverController } from '@ionic/vue';
 import { translate } from '@hotwax/dxp-components';
 import { ellipsisVerticalOutline, timeOutline, timerOutline } from 'ionicons/icons';
 import ScheduleActionsPopover from "@/components/ScheduleActionsPopover.vue";
@@ -43,10 +48,11 @@ import emitter from '@/event-bus';
 
 const store = useStore();
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
 
 const cronExpressions = JSON.parse(process.env?.VUE_APP_CRON_EXPRESSIONS as string)
 
-async function OpenScheduleActionsPopover(event: Event) {
+async function openScheduleActionsPopover(event: Event) {
   const popover = await popoverController.create({
     component: ScheduleActionsPopover,
     showBackdrop: false,
@@ -71,7 +77,7 @@ async function saveSchedule() {
     const resp = await RuleService.scheduleRuleGroup(payload)
     if(!hasError(resp)) {
       showToast(translate("Service has been scheduled"))
-      await store.dispatch('rule/fetchRules', { groupTypeEnumId: ruleGroup.value.groupTypeEnumId })
+      await store.dispatch('rule/fetchRules', { groupTypeEnumId: ruleGroup.value.groupTypeEnumId, pageSize: 50 })
     } else {
       throw resp.data
     }
@@ -99,4 +105,9 @@ ion-card-header {
   justify-content: space-between;
   align-items: center;
 }
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index c3f09cc0..f060ed4e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,6 +2,11 @@
   "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "add": "add",
   "Add": "Add",
+  "All channels selected": "All channels selected",
+  "All facilities selected": "All facilities selected",
+  "All facility groups selected": "All facility groups selected",
+  "All products selected.": "All products selected.",
+  "Any page made on this page will be lost. You will not be able to reverse this action.": "Any page made on this page will be lost. You will not be able to reverse this action.",
   "App": "App",
   "Apply": "Apply",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
@@ -21,10 +26,9 @@
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Color": "Color",
   "Configuration missing": "Configuration missing",
-  "Config facilities updated successfully.": "Config facilities updated successfully.",
   "Confirm": "Confirm",
   "Copy details": "Copy details",
-  "Create group": "Create group",
+  "Create channel group": "Create channel group",
   "Create new": "Create new",
   "Create rule": "Create rule",
   "Create Rule": "Create Rule",
@@ -40,6 +44,7 @@
   "Download": "Download",
   "Download data in csv": "Download data in csv",
   "Edit group": "Edit group",
+  "Edit channel group": "Edit channel group",
   "Edit name": "Edit name",
   "Edit rule": "Edit rule",
   "Edit safety stock": "Edit safety stock",
@@ -54,27 +59,33 @@
   "excluded": "excluded",
   "Excluded": "Excluded",
   "Exclude": "Exclude {label}",
+  "Exclude facility groups": "Exclude facility groups",
+  "Execution history": "Execution history",
   "Export product thresholds": "Export product thresholds",
   "Export product threshold jobs": "Export product threshold jobs",
   "Facilities": "Facilities",
   "Facilities associated to group successfully.": "Facilities associated to group successfully.",
   "Facility": "Facility",
+  "Facility association updated successfully with pickup group.": "Facility association updated successfully with pickup group.",
   "Failed": "Failed",
   "Failed to associate some facilites to group.": "Failed to associate some facilites to group.",
   "Failed to create rule.": "Failed to create rule.",
+  "Failed to create channel group.": "Failed to create channel group.",
   "Failed to disable rule group.": "Failed to disable rule group.",
   "Failed to update group.": "Failed to update group.",
   "Failed to update threshold facility.": "Failed to update threshold facility.",
+  "Failed to update sequence for some rules.": "Failed to update sequence for some rules.",
   "Failed to fetch rule information.": "Failed to fetch rule information.",
   "Failed to update rules order.": "Failed to update rules order.",
-  "Failed to update config facilities.": "Failed to update config facilities.",
   "Failed to update facility": "Failed to update facility",
-  "Failed to update product filters.": "Failed to update product filters.",
   "Failed to update some jobs": "Failed to update some jobs",
   "Failed to update threshold.": "Failed to update threshold.",
   "Failed to schedule service": "Failed to schedule service",
   "Failed to schedule service, hence other jobs are not updated": "Failed to schedule service, hence other jobs are not updated",
+  "Failed to update facility association with pickup group.": "Failed to update facility association with pickup group.",
   "features": "{type} features",
+  "Fetching": "Fetching {label}",
+  "Fetching facilities": "Fetching facilities",
   "Fetching time zones": "Fetching time zones",
   "Frequency": "Frequency",
   "Fulfillment capacity": "Fulfillment capacity",
@@ -88,11 +99,11 @@
   "Filter stores": "Filter stores",
   "ID": "ID",
   "Import product thresholds": "Import product thresholds",
+  "Include facility groups": "Include facility groups",
   "Included": "Included",
   "Internal ID cannot be more than 20 characters.": "Internal ID cannot be more than 20 characters.",
   "Inventory channels": "Inventory channels",
   "global threshold": "global threshold",
-  "Group history": "Group history",
   "Group updated successfully.": "Group updated successfully.",
   "included": "included",
   "Include": "Include {label}",
@@ -101,6 +112,7 @@
   "Jobs sequence updated successfully": "Jobs sequence updated successfully",
   "Keep editing": "Keep editing",
   "Last run": "Last run",
+  "Leave page": "Leave page",
   "Link facilities": "Link facilities",
   "Link threshold": "Link threshold",
   "Loading": "Loading",
@@ -116,18 +128,27 @@
   "New store pickup rule": "New store pickup rule",
   "New threshold rule": "New threshold rule",
   "New safety stock rule": "New safety stock rule",
+  "No": "No",
+  "No available history for rule.": "No available history for {name} rule.",
   "No Capacity": "No Capacity",
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility.{space} To add a fulfillment capacity to this facility, use the custom option.",
-  "No channel found for current product store.": "No channel found for current product store.",
+  "No channel found for selected product store. Either change the product store or associate channels with the product store.": "No channel found for selected product store. Either change the product store or associate channels with the product store.",
   "No facility found.": "No facility found.",
+  "No facility group found for selected product store. Either change the product store or associate facility groups with the product store.": "No facility group found for selected product store. Either change the product store or associate facility groups with the product store.",
   "No fulfillment capacity": "No fulfillment capacity",
+  "No inventory channel found.": "No inventory channel found.",
   "No job found.": "No job found.",
   "No jobs have run yet": "No jobs have run yet",
   "No jobs to update": "No jobs to update",
   "No previous occurrence": "No previous occurrence",
+  "No result found for": "No result found for {label}",
   "No rules found, redirecting to product page": "No rules found, redirecting to product page",
+  "No sequence has been changed.": "No sequence has been changed.",
+  "No safety stock rule found.": "No safety stock rule found.",
+  "No shipping rule found.": "No shipping rule found.",
+  "No store pickup rule found.": "No store pickup rule found.",
   "No threshold rule found. Invalid job": "No threshold rule found. Invalid job",
-  "No threshold rules found": "No threshold rules found",
+  "No threshold rule found.": "No threshold rule found.",
   "No time zone found": "No time zone found",
   "OMS instance": "OMS instance",
   "Only show selected products": "Only show selected products",
@@ -140,14 +161,14 @@
   "Paused": "Paused",
   "Pending": "Pending",
   "Please enter a threshold value to set for these products before proceeding.": "Please enter a threshold value to set for these products before proceeding.",
-  "Please include atleast one facility group.": "Please include atleast one facility group.",
+  "Please include atleast one facility.": "Please include atleast one facility.",
   "Please fill in all the required fields.": "Please fill in all the required fields.",
-  "Please select atleast one config facility.": "Please select atleast one config facility.",
+  "Please select atleast one channel.": "Please select atleast one channel.",
+  "Products": "Products",
   "Product and facility": "Product and facility",
   "Product and channel": "Product and channel",
   "Product list": "Product list",
   "Product features": "Product features",
-  "Product filters updated succesfully.": "Product filters updated succesfully.",
   "Product SKU column": "Product SKU column",
   "Product Store": "Product Store",
   "Product store": "Product store",
@@ -169,6 +190,8 @@
   "Rule created successfully.": "Rule created successfully.",
   "Rule group disabled successfully.": "Rule group disabled successfully.",
   "rule name": "rule name",
+  "Rule name can't be empty.": "Rule name can't be empty.",
+  "Rule updated successfully.": "Rule updated successfully.",
   "Rules order has been updated successfully.": "Rules order has been updated successfully.",
   "Run now": "Run now",
   "running": "running",
@@ -189,17 +212,19 @@
   "Schedule Job": "Schedule Job",
   "Search orders": "Search orders",
   "Search": "Search {label}",
+  "Search for to find results": "Search for {label} to find results",
   "Select": "Select {label}",
+  "Select all channels": "Select all channels",
+  "Select all facilities": "Select all facilities",
   "Select all variants": "Select all variants",
   "Select CSV": "Select CSV",
   "Selected products": "Selected products",
-  "Select facilities": "Select facilities",
   "Select facility": "Select facility",
-  "Select facility groups": "Select facility groups",
   "Select locations": "Select locations",
   "Select the column index for the following information in the uploaded CSV": "Select the column index for the following information in the uploaded CSV",
   "Select run time": "Select run time",
   "Select store": "Select store",
+  "Sequence for rules updated successfully.": "Sequence for rules updated successfully.",
   "Service has been scheduled": "Service has been scheduled",
   "Set safety stock": "Set safety stock",
   "Settings": "Settings",
@@ -246,12 +271,14 @@
   "Unable to schedule service.": "Unable to schedule service.",
   "Unable to update threshold rule.": "Unable to update threshold rule.",
   "Update": "Update",
+  "Edit shipping rule": "Edit shipping rule",
+  "Edit store pickup rule": "Edit store pickup rule",
   "Update time zone": "Update time zone",
-  "Update threshold rule": "Update threshold rule",
   "Unlimited": "Unlimited",
   "Unlimited Capacity": "Unlimited Capacity",
   "Unlimited fulfillment capacity": "Unlimited fulfillment 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.",
+  "Edit safety stock rule": "Edit safety stock rule",
   "Upload": "Upload",
   "Upload CSV": "Upload CSV",
   "Username": "Username",
@@ -261,6 +288,7 @@
   "variants": "variants",
   "Version: ": "Version: {appVersion}",
   "warehouse": "{count} warehouse",
+  "Yes": "Yes",
   "You can also download the products, locations and safety stock you selected in a CSV to upload in other systems": "You can also download the products, locations and safety stock you selected in a CSV to upload in other systems",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "You do not have permission to access the app.": "You do not have permission to access the app."
diff --git a/src/main.ts b/src/main.ts
index dd63efb9..0b356a1f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,6 +30,8 @@ import '@ionic/vue/css/display.css';
 import './theme/variables.css';
 
 import store from './store'
+import { login, logout, loader } from "@/user-utils";
+import { getConfig, initialise } from '@/adapter';
 
 
 const app = createApp(App)
@@ -42,7 +44,16 @@ const app = createApp(App)
   })
   .use(router)
   .use(store)
-  .use(dxpComponents, { localeMessages });
+  .use(dxpComponents, {
+    defaultImgUrl: require("@/assets/images/defaultImage.png"),
+    login,
+    logout,
+    loader,
+    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
+    getConfig,
+    initialise,
+    localeMessages
+  });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
 app.config.globalProperties.$filters = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 06975b11..1daf0e5c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,17 +2,17 @@ import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
-import Login from '@/views/Login.vue'
 import Threshold from '@/views/Threshold.vue'
 import SafetyStock from '@/views/SafetyStock.vue'
 import StorePickup from '@/views/StorePickup.vue'
 import Shipping from '@/views/Shipping.vue'
 import InventoryChannels from '@/views/InventoryChannels.vue'
-import CreateThresholdRule from '@/views/CreateThresholdRule.vue';
-import CreateSafetyStockRule from '@/views/CreateSafetyStockRule.vue'
-import CreateStorePickupRule from '@/views/CreateStorePickupRule.vue'
-import CreateShippingRule from '@/views/CreateShippingRule.vue'
-
+import CreateUpdateThresholdRule from '@/views/CreateUpdateThresholdRule.vue';
+import CreateUpdateSafetyStockRule from '@/views/CreateUpdateSafetyStockRule.vue'
+import CreateUpdateStorePickupRule from '@/views/CreateUpdateStorePickupRule.vue'
+import CreateUpdateShippingRule from '@/views/CreateUpdateShippingRule.vue'
+import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
+import { loader } from '@/user-utils';
 
 import 'vue-router'
 
@@ -24,19 +24,23 @@ declare module 'vue-router' {
 }
 
 const authGuard = async (to: any, from: any, next: any) => {
-  if (store.getters["user/isAuthenticated"]) {
-    next()
-  } else {
-    next("/login")
+  const authStore = useAuthStore()
+  if (!authStore.isAuthenticated || !store.getters['user/isAuthenticated']) {
+    await loader.present('Authenticating')
+    // TODO use authenticate() when support is there
+    const redirectUrl = window.location.origin + '/login'
+    window.location.href = `${process.env.VUE_APP_LOGIN_URL}?redirectUrl=${redirectUrl}`
+    loader.dismiss()
   }
+  next()
 };
 
 const loginGuard = (to: any, from: any, next: any) => {
-  if (!store.getters["user/isAuthenticated"]) {
-    next()
-  } else {
-    next("/")
+  const authStore = useAuthStore()
+  if (authStore.isAuthenticated && !to.query?.token && !to.query?.oms) {
+    next('/')
   }
+  next();
 };
 
 const routes: Array<RouteRecordRaw> = [
@@ -77,31 +81,59 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/create-threshold',
     name: 'Create threshold',
-    component: CreateThresholdRule,
+    component: CreateUpdateThresholdRule,
     beforeEnter: authGuard
   },
   {
     path: '/create-safety-stock',
     name: 'Create safety stock',
-    component: CreateSafetyStockRule,
+    component: CreateUpdateSafetyStockRule,
     beforeEnter: authGuard
   },
   {
     path: '/create-store-pickup',
     name: 'Create store pickup',
-    component: CreateStorePickupRule,
+    component: CreateUpdateStorePickupRule,
     beforeEnter: authGuard
   },
   {
     path: '/create-shipping',
     name: 'Create shipping',
-    component: CreateShippingRule,
+    component: CreateUpdateShippingRule,
     beforeEnter: authGuard
   },
+  {
+    path: '/update-threshold/:ruleId',
+    name: 'Update threshold',
+    component: CreateUpdateThresholdRule,
+    beforeEnter: authGuard,
+    props: true
+  },
+  {
+    path: '/update-safety-stock/:ruleId',
+    name: 'Update safety stock',
+    component: CreateUpdateSafetyStockRule,
+    beforeEnter: authGuard,
+    props: true
+  },
+  {
+    path: '/update-store-pickup/:ruleId',
+    name: 'Update store pickup',
+    component: CreateUpdateStorePickupRule,
+    beforeEnter: authGuard,
+    props: true
+  },
+  {
+    path: '/update-shipping/:ruleId',
+    name: 'Update shipping',
+    component: CreateUpdateShippingRule,
+    beforeEnter: authGuard,
+    props: true
+  },
   {
     path: '/login',
     name: 'DxpLogin',
-    component: Login,
+    component: DxpLogin,
     beforeEnter: loginGuard
   },
   {
diff --git a/src/services/ChannelService.ts b/src/services/ChannelService.ts
index 72812a83..da4b9500 100644
--- a/src/services/ChannelService.ts
+++ b/src/services/ChannelService.ts
@@ -2,7 +2,7 @@ import api from '@/api';
 
 const fetchInventoryChannels = async (payload: any): Promise <any>  => {
   return api({
-    url: 'facilityGroups',
+    url: `productStores/${payload.productStoreId}/facilityGroups`,
     method: "GET",
     params: payload
   });
diff --git a/src/services/RuleService.ts b/src/services/RuleService.ts
index e614537e..377048dc 100644
--- a/src/services/RuleService.ts
+++ b/src/services/RuleService.ts
@@ -12,7 +12,7 @@ const fetchRuleGroup = async (payload: any): Promise <any>  => {
 
 const fetchRules = async (payload: any): Promise <any>  => {
   return api({
-    url: `ruleGroups/${payload.ruleGroupId}/rules`,
+    url: `decisionRules`,
     method: "GET",
     params: payload
   });
@@ -78,24 +78,6 @@ const updateRule = async (payload: any, ruleId: string): Promise <any>  => {
   }
 }
 
-const fetchRulesActionsAndConditions = async (ruleId: any): Promise <any>  => {
-  try {
-    const resp = await api({
-      url: `decisionRules/${ruleId}`,
-      method: "GET"
-    }) as any;
-
-    if(!hasError(resp)) {
-      return Promise.resolve(resp.data)
-    } else {
-      throw resp.data
-    }
-  } catch(err: any) {
-    logger.error(err)
-    return Promise.reject("Failed to fetch rule information.");
-  }
-}
-
 const fetchRuleScheduleInformation = async (ruleGroupId: string): Promise<any> => {
   return api({
     url: `ruleGroups/${ruleGroupId}/schedule`,
@@ -111,10 +93,11 @@ const scheduleRuleGroup = async (payload: any): Promise<any> => {
   });
 }
 
-const fetchRuleGroupHistory = async (jobName: string): Promise<any> => {
+const fetchRuleGroupHistory = async (payload: any): Promise<any> => {
   return api({
-    url: `serviceJobRuns/${jobName}`,
-    method: "GET"
+    url: `serviceJobRuns/${payload.jobName}`,
+    method: "GET",
+    params: payload
   });
 }
 
@@ -125,13 +108,21 @@ const runNow = async (ruleGroupId: any): Promise<any> => {
   });
 }
 
+const deleteCondition = async (payload: any): Promise<any> => {
+  return api({
+    url: `decisionRules/${payload.ruleId}/conditions`,
+    method: "delete",
+    data: payload
+  });
+}
+
 export const RuleService = {
   createRule,
   createRuleGroup,
+  deleteCondition,
   fetchRuleGroup,
   fetchRuleGroupHistory,
   fetchRules,
-  fetchRulesActionsAndConditions,
   fetchRuleScheduleInformation,
   runNow,
   scheduleRuleGroup,
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 065d50cb..8911333d 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -2,31 +2,38 @@ import api, {client} from '@/api';
 import store from "@/store";
 import { hasError } from "@/utils";
 
-const login = async (username: string, password: string): Promise <any> => {
-  let token = ""
+const login = async (token: string): Promise <any> => {
+  const url = store.getters["user/getBaseUrl"]
+  const baseURL = url.startsWith('http') ? url.includes('/rest/s1/available-to-promise') ? url : `${url}/rest/s1/available-to-promise/` : `https://${url}.hotwax.io/rest/s1/available-to-promise/`;
+  let api_key = ""
+
   try {
-    const resp = await api({
+    const resp = await client({
       url: "login", 
       method: "post",
-      data: {
-        username,
-        password
+      baseURL,
+      params: {
+        token
+      },
+      headers: {
+        "Content-Type": "application/json"
       }
     }) as any;
 
-    if(!hasError(resp) && resp.data.token) {
-      token = resp.data.token
+    if(!hasError(resp) && (resp.data.api_key || resp.data.token)) {
+      api_key = resp.data.api_key || resp.data.token
     } else {
       throw "Sorry, login failed. Please try again";
     }
   } catch(err) {
     return Promise.reject("Sorry, login failed. Please try again");
   }
-  return Promise.resolve(token)
+  return Promise.resolve(api_key)
 }
 
 const getUserProfile = async (token: any): Promise<any> => {
-  const baseURL = store.getters["user/getBaseUrl"];
+  const url = store.getters["user/getBaseUrl"];
+  const baseURL = url.startsWith('http') ? url.includes('/rest/s1/available-to-promise') ? url : `${url}/rest/s1/available-to-promise/` : `https://${url}.hotwax.io/rest/s1/available-to-promise/`;
   try {
     const resp = await client({
       url: "user/profile",
@@ -62,7 +69,8 @@ const setUserTimeZone = async (payload: any): Promise <any>  => {
 
 const getEComStores = async (token: any): Promise<any> => {
   try {
-    const baseURL = store.getters["user/getBaseUrl"];
+    const url = store.getters["user/getBaseUrl"];
+    const baseURL = url.startsWith('http') ? url.includes('/rest/s1/available-to-promise') ? url : `${url}/rest/s1/available-to-promise/` : `https://${url}.hotwax.io/rest/s1/available-to-promise/`;
     const resp = await client({
       url: "user/productStore",
       method: "GET",
diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
index e66e3c19..87c6f83b 100644
--- a/src/services/UtilService.ts
+++ b/src/services/UtilService.ts
@@ -1,4 +1,4 @@
-import api, {client} from '@/api';
+import api from '@/api';
 
 const fetchFacets = async (payload: any): Promise<any> => {
   return api({
@@ -27,7 +27,8 @@ const updateFacility = async (payload: any): Promise <any>  => {
 const fetchFacilityGroups = async (payload: any): Promise <any>  => {
   return api({
     url: `productStores/${payload.productStoreId}/facilityGroups`,
-    method: "GET"
+    method: "GET",
+    params: payload
   });
 }
 
@@ -39,10 +40,28 @@ const fetchFacilitiesOrderCount = async (payload: any): Promise <any>  => {
   });
 }
 
+const fetchPickupGroupFacilities = async (payload: any): Promise <any>  => {
+  return api({
+    url: `facilityGroups/${payload.facilityGroupId}/facilities`,
+    method: "GET",
+    params: payload
+  });
+}
+
+const updateFacilityAssociationWithPickupGroup = async (payload: any): Promise <any>  => {
+  return api({
+    url: `facilityGroups/${payload.facilityGroupId}/facilities/${payload.facilityId}/association`,
+    method: "POST",
+    data: payload
+  });
+}
+
 export const UtilService = {
   fetchFacilities,
   fetchFacilitiesOrderCount,
   updateFacility,
   fetchFacilityGroups,
   fetchFacets,
+  fetchPickupGroupFacilities,
+  updateFacilityAssociationWithPickupGroup
 }
\ No newline at end of file
diff --git a/src/store/modules/channel/actions.ts b/src/store/modules/channel/actions.ts
index 753ec954..e6843965 100644
--- a/src/store/modules/channel/actions.ts
+++ b/src/store/modules/channel/actions.ts
@@ -9,12 +9,12 @@ import store from "@/store"
 
 const actions: ActionTree<ChannelState, RootState> = {
 
-  async fetchInventoryChannels ({ commit, state, dispatch }) {
+  async fetchInventoryChannels ({ commit, dispatch }) {
     let resp = {} as any;
     let inventoryChannels = [] as any
 
     try {
-      resp = await ChannelService.fetchInventoryChannels({ facilityGroupTypeId: "CHANNEL_FAC_GROUP" });
+      resp = await ChannelService.fetchInventoryChannels({ facilityGroupTypeId: "CHANNEL_FAC_GROUP", productStoreId: store.state.user.currentEComStore.productStoreId, pageSize: 50 });
 
       if(!hasError(resp)) {
         inventoryChannels = resp?.data;
@@ -33,29 +33,22 @@ const actions: ActionTree<ChannelState, RootState> = {
     const groups = JSON.parse(JSON.stringify(state.inventoryChannels))
 
     if(facilityGroupId) {
-      const resp = await ChannelService.fetchGroupFacilities({ facilityGroupId })
+      const resp = await ChannelService.fetchGroupFacilities({ facilityGroupId, pageSize: 100 })
 
       if(!hasError(resp)) {
-        // Currently expired records are coming also while fetching, hence filtering records with thruDate for now.
-        resp.data = resp.data.filter((facility: any) => !facility.thruDate)
-
         const currentGroup = groups.find((group: any) => group.facilityGroupId === facilityGroupId)
         currentGroup.selectedConfigFacility = await resp.data.find((facility: any) => facility.facilityTypeId === "CONFIGURATION")
-        currentGroup.selectedFacilities = await resp.data.filter((facility: any) => facility.facilityTypeId === "RETAIL_STORE" || facility.facilityTypeId === "WAREHOUSE")
+        currentGroup.selectedFacilities = await resp.data.filter((facility: any) => facility.parentFacilityTypeId !== "VIRTUAL_FACILITY" && facility.facilityTypeId !== "VIRTUAL_FACILITY")
       } else {
         throw resp.data
       }
     } else {
       await Promise.allSettled(groups.map(async (group: any) => {
         try {
-          const resp = await ChannelService.fetchGroupFacilities({ facilityGroupId: group.facilityGroupId });
-
+          const resp = await ChannelService.fetchGroupFacilities({ facilityGroupId: group.facilityGroupId, pageSize: 100 });
           if(!hasError(resp)) {
-            // Currently expired records are coming also while fetching, hence filtering records with thruDate for now.
-            resp.data = resp.data.filter((facility: any) => !facility.thruDate)
-
             group.selectedConfigFacility = await resp.data.find((facility: any) => facility.facilityTypeId === "CONFIGURATION")
-            group.selectedFacilities = await resp.data.filter((facility: any) => facility.facilityTypeId === "RETAIL_STORE" || facility.facilityTypeId === "WAREHOUSE")
+            group.selectedFacilities = await resp.data.filter((facility: any) => (facility.parentFacilityTypeId !== "VIRTUAL_FACILITY" && facility.facilityTypeId !== "VIRTUAL_FACILITY"))
           } else {
             throw resp.data
           }
diff --git a/src/store/modules/rule/RuleState.ts b/src/store/modules/rule/RuleState.ts
index eb62feae..a5902ff1 100644
--- a/src/store/modules/rule/RuleState.ts
+++ b/src/store/modules/rule/RuleState.ts
@@ -1,4 +1,5 @@
 export default interface RuleState {
   rules: any;
   ruleGroup: any;
+  isReorderActive: boolean;
 }
\ No newline at end of file
diff --git a/src/store/modules/rule/actions.ts b/src/store/modules/rule/actions.ts
index f1a47216..8c135a59 100644
--- a/src/store/modules/rule/actions.ts
+++ b/src/store/modules/rule/actions.ts
@@ -15,7 +15,7 @@ const actions: ActionTree<RuleState, RootState> = {
     let resp;
 
     try {
-      resp = await RuleService.fetchRuleGroup({ ...payload, productStoreId: productStore.productStoreId })
+      resp = await RuleService.fetchRuleGroup({ ...payload, productStoreId: productStore.productStoreId, statusId: "ATP_RG_ACTIVE" })
 
       if(!hasError(resp) && resp.data.length) {
         ruleGroup = resp.data[0]
@@ -36,7 +36,7 @@ const actions: ActionTree<RuleState, RootState> = {
   },
 
   async fetchRules({ commit, dispatch }, payload) {
-    const rules = [] as any;
+    let rules = [] as any;
 
     try {
       const ruleGroup = await dispatch('fetchRuleGroup', payload)
@@ -53,20 +53,7 @@ const actions: ActionTree<RuleState, RootState> = {
       })
 
       if(!hasError(resp)) {
-        const responses = await Promise.allSettled(
-          resp.data.map((rule: any) => RuleService.fetchRulesActionsAndConditions(rule.ruleId))
-        )
-
-        const hasFailedResponse = responses.some((response: any) => hasError(response.value))
-        if (hasFailedResponse) {
-          logger.error('Failed to fetch some rules')
-        }
-
-        responses.map((response: any) => {
-          if(response.status === 'fulfilled') {
-            rules.push(response.value)
-          }
-        })
+        rules = resp.data;
       } else {
         throw resp.data
       }
@@ -108,6 +95,10 @@ const actions: ActionTree<RuleState, RootState> = {
   async clearRuleState({ commit }) {
     commit(types.RULE_CLEARED)
   },
+
+  async updateIsReorderActive({ commit }, payload) {
+    commit(types.RULE_REORDER_ACTIVE_UPDATED, payload)
+  },
 }
 
 export default actions;
\ No newline at end of file
diff --git a/src/store/modules/rule/getters.ts b/src/store/modules/rule/getters.ts
index 17899261..818858f4 100644
--- a/src/store/modules/rule/getters.ts
+++ b/src/store/modules/rule/getters.ts
@@ -11,6 +11,9 @@ const getters: GetterTree <RuleState, RootState> = {
   },
   getRuleGroup (state) {
     return state.ruleGroup
+  },
+  isReorderActive (state) {
+    return state.isReorderActive
   }
 }
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/rule/index.ts b/src/store/modules/rule/index.ts
index d3e52d6d..62315378 100644
--- a/src/store/modules/rule/index.ts
+++ b/src/store/modules/rule/index.ts
@@ -12,7 +12,8 @@ const userModule: Module<RuleState, RootState> = {
       list: [],
       total: ''
     },
-    ruleGroup: {}
+    ruleGroup: {},
+    isReorderActive: false
   },
   getters,
   actions,
diff --git a/src/store/modules/rule/mutation-types.ts b/src/store/modules/rule/mutation-types.ts
index 487424e2..10dd7d65 100644
--- a/src/store/modules/rule/mutation-types.ts
+++ b/src/store/modules/rule/mutation-types.ts
@@ -1,4 +1,5 @@
 export const SN_RULE = 'rule'
 export const RULE_RULES_UPDATED = SN_RULE + '/RULES_UPDATED'
 export const RULE_GROUP_UPDATED = SN_RULE + '/GROUP_UPDATED'
+export const RULE_REORDER_ACTIVE_UPDATED = SN_RULE + '/REORDER_ACTIVE_UPDATED'
 export const RULE_CLEARED = SN_RULE + "/CLEARED"
\ No newline at end of file
diff --git a/src/store/modules/rule/mutations.ts b/src/store/modules/rule/mutations.ts
index fecbe0fd..49cbfc23 100644
--- a/src/store/modules/rule/mutations.ts
+++ b/src/store/modules/rule/mutations.ts
@@ -10,12 +10,16 @@ const mutations: MutationTree <RuleState> = {
   [types.RULE_GROUP_UPDATED] (state, payload) {
     state.ruleGroup = payload;
   },
+  [types.RULE_REORDER_ACTIVE_UPDATED] (state, payload) {
+    state.isReorderActive = payload;
+  },
   [types.RULE_CLEARED](state) {
     state.rules = {
       list: [],
       total: ''
     },
-    state.ruleGroup = {}
+    state.ruleGroup = {},
+    state.isReorderActive= false
   },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
index afbd45ce..99e98b35 100644
--- a/src/store/modules/user/UserState.ts
+++ b/src/store/modules/user/UserState.ts
@@ -1,6 +1,11 @@
 export default interface UserState {
+  token: string;
+  current: object | null;
+  instanceUrl: string;
+  currentEComStore: object;
+  omsRedirectionInfo: {
+    url: string;
     token: string;
-    current: object | null;
-    instanceUrl: string;
-    currentEComStore: object;
+  }
+  pwaState: any;
 }
\ No newline at end of file
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 986b7add..1bfd6ff6 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -8,6 +8,8 @@ import { translate } from '@hotwax/dxp-components';
 import logger from "@/logger";
 import emitter from '@/event-bus'
 import { Settings } from "luxon"
+import { useAuthStore } from '@hotwax/dxp-components'
+import { resetConfig } from '@/adapter'
 
 
 const actions: ActionTree<UserState, RootState> = {
@@ -15,46 +17,55 @@ const actions: ActionTree<UserState, RootState> = {
   /**
  * Login user and return token
  */
-  async login ({ commit }, { username, password }) {
+  async login ({ commit, dispatch }, payload) {
     try {
-      if(!username.length || !password.length) {
-        return Promise.reject('')
-      }
-
-      emitter.emit("presentLoader", { message: "Logging in...", backdropDismiss: false })
       // TODO: implement support for permission check
-      const token = await UserService.login(username, password)
 
-      const userProfile = await UserService.getUserProfile(token);
+      const { token, oms, omsRedirectionUrl } = payload;
+      dispatch("setUserInstanceUrl", oms);
 
+      emitter.emit("presentLoader", { message: "Logging in...", backdropDismiss: false })
+      const api_key = await UserService.login(token)
+      
+      const userProfile = await UserService.getUserProfile(api_key);
+      
       // TODO: fetch only associated product stores for user, currently api does not support this
-      userProfile.stores = await UserService.getEComStores(token);
-
+      userProfile.stores = await UserService.getEComStores(api_key);
+      
       if (userProfile.timeZone) {
         Settings.defaultZone = userProfile.timeZone;
       }
 
-      commit(types.USER_TOKEN_CHANGED, { newToken: token })
+      if(omsRedirectionUrl && token) {
+        dispatch("setOmsRedirectionInfo", { url: omsRedirectionUrl, token })
+      }
+      commit(types.USER_TOKEN_CHANGED, { newToken: api_key })
       emitter.emit("dismissLoader")
       commit(types.USER_INFO_UPDATED, userProfile);
       commit(types.USER_CURRENT_ECOM_STORE_UPDATED, userProfile.stores.length ? userProfile.stores[0] : {});
-      return Promise.resolve({ token })
     } catch (err: any) {
       emitter.emit("dismissLoader")
       showToast(translate(err));
       logger.error("error", err);
-      return Promise.reject(new Error(err))
+      return Promise.reject(err instanceof Object ? err :  Error(err))
     }
   },
 
   /**
    * Logout user
    */
-  async logout ({ commit }) {
+  async logout ({ commit, dispatch }) {
+    const authStore = useAuthStore()
+
     // TODO add any other tasks if need
     commit(types.USER_END_SESSION)
     this.dispatch("rule/clearRuleState")
     this.dispatch("util/clearUtilState")
+    dispatch("setOmsRedirectionInfo", { url: "", token: "" })
+    resetConfig();
+
+    // reset plugin state on logout
+    authStore.$reset()
   },
 
   
@@ -77,12 +88,20 @@ const actions: ActionTree<UserState, RootState> = {
     commit(types.USER_INSTANCE_URL_UPDATED, payload)
   },
 
+  setOmsRedirectionInfo({ commit }, payload) {
+    commit(types.USER_OMS_REDIRECTION_INFO_UPDATED, payload)
+  },
+
   setEcomStore({ commit, state }, payload) {
     let productStore = payload.productStore;
     if(!productStore) {
       productStore = (state.current as any).stores.find((store: any) => store.productStoreId === payload.productStoreId);
     }
     commit(types.USER_CURRENT_ECOM_STORE_UPDATED, productStore);
+  },
+
+  updatePwaState({ commit }, payload) {
+    commit(types.USER_PWA_STATE_UPDATED, payload);
   }
 }
 
diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
index 849c7826..9c7e75c8 100644
--- a/src/store/modules/user/getters.ts
+++ b/src/store/modules/user/getters.ts
@@ -4,8 +4,7 @@ import RootState from '@/store/RootState'
 
 const getters: GetterTree <UserState, RootState> = {
     getBaseUrl (state) {
-        let baseURL = process.env.VUE_APP_BASE_URL;
-        if (!baseURL) baseURL = state.instanceUrl;
+        const baseURL = state.instanceUrl;
         return baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/rest/s1/available-to-promise/`;
     },
     isAuthenticated (state) {
@@ -21,11 +20,16 @@ const getters: GetterTree <UserState, RootState> = {
         return state.current
     },
     getInstanceUrl (state) {
-        const baseUrl = process.env.VUE_APP_BASE_URL;
-        return baseUrl ? baseUrl : state.instanceUrl;
+        return state.instanceUrl;
     },
     getCurrentEComStore(state) {
         return state.currentEComStore
     },
+    getOmsRedirectionInfo(state) {
+        return state.omsRedirectionInfo;
+    },
+    getPwaState(state) {
+        return state.pwaState;
+    },
 }
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index 1d2cbb56..02c6ed70 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -11,7 +11,15 @@ const userModule: Module<UserState, RootState> = {
       token: '',
       current: {},
       instanceUrl: '',
-      currentEComStore: {}
+      currentEComStore: {},
+      omsRedirectionInfo: {
+        url: "",
+        token: ""
+      },
+      pwaState: {
+        updateExists: false,
+        registration: null,
+      }
     },
     getters,
     actions,
diff --git a/src/store/modules/user/mutation-types.ts b/src/store/modules/user/mutation-types.ts
index e7c812f4..21406679 100644
--- a/src/store/modules/user/mutation-types.ts
+++ b/src/store/modules/user/mutation-types.ts
@@ -3,4 +3,6 @@ export const USER_TOKEN_CHANGED = SN_USER + '/TOKEN_CHANGED'
 export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
-export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
\ No newline at end of file
+export const USER_CURRENT_ECOM_STORE_UPDATED = SN_USER + '/CURRENT_ECOM_STORE_UPDATED'
+export const USER_OMS_REDIRECTION_INFO_UPDATED = SN_USER + '/OMS_REDIRECTION_INFO_UPDATED'
+export const USER_PWA_STATE_UPDATED = SN_USER + '/PWA_STATE_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
index 1813dcb0..dfde20c4 100644
--- a/src/store/modules/user/mutations.ts
+++ b/src/store/modules/user/mutations.ts
@@ -20,5 +20,12 @@ const mutations: MutationTree <UserState> = {
     [types.USER_CURRENT_ECOM_STORE_UPDATED] (state, payload) {
         state.currentEComStore = payload;
     },
+    [types.USER_OMS_REDIRECTION_INFO_UPDATED](state, payload) {
+        state.omsRedirectionInfo = payload;
+    },
+    [types.USER_PWA_STATE_UPDATED](state, payload) {
+        state.pwaState.registration = payload.registration;
+        state.pwaState.updateExists = payload.updateExists;
+    },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
index 10a51842..1716b899 100644
--- a/src/store/modules/util/UtilState.ts
+++ b/src/store/modules/util/UtilState.ts
@@ -3,4 +3,7 @@ export default interface UtilState {
   appliedFilters: any;
   facilityGroups: any;
   facilities: any;
+  selectedSegment: any;
+  pickupGroups: any;
+  pickupGroupFacilities: any;
 }
\ No newline at end of file
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index 4560fcde..069746ea 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -10,10 +10,8 @@ import { DateTime } from 'luxon'
 
 
 const actions: ActionTree<UtilState, RootState> = {
-  async fetchConfigFacilities ({ commit, state }) {
-    let configFacilities = JSON.parse(JSON.stringify(state.configFacilities))
-
-    if(configFacilities.length && configFacilities[0].productStoreId === store.state.user.currentEComStore.productStoreId) return;
+  async fetchConfigFacilities ({ commit }) {
+    let configFacilities = [];
 
     try {
       const resp = await UtilService.fetchFacilities({ facilityTypeId: 'CONFIGURATION', productStoreId: store.state.user.currentEComStore.productStoreId });
@@ -29,12 +27,11 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_CONFIG_FACILITES_UPDATED, configFacilities)
   },
 
-  async fetchFacilityGroups ({ commit, state }) {
-    let facilityGroups = JSON.parse(JSON.stringify(state.facilityGroups))
+  async fetchFacilityGroups ({ commit }) {
+    let facilityGroups = {};
 
-    if(facilityGroups.length && facilityGroups[0].productStoreId === store.state.user.currentEComStore.productStoreId) return;
     try {
-      const resp = await UtilService.fetchFacilityGroups({ productStoreId: store.state.user.currentEComStore.productStoreId });
+      const resp = await UtilService.fetchFacilityGroups({ productStoreId: store.state.user.currentEComStore.productStoreId, pageSize: 100 });
 
       if(!hasError(resp)) {
         facilityGroups = resp.data;
@@ -47,7 +44,7 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_FACILITY_GROUPS_UPDATED, facilityGroups)
   },
 
-  async updateAppliedFilters ({ commit, state }, payload) {
+  async updateAppliedFilters ({ commit }, payload) {
     commit(types.UTIL_APPLIED_FILTERS_UPDATED, payload)
   },
 
@@ -128,8 +125,69 @@ const actions: ActionTree<UtilState, RootState> = {
     return facilitiesData;
   },
 
+  async fetchPickupGroups({ commit, dispatch }) {
+    let groups = [] as any;
+    const pickGroupFacilities = {} as any;
+
+    try {
+      const resp = await UtilService.fetchFacilityGroups({ facilityGroupTypeId: 'PICKUP', productStoreId: store.state.user.currentEComStore.productStoreId, pageSize: 100 })
+
+      if(!hasError(resp)) {
+        groups = resp.data;
+        const responses = await Promise.allSettled(groups.map(async (group: any) => {
+          const facilities = await dispatch("fetchPickGroupFacilities", group.facilityGroupId)
+          pickGroupFacilities[group.facilityGroupId] = facilities
+        }))
+
+        const hasFailedResponse = responses.some((response: any) => response.status === 'rejected')
+        if (hasFailedResponse) {
+          logger.error("Failed to fetch facilities for some pickup group.")
+        }
+      } else {
+        throw resp.data
+      }
+    } catch(error) {
+      logger.error(error)
+    }
+    commit(types.UTIL_PICKUP_GROUPS_UPDATED , groups);
+    commit(types.UTIL_PICKUP_GROUP_FACILITIES , pickGroupFacilities);
+  },
+
+  async fetchPickGroupFacilities({ commit }, facilityGroupId) {
+    let pickupGroupFacilities = [] as any;
+
+    try {
+      const resp = await UtilService.fetchPickupGroupFacilities({ 
+        facilityGroupId,
+        pageSize: 100,
+        parentFacilityTypeId: 'VIRTUAL_FACILITY',
+        parentFacilityTypeId_not: 'Y',
+        facilityTypeId: 'VIRTUAL_FACILITY',
+        facilityTypeId_not: 'Y',
+      })
+
+      if(!hasError(resp)) {
+        pickupGroupFacilities = resp.data;
+        
+      } else {
+        throw resp.data
+      }
+    } catch(error) {
+      logger.error(error)
+    }
+    return pickupGroupFacilities;
+  },
+
+  async updatePickupGroupFacilities({ commit }, payload) {
+    commit(types.UTIL_PICKUP_GROUP_FACILITIES , payload);
+  },
+
   async updateFacilities({ commit, state }, payload) {
     commit(types.UTIL_FACILITY_LIST_UPDATED , { facilities: payload.facilities, isScrollable: state.facilities.isScrollable });
+  },
+
+  async updateSelectedSegment({ commit }, payload) {
+    commit(types.UTIL_SELECTED_SEGMENT_UPDATED , payload);
   }
 }
 
diff --git a/src/store/modules/util/getters.ts b/src/store/modules/util/getters.ts
index c8903d4f..9ec8c000 100644
--- a/src/store/modules/util/getters.ts
+++ b/src/store/modules/util/getters.ts
@@ -18,6 +18,15 @@ const getters: GetterTree<UtilState, RootState> = {
   isFacilitiesScrollable(state) {
     return state.facilities.isScrollable
   },
+  getSelectedSegment(state) {
+    return state.selectedSegment
+  },
+  getPickupGroups(state) {
+    return state.pickupGroups
+  },
+  getPickupGroupFacilities(state) {
+    return state.pickupGroupFacilities
+  },
 }
 
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/util/index.ts b/src/store/modules/util/index.ts
index 7e5c2a68..c88207ec 100644
--- a/src/store/modules/util/index.ts
+++ b/src/store/modules/util/index.ts
@@ -24,6 +24,9 @@ const utilModule: Module<UtilState, RootState> = {
       list: [],
       isScrollable: true
     },
+    selectedSegment: "",
+    pickupGroups: [],
+    pickupGroupFacilities: {}
   },
   getters,
   actions,
diff --git a/src/store/modules/util/mutation-types.ts b/src/store/modules/util/mutation-types.ts
index 55c2b817..a4a05217 100644
--- a/src/store/modules/util/mutation-types.ts
+++ b/src/store/modules/util/mutation-types.ts
@@ -4,4 +4,7 @@ export const UTIL_APPLIED_FILTERS_UPDATED = SN_UTIL + '/APPLIED_FILTERS_UPDATED'
 export const UTIL_CLEARED = SN_UTIL + '/CLEARED'
 export const UTIL_APPLIED_FILTERS_CLEARED = SN_UTIL + '/APPLIED_FILTERS_CLEARED'
 export const UTIL_FACILITY_GROUPS_UPDATED = SN_UTIL + '/FACILITY_GROUPS_UPDATED'
-export const UTIL_FACILITY_LIST_UPDATED = SN_UTIL + '/FACILITY_LIST_UPDATED'
\ No newline at end of file
+export const UTIL_FACILITY_LIST_UPDATED = SN_UTIL + '/FACILITY_LIST_UPDATED'
+export const UTIL_SELECTED_SEGMENT_UPDATED = SN_UTIL + '/SELECTED_SEGMENT_UPDATED'
+export const UTIL_PICKUP_GROUPS_UPDATED = SN_UTIL + '/PICKUP_GROUPS_UPDATED'
+export const UTIL_PICKUP_GROUP_FACILITIES = SN_UTIL + '/PICKUP_GROUP_FACILITIES_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/util/mutations.ts b/src/store/modules/util/mutations.ts
index 3f9122bf..1e645f4b 100644
--- a/src/store/modules/util/mutations.ts
+++ b/src/store/modules/util/mutations.ts
@@ -41,5 +41,14 @@ const mutations: MutationTree <UtilState> = {
     state.facilities.list = payload.facilities
     state.facilities.isScrollable = payload.isScrollable
   },
+  [types.UTIL_SELECTED_SEGMENT_UPDATED](state, payload) {
+    state.selectedSegment = payload
+  },
+  [types.UTIL_PICKUP_GROUPS_UPDATED](state, payload) {
+    state.pickupGroups = payload
+  },
+  [types.UTIL_PICKUP_GROUP_FACILITIES](state, payload) {
+    state.pickupGroupFacilities = payload
+  },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 8229085d..e25f30c4 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -317,8 +317,12 @@ hr {
 }
 
 .rule-inputs {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.rule-inputs>* {
+  flex: 1 0 350px;
 }
 
 .section-header {
@@ -344,6 +348,10 @@ ion-content>section {
   text-align: center; 
 }
 
+ion-toolbar > ion-segment {
+  width: unset;
+}
+
 @media (min-width: 700px) {
   main {
     max-width: 375px;
@@ -399,8 +407,4 @@ ion-content>section {
   .sort > div > :first-child{
     border-bottom: unset;
   }
-
-  ion-header {
-    display: flex;
-  }
 }
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ad92e492..94eb8119 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -39,4 +39,130 @@ const generateInternalId = (name: string) => {
   return name.trim().toUpperCase().split(' ').join('_');
 }
 
-export { generateInternalId, getDate, getDateAndTime, getTime, hasError, showToast, timeTillRun }
\ No newline at end of file
+const doReorder = (event: CustomEvent, rules: any) => {
+  const previousSeq = JSON.parse(JSON.stringify(rules))
+
+  // returns the updated sequence after reordering
+  const updatedSeq = event.detail.complete(JSON.parse(JSON.stringify(rules)));
+
+  let diffSeq = findRulesDiff(previousSeq, updatedSeq)
+
+  const updatedSeqenceNum = previousSeq.map((rule: any) => rule.sequenceNum)
+  Object.keys(diffSeq).map((key: any) => {
+    diffSeq[key].sequenceNum = updatedSeqenceNum[key]
+  })
+
+  diffSeq = Object.keys(diffSeq).map((key) => diffSeq[key])
+  return updatedSeq
+}
+
+const findRulesDiff = (previousSeq: any, updatedSeq: any) => {
+  const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
+    if (updatedSeq[key].ruleId === previousSeq[key].ruleId && updatedSeq[key].sequenceNum === previousSeq[key].sequenceNum) return diff
+    return {
+      ...diff,
+      [key]: updatedSeq[key]
+    }
+  }, {})
+  return diffSeq;
+}
+
+const generateRuleActions = (ruleId: string, actionTypeEnumId: string, actionValue: any, isConditionExists: boolean, ruleActions: any) => {
+  if(isConditionExists) {
+    const ruleAction = ruleActions.find((action: any) => action.actionTypeEnumId === actionTypeEnumId)
+    if(ruleAction) {
+      if(actionTypeEnumId === "ATP_THRESHOLD" || actionTypeEnumId === "ATP_SAFETY_STOCK") {
+        ruleAction.fieldValue = actionValue ? actionValue : 0;
+      } else {
+        ruleAction.fieldValue = actionValue ? "Y" : "N"
+      }
+      return [ruleAction];
+    }
+  }
+
+  let condition;
+  if(actionTypeEnumId === "ATP_THRESHOLD" || actionTypeEnumId === "ATP_SAFETY_STOCK") {
+    condition = [{
+      ruleId,
+      actionTypeEnumId,
+      "fieldName": "facility-safety-stock",
+      "fieldValue": actionValue ? actionValue : 0
+    }]
+  } else {
+    condition = [{
+      ruleId,
+      actionTypeEnumId,
+      "fieldName": actionTypeEnumId === "ATP_ALLOW_PICKUP" ? "allow-pickup" : "allow-brokering",
+      "fieldValue": actionValue ? "Y" : "N"
+    }]
+  }
+  return condition
+}
+
+const generateRuleConditions = (ruleId: string, conditionTypeEnumId: string, appliedFilters: any, selectedFac: any, areAllSelected: boolean) => {
+  const conditions = [];
+
+  if(areAllSelected) {
+    conditions.push({
+      "ruleId": ruleId,
+      conditionTypeEnumId,
+      "fieldName": conditionTypeEnumId === "ENTCT_ATP_FACILITIES" ? "facilityId" : "facilityGroupId",
+      "operator": "in",
+      "fieldValue": "ALL",
+      "multiValued": "Y"
+    })
+  } else if(conditionTypeEnumId === "ENTCT_ATP_FACILITIES") {
+    conditions.push({
+      "ruleId": ruleId,
+      conditionTypeEnumId,
+      "fieldName": "facilityId",
+      "operator": "in",
+      "fieldValue": selectedFac.length ? selectedFac.join(",") : "",
+      "multiValued": "Y"
+    })
+  } else {
+    const includedFacilityGroupIds = selectedFac.included.map((group: any) => group.facilityGroupId)  
+    if(includedFacilityGroupIds.length) {
+      conditions.push({
+        "ruleId": ruleId,
+        "conditionTypeEnumId": "ENTCT_ATP_FAC_GROUPS",
+        "fieldName": "facilityGroupId",
+        "operator": "in",
+        "fieldValue": includedFacilityGroupIds.join(","),
+        "multiValued": "Y"
+      })
+    }
+    
+    const excludedFacilityGroupIds = selectedFac.excluded.map((group: any) => group.facilityGroupId)
+    if(excludedFacilityGroupIds.length) {
+      conditions.push({
+        "ruleId": ruleId,
+        "conditionTypeEnumId": "ENTCT_ATP_FAC_GROUPS",
+        "fieldName": "facilityGroupId",
+        "operator": "not-in",
+        "fieldValue": excludedFacilityGroupIds.join(","),
+        "multiValued": "Y"
+      })
+    }
+  }
+
+  Object.entries(appliedFilters).map(([type, filters]: any) => {
+    Object.entries(filters as any).map(([filter, value]: any) => {
+      if(value.length) {
+        conditions.push({
+          "ruleId": ruleId,
+          "conditionTypeEnumId": "ENTCT_ATP_FILTER",
+          "fieldName": filter,
+          "operator": type === "included" ? "in" : "not-in",
+          "fieldValue": value.join(","),
+          "multiValued": "Y"
+        })
+      }
+    })
+  })
+
+  return conditions;
+}
+
+
+export { doReorder, generateInternalId, generateRuleActions, generateRuleConditions, getDate, getDateAndTime, getTime, hasError, showToast, timeTillRun }
\ No newline at end of file
diff --git a/src/views/CreateUpdateSafetyStockRule.vue b/src/views/CreateUpdateSafetyStockRule.vue
new file mode 100644
index 00000000..3c8fbe9d
--- /dev/null
+++ b/src/views/CreateUpdateSafetyStockRule.vue
@@ -0,0 +1,317 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/safety-stock" />
+        <ion-title>{{ ruleId ? translate("Edit safety stock rule") : translate("New safety stock rule") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <section>
+        <div class="rule-config">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Rule Configuration") }}</ion-card-title>
+            </ion-card-header>
+
+            <div class="rule-inputs ion-padding">
+              <ion-item>
+                <ion-input v-model="formData.ruleName">
+                  <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+              <ion-item>
+                <ion-input v-model="formData.safetyStock" type="number" min="0" @keydown="validateSafetyStock($event)">
+                  <div slot="label">{{ translate("Safety stock") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+      </section>
+
+      <div class="section-header">
+        <h1>{{ translate("Facilities") }} <ion-text color="danger">*</ion-text></h1>
+      </div>
+
+      <section>
+        <ion-item lines="none">
+          <ion-toggle v-model="formData.areAllFacilitiesSelected">{{ translate("Select all facilities") }}</ion-toggle>
+        </ion-item>
+      </section>
+
+      <section v-if="facilityGroups.length">
+        <ion-card :disabled="formData.areAllFacilitiesSelected">
+          <ion-item lines="none">
+            <ion-label>{{ translate("Included") }} <ion-text color="danger">*</ion-text></ion-label>
+            <ion-button fill="clear" @click="openProductFacilityGroupModal('included')">
+              {{ translate("Add") }}
+              <ion-icon :icon="addCircleOutline" slot="end" />
+            </ion-button>
+          </ion-item>
+          <ion-card-content>
+            <ion-chip outline v-for="group in formData.selectedFacilityGroups['included']" :key="group.facilityGroupId">
+              {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
+              <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'included')" />
+            </ion-chip>
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card :disabled="formData.areAllFacilitiesSelected">
+          <ion-item lines="none"> 
+            <ion-label>{{ translate("Excluded") }}</ion-label>
+            <ion-button fill="clear" @click="openProductFacilityGroupModal('excluded')">
+              {{ translate("Add") }}
+              <ion-icon :icon="addCircleOutline" slot="end" />
+            </ion-button>
+          </ion-item>
+          <ion-card-content>
+            <ion-chip outline v-for="group in formData.selectedFacilityGroups['excluded']" :key="group.facilityGroupId">
+              {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
+              <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'excluded')" />
+            </ion-chip>
+          </ion-card-content>
+        </ion-card>
+      </section>
+      <div v-else class="empty-state">
+        <ion-note>{{ translate("No facility group found for selected product store. Either change the product store or associate facility groups with the product store.") }}</ion-note>
+      </div>
+
+      <ProductFilters />
+    </ion-content>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="!facilityGroups.length" @click="currentRule.ruleId ? updateRule() : createRule()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonNote, IonPage, IonText, IonTitle, IonToggle, IonToolbar, modalController, onIonViewDidEnter  , onIonViewWillLeave } from '@ionic/vue';
+import { addCircleOutline, closeCircle, saveOutline } from 'ionicons/icons'
+import { translate } from "@hotwax/dxp-components";
+import ProductFilters from '@/components/ProductFilters.vue';
+import { computed, defineProps, ref } from 'vue';
+import { useStore } from 'vuex';
+import AddProductFacilityGroupModal from '@/components/AddProductFacilityGroupModal.vue';
+import { RuleService } from '@/services/RuleService';
+import { useRouter } from 'vue-router';
+import logger from '@/logger';
+import { generateRuleActions, generateRuleConditions, hasError, showToast } from '@/utils';
+import emitter from '@/event-bus';
+
+const router = useRouter();
+const store = useStore();
+
+const formData = ref({
+  ruleName: '',
+  safetyStock: '',
+  selectedFacilityGroups: {
+    included: [],
+    excluded: []
+  },
+  areAllFacilitiesSelected: false
+}) as any;
+const currentRule = ref({}) as any;
+const props = defineProps(["ruleId"]);
+
+const appliedFilters = computed(() => store.getters["util/getAppliedFilters"]);
+const rules = computed(() => store.getters["rule/getRules"]);
+const total = computed(() => store.getters["rule/getTotalRulesCount"])
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
+
+onIonViewDidEnter(async () => {
+  emitter.on("productStoreOrConfigChanged", redirectLink);
+  emitter.emit("presentLoader");
+  await store.dispatch("util/fetchFacilityGroups")
+  
+  if(props.ruleId) {
+    try {
+      const resp = await RuleService.fetchRules({ ruleId: props.ruleId })
+
+      if(!hasError(resp)) {
+        currentRule.value = resp.data[0];
+
+        formData.value.ruleName = currentRule.value.ruleName;
+        formData.value.safetyStock = currentRule.value.ruleActions[0]?.fieldValue ? currentRule.value.ruleActions[0].fieldValue : ''
+
+        const includedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "in")
+        if(includedGroups?.fieldValue === "ALL") formData.value.areAllFacilitiesSelected = true;
+        else {
+          const includedGroupIds = includedGroups?.fieldValue ? includedGroups.fieldValue.split(",") : []
+          formData.value.selectedFacilityGroups.included = facilityGroups.value.filter((group: any) => includedGroupIds.includes(group.facilityGroupId));
+
+          const excludedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "not-in")
+          const excludedGroupIds = excludedGroups?.fieldValue ? excludedGroups.fieldValue.split(",") : []
+          formData.value.selectedFacilityGroups.excluded = facilityGroups.value.filter((group: any) => excludedGroupIds.includes(group.facilityGroupId));
+        }
+
+        const currentAppliedFilters = JSON.parse(JSON.stringify(appliedFilters.value))
+        currentRule.value.ruleConditions.map((condition: any) => {
+          if(condition.conditionTypeEnumId === "ENTCT_ATP_FILTER") {
+            if(condition.operator === "in") {
+              currentAppliedFilters["included"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            } else {
+              currentAppliedFilters["excluded"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            }
+          }
+        })
+
+        await store.dispatch('util/updateAppliedFilters', currentAppliedFilters)
+      } else {
+        throw resp.data
+      }
+    } catch(err: any) {
+      logger.error(err);
+    }
+  }
+  emitter.emit("dismissLoader");
+})
+
+onIonViewWillLeave(() => {
+  formData.value = {
+    ruleName: '',
+    safetyStock: '',
+    selectedFacilityGroups: {
+      included: [],
+      excluded: []
+    }
+  }
+  store.dispatch("util/clearAppliedFilters")
+  emitter.off("productStoreOrConfigChanged", redirectLink);
+})
+
+async function redirectLink() {
+  router.push("/safety-stock");
+}
+
+async function openProductFacilityGroupModal(type: string) {
+  const modal = await modalController.create({
+    component: AddProductFacilityGroupModal,
+    componentProps: {
+      type,
+      selectedFacilityGroups: formData.value.selectedFacilityGroups
+    }
+  })
+
+  modal.onDidDismiss().then((result: any) => {
+    if(result.data?.selectedGroups) {
+      formData.value.selectedFacilityGroups[type] = result.data.selectedGroups
+    }
+  })
+
+  modal.present()
+}
+
+async function createRule() {
+  if(!isRuleValid()) return;
+
+  emitter.emit("presentLoader");
+
+  let ruleGroup = await store.dispatch("rule/fetchRuleGroup", { groupTypeEnumId: "RG_SAFETY_STOCK" });
+
+  try {
+    if(!ruleGroup.ruleGroupId) {
+      ruleGroup = await RuleService.createRuleGroup({
+        "groupTypeEnumId": "RG_SAFETY_STOCK",
+        "productStoreId": currentEComStore.value.productStoreId,
+        "statusId": "ATP_RG_ACTIVE"
+      })
+    }
+
+    const params = {
+      "ruleGroupId": ruleGroup.ruleGroupId,
+      "ruleName": formData.value.ruleName,
+      "statusId": "ATP_RULE_ACTIVE",
+      "sequenceNum": total.value ? rules.value[total.value-1].sequenceNum + 1 : 1
+    }
+
+    const rule = await RuleService.createRule(params)
+    await RuleService.updateRule({
+      ...params,
+      "ruleConditions": generateRuleConditions(rule.ruleId, "ENTCT_ATP_FAC_GROUPS", appliedFilters.value, formData.value.selectedFacilityGroups, formData.value.areAllFacilitiesSelected),
+      "ruleActions": generateRuleActions(rule.ruleId, "ATP_SAFETY_STOCK", formData.value.safetyStock, false, [])
+    }, rule.ruleId);
+
+    showToast(translate("Rule created successfully."))
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/safety-stock");
+  } catch(err: any) {
+    logger.error(err);
+    showToast(translate("Failed to create rule."))
+  }
+  emitter.emit("dismissLoader");
+}
+
+async function updateRule() {
+  if(!isRuleValid()) return;
+
+  const currentRuleConditions = JSON.parse(JSON.stringify(currentRule.value.ruleConditions));
+  const updatedRuleConditions = generateRuleConditions(props.ruleId, "ENTCT_ATP_FAC_GROUPS", appliedFilters.value, formData.value.selectedFacilityGroups, formData.value.areAllFacilitiesSelected);
+
+  updatedRuleConditions.map((updatedCondition: any) => {
+    const current = currentRuleConditions.find((condition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator);
+    if(current) updatedCondition["conditionSeqId"] = current.conditionSeqId;
+  })
+
+  const conditionsToRemove = currentRuleConditions.filter((condition: any) => !updatedRuleConditions.some((updatedCondition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator && condition.conditionSeqId === updatedCondition.conditionSeqId))
+
+  try {
+    await RuleService.updateRule({
+      ...currentRule.value,
+      "ruleName": formData.value.ruleName,
+      "ruleConditions": updatedRuleConditions,
+      "ruleActions": generateRuleActions(props.ruleId, "ATP_SAFETY_STOCK", formData.value.safetyStock, true, currentRule.value.ruleActions)
+    }, props.ruleId);
+    showToast(translate("Rule updated successfully."))
+
+    const removeResponses = await Promise.allSettled(conditionsToRemove.map(async (condition: any) => await RuleService.deleteCondition({ ...condition, ruleId: props.ruleId})));
+    const hasFailedResponse = removeResponses.some((response: any) => response.status === 'rejected');
+    if(hasFailedResponse) logger.error("Failed to delete some rule conditions.")
+
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/safety-stock");
+  } catch(err: any) {
+    logger.error(err);
+  }
+}
+
+function isRuleValid() {
+  if(!formData.value.ruleName.trim() || !formData.value.safetyStock) {
+    showToast(translate("Please fill in all the required fields."))
+    return false;
+  }
+
+  if(formData.value.safetyStock < 0) {
+    showToast(translate("Safety stock should be greater than or equal to 0."));
+    return false;
+  }
+
+  if(!formData.value.areAllFacilitiesSelected && !formData.value.selectedFacilityGroups.included.length) {
+    showToast(translate("Please include atleast one facility."))
+    return false;
+  }
+
+  return true
+}
+
+function validateSafetyStock(event: any) {
+  if(/[`!@#$%^&*()_+\-=\\|,.<>?~e]/.test(event.key) && event.key !== 'Backspace') event.preventDefault();
+}
+
+function removeFacilityGroups(facilityGroupId: any, type: string) {
+  formData.value.selectedFacilityGroups[type] = formData.value.selectedFacilityGroups[type].filter((group: any) => group.facilityGroupId !== facilityGroupId)
+}
+</script>
+
+<style scoped>
+.empty-state {
+  align-items: start;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/CreateUpdateShippingRule.vue b/src/views/CreateUpdateShippingRule.vue
new file mode 100644
index 00000000..0bd3645d
--- /dev/null
+++ b/src/views/CreateUpdateShippingRule.vue
@@ -0,0 +1,362 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/shipping" />
+        <ion-title>{{ ruleId ? translate("Edit shipping rule") : translate("New shipping rule") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <section>
+        <div class="rule-config">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ "Rule Configuration" }}</ion-card-title>
+            </ion-card-header>
+
+            <div class="rule-inputs ion-padding">
+              <ion-item>
+                <ion-input v-model="formData.ruleName">
+                  <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+              <ion-item>
+                <ion-icon slot="start" :icon="storefrontOutline"/>
+                <ion-toggle v-model="formData.isBrokeringAllowed">{{ translate("Shipping") }}</ion-toggle>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+      </section>
+
+      <div class="section-header">
+        <h1 v-if="selectedSegment === 'RG_SHIPPING_FACILITY'">{{ translate("Facilities") }} <ion-text color="danger">*</ion-text></h1>
+        <h1 v-else-if="selectedSegment === 'RG_SHIPPING_CHANNEL'">{{ translate("Channels") }} <ion-text color="danger">*</ion-text></h1>
+      </div>
+
+      <section>
+        <ion-item lines="none">
+          <ion-toggle v-model="formData.areAllSelected">{{ selectedSegment === "RG_SHIPPING_FACILITY" ? translate("Select all facilities") : translate("Select all channels") }}</ion-toggle>
+        </ion-item>
+      </section>
+
+      <template v-if="selectedSegment === 'RG_SHIPPING_FACILITY'">
+        <section v-if="facilityGroups.length">
+          <ion-card :disabled="formData.areAllSelected">
+            <ion-item lines="none">
+              <ion-label>{{ translate("Included") }} <ion-text color="danger">*</ion-text></ion-label>
+              <ion-button fill="clear" @click="openProductFacilityGroupModal('included')">
+                {{ translate("Add") }}
+                <ion-icon :icon="addCircleOutline" slot="end" />
+              </ion-button>
+            </ion-item>
+            <ion-card-content>
+              <ion-chip outline v-for="group in formData.selectedFacilityGroups['included']" :key="group.facilityGroupId">
+                {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
+                <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'included')" />
+              </ion-chip>
+            </ion-card-content>
+          </ion-card>
+  
+          <ion-card :disabled="formData.areAllSelected">
+            <ion-item lines="none"> 
+              <ion-label>{{ translate("Excluded") }}</ion-label>
+              <ion-button fill="clear" @click="openProductFacilityGroupModal('excluded')">
+                {{ translate("Add") }}
+                <ion-icon :icon="addCircleOutline" slot="end" />
+              </ion-button>
+            </ion-item>
+            <ion-card-content>
+              <ion-chip outline v-for="group in formData.selectedFacilityGroups['excluded']" :key="group.facilityGroupId">
+                {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
+                <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'excluded')" />
+              </ion-chip>
+            </ion-card-content>
+          </ion-card>
+        </section>
+        <div v-else class="empty-state">
+          <ion-note>{{ translate("No facility group found for selected product store. Either change the product store or associate facility groups with the product store.") }}</ion-note>
+        </div>
+      </template>
+
+      <template v-else>
+        <section v-if="configFacilities.length">
+          <ion-card v-for="facility in configFacilities" :key="facility.facilityId" @click="toggleFacilitySelection(facility.facilityId)" button :disabled="formData.areAllSelected">
+            <ion-card-header>
+              <div>
+                <ion-card-title>{{ facility.facilityName ? facility.facilityName : facility.facilityId }}</ion-card-title>
+                <ion-card-subtitle>{{ facility.facilityId }}</ion-card-subtitle>
+              </div>
+              <ion-checkbox :checked="isFacilitySelected(facility.facilityId)" />
+            </ion-card-header>
+          </ion-card>
+        </section>
+        <div v-else class="empty-state">
+          <ion-note>{{ translate("No channel found for selected product store. Either change the product store or associate channels with the product store.") }}</ion-note>
+        </div>
+      </template>
+
+      <ProductFilters />
+    </ion-content>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="selectedSegment === 'RG_SHIPPING_FACILITY' ? !facilityGroups.length : !configFacilities.length" @click="currentRule.ruleId ? updateRule() : createRule()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonNote, IonPage, IonText, IonTitle, IonToggle, IonToolbar, modalController, onIonViewDidEnter, onIonViewWillLeave } from '@ionic/vue';
+import { computed, defineProps, ref } from 'vue';
+import { addCircleOutline, closeCircle, saveOutline, storefrontOutline } from 'ionicons/icons'
+import { translate } from "@hotwax/dxp-components";
+import ProductFilters from '@/components/ProductFilters.vue';
+import AddProductFacilityGroupModal from '@/components/AddProductFacilityGroupModal.vue';
+import { useStore } from 'vuex';
+import { RuleService } from '@/services/RuleService';
+import { generateRuleActions, generateRuleConditions, hasError, showToast } from '@/utils';
+import logger from '@/logger';
+import { useRouter } from 'vue-router';
+import emitter from '@/event-bus';
+
+const store = useStore();
+const router = useRouter();
+
+const props = defineProps(["ruleId"]);
+const currentRule = ref({}) as any;
+
+const configFacilities = computed(() => store.getters["util/getConfigFacilities"])
+const appliedFilters = computed(() => store.getters["util/getAppliedFilters"])
+const rules = computed(() => store.getters["rule/getRules"]);
+const total = computed(() => store.getters["rule/getTotalRulesCount"])
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"])
+const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
+
+const formData = ref({
+  ruleName: '',
+  isBrokeringAllowed: false,
+  selectedFacilityGroups: {
+    included: [],
+    excluded: []
+  },
+  selectedConfigFacilites: [],
+  areAllSelected: false
+}) as any;
+
+onIonViewDidEnter(async () => {
+  emitter.on("productStoreOrConfigChanged", redirectLink);
+  emitter.emit("presentLoader");
+  await Promise.allSettled([store.dispatch("util/fetchFacilityGroups"), store.dispatch("util/fetchConfigFacilities")]);
+  if(props.ruleId) {
+    try {
+      const resp = await RuleService.fetchRules({ ruleId: props.ruleId })
+
+      if(!hasError(resp)) {
+        currentRule.value = resp.data[0];
+
+        formData.value.ruleName = currentRule.value.ruleName;
+        formData.value.isBrokeringAllowed = currentRule.value.ruleActions[0]?.fieldValue === "Y" ? true : false;
+
+        if(selectedSegment.value === "RG_SHIPPING_FACILITY") {
+          const includedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "in")
+          if(includedGroups?.fieldValue === "ALL") formData.value.areAllSelected = true
+          else {
+            const includedGroupIds = includedGroups?.fieldValue ? includedGroups.fieldValue.split(",") : []
+            formData.value.selectedFacilityGroups.included = facilityGroups.value.filter((group: any) => includedGroupIds.includes(group.facilityGroupId));
+
+            const excludedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "not-in")
+            const excludedGroupIds = excludedGroups?.fieldValue ? excludedGroups.fieldValue.split(",") : []
+            formData.value.selectedFacilityGroups.excluded = facilityGroups.value.filter((group: any) => excludedGroupIds.includes(group.facilityGroupId));
+          }
+        } else if(selectedSegment.value === "RG_SHIPPING_CHANNEL") {
+          const facilityCondition = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FACILITIES")
+          if(facilityCondition?.fieldValue === "ALL") formData.value.areAllSelected = true
+          else formData.value.selectedConfigFacilites = facilityCondition?.fieldValue ?  facilityCondition.fieldValue.split(",") : [];
+        }
+
+        const currentAppliedFilters = JSON.parse(JSON.stringify(appliedFilters.value))
+        currentRule.value.ruleConditions.map((condition: any) => {
+          if(condition.conditionTypeEnumId === "ENTCT_ATP_FILTER") {
+            if(condition.operator === "in") {
+              currentAppliedFilters["included"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            } else {
+              currentAppliedFilters["excluded"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            }
+          }
+        })
+        await store.dispatch('util/updateAppliedFilters', currentAppliedFilters)
+      } else {
+        throw resp.data
+      }
+    } catch(err: any) {
+      logger.error(err);
+    }
+  }
+  emitter.emit("dismissLoader");
+})
+
+onIonViewWillLeave(() => {
+  formData.value = {
+    ruleName: '',
+    isBrokeringAllowed: false,
+    selectedFacilityGroups: {
+      included: [],
+      excluded: []
+    },
+    selectedConfigFacilites: []
+  }
+  store.dispatch("util/clearAppliedFilters")
+  emitter.off("productStoreOrConfigChanged", redirectLink);
+})
+
+async function redirectLink() {
+  router.push("/shipping")
+}
+
+async function openProductFacilityGroupModal(type: string) {
+  const modal = await modalController.create({
+    component: AddProductFacilityGroupModal,
+    componentProps: {
+      type,
+      selectedFacilityGroups: formData.value.selectedFacilityGroups
+    }
+  })
+
+  modal.onDidDismiss().then((result: any) => {
+    if(result.data?.selectedGroups) {
+      formData.value.selectedFacilityGroups[type] = result.data.selectedGroups
+    }
+  })
+
+  modal.present()
+}
+
+function toggleFacilitySelection(facilityId: any) {
+  if(isFacilitySelected(facilityId)) {
+    formData.value.selectedConfigFacilites = formData.value.selectedConfigFacilites.filter((currentFacilityId: string) => currentFacilityId !== facilityId)
+  } else {
+    formData.value.selectedConfigFacilites.push(facilityId)
+  }
+}
+
+function isFacilitySelected(facilityId: any) {
+  return formData.value.selectedConfigFacilites.includes(facilityId)
+}
+
+async function createRule() {
+  if(!isRuleValid()) return;
+
+  emitter.emit("presentLoader");
+
+  let ruleGroup = await store.dispatch("rule/fetchRuleGroup", { groupTypeEnumId: selectedSegment.value });
+
+  try {
+    if(!ruleGroup.ruleGroupId) {
+      ruleGroup = await RuleService.createRuleGroup({
+        "groupTypeEnumId": selectedSegment.value,
+        "productStoreId": currentEComStore.value.productStoreId,
+        "statusId": "ATP_RG_ACTIVE"
+      })
+    }
+
+    const params = {
+      "ruleGroupId": ruleGroup.ruleGroupId,
+      "ruleName": formData.value.ruleName,
+      "statusId": "ATP_RULE_ACTIVE",
+      "sequenceNum": total.value ? rules.value[total.value-1].sequenceNum + 1 : 1
+    }
+
+    const rule = await RuleService.createRule(params)
+    await RuleService.updateRule({
+      ...params,
+      "ruleConditions": generateRuleConditions(rule.ruleId, selectedSegment.value === 'RG_SHIPPING_FACILITY' ? "ENTCT_ATP_FAC_GROUPS" : "ENTCT_ATP_FACILITIES", appliedFilters.value, selectedSegment.value === 'RG_SHIPPING_FACILITY' ? formData.value.selectedFacilityGroups : formData.value.selectedConfigFacilites, formData.value.areAllSelected),
+      "ruleActions": generateRuleActions(rule.ruleId, "ATP_ALLOW_BROKERING", formData.value.isBrokeringAllowed, false, [])
+    }, rule.ruleId);
+
+    showToast(translate("Rule created successfully."))
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/shipping");
+  } catch(err: any) {
+    logger.error(err);
+    showToast(translate("Failed to create rule."))
+  }
+  emitter.emit("dismissLoader");
+}
+
+async function updateRule() {
+  if(!isRuleValid()) return;
+
+  const currentRuleConditions = JSON.parse(JSON.stringify(currentRule.value.ruleConditions));
+  const updatedRuleConditions = generateRuleConditions(props.ruleId, selectedSegment.value === 'RG_SHIPPING_FACILITY' ? "ENTCT_ATP_FAC_GROUPS" : "ENTCT_ATP_FACILITIES", appliedFilters.value, selectedSegment.value === 'RG_SHIPPING_FACILITY' ? formData.value.selectedFacilityGroups : formData.value.selectedConfigFacilites, formData.value.areAllSelected);
+
+  updatedRuleConditions.map((updatedCondition: any) => {
+    const current = currentRuleConditions.find((condition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator);
+    if(current) updatedCondition["conditionSeqId"] = current.conditionSeqId;
+  })
+
+  const conditionsToRemove = currentRuleConditions.filter((condition: any) => !updatedRuleConditions.some((updatedCondition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator && condition.conditionSeqId === updatedCondition.conditionSeqId))
+
+  try {
+    await RuleService.updateRule({
+      ...currentRule.value,
+      "ruleName": formData.value.ruleName,
+      "ruleConditions": updatedRuleConditions,
+      "ruleActions": generateRuleActions(props.ruleId, "ATP_ALLOW_BROKERING", formData.value.isBrokeringAllowed, true, currentRule.value.ruleActions)
+    }, props.ruleId);
+    showToast(translate("Rule updated successfully."))
+
+    const removeResponses = await Promise.allSettled(conditionsToRemove.map(async (condition: any) => await RuleService.deleteCondition({ ...condition, ruleId: props.ruleId})));
+    const hasFailedResponse = removeResponses.some((response: any) => response.status === 'rejected');
+    if(hasFailedResponse) logger.error("Failed to delete some rule conditions.")
+
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push('/shipping');
+  } catch(err: any) {
+    logger.error(err);
+  }
+}
+
+function isRuleValid() {
+  if(!formData.value.ruleName.trim()) {
+    showToast(translate("Please fill in all the required fields."))
+    return false;
+  }
+
+  if(selectedSegment.value === 'RG_SHIPPING_FACILITY' && !formData.value.areAllSelected && !formData.value.selectedFacilityGroups.included.length) {
+    showToast(translate("Please include atleast one facility."))
+    return false;
+  } else if(selectedSegment.value === 'RG_SHIPPING_CHANNEL' && !formData.value.areAllSelected && !formData.value.selectedConfigFacilites.length) {
+    showToast(translate("Please select atleast one channel."))
+    return false;
+  }
+
+  return true;
+}
+
+function removeFacilityGroups(facilityGroupId: any, type: string) {
+  formData.value.selectedFacilityGroups[type] = formData.value.selectedFacilityGroups[type].filter((group: any) => group.facilityGroupId !== facilityGroupId)
+}
+</script>
+
+<style scoped>
+ion-card-header {
+  display: flex;
+  flex-direction: row ;
+  justify-content: space-between;
+  align-items: center;
+}
+
+ion-card-header > ion-checkbox {
+  flex-shrink: 0;
+}
+
+.empty-state {
+  align-items: start;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/CreateUpdateStorePickupRule.vue b/src/views/CreateUpdateStorePickupRule.vue
new file mode 100644
index 00000000..928c5325
--- /dev/null
+++ b/src/views/CreateUpdateStorePickupRule.vue
@@ -0,0 +1,363 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/store-pickup" />
+        <ion-title>{{ ruleId ? translate("Edit store pickup rule") : translate("New store pickup rule") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <section>
+        <div class="rule-config">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Rule Configuration") }}</ion-card-title>
+            </ion-card-header>
+
+            <div class="rule-inputs ion-padding">
+              <ion-item>
+                <ion-input v-model="formData.ruleName">
+                  <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+              <ion-item>
+                <ion-icon slot="start" :icon="storefrontOutline"/>
+                <ion-toggle v-model="formData.isPickupAllowed">{{ translate("Store pickup") }}</ion-toggle>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+      </section>
+
+      <div class="section-header">
+        <h1 v-if="selectedSegment === 'RG_PICKUP_FACILITY'">{{ translate("Facilities") }} <ion-text color="danger">*</ion-text></h1>
+        <h1 v-else-if="selectedSegment === 'RG_PICKUP_CHANNEL'">{{ translate("Channels") }} <ion-text color="danger">*</ion-text></h1>
+      </div>
+
+      <section>
+        <ion-item lines="none">
+          <ion-toggle v-model="formData.areAllSelected">{{ selectedSegment === "RG_PICKUP_FACILITY" ? translate("Select all facilities") : translate("Select all channels") }}</ion-toggle>
+        </ion-item>
+      </section>
+
+      <template v-if="selectedSegment === 'RG_PICKUP_FACILITY'">
+        <section v-if="facilityGroups.length">
+          <ion-card :disabled="formData.areAllSelected">
+            <ion-item lines="none">
+              <ion-label>{{ translate("Included") }} <ion-text color="danger">*</ion-text></ion-label>
+              <ion-button fill="clear" @click="openProductFacilityGroupModal('included')">
+                {{ translate("Add") }}
+                <ion-icon :icon="addCircleOutline" slot="end" />
+              </ion-button>
+            </ion-item>
+            <ion-card-content>
+              <ion-chip outline v-for="group in formData.selectedFacilityGroups['included']" :key="group.facilityGroupId">
+                {{ group.facilityGroupName }}
+                <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'included')" />
+              </ion-chip>
+            </ion-card-content>
+          </ion-card>
+  
+          <ion-card :disabled="formData.areAllSelected">
+            <ion-item lines="none"> 
+              <ion-label>{{ translate("Excluded") }}</ion-label>
+              <ion-button fill="clear" @click="openProductFacilityGroupModal('excluded')">
+                {{ translate("Add") }}
+                <ion-icon :icon="addCircleOutline" slot="end" />
+              </ion-button>
+            </ion-item>
+            <ion-card-content>
+              <ion-chip outline v-for="group in formData.selectedFacilityGroups['excluded']" :key="group.facilityGroupId">
+                {{ group.facilityGroupName }}
+                <ion-icon :icon="closeCircle" @click="removeFacilityGroups(group.facilityGroupId, 'excluded')" />
+              </ion-chip>
+            </ion-card-content>
+          </ion-card>
+        </section>
+        <div v-else class="empty-state">
+          <ion-note>{{ translate("No facility group found for selected product store. Either change the product store or associate facility groups with the product store.") }}</ion-note>
+        </div>
+      </template>
+
+      <template v-else>
+        <section v-if="configFacilities.length">
+          <ion-card v-for="facility in configFacilities" :key="facility.facilityId" @click="toggleFacilitySelection(facility.facilityId)" button :disabled="formData.areAllSelected">
+            <ion-card-header>
+              <div>
+                <ion-card-title>{{ facility.facilityName }}</ion-card-title>
+                <ion-card-subtitle>{{ facility.facilityId }}</ion-card-subtitle>
+              </div>
+              <ion-checkbox :checked="isFacilitySelected(facility.facilityId)" />
+            </ion-card-header>
+          </ion-card>
+        </section>
+        <div v-else class="empty-state">
+          <ion-note>{{ translate("No channel found for selected product store. Either change the product store or associate channels with the product store.") }}</ion-note>
+        </div>
+      </template>
+
+      <ProductFilters />
+    </ion-content>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="selectedSegment === 'RG_PICKUP_FACILITY' ? !facilityGroups.length : !configFacilities.length" @click="currentRule.ruleId ? updateRule() : createRule()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonNote, IonPage, IonText, IonTitle, IonToggle, IonToolbar, modalController, onIonViewDidEnter, onIonViewWillLeave } from '@ionic/vue';
+import { addCircleOutline, closeCircle, saveOutline, storefrontOutline } from 'ionicons/icons'
+import { translate } from "@hotwax/dxp-components";
+import { computed, defineProps, ref } from 'vue';
+import ProductFilters from '@/components/ProductFilters.vue';
+import { useRouter } from 'vue-router';
+import AddProductFacilityGroupModal from '@/components/AddProductFacilityGroupModal.vue';
+import { useStore } from 'vuex';
+import { RuleService } from '@/services/RuleService';
+import { generateRuleActions, generateRuleConditions, hasError, showToast } from '@/utils';
+import logger from '@/logger';
+import emitter from '@/event-bus';
+
+const store = useStore();
+const router = useRouter();
+
+const currentRule = ref({}) as any;
+const props = defineProps(["ruleId"]);
+
+const configFacilities = computed(() => store.getters["util/getConfigFacilities"])
+const appliedFilters = computed(() => store.getters["util/getAppliedFilters"])
+const rules = computed(() => store.getters["rule/getRules"]);
+const total = computed(() => store.getters["rule/getTotalRulesCount"])
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
+const facilityGroups = computed(() => store.getters["util/getFacilityGroups"])
+
+const formData = ref({
+  ruleName: '',
+  isPickupAllowed: false,
+  selectedFacilityGroups: {
+    included: [],
+    excluded: []
+  },
+  selectedConfigFacilites: [],
+  areAllSelected: false
+}) as any;
+
+onIonViewDidEnter(async () => {
+  emitter.on("productStoreOrConfigChanged", redirectLink);
+  emitter.emit("presentLoader");
+  await Promise.allSettled([store.dispatch("util/fetchFacilityGroups"), store.dispatch("util/fetchConfigFacilities")]);
+  
+  if(props.ruleId) {
+    try {
+      const resp = await RuleService.fetchRules({ ruleId: props.ruleId })
+      
+      if(!hasError(resp)) {
+        currentRule.value = resp.data[0];
+
+        formData.value.ruleName = currentRule.value.ruleName;
+        formData.value.isPickupAllowed = currentRule.value.ruleActions[0]?.fieldValue === "Y" ? true : false;
+
+        if(selectedSegment.value === "RG_PICKUP_FACILITY") {
+          const includedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "in")
+          if(includedGroups?.fieldValue === "ALL") formData.value.areAllSelected = true
+          else {
+            const includedGroupIds = includedGroups?.fieldValue ? includedGroups.fieldValue.split(",") : []
+            formData.value.selectedFacilityGroups.included = facilityGroups.value.filter((group: any) => includedGroupIds.includes(group.facilityGroupId));
+
+            const excludedGroups = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FAC_GROUPS" && condition.operator === "not-in")
+            const excludedGroupIds = excludedGroups?.fieldValue ? excludedGroups.fieldValue.split(",") : []
+            formData.value.selectedFacilityGroups.excluded = facilityGroups.value.filter((group: any) => excludedGroupIds.includes(group.facilityGroupId));
+          }
+        } else if(selectedSegment.value === "RG_PICKUP_CHANNEL") {
+          const facilityCondition = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FACILITIES")
+          if(facilityCondition?.fieldValue === "ALL") formData.value.areAllSelected = true
+          else formData.value.selectedConfigFacilites = facilityCondition?.fieldValue ? facilityCondition.fieldValue.split(",") : [];
+        }
+        
+        const currentAppliedFilters = JSON.parse(JSON.stringify(appliedFilters.value))
+        currentRule.value.ruleConditions.map((condition: any) => {
+          if(condition.conditionTypeEnumId === "ENTCT_ATP_FILTER") {
+            if(condition.operator === "in") {
+              currentAppliedFilters["included"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            } else {
+              currentAppliedFilters["excluded"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            }
+          }
+        })
+        await store.dispatch('util/updateAppliedFilters', currentAppliedFilters)
+      } else {
+        throw resp.data
+      }
+    } catch(err: any) {
+      logger.error(err);
+    }
+  }
+  emitter.emit("dismissLoader");
+})
+
+onIonViewWillLeave(() => {
+  formData.value = {
+    ruleName: '',
+    isPickupAllowed: false,
+    selectedFacilityGroups: {
+      included: [],
+      excluded: []
+    },
+    selectedConfigFacilites: []
+  }
+  store.dispatch("util/clearAppliedFilters")
+  emitter.off("productStoreOrConfigChanged", redirectLink);
+})
+
+async function redirectLink() {
+  router.push("/store-pickup");
+}
+
+async function openProductFacilityGroupModal(type: string) {
+  const modal = await modalController.create({
+    component: AddProductFacilityGroupModal,
+    componentProps: {
+      type,
+      selectedFacilityGroups: formData.value.selectedFacilityGroups
+    }
+  })
+
+  modal.onDidDismiss().then((result: any) => {
+    if(result.data?.selectedGroups) {
+      formData.value.selectedFacilityGroups[type] = result.data.selectedGroups
+    }
+  })
+
+  modal.present()
+}
+
+function toggleFacilitySelection(facilityId: any) {
+  if(isFacilitySelected(facilityId)) {
+    formData.value.selectedConfigFacilites = formData.value.selectedConfigFacilites.filter((currentFacilityId: string) => currentFacilityId !== facilityId)
+  } else {
+    formData.value.selectedConfigFacilites.push(facilityId)
+  }
+}
+
+function isFacilitySelected(facilityId: any) {
+  return formData.value.selectedConfigFacilites.includes(facilityId)
+}
+
+async function createRule() {
+  if(!isRuleValid()) return;
+
+  emitter.emit("presentLoader");
+
+  let ruleGroup = await store.dispatch("rule/fetchRuleGroup", { groupTypeEnumId: selectedSegment.value });
+
+  try {
+    if(!ruleGroup.ruleGroupId) {
+      ruleGroup = await RuleService.createRuleGroup({
+        "groupTypeEnumId": selectedSegment.value,
+        "productStoreId": currentEComStore.value.productStoreId,
+        "statusId": "ATP_RG_ACTIVE"
+      })
+    }
+
+    const params = {
+      "ruleGroupId": ruleGroup.ruleGroupId,
+      "ruleName": formData.value.ruleName,
+      "statusId": "ATP_RULE_ACTIVE",
+      "sequenceNum": total.value ? rules.value[total.value-1].sequenceNum + 1 : 1
+    }
+
+    const rule = await RuleService.createRule(params)
+    await RuleService.updateRule({
+      ...params,
+      "ruleConditions": generateRuleConditions(rule.ruleId, selectedSegment.value === 'RG_PICKUP_FACILITY' ? "ENTCT_ATP_FAC_GROUPS" : "ENTCT_ATP_FACILITIES", appliedFilters.value, selectedSegment.value === 'RG_PICKUP_FACILITY' ? formData.value.selectedFacilityGroups : formData.value.selectedConfigFacilites, formData.value.areAllSelected),
+      "ruleActions": generateRuleActions(rule.ruleId, "ATP_ALLOW_PICKUP", formData.value.isPickupAllowed, false, [])
+    }, rule.ruleId);
+
+    showToast(translate("Rule created successfully."))
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/store-pickup");
+  } catch(err: any) {
+    logger.error(err);
+    showToast(translate("Failed to create rule."))
+  }
+  emitter.emit("dismissLoader");
+}
+
+async function updateRule() {
+  if(!isRuleValid()) return;
+
+  const currentRuleConditions = JSON.parse(JSON.stringify(currentRule.value.ruleConditions));
+  const updatedRuleConditions = generateRuleConditions(props.ruleId, selectedSegment.value === 'RG_PICKUP_FACILITY' ? "ENTCT_ATP_FAC_GROUPS" : "ENTCT_ATP_FACILITIES", appliedFilters.value, selectedSegment.value === 'RG_PICKUP_FACILITY' ? formData.value.selectedFacilityGroups : formData.value.selectedConfigFacilites, formData.value.areAllSelected);
+
+  updatedRuleConditions.map((updatedCondition: any) => {
+    const current = currentRuleConditions.find((condition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator);
+    if(current) updatedCondition["conditionSeqId"] = current.conditionSeqId;
+  })
+
+  const conditionsToRemove = currentRuleConditions.filter((condition: any) => !updatedRuleConditions.some((updatedCondition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator && condition.conditionSeqId === updatedCondition.conditionSeqId))
+
+  try {
+    await RuleService.updateRule({
+      ...currentRule.value,
+      "ruleName": formData.value.ruleName,
+      "ruleConditions": updatedRuleConditions,
+      "ruleActions": generateRuleActions(props.ruleId, "ATP_ALLOW_PICKUP", formData.value.isPickupAllowed, true, currentRule.value.ruleActions)
+    }, props.ruleId);
+    showToast(translate("Rule updated successfully."))
+
+    const removeResponses = await Promise.allSettled(conditionsToRemove.map(async (condition: any) => await RuleService.deleteCondition({ ...condition, ruleId: props.ruleId})));
+    const hasFailedResponse = removeResponses.some((response: any) => response.status === 'rejected');
+    if(hasFailedResponse) logger.error("Failed to delete some rule conditions.")
+
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push('/store-pickup');
+  } catch(err: any) {
+    logger.error(err);
+  }
+}
+
+function isRuleValid() {
+  if(!formData.value.ruleName.trim()) {
+    showToast(translate("Please fill in all the required fields."))
+    return false;
+  }
+
+  if(selectedSegment.value === 'RG_PICKUP_FACILITY' && !formData.value.areAllSelected && !formData.value.selectedFacilityGroups.included.length) {
+    showToast(translate("Please include atleast one facility."))
+    return false;
+  } else if(selectedSegment.value === 'RG_PICKUP_CHANNEL' && !formData.value.areAllSelected && !formData.value.selectedConfigFacilites.length) {
+    showToast(translate("Please select atleast one channel."))
+    return false;
+  }
+
+  return true;
+}
+
+function removeFacilityGroups(facilityGroupId: any, type: string) {
+  formData.value.selectedFacilityGroups[type] = formData.value.selectedFacilityGroups[type].filter((group: any) => group.facilityGroupId !== facilityGroupId)
+}
+</script>
+
+<style scoped>
+ion-card-header {
+  display: flex;
+  flex-direction: row ;
+  justify-content: space-between;
+  align-items: center;
+}
+
+ion-card-header > ion-checkbox {
+  flex-shrink: 0;
+}
+
+.empty-state {
+  align-items: start;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/CreateUpdateThresholdRule.vue b/src/views/CreateUpdateThresholdRule.vue
new file mode 100644
index 00000000..b490b1f7
--- /dev/null
+++ b/src/views/CreateUpdateThresholdRule.vue
@@ -0,0 +1,276 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/threshold" />
+        <ion-title>{{ ruleId ? translate("Edit threshold rule") : translate("New threshold rule") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    
+    <ion-content>
+      <section>
+        <div class="rule-config">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Rule Configuration") }}</ion-card-title>
+            </ion-card-header>
+
+            <div class="rule-inputs ion-padding">
+              <ion-item>
+                <ion-input v-model="formData.ruleName">
+                  <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+              <ion-item>
+                <ion-input v-model="formData.threshold" type="number" min="0" @keydown="validateThreshold($event)">
+                  <div slot="label">{{ translate("Threshold") }} <ion-text color="danger">*</ion-text></div>
+                </ion-input>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+      </section>
+      <div class="section-header">
+        <h1>{{ translate("Channels") }} <ion-text color="danger">*</ion-text></h1>
+      </div>
+
+      <section>
+        <ion-item lines="none">
+          <ion-toggle v-model="formData.areAllChannelsSelected">{{ translate("Select all channels") }}</ion-toggle>
+        </ion-item>
+      </section>
+
+      <section v-if="configFacilities.length">
+        <ion-card v-for="facility in configFacilities" :key="facility.facilityId" @click="toggleFacilitySelection(facility.facilityId)" button :disabled="formData.areAllChannelsSelected">
+          <ion-card-header>
+            <div>
+              <ion-card-title>{{ facility.facilityName }}</ion-card-title>
+              <ion-card-subtitle>{{ facility.facilityId }}</ion-card-subtitle>
+            </div>
+            <ion-checkbox :checked="isFacilitySelected(facility.facilityId)" />
+          </ion-card-header>
+        </ion-card>
+      </section>
+      <div v-else class="empty-state">
+        <ion-note>{{ translate("No channel found for selected product store. Either change the product store or associate channels with the product store.") }}</ion-note>
+      </div>
+
+      <ProductFilters />
+    </ion-content>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="!configFacilities.length" @click="currentRule.ruleId? updateRule() : createThresholdRule()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonPage, IonNote, IonText, IonTitle, IonToggle, IonToolbar, onIonViewWillLeave, onIonViewDidEnter } from '@ionic/vue';
+import { saveOutline } from 'ionicons/icons'
+import { translate } from "@hotwax/dxp-components";
+import ProductFilters from '@/components/ProductFilters.vue';
+import { computed, defineProps, ref } from 'vue';
+import { useStore } from 'vuex';
+import { RuleService } from '@/services/RuleService';
+import { generateRuleActions, generateRuleConditions, hasError, showToast } from '@/utils';
+import logger from '@/logger';
+import router from '@/router';
+import emitter from '@/event-bus';
+
+const store = useStore();
+const formData = ref({
+  ruleName: '',
+  threshold: '',
+  selectedConfigFacilites: [],
+  areAllChannelsSelected: false
+}) as any;
+const currentRule = ref({}) as any;
+const props = defineProps(["ruleId"]);
+
+const configFacilities = computed(() => store.getters["util/getConfigFacilities"])
+const appliedFilters = computed(() => store.getters["util/getAppliedFilters"]);
+const rules = computed(() => store.getters["rule/getRules"]);
+const total = computed(() => store.getters["rule/getTotalRulesCount"])
+const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
+
+onIonViewDidEnter(async () => {
+  emitter.on("productStoreOrConfigChanged", redirectLink);
+  emitter.emit("presentLoader");
+  await store.dispatch("util/fetchConfigFacilities");
+
+  if(props.ruleId) {
+    try {
+      const resp = await RuleService.fetchRules({ ruleId: props.ruleId })
+
+      if(!hasError(resp)) {
+        currentRule.value = resp.data[0];
+
+        formData.value.ruleName = currentRule.value.ruleName;
+        formData.value.threshold = currentRule.value.ruleActions[0]?.fieldValue ? currentRule.value.ruleActions[0].fieldValue : ''
+
+        const facilityCondition = currentRule.value.ruleConditions.find((condition: any) => condition.conditionTypeEnumId === "ENTCT_ATP_FACILITIES")
+        if(facilityCondition?.fieldValue === "ALL") formData.value.areAllChannelsSelected = true
+        else formData.value.selectedConfigFacilites = facilityCondition?.fieldValue ? facilityCondition.fieldValue?.split(",") : [];
+
+        const currentAppliedFilters = JSON.parse(JSON.stringify(appliedFilters.value))
+        currentRule.value.ruleConditions.map((condition: any) => {
+          if(condition.conditionTypeEnumId === "ENTCT_ATP_FILTER") {
+            if(condition.operator === "in") {
+              currentAppliedFilters["included"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            } else {
+              currentAppliedFilters["excluded"][condition.fieldName] = condition.fieldValue ? condition.fieldValue.split(",") : []
+            }
+          }
+        })
+
+        await store.dispatch('util/updateAppliedFilters', currentAppliedFilters)
+      } else {
+        throw resp.data
+      }
+    } catch(err: any) {
+      logger.error(err);
+    }
+  }
+  emitter.emit("dismissLoader");
+})
+
+onIonViewWillLeave(() => {
+  formData.value = {
+    ruleName: '',
+    threshold: '',
+    selectedConfigFacilites: []
+  }
+  store.dispatch("util/clearAppliedFilters")
+  emitter.off("productStoreOrConfigChanged", redirectLink);
+})
+
+async function redirectLink() {
+  router.push("/threshold")
+}
+
+function toggleFacilitySelection(facilityId: any) {
+  if(isFacilitySelected(facilityId)) {
+    formData.value.selectedConfigFacilites = formData.value.selectedConfigFacilites.filter((currentFacilityId: string) => currentFacilityId !== facilityId)
+  } else {
+    formData.value.selectedConfigFacilites.push(facilityId)
+  }
+}
+
+function isFacilitySelected(facilityId: any) {
+  return formData.value.selectedConfigFacilites?.includes(facilityId)
+}
+
+async function createThresholdRule() {
+  if(!isRuleValid()) return;
+
+  emitter.emit("presentLoader");
+
+  let ruleGroup = await store.dispatch("rule/fetchRuleGroup", { groupTypeEnumId: "RG_THRESHOLD" });
+
+  try {
+    if(!ruleGroup.ruleGroupId) {
+      ruleGroup = await RuleService.createRuleGroup({
+        "groupTypeEnumId": "RG_THRESHOLD",
+        "productStoreId": currentEComStore.value.productStoreId,
+        "statusId": "ATP_RG_ACTIVE"
+      })
+    }
+
+    const params = {
+      "ruleGroupId": ruleGroup.ruleGroupId,
+      "ruleName": formData.value.ruleName,
+      "statusId": "ATP_RULE_ACTIVE",
+      "sequenceNum": total.value ? rules.value[total.value-1].sequenceNum + 1 : 1
+    }
+
+    const rule = await RuleService.createRule(params)
+
+    await RuleService.updateRule({
+      ...params,
+      "ruleConditions": generateRuleConditions(rule.ruleId, "ENTCT_ATP_FACILITIES", appliedFilters.value, formData.value.selectedConfigFacilites, formData.value.areAllChannelsSelected),
+      "ruleActions": generateRuleActions(rule.ruleId, "ATP_THRESHOLD", formData.value.threshold, false, [])
+    }, rule.ruleId);
+
+    showToast(translate("Rule created successfully."))
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/threshold");
+  } catch(err: any) {
+    logger.error(err);
+    showToast(translate("Failed to create rule."))
+  }
+  emitter.emit("dismissLoader");
+}
+
+async function updateRule() {
+  if(!isRuleValid()) return;
+
+  const currentRuleConditions = JSON.parse(JSON.stringify(currentRule.value.ruleConditions));
+  const updatedRuleConditions = generateRuleConditions(props.ruleId, "ENTCT_ATP_FACILITIES", appliedFilters.value, formData.value.selectedConfigFacilites, formData.value.areAllChannelsSelected);
+  updatedRuleConditions.map((updatedCondition: any) => {
+    const current = currentRuleConditions.find((condition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator);
+    if(current) updatedCondition["conditionSeqId"] = current.conditionSeqId;
+  })
+
+  const conditionsToRemove = currentRuleConditions.filter((condition: any) => !updatedRuleConditions.some((updatedCondition: any) => condition.conditionTypeEnumId === updatedCondition.conditionTypeEnumId && condition.fieldName === updatedCondition.fieldName && condition.operator === updatedCondition.operator && condition.conditionSeqId === updatedCondition.conditionSeqId))
+
+  try {
+    await RuleService.updateRule({
+      ...currentRule.value,
+      "ruleName": formData.value.ruleName,
+      "ruleConditions": updatedRuleConditions,
+      "ruleActions": generateRuleActions(props.ruleId, "ATP_THRESHOLD", formData.value.threshold, true, currentRule.value.ruleActions)
+    }, props.ruleId);
+    showToast(translate("Rule updated successfully."))
+
+    const removeResponses = await Promise.allSettled(conditionsToRemove.map(async (condition: any) => await RuleService.deleteCondition({ ...condition, ruleId: props.ruleId})));
+    const hasFailedResponse = removeResponses.some((response: any) => response.status === 'rejected');
+    if(hasFailedResponse) logger.error("Failed to delete some rule conditions.")
+
+    store.dispatch("rule/clearRuleState")
+    store.dispatch("util/clearAppliedFilters")
+    router.push("/threshold");
+  } catch(err: any) {
+    logger.error(err);
+  }
+}
+
+function isRuleValid() {
+  if(!formData.value.ruleName.trim() || !formData.value.threshold) {
+    showToast(translate("Please fill in all the required fields."))
+    return false;
+  }
+  if(formData.value.threshold < 0){
+    showToast(translate("Threshold should be greater than or equal to 0."))
+    return false;
+  }
+  if(!formData.value.areAllChannelsSelected && !formData.value.selectedConfigFacilites.length) {
+    showToast(translate("Please select atleast one channel."))
+    return false;
+  }
+  return true
+}
+
+function validateThreshold(event: any) {
+  if(/[`!@#$%^&*()_+\-=\\|,.<>?~e]/.test(event.key) && event.key !== 'Backspace') event.preventDefault();
+}
+</script>
+
+<style scoped>
+ion-card-header {
+  display: flex;
+  flex-direction: row ;
+  justify-content: space-between;
+  align-items: center;
+}
+
+ion-card-header > ion-checkbox {
+  flex-shrink: 0;
+}
+
+.empty-state {
+  align-items: start;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/InventoryChannels.vue b/src/views/InventoryChannels.vue
index f13cec9a..004311df 100644
--- a/src/views/InventoryChannels.vue
+++ b/src/views/InventoryChannels.vue
@@ -3,15 +3,14 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ translate("Inventory channels") }}</ion-title>
-      </ion-toolbar>
+        <ion-title slot="start">{{ translate("Inventory channels") }}</ion-title>
 
-      <ion-toolbar>
-        <ion-segment v-model="selectedSegment">
+        <ion-segment :value="selectedSegment" @ionChange="updateSegment($event)" slot="end">
           <ion-segment-button value="channels">
             <ion-label>{{ translate("Channels") }}</ion-label>
           </ion-segment-button>
-          <ion-segment-button value="publish">
+          <!-- Todo: add functionality to the Publish segment -->
+          <ion-segment-button value="publish" disabled>
             <ion-label>{{ translate("Publish") }}</ion-label>
           </ion-segment-button>
         </ion-segment>
@@ -21,53 +20,59 @@
     <ion-content>
       <main>
         <section v-if="selectedSegment === 'channels'">
-          <ion-card v-for="channel in inventoryChannels" :key="channel.facilityGroupId">
-            <ion-card-header>
-              <div>
-                <ion-card-subtitle class="overline">{{ channel.facilityGroupId }}</ion-card-subtitle>
-                <ion-card-title>{{ channel.facilityGroupName }}</ion-card-title>
-                <ion-card-subtitle>{{ channel.description }}</ion-card-subtitle>
-              </div>
-            </ion-card-header>
-
-            <ion-item lines="full">
-              <ion-icon slot="start" :icon="globeOutline"/>
-              <ion-label>
-                {{ channel.selectedConfigFacility?.facilityName }}
-                <p>{{ channel.selectedConfigFacility?.facilityId }}</p>
-              </ion-label>
-              <ion-button slot="end" fill="clear" color="medium" @click="openLinkThresholdFacilitiesToGroupModal(channel)">
-                <ion-icon :icon="optionsOutline" slot="icon-only" />
-              </ion-button>
-            </ion-item>
-
-            <ion-list>
-              <ion-item-divider color="light">
-                <ion-label>{{ translate("Facilities") }}</ion-label>
-                <ion-button slot="end" fill="clear" color="medium" @click="openLinkFacilitiesToGroupModal(channel)">
+          <template v-if="inventoryChannels.length">
+            <ion-card v-for="channel in inventoryChannels" :key="channel.facilityGroupId">
+              <ion-card-header>
+                <div>
+                  <ion-card-subtitle class="overline">{{ channel.facilityGroupId }}</ion-card-subtitle>
+                  <ion-card-title>{{ channel.facilityGroupName }}</ion-card-title>
+                  <ion-card-subtitle v-html="channel.description.replace(/(?:\n|\n)/g, '<br />')"></ion-card-subtitle>
+                </div>
+              </ion-card-header>
+  
+              <ion-item lines="full">
+                <ion-icon slot="start" :icon="globeOutline"/>
+                <ion-label>
+                  {{ channel.selectedConfigFacility?.facilityName }}
+                  <p>{{ channel.selectedConfigFacility?.facilityId }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" color="medium" @click="openLinkThresholdFacilitiesToGroupModal(channel)">
                   <ion-icon :icon="optionsOutline" slot="icon-only" />
                 </ion-button>
-              </ion-item-divider>
-
-              <ion-item>
-                <ion-icon slot="start" :icon="storefrontOutline"/>
-                <ion-label>{{ translate("retail facilities", { count: getFacilityCount(channel, "RETAIL_STORE") })}}</ion-label>
-              </ion-item>
-
-              <ion-item lines="full">
-                <ion-icon slot="start" :icon="businessOutline"/>
-                <ion-label>{{ translate("warehouse", { count: getFacilityCount(channel, "WAREHOUSE") })}}</ion-label>
               </ion-item>
   
-              <ion-item lines="none">
-                <ion-button fill="clear" size="default" @click="openEditGroupModal(channel)">{{ translate("Edit group") }}</ion-button>
-                <!-- Functionality is not defined for this button hence commented it for now. -->
-                <!-- <ion-button color="medium" fill="clear" slot="end">
-                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
-                </ion-button> -->
-              </ion-item>
-            </ion-list>
-          </ion-card>
+              <ion-list>
+                <ion-item-divider color="light">
+                  <ion-label>{{ translate("Facilities") }}</ion-label>
+                  <ion-button slot="end" fill="clear" color="medium" @click="openLinkFacilitiesToGroupModal(channel)">
+                    <ion-icon :icon="optionsOutline" slot="icon-only" />
+                  </ion-button>
+                </ion-item-divider>
+  
+                <ion-item>
+                  <ion-icon slot="start" :icon="storefrontOutline"/>
+                  <ion-label>{{ translate("retail facilities", { count: getFacilityCount(channel, "STORE") })}}</ion-label>
+                </ion-item>
+  
+                <ion-item lines="full">
+                  <ion-icon slot="start" :icon="businessOutline"/>
+                  <ion-label>{{ translate("warehouse", { count: getFacilityCount(channel, "WAREHOUSE") })}}</ion-label>
+                </ion-item>
+    
+                <div class="actions">
+                  <ion-button fill="clear" @click="openEditGroupModal(channel)">{{ translate("Edit group") }}</ion-button>
+                  <!-- Functionality is not defined for this button hence commented it for now. -->
+                  <!-- <ion-button color="medium" fill="clear" slot="end">
+                    <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
+                  </ion-button> -->
+                </div>
+              </ion-list>
+            </ion-card>
+          </template>
+
+          <div class="empty-state" v-else>
+            <p>{{ translate("No inventory channel found.") }}</p>
+          </div>
         </section>
  
         <section v-else-if="selectedSegment === 'publish'">
@@ -114,7 +119,7 @@
       </main>
     </ion-content>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab v-if="selectedSegment === 'channels'" vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button @click="openCreateGroupModal()">
         <ion-icon :icon="addOutline" />
       </ion-fab-button>
@@ -123,8 +128,8 @@
 </template>
 
 <script setup lang="ts">
-import { IonBadge, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonMenuButton, IonPage, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController, popoverController } from '@ionic/vue';
-import { computed, onMounted, ref } from 'vue';
+import { IonBadge, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonMenuButton, IonPage, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController, onIonViewDidEnter, onIonViewWillLeave, popoverController } from '@ionic/vue';
+import { computed } from 'vue';
 import { addOutline, albumsOutline, businessOutline, ellipsisVerticalOutline, globeOutline, optionsOutline, storefrontOutline, timeOutline, timerOutline } from 'ionicons/icons';
 import { translate } from '@hotwax/dxp-components';
 import ShopActionsPopover from '@/components/ShopActionsPopover.vue'
@@ -137,15 +142,24 @@ import emitter from '@/event-bus';
 
 const store = useStore();
 
-const selectedSegment = ref("channels")
-
 const inventoryChannels = computed(() => store.getters["channel/getInventoryChannels"])
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"])
+
+onIonViewDidEnter(async() => {
+  fetchInventoryChannels()
+  emitter.on("productStoreOrConfigChanged", fetchInventoryChannels);
+})
+
+onIonViewWillLeave(() => {
+  emitter.off("productStoreOrConfigChanged", fetchInventoryChannels);
+})
 
-onMounted(async () => {
+async function fetchInventoryChannels() {
   emitter.emit("presentLoader");
+  if(!selectedSegment.value || (selectedSegment.value !== 'channels' && selectedSegment.value !== 'publish')) store.dispatch("util/updateSelectedSegment", "channels");
   await Promise.allSettled([store.dispatch("channel/fetchInventoryChannels"), store.dispatch("util/fetchConfigFacilities")]);
   emitter.emit("dismissLoader");
-})
+}
 
 async function openShopActionsPopover(event: Event) {
   const popover = await popoverController.create({
@@ -192,8 +206,18 @@ async function openLinkThresholdFacilitiesToGroupModal(group: any) {
   return popover.present();
 }
 
-function getFacilityCount(group: any, facilityTypeId: string) {
-  return group.selectedFacilities?.length ? group.selectedFacilities.filter((facility: any) => facility.facilityTypeId === facilityTypeId).length : 0;
+function getFacilityCount(channel: any, facilityTypeId: string) {
+  if(!channel.selectedFacilities?.length) return 0;
+
+  if(facilityTypeId === 'STORE') {
+    return channel.selectedFacilities.filter((facility: any) => facility.facilityTypeId === "RETAIL_STORE" || facility.facilityTypeId === "OUTLET_STORE").length;
+  } else {
+    return channel.selectedFacilities.filter((facility: any) => facility.facilityTypeId === "WAREHOUSE" || facility.facilityTypeId === "OUTLET_WAREHOUSE").length;
+  }
+}
+
+function updateSegment(event: any) {
+  store.dispatch("util/updateSelectedSegment", event.detail.value);
 }
 
 </script>
@@ -205,4 +229,9 @@ ion-card-header {
   justify-content: space-between;
   align-items: center;
 }
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SafetyStock.vue b/src/views/SafetyStock.vue
index f9b7bde0..89893325 100644
--- a/src/views/SafetyStock.vue
+++ b/src/views/SafetyStock.vue
@@ -8,21 +8,26 @@
     </ion-header>
 
     <ion-content>
-      <main v-if="ruleGroup.ruleGroupId">
+      <main v-if="ruleGroup.ruleGroupId && rules.length">
         <ScheduleRuleItem />
 
         <section>
-          <RuleItem v-for="(rule, ruleIndex) in rules" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+          <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
+            <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+          </ion-reorder-group>
         </section>
       </main>
 
       <div class="empty-state" v-else>
-       <p>{{ translate("No threshold rules found") }}</p>
+       <p>{{ translate("No safety stock rule found.") }}</p>
       </div>
     </ion-content>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button @click="createRule()">
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed" class="ion-margin">
+      <ion-fab-button :disabled="!rules.length" class="ion-margin-bottom" color="light" @click="isReorderActive ? saveReorder() : activateReordering()">
+        <ion-icon :icon="isReorderActive ? saveOutline : balloonOutline" />
+      </ion-fab-button>
+      <ion-fab-button :disabled="isReorderActive" @click="createRule()">
         <ion-icon :icon="addOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -30,27 +35,76 @@
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonMenuButton, IonPage, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
-import { addOutline } from 'ionicons/icons';
+import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonMenuButton, IonPage, IonReorderGroup, IonTitle, IonToolbar, onIonViewDidLeave, onIonViewDidEnter } from '@ionic/vue';
+import { addOutline, saveOutline, balloonOutline } from 'ionicons/icons';
 import RuleItem from '@/components/RuleItem.vue';
 import { useRouter } from "vue-router";
 import ScheduleRuleItem from '@/components/ScheduleRuleItem.vue';
 import { useStore } from 'vuex';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { translate } from '@hotwax/dxp-components';
 import emitter from '@/event-bus';
+import { RuleService } from '@/services/RuleService';
+import { doReorder, showToast } from '@/utils';
 
 const store = useStore();
 const router = useRouter()
 
 const rules = computed(() => store.getters["rule/getRules"]);
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const reorderingRules = ref([]);
+
+onIonViewDidEnter(async() => {
+  fetchRules();
+  emitter.on("productStoreOrConfigChanged", fetchRules);
+})
+
+onIonViewDidLeave(() => {
+  emitter.off("productStoreOrConfigChanged", fetchRules);
+  store.dispatch("rule/updateIsReorderActive", false)
+})
 
-onIonViewWillEnter(async() => {
+async function fetchRules() {
   emitter.emit("presentLoader");
-  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_SAFETY_STOCK' }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")]);
+  store.dispatch("util/updateSelectedSegment", "");
+  store.dispatch("rule/updateIsReorderActive", false)
+  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_SAFETY_STOCK', pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")]);
   emitter.emit("dismissLoader");
-})
+}
+
+function activateReordering() {
+  store.dispatch("rule/updateIsReorderActive", true)
+  reorderingRules.value = rules.value;
+}
+
+async function saveReorder() {
+  const diffRules = reorderingRules.value.filter((reorderRule: any) => rules.value.some((rule: any) => rule.ruleId === reorderRule.ruleId && rule.sequenceNum !== reorderRule.sequenceNum))
+  if(!diffRules.length) {
+    store.dispatch("rule/updateIsReorderActive", false)
+    showToast(translate("No sequence has been changed."))
+    return;
+  }
+
+  emitter.emit("presentLoader", { messgae: "Saving changes.." })
+  const responses = await Promise.allSettled(diffRules.map(async (rule: any) => {
+    await RuleService.updateRule(rule, rule.ruleId)
+  }))
+
+  const isFailedToUpdateSomeRule = responses.some((response) => response.status === 'rejected')
+  if(isFailedToUpdateSomeRule) {
+    showToast(translate("Failed to update sequence for some rules."))
+  } else {
+    showToast(translate("Sequence for rules updated successfully."))
+  }
+  emitter.emit("dismissLoader");
+  await store.dispatch('rule/updateRules', { rules: reorderingRules.value })
+  store.dispatch("rule/updateIsReorderActive", false)
+}
+
+function updateReorderingRules(event: any) {
+  reorderingRules.value = doReorder(event, reorderingRules.value)
+}
 
 function createRule() {
   router.push({ path: '/create-safety-stock' })
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 870279ab..1fa4f24e 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -23,6 +23,10 @@
             </ion-card-header>
           </ion-item>
           <ion-button color="danger" @click="logout()">{{ translate("Logout") }}</ion-button>
+          <ion-button fill="outline" @click="goToLaunchpad()">
+            {{ translate("Go to Launchpad") }}
+            <ion-icon slot="end" :icon="openOutline" />
+          </ion-button>
         </ion-card>
       </div>
       <div class="section-header">
@@ -41,7 +45,7 @@
           <ion-card-content>
             {{ translate('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.') }}
           </ion-card-content>
-          <ion-button @click="goToOms()" fill="clear">
+          <ion-button :disabled="!omsRedirectionInfo.token || !omsRedirectionInfo.url" @click="goToOms(omsRedirectionInfo.token, omsRedirectionInfo.url)" fill="clear">
             {{ translate('Go to OMS') }}
             <ion-icon slot="end" :icon="openOutline" />
           </ion-button>
@@ -61,20 +65,14 @@
           </ion-card-content>
           <ion-item lines="none">
             <ion-select :label="$t('Select store')" interface="popover" :value="currentEComStore.productStoreId" @ionChange="setEComStore($event)">
-              <ion-select-option v-for="store in (userProfile ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName }}</ion-select-option>
+              <ion-select-option v-for="store in (userProfile ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName ? store.storeName : store.productStoreId }}</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-card>
       </section>
       <hr />
 
-      <div class="section-header">
-        <h1>
-          {{ translate("App") }}
-          <p class="overline" >{{ translate("Version: ", { appVersion }) }}</p>
-        </h1>
-        <p class="overline">{{ translate("Built: ", { builtDateTime: getDateTime(appInfo.builtTime) }) }}</p>
-      </div>
+      <DxpAppVersionInfo />
 
       <section>
         <ion-card>
@@ -98,29 +96,19 @@
 
 <script setup lang="ts">
 import {  IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonMenuButton, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController } from '@ionic/vue';
-import { computed, onMounted, ref } from 'vue';
+import { computed } from 'vue';
 import { openOutline } from 'ionicons/icons'
 import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
 import TimeZoneModal from '@/views/TimezoneModal.vue';
 import Image from '@/components/Image.vue'
-import { DateTime } from "luxon";
-import { translate } from '@hotwax/dxp-components';
-
+import { goToOms, translate } from "@hotwax/dxp-components";
 
 const store = useStore()
-const router = useRouter()
-const appVersion = ref("")
-const appInfo = (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any
 
 const userProfile = computed(() => store.getters["user/getUserProfile"])
 const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
-const token = computed(() => store.getters["user/getUserToken"])
 const oms = computed(() => store.getters["user/getInstanceUrl"])
-
-onMounted(() => {
-  appVersion.value = appInfo.branch ? (appInfo.branch + "-" + appInfo.revision) : appInfo.tag;
-})
+const omsRedirectionInfo = computed(() => store.getters["user/getOmsRedirectionInfo"])
 
 function setEComStore(event: CustomEvent) {
   if(userProfile.value?.stores) {
@@ -140,17 +128,13 @@ async function changeTimeZone() {
 
 function logout() {
   store.dispatch("user/logout").then(() => {
-    router.push("/login");
+    const redirectUrl = window.location.origin + '/login'
+    window.location.href = `${process.env.VUE_APP_LOGIN_URL}?isLoggedOut=true&redirectUrl=${redirectUrl}`
   })
 }
 
-function getDateTime(time: any) {
-  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : "";
-}
-
-function goToOms() {
-  const link = (oms.value.startsWith('http') ? oms.value.replace(/\/api\/?|\/$/, "") : `https://${oms.value}.hotwax.io`) + `/qapps?token=${token.value}`
-  window.open(link, '_blank', 'noopener, noreferrer')
+function goToLaunchpad() {
+  window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
 }
 </script>
 
diff --git a/src/views/Shipping.vue b/src/views/Shipping.vue
index d28da361..52b85c88 100644
--- a/src/views/Shipping.vue
+++ b/src/views/Shipping.vue
@@ -3,18 +3,16 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ translate("Shipping") }}</ion-title>
-      </ion-toolbar>
+        <ion-title slot="start">{{ translate("Shipping") }}</ion-title>
 
-      <ion-toolbar>
-        <ion-segment v-model="selectedSegment" @ionChange="updateRuleGroup()">
+        <ion-segment :value="selectedSegment" @ionChange="updateSegment($event)" slot="end">
           <ion-segment-button value="RG_SHIPPING_FACILITY">
             <ion-label>{{ translate("Product and facility") }}</ion-label>
           </ion-segment-button>
           <ion-segment-button value="RG_SHIPPING_CHANNEL">
             <ion-label>{{ translate("Product and channel") }}</ion-label>
           </ion-segment-button>
-          <ion-segment-button value="facility">
+          <ion-segment-button value="SHIPPING_FACILITY">
             <ion-label>{{ translate("Facility") }}</ion-label>
           </ion-segment-button>
         </ion-segment>
@@ -22,14 +20,18 @@
     </ion-header>
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
-      <main v-if="selectedSegment !== 'facility'">
-        <ScheduleRuleItem  v-if="ruleGroup.ruleGroupId" />
+      <main v-if="selectedSegment !== 'SHIPPING_FACILITY'">
+        <template v-if="ruleGroup.ruleGroupId && rules.length">
+          <ScheduleRuleItem />
 
-        <section v-if="selectedSegment !== 'facility'">
-          <RuleItem :selectedSegment="selectedSegment" v-for="(rule, ruleIndex) in rules" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
-        </section>
+          <section>
+            <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
+              <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+            </ion-reorder-group>
+          </section>
+        </template>
         <div v-else class="empty-state">
-          <p>{{ translate("No shipping rules found") }}</p>
+          <p>{{ translate("No shipping rule found.") }}</p>
         </div>
       </main>
       <main v-else>
@@ -43,7 +45,7 @@
       <ion-infinite-scroll
         @ionInfinite="loadMoreFacilities($event)"
         threshold="100px"
-        v-show="isScrollable"
+        v-show="selectedSegment === 'SHIPPING_FACILITY' && isScrollable"
         ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
@@ -53,8 +55,11 @@
       </ion-infinite-scroll>
     </ion-content>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button @click="createShipping()">
+    <ion-fab v-if="selectedSegment !== 'SHIPPING_FACILITY'" vertical="bottom" horizontal="end" slot="fixed" class="ion-margin">
+      <ion-fab-button :disabled="!rules.length" class="ion-margin-bottom" color="light" @click="isReorderActive ? saveReorder() : activateReordering()">
+        <ion-icon :icon="isReorderActive ? saveOutline : balloonOutline" />
+      </ion-fab-button>
+      <ion-fab-button :disabled="isReorderActive" @click="createShipping()">
         <ion-icon :icon="addOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -62,9 +67,9 @@
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonMenuButton, IonPage, IonSegment, IonSegmentButton, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
+import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonMenuButton, IonPage, IonReorderGroup, IonSegment, IonSegmentButton, IonTitle, IonToolbar, onIonViewDidLeave, onIonViewDidEnter } from '@ionic/vue';
 import { computed, ref } from 'vue';
-import { addOutline } from 'ionicons/icons';
+import { addOutline, balloonOutline, saveOutline } from 'ionicons/icons';
 import RuleItem from '@/components/RuleItem.vue'
 import { translate } from '@hotwax/dxp-components';
 import FacilityItem from '@/components/FacilityItem.vue';
@@ -72,6 +77,8 @@ import ScheduleRuleItem from '@/components/ScheduleRuleItem.vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import emitter from '@/event-bus';
+import { RuleService } from '@/services/RuleService';
+import { doReorder, showToast } from '@/utils';
 
 const store = useStore();
 const router = useRouter()
@@ -80,17 +87,32 @@ const rules = computed(() => store.getters["rule/getRules"]);
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
 const isScrollable = computed(() => store.getters["util/isFacilitiesScrollable"]);
 const facilities = computed(() => store.getters["util/getFacilities"]);
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const reorderingRules = ref([]);
 
-const selectedSegment = ref(router.currentRoute.value.query.groupTypeEnumId ? router.currentRoute.value.query.groupTypeEnumId : "RG_SHIPPING_FACILITY")
 const isScrollingEnabled = ref(false);
 const contentRef = ref({}) as any;
 const infiniteScrollRef = ref({}) as any;
 
-onIonViewWillEnter(async() => {
+onIonViewDidEnter(async() => {
+  fetchRules();
+  emitter.on("productStoreOrConfigChanged", fetchRules);
+})
+
+onIonViewDidLeave(() => {
+  emitter.off("productStoreOrConfigChanged", fetchRules);
+  store.dispatch("rule/updateIsReorderActive", false)
+})
+
+async function fetchRules() {
   emitter.emit("presentLoader");
-  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: router.currentRoute.value.query.groupTypeEnumId ? router.currentRoute.value.query.groupTypeEnumId : "RG_SHIPPING_FACILITY" }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+  store.dispatch("rule/updateIsReorderActive", false)
+  if(!selectedSegment.value || (selectedSegment.value !== 'RG_SHIPPING_FACILITY' && selectedSegment.value !== 'RG_SHIPPING_CHANNEL' && selectedSegment.value !== 'SHIPPING_FACILITY')) store.dispatch("util/updateSelectedSegment", "RG_SHIPPING_FACILITY");
+  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+  if(selectedSegment.value === 'SHIPPING_FACILITY') fetchFacilities();
   emitter.emit("dismissLoader");
-})
+}
 
 async function fetchFacilities(vSize?: any, vIndex?: any) {
   const pageSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
@@ -130,18 +152,57 @@ async function loadMoreFacilities(event: any) {
   });
 }
 
-async function updateRuleGroup() {
+async function updateSegment(event: any) {
+  store.dispatch("util/updateSelectedSegment", event.detail.value);
+
   emitter.emit("presentLoader");
-  if(selectedSegment.value === 'facility') {
+  if(selectedSegment.value === 'SHIPPING_FACILITY') {
     isScrollingEnabled.value = false;
     await fetchFacilities();
+    store.dispatch("rule/updateIsReorderActive", false)
+  } else {
+    store.dispatch("rule/updateIsReorderActive", false)
+    reorderingRules.value = []
+    await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 })
+  }
+  emitter.emit("dismissLoader");
+}
+
+
+function activateReordering() {
+  store.dispatch("rule/updateIsReorderActive", true)
+  reorderingRules.value = rules.value;
+}
+
+async function saveReorder() {
+  const diffRules = reorderingRules.value.filter((reorderRule: any) => rules.value.some((rule: any) => rule.ruleId === reorderRule.ruleId && rule.sequenceNum !== reorderRule.sequenceNum))
+  if(!diffRules.length) {
+    store.dispatch("rule/updateIsReorderActive", false)
+    showToast(translate("No sequence has been changed."))
+    return;
+  }
+
+  emitter.emit("presentLoader", { messgae: "Saving changes.." })
+  const responses = await Promise.allSettled(diffRules.map(async (rule: any) => {
+    await RuleService.updateRule(rule, rule.ruleId)
+  }))
+
+  const isFailedToUpdateSomeRule = responses.some((response) => response.status === 'rejected')
+  if(isFailedToUpdateSomeRule) {
+    showToast(translate("Failed to update sequence for some rules."))
   } else {
-    await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value})
+    showToast(translate("Sequence for rules updated successfully."))
   }
   emitter.emit("dismissLoader");
+  await store.dispatch('rule/updateRules', { rules: reorderingRules.value })
+  store.dispatch("rule/updateIsReorderActive", false)
+}
+
+function updateReorderingRules(event: any) {
+  reorderingRules.value = doReorder(event, reorderingRules.value)
 }
 
 function createShipping() {
-  router.push({ path: '/create-shipping', query: { groupTypeEnumId: selectedSegment.value } })
+  router.push("create-shipping");
 }
 </script>
\ No newline at end of file
diff --git a/src/views/StorePickup.vue b/src/views/StorePickup.vue
index 5d0e47a3..0d921546 100644
--- a/src/views/StorePickup.vue
+++ b/src/views/StorePickup.vue
@@ -3,18 +3,16 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ translate("Store pickup") }}</ion-title>
-      </ion-toolbar>
+        <ion-title slot="start">{{ translate("Store pickup") }}</ion-title>
 
-      <ion-toolbar>
-        <ion-segment v-model="selectedSegment" @ionChange="updateRuleGroup()">
+        <ion-segment :value="selectedSegment" @ionChange="updateSegment($event)" slot="end">
           <ion-segment-button value="RG_PICKUP_FACILITY">
             <ion-label>{{ translate("Product and facility") }}</ion-label>
           </ion-segment-button>
           <ion-segment-button value="RG_PICKUP_CHANNEL">
             <ion-label>{{ translate("Product and channel") }}</ion-label>
           </ion-segment-button>
-          <ion-segment-button value="facility">
+          <ion-segment-button value="PICKUP_FACILITY">
             <ion-label>{{ translate("Facility") }}</ion-label>
           </ion-segment-button>
         </ion-segment>
@@ -22,14 +20,18 @@
     </ion-header>
 
     <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
-      <main v-if="selectedSegment !== 'facility'">
-        <ScheduleRuleItem />
-
-        <section v-if="selectedSegment === 'RG_PICKUP_FACILITY' || selectedSegment === 'RG_PICKUP_CHANNEL'">
-          <RuleItem :selectedSegment="selectedSegment" v-for="(rule, ruleIndex) in rules" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
-        </section>
+      <main v-if="selectedSegment !== 'PICKUP_FACILITY'">
+        <template v-if="ruleGroup.ruleGroupId && rules.length">
+          <ScheduleRuleItem />
+
+          <section>
+            <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
+              <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+            </ion-reorder-group>
+          </section>
+        </template>
         <div class="empty-state" v-else>
-          <p>{{ translate("No store pickup rules found") }}</p>
+          <p>{{ translate("No store pickup rule found.") }}</p>
         </div>
       </main>
       <main v-else>
@@ -44,7 +46,7 @@
       <ion-infinite-scroll
         @ionInfinite="loadMoreFacilities($event)"
         threshold="100px"
-        v-show="isScrollable"
+        v-show="selectedSegment === 'PICKUP_FACILITY' && isScrollable"
         ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
@@ -54,8 +56,11 @@
       </ion-infinite-scroll>
     </ion-content>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button @click="createStorePickup()">
+    <ion-fab v-if="selectedSegment !== 'PICKUP_FACILITY'" vertical="bottom" horizontal="end" slot="fixed" class="ion-margin">
+      <ion-fab-button :disabled="!rules.length" class="ion-margin-bottom" color="light" @click="isReorderActive ? saveReorder() : activateReordering()">
+        <ion-icon :icon="isReorderActive ? saveOutline : balloonOutline" />
+      </ion-fab-button>
+      <ion-fab-button :disabled="isReorderActive" @click="createStorePickup()">
         <ion-icon :icon="addOutline" />
       </ion-fab-button>
     </ion-fab>
@@ -63,9 +68,9 @@
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonMenuButton, IonPage, IonSegment, IonSegmentButton, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
+import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonLabel, IonMenuButton, IonPage, IonReorderGroup, IonSegment, IonSegmentButton, IonTitle, IonToolbar, onIonViewDidLeave, onIonViewDidEnter } from '@ionic/vue';
 import { computed, ref } from 'vue';
-import { addOutline } from 'ionicons/icons';
+import { addOutline, balloonOutline, saveOutline } from 'ionicons/icons';
 import RuleItem from '@/components/RuleItem.vue'
 import FacilityItem from '@/components/FacilityItem.vue'
 import { translate } from '@hotwax/dxp-components';
@@ -73,25 +78,45 @@ import ScheduleRuleItem from '@/components/ScheduleRuleItem.vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import emitter from '@/event-bus';
+import { doReorder, showToast } from '@/utils';
+import { RuleService } from '@/services/RuleService';
 
 const store = useStore();
 const router = useRouter()
 
+const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
 const rules = computed(() => store.getters["rule/getRules"]);
 const isScrollable = computed(() => store.getters["util/isFacilitiesScrollable"]);
 const facilities = computed(() => store.getters["util/getFacilities"]);
+const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
 
-const selectedSegment = ref(router.currentRoute.value.query.groupTypeEnumId ? router.currentRoute.value.query.groupTypeEnumId : "RG_PICKUP_FACILITY")
+const reorderingRules = ref([]);
 const isScrollingEnabled = ref(false);
 const contentRef = ref({}) as any;
 const infiniteScrollRef = ref({}) as any;
 
-onIonViewWillEnter(async() => {
-  emitter.emit("presentLoader");
-  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_PICKUP_FACILITY' }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
-  emitter.emit("dismissLoader");
+onIonViewDidEnter(async() => {
+  fetchRules();
+  emitter.on("productStoreOrConfigChanged", fetchRules);
 })
 
+onIonViewDidLeave(() => {
+  emitter.off("productStoreOrConfigChanged", fetchRules);
+  store.dispatch("rule/updateIsReorderActive", false)
+})
+
+async function fetchRules() {
+  emitter.emit("presentLoader");
+  store.dispatch("rule/updateIsReorderActive", false)
+  if(!selectedSegment.value || (selectedSegment.value !== 'RG_PICKUP_FACILITY' && selectedSegment.value !== 'RG_PICKUP_CHANNEL' && selectedSegment.value !== 'PICKUP_FACILITY')) store.dispatch("util/updateSelectedSegment", "RG_PICKUP_FACILITY");
+  if(selectedSegment.value === 'PICKUP_FACILITY') {
+    await fetchFacilities();
+    store.dispatch("util/fetchPickupGroups")
+  }
+  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+  emitter.emit("dismissLoader");
+}
 
 async function fetchFacilities(vSize?: any, vIndex?: any) {
   const pageSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
@@ -130,18 +155,57 @@ async function loadMoreFacilities(event: any) {
   });
 }
 
-async function updateRuleGroup() {
+async function updateSegment(event: any) {
+  store.dispatch("util/updateSelectedSegment", event.detail.value);
+
   emitter.emit("presentLoader");
-  if(selectedSegment.value === 'facility') {
+  if(selectedSegment.value === 'PICKUP_FACILITY') {
     isScrollingEnabled.value = false;
     await fetchFacilities();
+    store.dispatch("rule/updateIsReorderActive", false)
+    store.dispatch("util/fetchPickupGroups")
   } else {
-    await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value})
+    store.dispatch("rule/updateIsReorderActive", false)
+    reorderingRules.value = []
+    await store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 })
   }
   emitter.emit("dismissLoader");
 }
 
+function activateReordering() {
+  store.dispatch("rule/updateIsReorderActive", true)
+  reorderingRules.value = rules.value;
+}
+
+async function saveReorder() {
+  const diffRules = reorderingRules.value.filter((reorderRule: any) => rules.value.some((rule: any) => rule.ruleId === reorderRule.ruleId && rule.sequenceNum !== reorderRule.sequenceNum))
+  if(!diffRules.length) {
+    store.dispatch("rule/updateIsReorderActive", false)
+    showToast(translate("No sequence has been changed."))
+    return;
+  }
+
+  emitter.emit("presentLoader", { messgae: "Saving changes.." })
+  const responses = await Promise.allSettled(diffRules.map(async (rule: any) => {
+    await RuleService.updateRule(rule, rule.ruleId)
+  }))
+
+  const isFailedToUpdateSomeRule = responses.some((response) => response.status === 'rejected')
+  if(isFailedToUpdateSomeRule) {
+    showToast(translate("Failed to update sequence for some rules."))
+  } else {
+    showToast(translate("Sequence for rules updated successfully."))
+  }
+  emitter.emit("dismissLoader");
+  await store.dispatch('rule/updateRules', { rules: reorderingRules.value })
+  store.dispatch("rule/updateIsReorderActive", false)
+}
+
+function updateReorderingRules(event: any) {
+  reorderingRules.value = doReorder(event, reorderingRules.value)
+}
+
 function createStorePickup() {
-  router.push({ path: '/create-store-pickup', query: { groupTypeEnumId: selectedSegment.value } })
+  router.push("create-store-pickup")
 }
 </script>
\ No newline at end of file
diff --git a/src/views/Threshold.vue b/src/views/Threshold.vue
index bf9089f1..902e228c 100644
--- a/src/views/Threshold.vue
+++ b/src/views/Threshold.vue
@@ -8,20 +8,25 @@
     </ion-header>
 
     <ion-content>
-      <main v-if="ruleGroup.ruleGroupId">
+      <main v-if="ruleGroup.ruleGroupId && rules.length">
         <ScheduleRuleItem />
 
         <section>
-          <RuleItem v-for="(rule, ruleIndex) in rules" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+          <ion-reorder-group :disabled="false" @ionItemReorder="updateReorderingRules($event)">
+            <RuleItem v-for="(rule, ruleIndex) in (isReorderActive ? reorderingRules : rules)" :rule="rule" :ruleIndex="ruleIndex" :key="rule.ruleId" />
+          </ion-reorder-group>
         </section>
       </main>
 
       <div class="empty-state" v-else>
-       <p>{{ translate("No threshold rules found") }}</p>
+       <p>{{ translate("No threshold rule found.") }}</p>
       </div>
 
-      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button @click="CreateThreshold()">
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed" class="ion-margin">
+        <ion-fab-button :disabled="!rules.length" class="ion-margin-bottom" color="light" @click="isReorderActive ? saveReorder() : activateReordering()">
+          <ion-icon :icon="isReorderActive ? saveOutline : balloonOutline" />
+        </ion-fab-button>
+        <ion-fab-button :disabled="isReorderActive" @click="createRule()">
           <ion-icon :icon="addOutline" />
         </ion-fab-button>
       </ion-fab>
@@ -30,29 +35,79 @@
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonMenuButton, IonPage, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
-import { addOutline } from 'ionicons/icons';
+import { IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonMenuButton, IonPage, IonReorderGroup, IonTitle, IonToolbar, onIonViewDidLeave, onIonViewDidEnter } from '@ionic/vue';
+import { addOutline, balloonOutline, saveOutline } from 'ionicons/icons';
 import RuleItem from '@/components/RuleItem.vue'
 import ScheduleRuleItem from '@/components/ScheduleRuleItem.vue';
 import { useRouter } from 'vue-router';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { translate } from '@hotwax/dxp-components';
 import emitter from '@/event-bus';
+import { RuleService } from '@/services/RuleService';
+import { doReorder, showToast } from '@/utils';
 
 const store = useStore();
 const router = useRouter()
 
 const rules = computed(() => store.getters["rule/getRules"]);
 const ruleGroup = computed(() => store.getters["rule/getRuleGroup"]);
+const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const reorderingRules = ref([]);
+
+onIonViewDidEnter(async() => {
+  fetchRules();
+  emitter.on("productStoreOrConfigChanged", fetchRules);
+})
+
+onIonViewDidLeave(() => {
+  emitter.off("productStoreOrConfigChanged", fetchRules);
+  store.dispatch("rule/updateIsReorderActive", false)
+})
 
-onIonViewWillEnter(async() => {
+async function fetchRules() {
   emitter.emit("presentLoader");
-  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_THRESHOLD' }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
+  store.dispatch("util/updateSelectedSegment", "");
+  store.dispatch("rule/updateIsReorderActive", false)
+  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: 'RG_THRESHOLD', pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")]);
   emitter.emit("dismissLoader");
-})
+}
+
+
+function activateReordering() {
+  store.dispatch("rule/updateIsReorderActive", true)
+  reorderingRules.value = rules.value;
+}
+
+async function saveReorder() {
+  const diffRules = reorderingRules.value.filter((reorderRule: any) => rules.value.some((rule: any) => rule.ruleId === reorderRule.ruleId && rule.sequenceNum !== reorderRule.sequenceNum))
+  if(!diffRules.length) {
+    store.dispatch("rule/updateIsReorderActive", false)
+    showToast(translate("No sequence has been changed."))
+    return;
+  }
+
+  emitter.emit("presentLoader", { messgae: "Saving changes.." })
+  const responses = await Promise.allSettled(diffRules.map(async (rule: any) => {
+    await RuleService.updateRule(rule, rule.ruleId)
+  }))
+
+  const isFailedToUpdateSomeRule = responses.some((response) => response.status === 'rejected')
+  if(isFailedToUpdateSomeRule) {
+    showToast(translate("Failed to update sequence for some rules."))
+  } else {
+    showToast(translate("Sequence for rules updated successfully."))
+  }
+  emitter.emit("dismissLoader");
+  await store.dispatch('rule/updateRules', { rules: reorderingRules.value })
+  store.dispatch("rule/updateIsReorderActive", false)
+}
+
+function updateReorderingRules(event: any) {
+  reorderingRules.value = doReorder(event, reorderingRules.value)
+}
 
-function CreateThreshold() {
+function createRule() {
   router.push({ path: '/create-threshold' })
 }
 </script>
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index 722d2084..e415fe53 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.vue
@@ -29,8 +29,7 @@
       <ion-list>
         <ion-radio-group value="rd" v-model="timeZoneId">
           <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-            <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-            <ion-radio :value="timeZone.id" slot="start" />
+            <ion-radio :value="timeZone.id" label-placement="end" justify="start">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-list>
@@ -54,7 +53,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonRadioGroup,
   IonRadio,
   IonList,
@@ -65,7 +63,7 @@ import {
   modalController,
 } from "@ionic/vue";
 import { onBeforeMount, ref } from "vue";
-import { saveOutline } from "ionicons/icons";
+import { closeOutline, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
 import { UserService } from "@/services/UserService";
 import { hasError } from "@/utils"