diff --git a/forge/db/models/Team.js b/forge/db/models/Team.js
index 9b5014e09e..f140650553 100644
--- a/forge/db/models/Team.js
+++ b/forge/db/models/Team.js
@@ -367,6 +367,44 @@ module.exports = {
                         count,
                         teams: rows
                     }
+                },
+                /**
+                 * The ids of every team matching a search and filter, with no
+                 * pagination. For callers that need the whole matching set
+                 * rather than a page of it, such as selecting every team an
+                 * announcement should go to.
+                 *
+                 * Shares its where-clause construction with getAll so the ids
+                 * cannot drift from the list the admin is looking at.
+                 *
+                 * @param {Object} pagination search options; `query` only, any cursor is ignored
+                 * @param {Object} where additional filters, as built for getAll
+                 * @param {number} idLimit hard cap on how many ids are returned
+                 * @returns {{ids: string[], count: number, truncated: boolean}}
+                 */
+                getAllIds: async (pagination = {}, where = {}, idLimit = 10000) => {
+                    where = buildPaginationSearchClause({ query: pagination.query }, where, ['Team.name'])
+                    if (pagination.query) {
+                        const queryId = M.Team.decodeHashid(pagination.query)
+                        if (queryId && queryId.length === 1) {
+                            // The query term is a valid hashid - go look it up
+                            where = { id: queryId }
+                        }
+                    }
+                    const include = []
+                    if (app.billing) {
+                        // The billing filter references $Subscription.status$
+                        include.push({ model: app.db.models.Subscription, attributes: [] })
+                    }
+                    const [rows, count] = await Promise.all([
+                        this.findAll({ where, include, attributes: ['id'], order: [['id', 'ASC']], limit: idLimit + 1 }),
+                        this.count({ where, include })
+                    ])
+                    return {
+                        ids: rows.slice(0, idLimit).map(row => row.hashid),
+                        count,
+                        truncated: rows.length > idLimit
+                    }
                 }
             },
             instance: {
diff --git a/forge/db/models/User.js b/forge/db/models/User.js
index 86f29680e5..905a3b8329 100644
--- a/forge/db/models/User.js
+++ b/forge/db/models/User.js
@@ -314,6 +314,7 @@ module.exports = {
                  * @param {Boolean} options.count only return a count of results
                  * @param {Boolean} options.summary whether to return a limited user object that only contains id: default false
                  * @param {Array} options.teamTypes limit to teams of certain types
+                 * @param {Array} options.teams limit to an explicit list of team ids
                  * @param {Array} options.billing array of billing states to include
                  * @returns Array of users who have at least one of the specific roles, or a count
                  */
@@ -349,15 +350,19 @@ module.exports = {
                             }
                         }
                     }
