diff --git a/ui/src/components/containers/base-container.tsx b/ui/src/components/containers/base-container.tsx
index ba4f1b77d..bef37fae1 100644
--- a/ui/src/components/containers/base-container.tsx
+++ b/ui/src/components/containers/base-container.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { twMerge } from 'tailwind-merge';
-import { BackgroundColor } from '../../interfaces/color';
 
 type BaseContainerProps = {
-	backgroundColor?: BackgroundColor;
+	baseClassNames?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const BaseContainer = React.forwardRef<HTMLDivElement, BaseContainerProps>(
-	({ children, className, backgroundColor, ...props }, ref) => {
+	({ children, className, baseClassNames, ...props }, ref) => {
 		return (
-			<div className={backgroundColor}>
+			<div className={baseClassNames}>
 				<div className="mx-auto max-w-6xl px-3 md:px-6">
-					<div className={twMerge(backgroundColor, className)} ref={ref} {...props}>
+					<div className={className} ref={ref} {...props}>
 						{children}
 					</div>
 				</div>
diff --git a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
index d2ff11153..d8a105708 100644
--- a/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
+++ b/website/src/app/[lang]/[region]/(website)/arts/section-2.tsx
@@ -12,7 +12,7 @@ export default async function Section2({ params }: DefaultPageProps) {
 	const cards = translator.t<CardTranslation[]>(`section-2.cards`);
 
 	return (
-		<BaseContainer backgroundColor="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
+		<BaseContainer baseClassNames="bg-yellow-50" className="flex flex-col space-y-1 py-16 md:px-20">
 			<Typography size="xl" weight="medium" color="muted-foreground">
 				{translator.t(`section-2.topic`)}
 			</Typography>
diff --git a/website/src/components/footer/footer.tsx b/website/src/components/footer/footer.tsx
index b99077efa..3a7c57ba9 100644
--- a/website/src/components/footer/footer.tsx
+++ b/website/src/components/footer/footer.tsx
@@ -1,9 +1,4 @@
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { FooterClient } from '@/components/footer/footer-client';
-import { SILogo } from '@/components/logos/si-logo';
-import { WebsiteLanguage, websiteRegions } from '@/i18n';
-import { DocumentTextIcon, InformationCircleIcon, UserCircleIcon } from '@heroicons/react/24/solid';
-import { SiFacebook, SiGithub, SiInstagram, SiLinkedin, SiMaildotru, SiX } from '@icons-pack/react-simple-icons';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Typography } from '@socialincome/ui';
 import Link from 'next/link';
@@ -20,7 +15,7 @@ function FooterLink({ label, url, Icon, target = '_self' }: FooterLinkProps) {
 	return (
 		<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">
+			<Typography size="xl" className="group-hover:text-base-content text-muted-foreground">
 				{label}
 			</Typography>
 		</Link>
@@ -33,82 +28,31 @@ export default async function Footer({ lang, region }: DefaultParams) {
 		namespaces: ['common', 'website-common', 'website-me'],
 	});
 
-	const supportedTranslatedLanguages = (['de', 'en', 'it', 'fr'] as WebsiteLanguage[]).map((lang) => {
-		return { translation: translator.t(`languages.${lang}`), code: lang };
-	});
-	const supportedTranslatedCountries = websiteRegions.map((region) => {
-		return { translation: translator.t(`regions.${region}`), code: region };
-	});
-
 	return (
-		<BaseContainer className="pb-8 pt-16">
+		<BaseContainer baseClassNames="theme-blue" className="pb-8 pt-10">
 			<div className="space-y-4">
-				<div className="flex flex-row items-center justify-between">
-					<SILogo className="fill-muted-foreground h-4" />
-					<div className="hidden items-center gap-x-1 md:flex">
-						<FooterClient
-							lang={lang}
-							region={region}
-							languages={supportedTranslatedLanguages}
-							regions={supportedTranslatedCountries}
-						/>
-					</div>
-				</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-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.follow-us')}
 						</Typography>
-						<FooterLink
-							Icon={SiInstagram}
-							label="Instagram"
-							url="https://www.instagram.com/so_income"
-							target="_blank"
-						/>
-						<FooterLink Icon={SiX} label="X" url="https://twitter.com/so_income" target="_blank" />
-						<FooterLink
-							Icon={SiFacebook}
-							label="Facebook"
-							url="https://facebook.com/socialincome.org"
-							target="_blank"
-						/>
-						<FooterLink
-							Icon={SiLinkedin}
-							label="Linkedin"
-							url="https://www.linkedin.com/company/socialincome"
-							target="_blank"
-						/>
-						<FooterLink
-							Icon={SiGithub}
-							label="GitHub"
-							url="https://github.com/socialincome-san/public"
-							target="_blank"
-						/>
-						<FooterLink
-							Icon={SiMaildotru}
-							label={translator.t('footer.newsletter')}
-							url={`/${lang}/${region}/newsletter`}
-						/>
+						<FooterLink label="Instagram" url="https://www.instagram.com/so_income" target="_blank" />
+						<FooterLink label="X" url="https://twitter.com/so_income" target="_blank" />
+						<FooterLink label="Facebook" url="https://facebook.com/socialincome.org" target="_blank" />
+						<FooterLink label="Linkedin" url="https://www.linkedin.com/company/socialincome" target="_blank" />
+						<FooterLink label="GitHub" url="https://github.com/socialincome-san/public" target="_blank" />
+						<FooterLink label={translator.t('footer.newsletter')} url={`/${lang}/${region}/newsletter`} />
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('footer.resources')}
 						</Typography>
-						<FooterLink
-							Icon={InformationCircleIcon}
-							label={translator.t('navigation.faq')}
-							url={`/${lang}/${region}/faq`}
-						/>
-						<FooterLink
-							Icon={UserCircleIcon}
-							label={translator.t('navigation.my-account')}
-							url={`/${lang}/${region}/login`}
-						/>
-						<FooterLink Icon={DocumentTextIcon} label={translator.t('footer.legal')} url={`/${lang}/${region}/legal`} />
+						<FooterLink label={translator.t('navigation.faq')} url={`/${lang}/${region}/faq`} />
+						<FooterLink label={translator.t('navigation.my-account')} url={`/${lang}/${region}/login`} />
+						<FooterLink label={translator.t('footer.legal')} url={`/${lang}/${region}/legal`} />
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('navigation.our-work')}
 						</Typography>
 						<FooterLink
@@ -123,7 +67,7 @@ export default async function Footer({ lang, region }: DefaultParams) {
 						<FooterLink label={translator.t('navigation.whats-next')} url={`/${lang}/${region}/our-work#whats-next`} />
 					</div>
 					<div className="flex flex-col space-y-1">
-						<Typography className="mb-2" size="lg" weight="medium" color="muted-foreground">
+						<Typography size="sm" weight="medium" color="muted-foreground">
 							{translator.t('navigation.about-us')}
 						</Typography>
 						<FooterLink
@@ -133,14 +77,6 @@ export default async function Footer({ lang, region }: DefaultParams) {
 						<FooterLink label={translator.t('navigation.team')} url={`/${lang}/${region}/about-us#team`} />
 					</div>
 				</div>
-				<div className="flex flex-col md:hidden">
-					<FooterClient
-						lang={lang}
-						region={region}
-						languages={supportedTranslatedLanguages}
-						regions={supportedTranslatedCountries}
-					/>
-				</div>
 			</div>
 		</BaseContainer>
 	);