diff --git a/banners/pad/banner_var.ts b/banners/pad/banner_var.ts
index e3f97f3b2..9c55ce596 100644
--- a/banners/pad/banner_var.ts
+++ b/banners/pad/banner_var.ts
@@ -18,7 +18,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 
 // Channel specific form setup
-import { createFormItems } from './form_items';
+import { createFormItems } from './form_items_var';
 import { createFormActions } from '@src/createFormActions';
 
 // Content
diff --git a/banners/pad/components/BannerCtrl.vue b/banners/pad/components/BannerCtrl.vue
index d44513767..581731535 100644
--- a/banners/pad/components/BannerCtrl.vue
+++ b/banners/pad/components/BannerCtrl.vue
@@ -2,11 +2,14 @@
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MainBanner
 			@close="onCloseMain"
-			@form-interaction="$emit( 'bannerContentChanged' )"
+			@form-interaction="onFormInteraction"
 			v-if="contentState === ContentStates.Main"
 			:bannerState="bannerState"
 		>
 			<template #banner-slides="{ play }: any">
+				<div class="wmde-banner-content-headline">
+					<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
+				</div>
 				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
@@ -47,10 +50,7 @@
 			</template>
 
 			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
 			</template>
 		</MainBanner>
 
@@ -67,23 +67,12 @@
 			@hideFundsModal="isFundsModalVisible = false"
 		/>
 
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
@@ -92,12 +81,9 @@ import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
-import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
@@ -109,6 +95,7 @@ import {
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -129,7 +116,6 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
@@ -141,6 +127,12 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onFormInteraction(): void {
+	nextTick( () => {
+		emit( 'bannerContentChanged' );
+	} );
+}
+
 function onCloseMain(): void {
 	contentState.value = ContentStates.SoftClosing;
 }
@@ -149,8 +141,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/pad/components/BannerVar.vue b/banners/pad/components/BannerVar.vue
index 52719d111..6244e8064 100644
--- a/banners/pad/components/BannerVar.vue
+++ b/banners/pad/components/BannerVar.vue
@@ -35,7 +35,25 @@
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-bez>
+								<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+									<AmexLogo/>
+								</span>
+							</template>
+
+						</MainDonationForm>
 					</template>
 
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -50,10 +68,7 @@
 			</template>
 
 			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
 			</template>
 		</MainBanner>
 
@@ -70,17 +85,6 @@
 			@hideFundsModal="isFundsModalVisible = false"
 		/>
 
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
 	</div>
 </template>
 
@@ -91,13 +95,10 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
 import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
@@ -112,6 +113,12 @@ import {
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -132,7 +139,6 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
@@ -158,8 +164,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/pad/content/AlreadyDonated.vue b/banners/pad/content/AlreadyDonated.vue
deleted file mode 100644
index da3203b20..000000000
--- a/banners/pad/content/AlreadyDonated.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <div>
-        <p><strong>Vielen Dank für Ihre Unterstützung</strong></p>
-        <p>Es freut uns, dass Sie uns bereits unterstützt haben oder regelmäßig unterstützen. Ohne Sie wäre die
-            Finanzierung unserer Projekte nicht möglich.</p>
-        <p>Falls Sie sich eine (weitere) Spende vorstellen können, dann klicken Sie "Vielleicht später". Falls
-            nicht, klicken Sie: "Für dieses Jahr reicht es". In diesem Fall wird ein Cookie in Ihrem Browser
-            gesetzt, der die Anzeige der Banner bis Ende des Jahres verhindert.</p>
-    </div>
-</template>
diff --git a/banners/pad/content/BannerSlides.vue b/banners/pad/content/BannerSlides.vue
index e0bc5d50b..3cbf0d6f2 100644
--- a/banners/pad/content/BannerSlides.vue
+++ b/banners/pad/content/BannerSlides.vue
@@ -1,25 +1,20 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p class="headline">
+		<p>
 			<InfoIcon/>
-			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
+			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie
+			bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
 		</p>
-		<p>Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
-			heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
-			sichern.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
-			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
+			durch Spenden von durchschnittlich 22,25&nbsp;€ finanziert.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
-			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span>
-		</p>
+			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
 			Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute
@@ -34,13 +29,14 @@ import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 
 interface Props {
-	currentSlide: number,
+	currentSlide: number
 }
 
 defineProps<Props>();
 
 const {
 	currentDayName,
+	currentDate,
 	campaignDaySentence,
 	visitorsVsDonorsSentence
 }: DynamicContent = inject( 'dynamicCampaignText' );
diff --git a/banners/pad/content/BannerSlidesVar.vue b/banners/pad/content/BannerSlidesVar.vue
deleted file mode 100644
index 83c34a8fd..000000000
--- a/banners/pad/content/BannerSlidesVar.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p>
-			<InfoIcon/>
-			An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
-			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }} bitten wir Sie
-			bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
-		</p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 1">
-		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
-			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 2">
-		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
-			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 3">
-		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
-			Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute
-			Zeit und geben Sie etwas zurück. Vielen Dank!</p>
-	</KeenSliderSlide>
-</template>
-
-<script setup lang="ts">
-import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { inject } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
-import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
-
-interface Props {
-	currentSlide: number
-}
-
-defineProps<Props>();
-
-const {
-	currentDayName,
-	campaignDaySentence,
-	visitorsVsDonorsSentence
-}: DynamicContent = inject( 'dynamicCampaignText' );
-</script>
diff --git a/banners/pad/event_map.ts b/banners/pad/event_map.ts
index ff7cac489..3ab209f3c 100644
--- a/banners/pad/event_map.ts
+++ b/banners/pad/event_map.ts
@@ -7,11 +7,21 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
 import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
 import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
 	[ ClickAlreadyDonatedEvent.EVENT_NAME, ( e: ClickAlreadyDonatedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
 	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
-	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ]
-	// TODO add more events
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
 ] );