+                    if (options.teams) {
+                        // Target an explicit set of teams, by raw id
+                        query.include.include.where.id = { [Op.in]: options.teams }
+                    }
                     if (options.teamTypes) {
                         query.include.include.where.TeamTypeId = { [Op.in]: options.teamTypes }
-                        if (options.billing) {
-                            query.include.include.include = {
-                                model: app.db.models.Subscription,
-                                attributes: ['status'],
-                                where: {
-                                    status: { [Op.in]: options.billing.map(opt => opt.toLowerCase()) }
-                                }
+                    }
+                    if (options.billing) {
+                        query.include.include.include = {
+                            model: app.db.models.Subscription,
+                            attributes: ['status'],
+                            where: {
+                                status: { [Op.in]: options.billing.map(opt => opt.toLowerCase()) }
                             }
                         }
                     }
diff --git a/forge/lib/announcements.js b/forge/lib/announcements.js
new file mode 100644
index 0000000000..fd50d0c02a
--- /dev/null
+++ b/forge/lib/announcements.js
@@ -0,0 +1,124 @@
+/**
+ * Helpers for platform announcements.
+ *
+ * Announcement bodies are authored by platform admins and rendered in the
+ * notifications drawer. Anything that ends up inside an iframe src is
+ * normalised here, server side, so the front-end never builds an embed URL
+ * out of free text.
+ */
+
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/
+
+/**
+ * Turn a user-supplied video link into a structured, safe reference.
+ *
+ * Only YouTube is supported. The video id is extracted and validated, so the
+ * front-end can build the embed URL from a known-good id rather than from the
+ * string an admin typed.
+ *
+ * @param {string} value a YouTube watch, share or embed URL, or a bare video id
+ * @returns {{provider: string, id: string}|null} null when nothing usable was found
+ */
+function parseVideoReference (value) {
+    if (typeof value !== 'string') {
+        return null
+    }
+    const trimmed = value.trim()
+    if (!trimmed) {
+        return null
+    }
+    if (YOUTUBE_ID.test(trimmed)) {
+        return { provider: 'youtube', id: trimmed }
+    }
+    let url
+    try {
+        url = new URL(trimmed)
+    } catch (_err) {
+        return null
+    }
+    if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+        return null
+    }
+    const host = url.hostname.replace(/^www\./, '')
+    let candidate = null
+    if (host === 'youtu.be') {
+        candidate = url.pathname.slice(1)
+    } else if (host === 'youtube.com' || host === 'm.youtube.com' || host === 'youtube-nocookie.com') {
+        if (url.pathname === '/watch') {
+            candidate = url.searchParams.get('v')
+        } else if (url.pathname.startsWith('/embed/')) {
+            candidate = url.pathname.slice('/embed/'.length)
+        } else if (url.pathname.startsWith('/shorts/')) {
+            candidate = url.pathname.slice('/shorts/'.length)
+        } else if (url.pathname.startsWith('/live/')) {
+            candidate = url.pathname.slice('/live/'.length)
+        }
+    }
+    if (candidate && YOUTUBE_ID.test(candidate)) {
+        return { provider: 'youtube', id: candidate }
+    }
+    return null
+}
+
+// A path rooted at the platform itself. Excludes '//host' and '/\\host', which
+// browsers resolve to another origin despite starting with a slash.
+const IN_APP_PATH = /^\/(?![/\\])/
+// The URL parser strips these before parsing, so '/<tab>/host' reaches the
+// browser as '//host'. Nothing legitimate needs them, so refuse them outright
+// rather than trying to normalise.
+const STRIPPED_BY_URL_PARSER = /[\t\n\r]/
+
+/**
+ * Validate a link an admin wants a recipient to follow.
+ *
+ * Accepts an absolute http(s) URL, or a path within the platform. Anything
+ * else, notably `javascript:` and `data:`, and anything that looks like a path
+ * but resolves to another origin, is rejected.
+ *
+ * @param {string} value
+ * @returns {string|null} the link, or null when it is not safe to render
+ */
+function parseLinkUrl (value) {
+    if (typeof value !== 'string') {
+        return null
+    }
+    const target = value.trim()
+    if (!target || STRIPPED_BY_URL_PARSER.test(target)) {
+        return null
+    }
+    let url = null
+    try {
+        // No base: an absolute url parses, anything relative throws
+        url = new URL(target)
+    } catch (_err) {
+        url = null
+    }
+    if (url) {
+        return (url.protocol === 'https:' || url.protocol === 'http:') ? target : null
+    }
+    return IN_APP_PATH.test(target) ? target : null
+}
+
+/**
+ * Validate an admin-supplied call-to-action.
+ *
+ * @param {{label: string, url: string}} value
+ * @returns {{label: string, url: string}|null} null when incomplete, or the url is not safe to render
+ */
+function parseCallToAction (value) {
+    if (!value || typeof value !== 'object') {
+        return null
+    }
+    const label = typeof value.label === 'string' ? value.label.trim() : ''
+    const target = parseLinkUrl(typeof value.url === 'string' ? value.url : '')
+    if (!label || !target) {
+        return null
+    }
+    return { label, url: target }
+}
+
+module.exports = {
+    parseVideoReference,
+    parseCallToAction,
+    parseLinkUrl
+}
diff --git a/forge/lib/teamFilters.js b/forge/lib/teamFilters.js
new file mode 100644
index 0000000000..8dce048628
--- /dev/null
+++ b/forge/lib/teamFilters.js
@@ -0,0 +1,44 @@
+const { Op } = require('sequelize')
+
+/**
+ * Build the sequelize where clause for an admin team listing from the request
+ * query, so every route that lists or counts teams applies the same filters.
+ *
+ * Recognised query properties:
+ *  - teamType: comma separated team type hashids
+ *  - state: 'suspended' for only suspended teams, 'active' to exclude them
+ *  - billing: comma separated subscription statuses (ignored when filtering on
+ *    suspended teams, and only when billing is available)
+ *
+ * @param {Object} app the forge app
+ * @param {Object} query the request query
+ * @returns {Object} a sequelize where clause
+ */
+function buildTeamFilterWhere (app, query = {}) {
+    const where = {}
+    const filters = []
+    if (query.teamType) {
+        const teamTypes = query.teamType.split(',').map(app.db.models.TeamType.decodeHashid).flat()
+        filters.push({ TeamTypeId: { [Op.in]: teamTypes } })
+    }
+    if (query.state === 'suspended') {
+        filters.push({ suspended: true })
+    } else {
+        const excludeSuspended = query.state === 'active' || !!(app.billing && query.billing)
+        if (excludeSuspended) {
+            filters.push({ suspended: false })
+        }
+        if (app.billing && query.billing) {
+            const billingStates = query.billing.split(',')
+            filters.push({ '$Subscription.status$': { [Op.in]: billingStates } })
+        }
+    }
+    if (filters.length > 0) {
+        where[Op.and] = filters
+    }
+    return where
+}
+
+module.exports = {
+    buildTeamFilterWhere
+}
diff --git a/forge/routes/api/admin.js b/forge/routes/api/admin.js
index b12b0b2486..fcb75484f0 100644
--- a/forge/routes/api/admin.js
+++ b/forge/routes/api/admin.js
@@ -1,6 +1,13 @@
 const { Op } = require('sequelize')
 
+const { parseCallToAction, parseLinkUrl, parseVideoReference } = require('../../lib/announcements.js')
 const { Roles } = require('../../lib/roles.js')
+const { buildTeamFilterWhere } = require('../../lib/teamFilters.js')
+
+// The most teams a single announcement can be addressed to explicitly. Also
+// caps the id list returned for a select-all, so a large platform cannot turn
+// one click into an unbounded response.
+const MAX_AUDIENCE_TEAMS = 10000
 
 module.exports = async function (app) {
     async function getStats () {
@@ -444,6 +451,47 @@ module.exports = async function (app) {
         reply.send({ status: 'okay' })
     })
 
+    /**
+     * The ids of every team matching a search and filter.
+     *
+     * The team list is paginated, so an admin building an audience out of
+     * hundreds of teams cannot get the whole matching set from it. This returns
+     * ids only, for the same filters, in one request.
+     */
+    app.get('/teams/ids', {
+        preHandler: app.needsPermission('team:list'),
+        schema: {
+            summary: 'Get the ids of all teams matching a filter - admin-only',
+            tags: ['Platform', 'Teams'],
+            query: {
+                type: 'object',
+                properties: {
+                    query: { type: 'string' },
+                    teamType: { type: 'string' },
+                    state: { type: 'string' },
+                    billing: { type: 'string' }
+                }
+            },
+            response: {
+                200: {
+                    type: 'object',
+                    properties: {
+                        count: { type: 'number' },
+                        truncated: { type: 'boolean' },
+                        ids: { type: 'array', items: { type: 'string' } }
+                    }
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    }, async (request, reply) => {
+        const where = buildTeamFilterWhere(app, request.query)
+        const result = await app.db.models.Team.getAllIds({ query: request.query.query }, where, MAX_AUDIENCE_TEAMS)
+        reply.send(result)
+    })
+
     app.post('/announcements', {
         preHandler: app.needsPermission('user:announcements:manage'),
         schema: {
@@ -453,17 +501,29 @@ module.exports = async function (app) {
                 type: 'object',
                 required: ['message', 'title', 'filter'],
                 properties: {
-                    message: { type: 'string' },
-                    title: { type: 'string' },
+                    message: { type: 'string', maxLength: 4000 },
+                    title: { type: 'string', maxLength: 120 },
                     filter: {
                         type: 'object',
                         properties: {
-                            roles: { type: 'array', items: { type: 'number' } }
+                            roles: { type: 'array', items: { type: 'number' } },
+                            teamTypes: { type: 'array', items: { type: 'string' } },
+                            teams: { type: 'array', items: { type: 'string' }, maxItems: MAX_AUDIENCE_TEAMS },
+                            billing: { type: 'array', items: { type: 'string' } }
                         }
                     },
                     mock: { type: 'boolean' },
                     to: { type: 'object' },
-                    url: { type: 'string' }
+                    url: { type: 'string', maxLength: 500 },
+                    format: { type: 'string', enum: ['plain', 'markdown'] },
+                    video: { type: 'string', maxLength: 300 },
+                    cta: {
+                        type: 'object',
+                        properties: {
+                            label: { type: 'string', maxLength: 40 },
+                            url: { type: 'string', maxLength: 500 }
+                        }
+                    }
                 }
             },
             response: {
@@ -486,7 +546,10 @@ module.exports = async function (app) {
             filter,
             mock,
             to,
-            url
+            url,
+            format,
+            video,
+            cta
         } = request.body
 
         const recipientRoles = filter?.roles
@@ -497,14 +560,40 @@ module.exports = async function (app) {
         if (filter?.teamTypes && filter.teamTypes.length > 0) {
             teamTypes = filter.teamTypes.map(app.db.models.TeamType.decodeHashid).flat()
         }
+        let teams
+        if (filter?.teams && filter.teams.length > 0) {
+            const decoded = filter.teams.map(hashid => app.db.models.Team.decodeHashid(hashid)).flat()
+            // decodeHashid is lenient - anything that is not a real id is rejected
+            // here rather than quietly narrowing the audience to nothing.
+            if (decoded.length !== filter.teams.length || decoded.some(id => !Number.isInteger(id) || id <= 0)) {
+                return reply.code(400).send({ code: 'bad_request', error: 'Invalid team provided.' })
+            }
+            teams = decoded
+        }
         let billing
         if (filter?.billing && filter.billing.length > 0) {
             billing = filter.billing
         }
+        if (video && !parseVideoReference(video)) {
+            return reply.code(400).send({ code: 'bad_request', error: 'Unsupported video link. Provide a YouTube URL.' })
+        }
+        if (cta && Object.keys(cta).length > 0 && !parseCallToAction(cta)) {
+            return reply.code(400).send({ code: 'bad_request', error: 'A button needs both a label and an http(s) or in-app url.' })
+        }
+        // The whole-card link on a plain announcement ends up in an href too, so
+        // it gets the same treatment as the button
+        if (url && !parseLinkUrl(url)) {
+            return reply.code(400).send({ code: 'bad_request', error: 'The URL link must be an http(s) or in-app url.' })
+        }
+        // `to` is the same sink by another name: the front-end prefers it over
+        // `url` and opens `to.url` directly
+        if (to && typeof to.url === 'string' && !parseLinkUrl(to.url)) {
+            return reply.code(400).send({ code: 'bad_request', error: 'The notification link must be an http(s) or in-app url.' })
+        }
         if (mock) {
             // If mock is sent, return an indication of how many users would receive this notification
             // without actually sending them.
-            const count = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, billing, summary: true, count: true })
+            const count = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, teams, billing, summary: true, count: true })
             reply.send({
                 mock: true,
                 recipientCount: count
@@ -512,12 +601,22 @@ module.exports = async function (app) {
             return
         }
 
-        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, billing, summary: true })
+        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, teams, billing, summary: true })
         const notificationType = 'announcement'
         const titleSlug = title.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase()
         const uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2)
         const reference = `${uniqueId}:${titleSlug}`
-        const data = { title, message, ...(to && { to }), ...(url && { url }) }
+        const videoReference = parseVideoReference(video)
+        const callToAction = parseCallToAction(cta)
+        const data = {
+            title,
+            message,
+            ...(format === 'markdown' && { format }),
+            ...(videoReference && { video: videoReference }),
+            ...(callToAction && { cta: callToAction }),
+            ...(to && { to }),
+            ...(url && { url: parseLinkUrl(url) })
+        }
         await app.notifications.sendBulk(
             recipients,
             notificationType,
diff --git a/forge/routes/api/team.js b/forge/routes/api/team.js
index d3b08d55dd..604fa3d251 100644
--- a/forge/routes/api/team.js
+++ b/forge/routes/api/team.js
@@ -1,8 +1,7 @@
 const crypto = require('crypto')
 
-const { Op } = require('sequelize')
-
 const { Roles } = require('../../lib/roles')
+const { buildTeamFilterWhere } = require('../../lib/teamFilters')
 
 const teamShared = require('./shared/team.js')
 const TeamDevices = require('./teamDevices.js')
@@ -203,22 +202,7 @@ module.exports = async function (app) {
         }
     }, async (request, reply) => {
         // Admin request for all teams
-        const where = {}
-        const filters = []
-        if (request.query.teamType) {
-            const teamTypes = request.query.teamType.split(',').map(app.db.models.TeamType.decodeHashid).flat()
-            filters.push({ TeamTypeId: { [Op.in]: teamTypes } })
-        }
-        if (request.query.state === 'suspended') {
-            filters.push({ suspended: true })
-        } else if (app.billing && request.query.billing) {
-            filters.push({ suspended: false })
-            const billingStates = request.query.billing.split(',')
-            filters.push({ '$Subscription.status$': { [Op.in]: billingStates } })
-        }
-        if (filters.length > 0) {
-            where[Op.and] = filters
-        }
+        const where = buildTeamFilterWhere(app, request.query)
         const paginationOptions = app.getPaginationOptions(request)
         const teams = await app.db.models.Team.getAll(paginationOptions, where)
         teams.teams = teams.teams.map(t => app.db.views.Team.team(t))
diff --git a/frontend/src/api/admin.js b/frontend/src/api/admin.js
index 35cc208d3d..c61e00cdcb 100644
--- a/frontend/src/api/admin.js
+++ b/frontend/src/api/admin.js
@@ -77,8 +77,27 @@ const getAnnouncementNotifications = async () => {
         })
 }
 
-const sendAnnouncementNotification = async ({ title, message, filter, mock, to, url }) => {
-    return client.post('/api/v1/admin/announcements', { message, title, filter, mock, to, url })
+/**
+ * The ids of every team matching a search and filter, for building an
+ * announcement audience out of more teams than a page of the list holds.
+ */
+const getTeamIdsForFilter = async (query, filter = {}) => {
+    const params = new URLSearchParams()
+    if (query) {
+        params.set('query', query)
+    }
+    Object.entries(filter).forEach(([key, value]) => {
+        if (Array.isArray(value) ? value.length : value) {
+            params.set(key, Array.isArray(value) ? value.join(',') : value)
+        }
+    })
+    const suffix = params.toString()
+    return client.get('/api/v1/admin/teams/ids' + (suffix ? '?' + suffix : ''))
+        .then(res => res.data)
+}
+
+const sendAnnouncementNotification = async ({ title, message, filter, mock, to, url, format, video, cta }) => {
+    return client.post('/api/v1/admin/announcements', { message, title, filter, mock, to, url, format, video, cta })
         .then(res => {
             return res.data
         })
@@ -99,5 +118,6 @@ export default {
     generateExpertAgentCreds,
     deleteExpertAgentCreds,
     getAnnouncementNotifications,
+    getTeamIdsForFilter,
     sendAnnouncementNotification
 }
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index f82180b80a..477e33eea3 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -80,6 +80,7 @@ import { markRaw } from 'vue'
 import userAPI from '../../../api/user.js'
 
 import alerts from '../../../services/alerts.js'
+import AnnouncementNotification from '../../notifications/Announcement.vue'
 import GenericNotification from '../../notifications/Generic.vue'
 
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
@@ -131,6 +132,13 @@ export default {
             this.closeRightDrawer()
         },
         getNotificationsComponent (notification) {
+            if (notification.type === 'announcement') {
+                // Rich announcements own their click targets (links, video,
+                // button). A plain one stays a single card-wide link.
+                return this.isRichAnnouncement(notification)
+                    ? markRaw(AnnouncementNotification)
+                    : markRaw(GenericNotification)
+            }
             let comp = this.componentCache[notification.type]
             if (comp) {
                 return comp
@@ -151,6 +159,10 @@ export default {
             this.componentCache[notification.type] = comp
             return comp
         },
+        isRichAnnouncement (notification) {
+            const data = notification.data || {}
+            return data.format === 'markdown' || !!data.video || !!data.cta
+        },
         onSelected (notification) {
             this.selections.push(notification)
         },
diff --git a/frontend/src/components/notifications/Announcement.vue b/frontend/src/components/notifications/Announcement.vue
new file mode 100644
index 0000000000..8ee12b722a
--- /dev/null
+++ b/frontend/src/components/notifications/Announcement.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="message-wrapper ff-announcement" :class="messageClass" data-el="announcement-notification">
+        <div class="action">
+            <ff-checkbox v-model="isSelected" data-action="select-notification" @click="toggleSelection" />
+        </div>
+        <div class="body">
+            <div class="header">
+                <div class="icon ff-icon ff-icon-lg">
+                    <MegaphoneIcon />
+                </div>
+                <h4 class="title">{{ notification.data.title }}</h4>
+            </div>
+            <div class="text">
+                <AnnouncementBody :data="notification.data" @engaged="markAsRead" />
+            </div>
+            <div class="footer">
+                <span v-ff-tooltip:left="createdAt">{{ notification.createdSince }}</span>
+                <span
+                    v-if="!notification.read"
+                    class="forge-badge"
+                    data-action="mark-announcement-read"
+                    @click="markAsRead"
+                >
+                    mark as read
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { MegaphoneIcon } from '@heroicons/vue/24/outline'
+
+import userApi from '../../api/user.js'
+
+import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
+
+import AnnouncementBody from './announcements/AnnouncementBody.vue'
+
+/**
+ * A platform announcement.
+ *
+ * Unlike the generic notification, the card itself is not a link: an
+ * announcement can carry markdown links, an embedded video and its own button,
+ * so a card-wide click target would swallow those interactions.
+ */
+export default {
+    name: 'AnnouncementNotification',
+    components: { AnnouncementBody, MegaphoneIcon },
+    mixins: [NotificationMessageMixin],
+    computed: {
+        createdAt () {
+            return new Date(this.notification.createdAt).toLocaleString()
+        },
+        messageClass () {
+            return {
+                unread: !this.notification.read,
+                selected: this.isSelected
+            }
+        }
+    },
+    methods: {
+        markAsRead () {
+            if (!this.notification.read) {
+                this.notification.read = true
+                userApi.markNotificationRead(this.notification.id)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+// The selector matches the depth of the drawer rule it overrides
+// (.ff-notifications-drawer .messages-wrapper .message-wrapper).
+.ff-notifications-drawer .messages-wrapper .message-wrapper.ff-announcement {
+    // The card is not a single click target: the body owns its own links,
+    // video and button, so the card must not look or behave like a link.
+    cursor: default;
+
+    &:hover .title {
+        color: inherit;
+    }
+
+    .footer {
+        align-items: center;
+        gap: $ff-unit-sm;
+
+        .forge-badge {
+            background-color: var(--ff-color-bg-surface-raised);
+            border-radius: 5px;
+            padding: 0 $ff-unit-sm;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--ff-color-border-strong);
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/components/notifications/announcements/AnnouncementBody.vue b/frontend/src/components/notifications/announcements/AnnouncementBody.vue
new file mode 100644
index 0000000000..30b38b7460
--- /dev/null
+++ b/frontend/src/components/notifications/announcements/AnnouncementBody.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="ff-announcement-body" :class="{ compact }" data-el="announcement-body">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="isMarkdown" class="ff-announcement-body--rich" data-el="announcement-rich" v-html="renderedMessage" />
+        <p v-else class="ff-announcement-body--plain" data-el="announcement-plain">{{ data.message }}</p>
+
+        <div v-if="videoEmbedUrl" class="ff-announcement-body--video" data-el="announcement-video">
+            <iframe
+                :src="videoEmbedUrl"
+                :title="data.title"
+                loading="lazy"
+                referrerpolicy="strict-origin-when-cross-origin"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+                allowfullscreen
+            />
+        </div>
+
+        <div v-if="fallbackLink" class="ff-announcement-body--actions" data-el="announcement-fallback-link">
+            <!--
+                A plain announcement carries its link on the whole card in the
+                drawer. In the toast there is no card-wide target, so the link
+                is surfaced here instead.
+            -->
+            <a
+                class="ff-announcement-body--link"
+                :href="fallbackLink"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-action="announcement-fallback-link"
+                @click="$emit('engaged')"
+            >
+                Learn more
+            </a>
+        </div>
+
+        <div v-if="callToAction" class="ff-announcement-body--actions" data-el="announcement-cta">
+            <!--
+                An in-app destination routes, so the app is not torn down and
+                rebooted. An external one is a plain anchor: ff-button's anchor
+                variant is a router-link, which would resolve an absolute url
+                against the current route.
+            -->
+            <router-link
+                v-if="ctaIsInApp"
+                class="ff-btn ff-btn--primary ff-btn-small transition-fade--color"
+                :to="callToAction.url"
+                data-action="announcement-cta"
+                @click="$emit('engaged')"
+            >
+                {{ callToAction.label }}
+            </router-link>
+            <a
+                v-else
+                class="ff-btn ff-btn--primary ff-btn-small transition-fade--color"
+                :href="callToAction.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-action="announcement-cta"
+                @click="$emit('engaged')"
+            >
+                {{ callToAction.label }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Marked } from 'marked'
+
+import { sanitize } from '../../../composables/strings/String.js'
+
+// Mirrors forge/lib/announcements.js parseLinkUrl. Tab, newline and carriage
+// return are refused because the URL parser strips them, which turns
+// '/<tab>/host' into an off-platform '//host'.
+const IN_APP_PATH = /^\/(?![/\\])/
+const STRIPPED_BY_URL_PARSER = /[\t\n\r]/
+
+function isRenderableLink (value) {
+    const target = (value || '').trim()
+    if (!target || STRIPPED_BY_URL_PARSER.test(target)) {
+        return false
+    }
+    let url = null
+    try {
+        url = new URL(target)
+    } catch (_err) {
+        url = null
+    }
+    if (url) {
+        return url.protocol === 'https:' || url.protocol === 'http:'
+    }
+    return IN_APP_PATH.test(target)
+}
+
+export default {
+    name: 'AnnouncementBody',
+    props: {
+        /**
+         * The `data` payload of an announcement notification:
+         * { title, message, format?, video?: { provider, id }, cta?: { label, url } }
+         */
+        data: {
+            type: Object,
+            required: true
+        },
+        /** Tighter spacing, used inside the toast */
+        compact: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['engaged'],
+    setup () {
+        // A plain renderer rather than the shared markdown helper: that one is
+        // built for the Expert chat and emits code-block and table furniture
+        // whose styling and copy-button handler only exist in that component,
+        // so it would render as broken chrome here.
+        return { markedInstance: new Marked({ breaks: true, gfm: true }) }
+    },
+    computed: {
+        isMarkdown () {
+            return this.data?.format === 'markdown'
+        },
+        renderedMessage () {
+            // The body is authored by a platform admin, but it still goes through
+            // the same sanitiser as any other rendered markdown in the app.
+            return sanitize(this.markedInstance.parse(this.data?.message ?? ''), { targetBlank: true })
+        },
+        videoEmbedUrl () {
+            // The provider and id are validated server side, so the embed url is
+            // built from known-good parts rather than from admin input.
+            const video = this.data?.video
+            if (video?.provider !== 'youtube' || !video?.id) {
+                return null
+            }
+            return `https://www.youtube-nocookie.com/embed/${video.id}?rel=0`
+        },
+        callToAction () {
+            // Stored announcements are validated server side, but the admin
+            // preview renders whatever has been typed so far, so the same check
+            // runs here rather than trusting the payload.
+            const cta = this.data?.cta
+            if (!cta?.label || typeof cta.url !== 'string') {
+                return null
+            }
+            return isRenderableLink(cta.url) ? cta : null
+        },
+        ctaIsInApp () {
+            return !!this.callToAction?.url.startsWith('/')
+        },
+        fallbackLink () {
+            // Only when there is no button of its own to click.
+            if (this.callToAction || !this.compact) {
+                return null
+            }
+            const url = this.data?.url
+            return typeof url === 'string' && isRenderableLink(url) ? url : null
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.ff-announcement-body {
+    display: flex;
+    flex-direction: column;
+    gap: $ff-unit-md;
+
+    &.compact {
+        gap: $ff-unit-sm;
+    }
+
+    .ff-announcement-body--plain {
+        margin: 0;
+    }
+
+    .ff-announcement-body--rich {
+        display: flex;
+        flex-direction: column;
+        gap: $ff-unit-sm;
+
+        p, ul, ol {
+            margin: 0;
+        }
+
+        ul, ol {
+            padding-left: $ff-unit-lg;
+        }
+
+        ul {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+
+        h1, h2, h3, h4 {
+            font-weight: 600;
+            color: var(--ff-color-text);
+        }
+
+        a {
+            color: var(--ff-color-link);
+            text-decoration: underline;
+        }
+
+        code {
+            background-color: var(--ff-color-bg-surface-raised);
+            padding: 0 $ff-unit-xs;
+            border-radius: 3px;
+        }
+
+        blockquote {
+            border-left: 3px solid var(--ff-color-border-strong);
+            padding-left: $ff-unit-md;
+            color: var(--ff-color-text-subtle);
+        }
+    }
+
+    .ff-announcement-body--video {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background-color: var(--ff-color-bg-surface-raised);
+        border: 1px solid var(--ff-color-border);
+
+        iframe {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
+    .ff-announcement-body--actions {
+        display: flex;
+        gap: $ff-unit-sm;
+    }
+
+    .ff-announcement-body--link {
+        color: var(--ff-color-link);
+        text-decoration: underline;
+    }
+}
+</style>
diff --git a/frontend/src/components/notifications/announcements/AnnouncementToasts.vue b/frontend/src/components/notifications/announcements/AnnouncementToasts.vue
new file mode 100644
index 0000000000..599a3c67f4
--- /dev/null
+++ b/frontend/src/components/notifications/announcements/AnnouncementToasts.vue
@@ -0,0 +1,300 @@
+<template>
+    <TransitionGroup
+        class="ff-announcement-toasts"
+        name="announcement-toast-list"
+        tag="div"
+        data-el="announcement-toasts"
+        :style="{ right: rightOffset + 'px' }"
+    >
+        <template v-if="hasRoomBesideDrawer">
+            <div v-for="announcement in visibleAnnouncements" :key="announcement.id" class="ff-announcement-toast" data-el="announcement-toast">
+                <ff-notification-toast type="info" :countdown="null" @close="dismiss(announcement)">
+                    <template #message>
+                        <div class="ff-announcement-toast--content">
+                            <div class="ff-announcement-toast--header">
+                                <MegaphoneIcon class="ff-icon" />
+                                <h4>{{ announcement.data.title }}</h4>
+                            </div>
+                            <AnnouncementBody :data="announcement.data" compact @engaged="markAsRead(announcement)" />
+                            <button class="ff-announcement-toast--secondary" data-action="open-notifications" @click="openNotifications">
+                                View in notifications
+                            </button>
+                        </div>
+                    </template>
+                </ff-notification-toast>
+            </div>
+        </template>
+    </TransitionGroup>
+</template>
+
+<script>
+import { MegaphoneIcon } from '@heroicons/vue/24/outline'
+import { mapActions, mapState } from 'pinia'
+import { markRaw } from 'vue'
+
+import userApi from '../../../api/user.js'
+
+import NotificationsDrawer from '../../drawers/notifications/NotificationsDrawer.vue'
+
+import AnnouncementBody from './AnnouncementBody.vue'
+
+import { useAccountStore } from '@/stores/account.js'
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
+const DISMISSED_KEY = 'ff-announcement-toasts-dismissed'
+const MAX_VISIBLE = 2
+// Gap between the toast stack and whatever is to the right of it
+const EDGE_GAP = 18
+const TOAST_WIDTH = 380
+// The drawer animates its width over 300ms, so sample a little past that
+const DRAWER_TRANSITION_MS = 400
+
+/**
+ * Surfaces unread announcements bottom-right so they do not depend on the user
+ * opening the notifications drawer.
+ *
+ * Opening the drawer clears them: the same announcements are listed there, so
+ * leaving the toasts up would duplicate the message on screen. Dismissing a
+ * toast does not mark the announcement read - it stays unread in the drawer -
+ * but it is remembered for the rest of the browser tab session so a reload does
+ * not bring it back.
+ */
+export default {
+    name: 'AnnouncementToasts',
+    components: { AnnouncementBody, MegaphoneIcon },
+    data () {
+        return {
+            dismissedIds: this.readDismissed(),
+            drawerWidth: 0,
+            viewportWidth: window.innerWidth
+        }
+    },
+    computed: {
+        ...mapState(useAccountStore, ['notifications']),
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
+        notificationsDrawerOpen () {
+            return this.rightDrawer.state && this.rightDrawer.component?.name === 'NotificationsDrawer'
+        },
+        maxRightOffset () {
+            return Math.max(0, this.viewportWidth - TOAST_WIDTH - EDGE_GAP * 2)
+        },
+        rightOffset () {
+            // Sit to the left of an open right drawer rather than under it
+            return EDGE_GAP + Math.min(this.drawerWidth, this.maxRightOffset)
+        },
+        hasRoomBesideDrawer () {
+            // A wide drawer, or a narrow viewport, leaves nowhere for the stack
+            // to go. It stays below the dialog layer by design, so pushing it
+            // under the drawer instead would hide it with no way to reach it.
+            // Hold the announcements back until the drawer is out of the way;
+            // they are still unread and still in the drawer's own list.
+            return this.drawerWidth <= this.maxRightOffset
+        },
+        unreadAnnouncements () {
+            return (this.notifications || [])
+                .filter(notification => notification.type === 'announcement')
+                .filter(notification => !notification.read)
+                .filter(notification => !this.dismissedIds.includes(notification.id))
+        },
+        visibleAnnouncements () {
+            return this.unreadAnnouncements.slice(0, MAX_VISIBLE)
+        }
+    },
+    watch: {
+        notificationsDrawerOpen (open) {
+            if (open) {
+                // Every unread one, not just the two on screen, or the next two
+                // slide in over the drawer that is already listing them
+                this.unreadAnnouncements.forEach(announcement => this.dismiss(announcement))
+            }
+        },
+        'rightDrawer.state' () {
+            this.trackDrawerTransition()
+        },
+        'rightDrawer.wider' () {
+            this.trackDrawerTransition()
+        },
+        'rightDrawer.fixed' () {
+            this.trackDrawerTransition()
+        }
+    },
+    mounted () {
+        this.measureDrawer()
+        window.addEventListener('resize', this.measureDrawer)
+        const drawer = document.getElementById('right-drawer')
+        if (drawer && window.ResizeObserver) {
+            // Follows a drag-resize of the drawer, and the width animation
+            this.drawerObserver = new ResizeObserver(() => this.measureDrawer())
+            this.drawerObserver.observe(drawer)
+        }
+    },
+    beforeUnmount () {
+        window.removeEventListener('resize', this.measureDrawer)
+        this.drawerObserver?.disconnect()
+        if (this.transitionFrame) {
+            cancelAnimationFrame(this.transitionFrame)
+        }
+    },
+    methods: {
+        ...mapActions(useUxDrawersStore, ['openRightDrawer']),
+        measureDrawer () {
+            // window.innerWidth is not reactive, so it is tracked here alongside
+            // the drawer rather than read straight from a computed
+            this.viewportWidth = window.innerWidth
+            const drawer = document.getElementById('right-drawer')
+            if (!drawer) {
+                this.drawerWidth = 0
+                return
+            }
+            const rect = drawer.getBoundingClientRect()
+            // A closed drawer is parked off the right edge, which gives 0 here
+            this.drawerWidth = Math.max(0, Math.round(window.innerWidth - rect.left))
+        },
+        trackDrawerTransition () {
+            // The drawer slides rather than jumps, so sample until it settles
+            const until = performance.now() + DRAWER_TRANSITION_MS
+            const sample = () => {
+                this.measureDrawer()
+                if (performance.now() < until) {
+                    this.transitionFrame = requestAnimationFrame(sample)
+                }
+            }
+            if (this.transitionFrame) {
+                cancelAnimationFrame(this.transitionFrame)
+            }
+            this.transitionFrame = requestAnimationFrame(sample)
+        },
+        readDismissed () {
+            try {
+                return JSON.parse(window.sessionStorage.getItem(DISMISSED_KEY)) || []
+            } catch (_err) {
+                return []
+            }
+        },
+        dismiss (announcement) {
+            if (this.dismissedIds.includes(announcement.id)) {
+                return
+            }
+            this.dismissedIds = [...this.dismissedIds, announcement.id]
+            try {
+                window.sessionStorage.setItem(DISMISSED_KEY, JSON.stringify(this.dismissedIds))
+            } catch (_err) {
+                // A browser with storage disabled just gets per-page-load toasts
+            }
+        },
+        markAsRead (announcement) {
+            if (!announcement.read) {
+                announcement.read = true
+                userApi.markNotificationRead(announcement.id)
+            }
+        },
+        openNotifications () {
+            this.openRightDrawer({ component: markRaw(NotificationsDrawer) })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.ff-announcement-toasts {
+    position: fixed;
+    bottom: $ff-unit-lg;
+    // Below the dialog layer: a modal and its backdrop must cover the toast,
+    // not compete with it. The stack clears the right drawer by sitting beside
+    // it rather than above it.
+    z-index: 100;
+    width: 380px;
+    max-width: calc(100vw - #{$ff-unit-lg * 2});
+    // Two announcements carrying video are taller than a laptop viewport, so the
+    // stack scrolls itself rather than running off the top of the screen.
+    max-height: calc(100vh - 60px - #{$ff-unit-lg * 2});
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: $ff-unit-md;
+
+    .ff-notification-toast {
+        margin-bottom: 0;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+        // The coloured type bar is the alert affordance. An announcement is not
+        // an alert, so drop it. Without the bar the component's asymmetric
+        // padding has nothing to reserve space for, so even it out into a card.
+        padding: $ff-unit-lg;
+        border-radius: $ff-unit-sm;
+
+        .ff-notification-toast--bar {
+            display: none;
+        }
+
+        .ff-notification-toast--message {
+            // The component reserves a grid column for the close button, which
+            // would narrow the body all the way down. The close control only
+            // needs the header line, so let the content have the full width and
+            // lift the control out of the flow.
+            grid-template-columns: 1fr;
+            gap: 0;
+
+            > div {
+                flex: 1;
+                min-width: 0;
+            }
+        }
+
+        .ff-notification-toast--close {
+            // Match the drawer's close control: a 20px glyph in a 30px hit area,
+            // its glyph aligned with the title rather than the card edge.
+            position: absolute;
+            top: calc(#{$ff-unit-lg} - 5px);
+            right: calc(#{$ff-unit-lg} - 5px);
+            max-height: 30px;
+
+            svg {
+                width: 30px;
+                height: 30px;
+                padding: 5px;
+            }
+        }
+
+        .ff-announcement-toast--header {
+            // Keep the title clear of the close button that now overlays it
+            padding-right: 30px;
+        }
+    }
+
+    .ff-announcement-toast--content {
+        display: flex;
+        flex-direction: column;
+        gap: $ff-unit-sm;
+        width: 100%;
+    }
+
+    .ff-announcement-toast--header {
+        display: flex;
+        align-items: center;
+        gap: $ff-unit-sm;
+
+        h4 {
+            font-weight: 600;
+            margin: 0;
+        }
+    }
+
+    .ff-announcement-toast--secondary {
+        align-self: flex-start;
+        color: var(--ff-color-link);
+        text-decoration: underline;
+        font-size: 90%;
+    }
+}
+
+.announcement-toast-list-enter-active,
+.announcement-toast-list-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.announcement-toast-list-enter-from,
+.announcement-toast-list-leave-to {
+    opacity: 0;
+    transform: translateY(12px);
+}
+</style>
diff --git a/frontend/src/layouts/Platform.vue b/frontend/src/layouts/Platform.vue
index bbb76c0f05..19b76abd9b 100644
--- a/frontend/src/layouts/Platform.vue
+++ b/frontend/src/layouts/Platform.vue
@@ -14,6 +14,8 @@
 
             <PlatformAlerts />
 
+            <AnnouncementToasts />
+
             <interview-popup v-if="interview?.enabled" :flag="interview.flag" :payload="interview.payload" />
 
             <PlatformDialog />
@@ -33,6 +35,7 @@ import PlatformAlerts from '../components/PlatformAlerts.vue'
 import PlatformDialog from '../components/dialogs/PlatformDialog.vue'
 import LeftDrawer from '../components/drawers/LeftDrawer.vue'
 import RightDrawer from '../components/drawers/RightDrawer.vue'
+import AnnouncementToasts from '../components/notifications/announcements/AnnouncementToasts.vue'
 
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxStore } from '@/stores/ux.js'
@@ -40,6 +43,7 @@ import { useUxStore } from '@/stores/ux.js'
 export default {
     name: 'ff-layout-platform',
     components: {
+        AnnouncementToasts,
         LeftDrawer,
         RightDrawer,
         PageHeader,
diff --git a/frontend/src/pages/admin/NotificationsHub.vue b/frontend/src/pages/admin/NotificationsHub.vue
index 370a90fb6b..86c619f2fb 100644
--- a/frontend/src/pages/admin/NotificationsHub.vue
+++ b/frontend/src/pages/admin/NotificationsHub.vue
@@ -4,71 +4,139 @@
             <ff-page-header title="Notifications Hub" />
         </template>
         <form class="flex flex-col gap-5" data-el="notification-form" @submit.prevent>
-            <section class="flex gap-10">
-                <section>
+            <section class="flex gap-10 flex-wrap items-start">
+                <section class="announcement-content">
                     <FormRow v-model="form.title" type="input" placeholder="Title" class="mb-5" data-el="notification-title">
                         Announcement Title
                         <template #description>Enter a concise title for your announcement.</template>
                     </FormRow>
                     <FormRow v-model="form.message" class="mb-5" data-el="notification-message">
                         Announcement Text
-                        <template #description>Provide the details of your announcement.</template>
-                        <template #input><textarea v-model="form.message" class="w-full max-h-80 min-h-40" rows="4" /></template>
+                        <template #description>
+                            Provide the details of your announcement.
+                            <label class="ff-checkbox text-sm mt-2" data-el="notification-rich-text-toggle" @keydown.space.prevent="form.richText = !form.richText">
+                                <span ref="input" class="checkbox" :checked="form.richText" tabindex="0" @keydown.space.prevent />
+                                <input v-model="form.richText" type="checkbox" @keydown.space.prevent>
+                                Rich text (markdown)
+                            </label>
+                        </template>
+                        <template #input><textarea v-model="form.message" class="w-full max-h-96 min-h-40" rows="8" :maxlength="4000" /></template>
+                    </FormRow>
+                    <FormRow v-model="form.video" type="input" placeholder="https://www.youtube.com/watch?v=..." class="mb-5" data-el="notification-video">
+                        Video
+                        <template #description>Optional. A YouTube link to embed in the announcement.</template>
                     </FormRow>
+                    <div class="flex gap-4 mb-5">
+                        <FormRow v-model="form.ctaLabel" type="input" placeholder="Talk to sales" data-el="notification-cta-label">
+                            Button Label
+                            <template #description>Optional.</template>
+                        </FormRow>
+                        <FormRow v-model="form.ctaUrl" type="input" placeholder="https://flowfuse.com/contact/" data-el="notification-cta-url">
+                            Button URL
+                            <template #description>Where the button goes.</template>
+                        </FormRow>
+                    </div>
                     <FormRow v-model="form.url" type="input" :placeholder="urlPlaceholder" class="mb-5" data-el="notification-external-url">
                         URL Link
-                        <template #description>Provide an url where users will be redirected when they click on the notification.</template>
+                        <template #description>
+                            Optional. Makes the whole notification clickable. Only applies to plain text announcements,
+                            because a rich text announcement carries its own links, video and button.
+                        </template>
                     </FormRow>
                 </section>
-                <section>
-                    <FormHeading>Audience</FormHeading>
-                    <div class="ff-description mb-2 space-y-1">Select the audience of your announcement.</div>
-                    <FormHeading class="mt-4">User Roles:</FormHeading>
-                    <div class="grid gap-1 grid-cols-2 items-middle">
-                        <label
-                            v-for="(role, $key) in roleIds"
-                            :key="$key"
-                            class="ff-checkbox text-sm"
-                            :data-el="`audience-role-${role}`"
-                            @keydown.space.prevent="toggleRole(role)"
-                        >
-                            <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent />
-                            <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent>
-                            {{ role }}
-                        </label>
-                    </div>
-                    <FormHeading class="mt-4">Team Types:</FormHeading>
-                    <div class="grid gap-1 grid-cols-2 items-middle">
-                        <label
-                            v-for="teamType in teamTypes"
-                            :key="teamType.id"
-                            class="ff-checkbox text-sm"
-                            :class="!teamType.active ? ['inactive-team'] : []"
-                            :data-el="`audience-teamType-${teamType.id}`"
-                            @keydown.space.prevent="toggleTeamType(teamType.id)"
-                        >
-                            <span ref="input" class="checkbox" :checked="form.teamTypes.includes(teamType.id)" tabindex="0" @keydown.space.prevent />
-                            <input v-model="form.teamTypes" type="checkbox" :value="teamType.id" @keydown.space.prevent>
-                            {{ teamType.name }}
-                        </label>
+                <section class="announcement-preview">
+                    <FormHeading>Preview</FormHeading>
+                    <div class="ff-description mb-2">How this will look in the notifications drawer and toast.</div>
+                    <div class="preview-frame" data-el="notification-preview">
+                        <div class="preview-card">
+                            <div class="preview-card--header">
+                                <MegaphoneIcon class="ff-icon" />
+                                <h4>{{ form.title || 'Announcement title' }}</h4>
+                            </div>
+                            <AnnouncementBody :data="previewData" />
+                        </div>
                     </div>
-                    <template v-if="features.billing">
-                        <FormHeading class="mt-4">Billing State:</FormHeading>
-                        <div class="grid gap-1 grid-cols-2 items-middle">
+                </section>
+            </section>
+            <section class="announcement-audience">
+                <FormHeading>Audience</FormHeading>
+                <div class="ff-description mb-2">Select the audience of your announcement.</div>
+                <div class="audience-groups">
+                    <div class="audience-group">
+                        <FormHeading>User Roles:</FormHeading>
+                        <div class="audience-options">
                             <label
-                                v-for="(billingState, $key) in billingStates"
+                                v-for="(role, $key) in roleIds"
                                 :key="$key"
                                 class="ff-checkbox text-sm"
-                                :data-el="`audience-billing-${billingState}`"
-                                @keydown.space.prevent="toggleBillingState(billingState)"
+                                :data-el="`audience-role-${role}`"
+                                @keydown.space.prevent="toggleRole(role)"
                             >
-                                <span ref="input" class="checkbox" :checked="form.billing.includes(billingState)" tabindex="0" @keydown.space.prevent />
-                                <input v-model="form.billing" type="checkbox" :value="billingState" @keydown.space.prevent>
-                                {{ billingState }}
+                                <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent />
+                                <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent>
+                                {{ role }}
                             </label>
                         </div>
+                    </div>
+                    <div class="audience-group">
+                        <FormHeading>Send To:</FormHeading>
+                        <ff-radio-group
+                            v-model="form.audienceMode"
+                            orientation="vertical"
+                            :options="audienceModes"
+                            data-el="audience-mode"
+                        />
+                    </div>
+                    <template v-if="targetsTeamTypes">
+                        <div class="audience-group">
+                            <FormHeading>Team Types:</FormHeading>
+                            <div class="audience-options">
+                                <label
+                                    v-for="teamType in teamTypes"
+                                    :key="teamType.id"
+                                    class="ff-checkbox text-sm"
+                                    :class="!teamType.active ? ['inactive-team'] : []"
+                                    :data-el="`audience-teamType-${teamType.id}`"
+                                    @keydown.space.prevent="toggleTeamType(teamType.id)"
+                                >
+                                    <span ref="input" class="checkbox" :checked="form.teamTypes.includes(teamType.id)" tabindex="0" @keydown.space.prevent />
+                                    <input v-model="form.teamTypes" type="checkbox" :value="teamType.id" @keydown.space.prevent>
+                                    {{ teamType.name }}
+                                </label>
+                            </div>
+                        </div>
+                        <div v-if="features.billing" class="audience-group">
+                            <FormHeading>Billing State:</FormHeading>
+                            <div class="audience-options">
+                                <label
+                                    v-for="(billingState, $key) in billingStates"
+                                    :key="$key"
+                                    class="ff-checkbox text-sm"
+                                    :data-el="`audience-billing-${billingState}`"
+                                    @keydown.space.prevent="toggleBillingState(billingState)"
+                                >
+                                    <span ref="input" class="checkbox" :checked="form.billing.includes(billingState)" tabindex="0" @keydown.space.prevent />
+                                    <input v-model="form.billing" type="checkbox" :value="billingState" @keydown.space.prevent>
+                                    {{ billingState }}
+                                </label>
+                            </div>
+                        </div>
                     </template>
-                </section>
+                    <div v-else class="audience-group" data-el="audience-teams-hint">
+                        <FormHeading>Selected:</FormHeading>
+                        <div class="ff-description">
+                            {{ form.teams.length }} {{ form.teams.length === 1 ? 'team' : 'teams' }} chosen in the table below.
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section v-if="targetsSpecificTeams" class="announcement-teams">
+                <FormHeading>Specific Teams</FormHeading>
+                <div class="ff-description mb-2">
+                    Pick the exact teams this announcement goes to. The selection is kept as you search, filter and
+                    page through the list. Suspended teams are left out, because they cannot receive notifications.
+                </div>
+                <TeamAudiencePicker v-model="form.teams" />
             </section>
             <section class="actions">
                 <ff-button :disabled="!canSubmit" data-action="submit" @click.stop.prevent="submitForm">
@@ -80,6 +148,7 @@
 </template>
 
 <script>
+import { MegaphoneIcon } from '@heroicons/vue/24/outline'
 import { mapState } from 'pinia'
 
 import adminApi from '../../api/admin.js'
@@ -87,28 +156,52 @@ import teamTypesApi from '../../api/teamTypes.js'
 
 import FormHeading from '../../components/FormHeading.vue'
 import FormRow from '../../components/FormRow.vue'
+import AnnouncementBody from '../../components/notifications/announcements/AnnouncementBody.vue'
 import { pluralize } from '../../composables/strings/String.js'
 import alerts from '../../services/alerts.js'
 import Dialog from '../../services/dialog.js'
 import FfButton from '../../ui-components/components/Button.vue'
 import { RoleNames, Roles } from '../../utils/roles.js'
 
+import TeamAudiencePicker from './components/TeamAudiencePicker.vue'
+
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 
+// Kept in step with the maxLength values on POST /api/v1/admin/announcements
+const MAX_LENGTHS = {
+    title: 120,
+    message: 4000,
+    video: 300,
+    ctaLabel: 40,
+    ctaUrl: 500,
+    url: 500
+}
+// Kept in step with forge/lib/announcements.js
+const YOUTUBE_HOSTS = ['youtu.be', 'youtube.com', 'm.youtube.com', 'youtube-nocookie.com']
+
 export default {
     name: 'NotificationsHub',
-    components: { FfButton, FormRow, FormHeading },
+    components: { AnnouncementBody, FfButton, FormRow, FormHeading, MegaphoneIcon, TeamAudiencePicker },
     data () {
         return {
             form: {
                 title: '',
                 message: '',
                 url: '',
+                video: '',
+                ctaLabel: '',
+                ctaUrl: '',
+                richText: true,
                 roles: [],
+                audienceMode: 'teamTypes',
                 teamTypes: [],
-                billing: [],
-                externalUrl: true
+                teams: [],
+                billing: []
             },
+            audienceModes: [
+                { label: 'Teams of a type', value: 'teamTypes', description: 'Everyone in every team on the types you pick.' },
+                { label: 'Specific teams', value: 'teams', description: 'Only the teams you choose from the list.' }
+            ],
             teamTypes: [],
             billingStates: [
                 'Active',
@@ -126,15 +219,88 @@ export default {
         roleIds () {
             return Object.values(RoleNames).filter(r => r !== 'none').reverse().map(r => r[0].toUpperCase() + r.substring(1))
         },
+        targetsSpecificTeams () {
+            return this.form.audienceMode === 'teams'
+        },
+        targetsTeamTypes () {
+            return this.form.audienceMode === 'teamTypes'
+        },
+        hasAudienceScope () {
+            if (this.targetsSpecificTeams) {
+                return this.form.teams.length > 0
+            }
+            return this.form.teamTypes.length > 0 &&
+                (!this.features.billing || this.form.billing.length > 0)
+        },
+        withinLengthLimits () {
+            // The API rejects an over-long field with a bare "Bad Request", so
+            // the limits are enforced before the request is made
+            return Object.entries(MAX_LENGTHS)
+                .every(([field, limit]) => (this.form[field] || '').length <= limit)
+        },
         canSubmit () {
             return this.form.title.length > 0 &&
                 this.form.message.length > 0 &&
                 this.form.roles.length > 0 &&
-                this.form.teamTypes.length > 0 &&
-                (!this.features.billing || this.form.billing.length > 0)
+                this.withinLengthLimits &&
+                this.hasAudienceScope
         },
         urlPlaceholder () {
-            return this.form.externalUrl ? 'https://flowfuse.com' : '{ name: "<component-name>", params: {id: "<id>"} }'
+            return 'https://flowfuse.com'
+        },
+        previewData () {
+            return {
+                title: this.form.title,
+                message: this.form.message || '_Your announcement text will appear here._',
+                ...(this.form.richText && { format: 'markdown' }),
+                ...(this.previewVideo && { video: this.previewVideo }),
+                ...(this.form.ctaLabel && this.form.ctaUrl && { cta: { label: this.form.ctaLabel, url: this.form.ctaUrl } })
+            }
+        },
+        previewVideo () {
+            // Mirrors the server side check, host included, so the preview only
+            // shows an embed for a link the API will actually accept.
+            const value = (this.form.video || '').trim()
+            if (/^[A-Za-z0-9_-]{11}$/.test(value)) {
+                return { provider: 'youtube', id: value }
+            }
+            let url
+            try {
+                url = new URL(value)
+            } catch (_err) {
+                return null
+            }
+            if (url.protocol !== 'https:' && url.protocol !== 'http:') {
+                return null
+            }
+            const host = url.hostname.replace(/^www\./, '')
+            if (!YOUTUBE_HOSTS.includes(host)) {
+                return null
+            }
+            let candidate = null
+            if (host === 'youtu.be') {
+                candidate = url.pathname.slice(1)
+            } else if (url.pathname === '/watch') {
+                candidate = url.searchParams.get('v')
+            } else {
+                const prefix = ['/embed/', '/shorts/', '/live/'].find(p => url.pathname.startsWith(p))
+                candidate = prefix ? url.pathname.slice(prefix.length) : null
+            }
+            return candidate && /^[A-Za-z0-9_-]{11}$/.test(candidate)
+                ? { provider: 'youtube', id: candidate }
+                : null
+        }
+    },
+    watch: {
+        'form.audienceMode' (mode) {
+            // Only one audience definition is ever live, so leaving the other
+            // half populated would be invisible state
+            if (mode === 'teams') {
+                this.form.teamTypes = []
+                this.form.billing = []
+            } else {
+                this.form.teams = []
+            }
         }
     },
     async created () {
@@ -158,10 +324,6 @@ export default {
         })
     },
     methods: {
-        getAnnouncements () {
-            return adminApi.getAnnouncementNotifications()
-                .then(res => console.info(res))
-        },
         submitForm () {
             return this.sendAnnouncementNotification({ mock: true })
                 .then(mockRes => {
@@ -184,41 +346,59 @@ export default {
                 })
         },
         sendAnnouncementNotification ({ mock = true }) {
-            const form = { ...this.form }
-            delete form.url
-
             const payload = {
                 mock,
-                title: form.title,
-                message: form.message,
-                url: form.url,
+                title: this.form.title,
+                message: this.form.message,
+                format: this.form.richText ? 'markdown' : 'plain',
                 filter: {
-                    roles: this.form.roles.map(r => Roles[r]),
-                    teamTypes: [...this.form.teamTypes]
-                },
-                ...(this.form.externalUrl ? { url: this.form.url } : { to: JSON.parse(this.form.url) })
+                    roles: this.form.roles.map(r => Roles[r])
+                }
             }
-            if (this.features.billing) {
-                payload.filter.billing = [...this.form.billing]
+            if (this.targetsSpecificTeams) {
+                payload.filter.teams = this.form.teams.map(team => team.id)
+            } else {
+                payload.filter.teamTypes = [...this.form.teamTypes]
+                if (this.features.billing) {
+                    payload.filter.billing = [...this.form.billing]
+                }
+            }
+            if (this.form.video) {
+                payload.video = this.form.video
+            }
+            if (this.form.ctaLabel && this.form.ctaUrl) {
+                payload.cta = { label: this.form.ctaLabel, url: this.form.ctaUrl }
+            }
+            if (this.form.url && !this.form.richText) {
+                payload.url = this.form.url
             }
             return adminApi.sendAnnouncementNotification(payload)
                 .then(res => {
                     if (!mock) {
                         alerts.emit(`Announcement sent to ${res.recipientCount} ${pluralize('user', res.recipientCount)}.`, 'confirmation')
-                        this.form.title = ''
-                        this.form.message = ''
-                        this.form.url = ''
-                        this.form.roles = []
-                        this.form.teamTypes = []
-                        this.form.billing = []
+                        this.resetForm()
                     }
                     return res
                 })
                 .catch(err => {
-                    alerts.emit('Something went wrong', 'warning')
+                    alerts.emit(err.response?.data?.error || 'Something went wrong', 'warning')
                     console.warn(err)
+                    return { recipientCount: 0 }
                 })
         },
+        resetForm () {
+            this.form.title = ''
+            this.form.message = ''
+            this.form.url = ''
+            this.form.video = ''
+            this.form.ctaLabel = ''
+            this.form.ctaUrl = ''
+            this.form.roles = []
+            this.form.audienceMode = 'teamTypes'
+            this.form.teamTypes = []
+            this.form.teams = []
+            this.form.billing = []
+        },
         toggleRole (role) {
             if (this.form.roles.includes(role)) {
                 this.form.roles = this.form.roles.filter(r => r !== role)
@@ -243,4 +423,61 @@ export default {
 .inactive-team {
     color: var(--ff-color-text-subtle);
 }
+
+.announcement-content {
+    width: 420px;
+    max-width: 100%;
+}
+
+.announcement-audience {
+    width: 100%;
+
+    .audience-groups {
+        display: flex;
+        gap: $ff-unit-xl;
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+
+    .audience-group {
+        min-width: 160px;
+    }
+
+    .audience-options {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(90px, max-content));
+        gap: 2px $ff-unit-lg;
+        margin-top: $ff-unit-sm;
+    }
+}
+
+.announcement-preview {
+    width: 400px;
+    max-width: 100%;
+}
+
+.preview-frame {
+    border: 1px solid var(--ff-color-border-strong);
+    background-color: var(--ff-color-bg-surface-raised);
+    padding: $ff-unit-md;
+
+    .preview-card {
+        background-color: var(--ff-color-bg-app);
+        border-left: 3px solid var(--ff-color-link);
+        padding: $ff-unit-md 12px;
+        display: flex;
+        flex-direction: column;
+        gap: $ff-unit-md;
+
+        .preview-card--header {
+            display: flex;
+            align-items: center;
+            gap: $ff-unit-sm;
+
+            h4 {
+                font-weight: 600;
+            }
+        }
+    }
+}
 </style>
diff --git a/frontend/src/pages/admin/components/TeamAudiencePicker.vue b/frontend/src/pages/admin/components/TeamAudiencePicker.vue
new file mode 100644
index 0000000000..852a542056
--- /dev/null
+++ b/frontend/src/pages/admin/components/TeamAudiencePicker.vue
@@ -0,0 +1,392 @@
+<template>
+    <div class="team-audience-picker" data-el="team-audience-picker">
+        <div class="picker-filters">
+            <div class="filter-group">
+                <FormHeading>Team Type:</FormHeading>
+                <div class="filter-options" data-el="picker-filter-team-types">
+                    <FormRow
+                        v-for="teamType in teamTypes"
+                        :key="teamType.id"
+                        v-model="filters.teamType[teamType.id]"
+                        type="checkbox"
+                    >
+                        {{ teamType.name }}
+                    </FormRow>
+                </div>
+            </div>
+            <template v-if="features.billing">
+                <div class="filter-group">
+                    <FormHeading>Billing State:</FormHeading>
+                    <div class="filter-options" data-el="picker-filter-billing">
+                        <FormRow v-model="filters.billing.active" type="checkbox">Active</FormRow>
+                        <FormRow v-model="filters.billing.trial" type="checkbox">Trial</FormRow>
+                        <FormRow v-model="filters.billing.canceled" type="checkbox">Canceled</FormRow>
+                        <FormRow v-model="filters.billing.unmanaged" type="checkbox">Unmanaged</FormRow>
+                    </div>
+                </div>
+            </template>
+        </div>
+
+        <div class="picker-summary" data-el="picker-summary">
+            <span class="summary-count" data-el="picker-selected-count">
+                {{ selectedCount }} {{ selectedCount === 1 ? 'team' : 'teams' }} selected
+                <span class="summary-matching">
+                    {{ matchingCount }} {{ matchingCount === 1 ? 'team matches' : 'teams match' }} the current filter
+                </span>
+            </span>
+            <div class="summary-actions">
+                <ff-button
+                    kind="secondary"
+                    size="small"
+                    :disabled="busy || matchingCount === 0"
+                    data-action="select-all-matching"
+                    @click="selectAllMatching"
+                >
+                    Select all {{ matchingCount }} matching
+                </ff-button>
+                <ff-button
+                    kind="tertiary"
+                    size="small"
+                    :disabled="teams.length === 0"
+                    data-action="select-loaded"
+                    @click="selectLoaded"
+                >
+                    Select visible {{ teams.length }}
+                </ff-button>
+                <ff-button
+                    kind="tertiary"
+                    size="small"
+                    :disabled="selectedCount === 0"
+                    data-action="clear-selection"
+                    @click="clearSelection"
+                >
+                    Clear selection
+                </ff-button>
+            </div>
+        </div>
+
+        <div v-if="truncated" class="picker-warning" data-el="picker-truncated">
+            More teams match than can be addressed in one announcement. Only the first {{ selectedCount }} were selected.
+            Narrow the filter and send in batches.
+        </div>
+
+        <ff-data-table
+            v-model:search="search"
+            :columns="columns"
+            :rows="teams"
+            :checked="checkedMap"
+            :show-row-checkboxes="true"
+            check-key-prop="id"
+            :show-search="true"
+            :server-side-search="true"
+            search-placeholder="Search teams by name..."
+            :show-load-more="!!nextCursor"
+            :loading="loading"
+            loading-message="Loading teams"
+            no-data-message="No teams found"
+            data-el="picker-teams-table"
+            @update:checked="onCheckedUpdate"
+            @load-more="loadItems(false)"
+        />
+
+        <div v-if="showChips" class="selected-teams" data-el="picker-selected-teams">
+            <span
+                v-for="team in selectedList"
+                :key="team.id"
+                class="selected-team"
+                :data-el="`picker-selected-${team.id}`"
+            >
+                {{ team.name || team.id }}
+                <XMarkIcon class="ff-icon" :data-action="`remove-team-${team.id}`" @click="deselect(team.id)" />
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { mapState } from 'pinia'
+
+import adminApi from '../../../api/admin.js'
+import teamTypesApi from '../../../api/teamTypes.js'
+import teamsApi from '../../../api/teams.js'
+
+import FormHeading from '../../../components/FormHeading.vue'
+import FormRow from '../../../components/FormRow.vue'
+import alerts from '../../../services/alerts.js'
+
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
+
+const PAGE_SIZE = 50
+// Above this many selections a chip list stops being reviewable, so the count
+// and the table checkboxes become the way to see and prune the selection.
+const MAX_CHIPS = 25
+
+/**
+ * Picks an explicit set of teams out of a paginated, filterable list.
+ *
+ * The selection lives here rather than in the table, because it has to survive
+ * paging, searching and filtering: an audience of a few hundred teams is built
+ * up across several different filters.
+ */
+export default {
+    name: 'TeamAudiencePicker',
+    components: { FormHeading, FormRow, XMarkIcon },
+    props: {
+        /** Selected teams, as `[{ id, name }]` */
+        modelValue: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: ['update:modelValue'],
+    data () {
+        return {
+            columns: [
+                { label: 'Name', key: 'name' },
+                { label: 'Type', key: 'teamTypeName' },
+                { label: 'Members', class: ['w-32', 'text-center'], key: 'memberCount' },
+                { label: 'Instances', class: ['w-32', 'text-center'], key: 'instanceCount' }
+            ],
+            teams: [],
+            teamTypes: [],
+            search: '',
+            filters: {
+                teamType: {},
+                billing: {}
+            },
+            matchingCount: 0,
+            truncated: false,
+            loading: false,
+            busy: false,
+            nextCursor: null,
+            pendingSearch: null
+        }
+    },
+    computed: {
+        ...mapState(useAccountSettingsStore, ['features']),
+        selectedList () {
+            return this.modelValue
+        },
+        selectedCount () {
+            return this.modelValue.length
+        },
+        checkedMap () {
+            return this.modelValue.reduce((map, team) => {
+                map[team.id] = true
+                return map
+            }, {})
+        },
+        showChips () {
+            return this.selectedCount > 0 && this.selectedCount <= MAX_CHIPS
+        },
+        queryFilter () {
+            // Suspended teams are excluded outright: they are filtered out when
+            // the announcement is addressed, so offering them here would let an
+            // admin build a selection that can never receive anything.
+            const filter = { state: 'active' }
+            const teamTypes = Object.entries(this.filters.teamType)
+                .filter(([, enabled]) => enabled)
+                .map(([teamType]) => teamType)
+            if (teamTypes.length) {
+                filter.teamType = teamTypes
+            }
+            if (this.features.billing) {
+                const billing = Object.entries(this.filters.billing)
+                    .filter(([, enabled]) => enabled)
+                    .map(([state]) => state)
+                if (billing.length) {
+                    filter.billing = billing
+                }
+            }
+            return filter
+        }
+    },
+    watch: {
+        search () {
+            if (this.pendingSearch) {
+                clearTimeout(this.pendingSearch)
+            }
+            this.loading = true
+            this.pendingSearch = setTimeout(() => this.loadItems(true), 300)
+        },
+        filters: {
+            handler () {
+                this.loading = true
+                this.loadItems(true)
+            },
+            deep: true
+        }
+    },
+    async created () {
+        const teamTypes = (await teamTypesApi.getTeamTypes(null, null, 'all')).types
+        this.teamTypes = teamTypes
+            .map(tt => ({ id: tt.id, name: tt.name, active: tt.active, order: tt.order }))
+            .sort((a, b) => (a.active === b.active ? a.order - b.order : (a.active ? -1 : 1)))
+        await this.loadItems(true)
+    },
+    methods: {
+        async loadItems (reload) {
+            if (reload) {
+                this.nextCursor = null
+            }
+            this.loading = true
+            try {
+                const result = await teamsApi.getTeams(this.nextCursor, PAGE_SIZE, this.search, this.queryFilter)
+                const rows = (result.teams || []).map(team => ({
+                    id: team.id,
+                    name: team.name,
+                    teamTypeName: team.type?.name,
+                    memberCount: team.memberCount,
+                    instanceCount: team.instanceCount
+                }))
+                this.teams = reload ? rows : this.teams.concat(rows)
+                this.matchingCount = result.count ?? this.teams.length
+                this.nextCursor = result.meta?.next_cursor ?? null
+            } catch (err) {
+                alerts.emit('Unable to load teams.', 'warning')
+                console.warn(err)
+            } finally {
+                this.loading = false
+            }
+        },
+        onCheckedUpdate (map) {
+            // The table only knows about the rows on screen, so a row it does
+            // not have cannot be the reason an id disappeared from the map.
+            const loadedIds = new Set(this.teams.map(team => team.id))
+            const kept = this.modelValue.filter(team => map[team.id] || !loadedIds.has(team.id))
+            const knownIds = new Set(kept.map(team => team.id))
+            const added = this.teams
+                .filter(team => map[team.id] && !knownIds.has(team.id))
+                .map(team => ({ id: team.id, name: team.name }))
+            if (added.length === 0 && kept.length === this.modelValue.length) {
+                return
+            }
+            this.emitSelection(kept.concat(added))
+        },
+        selectLoaded () {
+            const knownIds = new Set(this.modelValue.map(team => team.id))
+            const added = this.teams
+                .filter(team => !knownIds.has(team.id))
+                .map(team => ({ id: team.id, name: team.name }))
+            if (added.length) {
+                this.emitSelection(this.modelValue.concat(added))
+            }
+        },
+        async selectAllMatching () {
+            this.busy = true
+            try {
+                const result = await adminApi.getTeamIdsForFilter(this.search, this.queryFilter)
+                const namesById = new Map(this.teams.map(team => [team.id, team.name]))
+                this.modelValue.forEach(team => {
+                    if (team.name) {
+                        namesById.set(team.id, team.name)
+                    }
+                })
+                this.truncated = !!result.truncated
+                this.emitSelection(result.ids.map(id => ({ id, name: namesById.get(id) ?? null })))
+            } catch (err) {
+                alerts.emit('Unable to select all matching teams.', 'warning')
+                console.warn(err)
+            } finally {
+                this.busy = false
+            }
+        },
+        clearSelection () {
+            this.truncated = false
+            this.emitSelection([])
+        },
+        deselect (id) {
+            this.emitSelection(this.modelValue.filter(team => team.id !== id))
+        },
+        emitSelection (teams) {
+            this.$emit('update:modelValue', teams)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.team-audience-picker {
+    display: flex;
+    flex-direction: column;
+    gap: $ff-unit-md;
+
+    .picker-filters {
+        display: flex;
+        gap: $ff-unit-xl;
+        flex-wrap: wrap;
+
+        .filter-options {
+            display: flex;
+            gap: $ff-unit-lg;
+            flex-wrap: wrap;
+            margin-top: $ff-unit-sm;
+        }
+    }
+
+    .picker-summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $ff-unit-md;
+        flex-wrap: wrap;
+        padding: $ff-unit-sm $ff-unit-md;
+        border: 1px solid var(--ff-color-border-strong);
+        background-color: var(--ff-color-bg-surface-raised);
+
+        .summary-count {
+            font-weight: 600;
+            display: flex;
+            flex-direction: column;
+
+            .summary-matching {
+                font-weight: 400;
+                font-size: 0.85rem;
+                color: var(--ff-color-text-subtle);
+            }
+        }
+
+        .summary-actions {
+            display: flex;
+            gap: $ff-unit-sm;
+            flex-wrap: wrap;
+        }
+    }
+
+    .picker-warning {
+        padding: $ff-unit-sm $ff-unit-md;
+        border: 1px solid var(--ff-color-status-warning-border);
+        background-color: var(--ff-color-status-warning-bg);
+    }
+
+    :deep(.ff-loadmore) {
+        padding: $ff-unit-lg 0;
+        display: flex;
+        justify-content: center;
+    }
+
+    .selected-teams {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $ff-unit-sm;
+
+        .selected-team {
+            display: flex;
+            align-items: center;
+            gap: $ff-unit-xs;
+            font-size: 0.85rem;
+            padding: 2px $ff-unit-sm;
+            border: 1px solid var(--ff-color-border-strong);
+            background-color: var(--ff-color-bg-surface-raised);
+            border-radius: 5px;
+
+            .ff-icon {
+                height: 14px;
+                width: 14px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontend/src/types/generated.ts b/frontend/src/types/generated.ts
index 54cd689d77..4a6e37fcea 100644
--- a/frontend/src/types/generated.ts
+++ b/frontend/src/types/generated.ts
@@ -532,6 +532,60 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/admin/teams/ids": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get the ids of all teams matching a filter - admin-only */
+        get: {
+            parameters: {
+                query?: {
+                    query?: string;
+                    teamType?: string;
+                    state?: string;
+                    billing?: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Default Response */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            count?: number;
+                            truncated?: boolean;
+                            ids?: string[];
+                        };
+                    };
+                };
+                /** @description Default Response */
+                "4XX": {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": components["schemas"]["APIError"];
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/admin/announcements": {
         parameters: {
             query?: never;
@@ -556,10 +610,20 @@ export interface paths {
                         title: string;
                         filter: {
                             roles?: number[];
+                            teamTypes?: string[];
+                            teams?: string[];
+                            billing?: string[];
                         };
                         mock?: boolean;
                         to?: Record<string, never>;
                         url?: string;
+                        /** @enum {string} */
+                        format?: "plain" | "markdown";
+                        video?: string;
+                        cta?: {
+                            label?: string;
+                            url?: string;
+                        };
                     };
                 };
             };
diff --git a/frontend/src/ui-components/components/data-table/DataTable.vue b/frontend/src/ui-components/components/data-table/DataTable.vue
index dcbaa75691..a10351b418 100644
--- a/frontend/src/ui-components/components/data-table/DataTable.vue
+++ b/frontend/src/ui-components/components/data-table/DataTable.vue
@@ -318,9 +318,19 @@ export default {
         serverSideSearch: {
             type: Boolean,
             default: false
+        },
+        /**
+         * Optional map of `{ [rowKey]: true }` making row selection controlled
+         * by the parent. Needed when a selection has to outlive the rows that
+         * are currently loaded, for example selecting across a paginated list.
+         * Left null, the table keeps owning its own selection as before.
+         */
+        checked: {
+            type: Object,
+            default: null
         }
     },
-    emits: ['update:search', 'load-more', 'row-selected', 'update:sort', 'rows-checked', 'update:page', 'update:page-size'],
+    emits: ['update:search', 'load-more', 'row-selected', 'update:sort', 'rows-checked', 'update:checked', 'update:page', 'update:page-size'],
     setup () {
         return { slugify }
     },
@@ -439,6 +449,26 @@ export default {
         }
     },
     watch: {
+        checked: {
+            handler (value) {
+                // Compare contents, not identity: the parent hands back a new
+                // object every time, so an identity check would always differ
+                // and the two watchers would bounce updates off each other.
+                if (value && !this.sameChecks(value, this.checks)) {
+                    this.checks = { ...value }
+                }
+            },
+            deep: true,
+            immediate: true
+        },
+        checks: {
+            handler (value) {
+                if (this.checked && !this.sameChecks(value, this.checked)) {
+                    this.$emit('update:checked', { ...value })
+                }
+            },
+            deep: true
+        },
         checkedRows: {
             handler (value) {
                 this.$emit('rows-checked', this.checkedRows)
@@ -453,17 +483,35 @@ export default {
         this.sort.order = this.orders.includes(this.initialSortOrder) ? this.initialSortOrder : this.orders[0]
     },
     methods: {
+        /**
+         * Do two check maps select the same rows? Only truthy entries count: an
+         * unchecked box leaves `false` behind rather than removing the key.
+         */
+        sameChecks (a, b) {
+            const keys = (map) => Object.keys(map || {}).filter((key) => map[key]).sort()
+            const aKeys = keys(a)
+            const bKeys = keys(b)
+            return aKeys.length === bKeys.length && aKeys.every((key, i) => key === bKeys[i])
+        },
         toggleAllChecks (pointerEvents) {
             pointerEvents.stopPropagation()
             pointerEvents.preventDefault()
             const isChecked = !this.allChecked
-            if (!isChecked) {
+            if (!isChecked && !this.checked) {
+                // Uncontrolled: the selection cannot outlive the rows on screen,
+                // so clearing the box clears all of it, as it always has
                 this.checks = {}
                 return
             }
+            const checks = { ...this.checks }
             this.filteredRows.forEach((row) => {
-                this.checks[row[this.checkKeyProp]] = true
+                if (isChecked) {
+                    checks[row[this.checkKeyProp]] = true
+                } else {
+                    delete checks[row[this.checkKeyProp]]
+                }
             })
+            this.checks = checks
         },
         extendedRows () {
             if (this.collapsibleRow) {
diff --git a/test/unit/forge/lib/announcements_spec.js b/test/unit/forge/lib/announcements_spec.js
new file mode 100644
index 0000000000..5443f3798b
--- /dev/null
+++ b/test/unit/forge/lib/announcements_spec.js
@@ -0,0 +1,126 @@
+const should = require('should')
+
+const { parseCallToAction, parseLinkUrl, parseVideoReference } = require('../../../../forge/lib/announcements')
+
+describe('announcements.js', function () {
+    describe('parseVideoReference', function () {
+        it('accepts a standard youtube watch url', function () {
+            parseVideoReference('https://www.youtube.com/watch?v=6l1ymjo80Vo')
+                .should.eql({ provider: 'youtube', id: '6l1ymjo80Vo' })
+        })
+
+        it('accepts a watch url with extra query parameters', function () {
+            parseVideoReference('https://www.youtube.com/watch?v=6l1ymjo80Vo&t=42s&list=PL123')
+                .should.eql({ provider: 'youtube', id: '6l1ymjo80Vo' })
+        })
+
+        it('accepts a youtu.be share url', function () {
+            parseVideoReference('https://youtu.be/6l1ymjo80Vo')
+                .should.eql({ provider: 'youtube', id: '6l1ymjo80Vo' })
+        })
+
+        it('accepts embed, shorts and live paths', function () {
+            parseVideoReference('https://www.youtube.com/embed/6l1ymjo80Vo').should.have.property('id', '6l1ymjo80Vo')
+            parseVideoReference('https://www.youtube.com/shorts/6l1ymjo80Vo').should.have.property('id', '6l1ymjo80Vo')
+            parseVideoReference('https://www.youtube.com/live/6l1ymjo80Vo').should.have.property('id', '6l1ymjo80Vo')
+        })
+
+        it('accepts a bare video id', function () {
+            parseVideoReference('6l1ymjo80Vo').should.eql({ provider: 'youtube', id: '6l1ymjo80Vo' })
+        })
+
+        it('rejects an empty or missing value', function () {
+            should.not.exist(parseVideoReference(''))
+            should.not.exist(parseVideoReference(undefined))
+            should.not.exist(parseVideoReference(null))
+            should.not.exist(parseVideoReference({ id: 'x' }))
+        })
+
+        it('rejects other video hosts', function () {
+            should.not.exist(parseVideoReference('https://vimeo.com/123456789'))
+            should.not.exist(parseVideoReference('https://evil.example.com/watch?v=6l1ymjo80Vo'))
+        })
+
+        it('rejects a non-http scheme', function () {
+            should.not.exist(parseVideoReference('javascript:alert(1)//youtube.com/watch?v=6l1ymjo80Vo'))
+        })
+
+        it('rejects a youtube url with no usable video id', function () {
+            should.not.exist(parseVideoReference('https://www.youtube.com/@flowfuse'))
+            should.not.exist(parseVideoReference('https://www.youtube.com/watch?v=tooshort'))
+        })
+    })
+
+    describe('parseCallToAction', function () {
+        it('accepts a label with an https url', function () {
+            parseCallToAction({ label: 'Talk to sales', url: 'https://flowfuse.com/contact/' })
+                .should.eql({ label: 'Talk to sales', url: 'https://flowfuse.com/contact/' })
+        })
+
+        it('accepts a relative in-app url', function () {
+            parseCallToAction({ label: 'Open billing', url: '/team/demo/billing' })
+                .should.eql({ label: 'Open billing', url: '/team/demo/billing' })
+        })
+
+        it('trims the label', function () {
+            parseCallToAction({ label: '  Book a call  ', url: 'https://flowfuse.com' })
+                .should.have.property('label', 'Book a call')
+        })
+
+        it('rejects a partial call to action', function () {
+            should.not.exist(parseCallToAction({ label: 'Talk to sales' }))
+            should.not.exist(parseCallToAction({ url: 'https://flowfuse.com' }))
+            should.not.exist(parseCallToAction({ label: '   ', url: 'https://flowfuse.com' }))
+            should.not.exist(parseCallToAction(null))
+        })
+
+        it('rejects a non-http scheme', function () {
+            should.not.exist(parseCallToAction({ label: 'Click', url: 'javascript:alert(1)' }))
+            should.not.exist(parseCallToAction({ label: 'Click', url: 'data:text/html,<script>alert(1)</script>' }))
+        })
+
+        it('rejects a url that only looks like an in-app path', function () {
+            should.not.exist(parseCallToAction({ label: 'Click', url: '//evil.example.com/phish' }))
+            should.not.exist(parseCallToAction({ label: 'Click', url: '/\\evil.example.com/phish' }))
+        })
+    })
+
+    describe('parseLinkUrl', function () {
+        it('accepts http and https', function () {
+            parseLinkUrl('https://flowfuse.com/blog/').should.equal('https://flowfuse.com/blog/')
+            parseLinkUrl('http://localhost:3000/x').should.equal('http://localhost:3000/x')
+        })
+
+        it('accepts a path within the platform', function () {
+            parseLinkUrl('/team/demo/billing').should.equal('/team/demo/billing')
+        })
+
+        it('rejects a scheme that can execute', function () {
+            should.not.exist(parseLinkUrl('javascript:alert(document.cookie)'))
+            should.not.exist(parseLinkUrl('data:text/html,<script>alert(1)</script>'))
+            should.not.exist(parseLinkUrl('vbscript:msgbox(1)'))
+        })
+
+        it('rejects an off-platform target disguised as a path', function () {
+            // Browsers resolve both of these against another origin
+            should.not.exist(parseLinkUrl('//evil.example.com/phish'))
+            should.not.exist(parseLinkUrl('/\\evil.example.com/phish'))
+        })
+
+        it('rejects the characters the url parser strips', function () {
+            // The parser drops tab, newline and carriage return before parsing,
+            // so each of these reaches the browser as '//evil.example.com'
+            should.not.exist(parseLinkUrl('/\t/evil.example.com/phish'))
+            should.not.exist(parseLinkUrl('/\n/evil.example.com/phish'))
+            should.not.exist(parseLinkUrl('/\r/evil.example.com/phish'))
+            should.not.exist(parseLinkUrl('java\tscript:alert(1)'))
+        })
+
+        it('rejects anything that is neither', function () {
+            should.not.exist(parseLinkUrl(''))
+            should.not.exist(parseLinkUrl('   '))
+            should.not.exist(parseLinkUrl('not a url'))
+            should.not.exist(parseLinkUrl(undefined))
+        })
+    })
+})
diff --git a/test/unit/forge/routes/api/admin_spec.js b/test/unit/forge/routes/api/admin_spec.js
index 7ccd9f9057..5077daff2d 100644
--- a/test/unit/forge/routes/api/admin_spec.js
+++ b/test/unit/forge/routes/api/admin_spec.js
@@ -360,5 +360,250 @@ describe('Admin API', async function () {
             ;(notifications[1].UserId === TestObjects.notificationUser1.id).should.be.true()
             ;(notifications[2].UserId === TestObjects.notificationUser5.id).should.be.true()
         })
+
+        it('send to an explicit list of teams', async function () {
+            const payload = {
+                message: 'targeted message',
+                title: 'targeted title',
+                filter: {
+                    roles: [app.factory.Roles.Roles.Owner, app.factory.Roles.Roles.Member, app.factory.Roles.Roles.Viewer, app.factory.Roles.Roles.Dashboard],
+                    teams: [TestObjects.CTeam.hashid]
+                },
+                mock: true
+            }
+            let response = await sendNotification(payload)
+            response.should.have.property('statusCode', 200)
+            let result = response.json()
+            result.should.have.property('recipientCount', 2)
+
+            delete payload.mock
+            response = await sendNotification(payload)
+            response.should.have.property('statusCode', 200)
+            result = response.json()
+            result.should.have.property('recipientCount', 2)
+
+            const notifications = await app.db.models.Notification.findAll()
+            notifications.should.have.length(2)
+            const recipients = notifications.map(n => n.UserId)
+            recipients.should.containEql(TestObjects.notificationUser3.id)
+            recipients.should.containEql(TestObjects.notificationUser4.id)
+        })
+
+        it('ignores the team type filter when explicit teams are given', async function () {
+            // BTeam is on the default team type, CTeam is on secondTeamType. Asking
+            // for CTeam explicitly must not be narrowed by an unrelated team type.
+            const payload = {
+                message: 'targeted message',
+                title: 'targeted title',
+                filter: {
+                    roles: [app.factory.Roles.Roles.Dashboard],
+                    teams: [TestObjects.CTeam.hashid],
+                    teamTypes: [TestObjects.secondTeamType.hashid]
+                },
+                mock: true
+            }
+            const response = await sendNotification(payload)
+            response.should.have.property('statusCode', 200)
+            response.json().should.have.property('recipientCount', 1)
+        })
+
+        it('rejects an unknown team', async function () {
+            const response = await sendNotification({
+                message: 'targeted message',
+                title: 'targeted title',
+                filter: {
+                    roles: [app.factory.Roles.Roles.Owner],
+                    teams: ['not-a-hashid']
+                }
+            })
+            response.should.have.property('statusCode', 400)
+            response.json().should.have.property('code', 'bad_request')
+        })
+
+        it('stores a markdown announcement with a video and a button', async function () {
+            const response = await sendNotification({
+                message: 'Read the [release notes](https://flowfuse.com/blog/).',
+                title: 'rich announcement',
+                format: 'markdown',
+                video: 'https://www.youtube.com/watch?v=6l1ymjo80Vo',
+                cta: { label: 'Talk to sales', url: 'https://flowfuse.com/contact/' },
+                filter: {
+                    roles: [app.factory.Roles.Roles.Owner],
+                    teams: [TestObjects.BTeam.hashid]
+                }
+            })
+            response.should.have.property('statusCode', 200)
+
+            const notifications = await app.db.models.Notification.findAll()
+            notifications.should.have.length(1)
+            const data = notifications[0].data
+            data.should.have.property('format', 'markdown')
+            data.should.have.property('video')
+            data.video.should.eql({ provider: 'youtube', id: '6l1ymjo80Vo' })
+            data.should.have.property('cta')
+            data.cta.should.eql({ label: 'Talk to sales', url: 'https://flowfuse.com/contact/' })
+        })
+
+        it('rejects an unsupported video link', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                video: 'https://vimeo.com/123456789',
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+            response.json().error.should.match(/YouTube/)
+        })
+
+        it('rejects a card link that could execute', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                url: 'javascript:alert(document.cookie)',
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+            response.json().should.have.property('code', 'bad_request')
+        })
+
+        it('rejects a card link that leaves the platform while looking in-app', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                url: '//evil.example.com/phish',
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+        })
+
+        it('rejects a card link that hides an off-platform host behind a tab', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                url: '/\t/evil.example.com/phish',
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+        })
+
+        it('rejects a `to` link that could execute', async function () {
+            // `to` is preferred over `url` by the front-end, so it is the same sink
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                to: { url: 'javascript:alert(document.cookie)' },
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+        })
+
+        it('still accepts a `to` route object', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                to: { name: 'instance-overview', params: { id: 'abc' } },
+                filter: {
+                    roles: [app.factory.Roles.Roles.Owner],
+                    teams: [TestObjects.BTeam.hashid]
+                }
+            })
+            response.should.have.property('statusCode', 200)
+        })
+
+        it('rejects a button that could execute', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                cta: { label: 'Click', url: 'javascript:alert(1)' },
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+        })
+
+        it('rejects a button without a url', async function () {
+            const response = await sendNotification({
+                message: 'message',
+                title: 'title',
+                cta: { label: 'Talk to sales' },
+                filter: { roles: [app.factory.Roles.Roles.Owner] }
+            })
+            response.should.have.property('statusCode', 400)
+        })
+
+        describe('team ids for an audience', function () {
+            async function getTeamIds (query = '') {
+                return app.inject({
+                    method: 'GET',
+                    url: '/api/v1/admin/teams/ids' + query,
+                    cookies: { sid: TestObjects.tokens.alice }
+                })
+            }
+
+            it('returns every team id by default, including suspended teams', async function () {
+                const response = await getTeamIds()
+                response.should.have.property('statusCode', 200)
+                const result = response.json()
+                result.should.have.property('truncated', false)
+                result.ids.should.containEql(TestObjects.ATeam.hashid)
+                result.ids.should.containEql(TestObjects.CTeam.hashid)
+                result.ids.should.containEql(TestObjects.DTeam.hashid)
+                result.count.should.equal(result.ids.length)
+            })
+
+            it('excludes suspended teams when asked for active only', async function () {
+                // How the audience picker asks: a suspended team can never
+                // receive an announcement, so it must not be selectable
+                const response = await getTeamIds('?state=active')
+                response.should.have.property('statusCode', 200)
+                const result = response.json()
+                result.ids.should.containEql(TestObjects.CTeam.hashid)
+                result.ids.should.not.containEql(TestObjects.DTeam.hashid)
+            })
+
+            it('filters by team type', async function () {
+                const response = await getTeamIds(`?teamType=${TestObjects.secondTeamType.hashid}`)
+                response.should.have.property('statusCode', 200)
+                const result = response.json()
+                result.ids.should.containEql(TestObjects.CTeam.hashid)
+                result.ids.should.containEql(TestObjects.DTeam.hashid)
+                result.ids.should.not.containEql(TestObjects.ATeam.hashid)
+            })
+
+            it('filters by suspended state', async function () {
+                const response = await getTeamIds('?state=suspended')
+                response.should.have.property('statusCode', 200)
+                const result = response.json()
+                result.ids.should.eql([TestObjects.DTeam.hashid])
+            })
+
+            it('filters by name search', async function () {
+                const response = await getTeamIds('?query=DTeAbCam')
+                response.should.have.property('statusCode', 200)
+                response.json().ids.should.eql([TestObjects.DTeam.hashid])
+            })
+
+            it('returns the same set the teams list is showing', async function () {
+                const listResponse = await app.inject({
+                    method: 'GET',
+                    url: `/api/v1/teams?teamType=${TestObjects.secondTeamType.hashid}`,
+                    cookies: { sid: TestObjects.tokens.alice }
+                })
+                listResponse.should.have.property('statusCode', 200)
+                const listed = listResponse.json().teams.map(team => team.id).sort()
+
+                const idsResponse = await getTeamIds(`?teamType=${TestObjects.secondTeamType.hashid}`)
+                idsResponse.json().ids.slice().sort().should.eql(listed)
+            })
+
+            it('is admin-only', async function () {
+                await login('nu1', 'nu1;oaihegk.jeigaegioh')
+                const response = await app.inject({
+                    method: 'GET',
+                    url: '/api/v1/admin/teams/ids',
+                    cookies: { sid: TestObjects.tokens.nu1 }
+                })
+                response.statusCode.should.be.greaterThanOrEqual(400)
+            })
+        })
     })
 })