diff --git a/src/components/ArchivedRoutingModal.vue b/src/components/ArchivedRoutingModal.vue
index f35efb1..a0f2508 100644
--- a/src/components/ArchivedRoutingModal.vue
+++ b/src/components/ArchivedRoutingModal.vue
@@ -12,18 +12,20 @@
   
   <ion-content>
     <ion-list>
-      <ion-item v-for="routing in props.archivedRoutings" :key="routing.orderRoutingId">
+      <ion-item v-for="routing in routings" :key="routing.orderRoutingId">
         <ion-label>{{ routing.routingName }}</ion-label>
-        <ion-button slot="end" fill="outline" color="medium">{{ "Unarchive" }}</ion-button>
+        <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="!(props as any).archivedRoutings.length">
+    <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,
@@ -38,15 +40,27 @@ import {
   modalController,
 } from "@ionic/vue";
 import { closeOutline } from "ionicons/icons";
-import { defineProps } from "vue";
+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/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index 9291873..2935d2d 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -94,13 +94,14 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButtons, IonButton, IonCard, IonCardHeader, IonCardTitle, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonReorder, IonReorderGroup, IonTitle, IonToolbar, alertController, modalController, onIonViewWillEnter, onIonViewWillLeave } from "@ionic/vue";
 import { addCircleOutline, archiveOutline, timeOutline, timerOutline } from "ionicons/icons"
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 import { computed, defineProps, ref } from "vue";
 import { Group, Route } from "@/types";
 import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
+import emitter from "@/event-bus";
 
 const router = useRouter();
 const store = useStore();
@@ -128,6 +129,12 @@ onIonViewWillEnter(async () => {
   if(!currentRoutingGroup.value.routingGroupId) {
     await store.dispatch("orderRouting/fetchOrderRoutingGroups")
   }
+
+  emitter.on("initializeOrderRoutings", initializeOrderRoutings)
+})
+
+onIonViewWillLeave(() => {
+  emitter.off("initializeOrderRoutings", initializeOrderRoutings)
 })
 
 function initializeOrderRoutings() {