diff --git a/banners/pad/form_items_var.ts b/banners/pad/form_items_var.ts
new file mode 100644
index 000000000..b37f2304c
--- /dev/null
+++ b/banners/pad/form_items_var.ts
@@ -0,0 +1,20 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.CREDIT_CARD
+		).getItems();
+}
diff --git a/banners/pad/styles/BannerVarHeadline.scss b/banners/pad/styles/BannerVarHeadline.scss
deleted file mode 100644
index 6ceb43648..000000000
--- a/banners/pad/styles/BannerVarHeadline.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@use 'src/themes/Treedip/variables/colors';
-@use 'src/themes/Treedip/variables/fonts';
-
-.wmde-banner {
-	&-content {
-		&-headline {
-			font-family: fonts.$content;
-			font-size: 21px;
-			font-weight: bold;
-			text-align: center;
-			margin-top: 20px;
-			padding: 0 52px;
-			position: relative;
-
-			&::before {
-				content: '';
-				position: absolute;
-				height: 1px;
-				top: 50%;
-				left: 52px;
-				right: 52px;
-				background: colors.$primary;
-				z-index: 98;
-			}
-
-			&-text {
-				position: relative;
-				display: inline-block;
-				z-index: 99;
-				padding: 0 10px;
-				line-height: 24px;
-				background: colors.$white;
-			}
-		}
-	}
-}
diff --git a/banners/pad/styles/MainBanner.scss b/banners/pad/styles/MainBanner.scss
index 6c2c287d8..f1e206403 100644
--- a/banners/pad/styles/MainBanner.scss
+++ b/banners/pad/styles/MainBanner.scss
@@ -1,11 +1,13 @@
 @use 'src/themes/Treedip/variables/colors';
