diff --git a/admin/src/collections/Campaigns.ts b/admin/src/collections/Campaigns.ts
index e0d46b1e7..fb0f6c1cc 100644
--- a/admin/src/collections/Campaigns.ts
+++ b/admin/src/collections/Campaigns.ts
@@ -104,5 +104,17 @@ export const campaignsCollection = buildAuditedCollection<Campaign>({
 			enumValues: campaignStatusEnumValues,
 			validation: { required: true },
 		},
+		metadata_description: {
+			dataType: 'string',
+			name: 'Metadata Description',
+		},
+		metadata_ogImage: {
+			dataType: 'string',
+			name: 'Metadata Open Graph Image Path',
+		},
+		metadata_twitterImage: {
+			dataType: 'string',
+			name: 'Metadata Twitter Image Path',
+		},
 	}),
 });
diff --git a/shared/locales/de/website-donate.json b/shared/locales/de/website-donate.json
index 232ed32c2..a7d38feb6 100644
--- a/shared/locales/de/website-donate.json
+++ b/shared/locales/de/website-donate.json
@@ -1,12 +1,10 @@
 {
-	"metadata": {
-		"title": "Mein Beitrag | Social Income"
-	},
 	"amount-currency": "{{ amount, currency }}",
 	"title": "Was ist dein durchschnittliches monatliches Einkommen?",
 	"how-to-pay": "Wie möchtest du bezahlen?",
 	"amount": "Betrag",
 	"button-text": "Mache einen Unterschied",
+	"button-text-short": "Jetzt spenden",
 	"donation-impact": {
 		"monthly-contribution": "Dein monatlicher Beitrag:",
 		"direct-payout": "Dein Beitrag wird direkt auf das Mobiltelefon der Social Income Empfänger:innen ausgezahlt.",
@@ -92,7 +90,12 @@
 		},
 		"days-left_zero": "Letzter Tag",
 		"days-left_one": "Noch einen Tag bis zum Spendeschluss",
-		"days-left_other": "{{ count }} verbleibende Tage:",
-		"ended": "Die Kampagne ist geschlossen. Keine weiteren Spenden möglich."
+		"days-left_other": "{{ count }} verbleibende Tage",
+		"ended": "Die Kampagne ist beendet. Für reguläre Spenden verwende bitte die Hauptspendeseite.",
+		"card-title": "Mein Beitrag",
+		"about-si-title": "Über Social Income",
+		"about-si-text-1": "Social Income ist eine NGO mit Sitz in der Schweiz, die bedingungslose Geldüberweisungen per Mobiltelefon an Menschen in multidimensionaler Armut in Westafrika bereitstellt.",
+		"about-si-text-2": "Seit 2020 führt Social Income ein zeitlich unbegrenztes Programm für ein universelles Grundeinkommen in Sierra Leone durch.",
+		"about-si-link": "<a href='/faq' target=\"_blank\">Fragen und Antworten</a>"
 	}
 }
diff --git a/shared/locales/en/website-donate.json b/shared/locales/en/website-donate.json
index d949b9551..f1c8bb71b 100644
--- a/shared/locales/en/website-donate.json
+++ b/shared/locales/en/website-donate.json
@@ -1,12 +1,10 @@
 {
-	"metadata": {
-		"title": "My Contribution | Social Income"
-	},
 	"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",
+	"button-text-short": "Donate Now",
 	"donation-impact": {
 		"monthly-contribution": "Your monthly contribution",
 		"direct-payout": "The people in need receive your contribution directly on their mobile phones.",
@@ -92,7 +90,12 @@
 		},
 		"days-left_zero": "Last day left to contribute",
 		"days-left_one": "1 day left to contribute",
-		"days-left_other": "{{ count }} days left to contribute:",
-		"ended": "The campaign ended, no more donations possible."
+		"days-left_other": "{{ count }} days left to contribute",
+		"ended": "The campaign has ended.  For regular donations, please use the main donation page.",
+		"card-title": "My Contribution",
+		"about-si-title": "About Social Income",
+		"about-si-text-1": "Social Income is a nonprofit organization based in Switzerland that provides unconditional cash transfers via mobile phone to people living in multidimensional poverty in West Africa.",
+		"about-si-text-2": "Since 2020, Social Income has been running an open-ended universal basic income program in Sierra Leone.",
+		"about-si-link": "<a href='/faq' target=\"_blank\">Frequently Asked Questions</a>"
 	}
 }
