diff --git a/apps/api/.env.example b/apps/api/.env.example
index a2c84f0b..77e01a70 100644
--- a/apps/api/.env.example
+++ b/apps/api/.env.example
@@ -186,3 +186,5 @@ OCI_LOGGING_MAX_BATCH_SIZE=50
 OCI_LOGGING_FLUSH_INTERVAL_MS=5000
 
 LOG_LEVEL=debug
+
+BUYMEACOFFEE_WEBHOOK_SECRET=
\ No newline at end of file
diff --git a/apps/api/src/app/app.module.ts b/apps/api/src/app/app.module.ts
index 74b64210..ab7a32b3 100644
--- a/apps/api/src/app/app.module.ts
+++ b/apps/api/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { UserModule } from './user/user.module';
 import { RedirectModule } from './redirect/redirect.module';
 import { TeslaPublicKeyModule } from './tesla-public-key/tesla-public-key.module';
 import { OnboardingModule } from './onboarding/onboarding.module';
+import { SupportersModule } from './supporters/supporters.module';
 import { CloudflareThrottlerGuard } from '../common/guards/cloudflare-throttler.guard';
 import { LogContextInterceptor } from '../common/interceptors/log-context.interceptor';
 import { TokenRevokedExceptionFilter } from '../common/filters/token-revoked-exception.filter';
@@ -70,6 +71,7 @@ import {
     OffensiveResponseModule,
     AlertsModule,
     NotificationsModule,
+    SupportersModule,
     ThrottlerModule.forRoot([getThrottleConfig()]),
   ],
   controllers: [AppController, HealthController],
