diff --git a/src/components/ArchivedRoutingModal.vue b/src/components/ArchivedRoutingModal.vue
new file mode 100644
index 0000000..a0f2508
--- /dev/null
+++ b/src/components/ArchivedRoutingModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ "Archived Routes" }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="routing in routings" :key="routing.orderRoutingId">
+        <ion-label>{{ routing.routingName }}</ion-label>
+        <ion-button slot="end" fill="outline" color="medium" @click="updateOrderRouting(routing, 'statusId', 'ROUTING_DRAFT')">{{ "Unarchive" }}</ion-button>
+      </ion-item>
+    </ion-list>
+    <p class="empty-state" v-if="!routings.length">
+      {{ "No archived routings" }}
+    </p>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import emitter from "@/event-bus";
+import { Route } from "@/types";
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps, ref } from "vue";
+import { useStore } from "vuex";
+
+const store = useStore()
+const props = defineProps({
+  archivedRoutings: {
+    required: true
+  }
+})
+
+let routings = ref(props.archivedRoutings)
+
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+
+async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
+  const orderRoutingId = await store.dispatch("orderRouting/updateOrderRouting", { orderRoutingId: routing.orderRoutingId, fieldToUpdate, value })
+  if(orderRoutingId) {
+    routings.value = (routings.value as any).filter((routing: Route) => routing.orderRoutingId !== orderRoutingId)
+    emitter.emit("initializeOrderRoutings")
+  }
+}
+</script>
diff --git a/src/services/RoutingService.ts b/src/services/RoutingService.ts
index 27631ba..e0ec91a 100644
--- a/src/services/RoutingService.ts
+++ b/src/services/RoutingService.ts
@@ -35,6 +35,14 @@ const fetchOrderRoutings = async (payload: any): Promise<any> => {
   });
 }
 
