diff --git a/ui/src/components/typography/typography.tsx b/ui/src/components/typography/typography.tsx
index a18c1b197..1d8ad9cb1 100644
--- a/ui/src/components/typography/typography.tsx
+++ b/ui/src/components/typography/typography.tsx
@@ -68,27 +68,25 @@ export type TypographyProps<C extends ElementType> = {
 	lineHeight?: LineHeight;
 } & ComponentPropsWithoutRef<C>;
 
-export function Typography<C extends ElementType = 'p'>(
-	{
-		as,
-		size = 'md',
-		weight = 'normal',
-		color = undefined,
-		lineHeight = 'normal',
-		className,
-		children,
-		...props
-	}: TypographyProps<C>,
-) {
+export function Typography<C extends ElementType = 'p'>({
+	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/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx b/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx
index 75beb6438..441c6b91e 100644
--- a/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx
+++ b/website/src/app/[lang]/[region]/donate/individual/donation-form.tsx
@@ -104,7 +104,7 @@ function RadioGroupFormItem({ active, title, donationInterval, lang }: RadioGrou
 
 	useEffect(() => {
 		setPreviewAmount(getDonationAmount(monthlyIncome, donationInterval));
-	}, [monthlyIncome]);
+	}, [monthlyIncome, donationInterval]);
 
 	return (
 		<FormItem>