diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/banner_ctrl.ts b/banners/mobile/C24_WMDE_Mobile_DE_14/banner_ctrl.ts
index 4b3126924..e138b88d5 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/banner_ctrl.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/banner_ctrl.ts
@@ -18,7 +18,7 @@ import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
 import eventMappings from './event_map';
 import messages from './messages';
-import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory2024/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_14/banner_var.ts
index 130119991..0db68a708 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/banner_var.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/banner_var.ts
@@ -16,9 +16,9 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
-import eventMappings from './event_map';
+import eventMappings from './event_map_var';
 import messages from './messages';
-import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory2024/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.vue
index 8b2c17d15..f637675a2 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.vue
@@ -102,8 +102,9 @@
 
 		<FundsModal
 			:content="useOfFundsContent"
-			:is-funds-modal-visible="isFundsModalVisible"
-			@hideFundsModal="onHideFundsModal"
+			:visible="isFundsModalVisible"
+			@hide="onHideFundsModal"
+			@callToAction="onFundsModalCallToAction"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingDE/>
@@ -117,9 +118,8 @@ import { BannerStates } from '@src/components/BannerConductor/StateMachine/Banne
 import { computed, inject, ref, watch } from 'vue';
 import FullPageBanner from './FullPageBanner.vue';
 import MiniBanner from './MiniBanner.vue';
-import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
-import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import FundsModal from '@src/components/UseOfFunds2024/UseOfFundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds2024/UseOfFundsContent';
 import { PageScroller } from '@src/utils/PageScroller/PageScroller';
 import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
@@ -244,12 +244,15 @@ function onshowFullPageBannerPreselected(): void {
 	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
 }
 
-const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
-	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
-		'.wmde-banner-form' :
-		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
-	);
+const onHideFundsModal = (): void => {
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
 	isFundsModalVisible.value = false;
 };
 
+const onFundsModalCallToAction = (): void => {
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
+	isFundsModalVisible.value = false;
+	onshowFullPageBanner();
+};
+
 </script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.vue
index a2a02942f..7d28cb837 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.vue
@@ -4,6 +4,7 @@
 			@close="onCloseMiniBanner"
 			@show-full-page-banner="onshowFullPageBanner"
 			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+			@showFundsModal="onShowFundsModal( 'MiniBanner' )"
 		>
 			<template #banner-slides>
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
@@ -19,7 +20,7 @@
 		</MiniBanner>
 
 		<FullPageBanner
-			@showFundsModal="isFundsModalVisible = true"
+			@showFundsModal="onShowFundsModal( 'FullPageBanner' )"
 			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
 		>
 			<template #banner-text>
@@ -102,8 +103,9 @@
 
 		<FundsModal
 			:content="useOfFundsContent"
-			:is-funds-modal-visible="isFundsModalVisible"
-			@hideFundsModal="onHideFundsModal"
+			:visible="isFundsModalVisible"
+			@hide="onHideFundsModal"
+			@callToAction="onFundsModalCallToAction"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingDE/>
@@ -117,9 +119,8 @@ import { BannerStates } from '@src/components/BannerConductor/StateMachine/Banne
 import { computed, inject, ref, watch } from 'vue';
 import FullPageBanner from './FullPageBanner.vue';
 import MiniBanner from './MiniBanner_var.vue';
-import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
-import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import FundsModal from '@src/components/UseOfFunds2024/UseOfFundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds2024/UseOfFundsContent';
 import { PageScroller } from '@src/utils/PageScroller/PageScroller';
 import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
@@ -151,6 +152,7 @@ import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
 import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
 import { Translator } from '@src/Translator';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import { UseOfFundsShownEvent } from '@src/tracking/events/UseOfFundsShownEvent';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',
@@ -244,12 +246,20 @@ function onshowFullPageBannerPreselected(): void {
 	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
 }
 
-const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
-	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
-		'.wmde-banner-form' :
-		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
-	);
+const onHideFundsModal = (): void => {
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
 	isFundsModalVisible.value = false;
 };
 
+const onShowFundsModal = ( feature: TrackingFeatureName ): void => {
+	tracker.trackEvent( new UseOfFundsShownEvent( feature ) );
+	isFundsModalVisible.value = true;
+};
+
+const onFundsModalCallToAction = (): void => {
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
+	isFundsModalVisible.value = false;
+	onshowFullPageBanner();
+};
+
 </script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/components/MiniBanner_var.vue b/banners/mobile/C24_WMDE_Mobile_DE_14/components/MiniBanner_var.vue