diff --git a/apps/api/src/app/supporters/bmc-webhook-parser.util.spec.ts b/apps/api/src/app/supporters/bmc-webhook-parser.util.spec.ts
new file mode 100644
index 00000000..4f9ca224
--- /dev/null
+++ b/apps/api/src/app/supporters/bmc-webhook-parser.util.spec.ts
@@ -0,0 +1,109 @@
+import * as crypto from 'crypto';
+import { SupporterType } from '../../entities/supporter.entity';
+import {
+  BmcWebhookPayload,
+  verifyWebhookSignature,
+} from './bmc-webhook-parser.util';
+
+describe('The bmc-webhook-parser utility', () => {
+  const originalSecret = process.env.BUYMEACOFFEE_WEBHOOK_SECRET;
+
+  afterEach(() => {
+    process.env.BUYMEACOFFEE_WEBHOOK_SECRET = originalSecret;
+  });
+
+  describe('The verifyWebhookSignature() function', () => {
+    describe('When signature matches the HMAC of the raw body', () => {
+      it('should return true', () => {
+        const secret = 'test-secret-key-123';
+        process.env.BUYMEACOFFEE_WEBHOOK_SECRET = secret;
+        const rawBody = JSON.stringify({ type: 'donation.created' });
+        const signature = crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
+
+        expect(verifyWebhookSignature(rawBody, signature)).toBe(true);
+      });
+    });
+
+    describe('When signature does not match', () => {
+      it('should return false', () => {
+        process.env.BUYMEACOFFEE_WEBHOOK_SECRET = 'secret';
+        expect(verifyWebhookSignature('{"foo":"bar"}', 'invalid-hex-signature')).toBe(false);
+      });
+    });
+  });
+
+  describe('The BmcWebhookPayload class', () => {
+    describe('When instantiated with a donation payload', () => {
+      it('should transform into a complete active donation supporter entity', () => {
+        const payload = {
+          type: 'donation.created',
+          data: {
+            transaction_id: 'txn-123',
+            supporter_name: 'John Doe',
+            supporter_email: 'john@example.com',
+            coffee_count: 5,
+            support_note: 'Awesome project!',
+            support_created_on: '2024-01-01T12:00:00Z',
+          },
+        };
+
+        const result = new BmcWebhookPayload(payload).toSupporter();
+
+        expect(result).toStrictEqual({
+          external_id: 'txn-123',
+          name: 'John Doe',
+          email: 'john@example.com',
+          coffees: 5,
+          type: SupporterType.Donation,
+          is_active: true,
+          message: 'Awesome project!',
+          support_date: new Date('2024-01-01T12:00:00Z'),
+        });
+      });
+    });
+
+    describe('When instantiated with a membership payload', () => {
+      it('should transform into an active membership supporter entity with calculated coffees', () => {
+        const payload = {
+          type: 'membership.started',
+          data: {
+            psp_id: 'sub-456',
+            supporter_name: 'Alice',
+            amount: 5,
+            status: 'active',
+            started_at: 1719825600,
+          },
+        };
+
+        const result = new BmcWebhookPayload(payload).toSupporter();
+
+        expect(result).toStrictEqual({
+          external_id: 'sub-456',
+          name: 'Alice',
+          email: null,
+          coffees: 2,
+          type: SupporterType.Membership,
+          is_active: true,
+          message: null,
+          support_date: new Date(1719825600 * 1000),
+        });
+      });
+    });
+
+    describe('When instantiated with a cancellation or refund event', () => {
+      it('should mark isActive as false', () => {
+        const payload = {
+          type: 'membership.cancelled',
+          data: {
+            psp_id: 'sub-456',
+            status: 'canceled',
+          },
+        };
+
+        const result = new BmcWebhookPayload(payload).toSupporter();
+
+        expect(result.is_active).toBe(false);
+      });
+    });
+  });
+});
diff --git a/apps/api/src/app/supporters/bmc-webhook-parser.util.ts b/apps/api/src/app/supporters/bmc-webhook-parser.util.ts
new file mode 100644
index 00000000..86a07ae9
--- /dev/null
+++ b/apps/api/src/app/supporters/bmc-webhook-parser.util.ts
@@ -0,0 +1,157 @@
+import * as crypto from 'crypto';
+import { Supporter, SupporterType } from '../../entities/supporter.entity';
+import {
+  isPrivateSupporter,
+  sanitizeMessage,
+  sanitizeName,
+} from './supporter-sanitizer.util';
+
+export function verifyWebhookSignature(rawBody: string, signature?: string): boolean {
+  const secret = process.env.BUYMEACOFFEE_WEBHOOK_SECRET;
+  if (!secret || !signature) {
+    return false;
+  }
+
+  const calculated = crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
+  const signatureBuffer = Buffer.from(signature, 'hex');
+  const calculatedBuffer = Buffer.from(calculated, 'hex');
+
+  if (signatureBuffer.length !== calculatedBuffer.length) {
+    return false;
+  }
+
+  return crypto.timingSafeEqual(signatureBuffer, calculatedBuffer);
+}
+
+export class BmcWebhookPayload {
+  private readonly eventType: string;
+  private readonly data: Record<string, unknown>;
+  private readonly isPrivate: boolean;
+
+  constructor(payload: Record<string, unknown>) {
+    this.eventType = String(payload['type'] || '');
+    this.data = (payload['data'] || payload['response'] || payload) as Record<string, unknown>;
+    this.isPrivate = isPrivateSupporter(this.data) || isPrivateSupporter(payload);
+  }
+
+  public toSupporter(): Partial<Supporter> {
+    return {
+      external_id: this.resolveExternalId(),
+      name: this.resolveName(),
+      email: this.resolveEmail(),
+      coffees: this.resolveCoffees(),
+      type: this.resolveType(),
+      is_active: this.resolveIsActive(),
+      message: this.resolveMessage(),
+      support_date: this.resolveSupportDate(),
+    };
+  }
+
+  private resolveExternalId(): string | null {
+    const id = String(
+      this.data['transaction_id'] ||
+      this.data['psp_id'] ||
+      this.data['subscription_id'] ||
+      this.data['id'] ||
+      ''
+    );
+    return id || null;
+  }
+
+  private resolveName(): string {
+    const raw = String(
+      this.data['supporter_name'] ||
+      this.data['payer_name'] ||
+      this.data['name'] ||
+      'Anonymous'
+    );
+    return sanitizeName(raw, this.isPrivate);
+  }
+
+  private resolveEmail(): string | null {
+    const email = this.data['supporter_email'] || this.data['payer_email'] || this.data['email'];
+    return email ? String(email) : null;
+  }
+
+  private resolveCoffees(): number {
+    const count = Number(
+      this.data['coffee_count'] ||
+      this.data['number_of_coffees'] ||
+      this.data['coffees'] ||
+      this.data['quantity'] ||
+      0
+    );
+    const amount = Number(
+      this.data['amount'] ||
+      this.data['total_amount_charged'] ||
+      this.data['coffee_price'] ||
+      0
+    );
+    if (amount > 0) {
+      return Math.max(count, Math.max(1, Math.round(amount / 2.25)));
+    }
+    return Math.max(1, count);
+  }
+
+  private resolveType(): SupporterType {
+    return this.isSubscription() ? SupporterType.Membership : SupporterType.Donation;
+  }
+
+  private resolveIsActive(): boolean {
+    const isInactiveEvent =
+      this.eventType.endsWith('.refunded') ||
+      this.eventType.endsWith('.cancelled') ||
+      this.eventType.endsWith('.paused');
+    const isInactiveStatus =
+      this.data['status'] === 'refunded' ||
+      this.data['status'] === 'canceled' ||
+      this.data['status'] === 'paused';
+    const isInactiveFlag =
+      this.data['refunded'] === 'true' ||
+      this.data['canceled'] === 'true' ||
+      this.data['paused'] === 'true';
+
+    return !isInactiveEvent && !isInactiveStatus && !isInactiveFlag;
+  }
+
+  private resolveMessage(): string | null {
+    const raw = this.data['support_note'] || this.data['message'] || null;
+    return sanitizeMessage(raw ? String(raw) : null, this.isPrivate) || null;
+  }
+
+  private resolveSupportDate(): Date {
+    const raw =
+      this.data['support_created_on'] ||
+      this.data['created_at'] ||
+      this.data['started_at'] ||
+      this.data['created'];
+    return this.parseDate(raw);
+  }
+
+  private parseDate(raw: unknown): Date {
+    if (typeof raw === 'number') {
+      return raw < 1e11 ? new Date(raw * 1000) : new Date(raw);
+    }
+    if (typeof raw === 'string' && /^\d+$/.test(raw)) {
+      const num = parseInt(raw, 10);
+      return num < 1e11 ? new Date(num * 1000) : new Date(num);
+    }
+    if (typeof raw === 'string') {
+      return new Date(raw);
+    }
+    return new Date();
+  }
+
+  private isSubscription(): boolean {
+    return (
+      this.eventType.startsWith('membership.') ||
+      this.eventType.startsWith('recurring_donation.') ||
+      this.eventType === 'subscription' ||
+      Boolean(
+        this.data['subscription_id'] ||
+        this.data['membership_level_id'] ||
+        this.data['psp_id']
+      )
+    );
+  }
+}
diff --git a/apps/api/src/app/supporters/supporter-aggregator.util.spec.ts b/apps/api/src/app/supporters/supporter-aggregator.util.spec.ts
new file mode 100644
index 00000000..44328be9
--- /dev/null
+++ b/apps/api/src/app/supporters/supporter-aggregator.util.spec.ts
@@ -0,0 +1,73 @@
+import { Supporter, SupporterType } from '../../entities/supporter.entity';
+import { aggregateSupporters } from './supporter-aggregator.util';
+
+describe('The supporter-aggregator utility', () => {
+  describe('The aggregateSupporters() function', () => {
+    describe('When aggregating multiple donations from same user', () => {
+      it('should sum coffee counts and use latest date', () => {
+        const item1: Supporter = {
+          id: '1',
+          name: 'Yvan',
+          email: 'yvan@example.com',
+          coffees: 5,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-01-01T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        const item2: Supporter = {
+          id: '2',
+          name: 'Yvan M.',
+          email: 'yvan@example.com',
+          coffees: 10,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-01-05T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        const result = aggregateSupporters([item1, item2]);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].coffees).toBe(15);
+        expect(result[0].name).toBe('Yvan M.');
+        expect(result[0].supportDate).toBe('2024-01-05T10:00:00.000Z');
+      });
+    });
+
+    describe('When grouping anonymous contributors without email', () => {
+      it('should not merge separate anonymous contributors', () => {
+        const item1: Supporter = {
+          id: 'anon-1',
+          name: 'Anonymous',
+          coffees: 1,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-01-01T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        const item2: Supporter = {
+          id: 'anon-2',
+          name: 'Someone',
+          coffees: 2,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-01-02T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        const result = aggregateSupporters([item1, item2]);
+
+        expect(result).toHaveLength(2);
+        expect(result[0].coffees).toBe(2);
+        expect(result[1].coffees).toBe(1);
+      });
+    });
+  });
+});
diff --git a/apps/api/src/app/supporters/supporter-aggregator.util.ts b/apps/api/src/app/supporters/supporter-aggregator.util.ts
new file mode 100644
index 00000000..eb5dc86a
--- /dev/null
+++ b/apps/api/src/app/supporters/supporter-aggregator.util.ts
@@ -0,0 +1,106 @@
+import { Supporter, SupporterType } from '../../entities/supporter.entity';
+import { sanitizeMessage, sanitizeName } from './supporter-sanitizer.util';
+import { PublicSupporterDto } from './supporters.service';
+
+const ANONYMOUS_NAMES = ['someone', 'anonymous', 'supporter', 'anonyme'];
+
+export class SupporterAggregator {
+  constructor(private readonly items: Supporter[]) {}
+
+  public aggregate(): PublicSupporterDto[] {
+    const groups = this.groupItems();
+
+    return Array.from(groups.values())
+      .map((group) => this.mergeGroup(group))
+      .sort((a, b) => this.compareSupporters(a, b));
+  }
+
+  private groupItems(): Map<string, Supporter[]> {
+    return this.items.reduce((groups, item) => {
+      const key = this.resolveKey(item);
+      const existing = groups.get(key) || [];
+      groups.set(key, [...existing, item]);
+      return groups;
+    }, new Map<string, Supporter[]>());
+  }
+
+  private compareSupporters(a: PublicSupporterDto, b: PublicSupporterDto): number {
+    const coffeeDiff = b.coffees - a.coffees;
+    if (coffeeDiff !== 0) {
+      return coffeeDiff;
+    }
+
+    const subDiff = (b.isSubscriber ? 1 : 0) - (a.isSubscriber ? 1 : 0);
+    if (subDiff !== 0) {
+      return subDiff;
+    }
+
+    return new Date(b.supportDate).getTime() - new Date(a.supportDate).getTime();
+  }
+
+  private mergeGroup(group: Supporter[]): PublicSupporterDto {
+    const sorted = [...group].sort((a, b) => b.support_date.getTime() - a.support_date.getTime());
+    const latest = sorted[0];
+    const isSubscriber = group.some((s) => s.type === SupporterType.Membership);
+
+    return {
+      id: latest.id,
+      name: this.findBestName(sorted),
+      coffees: this.computeTotalCoffees(group, isSubscriber),
+      isSubscriber,
+      monthlyCoffees: this.computeMonthlyCoffees(group, isSubscriber),
+      supportDate: latest.support_date.toISOString(),
+      message: sanitizeMessage(sorted.find((s) => s.message?.trim())?.message),
+    };
+  }
+
+  private computeTotalCoffees(group: Supporter[], isSubscriber: boolean): number {
+    const donationSum = group
+      .filter((s) => s.type === SupporterType.Donation)
+      .reduce((acc, curr) => acc + curr.coffees, 0);
+
+    if (donationSum > 0) {
+      return donationSum;
+    }
+
+    return this.computeMonthlyCoffees(group, isSubscriber) || 1;
+  }
+
+  private computeMonthlyCoffees(group: Supporter[], isSubscriber: boolean): number | undefined {
+    if (!isSubscriber) {
+      return undefined;
+    }
+
+    return group
+      .filter((s) => s.type === SupporterType.Membership)
+      .reduce((acc, curr) => acc + curr.coffees, 0);
+  }
+
+  private resolveKey(item: Supporter): string {
+    if (item.email?.trim()) {
+      return `email:${item.email.trim().toLowerCase()}`;
+    }
+
+    const name = item.name.trim().toLowerCase();
+    const isAnonymous = !name || ANONYMOUS_NAMES.includes(name);
+
+    if (isAnonymous) {
+      return `id:${item.id}`;
+    }
+
+    return `name:${name}`;
+  }
+
+  private findBestName(sorted: Supporter[]): string {
+    const valid = sorted.find(
+      (s) => s.name && !ANONYMOUS_NAMES.includes(s.name.trim().toLowerCase())
+    );
+
+    const chosen = valid || sorted[0];
+    return sanitizeName(chosen.name);
+  }
+}
+
+export function aggregateSupporters(items: Supporter[]): PublicSupporterDto[] {
+  return new SupporterAggregator(items).aggregate();
+}
diff --git a/apps/api/src/app/supporters/supporter-sanitizer.util.spec.ts b/apps/api/src/app/supporters/supporter-sanitizer.util.spec.ts
new file mode 100644
index 00000000..a8969988
--- /dev/null
+++ b/apps/api/src/app/supporters/supporter-sanitizer.util.spec.ts
@@ -0,0 +1,110 @@
+import {
+  isPrivateSupporter,
+  isProfaneOrSpam,
+  sanitizeMessage,
+  sanitizeName,
+} from './supporter-sanitizer.util';
+
+describe('The supporter-sanitizer utility', () => {
+  describe('The isProfaneOrSpam() function', () => {
+    describe('When text is clean', () => {
+      it('should return false', () => {
+        expect(isProfaneOrSpam('Alexandre')).toBe(false);
+        expect(isProfaneOrSpam('Merci pour votre super travail !')).toBe(false);
+      });
+    });
+
+    describe('When text contains web links or domain names', () => {
+      it('should detect URLs and domain extensions', () => {
+        expect(isProfaneOrSpam('https://scam.com')).toBe(true);
+        expect(isProfaneOrSpam('visit my site www.crypto.io')).toBe(true);
+        expect(isProfaneOrSpam('join t.me/free_crypto')).toBe(true);
+      });
+    });
+
+    describe('When text contains forbidden profanities', () => {
+      it('should return true for profanities regardless of accents and case', () => {
+        expect(isProfaneOrSpam('gros connard')).toBe(true);
+        expect(isProfaneOrSpam('espèce d\'enculé')).toBe(true);
+        expect(isProfaneOrSpam('FUCK THIS')).toBe(true);
+      });
+    });
+  });
+
+  describe('The sanitizeName() function', () => {
+    describe('When supporter is marked as private', () => {
+      it('should return Anonyme', () => {
+        expect(sanitizeName('John Doe', true)).toBe('Anonyme');
+      });
+    });
+
+    describe('When supporter name is generic, empty, or offensive', () => {
+      it('should return Anonyme', () => {
+        expect(sanitizeName('   ')).toBe('Anonyme');
+        expect(sanitizeName('""')).toBe('Anonyme');
+        expect(sanitizeName("''")).toBe('Anonyme');
+        expect(sanitizeName('Someone')).toBe('Anonyme');
+        expect(sanitizeName('Anonymous')).toBe('Anonyme');
+        expect(sanitizeName('https://spam.com')).toBe('Anonyme');
+        expect(sanitizeName('Hitler')).toBe('Anonyme');
+      });
+    });
+
+    describe('When supporter name is an email address', () => {
+      it('should return Anonyme to protect privacy', () => {
+        expect(sanitizeName('john.doe@example.com')).toBe('Anonyme');
+      });
+    });
+
+    describe('When supporter name is excessively long', () => {
+      it('should truncate to 30 characters', () => {
+        const longName = 'ThisIsAVeryLongSupporterNameThatExceedsTheLimit';
+        const result = sanitizeName(longName);
+        expect(result.length).toBeLessThanOrEqual(30);
+        expect(result.endsWith('...')).toBe(true);
+      });
+    });
+  });
+
+  describe('The sanitizeMessage() function', () => {
+    describe('When message is private or contains spam/profanity', () => {
+      it('should return undefined', () => {
+        expect(sanitizeMessage('Nice app', true)).toBeUndefined();
+        expect(sanitizeMessage('Visit https://gambling.com')).toBeUndefined();
+        expect(sanitizeMessage('salope')).toBeUndefined();
+      });
+    });
+
+    describe('When message is clean', () => {
+      it('should return the trimmed message', () => {
+        expect(sanitizeMessage('  Bravo pour cette app !  ')).toBe('Bravo pour cette app !');
+      });
+    });
+
+    describe('When message is excessively long', () => {
+      it('should truncate to 120 characters', () => {
+        const longMsg = 'a'.repeat(200);
+        const result = sanitizeMessage(longMsg);
+        expect(result?.length).toBeLessThanOrEqual(120);
+        expect(result?.endsWith('...')).toBe(true);
+      });
+    });
+  });
+
+  describe('The isPrivateSupporter() function', () => {
+    describe('When data has private flags set to true', () => {
+      it('should return true', () => {
+        expect(isPrivateSupporter({ is_private: true })).toBe(true);
+        expect(isPrivateSupporter({ payer_is_private: 'true' })).toBe(true);
+        expect(isPrivateSupporter({ is_anonymous: '1' })).toBe(true);
+      });
+    });
+
+    describe('When data has no private flags', () => {
+      it('should return false', () => {
+        expect(isPrivateSupporter({})).toBe(false);
+        expect(isPrivateSupporter({ is_private: false })).toBe(false);
+      });
+    });
+  });
+});
diff --git a/apps/api/src/app/supporters/supporter-sanitizer.util.ts b/apps/api/src/app/supporters/supporter-sanitizer.util.ts
new file mode 100644
index 00000000..5ba917ca
--- /dev/null
+++ b/apps/api/src/app/supporters/supporter-sanitizer.util.ts
@@ -0,0 +1,87 @@
+const SPAM_OR_LINK_REGEX =
+  /(https?:\/\/|www\.|t\.me\/|discord\.gg\/|0x[a-fA-F0-9]{20,}|\.(com|org|net|io|xyz|ru|cn|top|app|dev|link|me|vip)\b)/i;
+
+const PROFANITIES = [
+  'hitler',
+  'nazi',
+  'nigger',
+  'nigga',
+  'faggot',
+  'pedophile',
+  'putain',
+  'salope',
+  'connard',
+  'encule',
+  'enculé',
+  'bitch',
+  'whore',
+  'cunt',
+  'dick',
+  'fuck',
+];
+
+export function isProfaneOrSpam(text: string): boolean {
+  if (!text) {
+    return false;
+  }
+
+  if (SPAM_OR_LINK_REGEX.test(text)) {
+    return true;
+  }
+
+  const normalized = text
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+
+  return PROFANITIES.some((word) => normalized.includes(word));
+}
+
+export function sanitizeName(rawName?: string | null, isPrivate = false): string {
+  if (isPrivate || !rawName) {
+    return 'Anonyme';
+  }
+
+  const trimmed = rawName.replace(/^["']|["']$/g, '').trim();
+
+  if (
+    !trimmed ||
+    trimmed.includes('@') ||
+    isProfaneOrSpam(trimmed) ||
+    trimmed.toLowerCase() === 'someone' ||
+    trimmed.toLowerCase() === 'anonymous' ||
+    trimmed.toLowerCase() === 'anonyme' ||
+    trimmed.toLowerCase() === 'supporter'
+  ) {
+    return 'Anonyme';
+  }
+
+  return trimmed.length > 30 ? `${trimmed.slice(0, 27)}...` : trimmed;
+}
+
+export function sanitizeMessage(rawMessage?: string | null, isPrivate = false): string | undefined {
+  if (isPrivate || !rawMessage) {
+    return undefined;
+  }
+
+  const trimmed = rawMessage.replace(/^["']|["']$/g, '').trim();
+  if (!trimmed || isProfaneOrSpam(trimmed)) {
+    return undefined;
+  }
+
+  return trimmed.length > 120 ? `${trimmed.slice(0, 117)}...` : trimmed;
+}
+
+export function isPrivateSupporter(data: Record<string, unknown>): boolean {
+  const flags = [
+    data['is_private'],
+    data['payer_is_private'],
+    data['is_anonymous'],
+    data['is_hidden'],
+    data['private'],
+  ];
+
+  return flags.some(
+    (flag) => flag === true || flag === 'true' || flag === '1' || flag === 1
+  );
+}
diff --git a/apps/api/src/app/supporters/supporters.controller.spec.ts b/apps/api/src/app/supporters/supporters.controller.spec.ts
new file mode 100644
index 00000000..0eabfae6
--- /dev/null
+++ b/apps/api/src/app/supporters/supporters.controller.spec.ts
@@ -0,0 +1,58 @@
+import { mock, MockProxy } from 'jest-mock-extended';
+import { SupportersController } from './supporters.controller';
+import { PublicSupportersResponse, SupportersService } from './supporters.service';
+
+describe('The SupportersController class', () => {
+  let controller: SupportersController;
+  let supportersService: MockProxy<SupportersService>;
+
+  beforeEach(() => {
+    supportersService = mock<SupportersService>();
+    controller = new SupportersController(supportersService);
+  });
+
+  describe('The getSupporters() method', () => {
+    describe('When called by client', () => {
+      it('should delegate to supportersService.getPublicSupporters()', async () => {
+        const mockResponse: PublicSupportersResponse = {
+          subscribers: [],
+          supporters: [
+            {
+              id: '1',
+              name: 'John',
+              coffees: 1,
+              supportDate: '2024-01-01',
+            },
+          ],
+          totalCoffeesCount: 1,
+          hasActiveSupporters: true,
+        };
+
+        supportersService.getPublicSupporters.mockResolvedValue(mockResponse);
+
+        const result = await controller.getSupporters();
+
+        expect(result).toStrictEqual(mockResponse);
+        expect(supportersService.getPublicSupporters).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('The handleWebhook() method', () => {
+    describe('When a webhook payload is received', () => {
+      it('should pass payload and signature to supportersService and return success', async () => {
+        const payload = { test: 'data' };
+        const signature = 'test-signature';
+
+        const result = await controller.handleWebhook(payload, signature);
+
+        expect(result).toStrictEqual({ success: true });
+        expect(supportersService.handleWebhook).toHaveBeenCalledWith(
+          payload,
+          JSON.stringify(payload),
+          signature
+        );
+      });
+    });
+  });
+});
diff --git a/apps/api/src/app/supporters/supporters.controller.ts b/apps/api/src/app/supporters/supporters.controller.ts
new file mode 100644
index 00000000..0b20ac35
--- /dev/null
+++ b/apps/api/src/app/supporters/supporters.controller.ts
@@ -0,0 +1,25 @@
+import { Body, Controller, Get, Headers, HttpCode, HttpStatus, Post, type RawBodyRequest, Req } from '@nestjs/common';
+import { Request } from 'express';
+import { PublicSupportersResponse, SupportersService } from './supporters.service';
+
+@Controller('supporters')
+export class SupportersController {
+  constructor(private readonly supportersService: SupportersService) {}
+
+  @Get()
+  public async getSupporters(): Promise<PublicSupportersResponse> {
+    return this.supportersService.getPublicSupporters();
+  }
+
+  @Post('webhook')
+  @HttpCode(HttpStatus.OK)
+  public async handleWebhook(
+    @Body() payload: Record<string, unknown>,
+    @Headers('x-signature-sha256') signature: string,
+    @Req() req?: RawBodyRequest<Request>
+  ): Promise<{ success: boolean }> {
+    const rawBody = req?.rawBody ? req.rawBody.toString('utf-8') : JSON.stringify(payload);
+    await this.supportersService.handleWebhook(payload, rawBody, signature);
+    return { success: true };
+  }
+}
diff --git a/apps/api/src/app/supporters/supporters.module.ts b/apps/api/src/app/supporters/supporters.module.ts
new file mode 100644
index 00000000..2ff963a6
--- /dev/null
+++ b/apps/api/src/app/supporters/supporters.module.ts
@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Supporter } from '../../entities/supporter.entity';
+import { SupportersController } from './supporters.controller';
+import { SupportersService } from './supporters.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Supporter])],
+  controllers: [SupportersController],
+  providers: [SupportersService],
+  exports: [SupportersService],
+})
+export class SupportersModule {}
diff --git a/apps/api/src/app/supporters/supporters.service.spec.ts b/apps/api/src/app/supporters/supporters.service.spec.ts
new file mode 100644
index 00000000..6279dc8a
--- /dev/null
+++ b/apps/api/src/app/supporters/supporters.service.spec.ts
@@ -0,0 +1,419 @@
+import * as crypto from 'crypto';
+import { UnauthorizedException } from '@nestjs/common';
+import { mock, MockProxy } from 'jest-mock-extended';
+import { Repository } from 'typeorm';
+import { Supporter, SupporterType } from '../../entities/supporter.entity';
+import { SupportersService } from './supporters.service';
+
+describe('The SupportersService class', () => {
+  let service: SupportersService;
+  let supporterRepository: MockProxy<Repository<Supporter>>;
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    process.env = { ...originalEnv };
+    supporterRepository = mock<Repository<Supporter>>();
+    service = new SupportersService(supporterRepository);
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+  });
+
+  describe('The getPublicSupporters() method', () => {
+    describe('When supporters and subscribers exist in the database', () => {
+      it('should partition and format public subscribers and supporters properly', async () => {
+        const mockSupporter1: Supporter = {
+          id: 'sub-1',
+          external_id: 'ext-sub-1',
+          name: 'Alice',
+          email: 'alice@example.com',
+          coffees: 2,
+          type: SupporterType.Membership,
+          is_active: true,
+          message: null,
+          support_date: new Date('2024-01-01T10:00:00Z'),
+          created_at: new Date('2024-01-01T10:00:00Z'),
+          updated_at: new Date('2024-01-01T10:00:00Z'),
+        };
+
+        const mockSupporter2: Supporter = {
+          id: 'don-1',
+          external_id: 'ext-don-1',
+          name: 'Bob',
+          email: 'bob@example.com',
+          coffees: 3,
+          type: SupporterType.Donation,
+          is_active: true,
+          message: 'Keep up the great work!',
+          support_date: new Date('2024-01-02T10:00:00Z'),
+          created_at: new Date('2024-01-02T10:00:00Z'),
+          updated_at: new Date('2024-01-02T10:00:00Z'),
+        };
+
+        supporterRepository.find.mockResolvedValue([mockSupporter1, mockSupporter2]);
+
+        const result = await service.getPublicSupporters();
+
+        expect(result).toStrictEqual({
+          subscribers: [],
+          supporters: [
+            {
+              id: 'don-1',
+              name: 'Bob',
+              coffees: 3,
+              isSubscriber: false,
+              monthlyCoffees: undefined,
+              supportDate: '2024-01-02T10:00:00.000Z',
+              message: 'Keep up the great work!',
+            },
+            {
+              id: 'sub-1',
+              name: 'Alice',
+              coffees: 2,
+              isSubscriber: true,
+              monthlyCoffees: 2,
+              supportDate: '2024-01-01T10:00:00.000Z',
+              message: undefined,
+            },
+          ],
+          totalCoffeesCount: 5,
+          hasActiveSupporters: true,
+        });
+      });
+    });
+
+    describe('When a user has made multiple separate donations', () => {
+      it('should aggregate donations by email and sum the coffee counts', async () => {
+        const donation1: Supporter = {
+          id: 'don-1',
+          name: 'Yvan',
+          email: 'yvan@example.com',
+          coffees: 10,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-01-01T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        const donation2: Supporter = {
+          id: 'don-2',
+          name: 'Yvan',
+          email: 'yvan@example.com',
+          coffees: 25,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date('2024-02-01T10:00:00Z'),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        supporterRepository.find.mockResolvedValue([donation1, donation2]);
+
+        const result = await service.getPublicSupporters();
+
+        expect(result.supporters).toStrictEqual([
+          {
+            id: 'don-2',
+            name: 'Yvan',
+            coffees: 35,
+            isSubscriber: false,
+            monthlyCoffees: undefined,
+            supportDate: '2024-02-01T10:00:00.000Z',
+            message: undefined,
+          },
+        ]);
+      });
+    });
+
+    describe('When the database has no records', () => {
+      it('should return empty collections with hasActiveSupporters set to false', async () => {
+        supporterRepository.find.mockResolvedValue([]);
+
+        const result = await service.getPublicSupporters();
+
+        expect(result).toStrictEqual({
+          subscribers: [],
+          supporters: [],
+          totalCoffeesCount: 0,
+          hasActiveSupporters: false,
+        });
+      });
+    });
+  });
+
+  describe('The handleWebhook() method', () => {
+    const testSecret = 'test-signing-secret';
+
+    function signPayload(payload: Record<string, unknown>): { rawBody: string; signature: string } {
+      process.env.BUYMEACOFFEE_WEBHOOK_SECRET = testSecret;
+      const rawBody = JSON.stringify(payload);
+      const signature = crypto.createHmac('sha256', testSecret).update(rawBody).digest('hex');
+      return { rawBody, signature };
+    }
+
+    describe('When a valid donation.created event is received', () => {
+      it('should parse and persist the new donation with active status', async () => {
+        const payload = {
+          type: 'donation.created',
+          data: {
+            transaction_id: 'pi_12345',
+            supporter_name: 'Charlie',
+            supporter_email: 'charlie@example.com',
+            coffee_count: 5,
+            support_note: 'Awesome project!',
+            created_at: 1719825600,
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.name).toBe('Charlie');
+        expect(result.coffees).toBe(5);
+        expect(result.type).toBe(SupporterType.Donation);
+        expect(result.is_active).toBe(true);
+        expect(result.message).toBe('Awesome project!');
+        expect(result.support_date).toStrictEqual(new Date(1719825600 * 1000));
+        expect(supporterRepository.save).toHaveBeenCalled();
+      });
+    });
+
+    describe('When a donation.refunded event is received', () => {
+      it('should mark the donation as inactive', async () => {
+        const payload = {
+          type: 'donation.refunded',
+          data: {
+            transaction_id: 'pi_12345',
+            supporter_name: 'Charlie',
+            status: 'refunded',
+            refunded: 'true',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        const existing: Supporter = {
+          id: 'don-1',
+          external_id: 'pi_12345',
+          name: 'Charlie',
+          coffees: 5,
+          type: SupporterType.Donation,
+          is_active: true,
+          support_date: new Date(),
+          created_at: new Date(),
+          updated_at: new Date(),
+        };
+
+        supporterRepository.findOne.mockResolvedValue(existing);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.is_active).toBe(false);
+        expect(supporterRepository.save).toHaveBeenCalledWith(
+          expect.objectContaining({ external_id: 'pi_12345', is_active: false })
+        );
+      });
+    });
+
+    describe('When a membership.started event is received', () => {
+      it('should parse and persist the membership properly', async () => {
+        const payload = {
+          type: 'membership.started',
+          data: {
+            psp_id: 'sub_999',
+            supporter_name: 'David',
+            supporter_email: 'david@example.com',
+            amount: 5,
+            status: 'active',
+            started_at: 1719825600,
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.name).toBe('David');
+        expect(result.type).toBe(SupporterType.Membership);
+        expect(result.is_active).toBe(true);
+        expect(result.external_id).toBe('sub_999');
+      });
+    });
+
+    describe('When a membership.cancelled event is received', () => {
+      it('should mark the membership as inactive', async () => {
+        const payload = {
+          type: 'membership.cancelled',
+          data: {
+            psp_id: 'sub_999',
+            supporter_name: 'David',
+            status: 'canceled',
+            canceled: 'true',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.is_active).toBe(false);
+      });
+    });
+
+    describe('When a membership webhook arrives for an existing CSV-imported member without external_id', () => {
+      it('should reconcile by email and update the existing record with the new external_id', async () => {
+        const existingCsvMember: Supporter = {
+          id: 'csv-member-uuid',
+          external_id: null,
+          name: 'David',
+          email: 'david@example.com',
+          coffees: 1,
+          type: SupporterType.Membership,
+          is_active: true,
+          support_date: new Date('2024-01-01T00:00:00Z'),
+          created_at: new Date('2024-01-01T00:00:00Z'),
+          updated_at: new Date('2024-01-01T00:00:00Z'),
+        };
+
+        const payload = {
+          type: 'membership.cancelled',
+          data: {
+            psp_id: 'sub_new_bmc_id',
+            supporter_email: 'david@example.com',
+            status: 'canceled',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne
+          .mockResolvedValueOnce(null)
+          .mockResolvedValueOnce(existingCsvMember);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.id).toBe('csv-member-uuid');
+        expect(result.external_id).toBe('sub_new_bmc_id');
+        expect(result.is_active).toBe(false);
+      });
+    });
+
+    describe('When a membership.paused event is received', () => {
+      it('should mark the membership as inactive', async () => {
+        const payload = {
+          type: 'membership.paused',
+          data: {
+            psp_id: 'sub_999',
+            status: 'paused',
+            paused: 'true',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.is_active).toBe(false);
+      });
+    });
+
+    describe('When a recurring_donation.started event is received', () => {
+      it('should categorize the recurring donation as Membership', async () => {
+        const payload = {
+          type: 'recurring_donation.started',
+          data: {
+            psp_id: 'sub_888',
+            supporter_name: 'Emma',
+            status: 'active',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.type).toBe(SupporterType.Membership);
+        expect(result.is_active).toBe(true);
+      });
+    });
+
+    describe('When a recurring_donation.cancelled event is received', () => {
+      it('should mark the recurring donation as inactive', async () => {
+        const payload = {
+          type: 'recurring_donation.cancelled',
+          data: {
+            psp_id: 'sub_888',
+            status: 'canceled',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.is_active).toBe(false);
+      });
+    });
+
+    describe('When an extra_purchase.refunded event is received', () => {
+      it('should mark the extra purchase as inactive', async () => {
+        const payload = {
+          type: 'extra_purchase.refunded',
+          data: {
+            transaction_id: 'pi_extra_1',
+            status: 'refunded',
+          },
+        };
+        const { rawBody, signature } = signPayload(payload);
+
+        supporterRepository.findOne.mockResolvedValue(null);
+        supporterRepository.create.mockImplementation((data) => data as Supporter);
+        supporterRepository.save.mockImplementation(async (data) => data as Supporter);
+
+        const result = await service.handleWebhook(payload, rawBody, signature);
+
+        expect(result.is_active).toBe(false);
+      });
+    });
+
+    describe('When webhook signature is invalid or missing', () => {
+      it('should throw an UnauthorizedException when signature is invalid', async () => {
+        process.env.BUYMEACOFFEE_WEBHOOK_SECRET = 'secret';
+
+        await expect(
+          service.handleWebhook({ test: true }, '{"test":true}', 'invalid_sig')
+        ).rejects.toThrow(UnauthorizedException);
+      });
+
+      it('should throw an UnauthorizedException when signature is missing', async () => {
+        process.env.BUYMEACOFFEE_WEBHOOK_SECRET = 'secret';
+
+        await expect(
+          service.handleWebhook({ test: true }, '{"test":true}', undefined)
+        ).rejects.toThrow(UnauthorizedException);
+      });
+    });
+  });
+});
+
diff --git a/apps/api/src/app/supporters/supporters.service.ts b/apps/api/src/app/supporters/supporters.service.ts
new file mode 100644
index 00000000..72d42c81
--- /dev/null
+++ b/apps/api/src/app/supporters/supporters.service.ts
@@ -0,0 +1,104 @@
+import { Injectable, Logger, UnauthorizedException } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { Supporter, SupporterType } from '../../entities/supporter.entity';
+import { BmcWebhookPayload, verifyWebhookSignature } from './bmc-webhook-parser.util';
+import { aggregateSupporters } from './supporter-aggregator.util';
+
+export interface PublicSupporterDto {
+  id: string;
+  name: string;
+  coffees: number;
+  isSubscriber?: boolean;
+  monthlyCoffees?: number;
+  supportDate: string;
+  message?: string;
+}
+
+export interface PublicSubscriberDto {
+  id: string;
+  name: string;
+  durationType: string;
+  membershipDate: string;
+  coffees: number;
+}
+
+export interface PublicSupportersResponse {
+  subscribers: PublicSubscriberDto[];
+  supporters: PublicSupporterDto[];
+  totalCoffeesCount: number;
+  hasActiveSupporters: boolean;
+}
+
+@Injectable()
+export class SupportersService {
+  private readonly logger = new Logger(SupportersService.name);
+
+  constructor(
+    @InjectRepository(Supporter)
+    private readonly supporterRepository: Repository<Supporter>
+  ) {}
+
+  public async getPublicSupporters(): Promise<PublicSupportersResponse> {
+    const activeItems = await this.supporterRepository.find({
+      where: { is_active: true },
+      order: { support_date: 'DESC' },
+    });
+    const totalCoffeesCount = activeItems.reduce((acc, item) => acc + item.coffees, 0);
+    const unifiedSupporters = aggregateSupporters(activeItems);
+
+    return {
+      subscribers: [],
+      supporters: unifiedSupporters,
+      totalCoffeesCount,
+      hasActiveSupporters: unifiedSupporters.length > 0,
+    };
+  }
+
+  public async handleWebhook(
+    payload: Record<string, unknown>,
+    rawBody?: string,
+    signature?: string
+  ): Promise<Supporter> {
+    if (!rawBody || !signature || !verifyWebhookSignature(rawBody, signature)) {
+      this.logger.warn('Received invalid or missing Buy Me a Coffee webhook signature');
+      throw new UnauthorizedException('Invalid webhook signature');
+    }
+
+    const supporterData = new BmcWebhookPayload(payload).toSupporter();
+    return this.upsertSupporter(supporterData);
+  }
+
+
+  private async upsertSupporter(data: Partial<Supporter>): Promise<Supporter> {
+    const existing = await this.findExistingSupporter(data);
+    if (existing) {
+      Object.assign(existing, data);
+      return this.supporterRepository.save(existing);
+    }
+
+    const created = this.supporterRepository.create(data);
+    return this.supporterRepository.save(created);
+  }
+
+  private async findExistingSupporter(data: Partial<Supporter>): Promise<Supporter | null> {
+    if (data.external_id) {
+      const byExternalId = await this.supporterRepository.findOne({
+        where: { external_id: data.external_id },
+      });
+
+      if (byExternalId) {
+        return byExternalId;
+      }
+    }
+
+    if (data.email && data.type === SupporterType.Membership) {
+      return this.supporterRepository.findOne({
+        where: { email: data.email, type: SupporterType.Membership },
+        order: { support_date: 'DESC' },
+      });
+    }
+
+    return null;
+  }
+}
diff --git a/apps/api/src/config/database.config.ts b/apps/api/src/config/database.config.ts
index 9c11d0db..f8fd5785 100644
--- a/apps/api/src/config/database.config.ts
+++ b/apps/api/src/config/database.config.ts
@@ -11,6 +11,7 @@ import { NotificationPreferences } from '../entities/notification-preferences.en
 import { PushDeviceToken } from '../entities/push-device-token.entity';
 import { AlertEvent } from '../entities/alert-event.entity';
 import { UserSession } from '../entities/user-session.entity';
+import { Supporter } from '../entities/supporter.entity';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -65,7 +66,7 @@ export const getDatabaseConfig = (): TypeOrmModuleOptions => {
     username: databaseUser,
     password: databasePassword,
     database: databaseName,
-    entities: [User, Vehicle, TelegramConfig, UserConsent, Waitlist, FeatureAnnouncement, UserDismissedAnnouncement, NotificationPreferences, PushDeviceToken, AlertEvent, UserSession],
+    entities: [User, Vehicle, TelegramConfig, UserConsent, Waitlist, FeatureAnnouncement, UserDismissedAnnouncement, NotificationPreferences, PushDeviceToken, AlertEvent, UserSession, Supporter],
     synchronize,
     migrationsRun,
     migrations: ['dist/migrations/*.js'],
diff --git a/apps/api/src/entities/supporter.entity.spec.ts b/apps/api/src/entities/supporter.entity.spec.ts
new file mode 100644
index 00000000..ba02a2d2
--- /dev/null
+++ b/apps/api/src/entities/supporter.entity.spec.ts
@@ -0,0 +1,12 @@
+import { getMetadataArgsStorage } from 'typeorm';
+import { Supporter } from './supporter.entity';
+
+describe('The Supporter entity', () => {
+  it('should define an index on type and is_active columns', () => {
+    const index = getMetadataArgsStorage().indices.find(
+      (metadata) => metadata.target === Supporter
+    );
+
+    expect(index?.columns).toStrictEqual(['type', 'is_active']);
+  });
+});
diff --git a/apps/api/src/entities/supporter.entity.ts b/apps/api/src/entities/supporter.entity.ts
new file mode 100644
index 00000000..f294aa02
--- /dev/null
+++ b/apps/api/src/entities/supporter.entity.ts
@@ -0,0 +1,43 @@
+import { Column, CreateDateColumn, Entity, Index, PrimaryGeneratedColumn, UpdateDateColumn } from 'typeorm';
+
+export enum SupporterType {
+  Donation = 'donation',
+  Membership = 'membership',
+}
+
+@Entity('supporters')
+@Index(['type', 'is_active'])
+export class Supporter {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  @Column({ type: 'varchar', length: 255, nullable: true, unique: true })
+  external_id?: string | null;
+
+  @Column({ type: 'varchar', length: 255 })
+  name!: string;
+
+  @Column({ type: 'varchar', length: 255, nullable: true })
+  email?: string | null;
+
+  @Column({ type: 'int', default: 1 })
+  coffees!: number;
+
+  @Column({ type: 'enum', enum: SupporterType, default: SupporterType.Donation })
+  type!: SupporterType;
+
+  @Column({ type: 'boolean', default: true })
+  is_active!: boolean;
+
+  @Column({ type: 'text', nullable: true })
+  message?: string | null;
+
+  @Column({ type: 'timestamp with time zone' })
+  support_date!: Date;
+
+  @CreateDateColumn()
+  created_at!: Date;
+
+  @UpdateDateColumn()
+  updated_at!: Date;
+}
diff --git a/apps/api/src/migrations/1783000000000-CreateSupportersTable.ts b/apps/api/src/migrations/1783000000000-CreateSupportersTable.ts
new file mode 100644
index 00000000..e6e89748
--- /dev/null
+++ b/apps/api/src/migrations/1783000000000-CreateSupportersTable.ts
@@ -0,0 +1,37 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class CreateSupportersTable1783000000000 implements MigrationInterface {
+  name = 'CreateSupportersTable1783000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TYPE "public"."supporters_type_enum" AS ENUM('donation', 'membership')`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "supporters" (
+        "id" uuid NOT NULL DEFAULT uuid_generate_v4(),
+        "external_id" character varying(255),
+        "name" character varying(255) NOT NULL,
+        "email" character varying(255),
+        "coffees" integer NOT NULL DEFAULT 1,
+        "type" "public"."supporters_type_enum" NOT NULL DEFAULT 'donation',
+        "is_active" boolean NOT NULL DEFAULT true,
+        "message" text,
+        "support_date" TIMESTAMP WITH TIME ZONE NOT NULL,
+        "created_at" TIMESTAMP NOT NULL DEFAULT now(),
+        "updated_at" TIMESTAMP NOT NULL DEFAULT now(),
+        CONSTRAINT "UQ_supporters_external_id" UNIQUE ("external_id"),
+        CONSTRAINT "PK_supporters_id" PRIMARY KEY ("id")
+      )`
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_supporters_type_is_active" ON "supporters" ("type", "is_active")`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX "public"."IDX_supporters_type_is_active"`);
+    await queryRunner.query(`DROP TABLE "supporters"`);
+    await queryRunner.query(`DROP TYPE "public"."supporters_type_enum"`);
+  }
+}
diff --git a/apps/mobile/src/core/navigation.ts b/apps/mobile/src/core/navigation.ts
index f3ec37ae..df84419b 100644
--- a/apps/mobile/src/core/navigation.ts
+++ b/apps/mobile/src/core/navigation.ts
@@ -3,6 +3,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 export enum AppTab {
   Dashboard = 'dashboard',
   Alerts = 'alerts',
+  Supporters = 'supporters',
   Settings = 'settings',
 }
 
@@ -22,6 +23,7 @@ export type MainStackParamList = {
 export type AppTabParamList = {
   Dashboard: undefined;
   Alerts: undefined;
+  Supporters: undefined;
   Settings: undefined;
 };
 
diff --git a/apps/mobile/src/core/shell/MainScreen.tsx b/apps/mobile/src/core/shell/MainScreen.tsx
index 0d94c63a..8edb526f 100644
--- a/apps/mobile/src/core/shell/MainScreen.tsx
+++ b/apps/mobile/src/core/shell/MainScreen.tsx
@@ -18,6 +18,7 @@ import { DashboardScreen } from '../../screens/DashboardScreen';
 import { DeleteAccountScreen } from '../../screens/DeleteAccountScreen';
 import { OnboardingScreen } from '../../screens/OnboardingScreen';
 import { SettingsScreen } from '../../screens/SettingsScreen';
+import { SupportersScreen } from '../../screens/SupportersScreen';
 import { TelegramSettingsScreen } from '../../screens/TelegramSettingsScreen';
 import { VehicleDetailScreen } from '../../screens/VehicleDetailScreen';
 
@@ -98,6 +99,14 @@ function AppTabs({ onLogout }: { onLogout(): Promise<void> }): JSX.Element {
           tabBarIcon: ({ color, size }) => <Icon name="bell.fill" color={color} size={size} />,
         }}
       />
+      <Tabs.Screen
+        name="Supporters"
+        component={SupportersScreen}
+        options={{
+          title: t('tabs.supporters'),
+          tabBarIcon: ({ color, size }) => <Icon name="cup.and.saucer.fill" color={color} size={size} />,
+        }}
+      />
       <Tabs.Screen
         name="Settings"
         options={{
diff --git a/apps/mobile/src/core/ui/Icon.tsx b/apps/mobile/src/core/ui/Icon.tsx
index 37bf0268..327be5d8 100644
--- a/apps/mobile/src/core/ui/Icon.tsx
+++ b/apps/mobile/src/core/ui/Icon.tsx
@@ -29,12 +29,14 @@ const ioniconsFallback: Record<string, keyof typeof Ionicons.glyphMap> = {
   'bubble.left.and.bubble.right.fill': 'chatbubbles',
   'checkmark.shield.fill': 'shield-checkmark',
   'chevron.right': 'chevron-forward',
+  'crown.fill': 'trophy',
   'cup.and.saucer.fill': 'cafe',
   'doc.text.fill': 'document-text',
   'envelope.fill': 'mail',
   'exclamationmark.shield.fill': 'shield-half',
   'exclamationmark.triangle.fill': 'warning',
   'gearshape.fill': 'settings',
+  'heart.fill': 'heart',
   'key.fill': 'key',
   'person.2.fill': 'people',
   'person.fill': 'person',
diff --git a/apps/mobile/src/features/supporters/data/supporters.api-repository.ts b/apps/mobile/src/features/supporters/data/supporters.api-repository.ts
new file mode 100644
index 00000000..0c0ef2fd
--- /dev/null
+++ b/apps/mobile/src/features/supporters/data/supporters.api-repository.ts
@@ -0,0 +1,11 @@
+import { ApiClientRequirements } from '../../../core/api/api-client';
+import { SupportersData } from '../domain/entities';
+import { SupportersRepositoryRequirements } from '../domain/supporters.repository.requirements';
+
+export class SupportersApiRepository implements SupportersRepositoryRequirements {
+  public constructor(private readonly client: ApiClientRequirements) {}
+
+  public async getSupporters(): Promise<SupportersData> {
+    return this.client.request<SupportersData>('/supporters');
+  }
+}
diff --git a/apps/mobile/src/features/supporters/data/supporters.mock-repository.ts b/apps/mobile/src/features/supporters/data/supporters.mock-repository.ts
new file mode 100644
index 00000000..89f80c68
--- /dev/null
+++ b/apps/mobile/src/features/supporters/data/supporters.mock-repository.ts
@@ -0,0 +1,71 @@
+import { SupportersData } from '../domain/entities';
+import { SupportersRepositoryRequirements } from '../domain/supporters.repository.requirements';
+
+export class SupportersMockRepository implements SupportersRepositoryRequirements {
+  public async getSupporters(): Promise<SupportersData> {
+    return {
+      hasActiveSupporters: true,
+      subscribers: [],
+      supporters: [
+        {
+          coffees: 35,
+          id: 'mock-don-1',
+          isSubscriber: true,
+          monthlyCoffees: 1,
+          name: 'Alexandre D.',
+          supportDate: '2026-05-29T00:00:00.000Z',
+        },
+        {
+          coffees: 10,
+          id: 'mock-don-2',
+          name: 'TeslaFan92',
+          supportDate: '2026-07-01T00:00:00.000Z',
+        },
+        {
+          coffees: 10,
+          id: 'mock-don-3',
+          isSubscriber: true,
+          monthlyCoffees: 1,
+          name: 'Sophie M.',
+          supportDate: '2026-06-15T00:00:00.000Z',
+        },
+        {
+          coffees: 8,
+          id: 'mock-don-4',
+          message: 'Merci pour ce travail exceptionnel sur le mode Sentinelle !',
+          name: 'Julien T.',
+          supportDate: '2026-08-04T00:00:00.000Z',
+        },
+        {
+          coffees: 8,
+          id: 'mock-don-5',
+          name: 'CyberDriver',
+          supportDate: '2026-07-02T00:00:00.000Z',
+        },
+        {
+          coffees: 5,
+          id: 'mock-don-6',
+          name: 'Maxime B.',
+          supportDate: '2026-08-14T00:00:00.000Z',
+        },
+        {
+          coffees: 3,
+          id: 'mock-don-7',
+          isSubscriber: true,
+          monthlyCoffees: 3,
+          name: 'Lucas R.',
+          supportDate: '2026-08-26T00:00:00.000Z',
+        },
+        {
+          coffees: 1,
+          id: 'mock-don-8',
+          isSubscriber: true,
+          monthlyCoffees: 1,
+          name: 'Clara P.',
+          supportDate: '2026-08-25T00:00:00.000Z',
+        },
+      ],
+      totalCoffeesCount: 78,
+    };
+  }
+}
diff --git a/apps/mobile/src/features/supporters/di.ts b/apps/mobile/src/features/supporters/di.ts
new file mode 100644
index 00000000..77e6dbd9
--- /dev/null
+++ b/apps/mobile/src/features/supporters/di.ts
@@ -0,0 +1,28 @@
+import { apiClient, tokenStore } from '../../core/api';
+import { SupportersApiRepository } from './data/supporters.api-repository';
+import { SupportersMockRepository } from './data/supporters.mock-repository';
+import { SupportersData } from './domain/entities';
+import { SupportersRepositoryRequirements } from './domain/supporters.repository.requirements';
+import { GetSupportersUseCase } from './domain/use-cases/get-supporters.use-case';
+
+class DynamicSupportersRepository implements SupportersRepositoryRequirements {
+  public constructor(
+    private readonly apiRepo: SupportersRepositoryRequirements,
+    private readonly mockRepo: SupportersRepositoryRequirements
+  ) {}
+
+  private getRepo(): SupportersRepositoryRequirements {
+    return tokenStore.isDemo() ? this.mockRepo : this.apiRepo;
+  }
+
+  public async getSupporters(): Promise<SupportersData> {
+    return this.getRepo().getSupporters();
+  }
+}
+
+export const supportersRepository = new DynamicSupportersRepository(
+  new SupportersApiRepository(apiClient),
+  new SupportersMockRepository()
+);
+
+export const getSupportersUseCase = new GetSupportersUseCase(supportersRepository);
diff --git a/apps/mobile/src/features/supporters/domain/entities.ts b/apps/mobile/src/features/supporters/domain/entities.ts
new file mode 100644
index 00000000..84c32647
--- /dev/null
+++ b/apps/mobile/src/features/supporters/domain/entities.ts
@@ -0,0 +1,24 @@
+export interface Supporter {
+  coffees: number;
+  id: string;
+  isSubscriber?: boolean;
+  message?: string;
+  monthlyCoffees?: number;
+  name: string;
+  supportDate: string;
+}
+
+export interface Subscriber {
+  coffees: number;
+  durationType: string;
+  id: string;
+  membershipDate: string;
+  name: string;
+}
+
+export interface SupportersData {
+  hasActiveSupporters: boolean;
+  subscribers: Subscriber[];
+  supporters: Supporter[];
+  totalCoffeesCount: number;
+}
diff --git a/apps/mobile/src/features/supporters/domain/supporters.repository.requirements.ts b/apps/mobile/src/features/supporters/domain/supporters.repository.requirements.ts
new file mode 100644
index 00000000..2e3dda5e
--- /dev/null
+++ b/apps/mobile/src/features/supporters/domain/supporters.repository.requirements.ts
@@ -0,0 +1,5 @@
+import { SupportersData } from './entities';
+
+export interface SupportersRepositoryRequirements {
+  getSupporters(): Promise<SupportersData>;
+}
diff --git a/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.spec.ts b/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.spec.ts
new file mode 100644
index 00000000..d494bf0d
--- /dev/null
+++ b/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.spec.ts
@@ -0,0 +1,34 @@
+import { mock } from 'jest-mock-extended';
+import { GetSupportersUseCase } from './get-supporters.use-case';
+import { SupportersRepositoryRequirements } from '../supporters.repository.requirements';
+import { SupportersData } from '../entities';
+
+describe('The GetSupportersUseCase class', () => {
+  describe('The execute() method', () => {
+    describe('When supporters data is requested', () => {
+      it('should return supporters data from the repository', async () => {
+        const mockRepo = mock<SupportersRepositoryRequirements>();
+        const expectedData: SupportersData = {
+          hasActiveSupporters: true,
+          subscribers: [],
+          supporters: [
+            {
+              coffees: 5,
+              id: 'sup-1',
+              name: 'Alice',
+              supportDate: '2026-08-01T00:00:00.000Z',
+            },
+          ],
+          totalCoffeesCount: 5,
+        };
+        mockRepo.getSupporters.mockResolvedValue(expectedData);
+
+        const useCase = new GetSupportersUseCase(mockRepo);
+        const result = await useCase.execute();
+
+        expect(result).toStrictEqual(expectedData);
+        expect(mockRepo.getSupporters).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
diff --git a/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.ts b/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.ts
new file mode 100644
index 00000000..c3b91a50
--- /dev/null
+++ b/apps/mobile/src/features/supporters/domain/use-cases/get-supporters.use-case.ts
@@ -0,0 +1,10 @@
+import { SupportersData } from '../entities';
+import { SupportersRepositoryRequirements } from '../supporters.repository.requirements';
+
+export class GetSupportersUseCase {
+  public constructor(private readonly repository: SupportersRepositoryRequirements) {}
+
+  public async execute(): Promise<SupportersData> {
+    return this.repository.getSupporters();
+  }
+}
diff --git a/apps/mobile/src/locales/en.json b/apps/mobile/src/locales/en.json
index 0e696e8b..c4031e49 100644
--- a/apps/mobile/src/locales/en.json
+++ b/apps/mobile/src/locales/en.json
@@ -109,7 +109,8 @@
   "settings.pushNoToken": "Push notifications cannot be enabled on this device right now. The other settings were saved.",
   "settings.pushPermissionDenied": "Push permission denied.",
   "settings.criticalAlertsUnavailable": "This option requires a SentryGuard API update.",
-  "settings.supportSection": "Support & Community",
+  "settings.communitySection": "Community & Backers",
+  "settings.supportSection": "Help & Support",
   "settings.faq": "Frequently Asked Questions",
   "settings.faqSubtitle": "Find answers to common questions",
   "settings.contactSupport": "Live Chat",
@@ -137,6 +138,18 @@
   "tabs.alerts": "Alerts",
   "tabs.dashboard": "Dashboard",
   "tabs.settings": "Settings",
+  "tabs.supporters": "Supporters",
+  "supporters.title": "Supporters & Contributors",
+  "supporters.subtitle": "SentryGuard is an independent open-source project made possible thanks to your support.",
+  "supporters.bannerTitle": "Thank you to our community",
+  "supporters.bannerDescription": "SentryGuard is powered and maintained thanks to the generosity and support of its backers.",
+  "supporters.monthlyContributors": "Monthly Contributors",
+  "supporters.monthlyBadge": "Monthly Member",
+  "supporters.member": "Member",
+  "supporters.monthlyCount": "x{{count}}/mo",
+  "supporters.donations": "Donors & Contributors",
+  "supporters.emptyTitle": "Be the first supporter!",
+  "supporters.emptyDescription": "Help fund infrastructure costs and your name will appear right here.",
   "vehicle.actions": "Actions",
   "vehicle.alertSentry": "Sentry alert",
   "vehicle.alertIntrusion": "Intrusion alert",
diff --git a/apps/mobile/src/locales/fr.json b/apps/mobile/src/locales/fr.json
index aa30b837..6fbc4ba5 100644
--- a/apps/mobile/src/locales/fr.json
+++ b/apps/mobile/src/locales/fr.json
@@ -109,7 +109,8 @@
   "settings.pushNoToken": "Les notifications push ne peuvent pas être activées sur cet appareil pour le moment. Les autres réglages sont enregistrés.",
   "settings.pushPermissionDenied": "Permission push refusée.",
   "settings.criticalAlertsUnavailable": "Cette option nécessite une mise à jour de l’API SentryGuard.",
-  "settings.supportSection": "Assistance & Communauté",
+  "settings.communitySection": "Communauté & Soutiens",
+  "settings.supportSection": "Assistance & Support",
   "settings.faq": "Foire aux questions",
   "settings.faqSubtitle": "Réponses aux questions fréquentes",
   "settings.contactSupport": "Chat en direct",
@@ -137,6 +138,18 @@
   "tabs.alerts": "Alertes",
   "tabs.dashboard": "Dashboard",
   "tabs.settings": "Réglages",
+  "tabs.supporters": "Contributeurs",
+  "supporters.title": "Donateurs & Contributeurs",
+  "supporters.subtitle": "SentryGuard est un projet open-source indépendant rendu possible grâce à vos soutiens.",
+  "supporters.bannerTitle": "Merci à la communauté",
+  "supporters.bannerDescription": "SentryGuard est propulsé et maintenu grâce à la générosité et au soutien de ses contributeurs.",
+  "supporters.monthlyContributors": "Contributeurs mensuels",
+  "supporters.monthlyBadge": "Membre mensuel",
+  "supporters.member": "Membre",
+  "supporters.monthlyCount": "x{{count}}/mois",
+  "supporters.donations": "Donateurs & Contributeurs",
+  "supporters.emptyTitle": "Soyez le premier supporter !",
+  "supporters.emptyDescription": "Aidez à financer les coûts d'infrastructure et votre pseudo apparaîtra ici.",
   "vehicle.actions": "Actions",
   "vehicle.alertSentry": "Alerte Sentinelle",
   "vehicle.alertIntrusion": "Alerte intrusion",
diff --git a/apps/mobile/src/screens/SettingsScreen.tsx b/apps/mobile/src/screens/SettingsScreen.tsx
index fdadaa2a..39dd8e70 100644
--- a/apps/mobile/src/screens/SettingsScreen.tsx
+++ b/apps/mobile/src/screens/SettingsScreen.tsx
@@ -58,7 +58,7 @@ export function SettingsScreen({ onLogout }: SettingsScreenProps): JSX.Element {
   const crispWebsiteId = resolveCrispWebsiteId();
   const discordUrl = resolveDiscordUrl();
   const supportEmail = resolveSupportEmail();
-  const hasSupportLinks = Boolean(faqUrl || crispWebsiteId || discordUrl || supportEmail);
+  const hasSupportLinks = Boolean(faqUrl || crispWebsiteId || supportEmail);
 
   const navigation = useNavigation<NativeStackNavigationProp<MainStackParamList>>();
   const statusMessage =
@@ -154,6 +154,18 @@ export function SettingsScreen({ onLogout }: SettingsScreenProps): JSX.Element {
         <ListRow title={t('settings.deleteAccount')} showChevron onPress={() => navigation.navigate('DeleteAccount')} />
       </ListSection>
 
+      {discordUrl ? (
+        <ListSection header={t('settings.communitySection')}>
+          <ListRow
+            icon="person.2.fill"
+            title={t('settings.discordCommunity')}
+            subtitle={t('settings.discordCommunitySubtitle')}
+            showChevron
+            onPress={() => void openDiscordCommunity()}
+          />
+        </ListSection>
+      ) : null}
+
       {hasSupportLinks ? (
         <ListSection header={t('settings.supportSection')}>
           {faqUrl ? (
@@ -174,15 +186,6 @@ export function SettingsScreen({ onLogout }: SettingsScreenProps): JSX.Element {
               onPress={() => void openCrispSupport(profile?.email, profile?.full_name)}
             />
           ) : null}
-          {discordUrl ? (
-            <ListRow
-              icon="person.2.fill"
-              title={t('settings.discordCommunity')}
-              subtitle={t('settings.discordCommunitySubtitle')}
-              showChevron
-              onPress={() => void openDiscordCommunity()}
-            />
-          ) : null}
           {supportEmail ? (
             <ListRow
               icon="envelope.fill"
diff --git a/apps/mobile/src/screens/SupportersScreen.tsx b/apps/mobile/src/screens/SupportersScreen.tsx
new file mode 100644
index 00000000..c2bd39d6
--- /dev/null
+++ b/apps/mobile/src/screens/SupportersScreen.tsx
@@ -0,0 +1,166 @@
+import { useQuery } from '@tanstack/react-query';
+import type { JSX } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native';
+
+import { screenPadding, spacing } from '../core/design/metrics';
+import { TextVariant } from '../core/design/typography';
+import { useScreenTopInset } from '../core/design/use-screen-inset';
+import { useThemeColors } from '../core/theme';
+import { AppText, Icon, Surface } from '../core/ui';
+import { getSupportersUseCase } from '../features/supporters/di';
+import { SupporterCard } from './supporters/components/SupporterCard';
+
+export function SupportersScreen(): JSX.Element {
+  const { i18n, t } = useTranslation();
+  const colors = useThemeColors();
+  const topInset = useScreenTopInset();
+
+  const supportersQuery = useQuery({
+    queryFn: () => getSupportersUseCase.execute(),
+    queryKey: ['supporters'],
+    staleTime: 30000,
+  });
+
+  const data = supportersQuery.data;
+  const supporters = data?.supporters ?? [];
+  const hasSupporters = supporters.length > 0;
+
+  return (
+    <ScrollView
+      style={{ backgroundColor: colors.systemGroupedBackground, flex: 1 }}
+      contentContainerStyle={[
+        styles.content,
+        {
+          paddingTop: topInset + spacing.sm,
+          paddingBottom: spacing.xxl * 4,
+        },
+      ]}
+      contentInsetAdjustmentBehavior="automatic"
+      showsVerticalScrollIndicator={true}
+      refreshControl={
+        <RefreshControl
+          refreshing={supportersQuery.isRefetching}
+          onRefresh={() => void supportersQuery.refetch()}
+          tintColor={colors.secondaryLabel}
+        />
+      }
+    >
+      <View style={styles.header}>
+        <AppText variant={TextVariant.LargeTitle} style={styles.title}>
+          {t('supporters.title')}
+        </AppText>
+        <AppText variant={TextVariant.Subhead} color={colors.secondaryLabel}>
+          {t('supporters.subtitle')}
+        </AppText>
+      </View>
+
+      <Surface style={styles.bannerCard}>
+        <View style={styles.bannerHeader}>
+          <View style={[styles.iconCircle, { backgroundColor: colors.warningSurface }]}>
+            <Icon name="heart.fill" size={20} color={colors.warningFill} />
+          </View>
+          <View style={styles.bannerText}>
+            <AppText variant={TextVariant.Headline}>
+              {t('supporters.bannerTitle')}
+            </AppText>
+            <AppText variant={TextVariant.Footnote} color={colors.secondaryLabel}>
+              {t('supporters.bannerDescription')}
+            </AppText>
+          </View>
+        </View>
+      </Surface>
+
+      {supporters.length > 0 ? (
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <Icon name="cup.and.saucer.fill" size={18} color={colors.accent} />
+            <AppText variant={TextVariant.Title3}>
+              {t('supporters.donations')}
+            </AppText>
+          </View>
+          <View style={styles.cardsList}>
+            {supporters.map((supporter) => (
+              <SupporterCard
+                key={supporter.id}
+                supporter={supporter}
+                language={i18n.language}
+              />
+            ))}
+          </View>
+        </View>
+      ) : null}
+
+      {!hasSupporters && !supportersQuery.isLoading ? (
+        <Surface style={styles.emptyCard}>
+          <Icon name="cup.and.saucer.fill" size={32} color={colors.secondaryLabel} />
+          <AppText variant={TextVariant.Headline} style={styles.emptyTitle}>
+            {t('supporters.emptyTitle')}
+          </AppText>
+          <AppText variant={TextVariant.Subhead} color={colors.secondaryLabel} style={styles.emptyText}>
+            {t('supporters.emptyDescription')}
+          </AppText>
+        </Surface>
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardsList: {
+    gap: spacing.sm,
+  },
+  content: {
+    gap: spacing.xl,
+    paddingBottom: spacing.xxl * 2,
+    paddingHorizontal: screenPadding,
+    paddingTop: spacing.sm,
+  },
+  bannerCard: {
+    gap: spacing.md,
+  },
+  bannerHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.md,
+  },
+  bannerText: {
+    flex: 1,
+    gap: spacing.xs,
+  },
+  emptyCard: {
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.xl,
+  },
+  emptyDescription: {
+    textAlign: 'center',
+  },
+  emptyText: {
+    textAlign: 'center',
+  },
+  emptyTitle: {
+    textAlign: 'center',
+  },
+  header: {
+    gap: spacing.xs,
+  },
+  iconCircle: {
+    alignItems: 'center',
+    borderRadius: 999,
+    height: 40,
+    justifyContent: 'center',
+    width: 40,
+  },
+  section: {
+    gap: spacing.md,
+  },
+  sectionHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.sm,
+  },
+  title: {
+    paddingTop: spacing.sm,
+  },
+});
diff --git a/apps/mobile/src/screens/supporters/components/SupporterCard.tsx b/apps/mobile/src/screens/supporters/components/SupporterCard.tsx
new file mode 100644
index 00000000..1c672b09
--- /dev/null
+++ b/apps/mobile/src/screens/supporters/components/SupporterCard.tsx
@@ -0,0 +1,215 @@
+import type { JSX } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, View } from 'react-native';
+
+import { radius, spacing } from '../../../core/design/metrics';
+import { TextVariant } from '../../../core/design/typography';
+import { useThemeColors } from '../../../core/theme';
+import { AppText, Icon, Surface } from '../../../core/ui';
+import { Supporter } from '../../../features/supporters/domain/entities';
+
+interface SupporterCardProps {
+  language: string;
+  supporter: Supporter;
+}
+
+export function SupporterCard({ language, supporter }: SupporterCardProps): JSX.Element {
+  const { t } = useTranslation();
+  const colors = useThemeColors();
+  const isVip = supporter.coffees >= 10;
+  const initial = (supporter.name || 'A').charAt(0).toUpperCase();
+
+  return (
+    <Surface
+      style={[
+        styles.card,
+        isVip ? { borderColor: colors.warningBorder, borderWidth: 1.5 } : undefined,
+      ]}
+    >
+      <View style={styles.header}>
+        <View
+          style={[
+            styles.avatar,
+            {
+              backgroundColor: isVip ? colors.warningSurface : colors.secondaryFill,
+              borderColor: isVip ? colors.warningBorder : colors.separator,
+            },
+          ]}
+        >
+          {isVip ? (
+            <Icon name="crown.fill" size={20} color={colors.warningFill} />
+          ) : (
+            <AppText
+              variant={TextVariant.Headline}
+              style={{ color: colors.label, fontWeight: '700' }}
+            >
+              {initial}
+            </AppText>
+          )}
+        </View>
+        <View style={styles.nameBlock}>
+          <View style={styles.nameRow}>
+            <AppText
+              variant={TextVariant.Headline}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={styles.nameText}
+            >
+              {supporter.name}
+            </AppText>
+            {isVip ? (
+              <View
+                style={[
+                  styles.vipPill,
+                  {
+                    backgroundColor: colors.warningSurface,
+                    borderColor: colors.warningBorder,
+                  },
+                ]}
+              >
+                <AppText
+                  variant={TextVariant.Caption2}
+                  style={[styles.vipPillText, { color: colors.warningFill }]}
+                >
+                  VIP
+                </AppText>
+              </View>
+            ) : null}
+          </View>
+          <AppText variant={TextVariant.Caption1} color={colors.secondaryLabel}>
+            {formatDate(supporter.supportDate, language)}
+          </AppText>
+        </View>
+        <View style={styles.badgeContainer}>
+          {supporter.isSubscriber ? (
+            <View
+              style={[
+                styles.badge,
+                {
+                  backgroundColor: colors.warningSurface,
+                  borderColor: colors.warningBorder,
+                },
+              ]}
+            >
+              <Icon name="star.fill" size={11} color={colors.warningFill} />
+              <AppText
+                variant={TextVariant.Caption2}
+                style={{
+                  color: colors.warningFill,
+                  fontWeight: '700',
+                }}
+              >
+                {supporter.monthlyCoffees
+                  ? t('supporters.monthlyCount', { count: supporter.monthlyCoffees })
+                  : t('supporters.member')}
+              </AppText>
+            </View>
+          ) : null}
+          <View
+            style={[
+              styles.badge,
+              {
+                backgroundColor: isVip ? colors.warningSurface : colors.fill,
+                borderColor: isVip ? colors.warningBorder : colors.separator,
+              },
+            ]}
+          >
+            <Icon
+              name="cup.and.saucer.fill"
+              size={13}
+              color={isVip ? colors.warningFill : colors.accent}
+            />
+            <AppText
+              variant={TextVariant.Subhead}
+              style={{
+                color: isVip ? colors.warningFill : colors.accent,
+                fontWeight: '700',
+              }}
+            >
+              x{supporter.coffees}
+            </AppText>
+          </View>
+        </View>
+      </View>
+      {supporter.message?.trim() ? (
+        <View style={[styles.messageBox, { backgroundColor: colors.secondaryFill }]}>
+          <AppText variant={TextVariant.Subhead} color={colors.secondaryLabel}>
+            « {supporter.message} »
+          </AppText>
+        </View>
+      ) : null}
+    </Surface>
+  );
+}
+
+function formatDate(dateStr: string, language: string): string {
+  try {
+    const date = new Date(dateStr);
+    return new Intl.DateTimeFormat(language || 'fr-FR', {
+      dateStyle: 'medium',
+    }).format(date);
+  } catch {
+    return dateStr;
+  }
+}
+
+const styles = StyleSheet.create({
+  avatar: {
+    alignItems: 'center',
+    borderRadius: radius.capsule,
+    borderWidth: 1,
+    height: 40,
+    justifyContent: 'center',
+    width: 40,
+  },
+  badge: {
+    alignItems: 'center',
+    borderRadius: radius.control,
+    borderWidth: 1,
+    flexDirection: 'row',
+    flexShrink: 0,
+    gap: 4,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  badgeContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'column',
+    flexShrink: 0,
+    gap: 4,
+  },
+  card: {
+    gap: spacing.sm,
+  },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.md,
+  },
+  messageBox: {
+    borderRadius: radius.control,
+    marginTop: spacing.xs,
+    padding: spacing.sm,
+  },
+  nameBlock: {
+    flex: 1,
+    minWidth: 0,
+  },
+  nameRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: spacing.xs,
+  },
+  nameText: {
+    flexShrink: 1,
+  },
+  vipPill: {
+    borderRadius: 4,
+    borderWidth: 1,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: 2,
+  },
+  vipPillText: {
+    fontWeight: '700',
+  },
+});
diff --git a/apps/webapp/src/app/[locale]/faq/page.tsx b/apps/webapp/src/app/[locale]/faq/page.tsx
index d2681105..0a506f64 100644
--- a/apps/webapp/src/app/[locale]/faq/page.tsx
+++ b/apps/webapp/src/app/[locale]/faq/page.tsx
@@ -103,6 +103,12 @@ export default async function FAQPage({ params }: FaqPageProps) {
           href: `/${locale}`,
           primary: false,
         },
+        {
+          label: 'Supporters',
+          href: `/${locale}/supporters`,
+          icon: <span className="text-sm">❤️</span>,
+          primary: false,
+        },
       ]}
     >
       <script
diff --git a/apps/webapp/src/app/[locale]/page.tsx b/apps/webapp/src/app/[locale]/page.tsx
index aab1a001..37ea7f53 100644
--- a/apps/webapp/src/app/[locale]/page.tsx
+++ b/apps/webapp/src/app/[locale]/page.tsx
@@ -12,8 +12,11 @@ import ComparisonItem from '@/components/home/ComparisonItem';
 import StepItem from '@/components/home/StepItem';
 import { StoreBadges } from '@/components/home/StoreBadges';
 import { getAppStoreUrls } from '@/core/site';
+import { getSupportersData } from '@/core/buymeacoffee/buymeacoffee.service';
+import { SupportersSocialProof } from '@/components/home/SupportersSocialProof';
 
 export const dynamicParams = false;
+export const revalidate = 60;
 
 export function generateStaticParams() {
   return SUPPORTED_LOCALES.map((locale) => ({ locale }));
@@ -77,6 +80,7 @@ export default async function HomePage({ params }: HomePageProps) {
   const jsonLd = buildSoftwareApplicationJsonLd(locale, t('meta.home.description'));
   const { appStoreUrl, googlePlayUrl } = getAppStoreUrls();
   const hasStoreUrls = Boolean(appStoreUrl || googlePlayUrl);
+  const supportersData = await getSupportersData();
 
   return (
     <PublicLayout
@@ -100,7 +104,15 @@ export default async function HomePage({ params }: HomePageProps) {
               />
             </svg>
           ),
-          primary: true,
+          primary: false,
+        },
+        {
+          label: 'Supporters',
+          href: `/${locale}/supporters`,
+          icon: (
+            <span className="text-sm">❤️</span>
+          ),
+          primary: false,
         },
       ]}
     >
@@ -145,9 +157,15 @@ export default async function HomePage({ params }: HomePageProps) {
                 <TeslaLoginButton />
               )}
               <p className="text-sm text-gray-500 flex items-center">
-                 <svg className="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" /></svg>
-                  {t('Secure OAuth authentication powered by Tesla')}
-                </p>
+                <svg className="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path
+                    fillRule="evenodd"
+                    d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                {t('Secure OAuth authentication powered by Tesla')}
+              </p>
             </div>
           </div>
           <div className="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-100">
@@ -319,18 +337,22 @@ export default async function HomePage({ params }: HomePageProps) {
         </div>
       </div>
 
-      <div className="container mx-auto px-6 py-12 border-t border-gray-100">
-        <div className="max-w-3xl mx-auto text-center">
-          <h3 className="text-2xl font-semibold mb-4 text-gray-700">
-            {t('Support a Community Project')}
-          </h3>
-          <p className="text-gray-600 mb-4">
-            {t(
-              'SentryGuard is a 100% free, open-source project built by Tesla owners, for Tesla owners. It is maintained entirely through community donations.'
-            )}
-          </p>
-        </div>
-      </div>
+      <SupportersSocialProof
+        locale={locale}
+        supporters={supportersData.supporters}
+        totalCoffeesCount={supportersData.totalCoffeesCount}
+        title={t('Supported by our community')}
+        subtitle={t('Community & Supporters')}
+        description={t(
+          'SentryGuard is an independent, 100% free and open-source project. Thank you to the wonderful backers keeping our servers running!'
+        )}
+        viewAllText={t('View all supporters')}
+        supportCtaText={t('Buy us a coffee')}
+        statsSummary={t('✨ +{{count}} contributors • {{total}} coffees to keep the servers running', {
+          count: supportersData.supporters.length,
+          total: supportersData.totalCoffeesCount,
+        })}
+      />
     </PublicLayout>
   );
 }
diff --git a/apps/webapp/src/app/[locale]/supporters/page.tsx b/apps/webapp/src/app/[locale]/supporters/page.tsx
new file mode 100644
index 00000000..bd51325c
--- /dev/null
+++ b/apps/webapp/src/app/[locale]/supporters/page.tsx
@@ -0,0 +1,173 @@
+import type { Metadata } from 'next';
+import { SUPPORTED_LOCALES } from '@/core/i18n/i18n-config';
+import { getTranslation } from '@/core/i18n/server-i18n';
+import { getSupportersData } from '@/core/buymeacoffee/buymeacoffee.service';
+import PublicLayout from '@/components/PublicLayout';
+import { SupporterCard } from '@/components/supporters/SupporterCard';
+import { InfrastructureCostBanner } from '@/components/supporters/InfrastructureCostBanner';
+import { EmptySupportersState } from '@/components/supporters/EmptySupportersState';
+
+export const dynamicParams = false;
+export const revalidate = 60;
+
+export function generateStaticParams() {
+  return SUPPORTED_LOCALES.map((locale) => ({ locale }));
+}
+
+interface SupportersPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+const BMC_URL = 'https://buymeacoffee.com/sentryguardorg';
+
+export async function generateMetadata({
+  params,
+}: SupportersPageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = getTranslation(locale);
+
+  return {
+    title: t('meta.supporters.title'),
+    description: t('meta.supporters.description'),
+    robots: {
+      index: false,
+      follow: true,
+    },
+    openGraph: {
+      title: t('meta.supporters.title'),
+      description: t('meta.supporters.ogDescription'),
+      type: 'website',
+    },
+    alternates: {
+      canonical: `/${locale}/supporters`,
+      languages: {
+        en: '/en/supporters',
+        fr: '/fr/supporters',
+        'x-default': '/en/supporters',
+      },
+    },
+  };
+}
+
+export default async function SupportersPage({ params }: SupportersPageProps) {
+  const { locale } = await params;
+  const t = getTranslation(locale);
+  const data = await getSupportersData();
+
+  return (
+    <PublicLayout
+      locale={locale}
+      navigationItems={[
+        {
+          label: '← Back to home',
+          href: `/${locale}`,
+          primary: false,
+        },
+      ]}
+    >
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-700 text-xs font-semibold uppercase tracking-wider mb-4 border border-red-100">
+            <span>❤️</span>
+            <span>{t('Community & Backers')}</span>
+          </div>
+          <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl mb-4">
+            {t('Our Supporters & Contributors')}
+          </h1>
+          <p className="text-lg text-gray-600 leading-relaxed">
+            {t(
+              'SentryGuard is an independent open-source project. A massive thank you to everyone helping keep this service running and free for the community.'
+            )}
+          </p>
+
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
+            <a
+              href={BMC_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-red-600 hover:bg-red-700 text-white font-medium shadow-md hover:shadow-lg transition-all duration-200"
+            >
+              <span>☕</span>
+              <span>{t('Support on Buy Me a Coffee')}</span>
+            </a>
+            <a
+              href="https://github.com/abarghoud/SentryGuard"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-gray-900 hover:bg-gray-800 text-white font-medium shadow-md hover:shadow-lg transition-all duration-200"
+            >
+              <span>⭐</span>
+              <span>{t('Star on GitHub')}</span>
+            </a>
+          </div>
+        </div>
+
+        <div className="space-y-12 mb-16">
+          {data.supporters.length > 0 ? (
+            <div>
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-8 h-8 rounded-lg bg-red-100 text-red-600 flex items-center justify-center font-bold">
+                  ☕
+                </div>
+                <div>
+                  <h3 className="text-2xl font-bold text-gray-900">
+                    {t('Community Backers & Contributors')}
+                  </h3>
+                  <p className="text-sm text-gray-600">
+                    {t('People who support SentryGuard through donations and monthly memberships')}
+                  </p>
+                </div>
+              </div>
+              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                {data.supporters.map((supporter) => (
+                  <SupporterCard key={supporter.id} supporter={supporter} locale={locale} />
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {!data.hasActiveSupporters ? (
+            <EmptySupportersState
+              title={t('Be the first supporter!')}
+              description={t(
+                'Help fund our infrastructure costs and your name or message will appear right here on our supporters wall.'
+              )}
+              ctaText={t('Buy us a coffee')}
+              bmcUrl={BMC_URL}
+            />
+          ) : null}
+
+          <InfrastructureCostBanner
+            title={t('How your support makes a difference')}
+            description={t(
+              'Every contribution directly covers server and network infrastructure costs, allowing SentryGuard to stay completely free, ad-free and privacy-friendly for all Tesla owners.'
+            )}
+            telemetryTitle={t('Tesla Fleet Telemetry')}
+            telemetryDesc={t(
+              'Real-time TLS ingestion servers that monitor your vehicle mode without draining battery.'
+            )}
+            notificationsTitle={t('Instant Push Alerts')}
+            notificationsDesc={t(
+              'High-availability notification delivery through Expo Push and Telegram within milliseconds.'
+            )}
+            openSourceTitle={t('100% Open-Source & Private')}
+            openSourceDesc={t(
+              'No advertising, no data resale, zero telemetry tracking of your trips or personal data.'
+            )}
+          />
+
+          <div className="text-center max-w-2xl mx-auto py-6 px-4 rounded-2xl bg-gray-50 border border-gray-200/80">
+            <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1">
+              🔒 {t('Privacy & Display Preferences')}
+            </h4>
+            <p className="text-xs text-gray-600 leading-relaxed">
+              {t(
+                "Want to update your display name or hide your contribution from our public wall? Contact us at hello@sentryguard.org and we'll take care of it immediately."
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+    </PublicLayout>
+  );
+}
diff --git a/apps/webapp/src/app/dashboard/settings/page.spec.tsx b/apps/webapp/src/app/dashboard/settings/page.spec.tsx
index be85f332..33ae1959 100644
--- a/apps/webapp/src/app/dashboard/settings/page.spec.tsx
+++ b/apps/webapp/src/app/dashboard/settings/page.spec.tsx
@@ -19,6 +19,7 @@ jest.mock('../../../features/consent/di', () => ({
 jest.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
+    i18n: { language: 'fr' },
   }),
 }));
 
diff --git a/apps/webapp/src/app/dashboard/settings/page.tsx b/apps/webapp/src/app/dashboard/settings/page.tsx
index 5375ed73..972eb27d 100644
--- a/apps/webapp/src/app/dashboard/settings/page.tsx
+++ b/apps/webapp/src/app/dashboard/settings/page.tsx
@@ -7,7 +7,7 @@ import { useConsentQuery } from '../../../features/consent/di';
 import { useRouter } from 'next/navigation';
 
 export default function SettingsPage() {
-  const { t } = useTranslation('common');
+  const { i18n, t } = useTranslation('common');
   const { query: authQuery, logoutMutation } = useAuthQuery();
   const profile = authQuery.data?.profile;
   const router = useRouter();
@@ -51,7 +51,7 @@ export default function SettingsPage() {
           </div>
           <div className="px-4 sm:px-6 py-5">
             <dl className="space-y-4 sm:space-y-5">
-              {profile?.full_name && (
+              {profile?.full_name ? (
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                     {t('Name')}
@@ -60,8 +60,8 @@ export default function SettingsPage() {
                     {profile.full_name}
                   </dd>
                 </div>
-              )}
-              {profile?.email && (
+              ) : null}
+              {profile?.email ? (
                 <div>
                   <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                     {t('Email')}
@@ -70,11 +70,47 @@ export default function SettingsPage() {
                     {profile.email}
                   </dd>
                 </div>
-              )}
+              ) : null}
             </dl>
           </div>
         </div>
 
+        <div className="bg-white dark:bg-gray-800 shadow rounded-lg mb-6 overflow-hidden border border-amber-200/70 dark:border-amber-900/40">
+          <div className="px-4 sm:px-6 py-4 sm:py-5 border-b border-amber-200/70 dark:border-amber-900/40 bg-gradient-to-r from-amber-50 to-orange-50/30 dark:from-amber-950/20 dark:to-orange-950/10 flex items-center gap-2">
+            <span className="text-lg">❤️</span>
+            <h2 className="text-base sm:text-lg font-medium text-amber-950 dark:text-amber-300">
+              {t('Community Wall of Fame')}
+            </h2>
+          </div>
+          <div className="px-4 sm:px-6 py-5">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+              <div className="flex-1">
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+                  {t('Discover all community members and donors supporting SentryGuard or buy us a coffee.')}
+                </p>
+              </div>
+              <div className="flex flex-wrap items-center gap-3">
+                <a
+                  href={`/${i18n.language || 'fr'}/supporters`}
+                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+                >
+                  <span>{t('View Wall of Fame')}</span>
+                  <span>→</span>
+                </a>
+                <a
+                  href="https://buymeacoffee.com/sentryguardorg"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 transition-colors"
+                >
+                  <span>☕</span>
+                  <span>{t('Buy us a coffee')}</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div className="bg-white dark:bg-gray-800 shadow rounded-lg border-2 border-red-200 dark:border-red-900">
           <div className="px-4 sm:px-6 py-4 sm:py-5 border-b border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900/10">
             <h2 className="text-base sm:text-lg font-medium text-red-900 dark:text-red-400">
diff --git a/apps/webapp/src/components/FormattedDate.test.tsx b/apps/webapp/src/components/FormattedDate.test.tsx
new file mode 100644
index 00000000..434fe203
--- /dev/null
+++ b/apps/webapp/src/components/FormattedDate.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { FormattedDate } from './FormattedDate';
+
+describe('The FormattedDate component', () => {
+  const testIsoDate = '2026-08-16T12:00:00.000Z';
+
+  describe('When rendered with a valid date string and French locale', () => {
+    beforeEach(() => {
+      render(<FormattedDate date={testIsoDate} locale="fr-FR" />);
+    });
+
+    it('should render a time element with the ISO datetime attribute', () => {
+      const timeElement = screen.getByText(/16 août 2026/i);
+      expect(timeElement).toBeInTheDocument();
+      expect(timeElement).toHaveAttribute('dateTime', testIsoDate);
+    });
+  });
+
+  describe('When rendered with a Date object and English locale', () => {
+    beforeEach(() => {
+      render(<FormattedDate date={new Date(testIsoDate)} locale="en-US" />);
+    });
+
+    it('should format using English date style', () => {
+      const timeElement = screen.getByText(/Aug 16, 2026/i);
+      expect(timeElement).toBeInTheDocument();
+    });
+  });
+});
diff --git a/apps/webapp/src/components/FormattedDate.tsx b/apps/webapp/src/components/FormattedDate.tsx
new file mode 100644
index 00000000..cda00e6e
--- /dev/null
+++ b/apps/webapp/src/components/FormattedDate.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+interface FormattedDateProps {
+  date: string | Date;
+  locale?: string;
+  className?: string;
+}
+
+export function FormattedDate({ date, locale, className }: FormattedDateProps) {
+  const iso = typeof date === 'string' ? date : date.toISOString();
+  let formattedDate: string;
+  try {
+    const parsed = typeof date === 'string' ? new Date(date) : date;
+    formattedDate = new Intl.DateTimeFormat(locale || undefined, {
+      dateStyle: 'medium',
+    }).format(parsed);
+  } catch {
+    formattedDate = typeof date === 'string' ? date : date.toLocaleDateString();
+  }
+
+  return (
+    <time dateTime={iso} className={className} suppressHydrationWarning>
+      {formattedDate}
+    </time>
+  );
+}
diff --git a/apps/webapp/src/components/PublicLayout.tsx b/apps/webapp/src/components/PublicLayout.tsx
index 06dd7402..d0747c51 100644
--- a/apps/webapp/src/components/PublicLayout.tsx
+++ b/apps/webapp/src/components/PublicLayout.tsx
@@ -109,6 +109,10 @@ export default function PublicLayout({
             <Link href={`/${locale}/faq`} className="hover:text-red-600 underline-offset-4 hover:underline">
               {t('FAQ')}
             </Link>
+            <span aria-hidden className="text-gray-300">·</span>
+            <Link href={`/${locale}/supporters`} className="hover:text-red-600 underline-offset-4 hover:underline">
+              {t('Supporters')}
+            </Link>
             {appStoreUrl ? (
               <>
                 <span aria-hidden className="text-gray-300">·</span>
diff --git a/apps/webapp/src/components/home/SupportersSocialProof.test.tsx b/apps/webapp/src/components/home/SupportersSocialProof.test.tsx
new file mode 100644
index 00000000..e95e22c3
--- /dev/null
+++ b/apps/webapp/src/components/home/SupportersSocialProof.test.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SupportersSocialProof } from './SupportersSocialProof';
+import { SupporterItem } from '@/core/buymeacoffee/buymeacoffee.types';
+
+describe('The SupportersSocialProof component', () => {
+  const mockSupporters: SupporterItem[] = [
+    {
+      id: 'sup-1',
+      name: 'Alexandre D.',
+      coffees: 35,
+      isSubscriber: true,
+      monthlyCoffees: 1,
+      supportDate: '2024-01-01',
+      message: 'Great work!',
+    },
+    {
+      id: 'sup-2',
+      name: 'Sophie M.',
+      coffees: 13,
+      isSubscriber: false,
+      supportDate: '2024-01-02',
+    },
+  ];
+
+  describe('When rendering with supporters data', () => {
+    beforeEach(() => {
+      render(
+        <SupportersSocialProof
+          locale="fr"
+          supporters={mockSupporters}
+          totalCoffeesCount={48}
+          title="Soutenu par notre communauté"
+          subtitle="Communauté & Donateurs"
+          description="Description test"
+          viewAllText="Voir tous les donateurs"
+          supportCtaText="Nous offrir un café"
+        />
+      );
+    });
+
+    it('should render the section title and description', () => {
+      expect(screen.getByText('Soutenu par notre communauté')).toBeInTheDocument();
+      expect(screen.getByText('Description test')).toBeInTheDocument();
+    });
+
+    it('should render the top supporter names', () => {
+      expect(screen.getByText('Alexandre D.')).toBeInTheDocument();
+      expect(screen.getByText('Sophie M.')).toBeInTheDocument();
+    });
+
+    it('should render the link to the supporters wall', () => {
+      const viewAllLink = screen.getByRole('link', { name: /Voir tous les donateurs/i });
+      expect(viewAllLink).toHaveAttribute('href', '/fr/supporters');
+    });
+
+    it('should render the external Buy Me a Coffee link', () => {
+      const bmcLink = screen.getByRole('link', { name: /Nous offrir un café/i });
+      expect(bmcLink).toHaveAttribute('href', 'https://buymeacoffee.com/sentryguardorg');
+      expect(bmcLink).toHaveAttribute('target', '_blank');
+    });
+  });
+
+  describe('When rendering with empty supporters list', () => {
+    it('should still render the section call to actions', () => {
+      render(
+        <SupportersSocialProof
+          locale="en"
+          supporters={[]}
+          totalCoffeesCount={0}
+          title="Supported by our community"
+          subtitle="Community & Backers"
+          description="Empty description"
+          viewAllText="View all supporters"
+          supportCtaText="Buy us a coffee"
+        />
+      );
+
+      expect(screen.getByText('Supported by our community')).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: /View all supporters/i })).toHaveAttribute(
+        'href',
+        '/en/supporters'
+      );
+    });
+  });
+});
diff --git a/apps/webapp/src/components/home/SupportersSocialProof.tsx b/apps/webapp/src/components/home/SupportersSocialProof.tsx
new file mode 100644
index 00000000..921e4143
--- /dev/null
+++ b/apps/webapp/src/components/home/SupportersSocialProof.tsx
@@ -0,0 +1,117 @@
+import Link from 'next/link';
+import { SupporterItem } from '@/core/buymeacoffee/buymeacoffee.types';
+
+interface SupportersSocialProofProps {
+  locale: string;
+  supporters: SupporterItem[];
+  totalCoffeesCount: number;
+  title: string;
+  subtitle: string;
+  description: string;
+  viewAllText: string;
+  supportCtaText: string;
+  statsSummary?: string;
+}
+
+const BMC_URL = 'https://buymeacoffee.com/sentryguardorg';
+
+export function SupportersSocialProof({
+  locale,
+  supporters,
+  totalCoffeesCount,
+  title,
+  subtitle,
+  description,
+  viewAllText,
+  supportCtaText,
+  statsSummary,
+}: SupportersSocialProofProps) {
+  const topSupporters = supporters.slice(0, 6);
+
+  return (
+    <section className="container mx-auto px-6 py-16">
+      <div className="max-w-5xl mx-auto bg-gradient-to-br from-red-50/60 via-white to-amber-50/50 rounded-3xl p-8 sm:p-12 border border-red-100 shadow-sm">
+        <div className="text-center max-w-2xl mx-auto mb-8">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-100/80 text-red-700 text-xs font-semibold uppercase tracking-wider mb-4 border border-red-200">
+            <span>❤️</span>
+            <span>{subtitle}</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight mb-3">
+            {title}
+          </h2>
+          <p className="text-base sm:text-lg text-gray-600 leading-relaxed">
+            {description}
+          </p>
+        </div>
+
+        {topSupporters.length > 0 ? (
+          <div className="mb-10">
+            <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 max-w-3xl mx-auto">
+              {topSupporters.map((supporter) => {
+                const isTop = supporter.coffees >= 10;
+                const initial = (supporter.name || 'A').charAt(0).toUpperCase();
+
+                return (
+                  <div
+                    key={supporter.id}
+                    className={`inline-flex items-center gap-2.5 px-3.5 py-2 rounded-full border shadow-2xs transition-transform hover:scale-105 duration-150 ${
+                      isTop
+                        ? 'bg-amber-50/80 border-amber-200 text-amber-950'
+                        : 'bg-white border-gray-200 text-gray-800'
+                    }`}
+                  >
+                    <div
+                      className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${
+                        isTop
+                          ? 'bg-amber-500 text-white'
+                          : 'bg-red-100 text-red-600'
+                      }`}
+                    >
+                      {isTop ? '👑' : initial}
+                    </div>
+                    <span className="text-sm font-semibold truncate max-w-[120px]">
+                      {supporter.name}
+                    </span>
+                    {supporter.isSubscriber ? (
+                      <span className="text-xs text-amber-600 font-bold">
+                        ⭐
+                      </span>
+                    ) : null}
+                    <span className="text-xs bg-gray-100 px-2 py-0.5 rounded-full text-gray-600 font-medium">
+                      x{supporter.coffees}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+
+            {statsSummary ? (
+              <p className="text-center text-xs sm:text-sm text-gray-500 mt-4">
+                {statsSummary}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+
+        <div className="flex flex-wrap items-center justify-center gap-4">
+          <Link
+            href={`/${locale}/supporters`}
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gray-900 hover:bg-gray-800 text-white font-medium shadow-sm transition-all duration-200 hover:shadow-md"
+          >
+            <span>{viewAllText}</span>
+            <span>→</span>
+          </Link>
+          <a
+            href={BMC_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-red-600 hover:bg-red-700 text-white font-medium shadow-sm transition-all duration-200 hover:shadow-md"
+          >
+            <span>☕</span>
+            <span>{supportCtaText}</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/webapp/src/components/supporters/EmptySupportersState.tsx b/apps/webapp/src/components/supporters/EmptySupportersState.tsx
new file mode 100644
index 00000000..9c81729e
--- /dev/null
+++ b/apps/webapp/src/components/supporters/EmptySupportersState.tsx
@@ -0,0 +1,32 @@
+interface EmptySupportersStateProps {
+  title: string;
+  description: string;
+  ctaText: string;
+  bmcUrl: string;
+}
+
+export function EmptySupportersState({
+  title,
+  description,
+  ctaText,
+  bmcUrl,
+}: EmptySupportersStateProps) {
+  return (
+    <div className="text-center py-12 px-6 bg-white rounded-3xl border border-gray-200 shadow-sm max-w-xl mx-auto">
+      <div className="w-16 h-16 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mx-auto mb-4 text-2xl">
+        ☕
+      </div>
+      <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
+      <p className="text-gray-600 text-sm mb-6 leading-relaxed">{description}</p>
+      <a
+        href={bmcUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-2 px-6 py-3 bg-[#FFDD00] hover:bg-[#FFEA00] text-gray-900 font-bold rounded-xl shadow transition-all duration-200 hover:scale-105"
+      >
+        <span>☕</span>
+        <span>{ctaText}</span>
+      </a>
+    </div>
+  );
+}
diff --git a/apps/webapp/src/components/supporters/InfrastructureCostBanner.tsx b/apps/webapp/src/components/supporters/InfrastructureCostBanner.tsx
new file mode 100644
index 00000000..14515d9c
--- /dev/null
+++ b/apps/webapp/src/components/supporters/InfrastructureCostBanner.tsx
@@ -0,0 +1,66 @@
+interface InfrastructureCostBannerProps {
+  title: string;
+  description: string;
+  telemetryTitle: string;
+  telemetryDesc: string;
+  notificationsTitle: string;
+  notificationsDesc: string;
+  openSourceTitle: string;
+  openSourceDesc: string;
+}
+
+export function InfrastructureCostBanner({
+  title,
+  description,
+  telemetryTitle,
+  telemetryDesc,
+  notificationsTitle,
+  notificationsDesc,
+  openSourceTitle,
+  openSourceDesc,
+}: InfrastructureCostBannerProps) {
+  return (
+    <div className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white rounded-3xl p-8 md:p-10 shadow-xl border border-gray-700">
+      <div className="max-w-3xl mb-8">
+        <h3 className="text-2xl md:text-3xl font-bold mb-3 bg-gradient-to-r from-white via-gray-100 to-gray-300 text-transparent bg-clip-text">
+          {title}
+        </h3>
+        <p className="text-gray-300 text-sm md:text-base leading-relaxed">
+          {description}
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-6">
+        <div className="bg-white/5 backdrop-blur-sm p-5 rounded-2xl border border-white/10">
+          <div className="w-10 h-10 rounded-xl bg-red-500/20 text-red-400 flex items-center justify-center mb-3">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </div>
+          <h4 className="font-semibold text-white text-base mb-1">{telemetryTitle}</h4>
+          <p className="text-xs text-gray-400 leading-relaxed">{telemetryDesc}</p>
+        </div>
+
+        <div className="bg-white/5 backdrop-blur-sm p-5 rounded-2xl border border-white/10">
+          <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center mb-3">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+          </div>
+          <h4 className="font-semibold text-white text-base mb-1">{notificationsTitle}</h4>
+          <p className="text-xs text-gray-400 leading-relaxed">{notificationsDesc}</p>
+        </div>
+
+        <div className="bg-white/5 backdrop-blur-sm p-5 rounded-2xl border border-white/10">
+          <div className="w-10 h-10 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center mb-3">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </div>
+          <h4 className="font-semibold text-white text-base mb-1">{openSourceTitle}</h4>
+          <p className="text-xs text-gray-400 leading-relaxed">{openSourceDesc}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/src/components/supporters/SupporterCard.tsx b/apps/webapp/src/components/supporters/SupporterCard.tsx
new file mode 100644
index 00000000..cf690ab3
--- /dev/null
+++ b/apps/webapp/src/components/supporters/SupporterCard.tsx
@@ -0,0 +1,71 @@
+import { SupporterItem } from '@/core/buymeacoffee/buymeacoffee.types';
+import { FormattedDate } from '@/components/FormattedDate';
+
+interface SupporterCardProps {
+  supporter: SupporterItem;
+  locale?: string;
+}
+
+export function SupporterCard({ locale, supporter }: SupporterCardProps) {
+  const initial = supporter.name.charAt(0).toUpperCase();
+  const isTopSupporter = supporter.coffees >= 10;
+  const isSuperSupporter = supporter.coffees >= 5 && supporter.coffees < 10;
+
+  const cardBorderClass = isTopSupporter
+    ? 'bg-gradient-to-br from-amber-50/70 via-white to-yellow-50/40 border-amber-300 ring-1 ring-amber-200 shadow-sm'
+    : isSuperSupporter
+    ? 'bg-gradient-to-br from-red-50/40 via-white to-orange-50/20 border-red-200 shadow-sm'
+    : 'bg-white border-gray-200 shadow-sm';
+
+  const avatarBgClass = isTopSupporter
+    ? 'bg-gradient-to-tr from-amber-500 to-yellow-400 text-white'
+    : 'bg-red-100 text-red-600';
+
+  return (
+    <div
+      className={`flex flex-col justify-between p-5 rounded-2xl border hover:shadow-md transition-all duration-200 ${cardBorderClass}`}
+    >
+      <div>
+        <div className="flex items-center justify-between gap-3 mb-3">
+          <div className="flex items-center gap-3 min-w-0 flex-1">
+            <div
+              className={`w-10 h-10 shrink-0 rounded-full font-bold text-sm flex items-center justify-center shadow-xs ${avatarBgClass}`}
+            >
+              {isTopSupporter ? '👑' : initial}
+            </div>
+            <div className="min-w-0 flex-1">
+              <h4 className="font-semibold text-gray-900 text-base truncate" title={supporter.name}>
+                {supporter.name}
+              </h4>
+              <FormattedDate date={supporter.supportDate} locale={locale} className="text-xs text-gray-500 block truncate" />
+            </div>
+          </div>
+          <div className="flex items-center gap-1.5 shrink-0 flex-wrap justify-end">
+            {supporter.isSubscriber ? (
+              <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 border border-amber-300 shadow-xs">
+                ⭐ {supporter.monthlyCoffees ? `x${supporter.monthlyCoffees}/mo` : 'Membre'}
+              </span>
+            ) : null}
+            <span
+              className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold ${
+                isTopSupporter
+                  ? 'bg-amber-100 text-amber-800 border border-amber-300'
+                  : isSuperSupporter
+                  ? 'bg-red-50 text-red-700 border border-red-200'
+                  : 'bg-gray-100 text-gray-700'
+              }`}
+            >
+              ☕ x{supporter.coffees}
+            </span>
+          </div>
+        </div>
+
+        {supporter.message ? (
+          <div className="mt-2 text-sm text-gray-700 bg-gray-50/80 p-3 rounded-xl border border-gray-100 italic">
+            &ldquo;{supporter.message}&rdquo;
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.test.ts b/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.test.ts
new file mode 100644
index 00000000..fd234546
--- /dev/null
+++ b/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.test.ts
@@ -0,0 +1,85 @@
+import { getSupportersData } from './buymeacoffee.service';
+
+describe('The getSupportersData() function', () => {
+  const originalEnv = process.env;
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    process.env = { ...originalEnv };
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+    global.fetch = originalFetch;
+    jest.restoreAllMocks();
+  });
+
+  describe('When the SentryGuard backend API returns valid supporters data', () => {
+    it('should return the backend supporters data', async () => {
+      const mockBackendResponse = {
+        subscribers: [],
+        supporters: [
+          {
+            id: 'don-1',
+            name: 'Bob',
+            coffees: 3,
+            isSubscriber: false,
+            monthlyCoffees: undefined,
+            supportDate: '2024-01-02',
+            message: 'Thanks!',
+          },
+        ],
+        totalCoffeesCount: 3,
+        hasActiveSupporters: true,
+      };
+
+      global.fetch = jest.fn((url: RequestInfo | URL) => {
+        const urlString = String(url);
+        if (urlString.includes('/supporters')) {
+          return Promise.resolve({
+            ok: true,
+            json: () => Promise.resolve(mockBackendResponse),
+          } as Response);
+        }
+        return Promise.reject(new Error('Unknown url'));
+      });
+
+      const result = await getSupportersData();
+
+      expect(result).toStrictEqual(mockBackendResponse);
+    });
+  });
+
+  describe('When backend is offline or returns error', () => {
+    it('should return empty supporters data without throwing errors', async () => {
+      global.fetch = jest.fn(() => Promise.reject(new Error('Backend offline')));
+
+      const result = await getSupportersData();
+
+      expect(result).toStrictEqual({
+        subscribers: [],
+        supporters: [],
+        totalCoffeesCount: 0,
+        hasActiveSupporters: false,
+      });
+    });
+
+    it('should return empty supporters data when response is not ok', async () => {
+      global.fetch = jest.fn(() =>
+        Promise.resolve({
+          ok: false,
+          status: 500,
+        } as Response)
+      );
+
+      const result = await getSupportersData();
+
+      expect(result).toStrictEqual({
+        subscribers: [],
+        supporters: [],
+        totalCoffeesCount: 0,
+        hasActiveSupporters: false,
+      });
+    });
+  });
+});
diff --git a/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.ts b/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.ts
new file mode 100644
index 00000000..c877a475
--- /dev/null
+++ b/apps/webapp/src/core/buymeacoffee/buymeacoffee.service.ts
@@ -0,0 +1,35 @@
+import { SupportersData } from './buymeacoffee.types';
+
+function resolveApiUrl(): string {
+  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+}
+
+function fallbackEmptySupporters(): SupportersData {
+  return {
+    subscribers: [],
+    supporters: [],
+    totalCoffeesCount: 0,
+    hasActiveSupporters: false,
+  };
+}
+
+export async function getSupportersData(): Promise<SupportersData> {
+  try {
+    const apiUrl = resolveApiUrl();
+    const res = await fetch(`${apiUrl}/supporters`, {
+      next: { revalidate: 60 },
+    });
+    if (!res.ok) {
+      return fallbackEmptySupporters();
+    }
+    const data = (await res.json()) as SupportersData;
+    return {
+      subscribers: data.subscribers || [],
+      supporters: data.supporters || [],
+      totalCoffeesCount: data.totalCoffeesCount || 0,
+      hasActiveSupporters: Boolean(data.hasActiveSupporters),
+    };
+  } catch {
+    return fallbackEmptySupporters();
+  }
+}
diff --git a/apps/webapp/src/core/buymeacoffee/buymeacoffee.types.ts b/apps/webapp/src/core/buymeacoffee/buymeacoffee.types.ts
new file mode 100644
index 00000000..2b6e6014
--- /dev/null
+++ b/apps/webapp/src/core/buymeacoffee/buymeacoffee.types.ts
@@ -0,0 +1,24 @@
+export interface SupporterItem {
+  id: string;
+  name: string;
+  coffees: number;
+  isSubscriber?: boolean;
+  monthlyCoffees?: number;
+  supportDate: string;
+  message?: string;
+}
+
+export interface SubscriberItem {
+  id: string;
+  name: string;
+  durationType: 'month' | 'year';
+  membershipDate: string;
+  coffees: number;
+}
+
+export interface SupportersData {
+  subscribers: SubscriberItem[];
+  supporters: SupporterItem[];
+  totalCoffeesCount: number;
+  hasActiveSupporters: boolean;
+}
diff --git a/apps/webapp/src/core/security/csp.test.ts b/apps/webapp/src/core/security/csp.test.ts
index bda4ac67..8a4c9ac3 100644
--- a/apps/webapp/src/core/security/csp.test.ts
+++ b/apps/webapp/src/core/security/csp.test.ts
@@ -34,9 +34,13 @@ describe('The buildCspHeader() function', () => {
 
 describe('The isLocaleRoute() function', () => {
   describe('When the path is a public locale route', () => {
-    it('should return true', () => {
+    it('should return true for FAQ route', () => {
       expect(isLocaleRoute('/en/faq')).toBe(true);
     });
+
+    it('should return true for supporters route', () => {
+      expect(isLocaleRoute('/en/supporters')).toBe(true);
+    });
   });
 
   describe('When the path is an authenticated app route', () => {
diff --git a/apps/webapp/src/core/security/csp.ts b/apps/webapp/src/core/security/csp.ts
index 78aaa39d..c8093be9 100644
--- a/apps/webapp/src/core/security/csp.ts
+++ b/apps/webapp/src/core/security/csp.ts
@@ -1,4 +1,14 @@
-export const LOCALE_ROUTES = ['/', '/faq', '/en', '/fr', '/en/faq', '/fr/faq'];
+export const LOCALE_ROUTES = [
+  '/',
+  '/faq',
+  '/supporters',
+  '/en',
+  '/fr',
+  '/en/faq',
+  '/fr/faq',
+  '/en/supporters',
+  '/fr/supporters',
+];
 
 export function isLocaleRoute(pathname: string): boolean {
   return LOCALE_ROUTES.includes(pathname);
diff --git a/apps/webapp/src/locale-proxy.ts b/apps/webapp/src/locale-proxy.ts
index 2009260a..216ddbe4 100644
--- a/apps/webapp/src/locale-proxy.ts
+++ b/apps/webapp/src/locale-proxy.ts
@@ -52,5 +52,15 @@ export function proxy(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/', '/faq', '/en', '/fr', '/en/faq', '/fr/faq'],
+  matcher: [
+    '/',
+    '/faq',
+    '/supporters',
+    '/en',
+    '/fr',
+    '/en/faq',
+    '/fr/faq',
+    '/en/supporters',
+    '/fr/supporters',
+  ],
 };
diff --git a/apps/webapp/src/locales/en/common.json b/apps/webapp/src/locales/en/common.json
index be056c82..9d239c85 100644
--- a/apps/webapp/src/locales/en/common.json
+++ b/apps/webapp/src/locales/en/common.json
@@ -470,5 +470,43 @@
   "Write permissions requirement explanation": "No. SentryGuard works perfectly in a purely passive (read-only) mode if you only want to receive Telegram alert notifications. The permission to send control commands is only requested and required if you explicitly choose to enable the Active Deterrent feature or Auto Sentry Mode during an intrusion. If you do not activate these features, SentryGuard requires absolutely no write access to your Tesla.",
   "Get the app": "Get the app",
   "Get the mobile app": "Get the mobile app",
-  "or": "or"
-}
+  "or": "or",
+  "meta.supporters.title": "Our Supporters & Contributors | SentryGuard",
+  "meta.supporters.description": "Meet and thank the amazing people supporting the open-source SentryGuard project.",
+  "meta.supporters.ogDescription": "A massive thank you to the community supporting SentryGuard.",
+  "Supporters": "Supporters",
+  "Community & Backers": "Community & Backers",
+  "Our Supporters & Contributors": "Our Supporters & Contributors",
+  "SentryGuard is an independent open-source project. A massive thank you to everyone helping keep this service running and free for the community.": "SentryGuard is an independent open-source project. A massive thank you to everyone helping keep this service running and free for the community.",
+  "Support on Buy Me a Coffee": "Support on Buy Me a Coffee",
+  "Star on GitHub": "Star on GitHub",
+  "Monthly Contributors": "Monthly Contributors",
+  "Supporters who sustain the project with a recurring monthly contribution": "Supporters who sustain the project with a recurring monthly contribution",
+  "Member": "Member",
+  "Monthly Contributor": "Monthly Contributor",
+  "Community Backers & Contributors": "Community Backers & Contributors",
+  "People who support SentryGuard through donations and monthly memberships": "People who support SentryGuard through donations and monthly memberships",
+  "Donations & Coffees": "Donations & Coffees",
+  "People who offered a coffee to support the project": "People who offered a coffee to support the project",
+  "Be the first supporter!": "Be the first supporter!",
+  "Help fund our infrastructure costs and your name or message will appear right here on our supporters wall.": "Help fund our infrastructure costs and your name or message will appear right here on our supporters wall.",
+  "Buy us a coffee": "Buy us a coffee",
+  "How your support makes a difference": "How your support makes a difference",
+  "Every contribution directly covers server and network infrastructure costs, allowing SentryGuard to stay completely free, ad-free and privacy-friendly for all Tesla owners.": "Every contribution directly covers server and network infrastructure costs, allowing SentryGuard to stay completely free, ad-free and privacy-friendly for all Tesla owners.",
+  "Tesla Fleet Telemetry": "Tesla Fleet Telemetry",
+  "Real-time TLS ingestion servers that monitor your vehicle mode without draining battery.": "Real-time TLS ingestion servers that monitor your vehicle mode without draining battery.",
+  "Instant Push Alerts": "Instant Push Alerts",
+  "High-availability notification delivery through Expo Push and Telegram within milliseconds.": "High-availability notification delivery through Expo Push and Telegram within milliseconds.",
+  "100% Open-Source & Private": "100% Open-Source & Private",
+  "No advertising, no data resale, zero telemetry tracking of your trips or personal data.": "No advertising, no data resale, zero telemetry tracking of your trips or personal data.",
+  "Community & Supporters": "Community & Supporters",
+  "Supported by our community": "Supported by our community",
+  "SentryGuard is an independent, 100% free and open-source project. Thank you to the wonderful backers keeping our servers running!": "SentryGuard is an independent, 100% free and open-source project. Thank you to the wonderful backers keeping our servers running!",
+  "✨ +{{count}} contributors • {{total}} coffees to keep the servers running": "✨ +{{count}} contributors • {{total}} coffees to keep the servers running",
+  "View all supporters": "View all supporters",
+  "Community Wall of Fame": "Community Wall of Fame",
+  "Discover all community members and donors supporting SentryGuard or buy us a coffee.": "Discover all community members and donors supporting SentryGuard or buy us a coffee.",
+  "View Wall of Fame": "View Wall of Fame",
+  "Privacy & Display Preferences": "Privacy & Display Preferences",
+  "Want to update your display name or hide your contribution from our public wall? Contact us at hello@sentryguard.org and we'll take care of it immediately.": "Want to update your display name or hide your contribution from our public wall? Contact us at hello@sentryguard.org and we'll take care of it immediately."
+}
\ No newline at end of file
diff --git a/apps/webapp/src/locales/fr/common.json b/apps/webapp/src/locales/fr/common.json
index f0558771..49f66df5 100644
--- a/apps/webapp/src/locales/fr/common.json
+++ b/apps/webapp/src/locales/fr/common.json
@@ -470,5 +470,43 @@
   "Write permissions requirement explanation": "Non. SentryGuard fonctionne parfaitement de manière purement passive (lecture seule) si vous souhaitez uniquement recevoir des notifications d'alertes par Telegram. L'autorisation d'envoyer des commandes de contrôle n'est requise et demandée que si vous choisissez explicitement d'activer la fonctionnalité de Riposte Active (klaxon/sonnerie) ou la Sentinelle Automatique en cas d'intrusion. Si vous n'activez pas ces fonctionnalités, SentryGuard n'a besoin d'aucun droit d'écriture sur votre Tesla.",
   "Get the app": "Installer l'application",
   "Get the mobile app": "Téléchargez l'application mobile",
-  "or": "ou"
-}
+  "or": "ou",
+  "meta.supporters.title": "Nos Donateurs et Contributeurs | SentryGuard",
+  "meta.supporters.description": "Découvrez et remerciez toutes les personnes qui soutiennent le projet open-source SentryGuard.",
+  "meta.supporters.ogDescription": "Un immense merci à la communauté qui soutient SentryGuard.",
+  "Supporters": "Remerciements",
+  "Community & Backers": "Communauté & Soutiens",
+  "Our Supporters & Contributors": "Nos Donateurs & Contributeurs",
+  "SentryGuard is an independent open-source project. A massive thank you to everyone helping keep this service running and free for the community.": "SentryGuard est un projet open-source indépendant. Un immense merci à toutes les personnes qui permettent à ce service de fonctionner et de rester gratuit pour la communauté.",
+  "Support on Buy Me a Coffee": "Nous soutenir sur Buy Me a Coffee",
+  "Star on GitHub": "Étoile sur GitHub",
+  "Monthly Contributors": "Contributeurs Mensuels",
+  "Supporters who sustain the project with a recurring monthly contribution": "Les membres qui soutiennent le projet de manière continue grâce à un don mensuel",
+  "Member": "Membre",
+  "Monthly Contributor": "Contributeur Mensuel",
+  "Community Backers & Contributors": "Donateurs & Contributeurs de la Communauté",
+  "People who support SentryGuard through donations and monthly memberships": "Toutes les personnes qui soutiennent SentryGuard par des dons ponctuels et des abonnements mensuels",
+  "Donations & Coffees": "Donateurs & Cafés",
+  "People who offered a coffee to support the project": "Toutes les personnes qui ont offert un café pour soutenir le développement",
+  "Be the first supporter!": "Soyez le premier donateur !",
+  "Help fund our infrastructure costs and your name or message will appear right here on our supporters wall.": "Aidez-nous à financer les coûts d'infrastructure et votre nom ou message apparaîtra directement ici sur le mur des donateurs.",
+  "Buy us a coffee": "Nous offrir un café",
+  "How your support makes a difference": "À quoi servent vos dons ?",
+  "Every contribution directly covers server and network infrastructure costs, allowing SentryGuard to stay completely free, ad-free and privacy-friendly for all Tesla owners.": "Chaque contribution couvre directement les coûts de serveurs et d'infrastructure réseau, permettant à SentryGuard de rester 100% gratuit, sans publicité et respectueux de votre vie privée.",
+  "Tesla Fleet Telemetry": "Télémétrie Flotte Tesla",
+  "Real-time TLS ingestion servers that monitor your vehicle mode without draining battery.": "Serveurs d'ingestion TLS haute disponibilité qui surveillent le mode Sentinelle en temps réel sans vider la batterie.",
+  "Instant Push Alerts": "Alertes Push Instantanées",
+  "High-availability notification delivery through Expo Push and Telegram within milliseconds.": "Routage ultra-rapide des alertes via Expo Push et Telegram en une fraction de seconde.",
+  "100% Open-Source & Private": "100% Open-Source & Privé",
+  "No advertising, no data resale, zero telemetry tracking of your trips or personal data.": "Aucune publicité, aucune revente de données, zéro traçage de vos trajets ou de vos données personnelles.",
+  "Community & Supporters": "Communauté & Donateurs",
+  "Supported by our community": "Soutenu par notre communauté",
+  "SentryGuard is an independent, 100% free and open-source project. Thank you to the wonderful backers keeping our servers running!": "SentryGuard est un projet indépendant, 100% gratuit et open-source. Merci aux formidables membres qui permettent de financer nos serveurs !",
+  "✨ +{{count}} contributors • {{total}} coffees to keep the servers running": "✨ +{{count}} contributeurs • {{total}} cafés offerts pour financer les serveurs",
+  "View all supporters": "Voir tous les donateurs",
+  "Community Wall of Fame": "Mur des Donateurs & Communauté",
+  "Discover all community members and donors supporting SentryGuard or buy us a coffee.": "Découvrez tous les membres et donateurs qui soutiennent SentryGuard ou offrez-nous un café.",
+  "View Wall of Fame": "Voir le mur des donateurs",
+  "Privacy & Display Preferences": "Confidentialité & Affichage",
+  "Want to update your display name or hide your contribution from our public wall? Contact us at hello@sentryguard.org and we'll take care of it immediately.": "Vous souhaitez modifier votre nom affiché ou masquer votre contribution du mur public ? Contactez-nous à hello@sentryguard.org et nous le ferons immédiatement."
+}
\ No newline at end of file