+const updateOrderRouting = async (payload: any): Promise<any> => {
+  return api({
+    url: `routings/${payload.orderRoutingId}`,
+    method: "POST",
+    data: payload
+  })
+}
+
 const createRoutingRule = async (payload: any): Promise<any> => {
   let routingRuleId = '';
   try {
@@ -56,23 +64,11 @@ const createRoutingRule = async (payload: any): Promise<any> => {
 }
 
 const createOrderRouting = async (payload: any): Promise<any> => {
-  let orderRoutingId = '';
-  try {
-    const resp = await api({
-      url: "routings",
-      method: "POST",
-      data: payload
-    })
-
-    if(!hasError(resp) && resp?.data.orderRoutingId) {
-      orderRoutingId = resp.data.orderRoutingId
-    }
-  } catch(err) {
-    showToast("Failed to create new route")
-    logger.error(err)
-  }
-
-  return orderRoutingId
+  return await api({
+    url: "routings",
+    method: "POST",
+    data: payload
+  })
 }
 
 const fetchRoutingRules = async (payload: any): Promise<any> => {
@@ -117,5 +113,6 @@ export const OrderRoutingService = {
   fetchRoutingRules,
   fetchRuleActions,
   fetchRuleConditions,
+  updateOrderRouting,
   updateRoutingGroup
 }
\ No newline at end of file
diff --git a/src/store/modules/orderRouting/actions.ts b/src/store/modules/orderRouting/actions.ts
index 82443cc..50f2dc5 100644
--- a/src/store/modules/orderRouting/actions.ts
+++ b/src/store/modules/orderRouting/actions.ts
@@ -5,7 +5,7 @@ import { OrderRoutingService } from "@/services/RoutingService"
 import { hasError, showToast, sortSequence } from "@/utils"
 import * as types from './mutation-types'
 import logger from "@/logger"
-import { Group, RouteFilter } from "@/types"
+import { Group, Route, RouteFilter } from "@/types"
 
 const actions: ActionTree<OrderRoutingState, RootState> = {
   async fetchOrderRoutingGroups({ commit }) {
@@ -50,6 +50,33 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     }
   },
 
+  async updateRoutingGroup({ commit, state }, payload) {
+    let routingGroups = JSON.parse(JSON.stringify(state.groups))
+
+    try {
+      const resp = await OrderRoutingService.updateRoutingGroup(payload);
+
+      if(!hasError(resp) && resp.data.routingGroupId) {
+        routingGroups.map((group: Group) => {
+          if(group.routingGroupId === resp.data.routingGroupId) {
+            group.description = payload.description
+          }
+        })
+        showToast("Rounting group information updated")
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error(err);
+    }
+
+    if(routingGroups.length) {
+      routingGroups = sortSequence(routingGroups)
+    }
+
+    commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
+  },
+
   async setCurrentRoutingGroupId({ commit }, payload) {
     commit(types.ORDER_ROUTING_CURRENT_GROUP_UPDATED, payload)
   },
@@ -80,6 +107,73 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
   },
 
+  async createOrderRouting({ commit, state }, payload) {
+    let orderRoutings = JSON.parse(JSON.stringify(state.routes))
+    let orderRoutingId = ''
+
+    try {
+      const resp = await OrderRoutingService.createOrderRouting(payload)
+
+      if(!hasError(resp) && resp?.data.orderRoutingId) {
+        orderRoutingId = resp.data.orderRoutingId
+        orderRoutings.push({
+          ...payload,
+          orderRoutingId
+        })
+        showToast('New Order Routing Created')
+      }
+
+      // Sort the routings and update the state only on success
+      if(orderRoutings.length) {
+        orderRoutings = sortSequence(orderRoutings)
+      }
+
+      commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+    } catch(err) {
+      showToast("Failed to create order routing")
+      logger.error('err', err)
+    }
+
+    return orderRoutingId;
+  },
+
+  async updateOrderRouting({ commit, state }, payload) {
+    let orderRoutings = JSON.parse(JSON.stringify(state.routes))
+    const field: Route[keyof Route] = payload.fieldToUpdate
+    let orderRoutingId = ''
+
+    const params = {
+      orderRoutingId: payload.orderRoutingId,
+      [field]: payload.value  // only one field can be updated once for orderRouting
+    }
+
+    try {
+      const resp = await OrderRoutingService.updateOrderRouting(params);
+
+      if(!hasError(resp) && resp.data.orderRoutingId) {
+        orderRoutingId = resp.data.orderRoutingId
+        orderRoutings.map((routing: Route) => {
+          if(routing.orderRoutingId === orderRoutingId) {
+            routing[field] = payload.value
+          }
+        })
+        showToast("Order routing information updated")
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      showToast("Failed to update order routing")
+      logger.error(err);
+    }
+
+    if(orderRoutings.length) {
+      orderRoutings = sortSequence(orderRoutings)
+    }
+
+    commit(types.ORDER_ROUTINGS_UPDATED, orderRoutings)
+    return orderRoutingId;
+  },
+
   async fetchRoutingRules({ commit }, orderRoutingId) {
     let routingRules = [] as any;
     // filter groups on the basis of productStoreId
@@ -144,33 +238,6 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
     commit(types.ORDER_ROUTING_FILTERS_UPDATED, routingFilters)
   },
 
-  async updateRoutingGroup({ commit, state }, payload) {
-    let routingGroups = JSON.parse(JSON.stringify(state.groups))
-
-    try {
-      const resp = await OrderRoutingService.updateRoutingGroup(payload);
-
-      if(!hasError(resp) && resp.data.routingGroupId) {
-        routingGroups.map((group: Group) => {
-          if(group.routingGroupId === resp.data.routingGroupId) {
-            group.description = payload.description
-          }
-        })
-        showToast("Rounting group information updated")
-      } else {
-        throw resp.data
-      }
-    } catch(err) {
-      logger.error(err);
-    }
-
-    if(routingGroups.length) {
-      routingGroups = sortSequence(routingGroups)
-    }
-
-    commit(types.ORDER_ROUTING_GROUPS_UPDATED, routingGroups)
-  },
-
   async fetchRuleConditions({ commit }, routingRuleId) {
     let ruleConditions = [] as any;
     // filter groups on the basis of productStoreId
diff --git a/src/theme/variables.css b/src/theme/variables.css
index bec267e..b41b219 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -254,6 +254,23 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (prefers-color-scheme: dark) {
   ion-chip > ion-icon {
     color: var(--ion-color-dark);
diff --git a/src/types/index.ts b/src/types/index.ts
index a216dee..cd12740 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -34,7 +34,8 @@ type Route = {
   description: string,
   createdByUser: string,
   createdDate: string,
-  lastUpdatedStamp: string
+  lastUpdatedStamp: string,
+  [key: string]: string | number
 }
 
 type Rule = {
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 7dae7e3..8727dfd 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -19,24 +19,32 @@
                 <ion-icon :icon="addCircleOutline" />
               </ion-button>
             </ion-list-header>
-            <ion-card v-for="routing in getActiveAndDraftOrderRoutings()" :key="routing.orderRoutingId" @click="redirect(routing.orderRoutingId)">
-              <ion-item lines="full">
-                <ion-label>
-                  <h1>{{ routing.routingName }}</h1>
-                </ion-label>
-                <ion-chip>{{ `${routing.sequenceNum}/4` }}</ion-chip>
-              </ion-item>
-              <ion-item>
-                <ion-badge :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
-                <ion-button fill="clear" color="medium" slot="end">
-                  {{ "Archive" }}
-                  <ion-icon :icon="archiveOutline" />
-                </ion-button>
-              </ion-item>
-            </ion-card>
+            <ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
+              <ion-card v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click.prevent="redirect(routing.orderRoutingId)">
+                <ion-item lines="full">
+                  <ion-label>
+                    <h1>{{ routing.routingName }}</h1>
+                  </ion-label>
+                  <ion-reorder>
+                    <ion-chip outline>
+                      <ion-label>{{ `${index + 1}/${routingsForReorder.length}` }}</ion-label>
+                      <ion-icon :icon="reorderTwoOutline"/>
+                    </ion-chip>
+                  </ion-reorder>
+                </ion-item>
+                <ion-item>
+                  <ion-badge v-if="routing.statusId === 'ROUTING_DRAFT'" :color="routingStatus[routing.statusId]?.color" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ACTIVE')">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-badge v-else :color="routingStatus[routing.statusId]?.color">{{ routingStatus[routing.statusId]?.desc || routing.statusId }}</ion-badge>
+                  <ion-button fill="clear" color="medium" slot="end" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
+                    {{ "Archive" }}
+                    <ion-icon :icon="archiveOutline" />
+                  </ion-button>
+                </ion-item>
+              </ion-card>
+            </ion-reorder-group>
           </ion-list>
           <div>
-            <ion-item lines="none">
+            <ion-item button lines="none" @click="openArchivedRoutingModal()">
               <ion-icon slot="start" :icon="archiveOutline" />
               <ion-label>{{ "Archive" }}</ion-label>
               <ion-badge color="medium">{{ getArchivedOrderRoutings().length }}{{ " rules" }}</ion-badge>
@@ -47,14 +55,13 @@
           <main>
             <ion-item lines="none">
               {{ "Description" }}
-              <ion-button fill="clear" slot="end" @click="updateGroupDescription()">
-                {{ "Edit" }}
+              <ion-button fill="clear" slot="end" @click="isDescUpdating ? updateGroupDescription() : (isDescUpdating = !isDescUpdating)">
+                {{ isDescUpdating ? "Save" : "Edit" }}
               </ion-button>
             </ion-item>
             <ion-item lines="none">
-              <ion-label>
-                {{ currentRoutingGroup.description ? currentRoutingGroup.description : "No description available" }}
-              </ion-label>
+              <ion-textarea v-if="isDescUpdating" aria-label="description" v-model="description"></ion-textarea>
+              <ion-label v-else>{{ description }}</ion-label>
             </ion-item>
           </main>
           <aside>
@@ -84,18 +91,24 @@
           </aside>
         </section>
       </div>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button :disabled="!routingsToUpdate.length">
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, alertController } from "@ionic/vue";
-import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTextarea, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
+import { addCircleOutline, archiveOutline, reorderTwoOutline, saveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { computed, defineProps } from "vue";
+import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
-import { OrderRoutingService } from "@/services/RoutingService";
+import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
+import emitter from "@/event-bus";
 
 const router = useRouter();
 const store = useStore();
@@ -107,6 +120,11 @@ const props = defineProps({
 })
 
 const routingStatus = JSON.parse(process.env?.VUE_APP_ROUTE_STATUS_ENUMS as string)
+let routingsToUpdate = ref([])
+let initialRoutingsOrder = ref([])
+let routingsForReorder = ref([])
+let description = ref('')
+let isDescUpdating = ref(false)
 
 const currentRoutingGroup = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const orderRoutings = computed(() => store.getters["orderRouting/getOrderRoutings"])
@@ -114,12 +132,26 @@ const orderRoutings = computed(() => store.getters["orderRouting/getOrderRouting
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchOrderRoutings", props.routingGroupId)
 
+  initializeOrderRoutings();
+
   // On refresh, the groups list is removed thus resulting is not fetching the current group information
   if(!currentRoutingGroup.value.routingGroupId) {
     await store.dispatch("orderRouting/fetchOrderRoutingGroups")
   }
+
+  description.value = currentRoutingGroup.value.description ? currentRoutingGroup.value.description : "No description available"
+  emitter.on("initializeOrderRoutings", initializeOrderRoutings)
+})
+
+onIonViewWillLeave(() => {
+  emitter.off("initializeOrderRoutings", initializeOrderRoutings)
 })
 
+function initializeOrderRoutings() {
+  initialRoutingsOrder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+  routingsForReorder.value = JSON.parse(JSON.stringify(getActiveAndDraftOrderRoutings()))
+}
+
 async function redirect(orderRoutingId: string) {
   await store.dispatch('orderRouting/setCurrentOrderRoutingId', orderRoutingId)
   router.push(`${orderRoutingId}/rules`)
@@ -141,6 +173,11 @@ async function createOrderRoute() {
   })
 
   newRouteAlert.onDidDismiss().then(async (result: any) => {
+    // considered that if a role is available on dismiss, it will be a negative role in which we don't need to perform any action
+    if(result.role) {
+      return;
+    }
+
     const routingName = result.data?.values?.routingName;
     if(routingName && props.routingGroupId) {
       // TODO: check for the default value of params
@@ -149,11 +186,16 @@ async function createOrderRoute() {
         routingGroupId: props.routingGroupId,
         statusId: "ROUTING_DRAFT",
         routingName,
-        sequenceNum: 0,
+        sequenceNum: orderRoutings.value.length && orderRoutings.value[orderRoutings.value.length - 1].sequenceNum >= 0 ? orderRoutings.value[orderRoutings.value.length - 1].sequenceNum + 5 : 0,  // added check for `>= 0` as sequenceNum can be 0 which will result in again setting the new route seqNum to 0
         description: ""
       }
 
-      await OrderRoutingService.createOrderRouting(payload)
+      const orderRoutingId = await store.dispatch("orderRouting/createOrderRouting", payload)
+
+      // update the routing order for reordering
+      if(orderRoutingId) {
+        initializeOrderRoutings();
+      }
     }
   })
 
@@ -169,35 +211,60 @@ function getArchivedOrderRoutings() {
 }
 
 async function updateGroupDescription() {
-  const newRouteAlert = await alertController.create({
-    header: "Add Group Description",
-    buttons: [{
-      text: "Cancel",
-      role: "cancel"
-    }, {
-      text: "Save"
-    }],
-    inputs: [{
-      type: "textarea",
-      name: "groupDescription",
-      placeholder: "description"
-    }]
-  })
+  if(description.value && props.routingGroupId) {
+    const payload = {
+      routingGroupId: props.routingGroupId,
+      description: description.value,
+    }
 
-  newRouteAlert.onDidDismiss().then(async (result: any) => {
-    const groupDescription = result.data?.values?.groupDescription;
-    if(groupDescription && props.routingGroupId) {
-      // TODO: check for the default value of params
-      const payload = {
-        routingGroupId: props.routingGroupId,
-        description: groupDescription,
-      }
+    await store.dispatch("orderRouting/updateRoutingGroup", payload)
+    isDescUpdating.value = false
+  }
+}
 
-      await store.dispatch("orderRouting/updateRoutingGroup", payload)
+function findRoutingsDiff(previousSeq: any, updatedSeq: any) {
+  const diffSeq: any = Object.keys(previousSeq).reduce((diff, key) => {
+    if (updatedSeq[key].orderRoutingId === previousSeq[key].orderRoutingId) return diff
+    return {
+      ...diff,
+      [key]: updatedSeq[key]
     }
+  }, {})
+  return diffSeq;
+}
+
+function doReorder(event: CustomEvent) {
+  const previousSeq = JSON.parse(JSON.stringify(initialRoutingsOrder.value))
+
+  // returns the updated sequence after reordering
+  const updatedSeq = event.detail.complete(JSON.parse(JSON.stringify(routingsForReorder.value)));
+
+  let diffSeq = findRoutingsDiff(previousSeq, updatedSeq)
+
+  const updatedSeqenceNum = previousSeq.map((routing: Route) => routing.sequenceNum)
+  Object.keys(diffSeq).map((key: any) => {
+    diffSeq[key].sequenceNum = updatedSeqenceNum[key]
   })
 
-  return newRouteAlert.present();
+  diffSeq = Object.keys(diffSeq).map((key) => diffSeq[key])
+
+  routingsForReorder.value = updatedSeq
+  routingsToUpdate.value = diffSeq
+}
+
+async function openArchivedRoutingModal() {
+  const archivedRoutingModal = await modalController.create({
+    component: ArchivedRoutingModal,
+    componentProps: { archivedRoutings: getArchivedOrderRoutings() }
+  })
+  archivedRoutingModal.present();
+}
+
+async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
+  const orderRoutingId = await store.dispatch("orderRouting/updateOrderRouting", { orderRoutingId: routing.orderRoutingId, fieldToUpdate, value })
+  if(orderRoutingId) {
+    initializeOrderRoutings()
+  }
 }
 </script>