diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 48341d02f49..84a82a50ffa 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -7,7 +7,6 @@ import {
 	ImageIcon,
 	LogInIcon,
 	LogOutIcon,
-	NewspaperIcon,
 	PlayIcon,
 	PlusIcon,
 	RefreshCwIcon,
@@ -24,7 +23,6 @@ import {
 	AccountSwitchOverlay,
 	Admonition,
 	Avatar,
-	ButtonLink,
 	commonMessages,
 	commonSettingsMessages,
 	ContentInstallModal,
@@ -34,7 +32,6 @@ import {
 	I18nDebugPanel,
 	IconButton,
 	LoadingBar,
-	NewsArticleCard,
 	NotificationPanel,
 	PopupNotificationPanel,
 	provideLoadingState,
@@ -65,10 +62,9 @@ import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import { useRouteLoading } from '@/app/runtime/use-route-loading'
+import AppSidebar from '@/app/shell/sidebar/index.vue'
 import AppTitleBar from '@/app/shell/title-bar/index.vue'
-import AccountsCard from '@/components/ui/AccountsCard.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
-import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
@@ -81,9 +77,6 @@ import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyIn
 import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
-import OnboardingChecklist from '@/components/ui/onboarding-checklist/index.vue'
-import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
-import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import SharedInstanceInviteHandler from '@/components/ui/shared-instances/shared-instance-invite-handler/index.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
@@ -101,6 +94,7 @@ import { useInstanceMetadataRefresh } from '@/composables/use-instance-metadata-
 import { useQuickInstanceLimit } from '@/composables/use-quick-instance-limit.ts'
 import { isDarkTheme, useTheme } from '@/composables/use-theme.ts'
 import { config } from '@/config'
+import { provideMinecraftAccounts } from '@/features/minecraft-accounts/context'
 import { getAccountAppearance, rememberAccountAppearance } from '@/helpers/account-appearance.ts'
 import {
 	hide_ads_window,
@@ -229,7 +223,6 @@ async function handleFullscreenChange() {
 const APP_LEFT_NAV_WIDTH = '4rem'
 const APP_SIDEBAR_WIDTH = 300
 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
-const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime()
 const credentials = ref()
 const storedModrinthAccounts = ref([])
 let credentialsRefreshId = 0
@@ -254,9 +247,6 @@ const hostingUpdateRequired = computed(
 		!!appUpdateState.availableUpdate.value &&
 		appUpdateState.updatesEnabled.value,
 )
-const prideFundraiserEnabled = computed(
-	() => appSettings.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE,
-)
 const hostingIntercomIdentityKey = computed(() => {
 	const rawServerId = route.params.id
 	const serverId = Array.isArray(rawServerId) ? rawServerId[0] : rawServerId
@@ -373,8 +363,6 @@ const {
 	(iconPath) =>
 		creationGeneratedIcon.value?.path === iconPath ? creationGeneratedIcon.value.config : null,
 )
-const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist
-const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value)
 
 async function randomizeCreationIcon() {
 	const generated = await creationIconEditorModal.value?.randomizeAndSave()
@@ -412,7 +400,6 @@ function onCreationIconSaved(iconPath, config) {
 	context.instanceIconPath.value = iconPath
 }
 
-const news = ref([])
 const displayedServerInviteNotifications = new Set()
 const serverInvitePopupNotificationIds = new Set()
 let liveNotificationGeneration = 0
@@ -651,18 +638,6 @@ const messages = defineMessages({
 		id: 'app.nav.upgrade-to-modrinth-plus',
 		defaultMessage: 'Upgrade to Modrinth+',
 	},
-	news: {
-		id: 'app.news.title',
-		defaultMessage: 'News',
-	},
-	viewAllNews: {
-		id: 'app.news.view-all',
-		defaultMessage: 'View all news',
-	},
-	playingAs: {
-		id: 'app.sidebar.playing-as',
-		defaultMessage: 'Playing as',
-	},
 })
 
 function handleAdsConsentRequired(required) {
@@ -854,22 +829,6 @@ async function setupApp() {
 			)
 		})
 
-	fetch(`https://modrinth.com/news/feed/articles.json`)
-		.then((response) => response.json())
-		.then((res) => {
-			if (res && res.articles) {
-				news.value = res.articles
-					.map((article) => ({
-						...article,
-						path: article.link,
-					}))
-					.slice(0, 4)
-			}
-		})
-		.catch((error) => {
-			console.error('Failed to fetch news articles', error)
-		})
-
 	traceStartupStep('Read opening command', get_opening_command).then(handleCommand)
 	traceStartupStep('Refresh startup credentials', fetchCredentials)
 
@@ -907,13 +866,6 @@ const handleClose = async () => {
 	await getCurrentWindow().close()
 }
 
-const sidebarOverlayScrollbarsOptions = Object.freeze({
-	overflow: {
-		x: 'hidden',
-		y: 'scroll',
-	},
-})
-
 const queryClient = useQueryClient()
 
 watch(stateInitialized, (ready) => {
@@ -1442,7 +1394,7 @@ const modrinthAccountMenuOptions = computed(() => [
 		id: 'add-friend',
 		label: formatMessage(messages.addFriend),
 		icon: UserPlusIcon,
-		action: () => friendsList.value?.showAddFriendModal(),
+		action: () => sidebar.value?.showAddFriendModal(),
 	},
 	{
 		id: 'flags',
@@ -1530,9 +1482,8 @@ onMounted(() => {
 	setServerUpdateToPlayModal(updateToPlayModal.value)
 })
 
-const accounts = ref(null)
-const friendsList = ref(null)
-provide('accountsCard', accounts)
+const sidebar = ref(null)
+provideMinecraftAccounts(computed(() => sidebar.value?.minecraftAccounts ?? null))
 
 useAppEvent('command', handleCommand, appEvents)
 useAppEvent('notification', handleLiveNotification, appEvents)
@@ -2339,87 +2290,16 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</template>
 			</RouterView>
 		</div>
-		<div
-			class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid"
-			:class="{ 'has-plus': hasPlus }"
-		>
-			<div
-				v-overlay-scrollbars="sidebarOverlayScrollbarsOptions"
-				class="app-sidebar-scrollable flex-grow shrink relative"
-				:class="{ 'pb-12': !hasPlus }"
-				data-overlayscrollbars-initialize
-			>
-				<OnboardingChecklist
-					@create-instance="installationModal?.show()"
-					@login-minecraft="accounts?.login()"
-					@login-modrinth="signIn"
-				/>
-				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
-				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-					<div
-						v-show="hasLoggedIntoMinecraft"
-						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
-					>
-						<h3 class="text-base text-primary font-medium m-0">
-							{{ formatMessage(messages.playingAs) }}
-						</h3>
-						<suspense>
-							<AccountsCard ref="accounts" />
-						</suspense>
-					</div>
-					<div
-						v-show="showFriendsList"
-						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
-					>
-						<suspense>
-							<FriendsList
-								ref="friendsList"
-								:credentials="credentials"
-								:sign-in="() => requestSignIn()"
-							/>
-						</suspense>
-					</div>
-					<PrideFundraiserBanner
-						v-if="prideFundraiserEnabled"
-						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
-					/>
-					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
-						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">
-							{{ formatMessage(messages.news) }}
-						</h3>
-						<div class="space-y-4 flex flex-col items-center w-full">
-							<NewsArticleCard
-								v-for="(item, index) in news"
-								:key="`news-${index}`"
-								:article="item"
-							/>
-							<ButtonLink
-								type="colored"
-								color="brand"
-								size="xl"
-								href="https://modrinth.com/news"
-								target="_blank"
-								class="my-4"
-							>
-								<NewspaperIcon />
-								{{ formatMessage(messages.viewAllNews) }}
-							</ButtonLink>
-						</div>
-					</div>
-				</div>
-			</div>
-			<template v-if="showAd">
-				<a
-					href="https://modrinth.plus?app"
-					class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
-					target="_blank"
-				>
-					<ArrowBigUpDashIcon class="text-2xl" />
-					{{ formatMessage(messages.upgradeToModrinthPlus) }}
-				</a>
-				<PromotionWrapper />
-			</template>
-		</div>
+		<AppSidebar
+			ref="sidebar"
+			:credentials="credentials"
+			:has-plus="hasPlus"
+			:show-ad="showAd"
+			:visible="sidebarVisible"
+			:request-sign-in="() => requestSignIn()"
+			@create-instance="installationModal?.show()"
+			@login-modrinth="signIn"
+		/>
 	</div>
 	<I18nDebugPanel />
 	<NotificationPanel :has-sidebar="sidebarVisible" />
@@ -2536,41 +2416,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	overflow: hidden;
 }
 
-.app-sidebar {
-	overflow: visible;
-	width: 300px;
-	position: relative;
-	height: calc(100vh - var(--top-bar-height));
-	background: var(--brand-gradient-bg);
-
-	--color-button-bg: var(--brand-gradient-button);
-	--surface-4: var(--brand-gradient-button);
-	--color-button-bg-hover: var(--brand-gradient-border);
-	--surface-5: var(--brand-gradient-border);
-	--color-divider: var(--brand-gradient-border);
-	--color-divider-dark: var(--brand-gradient-border);
-}
-
-.app-sidebar::after {
-	content: '';
-	position: absolute;
-	bottom: 250px;
-	left: 0;
-	right: 0;
-	height: 5rem;
-	background: var(--brand-gradient-fade-out-color);
-	pointer-events: none;
-}
-
-.app-sidebar.has-plus::after {
-	display: none;
-}
-
 .disable-advanced-rendering {
-	.app-sidebar::before {
-		box-shadow: none;
-	}
-
 	&.app-contents::before {
 		box-shadow: none;
 	}
@@ -2582,17 +2428,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 }
 
-.app-sidebar::before {
-	content: '';
-	box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.1) inset;
-	top: 0;
-	bottom: 0;
-	left: -2rem;
-	width: 2rem;
-	position: absolute;
-	pointer-events: none;
-}
-
 .app-viewport {
 	flex-grow: 1;
 	height: 100%;
@@ -2617,18 +2452,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	pointer-events: none;
 }
 
-.sidebar-teleport-content {
-	display: contents;
-}
-
-.sidebar-default-content {
-	display: none;
-}
-
-.sidebar-teleport-content:empty + .sidebar-default-content.sidebar-enabled {
-	display: contents;
-}
-
 @media (prefers-reduced-motion: no-preference) {
 	.nav-button-animated-enter-active {
 		transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
diff --git a/apps/app-frontend/src/app/shell/sidebar/index.vue b/apps/app-frontend/src/app/shell/sidebar/index.vue
new file mode 100644
index 00000000000..64223ab351e
--- /dev/null
+++ b/apps/app-frontend/src/app/shell/sidebar/index.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { defineMessages, useScrollIndicator, useVIntl } from '@modrinth/ui'
+import { OverlayScrollbars } from 'overlayscrollbars'
+import { computed, onMounted, onScopeDispose, ref } from 'vue'
+
+import { useTheme } from '@/composables/use-theme'
+import PrideFundraiserBanner from '@/features/campaigns/pride-fundraiser-banner.vue'
+import FriendsList from '@/features/friends/friends-list/index.vue'
+import AccountsCard from '@/features/minecraft-accounts/accounts-card.vue'
+import type { MinecraftAccountsActions } from '@/features/minecraft-accounts/context'
+import NewsSidebar from '@/features/news/news-sidebar.vue'
+import OnboardingChecklist from '@/features/onboarding/checklist.vue'
+import type { ModrinthCredentials } from '@/helpers/mr_auth'
+import { injectOnboardingChecklist } from '@/providers/onboarding-checklist'
+
+import Promotion from './promotion.vue'
+
+defineProps<{
+	credentials: ModrinthCredentials | null | undefined
+	hasPlus: boolean
+	showAd: boolean
+	visible: boolean
+	requestSignIn: () => void
+}>()
+
+const emit = defineEmits<{
+	'create-instance': []
+	'login-modrinth': []
+}>()
+
+const { formatMessage } = useVIntl()
+const appTheme = useTheme()
+const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = injectOnboardingChecklist()
+const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value)
+const accounts = ref<InstanceType<typeof AccountsCard> | null>(null)
+const friends = ref<InstanceType<typeof FriendsList> | null>(null)
+const scrollContainer = ref<HTMLElement | null>(null)
+const scrollViewport = ref<HTMLElement | null>(null)
+const upgradeHeight = ref(0)
+const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(scrollViewport)
+
+let removeScrollbarListener: (() => void) | undefined
+
+onMounted(() => {
+	if (!scrollContainer.value) return
+	const scrollbars = OverlayScrollbars(scrollContainer.value)
+	if (!scrollbars) return
+	scrollViewport.value = scrollbars.elements().viewport
+	removeScrollbarListener = scrollbars.on('updated', checkScrollState)
+})
+
+onScopeDispose(() => removeScrollbarListener?.())
+
+const minecraftAccounts = computed<MinecraftAccountsActions | null>(() => {
+	const card = accounts.value
+	if (!card) return null
+	return {
+		loginDisabled: card.loginDisabled,
+		refreshValues: card.refreshValues,
+		setEquippedSkin: card.setEquippedSkin,
+		setLoginDisabled: card.setLoginDisabled,
+		login: card.login,
+	}
+})
+
+function showAddFriendModal() {
+	friends.value?.showAddFriendModal()
+}
+
+defineExpose({ minecraftAccounts, showAddFriendModal })
+
+const scrollbarOptions = Object.freeze({
+	overflow: {
+		x: 'hidden',
+		y: 'scroll',
+	},
+})
+
+const messages = defineMessages({
+	playingAs: {
+		id: 'app.sidebar.playing-as',
+		defaultMessage: 'Playing as',
+	},
+})
+</script>
+
+<template>
+	<div
+		class="app-sidebar mt-px relative flex h-[calc(100vh-var(--top-bar-height))] w-[300px] shrink-0 flex-col overflow-visible border-0 border-l-[1px] border-solid border-[--brand-gradient-border] before:pointer-events-none before:absolute before:inset-y-0 before:-left-8 before:w-8 before:content-['']"
+		:class="{
+			'before:shadow-[-15px_0_15px_-15px_rgba(0,0,0,0.1)_inset]': appTheme.advancedRendering,
+		}"
+	>
+		<div class="relative flex min-h-0 grow shrink flex-col">
+			<div
+				ref="scrollContainer"
+				v-overlay-scrollbars="scrollbarOptions"
+				class="app-sidebar-scrollable relative min-h-0 grow shrink"
+				data-overlayscrollbars-initialize
+			>
+				<OnboardingChecklist
+					@create-instance="emit('create-instance')"
+					@login-minecraft="accounts?.login()"
+					@login-modrinth="emit('login-modrinth')"
+				/>
+				<div id="sidebar-teleport-target" class="sidebar-teleport-content contents"></div>
+				<div class="sidebar-default-content hidden" :class="{ 'sidebar-enabled': visible }">
+					<div
+						v-show="hasLoggedIntoMinecraft"
+						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
+						<h3 class="text-base text-primary font-medium m-0">
+							{{ formatMessage(messages.playingAs) }}
+						</h3>
+						<Suspense>
+							<AccountsCard ref="accounts" />
+						</Suspense>
+					</div>
+					<div
+						v-show="showFriendsList"
+						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
+						<Suspense>
+							<FriendsList
+								ref="friends"
+								:credentials="credentials ?? null"
+								:sign-in="requestSignIn"
+							/>
+						</Suspense>
+					</div>
+					<PrideFundraiserBanner
+						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					/>
+					<NewsSidebar
+						:style="showAd ? { paddingBottom: `calc(1rem + ${upgradeHeight}px)` } : undefined"
+					/>
+				</div>
+			</div>
+			<div
+				class="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-[#19211F] to-transparent transition-opacity duration-200 motion-reduce:transition-none"
+				:class="showTopFade ? 'opacity-100' : 'opacity-0'"
+				aria-hidden="true"
+			/>
+			<div
+				class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-gradient-to-t from-[#151A1B] to-transparent transition-opacity duration-200 motion-reduce:transition-none"
+				:class="showAd || showBottomFade ? 'opacity-100' : 'opacity-0'"
+				aria-hidden="true"
+			/>
+		</div>
+		<Promotion v-if="showAd" @upgrade-height="upgradeHeight = $event" />
+	</div>
+</template>
+
+<style scoped>
+.app-sidebar {
+	background: var(--brand-gradient-bg);
+	--color-button-bg: var(--brand-gradient-button);
+	--surface-4: var(--brand-gradient-button);
+	--color-button-bg-hover: var(--brand-gradient-border);
+	--surface-5: var(--brand-gradient-border);
+	--color-divider: var(--brand-gradient-border);
+	--color-divider-dark: var(--brand-gradient-border);
+}
+
+.sidebar-teleport-content:empty + .sidebar-default-content.sidebar-enabled {
+	display: contents;
+}
+</style>
diff --git a/apps/app-frontend/src/app/shell/sidebar/promotion.vue b/apps/app-frontend/src/app/shell/sidebar/promotion.vue
new file mode 100644
index 00000000000..62b665858ed
--- /dev/null
+++ b/apps/app-frontend/src/app/shell/sidebar/promotion.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ArrowBigUpDashIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { useResizeObserver } from '@vueuse/core'
+import { onMounted, onScopeDispose, ref } from 'vue'
+
+import { init_ads_window } from '@/helpers/ads.js'
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	upgradeToModrinthPlus: {
+		id: 'app.nav.upgrade-to-modrinth-plus',
+		defaultMessage: 'Upgrade to Modrinth+',
+	},
+})
+const adsWrapper = ref<HTMLElement | null>(null)
+const upgradeLink = ref<HTMLElement | null>(null)
+const emit = defineEmits<{
+	'upgrade-height': [height: number]
+}>()
+
+useResizeObserver(upgradeLink, () => {
+	emit('upgrade-height', upgradeLink.value?.getBoundingClientRect().height ?? 0)
+})
+
+let devicePixelRatioWatcher: MediaQueryList | null = null
+
+function initDevicePixelRatioWatcher() {
+	if (devicePixelRatioWatcher) {
+		devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
+	}
+
+	devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+	devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
+}
+
+onMounted(() => {
+	updateAdPosition()
+
+	window.addEventListener('resize', updateAdPosition)
+	initDevicePixelRatioWatcher()
+})
+
+onScopeDispose(() => {
+	window.removeEventListener('resize', updateAdPosition)
+	devicePixelRatioWatcher?.removeEventListener('change', updateAdPosition)
+})
+
+function updateAdPosition() {
+	if (adsWrapper.value) {
+		init_ads_window()
+		initDevicePixelRatioWatcher()
+	}
+}
+</script>
+
+<template>
+	<a
+		ref="upgradeLink"
+		href="https://modrinth.plus?app"
+		class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
+		target="_blank"
+	>
+		<ArrowBigUpDashIcon class="text-2xl" />
+		{{ formatMessage(messages.upgradeToModrinthPlus) }}
+	</a>
+	<div
+		ref="adsWrapper"
+		class="ad-parent relative flex w-full justify-center cursor-pointer bg-surface-1"
+	>
+		<a
+			href="https://modrinth.host/medal?from=app-placeholder"
+			target="_blank"
+			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
+		>
+			<img
+				src="https://cdn.modrinth.com/modrinth-hosting-medal-light.webp"
+				alt="Host your next server with Modrinth Hosting"
+				class="hidden rounded-[inherit] [.light_&]:block [.light-mode_&]:block"
+			/>
+			<img
+				src="https://cdn.modrinth.com/modrinth-hosting-medal-dark.webp"
+				alt="Host your next server with Modrinth Hosting"
+				class="rounded-[inherit] [.light_&]:hidden [.light-mode_&]:hidden"
+			/>
+		</a>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/components/ui/PromotionWrapper.vue b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
deleted file mode 100644
index 16615831d58..00000000000
--- a/apps/app-frontend/src/components/ui/PromotionWrapper.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue'
-
-import { init_ads_window } from '@/helpers/ads.js'
-
-const adsWrapper = ref(null)
-
-let devicePixelRatioWatcher = null
-
-function initDevicePixelRatioWatcher() {
-	if (devicePixelRatioWatcher) {
-		devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
-	}
-
-	devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
-	devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
-}
-
-onMounted(() => {
-	updateAdPosition()
-
-	window.addEventListener('resize', updateAdPosition)
-	initDevicePixelRatioWatcher()
-})
-
-function updateAdPosition() {
-	if (adsWrapper.value) {
-		init_ads_window()
-		initDevicePixelRatioWatcher()
-	}
-}
-</script>
-
-<template>
-	<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
-		<a
-			href="https://modrinth.host/medal?from=app-placeholder"
-			target="_blank"
-			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
-		>
-			<img
-				src="https://cdn.modrinth.com/modrinth-hosting-medal-light.webp"
-				alt="Host your next server with Modrinth Hosting"
-				class="hidden light-image rounded-[inherit]"
-			/>
-			<img
-				src="https://cdn.modrinth.com/modrinth-hosting-medal-dark.webp"
-				alt="Host your next server with Modrinth Hosting"
-				class="dark-image rounded-[inherit]"
-			/>
-		</a>
-	</div>
-</template>
-<style lang="scss" scoped>
-.light,
-.light-mode {
-	.dark-image {
-		display: none;
-	}
-
-	.light-image {
-		display: block;
-	}
-}
-</style>
diff --git a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
index 73293f5bed1..4437d405011 100644
--- a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
@@ -59,16 +59,16 @@
 <script setup lang="ts">
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
 import { Button, ButtonLink, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
-import { inject, type Ref, ref } from 'vue'
+import { ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
 import { handleSevereError } from '@/composables/use-error.js'
+import { injectMinecraftAccounts } from '@/features/minecraft-accounts/context'
 import { trackEvent } from '@/helpers/analytics'
 import { login as loginFlow, set_default_user } from '@/helpers/auth.js'
 
 const { formatMessage } = useVIntl()
-const accountsCard = inject('accountsCard') as Ref<InstanceType<typeof AccountsCard> | null>
+const minecraftAccounts = injectMinecraftAccounts()
 
 const messages = defineMessages({
 	header: {
@@ -117,7 +117,7 @@ async function signIn() {
 		if (!loggedIn) return
 
 		await set_default_user(loggedIn.profile.id)
-		await accountsCard.value?.refreshValues()
+		await minecraftAccounts.value?.refreshValues()
 		await trackEvent('AccountLogIn', { source: 'MinecraftRequiredModal' })
 		modal.value?.hide()
 	} catch (error) {
diff --git a/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue b/apps/app-frontend/src/features/campaigns/pride-fundraiser-banner.vue
similarity index 87%
rename from apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
rename to apps/app-frontend/src/features/campaigns/pride-fundraiser-banner.vue
index 2599ac3c81e..546ba5d3cd3 100644
--- a/apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue
+++ b/apps/app-frontend/src/features/campaigns/pride-fundraiser-banner.vue
@@ -5,6 +5,14 @@ import { useQuery } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, ref } from 'vue'
 
+import { useAppSettings } from '@/composables/use-app-settings'
+
+const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime()
+const appSettings = useAppSettings()
+const enabled = computed(
+	() => appSettings.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE,
+)
+
 const DISMISSED_STORAGE_KEY = 'pride-fundraiser-2026-dismissed'
 
 const client = injectModrinthClient()
@@ -13,13 +21,13 @@ const dismissed = ref(localStorage.getItem(DISMISSED_STORAGE_KEY) === 'true')
 const { data: campaignInfo } = useQuery({
 	queryKey: ['campaign', 'pride-26'],
 	queryFn: () => client.labrinth.campaign_internal.getPride26(),
-	enabled: () => !dismissed.value,
+	enabled: () => enabled.value && !dismissed.value,
 	staleTime: 15 * 60 * 1000,
 	refetchInterval: 15 * 60 * 1000,
 	retry: false,
 })
 const shouldShowBanner = computed(
-	() => !dismissed.value && Number(campaignInfo.value?.target_usd) > 0,
+	() => enabled.value && !dismissed.value && Number(campaignInfo.value?.target_usd) > 0,
 )
 
 async function openPrideFundraiser() {
@@ -40,10 +48,7 @@ function formatUsd(amount: string | number) {
 }
 
 function daysLeft() {
-	return Math.max(
-		0,
-		Math.ceil((new Date('2026-07-01T00:00:00Z').getTime() - Date.now()) / (24 * 60 * 60 * 1000)),
-	)
+	return Math.max(0, Math.ceil((PRIDE_FUNDRAISER_END_DATE - Date.now()) / (24 * 60 * 60 * 1000)))
 }
 </script>
 
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/features/friends/friends-list/index.vue
similarity index 99%
rename from apps/app-frontend/src/components/ui/friends/FriendsList.vue
rename to apps/app-frontend/src/features/friends/friends-list/index.vue
index 08f0d43dd56..812cf7b5d0b 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/features/friends/friends-list/index.vue
@@ -13,14 +13,15 @@ import {
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
-import { useFriends } from '@/composables/use-friends'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 
+import { useFriends } from '../use-friends'
+import FriendsSection from './section.vue'
+
 const { formatMessage } = useVIntl()
 
 const { handleError } = injectNotificationManager()
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsSection.vue b/apps/app-frontend/src/features/friends/friends-list/section.vue
similarity index 100%
rename from apps/app-frontend/src/components/ui/friends/FriendsSection.vue
rename to apps/app-frontend/src/features/friends/friends-list/section.vue
diff --git a/apps/app-frontend/src/composables/use-friends.ts b/apps/app-frontend/src/features/friends/use-friends.ts
similarity index 100%
rename from apps/app-frontend/src/composables/use-friends.ts
rename to apps/app-frontend/src/features/friends/use-friends.ts
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/features/minecraft-accounts/accounts-card.vue
similarity index 100%
rename from apps/app-frontend/src/components/ui/AccountsCard.vue
rename to apps/app-frontend/src/features/minecraft-accounts/accounts-card.vue
diff --git a/apps/app-frontend/src/features/minecraft-accounts/context.ts b/apps/app-frontend/src/features/minecraft-accounts/context.ts
new file mode 100644
index 00000000000..958097bfd74
--- /dev/null
+++ b/apps/app-frontend/src/features/minecraft-accounts/context.ts
@@ -0,0 +1,16 @@
+import { createContext } from '@modrinth/ui'
+import type { Ref } from 'vue'
+
+import type { Skin } from '@/helpers/skins'
+
+export interface MinecraftAccountsActions {
+	readonly loginDisabled: boolean
+	refreshValues: () => Promise<void>
+	setEquippedSkin: (skin: Skin) => Promise<void>
+	setLoginDisabled: (disabled: boolean) => void
+	login: () => Promise<void>
+}
+
+export const [injectMinecraftAccounts, provideMinecraftAccounts] = createContext<
+	Readonly<Ref<MinecraftAccountsActions | null>>
+>('root', 'minecraftAccounts')
diff --git a/apps/app-frontend/src/features/news/news-sidebar.vue b/apps/app-frontend/src/features/news/news-sidebar.vue
new file mode 100644
index 00000000000..17b82dcbbf3
--- /dev/null
+++ b/apps/app-frontend/src/features/news/news-sidebar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { NewspaperIcon } from '@modrinth/assets'
+import { ButtonLink, defineMessages, NewsArticleCard, useVIntl } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { watch } from 'vue'
+
+import { newsArticlesQueryOptions } from './queries'
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	news: {
+		id: 'app.news.title',
+		defaultMessage: 'News',
+	},
+	viewAllNews: {
+		id: 'app.news.view-all',
+		defaultMessage: 'View all news',
+	},
+})
+
+const { data: news, error } = useQuery({
+	...newsArticlesQueryOptions(),
+	select: (articles) => articles.slice(0, 4),
+})
+
+watch(error, (error) => {
+	if (error) console.error('Failed to fetch news articles', error)
+})
+</script>
+
+<template>
+	<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
+		<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">
+			{{ formatMessage(messages.news) }}
+		</h3>
+		<div class="space-y-4 flex flex-col items-center w-full">
+			<NewsArticleCard v-for="item in news" :key="item.path" :article="item" />
+			<ButtonLink
+				type="colored"
+				color="brand"
+				size="xl"
+				href="https://modrinth.com/news"
+				target="_blank"
+				class="my-4"
+			>
+				<NewspaperIcon />
+				{{ formatMessage(messages.viewAllNews) }}
+			</ButtonLink>
+		</div>
+	</div>
+</template>
diff --git a/apps/app-frontend/src/features/news/queries.ts b/apps/app-frontend/src/features/news/queries.ts
new file mode 100644
index 00000000000..b6ea3612a92
--- /dev/null
+++ b/apps/app-frontend/src/features/news/queries.ts
@@ -0,0 +1,27 @@
+import type { NewsArticle } from '@modrinth/ui'
+import { queryOptions } from '@tanstack/vue-query'
+
+type NewsFeedArticle = Omit<NewsArticle, 'path'> & { link: string }
+
+export const newsKeys = {
+	articles: ['news', 'articles'] as const,
+}
+
+export function newsArticlesQueryOptions() {
+	return queryOptions({
+		queryKey: newsKeys.articles,
+		queryFn: async ({ signal }): Promise<NewsArticle[]> => {
+			const response = await fetch('https://modrinth.com/news/feed/articles.json', { signal })
+			if (!response.ok) {
+				throw new Error(`Failed to fetch news articles: HTTP ${response.status}`)
+			}
+			const feed: { articles?: NewsFeedArticle[] } | null = await response.json()
+			return (feed?.articles ?? []).map((article) => ({ ...article, path: article.link }))
+		},
+		staleTime: Infinity,
+		retry: false,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+	})
+}
diff --git a/apps/app-frontend/src/components/ui/onboarding-checklist/index.vue b/apps/app-frontend/src/features/onboarding/checklist.vue
similarity index 100%
rename from apps/app-frontend/src/components/ui/onboarding-checklist/index.vue
rename to apps/app-frontend/src/features/onboarding/checklist.vue
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index ca84f5764f0..30ec659fc18 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -25,15 +25,14 @@ import { arrayBufferToBase64 } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 import { type DragDropEvent, getCurrentWebview } from '@tauri-apps/api/webview'
 import { computedAsync } from '@vueuse/core'
-import type { Ref } from 'vue'
-import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
 import EarsModIcon from '@/assets/skins/ears-mod.png'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
 import VirtualSkinSectionList from '@/components/ui/skin/VirtualSkinSectionList.vue'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { handleSevereError } from '@/composables/use-error.js'
+import { injectMinecraftAccounts } from '@/features/minecraft-accounts/context'
 import { trackEvent } from '@/helpers/analytics'
 import { check_reachable, get_default_user, login as login_flow, users } from '@/helpers/auth'
 import { cleanupUnusedPreviews } from '@/helpers/rendering/skin-previews'
@@ -229,7 +228,7 @@ const skins = ref<Skin[]>([])
 const capes = ref<Cape[]>([])
 const offline = ref(!navigator.onLine)
 
-const accountsCard = inject('accountsCard') as Ref<typeof AccountsCard>
+const minecraftAccounts = injectMinecraftAccounts()
 const currentUser = ref(undefined)
 const currentUserId = ref<string | undefined>(undefined)
 
@@ -578,7 +577,7 @@ function setLocallyEquippedSkin(skinToApply: Skin) {
 	originalSelectedSkin.value =
 		skins.value.find((skin) => skinsMatch(skin, skinToApply)) ?? skinToApply
 	selectedSkin.value = originalSelectedSkin.value
-	void accountsCard.value?.setEquippedSkin(originalSelectedSkin.value)
+	void minecraftAccounts.value?.setEquippedSkin(originalSelectedSkin.value)
 }
 
 function insertLocalSkin(savedSkin: Skin) {
@@ -634,7 +633,7 @@ function updateLocalSkin(savedSkin: Skin, applied: boolean, previousSkin?: Skin)
 
 		originalSelectedSkin.value = locallyEquippedSkin
 		selectedSkin.value = locallyEquippedSkin
-		void accountsCard.value?.setEquippedSkin(locallyEquippedSkin)
+		void minecraftAccounts.value?.setEquippedSkin(locallyEquippedSkin)
 	} else {
 		const locallySavedSkin =
 			skins.value.find((skin) => skin.texture_key === savedSkin.texture_key) ?? savedSkin
@@ -725,7 +724,7 @@ async function preserveExternalSkins(skinsToPersist: Skin[]) {
 
 		if (skinsMatchIgnoringSource(originalSelectedSkin.value, skin)) {
 			originalSelectedSkin.value = preservedSkin
-			void accountsCard.value?.setEquippedSkin(preservedSkin)
+			void minecraftAccounts.value?.setEquippedSkin(preservedSkin)
 		}
 
 		preservedSkins.push(preservedSkin)
@@ -760,8 +759,8 @@ function schedulePendingSkinRefresh() {
 			return
 		}
 
-		if (accountsCard.value) {
-			await accountsCard.value.refreshValues()
+		if (minecraftAccounts.value) {
+			await minecraftAccounts.value.refreshValues()
 		}
 
 		await loadCapes()
@@ -830,15 +829,15 @@ async function loadCurrentUser() {
 }
 
 async function login() {
-	accountsCard.value.setLoginDisabled(true)
+	minecraftAccounts.value?.setLoginDisabled(true)
 	const loggedIn = await login_flow().catch(handleSevereError)
 
-	if (loggedIn && accountsCard) {
-		await accountsCard.value.refreshValues()
+	if (loggedIn && minecraftAccounts.value) {
+		await minecraftAccounts.value.refreshValues()
 	}
 
 	trackEvent('AccountLogIn')
-	accountsCard.value.setLoginDisabled(false)
+	minecraftAccounts.value?.setLoginDisabled(false)
 }
 
 function openAddSkinFileBrowser() {
@@ -1061,7 +1060,7 @@ async function checkUserChanges() {
 	try {
 		const defaultId = await get_default_user()
 		if (defaultId !== currentUserId.value) {
-			await accountsCard.value?.refreshValues()
+			await minecraftAccounts.value?.refreshValues()
 			await loadCurrentUser()
 			await loadCapes()
 			await loadSkins()
@@ -1295,13 +1294,13 @@ await loadSkins()
 				</div>
 			</div>
 			<Button
-				v-show="accountsCard"
+				v-show="minecraftAccounts"
 				type="colored"
 				color="brand"
-				:disabled="accountsCard.loginDisabled"
+				:disabled="minecraftAccounts?.loginDisabled"
 				@click="login"
 			>
-				<SpinnerIcon v-if="accountsCard.loginDisabled" class="animate-spin" />
+				<SpinnerIcon v-if="minecraftAccounts?.loginDisabled" class="animate-spin" />
 				<WindowsIcon v-else />
 				{{ formatMessage(messages.signInButton) }}
 			</Button>
diff --git a/apps/app-frontend/src/pages/instance/share/use-shared-instance-invite-candidates.ts b/apps/app-frontend/src/pages/instance/share/use-shared-instance-invite-candidates.ts
index b25e9e91dfd..3d8830d42e8 100644
--- a/apps/app-frontend/src/pages/instance/share/use-shared-instance-invite-candidates.ts
+++ b/apps/app-frontend/src/pages/instance/share/use-shared-instance-invite-candidates.ts
@@ -5,7 +5,7 @@ import {
 } from '@modrinth/ui'
 import { computed, type Ref } from 'vue'
 
-import { useFriends } from '@/composables/use-friends'
+import { useFriends } from '@/features/friends/use-friends'
 import { getFriendUserId } from '@/helpers/friends.ts'
 import { get as getCredentials } from '@/helpers/mr_auth.ts'
 import { search_user } from '@/helpers/users.ts'
diff --git a/apps/app-frontend/tailwind.config.ts b/apps/app-frontend/tailwind.config.ts
index 301221bab4e..d4b216cd473 100644
--- a/apps/app-frontend/tailwind.config.ts
+++ b/apps/app-frontend/tailwind.config.ts
@@ -5,6 +5,7 @@ const config: Config = {
 	content: [
 		'./src/app/**/*.{js,vue,ts}',
 		'./src/components/**/*.{js,vue,ts}',
+		'./src/features/**/*.{js,vue,ts}',
 		'./src/layouts/**/*.vue',
 		'./src/pages/**/*.vue',
 		'./src/plugins/**/*.{js,ts}',