diff --git a/shared/src/types/campaign.ts b/shared/src/types/campaign.ts
index 306e8a69c..cf0d11dfa 100644
--- a/shared/src/types/campaign.ts
+++ b/shared/src/types/campaign.ts
@@ -18,6 +18,9 @@ export type Campaign = {
 	goal_currency?: Currency;
 	end_date: Timestamp;
 	status: CampaignStatus;
+	metadata_description?: string;
+	metadata_ogImage?: string;
+	metadata_twitterImage?: string;
 };
 
 export enum CampaignStatus {
diff --git a/ui/src/components/progress.tsx b/ui/src/components/progress.tsx
index 003ca7945..b24bdb19d 100644
--- a/ui/src/components/progress.tsx
+++ b/ui/src/components/progress.tsx
@@ -10,13 +10,18 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
 	<ProgressPrimitive.Root
 		ref={ref}
-		className={cn('relative h-2 w-full overflow-hidden rounded-full bg-white', className)}
+		className={cn('bg-primary relative h-full w-full overflow-hidden rounded-full p-1', className)}
 		{...props}
 	>
-		<ProgressPrimitive.Indicator
-			className="bg-accent h-full w-full flex-1 transition-all"
-			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-		/>
+		<div className="relative h-full w-full">
+			<ProgressPrimitive.Indicator
+				className="bg-accent absolute bottom-0 left-0 top-0 h-full rounded-s-full transition-all"
+				style={{
+					width: `calc(${value || 0}%)`,
+					transform: 'translateX(0.1rem)',
+				}}
+			/>
+		</div>
 	</ProgressPrimitive.Root>
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
diff --git a/website/public/assets/metadata/og/campaign-ismatu-en.png b/website/public/assets/metadata/og/campaign-ismatu-en.png
new file mode 100644
index 000000000..6af08aca6
Binary files /dev/null and b/website/public/assets/metadata/og/campaign-ismatu-en.png differ
diff --git a/website/public/assets/metadata/twitter/campaign-ismatu-en.png b/website/public/assets/metadata/twitter/campaign-ismatu-en.png
new file mode 100644
index 000000000..8efedc177
Binary files /dev/null and b/website/public/assets/metadata/twitter/campaign-ismatu-en.png differ
diff --git a/website/src/app/[lang]/[region]/(website)/campaign/[campaign]/page.tsx b/website/src/app/[lang]/[region]/(website)/campaign/[campaign]/page.tsx
index e2fcb86be..f76e82f04 100644
--- a/website/src/app/[lang]/[region]/(website)/campaign/[campaign]/page.tsx
+++ b/website/src/app/[lang]/[region]/(website)/campaign/[campaign]/page.tsx
@@ -1,13 +1,24 @@
 import { DefaultPageProps } from '@/app/[lang]/[region]';
-import { Video } from '@/app/[lang]/[region]/(website)/(home)/(sections)/video';
 import OneTimeDonationForm from '@/app/[lang]/[region]/donate/one-time/one-time-donation-form';
+import { VimeoVideo } from '@/components/vimeo-video';
 import { firestoreAdmin } from '@/firebase-admin';
 import { WebsiteLanguage, WebsiteRegion } from '@/i18n';
+import { getMetadata } from '@/metadata';
 import { CAMPAIGN_FIRESTORE_PATH, Campaign, CampaignStatus } from '@socialincome/shared/src/types/campaign';
 import { daysUntilTs } from '@socialincome/shared/src/utils/date';
 import { getLatestExchangeRate } from '@socialincome/shared/src/utils/exchangeRates';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Typography } from '@socialincome/ui';
