diff --git a/src/client/components/NewsButton.ts b/src/client/components/NewsButton.ts
index 52ecf5479..ba7411a34 100644
--- a/src/client/components/NewsButton.ts
+++ b/src/client/components/NewsButton.ts
@@ -1,15 +1,36 @@
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import megaphone from "../../../resources/images/Megaphone.svg";
+import version from "../../../resources/version.txt";
 import { NewsModal } from "../NewsModal";
 import { translateText } from "../Utils";
 
 @customElement("news-button")
 export class NewsButton extends LitElement {
-  @property({ type: Boolean })
-  hidden = false;
+  @property({ type: Boolean }) hidden = false;
+  @state() private isActive = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.checkForNewVersion();
+  }
+
+  private checkForNewVersion() {
+    try {
+      const lastSeenVersion = localStorage.getItem(
+        "news-button-last-seen-version",
+      );
+      this.isActive = lastSeenVersion !== version;
+    } catch (error) {
+      // Fallback to NOT showing notification if localStorage fails
+      this.isActive = false;
+    }
+  }
 
   private handleClick() {
+    localStorage.setItem("news-button-last-seen-version", version);
+    this.isActive = false;
+
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (newsModal) {
       newsModal.open();
@@ -18,7 +39,12 @@ export class NewsButton extends LitElement {
 
   render() {
     return html`
-      <div class="flex relative ${this.hidden ? "parent-hidden" : ""}">
+      <div
+        class="flex relative ${this.hidden ? "parent-hidden" : ""} ${this
+          .isActive
+          ? "active"
+          : ""}"
+      >
         <button
           class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
           @click=${this.handleClick}
diff --git a/src/client/styles.css b/src/client/styles.css
index 05950fe70..26fa47658 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -624,3 +624,37 @@ label.option-card:hover {
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
+
+/* News Button Notification */
+.news-button .active button {
+  position: relative;
+  border-color: #2563eb !important;
+  border-width: 2px !important;
+  box-shadow:
+    0 0 0 1px rgba(37, 99, 235, 0.5),
+    0 0 8px rgba(37, 99, 235, 0.4);
+}
+
+news-button .active button::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  background: #f59e0b;
+  border: 2px solid white;
+  border-radius: 50%;
+  animation: newsPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes newsPulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.4);
+  }
+}