diff --git a/backend/src/app.ts b/backend/src/app.ts
index 3c9f146..bd30bb3 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -1191,9 +1191,9 @@ const sendBirdMilestoneReminderNotification = async ({
     text: lines.join('\n'),
     attachments,
     html: `
-      <div style="margin: 0; padding: 28px; background: #f4efe4; font-family: Arial, sans-serif; color: #263331; line-height: 1.6;">
-        <div style="max-width: 680px; margin: 0 auto; overflow: hidden; border-radius: 30px; background: #fffdf7; border: 1px solid #eadfcd; box-shadow: 0 24px 60px rgba(38, 51, 49, 0.16);">
-          <div style="padding: 24px 28px; background: linear-gradient(135deg, #fff8ef, #eaf7ef);">
+      <div style="margin: 0; padding: 28px; background: #fef5e7; background-image: radial-gradient(circle at 14% 10%, rgba(222, 124, 58, 0.24), transparent 22%), radial-gradient(circle at 82% 12%, rgba(53, 136, 110, 0.22), transparent 20%), radial-gradient(circle at 24% 84%, rgba(221, 179, 78, 0.18), transparent 22%), linear-gradient(180deg, #fef5e7 0%, #e9ddba 46%, #d9eadf 100%); font-family: Arial, sans-serif; color: #1f2a2a; line-height: 1.6;">
+        <div style="max-width: 680px; margin: 0 auto; overflow: hidden; border-radius: 30px; background: #fff8eb; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%), linear-gradient(180deg, rgba(255, 248, 235, 0.96), rgba(227, 243, 229, 0.92)); border: 1px solid rgba(53, 129, 98, 0.28); box-shadow: 0 22px 44px rgba(89, 48, 42, 0.14);">
+          <div style="padding: 24px 28px; background: #fff8eb; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 46%), linear-gradient(180deg, rgba(255, 249, 238, 0.96), rgba(228, 244, 230, 0.9)); border-bottom: 1px solid rgba(53, 129, 98, 0.16);">
             ${
               logoAttachment
                 ? '<img src="cid:flockpal-logo" alt="FlockPal" style="display: block; width: 180px; max-width: 72%; height: auto;" />'
@@ -1207,14 +1207,14 @@ const sendBirdMilestoneReminderNotification = async ({
                   ${birdPhotoHtml}
                 </td>
                 <td style="vertical-align: top; padding: 0 0 20px;">
-                  <h1 style="margin: 0 0 12px; color: #263331; font-size: 30px; line-height: 1.12;">${escapeHtml(copy.headline)}</h1>
+                  <h1 style="margin: 0 0 12px; color: #1f2a2a; font-size: 30px; line-height: 1.12;">${escapeHtml(copy.headline)}</h1>
                   <p style="margin: 0; color: #63562d; font-size: 17px;">${escapeHtml(copy.intro)}</p>
                 </td>
               </tr>
             </table>
             <p style="margin: 4px 0 18px; font-size: 16px;">${escapeHtml(copy.body)}</p>
             <p style="margin: 0;">
-              <a href="${frontendBaseUrl}" style="display: inline-block; padding: 12px 18px; border-radius: 999px; background: #238a5a; color: #ffffff; text-decoration: none; font-weight: 700;">Open FlockPal</a>
+              <a href="${frontendBaseUrl}" style="display: inline-block; padding: 12px 18px; border-radius: 999px; background: linear-gradient(135deg, #238a5a, #2f8f98); color: #ffffff; text-decoration: none; font-weight: 700; box-shadow: 0 12px 24px rgba(72, 97, 62, 0.16);">Open FlockPal</a>
             </p>
           </div>
         </div>