diff --git a/.Jules/palette.md b/.Jules/palette.md
index f5209c33..6528c493 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,6 @@
 ## 2024-06-13 - [Accessibility] Screen readers pronouncing decorative emojis
 **Learning:** Screen readers often misinterpret standalone emojis (e.g., ⬇️, 🗑️) inside buttons, reading them literally, which creates redundant or confusing announcements when a descriptive `aria-label` is already present.
 **Action:** Always wrap non-informational emojis or text-based icons in `<span aria-hidden="true">` when the parent interactive element already has a sufficiently descriptive label.
+## 2025-04-03 - Improved Notification Close Button Accessibility and Focus Styles
+**Learning:** Decorative characters like "✕" inside buttons that already have `aria-label` attributes can cause redundant or confusing announcements for screen reader users. Additionally, using the `:focus` pseudo-class for buttons triggers focus outlines even on mouse clicks, which can add unnecessary visual noise.
+**Action:** When implementing icon-only buttons with decorative characters, wrap the visual character in `<span aria-hidden="true">` to rely entirely on the `aria-label`. Use `:focus-visible` instead of `:focus` for interactive elements to ensure focus outlines appear only during keyboard navigation.
diff --git a/frontend/package.json b/frontend/package.json
index 2f6250c4..1d444478 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -94,4 +94,4 @@
     "vitest": "^4.1.2",
     "web-streams-polyfill": "^4.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/NotificationSystem/NotificationSystem.css b/frontend/src/components/NotificationSystem/NotificationSystem.css
index 22a33b13..604b8edd 100644
--- a/frontend/src/components/NotificationSystem/NotificationSystem.css
+++ b/frontend/src/components/NotificationSystem/NotificationSystem.css
@@ -281,8 +281,8 @@
 }
 
 /* Focus states for accessibility */
-.notification-action-btn:focus,
-.notification-close-btn:focus {
+.notification-action-btn:focus-visible,
+.notification-close-btn:focus-visible {
   outline: 2px solid #667eea;
   outline-offset: 2px;
 }
diff --git a/frontend/src/components/NotificationSystem/NotificationSystem.tsx b/frontend/src/components/NotificationSystem/NotificationSystem.tsx
index 176a51e5..aa81f881 100644
--- a/frontend/src/components/NotificationSystem/NotificationSystem.tsx
+++ b/frontend/src/components/NotificationSystem/NotificationSystem.tsx
@@ -202,8 +202,9 @@ const NotificationItem: React.FC<NotificationItemProps> = ({
             className="notification-close-btn"
             onClick={handleRemove}
             aria-label="Close notification"
+            title="Close"
           >
-            ✕
+            <span aria-hidden="true">✕</span>
           </button>
         </div>
       </div>