diff --git a/app/components/account/AccountTabs.vue b/app/components/account/AccountTabs.vue
index d8cc4d1981..8dd207bfcb 100644
--- a/app/components/account/AccountTabs.vue
+++ b/app/components/account/AccountTabs.vue
@@ -35,6 +35,15 @@ const tabs = computed<CommonRouteTabOption[]>(() => [
     display: t('tab.media'),
     icon: 'i-ri:camera-2-line',
   },
+  {
+    name: 'account-collections',
+    to: {
+      name: 'account-collections',
+      params: { server: server.value, account: account.value },
+    },
+    display: t('tab.collections'),
+    icon: 'i-ri:shapes-line',
+  },
 ])
 </script>
 
diff --git a/app/components/nav/NavBottom.vue b/app/components/nav/NavBottom.vue
index 6cb34dcae0..2e02b963f1 100644
--- a/app/components/nav/NavBottom.vue
+++ b/app/components/nav/NavBottom.vue
@@ -4,6 +4,7 @@ import type { NavButtonName } from '../../composables/settings'
 
 import {
   NavButtonBookmark,
+  NavButtonCollection,
   NavButtonCompose,
   NavButtonExplore,
   NavButtonFavorite,
@@ -39,6 +40,7 @@ const navButtons: NavButton[] = [
   { name: 'local', component: NavButtonLocal },
   { name: 'federated', component: NavButtonFederated },
   { name: 'list', component: NavButtonList },
+  { name: 'collection', component: NavButtonCollection },
   { name: 'hashtag', component: NavButtonHashtag },
   { name: 'moreMenu', component: NavButtonMoreMenu },
 ]
diff --git a/app/components/nav/NavSide.vue b/app/components/nav/NavSide.vue
index 60d289b89c..81351195b5 100644
--- a/app/components/nav/NavSide.vue
+++ b/app/components/nav/NavSide.vue
@@ -65,6 +65,7 @@ const exploreLink = computed(() => {
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
     <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
     <NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
+    <NavSideItem :text="$t('nav.collections')" :to="isHydrated ? `/${currentServer}/collections` : '/collections'" icon="i-ri:shapes-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
diff --git a/app/components/nav/button/Collection.vue b/app/components/nav/button/Collection.vue
new file mode 100644
index 0000000000..7197e98fb7
--- /dev/null
+++ b/app/components/nav/button/Collection.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    to="/collections"
+    :aria-label="$t('nav.collections')"
+    :active-class="activeClass"
+    flex flex-row items-center place-content-center h-full flex-1
+    class="coarse-pointer:select-none" @click="$scrollToTop"
+  >
+    <div i-ri:shapes-line />
+  </NuxtLink>
+</template>
diff --git a/app/components/notification/NotificationCard.vue b/app/components/notification/NotificationCard.vue
index 5bced7b405..0628a77b3a 100644
--- a/app/components/notification/NotificationCard.vue
+++ b/app/components/notification/NotificationCard.vue
@@ -3,8 +3,8 @@ import type { mastodon } from 'masto'
 
 // Add undocumented 'annual_report' type introduced in v4.3
 // ref. https://github.com/mastodon/documentation/issues/1211#:~:text=api/v1/annual_reports
-type NotificationType = mastodon.v1.Notification['type'] | 'annual_report'
-type Notification = Omit<mastodon.v1.Notification, 'type'> & { type: NotificationType }
+type NotificationType = mastodon.v1.Notification['type'] | 'annual_report' | 'added_to_collection' | 'collection_update'
+type Notification = Omit<mastodon.v1.Notification, 'type'> & { type: NotificationType } & { collection?: mastodon.v1.Collection }
 
 const { notification } = defineProps<{
   notification: Notification
@@ -26,6 +26,8 @@ const supportedNotificationTypes: NotificationType[] = [
   'status',
   'annual_report',
   'quote',
+  'added_to_collection',
+  'collection_update',
 ]
 
 // well-known emoji reactions types Elk does not support yet
@@ -158,5 +160,61 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
         </div>
       </div>
     </template>
+    <template v-else-if="notification.type === 'added_to_collection' && notification.collection">
+      <NuxtLink :to="getCollectionRoute(notification.collection)">
+        <div flex="~ col" p4 bg-shaded gap-3>
+          <div flex>
+            <div i-ri:shapes-line text-xl me-3 color-blue />
+            <AccountHoverWrapper :account="notification.account">
+              <NuxtLink :to="getAccountRoute(notification.account)">
+                <AccountDisplayName
+                  :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
+                />
+              </NuxtLink>
+            </AccountHoverWrapper>
+            <span>{{ $t('notification.added_you_to_collection') }}</span>
+          </div>
+          <div flex gap-3 ps-8>
+            <div i-ri:shapes-line text-xl shrink-0 text-secondary />
+            <div flex="~ col" min-w-0>
+              <div font-bold truncate>
+                {{ notification.collection.name }}
+              </div>
+              <div v-if="notification.collection.description" text-sm text-secondary truncate>
+                {{ notification.collection.description }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </NuxtLink>
+    </template>
+    <template v-else-if="notification.type === 'collection_update' && notification.collection">
+      <NuxtLink :to="getCollectionRoute(notification.collection)">
+        <div flex="~ col" p4 bg-shaded gap-3>
+          <div flex>
+            <div i-ri:shapes-line text-xl me-3 color-blue />
+            <AccountHoverWrapper :account="notification.account">
+              <NuxtLink :to="getAccountRoute(notification.account)">
+                <AccountDisplayName
+                  :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
+                />
+              </NuxtLink>
+            </AccountHoverWrapper>
+            <span>{{ $t('notification.collection_updated') }}</span>
+          </div>
+          <div flex gap-3 ps-8>
+            <div i-ri:shapes-line text-xl shrink-0 text-secondary />
+            <div flex="~ col" min-w-0>
+              <div font-bold truncate>
+                {{ notification.collection.name }}
+              </div>
+              <div v-if="notification.collection.description" text-sm text-secondary truncate>
+                {{ notification.collection.description }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </NuxtLink>
+    </template>
   </article>
 </template>
diff --git a/app/components/settings/SettingsBottomNav.vue b/app/components/settings/SettingsBottomNav.vue
index 8d545b74ad..af8e16ea92 100644
--- a/app/components/settings/SettingsBottomNav.vue
+++ b/app/components/settings/SettingsBottomNav.vue
@@ -21,6 +21,7 @@ const availableNavButtons: NavButton[] = [
   { name: 'local', label: 'nav.local', icon: 'i-ri:group-2-line' },
   { name: 'federated', label: 'nav.federated', icon: 'i-ri:earth-line' },
   { name: 'list', label: 'nav.lists', icon: 'i-ri:list-check' },
+  { name: 'collection', label: 'nav.collections', icon: 'i-ri:shapes-line' },
   { name: 'hashtag', label: 'nav.hashtags', icon: 'i-ri:hashtag' },
   { name: 'moreMenu', label: 'nav.more_menu', icon: 'i-ri:more-fill' },
 ] as const
diff --git a/app/composables/masto/routes.ts b/app/composables/masto/routes.ts
index 31dfe4e806..40ae008b51 100644
--- a/app/composables/masto/routes.ts
+++ b/app/composables/masto/routes.ts
@@ -68,6 +68,26 @@ export function getStatusInReplyToRoute(status: mastodon.v1.Status) {
   })
 }
 
+export function getCollectionRoute(collection: mastodon.v1.Collection) {
+  return useRouter().resolve({
+    name: 'collection',
+    params: {
+      server: currentServer.value,
+      id: collection.id,
+    },
+  })
+}
+
+export function getAccountCollectionsRoute(account: mastodon.v1.Account) {
+  return useRouter().resolve({
+    name: 'account-collections',
+    params: {
+      server: currentServer.value,
+      account: extractAccountHandle(account),
+    },
+  })
+}
+
 export function navigateToStatus({ status, focusReply = false }: {
   status: mastodon.v1.Status
   focusReply?: boolean
diff --git a/app/composables/settings/definition.ts b/app/composables/settings/definition.ts
index 8266b1a8e5..7350bf559f 100644
--- a/app/composables/settings/definition.ts
+++ b/app/composables/settings/definition.ts
@@ -7,7 +7,7 @@ export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 export type ColorMode = 'light' | 'dark' | 'system'
 
-export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'favorite' | 'bookmark' | 'compose' | 'scheduledPosts' | 'explore' | 'local' | 'federated' | 'list' | 'hashtag' | 'setting' | 'moreMenu'
+export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'favorite' | 'bookmark' | 'compose' | 'scheduledPosts' | 'explore' | 'local' | 'federated' | 'list' | 'collection' | 'hashtag' | 'setting' | 'moreMenu'
 
 export interface PreferencesSettings {
   hideAltIndicatorOnPosts: boolean
diff --git a/app/pages/[[server]]/@[account]/index/collections.vue b/app/pages/[[server]]/@[account]/index/collections.vue
new file mode 100644
index 0000000000..a5a23de0ff
--- /dev/null
+++ b/app/pages/[[server]]/@[account]/index/collections.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+import { MastoUnexpectedError } from 'masto'
+
+definePageMeta({
+  name: 'account-collections',
+})
+
+const { t } = useI18n()
+const params = useRoute().params
+const handle = computed(() => params.account as string)
+
+const account = await fetchAccountByHandle(handle.value)
+
+const client = useMastoClient()
+
+let collectionData: mastodon.v1.Collections | null = null
+const collectionsNotSupported = ref(false)
+if (account) {
+  try {
+    collectionData = await client.v1.accounts.$select(account.id).collections.list()
+  }
+  catch (err) {
+    if (err instanceof MastoUnexpectedError) {
+      collectionsNotSupported.value = true
+    }
+  }
+}
+
+const collections = computed(() => collectionData?.collections ?? [])
+
+if (account) {
+  useHydratedHead({
+    title: () => `${t('nav.collections')} | ${getDisplayName(account)} (@${account.acct})`,
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AccountTabs />
+    <div v-if="collections.length > 0" divide-y="base">
+      <NuxtLink
+        v-for="collection in collections"
+        :key="collection.id"
+        :to="{
+          name: 'collection',
+          params: { server: params.server, id: collection.id },
+        }"
+        block p-4 hover:bg-active transition-100
+      >
+        <div flex items-center gap-3>
+          <div i-ri:shapes-line text-xl shrink-0 text-secondary />
+          <div flex="~ col" min-w-0>
+            <div font-bold truncate>
+              {{ collection.name }}
+            </div>
+            <div v-if="collection.description" text-sm text-secondary truncate>
+              {{ collection.description }}
+            </div>
+            <div text-sm text-secondary>
+              <CommonLocalizedNumber keypath="collection.item_count" :count="collection.itemCount" />
+            </div>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+    <div v-else-if="collectionsNotSupported" p-4 text-secondary text-sm text-center>
+      {{ $t('error.collections_not_supported') }}
+    </div>
+    <div v-else p-4 text-secondary text-sm text-center>
+      {{ $t('collection.no_collections') }}
+    </div>
+  </div>
+</template>
diff --git a/app/pages/[[server]]/collections.vue b/app/pages/[[server]]/collections.vue
new file mode 100644
index 0000000000..7647938c44
--- /dev/null
+++ b/app/pages/[[server]]/collections.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+
+useHydratedHead({
+  title: () => t('nav.collections'),
+})
+</script>
+
+<template>
+  <template v-if="route.name !== 'collection'">
+    <MainContent>
+      <template #title>
+        <MainTitle icon="i-ri:shapes-line">
+          {{ t('nav.collections') }}
+        </MainTitle>
+      </template>
+      <NuxtPage v-if="isHydrated" :key="route.fullPath" />
+    </MainContent>
+  </template>
+  <template v-else>
+    <NuxtPage v-if="isHydrated" :key="route.fullPath" />
+  </template>
+</template>
diff --git a/app/pages/[[server]]/collections/[id].vue b/app/pages/[[server]]/collections/[id].vue
new file mode 100644
index 0000000000..e3492c68c5
--- /dev/null
+++ b/app/pages/[[server]]/collections/[id].vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+definePageMeta({
+  name: 'collection',
+})
+
+const { t } = useI18n()
+const params = useRoute().params
+const collectionId = computed(() => params.id as string)
+
+const client = useMastoClient()
+
+const collectionsNotSupported = ref(false)
+
+const { data: collectionData } = await useAsyncData<mastodon.v1.CollectionWithAccounts | null>(
+  () => `collection-${collectionId.value}`,
+  () => client.v1.collections.$select(collectionId.value).fetch().catch(() => {
+    collectionsNotSupported.value = true
+    return null
+  }),
+  { immediate: import.meta.client, default: () => shallowRef() },
+)
+
+const accounts = computed(() => collectionData.value?.accounts ?? [])
+const [ownerAccount, ...memberAccounts] = accounts.value
+const collection = computed(() => collectionData.value?.collection)
+
+useHydratedHead({
+  title: t('nav.collections'),
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <MainTitle>
+        {{ t('nav.collections') }}
+      </MainTitle>
+    </template>
+
+    <template v-if="collectionsNotSupported">
+      <CommonNotFound>
+        {{ $t('error.collections_not_supported') }}
+      </CommonNotFound>
+    </template>
+    <template v-else-if="!collectionData">
+      <CommonNotFound>
+        {{ $t('error.collection_not_found') }}
+      </CommonNotFound>
+    </template>
+    <template v-else-if="collection">
+      <div p-4 border="b base" space-y-3>
+        <div flex items-center gap-2 text-start text-lg font-bold>
+          {{ collection.name }}
+        </div>
+
+        <div v-if="ownerAccount" flex items-center gap-2 text-sm text-secondary>
+          <span mr5>{{ $t('collection.created_by') }}</span>
+          <AccountInlineInfo :account="ownerAccount" class="pl1" />
+        </div>
+
+        <div flex text-sm text-secondary gap-4>
+          <span>{{ $t('collection.item_count', [collection.itemCount]) }}</span>
+        </div>
+
+        <div v-if="collection.description" text-secondary>
+          {{ collection.description }}
+        </div>
+
+        <div v-if="collection.tag" flex items-center gap-2>
+          <NuxtLink :to="getTagRoute(collection.tag.name)" text-primary text-sm font-bold hover:underline>
+            #{{ collection.tag.name }}
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div v-if="memberAccounts.length > 0" divide-y="base">
+        <div
+          v-for="account in memberAccounts"
+          :key="account.id"
+          py3 px4 space-y-2
+        >
+          <div flex justify-between items-center>
+            <AccountInfo
+              :account="account"
+              hover-card
+              as="router-link"
+              shrink overflow-hidden
+              :to="getAccountRoute(account)"
+            />
+            <AccountFollowButton :account="account" />
+          </div>
+          <div v-if="account.note" text-sm text-secondary>
+            <ContentRich
+              :content="account.note" :emojis="account.emojis"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-else p-4 text-secondary text-sm text-center>
+        {{ $t('collection.empty') }}
+      </div>
+    </template>
+  </MainContent>
+</template>
diff --git a/app/pages/[[server]]/collections/index.vue b/app/pages/[[server]]/collections/index.vue
new file mode 100644
index 0000000000..6b25bed724
--- /dev/null
+++ b/app/pages/[[server]]/collections/index.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+type CollectionsTab = 'my_collections' | 'in_collections'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+const { t } = useI18n()
+const client = useMastoClient()
+const accountId = currentUser.value?.account?.id
+
+const tab = ref<CollectionsTab>('my_collections')
+const tabOptions: { name: CollectionsTab, display: string }[] = [
+  { name: 'my_collections', display: t('tab.my_collections') },
+  { name: 'in_collections', display: t('tab.in_collections') },
+]
+
+let collectionsData = null
+let inCollectionsData = null
+const collectionsNotSupported = ref(false)
+if (accountId) {
+  const [collectionsResult, inCollectionsResult] = await Promise.allSettled([
+    client.v1.accounts.$select(accountId).collections.list(),
+    client.v1.accounts.$select(accountId).inCollections.list(),
+  ])
+  if (collectionsResult.status === 'fulfilled') {
+    collectionsData = collectionsResult.value
+  }
+  else {
+    collectionsNotSupported.value = true
+  }
+  if (inCollectionsResult.status === 'fulfilled') {
+    inCollectionsData = inCollectionsResult.value
+  }
+}
+
+const activeCollections = computed(() =>
+  tab.value === 'my_collections' ? collectionsData?.collections : inCollectionsData?.collections,
+)
+</script>
+
+<template>
+  <div>
+    <div flex w-full items-center lg:text-lg>
+      <button
+        v-for="option in tabOptions"
+        :key="option.name"
+        flex flex-auto cursor-pointer px3 m1 rounded transition-all
+        hover:bg-active transition-100
+        @click="tab = option.name"
+      >
+        <span
+          mxa px4 py3 text-center border-b-3
+          :class="tab === option.name ? 'font-bold border-primary' : 'op50 border-transparent'"
+        >{{ option.display }}</span>
+      </button>
+    </div>
+
+    <div v-if="activeCollections?.length" divide-y="base">
+      <NuxtLink
+        v-for="collection in activeCollections"
+        :key="collection.id"
+        :to="{
+          name: 'collection',
+          params: { server: currentServer, id: collection.id },
+        }"
+        block p-4 hover:bg-active transition-100
+      >
+        <div flex items-center gap-3>
+          <div i-ri:shapes-line text-xl shrink-0 text-secondary />
+          <div flex="~ col" min-w-0>
+            <div font-bold truncate>
+              {{ collection.name }}
+            </div>
+            <div v-if="collection.description" text-sm text-secondary truncate>
+              {{ collection.description }}
+            </div>
+            <div text-sm text-secondary>
+              <CommonLocalizedNumber keypath="collection.item_count" :count="collection.itemCount" />
+            </div>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+    <div v-if="collectionsNotSupported" p-4 text-secondary text-sm text-center>
+      {{ $t('error.collections_not_supported') }}
+    </div>
+    <div v-else p-4 text-secondary text-sm text-center>
+      {{ $t('collection.no_collections') }}
+    </div>
+  </div>
+</template>
diff --git a/locales/en.json b/locales/en.json
index 19c73da1f6..7082800238 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -99,6 +99,12 @@
     "edit_title": "Description",
     "remove_label": "Remove attachment"
   },
+  "collection": {
+    "created_by": "Created by",
+    "empty": "No accounts in this collection yet.",
+    "item_count": "{0} accounts|{0} account|{0} accounts",
+    "no_collections": "No collections yet."
+  },
   "command": {
     "activate": "Activate",
     "complete": "Complete",
@@ -192,6 +198,8 @@
   },
   "error": {
     "account_not_found": "Account {0} not found",
+    "collection_not_found": "Collection not found",
+    "collections_not_supported": "This server doesn't support collections.",
     "explore_list_empty": "Nothing is trending right now. Check back later!",
     "file_size_cannot_exceed_n_mb": "File size cannot exceed {0}MB",
     "quote_fetch_error": "Could not fetch the quoted post",
@@ -320,6 +328,7 @@
     "blocked_users": "Blocked users",
     "bookmarks": "Bookmarks",
     "built_at": "Built {0}",
+    "collections": "Collections",
     "compose": "Compose",
     "conversations": "Conversations",
     "docs": "Documentation",
@@ -347,7 +356,9 @@
     "zen_mode": "Zen Mode"
   },
   "notification": {
+    "added_you_to_collection": "added you to a collection",
     "and": "and",
+    "collection_updated": "updated a collection you're in",
     "favourited_post": "favorited your post",
     "followed_you": "followed you",
     "followed_you_count": "{0} people followed you|{0} person followed you|{0} people followed you",
@@ -695,10 +706,13 @@
   },
   "tab": {
     "accounts": "Accounts",
+    "collections": "Collections",
     "for_you": "For you",
     "hashtags": "Hashtags",
+    "in_collections": "Featuring you",
     "list": "List",
     "media": "Media",
+    "my_collections": "My collection",
     "news": "News",
     "notifications_admin": {
       "report": "Report",
diff --git a/package.json b/package.json
index ebe18fb123..94477659d5 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "iso-639-1": "^3.0.0",
     "lru-cache": "^11.0.0",
     "magic-string": "^0.30.19",
-    "masto": "^7.10.0",
+    "masto": "^7.12.0",
     "mocked-exports": "^0.1.1",
     "node-emoji": "^2.1.3",
     "nuxt": "^4.4.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a010229316..e6a181979b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,8 +196,8 @@ importers:
         specifier: ^0.30.19
         version: 0.30.21
       masto:
-        specifier: ^7.10.0
-        version: 7.10.0
+        specifier: ^7.12.0
+        version: 7.12.0
       mocked-exports:
         specifier: ^0.1.1
         version: 0.1.1
@@ -8138,8 +8138,8 @@ packages:
   marky@1.3.0:
     resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
 
-  masto@7.10.0:
-    resolution: {integrity: sha512-BTaivOeHkb87oND2Dp/QzRP5kWJnB5khH9xSsfS0N8WzEAziuKV4DjZAHdbh2SNemqwikQeYtMPBsl52Q9sreQ==}
+  masto@7.12.0:
+    resolution: {integrity: sha512-hSqRfaqVhtaRB3+lSJ4YusqBZ/tj4/gtzS0PXZgrg2JLiDFLmsBdmuyVVF2c+QlKSMEKo7grVh3dN8TX1TECVw==}
 
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
@@ -20200,7 +20200,7 @@ snapshots:
 
   marky@1.3.0: {}
 
-  masto@7.10.0:
+  masto@7.12.0:
     dependencies:
       change-case: 5.4.4
       events-to-async: 2.0.2