diff --git a/forge/ee/lib/billing/trialTask.js b/forge/ee/lib/billing/trialTask.js
index 6c0e1791ab..93e7ae7a19 100644
--- a/forge/ee/lib/billing/trialTask.js
+++ b/forge/ee/lib/billing/trialTask.js
@@ -33,6 +33,7 @@ module.exports.init = function (app) {
                         await sendTrialEmail(subscription.Team, 'TrialTeamSuspended', {
                             teamSettingsURL: `${app.config.base_url}/team/${subscription.Team.slug}/billing`
                         })
+                        await sendTrialSuspendedNotification(subscription.Team, 'TrialTeamEnded')
                     }
 
                     // We have dealt with this team
@@ -113,6 +114,16 @@ module.exports.init = function (app) {
         }
     }
 
+    async function sendTrialSuspendedNotification (team) {
+        const owners = await team.getOwners()
+        for (const user of owners) {
+            const { id, TeamTypeId, ...teamPayload } = team.toJSON()
+            app.notifications.send(user, 'team-trial-suspended', {
+                team: teamPayload
+            })
+        }
+    }
+
     async function suspendAllProjects (team) {
         const projects = await team.getProjects()
         for (const project of projects) {
diff --git a/frontend/src/components/notifications/Generic.vue b/frontend/src/components/notifications/Generic.vue
index 4756d47da6..c1baef3c48 100644
--- a/frontend/src/components/notifications/Generic.vue
+++ b/frontend/src/components/notifications/Generic.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import IconDeviceSolid from '../../components/icons/DeviceSolid.js'
 import IconNodeRedSolid from '../../components/icons/NodeRedSolid.js'
@@ -64,6 +64,11 @@ export default {
                     icon: 'instance',
                     title: 'Node-RED Instance Memory Usage',
                     message: 'Memory usage of "<i>{{instance.name}}</i>" has spent more than 5 minutes at more than 75% of memory limit. This instance may benefit from being upgraded to a larger Instance type'
+                },
+                'team-trial-suspended': {
+                    icon: 'UserGroupIcon',
+                    title: 'Trial Period Ended',
+                    message: 'Your trial period for <i>{{team.name}}</i> has ended. Please upgrade to a paid plan to continue using this team.'
                 }
             }
         }
@@ -90,6 +95,9 @@ export default {
             case typeof this.notification.data?.url === 'string':
                 return { url: this.notification.data.url }
 
+            case this.notification.type === 'team-trial-suspended':
+                return { name: 'Billing', params: { team_slug: this.notification.data.team.slug } }
+
             default:
                 return null // no link
             }
@@ -112,7 +120,7 @@ export default {
             } else if (event.icon === 'device') {
                 event.iconComponent = IconDeviceSolid
             } else {
-                event.iconComponent = defineAsyncComponent(() => import('@heroicons/vue/solid').then(x => x[event.icon] || x.BellIcon))
+                event.iconComponent = markRaw(defineAsyncComponent(() => import('@heroicons/vue/solid').then(x => x[event.icon] || x.BellIcon)))
             }
 
             // Perform known substitutions
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index 43d46228ba..dae532e2a5 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -43,6 +43,7 @@ $ff-notifications-drawer-side-padding: 6px;
   align-items: center;
   height: 100%;
   width: 100%;
+  padding: 0 !important;
 
   > .header {
     border-bottom: 1px solid $ff-grey-300;