diff --git a/apps/frontend/src/components/ui/NotificationsIndicator.vue b/apps/frontend/src/components/ui/NotificationsIndicator.vue
new file mode 100644
index 0000000000..5ad3f13e46
--- /dev/null
+++ b/apps/frontend/src/components/ui/NotificationsIndicator.vue
@@ -0,0 +1,441 @@
+<template>
+	<ButtonStyled type="transparent">
+		<OverflowMenu
+			ref="notificationsOverflow"
+			:dropdown-id="effectiveDropdownId"
+			class="btn-dropdown-animation relative flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+			:options="[]"
+			@dblclick="handleViewAllNotifications"
+		>
+			<div class="relative flex h-5 flex-shrink-0 items-center justify-center">
+				<BellIcon aria-hidden="true" class="h-5 w-5" style="transform: none" />
+				<div
+					v-if="unreadCount > 0"
+					class="absolute -top-2 left-3 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand px-1 text-[10px] font-bold text-brand-inverted"
+				>
+					{{ unreadCount }}
+				</div>
+			</div>
+			<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+			<template #menu-header>
+				<div class="notifications-dropdown flex flex-col p-2">
+					<div class="flex items-center justify-between gap-2 rounded-lg">
+						<button class="iconified-button" @click="handleViewAllNotifications">
+							<BellIcon aria-hidden="true" />
+							{{ formatMessage(messages.viewAllNotifications) }}
+						</button>
+						<button class="iconified-button" @click="handleViewHistory">
+							<HistoryIcon />
+							{{ formatMessage(messages.viewHistory) }}
+						</button>
+						<button
+							v-if="unreadCount > 0"
+							class="iconified-button danger-button"
+							@click="handleMarkAllAsRead"
+						>
+							<CheckCheckIcon />
+							{{ formatMessage(messages.markAllAsRead) }}
+						</button>
+					</div>
+					<div class="mt-4 border-t border-divider"></div>
+					<div
+						v-if="recentNotifications.length === 0"
+						class="flex items-center justify-center rounded-lg bg-transparent py-4 text-secondary"
+					>
+						{{ formatMessage(messages.noUnreadNotifications) }}
+					</div>
+					<ScrollablePanel class="[&_--_fade-height:1rem] [&__.scrollable-pane]:max-h-[500px]">
+						<div class="flex flex-col gap-2">
+							<SmartClickable
+								v-for="notif in paginatedNotifications"
+								:key="notif.id"
+								class="w-full"
+							>
+								<template #clickable>
+									<NuxtLink
+										:to="notif.link"
+										class="no-outline no-click-animation rounded-xl"
+										@click="handleNotificationClick(notif)"
+									></NuxtLink>
+								</template>
+								<div
+									class="smart-clickable:outline-on-focus smart-clickable:highlight-on-hover group flex gap-2 rounded-2xl border-[1px] border-solid border-surface-4 bg-bg !p-4 transition-all"
+								>
+									<DoubleIcon class="flex-shrink-0">
+										<template #primary>
+											<NuxtLink
+												v-if="notif.extra_data?.project"
+												:to="`/project/${notif.extra_data.project.slug}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.project.icon_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.organization"
+												:to="`/organization/${notif.extra_data.organization.slug}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.organization.icon_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<NuxtLink
+												v-else-if="notif.extra_data?.user"
+												:to="`/user/${notif.extra_data.user.username}`"
+												tabindex="-1"
+												class="smart-clickable:allow-pointer-events"
+												@click.stop
+											>
+												<Avatar
+													size="xs"
+													:src="notif.extra_data.user.avatar_url"
+													aria-hidden="true"
+												/>
+											</NuxtLink>
+											<Avatar v-else size="xs" aria-hidden="true" />
+										</template>
+										<template #secondary>
+											<ScaleIcon
+												v-if="
+													notif.body?.type === 'moderator_message' ||
+													notif.body?.type === 'status_change'
+												"
+												class="moderation-color"
+											/>
+											<UserPlusIcon
+												v-else-if="notif.body?.type === 'team_invite' && notif.extra_data?.project"
+												class="creator-color"
+											/>
+											<UserPlusIcon
+												v-else-if="
+													notif.body?.type === 'organization_invite' &&
+													notif.extra_data?.organization
+												"
+												class="creator-color"
+											/>
+											<VersionIcon
+												v-else-if="
+													notif.body?.type === 'project_update' &&
+													notif.extra_data?.project &&
+													notif.extra_data?.version
+												"
+												class="text-contrast"
+											/>
+											<BellIcon v-else class="text-contrast" />
+										</template>
+									</DoubleIcon>
+									<div class="w-0 min-w-0 flex-1 pr-2">
+										<div class="break-words font-semibold text-contrast">
+											{{
+												notif.body?.type === 'project_update' && notif.extra_data?.project
+													? `${notif.extra_data.project.title} has been updated`
+													: notif.title
+											}}
+										</div>
+										<div class="mt-1 flex items-center gap-1 text-sm text-secondary">
+											<CalendarIcon aria-hidden="true" />
+											{{ formatRelativeTime(notif.created) }}
+										</div>
+									</div>
+									<div class="smart-clickable:allow-pointer-events flex gap-2">
+										<button
+											v-if="
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
+												!notif.read
+											"
+											class="iconified-button square-button brand-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleAcceptInvite(notif)"
+										>
+											<CheckIcon />
+										</button>
+										<button
+											v-if="
+												(notif.body?.type === 'team_invite' ||
+													notif.body?.type === 'organization_invite') &&
+												!notif.read
+											"
+											class="iconified-button square-button danger-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleDeclineInvite(notif)"
+										>
+											<XIcon />
+										</button>
+										<button
+											v-else-if="!notif.read"
+											class="iconified-button square-button [&>svg]:!mr-0"
+											@click.stop.prevent="handleMarkAsRead(notif)"
+										>
+											<CheckIcon />
+										</button>
+									</div>
+								</div>
+							</SmartClickable>
+						</div>
+					</ScrollablePanel>
+					<div v-if="totalPages > 1" class="mt-2 flex justify-end">
+						<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+					</div>
+				</div>
+			</template>
+		</OverflowMenu>
+	</ButtonStyled>
+</template>
+
+<script setup>
+import {
+	BellIcon,
+	CalendarIcon,
+	CheckCheckIcon,
+	CheckIcon,
+	DropdownIcon,
+	HistoryIcon,
+	ScaleIcon,
+	UserPlusIcon,
+	VersionIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	DoubleIcon,
+	OverflowMenu,
+	Pagination,
+	ScrollablePanel,
+	SmartClickable,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
+
+import {
+	fetchExtraNotificationData,
+	groupNotifications,
+	markAsRead,
+} from '~/helpers/platform-notifications'
+import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
+
+const props = defineProps({
+	dropdownId: {
+		type: String,
+		default: '',
+	},
+})
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const router = useNativeRouter()
+const auth = await useAuth()
+
+const effectiveDropdownId = computed(() => props.dropdownId || `notifications-dropdown-${useId()}`)
+
+const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
+	'notifications-dropdown',
+	async () => {
+		if (!auth.value.user) return null
+
+		const notifs = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		return await fetchExtraNotificationData(notifs)
+	},
+	{
+		watch: [auth],
+	},
+)
+
+const unreadCount = computed(() => {
+	if (!notificationsData.value) return 0
+	const grouped = groupNotifications(
+		notificationsData.value.filter((n) => !n.read),
+		false,
+	)
+	return grouped.length
+})
+
+const recentNotifications = computed(() => {
+	if (!notificationsData.value) return []
+	const unread = notificationsData.value.filter((n) => !n.read)
+	return groupNotifications(unread, false)
+})
+
+// Pagination
+const NOTIFICATIONS_PER_PAGE = 20
+const currentPage = ref(1)
+
+const totalPages = computed(() => {
+	return Math.ceil(recentNotifications.value.length / NOTIFICATIONS_PER_PAGE)
+})
+
+const paginatedNotifications = computed(() => {
+	const start = (currentPage.value - 1) * NOTIFICATIONS_PER_PAGE
+	const end = start + NOTIFICATIONS_PER_PAGE
+	return recentNotifications.value.slice(start, end)
+})
+
+// Clamp current page to valid range when total pages decrease
+watch(totalPages, (newTotal) => {
+	if (newTotal > 0 && currentPage.value > newTotal) {
+		currentPage.value = newTotal
+	} else if (newTotal === 0) {
+		currentPage.value = 1
+	}
+})
+
+function goToPage(page) {
+	if (page >= 1 && page <= totalPages.value) {
+		currentPage.value = page
+	}
+}
+
+// Auto-refresh
+const REFRESH_INTERVAL = 60000 // 1 minute
+
+const notificationsOverflow = ref(null)
+
+let refreshInterval = null
+
+onMounted(() => {
+	refreshInterval = setInterval(() => {
+		if (notificationsOverflow.value) {
+			refreshNotifications()
+		}
+	}, REFRESH_INTERVAL)
+})
+
+onBeforeUnmount(() => {
+	if (refreshInterval) {
+		clearInterval(refreshInterval)
+	}
+})
+
+const messages = defineMessages({
+	viewAllNotifications: {
+		id: 'layout.notifications.view-all',
+		defaultMessage: 'View all',
+	},
+	markAllAsRead: {
+		id: 'layout.notifications.mark-all-read',
+		defaultMessage: 'Mark all as read',
+	},
+	viewHistory: {
+		id: 'layout.notifications.view-history',
+		defaultMessage: 'View history',
+	},
+	noUnreadNotifications: {
+		id: 'layout.notifications.no-unread',
+		defaultMessage: 'No unread notifications',
+	},
+})
+
+async function handleAcceptInvite(notif) {
+	try {
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			const n = notificationsData.value.find((n) => n.id === notif.id)
+			if (n) n.read = true
+		}
+
+		await acceptTeamInvite(notif.body.team_id)
+		markAsRead([notif.id]).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
+	} catch (err) {
+		console.error('Error accepting invite:', err)
+	}
+}
+
+async function handleDeclineInvite(notif) {
+	try {
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			const n = notificationsData.value.find((n) => n.id === notif.id)
+			if (n) n.read = true
+		}
+
+		await removeSelfFromTeam(notif.body.team_id)
+		markAsRead([notif.id]).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
+	} catch (err) {
+		console.error('Error declining invite:', err)
+	}
+}
+
+async function handleMarkAsRead(notif) {
+	try {
+		const ids = [notif.id, ...(notif.grouped_notifs ? notif.grouped_notifs.map((n) => n.id) : [])]
+
+		// Mark as read locally immediately
+		if (notificationsData.value) {
+			for (const id of ids) {
+				const n = notificationsData.value.find((n) => n.id === id)
+				if (n) n.read = true
+			}
+		}
+
+		markAsRead(ids).catch((err) => {
+			console.error('Error marking as read:', err)
+		})
+	} catch (err) {
+		console.error('Error marking as read:', err)
+	}
+}
+
+function handleViewAllNotifications() {
+	notificationsOverflow.value?.close()
+	router.push('/dashboard/notifications')
+}
+
+function handleViewHistory() {
+	notificationsOverflow.value?.close()
+	router.push('/dashboard/notifications/history')
+}
+
+async function handleNotificationClick(notif) {
+	notificationsOverflow.value?.close()
+	if (!notif.read) {
+		handleMarkAsRead(notif)
+	}
+}
+
+async function handleMarkAllAsRead() {
+	try {
+		const ids = notificationsData.value?.map((n) => n.id) || []
+
+		// Mark all as read locally immediately
+		if (notificationsData.value) {
+			for (const n of notificationsData.value) {
+				n.read = true
+			}
+		}
+
+		markAsRead(ids).catch((err) => {
+			console.error('Error marking all as read:', err)
+		})
+	} catch (err) {
+		console.error('Error marking all as read:', err)
+	}
+}
+</script>
+
+<style scoped>
+.moderation-color {
+	color: var(--color-orange);
+}
+
+.creator-color {
+	color: var(--color-blue);
+}
+
+:deep(.page-number-container > div) {
+	color: var(--color-secondary);
+}
+</style>
diff --git a/apps/frontend/src/helpers/platform-notifications.ts b/apps/frontend/src/helpers/platform-notifications.ts
index e151d583a5..70fd2c2a62 100644
--- a/apps/frontend/src/helpers/platform-notifications.ts
+++ b/apps/frontend/src/helpers/platform-notifications.ts
@@ -133,13 +133,14 @@ export function groupNotifications(notifications: PlatformNotification[]): Platf
 		const current = notifications[i]
 		const next = notifications[i + 1]
 		if (current.body && i < notifications.length - 1 && isSimilar(current, next)) {
-			current.grouped_notifs = [next]
+			// Create a copy to avoid mutating the original reactive object
+			const groupCopy = { ...current, grouped_notifs: [next] }
 			let j = i + 2
 			while (j < notifications.length && isSimilar(current, notifications[j])) {
-				current.grouped_notifs.push(notifications[j])
+				groupCopy.grouped_notifs.push(notifications[j])
 				j++
 			}
-			grouped.push(current)
+			grouped.push(groupCopy)
 			i = j - 1
 		} else {
 			grouped.push(current)
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 0990ef8c15..60c1d57a32 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -385,44 +385,7 @@
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
-				<ButtonStyled type="transparent">
-					<OverflowMenu
-						v-if="auth.user"
-						class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						position="bottom"
-						direction="left"
-						:dropdown-id="`${basePopoutId}-create`"
-						:aria-label="formatMessage(messages.createNew)"
-						:options="[
-							{
-								id: 'new-project',
-								action: (event) => $refs.modal_creation.show(event),
-							},
-							{
-								id: 'new-collection',
-								action: (event) => $refs.modal_collection_creation.show(event),
-							},
-							{ divider: true },
-							{
-								id: 'new-organization',
-								action: (event) => $refs.modal_organization_creation.show(event),
-							},
-						]"
-					>
-						<PlusIcon aria-hidden="true" />
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #new-project>
-							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
-						</template>
-						<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
-						<template #new-collection>
-							<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
-						</template>
-						<template #new-organization>
-							<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<NotificationsIndicator v-if="auth.user" :dropdown-id="`${basePopoutId}-notifications`" />
 				<OverflowMenu
 					v-if="auth.user"
 					:dropdown-id="`${basePopoutId}-user`"
@@ -678,7 +641,6 @@ import {
 	BoxIcon,
 	BracesIcon,
 	ChartIcon,
-	CollectionIcon,
 	CompassIcon,
 	CurrencyIcon,
 	DownloadIcon,
@@ -736,6 +698,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
+import NotificationsIndicator from '~/components/ui/NotificationsIndicator.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 58d79aa6be..f002567bff 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1658,6 +1658,18 @@
   "layout.nav.upgrade-to-modrinth-plus": {
     "message": "Upgrade to Modrinth+"
   },
+  "layout.notifications.mark-all-read": {
+    "message": "Mark all as read"
+  },
+  "layout.notifications.no-unread": {
+    "message": "No unread notifications"
+  },
+  "layout.notifications.view-all": {
+    "message": "View all"
+  },
+  "layout.notifications.view-history": {
+    "message": "View history"
+  },
   "moderation.moderate": {
     "message": "Moderate"
   },