diff --git a/app/frontend/src/components/ModelSelectDrawer.vue b/app/frontend/src/components/ModelSelectDrawer.vue
index 27ee316f..4807c37b 100644
--- a/app/frontend/src/components/ModelSelectDrawer.vue
+++ b/app/frontend/src/components/ModelSelectDrawer.vue
@@ -53,7 +53,8 @@ const modelsStore = useModelsStore();
 const models = modelsStore.models
 
 function selectModel(model, toggle) {
-  modelsStore.selectedModel = model
+  // modelsStore.selectedModel = model
+  modelsStore.updateModel(model)
   toggle()
 }
 
diff --git a/app/frontend/src/components/SubmitButton.vue b/app/frontend/src/components/SubmitButton.vue
index 65bd3029..27c6da58 100644
--- a/app/frontend/src/components/SubmitButton.vue
+++ b/app/frontend/src/components/SubmitButton.vue
@@ -16,7 +16,6 @@ function submit() {
   const model = modelsStore.selectedModel
   const hucsArray = Map.selected_hucs
   submitHucs(hucsArray, model.shortName)
-  modelsStore.selectedModel
 }
 async function submitHucs(selected_hucs, model) {
   selected_hucs = selected_hucs.map(a => a.hucid);
diff --git a/app/frontend/src/components/TheLeafletMap.vue b/app/frontend/src/components/TheLeafletMap.vue
index d145ca19..8ef11f94 100644
--- a/app/frontend/src/components/TheLeafletMap.vue
+++ b/app/frontend/src/components/TheLeafletMap.vue
@@ -9,8 +9,42 @@ import L from 'leaflet'
 import "leaflet-easybutton/src/easy-button";
 import { onMounted } from 'vue'
 import { useMapStore } from '@/stores/map'
+import { useModelsStore } from '@/stores/models'
 
 const mapStore = useMapStore()
+const modelsStore = useModelsStore();
+
+const modelAction = modelsStore.$onAction(
+  ({
+    name, // name of the action
+    store, // store instance, same as `someStore`
+    args, // array of parameters passed to the action
+    after, // hook after the action returns or resolves
+    onError, // hook if the action throws or rejects
+  }) => {
+    // this will trigger if the action succeeds and after it has fully run.
+    // it waits for any returned promised
+    after((result) => {
+        console.log(store.selectedModel.input)
+        if( store.selectedModel.input != "bbox" ){
+            removeBbox()
+        }else{
+            updateMapBBox()
+        }
+    })
+
+    // this will trigger if the action throws or returns a promise that rejects
+    onError((error) => {
+      console.warn(
+        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
+      )
+    })
+  }
+)
+
+// manually remove the listener
+// modelAction()
+
 const Map = mapStore.mapObject
 
 onMounted(() => {
@@ -902,12 +936,7 @@ function updateMapBBox() {
     Map.bbox = [xmin, ymin, xmax, ymax];
 
 
-    // remove the bbox layer if it exists
-    if ('BBOX' in Map.huclayers) {
-        // remove the polygon overlay 
-        Map.huclayers['BBOX'].clearLayers();
-        delete Map.huclayers['BBOX'];
-    }
+    removeBbox()
 
     // redraw the bbox layer with new coordinates
     let coords = [[[xmin, ymin],
@@ -932,11 +961,22 @@ function updateMapBBox() {
     // save the layer
     Map.huclayers['BBOX'] = json_polygon;
 
-    json_polygon.addTo(Map.map);
+    if (modelsStore.selectedModel.input == "bbox"){
+        json_polygon.addTo(Map.map);
+    }
 
     return bbox.is_valid
 }
 
+function removeBbox(){
+        // remove the bbox layer if it exists
+        if ('BBOX' in Map.huclayers) {
+        // remove the polygon overlay 
+        Map.huclayers['BBOX'].clearLayers();
+        delete Map.huclayers['BBOX'];
+    }
+}
+
 
 /**
 * Toggles HUC boundaries on the map, on/off.
diff --git a/app/frontend/src/stores/models.js b/app/frontend/src/stores/models.js
index 1a3042a8..42460c5b 100644
--- a/app/frontend/src/stores/models.js
+++ b/app/frontend/src/stores/models.js
@@ -30,5 +30,9 @@ export const useModelsStore = defineStore('models', () => {
   ])
   const selectedModel = ref({})
 
-  return { models, selectedModel }
+  function updateModel(model) {
+    this.selectedModel = model
+}
+
+  return { models, selectedModel, updateModel }
 })