diff --git a/Modern Development/Service Portal Widgets/Animated Notification Badge/README.md b/Modern Development/Service Portal Widgets/Animated Notification Badge/README.md
new file mode 100644
index 0000000000..ef11e2b90d
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Animated Notification Badge/README.md	
@@ -0,0 +1,18 @@
+# 🔔 Animated Notification Badge
+
+This snippet demonstrates how to create an animated notification badge using native ServiceNow client-side capabilities, without relying on direct DOM manipulation or inline styles.
+It uses AngularJS and CSS to apply a pulsating animation to the badge, ideal for Portal widgets that require attention-grabbing indicators.
+
+![Demo of animated badge](./animated-badge.gif)
+
+## 📦 Files
+
+- `notification-badge.html` – Badge markup with conditional visibility
+- `notification-badge.css` – Keyframe animation and badge styling
+- `notification-badge.js` – Logic to trigger or reset badge visibility
+
+## 🚀 How to Use
+
+1. Copy the HTML, CSS, and client script into your custom Portal widget.
+2. Bind the badge visibility to a condition (e.g., number of unread messages).
+3. Use the `animate__pulse` class to trigger attention-grabbing animations.
diff --git a/Modern Development/Service Portal Widgets/Animated Notification Badge/animated-badge.gif b/Modern Development/Service Portal Widgets/Animated Notification Badge/animated-badge.gif
new file mode 100644
index 0000000000..a8c0c2ea47
Binary files /dev/null and b/Modern Development/Service Portal Widgets/Animated Notification Badge/animated-badge.gif differ
diff --git a/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.css b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.css
new file mode 100644
index 0000000000..d394774228
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.css	
@@ -0,0 +1,35 @@
+.notification-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.notification-icon {
+  font-size: 24px;
+  color: #333;
+}
+
+.notification-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background-color: #e74c3c;
+  color: white;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 50%;
+  font-weight: bold;
+  animation-duration: 0.6s;
+  animation-fill-mode: both;
+}
+
+.notification-pulse {
+  animation-name: pulseScale;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes pulseScale {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
diff --git a/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.html b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.html
new file mode 100644
index 0000000000..ae74f9e960
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.html	
@@ -0,0 +1,9 @@
+<div class="notification-wrapper">
+  <i class="fa fa-bell notification-icon" aria-hidden="true"></i>
+  <span 
+    class="notification-badge" 
+    ng-class="{'notification-pulse': c.hasNewNotification}" 
+    ng-if="c.hasNewNotification">
+    {{ c.badgeCount }}
+  </span>
+</div>
diff --git a/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.js b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.js
new file mode 100644
index 0000000000..9fc4d51b4d
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.js	
@@ -0,0 +1,6 @@
+api.controller=function($scope) {
+  var c = this;
+
+  c.badgeCount = 3;
+  c.hasNewNotification = c.badgeCount > 0;
+};