index dcbe339c0..376f33179 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/components/MiniBanner_var.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/components/MiniBanner_var.vue
@@ -14,6 +14,14 @@
 			<div class="wmde-banner-mini-slideshow">
 				<slot name="banner-slides"/>
 			</div>
+
+			<button
+				class="wmde-banner-mini-uof-link"
+				@click.prevent="$emit( 'showFundsModal' )"
+				:title="$translate( 'use-of-funds-link-description' )"
+			>
+				<InfoIconStraight/> Warum Spenden?
+			</button>
 		</div>
 		<div class="wmde-banner-mini-button-group">
 			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
@@ -30,7 +38,8 @@
 <script setup lang="ts">
 
 import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
-defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close' ] );
+defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close', 'showFundsModal' ] );
 
 </script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/event_map_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_14/event_map_var.ts
new file mode 100644
index 000000000..e84655c1b
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/event_map_var.ts
@@ -0,0 +1,46 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+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';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { UseOfFundsShownEvent } from '@src/tracking/events/UseOfFundsShownEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent(
+				e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ),
+				1
+			)
+	],
+	[ UseOfFundsShownEvent.EVENT_NAME,
+		( e: UseOfFundsShownEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent(
+				e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ),
+				1
+			)
+	]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/MiniBanner_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/MiniBanner_var.scss
index 3b6fb5289..186d0ed56 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/MiniBanner_var.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/MiniBanner_var.scss
@@ -19,6 +19,26 @@ $height-l-up: 288px !default;
 			padding: 12px;
 		}
 
