diff --git a/app/javascript/widget/components/Availability/AvailabilityContainer.vue b/app/javascript/widget/components/Availability/AvailabilityContainer.vue
index 367564751..28abfa082 100644
--- a/app/javascript/widget/components/Availability/AvailabilityContainer.vue
+++ b/app/javascript/widget/components/Availability/AvailabilityContainer.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
@@ -30,13 +30,15 @@ const { t } = useI18n();
 const availableMessage = useMapGetter('appConfig/getAvailableMessage');
 const unavailableMessage = useMapGetter('appConfig/getUnavailableMessage');
 
+// Pass toRef(props, 'agents') instead of props.agents to maintain reactivity
+// when the parent component's agents prop updates (e.g., after API response)
 const {
   currentTime,
   hasOnlineAgents,
   isOnline,
   inboxConfig,
   isInWorkingHours,
-} = useAvailability(props.agents);
+} = useAvailability(toRef(props, 'agents'));
 
 const workingHours = computed(() => inboxConfig.value.workingHours || []);
 const workingHoursEnabled = computed(
diff --git a/app/javascript/widget/composables/useAvailability.js b/app/javascript/widget/composables/useAvailability.js
index 621584c01..cbe02a98a 100644
--- a/app/javascript/widget/composables/useAvailability.js
+++ b/app/javascript/widget/composables/useAvailability.js
@@ -1,4 +1,4 @@
-import { computed, toRef } from 'vue';
+import { computed, unref } from 'vue';
 import {
   isOnline as checkIsOnline,
   isInWorkingHours as checkInWorkingHours,
@@ -14,7 +14,11 @@ const DEFAULT_REPLY_TIME = 'in_a_few_minutes';
  * @returns {Object} Availability utilities and computed properties
  */
 export function useAvailability(agents = []) {
-  const availableAgents = toRef(agents);
+  // Now receives toRef(props, 'agents') from caller, which maintains reactivity.
+  // Use unref() inside computed to unwrap the ref value properly.
+  // This ensures availableAgents updates when the parent's agents prop changes
+  // (e.g., after API response updates the Vuex store).
+  const availableAgents = computed(() => unref(agents));
 
   const channelConfig = computed(() => window.chatwootWebChannel || {});