diff --git a/src/api/pbx-groups.js b/src/api/pbx-groups.js
index 6a26b4a4..4fea7eb6 100644
--- a/src/api/pbx-groups.js
+++ b/src/api/pbx-groups.js
@@ -10,7 +10,9 @@ import {
     setPbxHuntPolicy,
     setPbxHuntTimeout, setSubscriberNumbers,
     setPbxHuntCancelMode,
-    generateGeneralPassword
+    generateGeneralPassword,
+    setPreferenceAnnouncementCallSetup,
+    setPreferenceAnnouncementCfu
 } from './subscriber'
 import {
     getAllSoundSets,
@@ -20,6 +22,7 @@ import {
     PBX_CONFIG_ORDER_DIRECTION,
     setSubscriberSoundSet
 } from './pbx-config'
+
 import {
     assignNumbers,
     getNumbers
@@ -306,6 +309,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 63a67b9f..1be4329c 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
@@ -362,7 +384,9 @@ export default {
             'getGroupUpdateToastMessage',
             'getSoundSetByGroupId',
             'isGroupLoading',
-            'getHuntCancelModeOptions'
+            'getHuntCancelModeOptions',
+            'getAnnouncementCfu',
+            'getAnnouncementCallSetup'
         ]),
         ...mapGetters('callForwarding', [
             'groups'
@@ -454,7 +478,9 @@ export default {
             'setGroupHuntCancelMode',
             'setGroupSeats',
             'setGroupNumbers',
-            'setGroupSoundSet'
+            'setGroupSoundSet',
+            'setAnnouncementCallSetup',
+            'setAnnouncementCfu'
         ]),
         ...mapActions('pbxCallQueues', [
             'jumpToCallQueue'
@@ -478,7 +504,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
         },
@@ -584,6 +612,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 703aa199..79f8f614 100644
--- a/src/store/pbx-groups.js
+++ b/src/store/pbx-groups.js
@@ -8,6 +8,8 @@ import {
     createGroup,
     removeGroup,
     setGroupName,
+    setGroupAnnouncementCallSetup,
+    setGroupAnnouncementCfu,
     setGroupExtension,
     setGroupHuntPolicy,
     setGroupHuntTimeout,
@@ -162,6 +164,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: {
@@ -434,6 +448,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)
+            }
         }
     }
 }