diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..c185b69d
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Screen Reader Compatibility for Loading Spinners
+**Learning:** When displaying a loading spinner (like `Loader2` from `lucide-react`) inside a button, screen readers may redundantly or confusingly read out the decorative SVG element if not properly hidden. Additionally, the button itself needs to explicitly declare its busy state.
+**Action:** Always add `aria-hidden="true"` to purely decorative loading icons and apply `aria-busy={isLoading}` to the parent `<button>` or interactive element to ensure assistive technologies correctly interpret the state without spamming the user.
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0757f7f5..323c8405 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -33,7 +33,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const content = showLoader ? (
       <>
-        <Loader2 className="animate-spin" />
+        <Loader2 className="animate-spin" aria-hidden="true" />
         {children}
       </>
     ) : (
@@ -46,6 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={isLoading || props.disabled}
         onClick={handleClick}
+        aria-busy={isLoading}
         {...props}
       >
         {content}