+@use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/breakpoints';
 
 $banner-height: 353px !default;
 $form-width: 256px !default;
 
 .wmde-banner {
 	&-main {
-		min-height: $banner-height;
+		height: $banner-height;
 		display: flex;
 		flex-direction: column;
 		padding: 12px 24px 0;
@@ -14,6 +16,45 @@ $form-width: 256px !default;
 	&-content {
 		display: flex;
 		flex: 1 1 auto;
+
+		&-headline {
+			font-family: fonts.$content;
+			font-size: 21px;
+			font-weight: bold;
+			text-align: center;
+			margin-top: 20px;
+			padding: 0 20px;
+			position: relative;
+
+			@include breakpoints.medium-up {
+				padding: 0 52px;
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				height: 1px;
+				top: 50%;
+				left: 20px;
+				right: 20px;
+				background: colors.$primary;
+				z-index: 98;
+
+				@include breakpoints.medium-up {
+					left: 52px;
+					right: 52px;
+				}
+			}
+
+			&-text {
+				position: relative;
+				display: inline-block;
+				z-index: 99;
+				padding: 0 10px;
+				line-height: 24px;
+				background: colors.$white;
+			}
+		}
 	}
 
 	&-column-left {
diff --git a/banners/pad/styles/MainBannerVar.scss b/banners/pad/styles/MainBannerVar.scss
new file mode 100644
index 000000000..e485bc67e
--- /dev/null
+++ b/banners/pad/styles/MainBannerVar.scss
@@ -0,0 +1,82 @@
+@use 'src/themes/Treedip/variables/colors';
+@use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/breakpoints';
+
+$banner-height: 353px !default;
+$form-width: 256px !default;
+
+.wmde-banner {
+	&-main {
+		height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex: 1 1 auto;
+
+		&-headline {
+			font-family: fonts.$content;
+			font-size: 21px;
+			font-weight: bold;
+			text-align: center;
+			margin-top: 20px;
+			padding: 0 20px;
+			position: relative;
+
+			@include breakpoints.medium-up {
+				padding: 0 52px;
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				height: 1px;
+				top: 50%;
+				left: 20px;
+				right: 20px;
+				background: colors.$primary;
+				z-index: 98;
+
+				@include breakpoints.medium-up {
+					left: 52px;
+					right: 52px;
+				}
+			}
+
+			&-text {
+				position: relative;
+				display: inline-block;
+				z-index: 99;
+				padding: 0 10px;
+				line-height: 24px;
+				background: colors.$white;
+			}
+		}
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		flex: 1 1 auto;
+		overflow-y: hidden;
+		margin-right: 20px;
+
+		border: 5px solid colors.$primary;
+		border-radius: 9px;
+		padding: 20px 0;
+	}
+
+	&-column-right {
+		flex: 1 1 $form-width;
+		width: $form-width;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+		padding: 10px 16px 10px 0;
+	}
+}
diff --git a/banners/pad/styles/styles.scss b/banners/pad/styles/styles.scss
index 6071a902c..c94d937c4 100644
--- a/banners/pad/styles/styles.scss
+++ b/banners/pad/styles/styles.scss
@@ -2,7 +2,7 @@
 @use 'src/components/BannerConductor/banner-transition';
 @use './Banner';
 @use 'MainBanner' with (
-	$banner-height: 353px,
+	$banner-height: 378px,
 	$form-width: 256px
 );
 @use 'src/themes/UseOfFunds/UseOfFunds';
diff --git a/banners/pad/styles/styles_var.scss b/banners/pad/styles/styles_var.scss
index e16525e53..35ed1c910 100644
--- a/banners/pad/styles/styles_var.scss
+++ b/banners/pad/styles/styles_var.scss
@@ -1,11 +1,10 @@
 // This is the file where we import the theme-specific component styles
 @use 'src/components/BannerConductor/banner-transition';
 @use './Banner';
-@use 'MainBanner' with (
-	$banner-height: 353px,
-	$form-width: 256px
+@use './MainBannerVar' with (
+	$banner-height: 378px,
+	$form-width: 35%
 );
-@use './BannerVarHeadline';
 @use 'src/themes/UseOfFunds/UseOfFunds';
 @use 'src/themes/Treedip/defaults';
 @use 'src/themes/Treedip/ButtonClose/ButtonClose';
@@ -16,22 +15,27 @@
 	$button-font-size: 12px
 );
 @use 'src/themes/Treedip/DonationForm/MultiStepDonation';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup' with (
+	$interval-option-width: 33.3333%
+);
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel';
 @use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons' with (
-	$height: 30px
+	$height: 42px,
+	$padding: 0 8px 8px
 );
 @use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton' with (
-	$height: 30px
+	$height: 42px,
+	$padding: 0 8px 8px
 );
 @use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
 @use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
