diff --git a/apps/website/src/app/components/NavBar.tsx b/apps/website/src/app/components/NavBar.tsx
index e22c3b404..b48b12428 100644
--- a/apps/website/src/app/components/NavBar.tsx
+++ b/apps/website/src/app/components/NavBar.tsx
@@ -18,7 +18,7 @@ export default function NavBar() {
   const [t] = useTranslation();
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <nav className="container flex h-14 items-center gap-4 text-sm lg:gap-6">
+      <nav className="flex h-14 items-center gap-4 px-[18px] text-sm lg:gap-6">
         <Link href={Routes.Home} className="mr-auto">
           <div className="group flex flex-row items-center">
             <BotIcon className="h-9 w-9" />
diff --git a/apps/website/src/app/donors/Donor.tsx b/apps/website/src/app/donors/Donor.tsx
index fad854734..7625592e8 100644
--- a/apps/website/src/app/donors/Donor.tsx
+++ b/apps/website/src/app/donors/Donor.tsx
@@ -1,39 +1,35 @@
 "use client";
 
 import type { DiscordUser } from "@mc/validators/DiscordUser";
- 
+import { useTranslation } from "react-i18next";
+
 import {
   Dialog,
-  DialogContent, 
+  DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@mc/ui/dialog"; 
+} from "@mc/ui/dialog";
+import { Separator } from "@mc/ui/separator";
 
+import type { RouterOutputs } from "~/trpc/react";
 import { DisplayUsername } from "../components/DisplayUsername";
-import { useTranslation } from "react-i18next";
-import { Separator } from "@mc/ui/separator";
 
 /* eslint-disable @next/next/no-img-element */
 export function Donor({
   className,
-  user,
-  donations,
+  donor: { user, donations },
 }: {
   className: string;
-  user: DiscordUser;
-  donations: {
-    note: string;
-    amount: number;
-    currency: string;
-    anonymous: boolean;
-    date: Date;
-  }[];
+  donor: RouterOutputs["donor"]["geAll"][number];
 }) {
-const { i18n } = useTranslation();
+  const { i18n } = useTranslation();
 
-const dateFormatter = Intl.DateTimeFormat(i18n.language, {dateStyle: "short"  });
-const currencyFormatter = (currency: string) => Intl.NumberFormat(i18n.language, { currency, style: "currency" });
+  const dateFormatter = Intl.DateTimeFormat(i18n.language, {
+    dateStyle: "short",
+  });
+  const currencyFormatter = (currency: string) =>
+    Intl.NumberFormat(i18n.language, { currency, style: "currency" });
 
   return (
     <Dialog>
@@ -56,23 +52,23 @@ const currencyFormatter = (currency: string) => Intl.NumberFormat(i18n.language,
             <DisplayUsername {...user} />
           </DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col gap-2 mt-4">
-          {donations.map((donation,i) => (
-            <>  
-            <div className="">
+        <div className="mt-4 flex flex-col gap-2">
+          {donations.map((donation, i) => (
+            <>
+              <div className="">
                 <div className="flex justify-between text-muted-foreground">
-                    <div>
-                    {dateFormatter.format(donation.date)}
-                    </div>
-                    <div className="">
-                        {currencyFormatter(donation.currency).format(donation.amount)} 
-                    </div>
+                  <div>{dateFormatter.format(donation.date)}</div>
+                  <div className="">
+                    {currencyFormatter(donation.currency).format(
+                      donation.amount,
+                    )}
+                  </div>
                 </div>
-              <div className="my-2">
-                {donation.note}
+                <div className="my-2">{donation.note}</div>
               </div>
-            </div>
-            {i != donations.length - 1 && <Separator className="my-4 bg-accent-foreground" />}
+              {i != donations.length - 1 && (
+                <Separator className="my-4 bg-accent-foreground" />
+              )}
             </>
           ))}
         </div>
diff --git a/apps/website/src/app/donors/Donors.tsx b/apps/website/src/app/donors/Donors.tsx
index 4a1ec3aeb..267aa86d5 100644
--- a/apps/website/src/app/donors/Donors.tsx
+++ b/apps/website/src/app/donors/Donors.tsx
@@ -1,11 +1,20 @@
 "use client";
 
 import assert from "assert";
-import type { DiscordUser } from "@mc/validators/DiscordUser";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
+import type { RouterOutputs } from "~/trpc/react";
+import { api } from "~/trpc/react";
 import { Donor } from "./Donor";
 
+interface DonorBubble {
+  donor: RouterOutputs["donor"]["geAll"][number];
+  radius: number;
+  x: number;
+  y: number;
+  childs: DonorBubble[];
+}
+
 export function Donors() {
   const [screenSize, setScreenSize] = useState<[number, number]>([
     window.innerWidth,
@@ -18,68 +27,29 @@ export function Donors() {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
-  interface Donor {
-    user: DiscordUser;
-    donations: {
-      note: string;
-      amount: number;
-      currency: string;
-      anonymous: boolean;
-      date: Date;
-    }[];
-    radius: number;
-    x: number;
-    y: number;
-    childs: Donor[];
-    childsIsFull: boolean;
-  }
-
-  const donors = useMemo<Donor[]>(() => {
-    const donors: Donor[] = [];
-
-    for (let i = 0; i < 25; i++) {
-      donors.push({
-        user: {
-          id: `user-${i}`,
-          username: `User ${i}`,
-          discriminator: `${Math.floor(Math.random() * 10000)}`,
-          avatar: `https://picsum.photos/seed/${i}/200/300`,
-        },
-        donations: [
-          {
-            amount: Math.floor(Math.random() * 15),
-            currency: "USD",
-            note: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-            anonymous: false,
-            date: new Date(),
-          },
-          {
-            amount: Math.floor(Math.random() * 15),
-            currency: "EUR",
-            note: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-            anonymous: false,
-            date: new Date(),
-          },
-        ],
-        childs: [],
-        x: 0,
-        y: 0,
-        radius: 0,
-        childsIsFull: false,
-      });
-    }
+  const donorsQuery = api.donor.geAll.useQuery();
+
+  const donors = useMemo<DonorBubble[]>(() => {
+    const donors: DonorBubble[] = (donorsQuery.data ?? []).map((donor) => ({
+      donor,
+      radius: 10,
+      x: 0,
+      y: 0,
+      childs: [],
+    }));
 
     return donors.sort(
       (a, b) =>
-        b.donations.reduce((a, c) => c.amount + a, 0) -
-        a.donations.reduce((a, c) => c.amount + a, 0),
+        b.donor.donations.reduce((a, c) => c.amount + a, 0) -
+        a.donor.donations.reduce((a, c) => c.amount + a, 0),
     );
-  }, []);
+  }, [donorsQuery.data]);
 
   const totalDonated = useMemo(
     () =>
       donors.reduce(
-        (sum, donor) => sum + donor.donations.reduce((a, c) => c.amount + a, 0),
+        (sum, { donor }) =>
+          sum + donor.donations.reduce((a, c) => c.amount + a, 0),
         0,
       ),
     [donors],
@@ -89,8 +59,8 @@ export function Donors() {
 
     const donationBubbleRadius = (amount: number) => {
       const radius = (amount / totalDonated) * (totalDonated * 4);
-      if (radius > 0.25 * screenSize[0]) {
-        return screenSize[0] * 0.25;
+      if (radius > 0.15 * screenSize[0]) {
+        return screenSize[0] * 0.15;
       }
       if (radius < 0.01 * screenSize[0]) {
         return 0.01 * screenSize[0];
@@ -99,9 +69,9 @@ export function Donors() {
       }
     };
 
-    processedDonors.forEach((donor) => {
-      donor.radius = donationBubbleRadius(
-        donor.donations.reduce((a, c) => c.amount + a, 0),
+    processedDonors.forEach((bubble) => {
+      bubble.radius = donationBubbleRadius(
+        bubble.donor.donations.reduce((a, c) => c.amount + a, 0),
       );
     });
 
@@ -117,12 +87,12 @@ export function Donors() {
       const rSum = r1 + r2;
       const rDiff = Math.abs(r1 - r2);
 
-      return d === rSum || d === rDiff || d < rDiff || d < rSum;
+      return d < rDiff || d < rSum || d === rSum || d === rDiff;
     }
 
     const getNewPosition = (
-      parent: Donor,
-      child: Donor,
+      parent: DonorBubble,
+      child: DonorBubble,
       angle: number,
     ): { x: number; y: number } => {
       const distance = parent.radius + child.radius + 1;
@@ -132,26 +102,31 @@ export function Donors() {
       };
     };
 
-    const findSpaceForDonor = (
-      newChild: Donor,
-    ): { parent: Donor; x: number; y: number } | undefined => {
-      const leftLimit = -screenSize[0] / 2;
-      const rightLimit = screenSize[0] / 2;
-      const topLimit = -screenSize[1] / 2;
-      const radianQuarter = (Math.PI * 2) / 4;
+    const leftLimit = -screenSize[0] / 2;
+    const rightLimit = screenSize[0] / 2;
+    const topLimit = -screenSize[1] / 2;
+    const steps = 18;
+    const stepSize = (2 * Math.PI) / steps;
+    let clockwise = true;
 
+    const findSpaceForDonor = (
+      newChild: DonorBubble,
+    ): { parent: DonorBubble; x: number; y: number } | undefined => {
       for (const donor of processedDonors) {
-        if (donor.childsIsFull) continue;
+        for (let step = 0; step < steps; step++) {
+          clockwise = !clockwise;
 
-        const steps = 25;
+          let angle = step * stepSize;
+
+          if (clockwise) {
+            angle += Math.PI;
+          }
 
-        for (let step = 0; step < steps; step++) {
-          const angle = radianQuarter + ((2 * Math.PI) / steps) * step;
           const newPosition = getNewPosition(donor, newChild, angle);
 
           if (
-            newPosition.x - newChild.radius * 2 < leftLimit ||
-            newPosition.x + newChild.radius * 2 > rightLimit ||
+            newPosition.x - newChild.radius < leftLimit ||
+            newPosition.x + newChild.radius > rightLimit ||
             newPosition.y - newChild.radius * 2 < topLimit ||
             processedDonors.some((donor) =>
               circlesIntersect(
@@ -169,8 +144,6 @@ export function Donors() {
 
           return { parent: donor, x: newPosition.x, y: newPosition.y };
         }
-
-        donor.childsIsFull = true;
       }
     };
 
@@ -189,28 +162,27 @@ export function Donors() {
     return processedDonors;
   }, [donors, screenSize, totalDonated]);
 
-  // TODO fetch from db, modal to see donors, group donations by donor
   return (
     <div className="flex grow items-center justify-center">
       <div className="relative m-2 transition-all">
-        {processedDonors.map((donor) => {
+        {processedDonors.map(({ donor, radius, x, y }) => {
           return (
             <div
+              tabIndex={0}
               key={donor.user.id}
               className="absolute p-1"
               style={{
-                width: `${donor.radius * 2}px`,
-                height: `${donor.radius * 2}px`,
-                top: `-${donor.radius}px`,
+                width: `${radius * 2}px`,
+                height: `${radius * 2}px`,
+                top: `-${radius}px`,
                 borderRadius: `100%`,
-                left: `-${donor.radius}px`,
-                transform: `translate(${donor.x}px, ${donor.y}px)`,
+                left: `-${radius}px`,
+                transform: `translate(${x}px, ${y}px)`,
               }}
             >
               <Donor
                 className="flex h-full w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-full bg-cover bg-center bg-no-repeat transition-transform hover:scale-[1.03]"
-                user={donor.user}
-                donations={donor.donations}
+                donor={donor}
               />
             </div>
           );
diff --git a/apps/website/src/server/api/root.ts b/apps/website/src/server/api/root.ts
index ab0bebd3a..efc50de9d 100644
--- a/apps/website/src/server/api/root.ts
+++ b/apps/website/src/server/api/root.ts
@@ -2,6 +2,7 @@ import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
 import { botRouter } from "./routers/bot";
 import { demoServersRouter } from "./routers/demoServers";
 import { discordRouter } from "./routers/discord";
+import { donorRouter } from "./routers/donor";
 import { guildRouter } from "./routers/guild";
 import { sessionRouter } from "./routers/session";
 import { userRouter } from "./routers/user";
@@ -18,6 +19,7 @@ export const appRouter = createTRPCRouter({
   discord: discordRouter,
   bot: botRouter,
   demoServers: demoServersRouter,
+  donor: donorRouter,
 });
 
 // export type definition of API
diff --git a/apps/website/src/server/api/routers/donor.ts b/apps/website/src/server/api/routers/donor.ts
new file mode 100644
index 000000000..7f1d77e56
--- /dev/null
+++ b/apps/website/src/server/api/routers/donor.ts
@@ -0,0 +1,50 @@
+import type { DonationData } from "@mc/common/Donations";
+import type { DiscordUser } from "@mc/validators/DiscordUser";
+import type { DefaultUserAvatarAssets } from "discord-api-types/v10";
+import { CDNRoutes, RouteBases } from "discord-api-types/v10";
+
+import { Donations } from "@mc/common/Donations";
+
+import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+import { botDataExchangeConsumer } from "../services/botDataExchangeConsumer";
+
+function fetchUsers(users: string[]): Promise<DiscordUser[]> {
+  return Promise.all(
+    users.map((id) =>
+      botDataExchangeConsumer.discord.getUser.query({ id }).catch(
+        () =>
+          ({
+            id,
+            username: "Unknown",
+            discriminator: "0",
+            avatar:
+              RouteBases.cdn +
+              CDNRoutes.defaultUserAvatar(
+                Number((BigInt(id) >> 22n) % 6n) as DefaultUserAvatarAssets,
+              ),
+          }) as DiscordUser,
+      ),
+    ),
+  );
+}
+
+export const donorRouter = createTRPCRouter({
+  geAll: publicProcedure.query(async () => {
+    const donations = await Donations.getAll();
+    const donationsGroupedByUsers = new Map<string, DonationData[]>(
+      donations.map((donation) => [donation.user, []]),
+    );
+    for (const donation of donations) {
+      donationsGroupedByUsers.get(donation.user)?.push(donation);
+    }
+
+    const discordUsers = await fetchUsers([...donationsGroupedByUsers.keys()]);
+
+    return [
+      ...discordUsers.map((user) => ({
+        user,
+        donations: donationsGroupedByUsers.get(user.id) ?? [],
+      })),
+    ];
+  }),
+});
diff --git a/packages/common/src/Donations.ts b/packages/common/src/Donations.ts
new file mode 100644
index 000000000..6fb031f24
--- /dev/null
+++ b/packages/common/src/Donations.ts
@@ -0,0 +1,9 @@
+import { db } from "@mc/db";
+
+export type DonationData = Awaited<ReturnType<typeof db.donation.update>>;
+
+export const Donations = {
+  getAll: async () => {
+    return await db.donation.findMany({});
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e378ef32..750204ee9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,13 +146,13 @@ importers:
         version: 5.59.0(react@18.3.1)
       '@trpc/client':
         specifier: next
-        version: 11.0.0-rc.590(@trpc/server@11.0.0-rc.590)
+        version: 11.0.0-rc.593(@trpc/server@11.0.0-rc.593)
       '@trpc/react-query':
         specifier: next
-        version: 11.0.0-rc.590(@tanstack/react-query@5.59.0(react@18.3.1))(@trpc/client@11.0.0-rc.590(@trpc/server@11.0.0-rc.590))(@trpc/server@11.0.0-rc.590)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+        version: 11.0.0-rc.593(@tanstack/react-query@5.59.0(react@18.3.1))(@trpc/client@11.0.0-rc.593(@trpc/server@11.0.0-rc.593))(@trpc/server@11.0.0-rc.593)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@trpc/server':
         specifier: next
-        version: 11.0.0-rc.590
+        version: 11.0.0-rc.593
       '@tsparticles/basic':
         specifier: ^3.5.0
         version: 3.5.0
@@ -324,10 +324,10 @@ importers:
         version: 1.2.1(ioredis@5.4.1)
       '@trpc/client':
         specifier: next
-        version: 11.0.0-rc.590(@trpc/server@11.0.0-rc.590)
+        version: 11.0.0-rc.593(@trpc/server@11.0.0-rc.593)
       '@trpc/server':
         specifier: next
-        version: 11.0.0-rc.590
+        version: 11.0.0-rc.593
       discord.js:
         specifier: ^14.15.2
         version: 14.15.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)
@@ -377,6 +377,9 @@ importers:
       '@mc/redis':
         specifier: workspace:*
         version: link:../redis
+      '@mc/validators':
+        specifier: workspace:*
+        version: link:../validators
       '@t3-oss/env-nextjs':
         specifier: ^0.10.1
         version: 0.10.1(typescript@5.4.5)(zod@3.23.6)
@@ -542,7 +545,7 @@ importers:
         version: 11.0.0-next-beta.216
       '@trpc/server':
         specifier: next
-        version: 11.0.0-rc.590
+        version: 11.0.0-rc.593
       ioredis:
         specifier: ^5.4.1
         version: 5.4.1
@@ -2239,25 +2242,25 @@ packages:
   '@total-typescript/ts-reset@0.5.1':
     resolution: {integrity: sha512-AqlrT8YA1o7Ff5wPfMOL0pvL+1X+sw60NN6CcOCqs658emD6RfiXhF7Gu9QcfKBH7ELY2nInLhKSCWVoNL70MQ==}
 
-  '@trpc/client@11.0.0-rc.590':
-    resolution: {integrity: sha512-K74iJv7LhSwr99ExYtJgmu3ZjDi1xqCAOX8hunXgP+xBqej17kYRFnYgsPdKtxKfkbLdY3rWGsGX16p9Y5Z8FQ==}
+  '@trpc/client@11.0.0-rc.593':
+    resolution: {integrity: sha512-uQORhYMwUeY4TluQmhl6N183BiLZz5mgIzBynkSWKxtQ7TIHt+3iRzTSiJH1jTl3SEOtCacRHS6b1yvFP2RJXw==}
     peerDependencies:
-      '@trpc/server': 11.0.0-rc.590+3621497e1
+      '@trpc/server': 11.0.0-rc.593+f73cd3fd9
 
   '@trpc/core@11.0.0-next-beta.216':
     resolution: {integrity: sha512-dmdSFeSzArkmdZvnymoQwAju0QBODC3PhLgBKTYgVIj0HATE/OJsPAKOxiqdcgm3YyN/zABm+ntiYmjLBJzTCA==}
 
-  '@trpc/react-query@11.0.0-rc.590':
-    resolution: {integrity: sha512-I94XfDnzkYze/T5+swewdWszjah/E0yaU7yowG1RzTta9KkERu/4gsHfH8+GtXPw/2tk5npW7TEjgN42KsKFUA==}
+  '@trpc/react-query@11.0.0-rc.593':
+    resolution: {integrity: sha512-T5abZpWKW+Ndk3SAGwXqRLnIXTpdiQd0OF5TqTGbE1RuAWVf6rOZJWSjxp0M16aypkc0uEDAUia912VnKhrOqA==}
     peerDependencies:
       '@tanstack/react-query': ^5.59.15
-      '@trpc/client': 11.0.0-rc.590+3621497e1
-      '@trpc/server': 11.0.0-rc.590+3621497e1
+      '@trpc/client': 11.0.0-rc.593+f73cd3fd9
+      '@trpc/server': 11.0.0-rc.593+f73cd3fd9
       react: '>=18.2.0'
       react-dom: '>=18.2.0'
 
-  '@trpc/server@11.0.0-rc.590':
-    resolution: {integrity: sha512-kjmP1cZVvgL+kqD4D69doVnhV78y/7pofyQB5cAuTU57L+5dkxeddyPSUTWmvjeGr3daVSSld22LgsnlF1IX3A==}
+  '@trpc/server@11.0.0-rc.593':
+    resolution: {integrity: sha512-ihZNf7nM3OriZkkuOUFjuB51FJdtCXZUUj8FIXkq0VXF9VmMOD7j4QTl5YojIzMTJBMGUK9VADcO0shgELEmyw==}
 
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
@@ -6684,21 +6687,21 @@ snapshots:
 
   '@total-typescript/ts-reset@0.5.1': {}
 
-  '@trpc/client@11.0.0-rc.590(@trpc/server@11.0.0-rc.590)':
+  '@trpc/client@11.0.0-rc.593(@trpc/server@11.0.0-rc.593)':
     dependencies:
-      '@trpc/server': 11.0.0-rc.590
+      '@trpc/server': 11.0.0-rc.593
 
   '@trpc/core@11.0.0-next-beta.216': {}
 
-  '@trpc/react-query@11.0.0-rc.590(@tanstack/react-query@5.59.0(react@18.3.1))(@trpc/client@11.0.0-rc.590(@trpc/server@11.0.0-rc.590))(@trpc/server@11.0.0-rc.590)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@trpc/react-query@11.0.0-rc.593(@tanstack/react-query@5.59.0(react@18.3.1))(@trpc/client@11.0.0-rc.593(@trpc/server@11.0.0-rc.593))(@trpc/server@11.0.0-rc.593)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/react-query': 5.59.0(react@18.3.1)
-      '@trpc/client': 11.0.0-rc.590(@trpc/server@11.0.0-rc.590)
-      '@trpc/server': 11.0.0-rc.590
+      '@trpc/client': 11.0.0-rc.593(@trpc/server@11.0.0-rc.593)
+      '@trpc/server': 11.0.0-rc.593
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
 
-  '@trpc/server@11.0.0-rc.590': {}
+  '@trpc/server@11.0.0-rc.593': {}
 
   '@tsconfig/node10@1.0.11': {}