diff --git a/ui/src/globals.css b/ui/src/globals.css
index 3958747e3..dcdc44aaa 100644
--- a/ui/src/globals.css
+++ b/ui/src/globals.css
@@ -81,9 +81,9 @@
 	}
 
 	.theme-v2 {
-		--background: #f9f8f3;
-		--foreground: #3373bb;
-		--foreground-dark: #2a63a4;
+		--background: 50 33% 96%;
+		--foreground: 206 99% 31%;
+		--foreground-dark: 212 59% 40%;
 	}
 
 	.theme-blue-v2 {
diff --git a/website/src/app/[lang]/[region]/(website)/layout.tsx b/website/src/app/[lang]/[region]/(website)/layout.tsx
index 426811f3f..5ae945758 100644
--- a/website/src/app/[lang]/[region]/(website)/layout.tsx
+++ b/website/src/app/[lang]/[region]/(website)/layout.tsx
@@ -5,7 +5,7 @@ import { PropsWithChildren } from 'react';
 
 export default function Layout({ children, params }: PropsWithChildren<DefaultLayoutProps>) {
 	return (
-		<div className="mx-auto flex flex-col">
+		<div className="theme-default mx-auto flex flex-col">
 			<Navbar lang={params.lang} region={params.region} />
 			<main className="min-h-screen-navbar flex-1">{children}</main>
 			<Footer lang={params.lang} region={params.region} />
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
index e384f2d0c..c0a1c7a12 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/monthly-income.tsx
@@ -10,7 +10,10 @@ export async function MonthlyIncome({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-foreground-dark" className="py-3">
+		// <BaseContainer backgroundColor="bg-foreground-dark" className="py-3">
+		<BaseContainer className="theme-blue-v2 py-3">
+			{' '}
+			{/* Is there a way to use theme-blue-v2 to set background blue? */}
 			<div className="my-4 py-12 text-center text-white">
 				<Typography size="lg" className="opacity-40">
 					{translator.t('section-3.title-faded')}
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx
index 6670d5333..80b01a818 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/overview.tsx
@@ -10,43 +10,36 @@ export async function Overview({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer className="mb-48 flex flex-col items-center justify-center">
-			<Typography size="3xl" weight="medium" color="foreground-dark" className="my-10 w-3/5 text-center">
+		<BaseContainer className="mx-auto mb-16 flex w-4/5 flex-col items-center justify-center md:mb-48 lg:w-3/5">
+			<Typography size="3xl" weight="medium" className="my-10 text-center">
 				{translator.t('section-2.title-1')}
 			</Typography>
-			<div className="mb-8 w-3/5 text-center">
+			<div className="mb-8 text-center">
 				{translator.t<{ text: string; color?: FontColor }[]>('section-2.title-2').map((title, index) => (
-					<Typography
-						as="span"
-						size="3xl"
-						weight="medium"
-						color={title.color}
-						key={index}
-						className="w-3/5 text-center"
-					>
+					<Typography as="span" size="3xl" weight="medium" color={title.color} key={index}>
 						{title.text}{' '}
 					</Typography>
 				))}
 			</div>
-			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-3')}
 			</Typography>
-			<ol className="mb-8 w-3/5 list-decimal">
+			<ol className="mb-8 list-decimal">
 				<li>
-					<Typography>{translator.t('section-2.text-3.1')}</Typography>
+					<Typography as="span">{translator.t('section-2.text-3.1')}</Typography>
 				</li>
 				<li>
-					<Typography>{translator.t('section-2.text-3.2')}</Typography>
+					<Typography as="span">{translator.t('section-2.text-3.2')}</Typography>
 				</li>
 			</ol>
-			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-4')}
 			</Typography>
-			<Typography className="mb-8 w-3/5">{translator.t('section-2.text-4')}</Typography>
-			<Typography size="3xl" weight="medium" color="foreground-dark" className="mb-5 mt-12 w-3/5 text-center">
+			<Typography className="mb-8">{translator.t('section-2.text-4')}</Typography>
+			<Typography size="3xl" weight="medium" className="mb-5 mt-12 text-center">
 				{translator.t('section-2.title-5')}
 			</Typography>
-			<Typography className="w-3/5">{translator.t('section-2.text-5')}</Typography>
+			<Typography className="w-full">{translator.t('section-2.text-5')}</Typography>
 		</BaseContainer>
 	);
 }
diff --git a/website/src/app/[lang]/[region]/v2/(home)/page.tsx b/website/src/app/[lang]/[region]/v2/(home)/page.tsx
index a0e685c74..f173424e9 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/page.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/page.tsx
@@ -12,7 +12,7 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 		namespaces: ['website-(home)', 'website-videos'],
 	});
 	return (
-		<>
+		<div className="theme-v2">
 			<HeroVideo lang={lang} region={region} />
 			<Overview lang={lang} region={region} />
 			<MonthlyIncome lang={lang} region={region} />
@@ -26,6 +26,6 @@ export default async function Page({ params: { lang, region } }: DefaultPageProp
 			{/*<Sdgoals lang={lang} region={region} />*/}
 			{/*<Journal lang={lang} region={region} />*/}
 			<div className="bg-foreground-dark mt-10 h-24 w-screen" />
-		</>
+		</div>
 	);
 }
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index 5105452bd..82b8a939e 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -41,7 +41,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 	});
 
 	return (
-		<BaseContainer backgroundColor="bg-muted" className="theme-default pb-8 pt-16">
+		<BaseContainer backgroundColor="bg-muted" className="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" />