-	$padding: 40px 0 0
+	$padding: 0
 );
 @use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm';
 @use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
 @use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
 @use 'src/themes/Treedip/Footer/BannerFooter' with (
-	$right-column-width: 256px
+	$right-column-width: 35%
 );
 @use 'src/themes/Treedip/Footer/SelectionInput';
 @use 'src/themes/Treedip/Message/Message';
diff --git a/campaign_info.toml b/campaign_info.toml
index bacf0fa7e..17ebcd93c 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -60,9 +60,9 @@ orientation = [ "portrait", "landscape"]
 [pad]
 name = "iPad"
 icon = "pad"
-campaign = "C23_WMDE_iPad_00"
-description = "VAR has a header text above the slider"
-campaign_tracking = "pad00-ba-230426"
+campaign = "C23_WMDE_iPad_01"
+description = "VAR has payment logos"
+campaign_tracking = "pad01-ba-231030"
 preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode'
 wrapper_template = "wikipedia_org"
@@ -70,13 +70,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE"
 
 [pad.banners.ctrl]
 filename = "./banners/pad/banner_ctrl.ts"
-pagename = "B23_WMDE_iPad_00_ctrl"
-tracking = "org-pad00-230501-ctrl"
+pagename = "B23_WMDE_iPad_01_ctrl"
+tracking = "org-pad01-231030-ctrl"
 
 [pad.banners.var]
 filename = "./banners/pad/banner_var.ts"
-pagename = "B23_WMDE_iPad_00_var"
-tracking = "org-pad00-230501-var"
+pagename = "B23_WMDE_iPad_01_var"
+tracking = "org-pad01-231030-var"
 
 [pad.test_matrix]
 device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch' ]
diff --git a/src/components/DonationForm/MultiStepDonation.vue b/src/components/DonationForm/MultiStepDonation.vue
index 2c6b9f6a9..8438235aa 100644
--- a/src/components/DonationForm/MultiStepDonation.vue
+++ b/src/components/DonationForm/MultiStepDonation.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 
-import { inject, nextTick, ref, useSlots } from 'vue';
+import { inject, nextTick, onMounted, ref, useSlots } from 'vue';
 import { useKeenSlider } from 'keen-slider/vue';
 import { FormActions } from '@src/domain/FormActions';
 import SubmitValues from '@src/components/DonationForm/SubComponents/SubmitValues.vue';
@@ -89,4 +89,9 @@ const onPrevious = async (): Promise<void> => {
 	await props.stepControllers[ currentStepIndex.value ].previous( multistepCallbacks );
 };
 
+onMounted( () => {
+	// This fixes Keen Slider rendering a little early and not having the correct width
+	setTimeout( () => slider.value.update() );
+} );
+
 </script>
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
index 860a5ae1d..2f90b6165 100644
--- a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
@@ -5,13 +5,14 @@
 $font-size: 12px !default;
 $height: 36px !default;
 $border-color: #9aa0a7 !default;
