diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index 87434d1b98..ad5da17d1e 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -93,7 +93,7 @@
 		}
 	}
 
-	:where(button:not([data-button]), .button, .iconified-button) {
+	:where(button:not([data-button])) {
 		width: fit-content;
 	}
 
@@ -118,7 +118,6 @@
 		gap: var(--spacing-card-sm);
 		margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md));
 
-		.iconified-button,
 		.input-group {
 			flex-shrink: 0;
 		}
@@ -250,185 +249,6 @@
 	}
 }
 
-.button-base {
-	@extend .button-animation;
-	font-weight: 500;
-	outline: 2px solid transparent;
-
-	&:focus-visible:not(&:disabled),
-	&:hover:not(&:disabled) {
-		cursor: pointer;
-		filter: brightness(0.85);
-	}
-
-	&:active:not(&:disabled) {
-		filter: brightness(0.8);
-	}
-
-	&:disabled,
-	&[disabled='true'] {
-		cursor: not-allowed;
-		filter: grayscale(50%);
-		opacity: 0.5;
-		box-shadow: none;
-	}
-}
-
-:not(tr).button-transparent {
-	@extend .button-base;
-	background-color: transparent;
-	border-radius: var(--size-rounded-sm);
-
-	&:focus-visible:not(&:disabled),
-	&:hover:not(&:disabled),
-	&:active:not(&:disabled) {
-		background-color: var(--color-raised-bg);
-	}
-
-	&.brand-button {
-		color: var(--color-brand);
-	}
-
-	&.danger-button {
-		color: var(--color-red);
-	}
-}
-
-tr.button-transparent {
-	@extend .button-animation;
-	background-color: transparent;
-	border-radius: var(--size-rounded-sm);
-
-	&:focus-visible:not(&:disabled) > *,
-	&:hover:not(&:disabled) > * {
-		cursor: pointer;
-		filter: brightness(0.85);
-		background-color: var(--color-raised-bg);
-	}
-
-	&:active:not(&:disabled) > * {
-		filter: brightness(0.8);
-		background-color: var(--color-raised-bg);
-	}
-
-	&:disabled > *,
-	&[disabled='true'] > * {
-		cursor: not-allowed;
-		filter: grayscale(50%);
-		opacity: 0.5;
-		box-shadow: none;
-	}
-}
-
-.button-color-base {
-	box-sizing: border-box;
-	--text-color: var(--color-button-text);
-	--background-color: var(--color-button-bg);
-
-	color: var(--text-color);
-	background-color: var(--background-color);
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-	border-radius: var(--size-rounded-sm);
-}
-
-.iconified-button {
-	@extend .button-base;
-	@extend .button-color-base;
-
-	display: flex;
-	padding: var(--spacing-card-sm) var(--spacing-card-bg);
-	margin: 0;
-	font-size: var(--font-size-nm);
-	align-items: center;
-	cursor: pointer;
-	width: fit-content;
-	height: fit-content;
-	transition:
-		opacity 0.5s ease-in-out,
-		filter 0.2s ease-in-out,
-		scale 0.05s ease-in-out,
-		outline 0.2s ease-in-out;
-
-	text-decoration: none;
-
-	svg {
-		width: 1.1rem;
-		height: 1.1rem;
-		margin-right: 0.5rem;
-	}
-
-	&.icon-only {
-		padding: 0 0.5rem;
-
-		svg {
-			margin-right: 0;
-		}
-	}
-
-	&.transparent {
-		background: none;
-		box-shadow: none;
-	}
-}
-
-.square-button {
-	@extend .button-base;
-
-	--text-color: var(--color-button-text);
-	--background-color: var(--color-button-bg);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 2.25rem;
-	width: 2.25rem;
-	border-radius: var(--size-rounded-sm);
-	color: var(--text-color);
-	background-color: var(--background-color);
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-
-	svg {
-		min-width: 1.25rem;
-		max-width: 1.25rem;
-		min-height: 1.25rem;
-		max-height: 1.25rem;
-	}
-
-	flex-shrink: 0;
-}
-
-.raised-button {
-	--background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
-}
-
-.danger-button {
-	--background-color: var(--color-red);
-	--text-color: var(--color-brand-inverted);
-}
-
-.moderation-button {
-	--background-color: var(--color-orange);
-	--text-color: var(--color-brand-inverted);
-}
-
-.brand-button {
-	--background-color: var(--color-brand);
-	--text-color: var(--color-brand-inverted);
-}
-
-.button-group {
-	display: flex;
-	grid-gap: var(--spacing-card-sm);
-	flex-wrap: wrap;
-	margin-top: var(--spacing-card-md);
-	justify-content: right;
-}
-
 .error {
 	display: flex;
 	flex-direction: column;
@@ -501,7 +321,6 @@ textarea.known-error {
 }
 
 @media (prefers-reduced-motion) {
-	.button-animation,
 	button {
 		transform: none !important;
 	}
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index 8ad63c2da1..edc80e96d8 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -475,18 +475,6 @@ input {
 	outline: 2px solid transparent !important;
 }
 
-.button-animation {
-	transition:
-		opacity 0.5s ease-in-out,
-		filter 0.2s ease-in-out,
-		transform 0.05s ease-in-out,
-		outline-width 0.2s ease-in-out;
-}
-
-.button-transparent {
-	box-shadow: none;
-}
-
 .qc-cmp2-close-tooltip {
 	background-color: transparent;
 	color: hsl(145, 78%, 28%);
diff --git a/apps/frontend/src/components/ui/Chips.vue b/apps/frontend/src/components/ui/Chips.vue
deleted file mode 100644
index 17905aa13c..0000000000
--- a/apps/frontend/src/components/ui/Chips.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-	<div class="chips">
-		<button
-			v-for="item in items"
-			:key="item"
-			class="iconified-button"
-			:class="{ selected: selected === item, capitalize: capitalize }"
-			@click="toggleItem(item)"
-		>
-			<CheckIcon v-if="selected === item" />
-			<span>{{ formatLabel(item) }}</span>
-		</button>
-	</div>
-</template>
-
-<script>
-import { CheckIcon } from '@modrinth/assets'
-
-export default {
-	components: {
-		CheckIcon,
-	},
-	props: {
-		modelValue: {
-			required: true,
-			type: String,
-		},
-		items: {
-			required: true,
-			type: Array,
-		},
-		neverEmpty: {
-			default: true,
-			type: Boolean,
-		},
-		formatLabel: {
-			default: (x) => x,
-			type: Function,
-		},
-		capitalize: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		selected: {
-			get() {
-				return this.modelValue
-			},
-			set(value) {
-				this.$emit('update:modelValue', value)
-			},
-		},
-	},
-	created() {
-		if (this.items.length > 0 && this.neverEmpty) {
-			this.selected = this.items[0]
-		}
-	},
-	methods: {
-		toggleItem(item) {
-			if (this.selected === item && !this.neverEmpty) {
-				this.selected = null
-			} else {
-				this.selected = item
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.chips {
-	display: flex;
-	grid-gap: 0.5rem;
-	flex-wrap: wrap;
-
-	.iconified-button {
-		&.capitalize {
-			text-transform: capitalize;
-		}
-
-		svg {
-			width: 1em;
-			height: 1em;
-		}
-
-		&:focus-visible {
-			outline: 0.25rem solid var(--color-focus-ring);
-			border-radius: 0.25rem;
-		}
-	}
-
-	.selected {
-		color: var(--color-button-text-active);
-		background-color: var(--color-brand-highlight);
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 2px var(--color-brand);
-	}
-}
-</style>
diff --git a/apps/frontend/src/components/ui/ModrinthFooter.vue b/apps/frontend/src/components/ui/ModrinthFooter.vue
index 4c47ca7742..84da60b415 100644
--- a/apps/frontend/src/components/ui/ModrinthFooter.vue
+++ b/apps/frontend/src/components/ui/ModrinthFooter.vue
@@ -7,7 +7,7 @@ import {
 	ToggleRightIcon,
 	TwitterIcon,
 } from '@modrinth/assets'
-import { ButtonLink } from '@modrinth/ui'
+import { Button, ButtonLink } from '@modrinth/ui'
 import {
 	AutoLink,
 	defineMessage,
@@ -266,11 +266,17 @@ function developerModeIncrement() {
 					:aria-label="formatMessage(messages.modrinthInformation)"
 				>
 					<div class="flex items-center gap-2">
-						<TextLogo
-							aria-hidden="true"
-							class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
+						<Button
+							type="quiet"
+							interaction="none"
+							aria-label="Modrinth"
+							class="!h-auto !p-0"
 							@click="developerModeIncrement()"
-						/>
+						>
+							<span class="inline-flex">
+								<TextLogo aria-hidden="true" class="text-logo h-6 w-auto text-contrast lg:h-8" />
+							</span>
+						</Button>
 						<ButtonLink
 							v-if="flags.developerMode"
 							v-tooltip="formatMessage(commonSettingsMessages.featureFlags)"
diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index 23d0acbb76..e71314a55a 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -17,10 +17,12 @@
 						{{ item.label }}
 					</div>
 
-					<NuxtLink
+					<ButtonLink
 						v-else-if="item.link ?? item.to"
+						type="quiet"
+						interaction="surface"
 						:to="(item.link ?? item.to) as string"
-						class="nav-item inline-flex w-full cursor-pointer items-center gap-2 rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
+						class="nav-item !h-auto !w-full !justify-start !rounded-xl !px-4 !py-2.5 text-left leading-tight"
 						:class="{ 'is-active': isActive(item as NavStackLinkItem) }"
 					>
 						<component
@@ -37,12 +39,14 @@
 							{{ String(item.badge) }}
 						</span>
 						<span v-if="item.chevron" class="ml-auto"><ChevronRightIcon /></span>
-					</NuxtLink>
+					</ButtonLink>
 
-					<button
+					<Button
 						v-else-if="item.action"
-						class="nav-item inline-flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
-						:class="{ 'danger-button': item.danger }"
+						type="quiet"
+						interaction="surface"
+						:color="item.danger ? 'red' : undefined"
+						class="nav-item !h-auto !w-full !justify-start !rounded-xl !px-4 !py-2.5 text-left leading-tight"
 						@click="item.action"
 					>
 						<component
@@ -58,7 +62,7 @@
 						>
 							{{ String(item.badge) }}
 						</span>
-					</button>
+					</Button>
 
 					<span v-else>You frog. 🐸</span>
 				</li>
@@ -69,6 +73,7 @@
 
 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
+import { Button, ButtonLink } from '@modrinth/ui'
 import { type Component, computed, useSlots } from 'vue'
 
 type NavStackBaseItem = {
diff --git a/apps/frontend/src/components/ui/OptionGroup.vue b/apps/frontend/src/components/ui/OptionGroup.vue
deleted file mode 100644
index 36313921ef..0000000000
--- a/apps/frontend/src/components/ui/OptionGroup.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-	<nav
-		ref="scrollContainer"
-		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
-	>
-		<button
-			v-for="(option, index) in options"
-			:key="`option-group-${index}`"
-			ref="optionButtons"
-			class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
-			:class="{
-				'text-button-textSelected': modelValue === option,
-				'text-primary': modelValue !== option,
-			}"
-			@click="setOption(option)"
-		>
-			<slot :option="option" :selected="modelValue === option" />
-		</button>
-		<div
-			class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
-			:style="{
-				left: sliderLeftPx,
-				top: sliderTopPx,
-				right: sliderRightPx,
-				bottom: sliderBottomPx,
-				opacity: initialized ? 1 : 0,
-			}"
-			aria-hidden="true"
-		></div>
-	</nav>
-</template>
-
-<script setup lang="ts" generic="T">
-import { computed, onMounted, ref } from 'vue'
-
-const modelValue = defineModel<T>({ required: true })
-
-const props = defineProps<{
-	options: T[]
-}>()
-
-const scrollContainer = ref<HTMLElement | null>(null)
-
-const sliderLeft = ref(4)
-const sliderTop = ref(4)
-const sliderRight = ref(4)
-const sliderBottom = ref(4)
-
-const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
-const sliderTopPx = computed(() => `${sliderTop.value}px`)
-const sliderRightPx = computed(() => `${sliderRight.value}px`)
-const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
-
-const optionButtons = ref()
-
-const initialized = ref(false)
-
-function setOption(option: T) {
-	modelValue.value = option
-}
-
-watch(modelValue, () => {
-	startAnimation(props.options.indexOf(modelValue.value))
-})
-
-function startAnimation(index: number) {
-	const el = optionButtons.value[index]
-
-	if (!el || !el.offsetParent) return
-
-	const newValues = {
-		left: el.offsetLeft,
-		top: el.offsetTop,
-		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
-	}
-
-	if (sliderLeft.value === 4 && sliderRight.value === 4) {
-		sliderLeft.value = newValues.left
-		sliderRight.value = newValues.right
-		sliderTop.value = newValues.top
-		sliderBottom.value = newValues.bottom
-	} else {
-		const delay = 200
-
-		if (newValues.left < sliderLeft.value) {
-			sliderLeft.value = newValues.left
-			setTimeout(() => {
-				sliderRight.value = newValues.right
-			}, delay)
-		} else {
-			sliderRight.value = newValues.right
-			setTimeout(() => {
-				sliderLeft.value = newValues.left
-			}, delay)
-		}
-
-		if (newValues.top < sliderTop.value) {
-			sliderTop.value = newValues.top
-			setTimeout(() => {
-				sliderBottom.value = newValues.bottom
-			}, delay)
-		} else {
-			sliderBottom.value = newValues.bottom
-			setTimeout(() => {
-				sliderTop.value = newValues.top
-			}, delay)
-		}
-	}
-	initialized.value = true
-}
-
-onMounted(() => {
-	startAnimation(props.options.indexOf(modelValue.value))
-})
-</script>
-
-<style scoped>
-.navtabs-transition {
-	transition:
-		all 150ms cubic-bezier(0.4, 0, 0.2, 1),
-		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
-}
-
-.card-shadow {
-	box-shadow: var(--shadow-card);
-}
-</style>
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index 9a4c0b2ee5..76c0a87056 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -6,7 +6,7 @@
 		</p>
 		<p v-else>{{ getFormattedMessage(messages.invitationNoRole) }}</p>
 		<div class="input-group">
-			<Button type="colored" color="brand" class="brand-button" @click="acceptInvite()">
+			<Button type="colored" color="brand" @click="acceptInvite()">
 				<CheckIcon />
 				{{ getFormattedMessage(commonMessages.acceptButton) }}
 			</Button>
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 9de637941d..d3e4df0c2f 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -275,7 +275,6 @@
 									{{ formatMessage(messages.actionApprove) }}
 								</Button>
 								<SplitButton
-									class="!m-0 !inline-flex !flex-nowrap !justify-start !gap-0"
 									type="colored"
 									color="red"
 									:menu-label="formatMessage(commonMessages.moreOptionsButton)"
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 6085cc5cfa..13a58bf002 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -629,14 +629,14 @@
 				@focusout="isBrowseMenuOpen = false"
 			>
 				<div class="links cascade-links">
-					<NuxtLink
+					<ButtonLink
 						v-for="navRoute in navRoutes"
 						:key="navRoute.href"
 						:to="navRoute.href"
-						class="iconified-button"
+						class="!h-auto !whitespace-normal"
 					>
 						{{ navRoute.label }}
-					</NuxtLink>
+					</ButtonLink>
 				</div>
 			</div>
 			<div
@@ -646,10 +646,10 @@
 				@focusout="isMobileMenuOpen = false"
 			>
 				<div class="account-container">
-					<NuxtLink
+					<ButtonLink
 						v-if="auth.user"
 						:to="`/user/${auth.user.username}`"
-						class="iconified-button account-button"
+						class="account-button !h-auto !whitespace-normal"
 					>
 						<Avatar
 							:src="auth.user.avatar_url"
@@ -662,66 +662,85 @@
 							<div>@{{ auth.user.username }}</div>
 							<div>{{ formatMessage(commonMessages.visitYourProfile) }}</div>
 						</div>
-					</NuxtLink>
-					<nuxt-link v-else class="iconified-button brand-button" :to="signInRouteObj">
+					</ButtonLink>
+					<ButtonLink
+						v-else
+						type="colored"
+						color="brand"
+						:to="signInRouteObj"
+						class="!h-auto !whitespace-normal"
+					>
 						<LogInIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signInButton) }}
-					</nuxt-link>
+					</ButtonLink>
 				</div>
 				<div class="links">
 					<template v-if="auth.user">
-						<button class="iconified-button danger-button" @click="logoutUser()">
+						<Button
+							type="colored"
+							color="red"
+							class="!h-auto !whitespace-normal"
+							@click="logoutUser()"
+						>
 							<LogOutIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.signOutButton) }}
-						</button>
-						<button class="iconified-button" @click="$refs.modal_creation.show()">
+						</Button>
+						<Button class="!h-auto !whitespace-normal" @click="$refs.modal_creation.show()">
 							<PlusIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.createAProjectButton) }}
-						</button>
-						<NuxtLink class="iconified-button" to="/dashboard/collections">
+						</Button>
+						<ButtonLink class="!h-auto !whitespace-normal" to="/dashboard/collections">
 							<LibraryIcon class="icon" />
 							{{ formatMessage(commonMessages.collectionsLabel) }}
-						</NuxtLink>
-						<NuxtLink class="iconified-button" to="/hosting/manage">
+						</ButtonLink>
+						<ButtonLink class="!h-auto !whitespace-normal" to="/hosting/manage">
 							<ServerIcon class="icon" />
 							{{ formatMessage(commonMessages.serversLabel) }}
-						</NuxtLink>
-						<NuxtLink
+						</ButtonLink>
+						<ButtonLink
 							v-if="auth.user.role === 'moderator' || auth.user.role === 'admin'"
-							class="iconified-button"
+							class="!h-auto !whitespace-normal"
 							to="/moderation"
 						>
 							<ScaleIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.moderationLabel) }}
-						</NuxtLink>
-						<NuxtLink v-if="flags.developerMode" class="iconified-button" to="/settings/flags">
+						</ButtonLink>
+						<ButtonLink
+							v-if="flags.developerMode"
+							class="!h-auto !whitespace-normal"
+							to="/settings/flags"
+						>
 							<ToggleRightIcon aria-hidden="true" />
 							{{ formatMessage(commonSettingsMessages.featureFlags) }}
-						</NuxtLink>
+						</ButtonLink>
 					</template>
-					<NuxtLink class="iconified-button" to="/settings">
+					<ButtonLink class="!h-auto !whitespace-normal" to="/settings">
 						<SettingsIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.settingsLabel) }}
-					</NuxtLink>
-					<button class="iconified-button" @click="changeTheme">
+					</ButtonLink>
+					<Button class="!h-auto !whitespace-normal" @click="changeTheme">
 						<MoonIcon v-if="$theme.active === 'light'" class="icon" />
 						<SunIcon v-else class="icon" />
 						<span class="dropdown-item__text">
 							{{ formatMessage(messages.changeTheme) }}
 						</span>
-					</button>
+					</Button>
 				</div>
 			</div>
 			<div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
-				<NuxtLink
+				<ButtonLink
 					to="/"
-					class="tab button-animation"
+					type="quiet"
+					interaction="none"
+					class="tab !h-auto !rounded-none !px-0"
 					:title="formatMessage(navMenuMessages.home)"
 					:aria-label="formatMessage(navMenuMessages.home)"
 				>
 					<HomeIcon aria-hidden="true" />
-				</NuxtLink>
-				<button
-					class="tab button-animation"
+				</ButtonLink>
+				<Button
+					type="quiet"
+					interaction="none"
+					class="tab !h-auto !rounded-none !px-0"
 					:class="{ 'router-link-exact-active': isBrowseMenuOpen }"
 					:title="formatMessage(navMenuMessages.search)"
 					:aria-label="formatMessage(navMenuMessages.search)"
@@ -734,11 +753,13 @@
 						<SearchIcon aria-hidden="true" class="smaller" />
 						{{ formatMessage(navMenuMessages.search) }}
 					</template>
-				</button>
+				</Button>
 				<template v-if="auth.user">
-					<NuxtLink
+					<ButtonLink
 						to="/dashboard/notifications"
-						class="tab button-animation"
+						type="quiet"
+						interaction="none"
+						class="tab !h-auto !rounded-none !px-0"
 						:aria-label="formatMessage(commonMessages.notificationsLabel)"
 						:class="{
 							'no-active': isMobileMenuOpen || isBrowseMenuOpen,
@@ -752,18 +773,22 @@
 						"
 					>
 						<BellIcon aria-hidden="true" />
-					</NuxtLink>
-					<NuxtLink
+					</ButtonLink>
+					<ButtonLink
 						to="/dashboard"
-						class="tab button-animation"
+						type="quiet"
+						interaction="none"
+						class="tab !h-auto !rounded-none !px-0"
 						:aria-label="formatMessage(commonMessages.dashboardLabel)"
 						:title="formatMessage(commonMessages.dashboardLabel)"
 					>
 						<ChartIcon aria-hidden="true" />
-					</NuxtLink>
+					</ButtonLink>
 				</template>
-				<button
-					class="tab button-animation"
+				<Button
+					type="quiet"
+					interaction="none"
+					class="tab !h-auto !rounded-none !px-0"
 					:title="formatMessage(messages.toggleMenu)"
 					:aria-label="
 						isMobileMenuOpen ? formatMessage(messages.closeMenu) : formatMessage(messages.openMenu)
@@ -784,7 +809,7 @@
 							circle
 						/>
 					</template>
-				</button>
+				</Button>
 			</div>
 		</header>
 		<main class="min-h-[calc(100vh-4.5rem-310.59px)]">
@@ -842,6 +867,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
+	Button,
 	ButtonLink,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
diff --git a/apps/frontend/src/pages/[type]/[project]/changelog.vue b/apps/frontend/src/pages/[type]/[project]/changelog.vue
index cd220347b2..376964b839 100644
--- a/apps/frontend/src/pages/[type]/[project]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[project]/changelog.vue
@@ -368,8 +368,4 @@ function getVersionLoaders(version) {
 		}
 	}
 }
-
-.brand-button {
-	color: var(--color-accent-contrast);
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index edce759740..d6b539e2da 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -86,7 +86,7 @@
 					<StarIcon fill="currentColor" aria-hidden="true" />
 					Unset as banner
 				</Button>
-				<div class="button-group">
+				<div class="mt-3 flex flex-wrap justify-end gap-2">
 					<Button type="outlined" @click="modalEditItem?.hide()">
 						<XIcon aria-hidden="true" />
 						Cancel
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
index 765b6a65ef..452e7d0b73 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
@@ -86,7 +86,7 @@
 					<StarIcon fill="currentColor" aria-hidden="true" />
 					Unset as banner
 				</Button>
-				<div class="button-group">
+				<div class="mt-3 flex flex-wrap justify-end gap-2">
 					<Button type="outlined" @click="modal_edit_item.hide()">
 						<XIcon aria-hidden="true" />
 						Cancel
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/index.vue b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
index 61918918f6..b1caf99c3f 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
@@ -740,8 +740,4 @@ svg {
 		color: var(--color-orange);
 	}
 }
-
-.button-group {
-	justify-content: flex-start;
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/links.vue b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
index 46256f3fe3..854e9a0f72 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
@@ -104,7 +104,7 @@
 					:disabled="!hasPermission"
 				/>
 			</div>
-			<div class="button-group">
+			<div class="mt-3 flex flex-wrap justify-start gap-2">
 				<Button
 					type="colored"
 					color="brand"
@@ -272,7 +272,7 @@
 					@update:model-value="updateDonationLinks"
 				/>
 			</div>
-			<div class="button-group">
+			<div class="mt-3 flex flex-wrap justify-start gap-2">
 				<Button type="colored" color="brand" :disabled="!hasChanges" @click="saveChanges()">
 					<SaveIcon />
 					Save changes
@@ -560,8 +560,4 @@ function checkDifference(newLink, existingLink) {
 		max-width: 26rem;
 	}
 }
-
-.button-group {
-	justify-content: flex-start;
-}
 </style>
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/members.vue b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
index 1ba42b6c1a..e028930579 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
@@ -270,9 +270,11 @@
 					</nuxt-link>
 					. You may override them below.
 				</p>
-				<nuxt-link
+				<ButtonLink
+					type="quiet"
+					interaction="none"
 					:to="`/organization/${organization.slug}`"
-					class="universal-card button-base recessed org"
+					class="universal-card recessed org !h-auto !w-full !shrink !items-stretch !justify-start !whitespace-normal !p-[var(--spacing-card-bg)]"
 				>
 					<Avatar :src="organization.icon_url" :alt="organization.name" size="md" />
 					<div class="details">
@@ -294,7 +296,7 @@
 							</div>
 						</span>
 					</div>
-				</nuxt-link>
+				</ButtonLink>
 			</div>
 			<p v-else>
 				This project is not managed by an organization. If you are the member of any organizations,
@@ -562,6 +564,7 @@ import {
 	Avatar,
 	Badge,
 	Button,
+	ButtonLink,
 	Card,
 	Checkbox,
 	Combobox,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/tags.vue b/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
index 77acc7d932..cbfc414335 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
@@ -434,11 +434,6 @@ const toggleFeaturedCategory = (category: Category) => {
 		vertical-align: top;
 	}
 }
-
-.button-group {
-	justify-content: flex-start;
-}
-
 .category-list {
 	column-count: 4;
 	column-gap: var(--spacing-card-lg);
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index 72ad4e591b..e8e9d75300 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -166,7 +166,7 @@
 							v-if="
 								subscription.metadata?.type === 'pyro' || subscription.metadata?.type === 'medal'
 							"
-							:to="`/hosting/manage/${subscription.metadata.id}`"
+							:href="`/hosting/manage/${subscription.metadata.id}`"
 							target="_blank"
 							class="w-fit"
 						>
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 284e9bd844..4f94a7ac1a 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -18,6 +18,7 @@ import {
 	Avatar,
 	Badge,
 	Button,
+	ButtonLink,
 	Checkbox,
 	commonMessages,
 	defineMessages,
@@ -546,7 +547,7 @@ useSeoMeta({
 			<h2 class="main-subheader">
 				{{ formatMessage(messages.description) }}
 			</h2>
-			<div class="button-group">
+			<div class="mx-auto flex w-fit flex-wrap justify-center gap-2 [mask-image:none]">
 				<Button v-if="os" type="colored" color="brand" size="xl" @click="handleDownload">
 					<LinuxIcon v-if="os === 'Linux'" />
 					<WindowsIcon v-else-if="os === 'Windows'" />
@@ -745,10 +746,12 @@ useSeoMeta({
 					<div class="projects-showcase">
 						<div v-for="(row, index) in rows" :key="index" class="row">
 							<div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
-								<nuxt-link
+								<ButtonLink
 									v-for="project in row"
 									:key="project.id"
-									class="project button-animation gradient-border"
+									type="quiet"
+									interaction="none"
+									class="project gradient-border !h-auto !shrink !items-stretch !justify-start !whitespace-normal !p-4 !font-normal !leading-normal"
 									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
 								>
 									<Avatar :src="project.icon_url!" alt="" size="sm" />
@@ -760,7 +763,7 @@ useSeoMeta({
 											{{ project.description }}
 										</span>
 									</div>
-								</nuxt-link>
+								</ButtonLink>
 							</div>
 						</div>
 					</div>
@@ -1228,13 +1231,6 @@ useSeoMeta({
 		mask-image: none;
 	}
 
-	.button-group {
-		width: fit-content;
-		margin: 0 auto;
-		justify-content: center;
-		mask-image: none;
-	}
-
 	img {
 		width: 100%;
 		max-width: 65rem;
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index d258f0e5af..fddcf8b664 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -13,11 +13,13 @@
 			</div>
 			<template v-if="orgs?.length > 0">
 				<div class="orgs-grid">
-					<nuxt-link
+					<ButtonLink
 						v-for="org in sortedOrgs"
 						:key="org.id"
+						type="quiet"
+						interaction="none"
 						:to="`/organization/${org.slug}`"
-						class="universal-card button-base recessed org"
+						class="universal-card recessed org !h-auto !w-full !shrink !items-stretch !justify-start !whitespace-normal !p-[var(--spacing-card-bg)]"
 						:class="{ 'is-disabled': onlyAcceptedMembers(org.members).length === 0 }"
 					>
 						<Avatar :src="org.icon_url" :alt="org.name" class="icon" />
@@ -41,7 +43,7 @@
 								</div>
 							</span>
 						</div>
-					</nuxt-link>
+					</ButtonLink>
 				</div>
 			</template>
 			<template v-else> {{ formatMessage(messages.makeOrganization) }} </template>
@@ -51,7 +53,14 @@
 
 <script setup>
 import { PlusIcon, UsersIcon } from '@modrinth/assets'
-import { Avatar, Button, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	ButtonLink,
+	defineMessages,
+	injectModrinthClient,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index 3b7767f78b..5ea21cbd6d 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -643,6 +643,7 @@ import {
 	IntlFormatted,
 	LoaderIcon,
 	ModrinthServersPurchaseModal,
+	OptionGroup,
 	useFormatPrice,
 	useVIntl,
 } from '@modrinth/ui'
@@ -650,7 +651,6 @@ import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
-import OptionGroup from '~/components/ui/OptionGroup.vue'
 import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { products } from '~/generated/state.json'
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index c226a6d8c7..b74b666b6b 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -25,7 +25,7 @@
 			<h2>
 				{{ formatMessage(messages.discoverHeading) }}
 			</h2>
-			<div class="button-group">
+			<div class="mx-auto mb-20 flex w-fit flex-wrap justify-center gap-5">
 				<ButtonLink type="colored" color="brand" size="xl" to="/discover/mods">
 					<CompassIcon aria-hidden="true" />
 					{{ formatMessage(messages.discoverMods) }}
@@ -50,10 +50,12 @@
 			<div v-if="rows" class="projects-showcase">
 				<div v-for="(row, index) in rows" :key="index" class="row">
 					<div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
-						<nuxt-link
+						<ButtonLink
 							v-for="project in row"
 							:key="project.id"
-							class="project button-animation"
+							type="quiet"
+							interaction="none"
+							class="project !h-auto !shrink !items-stretch !justify-start !whitespace-normal !p-4 !font-normal !leading-normal"
 							:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
 						>
 							<Avatar :src="project.icon_url" :alt="project.title" size="sm" loading="lazy" />
@@ -65,7 +67,7 @@
 									{{ project.description }}
 								</span>
 							</div>
-						</nuxt-link>
+						</ButtonLink>
 					</div>
 				</div>
 			</div>
@@ -738,13 +740,6 @@ const creatorFeatureMessages = defineMessages({
 		color: var(--landing-color-subheading);
 		max-width: 50rem;
 	}
-
-	.button-group {
-		width: fit-content;
-		gap: 1.25rem;
-		margin: 0 auto 5rem;
-		justify-content: center;
-	}
 }
 
 .users-section-outer {
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 339300eded..b11e4edb96 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -43,13 +43,17 @@
 					</div>
 					<div class="project-list-layouts">
 						<button
-							class="preview-radio button-base"
+							type="button"
+							class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
 							:class="{
-								selected: cosmetics.searchDisplayMode[projectType.id] === 'list',
+								'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
+									cosmetics.searchDisplayMode[projectType.id] === 'list',
 							}"
 							@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'list')"
 						>
-							<div class="preview">
+							<div
+								class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
+							>
 								<div class="layout-list-mode">
 									<div class="example-card card"></div>
 									<div class="example-card card"></div>
@@ -57,25 +61,30 @@
 									<div class="example-card card"></div>
 								</div>
 							</div>
-							<div class="label">
+							<div
+								class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
+							>
 								<RadioButtonCheckedIcon
 									v-if="cosmetics.searchDisplayMode[projectType.id] === 'list'"
-									class="radio shrink-0"
+									class="radio mr-2 shrink-0"
 								/>
-								<RadioButtonIcon v-else class="radio shrink-0" />
+								<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
 								{{ formatMessage(layoutMode.rows) }}
 							</div>
 						</button>
 						<button
-							class="preview-radio button-base"
+							type="button"
+							class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
 							:class="{
-								selected:
+								'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
 									cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
 									cosmetics.searchDisplayMode[projectType.id] === 'grid',
 							}"
 							@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'grid')"
 						>
-							<div class="preview">
+							<div
+								class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
+							>
 								<div class="layout-gallery-mode">
 									<div class="example-card card"></div>
 									<div class="example-card card"></div>
@@ -83,15 +92,17 @@
 									<div class="example-card card"></div>
 								</div>
 							</div>
-							<div class="label">
+							<div
+								class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
+							>
 								<RadioButtonCheckedIcon
 									v-if="
 										cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
 										cosmetics.searchDisplayMode[projectType.id] === 'grid'
 									"
-									class="radio shrink-0"
+									class="radio mr-2 shrink-0"
 								/>
-								<RadioButtonIcon v-else class="radio shrink-0" />
+								<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
 								{{ formatMessage(layoutMode.grid) }}
 							</div>
 						</button>
@@ -487,20 +498,5 @@ const listTypes = computed(() => {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
 	gap: var(--gap-lg);
-
-	.preview-radio .example-card {
-		border: 2px solid transparent;
-	}
-
-	.preview-radio.selected .example-card {
-		border-color: var(--color-brand);
-		background-color: var(--color-brand-highlight);
-	}
-
-	.preview {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
 }
 </style>
diff --git a/packages/ui/src/components/base/OptionGroup.vue b/packages/ui/src/components/base/OptionGroup.vue
index bdb70a5c4a..9000fdcb65 100644
--- a/packages/ui/src/components/base/OptionGroup.vue
+++ b/packages/ui/src/components/base/OptionGroup.vue
@@ -3,19 +3,21 @@
 		ref="scrollContainer"
 		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
-		<button
+		<Button
 			v-for="(option, index) in options"
 			:key="`option-group-${index}`"
 			ref="optionButtons"
-			class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
+			type="quiet"
+			interaction="none"
+			class="z-[1] !h-auto !gap-2 !rounded-full !px-4 !py-2"
 			:class="{
-				'text-button-textSelected': modelValue === option,
-				'text-primary': modelValue !== option,
+				'!text-brand': modelValue === option,
+				'!text-primary': modelValue !== option,
 			}"
 			@click="setOption(option)"
 		>
 			<slot :option="option" :selected="modelValue === option" />
-		</button>
+		</Button>
 		<div
 			class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
 			:style="{
@@ -33,6 +35,8 @@
 <script setup lang="ts" generic="T">
 import { computed, onMounted, ref, watch } from 'vue'
 
+import Button from './buttons/Button.vue'
+
 const modelValue = defineModel<T>({ required: true })
 
 const props = defineProps<{
@@ -64,7 +68,7 @@ watch(modelValue, () => {
 })
 
 function startAnimation(index: number) {
-	const el = optionButtons.value[index]
+	const el = optionButtons.value[index]?.element
 
 	if (!el || !el.offsetParent) return