diff --git a/shared/locales/de/website-donate.json b/shared/locales/de/website-donate.json
new file mode 100644
index 000000000..dd9f0b906
--- /dev/null
+++ b/shared/locales/de/website-donate.json
@@ -0,0 +1,35 @@
+{
+	"amount-currency": "{{ amount, currency }}",
+	"title": "Was ist dein durchschnittliches monatliches Einkommen?",
+	"how-to-pay": "Wie möchtest du bezahlen?",
+	"amount": "Betrag",
+	"button-text": "Einen Unterschied machen",
+	"donation-impact": {
+		"monthly-contribution": "Dein monatlicher Beitrag:",
+		"direct-payout": "Dein Beitrag wird direkt auf das Mobiltelefon der Social Income Empfänger:innen ausgezahlt.",
+		"your-impact": "Dein Einfluss:",
+		"0": "{{ amount, currency }} legt den Grundstein für eine bedeutende Sache. Es ermöglicht uns, einer Person in Not ein Social Income zu bieten.",
+		"1": "{{ amount, currency }} deckt mehr als ein Drittel eines Social Incomes für eine bedürftige Person.",
+		"2": "{{ amount, currency }} finanziert mehr als die Hälfte eines Social Incomes für eine Person.",
+		"3": "Großartig! Dein monatlicher Beitrag von {{ amount, currency }} ermöglicht es mindestens einer bedürftigen Person ein vollständiges Social Income bereitzustellen.",
+		"4": "{{ amount, currency }} ermöglicht ein Social Income für mehr als zwei bedürftige Personen.",
+		"5": "Wunderbar! Dein Beitrag von {{ amount, currency }} finanziert ein Social Income für mehr als drei bedürftige Personen.",
+		"6": "Dein Beitrag von {{ amount, currency }} sichert ein Social Income für mehr als vier bedürftige Personen.",
+		"7": "Dein Beitrag von {{ amount, currency }} sichert ein Social Income für mehr als fünf bedürftige Personen.",
+		"8": "Dein monatlicher Beitrag von {{ amount, currency }} ist außergewöhnlich, ebenso wie dein Einfluss."
+	},
+	"donation-interval": {
+		"1": {
+			"title": "Monatlich",
+			"text": "{{ amount, currency }} jeden Monat zahlen"
+		},
+		"3": {
+			"title": "Quartalsweise",
+			"text": "{{ amount, currency }} alle 3 Monate zahlen"
+		},
+		"12": {
+			"title": "Jährlich",
+			"text": "{{ amount, currency }} jedes Jahr zahlen"
+		}
+	}
+}
diff --git a/shared/locales/de/website-me.json b/shared/locales/de/website-me.json
index 4e0289f7c..46cf4a943 100644
--- a/shared/locales/de/website-me.json
+++ b/shared/locales/de/website-me.json
@@ -12,22 +12,23 @@
 		}
 	},
 	"contributions": {
-		"amount": "Amount",
-		"date": "Date",
-		"source": "Source",
+		"amount": "Betrag",
+		"date": "Datum",
+		"source": "Quelle",
 		"total": "Total",
+		"one-time-payment": "Neue einmalige Spende",
 		"amount-currency": "{{ amount, currency }}",
 		"sources": {
 			"benevity": "Benevity",
-			"cash": "Cash",
+			"cash": "Bar",
 			"stripe": "Stripe",
-			"wire-transfer": "Wire Transfer"
+			"wire-transfer": "Banküberweisung"
 		}
 	},
 	"subscriptions": {
-		"amount": "Amount",
-		"date": "Date",
-		"source": "Source",
+		"amount": "Betrag",
+		"date": "Datum",
+		"source": "Quelle",
 		"total": "Total",
 		"amount-currency": "{{ amount, currency }}",
 		"interval": "Interval",
diff --git a/shared/locales/en/website-donate.json b/shared/locales/en/website-donate.json
new file mode 100644
index 000000000..91c24d022
--- /dev/null
+++ b/shared/locales/en/website-donate.json
@@ -0,0 +1,35 @@
+{
+	"amount-currency": "{{ amount, currency }}",
+	"title": "What's your average monthly income?",
+	"how-to-pay": "How would you like to pay?",
+	"amount": "Amount",
+	"button-text": "Make a Difference",
+	"donation-impact": {
+		"monthly-contribution": "Your monthly contribution:",
+		"direct-payout": "The people in need receive your contribution directly on their mobile phones.",
+		"your-impact": "Your impact:",
+		"0": "{{ amount, currency }} lays the groundwork for a significant cause. It enables us to provide a Social Income to an individual facing hardship.",
+		"1": "{{ amount, currency }} pays for more than a third of a Social Income for one person in need.",
+		"2": "{{ amount, currency }} funds more than half of someone’s Social Income.",
+		"3": "Great! Your monthly contribution of {{ amount, currency }} will allow at least one person in need to receive a full Social Income.",
+		"4": "{{ amount, currency }} provides a Social Income for more than two people in need.",
+		"5": "Wonderful! Your contribution of {{ amount, currency }} funds a Social Income for more than three people in need.",
+		"6": "Your contribution of {{ amount, currency }} sustains a Social Income for more than four people in need.",
+		"7": "Your contribution of {{ amount, currency }} sustains a Social Income for more than five people in need.",
+		"8": "Your monthly contribution of {{ amount, currency }} is extraordinary, as well as your impact."
+	},
+	"donation-interval": {
+		"1": {
+			"title": "Monthly",
+			"text": "Pay {{ amount, currency }} every month"
+		},
+		"3": {
+			"title": "Quarterly",
+			"text": "Pay {{ amount, currency }} every 3 months"
+		},
+		"12": {
+			"title": "Yearly",
+			"text": "Pay {{ amount, currency }} every year"
+		}
+	}
+}
diff --git a/shared/locales/en/website-me.json b/shared/locales/en/website-me.json
index 0d0cbd0ae..92b89fac0 100644
--- a/shared/locales/en/website-me.json
+++ b/shared/locales/en/website-me.json
@@ -16,6 +16,7 @@
 		"date": "Date",
 		"source": "Source",
 		"total": "Total",
+		"one-time-payment": "New one-time donation",
 		"amount-currency": "{{ amount, currency }}",
 		"sources": {
 			"benevity": "Benevity",
diff --git a/ui/src/components/button.tsx b/ui/src/components/button.tsx
index 1f758ab60..3c7a48b59 100644
--- a/ui/src/components/button.tsx
+++ b/ui/src/components/button.tsx
@@ -42,7 +42,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const Comp = asChild ? Slot : 'button';
 		return (
 			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
-				{Icon && <Icon className={cn('h-4 w-4', { 'mr-2': size !== 'icon' })} />}
+				{Icon && <Icon className={cn('h-4 w-4', { 'mr-2': size !== 'icon', 'h-6 w-6': size === 'lg' })} />}
 				{children}
 			</Comp>
 		);
diff --git a/ui/src/components/typography/typography.tsx b/ui/src/components/typography/typography.tsx
index 3a53698bf..c45a84175 100644
--- a/ui/src/components/typography/typography.tsx
+++ b/ui/src/components/typography/typography.tsx
@@ -41,6 +41,8 @@ const FONT_COLOR_MAP: { [key in FontColor]: string } = {
 	'destructive-foreground': 'text-destructive-foreground',
 	muted: 'text-muted',
 	'muted-foreground': 'text-muted-foreground',
+	card: 'text-card',
+	'card-foreground': 'text-card-foreground',
 	popover: 'text-popover',
 	'popover-foreground': 'text-popover-foreground',
 };
@@ -67,26 +69,17 @@ export type TypographyProps<C extends ElementType> = {
 } & ComponentPropsWithoutRef<C>;
 
 export function Typography<C extends ElementType = 'p'>(
-	{
-		as,
-		size = 'md',
-		weight = 'normal',
-		color = 'foreground',
-		lineHeight = 'normal',
-		className,
-		children,
-		...props
-	}: TypographyProps<C>,
+	{ as, size, weight, color, lineHeight, className, children, ...props }: TypographyProps<C>,
 ) {
 	const Component = as || 'p';
 	return (
 		<Component
 			className={twMerge(
 				classNames(
-					FONT_SIZE_MAP[size],
-					FONT_WEIGHT_MAP[weight],
-					FONT_COLOR_MAP[color],
-					LINE_HEIGHT_MAP[lineHeight],
+					size && FONT_SIZE_MAP[size],
+					weight && FONT_WEIGHT_MAP[weight],
+					color && FONT_COLOR_MAP[color],
+					lineHeight && LINE_HEIGHT_MAP[lineHeight],
 					className,
 				),
 			)}
diff --git a/ui/src/globals.css b/ui/src/globals.css
index 38ed416b2..1d44c098c 100644
--- a/ui/src/globals.css
+++ b/ui/src/globals.css
@@ -46,6 +46,9 @@
 		--background: hsl(216, 54%, 55%);
 		--foreground: hsl(60 9.1% 97.8%);
 
+		--card: hsl(216, 54%, 95%);
+		--card-foreground: hsl(0, 0%, 10%);
+
 		--primary: hsl(48, 100%, 49%);
 		--primary-foreground: hsl(0, 0%, 20%);
 	}
diff --git a/ui/src/interfaces/color.ts b/ui/src/interfaces/color.ts
index 4667048ce..ae668513a 100644
--- a/ui/src/interfaces/color.ts
+++ b/ui/src/interfaces/color.ts
@@ -45,6 +45,8 @@ export type FontColor = Extract<
 	| 'muted-foreground'
 	| 'accent'
 	| 'accent-foreground'
+	| 'card'
+	| 'card-foreground'
 	| 'popover'
 	| 'popover-foreground'
 >;
diff --git a/website/src/app/[lang]/[region]/(website)/(home)/section-1-form.tsx b/website/src/app/[lang]/[region]/(website)/(home)/section-1-form.tsx
index 144c80fed..1249686b0 100644
--- a/website/src/app/[lang]/[region]/(website)/(home)/section-1-form.tsx
+++ b/website/src/app/[lang]/[region]/(website)/(home)/section-1-form.tsx
@@ -38,7 +38,7 @@ export default function Section1Form({ translations, lang, region }: Section1Inp
 	});
 
 	const onSubmit = (values: FormSchema) => {
-		router.push(`/donate/individual?amount=${(Number(values.amount) / 100).toFixed(2)}`);
+		router.push(`/${lang}/${region}/donate/individual?amount=${Number(values.amount).toFixed(0)}`);
 	};
 
 	return (
@@ -51,7 +51,7 @@ export default function Section1Form({ translations, lang, region }: Section1Inp
 							control={form.control}
 							name="amount"
 							render={({ field }) => (
-								<FormItem className="sm:basis-2/3">
+								<FormItem className="flex-1">
 									<FormControl>
 										<Input className="h-16 text-lg" placeholder={translations.amount} {...field} />
 									</FormControl>
diff --git a/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx b/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx
index 8853c938f..bde558166 100644
--- a/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx
+++ b/website/src/app/[lang]/[region]/(website)/about-us/(sections)/team.tsx
@@ -107,7 +107,7 @@ const groups: Group[] = [
 export default async function Team({ params }: DefaultPageProps) {
 	const translator = await Translator.getInstance({ language: params.lang, namespaces: ['countries', 'website-team'] });
 	return (
-		<BaseContainer className="py-8">
+		<BaseContainer id="team" className="py-8">
 			<Typography as="h3" size="xl" color="muted-foreground" className="mb-4">
 				{translator.t('header')}
 			</Typography>
diff --git a/website/src/app/[lang]/[region]/(website)/me/payments/page.tsx b/website/src/app/[lang]/[region]/(website)/me/payments/page.tsx
index dd2e0a8f9..3e3861fa3 100644
--- a/website/src/app/[lang]/[region]/(website)/me/payments/page.tsx
+++ b/website/src/app/[lang]/[region]/(website)/me/payments/page.tsx
@@ -1,20 +1,29 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { ContributionsTable } from '@/app/[lang]/[region]/(website)/me/payments/contributions-table';
+import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { Button } from '@socialincome/ui';
+import Link from 'next/link';
 
-export default async function Page({ params }: DefaultPageProps) {
-	const translator = await Translator.getInstance({ language: params.lang, namespaces: ['website-me'] });
+export default async function Page({ params: { lang, region } }: DefaultPageProps) {
+	const translator = await Translator.getInstance({ language: lang, namespaces: ['website-me'] });
 
 	return (
-		<div className="grid grid-cols-1 gap-4">
+		<div className="flex flex-col">
 			<ContributionsTable
+				lang={lang}
+				region={region}
 				translations={{
 					date: translator.t('contributions.date'),
 					amount: translator.t('contributions.amount'),
 					source: translator.t('contributions.source'),
 				}}
-				{...params}
 			/>
+			<Link href={`/${lang}/${region}/donate/one-time`}>
+				<Button Icon={PlusCircleIcon} variant="ghost" size="lg" className="w-full">
+					{translator.t('contributions.one-time-payment')}
+				</Button>
+			</Link>
 		</div>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/(website)/me/personal-info/page.tsx b/website/src/app/[lang]/[region]/(website)/me/personal-info/page.tsx
index f9cf80d5a..45f05b0cd 100644
--- a/website/src/app/[lang]/[region]/(website)/me/personal-info/page.tsx
+++ b/website/src/app/[lang]/[region]/(website)/me/personal-info/page.tsx
@@ -111,7 +111,7 @@ export default function Page({ params }: DefaultPageProps) {
 						<FormItem>
 							<FormLabel>First name</FormLabel>
 							<FormControl>
-								<Input type="text" placeholder="First name" {...field} />
+								<Input type="text" {...field} />
 							</FormControl>
 							<FormMessage />
 						</FormItem>
@@ -124,7 +124,7 @@ export default function Page({ params }: DefaultPageProps) {
 						<FormItem>
 							<FormLabel>Last name</FormLabel>
 							<FormControl>
-								<Input type="text" placeholder="Last name" {...field} />
+								<Input type="text" {...field} />
 							</FormControl>
 							<FormMessage />
 						</FormItem>
@@ -137,7 +137,7 @@ export default function Page({ params }: DefaultPageProps) {
 						<FormItem>
 							<FormLabel>Email</FormLabel>
 							<FormControl>
-								<Input type="email" placeholder="Email" {...field} />
+								<Input type="email" {...field} />
 							</FormControl>
 							<FormMessage />
 						</FormItem>
@@ -173,7 +173,7 @@ export default function Page({ params }: DefaultPageProps) {
 							<FormItem className="flex w-3/4 flex-col">
 								<FormLabel>Street</FormLabel>
 								<FormControl>
-									<Input type="text" placeholder="street" {...field} />
+									<Input type="text" {...field} />
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -186,7 +186,7 @@ export default function Page({ params }: DefaultPageProps) {
 							<FormItem className="flex w-1/4 flex-col">
 								<FormLabel>Number</FormLabel>
 								<FormControl>
-									<Input type="text" placeholder="streetNumber" {...field} />
+									<Input type="text" {...field} />
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -201,7 +201,7 @@ export default function Page({ params }: DefaultPageProps) {
 							<FormItem className="flex w-1/4 flex-col">
 								<FormLabel>Zip</FormLabel>
 								<FormControl>
-									<Input type="number" placeholder="zip" {...field} />
+									<Input type="number" {...field} />
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -214,7 +214,7 @@ export default function Page({ params }: DefaultPageProps) {
 							<FormItem className="flex w-3/4 flex-col">
 								<FormLabel>City</FormLabel>
 								<FormControl>
-									<Input type="text" placeholder="city" {...field} />
+									<Input type="text" {...field} />
 								</FormControl>
 								<FormMessage />
 							</FormItem>
@@ -226,7 +226,7 @@ export default function Page({ params }: DefaultPageProps) {
 					name="language"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Language</FormLabel>
+							<FormLabel>Communication Language</FormLabel>
 							<Select onValueChange={field.onChange}>
 								<FormControl>
 									<SelectTrigger>
diff --git a/website/src/app/[lang]/[region]/(website)/me/user-context-provider.tsx b/website/src/app/[lang]/[region]/(website)/me/user-context-provider.tsx
index 7f2b85c5b..ed2cfca66 100644
--- a/website/src/app/[lang]/[region]/(website)/me/user-context-provider.tsx
+++ b/website/src/app/[lang]/[region]/(website)/me/user-context-provider.tsx
@@ -2,7 +2,6 @@
 
 import { User, USER_FIRESTORE_PATH } from '@socialincome/shared/src/types/user';
 import { useQuery } from '@tanstack/react-query';
-import assert from 'assert';
 import { collection, getDocs, query, QueryDocumentSnapshot, where } from 'firebase/firestore';
 import { redirect } from 'next/navigation';
 import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
@@ -18,8 +17,7 @@ export const useUserContext = () => useContext(UserContext);
 
 export function UserContextProvider({ children }: PropsWithChildren) {
 	const firestore = useFirestore();
-	const { data: authUser } = useUser();
-
+	const { data: authUser, status: authUserStatus } = useUser();
 	const { data: user, refetch } = useQuery({
 		queryKey: ['UserContextProvider', authUser?.uid, firestore],
 		queryFn: async () => {
@@ -27,18 +25,23 @@ export function UserContextProvider({ children }: PropsWithChildren) {
 				let snapshot = await getDocs(
 					query(collection(firestore, USER_FIRESTORE_PATH), where('authUserId', '==', authUser?.uid)),
 				);
-				assert(snapshot.size === 1);
-				return snapshot.docs[0] as QueryDocumentSnapshot<User>;
-			} else return null;
+				if (snapshot.size === 1) {
+					return snapshot.docs[0] as QueryDocumentSnapshot<User>;
+				}
+				return null;
+			}
+			return null;
 		},
 		staleTime: 1000 * 60 * 60, // 1 hour
 	});
 
 	useEffect(() => {
-		if (user === null) {
+		if (user === null && authUserStatus === 'success') {
+			// If the user is null, it couldn't be found in the database, so redirect to the login page.
+			// If the user is undefined, the query is still loading, so no redirect.
 			redirect('../login');
 		}
-	}, [user]);
+	}, [user, authUserStatus]);
 
 	if (user) {
 		return <UserContext.Provider value={{ user, refetch }}>{children}</UserContext.Provider>;
diff --git a/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx b/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx
new file mode 100644
index 000000000..441c6b91e
--- /dev/null
+++ b/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx
@@ -0,0 +1,261 @@
+'use client';
+
+import { DefaultParams } from '@/app/[lang]/[region]';
+import { CreatePaymentData } from '@/app/api/stripe/checkout/new-payment/route';
+import { useI18n } from '@/app/context-providers';
+import { CurrencySelector } from '@/components/ui/currency-selector';
+import { useTranslator } from '@/hooks/useTranslator';
+import { websiteCurrencies, WebsiteLanguage } from '@/i18n';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+	Button,
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormMessage,
+	Input,
+	RadioGroup,
+	Typography,
+} from '@socialincome/ui';
+import classNames from 'classnames';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm, useFormContext, useWatch } from 'react-hook-form';
+import { useUser } from 'reactfire';
+import Stripe from 'stripe';
+import * as z from 'zod';
+
+const DONATION_INTERVALS = ['1', '3', '12'] as const;
+type DonationInterval = (typeof DONATION_INTERVALS)[number];
+
+const getTextOption = (amount: number) => {
+	const thresholds = [10, 15, 30, 60, 90, 120, 150, 300, Infinity];
+	const index = thresholds.findIndex((threshold) => amount < threshold);
+	return index === -1 ? 0 : index;
+};
+
+const getDonationAmount = (amount: number, donationInterval: DonationInterval) => {
+	return amount * 0.01 * Number(donationInterval);
+};
+
+type DonationImpactTranslations = {
+	yourMonthlyContribution: string;
+	directPayout: string;
+	yourImpact: string;
+};
+
+type DonationImpactProps = {
+	lang: WebsiteLanguage;
+	translations: DonationImpactTranslations;
+};
+
+function DonationImpact({ lang, translations }: DonationImpactProps) {
+	const amount = useWatch({ name: 'monthlyIncome' }) * 0.01;
+	const translator = useTranslator(lang, 'website-donate');
+	const { currency } = useI18n();
+	const textOption = getTextOption(amount);
+
+	return (
+		<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+			<div className="space-y-2">
+				<Typography size="lg" weight="semibold">
+					{translations.yourMonthlyContribution}
+				</Typography>
+				<Typography size="xl" weight="bold">
+					{translator?.t('amount-currency', {
+						context: { amount: amount, currency: currency, locale: lang },
+					})}
+				</Typography>
+				<Typography size="md">{translations.directPayout}</Typography>
+			</div>
+			<div className="space-y-2">
+				<Typography size="lg" weight="semibold">
+					{translations.yourImpact}
+				</Typography>
+				<Typography>
+					{translator?.t(`donation-impact.${textOption}`, {
+						context: { amount: amount, currency: currency, locale: lang },
+					})}
+				</Typography>
+			</div>
+		</div>
+	);
+}
+
+type RadioGroupFormItemProps = {
+	active: boolean;
+	donationInterval: DonationInterval;
+	title: string;
+	lang: WebsiteLanguage;
+};
+
+function RadioGroupFormItem({ active, title, donationInterval, lang }: RadioGroupFormItemProps) {
+	const monthlyIncome = useWatch({ name: 'monthlyIncome' });
+	const translator = useTranslator(lang, 'website-donate');
+	const { currency } = useI18n();
+	const [previewAmount, setPreviewAmount] = useState(getDonationAmount(monthlyIncome, donationInterval));
+	const { setValue } = useFormContext<{ donationInterval: DonationInterval }>();
+
+	useEffect(() => {
+		setPreviewAmount(getDonationAmount(monthlyIncome, donationInterval));
+	}, [monthlyIncome, donationInterval]);
+
+	return (
+		<FormItem>
+			<FormControl
+				className={classNames(
+					'flex h-full flex-1 cursor-pointer flex-row rounded-lg border-2 p-4 shadow-sm focus:outline-none',
+					{ 'border-si-yellow': active },
+				)}
+			>
+				<div onClick={() => setValue('donationInterval', donationInterval)}>
+					<div className="flex flex-1">
+						<div className="flex flex-col space-y-1">
+							<Typography weight="bold">{title}</Typography>
+							<Typography size="sm">
+								{translator?.t(`donation-interval.${donationInterval}.text`, {
+									context: { amount: previewAmount, currency: currency, locale: lang },
+								})}
+							</Typography>
+						</div>
+					</div>
+					<CheckCircleIcon
+						className={classNames(!active ? 'invisible' : '', 'text-si-yellow h-5 w-5')}
+						aria-hidden="true"
+					/>
+				</div>
+			</FormControl>
+		</FormItem>
+	);
+}
+
+type DonationFormProps = {
+	amount?: number;
+	translations: {
+		title: string;
+		amount: string;
+		howToPay: string;
+		buttonText: string;
+		donationImpact: DonationImpactTranslations;
+	};
+} & DefaultParams;
+
+export function DonationForm({ amount, translations, lang, region }: DonationFormProps) {
+	const router = useRouter();
+	const { data: authUser } = useUser();
+	const { currency } = useI18n();
+
+	const formSchema = z.object({
+		monthlyIncome: z.coerce.number(),
+		donationInterval: z.enum(DONATION_INTERVALS),
+	});
+	type FormSchema = z.infer<typeof formSchema>;
+
+	const form = useForm<FormSchema>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { donationInterval: '1', monthlyIncome: amount || ('' as any) },
+	});
+
+	const onSubmit = async (values: FormSchema) => {
+		const authToken = await authUser?.getIdToken(true);
+		const data: CreatePaymentData = {
+			amount: getDonationAmount(values.monthlyIncome, values.donationInterval) * 100, // The amount is in cents, so we need to multiply by 100 to get the correct amount.
+			intervalCount: Number(values.donationInterval),
+			currency: currency,
+			successUrl: `${window.location.origin}/${lang}/${region}/donate/success?stripeCheckoutSessionId={CHECKOUT_SESSION_ID}`,
+			recurring: true,
+			firebaseAuthToken: authToken,
+		};
+		const response = await fetch('/api/stripe/checkout/new-payment', {
+			method: 'POST',
+			body: JSON.stringify(data),
+		});
+		const { url } = (await response.json()) as Stripe.Response<Stripe.Checkout.Session>;
+		// This sends the user to stripe.com where payment is completed
+		if (url) router.push(url);
+	};
+
+	return (
+		<div className="flex flex-col">
+			<Typography weight="bold" size="3xl" className="mb-12 text-center">
+				{translations.title}
+			</Typography>
+			<Form {...form}>
+				<form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+					<div className="mb-2 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0 md:items-center">
+						<FormField
+							control={form.control}
+							name="monthlyIncome"
+							render={({ field }) => (
+								<FormItem className="flex-1">
+									<FormControl>
+										<Input className="h-16 text-lg" placeholder={translations.amount} {...field} />
+									</FormControl>
+								</FormItem>
+							)}
+						/>
+						<CurrencySelector className="h-16 w-full sm:flex-1" currencies={websiteCurrencies} fontSize="lg" />
+					</div>
+					{form.watch('monthlyIncome') > 0 && (
+						<Card>
+							<CardHeader>
+								<DonationImpact lang={lang} translations={translations.donationImpact} />
+							</CardHeader>
+							<CardContent className="mt-8">
+								<Typography size="lg" weight="semibold" className="mb-4">
+									{translations.howToPay}
+								</Typography>
+								<FormField
+									control={form.control}
+									name="donationInterval"
+									render={({ field }) => (
+										<FormItem className="space-y-3">
+											<FormControl>
+												<RadioGroup
+													onValueChange={field.onChange}
+													defaultValue={field.value}
+													className="grid grid-cols-1 place-items-stretch gap-4 md:grid-cols-3"
+												>
+													<RadioGroupFormItem
+														active={field.value === '1'}
+														donationInterval="1"
+														title="Monthly"
+														lang={lang}
+													/>
+													<RadioGroupFormItem
+														active={field.value === '3'}
+														donationInterval="3"
+														title="Quarterly"
+														lang={lang}
+													/>
+													<RadioGroupFormItem
+														active={field.value === '12'}
+														donationInterval="12"
+														title="Yearly"
+														lang={lang}
+													/>
+												</RadioGroup>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</CardContent>
+							<CardFooter>
+								<Button size="lg" type="submit" className="w-full">
+									{translations.buttonText}
+								</Button>
+							</CardFooter>
+						</Card>
+					)}
+				</form>
+			</Form>
+		</div>
+	);
+}
diff --git a/website/src/app/[lang]/[region]/donate/individual/page.tsx b/website/src/app/[lang]/[region]/donate/individual/page.tsx
index f9786df9d..058660a86 100644
--- a/website/src/app/[lang]/[region]/donate/individual/page.tsx
+++ b/website/src/app/[lang]/[region]/donate/individual/page.tsx
@@ -1,172 +1,30 @@
-'use client';
-
 import { DefaultPageProps } from '@/app/[lang]/[region]';
-import { CreatePaymentData } from '@/app/api/stripe/checkout/new-payment/route';
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-	BaseContainer,
-	Button,
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormMessage,
-	Input,
-	RadioGroup,
-	Typography,
-} from '@socialincome/ui';
-import classNames from 'classnames';
-import { useRouter } from 'next/navigation';
-import { UseFormReturn, useForm } from 'react-hook-form';
-import { useUser } from 'reactfire';
-import Stripe from 'stripe';
-import * as z from 'zod';
-
-// TODO: i18n
-type RadioGroupFormItem = {
-	active: boolean;
-	value: '1' | '3' | '12';
-	title: string;
-	description: string;
-	form: UseFormReturn<{ amount: number; intervalCount: '1' | '3' | '12' }, any, undefined>;
-};
+import { DonationForm } from '@/app/[lang]/[region]/donate/individual/donation-form';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer } from '@socialincome/ui';
 
-function RadioGroupFormItem({ active, title, value, form, description }: RadioGroupFormItem) {
-	const updateForm = () => {
-		const annualAmount = (form.getValues('amount') / Number(form.getValues('intervalCount'))) * 12;
-		form.setValue('amount', (Number(value) / 12) * annualAmount);
-		form.setValue('intervalCount', value);
-	};
+export default async function Page({ params: { lang, region }, searchParams }: DefaultPageProps) {
+	const amount = Number(searchParams.amount) || undefined;
+	const translator = await Translator.getInstance({ language: lang, namespaces: ['website-donate'] });
 
 	return (
-		<FormItem>
-			<FormControl
-				className={classNames(
-					'flex flex-1 cursor-pointer flex-row rounded-lg border-2 p-4 shadow-sm focus:outline-none',
-					{
-						'border-si-yellow': active,
+		<BaseContainer className="mx-auto max-w-5xl pt-16">
+			<DonationForm
+				amount={amount}
+				lang={lang}
+				region={region}
+				translations={{
+					title: translator.t('title'),
+					amount: translator.t('amount'),
+					howToPay: translator.t('how-to-pay'),
+					buttonText: translator.t('button-text'),
+					donationImpact: {
+						yourMonthlyContribution: translator.t('donation-impact.monthly-contribution'),
+						directPayout: translator.t('donation-impact.direct-payout'),
+						yourImpact: translator.t('donation-impact.your-impact'),
 					},
-				)}
-			>
-				<div className="theme-default" onClick={updateForm}>
-					<span className="flex flex-1">
-						<span className="flex flex-col">
-							<Typography weight="bold">{title}</Typography>
-							<Typography size="sm">{description}</Typography>
-						</span>
-					</span>
-					<CheckCircleIcon
-						className={classNames(!active ? 'invisible' : '', 'text-si-yellow h-5 w-5')}
-						aria-hidden="true"
-					/>
-				</div>
-			</FormControl>
-		</FormItem>
-	);
-}
-
-export default function Page({ params, searchParams }: DefaultPageProps) {
-	const router = useRouter();
-	const { data: authUser } = useUser();
-
-	const formSchema = z.object({
-		amount: z.coerce.number(),
-		intervalCount: z.enum(['1', '3', '12']),
-	});
-	type FormSchema = z.infer<typeof formSchema>;
-
-	const form = useForm<FormSchema>({
-		resolver: zodResolver(formSchema),
-		defaultValues: { intervalCount: '1', amount: Number(searchParams.amount) || 50 },
-	});
-
-	const onSubmit = async (values: FormSchema) => {
-		const authToken = await authUser?.getIdToken(true);
-		const data: CreatePaymentData = {
-			amount: values.amount * 100, // The amount is in cents, so we need to multiply by 100 to get the correct amount.
-			intervalCount: Number(values.intervalCount),
-			successUrl: `${window.location.origin}/${params.lang}/${params.region}/donate/success?stripeCheckoutSessionId={CHECKOUT_SESSION_ID}`,
-			recurring: true,
-			firebaseAuthToken: authToken,
-		};
-		const response = await fetch('/api/stripe/checkout/new-payment', {
-			method: 'POST',
-			body: JSON.stringify(data),
-		});
-		const { url } = (await response.json()) as Stripe.Response<Stripe.Checkout.Session>;
-
-		// This sends the user to stripe.com where payment is completed
-		if (url) router.push(url);
-	};
-
-	return (
-		<BaseContainer className="flex flex-col items-center justify-center">
-			<Typography weight="bold" size="3xl" className="mb-12 text-center">
-				How would you like to pay?
-			</Typography>
-			<Form {...form}>
-				<form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
-					<FormField
-						control={form.control}
-						name="intervalCount"
-						render={({ field }) => (
-							<FormItem className="space-y-3">
-								<FormControl>
-									<RadioGroup
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-										className="grid grid-cols-3 gap-4"
-									>
-										<RadioGroupFormItem
-											form={form}
-											active={field.value === '1'}
-											value="1"
-											title="Monthly"
-											description="Pay every month"
-										/>
-										<RadioGroupFormItem
-											form={form}
-											active={field.value === '3'}
-											value="3"
-											title="Quarterly"
-											description="Pay every 3 months"
-										/>
-										<RadioGroupFormItem
-											form={form}
-											active={field.value === '12'}
-											value="12"
-											title="Yearly"
-											description="Pay every year"
-										/>
-									</RadioGroup>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<div className="flex-inline flex items-center justify-center space-x-4">
-						<FormField
-							control={form.control}
-							name="amount"
-							render={({ field }) => (
-								<FormItem>
-									<Typography size="lg" weight="bold">
-										Amount
-									</Typography>
-									<FormControl>
-										<Input type="number" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</div>
-					<Button size="lg" type="submit">
-						Start Donating
-					</Button>
-				</form>
-			</Form>
+				}}
+			/>
 		</BaseContainer>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/donate/one-time/page.tsx b/website/src/app/[lang]/[region]/donate/one-time/page.tsx
index 39f46c271..e213e6faf 100644
--- a/website/src/app/[lang]/[region]/donate/one-time/page.tsx
+++ b/website/src/app/[lang]/[region]/donate/one-time/page.tsx
@@ -5,7 +5,7 @@ import { BaseContainer, Typography } from '@socialincome/ui';
 // TODO: i18n
 export default function Page({ params }: DefaultPageProps) {
 	return (
-		<BaseContainer className="flex flex-col pt-16">
+		<BaseContainer className="mx-auto flex max-w-3xl flex-col pt-16">
 			<div className="flex flex-col items-center">
 				<Typography size="5xl" weight="semibold" color="si-yellow">
 					Your Donation
@@ -13,8 +13,7 @@ export default function Page({ params }: DefaultPageProps) {
 				<Typography size="3xl" weight="semibold" className="mt-4">
 					Make a one-time donation to Social Income
 				</Typography>
-
-				<div className="mt-16 w-full max-w-3xl">
+				<div className="mt-16 w-full">
 					<OneTimeDonationForm
 						lang={params.lang}
 						region={params.region}
diff --git a/website/src/app/api/stripe/checkout/new-payment/route.ts b/website/src/app/api/stripe/checkout/new-payment/route.ts
index 33ecb2fce..e46eed734 100644
--- a/website/src/app/api/stripe/checkout/new-payment/route.ts
+++ b/website/src/app/api/stripe/checkout/new-payment/route.ts
@@ -37,7 +37,7 @@ export async function POST(request: CreateSubscriptionRequest) {
 		mode: recurring ? 'subscription' : 'payment',
 		payment_method_types: ['card'],
 		customer: customerId,
-		customer_creation: customerId ? undefined : 'always',
+		customer_creation: customerId || recurring ? undefined : 'always',
 		line_items: [
 			{
 				price: price.id,
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index 5b4c53461..d951997fd 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -1,17 +1,16 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
 import { FooterClient } from '@/components/footer/footer-client';
 import { SILogo } from '@/components/logos/si-logo';
-import { websiteLanguages, websiteRegions } from '@/i18n';
+import { WebsiteLanguage, websiteRegions } from '@/i18n';
 import {
 	BriefcaseIcon,
 	EnvelopeIcon,
-	EnvelopeOpenIcon,
 	InformationCircleIcon,
 	ShieldCheckIcon,
 	UserCircleIcon,
 	UserGroupIcon,
 } from '@heroicons/react/24/solid';
-import { SiFacebook, SiInstagram, SiLinkedin, SiTwitter } from '@icons-pack/react-simple-icons';
+import { SiFacebook, SiGithub, SiInstagram, SiLinkedin, SiTwitter } from '@icons-pack/react-simple-icons';
 import { IconType } from '@icons-pack/react-simple-icons/types';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
@@ -27,9 +26,9 @@ type FooterLinkProps = {
 
 function FooterLink({ label, url, Icon, target = '_self' }: FooterLinkProps) {
 	return (
-		<Link href={url} className="group inline-flex items-center space-x-4" target={target}>
-			{Icon && <Icon className="group-hover:fill-base-content h-4 w-4 fill-neutral-600" />}
-			<Typography size="sm" className="group-hover:text-base-content text-neutral-600">
+		<Link href={url} className="group inline-flex items-center space-x-3" target={target}>
+			{Icon && <Icon className="group-hover:fill-base-content fill-muted-foreground h-4 w-4" />}
+			<Typography size="sm" className="group-hover:text-base-content text-muted-foreground">
 				{label}
 			</Typography>
 		</Link>
@@ -43,7 +42,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 		namespaces: ['common', 'website-common', 'website-me'],
 	});
 
-	const supportedTranslatedLanguages = websiteLanguages.map((lang) => {
+	const supportedTranslatedLanguages = (['de', 'en'] as WebsiteLanguage[]).map((lang) => {
 		return { translation: translator.t(`languages.${lang}`), code: lang };
 	});
 	const supportedTranslatedCountries = websiteRegions.map((region) => {
@@ -51,7 +50,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-muted" className="theme-default py-16">
+		<BaseContainer backgroundColor="bg-muted" className="theme-default pb-8 pt-16">
 			<div className="space-y-4">
 				<div className="flex flex-row items-center justify-between">
 					<SILogo className="fill-muted-foreground h-4" />
@@ -66,8 +65,8 @@ export default async function Footer({ lang, region }: DefaultParams) {
 				</div>
 				<hr className="border-muted-foreground"></hr>
 				<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
-					<div className="flex flex-col space-y-2">
-						<Typography className="mb-2" size="lg" weight="medium">
+					<div className="flex flex-col space-y-1">
+						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
 							Connect
 						</Typography>
 						<FooterLink Icon={EnvelopeIcon} label="Email" url="mailto:hello@socialincome.org" />
@@ -90,10 +89,16 @@ export default async function Footer({ lang, region }: DefaultParams) {
 							url="https://www.linkedin.com/company/socialincome"
 							target="_blank"
 						/>
-						<FooterLink Icon={EnvelopeOpenIcon} label="Newsletter" url={`/${lang}/${region}/updates`} target="_blank" />
+						<FooterLink
+							Icon={SiGithub}
+							label="GitHub"
+							url="https://github.com/socialincome-san/public"
+							target="_blank"
+						/>
+						{/*<FooterLink Icon={EnvelopeOpenIcon} label="Newsletter" url={`/${lang}/${region}/updates`} target="_blank" />*/}
 					</div>
-					<div className="flex flex-col space-y-2">
-						<Typography className="mb-2" size="lg" weight="medium">
+					<div className="flex flex-col space-y-1">
+						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
 							Resources
 						</Typography>
 						<FooterLink Icon={InformationCircleIcon} label="FAQ" url={`/${lang}/${region}/faq`} />
@@ -106,26 +111,26 @@ export default async function Footer({ lang, region }: DefaultParams) {
 							url={`/${lang}/${region}/terms-and-conditions`}
 						/>
 					</div>
-					<div className="flex flex-col space-y-2">
-						<Typography className="mb-2" size="lg" weight="medium">
+					<div className="flex flex-col space-y-1">
+						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
 							Our Work
 						</Typography>
-						<FooterLink label="How It Works" url={`/${lang}/${region}/our-work#process`} />
+						<FooterLink label="How It Works" url={`/${lang}/${region}/our-work#how-it-works`} />
 						<FooterLink label="Contributors" url={`/${lang}/${region}/our-work#contributors`} />
 						<FooterLink label="Recipients" url={`/${lang}/${region}/our-work#recipients`} />
-						<FooterLink label="What's Next" url={`/${lang}/${region}/our-work#next`} />
+						<FooterLink label="What's Next" url={`/${lang}/${region}/our-work#whats-next`} />
 					</div>
-					<div className="flex flex-col space-y-2">
-						<Typography className="mb-2" size="lg" weight="medium">
+					<div className="flex flex-col space-y-1">
+						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
 							About us
 						</Typography>
-						<FooterLink label="Our Mission" url={`/${lang}/${region}/about-us#about-us-1`} />
-						<FooterLink label="Why Contribute?" url={`/${lang}/${region}/about-us#motivations`} />
-						<FooterLink label="Team" url={`/${lang}/${region}/about-us#about-us-3`} />
-						<FooterLink label="Contact" url={`/${lang}/${region}/about-us#about-us-4`} />
+						<FooterLink label="Our Mission" url={`/${lang}/${region}/our-work#our-mission`} />
+						<FooterLink label="100% Model" url={`/${lang}/${region}/our-work#100-percent-model`} />
+						<FooterLink label="Team" url={`/${lang}/${region}/about-us#team`} />
+						<FooterLink label="Contact" url={`/${lang}/${region}/about-us#contact`} />
 					</div>
 				</div>
-				<div className="md:invisible">
+				<div className="flex md:hidden">
 					<FooterClient
 						lang={lang}
 						region={region}
diff --git a/website/src/i18n.ts b/website/src/i18n.ts
index 7a5966af9..e8610823a 100644
--- a/website/src/i18n.ts
+++ b/website/src/i18n.ts
@@ -1,3 +1,4 @@
+import { LANGUAGE_COOKIE, REGION_COOKIE } from '@/app/[lang]/[region]';
 import { LanguageCode } from '@socialincome/shared/src/types/language';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import langParser from 'accept-language-parser';
@@ -22,12 +23,30 @@ export const getCurrencyTranslations = (currencies: WebsiteCurrency[], translato
 		translation: translator.t(`currencies.${currency}`),
 	}));
 
-export const findBestLocale = (request: NextRequest): { region: WebsiteRegion; language: WebsiteLanguage } => {
-	const options = langParser.parse(request.headers.get('Accept-Language') || 'en');
-	// TODO: make sure country is supported
-	// TODO: save country/language/currency in cookie if manually updated
+export const findBestLocale = (
+	request: NextRequest,
+): {
+	region: WebsiteRegion;
+	language: WebsiteLanguage;
+} => {
+	/**
+	 * Check if the user has set a language and region cookie, and if they are valid. If so, return them.
+	 * Otherwise, try to find the best locale from the Accept-Language header, and if that fails, return the default locale.
+	 */
+	if (
+		request.cookies.has(LANGUAGE_COOKIE) &&
+		websiteLanguages.includes(request.cookies.get(LANGUAGE_COOKIE)!.value as WebsiteLanguage) &&
+		request.cookies.has(REGION_COOKIE) &&
+		websiteRegions.includes(request.cookies.get(REGION_COOKIE)!.value as WebsiteRegion)
+	) {
+		return {
+			language: request.cookies.get(LANGUAGE_COOKIE)!.value as WebsiteLanguage,
+			region: request.cookies.get(REGION_COOKIE)!.value as WebsiteRegion,
+		};
+	}
 
-	const requestCountry = request.geo?.country;
+	const options = langParser.parse(request.headers.get('Accept-Language') || 'en');
+	const requestRegion = request.geo?.country;
 	const bestOption = options.find(
 		(option) =>
 			option.code &&
@@ -39,7 +58,7 @@ export const findBestLocale = (request: NextRequest): { region: WebsiteRegion; l
 	return {
 		language: (bestOption?.code as WebsiteLanguage) || defaultLanguage,
 		region:
-			(websiteLanguages.includes(requestCountry as WebsiteLanguage) && (requestCountry as WebsiteRegion)) ||
+			(websiteRegions.includes(requestRegion as WebsiteRegion) && (requestRegion as WebsiteRegion)) ||
 			(bestOption?.region as WebsiteRegion) ||
 			defaultRegion,
 	};