diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
new file mode 100644
index 000000000..e23b384a0
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
@@ -0,0 +1,72 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
+		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
new file mode 100644
index 000000000..0f55d41d2
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
@@ -0,0 +1,72 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages_var';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
+		donationLink: createFallbackDonationLink( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerCtrl.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerCtrl.vue
new file mode 100644
index 000000000..2e5987073
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerCtrl.vue
@@ -0,0 +1,154 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<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"/>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@showAlreadyDonatedModal="isAlreadyDonatedModalVisible = true"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+
+		<AlreadyDonatedModal
+			:is-visible="isAlreadyDonatedModalVisible"
+			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
+			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
+			@maybeLater="() => onClose( 'AlreadyDonatedModal', CloseChoices.Close )"
+		>
+			<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 { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = 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 = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerVar.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerVar.vue
new file mode 100644
index 000000000..7725ab495
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/components/BannerVar.vue
@@ -0,0 +1,154 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<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"/>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@showAlreadyDonatedModal="isAlreadyDonatedModalVisible = true"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+
+		<AlreadyDonatedModal
+			:is-visible="isAlreadyDonatedModalVisible"
+			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
+			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
+			@maybeLater="() => onClose( 'AlreadyDonatedModal', CloseChoices.Close )"
+		>
+			<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 { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = 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 = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/components/FallbackBanner.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/components/FallbackBanner.vue
new file mode 100644
index 000000000..50c87d7a2
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/components/FallbackBanner.vue
@@ -0,0 +1,103 @@
+<template>
+	<div class="wmde-banner-fallback">
+		<ButtonClose @close="onClose"/>
+
+		<div class="wmde-banner-fallback-small" v-if="!onLargeScreen">
+			<KeenSlider
+				:with-pagination="false"
+				:play="slideshowShouldPlay"
+				:interval="10000"
+				:delay="2000"
+				@slideChanged="onSlideChange"
+			>
+				<template #slides="{ currentSlide }: any">
+					<FallbackSlides :current-slide="currentSlide"/>
+				</template>
+
+				<template #left-icon>
+					<ChevronLeftIcon :fill="'#990a00'"/>
+				</template>
+
+				<template #right-icon>
+					<ChevronRightIcon :fill="'#990a00'"/>
+				</template>
+			</KeenSlider>
+
+			<FallbackButton @buttonClicked="onSubmit"/>
+
+			<SmallFooter :slide-index="slideIndex" :slide-count="slideCount" @useOfFundsButtonClicked="isFundsModalVisible = true"/>
+		</div>
+
+		<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
+			<div class="wmde-banner-fallback-message">
+				<FallbackText/>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</div>
+
+			<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
+		</div>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { computed, inject, ref } from 'vue';
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import FallbackSlides from '../content/FallbackSlides.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import FallbackText from '../content/FallbackText.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import FallbackButton from '@src/components/FallbackBanner/FallbackButton.vue';
+import SmallFooter from '@src/components/FallbackBanner/SmallFooter.vue';
+import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	donationLink: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+const slideIndex = ref<number>( 0 );
+const slideCount = ref<number>( 0 );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const isFundsModalVisible = ref<boolean>( false );
+
+const onLargeScreen = useDisplaySwitch( 799 );
+
+function onClose(): void {
+	emit( 'bannerClosed', new CloseEvent( 'FallbackBanner', CloseChoices.Close ) );
+}
+
+function onSlideChange( newIndex: number, newSlideCount: number ): void {
+	slideIndex.value = newIndex;
+	slideCount.value = newSlideCount;
+}
+
+function onSubmit(): void {
+	tracker.trackEvent( new FallbackBannerSubmitEvent() );
+	window.location.href = props.donationLink;
+}
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/components/MainBanner.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/components/MainBanner.vue
new file mode 100644
index 000000000..ab097bf67
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/components/MainBanner.vue
@@ -0,0 +1,44 @@
+tart<template>
+	<div class="wmde-banner-main">
+		<slot name="close-button"/>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<slot name="banner-text" v-if="onLargeScreen"/>
+				<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+				<slot name="progress"/>
+			</div>
+			<div class="wmde-banner-column-right">
+				<slot name="donation-form" :form-interaction="onFormInteraction"/>
+			</div>
+		</div>
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import { computed, nextTick, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+
+interface Props {
+	bannerState: BannerStates;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( 1300 );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/content/AlreadyDonatedContent.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/content/AlreadyDonatedContent.vue
new file mode 100644
index 000000000..eb8eb8f8f
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/content/AlreadyDonatedContent.vue
@@ -0,0 +1,14 @@
+<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: "Im Moment nicht". In diesem Fall wird ein Cookie in Ihrem Browser gesetzt,
+			der die Anzeige der Banner vorerst verhindert.
+		</p>
+    </div>
+</template>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerSlides.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerSlides.vue
new file mode 100644
index 000000000..1018de4b5
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerSlides.vue
@@ -0,0 +1,57 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/> <strong>{{ currentDateTime }} - An alle, die Wikipedia in Deutschland nutzen</strong>
+		</p>
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit
+			von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			{{ campaignDaySentence }} <AnimatedText :content="visitorsVsDonorsSentence"/>
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende
+			beträgt 22,25&nbsp;€, doch bereits 5&nbsp;€ helfen uns weiter.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann entscheiden
+			Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	getCurrentDateAndTime,
+	campaignDaySentence,
+	visitorsVsDonorsSentence
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerText.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerText.vue
new file mode 100644
index 000000000..7f3a647b4
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/content/BannerText.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/> <strong>{{ currentDateTime }} - An alle, die Wikipedia in Deutschland nutzen</strong>
+			</p>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+				heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit
+				von Wikipedia zu unterstützen. {{ campaignDaySentence }} <AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten
+				Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende beträgt 22,25&nbsp;€,
+				doch bereits 5&nbsp;€ helfen uns weiter. Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse
+				Kaffee geschenkt? Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas
+				zurück. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
+
+const {
+	currentDayName,
+	currentDate,
+	getCurrentDateAndTime,
+	campaignDaySentence,
+	visitorsVsDonorsSentence
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackSlides.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackSlides.vue
new file mode 100644
index 000000000..ca71bc5b7
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackSlides.vue
@@ -0,0 +1,34 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			Unser Spendenziel: 9,7 Millionen €
+		</p>
+		<ProgressBar amount-to-show-on-right="TARGET"/>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			Hat Wikipedia Ihnen Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Dann entscheiden Sie sich, etwas zurückzugeben. Danke!
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<FallbackBank/>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import FallbackBank from '@src/components/FallbackBanner/FallbackBank.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackText.vue b/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackText.vue
new file mode 100644
index 000000000..5cdd4f9d3
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/content/FallbackText.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
+			</p>
+			<p>
+				{{ campaignDaySentence }} <AnimatedText :content="visitorsVsDonorsSentence"/> Wenn Wikipedia Ihnen in
+				diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt hat, dann geben Sie etwas zurück. Danke!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+const {
+	campaignDaySentence,
+	visitorsVsDonorsSentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/event_map.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/event_map.ts
new file mode 100644
index 000000000..81a4463ee
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/event_map.ts
@@ -0,0 +1,39 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
+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 { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { AlreadyDonatedShownEvent } from '@src/tracking/events/AlreadyDonatedShownEvent';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+import { ShownEvent } from '@src/tracking/events/ShownEvent';
+import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ ShownEvent.EVENT_NAME, mapShownEvent ],
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ CustomAmountChangedEvent.EVENT_NAME,
+		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
+	],
+	[ AlreadyDonatedShownEvent.EVENT_NAME, ( e: AlreadyDonatedShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			case 'UpgradeToMonthlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ FallbackBannerSubmitEvent.EVENT_NAME, ( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent => new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 ) ]
+] );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/form_items.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/form_items.ts
new file mode 100644
index 000000000..b70650d19
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/form_items.ts
@@ -0,0 +1,23 @@
+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.QUARTERLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.BANK_TRANSFER,
+			PaymentMethods.CREDIT_CARD,
+			PaymentMethods.DIRECT_DEBIT
+		).getItems();
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/messages.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/messages.ts
new file mode 100644
index 000000000..519910eb2
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/messages.ts
@@ -0,0 +1,28 @@
+import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de';
+import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import UpgradeToMonthlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToMonthly.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de';
+import FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...UpgradeToMonthlyDe,
+	...SoftCloseDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...AlreadyDonatedModal,
+	...FallbackBanner,
+	'already-donated-go-away-button': 'Im Moment nicht',
+	'soft-close-prompt': 'Dürfen wir später nochmal fragen?'
+};
+
+export default messages;
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/messages_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/messages_var.ts
new file mode 100644
index 000000000..baf537c18
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/messages_var.ts
@@ -0,0 +1,33 @@
+import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de';
+import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import UpgradeToMonthlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToMonthly.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de';
+import FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...UpgradeToMonthlyDe,
+	...SoftCloseDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...AlreadyDonatedModal,
+	...FallbackBanner,
+	'already-donated-go-away-button': 'Im Moment nicht',
+	'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
+	'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns' +
+		' besonders und ermöglichen langfristige Weiterentwicklungen.</p>' +
+		'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>',
+	'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}',
+	'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich'
+};
+
+export default messages;
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/styles/Banner.scss b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/Banner.scss
new file mode 100644
index 000000000..3bd07328c
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/Banner.scss
@@ -0,0 +1,23 @@
+@use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/colors';
+
+.wmde-banner {
+	&-wrapper {
+		font-size: 14px;
+		font-family: fonts.$ui;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+		background-color: colors.$white;
+	}
+
+	&--pending {
+		.wmde-banner-wrapper {
+			box-shadow: none;
+		}
+	}
+
+	&--closed {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/styles/FallbackBanner.scss b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/FallbackBanner.scss
new file mode 100644
index 000000000..1e6d9ae8a
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/FallbackBanner.scss
@@ -0,0 +1,136 @@
+@use 'src/themes/Treedip/variables/globals';
+@use 'src/themes/Treedip/variables/colors';
+@use 'src/themes/Treedip/variables/fonts';
+@use 'sass:color';
+
+$breakpoint: 800px;
+
+.wmde-banner {
+	&-fallback {
+		width: 100%;
+		height: 150px;
+		display: flex;
+		flex-direction: column;
+		background: colors.$white;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+
+		@media ( min-width: $breakpoint ) {
+			height: auto;
+			min-height: 250px;
+			padding: 4px;
+		}
+
+		&-small,
+		&-large {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-small {
+			align-items: center;
+			border: 4px solid colors.$primary;
+			border-radius: 4px;
+			padding: 8px;
+
+			.wmde-banner-progress-bar {
+				height: 25px;
+				line-height: 25px;
+			}
+
+			.wmde-banner-progress-bar-text,
+			.wmde-banner-progress-bar-fill-wrapper {
+				height: 25px;
+			}
+
+			.wmde-banner-progress-bar-fill {
+				line-height: 20px;
+			}
+
+			.wmde-banner-fallback-button {
+				margin: 0 0 8px;
+			}
+
+			.wmde-banner-selection-input-text,
+			.wmde-banner-selection-input-input {
+				font-family: fonts.$content;
+				font-size: 14px;
+				font-weight: normal;
+			}
+		}
+
+		&-large {
+			align-items: stretch;
+		}
+
+		&-usage-link {
+			color: colors.$gray;
+		}
+
+		&-message {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			border: 4px solid colors.$primary;
+			border-radius: 4px;
+			padding: 8px 0;
+		}
+
+		&-bank-item {
+			display: block;
+
+			&-label {
+				font-weight: bold;
+			}
+		}
+
+		.wmde-banner-close {
+			height: 16px;
+			width: 16px;
+			top: 8px;
+			right: 8px;
+
+			@media ( min-width: $breakpoint ) {
+				height: 30px;
+				width: 30px;
+				top: 12px;
+				right: 12px;
+			}
+		}
+
+		.wmde-banner-slider-container {
+			padding: 0 0 8px;
+		}
+
+		.wmde-banner-slide-content {
+			font-size: 14px;
+			p {
+				margin-bottom: 8px;
+			}
+		}
+
+		.wmde-banner-slider-navigation-previous,
+		.wmde-banner-slider-navigation-next {
+			align-items: end;
+		}
+
+		.wmde-banner-slider-pagination-dot {
+			cursor: default;
+		}
+
+		.wmde-banner-message {
+			flex: 1 1 auto;
+			margin-bottom: 15px;
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&--pending {
+		.wmde-banner-fallback {
+			box-shadow: none;
+		}
+	}
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/styles/MainBanner.scss b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/MainBanner.scss
new file mode 100644
index 000000000..c328cbca9
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/MainBanner.scss
@@ -0,0 +1,45 @@
+@use 'src/themes/Treedip/variables/colors';
+
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		padding: 0 15px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		border: 5px solid colors.$primary;
+		border-radius: 9px;
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0;
+	}
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles.scss b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles.scss
new file mode 100644
index 000000000..05c1818cf
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles.scss
@@ -0,0 +1,35 @@
+// 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: 357px,
+	$form-width: 300px
+);
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/ProgressBar/ProgressBar' with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyForm';
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message';
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
+@use 'FallbackBanner';
+@use 'src/themes/Treedip/FallbackBanner/FallbackButton';
+@use 'src/themes/Treedip/FallbackBanner/LargeFooter';
+@use 'src/themes/Treedip/FallbackBanner/SmallFooter';
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles_var.scss b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles_var.scss
new file mode 100644
index 000000000..2be1475c3
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_15/styles/styles_var.scss
@@ -0,0 +1,37 @@
+// 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: 357px,
+	$form-width: 300px
+);
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/ProgressBar/ProgressBar' with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message';
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
+@use 'FallbackBanner';
+@use 'src/themes/Treedip/FallbackBanner/FallbackButton';
+@use 'src/themes/Treedip/FallbackBanner/LargeFooter';
+@use 'src/themes/Treedip/FallbackBanner/SmallFooter';
diff --git a/banners/desktop/banner_var.ts b/banners/desktop/banner_var.ts
index 0f55d41d2..d22c4c932 100644
--- a/banners/desktop/banner_var.ts
+++ b/banners/desktop/banner_var.ts
@@ -26,7 +26,11 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { createFallbackDonationLink } from '@src/createFallbackDonationLink';
+import { LinearDailyDonorAverage } from '@src/utils/DynamicContent/LinearDailyDonorAverage';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { visitorsVsDailyDonorsSentence } from './visitorsVsDailyDonorsSentence';
 
+const date = new Date();
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
 const mediaWiki = new WindowMediaWiki();
@@ -34,6 +38,8 @@ const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(
 const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
 const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
 const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+const campaignParameters = page.getCampaignParameters();
+const dailyDonorAverage = new LinearDailyDonorAverage( 6260, new IntegerDe() ).getDonorStatsForTime( date );
 
 const app = createVueApp( BannerConductor, {
 	page,
@@ -55,8 +61,8 @@ const app = createVueApp( BannerConductor, {
 
 app.use( TranslationPlugin, translator );
 app.use( DynamicTextPlugin, {
-	campaignParameters: page.getCampaignParameters(),
-	date: new Date(),
+	campaignParameters,
+	date,
 	formatters: localeFactory.getFormatters(),
 	impressionCount,
 	translator
@@ -68,5 +74,7 @@ app.provide( 'currencyFormatter', currencyFormatter );
 app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
 app.provide( 'tracker', tracker );
+app.provide( 'dailyDonorAverage', dailyDonorAverage );
+app.provide( 'visitorsVsDailyDonorsSentence', visitorsVsDailyDonorsSentence( campaignParameters.millionImpressionsPerDay, dailyDonorAverage.currentDonorsSoFar ) );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/desktop/components/BannerVar.vue b/banners/desktop/components/BannerVar.vue
index 7725ab495..e63ab01d0 100644
--- a/banners/desktop/components/BannerVar.vue
+++ b/banners/desktop/components/BannerVar.vue
@@ -35,7 +35,7 @@
 					</template>
 
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
 					</template>
 
 				</MultiStepDonation>
@@ -83,14 +83,14 @@ import { BannerStates } from '@src/components/BannerConductor/StateMachine/Banne
 import { 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';
+import MainBanner from './MainBannerVar.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import BannerText from '../content/BannerText.vue';
-import BannerSlides from '../content/BannerSlides.vue';
+import BannerText from '../content/BannerTextVar.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
 import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
diff --git a/banners/desktop/components/MainBannerVar.vue b/banners/desktop/components/MainBannerVar.vue
new file mode 100644
index 000000000..d75b3d69b
--- /dev/null
+++ b/banners/desktop/components/MainBannerVar.vue
@@ -0,0 +1,46 @@
+tart<template>
+	<div class="wmde-banner-main">
+		<slot name="close-button"/>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<DonorHeart/>
+				<slot name="banner-text" v-if="onLargeScreen"/>
+				<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+				<slot name="progress"/>
+			</div>
+			<div class="wmde-banner-column-right">
+				<slot name="donation-form" :form-interaction="onFormInteraction"/>
+			</div>
+		</div>
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import { computed, nextTick, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import DonorHeart from '@src/components/DonorHeart/DonorHeart.vue';
+
+interface Props {
+	bannerState: BannerStates;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( 1300 );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/banners/desktop/content/BannerSlides.vue b/banners/desktop/content/BannerSlides.vue
index 1018de4b5..4bfadf76c 100644
--- a/banners/desktop/content/BannerSlides.vue
+++ b/banners/desktop/content/BannerSlides.vue
@@ -1,6 +1,6 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p class="headline">
+		<p>
 			<InfoIcon fill="#990a00"/> <strong>{{ currentDateTime }} - An alle, die Wikipedia in Deutschland nutzen</strong>
 		</p>
 		<p>
diff --git a/banners/desktop/content/BannerSlidesVar.vue b/banners/desktop/content/BannerSlidesVar.vue
new file mode 100644
index 000000000..d17af1850
--- /dev/null
+++ b/banners/desktop/content/BannerSlidesVar.vue
@@ -0,0 +1,60 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			<InfoIcon fill="#990a00"/> <strong>{{ currentDateTime }} - Aus Deutschland benötigen wir heute {{ averageDailyDonors }} Spenden</strong>
+		</p>
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit
+			von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			{{ campaignDaySentence }} <AnimatedText :content="visitorsVsDailyDonorsSentence"/>
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende
+			beträgt 22,25&nbsp;€, doch bereits 5&nbsp;€ helfen uns weiter.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann entscheiden
+			Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
+import { DailyDonorStatsValues } from '@src/utils/DynamicContent/DailyDonorAverage';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	getCurrentDateAndTime,
+	campaignDaySentence
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { averageDailyDonors } = inject<DailyDonorStatsValues>( 'dailyDonorAverage' );
+const visitorsVsDailyDonorsSentence = inject<string>( 'visitorsVsDailyDonorsSentence' );
+
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/content/BannerTextVar.vue b/banners/desktop/content/BannerTextVar.vue
new file mode 100644
index 000000000..864a868ef
--- /dev/null
+++ b/banners/desktop/content/BannerTextVar.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/> <strong>{{ currentDateTime }} - Aus Deutschland benötigen wir heute {{ averageDailyDonors }} Spenden</strong>
+			</p>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+				heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit
+				von Wikipedia zu unterstützen. {{ campaignDaySentence }} <AnimatedText :content="visitorsVsDailyDonorsSentence"/> Die meisten
+				Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende beträgt 22,25&nbsp;€,
+				doch bereits 5&nbsp;€ helfen uns weiter. Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse
+				Kaffee geschenkt? Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas
+				zurück. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useCurrentDateAndTime } from '@src/components/composables/useCurrentDateAndTime';
+import { DailyDonorStatsValues } from '@src/utils/DynamicContent/DailyDonorAverage';
+
+const {
+	currentDayName,
+	currentDate,
+	getCurrentDateAndTime,
+	campaignDaySentence
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { averageDailyDonors } = inject<DailyDonorStatsValues>( 'dailyDonorAverage' );
+const visitorsVsDailyDonorsSentence = inject<string>( 'visitorsVsDailyDonorsSentence' );
+
+const { currentDateTime, startTimer, stopTimer } = useCurrentDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/desktop/messages_var.ts b/banners/desktop/messages_var.ts
index baf537c18..38cd45b79 100644
--- a/banners/desktop/messages_var.ts
+++ b/banners/desktop/messages_var.ts
@@ -9,6 +9,7 @@ import FooterDe from '@src/components/Footer/messages/Footer.de';
 import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
 import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
 import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
+import DonorHeart from '@src/components/DonorHeart/messages/DonorHeart.de';
 
 const messages: TranslationMessages = {
 	...CustomAmountFormDe,
@@ -21,13 +22,9 @@ const messages: TranslationMessages = {
 	...MainDonationFormDe,
 	...AlreadyDonatedModal,
 	...FallbackBanner,
+	...DonorHeart,
 	'already-donated-go-away-button': 'Im Moment nicht',
-	'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
-	'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns' +
-		' besonders und ermöglichen langfristige Weiterentwicklungen.</p>' +
-		'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>',
-	'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}',
-	'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich'
+	'soft-close-prompt': 'Dürfen wir später nochmal fragen?'
 };
 
 export default messages;
diff --git a/banners/desktop/styles/MainBanner.scss b/banners/desktop/styles/MainBanner.scss
index c328cbca9..a948df468 100644
--- a/banners/desktop/styles/MainBanner.scss
+++ b/banners/desktop/styles/MainBanner.scss
@@ -22,6 +22,7 @@ $form-width: 300px !default;
 	}
 
 	&-column-left {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
diff --git a/banners/desktop/styles/styles_var.scss b/banners/desktop/styles/styles_var.scss
index 2be1475c3..86d05d589 100644
--- a/banners/desktop/styles/styles_var.scss
+++ b/banners/desktop/styles/styles_var.scss
@@ -19,19 +19,20 @@
 @use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
 @use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
 @use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
-@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
-	$font-size: 14px
-);
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyForm';
 @use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
 @use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
 	$right-column-width: 300px
 );
 @use 'src/themes/Treedip/Footer/SelectionInput';
 @use 'src/themes/Treedip/Message/Message';
-@use 'src/themes/Treedip/Slider/KeenSlider';
+@use '../../../src/themes/Treedip/Slider/KeenSlider' with (
+	$slider-padding: 60px 0 16px
+);
 @use 'src/themes/Treedip/SoftClose/SoftClose';
 @use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
 @use 'FallbackBanner';
 @use 'src/themes/Treedip/FallbackBanner/FallbackButton';
 @use 'src/themes/Treedip/FallbackBanner/LargeFooter';
 @use 'src/themes/Treedip/FallbackBanner/SmallFooter';
+@use 'src/themes/Treedip/DonorHeart/DonorHeart';
diff --git a/banners/desktop/visitorsVsDailyDonorsSentence.ts b/banners/desktop/visitorsVsDailyDonorsSentence.ts
new file mode 100644
index 000000000..7e5747fce
--- /dev/null
+++ b/banners/desktop/visitorsVsDailyDonorsSentence.ts
@@ -0,0 +1,7 @@
+const text = `Über {{millionImpressionsPerDay}} Millionen Mal wird unser Spendenaufruf täglich
+	angezeigt, aber nur {{currentDonorsSoFar}} Menschen haben heute gespendet.`;
+
+export function visitorsVsDailyDonorsSentence( millionImpressionsPerDay: number, currentDonorsSoFar: string ): string {
+	return text.replace( '{{millionImpressionsPerDay}}', millionImpressionsPerDay.toString() )
+		.replace( '{{currentDonorsSoFar}}', currentDonorsSoFar );
+}
diff --git a/campaign_info.toml b/campaign_info.toml
index 6b7a50288..2eff4e4b1 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -6,9 +6,9 @@
 [desktop]
 name = "Desktop"
 icon = "desktop"
-campaign = "C23_WMDE_Desktop_DE_15"
-description = "based on ctrl of test 14, variant has a button yearly upgrade form"
-campaign_tracking = "15-ba-231124"
+campaign = "C23_WMDE_Desktop_DE_16"
+description = "based on ctrl of test 15, variant has a donor heart"
+campaign_tracking = "16-ba-231129"
 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"
@@ -17,13 +17,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE"
 # Banners of the campaign, key after "banners" can be anything
 [desktop.banners.ctrl]
 filename = "./banners/desktop/banner_ctrl.ts"
-pagename = "B23_WMDE_Desktop_DE_15_ctrl"
-tracking = "org-15-231124-ctrl"
+pagename = "B23_WMDE_Desktop_DE_16_ctrl"
+tracking = "org-16-231129-ctrl"
 
 [desktop.banners.var]
 filename = "./banners/desktop/banner_var.ts"
-pagename = "B23_WMDE_Desktop_DE_15_var"
-tracking = "org-15-231124-var"
+pagename = "B23_WMDE_Desktop_DE_16_var"
+tracking = "org-16-231129-var"
 
 [desktop.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
diff --git a/src/themes/Treedip/Slider/KeenSlider.scss b/src/themes/Treedip/Slider/KeenSlider.scss
index 8b19764f2..3c489912a 100644
--- a/src/themes/Treedip/Slider/KeenSlider.scss
+++ b/src/themes/Treedip/Slider/KeenSlider.scss
@@ -1,8 +1,11 @@
 @use '../variables/colors';
 @use '../variables/fonts';
+@use '../variables/breakpoints';
 @use 'src/components/Slider/KeenSlider';
 
 $font: fonts.$content !default;
+$font-size: 1.3em !default;
+$line-height: 1.5 !default;
 $slider-padding: 16px 0 !default;
 
 .wmde-banner {
@@ -10,8 +13,14 @@ $slider-padding: 16px 0 !default;
 
 	&-slider-container {
 		font-family: $font;
-		font-size: 1.3em;
+		font-size: 1.8vw;
 		padding: $slider-padding;
+		line-height: 1.2;
+
+		@include breakpoints.small-up {
+			font-size: $font-size;
+			line-height: $line-height;
+		}
 	}
 
 	&-slide {
diff --git a/src/tracking/LegacyEventTracking/mapShownEvent.ts b/src/tracking/LegacyEventTracking/mapShownEvent.ts
index 507b1e67f..811a5acb9 100644
--- a/src/tracking/LegacyEventTracking/mapShownEvent.ts
+++ b/src/tracking/LegacyEventTracking/mapShownEvent.ts
@@ -8,6 +8,6 @@ export function mapShownEvent( shownEvent: ShownEvent ): WMDESizeIssueEvent|WMDE
 		return new WMDESizeIssueEvent( `fallback-banner-shown`, createViewportInfo(), 1 );
 	}
 
-	// We don't track other "not shown" events, hence the trackingRate of 0
+	// We don't track other "shown" events, hence the trackingRate of 0
 	return new WMDELegacyBannerEvent( 'untracked-shown-event', 0 );
 }
diff --git a/test/banners/desktop/components/BannerVar.spec.ts b/test/banners/desktop/components/BannerVar.spec.ts
index 31377ce39..2c07f9286 100644
--- a/test/banners/desktop/components/BannerVar.spec.ts
+++ b/test/banners/desktop/components/BannerVar.spec.ts
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '../../../../banners/desktop/components/BannerVar.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
@@ -10,15 +10,16 @@ import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import {
-	bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures,
+	bannerContentDateAndTimeFeatures,
 	bannerContentDisplaySwitchFeatures,
 	bannerContentFeatures
 } from '@test/features/BannerContent';
-import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyLink';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { bannerMainFeatures } from '@test/features/MainBanner';
+import { donorHeartFeatures, testDonorHeartValues } from '@test/features/DonorHeart';
 
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
@@ -37,7 +38,6 @@ describe( 'BannerVar.vue', () => {
 
 	const getWrapper = ( dynamicContent: DynamicContent = null ): VueWrapper<any> => {
 		return mount( Banner, {
-			attachTo: document.body,
 			props: {
 				bannerState: BannerStates.Pending,
 				useOfFundsContent,
@@ -53,7 +53,9 @@ describe( 'BannerVar.vue', () => {
 					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
 					currencyFormatter: new CurrencyEn(),
 					formItems,
-					tracker: new TrackerStub()
+					tracker: new TrackerStub(),
+					dailyDonorAverage: testDonorHeartValues,
+					visitorsVsDailyDonorsSentence: 'Visitors vs Daily Donors Sentence'
 				}
 			}
 		} );
@@ -83,19 +85,34 @@ describe( 'BannerVar.vue', () => {
 		} );
 
 		test.each( [
-			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ],
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
-			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+			[ 'expectShowsLiveDateAndTimeInMessage' ],
+			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
 		] )( '%s', async ( testName: string ) => {
-			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
 		} );
 
+		it( 'shows the visitorsVsDailyDonorsSentence in the message', () => {
+			Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 1301 } );
+			const wrapper = getWrapper();
+
+			expect( wrapper.find( '.wmde-banner-message .wmde-banner-text-animated-highlight' ).exists() ).toBeTruthy();
+			expect( wrapper.find( '.wmde-banner-message .wmde-banner-text-animated-highlight' ).text() ).toStrictEqual( 'Visitors vs Daily Donors Sentence' );
+		} );
+
+		it( 'shows the visitorsVsDailyDonorsSentence in the slideshow', () => {
+			Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 1300 } );
+			const wrapper = getWrapper();
+
+			expect( wrapper.find( '.wmde-banner-slider .wmde-banner-text-animated-highlight' ).exists() ).toBeTruthy();
+			expect( wrapper.find( '.wmde-banner-slider .wmde-banner-text-animated-highlight' ).text() ).toStrictEqual( 'Visitors vs Daily Donors Sentence' );
+		} );
+	} );
+
+	describe( 'Donor Heart', () => {
 		test.each( [
-			[ 'expectShowsLiveDateAndTimeInMessage' ],
-			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
+			[ 'expectShowsDonorHeart' ]
 		] )( '%s', async ( testName: string ) => {
-			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+			await donorHeartFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 
@@ -105,7 +122,8 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
 			[ 'expectMainDonationFormGoesToUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
-			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );