From 28567cd64a8e8c21dab5f87c32094044deedf7ce Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Mon, 15 Sep 2025 14:04:40 -0700
Subject: [PATCH 1/2] Begin affiliates frontend

---
 apps/frontend/src/composables/affiliates.ts  |  23 +++
 apps/frontend/src/layouts/default.vue        |  17 +-
 apps/frontend/src/locales/en-US/index.json   |   3 +
 apps/frontend/src/pages/admin/affiliates.vue | 198 +++++++++++++++++++
 apps/frontend/src/pages/servers/index.vue    |  24 ++-
 packages/assets/generated-icons.ts           |   6 +
 packages/assets/icons/affiliate.svg          |  11 ++
 packages/assets/icons/circle-user.svg        |   1 +
 packages/assets/icons/user-search.svg        |   1 +
 9 files changed, 282 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/composables/affiliates.ts
 create mode 100644 apps/frontend/src/pages/admin/affiliates.vue
 create mode 100644 packages/assets/icons/affiliate.svg
 create mode 100644 packages/assets/icons/circle-user.svg
 create mode 100644 packages/assets/icons/user-search.svg

diff --git a/apps/frontend/src/composables/affiliates.ts b/apps/frontend/src/composables/affiliates.ts
new file mode 100644
index 0000000000..46081dcdea
--- /dev/null
+++ b/apps/frontend/src/composables/affiliates.ts
@@ -0,0 +1,23 @@
+export const useAffiliates = () => {
+	const affiliateCookie = useCookie('mrs_afl', {
+		// maxAge: 60 * 60 * 24 * 7, // 7 days
+		maxAge: 60 * 60, // an hour
+		sameSite: 'lax',
+		secure: true,
+		httpOnly: false,
+		path: '/',
+	})
+
+	const setAffiliateCode = (code: string) => {
+		affiliateCookie.value = code
+	}
+
+	const getAffiliateCode = (): string | undefined => {
+		return affiliateCookie.value || undefined
+	}
+
+	return {
+		setAffiliateCode,
+		getAffiliateCode,
+	}
+}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 99cb7eb82f..b05c3f20d7 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -362,6 +362,12 @@
 								link: '/admin/user_email',
 								shown: isAdmin(auth.user),
 							},
+							{
+								id: 'affiliates',
+								color: 'primary',
+								link: '/admin/affiliates',
+								shown: isAdmin(auth.user),
+							},
 							{
 								id: 'servers-notices',
 								color: 'primary',
@@ -379,7 +385,7 @@
 							<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
 						</template>
 						<template #user-lookup>
-							<UserIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
+							<UserSearchIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
 						</template>
 						<template #file-lookup>
 							<FileIcon aria-hidden="true" /> {{ formatMessage(messages.fileLookup) }}
@@ -387,6 +393,9 @@
 						<template #servers-notices>
 							<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
 						</template>
+						<template #affiliates>
+							<AffiliateIcon aria-hidden="true" /> {{ formatMessage(messages.manageAffiliates) }}
+						</template>
 					</OverflowMenu>
 				</ButtonStyled>
 				<ButtonStyled type="transparent">
@@ -750,6 +759,7 @@
 </template>
 <script setup>
 import {
+	AffiliateIcon,
 	ArrowBigUpDashIcon,
 	BellIcon,
 	BlueskyIcon,
@@ -788,6 +798,7 @@ import {
 	SunIcon,
 	TwitterIcon,
 	UserIcon,
+	UserSearchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
@@ -996,6 +1007,10 @@ const messages = defineMessages({
 		id: 'layout.action.manage-server-notices',
 		defaultMessage: 'Manage server notices',
 	},
+	manageAffiliates: {
+		id: 'layout.action.manage-affiliates',
+		defaultMessage: 'Manage affiliates',
+	},
 	newProject: {
 		id: 'layout.action.new-project',
 		defaultMessage: 'New project',
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 17866b10d5..2d0bcde855 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -677,6 +677,9 @@
   "layout.action.lookup-by-email": {
     "message": "Lookup by email"
   },
+  "layout.action.manage-affiliates": {
+    "message": "Manage affiliates"
+  },
   "layout.action.manage-server-notices": {
     "message": "Manage server notices"
   },
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
new file mode 100644
index 0000000000..00ae034434
--- /dev/null
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -0,0 +1,198 @@
+<template>
+	<NewModal ref="createModal" header="Creating new affiliate code">
+		<div class="flex flex-col gap-4">
+			<span class="text-lg font-semibold text-contrast">Modrinth username of affiliate</span>
+			<div class="flex items-center gap-2">
+				<div class="iconified-input">
+					<UserIcon aria-hidden="true" />
+					<input
+						v-model="affiliateUsername"
+						class="card-shadow"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="`Username`"
+					/>
+					<Button v-if="affiliateUsername" class="r-btn" @click="() => (affiliateUsername = '')">
+						<XIcon />
+					</Button>
+				</div>
+				<ButtonStyled color="brand">
+					<button @click="createAffiliateCode">
+						<PlusIcon />
+						Create affiliate code
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+	<ConfirmModal
+		ref="revokeModal"
+		:title="`Are you sure you want to revoke ${revokingAffiliateUsername}'s affiliate code?`"
+		:description="`This will permanently revoke the affiliate code \`${revokingAffiliateId}\` and make any links that this user has shared invalid.`"
+		:proceed-icon="XCircleIcon"
+		:proceed-label="`Revoke`"
+		@proceed="confirmRevokeAffiliateCode"
+	/>
+	<div class="page">
+		<div
+			class="mb-6 flex items-center gap-6 border-0 border-b-[1px] border-solid border-divider pb-6"
+		>
+			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliates</h1>
+			<div class="flex items-center gap-2">
+				<div class="iconified-input">
+					<SearchIcon aria-hidden="true" />
+					<input
+						v-model="filterQuery"
+						class="card-shadow"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="`Search affiliates...`"
+					/>
+					<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
+						<XIcon />
+					</Button>
+				</div>
+				<ButtonStyled color="brand">
+					<button @click="createModal?.show">
+						<PlusIcon />
+						Create affiliate
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+		<div
+			v-for="affiliate in filteredAffiliates"
+			:key="`affiliate-${affiliate.id}`"
+			class="card-shadow mb-3 flex items-center gap-4 rounded-2xl bg-bg-raised p-4"
+		>
+			<nuxt-link
+				:to="`/user/${affiliate.username}`"
+				tabindex="-1"
+				class="hover:brightness-[--hover-brightness]"
+			>
+				<Avatar :src="affiliate.avatar_url" circle size="48px" />
+			</nuxt-link>
+			<div class="flex flex-col gap-1">
+				<nuxt-link
+					:to="`/user/${affiliate.username}`"
+					class="w-fit text-lg font-bold text-contrast hover:underline"
+				>
+					{{ affiliate.username }}
+				</nuxt-link>
+				<div class="flex items-center gap-2">
+					<CopyCode :text="`https://modrinth.gg?afl=${affiliate.affiliate_codes[0]}`" />
+					<CopyCode :text="affiliate.affiliate_codes[0]" />
+				</div>
+			</div>
+			<div class="ml-auto flex items-center gap-2">
+				<ButtonStyled>
+					<nuxt-link>
+						<ChartIcon />
+						View analytics
+					</nuxt-link>
+				</ButtonStyled>
+				<ButtonStyled color="red" color-fill="text">
+					<button @click="revokeAffiliateCode(affiliate.username, affiliate.id)">
+						<XCircleIcon /> Revoke affiliate code
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ChartIcon, PlusIcon, SearchIcon, UserIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import { Avatar, Button, ButtonStyled, ConfirmModal, CopyCode, NewModal } from '@modrinth/ui'
+
+const createModal = useTemplateRef<typeof NewModal>('createModal')
+const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')
+
+const filterQuery = ref('')
+
+const filteredAffiliates = computed(() =>
+	affiliateUsers.value.filter((affiliate) =>
+		filterQuery.value.trim()
+			? affiliate.username.trim().toLowerCase().includes(filterQuery.value.trim().toLowerCase())
+			: true,
+	),
+)
+
+// placeholder affiliate data
+const affiliateUsers = computed(() => {
+	return [
+		{
+			id: 'Dc7EYhxG',
+			username: 'Prospector',
+			avatar_url:
+				'https://cdn.modrinth.com/user/Dc7EYhxG/32e8b1f7d18288262d1ed92cbdf43272d21b4fcd.png',
+			bio: 'Software Engineer at Modrinth.\n\nFounder of ModFest, co-founder of TerraformersMC. Creator of Traverse and Mod Menu.',
+			created: '2020-11-06T04:56:05.014379Z',
+			role: 'admin',
+			badges: 1,
+			auth_providers: null,
+			email: null,
+			email_verified: null,
+			has_password: null,
+			has_totp: null,
+			payout_data: null,
+			stripe_customer_id: null,
+			allow_friend_requests: null,
+			github_id: null,
+			affiliate_codes: ['cD2EThlR'],
+		},
+		{
+			id: 'MpxzqsyW',
+			username: 'Geometrically',
+			avatar_url:
+				'https://cdn.modrinth.com/data/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613_96.webp',
+			bio: 'I make stuff',
+			created: '2020-10-19T02:30:03.202550Z',
+			role: 'admin',
+			badges: 1,
+			auth_providers: null,
+			email: null,
+			email_verified: null,
+			has_password: null,
+			has_totp: null,
+			payout_data: null,
+			stripe_customer_id: null,
+			allow_friend_requests: null,
+			github_id: null,
+			affiliate_codes: ['p4DcS4lQ'],
+		},
+	]
+})
+
+const affiliateUsername = ref<string | null>(null)
+
+function createAffiliateCode() {
+	createModal.value?.hide()
+	affiliateUsername.value = null
+}
+
+const revokingAffiliateUsername = ref<string | null>(null)
+const revokingAffiliateId = ref<string | null>(null)
+
+function revokeAffiliateCode(username: string, affiliateId: string) {
+	revokingAffiliateUsername.value = username
+	revokingAffiliateId.value = affiliateId
+	revokeModal.value?.show()
+}
+
+function confirmRevokeAffiliateCode() {
+	revokeModal.value?.hide()
+	revokingAffiliateUsername.value = null
+	revokingAffiliateId.value = null
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 78.5rem;
+}
+</style>
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index c91d6eeaf7..656eca770a 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -1,4 +1,8 @@
 <template>
+	<div v-if="affiliateCode" class="text-center text-2xl font-bold text-red">
+		Affiliate code: '{{ affiliateCode }}'
+	</div>
+	<div v-else class="text-center text-2xl font-bold text-red">No affiliate code saved</div>
 	<div
 		ref="scrollListener"
 		data-pyro
@@ -664,6 +668,25 @@ import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSele
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'
 
+const route = useRoute()
+const router = useRouter()
+
+const { setAffiliateCode, getAffiliateCode } = useAffiliates()
+
+const affiliateCode = ref(route.query.afl ?? null)
+
+if (affiliateCode.value) {
+	router.replace({
+		query: {
+			...route.query,
+			afl: undefined,
+		},
+	})
+	setAffiliateCode(affiliateCode.value)
+} else {
+	affiliateCode.value = getAffiliateCode()
+}
+
 const { addNotification } = injectNotificationManager()
 const { locale, formatMessage } = useVIntl()
 const flags = useFeatureFlags()
@@ -853,7 +876,6 @@ async function fetchPaymentData() {
 
 const selectedProjectId = ref()
 
-const route = useRoute()
 const isAtCapacity = computed(
 	() => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
 )
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4adb0cf0e4..bf4ded6e44 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -1,6 +1,7 @@
 // Auto-generated icon imports and exports
 // Do not edit this file manually - run 'pnpm run fix' to regenerate
 
+import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
 import _ArrowBigRightDashIcon from './icons/arrow-big-right-dash.svg?component'
@@ -30,6 +31,7 @@ import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
+import _CircleUserIcon from './icons/circle-user.svg?component'
 import _ClearIcon from './icons/clear.svg?component'
 import _ClientIcon from './icons/client.svg?component'
 import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
@@ -187,6 +189,7 @@ import _UpdatedIcon from './icons/updated.svg?component'
 import _UploadIcon from './icons/upload.svg?component'
 import _UserIcon from './icons/user.svg?component'
 import _UserPlusIcon from './icons/user-plus.svg?component'
+import _UserSearchIcon from './icons/user-search.svg?component'
 import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
@@ -199,6 +202,7 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
+export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
 export const ArrowBigRightDashIcon = _ArrowBigRightDashIcon
@@ -228,6 +232,7 @@ export const CheckCircleIcon = _CheckCircleIcon
 export const CheckIcon = _CheckIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
+export const CircleUserIcon = _CircleUserIcon
 export const ClearIcon = _ClearIcon
 export const ClientIcon = _ClientIcon
 export const ClipboardCopyIcon = _ClipboardCopyIcon
@@ -384,6 +389,7 @@ export const UnplugIcon = _UnplugIcon
 export const UpdatedIcon = _UpdatedIcon
 export const UploadIcon = _UploadIcon
 export const UserPlusIcon = _UserPlusIcon
+export const UserSearchIcon = _UserSearchIcon
 export const UserXIcon = _UserXIcon
 export const UserIcon = _UserIcon
 export const UsersIcon = _UsersIcon
diff --git a/packages/assets/icons/affiliate.svg b/packages/assets/icons/affiliate.svg
new file mode 100644
index 0000000000..97551e6967
--- /dev/null
+++ b/packages/assets/icons/affiliate.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+  <g>
+    <circle cx="12" cy="12" r="7"/>
+    <circle cx="12" cy="10.6" r="2.1"/>
+    <circle cx="3.7" cy="3.7" r="1.8"/>
+    <circle cx="20.3" cy="3.7" r="1.8"/>
+    <circle cx="3.7" cy="20.3" r="1.8"/>
+    <circle cx="20.3" cy="20.3" r="1.8"/>
+    <path d="M8.5 18.1v-1.2c0-.8.6-1.4 1.4-1.4h4.2c.8 0 1.4.6 1.4 1.4v1.2M17 7l2-2M5 19l2-2M17 17l2 2M5 5l2 2"/>
+  </g>
+</svg>
diff --git a/packages/assets/icons/circle-user.svg b/packages/assets/icons/circle-user.svg
new file mode 100644
index 0000000000..d34434b77b
--- /dev/null
+++ b/packages/assets/icons/circle-user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/user-search.svg b/packages/assets/icons/user-search.svg
new file mode 100644
index 0000000000..26c73dd8b8
--- /dev/null
+++ b/packages/assets/icons/user-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-search-icon lucide-user-search"><circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.9-1.9"/></svg>
\ No newline at end of file

From f2f7f7157af10d4b5a3eb9a76c5f96eb7b10bb0d Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sat, 4 Oct 2025 10:05:20 -0700
Subject: [PATCH 2/2] Significant work on hooking up affiliates ui

---
 apps/frontend/src/layouts/default.vue         |  13 +-
 apps/frontend/src/pages/admin/affiliates.vue  |  24 +-
 apps/frontend/src/pages/dashboard.vue         |  17 +-
 .../src/pages/dashboard/affiliate-links.vue   | 275 ++++++++++++++++++
 apps/frontend/src/pages/user/[id].vue         | 121 ++++++--
 packages/assets/external/facebook.svg         |   1 +
 packages/assets/external/instagram.svg        |   1 +
 packages/assets/external/reels.svg            |   3 +
 packages/assets/external/snapchat.svg         |   1 +
 packages/assets/external/threads.svg          |   1 +
 packages/assets/external/tiktok.svg           |   1 +
 packages/assets/external/twitch.svg           |   1 +
 packages/assets/external/youtubegaming.svg    |   1 +
 packages/assets/external/youtubeshorts.svg    |   1 +
 packages/assets/index.ts                      |  20 +-
 .../ui/src/components/base/AutoBrandIcon.vue  | 147 ++++++++++
 packages/ui/src/components/index.ts           |   1 +
 packages/ui/src/utils/common-messages.ts      |   4 +
 packages/utils/types.ts                       |   1 +
 19 files changed, 583 insertions(+), 51 deletions(-)
 create mode 100644 apps/frontend/src/pages/dashboard/affiliate-links.vue
 create mode 100644 packages/assets/external/facebook.svg
 create mode 100644 packages/assets/external/instagram.svg
 create mode 100644 packages/assets/external/reels.svg
 create mode 100644 packages/assets/external/snapchat.svg
 create mode 100644 packages/assets/external/threads.svg
 create mode 100644 packages/assets/external/tiktok.svg
 create mode 100644 packages/assets/external/twitch.svg
 create mode 100644 packages/assets/external/youtubegaming.svg
 create mode 100644 packages/assets/external/youtubeshorts.svg
 create mode 100644 packages/ui/src/components/base/AutoBrandIcon.vue

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 4a2ba23ec7..ae915d3dfc 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -492,6 +492,10 @@
 					<template #organizations>
 						<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.organizations) }}
 					</template>
+					<template #affiliate-links>
+						<AffiliateIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.affiliateLinksButton) }}
+					</template>
 					<template #revenue>
 						<CurrencyIcon aria-hidden="true" /> {{ formatMessage(messages.revenue) }}
 					</template>
@@ -832,7 +836,7 @@ import {
 	OverflowMenu,
 	PagewideBanner,
 } from '@modrinth/ui'
-import { isAdmin, isStaff } from '@modrinth/utils'
+import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
@@ -1068,7 +1072,7 @@ const messages = defineMessages({
 	},
 	manageAffiliates: {
 		id: 'layout.action.manage-affiliates',
-		defaultMessage: 'Manage affiliates',
+		defaultMessage: 'Manage affiliate links',
 	},
 	newProject: {
 		id: 'layout.action.new-project',
@@ -1247,6 +1251,11 @@ const userMenuOptions = computed(() => {
 			id: 'organizations',
 			link: '/dashboard/organizations',
 		},
+		{
+			id: 'affiliate-links',
+			link: '/dashboard/affiliate-links',
+			shown: auth.value.user.badges & UserBadge.AFFILIATE,
+		},
 		{
 			id: 'revenue',
 			link: '/dashboard/revenue',
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index 00ae034434..86568bc369 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -38,7 +38,7 @@
 		<div
 			class="mb-6 flex items-center gap-6 border-0 border-b-[1px] border-solid border-divider pb-6"
 		>
-			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliates</h1>
+			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliate links</h1>
 			<div class="flex items-center gap-2">
 				<div class="iconified-input">
 					<SearchIcon aria-hidden="true" />
@@ -70,22 +70,11 @@
 			<nuxt-link
 				:to="`/user/${affiliate.username}`"
 				tabindex="-1"
-				class="hover:brightness-[--hover-brightness]"
+				class="flex gap-4 items-center hover:brightness-[--hover-brightness] w-fit text-lg font-bold text-contrast hover:underline"
 			>
 				<Avatar :src="affiliate.avatar_url" circle size="48px" />
+				{{ affiliate.username }}
 			</nuxt-link>
-			<div class="flex flex-col gap-1">
-				<nuxt-link
-					:to="`/user/${affiliate.username}`"
-					class="w-fit text-lg font-bold text-contrast hover:underline"
-				>
-					{{ affiliate.username }}
-				</nuxt-link>
-				<div class="flex items-center gap-2">
-					<CopyCode :text="`https://modrinth.gg?afl=${affiliate.affiliate_codes[0]}`" />
-					<CopyCode :text="affiliate.affiliate_codes[0]" />
-				</div>
-			</div>
 			<div class="ml-auto flex items-center gap-2">
 				<ButtonStyled>
 					<nuxt-link>
@@ -95,7 +84,7 @@
 				</ButtonStyled>
 				<ButtonStyled color="red" color-fill="text">
 					<button @click="revokeAffiliateCode(affiliate.username, affiliate.id)">
-						<XCircleIcon /> Revoke affiliate code
+						<XCircleIcon /> Remove affiliate
 					</button>
 				</ButtonStyled>
 			</div>
@@ -104,11 +93,14 @@
 </template>
 <script setup lang="ts">
 import { ChartIcon, PlusIcon, SearchIcon, UserIcon, XCircleIcon, XIcon } from '@modrinth/assets'
-import { Avatar, Button, ButtonStyled, ConfirmModal, CopyCode, NewModal } from '@modrinth/ui'
+import { Avatar, Button, ButtonStyled, ConfirmModal, NewModal } from '@modrinth/ui'
 
 const createModal = useTemplateRef<typeof NewModal>('createModal')
 const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')
 
+const { data: affiliates, error, refresh } = useAsyncData('affiliates', () => useBaseFetch('affiliate/admin', { internal: true })).then(({ data }) => console.log(data))
+
+
 const filterQuery = ref('')
 
 const filteredAffiliates = computed(() =>
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 1496b6aaa5..4f68ca5f76 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -30,6 +30,13 @@
 					>
 						<LibraryIcon aria-hidden="true" />
 					</NavStackItem>
+					<NavStackItem
+						v-if="isAffiliate"
+						link="/dashboard/affiliate-links"
+						:label="formatMessage(commonMessages.affiliateLinksButton)"
+					>
+						<AffiliateIcon aria-hidden="true" />
+					</NavStackItem>
 					<NavStackItem link="/dashboard/revenue" label="Revenue">
 						<CurrencyIcon aria-hidden="true" />
 					</NavStackItem>
@@ -41,8 +48,9 @@
 		</div>
 	</div>
 </template>
-<script setup>
+<script setup lang="ts">
 import {
+	AffiliateIcon,
 	BellIcon as NotificationsIcon,
 	ChartIcon,
 	CurrencyIcon,
@@ -53,10 +61,17 @@ import {
 	ReportIcon,
 } from '@modrinth/assets'
 import { commonMessages } from '@modrinth/ui'
+import { type User,UserBadge } from '@modrinth/utils'
 
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
 
+const auth = (await useAuth()) as Ref<{ user: User | null }>
+
+const isAffiliate = computed(() => {
+	return auth.value.user && (auth.value.user.badges & UserBadge.AFFILIATE)
+})
+
 const { formatMessage } = useVIntl()
 
 definePageMeta({
diff --git a/apps/frontend/src/pages/dashboard/affiliate-links.vue b/apps/frontend/src/pages/dashboard/affiliate-links.vue
new file mode 100644
index 0000000000..714c8a9d6f
--- /dev/null
+++ b/apps/frontend/src/pages/dashboard/affiliate-links.vue
@@ -0,0 +1,275 @@
+<template>
+	<NewModal ref="createModal" :header="formatMessage(messages.createHeader)">
+		<div class="flex flex-col gap-4">
+			<label class="contents" for="create-affiliate-title-input">
+				<span class="text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.createTitleLabel) }}
+				</span>
+				<span class="text-secondary">{{ formatMessage(messages.createTitleDescription) }}</span>
+			</label>
+			<div class="flex items-center gap-2">
+				<div class="iconified-input">
+					<AutoBrandIcon :keyword="affiliateLinkTitle" aria-hidden="true">
+						<AffiliateIcon />
+					</AutoBrandIcon>
+					<input
+						id="create-affiliate-title-input"
+						v-model="affiliateLinkTitle"
+						class="card-shadow"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="formatMessage(messages.createTitlePlaceholder)"
+					/>
+					<Button v-if="affiliateLinkTitle" class="r-btn" @click="() => (affiliateLinkTitle = '')">
+						<XIcon />
+					</Button>
+				</div>
+				<ButtonStyled color="brand">
+					<button :disabled="creatingLink" @click="createAffiliateLink">
+						<SpinnerIcon v-if="creatingLink" class="animate-spin" />
+						<PlusIcon v-else />
+						{{ formatMessage(creatingLink ? messages.creatingButton : messages.createButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+	<ConfirmModal
+		ref="revokeModal"
+		:title="formatMessage(messages.revokeConfirmTitle, { title: revokingTitle })"
+		:description="formatMessage(messages.revokeConfirmBody, { id: revokingId })"
+		:proceed-icon="XCircleIcon"
+		:proceed-label="formatMessage(messages.revokeConfirmButton)"
+		@proceed="confirmRevokeAffiliateLink"
+	/>
+	<div class="page">
+		<div
+			class="mb-6 flex items-center gap-6 border-0 border-b-[1px] border-solid border-divider pb-6"
+		>
+			<h1 class="m-0 grow text-2xl font-extrabold">
+				{{ formatMessage(messages.yourAffiliateLinks) }}
+			</h1>
+			<div class="flex items-center gap-2">
+				<div class="iconified-input">
+					<SearchIcon aria-hidden="true" />
+					<input
+						v-model="filterQuery"
+						class="card-shadow"
+						autocomplete="off"
+						spellcheck="false"
+						type="text"
+						:placeholder="formatMessage(messages.searchAffiliateLinks)"
+					/>
+					<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
+						<XIcon />
+					</Button>
+				</div>
+				<ButtonStyled color="brand">
+					<button @click="createModal?.show">
+						<PlusIcon />
+						{{ formatMessage(messages.createButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+		<Admonition v-if="error" type="critical">
+			<template #header>
+				{{ formatMessage(messages.errorTitle) }}
+			</template>
+			{{ error }}
+		</Admonition>
+		<div
+			v-for="affiliate in filteredAffiliates"
+			v-else
+			:key="`affiliate-${affiliate.id}`"
+			class="card-shadow mb-3 flex flex-col gap-4 rounded-2xl bg-bg-raised p-4"
+		>
+			<div class="flex items-center gap-4">
+				<div
+					class="flex items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg p-2"
+				>
+					<AutoBrandIcon :keyword="affiliate.source_name" class="h-6 w-6">
+						<AffiliateIcon />
+					</AutoBrandIcon>
+				</div>
+				<div class="flex flex-col gap-1">
+					<span class="w-fit text-lg font-bold text-contrast">
+						{{ affiliate.source_name }}
+					</span>
+				</div>
+				<div class="ml-auto flex items-center gap-2">
+					<ButtonStyled color="red" color-fill="text">
+						<button @click="revokeAffiliateLink(affiliate)">
+							<XCircleIcon /> {{ formatMessage(messages.revokeAffiliateLink) }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<CopyCode :text="`https://modrinth.gg?afl=${affiliate.id}`" />
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import {
+	AffiliateIcon,
+	PlusIcon,
+	SearchIcon,
+	SpinnerIcon,
+	XCircleIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Admonition,
+	AutoBrandIcon,
+	Button,
+	ButtonStyled,
+	ConfirmModal,
+	CopyCode,
+	NewModal,
+} from '@modrinth/ui'
+import { useVIntl } from '@vintl/vintl'
+
+const createModal = useTemplateRef<typeof NewModal>('createModal')
+const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')
+
+const auth: { user: any } & any = await useAuth()
+
+const { formatMessage } = useVIntl()
+
+type AffiliateLink = {
+	id: string
+	created_at: string
+	created_by: string
+	affiliate: string
+	source_name: string
+}
+
+const {
+	data: affiliateLinks,
+	error,
+	refresh,
+} = await useAsyncData(
+	'affiliateLinks',
+	() => useBaseFetch('affiliate', { method: 'GET', internal: true }) as Promise<AffiliateLink[]>,
+)
+
+const filterQuery = ref('')
+
+const filteredAffiliates = computed(() =>
+	affiliateLinks
+		? affiliateLinks.value?.filter((link: AffiliateLink) =>
+				link.affiliate === auth.user?.id && filterQuery.value.trim()
+					? link.source_name.trim().toLowerCase().includes(filterQuery.value.trim().toLowerCase())
+					: true,
+			)
+		: [],
+)
+
+const affiliateLinkTitle = ref<string>('')
+
+const creatingLink = ref(false)
+
+function createAffiliateLink() {
+	creatingLink.value = true
+
+	useBaseFetch('affiliate', {
+		method: 'PUT',
+		body: {
+			source_name: affiliateLinkTitle.value,
+		},
+		internal: true,
+	}).then(() => {
+		refresh()
+		createModal.value?.hide()
+		creatingLink.value = false
+		affiliateLinkTitle.value = ''
+	})
+}
+
+const revokingTitle = ref<string | null>(null)
+const revokingId = ref<string | null>(null)
+
+function revokeAffiliateLink(affiliate: AffiliateLink) {
+	revokingTitle.value = affiliate.source_name
+	revokingId.value = affiliate.id
+	revokeModal.value?.show()
+}
+
+function confirmRevokeAffiliateLink() {
+	useBaseFetch(`affiliate/${revokingId.value}`, {
+		method: 'DELETE',
+		internal: true,
+	}).then(() => {
+		refresh()
+		revokeModal.value?.hide()
+		revokingTitle.value = null
+		revokingId.value = null
+	})
+}
+
+const messages = defineMessages({
+	createHeader: {
+		id: 'dashboard.affiliate-links.create.header',
+		defaultMessage: 'Creating new affiliate code',
+	},
+	createTitleLabel: {
+		id: 'dashboard.affiliate-links.create.title.label',
+		defaultMessage: 'Title of affiliate link',
+	},
+	createTitleDescription: {
+		id: 'dashboard.affiliate-links.create.title.description',
+		defaultMessage: 'Give your affiliate link a name so you know where people are coming from!',
+	},
+	createTitlePlaceholder: {
+		id: 'dashboard.affiliate-links.create.title.placeholder',
+		defaultMessage: 'e.g. YouTube',
+	},
+	createButton: {
+		id: 'dashboard.affiliate-links.create.button',
+		defaultMessage: 'Create affiliate link',
+	},
+	creatingButton: {
+		id: 'dashboard.affiliate-links.creating.button',
+		defaultMessage: 'Creating affiliate link...',
+	},
+	yourAffiliateLinks: {
+		id: 'dashboard.affiliate-links.header',
+		defaultMessage: 'Your affiliate links',
+	},
+	revokeAffiliateLink: {
+		id: 'dashboard.affiliate-links.revoke',
+		defaultMessage: 'Revoke affiliate link',
+	},
+	searchAffiliateLinks: {
+		id: 'dashboard.affiliate-links.search',
+		defaultMessage: 'Search affiliate links...',
+	},
+	errorTitle: {
+		id: 'dashboard.affiliate-links.error.title',
+		defaultMessage: 'Error loading affiliate links',
+	},
+	revokeConfirmButton: {
+		id: 'dashboard.affiliate-links.revoke-confirm.button',
+		defaultMessage: 'Revoke',
+	},
+	revokeConfirmTitle: {
+		id: 'dashboard.affiliate-links.revoke-confirm.title',
+		defaultMessage: "Are you sure you want to revoke your ''{title}'' affiliate link?",
+	},
+	revokeConfirmBody: {
+		id: 'dashboard.affiliate-links.revoke-confirm.body',
+		defaultMessage:
+			'This will permanently revoke the affiliate code `{id}` and any existing links with this code that have been shared will no longer be valid.',
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 78.5rem;
+}
+</style>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index afa64d1556..9dcad1c489 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -60,7 +60,18 @@
 						<Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
 					</template>
 					<template #title>
-						{{ user.username }}
+						<span class="flex items-center gap-2">
+							{{ user.username }}
+							<TagItem
+								v-if="isAdminViewing && isAffiliate"
+								:style="{
+									'--_color': 'var(--color-brand)',
+									'--_bg-color': 'var(--color-brand-highlight)',
+								}"
+								>
+								<AffiliateIcon /> Affiliate
+							</TagItem>
+						</span>
 					</template>
 					<template #summary>
 						{{
@@ -132,6 +143,13 @@
 										action: () => navigateTo(`/admin/billing/${user.id}`),
 										shown: auth.user && isStaff(auth.user),
 									},
+									{
+										id: 'toggle-affiliate',
+										action: () => toggleAffiliate(user.id),
+										shown: isAdminViewing,
+										remainOnClick: true,
+										color: isAffiliate ? 'red' : 'orange',
+									},
 									{
 										id: 'open-info',
 										action: () => $refs.userDetailsModal.show(),
@@ -139,6 +157,7 @@
 									},
 								]"
 								aria-label="More options"
+								:dropdown-id="`${baseId}-more-options`"
 							>
 								<MoreVerticalIcon aria-hidden="true" />
 								<template #manage-projects>
@@ -165,6 +184,14 @@
 									<InfoIcon aria-hidden="true" />
 									{{ formatMessage(messages.infoButton) }}
 								</template>
+								<template #toggle-affiliate>
+									<AffiliateIcon aria-hidden="true" />
+									{{
+										formatMessage(
+											isAffiliate ? messages.removeAffiliateButton : messages.setAffiliateButton,
+										)
+									}}
+								</template>
 							</OverflowMenu>
 						</ButtonStyled>
 					</template>
@@ -341,6 +368,7 @@
 </template>
 <script setup>
 import {
+	AffiliateIcon,
 	BoxIcon,
 	CalendarIcon,
 	CheckIcon,
@@ -364,8 +392,10 @@ import {
 	ContentPageHeader,
 	NewModal,
 	OverflowMenu,
+	TagItem,
 	useRelativeTime,
 } from '@modrinth/ui'
+import { isAdmin, UserBadge } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import TenMClubBadge from '~/assets/images/badges/10m-club.svg?component'
@@ -398,6 +428,8 @@ const formatCompactNumber = useCompactNumber(true)
 
 const formatRelativeTime = useRelativeTime()
 
+const baseId = useId()
+
 const messages = defineMessages({
 	profileProjectsStats: {
 		id: 'profile.stats.projects',
@@ -472,44 +504,60 @@ const messages = defineMessages({
 		id: 'profile.button.info',
 		defaultMessage: 'View user details',
 	},
+	setAffiliateButton: {
+		id: 'profile.button.set-affiliate',
+		defaultMessage: 'Set as affiliate',
+	},
+	removeAffiliateButton: {
+		id: 'profile.button.remove-affiliate',
+		defaultMessage: 'Remove as affiliate',
+	},
+	affiliateLabel: {
+		id: 'profile.label.affiliate',
+		defaultMessage: 'Affiliate',
+	},
 	userNotFoundError: {
 		id: 'profile.error.not-found',
 		defaultMessage: 'User not found',
 	},
 })
 
-let user, projects, organizations, collections
+let user, projects, organizations, collections, refreshUser
 try {
-	;[{ data: user }, { data: projects }, { data: organizations }, { data: collections }] =
-		await Promise.all([
-			useAsyncData(`user/${route.params.id}`, () => useBaseFetch(`user/${route.params.id}`)),
-			useAsyncData(
-				`user/${route.params.id}/projects`,
-				() => useBaseFetch(`user/${route.params.id}/projects`),
-				{
-					transform: (projects) => {
-						for (const project of projects) {
-							project.categories = project.categories.concat(project.loaders)
-							project.project_type = data.$getProjectTypeForUrl(
-								project.project_type,
-								project.categories,
-								tags.value,
-							)
-						}
-
-						return projects
-					},
+	;[
+		{ data: user, refresh: refreshUser },
+		{ data: projects },
+		{ data: organizations },
+		{ data: collections },
+	] = await Promise.all([
+		useAsyncData(`user/${route.params.id}`, () => useBaseFetch(`user/${route.params.id}`)),
+		useAsyncData(
+			`user/${route.params.id}/projects`,
+			() => useBaseFetch(`user/${route.params.id}/projects`),
+			{
+				transform: (projects) => {
+					for (const project of projects) {
+						project.categories = project.categories.concat(project.loaders)
+						project.project_type = data.$getProjectTypeForUrl(
+							project.project_type,
+							project.categories,
+							tags.value,
+						)
+					}
+
+					return projects
 				},
-			),
-			useAsyncData(`user/${route.params.id}/organizations`, () =>
-				useBaseFetch(`user/${route.params.id}/organizations`, {
-					apiVersion: 3,
-				}),
-			),
-			useAsyncData(`user/${route.params.id}/collections`, () =>
-				useBaseFetch(`user/${route.params.id}/collections`, { apiVersion: 3 }),
-			),
-		])
+			},
+		),
+		useAsyncData(`user/${route.params.id}/organizations`, () =>
+			useBaseFetch(`user/${route.params.id}/organizations`, {
+				apiVersion: 3,
+			}),
+		),
+		useAsyncData(`user/${route.params.id}/collections`, () =>
+			useBaseFetch(`user/${route.params.id}/collections`, { apiVersion: 3 }),
+		),
+	])
 } catch {
 	throw createError({
 		fatal: true,
@@ -633,6 +681,17 @@ async function copyPermalink() {
 	await navigator.clipboard.writeText(`${config.public.siteUrl}/user/${user.value.id}`)
 }
 
+const isAffiliate = computed(() => user.value.badges & UserBadge.AFFILIATE)
+const isAdminViewing = computed(() => isAdmin(auth.value.user))
+
+async function toggleAffiliate(id) {
+	await useBaseFetch(`user/${id}`, {
+		method: 'PATCH',
+		body: { badges: user.value.badges ^ (1 << 7) },
+	})
+	refreshUser()
+}
+
 const navLinks = computed(() => [
 	{
 		label: formatMessage(commonMessages.allProjectType),
diff --git a/packages/assets/external/facebook.svg b/packages/assets/external/facebook.svg
new file mode 100644
index 0000000000..e4eab31e79
--- /dev/null
+++ b/packages/assets/external/facebook.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>
diff --git a/packages/assets/external/instagram.svg b/packages/assets/external/instagram.svg
new file mode 100644
index 0000000000..f8aedef222
--- /dev/null
+++ b/packages/assets/external/instagram.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
diff --git a/packages/assets/external/reels.svg b/packages/assets/external/reels.svg
new file mode 100644
index 0000000000..fedd451fd7
--- /dev/null
+++ b/packages/assets/external/reels.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.14 122.88" fill="currentColor">
+  <path d="M35.14 0H87c9.65 0 18.43 3.96 24.8 10.32 6.38 6.37 10.34 15.16 10.34 24.82v52.61c0 9.64-3.96 18.42-10.32 24.79l-.02.02c-6.38 6.37-15.16 10.32-24.79 10.32H35.14c-9.66 0-18.45-3.96-24.82-10.32l-.24-.27C3.86 105.95 0 97.27 0 87.74v-52.6c0-9.67 3.95-18.45 10.32-24.82S25.47 0 35.14 0zm56.37 31.02.07.11h21.6c-.87-5.68-3.58-10.78-7.48-14.69-4.8-4.8-11.42-7.78-18.7-7.78h-8.87l13.38 22.36zm-9.99.11L68.07 8.66h-29.5l13.61 22.47h29.34zm-39.41 0L28.95 9.39a26.446 26.446 0 0 0-12.51 7.05c-3.9 3.9-6.6 9.01-7.48 14.69h33.15zm71.37 8.66H8.66v47.96c0 7.17 2.89 13.7 7.56 18.48l.22.21c4.8 4.8 11.43 7.79 18.7 7.79H87c7.28 0 13.9-2.98 18.69-7.77l.02-.02c4.79-4.79 7.77-11.41 7.77-18.69V39.79zM50.95 54.95 77.78 72.4c.43.28.82.64 1.13 1.08a3.9 3.9 0 0 1-1 5.42L51.19 94.67c-.67.55-1.53.88-2.48.88a3.91 3.91 0 0 1-3.91-3.91V58.15h.02a3.902 3.902 0 0 1 6.13-3.2z"/>
+</svg>
diff --git a/packages/assets/external/snapchat.svg b/packages/assets/external/snapchat.svg
new file mode 100644
index 0000000000..8bdf9f0d81
--- /dev/null
+++ b/packages/assets/external/snapchat.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Snapchat</title><path d="M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z"/></svg>
diff --git a/packages/assets/external/threads.svg b/packages/assets/external/threads.svg
new file mode 100644
index 0000000000..bd216a4fc1
--- /dev/null
+++ b/packages/assets/external/threads.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Threads</title><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg>
diff --git a/packages/assets/external/tiktok.svg b/packages/assets/external/tiktok.svg
new file mode 100644
index 0000000000..f72cac1b92
--- /dev/null
+++ b/packages/assets/external/tiktok.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>TikTok</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
diff --git a/packages/assets/external/twitch.svg b/packages/assets/external/twitch.svg
new file mode 100644
index 0000000000..fc495a9194
--- /dev/null
+++ b/packages/assets/external/twitch.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Twitch</title><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
diff --git a/packages/assets/external/youtubegaming.svg b/packages/assets/external/youtubegaming.svg
new file mode 100644
index 0000000000..6404379d51
--- /dev/null
+++ b/packages/assets/external/youtubegaming.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>YouTube Gaming</title><path d="M24 13.2v-6l-6-3.6-6 3.6-6-3.6-6 3.6v6l12 7.2zM8.4 10.8H6v2.4H4.8v-2.4H2.4V9.6h2.4V7.2H6v2.4h2.4zm7.2 2.4a1.2 1.2 0 01-1.2-1.2c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2 0 .66-.54 1.2-1.2 1.2zm3.6-2.4A1.2 1.2 0 0118 9.6c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2 0 .66-.54 1.2-1.2 1.2Z"/></svg>
diff --git a/packages/assets/external/youtubeshorts.svg b/packages/assets/external/youtubeshorts.svg
new file mode 100644
index 0000000000..4ba1f14899
--- /dev/null
+++ b/packages/assets/external/youtubeshorts.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>YouTube Shorts</title><path d="m18.931 9.99-1.441-.601 1.717-.913a4.48 4.48 0 0 0 1.874-6.078 4.506 4.506 0 0 0-6.09-1.874L4.792 5.929a4.504 4.504 0 0 0-2.402 4.193 4.521 4.521 0 0 0 2.666 3.904c.036.012 1.442.6 1.442.6l-1.706.901a4.51 4.51 0 0 0-2.369 3.967A4.528 4.528 0 0 0 6.93 24c.725 0 1.437-.174 2.08-.508l10.21-5.406a4.494 4.494 0 0 0 2.39-4.192 4.525 4.525 0 0 0-2.678-3.904ZM9.597 15.19V8.824l6.007 3.184z"/></svg>
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 4d3d03e5eb..cdb3b3ed28 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -22,29 +22,38 @@ import _SleepingRinthbot from './branding/rinthbot/sleeping.webp'
 import _SobbingRinthbot from './branding/rinthbot/sobbing.webp'
 import _ThinkingRinthbot from './branding/rinthbot/thinking.webp'
 import _WavingRinthbot from './branding/rinthbot/waving.webp'
+// External Icons
 import _AppleIcon from './external/apple.svg?component'
 import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
 import _CurseForgeIcon from './external/curseforge.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
+import _FacebookIcon from './external/facebook.svg?component'
 import _GithubIcon from './external/github.svg?component'
+import _InstagramIcon from './external/instagram.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
 import _MastodonIcon from './external/mastodon.svg?component'
 import _OpenCollectiveIcon from './external/opencollective.svg?component'
 import _PatreonIcon from './external/patreon.svg?component'
 import _PayPalIcon from './external/paypal.svg?component'
 import _RedditIcon from './external/reddit.svg?component'
-// External Icons
+import _ReelsIcon from './external/reels.svg?component'
+import _SnapchatIcon from './external/snapchat.svg?component'
 import _SSODiscordIcon from './external/sso/discord.svg?component'
 import _SSOGitHubIcon from './external/sso/github.svg?component'
 import _SSOGitLabIcon from './external/sso/gitlab.svg?component'
 import _SSOGoogleIcon from './external/sso/google.svg?component'
 import _SSOMicrosoftIcon from './external/sso/microsoft.svg?component'
 import _SSOSteamIcon from './external/sso/steam.svg?component'
+import _ThreadsIcon from './external/threads.svg?component'
+import _TikTokIcon from './external/tiktok.svg?component'
 import _TumblrIcon from './external/tumblr.svg?component'
+import _TwitchIcon from './external/twitch.svg?component'
 import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
+import _YouTubeGaming from './external/youtubegaming.svg?component'
+import _YouTubeShortsIcon from './external/youtubeshorts.svg?component'
 
 export const ModrinthIcon = _ModrinthIcon
 export const FourOhFourNotFound = _FourOhFourNotFound
@@ -71,6 +80,13 @@ export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
 export const GithubIcon = _GithubIcon
 export const CurseForgeIcon = _CurseForgeIcon
 export const DiscordIcon = _DiscordIcon
+export const FacebookIcon = _FacebookIcon
+export const InstagramIcon = _InstagramIcon
+export const SnapchatIcon = _SnapchatIcon
+export const ReelsIcon = _ReelsIcon
+export const TikTokIcon = _TikTokIcon
+export const TwitchIcon = _TwitchIcon
+export const ThreadsIcon = _ThreadsIcon
 export const KoFiIcon = _KoFiIcon
 export const MastodonIcon = _MastodonIcon
 export const OpenCollectiveIcon = _OpenCollectiveIcon
@@ -81,6 +97,8 @@ export const TumblrIcon = _TumblrIcon
 export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
+export const YouTubeGaming = _YouTubeGaming
+export const YouTubeShortsIcon = _YouTubeShortsIcon
 
 // Skin Models
 export * from './generated-icons'
diff --git a/packages/ui/src/components/base/AutoBrandIcon.vue b/packages/ui/src/components/base/AutoBrandIcon.vue
new file mode 100644
index 0000000000..b81f5839bc
--- /dev/null
+++ b/packages/ui/src/components/base/AutoBrandIcon.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import {
+	AppleIcon,
+	BlueskyIcon,
+	BuyMeACoffeeIcon,
+	CurseForgeIcon,
+	DiscordIcon,
+	FacebookIcon,
+	GithubIcon,
+	InstagramIcon,
+	KoFiIcon,
+	MastodonIcon,
+ModrinthIcon,	OpenCollectiveIcon,
+	PatreonIcon,
+	PayPalIcon,
+	RedditIcon,
+	ReelsIcon,
+	SnapchatIcon,
+	ThreadsIcon,
+	TikTokIcon,
+	TumblrIcon,
+	TwitchIcon,
+	TwitterIcon,
+	WindowsIcon,
+	YouTubeGaming,
+	YouTubeIcon,
+	YouTubeShortsIcon} from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	keyword: string
+}>()
+
+const services = [
+	{
+		icon: AppleIcon,
+		keywords: ["apple"]
+	},
+	{
+		icon: BlueskyIcon,
+		keywords: ["bluesky", "bsky", "blue sky"]
+	},
+	{
+		icon: BuyMeACoffeeIcon,
+		keywords: ["buymeacoffee", "bmac", "buy me a coffee"]
+	},
+	{
+		icon: DiscordIcon,
+		keywords: ["discord"]
+	},
+	{
+		icon: FacebookIcon,
+		keywords: ["facebook", "fb", "face book"]
+	},
+	{
+		icon: GithubIcon,
+		keywords: ["github", "gh", "git hub"]
+	},
+	{
+		icon: ThreadsIcon,
+		keywords: ["threads"]
+	},
+	{
+		icon: InstagramIcon,
+		keywords: ["instagram", "ig", "insta"]
+	},
+	{
+		icon: KoFiIcon,
+		keywords: ["ko-fi", "kofi", "ko fi"]
+	},
+	{
+		icon: MastodonIcon,
+		keywords: ["mastodon"]
+	},
+	{
+		icon: OpenCollectiveIcon,
+		keywords: ["opencollective", "open collective"]
+	},
+	{
+		icon: PatreonIcon,
+		keywords: ["patreon"]
+	},
+	{
+		icon: PayPalIcon,
+		keywords: ["paypal", "pay pal"]
+	},
+	{
+		icon: RedditIcon,
+		keywords: ["reddit"]
+	},
+	{
+		icon: ReelsIcon,
+		keywords: ["reels", "instagram reels", "facebook reels"]
+	},
+	{
+		icon: SnapchatIcon,
+		keywords: ["snapchat"]
+	},
+	{
+		icon: TikTokIcon,
+		keywords: ["tiktok", "tik", "tok"]
+	},
+	{
+		icon: TumblrIcon,
+		keywords: ["tumblr"]
+	},
+	{
+		icon: TwitchIcon,
+		keywords: ["twitch", "twitch.tv"]
+	},
+	{
+		icon: WindowsIcon,
+		keywords: ["windows", "microsoft"]
+	},
+	{
+		icon: YouTubeIcon,
+		keywords: ["youtube", "yt"]
+	},
+	{
+		icon: YouTubeShortsIcon,
+		keywords: ["shorts", "youtube shorts"]
+	},
+	{
+		icon: YouTubeGaming,
+		keywords: ["youtube gaming"]
+	},
+	{
+		icon: CurseForgeIcon,
+		keywords: ["curseforge", "cf", "curse", "curse forge"]
+	},
+	{
+		icon: ModrinthIcon,
+		keywords: ["modrinth", "mod rinth", "modrith", "mr"]
+	},
+	{
+		icon: TwitterIcon,
+		keywords: ["twitter", "x.com", "x"]
+	},
+]
+
+const selectedService = computed(() => services.find(service => service.keywords.some(keyword => props.keyword.toLowerCase().includes(keyword))))
+</script>
+
+<template>
+	<component :is="selectedService?.icon" v-if="selectedService" />
+	<slot v-else />
+</template>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 9f82bc74ce..e66d87e4ad 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -2,6 +2,7 @@
 export { default as Accordion } from './base/Accordion.vue'
 export { default as Admonition } from './base/Admonition.vue'
 export { default as AppearingProgressBar } from './base/AppearingProgressBar.vue'
+export { default as AutoBrandIcon } from './base/AutoBrandIcon.vue'
 export { default as AutoLink } from './base/AutoLink.vue'
 export { default as Avatar } from './base/Avatar.vue'
 export { default as Badge } from './base/Badge.vue'
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 4cd41373c4..644db910a1 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -1,6 +1,10 @@
 import { defineMessages } from '@vintl/vintl'
 
 export const commonMessages = defineMessages({
+	affiliateLinksButton: {
+		id: 'button.affiliate-links',
+		defaultMessage: 'Affiliate links',
+	},
 	analyticsButton: {
 		id: 'button.analytics',
 		defaultMessage: 'Analytics',
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index d57ba3dd56..29c184c72d 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -334,6 +334,7 @@ export enum UserBadge {
 	ALPHA_TESTER = 1 << 4,
 	CONTRIBUTOR = 1 << 5,
 	TRANSLATOR = 1 << 6,
+	AFFILIATE = 1 << 7,
 }
 
 export type UserBadges = number