diff --git a/src/api/pbx-groups.js b/src/api/pbx-groups.js
index 7aae7cf8..28304178 100644
--- a/src/api/pbx-groups.js
+++ b/src/api/pbx-groups.js
@@ -19,7 +19,10 @@ import {
     setPbxExtension, setPbxGroupMemberIds,
     setPbxHuntCancelMode,
     setPbxHuntPolicy,
-    setPbxHuntTimeout, setSubscriberNumbers
+    setPbxHuntTimeout,
+    setPreferenceAnnouncementCallSetup,
+    setPreferenceAnnouncementCfu,
+    setSubscriberNumbers
 } from 'src/api/subscriber'
 import {
     assignNumbers,
@@ -302,6 +305,22 @@ export function setGroupSoundSet (options) {
     })
 }
 
+/**
+ * @param groupId
+ * @param announcementCfu
+ */
+export function setGroupAnnouncementCfu (groupId, announcementCfu) {
+    return setPreferenceAnnouncementCfu(groupId, announcementCfu)
+}
+
+/**
+ * @param groupId
+ * @param announcementCallSetup
+ */
+export function setGroupAnnouncementCallSetup (groupId, announcementCallSetup) {
+    return setPreferenceAnnouncementCallSetup(groupId, announcementCallSetup)
+}
+
 // This mirrors the logic we use in ngcp-admin to handle the pbx groups creation
 // If you change the logic below make sure you make the same changes in ngcp-admin too
 function createUsername (name) {
diff --git a/src/pages/CscPagePbxGroupDetails.vue b/src/pages/CscPagePbxGroupDetails.vue
index 019c3f15..568db92c 100644
--- a/src/pages/CscPagePbxGroupDetails.vue
+++ b/src/pages/CscPagePbxGroupDetails.vue
@@ -237,6 +237,28 @@
                     @click="jumpToCallQueueInternal"
                 />
             </q-list>
+            <q-list
+                v-if="changes"
+                class="column"
+                side
+                top
+                no-wrap
+            >
+                <q-toggle
+                    v-model="changes.announcementCfu"
+                    class="q-pa-sm"
+                    :label="$t('Play announcement before routing to CFU/CFNA')"
+                    :disable="isLoading"
+                    @update:model-value="changeAnnouncementCfu"
+                />
+                <q-toggle
+                    v-model="changes.announcementCallSetup"
+                    class="q-pa-sm"
+                    :label="$t('Play announcement before call setup')"
+                    :disable="isLoading"
+                    @update:model-value="changeAnnouncementCallSetup"
+                />
+            </q-list>
         </q-item>
 
         <csc-call-forward-details
@@ -357,7 +379,9 @@ export default {
             'getGroupUpdateToastMessage',
             'getSoundSetByGroupId',
             'isGroupLoading',
-            'getHuntCancelModeOptions'
+            'getHuntCancelModeOptions',
+            'getAnnouncementCfu',
+            'getAnnouncementCallSetup'
         ]),
         ...mapGetters('callForwarding', [
             'groups'
@@ -448,7 +472,9 @@ export default {
             'setGroupHuntCancelMode',
             'setGroupSeats',
             'setGroupNumbers',
-            'setGroupSoundSet'
+            'setGroupSoundSet',
+            'setAnnouncementCallSetup',
+            'setAnnouncementCfu'
         ]),
         ...mapActions('pbxCallQueues', [
             'jumpToCallQueue'
@@ -472,7 +498,9 @@ export default {
                     huntCancelMode: this.groupSelected.pbx_hunt_cancel_mode,
                     aliasNumbers: this.getAliasNumberIds(),
                     seats: this.getSeatIds(),
-                    soundSet: this.getSoundSetId()
+                    soundSet: this.getSoundSetId(),
+                    announcementCallSetup: this.getAnnouncementCallSetup(this.groupSelected.id),
+                    announcementCfu: this.getAnnouncementCfu(this.groupSelected.id)
                 }
                 : null
         },
@@ -578,6 +606,18 @@ export default {
         },
         forceTabReload (tabName) {
             this.selectedTab = tabName
+        },
+        changeAnnouncementCfu () {
+            this.setAnnouncementCfu({
+                groupId: this.groupSelected.id,
+                announcementCfu: this.changes.announcementCfu
+            })
+        },
+        changeAnnouncementCallSetup () {
+            this.setAnnouncementCallSetup({
+                groupId: this.groupSelected.id,
+                announcementCallSetup: this.changes.announcementCallSetup
+            })
         }
     }
 }
diff --git a/src/store/pbx-groups.js b/src/store/pbx-groups.js
index 2f8b5c9a..0799ce5e 100644
--- a/src/store/pbx-groups.js
+++ b/src/store/pbx-groups.js
@@ -4,6 +4,8 @@ import {
     createGroup,
     getGroupList,
     removeGroup,
+    setGroupAnnouncementCallSetup,
+    setGroupAnnouncementCfu,
     setGroupExtension,
     setGroupHuntCancelMode,
     setGroupHuntPolicy,
@@ -157,6 +159,18 @@ export default {
                     value: 'bye'
                 }
             ]
+        },
+        getAnnouncementCfu (state) {
+            return (id) => {
+                const groupPreferences = state.preferenceMapById[id]
+                return groupPreferences && groupPreferences.play_announce_before_cf ? state.preferenceMapById[id].play_announce_before_cf : false
+            }
+        },
+        getAnnouncementCallSetup (state) {
+            return (id) => {
+                const groupPreferences = state.preferenceMapById[id]
+                return groupPreferences && groupPreferences.play_announce_before_call_setup ? state.preferenceMapById[id].play_announce_before_call_setup : false
+            }
         }
     },
     mutations: {
@@ -422,6 +436,30 @@ export default {
             }).catch((err) => {
                 context.commit('groupUpdateFailed', err.message)
             })
+        },
+        async setAnnouncementCfu (context, options) {
+            context.commit('groupUpdateRequesting', {
+                groupId: options.groupId,
+                groupField: options.message || i18n.global.t('the playback announcement as early media before Call Forward Unconditional or Unavailable')
+            })
+            try {
+                const result = await setGroupAnnouncementCfu(options.groupId, options.announcementCfu)
+                context.commit('groupUpdateSucceeded', result)
+            } catch (err) {
+                context.commit('groupUpdateFailed', err.message)
+            }
+        },
+        async setAnnouncementCallSetup (context, options) {
+            context.commit('groupUpdateRequesting', {
+                groupId: options.groupId,
+                groupField: options.message || i18n.global.t('the playback announcement as early media before send the call to callee')
+            })
+            try {
+                const result = await setGroupAnnouncementCallSetup(options.groupId, options.announcementCallSetup)
+                context.commit('groupUpdateSucceeded', result)
+            } catch (err) {
+                context.commit('groupUpdateFailed', err.message)
+            }
         }
     }
 }