+import {
+	BaseContainer,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+	Table,
+	TableBody,
+	TableCell,
+	TableRow,
+	Typography,
+} from '@socialincome/ui';
 import { Progress } from '@socialincome/ui/src/components/progress';
 
 export type CampaignPageProps = {
@@ -18,8 +29,36 @@ export type CampaignPageProps = {
 	};
 } & DefaultPageProps;
 
+export async function generateMetadata({ params }: CampaignPageProps) {
+	const campaignDoc = await firestoreAdmin.collection<Campaign>(CAMPAIGN_FIRESTORE_PATH).doc(params.campaign).get();
+	const campaign = campaignDoc.data();
+	const campaignMetadata =
+		campaign?.metadata_description && campaign?.metadata_ogImage && campaign?.metadata_twitterImage
+			? {
+					title: campaign?.title,
+					description: campaign?.metadata_description,
+					openGraph: {
+						title: campaign?.title,
+						description: campaign?.metadata_description,
+						images: campaign?.metadata_ogImage,
+					},
+					twitter: {
+						title: campaign?.title,
+						card: 'summary_large_image',
+						site: '@so_income',
+						creator: '@so_income',
+						images: campaign?.metadata_twitterImage,
+					},
+			  }
+			: undefined;
+	return getMetadata(params.lang, 'website-donate', campaignMetadata);
+}
+
 export default async function Page({ params }: CampaignPageProps) {
-	const translator = await Translator.getInstance({ language: params.lang, namespaces: 'website-donate' });
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-donate', 'website-videos'],
+	});
 
 	const campaignDoc = await firestoreAdmin.collection<Campaign>(CAMPAIGN_FIRESTORE_PATH).doc(params.campaign).get();
 	const campaign = campaignDoc.data();