+		&-uof-link {
+			background: none;
+			border: none;
+			color: var( --info-color );
+			font-size: 11px;
+			cursor: pointer;
+
+			position: absolute;
+			bottom: 8px;
+			left: 8px;
+
+			--info-icon-background: var( --info-color );
+			--info-icon-color: var( --mini-info-background );
+			svg {
+				width: 10px;
+				height: 10px;
+				top: -5px;
+			}
+		}
+
 		&-info {
 			background: var( --mini-info-background );
 			border-radius: 16px;
@@ -26,6 +46,7 @@ $height-l-up: 288px !default;
 			display: flex;
 			flex-direction: column;
 			flex: 1 1 auto;
+			position: relative;
 
 			@include breakpoints.phone-l-up {
 				margin-bottom: 12px;
@@ -33,8 +54,8 @@ $height-l-up: 288px !default;
 		}
 
 		&-close {
-			top: -3px;
-			right: -3px;
+			top: -9px;
+			right: -9px;
 			position: absolute;
 			height: 36px;
 			width: 36px;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles.scss
index 82cffc1b4..d95d7f01f 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles.scss
@@ -5,8 +5,8 @@
 	$thank-you-box: true
 );
 @use 'src/components/BannerConductor/banner-transition';
-@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
-@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/components/UseOfFunds2024/styles/swatches/skin_default' as uof-default;
+@use 'src/components/UseOfFunds2024/styles/styles';
 @use 'src/themes/Modo/defaults';
 @use 'Banner';
 @use 'MiniBanner' with (
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles_var.scss
index 82fcab490..7fd6dbd29 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles_var.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_14/styles/styles_var.scss
@@ -5,8 +5,8 @@
 	$thank-you-box: true
 );
 @use 'src/components/BannerConductor/banner-transition';
-@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
-@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/components/UseOfFunds2024/styles/swatches/skin_default' as uof-default;
+@use 'src/components/UseOfFunds2024/styles/styles';
 @use 'src/themes/Modo/defaults';
 @use 'Banner';
 @use 'MiniBanner_var' with (
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_14/useScrollMinimiser.ts b/banners/mobile/C24_WMDE_Mobile_DE_14/useScrollMinimiser.ts
deleted file mode 100644
index d25f66108..000000000
--- a/banners/mobile/C24_WMDE_Mobile_DE_14/useScrollMinimiser.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { onMounted, onUnmounted, Ref, watch } from 'vue';
-
-export function useScrollMinimiser( switchThreshold: number, hasMinimised: Ref<boolean>, onScrollBelowThreshold: () => void ): void {
-	const scrollHandler = (): void => {
-		if ( window.scrollY > switchThreshold ) {
-			onScrollBelowThreshold();
-		}
-	};
-
-	onMounted( () => {
-		window.addEventListener( 'scroll', scrollHandler );
-	} );
-
-	onUnmounted( () => {
-		window.removeEventListener( 'scroll', scrollHandler );
-	} );
-
-	watch( hasMinimised, () => {
-		window.removeEventListener( 'scroll', scrollHandler );
-	} );
-}
diff --git a/campaign_info.toml b/campaign_info.toml
index 25c34244f..cc00828fa 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -43,7 +43,7 @@ preview_link_darkmode = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&
 preview_link_offline = ""
 preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&useskin=minerva&devMode'
 wrapper_template = "wikipedia_org"
-use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_DE"
+use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2025_DE"
 
 # Banners of the campaign, key after "banners" can be anything
 [mobile.banners.ctrl]
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.spec.ts
index 49f55bfca..16877d605 100644
--- a/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.spec.ts
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.spec.ts
@@ -1,14 +1,14 @@
-import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { afterEach, beforeEach, describe, Mock, test, vi } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerCtrl.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { PageScroller } from '@src/utils/PageScroller/PageScroller';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
 import { formItems } from '@test/banners/formItems';
 import { softCloseFeatures } from '@test/features/SoftCloseMobile';
-import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds2024';
 import { miniBannerFeatures } from '@test/features/MiniBanner';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton_changesAmountOptions';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -27,6 +27,8 @@ let tracker: Tracker;
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
 describe( 'BannerCtrl.vue', () => {
+	let showCallback: Mock;
+	let closeCallback: Mock;
 
 	let wrapper: VueWrapper<any>;
 	beforeEach( () => {
@@ -40,6 +42,12 @@ describe( 'BannerCtrl.vue', () => {
 		tracker = {
 			trackEvent: vi.fn()
 		};
+
+		// for use of funds dialogue
+		showCallback = vi.fn();
+		closeCallback = vi.fn();
+		HTMLDialogElement.prototype.showModal = showCallback;
+		HTMLDialogElement.prototype.close = closeCallback;
 	} );
 
 	afterEach( () => {
@@ -155,7 +163,7 @@ describe( 'BannerCtrl.vue', () => {
 
 		test.each( [
 			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
-			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+			[ 'expectScrollsToFormWhenCloseIsClicked' ]
 		] )( '%s', async ( testName: string ) => {
 			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
 		} );
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.spec.ts
index 1186fa541..50da966f4 100644
--- a/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.spec.ts
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.spec.ts
@@ -1,14 +1,18 @@
-import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { afterEach, beforeEach, describe, Mock, test, vi } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_14/components/BannerVar.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { PageScroller } from '@src/utils/PageScroller/PageScroller';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
 import { formItems } from '@test/banners/formItems';
 import { softCloseFeatures } from '@test/features/SoftCloseMobile';
-import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import {
+	useOfFundsFeatures,
+	useOfFundsScrollFeatures,
+	useOfFundsTrackingFeatures
+} from '@test/features/UseOfFunds2024';
 import { miniBannerFeatures } from '@test/features/MiniBanner';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton_changesAmountOptions';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -27,6 +31,8 @@ let tracker: Tracker;
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
 describe( 'BannerVar.vue', () => {
+	let showCallback: Mock;
+	let closeCallback: Mock;
 
 	let wrapper: VueWrapper<any>;
 	beforeEach( () => {
@@ -40,6 +46,12 @@ describe( 'BannerVar.vue', () => {
 		tracker = {
 			trackEvent: vi.fn()
 		};
+
+		// for use of funds dialogue
+		showCallback = vi.fn();
+		closeCallback = vi.fn();
+		HTMLDialogElement.prototype.showModal = showCallback;
+		HTMLDialogElement.prototype.close = closeCallback;
 	} );
 
 	afterEach( () => {
@@ -148,6 +160,7 @@ describe( 'BannerVar.vue', () => {
 	describe( 'Use of Funds', () => {
 		test.each( [
 			[ 'expectShowsUseOfFunds' ],
+			[ 'expectShowsUseOfFundsOnMiniBanner' ],
 			[ 'expectHidesUseOfFunds' ]
 		] )( '%s', async ( testName: string ) => {
 			await useOfFundsFeatures[ testName ]( getWrapper() );
@@ -155,10 +168,16 @@ describe( 'BannerVar.vue', () => {
 
 		test.each( [
 			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
-			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+			[ 'expectScrollsToFormWhenCloseIsClicked' ]
 		] )( '%s', async ( testName: string ) => {
 			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
 		} );
+
+		test.each( [
+			[ 'expectClickingUoFLinkOnMiniBannerTracksEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsTrackingFeatures[ testName ]( getWrapper(), tracker );
+		} );
 	} );
 
 	describe( 'Mini Banner', () => {
diff --git a/test/banners/useOfFundsContent2024.ts b/test/banners/useOfFundsContent2024.ts
new file mode 100644
index 000000000..b50d3fec1
--- /dev/null
+++ b/test/banners/useOfFundsContent2024.ts
@@ -0,0 +1,24 @@
+import { UseOfFundsContent } from '@src/domain/UseOfFunds2024/UseOfFundsContent';
+
+export const useOfFundsContent: UseOfFundsContent = {
+	title: '',
+	summary: '',
+	callToAction: '',
+	accordion: {
+		items: [],
+		summary: ''
+	},
+	benefits: {
+		title: '',
+		items: []
+	},
+	revenueComparison: {
+		title: '',
+		content: [],
+		companies: {
+			title: '',
+			items: []
+		}
+	},
+	closingParagraph: ''
+};
diff --git a/test/features/UseOfFunds2024.ts b/test/features/UseOfFunds2024.ts
new file mode 100644
index 000000000..8958eab62
--- /dev/null
+++ b/test/features/UseOfFunds2024.ts
@@ -0,0 +1,80 @@
+import { VueWrapper } from '@vue/test-utils';
+import { expect } from 'vitest';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { UseOfFundsShownEvent } from '@src/tracking/events/UseOfFundsShownEvent';
+import UseOfFundsModal from '@src/components/UseOfFunds2024/UseOfFundsModal.vue';
+
+/*
+The new 2024 use of funds component uses the html <dialog> element
+which currently (2024) has no direct support from our testing library for visibility checking
+ */
+const expectShowsUseOfFunds = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-footer-usage-link' ).trigger( 'click' );
+
+	expect( wrapper.findComponent( UseOfFundsModal ).emitted( 'shown' ).length ).toBe( 1 );
+};
+
+const expectShowsUseOfFundsOnMiniBanner = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-mini-uof-link' ).trigger( 'click' );
+
+	expect( wrapper.findComponent( UseOfFundsModal ).emitted( 'shown' ).length ).toBe( 1 );
+};
+
+const expectHidesUseOfFunds = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-footer-usage-link' ).trigger( 'click' );
+	await wrapper.find( '.wmde-banner-funds-modal-close button' ).trigger( 'click' );
+
+	expect( wrapper.findComponent( UseOfFundsModal ).emitted( 'hide' ).length ).toBe( 1 );
+};
+
+const expectScrollsToFormWhenCallToActionIsClicked = async ( wrapper: VueWrapper<any>, pageScroller: PageScroller ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-footer-usage-link' ).trigger( 'click' );
+	await wrapper.find( '.call-to-action button' ).trigger( 'click' );
+
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledOnce();
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledWith( '.wmde-banner-form' );
+	expect( wrapper.findComponent( UseOfFundsModal ).emitted( 'callToAction' ).length ).toStrictEqual( 1 );
+};
+
+const expectScrollsToFormWhenCloseIsClicked = async ( wrapper: VueWrapper<any>, pageScroller: PageScroller ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-footer-usage-link' ).trigger( 'click' );
+	await wrapper.find( '.wmde-banner-funds-modal-close button' ).trigger( 'click' );
+
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledOnce();
+	expect( pageScroller.scrollIntoView ).toHaveBeenCalledWith( '.wmde-banner-form' );
+};
+
+const expectEmitsModalOpenedEvent = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-footer-usage-link' ).trigger( 'click' );
+
+	expect( wrapper.emitted( 'onModalOpened' ).length ).toStrictEqual( 1 );
+};
+
+const expectEmitsModalClosedEvent = async ( wrapper: VueWrapper<any> ): Promise<any> => {
+	await wrapper.find( '.banner-modal-close-link' ).trigger( 'click' );
+
+	expect( wrapper.emitted( 'onModalClosed' ).length ).toStrictEqual( 1 );
+};
+
+const expectClickingUoFLinkOnMiniBannerTracksEvent = async ( wrapper: VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	await wrapper.find( '.wmde-banner-mini-uof-link' ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toBeCalledWith( new UseOfFundsShownEvent( 'MiniBanner' ) );
+};
+
+export const useOfFundsFeatures: Record<string, ( wrapper: VueWrapper<any> ) => Promise<any>> = {
+	expectShowsUseOfFunds,
+	expectShowsUseOfFundsOnMiniBanner,
+	expectHidesUseOfFunds,
+	expectEmitsModalOpenedEvent,
+	expectEmitsModalClosedEvent
+};
+
+export const useOfFundsScrollFeatures: Record<string, ( wrapper: VueWrapper<any>, pageScroller: PageScroller ) => Promise<any>> = {
+	expectScrollsToFormWhenCallToActionIsClicked,
+	expectScrollsToFormWhenCloseIsClicked
+};
+
+export const useOfFundsTrackingFeatures: Record<string, ( wrapper: VueWrapper<any>, tracker: Tracker ) => Promise<any>> = {
+	expectClickingUoFLinkOnMiniBannerTracksEvent
+};