diff --git a/backend/src/app.ts b/backend/src/app.ts
index bd30bb3..40c9de5 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: #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);">
+      <div style="margin: 0; padding: 28px; background-color: #fef5e7; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22%3E%3Cg fill=%22%235bb3b7%22 opacity=%220.18%22%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(32 80 80)%22/%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(-32 80 80)%22/%3E%3C/g%3E%3Cg fill=%22%23f3a24a%22 opacity=%220.12%22 transform=%22translate(88 18) scale(.48)%22%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(32 80 80)%22/%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(-32 80 80)%22/%3E%3C/g%3E%3Cg fill=%22%237eb773%22 opacity=%220.14%22 transform=%22translate(-26 92) scale(.56)%22%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(32 80 80)%22/%3E%3Crect x=%2270%22 y=%2224%22 width=%2220%22 height=%22112%22 rx=%2210%22 transform=%22rotate(-32 80 80)%22/%3E%3C/g%3E%3C/svg%3E'), 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%), linear-gradient(180deg, #fef5e7 0%, #e9ddba 46%, #d9eadf 100%); background-repeat: repeat, no-repeat, no-repeat, no-repeat; 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-color: #e7f4e9; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 42%), linear-gradient(180deg, rgba(235, 247, 237, 0.98), rgba(211, 235, 220, 0.96)); border: 1px solid rgba(53, 129, 98, 0.34); box-shadow: 0 22px 44px rgba(89, 48, 42, 0.14);">
+          <div style="padding: 24px 28px; background-color: #edf8ef; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 46%), linear-gradient(180deg, rgba(242, 250, 243, 0.98), rgba(220, 241, 226, 0.94)); border-bottom: 1px solid rgba(53, 129, 98, 0.18);">
             ${
               logoAttachment
                 ? '<img src="cid:flockpal-logo" alt="FlockPal" style="display: block; width: 180px; max-width: 72%; height: auto;" />'