diff --git a/app_vue/src/assets/images/binMarkerIcons/alert-bin.png b/app_vue/src/assets/images/binMarkerIcons/error-bin.png
similarity index 100%
rename from app_vue/src/assets/images/binMarkerIcons/alert-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/error-bin.png
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 6c76ed12..1db37ad7 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -167,7 +167,10 @@ onDeactivated(() => {
 
 <style lang="scss" scoped>
 // leaflet css override for mobile views
-
+:deep img.low-opacity {
+  // class from sensorMapMaker that handles filtered out bins opacity
+  opacity: 0.2;
+}
 :deep .leaflet-pane .leaflet-layer {
   // handles map opacity level
   opacity: 0.7 !important;
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 84d3cb2a..dfdecceb 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { reactive, watch, onBeforeMount } from 'vue';
 import { LPopup, LIcon } from '@vue-leaflet/vue-leaflet';
 import { useRouteStore } from '@/stores/route_store';
 import { storeToRefs } from 'pinia';
-import { getIconAndProgressColor, getMaterialTypeIconURL } from '@/utils/mapMarkerHelper';
+import { getBinIconName, getMaterialTypeIconURL, getVuetifyLinearProgressColor, getIconUrl } from '@/utils/mapMarkerHelper';
 import { getDate12HrTime } from '@/utils/formattingHelper';
 
 const props = defineProps({
@@ -14,20 +14,28 @@ const props = defineProps({
 });
 
 // set html element variables
-const fillPercent = ref(Math.round(props.sensor.fill_level || 0));
-const { iconUrl, linearProgressColor } = getIconAndProgressColor(props.sensor);
-const isAlreadyInRoute = ref(false);
-const isRouteCreated = ref(false);
+const state = reactive({
+  linearProgressColor: '',
+  fillPercent: 0,
+  isAlreadyInRoute: false,
+  showAddRemoveFromRoute: false
+});
 
 // route store
 const routeStore = useRouteStore();
 const { getSelectedRouteList, getShouldDisplayRoute } = storeToRefs(routeStore);
 
+onBeforeMount(() => {
+  const binIconName = getBinIconName(props.sensor);
+  state.linearProgressColor = getVuetifyLinearProgressColor(binIconName);
+  state.fillPercent = Math.round(props.sensor.fill_level || 0);
+});
+
 // watch for changes in stored sensor route array (ie. when a sensor gets added or removed)
 watch(
   getSelectedRouteList,
   () => {
-    isAlreadyInRoute.value = routeStore.isAlreadyInRoute(props.sensor);
+    state.isAlreadyInRoute = isAlreadyInRoute(props.sensor);
   },
   { deep: true }
 );
@@ -35,14 +43,25 @@ watch(
 watch(
   getShouldDisplayRoute,
   () => {
-    isRouteCreated.value = routeStore.getShouldDisplayRoute;
+    const routeList = routeStore.getSelectedRouteList;
+    state.showAddRemoveFromRoute = routeStore.getShouldDisplayRoute && routeList.length > 1;
   },
   { deep: true }
 );
 
+function isAlreadyInRoute(sensor) {
+  const selectedRouteList = routeStore.getSelectedRouteList;
+  if (selectedRouteList.length > 1) {
+    return !!selectedRouteList.find((bin) => bin.id === sensor.id);
+  } else if (selectedRouteList.length === 1) {
+    return true;
+  }
+  return false;
+}
+
 function addBinToRoute(sensor) {
   // only add to route if not already added
-  if (isAlreadyInRoute.value === false) {
+  if (state.isAlreadyInRoute === false) {
     routeStore.addSensorToRoute(sensor);
     routeStore.googOptimizeRoute();
   }
@@ -50,7 +69,7 @@ function addBinToRoute(sensor) {
 
 function removeBinFromRoute(sensor) {
   // only remove from route if already added
-  if (isAlreadyInRoute.value === true) {
+  if (state.isAlreadyInRoute === true) {
     routeStore.removeSensorFromRoute(sensor);
     routeStore.googOptimizeRoute();
   }
@@ -59,9 +78,10 @@ function removeBinFromRoute(sensor) {
 
 <template>
   <l-icon
+    :class-name="props.sensor.isFilteredOut ? 'low-opacity' : ''"
     :icon-size="[19, 23]"
     :icon-anchor="[10, 18]"
-    :icon-url="iconUrl"
+    :icon-url="getIconUrl(getBinIconName(props.sensor))"
   />
 
   <l-popup class="popup">
@@ -116,14 +136,14 @@ function removeBinFromRoute(sensor) {
 
       <section class="popup__sidebar">
         <div class="fill-level">
-          <template v-if="fillPercent === null">level not captured</template>
+          <template v-if="!state.fillPercent && state.fillPercent !== 0">level not captured</template>
           <template v-else>
-            <span class="fill-level__percent">{{ fillPercent }}%</span>
+            <span class="fill-level__percent">{{ state.fillPercent }}%</span>
             <v-progress-linear
               class="fill-level__progress-bar"
               style="width: 100px; height: 20px; transform: rotate(270deg); top: unset; left: unset"
-              :model-value="fillPercent"
-              :color="linearProgressColor"
+              :model-value="state.fillPercent"
+              :color="state.linearProgressColor"
               :max="100"
             ></v-progress-linear>
             <div class="fill-level__text">Fill level</div>
@@ -207,20 +227,20 @@ function removeBinFromRoute(sensor) {
     <!-- add to route buttons -->
     <section
       class="bin-details__cta-routes"
-      v-if="isRouteCreated"
+      v-if="state.showAddRemoveFromRoute"
     >
       <v-btn
         variant="flat"
         class="mt-2 mb-2"
         color="#191A1C"
-        :disabled="isAlreadyInRoute"
+        :disabled="state.isAlreadyInRoute"
         @click="addBinToRoute(props.sensor)"
       >
         + Add to route
       </v-btn>
       <v-btn
         variant="tonal"
-        v-if="isAlreadyInRoute"
+        v-if="state.isAlreadyInRoute"
         class="mt-2 mb-2"
         @click="removeBinFromRoute(props.sensor)"
       >
diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index d69640bf..50cbc941 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -12,7 +12,7 @@ const routeStore = useRouteStore();
 
 // sensor store
 const sensorStore = useSensorStore();
-const { sensors, getAllGroupOptions, getAllAssetTags, getAllBinTypes, getAllBinVolumes, getAllMaterialTypes } = storeToRefs(sensorStore);
+const { getAllGroupOptions, getAllAssetTags, getAllBinTypes, getAllBinVolumes, getAllMaterialTypes, getRoutableSensors } = storeToRefs(sensorStore);
 
 // component reactive variables
 const state = reactive({
@@ -27,10 +27,10 @@ const state = reactive({
   binType: [],
   binVolume: [],
   materialType: [],
-  totalSensors: 0,
+  totalSensorsShown: 0,
   showFillLabel: false,
   isCollapsed: false,
-  filterEnabledMap: {
+  filtersUsedMap: {
     fillRange: false,
     group: false,
     assetTag: false,
@@ -41,8 +41,8 @@ const state = reactive({
 });
 
 // watching for store state updates and updating component variables
-watch(sensors, () => {
-  state.totalSensors = sensorStore.getTotalSensors;
+watch(getRoutableSensors, () => {
+  state.totalSensorsShown = sensorStore.getRoutableSensors.length || 0;
 });
 
 watch(getAllGroupOptions, () => {
@@ -76,9 +76,9 @@ function updateGroupFilter() {
   updateSensorsShown();
 
   if (state.selectedGroup) {
-    state.filterEnabledMap['group'] = true;
+    state.filtersUsedMap['group'] = true;
   } else {
-    state.filterEnabledMap['group'] = false;
+    state.filtersUsedMap['group'] = false;
   }
 }
 
@@ -87,9 +87,9 @@ function updateAssetTagFilter() {
   updateSensorsShown();
 
   if (state.selectedAssetTag.length > 0) {
-    state.filterEnabledMap['assetTag'] = true;
+    state.filtersUsedMap['assetTag'] = true;
   } else {
-    state.filterEnabledMap['assetTag'] = false;
+    state.filtersUsedMap['assetTag'] = false;
   }
 }
 
@@ -98,9 +98,9 @@ function updateBinTypeFilter() {
   updateSensorsShown();
 
   if (state.selectedBinType.length > 0) {
-    state.filterEnabledMap['binType'] = true;
+    state.filtersUsedMap['binType'] = true;
   } else {
-    state.filterEnabledMap['binType'] = false;
+    state.filtersUsedMap['binType'] = false;
   }
 }
 
@@ -109,9 +109,9 @@ function updateBinVolumeFilter() {
   updateSensorsShown();
 
   if (state.selectedBinVolume) {
-    state.filterEnabledMap['binVolume'] = true;
+    state.filtersUsedMap['binVolume'] = true;
   } else {
-    state.filterEnabledMap['binVolume'] = false;
+    state.filtersUsedMap['binVolume'] = false;
   }
 }
 
@@ -121,9 +121,9 @@ function updateFillRangeFilter() {
 
   const isInitial = state.selectedFillRange[0] === 0 && state.selectedFillRange[1] === 100;
   if (isInitial) {
-    state.filterEnabledMap['fillRange'] = false;
+    state.filtersUsedMap['fillRange'] = false;
   } else {
-    state.filterEnabledMap['fillRange'] = true;
+    state.filtersUsedMap['fillRange'] = true;
   }
 }
 
@@ -132,9 +132,9 @@ function updateMaterialTypeFilter() {
   updateSensorsShown();
 
   if (state.selectedMaterialType.length > 0) {
-    state.filterEnabledMap['materialType'] = true;
+    state.filtersUsedMap['materialType'] = true;
   } else {
-    state.filterEnabledMap['materialType'] = false;
+    state.filtersUsedMap['materialType'] = false;
   }
 }
 
@@ -149,14 +149,14 @@ function clearFilters() {
   state.selectedFillRange = [0, 100];
   state.selectedMaterialType = [];
 
-  Object.keys(state.filterEnabledMap).forEach((key) => {
-    state.filterEnabledMap[key] = false;
+  Object.keys(state.filtersUsedMap).forEach((key) => {
+    state.filtersUsedMap[key] = false;
   });
 }
 
 function getFilterCount() {
   // returns number of filters in use
-  const truthArr = Object.values(state.filterEnabledMap).filter((isEnabled) => isEnabled);
+  const truthArr = Object.values(state.filtersUsedMap).filter((isEnabled) => isEnabled);
   return truthArr.length;
 }
 </script>
@@ -266,7 +266,7 @@ function getFilterCount() {
     </section>
 
     <div class="mb-6">
-      <span class="font-weight-bold">Result: {{ state.totalSensors }} bin{{ state.totalSensors > 1 ? 's' : '' }}</span>
+      <span class="font-weight-bold">Result: {{ state.totalSensorsShown }} bin{{ state.totalSensorsShown > 1 ? 's' : '' }}</span>
       displayed on map
     </div>
   </section>
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 654939dc..3007affa 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -10,7 +10,7 @@ import { telusUi } from '@/styles/telusUi';
 // stores
 const routeStore = useRouteStore();
 const sensorStore = useSensorStore();
-const { getShouldDisplayRoute, getHasMappedStartEnd } = storeToRefs(routeStore);
+const { getShouldDisplayRoute, getHasMappedStartEnd, getSelectedRouteList } = storeToRefs(routeStore);
 
 const state = reactive({
   startPointAddress: '',
@@ -20,7 +20,8 @@ const state = reactive({
   shouldDisplayRoute: false,
   drag: false,
   isMapInitialized: false,
-  isLoadingGoogApi: false
+  isLoadingGoogApi: false,
+  selectedRouteList: []
 });
 
 onMounted(() => {
@@ -41,11 +42,16 @@ watch(getHasMappedStartEnd, () => {
   state.isMapInitialized = routeStore.getHasMappedStartEnd;
 });
 
+watch(getSelectedRouteList, () => {
+  state.selectedRouteList = routeStore.getSelectedRouteList;
+});
+
 async function findRouteClicked() {
   state.isLoadingGoogApi = true;
-  routeStore.setSelectedRouteList(sensorStore.sensors); // store current displayed sensors into route list
+  routeStore.setSelectedRouteList(sensorStore.getRoutableSensors); // store current displayed sensors into route list
 
-  if (sensorStore.getTotalSensors === 1) {
+  const routeList = routeStore.getSelectedRouteList;
+  if (routeList.length === 1) {
     await routeStore.googUpdateRouteStats();
   } else {
     await routeStore.googOptimizeRoute();
@@ -77,7 +83,7 @@ function updateEndPoint(value) {
     <!-- route info display -->
     <section v-if="state.shouldDisplayRoute">
       <SensorRouteBlock
-        :selectedRouteList="routeStore.getSelectedRouteList"
+        :selectedRouteList="state.selectedRouteList"
         :startPointAddress="routeStore.getStartPointAddress"
         :endPointAddress="routeStore.getEndPointAddress"
       ></SensorRouteBlock>
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index f01cd035..d368cf72 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -82,12 +82,6 @@ export const useRouteStore = defineStore('route', {
     setIsRouteGenerated(value) {
       this.shouldDisplayRoute = value;
     },
-    isAlreadyInRoute(sensor) {
-      if (this.getSelectedRouteList.length > 0) {
-        return !!this.getSelectedRouteList.find((bin) => bin.id === sensor.id);
-      }
-      return false;
-    },
     async googUpdateRouteStats() {
       const googResponse = await getOptimizedRouteData(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress, false);
       if (googResponse && googResponse.routes && googResponse.routes[0]) {
diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js
index a80645c8..3a5d83a8 100644
--- a/app_vue/src/stores/sensors_store.js
+++ b/app_vue/src/stores/sensors_store.js
@@ -1,37 +1,41 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 
 export const useSensorStore = defineStore('sensors', {
   state: () => ({
     sensors: [],
-    allSensors: [],
     selectedGroup: null,
     selectedAssetTag: [],
     selectedBinType: [],
     selectedBinVolume: null,
-    selectedFillRange: [0,100],
+    selectedFillRange: [0, 100],
     selectedMaterialType: []
   }),
   getters: {
     getSensors({ sensors }) {
       return sensors;
     },
+    getRoutableSensors({ sensors }) {
+      return sensors.filter((sensor) => {
+        return !sensor.isFilteredOut;
+      });
+    },
     getTotalSensors({ sensors }) {
       return Object.keys(sensors).length;
     },
-    getAllGroupOptions({ allSensors }) {
-      return [...new Set(allSensors.flatMap(sensor => sensor.group || []))];
+    getAllGroupOptions({ sensors }) {
+      return [...new Set(sensors.flatMap((sensor) => sensor.group || []))];
     },
-    getAllAssetTags({ allSensors }) {
-      return [...new Set(allSensors.flatMap(sensor => sensor.asset_tag || []))];
+    getAllAssetTags({ sensors }) {
+      return [...new Set(sensors.flatMap((sensor) => sensor.asset_tag || []))];
     },
-    getAllBinTypes({ allSensors }) {
-      return [...new Set(allSensors.flatMap(sensor => sensor.bin_type || []))];
+    getAllBinTypes({ sensors }) {
+      return [...new Set(sensors.flatMap((sensor) => sensor.bin_type || []))];
     },
-    getAllBinVolumes({ allSensors }) {
-      return [...new Set(allSensors.flatMap(sensor => sensor.bin_volume || []))];
+    getAllBinVolumes({ sensors }) {
+      return [...new Set(sensors.flatMap((sensor) => sensor.bin_volume || []))];
     },
-    getAllMaterialTypes({ allSensors }) {
-      return [...new Set(allSensors.flatMap(sensor => sensor.material_type || []))];
+    getAllMaterialTypes({ sensors }) {
+      return [...new Set(sensors.flatMap((sensor) => sensor.material_type || []))];
     }
   },
   actions: {
@@ -46,10 +50,9 @@ export const useSensorStore = defineStore('sensors', {
     },
     setSensors(value) {
       this.sensors = value;
-      this.allSensors = value;
     },
     setSelectedGroup(group) {
-      this.selectedGroup = group
+      this.selectedGroup = group;
     },
     setSelectedAssetTag(assetTag) {
       this.selectedAssetTag = assetTag;
@@ -67,7 +70,7 @@ export const useSensorStore = defineStore('sensors', {
       this.selectedMaterialType = materialType;
     },
     updateSensorsWithFilters() {
-      this.sensors = this.allSensors.filter(sensor => {
+      this.sensors.map((sensor) => {
         // filter for fill range
         const fillRangeFilter = () => {
           if (this.selectedFillRange && (sensor.fill_level || sensor.fill_level === 0)) {
@@ -75,7 +78,7 @@ export const useSensorStore = defineStore('sensors', {
           }
           return true;
         };
-  
+
         // filter for group
         const groupFilter = () => {
           if (this.selectedGroup && this.selectedGroup.length > 0 && sensor.group) {
@@ -83,7 +86,7 @@ export const useSensorStore = defineStore('sensors', {
           }
           return true;
         };
-  
+
         // filter for asset tag
         const assetTagFilter = () => {
           if (this.selectedAssetTag && this.selectedAssetTag.length > 0 && sensor.asset_tag) {
@@ -91,7 +94,7 @@ export const useSensorStore = defineStore('sensors', {
           }
           return true;
         };
-  
+
         // filter for bintype
         const binTypeFilter = () => {
           if (this.selectedBinType && this.selectedBinType.length > 0 && sensor.bin_type) {
@@ -99,7 +102,7 @@ export const useSensorStore = defineStore('sensors', {
           }
           return true;
         };
-  
+
         // filter for bin volume
         const binVolumeFilter = () => {
           if (this.selectedBinVolume && this.selectedBinVolume.length > 0 && sensor.bin_volume) {
@@ -116,9 +119,12 @@ export const useSensorStore = defineStore('sensors', {
           return true;
         };
 
-        // combining results of all filters together
-        return fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter();
-      })
+        // setting up new property
+
+        const keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter();
+        sensor.isFilteredOut = !keepAfterFiltering;
+        return sensor;
+      });
     }
-  },
-})
+  }
+});
diff --git a/app_vue/src/utils/mapMarkerHelper.js b/app_vue/src/utils/mapMarkerHelper.js
index f5c7e7dd..da6907c5 100644
--- a/app_vue/src/utils/mapMarkerHelper.js
+++ b/app_vue/src/utils/mapMarkerHelper.js
@@ -1,20 +1,33 @@
-const getBinIconName = (sensor) => {
+const ICON_NAMES = {
+  FULL_BIN: 'full-bin',
+  HALF_FULL_BIN: 'half-full-bin',
+  EMPTY_BIN: 'empty-bin',
+  ERROR_BIN: 'error-bin'
+  // GREYSCALE_EMPTY_BIN: 'greyscale-empty-bin',
+  // GREYSCALE_HALF_FULL_BIN: 'greyscale-half-full-bin',
+  // GREYSCALE_FULL_BIN: 'greyscale-full-bin'
+};
+
+// const IS_FILTERED_OUT = 'isFilteredOut';
+
+export const getBinIconName = (sensor) => {
   const isErrorState = sensor.error;
+  // const isFilteredOut = sensor[IS_FILTERED_OUT];
   const isFullState = sensor.fill_level && sensor.fill_level >= 75;
   const isHalfFullState = sensor.fill_level && sensor.fill_level >= 50 && sensor.fill_level < 75;
   const isEmptyState = sensor.fill_level && sensor.fill_level < 50;
 
-  if (isErrorState) { // shows error icon
-    return 'error';
+  if (isErrorState) {
+    return ICON_NAMES.ERROR_BIN;
   } else if (isFullState) {
-    return 'full';
+    return ICON_NAMES.FULL_BIN;
   } else if (isHalfFullState) {
-    return 'half-full';
+    return ICON_NAMES.HALF_FULL_BIN;
   } else if (isEmptyState) {
-    return 'empty';
+    return ICON_NAMES.EMPTY_BIN;
   }
-  return 'empty'; // default
-}
+  return ICON_NAMES.EMPTY_BIN; // default
+};
 
 export const getMaterialTypeIconURL = (materialType) => {
   const directory = 'src/assets/images/materialTypeIcons';
@@ -23,57 +36,42 @@ export const getMaterialTypeIconURL = (materialType) => {
     return genericMaterialIconPath;
   }
   const materialMap = {
-    'Cardboard': `${directory}/cardboard.svg`,
-    'Plastic': `${directory}/plastic.svg`,
-    'Compost': `${directory}/compost.svg`,
-    'Garbage': `${directory}/garbage.svg`,
+    Cardboard: `${directory}/cardboard.svg`,
+    Plastic: `${directory}/plastic.svg`,
+    Compost: `${directory}/compost.svg`,
+    Garbage: `${directory}/garbage.svg`,
     'Mixed Recyclables': `${directory}/mixed_recyclables.svg`,
-    'Paper': `${directory}/paper.svg`,
+    Paper: `${directory}/paper.svg`,
     'Mixed Containers': `${directory}/mixed_containers.svg`,
     'Glass, Metal, Plastic': `${directory}/glass_metal_plastic.svg`,
     'Soft Plastic': `${directory}/soft_plastic.svg`,
-    'WTE': `${directory}/wte.svg`,
-    'Shredding': `${directory}/shredding.svg`,
+    WTE: `${directory}/wte.svg`,
+    Shredding: `${directory}/shredding.svg`,
     'Scrap Metal': `${directory}/scrap_metal.svg`,
-    'Wood': `${directory}/wood.svg`,
-    'Construction Waste': `${directory}/construction_waste.svg`,
+    Wood: `${directory}/wood.svg`,
+    'Construction Waste': `${directory}/construction_waste.svg`
   };
   return materialMap[materialType] || genericMaterialIconPath;
-}
+};
 
 // linearProgressColor -> used by Vuetify to determine progress bar color
-// iconURL -> used by Vuetify to display bin icon
-export const getIconAndProgressColor = (sensor) => {
-  // mini-helper function
-  const iconName = getBinIconName(sensor);
-  let iconUrl = ''
-  let linearProgressColor = '';
+export const getVuetifyLinearProgressColor = (iconName) => {
   const RED = '#C92828';
   const GREEN = 'green';
   const ORANGE = '#F07F2D';
-  const iconDirectory = 'src/assets/images/binMarkerIcons';
-  switch (iconName) {
-    case 'error':
-      iconUrl = `${iconDirectory}/alert-bin.png`;
-      linearProgressColor = RED;
-      break;
-    case 'full':
-      iconUrl = `${iconDirectory}/full-bin.png`;
-      linearProgressColor = RED;
-      break;
-    case 'half-full':
-      iconUrl = `${iconDirectory}/half-full-bin.png`;
-      linearProgressColor = ORANGE;
-      break;
-    case 'empty':
-      iconUrl = `${iconDirectory}/empty-bin.png`;
-      linearProgressColor = GREEN;
-      break;
-    default: // default is empty bin
-      iconUrl = `${iconDirectory}/empty-bin.png`;
-      linearProgressColor = GREEN;
+
+  let linearProgressColor = GREEN;
+
+  if (iconName === ICON_NAMES.ERROR_BIN || iconName === ICON_NAMES.FULL_BIN) {
+    linearProgressColor = RED;
+  } else if (iconName === ICON_NAMES.HALF_FULL_BIN) {
+    linearProgressColor = ORANGE;
   }
-  return { iconUrl, linearProgressColor };
-}
+  return linearProgressColor;
+};
 
-export default getIconAndProgressColor
+// iconURL -> used by Vuetify to display bin icon
+export const getIconUrl = (iconName) => {
+  const iconDirectory = 'src/assets/images/binMarkerIcons';
+  return `${iconDirectory}/${iconName}.png`;
+};
diff --git a/app_vue/src/utils/optimizeRouteHelper.js b/app_vue/src/utils/optimizeRouteHelper.js
index afddda1c..811f96a5 100644
--- a/app_vue/src/utils/optimizeRouteHelper.js
+++ b/app_vue/src/utils/optimizeRouteHelper.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const ENV_API_BASE_URL = process.env.VUE_APP_API_HOST || "http://localhost:8080";
+const ENV_API_BASE_URL = process.env.VUE_APP_API_HOST || 'http://localhost:8080';
 
 // reorders intermediate points in our selectedRouteList according to a list of given indexes (newRouteIndexOrder)
 export const getNewOptimizedRoute = (selectedRouteList, newRouteIndexOrder) => {
@@ -27,19 +27,18 @@ export const getNewOptimizedRoute = (selectedRouteList, newRouteIndexOrder) => {
 // google api call to optimize route
 // https://developers.google.com/maps/documentation/routes/opt-way
 export const getOptimizedRouteData = async (selectedRouteList, originAddress, destinationAddress, optimize = true) => {
-  
   if (selectedRouteList && selectedRouteList.length === 0) {
     return;
   }
 
-  const URL = ENV_API_BASE_URL + "/getOptimizedRoute";  // Updated URL
+  const URL = ENV_API_BASE_URL + '/getOptimizedRoute'; // Updated URL
   const data = {
-    selectedRouteList: selectedRouteList.map(waypoint => ({ lat: waypoint.lat, long: waypoint.long })),
+    selectedRouteList: selectedRouteList.map((waypoint) => ({ lat: waypoint.lat, long: waypoint.long })),
     originAddress: originAddress,
     destinationAddress: destinationAddress,
     to_optimize: optimize
   };
-  
+
   const config = {
     headers: {
       'Content-Type': 'application/json'
@@ -51,8 +50,8 @@ export const getOptimizedRouteData = async (selectedRouteList, originAddress, de
     if (response) {
       return response.data;
     }
-  } catch(e) {
-    console.log('error getting optimized route', e);
+  } catch (e) {
+    console.error('error getting optimized route', e);
   }
 };