+$padding: 0 4px 8px !default;
 
 .wmde-banner {
 	@include SelectCustomAmount.layout;
 
 	&-select-custom-amount {
 		position: relative;
-		padding: 0 4px 8px;
+		padding: $padding;
 
 		&-input-container {
 			width: 100%;
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
index e91291359..ffb1e71bb 100644
--- a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
@@ -5,11 +5,12 @@ $font-size: 12px !default;
 $height: 30px !default;
 $border-color: #9aa0a7 !default;
 $background-color: #f8f9fa !default;
+$padding: 0 4px 8px !default;
 
 .wmde-banner {
 	&-select-group {
 		&-option {
-			padding: 0 4px 8px;
+			padding: $padding;
 
 			label {
 				display: block;
@@ -25,7 +26,7 @@ $background-color: #f8f9fa !default;
 			background: $background-color;
 			border: 1px solid $border-color;
 			border-radius: 2px;
-			min-height: $height;
+			height: $height;
 			cursor: pointer;
 			text-align: center;
 			font-size: $font-size;
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss
new file mode 100644
index 000000000..8e0f24cd8
--- /dev/null
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss
@@ -0,0 +1,46 @@
+@use '@src/themes/Treedip/variables/colors';
+@use '@src/themes/Treedip/variables/breakpoints';
+
+.wmde-banner {
+	&-select-group-label {
+		svg {
+			width: auto;
+			padding: 0 5px;
+		}
+		&.with-logos {
+			display: flex;
+			justify-content: center;
+		}
+
+		.paypal-logo {
+			max-width: 90px;
+		}
+
+		&.credit-cards {
+			padding: 10px 0;
+
+			svg {
+				padding: 0 5px;
+			}
+		}
+
+		.mastercard-logo {
+			transform: scale( 1.5 );
+		}
+	}
+
+	&-select-group-input:checked + .wmde-banner-select-group-label.with-logos {
+		svg path,
+		svg rect {
+			fill: colors.$white !important; // stylelint-disable-line
+
+			&.highlight-transparent {
+				fill: transparent !important; // stylelint-disable-line
+			}
+
+			&.highlight {
+				fill: colors.$secondary !important; // stylelint-disable-line
+			}
+		}
+	}
+}
diff --git a/test/banners/pad/components/BannerCtrl.spec.ts b/test/banners/pad/components/BannerCtrl.spec.ts
index 3ed9b012f..7d50632b9 100644
--- a/test/banners/pad/components/BannerCtrl.spec.ts
+++ b/test/banners/pad/components/BannerCtrl.spec.ts
@@ -10,7 +10,6 @@ import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
-import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
@@ -116,15 +115,4 @@ describe( 'BannerCtrl.vue', () => {
 		} );
 	} );
 
-	describe( 'Already Donated Modal', () => {
-		test.each( [
-			[ 'expectShowsAlreadyDonatedModal' ],
-			[ 'expectHidesAlreadyDonatedModal' ],
-			[ 'expectFiresMaybeLaterEvent' ],
-			[ 'expectFiresGoAwayEvent' ]
-		] )( '%s', async ( testName: string ) => {
-			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
 } );
diff --git a/test/banners/pad/components/BannerVar.spec.ts b/test/banners/pad/components/BannerVar.spec.ts
index b2c574d0e..7512d78f4 100644
--- a/test/banners/pad/components/BannerVar.spec.ts
+++ b/test/banners/pad/components/BannerVar.spec.ts
@@ -10,7 +10,6 @@ import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
-import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
 import { resetFormModel } from '@test/resetFormModel';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
@@ -115,15 +114,4 @@ describe( 'BannerVar.vue', () => {
 		} );
 	} );
 
-	describe( 'Already Donated Modal', () => {
-		test.each( [
-			[ 'expectShowsAlreadyDonatedModal' ],
-			[ 'expectHidesAlreadyDonatedModal' ],
-			[ 'expectFiresMaybeLaterEvent' ],
-			[ 'expectFiresGoAwayEvent' ]
-		] )( '%s', async ( testName: string ) => {
-			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
 } );