diff --git a/archive/english/C23_WMDE_Desktop_EN_02/banner_ctrl.ts b/archive/english/C23_WMDE_Desktop_EN_02/banner_ctrl.ts
new file mode 100644
index 000000000..81ad6a945
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/banner_ctrl.ts
@@ -0,0 +1,68 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import getBannerDelay from '@src/utils/getBannerDelay';
+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 { Locales } from '@src/domain/Locales';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import eventMappings from './event_map';
+
+const localeFactory = new LocaleFactoryEn();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
+const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'english' ) - impressionCount.overallCountIncremented, 0 );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	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, { locale: Locales.EN } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/banner_var.ts b/archive/english/C23_WMDE_Desktop_EN_02/banner_var.ts
new file mode 100644
index 000000000..ba3d92b20
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/banner_var.ts
@@ -0,0 +1,68 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import getBannerDelay from '@src/utils/getBannerDelay';
+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 { Locales } from '@src/domain/Locales';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import eventMappings from './event_map';
+
+const localeFactory = new LocaleFactoryEn();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
+const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'english' ) - impressionCount.overallCountIncremented, 0 );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	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, { locale: Locales.EN } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/components/BannerCtrl.vue b/archive/english/C23_WMDE_Desktop_EN_02/components/BannerCtrl.vue
new file mode 100644
index 000000000..d9dbda33c
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/components/BannerCtrl.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="wmde-banner-wrapper" :class="contentState">
+        <MainBanner
+            @close="onCloseMain"
+            :banner-state="bannerState"
+            v-if="contentState === ContentStates.Main"
+        >
+            <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>
+                <BannerFooter
+                    @showFundsModal="isFundsModalVisible = true"
+                />
+            </template>
+        </MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+        <FundsModal
+            :content="useOfFundsContent"
+            :is-funds-modal-visible="isFundsModalVisible"
+            @hideFundsModal="isFundsModalVisible = false"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { ref, watch } from 'vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.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';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	CustomAmountFormStep = 'CustomAmountForm',
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+
+const isFundsModalVisible = 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/english/C23_WMDE_Desktop_EN_02/components/BannerVar.vue b/archive/english/C23_WMDE_Desktop_EN_02/components/BannerVar.vue
new file mode 100644
index 000000000..f27566c1c
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/components/BannerVar.vue
@@ -0,0 +1,135 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@close="onCloseMain"
+			:banner-state="bannerState"
+			:min-width-for-large-screen="1800"
+			v-if="contentState === ContentStates.Main"
+		>
+			<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>
+				<BannerFooter
+					@showFundsModal="isFundsModalVisible = true"
+				/>
+			</template>
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { ref, watch } from 'vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.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';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	CustomAmountFormStep = 'CustomAmountForm',
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+
+const isFundsModalVisible = 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/english/C23_WMDE_Desktop_EN_02/components/MainBanner.vue b/archive/english/C23_WMDE_Desktop_EN_02/components/MainBanner.vue
new file mode 100644
index 000000000..3e5a19648
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/components/MainBanner.vue
@@ -0,0 +1,48 @@
+<template>
+	<div class="wmde-banner-main">
+		<ButtonClose @close="$emit( 'close' )"/>
+		<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 ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+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;
+	minWidthForLargeScreen?: number;
+}
+
+const props = withDefaults( defineProps<Props>(), {
+	minWidthForLargeScreen: 1300
+} );
+const emit = defineEmits( [ 'close', 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( props.minWidthForLargeScreen );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/content/BannerSlides.vue b/archive/english/C23_WMDE_Desktop_EN_02/content/BannerSlides.vue
new file mode 100644
index 000000000..d39248541
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/content/BannerSlides.vue
@@ -0,0 +1,50 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/>
+			<strong> &#8220;Wikipedia is not for sale.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+		</p>
+		<p>
+			Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to reflect
+			on the number of times you visited Wikipedia in the past year, the value you got from it, and whether you're
+			able to give €5 back.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			If you can, please join the 1% of readers who give.
+			<AnimatedText content="If everyone reading this right now gave just €5, we'd hit our goal in a couple of hours."/>
+			It's hard to know what to trust online these days. Disinformation and scammers are everywhere.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Wikipedia is different. It's not perfect, but it's not here to make a profit or to push a particular perspective.
+			It's written by everyone, together. Wikipedia is something we all share, like a library or a public park.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			We are passionate about our model because we want everyone to have equal access to quality information
+			- something that is becoming harder and harder to find online. If Wikipedia has given you €5 worth of
+			knowledge this year, please give back. There are no small contributions: every edit counts, every donation
+			counts. <em>Thank you.</em>
+		</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';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+</script>
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/content/BannerText.vue b/archive/english/C23_WMDE_Desktop_EN_02/content/BannerText.vue
new file mode 100644
index 000000000..f1f5ba018
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/content/BannerText.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/>
+				<strong> &#8220;Wikipedia is not for sale.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+			</p>
+			<p>
+				Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to
+				reflect on the number of times you visited Wikipedia in the past year, the value you got from it,
+				and whether you're able to give 5€ back. If you can, please join the 1% of readers who
+				give. <AnimatedText content="If everyone reading this right now gave just 5€, we'd hit our goal in a couple of hours."/>
+			</p>
+
+			<p>
+				It's hard to know what to trust online these days. Disinformation and scammers are everywhere.
+				Wikipedia is different. It's not perfect, but it's not here to make a profit or to push a particular
+				perspective. It's written by everyone, together. Wikipedia is something we all share, like a library
+				or a public park. We are passionate about our model because we want everyone to have equal access to
+				quality information - something that is becoming harder and harder to find online.
+			</p>
+
+			<p>
+				If Wikipedia has given you 5€ worth of knowledge this year, please give back. There are no small
+				contributions: every edit counts, every donation counts. Thank you.
+			</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 { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/event_map.ts b/archive/english/C23_WMDE_Desktop_EN_02/event_map.ts
new file mode 100644
index 000000000..d5ed69712
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/event_map.ts
@@ -0,0 +1,33 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+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 { 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 ],
+
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ CustomAmountChangedEvent.EVENT_NAME,
+		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.userChoice + '-amount', 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 'CustomAmountForm':
+				return new WMDESizeIssueEvent( `submit-different-amount`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
+] );
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/form_items.ts b/archive/english/C23_WMDE_Desktop_EN_02/form_items.ts
new file mode 100644
index 000000000..ccf13b3f5
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/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.DIRECT_DEBIT,
+			PaymentMethods.CREDIT_CARD
+		).getItems();
+}
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/messages.ts b/archive/english/C23_WMDE_Desktop_EN_02/messages.ts
new file mode 100644
index 000000000..889692729
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/messages.ts
@@ -0,0 +1,22 @@
+import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
+import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
+import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
+import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
+import FooterEn from '@src/components/Footer/messages/Footer.en';
+import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
+import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormEn,
+	...DynamicCampaignTextEn,
+	...UpgradeToYearlyEn,
+	...SoftCloseEn,
+	...AddressFormEn,
+	...FooterEn,
+	...MainDonationFormEn,
+	...AlreadyDonatedModalEn
+};
+
+export default messages;
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/styles/Banner.scss b/archive/english/C23_WMDE_Desktop_EN_02/styles/Banner.scss
new file mode 100644
index 000000000..06e30756a
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/styles/Banner.scss
@@ -0,0 +1,17 @@
+@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;
+	}
+
+	&--closed {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/archive/english/C23_WMDE_Desktop_EN_02/styles/MainBanner.scss b/archive/english/C23_WMDE_Desktop_EN_02/styles/MainBanner.scss
new file mode 100644
index 000000000..c328cbca9
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/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/english/C23_WMDE_Desktop_EN_02/styles/styles.scss b/archive/english/C23_WMDE_Desktop_EN_02/styles/styles.scss
new file mode 100644
index 000000000..4833c35fb
--- /dev/null
+++ b/archive/english/C23_WMDE_Desktop_EN_02/styles/styles.scss
@@ -0,0 +1,33 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/variables/breakpoints';
+@use 'src/components/BannerConductor/banner-transition';
+@use 'Banner';
+@use 'MainBanner' with (
+	$banner-height: 355px,
+	$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/BannerFooter' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message' with (
+	$font-sizes: ( 1400px: 15px, 1600px: 16px, 1800px: 18px )
+);
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
diff --git a/banners/english/banner_var.ts b/banners/english/banner_var.ts
index 81ad6a945..cfb08728b 100644
--- a/banners/english/banner_var.ts
+++ b/banners/english/banner_var.ts
@@ -1,9 +1,9 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerCtrl.vue';
+import Banner from './components/BannerVar.vue';
 import getBannerDelay from '@src/utils/getBannerDelay';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
 import PageWPORG from '@src/page/PageWPORG';
diff --git a/banners/english/components/BannerCtrl.vue b/banners/english/components/BannerCtrl.vue
index d9dbda33c..af752469a 100644
--- a/banners/english/components/BannerCtrl.vue
+++ b/banners/english/components/BannerCtrl.vue
@@ -45,6 +45,7 @@
 
 		<SoftClose
 			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
 			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
 			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
 			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
diff --git a/banners/english/components/BannerVar.vue b/banners/english/components/BannerVar.vue
new file mode 100644
index 000000000..52b7a5adc
--- /dev/null
+++ b/banners/english/components/BannerVar.vue
@@ -0,0 +1,132 @@
+<template>
+    <div class="wmde-banner-wrapper" :class="contentState">
+        <MainBanner
+            @close="onCloseMain"
+            :banner-state="bannerState"
+            v-if="contentState === ContentStates.Main"
+        >
+            <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>
+                <BannerFooter
+                    @showFundsModal="isFundsModalVisible = true"
+                />
+            </template>
+        </MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+        <FundsModal
+            :content="useOfFundsContent"
+            :is-funds-modal-visible="isFundsModalVisible"
+            @hideFundsModal="isFundsModalVisible = false"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { ref, watch } from 'vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerTextVar.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.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';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	CustomAmountFormStep = 'CustomAmountForm',
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+
+const isFundsModalVisible = 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/banners/english/content/BannerSlidesVar.vue b/banners/english/content/BannerSlidesVar.vue
new file mode 100644
index 000000000..c967b0eb1
--- /dev/null
+++ b/banners/english/content/BannerSlidesVar.vue
@@ -0,0 +1,42 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/>
+			<strong> &#8220;Wikipedia is still not on the market.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+		</p>
+		<p>
+			Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to reflect
+			on the number of times you visited Wikipedia in the past year, the value you got from it, and whether you're able to give €5 back.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			If you can, please join the 1% of readers who give.
+			<AnimatedText content="If everyone reading this right now gave just €5, we'd hit our goal in a couple of hours."/>
+			Wikipedia is not perfect, but also not here to make a profit or to push a particular perspective. It is written by everyone, together.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			We want everyone to have equal access to high-quality information – something that is hard to find online.
+			If Wikipedia has given you €5 worth of knowledge this year, please give back. There are no small contributions:
+			every edit counts, every donation counts. <em>Thank you.</em>
+		</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';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+</script>
diff --git a/banners/english/content/BannerText.vue b/banners/english/content/BannerText.vue
index f1f5ba018..2d626c782 100644
--- a/banners/english/content/BannerText.vue
+++ b/banners/english/content/BannerText.vue
@@ -8,8 +8,8 @@
 			<p>
 				Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to
 				reflect on the number of times you visited Wikipedia in the past year, the value you got from it,
-				and whether you're able to give 5€ back. If you can, please join the 1% of readers who
-				give. <AnimatedText content="If everyone reading this right now gave just 5€, we'd hit our goal in a couple of hours."/>
+				and whether you're able to give €5 back. If you can, please join the 1% of readers who
+				give. <AnimatedText content="If everyone reading this right now gave just €5, we'd hit our goal in a couple of hours."/>
 			</p>
 
 			<p>
@@ -21,7 +21,7 @@
 			</p>
 
 			<p>
-				If Wikipedia has given you 5€ worth of knowledge this year, please give back. There are no small
+				If Wikipedia has given you €5 worth of knowledge this year, please give back. There are no small
 				contributions: every edit counts, every donation counts. Thank you.
 			</p>
 		</div>
diff --git a/banners/english/content/BannerTextVar.vue b/banners/english/content/BannerTextVar.vue
new file mode 100644
index 000000000..fedbfbe0b
--- /dev/null
+++ b/banners/english/content/BannerTextVar.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/>
+				<strong> &#8220;Wikipedia is still not on the market.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+			</p>
+			<p>
+				Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to
+				reflect on the number of times you visited Wikipedia in the past year, the value you got from it, and
+				whether you're able to give €5 back. If you can, please join the 1% of readers who give.
+				<AnimatedText content="If everyone reading this right now gave just €5, we'd hit our goal in a couple of hours."/>
+				Wikipedia is not perfect, but also not here to make a profit or to push a particular perspective. It is
+				written by everyone, together. We want everyone to have equal access to high-quality information –
+				something that is hard to find online. If Wikipedia has given you €5 worth of knowledge this year,
+				please give back. There are no small contributions: every edit counts, every donation counts. <em>Thank you.</em>
+			</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 { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/english/styles/styles_var.scss b/banners/english/styles/styles_var.scss
new file mode 100644
index 000000000..610011a9d
--- /dev/null
+++ b/banners/english/styles/styles_var.scss
@@ -0,0 +1,31 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/variables/breakpoints';
+@use 'src/components/BannerConductor/banner-transition';
+@use 'Banner';
+@use 'MainBanner' with (
+	$banner-height: 355px,
+	$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/BannerFooter' 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';
diff --git a/campaign_info.toml b/campaign_info.toml
index 8a577fcd8..fab51ea00 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -132,9 +132,9 @@ tracking = "wpde-mob01-231030-var"
 [english]
 name = "English Desktop"
 icon = "desktop"
-campaign = "C23_WMDE_Desktop_EN_02_2"
+campaign = "C23_WMDE_Desktop_EN_03"
 description = "VAR has the WMF text"
-campaign_tracking = "en02-2-ba-231107"
+campaign_tracking = "en03-ba-231120"
 preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode'
 wrapper_template = "wikipedia_org"
@@ -142,13 +142,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_EN"
 
 [english.banners.ctrl]
 filename = "./banners/english/banner_ctrl.ts"
-pagename = "B23_WMDE_Desktop_EN_02_2_ctrl"
-tracking = "org-en02-2-231107-ctrl"
+pagename = "B23_WMDE_Desktop_EN_03_ctrl"
+tracking = "org-en03-231120-ctrl"
 
 [english.banners.var]
 filename = "./banners/english/banner_var.ts"
-pagename = "B23_WMDE_Desktop_EN_02_2_var"
-tracking = "org-en02-2-231107-var"
+pagename = "B23_WMDE_Desktop_EN_03_var"
+tracking = "org-en03-231120-var"
 
 [english.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
diff --git a/test/banners/english/components/BannerCtrl.spec.ts b/test/banners/english/components/BannerCtrl.spec.ts
index 2b69cc7d6..8849bbea9 100644
--- a/test/banners/english/components/BannerCtrl.spec.ts
+++ b/test/banners/english/components/BannerCtrl.spec.ts
@@ -8,7 +8,11 @@ import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
-import { bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
+import {
+	bannerContentAnimatedTextFeatures,
+	bannerContentDisplaySwitchFeatures,
+	bannerContentFeatures
+} from '@test/features/BannerContent';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyLink';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -75,6 +79,13 @@ describe( 'BannerCtrl.vue', () => {
 		] )( '%s', async ( testName: string ) => {
 			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
 		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
 	} );
 
 	describe( 'Donation Form Happy Paths', () => {
@@ -99,7 +110,9 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
 			[ 'expectEmitsSoftCloseTimeOutEvent' ],
 			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
-			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ],
+			[ 'expectShowsCloseIcon' ],
+			[ 'expectCloseIconEmitsCloseEvent' ]
 		] )( '%s', async ( testName: string ) => {
 			await softCloseFeatures[ testName ]( getWrapper() );
 		} );
diff --git a/test/banners/english/components/BannerVar.spec.ts b/test/banners/english/components/BannerVar.spec.ts
new file mode 100644
index 000000000..9aaf28188
--- /dev/null
+++ b/test/banners/english/components/BannerVar.spec.ts
@@ -0,0 +1,130 @@
+import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '../../../../banners/english/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import {
+	bannerContentAnimatedTextFeatures,
+	bannerContentDisplaySwitchFeatures,
+	bannerContentFeatures
+} from '@test/features/BannerContent';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyLink';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { bannerMainFeatures } from '@test/features/MainBanner';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+
+describe( 'BannerVar.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+		vi.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		vi.restoreAllMocks();
+		vi.useRealTimers();
+	} );
+
+	const getWrapper = (): VueWrapper<any> => {
+		return mount( Banner, {
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker: new TrackerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ],
+			[ 'expectShowsCloseIcon' ],
+			[ 'expectCloseIconEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+} );