@@ -47,127 +86,221 @@ export default async function Page({ params }: CampaignPageProps) {
 
 	return (
 		<>
-			<BaseContainer className="-mx-2 flex flex-wrap">
-				<div className="mb-4 w-full px-2 lg:w-1/2">
-					<Typography size="xl" weight="bold" color="accent">
-						{translator.t('campaign.by', { context: { creator: campaign.creator_name } })}
-					</Typography>
-					<Typography size="5xl" weight="bold" color="accent" className="mt-2">
-						{campaign.title}
-					</Typography>
-				</div>
-			</BaseContainer>
-			<BaseContainer className="-mx-2 flex flex-wrap">
-				<div className="mb-4 w-full px-2 lg:w-1/2">
-					<Typography size="lg" weight="medium">
-						{campaign.description}
-					</Typography>
-				</div>
-				<div className="mb-4 w-full px-2  lg:w-1/2">
-					<div>
-						{!campaign.goal && (
-							<div className="mb-4 flex flex-col items-center">
-								<Typography size="2xl" weight="bold" color="accent">
-									{translator?.t('campaign.without-goal.collected', {
-										context: {
-											count: contributions,
-											amount: amountCollected,
-											currency: campaign.goal_currency,
-											total: campaign.goal,
-										},
-									})}
+			<BaseContainer>
+				<div className="py-12">
+					<div className="grid grid-cols-1 gap-20 lg:grid-cols-2">
+						<div className="flex flex-col justify-center gap-3">
+							<div>
+								<Typography size="xl" color="primary">
+									{translator.t('campaign.by', { context: { creator: campaign.creator_name } })}
 								</Typography>
 							</div>
-						)}
-						{percentageCollected !== undefined && (
-							<div className={'mb-6'}>
-								<div className=" mb-1 flex font-medium">
-									<div className="text-accent w-1/2">
-										{translator.t('campaign.with-goal.collected-percentage', {
-											context: {
-												percentage: percentageCollected,
-											},
-										})}
+							<div>
+								<Typography weight="medium" color="primary" style={{ lineHeight: '70px' }} className="mt-2 text-[4rem]">
+									{campaign.title}
+								</Typography>
+							</div>
+							<div className="my-8">
+								<Typography size="2xl" color="primary">
+									{campaign.description}
+								</Typography>
+							</div>
+							<div>
+								{!campaign.goal && (
+									<div className="mb-4 flex flex-col">
+										<Typography size="2xl" weight="medium" color="accent">
+											{translator?.t('campaign.without-goal.collected', {
+												context: {
+													count: contributions,
+													amount: amountCollected,
+													currency: campaign.goal_currency,
+													total: campaign.goal,
+												},
+											})}
+										</Typography>
 									</div>
-									<div className="text-primary w-1/2 text-right">{translator.t('campaign.with-goal.goal-title')}</div>
-								</div>
-								<div className="w-full">
-									<Progress value={percentageCollected} className={'h-5 '} />
-								</div>
-								<div className=" mt-1 flex font-medium">
-									<div className="text-accent w-1/2">
-										{translator.t('campaign.with-goal.collected-amount', {
-											context: {
-												count: contributions,
-												amount: amountCollected,
-												currency: campaign.goal_currency,
-											},
-										})}
+								)}
+								{percentageCollected !== undefined && (
+									<div>
+										<div className="flex pb-2">
+											<div className="flex-1 text-left">
+												<Typography size="md" color="primary">
+													{translator.t('campaign.with-goal.collected-percentage', {
+														context: {
+															percentage: percentageCollected,
+														},
+													})}
+												</Typography>
+											</div>
+											<div className="flex-1 text-right">
+												<Typography size="md" color="primary">
+													{translator.t('campaign.with-goal.goal-title')}
+												</Typography>
+											</div>
+										</div>
+										<div>
+											<Progress value={percentageCollected} className={'h-6'} />
+										</div>
+										<div className="flex pt-2">
+											<div className="flex-1 text-left">
+												<Typography size="md" color="primary">
+													{translator.t('campaign.with-goal.collected-amount', {
+														context: {
+															count: contributions,
+															amount: amountCollected,
+															currency: campaign.goal_currency,
+														},
+													})}
+												</Typography>
+											</div>
+											<div className="flex-1 text-right">
+												<Typography size="md" color="primary">
+													{translator.t('campaign.with-goal.goal-amount', {
+														context: {
+															amount: campaign.goal,
+															currency: campaign.goal_currency,
+														},
+													})}
+												</Typography>
+											</div>
+										</div>
 									</div>
-									<div className=" text-primary w-1/2 text-right">
-										{translator.t('campaign.with-goal.goal-amount', {
-											context: {
-												amount: campaign.goal,
-												currency: campaign.goal_currency,
-											},
-										})}
+								)}
+							</div>
+						</div>
+						{daysLeft >= 0 && (
+							<>
+								<div className="flex items-center justify-center" style={{ height: '500px' }}>
+									<div className="card bg-primary w-full rounded-xl p-6">
+										<div>
+											<Typography size="xl" color="popover">
+												{translator.t('campaign.card-title')}
+											</Typography>
+										</div>
+										<div className="mt-3">
+											<OneTimeDonationForm
+												lang={params.lang}
+												region={params.region}
+												translations={{
+													oneTime: translator.t('donation-interval.0.title'),
+													monthly: translator.t('donation-interval.1.title'),
+													amount: translator.t('amount'),
+													submit: translator.t('button-text-short'),
+												}}
+												campaignId={params.campaign}
+											/>
+										</div>
+										{daysLeft >= 0 && (
+											<>
+												<div className="mt-4 text-center">
+													<Typography size="md" color="popover">
+														{translator?.t('campaign.days-left', { context: { count: daysLeft } })}
+													</Typography>
+												</div>
+											</>
+										)}
+										{daysLeft < 0 && (
+											<div className="mt-4 text-center">
+												<Typography size="md" color="popover">
+													{translator?.t('campaign.ended', { context: { count: daysLeft } })}
+												</Typography>
+											</div>
+										)}
 									</div>
 								</div>
+							</>
+						)}
+						{daysLeft < 0 && (
+							<div className="flex flex-col justify-center">
+								<Typography size="xl" weight="medium" color="accent">
+									{translator?.t('campaign.ended', { context: { count: daysLeft } })}
+								</Typography>
 							</div>
 						)}
 					</div>
-					{daysLeft >= 0 && (
-						<>
-							<div className="flex flex-col items-center">
-								<Typography size="xl" weight="bold" color="accent">
-									{translator?.t('campaign.days-left', { context: { count: daysLeft } })}
+				</div>
+			</BaseContainer>
+			{campaign.second_description && campaign.third_description && (
+				<BaseContainer>
+					<div className="grid grid-cols-1 gap-20 py-16 lg:grid-cols-2">
+						<div>
+							<div className="flex flex-col justify-center">
+								<Typography size="2xl" color="primary" weight="medium">
+									{campaign.second_description_title}
 								</Typography>
 							</div>
-							<div className="mt-4 w-full">
-								<OneTimeDonationForm
-									lang={params.lang}
-									region={params.region}
-									translations={{
-										oneTime: translator.t('donation-interval.0.title'),
-										monthly: translator.t('donation-interval.1.title'),
-										amount: translator.t('amount'),
-										submit: translator.t('button-text'),
-									}}
-									campaignId={params.campaign}
-								/>
+							<div className="flex flex-col justify-center">
+								<Typography className={'mt-4'} color="primary" size="xl">
+									{campaign.second_description}
+								</Typography>
+							</div>
+						</div>
+						<div>
+							<div className="flex flex-col justify-center">
+								<Typography size="2xl" color="primary" weight="medium">
+									{campaign.third_description_title}
+								</Typography>
+							</div>
+							<div className="flex flex-col justify-center">
+								<Typography className={'mt-4'} color="primary" size="xl">
+									{campaign.third_description}
+								</Typography>
 							</div>
-						</>
-					)}
-					{daysLeft < 0 && (
-						<div className="flex flex-col items-center">
-							<Typography size="xl" weight="bold" color="accent">
-								{translator?.t('campaign.ended', { context: { count: daysLeft } })}
-							</Typography>
 						</div>
-					)}
-				</div>
-			</BaseContainer>
-			<Video lang={params.lang} />
-			{campaign.second_description && campaign.third_description && (
-				<BaseContainer className="-mx-2 flex flex-wrap">
-					<div className="-full mb-4 px-2 lg:w-1/2">
-						<Typography size="xl" weight="medium">
-							{campaign.second_description_title}
-						</Typography>
-						<Typography className={'mt-4'} weight="medium">
-							{campaign.second_description}
-						</Typography>
-					</div>
-					<div className="-full mb-4 px-2 lg:w-1/2">
-						<Typography size="xl" weight="medium">
-							{campaign.third_description_title}
-						</Typography>
-						<Typography className={'mt-4'} weight="medium">
-							{campaign.third_description}
-						</Typography>
 					</div>
 				</BaseContainer>
 			)}
+			<BaseContainer>
+				<div className="grid grid-cols-1 gap-20 py-8 lg:grid-cols-2 lg:py-16">
+					<div>
+						<div className="flex flex-col justify-center">
+							<Typography size="2xl" color="primary" weight="medium">
+								{translator.t('campaign.about-si-title')}
+							</Typography>
+						</div>
+						<div className="flex flex-col justify-center">
+							<Typography className={'mt-4'} color="primary" size="xl">
+								{translator.t('campaign.about-si-text-1')}
+							</Typography>
+							<Typography className={'mt-4'} color="primary" size="xl">
+								{translator.t('campaign.about-si-text-2')}
+							</Typography>
+							<Typography
+								className={'mt-4 underline'}
+								color="primary"
+								size="xl"
+								dangerouslySetInnerHTML={{ __html: translator.t('campaign.about-si-link') }}
+							/>
+						</div>
+					</div>
+					<div className="items-left flex flex-col">
+						<div className="aspect-video overflow-hidden rounded-lg">
+							<VimeoVideo videoId={Number(translator.t('id.video-01'))} />
+						</div>
+						<div className="mt-2 self-end">
+							<Popover openDelay={0} closeDelay={200}>
+								<PopoverTrigger>
+									<Typography color="primary">{translator.t('credits')}</Typography>
+								</PopoverTrigger>
+								<PopoverContent align="end" className="w-96">
+									<Table>
+										<TableBody>
+											{translator
+												.t<{ role: string; name: string }[]>('video-01.credits')
+												.map(({ role, name }, index) => (
+													<TableRow key={index}>
+														<TableCell className="p-1.5 font-medium">{role}</TableCell>
+														<TableCell className="p-1.5">{name}</TableCell>
+													</TableRow>
+												))}
+										</TableBody>
+									</Table>
+								</PopoverContent>
+							</Popover>
+						</div>
+					</div>
+				</div>
+			</BaseContainer>
 		</>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/donate/one-time/one-time-donation-form.tsx b/website/src/app/[lang]/[region]/donate/one-time/one-time-donation-form.tsx
index d16fdc8d7..0d38e1862 100644
--- a/website/src/app/[lang]/[region]/donate/one-time/one-time-donation-form.tsx
+++ b/website/src/app/[lang]/[region]/donate/one-time/one-time-donation-form.tsx
@@ -78,15 +78,14 @@ export default function OneTimeDonationForm({ translations, lang, region, campai
 								<FormControl>
 									<ToggleGroup
 										type="single"
-										style={{ width: '100%' }}
-										className={'bg-muted mb-4 rounded'}
+										className={'bg-popover mb-4 inline-flex rounded-full'}
 										value={field.value}
 										onValueChange={(v) => form.setValue('interval', v)}
 									>
-										<ToggleGroupItem style={{ width: '100%' }} className="text-lg" value={DonationInterval.OneTime}>
+										<ToggleGroupItem className="text-md m-1 rounded-full px-6" value={DonationInterval.OneTime}>
 											{translations.oneTime}
 										</ToggleGroupItem>
-										<ToggleGroupItem style={{ width: '100%' }} className="text-lg" value={DonationInterval.Monthly}>
+										<ToggleGroupItem className="text-md m-1 rounded-full px-6" value={DonationInterval.Monthly}>
 											{translations.monthly}
 										</ToggleGroupItem>
 									</ToggleGroup>
@@ -104,21 +103,24 @@ export default function OneTimeDonationForm({ translations, lang, region, campai
 										<>
 											<ToggleGroup
 												type="single"
-												style={{ width: '100%' }}
-												className={'bg-muted mb-2 rounded'}
+												className={'mb-4'}
 												value={field.value.toString()}
-												onValueChange={(v) => form.setValue('amount', Number.parseInt(v))}
+												onValueChange={(v) => {
+													if (v) {
+														form.setValue('amount', Number.parseInt(v));
+													}
+												}}
 											>
 												{createToggleGroupItems(
 													interval === DonationInterval.Monthly ? [40, 60, 100, 200, 300] : [25, 50, 100, 500, 1000],
 												)}
 											</ToggleGroup>
-											<div className="flex flex-col  sm:flex-row sm:space-x-2 sm:space-y-0 md:items-center">
-												<Input className="h-12 text-lg" {...field} />
+											<div className="flex flex-col sm:flex-row sm:space-x-2 sm:space-y-0 md:items-center">
+												<Input className="mb-4 h-12 text-lg sm:mb-0" {...field} />
 												<CurrencySelector
 													className="h-12 sm:basis-1/3 md:max-w-[12rem]"
 													currencies={['USD', 'EUR', 'CHF']}
-													fontSize="lg"
+													fontSize="md"
 												/>
 											</div>
 										</>
@@ -127,7 +129,13 @@ export default function OneTimeDonationForm({ translations, lang, region, campai
 							)}
 						/>
 					</div>
-					<Button size="lg" type="submit" variant="default" showLoadingSpinner={submitting}>
+					<Button
+						size="lg"
+						type="submit"
+						variant="default"
+						showLoadingSpinner={submitting}
+						className="bg-accent text-accent-foreground hover:bg-accent-muted active:bg-accent-muted rounded-full text-lg font-medium"
+					>
 						{translations.submit}
 					</Button>
 				</form>
@@ -138,7 +146,12 @@ export default function OneTimeDonationForm({ translations, lang, region, campai
 
 const createToggleGroupItems = (values: number[]) => {
 	return values.map((value) => (
-		<ToggleGroupItem key={value} style={{ width: '100%' }} className="text-lg" value={value.toString()}>
+		<ToggleGroupItem
+			key={value}
+			style={{ width: '100%' }}
+			className="text-md bg-popover rounded-full py-6"
+			value={value.toString()}
+		>
 			{value}
 		</ToggleGroupItem>
 	));
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 a3aec3248..5957fc614 100644
--- a/website/src/app/[lang]/[region]/donate/one-time/page.tsx
+++ b/website/src/app/[lang]/[region]/donate/one-time/page.tsx
@@ -15,7 +15,7 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 				<Typography size="3xl" weight="medium" className="mt-4">
 					{translator.t('one-time.subtitle')}
 				</Typography>
-				<div className="mt-16 w-full">
+				<div className="text-popover-foreground mt-16 w-full">
 					<OneTimeDonationForm
 						lang={lang}
 						region={region}
@@ -23,13 +23,13 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 							oneTime: translator.t('donation-interval.0.title'),
 							monthly: translator.t('donation-interval.1.title'),
 							amount: translator.t('amount'),
-							submit: translator.t('button-text'),
+							submit: translator.t('button-text-short'),
 						}}
 					/>
 				</div>
 				{region === 'ch' && (
 					<Link href="https://donate.raisenow.io/cvzzr" target="_blank">
-						<Button size="lg" variant="link" className="mt-8">
+						<Button size="lg" variant="link" className="text-popup mt-8">
 							{translator.t('one-time.twint-button')}
 						</Button>
 					</Link>
diff --git a/website/src/components/ui/currency-selector.tsx b/website/src/components/ui/currency-selector.tsx
index cef30f988..384602731 100644
--- a/website/src/components/ui/currency-selector.tsx
+++ b/website/src/components/ui/currency-selector.tsx
@@ -36,7 +36,7 @@ const CurrencySelector = React.forwardRef<HTMLDivElement, CurrencySelectorProps>
 					}}
 				>
 					<SelectTrigger className="h-full px-5">
-						{Flag && <Flag className="h-5 w-5" />}
+						{Flag && <Flag className="mx-2 h-5 w-5 rounded" />}
 						<SelectValue>
 							<Typography size={fontSize} color="popover-foreground">
 								{currency}
diff --git a/website/src/middleware.ts b/website/src/middleware.ts
index 732fd03f0..b7f535cfb 100644
--- a/website/src/middleware.ts
+++ b/website/src/middleware.ts
@@ -38,6 +38,8 @@ export const redirectMiddleware = (request: NextRequest) => {
 		case '/world-poverty-statistics-2022':
 		case '/world-poverty-statistics-2023':
 			return NextResponse.redirect(new URL('/world-poverty-statistics-2024', request.url));
+		case '/ismatu':
+			return NextResponse.redirect('https://socialincome.org/campaign/MZmXEVHlDjOOFOMk82jW');
 	}
 };